/*
 * remitza v4 theme, Part 2: lists (spec 6). Each grid is one v4 card: the table wrapper is its top half and the pagination
 * strip its bottom half; the toolbar, filter panel and status tabs sit above it. Grid rules name the table and use child
 * combinators down to the cell, because Tools::generateViewTable nests table.customiz-table in cells (spec 5.1 rule 4).
 * Every grid gets tableCollapse(false) from the bootstraps' grid hook; with collapse on, Dcat's .table-collapse rules would outrank the cell rules here.
 */

/* ---------- The grid card (spec 6.1); its inner horizontal scroll is in shell.css (spec 6.16) ---------- */
body.rz-theme .table-responsive.table-wrapper.complex-container {
    margin-top: 14px !important; /* .mt-1 (1rem) and Dcat's dark .table-wrapper (12px) set margin-top with !important */
    border: 1px solid var(--border) !important; /* .table-responsive { border: 0 !important } (dcat-app-primary.css:1591-1595) */
    border-bottom-width: 0 !important; /* the border above is !important; the pagination strip's top border closes the card */
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background-color: var(--card);
    box-shadow: var(--shadow-card);
}

/* Without pagination (both apps' Status Log call disablePagination()) the wrapper closes the card itself */
body.rz-theme .table-responsive.table-wrapper.complex-container:last-child {
    border-bottom-width: 1px !important; /* the rule above is !important */
    border-radius: var(--radius-card);
}

/* The bottom half, the prototype's .pagin (:183); no overflow: hidden, because the per-page menu opens upwards out of it */
body.rz-theme .table-wrapper.complex-container + .box-footer {
    margin: 0;
    padding: 13px 16px; /* .box-body, .box-footer { padding: 10px } (dcat-app-primary.css:2387-2394) */
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background-color: var(--card);
    box-shadow: var(--shadow-card);
}

/* ---------- Header (spec 6.2): the prototype's thead th (:145-146), in --text-2 (5.71:1) rather than --text-3 (2.52:1) ---------- */
body.rz-theme table.custom-data-table.data-table > thead > tr > th {
    padding: 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background-color: var(--paper-2);
    color: var(--text-2);
    font-size: var(--rz-fs-label) !important; /* dcat-app-primary.css:1550-1563 set .95rem and .9rem with !important */
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/* ColumnTypography tags the th too, so amount and number headers line up with their right-aligned cells */
body.rz-theme table.custom-data-table.data-table > thead > tr > th:is(.rz-col-amount, .rz-col-num) {
    text-align: right;
}

:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme table.custom-data-table.data-table > thead > tr > th {
    font-size: var(--rz-fs-label-cn) !important; /* the rule above is !important; 11px Chinese is hard to read */
    letter-spacing: 0;
    text-transform: none;
}

/* Sort arrows: span.grid-column-header > a.grid-sort.feather (Grid/Column/Sorter.php:103); no .content-body, so dialogs get it too */
body.rz-theme table.custom-data-table.data-table > thead > tr > th .grid-column-header > a.grid-sort.feather {
    height: auto; /* dcat-app-primary.css:1849-1853 sets 15px and a negative margin */
    margin: 0 0 0 2px;
    color: var(--text-2); /* an icon that says "sortable" needs 3:1, which --text-3 misses */
    font-size: 14px;
}

body.rz-theme table.custom-data-table.data-table > thead > tr > th .grid-column-header > a.grid-sort.feather.active,
body.rz-theme table.custom-data-table.data-table > thead > tr > th .grid-column-header > a.grid-sort.feather:hover {
    color: var(--brand-text);
}

/* ---------- Rows and cells (spec 6.3): collapsed borders, a separator under each cell, every row state on the td ---------- */
/* dark.css paints each tr --card with !important and each td --card, so a state painted on the tr would never show */
body.rz-theme table.custom-data-table.data-table {
    width: 100%;
    margin: 0;
    padding: 0; /* Dcat's dark .table { padding: 0 1rem } */
    border-collapse: collapse !important; /* table.data-table { border-collapse: separate !important } (dcat-app-primary.css:1153-1155) */
    border-spacing: 0; /* the row-card gap, border-spacing: 0 .8rem (dcat-app-primary.css:1144-1147) */
    background-color: transparent; /* dark.css paints .table --card; the wrapper is the card */
    color: var(--foreground);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr {
    background-color: transparent; /* Dcat paints rows #fff and tr:hover #f8fafc (0,3,3), which tinted the empty-state row; every row state is painted on the td */
    border-radius: 0;
    box-shadow: none;
    cursor: auto; /* clicking a row does nothing: RowSelector's clickRow is off (Grid/Tools/RowSelector.php:17) */
    transition: none;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td {
    height: auto;
    padding: 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--border-2);
    border-radius: 0;
    color: var(--foreground);
    font-size: var(--rz-fs-content);
    line-height: var(--rz-lh-content);
    white-space: normal; /* cells keep wrapping (spec decision 2); v4 uses nowrap */
    vertical-align: middle;
    transition: background-color .14s var(--ease-spay);
}

/* The pagination strip's top border, or the wrapper's own bottom border, closes the card */
body.rz-theme table.custom-data-table.data-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* The empty-state row (td[colspan]) keeps its background */
body.rz-theme table.custom-data-table.data-table > tbody > tr:hover > td:not([colspan]) {
    background-color: var(--hover);
}

/* Narrow columns: 8px cell sides; the table's outer edges keep 16px so text clears the card border */
body.rz-theme table.custom-data-table.data-table > thead > tr > th:first-child,
body.rz-theme table.custom-data-table.data-table > tbody > tr > td:first-child { padding-left: 16px; }
body.rz-theme table.custom-data-table.data-table > thead > tr > th:last-child,
body.rz-theme table.custom-data-table.data-table > tbody > tr > td:last-child { padding-right: 16px; }

/* The actions column (Grid/Concerns/HasActions.php:85-90 adds .grid__actions__ to its td and th); after the edge rules */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td.grid__actions__ {
    width: 200px; /* in auto table layout a width works as a minimum (min-width is undefined on cells): about two buttons a row */
    padding: 9px 13px 9px 5px; /* 12px, the 16px outer edge and 8px, less the buttons' 3px margin */
}

/* Selected rows (row selector on the built-in Users, Roles and operation-log lists) */
body.rz-theme table.custom-data-table.data-table > tbody > tr:has(> td .vs-checkbox-con input:checked) {
    background-color: var(--card) !important; /* RowSelector.js:57 writes an inline background-color on the tr */
}

body.rz-theme table.custom-data-table.data-table > tbody > tr:has(> td .vs-checkbox-con input:checked) > td {
    background-color: var(--brand-soft);
}

/* ---------- IDs, amounts, rates and dates (spec 6.4): ColumnTypography's rz-col-* classes on the td and th ---------- */
/* The full grid path beats dark.css's cell colour (.table tbody tr:not([class*=table-]) td, 0,4,4); the th keeps the UI font */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td:is(.rz-col-id, .rz-col-amount, .rz-col-num, .rz-col-date) {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td.rz-col-id {
    font-weight: 600;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td.rz-col-amount {
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td.rz-col-amount.rz-col-minor {
    color: var(--text-2);
    font-size: var(--rz-fs-content);
    font-weight: 400;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td.rz-col-num {
    color: var(--foreground);
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

/* Dates may break between the date and the time */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td.rz-col-date {
    color: var(--text-2);
    font-weight: 400;
}

/* Links in cells keep Part 1's --brand-text (base.css's .content-body a rule); links in ID cells keep the cell's 600 */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td:not(.grid__actions__):not(.rz-col-id) a:not(.btn) {
    font-weight: 500;
    text-decoration: none;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td:not(.grid__actions__):not(.rz-col-id) a:not(.btn):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Empty list (spec 6.11): v4's empty state without a hint line (CSS text cannot be translated) ---------- */
body.rz-theme table.custom-data-table.data-table > tbody > tr:only-child > td[colspan] {
    padding: 64px 24px;
    border-bottom: 0;
    text-align: center;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr:only-child > td[colspan] > div {
    margin: 0 !important; /* inline margin: 5px 0 0 10px (grid/table.blade.php:44) */
}

body.rz-theme table.custom-data-table.data-table > tbody > tr:only-child > td[colspan] .help-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--foreground) !important; /* dark.css sets .help-block --text-2 with !important */
    font-size: 14px;
    font-weight: 600;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr:only-child > td[colspan] .help-block > .feather {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    background-color: var(--secondary);
    color: var(--text-3); /* decorative: the title says it */
    font-size: 28px;
}

/* An inbox instead of the alert circle: feather's icon-inbox glyph (dcat/plugins/vendors.min.css) */
body.rz-theme table.custom-data-table.data-table > tbody > tr:only-child > td[colspan] .help-block > .icon-alert-circle::before {
    content: "\e87d";
}

/* ---------- Relation grids on detail pages (spec 6.12): a title, then the card; blocks stay 21px apart (.mt-1-5) ---------- */
body.rz-theme .show-relation-container .custom-data-table-header h4 {
    margin: 0 !important; /* inline margin: 5px 10px 0 (grid/table-toolbar.blade.php:6) */
    font-size: 17px; /* v4's detail-block title; the font, weight and colour come from base.css's heading rule */
    line-height: 1.4;
}

/* ---------- Images in cells (spec 6.15): the reload list's QR Code column; a click still opens Dcat's preview ---------- */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td > img.img-thumbnail[data-action="preview-img"] {
    max-width: 64px !important; /* inline max-width: 200px (Grid/Displayers/Image.php:25) */
    max-height: 64px !important; /* inline max-height: 200px */
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--card);
    vertical-align: middle;
    cursor: zoom-in !important; /* inline cursor: pointer */
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td > img.img-thumbnail[data-action="preview-img"]:hover {
    border-color: var(--text-3);
}

/* ---------- Toolbar (spec 6.7): the prototype's .toolbar row (:136); its buttons are in elements.css, its menus below ---------- */
body.rz-theme .custom-data-table-header .table-responsive > .top {
    display: flex !important; /* .d-block { display: block !important } overrides Dcat's own flex (dcat-app-primary.css:1086-1090) */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* Dcat's .top sets space-between, which spreads a wrapped toolbar line on phones; .pull-right's auto margin still pushes the right group */
    gap: 10px;
}

body.rz-theme .custom-data-table-header .table-responsive > .top::after {
    content: none; /* the .clearfix pseudo-element would be one more flex item and one more gap */
}

body.rz-theme .custom-data-table-header .table-responsive > .top > .pull-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* a float does nothing in a flex row */
}

/* The customer site appends New Reload / New Billing in a .pull-right of its own, before Dcat's empty one: only the first pushes right */
body.rz-theme .custom-data-table-header .table-responsive > .top > .pull-right ~ .pull-right {
    margin-left: 0;
}

/* Quick search (Users and Roles, grid/quick-search.blade.php); its display stays (inline display: none plus .d-md-inline-block) */
body.rz-theme .custom-data-table-header .table-filter .form-control {
    height: 37px;
    padding: 0 12px 0 34px !important; /* dcat-app-primary.css:1120-1127 sets padding: 1.25rem 2.8rem !important */
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--card);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 14px;
}

/* Keyboard focus stays visible: the rule above outranks base.css's .form-control:focus (0,3,1). The --brand-text border
   is 5.39:1 on its own; the halo token arrives with Task 9, as for the filter fields */
body.rz-theme .custom-data-table-header .table-filter .form-control:focus {
    border-color: var(--brand-text);
    box-shadow: 0 0 0 3px var(--ring-halo);
}

body.rz-theme .custom-data-table-header .table-filter label::after {
    top: 50%;
    left: 12px;
    color: var(--text-2);
    font-size: 15px;
    transform: translateY(-50%);
}

/* ---------- Status tabs (spec 6.8): the prototype's .seg control (:139-141); they re-query the list (?tab=), so they filter ---------- */
/* Only the app's four Tab widgets use .nav-tabs; :not(.flex-column) leaves vertical tabs alone; no display on .tab-pane */
body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 100%;
    margin: 0;
    padding: 3px;
    overflow-x: auto; /* phones slide the segments sideways instead of wrapping them */
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--background);
    scrollbar-width: none;
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > .nav-item {
    flex: none;
    margin: 0;
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > .nav-item > .nav-link {
    padding: 6px 13px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-2); /* 5.51:1 on --background (7.58:1 dark) */
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0; /* dcat-app-primary.css:2444-2451 sets .045rem and capitalize */
    text-transform: none;
    white-space: nowrap;
    transition: color .18s var(--ease-spay), background-color .18s var(--ease-spay), box-shadow .18s var(--ease-spay);
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > .nav-item > .nav-link:not(.active):hover {
    color: var(--foreground);
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > .nav-item > .nav-link.active {
    background-color: var(--card);
    color: var(--brand-text); /* orange text on white would be 1.95:1 */
    box-shadow: var(--shadow-card);
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > .nav-item > .nav-link.active::after {
    content: none; /* the underline; base.css's tab-underline background and glow go with it */
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > .nav-item > .nav-link:focus-visible {
    outline: 2px solid var(--brand-text);
    outline-offset: -2px; /* the track scrolls sideways and would clip an outer outline */
}

body.rz-theme .content-body ul.nav.nav-tabs:not(.flex-column) > li.header:empty {
    display: none;
}

/* The customer site's tabs sit on their own row above the grid; the portal's sit in the grid header (div.mt-1) */
body.rz-theme.rz-app-frontend .content-body ul.nav.nav-tabs:not(.flex-column) {
    margin-bottom: 12px;
}

/* ---------- Filter panel (spec 6.9): a v4 card of 38px fields with each field's name as a quiet prefix inside ---------- */
/* Field rules are scoped to .grid-filter-form only, so the operation log's right-side panel (moved to <body>) gets them too */
body.rz-theme .filter-box.card {
    margin: 12px 0 0 !important; /* the container's inline <style> sets margin-bottom: -.5rem !important (filter/container.blade.php:1-8) */
    padding: 0; /* the same <style> sets padding: 1.8rem; the card body pads instead */
    box-shadow: var(--shadow-card) !important; /* .shadow-0 { box-shadow: none !important } (dcat-app-primary.css:404-406) */
}

body.rz-theme .filter-box.card > .card-body {
    padding: 16px !important; /* inline style="padding:0" (Grid/Filter.php:172, the default $style) */
}

/* No display: the row holds the .form-group fields */
body.rz-theme .grid-filter-form > .row {
    row-gap: 12px;
    align-items: center;
    margin: 0 -6px;
}

body.rz-theme .grid-filter-form .filter-input {
    padding: 0 6px;
}

body.rz-theme .grid-filter-form .filter-input > .form-group {
    margin-bottom: 0;
}

/* The right-side filter has no .row and so no row-gap: its fields take the 12px as a margin; a panel-mode .filter-input is a child of .row, so this skips it */
body.rz-theme .grid-filter-form > .filter-input > .form-group {
    margin-bottom: 12px;
}

/* The whole field; no overflow: hidden, because the date picker opens inside the group */
body.rz-theme .grid-filter-form .filter-input .input-group {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--card);
    transition: border-color .15s, box-shadow .15s;
}

/* The text inputs' focus ring (spec 5.1 rule 7), drawn on the whole field */
body.rz-theme .grid-filter-form .filter-input .input-group:focus-within {
    border-color: var(--brand-text); /* the text inputs' focus border: 5.39:1 light, 9.23:1 dark (spec 5.1 rule 7) */
    box-shadow: 0 0 0 3px var(--ring-halo);
}

/* The field name, like "Merchant" in the prototype's filter pill (:294) */
body.rz-theme .grid-filter-form .input-group > .input-group-prepend > .input-group-text {
    height: 36px;
    max-height: none; /* dcat-app-primary.css:1329-1332 caps it at 34px */
    margin: 0;
    padding: 0 4px 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent !important; /* .bg-white and dark.css .bg-white set the background with !important */
    color: var(--text-2) !important; /* .bg-white, Dcat's own dark .input-group-text (dcat-app-primary.css:3552-3559) and forms.css 7.16 set color with !important */
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

body.rz-theme .grid-filter-form .input-group > .input-group-prepend > .input-group-text > b {
    font-weight: 500;
}

body.rz-theme .grid-filter-form .input-group > .input-group-prepend > .input-group-text > .icon-calendar {
    margin-left: 4px;
    color: var(--text-2);
    font-size: 15px;
}

body.rz-theme .grid-filter-form .input-group > .form-control {
    height: 36px;
    min-height: 36px;
    max-height: none; /* dcat-app-primary.css:1251-1257 sets 30px in .input-group-sm */
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px; /* text in inputs is 14px (spec 5.4); v4's filter input uses 12.5px */
    line-height: 36px;
}

body.rz-theme .grid-filter-form .input-group > .form-control::placeholder {
    color: var(--text-3);
}

/* The ring is on the whole field (above), not on the bare input (Part 1's .form-control:focus in base.css) */
body.rz-theme .grid-filter-form .input-group > .form-control:focus {
    box-shadow: none;
}

/* The "To" between the two dates */
body.rz-theme .grid-filter-form .input-group > .input-group-addon {
    height: auto;
    min-width: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-2) !important; /* Dcat's own dark .input-group-addon (dcat-app-primary.css:3552-3559) and forms.css 7.16 set color with !important */
    font-size: 12.5px;
}

body.rz-theme .grid-filter-form .input-group > .select2-container {
    flex: 1 1 auto;
    width: auto !important; /* dcat-app-primary.css:1376-1379 sets width: 50% !important; select2 also writes an inline width */
}

body.rz-theme .grid-filter-form .input-group .select2-container--default .select2-selection {
    min-height: 36px !important; /* dcat-app-primary.css:1381-1383 and its .input-group-sm rule set min-height with !important */
    border-color: transparent !important; /* dcat-app-primary.css:1355-1360, Dcat's own dark select2 border (:3604-3610) and forms.css 7.16 set border-color with !important */
    background: transparent;
}

/* Search keeps Part 1's primary colours (base.css's primary-button rule); Reset is the prototype's .btn-ghost */
body.rz-theme .grid-filter-form .btn:is(.submit, .reset) {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 38px;
    margin: 0 0 0 6px !important; /* inline margin-left: 12px and 6px (filter/container.blade.php:20, 25) */
    padding: 0 14px !important; /* dcat-app-primary.css .btn and .btn-sm set padding with !important */
    border-radius: 9px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none !important; /* dcat-app-primary.css .btn-white:hover/:focus shadow is !important (Reset) */
}

body.rz-theme .grid-filter-form .btn.reset {
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--text-2);
}

body.rz-theme .grid-filter-form .btn.reset:hover {
    background-color: var(--hover);
    color: var(--foreground) !important; /* dark.css .btn.btn-white:hover sets color with !important */
}

/* The operation log's right-side filter (Slider.js moves it to <body>); its z-index 998 stays */
body.rz-theme .slider-panel[id^="dcat-slider-"] {
    border-left: 1px solid var(--border);
    background-color: var(--card);
    box-shadow: var(--shadow-xl);
}

body.rz-theme .slider-panel .right-side-filter-container .header {
    border-bottom: 1px solid var(--border);
    background-color: var(--card);
}

/* ---------- Pagination (spec 6.10): range text left, per-page and page buttons right; the strip's card part is above ---------- */
body.rz-theme .table-wrapper.complex-container + .box-footer {
    display: flex !important; /* .d-block { display: block !important } */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: var(--text-2);
    font-size: 12.5px;
}

body.rz-theme .table-wrapper.complex-container + .box-footer::after {
    content: none; /* the .clearfix pseudo-element would be one more flex item */
}

/* The range text; Dcat hides it below 576px (d-none d-sm-inline) */
body.rz-theme .table-wrapper.complex-container + .box-footer > span:first-child {
    order: 0;
    margin-right: auto;
    color: var(--text-2) !important; /* inline color: Admin::color()->dark80() (Grid/Tools/Paginator.php:89) */
}

body.rz-theme .table-wrapper.complex-container + .box-footer > span:first-child b {
    color: var(--foreground);
    font-weight: 600;
    font-feature-settings: "tnum" 1;
}

body.rz-theme .table-wrapper.complex-container + .box-footer > .per-pages-selector {
    order: 1;
    margin: 0 !important; /* inline margin-right: 10px (PerPageSelector.php:89) */
}

/* No jump-to-page box (the prototype has none); the buttons wrap on phones, as v4's Pagination does */
body.rz-theme .table-wrapper.complex-container + .box-footer > .pagination {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none !important; /* .shadow-100 is !important (dcat-app-primary.css:412-414) */
}

/* Vuexy rounds and greys the items (.pagination .page-item 5rem, .page-item.active #f0f0f0) */
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item {
    margin: 0;
    border-radius: 0;
    background: transparent;
}

/* The prototype's .pages button (:185); beats Vuexy's strongest match, .pagination .page-item:first-child:not(.prev-item) .page-link (0,5,0) */
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 31px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--card);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    font-feature-settings: "tnum" 1;
    transform: none;
    box-shadow: none;
    transition: background-color .15s, color .15s;
}

body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: var(--hover);
    color: var(--foreground);
}

/* Dark text on orange (9.14:1): replaces base.css's .page-item.active colour here, and Vuexy's scale(1.05) and white text */
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.active .page-link {
    border-color: transparent;
    background-color: var(--brand);
    color: var(--brand-ink);
}

/* Vuexy draws the arrows as feather glyphs */
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.previous .page-link::before,
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.next .page-link::after {
    font-size: 15px;
}

body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.disabled {
    opacity: 1; /* dcat-app-primary.css:1528-1530 dims every disabled item to .82 */
}

body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.disabled.previous,
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.disabled.next {
    opacity: .4;
}

/* The "..." separator is not text to read, so --text-3 is allowed */
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item.disabled:not(.previous):not(.next) .page-link {
    min-width: 20px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--text-3);
}

/* Bootstrap's own focus glow is indigo */
body.rz-theme .table-wrapper.complex-container + .box-footer .pagination .page-item .page-link:focus-visible {
    outline: 2px solid var(--brand-text);
    outline-offset: 2px;
}

/* Rows per page: span.dropup > a.dropdown-toggle.btn.btn-sm.btn-white (PerPageSelector.php, Widgets/Dropdown.php) */
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-toggle.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 31px;
    padding: 0 10px !important; /* .btn-sm sets padding with !important (dcat-app-primary.css:687-690); Vuexy's .dropup .btn adds more */
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--card);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none !important; /* dcat-app-primary.css .btn-white:hover/:focus shadow is !important */
}

body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-toggle.btn:hover {
    background-color: var(--hover);
    color: var(--foreground) !important; /* dark.css .btn.btn-white:hover sets color with !important */
}

/* Vuexy's arrow glyph stays (its content is !important), re-sized and re-placed */
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-toggle.btn::after {
    top: 0;
    left: 0;
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
}

/* The per-page menu (v4 Popover and Menu); the toolbar's column-selector and batch-action menus share its look (spec 6.7) */
body.rz-theme .custom-data-table-header .table-responsive > .top .dropdown-menu,
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--popover);
    box-shadow: var(--shadow-xl);
}

body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-menu {
    min-width: 96px;
    margin-bottom: 6px;
}

body.rz-theme .custom-data-table-header .table-responsive > .top .dropdown-menu::before,
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-menu::before {
    content: none; /* Vuexy's .dropdown / .dropup .dropdown-menu:before arrows */
}

/* Link items only: the column selector's checkbox list keeps Dcat's item padding */
body.rz-theme .custom-data-table-header .table-responsive > .top .dropdown-menu > li.dropdown-item:has(> a),
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-menu > li.dropdown-item {
    padding: 0;
    background: transparent; /* dark.css paints the hovered .dropdown-item --background */
}

/* (0,6,3) and (0,7,3) beat Part 1's link colour (base.css's .content-body a rule, 0,6,2), which would turn the items orange-brown */
body.rz-theme .custom-data-table-header .table-responsive > .top .dropdown-menu > li.dropdown-item > a,
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-menu > li.dropdown-item > a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--foreground);
    font-size: 13px;
    font-weight: 500;
    font-feature-settings: "tnum" 1;
}

body.rz-theme .custom-data-table-header .table-responsive > .top .dropdown-menu > li.dropdown-item > a:hover,
body.rz-theme .table-wrapper.complex-container + .box-footer .per-pages-selector .dropdown-menu > li.dropdown-item > a:hover {
    background-color: var(--hover);
}

/* ---------- Key-value tables (spec 6.14): Tools::generateViewTable's table.customiz-table, in cells and detail values ---------- */
/* Dcat's descendant row-card rules (dcat-app-primary.css:1149-1182) and dark.css's tr and td fills reach the nested rows too */
body.rz-theme table.custom-data-table.data-table .customiz-table tr {
    background: transparent !important; /* dark.css .table tbody tr sets the background with !important */
    border-radius: 0;
    box-shadow: none;
    cursor: inherit;
    transition: none;
}

body.rz-theme table.custom-data-table.data-table .customiz-table td {
    border: 0;
    background-color: transparent;
}

/* Labels in --text-2 and values in --foreground, as v4's key-value rows; the second selector beats dark.css's cell colour */
body.rz-theme .customiz-table td.text-bold,
body.rz-theme table.custom-data-table.data-table .customiz-table td.text-bold {
    padding: 0 8px 0 0 !important; /* Tools.php's own Admin::style sets .customiz-table td { padding: 0 !important } */
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
}

/* Two lines that were invisible in dark mode */
body.rz-theme .customiz-table .amount-seprate {
    border-top-color: var(--text-3); /* Tools.php draws the total line black */
}

body.rz-theme .customiz-table td > div[style*="border-bottom"] {
    border-bottom-color: var(--line) !important; /* the divider row's inline border-bottom (Tools.php:133) */
}

/* Audit-trail adjustments with an inline color red / green (both apps' ReloadController) */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td > div[style*="color: red"] {
    color: var(--err) !important; /* inline color: red */
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td > div[style*="color: green"] {
    color: var(--ok) !important; /* inline color: green */
}

/* ---------- Copy button (spec 6.14): Tools::generateCopyButton's span.rz-copy, the prototype's .copyable (:164-169) ---------- */
/* The icon stays visible (window.copy's icon swap is the only feedback; touch has no hover); jQuery owns its opacity and transform */
body.rz-theme .rz-copy {
    justify-content: flex-start !important; /* .justify-content-center is !important; the content sat centred in the cell */
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: -1px -5px;
    padding: 1px 5px;
    border-radius: 5px;
    cursor: copy;
    transition: background-color .14s var(--ease-spay);
}

body.rz-theme .rz-copy:hover {
    background-color: var(--brand-soft);
}

/* Copied (the icon is now .icon-check); after the hover rule, which has the same specificity */
body.rz-theme .rz-copy:has(> .icon-check) {
    background-color: var(--ok-bg);
}

body.rz-theme .rz-copy > .icon.text-primary {
    margin-left: 0 !important; /* inline margin-left: 3px */
    color: var(--text-2) !important; /* base.css sets .text-primary --brand-text with !important */
    font-size: 12px;
}

body.rz-theme .rz-copy:hover > .icon.text-primary {
    color: var(--brand-text) !important; /* the rule above is !important */
}

body.rz-theme .rz-copy > .icon.text-primary.icon-check,
body.rz-theme .rz-copy:hover > .icon.text-primary.icon-check {
    color: var(--ok-mark) !important; /* the two rules above are !important */
}