/* ============================================================================ Raptors Freight — global theme layer ("Nocturne"). This file carries the design tokens and the re-skin of the Bootstrap-4 template that every admin page is built on. It is loaded once, globally, from views/inc/head_scripts.php. THE RULE THIS FILE OBEYS: it changes how the application LOOKS and nothing else. It sets colour, type, radius, border and elevation on selectors the template already emits. It never changes layout structure, never hides a control, and never touches an id or a class that JavaScript binds to — because the working screens depend on that markup being exactly where it was. A page that has never heard of this file still renders correctly with it loaded. TOKENS. Every colour below is a custom property. The light/dark switch (dataJs/rf_theme.js) rewrites the property block on and nothing else, so a theme change is one attribute flip rather than a second stylesheet. The accent ramp MIRRORS in light mode: a token used as text stays a text colour, a token used as fill stays a fill, so no rule needs a light-mode variant of its own. TYPE. Sora for headings, Mulish for body copy — applied at the element level so a heading inside a card, a modal or a DataTable picks it up without the view knowing. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap'); /* == 1. Tokens ============================================================ */ :root, html[data-rf-theme="dark"] { --rf-bg: #161826; --rf-surface: #232532; --rf-text: #e9e9ed; --rf-divider: color-mix(in srgb, #e9e9ed 16%, transparent); --rf-line: color-mix(in srgb, #e9e9ed 11%, transparent); --rf-muted: color-mix(in srgb, #e9e9ed 56%, transparent); --rf-faint: color-mix(in srgb, #e9e9ed 34%, transparent); --rf-page: radial-gradient(1300px 780px at 88% -220px, color-mix(in srgb, #2b2741 62%, transparent), transparent 60%), #161826; --rf-accent: #9184d9; --rf-a100: #f5f4ff; --rf-a200: #e7e5fe; --rf-a300: #d2cefd; --rf-a400: #b5abfc; --rf-a500: #968ae0; --rf-a600: #796cbf; --rf-a700: #5d5294; --rf-a800: #423a6a; --rf-a900: #2b2741; --rf-section: #262a60; --rf-section-glow: #353b80; --rf-ok: oklch(0.74 0.115 162); --rf-warn: oklch(0.80 0.125 82); --rf-bad: oklch(0.68 0.150 24); --rf-info: oklch(0.73 0.110 236); --rf-sea: oklch(0.72 0.105 296); --rf-c-teal: #6fc9a8; --rf-c-indigo: #5b6bd6; --rf-c-peri: #7f8fe8; --rf-c-sky: #3fa9dd; --rf-c-rose: #e0a3a3; --rf-c-pink: #d98fb5; --rf-c-hero: #8fd0fb; --rf-c-amber: #e08a3e; --rf-sk-rest: #5d5294; --rf-sk-dim: #423a6a; --rf-sk-hot: #b5abfc; /* Elevation is a hairline edge plus ambient darkness on a dark ground. */ --rf-shadow-sm: 0 0 0 1px color-mix(in srgb, #e9e9ed 9%, transparent); --rf-shadow-md: 0 0 0 1px color-mix(in srgb, #e9e9ed 12%, transparent), 0 6px 18px rgba(0,0,0,.55); --rf-shadow-lg: 0 0 0 1px color-mix(in srgb, #e9e9ed 16%, transparent), 0 16px 40px rgba(0,0,0,.65); --rf-radius-sm: 4px; --rf-radius-md: 8px; --rf-radius-lg: 14px; --rf-font-heading: "Sora", system-ui, sans-serif; --rf-font-body: "Mulish", system-ui, sans-serif; /* The financial-permission mask. Any figure a role may not see is wrapped in an element reading these three, so a server-side permission check only has to set them. */ --fin-blur: 0px; --fin-op: 1; --fin-pe: auto; color-scheme: dark; } html[data-rf-theme="light"] { --rf-bg: #eef0fa; --rf-surface: #fbfcff; --rf-text: #232532; --rf-divider: color-mix(in srgb, #232532 20%, transparent); --rf-line: color-mix(in srgb, #232532 15%, transparent); --rf-muted: color-mix(in srgb, #232532 64%, transparent); --rf-faint: color-mix(in srgb, #232532 48%, transparent); --rf-page: radial-gradient(1300px 780px at 88% -220px, color-mix(in srgb, #b5abfc 26%, transparent), transparent 62%), #eef0fa; /* Mirrored ramp — see the note at the top of the file. */ --rf-a100: #2b2741; --rf-a200: #423a6a; --rf-a300: #5d5294; --rf-a400: #796cbf; --rf-a500: #968ae0; --rf-a600: #b5abfc; --rf-a700: #d2cefd; --rf-a800: #e7e5fe; --rf-a900: #f5f4ff; --rf-section: #dedcf7; --rf-section-glow: #cbc7f2; --rf-ok: oklch(0.55 0.115 162); --rf-warn: oklch(0.58 0.115 82); --rf-bad: oklch(0.53 0.170 24); --rf-info: oklch(0.54 0.120 236); --rf-sea: oklch(0.54 0.105 296); --rf-c-teal: #2f8f6d; --rf-c-indigo: #3f4eb5; --rf-c-peri: #5a6bd0; --rf-c-sky: #1d7fae; --rf-c-rose: #b26a6a; --rf-c-pink: #a85a83; --rf-c-hero: #2b8ec4; --rf-c-amber: #a8622a; --rf-sk-rest: #9a8ee4; --rf-sk-dim: #c9c3f4; --rf-sk-hot: #5d5294; --rf-shadow-sm: 0 1px 2px rgba(35,37,50,.06), 0 0 0 1px color-mix(in srgb, #232532 8%, transparent); --rf-shadow-md: 0 4px 14px rgba(35,37,50,.10), 0 0 0 1px color-mix(in srgb, #232532 10%, transparent); --rf-shadow-lg: 0 16px 40px rgba(35,37,50,.16), 0 0 0 1px color-mix(in srgb, #232532 12%, transparent); color-scheme: light; } /* == 2. Type ============================================================== */ body { font-family: var(--rf-font-body); font-size: 14px; line-height: 1.55; letter-spacing: 0; background: var(--rf-page) fixed; color: var(--rf-text); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .card-title, .modal-title, .display-1, .display-2, .display-3, .display-4 { font-family: var(--rf-font-heading); font-weight: 600; letter-spacing: -0.015em; color: var(--rf-text); } h6, .h6 { letter-spacing: .04em; } .text-muted, small, .small { color: var(--rf-muted) !important; } a { color: var(--rf-a300); } a:hover, a:focus { color: var(--rf-accent); } ::selection { background: color-mix(in srgb, var(--rf-accent) 30%, transparent); } /* STRICTLY TWO FAMILIES, EVERYWHERE (owner, 2026-08-28). `body { font-family }` is not enough on its own, and this is why: * the template sets .popover and .tooltip to Nunito Sans, and the drag-handle in .myadmin-dd to Montserrat — neither inherits from body, so three surfaces kept the old typeface however the tokens were set; * form controls and buttons do not inherit font-family from the document in any browser. The template happens to say `inherit` for them, but that is the template's opinion and a stylesheet loaded after it could take it away again; * a component rendered into a shadow-free portal (the datepicker, select2's dropdown, SweetAlert) attaches to and picks up whatever it finds. So the body face is restated on the things that would otherwise choose their own, and the heading face on the things that are headings. Icon fonts are excluded immediately below — a glyph rendered in Mulish is an empty box, not a fallback — and Phosphor exempts itself with !important in its own sheet. */ button, input, optgroup, select, textarea, .btn, .form-control, .custom-select, .input-group-text, table, .table, th, td, .popover, .popover-header, .popover-body, .tooltip, .tooltip-inner, .dropdown-menu, .dropdown-item, .nav, .nav-link, .navbar, .breadcrumb, .badge, .label, .alert, .list-group-item, .select2-container, .select2-selection, .select2-results__option, .swal2-container, .swal2-popup, .bootstrap-datetimepicker-widget, .myadmin-dd .dd-list .dd-item .dd-handle, .rfnav, .rfnav-row, .rfnav-text { font-family: var(--rf-font-body); } /* Headings keep the display face wherever they are drawn, including inside the components above. */ .card-title, .modal-title, .page-title, .popover-header, .swal2-title, h1, h2, h3, h4, h5, h6 { font-family: var(--rf-font-heading); } /* Icon fonts keep their own family: the body rule above would erase them. Every icon set the application loads is restated here by its class prefix, because a glyph rendered in Mulish is an empty box, not a fallback. UIcons is gone from this list with the font itself -- it was carrying one glyph, and it also caught `fi-group-id`, an ordinary class name on a hidden input, because the selector could not tell the two apart. */ [class^="mdi-"], [class*=" mdi-"] { font-family: "Material Design Icons" !important; } [class^="ti-"], [class*=" ti-"] { font-family: "themify" !important; } [class^="fa-"], [class*=" fa-"], .fa, .fas, .far, .fab { font-family: "Font Awesome 5 Free", "FontAwesome" !important; } [class^="flag-icon"], [class*=" flag-icon"] { font-family: inherit !important; } /* Phosphor (.ph / .ph-fill) is absent on purpose: its own sheet sets the family with !important, which already beats everything above. */ /* == 3. Shell ============================================================= */ #main-wrapper { background: transparent; } .page-wrapper { background: transparent; } .page-breadcrumb { background: transparent; } .topbar, .topbar .navbar-header, .topbar .top-navbar, .topbar .navbar-collapse { background: color-mix(in srgb, var(--rf-bg) 86%, transparent) !important; backdrop-filter: blur(12px); box-shadow: none; } .topbar { border-bottom: 1px solid var(--rf-line); } .topbar .navbar-header { border-right: 1px solid var(--rf-line); } .topbar .nav-link, .topbar .navbar-nav .nav-link { color: var(--rf-text) !important; opacity: .82; transition: opacity .15s, color .15s; } .topbar .nav-link:hover { opacity: 1; color: var(--rf-a200) !important; } /* The Authorization Form item sits on its own red bar and is marked .text-white in the markup. The rule above is !important (it has to beat the template) and was overriding that, leaving dark text on red. */ .topbar .nav-link.text-white, .topbar .nav-link.text-white span, .topbar .nav-link.text-white i { color: #fff !important; opacity: 1; } /* ── The navigation rail ─────────────────────────────────────── Not here. assets/css/rf_nav.css is the rail, in full and on its own. Roughly 180 lines used to sit at this point re-skinning the template's .left-sidebar / .sidebar-item / .sidebar-link markup, including the 5px dot drawn on every child row that the owner asked to have taken off. The rail no longer uses that markup, so all of it matched nothing. Deleting it is the removal, rather than another rule switching a previous rule back off. */ /* ── The record bar (design package, Shipment Details) ─────────────────────── The way back, what this record IS, and the two states a person opens it to check — all on one line above the detail, instead of a heading on the left and a menu on the right with the states buried further down. Wraps rather than truncating: a long status is worth a second line. */ /* THE RECORD BAR. What this record is, and what you can do to it, on one line and in one band. It used to be a bare strip of text on the page's own ground, which made the most important line on the screen the least visible thing on it: a small grey word, a number, two pills, and — in the other half of a Bootstrap row, as though it were unrelated — the actions menu. A surface of its own, a rule of accent down its leading edge, and the number set large enough to be the thing you read first. */ .cdp-recbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 52px; /* FULL BLEED, AND BACK IN AGAIN. The band had its own 16px of padding on top of the card's 1.3rem, so the number sat further right than the "Costs" heading and the detail columns underneath it -- and against a header that was inset twice, everything below looked pushed out to the card's edge. Out to the card's edges, then padded by exactly the card's own inset, so the header's first letter and the content's first letter are on the same line. */ margin: -1.3rem -1.3rem 18px; padding: 13px 1.3rem; border: 0; border-bottom: 1px solid var(--rf-line); border-left: 3px solid var(--rf-accent); border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0; background: color-mix(in srgb, var(--rf-accent) 5%, transparent); } [dir="rtl"] .cdp-recbar { border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0; } /* An empty answer holder is not a 16px gap. These sit under the header waiting for a message and spend most of their life with nothing in them. */ .card div[id^="resultados_ajax"]:empty { margin-bottom: 0 !important; } /* == THE TWO HUNDRED PIXELS BETWEEN THE FIRST CARD AND THE SECOND ======== The template gives the page's container a floor: .page-wrapper > .container-fluid { min-height: calc(100vh - 180px) } so a page with one short card still fills the window and the footer sits at the bottom instead of floating half way up. Reasonable, where the container IS the page. On the record screens it is not. courier_view, customer_packages_view and both consolidation views put the first card inside .container-fluid and then close it — tracking history, the user log, the item table, the sender and recipient panels are all SIBLINGS of the container, not children of it. So the floor was not holding a short page open. It was propping the first card open to the height of the viewport and leaving the difference, two hundred pixels of nothing, between it and the card underneath. On a shipment with no costs recorded it was nearer three hundred. The floor means something only when the container is the last thing on the page. Where content follows it, the content holds the page open. ANYTHING that follows it counts, not only a .row: these screens close the container and then carry on with a col, a section, a bare form, another container. What does NOT count is a modal (parked at the end of the page and never in flow), the footer (which is exactly what the floor exists to push down), or a script. */ .page-wrapper > .container-fluid:has(~ *:not(.modal):not(footer):not(.footer):not(script):not(style)) { min-height: 0; } /* AND THE BAND IS THE CARD'S HEADER, not a block inside its body. Where it is the only thing in that body — which is the shape on every record screen — the body's own bottom padding lands underneath it as well: 18px of the band's margin plus 1.3rem of the body's, close to forty pixels of blank card between the header and the first thing under it. That was the space showing between the first card and the one after it. The body's share is taken back, leaving the 18 the band asked for. */ .card-body > .cdp-recbar:only-child { margin-bottom: calc(18px - 1.3rem); } .cdp-recbar-id { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; } .cdp-recbar-kind { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-faint); } .cdp-recbar-no { font-family: var(--rf-font-heading); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; color: var(--rf-text); } /* The actions go to the far end, by margin. A float would take them out of the strip's flow and they would stop being part of the same line the moment the pills grew. */ .cdp-recbar-actions { margin-left: auto; } .cdp-recbar-actions .btn-group > .btn { white-space: nowrap; } [dir="rtl"] .cdp-recbar { border-left: 1px solid var(--rf-line); border-right: 3px solid var(--rf-accent); } [dir="rtl"] .cdp-recbar-actions { margin-left: 0; margin-right: auto; } /* On a phone the actions button takes the width it is given rather than sitting in a corner of its own. */ @media (max-width: 575.98px) { .cdp-recbar-actions { margin-left: 0; width: 100%; } .cdp-recbar-actions .btn-group { width: 100%; } } /* ── Quick filter chips (design package, Shipment Register) ──────────────── */ .cdp-chipbar { display: flex; flex-wrap: wrap; gap: 8px; } .cdp-chip { border: 1px solid var(--rf-line); background: transparent; color: var(--rf-muted); font-family: var(--rf-font-body); font-size: 12.5px; font-weight: 600; line-height: 1.4; padding: 5px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cdp-chip:hover { color: var(--rf-a200); border-color: color-mix(in srgb, var(--rf-accent) 40%, transparent); background: color-mix(in srgb, var(--rf-accent) 8%, transparent); } .cdp-chip.is-on { background: color-mix(in srgb, var(--rf-accent) 18%, transparent); border-color: color-mix(in srgb, var(--rf-accent) 46%, transparent); color: var(--rf-a100); } /* ── A ROW OF FORM FIELDS THAT FILLS THE WIDTH IT IS GIVEN ─────────────────── A Bootstrap row is a rigid twelve-column grid. Four col-md-4 fields is sixteen units: three sit on the first line and the fourth drops onto a line of its own with two thirds of it empty. Every settings and edit screen that reads as "scattered" is doing exactly that, and it is arithmetic rather than taste — a row whose widths do not tile leaves a hole. One class instead of hand-tuning each row's widths: the fields share the space equally and grow into whatever is left over, so the last line fills. 240px is the basis at which a label and its input stay readable; below that they wrap to fewer per line rather than being crushed. Applied only to rows of FIELDS. A row of cards sizes itself and is left alone — see .sw-row for those. */ .rf-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.25rem; margin-left: 0; margin-right: 0; } .rf-fields > [class*="col-"] { flex: 1 1 240px; min-width: 0; max-width: 100%; padding-left: 0; padding-right: 0; } /* A field that asked for the whole line still gets it. */ .rf-fields > .col-12:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) { flex: 1 1 100%; } @media (max-width: 575.98px) { .rf-fields > [class*="col-"] { flex: 1 1 100%; } } .footer { background: transparent; color: var(--rf-faint); border-top: 1px solid var(--rf-line); } /* == 4. Surfaces ========================================================== */ .card, .modal-content, .dropdown-menu, .popover, .list-group-item, .accordion .card { background-color: var(--rf-surface); border: 1px solid var(--rf-line); border-radius: var(--rf-radius-lg); color: var(--rf-text); box-shadow: none; } .card { box-shadow: var(--rf-shadow-sm); } .modal-content { box-shadow: var(--rf-shadow-lg); } .dropdown-menu { box-shadow: var(--rf-shadow-md); border-radius: var(--rf-radius-md); padding: 6px; } .card-header, .card-footer, .modal-header, .modal-footer { background-color: transparent; border-color: var(--rf-line); } .dropdown-item { color: var(--rf-text); border-radius: var(--rf-radius-sm); } .dropdown-item:hover, .dropdown-item:focus { background: color-mix(in srgb, var(--rf-accent) 14%, transparent); color: var(--rf-a100); } .dropdown-divider { border-color: var(--rf-line); } .modal-backdrop.show { opacity: .68; background: #05060c; } hr, .border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--rf-line) !important; } /* == 5. Data ============================================================== */ .table { color: var(--rf-text); border-color: var(--rf-line); } .table thead th { font-family: var(--rf-font-heading); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-muted); border-bottom: 1px solid var(--rf-divider); border-top: 0; background: transparent; } .table td, .table th { border-top-color: var(--rf-line); vertical-align: middle; } .table-striped tbody tr:nth-of-type(odd) { background-color: color-mix(in srgb, var(--rf-text) 3%, transparent); } /* ROW HOVER IS THE DEFAULT, not something a table opts into. Bootstrap makes it opt-in through .table-hover, and the class was written on most tables and forgotten on the rest — the Financial Sheet's own tables, the commercial invoice, the two locker-package summaries and the warehouse item list among them. So the same kind of list responded to the cursor on one screen and sat dead on the next. The row you are pointing at is a property of a table, not a decision per page. */ .table tbody tr:hover, .table-hover tbody tr:hover { background-color: color-mix(in srgb, var(--rf-accent) 10%, transparent); color: var(--rf-text); } /* Except where a row is not a row: a table used purely for layout inside a printed document, and the totals foot, have nothing to point at. */ .table tfoot tr:hover, .rf-no-hover tbody tr:hover { background-color: transparent; } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--rf-line); } /* DataTables chrome */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--rf-muted) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--rf-text) !important; border-radius: var(--rf-radius-sm); border: 1px solid transparent; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: color-mix(in srgb, var(--rf-accent) 18%, transparent) !important; border-color: color-mix(in srgb, var(--rf-accent) 40%, transparent) !important; color: var(--rf-a100) !important; } .page-link { background: transparent; border-color: var(--rf-line); color: var(--rf-text); } .page-item.active .page-link { background: var(--rf-accent); border-color: var(--rf-accent); color: #fff; } /* == 6. Controls ========================================================== */ .form-control, .custom-select, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, textarea.form-control { background-color: color-mix(in srgb, var(--rf-surface) 70%, transparent); border: 1px solid var(--rf-line); border-radius: var(--rf-radius-md); color: var(--rf-text); font-family: var(--rf-font-body); transition: border-color .15s, box-shadow .15s; } .form-control:focus, .custom-select:focus, .select2-container--default.select2-container--focus .select2-selection--multiple { background-color: color-mix(in srgb, var(--rf-surface) 88%, transparent); border-color: var(--rf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 22%, transparent); color: var(--rf-text); } .form-control::placeholder { color: var(--rf-faint); } .form-control:disabled, .form-control[readonly] { background-color: color-mix(in srgb, var(--rf-text) 6%, transparent); color: var(--rf-muted); } label, .col-form-label { color: var(--rf-muted); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--rf-text); } .select2-dropdown { background: var(--rf-surface); border-color: var(--rf-line); border-radius: var(--rf-radius-md); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: color-mix(in srgb, var(--rf-accent) 26%, transparent); color: var(--rf-a100); } .select2-container--default .select2-search--dropdown .select2-search__field { background: color-mix(in srgb, var(--rf-surface) 70%, transparent); border-color: var(--rf-line); color: var(--rf-text); } .btn { font-family: var(--rf-font-heading); font-weight: 500; border-radius: var(--rf-radius-md); letter-spacing: 0; transition: background .15s, border-color .15s, color .15s; } .btn-primary, .btn-info { background: var(--rf-accent); border-color: var(--rf-accent); color: #fff; } .btn-primary:hover, .btn-info:hover, .btn-primary:focus, .btn-info:focus { background: var(--rf-a500); border-color: var(--rf-a500); color: #fff; } /* .btn-default is Bootstrap 3's name for the neutral button. Bootstrap 4 dropped it, but the template kept a rule painting it a flat #2962FF — so seventy-three buttons across twenty-six screens are a blue that belongs to no palette, sitting beside the accent-coloured buttons they were meant to match. It is the same button as .btn-secondary and it is dressed like one. */ .btn-dark, .btn-secondary, .btn-default { background: color-mix(in srgb, var(--rf-accent) 88%, black); border-color: color-mix(in srgb, var(--rf-accent) 88%, black); color: #fff; } .btn-default:hover, .btn-default:focus { background: color-mix(in srgb, var(--rf-accent) 78%, black); border-color: color-mix(in srgb, var(--rf-accent) 78%, black); color: #fff; } .btn-success { background: var(--rf-ok); border-color: var(--rf-ok); color: #fff; } .btn-warning { background: var(--rf-warn); border-color: var(--rf-warn); color: #16181d; } .btn-danger { background: var(--rf-bad); border-color: var(--rf-bad); color: #fff; } .btn-light { background: color-mix(in srgb, var(--rf-text) 8%, transparent); border-color: var(--rf-line); color: var(--rf-text); } .btn-outline-dark, .btn-outline-secondary, .btn-outline-primary { background: transparent; border-color: var(--rf-line); color: var(--rf-text); } .btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover { background: color-mix(in srgb, var(--rf-accent) 14%, transparent); border-color: var(--rf-accent); color: var(--rf-a100); } .btn-link { color: var(--rf-a300); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--rf-accent); border-color: var(--rf-accent); } .custom-control-label::before { background-color: color-mix(in srgb, var(--rf-surface) 70%, transparent); border-color: var(--rf-line); } /* Superseded by section 31, which draws these controls rather than relying on accent-color — which only ever paints the checked state. */ .nav-tabs { border-bottom-color: var(--rf-line); } .nav-tabs .nav-link { color: var(--rf-muted); border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0; } .nav-tabs .nav-link.active { background: transparent; border-color: var(--rf-line) var(--rf-line) transparent; color: var(--rf-a200); } /* Pills were never themed: the template paints an inactive .nav-link black, which disappears on the dark ground (the customer dashboard's Pre Alert / Registered Packages pills, the customer 360 tabs). */ .nav-pills .nav-link:not(.active) { color: var(--rf-muted); } .nav-pills .nav-link:not(.active):hover { color: var(--rf-text); } .input-group-text { background: color-mix(in srgb, var(--rf-text) 6%, transparent); border-color: var(--rf-line); color: var(--rf-muted); } /* == 7. Status ============================================================ */ .badge-primary { background: color-mix(in srgb, var(--rf-accent) 22%, transparent); color: var(--rf-a200); } .badge-success { background: color-mix(in srgb, var(--rf-ok) 20%, transparent); color: var(--rf-ok); } .badge-warning { background: color-mix(in srgb, var(--rf-warn) 20%, transparent); color: var(--rf-warn); } .badge-danger { background: color-mix(in srgb, var(--rf-bad) 20%, transparent); color: var(--rf-bad); } .badge-info { background: color-mix(in srgb, var(--rf-info) 20%, transparent); color: var(--rf-info); } /* A count badge is a figure someone is meant to read, so it takes full-strength text: muted grey on a 10% wash of the same grey was barely legible. */ .badge-light, .badge-secondary { background: color-mix(in srgb, var(--rf-text) 14%, transparent); color: var(--rf-text); } .alert { border-radius: var(--rf-radius-md); border-width: 1px; } .alert-success { background: color-mix(in srgb, var(--rf-ok) 14%, transparent); border-color: color-mix(in srgb, var(--rf-ok) 38%, transparent); color: var(--rf-ok); } .alert-warning { background: color-mix(in srgb, var(--rf-warn) 14%, transparent); border-color: color-mix(in srgb, var(--rf-warn) 38%, transparent); color: var(--rf-warn); } .alert-danger { background: color-mix(in srgb, var(--rf-bad) 14%, transparent); border-color: color-mix(in srgb, var(--rf-bad) 38%, transparent); color: var(--rf-bad); } .alert-info { background: color-mix(in srgb, var(--rf-info) 14%, transparent); border-color: color-mix(in srgb, var(--rf-info) 38%, transparent); color: var(--rf-info); } /* helpers/pills.php — the status vocabulary. It sets its own hue inline; this only settles the shape and weight. */ .cdp-pill { font-family: var(--rf-font-heading); font-weight: 600; border-radius: 999px; letter-spacing: .01em; } /* == 8. Third-party chrome ================================================ */ .swal2-popup { background: var(--rf-surface) !important; color: var(--rf-text) !important; border-radius: var(--rf-radius-lg) !important; border: 1px solid var(--rf-line); font-family: var(--rf-font-body); } .swal2-title { color: var(--rf-text) !important; font-family: var(--rf-font-heading); } .swal2-html-container { color: var(--rf-text) !important; font-family: var(--rf-font-body); } .swal2-styled.swal2-confirm { background: var(--rf-accent) !important; border-radius: var(--rf-radius-md) !important; } .swal2-styled.swal2-cancel { background: color-mix(in srgb, var(--rf-text) 14%, transparent) !important; color: var(--rf-text) !important; border-radius: var(--rf-radius-md) !important; } .swal2-input, .swal2-select, .swal2-textarea { background: color-mix(in srgb, var(--rf-surface) 70%, transparent) !important; border: 1px solid var(--rf-line) !important; color: var(--rf-text) !important; } .apexcharts-text, .apexcharts-legend-text, .apexcharts-title-text { fill: var(--rf-muted) !important; color: var(--rf-muted) !important; font-family: var(--rf-font-body) !important; } .apexcharts-gridline { stroke: var(--rf-line) !important; } .apexcharts-tooltip { background: var(--rf-surface) !important; border: 1px solid var(--rf-line) !important; color: var(--rf-text) !important; box-shadow: var(--rf-shadow-md) !important; } .apexcharts-tooltip-title { background: color-mix(in srgb, var(--rf-text) 6%, transparent) !important; border-bottom-color: var(--rf-line) !important; } /* Native date/number pickers follow the ground rather than the OS default. */ input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { color-scheme: inherit; } /* == 9. Scrollbars ======================================================== */ * { scrollbar-color: color-mix(in srgb, var(--rf-text) 22%, transparent) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rf-text) 18%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--rf-accent) 50%, transparent); background-clip: content-box; } /* == 10. The financial-permission mask ==================================== */ .rf-fin { filter: blur(var(--fin-blur, 0px)); opacity: var(--fin-op, 1); pointer-events: var(--fin-pe, auto); transition: filter .3s, opacity .3s; } /* == 11. Print ============================================================ Documents (labels, receipts, invoices, manifests) are measured to fit a physical sheet and must stay black on white. The theme is a screen concern only. */ @media print { :root, html[data-rf-theme="dark"], html[data-rf-theme="light"] { --rf-bg: #fff; --rf-surface: #fff; --rf-text: #000; --rf-line: #ddd; --rf-muted: #444; --rf-faint: #777; --rf-page: #fff; color-scheme: light; } body { background: #fff !important; color: #000 !important; } .card, .modal-content { box-shadow: none !important; border-color: #ddd !important; } } /* == 12. Shared controls introduced with the new design =================== Small pieces of chrome that more than one screen needs. They live here rather than in each page's