/*
 * Dashboards (views/lutdepartment/_dashboard.php, views/lutkeyresult/_overview.php) - frontend\helpers\Viz + js/viz-charts.js.
 * Colours are the validated data-viz palette (categorical slots 1-4, the app has no dark theme):
 * marks carry the series colour, text always wears the ink tokens.
 */
.viz-root {
    --surface-1: #fcfcfb;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --grid: #e1e0d9;
    --axis: #c3c2b7;
    --border: rgba(11, 11, 11, .10);
    --series-1: #2a78d6; /* blue   - projects / single-series bars */
    --series-2: #eb6834; /* orange - second series */
    --series-3: #1baf7a; /* aqua   - third series */
    --series-4: #eda100; /* yellow - fourth series */
    /* achievement levels (ผลงาน ÷ เป้าหมาย): <20 · 20-40 · 40-60 · 60-80 · >=80 %, and "no result yet" */
    --level-1: #d63c3c; /* red */
    --level-2: #f07c28; /* orange */
    --level-3: #f2c230; /* yellow */
    --level-4: #8cc152; /* light green */
    --level-5: #1e8a44; /* dark green */
    --level-0: #c9c8c0; /* grey - ยังไม่รายงานผล */
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text-primary);
}

.viz-root .viz-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.viz-root .viz-filter .btn.active {
    background: var(--series-1);
    border-color: var(--series-1);
    color: #fff;
}

/* stat tiles */
.viz-tile {
    display: block;
    height: 100%;
    padding: .9rem 1rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease-in-out;
}

a.viz-tile:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    color: inherit;
}

.viz-tile .viz-label {
    color: var(--text-secondary);
    font-size: .8rem;
}

.viz-tile .viz-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.viz-tile .viz-value small {
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.viz-tile .viz-sub {
    color: var(--text-muted);
    font-size: .75rem;
}

/* chart cards */
.viz-card {
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: .75rem;
}

.viz-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.viz-card .viz-caption {
    margin: .1rem 0 .75rem;
    font-size: .78rem;
    color: var(--text-muted);
}

.viz-card .viz-plot {
    position: relative;
    width: 100%;
}

.viz-card details {
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--text-secondary);
}

.viz-card details summary {
    cursor: pointer;
    width: fit-content;
}

.viz-card details summary:hover { color: var(--text-primary); }

/* table twin of a chart (Viz::twin) */
.viz-card details .table-responsive {
    margin-top: .6rem;
    overflow-x: auto;
    border: 1px solid var(--grid);
    border-radius: 8px;
}
.viz-card table.viz-twin {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
}
.viz-twin th,
.viz-twin td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--grid);
    color: var(--text-secondary);
    white-space: nowrap;
}
.viz-twin thead th {
    position: sticky;
    top: 0;
    background: #f3f2ee;
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
}
/* coloured bar on top of a header cell (legend of the chart's colours) */
.viz-twin thead th.has-color {
    box-shadow: inset 0 4px 0 var(--head-color);
    padding-top: .7rem;
}
.viz-twin thead th.has-color::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .35rem;
    border-radius: 2px;
    background: var(--head-color);
    vertical-align: baseline;
}
.viz-twin tbody tr:nth-child(even) td { background: #faf9f6; }
.viz-twin tbody tr:hover td { background: #eef4fc; }
.viz-twin tbody tr:last-child td { border-bottom: 0; }
.viz-twin td:first-child { color: var(--text-primary); }
.viz-twin .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.viz-twin thead th.num { text-align: right; }
.viz-twin td.zero { color: var(--axis); }
/* row total ("รวม" column) */
.viz-twin .total {
    font-weight: 600;
    color: var(--text-primary);
    border-left: 1px solid var(--grid);
}

/* status / progress cell in the "latest" lists */
.viz-root .viz-list td,
.viz-root .viz-list th {
    vertical-align: middle;
}

/* ---- tracking2 adaptation: simple tile grid (no Bootstrap row/col) — views/tbproject/_overview.php, _year_summary.php ---- */
.viz-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
}
.viz-tiles.n2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767.98px) {
    .viz-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---- tracking2 adaptation: small layout helpers (no Bootstrap row/col/spacing utilities) ---- */
.viz-root .mb-2 { margin-bottom: .5rem; }
.viz-root .mb-3 { margin-bottom: 1rem; }
.viz-root .mb-4 { margin-bottom: 1.5rem; }
.viz-cols-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}
@media (max-width: 991.98px) {
    .viz-cols-2 { grid-template-columns: 1fr; }
}
.viz-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 991.98px) {
    .viz-cols-3 { grid-template-columns: 1fr; }
}