/*!
 * -------------------------------------------------------------------------
 * Asset Image Gallery plugin for GLPI
 * Copyright (C) 2026 ReTech / UASK.
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option)
 * any later version. See <https://www.gnu.org/licenses/gpl-3.0.html>.
 *
 * @license GPL-3.0-or-later
 * -------------------------------------------------------------------------
 */
/* Asset Image Gallery */

.plugin-gallery {
    padding: .5rem 0;
}

.plugin-gallery-section {
    padding: .25rem 0 1rem;
}
.plugin-gallery-section[data-kind="norm"] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--tblr-border-color, #e6e7e9);
}

.plugin-gallery-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--tblr-body-color, #1a2226);
}

.plugin-gallery-normhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
.plugin-gallery-normhead .plugin-gallery-title {
    margin-bottom: 0;
}
.plugin-gallery-normactions {
    display: flex;
    gap: .4rem;
}

.plugin-gallery-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 2px dashed var(--tblr-border-color, #ccd);
    border-radius: var(--tblr-border-radius, 6px);
    color: var(--tblr-secondary, #67788e);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    text-align: center;
}

.plugin-gallery-dropzone:hover,
.plugin-gallery-dropzone:focus,
.plugin-gallery-dropzone.is-dragover {
    border-color: var(--tblr-primary, #066fd1);
    background: var(--tblr-primary-lt, rgba(6, 111, 209, .06));
    outline: none;
}

.plugin-gallery-dropzone i {
    font-size: 1.6rem;
}

.plugin-gallery-progress {
    margin-bottom: .75rem;
    font-size: .875rem;
    color: var(--tblr-secondary, #67788e);
}

.plugin-gallery-empty {
    padding: 1rem 0;
}

.plugin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}

.plugin-gallery-tile {
    position: relative;
    margin: 0;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: var(--tblr-border-radius, 6px);
    overflow: hidden;
    background: var(--tblr-bg-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    cursor: grab;
}

.plugin-gallery-tile.is-dragging {
    opacity: .45;
}

.plugin-gallery-tile img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    cursor: zoom-in;
    background: var(--tblr-bg-surface-secondary, #f5f6f8);
}

.plugin-gallery-tile figcaption {
    padding: .35rem .5rem;
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tblr-body-color, #1a2226);
}

.plugin-gallery-grid[data-kind="norm"] figcaption {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--tblr-secondary, #67788e);
}

.plugin-gallery-del {
    position: absolute;
    top: .3rem;
    right: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(20, 22, 26, .55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background-color .15s;
}

.plugin-gallery-tile:hover .plugin-gallery-del {
    opacity: 1;
}

.plugin-gallery-del:hover {
    background: var(--tblr-danger, #d63939);
}

/* Lightbox */
.plugin-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, .82);
    cursor: zoom-out;
}

.plugin-gallery-lightbox img {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
    border-radius: 4px;
}

.plugin-gallery-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.plugin-gallery-close:hover {
    background: rgba(255, 255, 255, .25);
}