:root{
  --navy:#1f4e79;
  --navy-dark:#163a5c;
  --navy-light:#e9f0f7;
  --accent:#2e75b6;
  --ink:#1f2937;
  --text:#374151;
  --muted:#6b7280;
  --border:#c9d2dc;
  --border-soft:#dde4ec;
  --bg:#f4f6f9;
  --green:#176b36;
  --green-bg:#eef7f1;
  --green-border:#bfe3c9;
  --red:#9b1c1c;
  --red-bg:#fdf1f1;
  --red-border:#f2c4c4;
  --radius:6px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;border-top:4px solid var(--navy);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
@supports(min-height:100svh){body{min-height:100svh}}
.container{max-width:960px;margin:0 auto;padding:24px 20px;flex:1 0 auto;display:flex;flex-direction:column}
.container:has(.site-footer){padding-bottom:0}
.container.narrow{max-width:460px;flex:0 0 auto}
body.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center}
body.login-page .container.narrow{margin:0}

/* --- Institutional header --- */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}
.header.navbar{padding:0 0 16px}
.header.navbar-expand-lg{justify-content:space-between}
.header.navbar>.navbar-collapse{flex-grow:0}
@media(max-width:991.98px){
  .header.navbar .header-actions{width:100%;align-items:stretch}
}
.header-toggler{border:1px solid var(--border);border-radius:6px}
.header-toggler:focus,.header-toggler:focus-visible{outline:2px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 3px rgba(31,78,121,.14)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.emblem{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-weight:700;font-size:12px;letter-spacing:.06em;border-radius:8px;text-transform:uppercase}
.header h1,.header .brand .header-title{margin:0 0 2px;font-size:22px;font-weight:700;color:var(--ink);line-height:1.25}
.header p{margin:0;font-size:13px;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* --- Module navigation (shared admin header nav) ---
   One segmented group instead of a row of unrelated CTAs: the current module
   is solid, the other modules are quiet outlines, and Log Out stays a muted,
   visually separate utility. */
.module-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.module-nav .module-nav-item{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;font-size:13px;font-weight:600;line-height:1.4;border:1px solid var(--border-soft);border-radius:6px;background:#fff;color:var(--navy);text-decoration:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.module-nav .module-nav-item:hover{background:var(--navy-light);border-color:#c6d4e4;color:var(--navy);text-decoration:none}
.module-nav .module-nav-item.active,.module-nav .module-nav-item[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.module-nav .module-nav-item.active:hover,.module-nav .module-nav-item[aria-current="page"]:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.module-nav .module-nav-item:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.module-nav .module-nav-logout{margin-left:8px;color:var(--muted);border-style:dashed}
.module-nav .module-nav-logout:hover{background:#f1f2f4;border-color:#d7dce2;color:var(--red)}
@media(max-width:991.98px){
  .module-nav{width:100%;flex-direction:column;align-items:stretch}
  .module-nav .module-nav-item{width:100%}
  .module-nav .module-nav-logout{margin-left:0;margin-top:4px}
}

/* Appointments section dropdown: the top-level control groups the two
   appointment pages instead of listing them side by side. Bootstrap's dropdown
   Data API handles open/close, keyboard and outside-click; the menu is styled
   through the shared .module-nav classes so it also renders on the QR Scanner
   page, which does not load bootstrap.min.css. Below 992px the sub-links render
   inline so every destination stays reachable by touch. */
.module-nav .module-nav-dropdown{position:relative}
.module-nav .module-nav-caret{display:inline-block;width:0;height:0;margin-left:7px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s ease}
.module-nav .module-nav-toggle::after{display:none}
.module-nav .module-nav-toggle[aria-expanded="true"] .module-nav-caret{transform:rotate(180deg)}
.module-nav .module-nav-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:1030;min-width:240px;margin:0;padding:6px;background:#fff;border:1px solid var(--border-soft);border-radius:8px;box-shadow:0 12px 30px rgba(16,24,40,.16);display:none}
.module-nav .module-nav-menu.show{display:block}
.module-nav .module-nav-menu .module-nav-item{display:flex;width:100%;justify-content:flex-start;border-color:transparent;background:transparent;padding:8px 12px;text-align:left}
.module-nav .module-nav-menu .module-nav-item:hover{background:var(--navy-light);border-color:transparent}
.module-nav .module-nav-menu .module-nav-item.active,.module-nav .module-nav-menu .module-nav-item[aria-current="page"]{background:var(--navy);border-color:transparent;color:#fff}
@media(min-width:992px){
  .module-nav .module-nav-toggle{width:auto}
}
@media(max-width:991.98px){
  .module-nav .module-nav-dropdown{width:100%}
  .module-nav .module-nav-menu{position:static;display:block;width:100%;min-width:0;margin:4px 0;padding:4px;background:var(--navy-light);border:1px solid var(--border-soft);box-shadow:none}
  .module-nav .module-nav-menu .module-nav-item{margin-bottom:2px}
  .module-nav .module-nav-menu .module-nav-item:last-child{margin-bottom:0}
}

h1{margin:0 0 6px;font-size:24px;color:var(--ink);font-weight:700;line-height:1.25}
h2{margin:0 0 12px;font-size:17px;color:var(--navy);font-weight:700}
.step-heading{margin:0 0 12px;font-size:17px;color:var(--navy);font-weight:700}
p{margin:0 0 12px}
.muted{color:var(--muted);font-size:14px}

/* --- Cards --- */
.card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card .notice{margin:12px 0 0}
.steps-title{font-size:12px;color:var(--navy);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.steps,.rules{margin:0;padding-left:20px;font-size:14px;color:var(--text)}
.steps li,.rules li{margin-bottom:6px;line-height:1.6}
#startBtn{margin-top:20px}
.intro{font-size:15px;color:var(--text);margin-bottom:4px}

/* --- Forms --- */
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--text)}
.field-label{display:inline}
.req{color:var(--red);font-weight:700}
input,select{font:inherit;font-size:16px;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,78,121,.14)}
.form-control,.form-select{border-color:var(--border);border-radius:6px}
.form-control:focus,.form-select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,78,121,.14)}
.form-label{color:var(--text);font-weight:600}

/* --- Buttons --- */
button,.button-link{font:inherit;font-size:15px;font-weight:600;padding:10px 16px;border-radius:6px;cursor:pointer;display:inline-block;text-decoration:none;text-align:center;background:#fff;color:var(--text);border:1px solid var(--border);transition:background-color .15s ease,border-color .15s ease}
button:hover,.button-link:hover{background:#f0f3f7}
button:focus-visible,.button-link:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
button{width:100%}
.btn-primary{--bs-btn-bg:var(--navy);--bs-btn-border-color:var(--navy);--bs-btn-hover-bg:var(--navy-dark);--bs-btn-hover-border-color:var(--navy-dark);--bs-btn-active-bg:var(--navy-dark);--bs-btn-active-border-color:var(--navy-dark);--bs-btn-focus-shadow-rgb:31,78,121;--bs-btn-disabled-bg:var(--navy);--bs-btn-disabled-border-color:var(--navy)}
.btn-success{--bs-btn-bg:var(--green);--bs-btn-border-color:var(--green);--bs-btn-hover-bg:#14592c;--bs-btn-hover-border-color:#14592c;--bs-btn-active-bg:#14592c;--bs-btn-active-border-color:#14592c;--bs-btn-focus-shadow-rgb:23,107,54}
.btn-danger{--bs-btn-bg:var(--red);--bs-btn-border-color:var(--red);--bs-btn-hover-bg:#7f1717;--bs-btn-hover-border-color:#7f1717;--bs-btn-active-bg:#7f1717;--bs-btn-active-border-color:#7f1717;--bs-btn-focus-shadow-rgb:155,28,28}
.btn-outline-primary{--bs-btn-color:var(--navy);--bs-btn-border-color:var(--navy);--bs-btn-hover-bg:var(--navy);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--navy);--bs-btn-active-color:#fff;--bs-btn-focus-shadow-rgb:31,78,121}
.btn:disabled,.btn.disabled{background:var(--bg);border-color:var(--border);color:var(--muted);opacity:1;cursor:not-allowed}
option:disabled{color:var(--muted)}

/* --- Alerts --- */
.alert{padding:12px 14px;border-radius:6px;margin-bottom:16px;font-size:14px;border:1px solid;overflow-wrap:anywhere}
.alert.error,.alert-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.alert.success,.alert-success{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}

/* Appointment Dates flash feedback: one icon-led inline alert under the header,
   so the result of Add / Edit / Open / Close / Remove is obvious at a glance. */
.dates-flash{display:flex;align-items:flex-start;gap:10px;font-weight:500}
.dates-flash-icon{flex:0 0 auto;font-weight:700;line-height:1.35}
.dates-flash-text{flex:1 1 auto}

/* Semantic action colours for the Appointment Date Details Panel. Close Date is
   a reversible state change, so it is amber; the destructive red stays reserved
   for Remove Date. Scoped to the panel so Bootstrap's shared warning button
   (admin.php Reschedule) is untouched. */
#dateOffcanvas .btn-outline-warning{--bs-btn-color:#8a5300;--bs-btn-border-color:#e0a800;--bs-btn-hover-bg:#fff3cd;--bs-btn-hover-border-color:#d39e00;--bs-btn-hover-color:#7a4a00;--bs-btn-active-bg:#ffe69c;--bs-btn-active-border-color:#d39e00;--bs-btn-active-color:#7a4a00;--bs-btn-focus-shadow-rgb:224,168,0}

.record{background:#f7f9fb;border:1px solid var(--border-soft);padding:14px 16px;border-radius:6px;margin-bottom:16px;line-height:1.7;font-size:14px}
.record strong{font-size:15px}

/* --- Booking date grid --- */
.date-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.date-box{padding:6px 4px;border:1px solid var(--border-soft);border-radius:6px;display:grid;gap:1px;background:#fff;min-width:0;text-align:center}
.date-box strong{font-size:18px;color:var(--ink);overflow-wrap:anywhere;line-height:1.1}
.date-box .date-month{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.date-box span{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.date-box.pick{cursor:pointer}
.date-box.pick:hover{border-color:var(--navy);background:#f7fafc}
.date-box.pick:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.date-box.pick .avail{color:var(--green);font-weight:600;font-size:10px}
.date-box.selected{border-color:var(--navy);background:var(--navy-light);box-shadow:inset 0 0 0 1px var(--navy)}
.date-box.selected span{color:var(--navy);font-weight:600}
.date-box.full{background:#eef1f4;border-color:#d7dce2;cursor:not-allowed}
.date-box.full strong{color:#7c8794}
.date-box.full span{color:var(--red);font-weight:700}
.date-box.closed {opacity: 0.55;cursor: not-allowed;pointer-events: none;}
#bookingCard .step-heading{margin-top:14px}
#bookingCard .muted{margin-bottom:6px;font-size:13px}

.notice{font-size:13px;color:var(--muted)}
.hidden{display:none}
.full-tag{color:var(--red);font-weight:700}

/* --- Feedback modal --- */
#feedbackModal .modal-content{border:none;border-radius:10px;box-shadow:0 12px 40px rgba(16,24,40,.18);overflow:hidden}
#feedbackModal .modal-body.fb-body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 28px 16px;text-align:center}
#feedbackModal .modal-title{text-align:center;width:100%}
.fb-icon{font-size:40px;line-height:1;margin-bottom:4px;text-align:center}
.fb-icon .bi{display:block}
.fb-msg{margin:0;font-size:15px;color:var(--text);line-height:1.6;overflow-wrap:anywhere;width:100%;text-align:center}
#feedbackModal .modal-footer{border-top:1px solid var(--border-soft);padding:12px 20px;justify-content:center}
#feedbackModal .modal-footer .btn{min-width:0;padding:8px 32px;font-size:15px}

.fb-success .fb-icon{color:var(--green)}
.fb-error .fb-icon{color:var(--red)}
.fb-warning .fb-icon{color:#b45309}
.fb-info .fb-icon{color:var(--accent)}

@media(max-width:480px){
  #feedbackModal .modal-dialog{max-width:340px;margin:16px auto}
  #feedbackModal .modal-body.fb-body{padding:24px 18px 14px}
  .fb-icon{font-size:34px;margin-bottom:2px}
  #feedbackModal .modal-footer .btn{padding:8px 28px;font-size:14px}
}

@keyframes modalPopIn{
  from{opacity:0;transform:scale(.92) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
#feedbackModal .modal-content{animation:modalPopIn .2s ease}

/* --- QR confirmation --- */
.qr-block{margin-top:12px;padding:14px;background:#fff;border:1px solid var(--border-soft);border-radius:6px;display:inline-block;text-align:center}
.qr-block canvas,.qr-img{width:198px;height:198px;display:block;margin:0 auto 8px;background:#fff;image-rendering:pixelated}
.qr-ref{font-size:12.5px;color:var(--muted);text-align:center;max-width:220px;display:block;margin:0 auto}
.existing-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.existing-actions .btn{flex:1 1 0;min-width:0}
.screenshot-notice{text-align:center;font-size:13.5px;color:var(--muted);margin:12px 0 4px;line-height:1.5}

/* --- Confirmation export --- */
#confirmationExport{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:24px;margin-bottom:16px}
.export-header{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--navy)}
.export-emblem{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-weight:700;font-size:11px;letter-spacing:.06em;border-radius:8px;text-transform:uppercase}
.export-title{font-size:17px;font-weight:700;color:var(--ink);text-align:center}
.export-subtitle{font-size:13px;color:var(--muted);text-align:center}
.export-body{display:grid;gap:8px;font-size:14px;line-height:1.6}
.export-row{display:grid;grid-template-columns:130px 1fr;gap:8px}
.export-label{color:var(--muted);font-weight:600;font-size:13px}
.export-row strong{color:var(--ink)}

@media(max-width:480px){
  #confirmationExport{padding:18px 14px}
  .export-row{grid-template-columns:110px 1fr;gap:6px}
  .export-label{font-size:12px}
}

@media print{
  body{background:#fff;border-top:0}
  .container{max-width:100%;padding:0}
  .header,.container > .alert,.card:not(#existingCard),#existingActions,.site-footer,.screenshot-notice{display:none!important}
  #existingCard{display:block!important;border:0;box-shadow:none}
  #existingCard > h2,#existingCard > .alert,#existingCard > a,#existingCard > .notice{display:none!important}
  #confirmationExport{border:0;padding:0;margin:0}
}

/* --- Name autocomplete --- */
.autocomplete{position:relative}
.suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(16,24,40,.1);z-index:100;max-height:min(320px,55vh);overflow-y:auto}
.suggestion{display:grid;gap:2px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #eef1f4;text-align:left;overflow-wrap:anywhere}
.suggestion:last-child{border-bottom:0}
.suggestion:hover,.suggestion.active{background:var(--navy-light)}
.suggestion strong{font-size:14px;color:var(--ink)}
.suggestion span{font-size:12.5px;color:var(--muted)}
.sug-status{padding:12px 14px;color:var(--muted);font-size:14px}

/* --- Tables --- */
.table-wrap{overflow:auto;border:1px solid var(--border-soft);border-radius:6px}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:10px 12px;border-bottom:1px solid #eef1f4;text-align:left;white-space:nowrap}
th{background:#f6f8fa;color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f8fafb}
td a{color:var(--navy);font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}

/* --- Reports --- */
.stat-strip{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.stat-box{flex:1;min-width:130px;background:#f7f9fb;border:1px solid var(--border-soft);border-radius:6px;padding:10px 14px;display:grid;gap:2px}
.stat-num{font-size:20px;font-weight:700;color:var(--navy)}
.stat-label{font-size:12.5px;color:var(--muted)}
.summary-scroll{max-height:300px}
.summary-scroll th{position:sticky;top:0;z-index:1}

.report-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.report-bar select,.report-bar input{width:auto;font-size:14px;padding:8px 10px}
.report-bar input[type=search]{min-width:180px}
.report-bar button{width:auto;padding:8px 14px;font-size:14px}
.sr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.table-scroll{max-height:min(560px,60vh);min-height:240px}
.appt-loading table{opacity:.55;pointer-events:none}
.table-scroll th{position:sticky;top:0;z-index:1}

.date-tile{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--border-soft);border-radius:6px;background:#fff;line-height:1.3}
.date-tile-date{font-size:12.5px;color:var(--ink);font-weight:700}
.date-tile-meta{font-size:11.5px;color:var(--muted)}
.date-tile-actions{display:flex;align-items:center;gap:6px;justify-content:space-between}
.date-tile-csv{font-size:11px;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.date-tile-csv:hover{text-decoration:underline}
.date-tile.full{background:var(--red-bg);border-color:var(--red-border)}
.date-tile.full .date-tile-date{color:var(--red)}

/* --- Dates overview scrollable grid --- */
.dates-overview-scroll{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:248px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.dates-overview-scroll::-webkit-scrollbar{width:6px}
.dates-overview-scroll::-webkit-scrollbar-track{background:transparent}
.dates-overview-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.dates-overview-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.overview-toggle{width:auto}
.filters-bar .btn{width:auto}
.chevron{display:inline-block;width:8px;height:8px;margin-left:5px;vertical-align:middle;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}
.chevron.open{transform:rotate(225deg)}
.appt-row{cursor:pointer}
.appt-details dt{font-weight:600;color:var(--text)}
.appt-details dt,.appt-details dd{margin-bottom:.35rem;overflow-wrap:anywhere}
.edit-ss{position:relative}

/* --- Reschedule date tiles --- */
.resched-dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.resched-tile{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--border-soft);border-radius:6px;background:#fff;line-height:1.3;cursor:pointer;text-align:left;transition:border-color .15s ease,box-shadow .15s ease}
.resched-tile:hover:not(.current):not(.full){border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,78,121,.1)}
.resched-tile.selected{border-color:var(--navy);background:var(--navy-light);box-shadow:0 0 0 3px rgba(31,78,121,.18)}
.resched-tile.current{background:#f1f2f4;border-color:#d7dce2;cursor:default}
.resched-tile.full{background:var(--red-bg);border-color:var(--red-border);cursor:default}
.resched-tile-date{font-size:13px;color:var(--ink);font-weight:700}
.resched-tile.current .resched-tile-date{color:var(--muted)}
.resched-tile.full .resched-tile-date{color:var(--red)}
.resched-tile-meta{font-size:11.5px;color:var(--muted)}
.resched-tile.full .resched-tile-meta{color:var(--red)}

/* --- Status badges --- */
.status-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.5;border:1px solid transparent}
.status-badge.status-booked{background:var(--navy-light);color:var(--navy);border-color:#c6d4e4}
.status-badge.status-open{background:var(--navy-light);color:var(--navy);border-color:#c6d4e4}
.status-badge.status-completed{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.status-badge.status-cancelled,.status-badge.status-other,.status-badge.status-closed{background:#f1f2f4;color:var(--muted);border-color:#d7dce2}

/* --- Cancel confirmation modal --- */
.cancel-details dt{font-weight:600;color:var(--text)}
.cancel-details dt,.cancel-details dd{margin-bottom:.35rem;overflow-wrap:anywhere}

/* --- Searchable select (school / course / year level) --- */
.searchable-select{position:relative;display:block}
/* Shared recipe so all dropdown controls look the same: the three searchable
   toggles and the normal appointment-date select. */
.ss-toggle{width:100%;font-size:16px;font-weight:600;line-height:1.5;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background-color:#fff;color:var(--ink)}
.ss-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;white-space:normal;overflow-wrap:anywhere}
.ss-toggle:hover{background:#fff}
.ss-toggle:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,78,121,.14)}
.ss-value{flex:1;min-width:0}
.ss-value.ss-empty{color:var(--muted);font-weight:600}
.ss-caret{flex:0 0 auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-2px;color:var(--muted)}
.ss-panel{display:flex;flex-direction:column;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(16,24,40,.1);z-index:120;max-height:min(320px,55vh)}
.ss-panel.hidden{display:none}
.ss-search{border:0;border-bottom:1px solid var(--border-soft);border-radius:0;background:#f7f9fb;width:100%;padding:10px 12px;font-size:16px}
.ss-search:focus{outline:none;border-color:var(--navy);box-shadow:none}
.ss-list{overflow-y:auto;max-height:min(260px,45vh)}
.ss-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid #eef1f4;font-size:14px;line-height:1.5;text-align:left;overflow-wrap:anywhere}
.ss-item:last-child{border-bottom:0}
.ss-item:hover,.ss-item.active{background:var(--navy-light)}
.ss-none{padding:12px 14px;color:var(--muted);font-size:14px}

@media(max-width:991px){.date-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.header:not(.navbar){align-items:flex-start;flex-direction:column;gap:10px}.header-actions{width:100%;justify-content:flex-start}.container{padding:20px 16px}}
@media(max-width:390px){.date-grid{grid-template-columns:repeat(3,1fr);gap:5px}.date-box{padding:5px 3px}.date-box strong{font-size:16px}.dates-overview-scroll{grid-template-columns:repeat(2,1fr);max-height:200px}}
@media(max-width:560px){.report-bar input[type=search]{min-width:0;flex:1}.table-scroll{max-height:calc(100vh - 400px)}.dates-overview-scroll{grid-template-columns:repeat(3,1fr);max-height:220px}}
@media(max-width:480px){.container{padding:14px 12px}.card{padding:16px;margin-bottom:14px}.header h1,.header .brand .header-title{font-size:19px}h1{font-size:20px}h2,.step-heading{font-size:16px}
.suggestion{padding:12px 14px}.suggestions{max-height:min(300px,50vh)}
.button-link{display:block;width:100%}
table{font-size:13px}th,td{padding:8px 10px}}
/* --- Public landing page --- */
html{scroll-behavior:smooth}
.landing-card{padding:0;overflow:hidden}

/* Navigation */
.public-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.public-nav a{color:var(--navy);font-weight:600;text-decoration:none;font-size:14px}
.public-nav a:hover{text-decoration:underline}
.nav-book{width:auto;font-size:14px;padding:7px 16px;background:var(--navy);border-color:var(--navy);color:#fff;border-radius:6px}
.nav-book:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:#fff}
.public-admin{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.public-admin:hover{color:var(--navy);text-decoration:underline}

/* Collapsed (hamburger) public navigation on tablet/mobile */
@media(max-width:991.98px){
  .public-nav{flex-direction:column;align-items:stretch;gap:4px;width:100%;padding-top:14px;margin-top:10px;border-top:1px solid var(--border-soft)}
  .public-nav a{font-size:15px;padding:11px 10px;border-radius:6px}
  .public-nav a:hover{background:var(--navy-light);text-decoration:none}
  .nav-book{width:100%;padding:12px 10px;font-size:15px;margin-top:2px}
  .public-admin{font-size:13px;padding:12px 10px 0;margin-top:10px;text-align:center;white-space:normal;border-top:1px solid var(--border-soft)}
}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:38px 26px 40px;background:linear-gradient(180deg,var(--navy-light),#f6f9fc);border-bottom:1px solid var(--border-soft)}
.eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hero h1{margin:0 0 14px;font-size:36px;line-height:1.15;color:var(--ink)}
.hero-accent{color:var(--navy)}
.hero-lead{margin:0 0 24px;font-size:16px;line-height:1.65;color:var(--text);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-actions .btn{width:auto;font-size:16px;padding:12px 22px}
.hero-actions #startBtn{margin-top:0}
.hero-visual{display:flex;justify-content:center}

/* Appointment preview card */
.appt-preview{width:100%;max-width:330px;background:#fff;border:1px solid var(--border-soft);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.08);overflow:hidden}
.appt-preview-head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--border-soft)}
.appt-preview-badge{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-weight:700;font-size:10px;letter-spacing:.05em;border-radius:8px;text-transform:uppercase}
.appt-preview-head div{display:grid;gap:1px}
.appt-preview-head strong{font-size:14px;color:var(--ink)}
.appt-preview-head div span{font-size:12px;color:var(--muted)}
.appt-preview-body{display:flex;align-items:stretch;gap:14px;padding:16px 17px}
.appt-preview-date{flex:1;display:grid;justify-items:center;align-content:center;gap:1px;background:var(--navy-light);border:1px solid var(--border-soft);border-radius:8px;padding:12px 10px;text-align:center}
.appt-preview-month{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.appt-preview-day{font-size:34px;font-weight:700;line-height:1.1;color:var(--ink)}
.appt-preview-day .bi{font-size:32px;line-height:1.1;color:var(--navy)}
.appt-preview-time{font-size:11.5px;color:var(--text);font-weight:600;overflow-wrap:anywhere}
.appt-preview-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:92px}
.qr-ghost{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--border);border-radius:8px;color:var(--navy);font-size:30px}
.appt-preview-qr span:last-child{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.35}
.appt-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 17px;background:var(--green-bg);border-top:1px solid var(--green-border)}
.appt-preview-confirmed{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--green)}
.appt-preview-ref{font-size:12px;color:var(--muted);font-weight:600}

/* Landing sections */
.landing-section{padding:30px 26px 34px;background:#fff}
.landing-section + .landing-section{border-top:1px solid var(--border-soft)}
.landing-title{margin:0 0 18px;font-size:22px}
.landing-lead{margin:0 0 16px;font-size:15px;color:var(--text)}
.landing-cta{text-align:center}
.landing-cta .landing-title{margin-bottom:20px}
.landing-cta .btn{width:auto;font-size:16px;padding:12px 28px}

/* Benefits */
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.benefit{background:var(--bg);border:1px solid var(--border-soft);border-radius:8px;padding:18px 16px;transition:border-color .15s ease,box-shadow .15s ease}
.benefit:hover{border-color:var(--navy-light);box-shadow:0 3px 10px rgba(16,24,40,.06)}
.benefit-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--navy-light);color:var(--navy);border-radius:8px;font-size:21px;margin-bottom:12px}
.benefit h3{margin:0 0 5px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.benefit p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}

/* Before you book */
.prepare-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;margin:0 0 20px;padding:0;list-style:none}
.prepare-list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--text)}
.prepare-list li::before{content:"";position:absolute;left:4px;top:5px;width:12px;height:12px;background:var(--navy-light);border:1px solid var(--navy);border-radius:3px}
.prepare-list li::after{content:"\2713";position:absolute;left:4px;top:3px;width:12px;height:12px;color:var(--navy);font-size:10px;font-weight:700;text-align:center;line-height:12px}
.reminder-list{background:var(--navy-light);border:1px solid var(--border-soft);border-left:4px solid var(--navy);border-radius:8px;padding:14px 18px;margin:0;list-style:none;font-size:14px;color:var(--text)}
.reminder-list li{position:relative;padding-left:20px;margin-bottom:7px;line-height:1.55}
.reminder-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.reminder-list li:last-child{margin-bottom:0}

/* Footer */
.site-footer{background:var(--navy);color:#fff;text-align:center;padding:24px 20px;flex:0 0 auto;margin-top:auto}
.footer-brand{margin:0 0 5px;font-size:15px;font-weight:700;letter-spacing:.02em}
.footer-tagline{margin:0;font-size:13px;color:#c6d5e6}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;gap:26px;padding:30px 22px 32px}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .public-nav{gap:8px 14px}
  .nav-book{width:100%}
  .hero{padding:26px 18px 28px}
  .hero h1{font-size:29px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .landing-section{padding:24px 18px 28px}
  .prepare-list{grid-template-columns:1fr;gap:7px}
  .landing-cta .btn{width:100%}
  .screenshot-notice {font-size: 0.8rem;line-height: 1.4;}
}
@media(max-width:400px){
  .benefit-grid{grid-template-columns:1fr}
  .hero h1{font-size:26px}
  .hero-actions .btn{font-size:15px;padding:11px 18px}
  .appt-preview-body{flex-direction:column;align-items:center}
  .appt-preview-qr{width:auto}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* --- Offcanvas details panel --- */
#apptOffcanvas{border-left:none}
.oc-header{background:var(--navy);padding:18px 20px;border-bottom:3px solid var(--accent)}
.oc-header .offcanvas-title{color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em}
.oc-header .btn-close{filter:invert(1) grayscale(100%) brightness(200%);opacity:.75}
.oc-header .btn-close:hover{opacity:1}
#apptOffcanvas .offcanvas-body{padding:0;display:flex;flex-direction:column}
.oc-section{padding:12px 16px;border-bottom:1px solid var(--border-soft)}
.oc-section:last-of-type{border-bottom:none;flex:1}
.oc-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin:0 0 12px}
.oc-field{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.oc-field:last-child{margin-bottom:0}
.oc-label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.oc-value{font-size:14px;font-weight:500;color:var(--ink);word-break:break-word;line-height:1.2}
.oc-ref{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:13.5px;letter-spacing:.03em}
#oc_status{display:inline-block;padding:3px 12px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.5;border:1px solid transparent;background:#f1f2f4;color:var(--muted);margin-top:2px}
#oc_status.oc-status-booked{background:var(--navy-light);color:var(--navy);border-color:#c6d4e4}
#oc_status.oc-status-open{background:var(--navy-light);color:var(--navy);border-color:#c6d4e4}
#oc_status.oc-status-completed{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
#oc_status.oc-status-cancelled{background:#f1f2f4;color:var(--muted);border-color:#d7dce2}
#oc_status.oc-status-closed{background:#f1f2f4;color:var(--muted);border-color:#d7dce2}
.oc-actions{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--border-soft);background:#fafbfc}
.oc-actions .btn{width:auto;font-size:13px;padding:6px 16px}
.oc-audit{display:flex;flex-direction:column;gap:10px}
.oc-audit-empty{font-size:13px;color:var(--muted);margin:0}
.oc-audit-entry{display:flex;flex-direction:column;gap:4px;padding:9px 11px;border:1px solid var(--border-soft);border-radius:8px;background:#fafbfc}
.oc-audit-transition{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oc-audit-arrow{color:var(--muted);font-weight:700}
.oc-audit-time{font-size:12.5px;font-weight:500;color:var(--ink)}
.oc-audit-actor{font-size:11.5px;color:var(--muted);word-break:break-word}
@media(max-width:480px){
  .oc-section{padding:14px 16px}
  .oc-actions{padding:12px 16px}
  .oc-value{font-size:12px}
  .oc-header{padding:16px}
}

/* --- Live indicator (realtime polling) --- */
.live-indicator{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);padding:4px 10px;border:1px solid var(--border-soft);border-radius:20px;background:#fff;white-space:nowrap;user-select:none}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.live-dot.live-offline{background:var(--red)}
.live-time{font-weight:400;color:var(--muted);font-size:11px}
@media(max-width:480px){
  .live-time{display:none}
}
/* Compact variant used in the admin navbar to save horizontal space */
.live-indicator-compact{gap:4px;padding:2px 8px;font-size:11px;border-radius:12px}
.live-indicator-compact .live-dot{width:6px;height:6px}
.live-indicator-compact .live-time{font-size:10.5px}

/* Appointment Monitoring header: on large screens the Live indicator belongs
   with the page heading, so it flows under the title/subtitle. Below 992px the
   original flex layout (indicator to the right of the brand, before the
   hamburger) is preserved; only one copy of the indicator exists. */
@media(min-width:992px){
  .header.admin-header{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:start}
  .header.admin-header .brand{grid-column:1;grid-row:1}
  .header.admin-header .live-indicator{grid-column:1;grid-row:2;justify-self:start;margin:0 0 0 62px}
  .header.admin-header .navbar-collapse{grid-column:2;grid-row:1 / span 2;align-self:center}
}
@media(max-width:991.98px){
  .header.admin-header .live-indicator{margin-left:auto;margin-right:.5rem}
}

/* --- Admin view tabs (Appointments | Not Booked) --- */
#adminViewTabs .nav-link{font-size:14px;font-weight:600;color:var(--muted);padding:7px 18px}
#adminViewTabs .nav-link:hover{color:var(--navy)}
#adminViewTabs .nav-link.active{background:var(--navy);color:#fff}
#adminViewTabs .nav-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* --- Not Booked table --- */
#notBookedTable td{white-space:nowrap}
.nb-row{cursor:pointer}
.nb-row:hover td{background:var(--navy-light)}
.nb-stat-box{flex:0 1 auto;max-width:280px;margin-bottom:14px}
@media(max-width:768px){
  #notBookedTable td,#notBookedTable th{
    white-space:normal;
    min-width:96px;
  }
  #notBookedTable .table-wrap{overflow-x:auto}
  /* Lower-priority columns collapse on narrow screens */
  .nb-col-dob,.nb-col-district{display:none}
}
@media(max-width:420px){
  .nb-col-barangay{display:none}
}

/* --- Not Booked filter row: one row on desktop, wraps on mobile --- */
.nb-filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.nb-filter-search{flex:1 1 220px;min-width:160px}
.nb-filter-city{flex:0 1 auto;width:210px}
.nb-filter-sort{flex:0 1 auto;width:200px}
.nb-filter-actions{display:flex;gap:8px;align-items:flex-end;flex:0 1 auto}
.nb-filter-actions .btn{white-space:nowrap}
@media(max-width:576px){
  .nb-filter-search{flex:1 1 100%}
  .nb-filter-city,.nb-filter-sort{flex:1 1 calc(50% - 5px)}
  .nb-filter-actions{flex:1 1 100%}
}

/* --- Client-list style numbered pagination (Appointments + Not Booked) --- */
/* Pagination must stay on a single horizontal row; on ultra-narrow screens
   the controls cluster scrolls horizontally rather than stacking. */
.cl-controls{max-width:100%;overflow-x:auto}
.cl-page-numbers{flex-wrap:nowrap}
.cl-page-numbers .btn{min-width:38px}
.cl-pagination .btn{min-width:42px}
.cl-controls .btn{flex:0 0 auto;white-space:nowrap;width:auto}
#apptPaginationBar,#nbPaginationBar{padding-bottom:4px}
/* Active page button */
.cl-page-numbers .btn.active{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}

/* --- Appointment Dates: Action column --------------------------------------
   The three row actions (Edit, Open/Close Date, Remove Date) stack vertically
   so a tall cell never makes the control cluster wrap unpredictably, and every
   button in the column lines up to the same width. */
.date-actions-col{width:1%}
.date-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:5.5rem}
.date-actions .btn{width:100%;white-space:nowrap}
.date-actions form{display:block;margin:0}

/* --- Appointment Dates: card header ----------------------------------------
   Keeps the "Add Appointment Date" action compact and right-aligned like the
   Client List header actions, instead of inheriting the base full-width
   `button{width:100%}` rule. */
.date-page-header .btn{width:auto}