/* DentaClinic — design system.
   Identity: porcelain ground, deep lagoon ink for the frame, one warm coral for the action, gold for money.
   Type: Readex Pro (Arabic + Latin UI), IBM Plex Mono (numbers, codes, teeth). Light + dark via tokens. */
:root{
  --bg:#f2f5f4; --surface:#ffffff; --surface-2:#f7faf9; --sunk:#eef2f1;
  --line:#e1e7e5; --line-2:#cbd5d2;
  --ink:#0f1f2a; --ink-2:#465863; --ink-3:#7a8a93;
  --frame:#0d3446; --frame-2:#0a2a39; --frame-ink:#e8f3f7; --frame-ink-2:#9fc0cd; --frame-hi:#164a61;
  --accent:#e2574c; --accent-2:#c9463c; --accent-ink:#ffffff; --accent-soft:#fdeceb;
  --gold:#a77a1f; --gold-soft:#f7efdc;
  --ok:#15803d; --ok-soft:#e5f5ea; --warn:#b45309; --warn-soft:#fdf1e2; --bad:#b91c1c; --bad-soft:#fde8e8;
  --info:#1d4ed8; --info-soft:#e7eefc;
  --shadow:0 1px 2px rgba(15,31,42,.06), 0 6px 18px rgba(15,31,42,.06);
  --r:12px; --r-sm:9px;
  --f-ui:"Readex Pro","Cairo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a141b; --surface:#0f1d26; --surface-2:#132430; --sunk:#0c1820;
    --line:#1d313e; --line-2:#2a4352;
    --ink:#e6eff3; --ink-2:#a6b8c2; --ink-3:#6f8693;
    --frame:#071b25; --frame-2:#05141c; --frame-ink:#dcebf1; --frame-ink-2:#7fa3b2; --frame-hi:#0f3445;
    --accent:#f07467; --accent-2:#e35e51; --accent-ink:#1b0907; --accent-soft:#3a1d1a;
    --gold:#e0b35a; --gold-soft:#2f2614;
    --ok:#4ade80; --ok-soft:#10301f; --warn:#f2a54a; --warn-soft:#33240f; --bad:#f87171; --bad-soft:#3a1717;
    --info:#7aa2ff; --info-soft:#14223f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a141b; --surface:#0f1d26; --surface-2:#132430; --sunk:#0c1820;
  --line:#1d313e; --line-2:#2a4352;
  --ink:#e6eff3; --ink-2:#a6b8c2; --ink-3:#6f8693;
  --frame:#071b25; --frame-2:#05141c; --frame-ink:#dcebf1; --frame-ink-2:#7fa3b2; --frame-hi:#0f3445;
  --accent:#f07467; --accent-2:#e35e51; --accent-ink:#1b0907; --accent-soft:#3a1d1a;
  --gold:#e0b35a; --gold-soft:#2f2614;
  --ok:#4ade80; --ok-soft:#10301f; --warn:#f2a54a; --warn-soft:#33240f; --bad:#f87171; --bad-soft:#3a1717;
  --info:#7aa2ff; --info-soft:#14223f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
.mono,.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
th.num{font-family:var(--f-ui)}  /* header text is Arabic: never the mono font (it has no Arabic) */
.ltr{direction:ltr; unicode-bidi:isolate}
.muted{color:var(--ink-3)}
.small{font-size:.84rem}
.hide{display:none !important}
svg.ic{inline-size:18px; block-size:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}

/* ── shell ── */
.shell{display:grid; grid-template-columns:248px 1fr; min-block-size:100vh}
.side{background:var(--frame); color:var(--frame-ink); display:flex; flex-direction:column; gap:4px;
  padding:16px 12px; position:sticky; inset-block-start:0; block-size:100vh; overflow:auto}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 16px; text-decoration:none}
.brand .logo{inline-size:36px; block-size:36px; border-radius:11px; background:var(--accent); display:grid; place-items:center; flex:none}
.brand .logo svg{inline-size:22px; block-size:22px; stroke:#fff; fill:none; stroke-width:1.9}
.brand b{display:block; font-family:var(--f-mono); font-weight:600; letter-spacing:.01em; font-size:1rem; direction:ltr; text-align:start}
.brand span{display:block; font-size:.74rem; color:var(--frame-ink-2); line-height:1.3}
.nav-label{font-size:.72rem; color:var(--frame-ink-2); padding:12px 10px 4px}
.nav a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; text-decoration:none;
  color:var(--frame-ink-2); font-size:.92rem}
.nav a:hover{background:var(--frame-hi); color:var(--frame-ink)}
.nav a[aria-current="page"]{background:var(--frame-hi); color:#fff; box-shadow:inset 3px 0 0 var(--accent)}
.side .me{margin-top:auto; padding:12px 10px 4px; border-top:1px solid rgba(255,255,255,.08); font-size:.84rem}
.side .me b{display:block; color:var(--frame-ink)}
.side .me span{color:var(--frame-ink-2)}
.side .me form{display:inline}
.side .me button{background:none; border:0; color:var(--frame-ink-2); padding:0; cursor:pointer; text-decoration:underline}
.main{min-inline-size:0; padding:22px 28px 60px}
.topbar{display:none}
.as-banner{background:var(--gold-soft); color:var(--gold); border-bottom:1px solid var(--line); padding:6px 16px;
  font-size:.84rem; display:flex; gap:12px; align-items:center}
.as-banner form{margin-inline-start:auto}

/* ── page head ── */
.page-head{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-block-end:18px}
.page-head h1{margin:0; font-size:1.45rem; font-weight:600; line-height:1.3}
.page-head .sub{color:var(--ink-3); font-size:.88rem; margin-top:2px}
.page-head .actions{margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.page-head .actions input,.page-head .actions select,.row > input[type=date],.row > input[type=search],.row > select{inline-size:auto}

/* ── cards + grid ── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px}
.card > h2,.card > h3{margin:0 0 12px; font-size:1rem; font-weight:600}
.card-head{display:flex; align-items:center; gap:8px; margin-block-end:12px}
.card-head h2,.card-head h3{margin:0; font-size:1rem; font-weight:600}
.card-head .actions{margin-inline-start:auto; display:flex; gap:6px}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow)}
.stat .k{font-size:.8rem; color:var(--ink-3)}
.stat .v{font-family:var(--f-mono); font-size:1.4rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px}
.stat .v.gold{color:var(--gold)} .stat .v.bad{color:var(--bad)} .stat .v.ok{color:var(--ok)}
.stat .d{font-size:.78rem; color:var(--ink-3)}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--surface);
  border-radius:var(--r-sm); padding:8px 14px; font-size:.9rem; text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-dark{background:var(--frame); border-color:var(--frame); color:#fff}
.btn-ghost{background:transparent; border-color:transparent}
.btn-ghost:hover{background:var(--sunk)}
.btn-danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn-sm{padding:5px 10px; font-size:.82rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}

/* ── chips ── */
.chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:.78rem;
  background:var(--sunk); color:var(--ink-2); white-space:nowrap}
.chip i{inline-size:7px; block-size:7px; border-radius:50%; background:currentColor}
.chip.ok{background:var(--ok-soft); color:var(--ok)} .chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)} .chip.info{background:var(--info-soft); color:var(--info)}
.chip.gold{background:var(--gold-soft); color:var(--gold)} .chip.accent{background:var(--accent-soft); color:var(--accent)}
.alert-chips{display:flex; flex-wrap:wrap; gap:6px}
.alert-chips .chip{background:var(--bad-soft); color:var(--bad); font-weight:500}

/* ── tables ── */
.tbl-wrap{overflow-x:auto}
.tbl{inline-size:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{font-weight:500; color:var(--ink-3); font-size:.78rem; text-align:start; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.voided td{color:var(--ink-3); text-decoration:line-through}
.tbl td.num,.tbl th.num{text-align:end; white-space:nowrap}
.tbl td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}  /* never on headers: the mono font has no Arabic */
.tbl a.rowlink{text-decoration:none; font-weight:500}
.tbl a.rowlink:hover{color:var(--accent)}

/* ── forms ── */
.form{display:grid; gap:14px}
.fields{display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.field{display:flex; flex-direction:column; gap:5px; min-inline-size:0}
.field.wide{grid-column:1 / -1}
.field label,.lbl{font-size:.82rem; color:var(--ink-2); font-weight:500}
.field .hint{font-size:.76rem; color:var(--ink-3)}
input[type=text],input[type=search],input[type=password],input[type=date],input[type=time],input[type=number],
input[type=tel],input[type=datetime-local],select,textarea{
  inline-size:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:8px 11px; font-size:.93rem; min-block-size:40px}
textarea{min-block-size:84px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.check{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); border-radius:999px; padding:5px 12px;
  font-size:.86rem; cursor:pointer; background:var(--surface)}
.check input{accent-color:var(--accent)}
.check:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.form-actions{display:flex; gap:8px; flex-wrap:wrap}
.search-bar{display:flex; gap:8px}
.search-bar input{flex:1}

/* ── toasts ── */
.toasts{position:fixed; inset-block-start:14px; inset-inline:0; margin:auto; z-index:50; display:flex; flex-direction:column;
  gap:8px; align-items:center; pointer-events:none}
.toast{pointer-events:auto; background:var(--frame); color:#fff; border-radius:12px; padding:10px 16px; font-size:.9rem;
  box-shadow:var(--shadow); max-inline-size:min(560px,92vw); animation:toast-in .25s ease both}
.toast.error{background:var(--bad)}
.toast.ok{background:var(--ok); color:#fff}
@keyframes toast-in{from{opacity:0}to{opacity:1}}

/* ── tabs (patient file) ── */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-block:14px 18px; overflow-x:auto}
.tabs a{padding:9px 14px; text-decoration:none; color:var(--ink-2); border-bottom:2px solid transparent; white-space:nowrap; font-size:.92rem}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}

/* ── patient header ── */
.pt-head{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.pt-avatar{inline-size:52px; block-size:52px; border-radius:15px; background:var(--frame); color:#fff; display:grid; place-items:center;
  font-weight:600; font-size:1.25rem; flex:none}
.pt-head h1{margin:0; font-size:1.35rem; line-height:1.3}
.pt-meta{color:var(--ink-3); font-size:.86rem; display:flex; gap:6px 14px; flex-wrap:wrap}
.pt-meta b{color:var(--ink-2); font-weight:500}
.pt-bal{margin-inline-start:auto; display:flex; gap:10px; flex-wrap:wrap}
.bal{border:1px solid var(--line); border-radius:12px; padding:6px 14px; background:var(--surface); text-align:center; min-inline-size:120px}
.bal .k{font-size:.72rem; color:var(--ink-3)}
.bal .v{font-family:var(--f-mono); font-weight:600}
.bal.owes .v{color:var(--bad)} .bal.credit .v{color:var(--ok)}

/* ── misc ── */
.empty{padding:28px 12px; text-align:center; color:var(--ink-3)}
.empty svg{inline-size:40px; block-size:40px; stroke:var(--ink-3); opacity:.7}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.9rem}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.list{list-style:none; margin:0; padding:0}
.list li{padding:9px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center}
.list li:last-child{border-bottom:0}
.dot{inline-size:10px; block-size:10px; border-radius:50%; flex:none}
.divider{block-size:1px; background:var(--line); margin-block:12px}
.money-iqd{color:var(--ink)} .money-usd{color:var(--info)}
details.inline summary{cursor:pointer; color:var(--ink-2); font-size:.88rem}

/* ── login ── */
.login-wrap{min-block-size:100vh; display:grid; grid-template-columns:1.1fr 1fr}
.login-art{background:var(--frame); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.login-art h1{font-size:2.2rem; line-height:1.25; margin:0; font-weight:600}
.login-art p{color:var(--frame-ink-2); max-inline-size:34ch}
.login-art .arch{position:absolute; inset-inline-end:-80px; inset-block-end:-60px; inline-size:440px; opacity:.18}
.login-form{display:grid; place-items:center; padding:32px 20px}
.login-form .card{inline-size:min(380px,100%)}

/* ── print ── */
@media print{
  .side,.topbar,.no-print,.toasts,.as-banner{display:none !important}
  .shell{display:block} .main{padding:0}
  body{background:#fff; color:#000}
  .card{box-shadow:none; border-color:#ccc}
}

/* ── phone ── */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed; inset-block:0; inset-inline-start:0; inline-size:270px; z-index:40; transform:translateX(100%); transition:transform .2s}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:30}
  .topbar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--frame); color:#fff; position:sticky; inset-block-start:0; z-index:20}
  .topbar button{background:none; border:0; color:#fff; padding:4px; cursor:pointer}
  .topbar b{font-family:var(--f-mono)}
  .main{padding:16px 14px 60px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g4.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-wrap{grid-template-columns:1fr}
  .login-art{padding:28px; min-block-size:220px}
  .login-art h1{font-size:1.6rem}
  .pt-bal{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ── Stage B ── */
.tbl tr.rx-warn td{background:var(--bad-soft)}
.rx-sheet{max-inline-size:640px; margin:auto; background:#fff; color:#111; border:1px solid var(--line); border-radius:12px; padding:26px}
.rx-sheet .rx-l{display:grid; grid-template-columns:28px 1fr; gap:4px 10px; padding:9px 0; border-bottom:1px dashed #ccc}
.rx-sheet .rx-l b{font-family:var(--f-mono); direction:ltr; text-align:start}
.rx-sheet .muted{color:#666}
.rx-sheet .rx-sym{font-family:Georgia,serif; font-size:2rem; color:#0d3446; line-height:1}
@media print{@page{size:A5; margin:10mm} .rx-sheet{border:0; padding:0}}
.board{display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:12px; overflow-x:auto}
.board .col{background:var(--sunk); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; min-block-size:200px}
.board .col h3{margin:0 4px 4px; font-size:.9rem; display:flex; gap:6px; align-items:center}
.lab-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 11px; text-decoration:none; display:block; box-shadow:var(--shadow)}
.lab-card b{display:block} .lab-card .m{font-size:.78rem; color:var(--ink-3)}
.lab-card.late{border-color:var(--bad); background:var(--bad-soft)}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.gal-item{position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0b141b; aspect-ratio:4/3; cursor:zoom-in; padding:0}
.gal-item img{inline-size:100%; block-size:100%; object-fit:cover; display:block}
.gal-item .cap{position:absolute; inset-inline:0; inset-block-end:0; padding:6px 8px; font-size:.75rem; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.75)); text-align:start}
.gal-item.pdf{display:grid; place-items:center; color:#fff; font-family:var(--f-mono); cursor:pointer}
.viewer{position:fixed; inset:0; z-index:60; background:rgba(3,8,12,.94); display:none; flex-direction:column}
.viewer.on{display:flex}
.viewer .vbar{display:flex; gap:8px; align-items:center; padding:10px 14px; color:#fff}
.viewer .vbar .t{flex:1; font-size:.9rem}
.viewer .vbar button{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:9px; padding:5px 11px; cursor:pointer}
.viewer .stage{flex:1; overflow:hidden; display:grid; place-items:center; touch-action:none}
.viewer .stage img{max-inline-size:96vw; max-block-size:84vh; transform-origin:center; transition:transform .12s; user-select:none}
.drop{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; border:2px dashed var(--line-2); border-radius:var(--r); padding:22px; text-align:center; color:var(--ink-3); cursor:pointer}
.drop input[type=file]{position:absolute; inset-block-end:0; inset-inline-start:50%; inline-size:1px; block-size:1px; opacity:0; overflow:hidden}
.drop:focus-within{border-color:var(--accent)}
.drop .picked{color:var(--ink); font-weight:500; overflow-wrap:anywhere}
.drop.over{border-color:var(--accent); background:var(--accent-soft)}