/* Portal Rintis Jadual Waktu KP2027 — gaya kongsi (borang + dashboard)
   Layout: kepala navy berjalur bendera Perak (putih-kuning-hitam); borang satu lajur,
   dashboard grid; jalur kemajuan berbentuk sel jadual waktu. */
:root {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #edf1f7;
  --line: #d8dfea;
  --line-strong: #b6c1d3;
  --ink: #0f1b30;
  --ink-2: #43506a;
  --ink-3: #66728a;
  --navy: #13284b;
  --navy-2: #1c3766;
  --navy-ink: #ffffff;
  --navy-sub: #b7c6e4;
  --accent: #1f4fc9;
  --accent-hover: #1a43ab;
  --accent-ink: #ffffff;
  --accent-soft: #e8eefc;
  --accent-line: #a8bdf0;
  --kuning: #f5c02e;
  --kuning-soft: #fff4d1;
  --kuning-ink: #5b4300;
  --good: #0ca30c;
  --good-ink: #0b6a18;
  --good-soft: #e3f4e4;
  --critical: #d03b3b;
  --critical-ink: #b02323;
  --critical-soft: #fbe8e8;
  --warning-soft: #fff1d6;
  --warning-ink: #7a4b00;
  /* data viz — satu warna (biru) + ramp ordinal tervalidasi */
  --viz-1: #2a78d6;
  --viz-soft: #86b6ef;
  --viz-strong: #1c5cab;
  --ord-1: #86b6ef;
  --ord-2: #5598e7;
  --ord-3: #2a78d6;
  --ord-4: #184f95;
  --grid: #e4e9f1;
  /* bendera Perak (tidak bertukar ikut tema) */
  --perak-1: #ffffff;
  --perak-2: #f5c02e;
  --perak-3: #111111;
  --shadow: 0 1px 2px rgba(15, 27, 48, .05), 0 6px 20px rgba(15, 27, 48, .05);
  --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 10px;
  --r-sm: 7px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #121c2e; --surface-2: #18243b; --line: #24324d; --line-strong: #3a4a6a;
    --ink: #e8edf6; --ink-2: #b3bfd5; --ink-3: #8a97b0;
    --navy: #0a1631; --navy-2: #13254a; --navy-ink: #f2f5fb; --navy-sub: #9db0d6;
    --accent: #7ea4ff; --accent-hover: #9bb8ff; --accent-ink: #0a1428; --accent-soft: #1a2a4e; --accent-line: #3d5693;
    --kuning: #f5c02e; --kuning-soft: #3a3113; --kuning-ink: #f6da86;
    --good-ink: #6bd56b; --good-soft: #12301a; --critical-ink: #ff8f8f; --critical-soft: #3b1818;
    --warning-soft: #3a2a10; --warning-ink: #f5c875;
    --viz-1: #3987e5; --viz-soft: #184f95; --viz-strong: #86b6ef;
    --ord-1: #184f95; --ord-2: #256abf; --ord-3: #3987e5; --ord-4: #86b6ef;
    --grid: #1f2b42;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --surface: #121c2e; --surface-2: #18243b; --line: #24324d; --line-strong: #3a4a6a;
  --ink: #e8edf6; --ink-2: #b3bfd5; --ink-3: #8a97b0;
  --navy: #0a1631; --navy-2: #13254a; --navy-ink: #f2f5fb; --navy-sub: #9db0d6;
  --accent: #7ea4ff; --accent-hover: #9bb8ff; --accent-ink: #0a1428; --accent-soft: #1a2a4e; --accent-line: #3d5693;
  --kuning: #f5c02e; --kuning-soft: #3a3113; --kuning-ink: #f6da86;
  --good-ink: #6bd56b; --good-soft: #12301a; --critical-ink: #ff8f8f; --critical-soft: #3b1818;
  --warning-soft: #3a2a10; --warning-ink: #f5c875;
  --viz-1: #3987e5; --viz-soft: #184f95; --viz-strong: #86b6ef;
  --ord-1: #184f95; --ord-2: #256abf; --ord-3: #3987e5; --ord-4: #86b6ef;
  --grid: #1f2b42;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-size: .86em; letter-spacing: .01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.wrap { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: 16px; }
.wrap-lebar { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }

/* Jalur bendera Perak */
.perak-stripe { display: grid; grid-template-rows: 3px 3px 3px; }
.perak-stripe span:nth-child(1) { background: var(--perak-1); }
.perak-stripe span:nth-child(2) { background: var(--perak-2); }
.perak-stripe span:nth-child(3) { background: var(--perak-3); }

/* Kepala */
.kepala { background: var(--navy); color: var(--navy-ink); }
.kepala .eyebrow {
  font-family: var(--f-display); font-weight: 700; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kuning);
}
.kepala .sub { color: var(--navy-sub); }

/* Butang */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 42px; padding: .5em 1.05em; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-utama { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-utama:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-bahaya { border-color: var(--critical-ink); color: var(--critical-ink); background: var(--surface); }
.btn-bahaya:hover { background: var(--critical-soft); color: var(--critical-ink); border-color: var(--critical-ink); }
.btn-pepijat { min-height: 34px; padding: .3em .75em; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-hantu { background: transparent; border-color: transparent; color: var(--accent); padding-inline: .4em; }
.btn-hantu:hover { background: var(--accent-soft); border-color: transparent; }

/* Medan input */
.medan {
  width: 100%; min-height: 44px; padding: .55em .75em; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
textarea.medan { min-height: 108px; resize: vertical; line-height: 1.5; }
.medan:hover { border-color: var(--ink-3); }
.medan:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.medan::placeholder { color: var(--ink-3); opacity: 1; }
.medan.tidak-sah { border-color: var(--critical-ink); }

/* Tag lajur slaid — macam nota pelekat pada slaid bengkel */
.tag-lajur {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--kuning-soft); color: var(--kuning-ink);
  padding: .2em .6em; border-radius: 4px; white-space: nowrap;
}

/* Pil status (sentiasa ikon + label) */
.pil {
  display: inline-flex; align-items: center; gap: .35em; font-size: .82rem; font-weight: 600;
  padding: .15em .6em; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.pil-sudah { background: var(--good-soft); color: var(--good-ink); }
.pil-belum { background: var(--surface-2); color: var(--ink-2); }
.pil-amaran { background: var(--warning-soft); color: var(--warning-ink); }
.pil svg { width: 13px; height: 13px; flex: none; }

/* Banner */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em;
  padding: .7em 1em; border-radius: var(--r-sm); font-size: .95rem;
  background: var(--kuning-soft); color: var(--kuning-ink);
}
.banner b { font-weight: 700; }
.banner .btn { min-height: 34px; padding: .25em .8em; font-size: .88rem; }
.banner-ralat { background: var(--critical-soft); color: var(--critical-ink); }
.banner-ok { background: var(--good-soft); color: var(--good-ink); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .65em 1.1em; border-radius: var(--r-sm);
  font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); z-index: 90; max-width: calc(100% - 32px);
}

.kaki {
  padding-block: 28px 40px; color: var(--ink-3); font-size: .88rem;
  display: flex; flex-wrap: wrap; gap: .5em 1.5em; justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}