/* CaribClicks OS, "sunny" look: white base, yellow and orange as the accents, green kept for success only.
   Brand colours measured on the logo: yellow #F8C028, orange #F89048, green #78D850.
   Bright colours are used for fills and decoration. Text and links use the darker tokens (contrast >= 4.5). */
:root {
  --bg:#FFFBF2; --surface:#FFFFFF; --text:#1F1A14; --muted:#5E5547; --line:#F0E6D2;
  --yellow:#F8C028; --yellow-50:#FFF7D9; --yellow-200:#FFE08A; --yellow-ink:#3A2A00;
  --orange:#F89048; --orange-50:#FFEBDC; --orange-ink:#8A3B00;
  --green:#78D850; --green-50:#E8F8DF; --green-ink:#1B5E20;
  --danger-50:#FDECEA; --danger-ink:#9C1C14;
  --sun:linear-gradient(135deg,var(--yellow),var(--orange));
  --on-primary:#2B1A00; --link:#B54700; --focus:#1F1A14;
  --shadow:0 1px 2px rgba(120,80,0,.06), 0 10px 28px rgba(248,144,72,.10);
  --radius:18px;
  color-scheme:light; /* always light: the browser's dark theme must not change the look */
}
/* Dark theme: chosen with the button in the header, never automatic. Neutral near-black with yellow and orange accents. */
:root[data-theme="dark"] {
  --bg:#111214; --surface:#1A1C1F; --text:#F4F1EA; --muted:#B5B0A4; --line:#2C2F33;
  --yellow-50:#2E2A10; --yellow-200:#5A4A12; --yellow-ink:#FFE08A; --orange-50:#33200F; --orange-ink:#FFC9A0;
  --green-50:#16301A; --green-ink:#B7EFA0; --danger-50:#3D1816; --danger-ink:#FFB4AB;
  --on-primary:#1A1000; --link:#FFC24D; --focus:#F8C028; color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.4);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--link); text-underline-offset:3px; text-decoration-thickness:2px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--surface); color:var(--text); padding:8px 12px; border-radius:10px; z-index:20; }

/* Top bar */
.top { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:12px 22px;
  background:var(--surface); border-bottom:1px solid var(--line); }
.top::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:var(--sun); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:-.02em; font-size:1.1rem; }
.brand img { width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--yellow); }
.brand b { color:var(--link); }
.top nav { display:flex; flex-wrap:wrap; gap:6px; flex:1; margin-left:6px; }
.top nav a { padding:8px 16px; border-radius:999px; color:var(--text); text-decoration:none; font-weight:700; }
.top nav a:hover { background:var(--yellow-50); }
.top nav a[aria-current="page"] { background:var(--sun); color:var(--on-primary); box-shadow:0 4px 12px rgba(248,144,72,.35); }
.logout { display:flex; align-items:center; gap:8px; margin:0; } .who { color:var(--muted); font-size:.92rem; }

main { max-width:1040px; margin:0 auto; padding:28px 20px 56px; }
h1 { font-size:2.1rem; line-height:1.15; margin:6px 0 22px; letter-spacing:-.03em; font-weight:900; }
h1::after { content:""; display:block; width:64px; height:6px; border-radius:999px; background:var(--sun); margin-top:10px; }
h1 .muted { display:block; font-size:1rem; font-weight:500; letter-spacing:0; margin-top:4px; }
h2 { font-size:1.15rem; margin:0 0 12px; letter-spacing:-.01em; font-weight:800; } h3 { font-size:1.05rem; margin:0 0 6px; }
.muted { color:var(--muted); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:0 0 18px; box-shadow:var(--shadow); }
.narrow { max-width:420px; margin-inline:auto; }
.row { padding:14px 0; border-top:1px solid var(--line); } .row:first-of-type { border-top:0; padding-top:2px; }
.copy { white-space:pre-wrap; }

/* Hero overview: sunny gradient, big numbers */
.overview { position:relative; overflow:hidden; border:0; padding:22px; background:linear-gradient(135deg,var(--yellow-50) 0%,var(--surface) 55%,var(--orange-50) 130%); }
.overview::before { content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:var(--sun); opacity:.18; }
.overview > * { position:relative; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:0; }
.facts > div { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); border-top:5px solid var(--yellow); }
.facts > div:nth-child(2) { border-top-color:var(--orange); } .facts > div:nth-child(3) { border-top-color:var(--yellow); } .facts > div:nth-child(4) { border-top-color:var(--orange); }
.facts dt { color:var(--muted); font-size:.86rem; font-weight:700; text-transform:none; }
.facts dd { margin:4px 0 0; font-size:1.8rem; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.target { margin:18px 0 6px; font-weight:700; }
progress { display:block; width:100%; height:16px; border:0; border-radius:999px; overflow:hidden; background:var(--line); accent-color:var(--orange); }
progress::-webkit-progress-bar { background:var(--line); border-radius:999px; }
progress::-webkit-progress-value { background:var(--sun); border-radius:999px; }
progress::-moz-progress-bar { background:var(--sun); border-radius:999px; }

/* Status badges: always a text label, never colour alone */
.badge { display:inline-block; padding:2px 11px; border:1px solid var(--line); border-radius:999px; font-size:.8rem; font-weight:800; background:var(--surface); }
.badge.warn { background:var(--orange-50); color:var(--orange-ink); border-color:var(--orange); }
.badge.due { background:var(--yellow-50); color:var(--yellow-ink); border-color:var(--yellow); }
.badge.ok { background:var(--green-50); color:var(--green-ink); border-color:var(--green); }
.messages { list-style:none; padding:0; margin:0 0 16px; }
.msg { padding:12px 16px; border-radius:14px; border:1px solid var(--line); margin:0 0 8px; background:var(--surface); }
.msg.success { background:var(--green-50); color:var(--green-ink); border-color:var(--green); }
.msg.error { background:var(--danger-50); color:var(--danger-ink); border-color:var(--danger-ink); }
.msg.warn { background:var(--yellow-50); color:var(--yellow-ink); border-color:var(--yellow); }

/* Forms and buttons */
label { display:block; margin:14px 0 4px; font-weight:700; font-size:.94rem; }
input, select { width:100%; max-width:480px; padding:11px 14px; border:2px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; }
input:hover, select:hover { border-color:var(--yellow); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
button { padding:11px 22px; border:0; border-radius:999px; background:var(--sun); color:var(--on-primary); font:inherit; font-weight:800; cursor:pointer; min-height:46px;
  box-shadow:0 6px 16px rgba(248,144,72,.35); transition:transform .12s, box-shadow .12s; }
button:hover { transform:translateY(-1px); box-shadow:0 9px 20px rgba(248,144,72,.45); }
button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
button.secondary { background:var(--surface); color:var(--text); border:2px solid var(--orange); box-shadow:none; }
button.secondary:hover { background:var(--orange-50); box-shadow:none; }
button.link { background:none; color:var(--link); padding:4px 8px; min-height:0; text-decoration:underline; font-weight:700; box-shadow:none; transform:none; }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.filters { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end; margin-bottom:18px; } .filters label { margin:0; } .filters input, .filters select { width:auto; min-width:180px; }
details { margin:8px 0; } summary { cursor:pointer; padding:6px 0; color:var(--link); font-weight:800; }
pre.copy { font:inherit; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px; }

.tablewrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); }
thead th { background:var(--yellow-50); color:var(--yellow-ink); font-size:.86rem; letter-spacing:.02em; }
tbody tr:hover { background:var(--yellow-50); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.plain { list-style:none; padding:0; margin:0; } .plain li { padding:6px 0; }
.pager { display:flex; gap:16px; align-items:center; margin:16px 0; }

/* Login */
.login { text-align:center; margin:10px auto 4px; }
.login img { width:min(280px,72%); height:auto; border-radius:24px; background:#fff; padding:12px; border:2px solid var(--yellow-200); box-shadow:var(--shadow); }
.login-card { text-align:left; border-top:6px solid var(--yellow); }
.login-card button[type="submit"] { margin-top:20px; width:100%; }

@media (max-width:640px) {
  main { padding:18px 14px 44px; } h1 { font-size:1.7rem; }
  .top { padding:10px 14px; } .top nav { order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; margin-left:0; }
  .facts dd { font-size:1.5rem; } .overview { padding:16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } button:hover { transform:none; } }

h1.centered { text-align:center; } h1.centered::after { margin-inline:auto; }

/* Theme switch */
.theme-toggle { padding:6px 14px; min-height:36px; font-size:.86rem; background:var(--surface); color:var(--text); border:2px solid var(--yellow); box-shadow:none; }
.theme-toggle:hover { background:var(--yellow-50); box-shadow:none; transform:none; }