/* ==========================================================================
   theme.css — surface-token layer, light/dark themes, flat surfaces.

   Loads LAST (after main.css, custom.css, color.php and shell.css), so plain
   declarations win and !important is only needed where main.css used it.

   HOW THE THEME FLIP WORKS
   main.css paints the whole template on a dark ground: text, borders and
   dividers are all written as `hsl(var(--white) / x)`. Rather than restating
   several hundred selectors for a light theme, this file treats `--white` as
   the *foreground* token and flips it to a dark ink in light mode. Surfaces
   flip alongside it via `--body-bg` / `--section-bg*` / `--form-bg`.

   Where white text sits on a brand-coloured or permanently dark surface
   (buttons, badges, the sidebar) the subtree re-declares `--white` back to
   pure white. Custom properties are substituted at computed-value time, so a
   scoped subtree must restate BOTH `--white` and `--fg` — setting only `--fg`
   does not retroactively change an inherited `--white`.

   The brand hue (--base / --base-two, driven by color.php and therefore by
   Admin -> Settings) is identical in both themes. Only surfaces flip.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Absolute tokens — never flip with the theme
   -------------------------------------------------------------------------- */

:root {
  --white-abs: 0 0% 100%;
  --ink-abs: 220 43% 11%;

  /* The app sidebar stays dark in both themes (a deliberate dashboard
     convention: it reads as chrome rather than content, and it keeps the
     brand colour anchored). These are the only always-dark surfaces. */
  --shell-surface: 224 35% 12%;
  --shell-surface-2: 223 35% 16%;
}

/* --------------------------------------------------------------------------
   2. Light theme — the default set, so every token has a value on bare :root
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --page-bg: 220 43% 97%;
  --surface: 0 0% 100%;
  --surface-2: 218 48% 95%;
  --surface-3: 218 30% 92%;
  --fg: 220 43% 11%;
  --fg-muted: 220 16% 42%;
  --line: 220 24% 90%;
  --line-strong: 220 20% 82%;

  /* Inline links. The brand colour clears 4.5:1 on the light surfaces but not
     on the dark ones, so the dark theme lightens it via the brand ramp.
     The lift has to be --base-l-600 rather than a smaller step because it is
     relative to the remaining headroom: a mid-lightness brand colour like the
     default indigo (L 59%) passes at l-300, but a darker one like this site's
     configured blue (L 42%) only reaches 3.1:1. l-600 clears 4.5:1 for every
     brand colour down to about L 25%. */
  --link: var(--base);

  /* Remap of the legacy main.css tokens onto the surface set above. */
  --white: 220 43% 11%;
  --light: 220 16% 42%;
  --heading-color: var(--fg);
  --body-color: var(--fg-muted);
  --border-color: var(--line);
  --body-bg: var(--page-bg);
  --section-bg: var(--surface);
  --section-bg-two: var(--surface);
  --section-bg-three: var(--surface-2);
  --form-bg: var(--surface);

  --box-shadow: 0 1px 2px hsl(var(--ink-abs) / 0.06),
    0 8px 24px hsl(var(--ink-abs) / 0.06);
  --header-box-shadow: 0 1px 3px hsl(var(--ink-abs) / 0.08);
  --mobile-box-shadow: 0 -1px 8px hsl(var(--ink-abs) / 0.1);
}

/* --------------------------------------------------------------------------
   3. Dark theme

   Declared twice on purpose: once for "no stored choice, OS prefers dark"
   and once for an explicit data-theme="dark". The media query is guarded
   with :not([data-theme="light"]) so an explicit light choice still wins
   on an OS set to dark.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --page-bg: 224 37% 8%;
    --surface: 224 35% 12%;
    --surface-2: 223 35% 16%;
    --surface-3: 224 37% 10%;
    --fg: 0 0% 100%;
    --fg-muted: 220 14% 70%;
    --line: 223 26% 22%;
    --line-strong: 223 24% 30%;
    --link: var(--base-l-600);

    --white: 0 0% 100%;
    --light: 220 14% 70%;

    --box-shadow: 0 1px 2px hsl(var(--black) / 0.4),
      0 8px 24px hsl(var(--black) / 0.35);
    --header-box-shadow: 0 1px 3px hsl(var(--black) / 0.45);
    --mobile-box-shadow: 0 -1px 8px hsl(var(--black) / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page-bg: 224 37% 8%;
  --surface: 224 35% 12%;
  --surface-2: 223 35% 16%;
  --surface-3: 224 37% 10%;
  --fg: 0 0% 100%;
  --fg-muted: 220 14% 70%;
  --line: 223 26% 22%;
  --line-strong: 223 24% 30%;
  --link: var(--base-l-600);

  --white: 0 0% 100%;
  --light: 220 14% 70%;

  --box-shadow: 0 1px 2px hsl(var(--black) / 0.4),
    0 8px 24px hsl(var(--black) / 0.35);
  --header-box-shadow: 0 1px 3px hsl(var(--black) / 0.45);
  --mobile-box-shadow: 0 -1px 8px hsl(var(--black) / 0.5);
}

/* --------------------------------------------------------------------------
   4. Gradients

   main.css routes ~60 gradient backgrounds through four custom properties, so
   redefining them here flattens the whole template in one place: every one
   becomes a flat brand fill instead of the pink-to-orange ramp the template
   shipped with. They stay var()-derived, so they still follow the admin's
   colour, and `background: var(--base-gradient)` is still valid CSS with a
   plain colour on the right-hand side.

   A side effect worth knowing: main.css animated .btn--base by sliding two
   gradient layers across it. With flat fills there is nothing to see, so
   section 5 retires those layers and gives the button a real hover.
   -------------------------------------------------------------------------- */

:root {
  --base-gradient: hsl(var(--base));
  --base-gradient-reverse: hsl(var(--base));
  --base-gradient-two: hsl(var(--base));
  --base-gradient-two-reverse: hsl(var(--base));
}

/* Decorative blurred blobs. These were hardcoded blues (#010bff, #2f00ff,
   rgba(0,182,255)) that ignored the admin colour entirely and muddied the
   page. Retinted to the brand hue and constrained so they cannot push the
   document sideways on a phone. */
.gradient-one,
.gradient-two,
.footer-area .shape-one,
.footer-area .shape-two,
.investment-section .investment-shape__two,
.testimonials__shape-two,
.testimonials__shape-three {
  background: radial-gradient(
    circle at 50% 50%,
    hsl(var(--base) / 0.28) 0%,
    hsl(var(--base) / 0) 70%
  ) !important;
  max-width: 100%;
}

/* Flat brand tint instead of the hardcoded #403466 -> #0e1839 ramp. */
.breadcrumb {
  background: hsl(var(--base) / 0.08) !important;
  border-bottom: 1px solid hsl(var(--line));
}

/* Card scrim was a hardcoded near-black, invisible in light mode. */
.testimonial-item::after {
  background: hsl(var(--surface-2)) !important;
}

/* The header cell divider was a two-hue gradient sliver. */
.table thead tr th::before {
  display: none;
}

/* Sidebar scrollbar thumb: flat brand rather than a ramp. */
.dashboard .sidebar-menu::-webkit-scrollbar-thumb {
  background: hsl(var(--base) / 0.5);
}

/* Gold "Leader" badge in custom.css was a hardcoded gradient. Flat, and it
   keeps its own gold identity (it is a status marker, not brand chrome). */
.sidenav-leader-badge {
  background: #d4a52a !important;
  color: #1a1200;
}

/* --------------------------------------------------------------------------
   5. On-brand subtrees — restate white so text stays legible on colour

   Both --white and --fg are restated: see the note at the top of the file.
   -------------------------------------------------------------------------- */

.btn--base,
.btn--base-two,
.btn--primary,
.btn--secondary,
.btn--success,
.btn--danger,
.btn--warning,
.btn--info,
.btn--dark,
.bg--base,
.bg--base-two,
.bg--primary,
.bg--secondary,
.bg--success,
.bg--danger,
.bg--warning,
.bg--info,
.badge--base,
.badge--primary,
.badge--secondary,
.badge--success,
.badge--danger,
.badge--warning,
.badge--info,
.alert--base,
.cookies-card__icon,
.header .header-auth-btn--solid,
.scroll-top,
.profile-account,
.dashboard .sidebar-menu-list__link.active,
.dashboard .sidebar-menu-list__link.sidebar-submenu__open,
.dashboard .sidebar-menu-list__item.active > a {
  --white: var(--white-abs);
  --fg: var(--white-abs);
}

/* main.css leaves .btn--base without a colour, so it inherited body text —
   which is dark ink in light mode. Pin it. */
.btn--base,
.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible {
  color: hsl(var(--white-abs));
}

/* The teal accent is too light to carry white text at normal sizes, so the
   accent badge/button take dark ink instead. */
.badge--base-two,
.btn--base-two {
  --white: var(--ink-abs);
  --fg: var(--ink-abs);
  color: hsl(var(--ink-abs)) !important;
}

/* .btn--base animated its hover state by sliding two gradient pseudo-element
   layers across itself. With flat fills that slide is invisible motion, so
   the layers are retired in favour of a plain darken. */
.btn--base::before,
.btn--base::after {
  content: none !important;
  display: none !important;
}

.btn--base {
  background: hsl(var(--base));
  transition: background-color 0.18s linear, box-shadow 0.18s linear;
}

.btn--base:hover,
.btn--base:focus-visible {
  background: hsl(var(--base-d-100));
  box-shadow: 0 4px 14px hsl(var(--base) / 0.3);
}

/* --------------------------------------------------------------------------
   6. Sidebar — permanently dark in both themes
   -------------------------------------------------------------------------- */

.dashboard .sidebar-menu {
  --white: var(--white-abs);
  --fg: var(--white-abs);
  --section-bg: var(--shell-surface);
  --surface: var(--shell-surface);
  --surface-2: var(--shell-surface-2);
  background-color: hsl(var(--shell-surface));
  border-right: 1px solid hsl(var(--white-abs) / 0.07);
}

.dashboard .sidebar-menu .menu-title {
  color: hsl(var(--white-abs) / 0.45);
}

/* --------------------------------------------------------------------------
   7. Surfaces and components
   -------------------------------------------------------------------------- */

body {
  background-color: hsl(var(--page-bg));
  color: hsl(var(--fg) / 0.85);
}

.dashboard__right {
  background-color: hsl(var(--page-bg));
  min-width: 0;
}

.dashboard .dashboard-header {
  background-color: hsl(var(--surface));
  border-bottom: 1px solid hsl(var(--line));
}

.custom--card {
  background-color: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  border-radius: 12px;
  box-shadow: var(--box-shadow);
}

.custom--card .card-header,
.custom--card .card-footer {
  border-color: hsl(var(--line));
  background-color: transparent;
}

/* Tables: the template outlined every cell edge in the full-strength brand
   colour, which is loud at any saturation. Neutral rules, brand reserved for
   emphasis. */
.table thead tr th {
  background-color: hsl(var(--surface-2));
  color: hsl(var(--fg));
  border-top: 1px solid hsl(var(--line));
  border-bottom: 1px solid hsl(var(--line));
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.table thead tr th:first-child {
  border-left: 1px solid hsl(var(--line));
}

.table thead tr th:last-child {
  border-right: 1px solid hsl(var(--line));
}

.table tbody {
  border: 1px solid hsl(var(--line)) !important;
  background-color: hsl(var(--surface));
}

.table tbody tr td {
  color: hsl(var(--fg) / 0.82);
  border-bottom: 1px solid hsl(var(--line));
}

.table tbody tr td::before {
  color: hsl(var(--fg));
}

.table tbody tr td:first-child {
  border-left: 1px solid hsl(var(--line));
}

.table tbody tr td:last-child {
  border-right: 1px solid hsl(var(--line)) !important;
}

.table tbody tr:last-child td {
  border-bottom: 1px solid hsl(var(--line));
}

.table tbody tr:hover td {
  background-color: hsl(var(--base) / 0.04);
}

/* Any table narrower than its content scrolls inside its own box rather than
   widening the page. */
.table-responsive,
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Forms */
.form--control {
  background-color: hsl(var(--surface)) !important;
  border: 1px solid hsl(var(--line-strong));
  color: hsl(var(--fg));
}

.form--control::placeholder {
  color: hsl(var(--fg) / 0.45);
}

.form--control:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 3px hsl(var(--base) / 0.16) !important;
}

.input-group-text,
.form-select {
  background-color: hsl(var(--surface-2));
  border-color: hsl(var(--line-strong));
  color: hsl(var(--fg));
}

/* select2 follows the surface tokens instead of its own light defaults. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
  background-color: hsl(var(--surface)) !important;
  border-color: hsl(var(--line-strong)) !important;
  color: hsl(var(--fg)) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option {
  color: hsl(var(--fg)) !important;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: hsl(var(--base)) !important;
  color: hsl(var(--white-abs)) !important;
}

/* Utility text classes that Bootstrap pins to fixed greys. */
.text-muted {
  color: hsl(var(--fg) / 0.6) !important;
}

hr {
  border-color: hsl(var(--line));
  opacity: 1;
}

.modal-content,
.dropdown-menu,
.user-info-dropdown {
  background-color: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  color: hsl(var(--fg));
}

.cookies-card {
  background-color: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  color: hsl(var(--fg));
}

.preloader-wrapper {
  background-color: hsl(var(--page-bg));
}

/* Public header/footer sit on the page ground in light mode. */
.footer-area {
  background-color: hsl(var(--surface-3));
  border-top: 1px solid hsl(var(--line));
}

/* The sticky header was pinned to pure black, which left dark ink on black in
   light mode. */
.header.fixed-header {
  background-color: hsl(var(--surface));
  box-shadow: var(--header-box-shadow);
}

/* Below the navbar breakpoint the menu drops open over the hero. It needs its
   own surface or the links sit on whatever image happens to be behind them. */
@media screen and (max-width: 991px) {
  .header .navbar-collapse.show,
  .header .navbar-collapse.collapsing {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--line));
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: 8px 16px 16px;
    margin-top: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .header .nav-menu {
    margin-top: 8px;
  }

  /* Auth buttons stack full width instead of squeezing side by side. */
  .header .top-button {
    flex-direction: column;
    align-items: stretch;
    margin-top: 12px;
  }

  .header .header-auth-btn {
    justify-content: center;
    min-height: 44px;
  }

  /* The ghost button's border was tuned for a dark ground. */
  .header .header-auth-btn--ghost {
    color: hsl(var(--fg));
    border-color: hsl(var(--line-strong));
  }
}

.verification-code span {
  background: hsl(var(--surface-2)) !important;
  border: 1px solid hsl(var(--line-strong)) !important;
  color: hsl(var(--fg)) !important;
}

/* --------------------------------------------------------------------------
   8. Theme toggle control
   -------------------------------------------------------------------------- */

.theme-toggle {
  --toggle-size: 44px;
  width: var(--toggle-size);
  height: var(--toggle-size);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid hsl(var(--line));
  background-color: transparent;
  color: hsl(var(--fg) / 0.75);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.18s linear, color 0.18s linear,
    border-color 0.18s linear;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background-color: hsl(var(--base) / 0.1);
  border-color: hsl(var(--base) / 0.4);
  color: hsl(var(--base));
}

/* One icon per theme; the inactive one is removed from the box entirely so
   the button cannot change width when the theme flips. */
.theme-toggle__icon {
  display: none;
}

.theme-toggle__icon--dark {
  display: inline-flex;
}

:root[data-theme="dark"] .theme-toggle__icon--dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--light {
  display: inline-flex;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--dark {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__icon--light {
    display: inline-flex;
  }
}

/* On the dark app header the toggle borrows the sidebar treatment. */
.dashboard .dashboard-header .theme-toggle {
  border-color: hsl(var(--line));
}

/* --------------------------------------------------------------------------
   9. Responsiveness — mobile first, most users are on phones
   -------------------------------------------------------------------------- */

/* Nothing may widen the document. */
/* Horizontal clipping belongs on the root element, where it propagates to the
   viewport. On `body` it would make body itself a scroll container, which
   silently breaks the sticky dashboard header. */
html {
  overflow-x: hidden;
}

html,
body {
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Long crypto addresses / hashes are the usual cause of sideways scroll. */
.table tbody tr td,
.copy-text,
.text-break-all {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 991px) {
  /* Drawer must never exceed the viewport. */
  .dashboard .sidebar-menu {
    width: min(86vw, 300px);
    max-width: 320px;
  }

  .dashboard .dashboard-header {
    padding: 0 16px;
  }
}

@media screen and (max-width: 767px) {
  .dashboard .dashboard-header__inner {
    padding: 10px 0;
    gap: 10px;
  }

  /* Cards and tables get their padding back for content. */
  .custom--card .card-body {
    padding: 16px;
  }

  .table tbody tr td,
  .table thead tr th {
    padding: 12px;
  }

  /* Stacked rows: the data-label column needs room to breathe. */
  .table--responsive--md tbody tr td::before {
    width: 42% !important;
  }

  .table--responsive--md tbody tr {
    padding-block: 4px;
  }
}

@media screen and (max-width: 575px) {
  .form--control {
    padding: 13px 16px;
  }

  .custom--card {
    border-radius: 10px;
  }
}

/* Tap targets. Anything interactive clears 44px on touch pointers, which is
   the WCAG 2.5.8 target size and the iOS guideline. */
@media (pointer: coarse) {
  .dashboard .dashboard-body__bar-icon,
  .dashboard .sidebar-menu__close,
  .theme-toggle,
  .scroll-top,
  .copyInput,
  .password-show-hide {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dashboard .sidebar-menu-list__link,
  .dashboard .sidebar-submenu-list__link,
  .user-info-dropdown__link,
  .pagination .page-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .btn,
  .btn-sm {
    min-height: 44px;
  }

  /* iOS zooms the page when a focused input is under 16px. */
  input,
  select,
  textarea,
  .form--control {
    font-size: 16px;
  }
}

/* Pagination wraps rather than overflowing on narrow screens. */
.pagination {
  flex-wrap: wrap;
  gap: 4px;
  row-gap: 6px;
}

.pagination .page-link {
  border-color: hsl(var(--line));
  background-color: hsl(var(--surface));
  color: hsl(var(--fg) / 0.8);
}

.pagination .page-item.active .page-link {
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
  color: hsl(var(--white-abs));
}

/* Floating variant, for the auth pages: they render neither the public header
   nor the dashboard topbar, so without this there is no way to switch theme
   on the first page a visitor sees. */
.theme-toggle--float {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  background-color: hsl(var(--surface));
  border-color: hsl(var(--line-strong));
  box-shadow: var(--box-shadow);
}

@media screen and (max-width: 575px) {
  .theme-toggle--float {
    top: 12px;
    right: 12px;
  }
}

/* --------------------------------------------------------------------------
   10. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .btn--base {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   11. Legacy hardcoded colours

   Colours main.css wrote as literals, so they never followed the admin's
   theme and could not flip. Routed through the tokens.
   -------------------------------------------------------------------------- */

/* Every anchor in the template was pinned to the old hot pink (#ff0044) —
   the most visible remnant of the shipped palette. */
a {
  color: hsl(var(--link));
}

a:hover,
a:focus-visible {
  color: hsl(var(--base-d-100));
}

:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] a:focus-visible {
  color: hsl(var(--base-l-500));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a:hover,
  :root:not([data-theme="light"]) a:focus-visible {
    color: hsl(var(--base-l-500));
  }
}

/* Hero headline accents were two hardcoded navies, invisible on a dark
   ground and off-brand on a light one. */
.banner-content__title .title-style {
  color: hsl(var(--base));
}

.banner-content__title .title-style__two {
  color: hsl(var(--base-two));
}

/* Remaining decorative shapes: hardcoded cyan/azure blobs. */
.banner-section .shape-three,
.banner-section .shape-four,
.investment-section .investment-shape,
.testimonials__shape-four,
.blog-section .shape-one {
  background: hsl(var(--base) / 0.25) !important;
  max-width: 100%;
}

/* Investor card faded from a hardcoded slate, which showed as a grey smear on
   a light surface. Flat surface, brand tint on hover. */
.investor-item {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
}

.investor-item:hover {
  border-color: hsl(var(--base) / 0.45);
  background: hsl(var(--base) / 0.04);
}

/* Plan picker dropped to a fixed slate that clashed with light surfaces. */
.account-method .select-plan .form--select {
  background: hsl(var(--surface)) !important;
  border: 1px solid hsl(var(--line-strong));
  color: hsl(var(--fg));
}

/* Fixed blacks/greys on chips, search and the cookie card. */
.search-box__button,
.text-list.style-category .text-list__link,
.text-list.style-tag .text-list__link {
  color: hsl(var(--fg));
}

.text-list.style-tag .text-list__link {
  border-color: hsl(var(--line-strong));
}

.text-list.style-tag .text-list__link.active {
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
  color: hsl(var(--white-abs));
}

.text-list.style-category .text-list__link:hover,
.search-box__button:hover {
  color: hsl(var(--base));
}

.cookies-card {
  color: hsl(var(--fg) / 0.85);
}

.cookies-btn,
.cookies-btn:hover {
  color: hsl(var(--fg));
}

.list-group.list--group .list-group-item {
  background-color: hsl(var(--surface)) !important;
  color: hsl(var(--fg));
  border: 1px solid hsl(var(--line));
}