#dateTime.time-chip{min-width:120px; justify-content:flex-start;}
#dateTime.time-chip .dt-text{display:inline-block; width:120px; text-align:left; font-variant-numeric:tabular-nums; letter-spacing:.5px;}
:root{
  /* Dark theme (default) */
  --bg:#111111;
  --bg-main:#151515; /* main content backdrop slightly lighter */
  --text:#ffffff;
  --muted:#d4d4d4;
  --muted-2:#f5f5f5;
  --card:#161616;
  --border:rgba(255,255,255,.09);
  --accent:#e0e0e0;
  --primary:#ffffff;
  --danger:#ff5a5a;
  --focus-ring: 0 0 0 2px rgba(255,255,255,.08);
  --shadow-elev: 0 4px 16px -4px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.5);
  --grad-accent: linear-gradient(135deg,#3a3a3a,#1d1d1d);
}

/* Date input (calendar filter) refinements */
input[type=date]{position:relative; font-variant-numeric:tabular-nums; letter-spacing:.5px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85); opacity:.8; cursor:pointer; transition:opacity .25s ease, filter .35s ease}
html[data-theme='light'] input[type=date]::-webkit-calendar-picker-indicator{filter:none; opacity:.7}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}
input[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1}
/* Subtle inner highlight for dark theme */
html[data-theme='dark'] input[type=date]{background:linear-gradient(145deg,#181818,#141414); box-shadow:inset 0 0 0 1px var(--border), 0 0 0 0 rgba(0,0,0,0);}
html[data-theme='dark'] input[type=date]:focus{box-shadow:var(--focus-ring), inset 0 0 0 1px var(--accent)}
/* Light theme fine-tune */
html[data-theme='light'] input[type=date]{background:linear-gradient(145deg,#ffffff,#f5f7fb)}
/* Placeholder-like color for empty date (if using JS we can detect value) */
input[type=date]:not(:focus):placeholder-shown{color:var(--muted)}
/* Compact height harmonization inside toolbar */
.patients-toolbar input[type=date]{min-width:140px}
@media (max-width:820px){ .patients-toolbar input[type=date]{flex:1 1 140px} }

html[data-theme='light']{
  --bg:#f5f7fb;
  --bg-main:#ffffff;
  --text:#1a1d29;
  --muted:#5a6072;
  --muted-2:#2c3039;
  --card:#ffffff;
  --border:rgba(0,0,0,.08);
  --accent:#2c3039;
  --primary:#2c3039;
  --danger:#c62828;
  --focus-ring:0 0 0 2px rgba(32,70,255,.25);
  --shadow-elev: 0 4px 16px -4px rgba(0,0,0,.15),0 2px 6px -2px rgba(0,0,0,.08);
  --grad-accent: linear-gradient(135deg,#e2e8f5,#ffffff);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 Inter, Roboto, "Open Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  transition: background .35s ease, color .35s ease;
}
.app{display:grid; grid-template-columns:260px 1fr; min-height:100vh}
.app{transition: filter .2s ease}
body[data-blurred="1"] .app{filter: blur(2px) saturate(80%)}
body[data-blurred="1"]{overflow:hidden}
.sidebar{background:var(--card); border-right:1px solid var(--border); padding:16px; position:sticky; top:0; height:100vh; transition:transform .25s ease, background .35s ease, color .35s ease}
.sidebar{background:var(--card); border-right:1px solid var(--border); padding:18px 18px 24px; position:sticky; top:0; height:100vh; transition:transform .25s ease, background .35s ease, color .35s ease; display:flex; flex-direction:column}
.brand{font-weight:700; letter-spacing:.5px; font-size:20px; margin-bottom:16px}
.brand span{color:var(--muted)}
nav{display:flex; flex-direction:column; gap:6px; flex:1}
.sidebar-footer{margin-top:auto; padding-top:12px; border-top:1px solid var(--border)}
.sidebar-footer-label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:0 12px 6px}
.sidebar-tv-link{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; transition:background .2s ease, color .2s ease}
.sidebar-tv-link:hover{background:var(--grad-accent); color:var(--text)}
.sidebar-tv-link .material-symbols-rounded{font-size:18px}
.sidebar-tv-link .open-icon{font-size:14px; margin-left:auto; opacity:.5}
.sidebar-tv-link .hosp-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
nav a{color:var(--text); text-decoration:none; padding:10px 12px; border:1px solid transparent; border-radius:8px; display:flex; align-items:center; gap:8px}
nav a{color:var(--text); text-decoration:none; padding:12px 14px; border:1px solid transparent; border-radius:10px; display:flex; align-items:center; gap:10px; font-size:14.5px; line-height:1; min-height:44px; font-weight:500}
nav a.active, nav a:hover{background:var(--grad-accent); border-color:var(--border)}
nav a .icon{font-size:21px; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px}
nav a.active .icon{font-variation-settings:'FILL' 1,'wght' 550,'GRAD' 0,'opsz' 24}
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle}
html[data-theme='dark'] .material-symbols-rounded[data-icon='sun']{display:inline-flex}
html[data-theme='dark'] .material-symbols-rounded[data-icon='moon']{display:none}
html[data-theme='light'] .material-symbols-rounded[data-icon='sun']{display:none}
html[data-theme='light'] .material-symbols-rounded[data-icon='moon']{display:inline-flex}

.main{display:flex; flex-direction:column; overflow-x:hidden}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:10; transition:background .35s ease, border-color .35s ease}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:56px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:10; transition:background .35s ease, border-color .35s ease}
.topbar .left{display:flex; align-items:center; gap:12px; min-width:0; overflow:hidden}
.topbar .right{display:flex; align-items:center; gap:12px; flex-shrink:0}

.icon-btn{background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:background .25s ease, color .25s ease, border-color .25s ease}
.icon-btn{background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .25s ease, color .25s ease, border-color .25s ease; height:44px; font-size:14px; font-weight:500}
.icon-btn:hover{background:var(--grad-accent)}
.icon-btn:focus{outline:none; box-shadow:var(--focus-ring)}
.btn{background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 14px; cursor:pointer; height:44px; transition:background .25s ease, color .25s ease, border-color .25s ease}
.btn{background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:0 18px; cursor:pointer; height:44px; transition:background .25s ease, color .25s ease, border-color .25s ease; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500}
.btn:hover{background:var(--grad-accent)}
.btn.primary{background:var(--text); color:#000; border-color:var(--text)}
html[data-theme='light'] .btn.primary{color:#fff; background:#2c6bff; border-color:#2c6bff}
.btn.subtle{background:var(--card)}

.content{padding:20px}
.content{padding:28px 32px 48px; background:var(--bg-main); min-height:calc(100vh - 56px); transition:background .35s ease}
.card{background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow-elev); transition:background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease}
.card h1{margin:0 0 12px; font-size:22px; line-height:1.2}
.card .subtitle{color:#bdbdbd; margin-top:-4px; margin-bottom:12px; font-size:14px}

/* Width utility classes */
.w-600 { max-width: 600px; width: 100%; }
.w-700 { max-width: 700px; width: 100%; }
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
/* Dashboard */
.dashboard{display:flex; flex-direction:column; gap:28px}
.kpi-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); align-items:stretch}
.kpi-card{position:relative; background:linear-gradient(135deg,var(--kpi-bg1,#232323),var(--kpi-bg2,#141414)); border:1px solid var(--border); padding:18px 16px 20px; border-radius:16px; overflow:hidden; box-shadow:0 4px 18px -6px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:4px; animation:fadeIn .5s ease}
.kpi-card{transition:background .55s ease, transform .35s ease, box-shadow .35s ease}
.kpi-card::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.15),transparent 60%); mix-blend-mode:overlay; pointer-events:none}
.kpi-label{font-size:13px; letter-spacing:.5px; font-weight:600; text-transform:uppercase; opacity:.85}
.kpi-value{font-size:32px; font-weight:600; line-height:1.1}
.kpi-sub{font-size:12px; color:var(--muted); margin-top:2px; min-height:14px}
.kpi-card[data-color=blue]{--kpi-bg1:#1c2c44; --kpi-bg2:#111b27}
.kpi-card[data-color=purple]{--kpi-bg1:#36264d; --kpi-bg2:#20152f}
.kpi-card[data-color=green]{--kpi-bg1:#1d3e34; --kpi-bg2:#102821}
.kpi-card[data-color=orange]{--kpi-bg1:#4a2e14; --kpi-bg2:#281a0a}
.kpi-card[data-color=teal]{--kpi-bg1:#1d3f4a; --kpi-bg2:#112930}
.kpi-card[data-color=red]{--kpi-bg1:#4a1d25; --kpi-bg2:#2a0f15}
html[data-theme='light'] .kpi-card{box-shadow:0 4px 14px -4px rgba(0,0,0,.18); border-color:rgba(0,0,0,.06)}
html[data-theme='light'] .kpi-card::after{background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.35),transparent 60%)}
/* Light theme palette overrides (so they are not too dark) */
html[data-theme='light'] .kpi-card[data-color=blue]{--kpi-bg1:#e3efff; --kpi-bg2:#f7faff}
html[data-theme='light'] .kpi-card[data-color=purple]{--kpi-bg1:#efe6fb; --kpi-bg2:#faf6ff}
html[data-theme='light'] .kpi-card[data-color=green]{--kpi-bg1:#e0f4ec; --kpi-bg2:#f4fbf8}
html[data-theme='light'] .kpi-card[data-color=orange]{--kpi-bg1:#ffe9d6; --kpi-bg2:#fff6ed}
html[data-theme='light'] .kpi-card[data-color=teal]{--kpi-bg1:#dcf3f6; --kpi-bg2:#f2fbfc}
html[data-theme='light'] .kpi-card[data-color=red]{--kpi-bg1:#fde2e6; --kpi-bg2:#fff4f6}
html[data-theme='light'] .kpi-card .kpi-sub{color:#5b6070}

/* Hover / focus states */
.kpi-card:hover{transform:translateY(-4px); box-shadow:0 10px 28px -8px rgba(0,0,0,.55)}
html[data-theme='light'] .kpi-card:hover{box-shadow:0 12px 24px -6px rgba(0,0,0,.22)}

/* Entrance animations with stagger */
@keyframes kpiEnter{0%{opacity:0; transform:translateY(16px) scale(.96)}60%{opacity:1;}100%{opacity:1; transform:translateY(0) scale(1)}}
.kpi-card{opacity:0; animation:kpiEnter .65s cubic-bezier(.16,.8,.34,1) forwards}
.kpi-card:nth-child(1){animation-delay:.05s}
.kpi-card:nth-child(2){animation-delay:.10s}
.kpi-card:nth-child(3){animation-delay:.15s}
.kpi-card:nth-child(4){animation-delay:.20s}
.kpi-card:nth-child(5){animation-delay:.25s}
.kpi-card:nth-child(6){animation-delay:.30s}

/* Chart & list cards subtle pop */
@keyframes panelEnter{0%{opacity:0; transform:translateY(18px) scale(.97)}100%{opacity:1; transform:translateY(0) scale(1)}}
.chart-card,.list-card{animation:panelEnter .55s ease forwards; opacity:0}
.chart-card:nth-of-type(1), .list-card:nth-of-type(1){animation-delay:.15s}
.chart-card:nth-of-type(2), .list-card:nth-of-type(2){animation-delay:.25s}
.chart-card:hover, .list-card:hover{box-shadow:0 8px 24px -8px rgba(0,0,0,.55); transform:translateY(-3px); transition:box-shadow .35s ease, transform .35s ease}
html[data-theme='light'] .chart-card:hover, html[data-theme='light'] .list-card:hover{box-shadow:0 10px 24px -8px rgba(0,0,0,.15)}

/* Smooth transform for charts content */
.mini-chart canvas{animation:fadeIn .6s ease .2s both}

.dash-flex{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; align-items:stretch}
.card-title{margin:0 0 12px; font-size:16px; font-weight:600}
.mini-chart{height:170px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); position:relative}
.simple-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13px}
.simple-list li{padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:10px; display:flex; flex-direction:column; gap:4px; position:relative}
.simple-list li .line-1{font-weight:600; font-size:13px}
.simple-list li .line-2{font-size:12px; color:var(--muted)}
.sparkline{position:absolute; inset:4px 4px auto auto; width:60px; height:24px; opacity:.7}
canvas.sparkline{filter:drop-shadow(0 0 3px rgba(0,0,0,.4))}
@media (max-width:640px){
  .kpi-value{font-size:26px}
  .mini-chart{height:140px}
}

.form label{display:flex; flex-direction:column; gap:8px}
/* Two column layout for wider forms */
.form.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px 20px; align-items:start}
.form.grid-2 .col-span-2{grid-column:1 / -1}
.field-error{color:#ff6b6b; font-size:12px; line-height:1.2; min-height:14px; margin-top:4px}
button[disabled]{opacity:.5; cursor:not-allowed}
button[data-loading]::after{content:'…'; animation:pulse 1s linear infinite; margin-left:4px}
@keyframes pulse{0%,100%{opacity:0}50%{opacity:1}}
input, .input, select, textarea{background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:10px 12px; transition:background .35s ease, color .35s ease, border-color .35s ease}
input, .input, select, textarea{background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:10px 14px; transition:background .35s ease, color .35s ease, border-color .35s ease; font-size:14px}
.input:focus, input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring)}
.modal textarea{min-height:80px}
.input::placeholder, input::placeholder{color:var(--muted)}
.w-full{width:100%}
.w-400{max-width:400px; width:100%}
.w-500{max-width:500px; width:100%}
.v-gap{display:flex; flex-direction:column; gap:16px}
.mt-2{margin-top:8px}
.error{color:#ff8b8b}

select[data-upgraded]{display:none !important}

/* --- Custom Dropdown --- */
.custom-select{position:relative; display:inline-flex; min-width:0}
.cs-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; font-size:14px; font-weight:500; cursor:pointer; width:100%;
  transition:border-color .2s, box-shadow .2s;
  text-align:left; white-space:nowrap; overflow:hidden;
}
.cs-trigger:hover{border-color:var(--accent)}
.custom-select.open .cs-trigger{border-color:var(--accent); box-shadow:var(--focus-ring)}
.cs-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.cs-arrow{font-size:20px; color:var(--muted); transition:transform .2s; flex-shrink:0}
.custom-select.open .cs-arrow{transform:rotate(180deg)}
.custom-select.disabled .cs-trigger{opacity:.6; cursor:not-allowed; pointer-events:none}

.cs-menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:100%; max-height:220px;
  overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 8px 24px -4px rgba(0,0,0,.25); z-index:1100; padding:4px;
  animation:csOpen .15s ease;
}
.custom-select.open .cs-menu{display:block}
@keyframes csOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.cs-option{
  padding:9px 12px; border-radius:8px; font-size:13px; cursor:pointer;
  transition:background .12s; white-space:nowrap; color:var(--text);
}
.cs-option:hover{background:color-mix(in srgb, var(--accent) 15%, transparent)}
.cs-option.selected{background:color-mix(in srgb, var(--accent) 20%, transparent); font-weight:600}

/* Inside forms: match label flow */
label .custom-select{width:100%}
.form label .custom-select{margin-top:0}

/* Inside toolbars */
.toolbar .custom-select .cs-trigger{height:44px; padding:0 12px}

/* Fallback for non-upgraded selects */
select:not([data-upgraded]):not([multiple]){
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:inherit;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(var(--border), var(--border));
  background-position:
    calc(100% - 22px) 55%,
    calc(100% - 16px) 55%,
    calc(100% - 36px) 50%;
  background-size:6px 6px, 6px 6px, 1px 60%;
  background-repeat:no-repeat;
  padding-right:48px;
  cursor:pointer;
}
select:not([data-upgraded]):not([multiple]):hover{border-color:var(--accent)}
select:not([data-upgraded]):not([multiple]):focus{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%),
    linear-gradient(var(--border), var(--border));
}
select:disabled{opacity:.6; cursor:not-allowed}
.table{border:1px solid var(--border); border-radius:12px; overflow:hidden; overflow-x:auto}
.table .row{display:grid; gap:0; border-bottom:1px solid var(--border)}
.table .row.header{font-size:13px; text-transform:uppercase; letter-spacing:.5px}
/* Default patients table columns */
.table .row.header, .table .row{grid-template-columns: repeat(auto-fit, minmax(120px,1fr));}
.table .row .cell.actions{display:flex; gap:6px; align-items:center}
.loading-row{padding:12px}
.table .row.header{background:var(--card); font-weight:600}
.table .row.header{background:var(--card); font-weight:600}
.table .cell{padding:10px 12px}

.chip{padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); transition:background .35s ease, border-color .35s ease; display:inline-flex; align-items:center; gap:6px; line-height:1}
.chip .role-label{position:relative; display:inline-block; min-width:40px}
.fade-swap-enter{animation:fadeIn .4s ease forwards}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}
.chip .role-icon{font-size:18px; margin-right:4px; vertical-align:middle}
.btn .material-symbols-rounded{font-size:20px; margin-right:6px}
.btn .material-symbols-rounded:only-child{margin-right:0}

/* Theme toggle specific */
.theme-toggle-icon{font-size:16px; line-height:1; display:inline-block; width:1.1em; text-align:center}
/* Theme toggle visibility (show icon for current mode) */
.theme-toggle-icon{font-size:20px; line-height:1; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center}
html[data-theme='light'] .theme-toggle-icon[data-icon='sun']{display:inline-flex}
html[data-theme='light'] .theme-toggle-icon[data-icon='moon']{display:none}
html[data-theme='dark'] .theme-toggle-icon[data-icon='sun']{display:none}
html[data-theme='dark'] .theme-toggle-icon[data-icon='moon']{display:inline-flex}

/* Smooth color transitions for key structural elements */
nav a, .sidebar, .topbar, .card, input, .input, select, body{transition:background .35s ease, color .35s ease, border-color .35s ease}

/* Sidebar header with close button */
.sidebar-header{display:flex;align-items:center;justify-content:space-between}
.sidebar-close{display:none !important}
/* Hide menu toggle on desktop */
@media (min-width: 901px){
  #menuBtn{display:none !important}
  .sidebar-close{display:none !important}
}
@media (max-width: 900px){
  .sidebar-close{display:inline-flex !important}
}

/* Backdrops */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%) blur(2px); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease}
.backdrop.show{opacity:1; visibility:visible}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px 16px; width:100vw; height:100vh; min-width:0; min-height:0; z-index:1000; overflow-y:auto;}
.modal[hidden]{display:none}
.modal .card{width:auto; max-width:none; min-width:0; padding:20px; border-radius:14px; background:var(--card); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-elev); transform:translateY(8px); opacity:.98; transition:transform .18s ease, opacity .18s ease, background .35s ease, color .35s ease, border-color .35s ease; margin:auto}
.modal .card{position:relative; overflow:visible}
.modal .card.w-600{max-width:640px}
.modal input, .modal select, .modal textarea {background:var(--card); color:var(--text);}
.modal select:not([multiple]){
  background-color:var(--card);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(var(--border), var(--border));
  background-position:
    calc(100% - 22px) 55%,
    calc(100% - 16px) 55%,
    calc(100% - 36px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 60%;
  background-repeat:no-repeat;
  padding-right:48px;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {outline:none; border-color:var(--accent); box-shadow:var(--focus-ring);} 
.modal.show .card{transform:translateY(0); opacity:1}

/* Diagnosis document attachment */
.diag-docs-section{border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:color-mix(in srgb, var(--card) 95%, #888 5%)}
.diag-doc-list{display:flex; flex-direction:column; gap:4px; margin-bottom:6px}
.diag-doc-item{display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--card); border:1px solid var(--border); border-radius:8px; font-size:12px}
.diag-doc-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.diag-doc-size{font-size:11px; color:var(--muted); white-space:nowrap}
.diag-doc-item .icon-btn.small{height:24px; width:24px; padding:0; border:none; background:transparent}
.diag-doc-item .icon-btn.small .material-symbols-rounded{font-size:16px}
.diag-add-doc-label{display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:6px 12px; border:1px dashed var(--border); border-radius:8px; font-size:12px; font-weight:500; color:var(--muted); transition:border-color .2s, color .2s}
.diag-add-doc-label:hover{border-color:var(--accent); color:var(--accent)}
.diag-add-doc-label .material-symbols-rounded{font-size:18px}

/* Patient modals (Edit/Add): wider, landscape-friendly, scrollable on low-height screens */
.modal.edit-patient-modal, .modal.add-patient-modal{padding:16px}
.modal.edit-patient-modal .card.edit-card,
.modal.add-patient-modal .card.add-card{
  width:min(1100px, 96vw);
  max-width:1100px;
  /* viewport constrained height with internal scroll */
  max-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  overflow:visible; /* allow floating close button to extend outside */
}
.modal.edit-patient-modal .card.edit-card .modal-title,
.modal.add-patient-modal .card.add-card .modal-title{
  position:sticky; top:0; z-index:1; margin-top:0; padding-top:4px; padding-bottom:10px;
  background:linear-gradient(180deg, var(--card) 70%, color-mix(in oklab, var(--card), transparent 20%) 100%);
}
.modal.edit-patient-modal #patientForm,
.modal.add-patient-modal #patientForm{
  overflow:auto;
  padding-right:4px; /* small breathing room for scrollbars */
}
.modal.edit-patient-modal #patientForm .form-actions,
.modal.add-patient-modal #patientForm .form-actions{
  position:sticky; bottom:0; z-index:1;
  padding-top:10px; margin-top:6px;
  background:linear-gradient(0deg, var(--card) 70%, color-mix(in oklab, var(--card), transparent 20%) 100%);
  border-top:1px solid var(--border);
}
/* enforce wider two-column layout on ample width */
@media (min-width: 900px){
  .modal.edit-patient-modal #patientForm.form.grid-2,
  .modal.add-patient-modal #patientForm.form.grid-2{grid-template-columns:repeat(2, minmax(260px, 1fr));}
}
/* compact height handling: tighten gaps */
@media (max-height: 700px){
  .modal.edit-patient-modal .card.edit-card,
  .modal.add-patient-modal .card.add-card{max-height:calc(100vh - 24px);} 
  .modal.edit-patient-modal #patientForm,
  .modal.add-patient-modal #patientForm{gap:12px 16px}
  .modal.edit-patient-modal .modal-title,
  .modal.add-patient-modal .modal-title{font-size:18px;}
}
.modal-close-btn {
  --btn-size: 44px;
  --inside-ratio: 0.25; /* 25% inside */
  position: absolute;
  top: calc(-1 * var(--btn-size) * (1 - var(--inside-ratio)) + 10px);
  right: calc(-1 * var(--btn-size) * (1 - var(--inside-ratio)) + 10px);
  z-index: 5;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .18s ease;
  transform: scale(0.9);
  animation: btnPop .18s ease-out .05s both;
}
.modal-close-btn:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  transform: scale(1.02);
}
.modal-close-btn:active{ transform: scale(0.96); }

@keyframes btnPop {
  0% { transform: scale(0.7); opacity: .0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(0.9); }
}
@media (max-width:600px){
  .modal .card{margin:0 auto}
  .modal-close-btn{
    --btn-size:44px;
    --inside-ratio:0.55;
  }
}

/* Polished sign-in modal (no close button) */
.login-modal .card{width:360px; max-width:min(550px, 92vw); padding:28px 24px 22px; border-radius:16px; box-shadow:0 24px 60px -22px rgba(0,0,0,.45), 0 8px 24px -18px rgba(0,0,0,.35)}
.login-modal h1{margin:0 0 12px; font-size:24px; font-weight:700; letter-spacing:.2px}
.login-modal .form label{font-weight:600}
.login-modal input{height:44px}
.login-modal .btn.primary{height:44px; letter-spacing:.2px; justify-content:center; text-align:center}
.login-modal #loginError{margin-top:10px}
.login-modal .modal-close-btn{display:none !important}

/* Password visibility states with creative animation */
.login-modal .password-icon[data-state="hidden"]{transform:rotate(0deg) scale(1)}
.login-modal .password-icon[data-state="visible"]{transform:rotate(180deg) scale(1.1); color:var(--accent)}
.login-modal .password-wrapper input[type="text"] + .password-toggle .password-icon{animation:revealPulse .4s cubic-bezier(0.34, 1.56, 0.64, 1)}

/* Document browser & uploader */
.documents-section{margin-top:32px}
.documents-section h3.section-title{display:flex; align-items:center; gap:8px}
.documents-list{border:1px solid var(--border); border-radius:12px; background:linear-gradient(145deg,var(--card), color-mix(in srgb, var(--card) 90%, #222 10%)); padding:4px; display:flex; flex-direction:column; gap:4px; max-height:300px; overflow:auto; position:relative}
.documents-list.loading::after{content:'Loading…'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted)}
.documents-list.browser{max-height:60vh;}
.doc-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:10px; font-size:13px; line-height:1.3; position:relative; overflow:hidden; cursor:default; transition:background .25s ease, border-color .25s ease, transform .25s ease}
.doc-row::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.08),transparent 60%); opacity:0; transition:opacity .4s ease; pointer-events:none}
.doc-row:hover{background:linear-gradient(135deg,var(--card), color-mix(in srgb, var(--card) 85%, #333 15%)); border-color:var(--accent); transform:translateY(-2px)}
.doc-row:hover::before{opacity:1}
.doc-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; min-width:0}
.doc-name{font-weight:600; display:inline-flex; align-items:center; gap:6px; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.doc-cat{font-size:11px; padding:4px 8px; background:var(--card); border:1px solid var(--border); border-radius:999px; letter-spacing:.5px; text-transform:uppercase; opacity:.75}
.doc-size{font-size:11.5px; color:var(--muted)}
.doc-date{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.doc-actions{display:flex; gap:8px; align-items:center}
.doc-actions .icon-btn{height:36px; width:36px; padding:0; justify-content:center; font-size:18px}
.doc-actions .icon-btn.danger:hover{background:linear-gradient(135deg,#552020,#401515); color:#ffb3b3}
.doc-icon{font-size:18px; color:var(--accent)}
.empty-state{padding:14px; font-size:13px; text-align:center; color:var(--muted)}

/* Drag-drop highlight */
.doc-upload-form.drag-over .file-pick-label{border-color:var(--accent); color:var(--accent); animation:dragPulse 1s infinite linear}
@keyframes dragPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}

/* Preview modal */
.preview-frame{width:100%; height:70vh; border:1px solid var(--border); border-radius:12px; background:var(--card); box-shadow:var(--shadow-elev); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative}
.preview-frame iframe, .preview-frame img{width:100%; height:100%; object-fit:contain; background:#000}
.preview-toolbar{display:flex; gap:8px; margin-bottom:12px; justify-content:space-between; align-items:center}
.preview-toolbar .left{display:flex; gap:8px; align-items:center}
.preview-toolbar .right{display:flex; gap:8px; align-items:center}
html[data-theme='light'] .preview-frame img{background:#fff}

/* Preview Card Base Style */
.preview-card {
  width: min(95vw, 1100px);
  display: flex;
  flex-direction: column;
  height: 85vh;
  max-height: 95vh;
}

/* Large screens: wider and taller preview */
@media (min-width: 1000px) {
  .preview-card {
    width: 96vw;
    max-width: 1600px;
    height: 92vh;
  }
  .preview-card .preview-frame {
    flex: 1;
    height: auto; /* let flex grow fill height */
  }
}

@media (max-width: 720px) {
  .preview-modal .card.preview-card {
    width: 96vw;
    max-width: none;
    padding: 12px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .preview-frame {
    height: auto;
    flex: 1;
    min-height: 300px;
  }
  .preview-toolbar h2 {
    font-size: 15px !important;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .preview-toolbar .btn {
    padding: 0 10px;
    font-size: 13px;
  }

  /* File browser mobile adjustments */
  .file-browser-modal .card.docs-browser-card{padding:14px 12px 20px}
  .docs-browser-head{flex-wrap:wrap; gap:8px}
  .docs-browser-toolbar .search-tools{flex-direction:column}
  .docs-browser-toolbar .search-tools .input{flex:1 1 auto}
  .doc-upload-form .doc-fields{flex-direction:column; align-items:stretch}
  .doc-upload-form .file-pick-label{flex:1 1 auto}
  .doc-upload-form .input{flex:1 1 auto}

  /* Compact doc item mobile */
  .doc-mini{grid-template-columns:auto 1fr auto auto; gap:6px}
  .doc-mini .mini-date{display:none}
}

/* Grid view option (future toggle) */
.documents-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.doc-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; font-size:12px; position:relative; overflow:hidden; cursor:pointer; transition:background .25s ease, transform .25s ease, border-color .25s ease}
.doc-card:hover{background:linear-gradient(135deg,var(--card), color-mix(in srgb, var(--card) 80%, #333 20%)); border-color:var(--accent); transform:translateY(-3px)}
.doc-thumb{flex:1 1 auto; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#1e1e1e,#161616); border:1px solid var(--border); border-radius:10px; min-height:90px; position:relative; overflow:hidden}
html[data-theme='light'] .doc-thumb{background:linear-gradient(145deg,#f6f8fa,#e9edf2)}
.doc-thumb img{max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.doc-thumb .pdf-label{font-size:34px; font-weight:600; letter-spacing:-1px; opacity:.4}
.doc-card .doc-name{max-width:100%; font-size:12px}
.doc-card .doc-meta-small{font-size:11px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}

/* Patient documents summary (inside patient detail card) */
.doc-summary-body{display:flex; flex-direction:column; gap:10px}
.doc-summary-list{display:flex; flex-direction:column; gap:4px; max-height:240px; overflow:auto; border:1px solid var(--border); border-radius:10px; padding:4px; background:color-mix(in srgb, var(--card) 95%, #888 5%); position:relative}
.doc-summary-list.loading::after{content:'Loading…'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted)}
.doc-mini{display:grid; grid-template-columns:auto minmax(0,1fr) 80px auto auto; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:12px; transition:border-color .2s, background .2s}
.doc-mini .mini-icon{font-size:18px; opacity:.65}
.doc-mini .mini-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; display:flex; align-items:center; gap:6px}
.doc-mini .mini-date{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right}
.doc-mini:hover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--card))}
.icon-btn.tiny, .icon-btn.xxs{height:32px; min-height:32px; padding:0 8px; border-radius:8px}
.icon-btn.xxs{height:28px; min-height:28px; padding:0 6px}
.doc-mini .icon-btn{justify-content:center}
.empty-state.small{padding:20px 10px; font-size:12px}

/* Shared doc upload form (used in appointment view + patient view + file browser) */
.doc-upload-form{border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:color-mix(in srgb, var(--card) 95%, #888 5%)}
.doc-upload-form .doc-fields{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
/* Custom file picker label */
.file-pick-label{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 14px; border:1.5px dashed var(--border); border-radius:10px;
  background:var(--card); color:var(--muted); font-size:13px; font-weight:500;
  transition:border-color .2s, color .2s, background .2s;
  flex:1 1 180px; min-width:0;
}
.file-pick-label:hover{border-color:var(--accent); color:var(--accent)}
.file-pick-label.has-file{border-style:solid; border-color:var(--accent); color:var(--text)}
.file-pick-label .material-symbols-rounded{font-size:20px; flex-shrink:0}
.file-pick-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.doc-upload-form .input{flex:0 1 140px; height:38px; padding:0 10px; font-size:13px}
.doc-upload-form .btn.small{flex-shrink:0}
.doc-upload-form .progress{font-size:11px; margin-top:6px}
.doc-upload-form .error{font-size:12px; margin-top:6px}

/* File browser (full-page drawer) */
.file-browser-modal .card.docs-browser-card{width:100%; max-width:1100px; margin:0 auto; max-height:none; overflow:visible; display:flex; flex-direction:column; gap:16px; padding:60px 22px 30px; border-radius:0; box-shadow:none !important; border:none !important; background:transparent !important; box-sizing:border-box}
.file-browser-modal .card.docs-browser-card .documents-list.browser{flex:1 1 auto; overflow-y:auto; overflow-x:hidden}
.docs-browser-head{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:12px; gap:12px}
.docs-browser-head .db-actions{display:flex; gap:6px}
.docs-browser-toolbar{display:flex; flex-direction:column; gap:10px}
.docs-browser-toolbar .search-tools{display:flex; gap:8px; flex-wrap:wrap}
.docs-browser-toolbar .search-tools .input{height:40px; padding:0 12px; flex:1 1 200px}
.file-browser-modal .doc-row.compact{grid-template-columns:1fr auto}
.file-browser-modal .documents-grid .doc-card{min-width:0}
.file-browser-modal .documents-grid{overflow-x:hidden}
.file-browser-modal .pagination-bar.mini{margin-top:6px}
.file-browser-modal .doc-row.compact,.file-browser-modal .doc-card{margin:0}
.file-browser-modal .doc-card{padding:8px 8px 10px}
.file-browser-modal .doc-thumb{min-height:80px}
.pagination-bar.mini{background:var(--bg-main); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:12px}
.pagination-bar.mini .page-actions .icon-btn.small{height:32px; min-width:32px}
.doc-row.compact{padding:6px 8px; font-size:12px}
.doc-row.compact .doc-actions .icon-btn{height:30px; width:30px}


/* Enhanced immersive input fields */
.login-modal .input-field{display:flex; flex-direction:column; gap:8px; position:relative}
.login-modal .input-wrapper{position:relative; display:flex; align-items:center; background:var(--card); border:2px solid var(--border); border-radius:14px; transition:all .35s cubic-bezier(0.4, 0, 0.2, 1); overflow:hidden;}
.login-modal .input-wrapper::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); opacity:0; transition:opacity .35s ease; pointer-events:none}
.login-modal .input-wrapper:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,255,255,.08), 0 8px 24px -8px rgba(0,0,0,.3); transform:translateY(-1px)}
.login-modal .input-wrapper:focus-within::before{opacity:1}
.login-modal .input-icon{position:absolute; left:14px; z-index:2; font-size:20px; color:var(--muted); transition:color .25s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1)}
.login-modal .input-wrapper:focus-within .input-icon{color:var(--accent); transform:scale(1.05)}
.login-modal .input-wrapper input{background:transparent; border:none; padding:0 16px; height:50px; color:var(--text); font-size:15px; width:100%; transition:all .25s ease}
.login-modal .input-wrapper input:focus{outline:none; color:var(--text)}
.login-modal .input-wrapper input::placeholder{color:var(--muted); transition:color .25s ease}
.login-modal .input-wrapper:focus-within input::placeholder{color:transparent}

/* Creative password toggle */
.login-modal .password-wrapper{position:relative}
.login-modal .password-toggle{position:absolute; right:12px; z-index:3; background:none; border:none; padding:8px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}
.login-modal .password-toggle:hover{background:rgba(255,255,255,.08); transform:scale(1.05)}
.login-modal .password-toggle:active{transform:scale(0.95)}
.login-modal .password-icon{font-size:20px; color:var(--muted); transition:all .35s cubic-bezier(0.34, 1.56, 0.64, 1)}
.login-modal .password-toggle:hover .password-icon{color:var(--accent)}

/* Password visibility states with creative animation */
.login-modal .password-icon[data-state="hidden"]{transform:rotate(0deg) scale(1)}
.login-modal .password-icon[data-state="visible"]{transform:rotate(180deg) scale(1.1); color:var(--accent)}
.login-modal .password-wrapper input[type="text"] + .password-toggle .password-icon{animation:revealPulse .4s cubic-bezier(0.34, 1.56, 0.64, 1)}

@keyframes revealPulse {
  0% { transform:rotate(0deg) scale(1); }
  50% { transform:rotate(90deg) scale(1.2); }
  100% { transform:rotate(180deg) scale(1.1); }
}

/* Responsive sidebar (off-canvas) */
@media (max-width: 900px){
  .app{grid-template-columns: 1fr}
  .sidebar{position:fixed; z-index:20; left:0; top:0; bottom:0; width:240px; transform:translateX(-100%); padding:12px; overflow-y:auto}
  .sidebar-header{margin-bottom:8px}
  .sidebar .brand{font-size:18px;margin-bottom:0}
  .sidebar-close{width:34px;height:34px;align-items:center;justify-content:center;padding:0;border-radius:8px}
  .sidebar nav{gap:2px}
  .sidebar nav a{padding:8px 10px;min-height:38px;font-size:13.5px;border-radius:8px;gap:8px}
  .sidebar nav a .icon{font-size:19px;width:19px;height:19px}
  body.menu-open .sidebar{transform:translateX(0)}
  body.menu-open #menuBackdrop{z-index:15;opacity:1;visibility:visible}
  .topbar{position:sticky}
}

/* --- Responsive & layout normalization overrides (appended) --- */
:root{ --control-h:44px; --control-radius:12px; }
.topbar{padding:0 16px !important; height:56px !important; gap:12px;}
.topbar .right{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:flex-end; flex-shrink:0}
.icon-btn, .btn{min-height:var(--control-h); border-radius:var(--control-radius);} 
input, .input, select, textarea{border-radius:var(--control-radius);} 
.dashboard{width:100%;}
.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(200px,22vw,260px),1fr)) !important}
.dash-flex{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr)) !important}

/* Drag & Drop styles */
.kpi-grid .kpi-card, .dash-flex .card{cursor:grab; user-select:none}
.kpi-grid .kpi-card:active, .dash-flex .card:active{cursor:grabbing}
.drag-placeholder{border:2px dashed var(--border); background:transparent !important; box-shadow:none !important; opacity:.6}
.drag-ghost{opacity:.85; transform:scale(1.02); box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
@media (max-width:900px){
  .topbar{padding:8px 12px !important; height:auto !important; min-height:48px; gap:8px; flex-wrap:nowrap !important; overflow:visible}
  .topbar .left{gap:8px; flex:1 1 0; min-width:0}
  .topbar .right{flex:0 0 auto; gap:8px}
  .topbar #menuBtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;font-size:20px;border-radius:8px;flex-shrink:0}
  .topbar .breadcrumbs{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #dateTime{display:none !important}
}
@media (max-width:600px){
  .topbar{padding:8px 10px !important}
  .topbar .breadcrumbs{font-size:13px;max-width:120px}
  #userRole.chip{padding:0 8px;font-size:12px;height:34px}
  #userRole .role-icon{font-size:16px}
  .topbar #logoutBtn.btn{padding:0 8px;height:34px;min-height:34px}
  .btn .btn-label, #logoutBtn .btn-label{display:none}
  .topbar .icon-btn#themeToggle{width:34px;height:34px;min-height:34px}
  .topbar .icon-btn#themeToggle .material-symbols-rounded{font-size:18px}
  .right{gap:4px}
  .kpi-grid{grid-template-columns:1fr 1fr !important}
  .kpi-card{padding:14px 12px}
  .kpi-value{font-size:26px}
  .dash-flex{grid-template-columns:1fr !important}
}

/* --- Topbar refinement (padding & alignment uniformity) --- */
.topbar .icon-btn#themeToggle{width:var(--control-h); padding:0; justify-content:center; border-radius:50%;}
.topbar .icon-btn#themeToggle .material-symbols-rounded{font-size:20px;}
.topbar #logoutBtn.btn{padding:0 14px; gap:6px;}
.topbar #logoutBtn.btn .material-symbols-rounded{font-size:18px; margin-right:4px;}
#userRole.chip{display:inline-flex; align-items:center; gap:6px; padding:0 14px; height:var(--control-h); border-radius:var(--control-radius); font-size:13px;}
#userRole .role-icon{font-size:18px; margin-right:2px;}
.topbar .chip{background:var(--card); box-shadow:none;}
.topbar .icon-btn, .topbar .btn{line-height:1;}
.topbar .btn.primary{font-weight:600;}
.topbar .icon-btn:active, .topbar .btn:active{transform:translateY(1px);} 
@media (max-width:700px){
  #userRole.chip{padding:0 12px;}
  .topbar #logoutBtn.btn{padding:0 12px;}
}

/* Patient section polish */
.toolbar.patients-toolbar{margin-bottom:20px; row-gap:10px; display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; background:var(--card); padding:14px 16px; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-elev);} 
.toolbar.patients-toolbar .input, .toolbar.patients-toolbar select{height:40px; padding:0 14px; line-height:40px; font-size:13px; background:var(--bg-main); border-radius:10px; border:1px solid var(--border); min-width:140px}
.toolbar.patients-toolbar select:not([multiple]){
  background-color:var(--bg-main);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(var(--border), var(--border));
  background-position:
    calc(100% - 22px) 55%,
    calc(100% - 16px) 55%,
    calc(100% - 36px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 60%;
  background-repeat:no-repeat;
  padding-right:44px;
}
.toolbar.patients-toolbar input#patientSearch,
.toolbar.patients-toolbar input#apptSearch,
.toolbar.patients-toolbar input#doctorSearch{flex:1 1 320px; min-width:240px; background:var(--bg-main);}
.toolbar.patients-toolbar button#addPatientBtn{margin-left:auto; height:40px; border-radius:10px; font-size:13px; font-weight:600; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; border:none; box-shadow:0 4px 14px -4px rgba(0,0,0,.4);}
html[data-theme='light'] .toolbar.patients-toolbar button#addPatientBtn{background:linear-gradient(135deg,#2d6df8,#2157d8);} 
.toolbar.patients-toolbar button#addPatientBtn:hover{filter:brightness(1.05);} 
.toolbar.patients-toolbar button#resetPatientFilters{height:40px; padding:0 10px; border-radius:10px}
.toolbar .filters-group{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 auto}
.toolbar .filters-compact-toggle{display:none}
.toolbar.hospitals-toolbar,.toolbar.billing-toolbar{margin-bottom:20px; row-gap:10px; display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; background:var(--card); padding:14px 16px; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-elev)}
@media (max-width:820px){
  .toolbar.patients-toolbar,.toolbar.hospitals-toolbar,.toolbar.billing-toolbar{padding:12px 12px; gap:10px}
  .toolbar .filters-group[data-collapsed='true'] .adv-filter{display:none}
  .toolbar .filters-compact-toggle{display:inline-flex; height:40px; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--bg-main); border-radius:10px; padding:0 12px; cursor:pointer; font-size:13px; gap:6px; color:var(--text)}
  .toolbar .filters-compact-toggle .material-symbols-rounded{font-size:18px}
}
.table .row .cell.actions .icon-btn{padding:6px 8px; height:36px; border-radius:8px}
.status-badge{display:inline-flex; align-items:center; padding:2px 8px; font-size:11px; font-weight:600; border-radius:20px; letter-spacing:.5px; text-transform:uppercase; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12)}
html[data-theme='light'] .status-badge{background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12)}
.status-badge.active{color:#3ddc97; border-color:#3ddc97; background:rgba(61,220,151,.12)}
.status-badge.inactive{color:#ff8a65; border-color:#ff8a65; background:rgba(255,138,101,.12)}
.status-badge.scheduled{color:#2196f3; border-color:#2196f3; background:rgba(33,150,243,.12)}
.status-badge.checked_in{color:#ff9800; border-color:#ff9800; background:rgba(255,152,0,.12)}
.status-badge.in_consultation{color:#9c27b0; border-color:#9c27b0; background:rgba(156,39,176,.12)}
.status-badge.awaiting_payment{color:#ff5722; border-color:#ff5722; background:rgba(255,87,34,.12)}
.status-badge.completed{color:#4caf50; border-color:#4caf50; background:rgba(76,175,80,.12)}
.status-badge.cancelled{color:#9e9e9e; border-color:#9e9e9e; background:rgba(158,158,158,.12)}
.status-badge.no_show{color:#607d8b; border-color:#607d8b; background:rgba(96,125,139,.12)}
/* Queue number badge */
.queue-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 4px;border-radius:6px;font-size:13px;font-weight:700;background:var(--accent);color:var(--bg);letter-spacing:.5px}
html[data-theme='light'] .queue-badge{background:#1a1a1a;color:#fff}
.queue-badge.empty{background:transparent;color:var(--muted);font-weight:400;font-size:12px}
.table .row .cell{padding:10px 14px}
.table .row.header .cell{padding:8px 14px}
.table .row{transition:background .18s ease}
.table .row:not(.header):hover{background:rgba(255,255,255,.04)}
html[data-theme='light'] .table .row:not(.header):hover{background:rgba(0,0,0,.05)}
.empty-state{padding:48px 20px; text-align:center; color:var(--muted); font-size:14px}
.empty-state .icon{font-size:40px; display:block; margin-bottom:10px; opacity:.55}

/* Floating Action Button */
.fab{position:fixed; right:28px; bottom:28px; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 10px 28px -6px rgba(0,0,0,.55),0 4px 10px -2px rgba(0,0,0,.4); z-index:40; font-size:28px; transition:box-shadow .3s ease, transform .3s ease, filter .3s ease, background .35s ease}
.fab .material-symbols-rounded{font-size:30px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.fab:hover{transform:translateY(-4px); box-shadow:0 16px 34px -10px rgba(0,0,0,.65),0 6px 14px -4px rgba(0,0,0,.5)}
.fab:active{transform:translateY(-1px)}
html[data-theme='light'] .fab{background:linear-gradient(135deg,#2f73ff,#1c54d6); box-shadow:0 10px 26px -8px rgba(0,0,0,.25),0 4px 10px -2px rgba(0,0,0,.15)}
@media (max-width:640px){ .fab{right:18px; bottom:18px; width:54px; height:54px} }
@media (max-width:420px){ .fab{right:14px; bottom:14px; width:50px; height:50px} }

/* Pagination bar (patients table) */
.pagination-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; background:var(--card); border-top:1px solid var(--border); font-size:13px; animation:fadeIn .35s ease}
.pagination-bar .page-info{font-weight:500; letter-spacing:.3px; color:var(--muted); display:flex; align-items:center; gap:6px}
.pagination-bar .page-actions{display:flex; align-items:center; gap:6px}
.pagination-bar .icon-btn.small{height:36px; padding:0 10px; border-radius:10px; background:var(--bg-main); font-size:13px; min-width:36px; justify-content:center}
.pagination-bar .icon-btn.small .material-symbols-rounded{font-size:18px}
.pagination-bar .icon-btn.small[disabled]{opacity:.4}
.pagination-bar .icon-btn.small:not([disabled]):hover{background:var(--grad-accent)}
.pagination-bar .icon-btn.small:focus{outline:none; box-shadow:var(--focus-ring)}
.pagination-bar .jump-input{display:inline-flex; align-items:center; gap:6px; margin-left:10px}
.pagination-bar input[type=number]{width:70px; height:36px; font-size:13px; padding:0 10px; border-radius:10px}
@media (max-width:560px){
  .pagination-bar{flex-direction:column; align-items:stretch; padding:14px 14px}
  .pagination-bar .page-actions{justify-content:space-between}
  .pagination-bar .page-info{justify-content:space-between}
}
.table .row.header .cell.sortable{cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px}
.table .row.header .cell.sortable .sort-indicator{font-size:12px; line-height:1; opacity:.7; display:inline-flex; width:14px}
.table .row.header .cell.sortable:hover{background:rgba(255,255,255,.05)}
html[data-theme='light'] .table .row.header .cell.sortable:hover{background:rgba(0,0,0,.04)}
.table .row.header .cell.sortable[data-active='true']{color:var(--text); position:relative}
.table .row.header .cell.sortable[data-active='true']::after{content:''; position:absolute; left:8px; right:8px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,#2563eb,#1d4ed8)}
html[data-theme='light'] .table .row.header .cell.sortable[data-active='true']::after{background:linear-gradient(90deg,#2f73ff,#1c54d6)}

/* Appointments table polish */
.appts-table .row.header, .appts-table .row{grid-template-columns: 48px 0.8fr 0.8fr 250px 160px 300px}
.appts-table .row .cell.actions{flex-wrap:nowrap; white-space:nowrap}
.appts-table .person-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--bg-main); font-weight:600; font-size:13px}
.appts-table .person-chip.doctor{font-weight:500}
.appts-table .person-chip .material-symbols-rounded{font-size:18px}
.appts-table .dt-cell{display:inline-flex; align-items:center; gap:8px}
.appts-table .dt-cell .material-symbols-rounded{font-size:18px}
.table .row .cell.clickable{cursor:pointer}
.table .row .cell.clickable:hover{background:rgba(255,255,255,.03)}
html[data-theme='light'] .table .row .cell.clickable:hover{background:rgba(0,0,0,.03)}

/* Patient Detail View */
.patient-detail-modal {
  padding: 24px 12px;
  align-items: flex-start;
}

.patient-detail-modal .modal-content {
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding-right: 6px;
}

.patient-detail-modal .modal-content > * {
  flex: 0 0 auto;
}

.patient-detail-card {
  width: min(96vw, 1200px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 28px;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 24px 60px -40px rgba(0,0,0,0.75);
}

.patient-detail-card > * {
  flex-shrink: 0;
}

.patient-detail-card .patient-detail-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.patient-detail-modern {
  position: relative;
}

.patient-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.patient-hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.patient-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px -24px rgba(80, 72, 240, 0.8);
}

html[data-theme='light'] .patient-avatar {
  background: linear-gradient(135deg, #4f46e5, #2563eb);
}

.patient-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.patient-subline {
  font-size: 13px;
  color: var(--muted);
}

.patient-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.patient-hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.patient-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meta-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

html[data-theme='light'] .meta-chip {
  background: rgba(0, 0, 0, 0.04);
}

.meta-chip .meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.meta-chip .meta-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.meta-chip.status-chip {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  min-width: auto;
}

.meta-chip.status-chip .status-badge {
  margin: 0;
}

.patient-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.detail-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 32px -22px rgba(0,0,0,0.55);
}

.detail-card.span-2 {
  grid-column: span 2;
}

.detail-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.detail-card-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-list.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-item .value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.detail-item .value:empty::before {
  content: '—';
  color: var(--muted);
}

.recent-appt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-appt-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recent-appt-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -20px rgba(0,0,0,0.6);
}

.recent-appt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recent-appt-date {
  font-weight: 600;
  font-size: 14px;
}

.recent-appt-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.recent-appt-meta .material-symbols-rounded {
  font-size: 18px;
}

.patient-doc-card .doc-summary-list {
  margin-bottom: 12px;
  max-height: 180px;
  overflow-y: auto;
}

.patient-doc-card .doc-quick-upload {
  margin-top: 8px;
}

.patient-doc-card .docs-summary-foot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 900px) {
  .patient-detail-card {
    padding: 22px;
  }
  .patient-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .patient-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .patient-detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-card.span-2 {
    grid-column: span 1;
  }
}

@media (max-width: 520px) {
  .patient-detail-card {
    padding: 18px 16px;
  }
  .patient-avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  .meta-chip {
    min-width: auto;
  }
  .detail-list.two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 780px) {
  .patient-detail-modal {
    padding: 18px 10px;
  }
  .patient-detail-card {
    padding: 24px;
    max-height: calc(100vh - 40px);
  }
}

@media (max-height: 620px) {
  .patient-detail-modal {
    padding: 14px 8px;
    align-items: flex-start;
  }
  .patient-detail-card {
    padding: 20px 18px;
    max-height: calc(100vh - 28px);
  }
  .patient-detail-card .patient-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .patient-hero-meta {
    gap: 10px;
  }
}

/* Appointment view layout (full-page drawer) */
.full-page-view .card.appt-view-card{width:100%; max-width:1200px; max-height:none; overflow:visible; padding:60px 20px 40px; margin:0 auto; border-radius:0; box-shadow:none !important; border:none !important; background:transparent !important}
.appt-view-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border)}
.appt-view-header .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.appt-view-header .chip{height:32px; padding:0 10px; border-radius:999px; background:var(--bg-main); border:1px solid var(--border); font-size:12px}
.appt-view-header .chip .material-symbols-rounded{font-size:16px}
.appt-view-header .appt-edit-btn{height:36px; padding:0 10px}
.appt-action-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; padding:12px 0; border-bottom:1px solid var(--border)}
.appt-action-bar .action-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; border:1.5px solid transparent; transition:all .15s ease}
.appt-action-bar .action-btn:not(.outline){background:var(--accent) !important; color:var(--card) !important; border-color:var(--accent) !important}
.appt-action-bar .action-btn:not(.outline):hover{filter:brightness(1.1)}
.appt-action-bar .action-btn.outline{background:transparent !important; color:var(--fg); border-color:var(--border)}
.appt-action-bar .action-btn.outline:hover{border-color:var(--accent); color:var(--accent)}
.appt-action-bar .action-btn.outline.danger{color:var(--danger, #ef4444)}
.appt-action-bar .action-btn.outline.danger:hover{border-color:var(--danger, #ef4444); background:rgba(239,68,68,.08)}
.appt-action-bar .action-btn .material-symbols-rounded{font-size:18px}
.appt-action-bar .action-btn:disabled{opacity:.5; pointer-events:none}
.appt-action-bar .action-btn[data-loading="1"]{opacity:.6; pointer-events:none}
.kv-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin-bottom:14px}
.kv-grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}
.kv-item{background:var(--bg-main); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.kv-item.full{grid-column:1 / -1}
.kv-label{font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.kv-value{font-size:14px}
.appt-sections{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.section{background:var(--bg-main); border:1px solid var(--border); border-radius:12px; padding:12px}
.section-title{font-size:14px; font-weight:600; margin:0 0 8px 0}
.section-body{min-height:46px}
.skeleton-lines{display:flex; flex-direction:column; gap:8px}
.skeleton-lines .line{height:10px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size:200% 100%; animation:shimmer 1.2s linear infinite}
.skeleton-lines .line.short{width:60%}
@keyframes shimmer{0%{background-position-x:0%}100%{background-position-x:200%}}
@media (max-width:760px){
  .kv-grid{grid-template-columns:1fr}
  .appt-sections{grid-template-columns:1fr}
}

/* --- Appointments Calendar (Google Calendar inspired) --- */
.appt-view-tabs{margin-top:12px; display:flex; flex-direction:column; gap:14px}
.appt-tabs-bar{display:flex; align-items:center; gap:8px; background:var(--card); padding:8px 12px; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-elev)}
.appt-tab{background:var(--bg-main); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; letter-spacing:.3px; display:inline-flex; align-items:center; gap:6px; transition:background .25s ease,border-color .25s ease}
.appt-tab.active{background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; border-color:#1d4ed8}
html[data-theme='light'] .appt-tab.active{background:linear-gradient(135deg,#2f73ff,#1c54d6)}
.appt-tab:hover:not(.active){border-color:var(--accent)}
.appt-tab-spacer{flex:1 1 auto}
.appt-panel.hidden{display:none}
.cal-mode-switch{display:inline-flex; background:var(--bg-main); border:1px solid var(--border); border-radius:8px; overflow:hidden}
.cal-mode-switch[hidden]{display:none}
.cal-nav[hidden]{display:none}
.cal-mode-switch .mode-btn{background:none; border:none; padding:8px 12px; cursor:pointer; font-size:12px; font-weight:500; letter-spacing:.4px; color:var(--text); position:relative}
.cal-mode-switch .mode-btn.active{background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff}
html[data-theme='light'] .cal-mode-switch .mode-btn.active{background:linear-gradient(135deg,#2f73ff,#1c54d6)}
.cal-nav{display:flex; align-items:center; gap:6px}
.cal-nav .icon-btn.tiny{height:34px; min-height:34px; padding:0 10px; border-radius:8px}
.cal-nav select#calDoctorFilter{height:34px; padding:0 10px; font-size:12px; border-radius:8px}
.cal-range-label{font-size:13px; font-weight:600; letter-spacing:.4px; padding:0 6px}
@media (max-width:780px){.cal-mode-switch{display:none}}
.appt-calendar{position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:0; min-height:520px; box-shadow:var(--shadow-elev); display:flex; flex-direction:column; overflow:hidden}
.appt-calendar.loading::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px);}
.appt-calendar .cal-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; z-index:2}
.cal-time-grid{display:flex; flex-direction:column; width:100%; height:100%; font-size:12px; position:relative}
.cal-time-header{display:grid; grid-template-columns:70px repeat(7,1fr); border-bottom:1px solid var(--border); background:var(--bg-main)}
.cal-time-header .day-col-head{padding:8px 4px 6px; text-align:center; font-weight:600; font-size:12px; letter-spacing:.3px; position:relative}
.cal-time-header .day-col-head.today{color:#2563eb}
html[data-theme='light'] .cal-time-header .day-col-head.today{color:#1c54d6}
.cal-time-header .day-col-head .dow{opacity:.65; font-weight:500}
.cal-time-header .day-col-head .dom{font-size:16px; font-weight:600; margin-top:2px}
.cal-time-body{flex:1 1 auto; overflow:auto; position:relative}
.hour-row{display:grid; grid-template-columns:70px repeat(7,1fr); min-height:60px; position:relative}
.hour-row .hour-label{font-size:11px; padding:4px 6px; text-align:right; color:var(--muted); border-right:1px solid var(--border)}
.hour-row .slot{position:relative; border-left:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--card); padding:0;}
html[data-theme='light'] .hour-row .slot{background:var(--card);}
.hour-row:last-child .slot{border-bottom:none}
.hour-row .slot:hover{background:color-mix(in srgb, var(--card) 90%, #ffffff 10%)}
html[data-theme='light'] .hour-row .slot:hover{background:color-mix(in srgb, var(--card) 92%, #000000 8%)}
.hour-row .slot.has-events{background:color-mix(in srgb, var(--card) 88%, #ffffff 12%)}
html[data-theme='light'] .hour-row .slot.has-events{background:color-mix(in srgb, var(--card) 90%, #000000 10%)}
.cal-event{position:absolute; left:4px; right:4px; border-radius:6px; padding:4px 10px; font-size:11px; line-height:1.2; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 4px 10px -3px rgba(0,0,0,.45); cursor:pointer; display:flex; flex-direction:column; gap:2px; overflow:hidden; width:auto; box-sizing:border-box}
html[data-theme='light'] .cal-event{background:linear-gradient(135deg,#2f73ff,#1c54d6)}
.cal-event .ev-title{font-weight:600; font-size:11px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-event .ev-meta{font-size:10px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Status color accents */
.cal-event.status-checked_in{background:linear-gradient(135deg,#ff9800,#f57c00)}
.cal-event.status-in_consultation{background:linear-gradient(135deg,#8e24aa,#6a1b9a)}
.cal-event.status-awaiting_payment{background:linear-gradient(135deg,#ff7043,#ff5722)}
.cal-event.status-completed{background:linear-gradient(135deg,#2e7d32,#1b5e20)}
.cal-event.status-cancelled{background:linear-gradient(135deg,#9e9e9e,#757575)}
.cal-event.status-no_show{background:linear-gradient(135deg,#546e7a,#37474f)}
.now-line{position:absolute; left:0; right:0; height:2px; background:#ff1744; box-shadow:0 0 0 1px rgba(0,0,0,.2);}
html[data-theme='light'] .now-line{background:#d50000}
/* Month view */
.cal-month-grid{display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:120px; position:relative; width:100%;}
.cal-month-grid .m-head{font-size:11px; text-transform:uppercase; letter-spacing:.6px; padding:8px 4px; font-weight:600; border-bottom:1px solid var(--border); text-align:center; background:var(--bg-main)}
.cal-month-grid .m-day{position:relative; border:1px solid var(--border); padding:4px 4px 4px 6px; display:flex; flex-direction:column; gap:4px; background:var(--card); overflow:hidden}
html[data-theme='light'] .cal-month-grid .m-day{background:var(--bg-main)}
.cal-month-grid .m-day.today{outline:2px solid #2563eb; outline-offset:-2px}
html[data-theme='light'] .cal-month-grid .m-day.today{outline-color:#1c54d6}
.cal-month-grid .m-date{font-size:12px; font-weight:600}
.cal-month-grid .m-events{display:flex; flex-direction:column; gap:2px; overflow:hidden}
.cal-month-grid .m-ev{display:inline-block; padding:2px 4px; font-size:10px; border-radius:4px; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.cal-month-grid .m-ev.status-completed{background:linear-gradient(135deg,#2e7d32,#1b5e20)}
.cal-month-grid .m-ev.status-cancelled{background:linear-gradient(135deg,#9e9e9e,#757575)}
.cal-month-grid .m-ev.status-no_show{background:linear-gradient(135deg,#546e7a,#37474f)}
.cal-month-grid .m-ev.status-in_consultation{background:linear-gradient(135deg,#8e24aa,#6a1b9a)}
.cal-month-grid .m-ev.status-awaiting_payment{background:linear-gradient(135deg,#ff7043,#ff5722)}
.cal-month-grid .m-ev.status-checked_in{background:linear-gradient(135deg,#ff9800,#f57c00)}
.cal-month-grid .more{font-size:10px; color:var(--accent); padding:2px 2px 0; cursor:pointer}
.cal-time-grid::-webkit-scrollbar,.cal-month-grid::-webkit-scrollbar{width:10px;}
.cal-time-grid::-webkit-scrollbar-track,.cal-month-grid::-webkit-scrollbar-track{background:var(--bg-main)}
.cal-time-grid::-webkit-scrollbar-thumb,.cal-month-grid::-webkit-scrollbar-thumb{background:var(--border); border-radius:20px}
@media (max-width:1000px){
  .cal-time-header{grid-template-columns:50px repeat(7,1fr)}
  .hour-row{grid-template-columns:50px repeat(7,1fr)}
  .hour-row .hour-label{font-size:10px}
  .cal-event{font-size:10px}
}
@media (max-width:720px){
  .cal-time-header{grid-template-columns:40px repeat(7,1fr)}
  .hour-row{grid-template-columns:40px repeat(7,1fr)}
  .appt-calendar{min-height:460px}
  .cal-month-grid{grid-auto-rows:100px}
}
@media (max-width:540px){
  .cal-time-header .day-col-head .dom{font-size:14px}
  .cal-mode-switch{display:none}
  .cal-nav .cal-range-label{font-size:12px}
  .appt-tab{padding:6px 10px; font-size:12px}
}

/* Confirm & Alert Modals */
.confirm-modal .card.confirm-card, .alert-modal .card.alert-card {
  width: min(90vw, 400px);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
}
.confirm-modal h3, .alert-modal h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
}
.confirm-modal p, .alert-modal p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.confirm-modal .btn, .alert-modal .btn {
  min-width: 80px;
  justify-content: center;
}





/* Full Page View Component (No Blur, No Backdrop) */
.full-page-view {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.full-page-view.show {
  transform: translateY(0);
}

.full-page-view .full-page-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Close button for full page */
.full-page-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2010;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  color: var(--text);
}
.full-page-close-btn:hover {
  transform: scale(1.1);
  background: var(--grad-accent);
}
.full-page-close-btn span {
  font-size: 28px;
}

/* Adapt patient detail card for full page */
.full-page-view .patient-detail-card {
  width: 100%;
  max-width: 1200px;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 60px 20px 40px;
  margin: 0 auto;
}


/* Full Page View Component (No Blur, No Backdrop) */
.full-page-view {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.full-page-view.show {
  transform: translateY(0);
}

.full-page-view .full-page-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Close button for full page */
.full-page-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2010;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  color: var(--text);
}
.full-page-close-btn:hover {
  transform: scale(1.1);
  background: var(--grad-accent);
}
.full-page-close-btn span {
  font-size: 28px;
}

/* Adapt patient detail card for full page */
.full-page-view .patient-detail-card {
  width: 100%;
  max-width: 1200px;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 60px 20px 40px;
  margin: 0 auto;
}


/* Global Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color .2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== COMPREHENSIVE MOBILE RESPONSIVE ===== */

/* Tablets & small laptops */
@media (max-width:768px){
  .content{padding:16px 12px 32px}
  .appt-view-header{flex-direction:column; gap:8px}
  .appt-view-header .right{align-self:flex-start}
  .appt-action-bar{gap:6px}
  .appt-action-bar .action-btn{padding:7px 12px; font-size:12px}
  .appt-sections{grid-template-columns:1fr}
}

/* Phones */
@media (max-width:600px){
  /* Close buttons */
  .full-page-close-btn{top:10px; right:10px; width:42px; height:42px}
  .full-page-close-btn span{font-size:24px}

  /* Content padding */
  .content{padding:12px 8px 24px}

  /* Modal cards: ensure they fit viewport */
  .modal{padding:12px 8px}
  .modal .card{max-width:calc(100vw - 16px) !important; margin:auto; padding:16px 14px; border-radius:12px}
  .modal .card h2{font-size:16px}

  /* Width utility classes: never exceed viewport */
  .w-400,.w-500,.w-600,.w-700{max-width:100%}

  /* Form grid: collapse 2-col to 1-col */
  .form.grid-2{grid-template-columns:1fr}
  .form.grid-2 .col-span-2{grid-column:1}
  .form-row-2{display:grid; grid-template-columns:1fr; gap:10px}
  .form.v-gap{gap:12px}

  /* KV grid collapse */
  .kv-grid{grid-template-columns:1fr}

  /* Action bar: wrap & smaller */
  .appt-action-bar{gap:6px; padding:10px 0}
  .appt-action-bar .action-btn{padding:6px 10px; font-size:11px; flex:1 1 auto; justify-content:center; min-width:0}
  .appt-action-bar .action-btn .material-symbols-rounded{font-size:16px}

  /* Appointment sections */
  .appt-sections{grid-template-columns:1fr; gap:10px}

  /* Touch targets: minimum 44px */
  .icon-btn{min-height:44px; min-width:44px}
  .icon-btn.tiny,.icon-btn.xxs{min-height:36px; min-width:36px; height:36px}
  .diag-doc-item .icon-btn.small{height:32px; width:32px}
  .doc-actions .icon-btn{min-height:40px; min-width:40px}

  /* Doc upload form */
  .doc-upload-form{padding:8px 10px}
  .doc-upload-form .doc-fields{flex-direction:column; align-items:stretch; gap:8px}
  .doc-upload-form .file-pick-label{flex:1 1 auto; justify-content:center; padding:12px 14px}
  .doc-upload-form .input{flex:1 1 auto; width:100%}
  .doc-upload-form .btn.small{width:100%; justify-content:center}

  /* File browser drawer */
  .file-browser-modal .card.docs-browser-card{padding:50px 10px 20px}
  .docs-browser-head{flex-wrap:wrap; gap:8px}
  .docs-browser-toolbar .search-tools{flex-direction:column}
  .docs-browser-toolbar .search-tools .input{flex:1 1 auto; width:100%}

  /* Doc rows */
  .doc-row{grid-template-columns:1fr; gap:8px}
  .doc-row .doc-meta{flex-direction:column; align-items:flex-start; gap:4px}
  .doc-name{max-width:100%}
  .doc-row .doc-actions{justify-content:flex-start}

  /* Doc summary */
  .doc-mini{grid-template-columns:auto 1fr auto auto; gap:6px; padding:6px 8px}
  .doc-mini .mini-date{display:none}

  /* Diagnosis doc attachment */
  .diag-docs-section{padding:8px}
  .diag-doc-item{padding:5px 6px; gap:6px}
  .diag-doc-name{font-size:11px}

  /* Custom select */
  .cs-trigger{padding:8px 12px; font-size:13px}
  .cs-menu{max-height:180px}

  /* Toolbar / filters */
  .toolbar{padding:10px 12px !important; gap:8px !important}
  .toolbar .filters-group{gap:8px}

  /* Table cells */
  .table .row{font-size:12px}
  .table .row .cell{padding:8px 6px}

  /* Pagination */
  .pagination-bar{flex-direction:column; gap:8px; padding:10px 12px; text-align:center}

  /* Chips smaller */
  .chip{padding:4px 8px; font-size:11px; gap:4px}
  .chip .material-symbols-rounded{font-size:14px}

  /* Buttons */
  .btn{padding:0 12px; height:40px; font-size:13px}
  .btn.small{height:36px; padding:0 10px; font-size:12px}
  .btn .material-symbols-rounded{font-size:18px}

  /* Section titles */
  .section{padding:10px}
  .section-title{font-size:13px}

  /* Patient detail */
  .full-page-view .card.appt-view-card{padding:50px 12px 30px}
  .full-page-view .patient-detail-card{padding:50px 12px 30px}

  /* Login modal */
  .login-modal .card{max-width:calc(100vw - 24px) !important; padding:24px 16px !important}

  /* File pick label */
  .file-pick-label{padding:10px 14px; font-size:12px}
}

/* Very small phones */
@media (max-width:380px){
  .modal{padding:8px 4px}
  .modal .card{padding:14px 10px}
  .appt-action-bar .action-btn{padding:6px 8px; font-size:10px}
  .appt-action-bar .action-btn .material-symbols-rounded{display:none}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .content{padding:8px 6px 20px}
  .btn{height:38px; padding:0 10px; font-size:12px}
  .cs-trigger{padding:6px 10px; font-size:12px}
  .docs-browser-head h2{font-size:16px}
}

/* Form row 2-col default (collapses on mobile via above) */
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}