/* Productie IO dashboard — bovenop hours-dashboard.css
   Gebruikt CSS variabelen zodat dark/light mode via [data-bs-theme] werkt.
   Hours-dashboard.css blijft hardgecodeerd lichte stijl; we overrulen dat hier
   binnen .pio-dashboard zodat alleen dit dashboard dark mode pakt. */

:root,
[data-bs-theme="light"] {
    --pio-bg: #F5F7FA;
    --pio-card-bg: #FFFFFF;
    --pio-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --pio-text: #111827;
    --pio-text-muted: #6B7280;
    --pio-text-title: #374151;
    --pio-border: #E5E7EB;
    --pio-border-light: #F3F4F6;
    --pio-row-hover: #F9FAFB;
    --pio-th-bg: #F9FAFB;
    --pio-day-total-bg: #EFF6FF;
    --pio-day-total-text: #1E3A8A;
    --pio-day-total-border: #DBEAFE;
    --pio-grand-total-bg: #1E3A8A;
    --pio-grand-total-text: #FFFFFF;
    --pio-clear-bg: #F3F4F6;
    --pio-clear-bg-hover: #E5E7EB;
    --pio-clear-text: #6B7280;
    --pio-clear-text-hover: #111827;
    --pio-kpi-icon-clock-bg: #EFF6FF;
    --pio-kpi-icon-users-bg: #ECFDF5;
    --pio-kpi-icon-average-bg: #FFF7ED;
    --pio-kpi-icon-pause-bg: #F3F4F6;
}

[data-bs-theme="dark"] {
    --pio-bg: #1A1D24;
    --pio-card-bg: #242832;
    --pio-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    --pio-text: #F3F4F6;
    --pio-text-muted: #9CA3AF;
    --pio-text-title: #D1D5DB;
    --pio-border: #374151;
    --pio-border-light: #2D323D;
    --pio-row-hover: #2D323D;
    --pio-th-bg: #2D323D;
    --pio-day-total-bg: #1E2A3F;
    --pio-day-total-text: #93C5FD;
    --pio-day-total-border: #2D3F5C;
    --pio-grand-total-bg: #1E40AF;
    --pio-grand-total-text: #FFFFFF;
    --pio-clear-bg: #2D323D;
    --pio-clear-bg-hover: #374151;
    --pio-clear-text: #9CA3AF;
    --pio-clear-text-hover: #F3F4F6;
    --pio-kpi-icon-clock-bg: #1E2A3F;
    --pio-kpi-icon-users-bg: #15302A;
    --pio-kpi-icon-average-bg: #3A2A18;
    --pio-kpi-icon-pause-bg: #2D323D;
}

/* Root dashboard styling (overrides hours-dashboard.css voor pio scope) */
.pio-dashboard.hours-dashboard {
    background: var(--pio-bg);
}

.pio-dashboard .hd-card {
    background: var(--pio-card-bg);
    box-shadow: var(--pio-card-shadow);
}

.pio-dashboard .hd-card-title {
    color: var(--pio-text-title);
}

.pio-dashboard .hd-kpi-title {
    color: var(--pio-text-muted);
}

.pio-dashboard .hd-kpi-value {
    color: var(--pio-text);
}

.pio-dashboard .hd-kpi-unit {
    color: var(--pio-text-muted);
}

.pio-dashboard .hd-empty,
.pio-dashboard .hd-loading {
    color: var(--pio-text-muted);
}

.pio-dashboard .hd-icon-clock {
    background-color: var(--pio-kpi-icon-clock-bg);
}

.pio-dashboard .hd-icon-users {
    background-color: var(--pio-kpi-icon-users-bg);
}

.pio-dashboard .hd-icon-average {
    background-color: var(--pio-kpi-icon-average-bg);
}

.pio-dashboard .hd-icon-pause {
    background-color: var(--pio-kpi-icon-pause-bg);
}

/* Layout */
.pio-dashboard .pio-row-wide-narrow {
    grid-template-columns: 2fr 1fr;
}

.pio-dashboard .pio-row-half {
    grid-template-columns: 1fr 1fr;
}

.pio-dashboard .pio-row-single {
    grid-template-columns: 1fr;
}

/* Globale filter bar bovenaan */
.pio-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pio-filter-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pio-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
    flex-shrink: 0;
}

.pio-filter-combo {
    width: 200px;
}

.pio-filter-period {
    width: 170px;
}

.pio-filter-date {
    width: 130px;
}

.pio-filter-refresh {
    width: 110px;
}

.pio-filter-dash {
    color: var(--pio-text-muted);
    font-weight: 400;
    margin: 0 -2px;
}

.pio-filter-bar-label-mid {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--pio-border);
}

/* Detail card */
.pio-detail {
    margin-bottom: 16px;
}

.pio-filter-clear {
    border: none;
    background: var(--pio-clear-bg);
    color: var(--pio-clear-text);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.pio-filter-clear:hover {
    background: var(--pio-clear-bg-hover);
    color: var(--pio-clear-text-hover);
}

/* Table */
.pio-detail-scroll {
    max-height: 480px;
    overflow: auto;
    border: 1px solid var(--pio-border);
    border-radius: 8px;
}

.pio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--pio-card-bg);
}

.pio-table thead th {
    position: sticky;
    top: 0;
    background: var(--pio-th-bg);
    color: var(--pio-text-title);
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pio-border);
    z-index: 1;
    user-select: none;
}

.pio-table thead th.pio-sortable {
    cursor: pointer;
    transition: background 0.15s;
}

.pio-table thead th.pio-sortable:hover {
    background: var(--pio-row-hover);
}

.pio-sort-icon {
    margin-left: 4px;
    font-size: 10px;
    color: #1E88E5;
}

.pio-sort-icon sup {
    font-size: 9px;
    margin-left: 1px;
}

.pio-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--pio-border-light);
    color: var(--pio-text);
}

.pio-table tbody tr:hover td {
    background: var(--pio-row-hover);
}

.pio-table .pio-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pio-table .pio-day-total td {
    background: var(--pio-day-total-bg);
    font-weight: 600;
    color: var(--pio-day-total-text);
    border-top: 1px solid var(--pio-day-total-border);
    border-bottom: 1px solid var(--pio-day-total-border);
}

.pio-table .pio-grand-total td {
    background: var(--pio-grand-total-bg);
    color: var(--pio-grand-total-text);
    font-weight: 700;
    border-top: 1px solid var(--pio-grand-total-bg);
}

.pio-table .pio-empty {
    text-align: center;
    color: var(--pio-text-muted);
    padding: 32px;
}

@media (max-width: 1200px) {
    .pio-dashboard .pio-row-wide-narrow,
    .pio-dashboard .pio-row-half,
    .pio-dashboard .pio-row-single {
        grid-template-columns: 1fr;
    }
}