/* =============================================================
   FIXES.CSS — Supplemental fixes for Glostrup Rens & Skrædderi
   ============================================================= */

/* ================================================================
   1. LIGHT THEME — HERO SECTION TEXT VISIBILITY
   
   Hero sections (first <section> in page) have hardcoded dark
   rgba() overlay backgrounds. Text inside uses var(--white) which
   resolves to #111 in light mode → dark text on dark bg = invisible.
   Fix: redefine white variables to actual white inside hero sections.
   ================================================================ */

[data-theme=light] .page-wrapper > section:first-of-type,
[data-theme=light] .page-wrapper > style + section {
  --white: #ffffff;
  --white-80: rgba(255, 255, 255, 0.85);
  --white-50: rgba(255, 255, 255, 0.65);
  --white-30: rgba(255, 255, 255, 0.42);
  --white-20: rgba(255, 255, 255, 0.28);
  --gold: #d4a437;
  --gold-light: #f0c96a;
  --border-gold: rgba(212, 164, 55, 0.45);
}

/* About page uses Qo() component which generates a section with minHeight:340 */
[data-theme=light] .page-wrapper section[style*="minHeight: 340"],
[data-theme=light] .page-wrapper section[style*="minHeight:340"],
[data-theme=light] .page-wrapper section[style*="min-height: 340"] {
  --white: #ffffff;
  --white-80: rgba(255, 255, 255, 0.85);
  --white-50: rgba(255, 255, 255, 0.65);
  --white-30: rgba(255, 255, 255, 0.42);
  --white-20: rgba(255, 255, 255, 0.28);
  --gold: #d4a437;
}

/* ================================================================
   2. LIGHT THEME — FORM INPUTS & INTERACTIVE ELEMENTS
   ================================================================ */

/* Inputs inside the contact form hero section (dark bg) need white text */
[data-theme=light] .page-wrapper > section:first-of-type input,
[data-theme=light] .page-wrapper > section:first-of-type textarea {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(212, 164, 55, 0.45) !important;
}

[data-theme=light] .page-wrapper > section:first-of-type input::placeholder,
[data-theme=light] .page-wrapper > section:first-of-type textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* General inputs in content (non-hero) sections */
[data-theme=light] .page-wrapper > section:not(:first-of-type) input,
[data-theme=light] .page-wrapper > section:not(:first-of-type) textarea,
[data-theme=light] .page-wrapper > section:not(:first-of-type) select {
  color: #111 !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(184, 136, 15, 0.35) !important;
}

/* Booking form step content - semi-transparent bg on light pages */
[data-theme=light] .bfw-step,
[data-theme=light] [class*="booking"] input,
[data-theme=light] [class*="booking"] select,
[data-theme=light] [class*="booking"] textarea {
  color: #fff;
}

/* ================================================================
   3. LIGHT THEME — GLASS CARDS & CONTENT SECTIONS
   ================================================================ */

[data-theme=light] .glass-card {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(184, 136, 15, 0.28) !important;
}

/* Blog card text */
[data-theme=light] .glass-card h1,
[data-theme=light] .glass-card h2,
[data-theme=light] .glass-card h3 {
  color: #111 !important;
}

/* ================================================================
   4. LIGHT THEME — BUTTONS
   ================================================================ */

[data-theme=light] .btn-gold {
  color: #000 !important;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
}

[data-theme=light] .btn-outline-gold {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: transparent !important;
}

[data-theme=light] .btn-outline-gold:hover {
  color: #000 !important;
  background: var(--gold) !important;
}

/* Fix btn-outline-gold inside dark hero sections */
[data-theme=light] .page-wrapper > section:first-of-type .btn-outline-gold {
  --gold: #d4a437;
  color: #d4a437 !important;
  border-color: #d4a437 !important;
  background: rgba(212, 164, 55, 0.12) !important;
  backdrop-filter: blur(8px);
}

/* ================================================================
   5. LIGHT THEME — NAVIGATION & TOPBAR
   ================================================================ */

/* Topbar in light mode */
[data-theme=light] .topbar-desktop {
  background: var(--topbar-bg) !important;
}

/* Mobile nav overlay text visibility */
[data-theme=light] nav[style*="position:fixed"] a,
[data-theme=light] nav[style*="position: fixed"] a {
  color: var(--nav-text) !important;
}

/* ================================================================
   6. LIGHT THEME — FOOTER
   ================================================================ */

[data-theme=light] footer {
  background: var(--footer-bg) !important;
}

[data-theme=light] footer p,
[data-theme=light] footer span,
[data-theme=light] footer a {
  color: var(--footer-text) !important;
}

[data-theme=light] footer h3,
[data-theme=light] footer h4 {
  color: var(--gold) !important;
}

/* ================================================================
   7. LIGHT THEME — SERVICES & ABOUT PAGE SPECIFIC FIXES
   ================================================================ */

/* Service cards in light mode */
[data-theme=light] .svc-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(184, 136, 15, 0.2) !important;
}

[data-theme=light] .svc-row h2 {
  color: #111 !important;
}

[data-theme=light] .svc-row p {
  color: #444 !important;
}

/* About page two-column section text */
[data-theme=light] .about-2col h2,
[data-theme=light] .about-2col h3,
[data-theme=light] .about-2col p {
  color: #111 !important;
}

/* ================================================================
   8. LIGHT THEME — PRICING PAGE
   ================================================================ */

/* Pricing table categories */
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color:`var(--white)`"],
[data-theme=light] .page-wrapper > section:not(:first-of-type) table td,
[data-theme=light] .page-wrapper > section:not(:first-of-type) table th {
  color: #111;
}

/* ================================================================
   9. ADMIN MOBILE RESPONSIVENESS — SIDEBAR FIX
   
   On mobile (≤900px), the sidebar takes multiple rows of vertical
   space because of flex-wrap. Fix: make it a single-row horizontal
   scrollable nav bar at the top.
   ================================================================ */

@media (max-width: 900px) {
  /* Admin layout stacks vertically and fills viewport */
  .admin-layout {
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* Sidebar becomes a compact horizontal top bar */
  .admin-sidebar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;           /* Single row - no wrapping */
    overflow-x: auto !important;           /* Horizontal scroll for many items */
    overflow-y: hidden !important;
    max-height: 52px !important;
    min-height: 52px !important;
    width: 100% !important;
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-gold) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    align-items: stretch !important;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .admin-sidebar::-webkit-scrollbar {
    display: none !important;
  }

  /* Hide the logo / Admin Panel title section on mobile */
  .admin-sidebar > div:first-child {
    display: none !important;
  }

  /* Nav inside sidebar — horizontal row */
  .admin-sidebar > nav {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Individual nav links in sidebar */
  .admin-sidebar a {
    flex: 0 0 auto !important;
    min-width: 48px !important;
    width: auto !important;
    padding: 0.3rem 0.6rem !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
    font-size: 0.62rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    height: 52px !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  /* Active state — gold bottom border instead of left border */
  .admin-sidebar a[style*="border-left: 3px solid"] {
    border-left: none !important;
    border-bottom: 2px solid var(--gold) !important;
    background: rgba(212, 164, 55, 0.08) !important;
  }

  /* Icon inside nav link */
  .admin-sidebar a i {
    font-size: 0.9rem !important;
    width: auto !important;
  }

  /* Hide the sidebar collapse toggle button on mobile */
  .admin-sidebar > button:last-child {
    display: none !important;
  }

  /* Admin content area fills remaining height with scroll */
  .admin-content {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 52px) !important;
  }

  /* Admin header inside content area */
  .admin-content > header {
    flex-shrink: 0 !important;
  }

  /* Admin main scrollable area */
  .admin-content > main {
    flex: 1 !important;
    overflow-y: auto !important;
  }
}

/* ================================================================
   10. ADMIN MOBILE — TABLE & CARD IMPROVEMENTS
   ================================================================ */

@media (max-width: 900px) {
  /* Make tables scroll horizontally in glass cards */
  .glass-card {
    overflow-x: auto !important;
  }

  /* Ensure tables have minimum width for readability */
  .admin-content table {
    min-width: 560px;
  }

  /* Reduce admin form padding on small screens */
  .admin-content [style*="padding: 2rem"],
  .admin-content [style*="padding:2rem"] {
    padding: 1rem !important;
  }

  .admin-content [style*="padding: 1.5rem"],
  .admin-content [style*="padding:1.5rem"] {
    padding: 0.75rem !important;
  }
}

/* ================================================================
   11. GENERAL MOBILE IMPROVEMENTS
   ================================================================ */

/* Prevent horizontal overflow on all pages */
@media (max-width: 768px) {
  .page-wrapper {
    overflow-x: hidden;
  }

  /* Make service rows stack on mobile */
  .svc-row {
    grid-template-columns: 1fr !important;
  }

  .svc-content {
    order: 1 !important;
  }

  /* Two-column layouts stack on mobile */
  .about-2col {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Contact page two-column */
  [style*="contact-grid"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Any 2-column inline grid should stack on mobile */
  .page-wrapper > section:not(:first-of-type) [style*="grid-template-columns: 1fr 1fr"],
  .page-wrapper > section:not(:first-of-type) [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   12. LIGHT THEME — FORCE DARK TEXT ON CONTENT SECTIONS
   ================================================================ */

[data-theme=light] .page-wrapper > section:not(:first-of-type) {
  --white: #111111;
  --white-80: rgba(17, 17, 17, 0.85);
  --white-50: rgba(17, 17, 17, 0.65);
  --white-40: rgba(17, 17, 17, 0.55);
  --white-30: rgba(17, 17, 17, 0.42);
  --white-20: rgba(17, 17, 17, 0.28);
}

/* Ensure all generic text tags are dark */
[data-theme=light] .page-wrapper > section:not(:first-of-type) p,
[data-theme=light] .page-wrapper > section:not(:first-of-type) h1,
[data-theme=light] .page-wrapper > section:not(:first-of-type) h2,
[data-theme=light] .page-wrapper > section:not(:first-of-type) h3,
[data-theme=light] .page-wrapper > section:not(:first-of-type) h4,
[data-theme=light] .page-wrapper > section:not(:first-of-type) h5,
[data-theme=light] .page-wrapper > section:not(:first-of-type) h6,
[data-theme=light] .page-wrapper > section:not(:first-of-type) li,
[data-theme=light] .page-wrapper > section:not(:first-of-type) span {
  color: #111 !important;
}

/* Target elements with explicit white color inline styles */
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color: var(--white)"],
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color:var(--white)"],
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color: #fff"],
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color:#fff"],
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color: white"],
[data-theme=light] .page-wrapper > section:not(:first-of-type) [style*="color:white"] {
  color: #111 !important;
}

/* But keep gold icons gold */
[data-theme=light] .page-wrapper > section:not(:first-of-type) svg,
[data-theme=light] .page-wrapper > section:not(:first-of-type) .lucide {
  color: var(--gold) !important;
}

/* ================================================================
   13. ADMIN SIDEBAR — FORCE EXPANDED ON DESKTOP
   
   The React admin sidebar has a collapse toggle button that stores
   its state. On desktop (≥ 901px) we always force the full sidebar
   width so labels remain visible. Users can still collapse on mobile.
   ================================================================ */

@media (min-width: 901px) {
  /* Always show full sidebar width — override React's inline width:56px */
  .admin-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex-shrink: 0 !important;
  }

  /* Always show the logo/header section */
  .admin-sidebar > div:first-child {
    display: flex !important;
  }

  /* Always show link text spans (React hides them when collapsed) */
  .admin-sidebar a span,
  .admin-sidebar a > span {
    display: inline !important;
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
  }

  /* Keep nav links in their normal vertical row layout */
  .admin-sidebar > nav {
    flex-direction: column !important;
  }

  /* Keep the sidebar collapse button visible but user can't really collapse */
  .admin-sidebar > button:last-child {
    display: flex !important;
  }
}

/* ================================================================
   14. ADMIN SIDEBAR — BULK SLOTS INJECTED LINK
   Styles for the Bulk Slots link injected via JS in index.html.
   ================================================================ */

#admin-bulk-slots-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

#admin-bulk-slots-link:hover {
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
  border-left-color: #4f46e5;
}

#admin-bulk-slots-link i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ================================================================
   15. LIGHT THEME — FAINT BACKGROUND TEXTS (PROCESS, PRICING, Since 2006)
   ================================================================ */

[data-theme=light] .page-wrapper [style*="user-select: none"][style*="pointer-events: none"],
[data-theme=light] .page-wrapper [style*="userSelect: none"][style*="pointerEvents: none"],
[data-theme=light] .page-wrapper [style*="pointer-events:none"][style*="user-select:none"],
[data-theme=light] .page-wrapper [style*="pointer-events: none"][style*="user-select: none"] {
  color: rgba(212, 164, 55, 0.04) !important;
  opacity: 0.15 !important;
}

/* ================================================================
   16. CUSTOM WHITE LIGHT THEME OVERRIDES
   ================================================================ */
[data-theme=light] {
  --bg: #ffffff !important;
  --bg-2: #ffffff !important;
  --bg-3: #fafafa !important;
  --bg-card: #ffffff !important;
  --nav-bg: #ffffff !important;
  --topbar-bg: #ffffff !important;
  --footer-bg: #ffffff !important;
  --footer-border: #e5e7eb !important;
  --hero-bg: #ffffff !important;
  --hero-overlay: rgba(255, 255, 255, 0.95) !important;
  --cta-bg: #fafafa !important;
  --logo-bg: #ffffff !important;
  --divider-color: #e5e7eb !important;
  --white: #111111 !important;
  --white-80: #222222 !important;
  --white-50: #4b5563 !important;
  --white-30: #9ca3af !important;
  --white-20: #d1d5db !important;
  --border-gold: #b8880f !important;
  --border-gold-hover: #8a6000 !important;
}

/* Ensure body background is white */
body[data-theme=light],
[data-theme=light] body,
[data-theme=light] .page-wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #111111 !important;
}

/* Enhance form fields, inputs, and dropdowns for contrast */
[data-theme=light] input,
[data-theme=light] select,
[data-theme=light] textarea,
[data-theme=light] .admin-inp {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #9ca3af !important;
  border-radius: 6px !important;
}

[data-theme=light] input:focus,
[data-theme=light] select:focus,
[data-theme=light] textarea:focus,
[data-theme=light] .admin-inp:focus {
  border-color: #b8880f !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(184, 136, 15, 0.2) !important;
}

[data-theme=light] select option {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* Table Contrast Improvements */
[data-theme=light] table {
  background-color: #ffffff !important;
  color: #111111 !important;
}

[data-theme=light] table th {
  background-color: #fafafa !important;
  color: #111111 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #e5e7eb !important;
}

[data-theme=light] table td {
  border-bottom: 1px solid #e5e7eb !important;
  color: #222222 !important;
}

[data-theme=light] tr:hover {
  background-color: #f9fafb !important;
}

/* Admin Specific Panel Adjustments */
[data-theme=light] .admin-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
}

[data-theme=light] .admin-sidebar a {
  color: #374151 !important;
}

[data-theme=light] .admin-sidebar a:hover {
  background-color: #f3f4f6 !important;
  color: #b8880f !important;
}

[data-theme=light] .admin-sidebar a[style*="border-left"] {
  background-color: #fdfaf2 !important;
  color: #b8880f !important;
  border-left-color: #b8880f !important;
}

[data-theme=light] .admin-content header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Glass cards in light theme - make them clean white cards */
[data-theme=light] .glass-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Booking forms, step contents, modal forms */
[data-theme=light] .bfw-step,
[data-theme=light] [class*="booking"] input,
[data-theme=light] [class*="booking"] select,
[data-theme=light] [class*="booking"] textarea {
  color: #111111 !important;
  background-color: #ffffff !important;
}

/* ================================================================
   17. CALENDAR LIGHT THEME CONTRAST FIXES
   ================================================================ */
[data-theme=light] .bfw-calendar-grid button,
[data-theme=light] .calendar-grid button,
[data-theme=light] [class*="calendar"] button,
[data-theme=light] [class*="Calendar"] button,
[data-theme=light] .rdp-day,
[data-theme=light] .react-calendar__tile,
[data-theme=light] button[style*="fontFamily"][style*="border"],
[data-theme=light] [style*="grid-template-columns: repeat(7, 1fr)"] > div,
[data-theme=light] [style*="grid-template-columns:repeat(7,1fr)"] > div {
  color: #111111 !important;
}

/* Specific styling for available, selected, and unavailable states */
[data-theme=light] [style*="grid-template-columns: repeat(7, 1fr)"] > div[title="Unavailable"],
[data-theme=light] [style*="grid-template-columns:repeat(7,1fr)"] > div[title="Unavailable"] {
  color: rgba(0, 0, 0, 0.25) !important;
}

[data-theme=light] [style*="grid-template-columns: repeat(7, 1fr)"] > div[title="Available"],
[data-theme=light] [style*="grid-template-columns:repeat(7,1fr)"] > div[title="Available"] {
  color: #2e7d32 !important; /* Dark green for visibility */
  background-color: rgba(76, 175, 80, 0.15) !important;
}

[data-theme=light] [style*="grid-template-columns: repeat(7, 1fr)"] > div[style*="background: var(--gold)"],
[data-theme=light] [style*="grid-template-columns:repeat(7,1fr)"] > div[style*="background:var(--gold)"],
[data-theme=light] [style*="grid-template-columns: repeat(7, 1fr)"] > div[style*="background: #d4a437"],
[data-theme=light] [style*="grid-template-columns:repeat(7,1fr)"] > div[style*="background:#d4a437"] {
  color: #000000 !important;
  background-color: var(--gold) !important;
}

/* Day labels (Ma, Ti, On...) */
[data-theme=light] [style*="color: rgba(255, 255, 255, 0.4)"],
[data-theme=light] [style*="color:rgba(255,255,255,0.4)"] {
  color: #4b5563 !important;
}

/* Unavailable / Disabled dates in calendar */
[data-theme=light] [class*="calendar"] button:disabled,
[data-theme=light] [class*="Calendar"] button:disabled,
[data-theme=light] [class*="calendar"] button[disabled],
[data-theme=light] [class*="Calendar"] button[disabled],
[data-theme=light] button[disabled][style*="border-color"] {
  color: #cccccc !important;
  background-color: transparent !important;
  opacity: 0.35 !important;
}

/* ================================================================
   18. ADMIN ADD BOOKING FORM LIGHT THEME VISIBILITY
   ================================================================ */
[data-theme=light] .admin-content form label,
[data-theme=light] .admin-content label,
[data-theme=light] .admin-content legend,
[data-theme=light] .admin-content .form-label,
[data-theme=light] .admin-content [style*="color: rgba(255, 255, 255, 0.5)"],
[data-theme=light] .admin-content [style*="color:rgba(255,255,255,0.5)"] {
  color: #111111 !important;
  font-weight: 500 !important;
}

/* Form section headers and placeholders */
[data-theme=light] .admin-content h1,
[data-theme=light] .admin-content h2,
[data-theme=light] .admin-content h3,
[data-theme=light] .admin-content h4,
[data-theme=light] .admin-content p {
  color: #111111 !important;
}

[data-theme=light] .admin-content input::placeholder,
[data-theme=light] .admin-content textarea::placeholder {
  color: #9ca3af !important;
}

/* ================================================================
   19. ADMIN FINANCE DASHBOARD LIGHT THEME VISIBILITY & CONTRAST
   ================================================================ */
[data-theme=light] .finance-card,
[data-theme=light] [class*="stat-card"],
[data-theme=light] [class*="card"],
[data-theme=light] .admin-content [style*="background: rgba(255, 255, 255, 0.03)"],
[data-theme=light] .admin-content [style*="background:rgba(255,255,255,0.03)"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Labels and subtext inside dashboards */
[data-theme=light] .admin-content [style*="color: rgba(255, 255, 255, 0.4)"],
[data-theme=light] .admin-content [style*="color:rgba(255,255,255,0.4)"] {
  color: #4b5563 !important;
}

/* Dashboard stat values */
[data-theme=light] .stat-value,
[data-theme=light] [class*="stat-value"],
[data-theme=light] .admin-content [style*="font-size: 2.25rem"],
[data-theme=light] .admin-content [style*="fontSize: 2.25rem"] {
  color: #b8880f !important;
  font-weight: 700 !important;
}

/* Chart titles / card headings */
[data-theme=light] .admin-content [style*="font-size: 1.125rem"],
[data-theme=light] .admin-content [style*="fontSize: 1.125rem"] {
  color: #111111 !important;
  font-weight: 600 !important;
}