/**
 * AFSNote - Modal Styles
 * All modal/dialog windows
 */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal.show {
    display: flex;
}

.modal.show .modal-backdrop {
    opacity: 1;
}

.modal.show .modal-content {
    opacity: 1;
    transform: scale(1);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.modal-content {
    position: relative;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    margin: auto;
}

.modal-content.modal-sm {
    max-width: 340px;
}

.modal-header {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

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

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

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Font Size Modal */
.font-size-display {
    text-align: center;
    font-size: 48px;
    font-weight: 600;
    color: var(--accent);
    padding: 20px 0;
}

/* About Modal */
.about-body {
    text-align: center;
}

.about-logo {
    color: var(--accent);
    margin-bottom: 16px;
}

.about-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.about-version {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.about-tagline {
    font-size: 15px;
    color: var(--accent);
    font-style: italic;
    margin-bottom: 24px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.about-feature {
    font-size: 13px;
    color: var(--text);
    padding: 8px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.about-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.about-privacy svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* Delete Modal */
.delete-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 12px 0;
}

.delete-warning svg {
    color: var(--danger);
}

.delete-warning p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.delete-warning span {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Delete Folder Warning */
.delete-folder-warning {
    text-align: center;
    padding: 20px 0;
}

.delete-folder-warning svg {
    color: var(--danger);
    margin-bottom: 16px;
}

.delete-folder-warning p {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: var(--text);
}

.delete-folder-warning span {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Radio Group */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.radio-option:hover {
    border-color: var(--accent);
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.radio-option span {
    font-size: 14px;
    color: var(--text);
}

.radio-option .text-danger {
    color: var(--danger);
}

/* ================================
   FOLDER SELECTOR BUTTON
   ================================ */
.folder-selector-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.folder-selector-btn:hover {
    border-color: var(--accent);
}

.folder-selector-btn:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59, 130, 246), 0.15);
}

.folder-selector-btn span {
    flex: 1;
}

.folder-selector-btn.open .folder-selector-arrow {
    transform: rotate(180deg);
}

.folder-selector-arrow {
    transition: transform var(--transition-fast);
}

/* ================================
   FOLDER POPUP (Separate layer)
   ================================ */
.folder-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.folder-popup.show {
    display: block;
}

.folder-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.folder-popup-content {
    position: absolute;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 6px 0;
    min-width: 200px;
    max-width: 90vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.folder-selector-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.folder-selector-item:hover {
    background: var(--divider);
}

.folder-selector-item.active {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.1);
    color: var(--accent);
}

.folder-selector-item svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.folder-selector-item.active svg:first-child {
    color: var(--accent);
}

.folder-selector-item span {
    flex: 1;
}

.folder-check {
    display: none;
    color: var(--accent);
}

.folder-selector-item.active .folder-check {
    display: block;
}

.folder-selector-divider {
    height: 1px;
    background: var(--divider);
    margin: 4px 0;
    flex-shrink: 0;
}

.folder-selector-list {
    max-height: 176px; /* ~4 items */
    overflow-y: auto;
    flex-shrink: 1;
}

.folder-selector-list:empty {
    display: none;
}

.folder-selector-list:empty + .folder-selector-divider {
    display: none;
}

.folder-selector-list::-webkit-scrollbar {
    width: 6px;
}

.folder-selector-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.folder-selector-new {
    color: var(--accent);
    flex-shrink: 0;
}

.folder-selector-new svg {
    color: var(--accent) !important;
}

/* New folder input */
.folder-new-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
}

.folder-new-input-wrapper svg {
    flex-shrink: 0;
    color: var(--accent);
}

.folder-new-input {
    flex: 1;
    padding: 8px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
}

.folder-new-input::placeholder {
    color: var(--text-secondary);
}

/* ================================
   FILE TYPE SELECTOR
   ================================ */
.filetype-selector-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.filetype-selector-btn:hover {
    border-color: var(--accent);
}

.filetype-selector-btn:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59, 130, 246), 0.15);
}

.filetype-selector-btn span {
    flex: 1;
}

.filetype-selector-btn.open .filetype-selector-arrow {
    transform: rotate(180deg);
}

.filetype-selector-arrow {
    transition: transform var(--transition-fast);
}

/* File Type Popup */
.filetype-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.filetype-popup.show {
    display: block;
}

.filetype-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.filetype-popup-content {
    position: absolute;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 6px 0;
    min-width: 200px;
    max-width: 90vw;
    overflow: hidden;
}

.filetype-selector-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.filetype-selector-item:hover {
    background: var(--divider);
}

.filetype-selector-item.active {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.1);
    color: var(--accent);
}

.filetype-selector-item svg:first-child {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.filetype-selector-item.active svg:first-child {
    color: var(--accent);
}

.filetype-selector-item span:first-of-type {
    font-weight: 500;
    min-width: 50px;
}

.filetype-desc {
    flex: 1;
    color: var(--text-secondary);
    font-weight: 400 !important;
}

.filetype-selector-item.active .filetype-desc {
    color: var(--accent);
    opacity: 0.8;
}

.filetype-check {
    display: none;
    color: var(--accent);
    flex-shrink: 0;
}

.filetype-selector-item.active .filetype-check {
    display: block;
}

/* ================================
   THEME SELECTOR MODAL
   ================================ */
.modal-content.modal-lg {
    max-width: 600px;
    max-height: 80vh;
    max-height: 80dvh;
}

.theme-selector-body {
    padding: 8px 0;
}

.theme-category {
    margin-bottom: 20px;
}

.theme-category:last-child {
    margin-bottom: 0;
}

.theme-category h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-card:hover {
    background: var(--divider);
}

.theme-card.active {
    border-color: var(--accent);
    background: var(--surface-elevated);
}

.theme-card span {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
}

.theme-card.active span {
    color: var(--accent);
    font-weight: 500;
}

/* Theme Preview Thumbnails */
.theme-preview-large {
    width: 60px;
    height: 44px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Generate preview backgrounds using theme colors */
.theme-preview-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--surface);
}

.theme-preview-large::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 6px;
    right: 6px;
    height: 3px;
    background: var(--text-secondary);
    opacity: 0.4;
    border-radius: 1px;
    box-shadow: 
        0 6px 0 var(--text-secondary),
        0 12px 0 var(--text-secondary);
}

/* Light theme previews */
.theme-preview-large.light-default { background: #ffffff; --surface: #f5f5f5; --text-secondary: #666666; }
.theme-preview-large.light-paper { background: #faf8f5; --surface: #f5f2ed; --text-secondary: #6b6560; }
.theme-preview-large.light-notion { background: #ffffff; --surface: #f7f6f3; --text-secondary: #787774; }
.theme-preview-large.light-github { background: #ffffff; --surface: #f6f8fa; --text-secondary: #57606a; }
.theme-preview-large.light-solarized { background: #fdf6e3; --surface: #eee8d5; --text-secondary: #93a1a1; }
.theme-preview-large.light-mint { background: #f0fdf4; --surface: #dcfce7; --text-secondary: #166534; }
.theme-preview-large.light-rose { background: #fff1f2; --surface: #ffe4e6; --text-secondary: #9f1239; }

/* Dark theme previews */
.theme-preview-large.dark-default { background: #0a0a0a; --surface: #171717; --text-secondary: #a1a1aa; }
.theme-preview-large.dark-obsidian { background: #1e1e1e; --surface: #262626; --text-secondary: #888888; }
.theme-preview-large.dark-vscode { background: #1e1e1e; --surface: #252526; --text-secondary: #808080; }
.theme-preview-large.dark-github { background: #0d1117; --surface: #161b22; --text-secondary: #8b949e; }
.theme-preview-large.dark-dracula { background: #282a36; --surface: #343746; --text-secondary: #6272a4; }
.theme-preview-large.dark-nord { background: #2e3440; --surface: #3b4252; --text-secondary: #d8dee9; }
.theme-preview-large.dark-solarized { background: #002b36; --surface: #073642; --text-secondary: #657b83; }
.theme-preview-large.dark-monokai { background: #272822; --surface: #3e3d32; --text-secondary: #75715e; }
.theme-preview-large.dark-one { background: #21252b; --surface: #282c34; --text-secondary: #636d83; }
.theme-preview-large.dark-tokyo { background: #1a1b26; --surface: #24283b; --text-secondary: #565f89; }
.theme-preview-large.dark-gruvbox { background: #282828; --surface: #3c3836; --text-secondary: #a89984; }
.theme-preview-large.dark-midnight { background: #0f172a; --surface: #1e293b; --text-secondary: #94a3b8; }
.theme-preview-large.dark-amoled { background: #000000; --surface: #0a0a0a; --text-secondary: #888888; }

/* Special theme previews */
.theme-preview-large.special-sepia { background: #f4ecd8; --surface: #e8dcc8; --text-secondary: #7d6b56; }
.theme-preview-large.special-contrast-light { background: #ffffff; --surface: #f0f0f0; --text-secondary: #333333; }
.theme-preview-large.special-contrast-dark { background: #000000; --surface: #1a1a1a; --text-secondary: #cccccc; }