/* ==========================================================================
   Appointment Scheduler - application shell and component styles.
   Layered on top of Bootstrap 5: tokens first, then shell, then components.
   ========================================================================== */

:root {
    --brand-500: #0f766e;
    --brand-600: #0d6d66;
    --brand-700: #115e59;
    --brand-050: #ecfdf5;

    --accent-500: #f59e0b;
    --danger-500: #dc2626;
    --success-500: #16a34a;
    --info-500: #0284c7;

    --bg-body: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-sidebar: #0f172a;
    --bg-sidebar-hover: #1e293b;
    --bg-sidebar-active: var(--brand-600);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-on-dark: #e2e8f0;

    --border-color: #e2e8f0;
    --border-strong: #cbd5e1;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);

    --sidebar-width: 264px;
    --topbar-height: 64px;

    --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme="dark"] {
    --bg-body: #0b1120;
    --bg-surface: #111827;
    --bg-surface-alt: #0f172a;
    --bg-sidebar: #060b16;
    --bg-sidebar-hover: #131c2e;

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-color: #1e293b;
    --border-strong: #334155;

    --brand-050: rgba(15, 118, 110, .16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", Geneva, Verdana, sans-serif;
    font-size: .95rem;
    background-color: var(--bg-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }

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

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

.app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    color: var(--text-on-dark);
    z-index: 1045;
    transition: transform var(--transition);
    overflow: hidden;
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--topbar-height);
    padding-inline: 1.25rem;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.app-sidebar__logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
}

.app-sidebar__title { font-weight: 600; line-height: 1.1; color: #fff; }
.app-sidebar__subtitle { font-size: .72rem; color: #94a3b8; }

.app-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem .75rem 1.5rem;
    scrollbar-width: thin;
}

.app-sidebar__nav::-webkit-scrollbar { width: 6px; }
.app-sidebar__nav::-webkit-scrollbar-thumb { background: #334155; border-radius: var(--radius-pill); }

.nav-section {
    margin: 1.25rem .75rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748b;
}

.nav-section:first-child { margin-top: 0; }

.nav-link-app {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem .75rem;
    margin-bottom: .125rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #cbd5e1;
    font-size: .9rem;
    text-align: start;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

.nav-link-app:hover,
.nav-link-app:focus-visible {
    background: var(--bg-sidebar-hover);
    color: #fff;
    text-decoration: none;
}

.nav-link-app.is-active {
    background: var(--bg-sidebar-active);
    color: #fff;
    font-weight: 600;
}

.nav-link-app i { width: 1.1rem; text-align: center; font-size: .95rem; flex: 0 0 auto; }

.app-main {
    min-height: 100vh;
    margin-inline-start: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    transition: margin var(--transition);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--topbar-height);
    padding-inline: clamp(.75rem, 2vw, 1.5rem);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.app-topbar__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.icon-btn:hover { background: var(--bg-surface-alt); color: var(--text-primary); }

.app-content {
    flex: 1 1 auto;
    width: 100%;
    padding: clamp(1rem, 2.5vw, 1.75rem);
}

.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

/* Desktop: the sidebar can be collapsed away to reclaim the space. */
@media (min-width: 992px) {
    body.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
    body.sidebar-collapsed .app-main { margin-inline-start: 0; }
}

/* Mobile: the sidebar becomes an overlay drawer. */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .app-main { margin-inline-start: 0; }

    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .app-backdrop { opacity: 1; visibility: visible; }
    body.sidebar-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Cards, page headers, tables
   -------------------------------------------------------------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.page-header__title { margin: 0; font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 650; }
.page-header__subtitle { margin: .25rem 0 0; color: var(--text-secondary); font-size: .875rem; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.card-app {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-app__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
}

.card-app__title { margin: 0; font-size: .98rem; font-weight: 650; }
.card-app__body { padding: 1.25rem; }
.card-app__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border-color); background: var(--bg-surface-alt); }

/* Any wide table scrolls inside its own container instead of the page. */
.table-responsive-app { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-app {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

.table-app th {
    padding: .75rem 1rem;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: start;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.table-app td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}

.table-app tbody tr:last-child td { border-bottom: 0; }
.table-app tbody tr:hover td { background: var(--bg-surface-alt); }

.table-actions { display: flex; gap: .375rem; justify-content: flex-end; }

/* Below the tablet break every row becomes its own stacked card. */
@media (max-width: 767.98px) {
    .table-app.table-stack thead { display: none; }

    .table-app.table-stack tbody tr {
        display: block;
        margin-bottom: .75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-surface);
        overflow: hidden;
    }

    .table-app.table-stack tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .625rem .875rem;
        text-align: end;
    }

    .table-app.table-stack tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--text-muted);
        text-align: start;
    }

    .table-app.table-stack .table-actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Stats, badges, avatars, empty state
   -------------------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stat-card__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--brand-050);
    color: var(--brand-600);
    font-size: 1.15rem;
}

.stat-card__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-card__label { font-size: .8rem; color: var(--text-secondary); }

.badge-app {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.4;
}

.badge-app--success { background: rgba(22, 163, 74, .12); color: var(--success-500); }
.badge-app--danger { background: rgba(220, 38, 38, .12); color: var(--danger-500); }
.badge-app--info { background: rgba(2, 132, 199, .12); color: var(--info-500); }
.badge-app--muted { background: var(--bg-surface-alt); color: var(--text-secondary); border: 1px solid var(--border-color); }

.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    overflow: hidden;
    text-transform: uppercase;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 96px; height: 96px; font-size: 1.9rem; }
.avatar--sm { width: 30px; height: 30px; font-size: .7rem; }

.empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--text-secondary); }
.empty-state i { font-size: 2.25rem; color: var(--text-muted); margin-bottom: .75rem; display: block; }

/* --------------------------------------------------------------------------
   Forms and buttons
   -------------------------------------------------------------------------- */

.form-label { font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; }

.form-control,
.form-select {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: .55rem .75rem;
    font-size: .9rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-surface);
    border-color: var(--brand-500);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
}

/* 16px on mobile stops iOS Safari zooming the page when a field is focused. */
@media (max-width: 767.98px) {
    .form-control, .form-select { font-size: 16px; }
}

.btn { border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; padding: .55rem 1rem; }

.btn-brand { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

.btn-soft {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-soft:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }

.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }

/* Buttons stack full width on the narrowest screens so they stay tappable. */
@media (max-width: 575.98px) {
    .btn-stack-sm { width: 100%; }
    .page-header__actions { width: 100%; }
    .page-header__actions .btn { flex: 1 1 auto; }
}

.form-section-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.5rem 0 .75rem;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .5rem 1.25rem;
}

.permission-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

.permission-check:hover { background: var(--bg-surface-alt); }
.permission-check input { width: 1.05rem; height: 1.05rem; margin: 0; flex: 0 0 auto; cursor: pointer; }
.permission-check label { margin: 0; font-size: .875rem; cursor: pointer; }
.permission-check code { font-size: .72rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Alerts, dropdowns, misc
   -------------------------------------------------------------------------- */

.alert { border: 0; border-radius: var(--radius-md); border-inline-start: 4px solid transparent; font-size: .9rem; }
.alert-success { background: rgba(22, 163, 74, .1); color: var(--success-500); border-inline-start-color: var(--success-500); }
.alert-danger { background: rgba(220, 38, 38, .1); color: var(--danger-500); border-inline-start-color: var(--danger-500); }
.alert-info { background: rgba(2, 132, 199, .1); color: var(--info-500); border-inline-start-color: var(--info-500); }

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--bg-surface);
    padding: .375rem;
}

.dropdown-item { border-radius: var(--radius-sm); font-size: .875rem; padding: .5rem .75rem; color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-surface-alt); color: var(--text-primary); }
.dropdown-divider { border-color: var(--border-color); }

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .3rem .5rem .3rem .3rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.user-menu-trigger:hover { background: var(--bg-surface-alt); border-color: var(--border-color); }
.user-menu-trigger__name { font-size: .85rem; font-weight: 600; line-height: 1.1; }
.user-menu-trigger__role { font-size: .72rem; color: var(--text-muted); }

@media (max-width: 575.98px) {
    .user-menu-trigger__meta { display: none; }
}

.modal-content { border: 0; border-radius: var(--radius-lg); background: var(--bg-surface); }
.modal-header, .modal-footer { border-color: var(--border-color); }

/* Printing: drop the chrome and print the content only. */
@media print {
    .app-sidebar, .app-topbar, .app-backdrop, .page-header__actions, .no-print { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content { padding: 0 !important; }
    .card-app { border: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Appointment board (DoctorsListApp)
   Dense by design: a receptionist needs a whole day visible without scrolling,
   so the cards are small and the type scale is tight.
   -------------------------------------------------------------------------- */

.doctor-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
}

.doctor-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--bg-surface-alt);
    border-bottom: 1px solid var(--border-color);
}

.doctor-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--brand-600);
    line-height: 1.2;
}

.doctor-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-top: .25rem;
    font-size: .72rem;
    color: var(--text-secondary);
}

.doctor-card__body { padding: .75rem; }

/* Date tabs */
.day-tabs {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding-bottom: .375rem;
    margin-bottom: .75rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.day-tab {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    flex: 0 0 auto;
    padding: .35rem .625rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.day-tab:hover { border-color: var(--brand-500); color: var(--brand-600); }

.day-tab.active {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.day-tab--off { color: var(--danger-500); border-color: rgba(220, 38, 38, .35); }
.day-tab.active.day-tab--off { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }

.day-tab__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: var(--radius-pill);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: .65rem;
    font-weight: 700;
}

.day-tab.active .day-tab__count { background: rgba(255, 255, 255, .22); color: #fff; }

/* The appointment grid: as many columns as fit, never fewer than one. */
.appt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .5rem;
}

.appt-card {
    position: relative;
    padding: .5rem .625rem;
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--brand-500);
    border-radius: 10px;
    background: var(--bg-surface);
    transition: box-shadow var(--transition), transform var(--transition);
}

.appt-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.appt-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    margin-bottom: .25rem;
}

.appt-card__ticket {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 .35rem;
    border-radius: var(--radius-pill);
    background: var(--brand-600);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.appt-card__actions { display: flex; gap: .125rem; }

.appt-card__btn {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: .72rem;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.appt-card__btn:hover { background: var(--bg-surface-alt); color: var(--brand-600); }
.appt-card__btn--danger:hover { color: var(--danger-500); }

.appt-card__name {
    margin: 0;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.appt-card__phone { font-size: .7rem; color: var(--text-muted); }

.appt-card__times {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px dashed var(--border-color);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.appt-card__times .start { color: var(--brand-600); font-weight: 650; }
.appt-card__times .end { color: var(--text-secondary); }

/* Notes were not shown at all before; two lines, full text on hover. */
.appt-card__note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px dashed var(--border-color);
    font-size: .7rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.appt-card__note i { color: var(--accent-500); margin-inline-end: .2rem; }

@media (max-width: 575.98px) {
    .appt-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .375rem; }
    .appt-card { padding: .4rem .5rem; }
    .doctor-card__header { padding: .625rem .75rem; }
}

/* Slot picker inside the reschedule dialog */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .375rem;
    max-height: 260px;
    overflow-y: auto;
    padding: .125rem;
}

.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .35rem .25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    font-size: .72rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.slot__ticket { font-weight: 700; font-size: .68rem; color: var(--text-muted); }
.slot:hover:not(.slot--taken) { border-color: var(--brand-500); }

.slot--selected { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.slot--selected .slot__ticket { color: rgba(255, 255, 255, .8); }

.slot--taken {
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .65;
}

.slot--current { border-color: var(--accent-500); border-style: dashed; }

/* --------------------------------------------------------------------------
   DataTables, restyled to the app's tokens so it does not look bolted on.
   -------------------------------------------------------------------------- */

.dataTables_wrapper { font-size: .875rem; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: .4rem .6rem;
    font-size: .85rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--brand-500);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
}

.dataTables_wrapper .dataTables_filter { width: 100%; margin: 0; }
.dataTables_wrapper .dataTables_filter label { width: 100%; margin: 0; }
.dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary);
    font-size: .8rem;
    margin: 0;
}

/* The table itself reuses the shared table skin. */
table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

table.dataTable thead th {
    padding: .7rem .85rem;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: start;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: 0 !important;
}

table.dataTable tbody td {
    padding: .7rem .85rem;
    border-top: 0 !important;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

table.dataTable tbody tr { background: transparent; }
table.dataTable tbody tr:hover td { background: var(--bg-surface-alt); }
table.dataTable tbody tr:last-child td { border-bottom: 0; }

table.dataTable.no-footer { border-bottom: 0 !important; }

/* Sort arrows */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { color: var(--brand-600); }

/* Pagination */
.dataTables_wrapper .pagination { margin: 0; flex-wrap: wrap; gap: .2rem; }

.dataTables_wrapper .page-link {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: .8rem;
    padding: .3rem .6rem;
}

.dataTables_wrapper .page-item.active .page-link {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.dataTables_wrapper .page-item.disabled .page-link {
    background: var(--bg-surface-alt);
    color: var(--text-muted);
}

/* Export buttons */
.dt-buttons { display: flex; flex-wrap: wrap; gap: .25rem; }
.dt-buttons .btn { padding: .35rem .6rem; font-size: .78rem; }

/* Responsive collapse: the expander and the child rows */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: var(--brand-600);
    border: 0;
    box-shadow: none;
    line-height: 1rem;
}

table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }

table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    min-width: 40%;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid var(--border-color);
    padding: .4rem 0;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-size: .85rem;
}

@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_length { display: none; }
    .dt-buttons { width: 100%; }
    .dt-buttons .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Floating settings button and panel
   -------------------------------------------------------------------------- */

.settings-fab {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 1050;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform var(--transition), background-color var(--transition);
}

.settings-fab:hover { background: var(--brand-700); transform: translateY(-2px); }
.settings-fab:focus-visible { outline: 3px solid rgba(15, 118, 110, .45); outline-offset: 2px; }

/* The gear turns while the panel is open, so the button reads as a toggle. */
body.settings-open .settings-fab i { transform: rotate(90deg); }
.settings-fab i { transition: transform var(--transition); }

.settings-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1055;
    width: min(320px, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-inline-start: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
}

body.settings-open .settings-panel { transform: translateX(0); }

.settings-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
}

.settings-panel__title { margin: 0; font-size: .95rem; font-weight: 650; }
.settings-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 1.125rem; }
.settings-panel__footer { padding: .875rem 1.125rem; border-top: 1px solid var(--border-color); }

.settings-group { margin-bottom: 1.25rem; }

.settings-group__label {
    display: block;
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Segmented control used for theme, density and text size */
.segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-alt);
}

.segmented button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .45rem .3rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.segmented button i { font-size: .9rem; }
.segmented button:hover { color: var(--text-primary); }

.segmented button[aria-pressed="true"] {
    background: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1051;
    background: rgba(2, 6, 23, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

body.settings-open .settings-backdrop { opacity: 1; visibility: visible; }

.settings-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .85rem;
    text-decoration: none;
}

.settings-link:hover { background: var(--bg-surface-alt); color: var(--text-primary); text-decoration: none; }
.settings-link i { width: 1.1rem; text-align: center; color: var(--text-muted); }

/* --- Density: shrinks the paddings that dominate a dense screen --- */
:root[data-density="compact"] {
    --topbar-height: 54px;
}

:root[data-density="compact"] .app-content { padding: clamp(.6rem, 1.5vw, 1rem); }
:root[data-density="compact"] .card-app__body { padding: .75rem; }
:root[data-density="compact"] .card-app__header,
:root[data-density="compact"] .card-app__footer { padding: .6rem .75rem; }
:root[data-density="compact"] .table-app th { padding: .45rem .6rem; }
:root[data-density="compact"] .table-app td,
:root[data-density="compact"] table.dataTable tbody td { padding: .45rem .6rem; }
:root[data-density="compact"] table.dataTable thead th { padding: .45rem .6rem; }
:root[data-density="compact"] .page-header { margin-bottom: .75rem; }
:root[data-density="compact"] .appt-card { padding: .35rem .45rem; }
:root[data-density="compact"] .appt-grid { gap: .35rem; }
:root[data-density="compact"] .nav-link-app { padding: .45rem .75rem; }

/* --- Text size: scales the root, so every rem-based size follows --- */
:root[data-text="small"] { font-size: 93.75%; }
:root[data-text="large"] { font-size: 106.25%; }

@media print {
    .settings-fab, .settings-panel, .settings-backdrop { display: none !important; }
}

@media (max-width: 575.98px) {
    .settings-fab { width: 46px; height: 46px; inset-block-end: 1rem; inset-inline-end: 1rem; }
}

/* --------------------------------------------------------------------------
   "View as" banner. Deliberately loud: forgetting which account you are looking
   at is the main hazard of an impersonation feature.
   -------------------------------------------------------------------------- */

.viewas-banner {
    position: sticky;
    top: 0;
    z-index: 1035;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem clamp(.75rem, 2vw, 1.5rem);
    background: var(--accent-500);
    color: #1f1300;
    font-size: .84rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.viewas-banner i { flex: 0 0 auto; }
.viewas-banner__text { flex: 1 1 auto; min-width: 12rem; }
.viewas-banner__role { opacity: .75; font-weight: 500; }

.viewas-banner__exit {
    background: #1f1300;
    border-color: #1f1300;
    color: #fff;
    font-size: .78rem;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.viewas-banner__exit:hover { background: #000; border-color: #000; color: #fff; }

/* The banner sits above the topbar, so the topbar cannot also be at top: 0. */
body.is-viewing-as .app-topbar { top: 0; }

@media (max-width: 575.98px) {
    .viewas-banner { font-size: .78rem; }
    .viewas-banner__exit { width: 100%; }
    .viewas-banner form { width: 100%; margin-inline-start: 0 !important; }
}

/* --------------------------------------------------------------------------
   Phone and tablet fixes (iOS and Android)
   -------------------------------------------------------------------------- */

/* iOS Safari counts 100vh as the height WITHOUT the address bar, so a 100vh
   panel is taller than the visible area and adds phantom scrolling. dvh tracks
   the toolbar as it hides and shows; the vh line stays as the fallback. */
.app-shell, .app-main { min-height: 100vh; }

@supports (min-height: 100dvh) {
    .app-shell, .app-main { min-height: 100dvh; }
}

@supports (height: 100dvh) {
    .app-sidebar, .settings-panel { height: 100dvh; }
}

/* The layout declares viewport-fit=cover, which puts content under the notch and
   the home indicator unless the safe areas are honoured explicitly. */
@supports (padding: max(0px)) {
    .app-topbar {
        padding-inline-start: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-left));
        padding-inline-end: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-right));
    }

    .app-content {
        padding-inline-start: max(clamp(1rem, 2.5vw, 1.75rem), env(safe-area-inset-left));
        padding-inline-end: max(clamp(1rem, 2.5vw, 1.75rem), env(safe-area-inset-right));
        padding-bottom: max(clamp(1rem, 2.5vw, 1.75rem), env(safe-area-inset-bottom));
    }

    .app-sidebar__nav { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
    .app-sidebar__brand { padding-inline-start: max(1.25rem, env(safe-area-inset-left)); }

    /* Otherwise the button sits on top of the home indicator and is hard to press. */
    .settings-fab {
        inset-block-end: max(1.25rem, calc(env(safe-area-inset-bottom) + .5rem));
        inset-inline-end: max(1.25rem, calc(env(safe-area-inset-right) + .5rem));
    }

    .settings-panel__body { padding-bottom: max(1.125rem, env(safe-area-inset-bottom)); }
    .settings-panel__footer { padding-bottom: max(.875rem, env(safe-area-inset-bottom)); }

    .viewas-banner {
        padding-inline-start: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-left));
        padding-inline-end: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-right));
    }
}

/* Touch screens: the appointment card buttons were 24px, well under the 44px
   Apple and 48px Material minimums, so they were easy to miss or mis-tap. The
   card stays visually dense; only the hit area grows. */
@media (pointer: coarse) {
    .appt-card__btn {
        width: 36px;
        height: 36px;
        font-size: .9rem;
    }

    .appt-card__actions { gap: .25rem; }

    .day-tab { padding: .5rem .75rem; }

    .btn-icon { width: 40px; height: 40px; }

    .form-check-input { width: 1.25rem; height: 1.25rem; }

    /* Table action buttons sit close together in the stacked layout. */
    .table-actions { gap: .5rem; }
}

/* Stop iOS turning phone numbers and dates in table cells into tap-to-call links
   with their own styling, which breaks the layout mid-cell. */
.table-app td { -webkit-text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   Installed-app behaviour on phones
   -------------------------------------------------------------------------- */

/* Bottom tab bar. Reaching the top-left drawer one-handed on a phone is awkward,
   so the sections people use all day sit under the thumb instead. */
.mobile-nav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1040;
    display: none;
    background: var(--bg-surface);
    border-block-start: 1px solid var(--border-subtle);
    padding-block: .3rem;
    padding-block-end: max(.3rem, env(safe-area-inset-bottom));
    padding-inline-start: env(safe-area-inset-left);
    padding-inline-end: env(safe-area-inset-right);
    box-shadow: 0 -2px 14px rgba(2, 6, 23, .07);
}

@media (max-width: 991.98px) {
    .mobile-nav { display: flex; }

    /* Nothing should end up hidden behind the bar, including the last table row. */
    .app-content { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

    /* The settings button moves above the bar rather than sitting on top of it. */
    .settings-fab { inset-block-end: calc(4.75rem + env(safe-area-inset-bottom)); }

    .settings-panel { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}

.mobile-nav__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .2rem .15rem;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .01em;
    transition: color var(--transition);
}

.mobile-nav__item i { font-size: 1.05rem; }

.mobile-nav__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav__item:hover,
.mobile-nav__item:focus-visible { color: var(--brand-500); }

.mobile-nav__item.is-active { color: var(--brand-500); }

/* A short bar over the live tab, the way a native tab bar marks position. */
.mobile-nav__item.is-active::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    width: 1.75rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--brand-500);
}

/* The tab bar replaces the drawer for everyday moves, so the drawer button in the
   top bar would be a second way to do the same thing. */
@media (max-width: 991.98px) {
    .app-topbar #sidebarToggle { display: none; }
    .app-topbar { padding-inline-start: max(1rem, env(safe-area-inset-left)); }
}

/* Chrome that belongs to the browser has no place in an installed app. */
@media (display-mode: standalone) {
    .no-standalone { display: none !important; }
}

/* Touch behaviour that separates an app from a web page: no blue flash on tap,
   no rubber-banding the whole document, no iOS resizing text in landscape. */
@media (pointer: coarse) {
    a, button, .mobile-nav__item, .nav-link-app, .btn {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        /* Only sideways. Containing vertical overscroll also switches off
           pull to refresh, and an installed app has no address bar and no
           reload button, which would leave no way to refresh a page. */
        overscroll-behavior-x: contain;
        -webkit-text-size-adjust: 100%;
    }

    .table-responsive-app,
    .settings-panel,
    .app-sidebar {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Thin progress bar across the top while the next page is being fetched. Server
   rendered pages have a real wait, and showing nothing reads as a dropped tap. */
.route-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2000;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    opacity: 0;
    transition: width .2s ease, opacity .2s ease;
    pointer-events: none;
}

.route-progress.is-busy { opacity: 1; }

/* Connection notice. Staff move through the building and lose wifi; a page that
   simply fails to respond looks broken instead of offline. */
.net-banner {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    padding-block-start: max(.5rem, env(safe-area-inset-top));
    background: #b45309;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    transform: translateY(-100%);
    transition: transform var(--transition);
}

.net-banner.is-visible { transform: translateY(0); }
.net-banner--back { background: var(--brand-500); }

@media print {
    .mobile-nav, .route-progress, .net-banner { display: none !important; }
}

/* Installed on iOS the web view runs under the status bar, because the status bar is
   declared translucent so the top bar's colour reaches the top of the screen. Nothing
   reserves that space by itself, so the clock would sit on top of the title. Matched on
   both the media query and a class, since older iOS does not report display-mode. */
@media (display-mode: standalone) {
    .app-topbar { padding-block-start: max(.65rem, env(safe-area-inset-top)); }
    .app-sidebar__brand { padding-block-start: max(1.25rem, env(safe-area-inset-top)); }
    .settings-panel__header { padding-block-start: max(1rem, env(safe-area-inset-top)); }
    .viewas-banner { padding-block-start: max(.45rem, env(safe-area-inset-top)); }
    .route-progress { margin-block-start: env(safe-area-inset-top); }
}

html.is-standalone .app-topbar { padding-block-start: max(.65rem, env(safe-area-inset-top)); }
html.is-standalone .app-sidebar__brand { padding-block-start: max(1.25rem, env(safe-area-inset-top)); }
html.is-standalone .settings-panel__header { padding-block-start: max(1rem, env(safe-area-inset-top)); }
html.is-standalone .viewas-banner { padding-block-start: max(.45rem, env(safe-area-inset-top)); }
html.is-standalone .route-progress { margin-block-start: env(safe-area-inset-top); }

/* --------------------------------------------------------------------------
   Scrollable modals whose body is wrapped in a form
   -------------------------------------------------------------------------- */

/* Bootstrap builds a scrollable modal by capping .modal-content and letting
   .modal-body scroll, which assumes the body is a direct child of the content.
   The edit and cancel dialogs wrap their body and footer in a <form> so the
   fields post together, and that form is a plain block: it grows past the
   capped content, the body never receives a bounded height so it will not
   scroll, and the footer carrying Save drops below the screen. On a phone the
   button was unreachable and an edit could not be saved.

   Making the form the flex column instead puts the body back in charge of the
   leftover space. min-height:0 is what actually allows it to shrink; without
   it a flex item refuses to go below its content height. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    min-height: 0;
    overflow-y: auto;
}

/* The footer must keep its height while the body gives way. */
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

/* Phones: a centred dialog with margins to spare wastes room the fields need,
   and the on-screen keyboard takes another chunk when a field is focused. */
@media (max-width: 575.98px) {
    .modal-dialog-scrollable {
        height: calc(100dvh - 1rem);
        margin: .5rem;
    }

    .modal-dialog-scrollable .modal-content { max-height: 100%; }

    .modal-footer .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Companies
   -------------------------------------------------------------------------- */

/* Radio flavour of the segmented control, so the choice posts with the form
   rather than living only in script. */
.segmented__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.segmented__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 40px;
    padding: .45rem .75rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
    transition: background-color var(--transition), color var(--transition);
}

.segmented__option:hover span { color: var(--text-primary); }

.segmented__option input:checked + span {
    background: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.segmented__option input:focus-visible + span {
    outline: 3px solid rgba(15, 118, 110, .45);
    outline-offset: 2px;
}

/* Marks a company wherever doctors and companies share a list. */
.kind-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

[data-theme="dark"] .kind-badge { color: #fbbf24; }

/* The board header for a company: amber accent instead of the clinical teal, so the
   two read as different kinds of thing at a glance. */
.doctor-card--company .doctor-card__name i { color: var(--accent-500); }
.doctor-card--company { border-top: 3px solid var(--accent-500); }

/* A company ticket shows its own window, which is the thing people book it for. */
.appt-card__window {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.appt-card__duration {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
}

/* Start / end pickers, shown in place of the fixed slot list. */
.visit-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.visit-times__summary {
    grid-column: 1 / -1;
    font-size: .8rem;
    color: var(--text-muted);
}

.visit-times__summary.is-error { color: var(--danger-500); }

.visit-booked {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem;
}

.visit-booked span {
    padding: .15rem .5rem;
    border-radius: 6px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Opening hours calendar: tap any day in or out
   -------------------------------------------------------------------------- */
.hours-cal {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
}

.hours-cal__month {
    padding: .65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.hours-cal__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
    font-weight: 700;
}

.hours-cal__title small { color: var(--text-muted); font-weight: 600; }

.hours-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .3rem;
}

.hours-cal__dow {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.hours-cal__day {
    position: relative;
    min-height: 40px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.hours-cal__day:hover:not(:disabled) { border-color: var(--brand-500); }

/* Outside the chosen range: still tappable, for a one-off extra day. */
.hours-cal__day.is-outside { background: var(--bg-surface-alt); color: var(--text-muted); }

.hours-cal__day.is-selected {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

/* Taken out by hand from the pattern, so it reads as a deliberate gap. */
.hours-cal__day.is-removed {
    background: var(--bg-surface);
    color: var(--danger-500);
    border-style: dashed;
    border-color: var(--danger-500);
    text-decoration: line-through;
}

/* Already has hours: shown so it is not booked twice, never selectable. */
.hours-cal__day.is-existing {
    background: repeating-linear-gradient(45deg, rgba(245, 158, 11, .2) 0 5px, transparent 5px 10px);
    border-color: rgba(245, 158, 11, .7);
    color: #b45309;
    cursor: not-allowed;
}

.hours-cal__day.is-past { opacity: .35; cursor: not-allowed; }

.hours-cal__day.is-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-500);
}

.hours-cal__day.is-selected.is-today::after { background: #fff; }

.hours-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .75rem;
    color: var(--text-muted);
}

.hours-cal__legend i {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin-right: .3rem;
    vertical-align: -2px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.hours-cal__legend .lg-sel { background: var(--brand-600); border-color: var(--brand-600); }
.hours-cal__legend .lg-off { border: 1px dashed var(--danger-500); }
.hours-cal__legend .lg-has { background: repeating-linear-gradient(45deg, rgba(245, 158, 11, .35) 0 3px, transparent 3px 6px); }

.hours-summary {
    position: sticky;
    bottom: calc(4.4rem + env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: 0 -4px 18px rgba(2, 6, 23, .08);
}

@media (min-width: 992px) {
    .hours-summary { bottom: 1rem; }
}

@media (max-width: 575.98px) {
    .hours-cal { grid-template-columns: 1fr; }
    .hours-cal__day { min-height: 42px; font-size: .9rem; }
}

/* The settings button would otherwise sit on top of the sticky summary bar's buttons. */
body:has(.hours-summary) .settings-fab { inset-block-end: 6rem; }

@media (max-width: 991.98px) {
    body:has(.hours-summary) .settings-fab { inset-block-end: calc(11rem + env(safe-area-inset-bottom)); }
}

/* "Whole day" shortcut under the company visit pickers. */
.visit-times__whole {
    grid-column: 1 / -1;
    justify-self: start;
}