/* الواجهة الزجاجية (15 أكتوبر 2026، طلب الدكتور: «glass» وأيقونات ازاز 3D زي iOS الجديد).
   ملف لوحده فوق style.css: لو اتشال من base.html الشكل بيرجع زي ما كان. الطباعة بترجع أبيض سادة. */
:root{--glass:rgba(255,255,255,.58);--glass2:rgba(255,255,255,.38);--gline:rgba(255,255,255,.75);--gshadow:0 8px 32px rgba(20,48,90,.10);
  --hi:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25);--r:20px}
body{background:#eef4f8}
/* خلفية ناعمة بألوان العيادة عشان الزجاج يبان */
body::after{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 42% at 85% 8%,rgba(34,169,184,.38),transparent 70%),
             radial-gradient(35% 40% at 10% 30%,rgba(29,68,121,.22),transparent 70%),
             radial-gradient(40% 45% at 70% 85%,rgba(126,111,214,.20),transparent 70%),
             radial-gradient(30% 35% at 20% 95%,rgba(34,169,184,.22),transparent 70%)}
body::before{z-index:0;opacity:.04}
.card,.kpi,details.more,.chartbox,.note{background:var(--glass);border:1px solid var(--gline);box-shadow:var(--gshadow),var(--hi);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
.card{border-radius:var(--r)}.kpi{border-radius:18px;padding:16px 18px}
.kpi::after{width:auto;height:4px;top:auto;bottom:0;inset-inline:18px;border-radius:4px 4px 0 0}
.kpi b{font-size:26px;letter-spacing:-.3px}
a.kpi{transition:transform .15s ease,box-shadow .15s ease}a.kpi:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(20,48,90,.16),var(--hi)}
details.more{border-style:solid}
.chartbox{border-radius:16px}
/* الشريط الجانبي: زجاج غامق */
.side{background:linear-gradient(180deg,rgba(20,48,90,.86),rgba(12,30,56,.9));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-inline-start:1px solid rgba(255,255,255,.12);box-shadow:4px 0 30px rgba(10,25,50,.18)}
.side .brand img{border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 #fff}
.side nav a{border-radius:14px;padding:8px 10px;transition:background .15s}
.side nav a:hover{background:rgba(255,255,255,.10)}
.side nav a.on{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 14px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22)}
/* أيقونات ازاز 3D */
.ic{display:inline-grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:11px;font-size:18px;line-height:1;
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.14));border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(20,48,90,.10),0 4px 10px rgba(20,48,90,.18);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.side .ic{background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.05));border-color:rgba(255,255,255,.25);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.25)}
.side nav a.on .ic{background:linear-gradient(145deg,#4fd1de,#1b8fa0);border-color:rgba(255,255,255,.6)}
.kpi .ic{position:absolute;inset-inline-end:14px;top:14px;width:42px;height:42px;border-radius:14px;font-size:21px}
.kpi.green .ic{background:linear-gradient(145deg,rgba(214,246,229,.95),rgba(30,142,90,.18))}
.kpi.amber .ic{background:linear-gradient(145deg,rgba(255,240,206,.95),rgba(183,121,31,.18))}
.kpi.navy .ic{background:linear-gradient(145deg,rgba(225,234,248,.95),rgba(29,68,121,.20))}
.kpi:has(.ic) small,.kpi:has(.ic) .kpi-link small{padding-inline-end:50px;min-height:42px}
/* الزراير: لمعة ازاز */
.btn{border-radius:13px;background:linear-gradient(180deg,#24508c,var(--navy));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(20,48,90,.22)}
.btn:hover{background:linear-gradient(180deg,#2b5d9e,#18386a)}
.btn.teal{background:linear-gradient(180deg,#3cc3d1,#1e9aa8)}.btn.teal:hover{background:linear-gradient(180deg,#46cbd8,#1b8e9b)}
.btn.red{background:linear-gradient(180deg,#d9574a,#b3322a)}
.btn.light{background:rgba(255,255,255,.55);color:var(--navy);border:1px solid var(--gline);box-shadow:var(--hi),0 2px 8px rgba(20,48,90,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.light:hover{background:rgba(255,255,255,.8)}
.pill,.seg span{background:rgba(255,255,255,.55);border-color:var(--gline);box-shadow:var(--hi);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill.on,.seg input:checked+span{background:linear-gradient(180deg,#24508c,var(--navy));border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 10px rgba(20,48,90,.25)}
input,select,textarea{background:rgba(255,255,255,.72);border-color:rgba(160,180,200,.55);border-radius:12px}
input:focus,select:focus,textarea:focus{background:#fff}
th{background:rgba(205,238,241,.45)}td{border-bottom-color:rgba(200,214,226,.6)}tr:hover td{background:rgba(255,255,255,.45)}
tfoot td{background:rgba(255,255,255,.5)}
.flash{border:1px solid rgba(255,255,255,.6);box-shadow:var(--hi);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.flash.warn{background:rgba(255,240,200,.75)}.flash.ok{background:rgba(214,246,229,.8)}.flash.err{background:rgba(253,226,222,.85)}
.tag{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
@media(max-width:700px){.side{box-shadow:0 4px 24px rgba(10,25,50,.25)}.side .ic{width:28px;height:28px;font-size:15px;border-radius:9px}
  .kpi .ic{width:34px;height:34px;font-size:17px;top:12px;inset-inline-end:10px}.kpi:has(.ic) small{padding-inline-end:40px;min-height:34px}.kpi b{font-size:22px}}
/* اللي مش بيدعم الزجاج (أجهزة قديمة): أبيض شبه مصمت عشان الكلام يتقري */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.kpi,details.more,.chartbox,.note{background:rgba(255,255,255,.93)}}
@media print{body::after{display:none}.card,.kpi,details.more,.chartbox{background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#ddd}.ic{display:none}}
/* (15 أكتوبر بالليل) أبيض نضيف أكتر + مربعات برسومات + شريط تطبيق تحت على الموبايل */
:root{--glass:rgba(255,255,255,.80)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;border-radius:22px;background:rgba(255,255,255,.86);
  border:1px solid var(--gline);box-shadow:0 6px 22px rgba(20,48,90,.08),var(--hi);color:var(--navy);font-weight:700;font-size:15px;text-align:center;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .15s ease,box-shadow .15s ease}
.tile img{width:84px;height:84px;transition:transform .2s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,48,90,.14),var(--hi);color:var(--navy)}
.tile:hover img{transform:scale(1.06) rotate(-2deg)}.tile:active{transform:scale(.97)}
.tabbar,.sheet{display:none}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
  .side nav{display:none}.side{justify-content:center;padding:8px 12px}
  .side .brand b{display:block;margin:0 8px 0 0;font-size:15px;color:#fff}.side .brand{gap:0}
  main{padding-bottom:110px}
  .top-actions{display:none}
  .tiles{gap:10px}.tile{padding:12px 4px 10px;border-radius:18px;font-size:13.5px}.tile img{width:64px;height:64px}
  .tabbar{display:flex;position:fixed;z-index:40;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:66px;padding:0 6px;
    align-items:center;justify-content:space-around;border-radius:24px;background:rgba(255,255,255,.82);border:1px solid var(--gline);
    box-shadow:0 10px 34px rgba(20,48,90,.20),var(--hi);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;font:inherit;font-size:11.5px;font-weight:600;color:#7a8a9c;cursor:pointer;padding:6px 0}
  .tabbar svg{width:24px;height:24px}
  .tabbar a.on{color:var(--teal)}.tabbar a.on svg{filter:drop-shadow(0 2px 4px rgba(34,169,184,.35))}
  .tabbar .fab{flex:0 0 58px;height:58px;margin-top:-30px;border-radius:50%;color:#fff;justify-content:center;
    background:linear-gradient(160deg,#4fd1de,#1b8fa0);box-shadow:0 8px 20px rgba(27,143,160,.45),inset 0 1px 0 rgba(255,255,255,.5);border:3px solid #fff}
  .tabbar .fab svg{width:28px;height:28px}
  .sheet{display:block;position:fixed;inset:0;z-index:50;background:rgba(10,25,50,0);pointer-events:none;transition:background .2s}
  .sheet .sheet-in{position:absolute;inset-inline:10px;bottom:calc(86px + env(safe-area-inset-bottom));padding:8px;border-radius:22px;background:rgba(255,255,255,.95);
    box-shadow:0 14px 40px rgba(20,48,90,.25);transform:translateY(20px);opacity:0;transition:.2s ease}
  .sheet.open{background:rgba(10,25,50,.25);pointer-events:auto}.sheet.open .sheet-in{transform:none;opacity:1}
  .sheet a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;font-weight:700;color:var(--navy)}
  .sheet a:active{background:var(--teal3)}.sheet img{width:40px;height:40px}.sheet .ic{width:40px;height:40px;font-size:19px}
}
@media print{.tiles,.tabbar,.sheet{display:none!important}}
/* لمسات مميزة: بانر الترحيب، وأيقونات مرسومة، وحركة دخول ناعمة */
.hero{position:relative;overflow:hidden;padding:22px 24px;border-radius:26px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#3fd0dc 0%,#1e9aa8 35%,#1d4479 75%,#14305a 100%);
  box-shadow:0 14px 40px rgba(20,48,90,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;inset-inline-start:-80px;top:-120px;background:rgba(255,255,255,.10)}
.hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;inset-inline-start:30%;bottom:-120px;background:rgba(255,255,255,.08)}
.hero>*{position:relative;z-index:1}
.hero h1{color:#fff;font-size:24px}.hero-txt span{color:rgba(255,255,255,.85);font-weight:600}
.hero .search input{background:rgba(255,255,255,.92);border-color:transparent}
.hero .btn.light{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
.hero .btn.teal{background:#fff;color:var(--navy)}
.kpi .ic img{width:30px;height:30px}
@media(max-width:700px){.hero{padding:18px;border-radius:22px}.hero h1{font-size:21px}.kpi .ic img{width:24px;height:24px}}
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .tile,.kpi,.hero{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
  .tile:nth-child(2){animation-delay:.04s}.tile:nth-child(3){animation-delay:.08s}.tile:nth-child(4){animation-delay:.12s}
  .tile:nth-child(5){animation-delay:.16s}.tile:nth-child(6){animation-delay:.2s}.kpi{animation-delay:.22s}}
.tabbar a.on::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);margin-top:1px}
/* الخط (15 أكتوبر): Cairo زي فيزيتا، ولو مفيش نت بيرجع لخط الجهاز */
body,input,select,textarea,button,.btn{font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif}
body{line-height:1.65;letter-spacing:0}
h1,h2,h3,.kpi b,.tile span{font-weight:800}
.kpi b{font-feature-settings:"tnum"}

/* ===== (16 أكتوبر) زجاج أقوى و3D أوضح زي الفريدة 1.7.12، بألوان العيادة ===== */
:root{--glass:rgba(255,255,255,.52);--gline:rgba(255,255,255,.88);--gshadow:0 10px 34px rgba(20,48,90,.14)}
body{background:#e3eef4}
body::after{background:radial-gradient(40% 44% at 88% 6%,rgba(34,169,184,.62),transparent 70%),
  radial-gradient(36% 40% at 6% 28%,rgba(29,68,121,.36),transparent 70%),
  radial-gradient(42% 46% at 72% 82%,rgba(126,111,214,.40),transparent 70%),
  radial-gradient(32% 36% at 18% 96%,rgba(34,169,184,.42),transparent 70%),
  radial-gradient(26% 30% at 50% 50%,rgba(236,250,252,.6),transparent 70%)}
.card,.kpi,.tile,details.more,.chartbox,.note{-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
  box-shadow:var(--gshadow),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35)}
.tile{background:rgba(255,255,255,.55)}
/* لمعة الإزاز فوق كل كارت */
.card,.kpi,.tile{position:relative}
.card::before,.kpi::before,.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:48%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.card>*:not(.ctip),.tile>*,.kpi>*:not(.ic){position:relative}
/* أيقونات 3D أبرز */
.ic{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.18));border-color:rgba(255,255,255,.65);
  box-shadow:inset 0 2px 1px rgba(255,255,255,1),inset 0 -4px 8px rgba(20,48,90,.16),0 6px 14px rgba(20,48,90,.22),0 2px 3px rgba(20,48,90,.12)}
.side .ic{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.25),0 5px 12px rgba(0,0,0,.30)}
.kpi .ic{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(205,238,241,.7))}
.tile img{filter:drop-shadow(0 8px 12px rgba(20,48,90,.20)) drop-shadow(0 2px 3px rgba(20,48,90,.12))}
.tile:hover img{filter:drop-shadow(0 12px 16px rgba(20,48,90,.26)) drop-shadow(0 3px 4px rgba(20,48,90,.14))}
.tabbar{background:rgba(255,255,255,.62)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.kpi,.tile,.chartbox,details.more{background:rgba(255,255,255,.95)}}
@media print{.card::before,.kpi::before,.tile::before{display:none}}