/* Create Letter Page - Theme-aware Styles */

/* ==================== Body & Page Background ==================== */

/* Override Tailwind hard-coded classes with theme variables */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Navigation */
nav {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

/* ==================== Headers & Page Title ==================== */

/* All headings - theme aware */
h1, h2:not(.section-title), h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* Paragraph text */
p {
    color: var(--text-primary) !important;
}

/* Span elements (general) */
span:not(.check-label):not(.stat-label-text):not(.required-asterisk) {
    color: var(--text-primary) !important;
}

/* ==================== Cards & Sections ==================== */

/* Form cards */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-primary);
}

/* Remove hover effect on cards */
.card:hover {
    border-color: var(--border-primary) !important;
}

/* Section backgrounds */
section {
    background: var(--bg-card) !important;
}

/* ==================== Navigation Links ==================== */

/* Navigation links inherit from dashboard.css and tailwind.css - no overrides needed */

/* ==================== Labels & Text Colors ==================== */

/* Dark Mode - White labels */
[data-theme="dark"] .input-label,
[data-theme="dark"] label:not(.flex) {
    color: var(--Maktoub-White, #FFF) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

/* Light Mode - Black labels */
[data-theme="light"] .input-label,
[data-theme="light"] label:not(.flex) {
    color: #102320 !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

/* Keep "بيانات الخطاب" green in both modes */
[data-theme="dark"] .section-title,
[data-theme="dark"] h2 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .section-title,
[data-theme="light"] h2 {
    color: var(--text-secondary) !important;
}

/* ==================== Preview Section ==================== */

/* Ensure preview has consistent size */
#documentTemplate {
    min-height: 600px;
    max-height: 800px;
    overflow-y: auto;
}

/* Fix preview size when editing */
#documentPreview {
    width: 100%;
}

#documentPreview #documentTemplate {
    width: 100%;
    min-height: 600px;
}

/* ==================== Quality Analysis Colors ==================== */

/* Element Check - Success (Green) */
.check-success .check-icon {
    color: #4ADE80 !important;
}

.check-success {
    background: rgba(34, 197, 94, 0.15) !important;
}

/* Element Check - Failure (Red) */
.check-failure .check-icon {
    color: #F87171 !important;
}

.check-failure {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .check-success {
    background: rgba(34, 197, 94, 0.2) !important;
}

[data-theme="dark"] .check-failure {
    background: rgba(239, 68, 68, 0.2) !important;
}

/* Light mode specific adjustments */
[data-theme="light"] .check-success {
    background: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="light"] .check-failure {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* Element check label colors */
[data-theme="dark"] .check-label {
    color: #FFFFFF !important;
}

[data-theme="light"] .check-label {
    color: #102320 !important;
}

/* ==================== Statistics Cards ==================== */

/* Statistics labels */
[data-theme="dark"] .stat-label-text {
    color: var(--text-secondary);
}

[data-theme="light"] .stat-label-text {
    color: var(--text-secondary);
}

/* ==================== Quality Status Banner Colors ==================== */

/* Excellent quality - Green */
.quality-excellent {
    background: rgba(34, 197, 94, 0.2) !important;
}

.quality-excellent .status-icon,
.quality-excellent .status-title {
    color: #4ADE80 !important;
}

/* Good quality - Yellow */
.quality-good {
    background: rgba(234, 179, 8, 0.2) !important;
}

.quality-good .status-icon,
.quality-good .status-title {
    color: #FDE047 !important;
}

/* Poor quality - Red */
.quality-poor {
    background: rgba(239, 68, 68, 0.2) !important;
}

.quality-poor .status-icon,
.quality-poor .status-title {
    color: #F87171 !important;
}

/* ==================== Form Input Backgrounds ==================== */

/* Override hard-coded input backgrounds */
.border-maktoub-teal-600 {
    border-color: var(--border-primary) !important;
}

.border-maktoub-teal-500 {
    border-color: var(--border-primary) !important;
}

/* Dark mode inputs */
[data-theme="dark"] .input-field {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Light mode inputs */
[data-theme="light"] .input-field {
    background: #FFFFFF !important;
    border-color: rgba(6, 100, 88, 0.2) !important;
    color: #102320 !important;
}

/* Select elements */
select.input-field {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Textarea elements */
textarea.input-field {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* ==================== Input Placeholder Styling ==================== */

/* Dark theme placeholder */
[data-theme="dark"] .input-field::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--Maktoub-teal-600, #168B7F) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Light theme placeholder */
[data-theme="light"] .input-field::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--coolGray-400, #9CA3AF) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Dark theme - SELECT placeholder (when no value selected - :invalid state or .placeholder-active) */
[data-theme="dark"] select.input-field:invalid,
[data-theme="dark"] select:invalid,
[data-theme="dark"] select.input-field.placeholder-active,
[data-theme="dark"] select.placeholder-active {
    color: var(--Maktoub-teal-600, #168B7F) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Light theme - SELECT placeholder (when no value selected - :invalid state or .placeholder-active) */
[data-theme="light"] select.input-field:invalid,
[data-theme="light"] select:invalid,
[data-theme="light"] select.input-field.placeholder-active,
[data-theme="light"] select.placeholder-active {
    color: var(--coolGray-400, #9CA3AF) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Dark theme - SELECT with value selected (normal text color) */
[data-theme="dark"] select.input-field:valid,
[data-theme="dark"] select:valid {
    color: var(--text-primary) !important;
}

/* Light theme - SELECT with value selected (normal text color) */
[data-theme="light"] select.input-field:valid,
[data-theme="light"] select:valid {
    color: #102320 !important;
}

/* Dark theme - Custom dropdown placeholder text */
[data-theme="dark"] #letterType-selected {
    color: var(--Maktoub-teal-600, #168B7F) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Light theme - Custom dropdown placeholder text */
[data-theme="light"] #letterType-selected {
    color: var(--coolGray-400, #9CA3AF) !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* ==================== Placeholder Styling ==================== */

#previewPlaceholder {
    transition: opacity 0.3s ease;
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

#previewPlaceholder p {
    color: var(--text-secondary) !important;
}

#documentPreview {
    transition: opacity 0.3s ease;
}

/* ==================== Actions Section ==================== */

/* Actions card background */
.bg-maktoub-teal-700 {
    background: var(--bg-secondary) !important;
}

/* Check items background */
.bg-maktoub-teal-600 {
    background: var(--input-bg) !important;
}

/* Template options background */
.bg-maktoub-teal-800 {
    background: var(--bg-card) !important;
}

.bg-maktoub-teal-900 {
    background: var(--bg-hover) !important;
}

/* ==================== Text Color Overrides for Hard-coded Classes ==================== */

/* Override text-maktoub-light */
.text-maktoub-light {
    color: var(--text-secondary) !important;
}

/* Override text-white */
.text-white {
    color: var(--text-primary) !important;
}

/* Session status text */
#sessionStatus {
    color: var(--text-secondary) !important;
}

/* ==================== Responsive Adjustments ==================== */

/* Removed fixed height constraints to prevent canvas corruption on edit */
/* Document template now flows naturally with content */

#documentTemplate {
    min-height: 400px; /* Minimum height to prevent collapse */
    height: auto; /* Allow natural height based on content */
}

@media (max-width: 1024px) {
    #documentTemplate {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    #documentTemplate {
        min-height: 250px;
    }
}

/* ==================== Document Preview Background ==================== */

/* Document preview - always white background with dark text in both light/dark modes */
.document-preview-bg {
    background-color: #FFFFFF !important;
    color: #0D2823 !important;
}

/* Dark mode: keep white background (paper-like appearance) */
[data-theme="dark"] .document-preview-bg,
body.dark-mode .document-preview-bg {
    background-color: #FFFFFF !important; /* White background in dark mode too */
    color: #0D2823 !important; /* Dark text for readability */
}

/* Ensure all prose content inside preview has dark text (no white text) */
.document-preview-bg .prose,
.document-preview-bg .prose *,
.document-preview-bg .prose p,
.document-preview-bg .prose h1,
.document-preview-bg .prose h2,
.document-preview-bg .prose h3,
.document-preview-bg .prose h4,
.document-preview-bg .prose h5,
.document-preview-bg .prose h6,
.document-preview-bg .prose span,
.document-preview-bg .prose div {
    color: #0D2823 !important;
}

/* Ensure documentTemplate itself has white background */
#documentTemplate {
    background-color: #FFFFFF !important;
}

[data-theme="dark"] #documentTemplate,
body.dark-mode #documentTemplate {
    background-color: #FFFFFF !important;
}

/* ==================== Required Field Asterisks ==================== */

/* Use danger color from theme palette for required field indicators */
.required-asterisk,
.text-red-400,
label .text-red-400,
label span.text-red-400,
span.text-red-400 {
    color: #F33043 !important;
}

/* ==================== Button Text Styling ==================== */

/* Dark theme button text */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary span,
[data-theme="dark"] #generateButtonText {
    color: #FFFFFF !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

/* Light theme button text */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary span,
[data-theme="light"] #generateButtonText {
    color: #FFFFFF !important;
    font-family: "Janna LT" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

/* ==================== Button Loading States ==================== */

/* Disabled button state */
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.btn-primary .spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Hide default icon when loading */
.btn-primary.loading .default-icon {
    display: none;
}

/* Show spinner when loading */
.btn-primary.loading .spinner {
    display: inline-block;
}

/* ==================== Form Grid Layout ==================== */

/* Form container - Grid layout with gap */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form row - Two columns side by side */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Full width elements (like textarea and conditional fields) */
.form-full-width {
    grid-column: 1 / -1;
}

/* Ensure all child divs in form-row take full width within their column */
.form-row > div {
    width: 100%;
}

/* Responsive: Stack to single column on mobile */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ==================== Custom Dropdown Styles ==================== */

.filter-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    justify-content: flex-end;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--Maktoub-Light);
    font-family: 'Janna LT', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    min-width: unset;
    direction: ltr;
    text-align: left;
}

.dropdown-btn:hover {
    background: rgba(160, 236, 220, 0.05);
}

.dropdown-btn:focus {
    outline: none;
    border-color: var(--Maktoub-Main);
    box-shadow: 0 0 0 2px rgba(30, 168, 150, 0.2);
}

.dropdown-btn img {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.filter-dropdown.active .dropdown-btn img {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 100;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    direction: ltr;
    text-align: left;
}

.filter-dropdown.active .dropdown-menu {
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
}

.dropdown-menu-item {
    display: flex;
    padding: 8px 16px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: var(--white);
    font-family: 'Janna LT', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid rgba(160, 236, 220, 0.1);
    direction: ltr;
    text-align: left;
}

.dropdown-menu-item:last-child {
    border-bottom: none;
}

.dropdown-menu-item:hover {
    background: rgba(160, 236, 220, 0.1);
}

.dropdown-menu-item.active {
    background: rgba(30, 168, 150, 0.2);
    color: var(--white);
}

.dropdown-menu-item img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}