/*
 * Phone card views for tables — shared by the classic and the modern design (JS: mobile-cards.js).
 * Everything below applies at ≤ 767px only. Colour tokens fall back to these defaults on classic
 * pages; the modern design's own tokens (set on body.ui-modern) take precedence there.
 */
:root {
    --um-bg: #F4F3EF; --um-surface: #FFFFFF; --um-surface-2: #FAF9F6; --um-ink: #17181C; --um-ink-2: #3A3C43;
    --um-muted: #5E6068; --um-line: #E4E2DA; --um-line-2: #EEECE6; --um-accent: #0E7C6B; --um-accent-soft: #E3F2EE;
}

/* ================================================================= Mobile card view for DataTables
   ui-modern.js labels every cell (data-label + um-c-* roles) and toggles .um-cards-on on the
   .dataTables_wrapper. Above 767px nothing here applies. */
body .um-view-toggle { display: none; }
body .um-tab-picker { display: none; }
@media (max-width: 767px) {
    body .um-view-toggle { display: flex; gap: 4px; padding: 3px; margin: 0 0 10px; border: 1px solid var(--um-line); border-radius: 10px; background: var(--um-surface); width: max-content; }
    body .um-view-toggle button { border: 0; background: transparent; border-radius: 7px; padding: 6px 12px; font-size: 13px; color: var(--um-ink-2); display: inline-flex; align-items: center; gap: 6px; }
    body .um-view-toggle button.is-on { background: var(--um-ink); color: #FFFFFF; font-weight: 600; }

    /* un-constrain DataTables' scroll boxes: one natural page scroll, no sideways bar */
    body .um-cards-on .dataTables_scrollHead { display: none !important; }
    body .um-cards-on .dataTables_scroll, body .um-cards-on .dataTables_scrollBody { height: auto !important; max-height: none !important; overflow: visible !important; border: 0 !important; }
    body .um-cards-on .dataTables_scrollFoot { overflow: visible !important; border: 0 !important; }
    body .um-cards-on .dataTables_scrollFootInner, body .um-cards-on .dataTables_scrollHeadInner { width: 100% !important; padding: 0 !important; }
    body .content .box-body:has(.um-cards-on) { overflow-x: visible; }

    body .um-cards-on table.dataTable { display: block; width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent; }
    body .um-cards-on table.dataTable > thead { display: none; }
    body .um-cards-on table.dataTable > tbody { display: flex; flex-direction: column; gap: 10px; }

    /* the card */
    body .um-cards-on table.dataTable > tbody > tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 12px 14px; background: var(--um-surface) !important; border: 1px solid var(--um-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(18,20,24,.04); }
    body .um-cards-on table.dataTable > tbody > tr > td { display: block; grid-column: 1 / -1; border: 0 !important; border-top: 1px solid var(--um-line-2) !important; padding: 8px 0 !important; text-align: right !important; font-size: 14px; white-space: normal !important; word-break: break-word; width: auto !important; min-width: 0; }
    body .um-cards-on table.dataTable > tbody > tr > td::before { content: attr(data-label); float: left; max-width: 48%; margin-right: 12px; text-align: left; color: var(--um-muted); font-size: 12px; font-weight: 500; line-height: 1.6; }
    body .um-cards-on table.dataTable > tbody > tr > td[data-label=""]::before { display: none; }
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-empty { display: none; }

    /* top row: [check] [thumb] [title] [actions] */
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-check,
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-img,
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-title,
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-action { grid-row: 1; border-top: 0 !important; padding: 0 0 8px !important; }
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-check { grid-column: 1; }
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-img { grid-column: 2; }
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-title { grid-column: 3; text-align: left !important; font-weight: 600; font-size: 15px; color: var(--um-ink); line-height: 1.3; }
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-action { grid-column: 4; }
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-check::before,
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-img::before,
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-title::before,
    body .um-cards-on table.dataTable > tbody > tr > td.um-c-action::before { display: none; }
    body .um-cards-on td.um-c-img img { width: 44px !important; height: 44px !important; object-fit: cover; border-radius: 10px; border: 1px solid var(--um-line-2); }
    body .um-cards-on td.um-c-title br + * { font-weight: 400; }
    body .um-cards-on td.um-c-action .btn-group { display: block; }
    body .um-cards-on td.um-c-action > .btn-group > .btn, body .um-cards-on td.um-c-action > .btn { height: 34px; padding: 0 10px; }
    body .um-cards-on td.um-c-action .dropdown-menu { left: auto !important; right: 0 !important; min-width: 200px; max-width: calc(100vw - 40px); }
    /* several inline action buttons (edit / delete / view) wrap under the title */
    body .um-cards-on td.um-c-action:has(> a.btn ~ a.btn, > button ~ button, > a ~ button) { grid-row: auto; grid-column: 1 / -1; text-align: left !important; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 0 !important; border-top: 1px solid var(--um-line-2) !important; }

    body .um-cards-on table.dataTable > tbody > tr.um-row-empty { display: block; text-align: center; padding: 24px 14px; }
    body .um-cards-on table.dataTable > tbody > tr.um-row-empty > td { border: 0 !important; text-align: center !important; }
    body .um-cards-on table.dataTable > tbody > tr.um-row-empty > td::before { display: none; }

    /* totals footer becomes a summary card */
    body .um-cards-on table.dataTable > tfoot { display: block; margin-top: 10px; }
    body .um-cards-on table.dataTable > tfoot > tr { display: flex; flex-direction: column; padding: 10px 14px; background: var(--um-surface-2) !important; border: 1px solid var(--um-line); border-radius: 14px; }
    body .um-cards-on table.dataTable > tfoot > tr > td, body .um-cards-on table.dataTable > tfoot > tr > th { display: block; border: 0 !important; border-top: 1px solid var(--um-line-2) !important; padding: 7px 0 !important; text-align: right !important; background: transparent !important; width: auto !important; }
    body .um-cards-on table.dataTable > tfoot > tr > td::before, body .um-cards-on table.dataTable > tfoot > tr > th::before { content: attr(data-label); float: left; color: var(--um-muted); font-size: 12px; font-weight: 500; }
    body .um-cards-on table.dataTable > tfoot > tr > .um-f-label { text-align: left !important; border-top: 0 !important; font-weight: 700; }
    body .um-cards-on table.dataTable > tfoot > tr > .um-c-empty { display: none; }
    /* scrollX keeps a zero-height sizing copy of the footer inside the body table */
    body .um-cards-on .dataTables_scrollBody table.dataTable > tfoot { display: none; }
    /* footer rows holding bulk-action buttons (Delete selected / Add to location …) wrap */
    body .um-cards-on table.dataTable > tfoot > tr > td:has(.btn) { display: flex; flex-wrap: wrap; gap: 6px; text-align: left !important; white-space: normal !important; }
    body .um-cards-on table.dataTable > tfoot > tr > td:has(.btn) .btn { margin: 0 !important; }
    body .um-cards-on table.dataTable > tfoot > tr > td:has(.btn) form { display: contents; }
    body .um-cards-on table.dataTable > tfoot > tr > td:has(.btn) > * { max-width: 100%; }
    /* bulk-action rows built as an inline-styled non-wrapping flex div (e.g. Products) */
    body .content tfoot td > div[style*="flex"] { flex-wrap: wrap !important; gap: 6px; }
    body .content tfoot td > div[style*="flex"] > form { display: contents; }
    body .um-cards-on table.dataTable > tfoot > tr:has(> td .btn) { background: transparent !important; border: 0; padding: 0; }

    /* bulk actions / pagination / info */
    body .um-cards-on .dataTables_info { text-align: center; float: none; padding-top: 12px; }
    body .um-cards-on .dataTables_paginate .pagination > li > a, body .um-cards-on .dataTables_paginate .pagination > li > span { min-width: 36px; height: 36px; line-height: 22px; }
    body .content .box-body > .row > [class*="col-"] > .btn, body .dataTables_wrapper ~ div .btn-xs { margin: 3px 2px; }
}

/* ================================================================= Mobile cards for static (non-DataTables) tables */
@media (max-width: 767px) {
    body .content table.um-scards, body .modal table.um-scards { display: block; width: 100% !important; border: 0 !important; background: transparent; margin-bottom: 8px; }
    body table.um-scards > thead, body table.um-scards tr.um-hrow { display: none; }
    body table.um-scards > tbody { display: flex; flex-direction: column; gap: 10px; }
    body table.um-scards > tbody > tr { display: block; padding: 10px 14px; background: var(--um-surface) !important; border: 1px solid var(--um-line); border-radius: 14px; }
    body table.um-scards > tbody > tr > td, body table.um-scards > tbody > tr > th { display: block; width: auto !important; border: 0 !important; border-top: 1px solid var(--um-line-2) !important; padding: 8px 0 !important; text-align: right !important; white-space: normal !important; word-break: break-word; }
    body table.um-scards > tbody > tr > td:first-child { border-top: 0 !important; }
    body table.um-scards > tbody > tr > td::before { content: attr(data-label); float: left; max-width: 48%; margin-right: 12px; text-align: left; color: var(--um-muted); font-size: 12px; font-weight: 500; line-height: 1.6; }
    body table.um-scards > tbody > tr > td[data-label=""]::before { display: none; }
    body table.um-scards > tbody > tr > td.um-c-empty { display: none; }
    /* cells with inputs: label on top, controls full width */
    body table.um-scards > tbody > tr > td.um-c-field { text-align: left !important; }
    body table.um-scards > tbody > tr > td.um-c-field::before { float: none; display: block; max-width: none; margin: 0 0 6px; }
    body table.um-scards td.um-c-field .form-control, body table.um-scards td.um-c-field .input-group, body table.um-scards td.um-c-field select { width: 100% !important; max-width: 100%; }
    body table.um-scards td.um-c-field > [class*="col-"] { float: none; width: 100%; padding: 0; margin-bottom: 8px; }
    body table.um-scards td.um-c-field br { display: none; }
    body table.um-scards > tfoot { display: block; margin-top: 8px; }
    body table.um-scards > tfoot > tr { display: flex; flex-direction: column; padding: 10px 14px; background: var(--um-surface-2) !important; border: 1px solid var(--um-line); border-radius: 14px; }
    body table.um-scards > tfoot > tr > td, body table.um-scards > tfoot > tr > th { display: block; border: 0 !important; padding: 5px 0 !important; text-align: right !important; background: transparent !important; }
    body table.um-scards > tfoot > tr > td:empty, body table.um-scards > tfoot > tr > th:empty { display: none; }
    /* two-row summary tables (captions over values): values sit under their caption */
    body table.um-scards > tbody > tr > td h3, body table.um-scards > tbody > tr > td h4 { margin: 0; font-size: 18px; }
    /* the wrapper no longer needs to scroll sideways */
    body .table-responsive:has(> table.um-scards), body .box-body:has(> table.um-scards), body .box-body:has(> .table-responsive > table.um-scards) { overflow-x: visible !important; border: 0; }
}