/* CareCode — الواجهة. الألوان والخطوط من نظام تصميم CareCode */
:root{
  --bg:#F5F8FF; --surface:#FFFFFF; --raised:#EEF3FF; --fg:#0A1A4A; --muted:#42558A; --line:#D6E1FB;
  --brand:#1F5BFF; --navy:#050F2E; --deep:#0A2472; --sky:#6E9BFF;
  --patient:#0E7C86; --patient-soft:#DCF1F2; --doctor:#3D4FB0; --doctor-soft:#E4E7F8;
  --pharma:#2F8A4C; --pharma-soft:#E0F2E5; --lab:#8A3F8F; --lab-soft:#F3E4F4; --ai:#B0561A; --ai-soft:#F8E8DC;
  --amber:#9A640F; --amber-soft:#F7ECD6; --danger:#B4432F; --danger-soft:#F8E1DC;
  --role:var(--brand); --role-soft:#E4ECFF;
  --display:Alexandria,"IBM Plex Sans Arabic",system-ui,sans-serif; --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#050F2E; --surface:#0D1D4D; --raised:#12245A; --fg:#EAF1FF; --muted:#A9BCE8; --line:#1E3466; --brand:#4F80FF;
  --patient:#4FC3CC; --patient-soft:#11333A; --doctor:#929FF2; --doctor-soft:#1C2246; --pharma:#6BCC8A; --pharma-soft:#123020;
  --lab:#D48FD8; --lab-soft:#33193A; --ai:#F0A06A; --ai-soft:#3A2312; --amber:#E3B265; --amber-soft:#33270F; --danger:#F08A74; --danger-soft:#3A1C16;
  --role-soft:#16285E; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.65;direction:rtl}
body.r-patient{--role:var(--patient);--role-soft:var(--patient-soft)}
body.r-doctor{--role:var(--doctor);--role-soft:var(--doctor-soft)}
body.r-pharmacy{--role:var(--pharma);--role-soft:var(--pharma-soft)}
body.r-lab{--role:var(--lab);--role-soft:var(--lab-soft)}
#app{max-width:720px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-left)) 90px;display:flex;flex-direction:column;gap:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--role);outline-offset:2px}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--display)}

/* الهيدر الكحلي */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;background:radial-gradient(ellipse at 15% 0%,#123A9E 0%,#0A2472 42%,#050F2E 88%);color:#EAF1FF;box-shadow:0 20px 40px rgba(10,36,114,.25)}
.hero>*{position:relative;z-index:1}
.hero>.orb{position:absolute;z-index:0;width:150px;height:150px;left:-38px;bottom:-62px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#CFE0FF 0%,#6E9BFF 16%,#2459F0 42%,#0B2C9E 72%,#061A5E 100%);box-shadow:0 0 60px rgba(46,108,255,.55)}
.hero>.orb::after{content:"";position:absolute;inset:-26px;border-radius:50%;border:1.5px solid rgba(158,194,255,.35);border-top-color:rgba(255,255,255,.85);animation:orbit 18s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero>.orb::after{animation:none}}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff}
.brand small{font-family:var(--body);font-weight:500;font-size:.75rem;color:#A9BCE8}
.logo{width:34px;height:34px;border-radius:10px;background:#1F5BFF;display:grid;place-items:center;box-shadow:0 0 22px rgba(31,91,255,.6);flex:none}
.logo svg{width:20px;height:20px}
.hero .who{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:0}
.hero .who span{color:#6E9BFF}
.hero .sub{color:#B9CBF2;font-size:.85rem;margin:0}
.hbtn{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:99px;padding:5px 12px;font-size:.8rem;display:inline-flex;align-items:center;gap:6px;position:relative}
.hbtn svg{width:16px;height:16px}
.hbtn .badge{position:absolute;top:-6px;left:-6px}

/* التبويبات */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs button{border:0;background:none;padding:9px 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tabs button.on{color:var(--role);border-bottom-color:var(--role)}
.badge{min-width:19px;height:19px;border-radius:99px;background:var(--danger);color:#fff;font-size:.72rem;display:inline-grid;place-items:center;padding:0 5px;font-weight:700}

/* الكروت */
.card{background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--k,var(--line));border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.list>.card:nth-child(5n+1){--k:var(--patient)} .list>.card:nth-child(5n+2){--k:var(--doctor)} .list>.card:nth-child(5n+3){--k:var(--pharma)}
.list>.card:nth-child(5n+4){--k:var(--lab)} .list>.card:nth-child(5n){--k:var(--amber)}
.card.plain{border-inline-start-width:1px}
.card h3{margin:0;font-size:1.02rem;font-weight:700}
.card h4,h4{margin:0;font-size:.85rem;color:var(--muted);font-weight:600}
.list,.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)} .small{font-size:.84rem} .num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.qr .code:empty{display:none}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px}
.kv span{display:block;font-size:.75rem;color:var(--muted)} .kv b{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.8rem;padding:2px 10px;border-radius:99px;background:var(--raised);border:1px solid var(--line)}
.chip.role{background:var(--role-soft);border-color:transparent;color:var(--role);font-weight:500}
.chipbtn{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 11px;font-size:.82rem}
.chipbtn.on{background:var(--role-soft);color:var(--role);border-color:transparent;font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2px 0;width:100%}
.empty{text-align:center;color:var(--muted);padding:22px 10px;font-size:.9rem}
.item{border:1px solid var(--line);border-inline-start:4px solid var(--ki,var(--line));border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;background:var(--raised)}
.stack>.item:nth-child(4n+1){--ki:var(--patient)} .stack>.item:nth-child(4n+2){--ki:var(--doctor)} .stack>.item:nth-child(4n+3){--ki:var(--pharma)} .stack>.item:nth-child(4n){--ki:var(--lab)}
.item .name{font-weight:600}

/* الإدخال */
label.f{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--muted);min-width:0}
input[type=text],input[type=tel],input[type=number],input[type=password],input[type=date],input[type=time],select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0;width:100%;color:var(--fg)}
input[type=number]{width:110px}
textarea{resize:vertical}
.check{display:inline-flex;align-items:center;gap:6px;font-size:.88rem}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 15px;font-weight:500;min-height:40px}
.btn.primary{background:var(--role);border-color:var(--role);color:#fff}
.btn.brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--role);padding-inline:6px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap}
.seg button{border:0;background:var(--surface);padding:7px 12px}
.seg button.on{background:var(--role-soft);color:var(--role);font-weight:600}

.status{font-size:.75rem;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.st-wait{background:var(--amber-soft);color:var(--amber)} .st-ok{background:var(--pharma-soft);color:var(--pharma)}
.st-info{background:var(--doctor-soft);color:var(--doctor)} .st-bad{background:var(--danger-soft);color:var(--danger)}
.alert{border-radius:12px;padding:10px 12px;font-size:.9rem;display:flex;flex-direction:column;gap:5px}
.alert.warn{background:var(--danger-soft);color:var(--danger)} .alert.info{background:var(--amber-soft);color:var(--amber)} .alert.good{background:var(--pharma-soft);color:var(--pharma)}
.alert b{font-weight:600}
.otp{font-family:ui-monospace,Menlo,monospace;font-size:1.5rem;letter-spacing:.3em;font-weight:700}
.token{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;letter-spacing:.06em;font-weight:600}
.slots{display:flex;flex-wrap:wrap;gap:6px}
.slots button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 11px;font-variant-numeric:tabular-nums}
.slots button.on{background:var(--role);color:#fff;border-color:var(--role)}
.slots button:disabled{text-decoration:line-through;opacity:.4}
.wa{background:var(--pharma-soft);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.wa .bubble{background:var(--surface);border-radius:10px 10px 2px 10px;padding:10px 12px;font-size:.9rem;white-space:pre-line}
table{width:100%;border-collapse:collapse;font-size:.88rem}
td,th{padding:7px 6px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
th{font-size:.75rem;color:var(--muted);font-weight:600}
tbody tr:nth-child(even){background:var(--raised)}
.tw{overflow-x:auto}
.qr{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qr .code{width:130px;height:130px;background:#fff;border-radius:8px;padding:5px;flex:none}
.qr .code svg,.qr .code img{width:100%;height:100%}
.stars{display:inline-flex;gap:2px}
.stars button{border:0;background:none;font-size:1.35rem;color:var(--line);padding:0 2px;line-height:1}
.stars button.on{color:var(--amber)}
.flag-hi{color:var(--danger);font-weight:600}.flag-ok{color:var(--pharma)}
.spark{display:flex;align-items:center;gap:10px}
.spark svg{width:130px;height:36px;flex:none}
.visit{border-inline-start:3px solid var(--role);padding-inline-start:10px}
.dept{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dept>button{width:100%;border:0;background:var(--raised);display:flex;justify-content:space-between;padding:9px 12px;font-weight:600}
.dept .body{padding:10px 12px;display:flex;flex-direction:column;gap:10px}

/* المساعد الصوتي */
.assist{background:var(--ai-soft);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mic{width:84px;height:84px;border-radius:50%;border:0;background:var(--ai);color:#fff;display:grid;place-items:center;align-self:center;box-shadow:0 0 0 10px rgba(176,86,26,.12)}
.mic.live{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(176,86,26,.18)}}
.mic svg{width:38px;height:38px}
.log{display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:.93rem;white-space:pre-line}
.msg.me{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.msg.bot{align-self:flex-end;background:var(--ai);color:#fff}
.examples{display:flex;flex-wrap:wrap;gap:6px}
.examples button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 10px;font-size:.8rem;text-align:start}

/* الإشعارات */
.panel{position:fixed;inset:0;background:rgba(5,15,46,.45);z-index:30;display:flex;justify-content:center;align-items:flex-start;padding:70px 16px 16px}
.panel .sheet{background:var(--surface);color:var(--fg);border-radius:16px;max-width:520px;width:100%;max-height:75vh;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.note{border-bottom:1px solid var(--line);padding:8px 2px;display:flex;flex-direction:column;gap:2px}
.note.unread{font-weight:600}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:.9rem;max-width:calc(100% - 32px);z-index:40}
#toast.ring{background:var(--role);color:#fff;font-weight:600}

/* شاشة الدخول */
.auth{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.roles4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.roles4 button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;font-weight:600;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:start}
.roles4 button small{font-weight:400;color:var(--muted)}
.roles4 button.on{border-color:var(--brand);background:#E4ECFF;color:#0A2472}
@media (prefers-color-scheme: dark){.roles4 button.on{background:#16285E;color:#EAF1FF}}
video.scan{width:100%;max-height:300px;border-radius:12px;background:#000}

/* الطباعة */
#print{display:none}
@media print{
  body *{visibility:hidden}
  #print,#print *{visibility:visible}
  #print{display:block;position:absolute;inset:0;padding:24px;color:#000;background:#fff;font-size:13pt}
  #print h1{font-size:18pt;margin:0 0 6px}
  #print table{font-size:12pt} #print td,#print th{border-bottom:1px solid #999}
}