/*
 * Client panel custom styles.
 *
 * Plain, hand-written CSS served as a static file — it does NOT go through
 * Vite/Tailwind, so the classes here always work regardless of the build.
 * Loaded via a HEAD_END render hook in ClientPanelProvider.
 */

/* ------------------------------------------------------------------ *
 * Upload drop-zone
 * ------------------------------------------------------------------ */

.cms-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    padding: 3rem 1.5rem;
    border: 2px dashed rgb(212 212 216);          /* gray-300 */
    border-radius: 1rem;
    background-color: transparent;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.cms-dropzone--compact {
    padding: 2rem 1.25rem;
}

.cms-dropzone:hover {
    border-color: rgb(96 165 250);                /* primary-ish */
    background-color: rgb(249 250 251);           /* gray-50 */
}

.cms-dropzone.is-dragging {
    border-color: rgb(59 130 246);
    background-color: rgb(239 246 255);           /* blue-50 */
    transform: scale(1.01);
}

/* Dark mode */
.dark .cms-dropzone {
    border-color: rgba(255 255 255 / 0.15);
}
.dark .cms-dropzone:hover {
    border-color: rgba(96 165 250 / 0.6);
    background-color: rgba(255 255 255 / 0.04);
}
.dark .cms-dropzone.is-dragging {
    border-color: rgb(96 165 250);
    background-color: rgba(59 130 246 / 0.12);
}

/* Icon badge */
.cms-dropzone__badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background-color: rgb(243 244 246);           /* gray-100 */
    color: rgb(107 114 128);                      /* gray-500 */
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.cms-dropzone--compact .cms-dropzone__badge {
    width: 2.75rem;
    height: 2.75rem;
}

.cms-dropzone:hover .cms-dropzone__badge {
    transform: translateY(-3px);
    background-color: rgb(219 234 254);           /* blue-100 */
    color: rgb(37 99 235);                        /* blue-600 */
}

.cms-dropzone.is-dragging .cms-dropzone__badge {
    transform: scale(1.12);
    background-color: rgb(219 234 254);
    color: rgb(37 99 235);
}

.dark .cms-dropzone__badge {
    background-color: rgba(255 255 255 / 0.08);
    color: rgb(156 163 175);
}
.dark .cms-dropzone:hover .cms-dropzone__badge,
.dark .cms-dropzone.is-dragging .cms-dropzone__badge {
    background-color: rgba(59 130 246 / 0.2);
    color: rgb(96 165 250);
}

.cms-dropzone__badge svg {
    width: 1.5rem;
    height: 1.5rem;
}
.cms-dropzone--compact .cms-dropzone__badge svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Pulsing ring while dragging */
.cms-dropzone__ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: rgba(59 130 246 / 0.3);
    animation: cms-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes cms-ping {
    75%, 100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Texts */
.cms-dropzone__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);                         /* gray-700 */
}
.dark .cms-dropzone__title {
    color: rgb(229 231 235);
}

.cms-dropzone__title strong {
    font-weight: 600;
    color: rgb(37 99 235);
}
.dark .cms-dropzone__title strong {
    color: rgb(96 165 250);
}

.cms-dropzone__hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgb(156 163 175);                      /* gray-400 */
}

.cms-dropzone__loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(37 99 235);
}
.dark .cms-dropzone__loading {
    color: rgb(96 165 250);
}

/* Show/hide helpers driven by the .is-dragging state on the root */
.cms-dropzone .cms-when-idle { display: inline; }
.cms-dropzone .cms-when-drag { display: none; }
.cms-dropzone.is-dragging .cms-when-idle { display: none; }
.cms-dropzone.is-dragging .cms-when-drag { display: inline; }

.cms-dropzone .cms-when-idle--flex { display: flex; }
.cms-dropzone.is-dragging .cms-when-idle--flex { display: none; }
.cms-dropzone .cms-when-drag--flex { display: none; }
.cms-dropzone.is-dragging .cms-when-drag--flex { display: flex; }

/* ------------------------------------------------------------------ *
 * Image gallery grid (Manage Images + picker modal)
 * ------------------------------------------------------------------ */

.cms-thumb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 640px)  { .cms-thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .cms-thumb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cms-thumb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cms-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.05);
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.05), 0 0 0 1px rgba(0 0 0 / 0.05);
    transition: box-shadow .15s ease;
}
.cms-thumb:hover {
    box-shadow: 0 4px 12px rgba(0 0 0 / 0.12), 0 0 0 1px rgba(0 0 0 / 0.05);
}
.dark .cms-thumb {
    background-color: rgba(255 255 255 / 0.05);
    box-shadow: 0 0 0 1px rgba(255 255 255 / 0.1);
}

.cms-thumb__img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background-color: rgb(243 244 246);
}

.cms-thumb__label {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(55 65 81);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .cms-thumb__label {
    color: rgb(229 231 235);
}

.cms-thumb__actions {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity .15s ease;
}
.cms-thumb:hover .cms-thumb__actions {
    opacity: 1;
}

.cms-thumb__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: rgba(255 255 255 / 0.92);
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
    color: rgb(55 65 81);
    transition: background-color .15s ease;
}
.cms-thumb__btn:hover { background-color: #fff; }
.cms-thumb__btn--danger { color: rgb(220 38 38); }
.cms-thumb__btn svg { width: 1rem; height: 1rem; }
.dark .cms-thumb__btn {
    background-color: rgba(31 41 55 / 0.92);
    color: rgb(229 231 235);
}

/* Selectable thumb (inside the picker modal) */
.cms-pick {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow .15s ease;
}
.cms-pick:hover {
    box-shadow: 0 0 0 2px rgb(209 213 219);
}
.cms-pick.is-selected {
    box-shadow: 0 0 0 2px rgb(59 130 246);
}
.cms-pick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cms-pick__check {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: rgb(37 99 235);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.2);
}
.cms-pick__check svg { width: 0.75rem; height: 0.75rem; }
.cms-pick__name {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0.125rem 0.375rem;
    font-size: 10px;
    color: #fff;
    background-color: rgba(2 6 23 / 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Picker selected-thumbnails strip */
.cms-pick-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.cms-pick-thumb {
    position: relative;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px rgba(0 0 0 / 0.1);
}
.dark .cms-pick-thumb {
    box-shadow: 0 0 0 1px rgba(255 255 255 / 0.1);
}
.cms-pick-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cms-pick-thumb__remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    padding: 0.25rem;
    border-radius: 0.375rem;
    background-color: rgba(255 255 255 / 0.92);
    color: rgb(220 38 38);
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
    opacity: 0;
    transition: opacity .15s ease;
}
.cms-pick-thumb:hover .cms-pick-thumb__remove { opacity: 1; }
.cms-pick-thumb__remove svg { width: 0.875rem; height: 0.875rem; }

.cms-pick-thumb__order {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0.125rem 0.25rem;
    background-color: rgba(2 6 23 / 0.6);
    opacity: 0;
    transition: opacity .15s ease;
}
.cms-pick-thumb:hover .cms-pick-thumb__order { opacity: 1; }
.cms-pick-thumb__order button {
    color: #fff;
}
.cms-pick-thumb__order button:disabled { opacity: 0.3; }
.cms-pick-thumb__order svg { width: 0.875rem; height: 0.875rem; }

/* ------------------------------------------------------------------ *
 * Files picker — chips for the selection, and the gallery grid tiles
 * ------------------------------------------------------------------ */

/* Selected files in the field's chip strip. */
.cms-file-thumb {
    width: auto;
    min-width: 8rem;
    max-width: 14rem;
    height: auto;
    padding: 0.5rem 0.625rem;
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
}
.dark .cms-file-thumb {
    background-color: rgba(255 255 255 / 0.06);
    color: rgb(229 231 235);
}
.cms-file-thumb__body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cms-file-thumb__icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(75 85 99);
}
.dark .cms-file-thumb__icon { color: rgb(156 163 175); }
.cms-file-thumb__name {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Picker modal tiles for files (no thumbnail — icon + name). */
.cms-pick-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background-color: rgb(249 250 251);
}
.dark .cms-pick-file { background-color: rgba(255 255 255 / 0.04); }
.cms-pick-file__icon {
    width: 2.25rem;
    height: 2.25rem;
    color: rgb(75 85 99);
}
.dark .cms-pick-file__icon { color: rgb(156 163 175); }
.cms-pick-file .cms-pick__name {
    position: static;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.1;
    word-break: break-word;
    white-space: normal;
}