/*
  App-level styling for PortalUI. SharpCompose emits the full design-system stylesheet at runtime
  (one <style> block wrapped in @layer sharpcompose), so component styling lives there. Unlayered
  rules here win over the framework layer — the intended override seam.

  The theme (colours, fonts, radius, status tones) lives in theme-quantcargo.css, loaded first.
  1. App chrome: page reset, Blazor error banner, render-error boundary.
  2. pui-* helpers used by the shell and the shared blocks in Views/Shared (PortalBlocks).
*/

/* 1. App chrome --------------------------------------------------------------------------- */
/* The root stays 16px: SharpCompose sizes controls in rem (a 36px button is 2.25rem). Only body text is 14px. */
html {
    font-size: 16px;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    line-height: 1.45;
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
}

body {
    font-size: 14px;
}

#app {
    min-height: 100vh;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: #fed7aa;
    color: #7c2d12;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .reload {
    color: #7c2d12;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-weight: 700;
}

.sc-error {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #991b1b;
    white-space: pre-wrap;
    font-family: var(--font-mono);
}

/* 2. pui-* helpers ------------------------------------------------------------------------ */

/* Identifiers and money: mono, tabular figures. */
.pui-mono { font-family: var(--font-mono); font-size: 13px; }
.pui-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.pui-right { text-align: right; justify-content: flex-end; }
.pui-muted { color: var(--muted-foreground); }

/* Page header: title + one context line, actions on the right. */
.pui-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.pui-page-context { font-size: 13px; color: var(--muted-foreground); margin: 0; }

/* Detail layout: main column + right rail; the rail drops below on narrow screens. */
.pui-detail { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pui-detail-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pui-detail-rail { flex: 1 1 320px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Form sheet widths. */
.cn-sheet.pui-sheet-simple, .pui-sheet-simple .cn-sheet { width: min(560px, 100vw); max-width: 100vw; }
.cn-sheet.pui-sheet-complex, .pui-sheet-complex .cn-sheet { width: min(720px, 100vw); max-width: 100vw; }
.pui-sheet-section { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.pui-sheet-footer { padding: 12px 24px; border-top: 1px solid var(--border); background: var(--background); }
.pui-sheet-section-title { font-size: 14px; font-weight: 600; margin: 0; }
.pui-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.pui-optional { font-weight: 400; color: var(--muted-foreground); }

/* Confirmation dialog width. */
.pui-confirm { width: min(440px, calc(100vw - 32px)); }

/* Key/value list. */
.pui-dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 10px 16px; font-size: 13px; margin: 0; }
.pui-dl dt { color: var(--muted-foreground); }
.pui-dl dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Two-line table cell: primary + small muted secondary. */
.pui-cell-secondary { font-size: 12px; color: var(--muted-foreground); }

/* Sidebar: navy panel, grouped menu, brand-orange icon on the active item. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pui-icon { width: 16px; height: 16px; flex: none; }
.pui-icon path { stroke-linecap: round; stroke-linejoin: round; }
.pui-sidebar { background: var(--sidebar); color: var(--sidebar-foreground); padding: 12px 10px; }
.pui-sidebar .cn-separator { background: var(--sidebar-border); }
.pui-brand-mark { width: 26px; height: 26px; flex: none; }
.pui-brand-mark svg { width: 26px; height: 26px; }
.pui-brand-mark path { stroke-linecap: round; }
.pui-brand-name { color: #fff; letter-spacing: -0.01em; }
.pui-company-row { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0 0 8px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--sidebar-border); border-radius: 8px; line-height: 1.2; }
.pui-avatar-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 7px; background: oklch(0.36 0.06 258); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.pui-account-row { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 10px; border-radius: 8px; }
.pui-account-row .pui-avatar-chip { border-radius: 50%; }
.pui-sidebar .cn-button.pui-sign-out { flex: none; width: 32px; height: 32px; padding: 0; color: var(--sidebar-muted); }
.pui-sidebar .cn-button.pui-sign-out:hover { background: var(--sidebar-accent); color: #fff; }
.pui-company-name { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-sidebar-muted { color: var(--sidebar-muted); }
.pui-user-email { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-sidebar [data-testid="sidebar-scroll"] { scrollbar-width: thin; scrollbar-color: var(--sidebar-accent) transparent; }
.pui-sidebar .cn-button.pui-nav-item { width: 100%; justify-content: flex-start; height: 34px; padding: 0 10px; color: var(--sidebar-foreground); font-weight: 400; font-size: 14px; }
.pui-sidebar .cn-button.pui-nav-item:hover { background: var(--sidebar-accent); color: #fff; }
.pui-sidebar .cn-button.pui-nav-item[aria-current="page"] { background: var(--sidebar-accent); color: #fff; font-weight: 600; }
.pui-sidebar .cn-button.pui-nav-item[aria-current="page"] .pui-icon { color: var(--brand); }
.pui-nav-group-label { display: block; padding: 16px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sidebar-muted); }
.pui-sidebar .cn-button.pui-nav-group-toggle { width: 100%; height: auto; justify-content: flex-start; border-radius: 6px; padding: 16px 10px 6px; color: var(--sidebar-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pui-sidebar .cn-button.pui-nav-group-toggle:hover { background: transparent; color: #fff; }
.pui-sidebar-footer .sc-hstack > .cn-button.pui-nav-item { width: auto; flex: none; color: var(--sidebar-muted); }
.pui-sidebar-footer { border-top: 1px solid var(--sidebar-border); padding-top: 12px; margin-top: 0; }
.pui-nav-sheet { background: var(--sidebar); padding: 0; }
.pui-nav-sheet .pui-sidebar { height: 100%; }
.pui-nav-sheet [data-slot="sheet-close"] { color: var(--sidebar-foreground); z-index: 1; }
.pui-nav-sheet [data-slot="sheet-close"]:hover { background: var(--sidebar-accent); color: #fff; }

/* Top bar: back link on detail pages, search, notifications. */
.pui-topbar { height: 60px; padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--card); align-items: center; box-sizing: border-box; }
@media (max-width: 767px) { .pui-topbar { padding: 0 12px; } }

/* Filter bar: fields sit side by side; the spacer must not force a wrap. */
.pui-filter-bar > .cn-field { width: auto; flex: 0 1 240px; }
.pui-filter-bar > .sc-spacer { flex: 1 1 0; min-width: 0; width: auto; }

/* Top bar search: a 34px field with a leading magnifier; the bell carries an orange dot when something is unread. */
.pui-topbar-search { height: 34px; width: min(360px, 100%); background: var(--card); box-shadow: none; border-radius: 8px; }
.pui-topbar-search .cn-input { font-size: 14px; }

/* Cards follow the design: 12px radius, flat, 16px/20px section padding, 15px title. */
.cn-card { --card-spacing: 20px; gap: 0; padding: 0; border-radius: 12px; box-shadow: none; }
.cn-card-header { padding: 16px 20px 0; gap: 2px; }
.cn-card-content { padding: 16px 20px; }
.cn-card-footer { padding: 12px 20px; }
.cn-card-title { font-size: 15px; line-height: 1.45; }
.cn-card-description { font-size: 13px; line-height: 1.45; }

/* Plain-text links take the link colour (the design's `a` rule); links that wrap other content keep theirs. */
a.sc-link:not(:has(*)) { color: var(--primary); }
a.sc-link:not(:has(*)):hover { text-decoration: underline; }

/* Tables follow the design: 13px body, 12px muted header, 38px header row, 10px/12px cells. */
.cn-table { font-size: 13px; }
.cn-table-head { height: 38px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.cn-table-cell { padding: 10px 12px; }
.cn-table-row:hover { background: oklch(0.98 0.004 250); }

/* Right-aligned columns: add pui-tr-<n> (1-based) to the Table. */
.pui-tr-1 .cn-table-head:nth-child(1), .pui-tr-1 .cn-table-cell:nth-child(1) { text-align: right; }
.pui-tr-2 .cn-table-head:nth-child(2), .pui-tr-2 .cn-table-cell:nth-child(2) { text-align: right; }
.pui-tr-3 .cn-table-head:nth-child(3), .pui-tr-3 .cn-table-cell:nth-child(3) { text-align: right; }
.pui-tr-4 .cn-table-head:nth-child(4), .pui-tr-4 .cn-table-cell:nth-child(4) { text-align: right; }
.pui-tr-5 .cn-table-head:nth-child(5), .pui-tr-5 .cn-table-cell:nth-child(5) { text-align: right; }
.pui-tr-6 .cn-table-head:nth-child(6), .pui-tr-6 .cn-table-cell:nth-child(6) { text-align: right; }
.pui-tr-7 .cn-table-head:nth-child(7), .pui-tr-7 .cn-table-cell:nth-child(7) { text-align: right; }
.pui-tr-8 .cn-table-head:nth-child(8), .pui-tr-8 .cn-table-cell:nth-child(8) { text-align: right; }
.pui-tr-9 .cn-table-head:nth-child(9), .pui-tr-9 .cn-table-cell:nth-child(9) { text-align: right; }
.pui-tr-10 .cn-table-head:nth-child(10), .pui-tr-10 .cn-table-cell:nth-child(10) { text-align: right; }

/* Right-aligned body cells under a left-aligned header (the design's `td.num`): pui-cr-<n>. */
.pui-cr-1 .cn-table-cell:nth-child(1) { text-align: right; }
.pui-cr-2 .cn-table-cell:nth-child(2) { text-align: right; }
.pui-cr-3 .cn-table-cell:nth-child(3) { text-align: right; }
.pui-cr-4 .cn-table-cell:nth-child(4) { text-align: right; }
.pui-cr-5 .cn-table-cell:nth-child(5) { text-align: right; }
.pui-cr-6 .cn-table-cell:nth-child(6) { text-align: right; }
.pui-cr-7 .cn-table-cell:nth-child(7) { text-align: right; }
.pui-cr-8 .cn-table-cell:nth-child(8) { text-align: right; }
.pui-cr-9 .cn-table-cell:nth-child(9) { text-align: right; }
.pui-cr-10 .cn-table-cell:nth-child(10) { text-align: right; }

/* Narrow leading column (Time, #): pui-col-narrow. */
.pui-col-narrow .cn-table-head:first-child { width: 64px; }
.pui-col-w40 .cn-table-head:first-child { width: 40px; }

/* Two-line cells: the secondary line sits directly under the primary one. */
.sc-vstack:has(> .pui-cell-secondary):not(.pui-ld-dialog-body) { gap: 0 !important; }

/* Tabs: 13px labels, muted when inactive (the design's .cn-tabs-trigger). */
.cn-tabs-trigger { font-size: 13px; font-weight: 500; padding: 0 12px; }
.cn-tabs-trigger-inactive { color: var(--muted-foreground); }

/* Notification bell: an orange dot while something is unread. */
.pui-topbar .cn-button:has(.pui-bell-dot) { position: relative; }
.pui-bell-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card); box-sizing: border-box; padding: 0; }

/* Dialogs: white card surface, 14px radius, the design's overlay tint and title size. */
.cn-dialog { background: var(--card); border-radius: 14px; box-shadow: 0 24px 48px oklch(0.2 0.03 258 / 0.18); }
.cn-dialog-overlay { background: oklch(0.18 0.03 258 / 0.45); }
.cn-dialog-title { font-size: 17px; line-height: 1.3; }
.cn-dialog-description { font-size: 13px; }

/* Global sheet pattern (promoted from the load form): every PortalBlocks.FormSheet follows the board. */
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-sheet { gap: 0; background: var(--card); box-shadow: -12px 0 32px oklch(0.2 0.03 258 / 0.14); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-overlay { background: oklch(0.18 0.03 258 / 0.45); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-title { font-size: 18px; font-weight: 600; line-height: 26px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-description { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-close { top: 19px; right: 24px; width: 32px; height: 32px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .pui-fields { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-field { gap: 6px; min-width: 0; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-field > .sc-vstack { gap: 6px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-label { font-size: 13px; font-weight: 500; line-height: 1.45; display: block; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-field-description { font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-field-error { font-size: 12px; color: var(--tone-danger-fg); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input,
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-select,
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-textarea { height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); font-size: 14px; line-height: 20px; color: var(--foreground); box-shadow: none; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-textarea { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.45; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-select-root { display: block; width: 100%; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-select-trigger { width: 100%; justify-content: space-between; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input::placeholder,
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-textarea::placeholder { color: var(--muted-foreground); opacity: 0.8; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input.pui-num { font-size: 14px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input-group { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); color: var(--muted-foreground); box-shadow: none; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input-group .cn-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; color: var(--foreground); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input-group .cn-input:focus { outline: 0; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input-group:focus-within { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--ring); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input-group-addon,
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-input-group [data-slot="input-group-addon"] { color: var(--muted-foreground); font-size: 14px; padding: 0; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-button-size-default { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-button-size-sm { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-button-size-icon-sm { width: 32px; height: 32px; padding: 0; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-button-variant-outline { background: var(--card); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-toggle-group { display: inline-flex; padding: 3px; gap: 2px; background: var(--muted); border: 0; border-radius: 8px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-toggle-group .cn-toggle-button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-toggle-group .cn-toggle-button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px oklch(0.2 0.02 258 / 0.08); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-field .cn-toggle-group { display: flex; width: 100%; }

.pui-sheet-simple .cn-sheet, .pui-sheet-complex .cn-sheet { gap: 0; background: var(--card); box-shadow: -12px 0 32px oklch(0.2 0.03 258 / 0.14); }
.pui-sheet-header { display: flex; flex-direction: column; gap: 4px; padding: 20px 68px 16px 24px; border-bottom: 1px solid var(--border); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-title { font-size: 18px; font-weight: 600; line-height: 26px; }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-description { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
:is(.pui-sheet-simple, .pui-sheet-complex) .cn-dialog-close { top: 19px; right: 24px; width: 32px; height: 32px; }
.pui-sheet-footer { padding: 12px 24px; border-top: 1px solid var(--border); background: var(--card); }
.pui-sheet-section-title { font-size: 14px; font-weight: 600; }

/* Confirmations: 440px, a ruled footer. */
.pui-confirm .cn-dialog, .cn-dialog.pui-confirm { width: min(440px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.pui-confirm .cn-dialog-footer { margin: 0; padding: 14px 24px; border-top: 1px solid var(--border); }

/* Outline buttons are white with the input border (the boards), not grey with a shadow. */
.cn-button-variant-outline { background: var(--card); border-color: var(--input); box-shadow: none; }
.pui-pager .cn-label { font-weight: 400; font-size: 13px; color: var(--muted-foreground); }

/* The list card's footer already draws the rule and padding; the pager inside it must not double them. */
.pui-list-footer .pui-pager { padding: 0; border-top: 0; }

/* Chat pages (Messages, Assistant) fill the viewport: the page itself never scrolls, only the list and the thread. */
.pui-main-fill { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pui-main-fill > * { flex: 1 1 0%; min-height: 0; }
.pui-page-fill { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 24px; overflow: hidden; }
.pui-page-fill > .pui-msg-shell, .pui-page-fill > .pui-assistant-shell { flex: 1 1 0%; min-height: 0; flex-wrap: nowrap; }
.pui-page-fill .pui-msg-list, .pui-page-fill .pui-msg-thread, .pui-page-fill .pui-assistant-side, .pui-page-fill .pui-assistant-main { min-height: 0; overflow: hidden; }
.pui-page-fill .pui-msg-thread { flex: 1 1 0%; }
.pui-page-fill .pui-msg-body { flex: 1 1 0%; max-height: none; overflow-y: auto; }
.pui-page-fill .pui-assistant-thread { min-height: 0; }
.pui-main-fill > .sc-layered > .pui-page-fill { flex: 1 1 0%; min-height: 0; }

/* Shared 24-hour time box: fixed, readable width so it never crowds the date button next to it. */
.pui-time-input { min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }

/* Chat pages on a phone: stack the panes but keep the page fixed; only the list and the thread scroll. */
@media (max-width: 800px) {
  .pui-main-fill { overflow: hidden; display: flex; }
  .pui-page-fill { height: 100%; overflow: hidden; display: flex; }
  .pui-page-fill .pui-msg-shell, .pui-page-fill .pui-assistant-shell { flex-wrap: nowrap; flex-direction: column; min-height: 0; }
  .pui-page-fill .pui-msg-list { flex: 0 0 auto; max-height: 30%; max-width: none; }
  .pui-page-fill .pui-msg-thread { flex: 1 1 0%; min-height: 0; }
  .pui-page-fill .pui-msg-body { max-height: none; }
}