/* ─────────────────────────────────────────────────────────────────────────
   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;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
}
/* 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;
}
.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; }

/* 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 plain <select> posting to /Account/SwitchLicensee) */
.licensee-switcher-form { display: inline-flex; }
.licensee-switcher {
    appearance: none; -webkit-appearance: none;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line); border-radius: var(--r-4);
    padding: 0 28px 0 10px; height: 30px; max-width: 230px;
    font: 600 12px/1 var(--font-ui); cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8881' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.licensee-switcher:hover { border-color: var(--ink-4); color: var(--ink-1); }
.licensee-switcher:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }