/* ==========================================================
   LABOR RECORDS — Index page styles
   Aligned to Dashboard glass system (dashboard.css tokens)
   ========================================================== */

/* ===================== WRAPPER ===================== */

.labor-wrapper {
    /* Token mirror from .dashboard-wrapper — keeps pages consistent */
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-subtle: #f9fafb;
    --border-subtle: #e5e7eb;
    --border-strong: #d1d5db;
    --text-main: #0f172a;
    --text-muted: #6b7280;
    --accent: #2563eb;
    --accent-soft: #dbeafe;
    --accent-strong: #1d4ed8;
    --positive: #16a34a;
    --negative: #dc2626;
    --glass: rgba(255,255,255,.78);
    --glass-strong: rgba(255,255,255,.90);
    --glass-stroke: rgba(148,163,184,.28);
    --glass-stroke-strong: rgba(148,163,184,.45);
    --shadow-soft: 0 14px 40px rgba(15,23,42,.08);
    --shadow-glass: 0 16px 44px rgba(15,23,42,.10);
    --r-card: 14px;
    --r-pill: 999px;
    --r-control: 14px;
    --t-fast: .18s ease-out;
    --control-h: 42px;
    --control-pad-x: .70rem;
    min-height: 100vh;
    padding: 0 .55rem 2rem;
    background-color: transparent;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-main);
    box-sizing: border-box;
}

/* ===================== ALERTS ===================== */

.panel-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .875rem;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.panel-alert-success {
    background: #ecfdf3;
    color: #166534;
    border-color: #bbf7d0;
}

.panel-alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* ===================== EMPTY STATE ===================== */

.labor-empty,
.panel-section.panel-text-center > div {
    padding: 3rem 2rem;
    text-align: center;
}

/* ===================== FILTER PANEL — matches .filter-section ===================== */

/*
   .filter-panel already exists in dashboard.css as a flat transparent wrapper.
   For Labor Index we override it to be a glass card, matching .filter-section
   from the Dashboard. We scope it inside .labor-wrapper to avoid conflict.
*/
.labor-wrapper .filter-panel {
    margin: 1rem 0;
    padding: .55rem .95rem .55rem;
    border-radius: 16px;
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,.82));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===================== EXECUTIVE SUMMARY STRIP — matches .exec-section-meta ===================== */

/*
   Moves the summary metrics OUT of the filter form visually
   and renders them as Dashboard-style legend pills.
*/
.exec-summary-meta.for-labor {
    padding: .75rem .10rem .5rem;
    border-top: 1px solid var(--glass-stroke);
    margin-top: .65rem;
}

    .exec-summary-meta.for-labor .budget-health-mini {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        flex-wrap: wrap;
    }

/* ===================== LABOR BUTTONS — unified with dashboard-btn ===================== */

.labor-btn {
    height: var(--control-h);
    padding: 0 1.05rem;
    border-radius: var(--r-control);
    font-weight: 560;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

    .labor-btn.primary {
        background: linear-gradient(135deg, var(--accent), var(--accent-strong));
        color: #f9fafb;
        box-shadow: 0 12px 26px rgba(37,99,235,.28);
    }

        .labor-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 34px rgba(37,99,235,.34);
        }

    .labor-btn.secondary {
        background: rgba(255,255,255,.70);
        border-color: var(--glass-stroke-strong);
        color: var(--text-muted);
    }

        .labor-btn.secondary:hover {
            background: rgba(255,255,255,.92);
            color: var(--text-main);
        }

/* ===================== TABLE WRAPPER ===================== */

.labor-table-wrapper,
.panel-section > div[style*="overflow-x"] {
    background: rgba(249,250,251,.70);
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.32) !important;
}

/* ===================== TABLE ===================== */

.labor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .labor-table thead {
        background: linear-gradient(to bottom, rgba(15,23,42,.05), rgba(15,23,42,.02));
        position: sticky;
        top: 0;
        z-index: 10;
        backdrop-filter: blur(10px);
    }

    .labor-table th {
        padding: 8px 10px;
        font-weight: 650;
        text-align: left;
        font-size: .78rem;
        color: #4b5563;
        border-bottom: 1px solid rgba(148,163,184,.55);
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: .10em;
    }

    .labor-table tbody tr {
        border-bottom: 1px solid rgba(209,213,219,.65);
        transition: background-color var(--t-fast);
    }

        .labor-table tbody tr:nth-child(odd) {
            background: rgba(255,255,255,.92);
        }

        .labor-table tbody tr:nth-child(even) {
            background: rgba(246,247,251,.75);
        }

.labor-row {
    cursor: pointer;
}

    .labor-row:hover {
        background: rgba(224,236,255,.85) !important;
    }

.labor-table td {
    padding: 8px 10px;
    color: #111827;
    font-size: .9rem;
    border-bottom: 1px solid rgba(209,213,219,.65);
}

.labor-table tbody tr:last-child td {
    border-bottom-color: transparent;
}

/* ===================== STATUS PILLS — matches Dashboard .metric-var pattern ===================== */

/*
   Dashboard uses .metric-var.pos / .neg for variance pills.
   Labor Index uses .pill with modifier classes.
   We align the colors to the same semantic values.
*/
.pill {
    display: inline-flex;
    align-items: center;
    padding: .14rem .5rem;
    border-radius: var(--r-pill);
    font-size: .75rem;
    font-weight: 560;
    align-self: flex-start;
}

.pill-success {
    background: #ecfdf3;
    color: #166534;
}

.pill-warning {
    background: #fef3c7;
    color: #92400e;
}

.pill-danger {
    background: #fef2f2;
    color: #b91c1c;
}

/* ===================== HIGH / LOW ANIMATIONS ===================== */

@keyframes pulse-high {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(255,107,107,.3);
    }

    50% {
        box-shadow: 0 4px 16px rgba(255,107,107,.5);
    }
}

@keyframes pulse-low {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(78,205,196,.3);
    }

    50% {
        box-shadow: 0 4px 16px rgba(78,205,196,.5);
    }
}

.labor-amount {
    font-weight: 600;
    padding: .375rem .75rem;
    border-radius: 6px;
    display: inline-block;
    transition: all .3s ease;
    font-variant-numeric: tabular-nums;
}

    .labor-amount.labor-high {
        background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(255,107,107,.3);
        animation: pulse-high 2s ease-in-out infinite;
    }

    .labor-amount.labor-low {
        background: linear-gradient(135deg, #4ecdc4, #44a08d);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(78,205,196,.3);
        animation: pulse-low 2s ease-in-out infinite;
    }

/* ===================== SORT BUTTONS ===================== */

.sort-btn {
    background: none;
    border: none;
    padding: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .375rem;
    font-weight: 650;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: #4b5563;
    transition: color var(--t-fast);
    width: 100%;
    text-align: left;
}

    .sort-btn:hover {
        color: var(--accent);
    }

    .sort-btn.active {
        color: var(--accent);
    }

.sort-icon {
    font-size: .875rem;
    opacity: .5;
}

.sort-btn.active .sort-icon {
    opacity: 1;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 900px) {
    .labor-wrapper .filter-panel {
        padding: .75rem .65rem .9rem;
    }
}

@media (max-width: 640px) {
    .labor-table th,
    .labor-table td {
        padding: .5rem .75rem;
    }
}

/* ===================== ACCESSIBILITY ===================== */

@media (prefers-reduced-motion: reduce) {
    .labor-amount.labor-high,
    .labor-amount.labor-low {
        animation: none;
    }

    * {
        transition: none !important;
        animation: none !important;
    }
}

.sort-btn:focus-visible,
.labor-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}