/* ==========================================================
   LABOR DETAILS — Page-specific styles
   Aligned to Dashboard glass system (dashboard.css tokens)
   ID-based selectors that JS depends on are NOT touched.
   ========================================================== */

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

.lm-wrapper {
    /* Same token set as .labor-wrapper and .dashboard-wrapper */
    --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 ===================== */

.lm-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .875rem;
    border: 1px solid transparent;
}

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

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

/* ===================== HEADER — matches .lm-header pattern ===================== */

.lm-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: .75rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.lm-header-left {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.lm-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lm-title {
    margin: 0;
    font-weight: 650;
    font-size: 1.45rem;
    color: var(--text-main);
}

.lm-subtitle {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lm-subtitle-icon {
    font-size: 1rem;
}

.lm-subtitle-primary {
    font-weight: 500;
    color: #475569;
}

.lm-subtitle-sep {
    color: #cbd5e1;
}

.lm-subtitle-secondary {
    color: var(--text-muted);
}

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

.lm-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;
}

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

.btn-primary,
.lm-btn.lm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: var(--control-h);
    padding: 0 1.2rem;
    border-radius: var(--r-control);
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    font-weight: 560;
    font-size: .85rem;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    box-shadow: 0 12px 26px rgba(37,99,235,.28);
}

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

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

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

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

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    padding: 0;
    font-size: .875rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--t-fast);
}

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

/* ===================== KPI STRIP — mirrors .metrics-strip / .metric-card ===================== */

.kpi-strip {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 1.1rem;
}

.kpi-row {
    display: grid;
    gap: .9rem;
}

/* Primary row: 4 cards */
.kpi-row-primary {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

/* Secondary row: up to 4 cards (missing weeks shown conditionally) */
.kpi-row-secondary {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.kpi-card {
    position: relative;
    display: flex;
    gap: .75rem;
    padding: .6rem .8rem;
    border-radius: var(--r-card);
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.72));
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

    .kpi-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 60%);
        transition: opacity var(--t-fast);
        pointer-events: none;
    }

    .kpi-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 38px rgba(15,23,42,.11);
        border-color: rgba(37,99,235,.50);
    }

        .kpi-card:hover::before {
            opacity: 1;
        }

    /* Secondary cards — cooler tint, matching .metric-card.secondary */
    .kpi-card.secondary {
        background: linear-gradient(135deg, rgba(248,250,252,.90), rgba(239,246,255,.72));
    }

.kpi-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(15,23,42,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
}

    .kpi-icon svg {
        width: 18px;
        height: 18px;
        color: #64748b;
    }

.kpi-icon-ring {
    stroke: #cbd5e1;
}

.kpi-icon-muted {
    stroke: #cbd5e1;
}

.kpi-content {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

    /* h4 inside kpi-content — matches .metric-info h4 */
    .kpi-content h4 {
        margin: 0;
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .10em;
        color: var(--text-muted);
        font-weight: 650;
    }

.kpi-value {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.kpi-meta {
    margin: 0;
    font-size: .72rem;
    color: var(--text-muted);
}

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

.lm-table-wrapper {
    margin-top: 1.25rem;
    background: rgba(249,250,251,.70);
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.32);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

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

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

    .lm-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);
    }

    .lm-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;
        position: relative;
        user-select: none;
    }

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

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

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

        .lm-table tbody tr:hover {
            background: rgba(224,236,255,.85) !important;
        }

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

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

/* Row state overrides */
.lm-row-locked {
    background: rgba(248,249,250,.85) !important;
    opacity: .7;
}

.lm-row-current {
    background: rgba(236,253,243,.85) !important;
    border-left: 3px solid var(--positive);
}

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

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--text-muted);
}

.text-danger {
    color: var(--negative);
}

/* ===================== STATUS BADGES ===================== */

.lm-badge {
    display: inline-flex;
    align-items: center;
    padding: .14rem .5rem;
    border-radius: var(--r-pill);
    font-size: .75rem;
    font-weight: 560;
    border: 1px solid;
    white-space: nowrap;
}

    /* Matches Dashboard pill semantic colors */
    .status-current,
    .lm-badge.status-current {
        background: #ecfdf3;
        color: #166534;
        border-color: #bbf7d0;
    }

/* ===================== 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;
}

/* ===================== ICON BUTTONS ===================== */

.lm-btn-icon {
    background: none;
    border: none;
    padding: .375rem;
    cursor: pointer;
    font-size: 1.125rem;
    transition: transform var(--t-fast);
}

    .lm-btn-icon:hover {
        transform: scale(1.2);
    }

/* ===================== LABOR AMOUNT HIGHLIGHT ===================== */

@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;
    }

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

.lm-empty {
    margin-top: 3rem;
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(249,250,251,.70);
    border-radius: 10px;
    border: 2px dashed rgba(148,163,184,.35);
}

.lm-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: .5;
}

.lm-empty h3 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    color: var(--text-main);
}

.lm-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

/* ===================== MODALS ===================== */

.lm-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
}

    .lm-modal.show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.lm-modal-dialog {
    background: var(--surface);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: modalSlideIn .3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.lm-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 650;
    color: var(--text-main);
}

.lm-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all var(--t-fast);
}

    .lm-modal-close:hover {
        background: var(--surface-subtle);
        color: var(--text-main);
    }

.lm-modal-body {
    padding: 1.5rem;
}

.lm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* ===================== MISSING WEEKS MODAL CONTENT ===================== */

.missing-weeks-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.missing-week-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
}

.missing-week-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.missing-week-details {
    flex: 1;
}

    .missing-week-details strong {
        display: block;
        color: #856404;
        margin-bottom: .25rem;
    }

    .missing-week-details p {
        color: #856404;
        margin: 0;
        font-size: .9375rem;
    }

/* ===================== FORM ELEMENTS (used by JS-injected modal content) ===================== */

/*
   IMPORTANT: These classes are injected by labor-details.js inside openCreateModal()
   and openEditModal(). Do NOT rename them.
*/

.lm-label {
    display: block;
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4b5563;
    margin-bottom: .35rem;
    margin-top: .85rem;
}

    .lm-label:first-child {
        margin-top: 0;
    }

.lm-input,
.lm-textarea {
    width: 100%;
    padding: .625rem .875rem;
    border: 1px solid var(--glass-stroke-strong);
    border-radius: var(--r-control);
    font-size: .9375rem;
    transition: all var(--t-fast);
    font-family: inherit;
    background: rgba(255,255,255,.90);
}

    .lm-input:focus,
    .lm-textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,.10);
    }

.lm-textarea {
    resize: vertical;
    min-height: 80px;
}

.lm-hint {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--text-muted);
}

/* fm-field-group: JS injects this as a wrapper inside modal body */
.fm-field-group {
    display: flex;
    flex-direction: column;
}

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

/* Wide viewport: collapse all 7 cards (4 primary + 3 secondary) into one row
   matching Dashboard's @media (min-width: 1536px) behavior */
@media (min-width: 1536px) {
    .kpi-strip {
        display: grid;
        grid-template-columns: repeat(7, minmax(160px, 1fr));
        gap: .9rem;
    }

    .kpi-row-primary,
    .kpi-row-secondary {
        display: contents;
    }
}

@media (max-width: 1200px) {
    .kpi-row-primary {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .kpi-row-secondary {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 900px) {
    .lm-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-row-primary,
    .kpi-row-secondary {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .lm-table-wrapper {
        overflow-x: auto;
    }

    .lm-table {
        min-width: 800px;
    }

    .lm-modal-body,
    .lm-modal-header,
    .lm-modal-footer {
        padding: 1rem;
    }
}

@media (max-width: 640px) {
    .kpi-row-primary,
    .kpi-row-secondary {
        grid-template-columns: 1fr;
    }

    .lm-table th,
    .lm-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,
.btn-link:focus-visible,
.lm-btn-icon:focus-visible,
.lm-input:focus-visible,
.lm-textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}