/* Fleet Manager - styles for newer features + dark theme. The base look is the v35 design inside index.html. */
:root {
  /* extra tokens for newer features; v35's own colours above are untouched */
  --soft:#f1f5f9; --c-line:#e2e8f0; --warning:#b45309; --blue:#2563eb; --on-dark:#ffffff;
  --success-soft:#ecfdf5; --danger-soft:#fef2f2; --warning-soft:#fffbeb; --blue-soft:#eff6ff;
}
/* Refer & earn card (v35 style) */
.referral-offer { background:#fff; border:1px solid var(--c-line); border-radius:16px; padding:16px; margin:12px 0; text-align:left; }
.referral-heading { display:flex; align-items:center; gap:12px; }
.referral-heading strong { display:block; font-size:1rem; color:var(--ink); }
.referral-eyebrow { display:block; font-size:0.7rem; font-weight:800; letter-spacing:0.5px; color:var(--primary); }
.referral-mark { font-size:1.8rem; line-height:1; }
.referral-offer p { font-size:0.82rem; color:var(--muted); margin:10px 0; }
.referral-share { display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; background:#25d366 !important; color:#fff !important; }
.referral-offer small { display:block; margin-top:8px; font-size:0.72rem; color:var(--muted); }
#authGateBox .referral-offer { margin:18px 0 0; }

/* v36 simple trip math */
.sm-step { padding:10px 0; border-bottom:1px dashed var(--c-line); }
.sm-step:last-child { border-bottom:0; }
.sm-h { font-size:12px; font-weight:800; color:var(--primary); margin-bottom:6px; }
.sm-row { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:3px 0; color:var(--muted); }
.sm-row b { color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }
.sm-row.total { border-top:1px solid var(--c-line); margin-top:4px; padding-top:7px; color:var(--ink); font-weight:700; }
.sm-row.warn b { color:var(--warning); }
.sm-final { background:var(--soft); border-radius:8px; padding:10px 12px; margin-top:6px; }
/* ===== v36.1 ===== */
/* Night map */
.leaflet-container { background-color:var(--bg) !important; }
.leaflet-control-attribution { background:color-mix(in oklab,var(--bg) 75%,transparent) !important; color:var(--muted) !important; }
.leaflet-control-attribution a { color:var(--blue) !important; }
/* New Trip: planner side by side (stacks on phones) */
#newTripModal .nt-sheet { max-width:980px; }
.nt-grid { display:grid; grid-template-columns:1fr; gap:4px 22px; }
@media (min-width:760px) { .nt-grid { grid-template-columns:1fr 1fr; } }
.nt-map { height:220px; border-radius:10px; border:1px solid var(--c-line); overflow:hidden; margin-top:4px; background:var(--bg); }
.nt-summary { background:var(--soft); border:1px solid var(--c-line); border-radius:10px; padding:12px 14px; margin:6px 0 12px; }
.sm-row.pos b { color:var(--success); font-size:15px; }
.sm-row.neg b { color:var(--danger); font-size:15px; }
/* Simple trip math */
.sm-carry { font-size:12px; color:var(--warning); padding:4px 0 2px; }
.sm-sentence { margin-top:8px; padding:10px 12px; border-radius:8px; font-weight:800; font-size:15px; text-align:center; }
.sm-sentence.pay { background:var(--success-soft); color:var(--success); }
.sm-sentence.ret { background:var(--danger-soft); color:var(--danger); }
.sm-sentence.ok { background:var(--soft); color:var(--ink); }
/* chips & small buttons */
.chip-btn { border:1px solid var(--c-line); background:var(--soft); color:var(--ink); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; min-height:32px; }
.diesel-suggest { background:var(--soft); border:1px dashed var(--c-line); border-radius:10px; padding:10px 12px; margin:-4px 0 14px; font-size:13px; color:var(--muted); }
.diesel-suggest b { color:var(--ink); }
.ds-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.ds-row select { flex:1; min-width:120px; padding:6px 10px; border-radius:8px; }
/* Calendar */
.cal-card { padding:14px !important; }
.cal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--ink); }
.cal-sum { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:10px; }
.cal-sum .c-trip b { color:var(--success); } .cal-sum .c-idle b { color:var(--danger); } .cal-sum .c-leave b { color:var(--warning); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-wd { text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding-bottom:2px; }
.cal-day { aspect-ratio:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted); background:var(--soft); line-height:1.1; }
.cal-day i { font-style:normal; font-size:12px; height:14px; }
.cal-day.trip { background:color-mix(in oklab,var(--success) 26%,var(--surface)); color:var(--ink); }
.cal-day.leave { background:color-mix(in oklab,var(--warning) 24%,var(--surface)); color:var(--ink); }
.cal-day.idle { opacity:.75; }
.cal-day.future { background:transparent; border:1px dashed var(--c-line); opacity:.5; }
/* Leave requests */
.leave-btn { width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding:13px 14px; border-radius:10px; border:1px solid var(--c-line); background:var(--surface); color:var(--ink); font-weight:800; font-size:14px; text-align:left; }
.leave-btn span { font-weight:600; font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.leave-chip { display:inline-block; border-radius:999px; padding:3px 9px; font-size:11px; font-weight:800; background:var(--soft); color:var(--muted); white-space:nowrap; }
.leave-chip.approved { background:var(--success-soft); color:var(--success); }
.leave-chip.rejected { background:var(--danger-soft); color:var(--danger); }
.leave-chip.pending { background:var(--warning-soft); color:var(--warning); }
.leave-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--c-line); color:var(--ink); }
.leave-row small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.leave-row > div:last-child { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.ok-btn,.no-btn { width:40px; height:40px; border-radius:10px; border:0; font-size:18px; font-weight:900; color:var(--on-dark); }
.ok-btn { background:var(--success); } .no-btn { background:var(--danger); }
.hdr-bell { position:relative; }
.hdr-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; line-height:18px; padding:0 4px; }
/* Opening a specific trip */
.flash { animation:tripFlash 1.6s ease-out; }
@keyframes tripFlash { 0%,40% { box-shadow:0 0 0 3px var(--primary); } 100% { box-shadow:0 0 0 0 transparent; } }
.trip-card,.trip-acc { scroll-margin-top:84px; }
/* Sheets scroll by themselves; the page behind stays still */
.modal-sheet { max-height:85vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.nt-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:4px 0 8px; }
.nt-metrics > div { background:var(--surface); border:1px solid var(--c-line); border-radius:8px; padding:8px 6px; text-align:center; min-width:0; }
.nt-metrics small { display:block; font-size:10.5px; color:var(--muted); line-height:1.2; }
.nt-metrics b { display:block; font-size:15px; color:var(--ink); margin-top:3px; white-space:nowrap; }
@media (max-width:360px) { .nt-metrics { grid-template-columns:repeat(2,1fr); } }
.fleet-pick { display:flex; flex-direction:column; gap:8px; margin:6px 0 14px; text-align:left; }
.fleet-item { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:14px; border-radius:10px; border:1px solid var(--c-line); background:var(--soft); color:var(--ink); font-size:16px; }
.fleet-item small { display:block; font-size:12px; color:var(--muted); font-weight:500; margin-top:2px; }
.exp-add { display:grid; grid-template-columns:64px 1fr 96px; gap:8px; margin:10px 0 4px; }
.exp-add select, .exp-add input { min-width:0; padding:10px; border-radius:8px; border:1px solid var(--c-line); background:var(--soft); color:var(--ink); font-size:15px; }

/* ===== Dark theme: same v35 layout, dark surfaces ===== */
:root[data-theme="dark"] { --bg:#0b1220; --canvas:#0f172a; --surface:#111827; --ink:#e5e7eb; --text:#e5e7eb; --muted:#94a3b8;
  --line:rgba(255,255,255,0.08); --c-line:#334155; --soft:#1e293b; --primary:#14b8a6; --primary-dark:#0d9488; --brand:#14b8a6; --brand-2:#0d9488;
  --success:#34d399; --danger:#f87171; --warning:#fbbf24; --blue:#60a5fa; --on-dark:#0b1220;
  --success-soft:#06302a; --danger-soft:#3b1416; --warning-soft:#3a2a0a; --blue-soft:#0f2540; color-scheme:dark; }

:root[data-theme="dark"] body, :root[data-theme="dark"] .app-container, :root[data-theme="dark"] .page { background:var(--canvas) !important; color:var(--ink); }
:root[data-theme="dark"] .card-item, :root[data-theme="dark"] .summary-box, :root[data-theme="dark"] .summary-card, :root[data-theme="dark"] .feed-item, :root[data-theme="dark"] .trip-row, :root[data-theme="dark"] .trip-acc, :root[data-theme="dark"] .stat-chip, :root[data-theme="dark"] .money-bar, :root[data-theme="dark"] .chain-box,
:root[data-theme="dark"] .tile-item, :root[data-theme="dark"] .key-btn, :root[data-theme="dark"] .calc-display, :root[data-theme="dark"] .action-btn, :root[data-theme="dark"] .sess-chip, :root[data-theme="dark"] .adv-chosen, :root[data-theme="dark"] .money-actions, :root[data-theme="dark"] .gallery-cell, :root[data-theme="dark"] .role-choice button,
:root[data-theme="dark"] .ac-list, :root[data-theme="dark"] .loc-line, :root[data-theme="dark"] .modal-sheet, :root[data-theme="dark"] .trip-card, :root[data-theme="dark"] .trip-card.is-active, :root[data-theme="dark"] .feed-icon, :root[data-theme="dark"] .mb-ico, :root[data-theme="dark"] .mb-or, :root[data-theme="dark"] .close-btn, :root[data-theme="dark"] #ownerDndBanner
  { background:var(--surface) !important; background-image:none !important; color:var(--ink) !important; border-color:var(--c-line) !important; box-shadow:none !important; }
:root[data-theme="dark"] .trip-card.is-active { border-left:4px solid var(--primary) !important; }
:root[data-theme="dark"] .bottom-nav { background:#111827 !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] .nav-item { color:var(--muted); } :root[data-theme="dark"] .nav-item.active { background:#0f2f2c !important; color:#5eead4 !important; }
:root[data-theme="dark"] .form-group input, :root[data-theme="dark"] .form-group select, :root[data-theme="dark"] .form-group textarea, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background:var(--soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] .form-group label, :root[data-theme="dark"] .plan-note, :root[data-theme="dark"] .empty-state, :root[data-theme="dark"] .sec-title, :root[data-theme="dark"] .section-title { color:var(--muted) !important; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] .card-title, :root[data-theme="dark"] .modal-header h3, :root[data-theme="dark"] .mb-title, :root[data-theme="dark"] .summary-card .val, :root[data-theme="dark"] .tr-top, :root[data-theme="dark"] .trip-row b, :root[data-theme="dark"] th, :root[data-theme="dark"] td, :root[data-theme="dark"] .summary-row { color:var(--ink) !important; }
:root[data-theme="dark"] .save-btn.secondary { background:var(--soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] .ac-item:hover, :root[data-theme="dark"] .ac-item:active { background:var(--soft) !important; }
:root[data-theme="dark"] .badge.closed, :root[data-theme="dark"] .badge.day, :root[data-theme="dark"] .badge.profit-med { background:var(--soft) !important; color:var(--ink) !important; }
:root[data-theme="dark"] .leaflet-container { background:var(--canvas) !important; }
:root[data-theme="dark"] .app-container :is([style*="background:#fff;"],[style*="background:#fff "],[style*="background:#f8fafc"],[style*="background:#f1f5f9"],[style*="background:#e2e8f0"],[style*="background:#eef2f6"],[style*="background:#cbd5e1"]),
:root[data-theme="dark"] .modal-overlay :is([style*="background:#fff;"],[style*="background:#fff "],[style*="background:#f8fafc"],[style*="background:#f1f5f9"],[style*="background:#e2e8f0"],[style*="background:#eef2f6"],[style*="background:#cbd5e1"]) { background:var(--soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="background:#f0fdfa"],[style*="background:#f0fdf4"],[style*="background:#dcfce7"],[style*="background:#d1fae5"],[style*="background:#ecfeff"]) { background:var(--success-soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="background:#fff7ed"],[style*="background:#ffedd5"],[style*="background:#fef9c3"],[style*="background:#fef3c7"]) { background:var(--warning-soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="background:#fef2f2"],[style*="background:#ffe4e6"],[style*="background:#fee2e2"]) { background:var(--danger-soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="color:#0f172a"],[style*="color:#0b1220"],[style*="color:#334155"],[style*="color:#1f2937"],[style*="color:#1e293b"]) { color:var(--ink) !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="color:#0f766e"],[style*="color:#047857"],[style*="color:#166534"]) { color:#5eead4 !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="color:#713f12"],[style*="color:#9a3412"],[style*="color:#b45309"],[style*="color:#c2410c"]) { color:var(--warning) !important; }
:root[data-theme="dark"] :is(.app-container,.modal-overlay) :is([style*="color:#991b1b"],[style*="color:#b91c1c"],[style*="color:#be123c"]) { color:var(--danger) !important; }

@media (prefers-color-scheme: dark) {
:root[data-theme="system"] { --bg:#0b1220; --canvas:#0f172a; --surface:#111827; --ink:#e5e7eb; --text:#e5e7eb; --muted:#94a3b8;
  --line:rgba(255,255,255,0.08); --c-line:#334155; --soft:#1e293b; --primary:#14b8a6; --primary-dark:#0d9488; --brand:#14b8a6; --brand-2:#0d9488;
  --success:#34d399; --danger:#f87171; --warning:#fbbf24; --blue:#60a5fa; --on-dark:#0b1220;
  --success-soft:#06302a; --danger-soft:#3b1416; --warning-soft:#3a2a0a; --blue-soft:#0f2540; color-scheme:dark; }

:root[data-theme="system"] body, :root[data-theme="system"] .app-container, :root[data-theme="system"] .page { background:var(--canvas) !important; color:var(--ink); }
:root[data-theme="system"] .card-item, :root[data-theme="system"] .summary-box, :root[data-theme="system"] .summary-card, :root[data-theme="system"] .feed-item, :root[data-theme="system"] .trip-row, :root[data-theme="system"] .trip-acc, :root[data-theme="system"] .stat-chip, :root[data-theme="system"] .money-bar, :root[data-theme="system"] .chain-box,
:root[data-theme="system"] .tile-item, :root[data-theme="system"] .key-btn, :root[data-theme="system"] .calc-display, :root[data-theme="system"] .action-btn, :root[data-theme="system"] .sess-chip, :root[data-theme="system"] .adv-chosen, :root[data-theme="system"] .money-actions, :root[data-theme="system"] .gallery-cell, :root[data-theme="system"] .role-choice button,
:root[data-theme="system"] .ac-list, :root[data-theme="system"] .loc-line, :root[data-theme="system"] .modal-sheet, :root[data-theme="system"] .trip-card, :root[data-theme="system"] .trip-card.is-active, :root[data-theme="system"] .feed-icon, :root[data-theme="system"] .mb-ico, :root[data-theme="system"] .mb-or, :root[data-theme="system"] .close-btn, :root[data-theme="system"] #ownerDndBanner
  { background:var(--surface) !important; background-image:none !important; color:var(--ink) !important; border-color:var(--c-line) !important; box-shadow:none !important; }
:root[data-theme="system"] .trip-card.is-active { border-left:4px solid var(--primary) !important; }
:root[data-theme="system"] .bottom-nav { background:#111827 !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] .nav-item { color:var(--muted); } :root[data-theme="system"] .nav-item.active { background:#0f2f2c !important; color:#5eead4 !important; }
:root[data-theme="system"] .form-group input, :root[data-theme="system"] .form-group select, :root[data-theme="system"] .form-group textarea, :root[data-theme="system"] input, :root[data-theme="system"] select, :root[data-theme="system"] textarea { background:var(--soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] .form-group label, :root[data-theme="system"] .plan-note, :root[data-theme="system"] .empty-state, :root[data-theme="system"] .sec-title, :root[data-theme="system"] .section-title { color:var(--muted) !important; }
:root[data-theme="system"] h1, :root[data-theme="system"] h2, :root[data-theme="system"] h3, :root[data-theme="system"] h4, :root[data-theme="system"] .card-title, :root[data-theme="system"] .modal-header h3, :root[data-theme="system"] .mb-title, :root[data-theme="system"] .summary-card .val, :root[data-theme="system"] .tr-top, :root[data-theme="system"] .trip-row b, :root[data-theme="system"] th, :root[data-theme="system"] td, :root[data-theme="system"] .summary-row { color:var(--ink) !important; }
:root[data-theme="system"] .save-btn.secondary { background:var(--soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] .ac-item:hover, :root[data-theme="system"] .ac-item:active { background:var(--soft) !important; }
:root[data-theme="system"] .badge.closed, :root[data-theme="system"] .badge.day, :root[data-theme="system"] .badge.profit-med { background:var(--soft) !important; color:var(--ink) !important; }
:root[data-theme="system"] .leaflet-container { background:var(--canvas) !important; }
:root[data-theme="system"] .app-container :is([style*="background:#fff;"],[style*="background:#fff "],[style*="background:#f8fafc"],[style*="background:#f1f5f9"],[style*="background:#e2e8f0"],[style*="background:#eef2f6"],[style*="background:#cbd5e1"]),
:root[data-theme="system"] .modal-overlay :is([style*="background:#fff;"],[style*="background:#fff "],[style*="background:#f8fafc"],[style*="background:#f1f5f9"],[style*="background:#e2e8f0"],[style*="background:#eef2f6"],[style*="background:#cbd5e1"]) { background:var(--soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="background:#f0fdfa"],[style*="background:#f0fdf4"],[style*="background:#dcfce7"],[style*="background:#d1fae5"],[style*="background:#ecfeff"]) { background:var(--success-soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="background:#fff7ed"],[style*="background:#ffedd5"],[style*="background:#fef9c3"],[style*="background:#fef3c7"]) { background:var(--warning-soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="background:#fef2f2"],[style*="background:#ffe4e6"],[style*="background:#fee2e2"]) { background:var(--danger-soft) !important; color:var(--ink) !important; border-color:var(--c-line) !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="color:#0f172a"],[style*="color:#0b1220"],[style*="color:#334155"],[style*="color:#1f2937"],[style*="color:#1e293b"]) { color:var(--ink) !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="color:#0f766e"],[style*="color:#047857"],[style*="color:#166534"]) { color:#5eead4 !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="color:#713f12"],[style*="color:#9a3412"],[style*="color:#b45309"],[style*="color:#c2410c"]) { color:var(--warning) !important; }
:root[data-theme="system"] :is(.app-container,.modal-overlay) :is([style*="color:#991b1b"],[style*="color:#b91c1c"],[style*="color:#be123c"]) { color:var(--danger) !important; }
}
:root[data-theme="dark"] .referral-offer { background:var(--surface); }
/* header: room for the title with the extra buttons */
.app-header { gap:8px; padding:12px 12px; }
.app-header h1 { font-size:1rem; min-width:0; }
.header-controls { gap:4px; flex-shrink:0; }
.app-header .icon-btn { padding:5px 7px; }
.theme-pick { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.theme-pick button { border:2px solid var(--c-line); background:var(--surface); color:var(--ink); border-radius:14px; padding:10px 4px; font-size:1.2rem; font-weight:700; }
.theme-pick button span { font-size:0.75rem; }
.theme-pick button.on { border-color:var(--primary); background:var(--success-soft); }
/* profile + referrals */
.profile-top { display:flex; gap:12px; align-items:center; }
.profile-top b { display:block; font-size:1.05rem; color:var(--ink); }
.profile-top small { display:block; color:var(--muted); font-size:0.8rem; }
.profile-av { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#14b8a6,#0f766e); display:flex; align-items:center; justify-content:center; font-size:1.7rem; flex-shrink:0; }
.profile-code { margin-top:12px; background:var(--soft); border:1px dashed var(--c-line); border-radius:12px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; }
.profile-code small { color:var(--muted); font-size:0.78rem; }
.profile-code b { font-size:1.2rem; letter-spacing:2px; color:var(--primary); }
.ref-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:6px 0 10px; }
.ref-stats > div { background:var(--soft); border-radius:10px; padding:8px 4px; text-align:center; }
.ref-stats b { display:block; font-size:1rem; color:var(--ink); }
.ref-stats small { font-size:0.68rem; color:var(--muted); }
.help-btn { display:block; text-align:center; text-decoration:none; margin:8px 0 0; }
.invite-list { list-style:none; padding:0; margin:0 0 16px; text-align:left; }
.invite-list li { background:#f0fdfa; border:1px solid #ccfbf1; border-radius:12px; padding:9px 12px; margin:6px 0; font-size:0.88rem; color:#0b1220; }
.link-btn { display:block; width:100%; margin-top:14px; background:none; border:0; color:#0f766e; font-weight:700; font-size:0.88rem; text-decoration:underline; padding:8px; }

/* v38.2 admin finance report */
.fin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.fin-tile { background:var(--soft); border:1px solid var(--c-line); border-radius:12px; padding:10px 12px; min-width:0; }
.fin-tile small { display:block; font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.fin-tile b { display:block; font-size:1.2rem; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:2px; }
.fin-tile em { display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.fin-actions { display:flex; gap:8px; }
.fin-actions .save-btn { margin:0; flex:1; }
.fin-scroll { overflow-x:auto; border:1px solid var(--c-line); border-radius:10px; }
.fin-table { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--ink); }
.fin-table th { text-align:left; background:var(--soft); color:var(--muted); font-size:11px; text-transform:uppercase; padding:7px 8px; }
.fin-table td { padding:7px 8px; border-top:1px solid var(--c-line); vertical-align:top; font-variant-numeric:tabular-nums; }
.fin-table td small { color:var(--muted); overflow-wrap:anywhere; }
.fin-table tr.fin-warn td { background:color-mix(in oklab,#f59e0b 14%,transparent); }
.fin-form { display:flex; gap:8px; }
.fin-form .form-group { flex:1; min-width:0; }
.fin-form input, .fin-form select { width:100%; min-width:0; }
.fin-code { white-space:nowrap; }
.fin-table .leave-chip { white-space:nowrap; }

/* v38.4: amount being typed on the keypad must be visible in dark mode */
:root[data-theme="dark"] .calc-val { color:var(--ink) !important; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .calc-val { color:var(--ink) !important; } }
/* v38.4: one line per advance / party payment / expense inside the trip maths */
.sm-list { background:var(--soft); border-radius:8px; padding:4px 10px; margin:4px 0 6px; }
.sm-item { font-size:12px; padding:4px 0; border-bottom:1px dashed var(--c-line); }
.sm-item:last-child { border-bottom:0; }
.sm-item b { font-weight:600; }
.sm-item.muted { opacity:.7; }
.sm-note { color:var(--muted); font-size:11px; }
:root[data-theme="dark"] .tile-item, :root[data-theme="dark"] .tile-item span { color:var(--ink) !important; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .tile-item, :root[data-theme="system"] .tile-item span { color:var(--ink) !important; } }
.sm-sub { font-size:11px; font-weight:800; letter-spacing:.3px; color:var(--primary, #0d9488); margin:10px 0 2px; text-transform:uppercase; }
/* v38.6 driver notebook view */
.nb .sm-h { font-size:14px; }
.nb-toggle { margin-top:8px; border-top:1px dashed var(--c-line); padding-top:6px; }
.nb-toggle > summary { cursor:pointer; font-weight:700; font-size:13px; color:var(--primary, #0d9488); padding:4px 0; }
/* v38.7 ledger: + money into driver's hand (green), − money going out (red) */
.feed-amount.money-in { color:#059669 !important; }
.feed-amount.money-out { color:#dc2626 !important; }
:root[data-theme="dark"] .feed-amount.money-in { color:#34d399 !important; } :root[data-theme="dark"] .feed-amount.money-out { color:#f87171 !important; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .feed-amount.money-in { color:#34d399 !important; } :root[data-theme="system"] .feed-amount.money-out { color:#f87171 !important; } }
/* v38.8 "Who paid?" on expenses */
.pb-row { display:flex; gap:8px; }
.pb-btn { flex:1; min-height:44px; border-radius:12px; border:1.5px solid var(--c-line); background:var(--soft); color:var(--ink); font-weight:700; font-size:13px; padding:6px 8px; }
.pb-btn.on { border-color:#0d9488; background:#ccfbf1; color:#0f766e; }
:root[data-theme="dark"] .pb-btn.on { background:#0f2f2c !important; color:#5eead4 !important; border-color:#14b8a6 !important; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .pb-btn.on { background:#0f2f2c !important; color:#5eead4 !important; border-color:#14b8a6 !important; } }
/* v38.9 Ledger > trip > add entry */
.lt-add { background:var(--soft); border:1px dashed var(--c-line); border-radius:14px; padding:10px 12px; margin:0 0 12px; }
.lt-add-title { font-weight:800; font-size:13px; color:var(--ink); margin-bottom:8px; }
.lt-add-btns { display:flex; gap:8px; }
.lt-add-btns button { flex:1; min-height:44px; border-radius:12px; border:0; background:#0d9488; color:#fff; font-weight:700; font-size:14px; }
.lt-add-btns button:last-child { background:#2563eb; }

/* v39: the app adapts to the screen - phone (unchanged), tablet, laptop / desktop / Windows app window */
@media (min-width: 768px) {
  body { display:flex; justify-content:center; }
  .app-container { max-width:780px !important; }
  #dndOutline { max-width:780px !important; }
  .bottom-nav { max-width:720px !important; }
  .modal-overlay { justify-content:center !important; align-items:center; padding:24px; }
  .modal-sheet { max-width:560px !important; width:100%; margin:auto !important; border-radius:24px !important; max-height:90vh !important; }
  .page { padding-left:22px; padding-right:22px; }
}
@media (min-width: 1100px) {
  .app-container { max-width:1240px !important; }
  #dndOutline { max-width:1240px !important; }
  /* long lists use two columns */
  #ledgerFeed, #myTripsContent .trip-list-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
  #ledgerFeed > * { margin-top:0 !important; margin-bottom:0 !important; }
  #tripsListContainer { max-width:920px; margin:0 auto; }
  #tripsListContainer > .empty-state, #ledgerFeed > .empty-state { grid-column:1 / -1; }
  /* home: entry tiles stay compact instead of stretching edge to edge */
  .big-tiles, .tiles-grid { max-width:900px; margin-left:auto; margin-right:auto; }
}
/* v39.1 owner's trip profit line under the notebook */
.nb-profit { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--soft); border:1px solid var(--c-line); font-size:13px; color:var(--ink); }
.nb-profit small { color:var(--muted); font-size:11px; }
.nb-profit b { font-size:15px; display:flex; align-items:center; gap:6px; }
.nb-profit b.pos { color:var(--success, #059669); } .nb-profit b.neg { color:var(--danger, #dc2626); }
/* v39.2 demo mode banner (website preview) */
.demo-bar { background:#fef3c7; color:#92400e; font-size:12.5px; padding:7px 14px; text-align:center; border-bottom:1px solid #fde68a; }
.demo-bar a { color:#0f766e; font-weight:800; margin-left:6px; text-decoration:none; }
:root[data-theme="dark"] .demo-bar { background:#3a2a0a; color:#fde68a; border-color:#78350f; }
.demo-mode .no-demo{display:none!important}
/* demo: wall (outside our website / time up) and a light watermark */
.demo-wall{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,#0f172a,#134e4a)}
.demo-wall .dw-box{background:#fff;color:#0f172a;border-radius:24px;padding:28px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.demo-wall h2{margin:6px 0 8px}.demo-wall p{color:#475569;font-size:.92rem;margin:0 0 14px}.demo-wall a.save-btn{display:block;text-decoration:none}
.demo-wall small{display:block;margin-top:12px;color:#94a3b8;font-size:.72rem}
.demo-watermark{position:fixed;inset:0;pointer-events:none;z-index:1500;opacity:.13;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160'%3E%3Ctext x='10' y='100' transform='rotate(-24 130 80)' font-family='sans-serif' font-size='20' font-weight='800' fill='%230f172a'%3EDEMO · nextechalign.com%3C/text%3E%3C/svg%3E")}

/* v39.5 Trips page: one numbered row per trip, tap to open */
.trip-list-head { font-size:12px; color:var(--muted,#64748b); margin:0 2px 8px; }
.trip-row-acc { padding:0 !important; margin-bottom:10px; overflow:hidden; }
.trip-row-acc > .tr-sum { list-style:none; display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; }
.trip-row-acc > .tr-sum::-webkit-details-marker { display:none; }
.trip-row-acc > .tr-sum::after { content:"▾"; color:#94a3b8; font-size:14px; transition:transform .2s; }
.trip-row-acc[open] > .tr-sum::after { transform:rotate(180deg); }
.trip-row-acc[open] > .tr-sum { border-bottom:1px solid var(--line,#e2e8f0); }
.tr-no { flex:none; width:30px; height:30px; border-radius:10px; background:var(--soft,#f1f5f9); color:var(--ink,#0f172a); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.trip-row-acc.is-active .tr-no { background:#0d9488; color:#fff; }
.tr-main { flex:1; min-width:0; font-size:14px; line-height:1.25; }
.tr-main b { font-weight:800; }
.tr-main small { display:block; color:var(--muted,#64748b); font-size:11.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; font-size:11.5px; font-weight:700; text-align:right; }
.tr-bal.pos, .tr-profit.pos { color:#059669; } .tr-bal.neg, .tr-profit.neg { color:#dc2626; } .tr-bal.ok { color:#059669; } .tr-bal.muted { color:#64748b; }
.tr-body { padding:12px 14px 14px; }
/* v39.5 screen layout picker (Auto / Phone / Tablet / Computer) */
.layout-pick { grid-template-columns:repeat(4,1fr); }
html[data-layout="phone"] body { display:flex; justify-content:center; }
.demo-bar .demo-ex { margin-left:6px; border:1px solid #f59e0b; background:#fff; color:#92400e; font-weight:800; font-size:12px; border-radius:999px; padding:3px 10px; cursor:pointer; }
:root[data-theme="dark"] .demo-bar .demo-ex { background:#1f2937; color:#fde68a; }

/* v39.6 demo help assistant */
.dh-fab { position:fixed; right:14px; bottom:96px; z-index:1600; display:flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:10px 14px; background:#0f766e; color:#fff; font-weight:800; font-size:14px; box-shadow:0 8px 22px rgba(15,23,42,.3); cursor:pointer; }
.dh-fab.nudge { background:#f59e0b; color:#111827; animation:dhPulse 1.2s ease-in-out infinite; }
@keyframes dhPulse { 50% { transform:scale(1.07); box-shadow:0 0 0 8px rgba(245,158,11,.25),0 8px 22px rgba(15,23,42,.3); } }
.dh-panel { position:fixed; right:12px; bottom:150px; z-index:1601; width:min(340px, calc(100vw - 24px)); max-height:min(70vh, 520px); overflow:auto; background:var(--surface,#fff); color:var(--ink,#0f172a); border:1px solid var(--line,#e2e8f0); border-radius:20px; box-shadow:0 18px 44px rgba(15,23,42,.3); padding:12px; }
.dh-panel[hidden] { display:none; }
.dh-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .dh-head b { flex:1; font-size:14.5px; }
.dh-x, .dh-back { border:0; background:var(--soft,#f1f5f9); color:var(--ink,#0f172a); width:30px; height:30px; border-radius:10px; font-size:16px; cursor:pointer; }
.dh-in { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px; border:1px solid var(--line,#e2e8f0); font-size:14px; margin-bottom:8px; background:var(--surface,#fff); color:var(--ink,#0f172a); }
.dh-list { display:flex; flex-direction:column; gap:6px; }
.dh-q { text-align:left; border:1px solid var(--line,#e2e8f0); background:var(--soft,#f8fafc); color:var(--ink,#0f172a); border-radius:12px; padding:10px 12px; font-size:13.5px; font-weight:700; cursor:pointer; }
.dh-msg { font-size:13.5px; line-height:1.5; margin:4px 2px 10px; } .dh-note { color:#b45309; }
.dh-acts { display:flex; gap:8px; flex-wrap:wrap; }
.dh-show, .dh-ex { flex:1; border:0; border-radius:12px; padding:11px; font-weight:800; font-size:14px; background:#0d9488; color:#fff; cursor:pointer; } .dh-ex { background:#f59e0b; color:#111827; }
.dh-wa { display:block; margin-top:10px; text-align:center; font-size:13px; font-weight:700; color:#15803d; text-decoration:none; }
.ad-ring { position:fixed; pointer-events:none; z-index:1700; border-radius:14px; border:4px solid #facc15; box-shadow:0 0 0 6px rgba(250,204,21,.35),0 0 28px 8px rgba(250,204,21,.65); animation:adP .8s ease-in-out infinite alternate; }
@keyframes adP { from { box-shadow:0 0 0 4px rgba(250,204,21,.25),0 0 14px 4px rgba(250,204,21,.5); } to { box-shadow:0 0 0 10px rgba(250,204,21,.35),0 0 34px 12px rgba(250,204,21,.75); } }
.ad-tag { position:fixed; z-index:1701; pointer-events:none; background:#facc15; color:#111827; font:800 14px/1.2 system-ui,sans-serif; padding:7px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.35); white-space:nowrap; }