/* Trainora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css).
   Accent tokens + the pieces this product adds. Everything generic comes from the kit, which is
   LOCKED. This file, src/Domain.php, bin/seed.php and sw.js are the only four that differ from
   Inspectora — the engine, controllers, views and tests are the same code. */
:root{--accent:#0ea5e9;--accent-dark:#0284c7;--accent-soft:#e0f2fe;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#38bdf8;--accent-dark:#7dd3fc;--accent-soft:#0c2b3e;--on-accent:#04202e;--accent-ink:var(--on-accent)}

/* status pills beyond the kit's shared vocabulary */
.pill.off{background:var(--chip);color:var(--sub)}

.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.disclaimer{font-size:.82rem;color:var(--sub);border-top:1px solid var(--line);margin-top:22px;padding-top:12px}

/* ── coverage bar: one line that says how compliant the whole register is ──────────────
   NOTE: this is `.covline`, deliberately NOT `.cov` — the kit already uses `.cov` for a
   seven-column coverage-by-day grid, and borrowing the name put the bar in one narrow column
   and its caption in another. A kit class name means what the kit says it means. */
.covline{margin-bottom:16px}
.cov-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line2)}
.cov-bar .seg{display:block;height:100%}
.cov-bar .seg.valid{background:var(--ok)}
.cov-bar .seg.expiring{background:var(--warn)}
.cov-bar .seg.expired{background:var(--bad)}
.cov-bar .seg.none{background:var(--line)}

/* The grid's spare width belongs to the columns, not to the name: a fixed-layout table hands
   every leftover pixel to the one column without a width, which made the name column 440px. */
table.mx{width:100%}
table.mx th:not(.who-h){width:auto;min-width:52px}

/* ── THE GRID (the hero) ─────────────────────────────────────────────────────────────
   Rotated column heads keep a wide matrix readable without a horizontal scroll on desktop;
   the wrapper scrolls when there are genuinely too many columns for the viewport. */
.grid-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow);background:var(--card);max-width:100%}
table.mx{border-collapse:collapse;table-layout:fixed;min-width:100%}
table.mx th{background:var(--hover-bg);border-bottom:1px solid var(--line);vertical-align:bottom;padding:10px 4px 8px;position:relative}
table.mx th.who-h{text-align:left;width:22%;min-width:150px;padding-left:12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sub)}
table.mx th:not(.who-h){width:48px}
table.mx th .rot{display:block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:.76rem;font-weight:600;color:var(--ink);max-height:120px;overflow:hidden;text-overflow:ellipsis;margin:0 auto}
table.mx th .vm{display:block;font-size:.62rem;color:var(--faint);font-family:var(--mono);margin-top:5px}
table.mx td{border:1px solid var(--line2);padding:0;height:44px;text-align:center;background:var(--card)}
table.mx td.who{text-align:left;padding:6px 12px}
table.mx td.who a{font-weight:600;color:var(--ink)}
table.mx td.who a:hover{color:var(--accent);text-decoration:none}
table.mx td.who .sub{display:block;font-size:.72rem;color:var(--faint)}

/* A cell carries its state twice — colour AND a date — so it is not colour alone that tells you. */
.cell{position:relative}
.cell .dot{display:block;width:10px;height:10px;border-radius:50%;margin:0 auto 2px}
.cell .d{display:block;font-size:.6rem;font-family:var(--mono);color:var(--sub);line-height:1}
.cell.valid{background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.cell.valid .dot{background:var(--ok)}
.cell.expiring{background:color-mix(in srgb,var(--warn) 18%,var(--card))}
.cell.expiring .dot{background:var(--warn)}
.cell.expired{background:color-mix(in srgb,var(--bad) 16%,var(--card))}
.cell.expired .dot{background:var(--bad)}
.cell.none .dot{background:var(--line)}
.cell.na{background:repeating-linear-gradient(135deg,var(--bg) 0 5px,transparent 5px 10px);color:var(--faint);font-size:.75rem}
.cell.can{cursor:pointer}
.cell.can:hover{outline:2px solid var(--accent);outline-offset:-2px}

.cal-legend{display:flex;gap:12px 16px;flex-wrap:wrap;font-size:.78rem;color:var(--sub);margin:10px 2px 0;align-items:center}
.cal-legend i.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.cal-legend i.lg.valid{background:var(--ok)} .cal-legend i.lg.expiring{background:var(--warn)}
.cal-legend i.lg.expired{background:var(--bad)} .cal-legend i.lg.none{background:var(--line)}
.cal-legend i.lg.na{background:repeating-linear-gradient(135deg,var(--line) 0 3px,transparent 3px 6px)}

/* the record-a-completion dialog */
.mxdlg{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;max-width:420px;width:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.mxdlg::backdrop{background:rgba(15,23,42,.45)}
.mxdlg h2{margin:0 0 4px;font-size:1.15rem}

/* ── sidebox key/value list ─────────────────────────────────────────────────────────────
   `.meta-list` is NOT a kit class — I reached for a name that sounded like one and the browser
   rendered raw bullets with the label and the value jammed together ("People8"). Styled here,
   in the app layer, where a name I invented belongs. */
.meta-list{list-style:none;padding:0;margin:0 0 8px}
.meta-list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid var(--line2);font-size:.9rem}
.meta-list li:last-child{border-bottom:0}
.meta-list .k{color:var(--sub)}
/* The kit's .timeline gives the row its rail and spacing; the app supplies the line break between
   what happened and when, which the kit deliberately leaves to the product. */
.timeline li>a{display:block}
.timeline li>.muted{display:block}

/* record pages */
dl.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:0}
dl.kv dt{font-size:.82rem;font-weight:700;color:var(--sub)}
dl.kv dd{margin:0}
.filelist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.filelist li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;background:var(--hover-bg);border:1px solid var(--line2);border-radius:8px;padding:7px 10px}
.filelist li>a{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.filelist li>form{margin-left:auto}
.fileform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.fileform input[type=file]{flex:1 1 240px;min-width:0}
.fileform input[type=text]{flex:1 1 180px;min-width:0}
.picklist{display:grid;gap:4px;max-height:260px;overflow:auto}
.picklist label{display:flex;gap:8px;align-items:center;font-weight:400;font-size:.9rem}
tr.dim td{opacity:.6}

/* Phone: the grid SCROLLS inside its card rather than squeezing. Squeezed, the name column
   collapsed under the cells and the two overlapped — a table that fits by destroying itself is
   worse than one you swipe. The name column stays put while the requirements scroll past it. */
@media(max-width:900px){
  .grid-side{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  table.mx{width:auto;min-width:620px}
  table.mx th.who-h,table.mx td.who{width:150px;min-width:150px;position:sticky;left:0;z-index:2;
    background:var(--card);box-shadow:1px 0 0 var(--line2)}
  table.mx th.who-h{background:var(--hover-bg)}
  table.mx td.who .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:138px}
}
@media(max-width:560px){
  table.mx th .rot{max-height:110px}
  .fileform input[type=file],.fileform input[type=text]{flex:1 1 100%}
  .filelist li>form{margin-left:0}
  dl.kv{grid-template-columns:1fr;gap:2px 0}
  dl.kv dd{margin-bottom:8px}
}
/* 3.2 "My training record" (views/my_record.php) */
.pub .bizhead .who{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--faint);font-weight:400}
.pub fieldset.plain{border:0;padding:0;margin:0;min-width:0}
.myrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.myrow .why{display:block;font-size:.8rem;color:var(--faint)}