/* ============================================================
   TOCAMAS — Total Car Management System
   Module 1: Auction Purchase Ledger styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
    /* ── Text ───────────────────────────── */
    --toc-text:          #111111;
    --toc-muted:         #555555;
    --toc-accent:        #1a1a2e;

    /* ── Backgrounds ────────────────────── */
    --toc-bg:            #f5f5f5;
    --toc-card-bg:       #ffffff;
    --toc-input-bg:      #ffffff;

    /* ── Borders ────────────────────────── */
    --toc-border:        #d0d0d0;
    --toc-border-light:  #e8e8e8;

    --font-mono:         'Courier New', Courier, monospace;
}

/* ══════════════════════════════════════════
   GLOBAL TYPOGRAPHY — strong readable text
══════════════════════════════════════════ */

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--toc-text);
    font-size: 15px;
    line-height: 1.6;
    background: var(--toc-bg);
}

/* All table cells readable */
.toc-ledger td {
    color: var(--toc-text);
    font-size: 13px;
}

/* Labels always strong */
label,
.fg label,
.toc-form-grid label,
.sd-label,
.toc-card-title {
    color: var(--toc-text) !important;
    font-weight: 500;
}

/* Japanese sub-labels — readable but secondary */
.jp {
    color: var(--toc-muted) !important;
    font-size: 0.78em;
}

/* Form inputs — strong text */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
    color: var(--toc-text) !important;
    font-size: 14px;
}

input::placeholder,
textarea::placeholder {
    color: #aaaaaa !important;
}

/* Muted helper text — visible but secondary */
small,
.toc-muted,
.exp-meta,
.card-sub {
    color: var(--toc-muted) !important;
    font-size: 12px;
}

/* Navigation links (color from Settings → Header / Nav Text Color) */
.toc-nav a {
    color: var(--toc-header-text, rgba(255,255,255,0.85)) !important;
    font-size: 14px;
    font-weight: 500;
}
.toc-nav a.active,
.toc-nav a:hover {
    color: var(--toc-header-text, #ffffff) !important;
}

/* Breadcrumb */
.toc-breadcrumb {
    color: var(--toc-muted);
    font-size: 13px;
}
.toc-breadcrumb a {
    color: var(--toc-accent);
    font-weight: 500;
}

/* Section headers */
.toc-section h2 {
    color: var(--toc-text);
    font-size: 20px;
    font-weight: 600;
}

/* Stage labels */
.cont-stage-header .cs-label {
    color: var(--toc-text) !important;
    font-size: 14px;
    font-weight: 500;
}
.cs-num {
    color: inherit;
    opacity: 0.75;
}

/* Cost breakdown */
.cb-label {
    color: var(--toc-muted) !important;
    font-size: 13px;
}
.cb-amount {
    color: var(--toc-text) !important;
    font-size: 13px;
    font-weight: 500;
}
.cb-total .cb-label,
.cb-total .cb-amount {
    font-size: 14px;
    font-weight: 600;
}
.cb-total .cb-label { color: var(--toc-text) !important; }

/* Info grid (stock detail / container detail) */
.sd-info-grid span {
    color: var(--toc-text);
    font-size: 13px;
}
.sd-info-grid .sd-label {
    color: var(--toc-muted) !important;
    font-size: 12px;
}

/* Manifest car rows */
.manifest-car-info {
    color: var(--toc-text);
    font-size: 13px;
}
.manifest-client-label {
    color: var(--toc-muted) !important;
    font-weight: 600;
    font-size: 11px;
}

/* Monthly cards */
.mc-label { color: var(--toc-muted) !important; font-size: 12px; }
.mc-total { color: var(--toc-text) !important; font-size: 16px; font-weight: 700; }
.mc-count { color: var(--toc-muted) !important; font-size: 12px; }

/* Alert messages */
.toc-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 0.5px solid;
    font-size: 13px;
    font-weight: 500;
}
.toc-alert-success { color: #1a5c1a !important; }
.toc-alert-error   { color: #7a1a1a !important; }

/* Year nav */
.toc-year-nav a {
    color: var(--toc-text) !important;
    font-size: 13px;
    font-weight: 500;
}
.toc-year-nav a.active {
    color: #ffffff !important;
    background: var(--toc-accent);
}

/* Ledger Japanese sub-headers in thead */
.toc-ledger thead th .jp,
.toc-ledger thead th span.jp {
    color: rgba(255,255,255,0.7) !important;
    font-size: 10px;
    display: block;
}

/* Empty state */
.toc-empty {
    color: var(--toc-muted);
    font-size: 14px;
    padding: 2rem;
    text-align: center;
}

/* Ref pill */
.toc-ref-pill {
    background: #1a1a2e;
    color: #ffffff !important;
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    padding: .3rem .8rem;
    border-radius: 6px;
    letter-spacing: .05em;
}

/* Links */
.toc-link {
    color: #185FA5 !important;
    font-weight: 500;
    text-decoration: none;
}
.toc-link:hover { text-decoration: underline; }

/* Mono / chassis numbers */
.mono  { font-family: var(--font-mono); color: var(--toc-text); }
.small { font-size: 12px; }
.bold  { font-weight: 600; }
.num   { text-align: right; }
.center{ text-align: center; }

/* ── Header — sticky on all screens ─────────────── */
.toc-header {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: .6rem 1.25rem;
    gap: .5rem;
    background: var(--toc-accent, #1a1a2e);
    color: var(--toc-header-text, #fff);
    min-height: 56px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.toc-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 7px;
    cursor: pointer;
    color: var(--toc-header-text, #fff);
    font-size: 18px;
    flex-shrink: 0;
}

.toc-header-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .82rem;
    flex-shrink: 0;
}
.toc-username {
    color: var(--toc-header-text, rgba(255,255,255,.85));
    font-weight: 500;
}
.toc-logout {
    color: var(--toc-header-text, rgba(255,255,255,.6));
    text-decoration: none;
    padding: .25rem .6rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 5px;
    font-size: .78rem;
    transition: all .15s;
}
.toc-logout:hover {
    color: var(--toc-header-text, #fff);
    border-color: rgba(255,255,255,.6);
}
.toc-user-badge {
    font-size: .7rem;
    padding: .18rem .6rem;
}

/* ── Global search ───────────────────────────────── */
.toc-search-wrap {
    position: relative;
    flex: 1;
    max-width: 340px;
    margin: 0 1rem;
}
.toc-search-box {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 0 .75rem;
    gap: .4rem;
    transition: background .15s;
}
.toc-search-box:focus-within {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.5);
}
.toc-search-icon { color: rgba(255,255,255,.6); font-size: 15px; }
#tocSearchInput {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .85rem;
    padding: .45rem 0;
    width: 100%;
    flex: 1;
}
#tocSearchInput::placeholder { color: rgba(255,255,255,.45); }
.toc-search-kbd {
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .7rem;
    font-family: monospace;
    white-space: nowrap;
}

.toc-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--toc-card-bg);
    border: 1px solid var(--toc-border);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    z-index: 2000;
    max-height: 420px;
    overflow-y: auto;
}
.toc-search-dropdown.open { display: block; }

.tsr-group-label {
    padding: .4rem .9rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--toc-muted);
    background: var(--toc-input-bg);
    border-bottom: 1px solid var(--toc-border-light);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.tsr-group-label i { font-size: 13px; }

.tsr-item a {
    display: block;
    padding: .55rem .9rem;
    text-decoration: none;
    color: var(--toc-text);
    border-bottom: 1px solid var(--toc-border-light);
    transition: background .1s;
}
.tsr-item:last-child a { border-bottom: none; }
.tsr-item.active a,
.tsr-item a:hover { background: #f0f4ff; }

.tsr-main {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2px;
}
.tsr-ref {
    font-family: monospace;
    font-size: .75rem;
    color: #185FA5;
    font-weight: 600;
    white-space: nowrap;
}
.tsr-title { font-size: .88rem; font-weight: 500; color: var(--toc-text); }
.tsr-sub   { font-size: .75rem; color: var(--toc-muted); display: flex; gap: .5rem; }
.tsr-extra {
    background: var(--toc-border-light);
    border-radius: 4px;
    padding: 0 5px;
    font-size: .7rem;
}
.tsr-empty {
    padding: 1rem;
    text-align: center;
    color: var(--toc-muted);
    font-size: .85rem;
}
.toc-search-dropdown mark {
    background: #ffe066;
    border-radius: 2px;
    padding: 0 1px;
}

@media (max-width: 700px) {
    .toc-search-wrap { max-width: 180px; margin: 0 .5rem; }
}

/* ── Permission checkboxes (admin management) ─────── */
.perm-section { margin-top: 1rem; }
.perm-section-title {
    font-size: .82rem; font-weight: 600; color: var(--toc-text);
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: .75rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.perm-presets {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 400; text-transform: none; letter-spacing: 0;
}
.perm-preset-btn {
    padding: .22rem .65rem; border-radius: 20px; border: 1px solid;
    font-size: .75rem; font-weight: 600; cursor: pointer;
    background: transparent; transition: all .12s;
}
.perm-preset-1 { border-color: #F5C4B3; color: #993C1D; }
.perm-preset-1:hover { background: #FAECE7; }
.perm-preset-2 { border-color: #B5D4F4; color: #185FA5; }
.perm-preset-2:hover { background: #E6F1FB; }
.perm-preset-3 { border-color: #9FE1CB; color: #0F6E56; }
.perm-preset-3:hover { background: #E1F5EE; }

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .5rem;
}
.perm-row {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .65rem .75rem; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--toc-border);
    background: var(--toc-card-bg);
    transition: background .1s;
}
.perm-row:hover { background: #f5f8ff; }
.perm-row input[type="checkbox"] {
    margin-top: 2px; flex-shrink: 0;
    width: 15px; height: 15px; cursor: pointer;
    accent-color: #1a1a2e;
}
.perm-info { flex: 1; }
.perm-label {
    font-size: .85rem; font-weight: 500; color: var(--toc-text);
    display: flex; align-items: center; gap: .4rem;
}
.perm-label i { font-size: 15px; color: var(--toc-muted); }
.perm-desc { font-size: .75rem; color: var(--toc-muted); margin-top: .15rem; }

.perm-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.perm-tag {
    font-size: .68rem; padding: .15rem .55rem;
    border-radius: 10px; background: #E6F1FB;
    color: #185FA5; border: 1px solid #B5D4F4;
    white-space: nowrap;
}

.toc-logo {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--toc-header-text, #e8e8f0);
    flex-shrink: 0;
    margin-right: .5rem;
}
.toc-logo img {
    max-height: 44px;
    max-width: 200px;
    width: auto;
    height: auto;
    vertical-align: middle;
    display: block;
}

.toc-nav {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.toc-nav a {
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 4px;
    transition: background .15s, color .15s;
}

.toc-nav a:hover { background: rgba(255,255,255,.08); }
.toc-nav a.active { background: rgba(255,255,255,.15); font-weight: 600; }

/* ── Main content ───────────────────────────────────────── */
.toc-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

.toc-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 1.5rem;
}

.toc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e8eaf0;
}

.toc-section-header h2 {
    margin: 0;
}

/* ── Alerts ─────────────────────────────────────────────── */
.toc-alert { margin-bottom: 1rem; }

.toc-alert-success {
    background: #e6f7ee;
    border-color: #b2dfc8;
}

.toc-alert-error {
    background: #fdecea;
    border-color: #f5c6c2;
}

/* ── Form grid ──────────────────────────────────────────── */
.toc-form { margin-bottom: 2rem; }

.toc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 0.85rem 1rem;
}

.fg { display: flex; flex-direction: column; gap: 0.25rem; }
.fg-wide  { grid-column: span 2; }
.fg-full  { grid-column: 1 / -1; }

.fg label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.jp {
    font-weight: 400;
    text-transform: none;
    margin-left: 0.2rem;
}

.fg input[type="text"],
.fg input[type="number"],
.fg input[type="date"],
.fg select,
.fg textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid #ccd0d9;
    border-radius: 4px;
    font-size: 0.875rem;
    background: #fff;
    transition: border-color .15s;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
    outline: none;
    border-color: #1a1a2e;
    box-shadow: 0 0 0 2px rgba(26,26,46,.12);
}

.toc-ref-display {
    background: #1a1a2e;
    color: #e8e8f0;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.08em;
}

.toc-total-display {
    background: #1a1a2e;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.toc-avg-display {
    background: #E6F1FB;
    color: #185FA5;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid #B5D4F4;
    min-height: 2.25rem;
}

.toc-auto-badge {
    font-size: 0.65rem;
    color: #0a7a4a;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.3rem;
}

.toc-auto-input {
    background: #edf9f2 !important;
    border-color: #9dd4b4 !important;
}

.toc-money-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.toc-cost-section-label {
    grid-column: 1 / -1;
    padding-top: 0.5rem;
    border-top: 1px dashed #dde0e8;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #1a1a2e;
}

.toc-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e8eaf0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.toc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1.1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}

.toc-btn:hover { opacity: 0.88; }
.toc-btn:active { transform: scale(0.98); }

.toc-btn-primary   { background: #1a1a2e; color: #fff; }
.toc-btn-secondary { background: #e8eaf0; color: #444; }
.toc-btn-success   { background: #0a7a4a; color: #fff; }
.toc-btn-danger    { background: #c0392b; color: #fff; }

.toc-btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
}

/* ── Year navigation ────────────────────────────────────── */
.toc-year-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.toc-year-nav span {
    font-weight: 600;
    color: var(--toc-text);
    font-size: 0.85rem;
}

.toc-year-nav a {
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--toc-border);
    background: #fff;
    transition: background .15s, color .15s;
}

.toc-year-nav a:hover { background: #e8eaf0; }
.toc-year-nav a.active {
    border-color: var(--toc-accent);
    font-weight: 700;
}

/* ── Monthly summary cards ────────────────────────────────── */
.toc-month-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.toc-month-card {
    background: #f8f9fc;
    border: 1px solid #e0e3ec;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    text-align: center;
}

.toc-month-card-total {
    background: #E6F1FB;
    border-color: #B5D4F4;
    color: var(--toc-text);
}

.toc-month-card-total .mc-label {
    color: #185FA5 !important;
    font-weight: 600;
}

.toc-month-card-total .mc-total {
    color: #185FA5 !important;
}

.toc-month-card-total .mc-count {
    color: var(--toc-muted) !important;
}

.mc-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.mc-total {
    font-variant-numeric: tabular-nums;
}

.mc-count {
    margin-top: 0.15rem;
}


/* ── Ledger table ─────────────────────────────────────────── */
.toc-table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e3ec;
    border-radius: 6px;
}

.toc-table-wrap-wide .toc-ledger {
    min-width: 1600px;
}

.toc-ledger .toc-diff-warn {
    color: #854F0B;
    font-weight: 600;
}

.misc-field {
    display: none;
}

.misc-field.is-visible {
    display: block;
}

.misc-cost-header {
    display: none;
    padding-top: .35rem;
    border-top: 1px solid #e8ebf2;
}

.toc-ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 1200px;
}

.toc-ledger thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.toc-ledger th {
    background: #1a1a2e;
    color: #e8e8f0;
    padding: 0.55rem 0.5rem;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-bottom: 2px solid #0f0f1a;
}

.toc-ledger th.num { text-align: right; }

.toc-ledger td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid #eef0f5;
    vertical-align: middle;
}

.toc-ledger tbody tr:nth-child(even):not(.month-hd):not(.month-total):not(.annual-total):not([class*="row-"]) {
    background: #fafbfc;
}

.toc-ledger tbody tr:hover:not(.month-hd):not(.month-total):not(.annual-total):not([class*="row-"]) {
    background: #f0f4ff;
}

.toc-ledger td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.toc-ledger td.center { text-align: center; }
.toc-ledger td.mono {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
}
.toc-ledger td.small { font-size: 0.72rem; }
.toc-ledger td.bold { font-weight: 700; }

.toc-ledger td.actions {
    white-space: nowrap;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Move / Location column on purchases ledger */
.move-col {
    white-space: nowrap;
    min-width: 120px;
}
.toc-btn-move {
    background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: .78rem;
    padding: .4rem .75rem;
    border: 2px solid #1B5E20;
    box-shadow: 0 2px 6px rgba(46, 125, 50, .3);
    max-width: 180px;
    text-align: left;
    line-height: 1.25;
}
.toc-btn-move:hover {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
    color: #fff !important;
}
.toc-btn-move-set {
    background: #EAF3DE;
    color: #1B5E20 !important;
    border: 2px solid #43A047;
    box-shadow: 0 1px 4px rgba(46, 125, 50, .2);
}
.toc-btn-move-set:hover {
    background: #C8E6C9;
    color: #1B5E20 !important;
}
.toc-move-label {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    color: #2E7D32;
    padding: .25rem .5rem;
    background: #EAF3DE;
    border-radius: 5px;
    border: 1px solid #A5D6A7;
}
.toc-move-label-locked {
    color: #666;
    background: #f0f0f0;
    border-color: #ccc;
    cursor: not-allowed;
}

/* Freight on shipping manifest */
.manifest-freight-form {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.manifest-freight-label {
    font-size: .72rem;
    color: var(--toc-muted);
    white-space: nowrap;
}
.manifest-freight-input {
    width: 90px;
    padding: .25rem .4rem;
    font-size: .8rem;
    border: 1px solid var(--toc-border);
    border-radius: 5px;
}

/* Month group header — single cell must span full table width */
.toc-ledger tr.month-hd td {
    background: #fce4ec;
    color: #880e4f;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f8bbd0;
}
.toc-ledger tr.month-hd td:first-child:last-child {
    width: 100%;
}

/* Monthly subtotal */
.toc-ledger tr.month-total td {
    background: #fff0f3;
    font-weight: 700;
    color: #5d0024;
    border-top: 2px solid #f8bbd0;
    border-bottom: 2px solid #f8bbd0;
}

/* Annual total */
.toc-ledger tr.annual-total td {
    background: #1a1a2e;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-top: 3px solid #0f0f1a;
}

.toc-ledger tr.annual-total td.num {
    font-size: 1rem;
}

/* ── Empty state ──────────────────────────────────────────── */
.toc-empty { font-style: italic; }

/* ── Placeholder sections ─────────────────────────────────── */
.toc-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--toc-muted);
}

.toc-placeholder h2 {
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

/* ── Car model search ─────────────────────────────── */
.car-search-wrap { position: relative; }

.car-search-box { position: relative; }

.car-search-input {
    width: 100%;
    padding: .52rem .85rem;
    border: 1px solid var(--toc-border);
    border-radius: 6px;
    font-size: .9rem;
    background: var(--toc-input-bg);
    color: var(--toc-text);
}
.car-search-input:focus {
    outline: none;
    border-color: var(--toc-accent);
    box-shadow: 0 0 0 3px rgba(26,26,46,.1);
}

.car-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--toc-card-bg);
    border: 1px solid var(--toc-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 1000;
    max-height: 340px;
    overflow-y: auto;
}
.car-search-dropdown.open { display: block; }

.car-result-item {
    padding: .55rem .9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--toc-border-light);
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    gap: 0 .5rem;
    align-items: baseline;
}
.car-result-item:last-child { border-bottom: none; }
.car-result-item:hover,
.car-result-item.active { background: #f0f4ff; }

.cr-make {
    font-size: .75rem;
    font-weight: 700;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: .04em;
    grid-row: 1;
}
.cr-model {
    font-size: .88rem;
    font-weight: 500;
    color: #1a1a2e;
    grid-column: 2;
    grid-row: 1;
}
.cr-specs {
    font-size: .75rem;
    color: var(--toc-muted);
    grid-column: 2;
    grid-row: 2;
}
.car-result-item mark {
    background: #ffe066;
    border-radius: 2px;
    padding: 0 1px;
}
.car-result-empty {
    padding: .75rem 1rem;
    color: var(--toc-muted);
    font-size: .85rem;
    text-align: center;
}

/* ══════════════════════════════════════════════════
   SUMMARY BARS
══════════════════════════════════════════════════ */

/* Stocks summary bar (small — keep as-is) */
.stock-product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--toc-border);
    padding-bottom: .6rem;
}
.stock-product-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    color: var(--toc-muted);
    border: 1px solid var(--toc-border);
    background: var(--toc-card-bg);
}
.stock-product-tab.active {
    background: #0F6E56;
    color: #fff;
    border-color: #0F6E56;
}
.stock-product-tab .spt-count {
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
}
.stock-product-tab.active .spt-count {
    background: rgba(255,255,255,.22);
}

.stock-summary-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ssb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem 1.1rem;
    border: 1px solid var(--toc-border);
    border-radius: 10px;
    text-decoration: none;
    min-width: 80px;
    background: var(--toc-card-bg);
    color: var(--toc-text);
}
.ssb-item:hover, .ssb-item.active {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    border-color: var(--toc-accent);
}
.ssb-count { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--toc-accent); }
.ssb-label { font-size: .72rem; color: var(--toc-muted); margin-top: .15rem; }

/* Stock summary bar — per-status colors (match table rows) */
.ssb-all            { border-color: #1a1a2e; }
.ssb-all .ssb-count { color: #1a1a2e; }
.ssb-all.active     { background: #1a1a2e !important; color: #fff !important; border-color: #1a1a2e !important; }
.ssb-all.active .ssb-count,
.ssb-all.active .ssb-label { color: #fff !important; }

.ssb-green            { border-color: #9FE1CB; }
.ssb-green .ssb-count { color: #0F6E56; }
.ssb-green:hover,
.ssb-green.active     { border-color: #0F6E56 !important; }
.ssb-green.active     { background: #F2FAF6 !important; }

.ssb-blue            { border-color: #B5D4F4; }
.ssb-blue .ssb-count { color: #185FA5; }
.ssb-blue:hover,
.ssb-blue.active     { border-color: #185FA5 !important; }
.ssb-blue.active     { background: #EEF5FD !important; }

.ssb-amber            { border-color: #FAC775; }
.ssb-amber .ssb-count { color: #854F0B; }
.ssb-amber:hover,
.ssb-amber.active     { border-color: #854F0B !important; }
.ssb-amber.active     { background: #FDF6EC !important; }

.ssb-purple            { border-color: #AFA9EC; }
.ssb-purple .ssb-count { color: #534AB7; }
.ssb-purple:hover,
.ssb-purple.active     { border-color: #534AB7 !important; }
.ssb-purple.active     { background: #F4F3FE !important; }

.ssb-gray            { border-color: #CCCCCC; }
.ssb-gray .ssb-count { color: #555555; }
.ssb-gray:hover,
.ssb-gray.active     { border-color: #555555 !important; }
.ssb-gray.active     { background: #F5F5F5 !important; }

/* Container summary bar (BIG cards — 7 columns) */
.cont-summary-bar {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: .6rem;
    margin-bottom: 2rem;
}
@media (max-width: 1100px) { .cont-summary-bar { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 600px)  { .cont-summary-bar { grid-template-columns: repeat(2, 1fr) !important; } }

.csb-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem .75rem;
    border-radius: 12px;
    text-decoration: none !important;
    border: 2px solid var(--toc-border);
    background: var(--toc-card-bg);
    color: var(--toc-text) !important;
    min-height: 90px;
    transition: transform .15s, box-shadow .15s;
}
.csb-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.csb-count {
    font-size: 2.4rem !important;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .3rem;
    display: block;
}
.csb-label {
    font-size: .71rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
    display: block;
}

/* Per-status colors */
.csb-item-all            { border-color: #1a1a2e; }
.csb-item-all .csb-count { color: #1a1a2e; }
.csb-item-all.active     { background: #1a1a2e !important; color: #fff !important; }
.csb-item-all.active .csb-count { color: #fff !important; }

.csb-item-booking            { border-color: #B5D4F4; }
.csb-item-booking .csb-count { color: #185FA5; }
.csb-item-booking.active     { background: #E6F1FB !important; }

.csb-item-delivered            { border-color: #9FE1CB; }
.csb-item-delivered .csb-count { color: #0F6E56; }
.csb-item-delivered.active     { background: #E1F5EE !important; }

.csb-item-loading            { border-color: #FAC775; }
.csb-item-loading .csb-count { color: #854F0B; }
.csb-item-loading.active     { background: #FAEEDA !important; }

.csb-item-customs            { border-color: #AFA9EC; }
.csb-item-customs .csb-count { color: #534AB7; }
.csb-item-customs.active     { background: #EEEDFE !important; }

.csb-item-sailing            { border-color: #F5C4B3; }
.csb-item-sailing .csb-count { color: #993C1D; }
.csb-item-sailing.active     { background: #FAECE7 !important; }

.csb-item-arrived            { border-color: #C0DD97; }
.csb-item-arrived .csb-count { color: #3B6D11; }
.csb-item-arrived.active     { background: #EAF3DE !important; }

/* ══════════════════════════════════════════════════
   TABLE ROW COLORS BY STATUS
   box-shadow inset trick — border-left on <tr> doesn't work in HTML tables
══════════════════════════════════════════════════ */
.toc-ledger tr.row-booking {
    box-shadow: inset 4px 0 0 #185FA5;
}
.toc-ledger tr.row-container_delivered {
    box-shadow: inset 4px 0 0 #0F6E56;
}
.toc-ledger tr.row-loading {
    box-shadow: inset 4px 0 0 #854F0B;
    background: #FFFDF5;
}
.toc-ledger tr.row-customs {
    box-shadow: inset 4px 0 0 #534AB7;
    background: #FAFAFE;
}
.toc-ledger tr.row-sailing {
    box-shadow: inset 4px 0 0 #993C1D;
    background: #FFFAF8;
}
.toc-ledger tr.row-arrived {
    box-shadow: inset 4px 0 0 #3B6D11;
    background: #F8FBF5;
}

/* ── Stock / Yard table row colors ──────────────────
   Uses box-shadow inset (border-left on <tr> is
   ignored by browsers — this is the correct approach)
─────────────────────────────────────────────────── */
.toc-ledger tr.row-in_yard {
    box-shadow: inset 4px 0 0 #0F6E56;
    background: #F2FAF6 !important;
}
.toc-ledger tr.row-reserved {
    box-shadow: inset 4px 0 0 #185FA5;
    background: #EEF5FD !important;
}
.toc-ledger tr.row-loading {
    box-shadow: inset 4px 0 0 #854F0B;
    background: #FDF6EC !important;
}
.toc-ledger tr.row-shipped {
    box-shadow: inset 4px 0 0 #534AB7;
    background: #F4F3FE !important;
}
.toc-ledger tr.row-delivered {
    box-shadow: inset 4px 0 0 #555555;
    background: #F5F5F5 !important;
}

/* Prevent zebra striping from overriding status colors */
.toc-ledger tbody tr.row-in_yard:nth-child(even),
.toc-ledger tbody tr.row-reserved:nth-child(even),
.toc-ledger tbody tr.row-loading:nth-child(even),
.toc-ledger tbody tr.row-shipped:nth-child(even),
.toc-ledger tbody tr.row-delivered:nth-child(even) {
    background: inherit !important;
}

/* ── Status badges ───────────────────────────────── */
.toc-badge {
    display: inline-block;
    padding: .18rem .65rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.toc-badge-lg { font-size: .88rem; padding: .3rem 1rem; }
.toc-badge-green  { background: #EAF3DE; color: #2D6A0A; }
.toc-badge-blue   { background: #E6F1FB; color: #185FA5; }
.toc-badge-amber  { background: #FAEEDA; color: #854F0B; }
.toc-badge-purple { background: #EEEDFE; color: #534AB7; }
.toc-badge-gray   { background: #F1EFE8; color: #5F5E5A; }

/* ── Stock detail layout — full-width status header ── */
.sd-page-head {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1.25rem;
    padding: 1.1rem 0 1.2rem;
    border-radius: 0;
    border-bottom: 5px solid transparent;
    box-sizing: border-box;
}
.sd-page-head-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.sd-page-head .sd-breadcrumb { margin-bottom: .5rem; }
.sd-page-head .toc-breadcrumb a { color: inherit; opacity: .85; }
.sd-page-head .toc-breadcrumb a:hover { opacity: 1; }
.sd-page-head-green {
    background: #F2FAF6;
    border-bottom-color: #0F6E56;
    color: #1a3d2e;
}
.sd-page-head-blue {
    background: #EEF5FD;
    border-bottom-color: #185FA5;
    color: #0d3a6e;
}
.sd-page-head-amber {
    background: #FDF6EC;
    border-bottom-color: #854F0B;
    color: #5c3a08;
}
.sd-page-head-purple {
    background: #F4F3FE;
    border-bottom-color: #534AB7;
    color: #3d3580;
}
.sd-page-head-gray {
    background: #F0F0F0;
    border-bottom-color: #666666;
    color: #444444;
}
.sd-page-head .toc-muted { color: inherit; opacity: .75; }
.sd-page-head .sd-status-change label {
    font-size: .78rem;
    color: inherit;
    opacity: .8;
}
.toc-section-stock-body { margin-top: 0; }

.sd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: .75rem;
}
.sd-header h2 { margin: 0; font-size: 1.4rem; }
.sd-header-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sd-status-change { display: flex; align-items: center; gap: .4rem; }
.sd-status-change select { padding: .3rem .5rem; border-radius:6px; border:1px solid var(--toc-border); font-size:.85rem; }

.sd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 720px) { .sd-grid { grid-template-columns: 1fr; } }

/* ── Stock detail: numbered sections + top nav ───── */
.sd-sections-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: none;
}
.sd-step-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: .4rem .5rem;
    padding: .75rem 1rem;
    background: var(--toc-surface);
    border: 1px solid var(--toc-border);
    border-radius: 10px;
    position: sticky;
    top: .5rem;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sd-step-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 6px;
    font-size: .78rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.sd-step-nav-link.is-pending {
    color: #8a8a8a;
    background: #f0f0f0;
    border-color: #e0e0e0;
}
.sd-step-nav-link.is-pending:hover {
    color: var(--toc-text);
    background: #e8e8e8;
}
.sd-step-nav-link.is-done {
    color: var(--toc-text);
    background: #fff;
    border-color: var(--toc-border);
    font-weight: 500;
}
.sd-step-nav-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 700;
}
.sd-step-nav-link.is-pending .sd-step-nav-num {
    background: #d8d8d8;
    color: #555;
}
.sd-step-nav-link.is-done .sd-step-nav-num {
    background: var(--toc-primary);
    color: #fff;
}
.sd-step-card {
    border-radius: 10px;
    border: 1px solid var(--toc-border);
    scroll-margin-top: 5.5rem;
    overflow: hidden;
}
.sd-step-card.is-pending { opacity: .98; }
.sd-step-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.sd-step-num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    background: rgba(0,0,0,.08);
    color: inherit;
}
.sd-step-title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.sd-step-hint { margin: .2rem 0 0; font-size: .78rem; opacity: .85; }
.sd-step-badge {
    margin-left: auto;
    font-size: .85rem;
    color: #0F6E56;
    font-weight: 600;
}
.sd-step-body { padding: .75rem 1rem 1rem; }
.sd-step-body .sd-inner-card {
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
}
.sd-step-body .sd-inner-card > .toc-card .toc-card-title,
.sd-step-body .sd-inner-card.toc-card .toc-card-title { display: none; }
.sd-profit-explainer {
    font-size: .78rem;
    margin: 0 0 .75rem;
    line-height: 1.45;
}
.sd-step-tone-blue    .sd-step-head { background: #E8F0FA; color: #1a3a5c; }
.sd-step-tone-slate   .sd-step-head { background: #EEF1F4; color: #2c3440; }
.sd-step-tone-green   .sd-step-head { background: #EAF3DE; color: #27500A; }
.sd-step-tone-purple  .sd-step-head { background: #F0E8F8; color: #4a2d6b; }
.sd-step-tone-amber   .sd-step-head { background: #FFF4E0; color: #6b4a00; }
.sd-step-tone-gray    .sd-step-head { background: #F2F2F2; color: #444; }
.sd-step-tone-teal    .sd-step-head { background: #E0F5F2; color: #0F4D45; }
.sd-step-tone-coral   .sd-step-head { background: #FAE8E4; color: #6b2a1a; }
.sd-step-tone-indigo  .sd-step-head { background: #E8EAFA; color: #2a2d6b; }
.sd-step-tone-rose    .sd-step-head { background: #FAE8EE; color: #6b1a3a; }
.sd-step-tone-violet  .sd-step-head { background: #EDE8FA; color: #3d2d6b; }
.sd-step-tone-neutral .sd-step-head { background: #F5F5F5; color: #333; }
.sd-step-card.is-pending .sd-step-body { background: #fafafa; }
.sd-step-card.is-done .sd-step-body { background: #fff; }

@media (max-width: 640px) {
    .sd-step-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .sd-step-nav-link { font-size: .7rem; padding: .3rem .45rem; }
}

@media (min-width: 1100px) {
    .sd-step-body .toc-form-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .sd-step-body .toc-form-grid .fg-full {
        grid-column: 1 / -1;
    }
}

/* ── Tools hub & import ───────────────────────────── */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.tools-card {
    display: block;
    padding: 1.1rem 1rem;
    border: 1px solid var(--toc-border);
    border-radius: 10px;
    background: var(--toc-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
a.tools-card:hover {
    border-color: var(--toc-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.tools-card-soon {
    opacity: .65;
    cursor: default;
    pointer-events: none;
}
.tools-card-icon { font-size: 1.6rem; display: block; margin-bottom: .4rem; }
.tools-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.tools-card p { margin: 0; font-size: .78rem; color: var(--toc-muted); line-height: 1.45; }
.tools-paste-area {
    width: 100%;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.35;
    min-height: 220px;
}
.tools-preview-table { min-width: 720px; font-size: .8rem; }
.tools-preview-ok td { background: #f8fcf9; }
.tools-preview-duplicate td { background: #fdfaf3; }
.tools-preview-error td { background: #fdf5f3; }
.tools-import-log {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
    font-size: .75rem;
    color: var(--toc-muted);
    max-height: 200px;
    overflow-y: auto;
}

.misc-review-unit {
    border: 1px solid var(--toc-border, #e2e8f0);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.misc-review-unit-dup { background: #fdfaf3; border-color: #e8d4a8; }
.misc-review-unit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--toc-border, #e2e8f0);
}
.misc-review-include { display: flex; align-items: center; gap: .45rem; margin: 0; cursor: pointer; }
.misc-review-chassis { font-size: .95rem; font-weight: 600; color: var(--toc-primary, #0F6E56); }
.misc-review-section { margin-top: .75rem; }
.misc-review-section-title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--toc-muted);
    margin-bottom: .45rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.misc-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .55rem .75rem;
}
.misc-review-field label {
    display: block;
    font-size: .72rem;
    color: var(--toc-muted);
    margin-bottom: .2rem;
}
.misc-review-field input,
.misc-review-field textarea {
    width: 100%;
    font-size: .82rem;
    padding: .35rem .45rem;
    border: 1px solid var(--toc-border, #cbd5e1);
    border-radius: 4px;
}
.misc-review-field-wide { grid-column: 1 / -1; }
.misc-review-raw { margin-top: .65rem; font-size: .78rem; }
.misc-review-raw summary { cursor: pointer; color: var(--toc-muted); }

.misc-review-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    padding: .85rem 1rem;
    background: linear-gradient(180deg, #f0f7f4 0%, #fff 100%);
    border: 1px solid #c5e0d4;
    border-radius: 8px;
    margin-bottom: .75rem;
}
.misc-review-summary-session label {
    display: block;
    font-size: .72rem;
    color: var(--toc-muted);
    margin-bottom: .2rem;
}
.misc-review-session-input {
    width: 5rem;
    font-size: 1rem;
    font-weight: 600;
    padding: .35rem .5rem;
    border: 1px solid var(--toc-border, #cbd5e1);
    border-radius: 4px;
}
.misc-review-summary-totals {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
    font-size: .78rem;
}
.misc-review-summary-totals strong {
    margin-right: .35rem;
    color: var(--toc-primary, #0F6E56);
}
.misc-sum-item em {
    font-style: normal;
    font-weight: 600;
    margin-left: .15rem;
}
.misc-sum-grand em { color: var(--toc-primary, #0F6E56); }

.misc-review-table-wrap { margin-top: .5rem; }
.misc-review-table {
    min-width: 1100px;
    font-size: .76rem;
}
.misc-review-table th {
    white-space: nowrap;
    font-size: .7rem;
    padding: .4rem .35rem;
}
.misc-review-table td {
    padding: .3rem .25rem;
    vertical-align: middle;
}
.misc-review-table .misc-inp {
    width: 100%;
    min-width: 0;
    font-size: .76rem;
    padding: .25rem .3rem;
    border: 1px solid var(--toc-border, #cbd5e1);
    border-radius: 3px;
}
.misc-inp-date { max-width: 4.2rem; }
.misc-inp-model { min-width: 5.5rem; }
.misc-inp-money { max-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.misc-chassis-fixed {
    font-weight: 600;
    color: var(--toc-primary, #0F6E56);
    white-space: nowrap;
}
.misc-review-row-dup { background: #fdfaf3; }
.misc-tax-cell, .misc-line-total { color: var(--toc-muted); white-space: nowrap; }
.misc-line-total { font-weight: 600; color: #1a1a1a; }

.misc-chassis-cell {
    max-width: 11rem;
    font-size: .76rem;
    line-height: 1.35;
    word-break: break-all;
}
.misc-chassis-cell .mono {
    color: var(--toc-primary, #0F6E56);
    font-weight: 600;
}

.sd-info-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: .3rem .75rem;
    font-size: .88rem;
}
.sd-label { padding-top: .1rem; }

/* ── Cost breakdown ──────────────────────────────── */
.cost-breakdown { margin-top: .5rem; }
.cb-row {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    border-bottom: 1px solid var(--toc-border-light);
    font-size: .85rem;
}
.cb-row:last-child { border-bottom: none; }
.cb-zero { opacity: .4; }
.cb-total { font-weight: 700; font-size: .95rem; margin-top: .25rem; padding-top: .4rem;
            border-top: 2px solid var(--toc-border); border-bottom: none; }

/* ── Quick status select in table ───────────────── */
.toc-status-select {
    font-size: .75rem;
    padding: .18rem .3rem;
    border-radius: 5px;
    border: 1px solid var(--toc-border);
    background: var(--toc-input-bg);
    color: var(--toc-text);
    cursor: pointer;
}

.toc-stock-table { min-width: 1100px; }

/* ── Breadcrumb ──────────────────────────────────── */
.toc-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--toc-muted);
    margin-bottom: 1rem;
}
.toc-breadcrumb a { color: var(--toc-accent); text-decoration: none; }
.toc-breadcrumb a:hover { text-decoration: underline; }

/* ── General cards ───────────────────────────────── */
.toc-card {
    background: var(--toc-card-bg);
    border: 1px solid var(--toc-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.toc-card-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--toc-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

/* ── Alert variants ──────────────────────────────── */
.toc-alert-amber  { background: #FAEEDA; border: 1px solid #FAC775; color: #854F0B; }
.toc-alert-purple { background: #EEEDFE; border: 1px solid #AFA9EC; color: #534AB7; }
.toc-alert-green  { background: #EAF3DE; border: 1px solid #C0DD97; color: #2D6A0A; }

/* ── Container pipeline bar ──────────────────────── */
.cont-pipeline {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.cp-step { display:flex; flex-direction:column; align-items:center; gap:.25rem; min-width:80px; }
.cp-dot  { width:14px; height:14px; border-radius:50%;
            background:var(--toc-border); border:2px solid var(--toc-border); }
.cp-step.cp-done .cp-dot   { background:#1a1a2e; border-color:#1a1a2e; }
.cp-step.cp-current .cp-dot{ background:#1a6ef5; border-color:#1a6ef5;
                               box-shadow:0 0 0 3px rgba(26,110,245,.2); }
.cp-label { font-size:.65rem; color:var(--toc-muted); text-align:center; line-height:1.2; }
.cp-step.cp-done .cp-label   { color:var(--toc-text); font-weight:500; }
.cp-step.cp-current .cp-label{ color:#1a6ef5; font-weight:600; }
.cp-line { flex:1; height:2px; background:var(--toc-border); min-width:20px; margin-bottom:1.4rem; }
.cp-line.cp-line-done { background:#1a1a2e; }

/* ── Container form stage blocks (accordion) ─────── */
.cont-stage-block {
    margin-bottom: .75rem;
    border: 1px solid var(--toc-border);
    border-radius: 10px;
    overflow: hidden;
}
.cont-stage-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    cursor: pointer;
    user-select: none;
}
.cont-stage-header.cont-stage-locked {
    cursor: not-allowed;
    opacity: .6;
}
.cs-num {
    font-size: .7rem;
    font-weight: 600;
    opacity: .7;
    white-space: nowrap;
}
.cs-label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 1;
}
.cs-chevron {
    font-size: .9rem;
    opacity: .6;
}
.cont-stage-body {
    padding: .85rem;
    border-top: 1px solid var(--toc-border);
    background: var(--toc-card-bg);
}
.stage-locked-msg {
    font-size: .82rem;
    color: var(--toc-muted);
    padding: .5rem 0;
    font-style: italic;
}
.cont-stage-blue   { background:#E6F1FB; color:#185FA5; }
.cont-stage-teal   { background:#E1F5EE; color:#0F6E56; }
.cont-stage-amber  { background:#FAEEDA; color:#854F0B; }
.cont-stage-purple { background:#EEEDFE; color:#534AB7; }
.cont-stage-coral  { background:#FAECE7; color:#993C1D; }
.cont-stage-green  { background:#EAF3DE; color:#3B6D11; }

/* ── Container client selector ───────────────────── */
.cont-client-selector {
    background: #F5F8FF;
    border: 1px solid #B5D4F4;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.cont-client-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #185FA5;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
.cont-client-selector select {
    width: 100%;
    padding: .5rem .75rem;
    border-radius: 6px;
    border: 1px solid #B5D4F4;
    font-size: .9rem;
    background: #fff;
}

/* ── Car manifest ────────────────────────────────── */
.manifest-client-group { margin-bottom:1rem; }
.manifest-client-label {
    font-size:.78rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; color:var(--toc-muted);
    padding:.3rem 0; border-bottom:1px solid var(--toc-border);
    margin-bottom:.4rem;
}
.manifest-car-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem; padding:.4rem 0;
    border-bottom:1px solid var(--toc-border-light); font-size:.85rem;
}
.manifest-car-row:last-child { border-bottom:none; }
.manifest-car-info { flex:1; }

/* ── Extra badge colors ──────────────────────────── */
.toc-badge-teal  { background:#E1F5EE; color:#0F6E56; }
.toc-badge-coral { background:#FAECE7; color:#993C1D; }

/* ══════════════════════════════════════════════════
   CLIENTS
══════════════════════════════════════════════════ */

.client-search-bar {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 1.5rem; align-items: center;
}
.client-search-input {
    flex: 1; min-width: 200px; padding: .5rem .85rem;
    border: 1px solid var(--toc-border); border-radius: 8px;
    font-size: .9rem; color: var(--toc-text);
}
.client-country-sel {
    padding: .5rem .75rem; border: 1px solid var(--toc-border);
    border-radius: 8px; font-size: .88rem; color: var(--toc-text);
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.client-card {
    background: var(--toc-card-bg);
    border: 1px solid var(--toc-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: .75rem;
    transition: box-shadow .15s;
}
.client-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.cc-header { display: flex; align-items: flex-start; gap: .75rem; }
.cc-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: #1a1a2e; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; flex-shrink: 0;
}
.cc-name {
    font-size: .95rem; font-weight: 600; color: var(--toc-text);
    text-decoration: none; display: block;
}
.cc-name:hover { color: #185FA5; }
.cc-company { font-size: .78rem; color: var(--toc-muted); margin-top: .1rem; }
.cc-country { font-size: .75rem; color: var(--toc-muted); margin-top: .2rem; }
.cc-country i { font-size: 12px; vertical-align: -1px; margin-right: 2px; }

.cc-stats {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: .25rem; text-align: center;
    border: 1px solid var(--toc-border-light);
    border-radius: 8px; padding: .5rem;
    background: var(--toc-input-bg);
}
.cc-stat-num   { display: block; font-size: 1.2rem; font-weight: 700; color: var(--toc-text); }
.cc-stat-label { display: block; font-size: .62rem; color: var(--toc-muted); }
.cc-in-yard   { color: #0F6E56 !important; }
.cc-transit   { color: #993C1D !important; }
.cc-delivered { color: #555 !important; }

.cc-spend {
    font-size: .8rem; font-weight: 600; color: #185FA5;
    background: #E6F1FB; border-radius: 6px;
    padding: .3rem .6rem; text-align: center;
}
.cc-contacts { display: flex; flex-direction: column; gap: .25rem; }
.cc-contact {
    font-size: .78rem; color: var(--toc-muted);
    text-decoration: none; display: flex; align-items: center; gap: .3rem;
}
.cc-contact:hover { color: var(--toc-accent); }
.cc-contact i { font-size: 13px; }
.cc-actions { display: flex; gap: .35rem; margin-top: .25rem; }

.cd-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 1.25rem;
    flex-wrap: wrap; gap: .75rem;
}
.cd-avatar-block { display: flex; align-items: center; gap: 1rem; }
.cd-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: #1a1a2e; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; flex-shrink: 0;
}
.cd-header h2 { margin: 0; font-size: 1.4rem; }
.cd-company   { font-size: .88rem; color: var(--toc-muted); margin-top: .15rem; }

.cd-stats-bar {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 1rem;
}
.cd-stat-item {
    display: flex; flex-direction: column; align-items: center;
    padding: .6rem 1.1rem; border: 1px solid var(--toc-border);
    border-radius: 10px; background: var(--toc-card-bg);
    min-width: 80px;
}
.cd-stat-num   { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.cd-stat-label { font-size: .7rem; color: var(--toc-muted); margin-top: .2rem; }
.cd-stat-financial { border-color: #B5D4F4; background: #E6F1FB; }
.cd-stat-financial .cd-stat-num { color: #185FA5; }

/* ══════════════════════════════════════════════════
   MISC MODULE
══════════════════════════════════════════════════ */

.misc-cat-summary {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-bottom: 1.25rem;
}
.misc-cat-card {
    display: flex; flex-direction: column; align-items: center;
    padding: .75rem 1rem; border-radius: 12px;
    border: 1px solid var(--toc-border);
    background: var(--toc-card-bg);
    text-decoration: none; color: var(--toc-text);
    min-width: 110px; text-align: center;
    transition: box-shadow .15s;
}
.misc-cat-card:hover, .misc-cat-card.active {
    box-shadow: 0 4px 12px rgba(0,0,0,.09);
    border-color: var(--toc-accent);
}
.mcc-icon  { font-size: 1.6rem; line-height: 1; margin-bottom: .2rem; }
.mcc-label { font-size: .72rem; font-weight: 600; color: var(--toc-text); }
.mcc-units { font-size: .7rem; color: var(--toc-muted); margin-top: .15rem; }
.mcc-spend { font-size: .75rem; color: #185FA5; font-weight: 600; margin-top: .1rem; }

.misc-tabs {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .4rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--toc-border);
    padding-bottom: .5rem;
}
.misc-tab {
    padding: .35rem .9rem; border-radius: 6px;
    text-decoration: none; font-size: .85rem;
    font-weight: 500; color: var(--toc-muted);
    border: 1px solid transparent;
}
.misc-tab.active {
    background: #1a1a2e; color: #fff;
    border-color: #1a1a2e;
}
.misc-cat-chips {
    display: flex; flex-wrap: wrap; gap: .3rem;
    margin-left: .5rem;
}
.misc-chip {
    padding: .2rem .6rem; border-radius: 20px;
    font-size: .75rem; font-weight: 500;
    text-decoration: none; color: var(--toc-muted);
    border: 1px solid var(--toc-border);
    background: var(--toc-card-bg);
    transition: all .12s;
}
.misc-chip.active, .misc-chip:hover {
    background: #1a1a2e; color: #fff; border-color: #1a1a2e;
}

.misc-units-list { display: flex; flex-direction: column; gap: .3rem; }
.misc-unit-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .5rem; border-radius: 7px;
    border: 1px solid var(--toc-border-light);
    background: var(--toc-input-bg);
}
.mur-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--toc-border); color: var(--toc-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.mur-info { flex: 1; min-width: 0; }

/* ── Yards ───────────────────────────────────────── */
.yard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .85rem;
    margin-bottom: 1.5rem;
}
.yard-card {
    background: var(--toc-card-bg);
    border: 1px solid var(--toc-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.yard-inactive { opacity: .55; }
.yc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.yc-name    { font-size: .95rem; font-weight: 600; color: var(--toc-text); }
.yc-address { font-size: .78rem; }
.yc-contact { font-size: .75rem; }
.yc-contact i { font-size: 12px; vertical-align: -1px; margin-right: 2px; }
.yc-actions { display: flex; gap: .35rem; margin-top: .25rem; flex-wrap: wrap; }

/* ── Accounts table ──────────────────────────────── */
.row-current-month td { background: #EAF3DE !important; }
.row-empty-month td   { color: var(--toc-muted); opacity: .5; }

/* ── Post-to-stock modal ───────────────────────── */
.toc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.toc-modal {
    background: var(--toc-card-bg);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    min-width: 320px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    border: 1px solid var(--toc-border);
}
.toc-modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ── Shipping type tabs ──────────────────────────── */
.shipping-type-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.stt-tab {
    padding: .5rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--toc-border);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    color: var(--toc-muted);
    background: var(--toc-card-bg);
    transition: all .12s;
}
.stt-tab:hover { border-color: var(--toc-accent); color: var(--toc-text); }
.stt-tab.active {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

.toc-ledger tr.row-dropped_off {
    box-shadow: inset 4px 0 0 #0F6E56;
    background: #F2FAF6 !important;
}

/* Mobile yard quick actions — hidden on desktop */
.mobile-yard-actions { display: none; }

/* ══════════════════════════════════════════════════
   MOBILE — SMARTPHONES (< 640px)
══════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Header: logo + bell + menu; nav dropdown when open ── */
    .toc-header {
        position: sticky;
        top: 0;
        z-index: 200;
        padding: .5rem .75rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem;
    }

    .toc-logo {
        order: 1;
        flex: 1;
        font-size: 1rem !important;
        letter-spacing: .03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
    .toc-logo img {
        max-height: 36px !important;
        max-width: 160px !important;
    }

    /* Bell — pull out of user block via display:contents */
    .toc-header-user {
        display: contents !important;
    }
    .toc-user-badge,
    .toc-username,
    .toc-logout {
        display: none !important;
    }
    .toc-notif-bell {
        order: 2;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }

    .toc-nav-toggle {
        display: flex !important;
        order: 3;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        margin-left: 0;
    }

    .toc-nav {
        display: none;
        order: 4;
        width: 100%;
        flex: none !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 2px;
        background: rgba(0,0,0,.35);
        border-radius: 8px;
        padding: .4rem;
        margin-top: .1rem;
        max-height: 65vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .toc-nav.open {
        display: flex !important;
    }

    .toc-nav a {
        display: flex !important;
        align-items: center;
        width: 100%;
        padding: .7rem 1rem !important;
        border-radius: 6px;
        font-size: .9rem !important;
        font-weight: 500;
        color: rgba(255,255,255,.88) !important;
        text-decoration: none;
        min-height: 44px;
        white-space: nowrap;
    }
    .toc-nav a.active {
        background: rgba(255,255,255,.18) !important;
        color: #fff !important;
    }
    .toc-nav a:hover {
        background: rgba(255,255,255,.12) !important;
    }

    /* ── Main content ────────────────────────────── */
    .toc-main { padding: .75rem .6rem; }
    .toc-section-header {
        flex-wrap: wrap;
        gap: .4rem;
    }
    .toc-section-header h2 { font-size: 1.1rem; }

    /* ── Forms ───────────────────────────────────── */
    .toc-form-grid {
        grid-template-columns: 1fr !important;
    }
    .fg-wide, .fg-full, .fg-half { grid-column: 1 !important; }
    .toc-form-actions {
        flex-direction: column;
    }
    .toc-form-actions .toc-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Tables ──────────────────────────────────── */
    .toc-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    .toc-ledger { font-size: .78rem; min-width: 600px; }
    .toc-ledger td, .toc-ledger th {
        padding: .4rem .45rem;
        white-space: nowrap;
    }

    /* ── Buttons ─────────────────────────────────── */
    .toc-btn {
        min-height: 44px;
        padding: .45rem .85rem;
        font-size: .85rem;
    }
    .toc-btn-xs {
        min-height: 36px;
        padding: .3rem .55rem;
        font-size: .75rem;
    }
    .toc-logout {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ── Dashboard ───────────────────────────────── */
    .dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .dash-main-grid {
        grid-template-columns: 1fr !important;
    }
    .dk-num { font-size: 1.5rem !important; }
    .dk-label { font-size: .72rem; }

    /* ── Summary bars ────────────────────────────── */
    .cont-summary-bar {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .csb-count { font-size: 1.6rem !important; }
    .csb-label { font-size: .62rem !important; }
    .stock-summary-bar { gap: .3rem; }
    .ssb-item { min-width: 60px; padding: .4rem .6rem; }
    .ssb-count { font-size: 1.1rem; }

    /* ── Cards ───────────────────────────────────── */
    .toc-card { padding: .75rem .85rem; }
    .sd-grid { grid-template-columns: 1fr !important; }
    .client-grid { grid-template-columns: 1fr !important; }
    .yard-grid { grid-template-columns: 1fr !important; }

    /* ── Stock detail ────────────────────────────── */
    .sd-header { flex-direction: column; }
    .sd-header-right { flex-wrap: wrap; }
    .sd-page-head-inner { padding: 0 .6rem; }

    /* ── Stage accordion ─────────────────────────── */
    .cont-stage-header { padding: .6rem .75rem; }
    .cs-title { font-size: .82rem; }

    /* ── Monthly chart ───────────────────────────── */
    .dash-chart { height: 100px; }
    .chart-val  { font-size: .5rem; }
    .chart-label{ font-size: .58rem; }

    /* ── Misc category cards ─────────────────────── */
    .misc-cat-summary { flex-wrap: wrap; }
    .misc-cat-card { min-width: 80px; padding: .5rem .6rem; }

    /* ── Year nav ────────────────────────────────── */
    .toc-year-nav { flex-wrap: wrap; gap: .3rem; }

    /* ── Breadcrumb ──────────────────────────────── */
    .toc-breadcrumb { font-size: .78rem; }

    /* ── Alert messages ──────────────────────────── */
    .toc-alert { font-size: .83rem; padding: .6rem .75rem; }

    /* ── Shipping type tabs ──────────────────────── */
    .shipping-type-tabs { flex-direction: row; }
    .stt-tab { flex: 1; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    /* ── Quick status select in stock table ──────── */
    .toc-status-select {
        font-size: .78rem;
        padding: .35rem .4rem;
        min-height: 44px;
        min-width: 110px;
    }

    /* ── YARD QUICK ACTIONS (mobile-specific panel) */
    .mobile-yard-actions {
        display: flex !important;
        gap: .5rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        padding: .75rem;
        background: var(--toc-card-bg);
        border: 1px solid var(--toc-border);
        border-radius: 10px;
    }
    .mya-btn {
        flex: 1;
        min-width: 120px;
        min-height: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .75rem .5rem;
        border-radius: 8px;
        border: 1px solid var(--toc-border);
        text-decoration: none;
        color: var(--toc-text);
        font-size: .78rem;
        font-weight: 500;
        gap: .25rem;
        background: var(--toc-card-bg);
    }
    .mya-btn i { font-size: 1.3rem; }
    .mya-btn:active { background: var(--toc-input-bg); }

    .toc-month-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Tablet (641px – 900px) ─────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
    .dash-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .dash-main-grid { grid-template-columns: 1fr !important; }
    .toc-form-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .sd-grid { grid-template-columns: 1fr !important; }
}

/* ── Desktop: hamburger hidden, nav horizontal ───── */
@media (min-width: 641px) {
    .toc-nav-toggle { display: none !important; }
    .toc-nav {
        display: flex !important;
        flex-direction: row !important;
        width: auto !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .mobile-yard-actions { display: none !important; }
}

/* ── Notification bell ───────────────────────────── */
.toc-notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--toc-header-text, rgba(255,255,255,.75));
    text-decoration: none;
    border-radius: 8px;
    transition: background .12s;
    font-size: 18px;
    flex-shrink: 0;
}
.toc-notif-bell:hover { background: rgba(255,255,255,.15); color: var(--toc-header-text, #fff); }
.toc-notif-bell.active { background: rgba(255,255,255,.2); color: var(--toc-header-text, #fff); }

.toc-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #E53935;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 4px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}

/* ── Notification rows ───────────────────────────── */
.notif-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: .25rem .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--toc-border-light);
    align-items: start;
}
.notif-row:last-child { border-bottom: none; }
.notif-unread {
    background: #f8faff;
    border-left: 3px solid #185FA5;
    padding-left: .5rem;
    margin-left: -.5rem;
}
.notif-msg  { font-size: .83rem; color: var(--toc-text); grid-column: 2; }
.notif-time { font-size: .72rem; color: var(--toc-muted); grid-column: 2; }

/* ── Purchases search / sort ─────────────────────── */
.toc-search-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.toc-th-sort { color: inherit; text-decoration: none; }
.toc-th-sort:hover { text-decoration: underline; }

/* ── Stock ops mini tables & repairs ─────────────── */
.toc-mini-table { width: 100%; font-size: .8rem; border-collapse: collapse; }
.toc-mini-table th, .toc-mini-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--toc-border-light); text-align: left; }
.toc-mini-table .num { text-align: right; }

.repair-check-grid { display: flex; flex-direction: column; gap: .4rem; }
.repair-line {
    display: grid;
    grid-template-columns: 140px 100px 1fr;
    gap: .5rem;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--toc-border-light);
}
.repair-chk { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .82rem; }
.repair-cost, .repair-label-opt { font-size: .82rem; padding: .3rem .5rem; }
.repair-totals {
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: var(--toc-bg-soft, #f5f6f8);
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
}
.repair-batch-card {
    margin-top: .6rem;
    padding: .5rem .75rem;
    background: #fafbfc;
    border-radius: 6px;
    border: 1px solid var(--toc-border-light);
}
.repair-batch-hd { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; }
.repair-lines-list { margin: .35rem 0 0 1rem; font-size: .78rem; color: var(--toc-muted); }

.accounts-detail-table { font-size: .78rem; }
.accounts-detail-table th { white-space: nowrap; }

/* Activity log */
.activity-log-table { font-size: .8rem; }
.activity-log-table .log-when { white-space: nowrap; }
.activity-log-table .log-when small { display: block; color: var(--toc-muted); }
.activity-log-table .log-summary { max-width: 28rem; }
.log-details { margin-top: .35rem; font-size: .72rem; }
.log-details summary { cursor: pointer; color: var(--toc-primary); }
.log-details dl { margin: .35rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; }
.log-details dt { color: var(--toc-muted); font-weight: 600; }
.log-details dd { margin: 0; word-break: break-word; }

/* ── Company financial chart ─────────────────────── */
.company-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 160px;
    gap: 4px;
    padding: .5rem 0;
    border-bottom: 2px solid var(--toc-border);
}
.cc-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.cc-bars {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    position: relative;
}
.cc-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity .15s;
}
.cc-bar:hover { opacity: 1 !important; }
.cc-bar-in  { background: #0F6E56; }
.cc-bar-out { background: #993C1D; }
.cc-label { font-size: .6rem; color: var(--toc-muted); margin-top: 3px; }
.cc-val   { font-size: .55rem; font-weight: 600; }

.toc-ledger tr.row-overdue {
    box-shadow: inset 4px 0 0 #993C1D;
    background: #FAECE7 !important;
}
.toc-ledger tr.row-pending  { box-shadow: inset 4px 0 0 #993C1D; background: #FAECE7 !important; }
.toc-ledger tr.row-partial  { box-shadow: inset 4px 0 0 #854F0B; background: #FDF6EC !important; }
.toc-ledger tr.row-paid     { box-shadow: inset 4px 0 0 #0F6E56; background: #F2FAF6 !important; }

.accounts-tabs {
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: 2px solid var(--toc-border);
}

/* ── Invoice create form ─────────────────────────── */
.inv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #1a1a2e;
    color: #fff;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    margin-right: .3rem;
    vertical-align: middle;
    flex-shrink: 0;
}
.inv-item-preview {
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: var(--toc-input-bg);
    border-radius: 7px;
    border: 1px solid var(--toc-border);
    font-size: .82rem;
}
.inv-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.inv-preview-title { font-weight: 600; color: var(--toc-text); }
.inv-preview-ref { font-size: .78rem; color: #185FA5; margin-top: 2px; }
.inv-preview-status { font-size: .75rem; color: var(--toc-muted); margin-top: 2px; }
.inv-preview-amounts { text-align: right; flex-shrink: 0; }
.inv-preview-cost { font-size: .72rem; color: var(--toc-muted); }
.inv-preview-sell { font-size: 1rem; font-weight: 700; color: #0F6E56; }
.inv-preview-profit { font-size: .72rem; color: #0F6E56; }
.inv-preview-loss { font-size: .72rem; color: #993C1D; }

/* ── Document list ───────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: .4rem; }
.doc-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: 7px;
    border: 1px solid var(--toc-border-light);
    background: var(--toc-input-bg);
}
.doc-icon { font-size: 1.2rem; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name {
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-meta { font-size: .72rem; color: var(--toc-muted); margin-top: 1px; }
.doc-actions { display: flex; gap: .3rem; flex-shrink: 0; }

.inv-manual-client-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .75rem;
    width: 100%;
}
.inv-manual-client-grid .fg-wide { grid-column: 1 / -1; }
.inv-manual-client-grid .fg-full { grid-column: 1 / -1; }