/* ============================================================
   GenNova Dashboard Top Nav — gn-topnav.css
   Grid layout: leading | search | workspace | actions
   Load after gn-layout.css
   ============================================================ */

/* ── Shell ─────────────────────────────────────────────────── */
.gn-topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  overflow: visible;
  background: var(--gn-topnav-bg);
  border-bottom: 1px solid var(--gn-topnav-border);
}
/* Anchor for mobile search overlay */
@media (max-width: 575.98px) {
  .gn-topnav { position: sticky; }
  .gn-topnav__inner { position: relative; }
}

.gn-topnav__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--gn-topnav-h);
  padding: 0 20px;
  min-width: 0;
}

/* ── Leading (hamburger) ───────────────────────────────────── */
.gn-topnav__leading {
  display: flex;
  align-items: center;
  grid-column: 1;
}

.gn-ham {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 7px;
  border-radius: var(--gn-radius-sm);
  cursor: pointer;
  color: var(--gn-sidebar-text);
  line-height: 0;
  transition: background var(--gn-ease);
}
.gn-ham:hover { background: var(--gn-sidebar-hover-bg); }

/* ── Search ────────────────────────────────────────────────── */
.gn-topnav__search {
  position: relative;
  grid-column: 2;
  min-width: 0;
  max-width: var(--gn-topnav-search-max);
  justify-self: stretch;
}

.gn-topnav__search-field {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  background: var(--gn-content-bg);
  border: 1px solid var(--gn-sidebar-border);
  border-radius: var(--gn-radius);
  padding: 0 10px;
  height: 36px;
  cursor: text;
  transition: border-color var(--gn-ease), box-shadow var(--gn-ease), background var(--gn-ease);
}
.gn-topnav__search-field:focus-within {
  border-color: var(--gn-sidebar-active-color);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.1);
  background: var(--gn-topnav-bg);
}

.gn-topnav__search-icon {
  width: 14px;
  height: 14px;
  color: var(--gn-sidebar-text-muted);
  flex-shrink: 0;
  pointer-events: none;
}

.gn-topnav__search-field input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--gn-sidebar-text);
  min-width: 0;
  font-family: inherit;
  padding: 0;
}
.gn-topnav__search-field input::placeholder {
  color: var(--gn-sidebar-text-muted);
}

.gn-search-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 500;
  color: var(--gn-sidebar-text-muted);
  background: var(--gn-topnav-bg);
  border: 1px solid var(--gn-sidebar-border);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  font-family: inherit;
}
.gn-search-has-text .gn-search-kbd { display: none; }

/* Search results dropdown */
.gn-search-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--gn-topnav-bg);
  border: 1px solid var(--gn-topnav-border);
  border-radius: var(--gn-radius);
  box-shadow: 0 8px 30px rgba(30, 32, 60, 0.14);
  z-index: 501;
  max-height: 380px;
  overflow-y: auto;
  display: none;
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--gn-border) transparent;
}
.gn-search-results.gn-search-open { display: block; }

.gn-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--gn-radius-sm);
  text-decoration: none !important;
  cursor: pointer;
  color: var(--gn-sidebar-text);
  transition: background var(--gn-ease);
  outline: none;
}
.gn-search-result-item:hover,
.gn-search-result-item.gn-kbd-active {
  background: var(--gn-sidebar-active-bg);
  color: var(--gn-sidebar-active-color);
}
.gn-search-result-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-content-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gn-sidebar-active-color);
}
.gn-search-result-text { min-width: 0; flex: 1; }
.gn-search-result-label {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gn-search-result-sub {
  font-size: 11px;
  color: var(--gn-sidebar-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gn-search-result-item:hover .gn-search-result-sub,
.gn-search-result-item.gn-kbd-active .gn-search-result-sub {
  color: var(--gn-sidebar-active-color);
  opacity: 0.7;
}
.gn-search-empty {
  padding: 20px;
  text-align: center;
  color: var(--gn-sidebar-text-muted);
  font-size: 13px;
}
.gn-search-section-label {
  padding: 6px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gn-sidebar-text-muted);
}

/* Mobile search trigger (hidden on desktop) */
.gn-topnav__search-mobile {
  display: none;
}

/* Mobile search overlay panel */
.gn-topnav__search.gn-topnav__search--open {
  display: block;
}

/* ── Workspace (CSDL + license) ────────────────────────────── */
.gn-topnav__workspace {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 0;
  max-width: min(360px, 36vw);
  grid-column: 3;
  border: 1px solid var(--gn-topnav-border);
  border-radius: var(--gn-radius);
  background: var(--gn-content-bg);
  overflow: hidden;
}
.gn-topnav__workspace > * { position: relative; min-width: 0; }
.gn-topnav__workspace > * + *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--gn-topnav-border);
}

/* ── Actions (notif + user) ────────────────────────────────── */
.gn-topnav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  grid-column: -1;
}

.gn-topnav .dropdown-menu { z-index: 1100; }

.gn-topnav-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.45;
}

.gn-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--gn-radius);
  cursor: pointer;
  color: var(--gn-sidebar-text-muted);
  transition: background var(--gn-ease), color var(--gn-ease);
  position: relative;
  text-decoration: none !important;
}
.gn-action-btn:hover {
  background: var(--gn-sidebar-hover-bg);
  color: var(--gn-sidebar-text);
}
.gn-action-btn svg { width: 18px; height: 18px; }

.gn-theme-toggle--topnav {
  border: none;
  background: transparent;
  color: var(--gn-sidebar-text-muted, var(--gn-text-muted));
}
.gn-theme-toggle--topnav:hover {
  background: var(--gn-sidebar-hover-bg);
  color: var(--gn-sidebar-text, var(--gn-text));
  border-color: transparent;
}
.gn-theme-toggle--topnav .bi { font-size: 17px; }

/* CSDL — mở modal chọn mapping */
.gn-topnav-csdl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--gn-sidebar-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--gn-ease);
}
.gn-topnav-csdl:hover,
.gn-topnav-csdl:focus { background: var(--gn-sidebar-hover-bg); }
.gn-topnav-csdl-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.gn-topnav-csdl-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 120px;
}

.gn-notif-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--gn-error);
  border-radius: 50%;
  border: 1.5px solid var(--gn-topnav-bg);
}

/* User menu */
.gn-topnav-user-wrap {
  flex-shrink: 0;
  position: relative;
}
.gn-topnav-user {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px 4px 4px;
  border: none;
  border-radius: var(--gn-radius);
  background: transparent;
  color: var(--gn-sidebar-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: min(240px, 100%);
  transition: background var(--gn-ease);
  -webkit-appearance: none;
  appearance: none;
}
.gn-topnav-user:hover,
.gn-topnav-user:focus {
  background: var(--gn-sidebar-hover-bg);
  color: var(--gn-sidebar-text);
}
.gn-topnav-user.dropdown-toggle::after { display: none !important; }
.gn-topnav-user .gn-user-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
  flex-shrink: 0;
}
.gn-topnav-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 180px;
  text-align: right;
}

.gn-topnav-dropdown {
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--gn-topnav-border) !important;
  border-radius: var(--gn-radius) !important;
  box-shadow: 0 4px 20px rgba(30, 32, 60, 0.1) !important;
  background: var(--gn-topnav-bg) !important;
  margin-top: 6px !important;
}
.gn-topnav-dropdown .gn-dd-header {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--gn-topnav-border);
  margin-bottom: 4px;
}
.gn-topnav-dropdown .gn-dd-email {
  font-size: 12px;
  font-weight: 600;
  color: var(--gn-sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gn-topnav-dropdown .gn-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--gn-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--gn-sidebar-text);
  text-decoration: none !important;
  transition: background var(--gn-ease);
}
.gn-topnav-dropdown .gn-dd-item:hover {
  background: var(--gn-sidebar-hover-bg);
  color: var(--gn-sidebar-text);
}
.gn-topnav-dropdown .gn-dd-item.danger { color: var(--gn-error); }
.gn-topnav-dropdown .gn-dd-item.danger:hover {
  background: var(--gn-error-bg);
  color: var(--gn-error);
}
.gn-topnav-dropdown .gn-dd-item svg,
.gn-topnav-dropdown .gn-dd-item .bi {
  flex-shrink: 0;
  opacity: 0.65;
}
.gn-topnav-dropdown .gn-dd-item .bi { font-size: 15px; }
.gn-topnav-dropdown .gn-dd-divider {
  border: none;
  border-top: 1px solid var(--gn-topnav-border);
  margin: 4px 0;
}

/* Bản quyền topic — trong menu user, ngay trên Đăng xuất */
.gn-dd-license {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 6px 6px;
  padding: 10px 12px;
  border-radius: var(--gn-radius);
  text-decoration: none !important;
  transition: filter var(--gn-ease), background var(--gn-ease);
}
.gn-dd-license:hover { filter: brightness(0.97); color: inherit; }
.gn-dd-license-icon {
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.85;
}
.gn-dd-license-icon .bi { font-size: 15px; }
.gn-dd-license-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gn-dd-license-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
.gn-dd-license-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.gn-dd-license-active {
  color: var(--gn-primary);
  background: rgba(var(--gn-primary-rgb), 0.08);
}
.gn-dd-license-warning {
  color: var(--gn-topnav-warning, var(--gn-warning));
  background: var(--gn-warning-bg, #fffbeb);
}
.gn-dd-license-expired,
.gn-dd-license-none {
  color: var(--gn-error, #b91c1c);
  background: var(--gn-error-bg, #fef2f2);
}
.gn-dd-perm-role-owner,
.gn-dd-perm-role-super {
  background: rgba(var(--gn-primary-rgb), 0.12);
  color: var(--gn-primary);
}
.gn-dd-perm-role-shared { background: var(--gn-success-bg); color: var(--gn-success); }
.gn-dd-perm-list { line-height: 1.6; max-height: 120px; overflow-y: auto; }

/* Fallback: page title inside topnav (unused; breadcrumb bar uses h1) */
.gn-topnav .gn-page-title { display: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1399.98px) {
  .gn-topnav-csdl-label { max-width: 120px; }
  .gn-topnav-user-name { max-width: 140px; }
}

@media (max-width: 1199.98px) {
  .gn-topnav__workspace { max-width: min(280px, 34vw); }
  .gn-topnav-csdl-label { max-width: 96px; }
  .gn-topnav-user-name { max-width: 120px; }
}

@media (max-width: 991.98px) {
  .gn-ham { display: flex; }
  .gn-topnav__inner { padding: 0 14px; gap: 8px; }
  .gn-topnav__search { max-width: none; }
  .gn-search-kbd { display: none; }
  .gn-topnav-user-name { display: none; }
}

@media (max-width: 767.98px) {
  .gn-topnav__search { min-width: 72px; }
  .gn-action-btn { width: 32px; height: 32px; }
}

@media (max-width: 575.98px) {
  .gn-topnav__inner {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding: 0 10px;
  }
  /* Search bar hidden; mobile trigger in actions */
  .gn-topnav__search:not(.gn-topnav__search--open) {
    display: none;
  }
  .gn-topnav__search.gn-topnav__search--open {
    display: block;
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(var(--gn-topnav-h) + 4px);
    max-width: none;
    z-index: 110;
    grid-column: 1 / -1;
  }
  .gn-topnav__search-mobile { display: inline-flex; }
  .gn-topnav__workspace { max-width: none; }
  .gn-topnav-csdl-label { display: none; }
  .gn-topnav-csdl {
    padding: 6px 8px;
    min-width: 36px;
    justify-content: center;
  }
}

@media (max-width: 399.98px) {
  .gn-topnav-notif { display: none; }
  .gn-topnav-user { padding: 4px 6px 4px 4px; }
}

/* ═══════════════════════════════════════════════
   Mapping picker modal
═══════════════════════════════════════════════ */
.gn-mapping-picker-modal .modal-dialog { max-width: 420px; }
.gn-mapping-picker-modal .modal-body { max-height: min(60vh, 420px); display: flex; flex-direction: column; }

.gn-mapping-picker-search-wrap {
  position: relative;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.gn-mapping-picker-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--gn-sidebar-text-muted);
  pointer-events: none;
}
.gn-mapping-picker-search-wrap input {
  padding-left: 32px;
  border-radius: var(--gn-radius);
  background: var(--gn-content-bg);
  border-color: var(--gn-sidebar-border);
  color: var(--gn-sidebar-text);
}

.gn-mapping-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.gn-mapping-picker-item { margin: 0; }
.gn-mapping-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--gn-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--gn-ease);
  color: var(--gn-sidebar-text);
}
.gn-mapping-picker-btn:hover,
.gn-mapping-picker-item.is-current .gn-mapping-picker-btn {
  background: var(--gn-sidebar-hover-bg);
}
.gn-mapping-picker-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.gn-mapping-picker-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gn-mapping-picker-sub {
  font-size: 12px;
  color: var(--gn-sidebar-text-muted);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gn-mapping-picker-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gn-mapping-picker-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--gn-radius-pill);
  white-space: nowrap;
}
.gn-mapping-picker-role-owner {
  background: rgba(var(--gn-primary-rgb), 0.12);
  color: var(--gn-primary);
}
.gn-mapping-picker-role-shared {
  background: var(--gn-success-bg);
  color: var(--gn-success);
}
.gn-mapping-picker-check {
  color: var(--gn-primary);
  display: flex;
  align-items: center;
}
.gn-mapping-picker-empty { padding: 12px 0 4px; }