/* =========================================================================
   Side navigation - the expandable rail that replaced the row of buttons in
   every page head. Collapsed it is a 64px column of icons; hovered, focused
   or tapped open it slides out to 264px *over* the page, so opening it never
   reflows the wide duty and leave grids underneath.
   Same palette as the rest of the site (shrtdutymanagement.com/2026AL).
   ========================================================================= */

:root {
    --nav-rail: 64px;
    /* Wide enough for the longest label - "Check request (compensation leave)"
       - which the items keep on one line. The open rail is fixed and the page's
       padding follows --nav-rail, not this, so widening it slides nothing. */
    --nav-open: 320px;
}

/* Only the rail's width is reserved. The open panel floats.
   The inset is added on top, so in landscape on a notched phone the rail sits
   beside the notch rather than under it. */
body:has(.side-nav) {
    padding-left: calc(var(--nav-rail) + 24px + env(safe-area-inset-left, 0px));
}

.side-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--nav-rail);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Padded away from the notch on the left and the home indicator below, so
       the first icon and the last are both reachable on a modern iPhone. */
    padding: 12px 10px;
    padding-left:   calc(10px + env(safe-area-inset-left, 0px));
    padding-top:    calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease;
}
.side-nav:hover,
.side-nav:focus-within,
.side-nav.open {
    width: var(--nav-open);
    overflow-y: auto;
    box-shadow: 0 12px 30px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);
}

/* ---- the menu button at the top of the rail --------------------------- */
.side-nav-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    text-align: left;
}
.side-nav-toggle:hover { background: #f3f4f6; color: #111827; }
.side-nav-toggle:focus-visible {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ---- groups ------------------------------------------------------------ */
.side-nav-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.side-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid #f1f3f7;
}
.side-nav-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* The section heading is meaningless beside a column of icons, so it only
   appears once there is room for words. */
.side-nav-label {
    padding: 0 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    white-space: nowrap;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity .18s ease;
}
.side-nav:hover .side-nav-label,
.side-nav:focus-within .side-nav-label,
.side-nav.open .side-nav-label { opacity: 1; height: auto; }

.side-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.side-nav-item:hover { background: #f3f4f6; color: #111827; }
.side-nav-item.active { background: #eff6ff; color: #1d4ed8; }
.side-nav-item:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.side-nav-ico { width: 22px; height: 22px; flex: 0 0 22px; }

/* A count on an entry - the request board's waiting cards. On the icon's
   top-right corner rather than at the end of the row, so it shows in the shut
   rail where there is no row to be at the end of, and stays where the eye
   already knows to look when the rail opens. Red, because it is a number of
   things waiting on somebody, and that is the colour the site uses for that. */
.side-nav-item { position: relative; }
.side-nav-badge {
    position: absolute; top: 4px; left: 24px;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
    letter-spacing: 0; box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.side-nav-item.active .side-nav-badge { box-shadow: 0 0 0 2px #eff6ff; }

/* Labels are laid out at full width the whole time and simply clipped by the
   rail, so nothing jumps sideways as the panel opens. */
.side-nav-text {
    opacity: 0;
    transition: opacity .18s ease;
}
.side-nav:hover .side-nav-text,
.side-nav:focus-within .side-nav-text,
.side-nav.open .side-nav-text { opacity: 1; }

/* ---- who is signed in, at the foot -------------------------------------
   Shut, the rail is 64px wide and the word "Senior" is not: the pill ran into
   the border and read as a fault. So shut it is a two-letter badge, centred,
   with the same breathing room the icons above it get; open, it is the full
   badge and the name. */
.side-nav-foot {
    margin-top: auto;
    padding: 12px 6px 6px;
    display: flex; justify-content: center; align-items: center;
    white-space: nowrap;
}

.nav-role-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
    background: rgba(0,0,0,.06); color: #4b5563;
}
.nav-role-full { display: none; }

/* Open, they swap: the badge every other page shows, and the name under it. */
.side-nav:hover .nav-role-mini,
.side-nav:focus-within .nav-role-mini,
.side-nav.open .nav-role-mini { display: none; }
.side-nav:hover .nav-role-full,
.side-nav:focus-within .nav-role-full,
.side-nav.open .nav-role-full { display: block; }
.side-nav:hover .side-nav-foot,
.side-nav:focus-within .side-nav-foot,
.side-nav.open .side-nav-foot { justify-content: flex-start; padding-left: 10px; }

/* Whose session this is, under the role pill. Hidden while the rail is shut,
   like every other word in here - the pill alone is what fits in 64px, and the
   name appears with the rest of the text when the rail opens. */
.side-nav-who {
    display: block;
    margin-top: 4px;
    font-size: 11px; font-weight: 700; color: #374151;
    overflow: hidden; text-overflow: ellipsis; max-width: 150px;
    opacity: 0; height: 0;
    transition: opacity .12s ease;
}
.side-nav:hover .side-nav-who,
.side-nav:focus-within .side-nav-who,
.side-nav.open .side-nav-who { opacity: 1; height: auto; }

@media (max-width: 860px) {
    .side-nav-who { opacity: 1; height: auto; }
    /* The bar across the top is not 64px wide, so there is nothing to abbreviate
       for: the full badge and the name, always. */
    .nav-role-mini { display: none; }
    .nav-role-full { display: block; }
    .side-nav-foot { justify-content: flex-start; padding-left: 4px; }
}

/* ---- narrow screens: a bar across the top, not a rail ------------------ */
@media (max-width: 860px) {
    /* The bar is at the top, so the page clears it by its height *plus* the
       status bar the phone puts above it. */
    body:has(.side-nav) {
        padding-left:  calc(16px + env(safe-area-inset-left, 0px));
        padding-right: calc(16px + env(safe-area-inset-right, 0px));
        padding-top:   calc(76px + env(safe-area-inset-top, 0px));
    }

    .side-nav {
        right: 0;
        bottom: auto;
        width: auto;
        flex-direction: column;
        padding: 8px 12px;
        padding-top:   calc(8px + env(safe-area-inset-top, 0px));
        padding-left:  calc(12px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }
    .side-nav:hover, .side-nav:focus-within, .side-nav.open { width: auto; }

    .side-nav-toggle { margin-bottom: 0; width: auto; }
    .side-nav-text, .side-nav-label { opacity: 1; height: auto; }

    .side-nav-body { display: none; padding-top: 8px; }
    /* dvh, so an opened menu is a screenful as the phone currently shows it
       rather than a screenful plus the address bar. */
    .side-nav.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
    .side-nav.open .side-nav-body { display: flex; }

    /* Every nav row a proper touch target - 44px is the smallest thing a thumb
       hits reliably, and these are the links the whole site is reached by. */
    .side-nav-item, .side-nav-toggle { min-height: 44px; }
}

@media print {
    .side-nav { display: none !important; }
    body:has(.side-nav) { padding-left: 0; padding-top: 0; }
}

/* An icon that is a picture rather than a drawing: it cannot take the link's
   colour, so it is only kept upright and inside the same 22px slot. */
.side-nav-img { object-fit: contain; }

/* A flat-colour picture used as a stencil instead: the link's colour is laid
   down and the drawing decides where it shows. The file's own black never
   reaches the screen, so this one greys, darkens on hover and turns blue on
   the current page exactly like the inline drawings beside it. */
.side-nav-mask {
    display: inline-block;
    background: currentColor;
    /* Everything but the file itself, which nav.php sets on the element - see
       the note there for why it cannot be handed over in a variable. */
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}