/* Classic folder cards: a real folder icon with the name below, no bubble, no file preview. */
#libraryView .documents-grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#libraryView .library-content > #librarySearchBar {
    margin-bottom: 12px !important;
}

/* No card/bubble around folders: transparent, centered, folder on top + name below. */
#libraryView .folder-card {
    min-height: 0 !important;
    padding: 8px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transition: transform 140ms ease !important;
}

#libraryView .folder-card:hover {
    background: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

/* Classic folder visual: plain folder SVG, nothing else. */
#libraryView .folder-card .folder-visual,
#libraryView .folder-card .folder-visual.classic-folder {
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#libraryView .folder-card .folder-visual::before {
    content: none !important;
    display: none !important;
}

#libraryView .folder-card .classic-folder-svg {
    width: 104px !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22)) !important;
}

/* Legacy preview/emoji/meta elements are gone from the markup;
   hide them defensively in case an old card is still in the DOM. */
#libraryView .folder-card .folder-card-icon,
#libraryView .folder-card .folder-cover,
#libraryView .folder-card .folder-preview-stack,
#libraryView .folder-card .folder-preview-tile,
#libraryView .folder-card .document-meta {
    display: none !important;
}

/* Only the name below the folder. */
#libraryView .folder-card .document-name {
    margin: 8px 0 0 !important;
    max-width: 128px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#libraryView .folder-card .folder-card-actions {
    top: 2px !important;
    right: 50% !important;
    margin-right: -62px !important;
}

#libraryView .folder-card .folder-menu-btn {
    width: 26px !important;
    height: 26px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}

#libraryView .folder-card .folder-menu-btn:hover,
#libraryView .folder-card .folder-menu-btn:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
}

/* Keep the options bubble outside the folder card instead of over its preview. */
#libraryView .folder-card .folder-menu {
    top: -8px !important;
    left: calc(100% + 8px) !important;
    right: auto !important;
    min-width: 154px !important;
    z-index: 30 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    background: var(--bg-secondary, var(--modal-bg)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
    text-align: left !important;
}

#libraryView .folder-card .folder-menu.opens-left {
    left: auto !important;
    right: calc(100% + 8px) !important;
}

body.light-mode #libraryView .folder-card {
    background: transparent !important;
}

body.light-mode #libraryView .folder-card:hover {
    background: transparent !important;
}

/* One drawn icon family for folder faces and appearance controls. */
.library-folder-glyph { width: 24px; height: 24px; display: block; flex-shrink: 0; }
#libraryView .classic-folder-svg .library-folder-glyph { width: 28px; height: 28px; opacity: .82; }
:is(#newFolderModal, #renameFolderModal) :is(#selectedFolderEmoji, #renameFolderEmoji) {
    display: flex; align-items: center; justify-content: center; color: var(--chosen-folder-color, #ffc849); font-size: 0 !important;
}
:is(#folderEmojiPickerGrid, #renameFolderEmojiPickerGrid) {
    display: grid !important; grid-template-columns: repeat(6, 34px); width: max-content !important; gap: 5px !important;
    padding: 10px !important; max-width: calc(100vw - 64px); background: var(--bg-sidebar, #272624) !important;
}
:is(#folderEmojiPickerGrid, #renameFolderEmojiPickerGrid).hidden { display: none !important; }
.folder-symbol-option {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 36px; padding: 5px;
    border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-secondary, #aaa); cursor: pointer;
}
.folder-symbol-option:hover { background: var(--hover-bg, #ffffff0d); color: var(--text-primary, #eee); }
.folder-symbol-option[aria-pressed="true"] { color: var(--chosen-folder-color, #ffc849); border-color: currentColor; background: var(--hover-bg, #ffffff0d); }
.folder-color-field { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.folder-color-field legend { font: inherit; font-size: 12px; font-weight: 500; color: var(--text-secondary, #aaa); margin-bottom: 12px; }
.folder-color-options { display: flex; flex-wrap: wrap; gap: 10px; padding: 3px; }
.folder-color-swatch { width: 25px; height: 25px; padding: 0; border: 3px solid var(--bg-dark, #292824); border-radius: 50%; background: var(--swatch); outline: 1px solid transparent; cursor: pointer; }
.folder-color-swatch[aria-pressed="true"] { outline: 2px solid var(--swatch); }
.folder-custom-color { display: flex; gap: 10px; align-items: center; margin-top: 12px; color: var(--text-secondary, #aaa); font-size: 12px; cursor: pointer; }
.folder-custom-color input[type="color"] { width: 27px; height: 27px; padding: 2px; border: 1px solid var(--border-color, #555); border-radius: 6px; background: transparent; cursor: pointer; }
.folder-symbol-option:focus-visible, .folder-color-swatch:focus-visible { outline: 2px solid var(--text-primary, #eee); outline-offset: 3px; }
:is(#newFolderModal, #renameFolderModal) .modal { max-height: calc(100dvh - 48px); overflow-y: auto; }
/* Expand choices inside the dialog so they remain reachable on small screens. */
#newFolderModal .folder-create-field { flex-wrap: wrap; }
#newFolderModal #selectedFolderEmoji { order: 1; }
#newFolderModal #newFolderName { order: 2; min-width: 0; }
#newFolderModal #folderEmojiPickerGrid { order: 3; position: static !important; box-shadow: none !important; }
#renameFolderModal .folder-rename-icon-field { flex-wrap: wrap !important; }
#renameFolderModal .folder-rename-icon-control:has(.folder-rename-emoji-picker:not(.hidden)) { width: 100%; }
#renameFolderModal #renameFolderEmojiPickerGrid { position: static !important; margin-top: 8px; box-shadow: none !important; }
#renameFolderModal #renameFolderEmojiPickerGrid .folder-symbol-option:focus-visible { outline: 2px solid var(--text-primary, #eee) !important; outline-offset: 1px; }
:is(#newFolderModal, #renameFolderModal) :is(#selectedFolderEmoji, #renameFolderEmoji) { color: var(--chosen-folder-color, #ffc849) !important; }
:is(#newFolderModal, #renameFolderModal) .folder-color-swatch[aria-pressed="true"] { outline: 2px solid var(--swatch) !important; outline-offset: 2px; }