/*
 * remitza v4 theme: fonts, base text, surfaces and the colour fixes Dcat's orange build still needs.
 * Every selector starts with body.rz-theme so switching ADMIN_THEME off leaves no trace.
 */

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Geist-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Geist-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/GeistMono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/GeistMono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ClashDisplay-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ClashDisplay-Semibold.woff2") format("woff2");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/ClashDisplay-Bold.woff2") format("woff2");
}

/*
 * Metric-matched fallbacks (Part 2 spec 5.4), each named right after its web font in tokens.css. The overrides are
 * v4's next/font build values, so Arial takes the web font's space and text does not move when Geist or Clash Display
 * swaps in. Arial has no Chinese glyphs, so Chinese still falls through to PingFang SC / Microsoft YaHei; browsers
 * without size-adjust (Safari before 17) still use local Arial, unscaled, until the web font loads, so text shifts
 * slightly when it swaps in (spec 5.4).
 */
@font-face {
    font-family: "Geist Fallback";
    src: local("Arial");
    ascent-override: 95.94%;
    descent-override: 28.16%;
    line-gap-override: 0%;
    size-adjust: 104.76%;
}

@font-face {
    font-family: "Geist Mono Fallback";
    src: local("Arial");
    ascent-override: 74.67%;
    descent-override: 21.92%;
    line-gap-override: 0%;
    size-adjust: 134.59%;
}

@font-face {
    font-family: "Clash Display Fallback";
    src: local("Arial");
    ascent-override: 81.56%;
    descent-override: 22.91%;
    line-gap-override: 8.25%;
    size-adjust: 109.12%;
}

/* ---------- Base ---------- */
body.rz-theme {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

body.rz-theme .tooltip,
body.rz-theme .popover {
    font-family: var(--font-sans);
}

body.rz-theme .app-content,
body.rz-theme .content-wrapper {
    background-color: var(--background);
}

/* Headings (spec 7.6); .card-box-title is the title of Dcat's Card widget */
body.rz-theme h1,
body.rz-theme h2,
body.rz-theme h3,
body.rz-theme h4,
body.rz-theme h5,
body.rz-theme h6,
body.rz-theme .box-title,
body.rz-theme .card-title,
body.rz-theme .card-box-title {
    color: var(--foreground);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Amounts printed by app/Tools/Tools.php (spec 7.6): tabular Geist Mono; the font only, sizes stay */
body.rz-theme .amount {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

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

body.rz-theme .content-body a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) {
    color: var(--brand-text);
}

/* ---------- Orange build fixes (spec 6.5) ---------- */
/*
 * Primary buttons: dark text on orange in both themes. The selectors match the shape of Dcat's dark rule
 * `body.dark-mode .btn.btn-primary:not(.btn-outline) { color: #ebebeb }` so they win on load order;
 * the dark.css generator skips .btn-primary for the same reason.
 */
body.rz-theme .btn.btn-primary:not(.btn-outline),
body.rz-theme .btn.btn-primary:not(.btn-outline):focus,
body.rz-theme .btn.btn-primary:not(.btn-outline):disabled,
body.rz-theme .btn.btn-primary.disabled:not(.btn-outline) {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

body.rz-theme .btn.btn-primary:not(.btn-outline):hover,
body.rz-theme .btn.btn-primary:not(.btn-outline):not(:disabled):not(.disabled):active,
body.rz-theme .btn.btn-primary:not(.btn-outline):not(:disabled):not(.disabled).active,
body.rz-theme .show > .btn.btn-primary.dropdown-toggle:not(.btn-outline) {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--brand-ink);
}

/* Other orange fills that keep white text or a white icon in the orange build (1.95:1): current page, dialog submit, checkbox tick */
body.rz-theme .pagination .page-item.active .page-link {
    color: var(--brand-ink);
}

body.rz-theme .layui-layer-btn .layui-layer-btn0 {
    color: var(--brand-ink) !important; /* dcat-app-primary.css sets color: #fff !important */
}

body.rz-theme .vs-checkbox-con .vs-checkbox .vs-checkbox--check .vs-icon {
    color: var(--brand-ink); /* the icon has its own color: #fff, so a colour set on .vs-checkbox never reaches it */
}

/* Dcat toolbar buttons are .btn-primary.btn-outline: keep them outlined */
body.rz-theme .btn-primary.btn-outline,
body.rz-theme .btn-outline-primary {
    background-color: transparent;
    border-color: var(--brand);
    color: var(--brand-text);
}

body.rz-theme .btn-primary.btn-outline:hover,
body.rz-theme .btn-primary.btn-outline.active,
body.rz-theme .btn-outline-primary:hover,
body.rz-theme .btn-outline-primary:not(:disabled):not(.disabled):active,
body.rz-theme .btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-text);
}

body.rz-theme .text-primary {
    color: var(--brand-text) !important; /* the orange build sets #f7aa44 !important (1.95:1 on white) */
}

body.rz-theme a.bg-primary:hover,
body.rz-theme a.bg-primary:focus,
body.rz-theme button.bg-primary:hover,
body.rz-theme button.bg-primary:focus {
    background-color: var(--brand-hover) !important; /* the orange build still ships indigo #445692 !important here */
}

/* More indigo rgba(88, 108, 177, …) left in the orange build: the PJAX page-load bar and the active tab underline (forms.css draws the checked radio) */
body.rz-theme #nprogress .bar {
    background-color: var(--brand);
}

/* Tab::theme() bars (.nav-theme-* on the tab's wrapper) keep Dcat's white or orange underline */
body.rz-theme :not([class*="nav-theme-"]) > .nav.nav-tabs .nav-item .nav-link.active::after {
    background: var(--brand) !important; /* adminlte-primary.css sets an orange-to-indigo gradient !important */
}

body.rz-theme .nav.nav-tabs .nav-item .nav-link.active::after {
    box-shadow: 0 0 2px 0 var(--brand-soft-2) !important; /* adminlte-primary.css and dcat-app-primary.css set an indigo glow !important */
}

body.rz-theme .form-control:focus {
    border-color: var(--brand-text); /* 5.39:1 on white; the orange stays in the 3px halo (Part 2 spec 5.1 rule 7) */
    outline: 2px solid transparent; /* Bootstrap sets outline: 0; forced-colours mode draws this */
    box-shadow: 0 0 0 3px var(--ring-halo), var(--shadow-xs);
}

/* Kept (Part 2 spec 7.3): Dcat's own dark .form-control border is !important and returns once dark.css stops owning .form-control */
body.rz-theme.dark-mode .form-control:focus {
    border-color: var(--brand-text) !important; /* dcat-app-primary.css:3604-3610 border-color #303247 !important (0,2,1) */
}

/* ---------- Status tags (custom-tag-*, printed by app/Models/*.php) ---------- */
body.rz-theme .custom-tag-red {
    background-color: var(--err-bg);
    color: var(--err);
}

body.rz-theme .custom-tag-green {
    background-color: var(--ok-bg);
    color: var(--ok);
}

body.rz-theme .custom-tag-gray {
    background-color: var(--neutral-bg);
    color: var(--neutral);
}

body.rz-theme .custom-tag-blue {
    background-color: var(--info-bg);
    color: var(--info);
}

/*
 * ---------- Surfaces (spec 7.5; Part 2 spec 5.6) ----------
 * Colour, border, radius and shadow only; never `display`, because FE forms hide fields with .hidden.
 * Every Dcat card takes the shared card radius and shadow (Part 2 spec 2.4): forms, Show panels, the filter box,
 * the customer rate and terms cards, the portal login card.
 * The grid wrapper div.dcat-box has neither class and stays transparent; lists.css draws each grid table as its own
 * v4 card in both modes, so Part 1's dark-only table transparency is gone (Part 2 spec 6.1, 6.17).
 */
body.rz-theme .card,
body.rz-theme .box:not(.box-solid) {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--foreground);
}

/* ---------- Guard (spec 5.4): the FE exchange form hides other transfer methods' fields with .hidden ---------- */
body.rz-theme .hidden {
    display: none !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.rz-theme *,
    body.rz-theme *::before,
    body.rz-theme *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}