/* ═══════════════════════════════════════════════════════════════════════════
   SSB Management System — Global Stylesheet
   QHRM V3 Design Standard · MudBlazor 7.x overrides · .NET 10 Blazor Server
   All values via tokens.css — no hardcoded hex, spacing, radius, or shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* Suppress browser/MudBlazor default focus outlines globally */
*:focus { outline: none !important; }
*:focus-visible { outline: none !important; }

/* Restore focus ring only on interactive elements — subtle neutral outline, no navy halo */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 1px solid var(--border-strong) !important;
    outline-offset: 1px;
}

html, body {
    font-family: var(--font-sans);
    background: var(--surface-page);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.ssb-sidebar {
    background: var(--n-0) !important;
    border-right: 1px solid var(--border-default) !important;
}

.ssb-sidebar .mud-drawer-content {
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ssb-sidebar .mud-drawer-content > * { flex: 0 0 auto; }

.ssb-sidebar .mud-navmenu {
    margin-top: 0 !important;
    padding-top: var(--sp-4) !important;
    padding-bottom: var(--sp-4) !important;
    flex: 1 1 auto;
}

.ssb-sidebar .mud-nav-link {
    color: var(--text-secondary);
    border-radius: var(--r-md);
    margin: 1px var(--sp-4);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast);
}

.ssb-sidebar .mud-nav-link:hover {
    background: var(--n-75);
    color: var(--text-primary);
}

.ssb-sidebar .mud-nav-link.active {
    background: var(--p-50);
    color: var(--p-700);
    font-weight: var(--fw-semibold);
}

.ssb-sidebar .mud-nav-link .mud-nav-link-icon { color: inherit; }

.ssb-sidebar .ssb-nav-section {
    color: var(--text-tertiary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--sp-8) var(--sp-10) var(--sp-2);
}

.ssb-sidebar .mud-divider { border-color: var(--border-subtle) !important; }

.ssb-sidebar .mud-navgroup-title { color: var(--text-secondary) !important; }

.ssb-sidebar .mud-navgroup .mud-navgroup-header {
    color: var(--text-secondary) !important;
    font-size: var(--fs-md) !important;
    font-weight: var(--fw-medium) !important;
    border-radius: var(--r-md) !important;
    margin: 1px var(--sp-4) !important;
}

.ssb-sidebar .mud-navgroup .mud-navgroup-header:hover {
    background: var(--n-75) !important;
    color: var(--text-primary) !important;
}

.ssb-sidebar .mud-collapse-container .mud-nav-link {
    padding-left: 44px !important;
}

/* Mini sidebar icon centering */
.ssb-sidebar.mud-drawer--closed .mud-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* ── Sidebar header (brand) ────────────────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-6);
    min-height: 64px;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-header-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) 0;
    min-height: 64px;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--p-700);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n-0);
    flex-shrink: 0;
}

.sidebar-brand-info { flex: 1; min-width: 0; overflow: hidden; }

.sidebar-brand-text {
    color: var(--text-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.sidebar-brand-sub {
    color: var(--text-tertiary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ── Top Bar ──────────────────────────────────────────────────────────── */
.ssb-appbar {
    background: var(--n-0) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs) !important;
}

.ssb-appbar .mud-icon-button { color: var(--text-secondary); }
.ssb-appbar .mud-icon-button:hover { color: var(--text-primary); }

/* ── User avatar ──────────────────────────────────────────────────────── */
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    color: var(--n-0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: opacity var(--dur-fast);
}

.user-avatar:hover { opacity: .85; }

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-8);
    padding: var(--sp-8) 0 var(--sp-6);
}

.page-header-left { display: flex; flex-direction: column; gap: var(--sp-1); }
.page-header-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.page-title {
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    letter-spacing: -0.015em;
    line-height: var(--lh-tight);
}

.page-subtitle {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* ── Stat Cards (dashboard) ────────────────────────────────────────────── */
.stat-card {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-blue    { background: var(--p-50);       color: var(--p-700); }
.stat-icon-amber   { background: var(--warning-50);  color: var(--warning-600); }
.stat-icon-emerald { background: var(--success-50);  color: var(--success-600); }
.stat-icon-violet  { background: var(--info-50);     color: var(--info-600); }

/* ── Dashboard panels ─────────────────────────────────────────────────── */
.dash-panel {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--border-subtle) !important;
}

.dash-panel-title {
    font-weight: var(--fw-semibold) !important;
    font-size: var(--fs-lg) !important;
    color: var(--text-primary) !important;
}

/* ── Quick-action buttons ─────────────────────────────────────────────── */
.qa-btn {
    border-radius: var(--r-md) !important;
    text-transform: none !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: 0 !important;
    justify-content: flex-start !important;
    padding: var(--sp-5) var(--sp-8) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
    transition: all var(--dur-fast) var(--ease-out);
}

.qa-btn:hover {
    background: var(--p-50) !important;
    border-color: var(--p-300) !important;
    color: var(--p-700) !important;
}

/* ── MudButton — token-aligned ─────────────────────────────────────────── */
.mud-button-root {
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    font-weight: var(--fw-medium) !important;
    border-radius: var(--r-md) !important;
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) !important;
}

.mud-button-filled-primary {
    background: var(--p-700) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-button-filled-primary:hover {
    background: var(--p-800) !important;
    box-shadow: var(--shadow-md) !important;
    transform: none !important;
}

.mud-button-filled-error {
    background: var(--danger-600) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-button-filled-error:hover { background: var(--danger-700) !important; }

.mud-button-filled-success {
    background: var(--success-600) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-button-filled-success:hover { background: var(--success-700) !important; }

/* ── MudIconButton ──────────────────────────────────────────────────────── */
.mud-icon-button { border-radius: var(--r-md) !important; }

/* ── MudTextField / MudSelect / inputs ─────────────────────────────────── */
.mud-input-outlined .mud-notched-outline {
    border-color: var(--border-default) !important;
    border-radius: var(--r-md) !important;
    transition: border-color var(--dur-fast) !important;
}

.mud-input-outlined:hover:not(.mud-disabled) .mud-notched-outline {
    border-color: var(--border-strong) !important;
}

.mud-input-outlined.mud-input-focused .mud-notched-outline,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--border-strong) !important;
    border-width: 1px !important;
}

.mud-input-label-outlined { color: var(--text-secondary) !important; }
.mud-input-label-outlined.mud-input-label-inputfocus { color: var(--p-700) !important; }

/* ── MudPaper — consistent surface rounding ────────────────────────────── */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover-paper):not(.mud-menu-paper) {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* ── MudTable / MudDataGrid ────────────────────────────────────────────── */
.mud-table-container {
    border-radius: var(--r-lg) !important;
    overflow: hidden;
    border: 1px solid var(--border-subtle) !important;
}

.mud-table .mud-table-head .mud-table-row .mud-table-cell {
    font-weight: var(--fw-semibold) !important;
    font-size: var(--fs-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-tertiary) !important;
    background: var(--n-25) !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: var(--sp-6) var(--sp-8) !important;
}

.mud-table .mud-table-body .mud-table-row {
    transition: background var(--dur-fast) !important;
}

.mud-table .mud-table-body .mud-table-row:hover td {
    background: var(--n-50) !important;
}

.mud-table .mud-table-body .mud-table-cell {
    color: var(--text-primary) !important;
    font-size: var(--fs-md) !important;
    padding: var(--sp-6) var(--sp-8) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* ── MudDialog ──────────────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: var(--r-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xl) !important;
}

.mud-dialog-title {
    font-weight: var(--fw-semibold) !important;
    font-size: var(--fs-xl) !important;
    color: var(--text-primary) !important;
    padding: var(--sp-12) var(--sp-12) 0 !important;
}

.mud-dialog-content { padding: var(--sp-8) var(--sp-12) !important; }

.mud-dialog-actions {
    padding: var(--sp-4) var(--sp-12) var(--sp-10) !important;
    gap: var(--sp-4) !important;
}

/* ── MudChip — status pills ─────────────────────────────────────────────── */
.mud-chip {
    border-radius: var(--r-full) !important;
    font-size: var(--fs-2xs) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0.01em !important;
    height: 20px !important;
    padding: 0 var(--sp-4) !important;
    text-transform: uppercase !important;
}

.mud-chip-color-success  { background: var(--success-50) !important; color: var(--success-700) !important; }
.mud-chip-color-warning  { background: var(--warning-50) !important; color: var(--warning-700) !important; }
.mud-chip-color-error    { background: var(--danger-50)  !important; color: var(--danger-700)  !important; }
.mud-chip-color-info     { background: var(--info-50)    !important; color: var(--info-700)    !important; }
.mud-chip-color-primary  { background: var(--p-50)       !important; color: var(--p-700)       !important; }
.mud-chip-color-secondary{ background: var(--n-100)      !important; color: var(--n-700)       !important; }
.mud-chip-color-default  { background: var(--n-100)      !important; color: var(--n-700)       !important; }

/* ── MudCard ────────────────────────────────────────────────────────────── */
.mud-card {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--border-subtle) !important;
}

.mud-card-header-title {
    font-weight: var(--fw-semibold) !important;
    color: var(--text-primary) !important;
}

/* ── MudAlert ───────────────────────────────────────────────────────────── */
.mud-alert { border-radius: var(--r-md) !important; }

/* ── MudSnackbar ────────────────────────────────────────────────────────── */
.mud-snackbar {
    border-radius: var(--r-md) !important;
    font-weight: var(--fw-medium) !important;
}

/* ── MudBreadcrumbs ─────────────────────────────────────────────────────── */
.mud-breadcrumb-item a {
    color: var(--text-secondary) !important;
    font-size: var(--fs-sm) !important;
    text-decoration: none !important;
    transition: color var(--dur-fast) !important;
}

.mud-breadcrumb-item a:hover { color: var(--p-700) !important; }

.mud-breadcrumb-item.mud-disabled span {
    color: var(--text-primary) !important;
    font-weight: var(--fw-semibold) !important;
}

/* ── MudSelect / MudPopover overlay ─────────────────────────────────────── */
.mud-popover-paper {
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border-default) !important;
}

.mud-list-item:hover { background: var(--surface-hover) !important; }
.mud-list-item-text  { font-size: var(--fs-md) !important; color: var(--text-primary) !important; }

/* ── MudDivider ─────────────────────────────────────────────────────────── */
.mud-divider { border-color: var(--border-subtle) !important; }

/* ── MudTooltip ─────────────────────────────────────────────────────────── */
.mud-tooltip {
    border-radius: var(--r-sm) !important;
    font-size: var(--fs-xs) !important;
    padding: var(--sp-1) var(--sp-4) !important;
    background: var(--n-800) !important;
}

/* ── MudTabs ────────────────────────────────────────────────────────────── */
.mud-tab {
    text-transform: none !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--fs-md) !important;
    letter-spacing: -0.005em !important;
}

.mud-tab-active { color: var(--p-700) !important; }

.mud-tabs-toolbar .mud-tab-slider { background: var(--p-700) !important; }

/* ── Blazor error UI ────────────────────────────────────────────────────── */
.blazor-error-boundary {
    background: var(--danger-50);
    border: 1px solid var(--danger-100);
    padding: var(--sp-8) var(--sp-12);
    color: var(--danger-700);
    border-radius: var(--r-md);
    font-weight: var(--fw-medium);
}

.blazor-error-boundary::after { content: "An unexpected error has occurred."; }

#blazor-error-ui {
    background: var(--danger-50);
    border-top: 2px solid var(--danger-500);
    color: var(--danger-700);
    bottom: 0;
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--sp-5) var(--sp-12);
    position: fixed;
    width: 100%;
    z-index: var(--z-toast);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--sp-8);
    top: var(--sp-5);
    font-size: var(--fs-xl);
    opacity: .6;
}

#blazor-error-ui .dismiss:hover { opacity: 1; }

/* ── Q* component classes (from design standard §5) ──────────────────────
   These parallel the classes in tokens.css/shared-ui for native components.
   Used by Q* Razor components in Components/Design/.
   ─────────────────────────────────────────────────────────────────────── */

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    height: var(--h-lg);
    padding: 0 14px;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    font-family: var(--font-sans);
    letter-spacing: -0.005em;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), opacity var(--dur-fast);
}

.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: var(--p-700);
    color: var(--text-inverse);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) { background: var(--p-800); box-shadow: var(--shadow-md); }

.btn-secondary {
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }

.btn-danger { background: var(--danger-600); color: var(--text-inverse); box-shadow: var(--shadow-sm); }
.btn-danger:hover:not(:disabled) { background: var(--danger-700); }

.btn-sm { height: var(--h-md); padding: 0 var(--sp-5); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-xs { height: var(--h-sm); padding: 0 var(--sp-4); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg { height: var(--h-xl); padding: 0 18px; font-size: var(--fs-base); }
.btn-icon { width: var(--h-lg); padding: 0; }
.btn-icon.btn-sm { width: var(--h-md); }
.btn-icon.btn-xs { width: var(--h-sm); }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 20px;
    padding: 0 7px;
    border-radius: var(--r-full);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge.dot::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-neutral  { background: var(--n-100);       color: var(--n-700); }
.badge-success  { background: var(--success-50);   color: var(--success-700); }
.badge-warning  { background: var(--warning-50);   color: var(--warning-700); }
.badge-danger   { background: var(--danger-50);    color: var(--danger-700); }
.badge-info     { background: var(--info-50);      color: var(--info-700); }
.badge-brand    { background: var(--p-50);         color: var(--p-700); }
.badge-outline  { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }

/* Form field */
.form-field { display: flex; flex-direction: column; gap: var(--sp-3); }

.form-field .label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.form-field .label .required { color: var(--danger-600); }
.form-field .label .optional { color: var(--text-tertiary); font-weight: var(--fw-regular); font-size: var(--fs-xs); margin-left: var(--sp-2); }
.form-field .hint { font-size: var(--fs-xs); color: var(--text-tertiary); }
.form-field .error-msg { font-size: var(--fs-xs); color: var(--danger-600); display: flex; align-items: center; gap: var(--sp-2); }

/* Avatar */
.q-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    font-weight: var(--fw-semibold);
    color: var(--n-0);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: var(--fs-sm);
}

.q-avatar-sm { width: 24px; height: 24px; font-size: var(--fs-2xs); }
.q-avatar-lg { width: 40px; height: 40px; font-size: var(--fs-base); }
.q-avatar-xl { width: 64px; height: 64px; font-size: var(--fs-xl); }

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-32) var(--sp-12);
    text-align: center;
    gap: var(--sp-4);
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-full);
    background: var(--n-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    margin-bottom: var(--sp-4);
}

.empty-state-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
}

.empty-state-desc {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin: 0;
    max-width: 320px;
}

/* Mono / tabular numerics */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Utility helpers ────────────────────────────────────────────────────── */
.fw-bold       { font-weight: var(--fw-bold) !important; }
.fw-semibold   { font-weight: var(--fw-semibold) !important; }
.text-danger   { color: var(--danger-600) !important; }
.text-success  { color: var(--success-600) !important; }
.text-muted    { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.w-100         { width: 100% !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--n-200);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--n-300);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* ── Q-Table (tree data table) ─────────────────────────────────────────── */
.q-table-wrap { border: 1px solid var(--n-150); border-radius: var(--r-lg); overflow: hidden; background: var(--n-0); }
.q-table { width: 100%; border-collapse: collapse; }
.q-table thead tr { height: 32px; background: var(--n-25, #f4f5f7); border-bottom: 1px solid var(--n-150); }
.q-table thead th { padding: 0 12px; text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--n-500); white-space: nowrap; }
.q-table tbody .q-row { height: 48px; border-bottom: 1px solid var(--n-150); transition: background 0.1s; }
.q-table tbody .q-row:last-child { border-bottom: none; }
.q-table tbody .q-row:hover { background: var(--n-25, #f4f5f7); }
.q-table tbody td { padding: 0 12px; font-size: 13.5px; color: var(--n-900); vertical-align: middle; }

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.q-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-toolbar-left, .q-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* ── Form inputs (the missing .input class) ────────────────────────────── */
/* Used by MenuForm, RoleRights filter, custom-function rows, and any other  */
/* place that opts into the QHRM V3 input look without going through MudBlazor. */
.input {
    height: 36px;
    padding: 0 12px;
    background: var(--n-0);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-primary);
    line-height: 1.4;
    outline: none;
    transition: border-color .12s ease-out, box-shadow .12s ease-out, background .12s;
    width: 100%;
    box-sizing: border-box;
}

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

.input:hover:not(:disabled):not(:focus) { border-color: var(--n-300); }

.input:focus {
    border-color: var(--border-strong);
    background: var(--n-0);
}

.input:disabled {
    background: var(--n-25);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.input.error {
    border-color: var(--danger-500);
}

.input.error:focus {
    box-shadow: 0 0 0 3px var(--danger-100, rgba(220,38,38,0.12));
}

/* Number inputs — strip browser spinners by default; add space when needed */
.input[type="number"] { padding-right: 8px; }

/* Multiline textarea variant */
textarea.input {
    height: auto;
    min-height: 80px;
    padding: 8px 12px;
    line-height: 1.5;
    resize: vertical;
}

/* Read-only inputs — softer fill, primary text colour kept */
.input[readonly] {
    background: var(--n-25);
    border-color: var(--border-subtle);
}

/* ── Form labels + helper text ─────────────────────────────────────────── */
.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.field-label .required { color: var(--danger-600); margin-left: 2px; }
.field-label .optional { font-weight: 400; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.field-help { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.45; }
.field-error { font-size: 11.5px; color: var(--danger-600); margin-top: 4px; }