/* Schedule 242 switch (График / Табель), empty-month auto schedule and the
 * side-by-side tabel (static/schedule242_tools.js). Page tokens only, so the
 * [data-theme="dark"] switch needs nothing extra. Monochrome: weekends get a
 * tint, absences the hatch. */
#tab-schedule242 {
    --st-tint: color-mix(in srgb, var(--text) 5%, transparent);
    --st-hatch: repeating-linear-gradient(45deg, transparent 0 4px, var(--border-light) 4px 5px);
    /* The only colours in the tabel grid: hours moved across midnight, and why. */
    --st-moved-edge: color-mix(in srgb, #2563eb 22%, transparent);
    --st-moved-holiday: color-mix(in srgb, #d97706 30%, transparent);
    /* Absences, the published schedule's legend colours. */
    --st-a-leave: color-mix(in srgb, #92d050 48%, transparent);
    --st-a-sick: color-mix(in srgb, #ff6767 48%, transparent);
    --st-a-unpaid: color-mix(in srgb, #ffff00 45%, transparent);
    --st-a-child: color-mix(in srgb, #ffa765 50%, transparent);
    --st-a-gone: color-mix(in srgb, #999999 50%, transparent);
}

/* ---- View switch ---- */
.st-switch {
    display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.st-switch button {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary);
    background: transparent; border: 0; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer;
}
.st-switch button:hover { color: var(--text); }
.st-switch button[aria-selected="true"] { background: var(--text); color: var(--surface); }

/* ---- Controls ---- */
.st-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px;
    padding: 10px 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.st-field { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.st-field input, .st-field select, .st-select, .st-btn {
    height: 34px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.st-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.st-btn:hover { background: var(--st-tint); }
.st-btn:disabled { opacity: .5; cursor: progress; }
.st-btn-primary { background: var(--text); color: var(--surface); border-color: var(--text); }
.st-btn-primary:hover { background: var(--text); opacity: .88; }
.st-meta { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.st-icon { width: 15px; height: 15px; flex: none; }

/* ---- Empty / generated month notice (above the schedule grid) ---- */
.st-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px;
    font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px dashed var(--text-secondary); border-radius: var(--radius-sm);
}
.st-notice > span { flex: 1 1 260px; }

/* ---- Download menu ---- */
.st-dd { position: relative; }
.st-dd-panel {
    display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 320px; padding: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.st-dd.open .st-dd-panel { display: block; }
.st-dd-group { margin-bottom: 12px; }
.st-dd-group[hidden] { display: none; }
.st-dd-label { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary); }
.st-radio { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; cursor: pointer; }
.st-radio input { accent-color: var(--text); }
.st-dd-panel .st-select { width: 100%; }
.st-dd-go { width: 100%; justify-content: center; }

/* ---- ФИО | schedule | tabel: the two data panes are always the same width ---- */
.st-split { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.st-split[data-layout="left"], .st-split[data-layout="right"] { grid-template-columns: 300px minmax(0, 1fr); }
.st-split[data-layout="left"] [data-side="right"], .st-split[data-layout="right"] [data-side="left"] { display: none; }
/* The ФИО pane keeps its scrollbar hidden; it follows the others. */
.st-names .ag-body-vertical-scroll { display: none; }
/* Layout switch: Both / Schedule / Tabel */
.st-layout { display: inline-flex; gap: 2px; margin: 0 0 8px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.st-layout button { height: 28px; padding: 0 12px; font: inherit; font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 0; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; }
.st-layout button[aria-pressed="true"] { background: var(--text); color: var(--surface); }
/* The same agent + day on the other grids: focused cell (solid) and hovered cell (dashed). */
.st-grid .ag-cell.st-follow-focus { box-shadow: inset 0 0 0 2px var(--text); }
.st-grid .ag-cell.st-follow-hover { box-shadow: inset 0 0 0 1px var(--text-secondary); background: var(--st-tint); }
.st-grid .ag-row.st-follow-focus .ag-cell { font-weight: 600; }
.st-grid .ag-row.st-follow-hover .ag-cell { background: var(--st-tint); }
.st-half { min-width: 0; }
.st-half-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 2px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.st-grid { height: calc(100vh - 300px); min-height: 380px; width: 100%; }
.st-grid .st-day { text-align: center; font-variant-numeric: tabular-nums; padding: 0 4px; }
.st-grid .st-wkd { background: var(--st-tint); }
.st-grid .st-abs { background: var(--st-hatch); font-weight: 600; }
.st-grid .st-moved-edge { background: var(--st-moved-edge); font-weight: 600; }
.st-grid .st-moved-holiday { background: var(--st-moved-holiday); font-weight: 600; }
.st-grid .st-a-leave, .st-abs-legend .st-a-leave { background: var(--st-a-leave); }
.st-grid .st-a-sick, .st-abs-legend .st-a-sick { background: var(--st-a-sick); }
.st-grid .st-a-unpaid, .st-abs-legend .st-a-unpaid { background: var(--st-a-unpaid); }
.st-grid .st-a-child, .st-abs-legend .st-a-child { background: var(--st-a-child); }
.st-grid .st-a-gone, .st-abs-legend .st-a-gone { background: var(--st-a-gone); }
.st-abs-legend { font-size: 12px; color: var(--text-secondary); }
.st-built[hidden], .st-notice[hidden] { display: none; }
.st-edit-hint { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 12px; color: var(--text-secondary); }
/* A day changed in the tabel: it no longer says what the schedule says. */
.st-grid .ag-cell.st-edited { font-weight: 700; box-shadow: inset 0 0 0 2px var(--text); }
.st-spin { animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-moved-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-left: 10px; font-weight: 400; }
.st-moved-legend i { width: 12px; height: 12px; border-radius: 3px; margin-left: 6px; }
.st-moved-legend .st-moved-edge { background: var(--st-moved-edge); }
.st-moved-legend .st-moved-holiday { background: var(--st-moved-holiday); }

/* ---- Accountant's files ---- */
.st-sm-modal { width: min(720px, 94vw); max-height: 88vh; margin: auto; padding: 0; overflow: auto; color: var(--text); background: var(--surface);
               border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.st-sm-modal::backdrop { background: rgba(0, 0, 0, .45); }
.st-sm-box { padding: 16px 18px 18px; }
.st-sm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.st-sm-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.st-sm-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.st-sm-kinds { margin: 0; }
.st-sm-for { margin: 12px 0 8px; font-size: 13px; font-weight: 600; }
.st-sm-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; text-align: center; font-size: 13px;
              color: var(--text-secondary); border: 1.5px dashed var(--border); border-radius: var(--radius-sm); cursor: pointer;
              transition: background .15s ease, border-color .15s ease; }
.st-sm-drop:hover, .st-sm-over { color: var(--text); background: var(--st-tint); border-color: var(--text); }
.st-sm-drop .st-icon { width: 22px; height: 22px; }
.st-sm-drop + .st-sm-files { margin-top: 10px; }
.st-sm-note { margin-top: 10px; font-size: 13px; font-weight: 600; }
.st-sm-note-bad { color: var(--sv-missed, #dc2626); }
.st-sm-saved { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.st-sm-kind + .st-sm-kind { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.st-sm-files { margin: 0 0 8px; padding: 0; list-style: none; }
.st-sm-file { padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.st-sm-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.st-sm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sm-count { flex: none; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.st-sm-del { display: inline-flex; padding: 4px; color: var(--text-secondary); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.st-sm-del:hover { color: var(--text); background: var(--st-tint); }
.st-sm-warn { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--text); }
.st-sm-names { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.st-sm-names summary { cursor: pointer; }
.st-sm-names ul { margin: 4px 0 0; padding-left: 18px; max-height: 160px; overflow: auto; }
.st-sm-empty { margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); }
.st-sm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

@media (max-width: 1100px) { .st-split { grid-template-columns: minmax(0, 1fr); } .st-meta { margin-left: 0; } }

/* Last month's days left of day 1 in a generated month (schedule242.js prev columns): read-only, dimmed. */
#tab-schedule242 .s242-grid .s242-prev-day { opacity: .6; }
#tab-schedule242 .s242-grid .ag-header-cell.s242-hdr-prev { opacity: .7; }

.st-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.st-check input { accent-color: var(--text); }

/* Pill switch (show last month next to a generated one). */
.st-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; font-size: 13.5px; font-weight: 500;
             border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; user-select: none; }
.st-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.st-toggle-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--border); transition: background .18s ease; flex: none; }
.st-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
                   box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s ease; }
.st-toggle input:checked + .st-toggle-track { background: var(--text); }
.st-toggle input:checked + .st-toggle-track .st-toggle-thumb { transform: translateX(20px); }
.st-toggle input:focus-visible + .st-toggle-track { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---- Switch row: views on the left, norm + Праздники on the right ---- */
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.st-head .st-switch { margin-bottom: 0; }
.st-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.st-norm { padding: 6px 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.st-btn-icon { width: 34px; padding: 0; justify-content: center; }

/* ---- Holidays panel ---- */
.st-hol { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.st-hol[hidden] { display: none; }
.st-hol-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.st-hol-head .st-meta { margin-left: 0; }
.st-hol-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.st-hol-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--text-secondary); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.st-hol-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.st-hol-table td:last-child { width: 44px; text-align: right; }
.st-chip { display: inline-block; padding: 2px 8px; margin: 1px 2px; font-size: 12px; border: 1px solid var(--border); border-radius: 999px; }
.st-hol-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-hol-form input { height: 34px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
#st-hol-name { min-width: 220px; }
#st-hol-offs { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ---- Сверка: План / Факт rows, status colours ---- */
#tab-schedule242 {
    --sv-ok: #16a34a; --sv-missed: #dc2626; --sv-extra: #d97706; --sv-shifted: #2563eb; --sv-moved: #7c3aed;
    --sv-ok-bg: color-mix(in srgb, var(--sv-ok) 14%, transparent);
    --sv-missed-bg: color-mix(in srgb, var(--sv-missed) 16%, transparent);
    --sv-extra-bg: color-mix(in srgb, var(--sv-extra) 18%, transparent);
    --sv-shifted-bg: color-mix(in srgb, var(--sv-shifted) 15%, transparent);
    --sv-moved-bg: color-mix(in srgb, var(--sv-moved) 16%, transparent);
}
[data-theme="dark"] #tab-schedule242 { --sv-ok: #4ade80; --sv-missed: #f87171; --sv-extra: #fbbf24; --sv-shifted: #60a5fa; --sv-moved: #a78bfa; }

/* Summary cards (click = filter) */
.sv-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.sv-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; text-align: left; cursor: pointer;
           font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border);
           border-radius: var(--radius-sm); transition: background .15s ease, border-color .15s ease; }
.sv-card:hover { background: var(--st-tint); }
.sv-card[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.sv-card-value { font-size: 20px; font-weight: 700; line-height: 1.1; }
.sv-card-label { font-size: 12px; color: var(--text-secondary); }
.sv-c-ok { border-left-color: var(--sv-ok); } .sv-c-missed { border-left-color: var(--sv-missed); }
.sv-c-moved { border-left-color: var(--sv-moved); } .sv-c-shifted { border-left-color: var(--sv-shifted); }
.sv-c-extra { border-left-color: var(--sv-extra); } .sv-c-all { border-left-color: var(--text); }

/* Rows */
.sv-grid .sv-row-plan .ag-cell { border-top: 1px solid var(--border); }
.sv-grid .sv-row-fact .ag-cell { border-bottom: 1px solid var(--border); }
.sv-grid .ag-cell.sv-span { display: flex; align-items: center; background: var(--surface); z-index: 2;
                            border-bottom: 1px solid var(--border); }
.sv-grid .ag-cell.sv-span-under { background: transparent; z-index: 0; }
.sv-grid .sv-name { font-weight: 600; }
.sv-grid .sv-unmatched { color: var(--text-secondary); font-weight: 400; }
.sv-grid .sv-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.sv-grid .sv-kind-plan { color: var(--text-secondary); }
.sv-grid .sv-kind-fact { color: var(--text); }
.sv-grid .sv-cell { padding: 0 2px; font-size: 12px; }
.sv-grid .sv-plan { color: var(--text-secondary); }
.sv-grid .sv-cell-nodata { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--border-light) 4px 5px); }

/* Fact cell status colours */
.sv-grid .sv-ok      { background: var(--sv-ok-bg);      color: var(--text); }
.sv-grid .sv-missed  { background: var(--sv-missed-bg);  color: var(--sv-missed);  font-weight: 700; }
.sv-grid .sv-extra   { background: var(--sv-extra-bg);   color: var(--text);       font-weight: 600; }
.sv-grid .sv-shifted { background: var(--sv-shifted-bg); color: var(--sv-shifted); font-weight: 700; }
.sv-grid .sv-moved   { background: var(--sv-moved-bg);   color: var(--sv-moved);   font-weight: 700; }
.sv-grid .sv-diffs { color: var(--sv-missed); font-weight: 700; }
.sv-grid .ag-header-cell.sv-nodata { opacity: .45; }

@media (max-width: 1100px) { .sv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }