/* =============================================================================
   responsive-tables.css — mobile/tablet-friendly list tables for iDash.

   Opt-in and fully scoped: ONLY <table class="idash-resp-table"> is affected, so
   desktop layout and every other table are untouched. Wrap the table in a element
   carrying class "idash-resp-wrap" (typically the existing .table-responsive div).

   Behaviour:
     • ≥ 992px  — unchanged (normal table).
     • 768–991  — tablet: cells may wrap (no forced text-nowrap) and padding is
                  tightened, so the table fits without a horizontal scrollbar.
     • < 768px  — phone / small-tablet-portrait: each row becomes a self-contained
                  "card"; every cell shows its column name (from data-label) on the
                  start side and its value on the end side. No horizontal scroll.

   RTL-safe: uses logical properties (inline-start/end, padding-inline), so it is
   correct in both LTR (en) and RTL (fa/ar). Colours come from Bootstrap CSS vars so
   it follows light/dark automatically.
   ========================================================================== */

/* ── Base (all viewports): keep the actions cell tidy so icon-only and text
      buttons share the same height and never stretch vertically. ─────────── */
.idash-resp-table > tbody > tr > td.idash-resp-actions {
    white-space: nowrap;
}
.idash-resp-table > tbody > tr > td.idash-resp-actions .btn {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.idash-resp-table > tbody > tr > td.idash-resp-actions form.d-inline {
    display: inline-flex;
    vertical-align: middle;
}

/* ── Tablet: never force a horizontal scrollbar; let content wrap ─────────── */
@media (max-width: 991.98px) {
    .idash-resp-wrap { overflow-x: visible; }
    .table-responsive:has(.idash-resp-table) { overflow-x: visible; }

    .idash-resp-table.text-nowrap,
    .idash-resp-table .text-nowrap,
    .idash-resp-table td,
    .idash-resp-table th { white-space: normal !important; }

    .idash-resp-table th,
    .idash-resp-table td { padding-inline: 0.5rem; }
}

/* ── Phone / small tablet portrait: stacked cards ────────────────────────── */
@media (max-width: 767.98px) {
    .idash-resp-wrap,
    .table-responsive:has(.idash-resp-table) { overflow-x: visible !important; }

    .idash-resp-table,
    .idash-resp-table > tbody,
    .idash-resp-table > tbody > tr,
    .idash-resp-table > tbody > tr > td { display: block; width: 100%; }

    /* The header row is not shown on cards — each cell carries its own label. */
    .idash-resp-table > thead { display: none; }

    .idash-resp-table > tbody > tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
        border-radius: 0.6rem;
        padding: 0.35rem 0.85rem;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .idash-resp-table > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: end;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.07));
        min-height: 2.5rem;
    }
    .idash-resp-table > tbody > tr > td:last-child { border-bottom: 0; }

    /* Column name from data-label, pinned to the start (right in RTL). */
    .idash-resp-table > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
        text-align: start;
        margin-inline-end: auto;
        white-space: nowrap;
    }

    /* Cells with no label (and the actions cell) take the full width. */
    .idash-resp-table > tbody > tr > td[data-label=""]::before,
    .idash-resp-table > tbody > tr > td.idash-resp-actions::before { content: none; }

    .idash-resp-table > tbody > tr > td.idash-resp-actions {
        justify-content: center;
        align-items: center;           /* prevent buttons stretching to the tallest sibling */
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.65rem;
    }
    /* On a card, action buttons read better when comfortably tappable.
       Fixed line-height + inline-flex keeps every button the same height
       regardless of whether it holds an icon, text, or sits inside a <form>. */
    .idash-resp-table > tbody > tr > td.idash-resp-actions .btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }
    /* The delete button is wrapped in a <form class="d-inline"> — make the form a
       flex item too so its button doesn't get vertically stretched by the row. */
    .idash-resp-table > tbody > tr > td.idash-resp-actions form { display: inline-flex; align-items: center; }

    /* Empty-state / colspan rows render as a normal centred block, no label. */
    .idash-resp-table > tbody > tr > td[colspan] {
        display: block;
        text-align: center;
    }
    .idash-resp-table > tbody > tr > td[colspan]::before { content: none; }

    /* Tall / complex cells (a form, a button group, a disclosure): stack the label
       above the content and let the content use the full card width. */
    .idash-resp-table > tbody > tr > td.idash-resp-stack {
        flex-direction: column;
        align-items: stretch;
        text-align: start;
        gap: 0.35rem;
    }
    .idash-resp-table > tbody > tr > td.idash-resp-stack::before { margin-inline-end: 0; }
    .idash-resp-table > tbody > tr > td.idash-resp-stack .btn-group,
    .idash-resp-table > tbody > tr > td.idash-resp-stack form { flex-wrap: wrap; gap: 0.4rem; }
}