/* RMX Loads — same visual rules as RMX Web (docs/ui_toolbar.md there):
   calm gray buttons with SVG + label; hover New=green, Edit=orange, Delete=red, others=#ffe8cc;
   8px panel radius; labels above fields; card: fixed head, scrolling middle, Save/Cancel always visible.
   Phone-first additions: sidebar collapses behind the hamburger under 900px. */
:root {
    --bg: #f3f4f6;
    --panel: #ffffff;
    --text: #1f2328;
    --muted: #6b7280;
    --line: #e2e5e9;
    --dark: #23262b;
    --dark-2: #2e3238;
    --accent: #ff9a2e;
    --hover-new: #d7f5dc;
    --hover-edit: #ffe1bf;
    --hover-del: #ffd6d6;
    --hover-other: #ffe8cc;
    --sel: #fff1dd;
    --radius: 8px;
    --topbar-h: 48px;
    --sidebar-w: 210px;
    font-size: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: #1d5fbf; }
code { background: #eef0f3; padding: 1px 5px; border-radius: 4px; }
h1 { font-size: 20px; margin: 0; font-weight: 600; }
h2 { font-size: 16px; margin: 0 0 10px; }

/* ---------- shell ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); background: var(--dark); color: #e8e8e8;
    display: flex; align-items: center; gap: 12px; padding: 0 12px; z-index: 20; }
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 17px; letter-spacing: .5px; }
.brand span, .login-brand span { color: var(--accent); }
.topbar-company { color: #cfd3d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.topbar-user { color: #aeb4bb; white-space: nowrap; text-decoration: none; }
.topbar-user:hover { color: #fff; text-decoration: underline; }
.btn-top { background: transparent; color: #e8e8e8; border: 1px solid #555a61; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.btn-top:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; width: 32px; height: 32px; padding: 6px; cursor: pointer; }
.menu-toggle svg { width: 20px; height: 20px; }
.inline { display: inline; margin: 0; }

.sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--dark-2);
    overflow-y: auto; padding: 8px 0 20px; z-index: 15; }

.main { margin-left: var(--sidebar-w); transition: margin-left .18s; padding: calc(var(--topbar-h) + 16px) 20px 16px; min-height: 100%; display: flex; flex-direction: column; }
.footer { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .sidebar { transform: translateX(-100%); transition: transform .15s; box-shadow: 2px 0 12px rgba(0,0,0,.3); }
    body.menu-open .sidebar { transform: none; }
    .main { margin-left: 0; padding: calc(var(--topbar-h) + 12px) 12px 12px; }
    .topbar-user { display: none; }
    .hide-md { display: none; }
}
@media (max-width: 600px) { .hide-sm { display: none; } .topbar-company { max-width: 40vw; } }

/* ---------- page parts ---------- */
.page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.page-count { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.info-panel, .form-panel { padding: 14px 16px; margin-bottom: 12px; }
.alert { padding: 9px 12px; border-radius: var(--radius); margin-bottom: 10px; }
.alert-error { background: #fdecec; border: 1px solid #f3b7b7; color: #8a1f1f; }
.alert-error ul { margin: 0; padding-left: 18px; }
.alert-ok { background: #e8f7ec; border: 1px solid #b4e2c0; color: #1d5b2e; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.empty { padding: 24px; text-align: center; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--text); }
.tile:hover { background: var(--hover-other); }
.tile-num { font-size: 26px; font-weight: 600; }
.tile-label { color: var(--muted); }
.tile-soon .tile-num { color: #c3c7cc; }

/* ---------- buttons / toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 6px; margin-bottom: 8px; }
.toolbar-spacer { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: #eceef1; color: var(--text); border: 1px solid #d5d9de;
    border-radius: var(--radius); padding: 6px 12px; font: inherit; cursor: pointer; text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn:hover:not(:disabled) { background: var(--hover-other); }
.btn-new:hover:not(:disabled) { background: var(--hover-new); }
.btn-edit:hover:not(:disabled) { background: var(--hover-edit); }
.btn-delete:hover:not(:disabled), .btn-danger-hover:hover { background: var(--hover-del); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: #3a3f46; color: #fff; border-color: #3a3f46; }
.btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }

.search { position: relative; }
.search input { width: 280px; max-width: 60vw; padding: 6px 28px 6px 10px; border: 1px solid #cfd4da; border-radius: var(--radius); font: inherit; }
.search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; }
.search-clear:hover { color: #c62828; }
@media (max-width: 600px) { .toolbar-spacer { display: none; } .search, .search input { width: 100%; max-width: none; } }

/* ---------- list ---------- */
.list-panel { margin-bottom: 8px; }
.list-scroll { max-height: calc(100vh - 290px); min-height: 200px; overflow: auto; }
table.list { width: 100%; border-collapse: collapse; }
.list th { position: sticky; top: 0; background: #f7f8fa; text-align: left; font-weight: 600; padding: 7px 8px;
    border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; }
.list th:hover { background: var(--hover-other); }
.list th.sort-asc::after { content: " ▲"; font-size: 10px; color: var(--accent); }
.list th.sort-desc::after { content: " ▼"; font-size: 10px; color: var(--accent); }
.list td { padding: 6px 8px; border-bottom: 1px solid #f0f1f3; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.list tbody tr { cursor: default; }
.list tbody tr:hover { background: #fafafa; }
.list tbody tr.selected { background: var(--sel); }
.list .num, .kv .num { text-align: right; }

.preview { padding: 12px 16px; }
.pv-title { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.pv-field.wide { grid-column: span 2; }
.pv-label { font-size: 11px; color: var(--muted); }
.pv-value { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 600px) { .pv-field.wide { grid-column: auto; } }

/* ---------- card (edit form) ---------- */
.card-page { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 80px); background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.back-link { font-size: 12px; text-decoration: none; }
.card-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; }
.card-actions { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: #fafbfc; }
.inline-actions { border: 0; background: none; padding: 8px 0 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; padding: 8px 12px 10px; }
legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.f { display: flex; flex-direction: column; }
.f label, .login-box label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.f input, .f textarea, .f select { font: inherit; padding: 5px 7px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; }
.f input:focus, .f textarea:focus { outline: 2px solid #ffc98f; border-color: var(--accent); }
.f .input-validation-error { border-color: #d33; }
.upper { text-transform: uppercase; }
.w-name { width: 380px; } .w-mid { width: 200px; } .w-num { width: 130px; } .w-date { width: 150px; }
.w-st { width: 60px; } .w-zip { width: 100px; } .w-phone { width: 160px; } .w-full { width: 100%; }
.check { display: flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .w-name, .w-mid { width: 100%; } .card-page { height: calc(100vh - var(--topbar-h) - 40px); } }

table.kv td { padding: 4px 16px 4px 0; }

/* ---------- login ---------- */
body.bare { background: var(--dark); }
.login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-box { background: #fff; border-radius: 12px; padding: 28px; width: 100%; max-width: 360px; display: flex; flex-direction: column; }
.login-brand { font-size: 24px; font-weight: 700; }
.login-sub { color: var(--muted); margin-bottom: 18px; }
.login-box input { font: inherit; padding: 8px 10px; border: 1px solid #cfd4da; border-radius: 6px; margin-bottom: 12px; }
.login-btn { justify-content: center; padding: 9px; margin-top: 4px; }
.login-ver { color: #b0b5bb; font-size: 11px; text-align: center; margin-top: 14px; }

/* ---------- modal + wait spinner ---------- */
.modal, .wait { position: fixed; inset: 0; background: rgba(20, 22, 26, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal[hidden], .wait[hidden] { display: none; }
.modal-box { background: #fff; border-radius: var(--radius); padding: 18px; width: 100%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.modal-title { font-weight: 600; margin-bottom: 8px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.wait-box { background: #fff; border-radius: var(--radius); padding: 18px 24px; display: flex; align-items: center; gap: 12px; }
.wait-spin { width: 22px; height: 22px; border: 3px solid #eee; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- loads (phase 1+2, 2026-09-28) ---------- */
.toolbar-select { font: inherit; padding: 5px 8px; border: 1px solid #cfd4da; border-radius: var(--radius); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d5d9de; background: #fff; border-radius: 999px;
    padding: 3px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chip:hover { background: var(--hover-other); }
.chip.active { background: #3a3f46; color: #fff; border-color: #3a3f46; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; color: #fff; background: var(--c); white-space: nowrap; }
.list tfoot td { position: sticky; bottom: 0; background: #f7f8fa; border-top: 1px solid var(--line); font-weight: 600; padding: 7px 8px; white-space: nowrap; }
.list tr.inactive td { color: #9aa0a6; }
.list td.warn { color: #c62828; font-weight: 600; }
.list td.neg { color: #c62828; }
.list td a { text-decoration: none; }
.muted { color: var(--muted); font-weight: 400; font-size: 14px; }
.f input.num { text-align: right; }
.f input[readonly] { background: #f5f6f8; }
.w-dt { width: 200px; }
.alert-info { background: #eef4fd; border: 1px solid #c3d6f3; color: #1d3f73; }
.panel-title { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
table.kv th { text-align: left; font-size: 11px; color: var(--muted); padding: 2px 16px 2px 0; }

/* ---------- list pages fill the screen (user 2026-09-28: "da se prozori lepo uklope") ----------
   Page = fixed-height column: toolbar/chips on top, list takes all remaining height and scrolls inside,
   preview under it has a capped height and its own scroll, so it never pushes the list off screen.
   Phones (narrow/short) keep normal page scrolling. */
@media (min-width: 601px) and (min-height: 520px) {
    .main:has(.list-fill) { height: 100vh; overflow: hidden; }
    .main:has(.list-fill) > * { flex: 0 0 auto; }
    .main > .list-fill { flex: 1 1 auto; min-height: 160px; display: flex; flex-direction: column; margin-bottom: 8px; }
    .list-fill .list-scroll { flex: 1 1 auto; max-height: none; min-height: 0; }
    .main:has(.list-fill) > .preview { max-height: 34vh; overflow-y: auto; margin-bottom: 4px; }
    .main:has(.list-fill) > .footer { padding-top: 4px; }
}
.preview { padding: 10px 14px; }
.preview .pv-grid { gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.preview .pv-title { margin-bottom: 6px; }

/* Row colors per status (Excel conditional formatting, migration 004). Selected row always wins. */
.list tbody tr[style*="--row-bg"] td { background: var(--row-bg); color: var(--row-fg, inherit); }
.list tbody tr:hover td { filter: brightness(.97); }
.list tbody tr.selected td { background: var(--sel); color: var(--text); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.chip i { border: 1px solid #c9ced4; }

/* ---------- load preview: Route | Money | Load (user 2026-09-28: organized, not scattered) ---------- */
.lp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 15px; }
.lp { display: grid; grid-template-columns: minmax(300px, 1.6fr) minmax(210px, 1fr) minmax(210px, 1fr); gap: 12px; }
.lp section { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: #fcfcfd; min-width: 0; }
.lp h3, .lp-remarks h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.stops { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; }
.stops::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: #dfe3e8; }
.stop { position: relative; padding: 0 0 10px 6px; }
.stop:last-child { padding-bottom: 0; }
.stop::before { content: ""; position: absolute; left: -16px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.stop-P::before { background: #1d6fd1; box-shadow: 0 0 0 1px #1d6fd1; }
.stop-D::before { background: #2e9e5b; box-shadow: 0 0 0 1px #2e9e5b; }
.stop-head { display: flex; gap: 10px; align-items: baseline; }
.stop-P .stop-head b { color: #1d6fd1; }
.stop-D .stop-head b { color: #2e7d4f; }
.stop-head span { color: var(--muted); font-size: 12px; }
.stop-addr { line-height: 1.35; }
.stop-note { font-size: 12px; color: #8a5a00; background: #fff4dc; display: inline-block; padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
table.pv-kv { width: 100%; border-collapse: collapse; }
table.pv-kv td { padding: 2px 0; vertical-align: top; }
table.pv-kv td:first-child { color: var(--muted); padding-right: 10px; white-space: nowrap; }
table.pv-kv td:last-child { text-align: right; }
table.pv-kv tr.strong td:last-child { font-weight: 700; }
table.pv-kv tr.strong td { border-top: 1px solid var(--line); }
.docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.doc-link { font-size: 12px; background: #eef4fd; border: 1px solid #c3d6f3; border-radius: 999px; padding: 1px 9px; text-decoration: none; }
.lp-remarks { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: #fffdf5; word-break: break-word; }
.stops-badge { display: inline-block; margin-left: 5px; font-size: 10px; background: #3a3f46; color: #fff; border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
@media (max-width: 1100px) { .lp { grid-template-columns: 1fr 1fr; } .lp section:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .lp { grid-template-columns: 1fr; } }
@media (min-width: 601px) and (min-height: 520px) { .main:has(.list-fill) > .preview { max-height: 42vh; } }

/* ---------- load card: stops editor ---------- */
.stop-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 8px 8px 8px 10px; margin-bottom: 6px;
    border: 1px solid var(--line); border-left: 4px solid #1d6fd1; border-radius: var(--radius); background: #f7faff; }
.stop-row.stop-D { border-left-color: #2e9e5b; background: #f6fbf8; }
.w-type { width: 110px; } .w-addr { width: 380px; } .w-note { width: 220px; }
.stop-tools { display: flex; gap: 4px; align-self: center; margin-left: auto; }
.btn-ico { border: 1px solid #d5d9de; background: #fff; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 11px; color: #555; }
.btn-ico:hover { background: var(--hover-other); }
.btn-ico-del:hover { background: var(--hover-del); color: #c62828; }
.stop-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 600px) { .w-addr, .w-note { width: 100%; } }

/* Loads list: column alignment / hiding by position (rows carry no per-cell classes — smaller page, 2026-09-28).
   Columns: 1 # · 2 Pickup · 3 Driver · 4 Ref · 5 Broker · 6 Route · 7 Miles · 8 Total · 9 Pay · 10 Status · 11 Invoice · 12 Dispatch */
.loads-list td:nth-child(1), .loads-list td:nth-child(7), .loads-list td:nth-child(8),
.loads-list td:nth-child(9), .loads-list td:nth-child(11) { text-align: right; }
@media (max-width: 900px) {
    .loads-list tbody td:nth-child(1), .loads-list tbody td:nth-child(7), .loads-list tbody td:nth-child(9), .loads-list tbody td:nth-child(12) { display: none; }
}
@media (max-width: 600px) {
    .loads-list tbody td:nth-child(5), .loads-list tbody td:nth-child(11) { display: none; }
}

/* Fixed table layout for the big Loads list: auto layout re-measured all 1.196 rows on every sort/filter
   (0.5–1 s in Chrome, 2026-09-28). Widths come from the header cells; Broker takes the rest. */
.loads-list { table-layout: fixed; min-width: 900px; }
.loads-list thead th:nth-child(1) { width: 52px; }
.loads-list thead th:nth-child(2) { width: 96px; }
.loads-list thead th:nth-child(3) { width: 96px; }
.loads-list thead th:nth-child(4) { width: 118px; }
.loads-list thead th:nth-child(6) { width: 150px; }
.loads-list thead th:nth-child(7) { width: 72px; }
.loads-list thead th:nth-child(8) { width: 104px; }
.loads-list thead th:nth-child(9) { width: 96px; }
.loads-list thead th:nth-child(10) { width: 132px; }
.loads-list thead th:nth-child(11) { width: 88px; }
.loads-list thead th:nth-child(12) { width: 92px; }
.loads-list td { max-width: none; }
.list-scroll { contain: content; }
@media (max-width: 900px) { .loads-list { min-width: 0; } }


/* ---------- sidebar: groups, collapse to icons, flyout (like RMX Web, user 2026-09-28) ----------
   Hover = bright orange #ff9a2e + white text (RMX rule). Collapsed width 64px, icons 22px. */
.sidebar { display: flex; flex-direction: column; transition: width .18s; }
.side-link, .side-summary, .side-collapse { display: flex; align-items: center; gap: 12px; color: #dfe2e6; text-decoration: none;
    padding: 9px 16px; cursor: pointer; list-style: none; border: 0; background: none; font: inherit; width: 100%; text-align: left; white-space: nowrap; }
.side-summary::-webkit-details-marker { display: none; }
.side-link svg, .side-summary svg, .side-collapse svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round; transition: width .18s, height .18s; }
.side-summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid #8b929a; border-bottom: 1.5px solid #8b929a;
    transform: rotate(-45deg); transition: transform .15s; }
.side-group[open] > .side-summary::after { transform: rotate(45deg); }
.side-summary { color: #aeb4bb; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.side-summary.has-active { color: #fff; }
.side-sub a { display: block; color: #dfe2e6; text-decoration: none; padding: 7px 16px 7px 48px; white-space: nowrap; }
.side-link:hover, .side-summary:hover, .side-sub a:hover, .side-collapse:hover,
.side-link:focus, .side-summary:focus, .side-sub a:focus, .side-collapse:focus { background: var(--accent); color: #fff; outline: none; }
.side-link.active, .side-sub a.active { background: #3c4148; color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.side-collapse { margin-top: auto; color: #8b929a; font-size: 12px; border-top: 1px solid #3a3f46; }
.side-collapse svg { transition: transform .18s; }

html.sidebar-collapsed { --sidebar-w: 64px; }
html.sidebar-collapsed .sidebar { overflow: visible; }
html.sidebar-collapsed .side-link span, html.sidebar-collapsed .side-summary span,
html.sidebar-collapsed .side-collapse span, html.sidebar-collapsed .side-summary::after,
html.sidebar-collapsed .side-sub { display: none; }
html.sidebar-collapsed .side-link, html.sidebar-collapsed .side-summary, html.sidebar-collapsed .side-collapse { justify-content: center; padding: 12px 0; }
html.sidebar-collapsed .side-link svg, html.sidebar-collapsed .side-summary svg { width: 24px; height: 24px; flex-basis: 24px; }
html.sidebar-collapsed .side-summary.has-active, html.sidebar-collapsed .side-link.active { box-shadow: inset 3px 0 0 var(--accent); background: #3c4148; color: #fff; }
html.sidebar-collapsed .side-group.is-flyout-open > .side-summary { background: var(--accent); color: #fff; }
html.sidebar-collapsed .side-collapse svg { transform: rotate(180deg); }
html:not(.sidebar-anim) .sidebar, html:not(.sidebar-anim) .main { transition: none; }

.side-flyout { position: fixed; z-index: 30; min-width: 190px; background: var(--dark-2); border-radius: var(--radius); padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.side-flyout[hidden] { display: none; }
.side-flyout-title { color: #fff; font-weight: 600; padding: 6px 16px 6px; border-bottom: 1px solid #3a3f46; margin-bottom: 4px; }
.side-flyout a { display: block; color: #dfe2e6; text-decoration: none; padding: 7px 16px; }
.side-flyout a:hover, .side-flyout a:focus { background: var(--accent); color: #fff; outline: none; }
.side-flyout a.active { box-shadow: inset 3px 0 0 var(--accent); color: #fff; }

@media (max-width: 900px) {
    html.sidebar-collapsed { --sidebar-w: 210px; }   /* phone: always the full drawer */
    html.sidebar-collapsed .side-link span, html.sidebar-collapsed .side-summary span, html.sidebar-collapsed .side-sub { display: revert; }
    .side-collapse { display: none; }
}

/* ======================= PHONE (≤ 700px) — user 2026-09-28: "na mobilnom mi se ne dopada prikaz" =======================
   Loads = cards instead of a table, preview = bottom sheet, chips = one swipeable row, dashboard = 2 tiles per row. */
@media (max-width: 700px) {
    .main { padding: calc(var(--topbar-h) + 10px) 10px 10px; }
    h1 { font-size: 18px; }
    .page-head { margin-bottom: 8px; flex-wrap: wrap; row-gap: 0; }
    .page-count { font-size: 12px; }

    /* dashboard */
    .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tile { padding: 10px 12px; }
    .tile-num { font-size: 18px; }
    .tile-label { font-size: 12px; }

    /* toolbar + chips */
    .toolbar { padding: 5px; gap: 5px; }
    .toolbar .btn { padding: 6px 9px; }
    .toolbar-select { flex: 1 1 auto; }
    .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chip { flex: 0 0 auto; padding: 5px 12px; }

    /* Loads list as cards: rows are grids; column order = Index.cshtml (1 # · 2 Pickup · 3 Driver · 4 Ref · 5 Broker ·
       6 Route · 7 Miles · 8 Total · 9 Pay · 10 Status · 11 Invoice · 12 Dispatch) */
    .list-panel .list-scroll { max-height: none; overflow: visible; }
    .list th { top: var(--topbar-h); }   /* page scrolls on phones: sticky header sits under the fixed top bar */
    .list-panel { overflow: visible; }
    .loads-list, .loads-list tbody, .loads-list tfoot { display: block; min-width: 0; }
    .loads-list thead { display: none; }
    .loads-list tbody tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; row-gap: 3px;
        grid-template-areas: "date ref status" "broker broker broker" "driver route total";
        padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .loads-list tbody td { display: block !important; padding: 0; border: 0; background: transparent !important; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left !important; }
    .loads-list tbody td:nth-child(1), .loads-list tbody td:nth-child(7), .loads-list tbody td:nth-child(9),
    .loads-list tbody td:nth-child(11), .loads-list tbody td:nth-child(12) { display: none !important; }
    .loads-list tbody td:nth-child(2) { grid-area: date; color: var(--muted); font-size: 12px; align-self: center; }
    .loads-list tbody td:nth-child(3) { grid-area: driver; font-size: 13px; }
    .loads-list tbody td:nth-child(4) { grid-area: ref; font-weight: 600; }
    .loads-list tbody td:nth-child(5) { grid-area: broker; font-size: 13px; }
    .loads-list tbody td:nth-child(6) { grid-area: route; color: var(--muted); font-size: 13px; }
    .loads-list tbody td:nth-child(8) { grid-area: total; font-weight: 600; text-align: right !important; }
    .loads-list tbody td:nth-child(10) { grid-area: status; text-align: right !important; }
    .loads-list tbody tr.selected { box-shadow: inset 4px 0 0 var(--accent); }
    /* footer = sticky summary bar: "1,196 loads … $1,917,196.03" */
    .loads-list tfoot tr { display: flex; gap: 8px; align-items: center; }
    .loads-list tfoot td { display: none; position: static; border: 0; padding: 0; }
    /* tfoot cells: 1 · 2 count · 3 "loads" (colspan 2) · 4 · 5 · 6 miles · 7 total · 8 pay … */
    .loads-list tfoot td:nth-child(2), .loads-list tfoot td:nth-child(3), .loads-list tfoot td:nth-child(7) { display: block; }
    .loads-list tfoot td:nth-child(7) { margin-left: auto; }
    .loads-list tfoot { position: sticky; bottom: 0; background: #f7f8fa; border-top: 1px solid var(--line); padding: 9px 12px; font-weight: 600; z-index: 2; }

    /* preview = bottom sheet over the list (all lists), × closes and clears the selection */
    .main > .preview { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 25; max-height: 78vh; overflow-y: auto;
        border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); padding: 14px 14px 20px; }
    .main > .preview::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: #d0d4d9; margin: -6px auto 10px; }
    .pv-close { display: flex !important; }
    .lp-head { padding-right: 36px; }
}
.pv-close { display: none; position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: #eceef1; font-size: 20px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.preview { position: relative; }

/* ---------- Factoring (Apex) page ---------- */
.fact-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.fact-scroll { max-height: calc(100vh - 330px); }
.list tr.age-warn td { color: #b3261e; }
.tile-warn .tile-num { color: #b3261e; }
@media (max-width: 1100px) { .fact-grid { grid-template-columns: 1fr; } }

/* ---------- load card: AI RC reading + documents (2026-09-28) ---------- */
.ai-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 10px;
    border: 2px dashed #c9b6f0; border-radius: var(--radius); background: #f8f4ff; }
.ai-drop.over { border-color: #7c4dff; background: #efe6ff; }
.btn-ai { background: #6f42c1; color: #fff; border-color: #6f42c1; }
.btn-ai svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-ai:hover:not(:disabled) { background: #5a32a3; color: #fff; }
.ai-filled { background: #fff6c2 !important; border-color: #e0c24a !important; }
.ai-broker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px;
    border: 1px solid #f0c36d; background: #fff8e6; border-radius: var(--radius); }
.docs-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.doc-row { display: flex; align-items: center; gap: 10px; }
.doc-kind { font-size: 11px; font-weight: 700; background: #3a3f46; color: #fff; border-radius: 4px; padding: 1px 6px; min-width: 42px; text-align: center; }
.doc-upload { align-items: center; }
.old-links { margin-top: 8px; }
.old-links summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.ai-broker[hidden], .ai-drop[hidden] { display: none; }