@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  --maroon-900:#480707;--maroon-800:#5e0b0e;--maroon-700:#7a1014;--maroon-600:#951418;
  --maroon-tint:rgba(149,20,24,.07);
  --surface:#faf8f8;--card:#fff;--line:#ece6e6;--text:#7a1014;--muted:#6b6464;
  --ok:#128c4a;--radius-lg:28px;--radius-md:18px;
  --shadow-card:0 1px 2px rgba(72,7,7,.06),0 8px 24px rgba(72,7,7,.07);
  --shadow-card-hover:0 2px 4px rgba(72,7,7,.08),0 18px 40px rgba(72,7,7,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  direction:rtl;font-family:'IBM Plex Sans Arabic','Cairo','Segoe UI',Tahoma,sans-serif;color:var(--text);
  background:radial-gradient(1200px 600px at 85% -10%,rgba(255,255,255,.08),transparent 60%),
             radial-gradient(900px 500px at 0% 110%,rgba(0,0,0,.25),transparent 60%),var(--maroon-700);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}

.page{display:flex;flex-direction:column;gap:32px;width:94%;max-width:1200px;margin:48px auto;padding:48px 40px;
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px rgba(0,0,0,.28)}
.page-title{text-align:center;font-size:clamp(26px,3.4vw,36px);font-weight:700;color:var(--maroon-900)}
.page-title::after{content:'';display:block;width:56px;height:4px;margin:14px auto 0;border-radius:4px;
  background:linear-gradient(90deg,var(--maroon-600),var(--maroon-800))}
.sub{text-align:center;color:var(--muted);font-size:14px;margin-top:-18px}

.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:30px 24px 24px;overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .35s var(--ease)}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--maroon-800),var(--maroon-600))}
.card:hover{box-shadow:var(--shadow-card-hover)}
.card h2{font-size:19px;font-weight:700;color:var(--maroon-900);margin-bottom:16px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 12px;font-size:14.5px;color:var(--maroon-900);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--maroon-600);box-shadow:0 0 0 3px rgba(149,20,24,.15)}
.vitals{margin-top:16px;padding:16px;background:var(--maroon-tint);border:1px solid rgba(149,20,24,.12);border-radius:var(--radius-md)}
.vitals>b{display:block;color:var(--maroon-600);margin-bottom:10px;font-size:14px}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.btn{padding:12px 28px;font-weight:600;color:#fff;cursor:pointer;border:0;border-radius:999px;
  background:linear-gradient(90deg,var(--maroon-800),var(--maroon-600));
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(149,20,24,.3)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{color:var(--maroon-600);background:var(--maroon-tint);border:1px solid rgba(149,20,24,.15)}
.msg{font-size:14px;font-weight:500}.msg.ok{color:var(--ok)}.msg.err{color:var(--maroon-600)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{text-align:center;padding:16px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.stat b{display:block;font-size:30px;font-weight:700;color:var(--maroon-600)}
.stat span{font-size:13px;color:var(--muted)}
.bars h3{font-size:14px;font-weight:600;color:var(--maroon-900);margin-bottom:8px}
.bar{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13.5px;color:var(--muted)}
.bar .n{flex:0 0 130px;white-space:normal;line-height:1.3;font-size:12.5px}
.bar .t{flex:1;height:12px;background:var(--maroon-tint);border-radius:999px;overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--maroon-800),var(--maroon-600))}
.bar .c{flex:0 0 24px;color:var(--maroon-900);font-weight:600}

.wrap{overflow-x:auto}
table{width:100%;min-width:1000px;border-collapse:collapse;font-size:14px}
th,td{padding:11px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--maroon-600);background:var(--maroon-tint)}
tbody tr:hover{background:var(--maroon-tint)}
.tag{display:inline-block;padding:3px 12px;font-size:12.5px;font-weight:600;color:var(--maroon-600);
  background:var(--maroon-tint);border:1px solid rgba(149,20,24,.12);border-radius:999px}
.del{background:none;border:0;color:var(--maroon-600);cursor:pointer;font-weight:500}
.empty{text-align:center;color:var(--muted);padding:20px}

@media (max-width:700px){.page{margin:16px auto;padding:30px 14px;gap:24px;border-radius:22px}.card{padding:28px 16px 18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.btn:hover{transform:none}}

.nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.nav a{padding:9px 24px;font-weight:600;font-size:14px;text-decoration:none;color:var(--maroon-600);background:var(--maroon-tint);border:1px solid rgba(149,20,24,.15);border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease)}
.nav a:hover,.nav a.on{color:#fff;background:var(--maroon-600)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.card-head h2{margin:0}
.card-head .btn{padding:9px 20px;font-size:14px}
.print-only{display:none}

@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-print{display:none!important}
  body.print-records .stats-card,body.print-stats .rec-card{display:none!important}
  .stat,.bar .t{break-inside:avoid}
  .page{width:100%;max-width:none;margin:0;padding:0;gap:12px;background:#fff;box-shadow:none;border-radius:0}
  .page-title{font-size:22px}
  .card{border:0;box-shadow:none;padding:12px 0 0;overflow:visible}
  .card::before{display:none}
  .print-only{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
  .wrap{overflow:visible}
  table{min-width:0;font-size:11px}
  th,td{padding:6px 5px;white-space:normal}
  th:last-child,td:last-child{display:none}
  tr{break-inside:avoid}
  thead{display:table-header-group}
}

[hidden]{display:none!important}
.login{max-width:420px;margin:0 auto;width:100%}
.topbar{display:flex;justify-content:flex-end}