:root{--accent:#123e60;--theme-tint:#eef4f8;--page:var(--theme-tint);--surface:#fff;--soft:#f5f7f8;--text:#233445;--muted:#536775;--line:#d5dfe5;--selection:var(--theme-tint);--selection-text:#233445;--danger:#b12d35;--stripe:#e3e9ed;--shade:#16374460;color-scheme:light}
:root[data-mode=dark]{--page:#101820;--surface:#192530;--soft:#22323f;--text:#edf3f7;--muted:#b4c6d3;--line:#526777;--selection:#29404e;--selection-text:#edf3f7;--danger:#ff9ca2;--stripe:#354957;--shade:#00000099;color-scheme:dark}
body{background:var(--page);color:var(--text)}button,input,select,textarea{background:var(--surface);color:var(--text);border-color:var(--line)}button:hover{background:var(--soft)}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:root[data-mode=dark] :is(input,select,textarea,button):focus-visible{outline-color:color-mix(in srgb,var(--theme-tint) 65%,var(--accent))}
.sidebar,.panel,.login-form,dialog,.treatment-picker{background:var(--surface);color:var(--text);border-color:var(--line)}.sidebar .bottom,.toolbar,td,.hours-row,.staff-hours-row,.staff-hours-head,.cal-head,.lane,.overview-day{border-color:var(--line)}
.muted,.help,.hint,.subtext,.pagehead p,.stat span,.stat small,.profile small,td small,.time-label,.cal-head small,.legend,.month-weekdays,.calendar-period,.overview-date small,.month-event small,.month-event span,.event-time,.patient-results small,label,.nav button,.staff-hours-head,.treatment-options small,.treatment-name,.clinic-brand>small{color:var(--muted)}
.stat,.card{background:var(--surface);border-color:var(--line)}.stat strong,h1,h2,h3,.empty,.closed{color:var(--text)}.eyebrow,.card strong{color:var(--accent)}:root[data-mode=dark] .eyebrow,:root[data-mode=dark] .card strong{color:color-mix(in srgb,var(--theme-tint) 75%,var(--accent))}
.primary,.primary:hover,.month-day.selected,.month-day.selected:hover{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover{filter:brightness(.92)}.month-day.selected small{color:#fff}
.nav button.active,.avatar,.slot.selected,.month-day.available,.month-day.available:hover,.selection-summary,.approved-plan,.save-patient,.therapist-options label,.preview-row.selected,.overview-date.is-today,.treatment-options label.is-selected,.selected-treatments button,.badge{background:var(--selection);color:var(--selection-text);border-color:var(--line)}.nav button.active{box-shadow:inset 3px 0 var(--accent)}.slot.selected{border:2px solid var(--accent)}.selection-summary,.approved-plan,.save-patient{color:var(--text)}
.month-day,.final-session-list>div,.overview-day.outside,.overview-day.off,.closed,th,.overview-weekdays,.treatment-picker>input{background:var(--soft);color:var(--text)}.month-day.available small{color:var(--muted)}.month-day.selected{background:var(--accent);color:#fff}.month-day:disabled{opacity:.7}
.treatment-options label{background:var(--surface);border-color:var(--line);color:var(--text)}.treatment-options label:hover{background:var(--soft)}.treatment-code{color:var(--text)}.selected-treatments button:hover{background:var(--soft)}input[type=checkbox]{accent-color:var(--accent)}
.pause{background:repeating-linear-gradient(135deg,var(--soft),var(--soft) 5px,var(--stripe) 5px,var(--stripe) 6px);color:var(--muted)}.lane{background:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,var(--line) 39px,var(--line) 40px)}
.block b,.month-event b,.block span,.therapist-tag{color:var(--text)}.block .event-time,.month-event .event-time{color:var(--text)}:root[data-mode=dark] .block,:root[data-mode=dark] .month-event,:root[data-mode=dark] .therapist-tag{background:var(--soft)}:root[data-mode=dark] .therapist-heading,:root[data-mode=dark] .week-staff span,:root[data-mode=dark] .patient-therapists~b{color:var(--text)!important}:root[data-mode=dark] .patient-list b,:root[data-mode=dark] #patient-list b{color:var(--text)!important}
.error,.danger{color:var(--danger)}a{color:var(--accent)}:root[data-mode=dark] a{color:#93d7ff}dialog::backdrop{background:var(--shade)}.language-switch,.language-switch button,.language-switch button[aria-pressed=true],.language-switch button:hover{background:var(--page)}.language-divider{color:var(--muted)}
.login-page{background:var(--page)}.login-intro{color:var(--text)}.login-intro p,.login-intro .mini{color:var(--muted)}.login-intro .clinic-brand>small{color:var(--muted)}.login-box input{background:var(--soft);border-color:var(--line);color:var(--text)}.login-intro .clinic-brand img{border-radius:12px}.login-intro .intro-copy .eyebrow{color:var(--muted)!important}
.theme-panel{grid-column:1/-1}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:18px 0}.theme-grid button{display:flex;align-items:center;gap:10px;text-align:left;min-height:48px}.theme-grid i{width:24px;height:24px;border-radius:50%;flex-shrink:0;border:1px solid var(--line)}.theme-grid button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px;background:var(--selection);font-weight:600}:root[data-mode=dark] .theme-grid button[aria-pressed=true]{outline-color:color-mix(in srgb,var(--theme-tint) 65%,var(--accent))}.theme-mode-button{margin-top:5px}.topline [data-mode-toggle]{font-size:12px;padding:7px 10px}
.status,.booking-calendar .chosen-day{color:var(--muted)}.booking-calendar,.session-picker{border-color:var(--line)}.therapist-heading,.week-staff span,#patient-list b{color:var(--text)!important}.topline{flex-wrap:wrap;gap:10px}.theme-grid button,.topline [data-mode-toggle]{white-space:normal}:root[data-mode=dark] .slot.selected{border-color:color-mix(in srgb,var(--theme-tint) 65%,var(--accent))}
[data-mode-toggle],.topline [data-mode-toggle]{position:relative;display:inline-flex;align-items:center;justify-content:space-between;flex-shrink:0;width:64px;height:36px;padding:0 9px;border-radius:999px;border:1px solid #8b979f;background:linear-gradient(180deg,#9ca7ae,#bcc5ca);box-shadow:inset 0 2px 4px #00000030,0 1px 0 #ffffff40;isolation:isolate;transition:background .28s ease,border-color .28s ease}
[data-mode-toggle]:hover{background:linear-gradient(180deg,#9ca7ae,#bcc5ca)}
[data-mode-toggle][aria-pressed=true],[data-mode-toggle][aria-pressed=true]:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,var(--text)),var(--accent));border-color:var(--accent)}
[data-mode-toggle] svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9;z-index:0;pointer-events:none}
[data-mode-toggle] .mode-thumb{position:absolute;top:2px;left:2px;width:30px;height:30px;border-radius:50%;border:1px solid #ffffffb0;background:radial-gradient(circle at 35% 25%,#fff 0,#fff 30%,#f1f3f5 65%,#d5dbe0 100%);box-shadow:0 3px 6px #00000040,0 1px 2px #00000030,inset 0 1px 2px #fff;z-index:2;transition:transform .28s cubic-bezier(.22,.8,.3,1);pointer-events:none}
[data-mode-toggle][aria-pressed=true] .mode-thumb{transform:translateX(28px)}
@media(prefers-reduced-motion:reduce){[data-mode-toggle],.topline [data-mode-toggle],[data-mode-toggle] .mode-thumb{transition:none}}
[data-mode-toggle],.topline [data-mode-toggle],.language-switch button[data-mode-toggle]{width:38px;height:22px;padding:0 4px;border:1px solid #8b979f;border-radius:999px;background:linear-gradient(180deg,#9ca7ae,#bcc5ca)}
.language-switch button[data-mode-toggle]{display:inline-flex;margin-left:7px}
[data-mode-toggle] .mode-thumb{top:1px;left:1px;width:18px;height:18px}
[data-mode-toggle][aria-pressed=true] .mode-thumb{transform:translateX(16px)}
[data-mode-toggle] svg,.language-switch button[data-mode-toggle] svg{width:10px;height:10px;box-shadow:none;border-radius:0}
.language-switch button[data-mode-toggle][aria-pressed=true],.language-switch button[data-mode-toggle][aria-pressed=true]:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,var(--text)),var(--accent));border:1px solid var(--accent)}
.language-switch button[data-mode-toggle]:hover{background:linear-gradient(180deg,#9ca7ae,#bcc5ca);border:1px solid #8b979f}
.settings-navigation{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;padding:5px;background:var(--soft);border:1px solid var(--line);border-radius:12px;width:fit-content;max-width:100%}.settings-navigation button{border:0;background:transparent;color:var(--muted);padding:10px 18px}.settings-navigation button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 4px #00000015;font-weight:600}.settings-simple{display:block;max-width:1000px}.settings-simple>[hidden]{display:none}.settings-simple #settings-password{max-width:460px}.settings-simple .theme-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.settings-simple .theme-grid button{min-height:42px;font-size:13px}.settings-simple .theme-grid i{width:18px;height:18px}.settings-simple .hours{overflow-x:auto}.settings-simple .hours-row{min-width:650px}.settings-simple .panel{box-shadow:none}@media(max-width:600px){.settings-navigation{width:100%}.settings-navigation button{flex:1;padding:9px 8px;font-size:12px}.settings-simple .pad{padding:18px}.settings-simple .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.staff-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.staff-card{padding:22px}.staff-card-heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}.staff-card-heading h2{font-size:18px}.staff-card-heading .badge{margin-left:auto}.staff-color{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--text);border-left:4px solid var(--staff-color);font-weight:700}.staff-absence-count{font-size:12px;color:var(--muted);margin-top:8px}.staff-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.staff-card-actions button{font-size:12px;padding:8px 12px}.absence-intro p{margin-top:8px}.absence-form{margin-top:18px;padding:16px;background:var(--soft);border:1px solid var(--line);border-radius:12px}.absence-form label:first-child{margin-top:0}.absence-list-heading{margin:24px 0 12px}.absence-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.absence-row small{display:block;margin-top:4px;color:var(--muted)}.absence-row b{font-size:13px}.absence-list{max-height:300px;overflow:auto}
input.date-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}.date-trigger{display:block;width:100%;min-height:42px;text-align:left;padding:10px 12px;background:var(--surface);color:var(--text);border:1px solid var(--line);font-variant-numeric:tabular-nums}.controls .date-trigger{width:auto;min-width:130px;min-height:36px;padding:7px 10px}.date-trigger:after{content:'▦';float:right;margin-left:18px;color:var(--muted)}.date-popover{position:fixed;z-index:200;width:288px;max-width:calc(100vw - 16px);padding:12px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 36px #00000030;animation:date-open .16s ease-out}.date-picker-head{display:flex;align-items:center;gap:5px;margin-bottom:12px}.date-picker-head b{flex:1;text-align:center;font-size:13px}.date-picker-head button{padding:3px 8px;border:0;background:var(--soft);font-size:20px}.date-picker-week,.date-picker-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.date-picker-week{font-size:11px;text-align:center;color:var(--muted);margin-bottom:6px}.date-picker-days button{padding:0;height:33px;border:0;border-radius:8px;background:transparent;transition:background .16s ease,color .16s ease,transform .16s ease}.date-picker-days button:hover:not(:disabled){background:var(--selection);transform:scale(1.08)}.date-picker-days button.date-in-range{background:var(--selection);color:var(--selection-text)}.date-picker-days button[aria-pressed=true],.date-picker-days button.date-range-start,.date-picker-days button.date-range-end{background:var(--accent);color:white;font-weight:700}.date-picker-days button:disabled{opacity:.35}.date-picker-days button:focus-visible{outline-offset:0}@keyframes date-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.date-popover{animation:none}.date-picker-days button{transition:none}}
.calendar-absence{background:var(--bg);color:var(--text);border:1px solid var(--line);border-left:4px solid var(--color);border-radius:8px;padding:10px 8px;overflow:hidden;z-index:1;overflow-wrap:anywhere}.calendar-absence b,.calendar-absence span,.calendar-absence small{display:block}.calendar-absence b{font-size:12px;line-height:1.4}.calendar-absence span{font-size:11px;margin-top:8px;font-weight:600}.calendar-absence small{font-size:11px;margin-top:6px;line-height:1.5}.calendar-absence .absence-all-day{color:var(--muted)}:root[data-mode=dark] .calendar-absence{background:var(--soft)}.overview-events .calendar-absence{margin-bottom:5px;padding:6px}.overview-events .calendar-absence span,.overview-events .calendar-absence small{margin-top:3px;font-size:10px}.list-absences:empty{display:none}.list-absences{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0 20px}.list-absence-item{margin-bottom:18px}.list-absence-item>span{display:block;margin-bottom:5px;font-size:12px}
.appointment-past{opacity:.6;filter:saturate(.35)}.appointment-past b,.appointment-past .event-code,.appointment-past .event-time,.appointment-past .therapist-tag{text-decoration:line-through}.appointment-past:hover{opacity:.85}.reminder-icon{display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle;width:20px;height:20px;margin:2px 3px 0 0;font-style:normal;font-weight:800;font-size:16px;line-height:1;background:var(--surface);color:var(--text);border-radius:4px;flex-shrink:0}.reminder-icon svg{width:19px;height:19px}.reminder-important{background:transparent}.reminder-banner{margin:16px 0;padding:16px;border:1px solid var(--line);border-left:4px solid var(--danger);border-radius:10px;background:var(--soft)}.reminder-line{display:flex;align-items:flex-start;gap:9px;margin:10px 0}.reminder-line p,.session-note p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}.session-note{padding:14px;margin:12px 0;border:1px solid var(--line);background:var(--soft);border-radius:10px}.session-note small{color:var(--muted);display:block;margin-top:8px}.session-note button{margin-top:10px;font-size:12px}.reminder-resolution{display:flex;gap:8px;flex-wrap:wrap}.appointment-notes-button{margin:0 0 14px}.block .reminder-icon{width:16px;height:16px;font-size:13px}.block .reminder-icon svg{width:16px;height:16px}
.reminder-type-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.reminder-type-options label{display:flex;align-items:center;gap:7px;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);cursor:pointer}.reminder-type-options input{width:15px;height:15px;margin:0;accent-color:var(--accent)}.reminder-type-options label:has(input:checked){background:var(--selection);border-color:var(--accent)}.reminder-type-options .reminder-icon{margin:0}
.reminder-type-options label,.reminder-type-options label *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.reminder-type-options label span,.reminder-type-options label i{pointer-events:none}.reminder-type-options label:hover{background:var(--selection)}.reminder-type-options label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.reminder-icon.reminder-payment{color:#18733b}:root[data-mode=dark] .reminder-icon.reminder-payment{color:#77e39b}
.patient-directory-head{padding:24px;display:flex;justify-content:space-between;align-items:center;gap:24px}.patient-directory-head h3{font-size:17px}.patient-directory-head p{margin-top:4px}.patient-search-box{display:flex;align-items:center;gap:10px;width:min(100%,480px);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:0 12px}.patient-search-box:focus-within{outline:2px solid var(--accent);outline-offset:1px}.patient-search-box>svg{width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:1.8;flex-shrink:0}.patient-search-box input{min-width:0;background:transparent;border:0;padding:13px 0;outline:none!important}.patient-search-box input::-webkit-search-cancel-button{display:none}.patient-search-box button{border:0;padding:0;width:28px;height:28px;font-size:20px;background:transparent;color:var(--muted)}.patient-search-box button[hidden]{display:none}.patient-results-bar{padding:12px 24px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);background:var(--soft);font-size:12px}.patient-directory-table th{background:var(--surface);padding:14px 24px}.patient-directory-table td{padding:18px 24px}.patient-directory-table tbody tr:hover{background:var(--soft)}.patient-identity{display:flex;gap:12px;align-items:center;min-width:180px}.patient-initials{width:38px;height:38px;border-radius:11px;background:var(--selection);color:var(--selection-text);display:grid;place-items:center;font-weight:700;flex-shrink:0;font-size:12px}.patient-identity b{font-weight:600}.patient-row-action{text-align:right;white-space:nowrap}.patient-row-action button{font-size:12px;padding:8px 12px}.patient-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-top:1px solid var(--line)}.patient-pagination:empty{display:none}.patient-pagination>div{display:flex;gap:12px;align-items:center;font-size:12px}.patient-pagination button{padding:5px 12px;font-size:18px}.patient-empty p{margin-top:8px}@media(max-width:720px){.patient-directory-head{flex-direction:column;align-items:stretch;padding:18px;gap:16px}.patient-search-box{width:100%}.patient-results-bar{padding:12px 18px}.patient-directory-table th,.patient-directory-table td{padding:14px 18px}.patient-pagination{padding:14px 18px}.patient-directory-table{min-width:650px}}
:root{--permission-granted:#18733b;--permission-denied:#bc2737}
:root[data-mode=dark]{--permission-granted:#77e39b;--permission-denied:#ff8f9d}

:root{--brand-panel:color-mix(in srgb,var(--text) 82%,var(--accent));--brand-panel-text:var(--theme-tint);--brand-panel-muted:color-mix(in srgb,var(--brand-panel-text) 80%,var(--brand-panel));--logo-backdrop:color-mix(in srgb,var(--theme-tint) 60%,var(--accent));}
:root[data-mode=dark]{--brand-panel:color-mix(in srgb,var(--surface) 82%,var(--accent));}
