/* SHABAB RENT A CAR PRO 1.0.0 — navy + gold. LIGHT is the default, dark is an option (Theme Studio). Montserrat (English) + Tajawal (Arabic). Strict CSP: no inline styles. */
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-arabic-400-normal.woff2") format("woff2"); font-weight: 400; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-arabic-700-normal.woff2") format("woff2"); font-weight: 700; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-latin-400-normal.woff2") format("woff2"); font-weight: 400; unicode-range: U+0000-00FF; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-latin-700-normal.woff2") format("woff2"); font-weight: 700; unicode-range: U+0000-00FF; font-display: swap; }

:root { --navy: #0B2A5B; --navy2: #123C7C; --gold: #C9A227; --gold2: #E8C766; --bg: #F4F6FA; --card: #FFFFFF; --ink: #14213D; --muted: #5B6578; --line: #DDE3EC; --soft: #EEF2F8;
  --ok: #138A4B; --warn: #B7791F; --bad: #C0392B; --info: #1F6FB2; --bar-booking: #3D7BE0; --bar-contract: #0B2A5B; --bar-overdue: #C0392B; --bar-workshop: #8A8F99; --bar-done: #9DB3D6;
  --radius: 14px; --shadow: 0 2px 10px rgba(11, 42, 91, .08); --font: "Montserrat", "Tajawal", "Segoe UI", system-ui, Arial, sans-serif; color-scheme: light; }
:root[data-preset="royal"] { --navy: #1B2F7A; --navy2: #2A47B0; --gold: #D4AF37; }
:root[data-preset="desert"] { --navy: #3E2C1C; --navy2: #6B4A2B; --gold: #D9A441; --bg: #F8F4EE; }
:root[data-preset="emerald"] { --navy: #0E4D3A; --navy2: #17705A; --gold: #C9A227; }
:root[data-preset="graphite"] { --navy: #22262E; --navy2: #3A404B; --gold: #C9A227; }
:root[data-theme="dark"] { --bg: #0A1426; --card: #111F38; --ink: #E8EDF6; --muted: #9AA7BD; --line: #22365A; --soft: #16294A; --navy2: #2A5BAA; --shadow: 0 2px 12px rgba(0, 0, 0, .35); color-scheme: dark; }
html[lang="ar"] { --font: "Tajawal", "Montserrat", "Segoe UI", system-ui, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 14.5px/1.5 var(--font); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy2); }
:root[data-theme="dark"] a { color: var(--gold2); }
.num, .mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .bold { font-weight: 700; } .right { text-align: end; } .center { text-align: center; } .hide { display: none !important; } .nowrap { white-space: nowrap; }
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); } .warn-t { color: var(--warn); }
.boot { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- login */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(1200px 600px at 10% -10%, #fff7dc 0, transparent 60%), linear-gradient(160deg, var(--bg), var(--soft)); }
:root[data-theme="dark"] .auth { background: linear-gradient(160deg, #07101f, #0d1d38); }
.auth .box { width: 100%; max-width: 400px; background: var(--card); border-radius: 20px; box-shadow: 0 10px 40px rgba(11, 42, 91, .15); padding: 26px 24px 20px; border-top: 4px solid var(--gold); }
.auth .logo { display: block; margin: 0 auto 10px; height: 150px; width: auto; max-width: 100%; object-fit: contain; border-radius: 16px; }
.auth h1 { margin: 0; font-size: 17px; text-align: center; color: var(--navy); letter-spacing: .02em; }
:root[data-theme="dark"] .auth h1 { color: var(--gold2); }
.auth .sub { margin: 2px 0 14px; color: var(--muted); font-size: 13px; text-align: center; }
.auth .foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }

/* ---------- forms */
.field { display: block; margin: 0 0 11px; }
.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea, input.in, select.in { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-height: 42px; }
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, input.in:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; cursor: pointer; } .check input { width: 20px; height: 20px; accent-color: var(--navy); }
.pw-wrap { position: relative; display: block; } .pw-wrap input { padding-inline-end: 44px; }
.pw-eye { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pw-eye:hover { background: var(--soft); color: var(--navy); }
.msg { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; } .msg.err { background: #fdecea; color: #8e2318; } .msg.ok { background: #e7f6ee; color: #0f6a39; } .msg.warn { background: #fff5dc; color: #7a5410; } .msg.info { background: #e8f1fb; color: #154c7d; }
:root[data-theme="dark"] .msg.err { background: #3b1a17; color: #ffb4a8; } :root[data-theme="dark"] .msg.ok { background: #12301f; color: #9be3b8; } :root[data-theme="dark"] .msg.warn { background: #3a2c0c; color: #f6d48a; } :root[data-theme="dark"] .msg.info { background: #10294a; color: #a9cdf5; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: 10px; border: 1px solid transparent; background: var(--navy); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 42px; font-size: 14px; }
:root[data-theme="dark"] .btn { background: var(--navy2); color: #fff; }
.btn:hover { filter: brightness(1.1); } .btn:disabled { opacity: .55; cursor: default; }
.btn.gold { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1d1600; } .btn.ghost { background: transparent; color: var(--navy); border-color: var(--line); } :root[data-theme="dark"] .btn.ghost { color: var(--ink); }
.btn.danger { background: var(--bad); } .btn.ok { background: var(--ok); } .btn.sm { padding: 5px 10px; min-height: 34px; font-size: 13px; } .btn.block { width: 100%; }
a.btn, a.btn:visited { color: #fff; } a.btn.ghost, a.btn.ghost:visited { color: var(--navy); } :root[data-theme="dark"] a.btn.ghost { color: var(--ink); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; } .row.end { justify-content: flex-end; } .row .grow { flex: 1 1 auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; } .chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 13px; color: var(--ink); text-decoration: none; } .chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ib { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent; color: var(--gold); font: 700 12px/18px Georgia, serif; cursor: pointer; padding: 0; vertical-align: middle; margin-inline-start: 6px; }

/* ---------- shell */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(90deg, var(--navy), var(--navy2)); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); min-height: 58px; }
.top .brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; min-width: 0; } .top .brand img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: #fff; }
.top .brand b { font-size: 13.5px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; display: block; } .top .brand small { display: block; font-size: 11px; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.top .search { flex: 1 1 auto; max-width: 520px; margin-inline-start: auto; position: relative; } .top .search input { width: 100%; border-radius: 99px; border: 0; padding: 9px 16px; min-height: 40px; background: rgba(255, 255, 255, .95); color: #14213D; }
.top .tb { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 10px; min-height: 40px; min-width: 40px; padding: 0 10px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none; }
.top .tb:hover { background: rgba(255, 255, 255, .22); }
.sres { position: absolute; top: 46px; inset-inline: 0; background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, .25); max-height: 70vh; overflow: auto; z-index: 50; }
.sres a { display: flex; gap: 10px; padding: 9px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); align-items: center; } .sres a:hover, .sres a.sel { background: var(--soft); } .sres .k { font-size: 11px; color: #fff; background: var(--navy2); border-radius: 6px; padding: 1px 6px; text-transform: uppercase; } .sres .s { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.layout { display: grid; grid-template-columns: 236px 1fr; min-height: calc(100vh - 58px); }
.side { background: var(--card); border-inline-end: 1px solid var(--line); padding: 10px 8px; position: sticky; top: 58px; height: calc(100vh - 58px); overflow: auto; }
.side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 13.5px; margin-bottom: 2px; } .side a:hover { background: var(--soft); } .side a.on { background: var(--navy); color: #fff; }
.side a .ic { width: 28px; height: 28px; flex: none; } .side .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.main { padding: 16px 18px 60px; min-width: 0; max-width: 1400px; }
.pagehead { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; } .pagehead input.in, .pagehead select.in { width: auto; min-width: 140px; }
.pagehead h2 { margin: 0; font-size: 20px; color: var(--navy); } :root[data-theme="dark"] .pagehead h2 { color: var(--gold2); } .pagehead .sp { flex: 1; }
.navbtns { display: flex; gap: 6px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin: 0 0 14px; border: 1px solid var(--line); min-width: 0; } .card h3 { margin: 0 0 10px; font-size: 15px; color: var(--navy); display: flex; align-items: center; gap: 6px; } :root[data-theme="dark"] .card h3 { color: var(--gold2); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .cols > .card { margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--ink); white-space: nowrap; }
.badge.available, .badge.paid, .badge.closed, .badge.recharged, .badge.refunded { background: #dff3e8; color: #0f6a39; } .badge.on_rent, .badge.open, .badge.matched, .badge.held { background: #e3ecfb; color: #173f8a; } .badge.reserved, .badge.partial, .badge.converted { background: #fff1cf; color: #7a5410; } .badge.workshop, .badge.cancelled, .badge.no_show, .badge.waived, .badge.paid_by_company { background: #ebedf1; color: #4a5160; } .badge.overdue, .badge.unpaid, .badge.unmatched, .badge.bl, .badge.expired { background: #fde3df; color: #9b2216; }
:root[data-theme="dark"] .badge { filter: brightness(.9) saturate(1.1); }

/* ---------- tables (phone: cards, sb-mobile.js) */
.tw { overflow-x: auto; } table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.t th { text-align: start; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 8px; border-bottom: 2px solid var(--line); white-space: nowrap; } table.t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; } table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: var(--soft); } table.t td.r, table.t th.r { text-align: end; } table.t tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.empty { padding: 20px; text-align: center; color: var(--muted); }

/* ---------- NEXUS-style glossy tiles + KPI */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; font-size: 12.5px; font-weight: 600; transition: transform .12s; }
.tile:hover { transform: translateY(-2px); } .tile .gl { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy2), var(--navy)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 10px rgba(11, 42, 91, .25); border: 1.5px solid var(--gold); }
.tile .gl::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05)); border-radius: 16px 16px 40% 40%; }
.tile .gl svg { width: 30px; height: 30px; color: var(--gold2); position: relative; z-index: 1; } .tile .cnt { position: absolute; top: 6px; inset-inline-end: 8px; background: var(--bad); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 6px; min-width: 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); display: block; border-inline-start: 4px solid var(--gold); } .kpi b { display: block; font-size: 22px; color: var(--navy); line-height: 1.2; } :root[data-theme="dark"] .kpi b { color: var(--gold2); } .kpi span { font-size: 12px; color: var(--muted); } .kpi.bad { border-inline-start-color: var(--bad); } .kpi.ok { border-inline-start-color: var(--ok); } .kpi.info { border-inline-start-color: var(--info); }
.dash.v-compact .kpis { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; } .dash.v-compact .kpi { padding: 6px 9px; } .dash.v-compact .kpi b { font-size: 17px; } .dash.v-compact .tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .dash.v-compact .tile .gl { width: 44px; height: 44px; border-radius: 12px; } .dash.v-compact .tile .gl svg { width: 22px; height: 22px; } .dash.v-compact .tile { font-size: 11.5px; padding: 10px 4px 8px; }
.dash.v-list .tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .dash.v-list .tile { flex-direction: row; padding: 7px 10px; text-align: start; } .dash.v-list .tile .gl { width: 34px; height: 34px; border-radius: 10px; } .dash.v-list .tile .gl svg { width: 18px; height: 18px; } .dash.v-list .kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.meter { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 6px; } .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); }

/* ---------- timeline */
.tl { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tl .in { position: relative; min-width: 900px; } .tl .hd, .tl .ln { display: grid; grid-template-columns: 170px 1fr; } .tl .hd { position: sticky; top: 0; background: var(--soft); font-size: 11.5px; color: var(--muted); z-index: 2; } .tl .days { display: grid; } .tl .days div { border-inline-start: 1px solid var(--line); padding: 4px 2px; text-align: center; } .tl .days div.we { background: rgba(201, 162, 39, .08); } .tl .days div.td { background: rgba(201, 162, 39, .25); color: var(--ink); font-weight: 700; }
.tl .ln { border-top: 1px solid var(--line); min-height: 40px; } .tl .ln .cn { padding: 6px 8px; font-size: 12.5px; border-inline-end: 1px solid var(--line); } .tl .ln .cn b { display: block; } .tl .track { position: relative; } .tl .grid { position: absolute; inset: 0; display: grid; } .tl .grid div { border-inline-start: 1px dashed var(--line); }
.tl .bar { position: absolute; top: 6px; height: 28px; border-radius: 8px; color: #fff; font-size: 11.5px; padding: 0 8px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.tl .bar.booking { background: var(--bar-booking); } .tl .bar.contract { background: var(--bar-contract); border: 1px solid var(--gold); } .tl .bar.overdue { background: var(--bar-overdue); } .tl .bar.workshop { background: repeating-linear-gradient(45deg, var(--bar-workshop), var(--bar-workshop) 6px, #a3a8b1 6px, #a3a8b1 12px); } .tl .bar.done { background: var(--bar-done); color: #102a52; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0; } .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: middle; } .legend .booking { background: var(--bar-booking); } .legend .contract { background: var(--bar-contract); } .legend .overdue { background: var(--bar-overdue); } .legend .workshop { background: var(--bar-workshop); } .legend .done { background: var(--bar-done); }

/* ---------- check-out / check-in */
.steps { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; } .steps span { flex: 1 0 auto; text-align: center; padding: 6px 10px; border-radius: 99px; background: var(--soft); font-size: 12px; color: var(--muted); } .steps span.on { background: var(--navy); color: #fff; } .steps span.done { background: var(--gold); color: #1d1600; }
.fuel { display: flex; gap: 4px; } .fuel button { flex: 1; min-height: 40px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font-size: 12px; } .fuel button.on { background: var(--gold); border-color: var(--gold); color: #1d1600; font-weight: 700; } .fuel button.lo.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.dmg { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .dmg svg { width: 230px; max-width: 100%; height: auto; background: var(--soft); border-radius: 14px; border: 1px solid var(--line); touch-action: manipulation; cursor: crosshair; } .dmg .types { display: flex; flex-direction: column; gap: 6px; } .dmg .types button { min-width: 120px; }
.dmg .mk circle { stroke: #fff; stroke-width: 1.5; } .dmg .mk.old circle { fill: #8A8F99; } .dmg .mk.new circle { fill: var(--bad); } .dmg .mk text { fill: #fff; font: 700 11px var(--font); }
.carbody { fill: #fff; stroke: var(--navy); stroke-width: 2.2; } :root[data-theme="dark"] .carbody { fill: #1b2c4b; stroke: var(--gold2); } .carglass { fill: #cfe0f5; stroke: var(--navy); stroke-width: 1.2; } :root[data-theme="dark"] .carglass { fill: #2b4670; } .carwheel { fill: #333; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .thumbs img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.sig { width: 100%; max-width: 520px; height: 180px; border: 2px dashed var(--gold); border-radius: 12px; background: #fff; touch-action: none; display: block; }
.charges td:last-child { text-align: end; white-space: nowrap; } .charges tr.tot td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--navy); }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 18px; text-align: center; color: var(--muted); }

/* ---------- dialogs + toasts + hints (no alert / confirm / prompt) */
.dlg-back { position: fixed; inset: 0; background: rgba(5, 15, 35, .55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg { background: var(--card); color: var(--ink); border-radius: 18px; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); border-top: 4px solid var(--gold); } .dlg.wide { max-width: 860px; } .dlg .hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; } .dlg .hd h3 { margin: 0; font-size: 16px; color: var(--navy); flex: 1; } :root[data-theme="dark"] .dlg .hd h3 { color: var(--gold2); } .dlg .bd { padding: 6px 16px 10px; } .dlg .ft { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px 16px; flex-wrap: wrap; }
.once { font: 700 22px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .06em; background: #fff5dc; color: #5a3d00; padding: 12px; border-radius: 10px; text-align: center; user-select: all; direction: ltr; }
.toasts { position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); max-width: 360px; font-size: 13.5px; } .toast.err { background: var(--bad); } .toast.ok { background: var(--ok); }
.hint { font-size: 13.5px; } .hint .ex { background: var(--soft); border-inline-start: 3px solid var(--gold); padding: 8px 10px; border-radius: 8px; margin-top: 8px; white-space: pre-line; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; } .sw { width: 92px; border-radius: 12px; border: 2px solid var(--line); cursor: pointer; overflow: hidden; background: var(--card); padding: 0; } .sw.on { border-color: var(--gold); } .sw i { display: block; height: 34px; } .sw span { display: block; font-size: 11.5px; padding: 4px; }
.sw .p-navy-gold { background: linear-gradient(90deg, #0B2A5B 60%, #C9A227 60%); } .sw .p-royal { background: linear-gradient(90deg, #1B2F7A 60%, #D4AF37 60%); } .sw .p-desert { background: linear-gradient(90deg, #3E2C1C 60%, #D9A441 60%); } .sw .p-emerald { background: linear-gradient(90deg, #0E4D3A 60%, #C9A227 60%); } .sw .p-graphite { background: linear-gradient(90deg, #22262E 60%, #C9A227 60%); }
.imgprev { max-width: 100%; max-height: 90px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: block; margin: 6px 0; }

/* ---------- print documents (contract, invoice, reports). Screen shows an A4 sheet; Print = Save as PDF */
.doc-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.sheet { background: #fff; color: #111; width: 210mm; max-width: 100%; margin: 0 auto 20px; padding: 12mm 12mm 10mm; box-shadow: 0 4px 24px rgba(0, 0, 0, .15); font-size: 10.5pt; line-height: 1.38; font-family: "Montserrat", "Tajawal", Arial, sans-serif; }
.sheet .ar, .sheet [dir="rtl"] { font-family: "Tajawal", Arial, sans-serif; } .sheet h1 { font-size: 15pt; margin: 2mm 0 1mm; color: #0B2A5B; text-align: center; } .sheet h2 { font-size: 11pt; margin: 4mm 0 1.5mm; color: #0B2A5B; border-bottom: 1.5px solid #C9A227; padding-bottom: .8mm; display: flex; justify-content: space-between; gap: 6mm; }
.sheet .lh { display: flex; align-items: center; gap: 6mm; border-bottom: 2px solid #C9A227; padding-bottom: 3mm; margin-bottom: 3mm; } .sheet .lh img.lg { height: 22mm; width: auto; max-width: 40mm; object-fit: contain; } .sheet .lh .co { flex: 1; } .sheet .lh .co b { font-size: 13pt; color: #0B2A5B; display: block; } .sheet .lh .co div { font-size: 8.5pt; color: #444; } .sheet .lh .co.ar { text-align: right; }
.sheet img.lhimg { width: 100%; display: block; margin-bottom: 3mm; } .sheet img.ftimg { width: 100%; display: block; margin-top: 4mm; }
.sheet table.f { width: 100%; border-collapse: collapse; font-size: 9.5pt; } .sheet table.f td { border: 1px solid #c9ced8; padding: 1.3mm 2mm; vertical-align: top; } .sheet table.f td.l { width: 26%; color: #333; background: #f4f6fa; } .sheet table.f td.l.ar { text-align: right; } .sheet table.f td.v { font-weight: 600; }
.sheet table.lines { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-top: 2mm; } .sheet table.lines th { background: #0B2A5B; color: #fff; padding: 1.6mm 2mm; font-weight: 600; text-align: start; } .sheet table.lines td { border-bottom: 1px solid #d5dae3; padding: 1.4mm 2mm; } .sheet table.lines td.r, .sheet table.lines th.r { text-align: end; } .sheet table.lines tr.tot td { font-weight: 700; border-top: 2px solid #0B2A5B; } .sheet table.lines tr.grand td { font-weight: 700; font-size: 11pt; background: #fbf4dc; }
.sheet .terms { columns: 1; font-size: 7.6pt; line-height: 1.32; } .sheet .terms p { margin: 0 0 1.2mm; break-inside: avoid; } .sheet .terms.ar { direction: rtl; text-align: right; font-size: 8.2pt; }
.sheet .sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 5mm; } .sheet .sigs div { border-top: 1px solid #555; padding-top: 1.5mm; font-size: 9pt; min-height: 26mm; position: relative; } .sheet .sigs img.s { height: 20mm; display: block; } .sheet .sigs img.stamp { height: 26mm; position: absolute; inset-inline-end: 0; top: -6mm; opacity: .9; }
.sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; } .sheet .dmgp { display: flex; gap: 4mm; align-items: flex-start; } .sheet .dmgp svg { width: 34mm; height: auto; border: 1px solid #ccc; border-radius: 3mm; } .sheet .prevails { text-align: center; font-weight: 700; font-size: 9pt; margin: 3mm 0 0; padding: 1.5mm; border: 1px solid #C9A227; background: #fffaf0; }
.sheet .foot { font-size: 7.5pt; color: #666; text-align: center; margin-top: 4mm; border-top: 1px solid #ddd; padding-top: 1.5mm; } .sheet .gauge { font-family: monospace; letter-spacing: 1px; } .sheet .ph { display: flex; flex-wrap: wrap; gap: 1.5mm; } .sheet .ph img { width: 22mm; height: 16mm; object-fit: cover; border: 1px solid #ccc; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; } .top, .side, .doc-tools, .toasts, .navbtns, .pagehead { display: none !important; } .layout { display: block; } .main { padding: 0; max-width: none; }
  .sheet { box-shadow: none; margin: 0; width: auto; padding: 10mm 12mm; } .sheet .pagebreak { break-before: page; }
}

/* ---------- phone */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; } .side { display: none; } .side.open { display: block; position: fixed; top: 58px; inset-inline-start: 0; width: 82%; max-width: 320px; z-index: 40; height: calc(100vh - 58px); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
  .main { padding: 12px 16px 70px; } .top { padding: 6px 10px; gap: 6px; } .top .brand > span { display: none; } .top .search { position: static; } .top .search input { min-height: 38px; padding: 7px 12px; } .sres { top: 56px; inset-inline: 8px; position: fixed; }
  .navbtns { display: flex; } .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } .cols { grid-template-columns: 1fr; } .pagehead h2 { font-size: 17px; }
  table.mcard, table.mcard tbody, table.mcard tr, table.mcard td { display: block; width: 100%; } table.mcard tr.mhead { display: none; } table.mcard tr { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 8px; padding: 6px 10px; background: var(--card); }
  table.mcard td { border: 0; padding: 3px 0; display: flex; gap: 10px; justify-content: space-between; text-align: end; } table.mcard td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: start; flex: none; } table.mcard td.nolab::before { content: none; } table.mcard tfoot tr { background: var(--soft); }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; } .tile { padding: 10px 4px; font-size: 11.5px; } .tile .gl { width: 48px; height: 48px; } .kpis { grid-template-columns: repeat(2, 1fr); }
  .sheet { padding: 6mm; font-size: 9.5pt; } .sheet .terms { columns: 1; } .sheet .two, .sheet .sigs { grid-template-columns: 1fr; } .tl .hd, .tl .ln { grid-template-columns: 110px 1fr; }
  .toasts { inset-inline: 12px; bottom: 12px; } .toast { max-width: none; }
}
@media (max-width: 420px) { .top .brand small { display: none; } .top .tb.opt { display: none; } }