/*
 * TGI Shared Navigation — styling.
 *
 * Deliberately self-scoped under .tgi-nav with its own local CSS variables
 * (--tgi-*) instead of reusing each page's --primary / --card-bg tokens.
 * Pages have drifted (e.g. ticketing_page.html uses --primary-color instead
 * of --primary) — scoping this way means the shared nav renders identically
 * everywhere regardless of what a given page's :root happens to define.
 *
 * Include once per page, in <head>, alongside nav_shared.js:
 *   <link rel="stylesheet" href="claude/nav_shared.css">
 *
 * LAYOUT — one grouped markup, two renderings (see buildMenuHtml() in
 * nav_shared.js):
 *   · DESKTOP: the sections sit side by side in a wide panel, so the whole
 *     menu is on screen at once. The old single column was ~25 rows tall —
 *     taller than the screen — and the bottom entries were invisible unless
 *     you noticed the inner scrollbar.
 *   · PHONE: the sections stack and collapse like an accordion; only the
 *     section you are currently working in opens by itself. Four short
 *     headers instead of an endless thumb-scroll.
 */
.tgi-nav {
    --tgi-primary: #0F3BA2;
    --tgi-primary-soft: #EAF0FC;
    --tgi-card-bg: #FFFFFF;
    --tgi-bg: #F5F7FB;
    --tgi-border: #DCE4F2;
    --tgi-text: #1E2530;
    --tgi-text-muted: #505A69;
    --tgi-danger: #DC2626;
    --tgi-danger-light: rgba(220, 38, 38, 0.14);
    --tgi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tgi-font-mono: 'IBM Plex Mono', 'Consolas', monospace;
    position: relative;
    font-family: var(--tgi-font-body);
}

.tgi-nav .user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--tgi-card-bg);
    color: var(--tgi-text);
    border: 1px solid var(--tgi-border);
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--tgi-font-body);
    font-weight: 700;
    font-size: 13.5px;
    transition: border-color 0.15s ease;
}
.tgi-nav .user-menu-trigger:hover { border-color: var(--tgi-primary); }

.tgi-nav .user-menu-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgi-nav .user-menu-caret {
    transition: transform 0.15s ease;
    opacity: 0.6;
    flex-shrink: 0;
}
.tgi-nav.open .user-menu-caret { transform: rotate(180deg); }

/* ---------- The panel ---------- */
.tgi-nav .user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--tgi-card-bg);
    border: 1px solid var(--tgi-border);
    border-radius: 14px;
    /* Wide enough for three columns, never wider than the screen. */
    width: min(700px, calc(100vw - 28px));
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    box-shadow: 0 18px 44px -10px rgba(15, 30, 70, 0.22);
    z-index: 1000;
    padding: 10px 12px 12px;
    box-sizing: border-box;
}
.tgi-nav.open .user-menu-dropdown { display: block; }

/* Accounts with only one or two groups keep the classic narrow dropdown —
   a wide panel around four links reads as broken. */
.tgi-nav .user-menu-dropdown.user-menu-slim { width: min(300px, calc(100vw - 28px)); }
.tgi-nav .user-menu-slim .user-menu-groups { columns: auto; column-count: 1; }
.tgi-nav .user-menu-slim .user-menu-foot { flex-direction: column; }

/* DESKTOP: masonry-style columns — each group is an unbreakable block, and
   the browser packs them into columns so tall groups (Operations) and short
   ones (Admin) balance out instead of leaving holes. */
.tgi-nav .user-menu-groups {
    columns: 3 190px;
    column-gap: 16px;
}
.tgi-nav .user-menu-group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 4px;
}

/* Section header. On desktop it is a plain label (the caret and the count
   are hidden and a click does nothing); on a phone it becomes the tap
   target that opens the section. */
.tgi-nav .user-menu-section {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    text-align: left;
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tgi-text-muted);
    font-family: var(--tgi-font-mono);
    cursor: default;
}
.tgi-nav .user-menu-sec-count { display: none; }
.tgi-nav .user-menu-sec-caret { display: none; }

.tgi-nav .user-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--tgi-text);
    font-family: var(--tgi-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
}
.tgi-nav .user-menu-emoji { flex-shrink: 0; }
.tgi-nav .user-menu-label { min-width: 0; }
.tgi-nav .user-menu-item:hover { background: rgba(15, 59, 162, 0.06); }

.tgi-nav .user-menu-item-current {
    background: rgba(15, 59, 162, 0.12);
    color: var(--tgi-primary);
    font-weight: 700;
}

/* Kept for safety — the old flat markup used it, and third-party pages may
   still render it. */
.tgi-nav .user-menu-divider {
    height: 1px;
    background: var(--tgi-border);
    margin: 4px 0;
}

/* Footer bar: Check Email / Change Password / Logout as a compact row under
   everything, clearly separated from the modules. */
.tgi-nav .user-menu-foot {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--tgi-border);
    margin-top: 8px;
    padding-top: 10px;
}
.tgi-nav .user-menu-foot .user-menu-item {
    width: auto;
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    background: var(--tgi-bg);
    border: 1px solid var(--tgi-border);
    padding: 9px 12px;
    font-size: 12.5px;
    white-space: nowrap;
}
.tgi-nav .user-menu-foot .user-menu-item:hover { border-color: var(--tgi-primary); background: var(--tgi-primary-soft); }

.tgi-nav .user-menu-logout { color: var(--tgi-danger); }
.tgi-nav .user-menu-logout:hover { background: var(--tgi-danger-light); }
.tgi-nav .user-menu-foot .user-menu-logout:hover { border-color: var(--tgi-danger); background: var(--tgi-danger-light); }

/* ==================== PHONE ==================== */
@media (max-width: 700px) {
    /* The mount div shrink-wraps by default; stretched here so the trigger
       and the panel both get the full header width. */
    .tgi-nav-mount { flex: 1 1 100%; width: 100%; min-width: 0; }
    .tgi-nav { width: 100%; }
    .tgi-nav .user-menu-trigger { width: 100%; justify-content: center; }

    .tgi-nav .user-menu-dropdown,
    .tgi-nav .user-menu-dropdown.user-menu-slim {
        left: 0;
        right: 0;
        width: auto;
        max-height: 78vh;
        padding: 6px 8px 10px;
    }

    /* Single stacked column — the accordion. */
    .tgi-nav .user-menu-groups { columns: auto; column-count: 1; }
    .tgi-nav .user-menu-group { margin-bottom: 0; }

    /* Section headers become real tap targets: full-width rows with the
       item count and a caret, separated by hairlines. */
    .tgi-nav .user-menu-section {
        cursor: pointer;
        padding: 13px 12px;
        font-size: 11.5px;
        border-top: 1px solid var(--tgi-border);
        color: var(--tgi-text);
    }
    .tgi-nav .user-menu-group:first-child .user-menu-section { border-top: none; }
    .tgi-nav .user-menu-section > span:first-child { flex: 1; }
    .tgi-nav .user-menu-sec-count {
        display: inline-block;
        min-width: 20px;
        text-align: center;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--tgi-text-muted);
        background: var(--tgi-bg);
        border: 1px solid var(--tgi-border);
        border-radius: 999px;
        padding: 1px 6px;
    }
    .tgi-nav .user-menu-sec-caret {
        display: block;
        opacity: 0.55;
        transition: transform 0.15s ease;
        flex-shrink: 0;
    }
    .tgi-nav .user-menu-group.open .user-menu-sec-caret { transform: rotate(180deg); }

    /* Closed sections hide their links; the section you are on starts open
       (set at render time in nav_shared.js). */
    .tgi-nav .user-menu-group:not(.open) .user-menu-group-items { display: none; }
    .tgi-nav .user-menu-group.open .user-menu-group-items { padding-bottom: 6px; }

    /* Thumb-sized rows. */
    .tgi-nav .user-menu-item {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 9px;
    }

    .tgi-nav .user-menu-foot { padding-top: 8px; }
    .tgi-nav .user-menu-foot .user-menu-item {
        flex: 1 1 130px;
        padding: 11px 10px;
        font-size: 13px;
    }

    /* The logged-in greeting must never run off-screen on phones: allow
       wrapping and cap it to the header width. !important because each
       page's inline stylesheet sets white-space: nowrap and loads after
       this file. */
    .user-greeting {
        white-space: normal !important;
        overflow-wrap: anywhere;
        max-width: 100%;
        line-height: 1.5;
    }
}


/* Header consistency: on desktop the user menu stays pinned to the top-right
   of the header bar on every page, even when the title + greeting are long —
   the title side wraps internally instead of pushing the menu to a new row. */
@media (min-width: 769px) {
    .header-section { flex-wrap: nowrap !important; }
    .header-section .header-title-container { min-width: 0 !important; flex-wrap: wrap !important; }
    .header-section .top-right-actions { flex-shrink: 0 !important; margin-left: auto !important; width: auto !important; }
}