/* ============================================================
   Kidora Admin Skin — Storybook (Phase 9)
   ------------------------------------------------------------
   Re-skins admin.html (currently dark navy) to the Storybook
   palette: light bg, surface panels, sky/coral accents, plus
   Jakarta Sans typography.

   Data-dense tables stay readable on light bg by using
   subtle alternating row treatment + caption-style headers.
   ============================================================ */

[data-design="storybook"] body {
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-font-sans);
}

/* ============================================================
   Gate (login)
   ============================================================ */
[data-design="storybook"] #gate {
  background: linear-gradient(135deg, var(--k-bg-alt), var(--k-bg));
}
[data-design="storybook"] #gate .card {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-xl);
  box-shadow: var(--k-shadow-lg);
  padding: 36px;
  width: 420px;
}
[data-design="storybook"] #gate h1 {
  font-family: var(--k-font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--k-ink);
  margin-bottom: 8px;
  letter-spacing: 0;
}
[data-design="storybook"] #gate .logo span {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}
[data-design="storybook"] #gate p {
  color: var(--k-ink-soft);
  font-size: 13px;
  font-weight: 500;
}
[data-design="storybook"] #gate input {
  background: var(--k-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--k-r-md);
  padding: 14px 16px;
  color: var(--k-ink);
  font-family: var(--k-font-sans);
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              background var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] #gate input::placeholder { color: var(--k-ink-muted); }
[data-design="storybook"] #gate input:focus {
  outline: none;
  background: var(--k-surface);
  border-color: var(--k-sky);
  box-shadow: 0 0 0 4px var(--k-sky-soft);
}
[data-design="storybook"] #gate button {
  background: var(--k-sky);
  color: var(--k-ink-on-color);
  border: none;
  border-radius: var(--k-r-md);
  padding: 14px;
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(23, 34, 56, 0.18);
  transition: filter var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] #gate button:hover { filter: brightness(1.05); }
[data-design="storybook"] #gate button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(23, 34, 56, 0.18);
}
[data-design="storybook"] #gate .err {
  color: var(--k-bad);
  font-weight: 700;
  font-size: 12px;
}

/* ============================================================
   Layout — sidebar + main
   ============================================================ */
[data-design="storybook"] .shell { background: var(--k-bg); }
[data-design="storybook"] .side {
  width: 240px;
  background: var(--k-surface);
  border-right: 1px solid var(--k-line);
  padding: 20px 14px;
  color: var(--k-ink);
}
[data-design="storybook"] .brand .blocks span {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

[data-design="storybook"] .side > div[style*="font-weight:700"] {
  font-family: var(--k-font-display) !important;
  color: var(--k-ink) !important;
}
[data-design="storybook"] .side > div[style*="muted"] { color: var(--k-ink-muted) !important; }

/* Nav buttons */
[data-design="storybook"] .nav button {
  background: transparent;
  color: var(--k-ink-soft);
  border-radius: var(--k-r-md);
  padding: 12px 14px;
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
  transition: background var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .nav button:hover {
  background: var(--k-bg-alt);
  color: var(--k-ink);
}
[data-design="storybook"] .nav button.active {
  background: var(--k-sky);
  color: var(--k-ink-on-color);
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(23, 34, 56, 0.18);
}

[data-design="storybook"] .side .footer {
  color: var(--k-ink-muted);
}
[data-design="storybook"] .side .footer button {
  color: var(--k-ink-muted);
}
[data-design="storybook"] .side .footer button:hover { color: var(--k-coral); }

/* Main + topbar — scoped to admin only (body.admin-page).
   The dashboard (index.html) also uses .main but needs the input bar
   flush to viewport bottom; bleeding admin padding there leaves a
   60px dead gap below the input. */
[data-design="storybook"] body.admin-page .main {
  background: var(--k-bg);
  padding: 28px 32px 60px;
}
[data-design="storybook"] body.admin-page .topbar { margin-bottom: 24px; }
[data-design="storybook"] .topbar h2 {
  font-family: var(--k-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--k-ink);
  letter-spacing: -0.01em;
}
[data-design="storybook"] .topbar .refresh {
  background: var(--k-surface);
  color: var(--k-ink);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-md);
  padding: 10px 16px;
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-size: 13px;
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .topbar .refresh:hover {
  background: var(--k-bg-alt);
  border-color: var(--k-sky);
  color: var(--k-sky);
}

/* ============================================================
   Stat cards (KIDORA acronym)
   ============================================================ */
[data-design="storybook"] .stats { gap: 14px; margin-bottom: 24px; }
[data-design="storybook"] .stat {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  padding: 18px 20px;
  box-shadow: var(--k-shadow-sm);
  transition: box-shadow var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .stat:hover {
  box-shadow: var(--k-shadow);
  border-color: var(--k-line-strong);
}
[data-design="storybook"] .stat .label {
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
}
[data-design="storybook"] .stat .value {
  font-family: var(--k-font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--k-ink);
  margin-top: 8px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* KIDORA letter accent colors */
[data-design="storybook"] .stat.k { border-left: 4px solid var(--k-coral); }
[data-design="storybook"] .stat.i { border-left: 4px solid var(--k-sunshine); }
[data-design="storybook"] .stat.d { border-left: 4px solid var(--k-warn); }
[data-design="storybook"] .stat.o { border-left: 4px solid var(--k-sage); }
[data-design="storybook"] .stat.r { border-left: 4px solid var(--k-sky); }
[data-design="storybook"] .stat.a { border-left: 4px solid var(--k-plum); }

/* ============================================================
   Panels
   ============================================================ */
[data-design="storybook"] .panel {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--k-shadow-sm);
}
[data-design="storybook"] .panel h3 {
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
  margin-bottom: 16px;
}

/* ============================================================
   Tables
   ============================================================ */
[data-design="storybook"] table { font-family: var(--k-font-sans); }
[data-design="storybook"] th {
  color: var(--k-ink-muted);
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 10px;
  border-bottom: 1px solid var(--k-line-strong);
}
[data-design="storybook"] td {
  color: var(--k-ink);
  font-size: 13px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--k-line);
}
[data-design="storybook"] tr:hover td { background: var(--k-bg-alt); }
[data-design="storybook"] td.mono {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--k-ink-soft);
}

/* Pills */
[data-design="storybook"] .pill {
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--k-r-pill);
  letter-spacing: 0.04em;
}
[data-design="storybook"] .pill.ok    { background: var(--k-good-soft); color: var(--k-good); }
[data-design="storybook"] .pill.warn  { background: var(--k-warn-soft); color: var(--k-warn); }
[data-design="storybook"] .pill.bad   { background: var(--k-bad-soft);  color: var(--k-bad); }
[data-design="storybook"] .pill.muted { background: var(--k-bg-alt);    color: var(--k-ink-muted); }
[data-design="storybook"] .pill.action {
  background: var(--k-sky-soft);
  color: var(--k-sky);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

/* Row actions */
[data-design="storybook"] .row-actions button {
  background: var(--k-bg-alt);
  border: 1px solid var(--k-line);
  color: var(--k-ink);
  padding: 6px 12px;
  border-radius: var(--k-r-sm);
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 700;
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .row-actions button:hover {
  background: var(--k-sky-soft);
  border-color: var(--k-sky);
  color: var(--k-sky);
}
[data-design="storybook"] .row-actions button.danger {
  color: var(--k-bad);
  border-color: var(--k-bad-soft);
}
[data-design="storybook"] .row-actions button.danger:hover {
  background: var(--k-bad-soft);
  border-color: var(--k-bad);
}

/* Search input */
[data-design="storybook"] .search {
  background: var(--k-surface);
  border: 2px solid var(--k-line-strong);
  border-radius: var(--k-r-md);
  padding: 10px 14px;
  color: var(--k-ink);
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .search::placeholder { color: var(--k-ink-muted); }
[data-design="storybook"] .search:focus {
  outline: none;
  border-color: var(--k-sky);
  box-shadow: 0 0 0 4px var(--k-sky-soft);
}

/* Charts */
[data-design="storybook"] .bars .bar {
  background: linear-gradient(180deg, var(--k-sky) 0%, var(--k-plum) 100%);
  border-radius: 4px 4px 0 0;
}
[data-design="storybook"] .bars .bar:hover::after {
  background: var(--k-ink);
  color: #fff;
  font-family: var(--k-font-sans);
  font-weight: 700;
}
[data-design="storybook"] .bars-labels span {
  color: var(--k-ink-muted);
  font-family: var(--k-font-sans);
  font-weight: 700;
}

[data-design="storybook"] .empty {
  color: var(--k-ink-muted);
  font-family: var(--k-font-sans);
  font-weight: 600;
  padding: 36px;
}

/* Action breakdown list */
[data-design="storybook"] .actlist .ar .name {
  color: var(--k-ink);
  font-family: ui-monospace, monospace;
}
[data-design="storybook"] .actlist .ar .meter {
  background: var(--k-bg-alt);
  border-radius: var(--k-r-pill);
}
[data-design="storybook"] .actlist .ar .meter > div {
  background: linear-gradient(90deg, var(--k-coral), var(--k-sunshine));
  border-radius: var(--k-r-pill);
}
[data-design="storybook"] .actlist .ar .count {
  color: var(--k-ink-soft);
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* JSON block */
[data-design="storybook"] .json {
  background: var(--k-bg-alt);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-sm);
  padding: 10px 12px;
  color: var(--k-ink-soft);
  font-size: 11px;
}

/* ============================================================
   Admin modals
   ============================================================ */
[data-design="storybook"] .modal-backdrop {
  background: rgba(23, 34, 56, 0.42);
  backdrop-filter: blur(4px);
}
[data-design="storybook"] .modal {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-xl);
  padding: 28px;
  box-shadow: var(--k-shadow-lg);
  color: var(--k-ink);
  font-family: var(--k-font-sans);
}
[data-design="storybook"] .modal h3 {
  font-family: var(--k-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--k-ink);
  margin-bottom: 16px;
}
[data-design="storybook"] .modal .body {
  color: var(--k-ink-soft);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
}
[data-design="storybook"] .modal .link {
  background: var(--k-bg-alt);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  padding: 12px 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--k-ink);
}
[data-design="storybook"] .modal button {
  background: var(--k-surface);
  border: 1px solid var(--k-line-strong);
  color: var(--k-ink);
  border-radius: var(--k-r-md);
  padding: 10px 18px;
  font-family: var(--k-font-sans);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .modal button:hover {
  background: var(--k-bg-alt);
  border-color: var(--k-sky);
  color: var(--k-sky);
}
[data-design="storybook"] .modal button.primary {
  background: var(--k-sky);
  border-color: transparent;
  color: var(--k-ink-on-color);
  box-shadow: 0 4px 0 rgba(23, 34, 56, 0.18);
}
[data-design="storybook"] .modal button.primary:hover { filter: brightness(1.05); }

/* Forms */
[data-design="storybook"] .form-row label {
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
}
[data-design="storybook"] .form-row input,
[data-design="storybook"] .form-row select,
[data-design="storybook"] .form-row textarea {
  background: var(--k-surface);
  border: 2px solid var(--k-line-strong);
  border-radius: var(--k-r-md);
  padding: 12px 14px;
  color: var(--k-ink);
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .form-row input:focus,
[data-design="storybook"] .form-row select:focus,
[data-design="storybook"] .form-row textarea:focus {
  outline: none;
  border-color: var(--k-sky);
  box-shadow: 0 0 0 4px var(--k-sky-soft);
}

/* Primary action button */
[data-design="storybook"] .btn-primary {
  background: var(--k-sky);
  color: var(--k-ink-on-color);
  border: none;
  border-radius: var(--k-r-md);
  padding: 12px 18px;
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(23, 34, 56, 0.18);
  cursor: pointer;
  transition: filter var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
[data-design="storybook"] .btn-primary:hover { filter: brightness(1.05); background: var(--k-sky); }
[data-design="storybook"] .btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(23, 34, 56, 0.18);
}

/* Daycare chip list */
[data-design="storybook"] .chip-row {
  background: var(--k-bg-alt);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  padding: 10px 14px;
  color: var(--k-ink);
  font-family: var(--k-font-sans);
  font-weight: 600;
}
[data-design="storybook"] .chip-row .meta { color: var(--k-ink-muted); }
[data-design="storybook"] .chip-row .x {
  color: var(--k-bad);
  font-weight: 800;
}
[data-design="storybook"] .chip-row .x:hover { color: var(--k-bad); filter: brightness(1.1); }