/* Albums photo inspector */

.albums-detail {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--border-default);
    background: var(--surface-inspector);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.albums-detail.collapsed {
    overflow: hidden;
    scrollbar-gutter: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-3) 8px;
}

.albums-detail-toolbar,
.archive-inspector-toolbar {
    position: sticky;
    top: 0;
    z-index: 12;

    min-height: 58px;
    padding:
        10px var(--space-4);

    border-bottom:
        1px solid var(--border-default);

    background:
        color-mix(in srgb, var(--gg-sidebar) 94%, transparent);

    backdrop-filter:
        blur(14px);

    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.albums-detail-toolbar-spacer,
.archive-inspector-toolbar-spacer {
    flex:
        1 1 auto;
}

.albums-detail-collapse,
.albums-detail-restore,
.archive-inspector-collapse,
.archive-inspector-restore {
    flex:
        0 0 34px;
}

.albums-detail-restore,
.archive-inspector-restore {
    margin-top: 0;
}

.albums-detail-action,
.archive-inspector-action {
    width: 36px;
    height: 36px;
    flex:
        0 0 36px;

    padding: 0;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    color:
        var(--text-secondary);

    display: grid;
    place-items: center;

    cursor: pointer;

    transition:
        background var(--ease),
        border-color var(--ease),
        color var(--ease);
}

.archive-inspector-action-text {
    width:
        auto;

    min-width:
        54px;

    flex:
        0 0 auto;

    padding:
        0 var(--space-3);

    font-size:
        13px;

    font-weight:
        750;
}

.albums-detail-action:hover,
.albums-detail-action:focus-visible,
.archive-inspector-action:hover,
.archive-inspector-action:focus-visible {
    border-color:
        var(--border-default);

    background:
        color-mix(in srgb, var(--gg-text) 5.5%, transparent);

    color:
        var(--text-primary);
}

.albums-detail-action:focus-visible,
.archive-inspector-action:focus-visible {
    outline:
        2px solid var(--brand-green-400);

    outline-offset:
        1px;
}

.albums-detail-action svg,
.archive-inspector-action svg {
    width: 19px;
    height: 19px;

    display: block;
}

.albums-detail-action.active,
.archive-inspector-action.active {
    border-color:
        var(--gg-status-favorite-outline);

    background:
        var(--gg-status-favorite-subtle-container);

    color:
        var(--gg-status-favorite-accent);
}

.archive-inspector-restore svg {
    transform:
        rotate(180deg);
}

.albums-detail-edit-actions,
.archive-inspector-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.albums-detail-edit-actions .button,
.archive-inspector-edit-actions .button {
    min-height: 38px;
    height: 38px;
    padding-inline: 14px;
}

.albums-detail-hero {
    padding: 20px;
    border-bottom: 1px solid var(--border-default);
}

.albums-detail-preview-button {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 300px;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}

.albums-face-highlight:not([hidden]) {
    position: absolute;
    z-index: 5;
    border: 2px solid var(--brand-green-400);
    border-radius: 4px;
    background: color-mix(in srgb, var(--gg-primary) 12%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gg-scrim) 35%, transparent);
    pointer-events: none;
}

.albums-face-floating-preview:not([hidden]) {
    position: fixed;
    z-index: 60;
    height: min(220px, 31vh);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--gg-scrim) 38%, transparent);
    overflow: hidden;
    pointer-events: none;
}

.albums-face-floating-preview .albums-detail-preview {
    width: 100%;
    height: 100%;
}

.albums-detail-preview-button:hover {
    border-color: var(--border-strong);
}

.albums-detail-preview-button:focus-visible {
    outline: 2px solid var(--brand-green-400);
    outline-offset: 2px;
}

.albums-detail-preview {
    width: 100%;
    height: 100%;
}

.albums-detail-preview .thumb-img {
    object-fit: contain;
}

.albums-detail-open {
    width: 100%;
    margin-top: var(--space-3);
    justify-content: center;
}

.albums-detail-identity {
    min-width: 0;
    margin-top: var(--space-4);
}

.albums-detail-identity h2 {
    display: block;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.albums-detail-summary {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 700;
}

.albums-detail.is-editing .albums-detail-summary {
    padding:
        var(--space-2) 0 0;
}

.albums-detail-title-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.albums-detail-title-field span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
}

.albums-detail-title-field input {
    width: 100%;
    min-width: 0;
    height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-input);
    color: var(--text-primary);
    font: inherit;
}

.albums-detail-title-field input:focus {
    border-color: color-mix(in srgb, var(--gg-primary) 55%, transparent);
    outline: 0;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--gg-primary) 10%, transparent);
}

.albums-detail .panel-section-body {
    padding: 8px 20px 20px;
}

.albums-detail-read-list,
.archive-file-read-list {
    margin: 0;
    padding: 0;

    display: grid;
}

.albums-detail-read-row,
.archive-file-read-row {
    min-width: 0;

    padding:
        13px 0;

    border-bottom:
        1px solid color-mix(in srgb, var(--gg-status-neutral-on-accent) 72%, transparent);

    display: grid;
    grid-template-columns:
        88px minmax(0, 1fr);

    gap:
        var(--space-3);

    align-items:
        start;
}

.albums-detail-read-row:first-child,
.archive-file-read-row:first-child {
    padding-top: 2px;
}

.albums-detail-read-row:last-child,
.archive-file-read-row:last-child {
    padding-bottom: 2px;

    border-bottom: 0;
}

.albums-detail-read-row dt,
.albums-detail-read-row dd,
.archive-file-read-row dt,
.archive-file-read-row dd {
    min-width: 0;
    margin: 0;
}

.albums-detail-read-row dt,
.archive-file-read-row dt {
    color:
        var(--text-secondary);

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.5;
}

.albums-detail-read-row dd,
.archive-file-read-row dd {
    color:
        var(--text-secondary);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}

.albums-detail-read-caption,
.archive-file-read-description {
    white-space:
        pre-wrap;

    text-align:
        left;
}

.albums-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.albums-form-grid > .albums-field > input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-input);
    color: var(--text-primary);
    font: inherit;
}

.albums-form-grid .details-edit-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-default);
}

@media (max-width: 420px) {
    .albums-form-grid .details-edit-actions .button { flex: 1 1 auto; }
}

.albums-field {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.albums-field label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.albums-field textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-input);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.5;
}

.albums-field textarea:focus {
    border-color: color-mix(in srgb, var(--gg-primary) 55%, transparent);
    outline: 0;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--gg-primary) 10%, transparent);
}

/* People rows reuse the shared relationship-row system. */

.albums-detail .relationship-list {
    gap: var(--space-2);
}

.albums-detail .relation-row {
    min-height: 60px;
}

.albums-detail .relation-row-main {
    min-height: 58px;
    padding: 7px 8px;
}

.albums-detail .relation-row-copy strong {
    font-size: 14px;
}

.albums-detail .relation-row-copy span {
    font-size: 12px;
}

/* Albums and future source rows. */

.albums-inspector-list {
    display: grid;
    gap: 6px;
}

.albums-inspector-row {
    min-width: 0;
    min-height: 50px;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 38px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    overflow: hidden;
}

.albums-inspector-row:hover,
.albums-inspector-row:focus-within {
    border-color: var(--border-default);
    background: var(--surface-card-hover);
}

.albums-inspector-row-main {
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
}

button.albums-inspector-row-main {
    cursor: pointer;
}

button.albums-inspector-row-main:focus-visible {
    outline: 2px solid var(--brand-green-400);
    outline-offset: -2px;
}

.albums-inspector-row-main svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: var(--text-tertiary);
}

.albums-inspector-row-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.albums-inspector-remove {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.albums-inspector-remove:hover,
.albums-inspector-remove:focus-visible {
    background: color-mix(in srgb, var(--gg-accent-rose-sepia-accent) 10%, transparent);
    color: var(--red);
}

.albums-inspector-remove svg {
    width: 16px;
    height: 16px;
}

.albums-metadata-list {
    display: grid;
    gap: 0;
}

.albums-metadata-row {
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--gg-status-neutral-on-accent) 72%, transparent);
    display: grid;
    grid-template-columns:
        116px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.albums-metadata-row:last-child {
    border-bottom: 0;
}

.albums-metadata-row span {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.albums-metadata-row strong {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.albums-shell.photo-editing .albums-toolbar :disabled,
.albums-shell.photo-editing .albums-header-actions :disabled {
    opacity: .52;
    cursor: not-allowed;
}

.albums-sidebar,
.notes-sidebar,
.geneo-sidebar {
    height:
        100%;
    min-height:
        0;
    display:
        flex;
    flex-direction:
        column;
    gap:
        var(--space-5);
    box-sizing:
        border-box;
}

.notes-sidebar {
    padding-bottom: var(--space-4);
}

.albums-sidebar,
.geneo-sidebar {
    padding-bottom:
        0;
}

.albums-sidebar>div:not(.albums-sidebar-tip),
.geneo-sidebar>div:not(.geneo-sidebar-tip) {
    flex:
        0 0 auto;
}

.albums-sidebar-tip,
.geneo-sidebar-tip {
    flex:
        0 0 auto;

    margin-top:
        auto;
}

.sidebar-entity-row {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition:
        background var(--ease),
        border-color var(--ease),
        color var(--ease);
}

.sidebar-entity-row:hover {
    background: color-mix(in srgb, var(--gg-text) 3.5%, transparent);
}

.sidebar-entity-row.active {
    background: var(--surface-selected);
    border-color: color-mix(in srgb, var(--gg-primary) 12%, transparent);
}

.sidebar-entity-main {
    min-width: 0;
    min-height: 42px;
    flex: 1 1 auto;
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
}

.sidebar-entity-main svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--text-tertiary);
}

.sidebar-entity-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-entity-row.active .sidebar-entity-main {
    color: var(--text-primary);
}

.sidebar-entity-row.active .sidebar-entity-main svg {
    color: var(--brand-green-300);
}

.sidebar-entity-more {
    flex: 0 0 34px;
    margin: 0 var(--space-2) 0 0;
    opacity: 0;
    transition: opacity var(--ease);
}

.sidebar-entity-row:hover .sidebar-entity-more,
.sidebar-entity-row:focus-within .sidebar-entity-more,
.sidebar-entity-row.active .sidebar-entity-more {
    opacity: 1;
}

.albums-filter-popover,
.module-filter-popover {
    position: fixed;
    z-index: 190;

    width:
        min(340px,
            calc(100vw - 24px));

    max-height:
        calc(100vh - 24px);

    border:
        1px solid var(--border-strong);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface-card);

    box-shadow:
        var(--shadow-soft);

    overflow:
        auto;
}

.albums-filter-popover-head,
.albums-filter-popover-body,
.albums-filter-popover-footer,
.module-filter-popover-head,
.module-filter-popover-body,
.module-filter-popover-footer {
    padding:
        var(--space-4);
}

.albums-filter-popover-head,
.module-filter-popover-head {
    border-bottom:
        1px solid var(--border-default);

    display: grid;
    gap: 3px;
}

.albums-filter-popover-head span,
.module-filter-popover-head span {
    color:
        var(--text-tertiary);

    font-size:
        12px;
}

.albums-filter-popover-body,
.module-filter-popover-body {
    display: grid;
    gap: var(--space-3);
}

.albums-filter-field,
.module-filter-field {
    display: grid;
    gap: 7px;

    color:
        var(--text-secondary);

    font-size:
        12px;

    font-weight:
        900;
}

.albums-filter-field select,
.module-filter-field select {
    width: 100%;
    height:
        var(--control-height);

    padding:
        0 var(--space-3);

    border:
        1px solid var(--border-default);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface-input);

    color:
        var(--text-primary);
}

.albums-filter-check,
.module-filter-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        800;
}

.albums-filter-popover-footer,
.module-filter-popover-footer {
    border-top:
        1px solid var(--border-default);

    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}