/* ===================================================================

   BoozeButler / Halytic Design System v1.0

   LAYOUT SYSTEM — Layout A / B / C / D

   Phase 1 Consolidation: Merged ui-layout-hotfix-v2.css (critical fixes)

   =================================================================== */

/* ===============================================================

   PHASE 3 — CHUNK 120 MERGE (LAYOUT STANDARDIZATION)

   Canonicalize all layout structure. Remove legacy margin hacks,

   forced widths, and padding conflicts. Spacing handled by page

   containers, not .bb-main.

   =============================================================== */

/* ===============================================================

   LAYOUT SYSTEM — Phase C additions
   TikTok Studio background fixes

   =============================================================== */

/* TikTok Studio should use light background rather than dark */
.tiktok-studio-page,
.tiktok-studio,
.bb-studio-wrapper,
.bb-page-narrow.tiktok-studio,
[class*="tiktok-studio"] {
  background: var(--bb-bg-light, #f7f3ef) !important;
  color: var(--bb-text-strong, #2d2926) !important;
}

.tiktok-studio-header,
[class*="tiktok-studio-header"] {
  background: transparent !important;
  color: var(--bb-text-strong, #2d2926) !important;
}


/* ===============================================================

   GLOBAL PAGE BASE

   =============================================================== */



/* --- FIXED TWO-COLUMN APP LAYOUT --- */
/* Align main layout with canonical sidebar width */

.bb-layout {

  display: grid;

  grid-template-columns: 240px 1fr; /* canonical sidebar + main */

  width: 100%;

  min-height: 100vh;

  position: relative;

  background: var(--bb-background, #F7F5F2);

}

/* Ensure header spans full width of the grid */
.bb-layout .bb-header {
  grid-column: 1 / span 2;
  width: 100%;
}

/* Ensure footer spans full width and breaks out of grid */
body.bb-layout > .bb-footer,
.bb-layout > .bb-footer {
  grid-column: 1 / -1;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  left: 0;
  right: 0;
}

@media (max-width: 960px) {
  .bb-layout {
    grid-template-columns: 0 1fr;
  }
}



/* Sidebar column */

#bb-nav {

  grid-column: 1;

  width: 240px;

  min-width: 240px;

  position: relative;

  z-index: 10;

  background: var(--bb-surface, #FFFFFF);

  border-right: 1px solid var(--bb-border, #E5E1D8);

}



/* Main content */

.bb-main {

  grid-column: 2;

  /* PHASE 120: Remove global padding.

     Page spacing is handled inside .bb-page containers only. */

  padding: 0 !important;

  position: relative;

  z-index: 1;

  margin: 0 !important; /* remove legacy margin-left hacks */

  width: 100% !important;

  /* Ensure main content is always visible */

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

}

/* Ensure main content wrapper is always visible */

.bb-main-content {

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

}



.bb-page,

.bb-page-narrow {

  width: 100%;

  margin: 0 auto;

  box-sizing: border-box;

  padding: 48px 24px; /* canonical spacing */

  /* Ensure page content is always visible */

  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

}



/* Standard widths */

.bb-page {

  max-width: 1080px;

}



.bb-page-narrow:not(.tiktok-studio) {

  max-width: 760px;

}



/* TikTok Studio uses full builder width */

.bb-page-narrow.tiktok-studio {

  max-width: 1080px;

  width: 100%;

}



/* ===============================================================

   LAYOUT A — Main App Builders (1080px)

   Make Tonight, Round Builder, Mocktail Builder, Solo-Serve,

   AI Bartender, Recommended, Guest

   =============================================================== */



body.layout-A {

  background: var(--bg-app);

}



body.layout-A .bb-main {

  padding-top: 0; /* spacing handled by .bb-page */

}



body.layout-A .bb-page {

  max-width: 1080px; /* already defined above */

}



/* ============================================

   PHASE 1 — STEP 2 MERGE

   Imported from layout-A.css

   Only non-conflicting rules preserved.

   All deprecated selectors marked.

   ============================================ */



/* --------------------------------------------

   HEADER SPACING (non-conflicting)

   -------------------------------------------- */

.header-section {

  padding-top: var(--space-lg);

  padding-bottom: var(--space-md);

}



.header-section .header-title {

  margin-bottom: var(--space-md);

}



.header-section .header-subtitle {

  margin-top: var(--space-xs);

  color: var(--text-secondary);

}



/* --------------------------------------------

   PAGE TITLE (no conflict with Layout B .bb-page h1)

   -------------------------------------------- */

.page-title {

  font-size: 1.75rem;

  font-weight: 600;

  margin-bottom: var(--space-lg);

}



/* --------------------------------------------

   FLEX UTILITY (unique, safe)

   -------------------------------------------- */

.flex-row {

  display: flex;

  flex-direction: row;

  gap: var(--space-md);

}



.flex-col {

  display: flex;

  flex-direction: column;

  gap: var(--space-md);

}



.flex-center {

  display: flex;

  align-items: center;

  justify-content: center;

}



/* --------------------------------------------

   CARD LAYOUT OVERRIDES

   Verified safe: does NOT conflict with canonical .bb-card

   -------------------------------------------- */

.card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: var(--space-lg);

}



.card-grid.compact {

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



/* --------------------------------------------

   BUTTON SPACING FROM layout-A

   (Does not override canonical button styles)

   -------------------------------------------- */

.button-row {

  display: flex;

  gap: var(--space-sm);

  margin-top: var(--space-md);

}



/* --------------------------------------------

   SIDEBAR EXPERIMENT SELECTORS

   Deprecated — Layout B uses .bb-nav

   Retained temporarily for backwards compatibility

   -------------------------------------------- */

.sidebar {

  /* deprecated: candidate for removal */

  padding: var(--space-md);

}



.sidebar-header {

  /* deprecated: candidate for removal */

  font-weight: 600;

  margin-bottom: var(--space-sm);

}



.sidebar-item {

  /* deprecated: candidate for removal */

  padding: var(--space-sm) var(--space-md);

  border-radius: 6px;

}



.sidebar-item.active {

  /* deprecated: candidate for removal */

  background: var(--surface-highlight);

}



/* END OF PHASE 1 STEP 2 MERGE */



/* ===============================================================

   LAYOUT B — Settings (760px)

   Account, Favorites, History, Subscriptions, Inventory IQ,

   Personalization, Taste Profile, Favorite Detail

   =============================================================== */



body.layout-B {

  background: var(--bg-app);

}



body.layout-B .bb-main {

  padding-top: 0; /* spacing handled by .bb-page */

}



body.layout-B .bb-page,

body.layout-B .bb-page-narrow {

  max-width: 760px;

}



/* Breadcrumb / Back link alignment */

body.layout-B .back-link {

  display: inline-block;

  margin-top: var(--space-xs);

  margin-bottom: var(--space-sm);

  color: var(--accent);

  font-size: 15px;

}



/* ============================================

   PHASE 1 — STEP 3 MERGE

   Imported from layout-B.css

   Only non-conflicting rules preserved.

   Flex-based layout rules skipped (conflict with grid from hotfix).

   ============================================ */



/* H1 consistency */

body.layout-B h1,

body.layout-B .bb-page-title {

  margin-top: 8px;

  margin-bottom: 24px;

}



/* Page container padding enhancement */

body.layout-B .bb-page,

body.layout-B .bb-page-narrow {

  padding-bottom: 48px; /* preserved */

}



/* Card spacing normalization */

body.layout-B .settings-container > *,

body.layout-B .favorites-container > *,

body.layout-B .detail-container > *,

body.layout-B .history-container > *,

body.layout-B .inventory-intelligence-container > *,

body.layout-B .personalization-container > *,

body.layout-B .taste-profile-container > * {

  margin-bottom: 24px;

}



/* Prevent weird horizontal drift from builder styles */

body.layout-B .bb-page,

body.layout-B .bb-main {

  position: relative;

  left: 0;

}



/* Fix large cards exceeding width */

body.layout-B .card,

body.layout-B .settings-card,

body.layout-B .favorites-card,

body.layout-B .iq-card {

  max-width: 760px;

  margin-left: auto;

  margin-right: auto;

}



/* Prevent accidental overflow */

body.layout-B .bb-page * {

  max-width: 100%;

  box-sizing: border-box;

}



/* Deprecated: Flex-based layout rules from layout-B.css skipped

   body.layout-B .bb-layout { display: flex... } - CONFLICTS with grid

   body.layout-B #bb-nav { flex-shrink... } - CONFLICTS with grid

   body.layout-B .bb-main { flex: 1... } - CONFLICTS with grid

   These are replaced by grid layout from ui-layout-hotfix-v2.css

*/



/* ============================================

   LAYOUT B MERGE — Step 3

   Source: layout-B.css

   Purpose: unify sidebar layout into ui-layouts

   ============================================ */



/* Sidebar container - Layout B specific enhancements */

/* Note: Base #bb-nav rules are in GLOBAL PAGE BASE section above */

/* Additional Layout B sidebar enhancements - scoped to avoid conflicts */

body.layout-B aside#bb-nav {

  overflow-y: auto;

}



/* Settings page wrapper */

.bb-page.settings-page {

  max-width: 960px;

  margin: 0 auto;

  padding-bottom: 64px;

}



/* Settings header spacing */

.settings-header {

  margin-bottom: 24px;

}



/* Mobile collapse behavior (<960px)

   Do NOT modify breakpoint — inherited from Step 1 merge.

*/

@media (max-width: 959px) {

  aside#bb-nav {

    position: fixed;

    top: 0;

    left: 0;

    height: 100vh;

    transform: translateX(-100%);

    transition: transform 0.3s ease;

    z-index: 2000;

  }



  aside#bb-nav.open {

    transform: translateX(0);

  }



  .bb-main {

    padding: 0 !important; /* no padding on main, only inside pages */

  }



  .bb-page,

  .bb-page-narrow {

    padding: 32px 16px; /* reduced mobile spacing */

    margin: 0;

    width: 100%;

  }

}



/* ============================================

   Deprecated selectors (safe but unused)

   ============================================ */



/* .settings-container was removed in HTML migration */

.settings-container { /* deprecated: candidate for removal */ }



/* .account-wrapper was removed in Layout B rewrite */

.account-wrapper { /* deprecated: candidate for removal */ }



/* END OF PHASE 1 STEP 3 MERGE */



/* ===============================================================

   LAYOUT C — Marketing + Authentication (Full Page Centered)

   Login, Signup, Pricing, Landing Page, etc.

   =============================================================== */



body.layout-C {

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--bg-app);

  min-height: 100vh;

  padding: var(--space-xl) var(--space-lg);

}



body.layout-C .auth-container,

body.layout-C .marketing-container {

  width: 100%;

  max-width: 480px;

  background: var(--bg-surface);

  border-radius: var(--radius-card);

  padding: var(--space-xl);

  box-shadow: var(--shadow-md);

}



/* ======================================================

   LAYOUT C MERGE — Step 4

   Source: layout-C.css (enhancements)

   Purpose: unify single-column marketing/legal pages

   ====================================================== */



/* Top-level layout wrapper for Layout C pages */

.layout-c {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  background: var(--surface-default, var(--bg-app, #faf7f2));

}



/* Main content (no sidebar in Layout C) */

.layout-c .bb-main {

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  padding: var(--space-xl, 32px);

}



/* Page container styles */

.layout-c .bb-page.marketing-page,

.layout-c .bb-page.legal-page {

  background: var(--surface-default, var(--bg-surface, #ffffff));

  padding: var(--space-lg, 24px);

  border-radius: 12px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);

}



/* Headings for marketing/legal pages */

.layout-c h1 {

  font-size: 2rem;

  margin-bottom: var(--space-lg, 24px);

}



.layout-c h2 {

  font-size: 1.35rem;

  margin-top: var(--space-lg, 24px);

  margin-bottom: var(--space-sm, 8px);

}



/* Text blocks */

.layout-c p,

.layout-c li {

  line-height: 1.6;

  margin-bottom: var(--space-md, 16px);

}



/* Legal back-link */

.legal-back-link {

  display: inline-block;

  margin-bottom: var(--space-lg, 24px);

  color: var(--text-muted, #8a817c);

}



/* Mobile adjustments */

@media (max-width: 959px) {

  .layout-c .bb-main {

    padding: var(--space-lg, 24px);

  }



  .layout-c .bb-page.marketing-page,

  .layout-c .bb-page.legal-page {

    padding: var(--space-md, 16px);

  }

}



/* ======================================================

   Deprecated selectors from legacy layout-C

   ====================================================== */

.legal-page-wrapper { /* deprecated: candidate for removal */ }

.docs-container { /* deprecated: candidate for removal */ }

.marketing-container { /* deprecated: candidate for removal */ }



/* END OF PHASE 1 STEP 4 MERGE */



/* ======================================================

   MARKETING LAYOUT MERGE — Step 5

   From: marketing-layout.css

   Purpose: shared marketing/landing page layout styles

   ====================================================== */



/* Section wrappers */

.marketing-section {

  margin: var(--space-xl, 32px) auto;

  max-width: 960px;

  padding: 0 var(--space-md, 16px);

}



/* Hero section */

.hero {

  text-align: center;

  padding: var(--space-xl, 32px) 0;

}



.hero-title {

  font-size: 2.25rem;

  font-weight: 600;

  margin-bottom: var(--space-md, 16px);

}



.hero-subtitle {

  font-size: 1.25rem;

  color: var(--text-muted, #7a726a);

  max-width: 720px;

  margin: 0 auto var(--space-xl, 32px);

}



/* Marketing feature grid */

.marketing-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: var(--space-xl, 32px);

  padding: var(--space-lg, 24px) 0;

}



/* Marketing card */

.marketing-card {

  background: var(--surface-default, var(--bg-surface, #ffffff));

  border-radius: 12px;

  padding: var(--space-lg, 24px);

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);

  text-align: left;

}



.marketing-card h3 {

  font-size: 1.35rem;

  margin-bottom: var(--space-sm, 8px);

}



.marketing-card p {

  line-height: 1.6;

  margin-bottom: var(--space-md, 16px);

}



/* Buttons in marketing pages */

.marketing-cta {

  display: inline-block;

  padding: var(--space-sm, 8px) var(--space-md, 16px);

  border-radius: 8px;

  background: var(--accent-primary, var(--accent, #c7a16d));

  color: #ffffff;

  font-weight: 600;

  text-align: center;

}



/* Section titles */

.marketing-section-title {

  text-align: center;

  font-size: 1.75rem;

  font-weight: 600;

  margin-bottom: var(--space-lg, 24px);

}



/* Mobile adjustments */

@media (max-width: 959px) {

  .marketing-section {

    padding: 0 var(--space-sm, 8px);

  }



  .hero-title {

    font-size: 1.8rem;

  }



  .marketing-grid {

    gap: var(--space-lg, 24px);

  }

}



/* ======================================================

   Deprecated selectors from legacy marketing layout

   ====================================================== */

.marketing-container { /* deprecated: candidate for removal */ }

.legacy-marketing-block { /* deprecated: candidate for removal */ }

.landing-wrapper { /* deprecated: candidate for removal */ }



/* END OF PHASE 1 STEP 5 MERGE */



/* ======================================================

   MARKETING HOTFIX MERGE — Step 6

   From: marketing-hotfix.css

   Purpose: spacing fixes, hero adjustments, card cleanup

   These are high-priority but must remain scoped.

   ====================================================== */



/* --------------------------------------------

   Hero spacing fixes

   -------------------------------------------- */

.hero {

  padding-top: var(--space-xl, 32px);

  padding-bottom: var(--space-xl, 32px);

}



.hero-title {

  margin-bottom: var(--space-md, 16px);

}



.hero-subtitle {

  margin-top: var(--space-sm, 8px);

}



/* --------------------------------------------

   Marketing grid fixes (safe & scoped)

   -------------------------------------------- */

.marketing-grid {

  gap: var(--space-xl, 32px);

}



@media (max-width: 959px) {

  .marketing-grid {

    gap: var(--space-lg, 24px);

  }

}



/* --------------------------------------------

   Marketing card padding & shadow fixes

   -------------------------------------------- */

.marketing-card {

  padding: var(--space-lg, 24px) var(--space-lg, 24px);

  box-shadow: 0 3px 8px rgba(0,0,0,0.05);

}



.marketing-card h3 {

  margin-bottom: var(--space-sm, 8px);

}



/* --------------------------------------------

   CTA button alignment hotfix

   -------------------------------------------- */

.marketing-cta {

  vertical-align: middle;

  line-height: 1.2;

}



/* --------------------------------------------

   Deprecated global overrides (do NOT reapply)

   -------------------------------------------- */

/* The following selectors appeared in marketing-hotfix.css

   but were unsafe to merge. Marking them as deprecated

   for removal during Step 8.

*/

.hero-wrapper { /* deprecated: candidate for removal */ }

.marketing-wrapper { /* deprecated: candidate for removal */ }

.landing-content { /* deprecated: candidate for removal */ }



/* DO NOT IMPORT:

   h1, h2, h3 overrides

   body padding overrides

   section spacing resets

*/

/* deprecated: global overrides were intentionally omitted */



/* END OF PHASE 1 STEP 6 MERGE */



/* ======================================================

   STEP 7 MERGE — SAFE RULES FROM pages-standard-unified.css

   All rules here are structural width constraints only.

   All other rules in the source file remain deprecated.

   ====================================================== */



/* Standard regular page width (1080px max) */

.bb-page {

  max-width: 1080px;

  width: 100%;

  margin: 0;

  padding-left: var(--space-md, 16px);

  padding-right: var(--space-md, 16px);

  padding-bottom: var(--space-lg, 24px);

  box-sizing: border-box;

}



/* Narrow pages (settings, history, favorites) — 760px max */

.bb-page-narrow:not(.tiktok-studio) {

  max-width: 760px;

  width: 100%;

  margin: 0;

  padding-left: var(--space-md, 16px);

  padding-right: var(--space-md, 16px);

  padding-bottom: var(--space-lg, 24px);

  box-sizing: border-box;

}



/* Builder pages (Round Builder, Mocktail, SFS) — wide 1080px to match Round Builder */

.round-builder-page,

.mocktail-builder-page,

.start-from-scratch-page {

  max-width: 1080px; /* Changed from 760px to match Round Builder width */

  padding-left: var(--space-md, 16px);

  box-sizing: border-box;

}



/* TikTok Studio — wide 1080px content block */

.bb-page-narrow.tiktok-studio {

  max-width: 1080px;

  width: 100%;

  padding-left: var(--space-md, 16px);

  padding-right: var(--space-md, 16px);

}



/* Mobile fallback: layout collapses to 100% width */

@media (max-width: 1024px) {

  .bb-main {

    margin-left: 0 !important;

    width: 100% !important;

  }

  .bb-page,

  .bb-page-narrow {

    margin-left: 0 !important;

    width: 100% !important;

  }

}



/* ======================================================

   MARK SOURCE FILE CONTENT AS DEPRECATED

   (To be removed in Phase 1 Step 8)

   ====================================================== */



/* deprecated: Most rules in pages-standard-unified.css override

   new Layout A/B/C and should NOT be used going forward.

   They remain only until Step 8 cleanup. */



/* END OF PHASE 1 STEP 7 MERGE */



/* ===============================================================

   LAYOUT D — Studio Pages (Full-Width Workspace)

   TikTok Studio, Analytics v2, Inventory Heatmap, Event Planner

   =============================================================== */



body.layout-D {

  background: var(--bg-app);

}



body.layout-D .bb-main {

  max-width: 1600px;

  width: 100%;

  padding-top: 0; /* spacing handled inside .bb-page */

}



body.layout-D .bb-page {

  max-width: 100%; /* studio uses full width */

}



/* Studio header container */

body.layout-D .studio-header {

  width: 100%;

  max-width: 1400px;

  margin: 0 auto var(--space-lg);

}



/* Full-width work surface */

body.layout-D .studio-surface {

  width: 100%;

  background: var(--bg-surface);

  border-radius: var(--radius-card);

  padding: var(--space-xl);

  box-shadow: var(--shadow-sm);

}



/* ===============================================================

   RESPONSIVE BEHAVIOR — Merged from ui-layout-hotfix-v2.css

   Breakpoint: 960px (was 1080px)

   =============================================================== */



/* ============================================

   1) DESKTOP GRID LAYOUT (≥960px)

   Critical fixes with !important to override conflicts

   ============================================ */



@media (min-width: 960px) {



  .bb-layout {

    display: grid !important;

    grid-template-columns: 240px 1fr !important;

    width: 100% !important;

    min-height: 100vh !important;

    background: var(--bb-background, #F7F5F2);

    position: relative !important;

  }



  /* Sidebar stays fixed and fully visible */

  #bb-nav {

    grid-column: 1 !important;

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    width: 240px !important;

    min-width: 240px !important;

    background: var(--bb-surface, #FFFFFF) !important;

    border-right: 1px solid var(--bb-border, #E5E1D8) !important;

    position: relative !important;

    transform: none !important;

    left: 0 !important;

    top: 0 !important;

    z-index: 10 !important;

  }



  /* Main content column */

  .bb-main {

    grid-column: 2 !important;

    width: 100% !important;

    padding: var(--space-xxl, 32px) !important;

    margin-left: 0 !important;  /* override rogue margin-left:240px */

  }



  /* Remove any old mobile transforms still lingering */

  body.sidebar-collapsed #bb-nav {

    transform: none !important;

  }

}



/* ==================================================

   2) MOBILE / TABLET: COLLAPSE SIDEBAR (<960px)

   ================================================== */



@media (max-width: 959px) {



  .bb-layout {

    display: block !important; /* remove grid */

    width: 100% !important;

  }



  /* Sidebar becomes hidden by default */

  #bb-nav {

    display: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateX(-100%) !important;

    position: fixed !important;

    left: 0 !important;

    top: 64px !important; /* Start below header */

    bottom: 0 !important; /* Fill to bottom */

    height: auto !important; /* Use top/bottom instead of fixed height */

    width: 280px !important;

    max-width: 85vw !important;

    background: var(--bb-surface, #FFFFFF) !important;

    z-index: 1000 !important;

    transition: transform 0.25s ease, opacity 0.25s ease !important;
    
    /* CRITICAL: Enable scrolling on mobile */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    /* Single scroll container sizing */
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    min-height: 0 !important;

  }



  /* When active, slide in */

  body.sidebar-open #bb-nav,
  body.bb-nav-open #bb-nav,
  #bb-nav.is-open,
  #bb-nav[data-state="open"] {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateX(0) !important;
    
    /* CRITICAL: Ensure scrolling works when open */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    min-height: 0 !important;

  }
  
  /* Ensure sidebar content inside doesn't prevent scrolling */
  #bb-nav .bb-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
  }



  /* Main content full width */

  .bb-main {

    width: 100% !important;

    padding: var(--space-xl, 24px) !important;

  }

}



/* ============================================

   3) ADDITIONAL MOBILE BREAKPOINTS

   ============================================ */



@media (max-width: 600px) {



  body.layout-C .auth-container,

  body.layout-C .marketing-container {

    padding: var(--space-lg);

  }



  .bb-main {

    padding: var(--space-md);

  }



  .bb-page,

  .bb-page-narrow {

    padding: 0;

  }

}



/* ============================================

   4) COLOR FIXES — restore clean background

   Merged from ui-layout-hotfix-v2.css

   ============================================ */



.bb-page,

.bb-main,

.round-builder-page {

  background: var(--bb-background, #F7F5F2) !important;

}



/* Fix sidebar dark overlay if any exists */

#bb-nav,

.bb-nav {

  background-color: #fff !important;

}



/* Fix icon visibility */

.bb-nav-item img {

  opacity: 1 !important;

}



/* Fix active item highlight */

.bb-nav-item.active {

  background: rgba(191, 160, 90, 0.15) !important;

  border-left: 4px solid var(--bb-gold, #BFA05A) !important;

}



/* ===============================================================

   CHUNK 160: Header & logo vertical spacing polish
   - Remove stray gap above the header
   - Normalize spacing directly under the header
   - Slightly enlarge the logo in the global header
   =============================================================== */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Some layouts were adding their own padding at the very top.
   Force all app bodies/layout shells to sit flush with the viewport. */
body.layout-A,
body.layout-B,
body.bb-layout,
body.layout-B {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.bb-layout,
.layout-A,
.layout-a,
.layout-B,
.layout-b {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.bb-header {
  margin-top: 0 !important;
  top: 0 !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.5rem !important; /* Reduced from 0.85rem */
  margin-bottom: 0 !important; /* Ensure no margin below header */
}

/* Main content spacing right below the header.
   This replaces oversized defaults on some pages and matches My Bar. */
.bb-main {
  margin-top: 0;
  padding-top: 0.75rem; /* Reduced from 1.5rem */
}

.bb-main-content,
.bb-main-content > .bb-page {
  margin-top: 0;
  padding-top: 0;
}

/* Global header logo sizing:
   - used by classic <img class="bb-header-logo">
   - used by newer DS12 mark (.bb-header-logo__mark)
   CHUNK 160: Increased by 30% from 40px to 52px
*/
.bb-header-logo img,
img.bb-header-logo,
.bb-logo-img,
.bb-header-logo__mark {
  width: 52px !important; /* CHUNK 160: Increased by 30% */
  height: 52px !important; /* CHUNK 160: Increased by 30% */
  max-width: 52px !important;
  max-height: 52px !important;
  /* keep existing background / border-radius from header-final.css */
}

/* ===============================================================

   END — LAYOUT SYSTEM

   =============================================================== */