/* Extracted from app/views/layout.php */

/* --- 1. GLOBAL LAYOUT & TOPBAR ---
   The menu moved out of this bar and down the left edge (section 7). What is
   left up here is only what is not a page: the search, the translator, and who
   is logged in. It is light now, because a dark bar above a dark column read
   as one very tall black block. */

    .topbar {
      position: sticky;
      top: 0;
      z-index: 900;
    }

    /* MOBILE: the bar scrolls along rather than following the page down - on a
       small screen a pinned bar is a third of what one can see. */
    @media (max-width: 768px) {
      .topbar { position: static; transform: none !important; }
    }

    /* The search, dressed as the field it opens. It is a button: the dialog
       has the real input in it, and two inputs for one search is one too many. */
    .topbar-search {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      flex: 1 1 200px;
      max-width: 340px;
      height: 38px;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--bg-subtle);
      color: var(--text-faint);
      font-family: inherit;
      font-size: .87rem;
      text-align: left;
      cursor: pointer;
    }
    .topbar-search:hover { border-color: var(--border-strong); background: var(--bg-card); }
    .topbar-search > .uv-icon { flex: none; }
    .topbar-search-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .topbar-kbd {
      flex: none;
      padding: 1px 6px;
      border: 1px solid var(--border-strong);
      border-radius: 5px;
      background: var(--bg-card);
      font-family: monospace;
      font-size: .7rem;
    }

    /* The hamburger, only where the column is folded away. */
    .side-open {
      display: none;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--bg-card);
      color: var(--text-strong);
      cursor: pointer;
    }
    @media (max-width: 768px) {
      .side-open { display: inline-flex; }
      .topbar-search-text, .topbar-kbd { display: none; }
      .topbar-search { flex: 0 0 auto; width: 38px; max-width: 38px; padding: 0; justify-content: center; }
    }

    /* --- 2. NAVIGATION ICONS (DESKTOP STANDARD) --- */
    
    .nav-tools {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .btn-icon-nav {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0 10px;
        display: flex;
        align-items: center;
        height: 36px;
        transition: color 0.2s, background 0.2s;
        border-radius: 8px;
    }

    .btn-icon-nav:hover {
        color: var(--text-main);
        background: var(--bg-muted);
    }

    .mobile-label {
        display: none; /* Hide text on desktop */
    }

    /* --- 3. MODALS (Global Search & Translate & AI) --- */

    .gs-overlay {
        display: none; 
        position: fixed; 
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.4); 
        backdrop-filter: blur(3px);
        z-index: 2000; 
        
        /* IMPORTANT FOR SCROLLING FIX: */
        overflow-y: auto;          /* Allows the overlay to scroll */
        align-items: flex-start;   /* Modal starts at the top, not centered */
        padding-top: 10vh;         /* Spacing from the top */
        padding-bottom: 50px;      /* Space at the bottom for mobile scroll */
        justify-content: center;   /* Horizontally centered */
    }

    .gs-box {
        background: var(--bg-card); 
        width: 600px; 
        max-width: 95%; 
        border-radius: 8px; 
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        display: flex; 
        flex-direction: column;
        margin-bottom: 20px; 
        position: relative;
    }

    /* Note: AI modal styles were moved into the partial */

    .gs-header {
        display: flex; align-items: center; padding: 15px 20px;
        border-bottom: 1px solid var(--border); gap: 12px;
        background: var(--bg-subtle);
        border-radius: 8px 8px 0 0;
    }

    /* Global Search Specifics */
    .gs-header > .uv-icon { color: var(--text-faint); flex: none; }
    #gs-input { border: none; outline: none; font-size: 1.1rem; flex: 1; color: var(--text-strong); background:transparent; padding: 0; margin: 0; }
    /* app.css gives every focused input a blue ring; inside the search bar
       that draws a box around a field which has no border of its own. */
    #gs-input:focus { border: none; box-shadow: none; outline: none; }
    .gs-badge { font-size: 0.7rem; background: var(--bg-card); color: var(--text-faint); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); font-family: monospace; }

    /* Closing the search. Both halves are in the markup all the time and the
       mobile block below decides which one is drawn: the word where somebody
       has the key it names, the cross where they have a thumb. */
    .gs-close {
        flex: none; display: inline-flex; align-items: center; justify-content: center;
        border: none; background: none; padding: 0; margin: 0;
        color: var(--text-faint); cursor: pointer;
    }
    .gs-close:hover .gs-badge { border-color: var(--border-strong); color: var(--text-main); }
    .gs-close-x { display: none; }

    .gs-results { max-height: 60vh; overflow-y: auto; padding: 0; }
    .gs-empty { padding: 30px; text-align: center; color: var(--text-faint); font-size: 0.9rem; }
    .gs-empty.is-error { color: var(--danger); }
    .gs-section { padding: 8px 15px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--bg-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .gs-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 15px; cursor: pointer; text-decoration: none; color: inherit; border-left: 3px solid transparent; }
    .gs-item:hover { background: var(--bg-subtle); }

    /* The keyboard selection has to be clearly visible - it is the entry that
       Enter opens. Hover alone is not enough for that. */
    .gs-item.is-active { background: var(--info-bg); border-left-color: var(--accent); }

    .gs-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--bg-muted); color: var(--text-faint); margin-top: 1px; }
    .gs-item.is-active .gs-icon { background: var(--bg-card); color: var(--accent); }
    .gs-info { display: flex; flex-direction: column; min-width: 0; }
    .gs-title { font-weight: 600; font-size: 0.9rem; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gs-sub { font-size: 0.8rem; color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .gs-footer {
        display: flex; gap: 18px; flex-wrap: wrap;
        padding: 9px 15px; border-top: 1px solid var(--border);
        background: var(--bg-subtle); border-radius: 0 0 8px 8px;
        font-size: .74rem; color: var(--text-faint);
    }
    .gs-footer kbd {
        display: inline-block; min-width: 18px; text-align: center;
        padding: 1px 5px; margin-right: 3px;
        border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
        background: var(--bg-card); font-family: monospace; font-size: .72rem; color: var(--text-faint);
    }
    @media (max-width: 640px) { .gs-footer { display: none; } }

    /* --- 4. MOBILE OPTIMIZATION --- */
    
    @media (max-width: 768px) {
        
        /* A. THE BAR STAYS A ROW
           It used to stack, because the whole menu was in it. It is four
           things now and they fit beside each other. */
        .topbar { flex-wrap: nowrap; gap: 8px; }

        .btn-icon-nav { height: 38px; padding: 0 9px; }

        /* No room for the word beside the symbol up here; the column has it. */
        .mobile-label { display: none; }

        /* B. MODAL ADJUSTMENTS */
        .gs-overlay {
            padding-top: 20px; 
            align-items: flex-start; 
        }

        .gs-box {
            width: 95%;
            height: auto;
            border-radius: 8px;
        }

        /* No ESC key on this screen. The same button, drawn as something to
           tap - and big enough to hit, which a 0.7rem monospace word is not. */
        .gs-close-x { display: inline-flex; }
        /* Only the search bar's own badge - the assistant has one of these in
           its header too, and it is that panel's way out. */
        .gs-header .gs-badge { display: none; }
        .gs-close {
            width: 40px; height: 40px; margin-right: -8px;
            border-radius: 50%;
        }
        .gs-close:active { background: var(--bg-muted); }
    }
    
    /* --- 6. NAV BADGES --- */

    .nav-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--danger); /* Red for mail */
        color: var(--text-on-state);
        font-size: 0.7rem;
        font-weight: bold;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 10px;
        margin-left: 5px;
        vertical-align: middle;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        animation: pulse-red 2s infinite;
    }

    .nav-badge.line-color {
        background: #06c755; /* LINE green */
    }

    /* WhatsApp green. Each channel wears its own colour, so a glance at the
       column says which one is waiting without reading the word. */
    .nav-badge.wa-color { background: #25d366; color: #08331a; }

    @keyframes pulse-red {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

/* --- Interface icons (see src/Support/Icon.php) --------------------------
   Icons take the surrounding text colour, so a state only needs a class. */
.uv-icon { vertical-align: -.18em; flex: none; }
.uv-icon.ok     { color: var(--success); }
.uv-icon.danger { color: var(--danger); }
.uv-icon.warn   { color: var(--warning); }
.uv-icon.muted  { color: var(--text-muted); }

/* Only for a screen reader: a label that would be noise on screen but is the
   difference between "checkbox" and "new case, e-mail" when read aloud. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Secondary timezone appended by dt() (see app/helpers.php). */
.dt-secondary { color: var(--text-muted); font-size: .9em; }

/* --- 7. THE MENU: A COLUMN ON THE LEFT ------------------------------------
   Eleven entries were already too many for one row at 1400px, the travel side
   of the business adds seven more, and the roadmap another handful. A row is
   horizontal space and that is what ran out; a column is vertical space and
   there is a screenful of it. Every entry is visible at once, with its own
   count, and it takes headings - which a single row had nowhere to put.

   The width is a variable so that one class on <body> narrows the column and
   the page follows. */

:root { --side-w: 236px; }

.desk-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    /* Beside the page, not over it: a modal that dims the screen has to dim
       the menu too, and every dialog in the application sits at 1000 or above.
       On a phone the column is pulled over the page and takes 2200 there. */
    z-index: 900;
    width: var(--side-w);
    display: flex;
    flex-direction: column;
    background: var(--primary);
    color: var(--text-on-dark);
    transition: width .16s ease;
}

/* The page starts where the column ends. */
body.has-side .desk-main { margin-left: var(--side-w); transition: margin-left .16s ease; }

/* ------------------------------------------------------------------ brand -
   The name stacked beside the logo: same words, half the width. Both lines
   come from .env.php (BRAND_TOP, BRAND_SUB). */
.desk-side .side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 13px 12px 11px;
}
.desk-side .brand-link { flex: 1; min-width: 0; overflow: hidden; }
.desk-side .brand-logo { height: 32px; }

/* The name stacked beside the logo instead of strung out next to it: same
   words, about half the width. Lives here rather than in the column's own
   block because the login page has no column and still shows the name. */
.brand-link {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
}
.brand-logo { height: 34px; width: auto; display: block; }
.brand-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.02;
    white-space: nowrap;
}
.brand-head { font-size: 1.02rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }

/* Quieter and smaller: it is the second half of a name, not a second name. */
.brand-tail {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    opacity: .72;
}

.topbar .brand { flex: 0 0 auto; letter-spacing: 0; }

.side-close {
    display: none;               /* only where the column lies over the page */
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    color: var(--text-on-dark);
    cursor: pointer;
}

/* ----------------------------------------------------------------- entries */
.side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 14px; }
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

/* A heading is only printed when something is left under it - see the
   partial. Quiet on purpose: it names a shelf, it is not an entry. */
.side-head {
    margin: 14px 0 4px;
    padding: 0 10px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
}

/* One shape for every entry, whether it is a link or a group button. In the
   old bar only the links were styled and the buttons inherited nothing, so
   padding, size and weight all differed - that is what made it look uneven. */
.side-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: .885rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(255,255,255,.74);
    cursor: pointer;
}
.side-item:hover { background: rgba(255,255,255,.09); color: var(--text-on-dark); }
.side-item.is-active { background: rgba(255,255,255,.14); color: var(--text-on-dark); font-weight: 600; }

/* A mark at the very edge of the column, so the current page is recognisable
   from the corner of the eye and not only by a slightly lighter box. */
.side-item.is-active::before {
    content: "";
    position: absolute;
    left: -8px; top: 7px; bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.side-item > .uv-icon { flex: 0 0 17px; }
.side-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side-item.is-admin { color: #fbbf24; }

/* ------------------------------------------------------------------ groups */
.side-group-btn > .uv-icon:last-child { flex: 0 0 13px; opacity: .55; transition: transform .15s; }
.side-group.is-open > .side-group-btn > .uv-icon:last-child { transform: rotate(180deg); }

/* Unfolds in place rather than hovering over the column: a panel would cover
   the entries beside it, and in a column there is room to simply push down. */
.side-sub { display: none; margin: 2px 0 6px; }
.side-group.is-open > .side-sub { display: block; }

.side-sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 7px 41px;      /* lines up under the label, not the icon */
    border-radius: 7px;
    font-size: .845rem;
    text-decoration: none;
    color: rgba(255,255,255,.62);
}
.side-sub a:hover { background: rgba(255,255,255,.07); color: var(--text-on-dark); }
.side-sub a.is-active { background: rgba(255,255,255,.1); color: var(--text-on-dark); font-weight: 600; }

/* -------------------------------------------------------------------- foot */
.side-foot { padding: 8px; border-top: 1px solid rgba(255,255,255,.1); }
.side-toggle-wide   { display: inline-flex; flex: 0 0 17px; }
.side-toggle-narrow { display: none; }

/* A count that pulses all day in a column one always looks at is a nuisance;
   in a bar one glanced at it was a reminder. Same badge, no animation. */
.desk-side .nav-badge { margin-left: 0; animation: none; box-shadow: none; }

/* -------------------------------------------------------- the narrow column
   Only on a desktop: on a phone the column is folded away entirely, and a
   narrow-and-folded-away column is nothing at all. */
@media (min-width: 769px) {
    body.side-narrow { --side-w: 64px; }

    body.side-narrow .side-label,
    body.side-narrow .brand-name,
    body.side-narrow .side-group-btn > .uv-icon:last-child { display: none; }

    body.side-narrow .side-item { justify-content: center; gap: 0; padding: 10px 0; }
    body.side-narrow .side-brand { justify-content: center; padding: 13px 0 11px; }

    /* The heading becomes the line it always was underneath. */
    body.side-narrow .side-head {
        height: 1px;
        margin: 12px 8px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        background: rgba(255,255,255,.12);
    }

    /* Sub-pages cannot be shown next to a 64px column, so the group does not
       pretend to open: clicking it widens the column again (layout.js). */
    body.side-narrow .side-sub { display: none !important; }

    /* The number stays a number. A dot would say "something" where the column
       could just as well say "18". */
    body.side-narrow .nav-badge {
        position: absolute;
        top: 2px; right: 4px;
        min-width: 16px; height: 16px;
        padding: 0 3px;
        font-size: .6rem;
    }

    body.side-narrow .side-toggle-wide { display: none; }
    body.side-narrow .side-toggle-narrow { display: inline-flex; }
}

/* ------------------------------------------------------------- the phone --
   Folded away and pulled over the page on demand. Off-canvas rather than
   squeezed: 236px of a 390px screen is not a menu beside a page, it is a menu
   instead of one. */
@media (max-width: 768px) {
    body.has-side .desk-main { margin-left: 0; }

    .desk-side {
        width: 272px;
        z-index: 2200;               /* over the bar and over the page */
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    /* The shadow belongs to the open column. On the folded-away one it spilled
       past the screen edge and drew a grey band down the side of every page. */
    body.side-open .desk-side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.5); }
    body.side-open { overflow: hidden; }

    .side-close { display: inline-flex; }

    /* Behind the column: one tap anywhere on the page closes it. */
    .desk-scrim {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2150;
        background: rgba(0,0,0,.45);
    }
    body.side-open .desk-scrim { display: block; }

    /* --- while a finger is on it -----------------------------------------
       The column can also be pulled in from the left edge and pushed back
       out, the way a phone does it. While that is happening the column has
       to sit exactly where the finger is - so the transition that makes the
       button feel smooth has to be off, or every frame would be chasing the
       last one. Both are put back on the way up. See layout.js. */
       Where the pull starts is decided from the coordinates rather than by
       putting an invisible strip down the left edge: a strip would be on top
       of whatever is at the edge of the page and would eat its taps. */
    body.side-dragging .desk-side { transition: none; }
    body.side-dragging .desk-scrim { display: block; background: rgba(0,0,0,0); }

    /* Narrow is a desktop idea: on a phone the column is either over the page
       or not there at all, and there is nothing in between to offer. */
    .side-toggle { display: none; }

    /* Room for a thumb. */
    .side-item { padding: 11px 10px; }
    .side-sub a { padding: 10px 10px 10px 41px; }
}

/* ==================================================== light, dark, device ==
   One button that goes round three settings, so it has three faces and shows
   the one it is on. Which one is decided by the class on <html>, printed by
   the server from a cookie - see app/views/layout.php. */

.theme-glyph { display: none; align-items: center; }

:root.theme-auto  .theme-glyph-auto,
:root.theme-light .theme-glyph-light,
:root.theme-dark  .theme-glyph-dark { display: inline-flex; }