/* EasyClinic redesign 2026-10 — VISUAL ONLY. Loaded after each page's inline <style>.
   Scoped to html.ec-rd-dash so removing the class (or this <link>) restores the old look.
   Palette: primary #247BFF · navy #10213D · bg #F5F8FC · surface #FFF · light-blue #EAF3FF · mint #17B890 · coral #FF8A7A */

/* ───────── Tokens: dark (pages' default) ───────── */
html.ec-rd-dash{
  --ec-p:#247BFF; --ec-pd:#1A66E0; --ec-n:#10213D; --ec-lb:#EAF3FF; --ec-m:#17B890; --ec-c:#FF8A7A; --ec-amber:#FFB938; --ec-violet:#7B61FF;
  --ec-grad:linear-gradient(135deg,#4A95FF 0%,#1F6BEB 100%);
  --ec-grad-m:linear-gradient(135deg,#2DD4A8,#13A884);
  --ec-grad-c:linear-gradient(135deg,#FF9F8F,#FF7A6A);
  --ec-grad-v:linear-gradient(135deg,#7B61FF,#247BFF);
  --ec-r:20px; --ec-r-sm:14px;
  --bg:#0B1426; --bg2:#132039; --bg3:#1A2A48; --card:#132039; --card2:#1A2A48;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.12);
  --text:#EEF3FB; --text2:#9DB0CC; --text3:#6C80A0;
  --primary:#247BFF; --primary-d:#1A66E0; --primary-l:#6AA6FF; --brand:#247BFF; --blue:#247BFF;
  --green:#17B890; --teal:#17B890; --orange:#FFB938; --red:#FF6B5E; --purple:#7B61FF; --pink:#FF8A7A;
  --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --ec-shadow:0 10px 30px rgba(0,0,0,.28);
}
/* ───────── Tokens: light ───────── */
html.ec-rd-dash[data-theme="light"]{
  --bg:#F5F8FC; --bg2:#EEF3FA; --bg3:#E3EAF5; --card:#FFFFFF; --card2:#F8FAFD;
  --border:#E3EAF5; --border2:#D5DFEE;
  --text:#10213D; --text2:#5B6B86; --text3:#93A1B8;
  --primary-l:#247BFF; --red:#E5604E;
  --shadow:0 10px 30px rgba(31,78,153,.08); --ec-shadow:0 10px 30px rgba(31,78,153,.08);
}
html.ec-rd body{font-family:'Tajawal','Cairo',sans-serif}

/* ───────── Dashboards (admin / secretary / doctor / super-admin) ───────── */
html.ec-rd-dash .sidebar{background:var(--card); border-left:none; box-shadow:0 0 40px rgba(16,33,61,.06); padding:6px 12px 12px}
html.ec-rd-dash .sidebar-header, html.ec-rd-dash .sidebar-top{border-bottom:none; padding:18px 8px 14px}
html.ec-rd-dash .sidebar-footer{border-top:none}
html.ec-rd-dash .menu-item{border-right:none; border-radius:14px; margin:3px 0; padding:11px 14px; font-weight:700; font-size:.92rem}
html.ec-rd-dash .menu-item:hover{background:var(--bg2); color:var(--text)}
html.ec-rd-dash .menu-item.active{background:rgba(36,123,255,.12); color:var(--ec-p)}
html.ec-rd-dash[data-theme="dark"] .menu-item.active, html.ec-rd-dash:not([data-theme]) .menu-item.active{background:rgba(36,123,255,.2); color:#8DBBFF}
html.ec-rd-dash .menu-item .mi-icon, html.ec-rd-dash .menu-item .nav-ico{width:34px; height:34px; border-radius:11px; background:var(--bg2)}
html.ec-rd-dash .menu-item.active .mi-icon{background:var(--ec-p); color:#fff}
html.ec-rd-dash .menu-item .mi-badge{background:var(--ec-c)}
html.ec-rd-dash .header{background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px); border-bottom:none; height:72px}
html.ec-rd-dash .header-btn, html.ec-rd-dash .hbtn{border:none; background:var(--card); border-radius:14px; box-shadow:var(--ec-shadow)}
html.ec-rd-dash .search-bar, html.ec-rd-dash .filter-input{background:var(--card); border:1px solid var(--border); border-radius:14px; height:44px; box-shadow:none}
html.ec-rd-dash .content{padding:24px 30px}
html.ec-rd-dash .page-hd h1, html.ec-rd-dash .page-hd h2{font-weight:800; letter-spacing:-.2px}

html.ec-rd-dash .card, html.ec-rd-dash .chart-card, html.ec-rd-dash .detail-box, html.ec-rd-dash .plan-card, html.ec-rd-dash .qa-card, html.ec-rd-dash .patient-card, html.ec-rd-dash .rx-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--ec-r); box-shadow:var(--ec-shadow)}
html.ec-rd-dash[data-theme="light"] .card, html.ec-rd-dash[data-theme="light"] .chart-card, html.ec-rd-dash[data-theme="light"] .stat-card, html.ec-rd-dash[data-theme="light"] .stat{border-color:transparent}
html.ec-rd-dash .card-hd{border-bottom:1px dashed var(--border)}
html.ec-rd-dash .card-title{font-weight:800}

/* Stat cards: soft tinted icon tiles + coloured accent bar */
html.ec-rd-dash .stat-card, html.ec-rd-dash .stat, html.ec-rd-dash .kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--ec-r); box-shadow:var(--ec-shadow); position:relative; overflow:hidden}
html.ec-rd-dash .stat-card::after, html.ec-rd-dash .stat::after, html.ec-rd-dash .kpi::after{content:''; position:absolute; inset-inline-end:-30px; bottom:-30px; width:96px; height:96px; border-radius:50%; background:rgba(36,123,255,.07); pointer-events:none}
html.ec-rd-dash .stat-icon{border-radius:16px; width:54px; height:54px}
html.ec-rd-dash .si-blue{background:rgba(36,123,255,.14)} html.ec-rd-dash .si-blue .ico{color:var(--ec-p)}
html.ec-rd-dash .si-green, html.ec-rd-dash .si-teal{background:rgba(23,184,144,.15)}
html.ec-rd-dash .si-orange{background:rgba(255,185,56,.18)}
html.ec-rd-dash .si-red, html.ec-rd-dash .si-pink{background:rgba(255,138,122,.18)}
html.ec-rd-dash .si-purple{background:rgba(123,97,255,.15)}
html.ec-rd-dash .stat-card h3, html.ec-rd-dash .kpi-val{font-weight:800}
/* First stat card: gradient hero like the mockup */
html.ec-rd-dash .stats-grid > .stat-card:first-child, html.ec-rd-dash .stats > .stat:first-child, html.ec-rd-dash .kpi-grid > .kpi:first-child{background:var(--ec-grad); border-color:transparent; box-shadow:0 14px 30px rgba(36,123,255,.28)}
html.ec-rd-dash .stats-grid > .stat-card:first-child *, html.ec-rd-dash .stats > .stat:first-child *, html.ec-rd-dash .kpi-grid > .kpi:first-child *{color:#fff !important}
html.ec-rd-dash .stats-grid > .stat-card:first-child .stat-icon, html.ec-rd-dash .stats > .stat:first-child .stat-icon{background:rgba(255,255,255,.2)}
html.ec-rd-dash .stats-grid > .stat-card:first-child::after, html.ec-rd-dash .stats > .stat:first-child::after, html.ec-rd-dash .kpi-grid > .kpi:first-child::after{background:rgba(255,255,255,.14)}

/* Buttons, inputs, badges, tables, modals */
html.ec-rd-dash .btn{border-radius:12px; font-weight:700}
html.ec-rd-dash .btn-primary{background:var(--ec-p); box-shadow:0 8px 18px rgba(36,123,255,.25)}
html.ec-rd-dash .btn-primary:hover{background:var(--ec-pd)}
html.ec-rd-dash .btn-success, html.ec-rd-dash .btn-teal{background:var(--ec-m)}
html.ec-rd-dash .btn-danger{background:#FF6B5E}
html.ec-rd-dash .btn-ghost{background:var(--bg2); border-color:transparent}
html.ec-rd-dash .btn-gold{background:var(--ec-grad); color:#fff}
html.ec-rd-dash .form-group input, html.ec-rd-dash .form-group select, html.ec-rd-dash .form-group textarea{border-radius:14px}
html.ec-rd-dash .form-group input:focus, html.ec-rd-dash .form-group select:focus, html.ec-rd-dash .form-group textarea:focus{border-color:var(--ec-p); box-shadow:0 0 0 4px rgba(36,123,255,.14)}
html.ec-rd-dash .badge{border-radius:10px; padding:4px 11px}
html.ec-rd-dash .table-wrap{border-radius:16px}
html.ec-rd-dash table th{font-weight:700; color:var(--text2)}
html.ec-rd-dash .modal-box{border-radius:24px; border:none; box-shadow:0 30px 80px rgba(16,33,61,.35)}
html.ec-rd-dash .toast{border-radius:14px}
html.ec-rd-dash .timeline-item{border-radius:16px}
html.ec-rd-dash .notif-panel{border-radius:20px; border:none; box-shadow:0 20px 50px rgba(16,33,61,.25)}

/* Staff login screens inside the dashboards */
html.ec-rd-dash .login-wrap{background:radial-gradient(900px 500px at 85% -10%,rgba(36,123,255,.22),transparent 60%),radial-gradient(700px 400px at 0% 110%,rgba(23,184,144,.16),transparent 60%),var(--bg)}
html.ec-rd-dash .login-card{border-radius:28px; border:none; box-shadow:0 30px 70px rgba(16,33,61,.18)}
html.ec-rd-dash .login-btn{border-radius:14px; background:var(--ec-grad); box-shadow:0 12px 26px rgba(36,123,255,.3)}

html.ec-rd-login, html.ec-rd-book{--ec-grad:linear-gradient(135deg,#4A95FF 0%,#1F6BEB 100%)}
/* ───────── login.html (light standalone) ───────── */
html.ec-rd-login{--mint:#247BFF; --mint2:#1A66E0; --green:#17B890; --ink:#10213D; --ink2:#5B6B86; --ink3:#93A1B8; --border:#E3EAF5; --bg:#F5F8FC}
html.ec-rd-login .bg-blob.blob1{background:radial-gradient(circle,rgba(36,123,255,.28),transparent 70%)}
html.ec-rd-login .bg-blob.blob2{background:radial-gradient(circle,rgba(23,184,144,.22),transparent 70%)}
html.ec-rd-login .card{border-radius:28px; border:none; box-shadow:0 30px 70px rgba(16,33,61,.12)}
html.ec-rd-login .btn-login{border-radius:14px; background:var(--ec-grad); box-shadow:0 12px 26px rgba(36,123,255,.3)}
html.ec-rd-login .fg input{border-radius:14px}

/* ───────── public-book.html (mockup 07) ───────── */
html.ec-rd-book{--ink:#10213D; --ink2:#2E4366; --ink3:#5B6B86; --paper:#F5F8FC; --teal:#247BFF; --mint:#17B890; --blue:#247BFF; --border:#E3EAF5; --danger:#E5604E}
html.ec-rd-book body{background:radial-gradient(1000px 420px at 100% -10%,#EAF3FF,transparent 70%),#F5F8FC}
html.ec-rd-book .card{border-radius:28px; border:none; box-shadow:0 20px 50px rgba(31,78,153,.10)}
html.ec-rd-book .brand-mark{border-radius:20px; background:linear-gradient(135deg,#17B890,#247BFF); box-shadow:0 10px 24px rgba(36,123,255,.25)}
html.ec-rd-book .field input, html.ec-rd-book .field select, html.ec-rd-book .field textarea{border-radius:14px; border:1.5px solid #E3EAF5}
html.ec-rd-book .field input:focus, html.ec-rd-book .field select:focus, html.ec-rd-book .field textarea:focus{border-color:#247BFF; box-shadow:0 0 0 4px rgba(36,123,255,.14)}
html.ec-rd-book .slot{border-radius:14px; border:1.5px solid #E3EAF5; background:#fff; font-weight:700}
html.ec-rd-book .slot.on, html.ec-rd-book .slot.active, html.ec-rd-book .slot.sel, html.ec-rd-book .slot[aria-pressed="true"]{background:#247BFF; border-color:#247BFF; color:#fff; box-shadow:0 8px 18px rgba(36,123,255,.3)}
html.ec-rd-book .btn{border-radius:16px; background:var(--ec-grad); box-shadow:0 12px 26px rgba(36,123,255,.3)}
html.ec-rd-book .wa-chip{border-radius:12px}

/* ───────── patient-portal.html ───────── */
html.ec-rd-portal .lookup-card, html.ec-rd-portal .book-card, html.ec-rd-portal .item, html.ec-rd-portal .kpi-box{border-radius:var(--ec-r); box-shadow:var(--ec-shadow)}
html.ec-rd-portal .navbar{backdrop-filter:blur(10px); border-bottom:none}
html.ec-rd-portal .lookup-btn{border-radius:14px; background:var(--ec-grad); box-shadow:0 12px 26px rgba(36,123,255,.3)}
html.ec-rd-portal .tabs{border-radius:16px}
html.ec-rd-portal .tab{border-radius:12px}
html.ec-rd-portal .slot-btn{border-radius:12px}
html.ec-rd-portal .kpi-row > .kpi-box:first-child{background:var(--ec-grad); border-color:transparent}
html.ec-rd-portal .kpi-row > .kpi-box:first-child *{color:#fff !important}
html.ec-rd-portal .pat-header{border-radius:24px}

/* ───────── super-admin (administrator/index.html): swap gold accent for brand blue ───────── */
html.ec-rd-sa{--gold:#247BFF; --gold2:#6AA6FF}
html.ec-rd-sa .brand-icon{background:var(--ec-grad)!important; border-radius:14px}

@media (max-width:768px){
  html.ec-rd-dash .content{padding:16px}
  html.ec-rd-dash .header{height:64px}
  html.ec-rd-dash .sidebar{border-radius:24px 0 0 24px}
}
/* portal top bar was dark in light mode (brand text unreadable) */
html.ec-rd-portal[data-theme="light"] .navbar{background:rgba(255,255,255,.88); box-shadow:0 4px 20px rgba(31,78,153,.06)}