:root { --navy:#021C38; --navy2:#0C2C4D; --orange:#FF6B00; --orange-text:#C2410C; --bg:#F3F5F9; --card:#fff; --text:#0F1B2D; --text2:#334155; --muted:#475569; --line:#E8ECF2; --border:#CBD5E1;
  --ok:#166534; --ok-bg:#DCFCE7; --warn:#92400E; --warn-bg:#FEF3C7; --bad:#B91C1C; --bad-bg:#FEE2E2; --info:#1D4ED8; --info-bg:#E8F0FB; --card2:#F1F5F9; --sel:#FFF8F3; --sel2:#FFF1E8; --sel-text:#9A3412; --input:#fff; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { font-family: 'Cairo', system-ui, sans-serif; color: var(--text); font-size: 15px; font-weight: 600; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side { background: var(--navy); color: #fff; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand b { font-family: Arial, sans-serif; font-size: 18px; display: block; line-height: 1.1; }
.brand small { color: #FFB37A; font-size: 11.5px; font-family: Arial, sans-serif; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: #C9D8EA; font-weight: 700; }
.nav a:hover { background: var(--navy2); color: #fff; }
.nav a.on { background: var(--orange); color: #fff; }
.nav .cnt { margin-inline-start: auto; background: #DC2626; color: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; line-height: 20px; }
.me { margin-top: auto; border-top: 1px solid var(--navy2); padding: 12px 8px 0; font-size: 13px; color: #B9C8DA; display: flex; flex-direction: column; gap: 6px; }
.me b { color: #fff; font-size: 15px; }
.me button { background: var(--navy2); color: #fff; border: 0; border-radius: 10px; padding: 8px; cursor: pointer; font-weight: 700; }
.main { padding: 22px 26px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top h1 { margin: 0; font-size: 24px; flex: 1; }
.card { background: var(--card); border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(15,27,45,.06); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card h2 { margin: 0; font-size: 17px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; cursor: default; border: 2px solid transparent; }
button.kpi { text-align: right; cursor: pointer; font: inherit; color: inherit; }
.kpi.on { border-color: var(--orange); }
.kpi span { color: var(--muted); font-size: 13.5px; }
.kpi b { font-size: 28px; }
.split { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 16px; align-items: start; }
.tlist { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 260px); overflow-y: auto; }
.titem { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: right; font: inherit; color: inherit; width: 100%; }
.titem.on { border-color: var(--orange); background: var(--sel); }
.titem.late { border-inline-start: 6px solid #DC2626; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 13px; font-weight: 600; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 11px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.bad { background: var(--bad-bg); color: #991B1B; }
.pill.muted { background: var(--card2); color: var(--muted); } .pill.info { background: var(--info-bg); color: var(--info); }
.msgs { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px; }
.msg { display: flex; } .msg.rider { justify-content: flex-start; } .msg.staff { justify-content: flex-end; } .msg.system { justify-content: center; }
.bubble { max-width: 75%; border-radius: 14px; padding: 8px 12px; white-space: pre-wrap; word-break: break-word; }
.msg.rider .bubble { background: var(--card2); } .msg.staff .bubble { background: var(--orange); color: #fff; } .msg.system .bubble { background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.bubble small { display: block; font-size: 11px; opacity: .75; } .bubble b { display: block; font-size: 12px; opacity: .85; }
.input, select.input, textarea.input { height: 44px; border-radius: 12px; border: 1.5px solid var(--border); padding: 0 12px; background: var(--input); color: var(--text); font-weight: 600; width: 100%; }
textarea.input { height: 90px; padding: 10px 12px; resize: vertical; }
.input:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.field { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 14px; min-width: 0; }
.btn { height: 44px; border-radius: 12px; border: 0; background: var(--orange); color: #fff; font-weight: 800; padding: 0 18px; cursor: pointer; white-space: nowrap; }
.btn.sec { background: var(--card); color: var(--text); border: 1.5px solid var(--border); }
.btn.danger { background: var(--card); color: var(--bad); border: 1.5px solid #FCA5A5; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .55; cursor: default; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: right; color: var(--muted); font-size: 13px; padding: 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tw { overflow-x: auto; }
.err { background: var(--bad-bg); color: #991B1B; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.okmsg { background: var(--ok-bg); color: var(--ok); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 34px 10px; }
.spin { width: 28px; height: 28px; border: 3px solid #CBD5E1; border-top-color: var(--orange); border-radius: 50%; animation: sp .8s linear infinite; margin: 30px auto; }
@keyframes sp { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 20px; left: 20px; background: var(--navy); color: #fff; border-radius: 12px; padding: 12px 16px; font-weight: 700; z-index: 50; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.login { min-height: 100vh; display: grid; place-items: center; background: var(--navy); padding: 16px; }
.login form { background: var(--card); border-radius: 22px; padding: 28px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.login .brand { justify-content: center; padding: 0; color: var(--text); }
.login .brand img { width: 64px; height: 64px; border-radius: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips label { border: 1.5px solid var(--border); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.chips input { display: none; } .chips label:has(input:checked) { background: var(--sel2); border-color: var(--orange); color: var(--sel-text); }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--orange); }
.alert-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.alert-row:first-child { border-top: 0; }
.alert-row .nd { width: 10px; height: 10px; border-radius: 50%; background: #DC2626; margin-top: 8px; flex: none; } .alert-row .nd.read { background: #CBD5E1; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; }
  .brand { padding: 0 6px; } .nav { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; } .nav a { padding: 7px 10px; font-size: 14px; }
  .me { margin: 0; border: 0; padding: 0; flex-direction: row; align-items: center; width: 100%; }
  .main { padding: 14px 16px; } .split, .grid2, .grid3 { grid-template-columns: 1fr; } .tlist { max-height: none; }
}

/* الوضع الليلي (بيتبع الداش بورد لما تكون جواها) */
:root[data-theme="dark"] { --bg:#0B1626; --card:#13233A; --card2:#1B2E48; --text:#E8EEF6; --text2:#C3CFDD; --muted:#93A4B8; --line:#22354F; --border:#2E4563;
  --ok:#4ADE80; --ok-bg:rgba(34,197,94,.16); --warn:#FBBF24; --warn-bg:rgba(245,158,11,.16); --bad:#F87171; --bad-bg:rgba(239,68,68,.16); --info:#93C5FD; --info-bg:rgba(59,130,246,.16);
  --sel:rgba(255,107,0,.12); --sel2:rgba(255,107,0,.18); --sel-text:#FDBA74; --input:#0F1E33; --orange-text:#FDBA74; color-scheme: dark; }
:root[data-theme="dark"] .pill.bad, :root[data-theme="dark"] .err { color: #FCA5A5; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .kpi { box-shadow: none; border: 1px solid var(--line); }
:root[data-theme="dark"] .kpi.on { border-color: var(--orange); }

/* جوه الداش بورد: من غير القايمة الجانبية الكبيرة، التابات فوق */
.embed body, .embed .main { background: var(--bg); }
.embed .layout { grid-template-columns: 1fr; min-height: 0; }
.embed .side { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.embed .side .brand { display: none; }
.embed .nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.embed .nav a { color: var(--muted); padding: 7px 12px; font-size: 14px; }
.embed .nav a:hover { background: var(--card2); color: var(--text); }
.embed .nav a.on { background: var(--orange); color: #fff; }
.embed .me { margin: 0; border: 0; padding: 0; flex-direction: row; align-items: center; gap: 10px; color: var(--muted); }
.embed .me b { color: var(--text); font-size: 14px; }
.embed .me button { background: var(--card2); color: var(--text); }
.embed .main { padding: 14px 16px; }
.embed .top h1 { font-size: 20px; }
.embed .tlist { max-height: calc(100vh - 230px); }
.embed .login { background: var(--bg); min-height: 100vh; }