/*
 * remitza v4 theme, Part 2: the content type base, mono detail values, the shared keyboard focus ring, row-action and
 * toolbar buttons, status chips, and the Chinese twins of Part 1 rules (Part 2 spec 5.1, 5.4, 6.4-6.7).
 * It loads after pages.css, so it beats dark.css on equal specificity; lists.css, forms.css and overlays.css build on it.
 */

/* ---------- Content type (spec 5.4). Dcat's html { font-size: 14px } stays, so every Dcat rem keeps its size ---------- */
body.rz-theme {
    letter-spacing: normal; /* Dcat's html { letter-spacing: .01rem }; v4 has none, and Chinese text must have none */
}

/* .content-wrapper (#pjax-container) holds the page and .extra-html; the sidebar, topbar and login pages keep their sizes */
body.rz-theme .content-wrapper {
    font-size: var(--rz-fs-content); /* 13px; Dcat's body is 1rem = 14px */
    line-height: var(--rz-lh-content); /* 1.5, unitless, so Geist, its fallback and Chinese fonts share one line height */
}

/* ---------- Detail values (spec 6.4): ColumnTypography::tagShow() wraps mapped Show fields in span.rz-col-* ---------- */
body.rz-theme .show-field span.rz-col-id,
body.rz-theme .show-field span.rz-col-amount,
body.rz-theme .show-field span.rz-col-num,
body.rz-theme .show-field span.rz-col-date {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

body.rz-theme .show-field span.rz-col-id,
body.rz-theme .show-field span.rz-col-amount {
    font-weight: 600;
}

body.rz-theme .show-field span.rz-col-num {
    color: var(--foreground);
    font-weight: 400;
}

/* The service fee (rz-col-minor) and dates are secondary values */
body.rz-theme .show-field span.rz-col-amount.rz-col-minor,
body.rz-theme .show-field span.rz-col-date {
    color: var(--text-2);
    font-weight: 400;
}

/* ---------- Keyboard focus (spec 6.6, 8.1): orange is 1.95:1 on white; --brand-text is 5.39:1 (9.23:1 on the dark card) ---------- */
body.rz-theme :is(a, button, .btn):focus-visible {
    outline: 2px solid var(--brand-text);
    outline-offset: 2px;
}

/*
 * ---------- Row actions, the "calm" buttons (spec 6.6) ----------
 * div.btn.btn-sm from CustomActions and the controllers' button strings, inside a, span[data-toggle=modal] or bare.
 * No height: both global views set .grid__actions__ .btn { height: unset !important } (Part 1 spec 10).
 */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin: 3px !important; /* each button string carries an inline margin: 5px 0 0 5px */
    padding: 0 10px !important; /* dcat-app-primary.css .btn and .btn-sm set padding with !important */
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--card);
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td .btn:hover {
    border-color: var(--border);
    background-color: var(--hover);
    color: var(--foreground);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td .btn .grid-action-icon {
    font-size: 14px;
}

/* Pale green (Confirm, Upload, Feed Product Data); after the neutral hover, which has the same specificity */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td .btn.btn-success {
    border-color: transparent;
    background-color: var(--ok-bg);
    color: var(--ok);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td .btn.btn-success:hover {
    border-color: var(--ok-mark);
}

/* Pale red (Reject is .btn-danger, Delete is .btn-outline-danger) */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.btn.btn-danger, .btn.btn-outline-danger) {
    border-color: transparent;
    background-color: var(--err-bg);
    color: var(--err);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.btn.btn-danger, .btn.btn-outline-danger):hover {
    border-color: var(--err-mark);
}

/* Dcat's own icon actions (operation log, Grid\Displayers\Actions: a > i.grid-action-icon) */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td.grid__actions__ a > i.grid-action-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 16px;
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td.grid__actions__ a:hover > i.grid-action-icon {
    background-color: var(--hover);
    color: var(--foreground);
}

/*
 * ---------- Toolbar tools (spec 6.7): filter, refresh, column selector, batch actions, as the prototype's .filter (:137-138) ----------
 * Grid\Tools::addButtonOutline makes them .btn-primary.btn-outline, which base.css draws orange; the layout is in lists.css.
 */
body.rz-theme .custom-data-table-header .table-responsive > .top .btn {
    display: inline-flex;
    align-items: center;
    gap: 0; /* the labels start with    */
    height: 37px;
    padding: 0 13px !important; /* dcat-app-primary.css .btn sets padding with !important */
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--card);
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 400;
    box-shadow: none !important; /* dcat-app-primary.css .btn-white:hover/:focus shadow is !important (batch actions) */
}

body.rz-theme .custom-data-table-header .table-responsive > .top .btn .feather {
    font-size: 15px;
    opacity: .7;
}

body.rz-theme .custom-data-table-header .table-responsive > .top .btn:hover {
    border-color: var(--text-3);
    background-color: var(--card);
    color: var(--foreground);
}

body.rz-theme .custom-data-table-header .table-responsive > .top .btn.btn-white:hover {
    color: var(--foreground) !important; /* dark.css .btn.btn-white:hover sets color with !important */
}

body.rz-theme .custom-data-table-header .table-responsive > .top .filter-count {
    color: var(--foreground);
    font-weight: 600;
}

body.rz-theme .custom-data-table-header .table-responsive > .top .filter-button-group {
    margin-right: 0 !important; /* inline margin-right: 3px (filter/button.blade.php:1) */
    box-shadow: none;
}

/* The page's main action: Dcat's Create button and the customer site's New Reload / New Billing (the column selector sits in a span; Refresh is a direct child too in a titled grid, so it is excluded) */
body.rz-theme .custom-data-table-header .table-responsive > .top [data-responsive-table-toolbar] > .btn.btn-primary:not(.grid-refresh) {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--brand-ink);
    font-weight: 600;
}

body.rz-theme .custom-data-table-header .table-responsive > .top [data-responsive-table-toolbar] > .btn.btn-primary:not(.grid-refresh):hover {
    border-color: var(--brand-hover);
    background-color: var(--brand-hover);
    color: var(--brand-ink);
}

/* ---------- Status chips (spec 6.5): Part 1's colours (base.css status tags) in the prototype's .chip shape (:158-160) ---------- */
/* Beats the shape both global views print: padding .25rem .5rem, radius 4px, bold (0,1,0) */
body.rz-theme :is(.custom-tag-red, .custom-tag-green, .custom-tag-gray, .custom-tag-blue) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    word-break: keep-all;
    vertical-align: middle;
}

/* The dot marks a status only: in a grid cell or a detail value, not inside sentences and rate strings */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td > :is(.custom-tag-red, .custom-tag-green, .custom-tag-gray, .custom-tag-blue)::before,
body.rz-theme .box-show > .box-body > :is(.custom-tag-red, .custom-tag-green, .custom-tag-gray, .custom-tag-blue)::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Dcat .label / .badge (user roles, role slugs, operation-log methods); Badge extends Label (Grid/Displayers/Badge.php) */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge) {
    padding: 4px 10px;
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}

/* White on the inline Label backgrounds is 1.95-3.56:1, so Part 1's status pairs instead (Grid/Displayers/Label.php) */
body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge)[style*="f7aa44"] {
    background-color: var(--act-bg) !important; /* inline background: primary */
    color: var(--act);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge)[style*="21b978"] {
    background-color: var(--ok-bg) !important; /* inline background: success */
    color: var(--ok);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge)[style*="3085d6"] {
    background-color: var(--info-bg) !important; /* inline background: blue */
    color: var(--info);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge)[style*="ea5455"] {
    background-color: var(--err-bg) !important; /* inline background: danger */
    color: var(--err);
}

body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge)[style*="d2d6de"] {
    background-color: var(--neutral-bg) !important; /* inline background: default */
    color: var(--neutral) !important; /* the default label also carries an inline color: #555 */
}

/*
 * ---------- Chinese pages (spec 5.4, 6.18) ----------
 * The customer site prints <html lang="cn">; html[lang|="zh"] covers a future zh / zh-CN; :lang(zh) never matches "cn".
 * A twin repeats a selector behind this prefix, which adds (0,1,1): no uppercase, no letter-spacing, nothing under 12px.
 */
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme :is(.custom-tag-red, .custom-tag-green, .custom-tag-gray, .custom-tag-blue),
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme table.custom-data-table.data-table > tbody > tr > td :is(.label, .badge) {
    font-size: var(--rz-fs-label-cn); /* 12px: 11.5px Chinese is hard to read, and some Chinese browsers stop at 12px */
    letter-spacing: 0;
    text-transform: none;
}

/* Twins of Part 1 rules; the originals stay untouched */
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme h1,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme h2,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme h3,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme h4,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme h5,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme h6,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .box-title,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .card-title,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .card-box-title {
    letter-spacing: 0; /* base.css's heading rule sets -0.025em, which squeezes Chinese characters together */
    text-transform: none;
}

:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .small-box > .inner h3 {
    letter-spacing: 0; /* pages.css:128-135, the dashboard numbers */
    text-transform: none;
}

:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .login-main .login-logo h1 {
    letter-spacing: 0; /* frontend.css:116-123, the customer login, register and forgot-password titles */
    text-transform: none;
}

:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .rz-flyout .rz-flyout-title {
    font-size: var(--rz-fs-label-cn); /* sidebar.css:364-371 sets 10.5px, .09em and uppercase */
    letter-spacing: 0;
    text-transform: none;
}