/* ========================================
   MODALS - Modal Windows
   ========================================
   Sections:
   1. Overlay
   2. Modal container
   3. Modal header
   4. Modal body
   5. Modal footer
   6. Sizes
   7. Variants (confirm, delete, form)
   8. Animations
   ======================================== */

/* ========================================
   MODAL DESIGN SYSTEM
   ========================================

   DEFAULT WIDTH: 600px (modal-container)

   SIZES:
   - .modal-container = 600px (default)
   - .modal-container-lg = 800px (large)
   - .modal-container-xl = 1000px (extra large)

   MODAL TYPES:
   1. Form Modal (Create/Edit) - .modal-container
   2. Confirm Modal - .modal-container
   3. Delete Modal - .modal-container
   4. Success Modal - .modal-container
   5. Info Modal - .modal-container

   BUTTON RULES:
   - Primary action (Save/Confirm/Delete) = LEFT, .primary state
   - Cancel = RIGHT, normal state
   - Save/Create = .neon-btn-green.primary
   - Delete = .neon-btn-red.primary
   - Confirm = .neon-btn-purple.primary
   - Cancel = .neon-btn-teal (always)

   BEHAVIOR RULES:
   - Modals ALWAYS centered (horizontal + vertical)
   - Overlay has blur (backdrop-filter: blur(4px))
   - Close: ONLY via X button, Cancel, Escape key
   - Click outside modal does NOT close it
   - On modal open - all forms are reset

   RESPONSIVE:
   - Desktop: max-width by size (sm/default/lg/xl)
   - Tablet (<768px): reduced padding
   - Mobile (<480px): full width, minimal margins
   - Min target: 375px (iPhone 13 mini)
   - Modals always centered on all resolutions

   ======================================== */

/* ========================================
   1. OVERLAY
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile: reduce overlay padding, keep modals centered */

/* ========================================
   2. MODAL CONTAINER
   ======================================== */

/* Base modal styles are in .modal-container (section 7.5) */

/* ========================================
   3. MODAL HEADER
   ======================================== */

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

/* Light theme: шапка модалки — ИНВЕРТИРОВАННАЯ (чёрная, белый заголовок + крестик).
   Инверсия токенов на header → потомки на var(--color-*) белеют. Тело модалки
   остаётся светлым. На inverse-токенах. */
[data-theme="light"] .modal-header {
    background-color: var(--color-bg-inverse);
    border-bottom-color: var(--color-border-on-inverse);
    --color-text-primary: var(--color-text-on-inverse-strong);
    --color-text: var(--color-text-on-inverse);
    --color-text-secondary: var(--color-text-on-inverse-muted);
    --color-border: var(--color-border-on-inverse);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-bg-card-hover);
    color: var(--color-text);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   4. MODAL BODY
   ======================================== */

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body p {
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

.modal-body p + p {
    margin-top: 1rem;
}

/* Modal text variants */
.modal-text-muted {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.modal-text-warning {
    color: var(--color-warning);
}

.modal-text-danger {
    color: var(--color-error);
}

/* ========================================
   5. MODAL FOOTER
   ======================================== */

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Footer left alignment */
.modal-footer.justify-between {
    justify-content: space-between;
}

.modal-footer.justify-center {
    justify-content: center;
}

/* ========================================
   6. SIZES
   ======================================== */

/* Sizes defined in .modal-container section:
   .modal-container-lg = 800px
   .modal-container-xl = 1000px
*/

/* ========================================
   7. VARIANTS
   ======================================== */

/* ============ Semantic variants — иконка в шапке + семантичный цвет ============ */
/* Иконка слева от заголовка (рядом с цветным подзаголовком), не оторвана в центре.
   Иконки — «жирные» filled-кружки из тостов; цвет по варианту. */

.modal-header-lead {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Правая группа шапки: тулбар-кнопки (neon icon-only) + крестик */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.modal-header .modal-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* filled-circle варианты — иконка-кружок заливкой (как у тостов), без доп. фона */
.modal-confirm .modal-icon svg,
.modal-success .modal-icon svg,
.modal-warning .modal-icon svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
    stroke: none;
}

.modal-confirm .modal-icon { color: var(--color-info); }
.modal-success .modal-icon { color: var(--color-success); }
.modal-warning .modal-icon { color: var(--color-warning); }

/* delete — outline-trash в тинтованном кружке */
.modal-delete .modal-icon {
    border-radius: 50%;
    background: var(--color-error-15);
    color: var(--color-error);
}

.modal-delete .modal-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Цветной подзаголовок шапки по семантике (delete/warning уже заданы ниже) */
.modal-container.modal-confirm .modal-header p { color: var(--color-info); }
.modal-container.modal-success .modal-header p { color: var(--color-success); }

/* Form modal */
.modal-form .modal-body {
    padding: 1.5rem;
}

.modal-form .input-label:first-child {
    margin-top: 0;
}

/* ========================================
   CUSTOM FILE UPLOAD
   ======================================== */

.file-upload-container {
    position: relative;
    width: 100%;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
    background-color: transparent;
}

/* Floating label for file upload */
.modal-form-group:has(.file-upload-container) > label {
    position: absolute;
    top: -8px;
    left: 13px;
    background-color: var(--color-bg-input);
    padding: 0 5px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    pointer-events: none;
    transition: color var(--transition-fast);
    z-index: 10;
}

.file-upload-container:hover {
    border-color: var(--color-brand-primary);
}

.file-upload-container:hover + .file-limitations-warning {
    border-color: var(--color-warning);
}

.modal-form-group:has(.file-upload-container:hover) > label {
    color: var(--color-brand-primary);
}

/* Hidden file input (covers entire area) */
.file-upload-container input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Visible display area (big clickable block) */
.file-upload-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background-color: transparent;
    color: var(--color-text-tertiary);
    font-size: 1rem;
    cursor: pointer;
    padding: 1rem 1rem;
    transition: all var(--transition-fast);
    border-radius: var(--radius-md);
}

.file-upload-display.has-files {
    background-color: var(--color-brand-primary-10);
    border-color: var(--color-brand-primary);
    color: var(--color-text);
}

.file-upload-display .file-count {
    font-size: 0.875rem;
    color: var(--color-brand-primary);
    margin-top: 0.5rem;
    font-weight: 500;
}

.file-upload-display .file-size {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
    font-weight: 400;
}

.file-upload-display .file-list {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-align: center;
    max-height: 60px;
    overflow-y: auto;
}

/* Drag and drop state */
.file-upload-display.dragover {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary-10);
}

/* ========================================
   FILE UPLOAD LIMITATIONS WARNING
   ======================================== */

.file-limitations-warning {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: var(--color-warning-10);
    border: 1px solid var(--color-warning-30);
    border-radius: var(--radius-md);
    text-align: center;
}

.limitation-text {
    margin: 0 0 6px 0;
    font-size: 0.75rem;
    color: var(--color-warning);
    font-weight: 500;
    line-height: 1.3;
}

.limitation-list {
    margin: 0;
    padding-left: 20px;
    text-align: left;
    list-style: none;
}

.limitation-list li {
    font-size: 0.6875rem;
    color: var(--color-warning);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 4px;
}

.limitation-list li:last-child {
    margin-bottom: 0;
}

/* ========================================
   UPLOAD STATUS CONTAINER
   ======================================== */

.media-status-container {
    margin: 1rem 0 0;
    padding: 1.2rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    min-height: 60px;
    height: 60px;
    display: none;
    align-items: center;
    justify-content: center;
}

.media-status-container.active {
    display: flex;
    background: linear-gradient(135deg, var(--color-brand-primary), var(--color-success));
    border-color: var(--color-brand-primary);
    box-shadow: 0 4px 20px var(--color-brand-primary-30);
    transform: scale(1.02);
}

.media-status-message {
    font-size: 0.875rem;
    color: var(--color-text);
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.4;
    transition: color var(--transition-normal);
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-status-container.active .media-status-message {
    color: white;
    font-weight: 500;
}

/* Blur form during upload */
.modal-container.uploading .modal-main > form {
    filter: blur(2px);
    opacity: 0.5;
    pointer-events: none;
    transition: all var(--transition-normal);
}

.modal-container.uploading .modal-header,
.modal-container.uploading .modal-footer {
    filter: blur(2px);
    opacity: 0.5;
    pointer-events: none;
    transition: all var(--transition-normal);
}

/* Status container stays clear (outside form) */
.modal-container.uploading .media-status-container {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Pulse animation for active status */
@keyframes statusPulse {
    0% { box-shadow: 0 4px 20px var(--color-brand-primary-30); }
    50% { box-shadow: 0 6px 30px var(--color-brand-primary-50); }
    100% { box-shadow: 0 4px 20px var(--color-brand-primary-30); }
}

.media-status-container.active {
    animation: statusPulse 2s ease-in-out infinite;
}

/* Status message color variants */
.media-status-message.status-error {
    color: var(--color-error);
}

.media-status-message.status-success {
    color: var(--color-success);
}

.media-status-message.status-loading {
    color: var(--color-info);
}

/* ========================================
   7.5. MODAL CONTAINER (YouTube-Manager style)
   ======================================== */

.modal-container {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    width: 600px;
    max-width: 95vw;
    max-height: 95vh;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.modal-container-lg { width: 800px; }
.modal-container-xl { width: 1000px; }
/* Очень широкая (не полноэкранная) — для сложных интерфейсов с большим контентом */
.modal-container-xxl { width: 1200px; max-height: 720px; }

/* ============ Fullscreen / immersive — галерея, upload, видеоредактор ============ */
/* Не выглядит как карточка-модалка: на весь экран, без рамок, крестик плавает поверх. */
.modal-overlay:has(.modal-fullscreen) { padding: 0; }

.modal-container.modal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    background: var(--color-bg-page);
    box-shadow: none;
}

/* Топбар как у image-viewer: тонкая полоса, заголовок слева + неон-тулбар + крестик */
.modal-container.modal-fullscreen .modal-header {
    flex-shrink: 0;
    padding: 8px 22px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
}

.modal-fullscreen .modal-header h2 {
    font-size: 1.15rem;
}

.modal-fullscreen .modal-main {
    background: var(--color-bg-page);
    flex: 1;
    min-height: 0;
}

/* ============ Nested modal — модалка поверх открытой модалки ============ */
/* Поднимается над родителем; родительский overlay остаётся → фон затемняется сильнее. */
.modal-overlay.modal-overlay--nested { z-index: 10050; }

/* Modal header for container */
.modal-container .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background-color: var(--color-bg-card);
    border-bottom: none;
}

.modal-container .modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-container .modal-header p {
    margin: 4px 0 0;
    font-size: 1rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Unified subtitle semantics */
.modal-container.modal-form .modal-header p {
    color: var(--color-success);
}

.modal-container.modal-delete .modal-header p {
    color: var(--color-error);
}

.modal-container.modal-warning .modal-header p {
    color: var(--color-warning);
}

/* Close button */
.modal-container .close-button {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 0.8;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.modal-container .close-button:hover {
    opacity: 1;
}

/* Modal main content */
.modal-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--color-bg-input);
    padding: 20px 24px 24px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Override input label surface for darker modal background */
    --input-label-surface: var(--color-bg-input);
}

/* Form inside modal-main - add gap between children */
.modal-main > form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form group with floating label */
.modal-form-group {
    position: relative;
    margin-bottom: 22px;
    overflow: visible;
}

.modal-form-group label {
    position: absolute;
    top: -8px;
    left: 13px;
    background-color: var(--color-bg-input);
    padding: 0 5px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    pointer-events: none;
    transition: color var(--transition-fast);
    z-index: 10;
}

/* Form row (side-by-side fields) */
/* Грид-ряд: все дети в одну строку, равные колонки с min-width:0 (нет переполнения
   при длинном контенте/дропдаунах — это чинило «глюки» flex-версии). */
.modal-form-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Явные модификаторы числа колонок (по желанию) */
.modal-form-row--2 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-form-row--3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal-form-row--auto { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Inside modal-main - gap handles spacing, no extra margin needed */
.modal-main .modal-form-row {
    margin-bottom: 0;
}

.modal-form-row .modal-form-group {
    flex: 1;
    margin-bottom: 0;
}

/* Align icon filter group with dropdown */
.modal-form-row .icon-toggle-group {
    align-self: center;
    margin-bottom: 0;
}

/* Input-label inside modal-main - gap handles spacing */
.modal-main .input-label {
    --input-label-surface: var(--color-bg-input);
    margin-bottom: 0;
    margin-top: 0;
}

.modal-main .input-label:first-child {
    margin-top: 0;
}

.modal-main .input-label-text {
    background: var(--color-bg-input);
}

.modal-form-row .input-label {
    flex: 1;
}

/* Hover states for form elements inside modal */
.modal-main .input-label:hover .form-control,
.modal-main .input-label:hover .form-select,
.modal-main .input-label:hover .color-picker-shell,
.modal-main .input-label:hover .switch-setting-box {
    border-color: var(--color-brand-primary);
}

.modal-main .input-label:hover .form-control.is-warning,
.modal-main .input-label:hover .form-select.is-warning {
    border-color: var(--color-warning);
}

.modal-main .input-label:hover .form-control.is-error,
.modal-main .input-label:hover .form-select.is-error {
    border-color: var(--color-error);
}

.modal-main .dropdown-custom:hover .dropdown-custom-toggle {
    border-color: var(--color-brand-primary);
}

.modal-main .dropdown-custom:hover .dropdown-custom-toggle.is-warning {
    border-color: var(--color-warning);
}

.modal-main .dropdown-custom:hover .dropdown-custom-toggle.is-error {
    border-color: var(--color-error);
}

/* Dropdown-custom inside modal-main - gap handles spacing */
.modal-main .dropdown-custom {
    margin-bottom: 0;
    margin-top: 0;
}

.modal-main .dropdown-custom:first-child,
.modal-main .dropdown-floating:first-child {
    margin-top: 0;
}

.modal-main .dropdown-floating-label {
    background: var(--input-label-surface);
}

.modal-form-row .dropdown-custom {
    flex: 1;
}

/* Dropdown z-index inside modal (fallback, JS sets fixed positioning) */
.modal-main .dropdown-custom-menu {
    z-index: 10001;
}

/* Disabled dropdown state - see forms.css */

/* Switch-setting-box inside modal - match modal-main background */
.modal-main .switch-setting-box {
    background: var(--color-bg-input);
    border-color: var(--color-border);
}

/* Color-picker-shell inside modal - match modal-main background */
.modal-main .color-picker-shell {
    background: var(--color-bg-input);
}

/* Range slider inside modal */
.modal-main .range-input-label {
    --input-label-surface: var(--color-bg-input);
    margin-bottom: 0;
}

.modal-main .range-input-label .input-label-text {
    background: var(--color-bg-input);
}

/* Audio settings modal — even vertical rhythm between per-provider sliders.
   The 4 .input-label--range boxes sit inside #audioSettingsContent (not a
   direct child of .modal-main), so they don't inherit the .modal-main gap. */
.audio-settings-sliders {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

/* Form inputs - use .form-control from forms.css */

/* Modal footer for container */
.modal-container .modal-footer {
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    background-color: var(--color-bg-card);
    border-top: none;
}

/* Modal buttons - compact style like page header buttons */
.modal-container .modal-footer .neon-btn-purple,
.modal-container .modal-footer .neon-btn-blue,
.modal-container .modal-footer .neon-btn-red,
.modal-container .modal-footer .neon-btn-yellow,
.modal-container .modal-footer .neon-btn-green,
.modal-container .modal-footer .neon-btn-teal,
.modal-container .modal-footer .neon-btn-cyan {
    flex: 1;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

/* ========================================
   8. ANIMATIONS
   ======================================== */

@keyframes modal-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.modal-container.shake {
    animation: modal-shake 0.4s ease;
}

@keyframes modal-bounce {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.modal-overlay.active .modal-container.bounce {
    animation: modal-bounce 0.3s ease;
}

/* ========================================
   9. RESPONSIVE
   ======================================== */

/* Responsive for .modal-container defined in section 11 */

/* ========================================
   10. DRAWER (side panel variant)
   ======================================== */

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: var(--color-bg-card);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    z-index: 10000;
}

.drawer-overlay.active .drawer {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 63px;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.drawer-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.drawer-body {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Расстояние между элементами задаёт только flex-gap.
   Гасим собственный margin-bottom макро-полей (.input-label = 1.5rem из
   forms.css). Селектор с .input-label поднимает специфичность выше forms.css
   (которая грузится позже), иначе margin складывается с gap и даёт ~2rem. */
.drawer-body > *,
.drawer-body > .input-label {
    margin-bottom: 0;
}

.drawer-footer {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Light theme: шапка + футер drawer чёрные (тело светлое). Инверсия токенов. */
[data-theme="light"] .drawer-header,
[data-theme="light"] .drawer-footer {
    background: var(--color-bg-inverse);
    --color-text-primary: var(--color-text-on-inverse-strong);
    --color-text: var(--color-text-on-inverse);
    --color-text-secondary: var(--color-text-on-inverse-muted);
    --color-border: var(--color-border-on-inverse);
}
[data-theme="light"] .drawer-header { border-bottom-color: var(--color-border-on-inverse); }
[data-theme="light"] .drawer-footer { border-top-color: var(--color-border-on-inverse); }

/* Left drawer */
.drawer.drawer-left {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--color-border);
    transform: translateX(-100%);
}

.drawer-overlay.active .drawer.drawer-left {
    transform: translateX(0);
}

/* ========================================
   11. MODAL CONTAINER RESPONSIVE
   ======================================== */

/* Tablet: 768px */

/* Mobile: 480px */

/* Small mobile: 374px */

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */

/* Modal container - white bg */
[data-theme="light"] .modal-container {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

/* Modal header - black bg, white text, single line */
[data-theme="light"] .modal-container .modal-header {
    background: var(--color-bg-inverse);
    border-bottom: none;
}

[data-theme="light"] .modal-container .modal-header h2 {
    color: var(--color-text-on-accent);
}

/* Keep subtitle visible in light theme with same semantic colors */
[data-theme="light"] .modal-container .modal-header p {
    display: block;
    color: var(--color-text-secondary);
}

/* Keep category-create subtitle visible and green in all themes */
#createCategoryModal .modal-header p {
    color: var(--color-success);
}

[data-theme="light"] #createCategoryModal .modal-header p {
    display: block;
    color: var(--color-success);
}

[data-theme="light"] .modal-container.modal-form .modal-header p {
    color: var(--color-success);
}

[data-theme="light"] .modal-container.modal-delete .modal-header p {
    color: var(--color-error);
}

[data-theme="light"] .modal-container.modal-warning .modal-header p {
    color: var(--color-warning);
}

/* Close button - white (not gray) */
[data-theme="light"] .modal-close {
    color: var(--color-text-on-accent);
}

[data-theme="light"] .modal-close:hover {
    color: var(--color-text-on-accent);
    background: color-mix(in srgb, var(--color-text-on-accent) 20%, transparent);
}

[data-theme="light"] .modal-container .close-button {
    color: var(--color-text-on-accent);
}

[data-theme="light"] .modal-container .close-button:hover {
    color: var(--color-text-on-accent);
    opacity: 0.8;
}

/* Modal body - white */
[data-theme="light"] .modal-body {
    background: var(--color-bg-card);
}

[data-theme="light"] .modal-body p {
    color: var(--color-text);
}

/* Modal main (form area) - white */
[data-theme="light"] .modal-main {
    background: var(--color-bg-card);
    --input-label-surface: var(--color-bg-input);
}

[data-theme="light"] .modal-main .input-label-text {
    color: var(--color-text-primary);
    font-weight: 600;
}

[data-theme="light"] .modal-main .dropdown-floating-label {
    color: var(--color-text-primary);
    font-weight: 600;
}

[data-theme="light"] .modal-main .dropdown-floating-label.is-warning {
    color: var(--color-warning);
}

[data-theme="light"] .modal-main .dropdown-floating-label.is-error {
    color: var(--color-error);
}

[data-theme="light"] .modal-main .input-label:hover .form-control,
[data-theme="light"] .modal-main .input-label:hover .form-select,
[data-theme="light"] .modal-main .input-label:hover .color-picker-shell,
[data-theme="light"] .modal-main .input-label:hover .switch-setting-box {
    border-color: var(--color-text-primary);
    border-width: 2px;
}

[data-theme="light"] .modal-main .input-label:hover .form-control.is-warning,
[data-theme="light"] .modal-main .input-label:hover .form-select.is-warning {
    border-color: var(--color-warning);
}

[data-theme="light"] .modal-main .input-label:hover .form-control.is-error,
[data-theme="light"] .modal-main .input-label:hover .form-select.is-error {
    border-color: var(--color-error);
}

[data-theme="light"] .modal-main .dropdown-custom:hover .dropdown-custom-toggle,
[data-theme="light"] .modal-main .dropdown-custom.open .dropdown-custom-toggle {
    border-color: var(--color-text-primary);
    border-width: 2px;
}

[data-theme="light"] .modal-main .dropdown-custom:hover .dropdown-custom-toggle.is-warning,
[data-theme="light"] .modal-main .dropdown-custom.open .dropdown-custom-toggle.is-warning {
    border-color: var(--color-warning);
}

[data-theme="light"] .modal-main .dropdown-custom:hover .dropdown-custom-toggle.is-error,
[data-theme="light"] .modal-main .dropdown-custom.open .dropdown-custom-toggle.is-error {
    border-color: var(--color-error);
}

/* Modal footer - gray */
[data-theme="light"] .modal-footer,
[data-theme="light"] .modal-container .modal-footer {
    background: var(--color-bg-card-hover);
    border-top: 1px solid var(--color-border);
}

/* Drawer */
/* Light theme drawer: цвета из токенов (--color-bg-card/-border), отдельный override не нужен. */