/* ============================================================
   Admin
   ============================================================ */

/* sortable table headers (ransack sort_link) */
.tbl th a{color:inherit;display:inline-flex;align-items:center;gap:.3em}
.tbl th a:hover{color:var(--ink);text-decoration:none}
.tbl th a.sort_link.asc,.tbl th a.sort_link.desc{color:var(--ink)}
.tbl td.nowrap,.tbl th.nowrap{white-space:nowrap}
.tbl .yes{color:var(--ok)}
.tbl .no{color:var(--gray-500)}

/* admin filter form: as many columns as fit */
.admin-filters{display:grid;gap:.75rem 1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));align-items:end}
.admin-filters .field input,.admin-filters .field select{min-height:44px}
.admin-filters .form-actions{padding-top:0}

/* list of courses inside a table cell */
.cell-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font-size:.9rem}
.cell-list{min-width:16rem}
.plans-tbl .cell-list{max-width:20rem}
.plans-tbl td .chip--red{white-space:normal;max-width:20rem}

/* key / value details (show pages) */
.kv{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:0;margin:0;background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--r-lg);overflow:hidden}
.kv dt,.kv dd{margin:0;padding:.75rem 1.1rem;border-bottom:1px solid var(--gray-100);min-width:0;overflow-wrap:anywhere}
.kv dt{font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-600);background:var(--paper)}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}
.kv dd ul{margin:0;padding-left:1.1rem}
@media (max-width:600px){
  .kv{grid-template-columns:1fr}
  .kv dt{border-bottom:0;padding-bottom:.2rem;background:none}
  .kv dd{padding-top:0}
}

/* actions menu: <details data-menu><summary class="btn"> + .menu__list */
details[data-menu]{position:relative;display:inline-block}
details[data-menu]>summary{list-style:none}
details[data-menu]>summary::-webkit-details-marker{display:none}
details[data-menu][open]>summary{border-color:var(--ink)}
.menu__list{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:.4rem;z-index:30;text-align:left;
  display:grid;animation:drop .2s var(--t) both}
.menu__list a{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:var(--r);color:var(--ink);font-size:.93rem;font-weight:500;white-space:nowrap}
.menu__list a:hover{background:var(--gray-100);text-decoration:none}
.menu__list a .ico{color:var(--gray-600)}
/* inside a scrolling table an absolute menu would be clipped by the scroll
   box, so it's fixed to the viewport instead; shell.js places it under its
   button (or above, near the bottom of the screen) and closes it on scroll */
.table-scroll .menu__list{position:fixed;top:var(--menu-top,0);left:var(--menu-left,0);right:auto}
.table-scroll details[data-menu]:not([data-placed]) .menu__list{visibility:hidden}

/* checkbox lists (roles, eligible courses) */
.check-grid{display:grid;gap:.5rem 1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.field.check_boxes .checkbox,.field.check_boxes span.checkbox{font-size:.95rem}
.field.check_boxes{gap:.55rem}

/* raw HTML editing (certificate templates) */
.field textarea.code{font-family:var(--ff-mono);font-size:.85rem;line-height:1.5;min-height:420px}

/* nested tables in reports */
.report-table td table{margin-top:.4rem}


/* admin tables carry more columns: slightly tighter cells */
.admin-area .tbl th,.admin-area .tbl td{padding:.75rem .8rem}
.admin-area .tbl td.act .btn+.btn{margin-left:.25rem}

/* hidden inputs (_method, token) come first in a Rails form, so the first
   section is never :first-child */
.admin-area .form>.form-section:first-of-type{border-top:0;padding-top:0}

/* fields in a row keep their own height (a hint on one shouldn't stretch the other) */
.admin-area .form-grid{align-items:start;align-content:start}

/* SimpleForm date / datetime inputs: Rails renders a run of selects */
.field.datetime,.field.date,.field.time{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.field.datetime>label,.field.date>label,.field.time>label,
.field.datetime>.field__hint,.field.date>.field__hint,.field.time>.field__hint,
.field.datetime>.field__error,.field.date>.field__error,.field.time>.field__error{flex-basis:100%}
.field.datetime select,.field.date select,.field.time select{width:auto;min-height:44px;padding:.5rem 2rem .5rem .75rem}

/* long unbroken names (URLs, pasted markup) must not widen the table */
.admin-area .tbl td{overflow-wrap:anywhere}
.admin-area .tbl td:first-child{min-width:9rem}
.admin-area .tbl td.act .btn--sm{min-height:34px;padding:.4em .85em;font-size:.86rem}
.form-actions__end{margin-left:auto}
.field select[multiple]{padding:.4rem}
.field select[multiple] option{padding:.25rem .5rem;border-radius:6px}
.field select[multiple] option:checked{background:var(--blue-100) linear-gradient(var(--blue-100),var(--blue-100));color:var(--ink)}
.tbl--top td{vertical-align:top}

/* ============================================================
   Admin reports: course starts
   Chart colours are validated (dataviz validate_palette.js):
   completed #0F6E96 / in progress #5BB8E0 on white, trend #1799CE.
   ============================================================ */
:root { --chart-done: #0F6E96; --chart-open: #5BB8E0; --chart-trend: #1799CE; }

.report-filters-bar { display: grid; gap: .9rem; }
.presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.presets a { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid var(--gray-300); background: #fff; color: var(--ink); font-size: .9rem; font-weight: 500; }
.presets a:hover { border-color: var(--ink); text-decoration: none; }
.presets a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.custom-range { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.custom-range .field { flex: 0 1 190px; }
.custom-range .field input, .custom-range .field select { min-height: 44px; }

.report-scope { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; margin: 0; color: var(--gray-700); }
.report-scope strong { font-family: var(--ff-display); font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); }

.report-kpis .stat { gap: .5rem; align-content: start; }
.report-kpis .stat__n { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.report-kpis .meter { height: 6px; }
.delta { font-size: .82rem; color: var(--gray-600); }
.delta b { font-weight: 650; margin-right: .2rem; }
.delta--up b { color: var(--ok); }
.delta--down b { color: var(--red); }
.delta--flat b { color: var(--gray-700); }

.chart-card { display: grid; gap: 1.25rem; position: relative; min-width: 0; }
.chart-card__hdr { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between; }
.chart-card__hdr h2 { font-size: 1.15rem; }

/* column chart */
.colchart { --axis: 52px; display: grid; gap: .5rem; }
.colchart__plot { position: relative; height: 240px; margin-left: var(--axis); }
.colchart__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--gray-200); }
.colchart__grid span { position: absolute; right: calc(100% + 10px); top: -.6em; font-family: var(--ff-mono); font-size: .7rem;
  color: var(--gray-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.colchart__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; align-items: end; }
.colchart__col { height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; border-radius: 6px; outline-offset: 2px; }
.colchart__col i { display: block; width: min(24px, 82%); min-height: 2px; background: var(--chart-trend); border-radius: 4px 4px 0 0; transition: filter var(--t); }
.colchart__col:hover i, .colchart__col:focus-visible i { filter: brightness(1.12) saturate(1.1); }
.colchart__col:hover, .colchart__col:focus-visible { background: rgba(23,153,206,.06); }
.colchart__x { margin-left: var(--axis); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; }
.colchart__x span { font-family: var(--ff-mono); font-size: .68rem; color: var(--gray-600); text-align: center; white-space: nowrap; overflow: visible; }

/* shared tooltip */
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; border-radius: 10px;
  padding: .5rem .7rem; font-size: .82rem; line-height: 1.35; box-shadow: var(--shadow-lg); max-width: 300px; display: grid; gap: .1rem; }
.chart-tip strong { font-weight: 650; }
.chart-tip span { color: #D6D1C8; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--gray-700); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend__swatch--done { background: var(--chart-done); }
.legend__swatch--open { background: var(--chart-open); }

/* per-course tally: horizontal stacked bars */
.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tally li { margin: 0; }
.tally__row { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) 6.5rem; gap: 1rem; align-items: center;
  padding: .55rem .6rem; border-radius: var(--r); color: var(--ink); }
.tally__row:hover, .tally__row:focus-visible { background: var(--gray-100); text-decoration: none; }
.tally__name { display: grid; min-width: 0; line-height: 1.3; }
.tally__name strong { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tally__name > span { font-size: .78rem; color: var(--gray-600); display: flex; gap: .4rem; align-items: center; }
.tally__name .chip { font-size: .62rem; padding: .1em .5em; }
.tally__bar { display: flex; gap: 2px; width: var(--w); min-width: 4px; height: 14px; }
.tally__bar i { display: block; height: 100%; min-width: 2px; }
.tally__done { background: var(--chart-done); }
.tally__open { background: var(--chart-open); }
.tally__bar i:last-child { border-radius: 0 4px 4px 0; }
.tally__num { display: grid; justify-items: end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tally__num strong { font-size: 1rem; }
.tally__num span { font-size: .78rem; color: var(--gray-600); }
.tally__note { font-size: .85rem; margin: 0; }
@media (max-width: 700px) {
  .tally__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "bar bar"; gap: .35rem .75rem; }
  .tally__name { grid-area: name; } .tally__num { grid-area: num; } .tally__bar { grid-area: bar; }
  .colchart { --axis: 40px; }
  .colchart__plot { height: 200px; }
}
@media (max-width: 700px) {
  .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .report-kpis .stat { padding: .9rem; }
  .report-kpis .stat__n { font-size: 1.6rem; }
}