/* ZenBooking 2 additions on top of preview.css (the ZenTime 2 / Zenvagt 2 layout, spec §6.1).

   Zenbody colours, taken from the Zenbody logo: orange #ff8a00 and near-black #171717.
   Orange is only used as a fill (buttons, markers) with dark text on it; white on orange
   is too weak. For orange text on a light background use --orange-text. Red stays only
   for warnings and destructive actions. */
:root{--orange:#ff8a00;--orange-dark:#e07800;--orange-text:#a85a00;--orange-tint:#fff3e3;
  --ink:#1f1f21;--ink-2:#2c2c2f;--muted:#6b6b70;--accent:var(--orange);color:var(--ink)}
.sidebar{background:var(--ink);color:#e9e9ec}
.side-caption{color:#a9a9b0}
.nav-item{color:#e9e9ec}
.nav-item:hover{background:#ffffff12}
.nav-item.active{background:#ffffff1c;color:#fff;box-shadow:inset 3px 0 var(--orange)}
.nav-item b{background:var(--orange);color:var(--ink)}
.account{border-top-color:#ffffff22}
.account strong{color:#fff}.account small{color:#b9b9c0}
.account .avatar{background:#ffffff1f;color:#fff}
.logout{color:#e9e9ec}
.version-label{color:#8b8b93}
.avatar{background:var(--orange-tint);color:var(--orange-text)}
.primary{background:var(--orange);border-color:var(--orange);color:var(--ink);box-shadow:0 2px 3px #ff8a0025}
.primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.secondary{color:var(--ink)}
.secondary:hover{background:var(--orange-tint)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--orange-dark)}
.secondary.danger,.text-button.danger{color:#b42f44}
.toast{background:var(--ink)}
.topbar #breadcrumb{color:var(--ink)}
h1,h2,h3{color:var(--ink)}

/* Login: the logo has black and orange letters, so it sits on a light panel. */
.login-brand{background:var(--orange-tint);color:var(--ink)}
.login-brand .eyebrow{color:var(--orange-text)}
.login-brand h1{color:var(--ink);white-space:pre-line}
.login-brand div>p:last-child{color:var(--ink-2)}
.login-brand>small{color:var(--muted)}
.login-logo{display:block;width:min(260px,100%);height:auto}
.lang-switch{display:flex;gap:6px;margin-top:22px;font-size:.8rem}
.lang-switch a{padding:4px 9px;border:1px solid var(--border);border-radius:5px;text-decoration:none;color:var(--muted)}
.lang-switch a[aria-current="true"]{border-color:var(--orange);color:var(--ink);font-weight:600}
.staff-link{display:inline-block;margin-top:16px;font-size:.85rem;color:var(--muted)}
@media(max-width:800px){.login-logo{width:200px}.login-shell{grid-template-rows:auto 1fr}.login-brand{padding:20px 24px}.login-form{align-items:flex-start;padding-top:36px}}
@media(max-width:500px){.login-shell{grid-template-columns:minmax(0,1fr)}.login-form{padding:32px 16px}.login-box{width:100%}}

/* Layout helpers (from ZenTime 2) */
.topbar-actions{display:none}
@media(max-width:800px){.topbar-actions{display:flex;gap:4px}}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters select,.filters input{padding:8px;border:1px solid var(--border);border-radius:6px;min-height:40px;font-size:.875rem;background:white}
.inline-check{margin:0;font-size:.875rem;align-items:center}
.month-toolbar{flex-wrap:wrap}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
.two-col>*{min-width:0}
@media(max-width:1150px){.two-col{grid-template-columns:minmax(0,1fr)}}
.panel+.panel,.panel+.two-col,.two-col+.panel{margin-top:20px}
.table-scroll{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.875rem}
.data-table th,.data-table td{text-align:left;padding:9px 8px;border-top:1px solid #f0ece6;vertical-align:top}
.data-table thead th{border-top:0;font-size:.75rem;letter-spacing:.04em;color:var(--muted);font-weight:600;white-space:nowrap}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table tr.subtotal th{font-weight:700;background:var(--orange-tint);border-top:2px solid #f1d5b0}
.report-form{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end}
.report-form label{margin-bottom:0;flex:1 1 170px}
.report-form label[data-field="month"]{flex-basis:260px}
.month-pick{display:flex;gap:6px}
.month-pick select{flex:1 1 auto;min-width:0}
.report-output h3{margin:18px 0 8px}
@media(max-width:800px){.month-toolbar .date-nav{width:100%}}
.narrow-panel{max-width:560px}
.strike{text-decoration:line-through}
.small-note{font-size:.8rem;margin-top:10px}
textarea{font:inherit}
code{font-family:ui-monospace,Consolas,monospace;font-size:.85em;background:#f6f3ee;padding:1px 4px;border-radius:4px}
.preview-box{margin-top:14px;padding:14px;border:1px solid var(--border);border-top:4px solid var(--orange);border-radius:6px;font-size:.9rem;line-height:1.55}
.preview-box p{margin:8px 0}
.brand-word{font-size:1.45rem;letter-spacing:-.04em;font-weight:800;color:#fff}
.brand-word b{color:var(--orange);font-weight:800}

/* Booking (user) */
.day-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:20px}
.day-list .panel{margin:0}
.day-card .panel-heading{margin-bottom:14px}
.day-card h2::first-letter{text-transform:uppercase}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.slot{border:1px solid var(--border);background:white;border-radius:8px;padding:9px 6px;font-weight:700;font-size:1rem;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px}
.slot small{font-weight:500;font-size:.72rem;color:var(--muted)}
.slot-free{border-color:#f5c27f;background:var(--orange-tint)}
.slot-free:hover{background:var(--orange);color:var(--ink)}
.slot-free:hover small{color:var(--ink)}
.slot-mine{background:var(--ink);color:#fff;border-color:var(--ink)}
.slot-mine small{color:#ffcf95}
.slot-taken,.slot-closed,.slot-past{color:#b3b3b8;background:#f7f7f8;cursor:default}
.slot:disabled{opacity:1;cursor:default}

/* Staff calendar */
.day-chip{border:0;text-align:left;width:100%;cursor:pointer;margin-bottom:3px}
.day-chip small{display:block;font-weight:500;opacity:.8}
.chip.duty{background:var(--orange-tint);color:var(--orange-text);border-left-color:var(--orange)}
.open-cell{min-height:60px}
.open-cell:hover{background:var(--orange-tint);box-shadow:inset 0 0 0 1px #f5c27f}
.plan-table th.is-today{background:var(--orange-tint);color:var(--orange-text)}
.day-slots .list-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;padding:10px 0}
.slot-who strong{display:block;font-size:.9rem}
.slot-who small{color:var(--muted);font-size:.8rem}
@media(max-width:500px){.day-slots .list-row{grid-template-columns:48px 1fr}.day-slots .list-actions{grid-column:1/-1}}

/* Pages opened from mails */
.simple-page{background:var(--orange-tint);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px}
.simple-box{background:white;border:1px solid var(--border);border-radius:12px;padding:32px;width:min(440px,100%)}
.simple-box.wide-box{width:min(560px,100%)}
.simple-box h1{font-size:1.6rem;margin:22px 0 10px}
.simple-box h2{font-size:1rem;margin:24px 0 8px}
.simple-box .muted{margin-bottom:18px}
.button-link{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;box-sizing:border-box}
.qr svg{display:block;margin:8px 0 12px;background:#fff}
.secret{word-break:break-all}
.backup-codes{columns:2;font-size:1.05rem;margin:0 0 22px;padding-left:22px}
.test-login{margin-top:26px;padding:16px;border:2px dashed #f5c27f;border-radius:8px}
.chip.duty.clash{background:#ffecef;color:#b23e57;border-left-color:#d8394b}
.notice.is-warning{background:#ffecef;border-color:#f1b8c3;color:#8f2a40}
.day-chip{overflow-wrap:normal;word-break:normal;hyphens:auto;font-size:.72rem}
.two-col>.panel{margin-top:0}
.slot-grid{border-collapse:collapse;font-size:.8rem;margin:6px 0}
.slot-grid th,.slot-grid td{padding:5px 4px;text-align:center;border-bottom:1px solid #f0ece6}
.slot-grid tbody th{text-align:left;white-space:nowrap}
.slot-grid th .text-button{padding:2px 4px;min-height:0;font-size:.8rem;color:var(--ink)}
.slot-grid input{width:18px;height:18px;accent-color:var(--orange);margin:0}
#modal:has(.slot-grid){width:min(760px,calc(100vw - 24px))}
.slot-grid .clear-day{min-height:28px;padding:3px 8px;font-size:.75rem;white-space:nowrap;margin-left:6px}
#modal:has(.slot-grid){width:min(860px,calc(100vw - 24px))}

/* "Delivered and run by Zendata", top right of the login page */
.login-shell{position:relative}
.delivered-by{position:absolute;top:22px;right:28px;display:flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.04em;color:var(--muted);text-decoration:none;z-index:2}
.delivered-by img{display:block;height:29px;width:auto}
.delivered-by:hover span{color:var(--ink);text-decoration:underline}
@media(max-width:800px){.delivered-by{top:12px;right:16px;gap:6px;font-size:.65rem}.delivered-by img{height:20px}}
.login-form{padding-top:84px}
#user-login>.muted,#staff-login>.muted{margin-bottom:24px}
/* A day that can be opened shows a visible "+" (it used to be an invisible button). */
.open-cell{align-items:center;justify-content:center;border:1px dashed #e6dccd !important;background:#fffdf9}
.open-cell span{font-size:1.25rem;font-weight:600;color:#c9b9a3;line-height:1}
.open-cell:hover{background:var(--orange-tint);border-color:var(--orange) !important}
.open-cell:hover span{color:var(--orange-text)}

.weekday-picks{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:16px}
.weekday-picks .label{flex-basis:100%;font-size:.875rem;font-weight:600;margin-bottom:4px}
.weekday-picks label.check{margin:0}
#modal-fields>p.muted:first-child{margin-bottom:16px}

.code-input{font-size:1.4rem !important;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.code-actions{display:flex;justify-content:space-between;margin-top:10px}
.code-actions .text-button{padding:6px 0;min-height:0}
#code-sent{margin-bottom:18px}

.have-code{display:block;margin:12px auto 0;padding:6px 0;min-height:0}

/* "Delivered and run by Zendata" bottom right on the app pages and the setup page */
.main-footer{align-items:center}
.footer-credit{display:inline-flex;align-items:center;gap:8px;color:#8b8b93;text-decoration:none;font-size:.72rem;letter-spacing:.03em}
.footer-credit img{display:block;height:22px;width:auto}
.footer-credit:hover span{color:var(--ink);text-decoration:underline}
.simple-page{flex-direction:column;align-items:center}
.simple-footer{width:min(560px,100%);display:flex;justify-content:flex-end;margin-top:14px}
.simple-page{justify-content:flex-start}

.update-box{border-top:1px solid var(--border);margin-top:14px;padding-top:14px}
.update-box details{margin:6px 0 10px;font-size:.85rem}
.update-box summary{cursor:pointer;color:var(--muted)}
.view-as-banner{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff4e4;border-bottom:2px solid #f1a33c;color:#7e5725;padding:10px 36px;font-size:.875rem;font-weight:600}
@media(max-width:800px){.view-as-banner{padding:10px 16px}}

/* One customer's month (D42): a Monday-first month grid; on a phone a list of the open days */
.cm-pick{display:flex;align-items:center;gap:10px;margin:0}
.cm-pick select{margin-top:0;min-width:200px}
.cm-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--border)}
.cm-weekhead{padding:8px 10px;font-size:.75rem;font-weight:600;color:var(--muted);background:#fbfcfe;border-right:1px solid var(--border)}
.cm-cell{min-height:110px;padding:6px;border-top:1px solid var(--border);border-right:1px solid var(--border);min-width:0}
.cm-weekhead:nth-child(7n),.cm-cell:nth-child(7n){border-right:0}
.cm-cell.weekend-day,.cm-pad{background:#f8f9fc}
.cm-cell.is-today .day-num{background:var(--orange);color:var(--ink);border-radius:4px;padding:0 5px}
.cm-date{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.cm-date .day-num{font-weight:600;font-size:.95rem}
.cm-weekday{display:none;color:var(--muted);font-size:.8rem}
.cm-cell .chip.holiday{font-size:.72rem;padding:3px 5px}
.cm-day{display:block;width:100%;text-align:left;border:1px solid #f1d5b0;border-left:3px solid var(--orange);background:var(--orange-tint);border-radius:5px;padding:5px 6px;font:inherit;color:var(--ink)}
.cm-day:hover{background:#ffe7c7}
.cm-head{display:flex;justify-content:space-between;gap:6px;font-size:.78rem}
.cm-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-head small{color:var(--orange-text);font-weight:600;flex-shrink:0}
.cm-slots{list-style:none;margin:4px 0 0;padding:0;font-size:.72rem;line-height:1.45}
.cm-slots li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-slots li span{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:2px}
.cm-slots li.free{color:var(--muted)}
.cm-slots li.closed{color:#b3b3b8;text-decoration:line-through}
@media(max-width:800px){
  .cm-pick{width:100%}.cm-pick select{flex:1;min-width:0}
  .cm-grid{grid-template-columns:minmax(0,1fr)}
  .cm-weekhead,.cm-pad,.cm-cell:not(.has-day){display:none}
  .cm-cell{min-height:0;border-right:0;padding:10px 16px}
  .cm-weekday{display:inline}
  .cm-head{font-size:.875rem}.cm-slots{font-size:.85rem}
}

/* Calendar link (D43) */
.copy-row{display:flex;gap:8px;align-items:center;margin-top:7px}
.copy-row input{margin-top:0;flex:1;min-width:0;font-size:.8rem;font-family:ui-monospace,Consolas,monospace}
#calendar-link>p.muted{margin-bottom:14px}

/* First free slot (D44) */
.first-free{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--orange-tint);border:1px solid #f5c27f;border-radius:8px;padding:12px 16px;margin-bottom:16px}
.first-free .eyebrow{display:block;color:var(--orange-text);margin-bottom:2px}
.first-free strong{display:block;font-size:1.05rem}
.first-free strong::first-letter{text-transform:uppercase}
.first-free-none{margin:0 0 12px}
.slot small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Phone reminder (D47): the tip shows on hover or keyboard focus; on touch screens it is always shown */
.decline-row{position:relative;display:flex;align-items:center;gap:10px;margin-top:4px}
.tooltip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;width:min(340px,80vw);background:var(--ink);color:#fff;font-size:.8rem;line-height:1.45;padding:8px 10px;border-radius:6px;box-shadow:0 4px 14px #0003;opacity:0;visibility:hidden;transition:opacity .12s}
.tooltip::after{content:"";position:absolute;left:18px;top:100%;border:6px solid transparent;border-top-color:var(--ink)}
#phone-decline:hover+.tooltip,#phone-decline:focus-visible+.tooltip{opacity:1;visibility:visible}
@media (hover:none){.tooltip{position:static;opacity:1;visibility:visible;width:auto;background:none;color:var(--muted);box-shadow:none;padding:0}.tooltip::after{display:none}.decline-row{flex-direction:column;align-items:flex-start}}
.phone-tip{color:var(--orange-text);font-size:.82rem;margin:-10px 0 16px}

/* Year release (D48) and booking horizon (D49) */
.year-note{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.slot-later{color:#9a9aa0;background:#f7f7f8;border-style:dashed;cursor:not-allowed}