/* ============================================================
   flight_screenshot_widget.css
   Drop-zone upload widget for FlightScreenshot admin inline.
   Scoped under .fss-* to avoid collisions with Django admin CSS.
   ============================================================ */

/* ── Root wrapper ─────────────────────────────────────────── */
.fss-widget {
    --fss-accent:     #7c3aed;          /* brand violet */
    --fss-accent-rgb: 124, 58, 237;
    --fss-border:     #d1d5db;
    --fss-bg:         #fafafa;
    --fss-radius:     10px;
    --fss-text:       #374151;
    --fss-muted:      #9ca3af;
    --fss-green:      #16a34a;
    --fss-danger:     #dc2626;

    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
}

/* ── Current-image preview (is_initial state) ─────────────── */
.fss-current {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fss-preview-wrap {
    position: relative;
    display: inline-block;
    border-radius: var(--fss-radius);
    overflow: hidden;
    border: 1.5px solid var(--fss-border);
    max-width: 100%;
}

.fss-preview-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #f3f4f6;
}

.fss-preview-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* ── Clear checkbox ───────────────────────────────────────── */
.fss-clear-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fss-danger);
    cursor: pointer;
    user-select: none;
}

.fss-clear-checkbox {
    accent-color: var(--fss-danger);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.fss-change-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--fss-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Drop-zone ────────────────────────────────────────────── */
.fss-dropzone {
    position: relative;
    border: 2px dashed var(--fss-border);
    border-radius: var(--fss-radius);
    background: var(--fss-bg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    outline: none;
    overflow: hidden;
    width: max-content;
}

.fss-dropzone:hover,
.fss-dropzone:focus-visible {
    border-color: var(--fss-accent);
    background: rgba(var(--fss-accent-rgb), .04);
    box-shadow: 0 0 0 3px rgba(var(--fss-accent-rgb), .12);
}

/* Drag-over state (toggled by JS) */
.fss-dropzone.fss-dragging {
    border-color: var(--fss-accent);
    background: rgba(var(--fss-accent-rgb), .06);
    box-shadow: 0 0 0 4px rgba(var(--fss-accent-rgb), .18);
}

/* ── Hidden native input ──────────────────────────────────── */
.fss-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 0;        /* prevents iOS zoom */
}

/* ── Idle-state content ───────────────────────────────────── */
.fss-idle-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;   /* let clicks fall through to the input */
}

.fss-icon-wrap {
    color: var(--fss-accent);
    margin-bottom: 4px;
}

.fss-icon {
    width: 48px;
    height: 48px;
}

.fss-primary-text {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--fss-text);
}

.fss-browse-link {
    color: var(--fss-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    pointer-events: auto;
    cursor: pointer;
}

.fss-secondary-text {
    margin: 0;
    font-size: 13px;
    color: var(--fss-muted);
}

.fss-secondary-text kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    background: #fff;
    color: #374151;
    box-shadow: 0 1px 0 #d1d5db;
}

.fss-hint {
    margin: 0;
    font-size: 11px;
    color: #c4c4c4;
}

/* ── Drag-overlay ─────────────────────────────────────────── */
.fss-drag-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(var(--fss-accent-rgb), .08);
    backdrop-filter: blur(2px);
    color: var(--fss-accent);
    font-size: 15px;
    font-weight: 600;
    border-radius: calc(var(--fss-radius) - 2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.fss-dropzone.fss-dragging .fss-drag-overlay {
    opacity: 1;
}

/* ── Preview state (after file selected) ─────────────────── */
.fss-preview-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.fss-preview-state[hidden] {
    display: none;
}

.fss-new-preview {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 6px;
    border: 1.5px solid #e5e7eb;
    background: #f3f4f6;
}

.fss-preview-info {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.fss-file-name {
    font-size: 12px;
    color: var(--fss-green);
    font-weight: 500;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fss-clear-new {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: var(--fss-danger);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}

.fss-clear-new:hover {
    background: #fecaca;
}

/* ── When dropzone has a file (shrink padding) ────────────── */
.fss-dropzone.fss-has-file {
    padding: 16px 20px;
    cursor: default;
    border-style: solid;
    border-color: #d1fae5;
    background: #f0fdf4;
}

.fss-dropzone.fss-has-file .fss-idle-state {
    display: none;
}

.fss-dropzone.fss-has-file .fss-preview-state {
    display: flex;
}

/* ============================================================
   flight_screenshot_widget.css
   Updated: Image should fully cover area (no background)
   ============================================================ */

/* ── Preview wrapper fix ───────────────────────────────────── */
.fss-preview-wrap {
    position: relative;
    display: block;
    border-radius: var(--fss-radius);
    overflow: hidden;
    border: 1.5px solid var(--fss-border);
    width: 100%;
    height: 220px; /* important for cover to work */
}

/* ── Existing image (initial state) ───────────────────────── */
.fss-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 🔥 changed */
    display: block;
}

/* ── New uploaded preview ─────────────────────────────────── */
.fss-new-preview {
    width: 100%;
    height: 180px;       /* fixed height */
    object-fit: cover;   /* 🔥 changed */
    border-radius: 6px;
    border: none;        /* removed border */
    background: none;    /* 🔥 removed grey bg */
}

/* ── Dropzone when file present ───────────────────────────── */
.fss-dropzone.fss-has-file {
    padding: 0;              /* remove inner spacing */
    cursor: default;
    border-style: solid;
    border-color: #d1fae5;
    background: transparent; /* 🔥 no bg */
}

/* ── Preview state layout fix ─────────────────────────────── */
.fss-preview-state {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* full width */
    gap: 10px;
    pointer-events: none;
    width: 100%;
}