/* ═══════════════════════════════════════════════════════════════
   gs-navbar-global.css
   ADD this to your wwwroot/css/app.css  (global, not scoped)
   These rules MUST be global because Blazor scoped CSS cannot
   pierce child component boundaries reliably in all browsers.
   ═══════════════════════════════════════════════════════════════ */

/* ── Core palette ── */
:root {
    --gs-nb:     #1a3d2b;        /* topbar bg          */
    --gs-nb2:    #1f4a33;        /* drop L1 bg         */
    --gs-nb3:    #245538;        /* drop L2 bg         */
    --gs-nt:     #e8f5ee;        /* normal text        */
    --gs-ntw:    #ffffff;
    --gs-nh:     rgba(255,255,255,.11);   /* hover bg   */
    --gs-db:     rgba(255,255,255,.08);   /* border     */
    --gs-dh:     rgba(255,255,255,.09);   /* item hover */
    --gs-h:      3.5rem;
    --gs-accent: #6fcf8e;
    --gs-dr:     6px;
}

/* ────────────────────────────────────────────────────────────
   TOPBAR
   ──────────────────────────────────────────────────────────── */
.gs-topbar {
    background: linear-gradient(135deg, #1a3d2b 0%, #1f4a33 60%, #245538 100%);
    height: var(--gs-h);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    font-family: system-ui, sans-serif;
    font-size: .875rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Observer: slightly lighter */
.gs-topbar.obs-mode {
    background: linear-gradient(135deg, #245538 0%, #2e6b46 60%, #388a57 100%);
}

/* ────────────────────────────────────────────────────────────
   BRAND
   ──────────────────────────────────────────────────────────── */
.gs-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: .98rem;
    font-weight: 600;
    text-decoration: none;
    margin-inline-end: 1.2rem;
    flex-shrink: 0;
}
.gs-brand-dot {
    width: 28px; height: 28px;
    background: rgba(255,255,255,.18);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gs-brand-dot i { font-size: 15px; color: #fff; }
.gs-brand-text  { display: flex; flex-direction: column; line-height: 1.2; }
.gs-brand-sub   { font-size: 10px; color: rgba(255,255,255,.55); font-weight: 400; letter-spacing: .06em; }

/* ────────────────────────────────────────────────────────────
   MAIN NAV ROW
   ──────────────────────────────────────────────────────────── */
.gs-main-nav {
    display: flex;
    align-items: stretch;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

/* ── Category wrapper ── */
.gs-cat {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* ── Category button ── */
.gs-cat-btn {
    background: none;
    border: none;
    color: var(--gs-nt);
    height: var(--gs-h);
    padding: 0 .8rem;
    font-size: .845rem;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, color .14s;
    font-family: inherit;
    text-decoration: none;
    position: relative;
}
.gs-cat-btn i.ci  { font-size: 16px; }
.gs-cat-btn i.arr {
    font-size: 10px;
    opacity: .55;
    transition: transform .18s;
    margin-inline-start: 1px;
}

.gs-cat:hover > .gs-cat-btn,
.gs-cat.open  > .gs-cat-btn  { background: var(--gs-nh); color: #fff; }

.gs-cat.open > .gs-cat-btn i.arr { transform: rotate(180deg); }

/* Accent underline */
.gs-cat.open > .gs-cat-btn::after,
.gs-home-btn.active-page::after {
    content: '';
    position: absolute;
    bottom: 0; left: 8px; right: 8px;
    height: 2px;
    background: var(--gs-accent);
    border-radius: 2px 2px 0 0;
}

.gs-home-btn { color: var(--gs-nt); }
.gs-home-btn:hover,
.gs-home-btn.active-page { background: var(--gs-nh); color: #fff; }

/* ────────────────────────────────────────────────────────────
   LEVEL-1 DROPDOWN
   ──────────────────────────────────────────────────────────── */
.gs-drop1 {
    display: none;
    position: absolute;
    top: var(--gs-h);
    min-width: 215px;
    background: var(--gs-nb2);
    border: .5px solid var(--gs-db);
    border-radius: var(--gs-dr);
    padding: 5px 0;
    z-index: 200;
    list-style: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
[dir=ltr] .gs-drop1 { left: 0; }
[dir=rtl] .gs-drop1 { right: 0; }

.gs-cat:hover .gs-drop1,
.gs-cat.open  .gs-drop1 { display: block; }

/* ── L1 item ── */
.gs-di { position: relative; }

.gs-di-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .52rem .85rem;
    background: none;
    border: none;
    color: var(--gs-nt);
    font-size: .825rem;
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
    transition: background .13s, color .13s;
    font-family: inherit;
    text-decoration: none;
}
.gs-di-btn i.ic  { font-size: 15px; flex-shrink: 0; opacity: .8; }
.gs-di-btn .sa   { margin-inline-start: auto; font-size: 10px; opacity: .45; }

.gs-di:hover > .gs-di-btn       { background: var(--gs-dh); color: #fff; }
.gs-di-btn.active-link           { color: #fff; background: rgba(255,255,255,.10); }

.gs-sep { border: none; border-top: .5px solid var(--gs-db); margin: 4px 0; }

/* ────────────────────────────────────────────────────────────
   LEVEL-2 FLYOUT
   ──────────────────────────────────────────────────────────── */
.gs-drop2 {
    display: none;
    position: absolute;
    top: -5px;
    min-width: 205px;
    background: var(--gs-nb3);
    border: .5px solid var(--gs-db);
    border-radius: var(--gs-dr);
    padding: 5px 0;
    z-index: 300;
    list-style: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
[dir=ltr] .gs-drop2 { left: 100%;  margin-left:  2px; }
[dir=rtl] .gs-drop2 { right: 100%; margin-right: 2px; }

.gs-has-sub:hover > .gs-drop2 { display: block; }

.gs-di2-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .48rem .85rem;
    background: none;
    border: none;
    color: var(--gs-nt);
    font-size: .81rem;
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
    transition: background .13s, color .13s;
    font-family: inherit;
    text-decoration: none;
}
.gs-di2-btn i { font-size: 14px; flex-shrink: 0; opacity: .75; }
.gs-di2-btn:hover,
.gs-di2-btn.active-link { background: var(--gs-dh); color: #fff; }

/* ────────────────────────────────────────────────────────────
   LANGUAGE BAR
   ──────────────────────────────────────────────────────────── */
.gs-lang-bar {
    margin-inline-start: auto;
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.gs-lbtn {
    background: rgba(255,255,255,.10);
    border: .5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.7);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.gs-lbtn:hover,
.gs-lbtn.on {
    background: rgba(255,255,255,.22);
    color: #fff;
    border-color: rgba(255,255,255,.35);
}

/* ────────────────────────────────────────────────────────────
   ROLE BADGE
   ──────────────────────────────────────────────────────────── */
.gs-role-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    margin-inline-start: 6px;
    background: rgba(255,255,255,.08);
    border: .5px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.75);
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   LOGOUT  (targets LogoutButton child component)
   ──────────────────────────────────────────────────────────── */
.gs-logout-wrap button,
.gs-logout-wrap a {
    background: rgba(255,255,255,.08);
    border: .5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.7);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    transition: all .15s;
    text-decoration: none;
    margin-inline-start: 8px;
    white-space: nowrap;
}
.gs-logout-wrap button:hover,
.gs-logout-wrap a:hover {
    background: rgba(220,50,50,.25);
    border-color: rgba(220,80,80,.4);
    color: #ffaaaa;
}

/* ────────────────────────────────────────────────────────────
   MOBILE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .gs-main-nav   { display: none; }
    .gs-role-badge { display: none; }
}