/* Apothecary Assistant — chat + embedded doc
   Scope: only elements the assistant renders.
   Uses your existing tokens (brand gold) if defined.
*/
/* Apothecary module styles — built to align with Pixel + pixel-overrides.css */
/* Uses brand tokens already defined in pixel-overrides.css (e.g., --brand-gold) */

/* --- Layout: left (content) + right (rail) --- */

/* 0) Tokens */
:root{
  /* fonts/colors already used by your theme — keep/add as needed */
  --bs-body-font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --bs-primary:#b08a48;
  --bs-primary-rgb:176,138,72;
  /* keep link colors inherited from global theme */

  /* Ensure body text is not gray */
  --color-bg: #fff;
 
  --color-accent: var(--brand-gold, #b08a48);
  
  --bs-body-color:#000;        /* <— main text color */
  --bs-heading-color:#000;     /* <— headings */
  --bs-body-bg:#fff;           /* <— page background (optional but recommended) */

  /* brand gold used for borders + scrollbar */
  --brand-gold:#b08a48;
}


#mainContainer.apoth-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 992px){
  #mainContainer.apoth-main{
    grid-template-columns: 1fr 1fr; /* 50/50 split on lg+ */
  }
}
#leftColumn,
#rightColumn{ min-width: 0; }






/* (The 1400px 3-up override is no longer needed and is removed.) */

 /* Keep non-rail hub-btn styling only */
#privateColumns .hub-btn,
#privateColumns .hub-btn.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 30px;
  padding: 0.18rem 0.48rem;
  font-size: 0.84rem;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
  break-inside: avoid;
}

/* Default pill behavior in right column (non-masonry contexts) */
#rightColumn .hub-btn,
#rightColumn .hub-btn.btn {
  display: inline-flex;
  max-width: 100%;
}

/* Masonry context: make pills full-width bricks inside columns */
#apothecaryButtons .hub-btn,
#apothecaryButtons .hub-btn.btn {
  display: inline-block !important;
  width: 100% !important;
  margin: 0 0 0.75rem 0 !important;
  break-inside: avoid !important;
}

/* moved: right-rail button width/nowrap now lives in aromarecipecard.css */

/* moved: right-rail UL/LI grid now lives in aromarecipecard.css */

/* moved: right-rail item span rules now live in aromarecipecard.css */


/* Stop any right-rail buttons/links from stretching full width */
/* moved: right-rail anti-stretch rules now live in aromarecipecard.css */



/* Top module nav (Apothecary) — responsive layout WITHOUT forcing full-width */
#hubNav{
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  grid-auto-rows: minmax(116px, 1fr) !important;
  gap: 10px !important;
}

/* Mobile-first: ensure tiles, never a stacked column */
@media (max-width: 991.98px){
  #hubNav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    gap: 10px !important;
  }
  /* Tiles fill their grid cells (match hub mobile sizing) */
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav button{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--bs-body-color, #000) !important;
    box-sizing: border-box !important;
  }
}

/* Desktop keeps your pill row */
@media (min-width: 992px){
  #hubNav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.18rem 0.48rem !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    gap: 0.75rem !important;
    border-radius: 0.5rem !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* Pills inside #hubNav fill their grid cell on mobile/tablet */
#hubNav .hub-btn{
  width: 100%;
}

/* On desktop, compact row with wrapping and auto-width pills */
@media (min-width: 992px){
  /* Desktop: identical to Pixel secondary-nav */
 #hubNav{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
 padding: 0.18rem 0.48rem !important;     /* small pill */
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  gap: 0.75rem !important; 
  border-radius: 0.5rem !important;                  /* match Pixel’s airy desktop gap */
 
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}



  /* Pills: same size as Pixel overrides (small) */
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav .nav-link.btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.18rem 0.48rem !important;     /* Pixel small pill */
    font-size: 0.84rem !important;           /* Pixel small text */
    line-height: 1.2 !important;
    gap: 0.75rem !important; 
    width: auto !important;
    white-space: nowrap !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* States: hover/focus/active/aria (non-rail only) */
#privateColumns .hub-btn:hover,
#hubNav .hub-btn:hover,
#privateColumns .hub-btn:focus,
#hubNav .hub-btn:focus,
#privateColumns .hub-btn:focus-visible,
#hubNav .hub-btn:focus-visible,
#privateColumns .hub-btn:active,
#hubNav .hub-btn:active,
#privateColumns .hub-btn[aria-pressed="true"],
#hubNav .hub-btn[aria-pressed="true"]{
  outline: none;
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2);
  background-color: #fff;
  color: #000;
}

/* Disabled */
#privateColumns .hub-btn:disabled,
#hubNav .hub-btn:disabled,
#apothecaryButtons .hub-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Fallback for plain buttons in non-rail container */
#hubNav button:not(.btn):not(.hub-btn){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 30px;
  padding: 0.18rem 0.48rem;
  font: inherit;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Keep brand look in dark mode (non-rail only) */
@media (prefers-color-scheme: dark){
  #privateColumns .hub-btn,
  #hubNav .hub-btn,
  #hubNav button:not(.btn){
    background-color: #fff;
    color: #000;
    border-color: var(--brand-gold, #b08a48);
  }
}

/* --- Top module nav (buttons you placed inside #hubNav) --- */
/* removed duplicate overrides: margins/width are already defined above; 
   this block forced width:auto on mobile and caused spacing mismatch */

/* --- Generic sections / messages used by loader --- */
/* Block gold box on right rail column and buttons container */
/* Scope the gold box ONLY to left column sections */
#leftColumn .apoth-section{
  background: #fff;
  border: 1px solid #b08a48;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  max-height: none;   /* explicit */
  height: auto;       /* ensure it shrinks to content */
}


.apoth-hint{
  color: #555;
  font-size: 0.95rem;
}
.apoth-error{
  color: #a10000;
}

/* --- Chat UI used by Aromatherapy assistant --- */
.rc-wrap{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.5rem;
}
.apoth-tabs{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.apoth-tab{
  display: inline-block;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  padding: 0.2rem 0.6rem;
  background: #fff;
}
.rc-title{
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rc-title--msg{ font-size: 0.95rem; color: #333; }

.chat-scroll{
  border: 1px solid rgba(0,0,0,.075);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem;
  max-height: 50vh;
  overflow: auto;
}

.action-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.composer__input{
  flex: 1 1 auto;
  min-height: 38px;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.2;
  resize: vertical;
}
/* Credit action pill — apply in header, NAVBAR, and within Apothecary UI */
.site-header .credit-button,
header .credit-button,
.navbar .credit-button,
.rc-wrap .credit-button,
.apoth-rail .credit-button,
#rightColumn .credit-button{

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 38px !important;
  padding: 0.35rem 0.6rem !important;
  border: 1px solid var(--brand-gold, #b08a48) !important; /* brand gold outline */
  border-radius: 0.5rem !important;
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important;  /* gold text */
  box-sizing: border-box !important;
  cursor: pointer;
}

.credit-button:hover,
.credit-button:focus,
.site-header .credit-button:hover,
.site-header .credit-button:focus,
header .credit-button:hover,
header .credit-button:focus,
.navbar .credit-button:hover,
.navbar .credit-button:focus,
.rc-wrap .credit-button:hover,
.rc-wrap .credit-button:focus,
.apoth-rail .credit-button:hover,
.apoth-rail .credit-button:focus,
#rightColumn .credit-button:hover,
#rightColumn .credit-button:focus{
  outline: none !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important; /* keep gold on hover/focus */
}

/* Navbar outline buttons — normalize to BRAND GOLD across all common variants */
.site-header .navbar .btn-outline-dark,
.site-header .navbar .btn-outline-black,
.site-header .navbar .btn-outline-gray,
.site-header .navbar .btn-outline-primary,
.site-header .navbar .btn-outline-secondary,
.site-header .navbar .btn-outline-light,
.navbar .btn-outline-dark,
.navbar .btn-outline-black,
.navbar .btn-outline-gray,
.navbar .btn-outline-primary,
.navbar .btn-outline-secondary,
.navbar .btn-outline-light,
.site-header .navbar .nav-link.btn.btn-outline-dark,
.site-header .navbar .nav-link.btn.btn-outline-black,
.site-header .navbar .nav-link.btn.btn-outline-gray,
.site-header .navbar .nav-link.btn.btn-outline-primary,
.site-header .navbar .nav-link.btn.btn-outline-secondary,
.site-header .navbar .nav-link.btn.btn-outline-light,
.navbar .nav-link.btn.btn-outline-dark,
.navbar .nav-link.btn.btn-outline-black,
.navbar .nav-link.btn.btn-outline-gray,
.navbar .nav-link.btn.btn-outline-primary,
.navbar .nav-link.btn.btn-outline-secondary,
.navbar .nav-link.btn.btn-outline-light{
  background: #fff !important;
  color: var(--brand-gold, #b08a48) !important; /* gold text */
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
}

.site-header .navbar .btn-outline-dark:hover,
.site-header .navbar .btn-outline-black:hover,
.site-header .navbar .btn-outline-gray:hover,
.site-header .navbar .btn-outline-primary:hover,
.site-header .navbar .btn-outline-secondary:hover,
.site-header .navbar .btn-outline-light:hover,
.site-header .navbar .btn-outline-dark:focus,
.site-header .navbar .btn-outline-black:focus,
.site-header .navbar .btn-outline-gray:focus,
.site-header .navbar .btn-outline-primary:focus,
.site-header .navbar .btn-outline-secondary:focus,
.site-header .navbar .btn-outline-light:focus,
.navbar .btn-outline-dark:hover,
.navbar .btn-outline-black:hover,
.navbar .btn-outline-gray:hover,
.navbar .btn-outline-primary:hover,
.navbar .btn-outline-secondary:hover,
.navbar .btn-outline-light:hover,
.navbar .btn-outline-dark:focus,
.navbar .btn-outline-black:focus,
.navbar .btn-outline-gray:focus,
.navbar .btn-outline-primary:focus,
.navbar .btn-outline-secondary:focus,
.navbar .btn-outline-light:focus,
.site-header .navbar .nav-link.btn.btn-outline-dark:hover,
.site-header .navbar .nav-link.btn.btn-outline-black:hover,
.site-header .navbar .nav-link.btn.btn-outline-gray:hover,
.site-header .navbar .nav-link.btn.btn-outline-primary:hover,
.site-header .navbar .nav-link.btn.btn-outline-secondary:hover,
.site-header .navbar .nav-link.btn.btn-outline-light:hover,
.site-header .navbar .nav-link.btn.btn-outline-dark:focus,
.site-header .navbar .nav-link.btn.btn-outline-black:focus,
.site-header .navbar .nav-link.btn.btn-outline-gray:focus,
.site-header .navbar .nav-link.btn.btn-outline-primary:focus,
.site-header .navbar .nav-link.btn.btn-outline-secondary:focus,
.site-header .navbar .nav-link.btn.btn-outline-light:focus,
.navbar .nav-link.btn.btn-outline-dark:hover,
.navbar .nav-link.btn.btn-outline-black:hover,
.navbar .nav-link.btn.btn-outline-gray:hover,
.navbar .nav-link.btn.btn-outline-primary:hover,
.navbar .nav-link.btn.btn-outline-secondary:hover,
.navbar .nav-link.btn.btn-outline-light:hover,
.navbar .nav-link.btn.btn-outline-dark:focus,
.navbar .nav-link.btn.btn-outline-black:focus,
.navbar .nav-link.btn.btn-outline-gray:focus,
.navbar .nav-link.btn.btn-outline-primary:focus,
.navbar .nav-link.btn.btn-outline-secondary:focus,
.navbar .nav-link.btn.btn-outline-light:focus{
  background: #fff !important;
  color: #000 !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
}

/* Ensure Credits stays gold even if combined with Bootstrap outline variants */
.navbar .credit-button,
.site-header .navbar .credit-button{
  color: var(--brand-gold, #b08a48) !important;
}
.navbar .credit-button:hover,
.navbar .credit-button:focus,
.site-header .navbar .credit-button:hover,
.site-header .navbar .credit-button:focus{
  color: var(--brand-gold, #b08a48) !important;
}
/* Hard-lock Credits pill to gold in header/nav regardless of outline or nav-link utilities */
.site-header .navbar .nav-link.btn.credit-button,
.site-header .navbar .btn.credit-button,
.navbar .nav-link.btn.credit-button,
.navbar .btn.credit-button,
.site-header .navbar .nav-link.btn[class*="btn-outline-"].credit-button,
.navbar .nav-link.btn[class*="btn-outline-"].credit-button{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background: #fff !important;
}

.site-header .navbar .nav-link.btn.credit-button:hover,
.site-header .navbar .nav-link.btn.credit-button:focus,
.navbar .nav-link.btn.credit-button:hover,
.navbar .nav-link.btn.credit-button:focus{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.2) !important;
}

/* Final specificity lock so Credits text never flips to black in any header/nav variant */
body .navbar .credit-button,
body .site-header .credit-button{
  color: var(--brand-gold, #b08a48) !important;
}

/* removed duplicate #hubNav block — rules already defined earlier.
   Keeping a single source of truth prevents order/specificity conflicts. */

/* moved: right-rail recipe item width now lives in aromarecipecard.css */