/* Dark mode for the landing/marketing pages.
   The vendor theme ships a dormant dark-mode engine (assets/js/app-head-bs.js
   toggles a "uc-dark" class on <html>, and the bundled theme CSS already has
   ~15k ".uc-dark" rules) - that mechanism is what we hook into, per the
   instruction to respect the system already in the template. In practice
   those vendor rules only style the theme's own "uc-*" component classes,
   and this site's actual markup is built almost entirely from plain
   Bootstrap utility classes (bg-white, bg-secondary, text-gray-400, ...), so
   activating "uc-dark" alone produced no visible change. This file is the
   bridge: it overrides those specific utility classes under ".uc-dark",
   using a 2-class selector so it outranks the vendor's own 1-class
   "!important" utility rules regardless of stylesheet order.

   Colors are the same values as the dashboard app's dark palette
   (src/assets/main.css ".dark" block / src/stores/theme.js) - keep the two
   in sync by hand if either changes, there's no shared build step between
   the Vue app and this static site. */

.uc-dark {
  --color-canvas: 15 19 26; /* app background */
  --color-surface: 26 32 42; /* card / white surface */
  --color-surface-muted: 35 43 56; /* secondary surface / hover */
  --color-line: 48 58 74; /* default border */
  --color-line-soft: 43 69 96; /* light blue border */
  --color-ink: 231 235 241; /* primary text */
  --color-ink-soft: 159 170 184; /* secondary/muted text */
  --color-brand: 76 147 255; /* primary blue */
  --color-danger: 255 125 114;
  --color-success: 61 214 155;
}

/* body carries its own "bg-white" class in the markup, which (being 2
   classes vs. this rule's 1 class + element) would otherwise outrank this
   and leave body surface-colored instead of canvas-colored - match its
   specificity so body reliably reads as the base page background. */
.uc-dark body.bg-white,
.uc-dark body {
  background-color: rgb(var(--color-canvas)) !important;
  color: rgb(var(--color-ink-soft)) !important;
}

.uc-dark .bg-white {
  background-color: rgb(var(--color-surface)) !important;
}
.uc-dark .bg-secondary {
  background-color: rgb(var(--color-canvas)) !important;
}
.uc-dark .bg-light,
.uc-dark .bg-gray-50,
.uc-dark .bg-gray-100 {
  background-color: rgb(var(--color-surface-muted)) !important;
}
.uc-dark .from-secondary {
  --uc-gradient-from: rgb(var(--color-canvas)) !important;
}
.uc-dark .to-secondary {
  --uc-gradient-to: rgb(var(--color-canvas)) !important;
}
.uc-dark .via-secondary {
  --uc-gradient-stops: var(--uc-gradient-from), rgb(var(--color-canvas)), var(--uc-gradient-to) !important;
}
.uc-dark .from-white {
  --uc-gradient-from: rgb(var(--color-surface)) !important;
}
.uc-dark .to-white {
  --uc-gradient-to: rgb(var(--color-surface)) !important;
}
.uc-dark .via-white {
  --uc-gradient-stops: var(--uc-gradient-from), rgb(var(--color-surface)), var(--uc-gradient-to) !important;
}

.uc-dark .text-gray-900,
.uc-dark .text-tertiary-900,
.uc-dark .text-dark {
  color: rgb(var(--color-ink)) !important;
}
.uc-dark .text-gray-400,
.uc-dark .text-gray-500,
.uc-dark .text-gray-600 {
  color: rgb(var(--color-ink-soft)) !important;
}
.uc-dark .text-gray-200,
.uc-dark .text-gray-100 {
  color: rgb(var(--color-ink-soft)) !important;
}

/* Header account pill: both the user name and chevron should be white on the
   dark navbar, including interactive button states. */
.uc-dark .aj-user-pill .aj-user-pill-name,
.uc-dark .aj-user-pill .aj-user-pill-arrow {
  color: #fff !important;
}

/* Keep the header sign-in label legible on the dark navbar in every landing
   page. This deliberately targets only the sign-in links, not other outline
   primary buttons used in page content. */
.uc-dark a.btn-outline-primary[href="/log-in"],
.uc-dark a.btn-outline-primary[href="sign-in.html"] {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  color: #fff !important;
}

.uc-dark .border-gray-100,
.uc-dark .border-gray-200,
.uc-dark .border-1,
.uc-dark .border-top,
.uc-dark .border-bottom,
.uc-dark .border-0 {
  border-color: rgb(var(--color-line)) !important;
}

.uc-dark .bg-primary {
  background-color: rgb(var(--color-brand)) !important;
}
.uc-dark .text-primary {
  color: rgb(var(--color-brand)) !important;
}
.uc-dark .bg-danger {
  background-color: rgb(var(--color-danger)) !important;
}
.uc-dark .text-danger {
  color: rgb(var(--color-danger)) !important;
}
.uc-dark .bg-success {
  background-color: rgb(var(--color-success)) !important;
}
.uc-dark .text-success {
  color: rgb(var(--color-success)) !important;
}

/* NOTE: ".panel" is NOT a card/box component in this theme - it's used as a
   generic structural wrapper everywhere (on <body>, footer sub-sections, even
   the logo <a>), so giving it a background paints boxes all over the site
   that shouldn't be there. Only ".card" (used sparingly, e.g. help.html) is
   an actual visual card component. */
.uc-dark .card {
  background-color: rgb(var(--color-surface));
  border-color: rgb(var(--color-line));
}

/* Hero: di gelap tanpa gradien sama sekali — pitanya memakai warna kanvas
   halaman supaya hero dan seksi sesudahnya terbaca sebagai satu bidang gelap.
   Shorthand "background" (bukan "background-color") memang disengaja: ia ikut
   menghapus background-image gradien biru yang dipasang aj-polish.css untuk mode
   terang. */
.uc-dark #hero_header {
  background: rgb(var(--color-canvas)) !important;
}

/* Pricing tetap bergradien: pasangan gelap yang sama dengan wizard onboarding
   (src/views/OnBoardingView/v2/OnBoardingIndex.vue). */
.uc-dark #pricing {
  background: linear-gradient(180deg, #063a91 0%, #1c2b45 100%) !important;
}

/* Kartu "Sepenggal kisah kami" (about.html, #clients_feedbacks). Kartunya cuma
   ".panel.bg-secondary", dan di terang itu jadi permukaan hangat (245,238,233)
   di atas halaman putih — terbaca sebagai kotak. Di gelap ".bg-secondary"
   dipetakan ke warna kanvas (lihat aturan di atas, memang disengaja supaya pita
   seksi melebur ke halaman), jadi kotaknya hilang dan yang tersisa cuma fotonya.
   Kasus yang sama dengan item akordion di aj-help.css: naikkan ke warna
   kartu tersendiri (#181E2C) dan beri garis rambut. Dilingkupi ke seksi ini saja agar pita
   ".bg-secondary" lain tetap melebur seperti rancangannya. */
.uc-dark #clients_feedbacks .bg-secondary {
  background-color: #181e2c !important;
  border: 1px solid rgb(var(--color-line));
}