/* MudBlazor ↔ SyncCore token bridge (Kapella admin aesthetics) */

/* —— Global density & typography —— */
.mud-typography-body1 {
    font-size: var(--app-ds-font-size-base);
}

.mud-typography-body2 {
    font-size: var(--app-ds-font-size-sm);
}

/* —— Buttons & CTA hierarchy —— */
.mud-button-root {
    border-radius: var(--app-ds-radius-md);
    font-weight: 600;
    text-transform: none;
    transition: background-color var(--app-ds-transition), box-shadow var(--app-ds-transition);
}

.mud-button-filled-primary:hover {
    background-color: var(--app-ds-color-primary-hover) !important;
}

.mud-button-filled-primary:active {
    background-color: var(--app-ds-color-primary-active) !important;
}

.mud-button-outlined {
    border-color: var(--app-ds-border) !important;
}

.mud-button-outlined:hover {
    background-color: var(--app-ds-nav-hover-bg) !important;
}

/* —— Dividers —— */
.mud-divider {
    border-color: var(--app-ds-divider) !important;
    opacity: 1;
}

/* Tables: see app-ds-tables.css (use class app-ds-data-table or AppDataTable) */

/* —— Form fields —— */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--app-ds-input-border) !important;
    border-radius: var(--app-ds-radius-sm);
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--app-ds-input-border-hover) !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--app-ds-color-primary) !important;
    border-width: 1px !important;
}

.mud-input > input::placeholder,
.mud-input-slot::placeholder {
    color: var(--app-ds-input-placeholder);
}

.mud-input-label {
    color: var(--app-ds-text-secondary) !important;
    font-size: var(--app-ds-font-size-sm);
}

.mud-input-control-input-container {
    background: var(--app-ds-input-bg);
}

/* —— Alerts —— */
.mud-alert {
    border-radius: var(--app-ds-radius-md);
    font-size: var(--app-ds-font-size-base);
}

.mud-alert-outlined {
    border-width: 1px;
}

/* —— Paper / elevation surfaces —— */
.mud-paper {
    background-color: var(--app-ds-bg-surface);
    color: var(--app-ds-text-secondary);
}

/* Sidebar nav states: see app-shell.css (.app-shell__nav) */

/* —— App bar —— */
.mud-appbar {
    background-color: var(--app-ds-bg-surface) !important;
    color: var(--app-ds-text-primary) !important;
}

/* —— Breadcrumbs —— */
.mud-breadcrumbs .mud-breadcrumb-item a,
.mud-breadcrumbs .mud-breadcrumb-item {
    font-size: var(--app-ds-font-size-sm);
    color: var(--app-ds-text-secondary);
}

.mud-breadcrumbs .mud-breadcrumb-item a:hover {
    color: var(--app-ds-color-primary);
}

/* —— Snackbar —— */
.mud-snackbar {
    border-radius: var(--app-ds-radius-md);
}

/* —— Dialog —— */
.mud-dialog {
    border-radius: var(--app-ds-radius-md);
}