/* ==========================================================================
   ZENRADIUS — GLOBAL APPLICATION THEME TOKENS
   ==========================================================================
   Single source of truth for the application's global visual theme.
   Per DESIGN.md (rewritten spec):

   Theme "current" = ZenRadius Ocean — the existing/current ZenRadius
                      teal-oriented identity. This is the PRESERVATION
                      theme: values below are the pre-existing appearance
                      and must NOT be reinterpreted (DESIGN.md §7).
   Theme "space"   = ZenRadius Space — modern tech-oriented identity.
                      NOT a full dark mode: light workspace + navy
                      sidebar/nav accents (DESIGN.md §2, §5, §6).

   HOW IT WORKS
   ------------
   This file re-declares the SAME CSS custom properties already consumed by
   public/css/admin.css, public/css/style.css, public/css/unified.css and
   public/css/voucher-cards.css (e.g. --bg, --primary, --portal-bg, ...).
   Because this stylesheet is @import'ed AFTER those files, the values below
   win the cascade (same specificity, later source order) and therefore
   control every component built on top of those tokens — sidebar, navbar,
   buttons, cards, tables, forms, modals, alerts, badges, etc. — without
   duplicating any markup or component CSS.

   The active theme is toggled purely via one HTML attribute:
       <html data-app-theme="current">   (ZenRadius Ocean — default)
       <html data-app-theme="space">     (ZenRadius Space — DESIGN.md)
   set server-side from the global `app_theme` setting (settings.json).
   ========================================================================== */

/* ── ZENRADIUS OCEAN ("current") — preserved existing appearance ── */
:root{
  /* admin.css tokens */
  --bg:#173945; --bg2:#173945; --bg3:#1b4656;
  --border:rgba(190,239,255,.22);
  --text:#edf7f5; --muted:#a8bec2;
  --primary:#22D3EE; --pdim:rgba(34,211,238,.14);
  --accent:#38BDF8;
  --success:#34D399; --sdim:rgba(52,211,153,.14);
  --warning:#FBBF24; --wdim:rgba(251,191,36,.14);
  --danger:#F87171; --ddim:rgba(248,113,113,.14);
  --info:#60A5FA; --idim:rgba(96,165,250,.14);
  --btn-bg:linear-gradient(135deg,#236060 0%,#183f51 52%,#194251 100%);
  --btn-color:#f4fffd;
  --btn-border:rgba(126,231,219,.48);
  --btn-shadow:0 8px 20px rgba(10,41,50,.24);
  --btn-bg-hover:linear-gradient(135deg,#2d7774 0%,#1d5264 52%,#205b68 100%);
  --btn-border-hover:rgba(166,247,235,.72);
  --btn-color-hover:#fff;
  --btn-g-bg:rgba(190,239,255,.08);
  --btn-g-border:rgba(190,239,255,.22);
  --sb-item-active-bg:linear-gradient(135deg,#236060 0%,#183f51 52%,#194251 100%);
  --sb-item-active-border:rgba(126,231,219,.48);
  --sb-item-active-color:#f4fffd;

  /* portal tokens (style.css / unified.css / voucher-cards.css) */
  --portal-bg:#173945;
  --portal-surface:#183f51;
  --portal-surface-raised:#1b4656;
  --portal-ink:#edf7f5;
  --portal-muted:#a8bec2;
  --portal-primary:#2dd4bf;
  --portal-primary-strong:#22a7f0;
  --portal-teal:#2dd4bf;
  --portal-teal-strong:#14b8a6;
  --portal-accent:#fbbf24;
  --portal-line:rgba(190,239,255,.32);
  --card-bg:#173945;
  --soft-primary:rgba(45,212,191,.14);
  --soft-success:rgba(74,222,128,.14);
  --soft-warning:rgba(251,191,36,.14);
  --soft-danger:rgba(251,113,133,.14);
  --btn-color:#f4fffd;

  /* page background */
  --body-bg-solid:#173945;
  --body-bg-image:radial-gradient(circle at 8% 0%,#236060 0%,transparent 34%),radial-gradient(circle at 100% 100%,#173e4d 0%,transparent 42%),linear-gradient(135deg,#173740 0%,#183f51 52%,#194251 100%);

  /* shape / typography tokens (used sparingly, non-breaking) */
  --z-radius-card:12px;
  --z-radius-btn:10px;
  --z-radius-icon:10px;
  --z-font-family:'Inter',sans-serif;
}

/* ── ZENRADIUS SPACE ("space") — Deep Space Blue UI Theme ──
   Inovasi gelap berdasarkan palet premium berkarakter luar angkasa (Deep Space Blue).
   Sesuai gambar referensi: background biru luar angkasa malam yang khas, card indigo gelap,
   aktif state menggunakan gradien biru langit muda, dan teks yang cerah & kontras. ── */
[data-app-theme="space"]{
  /* admin.css tokens */
  --bg:#121622; --bg2:#1A1F31; --bg3:#242B42;
  --border:#2A334E;
  --text:#F1F5F9; --muted:#94A3B8;
  --primary:#3B82F6; --pdim:rgba(59,130,246,.15);
  --accent:#06B6D4;
  --success:#10B981; --sdim:rgba(16,185,129,.15);
  --warning:#F59E0B; --wdim:rgba(245,158,11,.15);
  --danger:#EF4444; --ddim:rgba(239,68,68,.15);
  --info:#0EA5E9; --idim:rgba(14,165,233,.15);
  --btn-bg:linear-gradient(135deg,#2563EB 0%,#1E40AF 100%);
  --btn-color:#FFFFFF;
  --btn-border:#1D4ED8;
  --btn-shadow:0 8px 20px rgba(30,64,175,.28);
  --btn-bg-hover:linear-gradient(135deg,#1E40AF 0%,#1E3A8A 100%);
  --btn-border-hover:#1E3A8A;
  --btn-color-hover:#FFFFFF;
  --btn-g-bg:#242B42;
  --btn-g-border:#2A334E;
  --sb-item-active-bg:linear-gradient(135deg,#2563EB 0%,#1D4ED8 100%);
  --sb-item-active-border:#3B82F6;
  --sb-item-active-color:#FFFFFF;

  /* sidebar tokens — deep space solid navy/slate */
  --sb-bg:#121622;
  --sb-bg-secondary:#1A1F31;
  --sb-hover:#1D2437;
  --sb-text:#94A3B8;
  --sb-border:#2A334E;

  /* navbar tokens — clean transparent slate */
  --nav-bg:rgba(26,31,49,.92);
  --nav-border:#2A334E;
  --nav-text:#F1F5F9;
  --nav-text-secondary:#94A3B8;
  --nav-hover:#242B42;
  --nav-active:#3B82F6;

  /* portal tokens (style.css / unified.css / voucher-cards.css) */
  --portal-bg:#121622;
  --portal-surface:#1A1F31;
  --portal-surface-raised:#242B42;
  --portal-ink:#F1F5F9;
  --portal-muted:#94A3B8;
  --portal-primary:#3B82F6;
  --portal-primary-strong:#1D4ED8;
  --portal-teal:#06B6D4;
  --portal-teal-strong:#0891B2;
  --portal-accent:#F59E0B;
  --portal-line:#2A334E;
  --card-bg:#1A1F31;
  --soft-primary:rgba(59,130,246,.15);
  --soft-success:rgba(16,185,129,.15);
  --soft-warning:rgba(245,158,11,.15);
  --soft-danger:rgba(239,68,68,.15);
  --btn-color:#ffffff;

  /* page background — realistic space atmosphere matching prompt image */
  --body-bg-solid:#121622;
  --body-bg-image:radial-gradient(circle at 12% -8%,rgba(59,130,246,.22) 0%,transparent 38%),radial-gradient(circle at 88% 8%,rgba(6,182,212,.16) 0%,transparent 40%),radial-gradient(circle at 50% 100%,rgba(16,185,129,.08) 0%,transparent 45%),radial-gradient(circle at 100% 100%,rgba(29,64,175,.20) 0%,transparent 50%),linear-gradient(165deg,#0A0D16 0%,#121622 40%,#161B2C 70%,#0E1220 100%);

  /* brand gradient — premium glowing accent */
  --space-gradient:linear-gradient(135deg,#3B82F6 0%,#06B6D4 55%,#10B981 100%);

  /* shape / typography */
  --z-radius-card:12px;
  --z-radius-btn:10px;
  --z-radius-icon:10px;
  --z-font-family:'Inter',sans-serif;
}

/* ── ZENRADIUS SPACE — component-level overrides ──
   Agar konsistensi visual di seluruh penjelajahan panel admin tetap terjaga,
   elemen structural di-override secara spesifik untuk menggunakan variabel tema Space. */
[data-app-theme="space"] .sidebar{
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
}
[data-app-theme="space"] .sb-brand{border-bottom-color:var(--sb-border)}
[data-app-theme="space"] .sb-name{color:#FFFFFF}
[data-app-theme="space"] .sb-sub,
[data-app-theme="space"] .sb-section,
[data-app-theme="space"] .sb-sec-chev{color:var(--sb-text)}
[data-app-theme="space"] .sb-section:hover{color:#FFFFFF}
[data-app-theme="space"] .sb-item{color:var(--sb-text)}
[data-app-theme="space"] .sb-item:hover{color:#FFFFFF;background:var(--sb-hover)}
[data-app-theme="space"] .sb-item.active {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border-left-color: var(--primary) !important;
  box-shadow: var(--btn-shadow) !important;
}
[data-app-theme="space"] .sb-item.is-locked{color:var(--sb-text)}
[data-app-theme="space"] .sb-item.is-locked:hover{background:var(--sb-hover)}
[data-app-theme="space"] .topbar{
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  color:var(--nav-text);
}
[data-app-theme="space"] .tb-title{color:var(--nav-text)}
[data-app-theme="space"] .hb-menu, [data-app-theme="space"] .hb-menu i{color:var(--nav-text)}
[data-app-theme="space"] select, [data-app-theme="space"] input, [data-app-theme="space"] textarea{
  background-color: var(--bg3) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-app-theme="space"] .dropdown-menu {
  background-color: var(--bg2) !important;
  border-color: var(--border) !important;
}
[data-app-theme="space"] .dropdown-item {
  color: var(--text) !important;
}
[data-app-theme="space"] .dropdown-item:hover {
  background-color: var(--bg3) !important;
}
[data-app-theme="space"] .bottom-nav {
  background-color: var(--bg2) !important;
  border-top-color: var(--border) !important;
}
[data-app-theme="space"] .bn-item.active {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
}
[data-app-theme="space"] .fs {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233B82F6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}
[data-app-theme="space"] .card form.d-flex .fc,
[data-app-theme="space"] .card form.d-flex .fs,
[data-app-theme="space"] .filter-bar .fc,
[data-app-theme="space"] .filter-bar .fs {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   BOOTSTRAP UTILITY REMAP — anti "color leak"
   --------------------------------------------------------------------------
   Bootstrap's stock utility classes (.text-*, .bg-*, .border-*, .btn-*)
   hardcode their own palette (blue/green/red...) regardless of the active
   theme.  These rules remap every one of those classes to the active theme
   tokens for BOTH themes (Ocean/current and Space).  Together with the
   component CSS that already consumes var(--*) tokens, this guarantees a
   uniform look on every page, A to Z — no page can "leak" Bootstrap's
   default blue or a mismatched tone ever again.
   NOTE: .btn-primary is intentionally untouched here — it is already themed
   via var(--portal-primary) in style.css/unified.css (higher-design rule).
   ========================================================================== */

/* ── Text utilities ── */
.text-primary{color:var(--primary,var(--portal-primary))!important}
.text-secondary{color:var(--muted)!important}
.text-success{color:var(--success)!important}
.text-danger{color:var(--danger)!important}
.text-warning{color:var(--warning)!important}
.text-info{color:var(--info,var(--accent))!important}
.text-light{color:var(--text)!important}
.text-dark{color:var(--text)!important}
.text-body{color:var(--text)!important}
.text-white{color:#fff!important}
.text-muted{color:var(--muted)!important}

/* ── Background utilities (soft glass tints — matches existing app style) ── */
.bg-primary{background:var(--pdim,var(--soft-primary))!important;color:var(--primary,var(--portal-primary))!important;border:1px solid color-mix(in srgb,var(--primary,var(--portal-primary)) 35%,transparent)!important}
.bg-secondary{background-color:var(--bg3)!important;color:var(--text)!important}
.bg-success{background:var(--sdim,var(--soft-success))!important;color:var(--success)!important;border:1px solid color-mix(in srgb,var(--success) 35%,transparent)!important}
.bg-danger{background:var(--ddim,var(--soft-danger))!important;color:var(--danger)!important;border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)!important}
.bg-warning{background:var(--wdim,var(--soft-warning))!important;color:var(--warning)!important;border:1px solid color-mix(in srgb,var(--warning) 35%,transparent)!important}
.bg-info{background:var(--idim,rgba(96,165,250,.14))!important;color:var(--info,var(--accent))!important;border:1px solid color-mix(in srgb,var(--info,var(--accent)) 35%,transparent)!important}
.bg-light{background-color:var(--bg3)!important;color:var(--text)!important}
.bg-dark{background-color:var(--bg)!important;color:var(--text)!important}
.bg-body{background-color:var(--bg)!important;color:var(--text)!important}
.bg-white{background-color:var(--bg2)!important;color:var(--text)!important}

/* ── Border utilities ── */
.border-primary{border-color:var(--primary)!important}
.border-secondary{border-color:var(--border)!important}
.border-success{border-color:var(--success)!important}
.border-danger{border-color:var(--danger)!important}
.border-warning{border-color:var(--warning)!important}
.border-info{border-color:var(--info,var(--accent))!important}
.border-light{border-color:var(--border)!important}
.border-dark{border-color:var(--border)!important}

/* ── Button utilities (non-primary) ── */
.btn-info{
  background:linear-gradient(135deg,var(--info,var(--accent)) 0%,var(--primary) 100%);
  border-color:var(--info,var(--accent));color:#fff!important;
}
.btn-info:hover,.btn-info:focus,.btn-info:active{
  background:linear-gradient(135deg,var(--info,var(--accent)) 0%,var(--primary) 100%);
  border-color:var(--primary);filter:brightness(1.1);color:#fff!important;
}
.btn-success{
  background:linear-gradient(135deg,var(--success) 0%,color-mix(in srgb,var(--success) 70%,#000) 100%);
  border-color:var(--success);color:#04210f!important;font-weight:600;
}
.btn-success:hover,.btn-success:focus,.btn-success:active{
  background:linear-gradient(135deg,var(--success) 0%,color-mix(in srgb,var(--success) 70%,#000) 100%);
  border-color:var(--success);filter:brightness(1.08);color:#04210f!important;
}
.btn-warning{
  background:linear-gradient(135deg,var(--warning) 0%,color-mix(in srgb,var(--warning) 70%,#000) 100%);
  border-color:var(--warning);color:#241a02!important;font-weight:600;
}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active{
  background:linear-gradient(135deg,var(--warning) 0%,color-mix(in srgb,var(--warning) 70%,#000) 100%);
  border-color:var(--warning);filter:brightness(1.08);color:#241a02!important;
}
.btn-danger{
  background:linear-gradient(135deg,var(--danger) 0%,color-mix(in srgb,var(--danger) 70%,#000) 100%);
  border-color:var(--danger);color:#fff!important;font-weight:600;
}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active{
  background:linear-gradient(135deg,var(--danger) 0%,color-mix(in srgb,var(--danger) 70%,#000) 100%);
  border-color:var(--danger);filter:brightness(1.08);color:#fff!important;
}
.btn-outline-primary{color:var(--primary)!important;border-color:var(--primary)!important}
.btn-outline-primary:hover{background-color:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
.btn-outline-success,.btn-link-success{color:var(--success)!important;border-color:var(--success)!important}
.btn-outline-success:hover{background-color:var(--success)!important;color:#04210f!important;border-color:var(--success)!important}
.btn-outline-danger,.btn-link-danger{color:var(--danger)!important;border-color:var(--danger)!important}
.btn-outline-danger:hover{background-color:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important}
.btn-outline-warning{color:var(--warning)!important;border-color:var(--warning)!important}
.btn-outline-warning:hover{background-color:var(--warning)!important;color:#241a02!important;border-color:var(--warning)!important}
.btn-outline-info{color:var(--info,var(--accent))!important;border-color:var(--info,var(--accent))!important}
.btn-outline-info:hover{background-color:var(--info,var(--accent))!important;color:#fff!important;border-color:var(--info,var(--accent))!important}