/* DentyCore shared component layer.
 * Page styles may define layout, while shared controls inherit their visual
 * contract from this file and the centralized design tokens.
 */

::selection {
    background: var(--primary);
    color: var(--text-on-primary);
}

/* Brand assets and public theme control */
.dentycore-logo {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}

.dentycore-logo__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.dentycore-logo__image--dark {
    display: none;
}

html.dark .dentycore-logo__image--light {
    display: none;
}

html.dark .dentycore-logo__image--dark {
    display: block;
}

.dentycore-logo--flat,
.dentycore-logo--3d {
    aspect-ratio: 512 / 171;
}

.dentycore-logo--symbol {
    width: 48px;
    aspect-ratio: 1;
}

.public-theme-toggle {
    position: fixed;
    z-index: var(--z-fixed);
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: var(--transition-colors);
}

.public-theme-toggle:hover {
    border-color: var(--info-border);
    background: var(--info-surface);
    color: var(--primary);
}

/* Consistent keyboard focus across interactive elements */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Cards */
:where(.card, .stat-card, .ui-card) {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

/* Application page composition */
.app-page {
    width: min(100%, 80rem);
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
    color: var(--text-primary);
}

.app-page > * {
    min-width: 0;
    max-width: 100%;
}

.app-page--wide {
    width: min(100%, 90rem);
}

.app-page--narrow,
.narrow-page {
    width: min(100%, 56rem);
    margin-inline: auto;
}

:where(.page-header, .page-heading, .billing-header, .med-page-header) {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

:where(.page-header, .page-heading, .billing-header, .med-page-header) > :first-child {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 24rem;
}

:where(.page-header, .page-heading, .billing-header, .med-page-header) h1,
.page-title {
    margin: 0;
    color: var(--text-primary) !important;
    font-size: clamp(var(--font-size-xl), 2.3vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
}

:where(.page-header, .page-heading, .billing-header, .med-page-header) p:not(.eyebrow, .page-eyebrow),
.page-subtitle {
    max-width: 52rem;
    margin-top: var(--space-1);
    color: var(--text-secondary) !important;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

:where(.eyebrow, .page-eyebrow) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--primary) !important;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.01em;
}

:where(.page-actions, .billing-actions) {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

:where(.page-actions, .billing-actions) > :where(a, button, form) {
    max-width: 100%;
}

:where(.section-card, .page-card, .form-card, .app-page .panel, .app-page .billing-card) {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

:where(.table-card, .app-page .table-panel) {
    overflow: hidden;
    padding: 0;
}

.section-header {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section-title,
.section-header h2,
.section-card > h2,
.page-card > h2 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.section-description,
.section-header p {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-body);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
}

.stat-card {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
}

.stat-card__label {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.stat-card__value {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.stat-card__icon,
.page-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: var(--info-surface);
    color: var(--primary);
    font-size: var(--font-size-lg);
}

.stat-card__icon--accent {
    border: 1px solid color-mix(in srgb, var(--secondary) 28%, var(--border));
    background: color-mix(in srgb, var(--secondary) 10%, var(--surface));
    color: color-mix(in srgb, var(--secondary) 78%, var(--text-primary));
}

:where(.filter-bar, .filters-card, .app-page .billing-filter) {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.filter-bar__grow {
    min-width: min(100%, 16rem);
    flex: 1 1 18rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.form-section + .form-section {
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
    padding-top: var(--space-6);
}

.form-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.form-section__title i {
    color: var(--primary);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
    padding-top: var(--space-5);
}

.confirmation-card {
    width: min(100%, 36rem);
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-8);
    background: var(--surface);
    color: var(--text-primary);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.confirmation-card__icon {
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-card);
    background: var(--warning-surface);
    color: var(--warning-text);
    font-size: var(--font-size-2xl);
}

.confirmation-card--danger .confirmation-card__icon {
    background: var(--danger-surface);
    color: var(--danger-text);
}

.confirmation-card h1,
.confirmation-card h2 {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.confirmation-card p {
    margin-top: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.settings-tile {
    display: flex;
    min-height: 13rem;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-colors), transform var(--duration-fast) var(--ease-standard);
}

.settings-tile:hover {
    border-color: var(--info-border);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.settings-tile h2,
.settings-tile h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.settings-tile p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.settings-tile__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

/* Transitional bridge for application templates that still carry layout
 * utility classes. Theme and brand color decisions remain token-controlled. */
.app-page :where(.bg-white) {
    background-color: var(--surface) !important;
}

.app-page :where(.bg-slate-50, .bg-gray-50) {
    background-color: var(--surface-muted) !important;
}

.app-page :where(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--text-primary) !important;
}

.app-page :where(.text-slate-600, .text-slate-500, .text-slate-400, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--text-secondary) !important;
}

.app-page :where(.border-slate-100, .border-slate-200, .border-gray-100, .border-gray-200) {
    border-color: var(--border) !important;
}

.app-page :where(.text-teal-500, .text-teal-600, .text-teal-700, .text-teal-800) {
    color: var(--primary) !important;
}

.app-page :where(.bg-teal-500, .bg-teal-600, .bg-teal-700) {
    background-color: var(--primary) !important;
}

.app-page :where(.bg-teal-50) {
    background-color: var(--info-surface) !important;
}

.app-page :where(.border-teal-100, .border-teal-200, .border-teal-300) {
    border-color: var(--info-border) !important;
}

.app-page :where(.hover\:text-teal-600, .hover\:text-teal-700):hover {
    color: var(--primary-hover) !important;
}

.app-page :where(.hover\:bg-teal-50, .hover\:bg-teal-100):hover {
    background-color: var(--info-surface) !important;
}

.app-page :where(.hover\:bg-teal-700):hover {
    background-color: var(--primary-hover) !important;
}

html.dark .app-page :where(.dark\:text-teal-300, .dark\:text-teal-400) {
    color: var(--info-text) !important;
}

html.dark .app-page :where(.dark\:bg-teal-950\/30, .dark\:bg-teal-950\/40, .dark\:bg-teal-950\/50, .dark\:bg-teal-950\/60) {
    background-color: var(--info-surface) !important;
}

html.dark .app-page :where(.dark\:border-teal-800, .dark\:border-teal-900, .dark\:border-teal-900\/60) {
    border-color: var(--info-border) !important;
}

/* Buttons */
:where(
    .btn,
    .ui-button,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-dark,
    .btn-ghost,
    .btn-save-primary,
    .btn-teal-action,
    .btn-add-patient,
    .button-primary,
    .button-muted,
    .button-discard
) {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors), transform var(--duration-fast) var(--ease-standard);
}

/* Semantic classes deliberately win over legacy utility dimensions. */
:is(
    .btn,
    .ui-button,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-dark,
    .btn-ghost,
    .btn-save-primary,
    .btn-teal-action,
    .btn-add-patient,
    .button-primary,
    .button-muted,
    .button-discard
) {
    min-height: var(--control-height);
    border-radius: var(--radius-control);
}

:where(
    .btn,
    .ui-button,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-dark,
    .btn-ghost,
    .btn-save-primary,
    .btn-teal-action,
    .btn-add-patient,
    .button-primary,
    .button-muted,
    .button-discard
):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px);
}

:where(
    .btn,
    .ui-button,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-dark,
    .btn-ghost,
    .btn-save-primary,
    .btn-teal-action,
    .btn-add-patient,
    .button-primary,
    .button-muted,
    .button-discard
):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

:where(
    .btn,
    .ui-button,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-dark,
    .btn-ghost,
    .btn-save-primary,
    .btn-teal-action,
    .btn-add-patient,
    .button-primary,
    .button-muted,
    .button-discard
):disabled,
:where(.btn, .ui-button, .button, [class*="btn-"])[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
    transform: none;
}

:where(.btn, .ui-button, .button, [class*="btn-"])[aria-busy="true"],
:where(.btn, .ui-button, .button, [class*="btn-"]).is-loading {
    cursor: wait;
    pointer-events: none;
}

:where(.btn, .ui-button, .button, [class*="btn-"])[aria-busy="true"]::after,
:where(.btn, .ui-button, .button, [class*="btn-"]).is-loading::after {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    content: "";
    animation: dentycore-spin 700ms linear infinite;
}

:where(.btn-primary, .ui-button-primary, .btn-dark, .btn-save-primary, .btn-teal-action, .btn-add-patient, .button-primary) {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
    box-shadow: var(--shadow-xs);
}

:where(.btn-primary, .ui-button-primary, .btn-dark, .btn-save-primary, .btn-teal-action, .btn-add-patient, .button-primary):hover:not(:disabled) {
    border-color: var(--primary-hover) !important;
    background: var(--primary-hover) !important;
    color: var(--text-on-primary) !important;
}

:where(.btn-primary, .ui-button-primary, .btn-dark, .btn-save-primary, .btn-teal-action, .btn-add-patient, .button-primary) :where(i, span) {
    color: inherit !important;
}

:is(.btn-secondary, .ui-button-secondary, .button-muted) {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
}

:is(.btn-secondary, .ui-button-secondary, .button-muted):hover:not(:disabled),
:is(.btn-ghost, .ui-button-ghost):hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text-primary);
}

:is(.btn-outline, .ui-button-outline) {
    border-color: var(--primary);
    background: transparent;
    color: var(--primary);
}

:is(.btn-outline, .ui-button-outline):hover:not(:disabled) {
    background: var(--info-surface);
    color: var(--primary-hover);
}

:is(.btn-danger, .ui-button-danger, .button-discard) {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

:is(.btn-danger, .ui-button-danger, .button-discard):hover:not(:disabled) {
    border-color: var(--danger-hover);
    background: var(--danger-hover);
    color: #ffffff;
}

:is(.btn-success, .ui-button-success) {
    border-color: var(--success);
    background: var(--success);
    color: #ffffff;
}

:is(.btn-success, .ui-button-success):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--success) 82%, #000000);
    background: color-mix(in srgb, var(--success) 82%, #000000);
}

:is(.btn-ghost, .ui-button-ghost) {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
}

:where(.btn-small, .button-small) {
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

:where(.button-large, .btn-large) {
    min-height: var(--control-height-lg);
    padding-inline: var(--space-6);
}

/* Form controls */
:where(
    .form-control,
    .input-engraved,
    .ui-input,
    .ui-select,
    .ui-textarea,
    .med-input,
    .billing-input,
    select.timezone-select,
    .form-field input:not([type="checkbox"]):not([type="radio"]),
    .form-field select,
    .form-field textarea
) {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    outline: none;
    transition: var(--transition-colors);
}

:is(.ui-input, .ui-select, .ui-textarea, .med-input, .billing-input) {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    outline: none;
    transition: var(--transition-colors);
}

html.dark :is(.ui-input, .ui-select, .ui-textarea, .med-input, .billing-input) {
    border-color: var(--input-border);
    background: var(--surface);
    color: var(--text-primary);
}

:is(.ui-input, .ui-select, .ui-textarea, .med-input, .billing-input):focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

:is(.ui-input, .ui-select, .ui-textarea, .med-input, .billing-input):disabled {
    border-color: var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 1;
}

:is(textarea.form-control, textarea.input-engraved, textarea.ui-input, .ui-textarea, textarea.med-input, textarea.billing-input, .form-field textarea) {
    min-height: 6rem;
    resize: vertical;
}

:where(
    .form-control,
    .input-engraved,
    .ui-input,
    .ui-select,
    .ui-textarea,
    .med-input,
    .billing-input,
    select.timezone-select,
    .form-field input,
    .form-field select,
    .form-field textarea
)::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

:where(
    .form-control,
    .input-engraved,
    .ui-input,
    .ui-select,
    .ui-textarea,
    .med-input,
    .billing-input,
    select.timezone-select,
    .form-field input:not([type="checkbox"]):not([type="radio"]),
    .form-field select,
    .form-field textarea
):focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

:where(
    .form-control,
    .input-engraved,
    .ui-input,
    .ui-select,
    .ui-textarea,
    .med-input,
    .billing-input,
    select.timezone-select,
    .form-field input,
    .form-field select,
    .form-field textarea
):disabled,
:where(.form-control, .input-engraved, .ui-input, .ui-select, .ui-textarea, .med-input, .billing-input, select.timezone-select)[readonly] {
    border-color: var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 1;
}

:where(.form-control, .input-engraved, .ui-input, .ui-select, .ui-textarea, .med-input, .billing-input, select.timezone-select)[aria-invalid="true"],
:where(.form-control, .input-engraved, .ui-input, .ui-select, .ui-textarea, .med-input, .billing-input, select.timezone-select).is-invalid {
    border-color: var(--danger);
}

:where(input[type="checkbox"], input[type="radio"], .ui-check, .billing-checkbox) {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    border-color: var(--input-border);
    accent-color: var(--primary);
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.checkbox-field label {
    margin: 0;
}

input[type="file"]::file-selector-button {
    min-height: 2rem;
    margin-inline-end: var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    background: var(--info-surface);
    color: var(--info-text);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

:where(.ui-label, .form-group label, .form-field label, .field > label, .field > legend, fieldset > legend, .med-label, .draft-field label) {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

:where(.help-text, .field-help, .form-hint) {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

:where(.field-error, .errorlist) {
    margin-top: var(--space-1);
    color: var(--danger-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.errorlist {
    padding-inline-start: var(--space-5);
}

/* Tom Select: one token-backed theme for appointments and account time zones */
.ts-wrapper {
    width: 100%;
    color: var(--text-primary);
    direction: inherit;
}

.ts-wrapper .ts-control {
    min-height: var(--control-height-lg) !important;
    align-items: center;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-control) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    padding: var(--space-2) var(--space-3) !important;
    box-shadow: none !important;
    text-align: start;
    transition: var(--transition-colors);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control:focus-within {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control .item {
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: var(--font-size-sm) !important;
    text-align: start;
}

.ts-wrapper .ts-control > input::placeholder {
    color: var(--text-muted);
}

.ts-wrapper.single .ts-control::after {
    right: unset !important;
    left: unset !important;
    inset-inline-end: var(--space-4) !important;
    border-color: var(--text-secondary) transparent transparent !important;
}

.ts-wrapper .ts-dropdown,
.ts-dropdown {
    z-index: var(--z-dropdown);
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-control) !important;
    background: var(--surface-raised) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
    direction: inherit;
    text-align: start;
}

.ts-dropdown :where(.option, .no-results, .create) {
    padding: var(--space-2) var(--space-3) !important;
    color: var(--text-primary) !important;
    font-family: inherit;
    font-size: var(--font-size-sm) !important;
}

.ts-dropdown :where(.option, .create).active,
.ts-dropdown :where(.option, .create):hover {
    background: var(--info-surface) !important;
    color: var(--info-text) !important;
}

.ts-dropdown .optgroup-header {
    border-top: 1px solid var(--border) !important;
    background: var(--surface-muted) !important;
    color: var(--text-secondary) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold) !important;
}

.ts-dropdown .highlight {
    border-radius: var(--radius-sm) !important;
    background: var(--info-border) !important;
    color: var(--info-text) !important;
}

.ts-dropdown .no-results {
    color: var(--text-secondary) !important;
    text-align: center;
}

/* Tables, table actions, and pagination */
:where(.table-wrap, .table-responsive, .responsive-table) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

:where(.ui-table, .data-table, .billing-table, .med-table) {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    color: var(--text-primary);
    text-align: start;
}

:where(.ui-table, .data-table, .billing-table, .med-table) th {
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    white-space: nowrap;
}

:where(.ui-table, .data-table, .billing-table, .med-table) td {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    vertical-align: middle;
}

:where(.ui-table, .data-table, .billing-table, .med-table) tbody tr {
    transition: background-color var(--duration-fast) var(--ease-standard);
}

:where(.ui-table, .data-table, .billing-table, .med-table) tbody tr:hover {
    background: var(--surface-hover);
}

:where(.ui-table, .data-table, .billing-table, .med-table) caption {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: start;
}

/* Shared compact list cards. Tables keep their native layout until the
   component itself becomes narrow, including when a fixed sidebar is open. */
.mobile-list-container {
    container-name: mobile-list;
    container-type: inline-size;
}

.mobile-list-card__field-label,
.mobile-list-card__mobile-only,
.mobile-list-card__action-label {
    display: none;
}

.mobile-list-card__identity-layout {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.mobile-list-card__identity-copy {
    min-width: 0;
}

.mobile-list-card__avatar {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--info-border);
    border-radius: var(--radius-pill);
    background: var(--info-surface);
    color: var(--info-text);
}

.mobile-list-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-list-card__title {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.mobile-list-card__desktop-subtitle {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.settings-page-actions,
.settings-form-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

@container mobile-list (max-width: 920px) {
    .mobile-list-table-wrap {
        overflow-x: visible;
    }

    .mobile-list-table.mobile-list-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .mobile-list-table thead {
        display: none;
    }

    .mobile-list-table tbody {
        display: grid;
        width: 100%;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .mobile-list-table .mobile-list-card {
        display: grid;
        min-width: 0;
        gap: var(--space-3);
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        padding: var(--space-4);
        background: var(--surface);
        box-shadow: var(--shadow-xs);
    }

    .mobile-list-table .mobile-list-card:hover {
        background: var(--surface);
    }

    .mobile-list-table .mobile-list-card > td {
        min-width: 0;
        border: 0;
        padding: 0;
        color: var(--text-primary);
        text-align: start;
        overflow-wrap: anywhere;
    }

    .mobile-list-card__field-label {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tight);
    }

    .mobile-list-card__mobile-only {
        display: inline-flex;
    }

    .mobile-list-card__desktop-only,
    .mobile-list-card__desktop-subtitle {
        display: none !important;
    }

    .mobile-list-card__meta {
        color: var(--text-secondary) !important;
        font-size: var(--font-size-sm) !important;
    }

    .mobile-list-card__footer {
        border-top: 1px solid var(--border) !important;
        padding-top: var(--space-3) !important;
    }

    .mobile-list-card__actions {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
    }

    .mobile-list-card__actions > :where(a, button, form),
    .mobile-list-card__actions form > button {
        min-height: var(--control-height);
        touch-action: manipulation;
    }

    .mobile-list-card__actions.mobile-list-card__actions--grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card__actions--grid > :where(a, button, form, details),
    .mobile-list-card__actions--grid form > button,
    .mobile-list-card__actions--grid details > summary {
        width: 100%;
        min-width: 0;
    }

    .mobile-list-card__actions--grid > :where(a, button),
    .mobile-list-card__actions--grid form > button,
    .mobile-list-card__actions--grid details > summary {
        display: inline-flex;
        min-height: var(--control-height);
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        text-align: center;
        white-space: normal;
    }

    .mobile-list-card__actions--grid details[open] {
        grid-column: 1 / -1;
    }

    .mobile-list-card__footer :where(a, button) {
        display: inline-flex;
        min-height: var(--control-height);
        align-items: center;
        gap: var(--space-2);
        touch-action: manipulation;
    }

    .mobile-list-card__action-label {
        display: inline !important;
    }

    .mobile-list-table .mobile-list-table__empty-row,
    .mobile-list-table .mobile-list-table__empty-row > td {
        display: block;
        width: 100%;
    }

    .mobile-list-table .mobile-list-table__empty-row > td {
        border: 0;
        padding: var(--space-6) var(--space-4);
    }

    .mobile-list-card--patient {
        grid-template-areas:
            "identity identity"
            "age phone"
            "gender gender"
            "footer footer";
        grid-template-columns: minmax(4.5rem, 0.7fr) minmax(0, 1.3fr);
    }

    .mobile-list-card--patient .mobile-list-card__identity {
        grid-area: identity;
    }

    .mobile-list-card--patient .mobile-list-card__patient-age {
        grid-area: age;
    }

    .mobile-list-card--patient .mobile-list-card__patient-phone {
        grid-area: phone;
    }

    .mobile-list-card--patient .mobile-list-card__patient-gender {
        grid-area: gender;
    }

    .mobile-list-card--patient .mobile-list-card__footer {
        grid-area: footer;
    }

    .mobile-list-card--invoice {
        grid-template-areas:
            "number number number date date date"
            "patient patient patient patient patient patient"
            "total total paid paid remaining remaining"
            "status status status action action action";
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-number {
        grid-area: number;
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-date {
        grid-area: date;
        text-align: end;
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-patient {
        grid-area: patient;
        padding-bottom: var(--space-1);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-total {
        grid-area: total;
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-paid {
        grid-area: paid;
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-remaining {
        grid-area: remaining;
    }

    .mobile-list-card--invoice .mobile-list-card__stat {
        border: 1px solid var(--border);
        border-radius: var(--radius-control);
        padding: var(--space-2) !important;
        background: var(--surface-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
    }

    .mobile-list-card--invoice .mobile-list-card__invoice-status {
        grid-area: status;
        display: flex;
        align-items: center;
    }

    .mobile-list-card--invoice .mobile-list-card__footer {
        grid-area: action;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .mobile-list-card--invoice :is(.mobile-list-card__invoice-status, .mobile-list-card__footer) {
        border-top: 1px solid var(--border) !important;
        padding-top: var(--space-3) !important;
    }

    .mobile-list-card--appointment {
        grid-template-areas:
            "patient patient"
            "date time"
            "doctor doctor"
            "status status"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--appointment .mobile-list-card__appointment-patient {
        grid-area: patient;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
    }

    .mobile-list-card--appointment .mobile-list-card__appointment-date {
        grid-area: date;
    }

    .mobile-list-card--appointment .mobile-list-card__appointment-time {
        grid-area: time;
    }

    .mobile-list-card--appointment .mobile-list-card__appointment-doctor {
        grid-area: doctor;
    }

    .mobile-list-card--appointment .mobile-list-card__appointment-status {
        grid-area: status;
    }

    .mobile-list-card--appointment .mobile-list-card__footer {
        grid-area: footer;
    }

    .mobile-list-card--staff {
        grid-template-areas:
            "identity identity"
            "phone email"
            "roles roles"
            "status status"
            "footer footer";
        grid-template-columns: minmax(6.5rem, 0.75fr) minmax(0, 1.25fr);
    }

    .mobile-list-card--staff .mobile-list-card__identity {
        grid-area: identity;
    }

    .mobile-list-card--staff .mobile-list-card__staff-phone {
        grid-area: phone;
    }

    .mobile-list-card--staff .mobile-list-card__staff-email {
        grid-area: email;
    }

    .mobile-list-card--staff .mobile-list-card__staff-roles {
        grid-area: roles;
    }

    .mobile-list-card--staff .mobile-list-card__staff-status {
        grid-area: status;
    }

    .mobile-list-card--staff .mobile-list-card__footer {
        grid-area: footer;
    }

    .mobile-list-card--permission {
        grid-template-areas:
            "identity identity"
            "roles roles"
            "direct direct"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--permission .mobile-list-card__identity { grid-area: identity; }
    .mobile-list-card--permission .mobile-list-card__permission-roles { grid-area: roles; }
    .mobile-list-card--permission .mobile-list-card__permission-direct { grid-area: direct; }
    .mobile-list-card--permission .mobile-list-card__footer { grid-area: footer; }

    .mobile-list-card--medication {
        grid-template-areas:
            "identity identity"
            "form status"
            "categories categories"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--medication .mobile-list-card__identity { grid-area: identity; }
    .mobile-list-card--medication .mobile-list-card__medication-form { grid-area: form; }
    .mobile-list-card--medication .mobile-list-card__medication-categories { grid-area: categories; }
    .mobile-list-card--medication .mobile-list-card__medication-status { grid-area: status; }
    .mobile-list-card--medication .mobile-list-card__footer { grid-area: footer; }

    .mobile-list-card--procedure {
        grid-template-areas:
            "name name"
            "category scope"
            "price status"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--procedure .mobile-list-card__procedure-name { grid-area: name; }
    .mobile-list-card--procedure .mobile-list-card__procedure-category { grid-area: category; }
    .mobile-list-card--procedure .mobile-list-card__procedure-scope { grid-area: scope; }
    .mobile-list-card--procedure .mobile-list-card__procedure-price { grid-area: price; }
    .mobile-list-card--procedure .mobile-list-card__procedure-status { grid-area: status; }
    .mobile-list-card--procedure .mobile-list-card__footer { grid-area: footer; }

    .mobile-list-card--procedure-category {
        grid-template-areas:
            "name count"
            "status updated"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--procedure-category .mobile-list-card__category-name { grid-area: name; }
    .mobile-list-card--procedure-category .mobile-list-card__category-count { grid-area: count; }
    .mobile-list-card--procedure-category .mobile-list-card__category-status { grid-area: status; }
    .mobile-list-card--procedure-category .mobile-list-card__category-updated { grid-area: updated; }
    .mobile-list-card--procedure-category .mobile-list-card__footer { grid-area: footer; }

    .mobile-list-card--payment-method {
        grid-template-areas:
            "name code"
            "reference status"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--payment-method .mobile-list-card__payment-name { grid-area: name; }
    .mobile-list-card--payment-method .mobile-list-card__payment-code { grid-area: code; }
    .mobile-list-card--payment-method .mobile-list-card__payment-reference { grid-area: reference; }
    .mobile-list-card--payment-method .mobile-list-card__payment-status { grid-area: status; }
    .mobile-list-card--payment-method .mobile-list-card__footer { grid-area: footer; }

    .mobile-list-card--discount-limit {
        grid-template-areas:
            "identity identity"
            "item invoice"
            "status footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--discount-limit .mobile-list-card__discount-identity { grid-area: identity; }
    .mobile-list-card--discount-limit .mobile-list-card__discount-item { grid-area: item; }
    .mobile-list-card--discount-limit .mobile-list-card__discount-invoice { grid-area: invoice; }
    .mobile-list-card--discount-limit .mobile-list-card__discount-status { grid-area: status; }
    .mobile-list-card--discount-limit .mobile-list-card__footer {
        grid-area: footer;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .mobile-list-card--discount-limit :is(.mobile-list-card__discount-status, .mobile-list-card__footer) {
        border-top: 1px solid var(--border) !important;
        padding-top: var(--space-3) !important;
    }

    .mobile-list-card__limit-values {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1);
    }

    .mobile-list-card__limit-values bdi,
    .mobile-list-card__amount {
        white-space: nowrap;
    }

    .mobile-list-card--prescription {
        grid-template-areas:
            "number date"
            "creator creator"
            "count status"
            "footer footer";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-list-card--prescription .mobile-list-card__prescription-number { grid-area: number; }
    .mobile-list-card--prescription .mobile-list-card__prescription-date { grid-area: date; }
    .mobile-list-card--prescription .mobile-list-card__prescription-creator { grid-area: creator; }
    .mobile-list-card--prescription .mobile-list-card__prescription-count { grid-area: count; }
    .mobile-list-card--prescription .mobile-list-card__prescription-status { grid-area: status; }
    .mobile-list-card--prescription .mobile-list-card__footer { grid-area: footer; }
}

.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

:where(.action-button, .icon-button) {
    display: inline-flex;
    min-width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: var(--space-2);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-colors);
}

:where(.action-button, .icon-button):hover {
    background: var(--info-surface);
    color: var(--info-text);
}

.icon-button.danger,
.action-button.action-cancel:hover {
    background: var(--danger-surface);
    color: var(--danger-text);
}

.icon-button.success {
    background: var(--success-surface);
    color: var(--success-text);
}

.action-button.action-no-show:hover {
    background: var(--warning-surface);
    color: var(--warning-text);
}

:where(.table-link, .pagination a, .pagination-link) {
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.pagination-link,
.pagination a {
    display: inline-flex;
    min-height: var(--control-height-sm);
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    transition: var(--transition-colors);
}

.pagination-link:hover,
.pagination a:hover {
    border-color: var(--info-border);
    background: var(--info-surface);
}

.pagination-current {
    display: inline-flex;
    min-height: var(--control-height-sm);
    align-items: center;
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    background: var(--primary);
    color: var(--text-on-primary);
    font-weight: var(--font-weight-bold);
}

/* Badges and statuses */
:is(.badge, .status-chip, .ui-badge, .status-badge, .status-pill, .status, .disease-badge) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    background: var(--neutral-surface);
    color: var(--neutral-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

:is(.badge-success, .status-success, .status-completed, .status-paid, .status-active, .status-pill.active) {
    border-color: var(--success-border);
    background: var(--success-surface);
    color: var(--success-text);
}

:is(.badge-warning, .status-warning, .status-pending, .status-partial, .status-partially_refunded) {
    border-color: var(--warning-border);
    background: var(--warning-surface);
    color: var(--warning-text);
}

:is(.badge-danger, .status-danger, .status-cancelled, .status-void, .status-refunded, .allergy-badge-severe) {
    border-color: var(--danger-border);
    background: var(--danger-surface);
    color: var(--danger-text);
}

:is(.badge-info, .status-info, .status-confirmed, .status-issued, .status-scheduled) {
    border-color: var(--info-border);
    background: var(--info-surface);
    color: var(--info-text);
}

:is(.badge-neutral, .status-neutral, .status-no_show, .status-draft, .status-stopped, .status-pill.inactive) {
    border-color: var(--neutral-border);
    background: var(--neutral-surface);
    color: var(--neutral-text);
}

.allergy-badge-moderate {
    border: 1px solid var(--warning-border) !important;
    background: var(--warning-surface) !important;
    color: var(--warning-text) !important;
}

/* Alerts and validation summaries */
:is(.alert, .ui-alert, .form-alert) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    transition: opacity var(--duration-normal) var(--ease-standard);
}

:is(.alert-success, .ui-alert-success) {
    border-color: var(--success-border);
    background: var(--success-surface);
    color: var(--success-text);
}

:is(.alert-warning, .ui-alert-warning) {
    border-color: var(--warning-border);
    background: var(--warning-surface);
    color: var(--warning-text);
}

:is(.alert-danger, .alert-error, .ui-alert-danger, .form-alert) {
    border-color: var(--danger-border);
    background: var(--danger-surface);
    color: var(--danger-text);
}

:is(.alert-info, .ui-alert-info) {
    border-color: var(--info-border);
    background: var(--info-surface);
    color: var(--info-text);
}

:is(.alert, .ui-alert, .form-alert) ul {
    margin: 0;
    padding-inline-start: var(--space-5);
}

.system-messages {
    display: grid;
    width: min(100%, 52rem);
    margin-inline: auto;
    margin-block-end: var(--space-5);
}

.system-message {
    align-items: center;
    transition: opacity var(--duration-normal) var(--ease-standard),
        transform var(--duration-normal) var(--ease-standard);
}

.system-message.is-dismissing {
    opacity: 0;
    transform: translateY(-0.25rem);
}

.system-message__text {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.system-message__dismiss {
    display: inline-grid;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    flex: 0 0 var(--control-height-sm);
    place-items: center;
    margin-block: calc(var(--space-2) * -1);
    margin-inline-end: calc(var(--space-2) * -1);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    opacity: 0.78;
    transition: var(--transition-colors);
}

.system-message__dismiss:hover {
    background: color-mix(in srgb, currentColor 9%, transparent);
    opacity: 1;
}

.system-message__dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

/* Modal surfaces. Positioning stays with each modal implementation. */
.modal-backdrop {
    background: var(--overlay);
    backdrop-filter: blur(3px);
    transition: opacity var(--duration-normal) var(--ease-standard);
}

:where(.modal-content, .modal-card, .ui-modal__dialog) {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-card) !important;
    background: var(--surface-raised) !important;
    color: var(--text-primary);
    box-shadow: var(--shadow-md) !important;
    transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
}

.modal-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: min(100%, 620px);
    max-height: min(90vh, 760px);
}

.modal-card > header,
.modal-card > footer,
.modal-card > form > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
}

.modal-card > header {
    border-bottom: 1px solid var(--border);
}

.modal-card > header h2 {
    margin-top: var(--space-1);
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.modal-card > header p:not(.eyebrow) {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.modal-body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
}

.modal-card > footer,
.modal-card > form > footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.modal-close {
    display: inline-flex;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: var(--surface-muted);
    color: var(--text-secondary);
    transition: var(--transition-colors);
}

.modal-close:hover {
    background: var(--danger-surface);
    color: var(--danger-text);
}

body.modal-open {
    overflow: hidden;
}

/* Dropdowns, popovers, and tooltips */
:where(.ui-dropdown, .ui-popover, .dropdown-menu, .popover) {
    z-index: var(--z-dropdown);
    min-width: 12rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: var(--space-2);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

:where(.ui-dropdown, .dropdown-menu) :where(a, button) {
    display: flex;
    width: 100%;
    min-height: var(--control-height-sm);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    text-align: start;
}

:where(.ui-dropdown, .dropdown-menu) :where(a, button):hover {
    background: var(--surface-hover);
}

:where(.ui-tooltip, [role="tooltip"]) {
    z-index: var(--z-tooltip);
    max-width: 18rem;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: var(--brand-navy);
    color: #ffffff;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-body);
    box-shadow: var(--shadow-sm);
}

html.dark :where(.ui-tooltip, [role="tooltip"]) {
    background: var(--surface-muted);
    color: var(--text-primary);
}

/* Empty and loading states */
.empty-state,
.empty-cell {
    padding: var(--space-10) var(--space-5) !important;
    color: var(--text-secondary);
    text-align: center !important;
}

.empty-state:not(td) {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface);
}

.empty-state > i,
.empty-cell > i {
    display: block;
    margin: 0 auto var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-2xl);
}

.empty-cell {
    color: var(--text-secondary) !important;
}

.empty-state__icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    margin-inline: auto;
    margin-block-end: var(--space-3);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-card);
    background: var(--info-surface);
    color: var(--info-text);
    font-size: var(--font-size-xl);
}

.empty-state__title,
:where(.empty-state, .empty-cell) > p:first-of-type {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

.empty-state__description,
:where(.empty-state, .empty-cell) > p + p {
    max-width: 36rem;
    margin: var(--space-2) auto 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
}

.empty-state__actions :where(a, button) {
    min-width: 9rem;
}

.ui-skeleton,
.loading-skeleton {
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-hover) 50%, var(--surface-muted) 75%);
    background-size: 200% 100%;
    animation: dentycore-skeleton 1.25s ease-in-out infinite;
}

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

@keyframes dentycore-skeleton {
    to { background-position: -200% 0; }
}

@media (max-width: 1024px) {
    :where(.page-header, .page-heading, .billing-header, .med-page-header) {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(.page-header, .page-heading, .billing-header, .med-page-header) > :first-child {
        width: 100%;
        flex-basis: auto;
    }

    :where(.page-actions, .billing-actions) {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    :where(.page-header, .page-heading, .billing-header, .med-page-header) {
        align-items: stretch;
        gap: var(--space-4);
    }

    :where(.page-actions, .billing-actions) > :where(a, button, form) {
        flex: 1 1 9rem;
    }

    :where(.page-actions, .billing-actions) form > button {
        width: 100%;
    }

    :where(.section-card, .page-card, .form-card, .app-page .panel, .app-page .billing-card) {
        padding: var(--space-4);
    }

    :where(.table-card, .app-page .table-panel) {
        padding: 0;
    }

    :where(.filter-bar, .filters-card, .app-page .billing-filter) {
        align-items: stretch;
        flex-direction: column;
    }

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

    .form-actions > :where(a, button) {
        flex: 1 1 8rem;
    }

    .confirmation-card {
        padding: var(--space-6) var(--space-4);
    }

    .modal-card > header,
    .modal-card > footer,
    .modal-card > form > footer,
    .modal-body {
        padding-inline: var(--space-4);
    }

    .modal-card > footer,
    .modal-card > form > footer {
        flex-wrap: wrap;
    }

    .modal-card > footer :where(.btn, .button, .ui-button),
    .modal-card > form > footer :where(.btn, .button, .ui-button) {
        flex: 1 1 8rem;
    }

    .pagination {
        gap: var(--space-1);
    }

    .settings-page-actions,
    .settings-form-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-page-actions > :where(a, button, form),
    .settings-form-actions > :where(a, button, form),
    .settings-page-actions form > button,
    .settings-form-actions form > button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    :where(.page-actions, .billing-actions) > :where(a, button, form) {
        width: 100%;
        flex-basis: 100%;
    }

    :where(.page-actions, .billing-actions) > :where(a, button),
    :where(.page-actions, .billing-actions) form > button {
        width: 100%;
    }
}

@media (max-width: 340px) {
    .settings-page-actions,
    .settings-form-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (pointer: coarse) {
    :where(.btn-small, .button-small, .btn-sm, .action-button, .action-icon, .icon-button, .modal-close, .system-message__dismiss) {
        min-width: var(--control-height-lg);
        min-height: var(--control-height-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    :where(.ui-skeleton, .loading-skeleton),
    :where(.btn, .ui-button, .button, [class*="btn-"])[aria-busy="true"]::after,
    :where(.btn, .ui-button, .button, [class*="btn-"]).is-loading::after {
        animation: none;
    }
}