/*
   TechWork.Components — DataGrid / DataTableCard responsive table styles.

   Self-contained: depends only on Bootstrap 5 being present (for .table, .card,
   .badge, .btn etc.). Reference from a Blazor host with:

     <link rel="stylesheet" href="_content/TechWork.Components/techwork-components.css" />

   The .rtable-* utility classes are part of the grid's responsive contract and are
   meant to be applied by consuming pages inside <TemplateColumn> markup:
     rtable-col-lg          hide on tablet & below
     rtable-col-mobile-hide hide on mobile
     rtable-col-actions     action cell (block on mobile)
     rtable-col-ref         secondary/reference text (muted on mobile)
     rtable-primary-line    flex row: primary text + trailing status
     rtable-mobile-status   status badge shown only on mobile
*/

/* ── Responsive list tables ── */
.rtable {
    table-layout: fixed;
}

/* Wide tables: keep the responsive mobile collapse but let columns size to content
   on desktop instead of the fixed equal-width layout. */
.rtable.rtable-auto {
    table-layout: auto;
}

.rtable th,
.rtable td {
    vertical-align: middle;
}

.rtable-row {
    min-height: 44px;
}

.rtable-row[role="button"] {
    cursor: pointer;
}

.rtable-row:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.rtable-mobile-status {
    display: none;
}

.rtable-primary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

@media (max-width: 991.98px) {
    .rtable-col-lg {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .rtable thead {
        display: none;
    }

    .rtable,
    .rtable tbody,
    .rtable tr,
    .rtable td {
        display: block;
        width: 100%;
    }

    .rtable .rtable-row {
        border-bottom: 1px solid #e5e7eb;
        padding: .25rem 0;
    }

    .rtable .rtable-row td {
        border: 0;
        padding: 0.2rem 0.8rem;
    }

    .rtable .rtable-col-lg {
        display: none !important;
    }

    /* reset Bootstrap striped/hover colour on stacked cell blocks */
    .rtable .rtable-row td {
        --bs-table-bg-type: initial;
        --bs-table-color-type: initial;
        background-color: transparent !important;
    }

    .rtable .rtable-mobile-status {
        display: inline-flex;
    }

    .rtable .rtable-col-mobile-hide {
        display: none;
    }

    .rtable .rtable-col-ref {
        font-size: .78rem;
        color: #6b7280;
    }

    .rtable .rtable-col-actions {
        display: block;
        padding-bottom: .55rem;
    }
}

/* ── Mobile card anatomy (≤768px) — primary / secondary / meta / action ── */
.rtable-secondary { color: #6b7280; }

.rtable-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; }
.rtable-meta .rtable-meta-item { display: inline-flex; align-items: baseline; }

@media (max-width: 767.98px) {
    /* Tighter stacked card — less wasted vertical space */
    .rtable .rtable-row { padding: .5rem 0; }
    .rtable .rtable-row td { padding: .12rem .85rem; }

    /* PRIMARY line: strong/larger value on the left, chip on the right */
    .rtable .rtable-primary-line { align-items: flex-start; }
    .rtable .rtable-primary-line > :first-child { font-weight: 600; font-size: 1.02rem; line-height: 1.25; }

    /* SECONDARY: muted, smaller */
    .rtable .rtable-secondary { font-size: .82rem; color: #6b7280; }

    /* META: small inline facts with "·" separators */
    .rtable .rtable-meta { font-size: .8rem; color: #6b7280; }
    .rtable .rtable-meta .rtable-meta-item:not(:last-child)::after {
        content: "·"; margin-left: .55rem; color: #9ca3af;
    }

    /* ACTION: desktop-only actions hidden on mobile */
    .rtable .rtable-action-secondary,
    .rtable-action-secondary { display: none !important; }
}

/* Dark mode — keep muted text legible (manual toggle + OS preference) */
[data-bs-theme="dark"] .rtable-secondary,
[data-bs-theme="dark"] .rtable-meta { color: #9aa4b2; }
@media (prefers-color-scheme: dark) {
    .rtable-secondary, .rtable-meta { color: #9aa4b2; }
}

/* ── Dark mode — self-contained (no external CSS variables) ──
   Covers both the manual Bootstrap toggle (data-bs-theme="dark") and the OS
   preference, so the stacked-row borders stay legible on dark backgrounds. */
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] .rtable .rtable-row {
        border-bottom-color: #2a2f3a;
    }
}

@media (prefers-color-scheme: dark) {
    @media (max-width: 767.98px) {
        .rtable .rtable-row {
            border-bottom-color: #2a2f3a;
        }
    }
}