/* ============================================================
   Dropzone — drag & drop file upload, shared across the platform.

   Colors are read through --dz-* tokens that prefer the admin
   dashboard's own chrome variables (--admin-page-*, --admin-link
   from admin_css/base/tokens.css) and fall back to the public
   brand variables (eazym-legal.css) when those aren't loaded.

   This matters: --text-main/--bg-alt/--color-accent etc. are the
   per-locale MENU brand theme (each restaurant picks its own, e.g.
   the red seen in one admin account) — not a reliable admin-chrome
   text/background pairing. --admin-page-text/--admin-page-alt are
   the ones admin's tokens.css actually keeps dark-mode-safe
   (hardcoded per theme), so those must win whenever admin is loaded.
   ============================================================ */

.dz {
    --dz-accent: var(--admin-link, var(--color-accent, var(--primary, #00a0e0)));
    --dz-text: var(--admin-page-text, var(--text-main, inherit));
    --dz-text-muted: var(--admin-page-muted, var(--text-muted, inherit));
    --dz-surface: var(--admin-page-alt, var(--bg-alt, var(--bg-surface, #ccc)));
    --dz-border: var(--admin-page-border, var(--border-color, #ccc));

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 130px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-body, inherit);
    border-radius: var(--radius-md, 12px);
    /* --dz-surface can equal the card behind it, so mixing in a
       slice of --dz-text guarantees a visible tone step regardless
       of theme; the accent share of the border is kept strong so
       the dashed outline reads clearly rather than fading away. */
    border: 2px dashed color-mix(in srgb, var(--dz-accent) 45%, var(--dz-border));
    background: color-mix(in srgb, var(--dz-surface) 92%, var(--dz-text));
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dz:hover,
.dz.dz--active {
    border-color: var(--dz-accent);
    background: color-mix(in srgb, var(--dz-accent) 12%, var(--dz-surface));
}

.dz:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dz-accent) 25%, transparent);
}

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

.dz__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dz__icon {
    font-size: 1.6rem;
    color: var(--dz-accent);
    opacity: 0.9;
}

.dz__title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dz-text);
}

.dz__title em {
    color: var(--dz-accent);
    font-style: normal;
    font-weight: 700;
}

.dz__hint {
    font-size: 0.78rem;
    color: var(--dz-text-muted);
    opacity: 0.85;
}

.dz__files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.dz__files[hidden] {
    display: none;
}

.dz__file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--dz-border);
    /* One step darker/lighter than the zone's own background so a
       chip doesn't blend into the box it's sitting in. */
    background: color-mix(in srgb, var(--dz-surface) 85%, var(--dz-text));
    text-align: left;
}

.dz__file-icon {
    flex-shrink: 0;
    font-size: 1.05rem;
    color: var(--dz-accent);
}

.dz__file-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--dz-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dz__file-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dz-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dz__file-remove:hover {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

/* Integrated remove button floating over a custom preview (e.g. the
   admin logo/banner thumbnail), used with Dropzone.attach(..., { preview: false }).
   Same visual language as .dz__file-remove, positioned top-right. */
.dz__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dz-surface) 88%, var(--dz-text));
    color: var(--dz-text-muted);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, color 0.15s ease;
}

.dz__remove:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

.dz.is-busy {
    opacity: 0.65;
    pointer-events: none;
}