/* CROCO | كروكو brand theme — overrides Sneat's default purple with the
   app's green/gold palette. Loaded after core.css/demo.css. */
:root,
[data-bs-theme=light] {
  --bs-primary: #A3B740;
  --bs-primary-rgb: 163, 183, 64;
  --bs-primary-text-emphasis: #4C5726;
  --bs-primary-bg-subtle: #F1F3E4;
  --bs-primary-border-subtle: #D9E0BB;
  --bs-font-sans-serif: "Tajawal", "Public Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

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

/* Sidebar collapse toggle — Sneat renders it as a small circle pinned to
   the brand area; keep its own working position/behavior, just recolor
   it to the dark-green brand shade instead of the default primary. */
.menu .app-brand .layout-menu-toggle {
  background-color: var(--bs-primary-text-emphasis);
}

.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;
}