/* Clarity Training base: tokens (light + dark), typography, buttons, forms, tables, notices, modal, toast, info. */
:root {
  --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef2f5; --surface-3:#e3e9ee; --text:#14202b; --muted:#52606d; --border:#d5dde4;
  --brand:#0b6e8a; --brand-strong:#095a71; --brand-btn:#0b6e8a; --brand-btn-fg:#ffffff; --brand-btn-hover:#095a71; --brand-soft:#e2f2f7;
  --accent:#e8a33d; --accent-soft:#fff3d6;
  --ok:#1d7a3e; --ok-soft:#e3f4e8; --bad:#b42318; --bad-soft:#fde8e6; --warn:#8a5a00; --warn-soft:#fff3d6;
  --focus:#2563eb; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 16px rgba(16,24,40,.06); --shadow-lg:0 12px 40px rgba(16,24,40,.14);
  --radius:10px; color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f171e; --surface:#16212b; --surface-2:#1d2b37; --surface-3:#253644; --text:#e6edf2; --muted:#a3b1bd; --border:#2c3c4a;
    --brand:#5cc3df; --brand-strong:#8fd6ea; --brand-btn:#5cc3df; --brand-btn-fg:#06222b; --brand-btn-hover:#7fd2e8; --brand-soft:#173543;
    --accent:#f3c35c; --accent-soft:#33270c;
    --ok:#5fd18a; --ok-soft:#12301e; --bad:#ff8a80; --bad-soft:#3a1714; --warn:#f3c35c; --warn-soft:#33270c;
    --focus:#93c5fd; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 12px 40px rgba(0,0,0,.45); color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0f171e; --surface:#16212b; --surface-2:#1d2b37; --surface-3:#253644; --text:#e6edf2; --muted:#a3b1bd; --border:#2c3c4a;
  --brand:#5cc3df; --brand-strong:#8fd6ea; --brand-btn:#5cc3df; --brand-btn-fg:#06222b; --brand-btn-hover:#7fd2e8; --brand-soft:#173543;
  --accent:#f3c35c; --accent-soft:#33270c;
  --ok:#5fd18a; --ok-soft:#12301e; --bad:#ff8a80; --bad-soft:#3a1714; --warn:#f3c35c; --warn-soft:#33270c;
  --focus:#93c5fd; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 12px 40px rgba(0,0,0,.45); color-scheme:dark;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--text); font-family:Calibri,"Segoe UI",Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font-family:inherit; font-size:inherit; }
img { max-width:100%; height:auto; }
a { color:var(--brand); }
a:hover { color:var(--brand-strong); }
h1, h2, h3, h4 { line-height:1.2; margin:0 0 .5em; }
p { margin:0 0 1em; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[hidden] { display:none !important; }
/* Visually hidden but read by screen readers. margin:-1px, padding:0 and clip-path keep it from widening tables or the page on phones. */
.sr-only { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.muted { color:var(--muted); }
.container { max-width:1200px; margin:0 auto; padding:0 16px; }

/* Buttons: one base so side-by-side buttons are identical in size (house rule). */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; vertical-align:middle; font-family:inherit; font-size:15px; line-height:1.25; min-height:40px; padding:10px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--surface-2); color:var(--text); }
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn-primary { background:var(--brand-btn); border-color:var(--brand-btn); color:var(--brand-btn-fg); }
.btn-primary:hover { background:var(--brand-btn-hover); color:var(--brand-btn-fg); }
.btn-danger { background:var(--bad); border-color:var(--bad); color:#fff; }
:root[data-theme="dark"] .btn-danger { color:#2a0d0a; }
.btn-danger:hover { filter:brightness(1.08); color:#fff; }
.btn-lg { font-size:17px; min-height:48px; padding:12px 22px; }
.btn-sm { padding:5px 11px; min-height:32px; font-size:14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Forms */
.field { margin-bottom:16px; }
.field label, .label { display:block; font-weight:600; margin-bottom:6px; }
.field .hint { font-size:14px; color:var(--muted); margin-top:4px; }
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=date], select, textarea {
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); line-height:1.3; }
textarea { min-height:110px; resize:vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color:var(--bad); }
.field-error { color:var(--bad); font-size:14px; margin-top:4px; }
.check { display:flex; gap:10px; align-items:flex-start; }
.check input { width:20px; height:20px; margin-top:2px; accent-color:var(--brand-btn); flex-shrink:0; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:46px; }
.password-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:38px; height:34px; border:0; background:none; color:var(--muted); cursor:pointer; border-radius:6px; display:grid; place-items:center; }
.password-toggle svg { width:20px; height:20px; }

/* Notices and flashes */
.notice { border-radius:var(--radius); padding:12px 14px; margin:0 0 16px; border:1px solid; }
.notice-success { background:var(--ok-soft); border-color:var(--ok); }
.notice-error { background:var(--bad-soft); border-color:var(--bad); }
.notice-info { background:var(--brand-soft); border-color:var(--brand); }
.notice-warning { background:var(--warn-soft); border-color:var(--warn); }
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:99px; font-size:13px; font-weight:700; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); white-space:nowrap; }
.badge-ok { background:var(--ok-soft); color:var(--ok); border-color:var(--ok); }
.badge-bad { background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
.badge-warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
.badge-brand { background:var(--brand-soft); color:var(--brand); border-color:var(--brand); }

/* Cards and tables */
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:24px; }
.card + .card { margin-top:16px; }
.table-wrap { position:relative; overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
table.table { width:100%; border-collapse:collapse; font-size:15px; }
.table th, .table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.table th { background:var(--surface-2); font-weight:700; white-space:nowrap; }
.table tr:last-child td { border-bottom:0; }
.table th[data-sort] { cursor:pointer; user-select:none; }
.table th[data-sort]:hover { color:var(--brand); }
.sort-arrow { font-size:11px; margin-left:4px; color:var(--muted); }

/* Modal (confirm and view) - never closes on outside click, only Cancel/Close or Escape */
.modal-overlay { position:fixed; inset:0; background:rgba(5,12,18,.55); display:grid; place-items:center; padding:16px; z-index:100; }
.modal { background:var(--surface); color:var(--text); border-radius:14px; box-shadow:var(--shadow-lg); width:min(520px,100%); max-height:90vh; overflow:auto; padding:24px; }
.modal h2 { font-size:20px; }
.modal .btn-row { justify-content:flex-end; margin-top:20px; }

/* Toast */
.toast-host { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120; display:grid; gap:8px; width:max-content; max-width:calc(100% - 32px); }
.toast { background:var(--text); color:var(--bg); padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-lg); font-size:15px; }

/* Info bubble: hover, focus and click; fixed position (positioned by ui.js) */
.info-btn { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); background:none; font-size:12px; font-weight:700; cursor:pointer; vertical-align:middle; margin-left:6px; padding:0; line-height:1; }
.info-btn:hover, .info-btn[aria-expanded="true"] { border-color:var(--brand); color:var(--brand); }
.info-bubble { position:fixed; z-index:130; max-width:320px; background:var(--text); color:var(--bg); padding:10px 12px; border-radius:8px; font-size:14px; line-height:1.45; box-shadow:var(--shadow-lg); font-weight:400; }

/* Spinner */
.spinner { animation:spin 1s linear infinite; color:var(--brand); }
@keyframes spin { to { transform:rotate(360deg); } }

/* Theme toggle and icon buttons */
.icon-btn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; flex-shrink:0; }
.icon-btn:hover { background:var(--surface-2); }
.icon-btn svg { width:20px; height:20px; }

/* Empty states */
.empty { text-align:center; padding:40px 16px; color:var(--muted); }
.empty svg { width:48px; height:48px; color:var(--brand); margin-bottom:8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
}