/* ============================================================
   BarkBoard — DataTables phone card mode ("Calm Light" family)
   ------------------------------------------------------------
   On phones, rows of the shared DataTable partial render as
   stacked, tappable cards instead of a squeezed table. Activated
   by js/datatable-cards.js, which adds .bb-dt-cards to the
   .dt-container (decided once per page load), stamps
   data-label="<column header>" on every cell and marks
   .bb-card-title / .bb-card-actions / .bb-card-empty cells.

   Everything here is scoped under .dt-container.bb-dt-cards, so
   desktop and tablet rendering is untouched. Token-driven
   (--bb-* from modern-theme.css): dark mode follows automatically.
   RTL-safe: logical properties only. Loads after
   datatable-theme.css and out-ranks it via the extra class.
   ============================================================ */

/* ------------------------------------------------------------
   1. Outer chrome — cards float directly on the page canvas
   ------------------------------------------------------------ */
.card:has(> .card-body > .dt-container.bb-dt-cards) {
    border: none;
    background: transparent;
    box-shadow: none;
}

.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header {
    background: transparent !important;
    border-bottom: none;
    padding: 2px 4px 12px;
}

.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header h1,
.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header h2,
.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header h3,
.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header h4,
.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header h5,
.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header h6 {
    font-size: var(--bb-fs-2xl);
    font-weight: var(--bb-fw-bold);
    color: var(--bb-text);
}

.card:has(> .card-body > .dt-container.bb-dt-cards) > .card-body {
    padding: 0;
    background: transparent;
}

/* ------------------------------------------------------------
   2. Toolbar — full-width CTA, ghost buttons, search pill
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards .dt-layout-row:first-child {
    background: transparent;
    border-bottom: none;
    border-radius: 0;
    padding: 0 0 14px;
    flex-direction: column;
    gap: 10px;
}

.dt-container.bb-dt-cards .dt-layout-row:first-child .dt-layout-start,
.dt-container.bb-dt-cards .dt-layout-row:first-child .dt-layout-end {
    width: 100%;
}

.dt-container.bb-dt-cards .dt-layout-row:first-child .dt-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dt-container.bb-dt-cards .dt-layout-row:first-child .dt-buttons .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    font-size: .875rem;
    border-radius: var(--bb-radius);
}

/* the create button is the primary thing to do on this page */
.dt-container.bb-dt-cards .dt-layout-row:first-child .dt-buttons .btn-primary {
    flex: 1 1 100%;
    order: -1;
    min-height: 48px;
    font-size: .95rem;
    font-weight: var(--bb-fw-semibold);
    box-shadow: var(--bb-shadow-sm);
}

/* search — a friendly rounded pill, comfortable to tap */
.dt-container.bb-dt-cards .dt-layout-row:first-child .d-flex.justify-content-end,
.dt-container.bb-dt-cards .dt-layout-row:first-child .position-relative {
    width: 100%;
}

.dt-container.bb-dt-cards .dt-layout-row:first-child input[type="text"],
.dt-container.bb-dt-cards .dt-layout-row:first-child .form-control {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border-radius: var(--bb-radius-pill);
    padding-block: 10px;
    padding-inline: 2.9rem 18px;
    font-size: .9rem;
    box-shadow: var(--bb-shadow-xs);
}

/* ------------------------------------------------------------
   3. The table becomes a stack of cards
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards .dt-layout-table {
    overflow: visible;
}

.dt-container.bb-dt-cards table.dataTable {
    display: block;
    border: none;
}

.dt-container.bb-dt-cards table.dataTable > thead {
    display: none;
}

.dt-container.bb-dt-cards table.dataTable > tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-sm);
    padding: 14px 16px 12px;
    transition: transform var(--bb-fast) var(--bb-ease),
                box-shadow var(--bb-fast) var(--bb-ease);
}

/* rows flagged by rowCallback (fallback pricing etc.) keep their warning */
.dt-container.bb-dt-cards table.dataTable > tbody > tr.table-danger {
    background: var(--bb-danger-soft);
    border-color: color-mix(in srgb, var(--bb-danger) 30%, var(--bb-border));
}

/* tap feedback on navigable cards */
@media (hover: none) {
    .dt-container.bb-dt-cards table.dataTable > tbody > tr.cursor-pointer:active {
        transform: scale(.985);
        box-shadow: var(--bb-shadow-xs);
    }
}

/* ------------------------------------------------------------
   4. Cells — "label · value" rows inside the card
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    flex: 1 1 100%;
    min-width: 0;
    width: auto;
    padding: 4px 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none; /* kill Bootstrap's inset table striping */
    font-size: .875rem;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-text);
    text-align: start;
    overflow-wrap: anywhere;
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 104px;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-text-muted);
    letter-spacing: .01em;
    text-align: start;
}

/* label-less columns (e.g. checkboxes) don't need the gutter */
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td[data-label=""]::before {
    display: none;
}

/* empty fields disappear — cards stay short and scannable */
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-empty {
    display: none;
}

/* media inside cards */
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td img {
    border-radius: var(--bb-radius-sm);
}

/* badges read better a touch larger on phones */
.dt-container.bb-dt-cards table.dataTable .badge {
    font-size: .8rem;
    padding: 5px 12px;
}

/* ------------------------------------------------------------
   5. Title cells — the card headline (name, subject, …)
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-title {
    order: -1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    font-size: 1.08rem;
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-text);
    line-height: var(--bb-lh-tight);
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-title::before {
    content: none;
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-title > div,
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-title > span {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   6. Actions — a comfortable row of soft icon buttons
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-actions {
    order: 99;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    padding: 12px 0 2px;
    border-top: 1px solid var(--bb-border);
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.bb-card-actions::before {
    content: none;
}

.dt-container.bb-dt-cards td.bb-card-actions .action-buttons-wrapper {
    width: 100%;
}

/* cards have room for real buttons — show the icon row, drop the ⋮ menu */
.dt-container.bb-dt-cards td.bb-card-actions .action-buttons-wrapper .d-none.d-md-flex {
    display: flex !important;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
}

.dt-container.bb-dt-cards td.bb-card-actions .action-buttons-wrapper .d-md-none {
    display: none !important;
}

.dt-container.bb-dt-cards td.bb-card-actions > .d-flex {
    width: 100%;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* every action becomes a 44px soft chip (recommended touch size) */
.dt-container.bb-dt-cards td.bb-card-actions span[class*="text-"],
.dt-container.bb-dt-cards td.bb-card-actions a[class*="text-"],
.dt-container.bb-dt-cards td.bb-card-actions button[class*="text-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--bb-radius-sm);
    font-size: 1.1rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* chips are keyboard-focusable in card mode (real <button>s natively;
   legacy span renderers via the tabindex stamped by the JS) */
.dt-container.bb-dt-cards td.bb-card-actions span[class*="text-"]:focus-visible,
.dt-container.bb-dt-cards td.bb-card-actions a[class*="text-"]:focus-visible,
.dt-container.bb-dt-cards td.bb-card-actions button[class*="text-"]:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.dt-container.bb-dt-cards td.bb-card-actions .text-primary {
    color: var(--bb-primary) !important;
    background: var(--bb-primary-soft);
}

.dt-container.bb-dt-cards td.bb-card-actions .text-warning {
    color: var(--bb-warning) !important;
    background: var(--bb-warning-soft);
}

.dt-container.bb-dt-cards td.bb-card-actions .text-danger {
    color: var(--bb-danger) !important;
    background: var(--bb-danger-soft);
    margin-inline-start: auto; /* destructive action sits apart, at the far end */
}

.dt-container.bb-dt-cards td.bb-card-actions .text-info {
    color: var(--bb-info) !important;
    background: var(--bb-info-soft);
}

.dt-container.bb-dt-cards td.bb-card-actions .text-success {
    color: var(--bb-success) !important;
    background: var(--bb-success-soft);
}

/* ------------------------------------------------------------
   7. Row-group headers — quiet section labels between cards
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards table.dataTable > tbody > tr.dtrg-group {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 4px 0;
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr.dtrg-group > th {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--bb-fs-xs);
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: start;
}

/* ------------------------------------------------------------
   8. Empty state — friendly, on-brand
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards table.dataTable > tbody > tr:has(> td.dt-empty) {
    border-style: dashed;
    background: var(--bb-surface-2);
    box-shadow: none;
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.dt-empty {
    display: block;
    flex: 1 1 100%;
    padding: 34px 16px;
    text-align: center;
    color: var(--bb-text-muted);
    font-size: .95rem;
    font-weight: var(--bb-fw-medium);
}

.dt-container.bb-dt-cards table.dataTable > tbody > tr > td.dt-empty::before {
    content: "🐾";
    display: block;
    font-size: 2rem;
    margin-bottom: 8px;
}

/* ------------------------------------------------------------
   9. Footer — centered info + pill pagination
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards .dt-layout-row:last-child {
    background: transparent;
    border-top: none;
    border-radius: 0;
    padding: 16px 0 4px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dt-container.bb-dt-cards .dt-layout-row:last-child .dt-layout-start,
.dt-container.bb-dt-cards .dt-layout-row:last-child .dt-layout-end {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dt-container.bb-dt-cards .dt-info {
    text-align: center;
    font-size: var(--bb-fs-xs);
}

.dt-container.bb-dt-cards .dt-paging .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.dt-container.bb-dt-cards .dt-paging .page-item .page-link {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    /* zero out Bootstrap RTL's joined-pagination stacking (-1px margin,
       active link raised with z-index 3) — pills are spaced by gap, so
       nothing may tuck under / paint over its neighbor */
    margin: 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.dt-container.bb-dt-cards .dt-paging .page-item.active .page-link {
    background: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary);
}

.dt-container.bb-dt-cards .dt-paging .page-item.disabled .page-link {
    background: transparent;
    border-color: var(--bb-border);
    color: var(--bb-border-strong);
}

/* Touch devices outside card mode (tablets 768px+, or windows resized
   after load): the same uniform pill pagination. Without this, the
   44px touch min-height (mobile-responsive-fixes.css) inflates only
   the active number's solid box, so it renders as a lone raised tile
   overlapping the row of borderless text buttons — the "high z-index"
   look. Uniform bordered pills remove the illusion. */
@media (hover: none) and (pointer: coarse) {
    .dt-container .dt-paging .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dt-container .dt-paging .page-item .page-link {
        background: var(--bb-surface);
        border: 1px solid var(--bb-border);
        border-radius: var(--bb-radius-sm);
        margin: 0;
    }

    .dt-container .dt-paging .page-item.active .page-link {
        background: var(--bb-primary);
        border-color: var(--bb-primary);
        color: var(--bb-on-primary);
    }

    .dt-container .dt-paging .page-item.disabled .page-link {
        background: transparent;
        border-color: var(--bb-border);
        color: var(--bb-border-strong);
    }

    html.dark-theme .dt-container .dt-paging .page-item .page-link {
        background: var(--bb-surface);
        border-color: var(--bb-border);
        color: var(--bb-text-body);
    }

    html.dark-theme .dt-container .dt-paging .page-item.active .page-link {
        background: var(--bb-primary);
        border-color: var(--bb-primary);
        color: var(--bb-on-primary);
    }
}

/* ------------------------------------------------------------
   10. Safety nets — Responsive-plugin leftovers can't leak in
   ------------------------------------------------------------ */
.dt-container.bb-dt-cards table.dataTable > tbody > tr.child {
    display: none !important;
}

.dt-container.bb-dt-cards table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    display: none !important;
    content: none !important;
}

/* ------------------------------------------------------------
   11. Dark mode — same tokens; guards only out-rank the legacy
       html.dark-theme-prefixed rules from earlier stylesheets
   ------------------------------------------------------------ */
html.dark-theme .dt-container.bb-dt-cards table.dataTable > tbody > tr {
    background: var(--bb-surface);
    border-color: var(--bb-border);
}

html.dark-theme .dt-container.bb-dt-cards table.dataTable > tbody > tr > td {
    background: transparent;
    color: var(--bb-text);
}

html.dark-theme .dt-container.bb-dt-cards table.dataTable > tbody > tr.dtrg-group,
html.dark-theme .dt-container.bb-dt-cards table.dataTable > tbody > tr.dtrg-group > th {
    background: transparent;
    color: var(--bb-text-muted);
}

html.dark-theme .dt-container.bb-dt-cards .dt-layout-row:first-child,
html.dark-theme .dt-container.bb-dt-cards .dt-layout-row:last-child {
    background: transparent;
}

html.dark-theme .card:has(> .card-body > .dt-container.bb-dt-cards),
html.dark-theme .card:has(> .card-body > .dt-container.bb-dt-cards) > .card-header {
    background: transparent !important;
    border-color: transparent;
}

/* ------------------------------------------------------------
   12. Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .dt-container.bb-dt-cards table.dataTable > tbody > tr,
    .dt-container.bb-dt-cards table.dataTable > tbody > tr.cursor-pointer:active {
        transition: none !important;
        transform: none !important;
    }
}