/**
 * File Director – Modern tema (iOS 2 → 11 tərzi)
 * Rəngli, çox animasiyalı, müasir görünüş.
 * Bütün seçimlər body.theme-modern altında.
 */

@keyframes fd-modern-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fd-modern-shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes fd-modern-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes fd-modern-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

body.theme-modern {
    --m-bg: #f0f2ff;
    --m-surface: #ffffff;
    --m-surface-2: #f8f9ff;
    --m-border: #e0e4f0;
    --m-text: #1a1d2e;
    --m-text-muted: #5c6178;
    --m-accent: #6366f1;
    --m-accent-2: #8b5cf6;
    --m-accent-3: #ec4899;
    --m-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --m-gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.08) 100%);
    --m-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
    --m-shadow-hover: 0 12px 32px rgba(99, 102, 241, 0.15);
    --m-radius: 16px;
    --m-radius-sm: 12px;
    --m-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    --m-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--m-font);
    background: linear-gradient(160deg, #e8ebff 0%, #f0f2ff 40%, #fdf2f8 100%);
    background-attachment: fixed;
    color: var(--m-text);
    transition: background var(--m-transition);
}

body.theme-modern .app-window {
    max-width: 960px;
    margin: 24px auto;
    background: var(--m-surface);
    border-radius: 20px;
    box-shadow: var(--m-shadow), 0 0 0 1px rgba(99, 102, 241, 0.06);
    overflow: hidden;
    animation: fd-modern-fade-in 0.4s ease;
    transition: box-shadow var(--m-transition), transform var(--m-transition);
}

body.theme-modern .app-window:hover {
    box-shadow: var(--m-shadow-hover), 0 0 0 1px rgba(99, 102, 241, 0.08);
}

body.theme-modern .window-titlebar {
    height: 32px;
    background: var(--m-gradient);
    border-bottom: none;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 10px;
    transition: opacity var(--m-transition);
}

body.theme-modern .window-titlebar .traffic {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

body.theme-modern .window-titlebar .traffic:hover {
    transform: scale(1.15);
}

body.theme-modern .window-titlebar .traffic.close    { background: #ff5f57; }
body.theme-modern .window-titlebar .traffic.minimize  { background: #febc2e; }
body.theme-modern .window-titlebar .traffic.maximize  { background: #28c840; }
body.theme-modern .window-titlebar .title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Toolbar */
body.theme-modern .toolbar {
    padding: 14px 18px;
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    transition: background var(--m-transition);
}

body.theme-modern .toolbar-btn {
    padding: 9px 18px;
    font-family: var(--m-font);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    background: var(--m-surface);
    color: var(--m-text);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    text-decoration: none;
    transition: all var(--m-transition);
}

body.theme-modern .toolbar-btn:hover {
    background: var(--m-surface-2);
    border-color: var(--m-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
}

body.theme-modern .toolbar-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

body.theme-modern .toolbar-btn.primary {
    background: var(--m-gradient);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

body.theme-modern .toolbar-btn.primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

body.theme-modern .toolbar-divider {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, var(--m-border), transparent);
    margin: 0 6px;
}

body.theme-modern .toolbar-search {
    padding: 9px 16px 9px 38px;
    border: 1px solid var(--m-border);
    border-radius: 12px;
    background: var(--m-surface);
    font-size: 13px;
    color: var(--m-text);
    transition: all var(--m-transition);
}

body.theme-modern .toolbar-search:focus {
    outline: none;
    border-color: var(--m-accent);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Search panel */
body.theme-modern .search-panel {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-hover);
    padding: 18px;
    animation: fd-modern-fade-in 0.25s ease;
}

body.theme-modern .search-panel-label {
    color: var(--m-text);
    font-weight: 600;
}

body.theme-modern .search-panel-input {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    background: var(--m-surface);
    color: var(--m-text);
    transition: border-color var(--m-transition), box-shadow var(--m-transition);
}

body.theme-modern .search-panel-input:focus {
    outline: none;
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Sidebar */
body.theme-modern .sidebar {
    width: 220px;
    background: var(--m-surface-2);
    border-right: 1px solid var(--m-border);
    padding: 14px 0;
    flex-shrink: 0;
    transition: background var(--m-transition);
}

body.theme-modern .sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 18px;
}

body.theme-modern .sidebar-item {
    padding: 11px 18px;
    color: var(--m-text);
    font-size: 14px;
    border-radius: 0 12px 12px 0;
    margin: 0 8px;
    transition: all var(--m-transition);
}

body.theme-modern .sidebar-item:hover {
    background: var(--m-gradient-soft);
    color: var(--m-accent);
    transform: translateX(4px);
}

body.theme-modern .sidebar-item.active {
    background: var(--m-gradient);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

body.theme-modern .sidebar-item.sidebar-drop-active {
    background: var(--m-gradient-soft);
    outline: 2px dashed var(--m-accent);
    animation: fd-modern-pulse 1.5s ease infinite;
}

/* Content */
body.theme-modern .content {
    background: var(--m-surface);
    border-left: 1px solid var(--m-border);
}

body.theme-modern .content-header {
    padding: 14px 20px;
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-border);
    font-size: 13px;
    color: var(--m-text-muted);
    transition: background var(--m-transition);
}

body.theme-modern .selected-counter {
    color: var(--m-accent);
    font-weight: 600;
}

body.theme-modern .breadcrumb-segment {
    transition: all 0.2s ease;
}

body.theme-modern .breadcrumb-segment:hover {
    background: var(--m-gradient-soft);
    color: var(--m-accent);
    border-radius: 6px;
}

body.theme-modern .search-results-bar {
    padding: 14px 20px;
    background: var(--m-gradient-soft);
    border-bottom: 1px solid var(--m-border);
    font-size: 13px;
    animation: fd-modern-fade-in 0.3s ease;
}

body.theme-modern .search-results-summary {
    color: var(--m-accent);
    font-weight: 600;
}

body.theme-modern .content-body {
    background: var(--m-surface);
    padding: 14px;
}

/* File table */
body.theme-modern .file-table {
    font-size: 14px;
    border-radius: var(--m-radius-sm);
    overflow: hidden;
}

body.theme-modern .file-table th {
    padding: 14px 18px;
    background: var(--m-surface-2);
    border-bottom: 1px solid var(--m-border);
    font-weight: 600;
    color: var(--m-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background var(--m-transition);
}

body.theme-modern .file-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    color: var(--m-text);
    transition: background var(--m-transition);
}

body.theme-modern .file-table tbody tr {
    background: var(--m-surface);
    transition: all var(--m-transition);
}

body.theme-modern .file-table tbody tr:hover {
    background: var(--m-gradient-soft);
}

body.theme-modern .file-table tbody tr.selected {
    background: var(--m-gradient-soft);
    border-left: 4px solid var(--m-accent);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.1);
}

body.theme-modern .file-table .file-size,
body.theme-modern .file-table .file-date {
    color: var(--m-text-muted);
    font-size: 13px;
}

/* File actions */
body.theme-modern .file-actions-btn {
    border: 1px solid var(--m-border);
    border-radius: 10px;
    background: var(--m-surface);
    color: var(--m-text-muted);
    transition: all 0.2s ease;
}

body.theme-modern .file-actions-btn:hover {
    background: var(--m-gradient-soft);
    color: var(--m-accent);
    border-color: var(--m-accent);
}

body.theme-modern .file-actions-dropdown {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    box-shadow: var(--m-shadow-hover);
    padding: 8px 0;
    animation: fd-modern-fade-in 0.2s ease;
}

body.theme-modern .file-action-item {
    color: var(--m-text);
    padding: 11px 18px;
    transition: all 0.2s ease;
}

body.theme-modern .file-action-item:hover {
    background: var(--m-gradient-soft);
    color: var(--m-accent);
    padding-left: 22px;
}

/* Grid / file cards */
body.theme-modern .view-grid .file-grid {
    gap: 18px;
    padding: 14px;
}

body.theme-modern .file-card {
    padding: 18px 14px;
    border-radius: var(--m-radius);
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    transition: all var(--m-transition);
    animation: fd-modern-fade-in 0.35s ease backwards;
}

body.theme-modern .file-card:nth-child(1) { animation-delay: 0.02s; }
body.theme-modern .file-card:nth-child(2) { animation-delay: 0.04s; }
body.theme-modern .file-card:nth-child(3) { animation-delay: 0.06s; }
body.theme-modern .file-card:nth-child(4) { animation-delay: 0.08s; }
body.theme-modern .file-card:nth-child(5) { animation-delay: 0.1s; }
body.theme-modern .file-card:nth-child(6) { animation-delay: 0.12s; }
body.theme-modern .file-card:nth-child(7) { animation-delay: 0.14s; }
body.theme-modern .file-card:nth-child(8) { animation-delay: 0.16s; }

body.theme-modern .file-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--m-shadow-hover);
    border-color: rgba(99, 102, 241, 0.3);
}

body.theme-modern .file-card.selected {
    background: var(--m-gradient-soft);
    border-color: var(--m-accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

body.theme-modern .file-card .file-icon {
    background: var(--m-gradient-soft);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    transition: transform 0.25s ease;
}

body.theme-modern .file-card .file-icon.file-icon--thumb {
    background: linear-gradient(145deg, #1a1a24 0%, #252532 100%);
    padding: 0;
}

body.theme-modern .file-card:hover .file-icon {
    transform: scale(1.05);
}

body.theme-modern .file-card .file-name {
    color: var(--m-text);
    font-size: 13px;
}

/* Context menu */
body.theme-modern .context-menu {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    box-shadow: var(--m-shadow-hover);
    padding: 8px 0;
    animation: fd-modern-fade-in 0.2s ease;
}

body.theme-modern .context-menu-item {
    color: var(--m-text);
    padding: 11px 18px;
    transition: all 0.2s ease;
}

body.theme-modern .context-menu-item:hover {
    background: var(--m-gradient-soft);
    color: var(--m-accent);
    padding-left: 22px;
}

/* Empty state */
body.theme-modern .empty-state .upload-zone {
    border: 2px dashed var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface-2);
    transition: all var(--m-transition);
}

body.theme-modern .empty-state .upload-zone:hover,
body.theme-modern .empty-state .upload-zone.dragover {
    border-color: var(--m-accent);
    background: var(--m-gradient-soft);
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}

/* Modals */
body.theme-modern .modal-overlay {
    background: rgba(26, 29, 46, 0.4);
    backdrop-filter: blur(8px);
    animation: fd-modern-fade-in 0.2s ease;
}

body.theme-modern .modal-box {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 20px;
    box-shadow: var(--m-shadow-hover);
    animation: fd-modern-fade-in 0.3s ease;
}

body.theme-modern .modal-title {
    background: var(--m-gradient);
    color: #fff;
    border-bottom: none;
    font-weight: 600;
    padding: 16px 24px;
}

body.theme-modern .modal-actions {
    background: var(--m-surface-2);
    border-top: 1px solid var(--m-border);
}

body.theme-modern #modal-user .modal-header--user {
    background: var(--m-gradient);
    border-bottom: none;
    padding: 16px 24px;
}
body.theme-modern #modal-user .modal-header--user h2 {
    color: #fff;
    text-align: center;
    font-size: 18px;
}
body.theme-modern #modal-user .form-group label {
    color: var(--m-text-muted);
}
body.theme-modern #modal-user .modal-body {
    padding: 24px 28px;
}
body.theme-modern #modal-user .modal-actions--user {
    padding: 16px 24px;
}

/* Status bar */
body.theme-modern .status-bar {
    padding: 10px 20px;
    background: var(--m-surface-2);
    border-top: 1px solid var(--m-border);
    font-size: 12px;
    color: var(--m-text-muted);
}

/* Toast */
body.theme-modern .toast {
    border-radius: var(--m-radius-sm);
    box-shadow: var(--m-shadow-hover);
    animation: fd-modern-fade-in 0.3s ease, fd-modern-float 3s ease infinite 0.5s;
}

/* Pagination */
body.theme-modern .pagination-bar {
    border-top: 1px solid var(--m-border);
    padding: 14px;
    background: var(--m-surface-2);
}

body.theme-modern .pagination-btn {
    transition: all 0.2s ease;
}

body.theme-modern .pagination-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

/* Settings buttons active */
body.theme-modern .lang-btn.active,
body.theme-modern .daynight-btn.active,
body.theme-modern .site-theme-btn.active {
    background: var(--m-gradient-soft) !important;
    border-color: var(--m-accent) !important;
    color: var(--m-accent) !important;
    font-weight: 600;
}

/* Shared page */
body.theme-modern .shared-page {
    max-width: 720px;
}

body.theme-modern .shared-preview-wrap {
    border-color: var(--m-border);
    background: var(--m-surface);
    border-radius: var(--m-radius);
    overflow: hidden;
    animation: fd-modern-fade-in 0.3s ease;
}

/* Kod önizləməsi – Modern tema */
body.theme-modern .fd-code-view {
    --fd-code-bg: var(--m-surface-2);
    border-color: var(--m-border);
    border-radius: var(--m-radius-sm);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
}
body.theme-modern .fd-code-view pre {
    color: var(--m-text);
}
body.theme-modern .fd-code-view pre code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

body.theme-modern .fd-media-player {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-hover);
    overflow: hidden;
}
body.theme-modern .fd-media-controls .fd-progress-fill,
body.theme-modern .fd-media-controls .fd-volume-fill {
    background: var(--m-gradient);
}
body.theme-modern .fd-media-controls .fd-btn:hover {
    background: var(--m-gradient-soft);
    color: var(--m-accent);
}
body.theme-modern .fd-media-audio .fd-media-stage {
    background: var(--m-gradient-soft);
}
body.theme-modern .fd-media-audio .fd-media-poster {
    color: var(--m-accent);
}

/* Gecə rejimi – Modern */
body.theme-modern.theme-dark {
    --m-bg: #1a1d2e;
    --m-surface: #252836;
    --m-surface-2: #2d3142;
    --m-border: #3a3f54;
    --m-text: #e8eaef;
    --m-text-muted: #8b8fa3;
    --m-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --m-gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(168,85,247,0.12) 100%);
    --m-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --m-shadow-hover: 0 12px 36px rgba(99, 102, 241, 0.15);
}

body.theme-modern.theme-dark {
    background: linear-gradient(160deg, #15172a 0%, #1a1d2e 50%, #1e1335 100%);
}

body.theme-modern.theme-dark .shared-preview-wrap .preview-header {
    background: var(--m-surface-2);
}

/* Responsive */
@media (max-width: 768px) {
    body.theme-modern .app-window {
        margin: 12px auto;
        border-radius: 12px;
    }
    body.theme-modern .file-card:hover {
        transform: translateY(-2px);
    }
}