/* =========================================
   1. IMPORTS & ANIMATIONS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

@keyframes pulseHorizontal {
    0% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
    100% { transform: translateY(-50%) translateX(0); }
}

/* =========================================
   2. THEME VARIABLES
   ========================================= */

/* --- Default (Neo / Greyscale Dark) --- */
:root {
    /* Layout */
    --bg-primary: #000000; 
    --bg-secondary: #121212; 
    --bg-card: #282828;
    --input-field-inline-bg: #333333; 
    
    /* Typography */
    --text-primary: #e0e0e0; 
    --text-secondary: #a0a0a0;
    --font-family-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Borders & Accents */
    --border-primary: #424242; 
    --border-hover: #616161;
    --accent-primary: #757575; 
    --accent-hover: #9e9e9e;
    
    /* Functional Colors */
    --card-correct-bg: #38523a; --card-correct-text: #c8e6c9; --card-correct-border: #5a7d5a;
    --card-failed-bg: #5c3c3c; --card-failed-text: #ffcdd2; --card-failed-border: #8d5f5f;
    
    /* UI Components */
    --menu-card-shadow: 2px 2px var(--border-primary); 
    --menu-card-shadow-hover: 4px 4px var(--border-primary);
    --drag-handle-fill: rgba(255, 255, 255, 0.2); 
    --drag-handle-fill-hover: rgba(255, 255, 255, 0.5);
    --canvas-bg: #d1d5db;
    
    --card-color-default: #282828; 
    --card-color-red: #5c2b2b;      /* Darker Red */
    --card-color-blue: #1e3a5f;     /* Darker Blue */
    --card-color-green: #2e4c31;    /* Darker Green */
    --card-color-yellow: #5c542b;   /* Darker Yellow/Gold */
    --card-color-gold: #5a4a1e;     /* Darker Gold */
    --card-color-purple: #3a1e4a;   /* Darker Purple */
}

/* --- Theme: Neo (Explicit mapping if needed) --- */
.theme-greyscale-dark {
    /* Uses :root defaults */
}

/* --- Theme: Rings (Off-White) --- */
.theme-off-white {
    --bg-primary: #f4f1ea; --bg-secondary: #ffffff; --bg-card: #ffffff; --input-field-inline-bg: #f5f5f5;
    --text-primary: #333333; --text-secondary: #555555; 
    --border-primary: #d1d1d1; --border-hover: #b0b0b0;
    --accent-primary: #6c757d; --accent-hover: #5a6268;
    --card-correct-bg: #d4edda; --card-correct-text: #155724; --card-correct-border: #c3e6cb;
    --card-failed-bg: #f8d7da; --card-failed-text: #721c24; --card-failed-border: #f5c6cb;
    --menu-card-shadow: 2px 2px var(--border-hover); --menu-card-shadow-hover: 4px 4px var(--border-hover);
    --drag-handle-fill: rgba(0, 0, 0, 0.2); --drag-handle-fill-hover: rgba(0, 0, 0, 0.4);
    --canvas-bg: #e5e7eb;
    
    --card-color-default: #ffffff;
    --card-color-red: #ffebeb;
    --card-color-blue: #ebf5ff;
    --card-color-green: #ebffeb;
    --card-color-yellow: #ffffeb;
    --card-color-gold: #fff8e1;
    --card-color-purple: #f3e5f5;

}

/* --- Theme: Felt (Green) --- */
.theme-felt-green {
    --bg-primary: #224B0C; --bg-secondary: #2c5234; --bg-card: #406343; --input-field-inline-bg: #4E7A55;
    --text-primary: #E0EBE0; --text-secondary: #B0C4B1; 
    --border-primary: #5a8261; --border-hover: #6b9573;
    --accent-primary: #65a30d; --accent-hover: #84cc16;
    --card-correct-bg: #a7d7c5; --card-correct-text: #2a5545; --card-correct-border: #80bca3;
    --card-failed-bg: #f7a7a6; --card-failed-text: #7d3a39; --card-failed-border: #f08080;
    --canvas-bg: #8fbc8f;
    
    --card-color-default: #406343; 
    --card-color-red: #5c2b2b;      /* Darker Red */
    --card-color-blue: #1e3a5f;     /* Darker Blue */
    --card-color-green: #2e4c31;    /* Darker Green */
    --card-color-yellow: #5c542b;   /* Darker Yellow/Gold */
    --card-color-gold: #5a4a1e;     /* Darker Gold */
    --card-color-purple: #3a1e4a;   /* Darker Purple */
}

/* --- Theme: Jackie (Sepia) --- */
.theme-sepia {
    --bg-primary: #2d1e16; --bg-secondary: #3e2723; --bg-card: #4e342e; --input-field-inline-bg: #6a5148;
    --text-primary: #d7ccc8; --text-secondary: #bcaaa4; 
    --border-primary: #6d4c41; --border-hover: #8d6e63;
    --accent-primary: #8d6e63; --accent-hover: #a1887f;
    --card-correct-bg: #556b2f; --card-correct-text: #f0f8ff; --card-correct-border: #6b8e23;
    --card-failed-bg: #8b4513; --card-failed-text: #ffe4c4; --card-failed-border: #a0522d;
    --canvas-bg: #d8bfd8;
    
    --card-color-default: #4e342e; 
    --card-color-red: #5c2b2b;      /* Darker Red */
    --card-color-blue: #1e3a5f;     /* Darker Blue */
    --card-color-green: #2e4c31;    /* Darker Green */
    --card-color-yellow: #5c542b;   /* Darker Yellow/Gold */
    --card-color-gold: #5a4a1e;     /* Darker Gold */
    --card-color-purple: #3a1e4a;   /* Darker Purple */
}

/* =========================================
   3. GLOBAL STYLES & APPLICATION LAYER
   ========================================= */
body { 
    font-family: var(--font-family-sans); 
    display: flex; flex-direction: column; align-items: center; 
    min-height: 100vh; margin: 0; padding: 1rem; 
    overflow-x: hidden;
    
    /* Theme Application */
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* MathJax Overrides */
mjx-container { display: inline !important; margin: 0 !important; vertical-align: middle; }
mjx-container[display="true"] { display: block !important; text-align: center !important; margin: 1.2rem 0 !important; width: 100%; }
mjx-math { line-height: 0; }

/* Tailwind Variable Mapping Overrides */
.bg-black, .bg-black\/80, .bg-black\/20, .bg-gray-800, .bg-gray-900, .modal-content-box, .iso-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

h1, h2, h3, h4, h5, h6, .text-white, .text-gray-100, .text-gray-200, .text-gray-300 {
    color: var(--text-primary) !important;
}

.text-gray-400, .text-gray-500, .text-gray-600 {
    color: var(--text-secondary) !important;
}

input, textarea, select, .input-field {
    background-color: var(--input-field-inline-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

.text-amber-500, .text-accent-primary { color: var(--accent-primary) !important; }
.bg-amber-500, .bg-accent-primary { 
    background-color: var(--accent-primary) !important; 
    color: var(--bg-primary) !important; 
}
.border-amber-500, .border-amber-500\/30, .border-gray-700, .border-gray-800 { 
    border-color: var(--border-primary) !important; 
}

/* Utility */
.hidden { display: none !important; }


/* =========================================
   4. UI COMPONENTS: THEME SELECTOR (REFINED)
   ========================================= */

/* 1. SUNSHINE ICON: STRIP BACKGROUND */
/* This specific rule overrides the 'bg-black/20' utility class in HTML */
#desktopThemeButton {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important; /* Keep touch target comfortable */
    border-radius: 9999px;
    
    /* Ensure icon color is visible */
    color: var(--text-primary) !important;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Hover State: Only show subtle background when interacting */
#desktopThemeButton:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    transform: scale(1.05);
}

/* 2. PANEL CONTAINER: TIGHT BUT NOT CRUSHED */
#desktopThemeContainer #desktopThemeSelectorPanel {
    /* Shrink to fit text */
    width: max-content !important;
    min-width: 0 !important;
    
    /* Slight padding for the container itself */
    padding: 4px !important;
    
    /* Clean background/borders */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Positioning */
    margin-top: 4px !important;
    right: auto !important;
    left: 0 !important;
}

/* 3. THEME BUTTONS: BALANCED SPACING */
/* Targeted override to ensure 5px side padding but comfortable height */
#desktopThemeContainer #desktopThemeSelectorPanel .theme-button {
    /* LAYOUT */
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 5px 0 !important; /* Breathing room between buttons */
    
    /* SPACING: 8px vertical (comfortable), 5px horizontal (your requirement) */
    padding: 8px 10px !important;
    border-radius: 3px !important;
    /* TYPOGRAPHY: Standard size, un-bolded */
    font-weight: normal !important;
    font-size: 12px !important; /* Bumped up from 11px */
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    /* VISUALS */
    background-color: rgba(20, 20, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    
    /* CLEANUP */
    appearance: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Remove margin from last button */
#desktopThemeContainer #desktopThemeSelectorPanel .theme-button:last-child {
    margin-bottom: 0 !important;
}

/* Hover Interaction */
#desktopThemeContainer #desktopThemeSelectorPanel .theme-button:hover {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #000000 !important;
    transform: translateX(2px) !important; /* Subtle movement */
}

/* Ensure the notification text aligns and truncates if too long */
#actionNotificationText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    margin: 0;
    padding: 0;
    
    /* Matches the font stack of the welcome message */
    font-family: var(--font-family-sans); 
}


/* =========================================
   DECK TABS (Mini Flashcards in Header)
   ========================================= */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Ensure the tab container allows wrapping */
#activeDeckTabs {
    /* 1. Layout Behavior: Wrap, don't scroll */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    
    /* 2. Width Constraint: Wrap sooner to avoid top-right menu */
    /* 50vw means it takes up half the screen width max */
    max-width: 50vw !important; 
    
    /* 3. Cleanup */
    overflow: visible !important; /* Kill scrollbar container */
    height: auto !important;
    margin-left: 0 !important; /* Handled by HTML structure now */
    margin-bottom: 4px !important;
    pointer-events: auto !important;
}

/* The Individual Tab (Styled like a mini card) */
.mini-deck-tab {
    /* Theme Variables for Background/Text */
    background-color: var(--bg-card); 
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    
    /* Layout */
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    
    /* Transitions */
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    opacity: 0.7;
    
    flex-shrink: 0 !important;
}

/* Active State (Highlighted) */
.mini-deck-tab.active {
    background-color: var(--accent-primary) !important;
    color: var(--bg-primary) !important; /* Contrast text */
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary);
    opacity: 1;
    transform: translateY(1px);
}

/* Hover State */
.mini-deck-tab:hover:not(.active) {
    border-color: var(--accent-primary);
    opacity: 1;
    transform: translateY(-1px);
}

/* Close Button ("x") */
.mini-deck-tab .close-tab {
    margin-left: 8px;
    opacity: 0.6;
    font-size: 12px;
}
.mini-deck-tab .close-tab:hover {
    opacity: 1;
    color: inherit; /* Inherit high contrast color */
}

/* =========================================
   OVERRIDE: Force System/Daily Cards to Accept Colors
   ========================================= */
/* "html body" adds extra specificity to override default system styles */
html body .flashcard-rectangle.system-card[data-color="red"]    { background-color: var(--card-color-red) !important; border-color: #5c2b2b !important; }
html body .flashcard-rectangle.system-card[data-color="blue"]   { background-color: var(--card-color-blue) !important; border-color: #1e3a5f !important; }
html body .flashcard-rectangle.system-card[data-color="green"]  { background-color: var(--card-color-green) !important; border-color: #2e4c31 !important; }
html body .flashcard-rectangle.system-card[data-color="yellow"] { background-color: var(--card-color-yellow) !important; border-color: #5c542b !important; }
html body .flashcard-rectangle.system-card[data-color="gold"]   { background-color: var(--card-color-gold) !important; border-color: #5a4a1e !important; }
html body .flashcard-rectangle.system-card[data-color="purple"] { background-color: var(--card-color-purple) !important; border-color: #3a1e4a !important; }