/* ==========================================================================
   Mr. Bookmark - global design system
   Loaded once, globally, from layouts/main.handlebars. Every page shares
   these tokens/components rather than defining its own inline styles.
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
    --color-bg: #faf9f6;
    --color-surface: #ffffff;
    --color-surface-alt: #fff8e8;
    --color-border: #ece2c6;
    --color-text: #23201a;
    --color-text-muted: #6b6455;
    --color-accent: #f4b400;
    --color-accent-strong: #a06e00;
    --color-accent-soft: #fff3d6;
    --color-danger: #d64545;
    --color-danger-soft: #fbeaea;
    --color-success: #2e9e6c;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --shadow-sm: 0 1px 2px rgba(35, 32, 26, 0.06), 0 1px 1px rgba(35, 32, 26, 0.04);
    --shadow-md: 0 4px 16px rgba(35, 32, 26, 0.08), 0 2px 4px rgba(35, 32, 26, 0.06);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --sidebar-width: 220px;
    --header-height: 64px;
}

/* ---- Reset & base ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
}

img {
    max-width: 100%;
}

a {
    color: var(--color-accent-strong);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    margin: 0 0 var(--space-4);
    font-weight: 600;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p {
    margin: 0 0 var(--space-4);
}

small, .text-small {
    font-size: 0.85em;
}

.text-muted {
    color: var(--color-text-muted);
}

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

.text-center {
    text-align: center;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}

:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: 2px;
}

/* ---- Icons ---- */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: -3px;
}

.icon--sm {
    width: 15px;
    height: 15px;
}

.icon--lg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: var(--header-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.app-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.app-header__logo img {
    height: 36px;
    width: auto;
    border-radius: var(--radius-sm);
}

button.app-header__menu-toggle {
    display: none;
}

.app-header__search {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.search-form {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.search-form__field {
    position: relative;
    display: flex;
    align-items: center;
}

.search-form__field .icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-form input[type="text"] {
    padding-left: calc(var(--space-3) * 2 + 15px);
    width: 220px;
}

.app-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-3);
}

.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sticks to the bottom of the viewport as the page scrolls, instead of sitting wherever
   margin-top: auto happens to push it inside .app-sidebar's box - .app-sidebar stretches to
   match the height of .app-content (see align-items: stretch on .app-body), so on a long page
   (e.g. a big file listing) that box is much taller than the viewport and this pane would
   otherwise only become visible after scrolling all the way to the true bottom of the page.
   This relies on .app-sidebar having no overflow value other than visible (see above): sticky
   positioning resolves against the nearest ancestor that establishes a scroll container, and
   .app-sidebar's own box happens to end exactly where .app-footer begins (they're siblings
   inside .app-shell) - so "bottom: 0" naturally stops right above the footer instead of
   overlapping it, as long as nothing between here and the real page viewport claims that role
   first. Don't add overflow-y/x back onto the desktop .app-sidebar rule above without
   re-checking this - the mobile off-canvas variant below sets its own overflow-y instead, since
   there .app-sidebar is a genuinely bounded box (position: fixed with top/bottom set).
*/
.app-sidebar__user {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--space-3);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 8px -6px rgba(35, 32, 26, 0.15);
}

.app-sidebar__user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
}

.app-sidebar__user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-text);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: var(--color-accent-soft);
    text-decoration: none;
}

.nav-item.is-active {
    background: var(--color-accent-soft);
    border-left-color: var(--color-accent);
    color: var(--color-accent-strong);
    font-weight: 600;
}

.nav-item .icon {
    color: var(--color-text-muted);
}

.nav-item.is-active .icon,
.nav-item:hover .icon {
    color: var(--color-accent-strong);
}

.sidebar-backdrop {
    display: none;
}

.app-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-5);
}

.content-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
    max-width: 980px;
    margin: 0 auto;
}

.app-footer {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.app-footer a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

@media (max-width: 900px) {
    button.app-header__menu-toggle {
        display: inline-flex;
    }

    .app-sidebar {
        position: fixed;
        top: var(--header-height);
        bottom: 0;
        left: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-md);
        /* Genuinely bounded here (top/bottom are both fixed), unlike the desktop layout - a
           long nav list needs to scroll within this box instead of pushing the user pane
           further down than the box itself allows. */
        overflow-y: auto;
    }

    .app-sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop.is-open {
        display: block;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        background: rgba(35, 32, 26, 0.35);
        z-index: 35;
    }

    .app-content {
        padding: var(--space-4);
    }

    .content-container {
        padding: var(--space-4);
    }

    .search-form input[type="text"] {
        width: 140px;
    }
}

@media (max-width: 640px) {
    .app-header {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--header-height);
        padding: var(--space-2) var(--space-3);
        row-gap: var(--space-2);
    }

    .app-header__search {
        width: 100%;
        margin-left: 0;
    }

    .search-form {
        width: 100%;
    }

    .search-form__field {
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-form input[type="text"] {
        width: 100%;
    }

    .search-form button {
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
button,
input[type="submit"],
input[type="button"] {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    text-decoration: none;
}

a.btn {
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.btn--primary:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
}

.btn--danger {
    color: var(--color-danger);
    border-color: var(--color-danger-soft);
}

.btn--danger:hover {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
}

.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.82rem;
}

.btn-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-row--right {
    justify-content: flex-end;
}

/* Icon-only buttons used for row actions (edit/delete/copy/share/etc). */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
}

.icon-btn--danger:hover {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.icon-btn--help {
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.row-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.field__label {
    width: 160px;
    flex-shrink: 0;
    padding-top: var(--space-2);
    font-weight: 600;
}

.field__control {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.field__control > :first-child {
    flex: 1;
    min-width: 0;
}

.field__hint {
    flex-basis: 100%;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
}

.field-row--actions {
    justify-content: flex-end;
}

.field-row--actions .field__control {
    flex: none;
    margin-left: auto;
}

:where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], textarea, select) {
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    width: 100%;
}

:where(input, textarea, select):focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

textarea {
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

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

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: normal;
}

@media (max-width: 640px) {
    .field {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .field__label {
        width: auto;
        padding-top: 0;
    }

    .field-row--actions .field__control {
        margin-left: 0;
        width: 100%;
    }

    .field-row--actions {
        justify-content: stretch;
    }
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
}

.alert--danger {
    background: var(--color-danger-soft);
    border-color: #f0c4c4;
    color: #8a2c2c;
}

.alert--info {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ==========================================================================
   Progress bar (bookmark import status page)
   ========================================================================== */

.progress-bar {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    height: 12px;
    overflow: hidden;
    margin: var(--space-3) 0;
}

.progress-bar__fill {
    background: var(--color-accent);
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

/* ==========================================================================
   Data tables
   ========================================================================== */

.table-scroll {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

.data-table th,
.data-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table td.wrap {
    white-space: normal;
}

.data-table thead th {
    background: var(--color-surface-alt);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--color-accent-soft);
}

.data-table .col-actions {
    text-align: right;
    width: 1%;
}

/* Select-mode checkbox column and bulk delete bar on the Files/Images pages - both hidden
   until .is-select-mode is toggled onto the surrounding form (see bulkSelect.js), so a
   checkbox can't be interacted with, and nothing can be bulk-deleted, outside select mode. */
.select-col {
    display: none;
    width: 1%;
    text-align: center;
}

.is-select-mode .select-col {
    display: table-cell;
}

.bulk-actions-bar {
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.is-select-mode .bulk-actions-bar {
    display: flex;
}

.sortable-header {
    color: inherit;
    text-decoration: none;
}

.sortable-header:hover {
    color: var(--color-accent-strong);
    text-decoration: underline;
}

.sortable-header.is-active {
    color: var(--color-accent-strong);
}

.data-table a {
    color: var(--color-text);
    font-weight: 500;
}

.data-table a:hover {
    color: var(--color-accent-strong);
}

.empty-state {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

.breadcrumb {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    font-size: 0.9rem;
}

/* ==========================================================================
   Admin sub-nav (real links into each /admin/* page, styled as tabs - class
   names are referenced directly by pages/admin/_subnav.handlebars)
   ========================================================================== */

.tab {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    overflow-x: auto;
}

.tab a.tablinks {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.tab a.tablinks:hover {
    background: var(--color-accent-soft);
    border-color: transparent;
    text-decoration: none;
}

.tab a.tablinks.active {
    color: var(--color-accent-strong);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-4);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    border-radius: 999px;
    padding: 3px var(--space-2) 3px var(--space-3);
    font-size: 0.85rem;
    white-space: nowrap;
}

.tag-chip a {
    color: inherit;
    line-height: 1;
    text-decoration: none;
}

.tag-input-row {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

.tag-input-row input {
    max-width: 320px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    margin-top: var(--space-4);
    text-align: center;
}

.pagination__inner {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: var(--color-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.pagination__item--nav {
    color: var(--color-text-muted);
    font-weight: 600;
}

a.pagination__item:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
}

.pagination__item--current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
    cursor: default;
}

.pagination__item--disabled {
    color: var(--color-border);
    cursor: default;
}

/* ==========================================================================
   Search
   ========================================================================== */

.search-category {
    margin-bottom: var(--space-5);
}

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

.search-view-all {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-accent-strong);
}

/* ==========================================================================
   Misc content patterns
   ========================================================================== */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.page-header h2,
.page-header h3 {
    margin: 0;
}

.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--color-surface);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Disclosure header for a <details class="card"> section (e.g. a file's EXIF data) - the
   default marker is replaced with a rotating triangle drawn in ::before so it matches this
   app's hand-drawn icon set instead of each browser's own disclosure glyph. */
.exif-summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.exif-summary::-webkit-details-marker {
    display: none;
}

.exif-summary::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    margin-right: var(--space-2);
    transition: transform 0.15s ease;
}

details[open] > .exif-summary::before {
    transform: rotate(90deg);
}

.exif-content {
    margin-top: var(--space-4);
}

.exif-map-link {
    margin-bottom: var(--space-3);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.stat-grid .card {
    margin-bottom: 0;
}

.stat-grid .card p {
    margin-bottom: 0;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Modal (replaces window.alert()/window.confirm() - see modal.js)
   ========================================================================== */

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(35, 32, 26, 0.45);
    padding: var(--space-4);
    z-index: 100;
}

.modal-backdrop.is-open {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
}

.modal__title {
    margin-bottom: var(--space-3);
}

.modal__message {
    white-space: pre-line;
    color: var(--color-text);
    margin: 0 0 var(--space-5);
}

.modal__actions {
    margin: 0;
}

/* ==========================================================================
   Albums (album view/public grids, the album list, and the file view page's
   Albums picker widget - see albums/*.handlebars, files/view.handlebars)
   ========================================================================== */

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4);
}

.image-grid-item {
    position: relative;
}

.image-grid-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.image-grid-item__remove {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--color-surface);
}

/* Non-image file's stand-in for the <img> thumbnail in an album grid (see albums/view.handlebars,
   albums/viewPublic.handlebars) - same tile footprint as the image case (aspect-ratio 1/1, same
   border) so the two never look mismatched sitting side by side in the same grid. */
.image-grid-item__file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-align: center;
}

.image-grid-item__file .icon {
    width: 40px;
    height: 40px;
}

/* The visible label is already middle-truncated server-side (stringUtils.ellipsisShorten via
   albumService's withShortNames) to a fixed ~28 characters that always keeps the tail of the
   original name - including the extension - intact. Wrapping (not a single-line ellipsis) is
   what makes that guarantee hold visually too: a single-line ellipsis would just re-clip the
   already-shortened name at the card's pixel width, hiding the extension again. */
.image-grid-item__file-name {
    width: 100%;
    overflow-wrap: break-word;
    font-size: 0.85rem;
}

.image-grid-item__file-size {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    opacity: 0.75;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
}

.album-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
}

.album-card:hover {
    color: var(--color-text);
    text-decoration: none;
}

.album-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--color-text-muted);
}

.album-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-card__thumb .icon {
    width: 40px;
    height: 40px;
}

.album-card__meta {
    display: flex;
    flex-direction: column;
}

.album-card__name {
    font-weight: 500;
}

.album-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
}

/* Now only used inside the Manage Collections modal (files/view.handlebars) - capped and made
   independently scrollable so a user with a long list of collections can't push the modal's "+
   New collection name" row and Done button off-screen, where they'd be unreachable since the
   modal's own backdrop disables the page's own scroll while open. */
.modal .album-picker {
    max-height: 240px;
    overflow-y: auto;
}

.album-picker__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 400;
    cursor: pointer;
}

/* The album-picking row shared by the Files/Images pages' "Add to Collection" bulk-action modal
   (#bulkAlbumModalBackdrop) and the file detail page's "Manage Collections" modal
   (#manageCollectionsModalBackdrop in files/view.handlebars) - select and new-collection input
   side by side, wrapping onto their own lines if the modal is ever narrower than both need. */
.bulk-album-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bulk-album-select {
    flex: none;
    max-width: 160px;
}

/* The Manage Collections modal's "add" dropdown defaults to this (disabled, unselectable-by-click)
   option rather than to whatever collection would otherwise sort first - italicized so it reads
   as an instruction rather than a real collection name that's about to be added. */
.select-placeholder-option {
    font-style: italic;
    color: var(--color-text-muted);
}

.bulk-album-new-input {
    flex: 1 1 120px;
    min-width: 0;
}

/* ==========================================================================
   Options dropdown (item-detail page headers - files/pastes/bookmarks/albums -
   see dropdownMenu.js for the open/close behavior)
   ========================================================================== */

.options-menu {
    position: relative;
    display: inline-block;
}

.options-menu__panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-1);
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-1);
    z-index: 50;
}

.options-menu.is-open .options-menu__panel {
    display: flex;
    flex-direction: column;
}

.options-menu__item {
    display: flex;
    align-items: center;
    /* Overrides the global button rule's justify-content: center - without this, a <button>-based
       item (unlike an <a>-based one, which isn't a <button> and never had that rule applied)
       centers its icon+label instead of sitting flush left, throwing off alignment between items
       within the same menu depending on which element they happen to be. */
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.options-menu__item:hover {
    background: var(--color-accent-soft);
    color: var(--color-text);
    text-decoration: none;
}

.options-menu__item--danger {
    color: var(--color-danger);
}

.options-menu__item--danger:hover {
    background: var(--color-danger-soft);
}