/* * NEW THEME SYSTEM:
 * We define all colors as CSS Variables.
 * JavaScript will change these variables.
 * Default is now LIGHT mode, and we add a '.dark' class
 */
:root {
    /* Default (Light Mode) */
    --color-bg-main:   #f3f4f6;       /* gray-100 */
    --color-bg-header: #ffffff;     /* white */
    --color-bg-card:   #ffffff;       /* white */
    --color-bg-hover:  #f9fafb;      /* gray-50 */
    --color-bg-modal:  #ffffff;      /* white */
    --color-bg-input:  #f3f4f6;      /* gray-100 */
    
    --color-text-main:   #111827;     /* gray-900 */
    --color-text-dim:    #4b5563;      /* gray-600 */
    --color-text-header: #d97706;   /* amber-600 */
    --color-text-accent: #ea580c;   /* orange-600 */
    --color-text-link:   #2563eb;     /* blue-600 */

    --color-border-main: #d1d5db;   /* gray-300 */
    --color-border-accent: #ea580c; /* orange-600 */
}

html.dark {
    /* Dark Mode (Gold Theme) */
    --color-bg-main:   #012456;
    --color-bg-header: #012456;
    --color-bg-card:   #022a60;
    --color-bg-hover:  #033a80;
    --color-bg-modal:  #011d46;
    --color-bg-input:  #022a60;
    
    --color-text-main:   #ffffad;
    --color-text-dim:    #9ca3af;
    --color-text-header: #fb923c;   /* orange-400 */
    --color-text-accent: #fb923c;   /* orange-400 */
    --color-text-link:   #60a5fa;     /* blue-400 */

    --color-border-main:   #4a5568;
    --color-border-accent: #ffffad;
}

/* Custom styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-main);          
    color: var(--color-text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Style for the Sanskrit text */
/* Style for the Sanskrit text */
.devanagari {
    font-family: 'Tiro Devanagari Sanskrit', serif; /* Updated Font */
    font-size: 1.85rem; /* Tiro is slightly smaller, so we bump the size up a tiny bit */
    line-height: 2.75rem; 
    font-weight: 400;
    color: var(--color-text-main);        
}/* Style for the IAST transliteration */
.iast {
    font-style: italic;
    font-size: 1.375rem; 
    line-height: 2.125rem;          
    color: var(--color-text-main);         
}

/* Loader animation */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--color-border-main);
    border-bottom-color: #FF3D00; /* Orange for contrast */
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

/* Language Tab Styles */
.lang-tab-button {
    transition: all 0.3s ease;
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-main);
    opacity: 0.7;
}
.lang-tab-button.active {
    border-color: var(--color-text-accent);
    color: var(--color-text-accent);
    opacity: 1.0;
}
.lang-tab-content { display: none; }
.lang-tab-content.active { display: block; }
.lang-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--color-border-main);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.lang-tab-bar::-webkit-scrollbar { display: none; }
.lang-tab-bar { -ms-overflow-style: none; scrollbar-width: none; }

/* Style for highlighting a verse on jump-to-search */
.highlight-verse {
    background-color: var(--color-bg-hover) !important;
    border: 1px solid var(--color-border-accent) !important;
    transition: background-color 1.5s ease-out;
}

/* Styles for the Modals */
.modal-backdrop {
    transition: opacity 0.3s ease-in-out;
}
.modal-box {
    transition: all 0.3s ease-in-out;
    max-height: 90vh; 
    background-color: var(--color-bg-modal);
    border: 1px solid var(--color-border-main);
}

/* --- NEW: Styles for Epithet Popups --- */
.epithet {
    color: var(--color-text-accent);
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    cursor: help;
    position: relative;
}

#epithet-tooltip {
    display: none;
    position: absolute;
    z-index: 100;
    width: 300px;
    padding: 1rem; /* p-4 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    background-color: var(--color-bg-modal);
    border: 1px solid var(--color-border-accent);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#epithet-tooltip.visible {
    display: block;
    opacity: 1;
    transform: scale(1);
}
#epithet-tooltip-title {
    font-weight: 700; /* bold */
    color: var(--color-text-header);
    margin-bottom: 0.5rem; /* mb-2 */
    font-size: 1.125rem; /* text-lg */
}
#epithet-tooltip-text {
    font-size: 0.875rem; /* text-sm */
    color: var(--color-text-main);
    line-height: 1.5; /* leading-relaxed */
}
/* --- END NEW STYLES --- */

/* Style for Sanskrit commentary text */
.sanskrit-commentary {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: 1.375rem;
    line-height: 2.125rem;           
    color: var(--color-text-main);
}

/* Style for the dropdowns inside the tabs */
.content-select {
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-accent);
    color: var(--color-text-main);
    border-radius: 0.375rem;
    padding: 0.5rem;
    width: 100%;
    margin-bottom: 0.75rem;
    font-size: 1rem; 
}
/* Style for main translation/commentary text */
.content-text {
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-main);
    border-radius: 0.375rem;
    padding: 0.75rem;
    min-height: 100px;
    color: var(--color-text-main);
    white-space: pre-wrap; 
    font-size: 1.25rem;
    line-height: 1.875rem;
}

/* Styles for the Theme Picker */
.theme-swatch {
    width: 32px; /* Made smaller for 10 */
    height: 32px;
    border-radius: 9999px; /* full */
    cursor: pointer;
    /* BUG FIX: Set a static, visible border for light swatches */
    border: 2px solid #9ca3af; 
    transition: all 0.2s ease;
}
.theme-swatch:hover {
    transform: scale(1.1);
}
.theme-swatch.active {
    border-color: var(--color-text-accent);
    box-shadow: 0 0 10px var(--color-text-accent);
    border-width: 3px; /* Make active border thicker */
}

/* Styles for the new Theme Toggle Switch */
/* We use Tailwind @apply directives for simplicity */
.toggle-bg:after {
    content: '';
    @apply absolute top-0.5 left-0.5 bg-white border border-gray-300 rounded-full h-5 w-5 transition shadow-sm;
}
input:checked + .toggle-bg:after {
    transform: translateX(100%);
    border-color: white;
}
input:checked + .toggle-bg {
    @apply bg-orange-600 border-orange-600;
}
/* --- Styles for Stats Table --- */
.stats-table {
    width: 100%;
    border-collapse: collapse;
}
.stats-table th,
.stats-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-main);
}
.stats-table th {
    background-color: var(--color-bg-input);
    color: var(--color-text-dim);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.stats-table tbody tr:last-child td {
    border-bottom: none;
}
.stats-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-input);
}


/* --- GLOSSARY MODAL (Flashcards) STYLES Added on Nov 25, 2025--- */

/* The Grid Container */
.epithet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* The Card */
.epithet-card {
    background-color: var(--color-bg-input); /* Using input/inner bg */
    border: 1px solid var(--color-border-main);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 5px solid var(--color-text-header); /* Orange/Gold accent */
    display: flex;
    flex-direction: column;
}

.epithet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    background-color: var(--color-bg-hover);
}

.epithet-card-header {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border-main);
    padding-bottom: 8px;
}

.epithet-sanskrit-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-header);
    margin: 0;
    font-family: 'Noto Sans Devanagari', sans-serif;
}

.epithet-explanation {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-main);
}

/* Highlight the 'Lit.' part inside cards */
.lit-marker {
    font-weight: bold;
    color: var(--color-text-accent);
}

/* --- Interactive Verse Words --- */
.interactive-word {
    cursor: help;
    border-bottom: 1px dotted var(--color-text-dim);
    transition: all 0.2s ease;
    position: relative; /* For z-index context */
}

.interactive-word:hover {
    color: var(--color-text-accent);
    border-bottom-color: var(--color-text-accent);
    background-color: rgba(234, 88, 12, 0.1); /* Soft orange highlight */
    border-radius: 3px;
}

/* --- Grammar Dropdown Menu --- */

/* The container for the icon and menu */
.grammar-dropdown {
    position: relative;
    display: inline-block;
}

/* The dropdown menu (hidden by default) */
/* --- Grammar Dropdown Menu --- */

/* The container for the icon and menu */
.grammar-dropdown {
    position: relative;
    display: inline-block;
}

/* The dropdown menu (hidden by default) */
.grammar-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--color-bg-card);
    min-width: 240px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border: 1px solid var(--color-border-main);
    border-radius: 8px;
    z-index: 50;
    padding: 0.5rem 0;
    text-align: left;
}

/* Show menu on hover */
.grammar-dropdown:hover .grammar-menu {
    display: block;
}

/* Menu Items */
.grammar-item {
    color: var(--color-text-main);
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    cursor: pointer;
    position: relative; /* For submenu positioning */
    transition: background 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grammar-item:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-accent);
}

/* --- Nested Submenus (Flyouts) --- */
.has-submenu::after {
    content: '◂'; /* Arrow pointing left */
    font-size: 1.2em;
    color: var(--color-text-dim);
}

/* --- Nested Submenus (Flyouts) --- */
.has-submenu {
    position: relative; /* Ensure submenu positions relative to this item */
}

.has-submenu::after {
    content: '◂'; 
    float: right;
    margin-left: 10px;
    color: var(--color-text-dim);
    font-size: 1em;
}

.grammar-submenu {
    display: none;
    position: absolute;
    
    /* Position: To the Left */
    right: 100%; 
    top: -5px;
    
    /* Size & Style */
    min-width: 220px;
    background-color: var(--color-bg-card);
    box-shadow: -4px 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--color-border-main);
    border-radius: 8px;
    padding: 0.5rem 0;
    
    /* THE FIX: Invisible Bridge so mouse doesn't lose focus */
    /* We make the menu slightly closer and add a transparent border */
    margin-right: -2px; 
    border-right: 10px solid transparent; /* Invisible extension to catch mouse */
    background-clip: padding-box; /* Keeps the background inside the border */
}

/* Show submenu on hover */
.has-submenu:hover .grammar-submenu {
    display: block;
}