/* =========================================================================== ca-pages-2.css - the stock WHMCS/Nexus client-area pages, in the platform's layout language. SUPERSEDES ca-pages-1.css. Sections 1 to 10 below are that file, byte for byte; sections 10.x, 20.x, 30.x and 40.x after them are new. ca-pages-1.css is deliberately LEFT IN PLACE and unchanged: Cloudflare caches /_v4css by PATH and ignores ?v=, so publishing means a new filename, and keeping the old one means a rollback is a one-line repoint of header.tpl rather than a redeploy of content. header.tpl links exactly one of the two. WHAT IS IN HERE 0 THE ACCENT PLATE - the one construction this file uses wherever it paints something in the accent, and the proof that no single fill colour can serve all four mode x accent combinations. Read it before changing any accent-coloured rule: 20.8, 40.4, 50.2 and 50.6 all spend it and a per-rule patch to any of them will fail in the mode it was not measured in. 1 - 10 content column, page header, page actions, breadcrumb, list tables, status pills, dataTables toolbar and pager, loading state, narrow screens. (was ca-pages-1.css) 10.1-10.9 cards, card headers/bodies/titles/footers, wells, content list-groups. 20.1-20.14 forms: field rhythm and captions, control surface, the missing select caret, focus, placeholder/disabled/readonly, textarea, checkboxes and radios, input groups, file input, help text, validation, narrow screens. (20.13, the markdown editor, is a deleted stub that records why it went and what it leaves open.) 30.1-30.11 buttons and content links: base, primary, quiet, semantic, link buttons, sizes, in-card buttons, button groups, disabled, content links, narrow screens. 40.1-40.10 feedback and disclosure: alerts and their variants and links, tab strip, tab panels, modals, close button, progress meter, empty state, narrow screens. 50.1-50.7 LIVE-BEHAVIOUR CORRECTIONS. Unlike the additive sections above, these change colours that are on screen in production today: the ticket status pills, the rail's active pill, the two de-emphasis ink tokens used as running text, the date column's alignment, the primary button inside a card, and the hovered ticket subject. Separated so they can be rolled back on their own. 60 LIVE-LAYOUT CORRECTION, separated the same way and with its own one-line rollback: below 768px the list table's header row and its body rows are laid out as two independent table boxes and stop agreeing about where the columns are. Pre-existing - it renders identically under ca-pages-1.css - and it is on five pages. Within sections 10 to 50, a BARE "section N" in a comment always names one of sections 1-10, never a numbered subsection. Why a separate file and not more of ivo-chrome-6.css: chrome-6 is the SHARED shell (sidebar, topbar, burger) and loads on the SPA too. Everything here styles the CONTENT of a WHMCS page, so it loads only on client-area pages, behind the same {if $smarty.get.m != 'ivo'} guard as ca-v4-6 / ca-theme-7. It is linked LAST, so it wins on load order; !important appears only where a host rule (Bootstrap, Lagom, Nexus theme.min.css, whmcs-skin-11.css, ca-v4-6.css, ca-theme-7.css) already pins the property, and every use names the declaration it is overriding at the rule that spends it. Scope: body.ivo-ca-chrome, on every rule without exception. header.tpl:79 sets that class only when ($loggedin && !$inShoppingCart && get.m != 'ivo' && a sidebar has children), so cart, login, register and every SPA route render without the shell and keep the stock Nexus treatment untouched. Colour: every value comes from the #main-body token set ca-v4-6.css defines for BOTH modes (--panel, --panel-2, --line, --line-2, --ink..--ink-4, --accent, --accent-bg, --accent-text, --accent-line, --green/--amber/--red + -bg/-ink) and ca-theme-7.css re-points for the four mode x accent combinations, from the brand tokens ivo-tokens-6.css declares on :root (--ivo-accent, --ivo-btn-radius, --ivo-radius-sm, --ivo-btn-pad*), or from .ivo-ca-shell's --ivo-title / --ivo-kicker for the parts that sit OUTSIDE #main-body and therefore cannot see those tokens. The only literal colour in the whole file is the one #fff on an accent fill in section 6. That is why no rule is duplicated for dark mode: the tokens already carry the mode. Three tokens are NOT mode-aware and are never used as a text colour ANYWHERE IN THIS FILE, as of 2026-09-18: --green-ink, --amber-ink and --red-ink are declared once on #main-body, neither ca-theme-7.css block re-points them, and on a light surface they measure 1.36 to 2.78:1. Where a semantic hue has to carry text or an edge, it is mixed into --ink - color-mix(in srgb, var(--BASE) N%,var(--ink)) - which inherits the mode from --ink. 30.4, 40.2 and 40.4 each record the measurement for their own mix. That sentence was FALSE when this file first shipped and is now true. 20.12 used --red-ink as a validation message (2.78:1 on a light panel, against the 5.89:1 the stock #c00 renders today - a regression) and section 6 used --green-ink and --amber-ink as a status-pill label (1.48:1 and 1.36:1). The first is corrected in 20.12; the second is a LIVE-BEHAVIOUR change and is corrected in SECTION 50, at the end of this file, which has its own rollback. SECTIONS 50 AND 60 ARE DIFFERENT FROM THE REST and are worth knowing about before reading any of them: they are the only parts of this file that change something already on screen in production, rather than adding treatment to something that had none - 50 a colour, 60 a layout. Each banner lists what it overrides and how to roll it back on its own. CORRECTED 2026-09-18: this paragraph, and section 50's own banner, both used to say that EVERY other section merely adds treatment. That was false in two places at once, and both were found by rendering rather than by reading - section 5's `a:hover .ticket-subject`, which is live and is now corrected in 50.7, and section 10's narrow-screen table block, which is live and is now corrected in section 60. Cloudflare caches /_v4css by PATH and ignores ?v=: RENAME to publish. =========================================================================== */ /* =========================================================================== SECTION 0 - THE ACCENT PLATE The one construction this file uses wherever it paints something IN the accent. Added 2026-09-18, after a sweep found the same defect in four unrelated rules pulling in two opposite directions. THE DEFECT IT REPLACES. --ivo-accent, --ivo-accent-deep and --ivo-accent-ink are declared once on :root in ivo-tokens-6.css (lines 33-35 blue, 38-39 coral) and NEITHER ca-theme-7.css BLOCK RE-POINTS THEM PER MODE. --accent is the same: ca-theme-7.css:70-71 re-points it per ACCENT and never per MODE. So every one of them is a single colour that has to work against a #161d2e card AND against a #ffffff-over-aurora card. Any rule that paints one of them as a FILL is therefore tuned for one mode and wrong in the other, and the two directions cancel in a worst-of-four sweep, which is how four of them shipped: 50.6 hovered in-card primary --ivo-accent-deep dark 2.51 / 2.91 light 5.94 / 5.37 50.2 active rail chip --ivo-accent dark 2.80 / 3.39 light 4.05 / 3.62 20.8 checked box and radio --accent dark 5.31 / 5.57 light 2.84 / 2.82 40.4 active tab --accent-bg tint 1.22 / 1.17 / 1.14 / 1.14 (order everywhere in this file: dark/blue dark/coral light/blue light/coral.) WHY THE FIX IS NOT "ONE MODE-AWARE FILL". It cannot be. An accent fill in this file carries a #fff label, so it has to satisfy two bounds at once: >= 3:1 against the surface behind it (1.4.11) and >= 4.5:1 for the label on it (1.4.3). Rendered and pixel-sampled, for F = color-mix(in srgb,var(--ivo-accent) P%,var(--ink)) - the only mix that inherits the mode, because --ink is the mode's own extreme - the worst of the four combinations is: P=100 fill vs card 3.25 fill vs page 2.80 #fff on fill 4.52 P=95 fill vs card 3.52 fill vs page 3.04 #fff on fill 4.20 P=90 fill vs card 3.83 fill vs page 3.30 #fff on fill 3.90 The two bounds cross between P=95 and P=100 and NEVER overlap: lightening the fill enough to clear 3:1 on the page in dark mode is exactly what pushes #fff under 4.5:1 in dark/coral, where --ivo-accent #c4533c starts at 4.52:1 with no headroom at all. There is no P. A "mode-aware fill" is not a smaller version of this fix, it is an impossible one, and this paragraph exists so the next sweep does not spend a round rediscovering that. THE CONSTRUCTION. A plate keeps the brand fill and moves its BOUNDARY into the one declaration that is free to be mode-aware - the border: background: var(--ivo-accent) (hover: var(--ivo-accent-deep)) border-color: var(--ca-plate-edge) color: #fff WHAT IS NOT A PLATE, AND THE ONE THAT WAS MISSED. Four rules take the plate: 20.8 (the checked checkbox, as an outline), 40.4 (.nav-tabs .nav-link.active), 50.2 (the active rail chip) and 50.6 (the in-card primary button). 40.6 paints an accent BAND - a whole modal header - rather than a plate, so it takes no edge. That distinction is real, but listing only the four hid a fifth surface that has the SAME problem for a different reason, and the sixth review caught it: ivo-tokens-6.css:291-298 draws every `button:focus-visible` in `outline:2px solid var(--ivo-accent)`, which on an --ivo-accent band is 1:1 and invisible. So any rule that fills a surface with the raw accent must also say what happens to a focus ring drawn ON that surface, whether or not it is a plate. 40.6 now does; see the repair note there. --ca-plate-edge is the accent moved 45 percent toward --ink, so it is a light accent in dark mode and a deep one in light mode, and it out-contrasts every surface this file paints a plate on. Rendered, sampled from the pixels: edge vs the card (--panel) 6.86 7.50 8.48 8.03 edge vs the page (--bg) 5.91 6.65 7.51 7.12 edge vs an alert tint 5.04 5.43 8.16 7.69 edge vs its own fill 2.11 1.96 1.85 1.97 The worst number in the block is 5.04:1 against a 3:1 floor, in every combination, on every surface this file paints a plate on. The edge is also visible against the fill it rings (1.85 worst), so the plate reads as a plate and not as a flat blob. Every one of these is a pixel sample; where the edge pixel could be read without anti-aliasing it came back EXACTLY equal to the cascade's computed value - rgb(130,165,240) in dark/blue against a computed color(srgb 0.508627 0.645882 0.942745) - so the two agree and the numbers above are taken from the cascade colour against a sampled surface. #fff on the fill is untouched at 5.17 / 4.52 / 5.17 / 4.52, and on the hover fill 6.70 / 5.94 / 6.70 / 5.94. THAT A 1px BORDER IS A BOUNDARY IS NOT A CONVENIENCE. It is the same reading 30.4 already ships and both reviewers already accepted for the semantic buttons: a tinted button's affordance is its border, not its fill. 1.4.11 asks for the visual information needed to identify the component and its state at 3:1; it sets no thickness. Every control that takes a plate here ALREADY declared a 1px border (Bootstrap's .btn is `border:1px solid transparent`, the rail chip sets its own), so no plate changes a metric. WHERE A CONTROL HAS NO BORDER TO GIVE. Chromium ignores `border` on a native checkbox: with `accent-color` the UA draws the box itself. The edge is spent as an `outline` there instead, which is painted by the BOX rather than by the widget and does render - verified in the pixels, rgb(130,165,240) in dark/blue, the same value the border carries on every other plate. The fill still moves to --ivo-accent for the same reason as everywhere else. EVERY RULE THAT USES THE PLATE, so a future change has one list to walk: 20.8 .form-check-input fill + edge, the edge as an `outline` 40.4 .nav-tabs .nav-link.active edge only (the fill stays the --accent-bg tint the .ca-side-a.on look is built on) 50.2 the active rail chip fill + edge + #fff 50.6 the in-card primary button fill + edge + #fff, base and hover Nothing else in this file paints an accent fill; the sweep that produced this section checked all 317 selectors. WHY A CUSTOM PROPERTY AND NOT A REPEATED color-mix(). Four rules spending the same expression is four places to drift. The name is NEW - nothing outside this file reads --ca-plate-edge and no existing token is re-pointed - so the "rules only, no token definitions" note in header.tpl still holds in the sense it was written: this file still takes no brand token with it, and deleting this block deletes only this file's own construction. =========================================================================== */ body.ivo-ca-chrome #main-body{ --ca-plate-edge:color-mix(in srgb,var(--ivo-accent) 55%,var(--ink))} /* ── 1. Content column ───────────────────────────────────────────────────── The shell column is 1201px wide and the page inside it was 855px, with 285px of nothing to its right. Cause: header.tpl does not BUILD the left rail when the chrome renders (the chrome replaces it), but .primary-content kept the col-lg-8 col-xl-9 classes that reserve the rail's 3/12. The template now emits col-12 in that case; these rules are the belt for a compiled template that still carries the old classes, and they also unwind Bootstrap's fixed .container so the page runs the full width of the shell. 32px of side padding is not a taste value: .ivo-topbar sits exactly 32px in from the shell column's edge, so this lines every page's content up with the search bar above it. #main-body's own 18px + .container's 15px gutter used to land content at 31px on the left and 47px on the right - visibly off-centre against the topbar. */ body.ivo-ca-chrome #main-body{padding-left:32px;padding-right:32px} body.ivo-ca-chrome #main-body > .container, body.ivo-ca-chrome .ivo-ca-head > .container, body.ivo-ca-chrome nav.master-breadcrumb > .container{max-width:none;width:100%;padding-left:0;padding-right:0} body.ivo-ca-chrome .ivo-ca-head{padding-left:32px;padding-right:32px} body.ivo-ca-chrome nav.master-breadcrumb{padding-left:32px;padding-right:32px} body.ivo-ca-chrome #main-body > .container > .row{margin-left:0;margin-right:0} body.ivo-ca-chrome #main-body .row > .primary-content{flex:0 0 100%;max-width:100%;padding-left:0;padding-right:0} /* ── 2. Page header ──────────────────────────────────────────────────────── The title row becomes the SPA's header row: title left, room for a trailing action. .ivo-ca-head already carries the title (ivo-chrome-6.css); this only turns its container into the flex row it needs to be. */ body.ivo-ca-chrome .ivo-ca-head > .container{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 16px} /* ── 3. Page actions ─────────────────────────────────────────────────────── Nexus puts every page-specific action in a "secondary sidebar" that this theme marks .d-lg-none - a rail meant for small screens only, because on large screens the LEFT rail carried the same links. The chrome removed the left rail, so from lg up those actions were reachable from nowhere at all: measured live on supporttickets.php, the only "Open Ticket" link on the page was this one, at width 0. Rather than hide it further, it becomes the platform's filter-chip row: one horizontal strip of pills above the content, current page filled with the accent. order:-1 is what lifts it above .row - it is a SIBLING of the content row in the DOM (footer.tpl emits it after), so the flex column on .container is the only way to put it first without moving markup. */ /* Only from lg up, because that is the only place something was missing: below lg Bootstrap already shows this rail, in its stock position after the content, and moving it would take a working layout away from phone users to fix a desktop problem. Only NAVIGATION lifts. The rail also carries promo/media cards (Website Backup, MarketGoo on the services page); those were hidden at lg+ before and stay hidden, because promoting them turns a hidden aside into the loudest thing above the page. :has(.list-group) is what tells the two apart. */ @media(min-width:992px){ body.ivo-ca-chrome #main-body > .container{display:flex;flex-direction:column} body.ivo-ca-chrome #main-body .sidebar-secondary{display:block!important;order:-1;margin:0 0 18px} body.ivo-ca-chrome #main-body .sidebar-secondary .card-sidebar:not(:has(.list-group)){display:none} } /* !important throughout this block is measured, not defensive: whmcs-skin-11 and Bootstrap pin .card background/border and .list-group-item.active's fill, and a later rule of equal specificity does not beat !important. :has(.list-group) again: a promo card still renders as a card. */ body.ivo-ca-chrome #main-body .sidebar-secondary .card-sidebar:has(.list-group){ background:transparent!important;border:0!important;box-shadow:none!important; border-radius:0!important;margin:0} body.ivo-ca-chrome #main-body .sidebar-secondary .card-sidebar:has(.list-group) .card-header{background:transparent;border:0;padding:0 0 8px} body.ivo-ca-chrome #main-body .sidebar-secondary .card-sidebar:has(.list-group) .card-title{ font-size:11px;font-weight:700;letter-spacing:.88px;text-transform:uppercase;color:var(--ink-4)} body.ivo-ca-chrome #main-body .sidebar-secondary .card-sidebar:has(.list-group) .collapsable-card-body{padding:0;display:block!important;height:auto!important} body.ivo-ca-chrome #main-body .sidebar-secondary .list-group{ display:flex;flex-direction:row;flex-wrap:wrap;gap:8px; background:transparent!important;border:0!important;border-radius:0!important} body.ivo-ca-chrome #main-body .sidebar-secondary .list-group-item{ flex:0 0 auto;width:auto; display:inline-flex;align-items:center;gap:7px; padding:7px 14px!important; border:1px solid var(--line)!important;border-radius:999px!important; background:var(--panel)!important;color:var(--ink-2)!important; font-size:12.5px;font-weight:600;line-height:1.2; text-decoration:none} body.ivo-ca-chrome #main-body .sidebar-secondary .list-group-item:hover{ background:var(--panel-2)!important;color:var(--ink)!important} body.ivo-ca-chrome #main-body .sidebar-secondary .list-group-item.active{ background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important} body.ivo-ca-chrome #main-body .sidebar-secondary .list-group-item i{font-size:12px;opacity:.85} /* The chevrons Nexus draws on a vertical rail read as noise in a pill row, and .card-minimise collapses a card that no longer looks like one. */ body.ivo-ca-chrome #main-body .sidebar-secondary .list-group-item > i.fa-chevron-right, body.ivo-ca-chrome #main-body .sidebar-secondary .list-group-item > .float-right, body.ivo-ca-chrome #main-body .sidebar-secondary .card-minimise{display:none} /* ── 4. Table card ───────────────────────────────────────────────────────── ca-dash-rebuild.css already gives .table-container the glass card. What it does not do is let the table breathe inside it, so the header row sat flush against the card's rounded corner. */ body.ivo-ca-chrome #main-body .table-container{padding:0;overflow:hidden} /* The wrapper carries no padding: the table has to reach both card edges so its header band reads as a band. The toolbar and footer rows below pad themselves instead. Negative margins on the table were tried first and do not work - DataTables pins table.dataTable's horizontal margins. */ body.ivo-ca-chrome #main-body .table-container .dataTables_wrapper{padding:0} /* ── 5. Table ────────────────────────────────────────────────────────────── Nexus centres every cell in .table-list. Centred text in a scan-down list is the single loudest "this is not the platform" signal: the eye has no left edge to follow. Everything goes left except the deliberate exceptions below. Column widths keep the subject - the only column anyone reads - dominant. */ /* The table draws its own 1px border and 8px radius, which reads as a second card outline once it sits inside one. */ body.ivo-ca-chrome #main-body .table-container .table-list{border:0!important;border-radius:0!important} body.ivo-ca-chrome #main-body .table-list th, body.ivo-ca-chrome #main-body .table-list td{text-align:left;vertical-align:middle} body.ivo-ca-chrome #main-body .table-list thead th{ padding:9px 14px; font-size:10.5px;font-weight:700;letter-spacing:.72px;text-transform:uppercase; border-top:0!important;white-space:nowrap} body.ivo-ca-chrome #main-body .table-list tbody td{padding:13px 14px;font-size:13.5px;border-top:1px solid var(--line)!important} body.ivo-ca-chrome #main-body .table-list tbody tr:first-child td{border-top:0!important} /* The rows carry an onclick in the template, so they have to say so. */ body.ivo-ca-chrome #main-body .table-list tbody tr{cursor:pointer;transition:background .12s ease} /* Nexus hangs a 1px rule off the subject link to fake a column divider. Inside a card with real row separators it reads as a stray mark. */ body.ivo-ca-chrome #main-body .table-list a.border-left{border-left:0!important;padding-left:0!important;display:block} body.ivo-ca-chrome #main-body .table-list .ticket-number{ display:block;font-size:11.5px;font-weight:600;color:var(--ink-4);letter-spacing:.02em;margin-bottom:1px} body.ivo-ca-chrome #main-body .table-list .ticket-subject{ display:block;font-size:13.5px;font-weight:500;color:var(--ink)} body.ivo-ca-chrome #main-body .table-list .ticket-subject.unread{font-weight:700} body.ivo-ca-chrome #main-body .table-list a:hover .ticket-subject{color:var(--accent-text)} /* Department is a secondary fact, not a heading. */ body.ivo-ca-chrome #main-body .table-list tbody td:first-child{color:var(--ink-3);white-space:nowrap} /* The date column reads better right-aligned against the card edge; the template already marks it .text-center, which is neither. */ body.ivo-ca-chrome #main-body .table-list td.text-center:last-child, body.ivo-ca-chrome #main-body .table-list th:last-child{text-align:right;color:var(--ink-3);white-space:nowrap} /* Auto table layout hands every column a share of the slack, which is why a one-word Department column was 213px wide and the subject - the only column anyone reads - wrapped to three lines. width:1% + nowrap is the standard way to shrink a cell to its content; the remaining column absorbs the rest. :has() picks the status cell without hard-coding a column index, so an invoice table with its status in a different position gets the same result. */ body.ivo-ca-chrome #main-body .table-list th:first-child, body.ivo-ca-chrome #main-body .table-list td:first-child, body.ivo-ca-chrome #main-body .table-list th:last-child, body.ivo-ca-chrome #main-body .table-list td:last-child{width:1%;white-space:nowrap} body.ivo-ca-chrome #main-body .table-list td:has(> .label.status){width:1%;white-space:nowrap} /* DataTables draws its sort arrows absolutely at the cell's right edge, so a right-aligned header ran its text under them. */ body.ivo-ca-chrome #main-body .table-list thead th.sorting, body.ivo-ca-chrome #main-body .table-list thead th.sorting_asc, body.ivo-ca-chrome #main-body .table-list thead th.sorting_desc{padding-right:26px} /* ── 6. Ticket status pills ──────────────────────────────────────────────── ca-dash-rebuild.css colours the billing statuses (active/paid/unpaid) and leaves every ticket status on the neutral grey fallback, so an Open ticket and a Closed one looked identical. WHMCS lowercases the status into the class and strips spaces to a dash, hence the compound names. Custom statuses keep their admin-chosen colour: .status-custom carries an inline background and is deliberately not matched here. */ body.ivo-ca-chrome #main-body .label.status-open, body.ivo-ca-chrome #main-body .label.status-in-progress{ background:var(--green-bg)!important;color:var(--green-ink)!important; border:1px solid color-mix(in srgb,var(--green) 30%,transparent)!important} body.ivo-ca-chrome #main-body .label.status-answered, body.ivo-ca-chrome #main-body .label.status-customer-reply, body.ivo-ca-chrome #main-body .label.status-on-hold{ background:var(--amber-bg)!important;color:var(--amber-ink)!important; border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)!important} body.ivo-ca-chrome #main-body .label.status-closed{ background:var(--panel-2)!important;color:var(--ink-3)!important; border:1px solid var(--line)!important} /* ── 7. DataTables toolbar ───────────────────────────────────────────────── "dom": '<"listtable"fit>pl' puts filter + info + table in one box and the pager + length menu after it. Laid out as the platform's toolbar: count on the left, search on the right, one rule under them. */ body.ivo-ca-chrome #main-body .listtable{display:flex;flex-wrap:wrap;align-items:center} body.ivo-ca-chrome #main-body .dataTables_info{ order:1;margin:0 auto 0 0;padding:14px 8px 12px 16px;font-size:12.5px;color:var(--ink-3);border:0} body.ivo-ca-chrome #main-body .dataTables_filter{order:2;margin:0;padding:14px 16px 12px 8px;float:none;text-align:right} body.ivo-ca-chrome #main-body .dataTables_filter label{margin:0;width:100%} body.ivo-ca-chrome #main-body .dataTables_filter input{ width:230px;max-width:100%;margin:0;padding:7px 13px;font-size:13px;border-radius:999px!important} body.ivo-ca-chrome #main-body .listtable > .table-list, body.ivo-ca-chrome #main-body .listtable > table{order:3;flex:0 0 100%;width:100%;margin:0} /* ── 8. Pager + page size ────────────────────────────────────────────────── One footer row: page size left, pager right, both in platform pills. */ body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_length{ float:none;margin:0;padding:12px 16px 14px;font-size:12.5px;color:var(--ink-3)} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_paginate{ float:none;margin:0;padding:12px 16px 14px} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_length, body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_paginate{display:inline-block;vertical-align:middle} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_paginate{float:right} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_length select{ display:inline-block;width:auto;padding:4px 8px;border-radius:8px!important;font-size:12.5px} body.ivo-ca-chrome #main-body .pagination{margin:0;gap:4px} body.ivo-ca-chrome #main-body .pagination .page-link{ border-radius:8px!important;padding:5px 11px;font-size:12.5px;font-weight:600;border:1px solid var(--line)!important} /* ── 9. Loading state ────────────────────────────────────────────────────── #tableLoading sits inside the card and inherited the stock centred paragraph with no padding, so a slow table flashed a bare line of text. */ body.ivo-ca-chrome #main-body #tableLoading{padding:28px 0;color:var(--ink-3);font-size:13px} /* ── 10. Narrow screens ──────────────────────────────────────────────────── The 32px topbar inset is a desktop measurement; the shell drops its own padding on mobile, so the content follows it in. */ @media(max-width:768px){ body.ivo-ca-chrome #main-body{padding-left:16px;padding-right:16px} body.ivo-ca-chrome .ivo-ca-head, body.ivo-ca-chrome nav.master-breadcrumb{padding-left:16px;padding-right:16px} body.ivo-ca-chrome #main-body .dataTables_info{padding:12px 12px 10px} body.ivo-ca-chrome #main-body .dataTables_filter{flex:0 0 100%;padding:0 12px 12px;text-align:left} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_length, body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_paginate{padding:10px 12px 12px} body.ivo-ca-chrome #main-body .table-list thead th, body.ivo-ca-chrome #main-body .table-list tbody td{padding-left:12px;padding-right:12px} /* A four-column list does not fit 390px and DataTables' Responsive extension is not loaded here (measured: the columns are simply clipped). The table becomes its own horizontal scroller rather than the card, so the toolbar and pager stay put while the rows slide. */ body.ivo-ca-chrome #main-body .table-container{overflow:hidden} body.ivo-ca-chrome #main-body .listtable > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} body.ivo-ca-chrome #main-body .listtable > table > thead, body.ivo-ca-chrome #main-body .listtable > table > tbody{display:table;width:100%;min-width:520px} body.ivo-ca-chrome #main-body .dataTables_filter input{width:100%} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_length, body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_paginate{display:block;float:none;text-align:center} body.ivo-ca-chrome #main-body .dataTables_wrapper > .dataTables_paginate{margin-top:10px} body.ivo-ca-chrome #main-body .pagination{justify-content:center;flex-wrap:wrap} } /* =========================================================================== SECTION 10 - CARDS, WELLS AND CONTENT LIST-GROUPS Stock Bootstrap cards, wells and content list-groups, in the platform's surface language. WHAT THIS COVERS .card / .card-header / .card-body / .card-title / .card-footer are the main content container on every stock page that sections 1-10 above do not already reach: clientareadetails, clientareadomaindetails (19 cards), user-password, user-profile, user-security, account-contacts-*, account-user-management, masspay, serverstatus, viewquote, viewticket, configuressl-*, the supportticketsubmit-* steps, the two-factor pages. Verified by class, per template, over templates/nexus/*.tpl minus the 17 files templates/ivo-nexus overrides - see the note on each subsection for the exact file and line. WHAT WAS ALREADY THERE, AND IS THEREFORE NOT REPEATED HERE Three files already touch a content card, and between them they cover more than the brief assumed. Re-declaring what they set would be noise, and in one case a regression: - header.tpl's inline block pins `#main-body .card{border-radius:16px!important}` and the two top corners on .card-header. Radius is settled; nothing below sets it on a card. - ca-theme-7.css:22-23 pins `#main-body .card{background:var(--panel)!important}`, so the fill is already the panel surface in all four mode x accent combinations. Nothing below sets a card background. - ivo-chrome-6.css:604-614 gives `.ivo-ca-shell #main-body .card` the SPA's own elevation, `box-shadow:var(--ivo-elev)`, plus overflow:hidden. That is deliberate: header.tpl:58-61 records that inside the chrome a surface must carry --ivo-elev and NOT the flat/ca-card shadow, or the two halves of the product read as two products. So this section does not set box-shadow at all, even though .ca-card has one. What was genuinely missing was everything INSIDE the card - header, body, title and footer padding and typography - plus the card's border colour, which ivo-chrome-6 asks for as var(--line) but does not win (see 10.1). REFERENCE LOOK .ca-card / .ca-card-h / .ca-card-b in ca-v4-6.css:37-40. This section matches their measurements (header 15px 20px + hairline + panel-2 gradient, body 20px, title 15px) rather than inventing a second card style. The one deliberate divergence is the header's display mode, explained in 10.2. SCOPE body.ivo-ca-chrome #main-body .primary-content. Two guards, both load-bearing: - body.ivo-ca-chrome is set only on a logged-in, non-cart, non-SPA page with at least one sidebar (header.tpl:79), so cart, login, register and every ?m=ivo route keep the stock treatment untouched. - .primary-content is what keeps these rules off the secondary sidebar's cards. ivo-nexus/footer.tpl:2-8 closes .primary-content AND its .row before emitting .sidebar-secondary, so the sidebar is a SIBLING of the row and can never be a descendant of .primary-content. Section 3 above relies on the same fact when it lifts that rail with order:-1. A :not(.card-sidebar) belt is added in 10.1 anyway, for a compiled template that ever nests the include differently. Two rules in 10.6 additionally exclude `.client-home-cards *`: the dashboard's home panels are inside .primary-content and ca-v4-6.css:168-173 already gives their list rows a borderless, radiused, hover-lit treatment that a hairline row separator would visibly break. COLOUR Every value is a #main-body token (ca-v4-6.css defines them, ca-theme-7.css re-points them per mode x accent). There is not one literal colour in this section, not even the #fff that this file permits on an accent fill, because nothing here is an accent fill. That is why no rule is duplicated for dark mode: the tokens already carry the mode. =========================================================================== */ /* -- 10.1 The card surface ------------------------------------------------- The only thing about the card box itself that is still wrong. ivo-chrome-6 .css:611 asks for `border:1px solid var(--line)` on a chrome-page card, but whmcs-skin-11.css:21-23 pins `#main-body .card{border:1px solid var(--w-line) !important}` and !important beats a later plain declaration, so every content card draws the WHMCS-skin line (#2b303a in dark) instead of the platform's (rgba(255,255,255,.08)). Against a --panel fill that reads as a heavier, greyer outline than the same card in the SPA. !important is therefore measured, not defensive: it overrides exactly one host declaration, whmcs-skin-11.css:21-23's border on #main-body .card. margin-bottom: theme.min.css gives `body .primary-content .card` 16px. Stacked content cards are common (clientareadetails has 4, clientareadomaindetails 6) and .ca-main in ca-v4-6.css:36 sets its column gap to 20px, so 20px is what the same stack gets in the SPA. No !important - our specificity already wins. Markup: verified `
` at clientareadetails.tpl:19,144,165,183, clientareadomaindetails.tpl:21,194,233,289,335,372, user-password.tpl:1, masspay.tpl:4,80, serverstatus.tpl:17,78 and 45 further templates. A scan for a .card nested inside another .card across every non-overridden template found none, so there is no nested-card case to unwind. */ body.ivo-ca-chrome #main-body .primary-content .card:not(.card-sidebar){ border:1px solid var(--line)!important;margin-bottom:20px} /* -- 10.2 Card header ------------------------------------------------------ .ca-card-h in ca-v4-6.css:38: 15px 20px, a hairline underneath, and a panel-2 gradient that fades out downwards. Stock gives it Nexus's 12px 16px and, from whmcs-skin-11.css:24, a transparent fill and a --w-line border - so the header band did not read as a band at all. Two !important here, each against one host declaration in whmcs-skin-11.css :24 (`#main-body .card-header{background:transparent!important;border-color: var(--w-line)!important;color:var(--w-ink)!important}`): the gradient over its transparent, and border-bottom-color over its --w-line. Colour is taken too, for var(--ink) rather than --w-ink, so a bare-text header matches .ca-card-h h3. Width and style of the border need no !important - Nexus sets them at (0,0,1,0) and lose on specificity. Radius is untouched: header.tpl already pins the two top corners to 16px. :not(.modal-header) IS LOAD-BEARING - REPAIR, 2026-09-18. Four templates put both classes on one element, verified by reading each line: account-user-management.tpl:132 `modal-header card-header bg-primary text-light` account-user-management.tpl:160 same clientareadomaincontactinfo.tpl:105 `modal-header card-header bg-primary text-light` account-contacts-manage.tpl:137 `modal-header card-header` (store/ox/manage.tpl:276,374,422,480,518 carry the same pair, five more.) Every one of those modals is emitted inside .primary-content, so without the exclusion this rule - which carries an ID and !important - silently beat section 40.6's `.modal-header.bg-primary` accent header and painted a card gradient over it instead. Section 40.6 now also carries an id-bearing branch; the two fixes are a pair and neither is sufficient alone. DELIBERATE DIVERGENCE from .ca-card-h: flow-root, not flex. .ca-card-h can be a flex row because the SPA's markup gives it flex siblings. The stock markup does not - it puts the trailing element INSIDE the header as a float: clientareaproductdetails.tpl:32 has `
` and serverstatus.tpl:81 a ``, both next to bare text. Under display:flex that text becomes a shrink-to-fit flex item and the float lands at the text's right edge instead of the card's. flow-root keeps the floats working and still contains them, and it is the same choice ca-v4-6.css:142 already made for the dashboard's home-card headers. Markup: verified `
` at clientareaproductdetails.tpl :31, serverstatus.tpl:79, viewquote.tpl:119, viewbillingnote.tpl:82, masspay.tpl:81, account-contacts-manage.tpl, account-user-management.tpl and clientareadomaincontactinfo.tpl - 15 occurrences over the non-overridden templates, plus the overridden ivo-nexus/clientareahome.tpl:61. */ body.ivo-ca-chrome #main-body .primary-content .card-header:not(.modal-header){ display:flow-root;padding:15px 20px; background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 55%,transparent),transparent)!important; border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--line)!important; color:var(--ink)!important;font-size:15px;font-weight:600;letter-spacing:-.01em} /* -- 10.3 Card title ------------------------------------------------------- The dominant stock shape is not a header at all - it is `.card > .card-body > h3.card-title`, the card's heading sitting inside its body. theme.min.css renders that at `.primary-content .card-title{margin:0 0 20px;font-size:22px}`, which is within a couple of pixels of .ivo-ca-title, the page H1 two rows above it. On /user/password the two then say the same words at nearly the same size. .ca-card-h h3 is 15px, so that is what a card heading is here, in the header and in the body alike. `:not(.card) > .card-title` is how the one card-title that is NOT a heading stays out: includes/panel.tpl:4 uses .card-title as a filled status banner (`card-title py-1 px-2 text-white font-weight-bold bg-{$type}`) that is a DIRECT child of the .card, with no header or body around it. Every real heading's parent is a .card-header or a .card-body, so negating a .card parent separates the two exactly, with no class list to keep in step. That banner is rendered by viewquote.tpl:26,69,115,167 and viewbillingnote.tpl:78. No !important: nothing pins .card-title's size or colour for the markup this rule is FOR. `#main-body h3` in whmcs-skin-11.css:15 is (1,0,1) and this selector is (1,4,1). IT DOES LOSE ON THE DASHBOARD, AND THAT IS THE INTENDED OUTCOME - recorded 2026-09-18 rather than changed. ca-v4-6.css:143 and :147 pin `#main-body .client-home-cards .card-title{font-size:14.5px!important; font-weight:600!important;color:var(--ink)!important}` at (1,2,0), and an !important declaration is not beaten by this rule's (1,4,1), so all three of the size, the weight and the colour below are no-ops on clientareahome. That is correct, not a defect: the home cards are ca-v4-6's own considered treatment, 10.6 above already excludes the same panels from the list-group rules for the same reason, and the two values barely differ (14.5px/600 against 15px/600). No `:not(.client-home-cards *)` is added here, because the only effect would be to DROP the rule entirely in an engine without complex `:not()` support, on the stock pages where it is the whole point. A rule that loses to a better rule on one page is not the same thing as a silent no-op. Markup: verified `

` inside a .card-body at user-password.tpl:3, clientareadetails.tpl:21,146,167,185, masspay.tpl:6, clientareadomaindetails.tpl:24,153,197,236,292,338,374, supportticketsubmit-stepone.tpl:5 and supportticketsubmit-kbsuggestions.tpl:1; inside a .card-header at viewquote.tpl:120, viewbillingnote.tpl:83 and masspay.tpl:82. 60 occurrences over the non-overridden templates. .card-subtitle is NOT styled - see 10.9. */ body.ivo-ca-chrome #main-body .primary-content :not(.card) > .card-title{ margin:0 0 14px;padding:0;font-size:15px;font-weight:600; letter-spacing:-.01em;line-height:1.4;color:var(--ink)} body.ivo-ca-chrome #main-body .primary-content .card-header > .card-title{margin:0} /* -- 10.4 Card body -------------------------------------------------------- .ca-card-b in ca-v4-6.css:40 is a flat 20px. theme.min.css escalates the same element three times - `.card-body{padding:1.25rem}`, then `.primary-content .card-body{padding:20px}`, then `body .primary-content .card-body{padding: 32px}` - so a stock content card ends up at 32px, which at 390px leaves 326px of usable width inside a 390px screen. 20px, once, everywhere. .extra-padding is deliberately flattened with it. theme.min.css gives `.primary-content .card-body.extra-padding` 1.8rem and then 3rem, and supportticketsubmit-stepone.tpl:2 is the only page that asks for it. One card padding platform-wide is the point of this pass, so that page loses its extra slack rather than being the one card that is different. The second rule is a real trap, not a precaution. clientareaproductdetails .tpl:35 emits `
` - a card-body that is ALSO a Bootstrap row, so it carries theme.min.css's `.row{margin-left:-15px; margin-right:-15px}`. Padding alone would land its columns at 20-15=5px from the card edge. Zeroing the row margins and setting the side padding to 5px lets each column's own 15px gutter carry the rest, so the content sits at exactly 20px, the same as every other card body. No !important anywhere: the tallest host rule is (0,0,2,1) and these are (0,1,3,1). Markup: verified `
` at user-password.tpl:2, clientareadetails.tpl:20,145,166,184, serverstatus.tpl:18,84, masspay.tpl:5,84, bulkdomainmanagement.tpl:2, access-denied.tpl:3 and 40 further templates - 76 occurrences; `class="row card-body"` at clientareaproductdetails.tpl:35; `class="card-body extra-padding"` at supportticketsubmit-stepone.tpl:2. */ body.ivo-ca-chrome #main-body .primary-content .card-body{padding:20px} body.ivo-ca-chrome #main-body .primary-content .card-body.row{ margin-left:0;margin-right:0;padding-left:5px;padding-right:5px} /* -- 10.5 Card footer ------------------------------------------------------ Padding and a hairline only. The footer's fill is already right: ca-theme-7.css:25-26 pins `#main-body .card-footer{background:var(--panel-2) !important;border-color:var(--line,var(--w-line))!important}`, which is the accent-cohesive strip the platform wants and already resolves --line. So this rule sets border-top's WIDTH and STYLE and leaves its colour to that rule - a shorthand here would only re-state a colour that is already correct and already !important. Markup: verified `
` at clientareaaddfunds.tpl, clientareadomaincontactinfo.tpl, clientareaproductdetails.tpl, two-factor-challenge.tpl and includes/panel.tpl:14 - 10 occurrences over the non-overridden templates, plus ivo-nexus/clientareahome.tpl:100. `.card-footer:empty{display:none}` is not repeated: ca-v4-6.css:148 already does it for the only markup that can emit an empty one. */ body.ivo-ca-chrome #main-body .primary-content .card-footer{ padding:13px 20px;border-top-width:1px;border-top-style:solid; font-size:13.5px;color:var(--ink-2)} /* -- 10.6 Content list-groups ---------------------------------------------- Sections 3 above scopes every one of its list-group rules to .sidebar-secondary, and ca-v4-6.css:168-173 scopes its own to .client-home-cards. A list-group in ordinary page content therefore falls through to the WHMCS skin. CORRECTED PREMISE, 2026-09-18. An earlier draft of this block said Bootstrap's `.list-group-item{background-color:#fff}` was what rendered, and called this a dark-mode legibility bug. That is false and the correction matters, because it is also what made the block inert. The host rule that governs the ITEM is whmcs-skin-11.css:71: `#main-body .list-group-item{background:var(--w-panel)!important; border-color:var(--w-line)!important;color:var(--w-ink)!important}` so the row is ALREADY repainted in both modes and there is no white-on-white anywhere. What is actually wrong is narrower: those rows carry the neutral --w-panel surface and the heavier --w-line hairline inside a --panel card, so a list-group reads as a second, greyer card stacked inside the first. This is a surface-language mismatch, not a legibility bug. It also means all three of this rule's colour declarations were PLAIN against three !important host declarations and therefore did nothing at all. The three pinned properties - background, border-top-color (through the border-top shorthand) and color - now carry !important against whmcs-skin-11.css:71 and nothing else. border-width, border-radius, padding and font-size stay plain: :71 does not touch them. The earlier draft also cited whmcs-skin-11.css:21-23 as its justification. :21-23 covers `.list-group`, the CONTAINER, not the item; it is the correct citation for the first rule below and the wrong one for the second. The group gets the .ca-note box (ca-v4-6.css:86: panel-2-ish surface, --line border, 12px radius) and the rows get --line hairlines between them, which is how .ca-table separates rows. Background stays transparent so the group reads against whatever it sits in - every content list-group found is inside a .card-body, and ca-theme-7.css:28-29 already wants it transparent there. COMPLEX :not() AND WHAT HAPPENS WITHOUT IT - decided 2026-09-18, once, for both places in this file that use one (here and 30.10's `:not(.alert *)`). A complex argument inside :not() is Selectors Level 4, supported from Chrome 88 / Firefox 84 / Safari 16.4 (Jan 2021, Dec 2020, Mar 2023). An engine that does not support it treats the whole SELECTOR as invalid and drops the ENTIRE RULE - not just the exclusion - so the fallback is "this rule does not exist", never "this rule over-applies". That is the right way round for both uses: - here, losing the rule means a content list-group keeps the WHMCS skin's surface, which is what ships today. A visual regression to the status quo. - in 30.10, losing the rule means a content link keeps --ivo-accent, which is also what ships today, and 40.3 then owns the alert links unopposed. The one thing that CANNOT happen is the failure 30.10's repair closed - an accent link inside an amber alert - because that needed this rule to WIN. Both degrade to today's behaviour on an engine that predates the support baseline, in a client area behind a login, and the precedent is already in the stack: whmcs-skin-11.css ships `:not(.table-responsive table)` live. The alternative - restructuring both rules around an extra wrapper class - would buy a browser generation nobody is on at the cost of markup this file does not control. ACCEPTED. The `:not(.client-home-cards *)` on all three rules is the dashboard guard. Those home panels sit inside .primary-content too, and ca-v4-6.css:169-173 gives their rows a borderless 10px-radius hover treatment - with !important, at (0,1,2,1) - so the exclusion is what keeps this section from drawing hairlines through the dashboard's services and tickets lists. The complex argument inside :not() is Selectors L4 and is already shipping in this stack: whmcs-skin-11.css uses `:not(.table-responsive table)` live today. Markup: verified plain, non-interactive `.list-group-item` rows - no .active and no .list-group-item-action among them - at access-denied.tpl:8-10 (a .list-group-flush of permission names), configuressl-steptwo.tpl:37-39 (radio rows of approver emails), bulkdomainmanagement.tpl:39-43,92,134,174 (four `
    ` of domain names) and supportticketsubmit-kbsuggestions.tpl:5-7 (.kbarticles.list-group). All five are inside a `.card > .card-body`, checked by reading each file. */ body.ivo-ca-chrome #main-body .primary-content .list-group:not(.client-home-cards *){ background:transparent!important;border:1px solid var(--line)!important; border-radius:12px!important;overflow:hidden} body.ivo-ca-chrome #main-body .primary-content .list-group-item:not(.client-home-cards *){ background:transparent!important;border:0; border-top:1px solid var(--line)!important; border-radius:0;padding:11px 16px;font-size:13.5px;color:var(--ink-2)!important} body.ivo-ca-chrome #main-body .primary-content .list-group-item:first-child:not(.client-home-cards *){ border-top:0!important} /* -- 10.7 Wells ------------------------------------------------------------ .well is a Bootstrap 3 class Bootstrap 4 dropped, so theme.min.css defines nothing for it at all - not even padding. whmcs-skin-11.css:21-23 does list it and hands it a --w-panel fill, a --w-line border and a --w-r radius, so what renders today is a bordered box with its content flush against the border on every side. .ca-note in ca-v4-6.css:86 is exactly this component in the platform's language - an inset panel-2 surface inside a card - so its values are used verbatim rather than a fourth inset style being invented. Three !important, all three against that one whmcs-skin-11.css:21-23 declaration set. Markup: exactly one occurrence, account-user-management.tpl:103, `
    ` - the permission checkbox panel that the Invite User form reveals when "choose permissions" is picked. It is the only .well in templates/nexus, confirmed by a grep for class="[^"]*\bwell\b over every .tpl in that directory. Note that /account/usermanagement is on the audit's list of routes whose chrome state was not measured live, so this rule may resolve on a page where the gate is false - in which case it simply does not apply, which is the correct outcome either way. */ body.ivo-ca-chrome #main-body .primary-content .well{ background:var(--panel-2)!important;border:1px solid var(--line)!important; border-radius:12px!important;padding:13px 16px; font-size:13.5px;color:var(--ink-2)} /* -- 10.8 Narrow screens --------------------------------------------------- Same 768px breakpoint and same reasoning as section 10 above: below it the shell drops its own side padding to 16px, so a 20px card inset on top of that would put content 36px in from a 390px viewport and leave 318px for it. 16px inside the card keeps the card's own edge visible without taking a quarter of the screen. The .row card-body keeps the 15px-gutter arithmetic from 10.4: 16-15=1. The list rows and the well tighten with it, so a 390px screen never has two different insets stacked inside one card. */ @media(max-width:768px){ body.ivo-ca-chrome #main-body .primary-content .card-body{padding:16px} body.ivo-ca-chrome #main-body .primary-content .card-body.row{padding-left:1px;padding-right:1px} body.ivo-ca-chrome #main-body .primary-content .card-header:not(.modal-header){padding:13px 16px} body.ivo-ca-chrome #main-body .primary-content .card-footer{padding:12px 16px} body.ivo-ca-chrome #main-body .primary-content .list-group-item:not(.client-home-cards *){padding:10px 13px} body.ivo-ca-chrome #main-body .primary-content .well{padding:12px 13px} } /* -- 10.9 Deliberately not styled ------------------------------------------ Four things the brief put in scope that this section does not touch, each because the markup or the rule it would target is not there. Recorded so the next pass does not re-derive it. .panel / .panel-heading / .panel-body / .panel-footer - ZERO occurrences. A grep for class="[^"]*panel over every .tpl in templates/nexus returns nothing: Nexus 9.0.8 is Bootstrap 4 and .panel is the Bootstrap 3 name that .card replaced. theme.min.css keeps .panel-title alive only for the sidebar (`.sidebar .card-sidebar .panel-title`), which is out of scope by 10.1's .primary-content guard. ca-theme-7.css:22-29 and whmcs-skin-11.css:21-25 both still carry .panel selectors; those are dead weight inherited from a Bootstrap 3 era, not evidence of live markup. Styling .panel here would be a rule that can never match anything. .promo-container - also zero template occurrences (it is MarketConnect output, not a template), and more to the point ca-dash-rebuild.css:50 sets `#main-body .promo-container{display:none!important}` platform-wide. It is hidden, not unstyled. Any rule here would be fighting that, which the brief explicitly says not to do. .card-subtitle - one occurrence in all of templates/nexus, at viewinvoice.tpl:158, and ivo-nexus overrides viewinvoice.tpl with markup that contains no .card-subtitle at all (checked). So it has zero live occurrences on a chrome page. box-shadow on .card - see the section banner. ivo-chrome-6.css:604-614 already sets it to --ivo-elev, and header.tpl:58-61 is explicit that a surface inside the chrome must carry the SPA's elevation rather than .ca-card's flat shadow. OPEN, not decided here: .card-text. It is real - includes/panel.tpl:9 and viewbillingnote.tpl:130 both put it as a DIRECT child of a .card with no .card-body around it, so it has no padding against a 16px-rounded edge. It was left out because it is outside this section's brief and because both uses carry their own mx-2/mb-3 utilities, which are !important and would have to be fought rather than replaced. Worth a decision in a later section. */ /* =========================================================================== SECTION 20 - FORMS The stock WHMCS/Nexus forms, in the platform's layout language. Why this section exists: every account, contact, ticket-submit, add-funds, payment-method and password page is a Bootstrap 4 form, and exactly one rule in the whole stack was aimed at one - ca-v4-6.css line 97, which gives .form-control (and select.form-control) the surface: #main-body .form-control{background:var(--bg-2)!important; border:1px solid var(--line)!important;color:var(--ink)!important} That rule is the contract and nothing below duplicates or fights it. What it does not cover, and what this section closes, all verified in the repo: - a bare .custom-select (no .form-control) never gets that surface; it falls through to whmcs-skin-11.css's parallel --w-* set instead - EVERY select renders with NO dropdown indicator: Bootstrap's .custom-select sets appearance:none and draws its caret as part of a `background:` shorthand (templates/nexus/css/theme.css), and both whmcs-skin-11.css:56 and ca-v4-6.css:97 re-declare `background` with !important, which resets background-image to none. Measured by reading the cascade, not the screen - a disabled or readonly field is indistinguishable from an editable one, because Bootstrap's .form-control:disabled{background-color:#e9ecef} also loses to those two !important shorthands. Live on Account Details, which sends disabled="disabled" on every uneditable field - .input-group-text has square corners next to an 8px input, because whmcs-skin-11.css:60 sets border-radius:var(--w-r-sm) and --w-r-sm is defined nowhere in _v4css - an invalid value, so the corner computes 0 - the joined corners of an input-group are double-rounded: Bootstrap zeroes them at (0,2,0)/(0,3,0) and ivo-tokens-6.css re-rounds every .form-control and .btn at (1,1,0), which out-ranks it. An appended button therefore keeps the full 999px pill against a square input edge - .custom-file-label (the ticket attachment picker) is pure stock: #fff slab, #ced4da border, #e9ecef Browse button, in all four combinations - .has-error, .field-error-msg, .is-invalid, .is-warning and .is-valid are all applied at runtime and all render as nothing. See 20.12 NOT a gap, contrary to the brief: a focus ring already exists. whmcs-skin-11.css:59 gives .form-control/select/textarea `border-color:var(--w-acc)!important` plus a 3px var(--w-acc-bg) ring, ca-dash-rebuild.css:64 maps --w-acc to var(--accent), ivo-tokens-6.css:129 then re-points it at var(--ivo-accent) and wins on load order, and ivo-tokens-6.css adds a :focus-visible outline. 20.5 therefore adds a ring only to the two controls that selector list misses, rather than re-declaring one that works. NOT written, for lack of markup - a rule that cannot be tied to rendered markup does not belong here: - `legend`: zero elements in templates/nexus.
    has five uses but Bootstrap's reboot already zeroes its padding, margin and border, so a fieldset rule would be a no-op - .invalid-feedback / .valid-feedback: styled by Bootstrap, emitted by no stock template. .field-error-msg is what WHMCS actually renders - .help-block: zero uses. .form-text is the live class - small.text-muted under a field: its one use is a table cell on clientareaproducts.tpl, so a field-help rule would only shrink a table - the password-strength meter: same form, same include, but .progress / .progress-bar is a feedback component and 40.8 already covers it with these same tokens - .form-control-label: login.tpl only, which never carries the chrome - a bare input[type=text] selector: the only .form-control-less text inputs in the theme are .dial-usage on clientareaproductdetails - jQuery Knob widgets, not fields. Same trap as