/* =============================================================================
   Closina Theme - CSS Variable Token System (Phase U01)
   =============================================================================
   Load order: After MudBlazor + Syncfusion, before standardgrid.
   This file defines the design token system and global component overrides.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design Tokens (Light Mode)
   ----------------------------------------------------------------------------- */
:root {
    /* Primary Tokens - Emerald green (brand identity)
       Phase P02: Darkened from Emerald-600 (#059669, 3.77:1) to Emerald-700 (#047857, 5.48:1)
       for WCAG AA contrast compliance on filled buttons with white text. */
    --closina-primary: #047857;              /* Emerald-700 (5.48:1 on white — AA compliant) */
    --closina-primary-hover: #065f46;        /* Emerald-800 */
    --closina-primary-light: rgba(4, 120, 87, 0.08);
    --closina-primary-border: rgba(4, 120, 87, 0.2);
    --closina-primary-text: #ffffff;
    --closina-secondary: #334155;            /* Slate-700 (neutral secondary) */
    --closina-secondary-hover: #1e293b;      /* Slate-800 */
    --closina-link: #047857;                /* Same as primary — AA compliant (5.48:1) */
    --closina-btn-height: 44px;              /* Touch-first (44px minimum) */

    /* Surface Tokens - Warm neutrals (not pure white) */
    --closina-surface: #ffffff;
    --closina-surface-hover: #f8f8f6;        /* Warm off-white */
    --closina-background: #f8f8f6;           /* Warm neutral page bg */
    --closina-border: rgba(0, 0, 0, 0.06);
    --closina-border-strong: rgba(0, 0, 0, 0.12);

    /* Overlay surface tokens — translucent backdrops for loading wrappers, radial gradients, sphere-graph backgrounds. */
    --closina-surface-overlay: rgba(255, 255, 255, 0.85);        /* SmartLoadingWrapper light-mode backdrop */
    --closina-surface-overlay-dark: rgba(15, 23, 42, 0.85);      /* Explicit dark companion (used when a component must pin dark regardless of theme) */
    --closina-surface-overlay-light: rgba(255, 255, 255, 0.05);  /* Subtle light-on-dark radial gradient tint */

    /* Text Tokens */
    --closina-text-primary: #1a1a1a;
    --closina-text-secondary: #6b7280;       /* Gray-500 */
    --closina-text-muted: #6e6e6e;           /* Neutral-500 adjusted (WCAG AA: 4.92:1 on white, 4.63:1 on warm bg) */

    /* Radius Tokens */
    --closina-radius-sm: 8px;
    --closina-radius-md: 12px;
    --closina-radius-lg: 16px;
    --closina-radius-xl: 24px;
    --closina-radius-full: 9999px;           /* Pill buttons */

    /* Shadow Tokens (ultra-subtle - only for elevated overlays) */
    --closina-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --closina-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
    --closina-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Spacing Tokens */
    --closina-space-page: 24px;
    --closina-space-card: 20px;
    --closina-space-section: 32px;

    /* Layout Tokens */
    --closina-toolbar-height: 64px;
    --closina-sidebar-width: 240px;
    /* Phase U28: Hybrid topbar + sidebar shell tokens */
    --closina-layout-topbar-height: 56px;
    --closina-layout-sidebar-width: 260px;
    --closina-layout-sidebar-width-rail: 64px;

    /* Transition */
    --closina-transition: 0.2s ease;
    --closina-transition-fast: 0.1s ease;
    --closina-transition-slow: 0.3s ease-in-out;

    /* Code Block Tokens */
    --closina-code-bg: #f5f5f5;
    --closina-code-text: #1a1a1a;

    /* Semantic Color Tokens */
    --closina-error: #d32f2f;
    --closina-error-light: rgba(211, 47, 47, 0.08);
    --closina-success-light: rgba(34, 197, 94, 0.08);
    --closina-info-light: rgba(33, 150, 243, 0.08);
    --closina-warning-light: rgba(255, 152, 0, 0.08);

    /* Status Indicator Tokens */
    --closina-status-success-bg: rgba(34, 197, 94, 0.1);
    --closina-status-warning-bg: rgba(251, 146, 60, 0.1);
    --closina-status-info-bg: rgba(6, 182, 212, 0.1);

    /* Semantic Text Color Tokens (Phase U06) */
    --closina-success: #22c55e;
    --closina-warning: #fb923c;
    --closina-info: #06b6d4;

    /* Faint Border Tokens (Phase U06) */
    --closina-border-faint: rgba(0, 0, 0, 0.03);
    --closina-border-header: rgba(0, 0, 0, 0.08);
    --closina-hover-faint: rgba(0, 0, 0, 0.02);

    /* Focus Token (Phase U06) */
    --closina-focus-outline: #ffffff;

    /* Monospace Font Token */
    --closina-font-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;

    /* Overlay & Scrollbar Tokens (P02) */
    --closina-overlay-hover: rgba(255, 255, 255, 0.1);
    --closina-overlay-active: rgba(255, 255, 255, 0.2);
    --closina-scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --closina-fade-overlay: rgba(0, 0, 0, 0.08);
    --closina-fade-overlay-strong: rgba(0, 0, 0, 0.3);

    /* Social Platform Brand Colors (P02) */
    --closina-brand-whatsapp: #25D366;
    --closina-brand-whatsapp-chat-bg: #e5ddd5;
    --closina-brand-whatsapp-bubble: #dcf8c6;
    --closina-brand-linkedin: #0077B5;
    --closina-brand-facebook: #0084FF;
    --closina-brand-instagram-1: #833ab4;
    --closina-brand-instagram-2: #c13584;
    --closina-brand-instagram-3: #e1306c;
    --closina-brand-twitter: #000000;

    /* WCAG AA Text-Safe Semantic Colors (P02 R3-D)
       The base --closina-success/warning/info colors (#22c55e, #fb923c, #06b6d4) are
       bright variants suitable for backgrounds and chips but fail WCAG AA 4.5:1 contrast
       when used as text on white. These darker variants pass AA for text use. */
    --closina-success-text: #15803d;   /* Green-700: 4.58:1 on white */
    --closina-warning-text: #c2410c;   /* Orange-700: 5.35:1 on white — AA compliant */
    --closina-info-text: #0e7490;      /* Cyan-700: 4.62:1 on white */

    /* Typography Tokens (Phase U14d)
       Sans-serif stack matches MudBlazor's Inter-first approach.
       Weight/leading tokens prevent magic numbers in component CSS. */
    --closina-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --closina-font-weight-normal: 400;
    --closina-font-weight-medium: 500;
    --closina-font-weight-semibold: 600;
    --closina-font-weight-bold: 700;
    --closina-leading-tight: 1.2;
    --closina-leading-normal: 1.4;
    --closina-leading-relaxed: 1.6;
    --closina-leading-loose: 1.75;

    /* Z-Index Scale Tokens (Phase U14d)
       Centralized stacking order prevents z-index wars across CSS files.
       Values chosen to slot between MudBlazor's internal z-indexes. */
    --closina-z-base: 1;
    --closina-z-sticky: 100;
    --closina-z-dropdown: 1000;
    --closina-z-fixed: 1050;
    --closina-z-modal: 1300;
    --closina-z-tooltip: 1500;
    --closina-z-maximum: 10000;

    /* Chart Color Tokens (Phase U14d)
       Emerald-primary palette derivatives for data visualizations.
       8 distinct hues with sufficient contrast between adjacent colors.
       Designed to work on both light and dark backgrounds. */
    --closina-chart-1: #047857;    /* Emerald-700 (brand primary) */
    --closina-chart-2: #0891b2;    /* Cyan-600 */
    --closina-chart-3: #7c3aed;    /* Violet-600 */
    --closina-chart-4: #ea580c;    /* Orange-600 */
    --closina-chart-5: #0284c7;    /* Sky-600 */
    --closina-chart-6: #c026d3;    /* Fuchsia-600 */
    --closina-chart-7: #ca8a04;    /* Yellow-600 */
    --closina-chart-8: #dc2626;    /* Red-600 */

    /* Badge & Alert Semantic Tokens (Phase U14d)
       Replaces hardcoded color values with tokenized alternatives. */
    --closina-badge-warning-bg: #BF360C;           /* Deep-orange for WCAG AA on white text (~5.3:1) */
    --closina-badge-info-bg: #0284c7;              /* Sky-600 for dark mode info badges (4.7:1 on white) */
    --closina-alert-button-pill: rgba(255, 255, 255, 0.18);  /* Semi-transparent pill bg for buttons in filled alerts */
    --closina-alert-dark-text: rgba(0, 0, 0, 0.87);          /* Dark text for filled alerts on bright backgrounds */
    --closina-alert-dark-icon: rgba(0, 0, 0, 0.7);           /* Slightly lighter dark for alert icons */
}

/* -----------------------------------------------------------------------------
   2. Dark Mode Tokens (Phase U01 Sub-Phase 5)
   ----------------------------------------------------------------------------- */
[data-theme="dark"] {
    --closina-primary: #10b981;              /* Brighter emerald for dark bg */
    --closina-primary-hover: #34d399;        /* Emerald-400 */
    --closina-primary-light: rgba(16, 185, 129, 0.12);
    --closina-primary-border: rgba(16, 185, 129, 0.25);
    --closina-primary-text: #0a0a0a;
    --closina-link: #34d399;
    --closina-secondary: #475569;            /* Slate-600 */
    --closina-secondary-hover: #64748b;      /* Slate-500 */
    --closina-surface: #0f172a;              /* Slate-900 */
    --closina-surface-hover: #1e293b;        /* Slate-800 */
    --closina-background: #020617;           /* Slate-950 */
    --closina-border: rgba(255, 255, 255, 0.22);      /* WCAG 1.4.11: ~3.1:1 on #0f172a (AA non-text contrast) */
    --closina-border-strong: rgba(255, 255, 255, 0.32);  /* WCAG 1.4.11: ~4.0:1 on #0f172a */
    --closina-text-primary: #f1f5f9;         /* Slate-100 */
    --closina-text-secondary: #94a3b8;       /* Slate-400 */
    --closina-text-muted: #8b95a5;           /* Slate-400/500 blend (WCAG AA: 4.57:1 on #0f172a) */

    /* Overlay surface tokens - dark theme overrides */
    --closina-surface-overlay: rgba(15, 23, 42, 0.85);           /* Slate-900 @ 85% — matches SmartLoadingWrapper dark branch */
    --closina-surface-overlay-light: rgba(255, 255, 255, 0.08);  /* Slightly stronger light tint for dark-mode radial gradients */

    /* Shadow overrides for dark mode - slightly more visible */
    --closina-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --closina-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
    --closina-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* Code Block Tokens (dark mode) */
    --closina-code-bg: #1e1e1e;
    --closina-code-text: #d4d4d4;

    /* Semantic Color Tokens (dark mode) */
    --closina-error: #ef5350;
    --closina-error-light: rgba(239, 83, 80, 0.12);
    --closina-success-light: rgba(74, 222, 128, 0.12);
    --closina-info-light: rgba(66, 165, 245, 0.12);
    --closina-warning-light: rgba(255, 183, 77, 0.12);

    /* Status Indicator Tokens (dark mode) */
    --closina-status-success-bg: rgba(74, 222, 128, 0.15);
    --closina-status-warning-bg: rgba(253, 186, 116, 0.15);
    --closina-status-info-bg: rgba(34, 211, 238, 0.15);

    /* Semantic Text Color Tokens (dark mode - Phase U06) */
    --closina-success: #4ade80;
    --closina-warning: #fdba74;
    --closina-info: #22d3ee;

    /* Faint Border Tokens (dark mode - Phase U06) */
    --closina-border-faint: rgba(255, 255, 255, 0.04);
    --closina-border-header: rgba(255, 255, 255, 0.10);
    --closina-hover-faint: rgba(255, 255, 255, 0.03);

    /* Focus Token (dark mode - Phase U06) */
    --closina-focus-outline: #f1f5f9;

    /* Overlay & Scrollbar Tokens (dark mode - P02) */
    --closina-overlay-hover: rgba(255, 255, 255, 0.15);
    --closina-overlay-active: rgba(255, 255, 255, 0.25);
    --closina-scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --closina-fade-overlay: rgba(0, 0, 0, 0.3);
    --closina-fade-overlay-strong: rgba(0, 0, 0, 0.5);

    /* Social Platform Brand Colors (dark mode - P02) */
    --closina-brand-whatsapp-chat-bg: #1a2e23;
    --closina-brand-whatsapp-bubble: #1e4d2b;
    --closina-brand-twitter: #ffffff;

    /* WCAG AA Text-Safe Semantic Colors (dark mode - P02 R3-D)
       On dark backgrounds (#0f172a), the bright base variants already pass contrast,
       but use slightly muted variants for comfortable reading while still AA-compliant. */
    --closina-success-text: #4ade80;   /* Green-400: 9.2:1 on #0f172a */
    --closina-warning-text: #fdba74;   /* Orange-300: 8.7:1 on #0f172a */
    --closina-info-text: #22d3ee;      /* Cyan-400: 8.4:1 on #0f172a */

    /* Chart Color Tokens (dark mode - Phase U14d)
       Brighter variants for visibility on dark backgrounds. */
    --closina-chart-1: #10b981;    /* Emerald-500 (matches dark primary) */
    --closina-chart-2: #22d3ee;    /* Cyan-400 */
    --closina-chart-3: #a78bfa;    /* Violet-400 */
    --closina-chart-4: #fb923c;    /* Orange-400 */
    --closina-chart-5: #38bdf8;    /* Sky-400 */
    --closina-chart-6: #e879f9;    /* Fuchsia-400 */
    --closina-chart-7: #facc15;    /* Yellow-400 */
    --closina-chart-8: #f87171;    /* Red-400 */

    /* Badge & Alert Semantic Tokens (dark mode - Phase U14d) */
    --closina-alert-button-pill: rgba(255, 255, 255, 0.22);  /* Slightly more visible on dark */
}

/* -----------------------------------------------------------------------------
   2c. WCAG AA Color Contrast Overrides for MudBlazor Text (P02 R3-D)
   MudBlazor's .mud-success-text, .mud-warning-text, .mud-info-text classes
   use the palette colors (bright green/orange/cyan) that fail WCAG AA 4.5:1
   when rendered as foreground text on white/light backgrounds.
   Override these classes to use darker, AA-compliant variants for text.
   Background colors, chips, and buttons continue using the bright originals.
   ----------------------------------------------------------------------------- */
.mud-success-text {
    color: var(--closina-success-text) !important;
}

.mud-warning-text {
    color: var(--closina-warning-text) !important;
}

.mud-info-text {
    color: var(--closina-info-text) !important;
}

/* -----------------------------------------------------------------------------
   2b. Font Unification — Syncfusion → MudBlazor/Inter
   Syncfusion grids and scheduler use Bootstrap's system-ui font stack by default.
   Override to inherit the body font (Inter) for a unified appearance.
   ----------------------------------------------------------------------------- */
.e-grid,
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-rowcell,
.e-grid .e-summarycell,
.e-grid .e-pager,
.e-grid .e-toolbar,
.e-grid .e-groupdroparea,
.e-grid .e-filterbar input,
.e-schedule,
.e-schedule .e-header-cells,
.e-schedule .e-header-date,
.e-schedule .e-header-day,
.e-schedule .e-navigate,
.e-schedule .e-date-header,
.e-schedule .e-appointment,
.e-schedule .e-appointment-details,
.e-schedule .e-time-cells-wrap,
.e-schedule .e-work-cells,
.e-schedule .e-resource-cells,
.e-schedule .e-toolbar-items,
.e-schedule .e-tbar-btn,
.e-schedule .e-agenda-item,
.e-schedule .e-quick-popup-wrapper {
    font-family: inherit !important;
}

/* -----------------------------------------------------------------------------
   3. Button Shape & Icon Contrast (Sub-Phase 1.4, revised Sub-Phase 7)
   ----------------------------------------------------------------------------- */

/* All buttons: 12px rounded rect, 44px touch target, smooth transition.
   Pill shape (9999px) is reserved for hero CTAs via .closina-pill or
   page-scoped CSS (e.g. Index.razor.css landing page buttons). */
.mud-button-root.mud-button-filled {
    border-radius: var(--closina-radius-md);
    box-shadow: none;
    min-height: var(--closina-btn-height);
    transition: all var(--closina-transition);
}

.mud-button-root.mud-button-filled:hover {
    box-shadow: var(--closina-shadow-sm);
    transform: translateY(-1px);
}

/* Outlined and text buttons: same 12px radius */
.mud-button-root.mud-button-outlined,
.mud-button-root.mud-button-text {
    border-radius: var(--closina-radius-md);
    min-height: var(--closina-btn-height);
    transition: all var(--closina-transition);
}

/* Utility class: apply pill shape to specific CTA buttons */
.closina-pill {
    border-radius: var(--closina-radius-full) !important;
}

/* Fix: Icons inside ALL filled buttons must inherit text color.
   MudBlazor sets .mud-svg-icon color to the theme primary, which clashes
   with filled backgrounds (e.g., emerald icon on emerald button = zero contrast).
   Covers all ButtonTier variants: Primary, Secondary, Danger, Success, Warning, Info. */
.mud-button-filled .mud-icon-root,
.mud-button-filled .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Fix: Icons inside outlined buttons must also inherit text color.
   Outlined buttons use semantic text colors that icons should match. */
.mud-button-outlined .mud-icon-root,
.mud-button-outlined .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Fix: Icons inside MudChip must inherit chip text color.
   Status pills use Color + Icon but MudBlazor doesn't propagate
   the chip's semantic color to the icon element. */
.mud-chip .mud-icon-root,
.mud-chip .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Fix: Icons inside MudFab must inherit button text color.
   FABs use Color property but icons render with default primary color. */
.mud-fab .mud-icon-root,
.mud-fab .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Fix: Icons inside MudIconButton must inherit semantic color.
   Standalone icon buttons with Color parameter need icon to match. */
.mud-icon-button .mud-icon-root,
.mud-icon-button .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Fix: Icons inside MudToggleIconButton must inherit toggle state color. */
.mud-toggle-icon-button .mud-icon-root,
.mud-toggle-icon-button .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}

/* Icon buttons - keep circular but ensure touch target size */
.mud-button-root.mud-icon-btn {
    transition: all var(--closina-transition);
}

/* Fab buttons keep their circular shape */
.mud-fab {
    transition: all var(--closina-transition);
}

.mud-fab:hover {
    transform: translateY(-1px);
    box-shadow: var(--closina-shadow-md);
}

/* -----------------------------------------------------------------------------
   4. Shadow-to-Border Surface Treatment (Sub-Phase 1.5)
   ----------------------------------------------------------------------------- */

/* Elevation levels 1-3: no shadow, subtle border */
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3 {
    box-shadow: none !important;
    border: 1px solid var(--closina-border);
}

/* Elevation levels 4-5: ultra-subtle shadow for dialogs/overlays only */
.mud-paper.mud-elevation-4,
.mud-paper.mud-elevation-5 {
    box-shadow: var(--closina-shadow-lg) !important;
    border: 1px solid var(--closina-border);
}

/* Warm background on main content area */
.mud-main-content {
    background-color: var(--closina-background);
}

/* Override ABP layout background to use warm neutral */
.abp-application-layout {
    background-color: var(--closina-background) !important;
}

/* Prevent horizontal overflow from off-screen drawers (HelpPanel, CopilotWidget).
   MudBlazor "closes" right-side drawers by positioning them at left:100% (off-screen)
   but keeps display:flex and visibility:visible. This causes ~420px horizontal scroll
   on all authenticated pages. overflow-x:hidden on html doesn't reliably clip these
   on all browsers (notably Chrome on Samsung Fold 6 exposes the drawer on unfold).
   Fix: fully collapse closed right drawers so they occupy zero layout space. */
.mud-drawer-pos-right.mud-drawer--closed {
    visibility: hidden;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
}

/* Pin Copilot/Coach and Help Panel drawers to viewport height.
   MudBlazor temporary drawers use height:100% which inherits from the layout
   container. On long/scrollable pages, this makes the drawer match the document
   height instead of the viewport, forcing users to scroll the drawer to reach
   the input field. Fix: lock to viewport height with 100dvh (100vh fallback). */
.copilot-drawer,
.help-panel-drawer {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    top: 0 !important;
    position: fixed !important;
}

/* Cards and papers get the border treatment */
.mud-card {
    border-radius: var(--closina-radius-md);
    overflow: hidden;
}

/* Dialog surfaces get larger radius */
.mud-dialog {
    border-radius: var(--closina-radius-lg) !important;
}

/* Input fields get medium radius */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--closina-radius-sm);
}

/* Select/dropdown menus */
.mud-popover .mud-list {
    border-radius: var(--closina-radius-sm);
}

/* Chip components get pill shape */
.mud-chip {
    border-radius: var(--closina-radius-full);
}

/* Alert components */
.mud-alert {
    border-radius: var(--closina-radius-md);
}

/* Snackbar */
.mud-snackbar {
    border-radius: var(--closina-radius-md) !important;
}

/* MudDivider - use theme border color for subtlety */
.mud-divider {
    border-color: var(--closina-border);
}

/* MudTabs - subtle border treatment */
.mud-tabs.mud-elevation-2 {
    border-radius: var(--closina-radius-md);
}

/* Expansion panels */
.mud-expand-panel {
    border-radius: var(--closina-radius-md) !important;
}

/* Tables - subtle borders */
.mud-table {
    border-radius: var(--closina-radius-md);
    overflow: hidden;
}

/* Announcement badge — WCAG 1.4.3 contrast fix (U09)
   MudBlazor deep-orange badge (rgb(230,81,0)) with white text = 3.79:1
   Required: 4.5:1. Darken to rgb(191,54,12) = ~5.3:1 on white. */
.mud-badge.mud-badge-warning,
.mud-badge[style*="deep-orange"],
.announcement-badge .mud-badge-content {
    background-color: var(--closina-badge-warning-bg) !important;
}

/* Sidebar version link - visually subtle but clickable to open changelog (Phase U06) */
#menu-version-info {
    margin-top: 8px;
    border-top: 1px solid var(--closina-border);
    padding-top: 8px;
    opacity: 0.6;
    font-size: 0.75rem;
    position: relative;
    z-index: 0;
}

#menu-version-info:hover {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   5. Stat Card Styling (Sub-Phase 3.2)
   ----------------------------------------------------------------------------- */

/* CompactStatCard - Elevation="0" with border treatment */
.compact-stat-card {
    border: 1px solid var(--closina-border);
    border-radius: var(--closina-radius-md);
    transition: all var(--closina-transition);
    /* Stretch children to equal height so top edges align (UX R09).
       Overrides MudBlazor's align-center utility class. */
    align-items: stretch !important;
}

/* Each child centers its content within the stretched height */
.compact-stat-card .compact-stat-icon {
    display: flex;
    align-items: center;
    line-height: 1;
}

.compact-stat-card .compact-stat-label {
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.compact-stat-card .stat-card-value {
    display: flex;
    align-items: center;
}

/* Stat card value styling — visually matches heading sizes but uses body1 semantic
   to avoid heading hierarchy issues (P02 R3-H WCAG 1.3.1). */
.stat-card-value {
    font-size: var(--mud-typography-h5-size) !important;
    font-weight: var(--mud-typography-h5-weight) !important;
    line-height: var(--mud-typography-h5-lineheight) !important;
    letter-spacing: var(--mud-typography-h5-letterspacing) !important;
}

.stat-card-value-large {
    font-size: var(--mud-typography-h3-size) !important;
    font-weight: var(--mud-typography-h3-weight) !important;
    line-height: var(--mud-typography-h3-lineheight) !important;
    letter-spacing: var(--mud-typography-h3-letterspacing) !important;
}

.compact-stat-card:hover {
    border-color: var(--closina-border-strong);
}

/* PercentageStatCard containers get the same treatment */
.mud-paper.mud-elevation-0 {
    border: 1px solid var(--closina-border);
    border-radius: var(--closina-radius-md);
}

/* -----------------------------------------------------------------------------
   5b. Focus Indicators (WCAG 2.4.7 - visible on new surfaces)
   ----------------------------------------------------------------------------- */

/* Ensure focus indicators use emerald outline on new border-only surfaces.
   Phase U07: Extended to cover all interactive MudBlazor component types
   for WCAG 2.4.7 compliance (Focus Visible). */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-input:focus-visible,
.mud-select:focus-visible,
.mud-chip:focus-visible,
.mud-list-item:focus-visible,
.mud-tab:focus-visible,
.mud-link:focus-visible,
.mud-menu-item:focus-visible,
.mud-navlink:focus-visible,
.mud-toggle-item:focus-visible,
.mud-switch:focus-visible,
.mud-checkbox:focus-visible,
.mud-radio:focus-visible,
.mud-picker:focus-visible,
.mud-fab:focus-visible,
.mud-card:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--closina-primary);
    outline-offset: 2px;
}

/* Phase U07: Text-variant primary buttons use link color for AA contrast.
   Phase P02: Primary now matches link (#047857, 5.48:1) — this override is
   still kept for explicitness but no longer corrects a contrast gap. */
.mud-button-text.mud-button-text-primary {
    color: var(--closina-link) !important;
}

/* -----------------------------------------------------------------------------
   6. Input Field Styling (Sub-Phase 3.3)
   ----------------------------------------------------------------------------- */

/* Select/dropdown popover menus */
.mud-popover {
    border-radius: var(--closina-radius-md) !important;
}

/* Autocomplete dropdown */
.mud-autocomplete .mud-popover {
    border-radius: var(--closina-radius-sm) !important;
}

/* -----------------------------------------------------------------------------
   7. Dark Mode Component Overrides (Phase U01 Sub-Phase 5)
   ----------------------------------------------------------------------------- */

/* Paper/card surfaces in dark mode */
[data-theme="dark"] .mud-paper {
    background-color: var(--closina-surface);
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-paper.mud-elevation-0 {
    background-color: var(--closina-surface);
}

/* Main content area dark background */
[data-theme="dark"] .mud-main-content {
    background-color: var(--closina-background);
}

[data-theme="dark"] .abp-application-layout.bg-light {
    background-color: var(--closina-background) !important;
}

/* Prevent white edge at page top — html element uses a different dark bg by default.
   Note: html[data-theme="dark"] targets html itself (the attribute IS on <html>).
   [data-theme="dark"] body targets body as a descendant. */
html[data-theme="dark"],
[data-theme="dark"] body {
    background-color: var(--closina-background) !important;
}

/* Cards and dialogs */
[data-theme="dark"] .mud-card {
    background-color: var(--closina-surface);
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-dialog {
    background-color: var(--closina-surface);
    color: var(--closina-text-primary);
}

/* Button overrides for dark mode */
[data-theme="dark"] .mud-button-root.mud-button-filled-primary {
    background-color: var(--closina-primary) !important;
    color: var(--closina-primary-text) !important;
}

[data-theme="dark"] .mud-button-root.mud-button-filled-primary:hover {
    background-color: var(--closina-primary-hover) !important;
}

[data-theme="dark"] .mud-button-root.mud-button-outlined {
    border-color: var(--closina-border-strong);
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-button-root.mud-button-text {
    color: var(--closina-text-primary);
}

/* Input borders and backgrounds */
[data-theme="dark"] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--closina-border-strong);
}

[data-theme="dark"] .mud-input {
    color: var(--closina-text-primary) !important;
}

[data-theme="dark"] .mud-input-label {
    color: var(--closina-text-secondary) !important;
}

[data-theme="dark"] .mud-input-control .mud-input-label-inputcontrol {
    color: var(--closina-text-secondary) !important;
}

[data-theme="dark"] .mud-input-filled {
    background-color: var(--closina-surface-hover) !important;
}

[data-theme="dark"] .mud-input-underline::after {
    border-bottom-color: var(--closina-primary) !important;
}

/* Select/dropdown in dark mode */
[data-theme="dark"] .mud-select .mud-input {
    color: var(--closina-text-primary) !important;
}

[data-theme="dark"] .mud-popover {
    background-color: var(--closina-surface) !important;
    border-color: var(--closina-border-strong) !important;
}

[data-theme="dark"] .mud-list {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-list-item:hover {
    background-color: var(--closina-surface-hover) !important;
}

[data-theme="dark"] .mud-list-item.mud-selected-item {
    background-color: var(--closina-primary-light) !important;
    color: var(--closina-primary) !important;
}

/* Dividers */
[data-theme="dark"] .mud-divider {
    border-color: var(--closina-border);
}

/* Table / MudTable dark mode */
[data-theme="dark"] .mud-table {
    background-color: var(--closina-surface);
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-table .mud-table-head .mud-table-cell {
    background-color: var(--closina-surface-hover);
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-table .mud-table-body .mud-table-row:hover {
    background-color: var(--closina-surface-hover) !important;
}

[data-theme="dark"] .mud-table .mud-table-cell {
    border-bottom-color: var(--closina-border);
}

/* Tabs */
[data-theme="dark"] .mud-tabs {
    background-color: var(--closina-surface);
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-tabs .mud-tab {
    color: var(--closina-text-secondary);
}

[data-theme="dark"] .mud-tabs .mud-tab.mud-tab-active {
    color: var(--closina-primary);
}

/* Drawer / Sidebar */
[data-theme="dark"] .mud-drawer {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-drawer-content {
    background-color: var(--closina-surface) !important;
}

/* AppBar */
[data-theme="dark"] .mud-appbar {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary);
}

/* Alerts */
[data-theme="dark"] .mud-alert {
    color: var(--closina-text-primary);
}

/* Filled warning/success/info alerts need dark text — bright backgrounds wash
   out light text. WCAG 1.4.3: MudBlazor's default #E65100 amber + white text
   measures 3.79:1, failing AA 4.5:1 for normal text. rgba(0,0,0,0.87) on #E65100
   measures ~7:1 (AA+). Applies to both light AND dark mode because the underlying
   background hues are the same in both. Previously dark-mode only, but I14's
   directional-warning banner surfaced the light-mode gap in an AA audit. */
.mud-alert-filled-warning,
.mud-alert-filled-success,
.mud-alert-filled-info {
    color: var(--closina-alert-dark-text);
}

.mud-alert-filled-warning .mud-button-root,
.mud-alert-filled-success .mud-button-root,
.mud-alert-filled-info .mud-button-root {
    color: var(--closina-alert-dark-text);
}

.mud-alert-filled-warning .mud-alert-icon,
.mud-alert-filled-success .mud-alert-icon,
.mud-alert-filled-info .mud-alert-icon {
    color: var(--closina-alert-dark-icon);
}

/* Icons inside filled alerts should inherit alert text color, not theme primary */
.mud-alert-filled-warning .mud-svg-icon,
.mud-alert-filled-info .mud-svg-icon,
.mud-alert-filled-error .mud-svg-icon,
.mud-alert-filled-success .mud-svg-icon {
    color: inherit !important;
}

/* Snackbar */
[data-theme="dark"] .mud-snackbar {
    color: var(--closina-text-primary);
}

/* Chips */
[data-theme="dark"] .mud-chip.mud-chip-default {
    background-color: var(--closina-surface-hover);
    color: var(--closina-text-primary);
}

/* Typography */
[data-theme="dark"] .mud-typography {
    color: var(--closina-text-primary);
}

[data-theme="dark"] .mud-typography-secondary {
    color: var(--closina-text-secondary) !important;
}

/* U09: .mud-secondary-text uses MudBlazor's --mud-palette-secondary (not --closina-text-secondary).
   Override to ensure readable contrast on dark backgrounds (was 2.36:1, now uses Slate-400 at ~5.4:1). */
[data-theme="dark"] .mud-secondary-text {
    color: var(--closina-text-secondary) !important;
}

/* Breadcrumbs */
[data-theme="dark"] .mud-breadcrumbs li {
    color: var(--closina-text-secondary);
}

[data-theme="dark"] .mud-breadcrumbs a {
    color: var(--closina-primary) !important;
}

/* Expansion panel */
[data-theme="dark"] .mud-expand-panel {
    background-color: var(--closina-surface);
    color: var(--closina-text-primary);
}

/* Progress bars */
[data-theme="dark"] .mud-progress-linear {
    background-color: var(--closina-surface-hover);
}

/* Skeleton loading */
[data-theme="dark"] .mud-skeleton {
    background-color: var(--closina-surface-hover) !important;
}

/* Tooltip */
[data-theme="dark"] .mud-tooltip {
    background-color: var(--closina-surface-hover) !important;
    color: var(--closina-text-primary) !important;
}

/* Body/HTML background for dark mode */
[data-theme="dark"] body,
[data-theme="dark"] body.abp-application-layout {
    background-color: var(--closina-background) !important;
    color: var(--closina-text-primary);
}

/* U09: MudBadge info color — sky-blue (#0ea5e9) with white text = 2.14:1 in dark mode.
   Darken to Sky-600 (#0284c7) for 4.7:1 contrast on white text. */
[data-theme="dark"] .mud-badge-info .mud-badge-content {
    background-color: var(--closina-badge-info-bg) !important;
}

/* U09: Admin shield badge — warning (amber) badge with primary icon = 1.52:1.
   Override icon color inside warning badges to dark text for contrast. */
[data-theme="dark"] .mud-badge-warning .mud-icon-root {
    color: var(--closina-primary-text) !important;
}

/* Stat card dark overrides */
[data-theme="dark"] .compact-stat-card {
    background-color: var(--closina-surface);
    border-color: var(--closina-border);
}

/* -----------------------------------------------------------------------------
   8. Syncfusion Grid Dark Mode Overrides (Phase U01 Sub-Phase 5.4)
   ----------------------------------------------------------------------------- */

/* Grid container */
[data-theme="dark"] .e-grid {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary) !important;
    border-color: var(--closina-border) !important;
}

/* Grid header */
[data-theme="dark"] .e-grid .e-gridheader {
    background-color: var(--closina-surface-hover) !important;
    border-color: var(--closina-border) !important;
}

[data-theme="dark"] .e-grid .e-headercell {
    background-color: var(--closina-surface-hover) !important;
    color: var(--closina-text-primary) !important;
    border-color: var(--closina-border) !important;
}

[data-theme="dark"] .e-grid .e-headercelldiv {
    color: var(--closina-text-primary) !important;
}

/* Grid rows */
[data-theme="dark"] .e-grid .e-row,
[data-theme="dark"] .e-grid .e-altrow {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary) !important;
}

[data-theme="dark"] .e-grid .e-altrow {
    background-color: var(--closina-surface) !important;
}

[data-theme="dark"] .e-grid .e-rowcell {
    color: var(--closina-text-primary) !important;
    border-color: var(--closina-border) !important;
}

/* Row hover */
[data-theme="dark"] .e-grid .e-row:hover .e-rowcell,
[data-theme="dark"] .e-grid .e-altrow:hover .e-rowcell {
    background-color: var(--closina-surface-hover) !important;
}

/* Grid toolbar */
[data-theme="dark"] .e-grid .e-toolbar {
    background-color: var(--closina-surface) !important;
    border-color: var(--closina-border) !important;
}

[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn {
    color: var(--closina-text-primary) !important;
}

/* Grid footer/pager */
[data-theme="dark"] .e-grid .e-gridpager {
    background-color: var(--closina-surface) !important;
    border-color: var(--closina-border) !important;
    color: var(--closina-text-secondary) !important;
}

[data-theme="dark"] .e-grid .e-pager {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-secondary) !important;
}

[data-theme="dark"] .e-grid .e-pager .e-numericitem {
    color: var(--closina-text-secondary) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .e-grid .e-pager .e-numericitem.e-currentitem {
    background-color: var(--closina-primary) !important;
    color: var(--closina-primary-text) !important;
}

/* Grid aggregate footer */
[data-theme="dark"] .e-grid .e-gridfooter {
    background-color: var(--closina-surface-hover) !important;
    border-color: var(--closina-border) !important;
}

[data-theme="dark"] .e-grid .e-summarycell {
    color: var(--closina-text-primary) !important;
}

/* Grid selection highlight in dark mode */
[data-theme="dark"] .e-grid .e-selectionbackground {
    background-color: var(--closina-primary-light) !important;
}

/* Grid filter bar */
[data-theme="dark"] .e-grid .e-filterbar .e-filterbarcell {
    background-color: var(--closina-surface) !important;
}

[data-theme="dark"] .e-grid .e-filterbar input {
    color: var(--closina-text-primary) !important;
    background-color: var(--closina-surface) !important;
    border-color: var(--closina-border) !important;
}

/* Grid dialog/popup */
[data-theme="dark"] .e-grid .e-dialog {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary) !important;
    border-color: var(--closina-border) !important;
}

/* Grid sort indicator */
[data-theme="dark"] .e-grid .e-icon-ascending::before,
[data-theme="dark"] .e-grid .e-icon-descending::before {
    color: var(--closina-primary) !important;
}

/* Custom grid toolbar dark mode */
[data-theme="dark"] .custom-grid-toolbar {
    background-color: var(--closina-surface-hover);
    border-bottom-color: var(--closina-border);
}

[data-theme="dark"] .sfgrid-container {
    background: var(--closina-surface);
}

/* Grid content area and table — Syncfusion defaults these to white */
[data-theme="dark"] .e-grid .e-gridcontent,
[data-theme="dark"] .e-grid .e-content {
    background-color: var(--closina-surface) !important;
}

[data-theme="dark"] .e-grid table.e-table {
    background-color: var(--closina-surface) !important;
}

/* Group drop area */
[data-theme="dark"] .e-grid .e-groupdroparea {
    background-color: var(--closina-surface-hover) !important;
    color: var(--closina-text-secondary) !important;
    border-color: var(--closina-border) !important;
}

/* Pager container and navigation buttons — Syncfusion defaults these to white */
[data-theme="dark"] .e-grid .e-pagercontainer {
    background-color: var(--closina-surface) !important;
}

[data-theme="dark"] .e-grid .e-pager .e-mfirst,
[data-theme="dark"] .e-grid .e-pager .e-mprev,
[data-theme="dark"] .e-grid .e-pager .e-mnext,
[data-theme="dark"] .e-grid .e-pager .e-mlast,
[data-theme="dark"] .e-grid .e-pager .e-first,
[data-theme="dark"] .e-grid .e-pager .e-prev,
[data-theme="dark"] .e-grid .e-pager .e-next,
[data-theme="dark"] .e-grid .e-pager .e-last {
    background-color: transparent !important;
    color: var(--closina-text-secondary) !important;
}

[data-theme="dark"] .e-grid .e-pager .e-mfirst:hover,
[data-theme="dark"] .e-grid .e-pager .e-mprev:hover,
[data-theme="dark"] .e-grid .e-pager .e-mnext:hover,
[data-theme="dark"] .e-grid .e-pager .e-mlast:hover,
[data-theme="dark"] .e-grid .e-pager .e-first:hover,
[data-theme="dark"] .e-grid .e-pager .e-prev:hover,
[data-theme="dark"] .e-grid .e-pager .e-next:hover,
[data-theme="dark"] .e-grid .e-pager .e-last:hover {
    background-color: var(--closina-surface-hover) !important;
}

/* Pager icons (arrow SVGs) */
[data-theme="dark"] .e-grid .e-pager .e-icon-first::before,
[data-theme="dark"] .e-grid .e-pager .e-icon-prev::before,
[data-theme="dark"] .e-grid .e-pager .e-icon-next::before,
[data-theme="dark"] .e-grid .e-pager .e-icon-last::before {
    color: var(--closina-text-secondary) !important;
}

/* Pager "items per page" dropdown */
[data-theme="dark"] .e-grid .e-pager .e-ddl,
[data-theme="dark"] .e-grid .e-pager .e-ddl .e-input-group {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary) !important;
    border-color: var(--closina-border) !important;
}

[data-theme="dark"] .e-grid .e-pager .e-ddl input.e-input {
    color: var(--closina-text-primary) !important;
}

/* Pager info text ("1 of 5 pages", "1 to 20 of 93 items") */
[data-theme="dark"] .e-grid .e-pager .e-pagerconstant,
[data-theme="dark"] .e-grid .e-pager .e-pagerexternalmsg,
[data-theme="dark"] .e-grid .e-pager .e-parentmsgbar {
    color: var(--closina-text-secondary) !important;
}

/* Pager page-size dropdown popup */
[data-theme="dark"] .e-ddl.e-popup,
[data-theme="dark"] .e-dropdownbase .e-list-item {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary) !important;
}

[data-theme="dark"] .e-ddl.e-popup .e-list-item:hover,
[data-theme="dark"] .e-dropdownbase .e-list-item.e-hover {
    background-color: var(--closina-surface-hover) !important;
}

/* =============================================================================
   10. Syncfusion Chart Overrides (SfChart)
   ============================================================================= */

/* Font standardization - inherit Inter across all chart text */
.e-chart text,
.e-chart .e-chart-title,
.e-chart .e-axis-title,
.e-chart .e-axis-label,
.e-chart .e-legend-text,
.e-chart .e-datalabel,
.e-chart tspan {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Chart area background */
.e-chart {
    background: transparent !important;
}

/* Dark mode - Syncfusion charts */
[data-theme="dark"] .e-chart {
    background: transparent !important;
}

/* Chart SVG background rect (Syncfusion sets fill="#FFFFFF" inline) */
[data-theme="dark"] .e-chart rect[id*="ChartBorder"] {
    fill: var(--closina-surface) !important;
}

/* Axis labels */
[data-theme="dark"] .e-chart .e-axis-label,
[data-theme="dark"] .e-chart text[id*="AxisLabel"],
[data-theme="dark"] .e-chart text[id*="axislabel"] {
    fill: var(--closina-text-secondary) !important;
}

/* Axis titles */
[data-theme="dark"] .e-chart .e-axis-title,
[data-theme="dark"] .e-chart text[id*="AxisTitle"],
[data-theme="dark"] .e-chart text[id*="axistitle"] {
    fill: var(--closina-text-primary) !important;
}

/* Chart title */
[data-theme="dark"] .e-chart .e-chart-title,
[data-theme="dark"] .e-chart text[id*="_ChartTitle"] {
    fill: var(--closina-text-primary) !important;
}

/* Legend text */
[data-theme="dark"] .e-chart .e-legend-text,
[data-theme="dark"] .e-chart text[id*="_chart_legend_text"] {
    fill: var(--closina-text-secondary) !important;
}

/* Grid lines */
[data-theme="dark"] .e-chart line[id*="MajorGridLine"],
[data-theme="dark"] .e-chart line[id*="MajorTickLine"] {
    stroke: var(--closina-border) !important;
}

/* Axis lines */
[data-theme="dark"] .e-chart line[id*="AxisLine"] {
    stroke: var(--closina-border-strong) !important;
}

/* Tooltip */
[data-theme="dark"] .e-chart-tooltip,
[data-theme="dark"] .e-chart .e-tooltip-wrap {
    background-color: var(--closina-surface) !important;
    color: var(--closina-text-primary) !important;
    border: 1px solid var(--closina-border) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Crosshair label */
[data-theme="dark"] .e-chart rect[id*="Crosshair"] {
    fill: var(--closina-surface) !important;
}

/* =============================================================================
   11. MudBlazor Chart Overrides (MudChart)
   ============================================================================= */

/* Font standardization - inherit Inter on MudChart SVG text */
.mud-chart text,
.mud-chart .mud-chart-legend-item {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Dark mode - MudChart */
[data-theme="dark"] .mud-chart text {
    fill: var(--closina-text-secondary) !important;
}

/* MudChart grid/axis lines */
[data-theme="dark"] .mud-chart line,
[data-theme="dark"] .mud-chart .mud-chart-line {
    stroke: var(--closina-border) !important;
}

/* MudChart legend text */
[data-theme="dark"] .mud-chart .mud-chart-legend-item .mud-typography {
    color: var(--closina-text-secondary) !important;
}

/* =============================================================================
   12. Reduced Motion Support (Phase U07 - WCAG 2.3.3)
   =============================================================================
   When the user has requested reduced motion in their OS settings, disable or
   minimize all CSS transitions and animations. This prevents vestibular
   disorders from being triggered by motion in the UI.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    /* Override Closina transition tokens to instant */
    :root {
        --closina-transition: 0.01s ease;
        --closina-transition-fast: 0.01s ease;
        --closina-transition-slow: 0.01s ease;
    }

    /* Disable all CSS transitions globally */
    *,
    *::before,
    *::after {
        transition-duration: 0.01s !important;
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
    }

    /* Disable MudBlazor hover transforms (button lift, fab rise) */
    .mud-button-root:hover,
    .mud-fab:hover {
        transform: none !important;
    }

    /* Disable MudBlazor progress bar animation for indeterminate state */
    .mud-progress-linear-indeterminate .mud-progress-linear-bar {
        animation: none !important;
    }

    /* Disable skeleton shimmer animation */
    .mud-skeleton {
        animation: none !important;
    }

    /* Disable Syncfusion grid animations */
    .e-grid .e-rowcell,
    .e-grid .e-row,
    .e-grid .e-altrow {
        transition: none !important;
    }

    /* Disable pulsing badge animation (RefreshButtonWithBadge) */
    .pulsing-badge {
        animation: none !important;
    }

    /* Disable loading progress bar animation */
    .loading-progress-bar {
        animation: none !important;
    }

    /* Disable drawer slide animations */
    .mud-drawer {
        transition-duration: 0.01s !important;
    }

    /* Disable dialog backdrop fade */
    .mud-overlay {
        transition-duration: 0.01s !important;
    }
}

/* -----------------------------------------------------------------------------
   12. AI Chat Markdown Content (Phase C23)
   Styles for rendered markdown inside Copilot/Coach chat bubbles.
   ----------------------------------------------------------------------------- */
.coach-markdown-content {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--closina-text-primary);
}

.coach-markdown-content p {
    margin: 0 0 0.5rem 0;
}

.coach-markdown-content p:last-child {
    margin-bottom: 0;
}

.coach-markdown-content ul,
.coach-markdown-content ol {
    padding-left: 1.25rem;
    margin: 0 0 0.5rem 0;
}

.coach-markdown-content li {
    margin-bottom: 0.2rem;
}

.coach-markdown-content strong {
    font-weight: 600;
}

.coach-markdown-content code {
    background-color: var(--closina-code-bg);
    color: var(--closina-code-text);
    font-family: var(--closina-font-mono);
    padding: 0.1rem 0.3rem;
    border-radius: var(--closina-radius-sm);
    font-size: 0.85em;
}

.coach-markdown-content h1,
.coach-markdown-content h2,
.coach-markdown-content h3,
.coach-markdown-content h4 {
    font-weight: 600;
    margin: 0.75rem 0 0.35rem 0;
}

.coach-markdown-content h1 { font-size: 1.1rem; }
.coach-markdown-content h2 { font-size: 1.05rem; }
.coach-markdown-content h3 { font-size: 1rem; }
.coach-markdown-content h4 { font-size: 0.925rem; }

.coach-markdown-content blockquote {
    border-left: 3px solid var(--closina-border-strong);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--closina-text-secondary);
}

.coach-markdown-content a {
    color: var(--closina-link);
    text-decoration: none;
}

.coach-markdown-content a:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   14. Top Banners (Announcement, App Update)
   ----------------------------------------------------------------------------- */

/* Banners are inline in BasePageWrapper — no position:fixed needed.
   Zero out margins/radius for edge-to-edge appearance. */
.announcement-banner,
.app-update-banner {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Banner overflow indicator */
.banner-overflow-indicator {
    background: var(--closina-surface);
    color: var(--closina-text-secondary);
    border-bottom: 1px solid var(--closina-border);
    padding: 4px 16px;
    font-size: 0.8125rem;
    text-align: center;
}

[data-theme="dark"] .banner-overflow-indicator {
    background: var(--closina-surface);
    color: var(--closina-text-secondary);
    border-bottom-color: var(--closina-border);
}

/* Config Health Banner — inline in AdminPageWrapper, same pattern as CompactSecurityBar */
.config-health-banner {
    border-radius: var(--closina-radius-sm);
}

.config-health-banner .mud-alert-message {
    width: 100%;
}

/* Config Health Banner: Touch spacing between expand button and close icon (WCAG 2.5.8) */
@media (max-width: 959px) {
    .config-health-banner .mud-alert-close-button {
        margin-left: 8px !important;
    }
}

/* =============================================================================
   Phase U15d: ClosinaTheme Shell — iOS Safe-Area Insets + Admin Banner
   ============================================================================= */

/* iOS Safe-Area: Ensure MudAppBar respects the notch / Dynamic Island on iOS.
   env(safe-area-inset-top) evaluates to 0 on non-iOS devices — no visual impact. */
.closina-appbar {
    padding-top: env(safe-area-inset-top);
}

/* Phase U28: Hybrid top-bar shell wrapper. Inherits iOS safe-area from .closina-appbar,
   adds a subtle bottom border separating the top bar from the sidebar/content.
   Retest Fix 1: box-sizing border-box + explicit height so the 1px bottom border
   is absorbed into the spec'd 56px height (was rendering at 57px). */
.closina-topbar {
    padding-top: env(safe-area-inset-top);
    min-height: var(--closina-layout-topbar-height);
    height: var(--closina-layout-topbar-height);
    box-sizing: border-box;
    border-bottom: 1px solid var(--closina-border);
    box-shadow: var(--closina-shadow-sm);
    z-index: var(--closina-z-sticky);
}

[data-theme="dark"] .closina-topbar {
    border-bottom-color: var(--closina-border-strong);
}

/* Phase U28: Named topbar slots. Brand hugs left, search is anchored center via
   flex-grow on the two spacers MainLayout already ships; widgets hug right. */
.closina-topbar-brand,
.closina-topbar-search,
.closina-topbar-widgets {
    flex-shrink: 0;
}

.closina-topbar-search {
    justify-content: center;
}

/* Phase U28: Hybrid left sidebar drawer. Width comes from the layout token so
   U17/U18 can override without touching MainLayout.razor. */
.closina-shell-sidebar.mud-drawer {
    width: var(--closina-layout-sidebar-width);
}

.closina-shell-sidebar.mud-drawer--mini:not(.mud-drawer--open) {
    width: var(--closina-layout-sidebar-width-rail);
}

/* iOS Safe-Area: Bottom padding on main content for home indicator bar.
   Prevents content from being hidden behind the iOS home indicator. */
.closina-main-content {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Shell-level admin banner — pinned below MudAppBar for admin page context.
   Uses filled variant Info severity. No border-radius since it spans full width. */
.closina-shell-admin-banner {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 2px 16px !important;
}

.closina-shell-admin-banner .mud-alert-message {
    padding: 0;
}

/* Phase U15: Scale down drawer navigation icons for a tighter sidebar.
   MudBlazor default nav icons are 24px (1.5rem) — reduce to 20px (1.25rem)
   for a more professional sidebar density. */
.mud-drawer .mud-nav-link-icon {
    font-size: 1rem !important;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

.mud-drawer .mud-nav-group .mud-icon-root {
    font-size: 1rem !important;
    vertical-align: middle;
}

/* Phase U27 (Sub-Phase C.2): Greyed/locked menu items.
   MenuBuilderService stamps `.menu-item-locked` on items where the member's
   subscription tier does not entitle the feature AND the definition declares
   GatingMode.GreyedWithUpsell. The item renders disabled with a lock badge
   and a tooltip directing the user to the billing/upgrade flow. */
.mud-nav-link.menu-item-locked,
.mud-nav-link.menu-item-upgrade-required,
.mud-nav-link.menu-item-coming-soon {
    color: var(--closina-text-secondary) !important;
    opacity: 0.65;
}

.mud-nav-link.menu-item-locked:hover,
.mud-nav-link.menu-item-upgrade-required:hover,
.mud-nav-link.menu-item-coming-soon:hover {
    opacity: 0.85;
    background-color: var(--closina-surface-hover);
}

.mud-nav-link.menu-item-locked.mud-nav-link-disabled,
.mud-nav-link.menu-item-locked[disabled] {
    cursor: not-allowed;
    pointer-events: auto; /* keep the wrapping MudTooltip responsive */
}

/* Phase U29: Keyboard-shortcut chip used in KeyboardShortcutsDialog (and any
   future surface that renders a key-cap style glyph). Tokens-only so dark
   mode flips automatically via [data-theme="dark"]. */
.closina-kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--closina-font-mono);
    font-size: 0.85em;
    color: var(--closina-text-primary);
    background: var(--closina-surface-hover);
    border: 1px solid var(--closina-border-strong);
    border-radius: var(--closina-radius-sm);
    box-shadow: var(--closina-shadow-sm);
    line-height: 1.4;
}