/* ─────────────────────────────────────────────────────────────────────────
   Leaf app shell — sidebar + topbar, built on the design-system tokens.
   Replaces the MudBlazor MudLayout/MudAppBar/MudDrawer chrome so the frame
   matches the screens inside it (warm neutral, Manrope, green accent).
   ───────────────────────────────────────────────────────────────────────── */

html { font-size: 16px; }

/* FocusOnNavigate parks focus on the page heading after every SPA navigation.
   That's an a11y win, but Chrome paints a focus ring on the programmatic target —
   a stray blue box around the page title. Real keyboard focus elsewhere is untouched. */
[tabindex="-1"]:focus { outline: none; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink-1);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

.lf-shell {
    --sidebar-w: 232px;
    --topbar-h: 56px;
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}

/* ══ Sidebar ═══════════════════════════════════════════════════════════════ */
.lf-sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh; display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--line);
    transition: margin-left .22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 40;
}
.lf-shell.is-collapsed .lf-sidebar { margin-left: calc(-1 * var(--sidebar-w)); }

.lf-brand {
    display: flex; align-items: center; gap: 9px; height: var(--topbar-h);
    padding: 0 16px; flex: 0 0 auto;
    border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
}
.lf-brand-mark {
    width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.lf-brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0.13em; color: var(--ink-1); }

.lf-nav { flex: 1; overflow-y: auto; padding: 10px 10px 22px; display: flex; flex-direction: column; gap: 1px; }
.lf-nav::-webkit-scrollbar { width: 8px; }
.lf-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.lf-nav::-webkit-scrollbar-track { background: transparent; }

.lf-navitem {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-4);
    font: 600 13px/1.2 var(--font-ui); color: var(--ink-2); text-decoration: none;
    transition: background .12s, color .12s;
    border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left;
}
.lf-navitem:hover { background: var(--surface-2); color: var(--ink-1); }
.lf-navitem.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.lf-navitem.is-active .lf-navicon { color: var(--accent); }
.lf-navitem.is-disabled { color: var(--ink-4); cursor: default; pointer-events: none; }
.lf-navicon { flex: 0 0 auto; width: 17px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.lf-navlabel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lf-navgroup { margin-top: 6px; }
.lf-navgroup-head { color: var(--ink-3); }
.lf-navgroup-head .lf-navchev { transition: transform .18s; color: var(--ink-4); display: flex; }
.lf-navgroup.is-open > .lf-navgroup-head .lf-navchev { transform: rotate(90deg); }
.lf-navgroup.is-open > .lf-navgroup-head { color: var(--ink-1); }
.lf-navsub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 14px; margin-left: 10px; border-left: 1px solid var(--line-2); }
.lf-navsub .lf-navitem { padding: 6px 10px; font-size: 12.5px; font-weight: 600; }

.lf-navsection {
    font-size: 9.5px; font-weight: 700; color: var(--ink-4);
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 14px 10px 5px;
}

/* ══ Main column ═══════════════════════════════════════════════════════════ */
.lf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.lf-topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--topbar-h); flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px; padding: 0 18px 0 12px;
    border-bottom: 1px solid var(--line);
}
/* The frosted glass is painted by a pseudo-element, never the topbar itself: backdrop-filter
   makes its element the containing block for position:fixed descendants, which shrank every
   full-viewport click-catcher in the topbar (menus, the toolbar's More, date pickers) to the
   topbar's own 56px — clicking the page below didn't close them. */
.lf-topbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
}
/* Page title, published by <LeafPageHeader /> (see PageHeaderState). Lives here rather
   than in the page so dense screens keep their vertical space for content. */
.lf-topbar-title {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-1);
    margin: 0 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 0 1 auto; max-width: 40%;
}
/* Hidden by toolbar-overflow.js when a LeafToolbar needs the room: the title ranks below
   every toolbar control and disappears rather than collapsing into the More menu. */
.lf-topbar-title[data-lf-hidden] { display: none; }
.lf-topbar-spacer { flex: 1 1 auto; }

/* Full-height pages (kanban boards, split panes) that manage their own scrolling: the
   shell stops growing with content and hands the page a fixed viewport to divide up.
   Opt in by putting .lf-content-fixed on a page's root element. Without this the document
   scrolls, which is what makes a board's two scroll axes fight each other. */
.lf-shell:has(.lf-content-fixed) { height: 100vh; min-height: 0; overflow: hidden; }
.lf-content:has(.lf-content-fixed) { min-height: 0; overflow: hidden; }
.lf-content-fixed { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.lf-topbar-context { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--ink-2); }
.lf-topbar-zone {
    font-size: 11px; font-weight: 700; color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--line);
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

/* User menu */
.lf-usermenu { position: relative; flex: 0 0 auto; }
.lf-userbtn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 999px;
    padding: 3px 10px 3px 3px; color: var(--ink-1); font: 600 12.5px/1 var(--font-ui);
    transition: background .12s, border-color .12s;
}
.lf-userbtn:hover, .lf-usermenu.is-open .lf-userbtn { background: var(--surface-2); border-color: var(--line); }
.lf-usermenu .lf-navchev { color: var(--ink-3); display: flex; transition: transform .15s; }
.lf-usermenu.is-open .lf-navchev { transform: rotate(180deg); }
.lf-usermenu-pop {
    position: absolute; top: calc(100% + 7px); right: 0; min-width: 216px; z-index: 60;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-6);
    box-shadow: var(--sh-3); padding: 5px;
}
.lf-menuitem {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: var(--r-3); text-decoration: none;
    font: 600 12.5px/1.3 var(--font-ui); color: var(--ink-1);
    background: transparent; border: 0; cursor: pointer; text-align: left;
}
.lf-menuitem:hover { background: var(--surface-2); }
.lf-menuitem svg { color: var(--ink-3); flex: 0 0 auto; }
.lf-menuhead { padding: 8px 10px 6px; }
.lf-menuhead .n { font-size: 12.5px; font-weight: 700; }
.lf-menuhead .e { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.lf-menudiv { height: 1px; background: var(--line-2); margin: 4px 2px; }

/* User menu pinned to the bottom of the sidebar — the topbar belongs to the page's own
   controls. The button spans the sidebar and the menu opens upward. */
.lf-sidebar-foot { flex: 0 0 auto; padding: 8px 10px; border-top: 1px solid var(--line-2); }
.lf-sidebar-foot .lf-userbtn {
    width: 100%; border-radius: var(--r-4); padding: 6px 8px; gap: 10px; text-align: left;
}
.lf-userbtn-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-userbtn-sub { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.lf-sidebar-foot .lf-navchev { transform: none; }
.lf-sidebar-foot.is-open .lf-navchev { transform: rotate(180deg); }
.lf-sidebar-foot .lf-usermenu-pop { top: auto; bottom: calc(100% + 4px); left: 10px; right: 10px; min-width: 0; }

/* Page-owned controls in the topbar (SectionOutlet MainLayout.TopbarActions). Takes the
   space the old spacer did, so the licensee switcher still sits at the right edge. */
/* flex-basis 0, not auto: the actions get exactly the room left over, whatever their content
   would like. With auto the toolbar's own width fed back into the space it was given, so the
   title would shrink before a toolbar item collapsed. */
.lf-topbar-actions { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }

/* ─── LeafToolbar ─────────────────────────────────────────────────────────
   The standard page toolbar, rendered into the topbar. One row that never wraps: when it
   doesn't fit, items collapse into the More menu lowest priority first (toolbar-overflow.js
   decides by measuring; this file only hides what it marked). Until that has run once the
   row clips instead of spilling under the licensee switcher. */
.lf-tb {
    flex: 1 1 auto; min-width: 0; width: 100%;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    overflow: hidden;
}
.lf-tb[data-lf-ready] { overflow: visible; }
.lf-tb-item { flex: 0 0 auto; display: flex; align-items: center; }
.lf-tb-item[data-lf-over] { display: none; }
/* LeafToolbarItem Screen: the phone-upright breakpoint (the licensee switcher uses it too). */
@media (max-width: 640px) { .lf-tb-wide-only { display: none !important; } }
@media (min-width: 641px) { .lf-tb-narrow-only { display: none !important; } }
.lf-tb-spacer { flex: 1 1 0; min-width: 0; }
.lf-tb-more { position: relative; flex: 0 0 auto; }
.lf-tb[data-lf-fits] .lf-tb-more { display: none; }
.lf-tb-backdrop { position: fixed; inset: 0; z-index: 55; }
.lf-tb-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 56; min-width: 230px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4, 9px);
    box-shadow: var(--sh-3, 0 8px 24px rgba(20,20,15,.12)); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.lf-tb-menurow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 7px 8px; }
.lf-tb-menurow:not([data-lf-shown]) { display: none; }
/* A divider only between SHOWN rows: hidden ones (on the row, or off this screen) sit between. */
.lf-tb-menurow[data-lf-shown] ~ .lf-tb-menurow[data-lf-shown] { border-top: 1px solid var(--line-2); }
.lf-tb-menucap {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* Toolbar controls — 30px tall, the topbar's own scale (the calendar's date bar set it). */
.lf-tb-btn {
    appearance: none; border: 1px solid var(--line); background: var(--surface);
    padding: 0 10px; min-width: 30px; height: 30px; box-sizing: border-box;
    border-radius: 7px; font: 600 12.5px/1 var(--font-ui, inherit); color: var(--ink-1); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.lf-tb-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-4); }
.lf-tb-btn:disabled { color: var(--ink-4); cursor: default; }
.lf-tb-btn svg { color: var(--ink-3); }
.lf-tb-btn.is-active { background: var(--accent-soft); border-color: var(--c-sched-bd, var(--line)); color: var(--accent-ink); }
.lf-tb-btn.is-active svg { color: var(--accent); }
.lf-tb-btn.is-busy svg { animation: lf-tb-spin .9s linear infinite; }
/* A filter in the toolbar: a native select at the toolbar's scale (LeafSelect is a form field, too
   tall here). Highlighted while it filters, so a narrowed screen never passes for the whole list. */
.lf-tb-select { appearance: auto; justify-content: flex-start; padding: 0 6px; max-width: 170px; text-overflow: ellipsis; }
.lf-tb-select.is-active { background: var(--accent-soft); border-color: var(--c-sched-bd, var(--line)); color: var(--accent-ink); }
/* What a filtered screen is filtered to, as one chip that clears it. */
.lf-tb-btn.hc-chip { max-width: 180px; }
.lf-tb-btn.hc-chip .hc-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes lf-tb-spin { to { transform: rotate(360deg); } }
.lf-tb-primary {
    appearance: none; border: 0; background: var(--accent); color: #fff;
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: 600 12.5px/1 var(--font-ui, inherit);
    box-shadow: 0 1px 2px rgba(20,40,20,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.lf-tb-primary:hover:not(:disabled) { filter: brightness(0.95); }
/* A disabled primary must not still read as the thing to press. */
.lf-tb-primary:disabled { background: var(--surface-3); color: var(--ink-4); box-shadow: none; cursor: default; }
.lf-tb-note { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lf-tb-note b { color: var(--ink-1); font-weight: 700; font-variant-numeric: tabular-nums; }

/* LeafDateRange — the range as one button; the fields live in its popover. */
.lf-dr { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.lf-dr-step { padding: 0 6px; }
.lf-dr-week { color: var(--ink-3); }
.lf-dr-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 57; width: 290px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4, 9px);
    box-shadow: var(--sh-3, 0 8px 24px rgba(20,20,15,.12)); padding: 12px;
    display: flex; flex-direction: column; gap: 10px; white-space: normal;
}
.lf-tb-pop .lf-dr-pop { left: auto; right: 0; }
.lf-dr-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A labelled row of presets ("Billing  Wed – Tue  [This week] [Last week]"). */
.lf-dr-group { display: flex; flex-direction: column; gap: 1px; width: 84px; font: 600 11.5px/1.2 var(--font-ui, inherit); color: var(--ink-1); }
.lf-dr-group span { font-weight: 500; font-size: 10.5px; color: var(--ink-3); }
.lf-dr-preset {
    appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2);
    border-radius: 999px; padding: 4px 10px; font: 600 11.5px/1.2 var(--font-ui, inherit); color: var(--ink-2);
}
.lf-dr-preset:hover { color: var(--ink-1); border-color: var(--ink-4); }
.lf-dr-preset.is-on { background: var(--accent-soft); border-color: var(--c-sched-bd, var(--line)); color: var(--accent-ink); }

/* Content well. The shell owns the gutter (so not-yet-converted MudBlazor pages
   keep the 24px they were written against); .lf-page only adds its bottom space. */
.lf-content { flex: 1; min-width: 0; padding: 22px 26px; }

/* Scrim for the mobile drawer */
.lf-scrim { display: none; }
@media (max-width: 980px) {
    .lf-content { padding: 16px 14px; }
    .lf-sidebar { position: fixed; left: 0; top: 0; margin-left: calc(-1 * var(--sidebar-w)); box-shadow: var(--sh-3); }
    .lf-shell.is-collapsed .lf-sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
    .lf-shell:not(.is-collapsed) .lf-sidebar { margin-left: 0; }
    .lf-shell:not(.is-collapsed) .lf-scrim { display: block; position: fixed; inset: 0; background: rgba(20,20,15,0.3); z-index: 35; }
}

/* Licensee switcher: a form POST to /Account/SwitchLicensee behind our own dropdown, led by the
   company's mark (LicenseeMarks: two letters on the company's colour) in the button and on every
   company in the list. */
.lf-lic-mark {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 22px; box-sizing: border-box; border-radius: 5px;   /* fixed: names line up in the list */
    color: #fff; font: 700 10.5px/1 var(--font-ui); letter-spacing: .02em;
}
.lf-lic { position: relative; display: inline-flex; }
.lf-lic-btn {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    height: 30px; box-sizing: border-box; padding: 0 9px 0 3px; max-width: 260px;
    background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-4);
    font: 600 12px/1 var(--font-ui);
}
.lf-lic-btn:hover, .lf-lic-btn[aria-expanded="true"] { border-color: var(--ink-4); color: var(--ink-1); }
.lf-lic-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.lf-lic-btn svg { color: var(--ink-3); flex: 0 0 auto; }
.lf-lic-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-lic-backdrop { position: fixed; inset: 0; z-index: 55; }
.lf-lic-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 56;
    min-width: 240px; max-width: calc(100vw - 20px); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-6, 10px);
    box-shadow: var(--sh-3); padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
.lf-lic-opt {
    appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
    padding: 7px 8px; border-radius: var(--r-4);
    font: 600 12.5px/1.25 var(--font-ui); color: var(--ink-1);
}
.lf-lic-opt:hover { background: var(--surface-2); }
.lf-lic-opt.is-current { background: var(--accent-soft); }
.lf-lic-opt svg { margin-left: auto; color: var(--accent); flex: 0 0 auto; }
.lf-lic-optname { min-width: 0; }
.licensee-current { display: inline-flex; align-items: center; gap: 7px; }

/* Phone, upright: the company name took the whole topbar. Keep the mark alone — it is about the
   size of an icon and still says which company this is. The open list keeps the names. */
@media (max-width: 640px) {
    .lf-lic-btn { padding: 0 3px; gap: 0; }
    .lf-lic-btn .lf-lic-name, .lf-lic-btn svg { display: none; }
    .licensee-current .appbar-info { display: none; }
    .lf-topbar { gap: 8px; padding: 0 10px 0 6px; }
}