:root{--bg:#f5f8fc;--panel:#fff;--text:#17324d;--muted:#74879a;--line:#e2eaf2;--accent:#2474c8;--accent2:#1b5e9f;--danger:#b53b3b;--soft:#edf4fb;--shadow:0 8px 30px rgba(23,50,77,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.center-screen{position:fixed;inset:0;display:grid;place-items:center;align-content:center;gap:10px;background:linear-gradient(145deg,#f7fafd,#edf4fb);z-index:50}.center-screen span,.center-screen small{color:var(--muted)}.spinner{width:34px;height:34px;border:3px solid #dce8f4;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.login-card{width:min(420px,calc(100vw - 30px));background:#fff;border:1px solid var(--line);border-radius:22px;padding:38px;text-align:center;box-shadow:var(--shadow)}.logo{width:64px;height:64px;margin:0 auto 18px;background:var(--accent);color:#fff;border-radius:20px;display:grid;place-items:center;font-size:30px;font-weight:800}.logo.small{width:40px;height:40px;margin:0;border-radius:12px;font-size:19px}.login-card h1{margin:0 0 7px}.login-card p{color:var(--muted);margin:0 0 24px}.login-card small{display:block;margin-top:16px;line-height:1.45}.error{color:var(--danger);font-size:13px;margin-top:10px}.btn{border:0;border-radius:10px;padding:11px 16px;background:var(--accent);color:white;font-weight:750;cursor:pointer}.btn:hover{background:var(--accent2)}.btn.secondary{background:#eef3f8;color:var(--text)}.btn.danger{background:#f8eaea;color:var(--danger)}.full{width:100%;padding:13px}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;cursor:pointer}.brand>div:last-child{display:flex;flex-direction:column}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.user{display:flex;align-items:center;gap:10px}.user span{font-size:12px;color:var(--muted)}.ghost{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;color:var(--text);cursor:pointer}
.nav{background:#fff;border-bottom:1px solid var(--line);display:flex;gap:7px;padding:10px max(26px,calc((100vw - 1280px)/2));position:sticky;top:68px;z-index:19}.nav button{border:0;background:transparent;color:var(--muted);padding:9px 13px;border-radius:9px;font-weight:700;cursor:pointer}.nav button.active{background:var(--soft);color:var(--accent)}.nav .primary{margin-left:auto;background:var(--accent);color:#fff}
.container{max-width:1280px;margin:0 auto;padding:28px 24px 90px}.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:18px}.page-head h1,.page-head h2{margin:0 0 5px}.page-head h1{font-size:32px}.page-head p{margin:0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.stat,.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 3px 14px rgba(28,57,90,.03)}.stat{padding:18px}.stat span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.stat strong{font-size:26px}.panel{padding:20px;margin-bottom:17px}.panel h3{margin-top:0}.search-row{display:flex;gap:10px}.search-row input{flex:1}
input,select,textarea{width:100%;border:1px solid #d7e1ea;border-radius:9px;padding:11px 12px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,116,200,.1)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.45px}tr.clickable:hover{background:#f8fbfe;cursor:pointer}.empty{text-align:center;padding:38px;color:var(--muted)}
.patient-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:850}.patient-hero h1{margin:5px 0}.patient-meta{font-size:13px;color:var(--muted)}.action-row{display:flex;gap:9px;flex-wrap:wrap}.tabs{display:flex;gap:7px;overflow-x:auto;margin-bottom:17px;padding-bottom:3px}.tab{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--text);padding:9px 13px;border-radius:9px;font-weight:700;cursor:pointer}.tab.active{background:var(--accent);border-color:var(--accent);color:white}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #edf1f5}.kv:last-child{border-bottom:0}.kv span{font-size:12px;color:var(--muted)}.kv strong{font-size:12px;text-align:right}.clinical-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}.clinical-card.alert{border-left:4px solid #d29a38}.clinical-card label{display:block;font-size:10px;color:var(--muted);font-weight:850;letter-spacing:.7px;margin-bottom:7px}.clinical-card div{font-weight:650;white-space:pre-wrap}
.list-card{border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:11px;background:#fbfcfe}.list-top{display:flex;justify-content:space-between;gap:14px}.list-date{font-size:11px;color:var(--accent);font-weight:800}.list-title{font-size:16px;font-weight:800;margin:5px 0}.list-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:10px}.list-grid b{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.list-grid p{margin:0;white-space:pre-wrap}.link{border:0;background:none;color:var(--accent);padding:0;font-size:12px;cursor:pointer}.link.danger{color:var(--danger)}.muted{color:var(--muted)}.smalltext{font-size:11px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750}.span2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.modal{position:fixed;inset:0;z-index:60}.backdrop{position:absolute;inset:0;background:rgba(13,29,44,.46)}.modal-card{position:relative;width:min(760px,calc(100vw - 28px));max-height:88vh;overflow:auto;margin:6vh auto;background:#fff;border-radius:18px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.25)}.x{position:absolute;right:14px;top:9px;border:0;background:none;font-size:28px;color:var(--muted);cursor:pointer}.mobile-nav{display:none}.toast{position:fixed;right:18px;bottom:18px;background:#17324d;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:100}
@media(max-width:820px){.nav{display:none}.topbar{height:62px;padding:0 13px}.user span{display:none}.container{padding:18px 13px 84px}.brand span{display:none}.mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{flex:1;border:0;background:#fff;color:var(--muted);padding:8px 3px;font-size:20px}.mobile-nav span{display:block;font-size:10px;margin-top:2px}.stats{grid-template-columns:1fr 1fr}.stats .stat:last-child{grid-column:1/-1}.page-head,.patient-hero{flex-direction:column;align-items:flex-start}.page-head h1{font-size:26px}.grid2,.grid3,.list-grid,.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.search-row{flex-direction:column}}


/* V1.3 Security & Backup */
.settings-kv{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.settings-kv:last-of-type{border-bottom:0}
.settings-kv span{color:var(--muted);font-size:13px}
.settings-kv strong,.settings-kv code{text-align:right;word-break:break-all}
.settings-kv code{background:#f4f7fa;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12px}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.security-note{margin:16px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
@media(max-width:700px){
  .settings-kv{flex-direction:column;gap:6px}
  .settings-kv strong,.settings-kv code{text-align:left}
}


/* V1.5 Backup & Restore */
.restore-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.restore-summary>div{border:1px solid var(--line);border-radius:12px;padding:14px;background:#f9fbfd}
.restore-summary span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.restore-summary strong{font-size:22px}
@media(max-width:700px){.restore-summary{grid-template-columns:1fr 1fr}}


/* V1.5.2 — Ημερομηνία γέννησης: Ημέρα / Μήνας / Έτος */
.dob-row{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:10px;margin-top:6px}
.dob-row>div span{display:block;font-size:11px;color:var(--muted);margin:0 0 5px 2px}
.dob-row input{text-align:center}
@media(max-width:520px){
  .dob-row{grid-template-columns:1fr 1fr 1.35fr;gap:7px}
}


/* =====================================================================
   V1.5.5 — KARLES.GR V66 VISUAL MATCH
   Source visual language: karles-v66-adym-pink-accent.xml
   VISUAL ONLY — app.js / index.html / firestore.rules untouched.
   ===================================================================== */

:root{
  --bg:#f8f5ef;
  --panel:#fffdf9;
  --text:#20384a;
  --muted:#6f7d7a;
  --line:#e5e7e2;
  --accent:#2f6fa8;
  --accent2:#1f4e7a;
  --danger:#b14b4b;
  --soft:#eef4ef;
  --shadow:0 18px 48px rgba(31,78,122,.11);

  --navy:#1f4e7a;
  --blue:#2f6fa8;
  --blue2:#6ca6d8;
  --ice:#f8f5ef;
  --ice2:#eef4ef;
  --gold:#c7a15a;
  --white:#fff;
  --sage:#dfeae2;
  --sage-strong:#b9d0c0;
  --apricot:#efd9cf;
  --sand:#f3eadc;
  --radius:24px;
  --max:1180px;
}

html,body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fcfbf8 0%,var(--ice) 100%);
  line-height:1.65;
}

/* ---------- ORIGINAL-SITE SHIELD MARK ---------- */
.logo,
.logo.small{
  font-size:0!important;
  color:transparent!important;
  border-radius:0!important;
  background:var(--blue)!important;
  box-shadow:
    inset 0 0 0 8px var(--navy),
    0 8px 15px rgba(31,78,122,.12)!important;
  clip-path:polygon(
    50% 0%,
    67% 12%,
    88% 19%,
    92% 25%,
    92% 56%,
    88% 72%,
    76% 87%,
    50% 100%,
    24% 87%,
    12% 72%,
    8% 56%,
    8% 25%,
    12% 19%,
    33% 12%
  );
  position:relative;
  overflow:visible;
}
.logo::before,
.logo.small::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#fff 0 0) center/11% 34% no-repeat,
    linear-gradient(#fff 0 0) center/34% 11% no-repeat;
}
.logo::after,
.logo.small::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  top:5%;
  right:8%;
  box-shadow:0 2px 7px rgba(199,161,90,.28);
}
.logo{
  width:76px!important;
  height:88px!important;
  margin:0 auto 20px!important;
}
.logo.small{
  width:52px!important;
  height:61px!important;
  margin:0!important;
  flex:0 0 52px;
  box-shadow:
    inset 0 0 0 6px var(--navy),
    0 8px 15px rgba(31,78,122,.12)!important;
}
.logo.small::after{
  width:5px;
  height:5px;
}

/* ---------- LOGIN: same visual language as site hero card ---------- */
.center-screen{
  background:
    radial-gradient(circle at 84% 14%,rgba(199,161,90,.12),transparent 20%),
    radial-gradient(circle at 18% 82%,rgba(197,219,205,.30),transparent 26%),
    linear-gradient(145deg,#fffdf9 0%,#f1f5ef 100%);
}
.spinner{
  border-color:#dfe7e1;
  border-top-color:var(--blue);
}
.login-card{
  width:min(430px,calc(100vw - 30px));
  padding:40px 38px;
  border:1px solid #e3edf3;
  border-radius:34px;
  background:
    radial-gradient(circle at 88% 10%,rgba(199,161,90,.12),transparent 18%),
    radial-gradient(circle at 12% 92%,rgba(223,234,226,.55),transparent 24%),
    #fffdf9;
  box-shadow:var(--shadow);
}
.login-card h1{
  margin:0 0 8px;
  color:#153a5a;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
}
.login-card p{
  margin:0 0 25px;
  color:#536c7d;
}
.login-card small{
  color:var(--muted);
}

/* ---------- HEADER: reconstructed from karles.gr V66 ---------- */
#shell{
  position:relative;
}
.topbar{
  height:78px;
  min-height:78px;
  padding:8px max(20px,calc((100vw - var(--max))/2));
  background:rgba(252,251,248,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  position:sticky;
  top:0;
  z-index:30;
}
.brand{
  gap:14px;
  flex:0 0 auto;
}
.brand>div:last-child{
  display:block;
}
.brand b,
.brand span{
  font-size:0!important;
  color:transparent!important;
  margin:0!important;
}
.brand b::before{
  content:"Μιχάλης Κάρλες";
  display:block;
  font-size:23px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--navy);
  white-space:nowrap;
}
.brand span::before{
  content:"Παιδιατρικό Ιατρείο · Μικροί Ήρωες";
  display:block;
  margin-top:7px;
  font-size:11px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--blue);
  white-space:nowrap;
}
.user{
  gap:10px;
  position:relative;
  z-index:4;
}
.user span{
  color:var(--muted);
  font-size:11px;
  max-width:150px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ghost{
  border:1px solid var(--line);
  background:#fffdf9;
  border-radius:999px;
  padding:9px 13px;
  color:#35566e;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  transition:.2s ease;
}
.ghost:hover{
  border-color:#c9d8e3;
  color:var(--navy);
  box-shadow:0 8px 18px rgba(31,78,122,.06);
}

/* Overlay the existing nav into the same 78px header row.
   No DOM / JS change: buttons remain the same clickable elements. */
.nav{
  height:78px;
  min-height:78px;
  margin-top:-78px;
  padding:
    0 max(220px,calc((100vw - var(--max))/2 + 205px))
    0 max(335px,calc((100vw - var(--max))/2 + 325px));
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  background:transparent;
  border:0;
  position:sticky;
  top:0;
  z-index:31;
  pointer-events:none;
}
.nav button{
  pointer-events:auto;
  position:relative;
  border:0;
  border-radius:0;
  background:transparent!important;
  padding:12px 0;
  color:#35566e;
  font-size:13px;
  font-weight:750;
  box-shadow:none!important;
  white-space:nowrap;
  transition:.2s ease;
}
.nav button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:2px;
  background:var(--gold);
  border-radius:2px;
  transform:scaleX(0);
  transition:.2s ease;
}
.nav button:hover{
  color:var(--navy);
  transform:none;
}
.nav button:hover::after,
.nav button.active::after{
  transform:scaleX(1);
}
.nav button.active{
  color:var(--navy);
  background:transparent!important;
}
.nav .primary{
  margin-left:4px;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  color:#fff!important;
  background:linear-gradient(135deg,var(--navy),var(--blue))!important;
  box-shadow:0 12px 28px rgba(31,78,122,.18)!important;
}
.nav .primary::after{display:none}
.nav .primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(31,78,122,.22)!important;
}

/* ---------- TYPOGRAPHY / CONTENT ---------- */
.container{
  max-width:var(--max);
  padding:38px 20px 96px;
}
.page-head{
  margin-bottom:22px;
}
.page-head h1,
.page-head h2,
.patient-hero h1{
  color:#163d5f;
  letter-spacing:-.04em;
}
.page-head h1{
  font-size:36px;
  line-height:1.08;
}
.page-head p{
  color:#536c7d;
}

/* ---------- SITE-STYLE BUTTONS ---------- */
.btn{
  min-height:48px;
  padding:0 21px;
  border:0;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  box-shadow:0 12px 28px rgba(31,78,122,.18);
  transition:.2s ease;
}
.btn:hover{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(31,78,122,.22);
}
.btn.secondary{
  color:var(--navy);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.secondary:hover{
  background:#fff;
  border-color:#c9d8e3;
  box-shadow:0 10px 24px rgba(31,78,122,.08);
}
.btn.danger{
  color:#9e4848;
  background:#fff4f2;
  border:1px solid #edd9d5;
  box-shadow:none;
}
.full{min-height:50px}

/* ---------- DASHBOARD / CARDS ---------- */
.stats{
  gap:16px;
  margin-bottom:18px;
}
.stat,
.panel{
  border:1px solid var(--line);
  background:#fffdf9;
  box-shadow:0 12px 28px rgba(31,78,122,.05);
}
.stat{
  padding:21px 24px;
  border-radius:20px;
}
.stat span{
  color:var(--muted);
  font-size:12px;
}
.stat strong{
  color:var(--navy);
  font-size:28px;
}
.panel{
  padding:24px;
  border-radius:22px;
  margin-bottom:18px;
}
.panel h3{
  margin-top:0;
  color:var(--navy);
  font-size:18px;
}

/* gentle alternating pastel accents from the site */
.stats .stat:nth-child(1){
  background:linear-gradient(145deg,#fffdf9 0%,#f4f8f4 100%);
}
.stats .stat:nth-child(2){
  background:linear-gradient(145deg,#fffdf9 0%,#fbf5f1 100%);
}
.stats .stat:nth-child(3){
  background:linear-gradient(145deg,#fffdf9 0%,#faf6ee 100%);
}

/* ---------- FORMS ---------- */
input,select,textarea{
  border:1px solid #dfe7e2;
  border-radius:13px;
  padding:11px 13px;
  background:#fff;
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(47,111,168,.09);
}
.form-grid label{
  color:#35566e;
}

/* ---------- TABLES ---------- */
.table-wrap{
  border-radius:18px;
}
th{
  color:var(--muted);
  font-weight:850;
  letter-spacing:.07em;
}
th,td{
  border-bottom-color:var(--line);
}
tr.clickable:hover{
  background:#f4f8f4;
}
td strong{
  color:#35566e;
}

/* ---------- PATIENT PAGE ---------- */
.patient-hero{
  padding:26px 28px;
  border:1px solid #e3edf3;
  border-radius:28px;
  background:
    radial-gradient(circle at 84% 14%,rgba(199,161,90,.14),transparent 18%),
    radial-gradient(circle at 18% 82%,rgba(197,219,205,.30),transparent 24%),
    linear-gradient(145deg,#fffdf9 0%,#f1f5ef 100%);
  box-shadow:var(--shadow);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid #d8e7f0;
  background:#fff;
  border-radius:999px;
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.patient-meta{
  color:#536c7d;
}
.tabs{
  gap:10px;
  margin-top:18px;
}
.tab{
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#35566e;
  padding:10px 15px;
  font-weight:750;
  transition:.2s ease;
}
.tab:hover{
  border-color:#c9d8e3;
  box-shadow:0 8px 18px rgba(31,78,122,.05);
}
.tab.active{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  box-shadow:0 10px 24px rgba(31,78,122,.15);
}

/* ---------- CLINICAL / LIST CARDS ---------- */
.clinical-card{
  border:1px solid #dfeaf1;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px rgba(31,78,122,.045);
}
.clinical-card:nth-child(2n){
  background:#fffefa;
}
.clinical-card:nth-child(3n){
  background:#fffdfb;
}
.clinical-card.alert{
  border-left:4px solid var(--gold);
  background:#fffaf2;
}
.clinical-card label{
  color:var(--muted);
}
.list-card{
  border:1px solid #dfeaf1;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 26px rgba(31,78,122,.04);
  transition:.2s ease;
}
.list-card:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 32px rgba(31,78,122,.07);
}
.list-date,.link{
  color:var(--blue);
}
.list-title{
  color:var(--navy);
}

/* ---------- SETTINGS / BACKUP ---------- */
.settings-kv{
  border-bottom-color:var(--line);
}
.settings-kv span{
  color:var(--muted);
}
.settings-kv code{
  border:1px solid #dfe7e2;
  border-radius:10px;
  background:var(--ice2);
  color:#35566e;
}
.security-note{
  color:var(--muted);
  padding:13px 14px;
  border:1px solid #e1e8e2;
  border-radius:15px;
  background:#f4f8f4;
}
.restore-summary>div{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fffdf9;
  box-shadow:0 8px 18px rgba(31,78,122,.035);
}
.restore-summary>div:nth-child(1){background:#f3f7f3}
.restore-summary>div:nth-child(2){background:#fbf4f0}
.restore-summary>div:nth-child(3){background:#faf6ee}
.restore-summary>div:nth-child(4){background:#f2f6f9}
.restore-summary strong{
  color:var(--navy);
}

/* ---------- MODALS ---------- */
.backdrop{
  background:rgba(20,48,68,.46);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.modal-card{
  border:1px solid #e4ebe5;
  border-radius:28px;
  padding:28px;
  background:#fffdf9;
  box-shadow:0 28px 80px rgba(31,78,122,.22);
}
.modal-card h2{
  color:#163d5f;
  letter-spacing:-.035em;
}
.x{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.x:hover{
  background:var(--ice2);
}

/* ---------- TOAST ---------- */
.toast{
  background:linear-gradient(135deg,var(--navy),#245b78);
  border-radius:15px;
  box-shadow:0 16px 34px rgba(31,78,122,.20);
}

/* ---------- DOB ---------- */
.dob-row>div span{
  color:var(--muted);
  font-weight:750;
}

/* ---------- RESPONSIVE HEADER ---------- */
@media(max-width:1120px) and (min-width:821px){
  .brand b::before{font-size:20px}
  .brand span::before{font-size:9px;letter-spacing:.10em}
  .nav{
    gap:12px;
    padding-left:315px;
    padding-right:185px;
  }
  .nav button{font-size:12px}
  .user span{display:none}
}

@media(max-width:820px){
  .topbar{
    height:68px;
    min-height:68px;
    padding:4px 14px;
  }
  .logo.small{
    width:43px!important;
    height:51px!important;
    flex-basis:43px;
    box-shadow:
      inset 0 0 0 5px var(--navy),
      0 7px 13px rgba(31,78,122,.12)!important;
  }
  .brand{gap:10px}
  .brand b::before{
    font-size:18px;
  }
  .brand span::before{
    content:"Παιδιατρικό Ιατρείο · Μικροί Ήρωες";
    margin-top:5px;
    font-size:8px;
    letter-spacing:.08em;
  }
  .user span{display:none}
  .ghost{
    padding:8px 10px;
    font-size:11px;
  }

  /* Existing mobile bottom navigation stays functional,
     styled in the same palette. */
  .mobile-nav{
    background:rgba(252,251,248,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 28px rgba(31,78,122,.08);
  }
  .mobile-nav button{
    background:transparent;
    color:var(--muted);
  }
  .mobile-nav button.active{
    color:var(--blue);
  }

  .container{
    padding:22px 13px 92px;
  }
  .page-head h1{font-size:29px}
  .patient-hero{
    padding:22px;
    border-radius:24px;
  }
  .panel{padding:20px}
}

@media(max-width:520px){
  .brand span::before{
    content:"Μικροί Ήρωες";
    letter-spacing:.10em;
  }
  .login-card{
    padding:32px 24px;
    border-radius:28px;
  }
  .logo{
    width:67px!important;
    height:78px!important;
  }
  .page-head h1{font-size:27px}
}


/* ===================================================================
   V1.5.6 — HEADER EXACT REFINEMENT
   Exact shield artwork + corrected vertical rhythm from karles.gr V66.
   CSS ONLY.
   =================================================================== */

/* Exact SVG shield from karles-v66-adym-pink-accent.xml */
.logo,
.logo.small{
  background-color:transparent!important;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 116' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 4C38 17 25 23 8 26v34c0 27 16 45 42 52 26-7 42-25 42-52V26C75 23 62 17 50 4z' fill='%231F4E7A'/%3E%3Cpath d='M50 15C39 25 29 30 18 32v28c0 20 11 34 32 41 21-7 32-21 32-41V32C71 30 61 25 50 15z' fill='%232F6FA8'/%3E%3Cpath d='M45 35h10v15h15v10H55v15H45V60H30V50h15z' fill='white'/%3E%3Ccircle cx='84' cy='12' fill='%23CFA34A' r='3.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  clip-path:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.logo::before,.logo::after,
.logo.small::before,.logo.small::after{
  display:none!important;
}

/* Keep original-site 78px vertical rhythm exactly */
.topbar{
  height:78px!important;
  min-height:78px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  overflow:visible!important;
}

/* Critical correction: the real HTML has b/span wrappers.
   Give them real block boxes so pseudo text is vertically centered,
   instead of being rendered from a zero-height inline line box. */
.brand{
  height:62px!important;
  min-height:62px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  overflow:visible!important;
}
.logo.small{
  width:52px!important;
  height:61px!important;
  min-width:52px!important;
  flex:0 0 52px!important;
}
.brand>div:last-child{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  height:61px!important;
  min-height:61px!important;
  overflow:visible!important;
}
.brand b,
.brand span{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  overflow:visible!important;
}
.brand b{
  font-size:0!important;
}
.brand span{
  font-size:0!important;
}
.brand b::before{
  content:"Μιχάλης Κάρλες";
  display:block!important;
  position:static!important;
  margin:0!important;
  padding:0!important;
  font-size:23px!important;
  line-height:23px!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  color:var(--navy)!important;
  white-space:nowrap!important;
}
.brand span::before{
  content:"Παιδιατρικό Ιατρείο · Μικροί Ήρωες";
  display:block!important;
  position:static!important;
  margin:7px 0 0!important;
  padding:0!important;
  font-size:11px!important;
  line-height:12px!important;
  font-weight:800!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  color:var(--blue)!important;
  white-space:nowrap!important;
}

/* Cleaner right side — the original public site has no account-name label */
.user span{
  display:none!important;
}
.user{
  margin-left:12px!important;
  flex:0 0 auto!important;
}

/* Center navigation in the remaining header space, like the original site */
.nav{
  height:78px!important;
  min-height:78px!important;
  margin-top:-78px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  padding-left:max(365px,calc((100vw - var(--max))/2 + 345px))!important;
  padding-right:max(150px,calc((100vw - var(--max))/2 + 135px))!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:22px!important;
}
.nav button{
  height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
  line-height:1!important;
}
.nav button:not(.primary)::after{
  bottom:4px!important;
}
.nav .primary{
  min-width:132px!important;
  padding-left:18px!important;
  padding-right:18px!important;
}

/* Make the header content line up with the 1180px site wrap */
.topbar{
  padding-left:max(20px,calc((100vw - var(--max))/2))!important;
  padding-right:max(20px,calc((100vw - var(--max))/2))!important;
}

/* Slightly more breathing room below the fixed header */
.container{
  padding-top:36px!important;
}

/* At medium desktop widths, preserve brand first and reduce menu spacing */
@media(max-width:1180px) and (min-width:821px){
  .brand b::before{
    font-size:20px!important;
    line-height:21px!important;
  }
  .brand span::before{
    font-size:9px!important;
    line-height:10px!important;
    letter-spacing:.10em!important;
  }
  .nav{
    gap:13px!important;
    padding-left:315px!important;
    padding-right:125px!important;
  }
  .nav button{
    font-size:12px!important;
  }
  .nav .primary{
    min-width:118px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

/* Mobile: exact shield, correctly centered brand, no header overlay nav */
@media(max-width:820px){
  .topbar{
    height:68px!important;
    min-height:68px!important;
    padding:4px 14px!important;
  }
  .brand{
    height:58px!important;
    min-height:58px!important;
    gap:10px!important;
  }
  .logo.small{
    width:43px!important;
    height:50px!important;
    min-width:43px!important;
    flex-basis:43px!important;
  }
  .brand>div:last-child{
    height:50px!important;
    min-height:50px!important;
  }
  .brand b::before{
    font-size:18px!important;
    line-height:19px!important;
  }
  .brand span::before{
    content:"Μικροί Ήρωες"!important;
    margin-top:5px!important;
    font-size:9px!important;
    line-height:10px!important;
    letter-spacing:.10em!important;
  }
  .container{
    padding-top:22px!important;
  }
}


/* ===================================================================
   V1.5.7 — EXACT KARLES.GR PASTEL ACCENTS
   Colors taken from karles-v66-adym-pink-accent.xml
   CSS ONLY — header structure/functionality untouched.
   =================================================================== */

:root{
  --blush:#f7e7ea;
  --blush2:#fff5f6;
  --lilac:#eee9f6;
  --peach:#faeee2;
  --sage-soft:#edf3ec;
  --rose-text:#8a5f69;
}

/* Very subtle page atmosphere, like the public site */
body{
  background:
    radial-gradient(circle at 92% 14%,rgba(238,233,246,.28),transparent 24%),
    radial-gradient(circle at 7% 42%,rgba(247,231,234,.22),transparent 25%),
    linear-gradient(180deg,#fcfbf8 0%,var(--ice) 100%)!important;
}

/* Dashboard statistic cards — exact pastel family from website */
.stats .stat:nth-child(1){
  background:linear-gradient(145deg,#fffdf9,var(--sage-soft))!important;
  border-color:#dfe8de!important;
}
.stats .stat:nth-child(2){
  background:linear-gradient(145deg,#fffdf9,var(--blush2))!important;
  border-color:#eadfe2!important;
}
.stats .stat:nth-child(3){
  background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important;
  border-color:#e6e0ee!important;
}

/* Small pastel accent strip gives cards identity without looking childish */
.stats .stat{
  position:relative;
  overflow:hidden;
}
.stats .stat::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:4px;
}
.stats .stat:nth-child(1)::before{background:#b9d0c0}
.stats .stat:nth-child(2)::before{background:#d9aeb7}
.stats .stat:nth-child(3)::before{background:#c6b7dc}

/* Dashboard panels: alternate gentle tints */
.container > .panel:nth-of-type(1){
  background:
    radial-gradient(circle at 94% 14%,rgba(250,238,226,.65),transparent 24%),
    #fffdf9!important;
}
.container > .panel:nth-of-type(2){
  background:
    radial-gradient(circle at 90% 10%,rgba(238,233,246,.42),transparent 22%),
    #fffdf9!important;
}

/* Patient hero uses the exact blush/lilac/sage visual language */
.patient-hero{
  background:
    radial-gradient(circle at 90% 10%,rgba(238,233,246,.82),transparent 26%),
    radial-gradient(circle at 72% 86%,rgba(247,231,234,.72),transparent 30%),
    radial-gradient(circle at 10% 88%,rgba(237,243,236,.70),transparent 27%),
    linear-gradient(145deg,#f8fbf8 0%,#fff9f6 58%,#fffdf9 100%)!important;
}

/* The small patient tag picks up the rose accent used on the site */
.eyebrow{
  border-color:#eadde1!important;
  background:rgba(255,250,250,.92)!important;
  color:var(--rose-text)!important;
}

/* Clinical cards: cycle through site pastel accents */
.clinical-grid .clinical-card:nth-child(4n+1),
#tabContent .clinical-card:nth-child(4n+1){
  background:linear-gradient(145deg,#fffdf9,var(--blush2))!important;
  border-color:#eadfe0!important;
}
.clinical-grid .clinical-card:nth-child(4n+2),
#tabContent .clinical-card:nth-child(4n+2){
  background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important;
  border-color:#e6e0ee!important;
}
.clinical-grid .clinical-card:nth-child(4n+3),
#tabContent .clinical-card:nth-child(4n+3){
  background:linear-gradient(145deg,#fffdf9,#f4f8f3)!important;
  border-color:#dfe8de!important;
}
.clinical-grid .clinical-card:nth-child(4n),
#tabContent .clinical-card:nth-child(4n){
  background:linear-gradient(145deg,#fffdf9,#fff8f1)!important;
  border-color:#eee2d6!important;
}

/* Visits / growth / vaccine list cards get the same alternation */
.list-card:nth-child(4n+1){
  background:linear-gradient(145deg,#fffdf9,var(--blush2))!important;
}
.list-card:nth-child(4n+2){
  background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important;
}
.list-card:nth-child(4n+3){
  background:linear-gradient(145deg,#fffdf9,#f4f8f3)!important;
}
.list-card:nth-child(4n){
  background:linear-gradient(145deg,#fffdf9,#fff8f1)!important;
}

/* Settings cards — keep serious but softer */
.settings-kv code{
  background:linear-gradient(145deg,#f4f8f3,#f7f4fb)!important;
}
.security-note{
  background:linear-gradient(145deg,#f4f8f3,#fffaf8)!important;
  border-color:#e3e7e0!important;
}

/* Backup preview uses all four pastel categories */
.restore-summary>div:nth-child(1){
  background:linear-gradient(145deg,#fffdf9,var(--sage-soft))!important;
  border-color:#dfe8de!important;
}
.restore-summary>div:nth-child(2){
  background:linear-gradient(145deg,#fffdf9,var(--blush2))!important;
  border-color:#eadfe0!important;
}
.restore-summary>div:nth-child(3){
  background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important;
  border-color:#e6e0ee!important;
}
.restore-summary>div:nth-child(4){
  background:linear-gradient(145deg,#fffdf9,var(--peach))!important;
  border-color:#eee2d6!important;
}

/* Modal gets only a whisper of lilac/blush in corners */
.modal-card{
  background:
    radial-gradient(circle at 96% 4%,rgba(238,233,246,.28),transparent 22%),
    radial-gradient(circle at 4% 96%,rgba(247,231,234,.20),transparent 20%),
    #fffdf9!important;
}

/* Form focus remains blue for clarity, with subtle pastel hover */
input:hover,select:hover,textarea:hover{
  background:#fffdfc;
  border-color:#d8ded9;
}

/* Mobile keeps accents light and readable */
@media(max-width:820px){
  body{
    background:
      radial-gradient(circle at 95% 8%,rgba(238,233,246,.22),transparent 20%),
      linear-gradient(180deg,#fcfbf8 0%,var(--ice) 100%)!important;
  }
}


/* ===================================================================
   V1.6.0 — ΕΜΒΟΛΙΑΣΤΙΚΟ ΠΛΑΝΟ
   =================================================================== */

.stats{grid-template-columns:repeat(4,1fr)!important}
.vax-stat{
  background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important;
  border-color:#e6e0ee!important;
}
.vax-stat::before{background:#c6b7dc!important}

.vaccine-alert-panel,
.vax-plan-panel{
  overflow:hidden;
}
.vax-panel-head,
.vax-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:17px;
}
.vax-panel-head h3,
.vax-history-head h3{
  margin:0 0 4px!important;
}
.vax-panel-head p,
.vax-history-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}
.small-btn{
  min-height:38px!important;
  padding:0 15px!important;
  font-size:12px!important;
  flex:0 0 auto;
}
.vax-empty{
  padding:18px;
  border:1px dashed #dce4de;
  border-radius:17px;
  background:linear-gradient(145deg,#fafcf9,#fffafc);
  color:var(--muted);
  text-align:center;
  font-size:13px;
}

.vax-alert-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.vax-alert-row{
  width:100%;
  display:grid;
  grid-template-columns:175px 1fr 28px;
  align-items:center;
  gap:15px;
  padding:12px 14px;
  border:1px solid #e4e8e3;
  border-radius:17px;
  background:#fff;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.vax-alert-row:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(31,78,122,.07);
}
.vax-alert-row.overdue{
  border-left:4px solid #c96f70;
  background:linear-gradient(90deg,#fff5f6,#fffdf9 40%);
}
.vax-alert-row.urgent{
  border-left:4px solid #d9aeb7;
  background:linear-gradient(90deg,#fff7f8,#fffdf9 40%);
}
.vax-alert-row.soon{
  border-left:4px solid #b9a9d2;
  background:linear-gradient(90deg,#f8f5fc,#fffdf9 40%);
}
.vax-alert-date{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.vax-alert-date strong{
  color:var(--navy);
  font-size:13px;
}
.vax-alert-main{
  min-width:0;
}
.vax-alert-main strong{
  display:block;
  color:var(--navy);
  font-size:13px;
}
.vax-alert-main span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}
.vax-arrow{
  color:var(--blue);
  font-size:24px;
  text-align:right;
}
.vax-more{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  text-align:right;
}

.vax-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
  border:1px solid transparent;
}
.vax-badge.overdue{
  color:#984e54;
  background:#fbeaec;
  border-color:#efd0d4;
}
.vax-badge.urgent{
  color:#925967;
  background:#fff0f3;
  border-color:#f0d8dd;
}
.vax-badge.soon{
  color:#685984;
  background:#f2edf8;
  border-color:#e1d8ed;
}
.vax-badge.planned{
  color:#56705e;
  background:#edf4ee;
  border-color:#d8e7da;
}

.vax-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.vax-plan-card{
  min-width:0;
  padding:16px;
  border:1px solid #e3e7e2;
  border-radius:20px;
  background:#fffdf9;
  box-shadow:0 8px 20px rgba(31,78,122,.035);
}
.vax-plan-card.overdue{
  background:linear-gradient(145deg,#fffdf9,#fff2f4);
  border-color:#edd7da;
}
.vax-plan-card.urgent{
  background:linear-gradient(145deg,#fffdf9,#fff5f6);
  border-color:#eadfe2;
}
.vax-plan-card.soon{
  background:linear-gradient(145deg,#fffdf9,#f7f4fb);
  border-color:#e6e0ee;
}
.vax-plan-card.planned{
  background:linear-gradient(145deg,#fffdf9,#f3f8f3);
  border-color:#dfe8de;
}
.vax-plan-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.vax-code{
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.vax-date{
  margin-top:13px;
  color:var(--navy);
  font-size:23px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.03em;
}
.vax-dose{
  margin-top:8px;
  color:#35566e;
  font-size:13px;
  font-weight:750;
}
.vax-last{
  margin-top:7px;
  color:var(--muted);
  font-size:10px;
}
.vax-table-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.vax-form-note{
  padding:11px 13px;
  border:1px solid #e1e7e1;
  border-radius:13px;
  background:linear-gradient(145deg,#f4f8f3,#fff8fa);
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

@media(max-width:980px){
  .stats{grid-template-columns:1fr 1fr!important}
  .vax-plan-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .stats{grid-template-columns:1fr 1fr!important}
  .stats .stat:last-child{grid-column:auto!important}
  .vax-alert-row{
    grid-template-columns:1fr 24px;
  }
  .vax-alert-date{
    grid-column:1/-1;
  }
  .vax-plan-grid{grid-template-columns:1fr}
  .vax-panel-head,
  .vax-history-head{
    flex-direction:column;
  }
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr 1fr!important}
  .vax-alert-row{padding:12px}
}


/* ===================================================================
   V1.7.0 — MANUAL REMINDER CENTER
   =================================================================== */
.reminder-center-panel{
  overflow:hidden;
  background:
    radial-gradient(circle at 95% 8%,rgba(238,233,246,.48),transparent 24%),
    radial-gradient(circle at 5% 95%,rgba(237,243,236,.55),transparent 24%),
    #fffdf9!important;
}
.rem-center-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.rem-center-head h3{margin:0 0 4px!important}
.rem-center-head p{margin:0;color:var(--muted);font-size:12px}
.rem-count{
  min-width:36px;height:36px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--lilac);color:#675783;font-weight:900;
}
.rem-empty{
  padding:18px;border:1px dashed #dce4de;border-radius:17px;
  background:linear-gradient(145deg,#fafcf9,#fff7fa);
  color:var(--muted);text-align:center;font-size:13px;
}
.rem-center-list{display:flex;flex-direction:column;gap:10px}
.rem-home-row{
  display:grid;
  grid-template-columns:190px minmax(220px,1fr) auto;
  align-items:center;
  gap:16px;
  padding:13px 14px;
  border:1px solid #e2e7e1;border-radius:18px;background:#fff;
}
.rem-home-row.overdue{border-left:4px solid #c96f70;background:linear-gradient(90deg,#fff3f5,#fff 38%)}
.rem-home-row.today{border-left:4px solid #d9aeb7;background:linear-gradient(90deg,#fff7f8,#fff 38%)}
.rem-home-row.upcoming{border-left:4px solid #b9a9d2;background:linear-gradient(90deg,#f8f5fc,#fff 38%)}
.rem-home-when{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rem-home-when strong{font-size:12px;color:var(--navy)}
.rem-home-person{min-width:0}
.rem-patient-link{
  appearance:none;border:0;background:transparent;padding:0;color:var(--navy);
  font:inherit;font-weight:850;cursor:pointer;text-align:left
}
.rem-patient-link:hover{text-decoration:underline}
.rem-home-person>span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.rem-preview{
  margin-top:5px;color:#5c6d77;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;
}
.rem-home-actions,.patient-rem-actions{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end
}
.mini-action{
  min-height:32px;padding:0 10px;border:1px solid #dfe5df;border-radius:999px;
  background:#fff;color:#496376;font-size:10px;font-weight:800;cursor:pointer;
}
.mini-action:hover{box-shadow:0 6px 14px rgba(31,78,122,.07);border-color:#cad8d0}
.mini-action.sms{background:#eef5fa;color:#2f6fa8;border-color:#d9e6ef}
.mini-action.viber{background:#f3eef9;color:#735c91;border-color:#e3d8ef}
.mini-action.done{background:#eef5ef;color:#55705e;border-color:#d9e7db}
.mini-action.delete{background:#fff3f3;color:#9e5151;border-color:#efdcdc}

.rem-badge{
  display:inline-flex;align-items:center;min-height:23px;padding:3px 9px;
  border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap;
}
.rem-badge.overdue{background:#fbe8eb;color:#984f57}
.rem-badge.today{background:#fff0f3;color:#925967}
.rem-badge.upcoming{background:#f0ebf7;color:#695985}
.rem-badge.planned{background:#edf4ee;color:#55705e}
.rem-badge.sent{background:#eef1f3;color:#61717a}

.rem-more{margin-top:10px;text-align:right;color:var(--muted);font-size:11px}
.rem-template-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #e3e7e2;
  border-radius:14px;background:linear-gradient(145deg,#f4f8f3,#fff6f8)
}
.rem-template-row span{font-size:10px;color:var(--muted)}

.rem-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px
}
.rem-section-title h3{margin:0!important}
.rem-section-title span{
  min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--lilac);color:#675783;font-size:11px;font-weight:900
}
.patient-rem-list{display:flex;flex-direction:column;gap:11px}
.patient-rem-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;
  padding:16px;border:1px solid #e2e7e1;border-radius:20px;background:#fff;
}
.patient-rem-card.overdue{background:linear-gradient(145deg,#fff,#fff3f5);border-color:#edd6da}
.patient-rem-card.today{background:linear-gradient(145deg,#fff,#fff7f8);border-color:#eadfe2}
.patient-rem-card.upcoming{background:linear-gradient(145deg,#fff,#f7f4fb);border-color:#e6e0ee}
.patient-rem-card.planned{background:linear-gradient(145deg,#fff,#f3f8f3);border-color:#dfe8de}
.patient-rem-card.sent{opacity:.78;background:#fafafa}
.patient-rem-top{display:flex;align-items:center;gap:10px}
.patient-rem-top strong{color:var(--navy)}
.patient-rem-time{margin-top:8px;color:#35566e;font-size:13px;font-weight:800}
.patient-rem-meta{margin-top:3px;color:var(--muted);font-size:11px}
.patient-rem-message{margin-top:9px;color:#536772;font-size:12px;line-height:1.55}
.patient-rem-sentat{margin-top:7px;color:var(--muted);font-size:10px}

@media(max-width:980px){
  .rem-home-row{grid-template-columns:160px 1fr}
  .rem-home-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:820px){
  .rem-home-row{grid-template-columns:1fr}
  .rem-home-actions{grid-column:auto}
  .patient-rem-card{grid-template-columns:1fr}
  .patient-rem-actions{justify-content:flex-start}
  .rem-template-row{flex-direction:column;align-items:flex-start}
}


/* =====================================================================
   V1.7.1 — iPHONE / MOBILE LAYOUT FIX
   Tested target: iPhone 16 Pro / Chrome iOS
   CSS ONLY. Desktop rules untouched.
   ===================================================================== */

@media (max-width:820px){

  /* ---------- Global mobile safety ---------- */
  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }
  *,*::before,*::after{
    box-sizing:border-box;
  }
  #shell{
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
  }

  /* ---------- Header ----------
     IMPORTANT: desktop nav is completely removed on mobile.
     Bottom mobile navigation is the only main navigation. */
  .nav{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .topbar{
    width:100%!important;
    max-width:100vw!important;
    height:68px!important;
    min-height:68px!important;
    padding:6px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    overflow:hidden!important;
    background:rgba(252,251,248,.97)!important;
  }

  .brand{
    flex:1 1 auto!important;
    min-width:0!important;
    height:56px!important;
    min-height:56px!important;
    gap:9px!important;
    overflow:hidden!important;
  }

  .logo.small{
    width:42px!important;
    min-width:42px!important;
    height:49px!important;
    flex:0 0 42px!important;
  }

  .brand>div:last-child{
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .brand b::before{
    font-size:16px!important;
    line-height:18px!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
  }

  .brand span::before{
    content:"Μικροί Ήρωες"!important;
    margin-top:4px!important;
    font-size:8px!important;
    line-height:9px!important;
    letter-spacing:.12em!important;
    white-space:nowrap!important;
  }

  .user{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    margin:0!important;
    gap:0!important;
  }
  .user span{
    display:none!important;
  }
  .user .ghost{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    font-size:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .user .ghost::before{
    content:"⎋";
    font-size:18px;
    line-height:1;
    color:var(--navy);
  }

  /* ---------- Main content ---------- */
  .container{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:22px 16px calc(98px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }

  .page-head{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
    margin-bottom:22px!important;
  }
  .page-head>div{
    width:100%!important;
    min-width:0!important;
  }
  .page-head h1{
    margin:0 0 7px!important;
    font-size:30px!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    overflow-wrap:anywhere;
  }
  .page-head h2{
    font-size:27px!important;
    line-height:1.12!important;
    overflow-wrap:anywhere;
  }
  .page-head p{
    margin:0!important;
    font-size:15px!important;
    line-height:1.55!important;
  }
  .page-head>.btn{
    align-self:flex-start!important;
    width:auto!important;
    max-width:100%!important;
  }

  /* ---------- Cards / panels ---------- */
  .panel,
  .patient-hero,
  .stat,
  .clinical-card,
  .list-card,
  .patient-rem-card{
    max-width:100%!important;
  }
  .panel{
    width:100%!important;
    padding:20px!important;
    border-radius:22px!important;
    margin-bottom:18px!important;
    overflow:hidden;
  }
  .panel h3{
    font-size:19px!important;
    line-height:1.25!important;
  }

  /* ---------- Dashboard ---------- */
  .stats{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px!important;
  }
  .stat{
    min-width:0!important;
    min-height:128px!important;
    padding:17px!important;
    border-radius:20px!important;
  }
  .stat span{
    font-size:11px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere;
  }
  .stat strong{
    font-size:25px!important;
    line-height:1.05!important;
    overflow-wrap:anywhere;
  }

  /* ---------- Search ---------- */
  .search-row{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  .search-row input,
  .search-row .btn{
    width:100%!important;
    max-width:100%!important;
  }

  input,select,textarea{
    max-width:100%!important;
    font-size:16px!important; /* prevents iOS auto-zoom */
  }

  /* ---------- Patient hero ---------- */
  .patient-hero{
    width:100%!important;
    padding:21px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
    overflow:hidden!important;
  }
  .patient-hero>div{
    min-width:0!important;
  }
  .patient-hero h1{
    margin:10px 0 8px!important;
    font-size:29px!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    overflow-wrap:anywhere;
  }
  .patient-meta{
    font-size:12px!important;
    line-height:1.55!important;
    overflow-wrap:anywhere;
  }
  .action-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;
  }
  .action-row .btn{
    width:100%!important;
    min-width:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  /* ---------- Patient tabs ----------
     horizontal scrolling instead of clipping / stacking */
  .tabs{
    width:calc(100% + 32px)!important;
    max-width:none!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    padding:2px 16px 8px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    min-height:44px!important;
    padding:0 16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    font-size:13px!important;
    scroll-snap-align:start;
  }

  /* ---------- Generic grids ---------- */
  .grid2,.grid3,.list-grid,.form-grid{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .span2{grid-column:auto!important}

  /* ---------- Key/value rows ---------- */
  .kv{
    gap:12px!important;
  }
  .kv span{
    min-width:0!important;
    font-size:11px!important;
  }
  .kv strong{
    min-width:0!important;
    max-width:58%!important;
    font-size:11px!important;
    overflow-wrap:anywhere!important;
  }

  /* ---------- Tables ----------
     table scroll is contained INSIDE its panel; page never scrolls sideways */
  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:14px!important;
  }
  .table-wrap table{
    width:max-content!important;
    min-width:650px!important;
    max-width:none!important;
  }
  .table-wrap th,
  .table-wrap td{
    white-space:nowrap!important;
  }

  /* ---------- Vaccine plan ---------- */
  .vax-plan-grid{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .vax-plan-card{
    width:100%!important;
  }
  .vax-panel-head,
  .vax-history-head{
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .vax-alert-row{
    width:100%!important;
    grid-template-columns:minmax(0,1fr) 22px!important;
    gap:9px!important;
  }
  .vax-alert-date{
    grid-column:1/-1!important;
  }
  .vax-alert-main{
    min-width:0!important;
  }

  /* ---------- Reminder center ---------- */
  .reminder-center-panel{
    overflow:hidden!important;
  }
  .rem-center-head{
    align-items:center!important;
  }
  .rem-home-row{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;
    padding:14px!important;
  }
  .rem-home-when,
  .rem-home-person,
  .rem-home-actions{
    width:100%!important;
    min-width:0!important;
  }
  .rem-preview{
    width:100%!important;
    max-width:100%!important;
  }
  .rem-home-actions,
  .patient-rem-actions{
    justify-content:flex-start!important;
  }
  .patient-rem-card{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .patient-rem-message{
    overflow-wrap:anywhere!important;
  }

  /* ---------- Settings ---------- */
  .settings-kv{
    width:100%!important;
    max-width:100%!important;
  }
  .settings-kv code{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-all!important;
  }
  .settings-actions{
    max-width:100%!important;
  }
  .settings-actions .btn{
    max-width:100%!important;
    white-space:normal!important;
  }

  /* ---------- Modal ---------- */
  .modal-card{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 36px)!important;
    margin:18px auto!important;
    padding:22px 18px!important;
    border-radius:24px!important;
  }

  /* ---------- Fixed bottom navigation ---------- */
  .mobile-nav{
    display:flex!important;
    width:100%!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:70px!important;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom))!important;
    align-items:center!important;
    background:rgba(252,251,248,.97)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  .mobile-nav button{
    min-width:0!important;
    min-height:54px!important;
    padding:4px 2px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:19px!important;
    line-height:1!important;
  }
  .mobile-nav span{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

/* iPhone-sized refinement */
@media (max-width:430px){
  .container{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .tabs{
    width:calc(100% + 28px)!important;
    margin-left:-14px!important;
    margin-right:-14px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .brand b::before{
    font-size:15px!important;
  }
  .brand span::before{
    font-size:7.5px!important;
  }
  .page-head h1{
    font-size:28px!important;
  }
  .patient-hero h1{
    font-size:27px!important;
  }
  .action-row .btn{
    font-size:11px!important;
  }
}


/* =====================================================================
   V1.7.2 — PREMIUM MOBILE BOTTOM DOCK
   CSS ONLY
   ===================================================================== */

@media (max-width:820px){

  .mobile-nav{
    left:12px!important;
    right:12px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-height:68px!important;
    padding:7px 8px!important;
    border:1px solid rgba(31,78,122,.10)!important;
    border-radius:24px!important;
    background:rgba(255,253,249,.96)!important;
    box-shadow:
      0 14px 36px rgba(31,78,122,.12),
      0 2px 8px rgba(31,78,122,.05)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    overflow:visible!important;
  }

  .mobile-nav button{
    position:relative!important;
    flex:1 1 25%!important;
    min-width:0!important;
    min-height:54px!important;
    margin:0 2px!important;
    padding:7px 2px 5px!important;
    border:0!important;
    border-radius:17px!important;
    background:transparent!important;
    color:#70817d!important;
    box-shadow:none!important;
    font-size:0!important; /* hides old glyphs */
    line-height:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    transition:background .16s ease,color .16s ease,transform .16s ease!important;
  }

  .mobile-nav button::before{
    content:"";
    width:22px;
    height:22px;
    display:block;
    background-repeat:no-repeat;
    background-position:center;
    background-size:22px 22px;
    opacity:.86;
  }

  /* Home icon */
  .mobile-nav button[data-view="home"]::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.8 10.8 12 4l8.2 6.8v8a1.4 1.4 0 0 1-1.4 1.4H5.2a1.4 1.4 0 0 1-1.4-1.4v-8Z' stroke='%2370817d' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 20.2v-5.8h6v5.8' stroke='%2370817d' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* Patients icon */
  .mobile-nav button[data-view="patients"]::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='8' r='3.1' stroke='%2370817d' stroke-width='1.8'/%3E%3Cpath d='M4.8 18.5c.5-3 2.3-4.7 5.2-4.7 2.8 0 4.6 1.7 5.1 4.7' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M17 8.2h4M19 6.2v4' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* Settings icon */
  .mobile-nav button[data-view="settings"]::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' stroke='%2370817d' stroke-width='1.8'/%3E%3Cpath d='M12 2.8v2M12 19.2v2M21.2 12h-2M4.8 12h-2M18.5 5.5 17.1 7M6.9 17l-1.4 1.5M18.5 18.5 17 17.1M6.9 7 5.5 5.5' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* New patient icon */
  .mobile-nav #newPatientMobile::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='8' r='3' stroke='%2370817d' stroke-width='1.8'/%3E%3Cpath d='M4.2 18.2c.5-2.8 2.1-4.3 4.8-4.3 1.5 0 2.7.4 3.5 1.2' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M18 12v7M14.5 15.5h7' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .mobile-nav button span{
    margin:0!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:750!important;
    color:inherit!important;
    white-space:nowrap!important;
    letter-spacing:0!important;
  }

  .mobile-nav button.active{
    color:var(--blue)!important;
    background:linear-gradient(145deg,#f4f8fb,#f5f1fa)!important;
    box-shadow:inset 0 0 0 1px rgba(47,111,168,.08)!important;
  }

  .mobile-nav button.active::before{
    filter:none!important;
    opacity:1!important;
  }

  /* active icons recolored to site blue */
  .mobile-nav button[data-view="home"].active::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.8 10.8 12 4l8.2 6.8v8a1.4 1.4 0 0 1-1.4 1.4H5.2a1.4 1.4 0 0 1-1.4-1.4v-8Z' stroke='%232F6FA8' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 20.2v-5.8h6v5.8' stroke='%232F6FA8' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .mobile-nav button[data-view="patients"].active::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='8' r='3.1' stroke='%232F6FA8' stroke-width='1.9'/%3E%3Cpath d='M4.8 18.5c.5-3 2.3-4.7 5.2-4.7 2.8 0 4.6 1.7 5.1 4.7' stroke='%232F6FA8' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M17 8.2h4M19 6.2v4' stroke='%232F6FA8' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .mobile-nav button[data-view="settings"].active::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' stroke='%232F6FA8' stroke-width='1.9'/%3E%3Cpath d='M12 2.8v2M12 19.2v2M21.2 12h-2M4.8 12h-2M18.5 5.5 17.1 7M6.9 17l-1.4 1.5M18.5 18.5 17 17.1M6.9 7 5.5 5.5' stroke='%232F6FA8' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .mobile-nav button:active{
    transform:scale(.96)!important;
  }

  /* compensate for floating dock */
  .container{
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:390px){
  .mobile-nav{
    left:8px!important;
    right:8px!important;
  }
  .mobile-nav button{
    margin:0 1px!important;
  }
  .mobile-nav button span{
    font-size:9px!important;
  }
}


/* =====================================================================
   V1.8.0 — SMART CALENDAR / DIGITAL SECRETARY
   ===================================================================== */
.day-summary-panel{
  background:
    radial-gradient(circle at 94% 8%,rgba(238,233,246,.55),transparent 24%),
    radial-gradient(circle at 8% 92%,rgba(237,243,236,.70),transparent 28%),
    #fffdf9!important;
}
.day-summary-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px
}
.day-summary-head h3{margin:0 0 4px!important}
.day-summary-head p{margin:0;color:var(--muted);font-size:12px}
.today-agenda{display:flex;flex-direction:column;gap:8px}
.today-agenda-row{
  width:100%;display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:11px 13px;border:1px solid #e2e7e1;border-radius:16px;
  background:#fff;text-align:left;cursor:pointer;color:var(--text)
}
.today-agenda-row.kind-clinic{border-left:4px solid #6ca6d8}
.today-agenda-row.kind-personal{border-left:4px solid #c6b7dc;background:#faf8fd}
.today-agenda-row.kind-task{border-left:4px solid #d9aeb7;background:#fff8fa}
.today-agenda-row.status-cancelled,.today-agenda-row.status-noshow{opacity:.55}
.agenda-time{font-weight:900;color:var(--blue);font-size:12px}
.agenda-main{min-width:0}
.agenda-main strong{display:block;color:var(--navy);font-size:13px}
.agenda-main small{display:block;color:var(--muted);font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-status{font-size:9px;font-weight:800;color:var(--muted);white-space:nowrap}
.next-slot-card{
  margin-top:14px;padding:13px 15px;border:1px dashed #d8e3db;border-radius:17px;
  background:linear-gradient(145deg,#f4f8f3,#faf7fd);
  display:flex;align-items:center;gap:11px
}
.next-slot-card span{font-size:10px;color:var(--muted);font-weight:750}
.next-slot-card strong{font-size:12px;color:var(--navy);margin-right:auto}

.calendar-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:4px 0 16px
}
.calendar-title span{display:block;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.calendar-title h1{margin:4px 0 0;color:#163d5f;font-size:36px;line-height:1;letter-spacing:-.04em}
.calendar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cal-icon-btn,.cal-today-btn{
  min-height:42px;border:1px solid #dfe5df;background:#fff;border-radius:999px;color:var(--navy);
  font-weight:800;cursor:pointer
}
.cal-icon-btn{width:42px;font-size:22px}
.cal-today-btn{padding:0 15px;font-size:12px}
.calendar-mode-tabs{
  display:flex;gap:8px;margin-bottom:18px;padding-bottom:3px;overflow-x:auto
}
.calendar-mode-tabs button{
  flex:0 0 auto;min-height:38px;padding:0 15px;border:1px solid #dfe5df;border-radius:999px;
  background:#fff;color:#536c7d;font-weight:800;cursor:pointer
}
.calendar-mode-tabs button.active{background:var(--lilac);color:var(--navy);border-color:#ded5eb}

.calendar-day-head{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-bottom:16px;padding:18px 20px;border:1px solid #e2e7e1;border-radius:22px;
  background:linear-gradient(145deg,#fffdf9,#f5f8f4)
}
.calendar-day-head>div:first-child{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px}
.calendar-day-head span{grid-column:1/-1;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.1em}
.calendar-day-head strong{font-size:42px;line-height:1;color:var(--navy)}
.calendar-day-head small{color:var(--muted);font-size:12px}
.calendar-day-meta{text-align:right}
.calendar-day-meta span{display:block;color:var(--muted);font-size:10px;letter-spacing:0}
.calendar-day-meta strong{display:block;margin-top:4px;color:var(--navy);font-size:13px}

.calendar-tasks{
  margin-bottom:15px;padding:17px;border:1px solid #eadfe2;border-radius:20px;background:#fff8fa
}
.calendar-tasks h3{margin:0 0 10px;color:#8a5f69;font-size:14px}
.calendar-timeline{
  border:1px solid #e3e7e2;border-radius:22px;background:#fffdf9;overflow:hidden
}
.calendar-slot{
  display:grid;grid-template-columns:72px minmax(0,1fr);min-height:54px;border-bottom:1px solid #eceeea
}
.calendar-slot:last-child{border-bottom:0}
.calendar-slot.occupied{min-height:34px;background:#fafbf9}
.slot-time{padding:12px 10px;text-align:center;color:#71817c;font-size:11px;font-weight:800;border-right:1px solid #eceeea}
.slot-content{padding:5px 8px;min-width:0}
.empty-slot{
  width:100%;height:100%;min-height:42px;border:0;border-radius:13px;background:transparent;color:#9aa6a1;
  text-align:left;padding:0 12px;font-size:11px;cursor:pointer
}
.empty-slot:hover{background:#f3f8f3;color:var(--blue)}

.appointment-card{
  position:relative;width:100%;display:flex;border:1px solid #dfe7e2;border-radius:15px;background:#fff;
  overflow:hidden;cursor:pointer;box-shadow:0 5px 14px rgba(31,78,122,.035)
}
.appointment-accent{width:5px;flex:0 0 5px;background:#6ca6d8}
.appointment-card.kind-personal .appointment-accent{background:#c6b7dc}
.appointment-card.kind-task .appointment-accent{background:#d9aeb7}
.appointment-card.kind-personal{background:#faf8fd}
.appointment-card.kind-task{background:#fff8fa}
.appointment-card.status-cancelled,.appointment-card.status-noshow{opacity:.55}
.appointment-body{flex:1;min-width:0;padding:9px 11px}
.appointment-top{display:flex;justify-content:space-between;gap:10px}
.appointment-top strong{color:var(--navy);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appointment-top span{color:var(--blue);font-size:10px;font-weight:850}
.appointment-reason{margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appointment-status{margin-top:5px;color:#667a73;font-size:9px;font-weight:800}

.week-range{margin-bottom:11px;color:var(--muted);font-size:12px}
.calendar-week-grid{
  display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));gap:9px;overflow-x:auto;padding-bottom:8px
}
.week-day{
  min-height:420px;border:1px solid #e3e7e2;border-radius:19px;background:#fffdf9;overflow:hidden
}
.week-day.today{border-color:#cbdce7;box-shadow:0 8px 20px rgba(31,78,122,.06)}
.week-day-head{
  width:100%;border:0;border-bottom:1px solid #e7eae5;background:#f8faf7;padding:12px;text-align:center;cursor:pointer
}
.week-day-head span{display:block;color:var(--muted);font-size:9px;font-weight:900}
.week-day-head strong{display:block;margin-top:3px;color:var(--navy);font-size:23px}
.week-day-events{padding:8px;display:flex;flex-direction:column;gap:7px}
.week-event{
  width:100%;border:1px solid #e1e7e2;border-left:4px solid #6ca6d8;border-radius:12px;background:#fff;
  padding:8px;text-align:left;cursor:pointer
}
.week-event.kind-personal{border-left-color:#c6b7dc;background:#faf8fd}
.week-event.kind-task{border-left-color:#d9aeb7;background:#fff8fa}
.week-event.status-cancelled,.week-event.status-noshow{opacity:.5}
.week-event b{display:block;color:var(--blue);font-size:9px}
.week-event span{display:block;margin-top:2px;color:var(--navy);font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-empty{width:100%;min-height:38px;border:1px dashed #dfe5df;border-radius:11px;background:transparent;color:#9aa6a1;font-size:10px;cursor:pointer}

.appointment-patient-picker{position:relative}
.patient-pick-results{
  position:relative;z-index:3;margin-top:7px;display:flex;flex-direction:column;gap:5px
}
.patient-pick{
  width:100%;padding:10px 12px;border:1px solid #dfe7e2;border-radius:13px;background:#fff;text-align:left;cursor:pointer
}
.patient-pick strong{display:block;color:var(--navy);font-size:12px}
.patient-pick span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.patient-pick-empty{padding:10px;color:var(--muted);font-size:11px}
.selected-patient{
  margin-top:7px;padding:10px 12px;border:1px solid #dde7df;border-radius:13px;background:#f4f8f3
}
.selected-patient strong{display:block;color:var(--navy);font-size:12px}
.selected-patient span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.appointment-reminder-check{
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;
  padding:11px 12px;border:1px solid #e1e7e1;border-radius:13px;background:#f7f4fb;font-size:11px
}
.appointment-reminder-check input{width:auto!important}
.appointment-modal-actions{flex-wrap:wrap}
.calendar-working-days{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;border:1px solid #e2e7e1;border-radius:14px;background:#f8faf7
}
.calendar-working-days>span{width:100%;color:#35566e;font-size:11px;font-weight:800}
.calendar-working-days label{display:flex;flex-direction:row;align-items:center;gap:4px;font-size:11px}
.calendar-working-days input{width:auto!important}

/* V1.8 mobile dock = 5 equal items */
@media(max-width:820px){
  .mobile-nav button{
    flex:1 1 20%!important;
    margin:0 1px!important;
  }
  .mobile-nav button span{font-size:9px!important}
  .mobile-nav button[data-view="calendar"]::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' stroke='%2370817d' stroke-width='1.8'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M8 14h3M14 14h2M8 17h2' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  }
  .mobile-nav button[data-view="calendar"].active::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' stroke='%232F6FA8' stroke-width='1.9'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18' stroke='%232F6FA8' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M8 14h3M14 14h2M8 17h2' stroke='%232F6FA8' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  }
  #newAppointmentMobile::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%2370817d' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  }

  .calendar-toolbar{flex-direction:column;align-items:stretch}
  .calendar-title h1{font-size:31px}
  .calendar-actions{justify-content:flex-start}
  .calendar-actions .btn{width:100%;order:2}
  .calendar-day-head{align-items:flex-start}
  .calendar-day-meta{max-width:52%}
  .calendar-slot{grid-template-columns:58px minmax(0,1fr)}
  .slot-time{padding-left:5px;padding-right:5px}
  .today-agenda-row{grid-template-columns:60px minmax(0,1fr)}
  .agenda-status{grid-column:2;text-align:left}
  .next-slot-card{flex-wrap:wrap}
  .next-slot-card strong{width:100%;order:2}
  .next-slot-card .mini-action{order:3}
  .calendar-week-grid{grid-template-columns:repeat(7,145px)}
  .appointment-top strong{font-size:11px}
  .calendar-working-days{gap:8px}
}


/* =====================================================================
   V1.8.2 — iOS PATIENT SEARCH DROPDOWN FIX
   ===================================================================== */
.appointment-patient-picker{
  position:relative;
  overflow:visible!important;
}
.patient-pick-results{
  width:100%;
  max-height:260px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border-radius:14px;
}
.patient-pick-results:not(:empty){
  margin-top:8px;
  padding:6px;
  border:1px solid #dfe7e2;
  background:#fffdf9;
  box-shadow:0 14px 34px rgba(31,78,122,.12);
}
.patient-pick{
  display:block!important;
  min-height:48px;
  margin:0 0 5px;
}
.patient-pick:last-child{margin-bottom:0}

@media(max-width:820px){
  .appointment-patient-picker{
    z-index:20;
  }
  .patient-pick-results{
    max-height:220px;
  }
  .patient-pick{
    min-height:54px;
    padding:12px 13px!important;
  }
  .patient-pick strong{
    font-size:13px!important;
  }
  .patient-pick span{
    font-size:11px!important;
    line-height:1.45!important;
  }
}


/* =====================================================================
   V1.9.0 — CLINIC FLOW & REVENUE DASHBOARD
   ===================================================================== */
.clinic-dashboard-panel{
  background:
    radial-gradient(circle at 95% 8%,rgba(250,238,226,.58),transparent 24%),
    radial-gradient(circle at 5% 95%,rgba(237,243,236,.60),transparent 26%),
    #fffdf9!important;
}
.clinic-dash-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px
}
.clinic-dash-head h3{margin:0 0 4px!important}
.clinic-dash-head p{margin:0;color:var(--muted);font-size:12px}
.clinic-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.clinic-metric{
  padding:15px;border:1px solid #e2e7e1;border-radius:18px;background:#fff;
  box-shadow:0 6px 16px rgba(31,78,122,.035)
}
.clinic-metric.today{background:linear-gradient(145deg,#fff,#f3f8f3)}
.clinic-metric.month{background:linear-gradient(145deg,#fff,#fff7f8)}
.clinic-metric.avg{background:linear-gradient(145deg,#fff,#f7f4fb)}
.clinic-metric.year{background:linear-gradient(145deg,#fff,#fff8f1)}
.clinic-metric span{display:block;color:var(--muted);font-size:10px;font-weight:800}
.clinic-metric strong{display:block;margin-top:7px;color:var(--navy);font-size:16px}
.clinic-metric b{display:block;margin-top:5px;color:var(--blue);font-size:12px}

.revenue-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.revenue-summary-grid>div{
  padding:14px;border:1px solid #e2e7e1;border-radius:17px;background:#fffdf9
}
.revenue-summary-grid span{display:block;color:var(--muted);font-size:10px}
.revenue-summary-grid strong{display:block;margin-top:6px;color:var(--navy);font-size:20px}
.revenue-summary-grid small{display:block;margin-top:4px;color:var(--muted);font-size:9px}
.revenue-payments{padding:15px;border:1px solid #e2e7e1;border-radius:18px;background:#f8faf7;margin-bottom:14px}
.revenue-payments h3,.revenue-recent h3{margin:0 0 10px;color:var(--navy);font-size:14px}
.payment-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.payment-bars>div{padding:10px 12px;border-radius:13px;background:#fff}
.payment-bars span{display:block;color:var(--muted);font-size:9px}
.payment-bars strong{display:block;margin-top:4px;color:var(--navy);font-size:13px}
.revenue-year-strip{
  display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid #e5e0ec;border-radius:16px;background:#f7f4fb;margin-bottom:14px
}
.revenue-year-strip span{color:var(--muted);font-size:10px}
.revenue-year-strip strong{color:#675783;font-size:18px;margin-left:auto}
.revenue-year-strip small{color:var(--muted);font-size:9px}
.revenue-recent{margin-top:12px}
.revenue-row{
  width:100%;display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;
  padding:9px 10px;border:0;border-bottom:1px solid #eceeea;background:transparent;text-align:left;cursor:pointer
}
.revenue-row span{color:var(--muted);font-size:9px}
.revenue-row strong{color:var(--navy);font-size:11px}
.revenue-row b{color:var(--blue);font-size:11px}

.appointment-flow-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;
  border:1px solid #dce6de;border-radius:15px;background:linear-gradient(145deg,#f4f8f3,#fff8fa)
}
.appointment-flow-bar .btn{min-height:38px!important;padding:0 14px!important;font-size:11px!important}
.completion-chip{
  display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;
  background:#edf4ee;color:#55705e;font-size:11px;font-weight:850
}
.completion-patient{
  margin-bottom:15px;padding:13px 14px;border:1px solid #e2e7e1;border-radius:16px;background:#f7f4fb
}
.completion-patient strong{display:block;color:var(--navy)}
.completion-patient span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.completion-followup{
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;
  padding:11px 12px;border:1px solid #e2e7e1;border-radius:13px;background:#f4f8f3
}
.completion-followup input{width:auto!important}

@media(max-width:980px){
  .clinic-metric-grid,.revenue-summary-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .clinic-dash-head{flex-direction:column}
  .clinic-metric-grid{grid-template-columns:1fr 1fr}
  .clinic-metric{min-width:0}
  .revenue-summary-grid{grid-template-columns:1fr 1fr}
  .payment-bars{grid-template-columns:1fr}
  .revenue-year-strip{flex-wrap:wrap}
  .revenue-year-strip strong{margin-left:0;width:100%}
  .revenue-row{grid-template-columns:72px 1fr auto}
  .appointment-flow-bar{align-items:stretch}
  .appointment-flow-bar .btn{flex:1 1 calc(50% - 8px)}
}


/* V1.9.1 — Focus Mode */
.focus-home-head{align-items:flex-end}
.focus-home-actions{display:flex;gap:9px;flex-wrap:wrap}
.focus-stats .stat:nth-child(2){background:linear-gradient(145deg,#fffdf9,#f3f8f3)!important}
.focus-stats .stat:nth-child(3){background:linear-gradient(145deg,#fffdf9,#fff8f1)!important}
.focus-stats .stat:nth-child(4){background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important}
@media(max-width:820px){
  .focus-home-head{align-items:stretch!important}
  .focus-home-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .focus-home-actions .btn{width:100%!important;min-width:0!important;padding-left:10px!important;padding-right:10px!important}
}


/* =====================================================================
   V1.9.2 — QUICK NEW PATIENT BOOKING
   ===================================================================== */
.quick-patient-intro{
  margin:0 0 15px;
  padding:12px 14px;
  border:1px solid #e1e7e1;
  border-radius:15px;
  background:linear-gradient(145deg,#f4f8f3,#fff7fa);
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.quick-patient-btn{
  background:linear-gradient(145deg,#f7f4fb,#fff)!important;
  border-color:#ded5eb!important;
  color:#675783!important;
}
.selected-patient strong{
  color:var(--navy);
}
.appointment-patient-picker .selected-patient{
  min-height:48px;
}
@media(max-width:820px){
  .quick-patient-intro{font-size:12px}
  .quick-patient-btn{flex-basis:100%!important}
}

.patients-actions{display:flex;gap:9px;flex-wrap:wrap}
.bulk-import-help{margin:0 0 14px;padding:12px 14px;border:1px solid #e2e7e1;border-radius:15px;background:linear-gradient(145deg,#f4f8f3,#fff8fa);color:var(--muted);font-size:11px;line-height:1.55}
.bulk-textarea-label{display:flex;flex-direction:column;gap:7px;color:#35566e;font-size:11px;font-weight:800}
#bulkPatientText{min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5}
.bulk-import-actions{margin-top:14px;justify-content:flex-end}
.bulk-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.bulk-summary>div{padding:12px;border:1px solid #e2e7e1;border-radius:15px;background:#fffdf9}
.bulk-summary span{display:block;color:var(--muted);font-size:9px}.bulk-summary strong{display:block;margin-top:4px;color:var(--navy);font-size:18px}
.bulk-preview-wrap{overflow:auto;max-height:55vh;border:1px solid #e2e7e1;border-radius:16px}
.bulk-preview-table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}
.bulk-preview-table th{position:sticky;top:0;background:#f7f9f6;color:#516c7b;font-size:10px;text-align:left;padding:9px}
.bulk-preview-table td{padding:7px 8px;border-bottom:1px solid #edf0ec}
.bulk-preview-table td input:not([type="checkbox"]){width:100%;min-height:36px;padding:6px 8px;border:1px solid #dfe5df;border-radius:9px;font-size:11px}
.bulk-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}
.bulk-tag.ok{background:#edf4ee;color:#55705e}.bulk-tag.dup{background:#fff1f1;color:#9a5f5f}.bulk-tag.bad{background:#fff6e8;color:#9a7546}
.bulk-import-note{margin:10px 0 0;color:var(--muted);font-size:10px}
@media(max-width:820px){.patients-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.patients-actions .btn{width:100%!important}.bulk-summary{grid-template-columns:1fr 1fr}#bulkPatientText{font-size:16px}}


/* =====================================================================
   V1.11.0 — DIGITAL VACCINE BOOKLET
   ===================================================================== */
.vaccine-booklet-panel{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 96% 5%,rgba(238,233,246,.42),transparent 22%),
    radial-gradient(circle at 4% 95%,rgba(237,243,236,.52),transparent 23%),
    #fffdf9!important;
}
.vaccine-booklet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:15px
}
.vaccine-booklet-head h3{margin:0 0 4px!important}
.vaccine-booklet-head p{margin:0;color:var(--muted);font-size:11px}
.vaccine-booklet-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #dfe6e1;border-radius:18px;background:#fff
}
.vaccine-booklet-table{
  width:100%;min-width:820px;border-collapse:separate;border-spacing:0;table-layout:fixed
}
.vaccine-booklet-table th,.vaccine-booklet-table td{
  border-right:1px solid #dfe6e1;border-bottom:1px solid #dfe6e1
}
.vaccine-booklet-table tr:last-child th,.vaccine-booklet-table tr:last-child td{border-bottom:0}
.vaccine-booklet-table th:last-child,.vaccine-booklet-table td:last-child{border-right:0}
.vaccine-booklet-table thead th{
  height:44px;background:#f5f7f4;color:#5c716e;font-size:10px;font-weight:900;letter-spacing:.08em;text-align:center
}
.vaccine-booklet-table .vaccine-name-col{
  position:sticky;left:0;z-index:3;width:250px;min-width:250px;padding:10px 13px;text-align:left;background:#fafbf8
}
.vaccine-booklet-table thead .vaccine-name-col{z-index:5}
.vaccine-name-col strong{display:block;color:var(--navy);font-size:12px;letter-spacing:.04em}
.vaccine-name-col span{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-weight:500;line-height:1.25}
.vaccine-cell{height:68px;padding:5px;background:#fff}
.vaccine-cell button{
  width:100%;height:100%;min-height:55px;border:0;border-radius:12px;cursor:pointer;padding:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
}
.vaccine-cell.empty button{background:#fbfcfa;color:#a3ada8;border:1px dashed #dce4de}
.vaccine-cell.empty button:hover{background:#f2f7f1;color:var(--blue)}
.vaccine-cell.empty button span{font-size:19px;font-weight:500}
.vaccine-cell.filled button{
  background:linear-gradient(145deg,#eef6ef,#f4f8fb);border:1px solid #d5e4da;
  box-shadow:0 4px 12px rgba(31,78,122,.04)
}
.vaccine-cell.filled button strong{color:var(--navy);font-size:12px;white-space:nowrap}
.vaccine-cell.filled button small{display:block;margin-top:4px;color:#667b76;font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vaccine-cell.disabled{background:#f0f1ef}
.vaccine-cell.disabled>span{display:flex;align-items:center;justify-content:center;height:100%;color:#c1c6c2;font-size:13px}
.vaccine-booklet-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:11px;color:var(--muted);font-size:9px}
.vaccine-booklet-legend span{display:flex;align-items:center;gap:5px}
.vaccine-booklet-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.filled-dot{background:#d9eadc;border:1px solid #bdd3c1}
.empty-dot{background:#fff;border:1px dashed #cfd9d1}
.disabled-dot{background:#e8eae8}

@media(max-width:820px){
  .vaccine-booklet-head{flex-direction:column;align-items:stretch}
  .vaccine-booklet-head .btn{align-self:flex-start}
  .vaccine-booklet-wrap{
    width:calc(100% + 6px);
    margin-right:-6px;
  }
  .vaccine-booklet-table{min-width:760px}
  .vaccine-booklet-table .vaccine-name-col{width:175px;min-width:175px;padding:8px 9px}
  .vaccine-name-col strong{font-size:11px}
  .vaccine-name-col span{font-size:8px}
  .vaccine-cell{height:64px}
  .vaccine-cell.filled button strong{font-size:11px}
}


/* V1.11.1 — combination-first vaccine booklet */
.vaccine-booklet-table tr.combo-row .vaccine-name-col{
  background:linear-gradient(145deg,#edf4fb,#f5f9fc)!important;
}
.vaccine-booklet-table tr.combo-row td{
  background:#fbfdff;
}
.combo-badge{
  display:inline-flex;
  margin-left:8px;
  padding:2px 6px;
  border-radius:999px;
  background:#dcecf7;
  color:#2f6fa8;
  font-style:normal;
  font-size:7px;
  font-weight:900;
  vertical-align:middle;
  letter-spacing:.05em;
}
.vaccine-booklet-table tr.secondary-row{
  opacity:.72;
}
.vaccine-booklet-table tr.secondary-row .vaccine-name-col{
  background:#f7f7f5;
}
.combo-info{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid #d5e4ee;
  border-radius:15px;
  background:linear-gradient(145deg,#eef6fb,#f8fbfd);
}
.combo-info strong{display:block;color:var(--navy);font-size:12px}
.combo-info span{display:block;margin-top:4px;color:var(--blue);font-size:11px;font-weight:800}
@media(max-width:820px){
  .combo-badge{display:block;width:max-content;margin:5px 0 0}
}


/* V1.11.2 — primary vaccine flow */
.vaccine-booklet-table tr.primary-row .vaccine-name-col{
  background:linear-gradient(145deg,#edf4fb,#f7fbfd)!important;
}
.vaccine-booklet-table tr.primary-row td{
  background:#fbfdff;
}
.vaccine-booklet-table tr.primary-row .vaccine-name-col strong{
  font-size:13px;
}
.vaccine-cell.empty button small{
  margin-top:3px;
  color:#7d8c87;
  font-size:8px;
  font-weight:800;
}


/* V1.11.3 — Vaccine brand dropdowns */
#vbookBrand{
  font-weight:800;
  color:var(--navy);
}
#vbookBrandCustom.hidden{display:none!important}
.vaccine-cell.filled button small{
  text-transform:uppercase;
}


/* =====================================================================
   V1.12.0 — MINIMAL HOME / MONTHLY CLINIC TAB
   ===================================================================== */
.home-minimal-stats{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.clinic-month-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.clinic-month-toolbar>strong{
  min-width:220px;
  text-align:center;
  color:var(--navy);
  font-size:18px;
  text-transform:capitalize;
}
.monthly-clinic-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.monthly-card{
  padding:17px;
  border:1px solid #e2e7e1;
  border-radius:19px;
  background:#fffdf9;
}
.monthly-card.total{
  background:linear-gradient(145deg,#f7f4fb,#fffdf9);
}
.monthly-card span{
  display:block;color:var(--muted);font-size:10px;font-weight:800
}
.monthly-card strong{
  display:block;margin-top:7px;color:var(--navy);font-size:24px
}
.monthly-day-list{display:flex;flex-direction:column}
.monthly-day-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:12px;
  align-items:center;
  padding:11px 2px;
  border-bottom:1px solid #eceeea;
}
.monthly-day-row:last-child{border-bottom:0}
.monthly-day-row span{color:var(--muted);font-size:10px}
.monthly-day-row strong{color:var(--navy);font-size:11px}
.monthly-day-row b{color:var(--blue);font-size:12px}

#apptReasonOtherWrap.hidden{display:none!important}

@media(max-width:820px){
  .home-minimal-stats{grid-template-columns:1fr 1fr!important}
  .monthly-clinic-grid{grid-template-columns:1fr 1fr}
  .clinic-month-toolbar{flex-wrap:wrap}
  .clinic-month-toolbar>strong{min-width:0;flex:1}
  .clinic-month-toolbar .cal-today-btn{width:100%}
  .monthly-day-row{grid-template-columns:92px 1fr auto}
  .mobile-nav button{flex:1 1 20%!important}
  .mobile-nav button[data-view="clinic"]::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V10M10 19V5M16 19v-7M22 19V8' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  }
  .mobile-nav button[data-view="clinic"].active::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V10M10 19V5M16 19v-7M22 19V8' stroke='%232F6FA8' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  }
}


/* =====================================================================
   V1.12.1 — COMPACT APPOINTMENT UI
   ===================================================================== */
.appointment-form{
  row-gap:10px!important;
}
.appointment-form label{
  gap:5px!important;
}
.appointment-form input,
.appointment-form select,
.appointment-form textarea{
  min-height:42px!important;
}
.appointment-form textarea{
  min-height:64px!important;
}
.compact-selected-patient{
  margin-top:5px!important;
  padding:7px 10px!important;
  min-height:0!important;
  background:#f7f9f6!important;
}
.compact-selected-patient span{
  margin:0!important;
  font-size:9px!important;
  line-height:1.35!important;
}
.patient-pick-results:empty{
  display:none!important;
}
.appointment-patient-picker{
  margin-bottom:0!important;
}
.appointment-flow-bar{
  padding:9px!important;
  gap:6px!important;
}
.appointment-modal-actions{
  margin-top:2px!important;
}
#apptDate{
  letter-spacing:.02em;
}

@media(max-width:820px){
  .appointment-form{row-gap:8px!important}
  .appointment-form input,
  .appointment-form select{min-height:44px!important}
  .compact-selected-patient span{font-size:10px!important}
}

.tomy-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:13px 15px;border:1px solid #e5dce8;border-radius:17px;background:linear-gradient(145deg,#f7f4fb,#fff8fa)}
.tomy-banner strong{display:block;color:#675783;font-size:13px}.tomy-banner span{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.tomy-badge{margin:0!important;padding:5px 9px;border-radius:999px;background:#eee7f4;color:#745e84!important;font-size:8px!important;font-weight:900!important;letter-spacing:.06em}
.tomy-slot{min-height:42px;display:flex;align-items:center;padding:0 12px;color:#9a8ca2;font-size:9px;font-weight:900;letter-spacing:.08em;background:linear-gradient(90deg,#faf7fc,#fff);border-radius:12px}
.week-day.tomy-day{background:#fbf8fc;border-color:#e4dce8}.week-tomy-note{padding:9px;border-radius:11px;background:#f2edf6;border:1px solid #e3d9ea}.week-tomy-note strong{display:block;color:#675783;font-size:9px}.week-tomy-note span{display:block;margin-top:2px;color:#8b7a91;font-size:8px}


/* V1.12.3 — Month view + TOMY personal events */
.tomy-slot{
  width:100%;
  border:0;
  cursor:pointer;
  text-align:left;
}
.week-tomy-note{
  width:100%;
  border:1px solid #e3d9ea;
  text-align:left;
  cursor:pointer;
}
.month-title-strip{
  margin:0 0 10px;
  color:var(--navy);
  font-size:18px;
  font-weight:900;
  text-transform:capitalize;
}
.calendar-month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(120px,1fr));
  gap:7px;
  overflow-x:auto;
}
.month-weekday{
  padding:7px 8px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-align:center;
}
.month-day{
  position:relative;
  min-height:128px;
  border:1px solid #e2e7e1;
  border-radius:15px;
  background:#fffdf9;
  padding:7px;
}
.month-day.outside{opacity:.4}
.month-day.today{border-color:#b9d4e6;box-shadow:0 5px 14px rgba(31,78,122,.06)}
.month-day.tomy-day{background:#faf7fc;border-color:#e1d7e8}
.month-day-head{
  width:28px;height:28px;border:0;border-radius:999px;background:transparent;
  color:var(--navy);font-size:11px;font-weight:900;cursor:pointer;
}
.month-day.today .month-day-head{background:#e8f1f7}
.month-events{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.month-event{
  width:100%;border:0;border-left:3px solid #6ca6d8;border-radius:7px;
  background:#f7fbfd;padding:4px 5px;text-align:left;cursor:pointer;min-width:0
}
.month-event.kind-personal{border-left-color:#c6b7dc;background:#faf8fd}
.month-event.kind-task{border-left-color:#d9aeb7;background:#fff8fa}
.month-event b{font-size:7px;color:var(--blue);margin-right:4px}
.month-event span{font-size:8px;color:var(--navy);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.month-tomy{
  width:100%;margin-top:3px;border:0;border-radius:7px;background:#eee7f4;color:#745e84;
  padding:4px 5px;font-size:8px;font-weight:900;cursor:pointer;text-align:left
}
.month-more,.month-add{
  border:0;background:transparent;color:var(--muted);font-size:8px;cursor:pointer;padding:3px
}
.month-add{position:absolute;right:5px;bottom:4px;font-size:15px}

@media(max-width:820px){
  .calendar-month-grid{grid-template-columns:repeat(7,105px)}
  .month-day{min-height:112px}
}

.feb-import-panel{background:linear-gradient(145deg,#fffdf9,#f7f4fb)!important}
.feb-import-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0 14px}
.feb-import-summary>div{padding:12px;border:1px solid #e2e7e1;border-radius:15px;background:#fff}
.feb-import-summary span{display:block;color:var(--muted);font-size:9px}
.feb-import-summary strong{display:block;margin-top:4px;color:var(--navy);font-size:18px}
.feb-import-note{margin:0 0 14px;padding:12px 14px;border:1px solid #e2e7e1;border-radius:15px;background:#f8faf7;color:var(--muted);font-size:10px;line-height:1.6}
@media(max-width:820px){.feb-import-summary{grid-template-columns:1fr 1fr}}

.historical-import-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:820px){
  .historical-import-actions{display:grid!important;grid-template-columns:1fr 1fr}
  .historical-import-actions .btn{width:100%!important}
}


/* V1.14.6 — safe completed appointment color */
.appointment-card.status-done,
.week-event.status-done,
.month-event.status-done{
  background:#e8f5ec !important;
  border-color:#9bc9a6 !important;
  color:#245c35 !important;
}
.appointment-card.status-done .appointment-accent{background:#6eac7d !important}
.appointment-card.status-done .appointment-top strong,
.appointment-card.status-done .appointment-top span,
.appointment-card.status-done .appointment-reason,
.appointment-card.status-done .appointment-status,
.week-event.status-done b,
.week-event.status-done span,
.month-event.status-done b,
.month-event.status-done span{
  color:#245c35 !important;
}

.apple-calendar-panel{
  background:linear-gradient(145deg,#fbfcff,#f7f8fb)!important;
}


/* V1.15.1 — AI voice appointment */
.ai-voice-booking{
  border:1px solid #dfe6df;
  border-radius:16px;
  padding:12px;
  background:#fbfdfb;
}
.ai-voice-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.ai-voice-head>div{display:flex;flex-direction:column;gap:2px}
.ai-voice-head strong{color:var(--navy);font-size:12px}
.ai-voice-head span{color:var(--muted);font-size:9px}
.ai-voice-status{font-size:9px;color:var(--muted);margin:4px 0 8px}
.ai-voice-status.busy{font-weight:700;color:var(--navy)}
.ai-voice-booking textarea{width:100%}
.ai-voice-actions{display:flex;justify-content:flex-end;margin-top:8px}
@media(max-width:820px){
  .ai-voice-head{align-items:flex-start}
}


/* V1.16.0 — Smart Tasks & Daily Hub */
.daily-hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
.hub-action{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;cursor:pointer;box-shadow:0 8px 26px rgba(31,55,80,.06);transition:.15s ease}
.hub-action:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(31,55,80,.09)}
.hub-action .hub-icon{width:48px;height:48px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:23px}
.hub-action strong{display:block;font-size:16px;color:var(--text)}
.hub-action small{display:block;margin-top:4px;color:var(--muted);font-weight:500}
.hub-action>b{font-size:24px;color:var(--accent)}
.hub-action.tasks .hub-icon{background:#f2f4ff}
.daily-hub-stats{grid-template-columns:1fr 1fr}

.task-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.task-type-tile{border:1px solid var(--line);background:#fff;border-radius:17px;padding:18px 14px;text-align:left;cursor:pointer;min-height:132px;box-shadow:0 6px 22px rgba(31,55,80,.05)}
.task-type-tile>span{display:block;font-size:28px;margin-bottom:12px}
.task-type-tile strong{display:block;font-size:15px;color:var(--text)}
.task-type-tile small{display:block;color:var(--muted);margin-top:5px;line-height:1.35}
.task-type-tile:hover{border-color:#bfd5ec;transform:translateY(-1px)}
.smart-task-list-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.smart-task-list-head h3{margin:0}
.smart-task-list-head p{margin:4px 0 0;color:var(--muted)}
.task-filter-tabs{display:flex;background:var(--soft);padding:3px;border-radius:11px}
.task-filter-tabs button{border:0;background:transparent;padding:7px 11px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:700}
.task-filter-tabs button.active{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(20,50,80,.08)}
.smart-task-list{display:grid;gap:9px}
.smart-task-card{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch;border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px}
.smart-task-card.is-done{opacity:.62}
.task-check{width:34px;height:34px;border:2px solid #c8d4df;border-radius:10px;background:#fff;cursor:pointer;align-self:center;font-weight:900}
.task-check.checked{background:#edf7ef;border-color:#8bbd98;color:#39764a}
.task-card-main{border:0;background:transparent;text-align:left;cursor:pointer;padding:2px 4px}
.task-card-main .task-type{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.task-card-main strong{display:block;color:var(--text);font-size:15px;margin:3px 0}
.task-card-main small{display:block;color:var(--muted)}
.shopping-preview{display:block;color:#627487;font-size:12px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.optional-label{font-size:11px;color:var(--muted);font-weight:500}
.field-help{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.shopping-checklist{display:grid;gap:8px;margin:18px 0}
.shopping-check-row{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px;text-align:left;cursor:pointer}
.shopping-check-row span{width:28px;height:28px;border:2px solid #c8d4df;border-radius:8px;display:grid;place-items:center}
.shopping-check-row.done{opacity:.58}
.shopping-check-row.done strong{text-decoration:line-through}
.shopping-check-row.done span{background:#edf7ef;border-color:#8bbd98;color:#39764a}
.smart-ai-box{border-color:#d9e4ef}

@media(max-width:820px){
  .daily-hub-actions{grid-template-columns:1fr}
  .task-type-grid{grid-template-columns:1fr 1fr}
  .task-type-tile{min-height:118px;padding:15px 12px}
  .smart-task-list-head{align-items:flex-start;flex-direction:column}
  .mobile-nav button{padding-left:1px;padding-right:1px}
  .mobile-nav span{font-size:9px}
}

/* V1.16.1 — Mobile Settings shortcut */
.mobile-settings-btn{display:none}
@media(max-width:820px){
  .mobile-settings-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0 !important;
    border-radius:12px;
    font-size:19px;
  }
  .topbar .user{gap:6px}
  .topbar .user #userName{display:none}
}


/* V1.16.2 — MOBILE NAVIGATION HARD FIX */
@media(max-width:820px){
  .mobile-settings-btn{display:none!important}

  .mobile-nav{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    z-index:999!important;
    pointer-events:auto!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid var(--line)!important;
    padding:5px 3px max(5px,env(safe-area-inset-bottom))!important;
    gap:0!important;
  }
  .mobile-nav button{
    display:flex!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    position:relative!important;
    z-index:1000!important;
    width:auto!important;
    min-width:0!important;
    min-height:52px!important;
    margin:0!important;
    padding:6px 0 4px!important;
    border:0!important;
    background:transparent!important;
    border-radius:12px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    cursor:pointer!important;
  }
  .mobile-nav button span{
    display:block!important;
    font-size:8px!important;
    line-height:10px!important;
    margin-top:3px!important;
    white-space:nowrap!important;
    pointer-events:none!important;
  }
  .mobile-nav button::before{
    pointer-events:none!important;
  }
  .mobile-nav button[data-view="settings"]::before{
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' stroke='%2370817d' stroke-width='1.8'/%3E%3Cpath d='M12 2.8v2M12 19.2v2M21.2 12h-2M4.8 12h-2M18.5 5.5 17.1 7M6.9 17l-1.4 1.5M18.5 18.5 17 17.1M6.9 7 5.5 5.5' stroke='%2370817d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  }
  .container{
    padding-bottom:92px!important;
  }
}

/* V1.17.0 — NATURAL VISIT FLOW */
.natural-home-head{align-items:center}.natural-home-head h1{margin-top:3px}
.natural-add-btn{border:0;background:var(--accent);color:#fff;font-weight:800;border-radius:13px;padding:11px 16px;cursor:pointer}
.next-patient-panel{margin:0 0 16px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#f8fbff,#f3f8f7);border:1px solid #dce8ef}
.next-patient-label{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--accent);margin-bottom:9px}
.empty-next{display:flex;align-items:center;min-height:90px;color:var(--muted)}.empty-next strong,.empty-next span{display:block}.empty-next span{margin-top:4px;font-size:13px}
.natural-day-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:17px}.natural-day-summary>*{border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px;text-align:left}.natural-day-summary button{cursor:pointer}.natural-day-summary span{display:block;font-size:23px;font-weight:900;color:var(--text)}.natural-day-summary small{color:var(--muted);font-weight:700}
.natural-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.natural-section-head h3,.natural-section-head p{margin:0}.natural-section-head p{color:var(--muted);font-size:12px;margin-top:3px}
.today-flow-list{display:grid;gap:9px}.today-flow-card{border:1px solid var(--line);border-radius:15px;background:#fff;padding:8px}.today-flow-card.is-next{border-color:#9cc7bf;box-shadow:0 7px 24px rgba(45,101,91,.09)}
.today-flow-main{display:grid;grid-template-columns:58px 1fr auto;gap:10px;width:100%;align-items:center;border:0;background:transparent;text-align:left;padding:7px;cursor:pointer}.today-time{font-size:18px;font-weight:900;color:var(--text)}.today-person strong,.today-person small{display:block}.today-person small{margin-top:3px;color:var(--muted)}.today-stage{font-size:11px;font-weight:800;border-radius:99px;padding:6px 8px;background:var(--soft);color:var(--accent);white-space:nowrap}.today-flow-actions{display:flex;justify-content:flex-end;gap:7px;padding:0 7px 6px}.today-flow-actions .btn{padding:7px 10px;font-size:12px}
.quick-add-title{display:flex;gap:12px;align-items:center}.quick-add-title>span{font-size:32px}.quick-add-title h2,.quick-add-title p{margin:0}.quick-add-title p{color:var(--muted);margin-top:3px}.quick-add-grid,.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}.quick-add-grid button,.more-grid button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px;text-align:left;cursor:pointer}.quick-add-grid button>span,.more-grid button>span{font-size:25px;display:block;margin-bottom:9px}.quick-add-grid strong,.quick-add-grid small,.more-grid strong,.more-grid small{display:block}.quick-add-grid small,.more-grid small{color:var(--muted);margin-top:4px}.more-grid{grid-template-columns:repeat(3,1fr)}
.visit-flow-page{max-width:920px;margin:0 auto}.flow-back{border:0;background:transparent;color:var(--accent);font-weight:800;padding:5px 0 12px;cursor:pointer}.visit-flow-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:15px}.visit-flow-hero h1,.visit-flow-hero p{margin:0}.visit-flow-hero p{color:var(--muted);margin-top:4px}.flow-step-badge{background:#eef6f3;color:#356e65;padding:8px 11px;border-radius:99px;font-size:12px;font-weight:900}
.patient-snapshot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px}.patient-snapshot-grid>div{border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px}.patient-snapshot-grid span,.patient-snapshot-grid strong,.patient-snapshot-grid small{display:block}.patient-snapshot-grid span{font-size:11px;color:var(--muted);font-weight:800}.patient-snapshot-grid strong{font-size:16px;margin-top:5px}.patient-snapshot-grid small{color:var(--muted);margin-top:3px}.flow-alert{display:flex;gap:10px;border:1px solid #efc7c7;background:#fff6f6;border-radius:13px;padding:11px 13px;margin-bottom:13px}
.natural-primary-action{margin-bottom:12px}.flow-primary{width:100%;min-height:49px;font-size:15px;font-weight:900}.flow-secondary-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.flow-secondary-actions button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 7px;cursor:pointer;font-weight:700}.flow-context-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0}.flow-context-row:last-child{border-bottom:0}.flow-context-row span{color:var(--muted)}
.natural-missing-patient{display:grid;gap:10px;margin-top:12px}.natural-check-line{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px}.natural-check-line input{width:auto}.completion-extra{background:var(--soft);border-radius:13px;padding:12px}.completion-step-label{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--accent)}.natural-completion h2{margin-top:4px}
@media(max-width:820px){
  .natural-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .natural-mobile-nav button{min-height:58px!important}
  .natural-mobile-nav .mobile-main-add{width:54px!important;height:54px!important;min-height:54px!important;justify-self:center!important;align-self:start!important;margin-top:-15px!important;border-radius:50%!important;background:var(--accent)!important;color:#fff!important;box-shadow:0 8px 20px rgba(32,87,78,.25)!important}
  .natural-mobile-nav .mobile-main-add span{color:#fff!important}
  .today-flow-main{grid-template-columns:48px 1fr;gap:7px}.today-stage{grid-column:2;justify-self:start;margin-top:-4px}.today-flow-actions{justify-content:flex-start;padding-left:55px}
  .patient-snapshot-grid{grid-template-columns:1fr}.visit-flow-hero{flex-direction:column}.flow-secondary-actions{grid-template-columns:1fr 1fr}.quick-add-grid,.more-grid{grid-template-columns:1fr}
}


/* V1.17.2 — SAFE MOBILE MODAL + NAV ICON FIX */
.modal.hidden{
  display:none!important;
}

.mobile-nav svg{
  width:24px;
  height:24px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.mobile-nav .mobile-main-add svg{
  width:25px;
  height:25px;
  stroke-width:2.2;
}

@media(max-width:820px){
  /* Overlay never scrolls the page behind it. */
  .modal:not(.hidden){
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:
      calc(12px + env(safe-area-inset-top))
      10px
      calc(82px + env(safe-area-inset-bottom))!important;
    z-index:2000!important;
  }

  /* The white card itself owns the scrolling. */
  .modal:not(.hidden) .modal-card{
    width:min(100%,680px)!important;
    max-width:680px!important;
    max-height:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding-bottom:24px!important;
  }

  .modal:not(.hidden) .form-actions{
    position:static!important;
    bottom:auto!important;
    background:transparent!important;
    padding-bottom:8px!important;
  }

  .modal:not(.hidden) .form-actions .btn{
    min-height:48px;
  }

  .natural-mobile-nav button{
    color:var(--muted)!important;
  }
  .natural-mobile-nav button.active{
    color:var(--accent)!important;
  }
  .natural-mobile-nav .mobile-main-add{
    color:#fff!important;
  }
}


/* V1.17.3 — HARD NAV ICON FIX */
@media(max-width:820px){
  .natural-mobile-nav button::before,
  .natural-mobile-nav button::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }

  .natural-mobile-nav button > .nav-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    margin:0 auto 3px!important;
    padding:0!important;
    font-size:24px!important;
    line-height:1!important;
    font-weight:800!important;
    color:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
    position:static!important;
    transform:none!important;
    overflow:visible!important;
    background:none!important;
    border:0!important;
    pointer-events:none!important;
  }

  .natural-mobile-nav button > .nav-label{
    display:block!important;
    font-size:9px!important;
    line-height:11px!important;
    white-space:nowrap!important;
    color:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
  }

  .natural-mobile-nav .nav-icon-tasks{
    font-size:25px!important;
  }

  .natural-mobile-nav .nav-icon-more{
    font-size:22px!important;
    letter-spacing:2px!important;
    transform:translateX(1px)!important;
  }

  .natural-mobile-nav .mobile-main-add > .nav-icon{
    color:#fff!important;
    font-size:28px!important;
    margin-bottom:1px!important;
  }

  .natural-mobile-nav .mobile-main-add > .nav-label{
    color:#fff!important;
  }

  /* Prevent old SVG rules from taking space if browser cached mixed markup */
  .natural-mobile-nav svg{
    display:none!important;
  }
}


/* V1.18.0 — FINAL NATURAL FLOW POLISH */
.compact-summary{grid-template-columns:repeat(4,1fr)}
.focus-next{padding:14px}
.focus-next .today-flow-card{border:0;box-shadow:none;background:transparent;padding:0}
.focus-next .today-flow-main{padding:4px 0}
.visit-flow-hero.refined{padding-bottom:4px}
.patient-snapshot-grid.refined button{
  text-align:left;
  border:1px solid var(--line);
  background:#fff;
  border-radius:15px;
  padding:13px;
  cursor:pointer;
}
.patient-snapshot-grid.refined button span,
.patient-snapshot-grid.refined button strong,
.patient-snapshot-grid.refined button small{display:block}
.patient-snapshot-grid.refined button span{font-size:11px;color:var(--muted);font-weight:800}
.patient-snapshot-grid.refined button strong{font-size:16px;margin-top:5px;color:var(--text)}
.patient-snapshot-grid.refined button small{color:var(--muted);margin-top:3px}
.natural-flow-actions-panel.focused{padding-bottom:14px}
.flow-stage-title{margin-bottom:12px}
.flow-stage-title span{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--muted)}
.flow-stage-title strong{display:block;font-size:18px;margin-top:3px;color:var(--text)}
.flow-secondary-actions.compact button{padding:11px 7px}
.flow-context-panel.compact{padding-top:10px;padding-bottom:10px}
.sticky-primary{font-size:16px!important}

@media(max-width:820px){
  .compact-summary{grid-template-columns:repeat(2,1fr)}
  .visit-flow-page{padding-bottom:92px}
  .natural-flow-actions-panel.focused{
    padding-bottom:16px;
  }
  .natural-primary-action{
    position:sticky;
    bottom:76px;
    z-index:15;
    background:linear-gradient(to top,#fff 72%,rgba(255,255,255,.86));
    padding-top:8px;
    padding-bottom:6px;
    margin-bottom:8px;
  }
  .sticky-primary{
    min-height:54px!important;
    border-radius:14px!important;
    box-shadow:0 8px 22px rgba(32,87,78,.16)!important;
  }
  .flow-secondary-actions.compact{
    grid-template-columns:repeat(2,1fr);
  }
}


/* V1.18.1 — UNDO ARRIVAL */
.arrival-action-stack{
  display:grid;
  gap:7px;
}
.undo-arrival-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  padding:7px 10px;
  cursor:pointer;
  border-radius:10px;
}
.undo-arrival-btn:hover{
  background:var(--soft);
  color:var(--text);
}
@media(max-width:820px){
  .arrival-action-stack{
    width:100%;
  }
  .undo-arrival-btn{
    min-height:38px;
  }
}


/* V1.18.2 — HISTORICAL MONTH TOTALS */
.historical-month-note{
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:13px;
  padding:13px;
}
.historical-month-note strong,
.historical-month-note span{display:block}
.historical-month-note span{color:var(--muted);font-size:12px;margin-top:4px}
.historical-summary-box{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.historical-summary-box>div{
  border:1px solid var(--line);
  border-radius:13px;
  padding:12px;
}
.historical-summary-box span,
.historical-summary-box strong{display:block}
.historical-summary-box span{font-size:11px;color:var(--muted);font-weight:800}
.historical-summary-box strong{margin-top:4px}
.historical-summary-box p{
  grid-column:1/-1;
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
}
@media(max-width:820px){
  .historical-summary-box{grid-template-columns:1fr}
}


/* V1.18.4 — PATIENT DETAILS CHECK */
.required-details-modal h2{
  margin-bottom:6px;
}
.required-details-fields{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.required-detail-field{
  display:grid;
  gap:6px;
}
.required-detail-field span{
  font-size:12px;
  font-weight:800;
  color:var(--text);
}
.required-detail-field input{
  width:100%;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
}
.required-detail-field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,95,148,.10);
}
.required-details-actions{
  margin-top:18px;
}
@media(max-width:820px){
  .required-details-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .required-details-actions .btn{
    width:100%;
    min-height:48px;
  }
}


/* V1.19.0 — UNIFIED VISIT + VACCINE FLOW */
.minimal-previsit{max-width:760px;margin:0 auto}
.previsit-action-card{display:grid;gap:8px;margin-top:14px}
.big-flow-button{min-height:58px;font-size:17px!important}
.active-visit-workspace{max-width:820px;margin:0 auto;padding-bottom:110px}
.visit-flow-hero.active{margin-bottom:12px}
.visit-live-badge{
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  padding:7px 11px;font-size:11px;font-weight:900;background:var(--soft);white-space:nowrap
}
.inline-required-details{border-width:2px;margin:12px 0}
.inline-required-head h3{margin:3px 0 0}
.inline-required-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.inline-required-field{display:grid;gap:5px}
.inline-required-field span{font-size:11px;font-weight:900}
.inline-required-field input{
  width:100%;min-height:45px;border:1px solid var(--line);border-radius:12px;padding:10px 11px;font:inherit
}
.visit-core-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.visit-core-action{
  border:1px solid var(--line);background:#fff;border-radius:16px;padding:16px 12px;
  min-height:130px;text-align:left;cursor:pointer
}
.visit-core-action strong,.visit-core-action small{display:block}
.visit-core-action strong{margin-top:8px;font-size:17px}
.visit-core-action small{margin-top:4px;color:var(--muted);line-height:1.35}
.visit-core-icon{font-size:27px}
.visit-core-action.vaccine{border-width:2px}
.visit-finish-button{width:100%;min-height:56px!important;font-size:16px!important;margin-top:6px}
.disabled-flow-button{opacity:.52!important;cursor:not-allowed!important}
.visit-more-link{
  width:100%;border:0;background:transparent;color:var(--muted);padding:13px 6px;font-weight:800;cursor:pointer
}
.visit-vaccine-page{max-width:1050px;margin:0 auto;padding-bottom:100px}
.visit-vaccine-head{margin:10px 0 14px}
.visit-vaccine-head h1{margin:3px 0}
.vaccine-plan-hint{font-size:11px;color:var(--muted);font-weight:800}
.completed-visit-card{max-width:560px;margin:20px auto;text-align:center}

@media(max-width:820px){
  .inline-required-grid{grid-template-columns:1fr}
  .visit-core-actions{grid-template-columns:1fr}
  .visit-core-action{
    min-height:82px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;
    column-gap:8px;align-items:center
  }
  .visit-core-icon{grid-row:1/3}
  .visit-core-action strong{margin-top:0}
  .visit-finish-button{
    position:sticky;bottom:76px;z-index:14;box-shadow:0 8px 24px rgba(0,0,0,.12)
  }
}


/* V1.19.1 — TODAY = CALENDAR DAY */
.today-calendar-home{
  max-width:980px;
  margin:0 auto;
  padding-bottom:95px;
}
.today-calendar-head{
  align-items:center;
}
.today-calendar-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.today-calendar-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 14px;
}
.today-calendar-summary>div{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:11px 12px;
}
.today-calendar-summary strong,
.today-calendar-summary span{display:block}
.today-calendar-summary strong{font-size:20px}
.today-calendar-summary span{font-size:11px;color:var(--muted);margin-top:2px}
.today-calendar-panel{
  padding:12px;
}
.today-calendar-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}
.today-calendar-panel-head h3{margin:0}
.today-calendar-panel-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.today-calendar-grid{
  display:grid;
  gap:7px;
}
.today-slot{
  width:100%;
  display:grid;
  grid-template-columns:66px 1fr auto;
  gap:10px;
  align-items:center;
  text-align:left;
  border:1px solid var(--line);
  border-radius:13px;
  padding:10px 11px;
  background:#fff;
  cursor:pointer;
}
.today-slot.empty{
  border-style:dashed;
  background:var(--soft);
}
.today-slot-time{
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.today-slot-main strong,
.today-slot-main small{
  display:block;
}
.today-slot-main small{
  color:var(--muted);
  margin-top:2px;
}
.today-slot-status{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}
.today-slot.booked.status-arrived{
  border-width:2px;
}
.today-slot.booked.status-done{
  opacity:.72;
}
@media(max-width:820px){
  .today-calendar-head{
    align-items:flex-start;
  }
  .today-calendar-head-actions{
    flex-direction:column;
    align-items:flex-end;
  }
  .today-calendar-summary{
    grid-template-columns:repeat(3,1fr);
  }
  .today-calendar-summary>div{
    padding:9px;
  }
  .today-slot{
    grid-template-columns:56px 1fr;
  }
  .today-slot-status{
    grid-column:2;
  }
}


/* V1.19.2 — TODAY TASKS OVERVIEW */
.today-tasks-section{
  margin-top:18px;
  padding-bottom:16px;
}
.today-tasks-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}
.today-tasks-head h2{
  margin:2px 0 0;
  font-size:20px;
}
.today-all-tasks-link{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
  padding:6px 0;
}
.today-task-group{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
}
.today-task-group-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
}
.today-task-group-title strong{
  flex:1;
  font-size:14px;
}
.today-task-group-title small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border-radius:999px;
  background:var(--soft);
  font-weight:900;
  color:var(--muted);
}
.today-task-list{
  display:grid;
  gap:6px;
}
.today-task-item{
  display:grid;
  grid-template-columns:1fr 42px;
  gap:7px;
  align-items:center;
}
.today-task-main{
  border:0;
  background:var(--soft);
  border-radius:12px;
  padding:9px 11px;
  display:grid;
  grid-template-columns:62px 1fr;
  gap:8px;
  text-align:left;
  cursor:pointer;
}
.today-task-time{
  font-size:11px;
  font-weight:900;
  color:var(--muted);
}
.today-task-title{
  font-size:13px;
  font-weight:800;
  color:var(--text);
}
.today-task-check{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:19px;
  font-weight:900;
  cursor:pointer;
}
.today-no-tasks{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:16px;
  text-align:center;
  color:var(--muted);
  background:var(--soft);
}

@media(max-width:820px){
  .today-tasks-head{
    align-items:center;
  }
  .today-task-main{
    grid-template-columns:54px 1fr;
  }
}


/* V1.19.5 — ALL OPEN TASKS ON HOME */
.today-task-item.task-overdue .today-task-main{
  border-left:3px solid currentColor;
}
.today-task-item.task-overdue .today-task-time{
  font-weight:900;
}
.today-task-item.task-today .today-task-main{
  border-left:3px solid var(--accent);
}
.today-task-item.task-future .today-task-time,
.today-task-item.task-no-date .today-task-time{
  opacity:.82;
}
.today-task-time{
  line-height:1.25;
}
@media(max-width:820px){
  .today-task-main{
    grid-template-columns:105px 1fr;
  }
}


/* ==========================================================
   V1.20.0 — SINGLE VISIT WORKSPACE
   One appointment, one screen, until completion.
   ========================================================== */

.single-visit-workspace{
  max-width:900px;
  margin:0 auto;
  padding-bottom:110px;
}
.single-visit-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.workspace-edit-appt{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
  padding:7px 4px;
}
.single-visit-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 0 12px;
}
.single-visit-header h1{
  margin:3px 0 4px;
}
.single-visit-header p{
  margin:0;
  color:var(--muted);
}
.workspace-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 11px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  background:#fff;
}
.workspace-status-strip{
  margin:10px 0 14px;
}
.workspace-status-action{
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
}
.workspace-status-action span strong,
.workspace-status-action span small{
  display:block;
}
.workspace-status-action span small{
  margin-top:3px;
  color:var(--muted);
}
.workspace-status-buttons{
  display:flex;
  align-items:center;
  gap:8px;
}
.workspace-live-dot{
  font-size:18px;
}
.workspace-clinical{
  display:grid;
  gap:9px;
  margin-top:13px;
}
.workspace-accordion-head{
  width:100%;
  display:grid;
  grid-template-columns:44px 1fr 28px;
  gap:9px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.workspace-accordion-icon{
  font-size:24px;
  text-align:center;
}
.workspace-accordion-copy strong,
.workspace-accordion-copy small{
  display:block;
}
.workspace-accordion-copy strong{
  font-size:16px;
}
.workspace-accordion-copy small{
  color:var(--muted);
  margin-top:3px;
}
.workspace-accordion-chevron{
  font-size:22px;
  color:var(--muted);
  text-align:center;
}
.workspace-section{
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  padding:13px;
  margin-top:-3px;
  margin-bottom:3px;
}
.workspace-inline-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.workspace-inline-form label{
  display:grid;
  gap:5px;
  font-size:12px;
  font-weight:800;
}
.workspace-inline-form input,
.workspace-inline-form textarea,
.workspace-inline-form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:11px;
  padding:9px 10px;
  font:inherit;
  background:#fff;
}
.workspace-inline-form textarea{
  resize:vertical;
}
.workspace-inline-form .span2{
  grid-column:1/-1;
}
.workspace-inline-save{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}
.workspace-saved-note{
  flex:1;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.workspace-completion{
  margin-top:16px;
}
.workspace-finish-main{
  width:100%;
  min-height:56px!important;
  font-size:16px!important;
}
.workspace-finish-form{
  margin-top:9px;
}
.workspace-final-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.workspace-done-card{
  display:grid;
  gap:9px;
  text-align:center;
  margin-top:14px;
}
.inline-required-details{
  margin-bottom:12px!important;
}

@media(max-width:820px){
  .single-visit-workspace{
    padding-bottom:100px;
  }
  .single-visit-header{
    gap:8px;
  }
  .single-visit-header h1{
    font-size:25px;
  }
  .workspace-status-action{
    align-items:flex-start;
    flex-direction:column;
  }
  .workspace-status-buttons{
    width:100%;
  }
  .workspace-status-buttons .btn{
    flex:1;
  }
  .workspace-inline-form{
    grid-template-columns:1fr;
  }
  .workspace-inline-form .span2{
    grid-column:auto;
  }
  .workspace-inline-save,
  .workspace-final-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .workspace-inline-save .btn,
  .workspace-final-actions .btn{
    width:100%;
    min-height:46px;
  }
  .workspace-finish-main{
    position:sticky;
    bottom:76px;
    z-index:16;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
  }
  .vaccine-booklet-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* V1.20.1 — PATIENT SUMMARY CARD */
.patient-info-card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:16px;
}
.patient-info-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.patient-info-card-head h2{margin:3px 0 0}
.patient-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.patient-info-row{
  border:1px solid var(--line);
  border-radius:13px;
  padding:10px 11px;
  background:var(--soft);
}
.patient-info-row span,.patient-info-row strong{display:block}
.patient-info-row span{
  font-size:11px;
  color:var(--muted);
  font-weight:800;
}
.patient-info-row strong{
  margin-top:4px;
  font-size:14px;
  color:var(--text);
  word-break:break-word;
}
.patient-info-row.important{border-width:2px}
.patient-info-row.important strong{
  font-size:18px;
  letter-spacing:.02em;
}
.patient-info-row.wide{grid-column:1/-1}
.patient-info-alert,.patient-info-note{
  margin-top:10px;
  border-radius:13px;
  padding:11px 12px;
  display:grid;
  gap:3px;
}
.patient-info-alert{border:1px solid var(--line)}
.patient-info-note{background:var(--soft)}
.patient-info-alert strong,.patient-info-note strong{font-size:12px}
.patient-info-alert span,.patient-info-note span{font-size:13px}
.patient-summary-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.patient-summary-actions button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:15px 12px;
  min-height:118px;
  text-align:left;
  cursor:pointer;
}
.patient-summary-action-icon{
  display:block;
  font-size:25px;
  margin-bottom:8px;
}
.patient-summary-actions strong,.patient-summary-actions small{display:block}
.patient-summary-actions strong{font-size:15px}
.patient-summary-actions small{
  margin-top:4px;
  color:var(--muted);
  line-height:1.35;
}
@media(max-width:820px){
  .patient-info-grid{grid-template-columns:1fr}
  .patient-info-row.wide{grid-column:auto}
  .patient-summary-actions{grid-template-columns:1fr}
  .patient-summary-actions button{
    min-height:78px;
    display:grid;
    grid-template-columns:42px 1fr;
    grid-template-rows:auto auto;
    column-gap:8px;
    align-items:center;
  }
  .patient-summary-action-icon{
    grid-row:1/3;
    margin-bottom:0;
  }
}


/* V1.20.2 — RELIABLE MULTI-VACCINE ENTRY */
.vaccine-batch-done{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
.field-help{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
  font-weight:600;
}
#vaccineBookletRoot{
  scroll-margin-top:12px;
}


/* V1.20.5 — OPTIONAL PATIENT DETAILS */
.inline-required-details{
  border-style:dashed;
}
.inline-required-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
@media(max-width:820px){
  .inline-required-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .inline-required-actions .btn{
    width:100%;
  }
}


/* V1.21.0 — UX CLEANUP */
.today-calendar-summary{display:none!important}

.clean-patient-actions{justify-content:flex-end!important}

.patient-section-back{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  padding:4px 0 10px;
  cursor:pointer;
}
.clean-section-head{margin-top:0}

.clean-quick-add .quick-add-grid.clean{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.workspace-status-buttons{
  flex-wrap:wrap;
}

.workspace-edit-appt,
.patient-info-card-head .small-btn{
  opacity:.78;
}

@media(max-width:820px){
  .clean-quick-add .quick-add-grid.clean{grid-template-columns:1fr}
  .workspace-status-buttons{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }
  .workspace-status-buttons .btn,
  .workspace-status-buttons .undo-arrival-btn{width:100%}
}


/* V1.21.1 — DESKTOP COMPACT TODAY */
@media(min-width:821px){
  .today-calendar-home{
    max-width:1120px;
  }
  .today-calendar-panel{
    padding:8px 10px;
  }
  .today-calendar-panel-head{
    margin-bottom:5px;
  }
  .today-calendar-panel-head h3{
    font-size:15px;
  }
  .today-calendar-panel-head p{
    display:none;
  }
  .today-calendar-grid{
    gap:3px;
  }
  .today-slot{
    grid-template-columns:54px 1fr auto;
    gap:7px;
    padding:5px 8px;
    min-height:40px;
    border-radius:9px;
  }
  .today-slot-time{
    font-size:11px;
  }
  .today-slot-main strong{
    font-size:12px;
    line-height:1.15;
  }
  .today-slot-main small{
    font-size:9px;
    line-height:1.1;
    margin-top:1px;
  }
  .today-slot-status{
    font-size:9px;
  }
  .today-tasks-section{
    margin-top:10px;
  }
}


/* V1.21.1 — AI VOICE IS MOBILE-ONLY */
@media(min-width:821px){
  .ai-voice-booking,
  .ai-voice-panel,
  .ai-voice-btn,
  .voice-ai-btn,
  .mobile-ai-only,
  #aiVoiceBooking,
  #aiVoicePanel,
  [data-ai-voice="true"]{
    display:none!important;
  }
}


/* ==========================================================
   V1.22.0 — SINGLE PATH UX
   ========================================================== */

.today-task-readonly{
  cursor:default!important;
  width:100%;
}

.today-calendar-head-actions{
  display:none!important;
}

@media(max-width:820px){
  .natural-mobile-nav{
    grid-template-columns:repeat(5,1fr)!important;
  }
}

@media(min-width:821px){
  .ai-voice-booking,
  .smart-ai-box,
  .ai-voice-actions,
  #aiVoiceStatus,
  #aiVoiceTranscript,
  #smartVoiceStatus,
  #smartVoiceTranscript,
  #aiVoiceBtn,
  #smartVoiceBtn{
    display:none!important;
  }
}


/* ==========================================================
   V1.23.0 — PEDIATRIC INTELLIGENCE
   ========================================================== */

.previsit-card{
  margin:12px 0;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:10px;
}
.previsit-card-main{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.previsit-item{
  min-width:0;
  border-radius:11px;
  background:var(--soft);
  padding:8px 9px;
}
.previsit-item span,
.previsit-item strong{
  display:block;
}
.previsit-item span{
  font-size:10px;
  color:var(--muted);
  font-weight:800;
}
.previsit-item strong{
  margin-top:2px;
  font-size:12px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.previsit-item.attention{
  border:1px solid var(--line);
}

.care-checklist{
  margin:0 0 12px;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:10px;
}
.care-checklist-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.care-checklist-head>span{
  font-size:18px;
}
.care-checklist-head strong,
.care-checklist-head small{
  display:block;
}
.care-checklist-head small{
  color:var(--muted);
  margin-top:1px;
}
.care-checklist-items{
  display:grid;
  gap:5px;
  margin-top:8px;
}
.care-check-item{
  font-size:11px;
  background:var(--soft);
  border-radius:9px;
  padding:7px 8px;
}
.care-check-item.attention{
  font-weight:700;
}

.exam-template-strip{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:8px;
  background:var(--soft);
  border-radius:12px;
}
.exam-template-strip>span{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}
.exam-template-strip button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 9px;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}

.vaccine-cell.next-slot{
  outline:2px solid currentColor;
  outline-offset:-2px;
}
.vaccine-state-label{
  display:block;
  font-style:normal;
  font-size:8px;
  margin-top:2px;
  font-weight:900;
  line-height:1;
}
.vaccine-state-label.next{
  opacity:.8;
}
.vaccine-state-label.done{
  opacity:.75;
}
.next-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  border:2px solid currentColor;
  margin-right:4px;
}

@media(max-width:820px){
  .previsit-card-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .exam-template-strip{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .exam-template-strip button{
    white-space:nowrap;
  }
}


/* ==========================================================
   V1.24.0 — GROWTH CHARTS
   ========================================================== */
.growth-charts-section{
  margin-bottom:14px;
}
.growth-charts-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.growth-charts-title h3{
  margin:0;
}
.growth-charts-title p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:12px;
}
.growth-chart-source{
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}
.growth-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.growth-chart-card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:10px;
  min-width:0;
}
.growth-chart-card.empty-chart{
  min-height:120px;
}
.growth-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.growth-chart-head strong,
.growth-chart-head small,
.growth-latest span,
.growth-latest strong{
  display:block;
}
.growth-chart-head small,
.growth-latest span{
  color:var(--muted);
  font-size:9px;
}
.growth-latest{
  text-align:right;
}
.growth-latest strong{
  font-size:12px;
  margin-top:2px;
}
.growth-svg-wrap{
  overflow-x:auto;
}
.growth-svg{
  display:block;
  width:100%;
  min-width:420px;
  height:auto;
}
.growth-grid-line{
  stroke:currentColor;
  opacity:.08;
  stroke-width:1;
}
.growth-grid-line.vertical{
  opacity:.05;
}
.growth-axis-label{
  fill:currentColor;
  opacity:.55;
  font-size:10px;
}
.growth-line{
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.growth-point{
  fill:#fff;
  stroke:currentColor;
  stroke-width:3;
}
.growth-chart-note{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--soft);
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
.growth-history-table{
  margin-top:14px;
}

@media(max-width:820px){
  .growth-chart-grid{
    grid-template-columns:1fr;
  }
  .growth-charts-title{
    display:block;
  }
  .growth-chart-source{
    display:inline-block;
    margin-top:6px;
  }
  .growth-svg{
    min-width:360px;
  }
}


/* ==========================================================
   V1.25.0 — SMART REASONS + VISIT AUTOSAVE DRAFT
   ========================================================== */

.appointment-reason-shortcut-wrap{
  margin-top:2px;
}
.appointment-reason-shortcut-label{
  display:block;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:6px;
}
.appointment-reason-shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.appointment-reason-shortcuts button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.appointment-reason-shortcuts button.active{
  outline:2px solid currentColor;
  outline-offset:-2px;
}

.visit-draft-restored{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px dashed var(--line);
  background:var(--soft);
  border-radius:11px;
  padding:8px 10px;
  font-size:10px;
  font-weight:800;
}
.visit-draft-restored button{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  text-decoration:underline;
}

.workspace-save-statuses{
  display:grid;
  gap:2px;
}
.workspace-draft-note{
  font-size:10px;
  color:var(--muted);
}
.workspace-draft-note[data-state="saving"]{
  opacity:.7;
}
.workspace-draft-note[data-state="error"]{
  font-weight:800;
}

@media(max-width:820px){
  .appointment-reason-shortcuts{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .appointment-reason-shortcuts button{
    white-space:nowrap;
  }
  .visit-draft-restored{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ================= V1.26 ONLINE BOOKING — ADMIN ================= */
.online-booking-home-card{width:100%;border:1px solid rgba(47,111,168,.18);background:linear-gradient(135deg,rgba(185,208,192,.27),rgba(242,217,222,.27));border-radius:18px;padding:15px 17px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;text-align:left;color:var(--ink);cursor:pointer;margin:0 0 16px}
.online-booking-home-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:20px}.online-booking-home-card strong{display:block;color:var(--navy);font-size:15px}.online-booking-home-card small{display:block;color:var(--muted);margin-top:3px}.online-booking-home-card b{font-size:13px;color:var(--blue)}
.online-booking-panel{display:grid;gap:12px}.online-request-card{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:start;background:#fff}.online-request-time strong{display:block;color:var(--navy)}.online-request-time span{display:inline-block;margin-top:6px;font-size:12px;background:rgba(199,161,90,.14);color:#8a682a;border-radius:999px;padding:5px 8px}.online-request-body h3{margin:0 0 4px}.online-request-body p{margin:0 0 8px;color:var(--muted)}.online-request-meta{display:flex;flex-wrap:wrap;gap:7px 12px;font-size:13px}.online-request-meta a{color:var(--blue)}.online-request-notes{margin-top:9px;padding:9px 11px;background:#f6f8f9;border-radius:10px;font-size:13px}.online-request-actions{display:flex;flex-direction:column;gap:7px;min-width:130px}.online-booking-empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:760px){.online-request-card{grid-template-columns:1fr}.online-request-actions{display:grid;grid-template-columns:1fr 1fr}.online-request-actions .secondary{grid-column:1/-1}.online-booking-home-card{grid-template-columns:auto 1fr}.online-booking-home-card>b{display:none}}


/* ================= V1.26.3 — 7 DAY ONLINE AVAILABILITY ================= */
.online-availability-settings{overflow:hidden}
.online-settings-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.online-settings-head h3{margin:3px 0 6px}
.online-window-badge{white-space:nowrap;border-radius:999px;padding:7px 10px;background:rgba(47,111,168,.10);color:var(--navy);font-size:12px;font-weight:800}
.online-day-settings-list{display:grid;gap:12px}
.online-day-settings{border:1px solid var(--line);border-radius:17px;padding:14px;background:#fff;transition:.18s ease}
.online-day-settings.is-open{border-color:rgba(47,111,168,.30);box-shadow:0 8px 24px rgba(31,78,122,.06)}
.online-day-settings-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px}
.online-day-title strong{display:block;text-transform:capitalize;color:var(--navy)}
.online-day-title small{display:block;color:var(--muted);margin-top:2px}
.online-day-actions{display:flex;gap:6px}
.mini-btn{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:9px;padding:6px 8px;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.online-day-switch{position:relative;width:42px;height:24px;display:block}
.online-day-switch input{position:absolute;opacity:0;pointer-events:none}
.online-day-switch span{position:absolute;inset:0;background:#d7e0e5;border-radius:999px;cursor:pointer;transition:.18s}
.online-day-switch span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.18s}
.online-day-switch input:checked+span{background:var(--blue)}
.online-day-switch input:checked+span:after{transform:translateX(18px)}
.online-day-closed{margin-top:11px;padding:10px 12px;border-radius:11px;background:#f6f8f9;color:var(--muted);font-size:13px}
.online-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;margin-top:13px}
.online-slot-choice{position:relative;display:block}
.online-slot-choice input{position:absolute;opacity:0;pointer-events:none}
.online-slot-choice span{display:block;border:1px solid var(--line);border-radius:10px;padding:8px 7px;text-align:center;font-size:13px;font-weight:750;color:var(--ink);background:#fff;cursor:pointer;transition:.15s}
.online-slot-choice input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.online-slot-choice input:disabled+span{opacity:.45;cursor:not-allowed}
.online-save-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px}
@media(max-width:620px){
  .online-settings-head{display:block}.online-window-badge{display:inline-block;margin-top:8px}
  .online-day-settings-top{grid-template-columns:auto 1fr}.online-day-actions{grid-column:1/-1;padding-left:53px}
  .online-slot-grid{grid-template-columns:repeat(4,1fr)}
}


/* ================= V1.26.4 PUSH SETTINGS ================= */
.push-settings-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.push-settings-head h3{margin:3px 0 6px}
.push-state{white-space:nowrap;border-radius:999px;padding:7px 10px;background:#f1f4f6;color:var(--muted);font-size:12px;font-weight:800}
.push-state.ok{background:rgba(185,208,192,.38);color:#315f43}
.push-settings-panel .field{display:grid;gap:6px;margin-top:10px}
.push-settings-panel .field>span{font-size:13px;font-weight:750}
.push-settings-panel input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font:inherit}
@media(max-width:620px){.push-settings-head{display:block}.push-state{display:inline-block;margin-top:8px}}


/* V1.27.4 — Patients mobile nav text-only */
@media(max-width:820px){
  .natural-mobile-nav button[data-view="patients"] .nav-icon{
    display:none!important;
  }
  .natural-mobile-nav button[data-view="patients"]::before,
  .natural-mobile-nav button[data-view="patients"]::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
}


/* V1.27.5 — SMS handoff after online booking decision */
.online-sms-modal{display:grid;gap:12px}
.online-sms-modal h2{margin:0}
.online-sms-modal p{margin:0 0 2px;color:var(--muted);font-size:12px;line-height:1.45}
.online-sms-modal label{display:grid;gap:5px}
.online-sms-modal textarea{resize:vertical;min-height:120px}
.online-sms-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
@media(max-width:820px){
  .online-sms-actions{display:grid;grid-template-columns:1fr 1fr}
  .online-sms-actions .btn{width:100%}
}