:root{
  --primary:#1a6b8a;--primary-light:#2389ad;--primary-dark:#0f4d65;
  --btn-text:#ffffff;
  --accent:#e8b84b;--danger:#e05252;--success:#3dbb7e;--warning:#e8a03a;
  --bg:#f0f4f8;--card:#fff;--sidebar:#0a2540;
  --text:#1e2a35;--text-muted:#6b7f8e;--border:#d1dde6;--input-bg:#f7fafc;
  --shadow:0 4px 20px rgba(13,61,82,.10);--radius:14px;--radius-sm:8px;--sidebar-w:240px;
}
body.dark{
  /* ── Brand colors — slightly softer in dark ── */
  --primary:#38b2cc;--primary-light:#4fc3d8;--primary-dark:#2c9ab5;
  --accent:#f6c94e;--danger:#fc6d6d;--success:#48cc80;--warning:#f0a940;

  /* ── Deep backgrounds — true dark, not gray ── */
  --bg:#0d1117;
  --card:#161b22;
  --sidebar:#070b10;
  --input-bg:#1c2333;
  --border:#30363d;

  /* ── Text — warm white, easy on eyes ── */
  --text:#e6edf3;
  --text-muted:#7d8590;

  /* ── Shadows — deeper in dark ── */
  --shadow:0 4px 24px rgba(0,0,0,.6);
  --radius:14px;--radius-sm:8px;
}

/* ── Dark mode specific overrides ── */
body.dark .card {
  border-color:#21262d;
  background:#161b22;
}
body.dark .modal {
  background:#161b22;
  border:1px solid #30363d;
}
body.dark .modal-hd {
  border-bottom:1px solid #21262d;
}
body.dark .nav-item:hover {
  background:rgba(56,178,204,.12);
}
body.dark .nav-item.active {
  background:linear-gradient(135deg,#1a4a5c,#1e5f78);
  box-shadow:0 4px 15px rgba(56,178,204,.25);
}
body.dark input, body.dark select, body.dark textarea {
  background:#1c2333 !important;
  border-color:#30363d !important;
  color:#e6edf3 !important;
}
body.dark input:focus, body.dark select:focus, body.dark textarea:focus {
  border-color:#38b2cc !important;
  box-shadow:0 0 0 3px rgba(56,178,204,.15);
}
body.dark .btn-outline {
  border-color:#30363d;
  color:#e6edf3;
  background:#1c2333;
}
body.dark .btn-outline:hover { background:#21262d; }
body.dark table thead tr {
  background:linear-gradient(135deg,#1a3a4a,#1e4d60);
}
body.dark table tbody tr:nth-child(even) { background:rgba(255,255,255,.03); }
body.dark table tbody tr:hover { background:rgba(56,178,204,.08); }
body.dark .stat-card { border-right-color:var(--primary); }
body.dark .badge { opacity:.9; }
body.dark .tbl-wrap { border:1px solid #21262d; border-radius:10px; overflow:hidden; }
body.dark .pg-hdr h1 { color:#e6edf3; }
body.dark .sb-footer { border-top-color:#21262d; }
body.dark .login-card {
  background:#161b22;
  border:1px solid #30363d;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
body.dark .mob-hdr { background:#0a0f16; border-bottom:1px solid #21262d; }
body.dark .pt-card { background:#161b22; border-color:#21262d; }
body.dark .pt-card:active { box-shadow:0 4px 20px rgba(56,178,204,.2); }
body.dark .um-card { background:#161b22; border-color:#21262d; }
body.dark .appt-card { background:#161b22; border-color:#21262d; }
body.dark .lab-card  { background:#161b22; border-color:#21262d; }
body.dark .cal-day   { background:#161b22; border-color:#21262d; }
body.dark .cal-day.today { border-color:var(--accent); }
body.dark .cal-dhdr  { color:#7d8590; }
/* ── Scrollbar — Light Mode ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c8d3dc; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#a0b0bc; }

/* ── Scrollbar — Dark Mode ── */
body.dark ::-webkit-scrollbar { width:6px; height:6px; }
body.dark ::-webkit-scrollbar-track { background:transparent; }
body.dark ::-webkit-scrollbar-thumb { background:#30363d; border-radius:10px; }
body.dark ::-webkit-scrollbar-thumb:hover { background:#38b2cc; }
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;}
#offlineBanner{display:none;position:fixed;top:0;left:0;right:0;z-index:99999;background:#e05252;color:#fff;text-align:center;padding:10px;font-size:14px;font-weight:700;font-family:'Cairo',sans-serif;}

/* USERS PAGE — 3-column layout */
.um-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.um-3col{grid-template-columns:1fr}}
.um-col-hdr{font-size:13px;font-weight:800;color:#fff;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.um-col-admins .um-col-hdr{background:linear-gradient(135deg,var(--danger),#c0392b)}
.um-col-users  .um-col-hdr{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.um-col-add    .um-col-hdr{background:linear-gradient(135deg,var(--success),#2ecc71)}
.um-card{background:var(--card);border-radius:var(--radius-sm);padding:14px;box-shadow:var(--shadow);border:1.5px solid var(--border);margin-bottom:10px;transition:.2s}
.um-card:hover{border-color:var(--primary);box-shadow:0 6px 20px rgba(26,107,138,.15)}
.um-card-name{font-size:14px;font-weight:700;margin-bottom:2px}
.um-card-sub{font-size:11px;color:var(--text-muted);margin-bottom:8px}
.um-card-perms{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px;min-height:18px}
.um-perm-chip{font-size:10px;padding:1px 6px;border-radius:10px;background:rgba(26,107,138,.1);color:var(--primary)}
.um-card-actions{display:flex;gap:6px}
.um-perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--input-bg);margin-bottom:12px}
.um-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:5px 6px;border-radius:6px;font-size:12px;cursor:pointer;transition:.15s}
.um-toggle-row:hover{background:rgba(26,107,138,.08)}
.um-toggle{position:relative;display:inline-block;width:34px;height:18px;flex-shrink:0}
.um-toggle input{opacity:0;width:0;height:0}
.um-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:18px;transition:.3s}
.um-slider:before{position:absolute;content:'';height:12px;width:12px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.um-toggle input:checked+.um-slider{background:var(--primary)}
.um-toggle input:checked+.um-slider:before{transform:translateX(16px)}
.um-empty{text-align:center;padding:24px 12px;color:var(--text-muted);font-size:13px}
.um-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;flex-shrink:0}
.um-perm-lbl{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:.15s}
.um-perm-lbl:hover{background:rgba(26,107,138,.1)}
.um-perm-lbl input{accent-color:var(--primary);width:14px;height:14px;flex-shrink:0}


/* ── MOBILE: patients & doctors compact rows ── */
@media(max-width:768px){
  /* Hide extra columns on mobile */
  #ptsTbody tr td:nth-child(4),
  #ptsTbody tr td:nth-child(5),
  #ptsTbody tr td:nth-child(6),
  #ptsTbody tr td:nth-child(7),
  table thead tr th:nth-child(4),
  table thead tr th:nth-child(5),
  table thead tr th:nth-child(6),
  table thead tr th:nth-child(7){ display:none !important; }

  /* Compact patients table */
  #page-patients .tbl-wrap { overflow-x: visible !important; }
  #page-patients table { min-width: unset !important; width:100%; font-size:13px; }
  #page-patients th, #page-patients td { padding:8px 6px !important; }
  #page-patients .flex { gap:4px !important; }
  #page-patients .btn-sm { padding:5px 7px !important; font-size:11px !important; }

  /* Compact doctors table */
  #drsTbody tr td:nth-child(3),
  #drsTbody tr td:nth-child(4),
  #page-doctors table thead tr th:nth-child(3),
  #page-doctors table thead tr th:nth-child(4) { display:none !important; }
  #page-doctors .tbl-wrap { overflow-x: visible !important; }
  #page-doctors table { min-width: unset !important; width:100%; font-size:13px; }
  #page-doctors th, #page-doctors td { padding:8px 6px !important; }
  #page-doctors .flex { gap:4px !important; }
  #page-doctors .btn-sm { padding:5px 7px !important; font-size:11px !important; }
}

/* ── Calendar appointment dot (mobile) ── */
.cal-day[data-cnt]:not([data-cnt=""])::after {
  content: attr(data-cnt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  top: 3px;
  left: 3px;
}
.cal-day { position: relative; }
@media(max-width:600px){
  #stPanel0 .card > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* On mobile, hide event text but keep dot */
  .cal-ev { display:none !important; }
  .cal-day[data-cnt]:not([data-cnt=""])::after {
    width: 18px;
    height: 18px;
    font-size: 10px;
    top: 2px;
    left: 2px;
  }
}

@media(max-width:768px){
  /* Role buttons compact */
  #nuRoleAdminLbl, #nuRoleUserLbl {
    padding:6px 4px !important;
    font-size:11px !important;
    gap:4px !important;
  }
}

@media(max-width:768px){
  /* Lab table → mobile cards */
  #page-lab .tbl-wrap { overflow-x:visible !important; }
  #page-lab table, #page-lab thead, #page-lab tbody,
  #page-lab th, #page-lab td, #page-lab tr { display:block !important; }
  #page-lab thead { display:none !important; }
  #page-lab #labTbody tr {
    background:var(--card);
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    margin-bottom:10px;
    padding:10px 12px;
    box-shadow:var(--shadow);
    border-right:4px solid var(--primary) !important;
  }
  /* Show only: patient+lab+type (cols 1,2,3), try btn (col5), dlv btn (col6), actions (col8) */
  /* Hide: impression date(4), cost(7) → keep visible but smaller */
  #page-lab #labTbody td { padding:3px 0 !important; border:none !important; font-size:12px; }
  /* col 4 (impression date) hidden */
  #page-lab #labTbody td:nth-child(4) { display:none !important; }
  /* Row 1: patient - lab - type inline */
  #page-lab #labTbody td:nth-child(1),
  #page-lab #labTbody td:nth-child(2),
  #page-lab #labTbody td:nth-child(3) { display:inline-block !important; margin-left:6px; }
  #page-lab #labTbody td:nth-child(1) { font-weight:700; font-size:13px; }
  /* Row 2: try + delivery buttons on separate line */
  #page-lab #labTbody td:nth-child(5),
  #page-lab #labTbody td:nth-child(6) { display:block !important; margin-top:6px; }
  /* cost */
  #page-lab #labTbody td:nth-child(7) { display:inline-block !important; margin-top:4px; font-weight:700; color:var(--accent); }
  /* actions */
  #page-lab #labTbody td:nth-child(8) { display:inline-block !important; margin-top:4px; float:left; }
  #page-lab .btn-sm, #page-lab .btn-xs { padding:5px 8px !important; font-size:11px !important; }
}

@media(max-width:768px){
  /* Patients: show col1(id), col2(name), col8(actions) only */
  #page-patients table, #page-patients thead, #page-patients tbody,
  #page-patients th, #page-patients td, #page-patients tr { display:block !important; }
  #page-patients thead { display:none !important; }
  #page-patients #ptsTbody tr {
    background:var(--card);
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    margin-bottom:8px;
    padding:8px 12px;
    display:flex !important;
    align-items:center;
    gap:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }
  #page-patients #ptsTbody td { padding:0 !important; border:none !important; display:none !important; }
  #page-patients #ptsTbody td:nth-child(1) { display:block !important; flex-shrink:0; }
  #page-patients #ptsTbody td:nth-child(2) { display:block !important; flex:1; font-size:13px; font-weight:700; }
  #page-patients #ptsTbody td:nth-child(8) { display:block !important; flex-shrink:0; }
  #page-patients .flex { gap:4px !important; flex-wrap:nowrap; }
  #page-patients .btn-sm { padding:5px 7px !important; font-size:11px !important; }

  /* Doctors: show col1(name), col5(actions) only */
  #page-doctors table, #page-doctors thead, #page-doctors tbody,
  #page-doctors th, #page-doctors td, #page-doctors tr { display:block !important; }
  #page-doctors thead { display:none !important; }
  #page-doctors #drsTbody tr {
    background:var(--card);
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    margin-bottom:8px;
    padding:8px 12px;
    display:flex !important;
    align-items:center;
    gap:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }
  #page-doctors #drsTbody td { padding:0 !important; border:none !important; display:none !important; }
  #page-doctors #drsTbody td:nth-child(1) { display:block !important; flex:1; font-size:13px; font-weight:700; }
  #page-doctors #drsTbody td:nth-child(5) { display:block !important; flex-shrink:0; }
  #page-doctors .flex { gap:4px !important; flex-wrap:nowrap; }
  #page-doctors .btn-sm { padding:5px 7px !important; font-size:11px !important; }
}
/* LOGIN */
#loginWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a2540,#0d3d52,#1a5276);}
.login-card{background:var(--card);border-radius:24px;padding:48px 42px;width:420px;max-width:94vw;box-shadow:0 30px 80px rgba(0,0,0,.3);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo h1{font-size:22px;font-weight:900;color:var(--primary-dark);}
.login-logo p{color:var(--text-muted);font-size:13px;margin-top:4px;}
.lfield{margin-bottom:16px;}
.lfield label{display:block;font-weight:600;margin-bottom:6px;font-size:13px;}
.lfield input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:'Cairo',sans-serif;font-size:15px;background:var(--input-bg);transition:.2s;}
.lfield input:focus{outline:none;border-color:var(--primary);}
.login-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:var(--radius-sm);font-family:'Cairo',sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:.2s;margin-top:6px;}
.login-btn:hover{transform:translateY(-2px);}
.login-err{color:var(--danger);font-size:13px;text-align:center;margin-top:8px;display:none;}

/* APP */
#appWrap{display:none;}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:var(--sidebar);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100vh;z-index:300;box-shadow:-4px 0 20px rgba(0,0,0,.2);transition:transform .3s,width .3s;overflow:hidden;}
.sidebar.collapsed{transform:translateX(100%);}
.sb-logo{padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;text-align:center;}
.sb-logo h2{font-size:16px;font-weight:900;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.sb-logo p{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px;}
#cloudBadge{font-size:9px;margin-top:4px;color:rgba(255,255,255,.3);}
.sb-nav{flex:1;padding:12px 8px;overflow-y:auto;min-height:0;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:.2s;margin-bottom:2px;font-size:13px;font-weight:600;color:rgba(255,255,255,.65);position:relative;}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 15px rgba(26,107,138,.4);}
.nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.nav-badge{position:absolute;left:8px;background:var(--accent);color:#0d3d52;font-size:10px;font-weight:800;padding:1px 5px;border-radius:20px;}
.sb-footer{padding:10px 8px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.user-info{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:.15s;}
.user-info:hover{background:rgba(255,255,255,.06);}
.user-av{width:34px;height:34px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
.user-name{font-size:12px;font-weight:700;}
.user-role{font-size:10px;color:rgba(255,255,255,.4);}
.sb-chevron{color:rgba(255,255,255,.3);font-size:9px;margin-right:auto;transition:.2s;}
.sb-dropdown{margin:4px 6px 2px;background:rgba(255,255,255,.05);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.08);display:none;}
.sb-dropdown.open{display:block;}
.sb-dd-item{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:12px;font-weight:600;color:rgba(255,255,255,.65);cursor:pointer;font-family:Cairo,sans-serif;width:100%;border:none;background:transparent;text-align:right;}
.sb-dd-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.sb-dd-sep{height:1px;background:rgba(255,255,255,.07);}
.sb-dd-logout{color:rgba(224,82,82,.8);}
.sb-dd-logout:hover{background:rgba(224,82,82,.1)!important;color:#fc8e8e!important;}
.sb-btns{display:none;}
.sb-btn{display:none;}

/* MOBILE */
.mob-hdr{display:none;position:fixed;top:0;left:0;right:0;height:54px;background:var(--sidebar);z-index:299;align-items:center;padding:0 14px;gap:12px;box-shadow:0 2px 10px rgba(0,0,0,.3);}
.mob-hdr h2{font-size:14px;font-weight:700;color:#fff;flex:1;}
.hamburger{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px;}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:298;}

/* MAIN */
.main{margin-right:var(--sidebar-w);padding:24px;min-height:100vh;transition:margin-right .3s;}
.sidebar-collapsed .main{margin-right:0;}
.page{display:none;}
.page.active{display:block;}
.pg-hdr{margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.pg-hdr h1{font-size:21px;font-weight:900;color:var(--primary-dark);}
.pg-hdr p{color:var(--text-muted);font-size:12px;margin-top:2px;}
.pg-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* CARDS */
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid rgba(209,221,230,.5);}
.card-title{font-size:14px;font-weight:700;color:var(--primary-dark);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.stat-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;border-right:4px solid var(--primary);}
.stat-icon{width:42px;height:42px;border-radius:10px;background:rgba(26,107,138,.1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.stat-val{font-size:22px;font-weight:900;color:var(--primary-dark);line-height:1;}
.stat-lbl{font-size:11px;color:var(--text-muted);margin-top:2px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fin-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media(max-width:900px){.fin-three-col{grid-template-columns:1fr;}}

/* BUTTONS */
.btn{padding:9px 16px;border:none;border-radius:var(--radius-sm);font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--primary);color:var(--btn-text,#fff);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-wa{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;border:none;border-radius:14px;box-shadow:0 3px 10px rgba(37,211,102,.35);transition:.2s;}
.btn-wa:hover{background:linear-gradient(135deg,#20ba58,#0f7a6d);box-shadow:0 5px 16px rgba(37,211,102,.5);transform:translateY(-1px);}
.btn-sm.btn-wa{border-radius:12px;box-shadow:0 2px 8px rgba(37,211,102,.3);}
.btn-sm.btn-wa:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,211,102,.45);}
.btn-sm{padding:5px 10px;font-size:11px;}
.btn-xs{padding:3px 7px;font-size:10px;}
.btn-accent{background:var(--accent);color:#0d3d52;}

/* FORMS */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg{margin-bottom:0;}
.fg.full{grid-column:1/-1;}
.fg label{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px;}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'Cairo',sans-serif;font-size:14px;background:var(--input-bg);color:var(--text);transition:.2s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--primary);background:var(--card);}
.fg input.err{border-color:var(--danger);background:#fff5f5;}
.fg .errmsg{color:var(--danger);font-size:11px;margin-top:3px;display:none;}
.inline-add{display:flex;gap:6px;margin-top:4px;}
.inline-add input{flex:1;}

/* TABLE */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:500px;}
thead th{background:var(--primary-dark);color:#fff;padding:10px 11px;font-size:12px;font-weight:700;text-align:right;white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s;}
tbody tr:hover{background:rgba(26,107,138,.04);}
tbody td{padding:10px 11px;font-size:12px;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;}
.b-primary{background:rgba(26,107,138,.1);color:var(--primary);}
.b-success{background:rgba(61,187,126,.12);color:#2a9960;}
.b-danger{background:rgba(224,82,82,.12);color:var(--danger);}
.b-accent{background:rgba(232,184,75,.15);color:#a07820;}

/* MODAL */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:16px;}
.modal-ov.open{display:flex;}
.modal{background:var(--card);border-radius:var(--radius);padding:26px;width:680px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:slideUp .3s ease;}
.modal-lg{width:900px;}
.modal-sm{width:420px;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--bg);}
.modal-title{font-size:16px;font-weight:800;color:var(--primary-dark);}
.modal-x{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted);padding:4px;}
.modal-ft{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}

/* TOOLBAR */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.sbox{flex:1;min-width:160px;position:relative;}
.sbox input{
  width:100%;
  padding:10px 16px 10px 42px;
  border:1.5px solid var(--border);
  border-radius:30px;
  background:var(--card);
  color:var(--text);
  font-family:'Cairo',sans-serif;
  font-size:13px;
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
.sbox input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,107,138,.12);
}
.sbox::before{
  content:"🔍";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  pointer-events:none;
  z-index:1;
}
.sbox input{width:100%;}

/* CALENDAR */
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.cal-nav{display:flex;gap:6px;align-items:center;}
.cal-nav button{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:7px 12px;cursor:pointer;font-size:14px;}
.cal-my{font-size:15px;font-weight:700;color:var(--primary-dark);}
.cal-views{display:flex;gap:3px;flex-wrap:wrap;}
.cal-vbtn{padding:6px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;color:var(--text-muted);}
.cal-vbtn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-dhdr{text-align:center;padding:7px 3px;font-size:11px;font-weight:700;color:var(--text-muted);}
.cal-day{min-height:76px;border:1px solid var(--border);border-radius:6px;padding:4px;cursor:pointer;transition:.15s;background:var(--card);overflow:hidden;}
.cal-day:hover{border-color:var(--primary);}
.cal-day.today{border-color:var(--accent);border-width:2px;}
.cal-day.other{opacity:.4;}
.cal-dnum{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:2px;}
.cal-ev{background:var(--primary);color:#fff;border-radius:3px;padding:1px 4px;font-size:10px;margin-bottom:2px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.appt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.appt-card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border-right:4px solid var(--accent);cursor:pointer;transition:.2s;}
.appt-card:hover{transform:translateY(-2px);}
.appt-name{font-size:14px;font-weight:700;color:var(--primary-dark);}
.appt-time{font-size:11px;color:var(--text-muted);margin-top:2px;}
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.week-col{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.week-hdr{background:var(--primary);color:#fff;text-align:center;padding:7px 3px;font-size:11px;font-weight:700;}
.week-hdr.today{background:var(--accent);color:var(--primary-dark);}
.week-ev{background:rgba(26,107,138,.08);border-right:3px solid var(--accent);margin:2px;border-radius:3px;padding:3px 5px;font-size:10px;cursor:pointer;}

/* SESSION DOTS */
.sess-track{background:var(--input-bg);border-radius:var(--radius-sm);padding:12px;border:1px solid var(--border);}
.sess-dot{width:18px;height:18px;border-radius:50%;background:var(--border);border:2px solid var(--border);}
.sess-dot.done{background:var(--success);border-color:var(--success);}
.sess-dot.cur{background:var(--primary);border-color:var(--primary);}

/* FINANCE */
.fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;}
.fin-card{border-radius:var(--radius);padding:20px;text-align:center;color:#fff;}
/* ── Recurring Expenses ── */
.recexp-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;}
.recexp-item:last-child{border-bottom:none;}
.recexp-name{flex:1;font-weight:600;}
.recexp-day{font-size:11px;color:var(--text-muted);margin-top:2px;}
.recexp-notes{font-size:11px;color:var(--text-muted);margin-top:2px;font-style:italic;}
.recexp-amount{font-weight:700;color:var(--danger);min-width:80px;text-align:left;}
.recexp-frozen{opacity:.45;}
.recexp-actions{display:flex;gap:4px;}
.recexp-freeze{background:rgba(232,184,75,.15);color:var(--warning);border:1px solid rgba(232,184,75,.3);border-radius:6px;padding:3px 8px;cursor:pointer;font-size:11px;font-family:Cairo,sans-serif;}
.recexp-freeze.frozen{background:rgba(61,187,126,.15);color:var(--success);border-color:rgba(61,187,126,.3);}
body.dark .recexp-item{border-color:#30363d;}
.fin-card.inc{background:linear-gradient(135deg,#3dbb7e,#2a9960);}
.fin-card.exp{background:linear-gradient(135deg,#e05252,#b83d3d);}
.fin-card.net{background:linear-gradient(135deg,var(--primary),var(--primary-dark));}
.fin-val{font-size:24px;font-weight:900;}
.fin-lbl{font-size:12px;opacity:.85;margin-top:4px;}
.pbtns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.pbtn{padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;color:var(--text-muted);}
.pbtn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.tooth-cb{display:inline-flex;align-items:center;gap:3px;background:var(--card);border:1.5px solid var(--border);border-radius:6px;padding:3px 7px;cursor:pointer;font-size:12px;font-weight:600;transition:.15s;user-select:none}
.tooth-cb:hover{border-color:var(--primary);color:var(--primary)}
.tooth-cb.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
.tooth-cb input{display:none}
.pf label{font-size:13px;font-weight:600;}

/* BAR CHART */
.bar-chart{display:flex;flex-direction:column;gap:8px;}
.bar-row{display:flex;align-items:center;gap:8px;}
.bar-lbl{min-width:110px;font-size:12px;font-weight:600;text-align:right;}
.bar-track{flex:1;background:var(--border);border-radius:4px;height:12px;overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:4px;transition:width .4s;}
.bar-val{min-width:80px;font-size:11px;font-weight:700;color:var(--primary);text-align:left;}

/* MISC */
.empty{text-align:center;padding:40px 20px;color:var(--text-muted);}
.empty .ei{font-size:46px;margin-bottom:10px;}
.hist-item{background:var(--input-bg);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;border-right:3px solid var(--accent);}
.hist-date{font-size:13px;font-weight:700;color:var(--primary-dark);margin-bottom:4px;}
.hist-svc{font-size:13px;font-weight:600;margin-bottom:4px;}
.hist-amts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11px;}
.bd-card{background:linear-gradient(135deg,#fff8e7,#fff3d0);border:2px solid var(--accent);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.bd-icon{font-size:30px;}
.bd-name{font-size:14px;font-weight:700;color:var(--primary-dark);}
.bd-age{font-size:12px;color:var(--text-muted);}
.bd-acts{display:flex;gap:6px;flex-wrap:wrap;}
.rem-card{background:linear-gradient(135deg,#fff8e0,#fff3cc);border:2px solid var(--accent);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.log-item{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:10px;}
.st-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--input-bg);border-radius:6px;margin-bottom:5px;}
.st-name{font-size:13px;font-weight:600;}
.add-row{display:flex;gap:6px;margin-top:6px;}
.add-row input{flex:1;}
.sec-title{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;}
/* Debt responsive */
.debt-cards { display:none; }
.debt-table { display:table; }
@media(max-width:767px) {
  .debt-cards { display:block; }
  .debt-table { display:none !important; }
}
.custom-sel-list{width:100%;max-height:160px;overflow-y:auto;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--input-bg);font-family:Cairo,sans-serif;font-size:13px;color:var(--text);}
.custom-sel-item{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--border);}
.custom-sel-item:last-child{border-bottom:none;}
.custom-sel-item:hover,.custom-sel-item:focus{background:var(--primary);color:#fff;}
.custom-sel-item.selected{background:rgba(26,107,138,.12);color:var(--primary);font-weight:600;}
.theme-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px;}
.theme-card{border-radius:12px;overflow:hidden;cursor:pointer;border:3px solid transparent;transition:.2s;position:relative;}
.theme-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.theme-card.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary);}
.theme-preview{height:64px;display:grid;grid-template-columns:40% 60%;}
.theme-sidebar-preview{background:var(--tp-sidebar);}
.theme-main-preview{background:var(--tp-bg);display:flex;flex-direction:column;gap:4px;padding:8px;}
.theme-bar{height:8px;border-radius:4px;}
.theme-name{padding:8px 10px;font-size:12px;font-weight:700;background:var(--card);color:var(--text);text-align:center;border-top:1px solid var(--border);}
.theme-active-badge{position:absolute;top:6px;left:6px;background:var(--primary);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:20px;}
.theme-color-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--input-bg);border-radius:var(--radius-sm);border:1.5px solid var(--border);}
.theme-color-row label{flex:1;font-size:13px;font-weight:600;}
.theme-color-row input[type=color]{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;padding:2px;background:none;flex-shrink:0;}
.theme-color-row input[type=text]{width:90px;padding:6px 8px;border:1.5px solid var(--border);border-radius:6px;font-family:Cairo,sans-serif;font-size:12px;background:var(--card);color:var(--text);}
.user-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--input-bg);border-radius:var(--radius-sm);margin-bottom:8px;}
.uc-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;}
.flex{display:flex;}.g8{gap:8px;}.g6{gap:6px;}.wrap{flex-wrap:wrap;}.ic{align-items:center;}
.lab-card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border-right:4px solid var(--primary);margin-bottom:10px;}

/* RESPONSIVE */
@media(max-width:1024px) and (min-width:769px){
  :root{--sidebar-w:200px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .mob-hdr{display:flex;}
  .sidebar{transform:translateX(100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-right:0;padding:20px;padding-top:70px;}
}
@media(max-width:768px){
  .sidebar{transform:translateX(100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-right:0;padding:12px;padding-top:66px;}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .two-col{grid-template-columns:1fr;}
  .fin-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .modal-ov{padding:0;align-items:flex-end;}
  .modal{border-radius:16px 16px 0 0;max-height:92vh;width:100% !important;padding:18px;}
  .pg-hdr{flex-direction:column;align-items:flex-start;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .cal-grid{gap:1px;}
  .cal-day{min-height:44px;padding:2px;}
  .cal-ev{display:none;}
  .week-grid{grid-template-columns:repeat(4,1fr);}
  .appt-cards{grid-template-columns:1fr;}
  .bar-lbl{min-width:80px;}
  .tbl-wrap{overflow-x:auto;}
  table{min-width:480px;}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-card{flex-direction:column;text-align:center;gap:6px;padding:12px 8px;}
  .week-grid{grid-template-columns:repeat(3,1fr);}
  .main{padding:8px;padding-top:62px;}
}

/* TOAST */
#toast{position:fixed;bottom:30px;right:50%;transform:translateX(50%);background:#1e2a35;color:#fff;padding:12px 24px;border-radius:30px;font-size:13px;font-weight:600;z-index:9999;display:none;box-shadow:0 8px 30px rgba(0,0,0,.3);}
#toast.show{display:block;animation:fadeInUp .3s ease;}
#toast.err{background:var(--danger);}
#toast.info{background:var(--primary);}
@keyframes fadeInUp{from{transform:translateX(50%) translateY(20px);opacity:0}to{transform:translateX(50%) translateY(0);opacity:1}}

/* LOADING */
#loadingOverlay{position:fixed;inset:0;background:var(--sidebar);display:flex;align-items:center;justify-content:center;z-index:9998;flex-direction:column;gap:16px;}
#loadingOverlay p{color:rgba(255,255,255,.7);font-size:14px;}
.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== EXPANDABLE DOCTOR ROWS ===== */
.dr-row { cursor:pointer; transition:background .15s; }
.dr-row:hover { background:rgba(26,107,138,.05); }
.dr-arrow { transition:transform .3s ease; display:inline-block; font-size:14px; color:var(--primary); }
.dr-arrow.open { transform:rotate(180deg); }
.dr-expand-row { display:none; }
.dr-expand-row.open { display:table-row; }
.dr-expand-cell { padding:0 !important; border-bottom:2px solid var(--primary) !important; }
.dr-expand-inner { padding:16px; background:linear-gradient(135deg,rgba(26,107,138,.04),rgba(26,107,138,.01)); border-radius:0 0 var(--radius-sm) var(--radius-sm); }
.dr-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding:10px 14px; background:var(--card); border-radius:var(--radius-sm); box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid var(--border); }
.dr-filter-bar label { font-size:12px; font-weight:700; color:var(--primary-dark); white-space:nowrap; }
.dr-fsel { padding:7px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'Cairo',sans-serif; font-size:12px; background:var(--input-bg); color:var(--text); min-width:130px; }
.dr-fdate { padding:7px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'Cairo',sans-serif; font-size:12px; background:var(--input-bg); color:var(--text); }
.dr-sub-table { width:100%; border-collapse:collapse; font-size:12px; }
.dr-sub-table th { background:var(--primary-dark); color:#fff; padding:8px 10px; text-align:right; font-size:11px; font-weight:700; white-space:nowrap; }
.dr-sub-table td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:right; }
.dr-sub-table tr:hover td { background:rgba(26,107,138,.04); }
.dr-sub-total { background:rgba(26,107,138,.08) !important; font-weight:800 !important; }
.dr-sub-total td { border-top:2px solid var(--primary) !important; color:var(--primary-dark); }
.dr-loading { text-align:center; padding:20px; color:var(--text-muted); font-size:13px; }
.dr-empty { text-align:center; padding:24px; color:var(--text-muted); }
.dr-empty .dr-ei { font-size:36px; margin-bottom:8px; }
@media(max-width:768px){
  .dr-filter-bar { flex-direction:column; align-items:stretch; }
  .dr-fsel,.dr-fdate { width:100%; }
  .dr-sub-table th,.dr-sub-table td { padding:6px 7px; font-size:10px; }
}

/* DASHBOARD GRID */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dash-item{display:flex;align-items:center;justify-content:space-between;padding:9px 6px;border-bottom:1px solid var(--border);}
.dash-item:last-child{border-bottom:none;}
.dash-item-info{flex:1}
.dash-item-name{font-size:13px;font-weight:700;color:var(--primary-dark);}
.dash-item-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
.dash-item-actions{display:flex;gap:6px;flex-shrink:0;}
.dash-action-btn{width:30px;height:30px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.15s;}
.dash-action-btn:hover{transform:scale(1.1);}
.dab-ok{background:rgba(61,187,126,.15);color:var(--success);}
.dab-call{background:rgba(33,150,243,.15);color:#1565c0;}
.dab-wa{background:rgba(37,211,102,.15);color:#25d366;border:none;border-radius:10px;}
.dab-ok-done{background:rgba(61,187,126,.25);color:var(--success);border:1.5px solid var(--success);}
@media(max-width:600px){.dash-grid{grid-template-columns:1fr;}}

/* Appointment color coding by service */
.cal-ev.clr-red { background: #e05252; }
.cal-ev.clr-green { background: #3dbb7e; }
.cal-ev.clr-yellow { background: #e8b84b; color: #0d3d52; }
.cal-ev.clr-blue { background: var(--primary); }
.cal-ev.clr-purple { background: #8b5cf6; }

/* ===== RESPONSIVE CARD VIEW FOR TABLES ON MOBILE ===== */
@media(max-width:768px){
  /* Convert all tables to card view */
  .tbl-wrap table thead { display:none; }
  .tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td {
    display:block; width:100%;
  }
  .tbl-wrap tr {
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    margin-bottom:10px;
    padding:10px;
    background:var(--card);
    box-shadow:0 2px 6px rgba(0,0,0,.06);
  }
  .tbl-wrap td {
    padding:4px 8px;
    border:none;
    text-align:right;
    font-size:13px;
  }
  .tbl-wrap td:before {
    font-weight:700;
    color:var(--text-muted);
    font-size:11px;
    display:block;
    margin-bottom:2px;
  }
  /* Doctor sub-table on mobile */
  .dr-sub-table thead { display:none; }
  .dr-sub-table, .dr-sub-table tbody, .dr-sub-table tr, .dr-sub-table td { display:block; width:100%; }
  .dr-sub-table tr { border:1px solid var(--border); border-radius:6px; margin-bottom:8px; padding:8px; }
  .dr-sub-table td { padding:3px 6px; border:none; font-size:12px; }
  /* Finance cards stack */
  .fin-grid { grid-template-columns:1fr !important; }
  /* Two-col finance stacks */
  .two-col { grid-template-columns:1fr !important; }
  /* Stats cards on mobile */
  .stats-grid { grid-template-columns:1fr 1fr; }
  /* Doctor expandable on mobile */
  .dr-expand-cell { padding:8px !important; }
}
.fg input[type=checkbox]{margin:0;vertical-align:middle;} label{align-items:center;gap:6px !important;}
.cal-day-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:8px 12px;background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);}.cal-day-nav button{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 14px;cursor:pointer;font-size:14px;}.cal-day-nav .day-title{font-size:14px;font-weight:700;color:var(--primary-dark);}
/* ── Selected Day Panel (Monthly view) ── */
#calDayPanel{margin-top:14px;border-top:2px solid var(--border);padding-top:14px;animation:fadeInUp .2s ease;}
#calDayPanel.hidden{display:none;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.cal-day-panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cal-day-panel-title{font-size:14px;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:6px;}
.cal-day-panel-add{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:5px 12px;cursor:pointer;font-size:12px;font-family:'Cairo',sans-serif;display:flex;align-items:center;gap:4px;transition:.15s;}
.cal-day-panel-add:hover{background:var(--primary-dark);}
.cal-day-panel-empty{text-align:center;padding:20px;color:var(--text-muted);font-size:13px;}
/* ── Patient select dropdown ── */
select[id$="PtId"] option{padding:8px 10px;font-size:13px;font-family:'Cairo',sans-serif;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
select[id$="PtId"]{line-height:2;min-height:120px;}
body.dark select[id$="PtId"]{background:var(--input-bg);border-color:var(--border);color:var(--text);}
.cal-dp-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--input-bg);border-radius:var(--radius-sm);border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;transition:.15s;border-right:4px solid var(--primary);}
.cal-dp-item:hover{border-color:var(--primary);box-shadow:0 3px 12px rgba(26,107,138,.15);transform:translateY(-1px);}
.cal-dp-item-time{font-size:12px;font-weight:700;color:var(--primary);min-width:52px;text-align:center;background:rgba(26,107,138,.1);border-radius:6px;padding:3px 6px;}
.cal-dp-item-info{flex:1;}
.cal-dp-item-name{font-size:13px;font-weight:700;}
.cal-dp-item-svc{font-size:11px;color:var(--text-muted);margin-top:1px;}
.cal-dp-item-bal{font-size:11px;font-weight:700;}
.cal-day.cal-day-selected{border-color:var(--primary)!important;border-width:2px!important;background:rgba(26,107,138,.08)!important;}
body.dark .cal-dp-item{background:var(--input-bg);border-color:#30363d;}
body.dark .cal-dp-item:hover{border-color:var(--primary);}
body.dark #calDayPanel{border-top-color:#30363d;}
@media(max-width:600px){
  .cal-dp-item{padding:8px 10px;gap:8px;}
  .cal-dp-item-time{font-size:11px;min-width:46px;}
  .cal-dp-item-name{font-size:12px;}
}
.perm-grid label{display:flex !important;align-items:center !important;gap:10px !important;cursor:pointer;}
.perm-grid input[type='checkbox']{margin:0 !important;flex-shrink:0;width:15px;height:15px;}
@media(max-width:768px){.perm-grid{grid-template-columns:1fr !important;}}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — Mobile-first, creative, premium feel
   Breakpoints: xs<480, sm<600, md<768, lg<900, xl<1024
   ════════════════════════════════════════════════════════════ */

/* ── CSS custom props for spacing scale ── */
:root {
  --space-xs:4px; --space-sm:8px; --space-md:14px; --space-lg:20px; --space-xl:28px;
  --fz-xs:11px; --fz-sm:12px; --fz-md:13px; --fz-base:14px; --fz-lg:16px; --fz-xl:18px;
  --touch:44px; /* minimum touch target */
  --card-r:14px; --chip-r:20px;
  --sb-w-mobile:280px;
}

/* ══ 1. SIDEBAR & NAVIGATION ══════════════════════════════ */
@media(max-width:900px){
  .sidebar{
    width:var(--sb-w-mobile);
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
    box-shadow:none;
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:-8px 0 32px rgba(0,0,0,.35);
  }
  .main{ margin-right:0 !important; padding:70px 12px 24px; }
  .mob-hdr{
    display:flex !important;
    height:56px;
    background:var(--sidebar);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .overlay{
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
    z-index:299;
    transition:opacity .25s;
  }
  .overlay.show{ display:block; animation:fadeIn .25s ease; }
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* Sidebar nav items bigger for touch */
  .nav-item{
    padding:12px 14px !important;
    font-size:var(--fz-base) !important;
    border-radius:10px !important;
    margin-bottom:3px !important;
    min-height:var(--touch);
    display:flex; align-items:center;
  }
  .sb-nav{ padding:10px 8px !important; }

  /* Footer always visible */
  .sb-footer{ flex-shrink:0 !important; padding:12px 10px !important; }
  .sb-btn{ min-height:40px !important; font-size:var(--fz-sm) !important; }

  /* Page header */
  .pg-hdr{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  .pg-hdr h1{ font-size:var(--fz-xl) !important; }
  .pg-actions{
    display:flex; flex-wrap:wrap; gap:7px;
  }
  .pg-actions .btn{ flex:1; min-width:130px; min-height:var(--touch); font-size:var(--fz-sm); }
}

/* ══ 2. CARDS & STAT GRID ══════════════════════════════════ */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
@media(max-width:900px){ .stat-cards{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .stat-cards{grid-template-columns:1fr 1fr;gap:10px;} }
@media(max-width:900px){
  .card{ padding:14px !important; border-radius:var(--card-r) !important; }
  .two-col{ grid-template-columns:1fr !important; }
  .three-col{ grid-template-columns:1fr !important; }
}

/* ══ 3. MODALS ══════════════════════════════════════════════ */
.modal{ width:min(680px,96vw) !important; border-radius:var(--card-r) !important; }
.modal-sm{ width:min(460px,96vw) !important; }
.modal-ov{ padding:8px !important; }
@media(max-width:600px){
  .modal{
    width:100vw !important;
    max-width:100vw !important;
    border-radius:20px 20px 0 0 !important;
    position:fixed !important;
    bottom:0; left:0; right:0;
    max-height:92vh;
    padding:20px 16px !important;
  }
  .modal-ov{
    padding:0 !important;
    align-items:flex-end !important;
  }
  .form-grid{ grid-template-columns:1fr !important; gap:10px; }
  .modal-ft{ flex-wrap:wrap; gap:8px; padding-top:10px; }
  .modal-ft .btn{ flex:1; min-height:var(--touch); font-size:var(--fz-md); }
}

/* ══ 4. TABLES → SMART CARDS (mobile) ══════════════════════ */
@media(max-width:768px){
  .tbl-wrap{ overflow-x:visible !important; border-radius:0 !important; box-shadow:none !important; }

  /* ══════════════════════════════════════════════════════
     MOBILE CARDS — patients, doctors, lab  (<768px only)
     ══════════════════════════════════════════════════════ */

  /* ── 1. PATIENTS ── */
  .pt-cards-container {
    width:100%;
    box-sizing:border-box;
    padding:4px 0;
  }
  .pt-card {
    background:var(--card);
    border-radius:16px;
    border:1.5px solid var(--border);
    border-right:4px solid var(--primary);
    padding:14px 16px;
    margin-bottom:10px;
    box-shadow:0 2px 12px rgba(13,61,82,.08);
    width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }
  .pt-card-head {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    overflow:hidden;
  }
  .pt-card-name {
    font-size:15px;
    font-weight:800;
    color:var(--text);
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
      return '<div class="font-chip' + (active?' font-chip-active':'') + '" data-font="' + f.name + '" onclick="applyFont(this.dataset.font,true)" style="padding:8px 12px;border-radius:8px;cursor:pointer;border:1.5px solid ' + border + ';background:' + bg + ';transition:.2s">'
        + '<div style="font-size:14px;font-weight:600;color:var(--text)">' + f.label + '</div>'
        + '<div style="font-size:11px;color:var(--text-muted)">'+getClinicName()+'</div>'
      + '</div>';
    color:var(--text-muted);
    flex-shrink:0;
    direction:ltr;
    white-space:nowrap;
  }
  .pt-card-actions {
    display:flex;
    gap:7px;
    border-top:1px solid var(--border);
    padding-top:10px;
    flex-wrap:nowrap;
  }
  .pt-act-btn {
    flex:1;
    min-height:42px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s;
    font-family:'Cairo',sans-serif;
    padding:0 6px;
    box-sizing:border-box;
  }
  .pt-act-edit  { background:var(--input-bg); color:var(--text); border:1.5px solid var(--border) !important; flex:0 0 42px; }
  .pt-act-del   { background:#e05252; color:#fff; flex:0 0 42px; box-shadow:0 2px 8px rgba(224,82,82,.3); }
  .pt-act-call  { background:rgba(33,150,243,.12); color:#1565c0; border:1.5px solid rgba(33,150,243,.3) !important; flex:0 0 42px; }
  .pt-act-wa    { background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; flex:0 0 42px; box-shadow:0 2px 8px rgba(37,211,102,.35); }
  .pt-act-hist  { background:var(--primary-dark); color:#fff; flex:1; }
  .pt-act-btn:active { opacity:.85; transform:scale(.97); }

  /* Hide native table on mobile when cards shown */
  @media(max-width:768px){
    #page-patients .tbl-wrap { overflow-x:visible !important; }
  }

  /* ── 2. DOCTORS ── */
  #page-doctors .tbl-wrap { overflow-x:visible !important; }
  #page-doctors table { display:block !important; }
  #page-doctors thead { display:none !important; }
  #page-doctors tbody { display:flex !important; flex-direction:column; gap:10px; }

  #page-doctors tbody tr {
    display:flex !important;
    flex-direction:column;
    background:var(--card);
    border-radius:14px;
    border:1px solid var(--border);
    padding:14px;
    box-shadow:0 2px 12px rgba(13,61,82,.08);
    overflow:hidden;
  }
  #page-doctors tbody td {
    display:none !important;
    padding:0 !important;
    border:none !important;
  }

  /* Name(1) + Specialization(2) + Phone(3) + Rate(4) + Actions(6) */
  #page-doctors tbody td:nth-child(1) {
    display:block !important;
    font-size:15px; font-weight:800;
    color:var(--text);
    margin-bottom:4px;
  }
  #page-doctors tbody td:nth-child(2) {
    display:block !important;
    font-size:12px; color:var(--text-muted);
    margin-bottom:2px;
  }
  #page-doctors tbody td:nth-child(2)::before { content:"🔬 "; }
  #page-doctors tbody td:nth-child(3) {
    display:block !important;
    font-size:12px; color:var(--text-muted);
    margin-bottom:2px;
    direction:ltr; text-align:right;
  }
  #page-doctors tbody td:nth-child(3)::before { content:"📞 "; }
  #page-doctors tbody td:nth-child(4) {
    display:block !important;
    margin-bottom:10px;
  }
  #page-doctors tbody td:nth-child(6) {
    display:block !important;
    border-top:1px solid var(--border);
    padding-top:10px !important;
    margin-top:2px;
  }
  #page-doctors tbody td:nth-child(6) .flex {
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
    flex-wrap:wrap;
  }
  #page-doctors tbody .btn-sm {
    flex:1;
    min-width:44px;
    min-height:40px;
    padding:8px 10px !important;
    font-size:12px !important;
    border-radius:10px !important;
    display:flex; align-items:center; justify-content:center;
  }

  /* ── 3. LAB ── */
  #page-lab .tbl-wrap { overflow-x:visible !important; }
  #page-lab table { display:block !important; }
  #page-lab thead { display:none !important; }
  #page-lab tbody { display:flex !important; flex-direction:column; gap:12px; }

  #page-lab tbody tr {
    display:flex !important;
    flex-direction:column;
    background:var(--card);
    border-radius:14px;
    border:1px solid var(--border);
    border-right:4px solid var(--primary) !important;
    padding:14px;
    box-shadow:0 2px 12px rgba(13,61,82,.08);
    overflow:hidden;
  }
  #page-lab tbody td {
    display:none !important;
    padding:3px 0 !important;
    border:none !important;
    font-size:13px;
  }

  /* Patient(1) */
  #page-lab tbody td:nth-child(1) {
    display:block !important;
    font-size:15px; font-weight:800;
    margin-bottom:2px;
  }
  /* Lab name(2) */
  #page-lab tbody td:nth-child(2) {
    display:block !important;
    font-size:12px; color:var(--primary);
    margin-bottom:2px;
  }
  #page-lab tbody td:nth-child(2)::before { content:"🔬 "; }
  /* Type(3) */
  #page-lab tbody td:nth-child(3) {
    display:block !important;
    font-size:12px; color:var(--text-muted);
    margin-bottom:8px;
  }
  #page-lab tbody td:nth-child(3)::before { content:"🦷 "; }
  /* Impression date(4) hidden */
  /* Try btn(5) */
  #page-lab tbody td:nth-child(5) {
    display:block !important;
    margin-bottom:6px;
  }
  /* Delivery btn(6) */
  #page-lab tbody td:nth-child(6) {
    display:block !important;
    margin-bottom:8px;
  }
  /* Cost(7) */
  #page-lab tbody td:nth-child(7) {
    display:block !important;
    font-weight:700;
    color:var(--accent);
    font-size:14px;
    margin-bottom:8px;
    padding:4px 0 !important;
  }
  #page-lab tbody td:nth-child(7)::before { content:"💰 "; }
  /* Actions(8) */
  #page-lab tbody td:nth-child(8) {
    display:block !important;
    border-top:1px solid var(--border);
    padding-top:10px !important;
    margin-top:2px;
  }
  #page-lab tbody td:nth-child(8) .flex {
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
  }
  #page-lab tbody .btn-sm,
  #page-lab tbody .btn-xs {
    min-height:40px;
    padding:8px 12px !important;
    font-size:12px !important;
    border-radius:10px !important;
  }
}

/* ══ 5. CALENDAR ════════════════════════════════════════════ */
@media(max-width:768px){
  .cal-views{ display:flex; flex-wrap:nowrap; gap:4px; width:100%; }
  .cal-vbtn{ flex:1; padding:8px 4px !important; font-size:var(--fz-xs) !important; min-height:36px; }
  .pg-actions .cal-views + .btn{ width:100%; margin-top:4px; }
}
@media(max-width:600px){
  .cal-grid{ gap:1px !important; }
  .cal-day{ min-height:42px !important; padding:2px !important; position:relative; overflow:hidden; }
  .cal-dnum{ font-size:var(--fz-xs) !important; font-weight:700; }
  .cal-ev{ display:none !important; }
  /* appointment dot */
  .cal-day[data-cnt]:not([data-cnt=""])::after{
    content:attr(data-cnt);
    position:absolute; top:2px; left:2px;
    background:var(--primary); color:#fff;
    border-radius:50%; width:16px; height:16px;
    font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    line-height:1;
  }
  .cal-dhdr{ font-size:9px !important; padding:4px 1px !important; font-weight:700; }
}

/* ══ 6. USERS PAGE ══════════════════════════════════════════ */
.um-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media(max-width:900px){ .um-3col{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .um-3col{ grid-template-columns:1fr; } }
@media(max-width:768px){
  /* Role radio buttons compact */
  #nuRoleAdminLbl, #nuRoleUserLbl{
    padding:8px 6px !important; font-size:var(--fz-xs) !important;
    min-height:40px;
  }
  .um-perm-grid{ grid-template-columns:1fr 1fr !important; }
}

/* ══ 7. FINANCE ═════════════════════════════════════════════ */
@media(max-width:768px){
  .fin-summary{ flex-direction:column !important; }
  .fin-stat-cards{ grid-template-columns:1fr !important; }
  #page-finance .fin-three-col{ grid-template-columns:1fr !important; }
}

/* ══ 8. BUTTONS & INPUTS ════════════════════════════════════ */
@media(max-width:768px){
  input[type=text],input[type=password],input[type=email],
  input[type=number],input[type=date],input[type=datetime-local],
  input[type=month],select,textarea{
    font-size:16px !important; /* prevent iOS zoom */
    padding:10px 12px !important;
    border-radius:var(--radius-sm) !important;
  }
  .btn{ min-height:var(--touch); border-radius:10px !important; }
  .btn-sm{ min-height:36px !important; border-radius:8px !important; }
  .badge{ padding:3px 8px !important; font-size:10px !important; }
}

/* ══ 9. PRESCRIPTIONS / INSTRUCTIONS ══════════════════════ */
@media(max-width:768px){
  #page-prescriptions .two-col,
  #page-instructions .two-col{ grid-template-columns:1fr !important; }
}

/* ══ 10. GENERAL POLISH ════════════════════════════════════ */
@media(max-width:768px){
  #dashGrid{ grid-template-columns:1fr !important; }
  .appt-cards{ grid-template-columns:1fr !important; }
  .appt-card{ padding:12px !important; border-radius:12px !important; }
  .week-grid{ display:flex !important; overflow-x:auto; gap:6px; padding-bottom:8px; }
  .week-col{ min-width:90px !important; flex-shrink:0; }
  .card-title{ font-size:var(--fz-base) !important; }
  .empty{ padding:24px 16px !important; }
  .pg-hdr p{ font-size:var(--fz-xs) !important; }
}

/* ══ 11. SAFE AREAS & SCROLLING ════════════════════════════ */
@supports(padding:max(0px)){
  .mob-hdr{ padding-top:max(0px,env(safe-area-inset-top)) !important; height:calc(56px + env(safe-area-inset-top)) !important; }
  .sidebar{ padding-top:max(0px,env(safe-area-inset-top)); }
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
.tbl-wrap{ -webkit-overflow-scrolling:touch; }