/**
 * app-theme-default.css
 * ─────────────────────
 * Centralised branding + design-system file for Mobile Clinic.
 * Loaded AFTER app.min.css (base admin shell).
 *
 * Consolidates: former theme.css + text-style.css + original branding overrides.
 *
 * Load order (base admin layout):
 *   1. vendors.min.css        – vendor bundle
 *   2. app.min.css            – base shell tokens + components
 *   3. app-theme-default.css  – THIS FILE (all app tokens + global styles)
 *
 * Load order (legacy layout):
 *   1. Bootstrap CDN
 *   2. app-theme-default.css  – THIS FILE
 *   3. app-modal.css          – modal structure
 *   4. app-shell.css          – legacy layout
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. APP-LEVEL DESIGN TOKENS
   Naming convention: --color-{role}-{variant?}
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-sans-app: "Plus Jakarta Sans", sans-serif;
    --theme-font-sans-serif: var(--font-sans-app);
    --theme-body-font-family: var(--font-sans-app);
    --theme-font-family-secondary: var(--font-sans-app);
    --theme-btn-font-family: var(--font-sans-app);
    --bs-font-sans-serif: var(--font-sans-app);
    --bs-body-font-family: var(--font-sans-app);

    /* ── Brand / Primary ──────────────────────────────────────────────────── */
    --color-primary: #585ADB;
    --color-primary-rgb: 88, 90, 219;
    --color-primary-hover: #4648B5;
    --color-primary-active: #363891;
    --color-primary-subtle: rgba(88, 90, 219, 0.10);
    --color-primary-ghost: rgba(88, 90, 219, 0.06);
    --color-primary-border: rgba(88, 90, 219, 0.25);
    --color-primary-text: #585ADB;

    /* ── Backgrounds ──────────────────────────────────────────────────────── */
    --color-bg-page: #f7f6f7;
    --color-bg-page-rgb: 247, 246, 247;
    --color-bg-surface: #ffffff;
    --color-bg-surface-low: #f3f0f0;
    --color-bg-surface-mid: #e8e4e4;
    --color-bg-table-head: #f5f0f0;
    --color-bg-table-stripe: #fdfbfb;
    --color-bg-hover: rgba(88, 90, 219, 0.04);
    --color-bg-dark: #161719;

    /* ── Text ─────────────────────────────────────────────────────────────── */
    --color-text: #1c1b1b;
    --color-text-secondary: #4a4848;
    --color-text-muted: #6b6868;
    --color-text-placeholder: #9e9b9b;
    --color-text-inverse: #ffffff;
    --color-text-link: #585ADB;
    --color-text-link-rgb: 88, 90, 219;
    --color-text-link-hover: #4648B5;

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --color-border: #ebe8e8;
    --color-border-strong: #d9d5d5;
    --color-border-focus: rgba(88, 90, 219, 0.25);

    /* ── Semantic — base + subtle (bg) + text ─────────────────────────────── */
    --color-success: #22a75b;
    --color-success-subtle: #dcf5e7;
    --color-success-text: #166534;

    --color-warning: #e39a09;
    --color-warning-subtle: #fef3d0;
    --color-warning-text: #854d0e;

    --color-danger: #d11f22;
    --color-danger-subtle: #fde8e8;
    --color-danger-text: #991b1b;

    --color-info: #1a6fb5;
    --color-info-subtle: #e3eef9;
    --color-info-text: #1e3a5f;

    /* ── Elevation ────────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 12px -2px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 35px -5px rgba(0, 0, 0, 0.18);

    /* ── Border radius scale ──────────────────────────────────────────────── */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    /* ── Spacing ──────────────────────────────────────────────────────────── */
    --space-section-gap: 1rem;
    --space-card-pad: 1.25rem;
    --space-page-x: 1.5rem;

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ── Shared form-control baseline ────────────────────────────────────── */
    --control-min-height: 2.875rem;
    --control-padding-y: 0.625rem;
    --control-padding-x: 0.875rem;
    --control-font-size: 0.95rem;
    --control-bg: var(--color-bg-table-stripe);
    --control-bg-active: var(--color-bg-surface);
    --control-bg-muted: var(--color-bg-surface-low);
    --control-border: var(--color-border-strong);
    --control-border-muted: var(--color-border);
    --control-focus-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.20);

    /* ── Legacy aliases — backward compatibility ──────────────────────────── */
    --primary: var(--color-primary);
    --primary-10: var(--color-primary-subtle);
    --background: var(--color-bg-page);
    --bg: var(--color-bg-page);
    --surface: var(--color-bg-surface);
    --surface-low: var(--color-bg-surface-low);
    --surface-mid: var(--color-bg-surface-mid);
    --surface-tint: var(--color-bg-hover);
    --text: var(--color-text);
    --text-variant: var(--color-text-muted);
    --text-muted: var(--color-text-muted);
    --outline-variant: var(--color-border);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --dark-surface: var(--color-bg-dark);
    --shadow: var(--shadow-md);
    --shadow-hover: var(--shadow-lg);
    --app-radius: var(--radius-md);
    --app-page-section-gap: var(--space-section-gap);
}

/* ═══════════════════════════════════════════════════════════════════════════
    2. THEME TOKEN OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Light mode (default) ─────────────────────────────────────────────────── */
html[data-skin="minimal"],
html[data-skin="minimal"][data-bs-theme="light"] {

    /* --- Primary ---------------------------------------------------- */
    --color-primary: #585ADB;
    --color-primary-rgb: 88, 90, 219;
    --color-primary-light: #7072E5;
    --color-primary-dark: #363891;

    /* --- Theme aliases (Bootstrap-compatible) ----------------------- */
    --theme-body-bg: var(--color-bg-page);
    --theme-body-bg-rgb: var(--color-bg-page-rgb);

    --theme-primary: var(--color-primary);
    --theme-primary-rgb: var(--color-primary-rgb);
    --theme-primary-text-emphasis: #363891;
    --theme-primary-bg-subtle: var(--color-primary-subtle);
    --theme-primary-border-subtle: var(--color-primary-border);

    --theme-link-color: var(--color-text-link);
    --theme-link-color-rgb: var(--color-text-link-rgb);
    --theme-link-hover-color: var(--color-text-link-hover);
    --theme-link-hover-color-rgb: 70, 72, 181;
    --theme-topbar-item-hover-color: var(--color-primary);

    --theme-focus-ring-color: var(--color-border-focus);

    /* --- Border radius (unified scale → Bootstrap + theme) --------- */
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-border-radius-xxl: var(--radius-lg);
    --bs-border-radius-pill: var(--radius-pill);

    --theme-border-radius: var(--radius-md);
    --theme-border-radius-sm: var(--radius-sm);
    --theme-border-radius-lg: var(--radius-lg);
    --theme-border-radius-xl: var(--radius-lg);
    --theme-border-radius-xxl: var(--radius-lg);
    --theme-border-radius-2xl: var(--radius-lg);

    /* --- Bootstrap semantic overrides ------------------------------ */
    --bs-body-bg: var(--color-bg-page);
    --bs-body-bg-rgb: var(--color-bg-page-rgb);
    --bs-body-color: var(--color-text);
    --bs-secondary-color: var(--color-text-muted);
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border);
    --bs-link-color: var(--color-text-link);
    --bs-link-color-rgb: var(--color-text-link-rgb);
    --bs-link-hover-color: var(--color-text-link-hover);
    --bs-focus-ring-color: var(--color-border-focus);
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 1;
}

/* ─── Dark mode ─────────────────────────────────────────────────────────────── */
html[data-skin="minimal"][data-bs-theme="dark"] {
    --color-primary: #6D70EA;
    --color-primary-rgb: 109, 112, 234;
    --color-primary-light: #8284EF;
    --color-primary-dark: #4A4DBE;
}

/* Override sidebar active/hover colour via CSS variable */
html[data-skin="minimal"][data-menu-color="light"],
html[data-skin="minimal"] {
    --theme-sidenav-item-active-color: var(--color-primary, #585ADB);
    --theme-sidenav-item-hover-color: var(--color-primary, #585ADB);
}

/* Direct background override — belt-and-suspenders on top of the CSS variable */
html[data-skin="minimal"] body {
    background-color: #f7f6f7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. GLOBAL TYPOGRAPHY & BASE
   ═══════════════════════════════════════════════════════════════════════════ */
* {
    font-family: "Plus Jakarta Sans", sans-serif;
}

body {
    font-size: 0.95rem;
}

.btn {
    font-size: 0.8rem;
}

.btn.btn-sm {
    font-size: 0.75rem;
}

h1 {
    font-size: 2rem;
    font-weight: bold;
}

h2 {
    font-size: 1.7rem;
    font-weight: bold;
}

h3 {
    font-size: 1.4rem;
    font-weight: bold;
}

h4 {
    font-size: 1.25rem;
    font-weight: bold;
}

h5 {
    font-size: 1.1rem;
    font-weight: bold;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   4. BOOTSTRAP FORM CONTROLS (.form-control / .form-select)
    Shared clinic baseline: slightly larger controls, subtle tinted resting
    surface, white active surface, and clearly separated read-only states.
   ═══════════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    min-height: var(--control-min-height);
    padding: var(--control-padding-y) var(--control-padding-x);
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--app-radius, 0.5rem);
    color: var(--text);
    font-size: var(--control-font-size);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control::placeholder {
    color: var(--color-text-placeholder) !important;
}

.form-select::placeholder {
    color: var(--color-text-placeholder) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    background-color: var(--control-bg-active);
    box-shadow: var(--control-focus-shadow);
    outline: none;
}

input.form-control:read-only,
input.form-control[readonly],
textarea.form-control:read-only {
    background-color: var(--control-bg-muted) !important;
    border-color: var(--control-border-muted);
    color: var(--text-muted);
    opacity: 1;
    cursor: not-allowed;
}

input.form-control:read-only:focus,
input.form-control[readonly]:focus,
textarea.form-control:read-only:focus {
    border-color: inherit !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    background-color: var(--control-bg-muted) !important;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--control-bg-muted);
    border-color: var(--control-border-muted);
    color: var(--text-muted);
    opacity: 1;
    cursor: not-allowed;
}

.form-select {
    cursor: pointer;
}

.form-select:disabled {
    cursor: not-allowed;
}

/* app.min.css still hardcodes Dropzone at 8px; keep it on the shared radius token. */
.dropzone {
    border-radius: var(--app-radius, 0.5rem);
}

/* Bootstrap 5 only adds the chevron arrow to .form-select, not .form-control.
   Templates use <select class="form-control"> (Bootstrap 4 pattern), so we
   restore the arrow explicitly here. */
select.form-control {
    cursor: pointer;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
    -webkit-appearance: none;
}

select.form-control:disabled {
    cursor: not-allowed;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Flatpickr appends to <body>, so when a fullscreen app modal is open
   its default z-index sits behind the modal content and blocks day clicks. */
body.modal-open>.flatpickr-calendar.open {
    z-index: 11090 !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background: var(--color-primary-subtle) !important;
    border-color: var(--color-primary-subtle) !important;
    color: var(--color-primary-text) !important;
    box-shadow: -5px 0 0 var(--color-primary-subtle), 5px 0 0 var(--color-primary-subtle) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: none !important;
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--color-primary) !important;
}

/* Shared combobox picker surfaces.
   Used by preview-rendered EMR forms and pages that do not load app-form.css. */
.picker-combobox {
    position: relative;
    --picker-open-z-index: 6;
    --picker-input-padding-end: 2.85rem;
    --picker-toggle-color: #a89a95;
    --picker-menu-offset: 0.3rem;
    --picker-menu-border: var(--color-border);
    --picker-menu-radius: 0.75rem;
    --picker-menu-bg: #fff;
    --picker-menu-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.10);
    --picker-options-max-height: 13rem;
    --picker-option-gap: 0.25rem;
    --picker-option-radius: 0.55rem;
    --picker-option-padding-y: 0.65rem;
    --picker-option-padding-x: 0.85rem;
    --picker-option-text: var(--color-text);
    --picker-option-active-bg: var(--color-primary-subtle);
    --picker-option-active-color: var(--color-primary);
    --picker-option-active-weight: 600;
    --picker-empty-font-size: 0.875rem;
    --picker-empty-color: var(--color-text-muted);
}

.picker-combobox.is-open {
    z-index: var(--picker-open-z-index);
}

.picker-combobox .picker-combobox-input,
.picker-combobox input[data-region-input] {
    padding-right: var(--picker-input-padding-end);
}

.picker-combobox .picker-toggle,
.picker-combobox .picker-combobox-toggle,
.picker-combobox button[data-region-toggle] {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    min-width: 46px;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--picker-toggle-color);
    z-index: 2;
}

.picker-combobox .picker-icon {
    font-size: 0.85rem;
    transition: color 0.18s ease, transform 0.18s ease;
}

.picker-combobox.is-open .picker-icon {
    color: var(--picker-option-active-color);
    transform: rotate(180deg);
}

.picker-combobox .picker-menu,
.picker-combobox .picker-combobox-menu {
    position: absolute;
    top: calc(100% + var(--picker-menu-offset));
    left: 0;
    right: 0;
    z-index: 1050;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--picker-menu-border);
    border-radius: var(--picker-menu-radius);
    background: var(--picker-menu-bg);
    box-shadow: var(--picker-menu-shadow);
}

.picker-combobox .picker-options {
    max-height: var(--picker-options-max-height);
    overflow-y: auto;
    padding: 0.125rem 0.25rem 0.25rem;
}

.picker-menu .picker-options {
    max-height: var(--picker-options-max-height, 13rem);
    overflow-y: auto;
    padding: 0.125rem 0.25rem 0.25rem;
}

.picker-combobox .picker-option {
    width: 100%;
    margin-bottom: var(--picker-option-gap);
    border: 0;
    background: transparent;
    border-radius: var(--picker-option-radius);
    color: var(--picker-option-text);
    text-align: left;
    padding: var(--picker-option-padding-y) var(--picker-option-padding-x);
}

.picker-menu .picker-option {
    display: block;
    width: 100%;
    margin-bottom: var(--picker-option-gap, 0.25rem);
    border: 0;
    background: transparent;
    color: var(--picker-option-text, var(--color-text));
    text-align: left;
    padding: var(--picker-option-padding-y, 0.65rem) var(--picker-option-padding-x, 0.85rem);
}

.picker-combobox .picker-option:last-child {
    margin-bottom: 0;
}

.picker-menu .picker-option:last-child {
    margin-bottom: 0;
}

.picker-combobox .picker-option:hover,
.picker-combobox .picker-option:focus,
.picker-combobox .picker-option.active {
    background: var(--picker-option-active-bg);
    color: var(--picker-option-active-color);
    border-radius: var(--picker-option-radius);
}

.picker-menu .picker-option:hover,
.picker-menu .picker-option:focus,
.picker-menu .picker-option.active {
    background: var(--picker-option-active-bg, var(--color-primary-subtle));
    color: var(--picker-option-active-color, var(--color-primary));
    border-radius: var(--picker-option-radius, 0.55rem);
}

.picker-combobox .picker-option.active {
    font-weight: var(--picker-option-active-weight);
}

.picker-menu .picker-option.active {
    font-weight: var(--picker-option-active-weight, 600);
}

.picker-menu .picker-option,
.picker-menu .picker-option:hover,
.picker-menu .picker-option:focus,
.picker-menu .picker-option.active {
    border-radius: var(--picker-option-radius, 0.55rem);
}

.picker-menu .picker-option__content,
.picker-combobox .picker-option__content {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.picker-menu .picker-option__label,
.picker-combobox .picker-option__label {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}

.picker-menu .picker-option__description,
.picker-combobox .picker-option__description {
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: normal;
    color: var(--color-text-muted);
}

.picker-menu .picker-option:hover .picker-option__description,
.picker-menu .picker-option:focus .picker-option__description,
.picker-menu .picker-option.active .picker-option__description,
.picker-combobox .picker-option:hover .picker-option__description,
.picker-combobox .picker-option:focus .picker-option__description,
.picker-combobox .picker-option.active .picker-option__description {
    color: currentColor;
    opacity: 0.82;
}

.picker-combobox .picker-empty {
    font-size: var(--picker-empty-font-size);
    color: var(--picker-empty-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. GLOBAL APP-INPUT (.app-input — custom form control used in modals)
   ═══════════════════════════════════════════════════════════════════════════ */
.app-input {
    width: 100%;
    min-height: var(--control-min-height);
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--app-radius, 0.5rem);
    color: var(--text);
    padding: var(--control-padding-y) var(--control-padding-x);
    font-size: var(--control-font-size);
    font-family: "Plus Jakarta Sans", sans-serif;
    transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, background-color 0.18s ease-in-out;
    appearance: none;
}

.app-input::placeholder {
    color: var(--color-text-placeholder);
}

.app-input:focus {
    border-color: var(--color-primary);
    background-color: var(--control-bg-active);
    box-shadow: var(--control-focus-shadow);
    outline: none;
}

select.app-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239c9690' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px 12px;
    padding-right: 2.4rem;
    cursor: pointer;
}

select.app-input:disabled {
    cursor: not-allowed;
}

input.app-input:read-only,
input.app-input[readonly],
textarea.app-input:read-only {
    background-color: var(--control-bg-muted) !important;
    border-color: var(--control-border-muted);
    color: var(--text-variant);
    opacity: 1;
    cursor: not-allowed;
}

input.app-input:read-only:focus,
input.app-input[readonly]:focus,
textarea.app-input:read-only:focus {
    border-color: inherit !important;
    box-shadow: none !important;
    background-color: var(--control-bg-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5b. SELECT2 MULTISELECT (.app-modal-multi-select progressive enhancement)
   Keep the native <select multiple> usable as the fallback while bringing the
   Select2 surface onto the same input baseline as .form-control/.form-select.
   ═══════════════════════════════════════════════════════════════════════════ */
.app-modal-multi-select.form-select[multiple] {
    min-height: 11rem;
    padding: 0.5rem;
    background-color: var(--color-bg-table-stripe);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.app-modal-multi-select.form-select[multiple] {
    background-image: none;
}

.app-modal-multi-select.form-select[multiple] option {
    padding: 0.5rem 0.625rem;
}

.app-modal-multi-select.form-select[multiple]:focus {
    border-color: var(--color-primary);
    background-color: var(--color-bg-surface);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.20);
}

.app-modal-multiselect-wrap .app-modal-multi-select-state {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.app-modal-multiselect-wrap .select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--multiple.app-select2-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.875rem;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-table-stripe);
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    cursor: text;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__rendered {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__placeholder {
    margin: 0;
    color: var(--color-text-placeholder);
    font-size: 0.95rem;
    line-height: 1.4;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-search--inline {
    display: flex;
    flex: 1 1 5rem;
    align-items: center;
    min-width: 4rem;
    margin: 0;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__rendered:empty+.select2-search--inline {
    flex-basis: 100%;
    min-width: 100%;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-search__field {
    min-height: 1.75rem;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.125rem 0;
    border: 0 !important;
    background: transparent;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left !important;
    resize: none;
    box-shadow: none !important;
    overflow: hidden;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-search__field::placeholder {
    color: var(--color-text-placeholder);
}

.select2-container .select2-selection--multiple.app-select2-container .select2-search__field:focus {
    outline: none;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.875rem;
    margin: 0;
    max-width: 100%;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    box-shadow: none;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__display {
    display: block;
    max-width: 100%;
    padding: 0;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove {
    display: inline-flex;
    position: relative !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 0 !important;
    border-radius: var(--radius-pill);
    background: rgba(var(--color-primary-rgb), 0.1);
    color: inherit;
    line-height: 1;
    overflow: hidden;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove::before,
.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.625rem;
    height: 0.125rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove>span {
    display: none;
}

.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove:hover,
.select2-container .select2-selection--multiple.app-select2-container .select2-selection__choice__remove:focus-visible {
    background: rgba(var(--color-primary-rgb), 0.18);
    color: var(--color-primary-text);
    transform: translateY(-1px);
    outline: none;
}

.select2-container.select2-container--focus .select2-selection--multiple.app-select2-container,
.select2-container.select2-container--open .select2-selection--multiple.app-select2-container {
    border-color: var(--color-primary) !important;
    background-color: var(--color-bg-surface);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.20);
}

.select2-container.select2-container--disabled .select2-selection--multiple.app-select2-container {
    background-color: var(--color-bg-surface-low);
    border-color: var(--color-border);
    cursor: not-allowed;
    box-shadow: none;
}

.select2-container.select2-container--disabled .select2-selection--multiple.app-select2-container .select2-search__field {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.select2-container.select2-container--disabled .select2-selection--multiple.app-select2-container .select2-selection__choice {
    border-color: var(--color-border);
    background: var(--color-bg-surface-mid);
    color: var(--color-text-muted);
}

.app-select2-dropdown.select2-dropdown {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.app-select2-dropdown.select2-dropdown .select2-search--dropdown {
    padding: 0.75rem 0.75rem 0.5rem;
    background-color: var(--color-bg-surface);
}

.app-select2-dropdown.select2-dropdown .select2-search__field {
    min-height: 2.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-table-stripe);
    color: var(--color-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.app-select2-dropdown.select2-dropdown .select2-search__field::placeholder {
    color: var(--color-text-placeholder);
}

.app-select2-dropdown.select2-dropdown .select2-search__field:focus {
    border-color: var(--color-primary);
    background-color: var(--color-bg-surface);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.20);
    outline: none;
}

.app-select2-dropdown.select2-dropdown .select2-results__options {
    padding: 0.25rem 0.375rem 0.375rem;
    max-height: 16rem;
}

.app-select2-dropdown.select2-dropdown .select2-results__option {
    padding: 0.625rem 0.75rem;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.35;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.app-select2-dropdown.select2-dropdown .select2-results__option--highlighted[aria-selected],
.app-select2-dropdown.select2-dropdown .select2-results__option--highlighted[aria-selected=true] {
    background-color: var(--color-bg-hover);
    color: var(--color-text);
}

.app-select2-dropdown.select2-dropdown .select2-results__option--selected,
.app-select2-dropdown.select2-dropdown .select2-results__option[aria-selected=true] {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-weight: 600;
}

.app-select2-dropdown.select2-dropdown .select2-results__option--selected.select2-results__option--highlighted[aria-selected=true],
.app-select2-dropdown.select2-dropdown .select2-results__option[aria-selected=true]:hover {
    background-color: rgba(var(--color-primary-rgb), 0.14);
    color: var(--color-primary-text);
}

.app-select2-dropdown.select2-dropdown .select2-results__option--disabled {
    color: var(--color-text-muted);
}

.app-select2-dropdown.select2-dropdown .select2-results__message {
    padding: 0.875rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5b. PICKER TOGGLE (.service-picker-toggle / .picker-toggle)
       shared custom button that mimics a form-control; used in registration
       and reservation forms.
   ═══════════════════════════════════════════════════════════════════════════ */
.service-picker-toggle,
.picker-toggle[data-select-picker-toggle],
.service-picker-toggle:hover,
.picker-toggle[data-select-picker-toggle]:hover {
    min-height: var(--control-min-height);
    padding: var(--control-padding-y) var(--control-padding-x);
    background-color: var(--control-bg);
    background-clip: padding-box;
    border: 1px solid var(--control-border);
    color: var(--text);
    border-radius: var(--app-radius, 0.5rem);
    font-size: var(--control-font-size);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.service-picker-toggle:focus,
.service-picker-toggle:focus-visible,
.service-picker-toggle.show,
.picker-toggle[data-select-picker-toggle]:focus,
.picker-toggle[data-select-picker-toggle]:focus-visible,
.picker-toggle[data-select-picker-toggle].show {
    border-color: var(--color-primary);
    background: var(--control-bg-active);
    color: var(--text);
    box-shadow: var(--control-focus-shadow);
    outline: none;
}

.service-picker-toggle::after,
.picker-toggle::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CARDS (.surface-card, .card)
   ═══════════════════════════════════════════════════════════════════════════ */
.surface-card {
    background: var(--surface);
    border-radius: var(--app-radius, 0.5rem);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.surface-card:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-hover);
}

.card {
    border-radius: var(--app-radius, 0.5rem) !important;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.04);
    background: #fff;
    margin-bottom: 2rem;
    border: none;
}

@media (max-width: 991px) {
    .card {
        padding: 1.25rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PILL LABELS
   ═══════════════════════════════════════════════════════════════════════════ */
.pill-label {
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. BUTTON GROUP (toggle labels)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-group>label.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    border-radius: var(--app-radius, 0.5rem);
    box-shadow: inset 0 0 0 1px #e4e0e0;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-group>label.btn-success {
    background-color: #198754 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-group>label.btn-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-group>label.btn-outline-secondary {
    background-color: transparent !important;
    color: #6c757d !important;
}

.btn-group>label.btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>label.btn:not(:nth-child(2)) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group>input.btn-check:disabled+label.btn {
    background-color: #eeecec !important;
    color: #6b6868 !important;
    box-shadow: inset 0 0 0 1px #dedad9 !important;
    opacity: 0.7;
    pointer-events: auto !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. GLOBAL BUTTONS (.btn-primary-k, .btn-cancel-k, .btn-deactivate-k)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-primary-k,
.btn-cancel-k,
.btn-deactivate-k {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
}

.btn-primary-k i,
.btn-cancel-k i,
.btn-deactivate-k i {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.btn-primary-k {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--app-radius, 0.5rem);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    height: 40px;
    padding: 0 1.2rem;
    box-shadow: 0 4px 12px -2px rgba(var(--color-primary-rgb), 0.35);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-primary-k:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(var(--color-primary-rgb), 0.45);
    color: #fff;
}
.btn-primary-k:disabled,
.btn-primary-k[aria-disabled="true"] {
    background: color-mix(in srgb, var(--primary) 52%, #ffffff);
    border-color: color-mix(in srgb, var(--primary) 42%, #ffffff);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.92);
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
}
.btn-primary-k:focus-visible,
.btn-cancel-k:focus-visible,
.btn-deactivate-k:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.btn-cancel-k {
    background: var(--color-bg-page);
    border: 1.5px solid var(--color-border);
    border-radius: var(--app-radius, 0.5rem);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    height: 40px;
    padding: 0 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.btn-cancel-k:hover {
    border-color: var(--text-variant);
    background: #fff;
    color: var(--text);
}

.btn-cancel-k:disabled,
.btn-cancel-k.is-busy,
.btn-cancel-k[disabled] {
    background: #fff;
    border-color: var(--outline-variant);
    color: var(--text-variant);
    opacity: 1;
}

.btn-deactivate-k {
    background: #fff;
    border: 1.5px solid rgba(var(--color-primary-rgb), 0.45);
    border-radius: var(--app-radius, 0.5rem);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    height: 40px;
    padding: 0 1.05rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-deactivate-k:hover {
    background: var(--color-primary-subtle);
    border-color: var(--color-primary);
    color: var(--color-primary-active);
}

.btn-deactivate-k--disabled,
.btn-deactivate-k--disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
    border-color: rgba(156, 163, 175, 0.45);
    color: var(--text-variant);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. AVATAR SYSTEM (.app-avatar + colour modifiers)
   ═══════════════════════════════════════════════════════════════════════════ */
.app-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.avatar-rose {
    background: #fce7f3;
    color: #9d174d;
}

.avatar-blue {
    background: #dbeafe;
    color: #1e40af;
}

.avatar-purple {
    background: #ede9fe;
    color: #5b21b6;
}

.avatar-green {
    background: #dcfce7;
    color: #166534;
}

.avatar-orange {
    background: #ffedd5;
    color: #9a3412;
}

.avatar-crimson {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.avatar-gray {
    background: #f3f4f6;
    color: #6b7280;
}

.avatar-cyan {
    background: #cffafe;
    color: #0e7490;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10A. AUTHENTICATED TOPBAR CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
.app-avatar--topbar {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.10);
}

.topbar-actions {
    gap: 0.55rem;
}

.topbar-left {
    min-width: 0;
}

.topbar-branch-name {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    max-width: min(52vw, 19rem);
}

.topbar-branch-name > i {
    flex: 0 0 auto;
}

.topbar-branch-name__text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .topbar-branch-name {
        max-width: min(42vw, 11.5rem);
    }
}

.topbar-control {
    padding: 0;
    color: var(--text) !important;
}

.topbar-control.dropdown-toggle::after {
    display: none;
}

.topbar-control:focus-visible {
    outline: none;
}

.topbar-language-switch .dropdown,
.nav-user .dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}

.topbar-language-chip,
.topbar-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--app-radius, 0.5rem);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    transition: background-color 0.16s ease;
}

.topbar-language-chip {
    gap: 0.45rem;
    padding-inline: 0.55rem 0.6rem;
}

.topbar-control:hover .topbar-language-chip,
.topbar-control:hover .topbar-user-chip,
.topbar-control:focus-visible .topbar-language-chip,
.topbar-control:focus-visible .topbar-user-chip,
.topbar-control[aria-expanded="true"] .topbar-language-chip,
.topbar-control[aria-expanded="true"] .topbar-user-chip {
    background: var(--surface);
    box-shadow: none;
}

.topbar-language-chip__code {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text);
}

.topbar-user-chip__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.topbar-user-chip__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.topbar-control__caret {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.nav-user::before {
    height: 22px;
    opacity: 1;
    border-inline-start-color: rgba(28, 27, 27, 0.12);
}

.app-topbar-dropdown {
    min-width: 14rem;
    margin-top: 0.25rem !important;
    padding: 0.35rem;
    border: 1px solid rgba(235, 232, 232, 0.9);
    border-radius: var(--app-radius, 0.5rem);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 32px -16px rgba(28, 27, 27, 0.28);
}

.app-topbar-dropdown--language {
    min-width: 14.5rem;
    padding: 0.4rem;
}

.app-topbar-dropdown__label {
    padding: 0.3rem 0.55rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.app-topbar-dropdown__stack {
    display: grid;
    gap: 0.3rem;
}

.app-topbar-dropdown__form {
    margin: 0;
}

.app-topbar-dropdown__stack--language {
    padding: 0.15rem;
}

.app-topbar-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.55rem 0.5rem;
}

.app-topbar-identity__body {
    min-width: 0;
}

.app-topbar-identity__name {
    font-size: 0.855rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-topbar-dropdown .dropdown-divider {
    margin: 0.15rem 0 0.35rem;
    border-top-color: rgba(235, 232, 232, 0.96);
}

.app-topbar-menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 0;
    border-radius: var(--app-radius, 0.5rem);
    background: transparent;
    padding: 0.5rem 0.6rem;
    color: var(--text);
    text-align: left;
    white-space: normal;
}

.app-topbar-menu-button:hover,
.app-topbar-menu-button:focus-visible {
    background: var(--surface-low);
    color: var(--text);
    box-shadow: none;
}

.app-topbar-menu-button.is-active {
    background: var(--color-primary-subtle);
}

.app-topbar-menu-button--language {
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(235, 232, 232, 0.92);
    border-radius: var(--app-radius, 0.5rem);
    background: rgba(255, 255, 255, 0.94);
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.app-topbar-menu-button--language:hover,
.app-topbar-menu-button--language:focus-visible {
    background: rgba(243, 240, 240, 0.76);
    border-color: rgba(235, 232, 232, 1);
    color: var(--text);
}

.app-topbar-menu-button--language.is-active {
    background: rgba(var(--color-primary-rgb), 0.07);
    border-color: rgba(var(--color-primary-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.app-topbar-menu-button--language .app-topbar-menu-button__meta {
    letter-spacing: 0.06em;
}

.app-topbar-menu-button__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-topbar-menu-button__title {
    font-size: 0.84rem;
    font-weight: 600;
    color: inherit;
}

.app-topbar-menu-button__meta {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.app-topbar-menu-button__icon,
.app-topbar-menu-button__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-topbar-menu-button__icon {
    width: 1.15rem;
    color: var(--text-muted);
    font-size: 1rem;
}

.app-topbar-menu-button__check {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 1rem;
}

.app-topbar-menu-button--danger {
    color: var(--danger);
}

.app-topbar-menu-button--danger .app-topbar-menu-button__icon {
    color: inherit;
}

.app-topbar-menu-button--danger:hover,
.app-topbar-menu-button--danger:focus-visible {
    background: rgba(209, 31, 34, 0.08);
    color: var(--danger);
}

.app-language-flag {
    width: 1.25rem;
    height: 0.9rem;
    border-radius: 0.1rem;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

.app-language-flag--en {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23012169'/%3E%3Cpath d='M0 0L60 40M60 0L0 40' stroke='%23ffffff' stroke-width='8'/%3E%3Cpath d='M0 0L60 40M60 0L0 40' stroke='%23C8102E' stroke-width='3.5'/%3E%3Cpath d='M30 0V40M0 20H60' stroke='%23ffffff' stroke-width='12'/%3E%3Cpath d='M30 0V40M0 20H60' stroke='%23C8102E' stroke-width='8'/%3E%3C/svg%3E");
}

.app-language-flag--id {
    background-image: linear-gradient(to bottom, #ce1126 0 50%, #ffffff 50% 100%);
}

@media (max-width: 767.98px) {
    .topbar-actions {
        gap: 0.35rem;
    }

    .topbar-language-chip,
    .topbar-user-chip {
        min-height: 2rem;
        padding: 0.25rem 0.45rem;
    }

    .topbar-control__caret {
        display: none;
    }

    .app-topbar-dropdown {
        min-width: 13rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. PAGE HEADER & BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Breadcrumb ────────────────────────────── */
.app-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-variant);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.app-breadcrumb-link {
    color: var(--text-variant);
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
}

.app-breadcrumb-link:hover {
    color: var(--color-primary);
}

.app-breadcrumb a {
    color: var(--text-variant);
    text-decoration: none;
    transition: color 0.15s;
}

.app-breadcrumb a:hover {
    color: var(--color-primary);
}

.app-breadcrumb-sep {
    color: rgba(107, 104, 104, 0.72);
    font-size: 0.72rem;
    line-height: 1;
    opacity: 1;
}

.app-breadcrumb-home-icon {
    font-size: 12px;
    opacity: 0.85;
}

.app-breadcrumb-current {
    color: var(--text);
    font-weight: 700;
}

/* ─── Page header shell ───────────────────── */
.app-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.9rem;
    flex-wrap: wrap;
    padding: 0.54rem 0 0.52rem;
    margin-bottom: 0.62rem;
    border-bottom: 1px solid var(--color-border);
}

/* Left column: breadcrumb + title + subtitle */
.app-page-header>div:first-child {
    min-width: 0;
}

.app-page-header h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.app-page-header p {
    margin: 0.12rem 0 0;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-variant);
    line-height: 1.35;
}

/* Right column: action buttons */
.app-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding-bottom: 0;
}

.app-page-header--panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "copy";
    align-items: start;
    gap: 0.25rem;
    padding: 0 0 0.12rem;
    margin-bottom: 0;
    border-bottom: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-page-header--panel.app-page-header--with-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "copy actions";
    align-items: center;
}

.app-page-header-copy {
    grid-area: copy;
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    max-width: none;
}

.app-page-header--panel.app-page-header--with-actions .app-page-header-copy {
    max-width: 100%;
}

.app-page-header-titleblock {
    display: grid;
    gap: 0.2rem;
    position: static;
    width: 100%;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.app-page-header-titleline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.24rem 0.34rem;
    min-width: 0;
}

.app-page-header-path {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.26rem;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(var(--color-primary-rgb), 0.96);
}

.app-page-header-path-link {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: rgba(var(--color-primary-rgb), 0.96);
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.app-page-header-path-link:hover,
.app-page-header-path-link:focus-visible {
    color: var(--color-primary-hover);
}

.app-page-header-path-link--home {
    opacity: 0.92;
}

.app-page-header-path-home-icon {
    font-size: 1.18rem;
}

.app-page-header-path-sep,
.app-page-header-titleline-sep {
    color: rgba(107, 104, 104, 0.44);
    line-height: 1;
    user-select: none;
}

.app-page-header-path-sep {
    font-size: 0.95rem;
    font-weight: 500;
}

.app-page-header-path-sep--terminal {
    margin-right: 0.02rem;
}

.app-page-header-titleline-sep {
    font-size: 1.7rem;
    font-weight: 300;
    margin-top: -0.04em;
}

.app-page-header-titleblock::before {
    content: none;
}

.app-page-header--panel p {
    margin: 0;
    max-width: 42rem;
    font-size: 0.73rem;
    line-height: 1.35;
    color: var(--text-variant);
}

.app-page-header--panel .app-page-header-actions {
    grid-area: actions;
    align-self: center;
    justify-self: end;
    padding-bottom: 0;
}

.app-page-header-actions-surface {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-page-header--panel .app-page-header-actions .btn {
    min-height: 34px;
    border-radius: var(--app-radius);
    padding-inline: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}

/* btn-primary-k inside page header inherits global primary styling — no override needed */
.app-page-header--panel .app-page-header-actions .btn-primary-k {
    height: 34px;
    min-height: 34px;
    font-size: 0.8375rem;
    padding: 0 1rem;
}

@media (max-width: 640px) {
    .app-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.68rem;
        padding: 0.7rem 0 0.72rem;
    }

    .app-page-header--panel {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "actions";
        padding: 0 0 0.48rem;
        gap: 0.48rem;
        border-radius: 0;
    }

    .app-page-header-titleblock {
        width: 100%;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .app-page-header-titleline {
        gap: 0.22rem 0.56rem;
    }

    .app-page-header-path {
        font-size: 0.86rem;
    }

    .app-page-header-path-home-icon {
        font-size: 1.02rem;
    }

    .app-page-header-titleline-sep {
        font-size: 1.35rem;
    }

    .app-page-header-actions {
        width: auto;
        justify-self: start;
    }

    .app-page-header-actions-surface {
        flex-wrap: wrap;
    }

    .app-page-header-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .app-page-header--panel .app-page-header-actions .btn {
        flex: 1 1 220px;
        border-radius: 2rem;
    }

    .app-page-header--panel .app-page-header-actions .btn-primary-k {
        flex: 0 0 auto;
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. ICON COLOUR VARIANTS (reusable across settings tiles, cards, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */
.icon-rose {
    background: #fff1f2;
    color: #e11d48;
}

.icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.icon-orange {
    background: #fff7ed;
    color: #ea580c;
}

.icon-green {
    background: #f0fdf4;
    color: #16a34a;
}

.icon-dark {
    background: #1f2937;
    color: #ffffff;
}

.icon-crimson {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
    13. BOOTSTRAP / SHELL COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary button */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Outline primary button */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Links */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-light);
}

/* Shared brand image helpers */
.app-brand-lockup-image,
.app-brand-mark-image {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
}

.app-brand-surface {
    background: rgba(255, 255, 255, 0.96);
    border-radius: calc(var(--app-radius, 0.5rem) + 0.25rem);
    box-shadow: 0 18px 40px -28px rgba(18, 16, 16, 0.42);
}

.app-logo-mark-surface {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-logo-mark-surface::before {
    content: "";
    position: absolute;
    inset: var(--app-logo-mark-badge-inset, 0.24rem);
    border-radius: var(--app-logo-mark-badge-radius, calc(var(--app-radius, 0.5rem) - 1px));
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transition: opacity 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.app-logo-mark-surface>.app-brand-mark-image,
.app-logo-mark-surface>.appearance-theme-mark,
.app-logo-mark-surface>.login-theme-mark,
.app-logo-mark-surface>.branch-theme-mark {
    position: relative;
    z-index: 1;
    transform-origin: center;
    transition: transform 0.18s ease;
}

.app-logo-mark-surface[data-logo-mark-state="light-badge"]::before {
    opacity: 1;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 78%, white 22%), 0 14px 24px -18px rgba(15, 23, 42, 0.46);
}

.app-logo-mark-surface[data-logo-mark-state="light-badge"]>.app-brand-mark-image,
.app-logo-mark-surface[data-logo-mark-state="light-badge"]>.appearance-theme-mark,
.app-logo-mark-surface[data-logo-mark-state="light-badge"]>.login-theme-mark,
.app-logo-mark-surface[data-logo-mark-state="light-badge"]>.branch-theme-mark {
    transform: scale(var(--app-logo-mark-badge-scale, 0.78));
}

/* Active nav / sidebar item accent */
.side-nav-item.active>.side-nav-link,
.side-nav-item>.side-nav-link.active,
.side-nav-item>.side-nav-link:hover {
    color: var(--color-primary) !important;
}

/* Shell layout + footer contract */
body,
.wrapper {
    min-height: 100vh;
}

.content-page {
    min-height: calc(100vh - var(--theme-topbar-height));
    min-height: calc(100dvh - var(--theme-topbar-height));
    display: flex;
    flex-direction: column;
}

.app-main-content {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: var(--app-main-content-stable-height, 0px);
    width: 100%;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    position: relative;
    transition: min-height 0.18s ease;
}

.app-main-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 245, 242, 0.96) 100%),
        radial-gradient(circle at top center, rgba(var(--color-primary-rgb, 165, 24, 26), 0.08) 0%, transparent 62%);
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

.app-main-content > * {
    transition: opacity 0.18s ease, transform 0.22s ease;
    will-change: opacity, transform;
}

.app-main-content[data-main-swap-stage="masking"]::after,
.app-main-content[data-main-swap-stage="revealing"]::after {
    visibility: visible;
    transition-delay: 0s;
}

.app-main-content[data-main-swap-stage="masking"]::after {
    opacity: 1;
}

.app-main-content[data-main-swap-stage="masking"] > * {
    opacity: 0;
    transform: translateY(8px);
}

.app-main-content[data-main-swap-stage="revealing"]::after {
    opacity: 0;
}

.app-main-content[data-main-swap-stage="revealing"] > * {
    opacity: 1;
    transform: translateY(0);
}

.app-shell-footer.footer {
    margin: auto -0.625rem 0;
    flex-shrink: 0;
    padding: 0.85rem 0;
    color: var(--text-variant);
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid rgba(235, 232, 232, 0.95);
    backdrop-filter: blur(10px);
}

.app-shell-footer__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: clamp(1rem, 1.6vw, 1.5rem);
}

.app-shell-footer__left,
.app-shell-footer__right {
    min-width: 0;
}

.app-shell-footer__right {
    text-align: right;
}

@media (max-width: 767.98px) {
    .app-shell-footer__inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .app-shell-footer__right {
        text-align: center;
    }
}

/* ── Shared Bootstrap toast contract ─────────────────────────────────────── */

/* Entry animations */
@keyframes app-toast-in-right {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes app-toast-in-up {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Container — desktop: top-right */
.app-toast-stack {
    position: fixed !important;
    top: 1.25rem;
    right: 1.25rem;
    bottom: auto !important;
    left: auto !important;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    width: min(22rem, calc(100vw - 2.5rem));
}

.app-toast-stack .toast {
    pointer-events: auto;
}

/* Toast shell */
.app-toast {
    --app-toast-accent: var(--color-info, #1a6fb5);
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border, #ebe8e8);
    border-radius: var(--app-radius, 8px);
    box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    animation: app-toast-in-right 0.2s ease forwards;
}

/* Left accent bar */
.app-toast-bar {
    width: 4px;
    flex-shrink: 0;
    background: var(--app-toast-accent);
}

/* Content row */
.app-toast-inner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem 0.85rem;
    flex: 1;
    min-width: 0;
}

.app-toast-icon {
    color: var(--app-toast-accent);
    font-size: 1rem;
    flex-shrink: 0;
}

.app-toast-message {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text, #1c1b1b);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.app-toast-close {
    flex-shrink: 0;
    opacity: 0.4;
    box-shadow: none !important;
    padding: 0;
    margin-left: 0.2rem;
}

.app-toast-close:hover,
.app-toast-close:focus {
    opacity: 0.8;
    box-shadow: none !important;
}

/* Type variants */
.app-toast--success {
    --app-toast-accent: var(--color-success, #22a75b);
}

.app-toast--error {
    --app-toast-accent: var(--color-danger, #d11f22);
}

.app-toast--warning {
    --app-toast-accent: var(--color-warning, #e39a09);
}

.app-toast--info {
    --app-toast-accent: var(--color-info, #1a6fb5);
}

/* Mobile: bottom-center */
@media (max-width: 640px) {
    .app-toast-stack {
        top: auto !important;
        bottom: 1rem !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: calc(100vw - 2rem);
    }

    .app-toast {
        animation: app-toast-in-up 0.2s ease forwards;
    }
}

/* Badge / pill primary */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}

/* Progress bar */
.progress-bar.bg-primary {
    background-color: var(--color-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. SHARED TABLE & LIST COMPONENTS
   Used across user-management, employee-management, registration-list, ICD
   list and any other FooTable page. Centralized here so pages don't need to
   cross-load each other's CSS files.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page content grid (management pages) ── */
.app-data-page {
    display: grid;
    gap: 0;
}

.app-data-page>*+* {
    margin-top: var(--app-page-section-gap);
}

.app-data-page>.app-page-header+* {
    margin-top: 0.42rem;
}

.app-data-page>.app-page-header {
    margin-bottom: 0;
}

/* ── Muted row ── */
.row-muted {
    opacity: 0.55;
}

/* ── Staff / person cell ── */
/* inline-flex so the FooTable expand toggle flows on the same line */
.cell-person {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    vertical-align: middle;
}

/* Name-only cell (role/menu first column): two stacked lines, inline-level */
.cell-name-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    vertical-align: middle;
    min-width: 0;
}

.cell-info {
    min-width: 0;
}

.cell-primary {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-secondary {
    font-size: 0.78rem;
    color: var(--text-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

/* ── Role / category badge ── */
.badge-role {
    display: inline-block;
    background: #f3f0f0;
    color: var(--text);
    border-radius: var(--app-radius, 0.5rem);
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-role--empty {
    background: transparent;
    color: var(--text-variant);
}

/* ── Language cell ── */
.cell-lang {
    font-size: 0.88rem;
    color: var(--text);
}

/* ── Status pills ── */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--app-radius, 0.5rem);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* User / employee variants */
.status-pill--active {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}

.status-pill--inactive {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.status-pill--locked {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.status-pill--deleted {
    background: #F5F5F4;
    color: #57534E;
    border: 1px solid #D6D3D1;
}

.status-pill--archived {
    background: #F5F5F4;
    color: #57534E;
    border: 1px solid #D6D3D1;
}

/* Registration variants */
.status-pill--waiting {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.status-pill--progress {
    background: #EFF6FF;
    color: #1E40AF;
    border: 1px solid #BFDBFE;
}

.status-pill--finished {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}

.status-pill--recall {
    background: #F5F3FF;
    color: #5B21B6;
    border: 1px solid #DDD6FE;
}

.status-pill--unknown {
    background: #F5F5F4;
    color: #57534E;
    border: 1px solid #D6D3D1;
}

/* ── Category badge (employee table) ── */
.badge-category {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--app-radius, 0.5rem);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-category--doctor {
    background: #EFF6FF;
    color: #1E40AF;
    border: 1px solid #BFDBFE;
}

.badge-category--nurse {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}

.badge-category--pharmacist {
    background: #FDF4FF;
    color: #86198F;
    border: 1px solid #F0ABFC;
}

.badge-category--allied {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.badge-category--nonmedical {
    background: #F5F5F4;
    color: #57534E;
    border: 1px solid #D6D3D1;
}

/* ── Actions cell ── */
.cell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--app-radius, 0.5rem);
    background: var(--color-bg-table-stripe);
    border: none;
    color: var(--color-text-muted);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    background: var(--color-bg-hover);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary-border), 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
    transform: translateY(-1px);
}

.app-topbar .sidenav-toggle-button.btn-icon:hover,
.app-topbar .sidenav-toggle-button.btn-icon:focus-visible {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary-border), 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
}

.btn-icon--restore {
    color: #166534;
    background: #dcfce7;
}

.btn-icon--restore:hover,
.btn-icon--restore:focus-visible {
    background: var(--color-success);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-xs);
}

.btn-icon--disabled,
.btn-icon--disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   Page Loader — full-page branded loading overlay
   ══════════════════════════════════════════════════════════════════════ */

.app-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-page, #ffffff);
    visibility: visible;
    transition: opacity 0.42s ease, visibility 0s linear 0.42s, background-color 0.3s ease;
    opacity: 1;
}

.app-page-loader[hidden] {
    display: none !important;
}

.app-page-loader--exit {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-page-loader--entering {
    opacity: 0;
}

.app-page-loader--overlay {
    background: rgba(248, 245, 242, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.app-page-loader__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-page-loader--entering .app-page-loader__stage,
.app-page-loader--exit .app-page-loader__stage {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
}

.app-page-loader__brand {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-page-loader__mark-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb, 165, 24, 26), 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-page-loader__mark {
    width: 30px;
    height: 30px;
}

.app-page-loader__ring {
    position: absolute;
    inset: -4px;
    border: 2.5px solid rgba(var(--color-primary-rgb, 165, 24, 26), 0.12);
    border-top-color: var(--color-primary);
    border-right-color: rgba(var(--color-primary-rgb, 165, 24, 26), 0.42);
    border-radius: 50%;
    animation: app-loader-spin 0.82s linear infinite;
}

@keyframes app-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-shell-swap-indicator {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 9999;
    height: 4px;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0.72);
    transform-origin: center top;
    background: linear-gradient(
        90deg,
        rgba(var(--color-primary-rgb, 165, 24, 26), 0.18) 0%,
        rgba(var(--color-primary-rgb, 165, 24, 26), 0.92) 36%,
        rgba(var(--color-primary-rgb, 165, 24, 26), 0.58) 100%
    );
    box-shadow: 0 0 0 rgba(var(--color-primary-rgb, 165, 24, 26), 0);
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, visibility 0s linear 180ms;
    will-change: opacity, transform;
}

.app-shell-swap-indicator::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 18%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.16) 82%,
        transparent 100%
    );
    transform: translateX(-100%);
}

.app-shell-swap-indicator.is-active,
.app-shell-swap-indicator.htmx-request {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    box-shadow: 0 2px 12px rgba(var(--color-primary-rgb, 165, 24, 26), 0.22);
    transition-delay: 0s;
}

.app-shell-swap-indicator.is-active::before,
.app-shell-swap-indicator.htmx-request::before {
    opacity: 1;
    animation: app-shell-swap-indicator-sheen 0.95s linear infinite;
}

@keyframes app-shell-swap-indicator-sheen {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* ── Responsive overrides ── */
@media (max-width: 640px) {
    .cell-actions {
        gap: 4px;
        justify-content: center;
    }

    .cell-person {
        max-width: 100%;
    }

    .cell-primary,
    .cell-secondary {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
}


/* ── Password visibility toggle ────────────────────────────────────────────
   .pw-field wraps any password input + a toggle button.
   Works in both the authenticated shell (base.jte) and standalone pages (login).
   JS strategy: single delegated click listener on document — see base.jte.
   ────────────────────────────────────────────────────────────────────────── */
.pw-field {
    position: relative;
}

/* Push text away from the toggle button; suppress Edge native reveal icon */
.pw-field input {
    padding-right: 2.5rem !important;
}

.pw-field input::-ms-reveal {
    display: none;
}

/* Hidden by default — shown only when input has a value (JS adds .pw-has-value to .pw-field) */
.pw-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    margin: 0;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 1rem;
    transition: color 0.15s, opacity 0.12s;
    user-select: none;
    opacity: 0;
    pointer-events: none;
}

.pw-field.pw-has-value .pw-toggle {
    opacity: 1;
    pointer-events: auto;
}

.pw-toggle:hover {
    color: var(--text-variant, #6b7280);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 3px;
}