/* Shift Turnover: History, CSV, Settings (Task 14).
   NEUTRAL: CSS vars lang ng styles.css (ang itsura ng Daet ay nasa daet-pos.css).
   Lahat ng class ay may prefix na st-. Walang display:...!important sa pindutan/tab. */

/* ---- History: filters ---- */
.st-hx-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 12px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
}
.st-hx-f { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--st-muted); }
.st-hx-f .st-input { min-width: 0; }
.st-hx-f--wide { grid-column: 1 / -1; }
.st-hx-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.st-hx-chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-ink);
    cursor: pointer;
}
.st-hx-chk input, .st-set-chk input, .st-set-opt input, .st-station-check input { width: 20px; height: 20px; flex: none; }

.st-hx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }

/* ---- History: table -> cards ----
   Ang batayan ay lapad ng CONTAINER (.st-hx-ct), hindi ng screen: ang sidebar ang nagpapaliit sa
   nilalaman sa 768/1024. Ang .st-hx-wrap ay panangga kung may mahabang pangalan. */
.st-hx-ct { container-type: inline-size; display: grid; gap: 12px; min-width: 0; }
.st-hx-wrap { overflow-x: auto; }
.st-hx-list { min-width: 0; }
.st-hx-table {
    background: var(--st-paper);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
}
.st-hx-row { cursor: pointer; }
.st-hx-row:hover { background: var(--st-primary-soft); }
.st-hx-row:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.st-hx-table td { vertical-align: middle; }
.st-hx-sub, .st-hx-acc { white-space: nowrap; }
.st-hx-no { margin: 4px 0; font-size: 14px; }
.st-hx-dh { display: flex; align-items: center; gap: 8px; font-size: 17px; }

@container (min-width: 701px) {
    .st-hx-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (max-width: 700px) {
    .st-hx-wrap { overflow: visible; }
    .st-hx-table, .st-hx-table tbody { display: block; border: 0; background: none; }
    .st-hx-table thead { display: none; }
    .st-hx-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "st stat" "out inc" "sub acc" "iss iss";
        gap: 4px 12px;
        margin-bottom: 8px;
        padding: 12px;
        border: 1px solid var(--st-line);
        border-radius: var(--st-radius);
        background: var(--st-paper);
    }
    .st-hx-table td { display: block; min-width: 0; padding: 0; border: 0; font-size: 14px; overflow-wrap: anywhere; }
    .st-hx-table .st-hx-st { grid-area: st; font-size: 16px; }
    .st-hx-stat { grid-area: stat; justify-self: end; }
    .st-hx-out { grid-area: out; }
    .st-hx-in { grid-area: inc; }
    .st-hx-sub { grid-area: sub; }
    .st-hx-acc { grid-area: acc; }
    .st-hx-table .st-hx-iss { grid-area: iss; text-align: left; }
    .st-hx-out::before, .st-hx-in::before, .st-hx-sub::before, .st-hx-acc::before, .st-hx-iss::before {
        content: attr(data-l);
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--st-muted);
    }
}

/* ---- Settings ---- */
.st-set { gap: 12px; }
.st-set-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.st-set-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    min-width: 0;
}
.st-set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-set-lbl { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--st-ink); min-width: 0; }
.st-set-lbl .st-note { font-weight: 400; }
.st-set-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.st-set-chk, .st-set-opt, .st-station-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.st-set-det > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    cursor: pointer;
}
.st-set-det > summary small { color: var(--st-muted); font-weight: 600; }
.st-set-det[open] > summary { margin-bottom: 8px; }
.st-set-menu {
    display: grid;
    max-height: 240px;
    margin-top: 8px;
    overflow-y: auto;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    padding: 4px 10px;
}
.st-set-opt[hidden] { display: none; }
.st-set-lists { display: grid; gap: 8px; }
.st-set-items { display: grid; gap: 8px; }
.st-set-item { display: grid; gap: 6px; }
.st-set-ctl { display: flex; gap: 6px; }
.st-set-ctl .st-btn { flex: 1; min-width: 44px; }
.st-set-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.st-set-save { display: grid; gap: 8px; }
.st-set-errs { margin: 6px 0 0; padding-left: 18px; }

/* Stations checkbox sa Add/Edit Shift modal (labas ng .st-root, kaya sariling kulay). */
.st-station-checks { display: flex; flex-wrap: wrap; gap: 2px 16px; }

@media (min-width: 701px) {
    .st-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-set-grid--num { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .st-set-item { grid-template-columns: 1fr auto; align-items: center; }
    .st-set-ctl .st-btn { flex: none; }
    .st-set-save { grid-template-columns: 1fr 1fr; max-width: 520px; }
}
@media (min-width: 1100px) {
    .st-set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.st-hx-f input[type="date"] { font-size: 14px; padding: 8px 6px; }

/* Marker ng <summary> (nawawala kapag display:flex). */
.st-set-det > summary { list-style: none; }
.st-set-det > summary::-webkit-details-marker { display: none; }
.st-set-det > summary::before { content: "\25B8"; display: inline-block; width: 14px; color: var(--st-muted); }
.st-set-det[open] > summary::before { content: "\25BE"; }