/* ==========================================================================
   LVWS Form Tabs — Stylesheet
   ========================================================================== */

/* Wrapper */
.lvws-ft-wrapper {
    --lvws-accent:        #2563eb;   /* active tab / indicator colour   */
    --lvws-accent-hover:  #1d4ed8;
    --lvws-bg:            #ffffff;
    --lvws-border:        #e2e8f0;
    --lvws-tab-bg:        #f8fafc;
    --lvws-tab-active-bg: #ffffff;
    --lvws-text:          #1e293b;
    --lvws-text-muted:    #64748b;
    --lvws-radius:        8px;
    --lvws-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);

    font-family: inherit;
    color: var(--lvws-text);
    margin: 1.5rem 0;
}

/* ── Tab list ─────────────────────────────────────────────────────────────── */
.lvws-ft-tablist {
    display:         flex;
    flex-wrap:       wrap;
    gap:             4px;
    border-bottom:   2px solid var(--lvws-border);
    padding-bottom:  0;
    margin-bottom:   0;
    list-style:      none;
}

/* ── Individual tab button ────────────────────────────────────────────────── */
.lvws-ft-tab {
    position:        relative;
    padding:         10px 18px;
    border:          1px solid transparent;
    border-bottom:   none;
    border-radius:   var(--lvws-radius) var(--lvws-radius) 0 0;
    background:      var(--lvws-tab-bg);
    color:           var(--lvws-text-muted);
    font-size:       .9rem;
    font-weight:     500;
    line-height:     1.4;
    cursor:          pointer;
    transition:      color .15s, background .15s, border-color .15s;
    white-space:     nowrap;
    /* Remove default button styles */
    -webkit-appearance: none;
    appearance:      none;
    outline:         none;
}

.lvws-ft-tab:hover {
    background: #eef2ff;
    color:      var(--lvws-accent);
}

.lvws-ft-tab:focus-visible {
    outline:        2px solid var(--lvws-accent);
    outline-offset: 2px;
    z-index:        1;
}

/* Active state */
.lvws-ft-tab--active,
.lvws-ft-tab[aria-selected="true"] {
    background:   var(--lvws-tab-active-bg);
    color:        var(--lvws-accent);
    border-color: var(--lvws-border);
    font-weight:  600;

    /* Overlap the tablist bottom border */
    margin-bottom: -2px;
    border-bottom: 2px solid var(--lvws-tab-active-bg);
}

/* Active indicator bar */
.lvws-ft-tab--active::after,
.lvws-ft-tab[aria-selected="true"]::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    background: var(--lvws-accent);
    border-radius: var(--lvws-radius) var(--lvws-radius) 0 0;
}

/* ── Pane container ───────────────────────────────────────────────────────── */
.lvws-ft-panes {
    border:        1px solid var(--lvws-border);
    border-top:    none;
    border-radius: 0 0 var(--lvws-radius) var(--lvws-radius);
    background:    var(--lvws-bg);
    box-shadow:    var(--lvws-shadow);
}

/* ── Individual pane ──────────────────────────────────────────────────────── */
.lvws-ft-pane {
    display: none;
    padding: 1.5rem;
}

.lvws-ft-pane--active,
.lvws-ft-pane:not([hidden]) {
    display: block;
    animation: lvwsFadeIn .2s ease;
}

@keyframes lvwsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Utility messages ─────────────────────────────────────────────────────── */
.lvws-ft-error,
.lvws-ft-empty {
    padding:       1rem 1.25rem;
    border-radius: 6px;
    font-size:     .875rem;
    margin:        0;
}

.lvws-ft-error {
    background: #fef2f2;
    color:      #991b1b;
    border:     1px solid #fecaca;
}

.lvws-ft-empty {
    background: #f8fafc;
    color:      var(--lvws-text-muted);
    border:     1px solid var(--lvws-border);
    text-align: center;
}

/* ── Responsive: stack tabs on small screens ──────────────────────────────── */
@media (max-width: 640px) {
    .lvws-ft-tablist {
        flex-direction: column;
        border-bottom:  none;
        border-right:   2px solid var(--lvws-border);
        gap:            0;
    }

    .lvws-ft-tab {
        border-radius:  var(--lvws-radius) 0 0 var(--lvws-radius);
        border-right:   none;
        border-bottom:  1px solid var(--lvws-border);
        text-align:     left;
    }

    .lvws-ft-tab--active,
    .lvws-ft-tab[aria-selected="true"] {
        border-right:  2px solid var(--lvws-tab-active-bg);
        border-bottom: 1px solid var(--lvws-border);
        margin-bottom: 0;
        margin-right:  -2px;
    }

    .lvws-ft-tab--active::after,
    .lvws-ft-tab[aria-selected="true"]::after {
        top:    0;
        bottom: 0;
        right:  auto;
        width:  3px;
        height: auto;
        border-radius: var(--lvws-radius) 0 0 var(--lvws-radius);
    }

    .lvws-ft-panes {
        border-top:    1px solid var(--lvws-border);
        border-left:   none;
        border-radius: 0 var(--lvws-radius) var(--lvws-radius) 0;
    }
}

/* ==========================================================================
   Submissions Table
   ========================================================================== */

.lvws-ft-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lvws-ft-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
    line-height:     1.5;
    color:           var(--lvws-text);
}

.lvws-ft-table thead {
    background: var(--lvws-tab-bg);
    border-bottom: 2px solid var(--lvws-border);
}

.lvws-ft-table th {
    padding:    10px 14px;
    text-align: left;
    font-weight: 600;
    font-size:   .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--lvws-text-muted);
    white-space: nowrap;
}

.lvws-ft-table td {
    padding:       10px 14px;
    border-bottom: 1px solid var(--lvws-border);
    vertical-align: top;
    word-break:    break-word;
}

.lvws-ft-table tbody tr:last-child td {
    border-bottom: none;
}

.lvws-ft-table tbody tr:hover td {
    background: #f8fafc;
}

.lvws-ft-count {
    margin:    .75rem 0 0;
    font-size: .8rem;
    color:     var(--lvws-text-muted);
    text-align: right;
}

/* Responsive card layout on small screens */
@media (max-width: 640px) {
    .lvws-ft-table thead {
        display: none;
    }

    .lvws-ft-table,
    .lvws-ft-table tbody,
    .lvws-ft-table tr,
    .lvws-ft-table td {
        display: block;
        width:   100%;
    }

    .lvws-ft-table tr {
        border:        1px solid var(--lvws-border);
        border-radius: 6px;
        margin-bottom: .75rem;
        padding:       .5rem 0;
    }

    .lvws-ft-table tbody tr:hover td {
        background: transparent;
    }

    .lvws-ft-table td {
        border-bottom:   1px solid var(--lvws-border);
        padding:         8px 14px;
        display:         flex;
        gap:             .5rem;
    }

    .lvws-ft-table td:last-child {
        border-bottom: none;
    }

    .lvws-ft-table td::before {
        content:     attr(data-label);
        font-weight: 600;
        font-size:   .75rem;
        color:       var(--lvws-text-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        min-width:   100px;
        flex-shrink: 0;
    }
}