/*
 * BichoVets Brand Stylesheet
 * Single source of truth for all brand colors used in CSS/HTML, plus the
 * Bootstrap / Skote overrides that resolve `--bs-*` tokens to brand values.
 * For email templates (which cannot use CSS variables), mirror values
 * are held in BRAND_COLORS in BichoVets/settings.py.
 *
 * Four-layer architecture:
 *   Layer 1 — raw palette (Material Light Green + Grey scale)
 *   Layer 2 — semantic intent aliases
 *   Layer 3 — Bootstrap / Skote :root overrides
 *   Layer 4 — Bootstrap / Skote component-scoped overrides
 *
 * Load this file AFTER bootstrap.min.css and app.min.css so the cascade
 * resolves in our favor.  Never edit bootstrap.min.css to change brand
 * colors — adjust tokens here instead.
 */

/* ======== Layer 1 — Raw Palette ======== */
:root {
  --bv-green-100: #dcedc8; /* Material Light Green 100 — subtle bg tints */
  --bv-green-500: #8bc34a; /* Material Light Green 500 — brand identity, hover states */
  --bv-green-700: #689f38; /* Material Light Green 700 — actionable primary (WCAG-safe on white) */
  --bv-grey-900:  #212121; /* Primary text / icons */
  --bv-grey-600:  #757575; /* Secondary text */
  --bv-grey-400:  #bdbdbd; /* Divider / subtle border */
  --bv-grey-100:  #eff2f7; /* Skote card border / soft surface separator */
  --bv-chart-blue: #1976D2;
  --bv-chart-orange: #F57C00;
}

/* ======== Layer 2 — Semantic Intent ======== */
:root {
  --bv-color-primary:     var(--bv-green-700); /* buttons, links, focus rings */
  --bv-color-text:        var(--bv-grey-900);
  --bv-color-text-muted:  var(--bv-grey-600);
  --bv-color-divider:     var(--bv-grey-400);
  --bv-color-card-border: var(--bv-grey-100); /* soft card / card-body.border-top divider */
  --bv-sidebar-bg:        var(--bv-green-700);
  --bv-sidebar-link:      var(--bv-green-100);
  --bv-sidebar-section:   var(--bv-color-text);
}

::selection {
  background-color: var(--bv-color-primary);
  color: #fff;
}
::-moz-selection {
  background-color: var(--bv-color-primary);
  color: #fff;
}

/* ======== Layer 3 — Bootstrap / Skote :root Overrides ======== */
/*
 * Overrides --bs-primary and derived tokens so Bootstrap utility classes
 * (.bg-primary, .text-primary, .border-primary, focus rings, etc.) inherit
 * the brand palette without modifying vendor files.
 *
 * --bs-success / --bs-warning / --bs-danger / --bs-info are intentionally
 * left at their Skote defaults — they carry semantic meaning distinct from
 * the brand color.
 */
:root,
[data-bs-theme=light] {
  --bs-primary:                var(--bv-color-primary);
  --bs-primary-rgb:            104, 159, 56;
  --bs-primary-text-emphasis:  var(--bv-green-700);
  --bs-primary-bg-subtle:      var(--bv-green-100);
  --bs-primary-border-subtle:  var(--bv-green-500);
  --bs-link-color:             var(--bv-color-primary);
  --bs-link-color-rgb:         104, 159, 56;
  --bs-link-hover-color:       var(--bv-green-500);
  --bs-focus-ring-color:       rgba(104, 159, 56, 0.25);
  --bs-body-color:             var(--bv-color-text);
  --bs-secondary-color:        var(--bv-color-text-muted);
  --bs-border-color:           var(--bv-color-divider);
  --bs-menu-item-active-color: var(--bv-color-primary);
}

/* ======== Layer 4 — Component-Scoped Overrides ======== */
/*
 * Bootstrap 5 compiles component variables (--bs-btn-bg, --bs-nav-pills-link-active-bg,
 * etc.) with hardcoded hex values on the component selector rather than referencing
 * --bs-primary.  Overriding --bs-primary on :root does NOT cascade into these.
 * Each block below targets the exact component selector to fix this.
 */

/* --- Buttons -------------------------------------------------- */
.btn-primary {
  --bs-btn-color:                 #fff;
  --bs-btn-bg:                    var(--bv-color-primary);
  --bs-btn-border-color:          var(--bv-color-primary);
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              var(--bv-green-500);
  --bs-btn-hover-border-color:    var(--bv-green-500);
  --bs-btn-focus-shadow-rgb:      104, 159, 56;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             var(--bv-color-primary);
  --bs-btn-active-border-color:   var(--bv-color-primary);
  --bs-btn-disabled-color:        #fff;
  --bs-btn-disabled-bg:           var(--bv-color-primary);
  --bs-btn-disabled-border-color: var(--bv-color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  color: #fff;
}

.btn-outline-primary {
  --bs-btn-color:                 var(--bv-color-primary);
  --bs-btn-border-color:          var(--bv-color-primary);
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              var(--bv-color-primary);
  --bs-btn-hover-border-color:    var(--bv-color-primary);
  --bs-btn-focus-shadow-rgb:      104, 159, 56;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             var(--bv-color-primary);
  --bs-btn-active-border-color:   var(--bv-color-primary);
  --bs-btn-disabled-color:        var(--bv-color-primary);
  --bs-btn-disabled-border-color: var(--bv-color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
  color: #fff;
}

/* --- Skote soft variants (hardcode rgba tints, no CSS var hook) -- */
.btn-soft-primary {
  color:            var(--bv-color-primary);
  background-color: rgba(104, 159, 56, 0.1);
}
.btn-soft-primary:active,
.btn-soft-primary:focus,
.btn-soft-primary:hover {
  color:            #fff;
  background-color: var(--bv-color-primary);
}

.badge-soft-primary {
  color:            var(--bv-color-primary);
  background-color: rgba(104, 159, 56, 0.18);
}
.badge-soft-primary[href]:focus,
.badge-soft-primary[href]:hover {
  color:            var(--bv-color-primary);
  background-color: rgba(104, 159, 56, 0.4);
}

/* --- Form controls -------------------------------------------- */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bv-color-primary);
  border-color:     var(--bv-color-primary);
}

/* Range slider: vendor uses direct background-color, not a CSS var */
.form-range::-webkit-slider-thumb { background-color: var(--bv-color-primary); }
.form-range::-moz-range-thumb     { background-color: var(--bv-color-primary); }

/* Focus rings: vendor hardcodes rgba(85, 110, 230, 0.25); no CSS var hook */
.form-select:focus,
.form-check-input:focus {
  -webkit-box-shadow: 0 0 0 0.15rem rgba(104, 159, 56, 0.25);
          box-shadow: 0 0 0 0.15rem rgba(104, 159, 56, 0.25);
}

.nav-link:focus-visible {
  -webkit-box-shadow: 0 0 0 0.15rem rgba(104, 159, 56, 0.25);
          box-shadow: 0 0 0 0.15rem rgba(104, 159, 56, 0.25);
}

/* --- Nav pills ------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bv-color-primary);
}

/* Skote checkout-tabs hardcodes #556ee6 on .nav-link.active in app.css */
.checkout-tabs .nav-pills .nav-link.active {
  background-color: var(--bv-color-primary);
  color: #fff;
}

/* --- Pagination ------------------------------------------------ */
.pagination {
  --bs-pagination-active-bg:           var(--bv-color-primary);
  --bs-pagination-active-border-color: var(--bv-color-primary);
  --bs-pagination-focus-box-shadow:    0 0 0 0.15rem rgba(104, 159, 56, 0.25);
}

/* --- Progress bar --------------------------------------------- */
.progress {
  --bs-progress-bar-bg: var(--bv-color-primary);
}

/* --- List group ----------------------------------------------- */
.list-group {
  --bs-list-group-active-bg:           var(--bv-color-primary);
  --bs-list-group-active-border-color: var(--bv-color-primary);
}

/* --- Management table sortable column headers ----------------- */
.sortable-header {
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

/* --- Tables (vendor .table-light hardcodes #eff2f7 gray) -------- */
.table-light {
  --bs-table-color:        var(--bv-color-text);
  --bs-table-bg:           var(--bs-primary-bg-subtle);
  --bs-table-border-color: var(--bv-color-divider);
}

/* --- Cards: Skote uses a soft #eff2f7 divider between card-body blocks.
 *     Restricting the override to `.card` keeps the heavier --bv-color-divider
 *     available for tables and standalone separators. */
.card {
  --bs-border-color: var(--bv-color-card-border);
}

/* --- Dashboard stat cards (Stores + Users): reserve identical height for
 *     Section A so the dividers between Section A and Section B line up
 *     across both cards, regardless of inner content (e.g. Select2 picker
 *     with its visible "Store" form label on the Users card). */
.dashboard-stat-section {
  min-height: 7rem;
}

/* --- Skote nav-tabs-custom (vendor hardcodes #556ee6 underline + active) --- */
.nav-tabs-custom .nav-item .nav-link::after {
  background: var(--bv-color-primary);
}
.nav-tabs-custom .nav-item .nav-link.active {
  color: var(--bv-color-primary);
}

/* --- Public navigation (Skote app.css hardcodes #556ee6 on link hover) --- */
.navigation:not(.nav-sticky) {
  border-bottom: none;
}

.navigation.nav-sticky .navbar-nav .nav-item .nav-link:hover,
.navigation.nav-sticky .navbar-nav .nav-item .nav-link.active {
  color: var(--bv-color-primary);
}

@media (max-width: 991.98px) {
  .navigation .navbar-nav .nav-item .nav-link:hover,
  .navigation .navbar-nav .nav-item .nav-link.active {
    color: var(--bv-color-primary);
  }
}

/* --- Public navbar auth button (Sign In / Manage) ----------------
 * Pre-scroll (transparent navbar over green hero): white outline + white fill on hover.
 * Sticky (white navbar): default btn-outline-primary; force white text on hover/active.
 */
.navigation:not(.nav-sticky) .btn-navbar-auth {
  --bs-btn-color:                 #fff;
  --bs-btn-border-color:          #fff;
  --bs-btn-bg:                    transparent;
  --bs-btn-focus-shadow-rgb:      255, 255, 255;
  --bs-btn-disabled-color:        rgba(255, 255, 255, 0.5);
  --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.5);
}

.navigation:not(.nav-sticky) .btn-navbar-auth:hover,
.navigation:not(.nav-sticky) .btn-navbar-auth:focus-visible {
  color:            var(--bv-color-text) !important;
  background-color: #fff !important;
  border-color:     #fff !important;
}

.navigation.nav-sticky .btn-navbar-auth:hover,
.navigation.nav-sticky .btn-navbar-auth:focus-visible,
.navigation.nav-sticky .btn-navbar-auth:active {
  --bs-btn-hover-color:  #fff;
  --bs-btn-active-color: #fff;
  color: #fff;
}

/* --- Mobile: match desktop transparent-over-hero navbar --- */
@media (max-width: 991.98px) {
  .navigation:not(.nav-sticky) {
    background-color: transparent;
  }

  .navigation:not(.nav-sticky) .navbar-logo .logo-dark {
    display: none;
  }
  .navigation:not(.nav-sticky) .navbar-logo .logo-light {
    display: block;
  }

  .navigation:not(.nav-sticky) .navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.6);
  }
  .navigation:not(.nav-sticky) .header-item {
    color: rgba(255, 255, 255, 0.8);
  }

  .navigation:not(.nav-sticky) .navbar-collapse.show,
  .navigation:not(.nav-sticky) .navbar-collapse.collapsing {
    background-color: var(--bs-topnav-bg);
    border-radius: 0.25rem;
    padding: 0.5rem;
  }
  .navigation:not(.nav-sticky) .navbar-collapse.show .nav-link,
  .navigation:not(.nav-sticky) .navbar-collapse.collapsing .nav-link {
    color: var(--bs-header-item-color);
  }

  /* Expanded mobile menu has a white background, so the auth button must use
     the green-outline (sticky) design instead of the white pre-scroll style. */
  .navigation:not(.nav-sticky) .navbar-collapse.show .btn-navbar-auth,
  .navigation:not(.nav-sticky) .navbar-collapse.collapsing .btn-navbar-auth {
    --bs-btn-color:                 var(--bv-color-primary);
    --bs-btn-border-color:          var(--bv-color-primary);
    --bs-btn-bg:                    transparent;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--bv-color-primary);
    --bs-btn-hover-border-color:    var(--bv-color-primary);
    --bs-btn-focus-shadow-rgb:      104, 159, 56;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--bv-color-primary);
    --bs-btn-active-border-color:   var(--bv-color-primary);
    --bs-btn-disabled-color:        var(--bv-color-primary);
    --bs-btn-disabled-border-color: var(--bv-color-primary);
    color: var(--bv-color-primary);
  }
  .navigation:not(.nav-sticky) .navbar-collapse.show .btn-navbar-auth:hover,
  .navigation:not(.nav-sticky) .navbar-collapse.show .btn-navbar-auth:focus-visible,
  .navigation:not(.nav-sticky) .navbar-collapse.collapsing .btn-navbar-auth:hover,
  .navigation:not(.nav-sticky) .navbar-collapse.collapsing .btn-navbar-auth:focus-visible {
    color:            #fff !important;
    background-color: var(--bv-color-primary) !important;
    border-color:     var(--bv-color-primary) !important;
  }
}

/* Google Maps InfoWindow — brand focus ring instead of browser blue */
.gm-style-iw-c:focus,
.gm-style-iw-c:focus-visible {
  outline: 2px solid var(--bv-color-primary) !important;
  outline-offset: 2px;
}

.bv-popup-close:focus-visible {
  outline: 2px solid var(--bv-color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Dashboard sidebar (Skote body[data-sidebar=dark] navy palette) --- */
body[data-sidebar=dark] .vertical-menu {
  background: var(--bv-sidebar-bg);
}
body[data-sidebar=dark] .navbar-brand-box {
  background: var(--bv-sidebar-bg);
}
body[data-sidebar=dark] #sidebar-menu ul li a {
  color: var(--bv-sidebar-link);
}
body[data-sidebar=dark] #sidebar-menu ul li a i {
  color: color-mix(in srgb, var(--bv-sidebar-link) 75%, transparent);
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover {
  color: #ffffff;
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
  color: #ffffff;
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
  color: var(--bv-sidebar-link);
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
  color: #ffffff;
}
body[data-sidebar=dark] .menu-title {
  color: var(--bv-sidebar-section);
}
body[data-sidebar=dark] .mm-active {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active > a {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active > a i {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active > i {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active .active {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active .active i {
  color: #ffffff !important;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background: var(--bv-green-500);
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
  color: var(--bv-sidebar-link);
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
  background-color: var(--bv-sidebar-bg);
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
  color: #ffffff !important;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active i {
  color: #ffffff !important;
}

/* --- Dashboard sidebar badges (left of expand chevron) --- */
#sidebar-menu ul li > a.has-arrow {
  padding-right: 2.75rem;
}
#sidebar-menu .has-arrow:after {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  float: none;
  margin-top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#sidebar-menu .mm-active > .has-arrow:after {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}
#sidebar-menu ul li > a.has-arrow .sidebar-menu-badge {
  position: absolute;
  right: 2.75rem;
  top: 50%;
  float: none;
  margin-top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* --- Store detail: languages spoken (wrap, no horizontal scroll) --- */
td.store-languages-spoken-cell {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.store-languages-spoken-wrap {
  max-width: 100%;
  white-space: normal;
}
.store-languages-spoken-wrap .store-languages-spoken {
  display: block;
}
.store-languages-spoken-wrap .store-languages-spoken-show-more-btn {
  display: block;
  width: fit-content;
  margin-top: 0.5rem;
}
.text-end .store-languages-spoken-wrap .store-languages-spoken-show-more-btn {
  margin-left: auto;
}

/* --- Auth: signup header illustration (15% smaller) --- */
.auth-signup-header-img {
  width: 85%;
  max-width: 85%;
  margin-left: auto;
  display: block;
}

/* --- Landing / store cards: social icons always brand green --- */
.team-box .team-social-links a {
  color: var(--bv-color-primary);
}