/* /Components/AllocationEditor.razor.rz.scp.css */
.allocation-editor[b-ihlmw5l6o7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.allocation-header[b-ihlmw5l6o7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.allocation-label[b-ihlmw5l6o7] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.allocation-override-badge[b-ihlmw5l6o7] {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--text-on-primary);
    font-weight: 600;
}

.allocation-controls[b-ihlmw5l6o7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.allocation-input[b-ihlmw5l6o7] {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: right;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.allocation-input:focus[b-ihlmw5l6o7] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.allocation-unit[b-ihlmw5l6o7] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.allocation-reset[b-ihlmw5l6o7] {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
}

.allocation-reset:hover[b-ihlmw5l6o7] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}
/* /Components/BudgetMeter.razor.rz.scp.css */
.budget-meter[b-cm994k82uf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.budget-meter-header[b-cm994k82uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.budget-meter-label[b-cm994k82uf] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.budget-meter-status[b-cm994k82uf] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.budget-meter-status.on-track[b-cm994k82uf] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.budget-meter-status.warning[b-cm994k82uf] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.budget-meter-status.critical[b-cm994k82uf] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.budget-meter-status.overrun[b-cm994k82uf] {
    background: var(--status-error-glow);
    color: var(--status-error);
}

.budget-meter-bar[b-cm994k82uf] {
    height: 8px;
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
    overflow: hidden;
}

.budget-meter-fill[b-cm994k82uf] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.budget-meter-fill.on-track[b-cm994k82uf] { background: var(--mud-palette-success); }
.budget-meter-fill.warning[b-cm994k82uf] { background: var(--mud-palette-warning); }
.budget-meter-fill.critical[b-cm994k82uf] { background: var(--mud-palette-error); }
.budget-meter-fill.overrun[b-cm994k82uf] { background: var(--status-error); }

.budget-meter-details[b-cm994k82uf] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.budget-spent[b-cm994k82uf] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.budget-total[b-cm994k82uf] {
    color: var(--mud-palette-text-secondary);
}

.budget-forecast[b-cm994k82uf] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}
/* /Components/BulkActionToolbar.razor.rz.scp.css */
.bk-bar[b-zfr7trbdk2] {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    animation: bk-float-in-b-zfr7trbdk2 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bk-float-in-b-zfr7trbdk2 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.bk-bar-inner[b-zfr7trbdk2] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.bk-selection[b-zfr7trbdk2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 4px;
}

.bk-selection-ring[b-zfr7trbdk2] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    flex-shrink: 0;
}

.bk-selection-info[b-zfr7trbdk2] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bk-selection-count[b-zfr7trbdk2] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.bk-selection-label[b-zfr7trbdk2] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.bk-sep[b-zfr7trbdk2] {
    width: 1px;
    height: 24px;
    background: var(--border-default);
    margin: 0 4px;
    flex-shrink: 0;
}

.bk-actions[b-zfr7trbdk2] {
    display: flex;
    gap: 2px;
}

/* TARGET: buttons from ChildContent — unscoped global selector */
.bk-actions button[b-zfr7trbdk2],
.bk-actions .bulk-btn[b-zfr7trbdk2] {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.01em;
}

.bk-actions button:hover[b-zfr7trbdk2],
.bk-actions .bulk-btn:hover[b-zfr7trbdk2] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.bk-actions button:active[b-zfr7trbdk2],
.bk-actions .bulk-btn:active[b-zfr7trbdk2] {
    background: var(--bg-subtle);
    transform: scale(0.97);
}

.bk-deselect[b-zfr7trbdk2] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-disabled);
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
    margin-left: 2px;
}

.bk-deselect:hover[b-zfr7trbdk2] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

@media (max-width: 640px) {
    .bk-bar[b-zfr7trbdk2] {
        left: 8px;
        right: 8px;
        bottom: 72px; /* above bottom nav */
        transform: none;
    }

    @keyframes bk-float-in-b-zfr7trbdk2 {
        from {
            opacity: 0;
            transform: translateY(16px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .bk-bar-inner[b-zfr7trbdk2] {
        width: 100%;
        justify-content: space-between;
        padding: 4px 6px;
        border-radius: 12px;
    }

    .bk-actions[b-zfr7trbdk2] {
        flex-wrap: wrap;
        gap: 1px;
    }

    .bk-actions button[b-zfr7trbdk2],
    .bk-actions .bulk-btn[b-zfr7trbdk2] {
        height: 28px;
        padding: 0 10px;
        font-size: 11.5px;
    }

    .bk-selection-count[b-zfr7trbdk2] {
        font-size: 13px;
    }

    .bk-selection-label[b-zfr7trbdk2] {
        display: none;
    }

    .bk-sep[b-zfr7trbdk2] {
        margin: 0 2px;
        height: 20px;
    }
}
/* /Components/CapacityMeter.razor.rz.scp.css */
.capacity-meter[b-vy7448xa85] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.capacity-meter-header[b-vy7448xa85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.capacity-meter-label[b-vy7448xa85] {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.capacity-meter-value[b-vy7448xa85] {
    font-weight: 600;
    font-size: 0.8rem;
}

.capacity-meter-value.optimal[b-vy7448xa85] { color: var(--mud-palette-success); }
.capacity-meter-value.high[b-vy7448xa85] { color: var(--mud-palette-warning); }
.capacity-meter-value.overloaded[b-vy7448xa85] { color: var(--mud-palette-error); }
.capacity-meter-value.moderate[b-vy7448xa85] { color: var(--mud-palette-info); }
.capacity-meter-value.low[b-vy7448xa85] { color: var(--mud-palette-text-secondary); }

.capacity-meter-bar[b-vy7448xa85] {
    position: relative;
    height: 6px;
    background: var(--mud-palette-background-grey);
    border-radius: 3px;
    overflow: visible;
}

.capacity-meter-fill[b-vy7448xa85] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.capacity-meter-fill.optimal[b-vy7448xa85] { background: var(--mud-palette-success); }
.capacity-meter-fill.high[b-vy7448xa85] { background: var(--mud-palette-warning); }
.capacity-meter-fill.overloaded[b-vy7448xa85] { background: var(--mud-palette-error); }
.capacity-meter-fill.moderate[b-vy7448xa85] { background: var(--mud-palette-info); }
.capacity-meter-fill.low[b-vy7448xa85] { background: var(--mud-palette-text-disabled); }

.capacity-meter-overflow[b-vy7448xa85] {
    position: absolute;
    top: -1px;
    right: 0;
    height: calc(100% + 2px);
    background: var(--mud-palette-error);
    opacity: 0.4;
    border-radius: 0 3px 3px 0;
}

.capacity-meter-subtitle[b-vy7448xa85] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.team-mode .capacity-meter-bar[b-vy7448xa85] {
    height: 8px;
}
/* /Components/CommandPalette.razor.rz.scp.css */
.cmd-palette-overlay[b-rhoohsu74q] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.cmd-palette[b-rhoohsu74q] {
    width: 600px;
    max-width: 90vw;
    max-height: 480px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cmd-palette-input-wrapper[b-rhoohsu74q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.cmd-palette-search-icon[b-rhoohsu74q] {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cmd-palette-input[b-rhoohsu74q] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
}

.cmd-palette-input[b-rhoohsu74q]::placeholder {
    color: var(--text-disabled);
}

.cmd-palette-spinner[b-rhoohsu74q] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent-secondary);
    border-radius: 50%;
    animation: cmd-spin-b-rhoohsu74q 0.6s linear infinite;
}

@keyframes cmd-spin-b-rhoohsu74q {
    to {
        transform: rotate(360deg);
    }
}

.cmd-palette-esc[b-rhoohsu74q] {
    background: var(--bg-subtle);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
    border: 1px solid var(--border-default);
}

.cmd-palette-results[b-rhoohsu74q] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.cmd-palette-section[b-rhoohsu74q] {
    padding: 4px 0;
}

.cmd-palette-section-title[b-rhoohsu74q] {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cmd-palette-item[b-rhoohsu74q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.cmd-palette-item:hover[b-rhoohsu74q],
.cmd-palette-item.selected[b-rhoohsu74q] {
    background: var(--accent-primary-muted);
}

.cmd-palette-item-icon[b-rhoohsu74q] {
    width: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cmd-icon-project[b-rhoohsu74q]::before {
    content: "\01F4C1";
}

.cmd-icon-workitem[b-rhoohsu74q]::before {
    content: "\01F4CB";
}

.cmd-icon-user[b-rhoohsu74q]::before {
    content: "\01F464";
}

.cmd-icon-alert[b-rhoohsu74q]::before {
    content: "\02691";
}

.cmd-palette-item-content[b-rhoohsu74q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmd-palette-item-text[b-rhoohsu74q] {
    flex: 1;
    color: var(--text-primary);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-wi-id[b-rhoohsu74q] {
    color: var(--accent-secondary);
    font-weight: 500;
}

.cmd-palette-item-meta[b-rhoohsu74q] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.cmd-palette-item-hint[b-rhoohsu74q] {
    font-size: 12px;
    color: var(--text-disabled);
    margin-left: auto;
}

.cmd-palette-item-badge[b-rhoohsu74q] {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    font-weight: 500;
}

.cmd-sev-critical[b-rhoohsu74q] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.cmd-sev-warning[b-rhoohsu74q] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.cmd-sev-info[b-rhoohsu74q] {
    background: var(--status-info-muted);
    color: var(--accent-primary);
}

.cmd-palette-item-category[b-rhoohsu74q] {
    font-size: 11.5px;
    color: var(--text-disabled);
    margin-left: auto;
    flex-shrink: 0;
}

.cmd-palette-empty[b-rhoohsu74q] {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.cmd-palette-footer[b-rhoohsu74q] {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11.5px;
    color: var(--text-disabled);
}

.cmd-palette-footer kbd[b-rhoohsu74q] {
    background: var(--bg-subtle);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    border: 1px solid var(--border-default);
    font-family: inherit;
}

@media (max-width: 640px) {
    .cmd-palette-overlay[b-rhoohsu74q] {
        padding-top: 10vh;
        padding: 12px;
        padding-top: 10vh;
        align-items: flex-start;
    }

    .cmd-palette[b-rhoohsu74q] {
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 14px;
    }

    .cmd-palette-input-wrapper[b-rhoohsu74q] {
        padding: 12px 14px;
    }

    .cmd-palette-input[b-rhoohsu74q] {
        font-size: 16px; /* prevent iOS zoom */
    }

    .cmd-palette-esc[b-rhoohsu74q] {
        display: none;
    }

    .cmd-palette-item[b-rhoohsu74q] {
        padding: 10px 14px;
    }

    .cmd-palette-footer[b-rhoohsu74q] {
        display: none;
    }

    .cmd-palette-item-hint[b-rhoohsu74q] {
        display: none;
    }
}
/* /Components/CompletenessScoreBadge.razor.rz.scp.css */
.completeness-badge[b-n7nop47cs2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.completeness-excellent[b-n7nop47cs2] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.completeness-good[b-n7nop47cs2] {
    background: var(--status-info-muted, rgba(96, 165, 250, 0.12));
    color: var(--accent-primary);
}

.completeness-warning[b-n7nop47cs2] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.completeness-critical[b-n7nop47cs2] {
    background: var(--status-error-muted);
    color: var(--status-error);
}
/* /Components/CostBreakdown.razor.rz.scp.css */
.cost-breakdown[b-hvmjvgthe4] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.cost-breakdown-header[b-hvmjvgthe4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cost-breakdown-title[b-hvmjvgthe4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cost-breakdown-total[b-hvmjvgthe4] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.cost-breakdown-table[b-hvmjvgthe4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.cost-breakdown-table th[b-hvmjvgthe4] {
    padding: 8px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cost-breakdown-table td[b-hvmjvgthe4] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.cost-breakdown-table tbody tr:last-child td[b-hvmjvgthe4] {
    border-bottom: none;
}

.cost-breakdown-table tbody tr:hover[b-hvmjvgthe4] {
    background: var(--mud-palette-background-grey);
}

.text-right[b-hvmjvgthe4] {
    text-align: right !important;
}

.cost-amount[b-hvmjvgthe4] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cost-breakdown-empty[b-hvmjvgthe4] {
    padding: 24px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}
/* /Components/DateRangeSelector.razor.rz.scp.css */
/* =============================================
   DATE RANGE SELECTOR — Precision Instrument
   Dialog-based (showModal top layer)
   Design: Refined, layered depth, theme-aware accent
   ============================================= */

.drs[b-ao0kc8igcp] {
    position: relative;
    display: inline-flex;
}

/* ──────────── Trigger Button ──────────── */
.drs-trigger[b-ao0kc8igcp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 11px;
    background: var(--bg-track);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
}

.drs-trigger[b-ao0kc8igcp]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--accent-primary-muted), transparent 40%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: -1;
}

.drs-trigger:hover[b-ao0kc8igcp] {
    border-color: var(--accent-primary-border);
    background: var(--accent-primary-subtle);
}

.drs-trigger:hover[b-ao0kc8igcp]::before {
    opacity: 1;
}

.drs-icon[b-ao0kc8igcp] {
    width: 14px;
    height: 14px;
    color: var(--accent-primary);
    flex-shrink: 0;
    opacity: 0.7;
}

.drs-label[b-ao0kc8igcp] {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.drs-chevron[b-ao0kc8igcp] {
    width: 11px;
    height: 11px;
    color: var(--text-disabled);
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.drs-chevron.open[b-ao0kc8igcp] {
    transform: rotate(180deg);
}

/* ──────────── Dialog (top layer) ──────────── */
[b-ao0kc8igcp] .drs-dialog {
    border: none;
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    background: transparent;
    overflow: visible;
    position: fixed;
    top: 8vh;
    left: 0;
    right: 0;
    width: 360px;
    margin-inline: auto;
    outline: none;
}

[b-ao0kc8igcp] .drs-dialog::backdrop {
    background: var(--bg-overlay);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

/* ──────────── Panel Container ──────────── */
[b-ao0kc8igcp] .drs-panel {
    position: relative;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
    border: 1px solid var(--bg-subtle);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px var(--bg-row-hover),
        0 32px 80px -16px rgba(0, 0, 0, 0.7),
        0 0 120px -40px var(--accent-primary-subtle);
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Subtle top accent line */
[b-ao0kc8igcp] .drs-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary-border), var(--accent-secondary-muted), transparent);
    border-radius: 1px;
}

/* Mobile drag handle */
[b-ao0kc8igcp] .drs-handle {
    display: none;
}

/* ──────────── Panel Header ──────────── */
[b-ao0kc8igcp] .drs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

[b-ao0kc8igcp] .drs-header-label {
    font-family: var(--font-display, 'Instrument Sans', system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

[b-ao0kc8igcp] .drs-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-disabled);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

[b-ao0kc8igcp] .drs-close-btn svg {
    width: 14px;
    height: 14px;
}

[b-ao0kc8igcp] .drs-close-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* ──────────── Preset Chips ──────────── */
[b-ao0kc8igcp] .drs-chips {
    display: flex;
    gap: 6px;
}

[b-ao0kc8igcp] .drs-chip {
    flex: 1;
    padding: 8px 0;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-row-hover);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-align: center;
    position: relative;
}

[b-ao0kc8igcp] .drs-chip:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[b-ao0kc8igcp] .drs-chip.active {
    background: var(--accent-primary-muted);
    border-color: var(--accent-primary-border);
    color: var(--accent-primary);
    font-weight: 600;
    box-shadow: 0 0 16px -4px var(--accent-primary-hover);
}

/* ──────────── Divider ──────────── */
[b-ao0kc8igcp] .drs-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    margin: 16px 0;
}

/* ──────────── Section Label ──────────── */
[b-ao0kc8igcp] .drs-section-label {
    font-family: var(--font-display, 'Instrument Sans', system-ui, sans-serif);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

/* ──────────── Calendar ──────────── */
[b-ao0kc8igcp] .drs-calendar {
    user-select: none;
    background: var(--bg-row-hover);
    border: 1px solid var(--bg-track);
    border-radius: 14px;
    padding: 14px;
}

/* Month Navigation */
[b-ao0kc8igcp] .drs-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

[b-ao0kc8igcp] .drs-nav-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-disabled);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

[b-ao0kc8igcp] .drs-nav-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[b-ao0kc8igcp] .drs-nav-btn svg {
    width: 14px;
    height: 14px;
}

[b-ao0kc8igcp] .drs-month-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

[b-ao0kc8igcp] .drs-month-name {
    font-family: var(--font-display, 'Instrument Sans', system-ui, sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

[b-ao0kc8igcp] .drs-year {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-disabled);
    letter-spacing: 0.02em;
}

/* Weekday Headers */
[b-ao0kc8igcp] .drs-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--bg-track);
    padding-bottom: 8px;
}

[b-ao0kc8igcp] .drs-weekdays span {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0;
}

/* Day Grid */
[b-ao0kc8igcp] .drs-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding-top: 4px;
}

[b-ao0kc8igcp] .drs-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    transition: all 0.12s ease;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

[b-ao0kc8igcp] .drs-day-num {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-ao0kc8igcp] .drs-day:not(.disabled):not(.outside):hover .drs-day-num {
    background: var(--bg-subtle);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Outside month */
[b-ao0kc8igcp] .drs-day.outside {
    color: var(--text-disabled);
    opacity: 0.35;
}

/* Today marker */
[b-ao0kc8igcp] .drs-day.today .drs-day-num {
    color: var(--accent-primary);
    font-weight: 600;
}

[b-ao0kc8igcp] .drs-day.today:not(.edge) .drs-day-num::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-primary-border-emphasis);
}

/* Disabled (future dates) */
[b-ao0kc8igcp] .drs-day.disabled {
    cursor: not-allowed;
    color: var(--text-disabled);
    opacity: 0.25;
}

/* In-range highlight band */
[b-ao0kc8igcp] .drs-day.in-range {
    background: var(--accent-primary-subtle);
}

[b-ao0kc8igcp] .drs-day.in-range .drs-day-num {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Range start — left-open band */
[b-ao0kc8igcp] .drs-day.range-start {
    background: linear-gradient(90deg, transparent 50%, var(--accent-primary-subtle) 50%);
    border-radius: 0;
}

/* Range end — right-open band */
[b-ao0kc8igcp] .drs-day.range-end {
    background: linear-gradient(90deg, var(--accent-primary-subtle) 50%, transparent 50%);
    border-radius: 0;
}

/* When start == end */
[b-ao0kc8igcp] .drs-day.range-start.range-end {
    background: transparent;
}

/* Edge dots (selected start/end) */
[b-ao0kc8igcp] .drs-day.edge .drs-day-num {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--text-on-primary);
    font-weight: 600;
    box-shadow:
        0 0 20px -4px var(--accent-primary-border-emphasis),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

[b-ao0kc8igcp] .drs-day.edge:hover .drs-day-num {
    transform: scale(1.08);
    box-shadow:
        0 0 24px -4px var(--accent-primary-border-emphasis),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ──────────── Selection Summary ──────────── */
[b-ao0kc8igcp] .drs-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 14px;
    background: var(--accent-primary-subtle);
    border: 1px solid var(--accent-primary-subtle);
    border-radius: 12px;
}

[b-ao0kc8igcp] .drs-summary-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-ao0kc8igcp] .drs-summary-date {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-disabled);
    padding: 4px 10px;
    background: var(--bg-row-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

[b-ao0kc8igcp] .drs-summary-date.set {
    color: var(--accent-primary);
    background: var(--accent-primary-subtle);
    border-color: var(--accent-primary-muted);
}

[b-ao0kc8igcp] .drs-summary-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-disabled);
    flex-shrink: 0;
}

[b-ao0kc8igcp] .drs-summary-days {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: var(--accent-primary-subtle);
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ──────────── Action Buttons ──────────── */
[b-ao0kc8igcp] .drs-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

[b-ao0kc8igcp] .drs-action-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 12px;
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    letter-spacing: 0.01em;
}

[b-ao0kc8igcp] .drs-action-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

[b-ao0kc8igcp] .drs-action-clear {
    background: var(--bg-row-hover);
    border: 1px solid var(--bg-subtle) !important;
    color: var(--text-muted);
}

[b-ao0kc8igcp] .drs-action-clear:hover:not(:disabled) {
    background: var(--border-subtle);
    border-color: var(--border-default) !important;
    color: var(--text-primary);
}

[b-ao0kc8igcp] .drs-action-apply {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--text-on-primary);
    box-shadow: 0 4px 16px -4px var(--accent-primary-border);
    position: relative;
    overflow: hidden;
}

[b-ao0kc8igcp] .drs-action-apply::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

[b-ao0kc8igcp] .drs-action-apply:hover:not(:disabled) {
    box-shadow: 0 6px 24px -4px var(--accent-primary-border-emphasis);
    transform: translateY(-1px);
}

[b-ao0kc8igcp] .drs-action-apply:hover:not(:disabled)::before {
    opacity: 1;
}

[b-ao0kc8igcp] .drs-action-apply:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px -2px var(--accent-primary-border);
}

/* ============================================
   RESPONSIVE — MOBILE (<=640px)
   ============================================ */
@media (max-width: 640px) {
    .drs-trigger[b-ao0kc8igcp] {
        height: 34px;
        padding: 0 10px 0 8px;
        gap: 6px;
    }

    .drs-label[b-ao0kc8igcp] {
        font-size: 12px;
    }

    .drs-icon[b-ao0kc8igcp] {
        width: 13px;
        height: 13px;
    }

    /* Bottom sheet */
    [b-ao0kc8igcp] .drs-dialog {
        top: auto;
        bottom: 0;
        width: 100%;
    }

    [b-ao0kc8igcp] .drs-panel {
        border-radius: 24px 24px 0 0;
        padding: 8px 20px 28px;
        max-height: 88vh;
    }

    [b-ao0kc8igcp] .drs-panel::before {
        left: 32px;
        right: 32px;
    }

    /* Show drag handle */
    [b-ao0kc8igcp] .drs-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 6px;
    }

    [b-ao0kc8igcp] .drs-handle span {
        width: 40px;
        height: 4px;
        background: var(--border-default);
        border-radius: 2px;
    }

    /* Chips — larger touch targets */
    [b-ao0kc8igcp] .drs-chip {
        padding: 11px 0;
        font-size: 0.875rem;
        border-radius: 12px;
    }

    /* Calendar — larger cells */
    [b-ao0kc8igcp] .drs-calendar {
        padding: 16px;
        border-radius: 16px;
    }

    [b-ao0kc8igcp] .drs-day-num {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 0.875rem;
    }

    [b-ao0kc8igcp] .drs-nav-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    [b-ao0kc8igcp] .drs-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    [b-ao0kc8igcp] .drs-month-name {
        font-size: 1.125rem;
    }

    [b-ao0kc8igcp] .drs-weekdays span {
        padding: 6px 0;
        font-size: 0.6875rem;
    }

    /* Summary — stacked */
    [b-ao0kc8igcp] .drs-summary {
        flex-direction: column;
        gap: 6px;
        padding: 14px;
    }

    [b-ao0kc8igcp] .drs-summary-date {
        font-size: 0.8125rem;
        padding: 5px 12px;
    }

    /* Actions */
    [b-ao0kc8igcp] .drs-action-btn {
        padding: 14px 16px;
        font-size: 0.9375rem;
        border-radius: 14px;
    }
}

/* ============================================
   TABLET
   ============================================ */
@media (min-width: 641px) and (max-width: 768px) {
    [b-ao0kc8igcp] .drs-dialog {
        width: 340px;
    }

    [b-ao0kc8igcp] .drs-day-num {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   TOUCH DEVICE
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .drs-trigger[b-ao0kc8igcp] {
        min-height: 40px;
    }

    [b-ao0kc8igcp] .drs-nav-btn {
        min-width: 40px;
        min-height: 40px;
    }

    [b-ao0kc8igcp] .drs-chip {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    [b-ao0kc8igcp] .drs-day-num {
        min-width: 40px;
        min-height: 40px;
    }

    [b-ao0kc8igcp] .drs-action-btn {
        min-height: 48px;
    }

    [b-ao0kc8igcp] .drs-close-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .drs-trigger:hover[b-ao0kc8igcp] {
        background: var(--bg-track);
        border-color: var(--border-default);
    }

    [b-ao0kc8igcp] .drs-day:not(.disabled):not(.outside):hover .drs-day-num {
        background: transparent;
        transform: none;
    }
}
/* /Components/DimensionBar.razor.rz.scp.css */
.dimension-bar-row[b-bqd5isesc6] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.dimension-label[b-bqd5isesc6] {
    width: 140px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.dimension-bar-track[b-bqd5isesc6] {
    flex: 1;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.dimension-bar-fill[b-bqd5isesc6] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.bar-excellent[b-bqd5isesc6] { background: var(--status-success); }
.bar-good[b-bqd5isesc6] { background: var(--accent-primary); }
.bar-warning[b-bqd5isesc6] { background: var(--status-warning); }
.bar-critical[b-bqd5isesc6] { background: var(--status-error); }

.dimension-score[b-bqd5isesc6] {
    width: 40px;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .dimension-label[b-bqd5isesc6] {
        width: 100px;
        font-size: 0.75rem;
    }

    .dimension-bar-row[b-bqd5isesc6] {
        gap: 8px;
    }

    .dimension-score[b-bqd5isesc6] {
        font-size: 0.75rem;
        width: 36px;
    }
}
/* /Components/LanguageSelector.razor.rz.scp.css */
.lang-selector-wrap[b-utufsafihl] {
    position: relative;
    display: flex;
    align-items: center;
}

.lang-toggle-btn[b-utufsafihl] {
    transition: transform var(--duration-fast) ease;
}

.lang-toggle-btn:hover[b-utufsafihl] {
    transform: scale(1.08);
}

.lang-flag-img[b-utufsafihl] {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.lang-dropdown[b-utufsafihl] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    animation: lang-dropdown-in-b-utufsafihl 150ms ease;
}

@keyframes lang-dropdown-in-b-utufsafihl {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-option[b-utufsafihl] {
    display: grid;
    grid-template-columns: 20px 1fr 14px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.lang-option:hover[b-utufsafihl] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.lang-option.active[b-utufsafihl] {
    color: var(--accent-primary);
}

.lang-check[b-utufsafihl] {
    color: var(--accent-primary);
}

.lang-backdrop[b-utufsafihl] {
    position: fixed;
    inset: 0;
    z-index: 999;
}
/* /Components/LeaveImpactChip.razor.rz.scp.css */
.leave-impact-chip[b-fewlmqd3aw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning-darken);
    white-space: nowrap;
    cursor: default;
}

.leave-days[b-fewlmqd3aw] {
    font-weight: 600;
}

.leave-next[b-fewlmqd3aw] {
    opacity: 0.85;
}
/* /Components/ProjectCompletenessPanel.razor.rz.scp.css */
.completeness-layout[b-fpj5qca80b] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-4);
    align-items: start;
}

.completeness-radar[b-fpj5qca80b] {
    min-width: 0;
}

.completeness-details[b-fpj5qca80b] {
    min-width: 0;
}

.completeness-dimensions[b-fpj5qca80b] {
    padding: 8px 0;
}

.completeness-issues[b-fpj5qca80b] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
}

.completeness-issue-row[b-fpj5qca80b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8125rem;
}

.issue-severity[b-fpj5qca80b] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.severity-error[b-fpj5qca80b] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.severity-warning[b-fpj5qca80b] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.issue-field[b-fpj5qca80b] {
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .completeness-layout[b-fpj5qca80b] {
        grid-template-columns: 1fr;
    }

    .completeness-radar[b-fpj5qca80b] {
        max-width: 360px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .completeness-issue-row[b-fpj5qca80b] {
        font-size: 0.75rem;
    }
}
/* /Components/RecommendationCard.razor.rz.scp.css */
.recommendations-section[b-3la8mxtxp6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recommendations-header[b-3la8mxtxp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.recommendations-title[b-3la8mxtxp6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.recommendations-count[b-3la8mxtxp6] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--text-on-primary);
}

.recommendation-card[b-3la8mxtxp6] {
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid transparent;
    background: var(--mud-palette-surface);
}

.recommendation-card.priority-high[b-3la8mxtxp6] {
    border-left-color: var(--mud-palette-error);
    background: rgba(244, 67, 54, 0.04);
}

.recommendation-card.priority-medium[b-3la8mxtxp6] {
    border-left-color: var(--mud-palette-warning);
    background: rgba(255, 152, 0, 0.04);
}

.recommendation-card.priority-low[b-3la8mxtxp6] {
    border-left-color: var(--mud-palette-info);
    background: rgba(33, 150, 243, 0.04);
}

.recommendation-type-badge[b-3la8mxtxp6] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.recommendation-title[b-3la8mxtxp6] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.recommendation-description[b-3la8mxtxp6] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.recommendation-project[b-3la8mxtxp6] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled);
    margin-top: 4px;
}
/* /Components/RoadmapTimeline.razor.rz.scp.css */
/* ── Container ────────────────────────────────────────────────── */
.roadmap-container[b-rzhkdp4hpr] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
    overflow-x: auto;
    position: relative;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.tl-toolbar[b-rzhkdp4hpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tl-depth-selector[b-rzhkdp4hpr] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tl-depth-label[b-rzhkdp4hpr] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-right: 4px;
}

.tl-depth-btn[b-rzhkdp4hpr] {
    padding: 4px 10px;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.73rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tl-depth-btn.active[b-rzhkdp4hpr] {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.tl-depth-btn:hover:not(.active)[b-rzhkdp4hpr] {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.tl-toolbar-actions[b-rzhkdp4hpr] {
    display: flex;
    gap: 4px;
}

.tl-toolbar-btn[b-rzhkdp4hpr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.73rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tl-toolbar-btn:hover[b-rzhkdp4hpr] {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

/* ── Column Headers ───────────────────────────────────────────── */
.roadmap-header[b-rzhkdp4hpr] {
    display: grid;
    gap: 0;
    border-bottom: 2px solid var(--border-primary);
    padding-bottom: 8px;
    margin-bottom: 0;
    min-width: fit-content;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-surface);
}

.lane-label-header[b-rzhkdp4hpr] {
    /* spacer for left label column */
}

.month-header[b-rzhkdp4hpr] {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 8px;
    white-space: nowrap;
}

/* ── Project Lane Header ──────────────────────────────────────── */
.project-lane-header[b-rzhkdp4hpr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 6px;
    border-top: 1px solid var(--border-primary);
    margin-top: 4px;
    min-width: fit-content;
}

.project-lane-header:first-of-type[b-rzhkdp4hpr] {
    border-top: none;
    margin-top: 0;
}

.project-lane-abbr[b-rzhkdp4hpr] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--accent-primary);
    color: white;
    text-transform: uppercase;
    flex-shrink: 0;
}

.project-lane-name[b-rzhkdp4hpr] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.project-lane-count[b-rzhkdp4hpr] {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* ── Team Lane Row (collapsible) ──────────────────────────────── */
.team-lane-row[b-rzhkdp4hpr] {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-width: fit-content;
    border-bottom: 1px solid var(--border-subtle, var(--border-primary));
    cursor: pointer;
    transition: background 0.12s;
}

.team-lane-row:hover[b-rzhkdp4hpr] {
    background: var(--bg-subtle);
}

.team-lane-row:last-child[b-rzhkdp4hpr] {
    border-bottom: none;
}

.team-lane-label[b-rzhkdp4hpr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 12px 8px 16px;
    border-right: 1px solid var(--border-primary);
    background: var(--bg-subtle);
    position: sticky;
    left: 0;
    z-index: 3;
}

.team-lane-label.muted[b-rzhkdp4hpr] {
    opacity: 0.6;
}

.team-lane-left[b-rzhkdp4hpr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-expand-icon[b-rzhkdp4hpr] {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.tl-expand-icon.expanded[b-rzhkdp4hpr] {
    transform: rotate(90deg);
}

.team-lane-name[b-rzhkdp4hpr] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-lane-info[b-rzhkdp4hpr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 18px;
}

.team-lane-sprint[b-rzhkdp4hpr] {
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.team-lane-count[b-rzhkdp4hpr] {
    font-size: 0.62rem;
    color: var(--text-muted);
}

/* ── Collapsed Preview ────────────────────────────────────────── */
.team-lane-preview[b-rzhkdp4hpr] {
    display: grid;
    gap: 2px 0;
    padding: 6px 0;
    min-width: fit-content;
    align-content: center;
}

.preview-bar[b-rzhkdp4hpr] {
    height: 6px;
    border-radius: 3px;
    opacity: 0.7;
}

.preview-bar.bar-epic[b-rzhkdp4hpr] { background: #7c3aed; }
.preview-bar.bar-feature[b-rzhkdp4hpr] { background: #2563eb; }
.preview-bar.bar-story[b-rzhkdp4hpr] { background: #059669; }
.preview-bar.bar-task[b-rzhkdp4hpr] { background: #475569; }
.preview-bar.bar-bug[b-rzhkdp4hpr] { background: #dc2626; }
.preview-bar.bar-other[b-rzhkdp4hpr] { background: #64748b; }

.preview-more[b-rzhkdp4hpr] {
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 2px 4px;
}

/* ── Expanded Grid Wrapper ────────────────────────────────────── */
.team-lane-grid-wrapper[b-rzhkdp4hpr] {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-width: fit-content;
    border-bottom: 1px solid var(--border-subtle, var(--border-primary));
}

.team-lane-grid-spacer[b-rzhkdp4hpr] {
    border-right: 1px solid var(--border-primary);
    background: var(--bg-subtle);
    position: sticky;
    left: 0;
    z-index: 3;
}

.team-lane-grid[b-rzhkdp4hpr] {
    display: grid;
    gap: 3px 0;
    position: relative;
    min-width: fit-content;
    padding: 4px 0;
}

/* ── Grid Lines ───────────────────────────────────────────────── */
.grid-line[b-rzhkdp4hpr] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-primary);
    opacity: 0.15;
    pointer-events: none;
}

.today-line[b-rzhkdp4hpr] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-primary);
    z-index: 2;
    pointer-events: none;
}

.today-label[b-rzhkdp4hpr] {
    position: absolute;
    top: -16px;
    transform: translateX(-50%);
    font-size: 0.58rem;
    color: var(--accent-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   BARS — Type-colored left border, readable text, always-visible
   ══════════════════════════════════════════════════════════════════ */
.roadmap-bar[b-rzhkdp4hpr] {
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 0.76rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    transition: filter 0.15s, box-shadow 0.15s;
    z-index: 1;
    /* Readable text — always dark in light, light in dark */
    color: var(--text-primary);
    /* Subtle background from theme */
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    /* Type accent = thick left border */
    border-left-width: 4px;
}

.roadmap-bar:hover[b-rzhkdp4hpr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    filter: brightness(0.97);
}

/* ── Progress Fill (always visible, subtle) ───────────────────── */
.roadmap-bar-progress[b-rzhkdp4hpr] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.15;
    z-index: 0;
    border-radius: 5px 0 0 5px;
}

/* ── Type = Left Border Color + Progress Fill Color ───────────── */
.bar-epic[b-rzhkdp4hpr] {
    border-left-color: #7c3aed;
}
.bar-epic .roadmap-bar-progress[b-rzhkdp4hpr] { background: #7c3aed; }

.bar-feature[b-rzhkdp4hpr] {
    border-left-color: #2563eb;
}
.bar-feature .roadmap-bar-progress[b-rzhkdp4hpr] { background: #2563eb; }

.bar-story[b-rzhkdp4hpr] {
    border-left-color: #059669;
}
.bar-story .roadmap-bar-progress[b-rzhkdp4hpr] { background: #059669; }

.bar-task[b-rzhkdp4hpr] {
    border-left-color: #475569;
}
.bar-task .roadmap-bar-progress[b-rzhkdp4hpr] { background: #475569; }

.bar-bug[b-rzhkdp4hpr] {
    border-left-color: #dc2626;
}
.bar-bug .roadmap-bar-progress[b-rzhkdp4hpr] { background: #dc2626; }

.bar-other[b-rzhkdp4hpr] {
    border-left-color: #64748b;
}
.bar-other .roadmap-bar-progress[b-rzhkdp4hpr] { background: #64748b; }

/* ── State Overrides ──────────────────────────────────────────── */
.bar-state-closed[b-rzhkdp4hpr] { opacity: 0.5; }
.bar-state-resolved[b-rzhkdp4hpr] { opacity: 0.7; }
.bar-state-removed[b-rzhkdp4hpr] { opacity: 0.3; text-decoration: line-through; }
.bar-state-reopened[b-rzhkdp4hpr] { border-left: 3px solid var(--wi-warning, #d29922); }

/* ── Depth Sizing ─────────────────────────────────────────────── */
.depth-0[b-rzhkdp4hpr] { min-height: 28px; font-weight: 600; }
.depth-1[b-rzhkdp4hpr] { min-height: 24px; margin-left: 6px; font-size: 0.73rem; }
.depth-2[b-rzhkdp4hpr] { min-height: 22px; margin-left: 12px; font-size: 0.7rem; }
.depth-3[b-rzhkdp4hpr] { min-height: 20px; margin-left: 18px; font-size: 0.68rem; }

.bar-depth-indicator[b-rzhkdp4hpr] {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 1px;
    opacity: 0.3;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* ── Bar Label — always visible ───────────────────────────────── */
.roadmap-bar-label[b-rzhkdp4hpr] {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    min-width: 40px;
    flex: 1 1 0%;
    color: var(--text-primary);
}

/* ── Bar Metadata — always visible for depth-0, hover for rest ── */
.roadmap-bar-meta[b-rzhkdp4hpr] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex-shrink: 1;
    overflow: hidden;
}

/* Show metadata always for top-level, on hover for deeper items */
.depth-1 .roadmap-bar-meta[b-rzhkdp4hpr],
.depth-2 .roadmap-bar-meta[b-rzhkdp4hpr],
.depth-3 .roadmap-bar-meta[b-rzhkdp4hpr] {
    opacity: 0;
    transition: opacity 0.15s;
}

.depth-1:hover .roadmap-bar-meta[b-rzhkdp4hpr],
.depth-2:hover .roadmap-bar-meta[b-rzhkdp4hpr],
.depth-3:hover .roadmap-bar-meta[b-rzhkdp4hpr] {
    opacity: 1;
}

.bar-sp[b-rzhkdp4hpr] {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    background: var(--bg-surface);
    padding: 1px 5px;
    border-radius: 3px;
}

.bar-assignee[b-rzhkdp4hpr] {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bar-children-count[b-rzhkdp4hpr] {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.roadmap-bar-ext[b-rzhkdp4hpr] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.roadmap-bar:hover .roadmap-bar-ext[b-rzhkdp4hpr] { opacity: 0.8; }
.roadmap-bar-ext:hover[b-rzhkdp4hpr] { opacity: 1 !important; color: var(--accent-primary); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .team-lane-row[b-rzhkdp4hpr],
    .team-lane-grid-wrapper[b-rzhkdp4hpr] { grid-template-columns: 160px 1fr; }
}

@media (max-width: 768px) {
    .team-lane-row[b-rzhkdp4hpr],
    .team-lane-grid-wrapper[b-rzhkdp4hpr] { grid-template-columns: 120px 1fr; }
    .roadmap-bar-label[b-rzhkdp4hpr] { max-width: 100px; }
    .team-lane-sprint[b-rzhkdp4hpr] { display: none; }
    .tl-toolbar[b-rzhkdp4hpr] { flex-direction: column; align-items: stretch; }
}
/* /Components/RoadmapTreeNode.razor.rz.scp.css */
/* ── Work Item Type Colors (theme-aware) ─────────────────────── */
:root[b-g9do3607mi] {
    --wit-epic: #a78bfa;
    --wit-feature: #60a5fa;
    --wit-story: #34d399;
    --wit-task: #64748b;
    --wit-bug: #f87171;
    --wit-other: #94a3b8;
    --state-new: #64748b;
    --state-active: #60a5fa;
    --state-resolved: #34d399;
    --state-closed: #22c55e;
    --state-removed: #f87171;
    --state-reopened: #d29922;
}

/* ── Node Row ─────────────────────────────────────────────────── */
.rt-node-row[b-g9do3607mi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 18px 5px calc(32px + var(--depth, 0) * 20px);
    cursor: default;
    transition: background 0.12s;
    min-height: 34px;
}

.rt-node-row.has-children[b-g9do3607mi] {
    cursor: pointer;
}

.rt-node-row:hover[b-g9do3607mi] {
    background: var(--bg-subtle);
}

/* ── Expand Icon ──────────────────────────────────────────────── */
.rt-node-expand[b-g9do3607mi] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.rt-node-expand.expanded[b-g9do3607mi] {
    transform: rotate(90deg);
}

.rt-node-expand.invisible[b-g9do3607mi] {
    visibility: hidden;
}

/* ── Type Dot ─────────────────────────────────────────────────── */
.rt-type-dot[b-g9do3607mi] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.rt-type-dot.rt-type-epic[b-g9do3607mi]    { background: var(--wit-epic); }
.rt-type-dot.rt-type-feature[b-g9do3607mi] { background: var(--wit-feature); }
.rt-type-dot.rt-type-story[b-g9do3607mi]   { background: var(--wit-story); }
.rt-type-dot.rt-type-task[b-g9do3607mi]    { background: var(--wit-task); }
.rt-type-dot.rt-type-bug[b-g9do3607mi]     { background: var(--wit-bug); }
.rt-type-dot.rt-type-other[b-g9do3607mi]   { background: var(--wit-other); }

/* ── Title ────────────────────────────────────────────────────── */
.rt-node-title[b-g9do3607mi] {
    font-size: 0.83rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.rt-node-title.rt-highlight[b-g9do3607mi] {
    background: color-mix(in srgb, var(--status-warning) 25%, transparent);
    border-radius: 3px;
    padding: 0 3px;
    margin: 0 -3px;
}

/* ── Metadata ─────────────────────────────────────────────────── */
.rt-node-meta[b-g9do3607mi] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Chips ────────────────────────────────────────────────────── */
.rt-chip[b-g9do3607mi] {
    font-size: 0.68rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.rt-chip-sp[b-g9do3607mi] {
    background: color-mix(in srgb, var(--wit-epic) 15%, transparent);
    color: var(--wit-epic);
}

.rt-chip-user[b-g9do3607mi] {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.65rem;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.rt-chip-hours[b-g9do3607mi] {
    background: color-mix(in srgb, var(--wit-task) 12%, transparent);
    color: var(--text-muted);
}

/* ── State Badge ──────────────────────────────────────────────── */
.rt-state-badge[b-g9do3607mi] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rt-state-badge.state-new[b-g9do3607mi] {
    background: color-mix(in srgb, var(--state-new) 12%, transparent);
    color: var(--state-new);
}

.rt-state-badge.state-active[b-g9do3607mi] {
    background: color-mix(in srgb, var(--state-active) 15%, transparent);
    color: var(--state-active);
}

.rt-state-badge.state-resolved[b-g9do3607mi] {
    background: color-mix(in srgb, var(--state-resolved) 15%, transparent);
    color: var(--state-resolved);
}

.rt-state-badge.state-closed[b-g9do3607mi] {
    background: color-mix(in srgb, var(--state-closed) 10%, transparent);
    color: var(--state-closed);
}

.rt-state-badge.state-removed[b-g9do3607mi] {
    background: color-mix(in srgb, var(--state-removed) 12%, transparent);
    color: var(--state-removed);
}

.rt-state-badge.state-reopened[b-g9do3607mi] {
    background: color-mix(in srgb, var(--state-reopened) 12%, transparent);
    color: var(--state-reopened);
}

/* ── Inline Progress ──────────────────────────────────────────── */
.rt-node-progress-wrap[b-g9do3607mi] {
    width: 48px;
    height: 4px;
    background: var(--bg-subtle);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

[b-g9do3607mi] .rt-node-progress-bar {
    height: 100%;
    background: var(--status-success);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.rt-node-progress-text[b-g9do3607mi] {
    font-size: 0.65rem;
    color: var(--text-muted);
    min-width: 24px;
    text-align: right;
    white-space: nowrap;
}

/* ── ADO Link ─────────────────────────────────────────────────── */
.rt-ado-link[b-g9do3607mi] {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.rt-node-row:hover .rt-ado-link[b-g9do3607mi] {
    opacity: 1;
}

.rt-ado-link:hover[b-g9do3607mi] {
    color: var(--accent-primary);
}

/* ── Children Container ───────────────────────────────────────── */
.rt-node-children[b-g9do3607mi] {
    border-left: 1px solid var(--border-subtle, var(--border-default));
    margin-left: calc(38px + var(--depth, 0) * 20px);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rt-node-row[b-g9do3607mi] {
        padding-left: calc(14px + var(--depth, 0) * 14px);
        padding-right: 12px;
        gap: 6px;
    }

    .rt-node-children[b-g9do3607mi] {
        margin-left: calc(20px + var(--depth, 0) * 14px);
    }

    .rt-node-meta[b-g9do3607mi] {
        flex-wrap: wrap;
    }

    .rt-node-progress-wrap[b-g9do3607mi] {
        display: none;
    }
}
/* /Components/RoadmapTreeView.razor.rz.scp.css */
/* ── Container ─────────────────────────────────────────────────── */
.rt-container[b-hankp17di5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.rt-toolbar[b-hankp17di5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rt-search-wrap[b-hankp17di5] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 6px 12px;
    flex: 1;
    min-width: 180px;
    max-width: 400px;
    transition: border-color 0.15s;
}

.rt-search-wrap:focus-within[b-hankp17di5] {
    border-color: var(--accent-primary);
}

.rt-search-wrap svg[b-hankp17di5] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.rt-search-input[b-hankp17di5] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.83rem;
    color: var(--text-primary);
    width: 100%;
}

.rt-search-input[b-hankp17di5]::placeholder {
    color: var(--text-muted);
}

.rt-search-clear[b-hankp17di5] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.rt-search-clear:hover[b-hankp17di5] {
    color: var(--text-primary);
    background: var(--bg-subtle);
}

.rt-toolbar-actions[b-hankp17di5] {
    display: flex;
    gap: 4px;
}

.rt-toolbar-btn[b-hankp17di5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.rt-toolbar-btn:hover[b-hankp17di5] {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border-color: var(--border-strong, var(--border-default));
}

.rt-toolbar-btn svg[b-hankp17di5] {
    flex-shrink: 0;
}

/* ── Search Status ────────────────────────────────────────────── */
.rt-search-status[b-hankp17di5] {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0 4px;
}

/* ── Project ──────────────────────────────────────────────────── */
.rt-project[b-hankp17di5] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
}

.rt-project-header[b-hankp17di5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    gap: 12px;
}

.rt-project-header:hover[b-hankp17di5] {
    background: var(--bg-subtle);
}

.rt-project-left[b-hankp17di5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rt-project-right[b-hankp17di5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.rt-expand-icon[b-hankp17di5] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.rt-expand-icon.expanded[b-hankp17di5] {
    transform: rotate(90deg);
}

.rt-project-abbr[b-hankp17di5] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--accent-primary);
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
}

.rt-project-name[b-hankp17di5] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-team-count[b-hankp17di5] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.rt-progress-bar-wrap[b-hankp17di5] {
    width: 80px;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.rt-progress-bar-wrap.small[b-hankp17di5] {
    width: 60px;
    height: 5px;
}

[b-hankp17di5] .rt-progress-bar {
    height: 100%;
    background: var(--status-success);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.rt-progress-text[b-hankp17di5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}

.rt-item-count[b-hankp17di5] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Project Body ─────────────────────────────────────────────── */
.rt-project-body[b-hankp17di5] {
    border-top: 1px solid var(--border-default);
}

/* ── Team ─────────────────────────────────────────────────────── */
.rt-team[b-hankp17di5] {
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
}

.rt-team:last-child[b-hankp17di5] {
    border-bottom: none;
}

.rt-team-header[b-hankp17di5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 10px 32px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    gap: 12px;
}

.rt-team-header:hover[b-hankp17di5] {
    background: var(--bg-subtle);
}

.rt-team-header.rt-unassigned[b-hankp17di5] {
    opacity: 0.7;
}

.rt-team-left[b-hankp17di5] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rt-team-right[b-hankp17di5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rt-team-name[b-hankp17di5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.rt-team-name.rt-muted[b-hankp17di5] {
    color: var(--text-muted);
    font-style: italic;
}

.rt-team-meta[b-hankp17di5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.rt-team-sprint[b-hankp17di5] {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Team Body (work items) ───────────────────────────────────── */
.rt-team-body[b-hankp17di5] {
    padding: 4px 0 8px 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rt-toolbar[b-hankp17di5] {
        flex-direction: column;
        align-items: stretch;
    }

    .rt-search-wrap[b-hankp17di5] {
        max-width: none;
    }

    .rt-toolbar-actions[b-hankp17di5] {
        justify-content: flex-end;
    }

    .rt-project-header[b-hankp17di5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
    }

    .rt-project-right[b-hankp17di5] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .rt-team-header[b-hankp17di5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 14px;
    }

    .rt-team-right[b-hankp17di5] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Components/SyncNotificationToast.razor.rz.scp.css */
/* ================================================
   TOAST NOTIFICATION STACK
   ================================================ */

.toast-stack[b-x8rgupj0gf] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 400px;
    pointer-events: none;
}

.toast-stack.has-items[b-x8rgupj0gf] {
    pointer-events: auto;
}

.toast-card[b-x8rgupj0gf] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 14px 40px 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.toast-card:hover[b-x8rgupj0gf] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Toast enter/exit animations */
.toast-enter[b-x8rgupj0gf] {
    animation: toast-slide-up-b-x8rgupj0gf 0.35s var(--ease-out-expo);
}

.toast-exit[b-x8rgupj0gf] {
    animation: toast-slide-out-b-x8rgupj0gf 0.35s var(--ease-out-expo) forwards;
}

@keyframes toast-slide-up-b-x8rgupj0gf {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-slide-out-b-x8rgupj0gf {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}

/* Type indicator line */
.toast-indicator[b-x8rgupj0gf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 10px 0 0 10px;
}

.toast-indicator.sync-started[b-x8rgupj0gf] { background: var(--accent-primary); }
.toast-indicator.sync-completed[b-x8rgupj0gf] { background: var(--status-success); }
.toast-indicator.work-item-changes[b-x8rgupj0gf] { background: var(--status-warning); }
.toast-indicator.alerts-updated[b-x8rgupj0gf] { background: var(--status-error); }

/* Icon */
.toast-icon-wrap[b-x8rgupj0gf] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon-wrap svg[b-x8rgupj0gf] {
    width: 16px;
    height: 16px;
}

.toast-icon-wrap.sync-started[b-x8rgupj0gf] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.toast-icon-wrap.sync-completed[b-x8rgupj0gf] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.toast-icon-wrap.work-item-changes[b-x8rgupj0gf] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.toast-icon-wrap.alerts-updated[b-x8rgupj0gf] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.toast-spinner[b-x8rgupj0gf] {
    animation: spin-b-x8rgupj0gf 1.2s linear infinite;
}

@keyframes spin-b-x8rgupj0gf {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Content */
.toast-content[b-x8rgupj0gf] {
    flex: 1;
    min-width: 0;
}

.toast-header-row[b-x8rgupj0gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.toast-title[b-x8rgupj0gf] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-timestamp[b-x8rgupj0gf] {
    font-size: 0.625rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.toast-message[b-x8rgupj0gf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Detail items */
.toast-details[b-x8rgupj0gf] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-detail-item[b-x8rgupj0gf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: var(--bg-elevated);
    border-radius: 5px;
    font-size: 0.6875rem;
}

.toast-detail-type[b-x8rgupj0gf] {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.toast-detail-type.bug[b-x8rgupj0gf] { background: var(--status-error-muted); color: var(--status-error); }
.toast-detail-type.task[b-x8rgupj0gf] { background: var(--status-info-muted); color: var(--status-info); }
.toast-detail-type.userstory[b-x8rgupj0gf] { background: var(--accent-secondary-muted); color: var(--accent-secondary); }
.toast-detail-type.feature[b-x8rgupj0gf] { background: var(--status-success-muted); color: var(--status-success); }
.toast-detail-type.epic[b-x8rgupj0gf] { background: var(--status-warning-muted); color: var(--status-warning); }

.toast-detail-title[b-x8rgupj0gf] {
    flex: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-detail-change[b-x8rgupj0gf] {
    font-size: 0.5625rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

.toast-detail-change.created[b-x8rgupj0gf] { background: var(--status-success-muted); color: var(--status-success); }
.toast-detail-change.updated[b-x8rgupj0gf] { background: var(--status-info-muted); color: var(--status-info); }
.toast-detail-change.deleted[b-x8rgupj0gf] { background: var(--status-error-muted); color: var(--status-error); }

.toast-detail-more[b-x8rgupj0gf] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2px 0;
}

/* Progress bar (auto-dismiss timer) */
.toast-progress[b-x8rgupj0gf] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-subtle);
}

.toast-progress-bar[b-x8rgupj0gf] {
    height: 100%;
    animation: progress-shrink-b-x8rgupj0gf linear forwards;
}

.toast-progress-bar.sync-started[b-x8rgupj0gf] { background: var(--accent-primary-border-emphasis); }
.toast-progress-bar.sync-completed[b-x8rgupj0gf] { background: var(--status-success-muted); }
.toast-progress-bar.work-item-changes[b-x8rgupj0gf] { background: var(--status-warning-muted); }
.toast-progress-bar.alerts-updated[b-x8rgupj0gf] { background: var(--status-error-muted); }

@keyframes progress-shrink-b-x8rgupj0gf {
    from { width: 100%; }
    to { width: 0%; }
}

/* Close button */
.toast-close[b-x8rgupj0gf] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    opacity: 0;
}

.toast-card:hover .toast-close[b-x8rgupj0gf] {
    opacity: 1;
}

.toast-close:hover[b-x8rgupj0gf] {
    background: var(--border-default);
    color: var(--text-primary);
}

/* Connection indicator */
.conn-indicator[b-x8rgupj0gf] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 9998;
    animation: toast-slide-up-b-x8rgupj0gf 0.3s var(--ease-out-expo);
}

.conn-indicator.reconnecting[b-x8rgupj0gf] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-glow);
}

.conn-indicator.disconnected[b-x8rgupj0gf],
.conn-indicator.error[b-x8rgupj0gf] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-glow);
}

.conn-spin[b-x8rgupj0gf] {
    animation: spin-b-x8rgupj0gf 1.2s linear infinite;
}

@media (max-width: 640px) {
    .toast-stack[b-x8rgupj0gf] {
        bottom: 72px; /* above bottom nav */
        right: 8px;
        left: 8px;
        max-width: none;
    }

    .toast-card[b-x8rgupj0gf] {
        padding: 10px 32px 10px 12px;
        gap: 8px;
    }

    .toast-icon-wrap[b-x8rgupj0gf] {
        width: 28px;
        height: 28px;
    }

    .toast-icon-wrap svg[b-x8rgupj0gf] {
        width: 14px;
        height: 14px;
    }

    .toast-title[b-x8rgupj0gf] {
        font-size: 0.75rem;
    }

    .toast-message[b-x8rgupj0gf] {
        font-size: 0.6875rem;
    }

    .toast-details[b-x8rgupj0gf] {
        margin-top: 6px;
    }

    .toast-detail-item[b-x8rgupj0gf] {
        font-size: 0.625rem;
    }

    .toast-close[b-x8rgupj0gf] {
        opacity: 1;
        width: 20px;
        height: 20px;
        top: 6px;
        right: 6px;
    }

    .conn-indicator[b-x8rgupj0gf] {
        bottom: 72px; /* above bottom nav */
        left: 8px;
        font-size: 0.6875rem;
        padding: 4px 10px;
    }
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle-wrap[b-fwmpbjd53l] {
    position: relative;
    display: flex;
    align-items: center;
}

.theme-toggle-btn[b-fwmpbjd53l] {
    transition: transform var(--duration-fast) ease;
}

.theme-toggle-btn:hover[b-fwmpbjd53l] {
    transform: scale(1.08);
}

.theme-dropdown[b-fwmpbjd53l] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    animation: theme-dropdown-in-b-fwmpbjd53l 150ms ease;
}

@keyframes theme-dropdown-in-b-fwmpbjd53l {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-option[b-fwmpbjd53l] {
    display: grid;
    grid-template-columns: 16px 1fr 14px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.theme-option:hover[b-fwmpbjd53l] {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.theme-option.active[b-fwmpbjd53l] {
    color: var(--accent-primary);
}

.theme-check[b-fwmpbjd53l] {
    color: var(--accent-primary);
}

.theme-backdrop[b-fwmpbjd53l] {
    position: fixed;
    inset: 0;
    z-index: 999;
}
/* /Components/Wiki/WikiRightNav.razor.rz.scp.css */
.wiki-right-nav[b-stu7ru1f3t] {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
}

.wiki-right-nav-title[b-stu7ru1f3t] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 8px;
}

.wiki-right-nav-group[b-stu7ru1f3t] { margin-bottom: 16px; }

.wiki-right-nav-section[b-stu7ru1f3t] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 12px;
    margin-bottom: 2px;
}

.wiki-right-nav-item[b-stu7ru1f3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.wiki-right-nav-item:hover[b-stu7ru1f3t] {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border-left-color: var(--accent-primary);
}

.wiki-right-nav-item.active[b-stu7ru1f3t] {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border-left-color: var(--accent-primary);
    font-weight: 600;
}

/* Number badges in nav */
.wiki-nav-num[b-stu7ru1f3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.wiki-nav-blue[b-stu7ru1f3t]   { background: var(--accent-primary-subtle);  color: var(--accent-primary); }
.wiki-nav-green[b-stu7ru1f3t]  { background: rgba(52,211,153,0.1);  color: #34d399; }
.wiki-nav-orange[b-stu7ru1f3t] { background: rgba(251,191,36,0.1);  color: #fbbf24; }
.wiki-nav-purple[b-stu7ru1f3t] { background: rgba(167,139,250,0.1); color: #a78bfa; }
.wiki-nav-gray[b-stu7ru1f3t]   { background: var(--bg-subtle);      color: var(--text-secondary); }
/* /Components/WorkItemDateBadge.razor.rz.scp.css */
.wi-date-badge[b-mqelcxfnjc] {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    gap: 1px;
}

.wi-date-own[b-mqelcxfnjc] { color: var(--mud-palette-text-primary); }
.wi-date-parent[b-mqelcxfnjc] { color: var(--mud-palette-info); opacity: 0.85; }
.wi-date-sprint[b-mqelcxfnjc] { color: var(--mud-palette-text-secondary); opacity: 0.75; }
.wi-date-none[b-mqelcxfnjc] { color: var(--mud-palette-text-disabled); }

.wi-date-prefix[b-mqelcxfnjc] { font-size: 0.75rem; }
/* /Layout/EmptyLayout.razor.rz.scp.css */
.empty-layout[b-lq7igddvp5] {
    min-height: 100vh;
    background: var(--bg-base);
}
/* /Pages/Activity.razor.rz.scp.css */
/* Date presets */
.date-presets[b-5so1zh7lvr] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.preset-chip[b-5so1zh7lvr] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.preset-chip:hover[b-5so1zh7lvr] {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.preset-chip.active[b-5so1zh7lvr] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border-color: var(--accent-primary);
}

/* Chart/Table panel */
.chart-panel[b-5so1zh7lvr] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-4);
}

.chart-panel-title[b-5so1zh7lvr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Table container */
[b-5so1zh7lvr] .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* KPI delta indicators */
[b-5so1zh7lvr] .kpi-delta {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 4px;
    font-family: var(--font-mono);
}

[b-5so1zh7lvr] .kpi-delta.positive {
    color: var(--status-success);
}

[b-5so1zh7lvr] .kpi-delta.negative {
    color: var(--status-error);
}

[b-5so1zh7lvr] .kpi-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Work item type chips */
[b-5so1zh7lvr] .type-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-5so1zh7lvr] .type-bug { background: var(--status-error-muted); color: var(--status-error); }
[b-5so1zh7lvr] .type-task { background: var(--status-info-muted); color: var(--status-info); }
[b-5so1zh7lvr] .type-story { background: var(--status-success-muted); color: var(--status-success); }
[b-5so1zh7lvr] .type-feature { background: var(--accent-secondary-muted); color: var(--accent-secondary); }
[b-5so1zh7lvr] .type-epic { background: var(--status-warning-muted); color: var(--status-warning); }
[b-5so1zh7lvr] .type-default { background: var(--bg-subtle); color: var(--text-muted); }

/* State chips */
[b-5so1zh7lvr] .state-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

[b-5so1zh7lvr] .state-closed { background: var(--status-success-muted); color: var(--status-success); }
[b-5so1zh7lvr] .state-resolved { background: var(--status-info-muted); color: var(--status-info); }
[b-5so1zh7lvr] .state-removed { background: var(--bg-subtle); color: var(--text-muted); }
[b-5so1zh7lvr] .state-default { background: var(--bg-subtle); color: var(--text-secondary); }

/* Smoothness dot */
[b-5so1zh7lvr] .smoothness-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

[b-5so1zh7lvr] .smooth-clean { background: var(--status-success); }
[b-5so1zh7lvr] .smooth-moderate { background: var(--status-warning); }
[b-5so1zh7lvr] .smooth-painful { background: var(--status-error); }

/* Item row */
[b-5so1zh7lvr] .item-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

[b-5so1zh7lvr] .item-row:hover {
    background: var(--bg-subtle);
}

[b-5so1zh7lvr] .item-row.expanded {
    background: var(--bg-elevated);
}

[b-5so1zh7lvr] .item-title-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-5so1zh7lvr] .item-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.3;
}

[b-5so1zh7lvr] .item-project {
    font-size: 0.75rem;
    color: var(--text-muted);
}

[b-5so1zh7lvr] .text-muted {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Journey preview */
[b-5so1zh7lvr] .journey-preview {
    display: flex;
    gap: 4px;
    align-items: center;
}

[b-5so1zh7lvr] .journey-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.675rem;
    font-weight: 700;
    color: var(--text-on-primary);
}

[b-5so1zh7lvr] .journey-badge.reassign {
    background: var(--status-warning);
}

[b-5so1zh7lvr] .journey-badge.reopen {
    background: var(--status-error);
}

[b-5so1zh7lvr] .journey-clean {
    color: var(--status-success);
    font-size: 1rem;
    font-weight: 700;
}

/* Expanded row */
[b-5so1zh7lvr] .expanded-row td {
    padding: 0 !important;
    border-top: none;
}

[b-5so1zh7lvr] .expanded-content {
    padding: 16px 24px 20px;
    background: var(--bg-elevated);
    border-top: 1px dashed var(--border-subtle);
}

[b-5so1zh7lvr] .expanded-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

[b-5so1zh7lvr] .meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

[b-5so1zh7lvr] .meta-tag.reopen-tag {
    background: var(--status-error-muted);
    color: var(--status-error);
}

[b-5so1zh7lvr] .meta-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

[b-5so1zh7lvr] .meta-link:hover {
    opacity: 0.8;
}

/* Assignment chain timeline */
[b-5so1zh7lvr] .assignment-chain {
    margin-top: 8px;
}

[b-5so1zh7lvr] .chain-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-5so1zh7lvr] .chain-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
}

[b-5so1zh7lvr] .chain-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 0;
    position: relative;
}

[b-5so1zh7lvr] .chain-segment:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0.4;
}

[b-5so1zh7lvr] .chain-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}

[b-5so1zh7lvr] .chain-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

[b-5so1zh7lvr] .chain-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

[b-5so1zh7lvr] .chain-duration {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Pagination */
[b-5so1zh7lvr] .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 16px;
}

[b-5so1zh7lvr] .pagination-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

[b-5so1zh7lvr] .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-5so1zh7lvr] .page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-5so1zh7lvr] .page-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

[b-5so1zh7lvr] .page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

[b-5so1zh7lvr] .page-current {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding: 0 8px;
}

/* Empty state */
[b-5so1zh7lvr] .empty-state {
    margin-top: var(--space-8);
}

/* Responsive — Tablet */
@media (max-width: 768px) {
    .chart-panel[b-5so1zh7lvr] {
        padding: 16px;
        border-radius: 8px;
    }

    [b-5so1zh7lvr] .pagination-bar {
        flex-direction: column;
        gap: 12px;
    }

    [b-5so1zh7lvr] .page-btn {
        width: 44px;
        height: 44px;
    }
}

/* Responsive — Mobile: convert table to card layout */
@media (max-width: 640px) {
    .date-presets[b-5so1zh7lvr] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .date-presets[b-5so1zh7lvr]::-webkit-scrollbar {
        display: none;
    }

    .preset-chip[b-5so1zh7lvr] {
        min-height: 36px;
    }

    [b-5so1zh7lvr] .data-table thead {
        display: none;
    }

    [b-5so1zh7lvr] .data-table tbody tr.item-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 4px 8px;
        padding: 12px;
        border-bottom: 1px solid var(--border-subtle);
    }

    /* ID — top left */
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    /* Title — top center, spanning */
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Type, State, Smoothness — inline row */
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(3),
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(4),
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(5) {
        display: inline-flex;
        grid-column: auto;
        grid-row: 3;
    }

    /* Age — row 3 right */
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(6) {
        grid-column: auto;
        grid-row: 3;
    }

    /* Closed By */
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(7) {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    /* Journey */
    [b-5so1zh7lvr] .data-table tbody tr.item-row td:nth-child(8) {
        grid-column: 3;
        grid-row: 4;
        text-align: right;
    }

    /* Expanded row — full width */
    [b-5so1zh7lvr] .data-table tbody tr.expanded-row {
        display: block;
    }

    [b-5so1zh7lvr] .data-table tbody tr.expanded-row td {
        display: block;
    }

    [b-5so1zh7lvr] .expanded-content {
        padding: 12px;
    }

    /* Chain timeline — vertical on mobile */
    [b-5so1zh7lvr] .chain-timeline {
        flex-direction: column;
        gap: 4px;
    }

    [b-5so1zh7lvr] .chain-segment:not(:last-child)::after {
        display: none;
    }

    [b-5so1zh7lvr] .chain-segment {
        padding: 4px 0;
    }
}
/* /Pages/Admin/DeletedItems.razor.rz.scp.css */
.deleted-items-page[b-1a5aku947r] {
    padding: 24px;
}

.page-header[b-1a5aku947r] {
    margin-bottom: 32px;
}

.page-header h1[b-1a5aku947r] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.page-header .subtitle[b-1a5aku947r] {
    color: var(--text-secondary);
    margin: 0;
}

.loading-state[b-1a5aku947r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
    color: var(--text-secondary);
}

.summary-icon[b-1a5aku947r] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon.projects[b-1a5aku947r] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.summary-icon.users[b-1a5aku947r] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.summary-icon.teams[b-1a5aku947r] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.summary-icon.workitems[b-1a5aku947r] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.summary-content[b-1a5aku947r] {
    display: flex;
    flex-direction: column;
}

.summary-card:hover[b-1a5aku947r] {
    border-color: var(--border-default);
    transform: translateY(-2px);
}

.summary-card.active[b-1a5aku947r] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-subtle);
}

.content-section[b-1a5aku947r] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 24px;
}

.content-section h2[b-1a5aku947r] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.deleted-table[b-1a5aku947r] {
    background: transparent !important;
}

.deleted-table code[b-1a5aku947r] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    padding: 2px 6px;
    background: var(--border-default);
    border-radius: 4px;
}

.empty-state[b-1a5aku947r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 12px;
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    .summary-grid[b-1a5aku947r] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .summary-grid[b-1a5aku947r] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/HolidayManagement.razor.rz.scp.css */
/* ============================================
   HOLIDAY CALENDAR - Command Center Design
   Inspired by: mission control timeline aesthetics
   ============================================ */

/* Page Container */
[b-hpdxintly1] .hol-page {
    padding: var(--page-gutter);
    padding-bottom: calc(var(--page-gutter) + var(--bottom-nav-height));
    min-height: 100vh;
    background: var(--bg-base);
    position: relative;
}

[b-hpdxintly1] .hol-ambient {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
    background:
        radial-gradient(ellipse 60% 40% at 30% -10%, var(--status-success-muted) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 70% -5%, var(--status-info-muted) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */
[b-hpdxintly1] .hol-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg), 0 0 30px var(--bg-overlay);
    animation: toastSlide-b-hpdxintly1 300ms var(--ease-out-expo) forwards;
    pointer-events: auto;
}

[b-hpdxintly1] .toast-success {
    background: var(--status-success-muted);
    border: 1px solid var(--status-success-glow);
    color: var(--status-success);
}

[b-hpdxintly1] .toast-error {
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-glow);
    color: var(--status-error);
}

@keyframes toastSlide-b-hpdxintly1 {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   COMMAND BAR
   ============================================ */
[b-hpdxintly1] .hol-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

[b-hpdxintly1] .hol-command-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

[b-hpdxintly1] .hol-command-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--status-success-muted) 0%, var(--status-success-muted) 100%);
    border: 1px solid var(--status-success-glow);
    border-radius: var(--radius-md);
    color: var(--status-success);
}

[b-hpdxintly1] .hol-command-icon svg {
    width: 22px;
    height: 22px;
}

[b-hpdxintly1] .hol-command h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.2;
}

[b-hpdxintly1] .hol-command-sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

[b-hpdxintly1] .hol-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-disabled);
}

[b-hpdxintly1] .hol-command-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Year Navigator */
[b-hpdxintly1] .hol-year-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 2px;
}

[b-hpdxintly1] .hol-year-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

[b-hpdxintly1] .hol-year-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

[b-hpdxintly1] .hol-year-btn svg {
    width: 14px;
    height: 14px;
}

[b-hpdxintly1] .hol-year-display {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 52px;
    text-align: center;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   STATS STRIP
   ============================================ */
[b-hpdxintly1] .hol-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

[b-hpdxintly1] .hol-stat-card {
    background: var(--gradient-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

[b-hpdxintly1] .hol-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 50%, transparent 100%);
}

[b-hpdxintly1] .hol-stat-card:hover {
    border-color: var(--border-default);
    transform: translateY(-1px);
}

[b-hpdxintly1] .hol-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

[b-hpdxintly1] .hol-stat-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-hpdxintly1] .hol-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

[b-hpdxintly1] .dot-emerald { background: var(--status-success); box-shadow: 0 0 8px var(--status-success-glow); }
[b-hpdxintly1] .dot-blue { background: var(--status-info); box-shadow: 0 0 8px var(--status-info-glow); }
[b-hpdxintly1] .dot-amber { background: var(--status-warning); box-shadow: 0 0 8px var(--status-warning-glow); }
[b-hpdxintly1] .dot-teal { background: var(--status-success); box-shadow: 0 0 8px var(--status-success-glow); }

[b-hpdxintly1] .hol-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* ============================================
   YEAR TIMELINE BAR
   ============================================ */
[b-hpdxintly1] .hol-timeline {
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

[b-hpdxintly1] .hol-timeline-track {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[b-hpdxintly1] .hol-timeline-month {
    padding: 10px 4px;
    text-align: center;
    border-right: 1px solid var(--border-subtle);
    transition: background var(--duration-fast) ease;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

[b-hpdxintly1] .hol-timeline-month:last-child {
    border-right: none;
}

[b-hpdxintly1] .hol-timeline-month:hover {
    background: var(--bg-surface-hover);
}

[b-hpdxintly1] .hol-timeline-month.has-holidays {
    background: var(--status-success-muted);
}

[b-hpdxintly1] .hol-timeline-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-hpdxintly1] .hol-timeline-month.has-holidays .hol-timeline-label {
    color: var(--text-secondary);
}

[b-hpdxintly1] .hol-timeline-dots {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}

[b-hpdxintly1] .hol-timeline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: transform var(--duration-fast) ease;
}

[b-hpdxintly1] .hol-timeline-dot:hover {
    transform: scale(1.6);
}

[b-hpdxintly1] .tdot-fixed { background: var(--status-info); box-shadow: 0 0 6px var(--status-info-glow); }
[b-hpdxintly1] .tdot-islamic { background: var(--status-success); box-shadow: 0 0 6px var(--status-success-glow); }
[b-hpdxintly1] .tdot-flexible { background: var(--status-warning); box-shadow: 0 0 6px var(--status-warning-glow); }

/* ============================================
   MONTH SECTIONS
   ============================================ */
[b-hpdxintly1] .hol-months {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

[b-hpdxintly1] .hol-month-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[b-hpdxintly1] .hol-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

[b-hpdxintly1] .hol-month-name-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

[b-hpdxintly1] .hol-month-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-disabled);
    letter-spacing: 0.05em;
}

[b-hpdxintly1] .hol-month-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

[b-hpdxintly1] .hol-month-meta {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

[b-hpdxintly1] .hol-month-count {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
}

[b-hpdxintly1] .hol-month-count-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   HOLIDAY ENTRIES
   ============================================ */
[b-hpdxintly1] .hol-entries {
    display: flex;
    flex-direction: column;
}

[b-hpdxintly1] .hol-entry {
    display: flex;
    align-items: stretch;
    transition: background var(--duration-fast) ease;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
}

[b-hpdxintly1] .hol-entry:last-child {
    border-bottom: none;
}

[b-hpdxintly1] .hol-entry:hover {
    background: var(--bg-surface);
}

[b-hpdxintly1] .hol-entry.entry-confirming {
    background: var(--status-error-muted);
}

/* Left accent strip */
[b-hpdxintly1] .hol-entry-accent {
    width: 3px;
    flex-shrink: 0;
    transition: width var(--duration-fast) ease;
}

[b-hpdxintly1] .hol-entry:hover .hol-entry-accent {
    width: 4px;
}

[b-hpdxintly1] .accent-fixed .hol-entry-accent { background: var(--status-info); }
[b-hpdxintly1] .accent-islamic .hol-entry-accent { background: var(--status-success); }
[b-hpdxintly1] .accent-flexible .hol-entry-accent { background: var(--status-warning); }

/* Date Column */
[b-hpdxintly1] .hol-entry-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: var(--space-4) 0;
    flex-shrink: 0;
}

[b-hpdxintly1] .hol-entry-day {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

[b-hpdxintly1] .hol-entry-dow {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 3px;
}

/* Entry Body */
[b-hpdxintly1] .hol-entry-body {
    flex: 1;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

[b-hpdxintly1] .hol-entry-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

[b-hpdxintly1] .hol-entry-name {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   ACTION BUTTONS (Always visible, labeled)
   ============================================ */
[b-hpdxintly1] .hol-entry-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}

[b-hpdxintly1] .hol-entry:hover .hol-entry-actions {
    opacity: 1;
}

[b-hpdxintly1] .hol-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    font-family: var(--font-body);
    font-size: 0;
    white-space: nowrap;
}

[b-hpdxintly1] .hol-act-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-hpdxintly1] .hol-act-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

[b-hpdxintly1] .hol-act-edit:hover {
    background: var(--status-info-muted);
    border-color: var(--status-info-glow);
    color: var(--status-info);
}

[b-hpdxintly1] .hol-act-danger:hover {
    background: var(--status-error-muted);
    border-color: var(--status-error-glow);
    color: var(--status-error);
}

/* ============================================
   DELETE CONFIRMATION INLINE
   ============================================ */
[b-hpdxintly1] .hol-confirm-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    animation: confirmFadeIn-b-hpdxintly1 200ms ease forwards;
}

@keyframes confirmFadeIn-b-hpdxintly1 {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

[b-hpdxintly1] .hol-confirm-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--status-error);
    letter-spacing: 0.01em;
}

[b-hpdxintly1] .hol-confirm-yes,
[b-hpdxintly1] .hol-confirm-no {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    border: 1px solid transparent;
}

[b-hpdxintly1] .hol-confirm-yes {
    background: var(--status-error-muted);
    border-color: var(--status-error-glow);
    color: var(--status-error);
}

[b-hpdxintly1] .hol-confirm-yes:hover {
    background: var(--status-error-muted);
    border-color: var(--status-error);
    color: var(--text-primary);
}

[b-hpdxintly1] .hol-confirm-yes:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-hpdxintly1] .hol-confirm-no {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

[b-hpdxintly1] .hol-confirm-no:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* Tags */
[b-hpdxintly1] .hol-entry-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

[b-hpdxintly1] .hol-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.6;
}

[b-hpdxintly1] .tag-fixed {
    background: var(--status-info-muted);
    color: var(--status-info);
    border: 1px solid var(--status-info-glow);
}

[b-hpdxintly1] .tag-islamic {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-glow);
}

[b-hpdxintly1] .tag-flexible {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-glow);
}

[b-hpdxintly1] .tag-recurring {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
    border: 1px solid var(--accent-secondary-glow);
}

[b-hpdxintly1] .tag-days {
    background: var(--bg-row-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

[b-hpdxintly1] .tag-range {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding-left: 0;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
}

[b-hpdxintly1] .tag-recurring svg {
    flex-shrink: 0;
}

/* Notes */
[b-hpdxintly1] .hol-entry-notes {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-disabled);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   EMPTY STATE
   ============================================ */
[b-hpdxintly1] .hol-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

[b-hpdxintly1] .hol-empty-visual {
    margin-bottom: var(--space-6);
    opacity: 0.5;
}

[b-hpdxintly1] .hol-empty-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

[b-hpdxintly1] .hol-empty-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 380px;
    margin: 0 0 var(--space-6) 0;
    line-height: 1.6;
}

/* Error State */
[b-hpdxintly1] .hol-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    gap: var(--space-4);
}

[b-hpdxintly1] .hol-error-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-error-muted);
    border-radius: var(--radius-lg);
    color: var(--status-error);
}

[b-hpdxintly1] .hol-error-icon svg {
    width: 28px;
    height: 28px;
}

[b-hpdxintly1] .hol-error-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Skeleton loading */
[b-hpdxintly1] .hol-month-skeleton {
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

/* ============================================
   DIALOG - Slide-up panel
   ============================================ */
[b-hpdxintly1] .hol-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    z-index: 9000;
    animation: overlayIn-b-hpdxintly1 200ms ease forwards;
}

@keyframes overlayIn-b-hpdxintly1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

[b-hpdxintly1] .hol-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    width: min(540px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    z-index: 9001;
    box-shadow: var(--shadow-xl), 0 0 60px var(--bg-overlay);
    animation: dialogIn-b-hpdxintly1 300ms var(--ease-out-expo) forwards;
}

@keyframes dialogIn-b-hpdxintly1 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

[b-hpdxintly1] .hol-dialog-strip {
    height: 3px;
    width: 100%;
}

[b-hpdxintly1] .strip-create {
    background: linear-gradient(90deg, var(--status-success) 0%, var(--status-info) 50%, var(--accent-secondary) 100%);
}

[b-hpdxintly1] .strip-edit {
    background: linear-gradient(90deg, var(--status-warning) 0%, var(--status-warning) 50%, var(--status-warning) 100%);
}

[b-hpdxintly1] .hol-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
}

[b-hpdxintly1] .hol-dialog-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

[b-hpdxintly1] .hol-dialog-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 3px 0 0 0;
}

[b-hpdxintly1] .hol-dialog-x {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    flex-shrink: 0;
}

[b-hpdxintly1] .hol-dialog-x:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[b-hpdxintly1] .hol-dialog-x svg {
    width: 16px;
    height: 16px;
}

/* Dialog Inline Alert */
[b-hpdxintly1] .hol-dialog-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 var(--space-6) var(--space-3);
    padding: 8px 14px;
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-glow);
    border-radius: var(--radius-sm);
    color: var(--status-error);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    animation: alertPulse-b-hpdxintly1 300ms ease;
}

@keyframes alertPulse-b-hpdxintly1 {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Form */
[b-hpdxintly1] .hol-dialog-form {
    padding: 0 var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[b-hpdxintly1] .hol-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-hpdxintly1] .hol-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

[b-hpdxintly1] .hol-field-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

[b-hpdxintly1] .hol-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-hpdxintly1] .hol-optional {
    font-weight: 400;
    color: var(--text-disabled);
    text-transform: none;
    letter-spacing: 0;
}

[b-hpdxintly1] .hol-input {
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: all var(--duration-fast) ease;
    width: 100%;
    box-sizing: border-box;
}

[b-hpdxintly1] .hol-input:focus {
    outline: none;
    border-color: var(--status-info-glow);
    box-shadow: 0 0 0 3px var(--status-info-muted);
    background: var(--bg-surface-hover);
}

[b-hpdxintly1] .hol-input::placeholder {
    color: var(--text-disabled);
}

[b-hpdxintly1] .hol-mud-date {
    width: 100%;
}

[b-hpdxintly1] .hol-mud-date .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-subtle);
}

[b-hpdxintly1] .hol-mud-date .mud-input {
    color: var(--text-primary);
    font-size: 0.875rem;
}

[b-hpdxintly1] .hol-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

/* ============================================
   HOLIDAY TYPE SELECTOR CARDS
   ============================================ */
[b-hpdxintly1] .hol-type-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

[b-hpdxintly1] .hol-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    text-align: center;
}

[b-hpdxintly1] .hol-type-card:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
}

[b-hpdxintly1] .hol-type-card-icon {
    font-size: 1.1rem;
    line-height: 1;
}

[b-hpdxintly1] .hol-type-card-name {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

[b-hpdxintly1] .hol-type-card-desc {
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: var(--text-disabled);
    line-height: 1.2;
}

/* Active states per type */
[b-hpdxintly1] .hol-type-card.type-card-active.card-fixed {
    background: var(--status-info-muted);
    border-color: var(--status-info-glow);
    box-shadow: 0 0 0 1px var(--status-info-muted);
}

[b-hpdxintly1] .hol-type-card.type-card-active.card-fixed .hol-type-card-icon { color: var(--status-info); }
[b-hpdxintly1] .hol-type-card.type-card-active.card-fixed .hol-type-card-name { color: var(--status-info); }

[b-hpdxintly1] .hol-type-card.type-card-active.card-islamic {
    background: var(--status-success-muted);
    border-color: var(--status-success-glow);
    box-shadow: 0 0 0 1px var(--status-success-muted);
}

[b-hpdxintly1] .hol-type-card.type-card-active.card-islamic .hol-type-card-icon { color: var(--status-success); }
[b-hpdxintly1] .hol-type-card.type-card-active.card-islamic .hol-type-card-name { color: var(--status-success); }

[b-hpdxintly1] .hol-type-card.type-card-active.card-flexible {
    background: var(--status-warning-muted);
    border-color: var(--status-warning-glow);
    box-shadow: 0 0 0 1px var(--status-warning-muted);
}

[b-hpdxintly1] .hol-type-card.type-card-active.card-flexible .hol-type-card-icon { color: var(--status-warning); }
[b-hpdxintly1] .hol-type-card.type-card-active.card-flexible .hol-type-card-name { color: var(--status-warning); }

/* ============================================
   DAYS OFF STEPPER
   ============================================ */
[b-hpdxintly1] .hol-days-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: fit-content;
}

[b-hpdxintly1] .hol-stepper-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

[b-hpdxintly1] .hol-stepper-btn:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

[b-hpdxintly1] .hol-stepper-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-hpdxintly1] .hol-stepper-value {
    min-width: 36px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    padding: 0 4px;
    line-height: 36px;
    font-variant-numeric: tabular-nums;
}

/* Toggle Switches */
[b-hpdxintly1] .hol-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

[b-hpdxintly1] .hol-toggle input {
    display: none;
}

[b-hpdxintly1] .hol-toggle-track {
    width: 36px;
    height: 20px;
    background: var(--bg-muted);
    border-radius: 10px;
    position: relative;
    transition: background var(--duration-fast) ease;
    flex-shrink: 0;
}

[b-hpdxintly1] .hol-toggle input:checked ~ .hol-toggle-track {
    background: var(--status-info-glow);
}

[b-hpdxintly1] .hol-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all var(--duration-fast) ease;
}

[b-hpdxintly1] .hol-toggle input:checked ~ .hol-toggle-track .hol-toggle-thumb {
    left: 18px;
    background: var(--status-info);
}

[b-hpdxintly1] .hol-toggle-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Dialog Footer */
[b-hpdxintly1] .hol-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-overlay);
}

/* Spinner */
[b-hpdxintly1] .hol-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--status-info-muted);
    border-top-color: var(--status-info);
    border-radius: 50%;
    animation: holSpin-b-hpdxintly1 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes holSpin-b-hpdxintly1 {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@@media (max-width: 768px) {
    [b-hpdxintly1] .hol-command {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    [b-hpdxintly1] .hol-command-right {
        width: 100%;
        justify-content: space-between;
    }

    [b-hpdxintly1] .hol-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-hpdxintly1] .hol-timeline-track {
        grid-template-columns: repeat(6, 1fr);
    }

    [b-hpdxintly1] .hol-timeline-month:nth-child(n+7) {
        border-top: 1px solid var(--border-subtle);
    }

    [b-hpdxintly1] .hol-field-row {
        grid-template-columns: 1fr;
    }

    [b-hpdxintly1] .hol-type-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    [b-hpdxintly1] .hol-entry-name {
        font-size: 0.82rem;
    }

    [b-hpdxintly1] .hol-entry-actions {
        opacity: 1;
    }

    [b-hpdxintly1] .hol-act-label {
        display: none;
    }

    [b-hpdxintly1] .hol-toast {
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 80px;
    }
}

@@media (max-width: 480px) {
    [b-hpdxintly1] .hol-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    [b-hpdxintly1] .hol-stat-card {
        padding: var(--space-3) var(--space-4);
    }

    [b-hpdxintly1] .hol-stat-value {
        font-size: 1.35rem;
    }

    [b-hpdxintly1] .hol-timeline-track {
        grid-template-columns: repeat(4, 1fr);
    }

    [b-hpdxintly1] .hol-timeline-month:nth-child(n+5) {
        border-top: 1px solid var(--border-subtle);
    }

    [b-hpdxintly1] .hol-entry-date {
        width: 48px;
    }

    [b-hpdxintly1] .hol-entry-day {
        font-size: 1.1rem;
    }

    [b-hpdxintly1] .hol-entry-actions {
        opacity: 1;
    }

    [b-hpdxintly1] .hol-type-cards {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    [b-hpdxintly1] .hol-type-card {
        flex-direction: row;
        padding: 8px 12px;
        gap: 8px;
    }

    [b-hpdxintly1] .hol-type-card-desc {
        display: none;
    }
}
/* /Pages/Admin/LeavePolicy.razor.rz.scp.css */
/* ============================================
   LEAVE POLICY - Obsidian Command
   Hard edges, teal accents, mono numbers, dense
   ============================================ */

/* Page Container */
[b-rje57qc6ts] .lp-page {
    padding: var(--page-gutter);
    padding-bottom: calc(var(--page-gutter) + var(--bottom-nav-height));
    min-height: 100vh;
    background: var(--bg-base);
    position: relative;
}

[b-rje57qc6ts] .lp-ambient {
    display: none;
}

/* ============================================
   COMMAND BAR
   ============================================ */
[b-rje57qc6ts] .lp-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

[b-rje57qc6ts] .lp-command-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

[b-rje57qc6ts] .lp-command-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-success-muted);
    border: 1px solid var(--status-success-glow);
    border-left: 3px solid var(--status-success);
    border-radius: 4px;
    color: var(--status-success);
}

[b-rje57qc6ts] .lp-command-icon svg {
    width: 20px;
    height: 20px;
}

[b-rje57qc6ts] .lp-command h1 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.1;
}

[b-rje57qc6ts] .lp-command-sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

[b-rje57qc6ts] .lp-sep {
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background: var(--text-disabled);
}

[b-rje57qc6ts] .lp-command-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ============================================
   ACTIVE POLICY CARD
   ============================================ */
[b-rje57qc6ts] .lp-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--status-success);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-6);
}

[b-rje57qc6ts] .lp-card::before {
    display: none;
}

[b-rje57qc6ts] .lp-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-card-title-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

[b-rje57qc6ts] .lp-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

[b-rje57qc6ts] .lp-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
    border: 1px solid var(--accent-secondary-glow);
    box-shadow: 1px 1px 0 var(--accent-secondary-glow);
}

[b-rje57qc6ts] .lp-version-badge-sm {
    padding: 1px 5px;
    font-size: 0.58rem;
}

[b-rje57qc6ts] .lp-active-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-glow);
    box-shadow: 1px 1px 0 var(--status-success-glow);
}

[b-rje57qc6ts] .lp-card-date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ============================================
   POLICY GRID (2-column settings display)
   ============================================ */
[b-rje57qc6ts] .lp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

[b-rje57qc6ts] .lp-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-item:hover {
    background: transparent;
}

[b-rje57qc6ts] .lp-item:nth-child(2n) {
    border-right: none;
}

[b-rje57qc6ts] .lp-item:nth-last-child(-n+2) {
    border-bottom: none;
}

[b-rje57qc6ts] .lp-item-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-rje57qc6ts] .lp-item-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

[b-rje57qc6ts] .lp-item-num {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

[b-rje57qc6ts] .lp-item-date {
    font-size: 0.9rem;
    font-weight: 600;
}

[b-rje57qc6ts] .lp-item-unit {
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Boolean Badges (Yes/No) */
[b-rje57qc6ts] .lp-bool-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-rje57qc6ts] .lp-bool-yes {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-glow);
}

[b-rje57qc6ts] .lp-bool-no {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-glow);
}

/* Notes Section */
[b-rje57qc6ts] .lp-notes-section {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-track);
}

[b-rje57qc6ts] .lp-notes-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 4px;
}

[b-rje57qc6ts] .lp-notes-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* ============================================
   VERSION HISTORY TABLE
   ============================================ */
[b-rje57qc6ts] .lp-history-section {
    position: relative;
    z-index: 1;
}

[b-rje57qc6ts] .lp-history-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

[b-rje57qc6ts] .lp-history-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

[b-rje57qc6ts] .lp-history-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--border-subtle);
    padding: 1px 7px;
    border-radius: 2px;
    border: 1px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-history-table-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}

[b-rje57qc6ts] .lp-history-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

[b-rje57qc6ts] .lp-history-table thead {
    border-bottom: 2px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-history-table th {
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
}

[b-rje57qc6ts] .lp-history-table td {
    padding: 8px 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--bg-row-hover);
    white-space: nowrap;
}

[b-rje57qc6ts] .lp-history-table tbody tr:last-child td {
    border-bottom: none;
}

[b-rje57qc6ts] .lp-history-table tbody tr {
    transition: none;
}

[b-rje57qc6ts] .lp-history-table tbody tr:hover {
    background: transparent;
}

[b-rje57qc6ts] .lp-active-row {
    border-left: 3px solid var(--status-success);
}

[b-rje57qc6ts] .lp-active-row:hover {
    background: transparent !important;
}

[b-rje57qc6ts] .lp-active-row td {
    color: var(--text-primary);
}

[b-rje57qc6ts] .lp-text-muted {
    color: var(--text-disabled);
}

/* Status Badges (table) */
[b-rje57qc6ts] .lp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-rje57qc6ts] .lp-status-active {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-glow);
}

[b-rje57qc6ts] .lp-status-inactive {
    background: var(--bg-row-hover);
    color: var(--text-disabled);
    border: 1px solid var(--border-subtle);
}

/* ============================================
   EMPTY STATE
   ============================================ */
[b-rje57qc6ts] .lp-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px var(--space-6);
    position: relative;
    z-index: 1;
    border-top: 3px solid var(--status-success);
    background: var(--bg-elevated);
    border-radius: 6px;
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-empty-visual {
    display: none;
}

[b-rje57qc6ts] .lp-empty-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

[b-rje57qc6ts] .lp-empty-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 0 var(--space-5) 0;
    line-height: 1.5;
}

/* Error State */
[b-rje57qc6ts] .lp-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px var(--space-6);
    position: relative;
    z-index: 1;
    gap: var(--space-3);
    border-top: 3px solid var(--status-error);
    background: var(--bg-elevated);
    border-radius: 6px;
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-error-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-error-muted);
    border-radius: 4px;
    color: var(--status-error);
}

[b-rje57qc6ts] .lp-error-icon svg {
    width: 22px;
    height: 22px;
}

[b-rje57qc6ts] .lp-error-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   DIALOG - Edit / Create Policy
   ============================================ */
[b-rje57qc6ts] .lp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    z-index: 9000;
    animation: lpOverlayIn-b-rje57qc6ts 150ms ease forwards;
}

@keyframes lpOverlayIn-b-rje57qc6ts {
    from { opacity: 0; }
    to { opacity: 1; }
}

[b-rje57qc6ts] .lp-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    width: min(580px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 9001;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: lpDialogIn-b-rje57qc6ts 200ms ease forwards;
}

@keyframes lpDialogIn-b-rje57qc6ts {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

[b-rje57qc6ts] .lp-dialog-strip {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
}

[b-rje57qc6ts] .strip-create {
    background: var(--status-success);
}

[b-rje57qc6ts] .strip-edit {
    background: var(--status-warning);
}

[b-rje57qc6ts] .lp-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
}

[b-rje57qc6ts] .lp-dialog-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

[b-rje57qc6ts] .lp-dialog-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

[b-rje57qc6ts] .lp-dialog-x {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 120ms ease;
    flex-shrink: 0;
}

[b-rje57qc6ts] .lp-dialog-x:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[b-rje57qc6ts] .lp-dialog-x svg {
    width: 14px;
    height: 14px;
}

/* Dialog Body (scrollable) */
[b-rje57qc6ts] .lp-dialog-body {
    padding: 0 var(--space-5) var(--space-4);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Form Sections */
[b-rje57qc6ts] .lp-form-section {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

[b-rje57qc6ts] .lp-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

[b-rje57qc6ts] .lp-form-section-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3) 0;
}

[b-rje57qc6ts] .lp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

[b-rje57qc6ts] .lp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

[b-rje57qc6ts] .lp-field-row:last-child {
    margin-bottom: 0;
}

[b-rje57qc6ts] .lp-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-rje57qc6ts] .lp-optional {
    font-weight: 400;
    color: var(--text-disabled);
    text-transform: none;
    letter-spacing: 0;
}

[b-rje57qc6ts] .lp-input {
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: border-color 120ms ease;
    width: 100%;
    box-sizing: border-box;
}

[b-rje57qc6ts] .lp-input:focus {
    outline: none;
    border-color: var(--status-success);
    box-shadow: none;
    background: var(--bg-surface);
}

[b-rje57qc6ts] .lp-input::placeholder {
    color: var(--text-disabled);
}

[b-rje57qc6ts] .lp-textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

/* Input Group (input + suffix) */
[b-rje57qc6ts] .lp-input-group {
    display: flex;
    align-items: stretch;
}

[b-rje57qc6ts] .lp-input-group .lp-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    flex: 1;
}

[b-rje57qc6ts] .lp-input-suffix {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-left: none;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
    user-select: none;
}

/* Carryover fields animated appearance */
[b-rje57qc6ts] .lp-carryover-fields {
    animation: lpFadeSlide-b-rje57qc6ts 200ms ease forwards;
}

@keyframes lpFadeSlide-b-rje57qc6ts {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Toggle Switches */
[b-rje57qc6ts] .lp-toggles {
    margin-bottom: var(--space-3);
}

[b-rje57qc6ts] .lp-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

[b-rje57qc6ts] .lp-toggle input {
    display: none;
}

[b-rje57qc6ts] .lp-toggle-track {
    width: 34px;
    height: 18px;
    background: var(--bg-muted);
    border-radius: 4px;
    position: relative;
    transition: background 120ms ease;
    flex-shrink: 0;
}

[b-rje57qc6ts] .lp-toggle input:checked ~ .lp-toggle-track {
    background: var(--status-success-glow);
}

[b-rje57qc6ts] .lp-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: all 120ms ease;
}

[b-rje57qc6ts] .lp-toggle input:checked ~ .lp-toggle-track .lp-toggle-thumb {
    left: 18px;
    background: var(--status-success);
}

[b-rje57qc6ts] .lp-toggle-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Dialog Footer */
[b-rje57qc6ts] .lp-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* Spinner */
[b-rje57qc6ts] .lp-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid var(--status-success-muted);
    border-top-color: var(--status-success);
    border-radius: 50%;
    animation: lpSpin-b-rje57qc6ts 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes lpSpin-b-rje57qc6ts {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@@media (max-width: 768px) {
    [b-rje57qc6ts] .lp-command {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    [b-rje57qc6ts] .lp-command-right {
        width: 100%;
    }

    [b-rje57qc6ts] .lp-grid {
        grid-template-columns: 1fr;
    }

    [b-rje57qc6ts] .lp-item {
        border-right: none;
    }

    [b-rje57qc6ts] .lp-item:last-child {
        border-bottom: none;
    }

    [b-rje57qc6ts] .lp-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    [b-rje57qc6ts] .lp-field-row {
        grid-template-columns: 1fr;
    }

    [b-rje57qc6ts] .lp-history-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [b-rje57qc6ts] .lp-history-table {
        min-width: 680px;
    }

    [b-rje57qc6ts] .lp-dialog {
        width: 96vw;
        max-height: 88vh;
    }
}

@@media (max-width: 480px) {
    [b-rje57qc6ts] .lp-card-title-wrap {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    [b-rje57qc6ts] .lp-item-num {
        font-size: 1.2rem;
    }

    [b-rje57qc6ts] .lp-dialog {
        width: 100vw;
        max-height: 92vh;
        border-radius: 6px 6px 0 0;
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        animation: lpDialogSlideUp-b-rje57qc6ts 250ms ease forwards;
    }

    [b-rje57qc6ts] .lp-history-table th,
    [b-rje57qc6ts] .lp-history-table td {
        padding: 6px 8px;
        font-size: 0.72rem;
    }
}

@keyframes lpDialogSlideUp-b-rje57qc6ts {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/AgingReport.razor.rz.scp.css */
/* Date presets */
.date-presets[b-fdip0k1rf4] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.preset-chip[b-fdip0k1rf4] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.preset-chip:hover[b-fdip0k1rf4] {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.preset-chip.active[b-fdip0k1rf4] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border-color: var(--accent-primary);
}

/* Work Item Aging Report - Scoped Styles */

.chart-panel[b-fdip0k1rf4] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-4);
}

.chart-panel-title[b-fdip0k1rf4] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Critical highlight for zombie KPI card */
[b-fdip0k1rf4] .highlight-critical {
    border-color: var(--status-error-glow);
    box-shadow: 0 0 0 1px var(--status-error-muted);
}

/* Clickable KPI cards */
[b-fdip0k1rf4] .kpi-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

[b-fdip0k1rf4] .kpi-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-primary);
}

[b-fdip0k1rf4] .kpi-active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-muted);
}

[b-fdip0k1rf4] .kpi-active.highlight-critical {
    border-color: var(--status-error);
    box-shadow: 0 0 0 2px var(--status-error-glow);
}

/* Filter clear button */
[b-fdip0k1rf4] .filter-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

[b-fdip0k1rf4] .filter-clear-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--accent-primary-muted);
}

/* Days badge pill */
[b-fdip0k1rf4] .days-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-fdip0k1rf4] .days-badge.critical {
    background: var(--status-error-muted);
    color: var(--status-error);
}

[b-fdip0k1rf4] .days-badge.warning {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

[b-fdip0k1rf4] .days-badge.caution {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

[b-fdip0k1rf4] .days-badge.normal {
    background: var(--status-success-muted);
    color: var(--status-success);
}

/* Zombie item link */
[b-fdip0k1rf4] .zombie-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

[b-fdip0k1rf4] .zombie-link:hover {
    text-decoration: underline;
}

/* Table container for horizontal scroll on small screens */
[b-fdip0k1rf4] .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Empty state centering */
[b-fdip0k1rf4] .empty-state {
    margin-top: var(--space-8);
}

/* Pagination */
[b-fdip0k1rf4] .table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--border-primary);
    gap: 12px;
    flex-wrap: wrap;
}

[b-fdip0k1rf4] .pagination-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

[b-fdip0k1rf4] .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-fdip0k1rf4] .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

[b-fdip0k1rf4] .pagination-btn:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
}

[b-fdip0k1rf4] .pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

[b-fdip0k1rf4] .pagination-current {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 8px;
    min-width: 50px;
    text-align: center;
}

[b-fdip0k1rf4] .pagination-size {
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .chart-panel[b-fdip0k1rf4] {
        padding: 16px;
        border-radius: 8px;
    }

    [b-fdip0k1rf4] .table-pagination {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
/* /Pages/AlertPreferences.razor.rz.scp.css */
/* ================================================
   ALERT PREFERENCES PAGE
   ================================================ */

.alert-prefs-page[b-ubos9lfyzg] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- Page Header ---------- */
.prefs-page-header[b-ubos9lfyzg] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.prefs-back-btn[b-ubos9lfyzg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.prefs-back-btn:hover[b-ubos9lfyzg] {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.prefs-page-header h1[b-ubos9lfyzg] {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.prefs-page-subtitle[b-ubos9lfyzg] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: var(--space-1) 0 0 0;
    line-height: 1.5;
}

/* ---------- Sections Container ---------- */
.prefs-sections[b-ubos9lfyzg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ---------- Section ---------- */
.prefs-section[b-ubos9lfyzg] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.prefs-section-header[b-ubos9lfyzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-4);
}

.prefs-section-info[b-ubos9lfyzg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.prefs-section-badge[b-ubos9lfyzg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 800;
    flex-shrink: 0;
}

.prefs-section-badge.cat-user[b-ubos9lfyzg] {
    background: var(--status-info-muted);
    color: var(--status-info);
    border: 1px solid var(--accent-primary-muted);
}

.prefs-section-badge.cat-pm[b-ubos9lfyzg] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-glow);
}

.prefs-section-badge.cat-director[b-ubos9lfyzg] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
    border: 1px solid var(--accent-secondary-muted);
}

.prefs-section-header h2[b-ubos9lfyzg] {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.prefs-section-header p[b-ubos9lfyzg] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 2px 0 0 0;
    line-height: 1.4;
}

/* ---------- Mute All Button ---------- */
.prefs-mute-all-btn[b-ubos9lfyzg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.prefs-mute-all-btn:hover:not(:disabled)[b-ubos9lfyzg] {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.prefs-mute-all-btn.all-muted[b-ubos9lfyzg] {
    background: var(--status-success-muted);
    border-color: var(--status-success-glow);
    color: var(--status-success);
}

.prefs-mute-all-btn.all-muted:hover:not(:disabled)[b-ubos9lfyzg] {
    background: var(--status-success-muted);
}

.prefs-mute-all-btn:disabled[b-ubos9lfyzg] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Code List ---------- */
.prefs-code-list[b-ubos9lfyzg] {
    display: flex;
    flex-direction: column;
}

.pref-code-row[b-ubos9lfyzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-fast) ease;
    gap: var(--space-3);
}

.pref-code-row:last-child[b-ubos9lfyzg] {
    border-bottom: none;
}

.pref-code-row:hover[b-ubos9lfyzg] {
    background: var(--bg-row-hover);
}

.pref-code-row.muted[b-ubos9lfyzg] {
    opacity: 0.55;
}

.pref-code-row.muted:hover[b-ubos9lfyzg] {
    opacity: 0.75;
}

.pref-code-info[b-ubos9lfyzg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.pref-code-badge[b-ubos9lfyzg] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pref-code-badge.cat-user[b-ubos9lfyzg] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.pref-code-badge.cat-pm[b-ubos9lfyzg] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.pref-code-badge.cat-director[b-ubos9lfyzg] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.pref-code-name[b-ubos9lfyzg] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Toggle Switch ---------- */
.pref-code-controls[b-ubos9lfyzg] {
    flex-shrink: 0;
}

.pref-mute-toggle[b-ubos9lfyzg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
}

.pref-mute-toggle:disabled[b-ubos9lfyzg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-track[b-ubos9lfyzg] {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    transition: all var(--duration-fast) ease;
}

.pref-mute-toggle.is-active .toggle-track[b-ubos9lfyzg] {
    background: var(--status-success);
}

.pref-mute-toggle.is-muted .toggle-track[b-ubos9lfyzg] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

.toggle-thumb[b-ubos9lfyzg] {
    position: absolute;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-elevated);
    transition: all var(--duration-fast) ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pref-mute-toggle.is-active .toggle-thumb[b-ubos9lfyzg] {
    left: 18px;
}

.pref-mute-toggle.is-muted .toggle-thumb[b-ubos9lfyzg] {
    left: 2px;
    background: var(--text-muted);
    box-shadow: none;
}

.toggle-label[b-ubos9lfyzg] {
    font-size: 0.6875rem;
    font-weight: 600;
    min-width: 42px;
}

.pref-mute-toggle.is-active .toggle-label[b-ubos9lfyzg] {
    color: var(--status-success);
}

.pref-mute-toggle.is-muted .toggle-label[b-ubos9lfyzg] {
    color: var(--text-muted);
}

/* ---------- Saving Indicator ---------- */
.prefs-saving-indicator[b-ubos9lfyzg] {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.spin[b-ubos9lfyzg] {
    animation: spin-b-ubos9lfyzg 1s linear infinite;
}

@keyframes spin-b-ubos9lfyzg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Skeleton Loading ---------- */
.prefs-skeleton[b-ubos9lfyzg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.skeleton-section[b-ubos9lfyzg] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.skeleton-pulse[b-ubos9lfyzg] {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer-b-ubos9lfyzg 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-ubos9lfyzg {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* ---------- Responsive: 768px (Tablet) ---------- */
@media (max-width: 768px) {
    .alert-prefs-page[b-ubos9lfyzg] {
        padding: var(--space-4);
    }

    .prefs-page-header[b-ubos9lfyzg] {
        margin-bottom: var(--space-6);
    }

    .prefs-page-header h1[b-ubos9lfyzg] {
        font-size: 1.125rem;
    }

    .prefs-section-header[b-ubos9lfyzg] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .prefs-mute-all-btn[b-ubos9lfyzg] {
        align-self: flex-end;
    }

    .pref-code-row[b-ubos9lfyzg] {
        padding: var(--space-3) var(--space-4);
    }

    .pref-code-name[b-ubos9lfyzg] {
        font-size: 0.75rem;
    }
}

/* ---------- Responsive: 640px (Mobile) ---------- */
@media (max-width: 640px) {
    .alert-prefs-page[b-ubos9lfyzg] {
        padding: var(--space-3);
        padding-bottom: 80px;
    }

    .prefs-page-header[b-ubos9lfyzg] {
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .prefs-back-btn[b-ubos9lfyzg] {
        width: 32px;
        height: 32px;
    }

    .prefs-page-header h1[b-ubos9lfyzg] {
        font-size: 1rem;
    }

    .prefs-page-subtitle[b-ubos9lfyzg] {
        font-size: 0.75rem;
    }

    .prefs-sections[b-ubos9lfyzg] {
        gap: var(--space-4);
    }

    .prefs-section-info[b-ubos9lfyzg] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .prefs-section-badge[b-ubos9lfyzg] {
        width: 30px;
        height: 30px;
        font-size: 0.6875rem;
    }

    .prefs-section-header h2[b-ubos9lfyzg] {
        font-size: 0.8125rem;
    }

    .prefs-section-header p[b-ubos9lfyzg] {
        font-size: 0.6875rem;
    }

    .prefs-mute-all-btn[b-ubos9lfyzg] {
        padding: 5px 10px;
        font-size: 0.6875rem;
    }

    .pref-code-row[b-ubos9lfyzg] {
        padding: var(--space-2) var(--space-3);
    }

    .pref-code-info[b-ubos9lfyzg] {
        gap: var(--space-2);
    }

    .pref-code-badge[b-ubos9lfyzg] {
        font-size: 0.625rem;
        padding: 2px 6px;
    }

    .pref-code-name[b-ubos9lfyzg] {
        font-size: 0.6875rem;
    }

    .toggle-label[b-ubos9lfyzg] {
        display: none;
    }

    .prefs-saving-indicator[b-ubos9lfyzg] {
        bottom: var(--space-3);
        right: var(--space-3);
        padding: 8px 14px;
        font-size: 0.75rem;
    }
}

/* ---------- Touch Device Optimizations ---------- */
@media (hover: none) and (pointer: coarse) {
    .prefs-back-btn[b-ubos9lfyzg] {
        min-width: 40px;
        min-height: 40px;
    }

    .prefs-mute-all-btn[b-ubos9lfyzg] {
        min-height: 40px;
    }

    .pref-code-row[b-ubos9lfyzg] {
        min-height: 48px;
    }

    .pref-mute-toggle[b-ubos9lfyzg] {
        min-height: 40px;
        padding: 4px;
    }

    .toggle-track[b-ubos9lfyzg] {
        width: 42px;
        height: 24px;
    }

    .toggle-thumb[b-ubos9lfyzg] {
        width: 20px;
        height: 20px;
    }

    .pref-mute-toggle.is-active .toggle-thumb[b-ubos9lfyzg] {
        left: 20px;
    }

    /* Disable hover effects on touch */
    .pref-code-row:hover[b-ubos9lfyzg] {
        background: transparent;
    }

    .prefs-back-btn:hover[b-ubos9lfyzg] {
        background: transparent;
        color: var(--text-secondary);
    }
}
/* /Pages/Alerts.razor.rz.scp.css */
/* ================================================
       ALERT CENTER - COMMAND CENTER AESTHETIC
       ================================================ */

.alerts-command-center[b-cao2bqlwnb] {
    padding: var(--space-6);
}

/* ---------- Command Bar ---------- */
.command-bar[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}

.command-bar-left[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.command-bar-title[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.command-bar-icon[b-cao2bqlwnb] {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--status-error-muted) 0%, var(--status-warning-subtle) 100%);
    border: 1px solid var(--status-error-muted);
    border-radius: var(--radius-lg);
}

.command-bar-icon svg[b-cao2bqlwnb] {
    width: 22px;
    height: 22px;
    color: var(--status-error);
}

.command-bar-pulse[b-cao2bqlwnb] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--status-error);
    border-radius: 50%;
    border: 2px solid var(--bg-base);
    animation: pulse-ring-b-cao2bqlwnb 2s ease-in-out infinite;
}

@keyframes pulse-ring-b-cao2bqlwnb {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--status-error-glow);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(248, 113, 113, 0);
    }
}

.command-bar-title h1[b-cao2bqlwnb] {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.command-bar-subtitle[b-cao2bqlwnb] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.inline-critical[b-cao2bqlwnb] {
    color: var(--status-error);
    font-weight: 600;
    padding-left: var(--space-1);
}

.inline-critical[b-cao2bqlwnb]::before {
    content: '·';
    margin-right: var(--space-1);
    color: var(--text-muted);
}

.command-bar-actions[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[b-cao2bqlwnb] .scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
}

[b-cao2bqlwnb] .scope-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

[b-cao2bqlwnb] .scope-toggle input[type="checkbox"] {
    accent-color: var(--accent-primary);
    margin: 0;
    cursor: pointer;
}

[b-cao2bqlwnb] .scope-toggle-label {
    font-weight: 500;
}

.cmd-btn[b-cao2bqlwnb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out-expo);
    white-space: nowrap;
}

.cmd-btn-primary[b-cao2bqlwnb] {
    background: var(--status-info-muted);
    border-color: var(--accent-primary-border);
    color: var(--status-info);
}

.cmd-btn-primary:hover[b-cao2bqlwnb] {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-muted);
}

.cmd-btn-ghost[b-cao2bqlwnb] {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-secondary);
}

.cmd-btn-ghost:hover[b-cao2bqlwnb] {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.cmd-btn-icon[b-cao2bqlwnb] {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

.cmd-btn-icon:hover[b-cao2bqlwnb] {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.spin[b-cao2bqlwnb] {
    animation: spin-b-cao2bqlwnb 1s linear infinite;
}

@keyframes spin-b-cao2bqlwnb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------- 3-Column Grid ---------- */
.alerts-grid[b-cao2bqlwnb] {
    display: grid;
    grid-template-columns: 160px 1fr 260px;
    gap: var(--space-4);
    align-items: start;
}

/* ---------- Severity Rail (Left) ---------- */
.severity-rail[b-cao2bqlwnb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: sticky;
    top: 80px;
}

.severity-pill[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    font-family: var(--font-body);
}

.severity-pill:hover[b-cao2bqlwnb] {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

.severity-pill.active[b-cao2bqlwnb] {
    border-color: var(--accent-primary);
    background: var(--status-info-muted);
}

.severity-pill.active.critical[b-cao2bqlwnb] {
    border-color: var(--status-error);
    background: var(--status-error-muted);
}

.severity-pill.active.warning[b-cao2bqlwnb] {
    border-color: var(--status-warning);
    background: var(--status-warning-muted);
}

.severity-pill.active.info[b-cao2bqlwnb] {
    border-color: var(--status-info);
    background: var(--status-info-muted);
}

.severity-dot[b-cao2bqlwnb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.severity-dot.critical[b-cao2bqlwnb] {
    background: var(--status-error);
}

.severity-dot.warning[b-cao2bqlwnb] {
    background: var(--status-warning);
}

.severity-dot.info[b-cao2bqlwnb] {
    background: var(--status-info);
}

.severity-count[b-cao2bqlwnb] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.severity-label[b-cao2bqlwnb] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.rail-divider[b-cao2bqlwnb] {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-2) 0;
}

.rail-toggle[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) ease;
}

.rail-toggle:hover[b-cao2bqlwnb] {
    color: var(--text-secondary);
}

/* ---------- Alert-Specific Filter Extras ---------- */
/* Code indicator badges (U-/P-/D- prefix colors) */
.al-code-indicator[b-cao2bqlwnb] {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.al-code-indicator.user[b-cao2bqlwnb] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.al-code-indicator.pm[b-cao2bqlwnb] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.al-code-indicator.director[b-cao2bqlwnb] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

/* Filter pill dot colors (alert-specific) */
[b-cao2bqlwnb] .cf-pill-dot.project { background: var(--accent-secondary); }
[b-cao2bqlwnb] .cf-pill-dot.alertcode { background: var(--status-warning); }
[b-cao2bqlwnb] .cf-pill-dot.user { background: var(--status-error); }
[b-cao2bqlwnb] .cf-pill-dot.search { background: var(--status-info); }

/* Standalone filter count */
.al-filter-count-standalone[b-cao2bqlwnb] {
    margin-bottom: var(--space-3);
}

/* ---------- Alert Feed ---------- */
.alert-feed[b-cao2bqlwnb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-separator[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-2);
}

.day-label[b-cao2bqlwnb] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.day-line[b-cao2bqlwnb] {
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.day-count[b-cao2bqlwnb] {
    font-size: 0.625rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    font-variant-numeric: tabular-nums;
}

/* ---------- Alert Card ---------- */
.alert-card[b-cao2bqlwnb] {
    display: flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--duration-fast) ease;
    margin-bottom: var(--space-2);
}

.alert-card:hover[b-cao2bqlwnb] {
    border-color: var(--border-default);
    background: var(--bg-surface);
}

.alert-card.unread[b-cao2bqlwnb] {
    border-left-width: 0;
}

.alert-card.dismissed[b-cao2bqlwnb] {
    opacity: 0.5;
}

.alert-card.snoozed[b-cao2bqlwnb] {
    opacity: 0.65;
}

.alert-checkbox[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px 0 12px;
    flex-shrink: 0;
    cursor: pointer;
}

.alert-card.selected[b-cao2bqlwnb] {
    border-color: var(--accent-primary-muted);
    background: var(--accent-primary-muted);
}

.alert-severity-bar[b-cao2bqlwnb] {
    width: 3px;
    flex-shrink: 0;
}

.alert-severity-bar.critical[b-cao2bqlwnb] {
    background: var(--status-error);
}

.alert-severity-bar.warning[b-cao2bqlwnb] {
    background: var(--status-warning);
}

.alert-severity-bar.info[b-cao2bqlwnb] {
    background: var(--status-info);
}

.alert-body[b-cao2bqlwnb] {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    min-width: 0;
}

.alert-row-top[b-cao2bqlwnb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 4px;
}

.alert-identity[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.alert-code-badge[b-cao2bqlwnb] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.alert-code-badge.critical[b-cao2bqlwnb] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.alert-code-badge.warning[b-cao2bqlwnb] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.alert-code-badge.info[b-cao2bqlwnb] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.alert-title-text[b-cao2bqlwnb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-status-tags[b-cao2bqlwnb] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.tag[b-cao2bqlwnb] {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-new[b-cao2bqlwnb] {
    background: var(--accent-primary-muted);
    color: var(--status-info);
}

.tag-snoozed[b-cao2bqlwnb] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.tag-escalated[b-cao2bqlwnb] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.tag-ack[b-cao2bqlwnb] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.tag-resolved[b-cao2bqlwnb] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.tag-count[b-cao2bqlwnb] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    font-variant-numeric: tabular-nums;
}

.alert-desc[b-cao2bqlwnb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.alert-row-bottom[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.alert-meta-row[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}

.meta-chip[b-cao2bqlwnb] {
    font-size: 0.6875rem;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-chip.type[b-cao2bqlwnb] {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.meta-chip.category[b-cao2bqlwnb] {
    background: var(--bg-surface);
    color: var(--text-muted);
}

.meta-chip.project[b-cao2bqlwnb] {
    background: var(--status-info-muted);
    color: var(--accent-primary);
    text-decoration: none;
    transition: background var(--duration-fast) ease;
}

.meta-chip.project:hover[b-cao2bqlwnb] {
    background: var(--accent-primary-muted);
}

.meta-chip.target-user[b-cao2bqlwnb] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.meta-chip.ado[b-cao2bqlwnb] {
    background: var(--status-info-muted);
    color: var(--accent-primary);
    text-decoration: none;
    transition: background var(--duration-fast) ease;
}

.meta-chip.ado:hover[b-cao2bqlwnb] {
    background: var(--accent-primary-muted);
}

.meta-time[b-cao2bqlwnb] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* ---------- Alert Actions ---------- */
.alert-actions-row[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.action-btn[b-cao2bqlwnb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}

.action-btn:hover[b-cao2bqlwnb] {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.action-ack:hover[b-cao2bqlwnb] {
    border-color: var(--status-success-glow);
    color: var(--status-success);
}

.action-snooze:hover[b-cao2bqlwnb] {
    border-color: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.action-unsnooze:hover[b-cao2bqlwnb] {
    border-color: var(--accent-primary-muted);
    color: var(--status-info);
}

.action-dismiss[b-cao2bqlwnb] {
    padding: 4px 6px;
}

.action-dismiss:hover[b-cao2bqlwnb] {
    border-color: var(--status-error-glow);
    color: var(--status-error);
}

/* ---------- Pagination ---------- */
.pagination-bar[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.pag-btn[b-cao2bqlwnb] {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    font-variant-numeric: tabular-nums;
}

.pag-btn:hover:not(:disabled)[b-cao2bqlwnb] {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.pag-btn:disabled[b-cao2bqlwnb] {
    opacity: 0.3;
    cursor: not-allowed;
}

.pag-btn.current[b-cao2bqlwnb] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-primary);
}

/* ---------- Empty Feed ---------- */
.empty-feed[b-cao2bqlwnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty-icon[b-cao2bqlwnb] {
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: var(--space-4);
}

.empty-feed h3[b-cao2bqlwnb] {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.empty-feed p[b-cao2bqlwnb] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ---------- Stats Sidebar (Right) ---------- */
.stats-sidebar[b-cao2bqlwnb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: sticky;
    top: 80px;
}

.stat-block[b-cao2bqlwnb] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.stat-block-header[b-cao2bqlwnb] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

/* Severity Bars */
.severity-bars[b-cao2bqlwnb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sev-bar-row[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sev-bar-label[b-cao2bqlwnb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 70px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sev-bar-track[b-cao2bqlwnb] {
    flex: 1;
    height: 6px;
    background: var(--bg-surface);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sev-bar-fill[b-cao2bqlwnb] {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out-expo);
    min-width: 2px;
}

.sev-bar-fill.critical[b-cao2bqlwnb] {
    background: var(--status-error);
}

.sev-bar-fill.warning[b-cao2bqlwnb] {
    background: var(--status-warning);
}

.sev-bar-fill.info[b-cao2bqlwnb] {
    background: var(--status-info);
}

.sev-bar-value[b-cao2bqlwnb] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Stat Grid */
.stat-grid-2[b-cao2bqlwnb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.stat-mini[b-cao2bqlwnb] {
    padding: var(--space-2);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    text-align: center;
}

.stat-mini-value[b-cao2bqlwnb] {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.stat-mini-label[b-cao2bqlwnb] {
    font-size: 0.625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Category List */
.category-list[b-cao2bqlwnb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-row[b-cao2bqlwnb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) ease;
}

.cat-row.clickable[b-cao2bqlwnb] {
    cursor: pointer;
}

.cat-row.clickable:hover[b-cao2bqlwnb] {
    background: var(--bg-surface);
}

.cat-code[b-cao2bqlwnb] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--accent-primary);
    width: 32px;
    flex-shrink: 0;
}

.cat-name[b-cao2bqlwnb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-count[b-cao2bqlwnb] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---------- Skeletons ---------- */
.skeleton-pulse[b-cao2bqlwnb] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    animation: skeleton-shimmer-b-cao2bqlwnb 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-cao2bqlwnb {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

/* ---------- Responsive ---------- */

/* === 1200px: Collapse 3-column → single column === */
@media (max-width: 1200px) {
    .alerts-grid[b-cao2bqlwnb] {
        grid-template-columns: 1fr;
    }

    .severity-rail[b-cao2bqlwnb] {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        gap: var(--space-2);
    }

    .rail-divider[b-cao2bqlwnb] {
        width: 1px;
        height: 32px;
        margin: 0 var(--space-2);
    }

    .stats-sidebar[b-cao2bqlwnb] {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* === 768px: Stack command bar, bottom sections === */
@media (max-width: 768px) {
    .alerts-command-center[b-cao2bqlwnb] {
        padding: var(--space-4);
    }

    .command-bar[b-cao2bqlwnb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .command-bar-actions[b-cao2bqlwnb] {
        width: 100%;
        flex-wrap: wrap;
    }

    .alert-row-top[b-cao2bqlwnb] {
        flex-direction: column;
        gap: 4px;
    }

    .alert-status-tags[b-cao2bqlwnb] {
        flex-wrap: wrap;
        align-self: flex-start;
    }

    .alert-row-bottom[b-cao2bqlwnb] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .alert-actions-row[b-cao2bqlwnb] {
        width: 100%;
        justify-content: flex-start;
    }

    .meta-time[b-cao2bqlwnb] {
        margin-left: 0;
    }

    /* Severity rail — horizontal scroll */
    .severity-rail[b-cao2bqlwnb] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .severity-rail[b-cao2bqlwnb]::-webkit-scrollbar { display: none; }

    .severity-pill[b-cao2bqlwnb] {
        flex-shrink: 0;
    }

    .cb-toggle[b-cao2bqlwnb] {
        flex-shrink: 0;
    }
}

/* === 640px: Full mobile layout === */
@media (max-width: 640px) {
    .alerts-command-center[b-cao2bqlwnb] {
        padding: var(--space-3);
        padding-bottom: 80px;
    }

    .command-bar[b-cao2bqlwnb] {
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .command-bar-title[b-cao2bqlwnb] {
        gap: var(--space-3);
    }

    .command-bar h1[b-cao2bqlwnb] {
        font-size: 1.125rem;
    }

    .command-bar-icon[b-cao2bqlwnb] {
        width: 36px;
        height: 36px;
    }

    .command-bar-icon svg[b-cao2bqlwnb] {
        width: 18px;
        height: 18px;
    }

    .command-bar-subtitle[b-cao2bqlwnb] {
        font-size: 0.75rem;
    }

    .command-bar-actions[b-cao2bqlwnb] {
        gap: var(--space-1);
    }

    .cmd-btn[b-cao2bqlwnb] {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .cmd-btn-icon[b-cao2bqlwnb] {
        width: 32px;
        height: 32px;
    }

    .severity-rail[b-cao2bqlwnb] {
        gap: 6px;
    }

    .severity-pill[b-cao2bqlwnb] {
        padding: 5px 8px;
        gap: 4px;
        border-radius: var(--radius-sm);
    }

    .severity-count[b-cao2bqlwnb] {
        font-size: 0.8125rem;
    }

    .severity-label[b-cao2bqlwnb] {
        font-size: 0.6875rem;
    }

    .severity-dot[b-cao2bqlwnb] {
        width: 6px;
        height: 6px;
    }

    .rail-divider[b-cao2bqlwnb] {
        width: 1px;
        height: 20px;
        margin: 0 2px;
    }

    .cb-toggle[b-cao2bqlwnb] {
        font-size: 0.6875rem;
        padding: 4px 8px;
    }

    .day-separator[b-cao2bqlwnb] {
        padding: var(--space-2) 0;
    }

    .day-label[b-cao2bqlwnb] {
        font-size: 0.625rem;
    }

    .alert-card[b-cao2bqlwnb] {
        border-radius: var(--radius-md);
        margin-bottom: 6px;
    }

    .alert-checkbox[b-cao2bqlwnb] {
        padding: 0 6px 0 8px;
    }

    .alert-body[b-cao2bqlwnb] {
        padding: var(--space-2) var(--space-3);
    }

    .alert-title-text[b-cao2bqlwnb] {
        font-size: 0.8125rem;
        white-space: normal;
        line-height: 1.3;
    }

    .alert-code-badge[b-cao2bqlwnb] {
        font-size: 0.625rem;
        padding: 1px 5px;
    }

    .alert-desc[b-cao2bqlwnb] {
        font-size: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
        margin-bottom: var(--space-1);
    }

    .tag[b-cao2bqlwnb] {
        font-size: 0.5rem;
        padding: 1px 4px;
        letter-spacing: 0.04em;
    }

    .alert-meta-row[b-cao2bqlwnb] {
        gap: 4px;
    }

    .meta-chip[b-cao2bqlwnb] {
        font-size: 0.625rem;
        padding: 1px 5px;
    }

    .alert-actions-row[b-cao2bqlwnb] {
        gap: 6px;
    }

    .action-btn[b-cao2bqlwnb] {
        padding: 5px 8px;
        font-size: 0.625rem;
        border-radius: var(--radius-sm);
    }

    .stats-sidebar[b-cao2bqlwnb] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .stat-block[b-cao2bqlwnb] {
        padding: var(--space-3);
    }

    .stat-block-header[b-cao2bqlwnb] {
        font-size: 0.625rem;
        margin-bottom: var(--space-2);
    }

    .stat-mini-value[b-cao2bqlwnb] {
        font-size: 0.9375rem;
    }

    .stat-mini-label[b-cao2bqlwnb] {
        font-size: 0.5625rem;
    }

    .sev-bar-label[b-cao2bqlwnb] {
        font-size: 0.6875rem;
        width: 60px;
    }

    .sev-bar-value[b-cao2bqlwnb] {
        font-size: 0.6875rem;
        width: 24px;
    }

    .cat-row[b-cao2bqlwnb] {
        padding: 3px 6px;
    }

    .cat-code[b-cao2bqlwnb] {
        font-size: 0.625rem;
        width: 28px;
    }

    .cat-name[b-cao2bqlwnb] {
        font-size: 0.6875rem;
    }

    .cat-count[b-cao2bqlwnb] {
        font-size: 0.6875rem;
    }

    .pagination-bar[b-cao2bqlwnb] {
        flex-wrap: wrap;
        gap: 3px;
    }

    .pag-btn[b-cao2bqlwnb] {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* === Touch device optimizations === */
@media (hover: none) and (pointer: coarse) {
    .cmd-btn[b-cao2bqlwnb] {
        min-height: 40px;
    }

    .action-btn[b-cao2bqlwnb] {
        min-height: 36px;
        min-width: 36px;
    }

    .pag-btn[b-cao2bqlwnb] {
        min-width: 40px;
        min-height: 40px;
    }

    .severity-pill[b-cao2bqlwnb] {
        min-height: 40px;
    }

    .cb-toggle[b-cao2bqlwnb] {
        min-height: 36px;
    }

    /* Disable hover effects on touch */
    .alert-card:hover[b-cao2bqlwnb] {
        background: var(--bg-elevated);
        border-color: var(--border-subtle);
    }

    .cat-row.clickable:hover[b-cao2bqlwnb] {
        background: transparent;
    }
}
/* /Pages/AuthCallback.razor.rz.scp.css */
.auth-callback-page[b-ckhsfpn0x3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    padding: var(--space-4);
}

.auth-callback-container[b-ckhsfpn0x3] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.auth-callback-content[b-ckhsfpn0x3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.auth-spinner[b-ckhsfpn0x3] {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-4);
}

.spinner-ring[b-ckhsfpn0x3] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spin-b-ckhsfpn0x3 1.5s ease-in-out infinite;
}

.spinner-ring:nth-child(1)[b-ckhsfpn0x3] {
    border-top-color: var(--accent-primary);
    animation-delay: 0s;
}

.spinner-ring:nth-child(2)[b-ckhsfpn0x3] {
    width: 65%;
    height: 65%;
    top: 17.5%;
    left: 17.5%;
    border-right-color: var(--accent-primary);
    animation-delay: 0.15s;
    animation-direction: reverse;
}

.spinner-ring:nth-child(3)[b-ckhsfpn0x3] {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-bottom-color: var(--accent-secondary);
    animation-delay: 0.3s;
}

@keyframes spin-b-ckhsfpn0x3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.auth-title[b-ckhsfpn0x3] {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.auth-title.error[b-ckhsfpn0x3] {
    color: var(--status-error);
}

.auth-subtitle[b-ckhsfpn0x3] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

.error-icon[b-ckhsfpn0x3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--status-error-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-error);
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.error-message[b-ckhsfpn0x3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-glow);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--status-error);
    text-align: left;
    width: 100%;
}

.return-btn[b-ckhsfpn0x3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-on-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--space-4);
}

.return-btn:hover[b-ckhsfpn0x3] {
    background: var(--accent-primary-hover);
    transform: translateY(-1px);
}

.animate-in[b-ckhsfpn0x3] {
    animation: fadeSlideIn-b-ckhsfpn0x3 0.4s ease-out;
}

@keyframes fadeSlideIn-b-ckhsfpn0x3 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/ClientPortal.razor.rz.scp.css */
/* Admin preview filter bar */
.admin-filter-bar[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 12px 16px;
    margin-bottom: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.admin-filter-badge[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-filter-controls[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    flex-wrap: wrap;
}

/* Action KPI Cards */
.action-panel.your-actions[b-gz6wns3dyv] {
    border-left: 3px solid var(--status-warning);
}

.action-panel.collab-impact[b-gz6wns3dyv] {
    border-left: 3px solid var(--accent-primary);
}

.action-kpi-grid[b-gz6wns3dyv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.action-kpi-card[b-gz6wns3dyv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.action-kpi-card.has-action[b-gz6wns3dyv] {
    border-color: var(--border-default);
    box-shadow: 0 0 0 1px var(--border-subtle);
}

.action-kpi-icon[b-gz6wns3dyv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.action-kpi-value[b-gz6wns3dyv] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1;
    margin-bottom: 4px;
}

.action-kpi-label[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Action item lists */
.action-items-section[b-gz6wns3dyv] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.action-items-title[b-gz6wns3dyv] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 8px;
}

.action-item-row[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.82rem;
}

.action-item-row + .action-item-row[b-gz6wns3dyv] {
    border-top: 1px solid var(--border-subtle);
}

.action-item-title[b-gz6wns3dyv] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-item-meta[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.action-item-days[b-gz6wns3dyv] {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.action-item-days.overdue[b-gz6wns3dyv] {
    color: var(--status-error);
    font-weight: 600;
}

/* Collaborator table */
.collab-table[b-gz6wns3dyv] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

[b-gz6wns3dyv] .mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

[b-gz6wns3dyv] .mini-table th {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-default);
}

[b-gz6wns3dyv] .mini-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

[b-gz6wns3dyv] .mini-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Smart KPI cards */
.smart-kpi[b-gz6wns3dyv] {
    position: relative;
}

.smart-kpi-sub[b-gz6wns3dyv] {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.smart-kpi-progress[b-gz6wns3dyv] {
    width: 60%;
    height: 4px;
    background: var(--surface-secondary);
    border-radius: 2px;
    overflow: hidden;
    margin: 4px auto;
}

.smart-kpi-progress-fill[b-gz6wns3dyv] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.kpi-icon-center[b-gz6wns3dyv] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}

.client-projects-grid[b-gz6wns3dyv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.client-project-card[b-gz6wns3dyv] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
}

.client-project-card:hover[b-gz6wns3dyv] {
    border-color: var(--border-default);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.client-project-card:hover .client-project-arrow[b-gz6wns3dyv] {
    opacity: 1;
    transform: translateX(0);
}

.client-project-header[b-gz6wns3dyv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.client-project-info[b-gz6wns3dyv] {
    flex: 1;
    min-width: 0;
}

.client-project-name[b-gz6wns3dyv] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.client-project-abbr[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.client-project-progress[b-gz6wns3dyv] {
    margin-bottom: var(--space-4);
}

.client-progress-header[b-gz6wns3dyv] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.client-progress-value[b-gz6wns3dyv] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary);
}

.client-project-stats[b-gz6wns3dyv] {
    display: flex;
    justify-content: space-around;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.client-stat[b-gz6wns3dyv] {
    text-align: center;
}

.client-stat-value[b-gz6wns3dyv] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-primary);
    display: block;
}

.client-stat-value.success[b-gz6wns3dyv] {
    color: var(--status-success);
}

.client-stat-label[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.client-project-activity[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-3);
}

.client-project-arrow[b-gz6wns3dyv] {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.25s ease;
}

.work-item-id[b-gz6wns3dyv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.work-item-title[b-gz6wns3dyv] {
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.project-name[b-gz6wns3dyv] {
    font-weight: 500;
    color: var(--text-primary);
}

.activity-date[b-gz6wns3dyv] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.status-chip.bug[b-gz6wns3dyv] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.status-chip.feature[b-gz6wns3dyv] {
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
}

.status-chip.userstory[b-gz6wns3dyv] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.status-chip.task[b-gz6wns3dyv] {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.status-chip.epic[b-gz6wns3dyv] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.status-chip.new[b-gz6wns3dyv] {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.status-chip.active[b-gz6wns3dyv] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.status-chip.resolved[b-gz6wns3dyv] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.status-chip.closed[b-gz6wns3dyv] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.status-chip.removed[b-gz6wns3dyv] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.status-chip.reopened[b-gz6wns3dyv] {
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
}

@media (max-width: 768px) {
    .work-item-title[b-gz6wns3dyv] {
        max-width: 200px;
    }

    .dashboard-grid[b-gz6wns3dyv] {
        grid-template-columns: 1fr;
    }

    .table-container[b-gz6wns3dyv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-gz6wns3dyv] {
        min-width: 500px;
    }

    .client-projects-grid[b-gz6wns3dyv] {
        grid-template-columns: 1fr;
    }

    .client-project-card:hover[b-gz6wns3dyv] {
        transform: none;
    }
}

@media (max-width: 640px) {
    .work-item-title[b-gz6wns3dyv] {
        max-width: 140px;
    }

    .data-table th[b-gz6wns3dyv],
    .data-table td[b-gz6wns3dyv] {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    .client-project-card[b-gz6wns3dyv] {
        padding: var(--space-4);
    }

    .client-project-name[b-gz6wns3dyv] {
        font-size: 0.9375rem;
    }

    .client-stat-value[b-gz6wns3dyv] {
        font-size: 1rem;
    }

    .client-project-stats[b-gz6wns3dyv] {
        padding: var(--space-2) 0;
        gap: var(--space-2);
    }

    .kpi-icon-center[b-gz6wns3dyv] {
        width: 40px;
        height: 40px;
    }

    .client-project-arrow[b-gz6wns3dyv] {
        display: none;
    }
}

/* ============================
   MILESTONE STYLES
   ============================ */
.milestone-list[b-gz6wns3dyv] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.milestone-item[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-surface);
    border-radius: 8px;
    border-left: 3px solid var(--border-subtle);
}

.milestone-item.current[b-gz6wns3dyv] {
    border-left-color: var(--accent-primary);
}

.milestone-icon[b-gz6wns3dyv] {
    flex-shrink: 0;
}

.milestone-content[b-gz6wns3dyv] {
    flex: 1;
    min-width: 0;
}

.milestone-header[b-gz6wns3dyv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.milestone-info[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.milestone-name[b-gz6wns3dyv] {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.milestone-project[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-disabled);
}

.milestone-date[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-disabled);
    white-space: nowrap;
}

.milestone-progress[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.milestone-progress-track[b-gz6wns3dyv] {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-subtle);
    overflow: hidden;
}

.milestone-progress-fill[b-gz6wns3dyv] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
}

.milestone-days-left[b-gz6wns3dyv] {
    font-size: 0.7rem;
    color: var(--text-disabled);
    white-space: nowrap;
}

.milestone-date-range[b-gz6wns3dyv] {
    font-size: 0.75rem;
    color: var(--text-disabled);
    margin-top: 2px;
}

/* ============================
   TIMELINE STYLES
   ============================ */
.timeline-list[b-gz6wns3dyv] {
    padding: var(--space-4);
}

.timeline-item[b-gz6wns3dyv] {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.timeline-item:last-child[b-gz6wns3dyv] {
    border-bottom: none;
}

.timeline-icon-wrap[b-gz6wns3dyv] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-icon[b-gz6wns3dyv] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--text-on-primary);
}

.timeline-content[b-gz6wns3dyv] {
    flex: 1;
    min-width: 0;
}

.timeline-row[b-gz6wns3dyv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.timeline-details[b-gz6wns3dyv] {
    min-width: 0;
}

.timeline-title[b-gz6wns3dyv] {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}

.timeline-title:hover[b-gz6wns3dyv] {
    text-decoration: underline;
}

.timeline-meta[b-gz6wns3dyv] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.timeline-id[b-gz6wns3dyv] {
    font-size: 0.7rem;
    color: var(--text-disabled);
}

.timeline-time[b-gz6wns3dyv] {
    font-size: 0.7rem;
    color: var(--text-disabled);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================
   RESPONSIVE - MILESTONES & TIMELINE
   ============================ */
@media (max-width: 640px) {
    .milestone-list[b-gz6wns3dyv] {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .milestone-item[b-gz6wns3dyv] {
        padding: 10px;
        gap: 8px;
    }

    .milestone-header[b-gz6wns3dyv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .milestone-name[b-gz6wns3dyv] {
        font-size: 0.8rem;
    }

    .timeline-list[b-gz6wns3dyv] {
        padding: var(--space-3);
    }

    .timeline-row[b-gz6wns3dyv] {
        flex-direction: column;
        gap: 4px;
    }

    .timeline-time[b-gz6wns3dyv] {
        order: -1;
    }

    .timeline-title[b-gz6wns3dyv] {
        font-size: 0.8rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .client-project-card:hover[b-gz6wns3dyv] {
        transform: none;
        box-shadow: none;
    }

    .client-project-card:active[b-gz6wns3dyv] {
        border-color: var(--border-default);
    }
}

/* Delivery Journey */
[b-gz6wns3dyv] .delivery-journey {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    padding: 8px 0 4px;
    overflow-x: auto;
}

[b-gz6wns3dyv] .journey-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 70px;
    position: relative;
}

[b-gz6wns3dyv] .journey-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border-default);
    background: var(--bg-primary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

[b-gz6wns3dyv] .journey-stage.completed .journey-dot {
    background: var(--status-success);
    border-color: var(--status-success);
    box-shadow: 0 0 0 3px var(--status-success-muted);
}

[b-gz6wns3dyv] .journey-stage.current .journey-dot {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-muted);
    animation: journey-pulse-b-gz6wns3dyv 2s ease-in-out infinite;
}

[b-gz6wns3dyv] .journey-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-align: center;
    white-space: nowrap;
}

[b-gz6wns3dyv] .journey-stage.completed .journey-label {
    color: var(--status-success);
}

[b-gz6wns3dyv] .journey-stage.current .journey-label {
    color: var(--accent-primary);
    font-weight: 600;
}

[b-gz6wns3dyv] .journey-date {
    font-size: 0.6rem;
    color: var(--text-muted);
}

[b-gz6wns3dyv] .journey-connector {
    flex: 1;
    height: 2px;
    min-width: 20px;
    background: var(--border-default);
    margin: 0 -2px;
    align-self: flex-start;
    margin-top: 5px;
}

[b-gz6wns3dyv] .journey-connector.completed {
    background: var(--status-success);
}

@keyframes journey-pulse-b-gz6wns3dyv {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-primary-muted); }
    50% { box-shadow: 0 0 0 6px var(--accent-primary-muted); }
}
/* /Pages/CycleTimeAnalytics.razor.rz.scp.css */
/* Date presets */
.date-presets[b-gq48efzs4a] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.preset-chip[b-gq48efzs4a] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.preset-chip:hover[b-gq48efzs4a] {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.preset-chip.active[b-gq48efzs4a] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border-color: var(--accent-primary);
}

/* Cycle Time Analytics - Scoped Styles */

.chart-panel[b-gq48efzs4a] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-4);
}

.chart-panel-title[b-gq48efzs4a] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Table container for horizontal scroll on small screens */
[b-gq48efzs4a] .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Work item type chips */
[b-gq48efzs4a] .type-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-gq48efzs4a] .type-bug {
    background: var(--status-error-muted);
    color: var(--status-error);
}

[b-gq48efzs4a] .type-task {
    background: var(--status-info-muted);
    color: var(--status-info);
}

[b-gq48efzs4a] .type-story {
    background: var(--status-success-muted);
    color: var(--status-success);
}

[b-gq48efzs4a] .type-feature {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

[b-gq48efzs4a] .type-epic {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

[b-gq48efzs4a] .type-default {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

/* Empty state centering */
[b-gq48efzs4a] .empty-state {
    margin-top: var(--space-8);
}

/* State Dwell Time bar chart */
.severity-chart[b-gq48efzs4a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.severity-row[b-gq48efzs4a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.severity-label[b-gq48efzs4a] {
    width: 100px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.severity-bar-track[b-gq48efzs4a] {
    flex: 1;
    height: 20px;
    background: var(--surface-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.severity-bar-fill[b-gq48efzs4a] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.severity-count[b-gq48efzs4a] {
    width: 80px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
    font-family: var(--font-mono);
}

/* Responsive */
@media (max-width: 768px) {
    .chart-panel[b-gq48efzs4a] {
        padding: 16px;
        border-radius: 8px;
    }
}
/* /Pages/Dashboards/OperationsDashboard.razor.rz.scp.css */
/* Operations Dashboard — TV-quality glass-morphism (Theme-aware) */

/* ═══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Dark theme default, mapped to app theme
   ═══════════════════════════════════════════════════════════════ */

[b-8tz9a71uyr] {
    /* Core palette — derive from app theme vars */
    --ops-bg: var(--bg-base, #0a0d12);
    --ops-bg-gradient: linear-gradient(135deg, var(--bg-base, #0a0d12) 0%, var(--bg-elevated, #111419) 40%, var(--bg-surface, #181c23) 70%, var(--bg-base, #0a0d12) 100%);
    --ops-surface: var(--bg-surface, rgba(15, 23, 42, 0.7));
    --ops-surface-solid: var(--bg-surface, #181c23);
    --ops-glass: var(--bg-track, rgba(255, 255, 255, 0.03));
    --ops-glass-border: var(--border-subtle, rgba(255, 255, 255, 0.06));
    --ops-border: var(--border-subtle, rgba(255, 255, 255, 0.06));
    --ops-border-bright: var(--accent-primary-border, rgba(56, 189, 248, 0.15));
    --ops-text: var(--text-primary, #f1f5f9);
    --ops-text-dim: var(--text-secondary, #94a3b8);
    --ops-dim: var(--text-muted, #64748b);

    /* Neon accent colors */
    --ops-neon: #00f5d4;
    --ops-cyan: #38bdf8;
    --ops-green: #06ffa5;
    --ops-amber: #ffbe0b;
    --ops-rose: #ff006e;
    --ops-purple: #8338ec;
    --ops-orange: #fb5607;
    --ops-red: #f87171;
    --ops-muted: #64748b;

    /* Typography */
    --ops-mono: 'Cascadia Mono', 'Consolas', 'SF Mono', 'Courier New', monospace;
    --ops-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Spacing & effects */
    --ops-radius: 16px;
    --ops-radius-sm: 10px;
    --ops-grid-line: rgba(255, 255, 255, 0.015);
    --ops-hover: var(--bg-row-hover, rgba(0, 245, 212, 0.03));
    --ops-active-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(0, 245, 212, 0.15));
    --ops-active-border: rgba(0, 245, 212, 0.2);
    --ops-table-head-bg: var(--bg-elevated, rgba(15, 23, 42, 0.95));
    --ops-accent-height: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDE — toggled via .ops-light class on root
   ═══════════════════════════════════════════════════════════════ */
[b-8tz9a71uyr] .ops-light {
    --ops-bg: var(--bg-base, #f8fafc);
    --ops-bg-gradient: linear-gradient(135deg, var(--bg-base, #f8fafc) 0%, var(--bg-elevated, #ffffff) 40%, var(--bg-surface-hover, #f1f5f9) 70%, var(--bg-base, #f8fafc) 100%);
    --ops-surface: var(--bg-surface, rgba(255, 255, 255, 0.85));
    --ops-surface-solid: var(--bg-surface, #ffffff);
    --ops-glass: var(--bg-track, rgba(0, 0, 0, 0.02));
    --ops-glass-border: var(--border-subtle, rgba(0, 0, 0, 0.08));
    --ops-border: var(--border-subtle, rgba(0, 0, 0, 0.08));
    --ops-border-bright: var(--accent-primary-border, rgba(2, 132, 199, 0.2));
    --ops-text: var(--text-primary, #0f172a);
    --ops-text-dim: var(--text-secondary, #475569);
    --ops-dim: var(--text-muted, #94a3b8);

    /* Deep accent colors — high contrast on white (WCAG AA+) */
    --ops-neon: #0f766e;
    --ops-cyan: #0c4a6e;
    --ops-green: #166534;
    --ops-amber: #92400e;
    --ops-rose: #9f1239;
    --ops-purple: #5b21b6;
    --ops-orange: #9a3412;
    --ops-red: #991b1b;
    --ops-muted: #64748b;

    --ops-grid-line: rgba(0, 0, 0, 0.03);
    --ops-hover: var(--bg-row-hover, rgba(5, 150, 105, 0.04));
    --ops-active-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(5, 150, 105, 0.08));
    --ops-active-border: rgba(5, 150, 105, 0.25);
    --ops-table-head-bg: var(--bg-elevated, rgba(248, 250, 252, 0.95));
}

[b-8tz9a71uyr] .ops-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--ops-bg-gradient);
    color: var(--ops-text);
    font-family: var(--ops-font);
    min-height: 0;
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
}

/* Subtle grid overlay */
[b-8tz9a71uyr] .ops-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ops-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ops-grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

[b-8tz9a71uyr] .ops-page > * { position: relative; z-index: 1; }

/* ── Header ── */
[b-8tz9a71uyr] .ops-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

[b-8tz9a71uyr] .ops-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

[b-8tz9a71uyr] .ops-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--ops-neon), var(--ops-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-8tz9a71uyr] .ops-subtitle {
    font-size: 0.72rem;
    color: var(--ops-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

/* ── Period Selector ── */
[b-8tz9a71uyr] .ops-period-selector {
    display: flex;
    gap: 3px;
    background: var(--ops-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--ops-radius-sm);
    padding: 3px;
    border: 1px solid var(--ops-glass-border);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox */
}

[b-8tz9a71uyr] .ops-period-selector::-webkit-scrollbar { display: none; }

[b-8tz9a71uyr] .ops-period-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--ops-text-dim);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: var(--ops-font);
}

[b-8tz9a71uyr] .ops-period-btn:hover { color: var(--ops-text); background: var(--ops-glass); }

[b-8tz9a71uyr] .ops-period-btn--active {
    background: var(--ops-active-bg);
    color: var(--ops-neon);
    border: 1px solid var(--ops-active-border);
    box-shadow: 0 0 12px rgba(0, 245, 212, 0.1);
}

/* ── Loading / Error ── */
[b-8tz9a71uyr] .ops-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6rem 0;
    color: var(--ops-text-dim);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

[b-8tz9a71uyr] .ops-loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(0, 245, 212, 0.1);
    border-top-color: var(--ops-neon);
    border-radius: 50%;
    animation: ops-spin-b-8tz9a71uyr 0.8s linear infinite;
}

@keyframes ops-spin-b-8tz9a71uyr { to { transform: rotate(360deg); } }

[b-8tz9a71uyr] .ops-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 0, 110, 0.08);
    border: 1px solid rgba(255, 0, 110, 0.2);
    border-radius: var(--ops-radius-sm);
    color: var(--ops-rose);
    backdrop-filter: blur(8px);
}

[b-8tz9a71uyr] .ops-error-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ops-rose);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

[b-8tz9a71uyr] .ops-retry-btn {
    margin-left: auto;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid rgba(255, 0, 110, 0.4);
    color: var(--ops-rose);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--ops-font);
}

/* ── KPI Strip ── */
[b-8tz9a71uyr] .ops-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

[b-8tz9a71uyr] .ops-kpi {
    flex: 1 1 120px;
    min-width: 110px;
    background: var(--ops-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ops-glass-border);
    border-radius: var(--ops-radius-sm);
    padding: 16px 14px 12px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
    animation: ops-fadeSlideIn-b-8tz9a71uyr 0.4s ease both;
}

[b-8tz9a71uyr] .ops-kpi:hover { border-color: var(--border-emphasis, rgba(255, 255, 255, 0.12)); }

/* Gradient accent line */
[b-8tz9a71uyr] .ops-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--ops-radius-sm) var(--ops-radius-sm) 0 0;
}

[b-8tz9a71uyr] .ops-kpi--closed::before   { background: linear-gradient(90deg, var(--ops-green), var(--ops-neon)); }
[b-8tz9a71uyr] .ops-kpi--bugfix::before   { background: linear-gradient(90deg, var(--ops-neon), var(--ops-cyan)); }
[b-8tz9a71uyr] .ops-kpi--reopen::before   { background: linear-gradient(90deg, var(--ops-rose), var(--ops-amber)); }
[b-8tz9a71uyr] .ops-kpi--newwork::before  { background: linear-gradient(90deg, var(--ops-cyan), var(--ops-purple)); }
[b-8tz9a71uyr] .ops-kpi--newbugs::before  { background: linear-gradient(90deg, var(--ops-amber), var(--ops-rose)); }
[b-8tz9a71uyr] .ops-kpi--quickwin::before { background: linear-gradient(90deg, var(--ops-purple), var(--ops-rose)); }
[b-8tz9a71uyr] .ops-kpi--debt::before     { background: linear-gradient(90deg, var(--ops-amber), var(--ops-orange)); }

[b-8tz9a71uyr] .ops-kpi-value {
    font-family: var(--ops-mono);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

[b-8tz9a71uyr] .ops-kpi--closed .ops-kpi-value  { color: var(--ops-neon); }
[b-8tz9a71uyr] .ops-kpi--bugfix .ops-kpi-value  { color: var(--ops-cyan); }
[b-8tz9a71uyr] .ops-kpi--reopen .ops-kpi-value  { color: var(--ops-rose); }
[b-8tz9a71uyr] .ops-kpi--newwork .ops-kpi-value { color: var(--ops-cyan); }
[b-8tz9a71uyr] .ops-kpi--newbugs .ops-kpi-value { color: var(--ops-amber); }
[b-8tz9a71uyr] .ops-kpi--quickwin .ops-kpi-value { color: var(--ops-purple); }
[b-8tz9a71uyr] .ops-kpi--debt .ops-kpi-value    { color: var(--ops-orange); }

[b-8tz9a71uyr] .ops-kpi-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ops-text);
    margin: 6px 0 4px;
}

[b-8tz9a71uyr] .ops-kpi-compare {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Colored comparison variants */
[b-8tz9a71uyr] .ops-kpi-compare--info {
    color: var(--ops-text-dim);
    font-weight: 500;
    font-style: italic;
}

[b-8tz9a71uyr] .ops-kpi-compare--warn {
    color: var(--ops-amber);
    font-weight: 600;
}

/* ── Olympics Podium (standalone full-width section) ── */
[b-8tz9a71uyr] .ops-podium-section {
    background: var(--ops-glass);
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius);
    padding: 0;
    position: relative;
    overflow: hidden;
}
[b-8tz9a71uyr] .ops-podium-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ops-amber), var(--ops-neon));
    border-radius: var(--ops-radius) var(--ops-radius) 0 0;
    z-index: 2;
}

[b-8tz9a71uyr] .ops-podium-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ops-text-dim);
    text-transform: uppercase;
}

[b-8tz9a71uyr] .ops-podium-label--bold {
    font-family: var(--ops-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 8px 0 0;
    background: linear-gradient(90deg, #ffd700, #ff6b35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-8tz9a71uyr] .ops-podium-label--honorable {
    font-family: var(--ops-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 8px 0 0;
    color: var(--ops-dim);
    border-top: 1px solid var(--ops-glass-border);
}

[b-8tz9a71uyr] .ops-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px 0;
}

[b-8tz9a71uyr] .ops-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[b-8tz9a71uyr] .ops-podium-place--first  { order: 2; }
[b-8tz9a71uyr] .ops-podium-place--second { order: 1; }
[b-8tz9a71uyr] .ops-podium-place--third  { order: 3; }

[b-8tz9a71uyr] .ops-podium-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    border: 2.5px solid transparent;
}

[b-8tz9a71uyr] .ops-podium-place--first .ops-podium-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
    border-width: 3px;
}

[b-8tz9a71uyr] .ops-podium-avatar--gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a2e;
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.35), 0 4px 16px rgba(0,0,0,0.3);
}

[b-8tz9a71uyr] .ops-podium-avatar--silver {
    background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
    color: #1a1a2e;
    border-color: rgba(192, 192, 192, 0.5);
    box-shadow: 0 0 16px rgba(192, 192, 192, 0.25);
}

[b-8tz9a71uyr] .ops-podium-avatar--bronze {
    background: linear-gradient(135deg, #cd7f32 0%, #b8690e 100%);
    color: #1a1a2e;
    border-color: rgba(205, 127, 50, 0.5);
    box-shadow: 0 0 16px rgba(205, 127, 50, 0.25);
}

[b-8tz9a71uyr] .ops-podium-count {
    font-family: var(--ops-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ops-text);
    line-height: 1;
}

[b-8tz9a71uyr] .ops-podium-count--gold {
    font-size: 1.6rem;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

[b-8tz9a71uyr] .ops-podium-name {
    font-size: 0.72rem;
    color: var(--ops-text-dim);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

[b-8tz9a71uyr] .ops-podium-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
}

[b-8tz9a71uyr] .ops-podium-base {
    width: 100%;
    min-width: 66px;
    border-radius: 4px 4px 0 0;
}

[b-8tz9a71uyr] .ops-podium-place--first .ops-podium-base { min-width: 80px; }

[b-8tz9a71uyr] .ops-podium-base--gold {
    height: 54px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 170, 0, 0.12) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-bottom: none;
}

[b-8tz9a71uyr] .ops-podium-base--silver {
    height: 38px;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.3) 0%, rgba(168, 168, 168, 0.1) 100%);
    border: 1px solid rgba(192, 192, 192, 0.2);
    border-bottom: none;
}

[b-8tz9a71uyr] .ops-podium-base--bronze {
    height: 26px;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.3) 0%, rgba(184, 105, 14, 0.1) 100%);
    border: 1px solid rgba(205, 127, 50, 0.2);
    border-bottom: none;
}

[b-8tz9a71uyr] .ops-streak-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 100, 0, 0.25), rgba(255, 50, 0, 0.15));
    color: #ff6b35;
    border: 1px solid rgba(255, 100, 0, 0.3);
    white-space: nowrap;
    animation: ops-streakPulse-b-8tz9a71uyr 2s ease-in-out infinite;
}

@keyframes ops-streakPulse-b-8tz9a71uyr {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 100, 0, 0.2); }
    50%      { box-shadow: 0 0 14px rgba(255, 100, 0, 0.5); }
}

[b-8tz9a71uyr] .ops-bughunter-badge {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 0, 110, 0.2), rgba(255, 60, 60, 0.15));
    color: var(--ops-rose);
    border: 1px solid rgba(255, 0, 110, 0.3);
    white-space: nowrap;
    animation: ops-bugHunterGlow-b-8tz9a71uyr 3s ease-in-out infinite;
}

@keyframes ops-bugHunterGlow-b-8tz9a71uyr {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 0, 110, 0.15); }
    50%      { box-shadow: 0 0 12px rgba(255, 0, 110, 0.4); }
}

[b-8tz9a71uyr] .ops-podium-runners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    padding: 8px 14px 10px;
}

[b-8tz9a71uyr] .ops-podium-runner {
    font-size: 0.72rem;
    color: var(--ops-text-dim);
    font-family: var(--ops-mono);
    white-space: nowrap;
}

[b-8tz9a71uyr] .ops-podium-runner-rank {
    color: var(--ops-dim);
    font-weight: 600;
    margin-right: 2px;
}

/* ── Three-Column Grid ── */
[b-8tz9a71uyr] .ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    flex: 1;
    min-height: 0;
    animation: ops-fadeSlideIn-b-8tz9a71uyr 0.6s ease both;
}

/* ── Panel Base ── */
[b-8tz9a71uyr] .ops-panel {
    background: var(--ops-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ops-glass-border);
    border-radius: var(--ops-radius);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

[b-8tz9a71uyr] .ops-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 2;
    border-radius: var(--ops-radius) var(--ops-radius) 0 0;
}

[b-8tz9a71uyr] .ops-panel:nth-child(1)::before { background: linear-gradient(90deg, var(--ops-cyan), var(--ops-purple)); }
[b-8tz9a71uyr] .ops-panel:nth-child(2)::before { background: linear-gradient(90deg, var(--ops-cyan), var(--ops-neon)); }
[b-8tz9a71uyr] .ops-panel--bugs::before        { background: linear-gradient(90deg, var(--ops-rose), var(--ops-orange)); }

[b-8tz9a71uyr] .ops-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ops-border);
    flex-shrink: 0;
}

[b-8tz9a71uyr] .ops-panel-header--sub { border-top: 1px solid var(--ops-border); }

[b-8tz9a71uyr] .ops-panel-icon { font-size: 1rem; line-height: 1; }

[b-8tz9a71uyr] .ops-panel-header > span:nth-child(2) {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ops-text);
}

[b-8tz9a71uyr] .ops-panel-count {
    margin-left: auto;
    font-family: var(--ops-mono);
    font-size: 0.72rem;
    color: var(--ops-text-dim);
    padding: 2px 10px;
    background: var(--ops-glass);
    border: 1px solid var(--ops-glass-border);
    border-radius: 20px;
}

[b-8tz9a71uyr] .ops-panel-body { flex: 1; min-height: 0; padding: 4px 0; }

/* Bugs split — major grows, minor auto-sizes to content */
[b-8tz9a71uyr] .ops-bugs-major {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-8tz9a71uyr] .ops-bugs-minor {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ops-border);
}
[b-8tz9a71uyr] .ops-scroll {
    overflow-y: auto;
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

[b-8tz9a71uyr] .ops-scroll::-webkit-scrollbar { width: 4px; }
[b-8tz9a71uyr] .ops-scroll::-webkit-scrollbar-track { background: transparent; }
[b-8tz9a71uyr] .ops-scroll::-webkit-scrollbar-thumb { background: var(--border-default, rgba(255, 255, 255, 0.08)); border-radius: 4px; }

/* ── Projects Table ── */
[b-8tz9a71uyr] .ops-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

[b-8tz9a71uyr] .ops-table thead th {
    position: sticky;
    top: 0;
    background: var(--ops-table-head-bg);
    padding: 6px 8px;
    font-weight: 600;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ops-dim);
    border-bottom: 1px solid var(--ops-border);
    text-align: left;
}

[b-8tz9a71uyr] .ops-table td { padding: 6px 8px; border-bottom: 1px solid var(--ops-border); }
[b-8tz9a71uyr] .ops-table tbody tr { transition: background 0.2s ease; border-left: 3px solid transparent; }
[b-8tz9a71uyr] .ops-table tbody tr:hover { background: var(--ops-hover); }
[b-8tz9a71uyr] .ops-row--pinned { background: rgba(255, 190, 11, 0.04); }

/* Pain indicators */
[b-8tz9a71uyr] .ops-row--pain-0 { border-left-color: var(--ops-green); }
[b-8tz9a71uyr] .ops-row--pain-1 { border-left-color: var(--ops-amber); opacity: 0.9; }
[b-8tz9a71uyr] .ops-row--pain-2 { border-left-color: var(--ops-orange); opacity: 0.8; }
[b-8tz9a71uyr] .ops-row--pain-3 { border-left-color: var(--ops-rose); opacity: 0.75; animation: ops-warningPulse-b-8tz9a71uyr 3s ease-in-out infinite; }

@keyframes ops-warningPulse-b-8tz9a71uyr {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 0.9; }
}

[b-8tz9a71uyr] .ops-project-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--ops-text);
}

[b-8tz9a71uyr] .ops-pin { font-size: 0.65rem; margin-right: 3px; }

[b-8tz9a71uyr] .ops-num {
    text-align: center !important;
    font-family: var(--ops-mono);
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 28px;
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
    border-radius: 4px;
}

[b-8tz9a71uyr] .ops-num--green { color: var(--ops-neon); background: rgba(0, 245, 212, 0.08); }
[b-8tz9a71uyr] .ops-num--amber { color: var(--ops-amber); background: rgba(255, 190, 11, 0.08); }
[b-8tz9a71uyr] .ops-num--red   { color: var(--ops-rose); background: rgba(255, 0, 110, 0.08); }

[b-8tz9a71uyr] .ops-table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 8px 14px;
    border-top: 1px solid var(--ops-border);
    font-size: 0.62rem;
    color: var(--ops-dim);
}

[b-8tz9a71uyr] .ops-legend-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
[b-8tz9a71uyr] .ops-legend-dot { font-size: 0.55rem; }
[b-8tz9a71uyr] .ops-legend-dot--green { color: var(--ops-neon); }
[b-8tz9a71uyr] .ops-legend-dot--amber { color: var(--ops-amber); }
[b-8tz9a71uyr] .ops-legend-dot--red { color: var(--ops-rose); }

/* ── Activity Feed (TV-style two-line) ── */
[b-8tz9a71uyr] .ops-activity-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 14px;
    text-decoration: none;
    color: var(--ops-text);
    border-bottom: 1px solid var(--ops-border);
    transition: background 0.2s ease;
}

[b-8tz9a71uyr] .ops-activity-item:hover { background: var(--ops-hover); }

[b-8tz9a71uyr] .ops-activity-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-8tz9a71uyr] .ops-activity-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 32px;
    font-size: 0.7rem;
}

/* Smoothness indicators */
[b-8tz9a71uyr] .ops-smoothness {
    font-size: 0.75rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

[b-8tz9a71uyr] .ops-smoothness--painful { color: var(--ops-amber); }
[b-8tz9a71uyr] .ops-smoothness--clean   { color: var(--ops-neon); }
[b-8tz9a71uyr] .ops-smoothness--moderate { color: var(--ops-dim); font-size: 0.5rem; }

/* Type badges (colored pills like TV) */
[b-8tz9a71uyr] .ops-type-badge {
    font-family: var(--ops-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-8tz9a71uyr] .ops-type--bug     { color: #fff; background: var(--ops-rose); }
[b-8tz9a71uyr] .ops-type--task    { color: #fff; background: var(--ops-cyan); }
[b-8tz9a71uyr] .ops-type--story   { color: #fff; background: var(--ops-purple); }
[b-8tz9a71uyr] .ops-type--feature { color: #000; background: var(--ops-amber); }
[b-8tz9a71uyr] .ops-type--epic    { color: #fff; background: var(--ops-orange); }
[b-8tz9a71uyr] .ops-type--pbi     { color: #000; background: var(--ops-neon); }
[b-8tz9a71uyr] .ops-type--default { color: var(--ops-text-dim); background: var(--ops-glass); }

[b-8tz9a71uyr] .ops-activity-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ops-text);
}

[b-8tz9a71uyr] .ops-activity-age {
    font-family: var(--ops-mono);
    font-size: 0.82rem;
    flex-shrink: 0;
    color: var(--ops-green);
    font-weight: 600;
}

[b-8tz9a71uyr] .ops-activity-id {
    font-family: var(--ops-mono);
    font-size: 0.72rem;
    color: var(--ops-dim);
    white-space: nowrap;
    background: var(--ops-glass);
    padding: 1px 6px;
    border-radius: 4px;
}

[b-8tz9a71uyr] .ops-activity-project {
    color: var(--ops-cyan);
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
}

[b-8tz9a71uyr] .ops-activity-who {
    font-size: 0.78rem;
    color: var(--ops-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
}

[b-8tz9a71uyr] .ops-activity-handoffs {
    font-family: var(--ops-mono);
    font-size: 0.72rem;
    color: var(--ops-amber);
    padding: 2px 6px;
    background: rgba(255, 190, 11, 0.12);
    border: 1px solid rgba(255, 190, 11, 0.2);
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Bug Items (TV-style two-line) ── */
[b-8tz9a71uyr] .ops-bug-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 14px;
    text-decoration: none;
    color: var(--ops-text);
    border-bottom: 1px solid var(--ops-border);
    transition: background 0.2s ease;
}

[b-8tz9a71uyr] .ops-bug-item:hover { background: var(--ops-glass); }
[b-8tz9a71uyr] .ops-bug-item--reopen { border-left: 2px solid var(--ops-amber); }

[b-8tz9a71uyr] .ops-bug-severity { font-size: 0.78rem; flex-shrink: 0; padding-top: 2px; }

[b-8tz9a71uyr] .ops-bug-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

[b-8tz9a71uyr] .ops-bug-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ops-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-8tz9a71uyr] .ops-bug-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--ops-dim);
}

[b-8tz9a71uyr] .ops-bug-id { font-family: var(--ops-mono); color: var(--ops-dim); }
[b-8tz9a71uyr] .ops-bug-project { color: var(--ops-cyan); font-weight: 500; }
[b-8tz9a71uyr] .ops-bug-who { color: var(--ops-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8rem; }

[b-8tz9a71uyr] .ops-bug-age {
    font-family: var(--ops-mono);
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

[b-8tz9a71uyr] .ops-reopen-count {
    font-family: var(--ops-mono);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    color: #000;
    background: var(--ops-rose);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
}

[b-8tz9a71uyr] .ops-panel-count--danger {
    color: var(--ops-rose);
    background: rgba(255, 0, 110, 0.1);
    border-color: rgba(255, 0, 110, 0.2);
}

[b-8tz9a71uyr] .ops-more-link {
    padding: 8px 14px;
    font-size: 0.78rem;
    color: var(--ops-amber);
    font-weight: 600;
    border-top: 1px solid var(--ops-border);
    background: var(--ops-glass);
    flex-shrink: 0;
}

[b-8tz9a71uyr] .ops-empty {
    padding: 16px;
    text-align: center;
    color: var(--ops-dim);
    font-size: 0.82rem;
}

/* ── Smooth theme transition ── */
[b-8tz9a71uyr] .ops-page,
[b-8tz9a71uyr] .ops-panel,
[b-8tz9a71uyr] .ops-kpi,
[b-8tz9a71uyr] .ops-period-selector {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    [b-8tz9a71uyr] .ops-page,
    [b-8tz9a71uyr] .ops-panel,
    [b-8tz9a71uyr] .ops-kpi,
    [b-8tz9a71uyr] .ops-period-selector {
        transition: none;
    }
}

/* ── Smooth data refresh (fade instead of hard re-render) ── */
[b-8tz9a71uyr] .ops-refresh-fade {
    animation: ops-refreshFade-b-8tz9a71uyr 0.35s ease;
}

@keyframes ops-refreshFade-b-8tz9a71uyr {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

/* ── Animations ── */
@keyframes ops-fadeSlideIn-b-8tz9a71uyr {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

[b-8tz9a71uyr] .ops-kpi:nth-child(1) { animation-delay: 0ms; }
[b-8tz9a71uyr] .ops-kpi:nth-child(2) { animation-delay: 50ms; }
[b-8tz9a71uyr] .ops-kpi:nth-child(3) { animation-delay: 100ms; }
[b-8tz9a71uyr] .ops-kpi:nth-child(4) { animation-delay: 150ms; }
[b-8tz9a71uyr] .ops-kpi:nth-child(5) { animation-delay: 200ms; }
[b-8tz9a71uyr] .ops-kpi:nth-child(6) { animation-delay: 250ms; }
[b-8tz9a71uyr] .ops-kpi:nth-child(7) { animation-delay: 300ms; }

/* ── Responsive ── */

@media (min-width: 1400px) {
    [b-8tz9a71uyr] .ops-grid { grid-template-columns: 1fr 1.4fr 1fr; }
}

@media (min-width: 1600px) {
    [b-8tz9a71uyr] .ops-kpi-value { font-size: 2.4rem; }
    [b-8tz9a71uyr] .ops-grid { grid-template-columns: 1.2fr 1.5fr 1fr; }
    [b-8tz9a71uyr] .ops-kpi::before,
    [b-8tz9a71uyr] .ops-panel::before { height: 5px; }
}

@media (max-width: 1399px) {
    [b-8tz9a71uyr] .ops-kpi { flex: 1 1 calc(25% - 8px); }
}

@media (max-width: 1199px) {
    [b-8tz9a71uyr] .ops-kpi { flex: 1 1 calc(25% - 8px); }
    [b-8tz9a71uyr] .ops-kpi-value { font-size: 1.6rem; }
    [b-8tz9a71uyr] .ops-grid { grid-template-columns: repeat(2, 1fr); }
    [b-8tz9a71uyr] .ops-panel--bugs { grid-column: 1 / -1; }
    [b-8tz9a71uyr] .ops-period-btn { padding: 6px 10px; font-size: 0.7rem; }
}

@media (max-width: 991px) {
    [b-8tz9a71uyr] .ops-page { padding: 10px; gap: 8px; }
    [b-8tz9a71uyr] .ops-header { flex-direction: column; align-items: flex-start; }
    [b-8tz9a71uyr] .ops-period-selector { width: 100%; max-width: 100%; }
    [b-8tz9a71uyr] .ops-period-btn { flex: 0 0 auto; padding: 8px 12px; }
    [b-8tz9a71uyr] .ops-kpi { flex: 1 1 calc(33.3% - 8px); }
    [b-8tz9a71uyr] .ops-grid { grid-template-columns: 1fr; }
    [b-8tz9a71uyr] .ops-panel--bugs { grid-column: span 1; }
    [b-8tz9a71uyr] .ops-panel { overflow: visible; }
    [b-8tz9a71uyr] .ops-podium-section { border-radius: 8px; }
    [b-8tz9a71uyr] .ops-podium { gap: 6px; padding: 8px 10px 0; }
    [b-8tz9a71uyr] .ops-podium-avatar { width: 44px; height: 44px; font-size: 0.8rem; }
    [b-8tz9a71uyr] .ops-podium-place--first .ops-podium-avatar { width: 56px; height: 56px; }
}

@media (max-width: 767px) {
    [b-8tz9a71uyr] .ops-page { padding: 8px; gap: 6px; overflow-x: hidden; }
    [b-8tz9a71uyr] .ops-kpi { flex: 1 1 calc(50% - 6px); }
    [b-8tz9a71uyr] .ops-kpi-value { font-size: 1.3rem; }
    [b-8tz9a71uyr] .ops-kpi-label { font-size: 0.52rem; }
    [b-8tz9a71uyr] .ops-panel { overflow: visible; }
    [b-8tz9a71uyr] .ops-project-name { max-width: 8rem; }
    [b-8tz9a71uyr] .ops-activity-who { display: none; }
    [b-8tz9a71uyr] .ops-activity-item-meta { padding-left: 0; }
    [b-8tz9a71uyr] .ops-podium-section { border-radius: 6px; }
    [b-8tz9a71uyr] .ops-podium-label { font-size: 0.65rem; padding: 8px 10px 0; }
    [b-8tz9a71uyr] .ops-podium { gap: 8px; padding: 8px 10px 0; }
    [b-8tz9a71uyr] .ops-podium-avatar { width: 40px; height: 40px; font-size: 0.75rem; }
    [b-8tz9a71uyr] .ops-podium-place--first .ops-podium-avatar { width: 50px; height: 50px; }
    [b-8tz9a71uyr] .ops-podium-base { min-width: 50px !important; }
    [b-8tz9a71uyr] .ops-podium-place--first .ops-podium-base { min-width: 60px !important; }
    [b-8tz9a71uyr] .ops-podium-runners { font-size: 0.7rem; gap: 4px 8px; }
    /* Prevent horizontal scroll from wide elements */
    [b-8tz9a71uyr] .ops-kpi-strip { overflow-x: hidden; }
    [b-8tz9a71uyr] .ops-grid { overflow: hidden; }
}

@media (max-width: 479px) {
    [b-8tz9a71uyr] .ops-title { font-size: 1rem; }
    [b-8tz9a71uyr] .ops-kpi { padding: 8px 6px 6px; }
    [b-8tz9a71uyr] .ops-kpi-value { font-size: 1.15rem; }
    [b-8tz9a71uyr] .ops-kpi-label { font-size: 0.48rem; }
    [b-8tz9a71uyr] .ops-activity-project { display: none; }
    [b-8tz9a71uyr] .ops-bug-who { display: none; }
    [b-8tz9a71uyr] .ops-podium-section { border-radius: 6px; }
    [b-8tz9a71uyr] .ops-podium-label { font-size: 0.6rem; padding: 6px 8px 0; gap: 4px; }
    [b-8tz9a71uyr] .ops-podium-label--bold { font-size: 0.5rem; }
    [b-8tz9a71uyr] .ops-podium-label--honorable { font-size: 0.5rem; }
    [b-8tz9a71uyr] .ops-podium { flex-wrap: wrap; gap: 8px; padding: 6px 8px 0; }
    [b-8tz9a71uyr] .ops-podium-avatar { width: 36px; height: 36px; font-size: 0.7rem; }
    [b-8tz9a71uyr] .ops-podium-place--first .ops-podium-avatar { width: 46px; height: 46px; }
    [b-8tz9a71uyr] .ops-podium-count { font-size: 1rem; }
    [b-8tz9a71uyr] .ops-podium-count--gold { font-size: 1.2rem; }
    [b-8tz9a71uyr] .ops-podium-name { font-size: 0.6rem; }
    [b-8tz9a71uyr] .ops-podium-runners { gap: 4px 10px; font-size: 0.65rem; }
    [b-8tz9a71uyr] .ops-podium-badges { gap: 2px; }
    [b-8tz9a71uyr] .ops-streak-badge, [b-8tz9a71uyr] .ops-bughunter-badge { font-size: 0.55rem; padding: 1px 4px; }
    [b-8tz9a71uyr] .ops-table { font-size: 0.72rem; }
    [b-8tz9a71uyr] .ops-table td, [b-8tz9a71uyr] .ops-table th { padding: 4px 4px; }
}
/* /Pages/DependencyTracking.razor.rz.scp.css */
/* Dependency Tracking - Scoped Styles */

.chart-panel[b-6s437pa8qm] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-4);
}

.chart-panel-title[b-6s437pa8qm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

[b-6s437pa8qm] .highlight-critical {
    border-color: var(--status-error-glow);
    box-shadow: 0 0 0 1px var(--status-error-muted);
}

/* Dependency-specific */
.dep-project-label[b-6s437pa8qm] {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.dep-state[b-6s437pa8qm] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dep-arrow[b-6s437pa8qm] {
    margin: 0 4px;
    color: var(--text-tertiary);
}

.cross-project-badge[b-6s437pa8qm] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
    white-space: nowrap;
}

/* Chains */
.chains-container[b-6s437pa8qm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chain-row[b-6s437pa8qm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border-radius: 8px;
}

.chain-length[b-6s437pa8qm] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 60px;
}

.chain-items[b-6s437pa8qm] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.chain-item[b-6s437pa8qm] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s;
}

.chain-item:hover[b-6s437pa8qm] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.chain-item.chain-done[b-6s437pa8qm] {
    opacity: 0.5;
    text-decoration: line-through;
}

.chain-arrow[b-6s437pa8qm] {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

/* Pagination */
[b-6s437pa8qm] .table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--border-primary);
    gap: 12px;
    flex-wrap: wrap;
}

[b-6s437pa8qm] .pagination-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

[b-6s437pa8qm] .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-6s437pa8qm] .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

[b-6s437pa8qm] .pagination-btn:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
}

[b-6s437pa8qm] .pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

[b-6s437pa8qm] .pagination-current {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 8px;
    min-width: 50px;
    text-align: center;
}

[b-6s437pa8qm] .pagination-size {
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .chart-panel[b-6s437pa8qm] { padding: 16px; border-radius: 8px; }
    [b-6s437pa8qm] .table-pagination {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
/* /Pages/EmployeeCostAnalysis.razor.rz.scp.css */
/* Employee Cost Analysis - Scoped Styles */

/* Department breakdown bar */
[b-kadweeh6tu] .dept-breakdown-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

[b-kadweeh6tu] .dept-breakdown-segment {
    transition: width 0.3s ease;
}

/* Department color dot */
[b-kadweeh6tu] .dept-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Projection grid */
[b-kadweeh6tu] .projection-grid {
    padding: var(--space-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

[b-kadweeh6tu] .projection-card {
    text-align: center;
    padding: var(--space-4);
    background: var(--bg-surface);
    border-radius: 8px;
}

[b-kadweeh6tu] .projection-label {
    font-size: 0.75rem;
    color: var(--text-disabled);
    text-transform: uppercase;
    margin-bottom: 4px;
}

[b-kadweeh6tu] .projection-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Budget utilization bar */
[b-kadweeh6tu] .budget-util-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

[b-kadweeh6tu] .budget-util-track {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-subtle);
    overflow: hidden;
}

[b-kadweeh6tu] .budget-util-fill {
    height: 100%;
    border-radius: 2px;
}

[b-kadweeh6tu] .budget-util-label {
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    [b-kadweeh6tu] .projection-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    [b-kadweeh6tu] .projection-grid {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    [b-kadweeh6tu] .projection-value {
        font-size: 1.25rem;
    }

    [b-kadweeh6tu] .budget-util-bar {
        flex-direction: column;
        gap: 2px;
    }

    [b-kadweeh6tu] .budget-util-track {
        width: 100%;
    }

    /* Department table → card layout on mobile */
    [b-kadweeh6tu] .dept-table thead {
        display: none;
    }

    [b-kadweeh6tu] .dept-table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    [b-kadweeh6tu] .dept-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 12px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
    }

    [b-kadweeh6tu] .dept-table tbody td {
        padding: 0;
        border-bottom: none;
        font-size: var(--text-sm);
    }

    [b-kadweeh6tu] .dept-table tbody td:first-child {
        width: 100%;
        font-weight: 600;
        font-size: var(--text-base);
        padding-bottom: 4px;
        border-bottom: 1px solid var(--border-subtle);
        margin-bottom: 2px;
    }

    [b-kadweeh6tu] .dept-table tbody td:not(:first-child) {
        flex: 1 1 auto;
    }
}
/* /Pages/EmployeeCosts.razor.rz.scp.css */
.kpi-unit[b-cfvg7dickw] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: var(--space-1);
}

.employee-cell[b-cfvg7dickw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-avatar[b-cfvg7dickw] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 6px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
}

.employee-name[b-cfvg7dickw] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.rate-value[b-cfvg7dickw],
.salary-value[b-cfvg7dickw] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.no-value[b-cfvg7dickw] {
    color: var(--text-muted);
}

.currency-badge[b-cfvg7dickw] {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.date-cell[b-cfvg7dickw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-end[b-cfvg7dickw] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Pagination ── */
.ec-pagination[b-cfvg7dickw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-subtle);
}

.ec-pag-btn[b-cfvg7dickw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ec-pag-btn:hover:not(:disabled)[b-cfvg7dickw] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ec-pag-btn:disabled[b-cfvg7dickw] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ec-pag-info[b-cfvg7dickw] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .search-input[b-cfvg7dickw] {
        width: 100% !important;
        max-width: none;
    }

    .search-input-wrapper[b-cfvg7dickw] {
        width: 100%;
    }

    .table-container[b-cfvg7dickw] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-cfvg7dickw] {
        min-width: 700px;
    }

    .employee-avatar[b-cfvg7dickw] {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }
}

@media (max-width: 640px) {
    .data-table[b-cfvg7dickw] {
        min-width: 600px;
    }

    .data-table th[b-cfvg7dickw],
    .data-table td[b-cfvg7dickw] {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    .rate-value[b-cfvg7dickw],
    .salary-value[b-cfvg7dickw] {
        font-size: 0.8125rem;
    }

    .currency-badge[b-cfvg7dickw] {
        font-size: 0.6875rem;
        padding: 2px 4px;
    }

    .employee-name[b-cfvg7dickw] {
        font-size: 0.8125rem;
    }
}
/* /Pages/EpicProgress.razor.rz.scp.css */
/* Epic Progress - Scoped Styles */

.chart-panel[b-gbql8u5346] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-4);
}

.chart-panel-title[b-gbql8u5346] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

[b-gbql8u5346] .title-count {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 8px;
}

/* Critical highlight for off-track KPI card */
[b-gbql8u5346] .highlight-critical {
    border-color: var(--status-error-glow);
    box-shadow: 0 0 0 1px var(--status-error-muted);
}

/* Clickable KPI cards */
[b-gbql8u5346] .kpi-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

[b-gbql8u5346] .kpi-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-primary);
}

[b-gbql8u5346] .kpi-active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-muted);
}

[b-gbql8u5346] .kpi-active-success {
    border-color: var(--status-success);
    box-shadow: 0 0 0 2px var(--status-success-glow);
}

[b-gbql8u5346] .kpi-active-warning {
    border-color: var(--status-warning);
    box-shadow: 0 0 0 2px var(--status-warning-glow);
}

[b-gbql8u5346] .kpi-active-danger {
    border-color: var(--status-error);
    box-shadow: 0 0 0 2px var(--status-error-glow);
}

[b-gbql8u5346] .kpi-active.highlight-critical {
    border-color: var(--status-error);
    box-shadow: 0 0 0 2px var(--status-error-glow);
}

/* Filter clear button */
[b-gbql8u5346] .filter-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

[b-gbql8u5346] .filter-clear-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--accent-primary-muted);
}

/* Project group header (multi-project view) */
[b-gbql8u5346] .project-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 4px 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    border-top: 1px solid var(--border-primary);
    margin-top: 12px;
}

[b-gbql8u5346] .project-group-header:first-child {
    border-top: none;
    margin-top: 0;
}

[b-gbql8u5346] .project-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}

/* Project chip on epic title (single-project view) */
[b-gbql8u5346] .epic-project-chip {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-primary);
    padding: 1px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Epic row */
.epic-row[b-gbql8u5346] {
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.epic-row:hover[b-gbql8u5346] {
    border-color: var(--accent-primary);
}

.epic-row.expanded[b-gbql8u5346] {
    border-color: var(--accent-primary);
    background: var(--bg-surface);
}

/* Shared grid layout for epic and feature rows */
.epic-header[b-gbql8u5346] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 16px;
    align-items: center;
}

.epic-title[b-gbql8u5346] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

[b-gbql8u5346] .epic-link {
    color: var(--accent-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-gbql8u5346] .epic-link:hover {
    text-decoration: underline;
}

/* Feature row (indented child) */
.feature-row[b-gbql8u5346] {
    background: var(--bg-subtle);
    border: 1px solid var(--border-secondary, var(--border-primary));
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 6px;
    margin-left: 32px;
}

/* Health badge pill */
[b-gbql8u5346] .health-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-gbql8u5346] .health-badge.on-track {
    background: var(--status-success-muted);
    color: var(--status-success);
}

[b-gbql8u5346] .health-badge.at-risk {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

[b-gbql8u5346] .health-badge.off-track {
    background: var(--status-error-muted);
    color: var(--status-error);
}

[b-gbql8u5346] .health-badge.unknown {
    background: var(--bg-muted);
    color: var(--text-muted);
}

/* Progress bar */
.progress-bar[b-gbql8u5346] {
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
    min-width: 120px;
}

.progress-fill[b-gbql8u5346] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.progress-fill.on-track[b-gbql8u5346] {
    background: var(--status-success);
}

.progress-fill.at-risk[b-gbql8u5346] {
    background: var(--status-warning);
}

.progress-fill.off-track[b-gbql8u5346] {
    background: var(--status-error);
}

.progress-fill.unknown[b-gbql8u5346] {
    background: var(--text-muted);
}

/* Progress label */
.progress-label[b-gbql8u5346] {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 45px;
    text-align: right;
    color: var(--text-primary);
}

/* Meta label for secondary info */
.meta-label[b-gbql8u5346] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* MudSelect theme — handled globally in dashboard-enterprise.css */

/* Pagination */
[b-gbql8u5346] .table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--border-primary);
    gap: 12px;
    flex-wrap: wrap;
}

[b-gbql8u5346] .pagination-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

[b-gbql8u5346] .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-gbql8u5346] .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

[b-gbql8u5346] .pagination-btn:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
}

[b-gbql8u5346] .pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

[b-gbql8u5346] .pagination-current {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 8px;
    min-width: 50px;
    text-align: center;
}

[b-gbql8u5346] .pagination-size {
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    margin-right: 8px;
}

/* Empty state centering */
[b-gbql8u5346] .empty-state {
    margin-top: var(--space-8);
}

/* Responsive */
@media (max-width: 768px) {
    .chart-panel[b-gbql8u5346] {
        padding: 16px;
        border-radius: 8px;
    }

    .epic-header[b-gbql8u5346] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .feature-row[b-gbql8u5346] {
        margin-left: 16px;
    }

    .progress-bar[b-gbql8u5346] {
        min-width: 80px;
    }

    [b-gbql8u5346] .table-pagination {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
/* /Pages/Financials.razor.rz.scp.css */
/* =============================================
   FINANCIALS — Clean Ledger Aesthetic
   Precise numbers, bar gauges, card budgets
   ============================================= */

/* ──── KPI Row ──── */
.fn-kpi-row[b-u62137sr7j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-bottom: var(--space-6);
}

.fn-kpi[b-u62137sr7j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 20px;
    position: relative;
}

.fn-kpi:first-child[b-u62137sr7j] { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.fn-kpi:last-child[b-u62137sr7j] { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

.fn-kpi-top[b-u62137sr7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fn-kpi-label[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fn-kpi-badge[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: var(--accent-primary-muted);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.fn-kpi-pct[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
}

.fn-kpi-pct.success[b-u62137sr7j] { color: var(--status-success); }
.fn-kpi-pct.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-kpi-pct.error[b-u62137sr7j] { color: var(--status-error); }

.fn-kpi-hint[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--text-disabled);
}

.fn-kpi-value[b-u62137sr7j] {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.fn-kpi-value--burn[b-u62137sr7j] {
    color: var(--status-warning);
}

.fn-kpi-spark[b-u62137sr7j] {
    margin-top: 10px;
    height: 4px;
    background: var(--bg-track);
    border-radius: 2px;
    overflow: hidden;
}

.fn-kpi-spark-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fn-kpi-spark-fill.success[b-u62137sr7j] { background: var(--status-success); }
.fn-kpi-spark-fill.warning[b-u62137sr7j] { background: var(--status-warning); }
.fn-kpi-spark-fill.error[b-u62137sr7j] { background: var(--status-error); }

.fn-kpi-runway[b-u62137sr7j] {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.fn-kpi-runway.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-kpi-runway.error[b-u62137sr7j] { color: var(--status-error); }

/* ──── Budget Utilization Gauge ──── */
.fn-budget-section[b-u62137sr7j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: var(--space-6);
}

.fn-budget-gauge-header[b-u62137sr7j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.fn-section-tag[b-u62137sr7j] {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fn-budget-gauge-values[b-u62137sr7j] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.fn-budget-spent[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fn-budget-sep[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-disabled);
}

.fn-budget-total[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.fn-budget-track[b-u62137sr7j] {
    height: 24px;
    background: var(--bg-track);
    border-radius: 12px;
    overflow: visible;
    position: relative;
}

.fn-budget-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 12px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fn-budget-fill.success[b-u62137sr7j] {
    background: linear-gradient(90deg, var(--status-success), var(--status-success-tint));
    box-shadow: 0 0 20px var(--status-success-glow);
}

.fn-budget-fill.warning[b-u62137sr7j] {
    background: linear-gradient(90deg, var(--status-warning), var(--status-warning-tint));
    box-shadow: 0 0 20px var(--status-warning-glow);
}

.fn-budget-fill.error[b-u62137sr7j] {
    background: linear-gradient(90deg, var(--status-error), var(--status-error-tint));
    box-shadow: 0 0 20px var(--status-error-glow);
}

.fn-budget-marker[b-u62137sr7j] {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 32px;
    background: var(--status-warning);
    border-radius: 1px;
    opacity: 0.5;
}

.fn-budget-labels[b-u62137sr7j] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-disabled);
}

.fn-budget-warning-label[b-u62137sr7j] {
    color: var(--status-warning);
}

/* ──── Duo Panel ──── */
.fn-duo[b-u62137sr7j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.fn-panel[b-u62137sr7j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
}

/* Performance Indices */
.fn-indices[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.fn-index[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fn-index-head[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fn-index-name[b-u62137sr7j] {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 32px;
}

.fn-index-hint[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-disabled);
}

.fn-index-bar-row[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fn-index-bar-track[b-u62137sr7j] {
    flex: 1;
    height: 8px;
    background: var(--bg-track);
    border-radius: 4px;
    overflow: visible;
    position: relative;
}

.fn-index-bar-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fn-index-bar-fill.success[b-u62137sr7j] { background: var(--status-success); }
.fn-index-bar-fill.warning[b-u62137sr7j] { background: var(--status-warning); }
.fn-index-bar-fill.error[b-u62137sr7j] { background: var(--status-error); }

.fn-index-bar-target[b-u62137sr7j] {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: var(--text-disabled);
    border-radius: 1px;
    opacity: 0.4;
}

.fn-index-val[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

.fn-index-val.success[b-u62137sr7j] { color: var(--status-success); }
.fn-index-val.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-index-val.error[b-u62137sr7j] { color: var(--status-error); }

.fn-index-row[b-u62137sr7j] {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}

.fn-stat[b-u62137sr7j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--bg-row-hover);
    border-radius: var(--radius-md);
}

.fn-stat:first-child[b-u62137sr7j] { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.fn-stat:last-child[b-u62137sr7j] { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.fn-stat-lbl[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fn-stat-val[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Resource Grid */
.fn-resource-grid[b-u62137sr7j] {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    margin-bottom: 16px;
}

.fn-res-cell[b-u62137sr7j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: var(--bg-row-hover);
    border-radius: var(--radius-md);
}

.fn-res-cell:first-child[b-u62137sr7j] { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.fn-res-cell:last-child[b-u62137sr7j] { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.fn-res-cell--wide[b-u62137sr7j] {
    flex: 1.5;
}

.fn-res-num[b-u62137sr7j] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.fn-res-lbl[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.625rem;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fn-res-meters[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.fn-res-meter[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fn-res-meter-lbl[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 100px;
}

.fn-res-meter-bar[b-u62137sr7j] {
    flex: 1;
    height: 6px;
    background: var(--bg-track);
    border-radius: 3px;
    overflow: hidden;
}

.fn-res-meter-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.fn-res-meter-fill.success[b-u62137sr7j] { background: var(--status-success); }
.fn-res-meter-fill.warning[b-u62137sr7j] { background: var(--status-warning); }
.fn-res-meter-fill.error[b-u62137sr7j] { background: var(--status-error); }

.fn-res-meter-val[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}

.fn-res-meter-val.success[b-u62137sr7j] { color: var(--status-success); }
.fn-res-meter-val.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-res-meter-val.error[b-u62137sr7j] { color: var(--status-error); }

.fn-res-flags[b-u62137sr7j] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fn-flag[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
}

.fn-flag--error[b-u62137sr7j] {
    color: var(--status-error);
    background: var(--status-error-muted);
}

.fn-flag--warning[b-u62137sr7j] {
    color: var(--status-warning);
    background: var(--status-warning-muted);
}

.fn-flag--success[b-u62137sr7j] {
    color: var(--status-success);
    background: var(--status-success-muted);
}

/* ──── Portfolio Status Strip ──── */
.fn-portfolio-strip[b-u62137sr7j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: var(--space-6);
}

.fn-portfolio-bars[b-u62137sr7j] {
    margin-top: 4px;
}

.fn-port-rows[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.fn-port-row[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fn-port-label[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    min-width: 90px;
}

.fn-port-bar-track[b-u62137sr7j] {
    flex: 1;
    height: 8px;
    background: var(--bg-track);
    border-radius: 4px;
    overflow: hidden;
}

.fn-port-bar-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fn-port-bar-fill.success[b-u62137sr7j] { background: var(--status-success); }
.fn-port-bar-fill.warning[b-u62137sr7j] { background: var(--status-warning); }
.fn-port-bar-fill.error[b-u62137sr7j] { background: var(--status-error); }

.fn-port-count[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 24px;
    text-align: right;
}

.fn-port-count.success[b-u62137sr7j] { color: var(--status-success); }
.fn-port-count.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-port-count.error[b-u62137sr7j] { color: var(--status-error); }

.fn-ldot[b-u62137sr7j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.fn-ldot.success[b-u62137sr7j] { background: var(--status-success); }
.fn-ldot.warning[b-u62137sr7j] { background: var(--status-warning); }
.fn-ldot.error[b-u62137sr7j] { background: var(--status-error); }

/* ──── Department Costs ──── */
.fn-dept-section[b-u62137sr7j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: var(--space-6);
}

.fn-dept-list[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.fn-dept-row[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.fn-dept-row:hover[b-u62137sr7j] {
    background: var(--bg-row-hover);
}

.fn-dept-info[b-u62137sr7j] {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fn-dept-name[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.fn-dept-meta[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--text-disabled);
}

.fn-dept-bar-area[b-u62137sr7j] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fn-dept-bar[b-u62137sr7j] {
    flex: 1;
    height: 6px;
    background: var(--bg-track);
    border-radius: 3px;
    overflow: hidden;
}

.fn-dept-bar-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transition: width 0.6s ease;
}

.fn-dept-pct[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
}

.fn-dept-cost[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 80px;
    text-align: right;
}

/* ──── Project Budgets Table ──── */
.fn-budgets-panel[b-u62137sr7j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.fn-budgets-header[b-u62137sr7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
    flex-wrap: wrap;
}

.fn-budgets-controls[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fn-budgets-search[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    transition: border-color 0.15s ease;
}

.fn-budgets-search:focus-within[b-u62137sr7j] {
    border-color: var(--accent-primary);
}

.fn-budgets-search-input[b-u62137sr7j] {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-primary);
    width: 140px;
}

.fn-budgets-search-input[b-u62137sr7j]::placeholder {
    color: var(--text-disabled);
}

.fn-budgets-count[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-disabled);
    white-space: nowrap;
}

.fn-budgets-table-wrap[b-u62137sr7j] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fn-budgets-table[b-u62137sr7j] {
    width: 100%;
    border-collapse: collapse;
}

.fn-budgets-table thead th[b-u62137sr7j] {
    padding: 10px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.fn-budgets-table tbody td[b-u62137sr7j] {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}

.fn-bt-row[b-u62137sr7j] {
    transition: background 0.15s ease;
}

.fn-bt-row:hover[b-u62137sr7j] {
    background: var(--bg-row-hover);
}

.fn-bt-project[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fn-bt-name[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fn-bt-budget[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.fn-bt-amounts[b-u62137sr7j] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.fn-bt-spent[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fn-bt-sep[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--text-disabled);
}

.fn-bt-total[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.fn-bt-bar[b-u62137sr7j] {
    height: 4px;
    background: var(--bg-track);
    border-radius: 2px;
    overflow: hidden;
}

.fn-bt-bar-fill[b-u62137sr7j] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.fn-bt-bar-fill.success[b-u62137sr7j] { background: var(--status-success); }
.fn-bt-bar-fill.warning[b-u62137sr7j] { background: var(--status-warning); }
.fn-bt-bar-fill.error[b-u62137sr7j] { background: var(--status-error); }

.fn-bt-pct[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
}

.fn-bt-pct.success[b-u62137sr7j] { color: var(--status-success); }
.fn-bt-pct.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-bt-pct.error[b-u62137sr7j] { color: var(--status-error); }

.fn-bt-burn[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.fn-bt-burn-unit[b-u62137sr7j] {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-disabled);
    margin-left: 2px;
}

.fn-bt-na[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-disabled);
}

.fn-bt-forecast[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.fn-bt-forecast.warning[b-u62137sr7j] { color: var(--status-warning); }
.fn-bt-forecast.error[b-u62137sr7j] { color: var(--status-error); }

/* Pagination */
.fn-pagination[b-u62137sr7j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
}

.fn-pag-btn[b-u62137sr7j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.fn-pag-btn:hover:not(:disabled)[b-u62137sr7j] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.fn-pag-btn:disabled[b-u62137sr7j] {
    opacity: 0.3;
    cursor: not-allowed;
}

.fn-pag-info[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ──── Cost Breakdown ──── */
.fn-cost-header[b-u62137sr7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.fn-cost-hint[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-disabled);
}

.fn-cost-selector[b-u62137sr7j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.fn-cost-btn[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 0;
}

.fn-cost-btn:hover[b-u62137sr7j] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-muted);
}

.fn-cost-btn.active[b-u62137sr7j] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-muted);
}

.fn-cost-btn-name[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.fn-cost-btn-amt[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.fn-cost-btn.active .fn-cost-btn-name[b-u62137sr7j] {
    color: var(--accent-primary);
}

.fn-cost-result[b-u62137sr7j] {
    margin-top: 16px;
}

.fn-cost-empty[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-disabled);
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

/* ──── Critical Alerts ──── */
.fn-alerts-section[b-u62137sr7j] {
    margin-bottom: var(--space-6);
}

.fn-section-head[b-u62137sr7j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fn-alert-count[b-u62137sr7j] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--status-error);
    background: var(--status-error-muted);
    padding: 2px 10px;
    border-radius: 20px;
}

.fn-alert-list[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fn-alert-item[b-u62137sr7j] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--status-error);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.fn-alert-pulse[b-u62137sr7j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-error);
    flex-shrink: 0;
    margin-top: 5px;
    box-shadow: 0 0 8px var(--status-error-glow);
}

.fn-alert-body[b-u62137sr7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fn-alert-title[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fn-alert-msg[b-u62137sr7j] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ──── RESPONSIVE ──── */
@media (max-width: 768px) {
    .fn-kpi-row[b-u62137sr7j] {
        grid-template-columns: 1fr 1fr;
    }

    .fn-kpi:first-child[b-u62137sr7j] { border-radius: var(--radius-lg) 0 0 0; }
    .fn-kpi:nth-child(2)[b-u62137sr7j] { border-radius: 0 var(--radius-lg) 0 0; }
    .fn-kpi:nth-child(3)[b-u62137sr7j] { border-radius: 0 0 0 var(--radius-lg); }
    .fn-kpi:last-child[b-u62137sr7j] { border-radius: 0 0 var(--radius-lg) 0; }

    .fn-duo[b-u62137sr7j] {
        grid-template-columns: 1fr;
    }

    .fn-dept-row[b-u62137sr7j] {
        flex-wrap: wrap;
    }

    .fn-dept-info[b-u62137sr7j] {
        flex: 1 1 100%;
    }

    .fn-dept-bar-area[b-u62137sr7j] {
        flex: 1;
    }

    .fn-port-legend[b-u62137sr7j] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .fn-bt-hide-sm[b-u62137sr7j] {
        display: none;
    }

    .fn-budgets-header[b-u62137sr7j] {
        padding: 12px 14px;
    }

    .fn-budgets-table thead th[b-u62137sr7j],
    .fn-budgets-table tbody td[b-u62137sr7j] {
        padding: 10px 12px;
    }

    .fn-budgets-search-input[b-u62137sr7j] {
        width: 100px;
    }
}

@media (max-width: 640px) {
    .fn-kpi[b-u62137sr7j] {
        padding: 14px;
    }

    .fn-kpi-value[b-u62137sr7j] {
        font-size: 1.125rem;
    }

    .fn-budget-section[b-u62137sr7j],
    .fn-panel[b-u62137sr7j],
    .fn-portfolio-strip[b-u62137sr7j],
    .fn-dept-section[b-u62137sr7j] {
        padding: 16px;
    }

    .fn-budget-track[b-u62137sr7j] {
        height: 18px;
    }

    .fn-resource-grid[b-u62137sr7j] {
        flex-wrap: wrap;
    }

    .fn-res-cell[b-u62137sr7j] {
        flex: 1 1 calc(50% - 1px);
    }

    .fn-res-cell--wide[b-u62137sr7j] {
        flex: 1 1 100%;
    }

    .fn-index-row[b-u62137sr7j] {
        flex-direction: column;
        gap: 2px;
    }

    .fn-stat:first-child[b-u62137sr7j],
    .fn-stat:last-child[b-u62137sr7j] {
        border-radius: var(--radius-md);
    }

    .fn-budgets-controls[b-u62137sr7j] {
        width: 100%;
    }

    .fn-budgets-search[b-u62137sr7j] {
        flex: 1;
    }

    .fn-budgets-search-input[b-u62137sr7j] {
        width: 100%;
    }

    .fn-dept-cost[b-u62137sr7j] {
        font-size: 0.75rem;
        min-width: 60px;
    }
}
/* /Pages/LeaveApprovals.razor.rz.scp.css */
/* ============================================
   LEAVE APPROVALS - Obsidian Command Design
   ============================================ */

/* Page Container */
.la-page[b-1ymubilhh3] {
    padding: var(--page-gutter);
    padding-bottom: calc(var(--page-gutter) + var(--bottom-nav-height));
    min-height: 100vh;
    background: var(--bg-base);
    position: relative;
    border-bottom: 1px solid var(--status-success-muted);
}

.la-ambient[b-1ymubilhh3] {
    display: none;
    pointer-events: none;
}

/* ============================================
   COMMAND BAR
   ============================================ */
.la-command[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.la-command-left[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.la-command-icon[b-1ymubilhh3] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--status-success);
    border-radius: 4px;
    color: var(--status-success);
    flex-shrink: 0;
}

.la-command-icon svg[b-1ymubilhh3] {
    width: 22px;
    height: 22px;
}

.la-command h1[b-1ymubilhh3] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.2;
}

.la-command-sub[b-1ymubilhh3] {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.la-sep[b-1ymubilhh3] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-disabled);
}

.la-pending-count[b-1ymubilhh3] {
    color: var(--status-warning);
    font-weight: 600;
}

.la-command-right[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ============================================
   TAB BAR
   ============================================ */
.la-tab-bar[b-1ymubilhh3] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.la-tab[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
    margin-bottom: -1px;
}

.la-tab:hover[b-1ymubilhh3] {
    color: var(--text-secondary);
}

.la-tab.active[b-1ymubilhh3] {
    color: var(--status-success);
    font-weight: 600;
    border-bottom-color: var(--status-success);
}

.la-tab-badge[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-on-primary);
    background: var(--status-warning);
    border-radius: 2px;
    line-height: 1;
}

.la-tab.active .la-tab-badge[b-1ymubilhh3] {
    background: var(--status-success);
    color: var(--bg-base);
}

/* Refresh Button */
.la-refresh-btn[b-1ymubilhh3] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.la-refresh-btn:hover:not(:disabled)[b-1ymubilhh3] {
    background: var(--bg-surface);
    color: var(--status-success);
    border-color: var(--status-success-muted);
}

.la-refresh-btn:disabled[b-1ymubilhh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   TABLE
   ============================================ */
.la-table-wrap[b-1ymubilhh3] {
    position: relative;
    z-index: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.la-table-container[b-1ymubilhh3] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.la-table[b-1ymubilhh3] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

.la-table thead[b-1ymubilhh3] {
    background: transparent;
    border-bottom: 2px solid var(--border-subtle);
}

.la-table th[b-1ymubilhh3] {
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
}

.la-th-center[b-1ymubilhh3] {
    text-align: center !important;
}

.la-table tbody tr[b-1ymubilhh3] {
    border-left: 3px solid transparent;
    transition: background 150ms ease, border-color 150ms ease;
}

.la-table tbody tr:nth-child(odd)[b-1ymubilhh3] {
    background: var(--bg-row-hover);
}

.la-table tbody tr:nth-child(even)[b-1ymubilhh3] {
    background: transparent;
}

.la-table tbody tr:hover[b-1ymubilhh3] {
    background: var(--bg-row-hover);
    border-left-color: var(--status-success);
}

.la-table td[b-1ymubilhh3] {
    padding: 10px 14px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.la-td-center[b-1ymubilhh3] {
    text-align: center;
}

/* Exceeds quota row highlight */
.la-row-exceeds[b-1ymubilhh3] {
    background: var(--status-warning-muted) !important;
}

.la-row-exceeds:hover[b-1ymubilhh3] {
    background: var(--status-warning-muted) !important;
    border-left-color: var(--status-warning) !important;
}

/* ============================================
   EMPLOYEE CELL
   ============================================ */
.la-employee[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.la-avatar[b-1ymubilhh3] {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    background: var(--status-success-muted);
    border: 1px solid var(--status-success-muted);
    color: var(--status-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.la-employee-info[b-1ymubilhh3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.la-employee-name[b-1ymubilhh3] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-employee-date[b-1ymubilhh3] {
    font-size: 0.6875rem;
    color: var(--text-disabled);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   LEAVE TYPE CHIPS
   ============================================ */
.la-type-chip[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.type-annual[b-1ymubilhh3] {
    background: var(--status-info-muted);
    color: var(--status-info);
    border: 1px solid var(--status-info-muted);
}

.type-sick[b-1ymubilhh3] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.type-emergency[b-1ymubilhh3] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-muted);
}

.type-maternity[b-1ymubilhh3] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.type-paternity[b-1ymubilhh3] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
    border: 1px solid var(--accent-secondary-muted);
}

.type-unpaid[b-1ymubilhh3] {
    background: var(--bg-row-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.type-compassionate[b-1ymubilhh3] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.type-other[b-1ymubilhh3] {
    background: var(--bg-row-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

/* ============================================
   DATES
   ============================================ */
.la-dates[b-1ymubilhh3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-date-range[b-1ymubilhh3] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Days Value */
.la-days-value[b-1ymubilhh3] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   QUOTA BADGES
   ============================================ */
.la-quota-badge[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.la-quota-badge.ok[b-1ymubilhh3] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.la-quota-badge.exceeds[b-1ymubilhh3] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-muted);
}

/* ============================================
   SALARY IMPACT CHIPS
   ============================================ */
.la-salary-chip[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.salary-paid[b-1ymubilhh3] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.salary-unpaid[b-1ymubilhh3] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.salary-none[b-1ymubilhh3] {
    background: var(--bg-row-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

/* ============================================
   STATUS CHIPS (All tab)
   ============================================ */
.la-status-chip[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.status-submitted[b-1ymubilhh3] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-muted);
}

.status-approved[b-1ymubilhh3] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.status-rejected[b-1ymubilhh3] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.status-cancelled[b-1ymubilhh3] {
    background: var(--bg-row-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.status-draft[b-1ymubilhh3] {
    background: var(--bg-row-hover);
    color: var(--text-disabled);
    border: 1px solid var(--border-subtle);
}

/* ============================================
   NOTES
   ============================================ */
.la-notes-text[b-1ymubilhh3] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
    cursor: help;
}

.la-no-notes[b-1ymubilhh3] {
    color: var(--text-disabled);
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.la-quick-actions[b-1ymubilhh3] {
    display: flex;
    gap: 6px;
}

.la-action-btn[b-1ymubilhh3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.la-action-btn:disabled[b-1ymubilhh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.la-action-btn.approve[b-1ymubilhh3] {
    background: transparent;
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.la-action-btn.approve:hover:not(:disabled)[b-1ymubilhh3] {
    background: var(--status-success);
    color: var(--bg-base);
    border-color: var(--status-success);
}

.la-action-btn.reject[b-1ymubilhh3] {
    background: transparent;
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.la-action-btn.reject:hover:not(:disabled)[b-1ymubilhh3] {
    background: var(--status-error);
    color: var(--bg-base);
    border-color: var(--status-error);
}

.la-action-btn.revoke[b-1ymubilhh3] {
    background: transparent;
    color: var(--status-warning);
    border: 1px solid var(--status-warning-muted);
    margin-top: 6px;
    font-size: 0.7rem;
    padding: 4px 10px;
    min-height: 28px;
}

.la-action-btn.revoke:hover:not(:disabled)[b-1ymubilhh3] {
    background: var(--status-warning);
    color: var(--bg-base);
    border-color: var(--status-warning);
}

.la-action-btn.cancel-review[b-1ymubilhh3] {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.la-action-btn.cancel-review:hover[b-1ymubilhh3] {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-default);
}

/* ============================================
   REVIEW SECTION (Inline)
   ============================================ */
.la-review-section[b-1ymubilhh3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.la-review-textarea[b-1ymubilhh3] {
    width: 100%;
    padding: 8px 10px 8px 13px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--status-success);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-primary);
    resize: vertical;
    min-height: 48px;
    max-height: 120px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
    line-height: 1.4;
}

.la-review-textarea:focus[b-1ymubilhh3] {
    outline: none;
    border-color: var(--status-success-muted);
    border-left-color: var(--status-success);
    box-shadow: 0 0 0 2px var(--status-success-muted);
    background: var(--bg-surface-hover);
}

.la-review-textarea[b-1ymubilhh3]::placeholder {
    color: var(--text-disabled);
}

.la-review-actions[b-1ymubilhh3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================
   RESOLVED INFO
   ============================================ */
.la-resolved-info[b-1ymubilhh3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-reviewed-by[b-1ymubilhh3] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.la-review-note[b-1ymubilhh3] {
    font-size: 0.6875rem;
    color: var(--text-disabled);
    font-style: italic;
    cursor: help;
}

/* ============================================
   SPINNER
   ============================================ */
.la-spinner[b-1ymubilhh3] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-subtle);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: laSpin-b-1ymubilhh3 0.6s linear infinite;
}

@keyframes laSpin-b-1ymubilhh3 {
    to { transform: rotate(360deg); }
}

.spin[b-1ymubilhh3] {
    animation: laSpin-b-1ymubilhh3 1s linear infinite;
}

/* ============================================
   PAGINATION
   ============================================ */
.la-pagination[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-subtle);
}

.la-pag-btn[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.la-pag-btn:hover:not(:disabled)[b-1ymubilhh3] {
    border-color: var(--status-success);
    color: var(--status-success);
}

.la-pag-btn:disabled[b-1ymubilhh3] {
    opacity: 0.3;
    cursor: not-allowed;
}

.la-pag-info[b-1ymubilhh3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.la-empty[b-1ymubilhh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.la-empty-visual[b-1ymubilhh3] {
    margin-bottom: var(--space-6);
    opacity: 0.35;
    color: var(--text-muted);
}

.la-empty-title[b-1ymubilhh3] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-2) 0;
}

.la-empty-desc[b-1ymubilhh3] {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 380px;
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   SKELETON LOADING
   ============================================ */
.la-skeleton[b-1ymubilhh3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.la-skeleton-row[b-1ymubilhh3] {
    height: 56px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
}

.skeleton-pulse[b-1ymubilhh3] {
    animation: laShimmer-b-1ymubilhh3 1.5s ease-in-out infinite;
}

@keyframes laShimmer-b-1ymubilhh3 {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.la-error-toast[b-1ymubilhh3],
.la-success-toast[b-1ymubilhh3] {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 4px 24px var(--bg-overlay);
    z-index: 1000;
    animation: laToastIn-b-1ymubilhh3 200ms ease-out forwards;
}

@keyframes laToastIn-b-1ymubilhh3 {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.la-error-toast[b-1ymubilhh3] {
    background: var(--bg-elevated);
    border: 1px solid var(--status-error-muted);
    border-left: 3px solid var(--status-error);
    color: var(--status-error);
}

.la-success-toast[b-1ymubilhh3] {
    background: var(--bg-elevated);
    border: 1px solid var(--status-success-muted);
    border-left: 3px solid var(--status-success);
    color: var(--status-success);
}

.la-toast-close[b-1ymubilhh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    border-radius: 2px;
    transition: opacity 150ms ease;
    margin-left: 4px;
    flex-shrink: 0;
}

.la-toast-close:hover[b-1ymubilhh3] {
    opacity: 1;
}

/* ============================================
   RESPONSIVE: Tablet (768px)
   ============================================ */
@media (max-width: 768px) {
    .la-page[b-1ymubilhh3] {
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + var(--bottom-nav-height));
    }

    .la-command[b-1ymubilhh3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .la-command-right[b-1ymubilhh3] {
        width: 100%;
        justify-content: space-between;
    }

    .la-command h1[b-1ymubilhh3] {
        font-size: 1.25rem;
    }

    .la-table th[b-1ymubilhh3],
    .la-table td[b-1ymubilhh3] {
        padding: 8px 10px;
    }

    .la-table[b-1ymubilhh3] {
        font-size: 0.75rem;
    }

    .la-employee-name[b-1ymubilhh3] {
        font-size: 0.75rem;
        max-width: 120px;
    }

    .la-review-section[b-1ymubilhh3] {
        min-width: 180px;
    }
}

/* ============================================
   RESPONSIVE: Mobile (640px)
   ============================================ */
@media (max-width: 640px) {
    .la-page[b-1ymubilhh3] {
        padding: var(--space-3);
        padding-bottom: calc(var(--space-3) + 80px);
    }

    .la-command-left[b-1ymubilhh3] {
        gap: var(--space-3);
    }

    .la-command-icon[b-1ymubilhh3] {
        width: 38px;
        height: 38px;
    }

    .la-command-icon svg[b-1ymubilhh3] {
        width: 18px;
        height: 18px;
    }

    .la-command h1[b-1ymubilhh3] {
        font-size: 1.1rem;
    }

    .la-command-sub[b-1ymubilhh3] {
        font-size: 0.75rem;
    }

    .la-tab[b-1ymubilhh3] {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .la-tab-badge[b-1ymubilhh3] {
        min-width: 18px;
        height: 18px;
        font-size: 0.625rem;
    }

    .la-table th[b-1ymubilhh3] {
        font-size: 0.625rem;
        padding: 6px 8px;
    }

    .la-table td[b-1ymubilhh3] {
        padding: 8px;
        font-size: 0.6875rem;
    }

    .la-avatar[b-1ymubilhh3] {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .la-employee-name[b-1ymubilhh3] {
        font-size: 0.6875rem;
        max-width: 100px;
    }

    .la-employee-date[b-1ymubilhh3] {
        font-size: 0.625rem;
    }

    .la-type-chip[b-1ymubilhh3],
    .la-quota-badge[b-1ymubilhh3],
    .la-salary-chip[b-1ymubilhh3],
    .la-status-chip[b-1ymubilhh3] {
        font-size: 0.625rem;
        padding: 3px 8px;
    }

    .la-days-value[b-1ymubilhh3] {
        font-size: 0.875rem;
    }

    .la-action-btn[b-1ymubilhh3] {
        padding: 5px 8px;
        font-size: 0.6875rem;
    }

    .la-review-textarea[b-1ymubilhh3] {
        font-size: 0.75rem;
        min-height: 40px;
    }

    .la-empty[b-1ymubilhh3] {
        padding: 60px 16px;
    }

    .la-empty-visual svg[b-1ymubilhh3] {
        width: 44px;
        height: 44px;
    }

    .la-empty-title[b-1ymubilhh3] {
        font-size: 1rem;
    }

    .la-empty-desc[b-1ymubilhh3] {
        font-size: 0.75rem;
    }

    .la-error-toast[b-1ymubilhh3],
    .la-success-toast[b-1ymubilhh3] {
        bottom: var(--space-3);
        right: var(--space-3);
        left: var(--space-3);
        font-size: 0.75rem;
        padding: 10px 14px;
    }
}

/* ============================================
   RESPONSIVE: Small Mobile (480px)
   ============================================ */
@media (max-width: 480px) {
    .la-command-right[b-1ymubilhh3] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .la-tab-bar[b-1ymubilhh3] {
        width: 100%;
    }

    .la-tab[b-1ymubilhh3] {
        flex: 1;
        justify-content: center;
    }

    .la-refresh-btn[b-1ymubilhh3] {
        align-self: flex-end;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .la-refresh-btn[b-1ymubilhh3] {
        min-width: 40px;
        min-height: 40px;
    }

    .la-tab[b-1ymubilhh3] {
        min-height: 40px;
    }

    .la-action-btn[b-1ymubilhh3] {
        min-height: 36px;
        padding: 6px 14px;
    }

    .la-table tbody tr:hover[b-1ymubilhh3] {
        background: transparent;
        border-left-color: transparent;
    }

    .la-table tbody tr:nth-child(odd):hover[b-1ymubilhh3] {
        background: var(--bg-row-hover);
    }

    .la-row-exceeds:hover[b-1ymubilhh3] {
        background: var(--status-warning-muted) !important;
        border-left-color: transparent !important;
    }

    .la-refresh-btn:hover:not(:disabled)[b-1ymubilhh3] {
        background: transparent;
        color: var(--text-muted);
        border-color: var(--border-subtle);
    }
}
/* /Pages/LeaveBalances.razor.rz.scp.css */
/* ============================================
   LEAVE BALANCES - Obsidian Command
   Clean dark base, angular elements, teal accents
   ============================================ */

/* Page Container */
[b-fyqi5zz9e1] .lb-page {
    padding: var(--page-gutter);
    padding-bottom: calc(var(--page-gutter) + var(--bottom-nav-height));
    min-height: 100vh;
    background: var(--bg-base);
    position: relative;
}

[b-fyqi5zz9e1] .lb-ambient {
    display: none;
}

/* ============================================
   COMMAND BAR
   ============================================ */
[b-fyqi5zz9e1] .lb-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

[b-fyqi5zz9e1] .lb-command-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

[b-fyqi5zz9e1] .lb-command-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-success-muted);
    border: 1px solid var(--status-success-muted);
    border-left: 3px solid var(--status-success);
    border-radius: 4px;
    color: var(--status-success);
}

[b-fyqi5zz9e1] .lb-command-icon svg {
    width: 22px;
    height: 22px;
}

[b-fyqi5zz9e1] .lb-command h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.2;
}

[b-fyqi5zz9e1] .lb-command-sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    letter-spacing: 0.01em;
}

[b-fyqi5zz9e1] .lb-sep {
    width: 3px;
    height: 3px;
    border-radius: 0;
    background: var(--text-disabled);
}

[b-fyqi5zz9e1] .lb-command-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Year Navigator */
[b-fyqi5zz9e1] .lb-year-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    padding: 2px;
}

[b-fyqi5zz9e1] .lb-year-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

[b-fyqi5zz9e1] .lb-year-btn:hover {
    background: var(--status-success-muted);
    color: var(--status-success);
}

[b-fyqi5zz9e1] .lb-year-btn svg {
    width: 14px;
    height: 14px;
}

[b-fyqi5zz9e1] .lb-year-select {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    text-align: center;
    min-width: 72px;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    appearance: none;
    padding: 4px 8px;
}

[b-fyqi5zz9e1] .lb-year-select:focus {
    outline: none;
}

[b-fyqi5zz9e1] .lb-year-select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ============================================
   SUMMARY STATS
   ============================================ */
[b-fyqi5zz9e1] .lb-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

[b-fyqi5zz9e1] .lb-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: var(--space-4) var(--space-5);
    position: relative;
    overflow: hidden;
    border-top: 2px solid transparent;
}

[b-fyqi5zz9e1] .lb-stat-card:nth-child(1) {
    border-top-color: var(--status-info);
}

[b-fyqi5zz9e1] .lb-stat-card:nth-child(2) {
    border-top-color: var(--status-warning);
}

[b-fyqi5zz9e1] .lb-stat-card:nth-child(3) {
    border-top-color: var(--status-success);
}

[b-fyqi5zz9e1] .lb-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

[b-fyqi5zz9e1] .lb-stat-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-fyqi5zz9e1] .lb-stat-dot {
    width: 3px;
    height: 3px;
    border-radius: 0;
}

[b-fyqi5zz9e1] .dot-blue { background: var(--status-info); }
[b-fyqi5zz9e1] .dot-amber { background: var(--status-warning); }
[b-fyqi5zz9e1] .dot-emerald { background: var(--status-success); }

[b-fyqi5zz9e1] .lb-stat-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

/* ============================================
   BALANCES TABLE
   ============================================ */
[b-fyqi5zz9e1] .lb-table-wrap {
    position: relative;
    z-index: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}

[b-fyqi5zz9e1] .lb-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-fyqi5zz9e1] .lb-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

[b-fyqi5zz9e1] .lb-th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 14px;
    text-align: left;
    border-bottom: 2px solid var(--border-default);
    background: transparent;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

[b-fyqi5zz9e1] .lb-th-num {
    text-align: right;
}

[b-fyqi5zz9e1] .lb-th-quarter {
    text-align: center;
}

[b-fyqi5zz9e1] .lb-th-actions {
    text-align: center;
    width: 100px;
}

[b-fyqi5zz9e1] .lb-th-employee {
    min-width: 180px;
}

[b-fyqi5zz9e1] .lb-row {
    transition: all var(--duration-fast) ease;
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
}

[b-fyqi5zz9e1] .lb-row:last-child {
    border-bottom: none;
}

[b-fyqi5zz9e1] .lb-row:hover {
    background: var(--bg-row-hover);
    border-left-color: var(--status-success);
}

[b-fyqi5zz9e1] .lb-td {
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    vertical-align: middle;
}

[b-fyqi5zz9e1] .lb-td-employee {
    min-width: 180px;
}

[b-fyqi5zz9e1] .lb-employee-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 220px;
}

[b-fyqi5zz9e1] .lb-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-fyqi5zz9e1] .lb-num-value {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

[b-fyqi5zz9e1] .lb-td-quarter {
    text-align: center;
}

[b-fyqi5zz9e1] .lb-quarterly-usage {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
}

[b-fyqi5zz9e1] .lb-td-actions {
    text-align: center;
}

/* Remaining Value - Color Coded */
[b-fyqi5zz9e1] .lb-remaining-value {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 2px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

[b-fyqi5zz9e1] .remaining-low {
    color: var(--status-error);
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-muted);
    box-shadow: 2px 2px 0 var(--status-error-muted);
}

[b-fyqi5zz9e1] .remaining-medium {
    color: var(--status-warning);
    background: var(--status-warning-muted);
    border: 1px solid var(--status-warning-muted);
    box-shadow: 2px 2px 0 var(--status-warning-muted);
}

[b-fyqi5zz9e1] .remaining-good {
    color: var(--status-success);
    background: var(--status-success-muted);
    border: 1px solid var(--status-success-muted);
    box-shadow: 2px 2px 0 var(--status-success-muted);
}

/* Adjust Button */
[b-fyqi5zz9e1] .lb-adjust-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}

[b-fyqi5zz9e1] .lb-adjust-btn svg {
    width: 13px;
    height: 13px;
}

[b-fyqi5zz9e1] .lb-adjust-btn:hover {
    background: var(--status-success-muted);
    border-color: var(--status-success-muted);
    color: var(--status-success);
}

/* ============================================
   PAGINATION
   ============================================ */
.lb-pagination[b-fyqi5zz9e1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-subtle);
}

.lb-pag-btn[b-fyqi5zz9e1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.lb-pag-btn:hover:not(:disabled)[b-fyqi5zz9e1] {
    border-color: var(--status-success);
    color: var(--status-success);
}

.lb-pag-btn:disabled[b-fyqi5zz9e1] {
    opacity: 0.3;
    cursor: not-allowed;
}

.lb-pag-info[b-fyqi5zz9e1] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ============================================
   EMPTY STATE
   ============================================ */
[b-fyqi5zz9e1] .lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

[b-fyqi5zz9e1] .lb-empty-visual {
    margin-bottom: var(--space-6);
    opacity: 0.4;
}

[b-fyqi5zz9e1] .lb-empty-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

[b-fyqi5zz9e1] .lb-empty-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 380px;
    margin: 0;
    line-height: 1.6;
}

/* Error State */
[b-fyqi5zz9e1] .lb-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    gap: var(--space-4);
}

[b-fyqi5zz9e1] .lb-error-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-error-muted);
    border-radius: 4px;
    color: var(--status-error);
}

[b-fyqi5zz9e1] .lb-error-icon svg {
    width: 26px;
    height: 26px;
}

[b-fyqi5zz9e1] .lb-error-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Skeleton */
[b-fyqi5zz9e1] .lb-table-skeleton {
    position: relative;
    z-index: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: var(--space-4);
}

/* ============================================
   ADJUST DIALOG
   ============================================ */
[b-fyqi5zz9e1] .lb-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    z-index: 9000;
    animation: lbOverlayIn-b-fyqi5zz9e1 200ms ease forwards;
}

@keyframes lbOverlayIn-b-fyqi5zz9e1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

[b-fyqi5zz9e1] .lb-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    width: min(500px, 92vw);
    z-index: 9001;
    overflow: hidden;
    box-shadow: 0 24px 48px var(--bg-overlay);
    animation: lbDialogIn-b-fyqi5zz9e1 250ms var(--ease-out-expo) forwards;
}

@keyframes lbDialogIn-b-fyqi5zz9e1 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

[b-fyqi5zz9e1] .lb-dialog-strip {
    height: 3px;
    width: 100%;
    background: var(--status-success);
}

[b-fyqi5zz9e1] .lb-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
}

[b-fyqi5zz9e1] .lb-dialog-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

[b-fyqi5zz9e1] .lb-dialog-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 3px 0 0 0;
}

[b-fyqi5zz9e1] .lb-dialog-x {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    flex-shrink: 0;
}

[b-fyqi5zz9e1] .lb-dialog-x:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[b-fyqi5zz9e1] .lb-dialog-x svg {
    width: 16px;
    height: 16px;
}

/* Dialog Form */
[b-fyqi5zz9e1] .lb-dialog-form {
    padding: 0 var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Info summary inside dialog */
[b-fyqi5zz9e1] .lb-dialog-info {
    background: var(--bg-track);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--status-success);
    border-radius: 2px;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-fyqi5zz9e1] .lb-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[b-fyqi5zz9e1] .lb-info-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-fyqi5zz9e1] .lb-info-value {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

[b-fyqi5zz9e1] .lb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-fyqi5zz9e1] .lb-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

[b-fyqi5zz9e1] .lb-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-fyqi5zz9e1] .lb-optional {
    font-weight: 400;
    color: var(--text-disabled);
    text-transform: none;
    letter-spacing: 0;
}

[b-fyqi5zz9e1] .lb-input {
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: all var(--duration-fast) ease;
    width: 100%;
    box-sizing: border-box;
}

[b-fyqi5zz9e1] .lb-input:focus {
    outline: none;
    border-color: var(--status-success);
    box-shadow: 0 0 0 3px var(--status-success-muted);
    background: var(--bg-surface-hover);
}

[b-fyqi5zz9e1] .lb-input::placeholder {
    color: var(--text-disabled);
}

[b-fyqi5zz9e1] .lb-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

/* Dialog Footer */
[b-fyqi5zz9e1] .lb-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

/* Spinner */
[b-fyqi5zz9e1] .lb-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--status-success-muted);
    border-top-color: var(--status-success);
    border-radius: 50%;
    animation: lbSpin-b-fyqi5zz9e1 0.6s linear infinite;
    margin-right: 6px;
}

@keyframes lbSpin-b-fyqi5zz9e1 {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@@media (max-width: 768px) {
    [b-fyqi5zz9e1] .lb-command {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    [b-fyqi5zz9e1] .lb-command-right {
        width: 100%;
        justify-content: flex-start;
    }

    [b-fyqi5zz9e1] .lb-stats {
        grid-template-columns: 1fr;
    }

    [b-fyqi5zz9e1] .lb-field-row {
        grid-template-columns: 1fr;
    }

    [b-fyqi5zz9e1] .lb-adjust-btn {
        opacity: 1;
    }
}

@@media (max-width: 480px) {
    [b-fyqi5zz9e1] .lb-stats {
        gap: var(--space-2);
    }

    [b-fyqi5zz9e1] .lb-stat-card {
        padding: var(--space-3) var(--space-4);
    }

    [b-fyqi5zz9e1] .lb-stat-value {
        font-size: 1.5rem;
    }
}
/* /Pages/LeaveCalendar.razor.rz.scp.css */
/* ============================================
   LEAVE CALENDAR - Obsidian Command
   ============================================ */

/* Page Container */
.lc-page[b-gyjit28blu] {
    padding: var(--page-gutter);
    padding-bottom: calc(var(--page-gutter) + var(--bottom-nav-height));
    min-height: 100%;
    background: var(--bg-base);
    border-top: 1px solid var(--status-success-muted);
    position: relative;
}

.lc-ambient[b-gyjit28blu] {
    display: none;
    pointer-events: none;
}

/* ============================================
   COMMAND BAR
   ============================================ */
.lc-command[b-gyjit28blu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
    gap: var(--space-4);
}

.lc-command-left[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.lc-command-icon[b-gyjit28blu] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-success-muted);
    border: 1px solid var(--status-success-muted);
    border-left: 3px solid var(--status-success);
    border-radius: 4px;
    color: var(--status-success);
    flex-shrink: 0;
}

.lc-command-icon svg[b-gyjit28blu] {
    width: 22px;
    height: 22px;
}

.lc-command h1[b-gyjit28blu] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.2;
}

.lc-command-sub[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.lc-sep[b-gyjit28blu] {
    width: 3px;
    height: 3px;
    border-radius: 0;
    background: var(--text-disabled);
}

.lc-command-right[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ============================================
   PROJECT SELECTOR
   ============================================ */
.lc-project-select-wrap[b-gyjit28blu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-select-label[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lc-select[b-gyjit28blu] {
    appearance: none;
    padding: 8px 36px 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 200px;
    transition: border-color var(--duration-fast) ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.lc-select:focus[b-gyjit28blu] {
    outline: none;
    border-color: var(--status-success);
    box-shadow: none;
    background-color: var(--bg-surface);
}

.lc-select:hover[b-gyjit28blu] {
    border-color: var(--border-default);
}

.lc-select option[b-gyjit28blu] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ============================================
   MONTH NAVIGATION
   ============================================ */
.lc-month-nav[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    padding: 2px;
}

.lc-nav-btn[b-gyjit28blu] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.lc-nav-btn:hover[b-gyjit28blu] {
    background: var(--bg-subtle);
    color: var(--status-success);
}

.lc-nav-btn svg[b-gyjit28blu] {
    width: 14px;
    height: 14px;
}

.lc-month-display[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
    letter-spacing: 0.02em;
    padding: 0 var(--space-2);
    text-transform: uppercase;
}

.lc-today-btn[b-gyjit28blu] {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lc-today-btn:hover[b-gyjit28blu] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border-color: var(--status-success-muted);
}

/* ============================================
   CALENDAR PANEL
   ============================================ */
.lc-calendar-panel[b-gyjit28blu] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.lc-calendar-grid[b-gyjit28blu] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

/* Day Headers */
.lc-day-header[b-gyjit28blu] {
    padding: 10px 8px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
}

.lc-day-header-weekend[b-gyjit28blu] {
    color: var(--text-disabled);
}

/* Day Cells */
.lc-day-cell[b-gyjit28blu] {
    min-height: 96px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    transition: border-left var(--duration-fast) ease;
    position: relative;
    border-left: 3px solid transparent;
}

.lc-day-cell:nth-child(6n + 12)[b-gyjit28blu] {
    border-right: none;
}

.lc-day-cell:hover[b-gyjit28blu] {
    border-left: 3px solid var(--status-success-muted);
}

.lc-day-cell.lc-other-month[b-gyjit28blu] {
    opacity: 0.35;
}

.lc-day-cell.lc-other-month .lc-day-number[b-gyjit28blu] {
    color: var(--text-disabled);
}

.lc-day-cell.lc-other-month .lc-leave-entry[b-gyjit28blu] {
    opacity: 0.6;
}

.lc-day-cell.lc-weekend[b-gyjit28blu] {
    background: var(--bg-subtle);
}

.lc-day-cell.lc-today[b-gyjit28blu] {
    background: var(--status-success-muted);
}

/* Day Number */
.lc-day-number[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1;
}

.lc-today-number[b-gyjit28blu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--status-success);
    color: var(--bg-base);
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Day Entries */
.lc-day-entries[b-gyjit28blu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ============================================
   LEAVE ENTRY BARS
   ============================================ */
.lc-leave-entry[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    transition: opacity var(--duration-fast) ease;
}

.lc-entry-dot[b-gyjit28blu] {
    width: 4px;
    height: 4px;
    border-radius: 0;
    flex-shrink: 0;
}

.lc-entry-name[b-gyjit28blu] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Leave type colors */
.lc-type-annual[b-gyjit28blu] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.lc-type-annual .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-annual[b-gyjit28blu] {
    background: var(--status-info);
}

.lc-type-sick[b-gyjit28blu] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.lc-type-sick .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-sick[b-gyjit28blu] {
    background: var(--status-warning);
}

.lc-type-emergency[b-gyjit28blu] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.lc-type-emergency .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-emergency[b-gyjit28blu] {
    background: var(--status-error);
}

.lc-type-maternity[b-gyjit28blu] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.lc-type-maternity .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-maternity[b-gyjit28blu] {
    background: var(--accent-secondary);
}

.lc-type-paternity[b-gyjit28blu] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.lc-type-paternity .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-paternity[b-gyjit28blu] {
    background: var(--status-success);
}

.lc-type-unpaid[b-gyjit28blu] {
    background: var(--border-subtle);
    color: var(--text-muted);
}

.lc-type-unpaid .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-unpaid[b-gyjit28blu] {
    background: var(--text-muted);
}

.lc-type-compassionate[b-gyjit28blu] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.lc-type-compassionate .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-compassionate[b-gyjit28blu] {
    background: var(--status-error);
}

.lc-type-other[b-gyjit28blu] {
    background: var(--border-subtle);
    color: var(--text-muted);
}

.lc-type-other .lc-entry-dot[b-gyjit28blu],
.lc-legend-dot.lc-type-other[b-gyjit28blu] {
    background: var(--text-muted);
}

.lc-more-entries[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 1px 5px;
    cursor: default;
}

/* ============================================
   SUMMARY STRIP
   ============================================ */
.lc-summary-strip[b-gyjit28blu] {
    display: flex;
    gap: 0;
    margin-top: var(--space-4);
    position: relative;
    z-index: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.lc-summary-stat[b-gyjit28blu] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--border-subtle);
    flex: 1;
}

.lc-summary-stat:last-child[b-gyjit28blu] {
    border-right: none;
}

.lc-summary-value[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.lc-summary-label[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================
   LEGEND
   ============================================ */
.lc-legend[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.lc-legend-item[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lc-legend-dot[b-gyjit28blu] {
    width: 3px;
    height: 3px;
    border-radius: 0;
    flex-shrink: 0;
}

.lc-legend-label[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ============================================
   ENTRIES DETAIL PANEL
   ============================================ */
.lc-entries-panel[b-gyjit28blu] {
    margin-top: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.lc-entries-header[b-gyjit28blu] {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.lc-entries-title[b-gyjit28blu] {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-entries-title svg[b-gyjit28blu] {
    color: var(--text-muted);
}

.lc-entries-badge[b-gyjit28blu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: var(--status-success-muted);
    color: var(--status-success);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
}

.lc-entries-list[b-gyjit28blu] {
    display: flex;
    flex-direction: column;
}

.lc-entry-row[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-fast) ease;
}

.lc-entry-row:last-child[b-gyjit28blu] {
    border-bottom: none;
}

.lc-entry-row:hover[b-gyjit28blu] {
    background: var(--status-success-muted);
}

.lc-entry-accent[b-gyjit28blu] {
    width: 3px;
    height: 36px;
    border-radius: 0;
    flex-shrink: 0;
}

.lc-entry-accent.lc-type-annual[b-gyjit28blu] { background: var(--status-info); }
.lc-entry-accent.lc-type-sick[b-gyjit28blu] { background: var(--status-warning); }
.lc-entry-accent.lc-type-emergency[b-gyjit28blu] { background: var(--status-error); }
.lc-entry-accent.lc-type-maternity[b-gyjit28blu] { background: var(--accent-secondary); }
.lc-entry-accent.lc-type-paternity[b-gyjit28blu] { background: var(--status-success); }
.lc-entry-accent.lc-type-unpaid[b-gyjit28blu] { background: var(--text-muted); }
.lc-entry-accent.lc-type-compassionate[b-gyjit28blu] { background: var(--status-error); }
.lc-entry-accent.lc-type-other[b-gyjit28blu] { background: var(--text-muted); }

.lc-entry-avatar[b-gyjit28blu] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-transform: uppercase;
}

.lc-entry-info[b-gyjit28blu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-entry-person[b-gyjit28blu] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-entry-dates[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.lc-entry-meta[b-gyjit28blu] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lc-entry-type-tag[b-gyjit28blu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lc-entry-status-tag[b-gyjit28blu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lc-status-approved[b-gyjit28blu] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.lc-status-submitted[b-gyjit28blu] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.lc-status-rejected[b-gyjit28blu] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.lc-status-cancelled[b-gyjit28blu] {
    background: var(--border-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.lc-status-draft[b-gyjit28blu] {
    background: var(--border-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.lc-entry-days[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.lc-empty[b-gyjit28blu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.lc-empty-visual[b-gyjit28blu] {
    margin-bottom: var(--space-6);
    opacity: 0.25;
    color: var(--text-disabled);
}

.lc-empty-title[b-gyjit28blu] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.lc-empty-desc[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 380px;
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   ERROR STATE
   ============================================ */
.lc-error[b-gyjit28blu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    gap: var(--space-4);
}

.lc-error-icon[b-gyjit28blu] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-error-muted);
    border-radius: 4px;
    color: var(--status-error);
}

.lc-error-text[b-gyjit28blu] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.lc-retry-btn[b-gyjit28blu] {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lc-retry-btn:hover[b-gyjit28blu] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border-color: var(--status-success-muted);
}

/* ============================================
   SKELETON LOADING
   ============================================ */
.lc-skeleton-grid[b-gyjit28blu] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.lc-skeleton-header-row[b-gyjit28blu] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
}

.lc-skeleton-header-cell[b-gyjit28blu] {
    padding: 10px;
    display: flex;
    justify-content: center;
}

.lc-skeleton-row[b-gyjit28blu] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.lc-skeleton-cell[b-gyjit28blu] {
    min-height: 96px;
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

.lc-skeleton-cell:nth-child(6n)[b-gyjit28blu] {
    border-right: none;
}

.skeleton-pulse[b-gyjit28blu] {
    background: var(--bg-surface);
    border-radius: 0;
    animation: lc-shimmer-b-gyjit28blu 1.5s ease-in-out infinite;
}

@keyframes lc-shimmer-b-gyjit28blu {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ============================================
   RESPONSIVE: 1024px (Small Desktop)
   ============================================ */
@@media (max-width: 1024px) {
    .lc-command[b-gyjit28blu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .lc-command-right[b-gyjit28blu] {
        width: 100%;
    }

    .lc-select[b-gyjit28blu] {
        min-width: 180px;
    }

    .lc-day-cell[b-gyjit28blu] {
        min-height: 76px;
        padding: 4px 6px;
    }

    .lc-leave-entry[b-gyjit28blu] {
        font-size: 0.5625rem;
        padding: 1px 4px;
    }

    .lc-summary-strip[b-gyjit28blu] {
        flex-wrap: wrap;
    }

    .lc-summary-stat[b-gyjit28blu] {
        flex: 1 1 auto;
    }
}

/* ============================================
   RESPONSIVE: 768px (Tablet)
   ============================================ */
@@media (max-width: 768px) {
    .lc-page[b-gyjit28blu] {
        padding: var(--space-3);
    }

    .lc-command[b-gyjit28blu] {
        gap: var(--space-3);
    }

    .lc-command-icon[b-gyjit28blu] {
        width: 36px;
        height: 36px;
    }

    .lc-command-icon svg[b-gyjit28blu] {
        width: 18px;
        height: 18px;
    }

    .lc-command h1[b-gyjit28blu] {
        font-size: var(--text-xl);
    }

    .lc-command-right[b-gyjit28blu] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .lc-project-select-wrap[b-gyjit28blu] {
        width: 100%;
    }

    .lc-select[b-gyjit28blu] {
        width: 100%;
        min-width: unset;
    }

    .lc-month-nav[b-gyjit28blu] {
        align-self: center;
    }

    .lc-today-btn[b-gyjit28blu] {
        align-self: center;
    }

    .lc-day-header[b-gyjit28blu] {
        font-size: 0.5625rem;
        padding: 6px 2px;
    }

    .lc-day-cell[b-gyjit28blu] {
        min-height: 64px;
        padding: 3px 4px;
        border-left-width: 2px;
    }

    .lc-day-number[b-gyjit28blu] {
        font-size: 0.6875rem;
    }

    .lc-today-number[b-gyjit28blu] {
        width: 20px;
        height: 20px;
        font-size: 0.625rem;
    }

    .lc-leave-entry[b-gyjit28blu] {
        font-size: 0.5rem;
        padding: 1px 3px;
        gap: 2px;
    }

    .lc-entry-dot[b-gyjit28blu] {
        width: 3px;
        height: 3px;
    }

    .lc-more-entries[b-gyjit28blu] {
        font-size: 0.5rem;
    }

    .lc-summary-strip[b-gyjit28blu] {
        flex-direction: column;
        border-radius: 4px;
    }

    .lc-summary-stat[b-gyjit28blu] {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .lc-summary-stat:last-child[b-gyjit28blu] {
        border-bottom: none;
    }

    .lc-legend[b-gyjit28blu] {
        gap: var(--space-3);
    }

    .lc-legend-label[b-gyjit28blu] {
        font-size: 0.625rem;
    }

    .lc-entry-row[b-gyjit28blu] {
        padding: var(--space-3) var(--space-4);
    }

    .lc-entry-meta[b-gyjit28blu] {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ============================================
   RESPONSIVE: 480px (Mobile)
   ============================================ */
@@media (max-width: 480px) {
    .lc-page[b-gyjit28blu] {
        padding: var(--space-2);
        padding-bottom: calc(var(--space-2) + var(--bottom-nav-height));
    }

    .lc-command-left[b-gyjit28blu] {
        gap: var(--space-3);
    }

    .lc-command h1[b-gyjit28blu] {
        font-size: var(--text-lg);
    }

    .lc-command-sub[b-gyjit28blu] {
        font-size: 0.6875rem;
    }

    .lc-month-display[b-gyjit28blu] {
        font-size: 0.8125rem;
        min-width: 120px;
    }

    .lc-day-cell[b-gyjit28blu] {
        min-height: 52px;
        padding: 2px 3px;
    }

    .lc-day-number[b-gyjit28blu] {
        font-size: 0.625rem;
        margin-bottom: 2px;
    }

    .lc-leave-entry[b-gyjit28blu] {
        font-size: 0.4375rem;
        padding: 1px 2px;
    }

    .lc-entry-dot[b-gyjit28blu] {
        width: 3px;
        height: 3px;
    }

    .lc-entry-row[b-gyjit28blu] {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }

    .lc-entry-avatar[b-gyjit28blu] {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    .lc-entry-person[b-gyjit28blu] {
        font-size: 0.75rem;
    }

    .lc-entry-dates[b-gyjit28blu] {
        font-size: 0.625rem;
    }

    .lc-entry-type-tag[b-gyjit28blu],
    .lc-entry-status-tag[b-gyjit28blu] {
        font-size: 0.5625rem;
        padding: 1px 5px;
    }

    .lc-entry-days[b-gyjit28blu] {
        font-size: 0.6875rem;
    }

    .lc-legend[b-gyjit28blu] {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .lc-legend-dot[b-gyjit28blu] {
        width: 3px;
        height: 3px;
    }

    .lc-legend-label[b-gyjit28blu] {
        font-size: 0.5625rem;
    }

    .lc-entries-header[b-gyjit28blu] {
        padding: var(--space-3) var(--space-4);
    }

    .lc-entries-title[b-gyjit28blu] {
        font-size: 0.8125rem;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@@media (hover: none) and (pointer: coarse) {
    .lc-nav-btn[b-gyjit28blu] {
        min-width: 40px;
        min-height: 40px;
    }

    .lc-today-btn[b-gyjit28blu] {
        min-height: 40px;
        padding: 8px 16px;
    }

    .lc-select[b-gyjit28blu] {
        min-height: 44px;
        font-size: 1rem;
    }

    .lc-day-cell:hover[b-gyjit28blu] {
        border-left-color: transparent;
    }

    .lc-entry-row:hover[b-gyjit28blu] {
        background: transparent;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Theme toggle - top right corner */
.login-theme-toggle[b-1im6pzpq3o] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
}

.login-page[b-1im6pzpq3o] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-base);
}

.login-bg[b-1im6pzpq3o] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.login-bg-gradient[b-1im6pzpq3o] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-primary-muted) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, var(--accent-secondary-muted) 0%, transparent 50%);
}

.login-bg-grid[b-1im6pzpq3o] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 70%);
}

.login-bg-glow[b-1im6pzpq3o] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--accent-primary-subtle) 0%, transparent 70%);
    animation: pulse-b-1im6pzpq3o 8s ease-in-out infinite;
}

@keyframes pulse-b-1im6pzpq3o {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.login-container[b-1im6pzpq3o] {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}

.login-header[b-1im6pzpq3o] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo[b-1im6pzpq3o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.login-logo-icon[b-1im6pzpq3o] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.b3g-logo-img[b-1im6pzpq3o] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-logo-text h1[b-1im6pzpq3o] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.login-logo-text span[b-1im6pzpq3o] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.login-card[b-1im6pzpq3o] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.login-error[b-1im6pzpq3o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-border);
    border-radius: 10px;
    color: var(--status-error);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.login-error span[b-1im6pzpq3o] {
    flex: 1;
}

.login-error-close[b-1im6pzpq3o] {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.login-error-close:hover[b-1im6pzpq3o] {
    opacity: 1;
}

.login-btn-microsoft[b-1im6pzpq3o] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    border-radius: 10px;
    color: var(--text-on-primary);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.login-btn-microsoft:hover:not(:disabled)[b-1im6pzpq3o] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.login-btn-microsoft:active:not(:disabled)[b-1im6pzpq3o] {
    transform: translateY(0);
}

.login-btn-microsoft:disabled[b-1im6pzpq3o] {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-btn-icon[b-1im6pzpq3o] {
    flex-shrink: 0;
}

.login-btn-spinner[b-1im6pzpq3o] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-1im6pzpq3o 0.8s linear infinite;
}

@keyframes spin-b-1im6pzpq3o {
    to {
        transform: rotate(360deg);
    }
}

.login-divider[b-1im6pzpq3o] {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    gap: 1rem;
}

.login-divider[b-1im6pzpq3o]::before,
.login-divider[b-1im6pzpq3o]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

.login-divider span[b-1im6pzpq3o] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-form[b-1im6pzpq3o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-field[b-1im6pzpq3o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-field label[b-1im6pzpq3o] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.login-btn-email[b-1im6pzpq3o] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-emphasis);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-btn-email:hover:not(:disabled)[b-1im6pzpq3o] {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary-border);
}

.login-btn-email:disabled[b-1im6pzpq3o] {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-footer[b-1im6pzpq3o] {
    margin-top: 2rem;
    text-align: center;
}

.login-footer p[b-1im6pzpq3o] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.login-footer-badges[b-1im6pzpq3o] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.login-footer-badges span[b-1im6pzpq3o] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* MudBlazor Overrides */
[b-1im6pzpq3o] .login-form .mud-input-outlined {
    border-radius: 10px;
}

[b-1im6pzpq3o] .login-form .mud-input-outlined-border {
    border-color: var(--border-emphasis) !important;
}

[b-1im6pzpq3o] .login-form .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-primary-border) !important;
}

[b-1im6pzpq3o] .login-form .mud-input {
    color: var(--text-primary) !important;
}

[b-1im6pzpq3o] .login-form .mud-input::placeholder {
    color: var(--text-muted) !important;
}

@media (max-width: 640px) {
    .login-page[b-1im6pzpq3o] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 15vh;
    }

    .login-container[b-1im6pzpq3o] {
        max-width: 100%;
    }

    .login-logo-icon[b-1im6pzpq3o] {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        padding: 10px;
    }

    .login-logo-text h1[b-1im6pzpq3o] {
        font-size: 1.375rem;
    }

    .login-card[b-1im6pzpq3o] {
        padding: 1.5rem;
        border-radius: 14px;
    }

    .login-btn-microsoft[b-1im6pzpq3o] {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }

    .login-btn-email[b-1im6pzpq3o] {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }

    .login-header[b-1im6pzpq3o] {
        margin-bottom: 1.5rem;
    }

    .login-footer-badges[b-1im6pzpq3o] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .login-bg-glow[b-1im6pzpq3o] {
        width: 400px;
        height: 400px;
    }
}
/* /Pages/MyLeave.razor.rz.scp.css */
/* ================================================
   MY LEAVE — Obsidian Command Design System
   Sharp geometry, teal accents, dense data display
   ================================================ */

.leave-page[b-b3khzewuj3] {
    padding: var(--page-gutter);
    padding-bottom: calc(var(--page-gutter) + var(--bottom-nav-height));
    position: relative;
}

/* ---------- Page Header ---------- */
.page-header[b-b3khzewuj3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.page-header-info[b-b3khzewuj3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.page-header-icon[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--status-success);
    color: var(--status-success);
    flex-shrink: 0;
}

.page-header-icon svg[b-b3khzewuj3] {
    width: 22px;
    height: 22px;
}

.page-header h1[b-b3khzewuj3] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.page-header-sub[b-b3khzewuj3] {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 3px 0 0 0;
    line-height: 1.5;
}

.page-header-actions[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ---------- Balance Cards Grid ---------- */
.balance-cards[b-b3khzewuj3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.balance-card[b-b3khzewuj3] {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 150ms ease;
}

.balance-card:hover[b-b3khzewuj3] {
    border-color: var(--border-default);
}

.balance-card-accent[b-b3khzewuj3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

.balance-annual .balance-card-accent[b-b3khzewuj3] {
    background: var(--status-info);
}

.balance-sick .balance-card-accent[b-b3khzewuj3] {
    background: var(--status-warning);
}

.balance-emergency .balance-card-accent[b-b3khzewuj3] {
    background: var(--status-error);
}

.balance-card-content[b-b3khzewuj3] {
    padding: var(--space-5);
    padding-top: calc(var(--space-5) + 2px);
}

.balance-header[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.balance-icon[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.balance-icon svg[b-b3khzewuj3] {
    width: 16px;
    height: 16px;
}

.balance-icon.annual[b-b3khzewuj3] {
    background: var(--status-info-muted);
    border: 1px solid var(--status-info-muted);
    color: var(--status-info);
}

.balance-icon.sick[b-b3khzewuj3] {
    background: var(--status-warning-muted);
    border: 1px solid var(--status-warning-muted);
    color: var(--status-warning);
}

.balance-icon.emergency[b-b3khzewuj3] {
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-muted);
    color: var(--status-error);
}

.balance-label[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.balance-value-row[b-b3khzewuj3] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: var(--space-3);
}

.balance-value[b-b3khzewuj3] {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.balance-value.annual[b-b3khzewuj3] {
    color: var(--status-info);
}

.balance-value.sick[b-b3khzewuj3] {
    color: var(--status-warning);
}

.balance-value.emergency[b-b3khzewuj3] {
    color: var(--status-error);
}

.balance-total[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-disabled);
    font-weight: 500;
}

/* Balance Progress Bar — angular */
.balance-bar[b-b3khzewuj3] {
    width: 100%;
    height: 4px;
    background: var(--bg-surface);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.balance-bar-fill[b-b3khzewuj3] {
    height: 100%;
    border-radius: 0;
    transition: width 600ms var(--ease-out-expo);
    min-width: 0;
}

.balance-bar-fill.annual[b-b3khzewuj3] {
    background: var(--status-info);
}

.balance-bar-fill.sick[b-b3khzewuj3] {
    background: var(--status-warning);
}

.balance-bar-fill.emergency[b-b3khzewuj3] {
    background: var(--status-error);
}

.balance-detail[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-disabled);
    letter-spacing: 0.02em;
}

.balance-detail-sep[b-b3khzewuj3] {
    width: 3px;
    height: 3px;
    border-radius: 0;
    background: var(--text-disabled);
    flex-shrink: 0;
}

/* ---------- Leave Panel ---------- */
.leave-panel[b-b3khzewuj3] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}

.leave-panel-header[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 2px solid var(--border-subtle);
}

.leave-panel-header h2[b-b3khzewuj3] {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.leave-panel-count[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.leave-panel-body[b-b3khzewuj3] {
    padding: var(--space-4) var(--space-5);
}

/* ---------- Leave Table ---------- */
.leave-table-wrapper[b-b3khzewuj3] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.leave-table[b-b3khzewuj3] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.leave-table thead th[b-b3khzewuj3] {
    padding: 10px 14px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--border-default);
    white-space: nowrap;
}

.leave-table thead th.th-actions[b-b3khzewuj3] {
    text-align: right;
}

.leave-table tbody tr[b-b3khzewuj3] {
    border-bottom: none;
    transition: all 150ms ease;
    border-left: 3px solid transparent;
}

.leave-table tbody tr:nth-child(odd)[b-b3khzewuj3] {
    background: var(--bg-track);
}

.leave-table tbody tr:last-child[b-b3khzewuj3] {
    border-bottom: none;
}

.leave-table tbody tr:hover[b-b3khzewuj3] {
    border-left-color: var(--status-success);
    background: var(--bg-row-hover);
}

.leave-table tbody tr.row-cancelled[b-b3khzewuj3] {
    opacity: 0.45;
}

.leave-table tbody td[b-b3khzewuj3] {
    padding: 10px 14px;
    color: var(--text-secondary);
    vertical-align: middle;
}

.td-dates .date-range[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.days-count[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.td-notes[b-b3khzewuj3] {
    max-width: 200px;
}

.notes-preview[b-b3khzewuj3] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    cursor: help;
    font-style: italic;
}

.notes-empty[b-b3khzewuj3] {
    color: var(--text-disabled);
}

.td-actions[b-b3khzewuj3] {
    text-align: right;
    white-space: nowrap;
}

.no-actions[b-b3khzewuj3] {
    color: var(--text-disabled);
}

/* ---------- Leave Type Chips — Angular ---------- */
.leave-type-chip[b-b3khzewuj3] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.leave-type-chip.type-annual[b-b3khzewuj3] {
    background: var(--status-info-muted);
    color: var(--status-info);
    border: 1px solid var(--status-info-muted);
}

.leave-type-chip.type-sick[b-b3khzewuj3] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    border: 1px solid var(--status-warning-muted);
}

.leave-type-chip.type-emergency[b-b3khzewuj3] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.leave-type-chip.type-maternity[b-b3khzewuj3] {
    background: rgba(244, 114, 182, 0.1);
    color: var(--status-error);
    border: 1px solid rgba(244, 114, 182, 0.2);
}

.leave-type-chip.type-paternity[b-b3khzewuj3] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
    border: 1px solid var(--accent-secondary-muted);
}

.leave-type-chip.type-unpaid[b-b3khzewuj3] {
    background: var(--border-default);
    color: var(--text-secondary);
    border: 1px solid var(--border-emphasis);
}

.leave-type-chip.type-compassionate[b-b3khzewuj3] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.leave-type-chip.type-other[b-b3khzewuj3] {
    background: var(--border-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

/* ---------- Status Badges — Angular ---------- */
.status-badge[b-b3khzewuj3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge .status-dot[b-b3khzewuj3] {
    width: 5px;
    height: 5px;
    border-radius: 0;
    flex-shrink: 0;
}

.status-badge.status-draft[b-b3khzewuj3] {
    background: var(--border-default);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.status-badge.status-draft .status-dot[b-b3khzewuj3] {
    background: var(--text-secondary);
}

.status-badge.status-submitted[b-b3khzewuj3] {
    background: var(--status-info-muted);
    color: var(--status-info);
    border: 1px solid var(--status-info-muted);
}

.status-badge.status-submitted .status-dot[b-b3khzewuj3] {
    background: var(--status-info);
}

.status-badge.status-approved[b-b3khzewuj3] {
    background: var(--status-success-muted);
    color: var(--status-success);
    border: 1px solid var(--status-success-muted);
}

.status-badge.status-approved .status-dot[b-b3khzewuj3] {
    background: var(--status-success);
}

.status-badge.status-rejected[b-b3khzewuj3] {
    background: var(--status-error-muted);
    color: var(--status-error);
    border: 1px solid var(--status-error-muted);
}

.status-badge.status-rejected .status-dot[b-b3khzewuj3] {
    background: var(--status-error);
}

.status-badge.status-cancelled[b-b3khzewuj3] {
    background: var(--border-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    text-decoration: line-through;
}

.status-badge.status-cancelled .status-dot[b-b3khzewuj3] {
    background: var(--text-muted);
}

/* ---------- Reviewed By ---------- */
.reviewed-by[b-b3khzewuj3] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-disabled);
    margin-top: 3px;
    letter-spacing: 0.01em;
}

.review-notes-preview[b-b3khzewuj3] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Salary Impact ---------- */
.salary-impact[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
}

.salary-impact.impact-none[b-b3khzewuj3] {
    color: var(--text-disabled);
}

.salary-impact.impact-paid[b-b3khzewuj3] {
    color: var(--status-success);
}

.salary-impact.impact-unpaid[b-b3khzewuj3] {
    color: var(--status-error);
}

.quota-exceeded-tag[b-b3khzewuj3] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 2px;
    background: var(--status-error-muted);
    color: var(--status-error);
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: var(--font-mono);
    cursor: help;
    box-shadow: 1px 1px 0 var(--status-error-muted);
}

/* ---------- Action Buttons — Ghost Angular ---------- */
.action-btn[b-b3khzewuj3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border-default);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    color: var(--text-muted);
}

.action-btn.action-primary[b-b3khzewuj3] {
    border-color: var(--status-info-muted);
    color: var(--status-info);
}

.action-btn.action-primary:hover[b-b3khzewuj3] {
    background: var(--status-info-muted);
    border-color: var(--status-info);
    color: var(--status-info);
}

.action-btn.action-danger[b-b3khzewuj3] {
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

.action-btn.action-danger:hover[b-b3khzewuj3] {
    background: var(--status-error-muted);
    border-color: var(--status-error-muted);
    color: var(--status-error);
}

/* ---------- Pagination ---------- */
.leave-pagination[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-subtle);
}

.leave-pag-btn[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.leave-pag-btn:hover:not(:disabled)[b-b3khzewuj3] {
    border-color: var(--status-success);
    color: var(--status-success);
}

.leave-pag-btn:disabled[b-b3khzewuj3] {
    opacity: 0.3;
    cursor: not-allowed;
}

.leave-pag-info[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ---------- Empty State ---------- */
.leave-empty[b-b3khzewuj3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.leave-empty-icon[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-disabled);
    margin-bottom: var(--space-4);
}

.leave-empty-icon svg[b-b3khzewuj3] {
    width: 24px;
    height: 24px;
}

.leave-empty h3[b-b3khzewuj3] {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.02em;
}

.leave-empty p[b-b3khzewuj3] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

/* ---------- Error Bar — Angular ---------- */
.leave-error[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-muted);
    border-left: 3px solid var(--status-error);
    border-radius: 2px;
    color: var(--status-error);
    font-size: var(--text-sm);
}

.leave-error-retry[b-b3khzewuj3] {
    margin-left: auto;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--status-error-muted);
    border-radius: 2px;
    color: var(--status-error);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.leave-error-retry:hover[b-b3khzewuj3] {
    background: var(--status-error-muted);
    border-color: var(--status-error);
}

/* ==============================================
   LEAVE REQUEST DIALOG — Mobile-First Bottom Sheet
   ============================================== */

/* --- Dialog element (top-layer) --- */
[b-b3khzewuj3] .leave-dialog {
    border: none;
    padding: 0;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    overflow: visible;
    /* Mobile: anchor to bottom */
    margin: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
}

[b-b3khzewuj3] .leave-dialog[open] {
    display: flex;
    flex-direction: column;
}

[b-b3khzewuj3] .leave-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: dlg-backdrop-in-b-b3khzewuj3 0.2s ease forwards;
}

/* --- Panel container --- */
.dlg[b-b3khzewuj3] {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    max-height: 94vh;
    max-height: 94dvh;
    overflow: hidden;
    animation: dlg-sheet-up-b-b3khzewuj3 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.35);
}

/* --- Drag handle (mobile) --- */
.dlg-handle-bar[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 4px;
}

.dlg-handle[b-b3khzewuj3] {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-default);
    opacity: 0.6;
}

/* --- Header --- */
.dlg-head[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 16px;
    flex-shrink: 0;
}

.dlg-head h2[b-b3khzewuj3] {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
}

.dlg-close[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.dlg-close svg[b-b3khzewuj3] { width: 16px; height: 16px; }

.dlg-close:hover[b-b3khzewuj3] {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

/* --- Scrollable body --- */
.dlg-body[b-b3khzewuj3] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Field section --- */
.dlg-field[b-b3khzewuj3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dlg-field-label[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dlg-optional[b-b3khzewuj3] {
    font-weight: 500;
    color: var(--text-disabled);
    text-transform: none;
    letter-spacing: normal;
}

/* --- Leave Type — Horizontal chip strip --- */
.type-strip[b-b3khzewuj3] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* Full-width bleed */
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.type-strip[b-b3khzewuj3]::-webkit-scrollbar { display: none; }

.type-chip[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-subtle);
    border-radius: 2px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: 42px;
}

/* Type accent colors on left border */
.type-chip.type-annual[b-b3khzewuj3]    { border-left-color: var(--status-info); }
.type-chip.type-sick[b-b3khzewuj3]      { border-left-color: var(--status-warning); }
.type-chip.type-emergency[b-b3khzewuj3] { border-left-color: var(--status-error); }
.type-chip.type-maternity[b-b3khzewuj3] { border-left-color: var(--status-error); }
.type-chip.type-paternity[b-b3khzewuj3] { border-left-color: var(--accent-secondary); }
.type-chip.type-unpaid[b-b3khzewuj3]    { border-left-color: var(--text-secondary); }
.type-chip.type-compassionate[b-b3khzewuj3] { border-left-color: var(--status-success); }
.type-chip.type-other[b-b3khzewuj3]     { border-left-color: var(--text-muted); }

.type-chip-dot[b-b3khzewuj3] {
    width: 5px;
    height: 5px;
    border-radius: 0;
    background: currentColor;
    opacity: 0.3;
    flex-shrink: 0;
    transition: opacity 150ms ease;
}

.type-chip.selected .type-chip-dot[b-b3khzewuj3] { opacity: 1; }

.type-chip-badge[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--border-subtle);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Selected states per type */
.type-chip.selected[b-b3khzewuj3] {
    color: var(--text-primary);
    background: var(--border-subtle);
    border-color: var(--border-default);
    font-weight: 600;
}

.type-chip.type-annual.selected[b-b3khzewuj3] {
    background: var(--status-info-muted);
    border-color: var(--status-info-muted);
    border-left-color: var(--status-info);
    color: var(--status-info);
}
.type-chip.type-annual.selected .type-chip-badge[b-b3khzewuj3] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.type-chip.type-sick.selected[b-b3khzewuj3] {
    background: var(--status-warning-muted);
    border-color: var(--status-warning-muted);
    border-left-color: var(--status-warning);
    color: var(--status-warning);
}
.type-chip.type-sick.selected .type-chip-badge[b-b3khzewuj3] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.type-chip.type-emergency.selected[b-b3khzewuj3] {
    background: var(--status-error-muted);
    border-color: var(--status-error-muted);
    border-left-color: var(--status-error);
    color: var(--status-error);
}
.type-chip.type-emergency.selected .type-chip-badge[b-b3khzewuj3] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.type-chip.type-maternity.selected[b-b3khzewuj3] {
    background: rgba(244, 114, 182, 0.08);
    border-color: rgba(244, 114, 182, 0.3);
    border-left-color: var(--status-error);
    color: var(--status-error);
}

.type-chip.type-paternity.selected[b-b3khzewuj3] {
    background: var(--accent-secondary-muted);
    border-color: var(--accent-secondary-muted);
    border-left-color: var(--accent-secondary);
    color: var(--accent-secondary);
}

.type-chip.type-unpaid.selected[b-b3khzewuj3] {
    background: var(--border-subtle);
    border-color: var(--border-emphasis);
    border-left-color: var(--text-secondary);
    color: var(--text-primary);
}

.type-chip.type-compassionate.selected[b-b3khzewuj3] {
    background: var(--status-success-muted);
    border-color: var(--status-success-muted);
    border-left-color: var(--status-success);
    color: var(--status-success);
}

.type-chip.type-other.selected[b-b3khzewuj3] {
    background: var(--border-subtle);
    border-color: var(--border-emphasis);
    border-left-color: var(--text-muted);
    color: var(--text-secondary);
}

/* --- Date Range Row --- */
.dlg-dates[b-b3khzewuj3] {
    display: flex;
    align-items: stretch;
}

.dlg-date[b-b3khzewuj3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dlg-date-sub[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[b-b3khzewuj3] .dlg-mud-date {
    width: 100%;
}

[b-b3khzewuj3] .dlg-mud-date .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-subtle);
}

[b-b3khzewuj3] .dlg-mud-date .mud-input {
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
}

[b-b3khzewuj3] .dlg-mud-date .mud-input-adorned-end .mud-icon-button {
    color: var(--text-muted);
}

.dlg-date-arrow[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    color: var(--text-disabled);
    padding-top: 18px;
}

/* --- Summary Metrics Strip --- */
.dlg-metrics[b-b3khzewuj3] {
    display: flex;
    align-items: stretch;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.dlg-metric[b-b3khzewuj3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 10px;
    text-align: center;
}

.dlg-metric-num[b-b3khzewuj3] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dlg-metric-num.metric-ok[b-b3khzewuj3]     { color: var(--status-success); }
.dlg-metric-num.metric-warn[b-b3khzewuj3]   { color: var(--status-warning); }
.dlg-metric-num.metric-danger[b-b3khzewuj3] { color: var(--status-error); }

.dlg-metric-label[b-b3khzewuj3] {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dlg-metric-sep[b-b3khzewuj3] {
    width: 1px;
    background: var(--border-subtle);
    flex-shrink: 0;
}

/* --- Quota Alert --- */
.dlg-alert[b-b3khzewuj3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--status-warning-muted);
    border: 1px solid var(--status-warning-muted);
    border-left: 3px solid var(--status-warning);
    border-radius: 2px;
    color: var(--status-warning);
    animation: dlg-alert-in-b-b3khzewuj3 0.2s ease forwards;
}

.dlg-alert svg[b-b3khzewuj3] {
    flex-shrink: 0;
    margin-top: 1px;
}

.dlg-alert-text[b-b3khzewuj3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlg-alert-text strong[b-b3khzewuj3] {
    font-size: 0.8125rem;
    font-weight: 700;
}

.dlg-alert-text span[b-b3khzewuj3] {
    font-size: 0.6875rem;
    color: var(--status-warning);
}

/* --- Notes --- */
.dlg-notes[b-b3khzewuj3] {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    resize: vertical;
    min-height: 56px;
    outline: none;
    transition: border-color 150ms ease;
    box-sizing: border-box;
}

.dlg-notes:focus[b-b3khzewuj3] { border-color: var(--status-success); }
.dlg-notes[b-b3khzewuj3]::placeholder { color: var(--text-disabled); }

/* --- Dialog Error --- */
.dlg-error[b-b3khzewuj3] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 20px 12px;
    padding: 10px 14px;
    background: var(--status-error-muted);
    border: 1px solid var(--status-error-muted);
    border-radius: 4px;
    color: var(--status-error);
    font-size: 0.8125rem;
    line-height: 1.45;
    animation: dlg-alert-in-b-b3khzewuj3 0.25s ease forwards;
}

.dlg-error svg[b-b3khzewuj3] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--status-error);
}

/* --- Sticky Footer --- */
.dlg-foot[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated);
}

.dlg-btn-ghost[b-b3khzewuj3] {
    padding: 10px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    min-height: 44px;
}

.dlg-btn-ghost:hover[b-b3khzewuj3] {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.dlg-btn-primary[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 2px;
    background: var(--status-success);
    color: var(--bg-base);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    min-height: 44px;
    white-space: nowrap;
}

.dlg-btn-primary svg[b-b3khzewuj3] { flex-shrink: 0; }
.dlg-btn-primary:hover[b-b3khzewuj3] { filter: brightness(0.85); }
.dlg-btn-primary:disabled[b-b3khzewuj3],
.dlg-btn-ghost:disabled[b-b3khzewuj3] { opacity: 0.5; cursor: not-allowed; }

/* --- Spinner --- */
.dlg-spin[b-b3khzewuj3] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--bg-base);
    border-radius: 50%;
    animation: dlg-spin-anim-b-b3khzewuj3 0.6s linear infinite;
}

/* --- Dialog Animations --- */
@keyframes dlg-sheet-up-b-b3khzewuj3 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes dlg-backdrop-in-b-b3khzewuj3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dlg-alert-in-b-b3khzewuj3 {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dlg-spin-anim-b-b3khzewuj3 {
    to { transform: rotate(360deg); }
}

@keyframes dlg-modal-in-b-b3khzewuj3 {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Dialog: Tablet+ (640px) — Centered Modal --- */
@media (min-width: 640px) {
    [b-b3khzewuj3] .leave-dialog {
        margin: auto;
        max-width: 520px;
        width: calc(100% - 2rem);
    }

    .dlg[b-b3khzewuj3] {
        border-radius: 8px;
        border-bottom: 1px solid var(--border-subtle);
        animation: dlg-modal-in-b-b3khzewuj3 0.28s var(--ease-out-expo) forwards;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    .dlg-handle-bar[b-b3khzewuj3] { display: none; }

    .dlg-head[b-b3khzewuj3] {
        padding: 18px 24px 16px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .dlg-body[b-b3khzewuj3] {
        padding: 20px 24px;
        max-height: 60vh;
    }

    .type-strip[b-b3khzewuj3] {
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .dlg-foot[b-b3khzewuj3] {
        padding: 16px 24px;
        padding-bottom: 16px;
    }

    .dlg-close[b-b3khzewuj3] {
        width: 32px;
        height: 32px;
    }
}

/* --- Dialog: Desktop (1024px+) --- */
@media (min-width: 1024px) {
    [b-b3khzewuj3] .leave-dialog { max-width: 500px; }

    .type-chip[b-b3khzewuj3] {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 0.75rem;
    }

    [b-b3khzewuj3] .dlg-mud-date .mud-input {
        font-size: 0.75rem;
    }

    .dlg-btn-ghost[b-b3khzewuj3],
    .dlg-btn-primary[b-b3khzewuj3] {
        min-height: 40px;
    }
}

/* ---------- Skeleton Loading ---------- */
.skeleton-pulse[b-b3khzewuj3] {
    background: var(--bg-surface);
    border-radius: 2px;
    animation: leave-skeleton-shimmer-b-b3khzewuj3 1.5s ease-in-out infinite;
}

.skeleton-row[b-b3khzewuj3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.skeleton-row:last-child[b-b3khzewuj3] {
    border-bottom: none;
}

@keyframes leave-skeleton-shimmer-b-b3khzewuj3 {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ---------- Spin Animation ---------- */
.spin[b-b3khzewuj3] {
    animation: leave-spin-b-b3khzewuj3 1s linear infinite;
}

@keyframes leave-spin-b-b3khzewuj3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Animate In ---------- */
.animate-in[b-b3khzewuj3] {
    animation: leave-fade-in-b-b3khzewuj3 0.35s var(--ease-out-expo) both;
}

@keyframes leave-fade-in-b-b3khzewuj3 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-children > :nth-child(1)[b-b3khzewuj3] { animation-delay: 0ms; }
.stagger-children > :nth-child(2)[b-b3khzewuj3] { animation-delay: 50ms; }
.stagger-children > :nth-child(3)[b-b3khzewuj3] { animation-delay: 100ms; }
.stagger-children > :nth-child(4)[b-b3khzewuj3] { animation-delay: 150ms; }

/* ============================================
   RESPONSIVE: Tablet (768px)
   ============================================ */
@media (max-width: 768px) {
    .leave-page[b-b3khzewuj3] {
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + var(--bottom-nav-height));
    }

    .page-header[b-b3khzewuj3] {
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-5);
    }

    .page-header-actions[b-b3khzewuj3] {
        width: 100%;
        justify-content: flex-end;
    }

    .balance-cards[b-b3khzewuj3] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .balance-cards > :last-child[b-b3khzewuj3] {
        grid-column: 1 / -1;
    }

    .balance-value[b-b3khzewuj3] {
        font-size: 1.625rem;
    }

    .leave-table thead th[b-b3khzewuj3],
    .leave-table tbody td[b-b3khzewuj3] {
        padding: 8px 10px;
    }

    .leave-table thead th[b-b3khzewuj3] {
        font-size: 0.5625rem;
    }

    .leave-table tbody td[b-b3khzewuj3] {
        font-size: 0.75rem;
    }

    .td-notes[b-b3khzewuj3] {
        display: none;
    }

    .leave-panel-header[b-b3khzewuj3] {
        padding: var(--space-3) var(--space-4);
    }
}

/* ============================================
   RESPONSIVE: Mobile (480px)
   ============================================ */
@media (max-width: 480px) {
    .leave-page[b-b3khzewuj3] {
        padding: var(--space-3);
        padding-bottom: calc(var(--space-3) + 80px);
    }

    .page-header-info[b-b3khzewuj3] {
        gap: var(--space-3);
    }

    .page-header-icon[b-b3khzewuj3] {
        width: 36px;
        height: 36px;
    }

    .page-header-icon svg[b-b3khzewuj3] {
        width: 18px;
        height: 18px;
    }

    .page-header h1[b-b3khzewuj3] {
        font-size: var(--text-lg);
    }

    .page-header-sub[b-b3khzewuj3] {
        font-size: 0.6875rem;
    }

    .page-header-actions[b-b3khzewuj3] {
        flex-wrap: wrap;
    }

    .balance-cards[b-b3khzewuj3] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .balance-cards > :last-child[b-b3khzewuj3] {
        grid-column: auto;
    }

    .balance-card-content[b-b3khzewuj3] {
        padding: var(--space-4);
        padding-top: calc(var(--space-4) + 2px);
    }

    .balance-value[b-b3khzewuj3] {
        font-size: 1.5rem;
    }

    .balance-total[b-b3khzewuj3] {
        font-size: 0.625rem;
    }

    /* Mobile: Switch table to card layout */
    .leave-table thead[b-b3khzewuj3] {
        display: none;
    }

    .leave-table[b-b3khzewuj3],
    .leave-table tbody[b-b3khzewuj3],
    .leave-table tbody tr[b-b3khzewuj3],
    .leave-table tbody td[b-b3khzewuj3] {
        display: block;
    }

    .leave-table tbody tr[b-b3khzewuj3] {
        padding: var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        border-left: 3px solid transparent;
        position: relative;
    }

    .leave-table tbody tr:nth-child(odd)[b-b3khzewuj3] {
        background: var(--bg-track);
    }

    .leave-table tbody td[b-b3khzewuj3] {
        padding: 2px 0;
        text-align: left;
    }

    .leave-table tbody td.td-actions[b-b3khzewuj3] {
        text-align: left;
        margin-top: var(--space-2);
        display: flex;
        gap: var(--space-2);
    }

    .td-notes[b-b3khzewuj3] {
        display: none;
    }

    .td-dates .date-range[b-b3khzewuj3] {
        font-size: 0.625rem;
    }

}

/* ---------- Touch Device Optimizations ---------- */
@media (hover: none) and (pointer: coarse) {
    .action-btn[b-b3khzewuj3] {
        min-height: 40px;
        padding: 8px 14px;
    }

    .leave-table tbody tr[b-b3khzewuj3] {
        min-height: 48px;
    }

    .dialog-close[b-b3khzewuj3] {
        min-width: 40px;
        min-height: 40px;
    }

    .form-select[b-b3khzewuj3],
    .form-input[b-b3khzewuj3],
    .form-textarea[b-b3khzewuj3] {
        min-height: 44px;
        font-size: 16px;
    }

    /* Disable hover effects on touch */
    .balance-card:hover[b-b3khzewuj3] {
        border-color: var(--border-subtle);
    }

    .leave-table tbody tr:hover[b-b3khzewuj3] {
        border-left-color: transparent;
        background: transparent;
    }

    .leave-table tbody tr:nth-child(odd):hover[b-b3khzewuj3] {
        background: var(--bg-track);
    }

    .action-btn.action-primary:hover[b-b3khzewuj3] {
        background: transparent;
        border-color: var(--status-info-muted);
    }

    .action-btn.action-danger:hover[b-b3khzewuj3] {
        background: transparent;
        color: var(--text-muted);
        border-color: var(--border-subtle);
    }
}
/* /Pages/MyWorkItems.razor.rz.scp.css */
/* ── Filter Tabs ── */
.work-tabs[b-ystoj1wpo2] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--space-4);
    padding: 4px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    width: fit-content;
}

.work-tab[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.work-tab:hover[b-ystoj1wpo2] {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.work-tab.active[b-ystoj1wpo2] {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.work-tab-count[b-ystoj1wpo2] {
    padding: 2px 8px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.work-tab-count.active[b-ystoj1wpo2] {
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
}

.work-tab-count.error[b-ystoj1wpo2] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

/* ── Work Items List ── */
.work-items-list[b-ystoj1wpo2] {
    display: flex;
    flex-direction: column;
}

.work-item[b-ystoj1wpo2] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.15s ease;
}

.work-item:last-child[b-ystoj1wpo2] {
    border-bottom: none;
}

.work-item:hover[b-ystoj1wpo2] {
    background: var(--bg-surface-hover);
}

.work-item-priority[b-ystoj1wpo2] {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.work-item-priority.high[b-ystoj1wpo2] {
    background: var(--status-error);
    color: var(--status-error);
}

.work-item-priority.medium[b-ystoj1wpo2] {
    background: var(--status-warning);
    color: var(--status-warning);
}

.work-item-priority.low[b-ystoj1wpo2] {
    background: var(--bg-muted);
}

.work-item-content[b-ystoj1wpo2] {
    flex: 1;
    min-width: 0;
}

.work-item-header[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.work-item-badges[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.work-item-id[b-ystoj1wpo2] {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.work-item-meta[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.work-item-time[b-ystoj1wpo2] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.work-item-title[b-ystoj1wpo2] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.4;
}

.work-item-footer[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.work-item-project[b-ystoj1wpo2],
.work-item-iteration[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.work-item-project:hover[b-ystoj1wpo2] {
    color: var(--accent-primary);
}

.work-item-side[b-ystoj1wpo2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    min-width: 100px;
}

.work-item-target[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.work-item-target.normal[b-ystoj1wpo2] {
    color: var(--text-secondary);
    background: var(--bg-muted);
}

.work-item-target.warning[b-ystoj1wpo2] {
    color: var(--status-warning);
    background: var(--status-warning-muted);
}

.work-item-target.overdue[b-ystoj1wpo2] {
    color: var(--status-error);
    background: var(--status-error-muted);
}

.work-item-points[b-ystoj1wpo2] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.work-item-points small[b-ystoj1wpo2] {
    font-size: 0.625rem;
    font-weight: 500;
    opacity: 0.7;
}

/* ── KPI Subtitle ── */
.kpi-subtitle[b-ystoj1wpo2] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Signal Badges ── */
.signal-badge[b-ystoj1wpo2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.signal-badge.reopened[b-ystoj1wpo2] {
    background: var(--status-warning-muted, rgba(245, 158, 11, 0.12));
    color: var(--status-warning, #f59e0b);
}

.signal-badge.handoff[b-ystoj1wpo2] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

/* ── Activity Badges ── */
.activity-badge[b-ystoj1wpo2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-muted);
}

.activity-badge.comments[b-ystoj1wpo2] {
    color: var(--accent-primary);
    background: var(--accent-primary-muted, rgba(59, 130, 246, 0.08));
}

[b-ystoj1wpo2] .activity-badge .mud-icon-root {
    font-size: 0.8rem !important;
}

/* ── Journey Mini Dots ── */
.journey-mini[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    cursor: default;
}

.journey-dot-mini[b-ystoj1wpo2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.journey-dot-mini + .journey-dot-mini[b-ystoj1wpo2] {
    margin-left: 4px;
}

.journey-dot-mini + .journey-dot-mini[b-ystoj1wpo2]::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.5px;
    background: var(--border-primary, #d1d5db);
}

.journey-dot-mini.current[b-ystoj1wpo2] {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 2px var(--bg-surface, #fff);
}

.journey-dot-mini.journey-step-new[b-ystoj1wpo2] {
    background: var(--text-muted, #9ca3af);
}

.journey-dot-mini.journey-step-active[b-ystoj1wpo2] {
    background: var(--accent-primary, #3b82f6);
}

.journey-dot-mini.journey-step-active + .journey-dot-mini[b-ystoj1wpo2]::before,
.journey-dot-mini.journey-step-active[b-ystoj1wpo2]::before {
    background: var(--accent-primary, #3b82f6) !important;
}

.journey-dot-mini.journey-step-resolved[b-ystoj1wpo2] {
    background: var(--status-warning, #f59e0b);
}

.journey-dot-mini.journey-step-resolved + .journey-dot-mini[b-ystoj1wpo2]::before,
.journey-dot-mini.journey-step-resolved[b-ystoj1wpo2]::before {
    background: var(--status-warning, #f59e0b) !important;
}

.journey-dot-mini.journey-step-closed[b-ystoj1wpo2] {
    background: var(--status-success, #10b981);
}

.journey-dot-mini.journey-step-closed[b-ystoj1wpo2]::before {
    background: var(--status-success, #10b981) !important;
}

/* ── Sprint Progress ── */
.sprint-progress-section[b-ystoj1wpo2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
}

.sprint-progress[b-ystoj1wpo2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sprint-labels[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.sprint-name[b-ystoj1wpo2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sprint-dates[b-ystoj1wpo2] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sprint-pct[b-ystoj1wpo2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.sprint-track[b-ystoj1wpo2] {
    height: 4px;
    background: var(--bg-muted);
    border-radius: 2px;
    overflow: hidden;
}

.sprint-fill[b-ystoj1wpo2] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ── Section Headers ── */
.section-panel[b-ystoj1wpo2] {
    margin-bottom: var(--space-4);
}

.section-header[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-header-left[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-count[b-ystoj1wpo2] {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-muted);
    color: var(--text-secondary);
}

.section-header.action-required[b-ystoj1wpo2] {
    border-left: 3px solid var(--status-error, #ef4444);
    color: var(--status-error);
}

.section-header.action-required .section-count[b-ystoj1wpo2] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.section-header.handoffs[b-ystoj1wpo2] {
    border-left: 3px solid #8b5cf6;
    color: #8b5cf6;
}

.section-header.handoffs .section-count[b-ystoj1wpo2] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.section-header.backlog[b-ystoj1wpo2] {
    border-left: 3px solid var(--text-muted);
    color: var(--text-secondary);
}

.section-header.clickable[b-ystoj1wpo2] {
    cursor: pointer;
    background: transparent;
    border: none;
    border-left: 3px solid var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    width: 100%;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    transition: background 0.15s ease;
}

.section-header.clickable:hover[b-ystoj1wpo2] {
    background: var(--bg-surface-hover);
}

/* ── Completed Toggle ── */
.completed-toggle[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.completed-toggle:hover[b-ystoj1wpo2] {
    background: var(--bg-surface-hover);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .work-tabs[b-ystoj1wpo2] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .work-tabs[b-ystoj1wpo2]::-webkit-scrollbar { display: none; }

    .work-item[b-ystoj1wpo2] {
        flex-wrap: wrap;
        padding: var(--space-3) var(--space-4);
    }

    .work-item-side[b-ystoj1wpo2] {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: var(--space-2);
    }

    .work-item-header[b-ystoj1wpo2] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .work-item-footer[b-ystoj1wpo2] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .sprint-labels[b-ystoj1wpo2] {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
}

@media (max-width: 640px) {
    .work-tab[b-ystoj1wpo2] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .work-item[b-ystoj1wpo2] {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .work-item-title[b-ystoj1wpo2] {
        font-size: 0.875rem;
    }

    .work-item-side[b-ystoj1wpo2] {
        min-width: 0;
    }

    .work-item-meta[b-ystoj1wpo2] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .section-header[b-ystoj1wpo2] {
        padding: var(--space-3) var(--space-4);
        font-size: 0.8125rem;
    }
}

/* ── Completeness in Cards ── */
[b-ystoj1wpo2] .mywork-completeness {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-left: auto;
}

[b-ystoj1wpo2] .wi-issue-pill {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ystoj1wpo2] .wi-issue-pill.error {
    color: var(--status-error);
    background: color-mix(in srgb, var(--status-error) 12%, transparent);
}

[b-ystoj1wpo2] .wi-issue-pill.warning {
    color: var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 12%, transparent);
}

[b-ystoj1wpo2] .wi-issue-pill.info {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

/* ── Awaiting Sign-off section ── */
.work-item.resolved-pending[b-ystoj1wpo2] {
    opacity: 0.85;
    background: color-mix(in srgb, var(--status-warning) 4%, var(--bg-card));
}

.signoff-action-link[b-ystoj1wpo2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.signoff-action-link:hover[b-ystoj1wpo2] {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border-color: var(--accent-primary);
    text-decoration: none;
}

/* ── Search Bar ── */
.work-search-bar[b-ystoj1wpo2] {
    margin-bottom: var(--space-4);
}

.work-search-inner[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.work-search-inner:focus-within[b-ystoj1wpo2] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.search-icon[b-ystoj1wpo2] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.work-search-input[b-ystoj1wpo2] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.work-search-input[b-ystoj1wpo2]::placeholder {
    color: var(--text-muted);
}

.search-hint[b-ystoj1wpo2] {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.search-result-count[b-ystoj1wpo2] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
}

.search-clear[b-ystoj1wpo2] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.search-clear:hover[b-ystoj1wpo2] {
    color: var(--text-primary);
    background: var(--border-subtle);
}

/* ── Sticky Section Headers ── */
.sticky-section-header[b-ystoj1wpo2] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
    backdrop-filter: blur(8px);
}

/* ── Project Groups ── */
.project-group[b-ystoj1wpo2] {
    border-bottom: 1px solid var(--border-subtle);
}

.project-group:last-child[b-ystoj1wpo2] {
    border-bottom: none;
}

.project-group-header[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-elevated));
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
}

.project-group-header:hover[b-ystoj1wpo2] {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-elevated));
}

.project-group-header-left[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.project-group-name[b-ystoj1wpo2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-group-count[b-ystoj1wpo2] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    padding: 1px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

.project-group-items[b-ystoj1wpo2] {
    padding-left: 8px;
    border-left: 2px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
    margin-left: 8px;
}

.section-group-hint[b-ystoj1wpo2] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* ── Floating Section Navigator ── */
.section-nav[b-ystoj1wpo2] {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    pointer-events: none;
}

.section-nav > *[b-ystoj1wpo2] {
    pointer-events: auto;
}

.section-nav-toggle[b-ystoj1wpo2] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-primary) 40%, transparent);
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    flex-shrink: 0;
}

.section-nav-toggle:hover[b-ystoj1wpo2] {
    transform: scale(1.08);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary) 50%, transparent);
}

.nav-toggle-badge[b-ystoj1wpo2] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--status-error);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
}

.section-nav-body[b-ystoj1wpo2] {
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    min-width: 210px;
    max-width: 220px;
    overflow: hidden;
    animation: nav-slide-in 0.18s ease-out;
}

@@keyframes nav-slide-in {
    from[b-ystoj1wpo2] { opacity: 0; transform: translateX(12px); }
    to[b-ystoj1wpo2]   { opacity: 1; transform: translateX(0); }
}

.section-nav-title[b-ystoj1wpo2] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--border-subtle);
}

.nav-section-item[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    border-left: 2px solid transparent;
}

.nav-section-item:hover[b-ystoj1wpo2] {
    background: var(--bg-elevated);
}

.nav-section-item.urgent[b-ystoj1wpo2] {
    border-left-color: var(--status-error);
}

.nav-section-item.urgent:hover[b-ystoj1wpo2] {
    background: color-mix(in srgb, var(--status-error) 8%, var(--bg-elevated));
}

.nav-section-item.warning[b-ystoj1wpo2] {
    border-left-color: var(--status-warning);
}

.nav-item-icon[b-ystoj1wpo2] {
    font-size: 0.8rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.nav-item-label[b-ystoj1wpo2] {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item-count[b-ystoj1wpo2] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    flex-shrink: 0;
}

.nav-item-count.urgent[b-ystoj1wpo2] {
    background: color-mix(in srgb, var(--status-error) 15%, transparent);
    color: var(--status-error);
}

.nav-item-count.warning[b-ystoj1wpo2] {
    background: color-mix(in srgb, var(--status-warning) 15%, transparent);
    color: var(--status-warning);
}

.nav-item-count.dim[b-ystoj1wpo2] {
    opacity: 0.6;
}

.nav-project-item[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 12px 4px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.nav-project-item:hover[b-ystoj1wpo2] {
    background: var(--bg-elevated);
}

.nav-project-dot[b-ystoj1wpo2] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border-primary);
    flex-shrink: 0;
}

.nav-project-name[b-ystoj1wpo2] {
    flex: 1;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-divider[b-ystoj1wpo2] {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

.nav-top-btn[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}

.nav-top-btn:hover[b-ystoj1wpo2] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .section-nav[b-ystoj1wpo2] {
        display: none;
    }
}

/* ── View Toggle ── */
.view-toggle-group[b-ystoj1wpo2] {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.view-toggle-btn[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-toggle-btn:hover[b-ystoj1wpo2] {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.view-toggle-btn.active[b-ystoj1wpo2] {
    background: var(--bg-surface);
    color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

/* ── Tree View ── */
.tree-parent-stub[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-strong);
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.tree-parent-stub:first-child[b-ystoj1wpo2] { border-top: none; }

.tree-parent-stub.epic[b-ystoj1wpo2]        { border-left-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 6%, var(--bg-elevated)); }
.tree-parent-stub.feature[b-ystoj1wpo2]     { border-left-color: #3b82f6; background: color-mix(in srgb, #3b82f6 6%, var(--bg-elevated)); }
.tree-parent-stub.user-story[b-ystoj1wpo2]  { border-left-color: #10b981; background: color-mix(in srgb, #10b981 6%, var(--bg-elevated)); }
.tree-parent-stub.parent-done[b-ystoj1wpo2] { opacity: 0.75; }

.tree-parent-info[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tree-type-icon[b-ystoj1wpo2] {
    opacity: 0.7;
    flex-shrink: 0;
}

.tree-parent-id[b-ystoj1wpo2] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.tree-parent-title[b-ystoj1wpo2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-parent-state-chip[b-ystoj1wpo2] {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    flex-shrink: 0;
    background: var(--bg-muted);
    color: var(--text-muted);
}

.tree-parent-state-chip.info[b-ystoj1wpo2]    { background: var(--accent-primary-muted); color: var(--accent-primary); }
.tree-parent-state-chip.success[b-ystoj1wpo2] { background: var(--status-success-muted); color: var(--status-success); }
.tree-parent-state-chip.warning[b-ystoj1wpo2] { background: var(--status-warning-muted); color: var(--status-warning); }

.tree-parent-stats[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tree-stat[b-ystoj1wpo2] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.tree-stat.open[b-ystoj1wpo2] { background: var(--accent-primary-muted); color: var(--accent-primary); }
.tree-stat.done[b-ystoj1wpo2] { background: var(--bg-muted);             color: var(--text-muted); }

.tree-collapse-btn[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.tree-collapse-btn:hover[b-ystoj1wpo2] {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.tree-children[b-ystoj1wpo2] {
    border-left: 2px solid var(--border-subtle);
    margin-left: 28px;
    position: relative;
}

.tree-children.standalone[b-ystoj1wpo2] {
    border-left: none;
    margin-left: 0;
}

.tree-child-row[b-ystoj1wpo2] {
    position: relative;
}

.tree-child-row[b-ystoj1wpo2]::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--border-subtle);
    pointer-events: none;
}

.tree-children.standalone .tree-child-row[b-ystoj1wpo2]::before { display: none; }

.tree-child-row.done[b-ystoj1wpo2] {
    opacity: 0.5;
}

.tree-child-row.done .work-item-title[b-ystoj1wpo2] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.tree-orphan-header[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-muted);
    border-top: 1px solid var(--border-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Tree done toggle ── */
.tree-done-toggle[b-ystoj1wpo2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 20px;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--border-subtle);
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.tree-done-toggle:hover[b-ystoj1wpo2] {
    color: var(--text-secondary);
    background: var(--bg-muted);
}
/* /Pages/OkrDashboard.razor.rz.scp.css */
.page-container[b-5dv4a79qx2] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-5dv4a79qx2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.page-title[b-5dv4a79qx2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-5dv4a79qx2] {
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
}

.btn-secondary[b-5dv4a79qx2] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    text-decoration: none;
    cursor: pointer;
}

.summary-cards[b-5dv4a79qx2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.summary-card[b-5dv4a79qx2] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.card-active[b-5dv4a79qx2] { border-left: 3px solid var(--accent-primary); }
.card-completed[b-5dv4a79qx2] { border-left: 3px solid var(--status-success); }
.card-atrisk[b-5dv4a79qx2] { border-left: 3px solid var(--status-warning); }

.card-value[b-5dv4a79qx2] {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.card-label[b-5dv4a79qx2] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-title[b-5dv4a79qx2] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
}

.overall-progress-section[b-5dv4a79qx2] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.overall-bar-wrapper[b-5dv4a79qx2] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.overall-bar[b-5dv4a79qx2] {
    flex: 1;
    height: 12px;
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
}

.overall-fill[b-5dv4a79qx2] {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: 6px;
    transition: width 0.5s var(--ease-out-expo);
}

.overall-value[b-5dv4a79qx2] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 60px;
    text-align: right;
}

.objectives-grid[b-5dv4a79qx2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.obj-card[b-5dv4a79qx2] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.obj-card:hover[b-5dv4a79qx2] {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow-primary);
}

.obj-header[b-5dv4a79qx2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.status-dot[b-5dv4a79qx2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.status-dot.status-draft[b-5dv4a79qx2] { background: var(--text-muted); }
.status-dot.status-active[b-5dv4a79qx2] { background: var(--status-success); }
.status-dot.status-atrisk[b-5dv4a79qx2] { background: var(--status-warning); }
.status-dot.status-behind[b-5dv4a79qx2] { background: var(--status-error); }
.status-dot.status-completed[b-5dv4a79qx2] { background: var(--status-success); }

.obj-title[b-5dv4a79qx2] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.obj-meta[b-5dv4a79qx2] {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.obj-progress[b-5dv4a79qx2] {
    margin-bottom: var(--space-2);
}

.progress-bar[b-5dv4a79qx2] {
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.progress-fill[b-5dv4a79qx2] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: var(--accent-primary);
}

.progress-fill.progress-high[b-5dv4a79qx2] { background: var(--status-success); }
.progress-fill.progress-mid[b-5dv4a79qx2] { background: var(--status-warning); }
.progress-fill.progress-low[b-5dv4a79qx2] { background: var(--status-error); }

.obj-progress-info[b-5dv4a79qx2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-pct[b-5dv4a79qx2] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.kr-info[b-5dv4a79qx2] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.obj-children-count[b-5dv4a79qx2] {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    margin-top: var(--space-1);
}

.loading-state[b-5dv4a79qx2], .empty-state[b-5dv4a79qx2] {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .summary-cards[b-5dv4a79qx2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .objectives-grid[b-5dv4a79qx2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-container[b-5dv4a79qx2] { padding: var(--space-4); }
    .summary-cards[b-5dv4a79qx2] { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
}
/* /Pages/OkrManagement.razor.rz.scp.css */
.page-container[b-kytooir4gx] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-kytooir4gx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.page-title[b-kytooir4gx] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-kytooir4gx] {
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
}

.header-actions[b-kytooir4gx] {
    display: flex;
    gap: var(--space-2);
}

.btn[b-kytooir4gx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary[b-kytooir4gx] { background: var(--accent-primary); color: var(--text-on-primary); }
.btn-secondary[b-kytooir4gx] { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-sm[b-kytooir4gx] { padding: var(--space-1) var(--space-3); font-size: 0.8125rem; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; }

.filters[b-kytooir4gx] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.filter-select[b-kytooir4gx] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.objective-list[b-kytooir4gx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.objective-card[b-kytooir4gx] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.objective-header[b-kytooir4gx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    cursor: pointer;
    transition: background 0.15s;
}

.objective-header:hover[b-kytooir4gx] {
    background: var(--bg-elevated);
}

.expand-icon[b-kytooir4gx] {
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.expand-icon.expanded[b-kytooir4gx] {
    transform: rotate(90deg);
}

.objective-info[b-kytooir4gx] {
    flex: 1;
    min-width: 0;
}

.objective-title-row[b-kytooir4gx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.objective-title[b-kytooir4gx] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.objective-meta[b-kytooir4gx] {
    display: flex;
    gap: var(--space-3);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.status-badge[b-kytooir4gx] {
    padding: 2px var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-draft[b-kytooir4gx] { background: var(--bg-elevated); color: var(--text-muted); }
.status-active[b-kytooir4gx] { background: var(--status-success-muted); color: var(--status-success); }
.status-atrisk[b-kytooir4gx] { background: var(--status-warning-muted); color: var(--status-warning); }
.status-behind[b-kytooir4gx] { background: var(--status-error-muted); color: var(--status-error); }
.status-completed[b-kytooir4gx] { background: var(--status-success-muted); color: var(--status-success); }
.status-cancelled[b-kytooir4gx] { background: var(--bg-elevated); color: var(--text-muted); }
.status-notstarted[b-kytooir4gx] { background: var(--bg-elevated); color: var(--text-muted); }
.status-ontrack[b-kytooir4gx] { background: var(--status-success-muted); color: var(--status-success); }
.status-achieved[b-kytooir4gx] { background: var(--status-success-muted); color: var(--status-success); }

.objective-progress[b-kytooir4gx] {
    flex-shrink: 0;
}

.progress-ring[b-kytooir4gx] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-bg[b-kytooir4gx] {
    stroke: var(--bg-elevated);
}

.ring-fill[b-kytooir4gx] {
    stroke: var(--accent-primary);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.5s ease;
}

.ring-text[b-kytooir4gx] {
    position: absolute;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.key-results[b-kytooir4gx] {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-elevated);
}

.kr-item[b-kytooir4gx] {
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.kr-info[b-kytooir4gx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.kr-title[b-kytooir4gx] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.kr-status[b-kytooir4gx] {
    padding: 2px var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.kr-progress[b-kytooir4gx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.progress-bar[b-kytooir4gx] {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-kytooir4gx] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.kr-values[b-kytooir4gx] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

.kr-links[b-kytooir4gx] {
    font-size: 0.75rem;
    color: var(--accent-primary);
    margin-top: var(--space-1);
}

.kr-actions[b-kytooir4gx] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.child-objectives[b-kytooir4gx] {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
}

.child-card[b-kytooir4gx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.child-title[b-kytooir4gx] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.child-progress[b-kytooir4gx] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.loading-state[b-kytooir4gx], .empty-state[b-kytooir4gx] {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-muted);
}

/* Dialog */
.dialog-overlay[b-kytooir4gx] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-kytooir4gx] {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 520px;
    box-shadow: var(--shadow-dialog);
}

.dialog-header[b-kytooir4gx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.dialog-header h2[b-kytooir4gx] { margin: 0; font-size: 1.125rem; color: var(--text-primary); }
.dialog-close[b-kytooir4gx] { background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; }
.dialog-body[b-kytooir4gx] { padding: var(--space-5); }
.dialog-footer[b-kytooir4gx] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.form-group[b-kytooir4gx] { margin-bottom: var(--space-4); }
.form-group label[b-kytooir4gx] { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-1); }
.form-group input[b-kytooir4gx], .form-group select[b-kytooir4gx], .form-group textarea[b-kytooir4gx] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
}
.form-row[b-kytooir4gx] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

@media (max-width: 640px) {
    .page-container[b-kytooir4gx] { padding: var(--space-4); }
    .page-header[b-kytooir4gx] { flex-direction: column; gap: var(--space-4); }
    .filters[b-kytooir4gx] { flex-direction: column; }
    .form-row[b-kytooir4gx] { grid-template-columns: 1fr; }
}
/* /Pages/OkrMapping.razor.rz.scp.css */
.page-container[b-rcn07tcog3] {
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}

.page-header[b-rcn07tcog3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.header-left[b-rcn07tcog3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.btn-back[b-rcn07tcog3] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    margin-top: var(--space-1);
}

.page-title[b-rcn07tcog3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-rcn07tcog3] {
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
}

.mapping-layout[b-rcn07tcog3] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-4);
    flex: 1;
    min-height: 0;
}

.panel[b-rcn07tcog3] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    overflow-y: auto;
}

.panel-title[b-rcn07tcog3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
}

.kr-tree[b-rcn07tcog3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tree-objective[b-rcn07tcog3] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tree-obj-header[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-elevated);
}

.tree-icon[b-rcn07tcog3] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
}

.tree-icon.kr[b-rcn07tcog3] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.tree-obj-title[b-rcn07tcog3] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tree-progress[b-rcn07tcog3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.tree-kr[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    border-top: 1px solid var(--border-subtle);
}

.tree-kr:hover[b-rcn07tcog3] {
    background: var(--bg-surface-hover);
}

.tree-kr.selected[b-rcn07tcog3] {
    background: var(--accent-primary-muted);
    border-left: 3px solid var(--accent-primary);
}

.tree-kr-info[b-rcn07tcog3] {
    flex: 1;
    min-width: 0;
}

.tree-kr-title[b-rcn07tcog3] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--space-1);
}

.tree-kr-progress[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mini-bar[b-rcn07tcog3] {
    width: 60px;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.mini-fill[b-rcn07tcog3] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
}

.mini-text[b-rcn07tcog3] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.link-count[b-rcn07tcog3] {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.empty-panel[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    text-align: center;
}

.kr-detail-progress[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.progress-bar-lg[b-rcn07tcog3] {
    flex: 1;
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-rcn07tcog3] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
}

.subsection-title[b-rcn07tcog3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-4) 0 var(--space-3);
}

.linked-items[b-rcn07tcog3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.linked-item[b-rcn07tcog3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.linked-info[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.linked-meta[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.wi-type[b-rcn07tcog3] {
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.type-task[b-rcn07tcog3] { background: var(--status-info-muted); color: var(--status-info); }
.type-bug[b-rcn07tcog3] { background: var(--status-error-muted); color: var(--status-error); }
.type-userstory[b-rcn07tcog3], .type-user_story[b-rcn07tcog3] { background: var(--status-success-muted); color: var(--status-success); }
.type-feature[b-rcn07tcog3] { background: var(--accent-secondary-muted); color: var(--accent-secondary); }
.type-epic[b-rcn07tcog3] { background: var(--status-warning-muted); color: var(--status-warning); }

.wi-id[b-rcn07tcog3] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.wi-title[b-rcn07tcog3] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wi-state[b-rcn07tcog3] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-unlink[b-rcn07tcog3], .btn-link[b-rcn07tcog3] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-default);
    cursor: pointer;
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: all var(--duration-fast) ease;
}

.btn-unlink:hover[b-rcn07tcog3] {
    border-color: var(--status-error);
    color: var(--status-error);
}

.btn-link[b-rcn07tcog3] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border-color: var(--accent-primary);
}

.btn-link:hover[b-rcn07tcog3] {
    opacity: 0.9;
}

.search-box[b-rcn07tcog3] {
    margin-bottom: var(--space-3);
}

.search-box input[b-rcn07tcog3] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.search-box input:focus[b-rcn07tcog3] {
    outline: none;
    border-color: var(--accent-primary);
}

.search-results[b-rcn07tcog3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.search-item[b-rcn07tcog3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.search-item-info[b-rcn07tcog3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.loading-state[b-rcn07tcog3] {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .mapping-layout[b-rcn07tcog3] {
        grid-template-columns: 1fr;
    }

    .page-container[b-rcn07tcog3] {
        height: auto;
        padding: var(--space-4);
    }
}
/* /Pages/Portfolio.razor.rz.scp.css */
/* =============================================
   PORTFOLIO — Analytical Command Aesthetic
   Layered depth, ring KPIs, gauge bars, risk cards
   ============================================= */

/* ──── KPI Ring Strip ──── */
.pf-kpi-strip[b-kwy7mquhe7] {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-6);
}

.pf-kpi[b-kwy7mquhe7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    position: relative;
}

.pf-kpi:first-child[b-kwy7mquhe7] { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.pf-kpi:last-child[b-kwy7mquhe7] { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

.pf-kpi-ring[b-kwy7mquhe7] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), var(--bg-track) 0),
        var(--bg-elevated);
    position: relative;
}

.pf-kpi-ring[b-kwy7mquhe7]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--bg-surface);
}

.pf-kpi-num[b-kwy7mquhe7] {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.pf-kpi-lbl[b-kwy7mquhe7] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ──── Duo Panel (Gauges + Distribution) ──── */
.pf-duo[b-kwy7mquhe7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.pf-section-tag[b-kwy7mquhe7] {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    padding-left: 2px;
}

.pf-gauges-panel[b-kwy7mquhe7],
.pf-status-panel[b-kwy7mquhe7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
}

/* Gauges */
.pf-gauges[b-kwy7mquhe7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf-gauge[b-kwy7mquhe7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-gauge-track[b-kwy7mquhe7] {
    height: 6px;
    background: var(--bg-track);
    border-radius: 3px;
    overflow: hidden;
}

.pf-gauge-fill[b-kwy7mquhe7] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-gauge-fill.success[b-kwy7mquhe7] { background: linear-gradient(90deg, var(--status-success), var(--status-success-tint)); }
.pf-gauge-fill.warning[b-kwy7mquhe7] { background: linear-gradient(90deg, var(--status-warning), var(--status-warning-tint)); }
.pf-gauge-fill.error[b-kwy7mquhe7] { background: linear-gradient(90deg, var(--status-error), var(--status-error-tint)); }

.pf-gauge-info[b-kwy7mquhe7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pf-gauge-label[b-kwy7mquhe7] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.pf-gauge-val[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
}

.pf-gauge-val.success[b-kwy7mquhe7] { color: var(--status-success); }
.pf-gauge-val.warning[b-kwy7mquhe7] { color: var(--status-warning); }
.pf-gauge-val.error[b-kwy7mquhe7] { color: var(--status-error); }

.pf-team-count[b-kwy7mquhe7] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pf-team-count-num[b-kwy7mquhe7] {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.pf-team-count-lbl[b-kwy7mquhe7] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Status Bars */
.pf-status-bars[b-kwy7mquhe7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-sbar[b-kwy7mquhe7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-sbar-head[b-kwy7mquhe7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-sbar-dot[b-kwy7mquhe7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pf-sbar-name[b-kwy7mquhe7] {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    flex: 1;
}

.pf-sbar-pct[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}

.pf-sbar-pct.success[b-kwy7mquhe7] { color: var(--status-success); }
.pf-sbar-pct.warning[b-kwy7mquhe7] { color: var(--status-warning); }
.pf-sbar-pct.error[b-kwy7mquhe7] { color: var(--status-error); }

.pf-sbar-track[b-kwy7mquhe7] {
    height: 8px;
    background: var(--bg-track);
    border-radius: 4px;
    overflow: hidden;
}

.pf-sbar-fill[b-kwy7mquhe7] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-sbar-fill.success[b-kwy7mquhe7] { background: var(--status-success); box-shadow: 0 0 12px var(--status-success-glow); }
.pf-sbar-fill.warning[b-kwy7mquhe7] { background: var(--status-warning); box-shadow: 0 0 12px var(--status-warning-glow); }
.pf-sbar-fill.error[b-kwy7mquhe7] { background: var(--status-error); box-shadow: 0 0 12px var(--status-error-glow); }

/* Composite stacked bar */
.pf-composite[b-kwy7mquhe7] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.pf-composite-bar[b-kwy7mquhe7] {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-row-hover);
}

.pf-composite-seg[b-kwy7mquhe7] {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-composite-seg.success[b-kwy7mquhe7] { background: var(--status-success); }
.pf-composite-seg.warning[b-kwy7mquhe7] { background: var(--status-warning); }
.pf-composite-seg.error[b-kwy7mquhe7] { background: var(--status-error); }

/* ──── Risk Cards ──── */
.pf-risk-section[b-kwy7mquhe7] {
    margin-bottom: var(--space-6);
}

.pf-section-head[b-kwy7mquhe7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pf-risk-badge[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--status-warning);
    background: var(--status-warning-muted);
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.pf-risk-grid[b-kwy7mquhe7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.pf-risk-card[b-kwy7mquhe7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pf-risk-card:hover[b-kwy7mquhe7] {
    border-color: var(--border-default);
    transform: translateY(-1px);
}

.pf-risk-card-accent[b-kwy7mquhe7] {
    height: 3px;
}

.pf-risk-card--warn .pf-risk-card-accent[b-kwy7mquhe7] {
    background: linear-gradient(90deg, var(--status-warning), transparent 80%);
}

.pf-risk-card--critical .pf-risk-card-accent[b-kwy7mquhe7] {
    background: linear-gradient(90deg, var(--status-error), transparent 80%);
}

.pf-risk-card--blocked .pf-risk-card-accent[b-kwy7mquhe7] {
    background: linear-gradient(90deg, var(--status-error), var(--status-warning) 50%, transparent 80%);
}

.pf-risk-card-body[b-kwy7mquhe7] {
    padding: 16px;
}

.pf-risk-card-top[b-kwy7mquhe7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pf-risk-abbr[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pf-risk-name[b-kwy7mquhe7] {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.pf-risk-metrics[b-kwy7mquhe7] {
    display: flex;
    gap: 2px;
}

.pf-risk-metric[b-kwy7mquhe7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: var(--bg-row-hover);
    border-radius: var(--radius-sm);
}

.pf-risk-metric:first-child[b-kwy7mquhe7] { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.pf-risk-metric:last-child[b-kwy7mquhe7] { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.pf-risk-metric-lbl[b-kwy7mquhe7] {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pf-risk-metric-val[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pf-risk-metric-val.success[b-kwy7mquhe7] { color: var(--status-success); }
.pf-risk-metric-val.warning[b-kwy7mquhe7] { color: var(--status-warning); }
.pf-risk-metric-val.error[b-kwy7mquhe7] { color: var(--status-error); }

.pf-risk-health[b-kwy7mquhe7] {
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ──── Resource Allocation ──── */
.pf-resource-section[b-kwy7mquhe7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.pf-resource-list[b-kwy7mquhe7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-resource-row[b-kwy7mquhe7] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.pf-resource-row:hover[b-kwy7mquhe7] {
    background: var(--bg-row-hover);
}

.pf-resource-info[b-kwy7mquhe7] {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pf-resource-name[b-kwy7mquhe7] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-resource-detail[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-disabled);
}

.pf-resource-bar-wrap[b-kwy7mquhe7] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pf-resource-bar[b-kwy7mquhe7] {
    flex: 1;
    height: 8px;
    background: var(--bg-track);
    border-radius: 4px;
    overflow: visible;
    position: relative;
}

.pf-resource-bar-fill[b-kwy7mquhe7] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-resource-bar-fill.success[b-kwy7mquhe7] { background: var(--status-success); }
.pf-resource-bar-fill.warning[b-kwy7mquhe7] { background: var(--status-warning); }
.pf-resource-bar-fill.error[b-kwy7mquhe7] { background: var(--status-error); }

.pf-resource-overflow[b-kwy7mquhe7] {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--status-error);
    border-radius: 1px;
    box-shadow: 0 0 8px var(--status-error-glow);
}

.pf-resource-pct[b-kwy7mquhe7] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

.pf-resource-pct.success[b-kwy7mquhe7] { color: var(--status-success); }
.pf-resource-pct.warning[b-kwy7mquhe7] { color: var(--status-warning); }
.pf-resource-pct.error[b-kwy7mquhe7] { color: var(--status-error); }

/* ──── RESPONSIVE ──── */
@media (max-width: 768px) {
    .pf-kpi-strip[b-kwy7mquhe7] {
        flex-wrap: wrap;
    }

    .pf-kpi-strip .pf-kpi[b-kwy7mquhe7] {
        flex: 1 1 calc(50% - 1px);
        min-width: 0;
    }

    .pf-kpi:first-child[b-kwy7mquhe7] { border-radius: var(--radius-lg) 0 0 0; }
    .pf-kpi:nth-child(2)[b-kwy7mquhe7] { border-radius: 0 var(--radius-lg) 0 0; }
    .pf-kpi:nth-child(3)[b-kwy7mquhe7] { border-radius: 0 0 0 var(--radius-lg); }
    .pf-kpi:last-child[b-kwy7mquhe7] { border-radius: 0 0 var(--radius-lg) 0; }

    .pf-duo[b-kwy7mquhe7] {
        grid-template-columns: 1fr;
    }

    .pf-risk-grid[b-kwy7mquhe7] {
        grid-template-columns: 1fr;
    }

    .pf-resource-row[b-kwy7mquhe7] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pf-resource-info[b-kwy7mquhe7] {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .pf-kpi[b-kwy7mquhe7] {
        padding: 16px 8px 14px;
    }

    .pf-kpi-ring[b-kwy7mquhe7] {
        width: 52px;
        height: 52px;
    }

    .pf-kpi-num[b-kwy7mquhe7] {
        font-size: 1.125rem;
    }

    .pf-kpi-lbl[b-kwy7mquhe7] {
        font-size: 0.625rem;
    }

    .pf-gauges-panel[b-kwy7mquhe7],
    .pf-status-panel[b-kwy7mquhe7],
    .pf-resource-section[b-kwy7mquhe7] {
        padding: 16px;
    }

    .pf-risk-card-body[b-kwy7mquhe7] {
        padding: 12px;
    }

    .pf-risk-metrics[b-kwy7mquhe7] {
        flex-wrap: wrap;
    }

    .pf-risk-metric[b-kwy7mquhe7] {
        flex: 1 1 calc(50% - 1px);
    }
}
/* /Pages/PortfolioMatrix.razor.rz.scp.css */
/* Portfolio Matrix - Scoped Styles */

/* Completion progress bar in table */
[b-jv61xcr6vt] .completion-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-jv61xcr6vt] .completion-track {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-subtle);
    min-width: 60px;
}

[b-jv61xcr6vt] .completion-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-primary);
}

[b-jv61xcr6vt] .completion-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Project link */
[b-jv61xcr6vt] .project-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

[b-jv61xcr6vt] .project-link:hover {
    text-decoration: underline;
}

/* Blocked items highlight */
[b-jv61xcr6vt] .blocked-highlight {
    color: var(--status-error);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
    [b-jv61xcr6vt] .completion-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    [b-jv61xcr6vt] .completion-track {
        width: 100%;
        min-width: 0;
    }
}
/* /Pages/ProjectAssignments.razor.rz.scp.css */
.panel-controls[b-94fc7n1snv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.toggle-label[b-94fc7n1snv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

@media (max-width: 640px) {
    .panel-controls[b-94fc7n1snv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .toggle-label[b-94fc7n1snv] {
        font-size: 0.8125rem;
    }
}
/* /Pages/ProjectBudget.razor.rz.scp.css */
.project-info-card[b-esqtvdoqzv] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-6);
}

.project-info-header[b-esqtvdoqzv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.project-icon[b-esqtvdoqzv] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-secondary) 0%, color-mix(in srgb, var(--accent-secondary) 70%, black) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
}

.project-name[b-esqtvdoqzv] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.project-abbrev[b-esqtvdoqzv] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.budget-stat[b-esqtvdoqzv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.budget-stat-label[b-esqtvdoqzv] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.budget-stat-value[b-esqtvdoqzv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.budget-stat-value.warning[b-esqtvdoqzv] {
    color: var(--status-warning);
}

.budget-stat-value.success[b-esqtvdoqzv] {
    color: var(--status-success);
}

.budget-stat-value.error[b-esqtvdoqzv] {
    color: var(--status-error);
}

.burn-rate-section[b-esqtvdoqzv] {
    padding: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.burn-rate-header[b-esqtvdoqzv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.burn-rate-label[b-esqtvdoqzv] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.burn-rate-value[b-esqtvdoqzv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
}

.burn-rate-value.success[b-esqtvdoqzv] {
    color: var(--status-success);
}

.burn-rate-value.warning[b-esqtvdoqzv] {
    color: var(--status-warning);
}

.burn-rate-value.error[b-esqtvdoqzv] {
    color: var(--status-error);
}

.burn-rate-bar[b-esqtvdoqzv] {
    position: relative;
    height: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    overflow: visible;
}

.burn-rate-fill[b-esqtvdoqzv] {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.burn-rate-fill.success[b-esqtvdoqzv] {
    background: var(--status-success);
}

.burn-rate-fill.warning[b-esqtvdoqzv] {
    background: var(--status-warning);
}

.burn-rate-fill.error[b-esqtvdoqzv] {
    background: var(--status-error);
}

.burn-rate-marker[b-esqtvdoqzv] {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    border-radius: 1px;
}

.burn-rate-marker.warning[b-esqtvdoqzv] {
    background: var(--status-warning);
}

.burn-rate-marker.error[b-esqtvdoqzv] {
    background: var(--status-error);
}

.no-budget-alert[b-esqtvdoqzv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-primary-muted);
    border: 1px solid var(--accent-primary-hover);
    border-radius: var(--radius-md);
    margin: var(--space-4);
    font-size: 0.875rem;
    color: var(--accent-primary);
}

.budget-form[b-esqtvdoqzv] {
    padding: var(--space-4);
}

.form-grid[b-esqtvdoqzv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.form-actions[b-esqtvdoqzv] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 768px) {
    .form-grid[b-esqtvdoqzv] {
        grid-template-columns: 1fr;
    }

    .project-info-header[b-esqtvdoqzv] {
        gap: var(--space-3);
    }

    .project-icon[b-esqtvdoqzv] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .project-name[b-esqtvdoqzv] {
        font-size: 1.125rem;
    }
}

@media (max-width: 640px) {
    .project-info-card[b-esqtvdoqzv] {
        padding: var(--space-3);
        margin-top: var(--space-4);
    }

    .budget-stat[b-esqtvdoqzv] {
        padding: var(--space-3);
    }

    .budget-stat-value[b-esqtvdoqzv] {
        font-size: 1.125rem;
    }

    .burn-rate-section[b-esqtvdoqzv] {
        padding: var(--space-3);
    }

    .budget-form[b-esqtvdoqzv] {
        padding: var(--space-3);
    }

    .form-actions[b-esqtvdoqzv] {
        margin-top: var(--space-4);
        padding-top: var(--space-3);
    }

    .no-budget-alert[b-esqtvdoqzv] {
        margin: var(--space-3);
        font-size: 0.8125rem;
    }
}
/* /Pages/ProjectDetail.razor.rz.scp.css */
.project-avatar[b-wl8840mqci] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-on-primary);
}

.project-avatar.success[b-wl8840mqci] {
    background: linear-gradient(135deg, var(--status-success) 0%, color-mix(in srgb, var(--status-success) 70%, black) 100%);
}

.project-avatar.warning[b-wl8840mqci] {
    background: linear-gradient(135deg, var(--status-warning) 0%, color-mix(in srgb, var(--status-warning) 70%, black) 100%);
}

.project-avatar.info[b-wl8840mqci] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, color-mix(in srgb, var(--accent-primary) 70%, black) 100%);
}

.project-avatar.error[b-wl8840mqci] {
    background: linear-gradient(135deg, var(--status-error) 0%, color-mix(in srgb, var(--status-error) 70%, black) 100%);
}

.project-avatar.default[b-wl8840mqci] {
    background: linear-gradient(135deg, var(--text-muted) 0%, color-mix(in srgb, var(--text-muted) 70%, black) 100%);
}

.project-abbr-badge[b-wl8840mqci] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-description[b-wl8840mqci] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.kpi-progress-ring[b-wl8840mqci] {
    width: 40px;
    height: 40px;
}

.kpi-progress-ring svg[b-wl8840mqci] {
    transform: rotate(-90deg);
}

.ring-bg[b-wl8840mqci] {
    fill: none;
    stroke: var(--bg-elevated);
    stroke-width: 3;
}

.ring-fill[b-wl8840mqci] {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.metric-status[b-wl8840mqci] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.team-cell[b-wl8840mqci] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-name-link[b-wl8840mqci] {
    font-weight: 500;
    color: var(--accent-primary);
    text-decoration: none;
}

.team-name-link:hover[b-wl8840mqci] {
    text-decoration: underline;
}

.quick-action-btn.info[b-wl8840mqci] {
    color: var(--status-info);
    border-color: var(--accent-primary-border);
}

.quick-action-btn.info:hover[b-wl8840mqci] {
    background: var(--accent-primary-muted);
}

@media (max-width: 768px) {
    .dashboard-grid[b-wl8840mqci] {
        grid-template-columns: 1fr;
    }

    .table-container[b-wl8840mqci] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-wl8840mqci] {
        min-width: 400px;
    }

    .quick-actions[b-wl8840mqci] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .project-avatar[b-wl8840mqci] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .azure-links[b-wl8840mqci] {
        flex-wrap: wrap;
        margin-right: 0 !important;
    }

    .member-avatar[b-wl8840mqci] {
        width: 28px;
        height: 28px;
        font-size: 0.625rem;
    }

    .project-description[b-wl8840mqci] {
        padding: var(--space-3);
        font-size: 0.875rem;
        margin-bottom: var(--space-4);
    }
}

@media (max-width: 640px) {
    .quick-actions[b-wl8840mqci] {
        grid-template-columns: 1fr;
    }

    .data-table th[b-wl8840mqci],
    .data-table td[b-wl8840mqci] {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    .member-email[b-wl8840mqci] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .back-btn[b-wl8840mqci] {
        width: 36px;
        height: 36px;
    }

    .project-avatar[b-wl8840mqci] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .kpi-progress-ring[b-wl8840mqci] {
        width: 32px;
        height: 32px;
    }

    .team-cell[b-wl8840mqci] {
        gap: 1px;
    }

    .team-name-link[b-wl8840mqci] {
        font-size: 0.8125rem;
    }
}
/* /Pages/Projects.razor.rz.scp.css */
.projects-grid[b-ejz5f0y4il] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-5);
}

.project-card[b-ejz5f0y4il] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

.project-card[b-ejz5f0y4il]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.project-card:hover[b-ejz5f0y4il] {
    border-color: var(--border-default);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.project-card:hover .project-arrow[b-ejz5f0y4il] {
    opacity: 1;
    transform: translateX(0);
}

.project-card-header[b-ejz5f0y4il] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.project-avatar[b-ejz5f0y4il] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-on-primary);
    flex-shrink: 0;
}

.project-avatar.success[b-ejz5f0y4il] {
    background: linear-gradient(135deg, var(--status-success) 0%, color-mix(in srgb, var(--status-success) 70%, black) 100%);
}

.project-avatar.warning[b-ejz5f0y4il] {
    background: linear-gradient(135deg, var(--status-warning) 0%, color-mix(in srgb, var(--status-warning) 70%, black) 100%);
}

.project-avatar.info[b-ejz5f0y4il] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, color-mix(in srgb, var(--accent-primary) 70%, black) 100%);
}

.project-avatar.error[b-ejz5f0y4il] {
    background: linear-gradient(135deg, var(--status-error) 0%, color-mix(in srgb, var(--status-error) 70%, black) 100%);
}

.project-avatar.default[b-ejz5f0y4il] {
    background: linear-gradient(135deg, var(--text-muted) 0%, color-mix(in srgb, var(--text-muted) 70%, black) 100%);
}

.project-info[b-ejz5f0y4il] {
    flex: 1;
    min-width: 0;
}

.project-name[b-ejz5f0y4il] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-abbr[b-ejz5f0y4il] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-description[b-ejz5f0y4il] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-3) 0;
    min-height: 36px;
}

.project-team-info[b-ejz5f0y4il] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.team-role-row[b-ejz5f0y4il] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.role-label[b-ejz5f0y4il] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    min-width: 72px;
}

.role-label.director[b-ejz5f0y4il] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.role-label.pm[b-ejz5f0y4il] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.role-label.team[b-ejz5f0y4il] {
    background: var(--accent-primary-muted);
    color: var(--status-info);
}

.role-label.extra[b-ejz5f0y4il] {
    background: rgba(251, 146, 60, 0.15);
    color: var(--status-warning);
}

.role-names.extra-warning[b-ejz5f0y4il] {
    color: var(--status-warning);
    font-weight: 500;
}

.role-names[b-ejz5f0y4il] {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card-footer[b-ejz5f0y4il] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.project-dates[b-ejz5f0y4il] {
    display: flex;
    gap: var(--space-4);
}

.project-date[b-ejz5f0y4il] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.project-arrow[b-ejz5f0y4il] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.25s ease;
}

@media (max-width: 768px) {
    .projects-grid[b-ejz5f0y4il] {
        grid-template-columns: 1fr;
    }

    .dashboard-actions[b-ejz5f0y4il] {
        flex-direction: column;
        width: 100%;
    }

    .dashboard-actions .mud-input-root[b-ejz5f0y4il] {
        width: 100% !important;
    }

    .project-card[b-ejz5f0y4il] {
        padding: var(--space-4);
    }

    .project-card:hover[b-ejz5f0y4il] {
        transform: none;
    }

    .project-dates[b-ejz5f0y4il] {
        flex-direction: column;
        gap: var(--space-2);
    }
}

@media (max-width: 640px) {
    .projects-grid[b-ejz5f0y4il] {
        gap: var(--space-3);
    }

    .project-avatar[b-ejz5f0y4il] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .project-name[b-ejz5f0y4il] {
        font-size: 0.9375rem;
    }

    .project-description[b-ejz5f0y4il] {
        font-size: 0.8125rem;
        min-height: auto;
    }

    .project-team-info[b-ejz5f0y4il] {
        padding: var(--space-2);
    }

    .team-role-row[b-ejz5f0y4il] {
        font-size: 0.75rem;
    }

    .role-names[b-ejz5f0y4il] {
        max-width: 180px;
    }

    .project-arrow[b-ejz5f0y4il] {
        display: none;
    }
}
/* /Pages/PurchaseOrderDetail.razor.rz.scp.css */
.page-container[b-9ab0hs4o6r] {
    padding: var(--space-6);
}

.page-header[b-9ab0hs4o6r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}

.header-left[b-9ab0hs4o6r] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.btn-back[b-9ab0hs4o6r] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    margin-top: var(--space-1);
    flex-shrink: 0;
}

.po-header-top[b-9ab0hs4o6r] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.po-number[b-9ab0hs4o6r] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-title[b-9ab0hs4o6r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}

.header-actions[b-9ab0hs4o6r] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn[b-9ab0hs4o6r] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary[b-9ab0hs4o6r] { background: var(--accent-primary); color: var(--text-on-primary); }
.btn-secondary[b-9ab0hs4o6r] { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-danger[b-9ab0hs4o6r] { background: var(--status-error); color: var(--text-on-primary); }
.btn-sm[b-9ab0hs4o6r] { padding: var(--space-1) var(--space-3); font-size: 0.8125rem; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; }

.status-badge[b-9ab0hs4o6r] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-draft[b-9ab0hs4o6r] { background: var(--status-info-muted); color: var(--status-info); }
.status-approved[b-9ab0hs4o6r] { background: var(--status-success-muted); color: var(--status-success); }
.status-inprogress[b-9ab0hs4o6r] { background: var(--status-warning-muted); color: var(--status-warning); }
.status-sousreserve[b-9ab0hs4o6r] { background: var(--status-error-muted); color: var(--status-error); }
.status-readytobill[b-9ab0hs4o6r] { background: var(--status-success-muted); color: var(--status-success); }
.status-billed[b-9ab0hs4o6r] { background: var(--status-info-muted); color: var(--status-info); }
.status-paid[b-9ab0hs4o6r] { background: var(--status-success-muted); color: var(--status-success); }
.status-cancelled[b-9ab0hs4o6r] { background: var(--bg-elevated); color: var(--text-muted); }

.detail-grid[b-9ab0hs4o6r] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-6);
}

.info-section[b-9ab0hs4o6r], .deliverables-section[b-9ab0hs4o6r] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.section-title[b-9ab0hs4o6r] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
}

.section-header[b-9ab0hs4o6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header .section-title[b-9ab0hs4o6r] {
    margin: 0;
}

.locked-hint[b-9ab0hs4o6r] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.value-overdue[b-9ab0hs4o6r] {
    color: var(--status-error);
    font-weight: 600;
}

.overdue-tag[b-9ab0hs4o6r] {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px var(--space-2);
    background: var(--status-error-muted);
    color: var(--status-error);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.info-grid[b-9ab0hs4o6r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.info-item[b-9ab0hs4o6r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-9ab0hs4o6r] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.info-value[b-9ab0hs4o6r] {
    font-size: 0.875rem;
    color: var(--text-primary);
    word-break: break-word;
}

.info-value.amount[b-9ab0hs4o6r] {
    font-weight: 700;
    font-size: 1.125rem;
}

.description[b-9ab0hs4o6r], .notes-text[b-9ab0hs4o6r] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: var(--space-4) 0 0;
}

.notes-section[b-9ab0hs4o6r] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.progress-overview[b-9ab0hs4o6r] {
    margin-bottom: var(--space-4);
}

.progress-bar-lg[b-9ab0hs4o6r] {
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.progress-fill[b-9ab0hs4o6r] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-label[b-9ab0hs4o6r] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.deliverable-list[b-9ab0hs4o6r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.deliverable-item[b-9ab0hs4o6r] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.deliverable-check input[type="checkbox"][b-9ab0hs4o6r] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.deliverable-content[b-9ab0hs4o6r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.deliverable-title[b-9ab0hs4o6r] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

.deliverable-title.completed[b-9ab0hs4o6r] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.deliverable-desc[b-9ab0hs4o6r] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.deliverable-wi[b-9ab0hs4o6r] {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-family: var(--font-mono, monospace);
    word-break: break-all;
}

.btn-icon[b-9ab0hs4o6r] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.btn-icon:hover[b-9ab0hs4o6r] {
    opacity: 1;
    color: var(--status-error);
}

.loading-state[b-9ab0hs4o6r], .empty-state[b-9ab0hs4o6r] {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-muted);
}

.delete-warning[b-9ab0hs4o6r] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.delete-hint[b-9ab0hs4o6r] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

/* Dialog */
.dialog-overlay[b-9ab0hs4o6r] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
}

.dialog[b-9ab0hs4o6r] {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-dialog);
}

.dialog-wide[b-9ab0hs4o6r] {
    max-width: 560px;
}

.dialog-header[b-9ab0hs4o6r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.dialog-header h2[b-9ab0hs4o6r] { margin: 0; font-size: 1.125rem; color: var(--text-primary); }

.dialog-close[b-9ab0hs4o6r] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
}

.dialog-body[b-9ab0hs4o6r] { padding: var(--space-5); }

.dialog-footer[b-9ab0hs4o6r] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.form-group[b-9ab0hs4o6r] {
    margin-bottom: var(--space-4);
    position: relative;
}

.form-group label[b-9ab0hs4o6r] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.form-group input[b-9ab0hs4o6r],
.form-group select[b-9ab0hs4o6r],
.form-group textarea[b-9ab0hs4o6r] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-group input:focus[b-9ab0hs4o6r],
.form-group select:focus[b-9ab0hs4o6r],
.form-group textarea:focus[b-9ab0hs4o6r] {
    outline: none;
    border-color: var(--accent-primary);
}

/* Work item dropdown */
.wi-selected[b-9ab0hs4o6r] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--accent-primary-muted);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
}

.wi-selected-text[b-9ab0hs4o6r] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wi-clear[b-9ab0hs4o6r] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.wi-clear:hover[b-9ab0hs4o6r] {
    color: var(--text-primary);
}

.wi-hint[b-9ab0hs4o6r] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.wi-warning[b-9ab0hs4o6r] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--status-warning-muted);
    border: 1px solid var(--status-warning);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--status-warning);
}

.wi-warning svg[b-9ab0hs4o6r] {
    flex-shrink: 0;
    margin-top: 1px;
}

.wi-dropdown[b-9ab0hs4o6r] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    margin-top: var(--space-1);
}

.wi-option[b-9ab0hs4o6r] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border-subtle);
}

.wi-option:last-child[b-9ab0hs4o6r] {
    border-bottom: none;
}

.wi-option:hover[b-9ab0hs4o6r] {
    background: var(--bg-surface-hover);
}

.wi-option-id[b-9ab0hs4o6r] {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 50px;
}

.wi-option-title[b-9ab0hs4o6r] {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.wi-option-state[b-9ab0hs4o6r] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.wi-more[b-9ab0hs4o6r] {
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .detail-grid[b-9ab0hs4o6r] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 768px) {
    .page-container[b-9ab0hs4o6r] {
        padding: var(--space-4);
    }

    .detail-grid[b-9ab0hs4o6r] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .page-header[b-9ab0hs4o6r] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .header-actions[b-9ab0hs4o6r] {
        width: 100%;
        flex-wrap: wrap;
    }

    .header-actions .btn[b-9ab0hs4o6r] {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .page-title[b-9ab0hs4o6r] {
        font-size: 1.25rem;
    }

    .info-grid[b-9ab0hs4o6r] {
        grid-template-columns: 1fr 1fr;
    }

    .info-section[b-9ab0hs4o6r], .deliverables-section[b-9ab0hs4o6r] {
        padding: var(--space-4);
    }

    .info-value.amount[b-9ab0hs4o6r] {
        font-size: 1rem;
    }

    .dialog[b-9ab0hs4o6r] {
        width: 95%;
    }

    .dialog-wide[b-9ab0hs4o6r] {
        max-width: 95%;
    }
}

@media (max-width: 640px) {
    .page-container[b-9ab0hs4o6r] {
        padding: var(--space-3);
    }

    .page-title[b-9ab0hs4o6r] {
        font-size: 1.125rem;
    }

    .po-header-top[b-9ab0hs4o6r] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .header-left[b-9ab0hs4o6r] {
        width: 100%;
    }

    .header-actions[b-9ab0hs4o6r] {
        flex-direction: column;
    }

    .header-actions .btn[b-9ab0hs4o6r] {
        width: 100%;
        justify-content: center;
    }

    .info-grid[b-9ab0hs4o6r] {
        grid-template-columns: 1fr;
    }

    .info-section[b-9ab0hs4o6r], .deliverables-section[b-9ab0hs4o6r] {
        padding: var(--space-3);
    }

    .section-title[b-9ab0hs4o6r] {
        font-size: 0.9375rem;
    }

    .deliverable-item[b-9ab0hs4o6r] {
        padding: var(--space-2);
    }

    .btn-sm[b-9ab0hs4o6r] {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
    }

    .btn[b-9ab0hs4o6r] {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
    }

    .dialog[b-9ab0hs4o6r] {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
    }

    .dialog-wide[b-9ab0hs4o6r] {
        max-width: 100%;
    }

    .dialog-body[b-9ab0hs4o6r] {
        padding: var(--space-4);
    }

    .dialog-header[b-9ab0hs4o6r] {
        padding: var(--space-4);
    }

    .dialog-footer[b-9ab0hs4o6r] {
        padding: var(--space-3) var(--space-4);
    }

    .form-group input[b-9ab0hs4o6r],
    .form-group select[b-9ab0hs4o6r],
    .form-group textarea[b-9ab0hs4o6r] {
        font-size: 1rem;
    }

    .wi-dropdown[b-9ab0hs4o6r] {
        max-height: 200px;
    }

    .wi-option[b-9ab0hs4o6r] {
        flex-wrap: wrap;
    }

    .wi-option-title[b-9ab0hs4o6r] {
        white-space: normal;
        flex-basis: 100%;
        order: 1;
    }
}

@media (max-width: 380px) {
    .page-container[b-9ab0hs4o6r] {
        padding: var(--space-2);
    }

    .header-left[b-9ab0hs4o6r] {
        gap: var(--space-2);
    }

    .info-value.amount[b-9ab0hs4o6r] {
        font-size: 0.9375rem;
    }

    .deliverable-item[b-9ab0hs4o6r] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .deliverable-check[b-9ab0hs4o6r] {
        order: -1;
    }

    .progress-label[b-9ab0hs4o6r] {
        font-size: 0.75rem;
    }
}
/* /Pages/PurchaseOrders.razor.rz.scp.css */
.page-container[b-v8v71iwt2y] {
    padding: var(--space-6);
}

.page-header[b-v8v71iwt2y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.page-title[b-v8v71iwt2y] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-v8v71iwt2y] {
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
}

.btn[b-v8v71iwt2y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary[b-v8v71iwt2y] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
}

.btn-primary:hover[b-v8v71iwt2y] {
    opacity: 0.9;
}

.btn-secondary[b-v8v71iwt2y] {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.status-tabs[b-v8v71iwt2y] {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.tab[b-v8v71iwt2y] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: all 0.15s ease;
}

.tab:hover[b-v8v71iwt2y] {
    background: var(--bg-elevated);
}

.tab.active[b-v8v71iwt2y] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border-color: var(--accent-primary);
}

.tab-count[b-v8v71iwt2y] {
    background: var(--text-on-primary-muted);
    padding: 0 var(--space-2);
    border-radius: 999px;
    font-size: 0.75rem;
}

.tab:not(.active) .tab-count[b-v8v71iwt2y] {
    background: var(--bg-elevated);
}

.po-grid[b-v8v71iwt2y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
}

.po-card[b-v8v71iwt2y] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all 0.15s ease;
}

.po-card:hover[b-v8v71iwt2y] {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.po-delayed[b-v8v71iwt2y] {
    border-color: var(--status-error);
}

.po-delayed:hover[b-v8v71iwt2y] {
    border-color: var(--status-error);
}

.po-card-header[b-v8v71iwt2y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.po-badges[b-v8v71iwt2y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.badge-delayed[b-v8v71iwt2y] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--status-error-muted);
    color: var(--status-error);
}

.po-number[b-v8v71iwt2y] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

.status-badge[b-v8v71iwt2y] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-draft[b-v8v71iwt2y] { background: var(--status-info-muted); color: var(--status-info); }
.status-approved[b-v8v71iwt2y] { background: var(--status-success-muted); color: var(--status-success); }
.status-inprogress[b-v8v71iwt2y] { background: var(--status-warning-muted); color: var(--status-warning); }
.status-sousreserve[b-v8v71iwt2y] { background: var(--status-error-muted); color: var(--status-error); }
.status-readytobill[b-v8v71iwt2y] { background: var(--status-success-muted); color: var(--status-success); }
.status-billed[b-v8v71iwt2y] { background: var(--status-info-muted); color: var(--status-info); }
.status-paid[b-v8v71iwt2y] { background: var(--status-success-muted); color: var(--status-success); }
.status-cancelled[b-v8v71iwt2y] { background: var(--bg-elevated); color: var(--text-muted); }

.po-title[b-v8v71iwt2y] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.po-vendor[b-v8v71iwt2y] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.po-meta[b-v8v71iwt2y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    font-size: 0.8125rem;
}

.po-project[b-v8v71iwt2y] {
    color: var(--text-muted);
}

.po-amount[b-v8v71iwt2y] {
    font-weight: 600;
    color: var(--text-primary);
}

.po-dates[b-v8v71iwt2y] {
    margin-bottom: var(--space-3);
}

.po-date[b-v8v71iwt2y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.date-overdue[b-v8v71iwt2y] {
    color: var(--status-error);
    font-weight: 600;
}

.po-progress[b-v8v71iwt2y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.progress-bar[b-v8v71iwt2y] {
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-v8v71iwt2y] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-v8v71iwt2y] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.loading-state[b-v8v71iwt2y], .empty-state[b-v8v71iwt2y] {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-muted);
}

/* Dialog */
.dialog-overlay[b-v8v71iwt2y] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
}

.dialog[b-v8v71iwt2y] {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-dialog);
}

.dialog-header[b-v8v71iwt2y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.dialog-header h2[b-v8v71iwt2y] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.dialog-close[b-v8v71iwt2y] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.dialog-body[b-v8v71iwt2y] {
    padding: var(--space-5);
}

.dialog-footer[b-v8v71iwt2y] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.form-group[b-v8v71iwt2y] {
    margin-bottom: var(--space-4);
}

.form-group label[b-v8v71iwt2y] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.form-group input[b-v8v71iwt2y],
.form-group select[b-v8v71iwt2y],
.form-group textarea[b-v8v71iwt2y] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-group textarea[b-v8v71iwt2y] {
    resize: vertical;
}

.form-row[b-v8v71iwt2y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Responsive */
@media (max-width: 1024px) {
    .po-grid[b-v8v71iwt2y] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container[b-v8v71iwt2y] {
        padding: var(--space-4);
    }

    .page-header[b-v8v71iwt2y] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .page-title[b-v8v71iwt2y] {
        font-size: 1.375rem;
    }

    .po-grid[b-v8v71iwt2y] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .po-card[b-v8v71iwt2y] {
        padding: var(--space-4);
    }

    .status-tabs[b-v8v71iwt2y] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .status-tabs[b-v8v71iwt2y]::-webkit-scrollbar {
        display: none;
    }

    .dialog[b-v8v71iwt2y] {
        width: 95%;
    }

    .form-row[b-v8v71iwt2y] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-container[b-v8v71iwt2y] {
        padding: var(--space-3);
    }

    .page-title[b-v8v71iwt2y] {
        font-size: 1.25rem;
    }

    .page-subtitle[b-v8v71iwt2y] {
        font-size: 0.8125rem;
    }

    .po-grid[b-v8v71iwt2y] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .po-card[b-v8v71iwt2y] {
        padding: var(--space-3);
    }

    .po-card-header[b-v8v71iwt2y] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .po-title[b-v8v71iwt2y] {
        font-size: 0.9375rem;
    }

    .po-meta[b-v8v71iwt2y] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .tab[b-v8v71iwt2y] {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
    }

    .btn[b-v8v71iwt2y] {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
    }

    .dialog[b-v8v71iwt2y] {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
    }

    .dialog-body[b-v8v71iwt2y] {
        padding: var(--space-4);
    }

    .dialog-header[b-v8v71iwt2y] {
        padding: var(--space-4);
    }

    .dialog-footer[b-v8v71iwt2y] {
        padding: var(--space-3) var(--space-4);
    }

    .form-group input[b-v8v71iwt2y],
    .form-group select[b-v8v71iwt2y],
    .form-group textarea[b-v8v71iwt2y] {
        font-size: 1rem;
    }
}

@media (max-width: 380px) {
    .page-container[b-v8v71iwt2y] {
        padding: var(--space-2);
    }

    .status-tabs[b-v8v71iwt2y] {
        margin-bottom: var(--space-4);
    }

    .po-card[b-v8v71iwt2y] {
        padding: var(--space-3);
    }

    .po-amount[b-v8v71iwt2y] {
        font-size: 0.875rem;
    }
}
/* /Pages/QualityMetrics.razor.rz.scp.css */
/* Date presets */
.date-presets[b-3qhveuqqfd] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.preset-chip[b-3qhveuqqfd] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.preset-chip:hover[b-3qhveuqqfd] {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.preset-chip.active[b-3qhveuqqfd] {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border-color: var(--accent-primary);
}

/* Quality Metrics - Scoped Styles */

.charts-row[b-3qhveuqqfd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

@media (max-width: 900px) {
    .charts-row[b-3qhveuqqfd] {
        grid-template-columns: 1fr;
    }
}

.chart-panel[b-3qhveuqqfd] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
}

.chart-panel + .chart-panel[b-3qhveuqqfd] {
    margin-top: var(--space-4);
}

.chart-panel-title[b-3qhveuqqfd] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

[b-3qhveuqqfd] .highlight-critical {
    border-color: var(--status-error-glow);
    box-shadow: 0 0 0 1px var(--status-error-muted);
}

/* Severity chart */
.severity-chart[b-3qhveuqqfd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.severity-row[b-3qhveuqqfd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.severity-label[b-3qhveuqqfd] {
    width: 100px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.severity-bar-track[b-3qhveuqqfd] {
    flex: 1;
    height: 20px;
    background: var(--surface-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.severity-bar-fill[b-3qhveuqqfd] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.severity-bar-fill.sev-critical[b-3qhveuqqfd] { background: var(--status-error); }
.severity-bar-fill.sev-high[b-3qhveuqqfd] { background: var(--status-warning); }
.severity-bar-fill.sev-medium[b-3qhveuqqfd] { background: var(--status-info); }
.severity-bar-fill.sev-low[b-3qhveuqqfd] { background: var(--text-tertiary); }

.severity-count[b-3qhveuqqfd] {
    width: 80px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
    font-family: var(--font-mono);
}

/* Bug trend */
.trend-chart[b-3qhveuqqfd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trend-entry[b-3qhveuqqfd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trend-label[b-3qhveuqqfd] {
    width: 100px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-bars[b-3qhveuqqfd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trend-bar[b-3qhveuqqfd] {
    height: 8px;
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.trend-bar.created[b-3qhveuqqfd] { background: var(--status-error); }
.trend-bar.resolved[b-3qhveuqqfd] { background: var(--status-success); }

.trend-net[b-3qhveuqqfd] {
    width: 40px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    text-align: right;
}

.net-positive[b-3qhveuqqfd] { color: var(--status-error); }
.net-negative[b-3qhveuqqfd] { color: var(--status-success); }
.net-zero[b-3qhveuqqfd] { color: var(--text-secondary); }

.trend-legend[b-3qhveuqqfd] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-primary);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-dot[b-3qhveuqqfd] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.legend-dot.created[b-3qhveuqqfd] { background: var(--status-error); }
.legend-dot.resolved[b-3qhveuqqfd] { background: var(--status-success); }

/* Severity chip */
.severity-chip[b-3qhveuqqfd] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.sev-chip-critical[b-3qhveuqqfd] { background: var(--status-error-muted); color: var(--status-error); }
.sev-chip-high[b-3qhveuqqfd] { background: var(--status-warning-muted); color: var(--status-warning); }
.sev-chip-medium[b-3qhveuqqfd] { background: var(--status-info-muted); color: var(--status-info); }
.sev-chip-low[b-3qhveuqqfd] { background: var(--surface-secondary); color: var(--text-tertiary); }

/* Status chip */
.status-chip[b-3qhveuqqfd] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-good[b-3qhveuqqfd] { background: var(--status-success-muted); color: var(--status-success); }
.status-warning[b-3qhveuqqfd] { background: var(--status-warning-muted); color: var(--status-warning); }
.status-danger[b-3qhveuqqfd] { background: var(--status-error-muted); color: var(--status-error); }

/* Pagination */
[b-3qhveuqqfd] .table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--border-primary);
    gap: 12px;
    flex-wrap: wrap;
}

[b-3qhveuqqfd] .pagination-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

[b-3qhveuqqfd] .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-3qhveuqqfd] .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

[b-3qhveuqqfd] .pagination-btn:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
}

[b-3qhveuqqfd] .pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

[b-3qhveuqqfd] .pagination-current {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 8px;
    min-width: 50px;
    text-align: center;
}

[b-3qhveuqqfd] .pagination-size {
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .chart-panel[b-3qhveuqqfd] { padding: 16px; border-radius: 8px; }
    [b-3qhveuqqfd] .table-pagination {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
/* /Pages/Reports/ProjectSummaryReport.razor.rz.scp.css */
/* Report print styles - shared via ::deep */

[b-gb9k5485tr] .report-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
    font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    background: var(--bg-surface);
}

[b-gb9k5485tr] .report-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-default);
}

[b-gb9k5485tr] .report-logo {
    margin-bottom: 12px;
}

[b-gb9k5485tr] .report-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 8px 0;
}

[b-gb9k5485tr] .report-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 8px;
}

[b-gb9k5485tr] .report-section {
    margin-bottom: 28px;
}

[b-gb9k5485tr] .report-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-default);
}

[b-gb9k5485tr] .report-table {
    width: 100%;
    border-collapse: collapse;
}

[b-gb9k5485tr] .report-table td,
[b-gb9k5485tr] .report-table th {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bg-surface-hover);
}

[b-gb9k5485tr] .report-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-base);
}

[b-gb9k5485tr] .report-label {
    font-weight: 500;
    color: var(--text-muted);
    width: 160px;
}

[b-gb9k5485tr] .report-data-table {
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
}

[b-gb9k5485tr] .report-data-table thead tr {
    background: var(--bg-base);
}

[b-gb9k5485tr] .report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

[b-gb9k5485tr] .report-kpi {
    text-align: center;
    padding: 16px;
    background: var(--bg-base);
    border-radius: 8px;
    border: 1px solid var(--border-default);
}

[b-gb9k5485tr] .report-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-gb9k5485tr] .report-kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
}

[b-gb9k5485tr] .report-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-default);
}

[b-gb9k5485tr] .report-footer {
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
    [b-gb9k5485tr] .report-container {
        padding: var(--space-4);
    }

    [b-gb9k5485tr] .report-title {
        font-size: 1.25rem;
    }

    [b-gb9k5485tr] .report-meta {
        flex-direction: column;
        gap: 2px;
    }

    [b-gb9k5485tr] .report-meta span:nth-child(2) {
        display: none;
    }

    [b-gb9k5485tr] .report-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    [b-gb9k5485tr] .report-kpi {
        padding: 10px;
    }

    [b-gb9k5485tr] .report-kpi-value {
        font-size: 1.25rem;
    }

    [b-gb9k5485tr] .report-label {
        width: 120px;
    }

    [b-gb9k5485tr] .report-actions {
        flex-direction: column;
    }
}

@media print {
    [b-gb9k5485tr] .no-print {
        display: none !important;
    }

    [b-gb9k5485tr] .report-container {
        padding: 0;
        max-width: 100%;
    }

    [b-gb9k5485tr] .report-kpi {
        break-inside: avoid;
    }

    [b-gb9k5485tr] .report-section {
        break-inside: avoid;
    }

    [b-gb9k5485tr] .report-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px 32px;
    }
}
/* /Pages/Reports/TeamSummaryReport.razor.rz.scp.css */
/* Report print styles - shared via ::deep */

[b-iblp5fpkgz] .report-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
    font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    background: var(--bg-elevated);
}

[b-iblp5fpkgz] .report-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-default);
}

[b-iblp5fpkgz] .report-logo {
    margin-bottom: 12px;
}

[b-iblp5fpkgz] .report-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 8px 0;
}

[b-iblp5fpkgz] .report-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 8px;
}

[b-iblp5fpkgz] .report-section {
    margin-bottom: 28px;
}

[b-iblp5fpkgz] .report-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-default);
}

[b-iblp5fpkgz] .report-table {
    width: 100%;
    border-collapse: collapse;
}

[b-iblp5fpkgz] .report-table td,
[b-iblp5fpkgz] .report-table th {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}

[b-iblp5fpkgz] .report-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-base);
}

[b-iblp5fpkgz] .report-label {
    font-weight: 500;
    color: var(--text-muted);
    width: 160px;
}

[b-iblp5fpkgz] .report-data-table {
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
}

[b-iblp5fpkgz] .report-data-table thead tr {
    background: var(--bg-base);
}

[b-iblp5fpkgz] .report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

[b-iblp5fpkgz] .report-kpi {
    text-align: center;
    padding: 16px;
    background: var(--bg-base);
    border-radius: 8px;
    border: 1px solid var(--border-default);
}

[b-iblp5fpkgz] .report-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

[b-iblp5fpkgz] .report-kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
}

[b-iblp5fpkgz] .report-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-default);
}

[b-iblp5fpkgz] .report-footer {
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
    [b-iblp5fpkgz] .report-container {
        padding: var(--space-4);
    }

    [b-iblp5fpkgz] .report-title {
        font-size: 1.25rem;
    }

    [b-iblp5fpkgz] .report-meta {
        flex-direction: column;
        gap: 2px;
    }

    [b-iblp5fpkgz] .report-meta span:nth-child(2) {
        display: none;
    }

    [b-iblp5fpkgz] .report-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    [b-iblp5fpkgz] .report-kpi {
        padding: 10px;
    }

    [b-iblp5fpkgz] .report-kpi-value {
        font-size: 1.25rem;
    }

    [b-iblp5fpkgz] .report-label {
        width: 120px;
    }

    [b-iblp5fpkgz] .report-actions {
        flex-direction: column;
    }
}

@media print {
    [b-iblp5fpkgz] .no-print {
        display: none !important;
    }

    [b-iblp5fpkgz] .report-container {
        padding: 0;
        max-width: 100%;
    }

    [b-iblp5fpkgz] .report-kpi {
        break-inside: avoid;
    }

    [b-iblp5fpkgz] .report-section {
        break-inside: avoid;
    }

    [b-iblp5fpkgz] .report-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px 32px;
    }
}
/* /Pages/RequestAccess.razor.rz.scp.css */
.request-access-page[b-6ted9nztx3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-base);
}

.request-bg[b-6ted9nztx3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.request-bg-gradient[b-6ted9nztx3] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--status-warning-muted) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, var(--status-error-subtle) 0%, transparent 50%);
}

.request-bg-grid[b-6ted9nztx3] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 70%);
}

.request-container[b-6ted9nztx3] {
    width: 100%;
    max-width: 480px;
    position: relative;
    z-index: 1;
}

.request-header[b-6ted9nztx3] {
    text-align: center;
    margin-bottom: 2rem;
}

.request-logo[b-6ted9nztx3] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.request-card[b-6ted9nztx3] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
}

.request-icon[b-6ted9nztx3] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--status-warning-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-warning);
}

.request-icon .mud-icon-root[b-6ted9nztx3] {
    font-size: 2.5rem !important;
}

.request-title[b-6ted9nztx3] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.request-subtitle[b-6ted9nztx3] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.request-steps[b-6ted9nztx3] {
    background: var(--accent-primary-subtle);
    border: 1px solid var(--accent-primary-muted);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

.request-steps-title[b-6ted9nztx3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.request-step[b-6ted9nztx3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.request-step:last-child[b-6ted9nztx3] {
    margin-bottom: 0;
}

.request-step-number[b-6ted9nztx3] {
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-on-primary);
    flex-shrink: 0;
}

.request-step p[b-6ted9nztx3] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.request-step strong[b-6ted9nztx3] {
    color: var(--text-primary);
}

.request-account[b-6ted9nztx3] {
    background: var(--bg-elevated);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.request-account-title[b-6ted9nztx3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
}

.request-account-row[b-6ted9nztx3] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.request-account-row:last-child[b-6ted9nztx3] {
    border-bottom: none;
}

.request-account-label[b-6ted9nztx3] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.request-account-value[b-6ted9nztx3] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    text-align: right;
}

.request-actions[b-6ted9nztx3] {
    display: flex;
    gap: 0.75rem;
}

.request-btn[b-6ted9nztx3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.request-btn.primary[b-6ted9nztx3] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, color-mix(in srgb, var(--accent-primary) 70%, black) 100%);
    color: var(--text-on-primary);
    box-shadow: 0 4px 12px var(--accent-primary-border);
}

.request-btn.primary:hover:not(:disabled)[b-6ted9nztx3] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-primary-border-emphasis);
}

.request-btn.primary:disabled[b-6ted9nztx3] {
    opacity: 0.7;
    cursor: not-allowed;
}

.request-btn.secondary[b-6ted9nztx3] {
    background: transparent;
    border: 1px solid var(--border-emphasis);
    color: var(--text-primary);
}

.request-btn.secondary:hover[b-6ted9nztx3] {
    background: var(--border-subtle);
    border-color: var(--border-emphasis);
}

.request-btn-spinner[b-6ted9nztx3] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-6ted9nztx3 0.8s linear infinite;
}

@keyframes spin-b-6ted9nztx3 {
    to {
        transform: rotate(360deg);
    }
}

.request-alert[b-6ted9nztx3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    background: var(--status-warning-muted);
    border: 1px solid var(--status-warning-border);
    border-radius: 10px;
    color: var(--status-warning);
    font-size: 0.875rem;
    text-align: left;
}

.request-footer[b-6ted9nztx3] {
    text-align: center;
    margin-top: 2rem;
}

.request-footer p[b-6ted9nztx3] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}
/* /Pages/ResourceAllocation.razor.rz.scp.css */
/* Resource Allocation - Scoped Styles */

/* Action buttons inline */
[b-lve09irmb8] .alloc-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

[b-lve09irmb8] .alloc-edit-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Responsive */
@media (max-width: 640px) {
    [b-lve09irmb8] .alloc-actions {
        justify-content: flex-end;
    }

    [b-lve09irmb8] .alloc-edit-row {
        flex-wrap: wrap;
    }
}
/* /Pages/ResourceConflicts.razor.rz.scp.css */
/* Resource Conflicts - Scoped Styles */

/* Critical highlight for KPI card */
[b-3ef55rtqm7] .highlight-critical {
    border-color: var(--status-error-border);
    box-shadow: 0 0 0 1px var(--status-error-subtle);
}

/* Conflict card */
.conflict-card[b-3ef55rtqm7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}

.conflict-card:hover[b-3ef55rtqm7] {
    border-color: var(--border-secondary);
}

/* Conflict header */
.conflict-header[b-3ef55rtqm7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

.conflict-header-left[b-3ef55rtqm7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.conflict-header-right[b-3ef55rtqm7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.person-name[b-3ef55rtqm7] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.hours-label[b-3ef55rtqm7] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

[b-3ef55rtqm7] .est-badge {
    font-size: 0.75rem;
    color: var(--status-warning-text, #b45309);
    font-weight: 600;
    margin-left: 2px;
    cursor: help;
}

/* Overage badge pill */
.overage-badge[b-3ef55rtqm7] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.overage-critical[b-3ef55rtqm7] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.overage-warning[b-3ef55rtqm7] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.overage-mild[b-3ef55rtqm7] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

/* Utilization bar */
.utilization-bar-container[b-3ef55rtqm7] {
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 12px;
}

.utilization-bar[b-3ef55rtqm7] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.utilization-bar.critical[b-3ef55rtqm7] {
    background: linear-gradient(90deg, var(--status-error), var(--status-error-tint));
}

.utilization-bar.warning[b-3ef55rtqm7] {
    background: linear-gradient(90deg, var(--status-warning), var(--status-warning-tint));
}

.utilization-bar.mild[b-3ef55rtqm7] {
    background: linear-gradient(90deg, var(--status-warning), var(--status-warning-tint));
}

/* Detail section */
.detail-section[b-3ef55rtqm7] {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.detail-heading[b-3ef55rtqm7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* Table container for horizontal scroll */
[b-3ef55rtqm7] .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Allocation table refinements */
[b-3ef55rtqm7] .allocation-table {
    width: 100%;
}

[b-3ef55rtqm7] .allocation-table th,
[b-3ef55rtqm7] .allocation-table td {
    padding: 8px 12px;
    font-size: 0.875rem;
}

/* No conflicts empty state */
.no-conflicts[b-3ef55rtqm7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    margin-top: var(--space-4);
}

.no-conflicts-icon[b-3ef55rtqm7] {
    font-size: 3rem;
    color: var(--status-success);
    margin-bottom: 16px;
}

.no-conflicts-icon :deep(.mud-icon-root)[b-3ef55rtqm7] {
    font-size: 3rem;
}

.no-conflicts-title[b-3ef55rtqm7] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.no-conflicts-text[b-3ef55rtqm7] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
}

/* Chart panel reuse */
.chart-panel[b-3ef55rtqm7] {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 768px) {
    .conflict-card[b-3ef55rtqm7] {
        padding: 12px 14px;
        border-radius: 8px;
    }

    .conflict-header[b-3ef55rtqm7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .conflict-header-right[b-3ef55rtqm7] {
        width: 100%;
        justify-content: space-between;
    }

    .chart-panel[b-3ef55rtqm7] {
        padding: 16px;
        border-radius: 8px;
    }

    .no-conflicts[b-3ef55rtqm7] {
        padding: 40px 16px;
    }
}
/* /Pages/Roadmap.razor.rz.scp.css */
.zoom-selector[b-9k6wl4jnsi] {
    display: flex;
    gap: 4px;
    background: var(--bg-subtle);
    border-radius: 8px;
    padding: 4px;
}

.zoom-btn[b-9k6wl4jnsi] {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.zoom-btn.active[b-9k6wl4jnsi] {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zoom-btn:hover:not(.active)[b-9k6wl4jnsi] {
    color: var(--text-primary);
}

.legend[b-9k6wl4jnsi] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    flex-wrap: wrap;
}

.legend-item[b-9k6wl4jnsi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.legend-dot[b-9k6wl4jnsi] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.on-track[b-9k6wl4jnsi] {
    background: var(--status-success);
}

.legend-dot.at-risk[b-9k6wl4jnsi] {
    background: var(--status-warning);
}

.legend-dot.off-track[b-9k6wl4jnsi] {
    background: var(--status-error);
}

.legend-dot.unknown[b-9k6wl4jnsi] {
    background: var(--text-secondary);
}

.legend-dot.rt-type-epic-dot[b-9k6wl4jnsi] {
    background: #7c3aed;
    border-radius: 3px;
}

.legend-dot.rt-type-feature-dot[b-9k6wl4jnsi] {
    background: #2563eb;
    border-radius: 3px;
}

.legend-dot.rt-type-story-dot[b-9k6wl4jnsi] {
    background: #059669;
    border-radius: 3px;
}

.legend-dot.rt-type-task-dot[b-9k6wl4jnsi] {
    background: #475569;
    border-radius: 3px;
}

.legend-line[b-9k6wl4jnsi] {
    width: 20px;
    height: 2px;
    background: var(--accent-primary);
}

@media (max-width: 768px) {
    .zoom-selector[b-9k6wl4jnsi] {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    .legend[b-9k6wl4jnsi] {
        gap: 10px;
        justify-content: center;
    }
}
/* /Pages/SprintPlanning.razor.rz.scp.css */
/* Sprint Planning - Scoped Styles */

/* Sprint Selector Pills */
[b-936jevl2ir] .sprint-selector {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

[b-936jevl2ir] .sprint-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

[b-936jevl2ir] .sprint-pill:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: var(--accent-primary-muted);
}

[b-936jevl2ir] .sprint-pill.active {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #fff;
    font-weight: 600;
}

[b-936jevl2ir] .sprint-pill.past { opacity: 0.7; }
[b-936jevl2ir] .sprint-pill.past:hover { opacity: 1; }

[b-936jevl2ir] .sprint-pill-date {
    font-size: 0.7rem;
    opacity: 0.8;
}

[b-936jevl2ir] .sprint-pill-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
}

[b-936jevl2ir] .sprint-pill:not(.active) .sprint-pill-badge {
    background: var(--status-success);
    color: #fff;
}

/* Gutter dots */
[b-936jevl2ir] .gutter-cell {
    width: 6px;
    padding: 0 !important;
}

[b-936jevl2ir] .gutter-dot {
    width: 6px;
    height: 100%;
    min-height: 20px;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    cursor: help;
    transition: width 0.15s ease;
}

[b-936jevl2ir] .gutter-dot:hover {
    width: 8px;
}

[b-936jevl2ir] .gutter-dot.error { background: var(--status-error); }
[b-936jevl2ir] .gutter-dot.caution { background: var(--status-warning); }
[b-936jevl2ir] .gutter-dot.info { background: var(--status-info); }

/* Small gutter dot for members */
[b-936jevl2ir] .member-gutter {
    width: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

[b-936jevl2ir] .gutter-dot.sm {
    width: 6px;
    height: 6px;
    min-height: 6px;
    border-radius: 50%;
    position: static;
    cursor: help;
}

[b-936jevl2ir] .gutter-dot.sm:hover {
    width: 8px;
    height: 8px;
}

/* Team table row */
[b-936jevl2ir] .team-row {
    transition: background 0.15s ease;
    position: relative;
}

[b-936jevl2ir] .team-row:hover {
    background: var(--bg-hover) !important;
}

[b-936jevl2ir] .team-row.expanded {
    background: var(--bg-subtle);
}

[b-936jevl2ir] .team-detail-row > td {
    background: var(--bg-subtle);
    border-bottom: 2px solid var(--border-subtle);
}

/* Accordion content */
[b-936jevl2ir] .team-accordion-content {
    padding: var(--space-2) var(--space-4) var(--space-4) 40px;
    animation: accordion-open-b-936jevl2ir 0.2s ease-out;
}

@keyframes accordion-open-b-936jevl2ir {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-936jevl2ir] .member-workload-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-936jevl2ir] .member-workload-item {
    padding: 2px 0;
}

[b-936jevl2ir] .member-workload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

[b-936jevl2ir] .member-workload-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-936jevl2ir] .member-workload-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

[b-936jevl2ir] .member-workload-leave {
    font-size: 0.7rem;
    color: var(--status-warning);
}

[b-936jevl2ir] .member-workload-stats {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-936jevl2ir] .workload-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-subtle);
    overflow: hidden;
}

[b-936jevl2ir] .workload-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Responsive */
@media (max-width: 900px) {
    [b-936jevl2ir] .sprint-teams-table {
        overflow-x: auto;
    }
    [b-936jevl2ir] .sprint-teams-table table {
        min-width: 700px;
    }
    [b-936jevl2ir] .team-accordion-content {
        padding-left: var(--space-3);
    }
}

@media (max-width: 640px) {
    [b-936jevl2ir] .sprint-selector { padding: var(--space-2); }
    [b-936jevl2ir] .sprint-pill { padding: 4px 10px; font-size: 0.75rem; }
    [b-936jevl2ir] .member-workload-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    [b-936jevl2ir] .member-workload-info { flex-wrap: wrap; }
    [b-936jevl2ir] .member-workload-stats { font-size: 0.75rem; }
    [b-936jevl2ir] .member-workload-name { font-size: 0.8rem; }
}
/* /Pages/SyncStatus.razor.rz.scp.css */
.kpi-icon.running[b-s85yuezgdp] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
    animation: pulse-icon-b-s85yuezgdp 2s ease-in-out infinite;
}

.kpi-icon.idle[b-s85yuezgdp] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

@keyframes pulse-icon-b-s85yuezgdp {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.kpi-value-small[b-s85yuezgdp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sync-running-indicator[b-s85yuezgdp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--status-warning);
}

.sync-pulse[b-s85yuezgdp] {
    width: 8px;
    height: 8px;
    background: var(--status-warning);
    border-radius: 50%;
    animation: sync-pulse-b-s85yuezgdp 1.5s ease-in-out infinite;
}

@keyframes sync-pulse-b-s85yuezgdp {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.current-job-details[b-s85yuezgdp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.job-detail[b-s85yuezgdp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.job-detail-label[b-s85yuezgdp] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.job-detail-value[b-s85yuezgdp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.job-duration[b-s85yuezgdp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.job-items[b-s85yuezgdp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.job-failed[b-s85yuezgdp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--status-error);
    font-weight: 600;
}

.status-chip.full[b-s85yuezgdp] {
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
}

.status-chip.incremental[b-s85yuezgdp] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.status-chip.projects[b-s85yuezgdp] {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

.status-chip.workitems[b-s85yuezgdp] {
    background: var(--status-info-muted);
    color: var(--status-info);
}

.status-chip.users[b-s85yuezgdp] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.status-chip.completed[b-s85yuezgdp] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

.status-chip.running[b-s85yuezgdp] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.status-chip.failed[b-s85yuezgdp] {
    background: var(--status-error-muted);
    color: var(--status-error);
}

.status-chip.pending[b-s85yuezgdp] {
    background: var(--bg-muted);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .table-container[b-s85yuezgdp] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-s85yuezgdp] {
        min-width: 500px;
    }

    .current-job-details[b-s85yuezgdp] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .current-job-details[b-s85yuezgdp] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .job-detail[b-s85yuezgdp] {
        padding: var(--space-2);
    }

    .job-detail-value[b-s85yuezgdp] {
        font-size: 0.8125rem;
    }

    .kpi-value-small[b-s85yuezgdp] {
        font-size: 1rem;
    }

    .data-table th[b-s85yuezgdp],
    .data-table td[b-s85yuezgdp] {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
}
/* /Pages/SystemSettings.razor.rz.scp.css */
.panel-title-with-icon[b-hwfj3ylhv2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.panel-icon[b-hwfj3ylhv2] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-grid[b-hwfj3ylhv2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.setting-item[b-hwfj3ylhv2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.setting-item.full-width[b-hwfj3ylhv2] {
    grid-column: 1 / -1;
}

.setting-label[b-hwfj3ylhv2] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.setting-value[b-hwfj3ylhv2] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.setting-link[b-hwfj3ylhv2] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9375rem;
}

.setting-link:hover[b-hwfj3ylhv2] {
    text-decoration: underline;
}

.settings-divider[b-hwfj3ylhv2] {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-5) 0;
}

.settings-subtitle[b-hwfj3ylhv2] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
}

.connection-cards[b-hwfj3ylhv2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.connection-card[b-hwfj3ylhv2] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.connection-header[b-hwfj3ylhv2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.connection-info[b-hwfj3ylhv2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.connection-name[b-hwfj3ylhv2] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 600;
    color: var(--text-primary);
}

.connection-status[b-hwfj3ylhv2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
}

.connection-status.connected[b-hwfj3ylhv2] {
    color: var(--status-success);
}

.connection-status.disconnected[b-hwfj3ylhv2] {
    color: var(--status-error);
}

.connection-status.warning[b-hwfj3ylhv2] {
    color: var(--status-warning);
}

.connection-dot[b-hwfj3ylhv2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.connection-test-btn[b-hwfj3ylhv2] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.connection-test-btn:hover:not(:disabled)[b-hwfj3ylhv2] {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--accent-primary);
}

.connection-test-btn:disabled[b-hwfj3ylhv2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-hwfj3ylhv2] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-hwfj3ylhv2 0.8s linear infinite;
}

@keyframes spin-b-hwfj3ylhv2 {
    to {
        transform: rotate(360deg);
    }
}

.connection-error[b-hwfj3ylhv2] {
    font-size: 0.75rem;
    color: var(--status-error);
    margin: var(--space-2) 0 0 0;
}

.connection-meta[b-hwfj3ylhv2] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: var(--space-2) 0 0 0;
}

.status-chip.development[b-hwfj3ylhv2] {
    background: var(--accent-primary-muted);
    color: var(--status-info);
}

.status-chip.staging[b-hwfj3ylhv2] {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

.status-chip.production[b-hwfj3ylhv2] {
    background: var(--status-success-muted);
    color: var(--status-success);
}

@media (max-width: 768px) {
    .settings-grid[b-hwfj3ylhv2] {
        grid-template-columns: 1fr 1fr;
    }

    .connection-cards[b-hwfj3ylhv2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .settings-grid[b-hwfj3ylhv2] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .setting-item[b-hwfj3ylhv2] {
        padding: var(--space-2);
    }

    .setting-value[b-hwfj3ylhv2] {
        font-size: 0.8125rem;
    }

    .setting-link[b-hwfj3ylhv2] {
        font-size: 0.8125rem;
    }

    .connection-card[b-hwfj3ylhv2] {
        padding: var(--space-3);
    }

    .connection-name[b-hwfj3ylhv2] {
        font-size: 0.9375rem;
    }

    .connection-status[b-hwfj3ylhv2] {
        font-size: 0.8125rem;
    }

    .panel-title-with-icon[b-hwfj3ylhv2] {
        gap: var(--space-2);
    }

    .panel-icon[b-hwfj3ylhv2] {
        width: 28px;
        height: 28px;
    }
}
/* /Pages/Team.razor.rz.scp.css */
.team-grid[b-4e7menbcn1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.team-card[b-4e7menbcn1] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

.team-card:hover[b-4e7menbcn1] {
    border-color: var(--border-default);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.team-card:hover .team-card-action[b-4e7menbcn1] {
    color: var(--accent-primary);
}

.team-card-header[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.team-avatar-large[b-4e7menbcn1] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-on-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.team-avatar-large img[b-4e7menbcn1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-info[b-4e7menbcn1] {
    flex: 1;
    min-width: 0;
}

.team-name[b-4e7menbcn1] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-email[b-4e7menbcn1] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card-action[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

/* Drawer Styles */
.workload-drawer .mud-drawer-content[b-4e7menbcn1] {
    background: var(--bg-surface) !important;
    border-left: 1px solid var(--border-subtle) !important;
}

.drawer-content[b-4e7menbcn1] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.drawer-header[b-4e7menbcn1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.drawer-user[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.drawer-avatar[b-4e7menbcn1] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-on-primary);
    overflow: hidden;
}

.drawer-avatar img[b-4e7menbcn1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drawer-user-info h3[b-4e7menbcn1] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.drawer-user-info span[b-4e7menbcn1] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.drawer-section[b-4e7menbcn1] {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.drawer-section-title[b-4e7menbcn1] {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 var(--space-4) 0;
}

.drawer-stats[b-4e7menbcn1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.drawer-stat[b-4e7menbcn1] {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.drawer-stat-label[b-4e7menbcn1] {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.drawer-stat-value[b-4e7menbcn1] {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.drawer-stat-value.success[b-4e7menbcn1] {
    color: var(--status-success);
}

.drawer-stat-value.error[b-4e7menbcn1] {
    color: var(--status-error);
}

.drawer-stat-hint[b-4e7menbcn1] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.drawer-capacity[b-4e7menbcn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.drawer-capacity-text[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.drawer-projects[b-4e7menbcn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.drawer-project[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.drawer-project-info[b-4e7menbcn1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-project-name[b-4e7menbcn1] {
    font-weight: 500;
    color: var(--accent-primary) !important;
    text-decoration: none !important;
}

.drawer-project-name:hover[b-4e7menbcn1] {
    text-decoration: underline !important;
}

.drawer-project-details[b-4e7menbcn1] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.drawer-project-percent[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.drawer-actions[b-4e7menbcn1] {
    padding: var(--space-6);
    margin-top: auto;
}

.drawer-loading[b-4e7menbcn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-4);
    color: var(--text-secondary);
}

.progress-value[b-4e7menbcn1] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 48px;
    text-align: right;
}

@media (max-width: 768px) {
    .team-grid[b-4e7menbcn1] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .team-card:hover[b-4e7menbcn1] {
        transform: none;
    }
}

@media (max-width: 640px) {
    .team-grid[b-4e7menbcn1] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .team-card[b-4e7menbcn1] {
        padding: var(--space-4);
    }

    .team-avatar-large[b-4e7menbcn1] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .team-name[b-4e7menbcn1] {
        font-size: 0.9375rem;
    }

    .team-card-header[b-4e7menbcn1] {
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .drawer-stats[b-4e7menbcn1] {
        grid-template-columns: 1fr 1fr;
    }

    .drawer-stat[b-4e7menbcn1] {
        padding: var(--space-3);
    }

    .drawer-stat-value[b-4e7menbcn1] {
        font-size: 1.25rem;
    }

    .drawer-header[b-4e7menbcn1] {
        padding: var(--space-4);
    }

    .drawer-avatar[b-4e7menbcn1] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 1.125rem;
    }

    .drawer-user-info h3[b-4e7menbcn1] {
        font-size: 1rem;
    }

    .drawer-section[b-4e7menbcn1] {
        padding: var(--space-3) var(--space-4);
    }

    .drawer-actions[b-4e7menbcn1] {
        padding: var(--space-4);
    }
}

@media (hover: none) and (pointer: coarse) {
    .team-card:hover[b-4e7menbcn1] {
        transform: none;
        box-shadow: none;
    }

    .team-card:active[b-4e7menbcn1] {
        border-color: var(--border-default);
    }
}

/* Card completeness mini-bar */
.team-card-stats[b-4e7menbcn1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
    margin-top: var(--space-2);
}

.team-card-mini-bar[b-4e7menbcn1] {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-secondary);
    overflow: hidden;
}

.team-card-mini-fill[b-4e7menbcn1] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.team-card-mini-fill.good[b-4e7menbcn1] { background: var(--status-success); }
.team-card-mini-fill.warn[b-4e7menbcn1] { background: var(--status-warning); }
.team-card-mini-fill.bad[b-4e7menbcn1] { background: var(--status-error); }

.team-card-score-text[b-4e7menbcn1] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Drawer completeness dimensions */
[b-4e7menbcn1] .drawer-completeness-dims {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-3);
}

[b-4e7menbcn1] .drawer-dim-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-4e7menbcn1] .drawer-dim-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 100px;
    flex-shrink: 0;
}

[b-4e7menbcn1] .drawer-dim-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-secondary);
    overflow: hidden;
}

[b-4e7menbcn1] .drawer-dim-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

[b-4e7menbcn1] .drawer-dim-fill.good { background: var(--status-success); }
[b-4e7menbcn1] .drawer-dim-fill.warn { background: var(--status-warning); }
[b-4e7menbcn1] .drawer-dim-fill.bad { background: var(--status-error); }

[b-4e7menbcn1] .drawer-dim-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Drawer failed checks */
[b-4e7menbcn1] .drawer-failed-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-4e7menbcn1] .drawer-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

[b-4e7menbcn1] .drawer-check-row.severity-error {
    background: var(--status-error-muted);
}

[b-4e7menbcn1] .drawer-check-row.severity-warning {
    background: var(--status-warning-muted);
}

[b-4e7menbcn1] .drawer-check-icon {
    font-weight: 700;
    font-size: 0.75rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-4e7menbcn1] .severity-error .drawer-check-icon {
    color: var(--status-error);
}

[b-4e7menbcn1] .severity-warning .drawer-check-icon {
    color: var(--status-warning);
}
/* /Pages/TeamDetail.razor.rz.scp.css */
.team-avatar[b-rjmg52al2z] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-secondary) 0%, color-mix(in srgb, var(--accent-secondary) 70%, black) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
}

.task-count[b-rjmg52al2z] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--text-primary);
}

/* Completeness radar layout */
[b-rjmg52al2z] .completeness-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-4);
    align-items: start;
}

[b-rjmg52al2z] .completeness-radar {
    min-width: 0;
}

[b-rjmg52al2z] .completeness-details {
    min-width: 0;
}

[b-rjmg52al2z] .completeness-dimensions {
    padding: 8px 0;
}

[b-rjmg52al2z] .completeness-issues {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
}

[b-rjmg52al2z] .completeness-issue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8125rem;
}

[b-rjmg52al2z] .issue-severity {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

[b-rjmg52al2z] .severity-error {
    background: var(--status-error-muted);
    color: var(--status-error);
}

[b-rjmg52al2z] .severity-warning {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

[b-rjmg52al2z] .issue-field {
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    [b-rjmg52al2z] .completeness-layout {
        grid-template-columns: 1fr;
    }

    [b-rjmg52al2z] .completeness-radar {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .team-avatar[b-rjmg52al2z] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    [b-rjmg52al2z] .completeness-issue-row {
        font-size: 0.75rem;
    }
}
/* /Pages/TimeEntries.razor.rz.scp.css */
/* Time Entries - Scoped Styles */

[b-js7pj7nwa7] .hol-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    backdrop-filter: blur(2px);
}

[b-js7pj7nwa7] .hol-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    z-index: 9001;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

[b-js7pj7nwa7] .hol-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

[b-js7pj7nwa7] .hol-dialog-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

[b-js7pj7nwa7] .hol-dialog-close {
    background: none;
    border: none;
    color: var(--text-disabled);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

[b-js7pj7nwa7] .hol-dialog-close:hover {
    color: var(--text-primary);
    background: var(--bg-subtle);
}

[b-js7pj7nwa7] .hol-dialog-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

[b-js7pj7nwa7] .hol-dialog-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Work item cell layout */
[b-js7pj7nwa7] .workitem-cell {
    display: flex;
    flex-direction: column;
}

[b-js7pj7nwa7] .workitem-cell-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s;
}

[b-js7pj7nwa7] .workitem-cell-link:hover {
    color: var(--accent-primary);
}

[b-js7pj7nwa7] .workitem-cell-link .external-link-icon {
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

[b-js7pj7nwa7] .workitem-cell-link:hover .external-link-icon {
    opacity: 0.6;
}

[b-js7pj7nwa7] .workitem-cell-title {
    font-weight: 500;
}

[b-js7pj7nwa7] .workitem-cell-type {
    font-size: 0.75rem;
    color: var(--text-disabled);
}

/* Description truncation */
[b-js7pj7nwa7] .desc-cell {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action buttons */
[b-js7pj7nwa7] .entry-actions {
    display: flex;
    gap: 4px;
}

/* Responsive */
@media (max-width: 640px) {
    [b-js7pj7nwa7] .hol-dialog {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    [b-js7pj7nwa7] .desc-cell {
        max-width: 120px;
    }
}
/* /Pages/TimeEntryManagement.razor.rz.scp.css */
/* Filter bar */
[b-nus5y8glvz] .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

[b-nus5y8glvz] .filter-bar-selects {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

[b-nus5y8glvz] .filter-bar-dates {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

[b-nus5y8glvz] .filter-bar-dates .mud-input-control {
    max-width: 160px;
}

[b-nus5y8glvz] .filter-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[b-nus5y8glvz] .filter-member-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Active filter chips */
[b-nus5y8glvz] .filter-chips {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

[b-nus5y8glvz] .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 500;
}

[b-nus5y8glvz] .filter-chip svg {
    opacity: 0.7;
}

/* Tab bar */
[b-nus5y8glvz] .tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-default);
}

[b-nus5y8glvz] .tab-item {
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, border-color 0.15s;
}

[b-nus5y8glvz] .tab-item:hover {
    color: var(--text-primary);
}

[b-nus5y8glvz] .tab-item.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

[b-nus5y8glvz] .tab-count {
    font-size: 0.75rem;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: 10px;
}

/* Overview grid */
[b-nus5y8glvz] .overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* Compliance list */
[b-nus5y8glvz] .compliance-list {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    overflow-y: auto;
}

[b-nus5y8glvz] .compliance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    gap: var(--space-3);
}

[b-nus5y8glvz] .compliance-row.not-logging {
    background: var(--status-error-muted);
}

[b-nus5y8glvz] .compliance-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

[b-nus5y8glvz] .compliance-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

[b-nus5y8glvz] .compliance-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-nus5y8glvz] .compliance-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-nus5y8glvz] .compliance-meta {
    display: flex;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--text-disabled);
}

[b-nus5y8glvz] .text-warn {
    color: var(--status-error);
}

[b-nus5y8glvz] .compliance-bar-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    width: 140px;
}

[b-nus5y8glvz] .compliance-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
}

[b-nus5y8glvz] .compliance-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

[b-nus5y8glvz] .compliance-bar-fill.low { background: var(--status-error); }
[b-nus5y8glvz] .compliance-bar-fill.mid { background: var(--status-warning); }
[b-nus5y8glvz] .compliance-bar-fill.high { background: var(--status-success); }

[b-nus5y8glvz] .compliance-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: 36px;
    text-align: right;
}

/* Suspicious entries */
[b-nus5y8glvz] .suspicious-list {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    overflow-y: auto;
}

[b-nus5y8glvz] .suspicious-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

[b-nus5y8glvz] .suspicious-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
}

[b-nus5y8glvz] .suspicious-user {
    font-weight: 500;
    color: var(--text-primary);
}

[b-nus5y8glvz] .suspicious-date {
    color: var(--text-disabled);
    font-size: 0.8rem;
}

[b-nus5y8glvz] .suspicious-hours {
    font-weight: 600;
    color: var(--text-secondary);
}

[b-nus5y8glvz] .suspicious-detail {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-nus5y8glvz] .suspicious-link {
    color: var(--accent-primary);
    text-decoration: none;
}

[b-nus5y8glvz] .suspicious-link:hover {
    text-decoration: underline;
}

/* Reason chips */
[b-nus5y8glvz] .reason-chip {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

[b-nus5y8glvz] .reason-excessive {
    background: var(--status-error-muted);
    color: var(--status-error);
}

[b-nus5y8glvz] .reason-weekend {
    background: var(--status-warning-muted);
    color: var(--status-warning);
}

[b-nus5y8glvz] .reason-duplicate {
    background: var(--accent-secondary-muted);
    color: var(--accent-secondary);
}

[b-nus5y8glvz] .reason-missing {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

[b-nus5y8glvz] .reason-default {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

/* Calendar */
[b-nus5y8glvz] .cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

[b-nus5y8glvz] .cal-month-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 180px;
    text-align: center;
}

[b-nus5y8glvz] .cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

[b-nus5y8glvz] .cal-nav-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

[b-nus5y8glvz] .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 var(--space-4) var(--space-4);
}

[b-nus5y8glvz] .cal-day-header {
    padding: var(--space-2);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
}

[b-nus5y8glvz] .weekend-header {
    color: var(--text-disabled);
    opacity: 0.6;
}

[b-nus5y8glvz] .cal-day {
    min-height: 60px;
    padding: var(--space-1) var(--space-2);
    border-radius: 6px;
    border: 1px solid var(--border-default);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.15s, border-color 0.15s;
}

[b-nus5y8glvz] .cal-day:hover {
    border-color: var(--accent-primary);
}

[b-nus5y8glvz] .cal-day.empty {
    border: none;
    cursor: default;
    pointer-events: none;
}

[b-nus5y8glvz] .cal-day.weekend {
    background: var(--bg-surface);
    opacity: 0.7;
}

[b-nus5y8glvz] .cal-day.today {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}

[b-nus5y8glvz] .cal-day.selected {
    border-color: var(--accent-primary);
    background: var(--accent-primary-muted);
}

[b-nus5y8glvz] .cal-day.hours-ok {
    background: var(--status-success-muted);
}

[b-nus5y8glvz] .cal-day.hours-warn {
    background: var(--status-warning-muted);
}

[b-nus5y8glvz] .cal-day.hours-over {
    background: var(--status-error-muted);
}

[b-nus5y8glvz] .cal-day-number {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

[b-nus5y8glvz] .cal-day-hours {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: auto;
}

[b-nus5y8glvz] .cal-day.hours-ok .cal-day-hours { color: var(--status-success); }
[b-nus5y8glvz] .cal-day.hours-warn .cal-day-hours { color: var(--status-warning); }
[b-nus5y8glvz] .cal-day.hours-over .cal-day-hours { color: var(--status-error); }

[b-nus5y8glvz] .cal-day-users {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1;
}

/* Calendar detail */
[b-nus5y8glvz] .cal-detail {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--border-default);
}

[b-nus5y8glvz] .cal-detail-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

[b-nus5y8glvz] .cal-detail-total {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-disabled);
}

[b-nus5y8glvz] .cal-detail-empty {
    color: var(--text-disabled);
    font-size: 0.85rem;
}

/* Table helpers */
[b-nus5y8glvz] .table-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.85rem;
}

[b-nus5y8glvz] .table-link:hover {
    text-decoration: underline;
}

[b-nus5y8glvz] .user-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[b-nus5y8glvz] .user-avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

[b-nus5y8glvz] .desc-cell {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-nus5y8glvz] .kpi-value-warn {
    color: var(--status-error) !important;
}

/* Responsive */
@media (max-width: 1024px) {
    [b-nus5y8glvz] .overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    [b-nus5y8glvz] .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-nus5y8glvz] .filter-bar-selects,
    [b-nus5y8glvz] .filter-bar-dates {
        flex-direction: column;
        width: 100%;
    }

    [b-nus5y8glvz] .filter-bar-selects .mud-input-control,
    [b-nus5y8glvz] .filter-bar-dates .mud-input-control {
        max-width: 100%;
    }

    [b-nus5y8glvz] .filter-bar-actions {
        width: 100%;
    }

    [b-nus5y8glvz] .filter-bar-actions .dash-btn {
        flex: 1;
    }

    [b-nus5y8glvz] .cal-day {
        min-height: 44px;
    }

    [b-nus5y8glvz] .cal-day-header {
        font-size: 0.65rem;
    }
}

@media (max-width: 640px) {
    [b-nus5y8glvz] .desc-cell {
        max-width: 120px;
    }

    [b-nus5y8glvz] .compliance-bar-wrapper {
        width: 100px;
    }
}
/* /Pages/UserManagement.razor.rz.scp.css */

.roles-list[b-sxdeh337xn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.devops-link[b-sxdeh337xn] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--accent-primary);
}

.no-link[b-sxdeh337xn], .no-login[b-sxdeh337xn] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.last-login[b-sxdeh337xn] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.selection-count[b-sxdeh337xn] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.user-selection-list[b-sxdeh337xn] {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.user-selection-card[b-sxdeh337xn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-selection-card:hover[b-sxdeh337xn] {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.user-selection-card.selected[b-sxdeh337xn] {
    background: var(--accent-primary-muted);
    border-color: var(--accent-primary);
}


.user-selection-info[b-sxdeh337xn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-badges[b-sxdeh337xn] {
    display: flex;
    gap: var(--space-1);
}

.info-alert[b-sxdeh337xn] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--accent-primary-muted);
    border: 1px solid var(--accent-primary-hover);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--accent-primary);
}

.role-option[b-sxdeh337xn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.role-description[b-sxdeh337xn] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .user-selection-list[b-sxdeh337xn] {
        max-height: 250px;
    }

    .user-selection-card[b-sxdeh337xn] {
        padding: var(--space-2);
        gap: var(--space-2);
    }
}

@media (max-width: 640px) {
    .roles-list[b-sxdeh337xn] {
        gap: 2px;
    }

    .devops-link[b-sxdeh337xn],
    .no-link[b-sxdeh337xn],
    .no-login[b-sxdeh337xn],
    .last-login[b-sxdeh337xn] {
        font-size: 0.75rem;
    }

    .user-selection-card[b-sxdeh337xn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-alert[b-sxdeh337xn] {
        font-size: 0.8125rem;
        padding: var(--space-2);
    }

    .role-option[b-sxdeh337xn] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}

/* /Pages/Wiki/WikiPage.razor.rz.scp.css */
.wiki-page-wrapper[b-tzi3je6daz] {
    display: flex;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
}

.wiki-main[b-tzi3je6daz] {
    flex: 1;
    min-width: 0;
    padding: 0 24px 48px 0;
}

.wiki-header[b-tzi3je6daz] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-default);
}

.wiki-type-badge[b-tzi3je6daz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wiki-header-title[b-tzi3je6daz] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.wiki-page-subtitle[b-tzi3je6daz] {
    margin: 6px 0 0;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.wiki-loading[b-tzi3je6daz], .wiki-empty[b-tzi3je6daz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    gap: 16px;
}

.wiki-spinner[b-tzi3je6daz] {
    width: 32px; height: 32px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: wikiSpin 0.8s linear infinite;
}
@@keyframes wikiSpin { to[b-tzi3je6daz] { transform: rotate(360deg); } }

.wiki-card-dimmed[b-tzi3je6daz] { opacity: 0.65; }
/* /Pages/WorkItemDetail.razor.rz.scp.css */
.wi-detail-grid[b-5hpaij3cwm] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.wi-detail-header[b-5hpaij3cwm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.wi-detail-header-left[b-5hpaij3cwm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wi-detail-header-right[b-5hpaij3cwm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.wi-detail-id[b-5hpaij3cwm] {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
}

.wi-detail-title[b-5hpaij3cwm] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: var(--space-3);
    color: var(--text-primary);
}

.wi-detail-reason[b-5hpaij3cwm] {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

.wi-detail-meta[b-5hpaij3cwm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
}

.wi-back-btn[b-5hpaij3cwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.wi-back-btn:hover[b-5hpaij3cwm] {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

/* Content sections */
[b-5hpaij3cwm] .wi-detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[b-5hpaij3cwm] .wi-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--space-3);
    user-select: none;
}

[b-5hpaij3cwm] .wi-section-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

[b-5hpaij3cwm] .wi-section-chevron {
    transition: transform 0.2s ease;
    color: var(--text-tertiary);
}

[b-5hpaij3cwm] .wi-section-chevron.open {
    transform: rotate(180deg);
}

[b-5hpaij3cwm] .wi-section-title {
    margin: 0 0 var(--space-3);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

[b-5hpaij3cwm] .wi-html-content {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

[b-5hpaij3cwm] .wi-html-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
}

[b-5hpaij3cwm] .wi-html-content table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--space-3) 0;
}

[b-5hpaij3cwm] .wi-html-content th,
[b-5hpaij3cwm] .wi-html-content td {
    border: 1px solid var(--border-primary);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

[b-5hpaij3cwm] .wi-html-content pre,
[b-5hpaij3cwm] .wi-html-content code {
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.85em;
}

[b-5hpaij3cwm] .wi-html-content pre {
    padding: var(--space-3);
    overflow-x: auto;
}

[b-5hpaij3cwm] .wi-detail-no-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--text-tertiary);
}

[b-5hpaij3cwm] .wi-detail-no-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Sidebar metadata */
[b-5hpaij3cwm] .wi-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[b-5hpaij3cwm] .wi-meta-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-5hpaij3cwm] .wi-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    gap: var(--space-3);
}

[b-5hpaij3cwm] .wi-meta-item + .wi-meta-item {
    border-top: 1px solid var(--border-primary);
}

[b-5hpaij3cwm] .wi-meta-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-5hpaij3cwm] .wi-meta-item span:last-child:not(.wi-meta-label) {
    font-size: 0.875rem;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

[b-5hpaij3cwm] .wi-meta-value-highlight {
    font-weight: 700;
    color: var(--accent-primary) !important;
}

/* Tags */
[b-5hpaij3cwm] .wi-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

[b-5hpaij3cwm] .wi-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

/* Children table */
[b-5hpaij3cwm] .wi-children-table {
    overflow-x: auto;
}

[b-5hpaij3cwm] .wi-children-table table {
    width: 100%;
    border-collapse: collapse;
}

[b-5hpaij3cwm] .wi-children-table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    text-align: left;
}

[b-5hpaij3cwm] .wi-children-table td {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
}

[b-5hpaij3cwm] .wi-child-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

[b-5hpaij3cwm] .wi-child-row:hover {
    background: var(--surface-secondary);
}

/* Empty state */
.wi-detail-empty[b-5hpaij3cwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) 0;
    color: var(--text-tertiary);
    text-align: center;
}

.wi-detail-empty h2[b-5hpaij3cwm] {
    margin: 0;
    color: var(--text-primary);
}

.wi-detail-empty p[b-5hpaij3cwm] {
    margin: 0;
    color: var(--text-secondary);
}

/* Timeline */
[b-5hpaij3cwm] .wi-timeline {
    position: relative;
    padding-left: 24px;
}

[b-5hpaij3cwm] .wi-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-primary);
}

[b-5hpaij3cwm] .wi-timeline-item {
    position: relative;
    padding-bottom: var(--space-4);
}

[b-5hpaij3cwm] .wi-timeline-item:last-child {
    padding-bottom: 0;
}

[b-5hpaij3cwm] .wi-timeline-dot {
    position: absolute;
    left: -20px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
}

[b-5hpaij3cwm] .wi-timeline-dot.comment {
    background: var(--accent-primary);
}

[b-5hpaij3cwm] .wi-timeline-dot.revision {
    background: var(--text-muted);
}

[b-5hpaij3cwm] .wi-timeline-content {
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

[b-5hpaij3cwm] .wi-timeline-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

[b-5hpaij3cwm] .wi-timeline-author {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

[b-5hpaij3cwm] .wi-timeline-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-left: auto;
}

[b-5hpaij3cwm] .wi-timeline-rev {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-tertiary);
    border: 1px solid var(--border-primary);
}

[b-5hpaij3cwm] .wi-timeline-edited {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Comment body */
[b-5hpaij3cwm] .wi-comment-body {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

[b-5hpaij3cwm] .wi-comment-body a {
    color: var(--accent-primary);
    text-decoration: none;
}

[b-5hpaij3cwm] .wi-comment-body a:hover {
    text-decoration: underline;
}

[b-5hpaij3cwm] .wi-comment-deleted {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
}

/* Mentions */
[b-5hpaij3cwm] .wi-mentions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

[b-5hpaij3cwm] .wi-mention-chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--status-info-muted);
    color: var(--accent-primary);
    font-weight: 500;
}

[b-5hpaij3cwm] .wi-mention-link {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
}

/* Field changes */
[b-5hpaij3cwm] .wi-field-changes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

[b-5hpaij3cwm] .wi-field-change {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: 0.85rem;
}

[b-5hpaij3cwm] .wi-field-name {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

[b-5hpaij3cwm] .wi-field-old {
    color: var(--status-error);
    text-decoration: line-through;
    opacity: 0.7;
}

[b-5hpaij3cwm] .wi-field-new {
    color: var(--status-success);
    font-weight: 500;
}

[b-5hpaij3cwm] .wi-field-arrow {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

/* Load More button */
[b-5hpaij3cwm] .wi-load-more {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

[b-5hpaij3cwm] .wi-load-more:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

[b-5hpaij3cwm] .wi-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 900px) {
    .wi-detail-grid[b-5hpaij3cwm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    [b-5hpaij3cwm] .wi-timeline {
        padding-left: 16px;
    }

    [b-5hpaij3cwm] .wi-timeline-dot {
        left: -12px;
        width: 10px;
        height: 10px;
    }

    [b-5hpaij3cwm] .wi-timeline-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-5hpaij3cwm] .wi-timeline-date {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .wi-detail-title[b-5hpaij3cwm] {
        font-size: 1.15rem;
    }

    .wi-detail-header[b-5hpaij3cwm] {
        flex-wrap: wrap;
    }

    .wi-detail-header-right[b-5hpaij3cwm] {
        margin-left: 0;
        width: 100%;
    }
}

/* Completeness Checks */
.wi-completeness-checks[b-5hpaij3cwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wi-check-row[b-5hpaij3cwm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.wi-check-icon[b-5hpaij3cwm] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.check-passed .wi-check-icon[b-5hpaij3cwm] {
    color: var(--status-success);
}

.check-error .wi-check-icon[b-5hpaij3cwm] {
    color: var(--status-error);
}

.check-warning .wi-check-icon[b-5hpaij3cwm] {
    color: var(--status-warning);
}

.check-passed[b-5hpaij3cwm] {
    color: var(--text-secondary);
}

.check-error[b-5hpaij3cwm] {
    background: var(--status-error-muted);
    color: var(--text-primary);
}

.check-warning[b-5hpaij3cwm] {
    background: var(--status-warning-muted);
    color: var(--text-primary);
}

.wi-check-field[b-5hpaij3cwm] {
    flex: 1;
}

.wi-check-weight[b-5hpaij3cwm] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* /Pages/WorkItems.razor.rz.scp.css */
/* ============================================
   WORK ITEMS PAGE - MISSION CONTROL DESIGN
   Scoped via Blazor CSS Isolation

   Filter capsule styles now use centralized .cf-*
   classes from dashboard-enterprise.css.
   Only page-specific styles remain here.
   ============================================ */

/* CSS Custom Properties */
.wi-page[b-w4v5rge0lz] {
    --wi-bg: var(--bg-base);
    --wi-surface: var(--bg-surface);
    --wi-surface-elevated: var(--bg-elevated);
    --wi-surface-hover: var(--bg-surface-hover);
    --wi-border: var(--border-subtle);
    --wi-border-emphasis: var(--border-emphasis);
    --wi-text: var(--text-primary);
    --wi-text-muted: var(--text-secondary);
    --wi-text-subtle: var(--text-disabled);
    --wi-accent: var(--accent-primary);
    --wi-accent-muted: var(--accent-primary-muted);
    --wi-success: var(--status-success);
    --wi-warning: var(--status-warning);
    --wi-error: var(--status-error);
    --wi-purple: var(--accent-secondary);
    --wi-pink: var(--status-error);
    --wi-orange: var(--status-warning);
    --wi-cyan: var(--status-success);

    --wi-font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --wi-font-mono: 'SF Mono', 'JetBrains Mono', monospace;

    --wi-radius-sm: 6px;
    --wi-radius-md: 10px;
    --wi-radius-lg: 14px;
    --wi-radius-full: 9999px;

    --wi-shadow-glow: 0 0 40px rgba(88, 166, 255, 0.1);
    --wi-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wi-page[b-w4v5rge0lz] {
    min-height: 100vh;
    background: var(--wi-bg);
    padding: 24px 32px;
    position: relative;
    overflow-x: hidden;
}

/* Ambient Background Glow */
.wi-ambient[b-w4v5rge0lz] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(88, 166, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   HEADER
   ============================================ */
.wi-header[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
    z-index: 10;
}

.wi-header-left[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wi-logo[b-w4v5rge0lz] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wi-accent) 0%, var(--wi-purple) 100%);
    border-radius: var(--wi-radius-md);
    box-shadow: var(--wi-shadow-glow);
}

.wi-logo svg[b-w4v5rge0lz] {
    width: 22px;
    height: 22px;
    color: var(--text-on-primary);
}

.wi-header-title[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wi-header-title h1[b-w4v5rge0lz] {
    font-family: var(--wi-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--wi-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.wi-header-badge[b-w4v5rge0lz] {
    font-family: var(--wi-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    background: var(--wi-accent-muted);
    color: var(--wi-accent);
    border-radius: var(--wi-radius-full);
    border: 1px solid rgba(88, 166, 255, 0.2);
}

.wi-header-actions[b-w4v5rge0lz] {
    display: flex;
    gap: 8px;
}

/* ============================================
   BUTTONS
   ============================================ */
.wi-btn[b-w4v5rge0lz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--wi-font-display);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: var(--wi-radius-md);
    cursor: pointer;
    transition: all var(--wi-transition);
    white-space: nowrap;
}

.wi-btn svg[b-w4v5rge0lz] {
    width: 16px;
    height: 16px;
}

.wi-btn-ghost[b-w4v5rge0lz] {
    background: transparent;
    color: var(--wi-text-muted);
    padding: 10px;
}

.wi-btn-ghost:hover[b-w4v5rge0lz] {
    background: var(--wi-surface-elevated);
    color: var(--wi-text);
}

.wi-btn-primary[b-w4v5rge0lz] {
    background: linear-gradient(135deg, var(--wi-accent) 0%, var(--accent-primary) 100%);
    color: var(--text-on-primary);
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.3);
}

.wi-btn-primary:hover[b-w4v5rge0lz] {
    box-shadow: 0 4px 16px rgba(88, 166, 255, 0.4);
    transform: translateY(-1px);
}

/* ============================================
   SEARCH CONTAINER (page-specific width)
   ============================================ */
.wi-search-container[b-w4v5rge0lz] {
    flex: 0 0 360px;
}

/* ============================================
   DROPDOWN INDICATOR DOTS (page-specific)
   ============================================ */
.wi-type-indicator[b-w4v5rge0lz], .wi-state-indicator[b-w4v5rge0lz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.wi-type-indicator.type-epic[b-w4v5rge0lz] { background: var(--wi-purple); }
.wi-type-indicator.type-feature[b-w4v5rge0lz] { background: var(--wi-accent); }
.wi-type-indicator.type-userstory[b-w4v5rge0lz] { background: var(--wi-cyan); }
.wi-type-indicator.type-task[b-w4v5rge0lz] { background: var(--wi-text-muted); }
.wi-type-indicator.type-bug[b-w4v5rge0lz] { background: var(--wi-error); }
.wi-type-indicator.type-issue[b-w4v5rge0lz] { background: var(--wi-warning); }

.wi-state-indicator.state-new[b-w4v5rge0lz] { background: var(--wi-text-muted); }
.wi-state-indicator.state-active[b-w4v5rge0lz] { background: var(--wi-accent); }
.wi-state-indicator.state-resolved[b-w4v5rge0lz] { background: var(--wi-success); }
.wi-state-indicator.state-closed[b-w4v5rge0lz] { background: var(--wi-success); }
.wi-state-indicator.state-removed[b-w4v5rge0lz] { background: var(--wi-error); }
.wi-state-indicator.state-reopened[b-w4v5rge0lz] { background: var(--wi-warning, #d29922); }

/* Filter pill dot colors (page-specific) */
[b-w4v5rge0lz] .cf-pill-dot.type-epic { background: var(--wi-purple); }
[b-w4v5rge0lz] .cf-pill-dot.type-feature { background: var(--wi-accent); }
[b-w4v5rge0lz] .cf-pill-dot.type-userstory { background: var(--wi-cyan); }
[b-w4v5rge0lz] .cf-pill-dot.type-task { background: var(--wi-text-muted); }
[b-w4v5rge0lz] .cf-pill-dot.type-bug { background: var(--wi-error); }
[b-w4v5rge0lz] .cf-pill-dot.type-issue { background: var(--wi-warning); }
[b-w4v5rge0lz] .cf-pill-dot.state-new { background: var(--wi-text-muted); }
[b-w4v5rge0lz] .cf-pill-dot.state-active { background: var(--wi-accent); }
[b-w4v5rge0lz] .cf-pill-dot.state-resolved { background: var(--wi-success); }
[b-w4v5rge0lz] .cf-pill-dot.state-closed { background: var(--wi-success); }
[b-w4v5rge0lz] .cf-pill-dot.state-removed { background: var(--wi-error); }
[b-w4v5rge0lz] .cf-pill-dot.state-reopened { background: var(--wi-warning, #d29922); }
[b-w4v5rge0lz] .cf-pill-dot.project { background: var(--wi-purple); }
[b-w4v5rge0lz] .cf-pill-dot.assignee { background: var(--wi-pink); }
[b-w4v5rge0lz] .cf-pill-dot.search { background: var(--wi-accent); }

/* ============================================
   TAB BAR
   ============================================ */
.wi-tabs[b-w4v5rge0lz] {
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}

.wi-tab[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: var(--wi-font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wi-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--wi-radius-lg) var(--wi-radius-lg) 0 0;
    cursor: pointer;
    transition: all var(--wi-transition);
}

.wi-tab:hover[b-w4v5rge0lz] {
    color: var(--wi-text);
    background: var(--wi-surface-hover);
}

.wi-tab.active[b-w4v5rge0lz] {
    color: var(--wi-text);
    font-weight: 600;
    background: var(--wi-surface);
    border-color: var(--wi-border);
}

.wi-tab-count[b-w4v5rge0lz] {
    font-family: var(--wi-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--wi-radius-full);
}

.wi-tab-count.active-count[b-w4v5rge0lz] {
    background: var(--wi-accent-muted);
    color: var(--wi-accent);
}

.wi-tab-count.completed-count[b-w4v5rge0lz] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--wi-success);
}

/* ============================================
   TABLE
   ============================================ */
.wi-table-container[b-w4v5rge0lz] {
    position: relative;
    z-index: 1;
    background: var(--wi-surface);
    border: 1px solid var(--wi-border);
    border-radius: var(--wi-radius-lg);
    overflow: hidden;
}

.wi-toolbar[b-w4v5rge0lz] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--wi-border);
}

.wi-toolbar-count[b-w4v5rge0lz] {
    font-family: var(--wi-font-display);
    font-size: 0.875rem;
    color: var(--wi-text-muted);
}

.wi-toolbar-count strong[b-w4v5rge0lz] {
    color: var(--wi-text);
    font-weight: 600;
}

/* ::deep targets child components (MudBlazor) through CSS isolation */
[b-w4v5rge0lz] .wi-table .mud-table-head th {
    background: var(--wi-surface) !important;
    font-family: var(--wi-font-display);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wi-text-muted) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--wi-border) !important;
}

[b-w4v5rge0lz] .wi-table .mud-table-body td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--wi-border) !important;
    font-family: var(--wi-font-display);
    font-size: 0.875rem;
    color: var(--wi-text);
    vertical-align: middle !important;
}

[b-w4v5rge0lz] .wi-table .mud-table-row:hover td {
    background: var(--wi-surface-elevated) !important;
}

[b-w4v5rge0lz] .wi-table .mud-table-pagination {
    background: var(--wi-surface) !important;
    border-top: 1px solid var(--wi-border) !important;
    color: var(--wi-text-muted) !important;
}

/* Table Cell Styles */
.wi-id[b-w4v5rge0lz] {
    font-family: var(--wi-font-mono);
    font-size: 0.8125rem;
    color: var(--wi-text-muted);
    text-decoration: none;
    transition: color var(--wi-transition);
}

.wi-id:hover[b-w4v5rge0lz] {
    color: var(--wi-accent);
}

.wi-title-cell[b-w4v5rge0lz] {
    max-width: 320px;
}

.wi-title[b-w4v5rge0lz] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.wi-badge[b-w4v5rge0lz] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--wi-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.wi-badge.type-epic[b-w4v5rge0lz] { background: rgba(163, 113, 247, 0.15); color: var(--wi-purple); }
.wi-badge.type-feature[b-w4v5rge0lz] { background: var(--wi-accent-muted); color: var(--wi-accent); }
.wi-badge.type-userstory[b-w4v5rge0lz] { background: rgba(57, 211, 83, 0.15); color: var(--wi-cyan); }
.wi-badge.type-task[b-w4v5rge0lz] { background: rgba(125, 133, 144, 0.15); color: var(--wi-text-muted); }
.wi-badge.type-bug[b-w4v5rge0lz] { background: rgba(248, 81, 73, 0.15); color: var(--wi-error); }
.wi-badge.type-issue[b-w4v5rge0lz] { background: rgba(210, 153, 34, 0.15); color: var(--wi-warning); }

.wi-badge.state-new[b-w4v5rge0lz] { background: rgba(125, 133, 144, 0.15); color: var(--wi-text-muted); }
.wi-badge.state-active[b-w4v5rge0lz] { background: var(--wi-accent-muted); color: var(--wi-accent); }
.wi-badge.state-resolved[b-w4v5rge0lz] { background: rgba(63, 185, 80, 0.15); color: var(--wi-success); }
.wi-badge.state-closed[b-w4v5rge0lz] { background: rgba(63, 185, 80, 0.15); color: var(--wi-success); }
.wi-badge.state-removed[b-w4v5rge0lz] { background: rgba(248, 81, 73, 0.15); color: var(--wi-error); }
.wi-badge.state-reopened[b-w4v5rge0lz] { background: rgba(210, 153, 34, 0.15); color: var(--wi-warning, #d29922); }

/* Action Needed badges */
.wi-badge.action-dev[b-w4v5rge0lz] { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.wi-badge.action-client[b-w4v5rge0lz] { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.wi-badge.action-qa[b-w4v5rge0lz] { background: rgba(251, 146, 60, 0.15); color: #fb923c; }

/* Action filter dots */
.wi-state-indicator.action-dev[b-w4v5rge0lz] { background: #60a5fa; }
.wi-state-indicator.action-client[b-w4v5rge0lz] { background: #a855f7; }
.wi-state-indicator.action-qa[b-w4v5rge0lz] { background: #fb923c; }
[b-w4v5rge0lz] .cf-pill-dot.action-dev { background: #60a5fa; }
[b-w4v5rge0lz] .cf-pill-dot.action-client { background: #a855f7; }
[b-w4v5rge0lz] .cf-pill-dot.action-qa { background: #fb923c; }

.wi-col-action[b-w4v5rge0lz] { width: 100px; }

.wi-priority[b-w4v5rge0lz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--wi-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}

.wi-priority.p1[b-w4v5rge0lz] { background: rgba(248, 81, 73, 0.15); color: var(--wi-error); }
.wi-priority.p2[b-w4v5rge0lz] { background: rgba(210, 153, 34, 0.15); color: var(--wi-warning); }
.wi-priority.p3[b-w4v5rge0lz] { background: var(--wi-accent-muted); color: var(--wi-accent); }
.wi-priority.p4[b-w4v5rge0lz] { background: rgba(125, 133, 144, 0.15); color: var(--wi-text-muted); }
.wi-priority.p0[b-w4v5rge0lz] { color: var(--wi-text-subtle); }

.wi-assignee[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wi-assignee-avatar-sm[b-w4v5rge0lz] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wi-purple) 0%, var(--wi-pink) 100%);
    border-radius: 50%;
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-on-primary);
}

.wi-unassigned[b-w4v5rge0lz] {
    color: var(--wi-text-subtle);
    font-style: italic;
}

.wi-project-link[b-w4v5rge0lz] {
    color: var(--wi-accent);
    text-decoration: none;
    transition: opacity var(--wi-transition);
}

.wi-project-link:hover[b-w4v5rge0lz] {
    opacity: 0.8;
    text-decoration: underline;
}

.wi-date[b-w4v5rge0lz] {
    color: var(--wi-text-muted);
    font-size: 0.8125rem;
}

.wi-date-overdue[b-w4v5rge0lz] {
    color: var(--status-error, #ef4444);
    font-weight: 600;
}

.wi-no-date[b-w4v5rge0lz] {
    color: var(--wi-text-muted);
    opacity: 0.5;
}

/* ── Journey Indicator ── */
.journey-indicator[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 100px;
}

.journey-dot[b-w4v5rge0lz] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    border: 2px solid transparent;
    cursor: default;
}

/* Connector line between dots */
.journey-dot + .journey-dot[b-w4v5rge0lz]::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: var(--border-primary, #e5e7eb);
}

/* Spacing for connector */
.journey-dot + .journey-dot[b-w4v5rge0lz] {
    margin-left: 16px;
}

/* State colors */
.journey-step-new[b-w4v5rge0lz] {
    background: var(--text-muted, #9ca3af);
    border-color: var(--text-muted, #9ca3af);
}

.journey-step-active[b-w4v5rge0lz] {
    background: var(--accent-primary, #3b82f6);
    border-color: var(--accent-primary, #3b82f6);
}

.journey-step-active + .journey-dot[b-w4v5rge0lz]::before,
.journey-step-active[b-w4v5rge0lz]::before {
    background: var(--accent-primary, #3b82f6) !important;
}

.journey-step-resolved[b-w4v5rge0lz] {
    background: var(--status-warning, #f59e0b);
    border-color: var(--status-warning, #f59e0b);
}

.journey-step-resolved + .journey-dot[b-w4v5rge0lz]::before,
.journey-step-resolved[b-w4v5rge0lz]::before {
    background: var(--status-warning, #f59e0b) !important;
}

.journey-step-closed[b-w4v5rge0lz] {
    background: var(--status-success, #10b981);
    border-color: var(--status-success, #10b981);
}

.journey-step-closed[b-w4v5rge0lz]::before {
    background: var(--status-success, #10b981) !important;
}

.wi-external-link[b-w4v5rge0lz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wi-radius-sm);
    color: var(--wi-text-muted);
    transition: all var(--wi-transition);
}

.wi-external-link:hover[b-w4v5rge0lz] {
    background: var(--wi-surface-hover);
    color: var(--wi-accent);
}

.wi-external-link svg[b-w4v5rge0lz] {
    width: 16px;
    height: 16px;
}

/* Empty State */
.wi-empty[b-w4v5rge0lz] {
    padding: 64px 24px;
    text-align: center;
}

.wi-empty-icon[b-w4v5rge0lz] {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wi-surface-elevated);
    border-radius: 50%;
    color: var(--wi-text-muted);
}

.wi-empty-icon svg[b-w4v5rge0lz] {
    width: 32px;
    height: 32px;
}

.wi-empty h3[b-w4v5rge0lz] {
    font-family: var(--wi-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wi-text);
    margin: 0 0 8px;
}

.wi-empty p[b-w4v5rge0lz] {
    font-size: 0.875rem;
    color: var(--wi-text-muted);
    margin: 0 0 20px;
}

/* Loading State */
.wi-loading[b-w4v5rge0lz] {
    padding: 64px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wi-loading-spinner[b-w4v5rge0lz] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--wi-border);
    border-top-color: var(--wi-accent);
    border-radius: 50%;
    animation: spin-b-w4v5rge0lz 0.8s linear infinite;
}

@keyframes spin-b-w4v5rge0lz {
    to { transform: rotate(360deg); }
}

.wi-loading span[b-w4v5rge0lz] {
    font-size: 0.875rem;
    color: var(--wi-text-muted);
}

/* ============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
    .wi-search-container[b-w4v5rge0lz] {
        flex: 1;
    }

    .wi-title-cell[b-w4v5rge0lz] {
        max-width: 200px;
    }
}

/* ============================================
   RESPONSIVE — SMALL TABLET (≤768px)
   ============================================ */
@media (max-width: 768px) {
    .wi-page[b-w4v5rge0lz] {
        padding: 16px;
    }

    .wi-header[b-w4v5rge0lz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .wi-header-actions[b-w4v5rge0lz] {
        width: 100%;
        justify-content: flex-start;
    }

    .wi-header-title h1[b-w4v5rge0lz] {
        font-size: 1.25rem;
    }

    .wi-btn-label[b-w4v5rge0lz] {
        display: none;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (≤640px)
   Card layout for table rows
   ============================================ */
@media (max-width: 640px) {
    .wi-page[b-w4v5rge0lz] {
        padding: 12px;
        padding-bottom: 80px;
    }

    .wi-ambient[b-w4v5rge0lz] {
        display: none;
    }

    .wi-logo[b-w4v5rge0lz] {
        width: 36px;
        height: 36px;
    }

    .wi-logo svg[b-w4v5rge0lz] {
        width: 18px;
        height: 18px;
    }

    .wi-header-badge[b-w4v5rge0lz] {
        font-size: 0.6875rem;
        padding: 3px 8px;
    }

    .wi-btn[b-w4v5rge0lz] {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }

    .wi-btn-ghost[b-w4v5rge0lz] {
        padding: 8px;
    }

    .wi-search-container[b-w4v5rge0lz] {
        flex: 1 1 100%;
    }

    /* Table container — remove border on mobile */
    .wi-table-container[b-w4v5rge0lz] {
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .wi-toolbar[b-w4v5rge0lz] {
        padding: 12px 4px;
        border-bottom: none;
    }

    .wi-toolbar-count[b-w4v5rge0lz] {
        font-size: 0.8125rem;
    }

    /* Hide table header on mobile */
    [b-w4v5rge0lz] .wi-table .mud-table-head {
        display: none !important;
    }

    /* Transform table body into card stack */
    [b-w4v5rge0lz] .wi-table .mud-table-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    [b-w4v5rge0lz] .wi-table .mud-table-body tr {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 4px 12px;
        padding: 12px;
        background: var(--wi-surface);
        border: 1px solid var(--wi-border);
        border-radius: var(--wi-radius-md);
        position: relative;
    }

    [b-w4v5rge0lz] .wi-table .mud-table-body tr:hover {
        background: var(--wi-surface) !important;
    }

    [b-w4v5rge0lz] .wi-table .mud-table-row td {
        padding: 0 !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    /* Show DataLabel as inline labels */
    [b-w4v5rge0lz] .wi-table .mud-table-row td::before {
        content: attr(data-label);
        display: none;
    }

    /* Checkbox — top left */
    [b-w4v5rge0lz] .wi-table td.wi-col-check {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        width: auto !important;
    }

    /* ID — next to checkbox */
    [b-w4v5rge0lz] .wi-table td.wi-col-id {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
    }

    /* External link — top right */
    [b-w4v5rge0lz] .wi-table td.wi-col-link {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto !important;
    }

    /* Title — full width second row */
    [b-w4v5rge0lz] .wi-table td[data-label="Title"] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .wi-title-cell[b-w4v5rge0lz] {
        max-width: none;
    }

    .wi-title[b-w4v5rge0lz] {
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.875rem;
        line-height: 1.4;
    }

    /* Badge row — type, state, priority, assignee, project, date */
    [b-w4v5rge0lz] .wi-table td.wi-col-type,
    [b-w4v5rge0lz] .wi-table td.wi-col-state,
    [b-w4v5rge0lz] .wi-table td.wi-col-priority,
    [b-w4v5rge0lz] .wi-table td.wi-col-assignee,
    [b-w4v5rge0lz] .wi-table td.wi-col-project,
    [b-w4v5rge0lz] .wi-table td.wi-col-target,
    [b-w4v5rge0lz] .wi-table td.wi-col-score,
    [b-w4v5rge0lz] .wi-table td.wi-col-journey,
    [b-w4v5rge0lz] .wi-table td.wi-col-changed {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* Third row — badges inline */
    [b-w4v5rge0lz] .wi-table td.wi-col-type,
    [b-w4v5rge0lz] .wi-table td.wi-col-state,
    [b-w4v5rge0lz] .wi-table td.wi-col-priority {
        display: inline-flex;
        grid-column: auto;
        grid-row: 3;
    }

    /* Fourth row — assignee, project, date */
    [b-w4v5rge0lz] .wi-table td.wi-col-assignee {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    [b-w4v5rge0lz] .wi-table td.wi-col-project {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    [b-w4v5rge0lz] .wi-table td.wi-col-target {
        grid-column: 1 / 2;
        grid-row: 6;
    }

    [b-w4v5rge0lz] .wi-table td.wi-col-journey {
        grid-column: 1 / -1;
        grid-row: 7;
    }

    [b-w4v5rge0lz] .wi-table td.wi-col-changed {
        grid-column: 2 / -1;
        grid-row: 6;
        text-align: right;
    }

    .wi-badge[b-w4v5rge0lz] {
        font-size: 0.6875rem;
        padding: 2px 8px;
    }

    .wi-priority[b-w4v5rge0lz] {
        width: 22px;
        height: 22px;
        font-size: 0.6875rem;
    }

    .wi-assignee-avatar-sm[b-w4v5rge0lz] {
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }

    .wi-assignee[b-w4v5rge0lz] {
        gap: 6px;
        font-size: 0.8125rem;
    }

    .wi-project-link[b-w4v5rge0lz] {
        font-size: 0.8125rem;
    }

    .wi-date[b-w4v5rge0lz] {
        font-size: 0.75rem;
    }

    .wi-id[b-w4v5rge0lz] {
        font-size: 0.75rem;
    }

    .wi-external-link[b-w4v5rge0lz] {
        width: 28px;
        height: 28px;
    }

    /* Pagination — compact */
    [b-w4v5rge0lz] .wi-table .mud-table-pagination {
        padding: 8px !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        font-size: 0.75rem;
    }

    [b-w4v5rge0lz] .wi-table .mud-table-pagination .mud-table-pagination-actions {
        margin-left: 0 !important;
    }

    /* Empty state — compact */
    .wi-empty[b-w4v5rge0lz] {
        padding: 40px 16px;
    }

    .wi-empty-icon[b-w4v5rge0lz] {
        width: 48px;
        height: 48px;
    }

    .wi-empty-icon svg[b-w4v5rge0lz] {
        width: 24px;
        height: 24px;
    }

    .wi-empty h3[b-w4v5rge0lz] {
        font-size: 1rem;
    }
}

/* ============================================
   TOUCH DEVICES
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .wi-btn[b-w4v5rge0lz] {
        min-height: 44px;
    }

    .wi-btn-ghost[b-w4v5rge0lz] {
        min-width: 44px;
        min-height: 44px;
    }

    .wi-external-link[b-w4v5rge0lz] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Disable hover effects for touch */
    [b-w4v5rge0lz] .wi-table .mud-table-row:hover td {
        background: transparent !important;
    }
}

/* ── Completeness Cell with Issues ── */
[b-w4v5rge0lz] .wi-completeness-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

[b-w4v5rge0lz] .wi-completeness-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 160px;
}

[b-w4v5rge0lz] .wi-issue-pill {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-w4v5rge0lz] .wi-issue-pill.error {
    color: var(--status-error);
    background: color-mix(in srgb, var(--status-error) 12%, transparent);
}

[b-w4v5rge0lz] .wi-issue-pill.warning {
    color: var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 12%, transparent);
}

[b-w4v5rge0lz] .wi-issue-pill.info {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}