/* LEVO brand theme — overrides Sneat's default colors. Loaded after
   core.css/demo.css. The [data-bs-theme=dark] block below drives the
   all-black auth pages (login screens set that attribute themselves);
   the admin dashboard instead uses data-bs-theme="light" plus
   data-semidark-menu="true" — see the block further down — so its
   content area is white while just the navbar/sidebar stay black. */
:root,
[data-bs-theme=light] {
  --bs-primary: #d81f26;
  --bs-primary-rgb: 216, 31, 38;
  --bs-primary-text-emphasis: #7a0f13;
  --bs-primary-bg-subtle: #f8d7d8;
  --bs-primary-border-subtle: #f0aeb0;
  --bs-font-sans-serif: "Tajawal", "Public Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

[data-bs-theme=dark] {
  --bs-primary: #d81f26;
  --bs-primary-rgb: 216, 31, 38;
  --bs-primary-text-emphasis: #ff6b70;
  --bs-primary-bg-subtle: #2a0a0c;
  --bs-primary-border-subtle: #5c1418;
  --bs-body-bg: #000000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-paper-bg: #000000;
  --bs-paper-bg-rgb: 0, 0, 0;
  --bs-body-color: #ffffff;
  --bs-heading-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  /* Sneat hardcodes these two to its own dark color (#2b2c40) instead of
     referencing --bs-paper-bg, so they need their own black override. */
  --bs-menu-bg: #000000;
}
[data-bs-theme=dark] .card {
  --bs-card-bg: #000000;
}

/* Admin dashboard: light content area, black navbar + sidebar only.
   Scoped to data-semidark-menu so it never touches the auth pages above
   or the subscriber/public pages, which don't set this attribute. */
[data-semidark-menu=true] {
  --bs-menu-bg: #000000;
  /* Sneat derives this from --bs-paper-bg-rgb, which is white under the
     light theme — the sidebar's scroll-fade shadow (.menu-inner-shadow)
     uses it directly, so without this override that shadow fades to
     white instead of black once the menu is scrolled. */
  --bs-menu-bg-rgb: 0, 0, 0;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
}
[data-semidark-menu=true] .bg-navbar-theme {
  /* The vertical-menu layout never actually reads --bs-navbar-bg (that
     wiring only exists for the horizontal layout template), so the
     navbar was just showing the white body color through a transparent
     background — set the literal background-color instead. */
  background-color: #000000;
  --bs-navbar-color: #ffffff;
  --bs-navbar-hover-color: rgba(255, 255, 255, .75);
  --bs-navbar-active-color: #ffffff;
}
/* Sneat separately blurs the navbar to a translucent --bs-paper-bg once
   the page scrolls (window-scrolled JS class) — that variable is white
   under the light theme, so the black navbar was flashing white on
   scroll. Same selector, scoped under our attribute so it wins. */
[data-semidark-menu=true] .layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar {
  background-color: rgba(0, 0, 0, .92);
}
[data-semidark-menu=true] .navbar-datetime {
  color: #ffffff;
  opacity: .75;
}

/* Home (public site) button — pinned alone to the header's right edge,
   separate from the language/time/avatar cluster on the left. The navbar
   is already `position: fixed` (core.css), which is enough of a
   containing block for this — no need to add position:relative here
   ourselves (doing that once already fought core.css's own fixed rule). */
[data-semidark-menu=true] .navbar-pinned-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  z-index: 5;
}

.app-brand-logo img { height: 32px; width: auto; }

/* Sidebar collapse toggle — Sneat renders it as a small circle pinned to
   the brand area. Uses --bs-primary directly (not the text-emphasis
   variant, which is a dark shade meant for text on light backgrounds)
   so it stays visible against the sidebar's black background. */
.menu .app-brand .layout-menu-toggle {
  background-color: var(--bs-primary);
}

.dropdown-language .dropdown-item.active,
.dropdown-language .dropdown-item:active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* UAE Dirham symbol — always precedes the numeral (see x-currency-amount),
   sized to text height with a small gap, and inherits the surrounding
   text color so it reads correctly in badges/dark contexts too. */
.currency-amount { white-space: nowrap; }
.currency-symbol {
  height: 0.85em;
  width: auto;
  vertical-align: -0.05em;
  margin-inline-end: 0.2em;
}

/* Navbar "back to the public site" icon and the current date/timezone
   readout next to it — same circular-button look as the auth pages'
   home button, sized to sit inline with the language/user dropdowns. */
.btn-home-circle-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff !important;
}
.btn-home-circle-nav i { font-size: 1.05rem; color: #fff; }
.navbar-datetime {
  font-size: .8rem;
  color: var(--bs-body-color);
  opacity: .75;
  white-space: nowrap;
}

/* Reward-system stage badges — one hexagon per stage a child currently
   qualifies for (shown on the family member card), sized/shaped to read
   as a medal rather than a plain icon. */
.motivation-hex-badge {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Badges carried over from a finished, auto-restarted cycle — same shape,
   shown smaller and in their own row to read as "past" achievements. */
.motivation-hex-badge-sm {
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  opacity: 0.85;
}