/* Time & Attendance module.
 *
 * Its own stylesheet, for the same reason workforce.css is: adding a fifteen-
 * screen module must not be able to change how a single existing people,
 * meeting or attendance screen renders. Nothing here targets a shared class —
 * every selector is prefixed `ta-` — and the module reuses `wf-kpi`,
 * `wf-range` and `wf-clock-hero` rather than restyling them.
 *
 * Colours come from the theme tokens so both themes work without a second set
 * of rules. Hard-coded hex appears only where a leave type's own colour is
 * being shown, and that arrives from the database as a CSS variable.
 *
 * SUBTLE SURFACES USE `--fill-3`, NOT `--tile`.
 *
 * `--tile` is #ffffff in BOTH themes — it is the backing for a brand logo
 * tile, not a page surface. Using it for the tab strip, the pills and the
 * register's hover row painted every one of them pure white in dark mode with
 * white text on top, which is how this module shipped its first afternoon.
 * `--fill-3` is the subtle surface: rgba(255,255,255,.035) dark, #f8faf9
 * light. If you need a raised surface, that is the token.
 */

/* ── the module's own tab strip ─────────────────────────────────────────── */
.ta-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:-6px 0 22px;padding:3px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--fill-3);overflow-x:auto}
.ta-tabs a{padding:8px 14px;border-radius:calc(var(--r) - 4px);color:var(--muted);
  font-size:11.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.ta-tabs a:hover{color:var(--heading);background:var(--card)}
.ta-tabs a.on{color:var(--green);background:var(--card);box-shadow:var(--shadow)}

/* ── filter chips ───────────────────────────────────────────────────────── */
.ta-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.ta-chips a{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--muted);font-size:11.5px;
  font-weight:700;text-decoration:none}
.ta-chips a:hover{border-color:var(--tint-line);color:var(--heading)}
.ta-chips a.on{border-color:var(--green);background:var(--tint);color:var(--green)}
.ta-chips a b{color:var(--heading);font-size:12px}
.ta-chips a.on b{color:var(--green)}

/* ── state pills ────────────────────────────────────────────────────────── */
.ta-pill{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--fill-3);color:var(--muted);font-size:10.5px;font-weight:800;
  letter-spacing:.02em;white-space:nowrap}
.ta-pill i{font-style:normal;font-weight:600;opacity:.75}
.ta-pill.good{border-color:var(--tint-line);background:var(--tint);color:var(--green)}
.ta-pill.warn{border-color:color-mix(in srgb,var(--orange) 40%,transparent);
  background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange)}
.ta-pill.bad{border-color:color-mix(in srgb,var(--red) 40%,transparent);
  background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.ta-pill.info{border-color:color-mix(in srgb,var(--violet) 40%,transparent);
  background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--violet)}
.ta-pill.muted{opacity:.8}

.ta-late{color:var(--orange);font-weight:800;font-size:10.5px}
.ta-bad{color:var(--red)}
.ta-good{color:var(--green)}
.ta-warn{color:var(--orange)}
.ta-note{color:var(--green)}
.ta-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:baseline}
.ta-score{font-size:14px}
.ta-score.red{color:var(--red)}
.ta-score.amber{color:var(--orange)}
.ta-score.green{color:var(--green)}

/* ── callouts ───────────────────────────────────────────────────────────── */
.ta-callout{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:12px 14px;
  border:1px solid var(--tint-line);border-radius:var(--r);background:var(--tint);
  font-size:11.5px;line-height:1.5}
.ta-callout b{flex:0 0 auto;color:var(--green)}
.ta-callout span{flex:1 1 260px;color:var(--muted)}
.ta-callout.warn{border-color:color-mix(in srgb,var(--orange) 35%,transparent);
  background:color-mix(in srgb,var(--orange) 9%,transparent)}
.ta-callout.warn b{color:var(--orange)}

/* ── the register ───────────────────────────────────────────────────────── */
.ta-register-actions{margin:0 0 12px;align-items:center;flex-wrap:wrap;gap:10px}
table.ta-register td{padding:6px 8px;vertical-align:middle}
table.ta-register select,table.ta-register input{min-height:34px;padding:4px 7px;font-size:11.5px}
table.ta-register select{min-width:130px}
table.ta-register input[type=time]{min-width:104px}
table.ta-register tr:hover td{background:var(--fill-3)}

/* ── the wall chart ─────────────────────────────────────────────────────── */
.ta-chartwrap{overflow-x:auto}
table.ta-chart{border-collapse:separate;border-spacing:0;min-width:100%}
table.ta-chart th,table.ta-chart td{padding:0;border-bottom:1px solid var(--line)}
table.ta-chart thead th{position:sticky;top:0;z-index:2;height:30px;min-width:22px;
  background:var(--card);color:var(--muted);font-size:9.5px;font-weight:800;text-align:center}
table.ta-chart thead th.weekend{background:var(--fill-3)}
table.ta-chart thead th.holiday{color:var(--red)}
table.ta-chart tr.ta-load th{top:30px;height:22px;font-size:10px;color:var(--heading)}
table.ta-chart tr.ta-load th.over{color:var(--orange);font-weight:900;
  background:color-mix(in srgb,var(--orange) 20%,transparent)}
/* The name column stays put while the dates scroll: a chart of 42 days is
   unreadable if you cannot see whose row you are on. */
th.ta-name,td.ta-name{position:sticky;left:0;z-index:3;min-width:190px;max-width:190px;
  padding:7px 12px 7px 2px!important;background:var(--card);text-align:left;
  border-right:1px solid var(--line)}
td.ta-name a{font-weight:700;text-decoration:none;font-size:12px}
.ta-cell{height:26px;min-width:22px;background:var(--card)}
.ta-cell.weekend{background:var(--fill-3)}
.ta-cell.holiday{background:repeating-linear-gradient(45deg,transparent,transparent 3px,
  color-mix(in srgb,var(--red) 22%,transparent) 3px,
  color-mix(in srgb,var(--red) 22%,transparent) 6px)}
.ta-cell.booked{background:var(--c,var(--green))}
.ta-cell.pending{background:repeating-linear-gradient(45deg,
  color-mix(in srgb,var(--orange) 55%,transparent),
  color-mix(in srgb,var(--orange) 55%,transparent) 4px,transparent 4px,transparent 8px)}
.ta-legend{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;color:var(--muted);font-size:11px}
.ta-legend span{display:inline-flex;align-items:center;gap:7px}
.ta-legend i.ta-cell{display:inline-block;width:18px;height:14px;border:1px solid var(--line);border-radius:3px}

/* ── working patterns ───────────────────────────────────────────────────── */
table.ta-pattern{width:100%;table-layout:fixed}
table.ta-pattern th{padding:8px;color:var(--muted);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;text-align:center}
table.ta-pattern td{padding:12px 8px;text-align:center;border:1px solid var(--line);
  border-radius:var(--r)}
table.ta-pattern td.on{background:var(--tint)}
table.ta-pattern td.on b{display:block;color:var(--heading);font-size:13px}
table.ta-pattern td.on span{display:block;margin-top:2px;color:var(--muted);font-size:11px}
table.ta-pattern td.off{color:var(--muted);font-size:11px;background:var(--fill-3)}
.ta-pattern-edit{display:grid;gap:8px;margin:14px 0}
.ta-pattern-day{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;align-items:center;gap:10px}
.ta-pattern-day input[type=time]{min-height:34px}
.ta-people-pick{max-height:280px;overflow-y:auto;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--fill-3)}
.ta-people-pick .check{display:flex;gap:8px;padding:3px 0;font-size:12px}

.btnrow.tight{gap:6px;flex-wrap:nowrap}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1280px){
  .ta-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .ta-tabs{margin-bottom:16px;flex-wrap:nowrap}
  .ta-feature-grid{grid-template-columns:1fr}
  .ta-callout{align-items:flex-start;flex-direction:column;gap:5px}
  th.ta-name,td.ta-name{min-width:130px;max-width:130px}
  .ta-pattern-day{grid-template-columns:1fr;gap:5px}
  .ta-register-actions{display:grid}
  .ta-register-actions .btn,.ta-register-actions .btn-2{width:100%}
}

@media print{
  .ta-tabs,.ta-chips,.ta-register-actions,.ta-legend{display:none!important}
  .ta-callout{border:1px solid var(--line);background:none}
}

/* ── charts ─────────────────────────────────────────────────────────────────
   Inline SVG, no library: the CSP forbids third-party script and a bar chart
   is forty lines. Every chart also carries its numbers in a <title> on each
   bar and, where it matters, a table beneath — a screen reader and a printed
   page must not be left with an empty rectangle. */
.ta-chart-wrap{overflow-x:auto;margin:0 0 20px;padding:2px}
.ta-svg{display:block;width:100%;min-width:320px;height:176px}
.ta-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.ta-bar{fill:var(--green);opacity:.85}
.ta-bar:hover{opacity:1}
.ta-bar.good{fill:var(--green)}
.ta-bar.warn{fill:var(--orange)}
.ta-bar.bad{fill:var(--red)}
.ta-axis{fill:var(--muted);font-size:9px}

/* ── heat map ───────────────────────────────────────────────────────────── */
table.ta-heat{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed}
table.ta-heat th{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:2px}
th.ta-heat-y{width:52px;text-align:right;padding-right:8px}
.ta-heat-cell{height:30px;border-radius:5px;text-align:center;font-size:10.5px;font-weight:700;
  color:var(--heading);
  /* One hue, varying strength. A red-to-green ramp would be unreadable to the
     one man in twelve with a colour vision deficiency, and the number is
     printed in the cell either way. */
  background:color-mix(in srgb,var(--orange) calc(var(--i,0) * 78%),var(--fill-3))}
.ta-heat-cell.none{background:transparent;border:1px dashed var(--line)}

/* ── comparison tiles ───────────────────────────────────────────────────── */
.ta-compare-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.ta-compare{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow)}
.ta-compare>span{display:block;color:var(--muted);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase}
.ta-compare>b{display:block;margin-top:6px;color:var(--heading);font-size:24px;line-height:1.05}
.ta-compare>small{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.ta-compare.good>b{color:var(--green)}
.ta-compare.bad>b{color:var(--red)}

/* ── punctuality ────────────────────────────────────────────────────────── */
.ta-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin:0 0 8px}
.ta-h3{margin:0 0 10px;font-size:13px}
.ta-punct{display:grid;gap:9px}
.ta-punct-row{display:grid;grid-template-columns:112px minmax(0,1fr) 40px 42px;align-items:center;
  gap:10px;font-size:11.5px}
.ta-punct-row>span{color:var(--muted)}
.ta-punct-row>b{text-align:right;color:var(--heading)}
.ta-punct-row>small{text-align:right;color:var(--muted);font-size:10.5px}
.ta-punct-bar{height:9px;border-radius:999px;background:var(--fill-3);overflow:hidden}
.ta-punct-bar>i{display:block;height:100%;border-radius:999px;background:var(--green)}
.ta-punct-row.warn .ta-punct-bar>i{background:var(--orange)}
.ta-punct-row.bad .ta-punct-bar>i{background:var(--red)}

.ta-signals{margin:0;padding-left:16px;font-size:11px;color:var(--muted)}
.ta-signals li{margin:1px 0}

@media(max-width:900px){
  .ta-compare-row{grid-template-columns:1fr}
  .ta-split{grid-template-columns:1fr;gap:18px}
  .ta-punct-row{grid-template-columns:92px minmax(0,1fr) 34px 40px}
}
@media print{.ta-chart-wrap{overflow:visible}}