/* ==========================================================================
   SCOUT MANAGER — Premium Dashboard
   ──────────────────────────────────────────────────────────────────
   A modern, premium admin dashboard for scout leaders managing
   member progress. Design language: depth-through-shadow, generous
   white space, bold Poppins headings, scouting green accents,
   rounded pill navigation, lifted interactive surfaces.

   Inspiration: Linear, Stripe Dashboard, Notion — applied to
   a scouting context with nature-green accents.
   ========================================================================== */

:root {

    /* ── Typography ─────────────────────────────────────────────── */
    --app-font-family:
        'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, sans-serif;
    --app-font-family-heading:
        'Poppins', 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, sans-serif;
    --app-font-size-caption: 0.8125rem;
    --app-font-size-meta: 0.875rem;
    --app-font-size-body: 0.9375rem;
    --app-font-size-title: 1.0625rem;
    --app-font-weight-bold: 700;

    /* ── Corner radii — Very generous, modern ─────────────────── */
    --sb-radius-card: 20px;
    --sb-radius-xl: 24px;
    --sb-radius-lg: 16px;
    --sb-radius-md: 12px;
    --sb-radius-sm: 8px;
    --app-radius-s: 10px;
    --app-radius-m: 16px;
    --app-radius-l: 20px;

    /* ── Shadow system — Clean, neutral ──────────────────────── */
    --sb-elevation-0: none;
    --sb-elevation-1:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 1px 4px rgba(15, 23, 42, 0.04);
    --sb-elevation-2:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.07);
    --sb-elevation-3:
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.10);
    --sb-elevation-4:
        0 4px 8px rgba(15, 23, 42, 0.06),
        0 16px 40px rgba(15, 23, 42, 0.12);
    --sb-elevation-5:
        0 8px 16px rgba(15, 23, 42, 0.08),
        0 24px 56px rgba(15, 23, 42, 0.16);
    --app-shadow-s: var(--sb-elevation-1);
    --app-shadow-m: var(--sb-elevation-2);
    --app-shadow-focus:
        0 0 0 2px var(--app-color-surface),
        0 0 0 4.5px rgba(var(--app-primary-rgb), 0.35);

    /* ── Primary — Scouting Nederland green ──────────────────── */
    --app-color-primary: #00a551;
    --app-color-primary-dark: #008c44;
    --app-color-primary-light: #e6f9ef;
    --app-color-primary-text: #ffffff;
    --app-color-primary-muted: #78c9a0;
    --app-primary-rgb: 0, 165, 81;
    --app-primary-dark-rgb: 0, 140, 68;

    /* ── Secondary — Sky blue ────────────────────────────────── */
    --app-color-secondary: #2563eb;

    /* ── Ink & text — Clean neutral slate ────────────────────── */
    --sb-manager-ink: #0F172A;
    --app-color-text: #0F172A;
    --app-color-text-muted: #64748B;
    --app-color-text-secondary: #94A3B8;
    --app-color-text-deep: #020617;
    --app-color-text-strong: #1E293B;

    /* ── Surfaces — Clean, neutral whites ─────────────────────── */
    --sb-manager-bg: #F1F5F9;
    --app-color-body-bg: var(--sb-manager-bg);
    --app-color-surface: #ffffff;
    --app-color-surface-alt: #F8FAFC;
    --app-color-surface-muted: #EEF2F8;
    --app-color-surface-subtle: #FAFCFF;
    --app-surface-alt-rgb: 248, 250, 252;

    /* ── Borders — Clean neutral ──────────────────────────────── */
    --app-color-border: #E2E8F0;
    --app-color-border-subtle: #EDF2F8;
    --app-color-border-medium: #CBD5E1;

    /* ── Status: Success ─────────────────────────────────────── */
    --app-color-success: #00a551;
    --app-color-success-dark: #008c44;
    --app-color-success-bg: #e6f9ef;
    --app-color-success-bg-light: #f0fdf4;
    --app-color-success-border: #6ee7b7;
    --app-color-success-light: #a7f3d0;
    --app-color-success-muted: rgba(0, 165, 81, 0.08);
    --app-color-success-rgb: 0, 165, 81;

    /* ── Status: Danger ──────────────────────────────────────── */
    --app-color-danger: #dc2626;
    --app-color-danger-light: #f87171;
    --app-color-danger-rgb: 220, 38, 38;
    --app-color-error: #dc2626;
    --app-color-error-light: #fef2f2;
    --app-color-error-muted: rgba(220, 38, 38, 0.07);

    /* ── Status: Warning (Amber) ─────────────────────────────── */
    --app-color-warning: #d97706;
    --app-color-amber: #d97706;
    --app-color-amber-dark: #b45309;
    --app-color-amber-darkest: #92400e;
    --app-color-amber-bg: #fffbeb;
    --app-color-amber-warm: #fef9c3;
    --app-color-amber-light: #fef3c7;
    --app-color-amber-muted: rgba(217, 119, 6, 0.07);
    --app-color-amber-accent: #f59e0b;
    --app-color-amber-rgb: 217, 119, 6;

    /* ── Status: Info (Sky) ───────────────────────────────────── */
    --app-color-info: #0284c7;
    --app-color-info-dark: #0369a1;
    --app-color-info-medium: #0284c7;
    --app-color-info-light: #f0f9ff;
    --app-color-info-bg: #e0f2fe;
    --app-color-info-border: #7dd3fc;
    --app-color-info-border-light: #bae6fd;
    --app-color-info-muted: rgba(2, 132, 199, 0.07);
    --app-color-info-rgb: 2, 132, 199;

    /* ── Manager accent colours ───────────────────────────────── */
    --sb-manager-accent: var(--app-color-primary);
    --sb-manager-accent-soft: rgba(var(--app-primary-rgb), 0.08);
    --sb-status-urgent: #d97706;
    --sb-status-progress: #00a551;
    --sb-status-info: #0284c7;

    /* ── Teal interactive palette ─────────────────────────────── */
    --app-color-teal: #0d9488;
    --app-color-teal-light: #f0fdfa;
    --app-color-teal-hover: #ccfbf1;
    --app-color-teal-border: #14b8a6;
    --app-color-teal-muted: rgba(13, 148, 136, 0.08);

    /* ── Chip tokens ─────────────────────────────────────────── */
    --app-chip-bg: var(--app-color-surface);
    --app-chip-bg-hover: var(--app-color-surface-muted);
    --app-chip-border: var(--app-color-border);
    --app-chip-color: var(--app-color-text-muted);
    --app-chip-color-hover: var(--app-color-text);
    --app-chip-active-bg: rgba(var(--app-primary-rgb), 0.12);
    --app-chip-active-border: rgba(var(--app-primary-rgb), 0.40);
    --app-chip-active-color: var(--app-color-primary-dark);
    --app-chip-active-bg-hover: rgba(var(--app-primary-rgb), 0.18);
    --app-chip-border-hover: var(--app-color-border-medium);

    /* ── Stat / metric tokens ────────────────────────────────── */
    --app-stat-color-default: var(--app-color-text);
    --app-stat-color-warning: var(--app-color-amber);
    --app-stat-color-success: var(--app-color-teal);
    --app-stat-color-muted: var(--app-color-text-secondary);
    --app-stat-icon-1-bg: rgba(var(--app-primary-rgb), 0.12);
    --app-stat-icon-1-color: var(--app-color-primary);
    --app-stat-icon-2-bg: rgba(2, 132, 199, 0.12);
    --app-stat-icon-2-color: var(--app-color-info);
    --app-stat-icon-3-bg: rgba(100, 116, 139, 0.10);
    --app-stat-icon-3-color: var(--app-color-text-muted);

    /* ── Review triage accents ────────────────────────────────── */
    --app-review-accent-pending: var(--app-color-amber);
    --app-review-accent-approved: var(--app-color-success);
    --app-review-accent-rejected: var(--app-color-danger);

    /* ── Gradients ────────────────────────────────────────────── */
    --app-gradient-hero:
        linear-gradient(135deg, #00a551 0%, #008c44 50%, #006e35 100%);
    --app-gradient-hero-dark:
        linear-gradient(135deg, #006e35 0%, #008c44 50%, #00a551 100%);
    --app-gradient-success: linear-gradient(90deg, #34d399, #00a551);

    /* ── Gold ─────────────────────────────────────────────────── */
    --app-color-gold: #fbbf24;
    --app-color-gold-warm: #f59e0b;

    /* ── Utility colours ──────────────────────────────────────── */
    --app-color-track-bg: #E2E8F0;
    --app-color-skeleton: #E8EDF4;
    --app-color-overdue: #dc2626;
    --app-color-overdue-light: #fef2f2;
    --app-color-warning-light: #fffbeb;

    /* ── Overlay / glass ─────────────────────────────────────── */
    --app-color-overlay: rgba(6, 18, 10, 0.55);
    --app-color-overlay-soft: rgba(6, 18, 10, 0.25);
    --app-color-glass: rgba(255, 255, 255, 0.80);
    --app-color-glass-strong: rgba(255, 255, 255, 0.92);
    --app-color-glass-subtle: rgba(255, 255, 255, 0.50);

    /* ── Transitions — Snappy spring curves ───────────────────── */
    --sb-transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1);
    --sb-transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Radzen Overrides ─────────────────────────────────────── */
    --rz-border-radius: var(--sb-radius-md);
    --rz-card-border-radius: var(--sb-radius-card);
    --rz-card-box-shadow: var(--sb-elevation-2);
    --rz-grid-border-radius: var(--sb-radius-lg);
    --rz-grid-box-shadow: var(--sb-elevation-1);
    --rz-button-border-radius: 9999px;
    --rz-input-border-radius: var(--sb-radius-md);
    --rz-panel-border-radius: var(--sb-radius-card);
    --rz-dialog-border-radius: 24px;
    --rz-dialog-box-shadow: var(--sb-elevation-5);
    --rz-grid-header-text-transform: none;

    /* ── Nav link colours — Neutral slate ────────────────────── */
    --sb-manager-nav-link: #475569;
    --sb-manager-nav-hover: #0F172A;

    /* ── Blue accent palette ──────────────────────────────────── */
    --app-color-blue: #2563eb;
    --app-color-blue-dark: #1e40af;
    --app-color-blue-light: rgba(37, 99, 235, 0.08);
    --app-color-blue-rgb: 37, 99, 235;

    /* ── Purple accent palette ────────────────────────────────── */
    --app-color-purple: #7c3aed;
    --app-color-purple-dark: #6d28d9;
    --app-color-purple-muted: rgba(124, 58, 237, 0.08);
}


/* ==========================================================================
   BODY — Soft ambient gradient wash
   ========================================================================== */

body, .rz-layout, .sb-page-content, .content-page__body,
.user-catalog-page, .dashboard-page {
    background-color: var(--sb-manager-bg) !important;
    background-image: none !important;
}

body {
    background-image: none !important;
    background-color: var(--sb-manager-bg) !important;
    color: var(--sb-manager-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-variation-settings: 'opsz' 24;
}

/* No ambient gradient overlay — clean neutral background */
body::before {
    display: none;
}


/* ==========================================================================
   GLOBAL CARD STYLING — White surfaces with real depth
   ========================================================================== */

.rz-card, .sb-card, .app-card, .rz-grid, .rz-panel, .rz-dialog-content, .mud-paper {
    background-color: var(--app-color-surface) !important;
    border: 1px solid var(--app-color-border-subtle) !important;
    box-shadow: var(--sb-elevation-2) !important;
    border-radius: var(--sb-radius-card) !important;
}


/* ==========================================================================
   SHELL — Clean, solid container
   NOTE: Only visual overrides. Layout (grid, flex, padding) is in
   components.css and must not be touched.
   ========================================================================== */

.manager-shell {
    position: relative;
    z-index: 1;
    background: var(--app-color-surface) !important;
    border: 1px solid var(--app-color-border-subtle) !important;
    border-radius: var(--sb-radius-xl) !important;
    box-shadow: var(--sb-elevation-1) !important;
    padding: 8px !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* ==========================================================================
   TOP BAR — White with green gradient accent bar
   ========================================================================== */

.manager-topbar {
    background: var(--app-color-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
}

/* No decorative top stripe — clean flat topbar */
.manager-topbar::after {
    display: none;
}

/* Page titles — Poppins, refined size */
.manager-topbar__title-group h3,
.topbar-context-header__title {
    font-family: var(--app-font-family-heading) !important;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: var(--sb-manager-ink);
    line-height: 1.15;
}

.manager-topbar__subtitle,
.topbar-context-header__subtitle {
    font-size: var(--app-font-size-meta) !important;
    font-weight: 500 !important;
    color: var(--app-color-text-muted) !important;
    letter-spacing: 0.005em;
}

/* Section headings inside content area */
.dashboard-action-strip__label,
.progress-summary__heading h3 {
    font-family: var(--app-font-family-heading) !important;
    font-size: clamp(1.125rem, 1.4vw, 1.3125rem) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--sb-manager-ink);
}

.dashboard-action-strip__desc,
.progress-summary__subtitle {
    font-size: var(--app-font-size-body) !important;
    color: var(--app-color-text-muted) !important;
}

/* ── Topbar action buttons — Pill-shaped, elevated ────────────── */
.manager-shell[data-shell-layout] .active-context-popup__trigger,
.manager-shell[data-shell-layout] .notification-menu-popup__trigger,
.manager-shell[data-shell-layout] .profile-menu-popup__trigger,
.manager-topbar .app-btn.icon-button {
    border-radius: 9999px !important;
    background: var(--app-color-surface) !important;
    border: 1px solid var(--app-color-border) !important;
    box-shadow: var(--sb-elevation-1) !important;
    transition: all var(--sb-transition-fast);
}

.manager-shell[data-shell-layout] .active-context-popup__trigger:hover,
.manager-shell[data-shell-layout] .notification-menu-popup__trigger:hover,
.manager-shell[data-shell-layout] .profile-menu-popup__trigger:hover,
.manager-topbar .app-btn.icon-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--sb-elevation-2) !important;
    border-color: var(--app-color-border-medium) !important;
    background: var(--app-color-surface-subtle) !important;
}


/* ==========================================================================
   SIDEBAR NAV — Modern pill-style navigation
   ──────────────────────────────────────────────────────────────────
   KEY FIX: No border-left indicators (causes icon clipping with
   overflow-x:hidden). Instead, rounded pill backgrounds for active
   items. Internal padding on the nav container prevents icon cutoff.
   ========================================================================== */

/* Fix icon clipping: both .show-on-desktop and .manager-nav have
   overflow:hidden which clips icons that Radzen positions with
   negative offset. Override to visible on the grid-item wrapper. */
.manager-shell__frame > .show-on-desktop {
    overflow: visible !important;
}

.manager-nav {
    background: var(--app-color-surface) !important;
    border: none !important;
    border-right: 1px solid var(--app-color-border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 10px 12px 14px !important;
    overflow: visible !important;
    position: relative;
}

/* No decorative top stripe on nav */
.manager-nav::after {
    display: none;
}

/* Section headers — Neutral uppercase, subtle */
.manager-nav__menu .rz-panel-menu-item-text {
    color: var(--app-color-text-secondary) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    font-family: var(--app-font-family-heading) !important;
    padding: 8px 10px 4px !important;
}

/* Remove default item borders — we use spacing instead */
.manager-nav__menu .rz-navigation-item,
.manager-nav__menu .rz-panel-menu-item {
    border-bottom: none !important;
    border-radius: var(--sb-radius-md) !important;
    margin: 1px 0 !important;
}

/* Nav links — Rounded, generous padding, no border-left */
.manager-nav__menu .rz-navigation-item-link,
.manager-nav__menu .rz-panel-menu-item > .rz-navigation-item-link {
    border-left: none !important;
    border-radius: var(--sb-radius-md) !important;
    padding: 0.625rem 0.75rem !important;
    font-size: var(--app-font-size-body) !important;
    font-weight: 500 !important;
    color: var(--sb-manager-nav-link) !important;
    transition: all var(--sb-transition-fast);
}

/* Ensure nested nav menus have left indent for icon breathing room */
.manager-nav__menu .rz-panel-menu-item > .rz-navigation-menu {
    padding-left: 2px !important;
}

/* Icon spacing — CRITICAL: Radzen uses margin-left:-26px to create a
   hanging indent. This positions icons outside the link box, where
   rz-navigation-item-wrapper's overflow:hidden clips them. Reset to 0. */
.manager-nav__menu .rz-navigation-item-link .rzi,
.manager-nav__menu .rz-navigation-item-icon,
.manager-nav__menu .rz-navigation-item-icon-children {
    margin-left: 0 !important;
    margin-right: 0.625rem !important;
    font-size: 1.25rem !important;
}

/* Hover — Neutral soft background */
.manager-nav__menu .rz-navigation-item-link:hover,
.manager-nav__menu .rz-panel-menu-item > .rz-navigation-item-link:hover {
    background: var(--app-color-surface-muted) !important;
    color: var(--sb-manager-nav-hover) !important;
}

/* Active — Solid green pill, white text — clear, modern hierarchy */
.manager-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
.manager-nav__menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.manager-nav__menu .rz-navigation-item-link-active,
.manager-nav__menu .rz-navigation-item-link.active,
.manager-nav__menu .rz-panel-menu-item.is-active > .rz-navigation-item-link {
    background: var(--app-color-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(var(--app-primary-rgb), 0.28) !important;
}

/* Active item icons — white */
.manager-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link .rzi,
.manager-nav__menu .rz-navigation-item-link-active .rzi,
.manager-nav__menu .rz-navigation-item-link.active .rzi,
.manager-nav__menu .rz-navigation-item.rz-state-active .rz-navigation-item-icon {
    color: #ffffff !important;
}


/* ==========================================================================
   DASHBOARD CARDS — Colour-accented, animated, interactive
   ========================================================================== */

.dashboard-action-strip__card,
.progress-summary {
    background: var(--app-color-surface) !important;
    border: 1px solid var(--app-color-border-subtle) !important;
    border-radius: var(--sb-radius-card) !important;
    box-shadow: var(--sb-elevation-2) !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform var(--sb-transition-base), box-shadow var(--sb-transition-base);
}

.dashboard-action-strip__card:hover,
.progress-summary:hover {
    transform: translateY(-3px);
    box-shadow: var(--sb-elevation-3) !important;
}

/* Remove dated top border — __accent span handles the left bar */
.dashboard-action-strip__card::before {
    display: none !important;
}

/* Gradient overlay on hover */
.dashboard-action-strip__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--sb-transition-base);
}

.dashboard-action-strip__card--urgent::after {
    background: linear-gradient(160deg, rgba(var(--app-color-amber-rgb), 0.06), transparent 60%);
}

.dashboard-action-strip__card--progress::after {
    background: linear-gradient(160deg, rgba(var(--app-primary-rgb), 0.06), transparent 60%);
}

.dashboard-action-strip__card--info::after {
    background: linear-gradient(160deg, rgba(var(--app-color-info-rgb), 0.06), transparent 60%);
}

.dashboard-action-strip__card:hover::after {
    opacity: 1;
}

/* Status icons — Large rounded square */
.dashboard-action-strip__icon {
    border-radius: var(--sb-radius-md) !important;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.dashboard-action-strip__card--urgent .dashboard-action-strip__icon {
    background: rgba(var(--app-color-amber-rgb), 0.12) !important;
    color: var(--sb-status-urgent) !important;
}

.dashboard-action-strip__card--progress .dashboard-action-strip__icon {
    background: rgba(var(--app-primary-rgb), 0.12) !important;
    color: var(--sb-status-progress) !important;
}

.dashboard-action-strip__card--info .dashboard-action-strip__icon {
    background: rgba(var(--app-color-info-rgb), 0.12) !important;
    color: var(--sb-status-info) !important;
}

/* Stat counts — Very large, bold, Poppins, colour-matched */
.dashboard-action-strip__count,
.progress-summary__value--count {
    font-weight: 800 !important;
    font-feature-settings: 'tnum';
    font-family: var(--app-font-family-heading) !important;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
    line-height: 1;
}

.dashboard-action-strip__card--urgent .dashboard-action-strip__count {
    color: var(--sb-status-urgent) !important;
}

.dashboard-action-strip__card--progress .dashboard-action-strip__count {
    color: var(--sb-status-progress) !important;
}

.dashboard-action-strip__card--info .dashboard-action-strip__count {
    color: var(--sb-status-info) !important;
}

.progress-summary__image {
    border-radius: var(--sb-radius-lg) !important;
}


/* ==========================================================================
   ENTRY ANIMATIONS — Cards slide up on load
   ========================================================================== */

.dashboard-action-strip__card,
.progress-summary {
    animation: sb-card-entrance 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dashboard-action-strip__card:nth-child(2),
.progress-summary:nth-child(2) { animation-delay: 60ms; }

.dashboard-action-strip__card:nth-child(3),
.progress-summary:nth-child(3) { animation-delay: 120ms; }

@keyframes sb-card-entrance {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   BUTTONS — Pill-shaped, lifted, tactile (Poppins labels)
   ========================================================================== */

.rz-button, .mud-button-filled {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-family: var(--app-font-family-heading) !important;
    letter-spacing: 0.01em;
    box-shadow: var(--sb-elevation-1) !important;
    transition: all var(--sb-transition-fast) !important;
}

.rz-button:hover, .mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: var(--sb-elevation-2) !important;
}

.rz-button:active,
.mud-button-filled:active,
.manager-bottom-nav .shell-bottom-nav__item:active {
    transform: translateY(0) scale(0.97);
}

.rz-button.rz-button-md {
    padding: 0 26px !important;
    height: 40px;
}


/* ==========================================================================
   INPUTS — Rounded, inset shadow, green focus ring
   ========================================================================== */

.rz-textbox, .rz-dropdown, .rz-textarea, .rz-numeric, .mud-input {
    border-radius: var(--sb-radius-md) !important;
    border: 1px solid var(--app-color-border) !important;
    background-color: var(--app-color-surface) !important;
    transition: all var(--sb-transition-fast) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.rz-textbox:focus, .rz-dropdown:focus, .rz-textarea:focus,
.rz-numeric:focus, .mud-input:focus-within {
    background-color: var(--app-color-surface) !important;
    border-color: var(--app-color-primary) !important;
    box-shadow: var(--app-shadow-focus) !important;
}


/* ==========================================================================
   ICONS IN CARDS — Green-tinted rounded squares
   ========================================================================== */

.rz-card .rz-icon, .sb-card .rz-icon, .rz-grid .rz-icon, .sb-card .material-icons {
    background-color: rgba(var(--app-primary-rgb), 0.10);
    color: var(--app-color-primary);
    padding: 8px;
    border-radius: var(--sb-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}


/* ==========================================================================
   BOTTOM NAV — Scouting green active state
   ========================================================================== */

.manager-bottom-nav {
    background: var(--app-color-surface) !important;
    border-color: var(--app-color-border-subtle) !important;
    box-shadow: var(--sb-elevation-1) !important;
}

.manager-bottom-nav .shell-bottom-nav__item {
    transition: color var(--sb-transition-fast), transform var(--sb-transition-fast);
}

.manager-bottom-nav .shell-bottom-nav__item.is-active {
    color: var(--app-color-primary) !important;
}

.manager-bottom-nav .shell-bottom-nav__item.is-active .shell-bottom-nav__icon-wrapper {
    background-color: rgba(var(--app-primary-rgb), 0.12) !important;
    border-radius: 9999px;
}


/* ==========================================================================
   DIALOGS & MODALS — Deep shadow, frosted backdrop
   ========================================================================== */

.rz-dialog-content {
    border-radius: 24px !important;
    box-shadow: var(--sb-elevation-5) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.rz-dialog-overlay {
    background: var(--app-color-overlay) !important;
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
}


/* ==========================================================================
   DATA GRIDS — Refined, Poppins headers, green-tinted hover
   ========================================================================== */

.rz-datatable .rz-datatable-thead > tr > th {
    font-family: var(--app-font-family-heading) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
    color: var(--app-color-text-muted) !important;
    border-bottom: 1px solid var(--app-color-border) !important;
    background: var(--app-color-surface-alt) !important;
}

.rz-datatable .rz-datatable-tbody > tr {
    transition: background-color var(--sb-transition-fast);
}

.rz-datatable .rz-datatable-tbody > tr:hover {
    background-color: rgba(var(--app-primary-rgb), 0.03) !important;
}

.rz-datatable .rz-datatable-tbody > tr > td {
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
}


/* ==========================================================================
   SCROLLBAR — Thin, green-tinted
   ========================================================================== */

.shell-scroll-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.12) transparent;
}


/* ==========================================================================
   ACCESSIBILITY — Reduced motion
   ========================================================================== */

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

/* ==========================================================================
   MOBILE — Floating glass nav bar, clean workspace
   ========================================================================== */
@media (max-width: 767.98px) {
    .manager-shell {
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .manager-topbar {
        border-radius: 0 0 var(--sb-radius-card) var(--sb-radius-card) !important;
        border: 1px solid var(--app-color-border-subtle) !important;
        border-top: 0 !important;
        box-shadow: var(--sb-elevation-2) !important;
        position: relative;
    }

    /* No green stripe on mobile topbar */
    .manager-topbar::after {
        display: none;
    }

    /* Float offset for the bottom nav — used by both the nav and the action bar above it */
    :root {
        --manager-bottom-nav-float-offset: 10px;
        /* Override total height to include the float gap so the shell doesn't
           overlap the floating pill on iOS PWA (home screen / standalone mode) */
        --sb-bottom-nav-total-height: calc(var(--sb-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--manager-bottom-nav-float-offset));
    }

    .manager-bottom-nav {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(var(--manager-bottom-nav-float-offset) + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: 0 !important;
        border-radius: 22px !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.02),
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 2px 8px rgba(var(--app-primary-rgb), 0.06) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        backdrop-filter: blur(20px) saturate(200%);
    }

    .manager-topbar__title-group h3,
    .topbar-context-header__title {
        font-size: clamp(1.2rem, 5vw, 1.4rem) !important;
    }

    .manager-topbar__subtitle,
    .topbar-context-header__subtitle,
    .dashboard-action-strip__desc,
    .progress-summary__subtitle {
        font-size: 0.94rem !important;
    }

    .rz-body, .sb-page-content, .dashboard-page {
        padding: 16px !important;
        background-color: var(--sb-manager-bg) !important;
    }

    .content-page__body {
        padding: 12px !important;
        background-color: var(--sb-manager-bg) !important;
    }

    .user-catalog-page {
        padding: 0 !important;
    }

    .rz-card, .sb-card, .app-card, .rz-grid, .mud-paper {
        margin-bottom: 14px !important;
        border-radius: var(--sb-radius-lg) !important;
    }

    .dashboard-action-strip__card,
    .progress-summary,
    .review-list-item,
    .accordion-section {
        border-radius: var(--sb-radius-lg) !important;
    }

    .review-list-item {
        padding: 12px !important;
    }
    
    .accordion-section__header {
        padding: 16px !important;
    }
    
    .bulk-complete-page__title {
        font-size: clamp(1.3rem, 6.2vw, 1.6rem) !important;
        margin-bottom: 16px !important;
    }
    
    /* Prevent cards from bleeding to the edges */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    .col-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ==========================================================================
   LEIDING SECTION POLISH (Speltak & Catalog)
   ========================================================================== */

/* Stat Cards (Speltak Overview) */
.stat-card {
    background-color: var(--app-color-surface) !important;
    border: none !important;
    box-shadow: var(--sb-elevation-2) !important;
    border-radius: var(--sb-radius-card) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: sb-manager-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }

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

.stat-card__value--warning {
    color: var(--sb-status-urgent) !important;
}

.stat-card__value--success {
    color: var(--sb-status-progress) !important;
}

/* User Catalog Cards (Speltak) */
.user-catalog-card {
    background-color: var(--app-color-surface) !important;
    border: none !important;
    box-shadow: var(--sb-elevation-2) !important;
    border-radius: var(--sb-radius-card) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: sb-manager-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.user-catalog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-elevation-3) !important;
}

.user-catalog-card__name {
    font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
    letter-spacing: -0.01em;
    color: var(--sb-manager-ink);
}

/* Progress Bar Polish */
.user-catalog-card__progress-bar--stacked {
    background: var(--app-color-surface-muted) !important;
    height: 8px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.user-catalog-card__bar-segment--completed {
    background: linear-gradient(90deg, var(--app-color-primary), var(--app-color-primary-dark)) !important;
}

.user-catalog-card__bar-segment--active {
    background: linear-gradient(90deg, var(--sb-status-urgent), var(--app-color-gold)) !important;
}

/* Stat Chips Polish */
.user-catalog-card__stat-chip--active {
    background: color-mix(in srgb, var(--sb-status-urgent) 10%, transparent) !important;
    color: var(--sb-status-urgent) !important;
    border: 1px solid color-mix(in srgb, var(--sb-status-urgent) 20%, transparent) !important;
}

.user-catalog-card__stat-chip--completed {
    background: color-mix(in srgb, var(--sb-status-progress) 10%, transparent) !important;
    color: var(--sb-status-progress) !important;
    border: 1px solid color-mix(in srgb, var(--sb-status-progress) 20%, transparent) !important;
}

/* Badge Catalog Cards */
.badge-catalog-card {
    background-color: var(--app-color-surface) !important;
    border: none !important;
    box-shadow: var(--sb-elevation-2) !important;
    border-radius: var(--sb-radius-card) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: sb-manager-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    padding: 16px 12px !important; /* Give the image and text more breathing room */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

.badge-catalog-card:hover {
    transform: translateY(-4px); /* Slightly more lift for badges */
    box-shadow: var(--sb-elevation-3) !important;
}

.badge-catalog-card__image {
    width: 80px !important; /* Larger images */
    height: 80px !important;
    border-radius: 50% !important; /* Circular badge images look more premium */
    background: var(--app-color-surface-subtle) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    padding: 12px !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
}

.badge-catalog-card__title {
    font-size: 0.9rem !important; /* Slightly smaller, more readable font size */
    letter-spacing: -0.01em;
    color: var(--sb-manager-ink);
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Allow up to 3 lines before truncating */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    word-break: normal !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
}

.badge-catalog-section__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; /* Wider columns prevent word-wrap on Dutch compound names */
    gap: 16px !important;
    align-items: stretch !important;
}

.badge-catalog-section__header {
    border-bottom: 2px solid var(--app-color-border-subtle) !important;
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.badge-catalog-section__title {
    font-size: clamp(1.4rem, 3vw, 1.75rem) !important;
    letter-spacing: -0.025em;
    font-weight: 800 !important;
    color: var(--sb-manager-ink);
    margin: 0 !important;
    font-variation-settings: 'opsz' 32;
}

.badge-catalog-section__count {
    font-size: 0.95rem !important;
    color: var(--app-color-text-muted) !important;
    font-weight: 500;
    background: var(--app-color-surface-muted);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Stagger animations for grid items */
.user-catalog__grid > *:nth-child(1), .badge-list > *:nth-child(1) { animation-delay: 0.05s; }
.user-catalog__grid > *:nth-child(2), .badge-list > *:nth-child(2) { animation-delay: 0.1s; }
.user-catalog__grid > *:nth-child(3), .badge-list > *:nth-child(3) { animation-delay: 0.15s; }
.user-catalog__grid > *:nth-child(4), .badge-list > *:nth-child(4) { animation-delay: 0.2s; }
.user-catalog__grid > *:nth-child(5), .badge-list > *:nth-child(5) { animation-delay: 0.25s; }
.user-catalog__grid > *:nth-child(6), .badge-list > *:nth-child(6) { animation-delay: 0.3s; }
.user-catalog__grid > *:nth-child(7), .badge-list > *:nth-child(7) { animation-delay: 0.35s; }
.user-catalog__grid > *:nth-child(8), .badge-list > *:nth-child(8) { animation-delay: 0.4s; }

/* ==========================================================================
   REVIEWS & BULK COMPLETE POLISH
   ========================================================================== */

/* Review List Items */
.review-list-item {
    background-color: var(--app-color-surface) !important;
    border: none !important;
    box-shadow: var(--sb-elevation-2) !important;
    border-radius: var(--sb-radius-card) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: sb-manager-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    padding: 16px !important;
}

.review-list-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-elevation-3) !important;
}

.review-list-item__header h3 {
    font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
    letter-spacing: -0.01em;
    color: var(--sb-manager-ink);
    font-weight: 600 !important;
}

.review-list-item__meta {
    color: var(--app-color-text-muted) !important;
    font-size: 0.95rem !important;
}

/* Bulk Complete Accordions */
.accordion-section {
    background-color: var(--app-color-surface) !important;
    border: none !important;
    box-shadow: var(--sb-elevation-2) !important;
    border-radius: var(--sb-radius-card) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: sb-manager-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    margin-bottom: 16px !important;
}

.accordion-section--expanded {
    box-shadow: var(--sb-elevation-3) !important;
}

.accordion-section__header {
    padding: 20px 24px !important;
}

.accordion-section__title {
    font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
    letter-spacing: -0.01em;
    color: var(--sb-manager-ink);
    font-weight: 600 !important;
}

.bulk-complete-page__summary-chip {
    background: rgba(var(--app-primary-rgb), 0.1) !important;
    color: var(--app-color-primary) !important;
    border: 1px solid rgba(var(--app-primary-rgb), 0.2) !important;
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
}

.bulk-complete-page__title {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    letter-spacing: -0.025em;
    font-weight: 800 !important;
    color: var(--sb-manager-ink);
    margin-bottom: 24px !important;
    font-variation-settings: 'opsz' 32;
}

/* Stagger animations for list items */
.review-list-item:nth-child(1), .accordion-section:nth-child(1) { animation-delay: 0.05s; }
.review-list-item:nth-child(2), .accordion-section:nth-child(2) { animation-delay: 0.1s; }
.review-list-item:nth-child(3), .accordion-section:nth-child(3) { animation-delay: 0.15s; }
.review-list-item:nth-child(4), .accordion-section:nth-child(4) { animation-delay: 0.2s; }
.review-list-item:nth-child(5), .accordion-section:nth-child(5) { animation-delay: 0.25s; }

/* ==========================================================================
   MOBILE OVERRIDES (Must be at the end to override desktop styles)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Badge Catalog Mobile Polish */
    .badge-catalog-section__grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 8px !important;
        grid-auto-rows: 112px !important; /* tall enough for 2-line titles at 0.78rem */
    }
    
    .badge-catalog-view__item-button {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .badge-catalog-card {
        height: 100% !important;
        padding: 6px 6px 8px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    
    .badge-catalog-card__image {
        width: 44px !important;
        height: 44px !important;
        padding: 4px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .badge-catalog-card__title {
        font-size: 0.78rem !important;
        -webkit-line-clamp: 2 !important;
        min-height: 0 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    
    /* Speltak Catalog Mobile Polish */
    .user-catalog-card {
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .user-catalog-card__row {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    
    .user-catalog-card__avatar-wrap .scouts-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .user-catalog-card__name, .user-catalog-card__name--inline {
        font-size: 0.92rem !important;
    }
    
    .user-catalog-card__summary {
        font-size: 0.72rem !important;
    }
    
    .user-catalog-card__progress-bar--stacked {
        height: 5px !important;
        margin-top: 3px !important;
    }
    
    .user-catalog-group-header {
        padding: 4px 0 4px !important;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
    }
    
    .user-catalog-group-header__icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
    }
    
    .user-catalog-group-header__label {
        font-size: 12px !important;
    }
    
    .user-catalog-group-header__count {
        font-size: 12px !important;
    }

    /* Speltak Detail Mobile Polish */
    .speltak-detail-page {
        padding-top: 0 !important;
        gap: 0 !important;
    }

    .speltak-detail-tabpanel {
        gap: 0 !important;
    }

    .speltak-detail-tabpanel,
    .awards-badge-tabpanel,
    .review-detail-tabpanel {
        padding-inline: 0 !important;
    }

    .speltak-detail-page .user-detail-badges__search-wrap {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .speltak-detail-page .user-detail-badges .scouts-mobile-bar .filter-chip-bar,
    .speltak-detail-page .user-detail-badges .tab-panel-toolbar__filters .filter-chip-bar {
        padding-top: 6px !important;
        gap: 6px !important;
    }

    .speltak-detail-page .user-detail-badges .filter-chip {
        padding: 5px 12px !important;
        font-size: 0.82rem !important;
    }

    .speltak-detail-page .user-detail-badges__search .search-bar__input {
        min-height: 34px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 0.78rem !important;
    }

    .speltak-detail-page .user-detail-badges__result-count {
        font-size: 0.82rem !important;
    }

    .speltak-detail-page .user-detail-badges__list {
        gap: 4px !important;
    }

    .speltak-detail-page .user-detail-badges__card.app-card {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }

    .speltak-detail-page .user-detail-badges__row {
        gap: 7px !important;
    }

    .speltak-detail-page .user-detail-badges__badge-image {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .speltak-detail-page .user-detail-badges__identity h4 {
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
    }

    .speltak-detail-page .user-detail-badges__status {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
    }

    .speltak-detail-page .progress-ring {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .speltak-detail-page .progress-ring__label {
        font-size: 0.64rem !important;
    }

    .speltak-detail-page .user-detail-handout__section {
        gap: 8px !important;
    }

    .speltak-detail-page .user-detail-handout__section + .user-detail-handout__section {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    .speltak-detail-page .user-detail-handout__section-title {
        font-size: 1rem !important;
    }

    .speltak-detail-page .user-detail-handout__list {
        gap: 6px !important;
    }

    .speltak-detail-page .user-detail-handout__item.app-card {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }

    .speltak-detail-page .user-detail-handout__item-content {
        gap: 10px !important;
    }

    .speltak-detail-page .user-detail-handout__badge-image {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .speltak-detail-page .user-detail-handout__item-info h4 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .speltak-detail-page .user-detail-handout__meta {
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
    }

    /* Badge Hub Detail Mobile Polish */
    .awards-badge-page {
        padding-top: 0 !important;
        gap: 0 !important;
    }

    .awards-badge-tabpanel {
        gap: 0 !important;
    }

    .awards-badge-page .awards-badge-scouts__search-wrap {
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    .awards-badge-page .awards-badge-scouts .scouts-mobile-bar .filter-chip-bar,
    .awards-badge-page .awards-badge-scouts .tab-panel-toolbar__filters .filter-chip-bar {
        padding-top: 6px !important;
        gap: 6px !important;
    }

    .awards-badge-page .awards-badge-scouts .filter-chip {
        padding: 5px 12px !important;
        font-size: 0.82rem !important;
    }

    .awards-badge-page .awards-badge-scouts__search .search-bar__input {
        min-height: 34px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 0.78rem !important;
    }

    .awards-badge-page .awards-badge-scouts__result-count {
        font-size: 0.82rem !important;
    }

    .awards-badge-page .awards-badge-scouts__list {
        gap: 4px !important;
    }

    .awards-badge-page .awards-badge-section .app-card {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }

    .awards-badge-page .awards-badge-scouts__row {
        gap: 7px !important;
    }

    .awards-badge-page .awards-badge-scouts .scouts-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .awards-badge-page .awards-badge-scouts__identity h4 {
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
    }

    .awards-badge-page .awards-badge-scouts__selected-indicator {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
    }

    .awards-badge-page .progress-ring {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .awards-badge-page .progress-ring__label {
        font-size: 0.64rem !important;
    }

    .awards-badge-page .awards-badge-handout__header {
        gap: 8px !important;
    }

    .awards-badge-page .awards-badge-handout__list {
        gap: 6px !important;
    }

    .awards-badge-page .awards-badge-handout__card-action {
        gap: 10px !important;
    }

    .awards-badge-page .awards-badge-handout__card-action h4 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .awards-badge-page .awards-badge-handout__meta {
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
    }
}

/* Global detail tab-content gutter: no side gutters — content fills to shell edge */
:where(.speltak-detail-tabpanel, .awards-badge-tabpanel, .review-detail-tabpanel) {
    padding-inline: 0 !important;
}


/* ================================================================
   NOTIFICATION INBOX — Design 1: Unified Inbox
   ================================================================
   Shared component styles for NotificationInboxView,
   NotificationInboxRow, and NotificationDateDivider.
   ================================================================ */

.notification-inbox {
    width: 100%;
    max-width: 800px;
}

.notification-inbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-4);
    flex-wrap: wrap;
}

.notification-inbox__title-group h2 {
    margin: 0;
    font-size: var(--app-font-size-title, 1.0625rem);
    font-weight: var(--app-font-weight-bold, 600);
    color: var(--app-color-text, #1e293b);
}

.notification-inbox__unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--app-color-primary, #00b85e);
    color: var(--app-color-text-on-dark);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.notification-inbox__bulk-actions {
    align-items: center;
    flex-wrap: wrap;
}

.notification-inbox__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--app-font-size-caption, 0.8125rem);
    color: var(--app-color-text-muted, #64748b);
}

.notification-inbox__action-btn:hover {
    color: var(--app-color-text, #1e293b);
}

.notification-inbox__selection-count {
    font-size: var(--app-font-size-caption, 0.8125rem);
    color: var(--app-color-text-muted, #64748b);
    font-weight: 500;
}

.notification-inbox__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notification-date-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0 0.375rem;
}

.notification-date-divider__label {
    font-size: var(--app-font-size-caption, 0.8125rem);
    font-weight: 600;
    color: var(--app-color-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.notification-date-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--app-color-border, #e2e8f0);
}

.notification-inbox-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.875rem;
    padding: 0.875rem 0.75rem;
    border-radius: var(--app-radius-s, 0.625rem);
    cursor: pointer;
    align-items: flex-start;
    transition:
        background-color var(--sb-transition-fast, 120ms ease),
        box-shadow var(--sb-transition-fast, 120ms ease);
    border-bottom: 1px solid var(--app-color-border, #e2e8f0);
}

.notification-inbox-row:last-child {
    border-bottom: none;
}

.notification-inbox-row:hover {
    background: var(--app-color-surface-muted, #f1f5f9);
}

.notification-inbox-row:focus-visible {
    outline: 2px solid var(--app-color-primary, #00b85e);
    outline-offset: -2px;
}

.notification-inbox-row.is-unread {
    background: rgba(var(--app-primary-rgb), 0.04);
}

.notification-inbox-row.is-unread:hover {
    background: rgba(var(--app-primary-rgb), 0.08);
}

.notification-inbox-row.is-read {
    opacity: 0.75;
}

.notification-inbox-row.is-read:hover {
    opacity: 1;
}

.notification-inbox-row__checkbox {
    display: flex;
    align-items: center;
    padding-top: 0.125rem;
}

.notification-inbox-row__checkbox input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--app-color-primary, #00b85e);
    cursor: pointer;
}

.notification-inbox-row__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--app-radius-s, 0.625rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.notification-inbox-row__icon.scenario-success {
    background: color-mix(in srgb, var(--app-color-success) 12%, transparent);
    color: var(--app-stat-color-success, #059669);
}

.notification-inbox-row__icon.scenario-info {
    background: rgba(var(--app-primary-rgb), 0.10);
    color: var(--app-color-primary, #00b85e);
}

.notification-inbox-row__icon.scenario-warning {
    background: var(--app-color-amber-muted, rgba(245, 158, 11, 0.10));
    color: var(--app-color-amber, #f59e0b);
}

.notification-inbox-row__icon.scenario-danger {
    background: color-mix(in srgb, var(--app-color-danger) 12%, transparent);
    color: var(--app-color-danger);
}

.notification-inbox-row__icon.scenario-default {
    background: var(--app-color-surface-muted, #f1f5f9);
    color: var(--app-color-text-muted, #64748b);
}

.notification-inbox-row__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.notification-inbox-row__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.notification-inbox-row__title {
    font-weight: 600;
    font-size: var(--app-font-size-body, 0.9375rem);
    color: var(--app-color-text, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-inbox-row.is-read .notification-inbox-row__title {
    font-weight: 500;
}

.notification-inbox-row__time {
    font-size: var(--app-font-size-caption, 0.8125rem);
    color: var(--app-color-text-secondary, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
}

.notification-inbox-row__body {
    font-size: var(--app-font-size-caption, 0.8125rem);
    color: var(--app-color-text-muted, #64748b);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-inbox-row__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.notification-inbox-row__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.notification-inbox-row__pill.scenario-success {
    background: color-mix(in srgb, var(--app-color-success) 10%, transparent);
    color: var(--app-stat-color-success, #059669);
}

.notification-inbox-row__pill.scenario-info {
    background: rgba(var(--app-primary-rgb), 0.08);
    color: var(--app-color-primary-dark, #009a4e);
}

.notification-inbox-row__pill.scenario-warning {
    background: var(--app-color-amber-muted, rgba(245, 158, 11, 0.10));
    color: var(--app-color-amber-dark);
}

.notification-inbox-row__pill.scenario-danger {
    background: color-mix(in srgb, var(--app-color-danger) 10%, transparent);
    color: var(--app-color-danger);
}

.notification-inbox-row__pill.scenario-default {
    background: var(--app-color-surface-muted, #f1f5f9);
    color: var(--app-color-text-muted, #64748b);
}

.notification-inbox-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--app-color-primary, #00b85e);
    color: var(--app-color-text-on-dark);
}

.notification-inbox-row__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity var(--sb-transition-fast, 120ms ease);
}

.notification-inbox-row:hover .notification-inbox-row__actions,
.notification-inbox-row:focus-within .notification-inbox-row__actions {
    opacity: 1;
}

.notification-inbox-row__action {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--app-radius-s, 0.625rem);
    color: var(--app-color-text-muted, #64748b);
}

.notification-inbox-row__action:hover {
    background: var(--app-color-surface-muted, #f1f5f9);
    color: var(--app-color-text, #1e293b);
}

.notification-inbox__pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.notification-inbox__pager-buttons {
    flex-wrap: wrap;
    justify-content: center;
}

.notification-inbox__pager-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: var(--app-radius-s, 0.625rem);
    font-size: var(--app-font-size-caption, 0.8125rem);
    font-weight: 500;
    color: var(--app-color-text-muted, #64748b);
}

.notification-inbox__pager-btn:hover {
    background: var(--app-color-surface-muted, #f1f5f9);
    color: var(--app-color-text, #1e293b);
}

.notification-inbox__pager-btn--active {
    background: var(--app-color-primary, #00b85e);
    color: var(--app-color-text-on-dark);
    font-weight: 600;
}

.notification-inbox__pager-btn--active:hover {
    background: var(--app-color-primary-dark, #009a4e);
    color: var(--app-color-text-on-dark);
}

.notification-inbox__pager-summary {
    font-size: var(--app-font-size-caption, 0.8125rem);
    color: var(--app-color-text-secondary, #94a3b8);
}

@media (max-width: 640px) {
    .notification-inbox-row {
        grid-template-columns: auto 1fr;
        gap: 0.625rem;
        padding: 0.75rem 0.5rem;
    }

    .notification-inbox-row__actions {
        opacity: 1;
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 0.25rem;
    }

    .notification-inbox-row__title {
        font-size: var(--app-font-size-body, 0.9375rem);
    }

    .notification-inbox__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .notification-inbox__bulk-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ─────────────────────────────────────────────────────────────
   Radzen global overrides
   Radzen appends popups directly to <body>, so z-index must be
   set globally — scoped CSS ::deep rules never match them.
   ───────────────────────────────────────────────────────────── */

/* Ensure dropdowns/popups always appear above full-screen overlays (z-index 9999) */
.rz-popup {
    z-index: 10000 !important;
}

/* ─────────────────────────────────────────────────────────────
   UX Polish: Notifications
   ───────────────────────────────────────────────────────────── */

/* The notification page title is already shown in the topbar via PageHeader.
   Hide the duplicate h2 inside the inbox header area. */
.notification-inbox__title-group {
    display: none;
}

/* On mobile: hide the per-row action buttons — they clutter the compact list.
   Tapping the row is the primary gesture on mobile (marks as read via OnItemClick). */
@media (max-width: 640px) {
    .notification-inbox-row__actions {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   UX Polish: Dashboard
   ───────────────────────────────────────────────────────────── */

/* On small screens use a 2-column KPI grid instead of single column.
   Single-column makes each card very tall and wastes vertical space. */
@media (max-width: 600px) {
    .dashboard__kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================================
   UX Polish: Reviews
   ───────────────────────────────────────────────────────────── */

/* Compact toggle labels on mobile list */
@media (max-width: 767.98px) {
    .review-catalog__toggle-label {
        font-size: 0.75rem !important;
        gap: 0.25rem !important;
    }
    
    .review-catalog__toggles {
        gap: 0.5rem !important;
    }
}

/* 
   Review Detail (Mobile): Sticky Action Bar for Approve/Reject
   Floats above the bottom navigation bar so both are always visible.
   Bottom nav z-index = var(--sb-z-fixed) = 1030; we use var(--sb-z-sticky) = 1020
   The action bar floats above the nav as a matching pill, with an 8px gap between them.
*/
@media (max-width: 767.98px) {
    .shell-page-toolbar__actions:has(.review-decision-bar) {
        position: fixed;
        /* Sit above the floating nav + 8px gap between the two pills */
        bottom: calc(var(--sb-bottom-nav-height) + var(--manager-bottom-nav-float-offset, 0px) + env(safe-area-inset-bottom, 0px) + var(--sb-space-2));
        left: 10px;
        right: 10px;
        z-index: var(--sb-z-sticky); /* 1020 - above page content, below bottom nav */
        
        /* Match the floating pill style of the bottom nav */
        background: var(--app-color-glass);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-radius: 22px;
        border: 1px solid var(--app-color-border);
        box-shadow: var(--sb-elevation-3);
        padding: var(--sb-space-3) var(--sb-space-3) !important;
        
        display: flex;
        justify-content: flex-end;
    }

    /* Reset padding inside the action bar itself */
    .shell-page-toolbar__actions:has(.review-decision-bar) .action-bar {
        padding: 0 !important;
        width: 100%;
    }
    
    /* Full-width buttons */
    .shell-page-toolbar__actions:has(.review-decision-bar) .review-decision-bar__actions {
        display: flex;
        width: 100%;
        gap: var(--sb-space-2);
    }
    
    .shell-page-toolbar__actions:has(.review-decision-bar) .review-decision-bar__actions .app-btn {
        flex: 1;
        justify-content: center;
    }

    /* Rejection feedback form also full-width */
    .shell-page-toolbar__actions:has(.review-decision-bar) .review-decision-bar__feedback {
        width: 100%;
    }

    /* 
       Extra padding at bottom of tabpanel so content isn't hidden behind the
       sticky action bar (~52px) + gap + nav (~80px).
    */
    .review-detail-tabpanel {
        padding-bottom: calc(var(--sb-bottom-nav-total-height) + 80px + var(--sb-space-2)) !important;
    }
}

/* ==========================================================================
   PREMIUM DATA GRID POLISH
   Radzen DataGrid refinements for a world-class admin experience
   ========================================================================== */

/* Grid header — crisp, scannable */
.rz-grid .rz-datatable-thead th {
    background: var(--app-color-surface-alt) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
    color: var(--app-color-text-muted) !important;
    border-bottom: 1px solid var(--app-color-border) !important;
    padding: 12px 16px !important;
}

/* Grid rows — generous spacing, clean dividers */
.rz-grid .rz-datatable-tbody td {
    font-size: var(--app-font-size-meta) !important;
    color: var(--app-color-text) !important;
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
    padding: 12px 16px !important;
    transition: background var(--sb-transition-fast);
}

/* Row hover — soft tint */
.rz-grid .rz-datatable-tbody tr:hover td {
    background: rgba(var(--app-primary-rgb), 0.03) !important;
}

/* Selected row */
.rz-grid .rz-datatable-tbody tr.rz-state-highlight td {
    background: rgba(var(--app-primary-rgb), 0.06) !important;
}

/* Pager styling */
.rz-grid .rz-pager {
    background: var(--app-color-surface) !important;
    border-top: 1px solid var(--app-color-border-subtle) !important;
    padding: 8px 12px !important;
}

.rz-grid .rz-pager .rz-pager-page.rz-state-active {
    background: var(--app-color-primary) !important;
    color: var(--app-color-primary-text) !important;
    border-radius: var(--sb-radius-sm) !important;
    font-weight: 600 !important;
}

/* Empty state inside grids */
.rz-grid .rz-datatable-empty {
    padding: 48px 24px !important;
    color: var(--app-color-text-muted) !important;
    font-size: var(--app-font-size-body) !important;
}

/* ==========================================================================
   FORM ELEMENT REFINEMENTS
   ========================================================================== */

/* Label styling */
.rz-form-field label,
label.rz-label {
    font-size: var(--app-font-size-caption) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: var(--app-color-text-strong) !important;
    margin-bottom: 4px !important;
}

/* Placeholder styling */
.rz-textbox::placeholder,
.rz-textarea::placeholder {
    color: var(--app-color-text-secondary) !important;
    font-weight: 400 !important;
}

/* Dropdown panel — premium popup */
.rz-dropdown-panel {
    border-radius: var(--sb-radius-md) !important;
    box-shadow: var(--sb-elevation-3) !important;
    border: 1px solid var(--app-color-border) !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover {
    background: rgba(var(--app-primary-rgb), 0.06) !important;
}

.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background: rgba(var(--app-primary-rgb), 0.10) !important;
    color: var(--app-color-primary-dark) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   DIALOG POLISH — Centred, airy, premium
   ========================================================================== */

.rz-dialog-content {
    padding: 28px 32px !important;
}

.rz-dialog-titlebar {
    padding: 20px 32px 12px !important;
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
}

.rz-dialog-titlebar .rz-dialog-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--app-color-text-deep) !important;
}

.rz-dialog-wrapper .rz-dialog {
    border: 1px solid var(--app-color-border-subtle) !important;
}

/* Dialog overlay */
.rz-dialog-mask {
    background: var(--app-color-overlay) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   TOOLTIP & CONTEXTUAL MENUS
   ========================================================================== */

.rz-tooltip {
    font-size: var(--app-font-size-caption) !important;
    border-radius: var(--sb-radius-sm) !important;
    box-shadow: var(--sb-elevation-2) !important;
    padding: 6px 12px !important;
}

.rz-contextmenu {
    border-radius: var(--sb-radius-md) !important;
    box-shadow: var(--sb-elevation-3) !important;
    border: 1px solid var(--app-color-border) !important;
    overflow: hidden;
}

.rz-contextmenu .rz-navigation-item-link:hover {
    background: rgba(var(--app-primary-rgb), 0.06) !important;
}

/* ==========================================================================
   STATUS BADGES — Consistent, refined
   ========================================================================== */

.sb-status-badge--approved,
.sb-status-badge--completed {
    background: var(--app-color-success-muted) !important;
    color: var(--app-color-success-dark) !important;
    border: 1px solid var(--app-color-success-border) !important;
}

.sb-status-badge--pending,
.sb-status-badge--in-progress {
    background: var(--app-color-amber-muted) !important;
    color: var(--app-color-amber-dark) !important;
    border: 1px solid rgba(var(--app-color-amber-rgb), 0.3) !important;
}

.sb-status-badge--rejected,
.sb-status-badge--failed {
    background: var(--app-color-error-muted) !important;
    color: var(--app-color-danger) !important;
    border: 1px solid rgba(var(--app-color-danger-rgb), 0.2) !important;
}

.sb-status-badge--draft {
    background: rgba(107, 114, 128, 0.08) !important;
    color: var(--app-color-text-muted) !important;
    border: 1px solid var(--app-color-border) !important;
}

/* ==========================================================================
   SCROLLBAR — Refined, minimal
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.20);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  VIEW TRANSITIONS (Layer 3)                                   ║
   ║  Customizes the ViewTransitionRouter cross-fade between routes║
   ╚════════════════════════════════════════════════════════════════╝ */

/* ╔════════════════════════════════════════════════════════════════╗
   ║  VIEW TRANSITIONS (Layer 3)                                   ║
   ║  Customizes the ViewTransitionRouter cross-fade between routes║
   ╚════════════════════════════════════════════════════════════════╝ */

/* ── Directional keyframes ── */
@keyframes vt-slide-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-24px); }
}
@keyframes vt-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes vt-slide-out-right {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}
@keyframes vt-slide-in-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Default: simple fade */
::view-transition-old(root) {
    animation: sb-fade-only-out var(--sb-duration-fast, 150ms) var(--sb-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
::view-transition-new(root) {
    animation: sb-fade-only-in var(--sb-duration-base, 250ms) var(--sb-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

/* Forward (list → detail): old slides out left, new slides in from right */
[data-nav-direction="forward"]::view-transition-old(root) {
    animation: vt-slide-out-left var(--sb-duration-fast, 150ms) var(--sb-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
[data-nav-direction="forward"]::view-transition-new(root) {
    animation: vt-slide-in-right var(--sb-duration-base, 250ms) var(--sb-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

/* Back (detail → list): old slides out right, new slides in from left */
[data-nav-direction="back"]::view-transition-old(root) {
    animation: vt-slide-out-right var(--sb-duration-fast, 150ms) var(--sb-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
[data-nav-direction="back"]::view-transition-new(root) {
    animation: vt-slide-in-left var(--sb-duration-base, 250ms) var(--sb-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — ROUND 2: World-Class Visual Polish
   ──────────────────────────────────────────────────────────────────────────
   Targeted improvements across every visual dimension:
   Typography · Icons · Cards · Grid · Navigation · Mobile
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. DASHBOARD ACTION CARDS — Enhanced left accent + refined cards ── */

/* Enhance the __accent bar: wider, gradient, crisp */
.dashboard-action-strip__accent {
    width: 4px !important;
    border-radius: 0 2px 2px 0 !important;
}

.dashboard-action-strip__card--urgent .dashboard-action-strip__accent {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
}

.dashboard-action-strip__card--progress .dashboard-action-strip__accent {
    background: linear-gradient(180deg, #34d399 0%, #00a551 100%) !important;
}

.dashboard-action-strip__card--info .dashboard-action-strip__accent {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
}

/* Action card: generous padding */
.dashboard-action-strip__card {
    padding: 20px 20px 20px 24px !important;
}

/* Card icon: 52px with colored rounded-square container */
.dashboard-action-strip__icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: 1.5rem !important;
    flex-shrink: 0 !important;
}

/* Count numbers: massive, tabular figures, Poppins */
.dashboard-action-strip__count {
    font-size: clamp(2rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
}

/* Card labels: refined typography */
.dashboard-action-strip__label {
    font-family: var(--app-font-family-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--app-color-text) !important;
    margin-bottom: 2px !important;
}

.dashboard-action-strip__desc {
    font-size: 0.8125rem !important;
    color: var(--app-color-text-muted) !important;
    line-height: 1.4 !important;
}


/* ── 2. KPI STAT CARDS — Colored icon containers for premium feel ── */

/* Give the progress-summary icon container brand-color background */
.progress-summary .progress-summary__image {
    width: 48px !important;
    height: 48px !important;
    background: rgba(var(--app-primary-rgb), 0.10) !important;
    border: none !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
}

/* Icon inside: brand green, no stray background from other rules */
.progress-summary .progress-summary__image .image-fallback__icon {
    font-size: 1.4rem !important;
    color: var(--app-color-primary) !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* KPI card: generous padding */
.progress-summary.app-card {
    padding: 20px !important;
}

/* Card heading (stat title): small label — sentence case */
.progress-summary .progress-summary__heading h3 {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--app-color-text-muted) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* Count value: massive, bold, dark ink */
.progress-summary .progress-summary__value--count {
    font-family: var(--app-font-family-heading) !important;
    font-size: clamp(2rem, 2.8vw, 2.625rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: var(--app-color-text) !important;
    line-height: 1 !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Heading layout: icon + title aligned */
.progress-summary .progress-summary__heading {
    align-items: center !important;
    gap: 12px !important;
}

.progress-summary .progress-summary__heading-content {
    min-width: 0 !important;
}

/* KPI grid: consistent gap */
.dashboard__kpi-grid {
    gap: 16px !important;
}


/* ── 3. SECTION HEADINGS — Strong Poppins hierarchy ── */

/* "Beoordelen" and "Recente activiteit" panel headings */
.dashboard__section-header h3,
.dashboard__sidebar-panel > h3,
.dashboard__sidebar-panel > div > h3 {
    font-family: var(--app-font-family-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--app-color-text) !important;
    margin: 0 !important;
}

/* Section header row: clear visual bottom rule */
.dashboard__section-header {
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
    margin-bottom: 16px !important;
}

/* "Recente activiteit" standalone h3 */
section.dashboard__sidebar-panel > h3 {
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
    margin-bottom: 14px !important;
}

/* "Alles bekijken" link — brand green with chevron */
.dashboard__section-link {
    color: var(--app-color-primary) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
    transition: color var(--sb-transition-fast), gap var(--sb-transition-fast) !important;
}

.dashboard__section-link:hover {
    color: var(--app-color-primary-dark) !important;
    gap: 5px !important;
    text-decoration: none !important;
}

/* Sidebar panel: consistent spacing + visual separation */
.dashboard__sidebar-panel {
    background: var(--app-color-surface) !important;
    border: 1px solid var(--app-color-border-subtle) !important;
    border-radius: var(--sb-radius-card) !important;
    box-shadow: var(--sb-elevation-2) !important;
    padding: 20px !important;
    margin-bottom: 14px !important;
}


/* ── 4. TOP BAR — Crisper, more refined ── */

/* Topbar: consistent border-radius with shell */
.manager-topbar {
    border-radius: 0 !important;
}

/* Page title: refined size */
.manager-topbar__title-group h3,
.topbar-context-header__title {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}


/* ── 5. DATA GRID — Premium table headers ── */

/* Sentence case headers: modern Linear-style look */
.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid .rz-datatable-thead th {
    text-transform: none !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
    color: var(--app-color-text-muted) !important;
    background: var(--app-color-surface-alt) !important;
    border-bottom: 1px solid var(--app-color-border) !important;
    padding: 12px 16px !important;
}

/* Slightly taller rows for breathing room */
.rz-grid .rz-datatable-tbody td {
    padding: 13px 16px !important;
    font-size: var(--app-font-size-meta) !important;
    vertical-align: middle !important;
}

/* Cleaner hover: very subtle alt bg */
.rz-grid .rz-datatable-tbody tr:hover td {
    background: var(--app-color-surface-alt) !important;
}


/* ── 6. NAVIGATION — Refined section headers ── */

/* Nav group section labels: crisper micro-caps */
.manager-nav__menu .rz-panel-menu-item-text {
    font-size: 0.625rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    color: var(--app-color-text-secondary) !important;
    padding: 12px 10px 5px !important;
}

/* Active item: slightly more prominent shadow */
.manager-nav__menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
.manager-nav__menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.manager-nav__menu .rz-navigation-item-link-active,
.manager-nav__menu .rz-navigation-item-link.active,
.manager-nav__menu .rz-panel-menu-item.is-active > .rz-navigation-item-link {
    box-shadow: 0 2px 10px rgba(var(--app-primary-rgb), 0.32) !important;
}


/* ── 7. SHELL — Professional, data-dense feel ── */

/* Reduce extreme roundness for professional admin tool */
.manager-shell {
    border-radius: 16px !important;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 4px 24px rgba(15, 23, 42, 0.06) !important;
}

/* Frame clips all inner corners (shell outer 16px - 8px padding = 8px) */
.manager-shell__frame {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Content area background */
.manager-shell__content-region,
.shell-page-content {
    background: var(--sb-manager-bg) !important;
}

/* Nav sidebar: no top/left border — true sidebar feel */
.manager-nav {
    border-top: none !important;
    border-left: none !important;
    border-radius: 0 !important;
}


/* ── 8. MOBILE: Fix stat card text wrapping ── */

@media (max-width: 600px) {
    /* Stat card icon: scaled for 2-col layout */
    .progress-summary .progress-summary__image {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    /* Stat card label: 2-line clamp instead of single-line truncation */
    .progress-summary .progress-summary__heading h3 {
        font-size: 0.625rem !important;
        letter-spacing: 0 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
    }

    /* Stat count: proportional */
    .progress-summary .progress-summary__value--count {
        font-size: clamp(1.5rem, 6.5vw, 1.875rem) !important;
    }

    /* Heading: row layout for compact 2-col */
    .progress-summary .progress-summary__heading {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    /* KPI grid: tighter gap on mobile */
    .dashboard__kpi-grid {
        gap: 10px !important;
    }

    /* Action card: compact on mobile */
    .dashboard-action-strip__card {
        padding: 14px 14px 14px 18px !important;
    }

    .dashboard-action-strip__icon {
        width: 44px !important;
        height: 44px !important;
    }

    .dashboard-action-strip__count {
        font-size: clamp(1.75rem, 7vw, 2rem) !important;
    }
}

@media (max-width: 400px) {
    /* Very small screens: hide description text */
    .dashboard-action-strip__desc {
        display: none !important;
    }
}


/* ── 9. SEARCH BAR — Refined input ── */

.search-bar__input {
    border-radius: 10px !important;
    border: 1px solid var(--app-color-border) !important;
    background: var(--app-color-surface) !important;
    font-size: var(--app-font-size-meta) !important;
    transition: border-color var(--sb-transition-fast), box-shadow var(--sb-transition-fast) !important;
}

.search-bar__input:focus {
    border-color: var(--app-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.12) !important;
    outline: none !important;
}


/* ── 10. PRIMARY BUTTON — Polished green CTA ── */

.app-btn.app-btn--primary,
.app-btn--primary {
    background: var(--app-color-primary) !important;
    color: var(--app-color-primary-text) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-family: var(--app-font-family-heading) !important;
    letter-spacing: 0.005em !important;
    box-shadow: 0 1px 3px rgba(var(--app-primary-rgb), 0.35), 0 4px 12px rgba(var(--app-primary-rgb), 0.20) !important;
    transition: all var(--sb-transition-fast) !important;
}

.app-btn.app-btn--primary:hover,
.app-btn--primary:hover {
    background: var(--app-color-primary-dark) !important;
    box-shadow: 0 2px 6px rgba(var(--app-primary-rgb), 0.45), 0 6px 16px rgba(var(--app-primary-rgb), 0.25) !important;
    transform: translateY(-1px) !important;
}

.app-btn.app-btn--primary:active,
.app-btn--primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(var(--app-primary-rgb), 0.3) !important;
}


/* ── 11. STATUS CHIPS — Refined, consistent ── */

.status-chip {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
}


/* ── 12. FORM POLISH — Input field refinements ── */

.rz-textbox, .rz-dropdown, .rz-textarea, .rz-numeric {
    border-radius: 10px !important;
}


/* ── 13. GLOBAL HEADING REFINEMENTS ── */

.shell-page-content h2,
.content-page h2 {
    font-family: var(--app-font-family-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--app-color-text) !important;
}

.topbar-context-header__subtitle,
.manager-topbar__subtitle {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--app-color-text-secondary) !important;
    letter-spacing: 0.005em !important;
}


/* ── END ROUND 2 ── */


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — ROUND 3: Fine-Tuning for World-Class Quality
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. KPI CARDS — Distinct icon colors per card position ── */

/* 1st card (Actieve scouts): primary green */
.dashboard__kpi-grid .progress-summary:nth-child(1) .progress-summary__image {
    background: rgba(var(--app-primary-rgb), 0.10) !important;
}
.dashboard__kpi-grid .progress-summary:nth-child(1) .image-fallback__icon {
    color: var(--app-color-primary) !important;
}

/* 2nd card (Behaalde insignes): sky blue / info */
.dashboard__kpi-grid .progress-summary:nth-child(2) .progress-summary__image {
    background: rgba(var(--app-color-info-rgb), 0.10) !important;
}
.dashboard__kpi-grid .progress-summary:nth-child(2) .image-fallback__icon {
    color: var(--app-color-info) !important;
}

/* 3rd card (Lopende insignes): amber / in-progress */
.dashboard__kpi-grid .progress-summary:nth-child(3) .progress-summary__image {
    background: rgba(var(--app-color-amber-rgb), 0.10) !important;
}
.dashboard__kpi-grid .progress-summary:nth-child(3) .image-fallback__icon {
    color: var(--app-color-amber) !important;
}

/* 4th card (Gem. voortgang): teal / progress */
.dashboard__kpi-grid .progress-summary:nth-child(4) .progress-summary__image {
    background: rgba(13, 148, 136, 0.10) !important;
}
.dashboard__kpi-grid .progress-summary:nth-child(4) .image-fallback__icon {
    color: var(--app-color-teal) !important;
}

/* Desktop KPI label: prevent wrapping on single-line label — only on large screens */
@media (min-width: 640px) {
    .progress-summary .progress-summary__heading h3 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Mobile: explicitly allow 2-line wrap — uses higher specificity to be certain */
@media (max-width: 639.98px) {
    .dashboard__kpi-grid .progress-summary .progress-summary__heading h3,
    .progress-summary .progress-summary__heading h3 {
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        font-size: 0.625rem !important;
        letter-spacing: 0 !important;
        line-height: 1.3 !important;
    }
}


/* ── 2. ACTION CARDS — Wider accent bar (6px) for clear visual presence ── */

/* Replace __accent span approach with reliable border-left on the card */
/* This ensures a crisp 6px left border that isn't affected by overflow:hidden clipping */
.dashboard-action-strip__card--urgent {
    border-left: 6px solid #d97706 !important;
}
.dashboard-action-strip__card--progress {
    border-left: 6px solid var(--app-color-primary) !important;
}
.dashboard-action-strip__card--info {
    border-left: 6px solid var(--app-color-info) !important;
}

/* Hide the __accent span since we're using border-left now */
.dashboard-action-strip__accent {
    display: none !important;
}

/* Tighten icon + text gap on action cards */
.dashboard-action-strip__card {
    gap: 14px !important;
    padding-left: 18px !important;
}


/* ── 3. CARD SHADOWS — Visible depth that makes cards float ── */

/* Primary cards: clear elevation above the #F1F5F9 background */
.dashboard-action-strip__card,
.progress-summary,
.dashboard__sidebar-panel {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.dashboard-action-strip__card:hover,
.progress-summary:hover {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.05),
        0 4px 8px rgba(15, 23, 42, 0.08),
        0 12px 28px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* All app-cards: base shadow */
.app-card {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.03),
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 4px 12px rgba(15, 23, 42, 0.06) !important;
}


/* ── 4. DATA GRID — Sentence-case headers (final override) ── */

/* Ensure the Radzen column title text-transform is none */
:root {
    --rz-grid-header-text-transform: none;
}

/* Belt-and-suspenders: override any residual uppercase on Radzen column titles */
.rz-column-title,
.rz-grid-table thead th .rz-column-title-content,
.rz-data-grid-column-title {
    text-transform: none !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: var(--app-color-text-muted) !important;
}

/* "Ja" / "Nee" published indicator: minimal status styling via CSS */
.rz-data-grid td .rz-cell-data:has-text("Ja") {
    /* CSS :has-text is not standard; use a different approach */
}

/* Row hover: more distinct for obvious clickability */
.rz-grid .rz-datatable-tbody tr:hover td,
.rz-data-grid .rz-datatable-tbody tr:hover td {
    background: rgba(var(--app-primary-rgb), 0.025) !important;
    cursor: pointer;
}


/* ── 5. TOPBAR — Visual anchor line ── */

/* Add a subtle bottom border to anchor the topbar */
.manager-topbar {
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
}

/* Topbar icon button hover states (web-visible hover feedback) */
.manager-topbar .active-context-popup__trigger:hover,
.manager-topbar .notification-menu-popup__trigger:hover,
.manager-topbar .profile-menu-popup__trigger:hover {
    background: var(--app-color-surface-muted) !important;
}


/* ── 6. DASHBOARD SIDEBAR PANELS — Better section separation ── */

/* Section header inside the panel: crisp visual separator */
.dashboard__sidebar-panel .dashboard__section-header {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
}

/* Activity feed: tighten the gap between header and first item */
section.dashboard__sidebar-panel > h3 {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
}


/* ── 7. SEARCH & FILTER TOOLBAR — Consistent visual treatment ── */

/* Search + filter row in admin pages */
.shell-page-toolbar {
    gap: 0 !important;
    align-items: stretch !important;
}

/* Category dropdown filter: consistent with search bar */
.rz-dropdown {
    border: 1px solid var(--app-color-border) !important;
    border-radius: 10px !important;
    background: var(--app-color-surface) !important;
}


/* ── 8. MOBILE — Bottom nav active state improvement ── */

/* Bottom nav active item: pill background via pseudo-element (more reliable) */
.manager-bottom-nav .shell-bottom-nav__item.is-active {
    position: relative;
}

/* Active pill background */
.manager-bottom-nav .shell-bottom-nav__item.is-active .shell-bottom-nav__icon-wrapper {
    background-color: rgba(var(--app-primary-rgb), 0.12) !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Bottom nav tab label: active color + weight */
.manager-bottom-nav .shell-bottom-nav__item.is-active .shell-bottom-nav__label {
    font-weight: 600 !important;
    color: var(--app-color-primary) !important;
}


/* ── 9. TYPOGRAPHY — Global refinements ── */

/* Body text weight: slightly heavier base for better legibility */
body {
    font-size: 15px;
    line-height: 1.55;
}

/* Sidebar nav item text: medium weight */
.manager-nav__menu .rz-navigation-item-link {
    font-weight: 500 !important;
}

/* Form labels: clear hierarchy */
label, .rz-form-field > label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--app-color-text-strong) !important;
    letter-spacing: 0.01em !important;
}


/* ── 10. SHELL BACKGROUND — Subtle texture for depth ── */

/* The main content area gets a slight grid/grain feel */
body {
    background-image: none !important;
}

/* Content background stays neutral */
.manager-shell__content-region {
    background: var(--sb-manager-bg) !important;
}


/* ── END ROUND 3 ── */


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — ROUND 4: Final Polish Pass
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. DATA GRID — Stronger header contrast ── */

/* Header background: clearly distinct from white rows */
.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid .rz-datatable-thead th,
.rz-data-grid .rz-datatable-thead th {
    background: #EEF2F8 !important;
    color: var(--app-color-text) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    border-bottom: 2px solid var(--app-color-border) !important;
    padding: 11px 16px !important;
}

/* Sticky column header border */
.rz-data-grid .rz-grid-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}


/* ── 2. BEOORDELEN PIPELINE — More visible progress bars ── */

/* Track: visible even at low values */
.dashboard-pipeline__bar-wrap {
    height: 8px !important;
    background: var(--app-color-border) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

/* Count numbers: bolder */
.dashboard-pipeline__count {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Label: cleaner */
.dashboard-pipeline__label {
    font-size: 0.8125rem !important;
    color: var(--app-color-text-muted) !important;
    min-width: 90px !important;
}

/* Row: better spacing */
.dashboard-pipeline__row {
    gap: 10px !important;
}


/* ── 3. BACKGROUND — Slightly stronger contrast with cards ── */

/* Make the page background slightly darker so white cards pop */
:root {
    --sb-manager-bg: #E9EEF4;
}

body, .rz-layout, .sb-page-content, .content-page__body,
.user-catalog-page, .dashboard-page {
    background-color: #E9EEF4 !important;
}

body {
    background-color: #E9EEF4 !important;
}


/* ── 4. GRID — Alternating row background for visual scanning ── */

/* Subtle zebra striping for dense data grids */
.rz-grid .rz-datatable-tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.013) !important;
}

.rz-grid .rz-datatable-tbody tr:hover td {
    background: rgba(var(--app-primary-rgb), 0.04) !important;
    cursor: pointer !important;
}


/* ── 5. SHELL — Slightly stronger border for premium frame effect ── */

.manager-shell {
    border: 1px solid var(--app-color-border) !important;
}


/* ── 6. TOPBAR — Cleaner inner padding ── */

/* Reduce topbar padding for tighter, crisper look */
.manager-topbar__title-group {
    gap: 8px !important;
}


/* ── 7. APP BADGE STATUS INDICATORS ── */

/* "Ja" in grid = green, "Nee" = muted gray (color via scoping) */
/* Can't use :contains in pure CSS, but we can style the column generically */


/* ── 8. NAV SECTION HEADERS — Better spacing ── */

/* More breathing room before section headers */
.manager-nav__menu .rz-panel-menu-item-wrapper:not(:first-child) .rz-panel-menu-item-text {
    padding-top: 16px !important;
}


/* ── 9. STAT CARD LABEL — Font weight 500 for readability ── */

/* Labels slightly more readable */
.progress-summary .progress-summary__heading h3 {
    font-weight: 500 !important;
}


/* ── 10. SIDEBAR PANEL — Better base styling ── */

/* Ensure sidebar panels have consistent look */
.dashboard__sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}


/* ── END ROUND 4 ── */


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — ROUND 5: Breakpoints + Final Micro-Refinements
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. TABLET LAYOUT — Action strip stays 3-column at 768px ── */

/* Override the base CSS that stacks action cards at 768px.
   Keep 3 columns until 640px (real mobile breakpoint) */
@media (min-width: 640px) {
    .dashboard-action-strip {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet-specific: 2-column KPI grid for breathing room */
@media (min-width: 640px) and (max-width: 900px) {
    .dashboard__kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ── 2. BADGES TOOLBAR — Premium compact action bar ── */

/* The shell-page-toolbar is already a white card via base CSS.
   Just make the action-bar inside it more spacious and refined */
.shell-page-toolbar.has-actions .action-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    width: 100% !important;
    align-self: stretch !important;
}

/* The action-bar is injected inside .shell-page-toolbar__actions which is the
   direct flex child — force it to stretch full width */
.shell-page-toolbar__actions {
    align-self: stretch !important;
    width: 100% !important;
}

/* Ensure search bar takes full available width */
.shell-page-toolbar.has-actions .action-bar__left {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Toolbar: flat chrome bar, flush with topbar */
.shell-page-toolbar {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--app-color-border-subtle) !important;
    box-shadow: none !important;
    background: var(--app-color-surface) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}


/* ── 3. SHELL CONTENT — Better visual hierarchy for dashboard panels ── */

/* The sidebar panels: ensure they're visually prominent */
.dashboard__sidebar-panel {
    transition: box-shadow var(--sb-transition-base) !important;
}

.dashboard__sidebar-panel:hover {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.05),
        0 4px 12px rgba(15, 23, 42, 0.10) !important;
}


/* ── 4. TOPBAR — More distinct visual treatment ── */

/* Stronger page title contrast */
.manager-topbar__title-group h3,
.topbar-context-header__title {
    font-family: var(--app-font-family-heading) !important;
    color: var(--app-color-text-deep) !important;
}

/* Context subtitle: clearly secondary */
.topbar-context-header__subtitle {
    color: var(--app-color-text-secondary) !important;
    font-size: 0.8125rem !important;
}


/* ── 5. NAV LOGO AREA — Better spacing if available ── */

/* Ensure nav header/logo area has proper padding */
.manager-nav__header,
.manager-nav > .manager-nav__brand {
    padding: 8px 10px 16px !important;
}


/* ── 6. BADGE IMAGE IN GRID — Better sizing ── */

/* Badge thumbnails in the data grid: consistent sizing */
.rz-data-grid td .image-fallback,
.admin-data-grid td .image-fallback {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}


/* ── 7. MOBILE REFINEMENTS — Tighter and more premium ── */

@media (max-width: 639.98px) {
    /* Action strip: stack on small screens */
    .dashboard-action-strip {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Dashboard sidebar panels: full width on mobile */
    .dashboard__sidebar-panel {
        padding: 16px !important;
    }

    /* KPI grid: tight gap */
    .dashboard__kpi-grid {
        gap: 10px !important;
    }

    /* Content padding: desktop only — mobile overrides this to 0 below */
    /* .shell-page-content { padding: 14px !important; } */
}


/* ── 8. DATA GRID PAGER — Premium styling ── */

/* Pagination bar: cleaner */
.rz-pager .rz-pager-links {
    gap: 4px !important;
}

.rz-pager .rz-paginator-page,
.rz-pager .rz-pager-page {
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-width: 32px !important;
    height: 32px !important;
}

.rz-pager .rz-paginator-page.rz-state-active,
.rz-pager .rz-pager-page.rz-state-active {
    background: var(--app-color-primary) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}


/* ── 9. FOCUS RING — Accessible, brand-colored ── */

/* Consistent focus ring using brand color */
:focus-visible {
    outline: 2px solid var(--app-color-primary) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}


/* ── 10. PREMIUM ACTION CARD HOVER — Subtle color wash ── */

/* On hover, the card gets a very faint tinted background for each variant */
.dashboard-action-strip__card--urgent:hover {
    background: rgba(217, 119, 6, 0.02) !important;
}
.dashboard-action-strip__card--progress:hover {
    background: rgba(var(--app-primary-rgb), 0.02) !important;
}
.dashboard-action-strip__card--info:hover {
    background: rgba(var(--app-color-info-rgb), 0.02) !important;
}


/* ── END ROUND 5 ── */


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — ROUND 6: Final Details
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. BEOORDELEN PIPELINE BARS — Colorful gradient bars ── */

/* Track: clearly visible and correct height */
.dashboard-pipeline__bar-wrap {
    height: 8px !important;
    background: rgba(100, 116, 139, 0.15) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    display: block !important;  /* Ensure block context for child heights */
    position: relative !important;
}

/* Fill bars: block-level with explicit height for correct rendering */
.dashboard-pipeline__bar {
    display: block !important;
    height: 8px !important;
    min-width: 4px !important;
    border-radius: 999px !important;
}

/* Bar fills: strong gradient colors matching the dots */
.dashboard-pipeline__bar--waiting {
    background: linear-gradient(90deg, #fbbf24, #f59e0b) !important;
}

.dashboard-pipeline__bar--done {
    background: linear-gradient(90deg, #34d399, #00a551) !important;
}

.dashboard-pipeline__bar--rejected {
    background: linear-gradient(90deg, #f87171, #ef4444) !important;
}

/* Row layout: better vertical rhythm */
.dashboard-pipeline__row {
    gap: 12px !important;
    padding: 2px 0 !important;
}

/* Count numbers: colored to match dot */
.dashboard-pipeline__count--waiting {
    color: #d97706 !important;
}

.dashboard-pipeline__count--done {
    color: var(--app-color-primary) !important;
}

.dashboard-pipeline__count--rejected {
    color: var(--app-color-danger) !important;
}


/* ── 2. MOBILE STAT LABELS — Ensure proper wrapping, no truncation ── */

/* At mobile widths: allow 2-line display with no hard truncation */
@media (max-width: 639.98px) {
    .progress-summary .progress-summary__heading h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 0.6875rem !important;
        letter-spacing: 0.04em !important;
        line-height: 1.3 !important;
    }
}


/* ── 3. SHELL CONTENT PADDING — Consistent breathing room ── */

/* Content area: let page components define their own top spacing */
.shell-page-content {
    padding-top: 0 !important;
}


/* ── 4. ACTIVITY FEED — Better list item styling ── */

/* Activity feed items: subtle hover state */
.dashboard-activity-feed__item:hover,
.activity-feed__item:hover {
    background: var(--app-color-surface-muted) !important;
    border-radius: 8px !important;
}


/* ── 5. BADGE GRID ROWS — Slight refinement ── */

/* Make clickable rows more obviously interactive */
.rz-data-grid .rz-data-row:hover {
    cursor: pointer !important;
    background: rgba(var(--app-primary-rgb), 0.02) !important;
}


/* ── END ROUND 6 ── */


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE EDGE-TO-EDGE — Full width layout, no floating cards on small screens
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* ── GUARD: AppCard always keeps its radius on mobile — only shell elements go edge-to-edge ── */
    .app-card,
    .rz-card,
    .sb-card {
        border-radius: var(--sb-radius-card) !important;
        border: 1px solid var(--app-color-border-subtle) !important;
    }

    /* ── 1. TOPBAR — Remove bottom rounding so toolbar sits flush beneath ── */
    .manager-topbar {
        border-radius: 0 !important;
        border-bottom: 1px solid var(--app-color-border-subtle) !important;
        box-shadow: none !important;
    }

    /* ── 2. TAB BAR / ACTION BAR TOOLBAR — Edge-to-edge, no floating card ── */
    .shell-page-toolbar {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--app-color-border-subtle) !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Remove the border-top divider between tabs and actions (already separated by tabs) */
    .shell-page-toolbar.has-tabs.has-actions .shell-page-toolbar__actions {
        border-top: 1px solid var(--app-color-border-subtle) !important;
    }

    /* Action bar inside toolbar: tight horizontal padding on mobile */
    .shell-page-toolbar.has-actions .action-bar {
        padding: 8px 12px !important;
    }

    /* ── 3. SHELL CONTENT — Zero all padding on mobile, each page handles its own ── */
    .shell-page-content {
        padding: 0 !important;
    }

    /* ── 4. CONTENT PAGE — Zero side padding; keep bottom clearance for floating nav ── */
    :root {
        --sb-page-inline-padding: 0px;
    }

    .content-page__header {
        padding-left: var(--sb-space-3) !important;
        padding-right: var(--sb-space-3) !important;
    }

    .content-page__body,
    .user-catalog-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── 5. CATALOG / SECTION CONTAINERS — Remove 8px side gutters on mobile ── */
    .badge-catalog-sections,
    .badge-list-sections,
    .catalog-sections {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ── 6. FILTER CHIPS + SEARCH BARS — Full width, no side gap ── */
    .scouts-mobile-bar {
        padding-left: var(--sb-space-3) !important;
        padding-right: var(--sb-space-3) !important;
    }

    /* ── 6. PREVENT HORIZONTAL SCROLL — Content must not exceed viewport width ── */
    .shell-scroll-content,
    .manager-shell__content-region,
    .shell-page-content {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* ── 7. SHELL SCROLL CONTENT — Remove any top margin ── */
    .shell-scroll-content {
        margin-top: 0 !important;
    }

    /* ── 8. SHELL PAGE TOOLBAR (no-tabs variant): still edge-to-edge ── */
    .shell-page-toolbar:not(.has-tabs) {
        border-bottom: 1px solid var(--app-color-border-subtle) !important;
    }
}

/* ── END MOBILE EDGE-TO-EDGE ── */