:root{--navy:#1e3a5f;--blue:#2563eb;--blue-dark:#1d4ed8;--bg:#f5f7fb;--surface:#fff;--border:#e2e8f0;--text:#1c293a;--muted:#66758c;--shadow:0 4px 22px rgba(19,42,73,.055)}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;font:15px/1.48 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}a{color:var(--blue);text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}.muted{color:var(--muted)}.small{font-size:12px}.strong{font-weight:650}.block{width:100%}h1{font-size:clamp(23px,3vw,29px);line-height:1.2;margin:0 0 6px}h2{font-size:18px;margin:0 0 18px}p{margin:0}.topbar{background:var(--navy);color:#fff}.top-inner{max-width:1240px;margin:auto;min-height:66px;padding:10px 24px;display:flex;align-items:center;gap:30px}.brand{color:#fff;font-size:21px;letter-spacing:-.5px;font-weight:750;white-space:nowrap}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:6px;border-radius:9px;background:#fff2;color:inherit;font-size:25px}.topbar nav{display:flex;gap:5px;align-items:center}.topbar nav a{color:#d2dbea;padding:9px 13px;border-radius:9px;font-weight:600}.topbar nav a:hover,.topbar nav a.active{background:#ffffff24;color:#fff}.account-nav{margin-left:auto;display:flex;gap:15px;align-items:center;white-space:nowrap}.account-name{color:#f4f7fe}.text-button{border:0;background:transparent;color:#c7d8ff;padding:4px 0}.text-button:hover{text-decoration:underline}.inline-form{display:inline}.container{width:min(1190px,calc(100% - 40px));min-height:calc(100vh - 130px);margin:32px auto 50px}footer{text-align:center;color:#8c9aad;padding:18px 10px 24px;font-size:12px}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.padded{padding:25px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.page-heading p{margin-top:5px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-weight:650;border-radius:8px;border:1px solid transparent;min-height:42px;padding:10px 16px;line-height:1.2;transition:background .13s ease,transform .13s ease;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn.primary{color:#fff;background:var(--blue);border-color:var(--blue)}.btn.primary:hover{background:var(--blue-dark)}.btn.secondary{background:#fff;color:#344861;border-color:#d8e1eb}.btn.secondary:hover{background:#f7f9fd}.btn.danger{background:#fff3f2;color:#ae2635;border-color:#ffc4c4}.btn.danger:hover{background:#ffe7e6}.btn.small-btn{min-height:31px;padding:6px 10px;font-size:12px}.alert{border-radius:10px;border:1px solid;padding:12px 15px;margin-bottom:18px;font-weight:550}.alert.success{color:#166534;background:#ecfdf3;border-color:#a7efbe}.alert.error{color:#9f2424;background:#fff2f2;border-color:#ffc5c5}.alert.warning{color:#865300;background:#fff9e8;border-color:#f9d78e}.alert[hidden]{display:none}.filters{display:grid;grid-template-columns:1.2fr 1.1fr 1.2fr 2fr auto;gap:14px;padding:17px;align-items:end}.filters .btn{height:43px}.form-stack{display:flex;flex-direction:column;gap:17px}label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px;color:#3b4e65}input,select,textarea{width:100%;border:1px solid #cbd6e2;border-radius:8px;background:#fff;color:#253449;min-height:43px;padding:9px 11px;font-size:15px;font-weight:400}textarea{resize:vertical;min-height:110px}input::placeholder,textarea::placeholder{color:#9aa8b9}input:focus,select:focus,textarea:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.14)}.result-count{font-size:13px;color:var(--muted);margin:18px 2px 9px}.table-card{overflow:hidden}.appointments-table{width:100%;border-collapse:collapse;table-layout:auto}.appointments-table th{background:#f8fafc;color:#60738b;text-align:left;text-transform:uppercase;letter-spacing:.035em;font-size:11px;font-weight:750;padding:15px 13px}.appointments-table td{padding:17px 13px;border-top:1px solid #eaf0f6;vertical-align:middle}.appointments-table tbody tr:hover{background:#fbfdff}.appointments-table td:nth-child(1),.appointments-table td:nth-child(2){white-space:nowrap}.appointments-table td:nth-child(4){min-width:170px}.note-preview{margin-top:4px;max-width:270px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.status{display:inline-block;border-radius:999px;font-weight:700;padding:5px 10px;font-size:12px;white-space:nowrap}.status-pending{color:#946100;background:#fff4d9}.status-confirmed{color:#1d5db2;background:#e7f0ff}.status-completed{color:#187044;background:#e4f8ed}.status-cancelled{color:#7b8392;background:#edf0f4}.actions-cell{text-align:right;white-space:nowrap}.empty-state{padding:65px 15px;text-align:center;color:#8491a3}.edit-card{padding:26px;max-width:730px}.form-grid{display:grid;gap:17px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-actions{display:flex;gap:10px;margin-top:3px}.delete-section{border-top:1px solid var(--border);margin-top:27px;padding-top:22px}.two-column{display:grid;grid-template-columns:350px 1fr;gap:20px;align-items:start}.user-item{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--border);align-items:start}.user-header{display:flex;gap:3px;flex-direction:column}.user-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.user-controls details{position:relative}.user-controls summary{color:var(--blue);font-size:13px;cursor:pointer}.reset-form{display:flex;gap:8px;align-items:center;padding-top:9px}.reset-form input{min-width:150px;max-width:220px}.login-shell{display:flex;align-items:flex-start;justify-content:center;padding-top:min(12vh,75px)}.login-card{width:100%;max-width:390px;padding:34px}.login-card h1{text-align:center}.login-card>.muted{text-align:center;margin:5px 0 26px}.login-logo{margin:0 auto 14px;border-radius:16px;width:60px;height:60px;display:grid;place-items:center;background:#e8efff;color:var(--navy);font-size:37px}.calendar-card{overflow:hidden}.calendar-toolbar{display:flex;justify-content:center;align-items:center;gap:12px;padding:20px 18px}.calendar-toolbar h2{min-width:220px;text-align:center;margin:0}.calendar-toolbar .today-btn{margin-left:12px}.icon-btn{width:42px;padding:0;font-size:24px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--border)}.weekday{font-weight:750;font-size:12px;color:#6f8296;background:#f7f9fc;padding:11px;text-align:center}.calendar-cell{color:var(--text);border-top:1px solid var(--border);border-right:1px solid var(--border);padding:9px;min-width:0;min-height:115px;display:block;transition:background .12s}.calendar-cell:hover{background:#f4f8ff}.calendar-cell:nth-child(7n){border-right:0}.calendar-cell.outside{background:#fafbfe}.calendar-cell.is-today{box-shadow:inset 0 0 0 2px #93b8ff;background:#f5f9ff}.day-number{font-size:13px;font-weight:700;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;margin-bottom:7px}.is-today .day-number{background:#2563eb;color:#fff}.event{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:5px;padding:4px 6px;margin-top:4px;font-size:11px;color:#154c93;background:#e8f1ff}.event-pending{color:#875900;background:#fff0ca}.event-completed{color:#177344;background:#e6f7ee}.event-cancelled{color:#768297;background:#eef0f4}.event span{font-weight:800}.more-events{font-size:11px;font-weight:600;color:#667f9b}.mobile-count{display:none}.calendar-help{padding:13px 17px;border-top:1px solid var(--border)}
@media(max-width:950px){.top-inner{gap:14px}.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters .search-field{grid-column:1/-1}.filters .btn{width:100%}.two-column{grid-template-columns:1fr}.user-controls{justify-content:flex-start}}
@media(max-width:740px){.container{width:calc(100% - 24px);margin-top:20px}.top-inner{padding:10px 12px;gap:8px;flex-wrap:wrap}.brand{font-size:19px}.topbar nav{order:3;flex-basis:100%;justify-content:center;border-top:1px solid #ffffff25;padding-top:8px}.topbar nav a{flex:1;text-align:center;font-size:13px;padding:7px 5px}.account-nav{gap:10px;font-size:12px}.account-name{max-width:98px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-heading{align-items:flex-start}.page-heading .btn{font-size:13px;padding:9px 11px;min-height:39px}.filters{gap:10px;padding:13px}.filters label{font-size:12px}.form-grid.three{grid-template-columns:1fr 1fr}.form-grid.three label:last-child{grid-column:1/-1}.edit-card,.padded{padding:17px}.appointments-table thead{display:none}.appointments-table,.appointments-table tbody,.appointments-table tr,.appointments-table td{display:block;width:100%}.appointments-table tr{padding:15px 13px;border-bottom:1px solid var(--border)}.appointments-table tr:last-child{border-bottom:0}.appointments-table td{border:0;padding:4px 0;display:flex;align-items:flex-start;gap:11px;white-space:normal!important}.appointments-table td:before{content:attr(data-label);display:block;flex:0 0 100px;width:100px;color:#7a8ba0;font-size:12px}.appointments-table td.actions-cell{display:block;text-align:left;padding-left:111px;margin-top:4px}.appointments-table td.actions-cell:before{display:none}.note-preview{max-width:170px}.calendar-toolbar{gap:6px;padding:13px 8px}.calendar-toolbar h2{min-width:0;flex:1;font-size:16px}.calendar-toolbar .today-btn{margin-left:0}.calendar-grid .calendar-cell{min-height:67px;padding:5px 2px;text-align:center}.calendar-grid .day-number{margin:2px auto 3px;width:26px;height:26px}.calendar-grid .month-events{display:none}.calendar-grid .mobile-count{display:block;color:#255da0;font-size:9px;font-weight:750;white-space:nowrap}.weekday{font-size:10px;padding:10px 2px}.user-item{flex-direction:column}.user-controls{justify-content:flex-start}.login-shell{padding-top:20px}}
@media(max-width:390px){.calendar-grid .calendar-cell{min-height:58px}.calendar-grid .mobile-count{font-size:9px}.account-nav{max-width:160px}.page-heading{flex-direction:column;align-items:stretch}.page-heading .btn{align-self:flex-start}.appointments-table td:before{flex-basis:90px;width:90px}.appointments-table td.actions-cell{padding-left:101px}}

.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 24px;gap:18px}.details div{border-bottom:1px solid var(--border);padding-bottom:10px}.details dt{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}.details dd{font-size:15px;font-weight:600;margin:0}.comments-full{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:520px){.details{grid-template-columns:1fr}}

/* v1.2 — half-hourly day schedule. 36px per half-hour; must match $slotPixels in index.php. */
.day-card{overflow:hidden}.day-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:17px 19px;border-bottom:1px solid var(--border)}
.day-stepper{display:flex;gap:8px;align-items:center}.day-jump{display:flex;gap:9px;align-items:end}.day-jump label{font-size:12px;display:flex;flex-direction:column;gap:5px}.day-jump input[type=date]{width:168px;min-height:42px}
.day-instruction{padding:12px 20px;color:var(--muted);font-size:13px}.day-scroll-hint{padding:0 20px 10px;color:#7a5c22;font-size:12px}
.day-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}.day-grid{display:grid;grid-template-columns:72px minmax(0,1fr);width:100%;border-top:1px solid #e5edf5}
.day-hours{position:relative;background:#f8fafc;border-right:1px solid var(--border)}.day-hour{height:36px;display:flex;justify-content:flex-end;align-items:flex-start;padding:0 9px 0 0;transform:none;font-size:12px;font-weight:650;color:#8998ac;line-height:1;position:relative;top:-6px}.day-hour.full-hour{color:#566e89;font-weight:750}.day-hour-end{position:absolute;bottom:-6px;right:9px;font-size:12px;font-weight:750;color:#566e89}
.day-slots{position:relative;min-height:1008px;background:#fff}.day-slot{height:36px;border-top:1px dashed #edf1f6;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;color:#2163b3;position:relative;transition:background .12s}.day-slot:first-child{border-top:0}.day-slot.full-hour:not(:first-child){border-top-color:#cbd9e7;border-top-style:solid}.day-slot:hover,.day-slot:focus-visible{background:#eff7ff}.day-slot span{opacity:0;font-size:12px;font-weight:700;padding:5px 8px;background:#edf5ff;border-radius:6px}.day-slot:hover span,.day-slot:focus-visible span{opacity:1}
.day-slots>.timeline-events{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.day-event{position:absolute;pointer-events:auto;display:flex;flex-direction:column;gap:1px;overflow:hidden;border-left:4px solid;border-radius:7px;padding:6px 8px;min-height:0;box-shadow:0 1px 3px #00000010;z-index:2;transition:filter .12s}.day-event:hover,.day-event:focus-visible{filter:brightness(.965);z-index:4}.day-event-time{font-weight:800;font-size:11px;letter-spacing:.01em;white-space:nowrap}.day-event-space{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-event-subject{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-event-creator{font-size:11px;margin-top:4px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-event-short{padding:0 5px;border-radius:3px}.day-event-short .day-event-space,.day-event-short .day-event-subject,.day-event-short .day-event-creator{display:none}.day-event-short .day-event-time{line-height:1.2;font-size:10px}
.day-event-pending{background:#fff3d0;border-color:#eab54d;color:#795200}.day-event-confirmed{background:#e3f0ff;border-color:#3c86dd;color:#174e8e}.day-event-completed{background:#def6e9;border-color:#3cab72;color:#146541}.day-event-cancelled{background:#eef1f6;border-color:#9aa8b8;color:#68788b;opacity:.83}
.day-now-line{position:absolute;left:0;right:0;border-top:2px solid #e34b50;height:0;z-index:5;pointer-events:none}.day-now-line:before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;background:#e34b50;border-radius:50%}
.day-legend{border-top:1px solid var(--border);padding:13px 19px;display:flex;flex-wrap:wrap;gap:10px 18px}.day-legend-item{display:flex;align-items:center;gap:6px;color:#64748b;font-size:12px}.day-legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px}.dot-pending{background:#eab54d}.dot-confirmed{background:#3c86dd}.dot-completed{background:#3cab72}.dot-cancelled{background:#9aa8b8}.day-outside{margin-top:16px;padding:18px 20px}.day-outside h2{margin-bottom:12px}.day-outside-row{display:block;padding:9px 0;border-top:1px solid var(--border)}
@media(max-width:740px){.day-toolbar{padding:12px;gap:10px}.day-jump{width:100%;align-items:end}.day-jump input[type=date]{width:100%;min-width:0}.day-jump label{flex:1}.day-jump .btn{min-height:43px}.day-instruction{padding:10px 12px}.day-grid{grid-template-columns:54px minmax(0,1fr)}.day-hour,.day-hour-end{font-size:11px;padding-right:5px;right:5px}.day-hour-end{right:0}.day-slot{padding-right:6px}.day-event{padding:4px 5px;border-left-width:3px}.day-event-space{font-size:12px}.day-event-time{font-size:10px}.day-legend{padding:11px 12px;gap:8px 12px}}
@media(hover:none){.day-slot:active{background:#eff7ff}.day-slot:active span{opacity:1}}

/* v1.4: the monthly calendar has in-flow events, fully separate from daily absolute positions. */
.calendar-cell>.month-events{display:block;position:static;inset:auto;pointer-events:auto;min-width:0;overflow:hidden}
@media(max-width:740px){.calendar-grid .calendar-cell>.month-events{display:none}}
.day-slots>.timeline-events>.day-event{position:absolute}

/* v1.5: daily event overlay is independent of monthly calendar and legacy day-events styles. */
.rv15-day-grid{width:100%;min-width:0;grid-template-columns:72px minmax(0,1fr)}
.rv15-day-slots{position:relative;min-width:0;width:100%;min-height:1008px}
.rv15-day-slots>.rv15-event-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.rv15-day-slots>.rv15-event-layer>.rv15-event{position:absolute;display:flex;flex-direction:column;min-width:0;max-width:none;min-height:0;box-sizing:border-box;pointer-events:auto;overflow:hidden}
@media(max-width:740px){.rv15-day-grid{grid-template-columns:54px minmax(0,1fr)}.rv15-day-slots>.rv15-event-layer>.rv15-event{padding:4px 6px}}

/* v1.6 - real site uses CSP style-src 'self', so dynamic styles are provided
   through a nonce-bearing stylesheet block, never via HTML style attributes. */
.rv16-day-grid{display:grid;grid-template-columns:72px minmax(0,1fr);width:100%;min-width:0}
.rv16-day-slots{position:relative;min-width:0;width:100%;min-height:1008px}
.rv16-day-slots>.rv16-event-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.rv16-day-slots>.rv16-event-layer>.rv16-event{position:absolute;display:flex;flex-direction:column;min-width:0;max-width:none;min-height:0;box-sizing:border-box;pointer-events:auto;overflow:hidden}
@media(max-width:740px){.rv16-day-grid{grid-template-columns:54px minmax(0,1fr)}.rv16-day-slots>.rv16-event-layer>.rv16-event{padding:4px 6px}}

/* v1.7 — one new-appointment action in the global header; compact mobile layout. */
.new-appointment-nav{width:40px;height:40px;min-width:40px;display:inline-flex;justify-content:center;align-items:center;border-radius:10px;background:#f28a1c;color:#fff;font-size:29px;line-height:1;font-weight:500;text-decoration:none;box-shadow:0 2px 6px #0000001f;flex-shrink:0}
.new-appointment-nav:hover,.new-appointment-nav:focus-visible{background:#dc7510;color:#fff}
/* The logout success flash should be ABOVE the login card, not beside it. */
.login-shell{flex-direction:column;align-items:center;justify-content:flex-start;gap:12px}
.login-shell>.alert{width:100%;max-width:390px;margin:0}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Simple one-line day navigation: previous date, picker, next date, today. */
.day-toolbar{justify-content:center;flex-wrap:nowrap;gap:9px;padding:12px 16px}
.day-toolbar .day-arrow{width:39px;min-width:39px;height:40px;min-height:40px;padding:0;font-size:24px}
.day-date-form{display:flex;flex:0 1 174px;min-width:0;margin:0;align-items:center}
.day-date-input{width:100%;height:40px;min-height:40px;padding:7px 9px;border:1px solid #cbd6e2;border-radius:8px;font-size:14px;background:#fff}
.day-toolbar .day-today{height:40px;min-height:40px;padding:0 13px;font-size:13px}
.day-instruction{padding:8px 16px;font-size:12px}
.rv16-day-grid .day-hour:first-child{top:2px}
@media(max-width:740px){
  .top-inner{padding:7px 12px 8px;gap:6px 8px;min-height:0}
  .brand{font-size:18px}
  .brand-icon{width:27px;height:27px;font-size:22px;margin-right:3px}
  .topbar nav{padding-top:6px;gap:3px}
  .topbar nav a{padding:6px 5px;font-size:12px}
  .account-nav{gap:8px}
  .account-name{max-width:90px;font-size:12px}
  .text-button{font-size:12px}
  .new-appointment-nav{height:36px;width:36px;min-width:36px;font-size:26px;border-radius:9px}
  .container{margin-top:16px}
  .page-heading{margin-bottom:12px}
  .page-heading h1{font-size:23px}
  .page-heading p{font-size:12px}
  .day-toolbar{padding:8px 9px;gap:7px}
  .day-toolbar .day-arrow{width:35px;min-width:35px;height:38px;min-height:38px}
  .day-date-form{flex:1 1 150px;max-width:200px}
  .day-date-input{min-height:38px;height:38px;font-size:13px;padding:5px 7px}
  .day-toolbar .day-today{height:38px;min-height:38px;padding:0 10px;font-size:12px}
  .day-instruction{display:none}
}
@media(max-width:380px){
  .top-inner{gap:5px 6px;padding:6px 9px}
  .account-nav{gap:6px}
  .account-name{max-width:65px}
  .brand{font-size:17px}
  .brand-icon{margin-right:1px;width:26px;height:26px}
  .day-toolbar{gap:5px;padding:7px 7px}
  .day-toolbar .day-arrow{width:31px;min-width:31px}
  .day-toolbar .day-today{padding:0 6px}
  .day-date-input{font-size:12px;padding:5px 4px}
}