/* /styles/kitchen.css */

/* Page wrappers – kitchen, recipes, shopping */
body[data-page="kitchen"] .kitchen,
body[data-page="shopping"] .kitchen {
  --panel-pad: 12px;
  --panel-gap: 12px;
}


/* Panels */
body[data-page="kitchen"] .kitchen .panel,
body[data-page="shopping"] .kitchen .panel {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
  padding: var(--panel-pad);
}



/* Headings */
body[data-page="kitchen"] .kitchen .panel h2,
body[data-page="shopping"] .kitchen .panel h2 {
  margin: 5px 0 8px 0;
  font-weight: 600;
  color: var(--bs-heading-color, var(--bs-body-color, #000));
}


/* Controls (buttons/inputs) */
body[data-page="kitchen"] .kitchen .btn,
body[data-page="shopping"] .kitchen .btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #000);
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;
  padding: 0.18rem 0.48rem;
  font-size: 0.84rem;
  line-height: 1.2;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,.08));
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body[data-page="kitchen"] .kitchen .btn:hover,
body[data-page="shopping"] .kitchen .btn:hover,
body[data-page="kitchen"] .kitchen .btn:focus-visible,
body[data-page="shopping"] .kitchen .btn:focus-visible {
  background: var(--bs-body-bg, #fff);
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25);
  outline: none;
}


/* Fallback brand buttons for plain <button> / inputs inside Kitchen
   Mirrors your components button look so Kitchen gets the same brand shape/colors */
body[data-page="kitchen"] .kitchen button,
body[data-page="kitchen"] .kitchen input[type="button"],
body[data-page="kitchen"] .kitchen input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #000);
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;                      /* Pixel small pill */
  padding: 0.18rem 0.48rem;                   /* Pixel small pill */
  font-size: 0.84rem;                         /* Pixel small pill */
  line-height: 1.2;
  min-height: 30px;                           /* Pixel small pill */
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,.08));
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body[data-page="kitchen"] .kitchen button:hover,
body[data-page="kitchen"] .kitchen input[type="button"]:hover,
body[data-page="kitchen"] .kitchen input[type="submit"]:hover,
body[data-page="kitchen"] .kitchen button:focus-visible,
body[data-page="kitchen"] .kitchen input[type="button"]:focus-visible,
body[data-page="kitchen"] .kitchen input[type="submit"]:focus-visible {
  background: var(--bs-body-bg, #fff);
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25);
  outline: none;
}
/* Brand form fields (cover inputs with or without type attr) */
body[data-page="kitchen"] .kitchen input:not([type]),
body[data-page="kitchen"] .kitchen input[type="text"],
body[data-page="kitchen"] .kitchen input[type="search"],
body[data-page="kitchen"] .kitchen input[type="email"],
body[data-page="kitchen"] .kitchen input[type="number"],
body[data-page="kitchen"] .kitchen textarea,
body[data-page="kitchen"] .kitchen select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--bs-body-color, #000);
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.5rem;                        /* Pixel radius */
  padding: 0.38rem 0.6rem;                      /* compact, readable */
  line-height: 1.2;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,.08));
  min-height: 34px;
}


/* If the title field is disabled/readonly, keep brand look instead of greyed UA */
body[data-page="kitchen"] .kitchen input[type="text"][disabled],
body[data-page="kitchen"] .kitchen input[type="text"][readonly] {
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #000);
  border: 1px solid var(--brand-gold, #b08a48);
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}


body[data-page="kitchen"] .kitchen input::placeholder,
body[data-page="kitchen"] .kitchen textarea::placeholder {
  color: var(--color-muted, #6c757d);
}

body[data-page="kitchen"] .kitchen input:focus-visible,
body[data-page="kitchen"] .kitchen textarea:focus-visible,
body[data-page="kitchen"] .kitchen select:focus-visible {
  outline: none;
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25);
}
/* Belt-and-braces: target the exact fields from the Recipes module */
/* moved to /styles/recipes.css */

/* Tighten inline control rows like: [ New shopping list title ][ Add List ] */
body[data-page="kitchen"] .kitchen input + button,
body[data-page="kitchen"] .kitchen select + button {
  margin-left: 10px;
}

/* Safety net: if the recipe title input sits outside .kitchen, still brand it */
body[data-page="kitchen"] input[type="text"].title,
body[data-page="kitchen"] input[type="text"][name="title"],
body[data-page="kitchen"] input[type="text"][id*="title"] {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-8);
  padding: 6px 10px;
  line-height: 1.2;
  box-shadow: var(--shadow-soft);
  min-height: 34px;
}

/* Grid for cards/lists */
body[data-page="kitchen"] .kitchen .grid,
body[data-page="shopping"] .kitchen .grid {
  display: grid;
  gap: var(--panel-gap);
  grid-template-columns: 1fr;
}

/* Tighten vertical rhythm inside cards/lists on Kitchen to match brand spacing */
body[data-page="kitchen"] .kitchen .panel > * + * { 
  margin-top: 8px; /* aligns with your 8/10px scale */
}

/* Strong gaps between any stacked controls (buttons/inputs/selects/textarea) */
/* Inline rows: cancel the vertical stacking margin so pills/buttons align on one line */
body[data-page="kitchen"] #chatbotButtons :where(.btn,button,input,select,textarea)
  + :where(.btn,button,input,select,textarea),
body[data-page="kitchen"] #hubNav .nav :where(.btn,button,input,select,textarea)
  + :where(.btn,button,input,select,textarea),
body[data-page="kitchen"] #rightColumn .d-flex :where(.btn,button,input,select,textarea)
  + :where(.btn,button,input,select,textarea) {
  margin-top: 0;
}
/* Right-rail actions: add horizontal gap between "Open Full Document…" and "Docs Settings" */
body[data-page="kitchen"] #rightColumn .doc-open-link.btn + :where(.btn,button) {
  margin-left: 0.5rem; /* matches the .5rem chip spacing elsewhere */
}

/* Extra breathing room between list items (e.g., the “Yes — …” rows) */
body[data-page="kitchen"] .kitchen li + li {
  margin-top: 12px;
}

/* If buttons live inside list items, ensure each has some bottom space too */
body[data-page="kitchen"] .kitchen li :where(button,.btn,input[type="button"],input[type="submit"]) {
  margin-bottom: 8px;
}

/* Universal control spacing in Kitchen – works even when wrapped/nested */
body[data-page="kitchen"] .kitchen :where(button,.btn,input,select,textarea) {
  margin-bottom: 10px;   /* gives each control breathing room */
}

/* Keep inline button rows tight when they truly sit side-by-side */
body[data-page="kitchen"] .kitchen .button-group :where(button,.btn,input[type="button"],input[type="submit"]) {
  margin-bottom: 0;
}

/* Optional: slightly tighter margin for tiny icon buttons, if you use them */
body[data-page="kitchen"] .kitchen .btn.btn--icon { 
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  body[data-page="kitchen"] .kitchen .grid,
  body[data-page="shopping"] .kitchen .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  body[data-page="kitchen"] .kitchen .grid,
  body[data-page="shopping"] .kitchen .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}



/* Example Recipe card */
/* moved to /styles/kitcherecipes.css */

body[data-page="kitchen"] .kitchen ul,
body[data-page="kitchen"] .kitchen ol {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Keep a clean visual hierarchy for nested lists without bullets */
body[data-page="kitchen"] .kitchen li > ul,
body[data-page="kitchen"] .kitchen li > ol {
  margin-top: 6px;
  margin-left: 12px;   /* small indent, no bullet */
}


/* Example Shopping list item */
body[data-page="kitchen"] .kitchen .list-item,
body[data-page="shopping"] .kitchen .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
body[data-page="kitchen"] .kitchen .list-item:last-child,
body[data-page="shopping"] .kitchen .list-item:last-child {
  border-bottom: 0;
}


/* Accessibility helper reuse (pairs with utilities.css) */
body[data-page="kitchen"] .kitchen .sr-only,
body[data-page="shopping"] .kitchen .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Kill bullets/indents for any lists on the Kitchen page */
body[data-page="kitchen"] ul,
body[data-page="kitchen"] ol {
  list-style: none !important;
  margin: 0;
  padding-left: 0;
}
/* Also remove the actual bullet glyph some browsers keep via ::marker */
body[data-page="kitchen"] li::marker { content: "" !important; }

/* Optional: keep a subtle visual indent for nested lists, no bullets */
body[data-page="kitchen"] li > ul,
body[data-page="kitchen"] li > ol { margin-top: 6px; margin-left: 12px; }

/* DEBUG OFF */

/* === Kitchen page: adopt Pixel overrides for navbar login, secondary pills, and dashboard slider === */
/* Scoped so Kitchen cannot override other pages. Mirrors pixel-overrides.css exactly where relevant. */

/* -----------------------------------------------------------
   A) DASHBOARD SLIDER — gold image frames + gold scrollbar
   Source parity: pixel-overrides.css → ".dashboard-scroller …"
----------------------------------------------------------- */
/* Uniform 72×72 tiles + gold frame for your .dashboard-strip markup */
body[data-page="kitchen"] .dashboard-strip .dashboard-tab{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
}
body[data-page="kitchen"] .dashboard-strip .dashboard-tab img{
  width: 72px;
  height: 72px;
  display: block;
  object-fit: cover;
  box-sizing: border-box;
  border: 2px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
@media (min-width:768px){
  body[data-page="kitchen"] .dashboard-strip .dashboard-tab img{ border-width: 3px; }
}
body[data-page="kitchen"] .dashboard-strip .dashboard-tab:focus img,
body[data-page="kitchen"] .dashboard-strip .dashboard-tab:hover img{
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 1px 8px rgba(0,0,0,.16);
  outline: none;
}
body[data-page="kitchen"] .dashboard-strip .dashboard-tab span{
  display: block;
  margin-top: .5rem;
  line-height: 1.2;
}

/* Gold horizontal scrollbar on pointer-accurate devices */
@media (hover:hover) and (pointer:fine){
  body[data-page="kitchen"] .dashboard-strip .overflow-auto{
    scrollbar-width: thin;
    scrollbar-color: var(--brand-gold, #b08a48) transparent;
  }
  body[data-page="kitchen"] .dashboard-strip .overflow-auto::-webkit-scrollbar{ height: 10px; }
  body[data-page="kitchen"] .dashboard-strip .overflow-auto::-webkit-scrollbar-track{ background: transparent; }
  body[data-page="kitchen"] .dashboard-strip .overflow-auto::-webkit-scrollbar-thumb{
    background: var(--brand-gold, #b08a48);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
}

/* Touch devices: remove any under-strip line if present */
@media (hover:none),(pointer:coarse){
  body[data-page="kitchen"] .dashboard-scroller .d-flex{ border-bottom: 0; }
}

/* -----------------------------------------------------------
   B) SECONDARY / HUB PILLS — exact small pill spec + desktop black
   Source parity: pixel-overrides.css → "#hubNav …", ".secondary-nav …"
----------------------------------------------------------- */

/* Global spacing for the secondary pills row (kitchen only) */
body[data-page="kitchen"] #hubNav { 
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

/* Inter-pill gap (desktop tightening handled below) */
body[data-page="kitchen"] #hubNav .nav { gap: 0.20rem !important; }

/* Perfect thin pill: apply to your Kitchen ACTION BUTTONS (they are <button>, not .nav-link) */
body[data-page="kitchen"] #hubNav .nav .btn,
body[data-page="kitchen"] #hubNav .btn,
body[data-page="kitchen"] .secondary-nav .nav .btn{
  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;
  color: #000 !important;

  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Hover/focus/active keep the same thin aesthetic */
body[data-page="kitchen"] #hubNav .nav-pills .nav-link:hover,
body[data-page="kitchen"] #hubNav .nav-pills .nav-link:focus,
body[data-page="kitchen"] #hubNav .nav-pills .nav-link.active,
body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link:hover,
body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link:focus,
body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link.active{
  background: #fff !important;
  border-color: var(--brand-gold, #b08a48) !important;
  outline: none !important;
}

/* Desktop-only: force black pill text so Pixel greys can’t leak in */
@media (min-width: 992px){
  body[data-page="kitchen"] #hubNav .nav-pills .nav-link,
  body[data-page="kitchen"] #hubNav .nav-pills .nav-link:hover,
  body[data-page="kitchen"] #hubNav .nav-pills .nav-link:focus,
  body[data-page="kitchen"] #hubNav .nav-pills .nav-link.active,
  body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link,
  body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link:hover,
  body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link:focus,
  body[data-page="kitchen"] .secondary-nav .nav-pills .nav-link.active{
    color: #000 !important;
  }

  /* Desktop gap between pills (matches Pixel) */
  body[data-page="kitchen"] #hubNav .nav-pills,
  body[data-page="kitchen"] .secondary-nav .nav-pills{
    gap: 0.75rem !important;
  }
}

/* Phone stacking for any .secondary-nav that appears in Kitchen */
@media (max-width: 768px){
  body[data-page="kitchen"] .secondary-nav .nav,
  body[data-page="kitchen"] .secondary-nav ul.nav,
  body[data-page="kitchen"] .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;
  }
  body[data-page="kitchen"] .secondary-nav .nav > li.nav-item,
  body[data-page="kitchen"] .secondary-nav .nav > *{
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
  }
  body[data-page="kitchen"] .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;
  }
}

/* -----------------------------------------------------------
   C) NAVBAR LOGIN BUTTONS — force small gold pill in header
   Source parity: pixel-overrides.css → ".navbar …" button sizing + gold
----------------------------------------------------------- */

/* Your Kitchen header uses .hub-auth + #googleDocsLoginBtn, not .navbar */
body[data-page="kitchen"] .hub-auth .btn,
body[data-page="kitchen"] #googleDocsLoginBtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0.18rem 0.48rem !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;
  border-radius: 0.5rem !important;
}

/* Make those auth buttons brand-gold primary by default */
body[data-page="kitchen"] .hub-auth .btn,
body[data-page="kitchen"] #googleDocsLoginBtn{
  background-color: var(--brand-gold, #b08a48) !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  color: #fff !important;
}
body[data-page="kitchen"] .hub-auth .btn:hover,
body[data-page="kitchen"] .hub-auth .btn:focus,
body[data-page="kitchen"] #googleDocsLoginBtn:hover,
body[data-page="kitchen"] #googleDocsLoginBtn:focus{
  background-color: #9a773f !important;
  border-color: #9a773f !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

/* Treat common “Login” anchors as solid gold primary if authoring missed .btn-primary */
body[data-page="kitchen"] .navbar a[href*="login" i],
body[data-page="kitchen"] .navbar a[href*="log-in" i],
body[data-page="kitchen"] .navbar a[href*="signin" i],
body[data-page="kitchen"] .navbar a[href*="sign-in" i],
body[data-page="kitchen"] .navbar a[aria-label="Login" i],
body[data-page="kitchen"] .navbar a[title="Login" i],
body[data-page="kitchen"] .navbar .nav-link[aria-label="Login" i],
body[data-page="kitchen"] .navbar .nav-link[title="Login" i]{
  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;
}
body[data-page="kitchen"] .navbar a[href*="login" i]:hover,
body[data-page="kitchen"] .navbar a[href*="log-in" i]:hover,
body[data-page="kitchen"] .navbar a[href*="signin" i]:hover,
body[data-page="kitchen"] .navbar a[href*="sign-in" i]:hover,
body[data-page="kitchen"] .navbar a[aria-label="Login" i]:hover,
body[data-page="kitchen"] .navbar a[title="Login" i]:hover,
body[data-page="kitchen"] .navbar .nav-link[aria-label="Login" i]:hover,
body[data-page="kitchen"] .navbar .nav-link[title="Login" i]:hover,
body[data-page="kitchen"] .navbar a[href*="login" i]:focus,
body[data-page="kitchen"] .navbar a[href*="log-in" i]:focus,
body[data-page="kitchen"] .navbar a[href*="signin" i]:focus,
body[data-page="kitchen"] .navbar a[href*="sign-in" i]:focus,
body[data-page="kitchen"] .navbar a[aria-label="Login" i]:focus,
body[data-page="kitchen"] .navbar a[title="Login" i]:focus,
body[data-page="kitchen"] .navbar .nav-link[aria-label="Login" i]:focus,
body[data-page="kitchen"] .navbar .nav-link[title="Login" i]:focus{
  background-color: #9a773f !important;
  border-color: #9a773f !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

/* If authoring uses outline variants in the navbar, make them brand gold */
body[data-page="kitchen"] .navbar .btn[class*="btn-outline-"],
body[data-page="kitchen"] .navbar .nav-link.btn[class*="btn-outline-"]{
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background-color: transparent !important;
}
body[data-page="kitchen"] .navbar .btn[class*="btn-outline-"]:hover,
body[data-page="kitchen"] .navbar .btn[class*="btn-outline-"]:focus,
body[data-page="kitchen"] .navbar .btn[class*="btn-outline-"]:active,
body[data-page="kitchen"] .navbar .nav-link.btn[class*="btn-outline-"]:hover,
body[data-page="kitchen"] .navbar .nav-link.btn[class*="btn-outline-"]:focus,
body[data-page="kitchen"] .navbar .nav-link.btn[class*="btn-outline-"]:active{
  background-color: var(--brand-gold, #b08a48) !important;
  color: #fff !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}