/* Global font size adjustment - makes all fonts slightly smaller */
html {
    font-size: 14px !important; /* Default is 16px, this is ~12% smaller */
}

/* TinyMCE's floating UI (autocompleter dropdowns, menus) defaults to z-index 1300,
   which is *below* MudBlazor dialogs (~1400). Without this, the # task and @ teammate
   mention pickers render behind the quick-comment popup and appear "broken". */
.tox-tinymce-aux {
    z-index: 4000 !important;
}

/* Ensure body respects the base font size */
body {
    font-size: 1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Enhanced Tab Styling - Pronounced Underline */
/* Hide MudBlazor's default animated slider */
.pdf-editor-tabs .mud-tabs-slider {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.pdf-editor-tabs .mud-indicator {
    display: none !important;
    visibility: hidden !important;
}

.pdf-editor-tabs .mud-tab-slider {
    display: none !important;
    visibility: hidden !important;
}

.pdf-editor-tabs .mud-tabs-toolbar {
    border-bottom: 8px solid #FF5722 !important;
}

.pdf-editor-tabs .mud-tab-active {
    border-bottom: 8px solid #FF5722 !important;
}

.pdf-editor-tabs button.mud-tab-active {
    border-bottom: 8px solid #FF5722 !important;
}

.pdf-editor-tabs .mud-ripple.mud-tab-active {
    border-bottom: 8px solid #FF5722 !important;
}

/* ===== Sliced Theme Styling ===== */

/* Map MudBlazor's palette onto our semantic tokens (see token block below).
   This is the single lever that re-skins the ~950 MudBlazor buttons/links/chips
   without touching their call sites:
     - primary  -> the ONE action accent (blue)
     - secondary-> neutral (teal retired; "secondary" now reads as a neutral action)
     - info     -> folded onto the primary blue so there is one accent, not two
   Reserve indigo (--brand) for chrome only (app bar) — see --mud-palette-appbar-background. */
:root {
    --mud-palette-primary: var(--primary) !important;
    --mud-palette-primary-rgb: var(--primary-rgb) !important;
    --mud-palette-primary-lighten: var(--primary-light) !important;
    --mud-palette-primary-darken: var(--primary-hover) !important;
    --mud-palette-appbar-background: var(--brand) !important;

    /* Secondary == neutral. Buttons/chips that used teal now read as neutral actions. */
    --mud-palette-secondary: var(--neutral-action) !important;
    --mud-palette-secondary-rgb: var(--neutral-action-rgb) !important;
    --mud-palette-secondary-lighten: var(--neutral-action-light) !important;
    --mud-palette-secondary-darken: var(--neutral-action-dark) !important;

    /* Info folds onto the single blue accent so links/active states share one hue. */
    --mud-palette-info: var(--primary) !important;
    --mud-palette-info-rgb: var(--primary-rgb) !important;
    --mud-palette-info-lighten: var(--primary-light) !important;
    --mud-palette-info-darken: var(--primary-hover) !important;

    /* Semantic status hues mapped onto Mud's success/warning/error so existing
       Color.Success / Color.Warning / Color.Error call sites land on the token scale. */
    --mud-palette-success: var(--status-done) !important;
    --mud-palette-warning: var(--status-review) !important;
    --mud-palette-error: var(--status-blocked) !important;
}

/* Light mode text color */
html:not(.dark-mode) {
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.6) !important;
}

/* ===== Light Mode Backgrounds ===== */

html:not(.dark-mode) .mud-layout,
html:not(.dark-mode) .mud-main-content {
    background-color: #f3f6f9 !important;
}

html:not(.dark-mode) .mud-card {
    border: 1px solid #e4e6ef !important;
    box-shadow: none !important;
}

html:not(.dark-mode) .mud-tabs-panels,
html:not(.dark-mode) .mud-tabpanel {
    background-color: white !important;
}

html:not(.dark-mode) .mud-tabpanel .mud-card,
html:not(.dark-mode) .mud-tabs-panels .mud-card,
html:not(.dark-mode) .mud-tabpanel .mud-paper,
html:not(.dark-mode) .mud-tabs-panels .mud-paper {
    border: 1px solid #e4e6ef !important;
}

html:not(.dark-mode) .mud-input-outlined .mud-input-slot {
    background-color: #f5f8fa !important;
}

/* ===== Dark Mode Backgrounds ===== */

html.dark-mode .mud-layout,
html.dark-mode .mud-main-content {
    background-color: #1a1a2e !important;
}

html.dark-mode .mud-card {
    border: 1px solid #2d2d44 !important;
    box-shadow: none !important;
    background-color: #16213e !important;
}

html.dark-mode .mud-paper {
    background-color: #16213e !important;
}

html.dark-mode .mud-tabs-panels,
html.dark-mode .mud-tabpanel {
    background-color: #16213e !important;
}

html.dark-mode .mud-tabpanel .mud-card,
html.dark-mode .mud-tabs-panels .mud-card,
html.dark-mode .mud-tabpanel .mud-paper,
html.dark-mode .mud-tabs-panels .mud-paper {
    border: 1px solid #2d2d44 !important;
}

html.dark-mode .mud-input-outlined .mud-input-slot {
    background-color: #1a1a2e !important;
}

html.dark-mode .mud-table {
    background-color: #16213e !important;
}

html.dark-mode .mud-table .mud-table-row:hover {
    background-color: #1a1a2e !important;
}

html.dark-mode .mud-dialog .mud-dialog-content,
html.dark-mode .mud-dialog {
    background-color: #16213e !important;
}

html.dark-mode .mud-drawer {
    background-color: #0f3460 !important;
}

html.dark-mode .mud-navmenu {
    background-color: transparent !important;
}

/* ===== Shared (both themes) ===== */

.mud-main-content {
    min-height: 100vh !important;
}

/* Don't apply border to drawer paper */
.mud-drawer .mud-paper {
    border: none !important;
}

/* Remove all elevation shadows */
[class*="mud-elevation-"] {
    box-shadow: none !important;
}

/* Ensure text inputs have transparent background */
.mud-input input,
.mud-select input {
    background-color: transparent !important;
}

/* Exclude textareas from colored background */
.mud-input-outlined .mud-input-slot:has(textarea) {
    background-color: transparent !important;
}

/* Tighten outlined input padding (MudBlazor default is 18.5px 14px) */
div.mud-input-slot.mud-input-root-outlined {
    padding: 14px 10px;
}

/* ===== Kanban Column Styling ===== */

/* Make Kanban columns extend to full viewport height */
.mud-drop-container {
    min-height: calc(100vh - 350px) !important;
}

.mud-drop-zone {
    min-height: calc(100vh - 400px) !important;
}

/* ===== User Avatar Alignment ===== */

/* Ensure all avatars align properly vertically */
.mud-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* ============================================================
   DESIGN TOKENS — single source of truth for color/type/spacing.
   Reference these everywhere; do not hardcode colors inline.
   Values sampled from the shipped app (indigo app bar, blue primary).
   Decision: ONE action accent = blue; indigo (--brand) is chrome-only.
   ============================================================ */
:root {
    /* Brand / chrome — sampled from the app bar rgb(45,37,111). Chrome ONLY. */
    --brand:            #2D256F;
    --brand-hover:      #241D59;
    --brand-fg:         #FFFFFF;

    /* Primary action accent — the ONE accent for buttons/links/active/selected.
       Sampled from the shipped primary blue rgb(60,108,195). */
    --primary:          #3C6CC3;
    --primary-hover:    #30569C;   /* shipped darken rgb(48,86,156) */
    --primary-light:    #5C8CD9;   /* shipped lighten rgb(92,140,217) */
    --primary-fg:       #FFFFFF;
    --primary-rgb:      60, 108, 195;

    /* Neutral action (the old "secondary"/teal slot, now neutral). Used for
       secondary buttons rendered via Mud Color.Secondary. */
    --neutral-action:        #5B6473;
    --neutral-action-rgb:    91, 100, 115;
    --neutral-action-light:  #7B8392;
    --neutral-action-dark:   #454C58;

    /* Neutrals */
    --bg:               #F3F6F9;   /* app background (matches shipped #f3f6f9) */
    --surface:          #FFFFFF;   /* cards */
    --border:           #E4E6EF;   /* matches shipped card border */
    --text:             #1A1A2E;
    --text-muted:       #6B7280;

    /* Semantic STATUS scale — the only place these hues are allowed.
       Ready=neutral, In Progress=blue, Review=amber, Blocked=red, Done=green. */
    --status-ready:        #6B7280;
    --status-progress:     #3C6CC3;   /* shares the action blue, per brief */
    --status-review:       #F59E0B;
    --status-blocked:      #EF4444;
    --status-done:         #10B981;
    /* status tints (badges) */
    --status-ready-bg:     rgba(107, 114, 128, .14);
    --status-progress-bg:  rgba(60, 108, 195, .14);
    --status-review-bg:    rgba(245, 158, 11, .16);
    --status-blocked-bg:   rgba(239, 68, 68, .14);
    --status-done-bg:      rgba(16, 185, 129, .16);

    /* Priority (reuse status hues for cohesion). */
    --prio-low:            #10B981;
    --prio-medium:         #F59E0B;
    --prio-high:           #EF4444;
    --prio-critical:       #B91C1C;
    --prio-low-bg:         rgba(16, 185, 129, .16);
    --prio-medium-bg:      rgba(245, 158, 11, .16);
    --prio-high-bg:        rgba(239, 68, 68, .14);
    --prio-critical-bg:    rgba(185, 28, 28, .14);

    /* Type — ONE family (Roboto is the shipped face). */
    --font-sans: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Canonical card/button radius + card shadow. */
    --radius:           10px;
    --shadow-card:      0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);

    /* Spacing scale */
    --space-1: 4px; --space-2: 8px; --space-3: 12px;
    --space-4: 16px; --space-6: 24px; --space-8: 32px;
}

/* Dark-mode token values. Hues stay constant for status/priority (semantic),
   neutrals and primary shift for contrast on the dark surface. */
html.dark-mode {
    --primary:          #5C8CD9;   /* lighten blue for legibility on dark */
    --primary-hover:    #3C6CC3;
    --primary-light:    #7BA3E2;
    --primary-rgb:      92, 140, 217;

    --neutral-action:        #8A93A3;
    --neutral-action-rgb:    138, 147, 163;
    --neutral-action-light:  #A6AEBC;
    --neutral-action-dark:   #6B7382;

    --bg:               #1A1A2E;
    --surface:          #16213E;
    --border:           #2D2D44;
    --text:             #E8EAF0;
    --text-muted:       #9AA0AD;

    --shadow-card:      0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .35);

    /* Slightly brighter status tints read better on the dark surface. */
    --status-ready-bg:     rgba(154, 160, 173, .18);
    --status-progress-bg:  rgba(92, 140, 217, .20);
    --status-review-bg:    rgba(245, 158, 11, .20);
    --status-blocked-bg:   rgba(239, 68, 68, .20);
    --status-done-bg:      rgba(16, 185, 129, .20);
    --prio-low-bg:         rgba(16, 185, 129, .20);
    --prio-medium-bg:      rgba(245, 158, 11, .20);
    --prio-high-bg:        rgba(239, 68, 68, .20);
    --prio-critical-bg:    rgba(185, 28, 28, .22);
}

/* ===== Modern UI Enhancement Variables ===== */
:root {
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-primary-light: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    --gradient-secondary: linear-gradient(135deg, #248b73 0%, #20b2aa 100%);
    --gradient-secondary-light: linear-gradient(135deg, rgba(36, 139, 115, 0.1) 0%, rgba(32, 178, 170, 0.1) 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-info-light: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-success-light: linear-gradient(135deg, rgba(17, 153, 142, 0.1) 0%, rgba(56, 239, 125, 0.1) 100%);
    --gradient-warning: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    --gradient-warning-light: linear-gradient(135deg, rgba(245, 175, 25, 0.1) 0%, rgba(241, 39, 17, 0.1) 100%);
    --gradient-error: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    --gradient-error-light: linear-gradient(135deg, rgba(255, 65, 108, 0.1) 0%, rgba(255, 75, 43, 0.1) 100%);
    --gradient-dark: linear-gradient(135deg, #2d2570 0%, #1a1a2e 100%);

    /* Glow Effects */
    --glow-primary: 0 4px 15px rgba(102, 126, 234, 0.3);
    --glow-secondary: 0 4px 15px rgba(36, 139, 115, 0.3);
    --glow-info: 0 4px 15px rgba(79, 172, 254, 0.3);
    --glow-success: 0 4px 15px rgba(56, 239, 125, 0.3);

    /* Modern Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.3s ease;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* ===== Bold Gradient Cards (Hero/Featured Sections) ===== */

.card-gradient-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--glow-primary) !important;
}

.card-gradient-primary .mud-text-secondary,
.card-gradient-primary .mud-typography-body2,
.card-gradient-primary .mud-typography-caption {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* CTA buttons on a bold gradient card. The card forces white text on ALL descendants,
   so a Surface (white) filled button ends up white-on-white and reads as a blank blob.
   Force a solid surface button with a primary-colored label so it clearly pops; keep
   secondary text/outlined buttons white-on-gradient. */
.card-gradient-primary .mud-button-filled,
.card-gradient-primary .mud-button-filled .mud-button-label {
    color: var(--mud-palette-primary) !important;
}
.card-gradient-primary .mud-button-filled {
    background-color: var(--mud-palette-surface) !important;
}
.card-gradient-primary .mud-button-filled:hover {
    background-color: rgba(255, 255, 255, 0.85) !important;
}
.card-gradient-primary .mud-button-outlined {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ===== Outlined "default" buttons — site-wide ===== */
/* MudBlazor's default outlined button is transparent with a fairly dark gray
   border. Give it a solid surface fill (white in light mode) and the lighter
   shared --border token so it reads as a clean, filled control. Colored
   outlined buttons (primary/secondary/etc.) are untouched. */
.mud-button-root.mud-button-outlined-default {
    background-color: var(--surface);
    border-color: var(--border);
}
.mud-button-root.mud-button-outlined-default:hover {
    background-color: var(--bg);
    border-color: var(--border);
}
/* On bold gradient cards the outline stays transparent (white text on gradient). */
.card-gradient-primary .mud-button-root.mud-button-outlined-default {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}

/* Ghost CTA buttons that sit directly on a colored/gradient hero (not wrapped in a
   .card-gradient-primary card). The outlined-default rule above gives them a white
   fill, which renders white-on-white against their white label. Force them fully
   transparent so the white text + border read against the gradient, in both the
   resting and hover states. */
.hero-ghost-btn.mud-button-root,
.hero-ghost-btn.mud-button-root:hover {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
}
.hero-ghost-btn.mud-button-root .mud-button-label {
    color: #fff !important;
}
.hero-ghost-btn.mud-button-root:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: #fff !important;
}

.card-gradient-secondary {
    background: var(--gradient-secondary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--glow-secondary) !important;
}

.card-gradient-info {
    background: var(--gradient-info) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--glow-info) !important;
}

.card-gradient-success {
    background: var(--gradient-success) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--glow-success) !important;
}

/* ===== Soft Gradient Cards (Stat Cards) ===== */

.card-gradient-primary-soft {
    background: var(--gradient-primary-light) !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.card-gradient-secondary-soft {
    background: var(--gradient-secondary-light) !important;
    border: 1px solid rgba(36, 139, 115, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.card-gradient-info-soft {
    background: var(--gradient-info-light) !important;
    border: 1px solid rgba(79, 172, 254, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.card-gradient-success-soft {
    background: var(--gradient-success-light) !important;
    border: 1px solid rgba(56, 239, 125, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.card-gradient-warning-soft {
    background: var(--gradient-warning-light) !important;
    border: 1px solid rgba(245, 175, 25, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.card-gradient-error-soft {
    background: var(--gradient-error-light) !important;
    border: 1px solid rgba(255, 65, 108, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

/* ===== Glass-morphism Card ===== */

html:not(.dark-mode) .card-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

html.dark-mode .card-glass {
    background: rgba(22, 33, 62, 0.85) !important;
    border: 1px solid rgba(45, 45, 68, 0.5) !important;
}

.card-glass {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ===== Gradient Border Cards ===== */

.card-border-gradient {
    position: relative !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    overflow: hidden !important;
}

html:not(.dark-mode) .card-border-gradient {
    background: white !important;
}

html.dark-mode .card-border-gradient {
    background: #16213e !important;
}

.card-border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ===== Color-coded Left Border Cards ===== */

.card-left-border-primary {
    border-left: 4px solid var(--mud-palette-primary) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.card-left-border-secondary {
    border-left: 4px solid var(--mud-palette-secondary) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.card-left-border-info {
    border-left: 4px solid var(--mud-palette-info) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.card-left-border-success {
    border-left: 4px solid #4caf50 !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.card-left-border-warning {
    border-left: 4px solid #ff9800 !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.card-left-border-error {
    border-left: 4px solid #f44336 !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* ===== Unified Stat Card (StatCard component) =====
   White surface + border + soft shadow + tinted icon chip. The ONE stat card
   used on Org Dashboard, My Dashboard, and Reports. */
.statcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    height: 100%;
}

.statcard--clickable {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.statcard--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--primary-rgb), .35);
}

.statcard-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.statcard-text { min-width: 0; }
.statcard-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
}
.statcard-value {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
    white-space: nowrap;
}
.statcard-sublabel {
    font-size: .8125rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.statcard-chip {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.statcard-chip .mud-icon-root { font-size: 1.4rem; color: inherit; }

/* Icon-chip tints — a soft wash of the metric's semantic color. */
.statcard-chip--primary,
.statcard-chip--info    { background: var(--status-progress-bg); color: var(--primary); }
.statcard-chip--success { background: var(--status-done-bg);     color: var(--status-done); }
.statcard-chip--warning { background: var(--status-review-bg);   color: var(--status-review); }
.statcard-chip--error   { background: var(--status-blocked-bg);  color: var(--status-blocked); }
.statcard-chip--secondary,
.statcard-chip--neutral { background: var(--status-ready-bg);    color: var(--status-ready); }
.statcard-chip--indigo  { background: rgba(45, 37, 111, .12);    color: var(--brand); }

/* ===== Enhanced Stat Cards (legacy — neutralized) =====
   Old pastel-gradient stat cards are being replaced by <StatCard>. Neutralize any
   lingering usage to a plain white surface so nothing ships with a pastel gradient. */
.stat-card-primary,
.stat-card-secondary,
.stat-card-info,
.stat-card-success,
.stat-card-warning,
.stat-card-error {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

.stat-card {
    border-radius: var(--radius-md) !important;
    transition: var(--transition-normal) !important;
    overflow: hidden !important;
}

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

/* Clickable stat card (kept for any existing usage) */
.stat-card-clickable {
    cursor: pointer;
}

/* Dashboard task-bucket lists (Overdue / In Progress / To Do / Completed) */
.dashboard-task-list-card {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-task-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.dashboard-task-list-body {
    max-height: 500px;
    overflow-y: auto;
}

.dashboard-task-list-body .mud-list-item {
    cursor: pointer;
}

.dashboard-task-list-body .mud-list-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.dark-mode .dashboard-task-list-body .mud-list-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}


/* Stat card color variants */
.stat-card-primary {
    background: linear-gradient(135deg, rgba(60, 108, 195, 0.08) 0%, rgba(60, 108, 195, 0.02) 100%) !important;
    border: 1px solid rgba(60, 108, 195, 0.15) !important;
}

.stat-card-secondary {
    background: linear-gradient(135deg, rgba(36, 139, 115, 0.08) 0%, rgba(36, 139, 115, 0.02) 100%) !important;
    border: 1px solid rgba(36, 139, 115, 0.15) !important;
}

.stat-card-info {
    background: linear-gradient(135deg, rgba(56, 139, 205, 0.08) 0%, rgba(56, 139, 205, 0.02) 100%) !important;
    border: 1px solid rgba(56, 139, 205, 0.15) !important;
}

.stat-card-success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.02) 100%) !important;
    border: 1px solid rgba(76, 175, 80, 0.15) !important;
}

.stat-card-warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(255, 152, 0, 0.02) 100%) !important;
    border: 1px solid rgba(255, 152, 0, 0.15) !important;
}

.stat-card-error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.08) 0%, rgba(244, 67, 54, 0.02) 100%) !important;
    border: 1px solid rgba(244, 67, 54, 0.15) !important;
}

/* Stat icon containers */
.stat-icon-container {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
}

.stat-icon-primary { background: linear-gradient(135deg, rgba(60, 108, 195, 0.15) 0%, rgba(60, 108, 195, 0.05) 100%); }
.stat-icon-secondary { background: linear-gradient(135deg, rgba(36, 139, 115, 0.15) 0%, rgba(36, 139, 115, 0.05) 100%); }
.stat-icon-info { background: linear-gradient(135deg, rgba(56, 139, 205, 0.15) 0%, rgba(56, 139, 205, 0.05) 100%); }
.stat-icon-success { background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%); }
.stat-icon-warning { background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.05) 100%); }
.stat-icon-error { background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.05) 100%); }

/* ===== Quick Action Cards ===== */

.quick-action-card {
    border-radius: var(--radius-md) !important;
    transition: var(--transition-normal) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
}

html:not(.dark-mode) .quick-action-card {
    background: white !important;
    border: 1px solid #e4e6ef !important;
}

html.dark-mode .quick-action-card {
    background: #16213e !important;
    border: 1px solid #2d2d44 !important;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-normal);
}

html:not(.dark-mode) .quick-action-card:hover {
    border-color: rgba(102, 126, 234, 0.3) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

html.dark-mode .quick-action-card:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px);
}

.quick-action-card:hover::before {
    transform: scaleX(1);
}

.quick-action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary-light);
    transition: var(--transition-normal);
}

.quick-action-card:hover .quick-action-icon {
    background: var(--gradient-primary);
}

.quick-action-card:hover .quick-action-icon .mud-icon-root {
    color: white !important;
}

/* ===== Card Hover Utility ===== */

.card-hover {
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

html:not(.dark-mode) .card-hover:hover {
    box-shadow: var(--shadow-lg) !important;
    background-color: #fafafa !important;
}

html.dark-mode .card-hover:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.3) !important;
    background-color: #1a1a2e !important;
}

/* ===== Kanban Column Gradient Header ===== */

.kanban-header-primary {
    border-top: 3px solid transparent !important;
    border-image: var(--gradient-primary) 1 !important;
}

.kanban-header-info {
    border-top: 3px solid transparent !important;
    border-image: var(--gradient-info) 1 !important;
}

.kanban-header-warning {
    border-top: 3px solid transparent !important;
    border-image: var(--gradient-warning) 1 !important;
}

.kanban-header-success {
    border-top: 3px solid transparent !important;
    border-image: var(--gradient-success) 1 !important;
}

/* ===== Tags (neutral / desaturated) =====
   Tags are a SEPARATE system from status. They get a quiet neutral chrome with the
   tag's color reduced to a small dot, so they never compete with the status scale. */
.lmb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    white-space: nowrap;
}
.lmb-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: 0 0 auto;
}

/* ===== Status / Priority badges =====
   One semantic scale reused wherever a status or priority appears. Pill on a soft
   tint of its semantic color. */
.lmb-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.3;
}
.lmb-badge--ready    { background: var(--status-ready-bg);    color: var(--status-ready); }
.lmb-badge--progress { background: var(--status-progress-bg); color: var(--primary); }
.lmb-badge--review   { background: var(--status-review-bg);   color: var(--status-review); }
.lmb-badge--blocked  { background: var(--status-blocked-bg);  color: var(--status-blocked); }
.lmb-badge--done     { background: var(--status-done-bg);     color: var(--status-done); }
.lmb-badge--prio-low      { background: var(--prio-low-bg);      color: var(--prio-low); }
.lmb-badge--prio-medium   { background: var(--prio-medium-bg);   color: var(--prio-medium); }
.lmb-badge--prio-high     { background: var(--prio-high-bg);     color: var(--prio-high); }
.lmb-badge--prio-critical { background: var(--prio-critical-bg); color: var(--prio-critical); }

/* ===== Task quick-view popup =====
   Modal opened from a kanban/list card click. Two columns: a main column (description +
   comments) and an editable metadata sidebar. Metadata renders from the in-memory TaskDto;
   description + comments are fetched on open. */
.quickview-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Appear instantly — drop the dialog's entrance scale/fade so the popup snaps open. */
.quickview-dialog,
.mud-dialog-container:has(> .quickview-dialog) {
    animation: none !important;
    transition: none !important;
}

/* Title bar: big click-to-copy #id, then the title with the project beneath it, then the
   helper + open/close actions on the right (the default corner X is disabled for this dialog). */
.quickview-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    width: 100%;
}
/* The #id doubles as the copy-to-clipboard control. */
.quickview-id {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 6px;
    transition: color .12s, background-color .12s;
}
.quickview-id:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.quickview-title-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.quickview-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.quickview-title-project {
    font-size: .78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quickview-title-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* Two-column body. The left (main) column is a static height set by the editor; the right
   (sidebar) rail is capped to the same height and scrolls internally when its content overflows. */
.quickview-layout {
    display: flex;
    gap: var(--space-6);
    align-items: stretch;
    flex-wrap: wrap;
    height: min(70vh, 720px);
}
.quickview-main {
    flex: 1 1 340px;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.quickview-side {
    flex: 0 0 280px;
    max-width: 320px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px; /* room for the scrollbar so content isn't clipped */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (max-width: 720px) {
    /* Stacked layout on narrow screens — let it grow naturally, no fixed height / inner scroll. */
    .quickview-layout { height: auto; }
    .quickview-main, .quickview-side { height: auto; overflow: visible; }
    .quickview-side { flex-basis: 100%; max-width: none; }
}
.quickview-side-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
/* Priority + Assignees share a row. */
.quickview-side-row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.quickview-side-row > .quickview-side-field { flex: 1 1 0; }
/* Priority pill in the sidebar reuses .kanban-pill-btn but wants to sit left-aligned, not stretch. */
.quickview-pill { align-self: flex-start; }
.quickview-status-inline { display: inline-flex; align-items: center; gap: 8px; }

/* Description editor fills the main column. TinyMCE's height is passed at init to match the
   column; this section grows to fill so the loading skeleton can fill it too. */
.quickview-desc-section {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.quickview-editor { width: 100%; margin-top: 4px; }

/* Sidebar action buttons sit left-aligned and hug their content rather than stretching. */
.quickview-side-btn { align-self: flex-start; text-transform: none; }
/* "Manage in full view" reads as a secondary link — right-aligned under the attachments. */
.quickview-manage-btn { align-self: flex-end; text-transform: none; }

/* Attachments: keep the drop-zone tight to its label and strip MudFileUpload's default margins
   (that stray margin was the "odd gap"). */
.quickview-attach-field .mud-file-upload { margin: 0; width: 100%; }
.quickview-attach-field .mud-input-control { margin: 0; }

/* Attachment download links. */
.quickview-attachments {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 8px;
    max-height: 180px;
    overflow-y: auto;
}
.quickview-attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font: inherit;
    font-size: .82rem;
}
.quickview-attachment:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); }
.quickview-attachment .mud-icon-root { flex: 0 0 auto; color: var(--text-muted); }
.quickview-attachment:hover .mud-icon-root { color: var(--primary); }
.quickview-attachment-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quickview-attachment-size {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--text-muted);
}

.quickview-status-chip {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    color: var(--chip-color);
    background: color-mix(in srgb, var(--chip-color) 14%, transparent);
    white-space: nowrap;
}
.quickview-progress {
    font-size: .78rem;
    color: var(--text-muted);
}
.quickview-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
}
.quickview-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
}
.quickview-value {
    font-size: .85rem;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    word-break: break-word;
}
.quickview-overdue { color: var(--status-blocked); font-weight: 600; }
.quickview-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.quickview-section { display: flex; flex-direction: column; }
.quickview-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quickview-spinner { color: var(--text-muted); }
/* Footer save-state sits on the left; the action buttons stay right-aligned. */
.quickview-savestate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: .8rem;
    color: var(--text-muted);
}
/* Collapse the footer entirely when it has no buttons/content (clean, saved state) so the
   save-status line isn't always sitting in the bottom-left. */
.quickview-dialog .mud-dialog-actions:not(:has(*)) {
    display: none;
}
.quickview-empty {
    font-size: .85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}
.quickview-description {
    font-size: .88rem;
    color: var(--text);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}
.quickview-description img { max-width: 100%; height: auto; }
.quickview-counts {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .85rem;
}
.quickview-counts span { display: inline-flex; align-items: center; gap: 4px; }

/* ===== Page Header (PageHeader component) =====
   One header pattern on every screen: optional breadcrumbs, h1 title (~30px/700),
   optional muted subtitle, optional leading icon, right-aligned action slot. */
.page-header { margin-bottom: var(--space-6); }

.page-header-breadcrumbs { margin-bottom: var(--space-2); }
.page-header-breadcrumbs .mud-breadcrumb-item a,
.page-header-breadcrumbs .mud-breadcrumb-item .mud-typography {
    color: var(--text-muted) !important;
    font-size: .85rem;
}
.page-header-breadcrumbs .mud-breadcrumb-item a:hover { color: var(--primary) !important; }

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.page-header-titles {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.page-header-icon { color: var(--primary); display: flex; align-items: center; }
.page-header-icon .mud-icon-root { font-size: 2rem; }
.page-header-heading { min-width: 0; }
.page-header-title {
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.page-header-title-suffix { color: var(--text-muted); font-weight: 500; }
.page-header-subtitle {
    color: var(--text-muted);
    font-size: .95rem;
    margin-top: 2px;
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ===== Button System =====
   Two variants only — primary (filled accent) and secondary (neutral outline) —
   plus danger (destructive). Color is NOT used to rank multiple actions; the
   primary/secondary split + layout does that. These rules normalize every button
   (Mud + native) to one radius, weight, and sentence case. */

/* Normalize all MudButtons: one radius, weight 600, sentence case (no ALL CAPS). */
.mud-button-root {
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* MudButtonGroup segmented controls (toolbar view-switchers, Day/Month, date nav, etc.).
   The global .mud-button-root radius above (border-radius !important) overrides MudBlazor's
   own corner-squaring, so every button in a group stayed fully rounded and the buttons
   overlapped by -1px into a cramped strip. Re-square the INNER corners (with !important to
   beat that rule) so a group reads as ONE clean segmented control: outer corners rounded,
   inner edges flush with a single shared divider. Outer corners keep var(--radius). */
.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:last-child),
.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:last-child) .mud-button-root {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:first-child),
.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* RTL mirror */
.mud-button-group-horizontal.mud-button-group-rtl > .mud-button-root:not(:last-child),
.mud-button-group-horizontal.mud-button-group-rtl > :not(:last-child) .mud-button-root {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.mud-button-group-horizontal.mud-button-group-rtl > .mud-button-root:not(:first-child),
.mud-button-group-horizontal.mud-button-group-rtl > :not(:first-child) .mud-button-root {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Segmented toggle (MudToggleGroup) — anchor it with a token border so both
   segments read as ONE unified control. The default (non-outlined) variant ships
   borderless, which looks unfinished on white surfaces (only the selected segment
   is visible). Selected segment keeps its accent fill; unselected reads neutral. */
.mud-toggle-group {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}
.mud-toggle-group > .mud-toggle-item {
    font-weight: 600;
}

/* Native button helpers (for the few non-Mud buttons + custom needs). */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg); }

.btn-danger {
    background: transparent;
    color: var(--status-blocked);
    border-color: transparent;
}
.btn-danger:hover { background: var(--status-blocked-bg); }

/* ===== Enhanced Input Focus ===== */

.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

/* ===== Comprehensive Dark Mode Overrides ===== */
/* Catches inline styles and embedded <style> blocks across pages */

html.dark-mode .mud-drop-zone {
    background-color: #1a1a2e !important;
}

html.dark-mode .mud-drop-item-dragging {
    background-color: #16213e !important;
}

/* Kanban task cards with inline background-color: white */
html.dark-mode .mud-card[style*="background-color: white"],
html.dark-mode .mud-card[style*="background-color:white"] {
    background-color: #16213e !important;
}

/* Time tracker compact inputs */
html.dark-mode .compact-input .mud-input-root {
    background-color: #1a1a2e !important;
}

/* Onboarding guide cards */
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background-color: white"] {
    background: #16213e !important;
}

/* MudPaper and MudCard default backgrounds */
html.dark-mode .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    background-color: #16213e !important;
}

/* Table styling */
html.dark-mode .mud-table-container {
    background-color: #16213e !important;
}

html.dark-mode .mud-table-head .mud-table-cell {
    background-color: #0f3460 !important;
}

html.dark-mode .mud-table-body .mud-table-row {
    background-color: #16213e !important;
}

html.dark-mode .mud-table-body .mud-table-row:hover {
    background-color: #1a1a2e !important;
}

html.dark-mode .mud-table-foot .mud-table-cell {
    background-color: #0f3460 !important;
}

/* Select / dropdown */
html.dark-mode .mud-popover .mud-list {
    background-color: #16213e !important;
}

html.dark-mode .mud-list-item:hover {
    background-color: #1a1a2e !important;
}

/* Dialog */
html.dark-mode .mud-dialog {
    background-color: #16213e !important;
}

/* Chips */
html.dark-mode .mud-chip.mud-chip-default {
    background-color: #2d2d44 !important;
}

/* Alerts keep their severity colors — just darken slightly */
html.dark-mode .mud-alert-standard-normal {
    background-color: #1a1a2e !important;
}

/* Nav menu items */
html.dark-mode .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Autocomplete dropdown */
html.dark-mode .mud-autocomplete .mud-popover-paper {
    background-color: #16213e !important;
}

/* Menu popover */
html.dark-mode .mud-menu .mud-popover-paper,
html.dark-mode .mud-popover-paper {
    background-color: #16213e !important;
}

/* Skeleton loaders */
html.dark-mode .mud-skeleton {
    background-color: #2d2d44 !important;
}

/* Timeline sticky corners */
html.dark-mode .tl-sticky-corner {
    background: #16213e !important;
}

/* Chat section headers */
html.dark-mode .section-header {
    background-color: #0f3460 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-mode .mud-list-subheader {
    background-color: #0f3460 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Smooth transition for theme switching */
html.dark-mode *,
html:not(.dark-mode) * {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ===== Attachment thumbnails & image viewer ===== */

/* Leading visual for an attachment row: a square that holds either a file-type icon or an
   image thumbnail. Fixed size so the row height never jumps when a thumbnail streams in. */
.attachment-thumb {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg);
    border: 1px solid var(--border);
}

.attachment-thumb--image {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.attachment-thumb--image:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

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

/* Faint pulsing icon shown while the real thumbnail is still loading. */
.attachment-thumb__placeholder {
    opacity: 0.35;
    animation: attachment-thumb-pulse 1.2s ease-in-out infinite;
}

@keyframes attachment-thumb-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.5; }
}

/* Attachment file name: single line with ellipsis; image names read as clickable links. */
.attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-name--link {
    cursor: pointer;
    color: var(--primary);
}

.attachment-name--link:hover {
    text-decoration: underline;
}

/* Image viewer modal body. */
.image-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: 75vh;
}

.image-viewer__img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 6px;
}

.image-viewer__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}