/* ═══════════════════════════════════════════════════════════════════
   UI v2 — loaded AFTER legacy-base.css on v2 pages only.
   Redefines the legacy tokens and component classes so every existing
   view adopts the v2 look without being edited. Classic pages never
   load this file.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root, [data-theme="light"] {
  --background:     #f4f4f5;
  --bg-secondary:   #ffffff;
  --bg-card:        #ffffff;
  --bg-deep:        #fafafa;
  --bg-border:      #e4e4e7;
  --muted:          #f4f4f5;
  --ring:           rgba(24,24,27,0.08);
  --accent:         #5350F2;
  --accent-hover:   #6B68FF;
  --accent-glow:    rgba(83,80,242,0.18);
  --purple:         #7c3aed;
  --purple-glow:    rgba(124,58,237,0.18);
  --green:          #16a34a;
  --amber:          #d97706;
  --red:            #dc2626;
  --cyan:           #0891b2;
  --blue:           #2563eb;
  --orange:         #ea580c;
  --text-primary:   #09090b;
  --text-secondary: #3f3f46;
  --text-muted:     #71717a;
  --topbar-bg:      rgba(255,255,255,0.85);
  --sidebar-bg:     #f4f4f5;
  --dropdown-bg:    #ffffff;
  --logo-bg:        #09090b; /* brand mark tile, same in both themes (white logo) */
  --scrollbar:      #d4d4d8;
  --scrollbar-hover:#a1a1aa;
  --divider:        #e4e4e7;
  --input-bg:       #ffffff;
  --input-border:   #e4e4e7;
  --badge-bg:       rgba(83,80,242,0.08);
  --shadow-sm:      0 1px 2px rgba(9,9,11,0.05);
  --shadow-md:      0 4px 16px rgba(9,9,11,0.08);
}
[data-theme="dark"] {
  --background:     #09090b;
  --bg-secondary:   #18181b;
  --bg-card:        #18181b;
  --bg-deep:        #111113;
  --bg-border:      #27272a;
  --muted:          #27272a;
  --ring:           rgba(255,255,255,0.08);
  --accent:         #7C7AFF;
  --accent-hover:   #9593FF;
  --accent-glow:    rgba(124,122,255,0.2);
  --purple:         #a78bfa;
  --purple-glow:    rgba(167,139,250,0.2);
  --green:          #4ade80;
  --amber:          #fbbf24;
  --red:            #f87171;
  --cyan:           #22d3ee;
  --blue:           #60a5fa;
  --orange:         #fb923c;
  --text-primary:   #fafafa;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --topbar-bg:      rgba(24,24,27,0.85);
  --sidebar-bg:     #09090b;
  --dropdown-bg:    #18181b;
  --scrollbar:      #3f3f46;
  --scrollbar-hover:#52525b;
  --divider:        #27272a;
  --input-bg:       #09090b;
  --input-border:   #27272a;
  --badge-bg:       rgba(124,122,255,0.12);
  --shadow-sm:      none;
  --shadow-md:      0 8px 24px rgba(0,0,0,0.4);
}

/* ─── Base ───────────────────────────────────────────────── */
body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--background);
  color: var(--text-primary);
}
h1, h2, h3, .font-display { font-family: 'Inter', 'Geist', system-ui, sans-serif; letter-spacing: -0.025em; }
.tnum { font-variant-numeric: tabular-nums; }
[x-cloak] { display: none !important; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
}
.card-deep {
  background: var(--bg-deep);
  border: 1px solid var(--bg-border);
  border-radius: 0.625rem;
  box-shadow: none;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
  box-shadow: var(--shadow-sm);
}
.btn-primary { background: var(--accent); color: #fff; border: 1px solid transparent; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); }
/* Dark theme: --accent (#7C7AFF) is too light for white button text (~2.5:1); buttons keep the brand indigo. */
[data-theme="dark"] .btn-primary { background: #5350F2; }
[data-theme="dark"] .btn-primary:hover { background: #6B68FF; }
/* Admin pages carry body.admin-theme; legacy-base.css paints their primary buttons/focus purple
   with a glow. v2 marks admin with an "Admin" tag instead, so neutralise back to the tokens. */
.admin-theme .btn-primary { background: var(--accent); box-shadow: none; }
.admin-theme .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .admin-theme .btn-primary { background: #5350F2; }
[data-theme="dark"] .admin-theme .btn-primary:hover { background: #6B68FF; }
.admin-theme .sidebar-link.active { background: var(--muted); color: var(--text-primary); }
.admin-theme .input:focus { border-color: var(--text-muted); box-shadow: 0 0 0 4px var(--ring); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--bg-border); }
.btn-secondary:hover { background: var(--muted); border-color: var(--bg-border); color: var(--text-primary); }
.btn-danger { background: var(--red); color: #fff; border: 1px solid transparent; }
.btn-danger:hover { opacity: .9; }
.btn-ghost { color: var(--text-secondary); border-radius: 0.5rem; }
.btn-ghost:hover { background: var(--muted); color: var(--text-primary); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: 0.4375rem; }

/* ─── Forms ──────────────────────────────────────────────── */
.input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.input::placeholder { color: var(--text-muted); opacity: .7; }
.input:focus { border-color: var(--text-muted); box-shadow: 0 0 0 4px var(--ring); }
select.input option { background: var(--bg-card); color: var(--text-primary); }
.label { color: var(--text-primary); font-weight: 500; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 500; line-height: 1.1rem;
  border: 1px solid var(--bg-border); background: transparent; color: var(--text-secondary);
}
.badge-active, .badge-green, .badge-covered { background: rgba(22,163,74,0.08); color: var(--green); border-color: rgba(22,163,74,0.25); }
.badge-pending  { background: rgba(217,119,6,0.08); color: var(--amber); border-color: rgba(217,119,6,0.25); }
.badge-error, .badge-red, .badge-uncovered { background: rgba(220,38,38,0.08); color: var(--red); border-color: rgba(220,38,38,0.25); }
.badge-info     { background: var(--badge-bg); color: var(--accent); border-color: rgba(83,80,242,0.25); }

/* ─── Misc legacy components ─────────────────────────────── */
.divider { background: var(--bg-border); }
.data-row { border-color: var(--bg-border); }
.glow-blue, .glow-purple { display: none; }      /* v2 drops decorative glows */
.dot-grid { background-image: none; }
.gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); }
.shimmer { background: linear-gradient(90deg, var(--muted) 25%, var(--bg-border) 50%, var(--muted) 75%); background-size: 200% 100%; }

/* ─── Compatibility layer for hard-coded slate colours ──────
   Inline styles written for the old dark theme. Mapped to tokens in both
   themes. Shrinks as views are refined in phases 1-5. */
[style*="background:#0f172a"], [style*="background: #0f172a"],
[style*="background:#0c111c"], [style*="background:#050810"],
[style*="background:#020617"], [style*="background:#0b1120"] { background: var(--bg-deep) !important; }
[style*="background:#111827"], [style*="background: #111827"],
[style*="background:#1f2937"], [style*="background: #1f2937"] { background: var(--bg-card) !important; }
[style*="background:#1e293b"], [style*="background: #1e293b"],
[style*="background:#334155"] { background: var(--muted) !important; }
[style*="border"][style*="#1e293b"], [style*="border"][style*="#334155"],
[style*="border"][style*="#1f2937"] { border-color: var(--bg-border) !important; }
[style*="color:#94a3b8"], [style*="color: #94a3b8"], [style*="color:#cbd5e1"] { color: var(--text-secondary) !important; }
[style*="color:#64748b"], [style*="color: #64748b"], [style*="color:#475569"], [style*="color: #475569"] { color: var(--text-muted) !important; }
[style*="color:#f8fafc"], [style*="color:#e2e8f0"], [style*="color:#f1f5f9"], [style*="color:#fff;"] { color: var(--text-primary) !important; }
[style*="color:#0ea5e9"], [style*="color: #0ea5e9"], [style*="color:#38bdf8"] { color: var(--accent) !important; }
[style*="background:#0ea5e9"], [style*="background: #0ea5e9"] { background: var(--accent) !important; }

/* text-white: readable on neutral surfaces in light theme, white on
   coloured surfaces. Mirrors the custom.css allowlist, adds brand. */
[data-theme="light"] .text-white { color: var(--text-primary); }
[data-theme="light"] .btn-primary, [data-theme="light"] .btn-primary .text-white,
[data-theme="light"] .btn-danger, [data-theme="light"] .btn-danger .text-white,
[data-theme="light"] [style*="background:var(--accent)"], [data-theme="light"] [style*="background:var(--accent)"] .text-white,
[data-theme="light"] [style*="background:var(--purple)"] .text-white, [data-theme="light"] [style*="background:var(--green)"] .text-white,
[data-theme="light"] [style*="background:var(--red)"] .text-white, [data-theme="light"] [style*="background:var(--amber)"] .text-white,
[data-theme="light"] [style*="background:#5350F2"], [data-theme="light"] [style*="background:#5350F2"] .text-white,
[data-theme="light"] [style*="background:#0ea5e9"] .text-white, [data-theme="light"] [style*="background:#8b5cf6"] .text-white,
[data-theme="light"] [style*="background:#f59e0b"] .text-white, [data-theme="light"] [style*="background:#ef4444"] .text-white,
[data-theme="light"] [style*="background:#22c55e"] .text-white, [data-theme="light"] [style*="background:#3b82f6"] .text-white,
[data-theme="light"] [style*="background:#14b8a6"] .text-white, [data-theme="light"] [style*="background:#06b6d4"] .text-white,
[data-theme="light"] [class*="bg-"][class*="-500"].text-white, [data-theme="light"] [class*="bg-"][class*="-600"].text-white,
[data-theme="light"] [class*="bg-"][class*="-500"] .text-white, [data-theme="light"] [class*="bg-"][class*="-600"] .text-white {
  color: #fff;
}

/* ─── Shell ──────────────────────────────────────────────── */
#app-shell, html.sidebar-collapsed #app-shell { margin-left: 0; }
.v2-shell-main { background: var(--bg-card); }
@media (min-width: 768px) {
  .v2-shell-main { border: 1px solid var(--bg-border); border-radius: 0.875rem; box-shadow: var(--shadow-sm); }
}
.v2-nav-link { color: var(--text-secondary); }
.v2-nav-link:hover { background: var(--muted); color: var(--text-primary); }
.v2-nav-link[aria-current="page"] { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm), 0 0 0 1px var(--bg-border); font-weight: 500; }
.v2-count { background: var(--muted); color: var(--text-secondary); }
.v2-count-alert { background: rgba(220,38,38,0.1); color: var(--red); }

/* ─── Auth shell (components/auth-shell.php) ─────────────── */
.auth-v2 { background: #ffffff; color: var(--text-primary); }
[data-theme="dark"] .auth-v2 { background: var(--background); }
.auth-v2 .input { height: 2.5rem; width: 100%; }
.auth-v2-link { color: var(--text-muted); text-underline-offset: 4px; }
.auth-v2-link:hover { color: var(--text-primary); text-decoration: underline; }
.auth-v2-ctrl { color: var(--text-secondary); }
.auth-v2-ctrl:hover { background: var(--muted); color: var(--text-primary); }
.auth-v2-otp {
  height: 3rem; width: 100%; min-width: 0; text-align: center; font-size: 1.25rem; font-variant-numeric: tabular-nums;
  font-family: 'Inter', 'Geist', system-ui, sans-serif;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 0.5rem;
  color: var(--text-primary); box-shadow: var(--shadow-sm); outline: none;
}
.auth-v2-otp:focus { border-color: var(--text-muted); box-shadow: 0 0 0 4px var(--ring); }
.auth-v2-panel { background: #09090b; color: #fafafa; }
[data-theme="dark"] .auth-v2-panel { background: #111113; box-shadow: inset 0 0 0 1px #27272a; }
/* lg+: the side panel is pinned to the viewport height (sticky, never stretches
   with a long form), so the hero looks identical on every auth step. */
@media (min-width: 1024px) {
  .auth-v2 > .auth-v2-panel { position: sticky; top: 0.75rem; align-self: start; height: calc(100vh - 1.5rem); height: calc(100dvh - 1.5rem); }
}
/* Registration flow (auth/register*.php): wider column, stepper, choice cards, terms list */
.auth-v2 main > div:has(.reg-v2) { max-width: 28rem; }
.auth-v2 main > div:has(.reg-v2-details) { max-width: 34rem; }
/* Register details + address steps: roomy responsive field grid driven by the form's own
   width (1 column on phones, 2 when the column is wide enough; never 3). */
.reg-v2-details { container-type: inline-size; }
.reg-v2-details .label { margin-bottom: 0; }
.reg-v2-details .reg-v2-country > div { display: flex; flex-direction: column; gap: 0.375rem; }
.reg-v2-details .input { min-height: 2.5rem; }
.reg-v2-details .reg-v2-country .ts-wrapper .ts-control { min-height: 2.5rem !important; }
.reg-v2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem 1rem; }
@container (min-width: 26rem) {
  .reg-v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-v2-grid .reg-v2-span-2, .reg-v2-grid .reg-v2-wide2, .reg-v2-grid .reg-v2-full { grid-column: span 2 / span 2; }
}
.reg-v2-details .reg-v2-section { padding-top: 1rem; }
.reg-v2-legend { float: left; width: 100%; margin-bottom: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; color: var(--text-primary); }
.reg-v2-legend + * { clear: left; }
/* Password show/hide toggle and "Generate" action */
.reg-v2-eye { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 2.5rem; color: var(--text-muted); border-radius: 0 0.5rem 0.5rem 0; }
.reg-v2-eye:hover { color: var(--text-primary); }
.reg-v2-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reg-v2-gen { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.25rem; line-height: 1; font-size: 0.75rem; font-weight: 500; color: var(--accent); border-radius: 0.375rem; padding: 0 0.375rem; margin: -0.125rem 0; }
.reg-v2-gen:hover { background: var(--muted); }
.reg-v2-gen:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (min-width: 1024px) {
  /* lg+: the chat bubble sits over the side panel, so the auth form column needs no launcher clearance */
  body .auth-v2 > div:first-child > main.flex-1 { padding-bottom: 2.5rem; }
}
.reg-v2-dot {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 9999px;
  border: 1px solid var(--bg-border); color: var(--text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.reg-v2-dot.is-current { border-color: var(--accent); color: var(--accent); }
.reg-v2-dot.is-done { border-color: var(--accent); background: var(--accent); color: #fff; }
.reg-v2-choice {
  display: flex; width: 100%; align-items: flex-start; gap: 0.875rem; padding: 1rem; cursor: pointer; text-align: left;
  border: 1px solid var(--bg-border); border-radius: 0.75rem; background: var(--bg-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-v2-choice:hover { border-color: var(--text-muted); }
.reg-v2-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(83,80,242,0.12); }
.reg-v2-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-v2-choice-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 0.5rem; background: var(--muted); color: var(--text-secondary); }
.reg-v2-radio { display: grid; place-items: center; width: 1rem; height: 1rem; margin-top: 2px; flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--bg-border); }
.reg-v2-radio::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent); transform: scale(0); transition: transform .12s ease; }
.reg-v2-choice:has(input:checked) .reg-v2-radio { border-color: var(--accent); }
.reg-v2-choice:has(input:checked) .reg-v2-radio::after { transform: scale(1); }
.reg-v2-section { padding-top: 1.25rem; border-top: 1px solid var(--bg-border); }
.reg-v2-req { color: var(--red); }
.reg-v2-meter { height: 0.25rem; flex: 1; border-radius: 9999px; background: var(--bg-border); transition: background .15s ease; }
.reg-v2-terms { border: 1px solid var(--bg-border); border-radius: 0.75rem; overflow: hidden; background: var(--bg-card); }
.reg-v2-terms > li + li { border-top: 1px solid var(--bg-border); }
.reg-v2-terms input[type="checkbox"] { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
[data-theme="dark"] .reg-v2-terms input[type="checkbox"] { color-scheme: dark; }
.reg-v2-terms-body { max-height: 16rem; overflow-y: auto; padding: 0.75rem 0.875rem; border-top: 1px solid var(--bg-border); background: var(--bg-deep); color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.7; }
.reg-v2-terms-body h1, .reg-v2-terms-body h2, .reg-v2-terms-body h3, .reg-v2-terms-body h4 { color: var(--text-primary); margin: 1em 0 .4em; font-weight: 600; }
.reg-v2-terms-body h1 { font-size: 1.15em; } .reg-v2-terms-body h2 { font-size: 1.07em; } .reg-v2-terms-body h3 { font-size: 1em; }
.reg-v2-terms-body p { margin: .6em 0; }
.reg-v2-terms-body ul, .reg-v2-terms-body ol { margin: .5em 0 .5em 1.4em; list-style: revert; }
.reg-v2-terms-body strong { color: var(--text-primary); }
.reg-v2-terms-body a { color: var(--accent); }
.reg-v2-progress { height: 0.25rem; border-radius: 9999px; background: var(--bg-border); overflow: hidden; }
.reg-v2-progress > span { display: block; height: 100%; border-radius: 9999px; background: var(--accent); transition: width .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .auth-v2-ring { animation: auth-v2-ring 2.4s ease-out infinite; }
  @keyframes auth-v2-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
}

/* Standalone minimal pages (errors, WAF challenge, SSO bridges, Redsys redirect): plain CSS, no Tailwind */
.v2-solo { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; box-sizing: border-box; background: var(--background); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
.v2-solo-card { width: 100%; max-width: 26rem; box-sizing: border-box; text-align: center; padding: 2.5rem 2rem; background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 1rem; box-shadow: var(--shadow-md); }
.v2-solo-brand { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: var(--text-primary); text-decoration: none; font-family: 'Inter', 'Geist', system-ui, sans-serif; font-size: 15px; font-weight: 500; }
.v2-solo-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; overflow: hidden; border-radius: 0.5rem; background: #09090b; }
.v2-solo-mark img { height: 14px; width: auto; max-width: 20px; object-fit: cover; object-position: left; }
.v2-solo-mark.is-mark img { width: 14px; height: 14px; max-width: none; object-fit: contain; object-position: center; }
.v2-solo-code { margin: 0; font-family: 'Inter', 'Geist', system-ui, sans-serif; font-size: 3.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.v2-solo-title { margin: 1rem 0 0.5rem; font-size: 1.25rem; font-weight: 500; color: var(--text-primary); }
.v2-solo-text { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }
.v2-solo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.75rem; }
.v2-solo-actions a { text-decoration: none; }
.v2-solo-spinner { width: 2rem; height: 2rem; margin: 0 auto 1.25rem; box-sizing: border-box; border: 3px solid var(--bg-border); border-top-color: var(--accent); border-radius: 50%; animation: v2-spin 0.9s linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v2-solo-spinner { animation-duration: 2.5s; } }

/* Public pages header (components/public-header.php) */
.v2-pub-ctrl { color: var(--text-secondary); }
.v2-pub-ctrl:hover { background: var(--muted); color: var(--text-primary); }

/* Legal terms (legal/terms.php) */
.term-html { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.75; }
.term-html h1, .term-html h2, .term-html h3, .term-html h4 { color: var(--text-primary); margin: 1.4em 0 .5em; font-weight: 600; line-height: 1.35; }
.term-html h1 { font-size: 1.2em; } .term-html h2 { font-size: 1.1em; } .term-html h3 { font-size: 1em; }
.term-html > :first-child { margin-top: 0; }
.term-html p { margin: .75em 0; } .term-html ul, .term-html ol { margin: .5em 0 .5em 1.4em; list-style: revert; }
.term-html li { margin: .25em 0; } .term-html strong { color: var(--text-primary); }
.term-html a { color: var(--accent); text-underline-offset: 3px; }
.term-html table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .875em; display: block; overflow-x: auto; }
.term-html th, .term-html td { border: 1px solid var(--bg-border); padding: .4em .6em; text-align: left; }
.term-nav { color: var(--text-secondary); }
.term-nav:hover { background: var(--muted); color: var(--text-primary); }
.term-nav.is-active { background: var(--bg-card); color: var(--text-primary); font-weight: 500; box-shadow: var(--shadow-sm), 0 0 0 1px var(--bg-border); }

/* Status pages (status/_monitors.php) */
.v2-uptime-bar { width: 5px; border-radius: 2px; }
.v2-status-row { cursor: pointer; }
.v2-status-row:hover { background: var(--bg-deep); }

/* ─── Final polish (P1) ──────────────────────────────────── */
/* Light theme: legacy-base.css makes .card borderless; v2 cards stay bordered. */
[data-theme="light"] .card, [data-theme="light"] .card-deep { border: 1px solid var(--bg-border); }

/* Stat tiles (uiStat → .ui-stat): legacy-base.css collapses .grid.grid-cols-2
   to one column below 768px; stat grids keep two columns on phones (long
   two-column forms still stack). sm:grid-cols-3 stat grids get 3 from 640px. */
@media (max-width: 767px) {
  .grid.grid-cols-2:has(> .ui-stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 767px) {
  .grid.grid-cols-2.sm\:grid-cols-3:has(> .ui-stat) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Page entrance: end with no transform (fill-mode backwards) so the wrapper
   does not become the containing block of position:fixed descendants. */
@keyframes v2-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-up { animation: v2-fade-up 0.4s ease backwards; }
@media (prefers-reduced-motion: reduce) { .animate-fade-up { animation: none; } }

/* Floating chat launcher (bottom-right, ~44px + 1rem inset): keep primary
   bottom-right actions clear of it. */
body:has(.chat-launcher) main:not(:has(.asst-page-wrap)) { padding-bottom: 5rem; }
body:has(.chat-launcher) .v2-bottom-bar { padding-right: 4.5rem; }

/* DDoS panel chips (components/ddos-panel-shell.php) */
.ddos-chip { display: inline-flex; align-items: center; padding: .0625rem .4375rem; border-radius: .3125rem; font-size: 11px; line-height: 1.1rem; font-weight: 500; white-space: nowrap; }

/* Docs-style "On this page" nav (docs/index.php, panel/mcp.php; scroll-spy in components/docs-toc.php) */
.docs-toc a { display:block;padding:5px 10px;border-radius:8px;font-size:13px;color:var(--text-muted);text-decoration:none;border-left:2px solid transparent;transition:color .15s,background .15s; }
.docs-toc a:hover { color:var(--text-primary);background:var(--bg-deep); }
.docs-toc a.is-active { color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent);border-radius:0 8px 8px 0; }

/* ─── Grouped sidebar + breadcrumb header (R1, approved mockup) ─── */
.v2-count-info { background: var(--badge-bg); color: var(--accent); }
.v2-nav-parent[data-section-active] { color: var(--text-primary); font-weight: 500; }
.v2-nav-sub { border-color: var(--bg-border); }
.v2-nav-child { color: var(--text-muted); }
.v2-nav-child:hover { color: var(--text-primary); }
.v2-nav-child[aria-current="page"] { color: var(--text-primary); }
.v2-admin-tag { display: inline-flex; align-items: center; padding: 0 0.375rem; border-radius: 0.3125rem; font-size: 10px; line-height: 1rem; font-weight: 600; color: var(--accent); background: var(--badge-bg); border: 1px solid rgba(83,80,242,0.25); }
.v2-assist-btn { background: #09090b; color: #fff; }
.v2-assist-btn:hover { background: #27272a; }
[data-theme="dark"] .v2-assist-btn { background: #fafafa; color: #09090b; }
[data-theme="dark"] .v2-assist-btn:hover { background: #e4e4e7; }
.v2-seg { background: var(--muted); }
.v2-seg > * { color: var(--text-muted); }
.v2-seg > *:hover { color: var(--text-primary); }
.v2-seg > .is-on { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm), 0 0 0 1px var(--bg-border); }
.v2-crumb { color: var(--text-muted); }
.v2-crumb:hover { color: var(--text-primary); }
.v2-hdr-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--bg-border); }
@media (max-height: 900px) { .v2-assist-card { display: none !important; } } /* short screens: keep the nav usable; Soporte > Asistente stays */
/* R3: sidebar tree guides (├ └ connectors drawn with pseudo-elements), status dots, third level */
.v2-tree { --tree-line: color-mix(in srgb, var(--text-muted) 38%, var(--sidebar-bg)); --tree-y: 14px; position: relative; margin: 2px 0 0 15.5px; padding: 0; list-style: none; }
.v2-tree > li { position: relative; padding-left: 12px; }
.v2-tree > li + li { margin-top: 2px; }
/* vertical run (continues past nested lists) + horizontal connector = ├ */
.v2-tree > li::before { content: ''; position: absolute; left: 0; top: -4px; bottom: 0; width: 1px; background: var(--tree-line); }
.v2-tree > li:first-child::before { top: -2px; }
.v2-tree > li::after { content: ''; position: absolute; left: 0; top: var(--tree-y); width: 9px; height: 1px; background: var(--tree-line); }
/* last child = └ with a rounded elbow */
.v2-tree > li:last-child::before { bottom: auto; height: calc(var(--tree-y) + 4px); width: 9px; background: none; border-left: 1px solid var(--tree-line); border-bottom: 1px solid var(--tree-line); border-bottom-left-radius: 6px; }
.v2-tree > li:first-child:last-child::before { height: calc(var(--tree-y) + 2px); }
.v2-tree > li:last-child::after { display: none; }
/* active child: accent segment from the top of its row down to its connector */
.v2-tree > li.is-active::before { background: linear-gradient(var(--accent), var(--accent)) top left / 1px calc(var(--tree-y) + 4px) no-repeat, var(--tree-line); }
.v2-tree > li.is-active::after { background: var(--accent); }
.v2-tree > li.is-active:last-child::before { background: none; border-color: var(--accent); }
.v2-tree-sm { --tree-y: 12px; margin-left: 9.5px; }
.v2-tree-sm > li { padding-left: 10px; }
.v2-nav-leaf { color: var(--text-muted); }
.v2-nav-leaf:hover { color: var(--text-primary); }
.v2-nav-leaf[aria-current="page"] { color: var(--text-primary); }
.v2-nav-more { color: var(--accent); }
.v2-tree-toggle { color: var(--text-muted); }
.v2-tree-toggle:hover { background: var(--muted); color: var(--text-primary); }
.v2-dot { display: inline-block; width: 7px; height: 7px; border-radius: 9999px; flex-shrink: 0; }
.v2-dot-sm { width: 6px; height: 6px; }
.v2-dot-red   { background: var(--red);   box-shadow: 0 0 0 2px rgba(220,38,38,0.16); }
.v2-dot-amber { background: var(--amber); box-shadow: 0 0 0 2px rgba(217,119,6,0.16); }
.v2-dot-info  { background: var(--accent); box-shadow: 0 0 0 2px rgba(83,80,242,0.16); }
.v2-dot-green { background: var(--green); }
.v2-dot-grey  { background: var(--text-muted); opacity: .6; }
.v2-count-warn { background: rgba(217,119,6,0.12); color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .v2-tree { transition: none !important; } }