/* ============================================================
   TansiJobs — "Refined Clarity" Design System
   Modern, high-contrast, accessible in both light & dark modes
   ============================================================ */

/* =========================
   0. Global Foundations
   ========================= */
:root {
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 8px 25px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.06);
    --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   0b. Tansi brand tokens
   The logo cyan #0FA8D2 is 2.78:1 on white — logotype-exempt (WCAG 1.4.3/1.4.11),
   so it colors the mark ONLY. Interactive/brand chrome uses darker and lighter
   steps of the same 192.9° hue. Every ratio below is measured on the surface
   the token actually sits on. Dark values live under .mud-theme-dark (this
   app's theme scope). Teal sits at 168° — 193° would collide with the brand.
   ========================= */
:root {
    --brand: #0fa8d2;         /* logo mark ONLY */
    --primary: #0a728f;       /* fills — white on it 5.50:1 */
    --primary-hover: #09637c; /* white on it 6.80:1 */
    --primary-ink: #09637c;   /* links, icon text — 6.80:1 on white */
    --primary-soft: #e4f6fb;  /* chip + tint background */
    --on-primary: #ffffff;
    --focus: #0a728f;         /* ring — 5.50:1 vs white (1.4.11 needs 3:1) */
    --teal-ink: #0d775d;      /* on white 5.51:1, on --teal-soft 4.97:1 */
    --teal-soft: #e2f8f4;
    --success-ink: #0f7b46;   --success-soft: #e7f6ee;
    --warn-ink: #8a5300;      --warn-soft: #fdf3e2;
    --danger-ink: #b42318;    --danger-soft: #fdecea;
    --violet-ink: #6b21a8;    --violet-soft: #f5eeff;
}

.mud-theme-dark {
    --brand: #0fa8d2;         /* 6.22:1 on the dark surface — logo-on-dark works as-is */
    --primary: #4acef2;       /* on surface 9.39:1; dark ink on it 9.14:1 */
    --primary-hover: #70d8f5;
    --primary-ink: #5dd3f3;   /* on surface 8.89:1 */
    --primary-soft: #12363f;
    --on-primary: #06202a;
    --focus: #5dd3f3;
    --teal-ink: #6ce5cd;      /* on surface 11.31:1 */
    --teal-soft: #153731;
    --success-ink: #4ed08c;   --success-soft: #12281d;
    --warn-ink: #f0bf6a;      --warn-soft: #2a2010;
    --danger-ink: #ff8b7e;    --danger-soft: #331a17;
    --violet-ink: #d5b6ff;    --violet-soft: #231a33;
}

/* =========================
   0c. Global fixes (apply everywhere)
   ========================= */

/* <dialog> UA stylesheet sets color:CanvasText (black) and does NOT inherit
   from body — black-on-dark-surface is 1.21:1. */
dialog { color: var(--mud-palette-text-primary); }

/* Every unclassed link gets theme ink. The unstyled tel:/mailto: fallback is
   #0000EE — 1.84:1 on a dark surface — and it resurfaces every time a link is
   added without a Mud class. Keep this global; opt OUT for navigation anchors
   that must inherit their container's color. */
a { color: var(--primary-ink); }
a.mud-nav-link, .mud-breadcrumbs a, .tansi-appbar a, footer a { color: inherit; }

/* 2.4.11 Focus Not Obscured — the sticky app bar parks tab-focused controls
   underneath itself; clicking never triggers it. */
:is(a, button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-top: 96px;
    scroll-margin-bottom: 28px;
}

/* 2.5.8 Target Size — fixed-width flex items still shrink below 24px at
   narrow widths unless told otherwise. */
.mud-snackbar .mud-button-root,
.mud-alert .mud-button-root { flex: none; }

/* Apply DM Sans globally - readable, modern, slightly geometric */
.mud-typography,
.mud-input,
.mud-input-control,
.mud-select,
.mud-chip,
.mud-button,
.mud-nav-link,
.mud-list-item,
.mud-tab,
.mud-dialog,
body {
    font-family: 'DM Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Improve base text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* The theme scope class itself. Everything below — and every light/dark rule in
   calendar.css, crm.css, ui.css, access.css, naics-picker.css and workflow-builder.css —
   hangs off .mud-theme-light / .mud-theme-dark on an ancestor. MudBlazor never puts them
   there: in MudBlazor.min.css those two are its Color.Dark / Color.Light *utility* classes,
   landing only on a component that asks for them. The layouts apply the right one to <body>
   via window.tansiTheme.apply (js/Helpers.js) so the whole tree — MudDialog / MudPopover /
   MudSnackbar content included — sits inside the scope.
   That borrowed name comes with MudBlazor's own utility declarations, which paint the
   element with the Dark/Light swatch (background-color + color, both !important). Undo
   exactly those two here — body's own specificity plus !important wins — so the class on
   <body> carries variables only and MudBlazor's normal body rule keeps the page surface. */
body.mud-theme-dark,
body.mud-theme-light {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* =========================
   1. Viewing Mode Variables
   ========================= */
.mud-theme-dark {
    --looking-bg-start: rgba(52, 211, 153, 0.15);
    --looking-bg-end: rgba(45, 212, 191, 0.10);
    --looking-border: rgba(255, 255, 255, 0.10);
    --looking-icon: #34d399;
    --card-bg: rgba(31, 34, 48, 0.95);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-hover-border: rgba(255, 255, 255, 0.12);
    --section-bg: rgba(24, 26, 36, 0.6);
    --text-heading: #F1F3F9;
    --text-body: #D0D4E4;
    --text-caption: #9BA2B8;
    --accent-glow: rgba(11, 126, 158, 0.15);
}

.mud-theme-light {
    --looking-bg-start: rgba(16, 185, 129, 0.08);
    --looking-bg-end: rgba(45, 212, 191, 0.04);
    --looking-border: rgba(0, 0, 0, 0.06);
    --looking-icon: #059669;
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.06);
    --card-hover-border: rgba(0, 0, 0, 0.12);
    --section-bg: #f8f9fb;
    --text-heading: #111827;
    --text-body: #374151;
    --text-caption: #6b7280;
    --accent-glow: rgba(11, 126, 158, 0.08);
}

/* =========================
   1b. Candidacy Toggle Card
   ========================= */
.candidacy-toggle-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--looking-border);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-smooth);
}

.candidacy-toggle-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background: radial-gradient(ellipse at 30% 50%, currentColor 0%, transparent 70%);
    pointer-events: none;
}

.mud-theme-dark .candidacy-toggle-card {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(45, 212, 191, 0.08));
    border-color: rgba(52, 211, 153, 0.18);
}

.mud-theme-light .candidacy-toggle-card {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #a7f3d0;
}

.candidacy-title {
    font-weight: 600;
    display: flex;
    align-items: center;
}

.mud-theme-dark .candidacy-title { color: #ffffff; }
.mud-theme-light .candidacy-title { color: #064e3b; }

.candidacy-subtitle {
    margin-top: 4px;
}

.mud-theme-dark .candidacy-subtitle { color: rgba(255,255,255,0.80); }
.mud-theme-light .candidacy-subtitle { color: #065f46; }

.candidacy-icon {
    color: var(--looking-icon);
}

/* Status Cards */
.status-card {
    border-radius: var(--radius-md);
    min-height: 72px;
    position: relative;
    transition: box-shadow var(--transition-smooth);
}

.mud-theme-light .status-card {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left: 4px solid #22c55e;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.12), var(--shadow-card);
}

.mud-theme-light .status-icon { color: #16a34a; }

.mud-theme-dark .status-card {
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.08));
    border-left: 4px solid #34d399;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.30);
}

.mud-theme-dark .status-icon { color: #34d399; }

/* =========================
   2. Logo
   ========================= */
.app-logo.mud-image {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #111827;
    transition: opacity var(--transition-fast);
}

.app-logo.mud-image:hover {
    opacity: 0.9;
}

.app-logo.mud-image img {
    display: block;
    height: 28px;
    width: auto;
}

.mud-theme-light .app-logo.mud-image {
    background-color: #111827;
}

.mud-theme-dark .app-logo.mud-image {
    background-color: transparent;
}

/* =========================
   3. Job Cards
   ========================= */
.job-card {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.mud-theme-dark .job-card {
    background: linear-gradient(180deg, #262A40 0%, #22263A 100%);
}

.mud-theme-light .job-card {
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.job-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background-color: var(--mud-palette-primary);
    opacity: 0.6;
    border-radius: 2px;
    transition: opacity var(--transition-fast);
}

.job-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-hover-border);
}

.mud-theme-dark .job-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.40);
}

.mud-theme-light .job-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.job-card:hover::before {
    opacity: 1;
}

/* =========================
   4. Clear Filters Button
   ========================= */
.clear-filters-btn {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    transition: background-color var(--transition-fast);
}

.clear-filters-btn:hover {
    background-color: var(--accent-glow);
}

.clear-filters-inline {
    align-self: center;
    margin-top: 4px;
}

/* =========================
   5. Developer Mode Banner
   ========================= */
.dev-mode-banner {
    background-color: rgba(11,126,158,0.06);
    border-color: rgba(11,126,158,0.4);
    color: var(--mud-palette-text-secondary);
    padding: 8px 16px;
}

.dev-mode-banner .mud-alert-icon {
    color: var(--mud-palette-primary);
}

/* =========================
   6. Navigation Menu
   ========================= */

/* Nav group headers — bolder, better spaced */
.mud-nav-group .mud-nav-link {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.875rem;
    min-height: 44px;
    border-radius: var(--radius-sm);
    margin: 2px 8px;
    padding-left: 12px;
    padding-right: 12px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* All nav links — bigger touch targets, softer rounding */
.mud-navmenu .mud-nav-link {
    min-height: 42px;
    border-radius: var(--radius-sm);
    margin: 1px 8px;
    padding-left: 14px;
    padding-right: 14px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    font-size: 0.875rem;
    font-weight: 450;
}

/* Hover state */
.mud-navmenu .mud-nav-link:hover {
    border-radius: var(--radius-sm);
}

.mud-theme-dark .mud-navmenu .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.mud-theme-light .mud-navmenu .mud-nav-link:hover {
    background-color: rgba(11, 126, 158, 0.06);
}

/* Active state — strong visual indicator */
.mud-nav-link.active {
    position: relative;
    font-weight: 600;
}

.mud-theme-dark .mud-nav-link.active {
    background-color: rgba(11, 126, 158, 0.14) !important;
    color: #ffffff !important;
}

.mud-theme-dark .mud-nav-link.active .mud-nav-link-text,
.mud-theme-dark .mud-nav-link.active .mud-icon-root {
    color: #ffffff !important;
}

.mud-theme-light .mud-nav-link.active {
    background-color: rgba(11, 126, 158, 0.10) !important;
    color: #0a728f !important;
}

.mud-theme-light .mud-nav-link.active .mud-nav-link-text,
.mud-theme-light .mud-nav-link.active .mud-icon-root {
    color: #0a728f !important;
}

/* Active accent bar */
.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background-color: var(--mud-palette-primary);
}

/* Nav icons — slightly muted until active */
.mud-navmenu .mud-nav-link-icon {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.mud-navmenu .mud-nav-link:hover .mud-nav-link-icon,
.mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
    opacity: 1;
}

/* Nav group expand/collapse — smooth */
.mud-nav-group .mud-collapse-wrapper {
    transition: max-height var(--transition-smooth);
}

/* Nested nav items — indent */
.mud-nav-group .mud-nav-group .mud-nav-link {
    padding-left: 24px;
    font-size: 0.8125rem;
}

/* Drawer bottom fade-out hint for scrolling */
#nav-drawer .mud-drawer-content {
    scrollbar-width: thin;
}

.mud-theme-dark #nav-drawer .mud-drawer-content::-webkit-scrollbar {
    width: 4px;
}

.mud-theme-dark #nav-drawer .mud-drawer-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* Divider in nav */
.mud-navmenu .mud-divider {
    margin: 8px 16px;
    opacity: 0.5;
}

/* =========================
   7. Primary Button Polish
   ========================= */
.mud-button-filled-primary {
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: box-shadow var(--transition-fast), transform 80ms ease;
}

.mud-button-filled-primary:active {
    transform: scale(0.98);
}

/* =========================
   8. View Toggle
   ========================= */
.results-toolbar {
    padding: 0;
    margin: 0;
    line-height: 1;
}

.results-toggle {
    padding: 0;
}

.results-toggle .mud-button {
    padding: 2px 8px;
    min-height: 28px;
    line-height: 1.1;
}

.results-toggle .mud-icon-root {
    margin-right: 4px;
}

/* =========================
   9. Profile Page
   ========================= */

/* --- Profile Header --- */
.profile-header {
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.mud-theme-dark .profile-header {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mud-theme-light .profile-header {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* --- Avatar --- */
.avatar-wrapper {
    position: relative;
    width: 80px;
    height: 96px;
    flex: 0 0 auto;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.mud-theme-dark .profile-avatar-img {
    border-color: rgba(255,255,255,0.10);
}

.mud-theme-light .profile-avatar-img {
    border-color: rgba(0,0,0,0.08);
}

.profile-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #0B7E9E 0%, #0a728f 100%);
    color: white;
    font-weight: 600;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
}

/* MudAvatar override to match our profile style */
.profile-header .mud-avatar-large {
    width: 80px;
    height: 96px;
    border-radius: var(--radius-md);
    font-size: 1.4rem;
    font-weight: 600;
}

/* Avatar edit button */
.avatar-edit-menu {
    position: absolute;
    bottom: -6px;
    right: -6px;
}

.avatar-edit-menu .mud-button-root {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
}

.avatar-edit-menu .mud-icon-root {
    font-size: 15px;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.mud-theme-light .avatar-edit-menu .mud-button-root {
    background-color: rgba(0, 0, 0, 0.65);
}

.mud-theme-dark .avatar-edit-menu .mud-button-root {
    background-color: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(4px);
}

.avatar-edit-menu .mud-button-root:hover {
    background-color: var(--mud-palette-primary);
    box-shadow: 0 2px 12px rgba(11, 126, 158, 0.40);
}

/* --- Profile Name & Meta --- */
.profile-name {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-heading);
}

.profile-meta {
    color: var(--text-caption);
    font-size: 0.9rem;
    line-height: 1.5;
}

.profile-action {
    opacity: 0.9;
    transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
    font-weight: 500;
}

.profile-action:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* --- Profile Tabs --- */
.profile-tabs {
    border-bottom: 2px solid var(--mud-palette-divider);
    margin-bottom: 0;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
    display: none;
}

.profile-tab {
    padding: 14px 24px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    bottom: -2px;
    user-select: none;
}

.mud-theme-dark .profile-tab {
    color: var(--text-caption);
}

.mud-theme-light .profile-tab {
    color: #6b7280;
}

.profile-tab:hover {
    color: var(--mud-palette-primary);
}

.mud-theme-dark .profile-tab:hover {
    background-color: rgba(11, 126, 158, 0.06);
}

.mud-theme-light .profile-tab:hover {
    background-color: rgba(11, 126, 158, 0.04);
}

.profile-tab-active {
    color: var(--mud-palette-primary) !important;
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 700;
}

.mud-theme-dark .profile-tab-active {
    background-color: rgba(11, 126, 158, 0.08);
}

.mud-theme-light .profile-tab-active {
    background-color: rgba(11, 126, 158, 0.04);
}

/* --- Info Sections --- */
.info-section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.info-row {
    display: flex;
    margin-bottom: 14px;
    align-items: flex-start;
    line-height: 1.5;
}

.info-label {
    font-weight: 600;
    color: var(--text-caption);
    min-width: 150px;
    flex-shrink: 0;
    font-size: 0.875rem;
    padding-top: 1px;
}

.info-value {
    color: var(--mud-palette-text-primary);
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 450;
}

/* --- Employment Cards --- */
.employment-card {
    border-left: 4px solid var(--mud-palette-primary);
    transition: all var(--transition-smooth);
    border-radius: var(--radius-md);
}

.employment-card:hover {
    transform: translateY(-2px);
}

.mud-theme-dark .employment-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.mud-theme-light .employment-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.employment-card-current {
    border-left-color: var(--mud-palette-success);
}

.employment-card-past {
    /* "gray", not "grey" — the token comes from Palette.GrayDefault. */
    border-left-color: var(--mud-palette-gray-default);
}

/* --- Requirement Cards --- */
.requirement-category-section {
    margin-bottom: 32px;
}

.requirement-card {
    border-radius: var(--radius-sm);
    border-left: 4px solid transparent;
    transition: all var(--transition-smooth);
    background-color: var(--mud-palette-surface);
}

.requirement-card:hover {
    transform: translateY(-2px);
}

.mud-theme-dark .requirement-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}

.mud-theme-light .requirement-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.fw-600 {
    font-weight: 600;
}

/* --- Profile Responsive --- */
@media (max-width: 960px) {
    .profile-tab {
        padding: 12px 16px;
        font-size: 0.75rem;
    }

    .info-row {
        flex-direction: column;
        gap: 2px;
    }

    .info-label {
        min-width: auto;
        margin-bottom: 0;
    }

    .avatar-wrapper {
        width: 64px;
        height: 80px;
    }

    .profile-name {
        font-size: 1.25rem;
    }

    .profile-header .mud-avatar-large {
        width: 64px;
        height: 80px;
        font-size: 1.2rem;
    }
}

/* =========================
   10. Dialogs & Modals
   ========================= */

/* Dialog paper — refined surface */
.mud-dialog {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.mud-theme-dark .mud-dialog {
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50), 0 8px 20px rgba(0, 0, 0, 0.30);
}

.mud-theme-light .mud-dialog {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Dialog title bar */
.mud-dialog .mud-dialog-title {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Dialog content */
.mud-dialog .mud-dialog-content {
    padding: 24px;
}

/* Dialog actions */
.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* Section navigation chips in edit dialog */
.mud-dialog .mud-chip {
    font-weight: 500;
    transition: all var(--transition-fast);
}

/* Dialog overlay backdrop */
.mud-overlay {
    transition: opacity var(--transition-smooth);
}

.mud-theme-dark .mud-overlay {
    background-color: rgba(0, 0, 0, 0.60) !important;
    backdrop-filter: blur(4px);
}

.mud-theme-light .mud-overlay {
    background-color: rgba(0, 0, 0, 0.30) !important;
    backdrop-filter: blur(2px);
}

/* =========================
   11. Cards & Papers — Global Polish
   ========================= */

/* Give all MudPaper elements smoother transitions */
.mud-paper {
    transition: box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

/* Elevation 2 papers (profile cards) — consistent look */
.mud-paper.mud-elevation-2 {
    border-radius: var(--radius-md);
}

.mud-theme-dark .mud-paper.mud-elevation-2 {
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.mud-theme-light .mud-paper.mud-elevation-2 {
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-card);
}

/* Elevation 1 papers (selectors) */
.mud-paper.mud-elevation-1 {
    border-radius: var(--radius-md);
}

.mud-theme-light .mud-paper.mud-elevation-1 {
    box-shadow: var(--shadow-card);
}

/* =========================
   12. AppBar Enhancement
   ========================= */
.mud-appbar {
    backdrop-filter: blur(12px) saturate(180%);
}

.mud-theme-dark .mud-appbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mud-theme-light .mud-appbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* =========================
   13. DataGrid — Better Readability
   ========================= */
.mud-table .mud-table-cell {
    font-size: 0.875rem;
    padding: 10px 16px;
}

.mud-table .mud-table-head .mud-table-cell {
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mud-theme-dark .mud-table-row:hover {
    background-color: rgba(11, 126, 158, 0.06) !important;
}

.mud-theme-light .mud-table-row:hover {
    background-color: rgba(11, 126, 158, 0.03) !important;
}

/* =========================
   14. Chips — More Polished
   ========================= */
.mud-chip {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

/* =========================
   15. Snackbar — Better Visibility
   ========================= */
.mud-snackbar {
    border-radius: var(--radius-md) !important;
    font-weight: 500;
}

/* =========================
   16. Alerts — High Contrast
   ========================= */
.mud-alert {
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.mud-alert .mud-alert-message {
    font-weight: 450;
}

/* =========================
   17. Inputs — Cleaner Feel
   ========================= */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

.mud-input-label {
    font-weight: 500;
    font-size: 0.875rem;
}

/* Filter bars (client feedback 2026-09-25): every filter input is an outlined
   box rather than an underline, and no box is narrower than its own value —
   a "yyyy-MM-dd" date plus its calendar icon needs 170px, not 150px. */
.tansi-filter-bar .mud-input-control { min-width: 160px; }
.tansi-filter-bar .mud-picker { min-width: 170px; }
.tansi-filter-bar .mud-input-control.flex-grow-1 { min-width: 220px; }

/* =========================
   18. GeoJSON Map Tooltips
   ========================= */
.geojson-feature-tooltip {
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.geojson-feature-tooltip::before {
    display: none;
}

.leaflet-tooltip.geojson-feature-tooltip {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(123, 31, 162, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.geojson-feature-popup .leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.geojson-feature-popup .leaflet-popup-content {
    margin: 12px 14px;
}

.geojson-feature-popup .leaflet-popup-tip {
    background: rgba(255, 255, 255, 0.98);
}

.geojson-tooltip-content {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    min-width: 140px;
    max-width: 280px;
}

.geojson-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 12px;
}

.geojson-tooltip-row:last-child {
    border-bottom: none;
}

.geojson-tooltip-label {
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.geojson-tooltip-value {
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* Dark mode */
.mud-theme-dark .geojson-feature-tooltip,
.mud-theme-dark .leaflet-tooltip.geojson-feature-tooltip {
    background: rgba(38, 42, 64, 0.98);
    border-color: rgba(123, 31, 162, 0.3);
    color: #fff;
}

.mud-theme-dark .geojson-feature-popup .leaflet-popup-content-wrapper,
.mud-theme-dark .geojson-feature-popup .leaflet-popup-tip {
    background: rgba(38, 42, 64, 0.98);
    color: #fff;
}

.mud-theme-dark .geojson-tooltip-label {
    color: rgba(255, 255, 255, 0.6);
}

.mud-theme-dark .geojson-tooltip-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Standardized teardrop map pin (shared by all maps) and the search-center dot. */
.tansi-map-pin,
.inventory-map-marker,
.search-center-marker {
    background: transparent;
    border: none;
}

/* =========================
   19. Statistics Cards Alignment
   ========================= */
.header-stats-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.header-title-section {
    flex: 0 0 auto;
    min-width: 200px;
}

.header-stats-section {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    flex: 1 1 0;
}

.header-stats-section > * {
    flex: 1 1 0;
    min-width: 0;
}

.stats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
}

.stats-row > * {
    flex: 1 1 0;
    min-width: 0;
}

.header-stats-section .mud-card-content,
.stats-row .mud-card-content {
    text-align: left;
}

.header-stats-section .mud-card-content .mud-icon-root,
.stats-row .mud-card-content .mud-icon-root {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.header-stats-section .mud-card-content .mud-typography-caption,
.stats-row .mud-card-content .mud-typography-caption {
    display: inline-block;
    vertical-align: middle;
}

.header-stats-section .mud-card-content .mud-typography-h4,
.header-stats-section .mud-card-content .mud-typography-h5,
.header-stats-section .mud-card-content .mud-typography-h6,
.stats-row .mud-card-content .mud-typography-h4,
.stats-row .mud-card-content .mud-typography-h5,
.stats-row .mud-card-content .mud-typography-h6 {
    text-align: center;
    display: block;
    margin-top: 4px;
}

/* =========================
   20. Radzen Dropdown — Dark Mode Support
   ========================= */

/* Dark mode - Dropdown container */
.mud-theme-dark .rz-dropdown,
.mud-theme-dark .mud-field .rz-dropdown {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .rz-dropdown .rz-inputtext,
.mud-theme-dark .rz-dropdown .rz-dropdown-label {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .rz-dropdown .rz-placeholder {
    color: var(--mud-palette-text-secondary);
}

.mud-theme-dark .rz-dropdown .rz-dropdown-trigger {
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
}

.mud-theme-dark .rz-dropdown .rz-dropdown-trigger .rzi {
    color: var(--mud-palette-text-secondary);
}

/* Dark mode - Dropdown panel/popup */
/* Radzen renders popup panels as body-level portals via JS, completely
   outside the MudBlazor theme wrapper. No ancestor-based selector can
   reach them reliably. Force readable text on the popup globally. */

/* Force all Radzen popup text to be dark/readable on the white background */
.rz-dropdown-panel,
.rz-multiselect-panel {
    color: #111827 !important;
}

.rz-dropdown-panel .rz-dropdown-item,
.rz-multiselect-panel .rz-dropdown-item {
    color: #111827 !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover,
.rz-multiselect-panel .rz-dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #111827 !important;
}

.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
.rz-multiselect-panel .rz-dropdown-item.rz-state-highlight {
    background-color: #0A728F !important;
    color: #ffffff !important;
}

/* Filter/search input in popup — dark text on white */
.rz-dropdown-panel .rz-dropdown-filter,
.rz-multiselect-panel .rz-dropdown-filter,
.rz-multiselect-header .rz-inputtext {
    color: #111827 !important;
}

.rz-dropdown-panel .rz-dropdown-filter::placeholder,
.rz-multiselect-panel .rz-dropdown-filter::placeholder,
.rz-multiselect-header .rz-inputtext::placeholder {
    color: #6b7280 !important;
}

/* Checkboxes — visible borders */
.rz-dropdown-panel .rz-chkbox-box,
.rz-multiselect-panel .rz-chkbox-box,
.rz-multiselect-header .rz-chkbox-box {
    border-color: #9ca3af !important;
    background-color: #ffffff !important;
}

.rz-dropdown-panel .rz-chkbox-box.rz-state-active,
.rz-multiselect-panel .rz-chkbox-box.rz-state-active,
.rz-multiselect-header .rz-chkbox-box.rz-state-active {
    background-color: #0A728F !important;
    border-color: #0A728F !important;
}

.rz-chkbox-box .rzi {
    color: #ffffff !important;
}

/* "Select all" header */
.rz-multiselect-header {
    color: #111827 !important;
}

/* Clear button */
.mud-theme-dark .rz-dropdown .rz-dropdown-clear-icon {
    color: #D0D4E4;
}

/* Multiselect chips */
.mud-theme-dark .rz-multiselect-chip {
    background-color: #0A728F;
    color: #ffffff;
}

/* Taller popup list: show ~10 rows */
.rz-dropdown-panel:has(.rz-chkbox) .rz-dropdown-items-wrapper,
.rz-multiselect-panel:has(.rz-chkbox) .rz-multiselect-items-wrapper {
    height: 400px !important;
    max-height: 400px !important;
}

/* Scrollbar in popup */
.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-thumb,
.rz-multiselect-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
}

.rz-dropdown-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-track,
.rz-multiselect-panel .rz-dropdown-items-wrapper::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

/* Make Radzen dropdown match MudBlazor outlined input height */

/* MudField wrapper — must be full width to match MudTextField */
.rz-in-mud.mud-field {
    width: 100%;
}

.rz-in-mud .rz-dropdown {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.rz-in-mud .rz-dropdown .rz-dropdown-label,
.rz-in-mud .rz-dropdown .rz-inputtext {
    min-height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.rz-in-mud .rz-dropdown .rz-dropdown-trigger {
    min-height: 40px;
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0 6px;
    min-width: 28px;
}

.rz-in-mud .rz-dropdown .rz-dropdown-clear-icon {
    top: 50%;
    transform: translateY(-50%);
}

/* Multi-select with chips: allow wrapping and auto-height */
.rz-in-mud .rz-dropdown .rz-multiselect-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    min-height: 40px;
}

.rz-in-mud .mud-input-control {
    padding: 0;
}

/* =========================
   21. Business Directory — Listing Page
   ========================= */

/* --- Directory Header Hero --- */
.business-directory-page .mud-paper:first-child,
[class*="business-directory"] > .mud-container > .mud-paper:first-of-type {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Header section — gradient banner */
.mud-container > .mud-paper.pa-6.mb-4 {
    position: relative;
}

.mud-theme-dark .mud-container > .mud-paper.pa-6.mb-4 {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.12) 0%, rgba(99, 102, 241, 0.08) 50%, rgba(11, 126, 158, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .mud-container > .mud-paper.pa-6.mb-4 {
    background: linear-gradient(135deg, rgba(10, 114, 143, 0.06) 0%, rgba(99, 102, 241, 0.03) 50%, #f8f9fb 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Search & Filter Bar --- */
.mud-container > .mud-paper.pa-4.mb-4 {
    border-radius: var(--radius-md);
}

.mud-theme-dark .mud-container > .mud-paper.pa-4.mb-4 {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .mud-container > .mud-paper.pa-4.mb-4 {
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Business Listing Cards --- */
.hover-card {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth), border-color var(--transition-fast) !important;
    position: relative;
}

.hover-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mud-palette-primary), rgba(99, 102, 241, 0.6));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.hover-card:hover::after {
    opacity: 1;
}

.hover-card:hover {
    transform: translateY(-6px) !important;
}

.mud-theme-dark .hover-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, #262A40 0%, #22263A 100%);
}

.mud-theme-dark .hover-card:hover {
    border-color: rgba(74, 206, 242, 0.20);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(74, 206, 242, 0.10) !important;
}

.mud-theme-light .hover-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.mud-theme-light .hover-card:hover {
    border-color: rgba(10, 114, 143, 0.15);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(10, 114, 143, 0.08) !important;
}

/* Card media / logo placeholder */
.hover-card .mud-card-media {
    transition: transform var(--transition-smooth);
}

.hover-card:hover .mud-card-media {
    transform: scale(1.03);
}

/* Placeholder when no logo */
.hover-card div[style*="height: 200px"][style*="background-color"] {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.08), rgba(99, 102, 241, 0.05)) !important;
    transition: background var(--transition-smooth);
}

.mud-theme-dark .hover-card div[style*="height: 200px"][style*="background-color"] {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.12), rgba(99, 102, 241, 0.06)) !important;
}

/* Card content spacing */
.hover-card .mud-card-content .mud-stack {
    gap: 8px;
}

/* Business name in cards */
.hover-card .mud-typography-h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Truncated description */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* Load more button */
.mud-container > .d-flex.justify-center.mt-4 .mud-button {
    border-radius: var(--radius-md);
    padding: 10px 32px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Empty state — no businesses found */
.mud-container > .mud-paper.pa-8.text-center {
    border-radius: var(--radius-lg);
    padding: 64px 32px !important;
}

.mud-theme-dark .mud-container > .mud-paper.pa-8.text-center {
    background: linear-gradient(180deg, rgba(11, 126, 158, 0.04), transparent);
    border: 2px dashed rgba(255, 255, 255, 0.08);
}

.mud-theme-light .mud-container > .mud-paper.pa-8.text-center {
    background: linear-gradient(180deg, rgba(11, 126, 158, 0.02), transparent);
    border: 2px dashed rgba(0, 0, 0, 0.08);
}

/* Popular tags section */
.mud-container > .mud-paper .mud-stack[class*="Row"] .mud-chip {
    transition: all var(--transition-fast);
    border-radius: 20px;
}

.mud-container > .mud-paper .mud-stack[class*="Row"] .mud-chip:hover {
    transform: translateY(-1px);
}

/* --- Skeleton loading — shimmer effect --- */
.mud-skeleton {
    border-radius: var(--radius-sm);
}

.mud-theme-dark .hover-card .mud-skeleton {
    background-color: rgba(255, 255, 255, 0.06);
}

/* =========================
   21b. Business Directory — Detail Page
   ========================= */

/* --- Sticky Header --- */
.business-detail-page .business-sticky-header {
    transition: all var(--transition-smooth);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.mud-theme-dark .business-detail-page .business-sticky-header {
    background: rgba(15, 17, 23, 0.88) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.mud-theme-light .business-detail-page .business-sticky-header {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.business-detail-page .business-sticky-header.collapsed .header-badges,
.business-detail-page .business-sticky-header.collapsed .header-full-actions {
    display: none !important;
}

/* Sticky header avatar */
.business-sticky-header .mud-avatar {
    border-width: 2px !important;
    transition: all var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Sticky header action buttons */
.business-sticky-header .mud-button {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all var(--transition-fast);
}

.business-sticky-header .mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 126, 158, 0.30);
}

/* Header badges */
.business-sticky-header .header-badges .mud-chip {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
}

/* --- Hero Section --- */
.business-detail-page .mud-grid > .mud-item:first-child > .mud-paper {
    border-radius: var(--radius-md);
}

.business-detail-page .mud-grid > .mud-item:last-child > .mud-paper {
    border-radius: var(--radius-md);
}

.mud-theme-dark .business-detail-page .mud-grid > .mud-item > .mud-paper[class*="pa-5"] {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(26, 29, 43, 1) 0%, rgba(26, 29, 43, 0.95) 100%);
}

.mud-theme-light .business-detail-page .mud-grid > .mud-item > .mud-paper[class*="pa-5"] {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
}

/* Hero headline */
.business-detail-page .mud-typography-h5[style*="font-weight: 600"] {
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Hero description — better readability */
.business-detail-page .mud-typography-body1[style*="line-height: 1.7"] {
    font-size: 0.9375rem;
}

/* Key info chips in hero */
.business-detail-page .d-flex.flex-wrap.gap-2 .mud-chip {
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.business-detail-page .d-flex.flex-wrap.gap-2 .mud-chip-outlined {
    backdrop-filter: blur(4px);
}

/* Availability chip special treatment */
.business-detail-page .mud-chip-filled-success {
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
    50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15); }
}

/* --- Contact Card (right column) --- */
.business-detail-page .mud-paper[style*="height: 100%"] .mud-stack {
    gap: 12px;
}

/* Contact rows — subtle dividers */
.business-detail-page .mud-paper[style*="height: 100%"] .d-flex.align-center {
    padding: 4px 0;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
}

.business-detail-page .mud-paper[style*="height: 100%"] .d-flex.align-center:hover {
    padding-left: 0;
}

.mud-theme-dark .business-detail-page .mud-paper[style*="height: 100%"] .d-flex.align-center:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.mud-theme-light .business-detail-page .mud-paper[style*="height: 100%"] .d-flex.align-center:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Social media buttons */
.business-detail-page .mud-icon-button[target="_blank"] {
    transition: all var(--transition-fast);
    border-radius: 50%;
}

.business-detail-page .mud-icon-button[target="_blank"]:hover {
    transform: scale(1.15);
}

.mud-theme-dark .business-detail-page .mud-icon-button[target="_blank"]:hover {
    background-color: rgba(74, 206, 242, 0.12);
}

.mud-theme-light .business-detail-page .mud-icon-button[target="_blank"]:hover {
    background-color: rgba(10, 114, 143, 0.08);
}

/* --- Trust Strip --- */
.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast);
    min-width: 150px !important;
    padding: 16px !important;
    position: relative;
    overflow: hidden;
}

.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mud-palette-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper:hover {
    transform: translateY(-2px);
}

.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper:hover::before {
    opacity: 1;
}

.mud-theme-dark .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(26, 29, 43, 0.8);
}

.mud-theme-dark .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper:hover {
    border-color: rgba(74, 206, 242, 0.20);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}

.mud-theme-light .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper {
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.mud-theme-light .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper:hover {
    border-color: rgba(10, 114, 143, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Trust strip values */
.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-typography-h6 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Trust strip captions */
.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-typography-caption {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}

/* Trust strip icons */
.business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-icon-root {
    font-size: 1.75rem !important;
    margin-bottom: 4px;
}

/* --- Tabbed Content Area --- */
.business-detail-page .mud-tabs {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mud-theme-dark .business-detail-page .mud-tabs {
    background: rgba(26, 29, 43, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .business-detail-page .mud-tabs {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Tab header */
.business-detail-page .mud-tabs .mud-tab {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-height: 52px;
    transition: all var(--transition-fast);
}

.mud-theme-dark .business-detail-page .mud-tabs .mud-tab:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.mud-theme-light .business-detail-page .mud-tabs .mud-tab:hover {
    background-color: rgba(10, 114, 143, 0.04);
}

/* Tab badges */
.business-detail-page .mud-tabs .mud-badge .mud-badge-content {
    font-weight: 700;
    font-size: 0.625rem;
}

/* --- Overview Tab Cards --- */
.business-detail-page .mud-tab-panel .mud-paper[style*="border-radius: 12px"] {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth);
}

.mud-theme-dark .business-detail-page .mud-tab-panel .mud-paper[style*="border-radius: 12px"] {
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.mud-theme-light .business-detail-page .mud-tab-panel .mud-paper[style*="border-radius: 12px"] {
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Section titles within tabs */
.business-detail-page .mud-tab-panel .mud-typography-h6[style*="font-weight: 600"] {
    letter-spacing: -0.01em;
    font-size: 1rem;
    position: relative;
    padding-left: 12px;
}

.business-detail-page .mud-tab-panel .mud-typography-h6[style*="font-weight: 600"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
}

/* Capabilities chips */
.business-detail-page .mud-tab-panel .mud-chip[style*="border-radius: 20px"] {
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 4px 16px;
    transition: all var(--transition-fast);
}

.business-detail-page .mud-tab-panel .mud-chip[style*="border-radius: 20px"]:hover {
    transform: translateY(-1px);
}

/* Business hours table */
.business-detail-page .mud-simple-table td {
    padding: 8px 12px;
    font-size: 0.9rem;
}

.business-detail-page .mud-simple-table td:first-child {
    font-weight: 600;
    font-size: 0.875rem;
}

/* --- Project Cards --- */
.business-detail-page .mud-tab-panel .mud-card[style*="border-radius: 12px"] {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast);
    overflow: hidden;
}

.business-detail-page .mud-tab-panel .mud-card[style*="border-radius: 12px"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--mud-palette-primary);
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.business-detail-page .mud-tab-panel .mud-card[style*="border-radius: 12px"]:hover::before {
    opacity: 1;
}

.mud-theme-dark .business-detail-page .mud-tab-panel .mud-card[style*="border-radius: 12px"] {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-dark .business-detail-page .mud-tab-panel .mud-card[style*="border-radius: 12px"]:hover {
    border-color: rgba(74, 206, 242, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}

.mud-theme-light .business-detail-page .mud-tab-panel .mud-card[style*="border-radius: 12px"]:hover {
    box-shadow: var(--shadow-card-hover);
}

/* --- Certifications Table --- */
.business-detail-page .mud-simple-table[style*="border-radius: 12px"] {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.mud-theme-dark .business-detail-page .mud-simple-table[style*="border-radius: 12px"] {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .business-detail-page .mud-simple-table[style*="border-radius: 12px"] {
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.business-detail-page .mud-simple-table thead th {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 16px;
}

.mud-theme-dark .business-detail-page .mud-simple-table thead th {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .business-detail-page .mud-simple-table thead th {
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.business-detail-page .mud-simple-table tbody td {
    padding: 12px 16px;
    font-size: 0.875rem;
}

/* --- Team / Personnel Cards --- */
.business-detail-page .mud-tab-panel .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 12px"] {
    transition: all var(--transition-fast);
}

.business-detail-page .mud-tab-panel .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 12px"]:hover {
    transform: translateY(-2px);
}

.mud-theme-dark .business-detail-page .mud-tab-panel .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 12px"]:hover {
    border-color: rgba(74, 206, 242, 0.20);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.mud-theme-light .business-detail-page .mud-tab-panel .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 12px"]:hover {
    border-color: rgba(10, 114, 143, 0.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Personnel avatar */
.business-detail-page .mud-tab-panel .mud-avatar-medium {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Reviews Section --- */

/* Rating summary card */
.business-detail-page div[style*="border-radius: 12px"][style*="padding: 20px"] {
    border-radius: var(--radius-md) !important;
    padding: 24px !important;
}

.mud-theme-dark .business-detail-page div[style*="border-radius: 12px"][style*="padding: 20px"] {
    background: rgba(11, 126, 158, 0.06) !important;
    border-color: rgba(74, 206, 242, 0.12) !important;
}

.mud-theme-light .business-detail-page div[style*="border-radius: 12px"][style*="padding: 20px"] {
    background: rgba(10, 114, 143, 0.03) !important;
    border-color: rgba(10, 114, 143, 0.08) !important;
}

/* Large rating number */
.business-detail-page .mud-typography-h2[style*="font-weight: 300"] {
    font-weight: 200 !important;
    font-size: 3rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

/* Rating breakdown bars */
.business-detail-page div[style*="flex-grow: 1"][style*="height: 8px"] {
    height: 10px !important;
    border-radius: 5px !important;
}

.business-detail-page div[style*="flex-grow: 1"][style*="height: 8px"] > div {
    border-radius: 5px !important;
}

/* Individual review cards */
.business-detail-page .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 8px"] {
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast);
}

.mud-theme-dark .business-detail-page .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 8px"]:hover {
    border-color: rgba(255, 255, 255, 0.10);
    background-color: rgba(255, 255, 255, 0.02);
}

.mud-theme-light .business-detail-page .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 8px"]:hover {
    border-color: rgba(0, 0, 0, 0.10);
    background-color: rgba(0, 0, 0, 0.01);
}

/* Reviewer avatar */
.business-detail-page .mud-avatar-small[style*="background: linear-gradient"] {
    box-shadow: 0 2px 8px rgba(11, 126, 158, 0.20);
}

/* Review text */
.business-detail-page div[style*="margin-left: 44px"] .mud-typography-body2[style*="line-height: 1.6"] {
    font-size: 0.9rem;
    line-height: 1.7 !important;
}

/* No reviews empty state */
.business-detail-page div[style*="border: 2px dashed"] {
    border-radius: var(--radius-md) !important;
    padding: 48px 24px !important;
}

.mud-theme-dark .business-detail-page div[style*="border: 2px dashed"] {
    background: rgba(11, 126, 158, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.mud-theme-light .business-detail-page div[style*="border: 2px dashed"] {
    background: rgba(11, 126, 158, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* --- Sidebar Widgets --- */
.business-detail-page .d-none.d-md-block .mud-paper {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-smooth);
}

.mud-theme-dark .business-detail-page .d-none.d-md-block .mud-paper {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .business-detail-page .d-none.d-md-block .mud-paper {
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Profile completeness ring */
.business-detail-page .mud-progress-circular {
    filter: drop-shadow(0 0 8px rgba(11, 126, 158, 0.20));
}

/* Shortlist widget — warm accent */
.business-detail-page .d-none.d-md-block .mud-paper:first-child {
    position: relative;
}

/* Similar businesses cards */
.business-detail-page .d-none.d-md-block .mud-paper[style*="cursor: pointer"] {
    transition: all var(--transition-fast) !important;
}

.business-detail-page .d-none.d-md-block .mud-paper[style*="cursor: pointer"]:hover {
    transform: translateX(4px);
}

.mud-theme-dark .business-detail-page .d-none.d-md-block .mud-paper[style*="cursor: pointer"]:hover {
    border-color: rgba(74, 206, 242, 0.20) !important;
    background-color: rgba(74, 206, 242, 0.04);
}

.mud-theme-light .business-detail-page .d-none.d-md-block .mud-paper[style*="cursor: pointer"]:hover {
    border-color: rgba(10, 114, 143, 0.15) !important;
    background-color: rgba(10, 114, 143, 0.02);
}

/* --- Photo Gallery --- */
.photo-thumbnail {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth) !important;
}

.photo-thumbnail:hover {
    transform: translateY(-4px) scale(1.02) !important;
}

.mud-theme-dark .photo-thumbnail {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-dark .photo-thumbnail:hover {
    border-color: rgba(74, 206, 242, 0.20);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.40) !important;
}

.mud-theme-light .photo-thumbnail:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
}

.photo-thumbnail .mud-card-media {
    transition: transform var(--transition-smooth);
}

.photo-thumbnail:hover .mud-card-media {
    transform: scale(1.08);
}

/* --- Locations Section --- */
.business-detail-page .mud-paper[style*="border-radius: 12px"]:has(#locations-map) {
    overflow: hidden;
}

/* Location map container */
.business-detail-page div[id^="locations-map"] {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
}

/* Location list cards */
.business-detail-page .mud-paper[style*="border: 1px solid var(--mud-palette-divider)"][style*="border-radius: 8px"]:has(.mud-icon-root) {
    transition: all var(--transition-fast);
}

/* --- Mobile Action Bar --- */
.mobile-action-bar {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 10px 16px !important;
}

.mud-theme-dark .mobile-action-bar {
    background: rgba(15, 17, 23, 0.92) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.mud-theme-light .mobile-action-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.mobile-action-bar .mud-button {
    border-radius: var(--radius-sm);
    font-weight: 600;
    min-height: 42px;
}

/* --- Shareable Link Section --- */
.business-detail-page .mud-paper.text-center[style*="border-radius: 12px"] {
    border-radius: var(--radius-md) !important;
}

.mud-theme-dark .business-detail-page .mud-paper.text-center[style*="border-radius: 12px"] {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.06), transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .business-detail-page .mud-paper.text-center[style*="border-radius: 12px"] {
    background: linear-gradient(135deg, rgba(10, 114, 143, 0.03), transparent);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Back to Directory Button --- */
.business-detail-page .mud-button[class*="mb-3"][style*=""] {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.business-detail-page .mud-button[class*="mb-3"]:hover {
    transform: translateX(-2px);
}

/* --- Dialog Enhancements for Business Details --- */
.business-detail-page .mud-dialog {
    border-radius: var(--radius-lg) !important;
}

/* Photo modal */
.business-detail-page .mud-dialog .mud-image {
    border-radius: var(--radius-sm);
}

/* Photo navigation */
.business-detail-page .mud-dialog .mud-icon-button-outlined {
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.business-detail-page .mud-dialog .mud-icon-button-outlined:hover:not(:disabled) {
    transform: scale(1.10);
    box-shadow: 0 4px 12px rgba(11, 126, 158, 0.25);
}

/* --- Responsive Adjustments --- */
@media (max-width: 959.95px) {
    .business-detail-page {
        padding-bottom: 72px !important;
    }

    .business-sticky-header .mud-button-outlined[class*="d-none d-sm-flex"] {
        display: none !important;
    }

    /* Trust strip — full width cards on mobile */
    .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-paper {
        min-width: 120px !important;
        padding: 12px !important;
    }

    .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-icon-root {
        font-size: 1.5rem !important;
    }

    .business-detail-page .d-flex.gap-3[style*="min-width: max-content"] .mud-typography-h6 {
        font-size: 1.1rem;
    }
}

@media (max-width: 599.95px) {
    /* Simplify hero on very small screens */
    .business-detail-page .mud-paper[class*="pa-5"] {
        padding: 16px !important;
    }

    /* Stack contact card below hero */
    .business-detail-page .mud-typography-h5[style*="font-weight: 600"] {
        font-size: 1.2rem;
    }

    /* Photo gallery — 2 columns on mobile */
    .business-detail-page .mud-grid > .mud-item[class*="xs-6"][class*="sm-4"] {
        flex-basis: 50%;
        max-width: 50%;
    }
}

/* =========================
   22. Rich Text Editor
   ========================= */
.rich-text-editor-wrapper {
    margin-bottom: 16px;
}

.rich-text-editor-wrapper .rz-html-editor {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.rich-text-editor-wrapper .rz-html-editor:focus-within {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
}

.rich-text-editor-wrapper .rz-html-editor-content {
    background-color: #ffffff !important;
    color: #111827 !important;
    padding: 12px;
}

.rich-text-editor-wrapper .rz-html-editor-content ol {
    padding-left: 24px;
    margin: 8px 0;
}

.rich-text-editor-wrapper .rz-html-editor-content ul {
    padding-left: 24px;
    margin: 8px 0;
}

.rich-text-editor-wrapper .rz-html-editor-content li {
    margin: 4px 0;
}

/* Rendered HTML content (MarkupString output from rich text editor) */
.html-content ul,
.html-content ol {
    padding-left: 24px;
    margin: 8px 0;
}

.html-content li {
    margin: 4px 0;
}

.rich-text-editor-wrapper .rz-html-editor-toolbar {
    background-color: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 4px;
}

/* Dark mode */
.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor {
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-content {
    background-color: #ffffff;
    color: #111827;
}

/* Ensure Radzen HTML editor content always uses dark text.
   The body:has(.mud-theme-dark) dropdown fix sets --rz-text-color to light,
   which Radzen injects into the editor iframe. Reset it here. */
.rz-html-editor {
    --rz-text-color: #111827 !important;
    --rz-input-color: #111827 !important;
}

.mud-theme-dark .rz-html-editor {
    --rz-text-color: #111827 !important;
    --rz-input-color: #111827 !important;
}

/* Global dark mode fix — force all RadzenHtmlEditor content areas to use
   dark text on white background so content is always visible. */
.mud-theme-dark .rz-html-editor-content {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Force the iframe inside the editor to have a white background */
.mud-theme-dark .rz-html-editor-content iframe {
    background-color: #ffffff !important;
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar {
    background-color: var(--mud-palette-background);
    border-bottom-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    margin: 2px;
    transition: all var(--transition-fast);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button .rzi,
.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button i {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--mud-palette-primary);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button:hover .rzi,
.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button:hover i {
    color: var(--mud-palette-primary);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button.rz-state-active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.3);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button.rz-state-active .rzi,
.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button.rz-state-active i {
    color: var(--mud-palette-primary);
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button:disabled .rzi,
.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-toolbar .rz-button:disabled i {
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
}

.mud-theme-dark .rich-text-editor-wrapper .rz-html-editor-separator {
    background-color: rgba(255, 255, 255, 0.12);
    width: 1px;
    margin: 0 4px;
}

/* =========================
   23. Scrollbar — Subtle & Matching
   ========================= */
.mud-theme-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mud-theme-dark ::-webkit-scrollbar-track {
    background: transparent;
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* =========================
   24. Focus States — Accessibility
   ========================= */
*:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Remove default focus ring when using mouse */
.mud-button:focus:not(:focus-visible),
.mud-nav-link:focus:not(:focus-visible),
.mud-chip:focus:not(:focus-visible) {
    outline: none;
}

/* =========================
   25. Skeleton Loading — Smoother
   ========================= */
.mud-skeleton {
    border-radius: var(--radius-sm);
}

/* =========================
   26. Empty States
   ========================= */
.empty-state-container {
    padding: 48px 24px;
    text-align: center;
}

.empty-state-container .mud-icon-root {
    opacity: 0.4;
    margin-bottom: 16px;
}

/* =========================
   27. Print Styles
   ========================= */
@media print {
    .mud-appbar,
    .mud-drawer,
    .avatar-edit-menu,
    .profile-action {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
    }

    .profile-header {
        background: none !important;
    }
}

/* =========================
   28. Drawer — Refined
   ========================= */
.mud-theme-dark .mud-drawer {
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.mud-theme-light .mud-drawer {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04);
}

/* =========================
   29. Reduced Motion — Accessibility
   ========================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================
   30. Form Sections — Visual Grouping
   ========================= */

/* Section headers in forms */
.mud-typography-h6 .mud-icon-root {
    vertical-align: text-bottom;
}

/* MudGrid in forms — consistent spacing */
.mud-grid.form-section-grid {
    margin-bottom: 24px;
}

/* Helper text — more readable */
.mud-input-helper-text {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 4px;
}

/* Validation message styling */
.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.8125rem;
    margin-top: 4px;
    font-weight: 500;
}

/* =========================
   31. MudSelect & Autocomplete — Better Touch
   ========================= */

/* Popover menus — rounded, polished */
.mud-popover-open {
    border-radius: 12px !important;
    overflow: hidden;
}

.mud-theme-dark .mud-popover-open {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
}

.mud-theme-light .mud-popover-open {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Dark mode — dropdown / popover / picker backgrounds */
.mud-theme-dark .mud-popover .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .mud-picker {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .mud-picker-container {
    background-color: var(--mud-palette-surface) !important;
}

.mud-theme-dark .mud-picker-calendar-header,
.mud-theme-dark .mud-picker-calendar-header-switch {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .mud-picker-toolbar {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text, #fff);
}

.mud-theme-dark .mud-picker-calendar .mud-day:not(.mud-selected):not(.mud-current) {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .mud-list {
    background-color: var(--mud-palette-surface) !important;
}

.mud-theme-dark .mud-list-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.mud-theme-dark .mud-menu .mud-paper {
    background-color: var(--mud-palette-surface) !important;
}

/* Taller dropdown lists so more items are visible */
.mud-select-menu,
.mud-autocomplete-menu {
    max-height: 450px !important;
}

/* List items in dropdowns — larger touch targets */
.mud-list-item {
    min-height: 40px;
    font-size: 0.9rem;
}

/* =========================
   32. Page Headers — Consistent
   ========================= */

/* Large page titles */
.mud-typography-h4 {
    letter-spacing: -0.02em;
}

/* Subtitle under page titles */
.mud-typography-h4 + .mud-typography-subtitle1 {
    margin-top: 4px;
}

/* =========================
   33. Badges & Status Indicators
   ========================= */
.mud-badge .mud-badge-content {
    font-weight: 600;
    font-size: 0.6875rem;
}

/* =========================
   34. Progress Indicators — Improved
   ========================= */
.mud-progress-circular {
    filter: drop-shadow(0 0 4px rgba(11, 126, 158, 0.25));
}

.mud-progress-linear {
    border-radius: 4px;
    overflow: hidden;
}

/* =========================
   35. Tooltip — Readable
   ========================= */
.mud-tooltip {
    font-size: 0.8125rem !important;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    max-width: 280px;
    line-height: 1.4;
}

/* =========================
   36. Light Mode — Specific Enhancements
   ========================= */

/* Cards in light mode — subtle shadow, not flat */
.mud-theme-light .mud-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
}

.mud-theme-light .mud-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

/* Better contrast for secondary text in light mode */
.mud-theme-light .mud-typography-caption {
    color: #6b7280;
}

.mud-theme-light .mud-typography-subtitle1[class*="Color"] {
    font-weight: 500;
}

/* Selection highlight */
.mud-theme-light .mud-selected-item {
    background-color: rgba(10, 114, 143, 0.08) !important;
}

.mud-theme-dark .mud-selected-item {
    background-color: rgba(74, 206, 242, 0.12) !important;
}

/* =========================
   37. Switch/Toggle — More Visible
   ========================= */
.mud-switch {
    transform: scale(1.05);
    transform-origin: left center;
}

/* =========================
   38. Breadcrumb-like Context Indicators
   ========================= */
.mud-breadcrumbs .mud-breadcrumb-item {
    font-size: 0.875rem;
    font-weight: 500;
}

/* =========================
   39. Alert Improvements — Readability
   ========================= */
.mud-alert-filled .mud-alert-message {
    font-weight: 500;
    font-size: 0.9rem;
}

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

/* Info alerts — better dark mode */
.mud-theme-dark .mud-alert-standard-info {
    background-color: rgba(91, 154, 255, 0.10);
    border: 1px solid rgba(91, 154, 255, 0.20);
}

.mud-theme-dark .mud-alert-standard-warning {
    background-color: rgba(255, 193, 77, 0.10);
    border: 1px solid rgba(255, 193, 77, 0.20);
}

.mud-theme-dark .mud-alert-standard-error {
    background-color: rgba(232, 121, 160, 0.10);
    border: 1px solid rgba(232, 121, 160, 0.20);
}

.mud-theme-dark .mud-alert-standard-success {
    background-color: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.20);
}

/* =========================
   40. Job Board — Listing Page
   ========================= */

/* --- Page Header --- */
.job-listing-page .job-page-header {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.mud-theme-dark .job-listing-page .job-page-header {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.10) 0%, rgba(99, 102, 241, 0.06) 50%, rgba(11, 126, 158, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .job-listing-page .job-page-header {
    background: linear-gradient(135deg, rgba(10, 114, 143, 0.05) 0%, rgba(99, 102, 241, 0.02) 50%, #f8f9fb 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.job-listing-page .job-page-header .mud-typography-h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* --- Search & Filter Bar --- */
.job-listing-page .job-search-bar {
    border-radius: var(--radius-md);
}

.mud-theme-dark .job-listing-page .job-search-bar {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .job-listing-page .job-search-bar {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
}

/* Post Job CTA button */
.job-listing-page .post-job-btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    min-height: 44px;
    transition: all var(--transition-fast);
}

.job-listing-page .post-job-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(11, 126, 158, 0.30);
}

/* --- View Toggle & Results Toolbar --- */
.job-listing-page .results-toolbar {
    padding: 4px 0;
}

.job-listing-page .results-toggle .mud-button {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    transition: all var(--transition-fast);
}

.job-listing-page .sort-button {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
}

/* --- Job Tile Cards --- */
.job-listing-page .job-tile {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth), border-color var(--transition-fast) !important;
    position: relative;
    height: 100%;
}

.job-listing-page .job-tile::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mud-palette-primary), rgba(99, 102, 241, 0.6));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.job-listing-page .job-tile:hover::after {
    opacity: 1;
}

.job-listing-page .job-tile:hover {
    transform: translateY(-6px) !important;
}

.mud-theme-dark .job-listing-page .job-tile {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, #262A40 0%, #22263A 100%);
}

.mud-theme-dark .job-listing-page .job-tile:hover {
    border-color: rgba(74, 206, 242, 0.20);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(74, 206, 242, 0.10) !important;
}

.mud-theme-light .job-listing-page .job-tile {
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.mud-theme-light .job-listing-page .job-tile:hover {
    border-color: rgba(10, 114, 143, 0.15);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(10, 114, 143, 0.08) !important;
}

/* Job card title */
.job-listing-page .job-tile .job-tile-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Job card description truncation */
.job-listing-page .job-tile .job-tile-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* Job card meta footer */
.job-listing-page .job-tile .job-tile-meta {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 12px;
    margin-top: 12px;
}

/* Job card salary highlight */
.job-listing-page .job-tile .job-salary {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* View Details button in cards */
.job-listing-page .job-tile .mud-card-actions .mud-button {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.job-listing-page .job-tile .mud-card-actions .mud-button:hover {
    transform: translateX(2px);
}

/* --- DataGrid View --- */
.job-listing-page .job-grid {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.mud-theme-dark .job-listing-page .job-grid {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .job-listing-page .job-grid {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
}

.job-listing-page .job-grid .mud-table-head th {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mud-theme-dark .job-listing-page .job-grid .mud-table-head th {
    background: rgba(255, 255, 255, 0.03);
}

.mud-theme-light .job-listing-page .job-grid .mud-table-head th {
    background: rgba(0, 0, 0, 0.02);
}

.job-listing-page .job-grid .mud-table-row:hover {
    transition: background-color var(--transition-fast);
}

.mud-theme-dark .job-listing-page .job-grid .mud-table-row:hover td {
    background-color: rgba(74, 206, 242, 0.04);
}

.mud-theme-light .job-listing-page .job-grid .mud-table-row:hover td {
    background-color: rgba(10, 114, 143, 0.03);
}

/* --- Empty State --- */
.job-listing-page .job-empty-state {
    border-radius: var(--radius-lg);
    padding: 64px 32px;
    text-align: center;
}

.mud-theme-dark .job-listing-page .job-empty-state {
    background: linear-gradient(180deg, rgba(11, 126, 158, 0.04), transparent);
    border: 2px dashed rgba(255, 255, 255, 0.08);
}

.mud-theme-light .job-listing-page .job-empty-state {
    background: linear-gradient(180deg, rgba(10, 114, 143, 0.02), transparent);
    border: 2px dashed rgba(0, 0, 0, 0.08);
}

/* --- Loading Skeleton Cards --- */
.job-listing-page .job-skeleton-card {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mud-theme-dark .job-listing-page .job-skeleton-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .job-listing-page .job-skeleton-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Login Info Banner --- */
.job-listing-page .login-banner {
    border-radius: var(--radius-md);
    border-left: 4px solid var(--mud-palette-info);
}

.mud-theme-dark .job-listing-page .login-banner {
    background: rgba(74, 206, 242, 0.06);
    border-color: rgba(74, 206, 242, 0.30);
}

/* --- Map View --- */
.job-listing-page .mud-paper:has(.leaflet-container) {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* =========================
   40b. Job Board — Details Page
   ========================= */

/* --- Details Header --- */
.job-detail-page .job-detail-header {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.mud-theme-dark .job-detail-page .job-detail-header {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.08) 0%, rgba(99, 102, 241, 0.04) 50%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .job-detail-page .job-detail-header {
    background: linear-gradient(135deg, rgba(10, 114, 143, 0.04) 0%, rgba(99, 102, 241, 0.02) 50%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
}

.job-detail-page .job-detail-header .mud-typography-h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Back button */
.job-detail-page .back-btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.job-detail-page .back-btn:hover {
    transform: translateX(-3px);
}

/* --- Salary Card --- */
.job-detail-page .salary-card {
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    padding: 24px;
}

.mud-theme-dark .job-detail-page .salary-card {
    background: linear-gradient(135deg, rgba(74, 206, 242, 0.18) 0%, rgba(99, 102, 241, 0.10) 100%);
    border: 1px solid rgba(74, 206, 242, 0.20);
    color: var(--text-heading);
}

.mud-theme-light .job-detail-page .salary-card {
    background: linear-gradient(135deg, #0A728F 0%, #0B7E9E 100%);
    border: none;
    color: #ffffff;
}

.job-detail-page .salary-card .salary-amount {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.job-detail-page .salary-card .salary-label {
    opacity: 0.85;
    font-weight: 500;
}

.job-detail-page .salary-card .salary-divider {
    opacity: 0.25;
}

.mud-theme-dark .job-detail-page .salary-card .salary-divider {
    background-color: rgba(255, 255, 255, 0.20);
}

.mud-theme-light .job-detail-page .salary-card .salary-divider {
    background-color: rgba(255, 255, 255, 0.30);
}

.job-detail-page .salary-card .salary-date {
    opacity: 0.8;
}

/* Apply / Action Buttons */
.job-detail-page .apply-btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    min-height: 48px;
    transition: all var(--transition-fast);
}

.job-detail-page .apply-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.30);
}

.job-detail-page .action-btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

/* --- Content Panels (Description, Requirements, etc.) --- */
.job-detail-page .content-panel {
    border-radius: var(--radius-md);
    transition: all var(--transition-smooth);
}

.mud-theme-dark .job-detail-page .content-panel {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(26, 29, 43, 1) 0%, rgba(26, 29, 43, 0.95) 100%);
}

.mud-theme-light .job-detail-page .content-panel {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
}

/* Section titles with accent bar */
.job-detail-page .section-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 14px;
}

.job-detail-page .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
}

/* Job description text */
.job-detail-page .job-description-text {
    line-height: 1.7;
    font-size: 0.9375rem;
}

/* --- Requirement Cards --- */
.job-detail-page .requirement-card {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.job-detail-page .requirement-card-required {
    border-left: 4px solid var(--mud-palette-error);
}

.job-detail-page .requirement-card-preferred {
    border-left: 4px solid var(--mud-palette-info);
}

.mud-theme-dark .job-detail-page .requirement-card {
    border-color: rgba(255, 255, 255, 0.06);
}

.mud-theme-dark .job-detail-page .requirement-card:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.mud-theme-light .job-detail-page .requirement-card:hover {
    background-color: rgba(0, 0, 0, 0.01);
}

/* Match score ring */
.job-detail-page .mud-progress-circular {
    filter: drop-shadow(0 0 8px rgba(11, 126, 158, 0.20));
}

/* --- Sidebar Cards --- */
.job-detail-page .sidebar-card {
    border-radius: var(--radius-md);
    transition: all var(--transition-smooth);
}

.mud-theme-dark .job-detail-page .sidebar-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(26, 29, 43, 1) 0%, rgba(26, 29, 43, 0.95) 100%);
}

.mud-theme-light .job-detail-page .sidebar-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
}

/* Sidebar section title */
.job-detail-page .sidebar-card .section-title {
    font-size: 1rem;
}

/* Job summary list */
.job-detail-page .sidebar-card .mud-list-item {
    padding: 8px 4px;
}

/* --- Indigenous Communities Cards --- */
.job-detail-page .indigenous-community-card {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.mud-theme-dark .job-detail-page .indigenous-community-card {
    background-color: rgba(74, 206, 242, 0.06);
    border: 1px solid rgba(74, 206, 242, 0.12);
}

.mud-theme-light .job-detail-page .indigenous-community-card {
    background-color: rgba(10, 114, 143, 0.04);
    border: 1px solid rgba(10, 114, 143, 0.10);
}

.job-detail-page .indigenous-community-card:hover {
    transform: translateX(2px);
}

.mud-theme-dark .job-detail-page .indigenous-community-card:hover {
    border-color: rgba(74, 206, 242, 0.25);
    background-color: rgba(74, 206, 242, 0.08);
}

.mud-theme-light .job-detail-page .indigenous-community-card:hover {
    border-color: rgba(10, 114, 143, 0.18);
    background-color: rgba(10, 114, 143, 0.06);
}

/* --- Share Job Section --- */
.job-detail-page .share-card {
    border-radius: var(--radius-md);
}

.mud-theme-dark .job-detail-page .share-card {
    background: linear-gradient(135deg, rgba(11, 126, 158, 0.06), transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mud-theme-light .job-detail-page .share-card {
    background: linear-gradient(135deg, rgba(10, 114, 143, 0.03), transparent);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.job-detail-page .share-card .mud-icon-button {
    transition: all var(--transition-fast);
    border-radius: 50%;
}

.job-detail-page .share-card .mud-icon-button:hover {
    transform: scale(1.15);
}

.mud-theme-dark .job-detail-page .share-card .mud-icon-button:hover {
    background-color: rgba(74, 206, 242, 0.12);
}

.mud-theme-light .job-detail-page .share-card .mud-icon-button:hover {
    background-color: rgba(10, 114, 143, 0.08);
}

/* --- Apply Dialog --- */
.job-detail-page .apply-dialog-paper {
    border-radius: var(--radius-lg) !important;
    max-width: 600px;
    margin: auto;
    margin-top: 10vh;
}

.mud-theme-dark .job-detail-page .apply-dialog-paper {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1A1D2B;
}

/* --- Map Section --- */
.job-detail-page .content-panel:has(.leaflet-container) {
    overflow: hidden;
}

.job-detail-page .content-panel .leaflet-container {
    border-radius: var(--radius-sm);
}

/* --- Responsive --- */
@media (max-width: 959.95px) {
    .job-detail-page .job-detail-header .mud-typography-h3 {
        font-size: 1.5rem;
    }

    .job-detail-page .salary-card {
        padding: 16px;
    }

    .job-detail-page .content-panel,
    .job-detail-page .sidebar-card {
        padding: 20px !important;
    }
}

@media (max-width: 599.95px) {
    .job-detail-page .job-detail-header {
        padding: 20px !important;
    }

    .job-detail-page .job-detail-header .mud-typography-h3 {
        font-size: 1.25rem;
    }

    .job-listing-page .job-page-header {
        padding: 20px !important;
    }

    .job-listing-page .job-page-header .mud-typography-h4 {
        font-size: 1.3rem;
    }
}

/* ===== 23. Course Catalog & Details ===== */

/* Catalog page */
.course-catalog-search {
    max-width: 600px;
    margin: 0 auto;
}

/* Course card (grid view) */
.course-card {
    border-radius: 14px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.course-card .course-card-image {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
}

.course-card .course-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.course-card:hover .course-card-action-overlay {
    opacity: 1;
}

.course-card:focus-within .course-card-action-overlay {
    opacity: 1;
}

/* Course list item */
.course-list-item {
    border-radius: 14px;
    transition: box-shadow 0.2s ease;
}

.course-list-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.course-list-item .list-item-image {
    width: 120px;
    min-width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
}

.course-list-item .list-item-placeholder {
    width: 120px;
    min-width: 120px;
    height: 90px;
    background: linear-gradient(135deg, #0A728F, #0B7E9E);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Course details banner */
.course-banner {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    position: relative;
}

.course-banner-gradient {
    background: linear-gradient(135deg, #0A728F 0%, #0B7E9E 100%);
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding: 32px;
}

.course-banner-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

.course-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 32px;
}

.frosted-pill {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 16px;
    color: white;
    font-size: 0.875rem;
}

/* Course section cards */
.course-section-card {
    border-left: 4px solid #0A728F;
    border-radius: 14px;
}

.course-section-card .mud-card-content {
    padding: 24px;
    line-height: 1.7;
}

/* Sticky sidebar */
.course-sidebar-sticky {
    position: sticky;
    top: 80px;
}

/* Topics grid */
.course-topics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.course-topic-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Drag-drop image upload */
.drag-drop-zone {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 32px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
    position: relative;
}

.drag-drop-zone:hover,
.drag-drop-zone.drag-over {
    border-color: #0A728F;
    background: rgba(10, 114, 143, 0.04);
}

.drag-drop-zone .preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    object-fit: cover;
}

.drag-drop-zone .replace-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.drag-drop-zone:hover .replace-overlay,
.drag-drop-zone:focus-within .replace-overlay {
    opacity: 1;
}

/* Star rating */
.star-rating {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.star-rating.interactive .star {
    cursor: pointer;
    transition: transform 0.1s;
}

.star-rating.interactive .star:hover {
    transform: scale(1.2);
}

/* Review section */
.review-card {
    border-radius: 14px;
}

.review-reply {
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    margin-left: 48px;
    padding: 16px;
    margin-top: 8px;
    border-left: 3px solid #0A728F;
}

.review-hidden {
    opacity: 0.5;
}

.rating-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cart dropdown */
.cart-dropdown {
    min-width: 340px;
    max-height: 400px;
    overflow-y: auto;
}

.cart-dropdown-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    align-items: center;
}

.cart-dropdown-item img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
}

.cart-dropdown-item .item-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shopping cart page */
.cart-item-row {
    border-radius: 14px;
}

.cart-gift-section {
    background: rgba(10, 114, 143, 0.04);
    border-radius: 10px;
    padding: 16px;
    margin-top: 8px;
    border-left: 3px solid #4ACEF2;
}

/* Mobile sticky bottom bar */
.course-mobile-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    align-items: center;
    gap: 12px;
}

/* Mobile responsive */
@media (max-width: 959.98px) {
    .course-mobile-action-bar {
        display: flex;
    }

    .course-sidebar-sticky {
        position: static;
    }

    .course-topics-grid {
        grid-template-columns: 1fr;
    }

    .course-banner-gradient {
        min-height: 200px;
        padding: 20px;
    }

    .review-reply {
        margin-left: 24px;
    }

    .cart-dropdown {
        min-width: 280px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .course-card:hover {
        transform: none;
    }

    .course-card,
    .course-list-item,
    .drag-drop-zone,
    .drag-drop-zone .replace-overlay,
    .star-rating.interactive .star {
        transition: none;
    }

    .frosted-pill {
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.3);
    }
}

/* ===== 22. Site Footer ===== */
.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
}

.site-footer-spacer {
    flex: 1;
}

.site-footer {
    margin-top: 3rem;
    padding: 0 1rem;
    font-family: "DM Sans", sans-serif;
}

.site-footer-rule {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        currentColor 50%,
        transparent 100%
    );
    opacity: 0.1;
    margin-bottom: 1.25rem;
}

.site-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.5rem;
    gap: 0.5rem;
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.site-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.site-footer-link:hover {
    opacity: 1;
    background: currentColor;
    background: rgba(128, 128, 128, 0.08);
}

.site-footer-link:focus-visible {
    outline: 2px solid #0A728F;
    outline-offset: 2px;
    opacity: 1;
}

.site-footer-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.site-footer-copy {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ============================================
   22. Workforce Intelligence Dashboards
   ============================================ */

/* Hub */
.wi-hub { padding: 24px; max-width: 1400px; margin: 0 auto; }
.wi-hub__header { margin-bottom: 24px; }
.wi-hub__title { font-weight: 700 !important; }
.wi-hub__subtitle { color: var(--mud-palette-text-secondary); margin-top: 4px; }

/* Dashboard pages */
.wi-dashboard { padding: 24px; max-width: 1400px; margin: 0 auto; }
.wi-dashboard__header { margin-bottom: 24px; }
.wi-dashboard__title { font-weight: 700 !important; }
.wi-dashboard__subtitle { color: var(--mud-palette-text-secondary); margin-top: 4px; }
.wi-breadcrumbs { padding: 0 !important; margin-bottom: 8px; }

/* Summary Cards */
.wi-summary-card {
    background: linear-gradient(135deg, var(--wi-card-bg-start) 0%, var(--wi-card-bg-end) 100%);
    color: var(--wi-card-ink) !important;
    border-radius: 14px;
    padding: 24px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wi-summary-card--clickable { cursor: pointer; }
.wi-summary-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10, 114, 143, 0.3);
}
.wi-summary-card--clickable:active { transform: translateY(0); }

.wi-summary-card__content { display: flex; align-items: flex-start; gap: 16px; }
.wi-summary-card__icon { opacity: 0.8; margin-top: 4px; }
.wi-summary-card__metrics { display: flex; flex-direction: column; }
.wi-summary-card__value { font-size: 36px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.wi-summary-card__label { font-size: 16px; font-weight: 500; opacity: 0.9; margin-top: 4px; }
.wi-summary-card__subtitle { font-size: 14px; opacity: 0.75; margin-top: 4px; }
.wi-summary-card__action { margin-top: 12px; }
.wi-summary-card__link { color: white !important; font-size: 14px; padding: 8px 0; }

/* Sections */
.wi-section {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--mud-palette-lines-default);
}
.wi-section__title { font-weight: 600 !important; margin-bottom: 8px; }
.wi-section__subtitle { color: var(--mud-palette-text-secondary); }

/* Filter Bar */
.wi-filter-bar {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    margin-top: 16px;
}
.wi-filter-presets { flex-wrap: wrap; gap: 4px; }
.wi-filter-preset-btn {
    min-width: 72px !important;
    min-height: 48px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
}
.wi-availability-toggle { margin: 0; }

/* Gap Indicator */
.gap-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    min-width: 72px;
    justify-content: center;
}
.gap-shortage { background: rgba(244, 67, 54, 0.12); color: #D32F2F; }
.gap-surplus { background: rgba(76, 175, 80, 0.12); color: #2E7D32; }
.gap-balanced { background: rgba(158, 158, 158, 0.12); color: var(--mud-palette-text-secondary); }

/* Dark mode gap indicator */
.mud-theme-dark .gap-shortage { background: rgba(244, 67, 54, 0.2); color: #EF5350; }
.mud-theme-dark .gap-surplus { background: rgba(76, 175, 80, 0.2); color: #66BB6A; }
.mud-theme-dark .gap-balanced { background: rgba(158, 158, 158, 0.2); }

/* Participation Rate Card */
.wi-participation-rate-card {
    background: linear-gradient(135deg, #0A728F 0%, #0B7E9E 100%);
    color: white !important;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wi-participation-rate__ring { margin-bottom: 8px; }

/* Charts */
.wi-chart-container {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 16px;
}

/* Map */
.wi-map {
    height: 450px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Map labels */
.wi-map-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Tabs */
.wi-tabs .mud-tab { min-height: 48px; font-size: 16px; }

/* DataGrid overrides for readability */
.wi-dashboard .rz-data-row { min-height: 48px; }
.wi-dashboard .rz-data-row td { padding: 10px 12px !important; font-size: 14px; }
.wi-dashboard .rz-column-title { font-size: 13px; font-weight: 600; }
.wi-dashboard .rz-cell-data,
.wi-dashboard .rz-column-title-content { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
.wi-dashboard .rz-datatable-thead th { white-space: normal; vertical-align: bottom; }

/* Responsive */
@media (max-width: 960px) {
    .wi-hub, .wi-dashboard { padding: 16px; }
    .wi-summary-card__value { font-size: 28px; }
    .wi-filter-bar { padding: 12px; }
    .wi-map { height: 300px; }
}
@media (max-width: 600px) {
    .wi-summary-card { min-height: 120px; padding: 16px; }
    .wi-summary-card__value { font-size: 24px; }
    .wi-section { padding: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wi-summary-card--clickable { transition: none; }
    .wi-summary-card--clickable:hover { transform: none; }
    .wi-funnel-stage__bar { transition: none; }
}

/* ============================================
   22b. Workforce Intelligence Phase 2 — Additional Styles
   ============================================ */

/* Funnel visualization */
.wi-funnel-stage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    margin-bottom: 0.5rem;
    transition: background 0.2s ease;
}

.wi-funnel-stage:hover {
    /* MudBlazor has no --mud-palette-background-hover (Palette carries Background and
       BackgroundGray only), and the missing token made this rule blank the stage's own
       surface on hover instead of lifting it. This is Mud's real hover overlay. */
    background: var(--mud-palette-action-default-hover);
}

.wi-funnel-stage__bar {
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--wi-chart-1-start) 0%, var(--wi-chart-1-end) 100%);
    transition: width 0.6s ease;
    min-width: 4px;
}

.wi-funnel-stage__label {
    font-weight: 500;
    min-width: 120px;
}

.wi-funnel-stage__count {
    font-weight: 600;
    min-width: 60px;
    text-align: right;
}

.wi-funnel-stage__dropoff {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    min-width: 80px;
}

/* Score distribution mini-bar */
.wi-score-dist {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 24px;
}

.wi-score-dist__bar {
    flex: 1;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    min-width: 4px;
    opacity: 0.4;
}

.wi-score-dist__bar--high {
    opacity: 1;
}

/* Skill proficiency selector */
.wi-skill-selector {
    max-width: 300px;
    margin-bottom: 1rem;
}

/* ============================================
   22c. Refined Clarity alignment — theme tokens + shared UI states (Phase 4)
   ============================================ */
.mud-theme-light {
    --wi-card-bg-start: #0A728F;
    --wi-card-bg-end: #0B7E9E;
    --wi-card-ink: #ffffff;
    /* Chart slot 0 (WiChartPalette.Light[0]/Dark[0]) — kept distinct from the
       muted card-background tokens above so chart marks never fall back to
       the card navy. */
    --wi-chart-1-start: #1565C0;
    --wi-chart-1-end: #1E88E5;
}
.mud-theme-dark {
    --wi-card-bg-start: #1E3A5F;
    --wi-card-bg-end: #27548A;
    --wi-card-ink: #E4F6FB;
    /* Flat slot 0 — the six-check-validated dark chart value, not a gradient
       into the card background. */
    --wi-chart-1-start: #1E88E5;
    --wi-chart-1-end: #1E88E5;
}
.wi-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px 16px; text-align: center; opacity: .85;
}
.wi-suppressed { opacity: .75; cursor: help; }

/* Section 22: Platform content review highlights */
.platform-review-highlight {
    background-color: rgba(10, 114, 143, 0.08) !important;
    animation: platform-review-pulse 2s ease-out;
}
@keyframes platform-review-pulse {
    0% { background-color: rgba(10, 114, 143, 0.25); }
    100% { background-color: rgba(10, 114, 143, 0.08); }
}

/* --- Section 22: Requests Module --- */
.requests-stat-card { background: linear-gradient(135deg, #0A728F, #0B7E9E); color: #fff; border-radius: 14px; padding: 16px; }
.requests-type-chip--purchase { background: #0D47A1; color: #fff; }
.requests-type-chip--transfer { background: #4527A0; color: #fff; }
.requests-type-chip--supply   { background: #00695C; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .requests-timeline .mud-progress-linear .mud-progress-linear-bar { animation: none !important; transition: none !important; }
}

/* Receiving row states */
.row-partial { background-color: rgba(255, 193, 7, 0.08); }
.row-flash-success {
    animation: flash-success 600ms ease-out;
}
@keyframes flash-success {
    0% { background-color: rgba(76, 175, 80, 0.35); }
    100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .row-flash-success { animation: none; }
}

/* ================================================
   Indigenous Identity Verification Badge Styles
   Used across: CandidateList, JobCandidates, 
                AdvancedApplicantSearch
   ================================================ */

/* Tansi Verified — green */
.indigenous-verified {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.indigenous-verified-icon {
    color: var(--mud-palette-success);
}

/* Self-Declared — grey */
.indigenous-self-declared {
    color: #9E9E9E;
    font-weight: 600;
}

.indigenous-self-declared-icon {
    color: #9E9E9E;
}

/* ============================================================
   24. Inventory — Item Master list + detail
   Refined Clarity treatment for the Inventory module.
   ============================================================ */

/* ---- Shared tokens (light) ---- */
.mud-theme-light {
    --inv-hero-bg-start: #0A728F;
    --inv-hero-bg-end: #0B7E9E;
    --inv-hero-tint: rgba(10, 114, 143, 0.06);
    --inv-surface: #ffffff;
    --inv-surface-2: #f5f7fb;
    --inv-border: rgba(0, 0, 0, 0.06);
    --inv-border-strong: rgba(0, 0, 0, 0.10);
    --inv-text-strong: #0f172a;
    --inv-text: #1f2937;
    --inv-muted: #64748b;
    --inv-bar-track: #e5edf7;
    --inv-bar-fill: linear-gradient(90deg, #0A728F 0%, #4ACEF2 100%);
}

.mud-theme-dark {
    --inv-hero-bg-start: #1e3a5f;
    --inv-hero-bg-end: #0A728F;
    --inv-hero-tint: rgba(74, 206, 242, 0.08);
    --inv-surface: rgba(31, 34, 48, 0.95);
    --inv-surface-2: rgba(24, 26, 36, 0.85);
    --inv-border: rgba(255, 255, 255, 0.08);
    --inv-border-strong: rgba(255, 255, 255, 0.14);
    --inv-text-strong: #F1F3F9;
    --inv-text: #D0D4E4;
    --inv-muted: #9BA2B8;
    --inv-bar-track: rgba(255, 255, 255, 0.08);
    --inv-bar-fill: linear-gradient(90deg, #4ACEF2 0%, #86D3EA 100%);
}

/* ---- Master list: KPI tiles ---- */
.inventory-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 900px) {
    .inventory-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .inventory-kpi-strip { grid-template-columns: 1fr; }
}
.inventory-kpi-tile {
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.inventory-kpi-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--inv-border-strong);
}
.inventory-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.inventory-kpi-icon.is-primary { background: rgba(10, 114, 143, 0.10); color: #0A728F; }
.inventory-kpi-icon.is-success { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.inventory-kpi-icon.is-info    { background: rgba(2, 132, 199, 0.12); color: #0284c7; }
.inventory-kpi-icon.is-warning { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.mud-theme-dark .inventory-kpi-icon.is-primary { background: rgba(74,206,242,0.15); color: #86D3EA; }
.mud-theme-dark .inventory-kpi-icon.is-success { background: rgba(74,222,128,0.15); color: #86efac; }
.mud-theme-dark .inventory-kpi-icon.is-info    { background: rgba(56,189,248,0.15); color: #7dd3fc; }
.mud-theme-dark .inventory-kpi-icon.is-warning { background: rgba(251,191,36,0.18); color: #fcd34d; }

.inventory-kpi-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--inv-text-strong);
    line-height: 1.1;
}
.inventory-kpi-label {
    font-size: 0.78rem;
    color: var(--inv-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ---- Master list: header card ---- */
.inventory-list-header {
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.inventory-list-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--inv-hero-tint), transparent 60%);
    pointer-events: none;
}
.inventory-list-header > * { position: relative; }

.inventory-list-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--inv-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
.inventory-list-subtitle {
    color: var(--inv-muted);
    font-size: 0.92rem;
    margin-top: 4px;
}

/* ---- Card grid for items ---- */
.inventory-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* Rows follow their tallest card. The grid sits inside a fixed-height
       scroll box, and without this the rows could end up at the card's
       min-height with the chips clipped by the card's overflow. */
    grid-auto-rows: max-content;
    align-items: stretch;
    align-content: start;
    gap: 16px;
}
.inventory-item-card {
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 356px;
    height: auto;
}
.inventory-item-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--inv-border-strong);
}
.inventory-item-card .thumb {
    background:
        linear-gradient(45deg, rgba(148, 163, 184, 0.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, 0.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.10) 75%),
        #ffffff;
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.inventory-item-card .inventory-item-thumb {
    aspect-ratio: auto;
    height: 240px;
    min-height: 240px;
    padding: 12px;
    border-bottom: 1px solid var(--inv-border);
}
.inventory-item-card .inventory-item-thumb.photo-fill {
    padding: 0;
}
.inventory-item-card .inventory-item-thumb.photo-fit img {
    position: absolute;
    inset: 12px;
    margin: auto;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 24px) !important;
    max-height: calc(100% - 24px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block;
    object-fit: contain !important;
    object-position: center center;
}
.inventory-item-card .inventory-item-thumb.photo-fill img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover !important;
}
.inventory-item-card .thumb .placeholder {
    color: var(--inv-muted);
    opacity: 0.6;
}
.inventory-item-card .body {
    padding: 12px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Grow to fill, never shrink below its content: the chips row is what
       got cut off when the body was squeezed to its minimum. */
    flex: 1 0 auto;
    min-height: 128px;
}
.inventory-item-card .inventory-item-thumb {
    flex: 0 0 auto;
}
.inventory-item-card .title {
    font-weight: 600;
    color: var(--inv-text-strong);
    font-size: 0.98rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(0.98rem * 1.3);
}
.inventory-item-card .sku {
    color: var(--inv-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.inventory-item-card .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}
.inventory-item-card .status-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.92);
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.inventory-item-card .status-pill.inactive {
    background: rgba(244,67,54,0.92);
    color: #fff;
}

/* ---- Detail page: quick-actions strip ---- */
.inventory-actions-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px 2px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
}
.inventory-actions-strip .strip-spacer {
    flex: 1;
    min-width: 12px;
}
.inventory-actions-strip .strip-divider {
    width: 1px;
    height: 22px;
    background: var(--inv-border-strong);
    margin: 0 4px;
}
.inventory-actions-strip .mud-button-root {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

/* ---- Detail page: hero ---- */
.inventory-hero {
    position: relative;
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-bottom: 16px;
    overflow: hidden;
}
.inventory-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(10,114,143,0.10), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(74,206,242,0.08), transparent 50%);
    pointer-events: none;
}
.inventory-hero > * { position: relative; z-index: 1; }

.inventory-hero-layout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
}
@media (max-width: 720px) {
    .inventory-hero-layout {
        grid-template-columns: auto 1fr;
        gap: 14px;
    }
    .inventory-hero-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

.inventory-hero-image {
    width: 156px;
    height: 156px;
    border-radius: var(--radius-md);
    background: var(--inv-surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--inv-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.inventory-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.inventory-hero-image .placeholder {
    color: var(--inv-muted);
    opacity: 0.55;
}
@media (max-width: 720px) {
    .inventory-hero-image { width: 96px; height: 96px; }
}

/* ---- Image gallery (hero) ---- */
.inventory-gallery {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (max-width: 720px) {
    .inventory-gallery { width: 120px; }
}
.inventory-gallery .main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--inv-surface-2);
    border: 1px solid var(--inv-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    cursor: zoom-in;
    position: relative;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.inventory-gallery .main:hover {
    box-shadow: var(--shadow-card-hover);
}
.inventory-gallery .main img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    display: block;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.inventory-gallery .main:hover img {
    transform: none;
}
.inventory-gallery .main .placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--inv-muted);
    opacity: 0.55;
}
.inventory-item-card .inventory-item-thumb img.inventory-default-image,
.inventory-gallery .main img.inventory-default-image,
.lazy-img-frame.inventory-table-thumb img.inventory-default-image {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
}
.maintenance-asset-thumb,
.maintenance-asset-hero-image {
    display: block;
    object-fit: cover;
    background: #dbeafe;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}
.maintenance-asset-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
}
.maintenance-asset-hero-image {
    width: 104px;
    height: 104px;
    border-radius: 18px;
}
.inventory-gallery .main .badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inventory-gallery .thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.inventory-gallery .thumbs::-webkit-scrollbar { height: 4px; }
.inventory-gallery .thumbs::-webkit-scrollbar-thumb { background: var(--inv-border-strong); border-radius: 4px; }
.inventory-gallery .thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    background: var(--inv-surface-2);
}
.inventory-gallery .thumb:hover { transform: translateY(-1px); }
.inventory-gallery .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.inventory-gallery .thumb.is-active {
    border-color: #0A728F;
}
.mud-theme-dark .inventory-gallery .thumb.is-active { border-color: #86D3EA; }

/* ---- Image gallery (edit-mode overlays) ---- */
.inventory-gallery-edit .main { cursor: default; }
.inventory-gallery-edit .main .edit-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 2;
}
.inventory-gallery-edit .main:hover .edit-actions,
.inventory-gallery-edit .main:focus-within .edit-actions {
    opacity: 1;
}
.inventory-gallery-edit .main .edit-actions .mud-icon-button {
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
}
.inventory-gallery-edit .main .edit-actions .mud-icon-button:hover {
    background: rgba(15, 23, 42, 0.88);
}
.inventory-gallery-edit .main .primary-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #0A728F;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    z-index: 2;
}
.mud-theme-dark .inventory-gallery-edit .main .primary-tag { background: #0A728F; }

.inventory-gallery-edit .thumb { position: relative; }
.inventory-gallery-edit .thumb .delete-corner {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    display: flex;
    opacity: 0;
    transition: opacity var(--transition-fast);
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border: 2px solid var(--inv-surface);
}
.inventory-gallery-edit .thumb:hover .delete-corner,
.inventory-gallery-edit .thumb:focus-within .delete-corner {
    opacity: 1;
}
.inventory-gallery-edit .thumb .star-corner {
    position: absolute;
    bottom: 2px;
    left: 2px;
    color: #FFC107;
    text-shadow: 0 0 2px rgba(0,0,0,0.45);
    font-size: 12px;
    pointer-events: none;
}

.inventory-gallery-edit .add-tile {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px dashed var(--inv-border-strong);
    color: var(--inv-muted);
    background: transparent;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.inventory-gallery-edit .add-tile:hover {
    border-color: #0A728F;
    color: #0A728F;
    transform: translateY(-1px);
}
.mud-theme-dark .inventory-gallery-edit .add-tile:hover {
    border-color: #4ACEF2;
    color: #4ACEF2;
}

.inventory-gallery-edit .manage-pill {
    align-self: center;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--inv-surface-2);
    border: 1px solid var(--inv-border);
    color: var(--inv-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.inventory-gallery-edit .manage-pill:hover {
    color: #0A728F;
    border-color: #0A728F;
}
.mud-theme-dark .inventory-gallery-edit .manage-pill:hover {
    color: #4ACEF2;
    border-color: #4ACEF2;
}

.inventory-gallery-edit .save-status {
    font-size: 0.7rem;
    color: var(--inv-muted);
    height: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inventory-gallery-edit .save-status.is-saving { color: var(--inv-muted); }
.inventory-gallery-edit .save-status.is-saved { color: #2E7D32; }
.inventory-gallery-edit .save-status.is-error { color: #C62828; cursor: pointer; }
.mud-theme-dark .inventory-gallery-edit .save-status.is-saved { color: #81C784; }
.mud-theme-dark .inventory-gallery-edit .save-status.is-error { color: #EF9A9A; }

.inventory-gallery-edit.is-drop-target .main {
    outline: 2px dashed #0A728F;
    outline-offset: 4px;
}
.mud-theme-dark .inventory-gallery-edit.is-drop-target .main {
    outline-color: #4ACEF2;
}

/* ---- Image manager dialog ---- */
.inventory-image-dialog .mud-dialog {
    max-width: min(1100px, 92vw) !important;
}
.inventory-image-dialog .dialog-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--inv-border);
    margin-bottom: 16px;
}
.inventory-image-dialog .dialog-toolbar .count {
    color: var(--inv-muted);
    font-size: 0.85rem;
}
.inventory-image-dialog .dialog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 720px) {
    .inventory-image-dialog .dialog-grid { grid-template-columns: 1fr; }
}
.inventory-image-dialog .dialog-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--inv-surface-2);
    border: 1px solid var(--inv-border);
    cursor: grab;
}
.inventory-image-dialog .dialog-tile.is-selected {
    border-color: #0A728F;
    box-shadow: 0 0 0 2px rgba(10,114,143,0.25);
}
.mud-theme-dark .inventory-image-dialog .dialog-tile.is-selected {
    border-color: #4ACEF2;
    box-shadow: 0 0 0 2px rgba(74,206,242,0.3);
}
.inventory-image-dialog .dialog-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.inventory-image-dialog .dialog-tile .tile-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.inventory-image-dialog .dialog-tile:hover .tile-actions,
.inventory-image-dialog .dialog-tile:focus-within .tile-actions {
    opacity: 1;
}
.inventory-image-dialog .dialog-tile .tile-actions .mud-icon-button {
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
}
.inventory-image-dialog .dialog-tile .tile-primary-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #0A728F;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mud-theme-dark .inventory-image-dialog .dialog-tile .tile-primary-badge { background: #0A728F; }
.inventory-image-dialog .dialog-empty {
    padding: 40px;
    text-align: center;
    color: var(--inv-muted);
    border: 2px dashed var(--inv-border-strong);
    border-radius: var(--radius-md);
}

/* ---- Image lightbox dialog ---- */
.inventory-lightbox .mud-dialog {
    max-width: min(1100px, 92vw) !important;
}
.inventory-lightbox-stage {
    position: relative;
    width: 100%;
    height: 70vh;
    max-height: 720px;
    min-height: 320px;
    background: #0b1220;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inventory-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.inventory-lightbox-counter {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}
.inventory-lightbox-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding: 4px 2px;
}
.inventory-lightbox-thumbs .thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition-fast);
}
.inventory-lightbox-thumbs .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.inventory-lightbox-thumbs .thumb.is-active { border-color: #4ACEF2; }

.inventory-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0A728F;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.mud-theme-dark .inventory-hero-eyebrow { color: #86D3EA; }

.inventory-hero-title {
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--inv-text-strong);
    letter-spacing: -0.015em;
    margin: 0;
}
@media (max-width: 720px) {
    .inventory-hero-title { font-size: 1.4rem; }
}
.inventory-hero-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    color: var(--inv-muted);
    font-size: 0.88rem;
}
.inventory-hero-meta strong {
    color: var(--inv-text);
    font-weight: 600;
}

.inventory-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* ---- Facts grid below hero ---- */
.inventory-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 22px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--inv-border-strong);
}
.inventory-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.inventory-fact-label {
    font-size: 0.72rem;
    color: var(--inv-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.inventory-fact-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--inv-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Right rail cards ---- */
.inventory-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}
@media (max-width: 960px) {
    .inventory-rail { position: static; }
}

.inventory-rail-card {
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}
.inventory-rail-card h4 {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--inv-muted);
}
.inventory-rail-card .big-number {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--inv-text-strong);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.inventory-rail-card .big-number .unit {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--inv-muted);
    margin-left: 6px;
    letter-spacing: 0;
}
.inventory-rail-card .sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--inv-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ---- Location bars ---- */
.inventory-loc-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inventory-loc-row .top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.inventory-loc-row .qty {
    font-weight: 600;
    color: var(--inv-text-strong);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.inventory-loc-row .name {
    color: var(--inv-text);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inventory-loc-row .bar {
    height: 6px;
    background: var(--inv-bar-track);
    border-radius: 999px;
    overflow: hidden;
}
.inventory-loc-row .bar .fill {
    height: 100%;
    background: var(--inv-bar-fill);
    border-radius: 999px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.inventory-loc-row.is-low .bar .fill {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}
.inventory-loc-row.is-empty .bar .fill {
    background: linear-gradient(90deg, #ef4444 0%, #fb7185 100%);
}

/* ---- Cost / pricing rows ---- */
.inventory-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--inv-border);
    font-size: 0.92rem;
}
.inventory-cost-row:last-of-type { border-bottom: 0; }
.inventory-cost-row .label { color: var(--inv-muted); }
.inventory-cost-row .value {
    color: var(--inv-text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---- Status badge (stock health) ---- */
.inventory-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.inventory-stock-badge.ok       { background: rgba(34,197,94,0.12); color: #15803d; }
.inventory-stock-badge.low      { background: rgba(245,158,11,0.14); color: #b45309; }
.inventory-stock-badge.critical { background: rgba(239,68,68,0.14); color: #b91c1c; }
.mud-theme-dark .inventory-stock-badge.ok       { background: rgba(74,222,128,0.18); color: #86efac; }
.mud-theme-dark .inventory-stock-badge.low      { background: rgba(251,191,36,0.20); color: #fcd34d; }
.mud-theme-dark .inventory-stock-badge.critical { background: rgba(248,113,113,0.20); color: #fca5a5; }

/* ---- Tab refinements (inventory pages only) ---- */
.inventory-tabs .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--inv-border);
    padding-left: 4px;
}
.inventory-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.005em;
    min-height: 48px;
    padding: 0 18px;
}
.inventory-tabs .mud-tab-content-panel { padding-top: 18px; }

.inventory-location-overview-card {
    display: none;
}

.inventory-location-map-card .inventory-mini-map .leaflet-container {
    border-radius: var(--radius-md);
}

/* ---- Detail page: attachment tiles ---- */
.inventory-document-library {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inventory-document-toolbar {
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.inventory-document-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 28px 18px;
    background: var(--inv-surface-2);
}

.inventory-document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.inventory-document-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inventory-document-list-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--inv-border);
}

.inventory-document-list-row:last-child {
    border-bottom: 0;
}

.inventory-document-list-icon {
    width: 44px;
    height: 44px;
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-sm);
    background: var(--inv-surface-2);
    color: var(--mud-palette-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.inventory-document-list-icon:disabled {
    cursor: default;
    color: var(--mud-palette-text-secondary);
}

.inventory-document-list-icon:focus-visible,
.inventory-document-list-file:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.inventory-document-list-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inventory-document-list-meta {
    flex-wrap: wrap;
}

.inventory-document-list-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-document-list-files {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.inventory-document-list-file {
    max-width: 220px;
    min-height: 28px;
    border: 1px solid var(--inv-border);
    background: var(--inv-surface-2);
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.inventory-document-list-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-document-list-actions {
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .inventory-document-list-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .inventory-document-list-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

.inventory-document-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 330px;
    background: var(--inv-surface);
}

.inventory-document-preview-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: inherit;
}

.inventory-document-preview-button:disabled {
    cursor: default;
}

.inventory-document-preview-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: -3px;
}

.inventory-document-card-body {
    min-width: 0;
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.inventory-document-title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.inventory-document-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inventory-document-file {
    border: 1px solid var(--inv-border);
    background: var(--inv-surface-2);
    color: inherit;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    cursor: pointer;
}

.inventory-document-file:hover {
    border-color: var(--inv-border-strong);
}

.inventory-document-file:focus-visible {
    border-color: var(--inv-border-strong);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.inventory-document-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-document-card-actions {
    min-height: 48px;
    padding: 6px 10px;
}

.inventory-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.inventory-attachment-tile {
    position: relative;
    min-height: 236px;
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    background: var(--inv-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.inventory-attachment-tile:hover,
.inventory-attachment-tile:focus-visible {
    transform: translateY(-1px);
    border-color: var(--inv-border-strong);
    box-shadow: var(--shadow-card-hover);
    outline: none;
}

.inventory-attachment-tile:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), var(--shadow-card-hover);
}

.inventory-attachment-preview {
    height: 132px;
    background: var(--inv-surface-2);
    border-bottom: 1px solid var(--inv-border);
    display: grid;
    place-items: center;
    color: var(--mud-palette-primary);
}

.inventory-attachment-preview.is-image {
    background: #f8fafc;
}

.mud-theme-dark .inventory-attachment-preview.is-image {
    background: #111827;
}

.inventory-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inventory-attachment-body {
    min-width: 0;
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.inventory-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.inventory-attachment-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inventory-attachment-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

.mud-theme-dark .inventory-attachment-actions {
    background: rgba(17,24,39,0.9);
}

.inventory-attachment-dialog-title {
    max-width: min(72vw, 760px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.inventory-attachment-dialog-preview {
    width: 100%;
    min-height: 60vh;
    background: var(--inv-surface-2);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.inventory-attachment-dialog-preview iframe {
    width: 100%;
    height: 75vh;
    border: 0;
    background: #fff;
}

.inventory-attachment-dialog-preview img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}

/* ---- Sticky save bar ---- */
.inventory-action-bar {
    position: sticky;
    bottom: 12px;
    z-index: 4;
    background: var(--inv-surface);
    border: 1px solid var(--inv-border);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-top: 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    backdrop-filter: blur(6px);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .inventory-item-card,
    .inventory-kpi-tile,
    .inventory-loc-row .bar .fill {
        transition: none;
    }
}

/* ===================================================================
   Section 22 — List page loading & lazy-image affordances
   Used by Item Master, SDS Register, Corrective Actions list pages.
   =================================================================== */

/* Thin shimmer bar shown above a virtualized table when a refetch is
   in flight while previous rows are still visible. Replaces the old
   page-blocking MudProgressLinear pattern. */
.refetch-shimmer-bar {
    height: 3px;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(10, 114, 143, 0.0) 0%,
        rgba(10, 114, 143, 0.85) 50%,
        rgba(10, 114, 143, 0.0) 100%
    );
    background-size: 200% 100%;
    animation: refetch-shimmer-sweep 1.2s ease-in-out infinite;
    border-radius: 3px;
}
@keyframes refetch-shimmer-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position:  100% 0; }
}

/* Sized placeholder behind every lazy-loaded image so the browser
   reserves layout space before the image lands (zero CLS) and the user
   sees a soft tile rather than a white box. */
.lazy-img-frame {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lazy-img-frame.inventory-table-thumb {
    width: 44px;
    height: 44px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--inv-border);
    padding: 3px;
}
.lazy-img-frame.inventory-table-thumb.photo-fill {
    padding: 0;
}
.lazy-img-frame.inventory-table-thumb.photo-fit {
    position: relative;
}
.lazy-img-frame.inventory-table-thumb.photo-fit > img {
    position: absolute;
    inset: 3px;
    margin: auto;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 6px) !important;
    max-height: calc(100% - 6px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block;
}
.lazy-img-frame.photo-fill > img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover !important;
}

/* Bounded scroll host for virtualized tables. Height calc subtracts
   page chrome (header strip + KPI strip + filter bar) so the table
   fills the remaining viewport without overflowing. Tweak the offset
   per page in the inline style if the chrome differs. */
.virtualized-table-host {
    height: calc(100vh - 360px);
    min-height: 480px;
    overflow-y: auto;
}

/* Reduced-motion: disable the shimmer animation. */
@media (prefers-reduced-motion: reduce) {
    .refetch-shimmer-bar {
        animation: none;
        background: rgba(10, 114, 143, 0.6);
    }
}

/* Inline animated "Updating…" dot pulse used next to page titles
   during a refetch. */
.refetch-pulse-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.refetch-pulse-label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0A728F;
    animation: refetch-pulse 1.4s ease-in-out infinite;
}
@keyframes refetch-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .refetch-pulse-label::after { animation: none; opacity: 0.7; }
}



/* ===================================================================
   Section 24 — Item Master cards: flex-wrap override for virtualized
   container. The original .inventory-card-grid uses CSS grid which
   relies on direct children — Blazor's <Virtualize> injects wrapper
   spacer divs that break the grid's auto-fill column rule. Switch
   to flex-wrap on the .virtualized-card-grid variant so cards still
   render in multi-column rows.
   =================================================================== */
.inventory-card-grid.virtualized-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-content: flex-start;
}
.inventory-card-grid.virtualized-card-grid .inventory-item-card {
    flex: 1 1 280px;
    min-width: 280px;
    max-width: 360px;
}

/* ===================================================================
   Section 25 — Visual polish for virtualized list pages.
   Applies a 1-line shadow under the fixed header on scroll, a thin
   primary-coloured marker on hovered rows, and a brand gradient tile
   variant used for the primary KPI on each list page.
   =================================================================== */

/* MudTable FixedHeader sticky shadow when body is scrolled. */
.mud-table-sticky-header thead th {
    box-shadow: 0 1px 0 var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

/* Hover marker on table rows — subtle 3px primary stripe on the left
   edge of the hovered row. Adds clear focus without changing row height. */
.mud-table-hover tbody tr:hover {
    box-shadow: inset 3px 0 0 #0A728F;
}

/* Brand gradient KPI tile variant — used for the primary stat on each
   list page (Total Items, Total SDS Records, Open CAs). Apply via the
   shared class .kpi-tile-primary in the markup. */
.kpi-tile-primary {
    background: linear-gradient(135deg, #0A728F 0%, #0B7E9E 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(10, 114, 143, 0.18);
}
.kpi-tile-primary .kpi-tile-value,
.kpi-tile-primary .inventory-kpi-value,
.kpi-tile-primary .sds-stat-value {
    color: #ffffff;
    font-weight: 700;
}
.kpi-tile-primary .kpi-tile-label,
.kpi-tile-primary .inventory-kpi-label,
.kpi-tile-primary .sds-stat-label {
    color: rgba(255, 255, 255, 0.85);
}

/* Clamp requirement description to 2 lines inside the card */
.req-description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ===================================================================
   Section 26 — Workflow Builder Wizard
   Styles for the workflow creation dialog (VisualWorkflowRuleDialog)
   and its child components. The signature element is the live
   WHEN → IF → THEN "recipe strip" pinned above the stepper: it builds
   a plain-language sentence as the admin configures each step, and
   each segment is a button that jumps to its step.
   =================================================================== */

/* ---- Recipe strip ---- */
.wf-recipe {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md);
    background: var(--mud-palette-background-gray);
    flex-wrap: wrap;
}

.wf-recipe-seg {
    flex: 1 1 170px;
    min-width: 150px;
    text-align: left;
    border: 1.5px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px 12px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wf-recipe-seg:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.wf-recipe-seg:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.wf-recipe-seg .wf-recipe-kicker {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.wf-recipe-seg .wf-recipe-text {
    display: block;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* Empty segment: muted, clearly "still to do" */
.wf-recipe-seg.is-empty .wf-recipe-text {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Completed segment: solid border, primary kicker, subtle tint */
.wf-recipe-seg.is-done {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    background: rgba(10, 114, 143, 0.05);
}
.wf-recipe-seg.is-done .wf-recipe-kicker {
    color: var(--mud-palette-primary);
}
.mud-theme-dark .wf-recipe-seg.is-done {
    background: rgba(74, 206, 242, 0.08);
}

/* Segment for the step currently being edited */
.wf-recipe-seg.is-active {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
    border-color: transparent;
    background: var(--mud-palette-surface);
}

.wf-recipe-arrow {
    align-self: center;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .wf-recipe-arrow { display: none; }
    .wf-recipe-seg { flex-basis: 100%; }
}

/* ---- Trigger cards ---- */
.wf-trigger-card {
    cursor: pointer;
    height: 100%;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.wf-trigger-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0,0,0,0.1));
    border-color: var(--mud-palette-lines-default);
}

.wf-trigger-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.wf-trigger-card.selected {
    border-color: var(--mud-palette-primary);
    background: rgba(10, 114, 143, 0.06);
}
.mud-theme-dark .wf-trigger-card.selected {
    background: rgba(74, 206, 242, 0.10);
}

/* ---- Step intro header inside each wizard step ---- */
.wf-step-intro {
    margin-bottom: 16px;
}
.wf-step-intro .wf-step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.wf-step-intro .wf-step-sub {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ---- Empty state (actions step, conditions) ---- */
.wf-empty-state {
    text-align: center;
    padding: 36px 24px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: var(--radius-md);
}
.wf-empty-state .mud-icon-root {
    opacity: 0.45;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .wf-recipe-seg,
    .wf-trigger-card {
        transition: none;
    }
    .wf-trigger-card:hover {
        transform: none;
    }
}

/* ============================================================
   Workflow AI Hero & Template Gallery
   ============================================================ */
.wf-ai-hero {
    background: linear-gradient(135deg, #0A728F 0%, #0B7E9E 100%);
    border-radius: 14px;
    padding: 28px 28px 24px;
    color: #fff;
}
.wf-ai-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wf-ai-hero-title { color: #fff; font-weight: 700; }
.wf-ai-hero-sub { color: rgba(255, 255, 255, 0.92); max-width: 560px; }
.wf-ai-usage { min-width: 240px; text-align: right; }
.wf-ai-usage-bar { background-color: rgba(255, 255, 255, 0.25); height: 8px; border-radius: 4px; }
.wf-ai-usage-bar .mud-progress-linear-bar { background-color: #fff; }
.wf-ai-usage-text { font-size: 0.8rem; color: rgba(255, 255, 255, 0.92); }
.wf-ai-usage-chip { background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; }
.wf-ai-promptbox { display: flex; gap: 12px; align-items: stretch; margin-top: 20px; flex-wrap: wrap; }
.wf-ai-input { flex: 1 1 420px; }
.wf-ai-input .mud-input-control-input-container,
.wf-ai-input .mud-input-outlined { background: #fff; border-radius: 14px; }
/* The prompt box stays white in BOTH themes (it sits on the blue gradient),
   so pin dark text/caret/placeholder — the dark theme would otherwise
   render white-on-white (invisible typing). */
.wf-ai-input textarea,
.wf-ai-input input {
    color: rgba(0, 0, 0, 0.87) !important;
    caret-color: #0A728F;
}
.wf-ai-input textarea::placeholder,
.wf-ai-input input::placeholder {
    color: rgba(0, 0, 0, 0.42) !important;
    opacity: 1;
}
/* Workspace picker for developers without an acting tenant — shares the white
   input treatment but stays compact next to the prompt box. */
.wf-ai-tenant-select { flex: 0 1 240px; min-width: 200px; }
.wf-ai-tenant-select .mud-input-slot,
.wf-ai-tenant-select .mud-select-input {
    color: rgba(0, 0, 0, 0.87) !important;
}
.wf-ai-generate-btn {
    background: #fff !important; color: #0A728F !important;
    border-radius: 14px; min-height: 48px; min-width: 140px;
    font-weight: 600; align-self: center;
}
.wf-ai-quickprompts { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-ai-chip {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff; border-radius: 14px;
    padding: 10px 14px; font: inherit; font-size: 0.85rem;
    cursor: pointer; text-align: left; transition: background 0.15s ease;
}
.wf-ai-chip:hover, .wf-ai-chip:focus-visible { background: rgba(255, 255, 255, 0.3); }
.wf-ai-chip:disabled { opacity: 0.6; cursor: default; }
.wf-ai-suggestion { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wf-ai-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wf-ai-hero-or { color: rgba(255, 255, 255, 0.92); }
.wf-hero-manual-btn { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; border-radius: 14px; }
.wf-hero-manual-btn:hover { background: rgba(255, 255, 255, 0.3) !important; }

.wf-template-card {
    border-radius: 14px; height: 100%;
    display: flex; flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wf-template-card:hover { box-shadow: 0 4px 16px rgba(10, 114, 143, 0.18); transform: translateY(-2px); }
.wf-template-card .mud-card-content { flex: 1; }

@media (prefers-reduced-motion: reduce) {
    .wf-ai-chip, .wf-template-card { transition: none; }
    .wf-template-card:hover { transform: none; }
}

/* ============================================================
   41. Personal Information — Step Wizard
   ============================================================ */

.pi-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    gap: 0;
}

.pi-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.pi-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    border: 2px solid rgba(148, 163, 184, 0.4);
    color: rgba(148, 163, 184, 0.9);
    background: transparent;
    transition: all 200ms;
}

.pi-step-label {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.9);
    white-space: nowrap;
}

.pi-step-connector {
    flex: 1;
    height: 2px;
    background: rgba(148, 163, 184, 0.3);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    min-width: 30px;
}

/* Active step — circle fill is theme-independent; the label is TEXT and needs
   theme-aware ink (a single mid-cyan fails 4.5:1 on light backgrounds) */
.pi-step.active .pi-step-circle {
    border-color: #0A728F;
    background: #0A728F;
    color: #fff;
}
.pi-step.active .pi-step-label {
    color: var(--primary-ink);
    font-weight: 600;
}

/* Completed step */
.pi-step.completed .pi-step-circle {
    border-color: #34d399;
    background: #34d399;
    color: #fff;
}
.pi-step.completed .pi-step-label {
    color: #34d399;
}

/* Completed connector */
.pi-step-connector.completed {
    background: #34d399;
}

@media (prefers-reduced-motion: reduce) {
    .pi-step-circle { transition: none; }
}

/* Clamp qualification description to 3 lines max */
.description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Task kanban board  (UserTaskWidget.razor — profile dashboard)
   -------------------------------------------------------------------------- */
.task-kanban-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.task-kanban-column {
    --accent: var(--mud-palette-primary);
    background: var(--section-bg, var(--mud-palette-background-gray));
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-md);
    min-width: 300px;
    max-width: 340px;
    flex-shrink: 0;
}

.task-kanban-column--pending    { --accent: var(--mud-palette-warning); }
.task-kanban-column--inprogress { --accent: var(--mud-palette-info); }
.task-kanban-column--completed  { --accent: var(--mud-palette-success); }
.task-kanban-column--other      { --accent: var(--mud-palette-text-secondary, var(--text-caption)); }

.task-kanban-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 8px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0;
}

.task-kanban-column__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--text-heading);
}

.task-kanban-column__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.task-kanban-column__count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 999px;
    padding: 2px 8px;
}

.task-kanban-dropzone {
    display: block;
    border: 2px dashed transparent;
    border-radius: var(--radius-sm);
    padding: 8px;
    min-height: 420px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.task-kanban-dropzone.mud-drop-zone-drag-block {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

@media (max-width: 768px) {
    .task-kanban-column {
        min-width: 260px;
    }
}

/* Fix: force MudAutocomplete inner input to show full selected item name */
.item-picker-autocomplete .mud-input {
    min-width: 160px;
}

.item-picker-autocomplete .mud-input input {
    min-width: 140px;
    text-overflow: clip;
    overflow: visible;
    white-space: nowrap;
}

.item-picker-autocomplete.mud-autocomplete {
    min-width: 160px;
    width: 100%;
}

/* Fix: prevent SKU column from wrapping to multiple lines */
.mud-table td[data-label="SKU"],
.mud-table th:nth-child(2) {
    white-space: nowrap;
    width: 120px;
    min-width: 120px;
}

/* blazor-error-ui dismiss is a real <button> (WCAG 2.1.1) — keep the old span look */
#blazor-error-ui button.dismiss {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* My Courses: keep progress in a consistent position across enrolled cards. */
.my-courses-page .tansi-section {
    margin-bottom: 24px;
}

.my-courses-page .tansi-section__head,
.my-courses-page .tansi-section__body {
    padding-left: 0;
}

.my-courses-page .tansi-section:last-child {
    margin-bottom: 0;
}

/* My Courses: concise status summary, using the same semantic colors as course states. */
.my-courses-page .my-courses-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.my-courses-page .my-courses-summary__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.my-courses-page .my-courses-summary__pill strong {
    font-weight: 700;
}

.my-courses-page .my-courses-summary__pill--attention {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
}

.my-courses-page .my-courses-summary__pill--todo {
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
}

.my-courses-page .my-courses-summary__pill--completed {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.my-courses-page .my-courses-browse-section .tansi-section__head {
    justify-content: flex-start;
}

.my-courses-page .my-courses-browse-section .tansi-section__actions {
    margin-left: 0;
}

.my-courses-page .my-courses-enrolled-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 16px 16px;
}

.my-courses-page .my-courses-enrolled-card__progress {
    margin-top: auto;
}

.my-courses-page .my-courses-enrolled-card__image-wrapper {
    position: relative;
    margin: 12px 12px 0;
}

.my-courses-page .my-courses-enrolled-card__image {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: 14px;
    object-fit: cover;
}

.my-courses-page .my-courses-enrolled-card__status {
    position: absolute;
    top: 8px;
    right: 8px;
}

.my-courses-page .my-courses-enrolled-card__status-row {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 0;
}

.my-courses-page .my-courses-enrolled-card__header,
.my-courses-page .my-courses-enrolled-card__header .mud-card-header-content,
.my-courses-page .my-courses-enrolled-card__title-wrapper {
    min-width: 0;
    max-width: 100%;
}

.my-courses-page .my-courses-enrolled-card__title-wrapper {
    width: 100%;
    overflow: visible;
}

.my-courses-page .my-courses-enrolled-card__title {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.my-courses-page .my-courses-enrolled-card__metadata {
    margin-bottom: 8px;
}

.my-courses-page .my-courses-enrolled-card__duration {
    margin-left: auto;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.my-courses-page .my-courses-enrolled-card__duration-icon,
.my-courses-page .my-courses-enrolled-card__duration-text {
    color: var(--mud-palette-text-secondary) !important;
}

.my-courses-page .my-courses-enrolled-card__duration-icon {
    font-size: 14px;
}

.my-courses-page .my-courses-enrolled-card__taxonomy {
    flex-wrap: wrap;
    margin-top: 8px;
}

.my-courses-page .my-courses-enrolled-card__metadata > .mud-chip:first-child,
.my-courses-page .my-courses-enrolled-card__taxonomy > .mud-chip:first-child,
.my-courses-page .my-courses-browse-card__top-row > .mud-chip:first-child,
.my-courses-page .my-courses-browse-card__taxonomy > .mud-chip:first-child {
    margin-left: 0;
}

.my-courses-page .my-courses-enrolled-card--expired {
    border: 2px solid var(--mud-palette-error);
}

.my-courses-page .my-courses-enrolled-card--due-soon {
    border: 2px solid var(--mud-palette-warning);
}

.my-courses-page .my-courses-enrolled-card__attention-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.my-courses-page .my-courses-enrolled-card__attention-banner--expired {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}

.my-courses-page .my-courses-enrolled-card__attention-banner--due-soon {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--mud-palette-warning);
}

.my-courses-page .my-courses-enrolled-card .mud-card-actions .mud-button {
    min-height: 44px;
    padding: 10px 20px;
}

.my-courses-page .my-courses-enrolled-card__actions {
    padding: 8px 16px 16px;
}

/* My Courses: browse cards follow the learner-card hierarchy while retaining descriptions. */
.my-courses-page .my-courses-browse-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    border-radius: 14px;
}

.my-courses-page .my-courses-browse-card__image-wrapper {
    margin: 12px 12px 0;
}

.my-courses-page .my-courses-browse-card__image {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: 14px;
    object-fit: cover;
}

.my-courses-page .my-courses-enrolled-card__image-placeholder {
    display: flex;
    height: 140px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

.my-courses-page .my-courses-enrolled-card__image-placeholder .mud-icon-root {
    font-size: 44px;
    opacity: 0.65;
}

.my-courses-page .my-courses-browse-card__image-placeholder {
    display: flex;
    height: 140px;
    align-items: center;
    justify-content: center;
    margin: 12px 12px 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

.my-courses-page .my-courses-browse-card__image-placeholder .mud-icon-root {
    font-size: 44px;
    opacity: 0.65;
}

.my-courses-page .my-courses-browse-card__header {
    padding: 14px 16px 8px;
}

.my-courses-page .my-courses-browse-card__top-row {
    margin-bottom: 8px;
}

.my-courses-page .my-courses-browse-card__price {
    margin-left: auto;
}

.my-courses-page .my-courses-browse-card__title {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
}

.my-courses-page .my-courses-browse-card__taxonomy {
    flex-wrap: wrap;
    margin-top: 8px;
}

.my-courses-page .my-courses-browse-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 16px 16px;
}

.my-courses-page .my-courses-browse-card__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--mud-palette-text-secondary);
}

.my-courses-page .my-courses-browse-card__actions {
    padding: 8px 16px 16px;
}

.my-courses-page .my-courses-browse-card__button {
    min-height: 44px;
    padding: 10px 20px;
}


/* ── Jitsi meeting frame ────────────────────────────────────────────────────
   Inline (inside a normal page) the room keeps a fixed 640px band. Full-screen
   (the /join and /webinar-join pages, which run on EmptyLayout with no nav or
   footer) it owns the whole viewport: 100dvh, not 100vh, so mobile browser
   chrome doesn't push the Jitsi toolbar off the bottom of the screen. */
.meet-frame {
    width: 100%;
    min-height: 640px;
}

.meet-frame--full {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ============================================================
   31. Inventory Reports — analytics dashboard
   Cards + KPI strip for /admin/inventory/reports (Dashboard tab).
   KPI tiles reuse the .inventory-kpi-* classes from section 24.
   ============================================================ */
.inv-analytics__filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.inv-analytics__filter { min-width: 200px; flex: 1 1 200px; max-width: 280px; }
.inv-analytics__filter--narrow { min-width: 150px; flex-basis: 150px; max-width: 190px; }

.inv-analytics__print-header { display: none; margin-bottom: 12px; }

.inv-analytics__kpis { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1280px) { .inv-analytics__kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .inv-analytics__kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .inv-analytics__kpis { grid-template-columns: 1fr; } }
.inv-analytics__kpi-note {
    font-size: 0.74rem;
    color: var(--inv-muted);
    margin-top: 4px;
}
.inv-analytics__kpi-note.is-warning { color: #d97706; }
.mud-theme-dark .inv-analytics__kpi-note.is-warning { color: #fcd34d; }

.inv-analytics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 960px) { .inv-analytics__grid { grid-template-columns: 1fr; } }
.inv-analytics__card {
    padding: 18px 18px 14px;
    border-radius: var(--radius-md);
    background: var(--inv-surface);
    border: 1px solid var(--inv-border) !important;
    min-width: 0;
}
.inv-analytics__card--wide { grid-column: 1 / -1; }
.inv-analytics__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.inv-analytics__card-head .mud-typography-h6 { font-size: 1.05rem; line-height: 1.3; }
.inv-analytics__table-wrap { max-height: 440px; overflow: auto; }
.inv-analytics__table th.num,
.inv-analytics__table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-analytics__table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; }
.inv-analytics__table thead th { position: sticky; top: 0; background: var(--inv-surface); z-index: 1; }

@media print {
    .inv-analytics__print-hide,
    .tansi-tabs .mud-tabs-toolbar,
    .mud-tabs-toolbar,
    .mud-snackbar-provider { display: none !important; }
    .inv-analytics__print-header { display: block; }
    .inv-analytics__kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .inventory-kpi-tile { box-shadow: none !important; transform: none !important; padding: 10px 12px; }
    .inv-analytics__grid { display: block; }
    .inv-analytics__card {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 14px;
        box-shadow: none !important;
    }
    .inv-analytics__table-wrap { max-height: none; overflow: visible; }
    .inv-analytics__table thead th { position: static; }
    .mud-main-content, .mud-container { padding: 0 !important; max-width: none !important; }
}

/* ---- Purchase request totals (editor + read-only) ---- */
.request-totals-wrap { display: flex; justify-content: flex-end; margin-top: 10px; }
.request-totals-table { border-collapse: collapse; min-width: 260px; font-size: 0.92rem; }
.request-totals-table td { padding: 5px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.request-totals-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.request-totals-table tr.request-totals-grand td { border-bottom: 0; border-top: 2px solid var(--mud-palette-primary); font-weight: 700; font-size: 1rem; }
.request-order-totals .mud-input-control { margin-top: 0; }
.request-order-totals__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 960px) {
    .request-order-totals__grid { grid-template-columns: 1fr; }
}
.request-order-totals__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.request-order-totals__empty {
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
}
.request-order-totals__summary {
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    padding: 6px 12px;
}
.request-order-totals__summary .request-totals-table { width: 100%; min-width: 0; }
.request-totals-table__note {
    display: block;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}
/* Editable tax / adjustment amounts sit in the amount column, right-aligned like the figures around them. */
.request-totals-table__input { max-width: 150px; margin-left: auto; }
.request-totals-table td .mud-icon-button { margin-left: 4px; vertical-align: middle; }
.request-charges-table { width: 100%; border-collapse: collapse; }
.request-charges-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    padding: 0 6px 4px;
    font-weight: 600;
}
.request-charges-table__opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; }
.request-charges-table td { padding: 3px 6px; vertical-align: middle; }
.request-charges-table td:first-child, .request-charges-table th:first-child { padding-left: 0; }
.request-charges-table__amount input { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Barcode thumbnails in the item details grid ---- */
.inventory-barcode-thumb {
    min-width: 150px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 2px 4px;
    cursor: zoom-in;
}
.inventory-barcode-thumb svg { max-height: 44px; width: auto; }
.inventory-barcode-thumb img, .inventory-barcode-thumb canvas { max-height: 44px; width: auto; }

/* =========================
   Auth pages (login / register) — notice + actions
   ========================= */

.auth-notice {
    --auth-notice-accent: #FBBF24;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 4px solid var(--auth-notice-accent);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    text-align: left;
}

.auth-notice--success {
    --auth-notice-accent: #4ADE80;
}

.auth-notice:focus {
    outline: none;
}

.auth-notice:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.auth-notice .auth-notice-icon.mud-icon-root {
    color: var(--auth-notice-accent) !important;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-notice-title {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.25rem;
}

.auth-notice-text {
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 0.25rem;
    overflow-wrap: anywhere;
}

.auth-notice-text:last-child {
    margin-bottom: 0;
}

.auth-notice-text strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* Actions below the notice */
.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.auth-actions .mud-button-root {
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
    min-height: 44px;
}

.auth-actions .mud-button-root:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* Secondary action: neutral outline, clearly a button but visually below the primary */
.glass-card .auth-actions .auth-action-secondary {
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background: transparent;
}

.glass-card .auth-actions .auth-action-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.glass-card .auth-actions .auth-action-secondary .mud-icon-root {
    color: #FFFFFF !important;
}

@media (forced-colors: active) {
    .auth-notice {
        border: 1px solid CanvasText;
    }
}

/* =========================
   Public language switcher — Components/Shared/Public/PublicLanguageSwitcher.razor
   (+ the anonymous app-bar button in Components/Layout/LanguageSwitcher.razor).
   Plain CSS on purpose: PublicCardLayout has no Mud providers, so every Mud
   token below carries a literal fallback.
   ========================= */
.public-lang { display: flex; align-items: center; gap: 2px; }
.public-lang__form { display: contents; }
.public-lang__btn { min-height: 24px; font: inherit; cursor: pointer; }
.public-lang__btn:focus-visible {
    outline: 2px solid var(--focus, #0a728f);
    outline-offset: 2px;
}
/* Short code ("EN"/"FR"/"ES") is a narrow-screen abbreviation, aria-hidden. */
.public-lang__short { display: none; }

/* Pill look — EmptyLayout's floating corner switcher and PublicCardLayout's bar. */
.public-lang--floating,
.public-lang--pill {
    padding: 3px;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary, #6b7280) 30%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.public-lang--floating .public-lang__btn,
.public-lang--pill .public-lang__btn {
    min-height: 30px;
    min-width: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-primary, #111827);   /* ~16:1 on white */
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
}
.public-lang--floating .public-lang__btn:hover,
.public-lang--pill .public-lang__btn:hover {
    background: color-mix(in srgb, var(--mud-palette-primary, #0a728f) 8%, transparent);
}
.public-lang--floating .public-lang__btn[aria-current="true"],
.public-lang--pill .public-lang__btn[aria-current="true"] {
    background: var(--primary-soft, #e4f6fb);
    color: var(--primary-ink, #09637c);                  /* ~6.3:1 on --primary-soft */
    font-weight: 700;
}

/* Floating = absolutely positioned against the document (EmptyLayout's .page is NOT a
   positioned box), so it sits in the top-right corner of the first screen and scrolls away
   with the page instead of covering content while reading. Below Mud popovers (1200) and
   dialogs (1400). */
.public-lang--floating {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1150;
}

/* Narrow screens: codes instead of names so the pill stays ~120px wide. The full name stays
   in the accessible name (visually hidden, not display:none). */
@media (max-width: 599.98px) {
    .public-lang--floating .public-lang__full,
    .public-lang--pill .public-lang__full {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .public-lang--floating .public-lang__short,
    .public-lang--pill .public-lang__short { display: inline; }
    .public-lang--floating .public-lang__btn,
    .public-lang--pill .public-lang__btn { padding: 0 10px; }
}

/* One switcher per page: a page with its own inline switcher (booking top bar, CRM lead
   form header) or an explicit opt-out marker (print pages, the live meeting room) hides
   EmptyLayout's floating pill. */
.page:has(.public-lang--inline) .public-lang--floating,
.page:has([data-public-lang="off"]) .public-lang--floating { display: none; }

@media print {
    .public-lang,
    .tansi-appbar-lang { display: none !important; }
}

@media (forced-colors: active) {
    .public-lang--floating,
    .public-lang--pill { border: 1px solid CanvasText; }
    .public-lang__btn[aria-current="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* Anonymous app-bar language button (LanguageSwitcher AppBar="true"): globe + code, the same
   42px rounded target and soft-primary hover as the neighbouring app-bar icon buttons. */
.tansi-appbar-lang__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 42px;
    min-width: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--bar-text, inherit);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.tansi-appbar-lang__trigger:hover { background: var(--bar-soft, rgba(10, 114, 143, 0.12)); }
.tansi-appbar-lang__trigger:focus-visible {
    outline: 3px solid var(--bar-focus, var(--focus, #0a728f));
    outline-offset: 2px;
}