/* Direction: ParkEase — deep forest green sidebar, electric lime actions, cool light-grey workspace */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #edf2f0;
  --surface: #ffffff;
  --surface-2: #f3f7f5;
  --border: #d5dfda;
  --border-strong: #aeb4aa;
  --ink: #0c3222;
  --muted: #53665c;
  --accent: #c6f432;
  --accent-hover: #a8cf2b;
  --accent-ink: #1c2207;
  --accent-text: #1c5a2b;
  --accent-strong: #5e7318;
  --accent-soft: #e8f2d5;
  --accent-border: #dbf39b;
  --success: #1d8a4b;
  --success-ink: #ffffff;
  --success-soft: #d4e6dc;
  --success-strong: #176c3a;
  --warning: #b5700c;
  --warning-ink: #ffffff;
  --warning-soft: #e6e2d5;
  --warning-strong: #8e5709;
  --danger: #c63d3d;
  --danger-ink: #ffffff;
  --danger-soft: #e8dcdb;
  --danger-strong: #a73434;
  --chart-1: #77950d;
  --chart-2: #149b8c;
  --chart-3: #1076b3;
  --chart-4: #9f73d6;
  --chart-5: #af3f65;
  --chart-6: #c5761b;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgba(12, 50, 34, 0.06), 0 8px 24px rgba(12, 50, 34, 0.06);
  --x-forest: #0b3524;
  --x-forest-2: #12503a;
  --x-on-forest: #e4f2ea;
  --x-lime: #c6f432;
  --x-on-lime: #0b3524;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0e1203;
  --surface: #262a1c;
  --surface-2: #1a1e10;
  --border: #303326;
  --border-strong: #56594f;
  --ink: #edf2f0;
  --muted: #949891;
  --accent: #c6f432;
  --accent-hover: #cff651;
  --accent-ink: #1c2207;
  --accent-text: #c6f432;
  --accent-strong: #c6f432;
  --accent-soft: #36440d;
  --accent-border: #617818;
  --success: #1d8a4b;
  --success-ink: #ffffff;
  --success-soft: #112c13;
  --success-strong: #4fa472;
  --warning: #b5700c;
  --warning-ink: #ffffff;
  --warning-soft: #332705;
  --warning-strong: #c08631;
  --danger: #c63d3d;
  --danger-ink: #ffffff;
  --danger-soft: #361b10;
  --danger-strong: #d36868;
  --chart-1: #c6f432;
  --chart-2: #24dac6;
  --chart-3: #7ec6fd;
  --chart-4: #ec99fd;
  --chart-5: #fba2a0;
  --chart-6: #f3b113;
}

/* ParkEase — status chips, slot map, charts, tables */
.st { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.st::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.st-ok { background: var(--success-soft); color: var(--success-strong); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.st-warn { background: var(--warning-soft); color: var(--warning-strong); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.st-bad { background: var(--danger-soft); color: var(--danger-strong); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.st-off { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.st-info { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.sample-tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border-strong, var(--border)); vertical-align: middle; }

.slot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.55rem 0.65rem; border-radius: 14px; border: 1.5px solid; text-align: left; cursor: pointer; min-height: 4.4rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.slot:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.slot b { font-family: var(--font-display); font-size: 1rem; line-height: 1.1; }
.slot small { font-size: 0.68rem; opacity: 0.9; }
.slot-ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success-strong); }
.slot-bad { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger-strong); }
.slot-warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 55%, transparent); color: var(--warning-strong); }
.slot-off { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface) 6px, var(--surface) 12px); border-color: var(--border-strong, var(--border)); color: var(--muted); }

.dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 4px; margin-right: 0.35rem; vertical-align: -1px; }
.dot-ok { background: var(--success); } .dot-bad { background: var(--danger); } .dot-warn { background: var(--warning); } .dot-off { background: var(--muted); }

.donut { position: relative; width: 11rem; height: 11rem; border-radius: 50%; flex: none; }
.donut::after { content: ""; position: absolute; inset: 1.7rem; border-radius: 50%; background: var(--surface); }
.donut-label { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); }

.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 11rem; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 0.3rem; min-width: 0; }
.bar { width: 100%; max-width: 2.6rem; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--x-lime), var(--x-forest-2)); min-height: 3px; transform-origin: bottom; animation: grow 0.7s ease both; }
@keyframes grow { from { transform: scaleY(0.2); } }
.hbar { height: 0.6rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hbar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--x-forest-2), var(--x-lime)); }

.tbl { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }

.nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.62rem 0.85rem; border-radius: 12px; color: var(--x-on-forest); font-weight: 500; font-size: 0.92rem; transition: background 0.15s ease; }
.nav-link:hover { background: color-mix(in srgb, var(--x-on-forest) 12%, transparent); }
.nav-link[aria-current="page"] { background: var(--x-lime); color: var(--x-on-lime); font-weight: 700; }
.nav-link:focus-visible { outline: 2px solid var(--x-lime); outline-offset: 2px; }

.stat-ico { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 12px; background: var(--x-forest); color: var(--x-lime); flex: none; }
.rise { animation: rise 0.45s ease both; }
@keyframes rise { from { transform: translateY(10px); } }
html.reduced-motion .rise, html.reduced-motion .bar { animation: none; }

dialog.modal > div { width: min(720px, 94vw); max-height: 88vh; overflow-y: auto; }
.auth-bg { background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--x-lime) 35%, transparent), transparent 60%), var(--x-forest); }