/* =================================================================
   NSFW-WOMEN.CSS - FemVerteller Theme (Light Pastel Edition)
   =================================================================
   Elegant, warm, verfijnd design met lichte pastel tinten.
   Rose accenten, serif typography, vrouwelijke uitstraling.
   ================================================================= */

:root {
    /* Primaire kleuren - Dusty rose & pastel */
    --color-primary: #D4849A;
    --color-primary-hover: #C06B82;
    --color-secondary: #E8A4B4;
    --color-accent: #B8D4E3;

    /* Achtergronden - Licht & warm */
    --color-bg: #FDF8F7;
    --color-bg-alt: #F9F3F2;
    --color-surface: #FFFFFF;
    --color-surface-hover: #FFF5F3;
    --color-surface-active: #FFEDEA;

    /* Tekst - Donker voor contrast */
    --color-text: #3D3D3D;
    --color-text-muted: #6B6B6B;
    --color-text-dim: #9B9B9B;

    /* Borders - Warm lichtgrijs */
    --color-border: #E8DDD9;
    --color-border-light: #F0E6E3;

    /* Status kleuren - Zacht */
    --color-success: #7BC9A8;
    --color-warning: #E8C97D;
    --color-error: #E8A4A4;
    --color-info: #A4C5E8;

    /* Chat specifiek */
    --color-msg-user: #FFF0F3;
    --color-msg-user-border: #E8C5CC;
    --color-msg-ai: #FFFFFF;
    --color-msg-ai-border: #F0E6E3;

    /* Typography - Elegant serif */
    --font-display: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    --font-body: 'Lora', 'Georgia', serif;

    /* Ronde, zachte hoeken */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;

    /* Zachte schaduwen - pastel roze tint */
    --shadow-sm: 0 1px 3px 0 rgba(212, 132, 154, 0.08);
    --shadow-md: 0 4px 8px -1px rgba(212, 132, 154, 0.12);
    --shadow-lg: 0 10px 20px -3px rgba(212, 132, 154, 0.15);
}

/* -----------------------------------------------------------------
   Body & Background
   ----------------------------------------------------------------- */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);  /* Lora serif voor hele site */
}

/* Alle tekst elementen - serif */
p, span, li, td, th, label, input, textarea, select, button {
    font-family: var(--font-body);
}

/* Subtiele lichte gradient overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at top right, rgba(232, 164, 180, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(184, 212, 227, 0.10) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* -----------------------------------------------------------------
   Navigation - Elegant
   ----------------------------------------------------------------- */
nav {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.nav-link {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 1rem;           /* Minimum 16px voor serif leesbaarheid */
    font-weight: 500;
    letter-spacing: 0.015em;   /* Iets meer ruimte voor serif */
    border-radius: var(--radius-lg);
    transition: all 200ms ease;
}

/* Mobile: iets groter voor betere touch leesbaarheid */
@media (max-width: 768px) {
    .nav-link {
        font-size: 1.0625rem;  /* 17px op mobile */
    }
}

.nav-link:hover {
    color: var(--color-text);
    background-color: rgba(212, 132, 154, 0.1);
}

.nav-link.active {
    color: var(--color-primary);
    background-color: rgba(212, 132, 154, 0.15);
}

/* -----------------------------------------------------------------
   Typography Overrides
   ----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

h1 {
    font-weight: 600;
    font-style: italic;
}

/* -----------------------------------------------------------------
   Cards - Verfijnd met zachte schaduwen
   ----------------------------------------------------------------- */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card-hover:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* -----------------------------------------------------------------
   Buttons - Elegant
   ----------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(212, 132, 154, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
    box-shadow: 0 6px 20px 0 rgba(212, 132, 154, 0.35);
}

.btn-secondary {
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: rgba(212, 132, 154, 0.1);
}

/* -----------------------------------------------------------------
   Chat - Licht & warm
   ----------------------------------------------------------------- */
.chat-container {
    background-color: var(--color-bg);
}

.msg-user {
    background: linear-gradient(135deg, #FFF5F7 0%, #FFF0F3 100%);
    border: 1px solid var(--color-msg-user-border);
    border-radius: var(--radius-xl);
}

.msg-ai {
    background-color: var(--color-msg-ai);
    border: 1px solid var(--color-msg-ai-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* Serif font voor verhaal tekst */
.msg-ai .story-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
}

.chat-input {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    color: var(--color-text);
}

.chat-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(212, 132, 154, 0.2);
}

/* Placeholder styling */
.chat-input::placeholder {
    color: var(--color-text-dim);
}

/* -----------------------------------------------------------------
   Form Elements
   ----------------------------------------------------------------- */
input, textarea, select {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    color: var(--color-text);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(212, 132, 154, 0.2);
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-dim);
}

/* -----------------------------------------------------------------
   Badges
   ----------------------------------------------------------------- */
.badge {
    border-radius: 9999px;
    font-family: var(--font-body);
    font-weight: 500;
}

.badge-primary {
    background: linear-gradient(135deg, rgba(212, 132, 154, 0.2) 0%, rgba(232, 164, 180, 0.2) 100%);
    color: var(--color-primary-hover);
}

/* -----------------------------------------------------------------
   Scrollbar - Elegant & subtiel
   ----------------------------------------------------------------- */
::-webkit-scrollbar-track {
    background: var(--color-bg-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* -----------------------------------------------------------------
   Special Elements
   ----------------------------------------------------------------- */

/* Decoratieve elementen */
.decor-heart::before {
    content: '\2665';
    color: var(--color-primary);
    margin-right: 0.5rem;
}

/* Elegant divider */
.divider-elegant {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-text-dim);
}

.divider-elegant::before,
.divider-elegant::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Soft glow effect */
.glow-rose {
    box-shadow: 0 0 20px rgba(212, 132, 154, 0.25);
}

/* Subtle hover */
.hover-rose:hover {
    background-color: rgba(212, 132, 154, 0.1);
}

/* -----------------------------------------------------------------
   Animations
   ----------------------------------------------------------------- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-surface-hover) 50%,
        var(--color-surface) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-gentle-pulse {
    animation: gentle-pulse 3s ease-in-out infinite;
}

/* -----------------------------------------------------------------
   Reading Mode Enhancements
   ----------------------------------------------------------------- */
.reading-mode {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--color-text);
    max-width: 65ch;
    margin: 0 auto;
}

.reading-mode p {
    margin-bottom: 1.5rem;
    text-indent: 1.5rem;
}

.reading-mode p:first-of-type {
    text-indent: 0;
}

.reading-mode p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3rem;
    float: left;
    line-height: 1;
    padding-right: 0.5rem;
    color: var(--color-primary);
}

/* -----------------------------------------------------------------
   Light Theme Specific Overrides
   ----------------------------------------------------------------- */

/* Links */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-hover);
}

/* Selection color */
::selection {
    background-color: rgba(212, 132, 154, 0.3);
    color: var(--color-text);
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Tables - if used */
table {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

th {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
}

td {
    border-top: 1px solid var(--color-border-light);
}

/* Code blocks - if used in stories */
code {
    background-color: var(--color-bg-alt);
    color: var(--color-primary-hover);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

pre {
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

/* Blockquotes - elegant styling */
blockquote {
    border-left: 3px solid var(--color-primary);
    background-color: var(--color-surface-hover);
    padding: 1rem 1.5rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-muted);
}

/* =================================================================
   TAILWIND OVERRIDES - Light Theme Compatibility
   =================================================================
   Override hardcoded Tailwind dark classes to work with light theme.
   This ensures all pages display correctly without template changes.
   ================================================================= */

/* -----------------------------------------------------------------
   Background Overrides (dark -> light)
   ----------------------------------------------------------------- */
.bg-gray-900 {
    background-color: var(--color-bg) !important;
}

.bg-gray-800 {
    background-color: var(--color-surface) !important;
    box-shadow: var(--shadow-sm);
}

.bg-gray-700 {
    background-color: var(--color-bg-alt) !important;
}

.bg-gray-700\/50, .bg-gray-800\/50 {
    background-color: rgba(249, 243, 242, 0.8) !important;
}

.hover\:bg-gray-600:hover {
    background-color: var(--color-surface-hover) !important;
}

.hover\:bg-gray-700:hover {
    background-color: var(--color-surface-hover) !important;
}

/* -----------------------------------------------------------------
   Text Color Overrides (light text -> dark text)
   ----------------------------------------------------------------- */
.text-white {
    color: var(--color-text) !important;
}

.text-gray-100, .text-gray-200 {
    color: var(--color-text) !important;
}

.text-gray-300 {
    color: var(--color-text-muted) !important;
}

.text-gray-400 {
    color: var(--color-text-muted) !important;
}

.text-gray-500 {
    color: var(--color-text-dim) !important;
}

.text-gray-600 {
    color: var(--color-text-dim) !important;
}

/* -----------------------------------------------------------------
   Border Overrides
   ----------------------------------------------------------------- */
.border-gray-700, .border-gray-600 {
    border-color: var(--color-border) !important;
}

.border-gray-500 {
    border-color: var(--color-border-light) !important;
}

.hover\:border-gray-500:hover {
    border-color: var(--color-primary) !important;
}

/* -----------------------------------------------------------------
   Purple -> Dusty Rose (Primary Color)
   Paarse buttons worden roze met WITTE tekst (voldoende contrast)
   ----------------------------------------------------------------- */
.text-purple-400, .text-purple-500 {
    color: var(--color-primary) !important;
}

.text-purple-300 {
    color: var(--color-secondary) !important;
}

.hover\:text-purple-300:hover {
    color: var(--color-primary-hover) !important;
}

/* Paarse buttons - NIET de expandable buttons in chat header */
.bg-purple-600:not(.group) {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(212, 132, 154, 0.25);
    color: white !important;
}

.bg-purple-700:not(.group) {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* KRITIEK: Override text-white terug naar wit voor paarse/roze buttons */
.bg-purple-600.text-white,
.bg-purple-700.text-white,
.bg-purple-600 .text-white,
.bg-purple-700 .text-white,
[class*="bg-purple-6"] .text-white,
[class*="bg-purple-7"] .text-white {
    color: white !important;
}

/* Hover voor paarse buttons - NIET de expandable buttons */
.hover\:bg-purple-600:hover:not(.group),
.hover\:bg-purple-700:hover:not(.group) {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%) !important;
    color: white !important;
}

.border-purple-500, .border-purple-600 {
    border-color: var(--color-primary) !important;
}

.ring-purple-500 {
    --tw-ring-color: var(--color-primary) !important;
}

.focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(212, 132, 154, 0.5) !important;
}

/* -----------------------------------------------------------------
   Status Colors - Pastel versions with good contrast
   ----------------------------------------------------------------- */

/* ===========================================
   GREEN BUTTONS - Pastel mint met goede leesbaarheid
   Gebruikt voor: Auto-detecteer, Genereer Verhaal, Accepteer, etc.
   =========================================== */
.bg-green-600, .bg-green-700, .bg-green-900 {
    background-color: #A8D5BA !important;  /* Pastel mint groen */
    color: #2D5A3D !important;  /* Donkergroene tekst voor contrast */
}

.bg-green-600.text-white,
.bg-green-700.text-white,
.bg-green-600 .text-white,
.bg-green-700 .text-white {
    color: #2D5A3D !important;  /* Override text-white naar donkergroen */
}

.hover\:bg-green-600:hover,
.hover\:bg-green-700:hover {
    background-color: #8FC9A3 !important;  /* Iets donkerder mint bij hover */
    color: #1E4029 !important;  /* Nog donkerder tekst bij hover */
}

.text-green-200, .text-green-300 {
    color: #4A9A7C !important;
}

/* ===========================================
   BLUE BUTTONS - Pastel blauw met goede leesbaarheid
   Gebruikt voor: Characters, Bewerk, Detecteer Scenes, etc.
   =========================================== */
.bg-blue-600, .bg-blue-700, .bg-blue-900 {
    background-color: #A8C8E8 !important;  /* Pastel lichtblauw */
    color: #2D4A6D !important;  /* Donkerblauwe tekst voor contrast */
}

.bg-blue-600.text-white,
.bg-blue-700.text-white,
.bg-blue-600 .text-white,
.bg-blue-700 .text-white {
    color: #2D4A6D !important;  /* Override text-white naar donkerblauw */
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: #8FB8DC !important;  /* Iets donkerder blauw bij hover */
    color: #1E3650 !important;  /* Nog donkerder tekst bij hover */
}

.text-blue-200, .text-blue-300 {
    color: #5B8AB8 !important;
}

/* ===========================================
   YELLOW/WARNING - Pastel geel
   =========================================== */
.bg-yellow-700, .bg-yellow-900 {
    background-color: rgba(232, 201, 125, 0.3) !important;
}

.bg-yellow-900\/50 {
    background-color: rgba(232, 201, 125, 0.2) !important;
}

.text-yellow-200, .text-yellow-300 {
    color: #8B7330 !important;
}

.border-yellow-700 {
    border-color: rgba(232, 201, 125, 0.6) !important;
}

/* ===========================================
   RED BUTTONS - Pastel rood/koraal
   =========================================== */
.bg-red-600, .bg-red-700, .bg-red-900 {
    background-color: #E8B4B4 !important;  /* Pastel koraal */
    color: #8B3A3A !important;  /* Donkerrode tekst */
}

.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover,
.hover\:bg-red-900:hover {
    background-color: #DCA0A0 !important;
    color: #6B2A2A !important;
}

.text-red-200, .text-red-300, .text-red-400 {
    color: #C06B6B !important;
}

/* ===========================================
   AMBER/PUBLISH BUTTONS - Rose thema (primary)
   =========================================== */
.bg-amber-600, .bg-amber-700 {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.hover\:bg-amber-600:hover,
.hover\:bg-amber-700:hover {
    background-color: var(--color-primary-hover) !important;
    color: white !important;
}

/* -----------------------------------------------------------------
   Footer Override
   ----------------------------------------------------------------- */
footer, [class*="contentinfo"] {
    background-color: var(--color-bg-alt) !important;
    border-top: 1px solid var(--color-border);
}

footer h3, footer h4 {
    color: var(--color-text) !important;
}

footer a {
    color: var(--color-text-muted) !important;
}

footer a:hover {
    color: var(--color-primary) !important;
}

footer p {
    color: var(--color-text-dim) !important;
}

/* -----------------------------------------------------------------
   Cookie Banner Override
   ----------------------------------------------------------------- */
#cookie-banner, [class*="cookie"] {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

/* -----------------------------------------------------------------
   Chat Page Specifics
   ----------------------------------------------------------------- */
.chat-dark {
    background-color: var(--color-bg) !important;
}

#chat-messages {
    background-color: var(--color-bg) !important;
}

#chat-container {
    background-color: var(--color-bg) !important;
}

/* Chat header and input areas */
.chat-dark > div:first-child,
.chat-dark > div:last-child {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

/* Message bubbles in chat */
.chat-dark .msg-user {
    background: linear-gradient(135deg, #FFF5F7 0%, #FFF0F3 100%) !important;
    border-color: var(--color-msg-user-border) !important;
}

.chat-dark .msg-ai {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-light) !important;
}

/* -----------------------------------------------------------------
   Modal Overrides
   ----------------------------------------------------------------- */
[class*="bg-black"][class*="bg-opacity"] {
    background-color: rgba(61, 61, 61, 0.5) !important;
}

/* Modal content */
.bg-gray-800.rounded-xl {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border);
}

/* -----------------------------------------------------------------
   Expandable Buttons Override (chat header)
   Pastel outlined style with better contrast
   ----------------------------------------------------------------- */
.group.flex.items-center.bg-purple-700,
.group.flex.items-center.bg-blue-700,
.group.flex.items-center.bg-green-700,
.group.flex.items-center.bg-amber-700 {
    background-color: var(--color-surface) !important;
    border: 1.5px solid var(--color-border) !important;
    color: var(--color-text) !important;
    box-shadow: var(--shadow-sm);
}

.group.flex.items-center.bg-purple-700:hover,
.group.flex.items-center.bg-blue-700:hover,
.group.flex.items-center.bg-green-700:hover,
.group.flex.items-center.bg-amber-700:hover {
    background-color: var(--color-surface-hover) !important;
    border-color: var(--color-primary) !important;
}

/* -----------------------------------------------------------------
   NSFW Badge - Make it softer
   ----------------------------------------------------------------- */
.badge-error {
    background-color: rgba(212, 132, 154, 0.2) !important;
    color: var(--color-primary-hover) !important;
}

/* -----------------------------------------------------------------
   Select dropdowns in chat header
   ----------------------------------------------------------------- */
select.bg-gray-700 {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* -----------------------------------------------------------------
   Suggestions panel
   ----------------------------------------------------------------- */
#suggestions-panel {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: var(--color-border) !important;
}

#suggestions-panel button {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

#suggestions-panel button:hover {
    background-color: var(--color-surface-hover) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text) !important;
}

/* -----------------------------------------------------------------
   SETTINGS PAGE - Contrast Fixes for Light Theme
   Badges, tags, en summaries hebben extra contrast nodig
   ----------------------------------------------------------------- */

/* Intensity buttons - geselecteerde staat */
.intensity-btn.border-purple-500 {
    border-color: var(--color-primary) !important;
    background-color: rgba(212, 132, 154, 0.15) !important;
    color: var(--color-primary-hover) !important;  /* #C06B82 - donkerder roze */
}

/* Niet-geselecteerde intensity buttons */
.intensity-btn.border-gray-600 {
    border-color: var(--color-border) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text-muted) !important;  /* #6B6B6B - goed leesbaar */
}

.intensity-btn:hover {
    border-color: var(--color-primary) !important;
    background-color: var(--color-surface-hover) !important;
}

/* Genre badges - paars/roze met goed contrast */
.bg-purple-900\/50 {
    background-color: rgba(212, 132, 154, 0.2) !important;  /* Licht roze achtergrond */
}

.bg-purple-900\/50.text-purple-300,
[class*="bg-purple-900/50"] .text-purple-300,
span.text-purple-300 {
    color: #9A4A5E !important;  /* Donker dusty rose - WCAG AA compliant */
}

/* Blocked tags badges - rood met goed contrast */
.bg-red-900\/50 {
    background-color: rgba(220, 160, 160, 0.3) !important;  /* Licht koraal achtergrond */
}

.bg-red-900\/50.text-red-300,
[class*="bg-red-900/50"] .text-red-300,
span.text-red-300 {
    color: #8B3A3A !important;  /* Donkerrood - WCAG AA compliant */
}

/* Speciale Categorieën - summary tekst */
#lgbtq-summary,
#bdsm-summary,
#fetish-summary,
.bg-gray-700\/30 .text-gray-500,
[class*="bg-gray-700/30"] p.text-gray-500 {
    color: var(--color-text-muted) !important;  /* #6B6B6B - beter contrast dan #9B9B9B */
}

/* Speciale Categorieën - achtergrond cards */
.bg-gray-700\/30 {
    background-color: rgba(232, 221, 217, 0.4) !important;  /* Warm beige, iets donkerder */
    border: 1px solid var(--color-border-light);
}

/* Fallback voor text-purple-300 overal in settings context */
.text-purple-300 {
    color: var(--color-primary-hover) !important;  /* #C06B82 - donkerder voor leesbaarheid */
}

/* -----------------------------------------------------------------
   NEW STORY PAGE - Radio/Checkbox Selection States
   peer-checked styling voor duidelijke visuele feedback
   ----------------------------------------------------------------- */

/* Basis radio/checkbox cards - normale staat */
.peer.sr-only ~ div {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

/* Hover staat - subtiele roze tint */
.peer.sr-only ~ div:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-dim);
}

/* GESELECTEERDE STAAT - duidelijk zichtbare roze achtergrond */
.peer:checked ~ div,
.peer.sr-only:checked ~ div {
    background-color: rgba(212, 132, 154, 0.15) !important;  /* Licht roze */
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
}

/* Specifieke overrides voor peer-checked classes */
.peer-checked\:border-purple-500:is(:checked ~ *),
.peer-checked\:border-green-500:is(:checked ~ *),
.peer-checked\:border-blue-500:is(:checked ~ *) {
    border-color: var(--color-primary) !important;
}

.peer-checked\:bg-gray-700:is(:checked ~ *) {
    background-color: rgba(212, 132, 154, 0.15) !important;
}

/* Provider cards - OpenAI geselecteerd (groen accent) */
input[name="provider"][value="openai"]:checked ~ div {
    background-color: rgba(123, 201, 168, 0.15) !important;
    border-color: #7BC9A8 !important;
    box-shadow: 0 0 0 1px #7BC9A8, var(--shadow-sm);
}

/* Provider cards - xAI geselecteerd (blauw accent) */
input[name="provider"][value="xai"]:checked ~ div {
    background-color: rgba(168, 200, 232, 0.15) !important;
    border-color: #A8C8E8 !important;
    box-shadow: 0 0 0 1px #A8C8E8, var(--shadow-sm);
}

/* Tekst in geselecteerde cards - behoud goede leesbaarheid */
.peer:checked ~ div .text-white,
.peer.sr-only:checked ~ div .text-white {
    color: var(--color-text) !important;
}

.peer:checked ~ div .text-gray-400,
.peer.sr-only:checked ~ div .text-gray-400 {
    color: var(--color-text-muted) !important;
}

/* Checkbox styling voor herbruikbare characters */
input[type="checkbox"][name="import_characters"]:checked + span {
    color: var(--color-primary-hover);
}

label:has(input[type="checkbox"]:checked) {
    background-color: rgba(212, 132, 154, 0.1) !important;
    border-color: var(--color-primary) !important;
}

/* Compass checkbox */
#compass-enabled:checked {
    background-color: var(--color-primary);
}

/* Story Compass phase selector */
input[name="compass_phase"]:checked ~ div {
    background-color: rgba(212, 132, 154, 0.2) !important;
    border-color: var(--color-primary) !important;
}

/* -----------------------------------------------------------------
   TOGGLE SWITCHES - Speciale Categorieën
   Duidelijke visuele feedback voor aan/uit staat
   ----------------------------------------------------------------- */

/* Toggle track - uitgeschakelde staat */
.peer.sr-only ~ div.rounded-full,
input[type="checkbox"].sr-only ~ div.w-11 {
    background-color: var(--color-border) !important;  /* #E8DDD9 - zichtbaar maar neutraal */
    border: 1px solid var(--color-text-dim);  /* Subtiele border voor definitie */
}

/* Toggle track - ingeschakelde staat */
.peer:checked ~ div.rounded-full,
input[type="checkbox"].sr-only:checked ~ div.w-11 {
    background-color: var(--color-primary) !important;  /* #D4849A - dusty rose */
    border-color: var(--color-primary-hover);
}

/* Toggle knop (thumb) - altijd goed zichtbaar */
.peer.sr-only ~ div.rounded-full::after,
input[type="checkbox"].sr-only ~ div.w-11::after {
    background-color: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);  /* Schaduw voor diepte */
}

/* Focus ring aanpassen naar thema kleur */
.peer-focus\:ring-purple-500:focus ~ div {
    --tw-ring-color: rgba(212, 132, 154, 0.5) !important;
}

/* Specifieke targeting voor de toggle divs in settings */
#lgbtq-toggle ~ div,
#bdsm-toggle ~ div,
#fetish-toggle ~ div {
    background-color: var(--color-border) !important;
    border: 1px solid var(--color-text-dim);
}

#lgbtq-toggle:checked ~ div,
#bdsm-toggle:checked ~ div,
#fetish-toggle:checked ~ div {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-hover) !important;
}

/* -----------------------------------------------------------------
   CONFIRMATION MODAL - FemVerteller Light Theme
   ----------------------------------------------------------------- */

.confirm-modal-backdrop {
    background-color: rgba(61, 61, 61, 0.4);
}

.confirm-modal-content {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 10px 40px -10px rgba(212, 132, 154, 0.3);
}

.confirm-modal-icon {
    background-color: rgba(212, 132, 154, 0.15);
    color: var(--color-primary);
}

.confirm-modal-icon.confirm-modal-icon-danger {
    background-color: rgba(232, 164, 164, 0.3);
    color: #8B3A3A;
}

.confirm-modal-icon.confirm-modal-icon-warning {
    background-color: rgba(232, 201, 125, 0.3);
    color: #8B7330;
}

.confirm-modal-title {
    color: var(--color-text);
    font-family: var(--font-display);
}

.confirm-modal-message {
    color: var(--color-text-muted);
    font-family: var(--font-body);
}

.confirm-modal-btn-cancel {
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.confirm-modal-btn-cancel:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

.confirm-modal-btn-confirm {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(212, 132, 154, 0.25);
}

.confirm-modal-btn-confirm:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
}

.confirm-modal-btn-confirm.confirm-modal-btn-danger {
    background: linear-gradient(135deg, #C06B6B 0%, #E8A4A4 100%);
    color: white;
}

.confirm-modal-btn-confirm.confirm-modal-btn-danger:hover {
    background: linear-gradient(135deg, #A85555 0%, #C06B6B 100%);
}