/* Clinic system styles: the STYLES string from impact-clinic-system_4.jsx, copied verbatim. Fonts: fonts.css. */
:root{
  --green:#A8FC69; --green-dk:#8FE84F; --ink:#0E0F0C; --paper:#FFFFFF;
  --bg:#F5F6F1; --line:#D9DDD0; --muted:#5A5F53; --red:#C13333; --redbg:#FBE9E9;
  --side:#0E0F0C; --field:#FFFFFF; --soft:#FAFBF6;
  --tint-green:#F4FEE9; --tint-red:#FBEEEE; --tint-amber:#FFF8E1; --tint-wait:#F0E8FB;
  --warn-chip:#FFE08A; --warn-chip-ink:#0E0F0C; --grid:#E3E6DB; --warn-ink:#8A6D0F;
  --red-solid:#C13333; --tint-blue:#E1EEFB; --blue-ink:#1F5590;
}
[data-theme="dark"]{
  --green:#A8FC69; --green-dk:#8FE84F; --ink:#ECEFE6; --paper:#191B17;
  --bg:#111310; --line:#333730; --muted:#9AA292; --red:#FF7B7B; --redbg:#3A2020;
  --side:#080907; --field:#20231D; --soft:#1E211B;
  --tint-green:#1E2A16; --tint-red:#33201F; --tint-amber:#332B14; --tint-wait:#2A2140;
  --warn-chip:#7A6420; --warn-chip-ink:#FFE9A8; --grid:#333730; --warn-ink:#FFD65C;
  --red-solid:#C83A3A; --tint-blue:#16283D; --blue-ink:#8FC4FF;
}
[data-theme="dark"] body{color:var(--ink);}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--field); color:var(--ink); border-color:var(--line);}
[data-theme="dark"] input:disabled,[data-theme="dark"] select:disabled,[data-theme="dark"] textarea:disabled{background:#15170F; color:var(--muted);}
[data-theme="dark"] .btn.s{background:var(--field); border-color:var(--line); color:var(--ink);}
[data-theme="dark"] .btn.d{background:var(--field); border-color:#5A3030; color:var(--red);}
[data-theme="dark"] .chip.gray{background:#2A2E26; color:var(--muted);}
[data-theme="dark"] .chip.red{background:#3A2020; color:var(--red);}
[data-theme="dark"] .userchip,[data-theme="dark"] .burger,[data-theme="dark"] .syncdot{background:var(--field); border-color:var(--line); color:var(--ink);}
[data-theme="dark"] .topbar{background:rgba(25,27,23,.9);}
[data-theme="dark"] tbody tr:hover td{background:#20231D;}
[data-theme="dark"] th{color:var(--muted); border-bottom-color:var(--green-dk);}
[data-theme="dark"] .calday{background:var(--paper); border-color:var(--line);}
[data-theme="dark"] .calday.today{background:#1F2A16;}
[data-theme="dark"] .calday.closed{background:#3A2020; border-color:#5A3030;}
.staffbtn{display:flex; align-items:center; gap:10px; background:var(--paper); border:1.5px solid var(--line); border-radius:12px;
  padding:8px 11px; color:var(--ink); text-align:left; font-size:14px; cursor:pointer; transition:border-color .15s, background .15s;}
.staffbtn:hover{border-color:var(--green-dk); background:var(--tint-green);}
[data-theme="dark"] .staffbtn{background:var(--field); border-color:var(--line); color:var(--ink);}
[data-theme="dark"] .staffbtn:hover{background:#252A20;}
[data-theme="dark"] .modal,[data-theme="dark"] .confirmbox{background:var(--paper); color:var(--ink);}
[data-theme="dark"] .sq{border-color:var(--ink); background:var(--field);}
[data-theme="dark"] .sq.pre{background:#0E0F0C; border-color:#0E0F0C;}
[data-theme="dark"] .bar{background:#2A2E26;}
[data-theme="dark"] .hubcard{background:var(--field); border-color:var(--line); color:var(--ink);}
[data-theme="dark"] .inv{background:#fff; color:#0E0F0C;}   /* printed documents stay on white paper */
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3A3F35;}
/* safety net — if any element still carries a pale inline background, keep its text dark & readable */
[data-theme="dark"] [style*="background: #F"],[data-theme="dark"] [style*="background:#F"],
[data-theme="dark"] [style*="background: #f"],[data-theme="dark"] [style*="background:#f"],
[data-theme="dark"] [style*="background: #E"],[data-theme="dark"] [style*="background:#E"],
[data-theme="dark"] [style*="background: #e"],[data-theme="dark"] [style*="background:#e"]{color:#0E0F0C !important;}
[data-theme="dark"] [style*="background: #F"] .tiny,[data-theme="dark"] [style*="background:#F"] .tiny,
[data-theme="dark"] [style*="background: #E"] .tiny,[data-theme="dark"] [style*="background:#e"] .tiny{color:#4A4F45 !important;}
[data-theme="dark"] [style*="background: rgb(22"]:not([style*="background: rgb(22,"]):not([style*="background: rgb(22, "]),
[data-theme="dark"] [style*="background: rgb(23"]:not([style*="background: rgb(23,"]):not([style*="background: rgb(23, "]),
[data-theme="dark"] [style*="background: rgb(24"]:not([style*="background: rgb(24,"]):not([style*="background: rgb(24, "]),
[data-theme="dark"] [style*="background: rgb(25"]:not([style*="background: rgb(25,"]):not([style*="background: rgb(25, "]){color:#0E0F0C !important;}
[data-theme="dark"] .empty{color:var(--muted);}
[data-theme="dark"] .muted,[data-theme="dark"] .tiny{color:var(--muted);}
[data-theme="dark"] .crumb button{color:var(--muted);}
[data-theme="dark"] .ptab{color:var(--muted);}
[data-theme="dark"] .ptab.on{color:var(--ink);}
[data-theme="dark"] label{color:var(--muted);}
[data-theme="dark"] .sigline{border-top-color:#0E0F0C;}
[data-theme="dark"] .lh .tiny,[data-theme="dark"] .lh .muted,[data-theme="dark"] .lh label{color:#5A5F53;}   /* the letter preview is white paper in both themes */
[data-theme="dark"] .burger:hover,[data-theme="dark"] .userchip:hover{background:#252A20;}
[data-theme="dark"] .form-flags{background:#3A2020; color:#FFB4B4;}
[data-theme="dark"] .acc-ic.ok{background:#1E2F12; color:#A8FC69;}
[data-theme="dark"] .acc-ic.warn{background:#3A3211; color:#FFD65C;}
[data-theme="dark"] .acc-ic.missing{background:#3A1B1B; color:#FF8F8F;}
[data-theme="dark"] .syncdot.mg{background:#2A1E3D; border-color:#9B6FD4; color:#C9A6F5;}
*{box-sizing:border-box; margin:0;}
/* native controls follow the app's own theme, not the device's — otherwise buttons pick up
   white "dark mode" text on their white light-theme background and disappear */
:root{color-scheme:light;}
[data-theme="dark"]{color-scheme:dark;}
button{color:var(--ink);}
select option{background:var(--field); color:var(--ink);}
html,body,#root{height:100%;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:15px; -webkit-text-size-adjust:100%;}
.disp{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:15px; padding:9px 11px; border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); width:100%; transition:border-color .15s, box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green-dk); box-shadow:0 0 0 3px rgba(168,252,105,.4);}
input:disabled,select:disabled,textarea:disabled{background:#F2F3EE; color:var(--muted);}
input.err{border-color:var(--red); box-shadow:0 0 0 3px rgba(214,69,69,.18);}
label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.05em;}

@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@keyframes popIn{from{opacity:0; transform:scale(.95) translateY(14px);} to{opacity:1; transform:none;}}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,14px);} to{opacity:1; transform:translate(-50%,0);}}
@keyframes fillSq{from{transform:scale(.4);} to{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);}}
@keyframes denyPop{0%{transform:scale(.2) rotate(-25deg); opacity:0;} 30%{transform:scale(1.35) rotate(10deg); opacity:1;} 55%{transform:scale(.92) rotate(-7deg); opacity:1;} 80%{transform:scale(1.05) rotate(3deg); opacity:.9;} 100%{transform:scale(1) rotate(0); opacity:0;}}
@keyframes barGrow{from{width:0;}}
@keyframes wobble{0%,100%{transform:rotate(0);} 25%{transform:rotate(-3deg);} 75%{transform:rotate(3deg);}}

/* ---------- SHELL: top bar + side navigation ---------- */
.topbar{background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  padding:8px 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  position:sticky; top:0; z-index:30;}
.topbar .tl{display:flex; align-items:center; gap:10px;}
.topbar .tr{display:flex; align-items:center; gap:8px; justify-content:flex-end;}
.homebtn{background:none; border:none; padding:4px 10px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.4), background .2s;}
.homebtn img{height:38px; display:block; transition:filter .25s;}
.homebtn:hover{background:var(--bg); transform:translateY(-2px) scale(1.04);}
.homebtn:active{transform:scale(.94);}
.homebtn::after{content:"Home"; position:absolute; margin-top:52px; font-size:10px; font-weight:700; letter-spacing:.12em;
  color:var(--muted); opacity:0; transition:opacity .2s; text-transform:uppercase; pointer-events:none;}
.homebtn:hover::after{opacity:1;}
.clock{text-align:left; line-height:1.15;}
.clock .t{font-family:'Oswald',sans-serif; font-size:19px; font-weight:600; letter-spacing:.02em;}
.clock .d{font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em;}
.burger{background:var(--bg); border:1.5px solid var(--line); border-radius:11px; width:38px; height:38px; font-size:17px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s, border-color .15s, background .2s;}
.burger:hover{border-color:var(--green-dk); background:#F4FEE9;}
.burger:active{transform:scale(.92);}

.userchip{display:flex; align-items:center; gap:8px; background:var(--bg); border:1.5px solid var(--line); border-radius:99px;
  padding:5px 12px; cursor:pointer; transition:border-color .15s, transform .12s, background .2s;}
.userchip:hover{border-color:var(--green-dk); background:#F4FEE9;}
.userchip:active{transform:scale(.96);}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--green); color:#0E0F0C; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; flex-shrink:0;}

.shell{display:flex; align-items:flex-start; min-height:calc(100vh - 56px);}
.side{position:sticky; top:56px; height:calc(100vh - 56px); background:var(--side); flex-shrink:0;
  width:74px; transition:width .28s cubic-bezier(.3,.8,.3,1); overflow:hidden; z-index:25;
  display:flex; flex-direction:column; padding:12px 10px; gap:5px;}
.side.open{width:262px;}
.navbtn{display:flex; align-items:center; gap:13px; background:none; border:none; border-radius:13px;
  padding:11px 12px; cursor:pointer; color:#cfd4c8; position:relative; white-space:nowrap; width:100%;
  transition:background .18s, color .18s, transform .14s;}
.navbtn .ic{font-size:21px; flex-shrink:0; width:26px; text-align:center; transition:transform .22s cubic-bezier(.2,.9,.3,1.5);}
.navbtn .lb{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.07em; font-size:14px;
  opacity:0; transform:translateX(-8px); transition:opacity .2s .04s, transform .24s .04s;}
.side.open .navbtn .lb{opacity:1; transform:none;}
.navbtn:hover{background:rgba(168,252,105,.14); color:#fff;}
.navbtn:hover .ic{transform:scale(1.18) rotate(-6deg);}
.navbtn:active{transform:scale(.96);}
.navbtn.on{background:var(--green); color:#0E0F0C;}
.navbtn.on .lb{font-weight:600;}
.navbtn.on::before{content:""; position:absolute; left:-10px; top:11px; bottom:11px; width:4px; background:var(--green); border-radius:0 4px 4px 0;}
.navdiv{height:1px; background:rgba(255,255,255,.12); margin:7px 4px;}
.navgroup{height:1px; background:rgba(255,255,255,.10); margin:8px 10px 4px; position:relative; flex-shrink:0;}
.navgroup span{position:absolute; left:4px; top:-7px; padding-right:6px; background:var(--side); color:#7d8474; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; opacity:0; transition:opacity .2s;}
.side.open .navgroup{margin-top:14px;}
.side.open .navgroup span{opacity:1;}
.attn-more{width:100%; background:none; border:none; border-top:1px solid var(--line); padding:8px 0 4px; margin-top:4px; color:inherit; font-family:inherit; cursor:pointer;}
/* the dashboard calendar's day / month bar, and the count on each "needs attention" line */
.cal-nav{gap:6px; margin-bottom:8px;}
.attn-n{display:inline-block; min-width:22px; padding:0 7px; border-radius:999px; background:var(--soft); text-align:center; font-variant-numeric:tabular-nums;}
/* a patient's name that opens their file */
.ptlink{background:none; border:none; padding:0; margin:0; font:inherit; font-weight:700; color:inherit; cursor:pointer; text-align:start; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
.ptlink:hover,.ptlink:focus-visible{text-decoration-color:currentColor;}
.card .attn-more:first-child{border-top:none; margin-top:0;}
.sidefoot{margin-top:auto; flex-shrink:0;}
/* the side menu's sections: they scroll when the screen is shorter than the menu (the owner has the most) */
.sidescroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:5px;
  margin:0 -10px; padding:0 10px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;}
.sidescroll::-webkit-scrollbar{width:5px;} .sidescroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:3px;}
.sidescroll>*{flex-shrink:0;}
.sidehint{color:#7d8474; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:0 12px 4px; opacity:0;
  transition:opacity .2s;}
.side.open .sidehint{opacity:1;}

.page{flex:1; min-width:0;}
.page>*{animation:pageIn .34s cubic-bezier(.2,.8,.3,1);}
@keyframes pageIn{from{opacity:0; transform:translateY(14px) scale(.995);} to{opacity:1; transform:none;}}

/* in Arabic the side menu is on the right, so the round buttons move to the left */
html[dir="rtl"] .fab-ai{right:auto !important; left:16px !important;} html[dir="rtl"] .fab-chat{right:auto !important; left:84px !important;}
@media(max-width:760px){
  .topbar{padding:7px 10px; gap:6px;}
  .fab{width:44px !important; height:44px !important; font-size:20px !important; bottom:72px !important;}
  .fab-ai{right:10px !important;} .fab-chat{right:60px !important;}
  html[dir="rtl"] .fab-ai{right:auto !important; left:10px !important;} html[dir="rtl"] .fab-chat{right:auto !important; left:60px !important;}
  .homebtn img{height:30px;}
  .homebtn::after{display:none;}
  .clock .t{font-size:15px;}
  .clock .d{font-size:9.5px;}
  .shell{display:block; min-height:auto;}
  .side{position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; width:100% !important;
    flex-direction:row; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.1); overflow-x:auto;}
  .navbtn{flex-direction:column; gap:2px; padding:7px 5px; border-radius:11px;}
  .navbtn .ic{font-size:19px;}
  .navbtn .lb{opacity:1 !important; transform:none !important; font-size:9px; letter-spacing:.03em;}
  .navgroup{display:none;}
  .navbtn.on::before{display:none;}
  .navdiv,.sidehint,.sidefoot{display:none;}
  .sidescroll{display:contents;}
}

.wrap{max-width:1180px; margin:0 auto; padding:20px 20px 90px;}
.wrap>*{animation:fadeUp .28s ease;}
.card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px;}
.cardhead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.cardhead h2{font-size:19px;}
.grid{display:grid; gap:10px;}
.g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:1fr 1fr 1fr;} .g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:640px){.g3,.g4{grid-template-columns:1fr 1fr;}}

.stat{background:#0E0F0C; color:#fff; border-radius:14px; padding:14px; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; border:none; text-align:left; width:100%;}
.stat:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(14,15,12,.22);}
.stat:active{transform:translateY(-1px) scale(.98);}
.stat .n{font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; color:var(--green);}
.stat .l{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#b9bfae; margin-top:2px;}

.btn{border:none; border-radius:9px; padding:10px 15px; font-weight:700; font-size:14px; transition:transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s;}
.btn:active{transform:scale(.94);}
.btn.p{background:var(--green); color:#0E0F0C; text-transform:uppercase; font-family:'Oswald',sans-serif; letter-spacing:.05em; font-size:13.5px;}
.btn.p:hover{background:var(--green-dk); box-shadow:0 4px 14px rgba(143,232,79,.5);}
.btn.s{background:#fff; border:1.5px solid var(--line);}
.btn.s:hover{border-color:var(--ink);}
.btn.d{background:#fff; border:1.5px solid #f0caca; color:var(--red);}
.btn.d:hover{background:var(--redbg);}
.btn.wa{background:#25D366; color:#06210F; font-weight:700;}
.btn.wa:hover{box-shadow:0 4px 12px rgba(37,211,102,.4);}
.btn.sm{padding:7px 11px; font-size:13px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

table{width:100%; border-collapse:collapse;}
th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; padding:8px 9px; border-bottom:2px solid var(--ink);}
td{padding:10px 9px; border-bottom:1px solid var(--line); vertical-align:middle; transition:background .15s;}
tbody tr:hover td{background:#F8FBF2;}
tr:last-child td{border-bottom:none;}
.tscroll{overflow-x:auto;}

.chip{display:inline-block; background:var(--green); color:#0E0F0C; font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; padding:3px 10px; transform:skew(-10deg); border-radius:3px; text-transform:uppercase; letter-spacing:.04em;}
.chip>span{display:inline-block; transform:skew(10deg);}
.chip.dark{background:#0E0F0C; color:var(--green);}
.chip.gray{background:#e8eae2; color:var(--muted);}
.chip.red{background:#fbe3e3; color:var(--red);}
.tabn{display:inline-block; min-width:18px; margin-inline-start:6px; padding:0 5px; border-radius:99px; background:var(--red-solid); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;}

.strip{display:flex; gap:3px; flex-wrap:wrap; margin-top:5px;}
.sq{width:15px; height:15px; border:1.7px solid var(--ink); border-radius:3px; background:#fff; transition:background .25s;}
.sq.f{background:var(--green); animation:fillSq .3s ease;}
.sq.pre{background:#0E0F0C; border-color:#0E0F0C;}

.overlay{position:fixed; inset:0; background:rgba(14,15,12,.55); display:flex; align-items:flex-start; justify-content:center; padding:20px 12px; overflow-y:auto; z-index:50; animation:fadeUp .18s ease;}
.modal{background:#fff; border-radius:16px; padding:20px; width:100%; max-width:560px; margin:auto 0; animation:popIn .24s cubic-bezier(.2,.9,.3,1.15);}
.modal h3{font-size:20px; margin-bottom:4px;}
.mfoot{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap;}
.msection{border-top:2px solid var(--ink); margin-top:16px; padding-top:4px;}
.msection>b{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:13px;}

.confirmwrap{position:fixed; inset:0; z-index:120; background:rgba(14,15,12,.62); display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeUp .15s ease;}
.confirmbox{background:#fff; border-radius:16px; padding:22px; max-width:400px; width:100%; animation:popIn .22s cubic-bezier(.2,.9,.3,1.2); text-align:center;}
.confirmbox .big{font-size:34px; animation:wobble .6s ease;}

.deny{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:130; pointer-events:none;}
.deny span{font-size:96px; animation:denyPop 1s ease forwards; filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));}

.empty{text-align:center; color:var(--muted); padding:26px 10px; font-size:13.5px;}
.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#0E0F0C; color:var(--green); padding:11px 20px; border-radius:99px; font-weight:600; z-index:99; box-shadow:0 6px 24px rgba(0,0,0,.25); animation:toastIn .28s ease; max-width:92vw; text-align:center;}
.row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.grow{flex:1;}
.muted{color:var(--muted); font-size:13.5px;}
.tiny{color:var(--muted); font-size:12.5px;}
.name-ar{direction:rtl; font-size:13px; color:var(--muted);}
.search{max-width:280px;}
.bar{height:10px; background:#e8eae2; border-radius:99px; overflow:hidden; flex:1; min-width:90px;}
.bar>div{height:100%; background:linear-gradient(90deg,var(--green-dk),var(--green)); border-radius:99px; animation:barGrow .7s cubic-bezier(.2,.8,.3,1); transition:width .5s;}

.hep-card{border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0;}
.hep-list{margin:8px 0 0; padding-left:20px; font-size:14px;}
.hep-list li{margin:3px 0;}
.hep-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px;}
@media (max-width:860px){ .hep-split{grid-template-columns:1fr;} }
.hep-lib{max-height:440px; overflow-y:auto; border:1px solid var(--line); border-radius:10px;}
.hep-ex{display:flex; gap:10px; align-items:center; width:100%; padding:9px 11px; border:none; border-bottom:1px solid var(--line); background:transparent; color:inherit; cursor:pointer; font-family:inherit; font-size:14px;}
.hep-ex:hover{background:var(--soft);}
.hep-add{width:28px; height:28px; flex:none; border-radius:50%; background:var(--green); color:#0E0F0C; font-weight:800; display:flex; align-items:center; justify-content:center;}
.hep-item{border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px;}
.hep-dose{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:8px 0;}
.hep-media{border-top:1px dashed var(--line); margin-top:8px; padding-top:8px;}
.hep-media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px;}
.hep-media-item{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#000;}
.hep-media-item img,.hep-media-item video{display:block; width:100%; height:110px; object-fit:cover;}
.hep-media-item .btn{position:absolute; top:4px; right:4px; padding:2px 7px;}
.hep-dose input{padding:6px 8px;}
.form-kinds{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.form-kind{border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--bg2, transparent);}
.form-kind.due{border-color:var(--green-dk); box-shadow:inset 3px 0 0 var(--green-dk);}
.form-due{display:table; margin-bottom:6px; font-size:11px;}
.form-guide{border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin-bottom:12px; background:var(--soft);}
.form-guide summary{cursor:pointer; font-weight:700;}
.form-guide-rows{display:grid; gap:8px; margin-top:8px; font-size:14px;}
.form-guide-rows>div{display:grid; grid-template-columns:170px 1fr; gap:10px;}
.form-guide-rows>div.tiny{display:block;}
@media (max-width:640px){ .form-guide-rows>div{grid-template-columns:1fr; gap:2px;} }
.form-warn{border-color:var(--red); box-shadow:inset 3px 0 0 var(--red);}
.form-ans{margin-top:10px; border-top:1px solid var(--line); padding-top:8px;}
.form-flags{background:#fdecea; color:#8a1c12; border-radius:10px; padding:8px 10px; margin-bottom:8px; font-size:13.5px;}
.form-sec{margin:8px 0 4px;}
.form-sech{font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted, #8a8f84); margin:10px 0 4px;}
.form-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:10px; padding:5px 0; border-bottom:1px dashed var(--line); align-items:start;}
.form-row.flag b{color:var(--red);}
.formfill{position:fixed; inset:0; z-index:200; background:#f5f8f1; display:flex; flex-direction:column;}
.formfill-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#101110; color:#fff;}
.formfill-bar .tiny{color:#c9cfc1;}
.formfill iframe{flex:1; width:100%; border:0; background:#f5f8f1;}
@media (max-width:640px){ .form-row{grid-template-columns:1fr; gap:2px;} }
.acc-table{width:100%; border-collapse:collapse; font-size:13px;}
.acc-table th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:6px 8px; border-bottom:1.5px solid var(--line);}
.acc-table td{padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
.acc-split{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px;}
@media (max-width:820px){ .acc-split{grid-template-columns:1fr;} }
.acc-preview{background:var(--field); border:1px solid var(--line); border-radius:12px; padding:12px; align-self:start;}
.acc-q{background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:10px; margin:8px 0;}
.acc-detail{border:1.5px solid var(--ink); border-radius:12px; padding:12px; margin:10px 0;}
.acc-check{display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line);}
.acc-ic{width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none;}
.acc-ic.ok{background:#dff5d0; color:#1f7a3a;} .acc-ic.warn{background:#fff1cc; color:#9a6a00;} .acc-ic.missing{background:#fbe3e3; color:var(--red);}
.hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;}
.hubcard{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:18px 15px; text-align:left; cursor:pointer; transition:transform .18s, border-color .18s, box-shadow .18s; font-family:inherit;}
.hubcard:hover{transform:translateY(-4px) scale(1.02); border-color:var(--green-dk); box-shadow:0 10px 26px rgba(14,15,12,.13);}
.hubcard:active{transform:scale(.97);}
.hubcard .ic{font-size:30px;}
.hubcard b{display:block; margin-top:8px; font-size:14.5px;}
.hubcard .tiny{margin-top:2px;}

.setlist{display:flex; flex-direction:column; gap:8px;}
.setsec{border:1.5px solid var(--line); border-radius:14px; background:var(--paper); transition:border-color .15s, box-shadow .15s;}
.setsec.open{border-color:var(--green-dk); box-shadow:0 6px 18px rgba(14,15,12,.07);}
.sethead{display:flex; align-items:center; gap:12px; width:100%; background:none; border:none; border-radius:13px; padding:12px 14px; text-align:start; font:inherit; color:var(--ink);}
.sethead:hover{background:var(--soft);}
.sethead:focus-visible{outline:2px solid var(--green-dk); outline-offset:-2px;}
.sethead .ic{font-size:22px; width:30px; text-align:center; flex:none;}
.sethead .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.sethead b{font-size:14.5px;}
.sethead .chev{flex:none; color:var(--muted); font-size:13px; transition:transform .2s;}
.setsec.open .chev{transform:rotate(180deg);}
.setflag{flex:none; font-size:11.5px; font-weight:700; background:var(--warn-chip); color:var(--warn-chip-ink); border-radius:99px; padding:2px 9px; white-space:nowrap;}
.setbody{padding:6px 16px 16px; border-top:1px solid var(--line); animation:fadeUp .18s ease;}
.setlock{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--soft); border:1px dashed var(--line); border-radius:10px; padding:8px 10px; margin:10px 0 4px;}
.setpreview{white-space:pre-wrap; background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.55; color:var(--ink);}
.setdirty{font-size:12px; font-weight:700; color:var(--warn-ink);}
@media (max-width:560px){ .setbody .g2{grid-template-columns:1fr;} .sethead{padding:11px 12px; gap:10px;} .setbody{padding:4px 12px 14px;} }

.moremenu{position:relative; display:inline-block;}
.menupop{position:absolute; top:calc(100% + 6px); inset-inline-start:0; z-index:60; min-width:240px; max-width:calc(100vw - 32px);
  background:var(--paper); border:1.5px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(14,15,12,.18); padding:5px; animation:fadeUp .14s ease;}
.menupop.end{inset-inline-start:auto; inset-inline-end:0;}
.menuitem{display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; border-radius:8px; padding:9px 10px;
  font:inherit; font-size:14px; color:var(--ink); text-align:start;}
.menuitem:hover,.menuitem:focus-visible{background:var(--soft); outline:none;}
.menuitem .mi{width:22px; text-align:center; flex:none;}
.menuitem .mh{font-size:11.5px; font-weight:700; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:0 7px;}
.menuitem.danger{color:var(--red);}

.taskrow{display:flex; align-items:flex-start; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line);}
.taskrow:last-child{border-bottom:none;}
.tick{flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--muted); background:var(--field); color:#0E0F0C;
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; padding:0; margin-top:1px; transition:background .15s, border-color .15s;}
.tick:hover{border-color:var(--green-dk); background:var(--tint-green);}
.tick.on{background:var(--green); border-color:var(--green-dk);}
.tasktext{font-size:14.5px; line-height:1.4; overflow-wrap:anywhere;}
.taskrow.done .tasktext{text-decoration:line-through; color:var(--muted);}
.taskmeta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:4px;}
.taskmeta .chip{font-size:11px; padding:1px 8px;}
.taskmore{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; background:var(--soft); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin-top:8px;}
.taskmore label{margin-top:0;}
.linkbtn{background:none; border:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
/* ---- Shop & stock ---- */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.02em;}
.stockpill{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; border:1px solid var(--line);}
.pos{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:14px; align-items:start;}
.ptiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.ptile{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; background:var(--paper); border:1.5px solid var(--line);
  border-radius:14px; padding:12px; font:inherit; color:var(--ink); cursor:pointer; min-height:136px; transition:transform .12s, border-color .15s, box-shadow .15s;}
.ptile:hover{border-color:var(--green-dk); box-shadow:0 4px 14px rgba(0,0,0,.07);}
.ptile:active{transform:scale(.97);}
.ptile b{font-size:13.5px; line-height:1.25;}
.ptile .pic{font-size:26px; line-height:1;}
.ptile .pprice{font-family:'Oswald',sans-serif; font-weight:600; font-size:17px; margin-top:auto;}
.ptile.out{opacity:.62;}
.ptile .incart{position:absolute; top:8px; right:8px; min-width:24px; height:24px; border-radius:99px; background:var(--green); color:#0E0F0C; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; padding:0 6px;}
html[dir="rtl"] .ptile{text-align:right;} html[dir="rtl"] .ptile .incart{right:auto; left:8px;}
.cartline{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line);}
.cartline .grow{display:flex; flex-direction:column;}
.cartline .qty{display:flex; align-items:center; gap:6px;}
.cartline .qty .btn{padding:4px 10px; min-width:34px;}
.cartline .lt{min-width:64px; text-align:right;}
.totrow{display:flex; justify-content:space-between; padding:6px 0; font-size:14px;}
.totrow.minus b{color:var(--red);}
.totrow.grand{border-top:2px solid var(--ink); margin-top:6px; padding-top:8px; font-family:'Oswald',sans-serif; font-size:20px;}
.changedue{margin-top:8px; padding:10px 12px; border-radius:10px; background:var(--tint-green); border:1.5px solid var(--green-dk); font-size:14px;}
.changedue b{font-family:'Oswald',sans-serif; font-size:19px; margin-left:6px;}
.recbox{margin-top:10px; padding:9px 11px; border-radius:10px; background:var(--tint-blue); color:var(--ink); border:1px solid var(--line);}
.recbox>b{font-size:13px; color:var(--blue-ink);}
.scanin{font-size:15px; padding:12px 14px;}
.scanbox{position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:4/3;}
.scanbox video{width:100%; height:100%; object-fit:cover; display:block;}
.scanline{position:absolute; left:8%; right:8%; top:50%; height:2px; background:var(--green); box-shadow:0 0 12px var(--green); animation:scanMove 1.6s ease-in-out infinite alternate;}
@keyframes scanMove{from{top:28%} to{top:72%}}
.minibox{display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--soft);}
.minibox b{font-family:'Oswald',sans-serif; font-size:17px;}
@media (max-width:980px){ .pos{grid-template-columns:1fr;} }
@media (max-width:520px){ .ptiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;} .ptile{min-height:122px; padding:10px;} }
[data-theme="dark"] .ptile{background:var(--field); border-color:var(--line);}
[data-theme="dark"] .stockpill{border-color:transparent;}
.addlink{background:none; border:none; padding:7px 0 0; font:inherit; font-size:12.5px; font-weight:600; color:var(--muted);}
.addlink:hover{color:var(--ink);}

.reqgroup{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 2px 6px;}
.reqpick{border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper);}
.reqopt{display:flex; align-items:center; gap:12px; width:100%; background:none; border:none; border-top:1px solid var(--line);
  padding:11px 13px; font:inherit; color:var(--ink); text-align:start;}
.reqopt:first-child{border-top:none;}
.reqopt:hover,.reqopt:focus-visible{background:var(--soft); outline:none;}
.reqopt .ic{font-size:20px; width:28px; text-align:center; flex:none;}
.reqopt .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.reqopt b{font-size:14px;}
.reqopt .chev{color:var(--muted); flex:none; font-size:15px;}
.reqopt.sub{padding-inline-start:28px; background:var(--soft);}
html[dir="rtl"] .reqopt .chev{transform:scaleX(-1);}
.reqchosen{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1.5px solid var(--green-dk); border-radius:12px;
  background:var(--tint-green); margin:4px 0 4px;}
.reqchosen .ic{font-size:20px;}
.reqreason{font-size:13.5px; line-height:1.5; margin-top:10px; white-space:pre-line; overflow-wrap:anywhere;}

.tip{position:fixed; z-index:200; background:#0E0F0C; color:#fff; border-radius:10px; padding:11px 14px; font-size:13px; line-height:1.55; max-width:260px; box-shadow:0 10px 30px rgba(0,0,0,.35); pointer-events:none; animation:fadeUp .12s ease;}
.tip b{color:var(--green); font-size:14px;}
.tip .k{color:#b9bfae;}
.schedrow{display:grid; grid-template-columns:24px 1fr 1fr 88px 34px; gap:6px; align-items:center; padding:4px 0; border-bottom:1px solid var(--line);}
.schedrow input{padding:5px 7px; font-size:12.5px;}
.syncdot{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--muted); padding:4px 9px; border-radius:99px; background:var(--bg); border:1px solid var(--line); white-space:nowrap;}
.syncdot i{width:8px; height:8px; border-radius:50%; display:inline-block; background:#9aa192;}
.syncdot.on i{background:#E8C33C; animation:pulseDot 1s infinite;}
.syncdot.ok i{background:#7ADE3A;}
.syncdot.mg{background:#EFE6FA; border-color:#9B6FD4; color:#6B3FA0;}
.syncdot.mg i{background:#9B6FD4;}
.syncdot.er{background:var(--redbg); border-color:#F0CACA; color:var(--red);}
.syncdot.er i{background:var(--red);}
@keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.35;}}
.statussel{padding:6px 9px; font-size:13px; font-weight:700; border-radius:8px; width:auto; border-width:2px; cursor:pointer;}

/* ---------- loading screen: the logo revealed by a slanted green bar, the recovery curve drawing,
   the letterhead's four bars pulsing until the clinic's data is ready, then a lift into the login.
   The standalone page draws the same thing before this code has even loaded (#boot).          ---------- */
.ld{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  background:#0E0F0C; color:#fff; font-family:'Inter',system-ui,sans-serif;}
.ld-stack{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:18px; transition:transform .6s cubic-bezier(.6,0,.2,1), opacity .5s ease;}
.ld-logo{position:relative; width:min(300px, 64vw);}
.ld-logo img{display:block; width:100%; height:auto; clip-path:inset(0 100% 0 0); animation:ldReveal .9s cubic-bezier(.65,0,.25,1) .35s forwards;}
.ld-sweep{position:absolute; top:-14%; bottom:-14%; left:0; width:16px; background:#A8FC69; transform:skewX(-14deg); opacity:0;
  animation:ldSweep .9s cubic-bezier(.65,0,.25,1) .35s forwards;}
@keyframes ldReveal{to{clip-path:inset(0 0 0 0);}}
@keyframes ldSweep{0%{left:-4%; opacity:1;} 88%{opacity:1;} 100%{left:102%; opacity:0;}}
@keyframes ldUp{to{opacity:1; transform:none;}}
.ld-bars{display:flex; gap:5px; margin-top:6px; opacity:0; animation:ldUp .4s ease 1.2s forwards;}
.ld-bars i{width:7px; height:22px; background:#2A2E26; transform:skewX(-14deg); animation:ldBar 1.2s ease-in-out infinite;}
.ld-bars i:nth-child(2){animation-delay:.15s;} .ld-bars i:nth-child(3){animation-delay:.3s;} .ld-bars i:nth-child(4){animation-delay:.45s;}
@keyframes ldBar{0%,100%{background:#2A2E26;} 35%{background:#A8FC69;}}
.ld-msg{font-size:12px; color:#6F756B; text-align:center; line-height:1.6; opacity:0; transform:translateY(6px); animation:ldUp .5s ease 1.4s forwards;}
.ld-msg .ar{font-family:'IBM Plex Sans Arabic','Inter',sans-serif; display:block;}
.ld-curve{position:absolute; left:0; right:0; bottom:0; width:100%; height:22vh; max-height:230px; pointer-events:none;}
.ld-curve path{fill:none; stroke-dasharray:1000; stroke-dashoffset:1000; vector-effect:non-scaling-stroke;}
.ld-c1{stroke:#A8FC69; stroke-width:3; stroke-linecap:round; animation:ldDraw 1.6s cubic-bezier(.4,0,.2,1) .1s forwards;}
.ld-c2{stroke:#2C3028; stroke-width:2; animation:ldDraw 1.6s cubic-bezier(.4,0,.2,1) .3s forwards;}
.ld-peak{fill:#A8FC69; opacity:0; transform-box:fill-box; transform-origin:center; animation:ldPeak 2.4s ease-out 1.5s infinite;}
@keyframes ldDraw{to{stroke-dashoffset:0;}}
@keyframes ldPeak{0%{opacity:1; transform:scale(1);} 60%,100%{opacity:0; transform:scale(2.6);}}
.ld.done .ld-stack{transform:translateY(-26px); opacity:0;}
.ld.done .ld-curve{opacity:0; transition:opacity .5s ease .1s;}
.ld.gone{opacity:0; transition:opacity .35s ease .35s; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .ld *, .ld{animation:none !important; transition:none !important;}
  .ld-logo img{clip-path:none;} .ld-sweep{display:none;}
  .ld-bars,.ld-msg{opacity:1; transform:none;}
  .ld-curve path{stroke-dashoffset:0;}
  .ld-bars i:first-child{background:#A8FC69;}
}

/* ---------- login: Performance Lab (animated, greets the person) ---------- */
.login{min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#0E0F0C; color:#fff; font-family:'Alexandria','Inter',system-ui,sans-serif;
  padding:40px clamp(20px,5vw,72px);}
.loginbox{position:relative; z-index:2; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px;}
.loginbox img{height:44px; filter:brightness(0) invert(1);}
.loginbox .disp{color:#fff;}

.lg-curve{position:absolute; left:0; right:0; bottom:0; width:100%; height:22vh; max-height:230px; pointer-events:none; z-index:0;}
.lg-curve path{fill:none; stroke-dasharray:1000;}
.lg-c1{stroke:#A8FC69; stroke-width:3; stroke-linecap:round; animation:lgDraw 8s ease-in-out .2s infinite both;}
.lg-c2{stroke:#2C3028; stroke-width:2; animation:lgDraw 8s ease-in-out .6s infinite both;}
.lg-curve path{vector-effect:non-scaling-stroke;}
.lg-peak{fill:#A8FC69; transform-box:fill-box; transform-origin:center; animation:lgPulse 2.4s ease-out infinite;}
@keyframes lgDraw{0%{stroke-dashoffset:1000;opacity:1}45%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lgPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(2.4);opacity:0}}
@keyframes lgRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lgMsg{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgBlink{0%,100%{opacity:1}50%{opacity:.25}}
.lg-rise{animation:lgRise .8s ease-out both;}

.lg-top{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.lg-top img{height:44px; width:auto; display:block;}
.lg-clock{display:flex; align-items:center; gap:12px; font-size:14px; color:#C9CEC4;}
.lg-clock i{width:5px; height:5px; border-radius:50%; background:#A8FC69; animation:lgBlink 2s ease-in-out infinite;}
.lg-clock b{font-family:'Oswald',sans-serif; font-size:20px; font-weight:500; color:#fff; letter-spacing:.04em;}

.lg-main{position:relative; z-index:2; flex:1; width:100%; max-width:1320px; margin:0 auto; padding:32px 0 22vh;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(32px,6vw,110px); align-items:center;}
.lg-hello{display:flex; flex-direction:column; gap:20px; min-width:0;}
.lg-chip{align-self:flex-start; padding:6px 14px; background:#A8FC69; color:#0E0F0C; font-size:12px; font-weight:700; letter-spacing:.18em; transform:skewX(-14deg);}
.lg-chip span{display:inline-block; transform:skewX(14deg);}
.lg-h1{font-family:'Oswald',sans-serif; font-size:clamp(52px,7.2vw,104px); font-weight:700; line-height:.95; text-transform:uppercase; color:#fff; overflow-wrap:anywhere;}
.lg-h1 em{font-style:normal; color:#A8FC69;}
.lg-ar{align-self:flex-start; font-size:clamp(20px,2vw,26px); font-weight:600; color:#C9CEC4;}
.lg-msgbox{min-height:84px; margin-top:8px;}
.lg-msg{display:flex; flex-direction:column; gap:8px; animation:lgMsg 7s ease-in-out both;}
.lg-msg-en{font-size:clamp(16px,1.5vw,20px); line-height:1.5; color:#E4E7E0; max-width:600px;}
.lg-msg-ar{align-self:flex-start; font-size:16px; color:#8C9288;}

.lg-card{background:#161813; border:1px solid #2A2D27; border-radius:22px; padding:34px 38px;
  display:flex; flex-direction:column; gap:14px; animation:lgRise .9s cubic-bezier(.2,.8,.2,1) .3s both;}
.lg-h2{font-family:'Oswald',sans-serif; font-size:32px; font-weight:600; text-transform:uppercase; color:#fff;}
.lg-sub{font-size:14px; color:#8C9288;}
.lg-lab{font-size:12px; font-weight:600; letter-spacing:.12em; color:#C9CEC4; margin-top:6px;}
.lg .lg-in{height:56px; padding:0 18px; background:#0E0F0C; border:1px solid #33372F; border-radius:14px; color:#fff; font-size:16px; width:100%;}
.lg .lg-in::placeholder{color:#6F756B;}
.lg .lg-in:focus{border-color:#A8FC69; box-shadow:0 0 0 3px rgba(168,252,105,.25);}
.lg .lg-in:-webkit-autofill{-webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 60px #0E0F0C inset;}
.lg .pininput{letter-spacing:.35em; font-size:22px;}
.lg-row{display:flex; align-items:center; justify-content:space-between; min-height:44px;}
.lcheck{display:flex; align-items:center; gap:9px; background:none; border:none; padding:0; min-height:44px; color:#C9CEC4; font-size:14px; user-select:none;}
.lcheck i{width:18px; height:18px; border-radius:5px; border:1.5px solid #6F756B; display:inline-block; position:relative; transition:background .2s, border-color .2s;}
.lcheck.on i{background:#A8FC69; border-color:#A8FC69;}
.lcheck.on i::after{content:"✓"; position:absolute; inset:0; font-size:12px; line-height:17px; text-align:center; color:#0E0F0C; font-weight:700;}
.lg-link{background:none; border:none; padding:0; min-height:40px; color:#A8FC69; font-size:14px; font-weight:500;}
.lg-link:hover{text-decoration:underline;}
.lg-center{align-self:center;}
.lg-btn{height:56px; margin-top:6px; border:none; border-radius:999px; background:#A8FC69; color:#0E0F0C;
  font-size:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .14s, filter .2s;}
.lg-btn:hover{filter:brightness(1.06);}
.lg-btn:active{transform:scale(.98);}
.lg-btn:disabled{opacity:.6;}
.lg button:focus-visible{outline:2px solid #A8FC69; outline-offset:3px;}
.lerr{padding:11px 14px; border-radius:12px; font-size:14px; color:#FFB4A8; background:#2A1412; border:1px solid #6B2A22; animation:shake .45s ease;}

.lg-who{display:flex; align-items:center; gap:16px;}
.lg-ring{position:relative; width:76px; height:76px; flex-shrink:0;}
.lg-ring svg{position:absolute; inset:0; width:76px; height:76px; animation:lgSpin 6s linear infinite;}
.lg-ring .bg{fill:none; stroke:#2A2D27; stroke-width:3;}
.lg-ring .arc{fill:none; stroke:#A8FC69; stroke-width:3; stroke-linecap:round; stroke-dasharray:70 150;}
.lg-av{position:absolute; left:8px; top:8px; width:60px; height:60px; border-radius:50%; background:#A8FC69; color:#0E0F0C;
  display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:22px; font-weight:600;}
.lg-av.sm{position:static; width:40px; height:40px; font-size:15px; flex-shrink:0;}
.lg-name{font-size:19px; font-weight:600; color:#fff; overflow-wrap:anywhere;}
.lg-green{align-self:flex-start;}

.lg-list{display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; padding-right:2px;}
.lg-staff{display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 14px; background:#0E0F0C; border:1px solid #2A2D27; border-radius:12px; color:#fff; text-align:left; transition:border-color .18s;}
.lg-staff:hover{border-color:#A8FC69;}
.lg-staff b{display:block; font-size:15px; font-weight:600;}
.lg-staff small{display:block; font-size:12px; color:#8C9288;}

@media(max-width:900px){
  .lg-main{grid-template-columns:1fr; padding:28px 0 60px; gap:28px;}
  .lg-msgbox{min-height:0;}
  .lg-card{padding:26px 22px;}
}
@media(max-width:520px){ .lg-clock span, .lg-clock i{display:none;} .lg-top img{height:36px;} }
/* phones: tighter spacing so the sign-in button shows without scrolling */
@media(max-width:520px){
  .login{padding-block:18px;}
  .lg-main{padding-top:16px; gap:20px;}
  .lg-hello{gap:10px;}
  .lg-h1{font-size:44px;}
  html[lang="ar"] .lg-h1{font-size:40px;}
  .lg-msgbox{margin-top:0;}
  .lg-card{gap:10px;}
}
@media(prefers-reduced-motion:reduce){ .lg *, .lg{animation:none !important;} }
/* fitted to this system: language button beside the clock, right-to-left, Arabic lettering */
.lg-topr{display:flex; align-items:center; gap:14px;}
.lg-lang{min-width:40px; height:40px; padding:0 12px; border-radius:999px; background:transparent; border:1px solid #33372F;
  color:#fff; font-size:15px; font-weight:700; transition:border-color .18s;}
.lg-lang:hover{border-color:#A8FC69;}
html[dir="rtl"] .lg-staff{text-align:right;}
html[dir="rtl"] .lg-arrow{transform:scaleX(-1);}
html[lang="ar"] .lg-h1, html[lang="ar"] .lg-h2, html[lang="ar"] .lg-btn{font-family:'Alexandria','IBM Plex Sans Arabic',sans-serif;}
html[lang="ar"] .lg-h1{line-height:1.2; font-size:clamp(44px,6vw,88px);}

/* calendar */
.cal{margin-top:6px;}
.calhead{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;}
.calhead div{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:center; font-weight:700;}
.calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.calday{border:1.5px solid var(--line); border-radius:10px; min-height:92px; padding:4px 5px; background:#fff; cursor:pointer; text-align:left; position:relative; transition:transform .13s, border-color .15s, box-shadow .15s; font-family:inherit; overflow:hidden;}
.calday:hover{border-color:var(--ink); transform:translateY(-2px); box-shadow:0 4px 10px rgba(14,15,12,.1);}
.calday:active{transform:scale(.96);}
.calday .dn{font-weight:700; font-size:14px;}
.calday.out{opacity:.3; cursor:default; transform:none !important; box-shadow:none !important; border-color:var(--line) !important; background:transparent;}
.calday.today{border-color:var(--green-dk); background:#F4FEE9; box-shadow:0 0 0 2px var(--green);}
.calday.closed{background:var(--redbg); border-color:#F3D3D3;}
.calday.closed .dn{color:var(--red);}
.calday .closedlbl{font-size:10px; color:var(--red); text-transform:uppercase; font-weight:700; letter-spacing:.03em; line-height:1.2;}
.calday.sel{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink);}
.calentry{font-size:11px; line-height:1.3; border-radius:4px; padding:1px 4px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; border-left:3px solid; max-width:100%;}
.legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.legend .it{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); font-weight:600;}
.legend .dotc{width:11px; height:11px; border-radius:3px;}

/* documents & invoice — matches the printed IMPACT letterhead */
.lh{background:#fff; color:#101110; border:1px solid var(--line); border-radius:12px; padding:34px 38px 0;
  font-size:13px; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
.lh-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.lh-logo{height:44px;}
.lh-org{text-align:right;}
.lh-ar{font-weight:700; font-size:16px; direction:rtl;}
.lh-tag{font-size:9.5px; letter-spacing:.22em; color:#8A8F84; font-weight:600; margin-top:3px;}
.lh-rule{height:6px; background:var(--green); margin:16px 0 22px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);}
.lh-title{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;}
.lh-t-en{font-size:27px; font-weight:800; letter-spacing:-.01em; line-height:1.1;}
.lh-t-ar{font-size:14px; font-weight:700; color:#5FA82F; margin-top:4px; direction:rtl;}
.lh-t-meta{text-align:right; flex-shrink:0;}
.lh-t-meta > div + div{margin-top:8px;}
.lh-t-meta.grid{display:grid; grid-template-columns:auto auto; gap:8px 22px;}
.lh-t-meta.grid > div + div{margin-top:0;}
.lh-status{display:inline-block; margin-top:10px; padding:4px 10px; font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; background:#FFE08A; color:#101110; transform:skewX(-10deg);}
.lh-status.paid{background:var(--green);}
.lh-status.refund{background:#F4C7C7;}
.lh-status span{display:inline-block; transform:skewX(10deg);}
.lh-totals{margin-left:auto; width:min(100%, 380px); margin-top:12px; font-variant-numeric:tabular-nums;}
.lh-trow{display:flex; justify-content:space-between; gap:16px; padding:6px 12px; font-size:13.5px;}
.lh-trow .k{color:#4A4F45;}
.lh-trow.minus .v{color:#2E7D1E;}
.lh-trow.rule{border-top:1px solid #DDE1D6; margin-top:2px; padding-top:9px;}
.lh-grand{display:flex; justify-content:space-between; align-items:baseline; padding:0 12px;}
.lh-grand .k{font-size:11px; font-weight:800; letter-spacing:.16em;}
.lh-grand .v{font-size:22px; font-weight:800;}
.lh-words{padding:6px 12px 0; font-size:11.5px; color:#5A5F53; line-height:1.5;}
.lh-words .ar{direction:rtl; text-align:right; display:block;}
.lh-due{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding:10px 12px; background:#101110; color:#fff;}
.lh-due .k{font-size:10.5px; font-weight:800; letter-spacing:.16em;}
.lh-due .v{font-size:18px; font-weight:800; color:var(--green);}
.lh-note{padding:8px 12px 0; font-size:11.5px; color:#5A5F53; text-align:right;}
.lh td small{display:block; color:#8A8F84; font-size:11.5px; margin-top:2px;}
.lh-lbl{font-size:9px; letter-spacing:.2em; color:#8A8F84; font-weight:700; text-transform:uppercase;}
.lh-val{font-size:16px; font-weight:800; margin-top:2px;}
.lh-strip{display:flex; background:#F5FEEC; border-left:5px solid var(--green); margin:24px 0 6px; padding:14px 6px;}
.lh-cell{flex:1; padding:0 16px; border-left:1px solid #DCEBCB;}
.lh-cell:first-child{border-left:none;}
.lh-cellv{font-size:14px; font-weight:700; margin-top:4px; word-break:break-word;}
.lh-body{padding:14px 0 4px;}
.fs-wrap{display:grid; grid-template-columns:220px minmax(0,1fr); gap:12px; align-items:start;}
.fs-side{position:sticky; top:12px; padding:8px; display:flex; flex-direction:column; gap:2px;}
.fs-node{display:flex; justify-content:space-between; gap:6px; width:100%; text-align:left; border:0; background:none; color:inherit; font:inherit; font-size:13.5px; padding:7px 10px; border-radius:8px; cursor:pointer;}
.fs-node:hover{background:var(--soft);} .fs-node.on{background:var(--tint-green); font-weight:700;} .fs-node.sub{font-size:12.5px; font-weight:600;}
.fs-node.warn{color:#B4541E; margin-top:6px;}
.fs-main{position:relative; min-height:320px;} .fs-main.drop{outline:2.5px dashed var(--green-dk); outline-offset:-6px;}
.fs-dropmsg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; background:rgba(168,252,105,.18); border-radius:inherit; pointer-events:none;}
.fs-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap;} .fs-bar .fs-crumbs{margin:0;}
.fs-head{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:8px 0 6px;}
.fs-table{width:100%; border-collapse:collapse;} .fs-table td,.fs-table th{padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px;}
.fs-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.fs-table td .btn{margin-left:4px;}
.fs-name{border:0; background:none; padding:0; font:inherit; font-weight:700; color:inherit; cursor:pointer; text-align:left;} .fs-name:hover{text-decoration:underline;}
.fs-mobile-nav{display:none; margin-bottom:8px;}
.fs-moving{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; margin:6px 0 10px; border-radius:12px; border:1.5px solid var(--green-dk); background:var(--tint-green);}
@media (max-width:860px){ .fs-wrap{grid-template-columns:1fr;} .fs-side{display:none;} .fs-mobile-nav{display:block;} .fs-hide-m{display:none;}
  .fs-table td:last-child{white-space:normal !important;} .fs-table td:last-child .btn{display:block; width:100%; margin:0 0 4px;} .fs-bar input.search{max-width:none !important;} }
.fs-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:4px 0 10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--soft);}
.fs-crumb{border:0; background:none; color:inherit; font:inherit; font-weight:600; cursor:pointer; padding:2px 6px; border-radius:6px;}
.fs-crumb:hover{background:var(--tint-green);}
.fs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:10px;}
.fs-folder{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:inherit; cursor:pointer; text-align:left;}
.fs-folder:hover{border-color:var(--green-dk); background:var(--tint-green);}
.fs-ic{font-size:30px; line-height:1;} .fs-nm{font-weight:700; font-size:13.5px; word-break:break-word;}
.lh-verify{display:flex; gap:12px; align-items:center; margin-top:14px; padding-top:10px; border-top:1px solid #E4E7DF;}
.lh-qr-ph{width:56px; height:56px; border:1.5px dashed #C9CEC0; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#B9BEB2; font-size:11px; font-weight:700;}
.lw-split{display:grid; grid-template-columns:minmax(330px,1fr) minmax(0,1.2fr); gap:16px; align-items:start;}
.lw-prev{position:sticky; top:12px; max-height:calc(100vh - 110px); overflow:auto; border-radius:14px; background:var(--soft); padding:10px;}
.lw-tabs{display:none; gap:6px; margin-bottom:10px;}
.lw-row{width:100%; gap:10px; padding:10px 12px; margin-bottom:6px; border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer; color:inherit;}
.lw-row:hover{border-color:var(--green-dk);}
.lw-edit th input{min-width:80px;}
@media (max-width:900px){ .lw-split{grid-template-columns:1fr;} .lw-tabs{display:flex;}
  .lw-split[data-view=edit] .lw-prev{display:none;} .lw-split[data-view=preview] .lw-edit{display:none;} .lw-prev{position:static; max-height:none;} }
.lh-sec{margin-bottom:18px;}
.lh-h{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.lh-mark{width:11px; height:11px; background:var(--green); display:inline-block;
  clip-path:polygon(22% 0, 100% 0, 78% 100%, 0 100%); flex-shrink:0;}
.lh-p{font-size:13.5px; line-height:1.75; white-space:pre-line; color:#2A2E27;}
.lh-terms{margin-top:14px; padding-top:8px; border-top:1px solid #E4E7DF; display:grid; grid-template-columns:1fr 1fr; gap:18px; font-size:10px; line-height:1.55; color:#8A8F84; white-space:pre-line;}
@media (max-width:560px){ .lh-terms{grid-template-columns:1fr; gap:6px;} }
.lh table{width:100%; border-collapse:collapse; margin-top:4px;}
.lh thead th{background:#101110; color:#fff; padding:11px 12px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; text-align:left; border:none;}
.lh thead th.r,.lh tbody td.r{text-align:right;}
.lh tbody td{border:none; border-bottom:1px solid #DDE1D6; padding:11px 12px; font-size:13.5px; background:#fff;}
.lh tbody tr:hover td{background:#fff;}
.lh-totrule{height:6px; background:var(--green); margin:14px 0 10px;}
.lh-tot{display:flex; align-items:baseline; justify-content:flex-end; gap:12px;}
.lh-tot .v{font-size:21px; font-weight:800;}
.lh-sign{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:34px; padding-bottom:22px;}
.lh-sig{height:44px; display:block;}
.lh-sigline{border-top:2px solid #101110; width:210px; margin-top:4px;}
.lh-signer{font-size:13px; font-weight:800; margin-top:6px;}
.lh-stamp{width:150px; height:118px; border:2px dashed #D5DACB; display:flex; align-items:center; justify-content:center;}
.lh-stamp-img{height:112px; transform:rotate(-5deg); opacity:.95;}
.lh-foot{background:#101110; color:#fff; margin:0 -38px; padding:12px 26px; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap; font-size:11.5px;}
.lh-foot b{font-weight:800;}
.lh-dot{color:var(--green);}
.lh-bars{display:inline-flex; gap:2.5px; margin-right:12px;}
.lh-bars i{width:4px; height:15px; background:var(--green); transform:skewX(-14deg); display:block;}
.lh-addr{display:flex; justify-content:space-between; gap:12px; margin:0 -38px; padding:10px 26px;
  font-size:9.5px; letter-spacing:.11em; color:#9AA093; text-transform:uppercase; font-weight:600;}
@media(max-width:640px){
  .lh{padding:20px 18px 0;}
  .lh-foot,.lh-addr{margin:0 -18px; padding-left:16px; padding-right:16px;}
  .lh-strip{flex-wrap:wrap; gap:10px 0;}
  .lh-cell{flex:1 1 46%; border-left:none;}
  .lh-t-en{font-size:21px;}
  .lh-addr{flex-direction:column; gap:3px;}
}
.docbody{white-space:pre-line; margin-top:12px; line-height:1.65; font-size:13.5px;}
.sigrow{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-top:26px; flex-wrap:wrap;}
.sigbox{text-align:center; min-width:150px;}
.sigbox img{height:52px; display:block; margin:0 auto;}
.sigline{border-top:1.5px solid var(--ink); padding-top:4px; font-size:11px; margin-top:4px;}
.stamp{width:110px; height:110px; border:3px double var(--green-dk); border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--green-dk); transform:rotate(-8deg); padding:10px; line-height:1.5; opacity:.9;}
.stampimg{height:100px; transform:rotate(-6deg); opacity:.92;}

thead th{position:sticky; top:0; background:var(--paper); z-index:2;}

/* patient page */
.ptop{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:12px;}
.ptabs{display:flex; gap:4px; overflow-x:auto; border-bottom:2px solid var(--line); margin-bottom:14px; padding-bottom:0;}
.ptab{background:none; border:none; padding:11px 15px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:14px; color:var(--muted); white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s;}
.ptab:hover{color:var(--ink);}
.ptab.on{color:var(--ink); border-bottom-color:var(--green-dk); font-weight:600;}
.ptab .cnt{background:var(--bg); border-radius:99px; padding:1px 7px; font-size:12px; margin-left:5px;}
.crumb{font-size:13px; color:var(--muted); margin-bottom:8px;}
.crumb button{background:none; border:none; color:var(--muted); font-size:13px; padding:0; text-decoration:underline; cursor:pointer;}
.crumb button:hover{color:var(--ink);}
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.kv>div .k{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.kv>div .v{font-size:14.5px; margin-top:1px;}

/* mobile: tables become cards */
@media(max-width:760px){
  body{font-size:16px;}
  .wrap{padding:12px 10px 110px;}
  .card{padding:13px; border-radius:12px;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .btn{padding:11px 15px;}
  .btn.sm{padding:9px 12px; font-size:13.5px;}
  .search{max-width:100%;}
  .cardhead h2{font-size:17px;}
  .topbar{padding:9px 12px; gap:9px;}
  .topbar img{height:32px;}
  .topbar .sub{font-size:11.5px;}
  .modal{padding:15px; border-radius:14px;}
  input,select,textarea{font-size:16px;}  /* stops iOS zooming on focus */
  .calday{min-height:64px; padding:3px;}
  .calentry{font-size:9.5px; padding:1px 3px;}
  .calday .dn{font-size:12.5px;}

  table.rt thead{display:none;}
  table.rt, table.rt tbody, table.rt tr, table.rt td{display:block; width:100%;}
  table.rt tr{border:1.5px solid var(--line); border-radius:12px; padding:9px 11px; margin-bottom:9px; background:var(--paper);}
  table.rt td{border:none; padding:5px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:right;}
  table.rt td:first-child{text-align:left; border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:3px;}
  table.rt td::before{content:attr(data-l); font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; flex-shrink:0;}
  table.rt td:first-child::before{display:none;}
  table.rt td .row{justify-content:flex-end;}
  .ptabs{gap:0;}
  .ptab{padding:10px 11px; font-size:13px;}
}

/* ---------- motion & polish ---------- */
@keyframes riseIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,252,105,.5);} 50%{box-shadow:0 0 0 9px rgba(168,252,105,0);}}
.card{transition:box-shadow .22s ease, transform .22s ease, border-color .2s;}
.card:hover{box-shadow:0 6px 22px rgba(14,15,12,.07);}
.stat{position:relative; overflow:hidden;}
.stat::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(168,252,105,.16) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s;}
.stat:hover::after{transform:translateX(120%);}
.chip{transition:transform .15s;}
.chip:hover{transform:skew(-10deg) scale(1.05);}
.wrap{animation:riseIn .3s ease;}
.avatar{transition:transform .2s;}
.userchip:hover .avatar{transform:rotate(-8deg) scale(1.08);}
.syncdot{transition:background .3s, border-color .3s;}
.btn.p{position:relative; overflow:hidden;}
.btn.p::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.45); transform:translateX(-100%) skewX(-20deg); transition:transform .5s;}
.btn.p:hover::after{transform:translateX(120%) skewX(-20deg);}
input:focus,select:focus,textarea:focus{animation:glowPulse .6s ease;}
.calday{will-change:transform;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#c8cdbe; border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}
:focus-visible{outline:3px solid var(--green-dk); outline-offset:2px;}

/* ---------- Arabic: right-to-left layout and an Arabic typeface ---------- */
html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button{
  font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;}
html[lang="ar"] .disp, html[lang="ar"] .btn.p, html[lang="ar"] .navbtn .lb, html[lang="ar"] .ptab, html[lang="ar"] .lbtn,
html[lang="ar"] .chip, html[lang="ar"] .stat .n, html[lang="ar"] .clock .t, html[lang="ar"] .msection>b{
  font-family:'IBM Plex Sans Arabic','Oswald',sans-serif; font-weight:700;}
/* letter-spacing breaks the joins between Arabic letters */
html[lang="ar"] *{letter-spacing:normal !important;}
html[lang="ar"] .navbtn .lb{font-size:13.5px;}
html[dir="rtl"] th, html[dir="rtl"] .stat, html[dir="rtl"] .hubcard, html[dir="rtl"] .calday, html[dir="rtl"] .staffbtn,
html[dir="rtl"] .lstaffbtn, html[dir="rtl"] .clock{text-align:right;}
html[dir="rtl"] [style*="text-align: left"]{text-align:right !important;}
html[dir="rtl"] .navbtn.on::before{left:auto; right:-10px; border-radius:4px 0 0 4px;}
html[dir="rtl"] .calentry{border-left:none !important; border-right:3px solid;}
html[dir="rtl"] .lh-strip{border-left:none;}
/* the letterhead, the 3D atlas and number-heavy inputs keep their own direction */
html[dir="rtl"] .lh, html[dir="rtl"] .anat-root, html[dir="rtl"] canvas{direction:ltr;}
html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="month"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[inputmode="numeric"]{direction:ltr; text-align:right;}

/* phones: the top bar must never be wider than the screen, or the whole app shrinks to fit it */
@media(max-width:760px){ .topbar{overflow:hidden;} }
@media(max-width:560px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto; padding:7px 8px; gap:6px;}
  .clock{display:none;}
  .burger{width:34px; height:34px;}
  .homebtn{padding:2px 4px;} .homebtn img{height:26px;}
  .topbar .tr{gap:4px;}
  .syncdot{font-size:0; gap:0; padding:7px;}
  .topbar .tr .btn.sm{padding:6px 7px;}
  .userchip{padding:3px;} .userchip > span:not(.avatar){display:none;}
}

/* ---------- PHONE: bottom bar, + and More, sheets, sideways rows (see PhoneBar) ---------- */
.phone-only, .phonebar, .daystrip{display:none !important;}
.desk-only{display:contents;}
@keyframes sheetUp{from{transform:translateY(100%);} to{transform:none;}}
@keyframes sheetFade{from{opacity:0;} to{opacity:1;}}
@media(max-width:760px){
  .phone-only{display:revert !important;}
  .desk-only,.phone-hide{display:none !important;}
  .side{display:none !important;}
  .fab{display:none !important;}

  /* top bar: the logo, then chat, notifications and me — like a social app */
  .topbar{grid-template-columns:minmax(0,1fr) auto !important; padding:6px 10px !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--paper) !important;}
  .topbar .tl{display:none;}
  .homebtn{justify-self:start; padding:2px 2px;}
  .homebtn img{height:28px !important;}
  .topbar .tr{gap:6px;}
  .iconbtn{position:relative; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--bg);
    font-size:18px; display:inline-flex !important; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);}
  .badge{position:absolute; top:-5px; inset-inline-end:-5px; background:var(--red-solid); color:#fff; border-radius:99px;
    font-size:10.5px; font-weight:700; padding:1px 6px; line-height:16px; min-width:18px; text-align:center;}
  .mrow .badge,.ci .badge{position:static;}

  /* the bottom bar */
  .phonebar{display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--side);
    border-top:1px solid rgba(255,255,255,.08); padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    align-items:flex-end; justify-content:space-around;}
  .pb-btn{flex:1 1 0; min-width:0; background:none; border:none; color:#9aa08f; display:flex; flex-direction:column; align-items:center;
    gap:2px; padding:6px 2px 4px; border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .pb-btn .ic{font-size:21px; line-height:1; filter:grayscale(.55); opacity:.85; transition:transform .15s;}
  .pb-btn .lb{font-size:10.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .pb-btn.on{color:var(--green);}
  .pb-btn.on .ic{filter:none; opacity:1; transform:translateY(-1px) scale(1.08);}
  .pb-btn:active .ic{transform:scale(.9);}
  .pb-plus{flex:0 0 auto; width:54px; height:54px; margin:-18px 6px 2px; border-radius:50%; border:4px solid var(--side); background:var(--green);
    color:#0E0F0C; font-size:32px; font-weight:400; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 6px 18px rgba(143,232,79,.35); transition:transform .18s cubic-bezier(.2,.9,.3,1.4);}
  .pb-plus span{display:block; transform:translateY(-1px); transition:transform .2s;}
  .pb-plus.on span{transform:rotate(45deg);}
  .pb-plus:active{transform:scale(.9);}

  /* sheets: + and More */
  .sheetwrap{position:fixed; inset:0; z-index:62; background:rgba(14,15,12,.5); display:flex; align-items:flex-end; animation:sheetFade .18s ease;}
  .sheet{background:var(--paper); color:var(--ink); width:100%; max-height:88vh; overflow-y:auto; border-radius:22px 22px 0 0;
    padding:6px 14px calc(16px + env(safe-area-inset-bottom)); animation:sheetUp .28s cubic-bezier(.2,.9,.3,1); transition:transform .15s;
    overscroll-behavior:contain;}
  .sheet-handle{width:42px; height:5px; border-radius:3px; background:var(--line); margin:6px auto 12px;}
  .sheet-title{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--muted); margin:0 4px 6px;}
  .ci,.mprofile{display:flex; align-items:center; gap:14px; width:100%; padding:11px 6px; border:none; background:none; border-radius:14px;
    text-align:start; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .ci:active,.mprofile:active,.mrow:active,.mtile:active{background:var(--soft);}
  .ci b,.mprofile b{display:block; font-size:16px;}
  .ci .tiny,.mprofile .tiny{display:block; margin-top:1px;}
  .cic{width:48px; height:48px; border-radius:50%; background:var(--tint-green); display:flex; align-items:center; justify-content:center; font-size:23px; flex:none;}
  .chev{font-size:22px; color:var(--muted); flex:none;}
  html[dir="rtl"] .chev{transform:scaleX(-1);}
  .mprofile{border-bottom:1px solid var(--line); border-radius:14px 14px 0 0; margin-bottom:10px; padding-bottom:13px;}
  .mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
  .mtile{background:var(--soft); border:1.5px solid var(--line); border-radius:16px; padding:13px 4px 11px; display:flex; flex-direction:column;
    align-items:center; gap:6px; font-weight:600; font-size:12.5px; color:var(--ink); cursor:pointer; text-align:center; line-height:1.2;}
  .mtile .ic{font-size:25px;}
  .mtile.on{border-color:var(--green-dk); background:var(--tint-green);}
  .mlist{border-top:1px solid var(--line); padding-top:6px;}
  .mrow{display:flex; align-items:center; gap:13px; width:100%; padding:12px 6px; border:none; background:none; border-radius:12px; color:var(--ink);
    font-size:15.5px; font-weight:600; text-align:start; cursor:pointer;}
  .mrow .mi{width:26px; text-align:center; font-size:19px; flex:none;}
  .mrow.danger{color:var(--red);}

  /* Impy and the chat: full width, up from the bottom, with their own close button */
  .fabpanel{left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; border-radius:20px 20px 0 0 !important;
    z-index:65 !important; max-height:calc(100vh - 48px); animation:sheetUp .28s cubic-bezier(.2,.9,.3,1) !important;
    padding-bottom:env(safe-area-inset-bottom);}
  .fabclose{background:rgba(255,255,255,.12); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:16px; cursor:pointer;}

  /* forms slide up from the bottom; Save stays in reach at the bottom */
  .overlay{align-items:flex-end !important; padding:0 !important; overflow:hidden !important;}
  .overlay > .modal{max-width:100% !important; width:100% !important; margin:0 !important; border-radius:22px 22px 0 0 !important;
    max-height:94vh; overflow-y:auto; overscroll-behavior:contain; padding:8px 15px calc(12px + env(safe-area-inset-bottom)) !important;
    animation:sheetUp .28s cubic-bezier(.2,.9,.3,1) !important;}
  .overlay > .modal::before{content:""; display:block; width:42px; height:5px; border-radius:3px; background:var(--line); margin:4px auto 12px;}
  .overlay > .modal .mfoot{position:sticky; bottom:-12px; z-index:3; background:var(--paper); margin:14px -15px -12px; padding:10px 15px 12px;
    border-top:1px solid var(--line);}
  .overlay > .modal .mfoot .btn{flex:1 1 auto; padding:13px 14px;}

  /* "More" menus open as a sheet of big rows instead of a small drop-down */
  .menupop{position:fixed !important; left:8px !important; right:8px !important; top:auto !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    width:auto !important; min-width:0 !important; max-width:none !important; max-height:72vh; overflow-y:auto; border-radius:20px !important; padding:8px !important;
    z-index:70 !important; box-shadow:0 0 0 100vmax rgba(14,15,12,.45) !important; animation:sheetUp .24s cubic-bezier(.2,.9,.3,1);}
  .menuitem{padding:13px 12px !important; font-size:15.5px; border-radius:12px !important;}

  /* rows of buttons and chips scroll sideways instead of stacking down the page */
  .hscroll{flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-bottom:3px; margin-inline:-2px; padding-inline:2px;}
  .hscroll::-webkit-scrollbar{display:none;}
  .hscroll > *{flex-shrink:0;}
  .hscroll > .grow{display:none;}
  .hscroll input.search{width:200px; flex:0 0 200px;}

  /* numbers as a swipeable row of small cards, not a stack of big blocks */
  .statrow{display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:10px; gap:8px; scrollbar-width:none;
    margin:0 -10px 12px !important; padding:0 10px 2px;}
  .statrow::-webkit-scrollbar{display:none;}
  .statrow > .stat{flex:0 0 46%; scroll-snap-align:start; padding:11px 12px; border-radius:16px;}
  .statrow > .stat .n{font-size:23px;}
  .statrow > .stat .l{font-size:10px;}

  /* the week as days to tap */
  .daystrip{display:block !important; margin:0 0 10px; width:100%;}
  .ds-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
  .ds-head b{flex:1; font-family:'Oswald',sans-serif; font-size:17px; letter-spacing:.02em; text-transform:uppercase;}
  .ds-cal{position:relative; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
    font-size:17px; overflow:hidden; cursor:pointer; background:var(--paper);}
  .ds-cal input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer;}
  .ds-row{display:flex; align-items:stretch; gap:3px;}
  .ds-arrow{background:none; border:none; color:var(--muted); font-size:24px; padding:0 2px; cursor:pointer;}
  .ds-day{flex:1 1 0; min-width:0; background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:6px 0 4px; display:flex;
    flex-direction:column; align-items:center; gap:1px; cursor:pointer; color:var(--ink); -webkit-tap-highlight-color:transparent;}
  .ds-day span{font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase;}
  .ds-day b{font-size:17px; font-family:'Oswald',sans-serif;}
  .ds-day i{width:5px; height:5px; border-radius:50%; margin-top:1px;}
  .ds-day i.dot{background:var(--green-dk);}
  .ds-day.today{border-color:var(--green-dk);}
  .ds-day.on{background:var(--side); border-color:var(--side); color:#fff;}
  .ds-day.on span{color:#b9bfae;}
  .ds-day.on i.dot{background:var(--green);}

  /* patients: ticks only when choosing several; filters behind one button */
  .ptlist:not(.selecting) .pt-check,.ptlist:not(.selecting) .pt-selpage{display:none !important;}
  .pt-filters:not(.open){display:none !important;}

  /* the patient file: tabs stay at the top while you scroll */
  .ptabs{position:sticky; top:50px; z-index:6; background:var(--bg); margin-inline:-10px; padding-inline:10px;}

  /* appointments as cards */
  table.appt-rt td.ptcell{display:block; text-align:start; font-weight:700; font-size:16px;}
  table.appt-rt td.ptcell::before{display:none;}
  table.appt-rt td.ptcell .tiny,table.appt-rt td.ptcell .muted{font-weight:400;}
  /* the bell matches the chat button */
  .topbar .tr .moremenu > .btn.sm{width:38px; height:38px; border-radius:50%; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; font-size:17px;}
  table.appt-rt td[data-l=""]::before{display:none;}
}

@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}
@media print{
  html[data-theme="dark"]{--paper:#fff; --bg:#fff; --ink:#0E0F0C; --line:#D9DDD0; --muted:#5A5F53; --field:#fff; --soft:#fff;}
  body{background:#fff; color:#0E0F0C;}
  .no-print{display:none !important;}
  .side,.topbar,.burger,.btn,.statussel,select,input{display:none !important;}
  .shell{display:block;}
  .card{border:none; box-shadow:none; padding:0; margin:0 0 10px;}
  table.rt tr{page-break-inside:avoid;}
  .wrap{padding:0; max-width:100%;}
  .overlay{position:static; padding:0; background:#fff; display:block; animation:none;}
  .modal{box-shadow:none; max-width:100%; padding:0; border-radius:0; animation:none;}
  .inv{border:none;}
}