/* ============================================================
   DESIGN TOKENS — Section 4.1
   ============================================================ */
:root{
  --green-500:#2FA98C; --green-600:#238670; --green-100:#D9F0E9;
  --blue-500:#2D7DD2;  --blue-600:#2364A8;  --blue-100:#D8E7F7;
  --bg:#F5F8F9; --surface:#FFFFFF; --border:#E2E9EC;
  --text:#1F2D33; --text-muted:#64777F;
  --success:#2FA98C; --warning:#E3A03C; --danger:#DB6262; --info:#2D7DD2;
  --purple:#8B7BD6; --gray:#8A9BA3;
  --danger-100:#FBE3E3; --warning-100:#FBEDD6; --purple-100:#EBE8F9; --gray-100:#E9EEF0;
  --on-brand:#F5F8F9; --warning-text:#7A5410; --toast-danger-text:#F0A3A3;
  --overlay:rgba(31,45,51,.45); --print-bg:#FFFFFF; --print-border:#999999; --print-text:#333333;
  --grad:linear-gradient(135deg,var(--green-500),var(--blue-500)); /* DS-C-16 */
  --shadow-card:0 2px 8px rgba(31,45,51,.06);
  --shadow-modal:0 12px 32px rgba(31,45,51,.12);
  --font-head:'Readex Pro','Segoe UI',Tahoma,sans-serif;
  --font-body:'Readex Pro','Segoe UI',Tahoma,sans-serif;
  --r-btn:12px; --r-card:18px; --r-modal:24px; --r-lg:28px;
  --dur:260ms; --ease:cubic-bezier(0.32,0.72,0,1);
}
[data-theme="dark"]{
  --bg:#0E1B22; --surface:#16262F; --border:#243B47;
  --text:#E9F1F4; --text-muted:#9DB2BC;
  --green-100:#143A32; --blue-100:#143049;
  --danger-100:#42232A; --warning-100:#40301A; --purple-100:#2C2745; --gray-100:#233038;
  --warning-text:#E8C07A;
  --shadow-card:0 2px 8px rgba(9,22,28,.3); --shadow-modal:0 12px 32px rgba(9,22,28,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;font-size:16px;min-height:100vh}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;line-height:inherit}
button{cursor:pointer;background:none;border:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--font-head)}

/* Layout */
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:var(--surface);border-inline-end:1px solid var(--border);padding:24px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px}
.brand{display:flex;align-items:center;gap:12px;padding-inline:8px}
.brand-logo{width:48px;height:48px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:var(--on-brand)}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:17px}
.brand-sub{font-size:12px;color:var(--text-muted)}
.sidenav{display:flex;flex-direction:column;gap:4px}
.sidenav button{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-btn);color:var(--text-muted);font-weight:500;min-height:48px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);width:100%;text-align:start}
.sidenav button:hover{background:var(--bg);color:var(--text)}
.sidenav button:active{transform:scale(.97)}
.sidenav button.active{background:var(--blue-100);color:var(--blue-600)}
.side-foot{margin-top:auto;font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;padding-inline:8px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-block-end:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:12px 24px;min-height:68px}
.topbar-title{font-family:var(--font-head);font-size:22px;font-weight:600}
.topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.screen-wrap{padding:24px;max-width:1180px;width:100%;margin-inline:auto;position:relative;flex:1}

.bottomnav{display:none;position:fixed;bottom:0;inset-inline:0;z-index:50;background:var(--surface);border-block-start:1px solid var(--border);padding:4px 8px calc(4px + env(safe-area-inset-bottom));justify-content:space-around}
.bottomnav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--text-muted);min-width:60px;min-height:52px;border-radius:var(--r-btn);font-weight:500}
.bottomnav button.active{color:var(--green-600)}
.bottomnav button:active{transform:scale(.97)}
.fab{position:fixed;bottom:32px;inset-inline-end:32px;z-index:45;width:60px;height:60px;border-radius:20px;background:var(--grad);color:var(--on-brand);display:grid;place-items:center;box-shadow:var(--shadow-modal);transition:transform var(--dur) var(--ease)}
.fab:hover{transform:scale(1.05)} .fab:active{transform:scale(.97)}
body:not(.authed) .shell,body:not(.authed) .bottomnav,body:not(.authed) .fab{display:none}
body.authed #login-root{display:none}

/* Components */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:24px}
.card-title{font-size:18px;font-weight:600;margin-block-end:16px;display:flex;align-items:center;gap:8px}
.row{display:flex;align-items:center;gap:12px}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--text-muted)} .small{font-size:14px} .xs{font-size:13px}
.mt{margin-block-start:16px} .mt2{margin-block-start:24px} .mb{margin-block-end:16px}
.center{text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 24px;border-radius:var(--r-btn);font-weight:600;font-size:15px;border:1px solid transparent;transition:background var(--dur) var(--ease),transform 120ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green-500);color:var(--on-brand)}
.btn-primary:hover{background:var(--green-600)}
.btn-blue{background:var(--blue-500);color:var(--on-brand)}
.btn-blue:hover{background:var(--blue-600)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:var(--danger);color:var(--on-brand)}
.btn-danger:hover{filter:brightness(.93)}
.btn-soft{background:var(--green-100);color:var(--green-600)}
.btn:disabled{opacity:.55;pointer-events:none}
.btn-sm{min-height:40px;padding:4px 16px;font-size:14px}
.btn-icon{width:48px;height:48px;padding:0;border-radius:var(--r-btn);display:inline-grid;place-items:center;color:var(--text-muted);transition:background var(--dur) var(--ease),transform 120ms var(--ease)}
.btn-icon:hover{background:var(--bg);color:var(--text)}
.btn-icon:active{transform:scale(.97)}

.input{width:100%;min-height:48px;padding:8px 16px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
textarea.input{min-height:96px;resize:vertical}
.input:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100);outline:none}
.field{display:flex;flex-direction:column;gap:4px;margin-block-end:16px}
.field>label{font-size:13px;font-weight:500}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}
.form-alert{background:var(--danger-100);color:var(--danger);border-radius:var(--r-btn);padding:12px 16px;font-size:14px;display:flex;gap:8px;align-items:flex-start;margin-block-end:16px}
.form-note{background:var(--warning-100);border-radius:var(--r-btn);padding:12px 16px;font-size:14px;margin-block-end:16px;display:flex;gap:8px;align-items:flex-start}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 12px;border-radius:999px;font-size:13px;font-weight:500;line-height:1.9;white-space:nowrap}
.bg-blue{background:var(--blue-100);color:var(--blue-600)}
.bg-green{background:var(--green-100);color:var(--green-600)}
.bg-warn{background:var(--warning-100);color:var(--warning-text)}
.bg-red{background:var(--danger-100);color:var(--danger)}
.bg-gray{background:var(--gray-100);color:var(--text-muted)}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:16px 24px;display:flex;align-items:center;gap:16px}
.stat-num{font-size:34px;font-weight:700;line-height:1.3}
.stat-label{font-size:14px;color:var(--text-muted)}
.stat-chip{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}

.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 8px;border-radius:var(--r-card);transition:background var(--dur) var(--ease),transform 120ms var(--ease)}
.tile:hover{background:var(--surface)}
.tile:active{transform:scale(.97)}
.tile-ic{width:96px;height:96px;border-radius:22px;display:grid;place-items:center;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease)}
.tile:hover .tile-ic{transform:translateY(-3px)}
.tile-lb{font-weight:600;font-size:15px}
.tone-green{background:var(--green-100);color:var(--green-600)}
.tone-blue{background:var(--blue-100);color:var(--blue-600)}
.onboarding-card,.context-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border:1px solid var(--blue-500);border-radius:var(--r-card);background:var(--blue-100)}
.onboarding-card p,.context-card p{margin-block-start:4px}

.list{display:flex;flex-direction:column;gap:8px}
.list-item{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);transition:border-color var(--dur) var(--ease),transform 120ms var(--ease);cursor:pointer;text-align:start;width:100%;min-height:48px}
.list-item:hover{border-color:var(--blue-500)}
.list-item:active{transform:scale(.99)}
.avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:15px;flex-shrink:0}
.li-main{flex:1;min-width:0}
.li-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{font-size:13px;color:var(--text-muted)}

.empty{padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--text-muted)}
.empty svg{opacity:.5}
.empty h3{color:var(--text);font-size:18px}
.empty p{font-size:14px;max-width:340px}

.banner-warn{background:var(--danger-100);color:var(--danger);border:1px solid var(--danger);border-radius:var(--r-card);padding:12px 16px;display:flex;align-items:center;gap:12px;font-weight:600;margin-block-end:16px}

.tabs{display:flex;gap:8px;border-block-end:1px solid var(--border);margin-block-end:24px;overflow-x:auto}
.tabs button{padding:12px 16px;font-weight:600;color:var(--text-muted);border-block-end:2px solid transparent;white-space:nowrap;min-height:48px}
.tabs button.active{color:var(--blue-600);border-block-end-color:var(--blue-500)}
.tabs button:active{transform:scale(.97)}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);padding:3px;gap:2px}
.seg button{padding:8px 16px;border-radius:9px;font-weight:600;font-size:14px;color:var(--text-muted);min-height:42px}
.seg button.active{background:var(--blue-100);color:var(--blue-600)}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:13px;font-weight:500;color:var(--text-muted);text-align:start;padding:8px 12px;border-block-end:1px solid var(--border)}
.tbl td{padding:12px;border-block-end:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-block-end:none}

.modal-ov{position:fixed;inset:0;background:var(--overlay);z-index:100;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity var(--dur) var(--ease)}
.modal-ov.show{opacity:1}
.modal{background:var(--surface);border-radius:var(--r-modal);box-shadow:var(--shadow-modal);width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;transform:translateY(28px);transition:transform var(--dur) var(--ease)}
.modal-ov.show .modal{transform:translateY(0)}
.modal-wide{width:min(760px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-block-end:1px solid var(--border)}
.modal-head h3{font-size:18px}
.modal-body{padding:24px;overflow-y:auto}
.modal-foot{padding:16px 24px;border-block-start:1px solid var(--border);display:flex;gap:12px}
.sheet-grip{width:44px;height:5px;border-radius:99px;background:var(--border);margin:8px auto 0;display:none}

.toasts{position:fixed;bottom:32px;inset-inline:0;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:500;font-size:14px;box-shadow:var(--shadow-modal);opacity:0;transform:translateY(12px);transition:all var(--dur) var(--ease)}
.toast.show{opacity:1;transform:translateY(0)}
.toast-success svg{color:var(--green-500)}
.toast-danger svg{color:var(--toast-danger-text)}

.screen-enter{animation:scrIn var(--dur) var(--ease)}
@keyframes scrIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.spin{width:28px;height:28px;border:3px solid var(--border);border-block-start-color:var(--blue-500);border-radius:50%;animation:rot .8s linear infinite;margin:48px auto}
@keyframes rot{to{transform:rotate(360deg)}}

/* Calendar */
.cal-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:16px}
.cal-label{font-family:var(--font-head);font-weight:600;font-size:18px;min-width:180px;text-align:center}
.tl-row{display:flex;gap:16px;align-items:stretch;margin-block-end:8px}
.tl-time{width:86px;flex-shrink:0;font-size:13px;color:var(--text-muted);padding-block-start:12px;text-align:center;font-weight:500}
.tl-card{flex:1;background:var(--surface);border:1px solid var(--border);border-inline-start:4px solid var(--blue-500);border-radius:var(--r-card);padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--shadow-card)}
.tl-gap{flex:1;border:1.5px dashed var(--border);border-radius:var(--r-card);padding:8px 16px;color:var(--text-muted);font-size:13px;display:flex;align-items:center;gap:8px}
.st-scheduled{border-inline-start-color:var(--info)} .st-confirmed{border-inline-start-color:var(--success)}
.st-attended{border-inline-start-color:var(--green-600)} .st-no_show{border-inline-start-color:var(--warning)} .st-cancelled{border-inline-start-color:var(--danger);opacity:.7}
.wk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wk-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);min-height:220px;padding:8px;display:flex;flex-direction:column;gap:8px}
.wk-col.today{border-color:var(--blue-500)}
.wk-col.closed{background:var(--bg)}
.wk-h{font-size:12.5px;font-weight:600;text-align:center;color:var(--text-muted);padding:4px}
.wk-h b{display:block;color:var(--text);font-size:15px}
.chip{font-size:12.5px;border-radius:10px;padding:4px 8px;border-inline-start:3px solid var(--info);background:var(--blue-100);color:var(--text);text-align:start;line-height:1.5}
.chip.c-confirmed{border-color:var(--success);background:var(--green-100)}
.chip.c-attended{border-color:var(--green-600);background:var(--green-100)}
.chip.c-no_show{border-color:var(--warning);background:var(--warning-100)}
.chip.c-cancelled{border-color:var(--danger);background:var(--danger-100);text-decoration:line-through;opacity:.8}
.mo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.mo-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);min-height:92px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;overflow:hidden;transition:border-color var(--dur) var(--ease)}
.mo-cell:hover{border-color:var(--blue-500)}
.mo-cell.off{opacity:.45;background:var(--bg);cursor:default}
.mo-cell.today{border-color:var(--green-500);border-width:2px}
.mo-num{font-weight:700;font-size:14px}
.mo-more{font-size:11px;color:var(--text-muted)}

/* Dental chart */
.chart-box{direction:ltr}
.chart-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-block-end:8px}
.tooth{width:44px;height:52px;border-radius:12px 12px 16px 16px;border:2px solid var(--border);background:var(--surface);color:var(--text-muted);font-weight:700;font-size:13px;display:grid;place-items:center;transition:transform 120ms var(--ease),border-color var(--dur) var(--ease);direction:ltr}
.tooth:hover{border-color:var(--blue-500)}
.tooth:active{transform:scale(.94)}
.tooth[data-c="caries"]{background:var(--danger-100);border-color:var(--danger);color:var(--danger)}
.tooth[data-c="filling"]{background:var(--blue-100);border-color:var(--blue-500);color:var(--blue-600)}
.tooth[data-c="crown"]{background:var(--warning-100);border-color:var(--warning);color:var(--warning-text)}
.tooth[data-c="root_canal"]{background:var(--purple-100);border-color:var(--purple);color:var(--purple)}
.tooth[data-c="extracted"]{background:var(--gray-100);border-color:var(--gray);color:var(--gray);text-decoration:line-through}
.tooth[data-c="implant"]{background:var(--green-100);border-color:var(--green-600);color:var(--green-600)}
.chart-sep{height:14px}
.legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-block-start:16px;direction:rtl}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted)}
.dot{width:12px;height:12px;border-radius:4px;display:inline-block}

/* Notifications */
.notif{display:flex;gap:12px;padding:12px 16px;border-radius:var(--r-card);border:1px solid var(--border);background:var(--surface);cursor:pointer;align-items:flex-start;text-align:start;width:100%}
.notif.unread{background:var(--blue-100);border-color:transparent}
.n-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.badge-dot{position:absolute;top:4px;inset-inline-end:4px;min-width:18px;height:18px;border-radius:99px;background:var(--danger);color:var(--on-brand);font-size:11px;display:grid;place-items:center;padding-inline:4px;font-weight:700}
.bell-wrap{position:relative}

.switch{position:relative;width:52px;height:30px;flex-shrink:0;display:inline-block}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;margin:0}
.switch .tr{position:absolute;inset:0;background:var(--border);border-radius:99px;transition:background var(--dur) var(--ease)}
.switch .tr::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);transition:transform var(--dur) var(--ease);box-shadow:var(--shadow-card)}
.switch input:checked+.tr{background:var(--green-500)}
.switch input:checked+.tr::after{transform:translateX(-22px)}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:min(420px,100%);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);padding:48px 32px;text-align:center}
.login-logo{width:84px;height:84px;border-radius:24px;background:var(--grad);display:grid;place-items:center;margin:0 auto 16px;color:var(--on-brand)}
.login-card h1{font-size:24px;margin-block-end:4px}
.demo-note{padding:9px 12px;border-radius:10px;background:var(--warning-100);color:var(--warning-text);text-align:center}
.login-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding-block-start:14px;border-block-start:1px solid var(--border);color:var(--text-muted);font-size:11px}
.login-trust span{display:inline-flex;align-items:center;gap:4px}
.logo-preview{width:96px;height:96px;border-radius:18px;border:1px solid var(--border);background:var(--bg);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.logo-preview img{width:100%;height:100%;object-fit:contain;padding:8px}
.print-logo{display:block;max-width:88px;max-height:64px;object-fit:contain;margin:0 auto 8px}

/* Reports bars */
.bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-block-start:16px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:42px;border-radius:8px 8px 3px 3px;background:var(--grad);min-height:3px}
.bar-lb{font-size:11px;color:var(--text-muted);white-space:nowrap}
.bar-vl{font-size:11px;font-weight:700}

.print-area{display:none}

/* Responsive — UX-13 */
@media (max-width:1279px){ .tiles{grid-template-columns:repeat(3,1fr)} .stat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1023px){
  .sidebar{display:none} .bottomnav{display:flex}
  .screen-wrap{padding:16px 16px 110px} .fab{bottom:92px} .topbar{padding:12px 16px}
}
@media (max-width:767px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile-ic{width:72px;height:72px;border-radius:18px}
  .stat-grid{grid-template-columns:1fr 1fr} .stat-num{font-size:26px}
  .form-grid{grid-template-columns:1fr}
  .modal-ov{place-items:end center;padding:0;align-items:flex-end}
  .modal{width:100%;border-radius:var(--r-modal) var(--r-modal) 0 0;max-height:92vh}
  .sheet-grip{display:block}
  .wk-grid{grid-template-columns:repeat(2,1fr)}
  .topbar-title{font-size:18px}
  .tooth{width:34px;height:42px;font-size:11px}
  .onboarding-card,.context-card{align-items:stretch;flex-direction:column}
}
@media (max-width:379px){ .stat-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  body{background:var(--print-bg)}
  body *{visibility:hidden}
  .print-area,.print-area *{visibility:visible;display:revert}
  .print-area{display:block!important;position:absolute;inset:0;padding:24px;font-size:13px}
  .print-area table{width:100%;border-collapse:collapse}
  .print-area th,.print-area td{border:1px solid var(--print-border);padding:6px;text-align:start}
}