/* Bookeper AI — Custom Fider Theme v5
   Design System: Premium Playful (Warm Cream + Gold-Yellow)
   Fonts: Satoshi (headings) + DM Sans (body)
   Strategy: Force light mode unconditionally, defeat Dark Reader,
             override dark-theme utility classes */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   0. DEFEAT DARK READER & FORCE LIGHT MODE
   ═══════════════════════════════════════════
   color-scheme: light only — tells browsers and extensions
   (Dark Reader, etc.) this page only supports light mode.
   The meta tag equivalent is <meta name="color-scheme" content="light only">
   but since we can only inject CSS (not HTML), the CSS property works. */
html {
  color-scheme: light only !important;
}

/* Unconditional body styling — applies regardless of data-theme value */
body {
  background-color: #f7f4ef !important;
  color: #262225 !important;
}

/* ═══════════════════════════════════════════
   1. FORCE LIGHT CSS VARIABLES ON ANY THEME
   ═══════════════════════════════════════════ */
html,
body,
body[data-theme="dark"],
body[data-theme="light"] {
  --colors-gray-50: #faf8f5 !important;
  --colors-gray-100: #f7f4ef !important;
  --colors-gray-200: #eeebe5 !important;
  --colors-gray-300: #e0dcd5 !important;
  --colors-gray-400: #d2cdc5 !important;
  --colors-gray-500: #b8b0a8 !important;
  --colors-gray-600: #8a8078 !important;
  --colors-gray-700: #6b6058 !important;
  --colors-gray-800: #4a3f38 !important;
  --colors-gray-900: #262225 !important;

  --colors-green-50: #f0fdf4 !important;
  --colors-green-100: #dcfce7 !important;
  --colors-green-200: #bbf7d0 !important;
  --colors-green-300: #86efac !important;
  --colors-green-400: #4ade80 !important;
  --colors-green-500: #22c55e !important;
  --colors-green-600: #16a34a !important;
  --colors-green-700: #15803d !important;
  --colors-green-800: #166534 !important;
  --colors-green-900: #14532d !important;

  --colors-yellow-50: #fffbeb !important;
  --colors-yellow-100: #fef3c7 !important;
  --colors-yellow-200: #fde68a !important;
  --colors-yellow-300: #fcd34d !important;
  --colors-yellow-400: #fbbf24 !important;
  --colors-yellow-500: #f59e0b !important;
  --colors-yellow-600: #d97706 !important;
  --colors-yellow-700: #b45309 !important;
  --colors-yellow-800: #92400e !important;
  --colors-yellow-900: #78350f !important;

  --colors-blue-50: #f0f9ff !important;
  --colors-blue-100: #f2f2ff !important;
  --colors-blue-200: #c2c4ff !important;
  --colors-blue-300: #909bfd !important;
  --colors-blue-400: #5e76f7 !important;
  --colors-blue-500: #2d57ed !important;
  --colors-blue-600: #0f3ebb !important;
  --colors-blue-700: #03308a !important;
  --colors-blue-800: #002358 !important;
  --colors-blue-900: #001126 !important;

  --colors-red-50: #fef2f2 !important;
  --colors-red-100: #fee2e2 !important;
  --colors-red-200: #fecaca !important;
  --colors-red-300: #fca5a5 !important;
  --colors-red-400: #f87171 !important;
  --colors-red-500: #ef4444 !important;
  --colors-red-600: #dc2626 !important;
  --colors-red-700: #b91c1c !important;
  --colors-red-800: #991b1b !important;
  --colors-red-900: #7f1d1d !important;

  --colors-white: #fff !important;
  --colors-black: #262225 !important;

  --primary-color: #d4a90a !important;
  --primary-color-dark: #b8920a !important;
  --primary-color-light: #ffe566 !important;
  --colors-primary-light: #ffe566 !important;
  --colors-primary-base: #d4a90a !important;
  --colors-primary-dark: #b8920a !important;
}

/* ═══════════════════════════════════════════
   2. OVERRIDE ALL DARK UTILITY CLASSES
   ═══════════════════════════════════════════ */

/* -- Backgrounds (unconditional + dark-theme) -- */
.bg-white { background-color: #fff !important; }
.bg-gray-50 { background-color: #faf8f5 !important; }
.bg-gray-100 { background-color: #f7f4ef !important; }
.hover\:bg-gray-100:hover { background-color: #f7f4ef !important; }
.bg-gray-200 { background-color: #eeebe5 !important; }
.hover\:bg-gray-200:hover { background-color: #eeebe5 !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-green-300 { background-color: #86efac !important; }
.bg-yellow-100 { background-color: #fef3c7 !important; }
.bg-blue-50 { background-color: #f0f9ff !important; }
.bg-blue-100 { background-color: #f2f2ff !important; }
.hover\:bg-blue-200:hover { background-color: #c2c4ff !important; }
.bg-red-100 { background-color: #fee2e2 !important; }

body[data-theme="dark"] .bg-white { background-color: #fff !important; }
body[data-theme="dark"] .bg-gray-50 { background-color: #faf8f5 !important; }
body[data-theme="dark"] .bg-gray-100 { background-color: #f7f4ef !important; }
body[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #f7f4ef !important; }
body[data-theme="dark"] .bg-gray-200 { background-color: #eeebe5 !important; }
body[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #eeebe5 !important; }
body[data-theme="dark"] .bg-green-100 { background-color: #dcfce7 !important; }
body[data-theme="dark"] .bg-green-300 { background-color: #86efac !important; }
body[data-theme="dark"] .bg-yellow-100 { background-color: #fef3c7 !important; }
body[data-theme="dark"] .bg-blue-50 { background-color: #f0f9ff !important; }
body[data-theme="dark"] .bg-blue-100 { background-color: #f2f2ff !important; }
body[data-theme="dark"] .hover\:bg-blue-200:hover { background-color: #c2c4ff !important; }
body[data-theme="dark"] .bg-red-100 { background-color: #fee2e2 !important; }

/* -- Primary colors (brand gold) -- */
.bg-primary-light { background-color: #ffe566 !important; }
.bg-primary-base { background-color: #FFD60A !important; }
.bg-primary-dark { background-color: #b8920a !important; }
.text-primary-base { color: #b8920a !important; }
.hover\:text-primary-base:hover { color: #8a6d08 !important; }
.border-primary-base { border-color: #d4a90a !important; }

body[data-theme="dark"] .bg-primary-light { background-color: #ffe566 !important; }
body[data-theme="dark"] .bg-primary-base { background-color: #FFD60A !important; }
body[data-theme="dark"] .bg-primary-dark { background-color: #b8920a !important; }
body[data-theme="dark"] .text-primary-base { color: #b8920a !important; }
body[data-theme="dark"] .hover\:text-primary-base:hover { color: #8a6d08 !important; }
body[data-theme="dark"] .border-primary-base { border-color: #d4a90a !important; }

/* -- Text colors (unconditional) -- */
.text-gray-500 { color: #b8b0a8 !important; }
.text-gray-600 { color: #8a8078 !important; }
.text-gray-700 { color: #6b6058 !important; }
.text-gray-800 { color: #4a3f38 !important; }
.text-green-500 { color: #22c55e !important; }
.text-green-600 { color: #16a34a !important; }
.text-green-700 { color: #15803d !important; }
.text-green-800 { color: #166534 !important; }
.text-yellow-500 { color: #f59e0b !important; }
.text-yellow-800 { color: #92400e !important; }
.text-blue-600 { color: #0f3ebb !important; }
.text-blue-700 { color: #03308a !important; }
.text-red-500 { color: #ef4444 !important; }
.text-red-700 { color: #b91c1c !important; }
.text-red-800 { color: #991b1b !important; }

body[data-theme="dark"] .text-gray-500 { color: #b8b0a8 !important; }
body[data-theme="dark"] .text-gray-600 { color: #8a8078 !important; }
body[data-theme="dark"] .text-gray-700 { color: #6b6058 !important; }
body[data-theme="dark"] .text-gray-800 { color: #4a3f38 !important; }
body[data-theme="dark"] .text-green-500 { color: #22c55e !important; }
body[data-theme="dark"] .text-green-600 { color: #16a34a !important; }
body[data-theme="dark"] .text-green-700 { color: #15803d !important; }
body[data-theme="dark"] .text-green-800 { color: #166534 !important; }
body[data-theme="dark"] .text-yellow-500 { color: #f59e0b !important; }
body[data-theme="dark"] .text-yellow-800 { color: #92400e !important; }
body[data-theme="dark"] .text-blue-600 { color: #0f3ebb !important; }
body[data-theme="dark"] .text-blue-700 { color: #03308a !important; }
body[data-theme="dark"] .text-red-500 { color: #ef4444 !important; }
body[data-theme="dark"] .text-red-700 { color: #b91c1c !important; }
body[data-theme="dark"] .text-red-800 { color: #991b1b !important; }

/* -- Borders (unconditional) -- */
.border-gray-200 { border-color: #eeebe5 !important; }
.border-gray-400 { border-color: #d2cdc5 !important; }
.border-gray-800 { border-color: #4a3f38 !important; }
.border-green-400 { border-color: #4ade80 !important; }
.border-green-500 { border-color: #22c55e !important; }
.border-yellow-400 { border-color: #fbbf24 !important; }
.border-blue-200 { border-color: #c2c4ff !important; }
.border-blue-400 { border-color: #5e76f7 !important; }
.border-blue-500 { border-color: #2d57ed !important; }
.border-blue-600 { border-color: #0f3ebb !important; }
.border-red-300 { border-color: #fca5a5 !important; }

body[data-theme="dark"] .border-gray-200 { border-color: #eeebe5 !important; }
body[data-theme="dark"] .border-gray-400 { border-color: #d2cdc5 !important; }
body[data-theme="dark"] .border-gray-800 { border-color: #4a3f38 !important; }
body[data-theme="dark"] .border-green-400 { border-color: #4ade80 !important; }
body[data-theme="dark"] .border-green-500 { border-color: #22c55e !important; }
body[data-theme="dark"] .border-yellow-400 { border-color: #fbbf24 !important; }
body[data-theme="dark"] .border-blue-200 { border-color: #c2c4ff !important; }
body[data-theme="dark"] .border-blue-400 { border-color: #5e76f7 !important; }
body[data-theme="dark"] .border-blue-500 { border-color: #2d57ed !important; }
body[data-theme="dark"] .border-blue-600 { border-color: #0f3ebb !important; }
body[data-theme="dark"] .border-red-300 { border-color: #fca5a5 !important; }

/* ═══════════════════════════════════════════
   3. GENERAL TEXT COLOR CATCH-ALL
   ═══════════════════════════════════════════ */
body,
body p,
body span,
body div,
body label,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body li,
body a { color: #262225; }

body[data-theme="dark"],
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] div,
body[data-theme="dark"] label,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] li,
body[data-theme="dark"] a { color: #262225; }

/* ═══════════════════════════════════════════
   4. TYPOGRAPHY
   ═══════════════════════════════════════════ */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.text-display, .text-display2, .text-title {
  font-family: 'Satoshi', 'DM Sans', sans-serif !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════
   5. BRAND POLISH
   ═══════════════════════════════════════════ */

/* Rounded corners */
.c-vote-counter,
.c-tag-item,
.c-modal-window {
  border-radius: 12px !important;
}

.c-button {
  border-radius: 10px !important;
}

/* Primary buttons → gold */
.c-button.bg-primary-base,
.c-button.hover\:bg-primary-dark:hover {
  background-color: #FFD60A !important;
  border-color: #FFD60A !important;
  color: #262225 !important;
  font-weight: 600;
}

/* Links → gold */
a:not(.c-button) { color: #b8920a !important; }
a:not(.c-button):hover { color: #8a6d08 !important; }

/* Card shadows */
.c-list-item,
[class*="shadow"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* ═══════════════════════════════════════════
   6. HEADER — ALIGN WITH LANDING NAV
   ═══════════════════════════════════════════ */

/* Fixed nav bar with backdrop blur (matches landing) */
#c-header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Logo sizing to match landing (h-10 = 40px) */
.c-menu img {
  max-height: 40px;
  height: 40px;
}

/* Hide "Bookeper" text next to logo — landing shows logo-only */
.c-menu h1.text-header {
  display: none !important;
}

/* Style login link to match landing nav style */
.c-menu a.uppercase {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: #262225 !important;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
  position: relative;
}

.c-menu a.uppercase:hover {
  color: #d4a90a !important;
}

/* Underline hover effect on login link (matches landing nav) */
.c-menu a.uppercase::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #d4a90a;
  transition: width 0.2s ease;
}

.c-menu a.uppercase:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════
   7. HIDE FIDER BRANDING, THEME & RSS TOGGLE
   ═══════════════════════════════════════════ */
.c-powered { display: none !important; }

/* Hide both theme toggle and RSS buttons in header
   Both use .c-themeswitcher class — hide all instances.
   v3 used button[title*="theme"] which didn't work
   because the theme toggle has no title attribute. */
.c-themeswitcher { display: none !important; }


/* ═══════════════════════════════════════════
   8. DROPDOWN PANEL FIX (PROFILE/USER MENU)
   ═══════════════════════════════════════════ */
#c-header,
#c-header .c-menu,
#c-header .c-dropdown {
  overflow: visible !important;
}

#c-header .c-dropdown__list {
  z-index: 1200 !important;
  max-height: min(80vh, 420px) !important;
  overflow-y: auto !important;
}

@media only screen and (max-width: 768px) {
  #c-header .c-dropdown__list {
    position: fixed !important;
    top: 72px !important;
    right: 12px !important;
    left: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}