/* ============================================================ IrisFMS dark theme. Loaded LAST in App.razor so it wins the cascade over tw_site.css. Activated by the `theme-dark` class on . Retunes the app's semantic chrome classes + the common Tailwind light utilities to a dark palette without per-page edits. Print and .invoice areas are intentionally kept light so PDFs/printing are unaffected. ============================================================ */ /* slightly smaller root so rem-based text + spacing read tighter (user: fonts a bit large) */ html { font-size: 14px; } .theme-dark { --bg: #0f0f11; /* app background (dark, not pure black) */ --surface: #17181a; /* cards, header, sidebar */ --surface-2: #1c1d20; /* inputs, panels */ --surface-3: #26272b; /* hover / active */ --border: #262629; /* card hairlines (subtle) */ --divider: rgba(255, 255, 255, .05); /* faint in-table row divider */ --text: #d6d7db; /* primary text (softened to lower contrast) */ --text-muted: #92949b; /* secondary text */ --text-subtle: #686a71; /* labels / tertiary */ --primary: #4b82f0; /* accent only */ --primary-hover: #3a6fd8; --link: #8ab4ff; background-color: var(--bg); color: var(--text); font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ---- App shell / semantic chrome ---- */ .theme-dark .main-bg-color { background-color: var(--surface); border-bottom: 1px solid var(--border); } .theme-dark .secondary-bg-color { background-color: var(--bg); } .theme-dark .below-header { display: none; } /* decorative 400px rounded band — removed */ .theme-dark .nav-menu { background-color: var(--surface); border-right: 1px solid var(--border); height: 100%; overflow: hidden; } .theme-dark .nav-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem; } .theme-dark .nav-menu a { color: var(--text-muted); border-radius: 8px; margin: 1px 0; transition: background-color .15s, color .15s; } .theme-dark .nav-menu a:hover { background-color: var(--surface-3); color: var(--text); } /* active = rounded highlight + primary icon (no detached left bar) */ .theme-dark .nav-menu a.active { background-color: var(--surface-3); color: #fff; } .theme-dark .nav-menu .sub-menu-item .sub-item-active { background-color: var(--surface-3); color: #fff; } .theme-dark .nav-menu a.active .mdi, .theme-dark .nav-menu .sub-menu-item .sub-item-active .mdi { color: var(--primary); } /* ---- Global search: topbar trigger + command-palette modal (UI only, seeded data) ---- */ .theme-dark .gs-kbd { color: var(--text-subtle); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--surface-3); } /* topbar trigger (looks like a search box, opens the modal) */ .theme-dark .gs-trigger { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 440px; height: 38px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 0 10px; cursor: pointer; } .theme-dark .gs-trigger:hover { border-color: var(--text-subtle); } .theme-dark .gs-trigger-icon { font-size: 18px; color: var(--text-subtle); } .theme-dark .gs-trigger-text { flex: 1; text-align: left; font-size: .875rem; color: var(--text-subtle); } /* modal */ .theme-dark .gs-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; z-index: 100; } .theme-dark .gs-modal { width: 92%; max-width: 600px; max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); overflow: hidden; } .theme-dark .gs-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .theme-dark .gs-modal-icon { font-size: 20px; color: var(--text-subtle); } .theme-dark .gs-modal-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 1rem; } .theme-dark .gs-modal-input::placeholder { color: var(--text-subtle); } .theme-dark .gs-modal-body { flex: 1; overflow-y: auto; padding: 6px; min-height: 60px; } .theme-dark .gs-group-label { padding: 8px 10px 4px; font-size: .625rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); } .theme-dark .gs-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; cursor: pointer; } .theme-dark .gs-item:hover, .theme-dark .gs-item-active { background: var(--surface-3); } .theme-dark .gs-item-icon { color: var(--text-muted); font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; } .theme-dark .gs-item-title { color: var(--text); font-size: .875rem; } .theme-dark .gs-item-sub { color: var(--text-subtle); font-size: .75rem; } .theme-dark .gs-empty { padding: 22px 14px; color: var(--text-subtle); font-size: .8125rem; text-align: center; } .theme-dark .gs-modal-foot { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--text-subtle); font-size: .6875rem; } .theme-dark .gs-modal-foot .gs-foot-count { margin-left: auto; } .theme-dark .gs-key { display: inline-block; min-width: 16px; text-align: center; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-right: 2px; background: var(--surface-3); font-weight: 600; } /* ---- confirm dialog (IrisConfirm): on-brand surface + readable text ---- */ .theme-dark .iris-confirm-card { background: var(--surface) !important; border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); } .theme-dark .iris-confirm-title { color: var(--text) !important; font-weight: 600; } .theme-dark .iris-confirm-body { color: var(--text-muted) !important; } /* shared confirm buttons */ .theme-dark .confirm-btn-secondary { color: var(--text-muted); padding: .35rem .8rem; border-radius: .45rem; } .theme-dark .confirm-btn-secondary:hover { color: var(--text); background: var(--surface-2); } .theme-dark .confirm-btn-danger { color: #fff; background: #e1455e; padding: .35rem .85rem; border-radius: .45rem; } .theme-dark .confirm-btn-danger:hover { background: #c8364d; } /* ---- webenology Modal on-brand: dark panel instead of the default white ---- */ .theme-dark .webenology-modal { background-color: var(--surface) !important; color: var(--text); border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(0, 0, 0, .6); } .theme-dark .webenology-modal-body, .theme-dark .webenology-modal-footer { border-top-color: var(--border) !important; } .theme-dark .webenology-backdrop { background-color: rgba(0, 0, 0, .6) !important; } /* tables rendered inside modals (e.g. Driver Alerts): soften black header rule + dark hover */ .theme-dark .webenology-modal-body .border-black { border-color: var(--divider) !important; } .theme-dark .webenology-modal-body thead .border-b-4 { border-bottom-width: 1px !important; } .theme-dark .webenology-modal-body tbody tr { border-color: var(--divider) !important; } .theme-dark .webenology-modal-body tbody tr:hover { background-color: var(--surface-3) !important; } /* Excel download button (Driver Alerts footer) — neutral on-brand button, green only on the icon for recognition */ .theme-dark .dl-excel-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: .45rem; font-size: .85rem; font-weight: 500; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); transition: background-color .15s ease, border-color .15s ease; } .theme-dark .dl-excel-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--surface-3); } .theme-dark .dl-excel-btn .mdi { color: #34d399; } /* ---- header alert icons: subtle by default, theme status colors on alert ---- */ .theme-dark .header-alerts span:hover { background-color: var(--surface-3) !important; color: var(--text) !important; } /* icon severity (from each button's GetCssClass) mapped to on-brand colors */ .theme-dark .header-alerts .text-iris-primary-500 { color: var(--text-muted) !important; } .theme-dark .header-alerts .text-iris-yellow-500 { color: #fbbf24 !important; } .theme-dark .header-alerts .text-iris-red-300 { color: #f87171 !important; } /* count badge → clean on-brand pill that follows the icon's severity (red when there's expired truck work, amber when expiring soon) */ .theme-dark .header-alerts .bg-iris-primary-100 { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; font-weight: 600; } .theme-dark .header-alerts > div:has(.text-iris-yellow-500) .bg-iris-primary-100 { background-color: #d18616 !important; border-color: #d18616 !important; } .theme-dark .header-alerts > div:has(.text-iris-red-300) .bg-iris-primary-100 { background-color: #e1455e !important; border-color: #e1455e !important; } /* collapsible section group labels */ .theme-dark .nav-menu .nav-section { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: .85rem .65rem .2rem; font-size: .625rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); } .theme-dark .nav-menu .nav-section:hover { color: var(--text-muted); } .theme-dark .nav-menu .nav-section .mdi { font-size: 14px; opacity: .55; } /* logo (top) + account (bottom) */ .theme-dark .nav-logo { padding: .9rem .75rem .5rem; } .theme-dark .nav-logo img { height: 34px; width: auto; } .theme-dark .nav-account { padding: .4rem .5rem; border-top: 1px solid var(--border); } .theme-dark .nav-account-name { display: flex; align-items: center; color: var(--text-muted); font-size: .8125rem; padding: .3rem .15rem; } .theme-dark .nav-account .nav-logout { display: flex; align-items: center; width: 100%; color: var(--text-muted); border-radius: 8px; padding: .4rem .15rem; font-size: .8125rem; transition: background-color .15s, color .15s; } .theme-dark .nav-account .nav-logout:hover { background-color: var(--surface-3); color: #f87171; } /* tighter, consistent rows — flex so icon + label are vertically centered (no fixed height vs padding fight) */ .theme-dark .nav-menu a { display: flex; align-items: center; min-height: 2.35rem; line-height: 1.3; font-size: .8125rem; } /* right-align the expand chevron on collapsible items */ .theme-dark .nav-menu .sub-menu-item > a > div { display: flex; align-items: center; width: 100%; } .theme-dark .nav-menu .sub-menu-item > a > div > .mdi:last-child { margin-left: auto; opacity: .6; } .theme-dark .card, .theme-dark .card-layout, .theme-dark .card-layout-no-overflow { background-color: var(--surface); border-color: var(--border); color: var(--text); box-shadow: none; } /* page/section headings use .card-header for size+weight only — no background band */ .theme-dark .card-header { background-color: transparent; border-color: var(--border); box-shadow: none; } /* shared search/list card used by Routes, Drivers, Customers, etc. (hardcodes #fff in tw_site.css) */ .theme-dark .search-card-body { background-color: var(--surface); border-color: var(--border); border-width: 1px; color: var(--text); } .theme-dark .search-card-body thead th { border-color: var(--border); border-bottom-width: 1px; } /* ---- Common Tailwind light utilities -> dark ---- */ .theme-dark .bg-white { background-color: var(--surface); } .theme-dark .bg-gray-30, .theme-dark .bg-gray-50, .theme-dark .bg-gray-100, .theme-dark .bg-slate-50, .theme-dark .bg-slate-100 { background-color: var(--surface-2); } .theme-dark .bg-gray-200, .theme-dark .bg-slate-200 { background-color: var(--surface-3); } /* zebra/hover light variants Tailwind emits as separate selectors (not caught above) */ .theme-dark .even\:bg-gray-50:nth-child(even), .theme-dark .even\:bg-gray-100:nth-child(even), .theme-dark .odd\:bg-gray-50:nth-child(odd), .theme-dark .odd\:bg-gray-100:nth-child(odd) { background-color: rgba(255, 255, 255, .025) !important; } .theme-dark .hover\:bg-gray-50:hover, .theme-dark .hover\:bg-gray-100:hover, .theme-dark .hover\:bg-gray-200:hover, .theme-dark .hover\:bg-zinc-100:hover { background-color: var(--surface-3) !important; } /* light green highlight / total rows (reports) → dark-green tint */ .theme-dark .bg-green-100 { background-color: rgba(16, 185, 129, .10) !important; } .theme-dark .bg-green-200 { background-color: rgba(16, 185, 129, .16) !important; } .theme-dark .hover\:bg-green-500:hover { background-color: rgba(16, 185, 129, .26) !important; } /* ---- date picker (webenology calendar) — dark globally: input + popup ---- */ .theme-dark .wc-input { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text); } .theme-dark .wc-input input, .theme-dark .wc-input span { background-color: transparent !important; color: var(--text) !important; } .theme-dark .wc-input input:hover, .theme-dark .wc-input span:hover { background-color: var(--surface-3) !important; } .theme-dark .wc-holder { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } .theme-dark .wc-holder .wc-header, .theme-dark .wc-holder .wc-footer { background-color: var(--surface-2) !important; color: var(--text); border-color: var(--border) !important; } .theme-dark .wc-holder .wc-footer > button { color: var(--text); } .theme-dark .wc-holder .wc-footer > button.wc-clear { background-color: var(--surface-3) !important; color: var(--text) !important; } .theme-dark .wc-holder .wc-header div:hover, .theme-dark .wc-holder .wc-left:hover, .theme-dark .wc-holder .wc-right:hover, .theme-dark .wc-holder .wc-quick-selects > div:hover { background-color: var(--surface-3) !important; } /* quick-select list ships dark text (#1f2937 — invisible on dark) + a bright 1px divider (#e5e7eb). Brighten the labels and soften the dividers to the theme tokens. */ .theme-dark .wc-holder .wc-quick-selects > div { color: var(--text-muted) !important; border-color: var(--divider) !important; } .theme-dark .wc-holder .wc-quick-selects > div:hover { color: var(--text) !important; } .theme-dark .wc .wc-month, .theme-dark .wc .wc-time .wc-hour, .theme-dark .wc .wc-time .wc-minute, .theme-dark .wc .wc-time .wc-meridian { color: var(--text); } .theme-dark .wc .wc-days .wc-week-day { color: var(--text-subtle); } .theme-dark .wc .wc-days .wc-day { color: var(--text); } .theme-dark .wc .wc-days .wc-day:hover { background-color: var(--surface-3) !important; } .theme-dark .wc .wc-days .wc-day.wc-today { color: var(--primary) !important; } .theme-dark .wc .wc-days .wc-day.wc-selected { background-color: var(--primary) !important; color: #fff !important; } .theme-dark .wc .wc-days .wc-day.wc-disabled { background-color: transparent !important; color: var(--text-subtle) !important; } .theme-dark .text-black, .theme-dark .text-gray-900, .theme-dark .text-gray-800, .theme-dark .text-gray-700 { color: var(--text); } .theme-dark .text-gray-600, .theme-dark .text-gray-500 { color: var(--text-muted); } .theme-dark .text-gray-400, .theme-dark .text-gray-300 { color: var(--text-subtle); } .theme-dark .border, .theme-dark .border-b, .theme-dark .border-t, .theme-dark .border-l, .theme-dark .border-r, .theme-dark .border-gray-100, .theme-dark .border-gray-200, .theme-dark .border-gray-300, .theme-dark .border-slate-200, .theme-dark .border-slate-300 { border-color: var(--border); } .theme-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); } .theme-dark .shadow, .theme-dark .shadow-md, .theme-dark .shadow-lg { box-shadow: 0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4); } /* links / action text */ .theme-dark a, .theme-dark .btn-link, .theme-dark .text-blue-400, .theme-dark .text-blue-500, .theme-dark .text-blue-600, .theme-dark .text-blue-700, .theme-dark .text-blue-800 { color: var(--link); } /* ---- Buttons ---- */ .theme-dark .btn-primary { background-color: var(--primary); border-color: var(--primary); color: #fff; } .theme-dark .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } /* primary action button (Routes: New Route + Complete share .add-button, was magenta) */ /* color:#fff so it stays readable on the blue button even when .add-button is an (which would otherwise inherit the var(--link) blue → blue-on-blue, low contrast) */ .theme-dark .add-button { background-color: var(--primary); color: #fff; } .theme-dark .add-button:hover { background-color: var(--primary-hover); } .theme-dark .footer-cancel { color: var(--text-muted); } .theme-dark .footer-cancel:hover { color: #f87171; } /* ---- Route status filter tabs -> soft pills (subtle inactive, filled active) ---- */ .theme-dark .route-filter button { background-color: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 9999px; } .theme-dark .route-filter button:hover { background-color: var(--surface-3); color: var(--text); } .theme-dark .route-filter button.enroute { color: #7dd3fc; } .theme-dark .route-filter button.completed { color: #6ee7b7; } .theme-dark .route-filter button.canceled { color: #fca5a5; } .theme-dark .route-filter button.active { background-color: var(--surface-3); color: var(--text); border-color: var(--text-subtle); } .theme-dark .route-filter button.active.enroute { background-color: rgba(56, 189, 248, .16); color: #bae6fd; border-color: rgba(56, 189, 248, .40); } .theme-dark .route-filter button.active.completed { background-color: rgba(16, 185, 129, .16); color: #a7f3d0; border-color: rgba(16, 185, 129, .40); } .theme-dark .route-filter button.active.canceled { background-color: rgba(244, 63, 94, .16); color: #fecaca; border-color: rgba(244, 63, 94, .40); } /* ---- Routes: a route = data row (.r-top) + icon row (.r-bot); treat the pair as one unit ---- */ .theme-dark tr.r-top:has(+ tr.r-bot) { border-bottom: none; } /* no divider inside a route */ .theme-dark tr.r-top:hover, .theme-dark tr.r-bot:hover, .theme-dark tr.r-top:hover + tr.r-bot, .theme-dark tr.r-top:has(+ tr.r-bot:hover) { background-color: var(--surface-3); } /* hover highlights both */ /* ---- Route tab bar: modern underline tabs on the page background ---- (replaces the boxed surface-2 bar + hard blue active block, which made the content below it look detached from the tab) */ .theme-dark .iris-tabs ul { display: flex !important; gap: .25rem; background: transparent; border: 0; border-bottom: 1px solid var(--divider); border-radius: 0; padding: 0; margin-bottom: .9rem; } .theme-dark .iris-tabs ul li { background: transparent !important; } .theme-dark .iris-tabs ul li a { display: inline-flex; align-items: center; padding: .55rem .9rem; color: var(--text-muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: .4rem .4rem 0 0; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .theme-dark .iris-tabs ul li:hover { background: transparent; } .theme-dark .iris-tabs ul li:hover a { color: var(--text); background: var(--surface-2); } .theme-dark .iris-tabs ul li:has(a.active) { background: transparent; } .theme-dark .iris-tabs ul li a.active { color: var(--text); border-bottom-color: var(--primary); } .theme-dark .footer { background-color: var(--surface); border-top: 1px solid var(--border); } /* ---- Dashboard KPI cards (self-contained: no dependency on the Tailwind build) ---- */ .theme-dark .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.25rem; margin-bottom: 1rem; } @media (max-width: 900px) { .theme-dark .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .theme-dark .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; } .theme-dark .kpi-label { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .8125rem; } .theme-dark .kpi-value { margin-top: .4rem; font-size: 1.875rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .theme-dark .kpi-dot { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; } /* ---- Dashboard schedule: per-cell driver count + capped height so the full week fits ---- */ .theme-dark .zr-count { display: flex; align-items: center; justify-content: center; gap: .25rem; font-size: .6875rem; font-weight: 600; color: var(--text-muted); padding: .1rem 0 .25rem; border-bottom: 1px solid var(--divider); } .theme-dark .zr-cell-scroll { max-height: 300px; overflow-y: auto; } /* keep driver cards at natural height — don't let the flex column scrunch them */ .theme-dark .zr-cell-scroll > div { flex-shrink: 0; } /* ---- Form controls ---- */ .theme-dark input, .theme-dark select, .theme-dark textarea { background-color: var(--surface-2); border-color: var(--border); color: var(--text); } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: var(--text-subtle); } /* disabled fields: look like a normal dark field but clearly inactive — same surface as enabled inputs, a real (visible) border, muted text, and opacity:1 to cancel the browser's washed-out fade. (border-color alone doesn't show: Tailwind preflight zeroes border-width.) */ .theme-dark input:disabled, .theme-dark select:disabled, .theme-dark textarea:disabled { background-color: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); opacity: 1; cursor: not-allowed; } .theme-dark input:focus, .theme-dark select:focus, .theme-dark textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, .35); } /* ---- webenology dropdown (3rd-party, was a white panel + light shadow baked via @apply) ---- */ .theme-dark .drop-down-input-wrapper { border-color: var(--border) !important; background-color: var(--surface-2); border-radius: .4rem; } /* highlight the whole control when active, not just the inner input box */ .theme-dark .drop-down-input-wrapper:focus-within { border-color: var(--primary) !important; } .theme-dark .drop-down-input { color: var(--text) !important; background-color: transparent !important; } .theme-dark .drop-down-input:focus { outline: none !important; border-color: transparent !important; box-shadow: none !important; } .theme-dark .drop-down-body { background-color: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .55) !important; } .theme-dark .drop-down-body .item { background-color: transparent !important; color: var(--text) !important; border-color: var(--divider) !important; } .theme-dark .drop-down-body .item:hover { background-color: var(--primary) !important; color: #fff !important; } .theme-dark .drop-down-body .item.selected { background-color: var(--primary-hover) !important; color: #fff !important; } .theme-dark .webenology_drop-down-wrapper { background-color: transparent !important; } /* ---- Add/edit form pages: elements that were still rendering light ---- */ /* base class is rounded-b-lg + 2px teal top border (meant to butt against a tab); in the builder these stand alone, so round the top too and even out the top border */ .theme-dark .tab-top-body-card-layout, .theme-dark .route-plan-card-layout { background-color: var(--surface); border-color: var(--border); box-shadow: none; border-radius: .65rem; border-top-width: 1px; } .theme-dark .kpi-card { box-shadow: none; } .theme-dark .bg-slate-300 { background-color: var(--surface-3); } .theme-dark select { color-scheme: dark; } /* native option popups using the ROOT color-scheme, so set it on for the dark app (scoped via :has so the login page is unaffected) */ html:has(body.theme-dark) { color-scheme: dark; } /* searchable dropdown (webenology): drop the hard vertical divider before the caret */ .theme-dark .webenology_drop-down-wrapper .drop-down-arrow { border-left: 0 !important; } /* command palette input must stay borderless on focus (global input:focus adds a blue box) */ .theme-dark .gs-modal-input:focus { outline: none !important; border: none !important; box-shadow: none !important; } .theme-dark input[type=file] { color: var(--text-muted); font-size: .8125rem; } .theme-dark input[type=file]::file-selector-button { background-color: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; margin-right: 10px; cursor: pointer; font-size: .8125rem; } .theme-dark input[type=file]::file-selector-button:hover { background-color: var(--border); } /* ---- Tables (rows fed by TableRowStyles) ---- */ .theme-dark table { color: var(--text); font-variant-numeric: tabular-nums; } .theme-dark thead th { color: var(--text-subtle); font-weight: 500; border-color: var(--border); } .theme-dark .row-base { border-bottom: 1px solid var(--divider); transition: background-color .12s; } /* whisper divider */ .theme-dark .row-base:hover { background-color: var(--surface-3); } .theme-dark .row-zebra:nth-child(even) { background-color: transparent; } /* calm: no zebra (Vercel/Linear) */ .theme-dark .row-deleted { background-color: rgba(244, 63, 94, .10); } .theme-dark .row-deleted:hover { background-color: rgba(244, 63, 94, .16); } .theme-dark .row-ok { background-color: rgba(16, 185, 129, .08); } /* ---- Status badges (fed by BadgeSyles) — soft pills, matching the .s-* status style ---- */ .theme-dark .badge-ok { color: #6ee7b7; background-color: rgba(16, 185, 129, .14); } .theme-dark .badge-warn { color: #fcd34d; background-color: rgba(245, 158, 11, .14); } .theme-dark .badge-danger { color: #fca5a5; background-color: rgba(244, 63, 94, .14); } .theme-dark .badge-info { color: #93c5fd; background-color: rgba(59, 130, 246, .14); } /* calm inline status pills (dashboard cells + route rows) — low-saturation, Linear/Vercel style */ .theme-dark .s-ok { color: #6ee7b7; background-color: rgba(16, 185, 129, .14); } .theme-dark .s-info { color: #93c5fd; background-color: rgba(59, 130, 246, .14); } .theme-dark .s-warn { color: #fcd34d; background-color: rgba(245, 158, 11, .14); } .theme-dark .s-danger { color: #fca5a5; background-color: rgba(244, 63, 94, .14); } /* ---- Scrollbars ---- */ .theme-dark ::-webkit-scrollbar { width: 12px; height: 12px; } .theme-dark ::-webkit-scrollbar-track { background: var(--bg); } .theme-dark ::-webkit-scrollbar-thumb { background: #2c3647; border-radius: 8px; border: 3px solid var(--bg); } .theme-dark ::-webkit-scrollbar-thumb:hover { background: #3a4760; } /* ---- Keep printing / invoices on white ---- */ .theme-dark .invoice, .theme-dark .invoice * { background-color: #fff !important; color: #000 !important; border-color: #ddd !important; } @media print { .theme-dark, .theme-dark * { background-color: #fff !important; color: #000 !important; } } /* ====================================================================== Route builder — two-pane "load builder" layout (Dispatch tab) Left rail = load/equipment/itemizations/drivers; right rail = financials. ====================================================================== */ .theme-dark .route-builder { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34%, 560px); gap: 1rem; align-items: start; } .theme-dark .rb-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } /* let nested section cards breathe but kill their own outer margins so the grid gap is the single source of vertical rhythm */ .theme-dark .rb-main > * { margin: 0; } .theme-dark .rb-side { position: sticky; top: .5rem; /* cap to the viewport so the rail scrolls on its own when hovered, and never runs past the bottom of the screen (rail starts ~160px down + ~50px footer) */ max-height: calc(100vh - 15.5rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: .65rem; padding: .85rem; min-width: 0; } .theme-dark .rb-side > * { margin: 0; } /* stack the financial summary fields vertically in the narrow rail */ .theme-dark .rb-side .grid-cols-2 { grid-template-columns: 1fr; } .theme-dark .rb-side .tab-top-body-card-layout, .theme-dark .rb-side .card-layout, .theme-dark .rb-side [class*="CardBody"] { background: transparent; border: 0; padding: 0; } /* ---- expense tables fit the Financials rail: compact, natural width, no overlap ---- The Driver / Truck / Trailer tables carry 10-14 columns; in a narrow rail the default table-fixed/w-full crushes them so headers overlap. Give each its natural width, keep cells on one line, and let the table scroll horizontally inside the rail. */ .theme-dark .rb-side table.small { table-layout: auto !important; width: max-content !important; min-width: 100%; font-size: 11.5px; } .theme-dark .rb-side table.small th, .theme-dark .rb-side table.small td { padding: .3rem .4rem !important; white-space: nowrap; } .theme-dark .rb-side div:has(> table.small) { overflow-x: auto; } /* soften the heavy black header rule the expense tables ship with */ .theme-dark .rb-side .border-black { border-color: var(--divider) !important; } .theme-dark .rb-side thead .border-b-4 { border-bottom-width: 1px !important; } /* dial the "Driver/Truck/Trailer Expenses" + "Bill From/To" headings down to rail scale */ .theme-dark .rb-side .text-xl { font-size: 1rem; } /* thin horizontal scrollbar for the expense tables */ .theme-dark .rb-side div:has(> table.small)::-webkit-scrollbar { height: 8px; } .theme-dark .rb-side-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--divider); } /* ---- left-rail section grouping ---- */ .theme-dark .rb-group { display: flex; flex-direction: column; gap: .5rem; min-width: 0; } .theme-dark .rb-sec-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); padding-left: .15rem; } /* generic rail card (used by the Stops timeline) */ .theme-dark .rb-card { background: var(--surface); border: 1px solid var(--border); border-radius: .65rem; padding: .85rem; } .theme-dark .rb-card-head { display: flex; align-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--divider); } /* ---- Stops timeline (prototype visual) ---- */ .theme-dark .rb-stop { position: relative; display: flex; align-items: center; gap: .7rem; padding: .35rem 0; } .theme-dark .rb-stop-dot { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: 1rem; z-index: 1; } .theme-dark .rb-stop-pickup { color: #6ee7b7; background: rgba(16, 185, 129, .14); } .theme-dark .rb-stop-drop { color: #93c5fd; background: rgba(59, 130, 246, .14); } /* connector line between the two stops */ .theme-dark .rb-stop + .rb-stop .rb-stop-dot::before { content: ""; position: absolute; left: .8rem; top: -1.1rem; height: 1.1rem; border-left: 2px dashed var(--surface-3); z-index: 0; } .theme-dark .rb-stop-body { flex: 1 1 auto; min-width: 0; } .theme-dark .rb-stop-type { font-size: .82rem; font-weight: 600; color: var(--text); } .theme-dark .rb-stop-addr { font-size: .78rem; color: var(--text-subtle); } .theme-dark .rb-stop-meta { flex: 0 0 auto; font-size: .78rem; color: var(--text-subtle); } .theme-dark .rb-add-stop { display: inline-flex; align-items: center; margin-top: .55rem; padding: .3rem .65rem; font-size: .78rem; color: var(--link); background: var(--surface-2); border: 1px dashed var(--border); border-radius: .45rem; } .theme-dark .rb-add-stop:hover { background: var(--surface-3); } .theme-dark .rb-stop-note { margin-top: .7rem; font-size: .72rem; color: var(--text-subtle); } /* ---- Financials hero (right rail) ---- */ .theme-dark .rb-side-hero { margin-bottom: .9rem; padding-bottom: .85rem; border-bottom: 1px solid var(--divider); } .theme-dark .rb-hero-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); } .theme-dark .rb-hero-value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; color: var(--text); margin-top: .15rem; } .theme-dark .rb-hero-sub { font-size: .8rem; color: var(--text-subtle); margin-top: .1rem; } /* compact at-a-glance stats under the Net Pay hero */ .theme-dark .rb-side-quick { display: flex; flex-direction: column; gap: .55rem; } .theme-dark .rb-quick-row { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; } .theme-dark .rb-quick-row span { color: var(--text-subtle); } .theme-dark .rb-quick-row b { color: var(--text); font-weight: 600; } /* full-width Financials & Expenses section below the two-pane builder */ .theme-dark .rb-financials { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem; } .theme-dark .rb-financials .tab-top-body-card-layout, .theme-dark .rb-financials .card-layout { background: var(--surface); } /* the expense tables ship a heavy black header rule — soften it on dark */ .theme-dark .rb-financials .border-black { border-color: var(--divider) !important; } .theme-dark .rb-financials thead .border-b-4 { border-bottom-width: 1px !important; } /* ---- real Route Plan (stops table + map + summary) themed inside the builder ---- */ /* zebra rows: kill the light odd:bg-gray-100, use a faint dark tint instead */ .theme-dark .rb-routeplan tbody tr { background-color: transparent !important; border-color: var(--divider) !important; } .theme-dark .rb-routeplan tbody tr:nth-child(odd) { background-color: rgba(255, 255, 255, .025) !important; } /* sticky white section headers in the Summary / POI columns */ .theme-dark .rb-routeplan h3.bg-white, .theme-dark .rb-routeplan .bg-white { background-color: var(--surface) !important; color: var(--text) !important; border-color: var(--divider) !important; } /* form controls inside the plan table (don't touch the map's own div) */ .theme-dark .rb-routeplan input, .theme-dark .rb-routeplan select, .theme-dark .rb-routeplan textarea { background-color: var(--surface-2); color: var(--text); border-color: var(--border); } /* keep the summary helper text legible on dark */ .theme-dark .rb-routeplan .text-gray-400, .theme-dark .rb-routeplan .text-gray-500, .theme-dark .rb-routeplan .text-gray-600 { color: var(--text-muted) !important; } /* webenology date-picker fields render with a white holder — darken them */ .theme-dark .rb-routeplan .wc-input, .theme-dark .rb-routeplan .wc-holder, .theme-dark .rb-routeplan .wc-range { background-color: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ====================================================================== Stop cards — redesigned RoutePlanLine (one card per stop) ====================================================================== */ .theme-dark .rp-stops { display: flex; flex-direction: column; gap: .75rem; } .theme-dark .rp-stop { background: var(--surface-2); border: 1px solid var(--border); border-radius: .6rem; padding: .85rem .9rem; } /* ---- collapsible stop: chevron + summary line ---- */ .theme-dark .rp-collapse { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; color: var(--text-subtle); cursor: pointer; } .theme-dark .rp-collapse:hover { color: var(--text); } /* collapsed = the stop renders a summary line instead of the full grid. Drive styling off :has() rather than a class, because OutsideClick's CssClass handling is append-only and won't drop a toggled class. */ .theme-dark .rp-stop:has(.rp-stop-summary) { padding: .55rem .9rem; cursor: pointer; } .theme-dark .rp-stop:has(.rp-stop-summary):hover { border-color: var(--surface-3); background: var(--surface-3); } .theme-dark .rp-stop:has(.rp-stop-summary) .rp-stop-head { margin-bottom: 0; } .theme-dark .rp-stop-summary { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1 1 auto; overflow: hidden; cursor: pointer; } .theme-dark .rp-sum-type { font-weight: 600; font-size: .9rem; color: var(--text); white-space: nowrap; flex: 0 0 auto; } .theme-dark .rp-sum-addr { font-size: .85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .theme-dark .rp-sum-meta { font-size: .82rem; color: var(--text-subtle); white-space: nowrap; flex: 0 0 auto; } .theme-dark .rp-sum-dot { color: var(--text-subtle); flex: 0 0 auto; } .theme-dark .rp-stop-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; cursor: pointer; border-radius: .4rem; } /* the whole header toggles the stop open/closed, so give it a clickable affordance */ .theme-dark .rp-stop-head:hover { background: var(--surface-3); box-shadow: 0 0 0 .4rem var(--surface-3); } .theme-dark .rp-stop-type-wrap { display: flex; align-items: center; gap: .55rem; min-width: 0; } .theme-dark .rp-stop-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; font-size: 1.15rem; color: var(--text-muted); background: var(--surface-3); } .theme-dark .rp-type-pickup { color: #6ee7b7; background: rgba(16, 185, 129, .14); } .theme-dark .rp-type-drop { color: #93c5fd; background: rgba(59, 130, 246, .14); } .theme-dark .rp-type-relay { color: #7dd3fc; background: rgba(14, 165, 233, .14); } .theme-dark .rp-type-start { color: #cbd5e1; background: rgba(148, 163, 184, .16); } .theme-dark .rp-type-end { color: #fcd34d; background: rgba(245, 158, 11, .14); } .theme-dark .rp-type-default{ color: var(--text-muted); background: var(--surface-3); } .theme-dark .rp-type-select { font-weight: 600; font-size: .95rem; /* a transparent