/* ==========================================================================
   inventory-producers.css
   Styles for the "Producers Editor" (view switcher, producer
   entry cards, shared-CSS textarea, image gallery) — kept separate from
   style.css so the base Inventory Manager styling stays untouched.
   Loaded only by index.html, alongside style.css.
   ========================================================================== */

/* ==========================================================================
   01. VIEW SWITCHER (Inventory Database List <-> Producers Editor)
   ========================================================================== */
.view-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.view-switcher-tabs,
.view-switcher-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-view {
    height: 40px;
    padding: 0 22px;
    border-radius: 50px;
    border: 1px solid #475569;
    background: transparent;
    color: #cbd5e1;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.btn-view:hover {
    background: #334155;
    color: #ffffff;
}

.btn-view.active {
    background: var(--wine);
    border-color: var(--wine);
    color: #ffffff;
}

/* ==========================================================================
   02. PRODUCER ENTRY FORM (HTML content textarea)
   ========================================================================== */
.producer-html-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #475569;
    background: #0f172a;
    color: #f1f5f9;
    border-radius: 6px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    min-height: 320px;
}

.producer-html-textarea:focus {
    border-color: #3b82f6;
}

/* ==========================================================================
   03. MULTI-IMAGE UPLOAD GALLERY
   ========================================================================== */
.producer-images-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.producer-image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.producer-image-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #334155;
    background: #0f172a;
    flex-shrink: 0;
}

.producer-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.producer-image-thumb-order {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(15, 23, 42, 0.85);
    color: #f1f5f9;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.4;
}

.producer-image-thumb-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.8);
    opacity: 0;
    transition: 0.15s;
}

.producer-image-thumb:hover .producer-image-thumb-actions,
.producer-image-thumb:focus-within .producer-image-thumb-actions {
    opacity: 1;
}

.producer-image-thumb-actions .btn-tool {
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1;
    height: auto;
}

/* ==========================================================================
   04. PRODUCER ENTRY LIST CARDS
   ========================================================================== */
.producer-card {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.producer-card-head {
    display: grid;
    /* Checkbox and thumbnail size themselves; the info block takes
       whatever's left. This replaced a flex row — flex-basis:0% +
       min-width:0 on .producer-card-info should have done the same thing
       and didn't (it kept sizing itself off its un-truncated text content
       instead of the row's actual available space, blowing the whole
       card out past the viewport on mobile). Grid's 1fr track resolves
       against the row's real width directly, sidestepping whatever
       nested-flex sizing quirk was causing that. */
    grid-template-columns: auto auto 1fr;
    align-items: flex-start;
    gap: 12px;
}

.producer-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.producer-card-info b {
    font-size: 15px;
    color: #f1f5f9;
}

.producer-card-meta {
    font-size: 11px;
    color: #64748b;
}

.producer-card-preview {
    font-size: 12px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.producer-card-actions {
    flex-direction: row !important;
    gap: 8px;
}

.producer-card-actions .btn-tool {
    flex: 1;
}

/* ==========================================================================
   05. MOBILE OVERRIDES
   ========================================================================== */
@media screen and (max-width: 768px) {
    .view-switcher {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    /* Inventory Database List / Producers Editor tabs — a bit more
       breathing room between them than the default 10px so they read as
       two distinct destinations, not one continuous bar. */
    .view-switcher-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* Export ODS/ODT/PDF (+ HoReCa/Flip Box for admin) — a clean 2-column
       grid instead of one-per-row, same shape as the Duplicate/Edit/
       Delete row-action buttons elsewhere in the app. The last visible
       button in each role's set spans both columns (mirrors "Delete"
       sitting full-width under the paired Duplicate/Edit buttons) — see
       the role-specific rules below, since HoReCa/Flip Box exist in the
       DOM but stay hidden for staff, so a structural :last-child selector
       alone can't tell which button is actually last on screen. */
    .view-switcher-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .view-switcher-actions .btn-main {
        margin: 0;
    }

    body.role-staff .view-switcher-actions .btn-color-danger {
        grid-column: 1 / -1;
    }

    body.role-admin .view-switcher-actions .btn-color-slate {
        grid-column: 1 / -1;
    }

    .btn-view {
        width: 100%;
        justify-content: center;
        height: 44px;
    }

    .view-switcher .btn-main {
        width: 100%;
        justify-content: center;
    }

    .producer-card-head {
        flex-direction: column;
    }

    .producer-card-actions {
        flex-direction: column !important;
    }

    .producer-image-thumb-actions {
        opacity: 1;
        background: rgba(15, 23, 42, 0.55);
    }

    .template-section-layout,
    .template-section-layout.is-reverse {
        flex-direction: column;
    }

    .section-image-dropzone-overlay {
        opacity: 1;
        pointer-events: auto;
        background: rgba(15, 23, 42, 0.4);
    }
}

/* ==========================================================================
   04. TEMPLATE BUILDER — sections editor
   ========================================================================== */
.template-section-card {
    border: 1px solid #334155;
    background: #0f172a;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.template-section-card input[type="text"],
.template-section-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    resize: vertical;
}

.template-section-card input[type="text"]:focus,
.template-section-card textarea:focus {
    border-color: #3b82f6;
}

.template-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #cbd5e1;
    font-size: 13px;
}

/* ---- interactive image placement: mirrors the published left/right row ---- */
.template-section-layout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.template-section-layout.is-reverse {
    flex-direction: row-reverse;
}

.section-text-pane {
    /* The image dropzone is now a small fixed-width helper (not sized to
       the real published ratio — see .section-image-dropzone), so this
       just takes whatever space is left rather than fighting it for a
       specific share. */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.section-image-dropzone {
    position: relative;
    /* This is a positioning helper, not a preview at publish scale — the
       aspect-ratio match (below) is what keeps the pan/zoom accurate; the
       on-screen size doesn't need to track the real 1.1fr column, and
       letting it grow that large crowded out the text fields next to it.
       Capped small and fixed instead of flexing with the row. */
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    min-width: 160px;
    /* Matches .fg-winery-shape's aspect-ratio: 4 / 3 exactly, so the blob's
       curvature and framing here are what will actually publish — a box
       with a different ratio makes the same border-radius percentages draw
       a visibly different (stretched/squashed) blob shape. */
    aspect-ratio: 4 / 3;
    border: 2px dashed #475569;
    border-radius: var(--shape-radius, 8px);
    background: #1e293b;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-image-dropzone:hover,
.section-image-dropzone.is-drag-over {
    border-color: #3b82f6;
    background: #24324a;
}

.section-image-dropzone.has-image {
    cursor: default;
    /* No border here to match the live .fg-winery-shape, which is
       borderless — just the image itself, clipped to the blob. */
    border: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.section-image-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
    text-align: center;
    padding: 20px 10px;
    pointer-events: none;
}

.section-image-dropzone-empty i {
    font-size: 22px;
}

.section-image-dropzone-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--crop-x, 50%) var(--crop-y, 50%);
    transform: scale(var(--crop-zoom, 1));
    display: block;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.section-image-dropzone-img.is-dragging {
    cursor: grabbing;
}

.section-image-dropzone-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: 0.15s;
    pointer-events: none;
}

.section-image-dropzone:hover .section-image-dropzone-overlay,
.section-image-dropzone:focus-within .section-image-dropzone-overlay {
    opacity: 1;
    pointer-events: auto;
}

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

.simg-pad {
    display: grid;
    grid-template-columns: repeat(3, 26px);
    grid-template-rows: repeat(3, 26px);
    gap: 2px;
}

.simg-up    { grid-column: 2; grid-row: 1; }
.simg-left  { grid-column: 1; grid-row: 2; }
.simg-right { grid-column: 3; grid-row: 2; }
.simg-down  { grid-column: 2; grid-row: 3; }

.simg-zoom-row,
.simg-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.simg-zoom-label {
    min-width: 34px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #f1f5f9;
}

.simg-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #475569;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 11px;
    cursor: pointer;
    transition: 0.15s;
}

.simg-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

.simg-btn.simg-danger:hover {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}

/* ==========================================================================
   05. TEMPLATE BUILDER — top-level intro textarea
   (matches the dark theme applied to inputs; plain <textarea> has no
   base rule elsewhere in the app, so it was rendering with browser defaults)
   ========================================================================== */
.producer-template-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #475569;
    background: #0f172a;
    color: #f1f5f9;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    resize: vertical;
}

.producer-template-textarea:focus {
    border-color: #3b82f6;
}

/* ==========================================================================
   TEMPLATE SECTION EDITOR — title/body fields, header actions row
   ========================================================================== */
.section-title-input {
    margin-bottom: 8px;
}

.section-body-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
}

.section-head-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.section-reverse-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
}

/* ==========================================================================
   PRODUCER LIST — empty state + list-row thumbnail sizing
   ========================================================================== */
.producers-empty-state {
    color: #64748b;
    padding: 20px;
    text-align: center;
}

.producer-list-thumb {
    width: 56px;
    height: 56px;
}