/**
 * ResponseReady - Dashboard Components
 * =====================================
 * 
 * Shared styles for dashboard pages across pngpDashboard and bmshDashboard.
 * These components complement the base design system (tokens.css, components.css).
 * 
 * Import this file in main.css after the core design system:
 * @import url('dashboard.css');
 * 
 * Table of Contents:
 * 1. Dashboard Container
 * 2. Page Header Admin
 * 3. Dashboard Cards
 * 4. Stats Grid
 * 5. Dashboard Grid Layouts
 * 6. Action Grid & Cards
 * 7. Metric Display
 * 8. Week Cards
 * 9. Status List
 * 10. Empty State
 * 11. Activity List
 * 12. Resource Cards
 * 13. Tab System
 * 14. Responsive Breakpoints
 * 
 * @version 1.0.0
 */


/* ==========================================================================
   1. DASHBOARD CONTAINER
   Full-bleed background container for dashboard pages
   ========================================================================== */

.dashboard-container {
    background: var(--surface-secondary);
    min-height: calc(100vh - 200px);
    margin: calc(-1 * var(--space-8));
    padding: var(--space-8);
}


/* ==========================================================================
   2. PAGE HEADER ADMIN
   Dashboard page header with title, breadcrumb, and actions
   ========================================================================== */

.page-header-admin {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.page-header-info {
    flex: 1;
    min-width: 200px;
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--leading-tight);
}

.page-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Dashboard Breadcrumb */
.page-header-admin .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

.page-header-admin .breadcrumb a {
    color: var(--color-neutral-500);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
}

.page-header-admin .breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-separator {
    color: var(--color-neutral-300);
}

/* Dashboard Section Title */
.dashboard-section {
    margin-bottom: var(--space-8);
}

.section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-4);
    padding-left: var(--space-3);
    border-left: 4px solid var(--color-primary-600);
}


/* ==========================================================================
   3. DASHBOARD CARDS
   Base card with hover effect and icon headers
   ========================================================================== */

.dashboard-card {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--duration-normal) var(--ease-default),
                transform var(--duration-normal) var(--ease-default);
    display: flex;
    flex-direction: column;
}

.dashboard-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Card Icon Header */
.card-icon-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.card-header-content {
    flex: 1;
    min-width: 0;
}

.card-header-content h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
    line-height: var(--leading-tight);
}

/* Icon Wrapper */
.icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon Color Variants */
.icon-danger {
    background: var(--color-error);
    color: var(--surface-primary);
}

.icon-warning {
    background: var(--color-warning);
    color: var(--surface-primary);
}

.icon-success {
    background: var(--color-success);
    color: var(--surface-primary);
}

.icon-info {
    background: var(--color-info);
    color: var(--surface-primary);
}

.icon-primary {
    background: var(--color-primary);
    color: var(--surface-primary);
}

/* Card Badge */
.card-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    margin-top: var(--space-2);
}

.badge-critical {
    background: var(--color-error-light);
    color: var(--color-error);
    animation: pulse-badge 2s infinite;
}

.badge-normal {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.badge-info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.badge-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

@keyframes pulse-badge {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* Card Action Link */
.card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    color: var(--color-primary-600);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default),
                gap var(--duration-normal) var(--ease-default);
    border-top: 1px solid var(--color-neutral-200);
}

.card-action:hover {
    color: var(--color-primary-700);
    gap: var(--space-3);
    text-decoration: none;
}


/* ==========================================================================
   4. STATS GRID
   4-column responsive grid for KPI cards
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (max-width: 640px) {
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    
    .stats-grid .stat-card {
        padding: var(--space-3);
        min-width: 0;
    }

    .stats-grid .stat-card .stat-value {
        font-size: var(--text-xl);
    }

    .stats-grid .stat-card .stat-label {
        font-size: 0.65rem;
    }
}

.stat-card {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow var(--duration-normal) var(--ease-default),
                transform var(--duration-normal) var(--ease-default);
}

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

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.stat-card .stat-value {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--color-neutral-900);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-card .stat-label {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   5. DASHBOARD GRID LAYOUTS
   Two-column layout variations for main content
   ========================================================================== */

.dashboard-grid {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

/* Alert cards - larger minimum width */
.dashboard-grid-alerts {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* Resource cards - medium minimum width */
.dashboard-grid-resources {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Status overview cards */
.dashboard-grid-status {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* Equal two-column layout */
.dashboard-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Wide + narrow layout */
.dashboard-grid-wide-narrow {
    grid-template-columns: 2fr 1fr;
}


/* ==========================================================================
   6. ACTION GRID & CARDS
   Quick action buttons
   ========================================================================== */

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/* Dashboard quick-links widget only (other .action-grid pages, e.g. the
   strike-team admin page, keep the rules above/below): auto-FILL keeps empty
   tracks, so a short admin-configured card list renders normal-width cards
   instead of ballooning one card across the whole row. >640 only — at phone
   widths the shared 2-col rule below must win. */
@media (min-width: 641px) {
    .dashboard-widget .action-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Alternative: horizontal flex action grid */
.action-grid-horizontal {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: nowrap;
    overflow-x: auto;
}

.action-card {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    text-decoration: none;
    color: var(--color-neutral-700);
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    border: 2px solid transparent;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--color-primary-600);
    text-decoration: none;
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-600);
    color: var(--surface-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-normal) var(--ease-default);
}

.action-card:hover .action-icon {
    transform: scale(1.1);
}

.action-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* Action Card Variants */
.action-card.action-create {
    border-color: var(--color-success);
}

.action-card.action-create:hover {
    background: var(--color-success-light);
}

.action-card.action-create .action-icon {
    background: var(--color-success);
}

.action-card.action-remind {
    border-color: var(--color-info);
}

.action-card.action-remind:hover {
    background: var(--color-info-light);
}

.action-card.action-remind .action-icon {
    background: var(--color-info);
}

.action-card.action-export {
    border-color: var(--color-warning);
}

.action-card.action-export:hover {
    background: var(--color-warning-light);
}

.action-card.action-export .action-icon {
    background: var(--color-warning);
}

.action-card.action-history {
    border-color: var(--color-primary-400);
}

.action-card.action-history:hover {
    background: var(--color-primary-light);
}

.action-card.action-history .action-icon {
    background: var(--color-primary);
}

/* Action card with description */
.action-content {
    flex: 1;
    min-width: 0;
    text-align: left;
    align-self: stretch;
}

.action-title {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-1);
}

.action-description {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

/* Mobile: compact action cards in a 2-col grid so the dashboard's actual
   content sits closer to the top of the viewport. At very narrow widths
   the description text wraps cramped, so hide it under 380px. */
@media (max-width: 640px) {
    .action-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    .action-card {
        padding: var(--space-3);
        gap: var(--space-2);
        flex-direction: row;
        align-items: center;
        text-align: left;
    }
    .action-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    .action-icon svg {
        width: 18px;
        height: 18px;
    }
    .action-title {
        font-size: var(--text-sm);
        margin-bottom: 0;
    }
}
@media (max-width: 380px) {
    .action-description {
        display: none;
    }
}


/* ==========================================================================
   7. METRIC DISPLAY
   For FDR, FBI, weather metrics
   ========================================================================== */

.metric-primary {
    text-align: center;
    padding: var(--space-4) 0;
}

.metric-value {
    display: block;
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-neutral-900);
    line-height: 1;
}

.metric-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-top: var(--space-2);
}

/* Smaller metric values */
.metric-sm-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-700);
}

.metric-sm-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin-top: var(--space-1);
}

/* Metric Grid */
.metric-grid {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-200);
    margin-top: var(--space-4);
}

.metric-item {
    text-align: center;
}

/* Secondary Metrics */
.metric-secondary {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-200);
}

/* Metric None State */
.metric-none {
    color: var(--color-neutral-500);
    font-style: italic;
    font-weight: var(--font-normal);
}


/* ==========================================================================
   8. WEEK CARDS
   For availability scheduling
   ========================================================================== */

.weeks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-6);
}

.week-card {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.week-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.week-card.week-current {
    border: 2px solid var(--color-primary-600);
    background: var(--color-primary-50);
}

.week-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.week-dates {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.week-range {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
}

.week-status {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.status-active {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-expired {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.badge-current {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-600);
    color: var(--surface-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.week-stats {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.week-stat {
    text-align: center;
}

.week-stat-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-700);
}

.week-stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.week-actions {
    display: flex;
    gap: var(--space-2);
}

.week-action-btn {
    flex: 1;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.week-action-btn.action-primary {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.week-action-btn.action-primary:hover {
    background: var(--color-info);
    color: var(--surface-primary);
}

.week-action-btn.action-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.week-action-btn.action-success:hover {
    background: var(--color-success);
    color: var(--surface-primary);
}

.week-action-btn.action-secondary {
    background: var(--surface-secondary);
    color: var(--color-neutral-500);
}

.week-action-btn.action-secondary:hover {
    background: var(--color-neutral-500);
    color: var(--surface-primary);
}


/* ==========================================================================
   9. STATUS LIST
   For system status display
   ========================================================================== */

.status-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-default);
}

.status-item:hover {
    background: var(--color-neutral-100);
}

.status-item .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.status-item .status-indicator.online {
    background: var(--color-success);
}

.status-item .status-indicator.offline {
    background: var(--color-error);
}

.status-item .status-indicator.warning {
    background: var(--color-warning);
}

.status-item .status-name {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-neutral-700);
}

.status-item .status-value {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}


/* ==========================================================================
   10. EMPTY STATE
   For no-data displays
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.empty-state-icon,
.empty-state svg {
    color: var(--color-neutral-300);
    margin-bottom: var(--space-4);
}

.empty-state h3,
.empty-state-text {
    color: var(--color-neutral-700);
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--color-neutral-500);
    margin: 0;
    font-style: italic;
}


/* ==========================================================================
   11. ACTIVITY LIST
   For recent activity
   ========================================================================== */

.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-neutral-200);
    transition: background var(--duration-fast) var(--ease-default);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background: var(--surface-secondary);
}

.activity-indicator {
    width: 12px;
    height: 12px;
    background: var(--color-primary-600);
    border-radius: var(--radius-full);
    margin-top: var(--space-1);
    flex-shrink: 0;
}

.activity-indicator.success {
    background: var(--color-success);
}

.activity-indicator.warning {
    background: var(--color-warning);
}

.activity-indicator.error {
    background: var(--color-error);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-1);
}

.activity-time {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.activity-detail {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
}

/* Empty Activity State */
.empty-activity {
    text-align: center;
    padding: var(--space-12);
    color: var(--color-neutral-500);
}

.empty-activity svg {
    color: var(--color-neutral-300);
    margin-bottom: var(--space-4);
}

.empty-activity p {
    margin: 0;
    font-style: italic;
}


/* ==========================================================================
   12. RESOURCE CARDS
   Generic resource/equipment stat cards.
   ========================================================================== */

.resource-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.resource-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
}

.resource-metrics {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}


.stat-row {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    max-width: 100px;
}

.stat-item.stat-success {
    background: var(--color-success-light);
}

.stat-item.stat-warning {
    background: var(--color-warning-light);
}

.stat-item.stat-danger {
    background: var(--color-error-light);
}

.stat-item.stat-info {
    background: var(--color-info-light);
}

.stat-item.stat-muted {
    background: var(--color-neutral-100);
}

.stat-item .stat-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.stat-item.stat-success .stat-value {
    color: var(--color-success);
}

.stat-item.stat-warning .stat-value {
    color: var(--color-warning);
}

.stat-item.stat-danger .stat-value {
    color: var(--color-error);
}

.stat-item.stat-info .stat-value {
    color: var(--color-info);
}

.stat-item.stat-muted .stat-value {
    color: var(--color-neutral-600);
}

.stat-item .stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   13. TAB SYSTEM
   Tab navigation for dashboard sections
   ========================================================================== */

.tab-group {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: var(--space-6);
    overflow-x: auto;
}

.tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-neutral-600);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
    white-space: nowrap;
}

.tab:hover {
    color: var(--color-neutral-900);
}

.tab.active,
.tab[aria-selected="true"] {
    color: var(--color-primary-600);
    border-bottom-color: var(--color-primary-600);
}

.tab:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.tab-content {
    display: none;
}

.tab-content.active,
.tab-content[aria-hidden="false"] {
    display: block;
}


/* ==========================================================================
   14. RESPONSIVE BREAKPOINTS
   Mobile-first responsive adjustments
   ========================================================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .dashboard-container {
        margin: calc(-1 * var(--space-4));
        padding: var(--space-4);
    }

    .dashboard-card {
        padding: var(--space-4);
    }

    .page-header-admin {
        margin-bottom: var(--space-6);
    }

    .page-title {
        font-size: var(--text-2xl);
    }

    .dashboard-grid-alerts,
    .dashboard-grid-resources,
    .dashboard-grid-status,
    .dashboard-grid-2col,
    .dashboard-grid-wide-narrow {
        grid-template-columns: 1fr;
    }

    /* .action-grid columns are tuned via the ≤640px and ≤380px @media blocks
       up at the action-grid section. Don't override here — the previous
       `grid-template-columns: 1fr` collapsed the quick-link grid to a single
       column on mobile (4 cards stacked vertically, pushing real content
       way below the fold). */

    .action-grid-horizontal {
        flex-wrap: wrap;
    }

    .metric-grid,
    .metric-secondary {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .weeks-grid {
        grid-template-columns: 1fr;
    }

    .week-stats {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .week-actions {
        flex-direction: column;
    }

    .stat-row {
        flex-wrap: wrap;
    }

    .tab-group {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        flex-shrink: 0;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .dashboard-container {
        margin: calc(-1 * var(--space-2));
        padding: var(--space-2);
    }

    .dashboard-card {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }

    .card-icon-header {
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .card-header-content h3 {
        font-size: var(--text-base);
    }

    .page-title {
        font-size: var(--text-xl);
    }

    .section-title {
        font-size: var(--text-lg);
        padding-left: var(--space-2);
    }

    .stat-card {
        padding: var(--space-3);
    }

    .stat-card .stat-value {
        font-size: var(--text-2xl);
    }

    .stat-card .stat-label {
        font-size: var(--text-xs);
    }
}

/* Desktop (1025px and above) — aligns with dashboard-shell.css's min-width:1025px
   so the inner grids and the shell layout switch tiers at the same boundary. */
@media (min-width: 1025px) {
    .dashboard-container {
        padding: var(--space-10);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Non-dashboard action grids (e.g. the strike-team admin page) keep their
       legacy fixed 4-col desktop layout; the dashboard quick-links widget is
       overridden by the more specific .dashboard-widget rule in the
       action-grid section above. */
    .action-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .dashboard-grid-2col {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid-wide-narrow {
        grid-template-columns: 2fr 1fr;
    }
}


/* ==========================================================================
   UTILITY CLASSES
   Dashboard-specific utilities
   ========================================================================== */

/* No data display */
.no-data {
    text-align: center;
    color: var(--color-neutral-500);
    font-style: italic;
    padding: var(--space-8);
}

/* Week/Date info display */
.week-info {
    text-align: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-neutral-200);
    margin-top: var(--space-3);
}

.week-label {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    font-weight: var(--font-medium);
}

/* Highlight list */
.highlight-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlight-list li {
    padding: var(--space-2) 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-primary-600);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--progress-color, var(--color-primary-600));
    border-radius: var(--radius-sm);
    transition: width var(--duration-normal) var(--ease-default);
}

/* Status Headline */
.status-headline {
    font-size: var(--text-base);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

/* Unit Breakdown */
.unit-breakdown {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-2);
}

.unit-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.unit-su {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.unit-bf {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Breakdown Stats */
.breakdown-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.breakdown-total {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
}

.breakdown-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-neutral-200);
}

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

.breakdown-label {
    color: var(--color-neutral-500);
    font-size: var(--text-sm);
}

.breakdown-value {
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
}

/* Event Types */
.event-types {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-200);
}

.event-types h4 {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-type-badge {
    background: var(--surface-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-neutral-700);
}

/* Activity Card Variant */
.card-activity {
    padding: 0;
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   Brigade-admin shared layout primitives.
   Previously these were re-declared inline in every brigade-admin page (each
   settings page redefined .page-header/.page-title, every management page its
   own .brigade-container). Centralised here so all brigade-admin pages — and in
   particular every feature Settings page — share one consistent container,
   header and form-actions row. A page may still override .brigade-container's
   max-width inline (later source order wins).
   ────────────────────────────────────────────────────────────────────────── */
.brigade-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
}

/* Standard page header used above a card on settings/management pages: a title
   on the left, optional action button(s) on the right. */
.brigade-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.brigade-page-header .page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

/* Actions area inside the standard page header (components/page-header-open).
   Empty on pages without header actions — flex with no children renders to
   nothing. */
.page-header-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

/* Right-aligned actions row at the foot of a settings form. */
.form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-default);
}

/* Keep the actions row on-screen on long forms so Save is always reachable
   without scrolling to the bottom. Self-contained (sets its own background /
   border / padding) so it can also dress a plain action row, e.g. the roles
   matrix's Save row. Sits inside a card-body, so --surface-primary blends with
   the card while covering fields that scroll under it. */
.form-actions--sticky {
    position: sticky;
    bottom: 0;
    background: var(--surface-primary);
    border-top: 1px solid var(--border-default);
    margin-top: var(--space-4);
    padding: var(--space-4);
    z-index: 10;
}

@media (max-width: 640px) {
    .brigade-container { padding: var(--space-4); }
    .form-actions { justify-content: stretch; }
    /* Don't fight the fixed bottom tab bar on phones — fall back to inline. */
    .form-actions--sticky { position: static; padding: var(--space-4) 0; }
}