:root {
  --bg: #fdf8ff;
  --surface: #ffffff;
  --surface-2: #f1ecf4;
  --text: #1d1b20;
  --muted: #6b6672;
  --line: #d9d3de;
  --primary: #0b78b8;
  --primary-ink: #ffffff;
  --primary-soft: #e3f1fa;
  --danger: #b3261e;
  --ok: #1b7a3d;
  --warn: #9a5b00;
  --radius: 14px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141218; --surface: #1d1b20; --surface-2: #2b2930; --text: #e6e0e9; --muted: #aaa4b1;
    --line: #49454f; --primary: #5db8ee; --primary-ink: #00314a; --primary-soft: #0d3a54;
    --danger: #f2b8b5; --ok: #7ad99a; --warn: #f2c26b;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); -webkit-tap-highlight-color: transparent; }
button, a, select, label, .cell { touch-action: manipulation; }
/* Times, dates and amounts keep their left-to-right order inside Arabic text. */
bdi { unicode-bidi: isolate; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
a { color: var(--primary); }

/* ---------- shell ---------- */
.shell { display: flex; flex-direction: column; min-height: 100dvh; }
.view { flex: 1; padding: calc(12px + var(--safe-t)) 16px calc(var(--nav-h) + var(--safe-b) + 90px); max-width: 1100px; width: 100%; margin: 0 auto; }
.tabs {
  position: fixed; inset-inline: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-b)); display: flex;
  background: var(--surface-2); border-top: 1px solid var(--line); z-index: 5;
  padding-bottom: var(--safe-b);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer;
}
.tab svg { width: 24px; height: 24px; fill: currentColor; }
.tab.on { color: var(--primary); font-weight: 600; }
.tab.on svg { background: var(--primary-soft); border-radius: 12px; padding: 2px 12px; width: 48px; box-sizing: border-box; height: 28px; }
@media (min-width: 900px) {
  .shell { flex-direction: row; }
  .tabs {
    position: sticky; top: 0; inset-inline: auto; height: 100vh; height: 100dvh; width: 96px; flex-direction: column; padding-bottom: 0; order: -1;
    justify-content: flex-start; padding-top: 16px; border-top: 0; border-inline-end: 1px solid var(--line);
  }
  .tab { flex: 0 0 auto; padding: 12px 0; }
  .view { padding-bottom: 100px; }
  .fab { bottom: 28px; }
  #toast { bottom: 28px; }
}

/* ---------- controls ---------- */
.btn {
  background: var(--primary); color: var(--primary-ink); border: 0; border-radius: 999px;
  padding: 10px 20px; cursor: pointer; font-weight: 600; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1.2;
}
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
.btn.small { padding: 6px 14px; min-height: 34px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; font-size: 22px;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.fab {
  position: fixed; inset-inline-end: 20px; bottom: calc(var(--nav-h) + var(--safe-b) + 20px); z-index: 4;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); padding: 14px 22px;
}
input[type=text], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=time],
input[type=password], select, textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 44px;
}
textarea { resize: vertical; min-height: 84px; }
input, select, textarea { min-width: 0; max-width: 100%; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; text-align: start; display: block; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: start; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
label.field { display: block; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
label.field > :is(input, select, textarea) { margin-top: 4px; color: var(--text); font-size: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sp { flex: 1; }
.hidden { display: none !important; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { flex: 1; background: none; border: 0; padding: 10px; cursor: pointer; min-height: 44px; }
.seg button + button { border-inline-start: 1px solid var(--line); }
.seg button.on { background: var(--primary-soft); font-weight: 600; }

.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; background: var(--primary-soft); white-space: nowrap; }
.chip.st-DONE, .chip.SENT { background: #fde7ee; color: #8a1f43; }
.chip.st-CANCELLED, .chip.st-NO_SHOW { background: var(--surface-2); color: var(--muted); }
.chip.FAILED { background: #fbe0de; color: var(--danger); }
.chip.PENDING, .chip.SENDING { background: #fff1d6; color: var(--warn); }
@media (prefers-color-scheme: dark) {
  .chip.st-DONE, .chip.SENT { background: #4a1c2e; color: #ffb1c8; }
  .chip.FAILED { background: #4a1f1c; }
  .chip.PENDING, .chip.SENDING { background: #4a3510; }
}

/* ---------- cards & lists ---------- */
.card { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0; }
.card .who { font-weight: 600; margin-top: 4px; }
.card .time { font-size: 18px; }
.card .actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.card.faded { opacity: .6; }
.cars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cars .chip { background: var(--surface); border: 1px solid var(--line); }
.empty { text-align: center; color: var(--muted); padding: 80px 20px; }
.section-title { color: var(--primary); font-weight: 600; margin: 22px 0 6px; font-size: 18px; }

.period { display: flex; align-items: center; margin: 14px 0 6px; gap: 6px; }
.period .label { flex: 1; text-align: center; font-size: 20px; font-weight: 600; color: var(--primary); }
.period .label { cursor: pointer; }
.today-row { display: flex; justify-content: center; margin: 2px 0 4px; }
.summary { display: flex; justify-content: space-between; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }

.weekgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.daycol h3 { font-size: 15px; padding: 6px 4px; color: var(--primary); display: flex; justify-content: space-between; cursor: pointer; }
.daycol h3.today { text-decoration: underline; text-underline-offset: 4px; }
.daycol .card { margin: 6px 0; padding: 10px 12px; }
.daycol .card .time { font-size: 15px; }

.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.month .dow { text-align: center; color: var(--muted); font-size: 13px; padding: 4px 0; }
.month .cell {
  background: var(--surface-2); border: 0; border-radius: 10px; min-height: 64px; padding: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
}
.month .cell.other { opacity: .45; }
.month .cell.today { outline: 2px solid var(--primary); }
.month .cell .n { font-size: 14px; }
.month .badge { background: var(--primary); color: var(--primary-ink); border-radius: 999px; min-width: 24px; padding: 0 7px; font-size: 13px; text-align: center; }

/* ---------- dialog ---------- */
dialog {
  border: 0; border-radius: 24px; padding: 0; background: var(--surface); color: var(--text);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
}
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog { overscroll-behavior: contain; }
.dlg-form { padding: 22px; }
.dlg-form h2 { font-size: 22px; margin-bottom: 4px; }
.dlg-foot {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap;
  position: sticky; bottom: -22px; background: var(--surface); padding: 12px 0 calc(22px + var(--safe-b)); margin-bottom: -22px;
  border-top: 1px solid var(--line);
}
.picker { max-height: 150px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; }
.picker button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.picker button:last-child { border-bottom: 0; }
.picker button.on { background: var(--primary-soft); }
.carrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; align-items: center; }
.err { color: var(--danger); margin-top: 10px; min-height: 1em; }
.note { background: var(--primary-soft); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 14px; }

/* ---------- settings ---------- */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch { display: block; }
/* Explicit size: iOS Safari does not stretch an absolutely positioned <input> with inset alone. */
.switch input {
  -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 16px; background: var(--line); cursor: pointer; transition: .15s;
}
.switch input:checked { background: var(--primary); }
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .15s; pointer-events: none; }
.switch:has(input:checked)::after { inset-inline-start: 24px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper input { width: 84px; text-align: center; }
.panel { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0; }
.panel.warn { background: #fff1d6; color: #5a3600; }
@media (prefers-color-scheme: dark) { .panel.warn { background: #4a3510; color: #f2d9a0; } }

/* ---------- login & toast ---------- */
.login { max-width: 360px; margin: 14vh auto 0; padding: 0 20px; }
.login h1 { text-align: center; color: var(--primary); margin-bottom: 18px; }
#toast {
  position: fixed; inset-inline: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 24px); margin: 0 auto; max-width: 420px; text-align: center;
  background: #323232; color: #fff; padding: 12px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50;
}
#toast.show { opacity: 1; }
#toast.bad { background: #b3261e; }