/* *****************************************************

    OpenPanel branding for WHMCS "Twenty-One" (Bootstrap 4.5.3)

    This file is WHMCS's own supported customization slot: Twenty-One's
    includes/head.tpl auto-includes css/custom.css (if present) right after
    theme.min.css, via {assetExists file="custom.css"}. Nothing else in this
    template has been modified from stock Twenty-One.

    IMPORTANT: Twenty-One's compiled theme.css hardcodes colors (e.g.
    `background-color: #336699;`) rather than reading CSS custom properties
    -- Bootstrap 4 does not wire its :root variables into component styles
    the way Bootstrap 5 does. So overrides below target the real selectors
    directly, not CSS variables.

    This build uses the site's DARK color scheme as the permanent look (WHMCS
    Twenty-One / Bootstrap 4 has no runtime light/dark toggle, so "dark
    scheme" here means: use the site's dark-mode tokens as the only palette).

    Every token below was verified by actually rendering openpanel.com in a
    headless Chromium (Playwright), forcing data-theme="dark", and reading
    real computed styles + pixel-sampling screenshots -- not by reading CSS
    source/config, which had twice given wrong answers (once trusting a dead
    tailwind.config.js token, once reading the docs-page-only gray scale
    instead of the site-wide one). Actual measured values:

      - Primary blue:      #1890ff / hover #1584eb (--ifm-color-primary,
                            unchanged between light/dark)
      - Page background:   #1d1e30 (measured body background-color, dark;
                            this is gray-800, NOT the Infima
                            --ifm-background-color:#1b1b1d variable, which
                            gets overridden by a wrapper's own dark:bg-gray-800)
      - Header background: #14141f (gray-900; pixel-sampled solid, clean match)
      - Footer main area:  real site is a gradient rgba(29,30,48,.5)->#14141f
                            (tailwind.config.js "footer-dark-bg"), simplified
                            to solid #14141f here (same as header) for
                            reliability without backdrop-filter/gradients
      - Footer bottom bar: #1d1e30 (gray-800; distinctly LIGHTER than the
                            main footer area above it -- landing-footer.tsx's
                            bottom legal row is literally "bg-gray-50
                            dark:bg-gray-800", a different shade on purpose,
                            confirmed via pixel sample)
      - Border/divider:    #303450 (gray-700; pixel-sampled exact match,
                            used for both header bottom border and footer
                            section dividers)
      - Heading/brand text: white (gray-0; pixel-sampled solid white)
      - Header nav link text: #cfd7e2 (gray-300; pixel-sampled dominant
                            color on "Resources"/"Features" nav text --
                            brighter than the footer's link color)
      - Footer link text:  #a3adc2 (gray-400; pixel-sampled dominant color
                            on footer column links)
      - Link hover text:   #cfd7e2 (gray-300, one step brighter)
      - Font:               Inter (--primary-font-sans, confirmed site-wide)
***************************************************** */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --op-primary: #1890ff;
    --op-primary-dark: #1584eb;
    --op-primary-darker: #1278d7;
    --op-bg: #14141f;
    --op-surface: #14141f;
    --op-surface-alt: #1d1e30;
    --op-border: #303450;
    --op-footer-border: #303450;
    --op-heading: #ffffff;
    --op-text: #a3adc2;
    --op-nav-text: #cfd7e2;
    --op-text-hover: #cfd7e2;
    --op-radius-sm: 8px;
    /* Docs pages (openpanel.com/docs/...) use a DIFFERENT, lighter dark
       surface than the homepage/footer -- their html.docs-wrapper scopes
       its own gray scale (gray-900 #23272f vs the homepage's #14141f).
       Confirmed via getComputedStyle on the real docs page. Used for WHMCS's
       inner content (cards, breadcrumb) since that's the closer analogue
       to a docs page (persistent content pane), not the marketing homepage. */
    --op-content-bg: #1d1e30;
    --op-content-border: #303450;
}

html, body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Stock Twenty-One sets body.primary-bg-color to #f1f1f1; the real site's
   dark-mode page background is #14141f -- NOT the raw <body> tag's own
   background-color (which is a separate, lighter #1d1e30 that's never
   actually visible), but the full-height ".main-wrapper" div's
   dark:bg-gray-900 that paints over it. Confirmed via elementFromPoint()
   walking up to the first ancestor with a real (non-transparent) background,
   which is what a user actually sees. Text color is left at Bootstrap's
   stock dark default because inner content (tables, invoices, forms) still
   sits on its normal white card backgrounds; this round only re-themes the
   header/footer chrome, not that inner content, so a light default text
   color would make those white areas unreadable. */
.primary-bg-color {
    background-color: var(--op-bg);
    color: white!important;
}

/* ---------- Nav overflow sentinel ----------
   scripts.min.js's autoCollapse("#nav", 30) requires the
   .collapsable-dropdown / .collapsable-dropdown-menu elements to exist in
   the DOM (see header.tpl comment) -- removing them causes an infinite
   synchronous loop that freezes the tab. All 4 nav links are marked
   no-collapse so they're never swept into it, but the JS still
   unconditionally reveals the (now always-empty) toggle whenever the nav
   wraps to a second line. Hiding it visually here is safe: the element
   stays in the DOM (JS's target selector still resolves), it just never
   renders. Do not delete the element itself in header.tpl. */
.collapsable-dropdown {
    display: none !important;
}

/* ---------- Links & text ---------- */

a {
    --tw-text-opacity: 1;
    color: rgb(71 235 235 / var(--tw-text-opacity));
}
a:hover {
    --tw-text-opacity: 0.8;
}
.text-primary {
    color: var(--op-primary) !important;
}

/* ---------- Buttons ---------- */

.btn {
    font-family: inherit;
    border-radius: var(--op-radius-sm);
}
/* Matches the real site's solid CTA button style: bright teal fill
   (dark:bg-refine-cyan-alt, rgb(71 235 235)) with dark gray-900 text,
   not a filled blue/white button. */
.btn-primary {
    background-color: rgb(71, 235, 235);
    border-color: rgb(71, 235, 235);
    color: #14141f;
}
.btn-primary:hover {
    background-color: rgb(71, 235, 235);
    border-color: rgb(71, 235, 235);
    color: #14141f;
    opacity: 0.9;
}
.btn-primary:focus, .btn-primary.focus {
    background-color: rgb(71, 235, 235);
    border-color: rgb(71, 235, 235);
    color: #14141f;
    box-shadow: 0 0 0 0.2rem rgba(71, 235, 235, 0.35);
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: rgb(71, 235, 235);
    border-color: rgb(71, 235, 235);
    color: #14141f;
}

/* Same solid-fill/dark-text treatment as .btn-primary, using the real
   site's green accent (used elsewhere for the NEW badge and hero
   gradient) instead of stock Bootstrap's #28a745. */
.btn-success {
    background-color: #26d97f;
    border-color: #26d97f;
    color: #14141f;
}
.btn-success:hover {
    background-color: #26d97f;
    border-color: #26d97f;
    color: #14141f;
    opacity: 0.9;
}
.btn-success:focus, .btn-success.focus {
    background-color: #26d97f;
    border-color: #26d97f;
    color: #14141f;
    box-shadow: 0 0 0 0.2rem rgba(38, 217, 127, 0.35);
}
.btn-success.disabled, .btn-success:disabled {
    background-color: #26d97f;
    border-color: #26d97f;
    color: #14141f;
}

/* ---------- Header / navbar ---------- */

header.header {
    background-color: var(--op-surface);
    border-bottom: 1px solid var(--op-border);
}
header.header .topbar {
    background-color: var(--op-bg);
}
/* Exact values measured off the real header: 36x36 logo icon, 8px gap,
   22px/700 brand text, 14px/400 nav links -- getBoundingClientRect() /
   getComputedStyle() on the live page, not estimated. */
.op-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.op-brand-mark {
    height: 36px;
    width: 36px;
}
.op-brand-text {
    font-weight: 700;
    font-size: 22px;
    color: var(--op-heading);
}
/* Neutralized -- this stock rule (color:#444) was the original source of
   the header link/menu color bugs from earlier rounds; more specific rules
   (#nav > li > a, .dropdown-item, etc.) already win over it on specificity,
   but removing its own opinion here so it can't fight anything not yet
   covered by a specific rule. */
header.header .navbar a {
    color: inherit;
}
.navbar-light .navbar-brand {
    color: var(--op-heading);
}
/* NOTE: these must be scoped to #nav, not `.navbar-light .navbar-nav` --
   stock Twenty-One splits the header into two separate <div class="navbar
   ..."> rows (see header.tpl): row 1 ("navbar navbar-light") holds the
   brand+cart, row 2 ("navbar navbar-expand-xl main-navbar-wrapper", NO
   navbar-light class) holds #nav. A `.navbar-light .navbar-nav .nav-link`
   selector never matches anything in row 2 at all, so these links were
   silently falling through to stock's `header.header .navbar a{color:#444}`
   the whole time despite this rule existing. */
/* Stock navbar.tpl's top-level <a> only ever gets class "pr-4" (or
   "pr-4 dropdown-toggle" if it has children) -- it never has class
   "nav-link" at all, so a #nav .nav-link selector matches nothing here.
   Targeting the direct li>a structure instead; .nav-link is kept too in
   case a custom/hardcoded nav is used again later. */
#nav > li > a,
#nav .nav-link {
    color: var(--op-nav-text);
    font-size: 14px;
    font-weight: 400;
}
#nav > li > a:hover,
#nav > li > a:focus,
#nav .nav-link:hover,
#nav .nav-link:focus {
    color: var(--op-heading);
}
#navSecondary > li > a,
#navSecondary .nav-link {
    color: var(--op-nav-text);
    font-size: 14px;
    font-weight: 400;
}
#navSecondary > li > a:hover,
#navSecondary > li > a:focus {
    color: var(--op-heading);
}

#nav .show > a,
#nav .active > a,
#nav .show > .nav-link,
#nav .active > .nav-link,
#nav .nav-link.show,
#nav .nav-link.active {
    color: var(--op-primary);
}
/* Bootstrap's stock .dropdown-menu is a white panel meant for a light page
   (color:#212529, background:#fff) -- used by the header's "Store" and
   "Account" dropdowns, which stayed white/unreadable against the dark
   header until styled here. */
.dropdown-menu {
    background-color: var(--op-surface);
    border-color: var(--op-border);
}
.dropdown-item {
    color: var(--op-nav-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--op-heading);
    background-color: var(--op-bg);
}
.dropdown-divider {
    border-top-color: var(--op-border);
}
header.header .toolbar .nav-link {
    color: var(--op-text);
    border-color: var(--op-border);
}
header.header .toolbar .nav-link:hover {
    color: var(--op-text-hover);
    border-color: var(--op-text-hover);
}
.navbar-light .navbar-toggler {
    color: var(--op-text);
    border-color: var(--op-border);
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28163, 173, 194, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Footer ---------- */
/* Every color here is the site's real dark-mode footer token, taken
   directly from landing-footer.tsx's className strings (see file header
   comment). Real site never uses the blue accent in the footer at all,
   light or dark mode -- default text is gray-400, hover is gray-300,
   headings are gray-0. */

/* Every measurement below (padding, gap, font-size, line-height, max-width)
   was read via getComputedStyle()/getBoundingClientRect() directly off the
   real openpanel.com footer in a headless Chromium at a 1440px viewport
   (landing-lg breakpoint), not estimated. */

footer.footer {
    background: linear-gradient(180deg, rgba(29, 30, 48, 0.5) 0%, var(--op-surface) 100%);
    color: var(--op-text);
    padding: 0;
    border-top: 1px solid var(--op-footer-border);
}
footer.footer a {
    color: var(--op-text);
}
footer.footer a:hover {
    color: var(--op-text-hover);
    text-decoration: none;
}
footer.footer .copyright {
    color: var(--op-heading);
    font-size: 14px;
    /* stock theme.css sets margin:30px 0 on .copyright, which pushed it
       well below the legal links row even though both are flex siblings */
    margin: 0;
}
/* Real site's heart icon is "text-refine-red" (#FF4C4D), not inherited
   white -- confirmed via tailwind.config.js's matching drop-shadow color
   rgba(255,76,77,...). */
footer.footer .copyright .op-heart {
    color: #ff4c4d;
    vertical-align: -2px;
}

.op-footer-container {
    max-width: 1296px;
    margin: 0 auto;
    padding: 0 48px;
}
@media (max-width: 768px) {
    .op-footer-container {
        padding: 0 32px;
    }
}

.op-footer-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
}
.op-footer-brand svg {
    height: 32px;
    width: 32px;
}
/* On the real site, the columns row and the "Join us on" block are the SAME
   flex row (social pushed right via margin-left:auto, wrapping to its own
   line only because of width) sharing ONE top/bottom padding pair
   (pt-8/pb-12 = 32px/48px), not two separate blocks each with their own
   full padding -- giving the social row its own 32/48 on top of this
   row's 48 nearly doubled the footer's real height. */
.op-footer-main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    padding: 32px 0 0;
}
.op-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 152px;
}
/* Real site's info block reserves a fixed 282px slot (max-w-[282px] w-full
   in source) even though "OpenPanel, LLC" / the email are much narrower --
   that reserved empty space is what pushes the Resources column over.
   Without this, columns bunch up too close together on the left. */
.op-footer-col-info {
    width: 282px;
    min-width: 282px;
}
.op-footer-heading {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--op-heading);
    margin-bottom: 8px;
}
.op-footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--op-text);
}
.op-footer-link:hover {
    color: var(--op-text-hover);
    text-decoration: none;
}
/* Real site's Resource Calculator NEW badge (icons/popover/new-badge.tsx)
   is an animated gradient-bordered pill -- simplified here to a static
   green pill matching its resting-state colors (dark mode: #26d97f). */
.op-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: rgba(38, 217, 127, 0.1);
    color: #26d97f;
}
.op-footer-social-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    width: fit-content;
    margin-left: auto;
    padding: 24px 0 48px;
}
.op-footer-social-row .op-footer-heading {
    margin-bottom: 0;
}
.op-footer-social-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}
.op-footer-social-icons a {
    color: var(--op-text);
    line-height: 24px;
}
.op-footer-social-icons a:hover {
    color: var(--op-text-hover);
}
.op-footer-social-icons i {
    /* Real site's SVG icons measure 24x24px, but FontAwesome glyphs carry
       more internal padding within their em-box than a tight custom SVG, so
       they read larger than a real 24px icon at the same nominal font-size
       -- sized down slightly here to compensate and match visually. */
    font-size: 20px;
}
/* Real site's bottom legal bar is a distinctly LIGHTER shade than the main
   footer above it (bg-gray-50 dark:bg-gray-800 vs. the darker gradient
   above) -- so this sits outside footer.footer's own background, full-width,
   with its own solid color, not just a border-top on the same background. */
.op-footer-bottom {
    background-color: var(--op-surface-alt);
    border-top: 1px solid var(--op-footer-border);
}
.op-footer-bottom-inner {
    padding: 24px 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.op-footer-legal {
    margin: 0;
    gap: 16px;
}
.op-footer-legal .nav-link {
    padding: 0;
    font-size: 14px;
}
/* Stock theme.css has `footer.footer .nav-link { color: #eee; }`, which
   beats a plain `footer.footer a` rule on specificity (two classes vs one
   class+tag) regardless of source order -- that's why these looked lighter
   than the real site's gray-400 despite the catch-all rule existing. */
footer.footer .op-footer-legal .nav-link {
    color: var(--op-text);
}
footer.footer .op-footer-legal .nav-link:hover {
    color: var(--op-text-hover);
}

/* ---------- Pagination ---------- */

.page-link {
    color: var(--op-primary);
}
.page-link:hover {
    color: var(--op-primary-dark);
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.25);
}
.page-item.active .page-link {
    background-color: var(--op-primary);
    border-color: var(--op-primary);
}

/* ---------- Forms ---------- */

.form-control:focus {
    border-color: var(--op-primary);
    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.25);
}
.form-control {
    background-color: var(--op-content-bg) !important;
    border-color: var(--op-content-border);
    color: var(--op-text-hover)!important;
}
.form-control::placeholder {
    color: var(--op-text)!important;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--op-surface-alt) !important;
    opacity: 1;
}
/* DataTables search box hardcodes a `background: url(search.png) #fff ...`
   shorthand -- the icon itself is a dark-gray PNG made for a white input,
   so even with our dark background-color winning (via .form-control's
   !important) it'd be nearly invisible. Replacing it with an inline SVG
   magnifying glass in our theme's text color instead of the PNG. */
.dataTables_wrapper .dataTables_filter label .form-control {
    background-color: var(--op-content-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3adc2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}

/* ---------- Inner content (main area, breadcrumb) ----------
   Everything below was intentionally left as stock white in earlier rounds
   (scope was header/footer chrome only); now extending the dark theme to
   this content area too, using the docs-page dark tone (#23272f), not the
   homepage's darker #14141f, per the real docs page. Card/breadcrumb
   backgrounds don't set their own text color by default (theme.css relies
   on the global body{color:#212529} dark-gray default meant for a white
   background) so switching just the background would make existing text
   unreadable -- color is explicitly reset here too. */

.master-breadcrumb {
    background-color: var(--op-surface-alt);
}
/* .breadcrumb (the <ol> itself) has its own separate #e9ecef background in
   stock theme.css, distinct from .master-breadcrumb's wrapping <nav> --
   overriding the nav alone left this still visibly light. Uses
   --op-surface-alt (same shade as the footer's bottom legal bar), not
   --op-content-bg, per request. */
.breadcrumb {
    background-color: var(--op-surface-alt);
}
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--op-text);
}
/* Breadcrumb links default to blue via the global `a` rule -- swapped to
   a teal accent here instead, per request. */
.breadcrumb-item a {
    --tw-text-opacity: 1;
    color: rgb(71 235 235 / var(--tw-text-opacity));
}
.breadcrumb-item a:hover {
    --tw-text-opacity: 0.8;
}

.card, .mc-promo-manage, .mc-promo-login {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
.card-title, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: var(--op-heading);
}
/* Section headings like homepage.tpl's "How Can We Help" / "Your Account"
   sit directly on the dark page background (#primary-bg-color), outside
   any .card -- stock theme.css's default heading color is a dark gray
   meant for a white background, unreadable here. */
h1, h2, h3, h4, h5, h6 {
    color: var(--op-heading);
}

/* ---------- Site-wide dark sweep ----------
   Systematically found every `background-color: #fff` (and near-white:
   #f8f9fa/#f1f1f1/#e9ecef/#eee) and dark `color: #212529/#333/#000` rule in
   theme.css via a proper CSS parse (not just grep), rather than fixing
   surfaces one at a time as they were reported. Body text stays readable by
   making body's own default text color light too, now that essentially
   every content surface (cards, tables, lists, modals) is dark instead of
   the white-card-on-dark-chrome hybrid from earlier rounds. */

body {
    color: var(--op-text-hover);
}

.form-control {
    background-color: var(--op-content-bg) !important;
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
/* The markdown editor (ticket/message fields) has
   `background-color: #fff !important` in theme.css on both the textarea
   and its live preview pane -- a plain override loses to !important
   regardless of specificity, so this needs !important too. */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    background-color: var(--op-content-bg) !important;
    color: var(--op-text-hover) !important;
}
.md-editor > .btn-toolbar {
    background-color: var(--op-surface-alt) !important;
}
.md-editor, div.md-editor.active {
    border-color: var(--op-content-border);
    background-color: var(--op-content-bg);
}
.markdown-editor-status {
    color: var(--op-text);
}
.md-editor .md-footer,
.md-editor > .md-header {
    background-color: var(--op-content-bg);
}
/* Fullscreen editor mode (bootstrap-markdown library, bundled in
   all.min.css, not theme.css) hardcodes `background: #fff !important`
   on the fullscreen container, the textarea/preview, and again on
   textarea:focus/:hover -- all need matching !important overrides. */
.md-editor.md-fullscreen-mode {
    background-color: var(--op-content-bg) !important;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    background-color: var(--op-content-bg) !important;
    color: var(--op-text-hover) !important;
}
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
    background-color: var(--op-content-bg) !important;
    color: var(--op-heading) !important;
}
.md-editor.md-fullscreen-mode .md-header {
    background: none;
}
.md-editor.md-fullscreen-mode .btn {
    color: var(--op-text);
}
.md-editor.md-fullscreen-mode .btn.active,
.md-editor.md-fullscreen-mode .btn:active,
.md-editor.md-fullscreen-mode .btn:focus,
.md-editor.md-fullscreen-mode .btn:hover {
    color: var(--op-heading);
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
    color: var(--op-text);
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
    color: var(--op-heading);
}
.view-ticket .posted-by {
    color: var(--op-text);
    background-color: var(--op-surface-alt);
}
.input-group-text {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
    color: var(--op-text);
}
.custom-select {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
.custom-control-label::before {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
}
.custom-file-label {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
.custom-file-label::after {
    background-color: var(--op-surface-alt);
    color: var(--op-text-hover);
}

.btn-light, .btn-default, .btn-outline-light:hover {
    background-color: var(--op-surface-alt);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
.btn-light:hover, .btn-default:hover {
    background-color: var(--op-content-border);
    color: var(--op-heading);
}

.table {
    color: var(--op-text-hover);
}
table.table-list thead th,
.table .thead-light th {
    background-color: var(--op-surface-alt);
    color: var(--op-heading);
    border-color: var(--op-content-border);
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--op-surface-alt);
}
.table-list > tbody > tr > td,
.table td, .table th {
    border-color: var(--op-content-border);
}
.table-list > tbody > tr > td {
    background-color: var(--op-content-bg) !important;
}
.table-hover tbody tr:hover {
    color: var(--op-heading);
    background-color: var(--op-content-border);
}

.list-group-item {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--op-surface-alt);
    color: var(--op-heading);
}

.modal-content {
    background-color: var(--op-content-bg);
    color: var(--op-text-hover);
}
.modal .modal-header {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
}
.close {
    color: var(--op-text-hover);
    text-shadow: none;
}
.close:hover {
    color: var(--op-heading);
}

.popover {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
}
.popover-body {
    color: var(--op-text-hover);
}

.badge-light {
    background-color: var(--op-surface-alt);
    color: var(--op-text-hover);
}

.progress {
    background-color: var(--op-surface-alt);
}

.nav-tabs {
    border-color: var(--op-content-border);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border) var(--op-content-border) var(--op-content-bg);
    color: var(--op-heading);
}

.jumbotron {
    background-color: var(--op-surface-alt);
}

.page-link {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
}
.page-item.disabled .page-link {
    background-color: var(--op-surface-alt);
    border-color: var(--op-content-border);
}

/* Homepage's "How Can We Help" / "Your Account" icon tiles */
.action-icon-btns a {
    background-color: var(--op-surface-alt);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}
.tiles .tile {
    background-color: var(--op-content-bg);
    border-right-color: var(--op-content-border);
    color: var(--op-text-hover);
}
/* Services list license key: shown as plain text instead of a clickable
   http://<key> link (clientareaproducts.tpl) -- stock <pre> is a
   block-level code-block style with its own background/border/padding,
   reset here to sit inline and compact like the link it replaced. */
.op-license-key {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    white-space: normal;
    color: var(--op-text);
}
.client-home-cards .card-header {
    background-color: var(--op-surface-alt);
    border-color: var(--op-content-border);
}

/* Alerts (e.g. knowledgebase "No Articles Found") -- stock Bootstrap 4
   pastel alerts (light background, dark saturated text) inverted to
   tinted-dark background with a brighter version of the same hue,
   keeping each variant's semantic color identity. */
.alert-success {
    color: #4ade80;
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
}
.alert-info {
    color: #67e8f9;
    background-color: rgba(23, 162, 184, 0.15);
    border-color: rgba(23, 162, 184, 0.4);
}
.alert-warning {
    color: #fbbf24;
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}
.alert-danger {
    color: #f87171;
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
}

.summary-container {
    background-color: var(--op-content-bg);
    border-color: var(--op-content-border);
    color: var(--op-text-hover);
}

/* Store product listing (cart.php) -- these are NOT in our theme's CSS at
   all. They live in templates/orderforms/standard_cart/css/style.css, a
   completely separate stylesheet for WHMCS's Order Forms system (its own
   template layer, independent of the client-area theme), which is why a
   plain override had no effect regardless of specificity -- !important
   forces it here since we can't control that file's load order. */
#order-standard_cart .products .product {
    background: var(--op-content-bg) !important;
    border-color: var(--op-content-border) !important;
}
#order-standard_cart .products .product header {
    background: var(--op-surface-alt) !important;
}
#order-standard_cart .products .product header span {
    color: var(--op-heading) !important;
}
#order-standard_cart .product-info {
    background-color: var(--op-surface-alt) !important;
    border-top-color: var(--op-content-border) !important;
    border-bottom-color: var(--op-content-border) !important;
}
#order-standard_cart .summary-container {
    background-color: transparent !important;
}
#order-standard_cart .view-cart-items .item {
    background-color: var(--op-content-bg) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--op-surface-alt) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
    background-color: var(--op-surface-alt) !important;
    border-color: var(--op-content-border) var(--op-content-border) var(--op-surface-alt) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--op-surface-alt) !important;
}

/* Generic active-tab fallback (e.g. "Apply Promo Code") -- covers any
   .nav-link.active regardless of whether the parent list is .nav-tabs,
   .nav-pills, or a plain .nav, since only .nav-tabs and .nav-pills had
   their active state styled in theme.css. */
.nav-link.active {
    background-color: var(--op-primary);
    color: #fff;
}