/* CargoFlow Portal. Product colours (navy + teal of the CargoFlow mark), not the tenant's: staff work in CargoFlow. */

:root {
    --cf-navy: #0B2545;
    --cf-navy-2: #13315C;
    --cf-teal: #2EC4B6;
    --cf-teal-strong: #14988C;
    --cf-blue: #2563EB;
    --cf-ink: #0F172A;
    --cf-muted: #64748B;
    --cf-line: #E2E8F0;
    --cf-bg: #F3F6FB;
    --cf-surface: #FFFFFF;
    --cf-radius: 14px;
    --cf-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    --cf-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.1);

    --bs-body-font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--cf-ink);
    --bs-body-bg: var(--cf-bg);
    --bs-border-color: var(--cf-line);
    --bs-primary: var(--cf-navy);
    --bs-primary-rgb: 11, 37, 69;
    --bs-link-color: var(--cf-blue);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--cf-navy);
    --bs-border-radius: 10px;
    --bs-secondary-color: var(--cf-muted);
}

html, body {
    background: var(--cf-bg);
    color: var(--cf-ink);
    -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.05rem; font-weight: 700; }
h1:focus { outline: none; }

a { text-underline-offset: 2px; }
.text-muted { color: var(--cf-muted) !important; }

/* Buttons */
.btn { --bs-btn-border-radius: 10px; font-weight: 600; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.btn-sm { min-height: 2rem; --bs-btn-border-radius: 8px; }
.btn-primary {
    --bs-btn-bg: var(--cf-navy); --bs-btn-border-color: var(--cf-navy);
    --bs-btn-hover-bg: var(--cf-navy-2); --bs-btn-hover-border-color: var(--cf-navy-2);
    --bs-btn-active-bg: var(--cf-navy-2); --bs-btn-disabled-bg: var(--cf-navy); --bs-btn-disabled-border-color: var(--cf-navy);
    background-image: linear-gradient(135deg, var(--cf-navy) 0%, #1B4B80 100%);
    box-shadow: 0 4px 14px rgba(11, 37, 69, 0.25);
}
.btn-primary:hover { background-image: linear-gradient(135deg, var(--cf-navy-2) 0%, #215A98 100%); }
.btn-accent { background: var(--cf-teal); color: var(--cf-navy); border: 0; box-shadow: 0 4px 14px rgba(46, 196, 182, 0.35); }
.btn-accent:hover { background: #45D3C5; color: var(--cf-navy); }
.btn-outline-primary { --bs-btn-color: var(--cf-navy); --bs-btn-border-color: #C7D2E3; --bs-btn-hover-bg: var(--cf-navy); --bs-btn-hover-border-color: var(--cf-navy); --bs-btn-active-bg: var(--cf-navy); background: #fff; }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 10px; color: var(--cf-muted); background: transparent; border: 1px solid transparent; }
.btn-icon:hover { color: var(--cf-ink); background: #fff; border-color: var(--cf-line); }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(46, 196, 182, 0.35); border-color: var(--cf-teal); }

/* Forms */
.form-control, .form-select { border-radius: 10px; border-color: #D3DCE8; min-height: 2.6rem; }
.form-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }
.form-text { color: var(--cf-muted); }
.form-check-input:checked { background-color: var(--cf-teal-strong); border-color: var(--cf-teal-strong); }
.input-group-text { border-radius: 10px; background: #F1F5F9; border-color: #D3DCE8; }
fieldset legend { font-weight: 700; }
.validation-message { color: #DC2626; }

/* Cards / panels */
.card, .panel {
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--cf-radius);
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow);
}
.panel { padding: 1.25rem 1.5rem; }
/* A card without a card-body (or a flush table) gets the panel's padding, so its content never touches the edge. */
.card:not(:has(> .card-body)):not(.panel-flush) { padding: 1.25rem 1.5rem; }
.panel-flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--cf-line); }
.panel-head h2 { margin: 0; font-size: 1.05rem; }
.alert { border-radius: 12px; border: 0; }
.alert-success { background: #E7F8F5; color: #0E6B62; }
.alert-danger { background: #FEECEC; color: #9F1C1C; }
.alert-warning { background: #FFF6E0; color: #8A5300; }
.alert-info { background: #EAF2FF; color: #1E40AF; }

/* Page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head .lead-text { color: var(--cf-muted); margin: 0; max-width: 46rem; }
.eyebrow { margin: 0 0 0.35rem; color: var(--cf-teal-strong); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding: 0 1rem; background: rgba(243, 246, 251, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(226, 232, 240, 0.7); }
.topbar-company { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--cf-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--cf-teal); box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.2); flex: none; }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.topbar-actions form { margin: 0; }
.topbar-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.6rem 0.25rem 0.25rem; border-radius: 999px; color: var(--cf-ink); text-decoration: none; }
.topbar-user:hover { background: #fff; }
.topbar-user-name { font-size: 0.875rem; font-weight: 600; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .topbar-user-name { display: none; } }
@media (min-width: 900px) { .topbar { padding: 0 2.5rem; min-height: 4.5rem; } }
.lang-switch { display: flex; padding: 3px; border-radius: 999px; background: #E6ECF4; }
.lang-option { min-width: 2.5rem; min-height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--cf-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
.lang-option[aria-pressed="true"] { background: #fff; color: var(--cf-navy); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

/* Avatars */
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: linear-gradient(135deg, var(--cf-teal) 0%, #3B82F6 100%); color: #fff; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.02em; }
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.72rem; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }

/* Dashboard */
.hero { position: relative; overflow: hidden; margin-bottom: 1.75rem; padding: 1.75rem 1.75rem 2rem; border-radius: 20px; color: #fff;
    background: radial-gradient(80% 140% at 100% 0%, rgba(46, 196, 182, 0.45) 0%, transparent 55%), linear-gradient(135deg, #0B2545 0%, #13315C 60%, #1B4B80 100%);
    box-shadow: var(--cf-shadow-lift); }
.hero::after { content: ""; position: absolute; right: -4rem; bottom: -6rem; width: 18rem; height: 18rem; border-radius: 999px; border: 2.5rem solid rgba(255, 255, 255, 0.05); }
.hero h1 { color: #fff; margin: 0 0 0.35rem; }
.hero p { margin: 0; color: rgba(255, 255, 255, 0.75); max-width: 40rem; }
.hero .eyebrow { color: #7EEBDD; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; position: relative; z-index: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat { position: relative; display: block; padding: 1.15rem 1.25rem; border-radius: var(--cf-radius); background: #fff; box-shadow: var(--cf-shadow); color: var(--cf-ink); text-decoration: none; border: 1px solid rgba(226, 232, 240, 0.8); transition: transform 0.15s, box-shadow 0.15s; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-lift); color: var(--cf-ink); }
.stat-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; border-radius: 12px; }
.stat-value { display: block; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.stat-label { display: block; margin-top: 0.35rem; color: var(--cf-muted); font-size: 0.875rem; font-weight: 600; }
.tone-amber .stat-icon { background: #FFF4DC; color: #B45309; }
.tone-blue .stat-icon { background: #E3EDFF; color: #1D4ED8; }
.tone-violet .stat-icon { background: #F1E8FF; color: #7C3AED; }
.tone-teal .stat-icon { background: #DDF7F4; color: var(--cf-teal-strong); }
.trend { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; }
.trend-up { color: #0E8A5F; }
.trend-down { color: #B91C1C; }
.dash-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1200px) { .dash-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.quick-links { display: grid; gap: 0.5rem; padding: 0.75rem; }
.quick-link { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem; border-radius: 12px; color: var(--cf-ink); text-decoration: none; font-weight: 600; }
.quick-link:hover { background: #F1F5F9; color: var(--cf-ink); }
.quick-link .stat-icon { margin: 0; width: 2.25rem; height: 2.25rem; }
.quick-link small { display: block; color: var(--cf-muted); font-weight: 500; }

/* Tables */
.data-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.data-table th { padding: 0.75rem 1rem; background: #F8FAFC; color: var(--cf-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--cf-line); white-space: nowrap; }
.data-table td { padding: 0.85rem 1rem; border-bottom: 1px solid #EEF2F7; vertical-align: middle; }
.data-table tbody tr { transition: background-color 0.12s; }
.data-table tbody tr:hover { background: #F8FBFF; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
/* Quote lines: amounts up to 99,999.99 stay readable while typing, also on a small screen (the table scrolls sideways). */
.quote-editor .quote-description { min-width: 12rem; }
.quote-editor .quote-quantity { min-width: 5.5rem; }
.quote-editor .quote-price { min-width: 8.5rem; }
.quote-editor .quote-vat { min-width: 6rem; }
.cell-strong { font-weight: 700; color: var(--cf-ink); text-decoration: none; }
a.cell-strong:hover { color: var(--cf-blue); }
.cell-sub { display: block; color: var(--cf-muted); font-size: 0.82rem; }
.person { display: flex; align-items: center; gap: 0.75rem; }
.table { --bs-table-bg: transparent; }

/* Status pills (status is also written out: never colour alone) */
.status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: #EEF2F7; color: #475569; white-space: nowrap; }
.status::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; }
/* How a request came in (RequestChannelBadge): with the customer's account, by a colleague, or as a guest. */
.channel { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #EEF2F7; color: #475569; white-space: nowrap; }
.channel-customeraccount { background: #E6F4EA; color: #1E6B34; }
.channel-staff { background: #E3EDFF; color: #1D4ED8; }
.channel-number { font-weight: 700; }
.status-submitted { background: #FFF4DC; color: #B45309; }
.status-inreview { background: #E3EDFF; color: #1D4ED8; }
.status-awaitingcustomerinfo { background: #F1E8FF; color: #7C3AED; }
.status-quoted, .status-published, .status-ok { background: #DDF7EC; color: #0E7A55; }
.status-closed, .status-draft, .status-muted { background: #EEF2F7; color: #64748B; }
.status-danger { background: #FEECEC; color: #B91C1C; }

/* Filters, tabs, search */
.status-filter, .content-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 0.3rem; border-radius: 12px; background: #E6ECF4; width: fit-content; max-width: 100%; }
/* Links (Inbox, Content) and buttons (Invoices, Messages) look the same: the browser's button look is reset. */
.status-filter a, .content-nav a, .status-filter button { padding: 0.45rem 0.95rem; border: 0; border-radius: 9px; background: transparent; color: var(--cf-muted); font: inherit; font-weight: 700; font-size: 0.875rem; line-height: 1.5; text-decoration: none; white-space: nowrap; cursor: pointer; }
.status-filter a:hover, .content-nav a:hover, .status-filter button:hover { color: var(--cf-ink); }
.status-filter a.active, .content-nav a.active, .status-filter button.active { background: #fff; color: var(--cf-navy); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.status-filter button:focus-visible { outline: 2px solid var(--cf-teal); outline-offset: 2px; }
.search-box { position: relative; max-width: 26rem; flex: 1; }
.search-box .icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--cf-muted); }
.search-box input { padding-left: 2.6rem; background: #fff; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; padding: 0.85rem 1.25rem; border-top: 1px solid var(--cf-line); font-size: 0.9rem; }
.empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--cf-muted); }
.empty-state .stat-icon { margin: 0 auto 0.75rem; background: #EEF2F7; color: var(--cf-muted); width: 3rem; height: 3rem; }

/* Request page */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; }
.facts dt { font-weight: 600; color: var(--cf-muted); }
.facts dd { margin: 0; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }
.notes { white-space: pre-wrap; }
.request-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.request-head h1 { margin: 0; }
.request-layout { display: grid; gap: 1.5rem; }
.request-main { padding: 1.5rem; border-radius: var(--cf-radius); background: #fff; box-shadow: var(--cf-shadow); border: 1px solid rgba(226, 232, 240, 0.8); }
.request-main h2 { margin-top: 1.75rem; font-size: 1.1rem; }
/* Large screens: the page scrolls as usual; the work panels (right) stay in view next to the request and scroll on
   their own only when they are taller than the window, after which the page goes on. The right column is wide enough
   for the quote editor. */
@media (min-width: 1200px) {
    .request-layout { grid-template-columns: minmax(0, 1fr) minmax(28rem, 36%); align-items: start; }
    .request-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; align-content: start; padding-right: 0.25rem; }
}
.request-side { display: grid; gap: 1rem; }
.request-actions { border-top: 4px solid var(--cf-teal); }
.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.attachment { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.attachment img { display: block; width: 100%; height: 9rem; object-fit: cover; border-radius: 12px; background: #F1F5F9; }
.attachment-doc { display: grid; place-items: center; height: 9rem; border-radius: 12px; background: #F1F5F9; font-weight: 800; text-decoration: none; color: var(--cf-navy); }
.attachment-name { font-weight: 600; overflow-wrap: anywhere; }
.attachment-meta { color: var(--cf-muted); }
.note-list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.note-list li { padding: 0.7rem 0.85rem; border-left: 3px solid #CBD5E1; background: #F8FAFC; border-radius: 8px; }
.note-list li.note-customer { border-left-color: var(--cf-teal); background: #EEFBF9; }
.note-list p { margin: 0.25rem 0 0; white-space: pre-wrap; }
.note-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--cf-muted); }

/* Content module */
.editor-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.editor { display: grid; gap: 1.5rem; }
.editor-main { padding: 1.5rem; border-radius: var(--cf-radius); background: #fff; box-shadow: var(--cf-shadow); }
@media (min-width: 992px) { .editor { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .editor-side { position: sticky; top: 5.5rem; } }
.lang-tabs { display: flex; gap: 0.35rem; margin-bottom: 1.25rem; }
.lang-tab { min-height: 2.25rem; padding: 0.3rem 1rem; border: 1px solid #D3DCE8; border-radius: 999px; background: #fff; font-weight: 800; }
.lang-tab.active { border-color: var(--cf-navy); background: var(--cf-navy); color: #fff; }
.lang-empty { margin-left: 0.25rem; opacity: 0.6; }
.highlight-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.75rem; align-items: start; margin-bottom: 0.75rem; padding: 0.85rem; border: 1px solid var(--cf-line); border-radius: 12px; background: #FBFCFE; }
.highlight-number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--cf-navy); color: #fff; font-weight: 800; }
.highlight-fields { display: grid; gap: 0.5rem; }
.highlight-actions { display: flex; flex-direction: column; gap: 0.25rem; }
.upload-box { padding: 1.25rem; border: 2px dashed #C7D2E3; border-radius: var(--cf-radius); background: #fff; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.media-card { overflow: hidden; border-radius: var(--cf-radius); background: #fff; box-shadow: var(--cf-shadow); border: 1px solid rgba(226, 232, 240, 0.8); }
.media-card img { display: block; width: 100%; height: 10rem; object-fit: cover; background: #F1F5F9; }
.media-card-body { padding: 0.85rem; }
.media-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Settings */
.settings-form { max-width: 54rem; }
.settings-form fieldset { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--cf-radius); background: #fff; box-shadow: var(--cf-shadow); border: 1px solid rgba(226, 232, 240, 0.8); }
.settings-inline { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(10rem, 18rem); gap: 0.25rem 1rem; align-items: center; }
.settings-inline .form-label { margin: 0; }
.receive-scan { max-width: 36rem; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; position: sticky; bottom: 0; z-index: 5; padding: 0.85rem 1rem; border-radius: var(--cf-radius); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); box-shadow: var(--cf-shadow-lift); }
.settings-history { margin-top: 1.5rem; }
.settings-history summary { cursor: pointer; font-weight: 700; margin-bottom: 0.5rem; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.logo-picker { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.logo-preview { max-height: 5rem; max-width: 14rem; object-fit: contain; padding: 0.5rem; border: 1px solid var(--cf-line); border-radius: 10px; background: #fff; }
@media (max-width: 640px) { .settings-inline { grid-template-columns: 1fr; } }

/* Team */
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; flex-wrap: wrap; }

/* Account pages (sign-in, 2FA) */
.auth-card { max-width: 30rem; margin: 2rem auto; padding: 2rem; border-radius: 20px; background: #fff; box-shadow: var(--cf-shadow-lift); }
.authenticator-qr { width: 220px; height: 220px; margin: 0.5rem 0 1rem; padding: 0; background: #fff; border-radius: 8px; }
.authenticator-qr svg { width: 100%; height: 100%; display: block; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

/* Print view */
.print-page { max-width: 60rem; margin: 0 auto; padding: 1.5rem; background: #fff; }
.print-toolbar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.print-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 2px solid #222; }
.print-head h1 { margin: 0; }
.print-company { margin: 0; font-weight: 700; }
.print-meta { margin: 0; text-align: right; font-size: 0.875rem; color: #5f5a5a; }
.print-notes { padding-left: 1.25rem; }
.print-notes li { margin-bottom: 0.375rem; white-space: pre-wrap; }
@media print {
    body { background: #fff; }
    .no-print, .shell-sidebar, .topbar, #blazor-error-ui { display: none !important; }
    .shell, .shell-main { display: block; }
    .table-scroll { overflow: visible; }
    .print-page { padding: 0; max-width: none; }
    .attachments { grid-template-columns: repeat(4, 1fr); }
    .attachment { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}

.blazor-error-boundary { padding: 1rem 1rem 1rem 1.25rem; border-radius: 12px; background: #B32121; color: white; }
.blazor-error-boundary::after { content: "Something went wrong."; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* ADAM */
.adam-card { border-top: 4px solid #7C3AED; }
.adam-head { display: flex; align-items: center; gap: 0.75rem; }
.adam-badge { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: linear-gradient(135deg, #7C3AED, #2EC4B6); color: #fff; flex: none; }
.adam-amount { margin: 1rem 0 0.15rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--cf-ink); }
.adam-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; color: var(--cf-muted); font-size: 0.9rem; }
.adam-steps summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.adam-steps td { font-size: 0.875rem; }
.adam-warnings { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.85rem; color: #8A5300; }
.adam-warnings li { display: flex; gap: 0.4rem; align-items: flex-start; }
.adam-warnings .icon { flex: none; margin-top: 0.15rem; }
.photo-issue { align-self: flex-start; }

/* Show-password button (password-toggle.js): laid over the right edge of the field. */
.password-toggle-host {
  position: relative;
}

.has-password-toggle {
  padding-right: 3rem !important;
}

/* Edge shows its own reveal button: one eye is enough. */
.has-password-toggle::-ms-reveal,
.has-password-toggle::-ms-clear {
  display: none;
}

.password-toggle {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  opacity: 1;
}

.password-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
  border-radius: 4px;
}

/* Partner portal (B31): the grid of the partner's other warehouse portals. */
.partner-grid th, .partner-grid td { white-space: nowrap; }
.partner-grid .num {
  text-align: right;
  white-space: nowrap;
}

.partner-grid tbody tr {
  cursor: pointer;
}

.partner-grid tbody tr.is-selected {
  background: rgba(11, 58, 110, 0.12);
}

/* A row on a freight to the partner's warehouse of another customer, or an order: nothing to open. */
.partner-grid tbody tr.is-limited {
  cursor: default;
}

/* Freight accordion (Containers & flights, partner cargo): a summary row per freight on native details/summary, the
   contents below it. Desktop: one grid for the header and every summary. Narrow: the title on top, then label/value pairs. */
.freight-accordion {
  --fa-cols: 1.5rem minmax(9rem, 1.6fr) 4.5rem 7.5rem 6.5rem 6.5rem 4.5rem 4.5rem 6.5rem;
  min-width: 0;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  background: var(--cf-surface);
  box-shadow: var(--cf-shadow);
  overflow: hidden;
}

.fa-row {
  display: grid;
  grid-template-columns: var(--fa-cols);
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.8rem 1rem;
}

.fa-cells { display: contents; }
.fa-row .num { text-align: right; white-space: nowrap; }

.fa-head {
  padding-block: 0.6rem;
  background: #F8FAFC;
  color: var(--cf-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cf-line);
  white-space: nowrap;
}

.fa-item + .fa-item { border-top: 1px solid var(--cf-line); }
.fa-item > summary { list-style: none; cursor: pointer; transition: background-color 0.12s; }
.fa-item > summary::-webkit-details-marker { display: none; }
.fa-item > summary:hover { background: #F8FBFF; }
.fa-item > summary:focus-visible { outline: 2px solid var(--cf-teal); outline-offset: -2px; }
.fa-item[open] { outline: 1px solid rgba(37, 99, 235, 0.45); outline-offset: -1px; }
.fa-item[open] > summary { background: #EEF4FF; color: var(--cf-navy); box-shadow: inset 0 -1px 0 #D6E2FB; }
.fa-item:last-child { border-bottom-left-radius: var(--cf-radius); border-bottom-right-radius: var(--cf-radius); }

.fa-chevron { display: inline-grid; place-items: center; color: var(--cf-muted); transition: transform 0.15s; }
.fa-item[open] .fa-chevron { transform: rotate(180deg); color: var(--cf-blue); }
.fa-title { min-width: 0; overflow-wrap: anywhere; }
.fa-cell { min-width: 0; }
/* Read by screen readers everywhere; shown as a small caption on a narrow screen only. */
.fa-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.fa-body { min-width: 0; background: var(--cf-surface); }
.fa-body > .table-scroll, .fa-body .data-table { max-width: 100%; }
.fa-empty, .fa-note { margin: 0; padding: 0.85rem 1rem; color: var(--cf-muted); }
.fa-empty { font-style: italic; }
.fa-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.85rem 1rem 0.25rem; }
.fa-subhead { margin: 0; padding: 0.85rem 1rem 0.35rem; color: var(--cf-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 62rem) {
  .fa-head { display: none; }
  .fa-row { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: 0.4rem; }
  .fa-cells { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; grid-column: 2; }
  .fa-row .num { text-align: left; }
  .fa-cell { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; }
  .fa-label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    color: var(--cf-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .fa-cell:has(> .fa-label:only-child) { display: none; }   /* no value (not departed yet): no empty caption */
}

@media print {
  .freight-accordion { box-shadow: none; border-color: #999; }
  .fa-chevron { visibility: hidden; }
  .fa-item[open] { outline: 0; }
  .fa-item[open] > summary { background: #F1F5F9; box-shadow: none; }
  .fa-item > summary { break-after: avoid; }
}

/* The partner portal's tab hint and its column filters (above the accordion, the columns are inside each freight). */
.partner-tab-hint { margin: 0 0 0.75rem; color: var(--cf-muted); font-size: 0.875rem; }
.partner-filters-panel { margin-bottom: 0.75rem; }
.partner-filters-panel > summary { display: inline-flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; color: var(--cf-navy); font-size: 0.875rem; font-weight: 700; }
.partner-filters-panel > summary::-webkit-details-marker { display: none; }
.partner-filters-panel > summary:focus-visible { outline: 2px solid var(--cf-teal); outline-offset: 2px; border-radius: 6px; }
.partner-filters-panel[open] .cargo-menu-caret { transform: rotate(180deg); }
.partner-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; padding-top: 0.6rem; }
.partner-filters label { display: grid; gap: 0.2rem; min-width: 8.5rem; flex: 1 1 8.5rem; max-width: 14rem; }
.partner-filters label > span { color: var(--cf-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.partner-details { border-top: 1px solid var(--cf-line); background: #F8FAFC; margin: 0; }

/* The cargo toolbar: views left, filters in the middle (the search grows), actions right. Below a laptop width two rows
   (views and actions, then the filters); on a phone stacked, the views scrolling sideways. */
.cargo-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "views filters actions";
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cargo-toolbar-views { grid-area: views; margin: 0; flex-wrap: nowrap; }
.cargo-toolbar-views button { min-height: 2.25rem; }
.cargo-toolbar-filters { grid-area: filters; display: flex; gap: 0.5rem; min-width: 0; }
.cargo-toolbar-freight { flex: 0 1 13rem; min-width: 9rem; width: auto; text-overflow: ellipsis; }
.cargo-toolbar-filters .search-box { flex: 1 1 10rem; min-width: 8rem; max-width: none; }
.cargo-toolbar-actions { grid-area: actions; display: flex; gap: 0.5rem; justify-self: end; }
.cargo-toolbar .btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.375rem; white-space: nowrap; }
.cargo-print-label { display: none; }

.cargo-menu { position: relative; }
.cargo-menu > summary { list-style: none; }
.cargo-menu > summary::-webkit-details-marker { display: none; }
.cargo-menu[open] .cargo-menu-caret { transform: rotate(180deg); }
.cargo-menu-list {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 20; min-width: 13rem; padding: 0.35rem;
  border: 1px solid var(--cf-line); border-radius: 12px; background: var(--cf-surface); box-shadow: var(--cf-shadow-lift);
}
.cargo-menu-list a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--cf-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cargo-menu-list a:hover, .cargo-menu-list a:focus-visible { background: #EEF4FF; color: var(--cf-navy); outline: 0; }

@media (min-width: 94rem) { .cargo-print-label { display: inline; } }

@media (max-width: 79.98rem) {
  .cargo-toolbar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "views actions" "filters filters"; }
  .cargo-toolbar-freight { flex-basis: 18rem; }
}

@media (max-width: 40rem) {
  .cargo-toolbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "views" "filters" "actions"; }
  .cargo-toolbar-views { width: auto; overflow-x: auto; }
  .cargo-toolbar-filters { flex-wrap: wrap; }
  .cargo-toolbar-freight, .cargo-toolbar-filters .search-box { flex: 1 1 100%; }
  .cargo-toolbar-actions { justify-self: stretch; }
  .cargo-toolbar-actions > * { flex: 1 1 0; }
  .cargo-toolbar-actions .btn { width: 100%; justify-content: center; }
  .cargo-print-label { display: inline; }
}

/* A contact message as the sender wrote it (line breaks kept), and the count of new ones in the menu. */
.contact-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.nav-count { margin-left: auto; min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--bs-primary); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.4rem; }
.nav-item-sub { margin-left: auto; font-size: 0.75rem; opacity: 0.7; }

/* Correcting a request: compact number fields in the item table. */
.request-edit-lines .edit-num { width: 5.5rem; }
.request-edit-lines td { vertical-align: top; }

/* The receive form laid out as the partner's "Cargo Received/Updated" receipt: dark bars, grey labels, four columns. */
.receipt-form { max-width: 60rem; }
.receipt-bar { background: #0b3a6e; color: #fff; font-weight: 700; padding: 0.3rem 0.5rem; margin-top: 0.5rem; }
.receipt-grid { display: grid; grid-template-columns: minmax(7rem, 22%) 1fr minmax(7rem, 22%) 1fr; gap: 2px; margin-top: 2px; }
.receipt-grid > * { background: #f2f2f2; padding: 0.25rem 0.5rem; min-height: 2.1rem; }
.receipt-label { background: #d9d9d9 !important; text-align: right; font-weight: 700; white-space: nowrap; align-self: stretch; margin: 0; }
.receipt-auto { color: #3d4852; }
.receipt-wide { grid-column: span 3; }
.receipt-dims { display: flex; align-items: center; gap: 0.25rem; }
.receipt-dims input { width: 5rem; }
@media (max-width: 40rem) {
    .receipt-grid { grid-template-columns: minmax(6rem, 40%) 1fr; }
    .receipt-wide { grid-column: span 1; }
}

/* Track & trace on the parcel page: newest first. */
.parcel-timeline { list-style: none; padding-left: 0; border-left: 2px solid var(--bs-border-color); }
.parcel-timeline li { position: relative; padding: 0.25rem 0 0.25rem 1rem; }
.parcel-timeline li::before { content: ""; position: absolute; left: -0.4rem; top: 0.65rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--bs-primary); }
.parcel-timeline time { color: var(--bs-secondary-color); margin-right: 0.5rem; }

/* Scrollbars in the Portal's colours (thin teal thumb on a transparent track), also in the dark menu. */
* { scrollbar-width: thin; scrollbar-color: var(--cf-teal-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cf-teal-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--cf-teal); }

/* Correcting a request: a dialog over the page, compact, scrolling inside when it is taller than the window. */
.edit-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgb(15 23 42 / 0.45); }
.edit-dialog {
  position: fixed; z-index: 1050; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 1.25rem 1.5rem; border-radius: var(--cf-radius); background: #fff; box-shadow: 0 24px 64px rgb(15 23 42 / 0.35);
  font-size: 0.9rem;
}
.edit-dialog-wide { width: min(72rem, calc(100vw - 2rem)); }
.edit-dialog:focus { outline: none; }
.edit-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.edit-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.edit-dialog legend.h5 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.edit-dialog .form-label { margin-bottom: 0.15rem; font-size: 0.8rem; }
.edit-dialog .row.g-3 { --bs-gutter-y: 0.6rem; }
.edit-dialog fieldset + fieldset { margin-top: 1rem; }
.edit-dialog-foot { position: sticky; bottom: -1.25rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
  margin: 1rem -1.5rem -1.25rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--bs-border-color); background: #fff; }

/* Freight statuses (Freight → Containers & flights). */
.freight-status-planning { background: #E6ECF4; color: #13315C; }
.freight-status-loaded { background: #FDF0DC; color: #9A5B00; }
.freight-status-departed { background: #E8F0FB; color: #1F5FA8; }
.freight-status-arrived { background: #E3F4EA; color: #1F7A4D; }
.freight-status-cancelled { background: #EEEEEE; color: #666666; text-decoration: line-through; }
.freight-actions p { margin-bottom: 0.75rem; }

/* Settings → Destinations: a photo per island. */
.destination-photos { display: grid; gap: 0.75rem; }
.destination-photo-row { display: grid; grid-template-columns: 6rem 12rem 1fr; align-items: center; gap: 1rem; }
.destination-photo-preview { width: 6rem; height: 4rem; border-radius: 8px; overflow: hidden; background: #E6ECF4; }
.destination-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .destination-photo-row { grid-template-columns: 5rem 1fr; } .destination-photo-row select { grid-column: 1 / -1; } }

/* Requests → New request: the website's wizard in Portal colours. Its tokens are set per tenant on the website only, so
   here they map onto the Portal palette (navy, teal accents). */
.wz-host {
    --cf-primary: var(--cf-navy);
    --cf-primary-hover: var(--cf-navy-2);
    --cf-primary-soft: color-mix(in srgb, var(--cf-teal) 22%, #fff);
    --cf-primary-tint: color-mix(in srgb, var(--cf-teal) 9%, #fff);
    --cf-accent: var(--cf-teal-strong);
    --cf-border: var(--cf-line);
    --cf-font-body: var(--bs-body-font-family);
    --cf-font-heading: var(--bs-body-font-family);
}