/* OTT ERP styles - generated from partials/head.php by scripts/head-split.js.
   Loads after Tailwind, so these rules keep winning over utilities. */


html.ott-gate #app-header,html.ott-gate #sidebar,html.ott-gate main>#view-driverapp,html.ott-gate main>#view-customerportal{display:none!important}

body.locked .lockable{visibility:hidden!important}

    /* RTL (Arabic): mirror physical utilities; keep data LTR. */
    html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:1}
    html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:1}
    html[dir="rtl"] #sidebar .pl-6{padding-left:0;padding-right:1.5rem}
    html[dir="rtl"] #sidebar .border-l{border-left-width:0;border-right-width:1px}
    html[dir="rtl"] #sidebar .ml-4{margin-left:0;margin-right:1rem}
    html[dir="rtl"] table.text-left, html[dir="rtl"] table .text-left{text-align:right}
    html[dir="rtl"] table .text-right{text-align:left}
    html[dir="rtl"] .font-mono{direction:ltr;unicode-bidi:embed}
    html[dir="rtl"] #stat-active, html[dir="rtl"] #stat-revenue, html[dir="rtl"] #stat-bank, html[dir="rtl"] #stat-profit, html[dir="rtl"] #bank-td-balance, html[dir="rtl"] #bank-stripe-balance{direction:ltr;unicode-bidi:embed}
    html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea{text-align:right}
    html[dir="rtl"] input.font-mono, html[dir="rtl"] select.font-mono{direction:ltr;text-align:left}
    html[dir="rtl"] [data-lucide="chevron-left"]{transform:scaleX(-1)}
    html[dir="rtl"] [data-lucide="arrow-right"]{transform:scaleX(-1)}
    /* Brand lock: company logo/name always left, Latin order. */
    html[dir="rtl"] #app-header{flex-direction:row-reverse}
    html[dir="rtl"] #app-header > div{direction:ltr}
    /* Rev 14.04 — the global search keeps its own direction so the Arabic
       placeholder types/reads right-to-left; the dropdown mirrors in RTL. */
    html[dir="rtl"] #global-search-wrap, html[dir="rtl"] #ott-rel{direction:rtl}
    /* Data stays LTR inside the search results (refs, VINs, amounts). */
    html[dir="rtl"] #global-search-wrap .font-mono, html[dir="rtl"] #ott-rel .font-mono{direction:ltr;unicode-bidi:embed;text-align:inherit}
    html[dir="rtl"] #global-search-input{text-align:right}
    html[dir="rtl"] #global-search-results{left:auto;right:0}
    html[dir="rtl"] #driver-login-screen .flex.items-center.gap-3.border-b, html[dir="rtl"] #custportal-login-screen .flex.items-center.gap-3.border-b{direction:ltr;text-align:left}
    /* Rev 14.14 — the same title line on phones, with only the icon and the
       title left; the subtitle sits under them on its own line. */
    html[dir="rtl"] #driver-login-screen .ott-login-title, html[dir="rtl"] #custportal-login-screen .ott-login-title{direction:ltr;text-align:left}
    html[dir="rtl"] #role-gate input{direction:ltr;text-align:left}
    /* Rev 14.10 — customer sign-in fields hold Latin account names + a PIN, so
       they always read LTR / left-aligned even though the shell is RTL. Note:
       the .text-left utility is mirrored by Rev 10.20 (line ~160) and cannot
       be used for this — the [dir="ltr"] attribute selector below wins. */
    html[dir="rtl"] #custportal-login-screen input[dir="ltr"]{direction:ltr;text-align:left;unicode-bidi:normal}
    /* Rev 14.11 — the Driver/Desktop and Customer/Desktop shortcut rows on the
       two sign-in cards are now normal flex rows, so justify-end is physical
       (right in English, left in Arabic). Pin them to the reading start:
       right in Arabic, left in English. */
    html[dir="rtl"] #driver-login-tabs, html[dir="rtl"] #custportal-login-tabs{justify-content:flex-start}
    html[dir="ltr"] #driver-login-tabs, html[dir="ltr"] #custportal-login-tabs{justify-content:flex-start}
    /* Rev 10.20: mirror physical directional utilities (data stays LTR). */
    html[dir="rtl"] .text-left{text-align:right!important}
    html[dir="rtl"] .text-right{text-align:left!important}
    html[dir="rtl"] .ml-3{margin-left:0!important;margin-right:0.75rem!important}
    html[dir="rtl"] .ml-4{margin-left:0!important;margin-right:1rem!important}
    html[dir="rtl"] .mr-2{margin-right:0!important;margin-left:0.5rem!important}
    html[dir="rtl"] .mr-3{margin-right:0!important;margin-left:0.75rem!important}
    html[dir="rtl"] .hover\:mr-2:hover{margin-right:0!important;margin-left:0.5rem!important}
    html[dir="rtl"] .hover\:mr-3:hover{margin-right:0!important;margin-left:0.75rem!important}
    html[dir="rtl"] .pl-2{padding-left:0!important;padding-right:0.5rem!important}
    html[dir="rtl"] .pl-3{padding-left:0!important;padding-right:0.75rem!important}
    html[dir="rtl"] .pr-1{padding-right:0!important;padding-left:0.25rem!important}
    html[dir="rtl"] .pr-3{padding-right:0!important;padding-left:0.75rem!important}
    html[dir="rtl"] .pr-7{padding-right:0!important;padding-left:1.75rem!important}
    html[dir="rtl"] .border-l{border-left-width:0!important;border-right-width:1px!important}
    html[dir="rtl"] .border-l-4{border-left-width:0!important;border-right-width:4px!important}
    html[dir="rtl"] .border-r{border-right-width:0!important;border-left-width:1px!important}
    html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:1}
    html[dir="rtl"] .file\:mr-2::file-selector-button{margin-right:0!important;margin-left:0.5rem!important}
    html[dir="rtl"] .right-1{right:auto!important;left:0.25rem!important}
    html[dir="rtl"] .right-2{right:auto!important;left:0.5rem!important}
    html[dir="rtl"] .right-4{right:auto!important;left:1rem!important}
    html[dir="rtl"] .right-5{right:auto!important;left:1.25rem!important}
    /* Rev 14.19 — shared close (X) button on every driver-app / customer-portal
       field header.
       SIZE: it was 22x22 but could still read as an oblong box, so its two sides
       are now pinned to the SAME value: a true square, and a round icon inside it.
       POSITION: Arabic (RTL) keeps its approved top-left corner — untouched.
       English (LTR) puts it in the top-right corner of the field instead.
       The header rows keep their text clear of the button via the matching
       start/end padding rule right below. */
    .ott-x-btn{width:22px !important;height:22px !important;padding:0 !important;box-sizing:border-box;
        align-items:center !important;justify-content:center !important;aspect-ratio:1/1;line-height:1}
    .ott-x-btn svg{width:12px !important;height:12px !important;flex:0 0 12px !important}
    html[dir="ltr"] .ott-x-btn-abs{left:auto !important;right:4px !important}
    html[dir="ltr"] .ott-ttl-row{padding-left:2.25rem !important;padding-right:2.5rem !important}
    html[dir="rtl"] .rounded-l-lg{border-top-left-radius:0!important;border-bottom-left-radius:0!important;border-top-right-radius:0.5rem!important;border-bottom-right-radius:0.5rem!important}
    /* Active toast (08-orders) mirrors to the left in RTL. */
    html[dir="rtl"] #toast{right:auto!important;left:1.25rem}
    /* Rev 10.42: touch-first minimums: driver app + customer portal text
       never drops below a readable size (gloves, sunlight, small phones). */
    #view-driverapp .text-xs, #view-customerportal .text-xs{font-size:13px !important}
    #view-driverapp .text-\[11px\], #view-customerportal .text-\[11px\]{font-size:12px !important}
    /* Rev 10.62: iPhone/small-phone pass (max-width: 640px). Desktop untouched:
       everything below lives inside this media query (Tailwind CDN ties are
       beaten by the #id-anchored selectors). */
    @media (max-width: 640px) {
        /* Rev 14.14 — sign-in field rows (driver, portal, role gate). The labels
           stack above their fields on phones so Arabic label text never runs into
           the field; desktop keeps the side-by-side row untouched. */
        #driver-login-screen .ott-field-group, #custportal-login-screen .ott-field-group, #role-gate .ott-field-group{display:block}
        #driver-login-screen .ott-field-group > .ott-field-label, #custportal-login-screen .ott-field-group > .ott-field-label, #role-gate .ott-field-group > .ott-field-label{width:auto !important;white-space:nowrap;margin-bottom:.375rem}
        #driver-login-screen .ott-field-input, #custportal-login-screen .ott-field-input{width:100%}
        /* Rev 14.14 — the role-gate sign-in is the screen on phones: it reads from
           the top instead of floating as a small panel in the middle. */
        #role-gate{align-items:flex-start;overflow-y:auto;padding:1rem}
        #role-gate > div{max-width:none;margin-top:.5rem}
        /* Order modal header: title + 3 toggles wrap instead of squeezing. */
        #order-modal div.sticky{flex-wrap:wrap;row-gap:.5rem}
        #order-modal div.sticky div.gap-4{flex-wrap:wrap;row-gap:.5rem}
        /* Side-by-side label+field rows stack: label on top, field full width. */
        #order-modal div:has(> label + input, > label + select, > label + textarea){flex-direction:column;align-items:stretch}
        #order-modal div:has(> label + input, > label + select, > label + textarea) > label{white-space:normal;width:auto !important;flex:none}
        /* Rev 14.14 — driver + customer sign-in on phones: the card becomes the
           screen (edge to edge, no rounded frame floating on the page), and the
           labels stack above their fields so the Arabic labels never wrap onto
           the field text. Desktop keeps the side-by-side row. */
        #view-driverapp.ott-login-view, #view-customerportal.ott-login-view{padding:0}
        #driver-login-screen.ott-login-card, #custportal-login-screen.ott-login-card{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;min-height:100%;padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom))}
        /* Title line: icon + title on one line, subtitle under them, both free to
           use the rest of the card width instead of a narrow column. */
        #driver-login-screen .ott-login-title, #custportal-login-screen .ott-login-title{display:block;flex:1 1 auto;min-width:0}
        #driver-login-screen .ott-login-title > * + *, #custportal-login-screen .ott-login-title > * + *{margin-top:.125rem}
        /* 2-col grids (customer, address/phone, vehicle rows) 194—226226—226226— 1 column. */
        #order-modal .grid-cols-2{grid-template-columns:1fr}
        .vehicle-row-item .grid-cols-2{grid-template-columns:1fr}
        /* iOS date inputs must shrink, modal respects Safari toolbar height. */
        input[type="date"]{min-width:0}
        #order-modal > div{max-height:92dvh;-webkit-overflow-scrolling:touch}
        /* Clipped tables keep a sticky first column while scrolling sideways. */
        .erp-twrap table th:first-child, .erp-twrap table td:first-child{position:sticky;left:0;z-index:2;background-color:#020617}
        .erp-twrap thead th:first-child{z-index:6}
        .erp-twrap tfoot td:first-child{z-index:6}
        .erp-twrap th, .erp-twrap td{padding-left:.5rem;padding-right:.5rem}
        /* Rev 10.64: phone header 194—226226—226226— company on one line (smaller), tiny rev, no menu icon. */
        #app-header h1{font-size:12px;max-width:none}
        #app-header #app-rev-badge{font-size:8px}
        #app-header button[onclick="toggleSidebar()"]{display:none}
    }

    /* Rev 14.15 - sign-in field rows: one shared label column and two boxes of
       the exact same width. The row is a grid (label 6rem | field 1fr), so a
       longer label can never widen its own field or spill over the box. Covers
       the customer sign-in, driver sign-in and office sign-in, EN + AR. */
    #custportal-login-screen .ott-field-group,
    #driver-login-screen .ott-field-group,
    #role-gate .ott-field-group{display:grid;grid-template-columns:6rem minmax(0,1fr);column-gap:.5rem;align-items:center}
    /* Rev 14.16 - the office sign-in fits on a narrow phone: no long blank gap
       beside the title, a shorter label column and less side padding, so the
       whole card is narrower and the boxes are wider for real typing. */
    #role-gate > div{max-width:22rem;padding:.875rem}
    #role-gate .ott-field-group{grid-template-columns:5rem minmax(0,1fr);column-gap:.375rem}
    #role-gate .ott-field-group > .ott-field-label{font-size:11px}
    #role-gate .ott-field-input{padding-left:.625rem;padding-right:.625rem}
    /* Rev 14.17 - one more step smaller (owner: slightly smaller again). The
       card, its inner gaps, the two buttons and the header strip all come down
       a little together, so the card stays balanced and never looks squeezed:
       three quarters of a rem less width, tighter padding, a shorter field
       label column and slightly lower input and button heights. */
    #role-gate > div{max-width:19.5rem;padding:.75rem;border-radius:1.25rem}
    #role-gate > div > div:first-child{padding-bottom:.625rem}
    #role-gate .ott-field-group{grid-template-columns:4.5rem minmax(0,1fr);column-gap:.25rem}
    #role-gate .ott-field-input{padding-top:.5rem;padding-bottom:.5rem;border-radius:.75rem;font-size:.8125rem}
    #role-gate #gate-user-input{min-height:2.25rem}
    #role-gate #gate-pass-input{min-height:2.25rem}
    #role-gate > div > button[onclick="tryGateLogin()"]{padding-top:.5rem;padding-bottom:.5rem;border-radius:.75rem}
    #role-gate > div > button[data-i18n="gate.signin"]{padding-top:.5rem;padding-bottom:.5rem;border-radius:.75rem}
    #custportal-login-screen .ott-field-group > .ott-field-label,
    #driver-login-screen .ott-field-group > .ott-field-label,
    #role-gate .ott-field-group > .ott-field-label{width:auto !important;min-width:0;white-space:normal;overflow:visible;word-break:normal;overflow-wrap:break-word}
    #custportal-login-screen .ott-field-group > .ott-field-input,
    #driver-login-screen .ott-field-group > .ott-field-input,
    #role-gate .ott-field-group > .ott-field-input{width:100%;min-width:0}

    /* Rev 14.18 - sign-in as a fixed screen (owner: pin it, show it with no
       displacement at all). The gate is a full-screen, non-scrolling layer that
       covers the viewport exactly once - fixed to the visual viewport, no
       backdrop blur, no animation, no scroll-follow - so on a phone / APK it can
       never slide, ride up or let another screen peek out behind it. Only the
       inner card scrolls if a very small screen cannot fit it. */
    #role-gate{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
        margin:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;
        padding:0!important;overflow:hidden!important;align-items:center!important;justify-content:center!important;
        background-color:#020617!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
        transform:none!important;animation:none!important;transition:none!important;writing-mode:horizontal-tb!important}
    #role-gate > div{margin:0!important;max-height:100%!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
    @media (max-width: 640px){
        #role-gate{align-items:flex-start!important}
        #role-gate > div{max-width:none!important;width:100%!important;min-height:100%!important;max-height:none!important;
            display:flex!important;flex-direction:column!important;justify-content:center!important;
            overflow:visible!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
            padding:calc(1.25rem + env(safe-area-inset-top)) 1rem calc(1.25rem + env(safe-area-inset-bottom))!important}
    }

    /* 194—226226—226226—194—226226—226226— DAY THEME (light) 194—226226—226226— token-grouped (Rev 10.19). Same palette as the
       old per-class block, grouped per token: one readable line per token.
       Values intentionally unchanged (zero visual drift). 194—226226—226226—194—226226—226226— */
    @media screen {
        /* paper + body ink */
        html[data-theme="light"] body{background-color:#eef2f7 !important;color:#0f172a !important}
        html[data-theme="light"] .bg-slate-950,
        /* Rev 14.27: .bg-slate-950/60 listed ONCE (was white here then #e2e8f0 below,
           so fields flipped shade depending on rule order). Kept the later, darker
           value the fields were already rendering with — no visual change. */
        html[data-theme="light"] .bg-slate-950\/50,
        html[data-theme="light"] .bg-slate-950\/70,
        html[data-theme="light"] .bg-slate-950\/80,
        html[data-theme="light"] .bg-slate-950\/85,
        html[data-theme="light"] .bg-slate-950\/90{background-color:#ffffff !important}
        html[data-theme="light"] .bg-slate-950\/60{background-color:#e2e8f0 !important}
        html[data-theme="light"] .ott-banner-red{background-color:#dc2626 !important;color:#ffffff !important;border-color:#b91c1c !important}
        html[data-theme="light"] .ott-banner-green{background-color:#16a34a !important;color:#ffffff !important;border-color:#15803d !important}
        html[data-theme="light"] .fixed.bg-slate-950\/80{background-color:rgba(15,23,42,.45) !important}
        html[data-theme="light"] .bg-slate-900,
        html[data-theme="light"] .bg-slate-900\/50,
        html[data-theme="light"] .bg-slate-900\/60,
        html[data-theme="light"] .bg-slate-900\/80,
        html[data-theme="light"] .bg-slate-900\/90,
        html[data-theme="light"] .hover\:bg-slate-900\/60:hover{background-color:#eef2f7 !important}
        html[data-theme="light"] .bg-slate-800,
        html[data-theme="light"] .bg-slate-800\/40,
        html[data-theme="light"] .bg-slate-800\/50,
        html[data-theme="light"] .hover\:bg-slate-900:hover{background-color:#e2e8f0 !important}
        html[data-theme="light"] .hover\:bg-slate-800:hover{background-color:#cbd5e1 !important}
        /* ink scale (headings written text-white sit on light panels -> ink) */
        html[data-theme="light"] .text-slate-100,
        html[data-theme="light"] .text-white{color:#0f172a !important}
        html[data-theme="light"] .hover\:text-white:hover{color:#0f172a !important}
        html[data-theme="light"] .text-slate-200{color:#1e293b !important}
        html[data-theme="light"] .text-slate-300{color:#334155 !important}
        html[data-theme="light"] .text-slate-400{color:#64748b !important}
        html[data-theme="light"] .border-slate-800,
        html[data-theme="light"] .border-slate-800\/60,
        html[data-theme="light"] .border-slate-800\/80,
        html[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
        html[data-theme="light"] .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
        html[data-theme="light"] .divide-slate-800\/80 > :not([hidden]) ~ :not([hidden]){border-color:#e2e8f0 !important}
        html[data-theme="light"] .border-slate-700{border-color:#cbd5e1 !important}
        /* solid accent buttons keep white text */
        html[data-theme="light"] [class*="bg-sky-6"].text-white,
        html[data-theme="light"] [class*="bg-sky-5"].text-white,
        html[data-theme="light"] [class*="bg-emerald-6"].text-white,
        html[data-theme="light"] [class*="bg-emerald-5"].text-white,
        html[data-theme="light"] [class*="bg-indigo-6"].text-white,
        html[data-theme="light"] [class*="bg-rose-6"].text-white,
        html[data-theme="light"] [class*="bg-rose-5"].text-white,
        html[data-theme="light"] [class*="bg-amber-6"].text-white,
        html[data-theme="light"] [class*="bg-orange-6"].text-white{color:#ffffff !important}
        /* pastel badges: deep-navy chips -> tinted surface + strong text */
        html[data-theme="light"] .bg-sky-950,
        html[data-theme="light"] .bg-sky-950\/40,
        html[data-theme="light"] .bg-sky-900\/40,
        html[data-theme="light"] .file\:bg-sky-950::file-selector-button,
        html[data-theme="light"] .file\:bg-sky-900::file-selector-button{background-color:#e0f2fe !important}
        html[data-theme="light"] .border-sky-800,
        html[data-theme="light"] .border-sky-800\/60,
        html[data-theme="light"] .border-sky-900\/50,
        html[data-theme="light"] .border-sky-900\/60{border-color:#bae6fd !important}
        html[data-theme="light"] .hover\:bg-sky-900:hover{background-color:#bae6fd !important}
        html[data-theme="light"] .bg-emerald-950,
        html[data-theme="light"] .bg-emerald-950\/30,
        html[data-theme="light"] .bg-emerald-950\/40,
        html[data-theme="light"] .bg-emerald-950\/50,
        html[data-theme="light"] .file\:bg-emerald-950::file-selector-button{background-color:#d1fae5 !important}
        html[data-theme="light"] .border-emerald-800,
        html[data-theme="light"] .border-emerald-900\/40,
        html[data-theme="light"] .border-emerald-900\/50,
        html[data-theme="light"] .border-emerald-900\/60{border-color:#a7f3d0 !important}
        html[data-theme="light"] .hover\:bg-emerald-900:hover{background-color:#a7f3d0 !important}
        html[data-theme="light"] .bg-amber-950,
        html[data-theme="light"] .bg-amber-950\/30,
        html[data-theme="light"] .bg-amber-950\/40,
        html[data-theme="light"] .file\:bg-amber-950::file-selector-button,
        html[data-theme="light"] .file\:bg-amber-900::file-selector-button{background-color:#fef3c7 !important}
        html[data-theme="light"] .border-amber-800,
        html[data-theme="light"] .border-amber-800\/60,
        html[data-theme="light"] .border-amber-900\/40,
        html[data-theme="light"] .border-amber-900\/50,
        html[data-theme="light"] .border-amber-900\/60{border-color:#fde68a !important}
        html[data-theme="light"] .bg-rose-950{background-color:#ffe4e6 !important}
        html[data-theme="light"] .border-rose-800{border-color:#fecdd3 !important}
        html[data-theme="light"] .bg-indigo-950{background-color:#e0e7ff !important}
        html[data-theme="light"] .border-indigo-800,
        html[data-theme="light"] .border-indigo-800\/60,
        html[data-theme="light"] .border-indigo-900\/50{border-color:#c7d2fe !important}
        html[data-theme="light"] .hover\:bg-indigo-900:hover{background-color:#c7d2fe !important}
        html[data-theme="light"] .bg-purple-950{background-color:#f3e8ff !important}
        html[data-theme="light"] .border-purple-800{border-color:#e9d5ff !important}
        html[data-theme="light"] .bg-yellow-950{background-color:#fef9c3 !important}
        /* file-input chips: pastel bg + darker text */
        html[data-theme="light"] .file\:text-sky-300::file-selector-button{color:#075985 !important}
        html[data-theme="light"] .file\:text-amber-300::file-selector-button{color:#92400e !important}
        html[data-theme="light"] .file\:text-emerald-300::file-selector-button{color:#065f46 !important}
        /* accent text: darker step for contrast on paper */
        html[data-theme="light"] .text-sky-400{color:#0284c7 !important}
        html[data-theme="light"] .text-sky-300,
        html[data-theme="light"] .text-sky-200{color:#075985 !important}
        html[data-theme="light"] .text-emerald-400{color:#059669 !important}
        html[data-theme="light"] .text-emerald-300{color:#065f46 !important}
html[data-theme="light"] .text-red-500{color:#dc2626 !important}
html[data-theme="light"] .text-green-500{color:#16a34a !important}
        html[data-theme="light"] .text-amber-400{color:#b45309 !important}
        html[data-theme="light"] .text-amber-400\/90{color:#b45309 !important}
        html[data-theme="light"] .text-amber-300{color:#92400e !important}
        html[data-theme="light"] .text-amber-200{color:#92400e !important}
        html[data-theme="light"] .text-orange-400,
        html[data-theme="light"] .text-orange-300{color:#c2410c !important}
        html[data-theme="light"] .text-rose-400{color:#e11d48 !important}
        html[data-theme="light"] .text-rose-300{color:#9f1239 !important}
        html[data-theme="light"] .text-indigo-400{color:#4f46e5 !important}
        html[data-theme="light"] .text-indigo-300{color:#4338ca !important}
        html[data-theme="light"] .text-purple-400{color:#9333ea !important}
        html[data-theme="light"] .text-yellow-300{color:#854d0e !important}
        /* table chrome */
        html[data-theme="light"] .erp-twrap::-webkit-scrollbar-thumb{background:#cbd5e1}
        html[data-theme="light"] .erp-twrap thead th{background-color:#ffffff}
        html[data-theme="light"] .erp-twrap table th:first-child, html[data-theme="light"] .erp-twrap table td:first-child{background-color:#ffffff}
        /* Rev 12.46: the driver-app attachment strips (unit documents & code /
           order pickup documents & code) stay DARK GREY in the day theme so the
           paperwork stays legible 194—226226—226226— no washed-out beige. */
        html[data-theme="light"] .ott-docs-strip{background-color:#374151 !important;border-color:#4b5563 !important}
        html[data-theme="light"] .ott-docs-strip .bg-slate-900,
        html[data-theme="light"] .ott-docs-strip .bg-slate-950{background-color:#1f2937 !important}
        html[data-theme="light"] .ott-docs-strip .border-slate-700,
        html[data-theme="light"] .ott-docs-strip .border-slate-800{border-color:#4b5563 !important}
        html[data-theme="light"] .ott-docs-strip .text-sky-300{color:#7dd3fc !important}
        html[data-theme="light"] .ott-docs-strip .hover\:text-sky-200:hover{color:#bae6fd !important}
        html[data-theme="light"] .ott-docs-strip .text-amber-300{color:#fbbf24 !important}
    }

    div:has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
    table{min-width:620px}
    @media (max-width: 768px){
      body{font-size:15px}
      main{overflow-y:auto}
      input,select,textarea{font-size:16px !important}
      button{min-height:44px}
      #invoice-a4-sheet,#statement-a4-sheet{padding:18px !important}
      th,td{padding-top:8px !important;padding-bottom:8px !important}
    }

    /* Rev 15.59 (owner) — A+ text size must reach EVERY fixed pixel size too.
       Tailwind is rem-based and scales with the root size by itself; these
       few rules were written in px, so they are re-stated against the root
       size (identical at standard, larger at 110% / 120%). Print sheets use
       fixed points and are not touched. */
    html[data-text-scale] body{font-size:.875rem}
    #view-driverapp .text-xs, #view-customerportal .text-xs{font-size:.8125rem !important}
    #view-driverapp .text-\[11px\], #view-customerportal .text-\[11px\]{font-size:.75rem !important}
    @media (max-width: 768px){
      html[data-text-scale] body{font-size:.9375rem}
      /* 16px is the iOS/POS focus-zoom floor — it must stay in px. */
    }
    @media (max-width: 640px){
      html[data-text-scale] #app-header h1{font-size:.75rem}
      html[data-text-scale] #app-header #app-rev-badge{font-size:.5rem}
    }

        /* Rev 13.55 — P0 typography, Arabic-aware:
           (a) Arabic body text gets 1.65 line-height (Cairo's diacritics and
               deep descenders need air); the English UI keeps the stock 1.5.
           (b) Tailwind's tracking-* utilities are neutralised while the app
               language is Arabic — letter-spacing pulls the joined Arabic
               letters apart. Latin dir="ltr" islands are unaffected glyphs-wise
               and the English UI (lang="en") keeps its tracking everywhere. */
        html[lang="ar"] body{line-height:1.65}
        html[lang="ar"] .tracking-wide,
        html[lang="ar"] .tracking-wider,
        html[lang="ar"] .tracking-widest{letter-spacing:normal}
        .leaflet-container {
            background-color: #0f172a !important;
            font-family: 'Inter', sans-serif;
        }
        .leaflet-popup-content-wrapper, .leaflet-popup-tip {
            background-color: #020617 !important;
            color: #f8fafc !important;
            border: 1px solid #1e293b;
            border-radius: 0.5rem;
        }
        input[type="date"].date-input::-webkit-calendar-picker-indicator {
            display: none;
            cursor: default;
            
        }
        input[type="date"].date-input::-moz-calendar-picker-indicator {
            display: none;
            cursor: default;
        }
        /* Professional tables: sticky header/footer, thin scrollbars, tabular numbers. */
        .erp-twrap{scrollbar-width:thin;scrollbar-color:#1e293b transparent}
        .erp-twrap::-webkit-scrollbar{height:8px;width:8px}
        .erp-twrap::-webkit-scrollbar-thumb{background:#1e293b;border-radius:8px}
        .erp-twrap thead th{position:sticky;top:0;z-index:5;background-color:#020617}
        .erp-twrap tfoot td{position:sticky;bottom:0;z-index:5;background-color:#052e22}
        .erp-twrap td.num,.erp-twrap th.num{font-variant-numeric:tabular-nums}
        /* Dashboard "Recent Orders": a fixed 8-column grid so Arabic (RTL) and
           English (LTR) line up the same. Percentages are measured against a
           ~1720px table (the live card width) so no column is squeezed and the
           table fits without horizontal scrolling. */
        #dashboard-recent-table{table-layout:fixed}
        #dashboard-recent-table th:nth-child(1) {width:11%}     /* ~190 shipment id + time */
        #dashboard-recent-table th:nth-child(2) {width:14%}     /* ~241 customer + phone  */
        #dashboard-recent-table th:nth-child(3) {width:13%}     /* ~224 make/model/VIN    */
        #dashboard-recent-table th:nth-child(4) {width:15%}     /* ~258 address + km      */
        #dashboard-recent-table th:nth-child(5) {width:8.5%}    /* ~146 driver + fleet    */
        #dashboard-recent-table th:nth-child(6) {width:10%}     /* ~172 status badge      */
        #dashboard-recent-table th:nth-child(7) {width:13%}     /* ~224 amount + HST      */
        #dashboard-recent-table th:nth-child(8) {width:15.5%}   /* ~267 view/edit buttons */
        #dashboard-recent-table .route-cell{font-size:11px;line-height:1.3;word-break:break-word}
        #dashboard-recent-table td{vertical-align:top;overflow-wrap:anywhere}
        #dashboard-recent-table td:last-child{overflow-wrap:normal;padding-inline:8px}
        /* Actions: always the visually-last column — in RTL it sits on the left
           and `rounded-r-lg` would paint the wrong corner, so force the end. */
        html[dir="rtl"] #dashboard-recent-table th:last-child{text-align:start !important;border-radius:8px 0 0 8px !important}
        html[dir="rtl"] #dashboard-recent-table th:first-child{border-radius:0 8px 8px 0 !important}
        /* Money: the amount is a single LTR run so "C$1,234.00" never splits and
           the currency sign is never clipped, in Arabic or English. */
        #dashboard-recent-table .money{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap;overflow:visible}
        #dashboard-recent-table .amount{font-size:12px;font-weight:700;color:#34d399}
        #dashboard-recent-table .hst-line{font-size:10px;color:#64748b}
        #dashboard-recent-table td.num-cell{white-space:nowrap}
        /* Current-language header alignment (physical right/left breaks in RTL). */
        html[dir="rtl"] #dashboard-recent-table th.total-col,
        html[dir="rtl"] #dashboard-recent-table td.num-cell{text-align:left !important}
        /* Actions cell: two compact, fully visible buttons that wrap if needed. */
        #dashboard-recent-table .row-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start}
        #dashboard-recent-table .row-actions .btn-row{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:8px;font-size:10.5px;line-height:1.2;font-weight:700;border:1px solid;white-space:nowrap;cursor:pointer;transition:background-color .15s}
        #dashboard-recent-table .row-actions .btn-row svg{width:12px;height:12px;flex:0 0 auto}
        #dashboard-recent-table .row-actions .btn-view{color:#7dd3fc;background-color:rgba(12,74,110,.45);border-color:rgba(2,132,199,.55)}
        #dashboard-recent-table .row-actions .btn-view:hover{background-color:rgba(7,89,133,.7)}
        #dashboard-recent-table .row-actions .btn-edit{color:#e2e8f0;background-color:#1e293b;border-color:#334155}
        /* Rev 15.94 (owner) — the SAME row builder also fills the Invoices
           tab, whose header has two extra money columns (Subtotal, HST) before
           Total. Those rows now carry a logical column tag instead of relying on
           position, and this shared table-layout pairs Subtotal + HST so two
           columns share the one money width (10%). Result: 8 <th> and 8 <td> in
           both tabs, Actions never squeezed by the two extra columns.
           Rev 15.94 fix: a BARE `.erp-twrap table{table-layout:fixed}` fixed
           EVERY card table (payments, statements, customers, products too) and
           squashed their own column widths, so the rule is scoped to the sales
           row tables only. */
        #sales-orders-table tbody tr td, #sales-table-tbody > tr > td{overflow-wrap:anywhere}
        /* Rev 15.99 (fix) - the Orders table and the Invoices table now share ONE
           layout: fixed table-layout plus one width per ott-col-* tag. The old
           nth-child width list for #sales-orders-table is gone (the header now
           carries the same ott-col-* tags as every row the row builder makes), so
           no rule can contradict another and ACTIONS keeps a full 21% in both
           tabs. The 3rd header cell is its own ott-col-3. */
        #sales-orders-table{table-layout:fixed;overflow-wrap:anywhere}
        #sales-orders-table th{white-space:normal}
        #sales-orders-table th, #sales-orders-table td{padding-inline:8px !important}
        #sales-orders-table td .ott-status-select{overflow-wrap:anywhere}
        #sales-orders-table td:last-child{overflow-wrap:normal}
        /* Rev 17.12 - Order Value is one cell per amount again (Subtotal, HST,
           Total), so the zero-width pair, the stacked cell and the separate
           status tag are gone: the header and the shared row builder carry the
           same ott-col-SUB / HST / TOT / ST tags, 10 cells each. */
        #sales-orders-table .ott-ord-money{white-space:nowrap}
        /* Rev 17.15 - full isolation of the two screens. Only the Orders tab uses
           these tags (its rows are tagged ott-ord-col-*). Everything the Invoices
           tab needs stays on the shared .ott-col-* grid below, so changing one
           screen can never move the other. */
        /* Rev 17.18 - the Orders grid is 8 columns now: 9 + 11 + 18 + 11 + 7.5 + 9.5 + 12 + 22 = 100.
           One Order Value cell, a wider status column and Delete + BOL in the Actions cell. */
        #sales-orders-table th.ott-ord-col, #sales-orders-table td.ott-ord-col{padding-inline:6px !important}
        #sales-orders-table th.ott-ord-col-1, #sales-orders-table td.ott-ord-col-1{width:9%}
        #sales-orders-table th.ott-ord-col-2, #sales-orders-table td.ott-ord-col-2{width:11%}
        #sales-orders-table th.ott-ord-col-3, #sales-orders-table td.ott-ord-col-3{width:18%}
        #sales-orders-table th.ott-ord-col-4, #sales-orders-table td.ott-ord-col-4{width:11%}
        #sales-orders-table th.ott-ord-col-5, #sales-orders-table td.ott-ord-col-5{width:7.5%}
        #sales-orders-table th.ott-ord-col-VAL, #sales-orders-table td.ott-ord-col-VAL{width:9.5%}
        #sales-orders-table th.ott-ord-col-ST, #sales-orders-table td.ott-ord-col-ST{width:12%}
        #sales-orders-table th.ott-ord-col-8, #sales-orders-table td.ott-ord-col-8{width:22%}
        /* Rev 17.18 - Subtotal / HST / Total stacked inside the one Order Value cell. */
        #sales-orders-table .ott-ord-val .num-cell{display:flex;align-items:baseline;justify-content:flex-start;gap:4px;line-height:1.35}
        #sales-orders-table .ott-ord-val .money{font-size:11px;font-variant-numeric:tabular-nums;margin-inline-start:auto}
        #sales-orders-table .ott-ord-val .ott-val-tot{color:#f8fafc;font-weight:700}
        /* Rev 17.18 - the status column has more room: the select fills it and wraps
           long labels instead of squeezing them. */
        #sales-orders-table .ott-status-select{width:100%;max-width:100%;min-height:24px;padding:3px 4px;font-size:10px;font-weight:700;line-height:1.2}
        /* Rev 15.94 (owner) - one width grid shared by two tables:
             - Orders  (10 cells) : # / customer / units / route / fleet / Subtotal / HST / Total / status / actions
             - Invoices(10 cells) : # / customer / manifest / route / fleet / Subtotal / HST / Total / status / actions
           Both tabs total 100% and Actions keeps its full 21%. The Orders header
           is drawn on two lines: five info cells, one colspan="3" "Order Value"
           band, then Status and Actions with rowspan="2". */
        /* Rev 15.99 (ascii note) - widths: 10.5 + 11 + 19 + 12 + 7.5 + 7 + 7 + 9 + 8 + 21 = 100 */
        .erp-twrap th.ott-col-1, .erp-twrap td.ott-col-1{width:10.5%}    /* # / invoice # + time */
        .erp-twrap th.ott-col-2, .erp-twrap td.ott-col-2{width:11%}      /* customer            */
        .erp-twrap th.ott-col-3, .erp-twrap td.ott-col-3{width:19%}      /* units / manifest    */
        .erp-twrap th.ott-col-4, .erp-twrap td.ott-col-4{width:12%}      /* route + dates       */
        .erp-twrap th.ott-col-5, .erp-twrap td.ott-col-5{width:7.5%}     /* fleet + driver      */
        .erp-twrap th.ott-col-SUB, .erp-twrap td.ott-col-SUB{width:7%}    /* subtotal           */
        .erp-twrap th.ott-col-HST, .erp-twrap td.ott-col-HST{width:7%}    /* HST                */
        .erp-twrap th.ott-col-TOT, .erp-twrap td.ott-col-TOT{width:9%}    /* total              */
        .erp-twrap th.ott-col-ST, .erp-twrap td.ott-col-ST{width:8%}      /* status              */
        .erp-twrap th.ott-col-8, .erp-twrap td.ott-col-8{width:21%}       /* actions             */
        .erp-twrap th.ott-inv-th{vertical-align:middle;white-space:normal}
        .erp-twrap th.ott-ord-th{vertical-align:middle;white-space:normal}
        .erp-twrap td.ott-act-col{overflow-wrap:normal}
        .erp-twrap th.ott-act-col, .erp-twrap th.ott-col-8{text-align:right}
        html[dir="rtl"] .erp-twrap th.ott-col-8{text-align:start}
        /* Rev 15.99 (fix) - a spanning header cell (the "Order Value" band over
           Subtotal / HST / Total) must not take a column width of its own, or the
           three sub-headers would be squeezed and the matrix would drift. */
        .erp-twrap th[colspan]{width:auto !important}
        html[dir="rtl"] .erp-twrap th.ott-col-SUB,
        html[dir="rtl"] .erp-twrap th.ott-col-HST,
        html[dir="rtl"] .erp-twrap th.ott-col-TOT{text-align:right}
        /* the action matrix (View/Edit/Note/Reminder/Invoice/More) is built by the
           SAME row builder, so its grid + colours follow it into the Invoices tab */
        .erp-twrap .row-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;position:relative}
        .erp-twrap .row-actions .btn-row{display:flex;align-items:center;justify-content:flex-start;gap:4px;width:100%;min-width:0;padding:3px 5px;border-radius:8px;font-size:10.5px;line-height:1.2;font-weight:700;border:1px solid;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color .15s}
        .erp-twrap .row-actions .btn-row span{overflow:hidden;text-overflow:ellipsis;min-width:0}
        .erp-twrap .row-actions .btn-row svg{width:12px;height:12px;flex:0 0 auto}
        .erp-twrap .row-actions .btn-view{color:#7dd3fc;background-color:rgba(12,74,110,.45);border-color:rgba(2,132,199,.55)}
        .erp-twrap .row-actions .btn-view:hover{background-color:rgba(7,89,133,.7)}
        .erp-twrap .row-actions .btn-edit{color:#e2e8f0;background-color:#1e293b;border-color:#334155}
        .erp-twrap .row-actions .btn-edit:hover{background-color:#334155}
        .erp-twrap .row-actions .btn-print{color:#7dd3fc;background-color:#0f172a;border-color:#1e3a5f}
        .erp-twrap .row-actions .btn-print:hover{background-color:#1e3a5f}
        .erp-twrap .row-actions .btn-more{color:#cbd5e1;background-color:#0f172a;border-color:#334155}
        .erp-twrap .row-actions .btn-more:hover{background-color:#1e293b}
        .erp-twrap .row-actions.menu-open .btn-more{background-color:#334155;color:#f8fafc}
        .erp-twrap .row-actions .btn-note{color:#fbbf24;background-color:#0f172a;border-color:#78350f}
        .erp-twrap .row-actions .btn-note:hover{background-color:#78350f}
        .erp-twrap .row-actions .btn-rem{color:#c4b5fd;background-color:#0f172a;border-color:#4c1d95}
        .erp-twrap .row-actions .btn-rem:hover{background-color:#4c1d95}
        .erp-twrap .row-actions .btn-rem.is-on{background-color:#4c1d95;color:#ede9fe;box-shadow:0 0 0 1px rgba(196,181,253,.45) inset}
        /* Rev 15.94 — the same note/reminder lines also appear inside the invoices grid */
        .erp-twrap .ott-note-line,
        .erp-twrap .ott-rem-line{display:block;margin-top:2px;font-size:10px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left}
        .erp-twrap .ott-note-line{color:#fbbf24}
        .erp-twrap .ott-rem-line{color:#c4b5fd}
        .erp-twrap .ott-rem-line svg{width:9px;height:9px;display:inline-block;vertical-align:-1px}
        .erp-twrap td .ott-status-select{max-width:100%;width:100%;padding-inline:6px;font-size:10.5px;letter-spacing:0;text-overflow:ellipsis;min-width:0;line-height:1.5;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 4px center !important;background-size:9px 9px !important;padding-right:15px !important}
        /* ===== end Rev 15.94 inv grid ===== */
        #sales-orders-table .route-cell{font-size:11px;line-height:1.3;word-break:break-word}
        #sales-orders-table .unit-row + .unit-row{margin-top:6px;border-top:1px dashed #1e293b;padding-top:5px}
        #sales-orders-table .unit-chips{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin-top:1px}
        #sales-orders-table .unit-chips:empty{display:none}
        #sales-orders-table .unit-chips > span{padding-top:1px;padding-bottom:1px;font-size:9.5px;line-height:1.35}
        /* Rev 15.94 (owner): the stage chips carry a Lucide check icon each; a chip is
           "done" when it holds the icon. Tight, no icon wrap, never splits mid-phrase. */
        #sales-orders-table .unit-chips > span{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
        #sales-orders-table .unit-chips > span svg{width:9px;height:9px;flex:0 0 auto}
        #sales-orders-table .unit-chips > span:not(:has(svg)){color:#94a3b8;background-color:#0f172a;border-color:#334155}
        #sales-orders-table .unit-chips > span:has(svg){font-weight:700}
        /* Lucide swaps the empty <i> for an svg at render time; hide the bare <i>
           so a chip never shows a dead gap while the icon loads. */
        #sales-orders-table .unit-chips > span > i{display:none}
        #sales-orders-table .money{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap;overflow:visible}
        #sales-orders-table td.num-cell{white-space:nowrap}
        html[dir="rtl"] #sales-orders-table th.total-col,
        html[dir="rtl"] #sales-orders-table td.num-cell{text-align:left !important}
        /* Rev 15.94 (owner): the status pill reads on one line. It is the widest label
           in the table (FOR PICKING / DROPPED OFF / انتظار الاستلام), so it gets the 9%
           column and a fixed 10.5px type size. */
        #sales-orders-table .ott-status-select{max-width:100%;width:100%;padding-inline:6px;font-size:10.5px;letter-spacing:0;text-overflow:ellipsis;min-width:0;line-height:1.5}
        /* Rev 15.94 (owner): a native <option> cannot inherit the pill's colours, so the
           closed pill gets its own custom chevron and the browser's arrow is removed. */
        #sales-orders-table .ott-status-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 4px center !important;background-size:9px 9px !important;padding-right:15px !important}
        /* Rev 15.99 (cleanup) - the duplicated Orders copy of the action matrix is
           gone: .erp-twrap .row-actions above already styles the 2 x 3 grid in
           BOTH tabs from the same row builder. Only the Orders-only extras stay
           below: the cell anchor, the overflow menu, the note chip and the lines. */
        /* the small menu that holds the rare actions (BOL / delete), anchored to the
           cell (not to the grid) so it never becomes a 7th grid cell */
        #sales-orders-table td:last-child{position:relative}
        #sales-orders-table .ott-row-menu{position:absolute;top:calc(100% + 3px);inset-inline-end:0;z-index:60;min-width:150px;padding:3px;border-radius:10px;background-color:#0f172a;border:1px solid #334155;box-shadow:0 10px 22px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
        #sales-orders-table .ott-row-menu button{display:flex;align-items:center;gap:6px;width:100%;padding:5px 7px;border-radius:7px;background:transparent;border:0;color:#cbd5e1;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;text-align:start}
        #sales-orders-table .ott-row-menu button svg{width:12px;height:12px;flex:0 0 auto}
        #sales-orders-table .ott-row-menu button:hover{background-color:#1e293b}
        #sales-orders-table .ott-row-menu button.is-danger{color:#fb7185}
        #sales-orders-table .ott-row-menu button.is-danger:hover{background-color:#4c0519}
        /* Rev 15.96 (owner) — the internal note and the personal reminder on the order row:
           one cut line each under the timestamp, full text on hover. The note is amber
           (internal), the reminder is violet (yours only, this device). The row buttons
           for them get the same colours as the lines. */
        #sales-orders-table .ott-note-chip{display:inline-block;margin-inline-start:4px;padding:0 4px;border-radius:6px;font-size:10px;line-height:14px;vertical-align:middle;background-color:rgba(120,53,15,.55);border:1px solid rgba(180,83,9,.7);cursor:help}
        #sales-orders-table .ott-note-line,
        #sales-orders-table .ott-rem-line{display:block;margin-top:2px;font-size:10px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:help}
        #sales-orders-table .ott-note-line{color:#fbbf24}
        #sales-orders-table .ott-rem-line{color:#c4b5fd}
        #sales-orders-table .ott-rem-line svg{width:9px;height:9px;display:inline-block;vertical-align:-1px}
        /* Rev 15.94 (owner) — Invoices actions inherit the SAME colours so the matrix
           looks identical in both tabs (they only differ in base selectors). */
        .erp-twrap .row-actions .btn-del{color:#fb7185;border-color:#4c1d24}
        .erp-twrap .row-actions .btn-del:hover{background-color:#4c0519}
        .erp-twrap .row-actions .btn-bol{color:#6ee7b7;background-color:#0f172a;border-color:#1e4a3a}
        .erp-twrap .row-actions .btn-bol:hover{background-color:#1e4a3a}
        .erp-twrap .row-actions .btn-icon{padding:4px 5px;color:#94a3b8;background-color:#0f172a;border-color:#334155}
        #dashboard-recent-table .row-actions .btn-edit:hover{background-color:#334155}
        /* Rev 15.94 (owner): the price cell is typed, not stepped — no up/down arrows. */
        #order-modal input.veh-price::-webkit-outer-spin-button,
        #order-modal input.veh-price::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
        #order-modal input.veh-price{-moz-appearance:textfield;appearance:textfield}
        #order-modal.portal-mode .portal-hide {
            display: none !important;
        }
        #order-modal.portal-mode div:has(> input.veh-price) {
            display: none !important;
        }
        /* Rev 15.06 (owner) — the closing thank-you line must stay on ONE line on both
           invoice sheets, on screen and on paper. At 11px the line needs ~674px and the
           sheet's note box offers ~737px, so it can never wrap or clip. */
        .ott-inv-note { white-space: nowrap; font-size: 11px; line-height: 16px; }
        /* Rev 11.98: WYSIWYG print preview on US Letter (215.9 x 279.4 mm). The real sheet is
           rendered on screen at paper size and scaled to fit, so preview === print. */
        @media screen {
            /* Rev 15.21 (owner) — tall invoices (many orders) must always scroll,
               including on a phone. The preview container scrolls, starts at the
               top, and keeps the toolbar reachable while the sheet is scrolled. */
            .a4-preview-modal {
                align-items: center !important;
                justify-content: flex-start !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                touch-action: pan-y pinch-zoom;
            }
            .a4-preview-modal.a4-tall { align-items: flex-start !important; justify-content: flex-start !important; }
            .a4-preview-modal > .a4-toolbar {
                position: sticky;
                top: 0;
                z-index: 30;
                flex: 0 0 auto;
                padding-top: 2px;
                padding-bottom: 6px;
                background: rgba(2, 6, 23, .86);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
            /* Rev 15.23 (owner) — on a phone the wrapped toolbar ate about a third
               of the screen and pushed the Record Payment fields into a tall stack,
               so the panel looked like it had vanished. Below 640px the preview gets
               a single-line toolbar and the payment panel becomes its own row. */
            @media (max-width: 639px) {
                #cons-modal > .a4-toolbar {
                    flex-direction: column !important;
                    flex-wrap: nowrap !important;
                    align-items: stretch !important;
                    gap: 6px !important;
                }
                #cons-modal > .a4-toolbar > div { width: 100% !important; min-width: 0 !important; }
                #cons-modal > .a4-toolbar > div:last-child { flex-wrap: nowrap !important; gap: 6px !important; }
                #cons-modal > .a4-toolbar > div:last-child > button {
                    flex: 1 1 0 !important;
                    min-width: 0 !important;
                    padding-left: 8px !important;
                    padding-right: 8px !important;
                    justify-content: center;
                }
                #cons-pay-controls { flex-wrap: wrap !important; padding: 8px 10px !important; }
                #cons-pay-fields { flex: 1 1 100% !important; }
                #cons-pay-amount { flex: 1 1 60px !important; width: auto !important; min-width: 0 !important; }
                #cons-pay-method { flex: 0 1 92px !important; min-width: 0 !important; }
                #cons-pay-history { flex: 1 1 100% !important; }
            }
            .a4-preview .mt-auto { margin-top: auto !important; }
            /* One-page invoices: definite Letter height so the vehicle card stretches down. */
            #invoice-a4-sheet.a4-preview.a4-one-page { height: 279.4mm !important; }
            #cons-sheet.a4-preview.a4-one-page { height: 279.4mm !important; min-height: 0 !important; overflow: visible !important; }
            .a4-preview {
                width: 215.9mm !important;
                min-width: 215.9mm !important;
                max-width: 215.9mm !important;
                min-height: 279.4mm !important;
                max-height: none !important;
                padding: 6mm 6mm 11.4mm 6mm !important;
                border-radius: 0 !important;
                overflow: visible !important;
                /* Vertical auto-margins on an overflowing flex item make its top
                   unreachable, so the sheet is only centred horizontally here. */
                margin: 0 auto !important;
                flex: 0 0 auto !important;
                box-shadow: 0 18px 50px rgba(2, 6, 23, .55), 0 0 0 1px #cbd5e1 !important;
            }
        }
        @page {
            size: letter;
            margin: 6mm 6mm 8mm 6mm;
            @bottom-center {
                content: "Page " counter(page) " of " counter(pages);
                font-size: 8pt;
                color: #94a3b8;
            }
        }
        @media print {
            /* Rev 15.54 (owner) — fix for the extra BLANK second page. The app shell
               (header bar, toast, page wrapper) is taller than the sheet, so the document
               was ~35px taller than one Letter page and Chrome emitted a trailing page
               that carried nothing but a white band and the footer. Clamping the print
               root to exactly one page and hiding the shell removes that overflow: a
               sheet that fits now prints on one page, and multi-page sheets still
               fragment normally (they are taller than the viewport, so the clip does
               not cut them). */
            html, body {
                background: #ffffff !important;
                color: #0f172a !important;
                width: 100% !important;
                height: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
                font-size: 11pt !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            /* App chrome never belongs on paper. */
            #app-header,
            #role-gate,
            #toast,
            #toast-icon {
                display: none !important;
            }
            body * {
                visibility: hidden !important;
            }
            #printable-invoice-modal:not(.hidden),
            #printable-invoice-modal:not(.hidden) *,
            #customer-statement-modal:not(.hidden),
            #customer-statement-modal:not(.hidden) *,
            #delivery-report-modal:not(.hidden),
            #delivery-report-modal:not(.hidden) *,
            #cons-modal:not(.hidden),
            #cons-modal:not(.hidden) * {
                visibility: visible !important;
            }
            #printable-invoice-modal:not(.hidden),
            #customer-statement-modal:not(.hidden),
            #delivery-report-modal:not(.hidden),
            #cons-modal:not(.hidden) {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                display: block !important;
                background: transparent !important;
                backdrop-filter: none !important;
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                min-height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                z-index: 9999 !important;
            }
            #invoice-a4-sheet,
            #statement-a4-sheet,
            #delivery-report-sheet,
            #cons-sheet {
                width: 100% !important;
                max-width: 100% !important;
                min-height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
                display: block !important;
                page-break-inside: auto !important;
                zoom: 1 !important;
            }
            /* Invoice: guarantee the vehicle table survives every print engine. */
            #invoice-a4-sheet table,
            #cons-sheet table {
                display: table !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                table-layout: fixed !important;
                border-collapse: collapse !important;
            }
            #invoice-a4-sheet colgroup,
            #cons-sheet colgroup { display: table-column-group !important; }
            #invoice-a4-sheet col,
            #cons-sheet col { display: table-column !important; }
            #invoice-a4-sheet thead { display: table-header-group !important; }
            #invoice-a4-sheet tbody,
            #print-inv-vehicles-tbody { display: table-row-group !important; }
            #cons-sheet thead { display: table-header-group !important; }
            #cons-sheet tbody { display: table-row-group !important; }
            #cons-sheet tr { display: table-row !important; page-break-inside: avoid !important; break-inside: avoid !important; }
            /* Rev 14.99 — the consolidated sheet prints at the SAME typography as its
               on-screen A4 preview, exactly like the per-order invoice sheet. The old
               7.5px font shrink and 6mm padding override made the printed sheet look
               nothing like the preview; the fixed colgroup plus the wrap rules below
               keep every column on the page at the natural size. */
            #cons-sheet th,
            #cons-sheet td { display: table-cell !important; visibility: visible !important; vertical-align: top !important; }
            /* Rev 15.06 (owner) — the consolidated sheet now uses the same pixel-sized
               typography as the per-order invoice (text-[15px] root, text-[13px] body,
               text-[11px] labels), so the old rem pins that forced 14px/12px are gone:
               px sizes are immune to the print root font (11pt) and preview === print. */
            /* space-y-4 uses rem margins; pin the preview's 16px rhythm in print. */
            #cons-sheet > :not([hidden]) ~ :not([hidden]) { margin-top: 16px !important; }
            /* Long routes / vehicle lists must wrap inside their narrow columns. */
            #cons-sheet td:nth-child(1),
            #cons-sheet td:nth-child(2),
            #cons-sheet td:nth-child(4),
            #cons-sheet td:nth-child(5) { word-break: break-word !important; overflow-wrap: anywhere !important; white-space: normal !important; }
            /* Rev 15.05 (owner) — the Order, Reference and Date columns are wider, and a
               long reference wraps inside its own cell instead of spilling over its
               neighbour. The date never splits: its column has room for the whole date. */
            #cons-sheet th:nth-child(1),
            #cons-sheet th:nth-child(2),
            #cons-sheet th:nth-child(3),
            #cons-sheet td:nth-child(1),
            #cons-sheet td:nth-child(2),
            #cons-sheet td:nth-child(3) { padding-left: 8px !important; padding-right: 8px !important; }
            #cons-sheet td:nth-child(3),
            #cons-sheet th:nth-child(3) { white-space: nowrap !important; }
            /* Amount column never wraps. */
            #cons-sheet td:nth-child(6) { white-space: nowrap !important; }
            #invoice-a4-sheet tr {
                display: table-row !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            #invoice-a4-sheet th,
            #invoice-a4-sheet td {
                display: table-cell !important;
                visibility: visible !important;
                vertical-align: top !important;
            }
            #invoice-a4-sheet div:has(> table),
            #invoice-a4-sheet .overflow-hidden { overflow: visible !important; }
            /* Keep the closing thank-you block pinned to the bottom of the Letter page. */
            /* Rev 15.21 (owner) — the closing line prints ONCE, at the end of the
               invoice. Flex + min-height on a sheet that spans several pages is what
               made browsers repeat the closing block on every page, so the bottom-pin
               layout is now used ONLY when the whole invoice fits one Letter page. */
            #invoice-a4-sheet {
                display: block !important;
                min-height: 0 !important;
            }
            #invoice-a4-sheet.a4-one-page {
                display: flex !important;
                flex-direction: column !important;
                height: 262mm !important;
                min-height: 0 !important;
                overflow: visible !important;
            }
            #invoice-a4-sheet.a4-one-page .mt-auto {
                margin-top: auto !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            #invoice-a4-sheet:not(.a4-one-page) .mt-auto {
                margin-top: 16px !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            /* Rev 15.21 — same rule for the monthly/weekly consolidated invoice. */
            #cons-sheet {
                display: block !important;
                min-height: 0 !important;
            }
            #cons-sheet.a4-one-page {
                display: flex !important;
                flex-direction: column !important;
                height: 262mm !important;
                min-height: 0 !important;
                overflow: visible !important;
            }
            #cons-sheet.a4-one-page .mt-auto {
                margin-top: auto !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            #cons-sheet:not(.a4-one-page) .mt-auto {
                margin-top: 16px !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            #cons-sheet div:has(> table),
            #cons-sheet .overflow-hidden { overflow: visible !important; }
            /* Rev 15.21 — a multi-page invoice cannot use the flex "fill the page"
               wrapper: the table must fragment normally and the totals + closing line
               must come after it, once, on the last page. */
            #cons-sheet:not(.a4-one-page) > div:has(> table),
            #invoice-a4-sheet:not(.a4-one-page) > div:has(> table) { display: block !important; }
            #cons-sheet:not(.a4-one-page) > div:has(> table) > .mt-auto,
            #invoice-a4-sheet:not(.a4-one-page) > div:has(> table) > .mt-auto { margin-top: 0 !important; }
            /* Rev 15.54 (owner) — the closing thank-you block (mt-auto pt-8) added 32px of
               dead space at the bottom of a one-page sheet, which alone was enough to
               push a nearly-full invoice onto a second page. The block is now pinned to
               the bottom of the page by the flex layout instead. */
            #invoice-a4-sheet.a4-one-page > .mt-auto.pt-8,
            #cons-sheet.a4-one-page > .mt-auto.pt-8 {
                padding-top: 0 !important;
                page-break-after: avoid !important;
                break-after: avoid !important;
            }
            /* Rev 15.54 — a sheet that fits one page never leaves a break behind it. */
            #invoice-a4-sheet.a4-one-page,
            #cons-sheet.a4-one-page {
                page-break-after: avoid !important;
                break-after: avoid !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            #delivery-report-sheet .grid.grid-cols-2,
            #delivery-report-sheet .border.border-slate-200 {
                page-break-inside: auto !important;
            }
            /* Rev 12.01: the delivery report packs the VIN plate + both key photos into one
               row, and the print photo height now matches the preview (112px) so the whole
               report fits on ONE Letter page and the preview === print. */
            #delivery-report-sheet .grid img {
                height: 112px !important;
                width: auto !important;
                max-width: 100% !important;
            }
            .print-hide {
                display: none !important;
            }
        }

@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

@keyframes ott-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.ott-spin{animation:ott-spin 0.8s linear infinite;transform-origin:50% 50%}@media (prefers-reduced-motion:reduce){.ott-spin{animation:none}}

.ott-x-btn{display:inline-flex;align-items:center;justify-content:center;background-color:#1e293b;border:1px solid #334155;border-radius:7px;color:#94a3b8;padding:4px;transition:all .15s;z-index:20;flex-shrink:0}.ott-x-btn:hover{color:#fff;background-color:#334155}.ott-x-btn svg{width:12px;height:12px}html[data-theme="light"] .ott-x-btn{background-color:#cbd5e1;border-color:#94a3b8;color:#1e293b}html[data-theme="light"] .ott-x-btn:hover{background-color:#94a3b8;color:#0f172a}

.ott-x-btn-abs{position:absolute;top:4px;left:4px;right:auto}

.ott-tap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;position:relative}
.ott-tap-xs{min-width:44px;min-height:32px;padding:0 6px}
.ott-tap-sm{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:44px;padding:0 6px;position:relative}
.ott-tap-row{min-height:44px;padding-top:8px;padding-bottom:8px}
.ott-tap-check{width:22px;height:22px;cursor:pointer}
@media (pointer:coarse){.ott-tap-check{width:26px;height:26px}}
html[dir="rtl"] .ott-tap-xs{padding:0 6px}

.ott-sr-hit{background-color:rgba(56,189,248,.22);color:#7dd3fc;border-radius:3px;padding:0 1px;font-weight:700}
html[data-theme="light"] .ott-sr-hit{background-color:rgba(2,132,199,.18);color:#075985}
#global-search-results::-webkit-scrollbar{width:6px}
#global-search-results::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}

/* Rev 13.13 — the order title block is RED again (the light-grey change was
   reverted). The green stays for a delivered order. */
.ott-banner-red{background-color:#dc2626 !important;color:#ffffff !important;border-color:#b91c1c !important}
.ott-banner-red *{color:#ffffff !important}
html[data-theme="light"] .ott-banner-red{background-color:#dc2626 !important;color:#ffffff !important;border-color:#b91c1c !important}
html[data-theme="light"] .ott-banner-red *{color:#ffffff !important}
.ott-banner-green{background-color:#16a34a !important;color:#ffffff !important;border-color:#15803d !important}
.ott-banner-red *,.ott-banner-green *{color:#ffffff !important}
html[data-theme="light"] .ott-banner-red *,
html[data-theme="light"] .ott-banner-green *{color:#ffffff !important}
.ott-banner-red svg,.ott-banner-green svg{color:#ffffff !important;stroke:#ffffff}
/* Rev 13.62 — RED = MULTI LOCATION ONLY (owner agreement): a live, non-split
   order wears its STATUS colour (Booked sky / Loaded indigo / ...) fed through
   the inline --ott-st-bg variable by applyDriverTitleColors, with white text in
   BOTH themes — the light twins below TIE with the day-theme .text-white /
   .text-slate-* remaps and win by coming later in the sheet. */
.ott-banner-status{background:var(--ott-st-bg,#0f172a) !important;border-color:var(--ott-st-bg,#0f172a) !important;color:#ffffff !important}
.ott-banner-status *{color:#ffffff !important}
.ott-banner-status svg{stroke:#ffffff !important}
html[data-theme="light"] .ott-banner-status{background:var(--ott-st-bg,#0f172a) !important;border-color:var(--ott-st-bg,#0f172a) !important;color:#ffffff !important}
html[data-theme="light"] .ott-banner-status *{color:#ffffff !important}
html[data-theme="light"] .ott-banner-status svg{stroke:#ffffff !important}
/* Rev 12.71 — a DELIVERED status pill wears the delivered block's colours:
   solid green background + white text, in the light theme too. */
.ott-delivered-pill{color:#ffffff !important}
.ott-delivered-pill *{color:#ffffff !important}
html[data-theme="light"] .ott-delivered-pill{color:#ffffff !important}
html[data-theme="light"] .ott-delivered-pill *{color:#ffffff !important}
/* Rev 12.74 — a camera button turns GREEN with a WHITE icon once the photo
   was taken, so it looks exactly like the delivered block. */
/* Rev 13.34 — a TEST order row in the office orders table keeps its own
   background (amber) in BOTH themes so it is never taken for a real order. */
.ott-row-test{background-color:rgba(251,191,36,.16) !important}
.ott-row-test:hover{background-color:rgba(251,191,36,.30) !important}
html[data-theme="light"] .ott-row-test{background-color:#fef3c7 !important}
html[data-theme="light"] .ott-row-test:hover{background-color:#fde68a !important}
/* Rev 14.33 — Unbilled Revenue rows and cash-sale rows in the office orders
   table, in BOTH themes. AMBER = delivered/paid but not on any consolidated
   invoice yet (stop a forgotten bill). SLATE/GREY = cash sale, no customer
   invoice, internal record only (keeps it out of the invoice stream). */
.ott-row-unbilled{background-color:rgba(245,158,11,.14) !important}
.ott-row-unbilled:hover{background-color:rgba(245,158,11,.26) !important}
html[data-theme="light"] .ott-row-unbilled{background-color:#fef3c7 !important}
html[data-theme="light"] .ott-row-unbilled:hover{background-color:#fde68a !important}
.ott-row-cash{background-color:rgba(100,116,139,.22) !important}
.ott-row-cash:hover{background-color:rgba(100,116,139,.34) !important}
html[data-theme="light"] .ott-row-cash{background-color:#e2e8f0 !important}
html[data-theme="light"] .ott-row-cash:hover{background-color:#cbd5e1 !important}
/* The cash row keeps a readable dark-on-light contrast in the light theme. */
html[data-theme="light"] .ott-row-cash td{color:#1e293b !important}
html[data-theme="light"] .ott-row-cash .text-white,
html[data-theme="light"] .ott-row-cash .text-slate-300,
html[data-theme="light"] .ott-row-cash .text-slate-400{color:#0f172a !important}
.ott-photo-done{background-color:#16a34a !important;border-color:#15803d !important;color:#ffffff !important}
.ott-photo-done *{color:#ffffff !important}
.ott-photo-done svg{color:#ffffff !important;stroke:#ffffff}
html[data-theme="light"] .ott-photo-done{background-color:#16a34a !important;border-color:#15803d !important;color:#ffffff !important}
html[data-theme="light"] .ott-photo-done *{color:#ffffff !important}
html[data-theme="light"] .ott-photo-done svg{color:#ffffff !important;stroke:#ffffff}
/* Rev 12.75 — BEFORE the photo is taken the camera button is RED with a
   WHITE icon (after the photo it turns green). */
.ott-photo-todo{background-color:#dc2626 !important;border-color:#b91c1c !important;color:#ffffff !important}
.ott-photo-todo *{color:#ffffff !important}
.ott-photo-todo svg{color:#ffffff !important;stroke:#ffffff}
html[data-theme="light"] .ott-photo-todo{background-color:#dc2626 !important;border-color:#b91c1c !important;color:#ffffff !important}
html[data-theme="light"] .ott-photo-todo *{color:#ffffff !important}
html[data-theme="light"] .ott-photo-todo svg{color:#ffffff !important;stroke:#ffffff}
/* Rev 13.33 — the VIN-plate camera button is BLUE (not red) so it is never
   confused with the red "photo still missing" buttons. */
.ott-photo-blue{background-color:#2563eb !important;border-color:#1d4ed8 !important;color:#ffffff !important}
.ott-photo-blue *{color:#ffffff !important}
.ott-photo-blue svg{color:#ffffff !important;stroke:#ffffff}
.ott-photo-blue:hover{background-color:#1d4ed8 !important}
html[data-theme="light"] .ott-photo-blue{background-color:#2563eb !important;border-color:#1d4ed8 !important;color:#ffffff !important}
html[data-theme="light"] .ott-photo-blue *{color:#ffffff !important}
html[data-theme="light"] .ott-photo-blue svg{color:#ffffff !important;stroke:#ffffff}
/* Rev 12.76 — a CLOSED unit shows a CHEVRON (tap to open it); an OPEN unit
   keeps the X (tap to close it). The chevron is light blue so it reads as
   "expand this". */
.ott-open-btn{color:#7dd3fc !important}
.ott-open-btn svg{color:#7dd3fc !important;stroke:#7dd3fc}
.ott-open-btn:hover{color:#e0f2fe !important;background-color:#334155 !important}
.ott-open-btn:hover svg{color:#e0f2fe !important;stroke:#e0f2fe}
html[data-theme="light"] .ott-open-btn{color:#0284c7 !important;background-color:#e2e8f0 !important;border-color:#94a3b8 !important}
html[data-theme="light"] .ott-open-btn svg{color:#0284c7 !important;stroke:#0284c7}
html[data-theme="light"] .ott-open-btn:hover{color:#0f172a !important;background-color:#cbd5e1 !important}
html[data-theme="light"] .ott-open-btn:hover svg{color:#0f172a !important;stroke:#0f172a}
/* Rev 12.79 — the VIN number is big and CLEARLY amber so the driver can read
   it at a glance. Bright amber on the dark theme, deep amber on the light one. */
.ott-vin-big{font-size:16px !important;font-weight:800 !important;letter-spacing:.5px;color:#fbbf24 !important}
html[data-theme="light"] .ott-vin-big{font-size:16px !important;font-weight:800 !important;letter-spacing:.5px;color:#d97706 !important}
/* Rev 13.01 — mixed text: every element marked dir="auto" decides its own
   direction from its first strong character (English -> LTR, Arabic -> RTL)
   and is isolated from the rest of the line. */
[dir="auto"]{unicode-bidi:isolate}
[dir="ltr"]{unicode-bidi:isolate}
/* Rev 13.02 — the unit progress row (? VIN — ? ??????? — ? 4/4 ???) reads from
   RIGHT to LEFT in the Arabic build. It needs !important because the global
   "monospace stays LTR" rule (html[dir=rtl] .font-mono) would flip it back. */
.ott-progress-row{direction:rtl !important;unicode-bidi:isolate}
/* Rev 13.04 — the signature call-to-action card (professional look in BOTH themes). */
.ott-sig-card{background-color:#0b1f2d !important;background-image:linear-gradient(to left, rgba(14,116,144,.5), rgba(15,23,42,.4)) !important;border-color:rgba(56,189,248,.45) !important;box-shadow:0 1px 3px rgba(0,0,0,.35) !important}
.ott-sig-card:hover{background-image:linear-gradient(to left, rgba(14,116,144,.68), rgba(15,23,42,.5)) !important;border-color:#38bdf8 !important;box-shadow:0 8px 20px rgba(2,132,199,.28) !important}
.ott-sig-tile{background-color:rgba(56,189,248,.16) !important;border-color:rgba(56,189,248,.4) !important}
html[data-theme="light"] .ott-sig-card{background-color:#f0f9ff !important;background-image:linear-gradient(to left, #e0f2fe, #f8fafc) !important;border-color:#7dd3fc !important;box-shadow:0 1px 3px rgba(2,132,199,.16) !important}
html[data-theme="light"] .ott-sig-card:hover{background-image:linear-gradient(to left, #d3ecff, #eef6ff) !important;border-color:#38bdf8 !important;box-shadow:0 8px 20px rgba(2,132,199,.22) !important}
html[data-theme="light"] .ott-sig-tile{background-color:#e0f2fe !important;border-color:#7dd3fc !important}
/* Rev 13.09 — the driver app colour codes the photo sections:
   PICKUP = light red, DROP-OFF = light green. The whole section carries the tint. */
.ott-ph-grid-pickup{background-color:rgba(254,226,226,.62) !important;border-color:rgba(248,113,113,.55) !important;border-radius:14px !important;padding:10px !important;margin-top:10px}
.ott-ph-grid-drop{background-color:rgba(220,252,231,.62) !important;border-color:rgba(74,222,128,.55) !important;border-radius:14px !important;padding:10px !important;margin-top:10px}
.ott-ph-grid-pickup .text-sky-400,.ott-ph-grid-pickup .text-sky-300{color:#b91c1c !important}
html[data-theme="light"] .ott-ph-grid-pickup{background-color:rgba(254,226,226,.85) !important;border-color:rgba(248,113,113,.7) !important}
html[data-theme="light"] .ott-ph-grid-drop{background-color:rgba(220,252,231,.85) !important;border-color:rgba(74,222,128,.7) !important}
/* Rev 13.56 — the day-theme .text-sky-400 remap outranks the grid rule above,
   so the pickup title (and its package icon) would go sky-blue on the light
   red panel; keep them RED like the dark theme does. */
html[data-theme="light"] .ott-ph-grid-pickup .text-sky-400,html[data-theme="light"] .ott-ph-grid-pickup p.flex{color:#991b1b !important}
/* Rev 13.57 (P2) — stage dimming: a photo stage that is NOT the one the driver
   should work on right now steps back (grayscale + softer) but stays readable
   and tappable — e.g. the pickup grid after the drop-off stage began. */
.ott-stage-dim{opacity:.72;filter:grayscale(.65)}
/* Rev 13.57 — the route block's "upcoming" circles share the day-theme
   .bg-slate-800 remap (#e2e8f0) with the block itself, so in the light theme
   they would vanish: white with a real border keeps them visible. */
html[data-theme="light"] #driver-route-block .ott-route-pending{background:#ffffff !important;border:1px solid #cbd5e1}
/* Rev 14.64 (owner) — the stage labels in the in-card indicator read at 12px on a
   normal phone (the driver-app 11px convention), but a narrow phone cannot fit the
   long Arabic "waiting for pickup" label at 12px on one line, so there it drops to
   11px. Either way it is bigger than the old 10px and stays on one line, and this
   rule comes after the 11px override so it wins. */
@media (max-width:380px){#driver-route-block .ott-stage-label{font-size:11px !important}}
/* Rev 14.69 (owner) -- the driver header stays at the top while the screen scrolls:
   the order card and every field glide underneath it. The 6px ring in the frame
   colour seals the rounded corners and the gutters (nothing shows through the
   seam) and a soft shadow separates the bar from the content. */
#driver-app-main > .ott-drv-top{position:sticky;top:0;z-index:30;background-color:#0f172a;box-shadow:0 0 0 6px #020617,0 8px 18px rgba(2,6,23,.55)}
html[data-theme="light"] #driver-app-main > .ott-drv-top{background-color:#eef2f7;box-shadow:0 0 0 6px #ffffff,0 8px 18px rgba(15,23,42,.16)}
/* Rev 14.74 (owner) — the four-stage progress bar (with the per-stage vehicle counts)
   stays under the sticky driver header while the page scrolls, so the driver keeps
   seeing pickup / loading / drop-off progress without scrolling back up. Its top
   offset is measured from the header itself (drvSyncStickyTop), so it always sits
   exactly below it, and its background is solid so the cards slide underneath. */
#driver-route-block{position:sticky;top:62px;z-index:25;background-color:#020617 !important;box-shadow:0 8px 16px rgba(2,6,23,.45)}
html[data-theme="light"] #driver-route-block{background-color:#ffffff !important;box-shadow:0 8px 16px rgba(15,23,42,.12)}
/* Rev 14.80 (owner) — a VIN that already exists on another order is painted SOLID RED
   in the new-order form, so a duplicated car can be seen at a glance.
   Rev 14.81 — the day-theme remaps (`html[data-theme="light"] .bg-slate-900{...!important}`)
   outranked this rule, so the field stayed light; the selector now matches their weight. */
html[data-theme] .veh-vin.ott-vin-dup{background-color:#dc2626 !important;border-color:#991b1b !important;color:#ffffff !important;box-shadow:0 0 0 2px rgba(220,38,38,.35) !important}
html[data-theme] .veh-vin.ott-vin-dup::placeholder{color:#fecaca !important}
/* Rev 14.66/14.67 (owner) -- the order card reads as a compact two-column table.
   Rev 14.68 (owner) -- the SAME table now drives the English card too, mirrored
   for LTR: the labels form one left-hand column and the values one right-hand
   column, so every value starts on the same vertical line in both languages.
   The labels align to the reading start (right in Arabic, left in English) and
   the values are English in both languages, so they always read left to right
   and sit on the left edge of their column. The close button gets its own 28px
   strip at the top, so the first row lines up with the rest instead of being
   pushed in by 32px. */
#driver-order-details-card{padding-top:28px}
#driver-order-details-card .ott-kv{display:grid;grid-template-columns:108px 1fr;column-gap:8px;align-items:baseline;padding-left:0}
#driver-order-details-card .ott-kv-label{display:block;width:auto;min-width:0;margin:0;text-align:start;font-size:11px;line-height:1.5}
#driver-order-details-card .ott-kv>:not(.ott-kv-label):not(#mob-fleet){display:block;width:100%;max-width:100%;margin:0;text-align:left !important;line-height:1.5}
html[dir="rtl"] #driver-order-details-card #mob-fleet{justify-self:end}
html[dir="ltr"] #driver-order-details-card #mob-fleet{justify-self:start}
/* Rev 13.23 — the text inside the coloured photo sections matches the
   background: dark green on the light green, dark red on the light red.
   The photo buttons keep their white icon. */
.ott-ph-grid-drop p,.ott-ph-grid-drop span,.ott-ph-grid-drop div>span{color:#065f46 !important}
.ott-ph-grid-drop button,.ott-ph-grid-drop button *{color:#ffffff !important}
.ott-ph-grid-pickup p,.ott-ph-grid-pickup span,.ott-ph-grid-pickup div>span{color:#991b1b !important}
.ott-ph-grid-pickup button,.ott-ph-grid-pickup button *{color:#ffffff !important}
/* Rev 13.14 — the "done" tab of a completed photo stage: green with white text. */
.ott-del-tab-done{background-color:#16a34a !important;color:#ffffff !important;border-radius:9px !important;padding:4px 10px !important;display:inline-block !important;box-shadow:0 1px 3px rgba(0,0,0,.25) !important}
.ott-del-tab-done *{color:#ffffff !important}
.ott-del-tab-done svg{color:#ffffff !important;stroke:#ffffff}
/* Rev 14.44 — the driver status bar (order status + "Send status & updates")
   NO LONGER sticks to the screen. It floats with the page in normal flow at the
   bottom of the order card, so it scrolls out of sight like any other content
   and he only meets it again at the end of the card (he was losing his place
   behind the pinned bar). Nothing pads #driver-app-main any more. */
#driver-action-bar{background:rgba(2,6,23,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #1e293b;border-radius:14px;padding:10px 12px}
html[data-theme="light"] #driver-action-bar{background:rgba(238,242,247,.97);border-color:#cbd5e1}
/* Rev 13.16 — the vehicle separator band keeps WHITE text in every theme
   (the light theme turns .text-white dark). */
.ott-sep-band *{color:#ffffff !important}
.ott-sep-band svg{color:#ffffff !important;stroke:#ffffff}
/* Rev 13.48 — inside the Android shell the app IS already installed, so the
   "Install" PWA button never shows (beforeinstallprompt never fires there). */
html.ott-native #drv-install-btn{display:none !important}
/* Rev 13.42 — the vehicle card header (the dark blue band that replaced the
   separate separator strip): one block, no repeated text.
   Rev 14.54 (owner) — the band is LIGHT GREEN with dark green text.
   Rev 14.55 (owner) — the colours are now the EXACT pair of the chosen order
   title under "Select Active Order": a FLAT #dcfce7 background and #065f46
   text (measured on the live picker button, not an approximation). No
   gradient, no second shade: every card, delivered or not, uses this pair. */
.ott-veh-head{background:#dcfce7 !important;border-bottom:1px solid #86efac}
.ott-veh-head *{color:#065f46 !important}
.ott-veh-head svg{color:#065f46 !important;stroke:#065f46}
/* the dark round close/check button keeps a light face on the light band */
.ott-veh-head .ott-x-btn{background-color:#ffffff !important;border-color:#86efac !important}
.ott-veh-head .ott-x-btn svg{color:#047857 !important;stroke:#047857}
/* Rev 14.45 (owner) - the VIN came back inside the vehicle-card header.
   Rev 14.46 (owner) - line 1 read: NUMBER, REFERENCE, DESCRIPTION, then the VIN.
   Rev 14.48 (owner) - that order is kept but the VIN moved back DOWN under the
   Step-1 VIN validation box, and the order-STATUS tag took its place at the far
   right of line 1. The status tag is a normal (in-flow) item of that line, the
   LAST one, pushed to the right edge; the description is the only item that
   shortens, so the status word is never cut and never wraps.
   While the card is CLOSED the 17-digit VIN shows as a compact pill under the
   header (.ott-veh-vinmini), so a collapsed card still shows its VIN;
   toggleUnitCard hides that copy as soon as the card opens (the full-size VIN
   under the Step-1 box takes over). Both are tap-to-copy buttons.
   Rev 14.53 (owner) - the status tag joined that compact row, and the compact
   VIN stopped flickering; only the big VIN under the Step-1 box blinks now.
   Rev 14.54 (owner) - the band is light green with dark green text, so the
   selectors below must outrank ".ott-veh-head *{color:#065f46 !important}". */
.ott-veh-line{min-height:1.5em;letter-spacing:-.3px}
.ott-veh-stage{flex:0 0 auto;margin-inline-start:auto;font-size:12px;line-height:1.3;font-weight:800;letter-spacing:.2px;white-space:nowrap;border-radius:999px;padding:2px 9px;text-align:center;border:1px solid}
.ott-stage-booked{color:#7dd3fc !important;background-color:rgba(2,132,199,.24) !important;border-color:rgba(56,189,248,.60) !important}
.ott-stage-active{color:#fcd34d !important;background-color:rgba(217,119,6,.26) !important;border-color:rgba(251,191,36,.60) !important}
.ott-stage-done{color:#86efac !important;background-color:rgba(22,163,74,.28) !important;border-color:rgba(134,239,172,.65) !important}
.ott-stage-other{color:#cbd5e1 !important;background-color:rgba(71,85,105,.32) !important;border-color:rgba(148,163,184,.60) !important}
.ott-veh-vinmini{padding:0 2px 3px 30px}
.ott-vin-line{margin-top:3px}
.ott-vin-chip{flex:0 0 auto;font-size:13px !important;line-height:1.25;font-weight:800;letter-spacing:.3px;white-space:nowrap;border-radius:6px;padding:2px 7px;color:#fbbf24 !important;background-color:rgba(74,222,128,.16) !important;border:1px solid rgba(74,222,128,.55) !important;text-align:center;cursor:pointer}
/* Rev 14.50 (owner) - the VIN under the Step-1 box is the one the driver reads while
   working on the car, so it is clearly bigger than the small header summary. */
.ott-vin-line .ott-vin-chip{font-size:17px !important;letter-spacing:.8px;padding:4px 11px;border-radius:8px}
/* Rev 14.56 (owner) — the small VIN on the card header has NO pill of its own:
   transparent background, no border, no side padding, so it reads as part of
   the header band in exactly the header's colour. It is still a button (a tap
   copies the number) and the big VIN under the Step-1 box keeps its warm pill. */
.ott-veh-head .ott-vin-chip{color:#065f46 !important;background-color:transparent !important;border-color:transparent !important;padding-left:0 !important;padding-right:0 !important;border-radius:0 !important}
/* day theme: the big VIN under the Step-1 box keeps its warm amber pill */
html[data-theme="light"] .ott-vin-line .ott-vin-chip{color:#b45309 !important;background-color:#dcfce7 !important;border-color:#86efac !important}
/* Rev 14.54 (owner) — the status tag sits on the light green band now, so its
   colours are fixed for BOTH themes: blue for a job to pick up, amber while
   the car is moving, SOLID GREEN (white text) once it is delivered, grey for
   anything else. The solid green cannot be confused with the light band. */
.ott-veh-head .ott-stage-booked{color:#075985 !important;background-color:#e0f2fe !important;border-color:#7dd3fc !important}
.ott-veh-head .ott-stage-active{color:#92400e !important;background-color:#fef3c7 !important;border-color:#fcd34d !important}
.ott-veh-head .ott-stage-done{color:#ffffff !important;background-color:#16a34a !important;border-color:#15803d !important}
.ott-veh-head .ott-stage-other{color:#334155 !important;background-color:#e2e8f0 !important;border-color:#cbd5e1 !important}
/* Rev 13.38 — the vehicle card is NOT painted green any more (it was solid
   green, now it keeps its own background like before — the white ? badge is
   the "completed" marker). The green moved to the MAIN order header, and it is
   a LIGHT green with a matching dark green text. */
#driver-units-list .ott-unit-done .unit-card-strip{background-color:#dcfce7 !important}
#driver-units-list .ott-unit-done .unit-card-strip *{color:#065f46 !important}
#driver-units-list .ott-unit-done .unit-card-strip button{color:#065f46 !important}
#driver-units-list .ott-unit-done .unit-card-strip button:hover{color:#15803d !important}
.ott-unit-done-btn{background-color:#ffffff !important;border-color:#ffffff !important;color:#16a34a !important}
.ott-unit-done-btn svg{color:#16a34a !important;stroke:#16a34a}
.ott-unit-done-btn:hover{background-color:#ecfdf5 !important;color:#15803d !important}
/* Rev 14.27 (owner) — a DELIVERED vehicle (this unit's own status, even if the
   whole order is still in progress) wears the SAME green as the drop-off
   address chip: the header band, the outer border and a soft green body. */
#driver-units-list .unit-card.ott-veh-delivered{border-color:#15803d !important}
/* Rev 14.54 (owner) — a delivered car kept a deeper green band.
   Rev 14.55 (owner) — no: the owner asked for the SAME band as the order
   title on every card, so a delivered car is marked by the darker card
   border, the solid green "delivered" tag and the white ? button instead of
   a different green. */
#driver-units-list .unit-card.ott-veh-delivered .ott-veh-head{background:#dcfce7 !important;border-bottom:1px solid #16a34a}
#driver-units-list .unit-card.ott-veh-delivered .unit-card-body{background-color:rgba(22,163,74,.12)}
html[data-theme="light"] #driver-units-list .unit-card.ott-veh-delivered{background-color:#f0fdf4 !important;border-color:#16a34a !important}
html[data-theme="light"] #driver-units-list .unit-card.ott-veh-delivered .unit-card-body{background-color:#f0fdf4}
/* Rev 14.41 (owner) — the bar that holds a car's status drop-down takes the
   car's own status colour (sky = booked, amber = on the move, green = done).
   The day theme uses the soft version of each so the dark <select> keeps its
   white text and the bar never glares. */
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Delivered"],
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Paid"],
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Paid in CASH"]{background-color:#dcfce7 !important;border-top-color:#16a34a !important;border-left-color:#16a34a !important}
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Booked"]{background-color:#e0f2fe !important;border-top-color:#0284c7 !important;border-left-color:#0284c7 !important}
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Picked"],
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="In Transit"]{background-color:#fef3c7 !important;border-top-color:#d97706 !important;border-left-color:#d97706 !important}
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Cancelled"]{background-color:#ffe4e6 !important;border-top-color:#e11d48 !important;border-left-color:#e11d48 !important}
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state="Quote"],
html[data-theme="light"] #driver-units-list .unit-status-bar[data-bar-state=""]{background-color:#f1f5f9 !important;border-top-color:#94a3b8 !important;border-left-color:#94a3b8 !important}
.ott-banner-green{background-color:#dcfce7 !important;color:#065f46 !important;border-color:#86efac !important}
.ott-banner-green *{color:#065f46 !important}
.ott-banner-green svg{color:#065f46 !important;stroke:#065f46 !important}
html[data-theme="light"] .ott-banner-green{background-color:#dcfce7 !important;color:#065f46 !important;border-color:#86efac !important}
html[data-theme="light"] .ott-banner-green *{color:#065f46 !important}
html[data-theme="light"] .ott-banner-green svg{color:#065f46 !important;stroke:#065f46 !important}
/* Rev 12.83 — the pickup / drop-off address chips: SOLID red for the pickup
   and SOLID green for the drop-off, white text in both. */
.ott-bg-red{background-color:#dc2626 !important;border-color:#b91c1c !important;color:#ffffff !important}
.ott-bg-red *{color:#ffffff !important}
html[data-theme="light"] .ott-bg-red{background-color:#dc2626 !important;border-color:#b91c1c !important;color:#ffffff !important}
html[data-theme="light"] .ott-bg-red *{color:#ffffff !important}
.ott-bg-green{background-color:#16a34a !important;border-color:#15803d !important;color:#ffffff !important}
.ott-bg-green *{color:#ffffff !important}
html[data-theme="light"] .ott-bg-green{background-color:#16a34a !important;border-color:#15803d !important;color:#ffffff !important}
html[data-theme="light"] .ott-bg-green *{color:#ffffff !important}
/* Rev 13.60 — the MISSING-PHOTOS strip becomes a hazard beacon: SOLID red card
   with WHITE text in BOTH themes (the old amber markup showed a muddy brown in
   the light theme) plus a slow flicker between bright red and deep red like a
   warning lamp (~0.9 Hz — safely under the 3 Hz flash threshold; honours
   prefers-reduced-motion). The background is deliberately NOT !important: an
   important declaration outranks keyframes and would freeze the flicker — the
   ID selectors below still beat every light-theme utility remap that targets
   the strip's markup classes. With .animate-pulse (the 60 s re-highlight) the
   Tailwind opacity pulse is composed AFTER the flicker; a missing keyframe
   name degrades gracefully to the flicker alone. */
#driver-photos-alert-block{background:#dc2626;border-color:#b91c1c !important}
#driver-photos-alert-block *{color:#ffffff !important}
#driver-photos-alert-block svg{stroke:#ffffff !important}
#driver-photos-alert-block:not(.hidden){animation:ott-alert-flick 1.1s steps(1,end) infinite}
#driver-photos-alert-block.animate-pulse:not(.hidden){animation:ott-alert-flick 1.1s steps(1,end) infinite, pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes ott-alert-flick{0%,49%{background-color:#dc2626}50%,100%{background-color:#991b1b}}
/* Rev 13.68 — the big VIN number flickers (amber <-> white) so the driver
   notices it. <3 Hz, honours prefers-reduced-motion.
   Rev 14.47 (owner) - the flicker was too fast; it is now a slow breathing
   pulse: a full amber -> white -> amber cycle takes 3 s, 0.67 Hz.
   The comment below uses only ASCII dashes on purpose. */
@keyframes ott-vin-flicker{0%,100%{opacity:1;color:#fbbf24}50%{opacity:0.35;color:#ffffff}}
.ott-vin-flicker{animation:ott-vin-flicker 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ott-vin-flicker{animation:none}}
@media (prefers-reduced-motion:reduce){#driver-photos-alert-block:not(.hidden){animation:none}}