:root {
    --brand-color: #0f766e;
    --brand-rgb: 15 118 110;
    --brand-50: color-mix(in srgb, var(--brand-color) 8%, white);
    --brand-100: color-mix(in srgb, var(--brand-color) 12%, white);
    --brand-200: color-mix(in srgb, var(--brand-color) 20%, white);
    --brand-300: color-mix(in srgb, var(--brand-color) 34%, white);
    --brand-400: color-mix(in srgb, var(--brand-color) 58%, white);
    --brand-500: var(--brand-color);
    --brand-600: color-mix(in srgb, var(--brand-color) 88%, black);
    --brand-700: color-mix(in srgb, var(--brand-color) 74%, black);
    --brand-800: color-mix(in srgb, var(--brand-color) 62%, black);
    --brand-900: color-mix(in srgb, var(--brand-color) 48%, black);

    --success-color: #0f9f79;
    --warning-color: #e19a2c;
    --danger-color: #d24b49;
    --info-color: #287dbf;

    --success-soft: color-mix(in srgb, var(--success-color) 10%, white);
    --warning-soft: color-mix(in srgb, var(--warning-color) 12%, white);
    --danger-soft: color-mix(in srgb, var(--danger-color) 10%, white);
    --info-soft: color-mix(in srgb, var(--info-color) 10%, white);

    --neutral-0: #ffffff;
    --neutral-25: #fcfdfd;
    --neutral-50: #f6f8f9;
    --neutral-100: #edf1f3;
    --neutral-150: #e3e8eb;
    --neutral-200: #d8dfe4;
    --neutral-300: #c0cad2;
    --neutral-400: #8a98a6;
    --neutral-500: #647281;
    --neutral-600: #4a5663;
    --neutral-700: #33404c;
    --neutral-800: #1f2b36;
    --neutral-900: #111b24;

    --color-bg: linear-gradient(180deg, var(--neutral-25) 0%, var(--brand-50) 42%, var(--neutral-50) 100%);
    --color-bg-elevated: linear-gradient(180deg, color-mix(in srgb, var(--neutral-0) 92%, transparent), color-mix(in srgb, var(--brand-50) 62%, white));
    --color-surface: color-mix(in srgb, var(--neutral-0) 88%, transparent);
    --color-surface-strong: color-mix(in srgb, var(--neutral-0) 94%, transparent);
    --color-surface-muted: color-mix(in srgb, var(--brand-50) 45%, var(--neutral-0));
    --color-surface-inverse: var(--neutral-900);
    --color-text: var(--neutral-900);
    --color-text-soft: var(--neutral-600);
    --color-text-muted: var(--neutral-500);
    --color-text-inverse: var(--neutral-0);
    --color-border: color-mix(in srgb, var(--neutral-400) 24%, transparent);
    --color-border-strong: color-mix(in srgb, var(--neutral-500) 34%, transparent);
    --color-divider: color-mix(in srgb, var(--neutral-400) 18%, transparent);
    --color-overlay: color-mix(in srgb, var(--neutral-900) 34%, transparent);

    --status-requested-bg: color-mix(in srgb, var(--warning-color) 10%, white);
    --status-requested-text: color-mix(in srgb, var(--warning-color) 76%, black);
    --status-confirmed-bg: color-mix(in srgb, var(--info-color) 10%, white);
    --status-confirmed-text: color-mix(in srgb, var(--info-color) 72%, black);
    --status-checkedin-bg: color-mix(in srgb, var(--brand-color) 14%, white);
    --status-checkedin-text: color-mix(in srgb, var(--brand-color) 72%, black);
    --status-completed-bg: color-mix(in srgb, var(--success-color) 12%, white);
    --status-completed-text: color-mix(in srgb, var(--success-color) 74%, black);
    --status-noshow-bg: color-mix(in srgb, var(--danger-color) 10%, white);
    --status-noshow-text: color-mix(in srgb, var(--danger-color) 78%, black);
    --status-cancelled-bg: color-mix(in srgb, var(--neutral-500) 12%, white);
    --status-cancelled-text: color-mix(in srgb, var(--neutral-700) 88%, black);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.5rem;
    --space-10: 3rem;
    --space-11: 4rem;

    --radius-xs: 0.75rem;
    --radius-sm: 1rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.5rem;
    --radius-xl: 1.75rem;
    --radius-2xl: 2rem;
    --radius-pill: 999px;

    --shadow-sm: 0 12px 30px color-mix(in srgb, var(--brand-900) 10%, transparent);
    --shadow-md: 0 20px 44px color-mix(in srgb, var(--brand-900) 12%, transparent);
    --shadow-lg: 0 28px 70px color-mix(in srgb, var(--brand-900) 16%, transparent);
    --shadow-focus: 0 0 0 0.28rem color-mix(in srgb, var(--brand-300) 42%, transparent);

    --font-sans-latin: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
    --font-sans-arabic: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", sans-serif;
    --font-display-latin: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
    --font-display-arabic: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", sans-serif;
    --font-body: var(--font-sans-latin);
    --font-display: var(--font-display-latin);

    --text-xs: 0.78rem;
    --text-sm: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.1rem;
    --text-xl: 1.28rem;
    --text-2xl: 1.6rem;
    --text-3xl: 2rem;
    --text-4xl: clamp(2.4rem, 4.8vw, 4.6rem);

    --leading-tight: 1.08;
    --leading-snug: 1.25;
    --leading-normal: 1.55;
    --leading-relaxed: 1.75;
    --tracking-tight: -0.035em;
    --tracking-normal: -0.015em;
    --tracking-wide: 0.08em;

    --container-xs: 28rem;
    --container-sm: 42rem;
    --container-md: 64rem;
    --container-lg: 76rem;
    --container-xl: 88rem;
    --sidebar-width: 18.75rem;
    --transition-fast: 160ms ease;
    --transition-base: 220ms ease;
}

[dir="rtl"] {
    --font-body: var(--font-sans-arabic);
    --font-display: var(--font-display-arabic);
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --leading-normal: 1.7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: linear-gradient(180deg, color-mix(in srgb, var(--neutral-900) 94%, black), color-mix(in srgb, var(--brand-900) 20%, var(--neutral-900)));
        --color-bg-elevated: linear-gradient(180deg, color-mix(in srgb, var(--neutral-800) 94%, transparent), color-mix(in srgb, var(--brand-900) 22%, var(--neutral-800)));
        --color-surface: color-mix(in srgb, var(--neutral-800) 86%, transparent);
        --color-surface-strong: color-mix(in srgb, var(--neutral-800) 94%, transparent);
        --color-surface-muted: color-mix(in srgb, var(--neutral-700) 70%, transparent);
        --color-surface-inverse: var(--neutral-0);
        --color-text: var(--neutral-25);
        --color-text-soft: var(--neutral-200);
        --color-text-muted: var(--neutral-300);
        --color-text-inverse: var(--neutral-900);
        --color-border: color-mix(in srgb, var(--neutral-300) 18%, transparent);
        --color-border-strong: color-mix(in srgb, var(--neutral-200) 28%, transparent);
        --color-divider: color-mix(in srgb, var(--neutral-200) 12%, transparent);
        --color-overlay: color-mix(in srgb, black 48%, transparent);
        --shadow-sm: 0 12px 28px color-mix(in srgb, black 36%, transparent);
        --shadow-md: 0 20px 48px color-mix(in srgb, black 42%, transparent);
        --shadow-lg: 0 30px 76px color-mix(in srgb, black 48%, transparent);
    }
}

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--brand-color) 12%, transparent), transparent 26rem),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--info-color) 8%, transparent), transparent 30rem);
    z-index: -1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
}

p,
ul,
ol,
dl {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

::selection {
    background: color-mix(in srgb, var(--brand-color) 24%, transparent);
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.card,
.panel-table,
.empty-state,
.site-card,
.site-surface,
.site-booking-card,
.site-alert,
.site-footer-card,
.site-hero-panel,
.site-stat,
.landing-browser-card,
.landing-phone-card,
.detail-item,
.flash,
.notice,
.auth-panel,
.admin-panel,
.site-state-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
}

.card,
.panel-table,
.empty-state,
.site-card,
.site-surface,
.site-booking-card,
.site-alert,
.site-footer-card,
.site-hero-panel,
.site-stat,
.landing-browser-card,
.landing-phone-card,
.detail-item,
.auth-panel,
.admin-panel,
.site-state-card {
    padding: var(--space-6);
}

.page-meta,
.muted,
.table-subtle,
.field-hint,
.site-card-copy,
.site-section-subtitle,
.site-empty,
.landing-hero-note,
.landing-pricing-note {
    color: var(--color-text-muted);
}

.page-head,
.card-head,
.toolbar-row,
.table-actions,
.pagination,
.pagination-links,
.form-actions,
.summary-grid,
.metric-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.page-head,
.card-head,
.toolbar-row,
.pagination,
.summary-grid {
    justify-content: space-between;
}

.section-stack,
.settings-tab-panel,
.report-line-list,
.settings-placeholder-list,
.site-booking-form,
.site-form-grid,
.site-detail-list,
.site-booking-summary,
.site-footer-list,
.site-footer-grid,
.site-contact-grid,
.site-location-grid,
.site-hours-grid,
.site-about-grid,
.site-reviews-grid,
.site-trust-grid,
.site-cards,
.site-doctors-grid,
.landing-proof-grid,
.landing-card-grid,
.landing-feature-grid,
.landing-step-grid,
.landing-pricing-grid,
.landing-faq-grid,
.landing-mockup-grid,
.landing-browser-screen,
.landing-metric-row,
.landing-board,
.grid-metrics,
.grid-two,
.grid-three,
.detail-grid,
.form-grid,
.print-meta-grid,
.print-totals {
    display: grid;
    gap: var(--space-5);
}

.grid-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-two {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
}

.grid-three,
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.form-grid,
.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field,
.site-field {
    display: grid;
    gap: var(--space-2);
}

.field label,
.site-field label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-soft);
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-strong);
    color: var(--color-text);
    padding: 0.95rem 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-400);
    box-shadow: var(--shadow-focus);
}

input:invalid:not(:focus):not(:placeholder-shown),
select:invalid:not(:focus),
textarea:invalid:not(:focus):not(:placeholder-shown),
.site-field.is-invalid input,
.site-field.is-invalid select,
.site-field.is-invalid textarea {
    border-color: color-mix(in srgb, var(--danger-color) 44%, transparent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--danger-color) 14%, transparent);
}

textarea {
    min-height: 7.5rem;
    resize: vertical;
}

input[type="color"] {
    min-height: 3.3rem;
    padding: 0.45rem;
}

button,
.button,
.button-ghost,
.button-danger,
.site-button,
.site-book-button,
.site-secondary-button,
.site-whatsapp-link,
.site-chip,
.app-logout,
.site-footer-link,
.auth-link,
.tab,
.accordion-trigger,
.pill,
.badge {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.button,
button[type="submit"],
.site-button,
.site-book-button,
.site-whatsapp-link,
.app-logout,
.auth-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.9rem 1.15rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--brand-600), color-mix(in srgb, var(--brand-500) 82%, var(--info-color)));
    color: var(--color-text-inverse);
    font-weight: 700;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--brand-700) 26%, transparent);
    cursor: pointer;
}

.button:hover,
button[type="submit"]:hover,
.site-button:hover,
.site-book-button:hover,
.site-whatsapp-link:hover,
.app-logout:hover,
.auth-primary:hover,
.button-ghost:hover,
.button-danger:hover,
.site-secondary-button:hover,
.site-chip:hover,
.site-footer-link:hover,
.tab:hover,
.accordion-trigger:hover {
    transform: translateY(-1px);
}

.button-ghost,
.site-secondary-button,
.site-chip,
.site-footer-link,
.auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.05rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-strong) 90%, transparent);
    color: var(--color-text);
    font-weight: 650;
    cursor: pointer;
}

.button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--danger-color) 24%, transparent);
    border-radius: var(--radius-pill);
    background: var(--danger-soft);
    color: color-mix(in srgb, var(--danger-color) 78%, black);
    font-weight: 700;
    cursor: pointer;
}

.pill,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 2rem;
    padding: 0.38rem 0.78rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-soft);
}

.badge-success,
.status-appointment-completed,
.status-appointment-checked_in,
.status-invoice-paid {
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
    border-color: color-mix(in srgb, var(--success-color) 18%, transparent);
}

.badge-danger,
.status-appointment-no_show,
.status-invoice-unpaid {
    background: var(--status-noshow-bg);
    color: var(--status-noshow-text);
    border-color: color-mix(in srgb, var(--danger-color) 18%, transparent);
}

.badge-muted {
    background: color-mix(in srgb, var(--neutral-300) 16%, var(--neutral-0));
    color: var(--color-text-soft);
    border-color: color-mix(in srgb, var(--neutral-400) 16%, transparent);
}

.status-appointment-requested {
    background: var(--status-requested-bg);
    color: var(--status-requested-text);
    border-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
}

.status-appointment-confirmed {
    background: var(--status-confirmed-bg);
    color: var(--status-confirmed-text);
    border-color: color-mix(in srgb, var(--info-color) 20%, transparent);
}

.status-appointment-cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
    border-color: color-mix(in srgb, var(--neutral-500) 18%, transparent);
}

.status-invoice-partial {
    background: var(--status-confirmed-bg);
    color: var(--status-confirmed-text);
    border-color: color-mix(in srgb, var(--info-color) 20%, transparent);
}

.flash,
.notice {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.flash-success,
.notice.success {
    background: var(--success-soft);
    color: color-mix(in srgb, var(--success-color) 78%, black);
    border-color: color-mix(in srgb, var(--success-color) 16%, transparent);
}

.flash-error,
.notice.error {
    background: var(--danger-soft);
    color: color-mix(in srgb, var(--danger-color) 82%, black);
    border-color: color-mix(in srgb, var(--danger-color) 16%, transparent);
}

.flash-close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    cursor: pointer;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-strong) 90%, transparent);
    color: var(--color-text-soft);
    font-weight: 700;
}

.tab.is-active,
.tab[aria-selected="true"] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-color) 14%, white), color-mix(in srgb, var(--brand-color) 8%, white));
    color: var(--brand-800);
    border-color: color-mix(in srgb, var(--brand-color) 20%, transparent);
}

.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.accordion-trigger::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-700);
}

.accordion-item.is-open .accordion-trigger::after {
    content: "−";
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.accordion-panel-inner {
    overflow: hidden;
}

.accordion-item.is-open .accordion-panel {
    grid-template-rows: 1fr;
}

.empty-state {
    gap: var(--space-3);
    justify-items: start;
}

.empty-state::before {
    content: "";
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-color) 18%, white), color-mix(in srgb, var(--info-color) 16%, white));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-color) 14%, transparent);
}

.search-form {
    display: flex;
    align-items: end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.form-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
}

.table-wrap {
    overflow: auto;
    scrollbar-width: thin;
}

table {
    width: 100%;
    min-width: 44rem;
    border-collapse: separate;
    border-spacing: 0;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--color-surface-strong) 94%, transparent);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

th,
td {
    padding: 1rem 0.9rem;
    border-bottom: 1px solid var(--color-divider);
    text-align: start;
    vertical-align: top;
}

tbody tr {
    transition: background var(--transition-fast), transform var(--transition-fast);
}

tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--brand-50) 36%, transparent);
}

tbody tr:hover,
tbody tr.is-hovered {
    background: color-mix(in srgb, var(--brand-100) 78%, transparent);
}

.detail-item {
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-strong) 90%, transparent);
}

.detail-item strong {
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}

.pagination {
    flex-wrap: wrap;
    align-items: center;
}

.table-actions,
.pagination-links {
    flex-wrap: wrap;
}

.mono {
    font-family: "Consolas", "SFMono-Regular", monospace;
    white-space: pre-wrap;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms ease, transform 520ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.modal-backdrop,
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.modal,
.dialog {
    width: min(100% - 2rem, 34rem);
    margin: auto;
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}

.print-sheet {
    gap: var(--space-6);
}

.print-letterhead,
.print-letterhead-brand,
.print-totals {
    display: flex;
    gap: var(--space-4);
}

.print-letterhead {
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.print-letterhead-logo {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.35rem;
    object-fit: cover;
}

.print-letterhead-copy {
    display: grid;
    gap: var(--space-1);
    text-align: end;
}

.print-meta-grid,
.print-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .grid-metrics,
    .grid-three,
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .card,
    .panel-table,
    .empty-state,
    .site-card,
    .site-surface,
    .site-booking-card,
    .site-alert,
    .site-footer-card,
    .site-hero-panel,
    .site-stat,
    .landing-browser-card,
    .landing-phone-card,
    .detail-item,
    .auth-panel,
    .admin-panel,
    .site-state-card {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .grid-metrics,
    .grid-three,
    .summary-grid,
    .form-grid,
    .detail-grid,
    .print-meta-grid,
    .print-totals {
        grid-template-columns: 1fr;
    }

    .page-head,
    .card-head,
    .toolbar-row,
    .search-form,
    .summary-grid {
        flex-direction: column;
        align-items: stretch;
    }

    table:not(.print-table) {
        min-width: 0;
    }

    table:not(.print-table) thead {
        display: none;
    }

    table:not(.print-table),
    table:not(.print-table) tbody,
    table:not(.print-table) tr,
    table:not(.print-table) td {
        display: block;
        width: 100%;
    }

    table:not(.print-table) tr {
        margin-bottom: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    table:not(.print-table) td {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--color-divider);
    }

    table:not(.print-table) td:last-child {
        border-bottom: 0;
    }

    table:not(.print-table) td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
    }
}

@media print {
    html,
    body {
        background: white !important;
        color: black !important;
    }

    body::before,
    .print-hidden,
    .app-sidebar,
    .app-topbar,
    .app-backdrop,
    .site-header,
    .site-footer,
    .site-backdrop,
    .site-menu-toggle {
        display: none !important;
    }

    .card,
    .panel-table,
    .empty-state,
    .site-card,
    .site-surface,
    .site-booking-card,
    .site-alert,
    .site-footer-card,
    .site-hero-panel,
    .site-stat,
    .landing-browser-card,
    .landing-phone-card,
    .detail-item,
    .flash,
    .notice,
    .auth-panel,
    .admin-panel,
    .site-state-card {
        box-shadow: none !important;
        border: 0 !important;
        background: white !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}