/*
   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;
}

/* Desktop counterpart of the mobile primary-line protection below: without this, a
   badge/pill after the first (name) child has the flexbox default flex-shrink:1, so a
   long name squeezes the badge below its own text width and .table .badge's
   overflow-wrap:anywhere (added for long enum badges) breaks it mid-word/character-wraps.
   Applies at every width; the mobile block re-states it (harmlessly) alongside its own
   layout tweaks. */
.rtable-primary-line > :not(:first-child) {
    flex-shrink: 0;
}

/* Sortable column header — plain button, no default button chrome, inherits header
   text styling so it reads identically to a non-sortable <th>. */
.rtable-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
}

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

.rtable-sort-indicator {
    font-size: .75em;
    line-height: 1;
    opacity: .6;
}

th[aria-sort="ascending"] .rtable-sort-indicator,
th[aria-sort="descending"] .rtable-sort-indicator {
    opacity: 1;
}

/* Remove-row action column (edit mode) — keep the column as narrow as its content
   under the fixed table layout, instead of claiming an equal share of the width. */
.rtable-remove-cell {
    width: 1%;
    white-space: nowrap;
}

/* Remove-row button — visually a bare "✕" glyph, but the hit area must still meet
   the 44×44px minimum touch target regardless of the glyph's own size. */
.rtable-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Add-row footer button — btn-sm alone leaves it under the 44px minimum
   touch target, so enforce the height explicitly here. */
.rtable-addrow-btn {
    min-height: 44px;
}

@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; }

@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.
       The name is the only flex item allowed to shrink/wrap (min-width:0 opts it
       in); status chips get flex-shrink:0 so a long name can never squeeze a short
       badge below its own text width — which forced .table .badge's
       overflow-wrap:anywhere (added for long enum badges) to break mid-word. */
    .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; min-width: 0; }
    .rtable .rtable-primary-line > :not(:first-child) { flex-shrink: 0; }

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

    /* META: small inline facts with "·" separators.
       The flex layout is mobile-only by design: on desktop these classes land on a
       <td>, and display:flex would pull the cell out of the table's row box and make
       its borders/baseline drift out of alignment with the row. */
    .rtable .rtable-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; font-size: .8rem; color: #6b7280; }
    .rtable .rtable-meta .rtable-meta-item { display: inline-flex; align-items: baseline; }
    .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;
        }
    }
}

/* ── AvailabilityCalendar (.twc-cal) — month-grid date-range picker ──
   Self-contained like the .rtable styles: hardcoded colours + paired
   dark-mode blocks; depends only on Bootstrap being present for fonts. */
.twc-cal { max-width: 100%; }
.twc-cal-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.twc-cal-titles { flex: 1 1 auto; display: flex; justify-content: space-around; font-weight: 600; }
.twc-cal-nav {
    min-width: 44px; min-height: 44px; border: 1px solid #e5e7eb; background: transparent;
    border-radius: .375rem; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit;
}
.twc-cal-nav:disabled { opacity: .4; cursor: default; }
.twc-cal-months { display: flex; gap: 1rem; }
.twc-cal-month { flex: 1 1 0; border-collapse: collapse; table-layout: fixed; width: 100%; }
.twc-cal-dow { text-align: center; font-size: .75rem; font-weight: 600; color: #6b7280; padding: .25rem 0; }
.twc-cal-month td { padding: 1px; }
.twc-cal-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; gap: 1px; padding: 2px 0;
    border: 1px solid transparent; border-radius: .375rem; background: transparent;
    color: inherit; cursor: pointer; font-size: .875rem;
}
.twc-cal-day:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; }
.twc-cal-disabled { color: #9ca3af; cursor: default; }
.twc-cal-disabled .twc-cal-daynum { text-decoration: line-through; }
.twc-cal-endable { cursor: pointer; }
.twc-cal-selected { background: #0d6efd; color: #fff; }
.twc-cal-selected .twc-cal-daynum { text-decoration: none; }
.twc-cal-inrange { background: rgba(13, 110, 253, .15); }
.twc-cal-badge { font-size: .6875rem; line-height: 1.1; font-weight: 600; color: #374151; }
.twc-cal-selected .twc-cal-badge { color: #ffffff; font-weight: 600; }
.twc-cal-clear {
    border: 0; background: none; color: #0d6efd; font-size: .875rem;
    padding: .5rem 0; min-height: 44px; cursor: pointer;
}
/* Single month on phones */
@media (max-width: 767.98px) {
    .twc-cal-month-secondary, .twc-cal-title-secondary { display: none; }
}
/* Dark mode — manual Bootstrap toggle + OS preference (paired, like .rtable) */
[data-bs-theme="dark"] .twc-cal-nav { border-color: #2a2f3a; }
[data-bs-theme="dark"] .twc-cal-dow { color: #9aa4b2; }
[data-bs-theme="dark"] .twc-cal-disabled { color: #6b7280; }
[data-bs-theme="dark"] .twc-cal-badge { color: #c7cdd6; }
[data-bs-theme="dark"] .twc-cal-inrange { background: rgba(116, 143, 252, .25); }
@media (prefers-color-scheme: dark) {
    .twc-cal-nav { border-color: #2a2f3a; }
    .twc-cal-dow { color: #9aa4b2; }
    .twc-cal-disabled { color: #6b7280; }
    .twc-cal-badge { color: #c7cdd6; }
    .twc-cal-inrange { background: rgba(116, 143, 252, .25); }
}

/* ── PageHeader ── */
.twc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.twc-page-title {
    font-size: clamp(1.4rem, 1.3rem + 0.7vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #111827;
}
.twc-page-subtitle {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}
.twc-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Dark mode — manual Bootstrap toggle + OS preference (paired, like .rtable / .twc-cal) */
[data-bs-theme="dark"] .twc-page-title { color: #f1f5f9; }
[data-bs-theme="dark"] .twc-page-subtitle { color: #9aa4b2; }
@media (prefers-color-scheme: dark) {
    .twc-page-title { color: #f1f5f9; }
    .twc-page-subtitle { color: #9aa4b2; }
}

/* ── Dialog ─────────────────────────────────────────────────────────────────
   .modal/.modal-dialog/.modal-content come from Bootstrap; these rules only add
   the backdrop tint (Bootstrap's .modal is transparent without its JS plugin,
   which no consumer uses) and the scroll lock. Self-contained: no CSS variables. */
.twc-dialog {
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Applied to <body> by techwork-components.js while any dialog is open. */
body.twc-dialog-open {
    overflow: hidden;
}

/* Mobile-first: full-width dialogs below Bootstrap's sm breakpoint, and tap targets
   that satisfy the 44px minimum. */
@media (max-width: 575.98px) {
    .twc-dialog .modal-dialog {
        margin: 0.5rem;
    }
    .twc-dialog .modal-footer .btn {
        min-height: 44px;
    }
}

.twc-dialog .btn-close {
    min-width: 44px;
    min-height: 44px;
}

/* Dark mode — manual Bootstrap toggle + OS preference (paired, like .rtable / .twc-cal) */
[data-bs-theme="dark"] .twc-dialog {
    background: rgba(0, 0, 0, 0.7);
}
[data-bs-theme="dark"] .twc-dialog .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.75;
}
@media (prefers-color-scheme: dark) {
    .twc-dialog {
        background: rgba(0, 0, 0, 0.7);
    }
    .twc-dialog .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
        opacity: 0.75;
    }
}