/* The race-kit wordmark face (#1490). @import has to lead the file. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,800;1,900&display=swap');

/* ── Team colours (#1490) ─────────────────────────────────────────────────────
   The shop's kit from Settings › Shop details. shop-brand.js sets these on
   <html> from /api/shop-details; these are CDC's club defaults, so the
   sign-in screen is right before that request answers. --team-1-ink is
   black or white, whichever reads on the main colour. */
:root {
    --team-1: #141516;
    --team-2: #1fa35c;
    --team-1-ink: #ffffff;
}

/* A bike's palmarès in Repairs › customer history (#1505): the service
   count in the shop's kit, like a rider's record of wins. */
.palmares-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
    background: var(--team-1); color: var(--team-1-ink);
    border-bottom: 3px solid var(--team-2); border-radius: var(--radius);
    padding: 0.45rem 0.75rem;
}
.palmares-word {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-style: italic; font-weight: 900;
    font-size: 1.35rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
}
.palmares-count { font-size: 0.85rem; font-weight: 500; }

/* ── Login layout ─────────────────────────────────────────────────────────── */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
}
.login-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2.5rem;
    width: 100%; max-width: 380px;
    overflow: hidden;
}
.login-card h1 { text-align: center; margin-bottom: 0.25rem; }

/* The jersey band across the top of the card: main colour over a stripe of
   the second, cut on the slant like a kit panel. */
.login-band {
    height: 16px; margin: -2.5rem -2.5rem 1.6rem;
    background: linear-gradient(to bottom, var(--team-1) 0 62%, var(--team-2) 62% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 100%);
}
/* The head badge sits above the name, like the badge on a frame's head tube. */
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.lw-badge-signin { width: 104px; height: auto; flex: none; }
.login-card h1.cl-wordmark .lw-w { color: var(--team-2); }
/* LugWorks' head badge (#1554), where it is drawn inline: the enamel and
   the W wear the shop's colours; the rim stays nickel. */
.lw-badge .lw-main { fill: var(--team-1); }
.lw-badge .lw-second { fill: var(--team-2); }
.lw-badge .lw-second-line { stroke: var(--team-2); }
.login-card h1.cl-wordmark {
    margin: 0; font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-style: italic; font-weight: 900; font-size: 2.6rem; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.005em; color: var(--text);
}
/* The tagline under the name, in the small spaced capitals of a frame's decals. */
.lw-tagline {
    margin: 0 0 1.6rem; font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-style: italic; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted); text-align: center;
}
.login-card .btn-primary { background: var(--team-1); border-color: var(--team-1); color: var(--team-1-ink); }
.login-card .btn-primary:hover { filter: brightness(1.12); }

/* LugWorks' logo on the sign-in card and the sidebar foot (#1820). The
   workbench wordmark is one drawing, kept once as the
   #lw-wordmark symbol and drawn with <use>; these tokens colour its parts.
   Settings › Shop details can swap it for the race-kit badge:
   html[data-logo-style] (shop-brand.js) picks which of the two shows. */
.lw-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lw-wordmark {
    --ink: #15171a; --oxide: #2e3237; --chrome: #c9d0d6; --alloy: #8d969e; --accent: #7a1f24;
    --tan: #b98a5a; --brass: #c9a24a; --hi: rgba(255,255,255,0.55); --pin: #15171a;
    --rib: #44494f; --gold: #d9a932; --wplate: #c9d0d6;
    display: block; height: auto; overflow: visible;
}
/* The wordmark's parts (the class names come from the logo canvas). */
.lwb-ol{fill:none;stroke:var(--ink);stroke-linejoin:round}
.lwb-hi{fill:none;stroke:var(--hi);stroke-linecap:round;stroke-linejoin:round}
.lwb-chA{fill:none;stroke:var(--ink);stroke-width:24;stroke-linejoin:round}
.lwb-chB{fill:none;stroke:var(--oxide);stroke-width:14;stroke-linejoin:round}
.lwb-chC{fill:none;stroke:var(--chrome);stroke-width:19;stroke-dasharray:14 4;stroke-linejoin:round}
.lwb-chD{fill:none;stroke:var(--pin);stroke-width:6;stroke-dasharray:0 10 0 8;stroke-dashoffset:-2;stroke-linecap:round;stroke-linejoin:round}
/* One colour, for the dark sidebar: the parts go white, the cut-outs dark. */
.lw-wordmark-mono {
    --ink: #fff; --oxide: #fff; --chrome: #fff; --alloy: #fff; --accent: #fff; --brass: #fff;
    --gold: #fff; --wplate: #fff; --tan: #15171a; --rib: #15171a; --pin: #15171a; --hi: transparent;
}
html:not([data-logo-style="race_kit"]) .lw-if-race-kit,
html[data-logo-style="race_kit"] .lw-if-workbench { display: none !important; }
/* The name stays for screen readers; the drawing spells it for everyone else. */
.lw-sr-name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The logo runs out into the card's side padding, so it reads large. */
.lw-logo-plate { margin: 0 -1.75rem 0.75rem; }
.lw-logo-signin { width: 100%; }
/* Its ink outlines vanish on a dark card, so in dark mode it sits on a
   parchment plate. */
/* The drawing fills the plate edge to edge, with just enough margin that the
   outlines don't touch the corners; a touch more on top than below, since the
   g's tail drops under the line. */
[data-theme="dark"] .lw-logo-plate { background: #ece6d8; border-radius: 10px; padding: 0.4rem 0.45rem 0.3rem; }
/* A dark kit (CDC's is black) would sink into the dark card: edge it in the
   second colour so the button still reads as one. */
[data-theme="dark"] .login-card .btn-primary { border: 1px solid var(--team-2); }
@media (max-width: 420px) {
    .login-page { padding: 0 12px; }
    .login-card { padding: 2rem 1.25rem; }
    .lw-logo-plate { margin: 0 -0.75rem 0.75rem; }
    .login-band { margin: -2rem -1.25rem 1.4rem; }
    .login-card h1.cl-wordmark { font-size: 2.2rem; }
    .lw-tagline { font-size: 0.74rem; }
    .lw-badge-signin { width: 88px; }
}

/* ── Main layout (sidebar + content) ──────────────────────────────────────── */
#main-app {
    display: flex; min-height: 100vh;
}

#sidebar {
    width: var(--sidebar-w); min-width: var(--sidebar-w);
    background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow: hidden;
}

.sidebar-header h2 { font-size: 1.25rem; font-weight: 700; }
.sidebar-subtitle { font-size: 0.8rem; color: var(--text-muted); }

.nav-links {
    list-style: none; flex: 1; padding: 0.75rem 0;
    overflow-y: auto;
    /* The sidebar is dark in both themes: a faint thin bar, not the
       browser's white one down its edge. */
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
    /* Room for the bar whether or not the menu needs one, so the group
       arrows stay under the collapse arrow on a tall screen too (#2399). */
    scrollbar-gutter: stable;
}
.nav-link {
    display: block; padding: 0.6rem 1.25rem;
    color: var(--sidebar-link); font-size: 0.9rem; font-weight: 500;
    border-left: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    text-decoration: none;
}
.nav-link:hover { color: #fff; background: var(--sidebar-hover); text-decoration: none; }

/* A menu row that acts rather than navigates (theme toggle). Looks like a
   .nav-link but isn't one, so app.js's router leaves it alone. */
.nav-action {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.6rem 1.25rem;
    background: none; border: none; border-left: 3px solid transparent;
    color: var(--sidebar-link); font: inherit; font-size: 0.9rem; font-weight: 500;
    text-align: left; cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.nav-action:hover { color: #fff; background: var(--sidebar-hover); }
/* The Guides row is a link out to /guides/, so it drops the link underline. */
a.nav-action, a.nav-action:hover { text-decoration: none; }
.nav-link.active { color: var(--accent); border-left-color: var(--accent); background: var(--nav-active-bg); }
/* With a mouse the rows are shorter, so less of the list is below the fold on
   a laptop. A finger keeps the full-height row. */
@media (pointer: fine) {
    #sidebar .nav-links .nav-link { padding-block: 0.4rem; }
}

/* 0.9rem at the sides puts the avatar and the profile menu's icons in the
   same column as the links' icons over them; they sat 2px to the right. */
.sidebar-footer {
    padding: 0.5rem 0.9rem 0.6rem;
    border-top: 1px solid var(--sidebar-border);
}
/* LugWorks' maker's mark at the foot of the menu: the shop's logo tops the
   sidebar, so the product signs off quietly underneath, like a frame decal. */
.sidebar-makers-mark {
    margin: 0.4rem 0 0; text-align: center; line-height: 1.4;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-style: italic; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.32);
}
.sidebar-makers-mark .lw-mark-name {
    display: block; font-size: 0.8rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.5);
}
.sidebar-makers-mark .lw-w { color: var(--team-2); }
.sidebar-makers-mark .lw-wordmark { width: 116px; margin: 0 auto 0.2rem; opacity: 0.55; }

/* ── Profile button + menu (sidebar footer) ─────────────────────────────── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: #5d6d7e; color: #fff;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
    line-height: 1; user-select: none;
}
.avatar-sm { width: 1.6rem; height: 1.6rem; font-size: 0.68rem; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1.1rem; }
/* A picked preset: the emoji fills the circle instead of initials. */
.avatar.avatar-emoji { font-size: 1.15rem; letter-spacing: 0; }
.avatar-sm.avatar-emoji { font-size: 0.95rem; }
.avatar-lg.avatar-emoji { font-size: 1.8rem; }

/* Choose Avatar modal */
.avatar-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem; margin: 0.75rem 0;
}
.avatar-choice {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 0.6rem 0.4rem; min-height: 44px;
    background: none; border: 2px solid transparent; border-radius: var(--radius);
    color: var(--text); font: inherit; font-size: 0.78rem; line-height: 1.2;
    text-align: center; cursor: pointer;
}
.avatar-choice:hover { background: var(--bg-hover); }
.avatar-choice.selected { border-color: var(--accent); background: var(--accent-soft); }
.user-cell { display: inline-flex; align-items: center; gap: 0.5rem; }

.profile-btn {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.4rem 0.5rem;
    background: none; border: none; border-radius: var(--radius);
    color: var(--sidebar-link); font: inherit; font-size: 0.9rem; font-weight: 600;
    text-align: left; cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.profile-btn:hover,
.profile-btn[aria-expanded="true"] { color: #fff; background: var(--sidebar-hover); }
.profile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-chevron { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.15s; }
.profile-btn[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }

/* Opens in place above the button: the sidebar clips overflow, so a floating
   popover would be cut off when the sidebar is collapsed. */
.profile-menu {
    margin-bottom: 0.5rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--sidebar-border);
}
.profile-menu[hidden] { display: none; }
.profile-menu .sidebar-location {
    padding: 0.4rem 0.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.55);
}
/* Every row the same height with its icon in one column. Dark mode is a
   .nav-action and the rest are buttons: it came out 5px taller, and its
   3px side border set its icon to the right of the others. */
#sidebar .profile-menu .nav-action,
#sidebar .profile-menu .logout-btn {
    height: 2.2rem; padding: 0 0.5rem; border-left: 0; line-height: 1.2;
    border-radius: var(--radius);
    color: var(--sidebar-link); font-size: 0.9rem; font-weight: 500;
}
#sidebar .profile-menu .nav-action:hover,
#sidebar .profile-menu .logout-btn:hover { color: #fff; background: var(--sidebar-hover); }
/* Collapsed, a row's label is zero wide but its gap was still there, which
   sat these icons 6px left of the avatar under them. */
#sidebar.collapsed .profile-menu .logout-btn { gap: 0; }

#content {
    flex: 1; margin-left: var(--sidebar-w);
    padding: 2rem;
    min-width: 0; /* prevent flex item expanding past viewport; needed for overflow-x: auto on children */
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* A phone has no sidebar: it opens on the Home tiles (home.js), and every
   other page has a bar with "← Home" and the page's name. */
#phone-bar { display: none; }

@media (max-width: 768px) {
    :root { --sidebar-w: 0px; }

    #sidebar { display: none !important; }

    #phone-bar {
        display: flex; align-items: center; gap: 0.75rem;
        position: fixed; top: 0; left: 0; right: 0; z-index: 100;
        height: 3.25rem; padding: 0 0.75rem;
        background: var(--sidebar-bg); border-bottom: 1px solid var(--sidebar-border); color: #fff;
    }

    #content { margin-left: 0 !important; padding: 1rem; padding-top: 4.25rem; }

    .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

    /* Bike Specs' card slides over the list full height (z-index 60), under
       the bar; it starts below it at every phone width, not only where the
       old ☰ button reached (#1364). */
    /* Two classes: components.css loads later and sets the card's padding. */
    .bike-specs-detail .bike-specs-detail-card { padding-top: 4rem; }
}

.phone-bar-back {
    font: inherit; font-weight: 600; color: #fff;
    background: none; border: none; padding: 0.5rem 0.25rem; cursor: pointer;
}
.phone-bar-back[hidden], .phone-bar-logo[hidden] { display: none; }
.phone-bar-logo { height: 28px; width: auto; border-radius: 4px; }
.phone-bar-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Home's To do cards (#1596): the Dashboard's own cards, one per row on a
   phone, shown only while they have work; module-card's display:flex would
   otherwise beat [hidden]. */
.home-group[hidden], .home-today .module-card[hidden] { display: none; }
.home-today { grid-template-columns: 1fr; margin-top: 0.25rem; }

/* The Repairs card on Home: less padding so the four stones keep one row
   down to 320px, and only the cap and number on each; the line under the
   number stays for screen readers. The col sign wears the theme in dark mode
   instead of a white panel. The desktop Dashboard is left as it was. */
.home-today .module-card--featured { padding: 1rem 0.75rem; }
.home-today .dash-bornes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.home-today .borne-cap { letter-spacing: 0.06em; }
.home-today .borne-val { padding-bottom: 0.5rem; }
.home-today .borne-lab, .home-today .sr-note {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.home-today .dash-col-day { font: 800 1.2rem/1 'Barlow Condensed', 'Barlow', sans-serif; padding: 0.2rem 0.5rem 0.55rem; }
[data-theme="dark"] .home-today .dash-col {
    background: var(--surface-raised); color: var(--text-strong); border-color: var(--border);
}

/* Home tiles: the dashboard's module cards, icon over name. */
.home-group { margin-bottom: 1.25rem; }
.home-group-title {
    margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
.home-group-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.home-grid { margin-top: 0.25rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.home-tile {
    font: inherit; color: var(--text); text-align: left; text-decoration: none;
    width: 100%; min-height: 4.75rem; padding: 0.875rem; gap: 0.6rem; justify-content: space-between;
}
.home-tile-icon { display: block; width: 1.5rem; height: 1.5rem; }
.home-tile-icon svg { width: 100%; height: 100%; }
.home-tile-label { font-weight: 600; }
.home-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The phone's Home in three parts (Neil's mockup, 29 Sep): the Repairs card,
   one grid of page tiles, and the You row. Desktop Home never draws these. */
.dash-board-link {
    margin-left: auto; background: none; border: 0; padding: 0.25rem;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--accent); cursor: pointer;
}
.dash-board-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.home-today .module-card-actions .module-card-action { flex: 1 1 100%; justify-content: center; padding-block: 0.7rem; }

.home-pages { margin-bottom: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.home-pages .home-tile { position: relative; min-height: 6.25rem; }
.home-tile-text { display: block; min-width: 0; }
.home-pages .home-tile-label { display: block; font-size: 1.05rem; line-height: 1.2; color: var(--text-strong); overflow-wrap: anywhere; }
.home-tile-sub { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.1rem; }
/* The count as a small road-marker stone: team colour, second colour under it. */
.home-stone {
    position: absolute; top: 0.6rem; right: 0.6rem; min-width: 2.1rem;
    background: var(--team-1, #141516); color: var(--team-1-ink, #fff);
    border-radius: 14px 14px 4px 4px; border-bottom: 3px solid var(--team-2, #1fa35c);
    font: 900 1.05rem/1 'Barlow Condensed', 'Barlow', sans-serif; font-variant-numeric: tabular-nums;
    padding: 0.35rem 0.5rem 0.25rem; text-align: center;
}
.home-stone--warn { border-bottom-color: #f59e0b; }
.home-stone[hidden], .home-tile-sub[hidden], .home-you-menu[hidden], .home-you-scrim[hidden] { display: none; }

.home-you-row {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem;
}
.home-you-avatar { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.home-you-avatar.avatar-emoji { font-size: 1.4rem; }
.home-you-who { flex: 1; min-width: 0; }
.home-you-who b { display: block; color: var(--text-strong); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-you-who span { font-size: 0.85rem; color: var(--text-muted); }
.home-you-more {
    flex-shrink: 0; width: 2.75rem; height: 2.5rem; border: 0; border-radius: 10px;
    background: var(--bg-input); color: var(--text-strong); font-family: inherit; font-size: 1.2rem; font-weight: 900; line-height: 1;
    letter-spacing: 0.05em; cursor: pointer;
}
/* "•••" opens a sheet up from the foot of the screen. The row sits at the
   bottom of Home, so a list dropped under it landed off-screen, the same
   card colour as the page around it. Above the phone bar (100), under
   toasts and modals; the raised surface, border and shadow lift it off the
   scrim in dark mode. The row is phone-only, so desktop never draws it. */
.home-you-scrim {
    position: fixed; inset: 0; z-index: 200; background: var(--scrim);
}
.home-you-menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
    max-width: 32rem; margin: 0 auto;
    max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow-y: auto;
    background: var(--surface-raised); border: 1px solid var(--border); border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
    padding: 0.35rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
[data-theme="dark"] .home-you-menu { border-color: var(--text-muted); }
.home-you-close { display: flex; justify-content: center; font-size: 1rem; width: calc(100% - 1.8rem); min-height: 2.75rem; margin: 0.5rem 0.9rem 0; }
.home-you-item {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3rem;
    padding: 0.8rem 0.9rem; background: none; border: 0; border-top: 1px solid var(--border);
    color: var(--text-strong); font-family: inherit; font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer;
}
.home-you-item:first-child { border-top: 0; }
.home-you-group {
    padding: 0.75rem 0.9rem 0.25rem; border-top: 1px solid var(--border);
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
.home-you-group + .home-you-item { border-top: 0; }
.home-you-icon { display: inline-flex; width: 1.15rem; height: 1.15rem; color: var(--text-muted); flex-shrink: 0; }
.home-you-icon svg { width: 100%; height: 100%; }
.home-you-more:focus-visible, .home-you-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Sidebar logo ─────────────────────────────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sidebar-bg);
    /* 1.4rem at the sides: the logo starts where the links' icons do, and the
       arrow sits over the groups' chevrons. They were 7px out each side. */
    padding: 0.75rem 1.4rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-logo {
    height: 36px;
    width: auto;
    max-width: 160px;
    flex-shrink: 1;
    /* It may give way to the arrow, and a wide logo is fitted, not squashed. */
    min-width: 0;
    object-fit: contain;
    object-position: left center;
    border-radius: 4px;
    transition: opacity 0.2s, max-width 0.2s;
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    margin-left: auto;
}
.sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sidebar-collapse-btn svg { transition: transform 0.2s; }

/* ── Nav icons ────────────────────────────────────────────────────────────── */
.nav-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    stroke-width: 1.75;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-label {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.15s, width 0.2s;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* ── Sidebar collapsible ─────────────────────────────────────────────────── */
#sidebar {
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
}

#content {
    transition: margin-left 0.2s ease;
}

#sidebar.collapsed {
    width: 60px;
    min-width: 60px;
}

#sidebar.collapsed .sidebar-logo {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
}

#sidebar.collapsed .nav-label {
    opacity: 0;
    width: 0;
}

#sidebar.collapsed .nav-link,
#sidebar.collapsed .nav-action {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

#sidebar.collapsed .sidebar-collapse-btn {
    margin-left: 0;
}

#sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

#sidebar.collapsed .sidebar-footer { padding-left: 0; padding-right: 0; }
#sidebar.collapsed .profile-btn { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; border-radius: 0; }
#sidebar.collapsed .profile-chevron,
#sidebar.collapsed .profile-name { display: none; }
#sidebar.collapsed #sidebar-location-name { display: none; }
#sidebar.collapsed .sidebar-location { text-align: center; }
#sidebar.collapsed .sidebar-makers-mark { display: none; }

#sidebar.collapsed .logout-btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

#sidebar.collapsed .sidebar-header {
    justify-content: center;
    /* The logo is zero wide here but its gap was still there, which sat the
       arrow 4px right of the icons under it. */
    gap: 0;
    padding: 0.75rem 0 0.6rem;
}

.settings-help-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* ── Collapsible nav groups ───────────────────────────────────────────────── */
.nav-group { list-style: none; }

.nav-group-header {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.5rem 1.25rem;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.55); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: color 0.15s, background 0.15s;
    border-left: 3px solid transparent;
    margin-top: 0.35rem;
}
.nav-group-header:hover { color: rgba(255,255,255,0.70); background: rgba(255,255,255,0.05); }

/* A group's name is a heading over its links: at the left, in line with
   their icons. It was centred between an icon and the chevron, and that icon
   repeated the first link's under it (two spanners, two magnifiers). */
.nav-group-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s, width 0.2s; }
.nav-group-header .nav-icon { display: none; }

.nav-group-chevron {
    width: 14px; height: 14px; min-width: 14px; flex-shrink: 0;
    transition: transform 0.2s;
}
.nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.is-collapsed .nav-group-items { display: none; }

.nav-group-items { list-style: none; padding: 0; }
/* One column of icons: a group's links start where Dashboard and Help do.
   They were indented a second step, under an icon the heading no longer has. */
.nav-group-items .nav-link { padding-left: 1.25rem; }

/* When sidebar is icon-only: hide group headers, force all items visible */
#sidebar.collapsed .nav-group-header { display: none; }
#sidebar.collapsed .nav-group.is-collapsed .nav-group-items { display: block; }
#sidebar.collapsed .nav-group-items .nav-link { padding-left: 0; justify-content: center; }
/* The icon-only rail, tidied. Its scrollbar took 10px of the 60, pushing every
   icon off-centre, and stood out more than the icons: hidden, and the list
   still scrolls by wheel or finger. With the group names gone the icons ran
   as one long column, so a faint line marks where each group starts. */
#sidebar.collapsed .nav-links { padding-block: 0.4rem; scrollbar-width: none; }
#sidebar.collapsed .nav-links::-webkit-scrollbar { display: none; }
/* The label is zero wide but its gap was still there, which sat every icon
   6px left of the arrow over them. */
#sidebar.collapsed .nav-link, #sidebar.collapsed .nav-action { gap: 0; }
#sidebar.collapsed .nav-group,
#sidebar.collapsed .nav-group + li:not(.nav-group) {
    border-top: 1px solid var(--sidebar-border); margin-top: 0.2rem; padding-top: 0.2rem;
}
/* With a mouse the rows can be shorter, so the whole list fits a laptop
   screen without scrolling. A finger keeps the full-height row. */
@media (pointer: fine) {
    #sidebar.collapsed .nav-link { padding-block: 0.4rem; }
}

/* ── Logout button on dark sidebar ───────────────────────────────────────── */
#sidebar .logout-btn { color: rgba(255,255,255,0.45); }
#sidebar .logout-btn:hover { color: #fff; background: var(--sidebar-hover); }

/* Parts Ordering: Refresh (small, bordered) and + New customer order drew at 30 and
   37px (#2492). One height for both. */
#page-ordering .page-actions .btn { height: 40px; }