/* ===== Pixel Overrides (FULL - WITH MOBILE HEADER FIX) ===== */

/* === Pagination: enforce brand gold, kill Pixel blue, square corners === */
:root{
  /* Bootstrap pagination tokens (global) */
  --bs-pagination-color: #000;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: #b08a48;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: #b08a48;
  --bs-pagination-hover-border-color: #b08a48;
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: #b08a48;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(176,138,72,.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #b08a48;
  --bs-pagination-active-border-color: #b08a48;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #b08a48;
  --bs-pagination-border-radius: .5rem; 
  --bs-btn-border-radius: .5rem;       
}

/* Hard override for any Pixel styles */
.pagination .page-link{
  color: #000 !important;
  background-color: #fff !important;
  border: 1px solid #b08a48 !important;
  border-radius: .5rem !important;      
  line-height: 1.2 !important;
  padding: .25rem .6rem !important;
}
.pagination .page-item.active .page-link,
.pagination .page-link:hover,
.pagination .page-link:focus{
  color: #fff !important;
  background-color: #b08a48 !important;
  border-color: #b08a48 !important;
  box-shadow: 0 0 0 2px rgba(176,138,72,.18) !important;
  outline: none !important;
}

.pagination .btn-outline-primary,
.pagination .btn-outline-secondary,
.btn-outline-primary,
.btn-outline-secondary{
  color: #b08a48 !important;
  border-color: #b08a48 !important;
  background-color: #fff !important;
  border-radius: .5rem !important;
}
.pagination .btn-outline-primary:hover,
.pagination .btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover{
  color: #fff !important;
  background-color: #b08a48 !important;
  border-color: #b08a48 !important;
}

@media (max-width:600px){
  .pagination{ gap: .5rem !important; }
}

/* 0) Tokens */
:root{
  --bs-body-font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --bs-primary:#b08a48;
  --bs-primary-rgb:176,138,72;
  --bs-link-color:var(--bs-primary);
  --bs-link-hover-color:#9a773f;
  --bs-body-color:#000;
  --bs-heading-color:#000;   
  --bs-body-bg:#fff;
  --brand-gold:#b08a48;
  --bs-btn-close-color: #b08a48;
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
}

/* Secondary nav */
.secondary-nav .nav { gap: 0.24rem !important; }

@media (min-width: 601px){
  .secondary-nav .nav-pills .nav-link{
    padding: 0.18rem 0.48rem !important;
    font-size: 1rem !important; 
    line-height: 1.2 !important;
    min-height: 30px !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
  }
}

.secondary-nav .nav-pills .nav-link.active{ border-color: var(--brand-gold) !important; }
.secondary-nav .nav-pills .nav-link:hover,
.secondary-nav .nav-pills .nav-link:focus,
.secondary-nav .nav-pills .nav-link:focus-visible{
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 2px rgba(176,138,72,.18);
  outline: none;
}

/* Assistant page exceptions */
#assistantNav .nav-link,
#assistantNav .nav-link:hover,
#assistantNav .nav-link:focus,
#assistantNav .nav-link:focus-visible,
#assistantNav .nav-link:active,
body:not([data-page="kitchen"]) #chatbotButtons .assistant-pill,
body:not([data-page="kitchen"]) #chatbotButtons .assistant-pill:hover,
body:not([data-page="kitchen"]) #chatbotButtons .assistant-pill:focus,
body:not([data-page="kitchen"]) #chatbotButtons .assistant-pill:active{
  box-shadow: none !important;
  border-color: transparent !important;
  text-decoration: none !important;                  
}

#assistantNav .nav-link.active,
#assistantNav .nav-link[aria-current="page"],
#assistantNav .nav-link[aria-selected="true"],
body:not([data-page="kitchen"]) #chatbotButtons .assistant-pill.active{
  box-shadow: inset 0 -2px 0 0 var(--brand-gold, #b08a48) !important;
  text-decoration: none !important;
}

#assistantNav .nav-link:hover,
body:not([data-page="kitchen"]) #chatbotButtons .assistant-pill:hover{
  box-shadow: inset 0 -1px 0 0 var(--brand-gold, #b08a48) !important;
  text-decoration: none !important;
}

.artist-divider, hr.artist-divider{
  height: 1px !important;
  opacity: 1 !important;
  background: var(--brand-gold, #b08a48) !important;
  border: 0 !important;
}

/* Mobile secondary nav */
@media (max-width: 768px){
  .secondary-nav .nav, .secondary-nav ul.nav, .secondary-nav ol.nav,
  nav.secondary-nav .nav, nav.secondary-nav ul.nav, nav.secondary-nav ol.nav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
  }
  .secondary-nav .nav > li.nav-item, .secondary-nav .nav > *{
    width: auto !important; min-width: 0 !important; display: block !important;
  }
  .secondary-nav .nav > * > .nav-link{
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 38px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.9rem !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 0.5rem !important;
  }
  .site-footer nav.secondary-nav .nav{
    display: flex !important; flex-direction: row !important;
    flex-wrap: wrap !important; align-items: center !important;
    justify-content: center !important; gap: 0.35rem !important;
  }
  .site-footer nav.secondary-nav .nav .nav-link{
    width: auto !important; white-space: nowrap !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
  }
}

@media (min-width: 769px){
  .secondary-nav .nav{ flex-direction: row; align-items: center; }
}

.secondary-nav.vertical .nav{ flex-direction: column; align-items: stretch; }
.secondary-nav.vertical .nav-pills .nav-link{ width: 100%; text-align: left; }

.site-footer nav.secondary-nav .nav{ display: flex; justify-content: center; gap: 0.5rem !important; }
.site-footer nav.secondary-nav .nav .nav-link{
  padding: 0.35rem 0.6rem; line-height: 1.2; min-height: 36px;
  border-radius: 0.6rem; border: 1px solid var(--brand-gold) !important;
}

/* Dashboard scroller */
.dashboard-scroller .d-flex a img{
  box-sizing:border-box; border:2px solid var(--brand-gold) !important;
  border-radius:0.5rem; box-shadow:0 1px 6px rgba(0,0,0,.12);
}
@media (min-width:768px){ .dashboard-scroller .d-flex a img{border-width:3px;} }
.dashboard-scroller .d-flex a:focus img, .dashboard-scroller .d-flex a:hover img{
  border-color:var(--brand-gold); box-shadow:0 1px 8px rgba(0,0,0,.16); outline:none;
}
@media (hover:hover) and (pointer:fine){
  .dashboard-scroller .overflow-auto{ scrollbar-width:thin; scrollbar-color:var(--brand-gold) transparent; }
  .dashboard-scroller .overflow-auto::-webkit-scrollbar{height:10px;}
  .dashboard-scroller .overflow-auto::-webkit-scrollbar-track{background:transparent;}
  .dashboard-scroller .overflow-auto::-webkit-scrollbar-thumb{
    background:var(--brand-gold); border-radius:999px; border:2px solid transparent; background-clip:content-box;
  }
}
@media (hover:none),(pointer:coarse){ .dashboard-scroller .d-flex{border-bottom:0;} }

/* Navbar Buttons */
.navbar .btn, .navbar .nav-link.btn, .navbar-main .btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; vertical-align: middle !important;
}
.navbar .btn, .navbar .nav-link.btn, .navbar-main .btn, .site-header .btn {
  --bs-btn-padding-y: 0.18rem !important; --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important; --bs-btn-border-radius: 0.5rem !important;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  font-size: var(--bs-btn-font-size) !important; line-height: 1.2 !important;
  min-height: 30px !important; border-radius: var(--bs-btn-border-radius) !important;
}
.navbar .btn.btn-lg, .navbar-main .btn.btn-lg, .site-header .btn.btn-lg,
.navbar .btn.btn-sm, .navbar-main .btn.btn-sm, .site-header .btn.btn-sm {
  --bs-btn-padding-y: 0.18rem !important; --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important; --bs-btn-border-radius: 0.5rem !important;
}
.navbar .btn[class*="px-"], .navbar .btn[class*="py-"], .navbar-main .btn[class*="px-"],
.navbar-main .btn[class*="py-"], .site-header .btn[class*="px-"], .site-header .btn[class*="py-"] {
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
}

.navbar { --bs-primary: var(--brand-gold); --bs-primary-rgb: 176,138,72; }
.navbar, .navbar-main { background-color: #fff !important; }
.navbar .navbar-brand, .navbar .nav-link { color: #000 !important; }
.navbar .nav-link.active, .navbar .nav-link[aria-current="page"] {
  color: #b08a48 !important; box-shadow: inset 0 -2px 0 0 var(--brand-gold);
}

.navbar .btn-primary, .navbar .nav-link.btn.btn-primary {
  background-color: var(--brand-gold) !important; border-color: var(--brand-gold) !important; color: #fff !important;
}
.navbar a[href*="login" i], .navbar a[href*="log-in" i], .navbar a[href*="signin" i],
.navbar a[href*="sign-in" i], .navbar a[aria-label="Login" i], .navbar a[title="Login" i],
.navbar .nav-link[aria-label="Login" i], .navbar .nav-link[title="Login" i],
.navbar .nav-link.login, .navbar .login, .navbar .login-button, .navbar .btn-login {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0.18rem 0.48rem !important; line-height: 1 !important; min-height: 30px !important;
  border-radius: 0.5rem !important; background-color: var(--brand-gold, #b08a48) !important;
  border: 1px solid var(--brand-gold, #b08a48) !important; color: #fff !important;
  text-decoration: none !important; box-sizing: border-box !important;
}
.navbar .btn-primary:hover, .navbar .btn-primary:focus, .navbar .btn-primary:active,
.navbar .btn-primary:focus-visible {
  background-color: #9a773f !important; border-color: #9a773f !important;
  color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

.navbar .btn-outline-primary, .navbar .btn[class*="btn-outline-"], .navbar .nav-link.btn[class*="btn-outline-"] {
  color: var(--brand-gold) !important; border-color: var(--brand-gold) !important; background-color: transparent !important;
}
.navbar .btn-outline-primary:hover, .navbar .btn-outline-primary:focus,
.navbar .btn[class*="btn-outline-"]:hover, .navbar .btn[class*="btn-outline-"]:focus,
.navbar .nav-link.btn[class*="btn-outline-"]:hover, .navbar .nav-link.btn[class*="btn-outline-"]:focus{
  background-color: var(--brand-gold) !important; color: #fff !important;
  border-color: var(--brand-gold) !important; box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #000 !important; text-decoration: none; }
.site-footer .footer-social { font-size: 1.2rem; color: #000; text-decoration: none; }
.site-footer .footer-social:hover, .site-footer .footer-social:focus { color: var(--brand-gold); }

/* Hero spacing */
header[role="banner"], .site-header { padding-bottom: 4.5rem; border-bottom: 0 !important; box-shadow: none !important; }
section[aria-label="Dashboard shortcuts"] {
  padding-top: 1.25rem; padding-bottom: 1.25rem; margin-top: 1rem; margin-bottom: 1.5rem;
  border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important;
}
.section, .content-section, .page-section, .site-main > section { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
.section::before, .section::after, .content-section::before, .content-section::after,
.page-section::before, .page-section::after, .site-main > hr, main > hr, section[aria-label="Dashboard shortcuts"] hr { display: none !important; }

@media (max-width: 576px) {
  section[aria-label="Dashboard shortcuts"] { padding-top: 0.75rem; padding-bottom: 0.75rem; margin-top: 0.5rem; margin-bottom: 0.75rem; }
  #hubNav { margin-top: 0.75rem; margin-bottom: 1rem; }
}

/* Hub Pill sizing */
#hubNav .nav { gap: 0.20rem !important; }
@media (min-width: 601px) {
  #hubNav .nav-pills .nav-link {
    padding: 0.18rem 0.48rem !important; font-size: 0.84rem !important; line-height: 1.2 !important;
    min-height: 30px !important; border-radius: 0.5rem !important;
    border: 1px solid var(--brand-gold, #b08a48) !important; box-sizing: border-box !important; background-clip: padding-box !important;
  }
}
@media (max-width: 600px) {
  #hubNav .row {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin: 0 !important; width: 100% !important;
  }
  #hubNav .row::before, #hubNav .row::after { display: none !important; }
  #hubNav .col { 
    width: 100% !important; max-width: none !important; flex: none !important; 
    aspect-ratio: 1 / 1 !important; padding: 0 !important; margin: 0 !important; 
  }
  #hubNav .nav-pills .nav-link, #hubNav .hub-btn, #hubNav button {    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 100% !important; padding: 0.5rem !important; flex-direction: column !important;
    font-size: 0.9rem !important; line-height: 1.2 !important; white-space: normal !important;
    text-align: center !important; border-radius: 8px !important; border: 1px solid var(--brand-gold, #b08a48) !important;
    background: #fff !important; color: #000 !important; box-sizing: border-box !important;
  }
}

/* Header buttons specific */
header[role="banner"] .navbar .btn.btn, header[role="banner"] .navbar .nav-link.nav-link,
.site-header .navbar .btn.btn, .site-header .navbar .nav-link.nav-link,
.navbar.navbar .btn.btn, .navbar.navbar .nav-link.nav-link {
  --bs-btn-padding-y: 0.18rem !important; --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important; --bs-btn-border-radius: 0.5rem !important;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  font-size: var(--bs-btn-font-size) !important; line-height: 1.2 !important;
  min-height: 30px !important; border-radius: var(--bs-btn-border-radius) !important;
}
.navbar .navbar-brand .brand-mark{ height: 35px; width: auto; display: inline-block; vertical-align: middle; }
#hubNav { margin-top: 1rem; margin-bottom: 1.25rem; }


/* =========================================================================
   MOBILE HEADER FIX (The "Stack" Strategy)
   Forces the Logo/Title to the top, and Buttons to the bottom on all devices < 992px
   ========================================================================= */
@media (max-width: 991.98px){
  /* 1. Remove Hamburger & Force Visibility */
  nav.navbar .navbar-toggler, nav.navbar .navbar-toggler .navbar-toggler-icon{ display: none !important; }

  /* 2. THE CONTAINER: Force Vertical Stack */
  nav.navbar .container {
      display: flex !important;
      flex-direction: column !important; /* Stack Top-to-Bottom */
      align-items: center !important;
      height: auto !important;
      padding-bottom: 10px !important;
  }

  /* 3. THE BRAND: Force Top Row */
  nav.navbar .navbar-brand {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      margin-right: 0 !important;
      margin-bottom: 10px !important; /* Push buttons down */
  }

  /* 4. THE BUTTONS: Force Bottom Row */
  nav.navbar #mainNav,
  nav.navbar #mainNav.navbar-collapse{
    display: flex !important;
    visibility: visible !important; opacity: 1 !important; height: auto !important;
    position: static !important; width: 100% !important;
    flex-direction: row !important; /* Buttons stay side-by-side */
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important; /* Center the buttons */
    margin: 0 !important;
  }

  nav.navbar #mainNav .navbar-nav{
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: center !important;
    gap: 0.5rem !important; margin: 0 !important;
  }

  /* 5. Space Saver for Tiny Screens (Hide Text, Keep Icons) */
  @media (max-width: 450px) {
      nav.navbar #mainNav .btn span:not(#credit-balance):not(.badge) {
          display: none !important;
      }
      nav.navbar #mainNav .btn {
          padding: 6px 12px !important;
      }
      nav.navbar #mainNav .btn i {
          margin: 0 !important;
          font-size: 1.2rem !important;
      }
  }
}
/* XS safeguard */
@media (max-width: 575.98px){
  nav.navbar #mainNav{
    display: flex !important; visibility: visible !important; opacity: 1 !important;
    height: auto !important; position: static !important; width: 100% !important;
    transform: none !important; left: auto !important; right: auto !important;
    flex-direction: row !important; justify-content: center !important;
  }
}

/* Force black text on desktop */
@media (min-width: 992px) {
  #hubNav .hub-btn, #hubNav .btn, #hubNav .nav-link.btn, #hubNav button.hub-btn,
  .secondary-nav .nav-pills .nav-link, .secondary-nav .nav-pills .nav-link.active,
  .secondary-nav .nav-pills .nav-link:focus, .secondary-nav .nav-pills .nav-link:hover,
  #hubNav .nav-pills .nav-link, #hubNav .nav-pills .nav-link:hover,
  #hubNav .nav-pills .nav-link:focus, #hubNav .nav-pills .nav-link.active {
    color: #000 !important;
  }
}

/* Desktop spacing */
@media (min-width: 601px) {
  #hubNav .nav-pills .nav-link, .secondary-nav .nav-pills .nav-link{
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 0.24rem !important; padding: 0.18rem 0.48rem !important; min-height: 30px !important;
    line-height: 1.2 !important; font-size: 0.84rem !important; font-weight: 500 !important;
    border: 1px solid var(--brand-gold, #b08a48) !important; border-radius: 0.5rem !important; background: #fff !important;
    box-sizing: border-box !important; white-space: nowrap !important; text-decoration: none !important;
  }
}

/* Hover/active styles */
#hubNav .nav-pills .nav-link:hover, #hubNav .nav-pills .nav-link:focus, #hubNav .nav-pills .nav-link.active,
.secondary-nav .nav-pills .nav-link:hover, .secondary-nav .nav-pills .nav-link:focus, .secondary-nav .nav-pills .nav-link.active{
  background: #fff !important; border-color: var(--brand-gold, #b08a48) !important; outline: none !important;
}

@media (min-width: 992px){
  #hubNav .nav-pills, .secondary-nav .nav-pills{ gap: 0.50rem !important; }
}

/* Dashboard scroller items */
.dashboard-scroller .overflow-auto {
  overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch;
  max-width: 100%; width: 100%; white-space: nowrap; padding-bottom: 0.5rem;
}
.dashboard-scroller .d-flex {
  flex-wrap: nowrap !important; align-items: flex-start !important; gap: 1rem !important; align-content: flex-start !important;
}
.dashboard-scroller .d-flex > * {
  flex: 0 0 auto !important; width: 73px !important; text-align: center !important; line-height: 1.2 !important;
  white-space: normal !important; color: #000 !important; font-size: 0.9rem !important; font-weight: 500;
}
.dashboard-scroller .d-flex > * img {
  display: block !important; width: 72px !important; height: 72px !important; object-fit: cover !important;
  border: 2px solid var(--brand-gold, #b08a48) !important; border-radius: 0.5rem !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.12); margin-left: auto; margin-right: auto; margin-bottom: 0.5rem;
}
.dashboard-scroller .d-flex > *:hover img, .dashboard-scroller .d-flex > *:focus img {
  border-color: var(--brand-gold, #b08a48) !important; box-shadow: 0 1px 8px rgba(0,0,0,.16); outline: none;
}
.dashboard-scroller .d-flex > * .shortcut-label, .dashboard-scroller .d-flex > * .label,
.dashboard-scroller .d-flex > * .text-center, .dashboard-scroller .d-flex > * .small,
.dashboard-scroller .d-flex > * div:last-child {
  color: #000 !important; font-size: 0.9rem !important; line-height: 1.2 !important; text-align: center !important;
  white-space: normal !important; word-break: keep-all;
}

/* Vision Mapping Mobile */
@media (max-width: 575.98px){
  .visionmapping__panel { max-width: 100%; width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .visionmapping__panel .vm-form-row {
    display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: var(--vm-gap-sm);
    max-width: 100%; box-sizing: border-box;
  }
  .visionmapping__panel .vm-form-row > * { max-width: 100%; box-sizing: border-box; }
  .visionmapping__panel .card, .visionmapping__panel .card > * { max-width: 100%; width: 100%; box-sizing: border-box; }
  .visionmapping__panel .actions { flex-wrap: wrap; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
}

/* Headings */
.visionmapping__panel h1, .visionmapping__panel .h1, .visionmapping__panel h2, .visionmapping__panel .h2,
.visionmapping__panel h3, .visionmapping__panel .h3, .visionmapping__panel h4, .visionmapping__panel .h4,
.visionmapping__panel h5, .visionmapping__panel .h5, .visionmapping__panel h6, .visionmapping__panel .h6,
.gratitude h1, .gratitude .h1, .gratitude h2, .gratitude .h2, .gratitude h3, .gratitude .h3,
.gratitude h4, .gratitude .h4, .gratitude h5, .gratitude .h5, .gratitude h6, .gratitude .h6 {
  margin: 0 0 12px 0; font-size: 1.1rem; font-weight: 500; line-height: 1.3;
  color: var(--bs-heading-color, #000); display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--brand-gold, #b08a48); padding-bottom: 8px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 500 !important; }

#rightColumn .rr-brick-grid, #apothecaryButtons{ all: unset; }
#rightColumn .rr-brick-grid, #apothecaryButtons{ display: grid !important; }

/* Global buttons */
:root {
  --bs-primary: #b08a48; --bs-primary-rgb: 176, 138, 72;
  --bs-link-color: var(--bs-primary); --bs-link-hover-color: color-mix(in oklab, var(--bs-primary) 85%, black);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
}
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 84%, black);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 80%, black);
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  color: #fff !important; background-color: var(--bs-btn-bg, var(--bs-primary)) !important;
  border-color: var(--bs-btn-border-color, var(--bs-primary)) !important; border-radius: 0.5rem !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-gold); --bs-btn-bg: #fff; --bs-btn-border-color: var(--brand-gold);
  --bs-btn-hover-bg: color-mix(in oklab, var(--brand-gold) 8%, white); --bs-btn-hover-border-color: var(--brand-gold);
  --bs-btn-active-bg: color-mix(in oklab, var(--brand-gold) 15%, white); --bs-btn-active-border-color: color-mix(in oklab, var(--brand-gold) 85%, black);
  --bs-btn-disabled-color: var(--brand-gold); --bs-btn-disabled-border-color: var(--brand-gold);
  --bs-btn-focus-shadow-rgb: var(--brand-gold-rgb); --bs-btn-border-radius: 0.5rem;
}

/* Page headers */
.braindump-page header .btn.btn-primary.btn-sm, .todo-page header .btn.btn-primary.btn-sm,
.projects-page header .btn.btn-primary.btn-sm, .journal-page header .btn.btn-primary.btn-sm {
  background-color: var(--brand-gold) !important; border-color: var(--brand-gold) !important;
  color: #fff !important; border-radius: 0.5rem !important;
}

/* Calendar & To-Do styles (condensed for brevity, functionality maintained) */
#calendarRightRail .cal-section { margin-bottom: 24px !important; }
#calendarRightRail .cal-list-date { font-weight: 600 !important; margin: 10px 0 6px !important; }
#calendarRightRail .cal-event { display: grid !important; grid-template-columns: 1fr auto !important; column-gap: 12px !important; align-items: start !important; padding: 10px 0 !important; border-bottom: 1px dashed rgba(176,138,72,.35) !important; }
#calendarRightRail .cal-event + .cal-event { margin-top: 8px !important; }
#calendarRightRail .cal-event:last-child { border-bottom: 0 !important; }
#calendarRightRail .cal-event__text { min-width: 0 !important; font-size: 13px !important; }
#calendarRightRail .cal-event__actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; align-self: start !important; }
#calendarRightRail .cal-icon-btn { background: #fff !important; border: 1px solid var(--brand-gold, #b08a48) !important; border-radius: 6px !important; padding: 2px 8px !important; font-size: 12px !important; }
#calendarRightRail .cal-weekdays, #calendarRightRail .cal-grid { gap: 4px !important; }
#calendarRightRail .cal-today-row { margin-top: 10px !important; margin-bottom: 12px !important; }
#calendarRightRail * + .cal-section { margin-top: 16px !important; }

/* To-Do Quick List */
#todoQuickList, #calendarRightRail #todoQuickList, .todo-quicklist, #calendarRightRail .todo-quicklist,
.todo-quick-list, #calendarRightRail .todo-quick-list {
  background: #fff !important; border: 1px solid var(--brand-gold, #b08a48) !important; border-radius: .5rem !important; padding: 12px !important;
}
#todoQuickList input, #calendarRightRail #todoQuickList input, .todo-quicklist .form-control, #calendarRightRail .todo-quicklist .form-control {
  background: #fff !important; color: #000 !important; border: 1px solid var(--brand-gold, #b08a48) !important; border-radius: .5rem !important; box-shadow: none !important;
}
#todoQuickList input[type="checkbox"], .todo-quicklist input[type="checkbox"] {
  accent-color: var(--brand-gold, #b08a48) !important; border-color: var(--brand-gold, #b08a48) !important; background-color: #fff !important;
}
#todoQuickList .btn, #calendarRightRail #todoQuickList .btn {
  color: var(--brand-gold, #b08a48) !important; background: #fff !important; border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: .5rem !important; margin-left: 8px !important;
}
#todoQuickList .btn-close, .todo-quicklist .btn-close {
  width: .9rem !important; height: .9rem !important; opacity: 1 !important; border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0 !important; background: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b08a48'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 1 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

/* Calendar Forms */
.cal-section .form-control, .cal-side .form-control, .cal-side select {
  background: #fff !important; color: #000 !important; border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: .5rem !important; box-shadow: none !important; outline: none !important;
  min-height: 36px !important; padding: .375rem .5rem !important;
}
.cal-section .form-control:focus, .cal-side .form-control:focus { border-color: var(--brand-gold, #b08a48) !important; }
.cal-side .btn + * { margin-top: 8px !important; }
.cal-side .form-control, .cal-side .input-group, .cal-side .form-group { margin-bottom: 8px !important; }

/* Kitchen Assistant Strip */
#chatbotButtons { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.5rem !important; }
#chatbotButtons .assistant-pill {
  display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; color: #000 !important; cursor: pointer; white-space: nowrap !important; line-height: 1.2 !important;
}
#chatbotButtons .assistant-pill + .assistant-pill { position: relative !important; }
#chatbotButtons .assistant-pill + .assistant-pill::before {
  content: "" !important; position: absolute !important; left: -0.5rem !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 1px !important; height: 22px !important; background: var(--brand-gold, #b08a48) !important; pointer-events: none !important;
}

/* Vision Mapping Hacks */
body[data-page="visionmapping"] .visionmapping__panel, body[data-page="visionmapping"] .card {
  color-scheme: only light !important; background-image: linear-gradient(#fffdf8, #fffdf8) !important;
  background-color: #fffdf8 !important; color: #000000 !important; border: 1px solid #b08a48 !important;
}
html body[data-page="visionmapping"] #visionAssistantMount, html body[data-page="visionmapping"] .card {
  border: none !important; box-shadow: none !important; background: transparent !important;
}
html body[data-page="visionmapping"] #vmConsoleCard, html body[data-page="visionmapping"] #vmRightRailCard {
  border: 1px solid #b08a48 !important; border-radius: 12px !important; background-color: #fffdf8 !important; overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(176, 138, 72, 0.1) !important;
}
html body[data-page="visionmapping"] .vm-form-container, html body[data-page="visionmapping"] .vm-input-row,
html body[data-page="visionmapping"] #vmAssistantInput { display: block !important; width: 100% !important; margin-bottom: 10px !important; }
html body[data-page="visionmapping"] .vm-btn-row { display: flex !important; flex-direction: row !important; width: 100% !important; gap: 10px !important; }
html body[data-page="visionmapping"] .vm-btn-row button { flex: 1 !important; min-height: 50px !important; }
/* ==========================================================================
   THE "NAVBAR-EXPAND" BREAKER
   This neutralizes the HTML class that is forcing the single-line layout.
   ========================================================================== */
@media (max-width: 991px) {

    /* 1. BREAK THE LOCK: Target the specific class causing the issue */
    nav.navbar.navbar-expand .container {
        flex-wrap: wrap !important;       /* Allow wrapping */
        flex-direction: column !important; /* Force vertical stack */
        justify-content: center !important;
        height: auto !important;
        padding-bottom: 10px !important;
    }

    /* 2. LOGO ROW: Force full width */
    nav.navbar.navbar-expand .navbar-brand {
        margin-right: 0 !important;
        margin-bottom: 10px !important;   /* Push buttons down */
        width: 100% !important;
        justify-content: center !important;
        flex: 0 0 100% !important;
    }

    /* 3. BUTTONS ROW: Force full width below */
    nav.navbar.navbar-expand #mainNav {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* 4. Ensure buttons stay side-by-side */
    nav.navbar.navbar-expand .navbar-nav {
        flex-direction: row !important;
        gap: 8px !important;
    }
}
/* ==========================================================================
   THE "NAVBAR-EXPAND" BREAKER (For Art Studio Console)
   This forces the locked header to break into two rows on mobile.
   ========================================================================== */
@media (max-width: 991px) {

    /* 1. UNLOCK THE CONTAINER: Kill the single-line rule */
    .navbar.navbar-expand .container {
        display: flex !important;
        flex-direction: column !important; /* Stack Top-to-Bottom */
        flex-wrap: wrap !important;        /* Allow wrapping */
        align-items: center !important;
        height: auto !important;
        padding-bottom: 12px !important;
    }

    /* 2. TOP ROW: LOGO & TITLE */
    .navbar.navbar-expand .navbar-brand {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Center align */
        margin-right: 0 !important;
        margin-bottom: 10px !important;     /* Push buttons down */
        white-space: normal !important;     /* Allow text to wrap if needed */
        text-align: center !important;
    }

    /* 3. BOTTOM ROW: BUTTONS */
    .navbar.navbar-expand #mainNav,
    .navbar.navbar-expand .navbar-collapse {
        display: flex !important;
        width: 100% !important;
        flex-basis: 100% !important;        /* Force full width */
        justify-content: center !important; /* Center buttons */
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;     /* Ensure it shows up */
        opacity: 1 !important;
    }

    /* 4. BUTTON SPACING */
    .navbar.navbar-expand .navbar-nav {
        flex-direction: row !important;     /* Keep buttons side-by-side */
        gap: 8px !important;
        justify-content: center !important;
    }
    
    /* 5. TEXT SAFETY (Optional): Prevent overlapping on tiny screens */
    .navbar.navbar-expand .brand-text {
        display: inline-block !important;
        font-size: 1.1rem !important;
    }
}
/* FORCE HIDE USER-DISABLED TOOLS */
/* Using !important to override any flex/grid display rules */
.user-disabled-tool {
    display: none !important;
}
/* Auth Lock Overlay - Glass Effect */
#auth-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

/* When active, show it and block clicks */
#auth-lock-overlay.is-locked {
    opacity: 1;
    pointer-events: all;
}

/* The card inside the overlay */
.auth-lock-card {
    max-width: 400px;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* --- NUCLEAR FIX: FORCE MARKETING INPUT SIZE --- */
#userInput, textarea#userInput {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 300px !important;
    font-size: 16px !important; /* Prevents zooming on iPhone */
    padding: 15px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #b08a48 !important; /* Gold border to verify it worked */
    border-radius: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Add to pixel-overrides.css */

/* Make the credit display look like a professional nav-link */
.navbar .btn-outline-primary.d-flex:hover {
    background-color: rgba(176, 138, 72, 0.05) !important;
    border-radius: 0.5rem !important;
}

.navbar .btn-outline-primary.d-flex:hover .fa-plus-circle {
    color: #b08a48 !important;
    transform: scale(1.1);
    transition: 0.2s ease;
}
/* ===== Coin Icon Brand Override ===== */

/* Targets Font Awesome coin icons globally to match Clariia Gold */
.fa-coins, 
.fa-coins.text-warning,
.fas.fa-coins {
  color: #b08a48 !important;
}

/* Optional: Subtle glow effect when used in the navbar button */
.nav-link .fa-coins, 
.btn .fa-coins {
  filter: drop-shadow(0 0 2px rgba(176, 138, 72, 0.2));
}

/* === NUCLEAR GOLD OVERRIDE === */
/* Kills Bootstrap Yellow globally and replaces with Brand Gold */

.text-warning {
    color: #b08a48 !important; /* Brand Gold */
}

.btn-warning {
    background-color: #b08a48 !important;
    border-color: #b08a48 !important;
    color: #fff !important;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: #9a773f !important; /* Darker Gold for hover */
    border-color: #9a773f !important;
    color: #fff !important;
}

.btn-outline-warning {
    color: #b08a48 !important;
    border-color: #b08a48 !important;
}

.btn-outline-warning:hover {
    background-color: #b08a48 !important;
    color: #fff !important;
}

/* Fix the specific icons in Brand Analyst */
.fa-chart-pie.text-warning,
.fa-circle-notch.text-warning, 
.fa-user-doctor.text-warning {
    color: #b08a48 !important;
}

/* === SHAPE OVERRIDE: KILL THE PILLS === */
/* Forces professional corners on all marketing elements */
#brandAnalystView .badge, 
#brandAnalystView .btn, 
#brandAnalystView .nav-pills .nav-link,
#brandAnalystView .fixer-user-msg,
#brandAnalystView input {
    border-radius: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Specific fix for the "Keywords" badges to look like tags, not pills */
#brandAnalystView .badge {
    font-weight: 500 !important;
    border: 1px solid #dee2e6 !important;
    color: #333 !important;
    background-color: #fff !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
    display: inline-block !important;
    max-width: 100% !important;
}
/* Gold Border and Pixel Radius Override- todo-projects */
/* Forces Brand Gold border and 12px rounded corners (not square) */
.gallery-card,
.modal-content,
.form-control,
.btn:not(.rounded-circle),
.project-modal-cover {
    border: 1px solid #b08a48 !important;
    border-radius: 12px !important; 
}
@keyframes pulse-nudge {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.nudge-animation {
  animation: pulse-nudge 2s infinite;
  z-index: 10;
}

/* --- UNIVERSAL DASHBOARD IMAGE SCALING (SQUARE LOCK) --- */

/* 1. Lock the outer wrapper (<a> tag) so long text wraps instead of stretching the box into a rectangle */
.dashboard-scroller .d-flex > a,
.d-flex.flex-nowrap.overflow-auto > a,
#dashboardList > a,
.dashboard-shortcut-card {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex: 0 0 120px !important; /* Forbids flexbox from stretching the width */
    white-space: normal !important; /* Forces long text to drop to the next line */
    align-items: center !important;
}

/* 2. Force the image box to be a strict perfect square */
.dashboard-scroller .d-flex > a > div,
.d-flex.flex-nowrap.overflow-auto > a > div,
#dashboardList > a > div.ratio,
.dashboard-tile,
.tile-72,
.tile-120 {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
}

/* 3. Kill Bootstrap's native .ratio pseudo-element that distorts heights */
.dashboard-scroller .d-flex > a > div::before,
.d-flex.flex-nowrap.overflow-auto > a > div::before,
#dashboardList > a > div::before,
.dashboard-tile::before,
.tile-72::before,
.tile-120::before {
    display: none !important;
    padding-top: 0 !important;
}

/* 4. Force the image to cover the square edge-to-edge, destroying inline padding (like p-2) */
.dashboard-scroller .d-flex > a > div > img,
.d-flex.flex-nowrap.overflow-auto > a > div > img,
#dashboardList > a > div > img,
.dashboard-tile img,
.tile-72 img,
.tile-120 img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important; /* Destroys any inline padding squishing the image */
    margin: 0 !important;
}

/* 5. Balance the text below the square */
.dashboard-scroller .d-flex > a > span,
.d-flex.flex-nowrap.overflow-auto > a > span,
#dashboardList > a > span {
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-top: 8px !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    color: #495057 !important; /* Soft dark gray to replace the harsh black/gold mix */
}

/* --- GLOBAL BOOTSTRAP GREEN OVERRIDE --- */
/* Softens the harsh default green so you never have to manually fix it again */
.text-success { color: #4a7c59 !important; }
.bg-success { background-color: #4a7c59 !important; }
.border-success { border-color: #4a7c59 !important; }
.btn-success { background-color: #4a7c59 !important; border-color: #4a7c59 !important; color: #ffffff !important; }
.btn-success:hover { background-color: #3b6347 !important; border-color: #3b6347 !important; color: #ffffff !important; }

/* --- HUB LAYOUT & GOLD ICONS --- */
.hub-divider {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 1.5rem 0 1rem 0 !important;
}
.hub-divider hr {
    flex-grow: 1 !important;
    margin: 0 !important;
    border-top: 1px solid #b08a48 !important;
    opacity: 0.3 !important;
}
.hub-divider span {
    padding: 0 1rem !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    color: #000 !important; /* Forced to black */
    letter-spacing: 0.05em !important;
}
.tools-btn {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    color: #333 !important;
}
.tools-btn i, .tools-btn .text-primary {
    color: #b08a48 !important;
}

/* --- GOLD ICONS FOR SECONDARY NAV --- */
.icon-gold {
    color: #b08a48 !important;
}