/* Admin global styles — design tokens are injected via <style> in AdminLayout */

html, body {
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

/* Pre-hydration dark mode — prevents white flash on full-page reload.
   The data-mud-dark attribute is set synchronously by the inline script in
   AppRoot.razor before any CSS renders. MudBlazor takes over once the
   interactive circuit connects. */
html[data-mud-dark],
html[data-mud-dark] body {
    background-color: #121212;
    color-scheme: dark;
}

/* Utility for breadcrumb spacing */
.breadcrumb-bar {
    margin-bottom: 1rem;
}

/* Smooth theme transition */
.mud-theme-provider {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Responsive table helpers ──────────────────────────────────────────────── */

/* Hide non-essential columns on small screens */
@media (max-width: 600px) {
    .col-hide-xs {
        display: none !important;
    }
}

@media (max-width: 960px) {
    .col-hide-sm {
        display: none !important;
    }
}

.crud-filters-drawer {
    width: min(100vw, 420px);
}

/* Force drawer filter items to stack vertically regardless of viewport breakpoints */
.crud-filters-drawer .mud-grid-item {
    flex-basis: 100% !important;
    max-width: 100% !important;
}

/* Responsive pagination toolbar */
.mud-table-pagination-toolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

/* Custom CRUD pager */
.crud-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 8px;
}

.crud-pager__rows {
    display: flex;
    align-items: center;
}

.crud-pager__rows-select {
    width: 64px;
}

.crud-pager__info {
    flex: 1 1 auto;
    text-align: center;
    min-width: 100px;
}

.crud-pager__nav {
    display: flex;
    align-items: center;
}

/* ── MudDialog header / footer separation ──────────────────────────────────── */

.mud-dialog .mud-dialog-title {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}