/* ==========================================================================
   Brunetto Payslips — application styling

   The palette is taken from brunetto.be: teal as the brand colour, with mint,
   orange and a pale cyan tint alongside it. It is applied sparingly on purpose.
   This is a tool people work in for hours at a time, so colour earns its place
   by carrying meaning — what is active, what succeeded, what needs attention —
   and everything else stays quiet so the content is what you see.
   ========================================================================== */

/* Self-hosted rather than loaded from Google. A payroll application handling
   personal data should not hand every visitor's IP address to a third party on
   page load, and instances running on-premises may have no outbound internet
   at all. The whole 300-700 weight range is 47 kB. */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand */
    --brand-teal: #00a0bc;
    --brand-teal-dark: #007f96;
    --brand-teal-darker: #006275;
    --brand-teal-tint: #a3d7de;
    --brand-mint: #20d89b;
    --brand-orange: #ff6716;

    /* Neutrals, warmed very slightly so white surfaces sit on the page rather
       than glaring out of it. */
    --surface-page: #f7f7f5;
    --surface-card: #ffffff;
    --surface-sunken: #ecebe9;

    --ink: #16191c;
    --ink-muted: #5b6470;
    --ink-faint: #858e9a;

    --line: #e2e3e0;
    --line-strong: #cfd2ce;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 32, .05);
    --shadow: 0 1px 3px rgba(16, 24, 32, .07), 0 6px 16px -8px rgba(16, 24, 32, .12);
    --shadow-lg: 0 2px 6px rgba(16, 24, 32, .06), 0 20px 40px -20px rgba(16, 24, 32, .22);

    /* Short and consistent: the interface should feel immediate, never animated at. */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --fast: 120ms var(--ease);
    --medium: 180ms var(--ease);
}

/* --------------------------------------------------------------------------
   Bootstrap is kept for its grid, forms and utilities; only its appearance is
   rebranded here, through the per-component custom properties it exposes.
   -------------------------------------------------------------------------- */
:root {
    --bs-primary: var(--brand-teal);
    --bs-primary-rgb: 0, 160, 188;
    --bs-link-color: var(--brand-teal-dark);
    --bs-link-hover-color: var(--brand-teal-darker);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface-page);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-font-sans-serif: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html {
    /* Anchored headings and skip links land with a little breathing room. */
    scroll-padding-top: 5rem;
}

body {
    background: var(--surface-page);
    color: var(--ink);
    font-family: var(--bs-font-sans-serif);
    font-size: .95rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.011em;
    color: var(--ink);
}

h1 { letter-spacing: -.018em; }

a {
    color: var(--brand-teal-dark);
    text-decoration-color: color-mix(in srgb, var(--brand-teal) 35%, transparent);
    text-underline-offset: .15em;
    transition: color var(--fast);
}

a:hover { color: var(--brand-teal-darker); }

/* One focus treatment everywhere, and never removed — keyboard users need to
   see where they are as much as pointer users need not to. */
:focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Blazor focuses the page heading after navigation so screen readers announce
   it. That focus is programmatic, not a keyboard user finding their place, and
   drawing a ring around every heading is just visual noise. The heading still
   receives focus and is still announced. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

::selection {
    background: color-mix(in srgb, var(--brand-teal-tint) 70%, transparent);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */
.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--surface-card) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--line);
}

.app-header-inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    max-width: 82rem;
    margin: 0 auto;
    padding: .7rem 1.5rem;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -.015em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.app-brand::before {
    /* A small brand mark instead of a logo file: one instance per payroll
       provider, and none of them are Brunetto except Brunetto. */
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-mint));
    transform: rotate(45deg);
    flex: none;
}

.app-brand:hover { color: var(--brand-teal-dark); }

.app-nav {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

.app-nav-link {
    position: relative;
    padding: .4rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--fast), background-color var(--fast);
}

.app-nav-link:hover {
    color: var(--ink);
    background: var(--surface-sunken);
}

.app-nav-link.active {
    color: var(--brand-teal-dark);
    background: color-mix(in srgb, var(--brand-teal) 9%, transparent);
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
}

.app-user {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: .875rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .25rem .1rem;
}

.app-user:hover { color: var(--brand-teal-dark); }

/* The shell is two columns once somebody is signed in: the context they work in on
   the left, the screen they opened on the right. Without the sidebar it is one
   column and the content keeps the width it always had. */
.app-body {
    flex: 1;
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
}

.app-body.has-side {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    align-items: start;
}

.app-main {
    min-width: 0;
    padding: 2rem 1.5rem 4rem;
}

.language-switcher {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.language-switcher .form-select {
    width: auto;
    min-width: 7.5rem;
    font-size: .85rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

/* The widened scope is deliberate and audited, so it is also impossible to
   overlook. Orange rather than red: this is a state to notice, not an error. */
.scope-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--brand-orange) 10%, var(--surface-card));
    border-bottom: 1px solid color-mix(in srgb, var(--brand-orange) 30%, transparent);
    color: color-mix(in srgb, var(--brand-orange) 75%, var(--ink));
    padding: .6rem 1.5rem;
    font-size: .875rem;
    font-weight: 500;
}

.scope-banner > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.scope-banner > span::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--brand-orange);
    flex: none;
}

/* --------------------------------------------------------------------------
   Page furniture
   -------------------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-header h1 { margin: 0; }

.page-narrow {
    max-width: 40rem;
}

/* Forms and detail views sit on a card; lists and tables do not, so the data
   stays the widest thing on the page.

   :has() keeps this honest. Several pages carry extra single-button forms —
   resend the invitation, deactivate, unassign — and matching every form would
   wrap each lone button in a card of its own. Only a form that actually
   contains fields is a form worth framing. */
.page-narrow > form:has(.form-control, .form-select):not(.filter-bar),
.page-narrow > dl,
.auth-card {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.page-narrow > form:has(.form-control, .form-select):not(.filter-bar),
.page-narrow > dl {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.page-narrow > dl dt {
    font-weight: 500;
    color: var(--ink-muted);
}

.page-narrow > dl dd { margin-bottom: .35rem; }

.page-narrow > dl > :last-child { margin-bottom: 0; }

.filter-bar {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: .75rem;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.filter-bar .form-control,
.filter-bar .form-select {
    max-width: 17rem;
}

.filter-bar .form-check { margin: 0 .25rem; }

.pager {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}

.pager-status {
    font-size: .85rem;
    color: var(--ink-muted);
}

/* Bootstrap renders inline code in magenta, which fights the brand everywhere
   the audit log shows an event name. A quiet chip reads as "this is a literal"
   without shouting it. */
code {
    color: var(--ink-muted);
    background: var(--surface-sunken);
    padding: .12em .4em;
    border-radius: 4px;
    font-size: .84em;
}

.audit-payload {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    color: var(--ink-muted);
    max-width: 22rem;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color var(--fast), border-color var(--fast),
        color var(--fast), box-shadow var(--fast), transform var(--fast);
}

.btn:active { transform: translateY(.5px); }

.btn-primary {
    --bs-btn-bg: var(--brand-teal);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: var(--brand-teal-dark);
    --bs-btn-hover-border-color: var(--brand-teal-dark);
    --bs-btn-active-bg: var(--brand-teal-darker);
    --bs-btn-active-border-color: var(--brand-teal-darker);
    --bs-btn-disabled-bg: var(--brand-teal-tint);
    --bs-btn-disabled-border-color: var(--brand-teal-tint);
    --bs-btn-focus-shadow-rgb: 0, 160, 188;
    box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-teal-dark);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: var(--brand-teal);
    --bs-btn-hover-border-color: var(--brand-teal);
    --bs-btn-active-bg: var(--brand-teal-dark);
    --bs-btn-active-border-color: var(--brand-teal-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-muted);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-sunken);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--line);
    --bs-btn-active-border-color: var(--line-strong);
    background: var(--surface-card);
}

.btn-link {
    --bs-btn-color: var(--brand-teal-dark);
    --bs-btn-hover-color: var(--brand-teal-darker);
}

.form-label {
    font-weight: 500;
    font-size: .875rem;
    margin-bottom: .3rem;
    color: var(--ink);
}

.form-control,
.form-select {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    transition: border-color var(--fast), box-shadow var(--fast);
}

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--ink-faint);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 18%, transparent);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--surface-sunken);
    color: var(--ink-muted);
}

.form-text {
    color: var(--ink-muted);
    font-size: .82rem;
}

.form-check-input:checked {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}

.form-check-input:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-responsive {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.table {
    --bs-table-hover-bg: color-mix(in srgb, var(--brand-teal) 5%, transparent);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--surface-card);
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .75rem 1rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .75rem 1rem;
    border-bottom-color: var(--line);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table > tbody > tr { transition: background-color var(--fast); }

/* Numbers line up so columns can be compared down the page rather than read
   one row at a time. */
.table .text-end { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Badges, alerts, lists
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .32em .6em;
    border-radius: 999px;
}

.badge.text-bg-success {
    background: color-mix(in srgb, var(--brand-mint) 16%, var(--surface-card)) !important;
    color: #0b6b4c !important;
}

.badge.text-bg-secondary {
    background: var(--surface-sunken) !important;
    color: var(--ink-muted) !important;
}

.badge.text-bg-warning {
    background: color-mix(in srgb, var(--brand-orange) 14%, var(--surface-card)) !important;
    color: #a8430b !important;
}

.badge.text-bg-info {
    background: color-mix(in srgb, var(--brand-teal-tint) 32%, var(--surface-card)) !important;
    color: var(--brand-teal-darker) !important;
}

.alert {
    border-radius: var(--radius);
    border-width: 1px;
    font-size: .9rem;
    padding: .8rem 1rem;
}

.alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--brand-mint) 12%, var(--surface-card));
    --bs-alert-border-color: color-mix(in srgb, var(--brand-mint) 35%, transparent);
    --bs-alert-color: #0b6b4c;
}

.alert-danger {
    --bs-alert-bg: color-mix(in srgb, #d92d20 8%, var(--surface-card));
    --bs-alert-border-color: color-mix(in srgb, #d92d20 28%, transparent);
    --bs-alert-color: #a4231a;
}

.alert-info {
    --bs-alert-bg: color-mix(in srgb, var(--brand-teal-tint) 26%, var(--surface-card));
    --bs-alert-border-color: color-mix(in srgb, var(--brand-teal) 28%, transparent);
    --bs-alert-color: var(--brand-teal-darker);
}

.list-group {
    --bs-list-group-border-color: var(--line);
    --bs-list-group-border-radius: var(--radius);
}

.list-group-item {
    padding: .75rem 1rem;
    background: var(--surface-card);
}

/* --------------------------------------------------------------------------
   Account pages
   -------------------------------------------------------------------------- */
.auth-card {
    max-width: 25rem;
    margin: 4rem auto;
    padding: 2.25rem;
    box-shadow: var(--shadow-lg);
}

.auth-card-wide { max-width: 34rem; }

.auth-card h1 {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

/* A quiet wash of brand colour behind the sign-in card: enough to place the
   application, not enough to compete with the form. */
body:has(.auth-card) {
    background:
        radial-gradient(70rem 46rem at 50% -20rem,
            color-mix(in srgb, var(--brand-teal-tint) 55%, transparent) 0%,
            color-mix(in srgb, var(--brand-teal-tint) 18%, transparent) 45%,
            transparent 72%),
        var(--surface-page);
    background-attachment: fixed;
}

.auth-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--ink-faint);
    font-size: .8rem;
    margin: 1.35rem 0;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--line);
}

.auth-separator span { padding: 0 .75rem; }

.qr-code {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.qr-code svg {
    width: 190px;
    height: 190px;
    display: block;
}

.recovery-codes {
    list-style: none;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem .75rem;
    background: var(--surface-sunken);
    border-radius: var(--radius);
}

.recovery-codes code {
    background: none;
    padding: 0;
    font-size: .92rem;
    color: var(--ink);
    user-select: all;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Responsive and accessibility
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .app-header-inner {
        gap: .75rem;
        padding: .6rem 1rem;
    }

    .app-header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .app-main { padding: 1.25rem 1rem 3rem; }

    .auth-card {
        margin: 1.5rem auto;
        padding: 1.5rem;
    }

    .filter-bar .form-control,
    .filter-bar .form-select {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* Motion is decoration here; nothing depends on it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .app-header,
    .scope-banner,
    .filter-bar,
    .pager {
        display: none !important;
    }

    .app-main { padding: 0; }
    .table-responsive { border: 0; box-shadow: none; }
}

/* --- Type-ahead picker ------------------------------------------------- */
.picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 12rem;
}

.picker-options {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.picker-options [role="option"] {
    padding: .4rem .6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .9rem;
}

/* Hover and keyboard share one appearance, so the highlighted row is the one that Enter takes. */
.picker-options [role="option"]:hover,
.picker-options [role="option"].is-active {
    background: color-mix(in srgb, var(--brand-teal) 12%, transparent);
    color: var(--brand-teal-darker);
}

.picker-empty {
    padding: .4rem .6rem;
    font-size: .875rem;
    color: var(--ink-muted);
}

.picker-clear {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .1rem .4rem;
    font-size: .78rem;
}


/* --------------------------------------------------------------------------
   Context sidebar

   Quiet on purpose. It is on screen all day, so it carries no colour of its own
   beyond marking where the reader currently is.
   -------------------------------------------------------------------------- */
.app-side {
    position: sticky;
    top: 3.4rem;
    align-self: start;
    max-height: calc(100vh - 3.4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem .6rem 2rem 1.5rem;
    border-right: 1px solid var(--line);
    font-size: .875rem;
}

.side-search {
    position: relative;
    margin-bottom: .9rem;
}

.side-search .form-control { padding-right: 2.1rem; }

.side-search-go {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    padding: .25rem;
    border: 0;
    background: none;
    line-height: 0;
    color: var(--ink-faint);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.side-search-go:hover { color: var(--brand-teal-dark); }

.side-search-go svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-list-nested {
    margin: .1rem 0 .45rem 1.45rem;
    padding-left: .55rem;
    border-left: 1px solid var(--line);
}

.side-heading {
    margin: 0 0 .4rem;
    padding: 0 .15rem;
    font-weight: 600;
    color: var(--ink);
}

.side-customer-row {
    display: flex;
    align-items: center;
    gap: .1rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--fast);
}

.side-customer-row:hover { background: var(--surface-sunken); }

.side-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.6rem;
    color: var(--ink-faint);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.side-toggle:hover { color: var(--ink); }

.side-toggle svg {
    width: .8rem;
    height: .8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--fast);
}

.side-customer.is-open > .side-customer-row .side-toggle svg { transform: rotate(90deg); }

.side-customer-name {
    flex: 1;
    min-width: 0;
    padding: .3rem .1rem;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-customer-name.is-current { color: var(--brand-teal-dark); }

.side-count {
    flex: none;
    padding: 0 .35rem;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.side-employee {
    display: block;
    padding: .25rem .45rem;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color var(--fast), color var(--fast);
}

.side-employee:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.side-employee.is-current {
    background: color-mix(in srgb, var(--brand-teal) 12%, transparent);
    color: var(--brand-teal-darker);
    font-weight: 500;
}

.side-empty {
    margin: .2rem 0;
    padding: 0 .15rem;
    color: var(--ink-faint);
    font-size: .82rem;
}

.side-empty-nested { margin: .1rem 0 .45rem 2rem; }

.side-more {
    display: inline-block;
    margin-top: .35rem;
    padding: .2rem .15rem;
    color: var(--ink-muted);
    font-size: .8rem;
    text-decoration: none;
}

.side-more:hover {
    color: var(--brand-teal-dark);
    text-decoration: underline;
}

.side-more-nested { margin-left: 2rem; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-bottom: .4rem;
    font-size: .82rem;
    color: var(--ink-faint);
}

.crumbs > * + *::before {
    content: "\203A";
    margin-right: .35rem;
    color: var(--line-strong);
}

.crumbs a {
    color: var(--ink-muted);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--brand-teal-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Screen tiles
   -------------------------------------------------------------------------- */
.tile-group { margin-bottom: 1.9rem; }

.tile-group-title {
    margin: 0 0 .65rem;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: .75rem;
}

.tile {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}

.tile:hover {
    border-color: var(--brand-teal-tint);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.tile-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #fff;
}

.tile-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tile-title {
    font-weight: 600;
    color: var(--ink);
}

.tile-subtitle {
    font-size: .82rem;
    color: var(--ink-muted);
}

.tile-badge {
    margin-left: auto;
    flex: none;
    min-width: 1.5rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-orange) 14%, var(--surface-card));
    color: color-mix(in srgb, var(--brand-orange) 80%, var(--ink));
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Secondary marker beside a name

   The export code of a benefit, the unit an amount is expressed in. There for
   whoever needs it, never competing with the name it sits next to. This class
   had no styling at all for a while, and that is precisely what it looked
   like: an internal code reading as part of the product name.
   -------------------------------------------------------------------------- */
.where {
    display: inline-block;
    margin-left: .45rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--ink-faint);
    white-space: nowrap;
    vertical-align: middle;
}

/* An identifier, so it is set like one rather than like prose. */
.where-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -.01em;
    padding: .1rem .35rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

/* --------------------------------------------------------------------------
   Narrow screens

   The sidebar is a two-column convenience and there is no second column on a
   phone. It is dropped rather than folded into a drawer, because the header
   navigation already reaches every screen and a drawer that needs JavaScript
   would be the only part of this application that does.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .app-body.has-side { display: block; }

    .app-side { display: none; }
}

@media print {
    .app-side { display: none; }
}