/* Ores design system: shared tokens, app shell, components, calendars and the roster board. */

:root {
    --ores-brand: #4338ca;
    --ores-brand-dark: #312e81;
    --ores-brand-soft: #eef2ff;
    --ores-ink: #111827;
    --ores-ink-soft: #4b5563;
    --ores-ink-muted: #6b7280;
    --ores-line: #e5e7eb;
    --ores-line-strong: #d1d5db;
    --ores-surface: #ffffff;
    --ores-canvas: #f6f7f9;
    --ores-success: #059669;
    --ores-success-soft: #d1fae5;
    --ores-warning: #b45309;
    --ores-warning-soft: #fef3c7;
    --ores-danger: #dc2626;
    --ores-danger-soft: #fee2e2;
    --ores-info: #0284c7;
    --ores-info-soft: #e0f2fe;
    --ores-radius: 10px;
    --ores-radius-sm: 6px;
    --ores-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.08);
    --ores-shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.16);
    --ores-sidebar-width: 216px;

    --bs-primary: var(--ores-brand);
    --bs-primary-rgb: 67, 56, 202;
    --bs-link-color: var(--ores-brand);
    --bs-link-color-rgb: 67, 56, 202;
    --bs-body-color: var(--ores-ink);
    --bs-border-color: var(--ores-line);
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The free icon set has few regular glyphs, so show every icon in the solid style */
.far, .fa-regular {
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900 !important;
}

body {
    background: var(--ores-canvas);
    font-size: 14px;
    color: var(--ores-ink);
}

.btn-primary {
    --bs-btn-bg: var(--ores-brand);
    --bs-btn-border-color: var(--ores-brand);
    --bs-btn-hover-bg: var(--ores-brand-dark);
    --bs-btn-hover-border-color: var(--ores-brand-dark);
    --bs-btn-active-bg: var(--ores-brand-dark);
    --bs-btn-active-border-color: var(--ores-brand-dark);
    --bs-btn-disabled-bg: var(--ores-brand);
    --bs-btn-disabled-border-color: var(--ores-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--ores-brand);
    --bs-btn-border-color: var(--ores-brand);
    --bs-btn-hover-bg: var(--ores-brand);
    --bs-btn-hover-border-color: var(--ores-brand);
    --bs-btn-active-bg: var(--ores-brand);
    --bs-btn-active-border-color: var(--ores-brand);
}

.btn { font-size: 14px; border-radius: var(--ores-radius-sm); font-weight: 500; }
.btn-lg { font-size: 14px; padding: 0.5rem 1rem; }

.btn-ghost {
    background: var(--ores-surface);
    border: 1px solid var(--ores-line-strong);
    color: var(--ores-ink);
}
.btn-ghost:hover, .btn-ghost:focus { background: #f3f4f6; color: var(--ores-ink); border-color: var(--ores-line-strong); }
.btn-ghost.active { background: var(--ores-brand-soft); color: var(--ores-brand); border-color: #c7d2fe; }

/* ---------- App shell ---------- */

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--ores-sidebar-width);
    flex: 0 0 var(--ores-sidebar-width);
    background: #111827;
    color: #d1d5db;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    /* On a phone the browser's own bars take part of 100vh; the visible height keeps the bottom in view */
    height: 100dvh;
    overflow-y: auto;
    z-index: 1030;
}
.app-nav-link.app-nav-mobile { display: none; }

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 14px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
}
.app-brand:hover { color: #fff; }
.app-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ores-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.app-nav { padding: 6px 10px; flex: 1; }
.app-nav-label {
    padding: 14px 10px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: var(--ores-radius-sm);
    color: #d1d5db;
    text-decoration: none;
    font-weight: 500;
}
.app-nav-link i { width: 18px; text-align: center; color: #9ca3af; }
.app-nav-link:hover { background: #1f2937; color: #fff; }
.app-nav-link.active { background: var(--ores-brand); color: #fff; }
.app-nav-link.active i { color: #fff; }
.app-nav-badge {
    margin-left: auto;
    background: var(--ores-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 7px;
    line-height: 18px;
}

.app-user {
    border-top: 1px solid #1f2937;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-user-name { flex: 1; min-width: 0; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user a { color: #9ca3af; }
.app-user a:hover { color: #fff; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #111827;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.app-topbar .app-brand { padding: 0; }
.app-topbar button { background: none; border: 0; color: #fff; font-size: 18px; padding: 2px 6px; }

.app-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--ores-surface);
    border-bottom: 1px solid var(--ores-line);
}
.app-public-header .app-brand { padding: 0; color: var(--ores-ink); }

.app-content { padding: 22px 26px 40px; flex: 1; min-width: 0; }

.app-backdrop { display: none; }

@media (max-width: 767.98px) {
    .app-sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.18s ease;
    }
    .app-sidebar.open { transform: translateX(0); box-shadow: var(--ores-shadow-lg); }
    .app-nav-link.app-nav-mobile { display: flex; }
    .app-nav-link#menuLogout { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; }
    .app-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, 0.4); z-index: 1025; }
    .app-topbar { display: flex; }
    .app-content { padding: 16px 14px 32px; }
}

/* ---------- Page structure ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}
.page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page-subtitle { color: var(--ores-ink-muted); margin: 3px 0 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.panel {
    background: var(--ores-surface);
    border: 1px solid var(--ores-line);
    border-radius: var(--ores-radius);
    box-shadow: var(--ores-shadow);
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ores-line);
}
.panel-title { font-size: 14px; font-weight: 600; margin: 0; }
.panel-body { padding: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
    background: var(--ores-surface);
    border: 1px solid var(--ores-line);
    border-radius: var(--ores-radius);
    padding: 14px 16px;
    box-shadow: var(--ores-shadow);
    color: inherit;
    text-decoration: none;
    display: block;
}
a.stat:hover { border-color: #c7d2fe; }
.stat-label { color: var(--ores-ink-muted); font-size: 13px; }
.stat-value { font-size: 24px; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; }
.stat-note { color: var(--ores-ink-muted); font-size: 12px; margin-top: 2px; }
.stat-value .stat-note { display: inline; font-size: 14px; font-weight: 500; }
.hs-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
.hs-filters .form-select { width: auto; min-width: 200px; }
.pay-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pay-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--ores-radius-sm); background: #eef0f4; }
.pay-tab { padding: 6px 12px; border-radius: 6px; color: var(--ores-ink-soft); text-decoration: none; font-weight: 600; font-size: 14px; }
.pay-tab.is-active { background: #fff; color: var(--ores-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pay-search { max-width: 280px; }
/* VAT return, year overview, stock report */
.vat-table .vat-fill { background: #f5f7ff; }
.vat-table tr.vat-total td { border-top: 2px solid var(--ores-line-strong); }
.vat-table .vat-short { display: none; }
@media (max-width: 575.98px) {
    /* On a phone: what to fill in, with short names; the exact amounts are in the file */
    .vat-table .vat-exact { display: none; }
    .vat-table .vat-long { display: none; }
    .vat-table .vat-short { display: inline; }
    .vat-table th, .vat-table td { padding-left: 8px; padding-right: 8px; }
}
tr.year-total td { border-top: 2px solid var(--ores-line-strong); background: #f8f9fb; }
.report-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }
@media print {
    .app-sidebar, .app-topbar, .page-actions, .till-tabs, .list-toolbar, .page-hint, .install-app { display: none !important; }
    .app-main, .app-content { margin: 0 !important; padding: 0 !important; }
    .panel { break-inside: avoid; box-shadow: none; }
}
/* Installing the app on a phone (ores-install.js) */
.install-app { padding: 14px; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); background: #f8f9fb; }
.install-app-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.install-app-icon { border-radius: 10px; }
.install-app p { margin: 0 0 8px; font-size: 14px; color: var(--ores-ink-soft); }
.install-app-steps { margin: 0 0 8px; padding-left: 20px; font-size: 14px; }
.install-app-steps li { margin-bottom: 4px; }
.install-app-actions { display: flex; gap: 8px; }
.avail-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--ores-line); }
.avail-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.week-rows { display: flex; flex-direction: column; gap: 6px; }
.avail-week-row { display: flex; gap: 8px; align-items: center; }
.avail-week-row .avail-week-day { flex: 0 0 118px; }
.avail-week-row input[type=time] { flex: 1 1 0; min-width: 0; width: auto; }
.avail-week-row:has(input[type=checkbox]:not(:checked)) input[type=time] { opacity: .45; }
.avail-week-day { margin: 0; }
.week-dash { color: var(--ores-ink-muted); }
@media (max-width: 420px) { .avail-week-row .avail-week-day { flex-basis: 96px; } .avail-week-row .avail-week-day span { font-size: 13px; } }
.credit-bundles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.credit-bundle { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); }
.credit-bundle-count { font-size: 24px; font-weight: 700; }
.credit-bundle-count span, .credit-bundle-price span { font-size: 13px; font-weight: 500; color: var(--ores-ink-soft); }
.credit-bundle-price { font-size: 18px; font-weight: 650; }
.credit-bundle-note { font-size: 12.5px; color: var(--ores-ink-muted); margin-bottom: 6px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: #f3f4f6;
    color: var(--ores-ink-soft);
}
.pill-success { background: var(--ores-success-soft); color: #065f46; }
.pill-warning { background: var(--ores-warning-soft); color: #92400e; }
.pill-danger { background: var(--ores-danger-soft); color: #991b1b; }
.pill-info { background: var(--ores-info-soft); color: #075985; }
.pill-brand { background: var(--ores-brand-soft); color: var(--ores-brand); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--ores-ink-muted);
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ores-line);
    white-space: nowrap;
}
.data-table td { padding: 11px 16px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafafa; }
.table-scroll { overflow-x: auto; }

.empty-state { text-align: center; padding: 42px 20px; color: var(--ores-ink-muted); }
.empty-state i { font-size: 28px; color: var(--ores-line-strong); margin-bottom: 10px; display: block; }
.empty-state h3 { font-size: 15px; color: var(--ores-ink); margin-bottom: 4px; font-weight: 600; }

.person-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }

/* ---------- Existing pages ---------- */

.screen-header {
    background: none;
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.screen-header h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--ores-ink); }
.badge.badge-info { background: var(--ores-brand-soft); color: var(--ores-brand); font-weight: 600; }
.card { border-color: var(--ores-line); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow); }
.table { --bs-table-border-color: #f3f4f6; }
.table > thead th { font-size: 12px; font-weight: 600; color: var(--ores-ink-muted); white-space: nowrap; }
.checkbox-switch-container .form-control { border: 0; padding: 0; background: none; width: auto; }
.checkbox-switch-container { display: inline-flex; align-items: center; margin-right: 8px; }
.checkbox-switch { width: 16px; height: 16px; accent-color: var(--ores-brand); }
.form-check-input:checked { background-color: var(--ores-brand); border-color: var(--ores-brand); }

/* ---------- Toasts ---------- */

.ores-toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 36px));
}
.ores-toast {
    background: #111827;
    color: #fff;
    border-radius: var(--ores-radius-sm);
    padding: 10px 14px;
    box-shadow: var(--ores-shadow-lg);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ores-toast.warning i { color: #fbbf24; }
.ores-toast.error i { color: #f87171; }
.ores-toast.success i { color: #34d399; }
.ores-toast i { margin-top: 3px; }

/* ---------- Dialog forms ---------- */

.top-form-header { font-size: 18px; font-weight: 700; padding: 14px 18px; margin: 0 0 8px; background: #fff; z-index: 10; }
.form-content { margin-bottom: 80px; overflow: visible; }
.bottom-actions {
    background: #fff;
    border-top: 1px solid var(--ores-line);
    left: 0;
    margin: 0;
    padding: 12px 18px;
    align-items: center;
}
.form-label, form label { font-weight: 500; color: var(--ores-ink-soft); font-size: 13px; }
.form-control, .form-select { border-radius: var(--ores-radius-sm); font-size: 14px; border-color: var(--ores-line-strong); }
.form-control:focus, .form-select:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); }
.ginner-container { min-height: 86% !important; }
.gbtn.gnext, .gbtn.gprev { display: none !important; }
.modal { display: none; position: fixed; }
.modal-content { position: relative; bottom: auto; animation: none; border-radius: var(--ores-radius); border: 0; box-shadow: var(--ores-shadow-lg); }
.modal-title { font-size: 16px; font-weight: 600; }

/* ---------- Calendar ---------- */

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ores-line);
}
.cal-title { font-size: 16px; font-weight: 600; min-width: 180px; }
.cal-nav { display: inline-flex; gap: 6px; align-items: center; }
.cal-nav .btn { padding: 5px 10px; }
.cal-spacer { flex: 1; }
.cal-views { display: inline-flex; border: 1px solid var(--ores-line-strong); border-radius: var(--ores-radius-sm); overflow: hidden; }
.cal-views button {
    background: #fff;
    border: 0;
    border-right: 1px solid var(--ores-line-strong);
    padding: 5px 12px;
    color: var(--ores-ink-soft);
    font-weight: 500;
}
.cal-views button:last-child { border-right: 0; }
.cal-views button:hover { background: #f3f4f6; }
.cal-views button.active { background: var(--ores-brand-soft); color: var(--ores-brand); }

.cal-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ores-line); align-items: center; }
.cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ores-line-strong);
    background: #fff;
    border-radius: 999px;
    padding: 3px 11px;
    color: var(--ores-ink-soft);
    font-size: 13px;
    cursor: pointer;
}
.cal-chip:hover { background: #f9fafb; }
.cal-chip.active { background: var(--ores-brand-soft); border-color: #a5b4fc; color: var(--ores-brand-dark); font-weight: 500; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--ores-line); font-size: 12px; color: var(--ores-ink-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.ec {
    --ec-border-color: #eceef1;
    --ec-today-bg-color: rgba(238, 242, 255, 0.5);
    --ec-now-indicator-color: var(--ores-danger);
    --ec-event-bg-color: var(--ores-brand);
    --ec-bg-event-opacity: 1;
    --ec-highlight-color: rgba(99, 102, 241, 0.12);
    --ec-slot-height: 22px;
    border: 0 !important;
    font-size: 13px;
}
.ec .ec-toolbar { display: none; }
.ec .ec-day-head, .ec .ec-col-head { font-weight: 600; color: var(--ores-ink-soft); padding-top: 6px; padding-bottom: 6px; }
.ec .ec-sidebar { color: var(--ores-ink-muted); font-size: 12px; }
.ec-calendar-frame { min-height: 620px; }

.ec .ec-event {
    border-radius: 5px;
    box-shadow: none;
    border-left: 3px solid var(--ev-accent, var(--ores-brand));
    padding: 2px 5px;
    line-height: 1.25;
    transition: box-shadow 0.1s ease;
    cursor: pointer;
}
.ec .ec-event:hover { box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18); z-index: 5; }
.ec .ec-event { overflow: hidden; }
.ec .ec-event-time { font-size: 11px; opacity: 0.75; font-weight: 500; }
.ev-title { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.ev-label { display: inline-block; max-width: 100%; padding: 0 6px; margin-top: 2px; border-radius: 999px; font-size: 11px; line-height: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-sub { font-size: 11.5px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-employee { font-size: 11px; opacity: 0.85; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.ev-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; }
.ev-tag { font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, 0.75); border-radius: 3px; padding: 0 4px; }
.ec .ev-absence { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 6px, transparent 6px, transparent 12px); cursor: pointer; }
.ec .ev-pending { border-left-style: dashed; opacity: 0.9; }
.ec .ev-has-processing { position: relative; overflow: hidden; }
.ec .ev-has-processing > :not(.ev-processing) { position: relative; z-index: 1; }
.ec .ev-processing { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0 6px, rgba(255, 255, 255, 0.15) 6px 12px); border-top: 1px dashed rgba(31, 41, 55, 0.35); border-bottom: 1px dashed rgba(31, 41, 55, 0.35); }
.ec .ec-bg-event.ev-offhours { background: repeating-linear-gradient(135deg, rgba(107, 114, 128, 0.07), rgba(107, 114, 128, 0.07) 5px, rgba(107, 114, 128, 0.12) 5px, rgba(107, 114, 128, 0.12) 10px) !important; }

.ec .ec-list .ec-day-head { font-size: 13px; padding: 6px 12px; }
.ec .ec-list .ec-day-head > * { font-size: 13px; }
.cal-resource-head { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.cal-menu {
    position: fixed;
    z-index: 1900;
    background: #fff;
    border: 1px solid var(--ores-line);
    border-radius: var(--ores-radius-sm);
    box-shadow: var(--ores-shadow-lg);
    padding: 5px;
    min-width: 215px;
}
.cal-menu-head { font-size: 12px; color: var(--ores-ink-muted); padding: 5px 9px; text-transform: capitalize; }
.cal-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 7px 9px;
    border-radius: 4px;
    color: var(--ores-ink);
}
.cal-menu button i { width: 16px; text-align: center; color: var(--ores-ink-muted); }
.cal-menu button:hover { background: var(--ores-brand-soft); }

.cal-tip {
    position: fixed;
    z-index: 1950;
    background: #111827;
    color: #fff;
    border-radius: var(--ores-radius-sm);
    padding: 8px 11px;
    font-size: 12.5px;
    max-width: 280px;
    pointer-events: none;
    box-shadow: var(--ores-shadow-lg);
}
.cal-tip strong { display: block; margin-bottom: 2px; }

/* ---------- Roster board ---------- */

.roster-steps { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.roster-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--ores-line-strong);
    color: var(--ores-ink-soft);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
}
.roster-step:hover { background: #f9fafb; }
.roster-step.current { background: var(--ores-brand); border-color: var(--ores-brand); color: #fff; }
.roster-step-arrow { color: var(--ores-line-strong); font-size: 11px; }

.roster-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--ores-line); }
.roster-week-title { font-weight: 600; font-size: 15px; }
.roster-week-number { color: var(--ores-ink-muted); font-size: 12px; margin-left: 6px; font-weight: 500; }
.roster-kpi { display: inline-flex; flex-direction: column; line-height: 1.2; }
.roster-kpi b { font-size: 15px; }
.roster-kpi small { color: var(--ores-ink-muted); font-size: 11px; }

.roster-scroll { overflow-x: auto; }
.roster-grid { width: 100%; min-width: 1050px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.roster-grid th, .roster-grid td { border-bottom: 1px solid #eceef1; border-right: 1px solid #f1f2f4; vertical-align: top; }
.roster-grid th:last-child, .roster-grid td:last-child { border-right: 0; }
.roster-grid thead th { background: #fafbfc; padding: 8px 8px; font-weight: 600; position: sticky; top: 0; z-index: 3; }
.roster-name-col { width: 216px; position: sticky; left: 0; background: #fff; z-index: 2; border-right: 1px solid var(--ores-line) !important; padding: 10px 12px; }
thead .roster-name-col { z-index: 4; background: #fafbfc; }
.roster-day-name { font-size: 13px; }
.roster-day-sub { color: var(--ores-ink-muted); font-size: 11px; font-weight: 400; }
.roster-day-today { color: var(--ores-brand); }
.roster-day-closed { background-image: repeating-linear-gradient(135deg, rgba(107, 114, 128, 0.05), rgba(107, 114, 128, 0.05) 5px, rgba(107, 114, 128, 0.1) 5px, rgba(107, 114, 128, 0.1) 10px); }
.roster-day-outside { background: #f3f4f6; }

.roster-person { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.roster-person button { margin-left: auto; background: none; border: 0; color: var(--ores-ink-muted); padding: 0 2px; }
.roster-person button:hover { color: var(--ores-brand); }
.roster-hours { font-size: 12px; color: var(--ores-ink-muted); margin-top: 5px; display: flex; justify-content: space-between; gap: 6px; }
.roster-bar { height: 5px; background: #eef0f3; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.roster-bar div { height: 100%; background: var(--ores-success); border-radius: 3px; }
.roster-bar.near div { background: #f59e0b; }
.roster-bar.over div { background: var(--ores-danger); }
.roster-note { font-size: 11px; color: var(--ores-ink-muted); margin-top: 4px; }

.roster-cell { padding: 5px; height: 76px; cursor: pointer; position: relative; transition: background 0.1s; }
.roster-cell:hover { background: #f9faff; }
.roster-cell.dragover { background: var(--ores-brand-soft); box-shadow: inset 0 0 0 2px #818cf8; }
.roster-cell.disabled { cursor: not-allowed; }
.roster-cell-add { position: absolute; right: 6px; bottom: 4px; color: #a5b4fc; display: none; font-size: 12px; }
.roster-cell:hover .roster-cell-add { display: block; }

.roster-shift {
    display: block;
    background: var(--shift-bg, #eef2ff);
    border-left: 3px solid var(--shift-accent, var(--ores-brand));
    border-radius: 5px;
    padding: 3px 6px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ores-ink);
    cursor: grab;
    line-height: 1.3;
}
.roster-shift:hover { box-shadow: 0 2px 6px rgba(17, 24, 39, 0.16); }
.roster-shift small { display: block; font-weight: 400; color: var(--ores-ink-soft); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.roster-shift .warn { color: var(--ores-warning); margin-left: 3px; }
.roster-shift.has-warning { box-shadow: inset 0 0 0 1px #fbbf24; }

.roster-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    border-radius: 4px;
    padding: 1px 5px;
    margin-bottom: 3px;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tag-AVAILABLE { background: var(--ores-success-soft); color: #065f46; }
.tag-PREFERRED { background: #ede9fe; color: #5b21b6; }
.tag-UNAVAILABLE { background: var(--ores-danger-soft); color: #991b1b; }
.tag-HOLIDAY { background: var(--ores-info-soft); color: #075985; }
.tag-SICK { background: var(--ores-danger-soft); color: #991b1b; }
.tag-ABSENCE { background: #e5e7eb; color: #374151; }
.tag-TASK { background: #dcfce7; color: #166534; }
.tag-pending { border: 1px dashed currentColor; }

.roster-foot td { background: #fafbfc; font-size: 12px; color: var(--ores-ink-muted); padding: 7px 8px; font-weight: 500; }

.request-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 11px 16px; border-bottom: 1px solid #f3f4f6; }
.request-row:last-child { border-bottom: 0; }
.request-row .grow { flex: 1; min-width: 180px; }

.progress-thin { height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; }
.progress-thin div { height: 100%; background: var(--ores-brand); }

.myroster-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1099.98px) {
    .myroster-layout { grid-template-columns: minmax(0, 1fr); }
}
.myroster-side { display: flex; flex-direction: column; gap: 16px; }
.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; min-width: 0; }

/* ---------- Public booking ---------- */

.booking-card { max-width: 760px; margin: 28px auto; }

/* ---------- Messages ---------- */

.app-topbar-bell { position: relative; margin-left: auto; color: inherit; padding: 6px 8px; }
.app-topbar-bell .app-nav-badge { position: absolute; top: -2px; right: -4px; }

.message-row { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #f3f4f6; }
.message-row:last-child { border-bottom: 0; }
.message-row.is-unread { background: var(--ores-brand-soft); }
.message-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0f3;
    color: var(--ores-ink-soft);
}
.message-row.is-unread .message-icon { background: var(--ores-brand); color: #fff; }
.message-main { flex: 1; min-width: 0; }
.message-title { font-weight: 600; overflow-wrap: anywhere; }
.message-body { color: var(--ores-ink-soft); white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
.message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--ores-ink-muted); }
.message-actions { flex: none; display: flex; align-items: flex-start; gap: 4px; }
.icon-button { border: 0; background: transparent; color: var(--ores-ink-muted); padding: 4px 8px; border-radius: var(--ores-radius-sm); }
.icon-button:hover { background: #eef0f3; color: var(--ores-ink); }

/* ---------- Guidance ---------- */

.page-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--ores-info-soft);
    color: #075985;
    border-radius: var(--ores-radius);
}
.page-hint > i { margin-top: 3px; }
.page-hint-text { flex: 1; min-width: 0; color: var(--ores-ink); }
.page-hint .btn-close { flex: none; font-size: 11px; margin-top: 4px; }

.sheet-header { display: flex; align-items: center; gap: 12px; }
.sheet-header .grow { flex: 1; min-width: 0; }
.sheet-progress { width: 120px; flex: none; }
.sheet-count { font-size: 12px; color: var(--ores-ink-muted); text-align: right; margin-bottom: 4px; }

.work-item { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; }
.work-item:last-child { border-bottom: 0; }
.work-item-state { flex: none; width: 22px; font-size: 17px; line-height: 22px; color: var(--ores-line-strong); }
.work-item.is-done .work-item-state { color: var(--ores-success); }
.work-item.is-skipped .work-item-state { color: var(--ores-ink-muted); }
.work-item-ring { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--ores-line-strong); border-radius: 50%; vertical-align: -2px; }
.work-item-main { flex: 1; min-width: 200px; }
.work-item-title { font-weight: 600; }
.work-item.is-done .work-item-title, .work-item.is-skipped .work-item-title { font-weight: 500; color: var(--ores-ink-soft); }
.work-item-text { color: var(--ores-ink-soft); font-size: 13px; }
.work-item-note { font-size: 12px; color: var(--ores-warning); margin-top: 2px; }
.work-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 34px; }
@media (min-width: 768px) {
    .work-item-actions { margin-left: 0; }
}

/* ---------- Account and hours ---------- */

.page-hint-warning { background: var(--ores-warning-soft); color: #92400e; }
a.app-user-name { color: #e5e7eb; text-decoration: none; }
a.app-user-name:hover { color: #fff; text-decoration: underline; }
.account-card { max-width: 460px; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 400px) {
    .account-grid { grid-template-columns: minmax(0, 1fr); }
}
.booking-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 18px 0; }
.booking-details dt { font-weight: 500; color: var(--ores-ink-muted); }
.booking-details dd { margin: 0; }
.hours-table td, .hours-table th { white-space: nowrap; }
.hours-table tfoot td { font-weight: 600; background: #fafbfc; }
.hours-over { background: var(--ores-danger-soft); color: #991b1b; font-weight: 600; }

/* ---------- Login ---------- */

.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: var(--ores-canvas); }
.login-card { width: 100%; max-width: 400px; }
.login-card .panel-body { padding: 28px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--ores-ink); margin-bottom: 22px; }
.login-info { max-width: 400px; margin-top: 14px; color: var(--ores-ink-soft); }

.ev-notice { color: var(--ores-warning); }

.ev-noshow { opacity: 0.55; text-decoration: line-through; }
.booking-url { flex: 1 1 280px; min-width: 0; }

/* ---------- Public booking ---------- */

.bk { max-width: 980px; margin: 0 auto; scroll-margin-top: 16px; }
.bk-hero { margin: 6px 0 18px; }
.bk-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.bk-intro { color: var(--ores-ink-soft); margin: 6px 0 0; white-space: pre-line; max-width: 640px; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.bk-main { min-width: 0; }
.bk-steps { list-style: none; display: flex; gap: 6px 20px; flex-wrap: wrap; padding: 0; margin: 0 0 14px; color: var(--ores-ink-muted); font-size: 13px; font-weight: 500; }
.bk-steps li { display: inline-flex; align-items: center; gap: 7px; }
.bk-steps span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e9ebef; font-size: 12px; font-weight: 600; }
.bk-steps .is-current { color: var(--ores-ink); }
.bk-steps .is-current span { background: var(--ores-brand); color: #fff; }
.bk-steps .is-done span { background: var(--ores-brand-soft); color: var(--ores-brand); }
.bk-panel { padding: 20px; }
.bk-panel-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.bk-back { background: none; border: 0; padding: 0; margin-bottom: 12px; color: var(--ores-ink-muted); font-size: 13px; }
.bk-back:hover { color: var(--ores-ink); }
.bk-options { display: flex; flex-direction: column; gap: 8px; }
.bk-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); text-align: left; color: var(--ores-ink); transition: border-color 0.12s, background 0.12s; }
.bk-option:hover, .bk-option:focus-visible { border-color: var(--ores-brand); background: #fafaff; }
.bk-option.is-selected { border-color: var(--ores-brand); background: var(--ores-brand-soft); }
.bk-option i { color: var(--ores-ink-muted); font-size: 12px; }
.bk-option-name { flex: 1; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bk-option-meta { color: var(--ores-ink-muted); font-size: 13px; white-space: nowrap; }
.bk-option-price { font-weight: 600; white-space: nowrap; }
.bk-field { margin-bottom: 14px; max-width: 320px; }
.bk-days { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.bk-days .icon-button { flex: none; height: 62px; }
.bk-days .icon-button:disabled { opacity: 0.3; }
.bk-day-strip { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.bk-day { display: flex; flex-direction: column; align-items: center; padding: 7px 0; background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); line-height: 1.2; color: var(--ores-ink); }
.bk-day:hover { border-color: var(--ores-brand); }
.bk-day.is-selected { background: var(--ores-brand); border-color: var(--ores-brand); color: #fff; }
.bk-day-name, .bk-day-month { font-size: 11px; opacity: 0.75; }
.bk-day-number { font-size: 16px; font-weight: 600; }
.bk-slot-group { margin-bottom: 14px; }
.bk-slot-group:last-child { margin-bottom: 0; }
.bk-slot-title { font-size: 12px; font-weight: 600; color: var(--ores-ink-muted); margin-bottom: 6px; }
.bk-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.bk-slot { padding: 8px 0; background: #fff; border: 1px solid var(--ores-line-strong); border-radius: var(--ores-radius-sm); font-weight: 500; color: var(--ores-ink); }
.bk-slot.is-selected { background: var(--ores-brand); border-color: var(--ores-brand); color: #fff; }
.bk-rule-note { margin: 14px 0 0; padding: 9px 12px; font-size: 13.5px; color: var(--ores-ink-soft); background: var(--ores-brand-soft); border-radius: var(--ores-radius-sm); }
.bk-move-day { max-width: 220px; }
.bk-slot:hover, .bk-slot:focus-visible { background: var(--ores-brand); border-color: var(--ores-brand); color: #fff; }
.bk-waitlist { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.bk-waitlist .form-label { margin: 0; }
.bk-group-title { margin: 14px 0 6px; font-weight: 700; }
.bk-group-title:first-child { margin-top: 0; }
.bk-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bk-cat { padding: 7px 14px; border: 1px solid var(--ores-line-strong); border-radius: 999px; background: #fff; color: var(--ores-ink); font-weight: 600; font-size: 14px; }
.bk-cat:hover { border-color: var(--ores-brand); }
.bk-cat.is-selected { background: var(--ores-brand); border-color: var(--ores-brand); color: #fff; }
.bk-search { position: relative; margin-bottom: 12px; }
.bk-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ores-ink-muted); font-size: 14px; }
.bk-search input { padding-left: 36px; }
.bk-none { margin: 8px 0; color: var(--ores-ink-soft); }
.bk-no-slots { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: #f9fafb; border-radius: var(--ores-radius-sm); }
.bk-loading { color: var(--ores-ink-muted); padding: 14px 2px; }
.bk-submit { margin-top: 16px; width: 100%; padding: 10px; }
.bk-summary { padding: 18px; position: sticky; top: 16px; }
.bk-summary .bk-panel-title { margin-bottom: 10px; }
.bk-summary-empty { color: var(--ores-ink-muted); font-size: 13px; }
.bk-summary-list { margin: 0; }
.bk-summary-list dt { font-size: 12px; font-weight: 500; color: var(--ores-ink-muted); margin-top: 8px; }
.bk-summary-list dt:first-child { margin-top: 0; }
.bk-summary-list dd { margin: 0; overflow-wrap: anywhere; }
.bk-deposit { margin: 12px 0 0; padding: 9px 11px; background: var(--ores-warning-soft); color: #92400e; border-radius: var(--ores-radius-sm); font-size: 13px; }
.bk-contact { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ores-line); font-size: 13px; color: var(--ores-ink-soft); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.bk-contact-title { font-weight: 600; color: var(--ores-ink); }
.bk-contact i { width: 16px; color: var(--ores-ink-muted); }
.bk-done { max-width: 520px; margin: 18px auto; padding: 32px 28px; text-align: center; }
.bk-done .bk-title { font-size: 22px; }
.bk-done-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ores-success-soft); color: var(--ores-success); font-size: 22px; }
.bk-done-icon.is-waiting { background: var(--ores-warning-soft); color: var(--ores-warning); }
.bk-done .bk-summary-list { text-align: left; margin: 16px 0 20px; padding: 14px 16px; background: #f9fafb; border-radius: var(--ores-radius-sm); }
.bk-done-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bk-footer { text-align: center; color: var(--ores-ink-muted); font-size: 12px; margin-top: 26px; }
@media (max-width: 860px) {
    .bk-layout { grid-template-columns: minmax(0, 1fr); }
    .bk-summary { position: static; order: -1; padding: 14px 16px; }
    .bk-summary .bk-contact { display: none; }
    .bk-summary-list { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; }
    .bk-summary-list dt { margin-top: 0; }
    .bk-panel { padding: 16px; }
    .bk-title { font-size: 22px; }
}
@media (max-width: 460px) {
    .bk-days .icon-button { padding: 4px; }
    .bk-day-month { display: none; }
    .bk-day-number { font-size: 14px; }
}

/* ---------- Polish: links and small shared pieces ---------- */

.app-content a:not(.btn):not(.stat):not(.app-nav-link):not(.list-tab):not(.page-link) { text-decoration: none; }
.app-content a:not(.btn):not(.stat):not(.app-nav-link):not(.list-tab):not(.page-link):hover { text-decoration: underline; }
.row-link { font-weight: 600; color: var(--ores-ink); }
.row-link:hover { color: var(--ores-brand); }
.panel-link { font-size: 13px; font-weight: 500; white-space: nowrap; }
.back-link { display: inline-block; font-size: 13px; color: var(--ores-ink-muted) !important; margin-bottom: 2px; }
.stat { transition: border-color 0.12s, box-shadow 0.12s; }
a.stat:hover { border-color: var(--ores-line-strong); box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08); }
.stat-value-sm { font-size: 17px; line-height: 36px; }
.empty-state i { display: block; text-align: center; width: 100%; }
.empty-state p { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------- Menu search ---------- */

.app-search { position: relative; margin: 2px 10px 6px; }
.app-search > i { position: absolute; left: 10px; top: 10px; font-size: 12px; color: #6b7280; pointer-events: none; }
.app-search input { width: 100%; height: 33px; padding: 0 10px 0 29px; background: #1f2937; border: 1px solid #374151; border-radius: var(--ores-radius-sm); color: #f9fafb; font-size: 13px; outline: 0; }
.app-search input::placeholder { color: #9ca3af; }
.app-search input:focus { border-color: #818cf8; background: #111827; }
.app-search input::-webkit-search-cancel-button { filter: invert(1); }
.app-search-results { position: absolute; z-index: 1100; left: 0; right: -120px; top: 37px; background: #fff; border-radius: var(--ores-radius-sm); box-shadow: var(--ores-shadow-lg); overflow: hidden; }
.app-search-results a { display: block; padding: 8px 12px; color: var(--ores-ink); text-decoration: none; border-bottom: 1px solid #f3f4f6; }
.app-search-results a:last-child { border-bottom: 0; }
.app-search-results a:hover, .app-search-results a.is-active { background: var(--ores-brand-soft); }
.app-search-results strong { display: block; font-weight: 600; font-size: 13px; }
.app-search-results span { display: block; font-size: 12px; color: var(--ores-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-search-empty { padding: 10px 12px; color: var(--ores-ink-muted); font-size: 13px; }

/* ---------- Home ---------- */

.home-stats { margin-bottom: 16px; }
.home-question-text { flex: 1 1 320px; }
/* Reporting a problem, and the reports for superusers */
.app-nav-report { margin-top: 12px; opacity: .85; }
.problem-list { display: flex; flex-direction: column; gap: 10px; }
.problem { margin: 0; }
.problem-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.problem-head::-webkit-details-marker { display: none; }
.problem-title { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.problem-meta { color: var(--ores-ink-muted); font-size: 13px; white-space: nowrap; }
.problem-message { white-space: pre-wrap; }
.problem-facts { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 13px; }
.problem-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.problem-errors { margin: 0; white-space: pre-wrap; font-size: 12px; }
@media (max-width: 640px) { .problem-facts { grid-template-columns: 1fr; } .problem-meta { display: none; } }
/* Booking page: who to book with, as buttons */
.bk-people-field { max-width: none; }
.bk-field-label { font-weight: 600; margin-bottom: 8px; }
.bk-people { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-person { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; background: #fff; border: 1px solid var(--ores-line); border-radius: 999px; font: inherit; color: var(--ores-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bk-person:hover { border-color: var(--ores-line-strong); }
.bk-person.is-selected { border-color: var(--ores-brand); box-shadow: 0 0 0 2px var(--ores-brand-soft); font-weight: 600; }
.bk-person:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: 2px; }
.bk-person-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.bk-person-any { background: var(--ores-brand-soft); color: var(--ores-brand); font-size: 13px; }
.bk-person-name { white-space: nowrap; }
.bk-no-slots-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-no-slots.is-person { background: #fff7ed; }
/* The appointment dialog: who works that day and how full it is */
.appt-staffing { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); background: #fafafa; font-size: 13px; }
.appt-staffing:empty { display: none; }
.appt-staffing-head { margin-bottom: 6px; }
.appt-staffing-bar { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; margin-bottom: 8px; }
.appt-staffing-bar span { display: block; height: 100%; background: #16a34a; }
.appt-staffing-bar.is-busy span { background: #d97706; }
.appt-staffing-bar.is-full span { background: #dc2626; }
.appt-staffing-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.appt-staffing-people li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.appt-staffing-people li.is-off { color: var(--ores-ink-muted); }
.staff-dot, .treat-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.staff-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-hours { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The treatment picker: variations under their heading */
.treat-heading { padding: 10px 12px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ores-ink-muted); }
.treat-row { align-items: center; }
.treat-row .treat-dot { margin-right: 10px; }
.treat-row.treat-nested { padding-left: 28px; }
/* The tree picker (ores-treatment-picker.js): each level a step further in */
.treat-row.treat-depth-1, .treat-heading.treat-depth-1 { padding-left: 28px; }
.treat-row.treat-depth-2, .treat-heading.treat-depth-2 { padding-left: 46px; }
.treat-row.treat-depth-3, .treat-heading.treat-depth-3 { padding-left: 64px; }
.treat-row.treat-depth-4 { padding-left: 82px; }
.treat-heading i { margin-right: 4px; color: var(--ores-ink-muted); }
.treat-row .treat-folder { flex: none; width: 16px; margin-right: 10px; color: var(--ores-brand); }
.treat-row.is-current { background: var(--ores-brand-soft); }
.cust-badge.cust-badge-current { background: var(--ores-brand); color: #fff; }
.cust-badge.cust-badge-free { background: #dcfce7; color: #166534; }
.cust-badge.cust-badge-busy { background: #fef3c7; color: #92400e; }
.treat-row.is-unavailable .cust-name > span:first-child { color: var(--ores-ink-soft); }
/* The booking page inside the booking widget on a salon's website: only the booking, as tall as it is */
html:has(body.is-embed), body.is-embed { min-height: 0; height: auto; background: transparent; }
.is-embed .app-public-header { display: none; }
.is-embed .app-main, .is-embed .app-content { min-height: 0; }
.is-embed .app-content { padding-top: 8px; padding-bottom: 8px; }
.widget-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.widget-code { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: #f8fafc; }
.widget-preview { border: 1px dashed var(--ores-line-strong); border-radius: var(--ores-radius); padding: 16px; background: #fff; }
@media (max-width: 1100px) { .widget-setup { grid-template-columns: 1fr; } }
.invoice-review { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.invoice-review > .invoice-preview:only-child { grid-column: 1 / -1; max-width: 900px; }
.invoice-preview { position: sticky; top: 16px; overflow: hidden; }
.invoice-preview iframe { display: block; width: 100%; height: 1000px; border: 0; background: #fff; }
.invoice-buyer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.invoice-buyer .sd-wide { grid-column: 1 / -1; }
.invoice-lines { table-layout: fixed; width: 100%; }
.invoice-lines th:nth-child(2), .invoice-lines td:nth-child(2) { width: 64px; }
.invoice-lines th:nth-child(3), .invoice-lines td:nth-child(3) { width: 96px; }
.invoice-lines th:nth-child(4), .invoice-lines td:nth-child(4) { width: 78px; }
.invoice-lines th:nth-child(5), .invoice-lines td:nth-child(5) { width: 76px; }
.invoice-lines th:nth-child(6), .invoice-lines td:nth-child(6) { width: 40px; }
.invoice-lines td { padding-left: 4px; padding-right: 4px; }
.invoice-lines tfoot td:first-child { white-space: nowrap; }
.invoice-save { display: flex; justify-content: flex-end; align-items: center; gap: 12px; border-top: 1px solid var(--ores-line); }
@media (max-width: 1100px) { .invoice-review { grid-template-columns: 1fr; } .invoice-preview { position: static; } .invoice-preview iframe { height: 760px; } }
@media (max-width: 576px) { .invoice-buyer { grid-template-columns: 1fr; } }
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000; max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; background: #fff; color: var(--ores-ink); border: 1px solid var(--ores-line-strong); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow-lg); }
.consent-banner[hidden] { display: none; }
.consent-banner-text { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; }
.consent-banner-actions { display: flex; gap: 8px; margin-left: auto; }
.consent-banner-actions .btn { min-width: 112px; }
@media (max-width: 400px) { .consent-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px; } .consent-banner-actions { width: 100%; } .consent-banner-actions .btn { flex: 1; min-width: 0; } }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.home-main, .home-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.home-side:empty { display: none; }
.home-todo { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #f3f4f6; }
.home-todo:last-child { border-bottom: 0; }
.home-todo .work-item-ring { flex: none; margin-top: 2px; }
.home-todo-icon { flex: none; width: 16px; margin-top: 3px; color: var(--ores-ink-muted); text-align: center; }
.home-todo-main { min-width: 0; flex: 1; }
.home-clamp { color: var(--ores-ink-soft); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1099.98px) {
    .home-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Lists ---------- */

.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.list-toolbar .form-select { width: auto; flex: none; }
.list-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.list-search i { position: absolute; left: 12px; top: 12px; font-size: 13px; color: var(--ores-ink-muted); }
.list-search .form-control { padding-left: 34px; }
.list-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.list-pager .disabled { pointer-events: none; opacity: 0.45; }
.list-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 12px; background: #eceef2; border-radius: var(--ores-radius-sm); }
.list-tab { padding: 5px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--ores-ink-soft); font-size: 13px; font-weight: 500; text-decoration: none; }
.list-tab:hover { color: var(--ores-ink); }
.list-tab.active { background: #fff; color: var(--ores-ink); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1); }
.notice-header { cursor: pointer; user-select: none; }
.notice-header::after { content: "\f077"; font-family: "Font Awesome 7 Free"; font-weight: 900; font-size: 12px; color: var(--ores-ink-muted); margin-left: 12px; }
.is-collapsed .notice-header { border-bottom: 0; }
.is-collapsed .notice-header::after { content: "\f078"; }
.is-collapsed #customerNoticeRows { display: none; }
.inbox-layout:not(:has(.myroster-side > .panel:not(.d-none))) { grid-template-columns: minmax(0, 1fr); }

/* Phones: a table with many columns reads better as a list of cards */
@media (max-width: 767.98px) {
    .data-table-cards thead { display: none; }
    .data-table-cards, .data-table-cards tbody, .data-table-cards tr, .data-table-cards td { display: block; width: 100%; }
    .data-table-cards tr { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; }
    .data-table-cards tr:last-child { border-bottom: 0; }
    .data-table-cards td { padding: 2px 0; border: 0; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
    .data-table-cards td[data-label] { display: flex; justify-content: space-between; gap: 14px; }
    .data-table-cards td[data-label]::before { content: attr(data-label); color: var(--ores-ink-muted); font-size: 13px; flex: none; }
    .data-table-cards td[data-label] > .pill, .data-table-cards td[data-label] > a { text-align: right; }
    .list-toolbar .form-select { flex: 1; }
    .list-search { max-width: none; flex-basis: 100%; }
}

/* Core's list manager, in the same look as the rest of the app */
.core-list { --core-pad: 16px; }
.core-list .filter-form { margin-bottom: 12px; }
.core-list .filter-form .form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.core-list .filter-form .form-row > div { flex: none; padding: 0; width: auto; max-width: none; }
.core-list .filter-form .form-row > div:first-child { flex: 1 1 260px; max-width: 420px; }
.core-list .filter-form .form-control { margin: 0 !important; }
.core-list .filter-form .btn { margin: 0 !important; display: inline-flex !important; align-items: center; gap: 5px; }
.core-list .filter-form .btn-secondary, .core-list .filter-form .btn-primary { background: #fff; color: var(--ores-ink); border: 1px solid var(--ores-line-strong); }
.core-list .filter-form .btn-secondary:hover, .core-list .filter-form .btn-primary:hover { background: #f3f4f6; }
.core-list .filter-form .btn-danger { background: #fff; color: var(--ores-danger); border: 1px solid var(--ores-line-strong); }
.core-list .badge { background: none !important; color: inherit !important; padding: 0 !important; font: inherit !important; }
.core-list .filter-form a[href*="filterContainer"] { display: none !important; }
.core-list .container { max-width: none; }
.core-list .table-responsive-sm { background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow); overflow: auto; }
.core-list table.list-manager { margin: 0; --bs-table-striped-bg: transparent; --bs-table-bg: transparent; border: 0 !important; }
.core-list table.list-manager > thead, .core-list table.list-manager > tbody, .core-list table.list-manager tr { border: 0 !important; }
.core-list table.list-manager > * > tr > * { border-width: 0 0 1px; border-color: #f3f4f6; padding: 11px 16px; vertical-align: middle; font-size: 14px; }
.core-list table.list-manager thead th { background: transparent; border-bottom: 1px solid var(--ores-line); font-size: 12px; font-weight: 600; color: var(--ores-ink-muted); white-space: nowrap; }
.core-list table.list-manager thead a { color: inherit; text-decoration: none; font-weight: 600; }
.core-list table.list-manager thead a:hover { color: var(--ores-ink); }
.core-list table.list-manager thead i { font-size: 10px; opacity: 0.45; color: inherit; }
.core-list table.list-manager tbody tr:last-child > * { border-bottom: 0; }
.core-list table.list-manager tbody tr.toggleTr { cursor: pointer; }
.core-list table.list-manager tbody tr.toggleTr:hover > * { background: #fafafa; --bs-table-accent-bg: #fafafa; }
.core-list table.list-manager tbody tr > td:first-child, .core-list table.list-manager thead th:first-child { width: auto; }
.core-list td.list-actions { text-align: right; white-space: nowrap; width: 1%; }
.core-list td a { color: inherit; text-decoration: none; }
.core-list .pagination { margin: 14px 0 0; justify-content: center; }
.core-list .page-link { color: var(--ores-ink-soft); border-color: var(--ores-line); }
.core-list .page-item.active .page-link { background: var(--ores-brand); border-color: var(--ores-brand); color: #fff; }
@media (max-width: 767.98px) {
    .core-list table.list-manager { min-width: 100%; }
    .core-list table.list-manager > * > tr > * { padding: 10px 12px; }
}

/* ---------- Settings ---------- */

.settings-form { max-width: 760px; }
.settings-group { margin-bottom: 16px; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.settings-wide { grid-column: 1 / -1; }
.settings-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 640px) { .settings-fields { grid-template-columns: minmax(0, 1fr); } }
.import-file { max-width: 420px; }
.import-tips { margin: 16px 0 0; padding-left: 18px; color: var(--ores-ink-soft); font-size: 13.5px; }
.import-tips li { margin-bottom: 4px; }
.import-map select { min-width: 170px; }
.import-failed-list { max-height: 320px; overflow-y: auto; }
.customer-warning-icon { color: #b45309; }
.customer-warning { margin-bottom: 16px; }
.merge-results { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.merge-result { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 7px 10px; background: none; border: 0; border-bottom: 1px solid #f3f4f6; text-align: left; }
.merge-result:hover, .merge-result:focus-visible { background: var(--ores-brand-soft); }
.merge-result span { color: var(--ores-ink-muted); font-size: 13px; }
.ec .ev-warning { color: #b45309; }
.ev-tip-warning { display: block; color: #b45309; font-weight: 600; }
.settings-section { margin-bottom: 20px; }
.settings-section-title { font-size: 13px; font-weight: 600; color: var(--ores-ink-muted); margin: 0 0 8px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.settings-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow); color: var(--ores-ink); text-decoration: none !important; transition: border-color 0.12s, box-shadow 0.12s; }
.settings-card:hover { border-color: var(--ores-brand); box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08); }
.settings-card-icon { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ores-brand-soft); color: var(--ores-brand); }
.settings-card strong { display: block; font-weight: 600; }
.settings-card div span { display: block; font-size: 13px; color: var(--ores-ink-muted); }

/* ---------- Dialog forms ---------- */

.c-boaccountsettings-bonewobject, .c-boaccountsettings-boeditobject, .c-boobject-editobject { overflow-x: hidden; }
.form-content .row { --bs-gutter-x: 16px; }
.form-content input[type=checkbox] { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--ores-brand); }

/* ---------- Reports ---------- */

.report-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.report-range .form-control { width: 150px; }
.report-chart-panel { margin-bottom: 16px; }
.report-chart { display: flex; align-items: stretch; gap: 2px; height: 210px; padding: 14px 16px 10px; overflow-x: auto; }
.report-column { flex: 1 0 18px; min-width: 18px; display: flex; flex-direction: column; border-radius: 4px; outline: 0; }
.report-column:hover .report-bar, .report-column:focus-visible .report-bar { background: var(--ores-brand-dark); }
.report-track { flex: 1; display: flex; align-items: flex-end; min-height: 0; border-bottom: 1px solid var(--ores-line); }
.report-bar { position: relative; width: 100%; max-width: 30px; margin: 0 auto; min-height: 2px; background: var(--ores-brand); border-radius: 4px 4px 0 0; }
.report-bar.is-empty { background: transparent; min-height: 0; }
.report-label { height: 20px; padding-top: 5px; font-size: 11px; line-height: 14px; color: var(--ores-ink-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.report-chart:has(.report-column:nth-child(15)) .report-column:not(:nth-child(5n + 1)) .report-label { visibility: hidden; }
.report-chart:has(.report-column:nth-child(15)) .report-label { overflow: visible; }
.report-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.report-two .report-chart-panel { margin-bottom: 0; }
.report-two .report-chart { height: 170px; }
.report-meter { height: 4px; margin-top: 5px; background: #eef0f3; border-radius: 2px; overflow: hidden; }
.report-meter div { height: 100%; background: var(--ores-brand); border-radius: 2px; }
@media (max-width: 1099.98px) {
    .report-two { grid-template-columns: minmax(0, 1fr); }
    .report-range { margin-left: 0; }
}

.report-peak { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--ores-ink); }
.report-chart { padding-top: 26px; }
.report-table-toggle { margin: -8px 0 16px; padding: 10px 16px; }
.report-table-toggle summary { cursor: pointer; font-size: 13px; color: var(--ores-ink-soft); }
.report-table-toggle .table-scroll { margin: 8px -16px -10px; max-height: 320px; overflow-y: auto; }
.report-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1300px) {
    .report-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .home-stats, .report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat-value { font-size: 20px; }
    .data-table-cards td:has(> .text-muted:only-child) { display: none; }
}

/* Dialog forms */
.top-form-header { border-bottom: 1px solid var(--ores-line); margin-bottom: 12px; }
body:has(> .app-main #frmEditObject), body:has(#frmEditObject) { background: #fff; }
.bottom-actions.row { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px; margin-left: 0; margin-right: 0; }
.bottom-actions.row > [class*="col"] { flex: 0 1 auto; width: auto; padding: 0; display: flex; align-items: center; gap: 14px; }
.bottom-actions .btn-lg { font-size: 14px; padding: 7px 16px; }
.bottom-actions .btn-secondary { background: #fff; color: var(--ores-ink); border: 1px solid var(--ores-line-strong); }
.bottom-actions .btn-secondary:hover { background: #f3f4f6; color: var(--ores-ink); }
.bottom-actions .form-check-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; white-space: nowrap; }
.bottom-actions input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ores-brand); }

/* Error pages */
.error-page { padding-top: 40px; text-align: center; }
.error-page hr { display: none; }
.error-page h1 { font-size: 15px; font-weight: 600; color: var(--ores-ink-muted); margin: 0 !important; }
.error-page h2 { font-size: 24px; font-weight: 700; margin: 4px 0 8px; }
.error-page p { color: var(--ores-ink-soft); }
.bottom-actions.row { bottom: 0; margin-bottom: 0; }
body:has(#frmEditObject) { padding-bottom: 76px; }
body:has(#frmEditObject) { overflow-x: hidden; }

/* ---------- Home: what needs doing and what's coming ---------- */

.home-actions { margin-bottom: 16px; border-color: #c7d2fe; }
.home-actions .panel-title i { color: var(--ores-brand); }
.appt-day { padding: 8px 16px; background: #fafbfc; border-bottom: 1px solid #f3f4f6; font-size: 12px; font-weight: 600; color: var(--ores-ink-muted); }
.appt-day::first-letter { text-transform: uppercase; }
.appt-row { display: flex; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; }
.appt-row:last-child { border-bottom: 0; }
.appt-time { flex: none; width: 46px; font-weight: 600; line-height: 1.35; }
.appt-time span { display: block; font-weight: 400; font-size: 12px; color: var(--ores-ink-muted); }
.appt-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.appt-sub { font-size: 13px; color: var(--ores-ink-soft); }
.appt-part + .appt-part::before { content: "\00b7"; margin: 0 6px; }
.appt-contact { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 13px; }
.appt-contact i { font-size: 11px; margin-right: 2px; }
.appt-note { margin-top: 3px; font-size: 13px; color: var(--ores-ink-soft); }
.appt-note i { font-size: 11px; margin-right: 3px; color: var(--ores-ink-muted); }
.appt-more { padding: 10px 16px; font-size: 13px; border-top: 1px solid #f3f4f6; }

/* Reports you put together yourself */
.report-builder { padding: 16px; margin-bottom: 16px; }
.report-builder-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 14px; }
.report-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; grid-column: span 2; }
.report-columns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; padding: 0; border: 0; }
.report-columns legend { float: none; width: 100%; margin-bottom: 6px; padding: 0; font-size: inherit; }
.report-column-choice { margin: 0; cursor: pointer; }
.report-column-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.report-column-choice span { display: inline-block; padding: 4px 11px; border: 1px solid var(--ores-line-strong); border-radius: 999px; font-size: 13px; color: var(--ores-ink-soft); background: #fff; }
.report-column-choice:hover span { border-color: var(--ores-ink-muted); }
.report-column-choice input:checked + span { background: var(--ores-brand-soft); border-color: var(--ores-brand); color: var(--ores-brand-dark); font-weight: 500; }
.report-column-choice input:focus-visible + span { outline: 2px solid var(--ores-brand); outline-offset: 2px; }
.report-builder-actions { margin-top: 14px; }
.report-table tfoot th, .report-table tfoot td { border-top: 2px solid var(--ores-line-strong); font-weight: 600; background: #fafbfc; }
.report-library { margin-bottom: 16px; }
.report-library-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ores-line); color: var(--ores-ink); }
.report-library .panel-header + .report-library-row { border-top: 0; }
a.report-library-row:hover { background: #fafbfc; text-decoration: none !important; }
a.report-library-row > i { color: var(--ores-ink-muted); font-size: 12px; }
.report-library-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--ores-ink); }
.report-library-text span { font-size: 13px; color: var(--ores-ink-muted); }
.home-paid-with { display: inline-block; width: auto; margin-right: 6px; padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
@media (max-width: 575.98px) {
    .report-dates { grid-column: auto; }
}

/* Asking for an account */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; max-width: 960px; margin: 24px auto 48px; align-items: start; }
.signup-title { font-size: 30px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 10px; }
.signup-lead { font-size: 16px; line-height: 1.5; color: var(--ores-ink-soft); max-width: 44ch; margin: 0 0 28px; }
.signup-steps { list-style: none; counter-reset: signup; padding: 0; margin: 0; display: grid; gap: 18px; }
.signup-steps li { counter-increment: signup; position: relative; padding-left: 40px; }
.signup-steps li::before { content: counter(signup); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ores-brand-soft); color: var(--ores-brand-dark); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.signup-steps strong { display: block; }
.signup-steps span { color: var(--ores-ink-muted); }
.signup-form { padding: 24px; }
.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-sent { grid-column: 1 / -1; max-width: 520px; margin: 40px auto; padding: 36px; text-align: center; }
.signup-sent > i { font-size: 34px; color: var(--ores-success); margin-bottom: 12px; }
.signup-sent p { color: var(--ores-ink-soft); margin: 10px 0 20px; }
.signup-review { margin-bottom: 16px; border-color: var(--ores-brand); }
.signup-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.signup-handled summary { padding: 12px 16px; cursor: pointer; font-weight: 500; }
@media (max-width: 767.98px) {
    .signup { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 8px; }
    .signup-settings { grid-template-columns: minmax(0, 1fr); }
}
.account-plan { min-width: 150px; }

/* Privacy statement and terms: long text, so set for reading */
/* Roles */
.role-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.role-capability-label { font-weight: 600; }
.team-role { min-width: 150px; }
@media (max-width: 640px) { .role-capabilities { grid-template-columns: minmax(0, 1fr); } }
/* Till */
.till-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.till-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.till-side { position: sticky; top: 12px; }
.till-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.till-pick { text-align: left; color: var(--ores-ink-muted); }
/* Looking up a product at the till (ores-product-search.js) */
.product-search { position: relative; min-width: 0; }
.product-search-field { position: relative; }
.product-search-field > .fa-magnifying-glass { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ores-ink-muted); font-size: 13px; pointer-events: none; }
.product-search-field .form-control { padding-left: 34px; padding-right: 36px; }
.product-search-key { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border: 1px solid var(--ores-line-strong); border-radius: 5px; background: var(--ores-canvas); color: var(--ores-ink-muted); font-size: 11px; font-family: inherit; box-shadow: none; pointer-events: none; }
.product-search-field .form-control:focus ~ .product-search-key, .product-search-field .form-control:disabled ~ .product-search-key { display: none; }
.product-results { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); width: max(100%, 360px); max-width: calc(100vw - 32px); max-height: 360px; overflow-y: auto; padding: 4px; background: var(--ores-surface); border: 1px solid var(--ores-line); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow-lg); overscroll-behavior: contain; }
.product-results-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ores-ink-muted); }
.product-results-note { margin: 2px 2px 4px; padding: 6px 10px; border-radius: var(--ores-radius-sm); background: var(--ores-brand-soft); color: var(--ores-brand-dark); font-size: 13px; font-weight: 600; }
.product-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--ores-radius-sm); cursor: pointer; }
.product-result.is-active { background: var(--ores-brand-soft); }
.product-result-main { display: flex; flex-direction: column; min-width: 0; }
.product-result-name { color: var(--ores-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-result-name mark { padding: 0; background: none; color: var(--ores-brand-dark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.product-result-meta { color: var(--ores-ink-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-result-side { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.product-result-price { font-weight: 600; color: var(--ores-ink); white-space: nowrap; }
.product-stock { font-size: 11px; color: var(--ores-ink-muted); white-space: nowrap; }
.product-stock.is-low { color: var(--ores-warning); font-weight: 600; }
.product-stock.is-out { color: var(--ores-danger); font-weight: 600; }
.product-results-empty, .product-results-more { padding: 10px; color: var(--ores-ink-muted); font-size: 13px; }
.product-results-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; padding: 7px 10px 5px; border-top: 1px solid var(--ores-line); color: var(--ores-ink-muted); font-size: 11px; }
.product-results-keys kbd { margin-right: 2px; padding: 0 5px; border: 1px solid var(--ores-line-strong); border-radius: 4px; background: var(--ores-canvas); color: var(--ores-ink-soft); font-size: 10px; font-family: inherit; box-shadow: none; }
@media (hover: none) { .product-results-keys, .product-search-key { display: none; } }
@media (max-width: 576px) { .product-results { width: 100%; max-width: none; } }
@keyframes till-line-added { from { background: var(--ores-brand-soft); } to { background: transparent; } }
.till-lines tr.till-line-added > td { animation: till-line-added 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .till-lines tr.till-line-added > td { animation: none; } }
.staff-skill { margin-left: 4px; color: var(--ores-ink-muted); font-size: 11px; }
.till-small { min-width: 74px; max-width: 110px; }
.till-totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 14px; }
.till-totals dt { font-weight: 400; color: var(--ores-ink-soft); }
.till-totals dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.till-totals .till-due { font-size: 20px; font-weight: 700; color: var(--ores-ink); }
.till-pay { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.till-customer { position: relative; }
.till-subhead { font-size: 13px; font-weight: 600; color: var(--ores-ink-muted); margin: 14px 0 6px; }
.till-date { width: auto; flex: none; }
.till-tabs { margin-bottom: 16px; }
.home-status { min-width: 130px; }
.home-status .btn { margin: 2px 0; }
.receipt-panel { max-width: 460px; }
@media (max-width: 900px) {
    .till-layout { grid-template-columns: minmax(0, 1fr); }
    .till-side { position: static; }
    .till-add { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    .app-sidebar, .app-topbar, .no-print, .till-tabs, .ores-toasts { display: none !important; }
    .app-main { margin: 0 !important; padding: 0 !important; }
    .receipt-panel { max-width: none; border: 0; box-shadow: none; }
}
/* Knowledge base */
.help { max-width: 880px; margin: 8px auto 56px; font-size: 16px; line-height: 1.6; color: var(--ores-ink); }
.help a { color: var(--ores-brand); }
.help-hero { padding: 26px 0 22px; }
.help-hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 4px; }
.help-hero p { margin: 0 0 16px; color: var(--ores-ink-soft); }
.help-search { position: relative; max-width: 560px; }
.help-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ores-ink-muted); }
.help-search input { padding: 11px 14px 11px 40px; font-size: 16px; }
.help-none { padding: 12px 14px; background: var(--ores-brand-soft); border-radius: var(--ores-radius-sm); }
.help-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; margin-top: 12px; }
.help-category h2 { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ores-line-strong); }
.help-category h2 i { color: var(--ores-brand); font-size: 15px; }
.help-category ul, .help-related ul { list-style: none; padding: 0; margin: 0; }
.help-category li, .help-related li { padding: 8px 0; }
.help-category li a, .help-related li a { display: block; font-weight: 600; text-decoration: none; }
.help-category li a:hover, .help-related li a:hover { text-decoration: underline; }
.help-category li span, .help-related li span { display: block; font-size: 14px; line-height: 1.45; color: var(--ores-ink-soft); }
.help-contact { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--ores-line); font-size: 14.5px; color: var(--ores-ink-soft); }
.help-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; font-size: 13.5px; color: var(--ores-ink-muted); }
.help-crumbs i { font-size: 9px; }
.help-article { max-width: 720px; }
.help-article h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; }
.help-summary { font-size: 18px; color: var(--ores-ink-soft); margin: 0 0 22px; }
.help-article h2 { font-size: 20px; font-weight: 700; margin: 32px 0 8px; }
.help-article h3 { font-size: 16.5px; font-weight: 700; margin: 22px 0 6px; }
.help-article p, .help-article ul, .help-article ol { margin: 0 0 12px; }
.help-article li { margin-bottom: 5px; }
.help-article table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 15px; }
.help-article th, .help-article td { padding: 8px 10px; border-bottom: 1px solid var(--ores-line); text-align: left; vertical-align: top; }
.help-article th { font-weight: 600; background: #f8f9fb; }
.help-note { margin: 16px 0; padding: 11px 14px; font-size: 15px; background: var(--ores-brand-soft); border-radius: var(--ores-radius-sm); }
.help-note p:last-child { margin-bottom: 0; }
.help-shot { margin: 16px 0 22px; }
.help-shot img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--ores-line-strong); border-radius: 10px; }
.help-shot figcaption { margin-top: 7px; font-size: 13.5px; line-height: 1.45; color: var(--ores-ink-muted); }
.help-shot-phone { max-width: 300px; }
.help-related { max-width: 720px; margin-top: 34px; padding-top: 6px; border-top: 2px solid var(--ores-line-strong); }
.help-related h2 { font-size: 17px; font-weight: 700; margin: 14px 0 4px; }
@media (max-width: 720px) {
    .help-categories { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .help-hero h1, .help-article h1 { font-size: 27px; }
}
.legal { max-width: 720px; margin: 16px auto 56px; font-size: 16px; line-height: 1.6; color: var(--ores-ink); }
.legal h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; }
.legal h2 { font-size: 19px; font-weight: 700; margin: 30px 0 8px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal li { margin-bottom: 5px; }
.legal-meta { color: var(--ores-ink-muted); font-size: 14px; }
.legal-table { overflow-x: auto; margin: 0 0 14px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.legal-table th, .legal-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ores-line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--ores-ink-muted); font-weight: 500; }
.legal-table td { min-width: 130px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--ores-line); font-size: 14px; }
.legal-settings { margin-top: 16px; }
.legal-settings summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.legal-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 14px; }
@media (max-width: 575.98px) {
    .legal-table-stack thead { display: none; }
    .legal-table-stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--ores-line); }
    .legal-table-stack td { display: block; padding: 3px 0; border: 0; min-width: 0; }
    .legal-table-stack td:nth-child(2)::before { content: "Waarvoor: "; font-weight: 600; }
    .legal-table-stack td:nth-child(3)::before { content: "Hoe lang: "; font-weight: 600; }
}

/* Closing an account */
.closure-closed { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--ores-canvas); }
.closure-card { max-width: 640px; padding: 24px; }
.closure-closed .closure-card { text-align: left; }
.closure-icon { font-size: 28px; color: var(--ores-ink-muted); margin-bottom: 12px; }
.closure-list { padding-left: 20px; margin: 0 0 16px; }
.closure-list li { margin-bottom: 7px; }
.closure-input { max-width: 340px; }
.customer-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.customer-file { margin: 0; }
.customer-file img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.customer-file-doc { display: block; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; word-break: break-word; }
.customer-file figcaption { margin-top: 4px; font-size: 13px; }

/* Chains: moving between locations */
.app-switcher { position: relative; margin: 2px 10px 8px; }
.app-switcher-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; background: #1f2937; border: 1px solid #374151; border-radius: 8px; color: #fff; text-align: left; }
.app-switcher-toggle:hover, .app-switcher-toggle:focus-visible { border-color: #6b7280; }
.app-switcher-toggle > i { font-size: 11px; color: #9ca3af; }
.app-switcher-label { min-width: 0; display: flex; flex-direction: column; }
.app-switcher-label small { font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-switcher-label strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-switcher-menu { position: absolute; z-index: 1040; left: 0; right: 0; top: calc(100% + 4px); max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--ores-surface); border: 1px solid var(--ores-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(17, 24, 39, .22); }
.app-switcher-search { width: 100%; height: 32px; margin-bottom: 6px; padding: 0 8px; border: 1px solid var(--ores-line); border-radius: 6px; font-size: 13px; }
.app-switcher-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; background: none; border: 0; border-radius: 6px; color: var(--ores-ink); font-size: 13px; text-align: left; }
.app-switcher-item i { width: 14px; font-size: 12px; color: var(--ores-ink-muted); }
.app-switcher-item small { color: var(--ores-ink-muted); }
.app-switcher-item:hover, .app-switcher-item:focus-visible { background: var(--ores-brand-soft); }
.app-switcher-item.active { background: var(--ores-brand-soft); color: var(--ores-brand); font-weight: 600; }
.chain-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 12px; background: var(--ores-brand-soft); border-radius: 8px; color: var(--ores-brand); font-size: 13px; }
.chain-bar .btn { margin-left: auto; }
.chain-stale { position: fixed; z-index: 2000; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 14px; background: var(--ores-warning-soft); color: #92400e; border-radius: 8px; box-shadow: 0 8px 24px rgba(17, 24, 39, .22); font-size: 13px; }
.chain-attention { list-style: none; margin: 0; padding: 0; }
.chain-attention li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid #f3f4f6; }
.chain-attention li > i { width: 18px; color: var(--ores-ink-muted); text-align: center; }
.chain-attention li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chain-attention li span { font-size: 13px; color: var(--ores-ink-muted); }
.chain-share { display: block; height: 4px; margin-top: 5px; max-width: 160px; background: #f3f4f6; border-radius: 2px; }
.chain-share span { display: block; height: 100%; background: var(--ores-brand); border-radius: 2px; }
.chain-found { list-style: none; margin: 0; padding: 0; }
.chain-found li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #f3f4f6; }
.chain-found li div { display: flex; flex-direction: column; }
.chain-found li span { font-size: 13px; color: var(--ores-ink-muted); }
.chain-checks { max-height: 260px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--ores-line); border-radius: 8px; }
.chain-checks .form-check { display: block; margin-bottom: 4px; }
.chain-checks-inline { display: flex; flex-wrap: wrap; gap: 4px 16px; max-height: none; }
.chain-checks-inline .form-check { margin-bottom: 0; }
.chain-details summary { font-size: 12px; color: var(--ores-brand); cursor: pointer; }
.chain-diff { padding: 10px 0; border-top: 1px solid #f3f4f6; }
.chain-diff:first-child { padding-top: 0; border-top: 0; }
.chain-diff h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.chain-diff h3 small { font-weight: 400; }
.chain-diff ul { margin: 0; padding-left: 0; list-style: none; font-size: 13px; }
.chain-diff ul li { margin-bottom: 4px; }
.chain-diff ul ul { padding-left: 14px; margin-top: 3px; overflow-wrap: anywhere; }
.chain-code { display: inline-block; margin-bottom: 12px; padding: 8px 14px; background: var(--ores-brand-soft); color: var(--ores-brand); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: 1px; user-select: all; }

/* Dialogs: big enough for what's in them, and white behind the form */
.glightbox-container .gslide-media.gslide-external { height: min(88vh, 860px) !important; max-height: none !important; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(17, 24, 39, .35); }
.glightbox-container .gslide-media.gslide-external:has(iframe[src*="edit-reservation"]) { width: min(640px, 94vw) !important; min-width: 0 !important; margin: 0 auto; }
/* The box around it stays at the height of the content before, which pushes the dialog off the screen */
.glightbox-container .gslide-inner-content:has(.gslide-external), .glightbox-container .ginner-container:has(.gslide-external) { height: min(88vh, 860px) !important; }
.support-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 10px 14px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; color: #78350f; font-size: 13px; }
.support-bar .btn { margin-left: auto; }
body:has(.top-form-header) { background: #fff; }
.top-form-header { padding: 16px 22px; font-size: 17px; border-bottom: 1px solid var(--ores-line); }

/* Picking from a list: one field with its buttons attached, and only red when it's about to remove something */
.form-content .input-group > .form-control:not(:last-child), .appt-form .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-btn { display: flex; margin-left: -1px; }
.input-group > .input-group-btn .btn { height: 100%; min-width: 34px; padding: 0 9px; background: #fff; border: 1px solid var(--ores-line-strong); border-radius: 0; color: var(--ores-ink-muted); font-size: 11px; }
.input-group > .input-group-btn .btn + .btn { margin-left: -1px; }
.input-group > .input-group-btn .btn:last-child { border-top-right-radius: var(--ores-radius-sm); border-bottom-right-radius: var(--ores-radius-sm); }
.input-group > .input-group-btn .btn:hover, .input-group > .input-group-btn .btn:focus-visible { background: #f3f4f6; color: var(--ores-ink); }
.input-group > .input-group-btn .btn-outline-danger:hover, .input-group > .input-group-btn .btn-outline-danger:focus-visible { background: var(--ores-danger-soft); color: #991b1b; }
.input-group > .input-group-addon, .input-group > .input-group-append.input-group-addon { display: flex; margin-left: -1px; }
/* Nothing in it takes up room: the placeholder floats, and without this the field is a thin line */
.form-control.form-control-embedded { display: flex; align-items: center; min-height: calc(1.5em + .75rem + 2px); }
.input-group-addon .input-group-text { background: #fff; border-color: var(--ores-line-strong); color: var(--ores-ink-muted); font-size: 12px; border-radius: 0 var(--ores-radius-sm) var(--ores-radius-sm) 0; cursor: pointer; }

/* The appointment dialog */
.appt-form { display: flex; flex-direction: column; gap: 18px; padding: 2px 8px 8px; }
.appt-kind { display: flex; padding: 3px; gap: 3px; background: #f3f4f6; border-radius: 10px; }
.appt-kind label { flex: 1; margin: 0; cursor: pointer; }
.appt-kind input { position: absolute; opacity: 0; pointer-events: none; }
.appt-kind span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 8px; border-radius: 8px; color: var(--ores-ink-soft); font-size: 13px; font-weight: 500; transition: background-color .12s; }
.appt-kind span i { font-size: 12px; }
.appt-kind label:hover span { color: var(--ores-ink); }
.appt-kind input:checked + span { background: #fff; color: var(--ores-brand); font-weight: 600; box-shadow: 0 1px 3px rgba(17, 24, 39, .14); }
.appt-kind input:focus-visible + span { outline: 2px solid var(--ores-brand); outline-offset: 1px; }
.appt-section { display: flex; flex-direction: column; gap: 12px; }
.appt-section + .appt-section { padding-top: 16px; border-top: 1px solid #f3f4f6; }
.appt-heading { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ores-ink-muted); }
.appt-field { min-width: 0; }
.appt-field .form-label { margin-bottom: 4px; }
.appt-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.appt-when .appt-field > .form-group, .appt-when .appt-field > .row { margin: 0; }
.appt-when .appt-field > .row { flex-wrap: nowrap; gap: 8px; }
.appt-when .row > [class*="col-"] { flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
.appt-when .row > [class*="col-"]:first-child { flex-grow: 1.3; }
.appt-when .form-group { margin: 0; }
.appt-when .form-control { padding-left: 10px; padding-right: 6px; }
.appt-when .clockpicker { display: flex; flex-wrap: nowrap; }
.appt-when .input-group > .input-group-append { display: flex; margin-left: -1px; }
.appt-when .input-group-text { padding: 0 9px; background: #fff; border: 1px solid var(--ores-line-strong); color: var(--ores-ink-muted); font-size: 12px; border-radius: 0 var(--ores-radius-sm) var(--ores-radius-sm) 0; cursor: pointer; }
.appt-section > .form-check { display: flex; align-items: center; gap: 8px; min-height: 0; padding-left: 0; }
.appt-section > .form-check .form-check-input { float: none; flex: none; margin: 0; }
#addSecondEmployee { align-self: flex-start; text-decoration: none; font-size: 13px; }
#addSecondEmployee i { font-size: 11px; }
.appt-more { border-top: 1px solid #f3f4f6; padding-top: 14px; }
.appt-more summary { font-size: 13px; font-weight: 500; color: var(--ores-ink-soft); cursor: pointer; }
.appt-more summary:hover { color: var(--ores-ink); }
.appt-more-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
body:has(.appt-form) .form-content { padding-bottom: 12px; }
body:has(.appt-form) .bottom-actions { padding: 12px 22px; box-shadow: 0 -4px 12px rgba(17, 24, 39, .04); }
body:has(.appt-form) #deleteButton { border-color: transparent; }
.appt-till { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 480px) { .appt-till span { display: none; } }
/* Finding a customer in the appointment dialog: a screen of its own over the form */
.appt-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.appt-find { border: 0; background: none; padding: 0; color: var(--ores-brand); font-size: 13px; font-weight: 500; cursor: pointer; }
.appt-find:hover { text-decoration: underline; }
.appt-find i { font-size: 11px; margin-right: 3px; }
.appt-picker-field[readonly] { background: #fff; cursor: pointer; }
body.cust-picker-open { overflow: hidden; }
.cust-picker { position: fixed; inset: 0; z-index: 1060; display: flex; flex-direction: column; background: #fff; }
.cust-picker.d-none { display: none; }
.cust-picker-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ores-line); }
.cust-picker-back { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ores-ink-soft); }
.cust-picker-back:hover, .cust-picker-back:focus-visible { background: #f3f4f6; color: var(--ores-ink); }
.cust-picker-title { margin: 0; font-size: 17px; font-weight: 700; }
.cust-picker-body { flex: 1; overflow-y: auto; padding: 16px 18px 8px; }
.cust-picker-search { position: relative; margin-bottom: 12px; }
.cust-picker-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ores-ink-muted); font-size: 14px; pointer-events: none; }
.cust-picker-search input { width: 100%; height: 46px; padding: 0 14px 0 40px; border: 1px solid var(--ores-line-strong); border-radius: 10px; font-size: 16px; background: #fff; }
.cust-picker-search input:focus { outline: none; border-color: var(--ores-brand); box-shadow: 0 0 0 3px var(--ores-brand-soft); }
.cust-picker-label { min-height: 18px; margin: 0 2px 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ores-ink-muted); }
.cust-picker-results { display: flex; flex-direction: column; gap: 2px; }
.cust-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 1px solid transparent; border-radius: 10px; background: none; text-align: left; color: var(--ores-ink); }
.cust-row:hover { background: #f9fafb; }
.cust-row.active { background: var(--ores-brand-soft); border-color: #c7d2fe; }
.cust-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #eef0f4; color: var(--ores-ink-soft); font-size: 13px; font-weight: 700; }
.cust-row.active .cust-avatar { background: #fff; color: var(--ores-brand); }
.cust-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cust-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.cust-meta { font-size: 13px; color: var(--ores-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-row mark { padding: 0; background: #fef08a; color: inherit; border-radius: 2px; }
.cust-side { flex: none; text-align: right; font-size: 12px; line-height: 1.5; color: var(--ores-ink-muted); }
.cust-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: #f3f4f6; color: var(--ores-ink-soft); font-size: 11px; font-weight: 600; }
.cust-badge i { font-size: 10px; }
.cust-badge-warning { background: var(--ores-warning-soft); color: var(--ores-warning); }
.cust-badge-danger { background: var(--ores-danger-soft); color: #991b1b; }
.cust-picker-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; color: var(--ores-ink-muted); text-align: center; }
.cust-picker-empty i { font-size: 22px; }
.cust-picker-empty.d-none { display: none; }
.cust-picker-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--ores-line); box-shadow: 0 -4px 12px rgba(17, 24, 39, .04); }
.cust-picker-foot .btn-secondary { background: #fff; color: var(--ores-ink); border: 1px solid var(--ores-line-strong); }
.cust-picker-foot .btn i { margin-right: 4px; }
@media (max-width: 480px) {
    .cust-side { display: none; }
}
@media (max-width: 560px) {
    .appt-when, .appt-more-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Choosing a period: one calendar for the start and then the end (ores-range.js) */
.rng-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.rng-field { display: inline-flex; gap: 8px; width: 100%; min-width: 0; }
.report-range .rng-field, .list-toolbar .rng-field { width: auto; }
.rng-date { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; text-align: left; white-space: nowrap; cursor: pointer; background: #fff; }
.rng-with-time .rng-date { flex: 1.4 1 0; min-width: 0; }
.rng-date i { color: var(--ores-ink-muted); font-size: 13px; }
.rng-date.rng-empty .rng-text { color: var(--ores-ink-muted); }
.rng-date:hover { border-color: var(--ores-brand); }
.rng-time { flex: 1 1 0; min-width: 96px; }
.rng-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rng-quick button { padding: 2px 9px; border: 1px solid var(--ores-line); border-radius: 999px; background: #fff; color: var(--ores-ink-soft); font-size: 12px; }
.rng-quick button:hover, .rng-quick button:focus-visible { border-color: var(--ores-brand); color: var(--ores-brand); }
.rng-pop { position: fixed; z-index: 1080; width: max-content; max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--ores-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(17, 24, 39, .18); font-size: 14px; }
.rng-steps { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f0f0f3; }
.rng-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; }
.rng-step small { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ores-ink-muted); }
.rng-step strong { font-size: 14px; font-weight: 600; color: var(--ores-ink); }
.rng-step.is-active { border-color: var(--ores-brand); background: var(--ores-brand-soft); }
.rng-step.is-active small { color: var(--ores-brand); }
.rng-arrow { color: var(--ores-ink-muted); font-size: 12px; }
.rng-body { position: relative; padding: 10px 12px 4px; }
.rng-nav { position: absolute; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ores-ink-soft); }
.rng-nav:hover, .rng-nav:focus-visible { background: #f3f4f6; color: var(--ores-ink); }
.rng-prev { left: 12px; }
.rng-next { right: 12px; }
.rng-months { display: flex; gap: 22px; }
.rng-month { width: 252px; }
.rng-month-title { height: 30px; line-height: 30px; text-align: center; font-weight: 600; text-transform: capitalize; }
.rng-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; margin-top: 4px; }
.rng-weekday { height: 26px; line-height: 26px; text-align: center; font-size: 11px; font-weight: 600; color: var(--ores-ink-muted); text-transform: uppercase; }
.rng-day { position: relative; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ores-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.rng-day:hover { background: #f3f4f6; }
.rng-day:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: -2px; }
.rng-day:disabled { color: #c9ccd3; background: none; cursor: default; }
.rng-day.is-today { font-weight: 700; color: var(--ores-brand); }
.rng-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.rng-day.in-range { border-radius: 0; background: var(--ores-brand-soft); color: var(--ores-ink); }
.rng-day.is-preview.in-range { background: #f1f2fe; }
.rng-day.is-start, .rng-day.is-end { background: var(--ores-brand); color: #fff; font-weight: 600; }
.rng-day.is-start.is-today::after, .rng-day.is-end.is-today::after { background: #fff; }
.rng-day.is-start.has-range { border-radius: 8px 0 0 8px; }
.rng-day.is-end.has-range { border-radius: 0 8px 8px 0; }
.rng-day.is-preview.is-end { background: #818cf8; }
.rng-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; }
.rng-hint { flex: 1; color: var(--ores-ink-soft); font-size: 13px; }
.rng-pop.rng-sheet { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; border-radius: 14px 14px 0 0; }
.rng-sheet .rng-months { justify-content: center; }
.rng-sheet .rng-month + .rng-month { display: none; }
.rng-sheet .rng-grid { grid-template-columns: repeat(7, minmax(36px, 44px)); }
.rng-sheet .rng-month { width: auto; }

/* The edit dialogs core draws from a model (boeditobject.vm, which only a superuser still uses): labels above the fields,
   fields that belong together side by side, sections, and switches */
.obj-form { padding: 6px 22px 8px; }
.obj-form .field-wrapper { padding: 0 !important; }
.obj-form .field-entry { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.obj-form .field-entry > .label-column, .obj-form .field-entry > .field-column { flex: none; width: 100%; max-width: none; padding: 0; }
.obj-form .label-column { margin: 0; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ores-ink); }
.obj-form .required-span::after { content: "*"; margin-left: 2px; color: #b42318; font-weight: 600; }
.obj-form .form-control, .obj-form .form-select { min-height: 38px; }
.obj-form .input-group.mb-3 { margin-bottom: 0 !important; }
.obj-form .input-group > .input-group-prepend > .input-group-text { height: 100%; background: #f9fafb; border-color: var(--ores-line-strong); color: var(--ores-ink-muted); border-radius: var(--ores-radius-sm) 0 0 var(--ores-radius-sm); }
.obj-form .input-group-text { background: #f9fafb; border-color: var(--ores-line-strong); color: var(--ores-ink-muted); }
.obj-form .iti { display: block; width: 100%; }
.obj-form .iti input { width: 100%; }
.obj-form .clockpicker, .obj-form .input-group.date { flex-wrap: nowrap; }
.obj-form .clockpicker .input-group-text, .obj-form .clockpicker .input-group-append .input-group-text { height: 100%; padding: 0 10px; background: #fff; font-size: 12px; border-radius: 0 var(--ores-radius-sm) var(--ores-radius-sm) 0; cursor: pointer; }
.obj-form .clockpicker > .input-group-append { display: flex; margin-left: -1px; }
.obj-form input[type=color] { width: 56px; height: 38px; padding: 4px; border: 1px solid var(--ores-line-strong); border-radius: var(--ores-radius-sm); background: #fff; cursor: pointer; }
/* Switches, with the label beside them */
.obj-form .checkbox-switch-container .form-control { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.obj-form input.checkbox-switch, .obj-form .obj-switch input[type=checkbox] { -webkit-appearance: none; appearance: none; display: block; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: #d1d5db radial-gradient(circle at 11px 50%, #fff 8px, transparent 8.5px); cursor: pointer; transition: background-color .15s; }
.obj-form input.checkbox-switch:checked, .obj-form .obj-switch input[type=checkbox]:checked { background: var(--ores-brand) radial-gradient(circle at 27px 50%, #fff 8px, transparent 8.5px); }
.obj-form input.checkbox-switch:focus-visible, .obj-form .obj-switch input[type=checkbox]:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: 2px; }
/* The bottom bar, and adding another */
.obj-form .bottom-actions .form-check-label { margin-right: 6px; }

/* Dialogs with a form of their own (absence, availability, other hours): the same edges and switches */
.dlg-form { padding: 10px 10px 8px; }
.dlg-form .row { --bs-gutter-x: 16px; }
.dlg-form .form-label { margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.dlg-form .form-text, .dlg-form small.text-muted { font-size: 12.5px; }
.dlg-form label.form-check-label:has(> input[type=checkbox]), .dlg-form .form-check:has(> input[type=checkbox]) { display: inline-flex; align-items: center; gap: 10px; padding-left: 0; font-weight: 500; cursor: pointer; }
.dlg-form .form-check-input[type=checkbox] { -webkit-appearance: none; appearance: none; float: none; flex: none; width: 38px; height: 22px; margin: 0; border: 0; border-radius: 999px; background: #d1d5db radial-gradient(circle at 11px 50%, #fff 8px, transparent 8.5px); cursor: pointer; transition: background-color .15s; }
.dlg-form .form-check-input[type=checkbox]:checked { background: var(--ores-brand) radial-gradient(circle at 27px 50%, #fff 8px, transparent 8.5px); }
.dlg-form .form-check-input[type=checkbox]:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: 2px; box-shadow: none; }
@media (max-width: 560px) {
    .dlg-form { padding: 6px 4px 8px; }
}
/* These dialogs are one column: narrower than the 900 pixels of a light box */
.glightbox-container .gslide-media.gslide-external:has(iframe[src*="/bo/account/edit/"]), .glightbox-container .gslide-media.gslide-external:has(iframe[src*="/bo/account/new/"]), .glightbox-container .gslide-media.gslide-external:has(iframe[src*="edit-absence"]), .glightbox-container .gslide-media.gslide-external:has(iframe[src*="edit-opening-exception"]), .glightbox-container .gslide-media.gslide-external:has(iframe[src*="availability"]) { width: min(680px, 94vw) !important; min-width: 0 !important; margin: 0 auto; }

/* ---------- Lists of Salonie's own screens (templates/screens/listmacros.vm, ores-list.js) ---------- */
.ol-header { align-items: flex-end; }
.ol-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ol-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.ol-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ores-ink-muted); font-size: 13px; pointer-events: none; }
.ol-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--ores-line-strong); border-radius: var(--ores-radius-sm); background: #fff; font-size: 14px; }
.ol-search input:focus { outline: none; border-color: var(--ores-brand); box-shadow: 0 0 0 3px var(--ores-brand-soft); }
.ol-inline .form-select, .ol-sort .form-select { height: 38px; width: auto; max-width: 220px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.ol-inline .form-select:has(option:checked:not([value=""])) { border-color: var(--ores-brand); color: var(--ores-brand); background-color: var(--ores-brand-soft); }
.ol-sort { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ol-sort-label { font-size: 13px; color: var(--ores-ink-muted); white-space: nowrap; }
.ol-more { position: relative; }
.ol-more-toggle { height: 38px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ores-line-strong); background: #fff; }
.ol-more-toggle.is-active { border-color: var(--ores-brand); color: var(--ores-brand); background: var(--ores-brand-soft); }
.ol-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--ores-brand); color: #fff; font-size: 11px; font-weight: 700; }
.ol-more-panel { position: absolute; z-index: 1050; top: calc(100% + 6px); left: 0; width: 340px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow-lg); }
.ol-more-panel[hidden] { display: none; }
.ol-more-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ores-line); }
.ol-more-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; max-height: min(60vh, 520px); overflow-y: auto; }
.ol-more-field .form-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.ol-range { display: flex; align-items: center; gap: 8px; }
.ol-range .form-control { min-width: 0; }
.ol-more-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ores-line); }
.ol-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.ol-chips[hidden] { display: none; }
.ol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--ores-brand-soft); color: var(--ores-brand); font-size: 13px; text-decoration: none; }
.ol-chip-label { color: var(--ores-ink-soft); }
.ol-chip i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; }
.ol-chip:hover i, .ol-chip:focus-visible i { background: #c7d2fe; }
.ol-chips-clear { font-size: 13px; margin-left: 4px; }
.ol-table td { height: 52px; }
.ol-table tr[data-open] { cursor: pointer; }
.ol-table tr[data-open]:hover { background: #f9fafb; }
.ol-table tr[data-open]:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: -2px; background: var(--ores-brand-soft); }
.ol-table tr.ol-flash, .ol-table tr.ol-flash:hover { animation: ol-flash 1.8s ease-out; }
@keyframes ol-flash { 0%, 30% { background: #fef9c3; } 100% { background: transparent; } }
.ol-table .ol-name { font-weight: 600; color: var(--ores-ink); }
.ol-table .ol-sub { font-size: 13px; color: var(--ores-ink-muted); font-weight: 400; }
.ol-table tr.is-removed td { color: var(--ores-ink-muted); }
.ol-actions { width: 1%; white-space: nowrap; text-align: right; }
.ol-actions .icon-button { opacity: .55; }
.ol-table tr:hover .ol-actions .icon-button, .ol-actions .icon-button:focus-visible { opacity: 1; }
.ol-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ol-chiplike { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 16px; color: var(--ores-ink-muted); text-align: center; }
.ol-empty > i { font-size: 26px; color: #c4c8cf; }
.ol-empty p { margin: 0; }
.ol-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--ores-line); font-size: 13px; color: var(--ores-ink-muted); }
.ol-pager { display: flex; align-items: center; gap: 10px; }
body.ol-loading [data-ol-region] { opacity: .55; transition: opacity .15s .1s; }
.ores-toast-action { margin-left: auto; padding: 0 0 0 10px; border: 0; background: none; color: #a5b4fc; font-weight: 600; white-space: nowrap; }
.ores-toast-action:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767.98px) {
    .ol-search { flex-basis: 100%; max-width: none; }
    .ol-inline { flex: 1 1 140px; }
    .ol-inline .form-select { width: 100%; max-width: none; }
    .ol-sort { margin-left: 0; }
    .ol-sort-label { display: none; }
    .ol-more-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 16px 16px 0 0; }
    body.ol-more-open::after { content: ""; position: fixed; inset: 0; z-index: 1040; background: rgba(17, 24, 39, .35); }
    .ol-more-body { max-height: 60vh; }
    .ol-table td { height: auto; }
    .ol-table .ol-actions { display: none !important; }
    .ol-table tr[data-open] td:first-child { font-size: 15px; }
}

/* ---------- Dialogs of Salonie's own screens (templates/screens/dialogmacros.vm, ores-screen-dialog.js) ---------- */
body:has(.sd-shell) { background: #fff; overflow: hidden; }
.sd-shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
.sd-form { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--ores-line); }
.sd-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sd-close { flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ores-ink-muted); }
.sd-close:hover, .sd-close:focus-visible { background: #f3f4f6; color: var(--ores-ink); }
.sd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.sd-alert { margin: 0; }
.sd-alert:focus { outline: none; }
.sd-added { margin: 0; padding: 8px 12px; font-size: 14px; }
.sd-section { display: flex; flex-direction: column; gap: 14px; }
.sd-section + .sd-section { padding-top: 18px; border-top: 1px solid #f3f4f6; }
.sd-heading { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ores-ink-muted); }
.sd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sd-field { min-width: 0; }
.sd-field .form-label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: var(--ores-ink); }
.sd-required { color: var(--ores-danger); }
.sd-help { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ores-ink-muted); }
.sd-error { margin-top: 5px; font-size: 13px; color: #b91c1c; }
.sd-error[hidden] { display: none; }
.sd-field .form-control.is-invalid, .sd-field .form-select.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); background-image: none; }
.sd-money .input-group-text, .sd-number .input-group-text { background: #f9fafb; color: var(--ores-ink-muted); border-color: var(--ores-line-strong); font-size: 14px; }
.sd-number:not(.input-group) .form-control { max-width: 160px; }
.sd-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; cursor: pointer; }
.sd-switch-text { display: flex; flex-direction: column; min-width: 0; }
.sd-switch-label { font-size: 14px; font-weight: 500; color: var(--ores-ink); }
.sd-switch .sd-help { margin-top: 2px; }
.sd-toggle { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: #d1d5db; cursor: pointer; transition: background-color .15s; }
.sd-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .25); transition: transform .15s; }
.sd-toggle:checked { background: var(--ores-brand); }
.sd-toggle:checked::after { transform: translateX(18px); }
.sd-toggle:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: 2px; }
.sd-toggle:disabled { opacity: .5; cursor: default; }
.sd-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-swatch { position: relative; margin: 0; cursor: pointer; }
.sd-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sd-swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .1s; }
.sd-swatch:hover span { transform: scale(1.08); }
.sd-swatch input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ores-ink); }
.sd-swatch input:focus-visible + span { outline: 2px solid var(--ores-brand); outline-offset: 4px; }
.sd-help-top { margin: -2px 0 8px; }
.sd-checks { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); }
.sd-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.sd-check:last-child { border-bottom: 0; }
.sd-check:hover { background: #f9fafb; }
.sd-check[hidden] { display: none; }
.sd-check .form-check-input { flex: none; margin: 0; }
.sd-check-label { flex: 1; min-width: 0; }
.sd-check-note { flex: none; font-size: 12px; color: var(--ores-ink-muted); }
.sd-checks-filter { margin-bottom: 6px; }
.sd-checks-empty { margin: 0; font-size: 13px; color: var(--ores-ink-muted); }
/* Levels (Junior, Senior...) and a treatment's price and duration per level */
.level-rows { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.level-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; }
.level-count { font-size: 12px; color: var(--ores-ink-muted); white-space: nowrap; min-width: 84px; text-align: right; }
.level-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.level-table th[scope=col] { font-size: 12px; font-weight: 600; color: var(--ores-ink-muted); padding: 0 6px 0 0; }
.level-table th[scope=row] { font-weight: 500; padding-right: 10px; vertical-align: top; padding-top: 4px; }
.level-table td { padding-right: 6px; vertical-align: top; width: 34%; }
.level-who { display: block; font-size: 12px; font-weight: 400; color: var(--ores-ink-muted); }
.sd-info { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--ores-radius-sm); background: #f9fafb; color: var(--ores-ink-soft); font-size: 13px; line-height: 1.45; }
.sd-info i { margin-top: 2px; color: var(--ores-ink-muted); }
.sd-readonly-value { padding: 7px 0; color: var(--ores-ink); }
.sd-preview { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--ores-line-strong); border-radius: var(--ores-radius-sm); font-size: 13px; color: var(--ores-ink-muted); }
.sd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--ores-line); background: #fff; box-shadow: 0 -4px 12px rgba(17, 24, 39, .04); }
.sd-foot-start, .sd-foot-end { display: flex; align-items: center; gap: 8px; }
.sd-foot .btn-secondary { background: #fff; color: var(--ores-ink); border: 1px solid var(--ores-line-strong); }
.sd-remove { color: #b91c1c; }
.sd-remove:hover, .sd-remove:focus-visible { background: var(--ores-danger-soft); color: #991b1b; }
.sd-form.is-busy [data-sd-save] { opacity: .7; }
.sd-confirm { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 24, 39, .4); }
.sd-confirm[hidden] { display: none; }
.sd-confirm-box { width: 100%; max-width: 420px; padding: 20px; border-radius: 12px; background: #fff; box-shadow: var(--ores-shadow-lg); }
.sd-confirm-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.sd-confirm-list { margin: 0 0 14px; padding-left: 18px; color: var(--ores-ink-soft); font-size: 14px; }
.sd-confirm-list[hidden] { display: none; }
.sd-confirm-alternatives { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sd-confirm-alternatives:empty { display: none; }
.sd-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 575.98px) {
    .sd-head { padding: 12px 16px; }
    .sd-body { padding: 14px 16px 20px; }
    .sd-foot { padding: 10px 16px; flex-wrap: wrap; }
    .sd-pair { grid-template-columns: minmax(0, 1fr); }
    .sd-another { display: none; }
}
/* The light box around these dialogs: 680 pixels, and the whole screen on a phone */
.glightbox-container .gslide-media.gslide-external:has(iframe[src*="/dialog"]) { width: min(680px, 94vw) !important; min-width: 0 !important; margin: 0 auto; }
@media (max-width: 575.98px) {
    .glightbox-container .gslide-media.gslide-external:has(iframe[src*="/dialog"]) { width: 100vw !important; height: 100dvh !important; max-height: none !important; border-radius: 0; }
    .glightbox-container .gslide-inner-content:has(iframe[src*="/dialog"]), .glightbox-container .ginner-container:has(iframe[src*="/dialog"]) { height: 100dvh !important; }
}
/* Settings: a section without a card for this person is left out */
.settings-section:not(:has(.settings-card)) { display: none; }
/* The role editor: none, seeing or changing, per type of thing */
.role-pair { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 0; }
.role-pair + .role-pair, .form-check + .role-pair, .role-pair + .form-check { border-top: 1px solid #f3f4f6; padding-top: 10px; }
.role-pair-text { flex: 1 1 260px; min-width: 0; }
.role-levels { display: inline-flex; padding: 3px; gap: 3px; background: #f3f4f6; border-radius: 10px; }
.role-levels label { margin: 0; cursor: pointer; }
.role-levels input { position: absolute; opacity: 0; pointer-events: none; }
.role-levels span { display: block; padding: 5px 12px; border-radius: 8px; color: var(--ores-ink-soft); font-size: 13px; font-weight: 500; }
.role-levels label:hover span { color: var(--ores-ink); }
.role-levels input:checked + span { background: #fff; color: var(--ores-brand); font-weight: 600; box-shadow: 0 1px 3px rgba(17, 24, 39, .14); }
.role-levels input:focus-visible + span { outline: 2px solid var(--ores-brand); outline-offset: 1px; }
/* Saved filters on a list (ores-list.js) */
.ol-views { position: relative; display: flex; align-items: center; gap: 6px; }
.ol-views-toggle { height: 38px; display: inline-flex; align-items: center; gap: 7px; max-width: 260px; border: 1px solid var(--ores-line-strong); background: #fff; }
.ol-views-toggle.is-active { border-color: var(--ores-brand); color: var(--ores-brand); background: var(--ores-brand-soft); }
.ol-views-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-views-modified { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--ores-warning-soft); color: #92400e; font-size: 11px; font-weight: 600; }
.ol-views-menu { position: absolute; z-index: 1050; top: calc(100% + 6px); right: 0; width: 320px; max-width: calc(100vw - 32px); padding: 6px; background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius); box-shadow: var(--ores-shadow-lg); }
.ol-views-menu[hidden] { display: none; }
.ol-views-heading { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ores-ink-muted); }
.ol-views-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.ol-views-row:hover, .ol-views-row.is-active { background: #f3f4f6; }
.ol-views-item { flex: 1; min-width: 0; display: block; padding: 7px 10px; border-radius: 6px; color: var(--ores-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-views-row.is-active .ol-views-item { font-weight: 600; color: var(--ores-brand); }
.ol-views-icon { flex: none; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--ores-ink-muted); font-size: 12px; }
.ol-views-icon:hover, .ol-views-icon:focus-visible { background: #e5e7eb; color: var(--ores-ink); }
.ol-views-icon.is-on { color: #d97706; }
.ol-views-remove:hover { color: #b91c1c; }
.ol-views-empty { margin: 4px 10px 8px; font-size: 13px; color: var(--ores-ink-muted); }
.ol-views-save { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 10px; border: 0; border-top: 1px solid var(--ores-line); border-radius: 0 0 6px 6px; background: none; color: var(--ores-brand); font-weight: 600; text-align: left; }
.ol-views-save:hover { background: var(--ores-brand-soft); }
.ol-dropped { display: flex; gap: 8px; align-items: baseline; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--ores-radius-sm); background: var(--ores-warning-soft); color: #92400e; font-size: 13px; }
@media (max-width: 767.98px) {
    .ol-views { flex: 1 1 100%; }
    .ol-views-toggle { flex: 1; max-width: none; }
    .ol-views-menu { left: 0; right: auto; width: 100%; }
}
/* A row that opens a page of its own, such as a customer card */
.ol-table tr[data-href] { cursor: pointer; }
.ol-table tr[data-href]:hover { background: #f9fafb; }
.ol-table tr[data-href]:focus-visible { outline: 2px solid var(--ores-brand); outline-offset: -2px; }
/* Treatments: variations under their treatment, and what's special about one */
.ol-namecell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* Treatments as a tree: categories as headings, each level a step in */
.treat-table tr.treat-depth-1 .ol-namecell { padding-left: 24px; }
.treat-table tr.treat-depth-2 .ol-namecell { padding-left: 48px; }
.treat-table tr.treat-depth-3 .ol-namecell { padding-left: 72px; }
.treat-table tr.treat-category { background: #f8f9fb; }
.treat-table tr.treat-category .ol-name { font-weight: 700; }
.treat-table .treat-folder { color: var(--ores-brand); width: 16px; }
.treat-count { margin-left: 8px; font-size: 12px; color: var(--ores-ink-muted); font-weight: 400; }
.treat-table .ol-actions { white-space: nowrap; }
.treat-add { padding: 2px 8px; font-size: 13px; }
.treat-start { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--ores-line); border-left: 4px solid var(--ores-brand); border-radius: var(--ores-radius-sm); background: #fff; }
.treat-start > i { font-size: 22px; color: var(--ores-brand); margin-top: 2px; }
.treat-start p { margin: 4px 0 10px; color: var(--ores-ink-soft); }
/* The treatment dialog: what it is, and where it goes */
.treat-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.treat-kind-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ores-line-strong); border-radius: var(--ores-radius-sm); cursor: pointer; }
.treat-kind-option:has(input:checked) { border-color: var(--ores-brand); background: var(--ores-brand-soft); }
.treat-kind-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.treat-kind-option input { margin-top: 4px; }
.treat-kind-option > i { margin-top: 3px; color: var(--ores-brand); }
.treat-kind-option strong { display: block; }
.treat-kind-option small { display: block; color: var(--ores-ink-soft); font-size: 12.5px; line-height: 1.35; }
.treat-parent-field { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.treat-parent-field > .fa-folder-open { color: var(--ores-brand); }
.treat-parent-field #parentText { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treat-parent-empty { color: var(--ores-ink-muted); }
.treat-parent-chevron { color: var(--ores-ink-muted); font-size: 12px; }
.treat-new-category { padding-left: 0; margin-top: 4px; }
.treat-new-box { margin-top: 6px; padding: 10px 12px; border-radius: var(--ores-radius-sm); background: #f8f9fb; }
.treat-who { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
@media (max-width: 575.98px) { .treat-kind { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
    .treat-table tr.treat-depth-1 .ol-namecell, .treat-table tr.treat-depth-2 .ol-namecell, .treat-table tr.treat-depth-3 .ol-namecell { padding-left: 0; }
    .treat-table tr.treat-depth-1, .treat-table tr.treat-depth-2, .treat-table tr.treat-depth-3 { border-left: 3px solid var(--ores-line); }
}
.ol-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ol-tags .pill i { font-size: 10px; margin-right: 2px; }
.ol-aside { margin: 10px 2px 0; font-size: 13px; color: var(--ores-ink-muted); }
.ol-aside i { margin-right: 4px; }
.ol-stock-low { color: #b91c1c; font-weight: 600; }
[data-sd-depends][hidden] { display: none; }
/* A week of hours in a dialog (#sdWeek) */
.week-editor { display: flex; flex-direction: column; border: 1px solid var(--ores-line); border-radius: var(--ores-radius-sm); }
.week-head, .week-row { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr) minmax(0, 1fr) 120px; align-items: center; gap: 4px 10px; padding: 7px 12px; }
.week-head { padding-top: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ores-line); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ores-ink-muted); }
.week-row + .week-row { border-top: 1px solid #f3f4f6; }
.week-day { font-weight: 600; }
.week-open { display: inline-flex; align-items: center; gap: 8px; }
.week-state { font-size: 13px; color: var(--ores-ink-soft); }
.week-time { min-width: 0; }
.week-row.is-closed .week-time { opacity: .4; pointer-events: none; }
.week-row.is-closed .week-day { color: var(--ores-ink-muted); }
.week-note { font-size: 12px; color: var(--ores-ink-muted); }
.week-error { grid-column: 3 / 5; margin: 0; }
.week-actions { padding: 8px 8px 8px; border-top: 1px solid var(--ores-line); }
@media (max-width: 575.98px) {
    .week-head { display: none; }
    .week-row { grid-template-columns: minmax(0, 1fr) auto; }
    .week-time { grid-column: auto; }
    .week-note { grid-column: 1 / -1; }
    .week-error { grid-column: 1 / -1; }
}
/* The team dialog: logging in */
.team-login-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.team-login .sd-help { margin: 0; }
.team-role { max-width: 320px; }
/* The customer dialog: someone who might already be a customer */
.sd-duplicates { margin: 0; font-size: 14px; }
.sd-duplicates[hidden] { display: none; }
.sd-duplicate { margin-top: 4px; }
/* A page made of dialog parts, such as Bedrijfsgegevens */
.sd-page { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.sd-panel { margin: 0; }
.sd-panel .panel-body.sd-section { display: flex; flex-direction: column; gap: 14px; }
.sd-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.sd-pagebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--ores-line); border-radius: var(--ores-radius); box-shadow: 0 -4px 12px rgba(17, 24, 39, .06); }
.sd-pagebar-note { font-size: 13px; color: #92400e; }
.sd-pagebar-note[hidden] { display: none; }
@media (max-width: 767.98px) {
    .sd-trio, .sd-page .sd-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Team login page with PIN codes, in the salon's own colour (--pin-brand) */
.pin-page { --pin-brand: #4f46e5; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 16px 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--pin-brand) 14%, #ffffff) 0%, var(--ores-canvas) 320px); }
.pin-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; text-align: center; }
.pin-logo { max-width: 220px; max-height: 96px; object-fit: contain; }
.pin-mark { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--pin-brand); color: #fff; font-size: 30px; font-weight: 700; }
.pin-salon { font-size: 22px; font-weight: 700; margin: 0; color: #111827; }
.pin-card { width: 100%; max-width: 720px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); padding: 24px; }
.pin-title { font-size: 18px; font-weight: 600; text-align: center; margin: 0 0 18px; }
.pin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.pin-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--ores-line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; min-height: 132px; }
.pin-tile:hover, .pin-tile:focus-visible { border-color: var(--pin-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin-brand) 25%, transparent); outline: none; }
.pin-tile:active { transform: scale(.98); }
.pin-avatar { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; }
.pin-name { font-weight: 600; color: #111827; text-align: center; word-break: break-word; }
.pin-locked { font-size: 12px; color: #b45309; }
.pin-entry { max-width: 360px; text-align: center; position: relative; }
.pin-back { position: absolute; left: 12px; top: 12px; border: 0; background: none; color: var(--ores-muted, #6b7280); font-size: 14px; padding: 6px; }
.pin-hint { color: var(--ores-muted, #6b7280); margin: -8px 0 14px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; min-height: 18px; margin-bottom: 14px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pin-brand); }
.pin-dot.filled { background: var(--pin-brand); }
.pin-dots.shake { animation: pin-shake .35s; }
@keyframes pin-shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.pin-error { color: #b91c1c; font-size: 14px; margin-bottom: 12px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key { height: 60px; border-radius: 14px; border: 1px solid var(--ores-line); background: #f9fafb; font-size: 24px; font-weight: 600; color: #111827; }
.pin-key:active { background: color-mix(in srgb, var(--pin-brand) 15%, #ffffff); }
.pin-key-small { font-size: 18px; }
.pin-key-ok { background: var(--pin-brand); border-color: var(--pin-brand); color: #fff; font-size: 18px; }
.pin-key-ok:disabled { opacity: .45; }
.pin-note { width: 100%; max-width: 720px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--ores-line); font-size: 14px; }
.pin-empty { text-align: center; color: var(--ores-muted, #6b7280); margin: 0; }
.pin-foot { margin-top: 18px; font-size: 13px; }
.pin-foot a { color: var(--ores-muted, #6b7280); }
.pin-message { max-width: 440px; text-align: center; }
.pin-message > i { font-size: 34px; color: var(--pin-brand); margin-bottom: 10px; }
.pin-message h1 { font-size: 20px; font-weight: 700; }
.pin-device-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; letter-spacing: .2em; font-weight: 700; margin: 8px 0 16px; }
@media (max-width: 575.98px) {
    .pin-page { padding: 20px 12px; }
    .pin-card { padding: 18px 14px; }
    .pin-tiles { grid-template-columns: repeat(2, 1fr); }
}
/* In the back office during a PIN session */
.pin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 10px 14px; background: #eef2ff; border: 1px solid #a5b4fc; border-radius: 8px; color: #312e81; font-size: 13px; }
.pin-bar .btn { margin-left: auto; }
.pin-link-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-link-row .form-control { flex: 1 1 280px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.pin-idle { max-width: 120px; }
.brand-logo-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.brand-logo-preview { width: 180px; height: 84px; border: 1px dashed var(--ores-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; }
.brand-logo-preview img { max-width: 164px; max-height: 72px; object-fit: contain; }
/* Who booked an appointment, at the top of the dialog */
.appt-booked { margin: -4px 0 12px; font-size: 13px; color: var(--ores-muted, #6b7280); }
/* Swapping shifts, and handed-in availability */
.roster-unlock { border: 0; background: none; color: var(--ores-muted, #6b7280); padding: 0 2px; }
.roster-unlock:hover { color: #111827; }
.swap-kind label { cursor: pointer; }

/* Booking: more treatments in one appointment, and a subscription */
.bk-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.bk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ores-brand-soft); border: 1px solid var(--ores-line); font-size: 14px; }
.bk-chip-remove { border: 0; background: none; padding: 0 2px; color: var(--ores-muted, #6b7280); line-height: 1; }
.bk-chip-remove:hover { color: #b91c1c; }
.bk-adding { margin: -6px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--ores-brand-soft); font-size: 14px; }
.bk-subscribe { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--ores-line); border-radius: 10px; }
.bk-subscribe legend { float: none; width: auto; font-size: 14px; margin-bottom: 6px; }
.bk-plan { display: block; padding: 4px 0; cursor: pointer; }
.bk-plan input { margin-right: 6px; }
/* Appointment dialog: more treatments, and the customer's subscription */
.appt-extras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.appt-extras:empty { display: none; }
.appt-extra { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: #f3f4f6; font-size: 13px; }
.appt-extra button { border: 0; background: none; padding: 0 2px; color: var(--ores-muted, #6b7280); }
.appt-subscription { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #ecfdf5; border: 1px solid #a7f3d0; font-size: 13px; }
/* Appointment dialog: a paid deposit, and keeping or refunding it */
.appt-deposit { margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid var(--ores-line); font-size: 14px; }
.appt-deposit.is-pending { background: #fffbeb; border-color: #fcd34d; }
.appt-deposit-amount { max-width: 110px; }

/* What's new: a page of everything added, for the website and the back office */
.news { max-width: 1080px; margin: 0 auto 64px; padding: 0 16px; color: var(--ores-ink, #111827); }
.news-hero { text-align: center; padding: 48px 16px 28px; margin: 0 -16px 28px; border-radius: 0 0 32px 32px;
    background: radial-gradient(120% 140% at 50% 0%, #eef2ff 0%, #f5f3ff 45%, rgba(255,255,255,0) 100%); }
.news-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #c7d2fe; color: var(--ores-brand, #4338ca); font-weight: 600; font-size: 14px; }
.news-hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.02em; margin: 18px 0 10px; }
.news-hero p { font-size: 18px; color: #4b5563; max-width: 640px; margin: 0 auto; line-height: 1.55; }
.news-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.news-jump a { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; color: #374151; text-decoration: none; font-size: 14px; font-weight: 500; }
.news-jump a:hover { border-color: var(--ores-brand, #4338ca); color: var(--ores-brand, #4338ca); }
.news-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 44px; }
.news-highlight { border-radius: 20px; padding: 24px; color: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 30px rgba(67, 56, 202, .18); }
.news-highlight > i { font-size: 26px; opacity: .95; }
.news-highlight h2 { font-size: 20px; font-weight: 700; margin: 6px 0 0; color: #fff; }
.news-highlight p { margin: 0; opacity: .92; line-height: 1.5; flex: 1; }
.news-highlight a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.news-highlight-a { background: linear-gradient(135deg, #4338ca, #7c3aed); }
.news-highlight-b { background: linear-gradient(135deg, #0f766e, #0891b2); }
.news-highlight-c { background: linear-gradient(135deg, #be185d, #e11d48); }
.news-section { margin-bottom: 40px; scroll-margin-top: 80px; }
.news-section > h2 { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.news-section > h2 i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--ores-brand, #4338ca); font-size: 18px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.news-card { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb; transition: transform .15s, box-shadow .15s; }
.news-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 24, 39, .07); }
.news-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: var(--ores-brand, #4338ca); font-size: 18px; }
.news-card h3 { font-size: 16px; font-weight: 700; margin: 2px 0 4px; }
.news-card p { margin: 0; color: #4b5563; font-size: 14.5px; line-height: 1.5; }
.news-who { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px; background: #f0fdf4; color: #15803d; font-size: 12px; font-weight: 600; }
.news-cta { text-align: center; padding: 36px 16px; border-radius: 24px; background: #111827; color: #fff; }
.news-cta h2 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.news-cta p { color: #d1d5db; margin: 0 0 18px; }
.news-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.news-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
@media (max-width: 860px) {
    .news-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-hero p { font-size: 16px; }
}


/* Phones and touch screens: everything tappable at least 24 by 24 px (WCAG 2.2, target size).
   Bootstrap's checks and switches are drawn bigger; layouts that place them with flex keep their own spacing. */
@media (max-width: 575.98px), (pointer: coarse) {
    .btn-close, .page-hint .btn-close { box-sizing: border-box; width: 28px; height: 28px; padding: 0; background-position: center; background-size: 11px; }
    .page-hint .btn-close { margin-top: -2px; margin-right: -6px; }
    .form-check { min-height: 24px; padding-left: 32px; }
    .form-check .form-check-input { margin-left: -32px; margin-top: 0; }
    .form-check-input[type=checkbox], .form-check-input[type=radio] { width: 24px; height: 24px; }
    .form-switch { padding-left: 54px; }
    .form-switch .form-check-input { width: 44px; height: 24px; margin-left: -54px; }
    .form-check-inline { margin-right: 1.25rem; }
    .appt-section > .form-check, .dlg-form .form-check:has(> input[type=checkbox]) { padding-left: 0; }
    .appt-section > .form-check .form-check-input, .sd-check .form-check-input, .dlg-form .form-check-input[type=checkbox] { margin: 0; }
    .dlg-form .form-check-input[type=checkbox] { width: 44px; height: 24px; background: #d1d5db radial-gradient(circle at 12px 50%, #fff 9px, transparent 9.5px); }
    .dlg-form .form-check-input[type=checkbox]:checked { background: var(--ores-brand) radial-gradient(circle at 32px 50%, #fff 9px, transparent 9.5px); }
    .appt-find, .btn-link.btn-sm, .btn-link.p-0 { min-height: 24px; display: inline-flex; align-items: center; }
    .sd-toggle { width: 44px; height: 24px; }
    .sd-toggle::after { width: 18px; height: 18px; }
    .sd-toggle:checked::after { transform: translateX(20px); }
    .form-content input[type=checkbox] { width: 24px; height: 24px; margin-top: 0; }
    .obj-form input.checkbox-switch, .obj-form .obj-switch input[type=checkbox] { width: 44px; height: 24px; background: #d1d5db radial-gradient(circle at 12px 50%, #fff 9px, transparent 9.5px); }
    .obj-form input.checkbox-switch:checked, .obj-form .obj-switch input[type=checkbox]:checked { background: var(--ores-brand) radial-gradient(circle at 32px 50%, #fff 9px, transparent 9.5px); }
}

/* A link to the help: recognisable as such, also inside a sentence */
.help-link { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; border-radius: 999px; background: var(--ores-brand-soft); color: var(--ores-brand); font-size: .875em; font-weight: 500; text-decoration: none; white-space: nowrap; vertical-align: baseline; }
.help-link:hover, .help-link:focus-visible { text-decoration: underline; }
.help-link .fa-circle-question { font-size: .95em; }

/* At the till: the appointment being charged, so nobody charges the wrong one */
.till-appointment { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #c7d2fe; border-left: 4px solid var(--ores-brand); border-radius: 12px; background: var(--ores-brand-soft); }
.till-appointment-icon { font-size: 22px; color: var(--ores-brand); flex: none; }
.till-appointment-text { flex: 1; min-width: 0; }
.till-appointment-who { font-size: 16px; font-weight: 600; color: var(--ores-ink); }
.till-appointment-when { color: var(--ores-ink-soft); }
.till-appointment-what { color: var(--ores-ink); margin-top: 2px; }
.till-appointment-open { flex: none; background: #fff; }
@media (max-width: 575.98px) {
    .till-appointment { flex-wrap: wrap; }
    .till-appointment-open { width: 100%; justify-content: center; }
}

/* An employee's photo in the team dialog: round, as on the booking page */
.team-photo-row { display: flex; align-items: center; gap: 14px; }
.team-photo-preview { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ores-brand-soft); color: var(--ores-brand); font-weight: 600; font-size: 20px; }
.team-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
/* On the booking page: the photo fills the round avatar */
.bk-person-avatar.has-photo { background: #e5e7eb; padding: 0; overflow: hidden; }
.bk-person-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Previous and next under a list that keeps growing (templates/pager.vm) */
.list-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 4px; }
.list-pager-page { color: var(--ores-ink-soft); font-size: 13px; }