/* LoadTrack - one stylesheet, phone first. */
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#F7F9FC; --border:#E2E7EF; --border-2:#CBD3DF;
  --text:#152033; --muted:#5B6B82; --faint:#8C9AAE;
  --brand:#0F6E8C; --brand-2:#0B5A73; --brand-soft:#E3F2F7;
  --ok:#16A34A; --ok-soft:#E6F6EC; --warn:#C27C0E; --warn-soft:#FFF4DE; --bad:#DC2626; --bad-soft:#FDECEC;
  --way:#2563EB; --way-soft:#E8EFFE;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 18px -8px rgba(16,24,40,.18);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0E141C; --surface:#151D28; --surface-2:#1A2431; --border:#253244; --border-2:#33445B;
    --text:#E7EDF5; --muted:#A3B1C4; --faint:#73839A; --brand:#38A9CC; --brand-2:#5BC0DE; --brand-soft:#123544;
    --ok-soft:#123222; --warn-soft:#3A2C10; --bad-soft:#3B1717; --way-soft:#16264A; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.45; }
a{ color:var(--brand); }
h1{ font-size:20px; margin:0; } h2{ font-size:16px; margin:0 0 10px; }
.wrap{ max-width:1100px; margin:0 auto; padding:14px 16px 90px; }

/* top bar */
.top{ position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border); }
.top-in{ max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; }
.logo{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--text); text-decoration:none; min-width:0; }
.logo img{ height:30px; width:auto; border-radius:6px; }
.logo .mark{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--brand),#22B8CF); color:#fff; display:grid; place-items:center; font-size:16px; flex:none; }
.logo .cname{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top .sp{ flex:1; }
.nav{ display:flex; gap:4px; }
.nav a{ text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; padding:8px 12px; border-radius:10px; }
.nav a.on, .nav a:hover{ background:var(--brand-soft); color:var(--brand-2); }
.me{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.me form{ margin:0; }
.linkbtn{ background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; padding:6px 8px; border-radius:8px; }
.linkbtn:hover{ background:var(--surface-2); color:var(--text); }

/* bottom tab bar on phones */
.tabs{ display:none; }
@media (max-width:760px){
  .nav{ display:none; }
  .me .who{ display:none; }
  .tabs{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--surface); border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabs a{ flex:1; text-align:center; text-decoration:none; color:var(--faint); font-size:11px; font-weight:600; padding:4px 0; border-radius:10px; }
  .tabs a .i{ display:block; font-size:20px; line-height:1.2; }
  .tabs a.on{ color:var(--brand); background:var(--brand-soft); }
}

/* panels, buttons, fields */
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px; }
.head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.head .sp{ flex:1; }
.sub{ color:var(--muted); font-size:13px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; border-radius:10px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text); font:inherit; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.btn:hover{ border-color:var(--brand); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-2); }
.btn.ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.danger{ color:var(--bad); border-color:var(--bad); background:var(--bad-soft); }
.btn.sm{ padding:6px 10px; font-size:13px; border-radius:8px; }
.btn.big{ padding:13px 18px; font-size:16px; width:100%; }
label{ display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin:0 0 5px; }
.field, select.field, textarea.field{ width:100%; padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; background:var(--surface-2);
  color:var(--text); font:inherit; font-size:15px; }
.field:focus{ outline:2px solid var(--brand); outline-offset:1px; background:var(--surface); }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px,100%),1fr)); gap:12px 14px; }
.full{ grid-column:1/-1; }
.err{ color:var(--bad); font-size:12.5px; margin-top:4px; }
.hint{ color:var(--faint); font-size:12px; margin-top:4px; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.chip{ border:1px solid #F3C89A; background:#FFF3E6; color:#9A4D0C; border-radius:999px; padding:5px 12px; font-weight:700; font-size:13px; cursor:pointer; }
.chip.on{ background:var(--ok); border-color:var(--ok); color:#fff; }

/* messages */
.msgs{ list-style:none; padding:0; margin:0 0 12px; }
.msgs li{ padding:10px 14px; border-radius:10px; margin-bottom:6px; font-size:14px; background:var(--brand-soft); border:1px solid var(--border); }
.msgs li.success{ background:var(--ok-soft); border-color:#9FD9B3; }
.msgs li.error{ background:var(--bad-soft); border-color:#F2B8B8; }
.msgs li.warning{ background:var(--warn-soft); border-color:#F0D29A; }

/* tables */
.tbl-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px 10px; border-bottom:2px solid var(--border); background:var(--surface-2); white-space:nowrap; }
.tbl td{ padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl td.n, .tbl th.n{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl tfoot td{ font-weight:800; background:var(--brand-soft); border-top:2px solid var(--brand); }
[dir=rtl] .tbl th, [dir=rtl] .tbl td{ text-align:right; } [dir=rtl] .tbl td.n{ text-align:left; }
.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.loading{ background:var(--warn-soft); color:var(--warn); } .pill.onway{ background:var(--way-soft); color:var(--way); }
.pill.offloaded{ background:var(--ok-soft); color:var(--ok); } .pill.bad{ background:var(--bad-soft); color:var(--bad); }
.pill.grey{ background:var(--surface-2); color:var(--muted); }

/* counters */
.counts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.count{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
.count b{ display:block; font-size:26px; font-weight:800; line-height:1.1; }
.count span{ font-size:12px; color:var(--muted); font-weight:600; }
.count.loading b{ color:var(--warn); } .count.onway b{ color:var(--way); } .count.offloaded b{ color:var(--ok); }
.count.sel{ outline:2px solid var(--brand); }
@media (max-width:520px){ .counts{ grid-template-columns:repeat(2,1fr); } }

/* truck cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); gap:12px; }
.card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 14px 12px 18px; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--sc, var(--border-2)); }
[dir=rtl] .card{ padding:14px 18px 12px 14px; } [dir=rtl] .card::before{ inset:0 0 0 auto; }
.card .r1{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.truck{ font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight:800; font-size:18px; letter-spacing:.02em; direction:ltr; unicode-bidi:isolate; }
.card .site{ font-weight:700; color:var(--sc, var(--text)); margin-top:4px; }
.card .what{ margin-top:4px; font-size:14px; } .card .what b{ font-size:16px; }
.card .meta{ margin-top:6px; font-size:12px; color:var(--faint); display:flex; gap:6px; flex-wrap:wrap; }
.card .acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); align-items:flex-end; }
.card .acts .field{ width:auto; }
.card.flash{ animation:flash 2.4s ease; }
@keyframes flash{ 0%,40%{ box-shadow:0 0 0 3px var(--ok), var(--shadow); } 100%{ box-shadow:var(--shadow); } }
.divider{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; color:var(--muted); font-weight:700; font-size:13px; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border-2); }
.empty{ text-align:center; color:var(--faint); padding:28px 10px; }
.filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.filters a, .filters button{ border:1px solid var(--border-2); background:var(--surface); color:var(--muted); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.filters .on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.stamp{ font-size:12px; color:var(--faint); }

/* login */
.auth{ min-height:100vh; display:grid; place-items:center; padding:16px; background:radial-gradient(1200px 600px at 10% -10%, var(--brand-soft), transparent), var(--bg); }
.auth .panel{ width:100%; max-width:380px; padding:26px; }
.auth h1{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.lang-switch{ font-size:13px; text-align:center; margin-top:14px; }
.lang-switch a{ margin:0 6px; }

/* Django form widgets inside .grid get the field look without extra classes */
.grid input:not([type=checkbox]):not([type=radio]):not([type=color]), .grid select, .grid textarea{ width:100%; padding:10px 12px; border:1px solid var(--border-2);
  border-radius:10px; background:var(--surface-2); color:var(--text); font:inherit; font-size:15px; }
.grid input[type=color]{ width:60px; height:40px; border:1px solid var(--border-2); border-radius:8px; padding:2px; background:var(--surface); }
.grid ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; }
.grid ul label{ display:flex; gap:8px; align-items:center; font-weight:500; color:var(--text); font-size:14px; margin:0; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.nonfield{ background:var(--bad-soft); border:1px solid #F2B8B8; color:var(--bad); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:14px; }

/* photo grid */
.photos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:12px; }
.photos figure{ margin:0; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.photos img{ display:block; width:100%; height:150px; object-fit:cover; background:#000; }
.photos figcaption{ padding:8px 10px; font-size:12px; color:var(--muted); }
.money{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* 🔔 alert bell */
.bell{ position:relative; } .bell-btn{ font-size:18px; position:relative; }
.bell-n{ position:absolute; top:0; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:10.5px; font-weight:800; line-height:17px; text-align:center; }
.bell-panel{ position:absolute; top:40px; inset-inline-end:0; width:min(360px, calc(100vw - 24px)); max-height:70vh; overflow:auto; z-index:50;
  background:var(--surface); border:1px solid var(--border-2); border-radius:12px; box-shadow:0 18px 40px -12px rgba(0,0,0,.35); }
.bell-head{ padding:10px 14px; font-weight:800; border-bottom:1px solid var(--border); }
.bell-item{ display:block; padding:9px 14px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); border-inline-start:4px solid var(--warn); }
.bell-item.red{ border-inline-start-color:var(--bad); } .bell-item b{ display:block; font-size:13.5px; } .bell-item span{ font-size:12px; color:var(--muted); }
.bell-item:hover{ background:var(--surface-2); }
@media (max-width:760px){ .bell-panel{ position:fixed; top:56px; left:12px; right:12px; width:auto; } }