:root {
    --primary: #5D5CDE;
    --primary-dark: #4949B3;
    --primary-light: #8281E6;
    --light-bg: #FFFFFF;
    --dark-bg: #181818;
    --light-text: #333333;
    --dark-text: #E0E0E0;
    --light-border: #DDDDDD;
    --dark-border: #444444;
    --density-highlight: #9C27B0; /* Purple highlight for density tab */
    --letter-highlight: #22c55e; /* Green highlight for letter examples */
    --warning-text: #e53e3e; /* Red text for warnings */
    
    /* Added variable for rhythm bar width */
    --rhythm-bar-width: 11px;
    
    /* Updated rhythm colors - lighter versions */
    --short-color: #90CAF9;     /* Light Blue */
    --medium-color: #A5D6A7;    /* Light Green */
    --long-color: #FFCC80;      /* Light Orange */
    --extra-long-color: #F48FB1; /* Light Pink */
    --paragraph-color: rgba(0, 0, 0, 0.1); /* Transparent */
    --gradient-border: linear-gradient(90deg, #5D5CDE, #9C27B0);
    --flat-black: #181818;
    --white: #FFFFFF;
    --light-grey: #e5e5e5;
    --dark-grey: #333333;
    --hover-light-grey: #d1d1d1;
    --hover-dark-grey: #1a1a1a;
    --active-hover-light: #c1c1c1;
    --active-hover-dark: #2a2a2a;
    --toggle-green: #10B981; /* Green color for toggle */
}

/* Add Inter font as default */
body {
    font-family: 'Inter', sans-serif;
}

/* Main container max-width removed to allow flexible sizing */
.max-w-full {
    width: 100%;
    padding: 0 15px;
}

/* Oval tab styling */
.oval-tab {
    position: relative;
    border: 2px solid transparent !important;
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
    transition: all 0.3s ease-out !important;
    z-index: 1;
    overflow: visible !important;
    border-radius: 999px !important;
    padding: 0.5rem 1.25rem !important;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.oval-tab:hover {
    background-color: var(--hover-light-grey) !important;
}

.oval-tab.active {
    background-color: var(--flat-black) !important;
    color: var(--white) !important;
    border-width: 2px !important;
}

.oval-tab.active:hover {
    background-color: var(--active-hover-dark) !important;
}

html.dark .oval-tab {
    background-color: var(--dark-grey) !important;
    color: var(--light-grey) !important;
}

html.dark .oval-tab:hover {
    background-color: var(--hover-dark-grey) !important;
}

html.dark .oval-tab.active {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
    border-width: 2px !important;
}

html.dark .oval-tab.active:hover {
    background-color: var(--active-hover-light) !important;
}

/* Analyze button styling */
.analyze-btn,
#analyzeBtn,
#analyzeHomonymBtn,
#analyzeRhythmBtn {
    position: relative;
    border: 2px solid transparent !important;
    background-color: var(--flat-black) !important;
    color: var(--white) !important;
    transition: all 0.3s ease-out !important;
    z-index: 1;
    overflow: visible !important;
    border-radius: 999px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.analyze-btn:hover,
#analyzeBtn:hover,
#analyzeHomonymBtn:hover,
#analyzeRhythmBtn:hover {
    background-color: var(--active-hover-dark) !important;
}

html.dark .analyze-btn,
html.dark #analyzeBtn,
html.dark #analyzeHomonymBtn,
html.dark #analyzeRhythmBtn {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
}

html.dark .analyze-btn:hover,
html.dark #analyzeBtn:hover,
html.dark #analyzeHomonymBtn:hover,
html.dark #analyzeRhythmBtn:hover {
    background-color: var(--active-hover-light) !important;
}

/* Edit Homonym Groups button */
#editHomonymGroupsBtn {
    position: relative;
    border: 2px solid transparent !important;
    background-color: var(--flat-black) !important;
    color: var(--white) !important;
    transition: all 0.3s ease-out !important;
    z-index: 1;
    overflow: visible !important;
    border-radius: 999px !important;
}

#editHomonymGroupsBtn:hover {
    background-color: var(--active-hover-dark) !important;
}

html.dark #editHomonymGroupsBtn {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
}

html.dark #editHomonymGroupsBtn:hover {
    background-color: var(--active-hover-light) !important;
}

/* Location buttons styling */
.location-button, 
.homonym-location-button {
    position: relative;
    border: 2px solid transparent !important;
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
    transition: all 0.3s ease-out !important;
    z-index: 1;
    overflow: visible !important;
    border-radius: 999px !important;
    font-weight: normal;
}

.location-button:hover,
.homonym-location-button:hover {
    background-color: var(--hover-light-grey) !important;
}

.location-button.active,
.homonym-location-button.active {
    background-color: var(--flat-black) !important;
    color: var(--white) !important;
}

.location-button.active:hover,
.homonym-location-button.active:hover {
    background-color: var(--active-hover-dark) !important;
}

html.dark .location-button, 
html.dark .homonym-location-button {
    background-color: var(--dark-grey) !important;
    color: var(--light-grey) !important;
}

html.dark .location-button:hover,
html.dark .homonym-location-button:hover {
    background-color: var(--hover-dark-grey) !important;
}

html.dark .location-button.active,
html.dark .homonym-location-button.active {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
}

html.dark .location-button.active:hover,
html.dark .homonym-location-button.active:hover {
    background-color: var(--active-hover-light) !important;
}

/* Dark mode for homonymGroupsReadView */
html.dark #homonymGroupsReadView {
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
}

/* Dark mode for homonymGroupsInput */
html.dark #homonymGroupsInput {
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
    border-color: var(--dark-border) !important;
}

/* Dark mode for predefinedPatternsContainer */
html.dark #predefinedPatternsContainer {
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
}

/* Cancel button styling in homonym groups */
#cancelHomonymEditBtn {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
    transition: all 0.3s ease-out !important;
}

#cancelHomonymEditBtn:hover {
    background-color: var(--hover-light-grey) !important;
}

html.dark #cancelHomonymEditBtn {
    background-color: var(--dark-grey) !important;
    color: var(--light-grey) !important;
}

html.dark #cancelHomonymEditBtn:hover {
    background-color: var(--hover-dark-grey) !important;
}

/* Save button styling in homonym groups */
#saveHomonymGroupsBtn {
    background-color: var(--flat-black) !important;
    color: var(--white) !important;
    transition: all 0.3s ease-out !important;
}

#saveHomonymGroupsBtn:hover {
    background-color: var(--active-hover-dark) !important;
}

html.dark #saveHomonymGroupsBtn {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
}

html.dark #saveHomonymGroupsBtn:hover {
    background-color: var(--active-hover-light) !important;
}

/* Export and Import buttons */
#exportHomonymGroupsBtn,
#importHomonymGroupsBtn {
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
    transition: all 0.3s ease-out !important;
}

#exportHomonymGroupsBtn:hover,
#importHomonymGroupsBtn:hover {
    background-color: var(--hover-dark-grey) !important;
}

html.dark #exportHomonymGroupsBtn,
html.dark #importHomonymGroupsBtn {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
}

html.dark #exportHomonymGroupsBtn:hover,
html.dark #importHomonymGroupsBtn:hover {
    background-color: var(--hover-light-grey) !important;
}

/* Remove the old gradient styles */
.oval-tab::after,
.location-button::after,
.homonym-location-button::after,
.analyze-btn::after,
#analyzeBtn::after,
#analyzeHomonymBtn::after,
#analyzeRhythmBtn::after {
    display: none;
}

/* Removing any background gradient styles */
.oval-tab,
.location-button,
.homonym-location-button,
.analyze-btn,
#analyzeBtn,
#analyzeHomonymBtn,
#analyzeRhythmBtn {
    background-image: none !important;
}

/* Remove transform on hover */
.location-button:hover,
.homonym-location-button:hover,
.analyze-btn:hover,
#analyzeBtn:hover,
#analyzeHomonymBtn:hover,
#analyzeRhythmBtn:hover {
    transform: none;
}

/* Style for Letter % Match error */
.letter-match-error {
    color: #e53e3e;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Add RTL text support */
[dir="auto"] {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Dark theme icon colors */
html.dark #darkThemeBtn svg,
html.dark #undoBtn svg,
html.dark #redoBtn svg {
    color: white;
}

/* Modified countdown timer to display inline */
.countdown-timer {
    color: white;
    font-size: 16px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    animation: pulse 1s infinite;
}

.countdown-timer-4 {
    background-color: var(--short-color); /* Blue */
}

.countdown-timer-3 {
    background-color: var(--medium-color); /* Green */
}

.countdown-timer-2 {
    background-color: var(--long-color); /* Orange */
}

.countdown-timer-1 {
    background-color: var(--extra-long-color); /* Pink */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Add min-width to distribution bar sections */
.w-full.h-10.flex.rounded-lg.overflow-hidden > div {
    min-width: 35px;
}

/* Default light theme styles */
body {
    background-color: var(--light-bg);
    color: var(--light-text);
}
.tab, .results {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: var(--light-border);
}
.text-editor {
    background-color: var(--light-bg);
    border: none;
}
.tab.active {
    background-color: var(--primary);
    color: white;
}
.highlight {
    background-color: var(--primary-light);
    color: white;
}
input[type="radio"] + label, input[type="checkbox"] + label {
    color: var(--light-text);
}
.custom-set-item {
    background-color: rgba(0, 0, 0, 0.02);
    border-color: var(--light-border);
}
.custom-set-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.metrics-panel {
    background-color: rgba(0, 0, 0, 0.02);
    border-color: var(--light-border);
    border-radius: 20px; /* Make metrics container more oval */
    overflow: hidden;
}

/* Dark theme styles - directly applied when .dark class exists */
html.dark {
    --paragraph-color: rgba(255, 255, 255, 0.1);
}

html.dark body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}
html.dark .tab, 
html.dark .results {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--dark-border);
}
html.dark .text-editor {
    background-color: var(--dark-bg);
    border: none;
}
html.dark .tab.active {
    background-color: var(--primary);
    color: white;
}
html.dark .highlight {
    background-color: var(--primary-dark);
    color: white;
}
html.dark input[type="radio"] + label, 
html.dark input[type="checkbox"] + label {
    color: var(--dark-text);
}
html.dark .custom-set-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--dark-border);
}
html.dark .custom-set-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
html.dark .metrics-panel {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--dark-border);
}
html.dark .bg-gray-100 {
    background-color: var(--dark-bg);
}
html.dark .text-gray-600 {
    color: #d1d5db;
}

/* Ensure light theme is applied correctly when manually selected */
html:not(.dark) body {
    background-color: var(--light-bg) !important;
    color: var(--light-text) !important;
}
html:not(.dark) .bg-gray-100 {
    background-color: #F3F4F6 !important;
}
html:not(.dark) .text-gray-600 {
    color: #4B5563 !important;
}
html:not(.dark) .dark\:bg-gray-700, 
html:not(.dark) .dark\:bg-gray-800 {
    background-color: #F9FAFB !important;
}
html:not(.dark) .dark\:text-gray-400,
html:not(.dark) .dark\:text-gray-300 {
    color: #4B5563 !important;
}

/* Fix dark theme button visibility when system is dark */
@media (prefers-color-scheme: dark) {
    #systemThemeBtn.active + #darkThemeBtn svg,
    html.dark #darkThemeBtn svg {
        color: white !important;
    }
}

/* Improved styling for bar size toggle */
html:not(.dark) .bar-size-btn.active {
    background-color: var(--flat-black) !important;
    color: white !important;
    border-color: var(--flat-black) !important;
}

html.dark .bar-size-btn.active {
    background-color: var(--light-grey) !important;
    color: var(--dark-grey) !important;
    border-color: var(--light-grey) !important;
}

/* Make sure the moon icon (dark theme button) is always visible in system dark theme */
@media (prefers-color-scheme: dark) {
    #darkThemeBtn svg {
        color: white !important;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: var(--light-bg);
        color: var(--light-text);
    }
    .tab, .text-editor, .results {
        
        border-color: var(--light-border);
    }
    .tab.active {
        background-color: var(--primary);
        color: white;
    }
    .highlight {
        background-color: var(--primary-light);
        color: white;
    }
    input[type="radio"] + label, input[type="checkbox"] + label {
        color: var(--light-text);
    }
    .custom-set-item {
        background-color: rgba(0, 0, 0, 0.02);
        border-color: var(--light-border);
    }
    .custom-set-item:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    .metrics-panel {
        background-color: rgba(0, 0, 0, 0.02);
        border-color: var(--light-border);
    }
}

.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* Editor Tabs */
.editor-tab {
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.editor-tab.active {
    border-bottom-color: #5D5CDE;
    color: #5D5CDE;
}

.editor-content {
    display: none;
}

.editor-content.active {
    display: block;
}

/* Rainbow colors for pronouns */
.highlight-i { background-color: #FF0000; color: white; } /* Red */
.highlight-you { background-color: #FF7F00; color: white; } /* Orange */
.highlight-it { background-color: #FFFF00; color: black; } /* Yellow */
.highlight-he { background-color: #00FF00; color: black; } /* Green */
.highlight-she { background-color: #0000FF; color: white; } /* Blue */
.highlight-we { background-color: #4B0082; color: white; } /* Indigo */
.highlight-they { background-color: #9400D3; color: white; } /* Violet */

/* Adverbs and passive voice styles */
.highlight-adverb { background-color: #10B981; color: white; } /* Emerald green */
.highlight-passive { background-color: #3B82F6; color: white; } /* Light blue */

/* Word density styles */
.highlight-density { background-color: var(--density-highlight); color: white; }
.word-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color 0.2s;
}
.word-item:hover {
    background-color: rgba(156, 39, 176, 0.1);
}
.word-item.active {
    background-color: rgba(156, 39, 176, 0.2);
    font-weight: 500;
}

/* Toggle switch custom styling */
input[type="checkbox"].peer:checked + div.peer-checked\:bg-indigo-600 {
    background-color: var(--toggle-green) !important;
}

/* Letter highlight - make sure it's always dark font on light background */
.letter-highlight {
    background-color: var(--letter-highlight);
    color: black !important;
    border-radius: 0.25rem;
}

/* Stats list */
.stats-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--light-border);
}
.stats-list li:last-child {
    border-bottom: none;
}
.stats-list .item-count {
    font-weight: 500;
}
.stats-header {
    font-weight: 600;
    border-bottom: 2px solid var(--light-border);
    padding: 6px 10px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

/* Form error styling */
.form-error {
    color: #e53e3e;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.error-border {
    border-color: #e53e3e !important;
}

/* Results display */
#resultsDisplay {
    white-space: pre-wrap;
}

/* Custom Sets styles */
.custom-set-item {
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border-width: 1px;
    transition: all 0.2s;
    cursor: pointer;
}
.custom-set-item.active {
    border-left-width: 4px;
}
.color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,0.1);
}
.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    margin: 3px;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.color-option.selected {
    transform: scale(1.2);
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}

/* Tab controls with analyze button */
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Warning alert inside tab header */
.tab-warning {
    background-color: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.tab-warning.warning-red {
    color: var(--warning-text);
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    .tab-warning {
        background-color: #7F1D1D;
        border-color: #B91C1C;
        color: #FECACA;
    }
}

/* Configuration changed alert */
.config-changed-alert {
    display: none;
}

/* Stats container */
.stats-container {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--light-border);
    border-radius: 0.375rem;
    background-color: var(--light-bg);
}

@media (prefers-color-scheme: dark) {
    .stats-container {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: var(--dark-border);
    }
}

/* Metrics panel */
.metrics-panel {
    border-radius: 20px;
    border-width: 1px;
    margin-top: 0.75rem;
    overflow: hidden;
}

.metrics-header {
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: black;
    background-color: lavender;
}

/* Always visible metrics content */
.metrics-content-always-visible {
    padding: 10px;
    background-color: rgba(230, 230, 250, 0.2); /* Very light lavender */
}

/* Updated Rhythm tab styles */
#rhythm-container {
    position: relative;
    margin-top: 1rem;
    overflow-x: auto;
    min-height: 200px;
    padding: 10px 0;
}

/* Move the legend below the chart */
#rhythm-legend {
    margin-top: 1rem;
    justify-content: center;
}

#rhythm-legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.rhythm-legend-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.rhythm-color-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.1);
}

#sentence-chart {
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    gap: 4px; /* Increased gap between bars */
}

.rhythm-bar {
    width: var(--rhythm-bar-width, 11px); /* Use variable with fallback */
    min-width: var(--rhythm-bar-width, 11px); /* Use variable with fallback */
    cursor: pointer;
    border-radius: 2px 2px 0 0;
    transition: transform 0.2s ease;
    position: relative;
}

.rhythm-bar:hover {
    transform: scaleY(1.05);
}

/* Set bar colors with max heights */
.rhythm-bar-short {
    background-color: var(--short-color);
    min-height: 15px;
    max-height: 40px;
}

.rhythm-bar-medium {
    background-color: var(--medium-color);
    min-height: 45px;
    max-height: 70px;
}

.rhythm-bar-long {
    background-color: var(--long-color);
    min-height: 75px;
    max-height: 100px;
}

.rhythm-bar-extralong {
    background-color: var(--extra-long-color);
    min-height: 105px;
    max-height: 125px;
}

.rhythm-bar-paragraph {
    background-color: var(--paragraph-color);
    height: 10px !important;
    margin-top: auto;
}

/* Set legend colors */
.legend-short {
    background-color: var(--short-color);
}

.legend-medium {
    background-color: var(--medium-color);
}

.legend-long {
    background-color: var(--long-color);
}

.legend-extralong {
    background-color: var(--extra-long-color);
}

.legend-paragraph {
    background-color: var(--paragraph-color);
    border: 1px dashed rgba(0,0,0,0.3);
}

/* Tooltip for rhythm bars - improved positioning and visibility */
.rhythm-tooltip {
    position: absolute;
    top: -30px; /* Fixed position at the top */
    left: 10px; /* Offset to the right side of the bar */
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 99999 !important; /* Extremely high z-index with !important */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Force tooltip to the foreground */
.rhythm-bar:hover {
    transform: scaleY(1.05);
    z-index: 99990 !important; /* Ensure bar gets high z-index when hovered */
}

/* Ensure tooltip is always visible */
.rhythm-bar:hover .rhythm-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Sentence highlight colors matching bar colors */
.highlight-sentence-short {
    background-color: rgba(144, 202, 249, 0.4);
    animation: fadeSentenceHighlight 2.5s forwards;
}

.highlight-sentence-medium {
    background-color: rgba(165, 214, 167, 0.4);
    animation: fadeSentenceHighlight 2.5s forwards;
}

.highlight-sentence-long {
    background-color: rgba(255, 204, 128, 0.4);
    animation: fadeSentenceHighlight 2.5s forwards;
}

.highlight-sentence-extralong {
    background-color: rgba(244, 143, 177, 0.4);
    animation: fadeSentenceHighlight 2.5s forwards;
}

/* Default highlight for backward compatibility */
.highlight-sentence {
    background-color: rgba(93, 92, 222, 0.3);
    animation: fadeSentenceHighlight 2.5s forwards;
}

@keyframes fadeSentenceHighlight {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Matches result styles */
.match-result {
    transition: all 0.2s ease;
}

.match-result:hover {
    background-color: rgba(156, 39, 176, 0.1) !important; /* Purple highlight matching Density tab */
}

/* Dark mode specific hover styles */
html.dark .match-result:hover {
    background-color: rgba(156, 39, 176, 0.15) !important; /* Slightly brighter for dark mode */
}

/* Fix for Quill editor */
.ql-container {
    font-size: 16px;
    border: none !important;
    background-color: transparent !important;
}
.ql-editor {
    min-height: 200px;
    background-color: inherit !important;
    border: none !important;
}
.ql-toolbar {
    border: none !important;
    background-color: var(--light-grey) !important;
    border-radius: 8px;
}


/* Make toolbar buttons and controls match in size */
.ql-toolbar .ql-formats .ql-picker {
    height: 24px !important;
}

.ql-toolbar .ql-formats button {
    height: 24px !important;
    width: 24px !important;
}

/* Custom RTL button styles */
.ql-rtl {
    width: 28px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ql-rtl svg {
    width: 18px;
    height: 18px;
}

.ql-rtl.ql-active {
    color: #06c !important;
}

/* RTL styling for the editor */
.ql-editor[dir="rtl"] {
    text-align: right;
}

/* Custom styling for undo/redo buttons in Quill toolbar */
.ql-undo, .ql-redo {
    position: relative;
    width: 28px !important;
    height: 24px !important;
    display: flex !important;
    color: black !important;
    align-items: center !important;
    justify-content: center !important;
}

.ql-undo:after, .ql-redo:after {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ql-undo:after {
    content: "↶";
}

.ql-redo:after {
    content: "↷";
}

.ql-undo.ql-active, .ql-redo.ql-active {
    color: #06c !important;
}

/* Tabs container */
.tabs-container {
    margin-bottom: 0.5rem !important;
}

/* New layout specific styles */
.text-editor {
    height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}

#editorArea {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#quill-editor {
    flex-grow: 1;
    overflow-y: auto;
}

/* Make tabs arrangement better in the grid */
.grid.grid-cols-3.gap-2 {
    grid-template-columns: repeat(3, 1fr);
}

/* CHANGE: Modified header margin */
.flex.justify-between.items-center.mb-6 {
    margin-bottom: 0.5rem !important;
}

/* Make sure location buttons with text examples have dark font */
.homonym-location-button span,
.location-button span {
    color: var(--dark-grey) !important;
}

html.dark .homonym-location-button span,
html.dark .location-button span {
    color: var(--light-grey) !important;
}

.homonym-location-button.active span,
.location-button.active span {
    color: var(--white) !important;
}

html.dark .homonym-location-button.active span,
html.dark .location-button.active span {
    color: var(--dark-grey) !important;
}

/* Make the editor and tabs areas flex properly */
@media (min-width: 768px) {
    .flex.flex-col.md\:flex-row {
        height: calc(100vh - 100px);
    }
    
    .w-full.md\:w-1\/2 {
        height: 100%;
    }
    
    .tab-contents {
        padding-right: 4px;
    }
}

/* Adjust the scrolling behavior */
.tab-contents {
    overflow-y: auto;
    height: calc(100vh - 170px);
}

/* Compact the Quill toolbar */
.quill-toolbar-compact .ql-formats {
    margin-right: 8px !important;
}

/* Modify the format selector to show shorter text */
.ql-picker.ql-header .ql-picker-label::before,
.ql-picker.ql-header .ql-picker-item::before {
    content: attr(data-value) !important;
    font-size: 14px !important;
}

.ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "H1" !important;
}

.ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "H2" !important;
}

.ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "H3" !important;
}

.ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "H4" !important;
}

.ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "H5" !important;
}

.ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "H6" !important;
}

.ql-picker.ql-header .ql-picker-label:not([data-value])::before,
.ql-picker.ql-header .ql-picker-item:not([data-value])::before {
    content: "T" !important;
}
/* Change size picker labels to S/M/L/XL */
.ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "S" !important;
}

/* Fix for normal/medium */
.ql-picker.ql-size .ql-picker-label[data-value="normal"]::before,
.ql-picker.ql-size .ql-picker-item[data-value="normal"]::before {
    content: "M" !important;
}

/* Fix for default selection (empty value) */
.ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.ql-picker.ql-size .ql-picker-item[data-value=""]::before {
    content: "M" !important;
}

/* These target the text "Normal" in the dropdown */
.ql-picker.ql-size .ql-picker-item:nth-child(2)::before {
    content: "M" !important;
}

.ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "L" !important;
}

.ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "XL" !important;
}

/* Hide font family selector as requested */
.ql-font.ql-picker {
    display: none !important;
}

/* Add styles for theme buttons active state */
#lightThemeBtn.active,
#darkThemeBtn.active,
#systemThemeBtn.active {
    background-color: #edf2f7;
}

html.dark #lightThemeBtn.active,
html.dark #darkThemeBtn.active,
html.dark #systemThemeBtn.active {
    background-color: #2d3748;
}

/* Make the similarityThreshold slider lighter in dark mode */
html.dark #similarityThreshold {
    background-color: #555 !important;
}

/* Reduce spacing between toolbar elements */
.ql-toolbar .ql-formats {
    margin-right: 5px !important;
}

/* Reduce the width of the dropdown menus */
.ql-picker.ql-header, .ql-picker.ql-size {
    width: auto !important;
    min-width: 50px !important;
}

/* Style placeholder in dark mode */
html.dark .ql-editor.ql-blank::before {
    color: var(--dark-text) !important;
}

/* Fix for dark mode crescent icon visibility in light mode */
html:not(.dark) #darkThemeBtn svg {
    color: var(--dark-grey) !important;
}