/**
 * File Name:   portal-uploads/assets/css/main.css
 * Description: Styles for the portal upload lists shortcode.
 *              Layout and structure only — visual tokens (colours, borders, radius)
 *              inherit from the nvg.ag portal design system (nvg.css, Bootstrap).
 *
 * Author:      dynaxio AG
 * Created:     2026-05-23
 * Updated:     2026-05-28
 * Version:     2.7.0
 *
 * License:     See LICENSE.md in the project root for license information.
 *
 * Changelog:
 *  - 2026-05-23: Initial release (1.0.0)
 *  - 2026-05-23: Replace plain file input with dropzone styles (1.1.0)
 *  - 2026-05-23: Compact horizontal dropzone; item row align-items center (1.2.0)
 *  - 2026-05-23: Align with nvg.ag portal design tokens (flat borders, cyan accent, no blue) (1.3.0)
 *  - 2026-05-23: Override nvg-cockpit-btn padding so upload button matches dropzone height (1.4.0)
 *  - 2026-05-23: Align heading font sizes with portal dashboard typography (1.5.0)
 *  - 2026-05-24: Alternating item row backgrounds; heading tags now h5/h6/p so font-size CSS removed (1.6.0)
 *  - 2026-05-24: Section sibling separator; stronger section title; section-note; add-another-btn (1.7.0)
 *  - 2026-05-24: add-another-btn delegates to nvg-cockpit-btn; add add-another-msg error style (1.8.0)
 *  - 2026-05-24: Add size override for add-another-btn so it matches cockpit-btn sizing (1.9.0)
 *  - 2026-05-24: Add customer comments block styles (2.0.0)
 *  - 2026-05-24: Collapse empty Avada slider container to remove nav-hero gap (2.0.1)
 *  - 2026-05-27: Multi-slot layout: --multi modifier, slot + slot-label base styles, file-count style (2.1.0)
 *  - 2026-05-27: Fix --multi: keep row split (info left, slots right); remove column-override on item (2.1.1)
 *  - 2026-05-27: Remove --multi item-info row override; note/required/count stack under title again (2.1.2)
 *  - 2026-05-27: Progressive slots; badge order:10 + min-width; filename flex:1; dropzone flex:1 in slot; info min-width fix (2.2.0)
 *  - 2026-05-27: Switch --multi to CSS grid (auto 1fr) so all slot badges/buttons share same right edge (2.3.0)
 *  - 2026-05-27: justify-content:flex-end on --multi slots; compact filename + dropzone; all content right-aligned (2.4.0)
 *  - 2026-05-27: Force badge + upload button to identical fixed width (130px) in --multi context (2.5.0)
 *  - 2026-05-27: Add margin-right to badge to match button's visual right gap (2.5.1)
 *  - 2026-05-28: Fix --multi slot stacking (display:block); remove min-width from badge+button for single items (2.6.0)
 *  - 2026-05-28: Apply 130px fixed width to badge+button globally so single items match --multi (2.6.1)
 *  - 2026-05-28: Sub-comment tooltip: inner text span + info icon + CSS tooltip (instant, no delay) (2.6.2)
 *  - 2026-05-28: Add another button: override Avada theme to match Upload file neutral-gray appearance (2.6.3)
 *  - 2026-05-28: Add another button: border-radius:0 (no rounded corners on portal); instant tooltip via ::after (2.6.4)
 *  - 2026-05-28: border-radius:0 on list status badge, item badge, upload button; add-another fixed 130px width (2.6.5)
 *  - 2026-05-28: Revert upload button changes; keep upload button as-was (no border-radius override) (2.6.7)
 *  - 2026-05-28: Rejected slot: --rejected modifier stacks info line over dropzone; rejection-info row styles (2.6.8)
 *  - 2026-05-28: Fix rejection-info alignment: comment flex:1 so badge stays in 130px right column (2.6.9)
 *  - 2026-05-28: Remove erroneous margin-right:0 override on rejection-info badge; restore global 0.3rem (2.7.0)
 */

/* ------------------------------------------------------------------ */
/* Theme fixes (global, applies on all portal pages)                  */
/* ------------------------------------------------------------------ */

/* Avada renders #sliders-container between the nav and main even when
   no slider is placed on the page. Reset its min-height so the empty
   div does not create a white gap below the navigation bar.
   Safe for real slider pages: Avada sets explicit height via JS. */
#sliders-container {
    min-height: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Container                                                           */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads {
    font-family: inherit;
}

/* Title is now h5 — font-size/weight controlled by Bootstrap h5 default */
.nvg-portal-uploads__title {
    margin-bottom: 0;
}

.nvg-portal-uploads__empty {
    color: rgb(173, 173, 173);
}

/* ------------------------------------------------------------------ */
/* List card                                                           */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__list {
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.nvg-portal-uploads__list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* List card title is now h6 — font-size/weight controlled by Bootstrap h6 default */
.nvg-portal-uploads__list-title {
    margin: 0;
}

.nvg-portal-uploads__list-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: rgb(173, 173, 173);
}

/* ------------------------------------------------------------------ */
/* List-level status badges                                            */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nvg-portal-uploads__status--open     { background: #dbeafe; color: #1d4ed8; }
.nvg-portal-uploads__status--complete { background: #d1fae5; color: #065f46; }
.nvg-portal-uploads__status--expired  { background: #fee2e2; color: #991b1b; }

/* ------------------------------------------------------------------ */
/* Section                                                             */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__section {
    margin-bottom: 1.25rem;
}

/* Visual separator between consecutive sections */
.nvg-portal-uploads__section + .nvg-portal-uploads__section {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.25rem;
    margin-top: 0.5rem;
}

/* Section title: now h6 — stronger and darker than the previous p styling */
.nvg-portal-uploads__section-title {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(80, 80, 80);
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e7eb;
}

.nvg-portal-uploads__section-note {
    font-size: 0.8rem;
    color: rgb(173, 173, 173);
    margin: 0 0 0.75rem;
}

/* Add another button — neutral gray to match the Upload file button appearance.
   Uses !important throughout to override Avada theme's active-button styles
   (which render as white background + thick dark border). */
.nvg-portal-uploads__add-another-btn {
    margin-top: 0.75rem;
}

.nvg-portal-uploads__add-another-btn.nvg-cockpit-btn {
    /* Fixed 130px to match Upload file button; same font/padding as upload button */
    width:         130px               !important;
    min-width:     130px               !important;
    max-width:     130px               !important;
    background:    rgba(0, 0, 0, 0.04) !important;
    border:        1px solid #d1d5db   !important;
    color:         rgb(80, 80, 80)     !important;
    border-radius: 0                   !important;
    box-shadow:    none                !important;
    outline:       none                !important;
    font-weight:   400                 !important;
    padding:       0.25rem 0.75rem     !important;
    font-size:     0.75rem             !important;
    white-space:   nowrap              !important;
    line-height:   1.5                 !important;
    text-align:    center              !important;
    transition:    background 0.15s ease, border-color 0.15s ease !important;
}

.nvg-portal-uploads__add-another-btn.nvg-cockpit-btn:hover {
    background:   rgba(0, 0, 0, 0.08) !important;
    border-color: #adb5bd             !important;
}

/* Instant tooltip for add-another button — shows section base title with no delay.
   Uses CSS content: attr(data-tooltip) so no JS is needed. */
.nvg-portal-uploads__add-another-btn[data-tooltip] {
    position: relative;
}
.nvg-portal-uploads__add-another-btn[data-tooltip]::after {
    content:        attr(data-tooltip);
    position:       absolute;
    bottom:         calc(100% + 6px);
    left:           50%;
    transform:      translateX(-50%);
    background:     rgba(40, 40, 40, 0.93);
    color:          #fff;
    font-size:      0.72rem;
    line-height:    1.5;
    padding:        0.3rem 0.5rem;
    border-radius:  3px;
    white-space:    nowrap;
    z-index:        1000;
    pointer-events: none;
    opacity:        0;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.18);
}
.nvg-portal-uploads__add-another-btn[data-tooltip]:hover::after {
    opacity: 1;
}

.nvg-portal-uploads__add-another-msg {
    font-size: 0.8rem;
    margin-top: 0.75rem;
    display: block;
}

.nvg-portal-uploads__add-another-msg.nvg-uploads-msg--error {
    color: #991b1b;
}

/* ------------------------------------------------------------------ */
/* Item row                                                            */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.nvg-portal-uploads__item:last-child {
    border-bottom: none;
}

.nvg-portal-uploads__item:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.nvg-portal-uploads__item-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 140px; /* prevent info column from collapsing alongside wide submission area */
}

.nvg-portal-uploads__item-title {
    font-weight: 400;
    font-size: 0.875rem;
}

.nvg-portal-uploads__item-note {
    font-size: 0.8rem;
    color: rgb(173, 173, 173);
}

.nvg-portal-uploads__item-required {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nvg-portal-uploads__item-required--yes { color: #b91c1c; }
.nvg-portal-uploads__item-required--no  { color: rgb(173, 173, 173); }

/* File count summary — "2 / 5" — retained for backward compat but no longer rendered */
.nvg-portal-uploads__item-file-count {
    font-size: 0.75rem;
    color: rgb(130, 130, 130);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* Multi-slot item layout (--multi modifier)                          */
/* ------------------------------------------------------------------ */

/* Switch multi-file items to CSS grid so the submission column has a fixed right edge.
   - Left column (info): auto-sized to its content
   - Right column (submission): fills all remaining space (1fr)
   Every slot inside the 1fr column stretches to the same width → badges and buttons
   all land at the identical x-position (column-aligned right edge). */
.nvg-portal-uploads__item--multi {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    /* gap and padding inherited from .nvg-portal-uploads__item base rule */
}

/* Submission column: switch to block layout so slots stack vertically without fighting
   the base flex-direction:row rule. Each slot is already display:flex internally. */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__item-submission {
    display: block;
}

/* Every slot fills the 1fr submission column AND clusters its content at the right.
   All slot types (pending/accepted/rejected/empty) end at the same right edge. */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__submission-slot {
    width: 100%;
    justify-content: flex-end;
}

/* ── Right-cluster content: compact filename + compact dropzone ──────── */

/* Filename: compact width, pushed right by justify-content:flex-end on slot.
   max-width leaves exactly badge-width (130px) + one gap (0.5rem) for the badge. */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__sub-filename {
    flex: none;
    max-width: calc(100% - 130px - 0.5rem);
}

/* Dropzone: compact (overrides global flex:1 on slot-level dropzone).
   justify-content:flex-end on the slot pushes it to the right edge. */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__submission-slot .nvg-portal-uploads__dropzone {
    flex: none;
}

/* Dropzone-inner: natural content width (no flex stretch inside compact dropzone) */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__submission-slot .nvg-portal-uploads__dropzone-inner {
    flex: none;
    white-space: nowrap;
}

/* ── Identical fixed width for badge AND upload button ───────────────
   130px fits the longest badge text ("Pending review") at 0.78rem.
   Using the same value on both guarantees a perfect right-aligned column. */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__sub-status,
.nvg-portal-uploads__item--multi .nvg-portal-uploads__submission-slot .nvg-portal-uploads__upload-btn.nvg-cockpit-btn {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* Badge: add the same visual right gap that nvg-cockpit-btn has from theme styles */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__sub-status {
    margin-right: 0.3rem;
}

/* Thin divider between consecutive slots */
.nvg-portal-uploads__item--multi .nvg-portal-uploads__submission-slot + .nvg-portal-uploads__submission-slot {
    border-top: 1px solid #f3f4f6;
    padding-top: 0.3rem;
}

/* ------------------------------------------------------------------ */
/* Submission slot (base — single + multi)                            */
/* ------------------------------------------------------------------ */

/* Each slot is a horizontal flex strip.
   Children are ordered via CSS flex order so DOM insertion order doesn't matter:
     order:1  = filename (fills remaining space, left side)
     order:2  = rejection comment (left of dropzone)
     order:3  = dropzone (grows to fill middle space)
     order:10 = status badge (always rightmost, same min-width as upload button) */
.nvg-portal-uploads__submission-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Rejected slot: stack the info line (badge + comment) over the dropzone row.
   display:block is used (same as --multi stacking) to avoid flex-direction fights. */
.nvg-portal-uploads__submission-slot--rejected {
    display: block;
}

/* Rejection info line: comment grows left, badge stays in the same fixed 130px right column
   as accepted/pending badges — visual column alignment is identical across all slot types. */
.nvg-portal-uploads__rejection-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    width: 100%;
}

/* Comment grows to fill available space, pushing the badge to the right edge */
.nvg-portal-uploads__rejection-info .nvg-portal-uploads__sub-comment {
    flex: 1;
    min-width: 0;
    max-width: none; /* override the global 220px cap */
}

/* Badge: keep all global rules (130px width, 0.3rem margin-right) — only prevent shrinking */
.nvg-portal-uploads__rejection-info .nvg-portal-uploads__sub-status {
    flex-shrink: 0;
}

/* Slot label retained for backward compat — no longer rendered in HTML */
.nvg-portal-uploads__slot-label {
    font-size: 0.75rem;
    color: rgb(130, 130, 130);
    font-weight: 500;
    min-width: 72px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Submission area                                                     */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__item-submission {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.nvg-portal-uploads__sub-status {
    /* Fixed 130px so badge always matches the Upload file button width —
       applies to both single-file and --multi items. */
    order: 10;
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 0.3rem;
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 500;
}

.nvg-portal-uploads__sub-status--pending  { background: #fef3c7; color: #92400e; }
.nvg-portal-uploads__sub-status--accepted { background: #d1fae5; color: #065f46; }
.nvg-portal-uploads__sub-status--rejected { background: #fee2e2; color: #991b1b; }

.nvg-portal-uploads__sub-filename {
    /* Fills remaining space between nothing and the badge (pushes badge right) */
    order: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: rgb(173, 173, 173);
}

.nvg-portal-uploads__sub-comment {
    /* Outer wrapper: flex row so text + icon sit inline.
       position:relative is the anchor for the tooltip.
       No overflow:hidden here — that lives on the inner text span. */
    order: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 220px;
    font-size: 0.78rem;
    color: #991b1b;
    position: relative;
    cursor: default;
}

/* Inner text: truncated with ellipsis */
.nvg-portal-uploads__sub-comment-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Info icon: small, slightly muted so it doesn't overpower the text */
.nvg-portal-uploads__sub-comment-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    opacity: 0.65;
    line-height: 1;
}

/* Tooltip: shown instantly on hover over either the text or the icon.
   Positioned above the comment span, aligned to its right edge. */
.nvg-portal-uploads__sub-comment-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: rgba(40, 40, 40, 0.93);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    /* transition:none — truly instant, zero delay */
}

.nvg-portal-uploads__sub-comment:hover .nvg-portal-uploads__sub-comment-tooltip {
    opacity: 1;
}

/* Dropzone fills middle space in a slot (between comment and upload button) */
.nvg-portal-uploads__submission-slot .nvg-portal-uploads__dropzone {
    order: 3;
    flex: 1;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Dropzone — compact horizontal strip                                 */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__dropzone {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

/* Hidden file input — triggered programmatically */
.nvg-portal-uploads__file-input {
    display: none;
}

.nvg-portal-uploads__dropzone-inner {
    flex: 1; /* grows to fill space between nothing and the Upload file button */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border: 1px dashed rgb(173, 173, 173);
    border-radius: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.035);
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    min-width: 0;
}

.nvg-portal-uploads__dropzone-inner:hover,
.nvg-portal-uploads__dropzone-inner.is-over {
    border-color: rgba(64, 197, 242, 1);
    background: rgba(64, 197, 242, 0.08);
}

.nvg-portal-uploads__dropzone-icon {
    font-size: 0.95rem;
    color: rgb(173, 173, 173);
    line-height: 1;
    flex-shrink: 0;
}

.nvg-portal-uploads__dropzone-text {
    font-size: 0.75rem;
    color: rgb(173, 173, 173);
}

.nvg-portal-uploads__dropzone-filename {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(64, 197, 242, 1);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Upload button — visual styling via .nvg-cockpit-btn; padding override to match dropzone height */
.nvg-portal-uploads__upload-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.nvg-portal-uploads__upload-btn.nvg-cockpit-btn {
    /* Fixed 130px so Upload file button always matches the badge width —
       applies to both single-file and --multi items. */
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    align-self: stretch;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
}

.nvg-portal-uploads__upload-msg {
    font-size: 0.8rem;
    color: rgba(64, 197, 242, 1);
}

.nvg-portal-uploads__upload-msg.nvg-uploads-msg--error {
    color: #991b1b;
}

/* ------------------------------------------------------------------ */
/* Customer comments block                                             */
/* ------------------------------------------------------------------ */
.nvg-portal-uploads__comments {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.nvg-portal-uploads__comments-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(173, 173, 173);
    margin-bottom: 0.4rem;
}

.nvg-portal-uploads__comments-textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: rgb(80, 80, 80);
    background: transparent;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}

.nvg-portal-uploads__comments-textarea:focus {
    border-color: rgba(64, 197, 242, 1);
}

.nvg-portal-uploads__comments-textarea[readonly] {
    color: rgb(173, 173, 173);
    cursor: default;
}

.nvg-portal-uploads__comments-msg {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.3rem;
    color: rgb(173, 173, 173);
    min-height: 1em;
}

.nvg-portal-uploads__comments-msg.nvg-uploads-msg--error {
    color: #991b1b;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .nvg-portal-uploads__item {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Multi-file items: collapse grid to single column (info above, slots below) */
    .nvg-portal-uploads__item--multi {
        grid-template-columns: 1fr;
    }

    .nvg-portal-uploads__item-submission {
        flex-wrap: wrap;
        width: 100%;
    }

    .nvg-portal-uploads__dropzone {
        flex-wrap: wrap;
    }

    .nvg-portal-uploads__dropzone-inner {
        white-space: normal;
    }
}