/* ---------------------------------------------------------------------------
   Filatrack theme (tweakcn) - must load after blazorblueprint.css.
   BlazorBlueprint ships no :root palette of its own; these tokens are it.
   --------------------------------------------------------------------------- */

:root {
    --background: oklch(0.9818 0.0054 95.0986);
    --foreground: oklch(0.3438 0.0269 95.7226);
    --card: oklch(0.9665 0.0067 97.3521);
    --card-foreground: oklch(0.1908 0.0020 106.5859);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.2671 0.0196 98.9390);
    --primary: oklch(0.6171 0.1375 39.0427);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.9245 0.0138 92.9892);
    --secondary-foreground: oklch(0.4334 0.0177 98.6048);
    --muted: oklch(0.9341 0.0153 90.2390);
    --muted-foreground: oklch(0.5341 0.0078 97.4503);
    --accent: oklch(0.9245 0.0138 92.9892);
    --accent-foreground: oklch(0.2671 0.0196 98.9390);
    --destructive: oklch(0.1908 0.0020 106.5859);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.8847 0.0069 97.3627);
    --input: oklch(0.7621 0.0156 98.3528);
    --ring: oklch(0.6171 0.1375 39.0427);
    --chart-1: oklch(0.5583 0.1276 42.9956);
    --chart-2: oklch(0.6898 0.1581 290.4107);
    --chart-3: oklch(0.8816 0.0276 93.1280);
    --chart-4: oklch(0.8822 0.0403 298.1792);
    --chart-5: oklch(0.5608 0.1348 42.0584);
    --sidebar: oklch(0.9663 0.0080 98.8792);
    --sidebar-foreground: oklch(0.3590 0.0051 106.6524);
    --sidebar-primary: oklch(0.6171 0.1375 39.0427);
    --sidebar-primary-foreground: oklch(0.9881 0 0);
    --sidebar-accent: oklch(0.9245 0.0138 92.9892);
    --sidebar-accent-foreground: oklch(0.3250 0 0);
    --sidebar-border: oklch(0.9401 0 0);
    --warn: oklch(0.6171 0.1375 39.0427);

    --radius: 1rem;

    --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
}

.dark {
    --background: oklch(0.2679 0.0036 106.6427);
    --foreground: oklch(0.9576 0.0027 106.4494);
    --card: oklch(0.2928 0.0018 106.5092);
    --card-foreground: oklch(0.9818 0.0054 95.0986);
    --popover: oklch(0.3085 0.0035 106.6039);
    --popover-foreground: oklch(0.9211 0.0040 106.4781);
    --primary: oklch(0.6724 0.1308 38.7559);
    --primary-foreground: oklch(0.1908 0.0020 106.5859);
    --secondary: oklch(0.9818 0.0054 95.0986);
    --secondary-foreground: oklch(0.3085 0.0035 106.6039);
    --muted: oklch(0.2213 0.0038 106.7070);
    --muted-foreground: oklch(0.7713 0.0169 99.0657);
    --accent: oklch(0.2130 0.0078 95.4245);
    --accent-foreground: oklch(0.9663 0.0080 98.8792);
    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.3618 0.0101 106.8928);
    --input: oklch(0.4336 0.0113 100.2195);
    --ring: oklch(0.6724 0.1308 38.7559);
    --chart-3: oklch(0.2130 0.0078 95.4245);
    --chart-4: oklch(0.3074 0.0516 289.3230);
    --sidebar: oklch(0.2357 0.0024 67.7077);
    --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
    --sidebar-primary: oklch(0.3250 0 0);
    --sidebar-primary-foreground: oklch(0.9881 0 0);
    --sidebar-accent: oklch(0.1680 0.0020 106.6177);
    --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
    --sidebar-border: oklch(0.3618 0.0101 106.8928);
    --warn: oklch(0.6724 0.1308 38.7559);
}

/* --------------------------------------------------------------------------
   BbSidebar geometry, aligned on the mockups (230px expanded / 64px rail).
   -------------------------------------------------------------------------- */

:root {
    --sidebar-width: 14.375rem;
    --sidebar-width-icon: 4rem;
    --sidebar-menu-button-radius: 0.75rem;
    --sidebar-menu-button-px: 0.625rem;
    --sidebar-menu-button-py: 0.5625rem;
    --sidebar-menu-button-gap: 0.625rem;
    --sidebar-menu-button-active-font-weight: 600;
    --sidebar-menu-button-collapsed-size: 2.375rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
    background-color: var(--background);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   Filatrack layout utilities.

   No Tailwind build in this project: blazorblueprint.css is a frozen, tree-shaken
   build of the library's own sources, so utilities it does not use (gap-5, p-7,
   xl:*, arbitrary values...) simply do not exist. Everything below is hand-written.
   Only Bb* components and ft-* classes belong in the .razor files.
   --------------------------------------------------------------------------- */

/* Page shell ------------------------------------------------------------- */

/* Without min-width:0 the flex child refuses to shrink and every grid inside
   overflows the viewport instead of reflowing. */
.ft-inset {
    min-width: 0;
}

.ft-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px;
    min-height: 100vh;
    min-width: 0;
}

.ft-page-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ft-page-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--foreground);
}

/* FocusOnNavigate focuses the h1 on every navigation; the ring is noise on a heading. */
.ft-page-head h1:focus {
    outline: none;
}

.ft-page-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.ft-page-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Generic building blocks ------------------------------------------------ */

.ft-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ft-spacer {
    margin-left: auto;
}

.ft-muted {
    color: var(--muted-foreground);
}

.ft-warn {
    color: var(--warn);
}

.ft-danger {
    color: var(--destructive);
}

/* Figures: grammes, euros, écarts. */
.ft-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Filament colour dot. Inline background-color carries the real hex. */
.ft-swatch {
    display: inline-block;
    flex: none;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 14%, transparent);
}

.ft-swatch-sm { width: 12px; height: 12px; }
.ft-swatch-md { width: 16px; height: 16px; }
.ft-swatch-lg { width: 32px; height: 32px; box-shadow: 0 0 0 3px var(--secondary); }
.ft-swatch-xl { width: 42px; height: 42px; box-shadow: 0 0 0 4px var(--secondary); }

/* BbProgress, tuned to the mockups' 7px track ----------------------------- */

.ft-progress {
    height: 7px;
    background: var(--secondary);
}

.ft-progress-sm {
    height: 6px;
}

.ft-progress-ok { background-color: var(--primary); }
.ft-progress-low { background-color: var(--warn); }
.ft-progress-critical { background-color: var(--destructive); }

/* Card grids ------------------------------------------------------------- */

.ft-grid {
    display: grid;
    gap: 16px;
}

.ft-grid-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ft-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-grid-dashboard { grid-template-columns: 1.25fr 1fr; }

@media (max-width: 1200px) {
}

@media (max-width: 1000px) {
    .ft-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft-grid-dashboard { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .ft-page { padding: 16px; gap: 14px; }
    .ft-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Panel: the card look used across every screen -------------------------- */

.ft-panel {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}

.ft-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--card-foreground);
}

/* KPI tile --------------------------------------------------------------- */

.ft-kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}

.ft-kpi-label {
    font-size: 13px;
    color: var(--muted-foreground);
}

.ft-kpi-value {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--card-foreground);
}

.ft-kpi-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted-foreground);
}

@media (max-width: 640px) {
    .ft-kpi { padding: 14px 16px; }
    .ft-kpi-value { font-size: 22px; }
}

/* Login ------------------------------------------------------------------ */

.ft-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--background);
}

.ft-login-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.10);
}

.ft-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-login-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    display: grid;
    place-items: center;
    flex: none;
}

.ft-login-title {
    font-size: 18px;
    font-weight: 700;
}

.ft-login-submit {
    width: 100%;
}

/* Sidebar brand mark ----------------------------------------------------- */

.ft-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    display: grid;
    place-items: center;
    flex: none;
}

.ft-brand-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--sidebar-foreground);
}

/* Toolbar: search + filters row ------------------------------------------ */

.ft-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ft-toolbar-filter {
    width: 170px;
}

/* Spool card (grid view) -------------------------------------------------- */

.ft-spool-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ft-spool-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.08);
}

.ft-spool-card.is-dimmed {
    opacity: 0.55;
}

.ft-spool-card-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ft-spool-card-brand {
    font-size: 11.5px;
    color: var(--muted-foreground);
}

.ft-spool-card-color {
    font-size: 15px;
    font-weight: 600;
    color: var(--card-foreground);
}

/* BbDataView layout slots ------------------------------------------------- */

/* "Items per page" is a hard-coded literal in BbDataView's pagination - the
   component exposes no localizer key for it, so the label is swapped here. */
.ft-dataview p.text-sm.font-medium {
    font-size: 0;
}

.ft-dataview p.text-sm.font-medium::before {
    content: "Par page";
    font-size: 0.875rem;
}


.ft-dataview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1200px) {
    .ft-dataview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .ft-dataview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ft-dataview-grid { grid-template-columns: minmax(0, 1fr); }
}

.ft-dataview-list {
    display: flex;
    flex-direction: column;
}

/* One spool as a row, in list layout. */
.ft-spool-row {
    display: grid;
    grid-template-columns: 20px 1.2fr 0.9fr 0.7fr 1fr 70px 110px 70px 80px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 11px 8px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ft-spool-row:hover {
    background: color-mix(in oklab, var(--accent) 60%, transparent);
}

.ft-spool-row-name { font-weight: 600; }
.ft-spool-row-grams { text-align: right; font-size: 12px; }
.ft-spool-row-price { text-align: right; }

@media (max-width: 900px) {
    .ft-spool-row {
        grid-template-columns: 20px 1fr auto;
    }

    .ft-spool-row-meta,
    .ft-spool-row-bar,
    .ft-spool-row-ams,
    .ft-spool-row-price {
        display: none;
    }
}

.ft-spool-card-meter {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted-foreground);
    margin-bottom: 5px;
}

.ft-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* BbBadge tones the library does not ship (see StatusBadge.razor) ---------- */

.ft-badge-warn {
    border-color: var(--warn);
    color: var(--warn);
}

.ft-badge-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.ft-badge-muted {
    border-color: transparent;
    background-color: var(--muted);
    color: var(--muted-foreground);
}

/* BbDataGrid cell helpers ------------------------------------------------- */

.ft-cell-right {
    text-align: right;
}

/* BbDataGrid renders a real <table>; let it scroll rather than squash. */
@media (max-width: 900px) {
    .ft-table-scroll {
        overflow-x: auto;
    }
}

.ft-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.ft-link:hover {
    text-decoration: underline;
}

/* Spool detail ------------------------------------------------------------ */

.ft-detail-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1000px) {
    .ft-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

.ft-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ft-detail-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    flex: none;
    box-shadow: inset 0 0 0 4px rgb(255 255 255 / 0.25);
}

.ft-gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ft-gauge-percent {
    margin-top: -24px;
    font-size: 13px;
    color: var(--muted-foreground);
    text-align: center;
}

.ft-gauge-caption {
    font-size: 12px;
    color: var(--muted-foreground);
    text-align: center;
}

.ft-gauge-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 8px;
}

.ft-gauge-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--card-foreground);
}

.ft-gauge-stat-label {
    font-size: 11.5px;
    color: var(--muted-foreground);
}

/* Weighing dialog --------------------------------------------------------- */

.ft-weigh-recap {
    background: var(--muted);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.ft-weigh-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ft-weigh-total {
    border-top: 1px solid var(--border);
    padding-top: 6px;
    font-weight: 600;
}

/* Forms ------------------------------------------------------------------- */

.ft-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ft-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ft-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 640px) {
    .ft-form-grid,
    .ft-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.ft-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* AMS Lite panel ---------------------------------------------------------- */

.ft-ams-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ft-ams-index {
    width: 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.ft-ams-empty {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 2px dashed var(--input);
    flex: none;
}

.ft-ams-meter {
    flex: 1;
    min-width: 0;
}

.ft-ams-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--card-foreground);
}

/* Job form ---------------------------------------------------------------- */

.ft-job-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .ft-job-grid { grid-template-columns: minmax(0, 1fr); }
}

.ft-usage-head,
.ft-usage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 130px 36px;
    gap: 10px;
    align-items: center;
}

.ft-usage-head {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
}

@media (max-width: 760px) {
    .ft-usage-head { display: none; }

    .ft-usage-row {
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
    }

    .ft-usage-row .ft-usage-spool { grid-column: 1; }
    .ft-usage-row .ft-usage-remove { grid-column: 2; grid-row: 1; }
    .ft-usage-row .ft-usage-grams { grid-column: 1 / -1; }
}

.ft-usage-grams {
    display: contents;
}

@media (max-width: 760px) {
    .ft-usage-grams {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* BbButton restyled as the dashed "add a row" affordance from the mockups. */
.ft-usage-add {
    width: 100%;
    border-style: dashed;
    border-width: 1.5px;
    color: var(--muted-foreground);
}

.ft-usage-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ft-recap {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 1100px) {
    .ft-recap { position: static; }
}

.ft-recap-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ft-recap-tile {
    background: var(--muted);
    border-radius: 12px;
    padding: 12px 14px;
}

.ft-recap-tile-label {
    font-size: 12px;
    color: var(--muted-foreground);
}

.ft-recap-tile-value {
    margin-top: 2px;
    font-size: 22px;
    font-weight: 700;
    color: var(--card-foreground);
}

.ft-recap-line {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.ft-recap-warning {
    display: flex;
    gap: 10px;
    background: var(--muted);
    border: 1px solid var(--warn);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
}

.ft-divider {
    height: 1px;
    background: var(--border);
}

/* Settings ---------------------------------------------------------------- */

.ft-settings {
    max-width: 820px;
}

.ft-density-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    .ft-density-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ft-density-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dialogs ----------------------------------------------------------------- */

.ft-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 85vh;
    overflow-y: auto;
}

.ft-dialog-wide {
    max-width: 640px;
}

/* BbCombobox puts its Class on the trigger button, which is inline-flex and therefore
   shrinks to its content. These triggers sit in grid cells and form fields that already
   define the width. */
.ft-combobox-full {
    width: 100%;
}

/* A usage row whose spool would go negative or cross its threshold. */
.ft-combobox-warn {
    border-color: var(--warn);
}

/* One option line: name flexes, the rest keeps its natural width. */
.ft-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.ft-option-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-option-code {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-option-grams {
    margin-left: auto;
    font-size: 12px;
}

/* A switch sitting beside a labelled input: line it up with the input, not the label. */
.ft-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: end;
    min-height: 40px;
}

/* --------------------------------------------------------------------------
   Mobile (< 768px)

   The sidebar becomes a bottom tab bar, as in the mockups: five destinations
   plus a raised primary action for the job form, which is the whole point of
   opening the app on a phone.
   -------------------------------------------------------------------------- */

.ft-tabbar,
.ft-topbar {
    display: none;
}

@media (max-width: 767px) {
    .ft-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px 8px;
    }

    .ft-topbar .ft-brand-mark {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .ft-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 4px;
        padding: 10px 8px calc(18px + env(safe-area-inset-bottom));
        background: var(--card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
    }

    .ft-tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        flex: 1;
        min-width: 0;
        padding: 2px 0;
        font-size: 10.5px;
        color: var(--muted-foreground);
        text-decoration: none;
    }

    .ft-tabbar a.is-active {
        color: var(--primary);
        font-weight: 600;
    }

    .ft-tabbar a.ft-tabbar-cta {
        flex: none;
        width: 52px;
        height: 52px;
        margin-top: -26px;
        border-radius: 9999px;
        justify-content: center;
        background: var(--primary);
        color: var(--primary-foreground);
        box-shadow: 0 4px 10px rgb(0 0 0 / 0.18);
    }

    /* BbSidebar already hides its aside under md; the rail is a separate sibling. */
    .ft-shell [data-sidebar="rail"] {
        display: none;
    }

    .ft-page {
        padding: 8px 16px 96px;
        gap: 14px;
        min-height: auto;
    }

    .ft-page-head {
        align-items: flex-start;
    }

    .ft-page-head h1 {
        font-size: 19px;
    }

    .ft-page-actions {
        margin-left: 0;
        width: 100%;
    }

    .ft-toolbar-search,
    .ft-toolbar-filter {
        width: 100%;
    }

    .ft-detail-mark {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    /* Sticky live recap: the job form is used standing next to the printer. */
    .ft-recap {
        position: fixed;
        /* Neutralises the desktop sticky offset, otherwise top + bottom stretch the panel. */
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        gap: 10px;
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgb(0 0 0 / 0.10);
        max-height: 62vh;
        overflow-y: auto;
    }

    .ft-recap .ft-recap-tiles {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ft-recap-tile-value {
        font-size: 19px;
    }

    /* With the recap pinned, the tab bar would sit on top of it. */
    .ft-job-page .ft-tabbar {
        display: none;
    }

    .ft-job-page .ft-page {
        padding-bottom: 320px;
    }
}

@media (min-width: 768px) {
    .ft-tabbar,
    .ft-topbar {
        display: none;
    }
}


/* Blazor's built-in error UI, restyled to the theme. */
#blazor-error-ui {
    position: fixed;
    inset: auto 0 0 0;
    display: none;
    z-index: 1000;
    padding: 0.875rem 1.25rem;
    background: var(--destructive);
    color: var(--destructive-foreground);
    font-size: 0.875rem;
    box-shadow: 0 -2px 12px rgb(0 0 0 / 0.18);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    padding: 0 0.5rem;
}