/*
 * Styles for the media library upload fields. Buttons, badges, inputs, dropdowns, modals and pagination are Filament's
 * own components; this file only lays them out and styles what Filament has no component for (tiles, the drop zone and
 * a list that looks like a Filament table). Filament's CSS variables are used so custom themes match.
 */

.fml {
    --fml-border: var(--gray-200);
    --fml-surface: #fff;
    --fml-muted-surface: var(--gray-50);
    --fml-text: var(--gray-950);
    --fml-muted: var(--gray-500);
    --fml-ring: color-mix(in oklab, var(--gray-950) 10%, transparent);
    --fml-radius: var(--radius-lg, 0.5rem);
    --fml-tile-size: 9.5rem;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--fml-text);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dark .fml {
    --fml-border: color-mix(in oklab, #fff 10%, transparent);
    --fml-surface: var(--gray-900);
    --fml-muted-surface: color-mix(in oklab, #fff 5%, transparent);
    --fml-text: #fff;
    --fml-muted: var(--gray-400);
    --fml-ring: color-mix(in oklab, #fff 10%, transparent);
}

.fml [x-cloak] {
    display: none !important;
}

.fml-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fml-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.fml-muted {
    display: block;
    color: var(--fml-muted);
    font-size: 0.75rem;
}

.fml-error-text {
    color: var(--danger-600);
    font-size: 0.75rem;
}

.dark .fml-error-text {
    color: var(--danger-400);
}

.fml-help {
    margin: 0;
    color: var(--fml-muted);
    font-size: 0.875rem;
}

.fml-input-narrow {
    width: 6rem;
}

/* Nothing in the field is selectable as text while dragging: labels, badges and numbers are interface, not content. */

.fml-tile,
.fml-table-ctn tr,
.fml-toolbar,
.fml-dropzone,
.fml-drop-overlay,
.fml-hint,
.fml-limits {
    -webkit-user-select: none;
    user-select: none;
}

.fml input,
.fml textarea {
    -webkit-user-select: text;
    user-select: text;
}

body.sorting,
body.sorting * {
    -webkit-user-select: none !important;
    user-select: none !important;
}

body.sorting {
    cursor: grabbing;
}

/*
 * Read-only while a Livewire request of the form is on its way (see watchLivewireRequests() in the script). The field
 * itself keeps receiving dragged files, so a drop is never handed to the browser; it is added once the request is done.
 */

.fml.fml-is-busy {
    cursor: progress;
}

.fml.fml-is-busy > :not(.fml-drop-overlay) {
    pointer-events: none;
}

/* Empty state */

.fml-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 11rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--fml-border);
    border-radius: var(--radius-xl, 0.75rem);
    background: var(--fml-muted-surface);
    text-align: center;
}

.fml-dropzone.fml-is-disabled {
    min-height: 5rem;
}

.fml-dropzone-icon-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--gray-100);
}

.dark .fml-dropzone-icon-ctn {
    background: color-mix(in oklab, var(--gray-500) 20%, transparent);
}

.fml-dropzone-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--fml-muted);
}

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

.fml-limits {
    margin: 0;
    color: var(--fml-muted);
    font-size: 0.75rem;
}

/* Dragging files over the field */

.fml-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px dashed var(--primary-500);
    border-radius: var(--radius-xl, 0.75rem);
    background: color-mix(in oklab, var(--primary-500) 12%, var(--fml-surface));
    color: var(--primary-700);
    font-size: 1rem;
    font-weight: 600;
    pointer-events: none;
}

.fml.fml-is-dragging > .fml-drop-overlay {
    display: flex;
}

.dark .fml-drop-overlay {
    color: var(--primary-300);
}

.fml-drop-overlay-icon {
    width: 2rem;
    height: 2rem;
}

/* Header */

.fml-toolbar,
.fml-toolbar-start,
.fml-toolbar-end,
.fml-selection,
.fml-move,
.fml-more,
.fml-card-actions,
.fml-actions-group,
.fml-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fml-toolbar {
    justify-content: space-between;
    min-height: 2.25rem;
}

.fml-toolbar-end {
    margin-inline-start: auto;
}

.fml-selection {
    gap: 0.75rem;
}

.fml-count {
    font-weight: 600;
}

/* Grid / list switch: a Filament button group; the current view is shown as pressed */
/* Icon-only buttons have no text line, so the padding is raised to match the height of the labelled buttons beside them */
.fml-view-toggle-btn.fi-btn.fi-size-sm {
    padding: 0.5rem 0.625rem;
}

.fml-view-toggle-btn.fi-btn[aria-pressed='true'] {
    background: var(--gray-100);
}

.fml-view-toggle-btn.fi-btn[aria-pressed='true'] .fi-icon {
    color: var(--primary-600);
}

.dark .fml-view-toggle-btn.fi-btn[aria-pressed='true'] {
    background: color-mix(in oklab, #fff 10%, transparent);
}

.dark .fml-view-toggle-btn.fi-btn[aria-pressed='true'] .fi-icon {
    color: var(--primary-400);
}

.fml-card-actions,
.fml-actions-group {
    gap: 0.125rem;
}

/* Progress & notices */

.fml-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.fml-progress-bar {
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.dark .fml-progress-bar {
    background: color-mix(in oklab, #fff 10%, transparent);
}

.fml-progress-bar > div {
    height: 100%;
    background: var(--primary-600);
    transition: width 0.2s;
}

.fml-progress-bar-light {
    flex: none;
    width: 70%;
    background: color-mix(in oklab, #fff 35%, transparent);
}

.fml-progress-bar-light > div {
    background: #fff;
}

.fml-notice,
.fml-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.875rem;
}

.fml-hint {
    color: var(--fml-muted);
    font-size: 0.8125rem;
}

.fml-notice {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg, 0.5rem);
}

.fml-notice-info {
    background: color-mix(in oklab, var(--info-500, var(--primary-500)) 10%, transparent);
    color: var(--info-700, var(--primary-700));
}

.fml-notice-danger {
    background: color-mix(in oklab, var(--danger-500) 10%, transparent);
    color: var(--danger-700);
}

.dark .fml-notice-info {
    color: var(--info-300, var(--primary-300));
}

.dark .fml-notice-danger {
    color: var(--danger-300);
}

.fml-notice-action {
    margin-inline-start: auto;
}

/* Detailed upload list (optional) */

.fml-queue {
    border-radius: var(--radius-xl, 0.75rem);
    background: var(--fml-surface);
    box-shadow: 0 0 0 1px var(--fml-ring);
}

.fml-queue-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--fml-border);
}

.fml-queue-list {
    max-height: 12rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.fml-queue-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(6rem, auto) 8rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.fml-queue-item + .fml-queue-item {
    border-top: 1px solid var(--fml-border);
}

.fml-queue-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fml-queue-size,
.fml-queue-status {
    color: var(--fml-muted);
    font-size: 0.75rem;
}

.fml-queue-item[data-status='failed'] .fml-queue-status {
    color: var(--danger-600);
}

.fml-queue-item[data-status='done'] .fml-progress-bar > div {
    background: var(--success-600);
}

/* Thumbnails */

.fml-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--radius-lg, 0.5rem);
    background: var(--fml-muted-surface);
    box-shadow: inset 0 0 0 1px var(--fml-ring);
    overflow: hidden;
}

.fml-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

.fml-thumb-small {
    width: 3.5rem;
}

.fml-thumb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--fml-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.fml-thumb-placeholder-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.fml-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: color-mix(in oklab, #000 45%, transparent);
    color: #fff;
    text-align: center;
}

.fml-tile-overlay-error {
    background: color-mix(in oklab, var(--danger-700) 85%, transparent);
}

.fml-tile-status {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.fml-thumb-small .fml-tile-overlay .fml-tile-status,
.fml-thumb-small .fml-tile-overlay .fml-retry-btn,
.fml-thumb-small .fml-progress-bar {
    display: none;
}

.fml-spinner {
    width: 1.5rem;
    height: 1.5rem;
}

/* Grid of tiles */

.fml-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--fml-tile-size), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fml-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.fml-tile.fml-is-draggable .fml-thumb {
    cursor: grab;
}

.fml-tile.fml-is-selected .fml-thumb {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.fml-tile[data-state='new'] .fml-thumb {
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--info-500, var(--primary-500)) 60%, transparent);
}

.fml-tile-top {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fml-tile-check {
    display: flex;
    padding: 0.25rem;
    border-radius: var(--radius-md, 0.375rem);
    background: color-mix(in oklab, #fff 85%, transparent);
    cursor: pointer;
}

.dark .fml-tile-check {
    background: color-mix(in oklab, var(--gray-900) 85%, transparent);
}

.fml-tile-position {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: color-mix(in oklab, #000 55%, transparent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fml-tile-badges {
    position: absolute;
    left: 0.375rem;
    bottom: 0.375rem;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    pointer-events: none;
}

/* Badges sit on top of a photo, so they get a solid background instead of Filament's translucent one. */
.fml-tile-badge.fi-badge {
    background: color-mix(in oklab, var(--fml-surface) 92%, transparent);
    box-shadow: 0 1px 2px color-mix(in oklab, #000 15%, transparent);
}

.fml-tile-remove {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in oklab, #000 60%, transparent);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s;
}

.fml-tile:hover .fml-tile-remove,
.fml-tile:focus-within .fml-tile-remove,
.fml-tile[data-state='failed'] .fml-tile-remove,
.fml-tile-remove:focus-visible {
    opacity: 1;
}

.fml-tile-remove:focus-visible,
.fml-add-tile button:focus-visible,
.fml-alt-button:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

@media (hover: none), (max-width: 40rem) {
    .fml-tile-remove {
        opacity: 1;
    }
}

.fml-tile-remove:hover {
    background: var(--danger-600);
}

.fml-tile-footer {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.fml-tile-footer-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    min-height: 2rem;
}

/* A long name is cut off; the action icons always stay on one line at their full size */
.fml-tile-footer-row .fml-card-name {
    flex: 1 1 auto;
}

.fml-tile-footer-row .fml-card-actions,
.fml-tile-footer-row .fml-actions-group {
    flex: none;
    flex-wrap: nowrap;
}

.fml-tile-footer-row .fml-card-actions {
    margin-inline-start: auto;
}

.fml-card-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fml-alt-button {
    display: inline-flex;
    align-self: flex-start;
    max-width: calc(100% + 0.375rem);
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.25rem 0.375rem;
    margin-inline-start: -0.375rem;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    background: transparent;
    color: var(--fml-muted);
    font-size: 0.75rem;
    text-align: start;
    cursor: pointer;
}

.fml-alt-button:hover:not(:disabled) {
    background: var(--fml-muted-surface);
    color: var(--fml-text);
}

.fml-alt-button.fml-is-missing {
    color: var(--primary-600);
    font-weight: 500;
}

.fml-alt-button.fml-is-required {
    color: var(--danger-600);
}

.dark .fml-alt-button.fml-is-missing {
    color: var(--primary-400);
}

.dark .fml-alt-button.fml-is-required {
    color: var(--danger-400);
}

.fml-alt-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same size as a photo: square, column width, at the top of the row (rows are taller because of the tile footers) */
.fml-add-tile {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.fml-add-tile button {
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    aspect-ratio: 1;
    padding: 0.5rem;
    border: 2px dashed var(--fml-border);
    border-radius: var(--radius-lg, 0.5rem);
    background: transparent;
    color: var(--fml-muted);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.fml-add-tile button:hover {
    border-color: var(--primary-500);
    color: var(--primary-600);
}

.fml-add-tile-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.fml-alt-locales {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sortable-ghost {
    opacity: 0.35;
}

.sortable-fallback {
    opacity: 0.9;
    transform: rotate(2deg);
}

@media (max-width: 40rem) {
    .fml {
        --fml-tile-size: 7rem;
    }

    .fml-grid {
        gap: 0.5rem;
    }

    .fml-toolbar-end {
        flex: 1 1 100%;
    }

    .fml-add-btn {
        flex: 1;
    }

    .fml-queue-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fml-queue-size,
    .fml-queue-item .fml-progress-bar {
        display: none;
    }
}

/* Single file */

.fml-single {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--radius-xl, 0.75rem);
    background: var(--fml-surface);
    box-shadow: 0 1px 2px color-mix(in oklab, #000 5%, transparent), 0 0 0 1px var(--fml-ring);
}

.fml-thumb-single {
    width: 6rem;
}

.fml-single-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fml-single-alt {
    margin-top: 0.25rem;
}

@media (max-width: 40rem) {
    .fml-single {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .fml-thumb-single {
        width: 4.5rem;
    }

    .fml-single .fml-card-actions {
        grid-column: 1 / -1;
    }
}

/* Move, paging & dialogs */

.fml-move {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    background: var(--fml-muted-surface);
    box-shadow: 0 0 0 1px var(--primary-500);
}

.fml-more {
    justify-content: center;
}

.fml-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.fml-modal-actions > * {
    flex: 1;
}

.fml-modal-actions-start {
    justify-content: flex-start;
}

.fml-modal-actions-start > * {
    flex: none;
}

.fml-alt-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fml-alt-dialog-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/*
 * List (optional). Like a Filament table, with Filament's cell padding (px-3 py-4, ps-6/pe-6 on the outer cells), text
 * sizes and colours. Only the table is a card; the header and pagination sit outside it, as in the grid view.
 */

.fml-collection {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fml-table-ctn {
    border-radius: var(--radius-xl, 0.75rem);
    background: var(--fml-surface);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow-x: auto;
}

.dark .fml-table-ctn {
    box-shadow: 0 0 0 1px color-mix(in oklab, #fff 10%, transparent);
}

.fml-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    text-align: start;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.fml-table thead tr {
    background: var(--gray-50);
}

.dark .fml-table thead tr {
    background: color-mix(in oklab, #fff 5%, transparent);
}

.fml-table th {
    padding: 0.875rem 0.75rem;
    color: var(--gray-950);
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
}

.dark .fml-table th {
    color: #fff;
}

.fml-table td {
    padding: 1rem 0.75rem;
    border-top: 1px solid var(--fml-border);
    vertical-align: middle;
    color: var(--gray-950);
}

.dark .fml-table td {
    border-top-color: color-mix(in oklab, #fff 5%, transparent);
    color: #fff;
}

.fml-table th:first-child,
.fml-table td:first-child {
    padding-inline-start: 1rem;
}

.fml-table th:last-child,
.fml-table td:last-child {
    padding-inline-end: 1rem;
}

@media (min-width: 40rem) {
    .fml-table th:first-child,
    .fml-table td:first-child {
        padding-inline-start: 1.5rem;
    }

    .fml-table th:last-child,
    .fml-table td:last-child {
        padding-inline-end: 1.5rem;
    }
}

.fml-table tr.fml-is-selected td {
    background: var(--gray-50);
}

.fml-table tr.fml-is-selected td:first-child {
    box-shadow: inset 2px 0 0 0 var(--primary-600);
}

.dark .fml-table tr.fml-is-selected td {
    background: color-mix(in oklab, #fff 5%, transparent);
}

.fml-table tr[data-state='failed'] td {
    background: color-mix(in oklab, var(--danger-500) 6%, var(--fml-surface));
}

.fml-table-cell-check {
    width: 1px;
    white-space: nowrap;
}

/*
 * Like Filament's table-auto tables: only the reorder handle and checkbox columns are narrow (w-1). Every other column
 * is sized by the browser from its content, text does not wrap, and the spare width is shared between the columns.
 */
.fml-table tbody td {
    white-space: nowrap;
}

/* Thumbnail and names in one cell, so the "File" header lines up with the content */
.fml-table-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fml-table-file .fml-thumb-small {
    flex: none;
    width: 2.5rem;
    border-radius: var(--radius-md, 0.375rem);
}

.fml-table .fml-name-row {
    flex-wrap: nowrap;
}

.fml-table-description {
    display: block;
    color: var(--gray-500);
}

.dark .fml-table-description {
    color: var(--gray-400);
}

.fml-table tbody td.fml-table-cell-alt {
    min-width: 14rem;
    white-space: normal;
}

.fml-row-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Filament's reorder handle: a gray two-bar icon button in its own narrow column */
.fml-table-cell-handle {
    width: 1px;
}

.fml-table td.fml-table-cell-handle {
    padding-block: 0;
}

.fml-handle.fi-icon-btn {
    color: var(--gray-400);
    cursor: move;
}

.fml-handle.fi-icon-btn:hover {
    color: var(--gray-500);
}

.dark .fml-handle.fi-icon-btn {
    color: var(--gray-500);
}