/* =========================================================
 * DESIGN OS — Hellox SysAdmin Console
 * Functional Minimalism — applied to all /sysadmin/ pages
 * Read .claude/DESIGN-OS-MASTER.md + .claude/PROJECT-INIT.md before editing
 * ========================================================= */

:root {
  /* ========================================================
   * DESIGN OS v4.0 — DTCG 2025.10 Oklch + Display P3 tokens
   * Migrated 2026-05-09. Variable names kept for cascade safety.
   * ======================================================== */

  /* === Surfaces (Oklch L scale, warm hue 80) === */
  --do-bg-primary:    oklch(0.13 0.012 80);
  --do-bg-secondary:  oklch(0.16 0.014 80);
  --do-bg-tertiary:   oklch(0.20 0.016 80);
  --do-bg-hover:      color(display-p3 1 1 1 / 0.03);
  --do-bg-active:     color(display-p3 1 1 1 / 0.06);
  --do-bg-glass:      color(display-p3 1 1 1 / 0.025);
  --do-bg-glass-hi:   color(display-p3 1 1 1 / 0.05);

  /* === Text scale === */
  --do-text-primary:  oklch(0.97 0.012 85);
  --do-text-muted:    oklch(0.62 0.014 85);
  --do-text-subtle:   oklch(0.45 0.016 85);

  /* === Borders === */
  --do-border:        color(display-p3 1 1 1 / 0.07);
  --do-border-strong: color(display-p3 1 1 1 / 0.12);

  /* === Brand accent (gold) — Oklch = math-friendly === */
  --do-accent:        oklch(0.82 0.16 80);
  --do-accent-hi:     oklch(0.88 0.18 80);
  --do-accent-fade:   oklch(0.82 0.16 80 / 0.10);
  --do-accent-glow:   oklch(0.82 0.16 80 / 0.35);

  /* === Focus ring (WCAG 2.4.13: 2px, kontras ≥ 3:1 vs surface L=0.16) === */
  --do-focus-ring:    oklch(0.88 0.18 80);
  --do-focus-width:   2px;
  --do-focus-offset:  2px;

  /* === Semantic === */
  --do-success: oklch(0.72 0.16 155);
  --do-warning: oklch(0.78 0.16 65);
  --do-error:   oklch(0.65 0.20 25);
  --do-info:    oklch(0.74 0.14 245);

  /* === Spacing (4px base, 8pt grid) === */
  --do-s-1: 4px;  --do-s-2: 8px;   --do-s-3: 12px;  --do-s-4: 16px;
  --do-s-5: 24px; --do-s-6: 32px;  --do-s-7: 48px;  --do-s-8: 64px;

  /* === Radius — extended scale untuk dramatic-WOW visual === */
  --do-r-1: 6px;
  --do-r-2: 12px;
  --do-r-3: 16px;
  --do-r-4: 22px;

  /* === Motion (under INP budget) === */
  --do-t-fast: 120ms cubic-bezier(.22,.61,.36,1);
  --do-t-base: 200ms cubic-bezier(.22,.61,.36,1);
  --do-t-slow: 300ms cubic-bezier(.22,.61,.36,1);

  /* === WCAG 2.5.8 — minimum touch/pointer target === */
  --do-target-min: 24px;
}

/* =========================================================
 * Page-level scope: ONLY applies to .do (Design OS) wrapper
 * (added at body level di sysadmin pages)
 * ========================================================= */

.do, .do * { box-sizing: border-box; }
.do { color: var(--do-text-primary); font-family: 'Manrope', system-ui, sans-serif; }

/* === Typography scale === */
.do h1 { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.do h2 { font-size: 18px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; margin: 0; }
.do h3 { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0; }
.do p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--do-text-muted); }
.do small { font-size: 12px; color: var(--do-text-subtle); }
.do code, .do .do-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/* Eyebrow label — replaces emoji-in-heading decoration */
.do-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--do-text-subtle);
  display: block;
}

/* === Layout primitives === */
.do-stack > * + * { margin-top: var(--do-s-3); }
.do-stack-lg > * + * { margin-top: var(--do-s-5); }
.do-row { display: flex; align-items: center; gap: var(--do-s-3); }
.do-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--do-s-4); }

/* === Card === */
.do-card {
  background: var(--do-bg-secondary);
  border: 1px solid var(--do-border);
  border-radius: var(--do-r-2);
  padding: var(--do-s-5);
}
.do-card-tight { padding: var(--do-s-4); }

.do-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--do-s-4);
  margin-bottom: var(--do-s-4);
  padding-bottom: var(--do-s-3);
  border-bottom: 1px solid var(--do-border);
}
.do-card-head h2, .do-card-head h3 { margin: 0; }
.do-card-head .do-eyebrow { margin-bottom: 4px; }

/* === Sectioned page wrapper === */
.do-page { padding: var(--do-s-5); max-width: 1440px; margin: 0 auto; }
.do-page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: var(--do-s-4);
  margin-bottom: var(--do-s-5);
  padding-bottom: var(--do-s-4);
  border-bottom: 1px solid var(--do-border);
}
.do-page-head h1 { margin-bottom: 4px; }
.do-page-head p { margin-top: 4px; max-width: 60ch; }

/* === Buttons === */
.do-btn {
  display: inline-flex; align-items: center; gap: var(--do-s-2);
  padding: 8px 14px;
  border-radius: var(--do-r-2);
  font-family: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--do-border);
  background: var(--do-bg-secondary);
  color: var(--do-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--do-t-base), border-color var(--do-t-base), opacity var(--do-t-base);
  white-space: nowrap;
}
.do-btn:hover { background: var(--do-bg-tertiary); border-color: var(--do-border-strong); }
.do-btn:active { opacity: .7; }
.do-btn:focus-visible {
  outline: 2px solid var(--do-accent);
  outline-offset: 2px;
}
.do-btn:disabled { opacity: .4; cursor: not-allowed; }

.do-btn-primary {
  background: var(--do-accent);
  color: #1a0f00;
  border-color: var(--do-accent);
}
.do-btn-primary:hover { background: var(--do-accent); opacity: .9; }
.do-btn-primary:active { opacity: .7; }

.do-btn-ghost { background: transparent; }
.do-btn-ghost:hover { background: var(--do-bg-hover); }

.do-btn-sm { padding: 5px 10px; font-size: 12px; }
.do-btn-danger { color: var(--do-error); border-color: rgba(239,68,68,.3); }
.do-btn-danger:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.5); }

/* === Inputs === */
.do-input, .do-select, .do-textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: inherit; font-size: 14px;
  background: var(--do-bg-primary);
  border: 1px solid var(--do-border);
  border-radius: var(--do-r-2);
  color: var(--do-text-primary);
  transition: border-color var(--do-t-base);
}
.do-input::placeholder, .do-textarea::placeholder { color: var(--do-text-subtle); }
.do-input:hover, .do-select:hover, .do-textarea:hover { border-color: var(--do-border-strong); }
.do-input:focus, .do-select:focus, .do-textarea:focus {
  outline: none;
  border-color: var(--do-accent);
  box-shadow: 0 0 0 1px var(--do-accent);  /* sharp 1px ring, no soft glow */
}
.do-textarea { resize: vertical; min-height: 60px; }

/* Field group: label on top */
.do-field { display: flex; flex-direction: column; gap: var(--do-s-2); }
.do-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--do-s-3); }
.do-label { font-size: 13px; font-weight: 600; color: var(--do-text-primary); }
.do-helper { font-size: 12px; color: var(--do-text-muted); line-height: 1.5; }
.do-helper code {
  background: var(--do-bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--do-accent);
}

/* Toggle (checkbox styled) */
.do-toggle {
  display: grid; grid-template-columns: auto 1fr; gap: var(--do-s-3);
  padding: var(--do-s-3);
  background: var(--do-bg-tertiary);
  border: 1px solid var(--do-border);
  border-radius: var(--do-r-2);
  align-items: start;
  cursor: pointer;
}
.do-toggle:hover { background: var(--do-bg-active); }
.do-toggle input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--do-accent);
  cursor: pointer;
}
.do-toggle strong { font-size: 13px; font-weight: 600; display: block; }
.do-toggle small { display: block; margin-top: 4px; font-size: 12px; color: var(--do-text-muted); }

/* === Tables === */
.do-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.do-table thead th {
  text-align: left;
  padding: 10px var(--do-s-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--do-text-subtle);
  border-bottom: 1px solid var(--do-border);
  background: transparent;
}
.do-table tbody td {
  padding: 10px var(--do-s-3);
  border-bottom: 1px solid var(--do-border);
  color: var(--do-text-primary);
  vertical-align: middle;
}
.do-table tbody tr { transition: background var(--do-t-fast); }
.do-table tbody tr:hover { background: var(--do-bg-hover); }
.do-table tbody tr:last-child td { border-bottom: none; }

/* Right-align numeric cells */
.do-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; }

/* === Status indicators === */
.do-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.do-dot-on { background: var(--do-success); }
.do-dot-off { background: var(--do-error); }
.do-dot-warn { background: var(--do-warning); }
.do-dot-mute { background: var(--do-text-subtle); }

/* Plan tag (functional, single-tone, NOT decorative) */
.do-tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 3px;
  background: var(--do-bg-tertiary);
  color: var(--do-text-muted);
  border: 1px solid var(--do-border);
}
.do-tag-accent { background: var(--do-accent-fade); color: var(--do-accent); border-color: rgba(251,191,36,.25); }
.do-tag-success { background: rgba(16,185,129,.10); color: var(--do-success); border-color: rgba(16,185,129,.25); }
.do-tag-warn { background: rgba(245,158,11,.10); color: var(--do-warning); border-color: rgba(245,158,11,.25); }
.do-tag-error { background: rgba(239,68,68,.10); color: var(--do-error); border-color: rgba(239,68,68,.25); }
.do-tag-mute { background: transparent; color: var(--do-text-subtle); }

/* === KPI metric === */
.do-kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--do-s-4);
  background: var(--do-bg-secondary);
  border: 1px solid var(--do-border);
  border-radius: var(--do-r-2);
  transition: border-color var(--do-t-base), background var(--do-t-base);
  text-decoration: none;
  color: inherit;
}
a.do-kpi:hover { border-color: var(--do-border-strong); background: var(--do-bg-tertiary); }
.do-kpi-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--do-text-subtle);
}
.do-kpi-value {
  font-family: 'Manrope', sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  color: var(--do-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.do-kpi-meta { font-size: 12px; color: var(--do-text-muted); }
.do-kpi-meta .do-up { color: var(--do-success); font-weight: 600; }
.do-kpi-meta .do-down { color: var(--do-error); font-weight: 600; }

/* === Bar chart (CSS only) === */
.do-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--do-s-2); height: 140px; align-items: end; }
.do-bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.do-bar-track {
  flex: 1; width: 100%;
  background: var(--do-bg-tertiary);
  border-radius: var(--do-r-1);
  overflow: hidden;
  display: flex; align-items: flex-end;
  position: relative;
}
.do-bar-fill {
  width: 100%; min-height: 2px;
  background: var(--do-accent);
  border-radius: var(--do-r-1);
  transition: height var(--do-t-slow);
}
.do-bar-num {
  position: absolute; top: 4px; left: 0; right: 0; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  color: var(--do-text-primary);
  font-variant-numeric: tabular-nums;
}
.do-bar-label { font-size: 11px; color: var(--do-text-subtle); font-weight: 500; }

/* === Pill (status indicator pill) === */
.do-pill {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .03em;
  border-radius: var(--do-r-2);
  border: 1px solid var(--do-border);
  background: var(--do-bg-tertiary);
  color: var(--do-text-muted);
}
.do-pill-on { color: var(--do-success); border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.06); }
.do-pill-off { color: var(--do-text-subtle); }
.do-pill-warn { color: var(--do-warning); border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.06); }
.do-pill-info { color: var(--do-info); border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.06); }
.do-pill-accent { color: var(--do-accent); border-color: rgba(251,191,36,.35); background: var(--do-accent-fade); }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .do *, .do *::before, .do *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* === Override: kill leftover gold gradients & glows from app.css inside .do scope === */
.do .hx-mrr,
.do .hx-stat-grid,
.do .hx-stat,
.do .hx-card { /* fall through — explicit class wins */ }

/* =========================================================
 * DESIGN OS v4.0 ENHANCEMENTS (2026-05-09)
 * Ambient mesh BG + glassmorphic surface + WCAG 2.2 + ARIA 1.3
 * ========================================================= */

/* --- Ambient gradient mesh (LCP-safe — pure CSS, no image) --- */
.do-app { position: relative; }
.do-app::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%,  oklch(0.82 0.16 80 / 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 30%, oklch(0.72 0.18 295 / 0.05), transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 100%, oklch(0.74 0.14 245 / 0.04), transparent 70%);
}
.do-app::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color(display-p3 1 1 1 / 0.012) 1px, transparent 1px),
    linear-gradient(90deg, color(display-p3 1 1 1 / 0.012) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
}
.do-app > * { position: relative; z-index: 1; }

/* --- Global :focus-visible (WCAG 2.4.13 AAA) --- */
.do a:focus-visible,
.do button:focus-visible,
.do [role="button"]:focus-visible,
.do .do-side-link:focus-visible,
.do .do-btn:focus-visible,
.do .do-kpi:focus-visible,
.do .do-action-card:focus-visible,
.do .do-table tbody tr:focus-visible,
.do input:focus-visible,
.do select:focus-visible,
.do textarea:focus-visible {
  outline: var(--do-focus-width) solid var(--do-focus-ring);
  outline-offset: var(--do-focus-offset);
  border-radius: var(--do-r-1);
}

/* --- WCAG 2.5.8 enforce on interactive elements --- */
.do .do-btn,
.do .do-side-link,
.do .do-tag,
.do .do-pill {
  min-height: var(--do-target-min);
}

/* --- KPI hover glow (dramatic-WOW pref) --- */
.do .do-kpi {
  position: relative;
  overflow: hidden;
  transition: border-color var(--do-t-base), transform var(--do-t-base), box-shadow var(--do-t-base);
}
.do .do-kpi::after {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--do-accent-fade) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--do-t-base);
  pointer-events: none;
}
.do .do-kpi:hover::after { opacity: 1; }
.do a.do-kpi:hover {
  border-color: var(--do-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px oklch(0 0 0 / 0.4), 0 0 0 1px var(--do-accent-fade);
}

/* --- Bar chart gradient + glow upgrade --- */
.do .do-bar-fill {
  background: linear-gradient(180deg, var(--do-accent-hi) 0%, var(--do-accent) 100%) !important;
  box-shadow: 0 0 12px var(--do-accent-glow);
}

/* --- Plan distribution fill glow --- */
.do .do-plan-fill {
  background: linear-gradient(90deg, var(--do-accent) 0%, var(--do-accent-hi) 100%) !important;
  box-shadow: 0 0 8px var(--do-accent-glow);
}

/* --- Headline gradient text (h1) --- */
.do .do-page-head h1 {
  background: linear-gradient(135deg, var(--do-text-primary) 0%, var(--do-accent) 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Action card hover lift --- */
.do .do-action-card {
  transition: border-color var(--do-t-base), transform var(--do-t-base), background var(--do-t-base);
}
.do .do-action-card:hover {
  border-color: var(--do-accent-fade);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--do-accent-fade) 0%, var(--do-bg-secondary) 70%);
}

/* --- Skeleton (VSI <0.05 — reserve dimension for async data) --- */
@keyframes do-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.do .do-skeleton {
  background: linear-gradient(90deg, var(--do-bg-glass) 0%, var(--do-bg-glass-hi) 50%, var(--do-bg-glass) 100%);
  background-size: 600px 100%;
  animation: do-shimmer 1.4s infinite linear;
  border-radius: var(--do-r-1);
}