/*
 * Dedicated 2026 — WHMCS client area theme
 *
 * Load order: Google Fonts, tokens.css (vendored from dedicatedcom/dedicated-theme),
 * then this file, then intl-tel-input.css, then WHMCS's fontawesome, then custom.css.
 *
 * This file does two jobs:
 *   1. Implements the Bootstrap 3 class names that WHMCS core, hooks, modules and
 *      gateway output still emit (grid, forms, buttons, modals, dropdowns, tabs,
 *      alerts, panels, labels, tables) in the Dedicated look. No Bootstrap CSS is
 *      loaded; only its JS (bundled in scripts.min.js) which needs these names.
 *   2. Styles the WHMCS-specific components (sidebar, tickets, invoices, store).
 *
 * Rules, from THEME.md: one red accent, monospace body, Chakra Petch for titles and
 * primary buttons, radius 0 everywhere, hairline borders, cut corners on signature
 * containers. Red text at 13px or below uses --red-ink.
 *
 * Copyright (c) 2026 US Dedicated LLC. All rights reserved.
 */

/* =========================================================================
   0. Theme-local tokens
   ========================================================================= */
:root {
    --sidebar-w: 268px;
    --content-gap: 28px;
    --input-h: 38px;
    --info: var(--text);       /* "info" state has no colour of its own; it is white-ish text */
    --info-rgb: 201, 207, 216;
}
[data-theme="light"] {
    --info-rgb: 26, 30, 35;
}

/* =========================================================================
   1. Base element styles (scoped to .dt-page so tokens.css stays pure)
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
body.dt-page {
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}
.dt-page a { color: var(--red-ink); text-decoration: none; }
.dt-page a:hover, .dt-page a:focus-visible { color: var(--white); }
.dt-page p { margin: 0 0 12px; }
.dt-page p:last-child { margin-bottom: 0; }
.dt-page hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.dt-page img { max-width: 100%; height: auto; vertical-align: middle; }
.dt-page small, .dt-page .small { font-size: 11.5px; letter-spacing: 0.02em; }
.dt-page b, .dt-page strong { font-weight: 600; color: var(--white); }
.dt-page em { font-style: italic; }
.dt-page ul, .dt-page ol { margin: 0 0 12px 20px; }
.dt-page li { margin: 2px 0; }
.dt-page address { font-style: normal; margin: 0 0 12px; line-height: 1.6; }
.dt-page blockquote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid var(--red);
    border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 13px;
}
.dt-page blockquote p { margin: 0; }
.dt-page code, .dt-page kbd, .dt-page samp {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--white);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 1px 5px;
}
.dt-page pre {
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-output);
    background:
        repeating-linear-gradient(0deg, var(--scan-ink) 0 1px, transparent 1px 3px),
        var(--output);
    border: 1px solid var(--line);
    padding: 14px 16px;
    margin: 0 0 14px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}
.dt-page pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.dt-page table { border-collapse: collapse; border-spacing: 0; }
.dt-page label { display: inline-block; max-width: 100%; }
.dt-page textarea, .dt-page select { font: inherit; color: inherit; }
.dt-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.dt-page legend {
    display: block; width: 100%;
    font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--white); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.dt-page iframe { border: 0; max-width: 100%; }
.dt-page [hidden], .dt-page .hidden, .dt-page .d-none, .dt-page .w-hidden { display: none !important; }
.dt-page .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.dt-page .sr-only-focusable:active, .dt-page .sr-only-focusable:focus {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
}
/* reduced-motion: tokens.css handles its own keyframes; disable ours too */
@media (prefers-reduced-motion: reduce) {
    .dt-page *, .dt-page *::before, .dt-page *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- headings ---- */
.dt-page h1, .dt-page h2, .dt-page h3, .dt-page h4, .dt-page h5, .dt-page h6 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--white);
    line-height: 1.15;
    margin: 0 0 12px;
}
.dt-page h1 { font-size: clamp(26px, 4.5vw, 40px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.dt-page h2 { font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 8px; }
.dt-page h3 { font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; }
.dt-page h4 { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.dt-page h5 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.dt-page h6 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.dt-page h1 small, .dt-page h2 small, .dt-page h3 small {
    display: block; font-family: var(--mono); font-weight: 400; font-size: 12.5px;
    letter-spacing: 0.02em; text-transform: none; color: var(--muted); margin-top: 6px;
}
/* The section heading used across the client area: eyebrow line with a // prefix. */
.dt-page .dt-eyebrow { margin-top: 4px; }
.dt-page h2.dt-section, .dt-page .dt-section {
    font-family: var(--mono); font-weight: 500; font-size: 13.5px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--red-ink); margin: 28px 0 12px;
}
.dt-page .dt-section::before { content: '// '; color: var(--muted); }
.dt-page .dt-section:first-child { margin-top: 0; }
.dt-page .dt-section .badge { margin-left: 8px; }

/* =========================================================================
   2. Layout: shell, grid, utilities
   ========================================================================= */
.dt-page .container, .dt-page .container-fluid {
    width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--gutter);
}
.dt-page .container-fluid { max-width: none; }
.dt-page .container-fluid.without-padding { padding: 0; overflow-x: hidden; }
.dt-page .container::after, .dt-page .row::after, .dt-page .clearfix::after,
.dt-page .form-horizontal .form-group::after, .dt-page .btn-toolbar::after, .dt-page .panel-body::after { content: ''; display: table; clear: both; }

.dt-page .row { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.dt-page .row.no-gutters { margin-left: 0; margin-right: 0; }
.dt-page .row.no-gutters > [class*="col-"] { padding-left: 0; padding-right: 0; }
.dt-page [class*="col-xs-"], .dt-page [class*="col-sm-"], .dt-page [class*="col-md-"], .dt-page [class*="col-lg-"] {
    position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; width: 100%; flex: 0 0 auto;
}
.dt-page .col-xs-1 { width: 8.3333%; } .dt-page .col-xs-2 { width: 16.6667%; } .dt-page .col-xs-3 { width: 25%; }
.dt-page .col-xs-4 { width: 33.3333%; } .dt-page .col-xs-5 { width: 41.6667%; } .dt-page .col-xs-6 { width: 50%; }
.dt-page .col-xs-7 { width: 58.3333%; } .dt-page .col-xs-8 { width: 66.6667%; } .dt-page .col-xs-9 { width: 75%; }
.dt-page .col-xs-10 { width: 83.3333%; } .dt-page .col-xs-11 { width: 91.6667%; } .dt-page .col-xs-12 { width: 100%; }
.dt-page .col-xs-offset-0 { margin-left: 0; } .dt-page .col-xs-offset-1 { margin-left: 8.3333%; } .dt-page .col-xs-offset-2 { margin-left: 16.6667%; }
.dt-page .col-xs-offset-3 { margin-left: 25%; } .dt-page .col-xs-offset-4 { margin-left: 33.3333%; } .dt-page .col-xs-offset-6 { margin-left: 50%; }
@media (min-width: 768px) {
    .dt-page .col-sm-1 { width: 8.3333%; } .dt-page .col-sm-2 { width: 16.6667%; } .dt-page .col-sm-3 { width: 25%; }
    .dt-page .col-sm-4 { width: 33.3333%; } .dt-page .col-sm-5 { width: 41.6667%; } .dt-page .col-sm-6 { width: 50%; }
    .dt-page .col-sm-7 { width: 58.3333%; } .dt-page .col-sm-8 { width: 66.6667%; } .dt-page .col-sm-9 { width: 75%; }
    .dt-page .col-sm-10 { width: 83.3333%; } .dt-page .col-sm-11 { width: 91.6667%; } .dt-page .col-sm-12 { width: 100%; }
    .dt-page .col-sm-offset-0 { margin-left: 0; } .dt-page .col-sm-offset-1 { margin-left: 8.3333%; } .dt-page .col-sm-offset-2 { margin-left: 16.6667%; }
    .dt-page .col-sm-offset-3 { margin-left: 25%; } .dt-page .col-sm-offset-4 { margin-left: 33.3333%; } .dt-page .col-sm-offset-5 { margin-left: 41.6667%; }
    .dt-page .col-sm-offset-6 { margin-left: 50%; } .dt-page .col-sm-offset-8 { margin-left: 66.6667%; }
}
@media (min-width: 992px) {
    .dt-page .col-md-1 { width: 8.3333%; } .dt-page .col-md-2 { width: 16.6667%; } .dt-page .col-md-3 { width: 25%; }
    .dt-page .col-md-4 { width: 33.3333%; } .dt-page .col-md-5 { width: 41.6667%; } .dt-page .col-md-6 { width: 50%; }
    .dt-page .col-md-7 { width: 58.3333%; } .dt-page .col-md-8 { width: 66.6667%; } .dt-page .col-md-9 { width: 75%; }
    .dt-page .col-md-10 { width: 83.3333%; } .dt-page .col-md-11 { width: 91.6667%; } .dt-page .col-md-12 { width: 100%; }
    .dt-page .col-md-offset-0 { margin-left: 0; } .dt-page .col-md-offset-1 { margin-left: 8.3333%; } .dt-page .col-md-offset-2 { margin-left: 16.6667%; }
    .dt-page .col-md-offset-3 { margin-left: 25%; } .dt-page .col-md-offset-4 { margin-left: 33.3333%; } .dt-page .col-md-offset-6 { margin-left: 50%; }
}
@media (min-width: 1200px) {
    .dt-page .col-lg-1 { width: 8.3333%; } .dt-page .col-lg-2 { width: 16.6667%; } .dt-page .col-lg-3 { width: 25%; }
    .dt-page .col-lg-4 { width: 33.3333%; } .dt-page .col-lg-5 { width: 41.6667%; } .dt-page .col-lg-6 { width: 50%; }
    .dt-page .col-lg-7 { width: 58.3333%; } .dt-page .col-lg-8 { width: 66.6667%; } .dt-page .col-lg-9 { width: 75%; }
    .dt-page .col-lg-10 { width: 83.3333%; } .dt-page .col-lg-11 { width: 91.6667%; } .dt-page .col-lg-12 { width: 100%; }
    .dt-page .col-lg-offset-2 { margin-left: 16.6667%; } .dt-page .col-lg-offset-3 { margin-left: 25%; }
}
/* visibility helpers (Bootstrap 3 names, used by core-emitted markup) */
@media (max-width: 767px) { .dt-page .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .dt-page .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .dt-page .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .dt-page .hidden-lg { display: none !important; } }
.dt-page .visible-xs, .dt-page .visible-sm, .dt-page .visible-md, .dt-page .visible-lg,
.dt-page .visible-xs-block, .dt-page .visible-xs-inline { display: none !important; }
@media (max-width: 767px) { .dt-page .visible-xs, .dt-page .visible-xs-block { display: block !important; } .dt-page .visible-xs-inline { display: inline !important; } .dt-page .d-lg-none { display: block !important; } .dt-page .d-lg-block { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .dt-page .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .dt-page .visible-md { display: block !important; } }
@media (min-width: 1200px) { .dt-page .visible-lg { display: block !important; } }
@media print { .dt-page .hidden-print { display: none !important; } }

/* text + spacing utilities */
.dt-page .text-center { text-align: center; } .dt-page .text-left { text-align: left; } .dt-page .text-right { text-align: right; }
.dt-page .text-muted { color: var(--muted); } .dt-page .text-danger { color: var(--red-hi); } .dt-page .text-success { color: var(--ok); }
.dt-page .text-warning { color: var(--warn); } .dt-page .text-info { color: var(--text); } .dt-page .text-primary { color: var(--white); }
.dt-page .text-md { font-size: 13px; } .dt-page .text-nowrap { white-space: nowrap; } .dt-page .text-uppercase { text-transform: uppercase; }
.dt-page .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-page .font-weight-bold { font-weight: 600; color: var(--white); }
.dt-page .pull-right { float: right !important; } .dt-page .pull-left { float: left !important; }
.dt-page .center-block { display: block; margin-left: auto; margin-right: auto; }
.dt-page .lead { font-size: 15px; color: var(--muted); line-height: 1.7; }
.dt-page .margin-bottom { margin-bottom: 20px; } .dt-page .margin-bottom-5 { margin-bottom: 5px; }
.dt-page .margin-top { margin-top: 20px; } .dt-page .margin-top-5 { margin-top: 5px; } .dt-page .margin-10 { margin: 10px 0; }
.dt-page .top-margin-10 { margin-top: 10px; } .dt-page .top-margin-5 { margin-top: 5px; } .dt-page .mb-0 { margin-bottom: 0 !important; }
.dt-page .my-auto { margin-top: auto; margin-bottom: auto; } .dt-page .no-padding { padding: 0 !important; }
.dt-page .justify-content-center { justify-content: center; } .dt-page .align-items-center { align-items: center; }
.dt-page .d-flex { display: flex; } .dt-page .d-block { display: block; } .dt-page .d-inline-block { display: inline-block; }
.dt-page .img-responsive, .dt-page .img-fluid { display: block; max-width: 100%; height: auto; }
.dt-page .img-thumbnail { border: 1px solid var(--line); background: var(--panel); padding: 4px; }
.dt-page .well {
    padding: 14px 16px; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.dt-page .well-sm { padding: 8px 12px; }
.dt-page .small-text, .dt-page .small-font { font-size: 12.5px; }
.dt-page .text-domain { color: var(--muted); font-size: 12.5px; }
.dt-page .line-break { height: 10px; }

/* =========================================================================
   3. Topbar and navigation
   ========================================================================= */
.dt-page .dt-topbar { gap: 12px; }
.dt-page .dt-brand-sub { text-transform: uppercase; }
.dt-page .dt-topbar-right { gap: 14px; }
.dt-page .dt-topbar-right a { color: var(--muted); text-decoration: none; letter-spacing: 0.08em; }
.dt-page .dt-topbar-right a:hover, .dt-page .dt-topbar-right a:focus-visible { color: var(--white); }
.dt-page .dt-topbar-right .dt-btn { padding: 7px 18px; font-size: 12px; letter-spacing: 0.12em; }
.dt-page .dt-topbar-right .badge { margin-left: 4px; }
.dt-page .dt-topbar-right .dt-flags { height: 28px; }
.dt-page .dt-topbar-right .dt-flag { padding: 0 10px; font-size: 11.5px; line-height: 26px; }
.dt-page .dt-topbar-right .dt-flag::before { content: ''; }
.dt-page .dt-clock { font-variant-numeric: tabular-nums; }
.dt-page .dt-topbar .dt-admin-return { color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.4); padding: 4px 8px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.dt-page .dt-topbar .dt-admin-return:hover { color: var(--white); border-color: var(--warn); }
/* Mobile menu toggle */
.dt-page .dt-nav-toggle {
    display: none; appearance: none; background: transparent; border: 1px solid var(--line); color: var(--muted);
    width: 34px; height: 28px; cursor: pointer; padding: 0; position: relative;
}
.dt-page .dt-nav-toggle:hover { color: var(--white); border-color: var(--red); }
.dt-page .dt-nav-toggle .icon-bar { display: block; width: 14px; height: 2px; background: currentColor; margin: 0 auto; }
.dt-page .dt-nav-toggle .icon-bar + .icon-bar { margin-top: 3px; }

/* Main menu: a hairline strip under the topbar. Items are tabs in the dt-flag voice. */
.dt-page .dt-nav {
    border-bottom: 1px solid var(--line);
    background: rgba(var(--bg-rgb), 0.6);
}
.dt-page .dt-nav .container { display: flex; justify-content: space-between; align-items: stretch; gap: 10px; }
.dt-page .navbar-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; }
.dt-page .navbar-nav > li { margin: 0; position: relative; display: flex; }
.dt-page .navbar-nav > li > a {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted);
    border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--t-fast), background var(--t-fast);
}
.dt-page .navbar-nav > li > a:hover, .dt-page .navbar-nav > li > a:focus-visible { color: var(--text); }
.dt-page .navbar-nav > li.active > a, .dt-page .navbar-nav > li.open > a { color: var(--red-hi); background: var(--red-dim); border-bottom-color: var(--red); }
.dt-page .navbar-nav > li > a .caret { margin-left: 2px; }
.dt-page .navbar-nav > li > a .badge { margin-left: 2px; }
.dt-page .navbar-nav > li > a > i { font-size: 11px; opacity: 0.7; }
.dt-page .navbar-nav .dropdown-menu { top: 100%; left: 0; margin-top: -1px; }
.dt-page .navbar-right { margin-left: auto; }
.dt-page .navbar-collapse { display: contents; }
/* generic caret: a small text mark, not a CSS triangle */
.dt-page .caret { display: inline-block; width: 0; height: 0; border-top: 4px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; vertical-align: middle; opacity: 0.7; }

/* homepage hero (domain search / order shortcuts) */
.dt-page .dt-hero { border-bottom: 1px solid var(--line); padding: 36px 0 30px; }
.dt-page .dt-hero .dt-h1 { margin-bottom: 14px; }
.dt-page .dt-hero .dt-console { margin-bottom: 0; }
.dt-page .dt-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dt-page .dt-shortcuts a.dt-card { flex: 1 1 180px; max-width: none; color: var(--text); }
.dt-page .dt-shortcuts a.dt-card:hover { border-color: var(--red); color: var(--white); }
.dt-page .dt-shortcuts a.dt-card .dt-card-code { flex: 1; }
.dt-page .dt-shortcuts a.dt-card::after { content: '>>'; color: var(--red-ink); font-weight: 600; font-size: 12px; }

/* =========================================================================
   4. Page shell, header line, breadcrumb
   ========================================================================= */
.dt-page #main-body { flex: 1 0 auto; }
.dt-page .dt-shell { padding-top: 30px; }
.dt-page .dt-main { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--content-gap); align-items: start; }
.dt-page .dt-main > .dt-sidebar { grid-column: 1; grid-row: 1; min-width: 0; }
.dt-page .dt-main > .dt-sidebar-secondary { grid-row: 2; margin-top: 14px; }
.dt-page .dt-main > .dt-sidebar-secondary:first-child { grid-row: 1; margin-top: 0; }
.dt-page .dt-main > .main-content { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.dt-page .dt-main.dt-main-full { grid-template-columns: minmax(0, 1fr); }
.dt-page .dt-main.dt-main-full > .main-content { grid-column: 1; }
.dt-page .dt-page-head { margin-bottom: 24px; }
.dt-page .dt-page-head .dt-h1 { margin: 0; }
.dt-page .dt-page-head .dt-lede { margin-top: 8px; }
.dt-page .header-lined { margin-bottom: 24px; }
.dt-page .breadcrumb {
    list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 6px;
    font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.dt-page .breadcrumb::before { content: '// '; }
.dt-page .breadcrumb > li + li::before { content: '/'; color: var(--line); margin-right: 6px; }
.dt-page .breadcrumb > li > a { color: var(--muted); }
.dt-page .breadcrumb > li > a:hover { color: var(--white); }
.dt-page .breadcrumb > li.active { color: var(--red-ink); }

/* =========================================================================
   5. Buttons
   ========================================================================= */
.dt-page .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    appearance: none; cursor: pointer; text-decoration: none; vertical-align: middle;
    font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.2;
    padding: 9px 16px; min-height: 36px; max-width: 100%;
    background: transparent; color: var(--text); border: 1px solid var(--line);
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-page .btn:hover, .dt-page .btn:focus-visible { color: var(--white); border-color: var(--red); background: transparent; }
.dt-page .btn > i { font-size: 11px; opacity: 0.8; }
.dt-page .btn img { height: 14px; width: auto; }
.dt-page .btn.disabled, .dt-page .btn:disabled, .dt-page .btn[disabled] {
    cursor: not-allowed; color: var(--disabled-text); border-color: var(--line); background: transparent; box-shadow: none; opacity: 0.8;
}
/* primary = the red Chakra Petch button with the double cut corner */
.dt-page .btn-primary, .dt-page .dt-btn, .dt-page .btn-success.btn-primary {
    background: var(--red); color: var(--on-red); border-color: var(--red);
    font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 9px 24px; clip-path: var(--cut-sm);
}
.dt-page .btn-primary:hover:not(:disabled):not(.disabled), .dt-page .btn-primary:focus-visible, .dt-page .dt-btn:hover:not(:disabled) {
    background: var(--red-hi); border-color: var(--red-hi); color: var(--on-red); box-shadow: var(--glow-button);
}
.dt-page .btn-primary.disabled, .dt-page .btn-primary:disabled, .dt-page .dt-btn:disabled {
    background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-text); opacity: 1;
}
/* state buttons are outlines in their state colour; nothing but primary gets a fill */
.dt-page .btn-success { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.5); }
.dt-page .btn-success:hover:not(:disabled), .dt-page .btn-success:focus-visible { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 12px rgba(var(--ok-rgb), 0.25); }
.dt-page .btn-warning { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.5); }
.dt-page .btn-warning:hover:not(:disabled), .dt-page .btn-warning:focus-visible { color: var(--warn); border-color: var(--warn); }
.dt-page .btn-danger { color: var(--red-hi); border-color: rgba(var(--red-rgb), 0.5); }
.dt-page .btn-danger:hover:not(:disabled), .dt-page .btn-danger:focus-visible { color: var(--red-hi); border-color: var(--red); box-shadow: 0 0 12px rgba(var(--red-rgb), 0.25); }
.dt-page .btn-info { color: var(--white); border-color: var(--muted); }
.dt-page .btn-info:hover:not(:disabled) { border-color: var(--red); }
.dt-page .btn-default { color: var(--text); }
.dt-page .btn-link { border-color: transparent; color: var(--red-ink); padding-left: 6px; padding-right: 6px; }
.dt-page .btn-link:hover, .dt-page .btn-link:focus-visible { color: var(--white); border-color: transparent; text-decoration: underline; text-decoration-style: dotted; }
.dt-page .btn-sm, .dt-page .btn-group-sm > .btn { padding: 5px 11px; min-height: 28px; font-size: 12px; }
.dt-page .btn-primary.btn-sm { padding: 5px 16px; letter-spacing: 0.12em; }
.dt-page .btn-xs, .dt-page .btn-group-xs > .btn { padding: 2px 8px; min-height: 22px; font-size: 11px; letter-spacing: 0.06em; }
.dt-page .btn-lg { padding: 12px 26px; min-height: 44px; font-size: 14px; }
.dt-page .btn-block { display: flex; width: 100%; }
.dt-page .btn-block + .btn-block { margin-top: 6px; }
.dt-page .btn .fa-spin, .dt-page .btn .fa-spinner { font-size: 11px; }
.dt-page .btn .loading { display: inline-flex; }
/* button groups */
.dt-page .btn-group, .dt-page .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }
.dt-page .btn-group > .btn + .btn, .dt-page .btn-group > .btn-group + .btn-group, .dt-page .btn-group > .btn + .btn-group, .dt-page .btn-group > .btn-group + .btn { margin-left: -1px; }
.dt-page .btn-group > .btn:hover, .dt-page .btn-group > .btn:focus-visible { position: relative; z-index: 2; }
.dt-page .btn-group .dropdown-toggle { padding-left: 10px; padding-right: 10px; }
.dt-page .btn-group-vertical { flex-direction: column; }
.dt-page .btn-group-vertical > .btn + .btn { margin-top: -1px; }
.dt-page .btn-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-page .dt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.dt-page .dt-actions.dt-actions-end { justify-content: flex-end; }
.dt-page .dt-actions.dt-actions-center { justify-content: center; }
/* iCheck-styled buttons and the social sign-in buttons degrade to plain .btn */
.dt-page .btn-social, .dt-page .btn-facebook, .dt-page .btn-twitter { color: var(--text); }
.dt-page .social-signin-btns { display: flex; flex-direction: column; gap: 8px; }
.dt-page .social-signin-btns .btn, .dt-page .social-signin-btns button { width: 100%; }
.dt-page .close {
    appearance: none; background: transparent; border: 0; color: var(--muted); cursor: pointer;
    font: 600 18px/1 var(--mono); padding: 0 4px; float: right;
}
.dt-page .close:hover, .dt-page .close:focus-visible { color: var(--white); }
.dt-page a.btn.active, .dt-page .btn.active { color: var(--red-hi); background: var(--red-dim); border-color: rgba(var(--red-rgb), 0.5); }
.dt-page .btn-primary.active { color: var(--on-red); background: var(--red-hi); }

/* =========================================================================
   6. Forms
   ========================================================================= */
.dt-page .form-group { margin-bottom: 16px; }
.dt-page .form-group:last-child { margin-bottom: 0; }
.dt-page label, .dt-page .control-label, .dt-page .col-form-label {
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px; font-weight: 400;
}
.dt-page label.required::after, .dt-page .control-label.required::after { content: ' *'; color: var(--red-ink); }
.dt-page .form-control, .dt-page .dt-input,
.dt-page input[type="text"], .dt-page input[type="email"], .dt-page input[type="password"], .dt-page input[type="number"],
.dt-page input[type="tel"], .dt-page input[type="url"], .dt-page input[type="search"], .dt-page input[type="date"],
.dt-page select, .dt-page textarea {
    display: block; width: 100%; min-height: var(--input-h);
    background: var(--bg); border: 1px solid var(--line); color: var(--white);
    font-family: var(--mono); font-size: 13.5px; line-height: 1.4; padding: 8px 12px;
    caret-color: var(--red); transition: border-color var(--t-fast), box-shadow var(--t-fast);
    appearance: none; -webkit-appearance: none;
}
.dt-page input[type="checkbox"], .dt-page input[type="radio"] {
    appearance: none; -webkit-appearance: none; display: inline-block; width: 14px; height: 14px; min-height: 0;
    border: 1px solid var(--line); background: var(--bg); vertical-align: -2px; margin: 0 6px 0 0; padding: 0; cursor: pointer; flex: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.dt-page input[type="radio"] { border-radius: 50%; }
.dt-page input[type="checkbox"]:hover, .dt-page input[type="radio"]:hover { border-color: var(--muted); }
.dt-page input[type="checkbox"]:checked, .dt-page input[type="radio"]:checked { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 3px var(--bg); }
.dt-page input[type="checkbox"]:disabled, .dt-page input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.5; }
.dt-page input[type="file"], .dt-page input[type="file"].form-control {
    padding: 6px 12px; color: var(--muted); font-size: 12.5px; height: auto; min-height: 0;
}
.dt-page input[type="file"]::file-selector-button {
    font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
    background: transparent; border: 1px solid var(--line); padding: 5px 10px; margin-right: 10px; cursor: pointer;
}
.dt-page input[type="file"]::file-selector-button:hover { border-color: var(--red); color: var(--white); }
.dt-page input[type="submit"], .dt-page input[type="button"], .dt-page input[type="reset"], .dt-page button { width: auto; }
.dt-page .form-control::placeholder, .dt-page input::placeholder, .dt-page textarea::placeholder { color: var(--placeholder); }
.dt-page .form-control:focus, .dt-page .dt-input:focus, .dt-page input:focus, .dt-page select:focus, .dt-page textarea:focus {
    outline: none; border-color: var(--red); box-shadow: var(--glow-focus);
}
.dt-page input[type="checkbox"]:focus-visible, .dt-page input[type="radio"]:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--red); }
.dt-page .form-control[disabled], .dt-page .form-control[readonly], .dt-page input[disabled], .dt-page select[disabled], .dt-page textarea[disabled] {
    color: var(--disabled-text); background: var(--panel); cursor: not-allowed; opacity: 1;
}
.dt-page .form-control[readonly] { cursor: default; }
.dt-page textarea, .dt-page textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.55; }
.dt-page select, .dt-page select.form-control {
    padding-right: 32px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.dt-page select[multiple], .dt-page select[size] { background-image: none; padding-right: 12px; min-height: 90px; }
.dt-page select option { background: var(--panel-2); color: var(--text); }
.dt-page .input-lg, .dt-page .form-control.input-lg { min-height: 46px; font-size: 15px; padding: 10px 14px; }
.dt-page .input-sm, .dt-page .form-control.input-sm { min-height: 30px; font-size: 12.5px; padding: 4px 10px; }
.dt-page .input-inline { display: inline-block; width: auto; vertical-align: middle; }
.dt-page .input-inline-100 { width: 100px; }
.dt-page .select-inline { display: inline-block; width: auto; }
.dt-page .form-control-static { padding-top: 9px; min-height: var(--input-h); color: var(--text); }
.dt-page .help-block, .dt-page .form-text { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); }
.dt-page .help-block b, .dt-page .dt-hint b { color: var(--text); font-weight: 500; }
.dt-page .field-error-msg { display: block; margin-top: 6px; font-size: 11.5px; color: var(--red-hi); }
.dt-page .field-error-msg:empty { display: none; }
.dt-page .form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.dt-page .form-horizontal .control-label { padding-top: 10px; margin-bottom: 0; }
@media (min-width: 768px) { .dt-page .form-horizontal .control-label { text-align: right; } }
.dt-page .form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dt-page .form-inline .form-control, .dt-page .form-inline select { width: auto; display: inline-block; }
.dt-page .form-inline .form-group { margin-bottom: 0; display: inline-flex; align-items: center; gap: 8px; }
/* checkbox / radio wrappers */
.dt-page .checkbox, .dt-page .radio { position: relative; display: block; margin: 8px 0 12px; }
.dt-page .checkbox label, .dt-page .radio label, .dt-page .checkbox-inline, .dt-page .radio-inline, .dt-page .icheck-label, .dt-page label.dt-choice {
    display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer;
    font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 0; line-height: 1.45;
}
.dt-page .checkbox-inline, .dt-page .radio-inline { margin-right: 14px; }
.dt-page .checkbox input, .dt-page .radio input, .dt-page .checkbox-inline input, .dt-page .radio-inline input { margin-top: 2px; }
.dt-page .checkbox.disabled label, .dt-page .radio.disabled label { color: var(--disabled-text); cursor: not-allowed; }
/* iCheck plugin output (whmcs.js initialises .icheck-button with the square-blue skin) */
.dt-page .icheckbox_square-blue, .dt-page .iradio_square-blue {
    display: inline-block; position: relative; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
    border: 1px solid var(--line); background: var(--bg); cursor: pointer; flex: none;
}
.dt-page .iradio_square-blue { border-radius: 50%; }
.dt-page .icheckbox_square-blue.hover, .dt-page .iradio_square-blue.hover { border-color: var(--muted); }
.dt-page .icheckbox_square-blue.checked, .dt-page .iradio_square-blue.checked { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 3px var(--bg); }
.dt-page .icheckbox_square-blue.disabled, .dt-page .iradio_square-blue.disabled { opacity: 0.5; cursor: not-allowed; }
.dt-page .icheckbox_square-blue .iCheck-helper, .dt-page .iradio_square-blue .iCheck-helper { position: absolute; inset: 0; }
/* toggle switches are rendered by the bootstrap-switch plugin (whmcs.js initialises .toggle-switch-success); see section 15 */
/* validation states */
.dt-page .has-error .form-control, .dt-page .has-error input, .dt-page .has-error select, .dt-page .has-error button { border-color: var(--red); }
.dt-page .has-error .control-label, .dt-page .has-error .help-block, .dt-page .has-error label { color: var(--red-hi); }
.dt-page .has-success .form-control, .dt-page .has-success input { border-color: var(--ok); }
.dt-page .has-warning .form-control, .dt-page .has-warning input { border-color: var(--warn); }
.dt-page .has-feedback { position: relative; }
.dt-page .has-feedback .form-control { padding-right: 36px; }
.dt-page .form-control-feedback {
    position: absolute; top: 0; right: 10px; z-index: 2; display: block; width: 24px; height: var(--input-h); line-height: var(--input-h);
    text-align: center; pointer-events: none; font-weight: 600; font-size: 12px; color: var(--muted);
}
.dt-page .has-feedback label ~ .form-control-feedback { top: 23px; }
.dt-page .has-success .form-control-feedback { color: var(--ok); }
.dt-page .has-warning .form-control-feedback { color: var(--warn); }
.dt-page .has-error .form-control-feedback { color: var(--red-hi); }
/* glyphicon fallbacks: WHMCS JS toggles these names on feedback icons. Text marks, no icon font. */
.dt-page .glyphicon { font-family: var(--mono); font-style: normal; }
.dt-page .glyphicon-ok::before { content: '\2713'; }
.dt-page .glyphicon-remove::before { content: '\00D7'; }
.dt-page .glyphicon-warning-sign::before { content: '!'; }
.dt-page .glyphicon-shopping-cart::before { content: '\2192'; }
/* input groups */
.dt-page .input-group { display: flex; width: 100%; align-items: stretch; }
.dt-page .input-group > .form-control, .dt-page .input-group > input { flex: 1 1 auto; width: 1%; min-width: 0; }
.dt-page .input-group-addon, .dt-page .input-group-btn, .dt-page .input-group-append, .dt-page .input-group-prepend { display: flex; align-items: stretch; flex: none; }
.dt-page .input-group-addon {
    padding: 0 12px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; white-space: nowrap;
}
.dt-page .input-group > * + * { margin-left: -1px; }
.dt-page .input-group-btn > .btn { height: 100%; min-height: var(--input-h); }
.dt-page .input-group-btn > .btn + .btn { margin-left: -1px; }
.dt-page .input-group-lg > .form-control { min-height: 46px; font-size: 15px; }
.dt-page .input-group-lg .btn { min-height: 46px; }
.dt-page .input-group-xs .btn { min-height: 28px; }
.dt-page .input-group .form-control:focus { position: relative; z-index: 2; }
/* captcha block */
.dt-page .captchaimage img { border: 1px solid var(--line); background: var(--white); }
.dt-page .recaptcha-container { display: flex; justify-content: center; }
.dt-page .recaptcha-container > div { margin: 0 auto; }
/* password strength */
.dt-page .progress { height: 6px; background: var(--bg); border: 1px solid var(--line); margin: 10px 0 12px; overflow: hidden; }
.dt-page .progress-bar { height: 100%; background: var(--muted); transition: width var(--t-med); }
.dt-page .progress-bar-danger { background: var(--red); } .dt-page .progress-bar-warning { background: var(--warn); } .dt-page .progress-bar-success { background: var(--ok); }
.dt-page .generate-password { cursor: pointer; }
/* definition lists used on detail pages */
.dt-page .dt-dl { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 0; margin: 0 0 16px; border: 1px solid var(--line); background: var(--panel); }
.dt-page .dt-dl > dt, .dt-page .dt-dl > dd { padding: 9px 14px; border-bottom: 1px solid var(--line); margin: 0; font-size: 13px; min-width: 0; word-break: break-word; }
.dt-page .dt-dl > dt { color: var(--muted); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 11px; }
.dt-page .dt-dl > dd { color: var(--text); }
.dt-page .dt-dl > dt:nth-last-of-type(1), .dt-page .dt-dl > dd:last-child { border-bottom: 0; }
.dt-page .dt-dl > dd b, .dt-page .dt-dl > dd strong { color: var(--white); }
@media (max-width: 560px) { .dt-page .dt-dl { grid-template-columns: 1fr; } .dt-page .dt-dl > dt { border-bottom: 0; padding-bottom: 0; } }
/* key/value row inside panes (e.g. invoice totals) */
.dt-page .dt-kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dt-page .dt-kv:last-child { border-bottom: 0; }
.dt-page .dt-kv > span:first-child { color: var(--muted); }
.dt-page .dt-kv > span:last-child { color: var(--white); text-align: right; }
.dt-page .dt-kv.dt-kv-total > span { color: var(--white); font-weight: 600; }

/* =========================================================================
   7. Panels, panes, cards, sidebar
   ========================================================================= */
.dt-page .panel, .dt-page .dt-pane { position: relative; border: 1px solid var(--line); background: var(--panel); margin-bottom: 16px; }
.dt-page .panel-heading, .dt-page .dt-pane-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: 12.5px; color: var(--muted);
}
.dt-page .panel-title, .dt-page .dt-pane-title {
    font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white);
    margin: 0; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dt-page .panel-title::before { content: '\250C'; color: var(--red-ink); font-weight: 400; } /* .dt-pane-title gets its mark from tokens.css via <b>::before */
.dt-page .panel-title strong { color: inherit; font-weight: inherit; }
.dt-page .panel-title > i, .dt-page .dt-pane-title > i { font-size: 11px; color: var(--muted); }
.dt-page .panel-title .pull-right, .dt-page .dt-pane-title .pull-right { margin-left: auto; float: none; }
.dt-page .panel-title .badge { margin-left: 2px; }
.dt-page .panel-body, .dt-page .dt-pane-body { padding: 14px 16px; }
.dt-page .panel-body > :last-child { margin-bottom: 0; }
.dt-page .panel-footer, .dt-page .dt-pane-foot { padding: 9px 14px; border-top: 1px solid var(--line); background: var(--panel-2); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dt-page .panel-footer:empty { display: none; }
.dt-page .panel-footer .btn { min-height: 28px; padding: 5px 11px; font-size: 12px; }
.dt-page .panel > .table, .dt-page .panel > .table-responsive > .table { margin-bottom: 0; border: 0; }
.dt-page .panel > .list-group { border: 0; margin: 0; }
/* panel state variants: a 3px left rule in the state colour on the heading */
.dt-page .panel-primary > .panel-heading { box-shadow: inset 3px 0 0 var(--red); }
.dt-page .panel-success > .panel-heading { box-shadow: inset 3px 0 0 var(--ok); }
.dt-page .panel-info > .panel-heading { box-shadow: inset 3px 0 0 var(--muted); }
.dt-page .panel-warning > .panel-heading { box-shadow: inset 3px 0 0 var(--warn); }
.dt-page .panel-danger > .panel-heading { box-shadow: inset 3px 0 0 var(--red); }
.dt-page .panel-danger > .panel-heading .panel-title, .dt-page .panel-danger > .panel-heading .panel-title::before { color: var(--red-hi); }
.dt-page .panel-success > .panel-heading .panel-title::before { color: var(--ok); }
.dt-page .panel-warning > .panel-heading .panel-title::before { color: var(--warn); }
/* client-home accent colours (WHMCS hands these out per panel) fold into the single-accent rule */
.dt-page [class*="panel-accent-"] > .panel-heading { box-shadow: inset 3px 0 0 var(--red); }
.dt-page .panel-accent-green > .panel-heading, .dt-page .panel-accent-emerald > .panel-heading, .dt-page .panel-accent-turquoise > .panel-heading { box-shadow: inset 3px 0 0 var(--ok); }
.dt-page .panel-accent-orange > .panel-heading, .dt-page .panel-accent-gold > .panel-heading, .dt-page .panel-accent-yellow > .panel-heading { box-shadow: inset 3px 0 0 var(--warn); }
.dt-page .panel-accent-gray > .panel-heading, .dt-page .panel-accent-grey > .panel-heading, .dt-page .panel-accent-asbestos > .panel-heading, .dt-page .panel-accent-silver > .panel-heading { box-shadow: inset 3px 0 0 var(--muted); }
.dt-page [class*="bg-color-"] { background: transparent !important; }
/* the signature console container (cut corner), for the primary form on a page */
.dt-page .dt-console { margin-bottom: 24px; }
.dt-page .dt-console > :last-child { margin-bottom: 0; }
.dt-page .dt-console .dt-pane-head { margin: -18px -18px 16px; }
/* collapsible panels (sidebar + product details). whmcs.js toggles .panel-collapsed / .minimised. */
.dt-page .panel-minimise, .dt-page .dt-collapse-toggle {
    margin-left: auto; cursor: pointer; font-style: normal; font-size: 11px; color: var(--muted); transition: transform var(--t-fast);
}
.dt-page .panel-minimise::before { content: '\25B4'; }
.dt-page .panel-sidebar.panel-collapsed .panel-minimise::before, .dt-page .panel.minimised .panel-minimise::before { content: '\25BE'; }
.dt-page .panel-collapsable .panel-heading { cursor: pointer; }
/* sidebar */
.dt-page .dt-sidebar .panel-sidebar { margin-bottom: 14px; }
.dt-page .dt-sidebar .panel-heading { padding: 8px 12px; }
.dt-page .dt-sidebar .panel-title { font-size: 11.5px; }
.dt-page .dt-sidebar .panel-body { padding: 12px; font-size: 12.5px; }
.dt-page .dt-sidebar .panel-footer { padding: 8px 12px; }
.dt-page .dt-sidebar .panel-footer .btn { width: 100%; }
.dt-page .dt-sidebar .list-group-item { padding: 8px 12px; font-size: 12.5px; }
.dt-page .sidebar-menu-item-icon, .dt-page .list-group-item > i { color: var(--muted); font-size: 11px; width: 14px; text-align: center; }
.dt-page .list-group-item .loading { margin-left: auto; }
.dt-page .dt-sidebar .mobile-select { display: none; }
/* list groups */
.dt-page .list-group { margin: 0 0 16px; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--panel); }
.dt-page .list-group .list-group { border: 0; border-top: 1px solid var(--line); margin: 0; }
.dt-page .list-group-item {
    position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 14px; margin: 0;
    border-bottom: 1px solid var(--line); color: var(--text); font-size: 13px; background: transparent; text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.dt-page .list-group-item:last-child { border-bottom: 0; }
.dt-page .list-group-item .badge { margin-left: auto; order: 10; }
.dt-page .list-group-item .pull-right { margin-left: auto; float: none; }
.dt-page a.list-group-item:hover, .dt-page a.list-group-item:focus-visible, .dt-page .list-group-item[onclick]:hover { background: var(--panel-2); color: var(--white); }
.dt-page a.list-group-item.active, .dt-page .list-group-item.active, .dt-page a.list-group-item.active:hover {
    background: var(--red-dim); color: var(--red-hi); box-shadow: inset 2px 0 0 var(--red);
}
.dt-page .list-group-item.active > i, .dt-page .list-group-item.active .sidebar-menu-item-icon { color: var(--red-hi); }
.dt-page .list-group-item.disabled, .dt-page .list-group-item.disabled:hover { color: var(--disabled-text); cursor: not-allowed; background: transparent; }
.dt-page .list-group-item-heading { font-weight: 600; color: var(--white); margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0; text-transform: none; }
.dt-page .list-group-item-text { color: var(--muted); font-size: 12.5px; margin: 0; }
.dt-page .list-group-item > .far.fa-circle, .dt-page .list-group-item > .far.fa-dot-circle { font-size: 9px; }
.dt-page .list-group-item > .far.fa-dot-circle { color: var(--red-hi); }
/* card grid (stat tiles, shortcut links) */
.dt-page .dt-card { transition: border-color var(--t-fast); }
.dt-page a.dt-card { color: var(--text); }
.dt-page a.dt-card:hover, .dt-page a.dt-card:focus-visible { border-color: var(--red); color: var(--white); }
.dt-page .dt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 24px; }
.dt-page .dt-stat { display: block; border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; color: var(--text); position: relative; transition: border-color var(--t-fast); }
.dt-page .dt-stat:hover, .dt-page .dt-stat:focus-visible { border-color: var(--red); color: var(--text); }
.dt-page .dt-stat-label { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.dt-page .dt-stat-value { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--white); letter-spacing: 0.02em; }
.dt-page .dt-stat-value.is-attention { color: var(--red-hi); }
.dt-page .dt-stat::after { content: '>>'; position: absolute; right: 14px; bottom: 12px; font-size: 11px; font-weight: 600; color: var(--line); transition: color var(--t-fast); }
.dt-page .dt-stat:hover::after { color: var(--red-ink); }
/* two-column client home panels */
.dt-page .client-home-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dt-page .client-home-panels > .dt-span-2 { grid-column: 1 / -1; }
.dt-page .client-home-panels .panel-footer:empty { display: none; }
.dt-page .client-home-panels .list-group-item { font-size: 12.5px; }
@media (max-width: 767px) { .dt-page .client-home-panels { grid-template-columns: 1fr; } }

/* =========================================================================
   8. Alerts, labels, badges, chips
   ========================================================================= */
.dt-page .alert {
    position: relative; margin: 0 0 16px; padding: 11px 16px 11px 18px;
    border: 1px solid var(--line); border-left: 3px solid var(--muted); background: var(--panel);
    font-size: 12.5px; color: var(--text); line-height: 1.55;
}
.dt-page .alert > :last-child { margin-bottom: 0; }
.dt-page .alert ul { margin: 6px 0 0 18px; }
.dt-page .alert h2, .dt-page .alert h3, .dt-page .alert h4 { font-size: 13px; margin-bottom: 6px; }
.dt-page .alert strong { color: var(--white); }
.dt-page .alert a { color: var(--red-ink); border-bottom: 1px dotted var(--red-ink); }
.dt-page .alert a:hover { color: var(--white); border-bottom-color: var(--white); }
.dt-page .alert .close { position: absolute; top: 8px; right: 10px; }
.dt-page .alert-info { border-left-color: var(--muted); }
.dt-page .alert-success { border-left-color: var(--ok); }
.dt-page .alert-success strong, .dt-page .alert-success::before { color: var(--ok); }
.dt-page .alert-warning { border-left-color: var(--warn); }
.dt-page .alert-warning strong { color: var(--warn); }
.dt-page .alert-danger, .dt-page .alert-error {
    border-left-color: var(--red); background: var(--red-dim); color: var(--red-hi); border-color: rgba(var(--red-rgb), 0.35);
}
.dt-page .alert-danger strong, .dt-page .alert-danger a { color: var(--red-hi); }
.dt-page .alert-danger::before { content: '!! '; font-weight: 600; }
.dt-page .alert-danger.text-center::before { content: ''; }
.dt-page .alert .btn { margin-left: 8px; }
/* status chips: both the BS3 .label names and WHMCS .status-* names map onto dt-chip */
.dt-page .label, .dt-page .dt-chip, .dt-page .badge {
    display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
    font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.4;
    padding: 3px 10px; border: 1px solid var(--line); color: var(--muted); background: transparent; white-space: nowrap;
}
.dt-page .badge { padding: 2px 7px; letter-spacing: 0.08em; min-width: 20px; justify-content: center; color: var(--text); font-variant-numeric: tabular-nums; }
.dt-page .badge-success, .dt-page .badge.badge-success { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.4); }
.dt-page .badge-danger { color: var(--red-hi); border-color: rgba(var(--red-rgb), 0.5); }
.dt-page .label-success, .dt-page .dt-chip.completed, .dt-page .chip-ok,
.dt-page .status-active, .dt-page .status-paid, .dt-page .status-completed, .dt-page .status-answered, .dt-page .status-accepted,
.dt-page .status-open, .dt-page .status-delivered, .dt-page .product-status-active { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.4); }
.dt-page .label-warning, .dt-page .dt-chip.running, .dt-page .chip-warn,
.dt-page .status-pending, .dt-page .status-inprogress, .dt-page .status-in-progress, .dt-page .status-unpaid, .dt-page .status-customer-reply, .dt-page .status-customerreply,
.dt-page .status-grace, .dt-page .status-pending-transfer, .dt-page .status-pendingtransfer, .dt-page .status-redemption, .dt-page .status-onhold, .dt-page .status-on-hold,
.dt-page .status-collections, .dt-page .status-payment-pending, .dt-page .product-status-pending { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.4); }
.dt-page .label-danger, .dt-page .dt-chip.failed, .dt-page .chip-fail,
.dt-page .status-suspended, .dt-page .status-terminated, .dt-page .status-fraud, .dt-page .status-expired, .dt-page .status-overdue,
.dt-page .status-dead, .dt-page .status-lost, .dt-page .product-status-suspended, .dt-page .product-status-fraud { color: var(--red-hi); border-color: rgba(var(--red-rgb), 0.5); }
.dt-page .label-info, .dt-page .label-primary { color: var(--white); border-color: var(--muted); }
.dt-page .label-default, .dt-page .status-cancelled, .dt-page .status-closed, .dt-page .status-refunded, .dt-page .status-transferred-away,
.dt-page .status-draft, .dt-page .product-status-cancelled { color: var(--muted); border-color: var(--line); }
.dt-page .label-placeholder { visibility: hidden; position: absolute; }
.dt-page .status-custom { /* inline border/colour from WHMCS data wins */ }
/* requestor type labels on tickets */
.dt-page [class*="requestor-type-"] { font-size: 10px; letter-spacing: 0.12em; }
/* summary bar reused for flash messages and key facts */
.dt-page .dt-summary { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dt-page .dt-summary strong::after { content: '>>'; }
/* dots paired with a label */
.dt-page .dt-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dt-page .dt-status .dt-dot { width: 7px; height: 7px; }

/* =========================================================================
   9. Tables and DataTables
   ========================================================================= */
.dt-page .table-responsive, .dt-page .table-container { width: 100%; overflow-x: auto; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
.dt-page .table-container > .table, .dt-page .table-responsive > .table { margin-bottom: 0; }
.dt-page .table { width: 100%; margin-bottom: 16px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.dt-page .table > thead > tr > th, .dt-page .table > thead > tr > td, .dt-page .table > tbody > tr > th {
    text-align: left; vertical-align: bottom; padding: 9px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line);
    font-size: 10.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.dt-page .table > thead > tr > td strong { color: var(--muted); font-weight: 400; }
.dt-page .table > tbody > tr > td, .dt-page .table > tfoot > tr > td { padding: 9px 12px; vertical-align: middle; border-top: 1px solid var(--line); color: var(--text); }
.dt-page .table > tbody > tr:first-child > td { border-top: 0; }
.dt-page .table > tbody > tr[onclick], .dt-page .table > tbody > tr.clickable { cursor: pointer; }
.dt-page .table > tbody > tr[onclick]:hover > td, .dt-page .table-hover > tbody > tr:hover > td { background: var(--panel-2); }
.dt-page .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(var(--bg-rgb), 0.35); }
.dt-page .table-condensed > thead > tr > th, .dt-page .table-condensed > tbody > tr > td, .dt-page .table-condensed > thead > tr > td { padding: 6px 10px; }
.dt-page .table-bordered > thead > tr > th, .dt-page .table-bordered > tbody > tr > td { border: 1px solid var(--line); }
.dt-page .table td strong, .dt-page .table td b { color: var(--white); }
.dt-page .table td a { color: var(--red-ink); border-bottom: 1px dotted transparent; }
.dt-page .table td a:hover { color: var(--white); border-bottom-color: var(--white); }
.dt-page .table td .btn { min-height: 28px; padding: 5px 11px; font-size: 12px; }
.dt-page .table td .label { vertical-align: middle; }
.dt-page .table .total-row, .dt-page td.total-row { background: var(--panel-2); }
.dt-page .table .total-row strong { color: var(--white); }
.dt-page .table td.no-line { border: 0; }
.dt-page .table .responsive-edit-button { display: none !important; }
.dt-page .table .ssl-info img, .dt-page .table img.ssl-state { height: 18px; }
.dt-page .table-list th { white-space: nowrap; }
.dt-page .table-list td { white-space: normal; overflow-wrap: anywhere; }
.dt-page .table-list td:first-child, .dt-page .table-list td .label, .dt-page .table-list td .btn, .dt-page .table-list td[data-order] { white-space: nowrap; }
.dt-page .table-list td:last-child { width: 1%; }
.dt-page .table-list td:first-child img { max-width: none; }
.dt-page table.dataTable.hidden { display: none; }
/* DataTables chrome (dataTables.bootstrap.css is NOT loaded; we style the wrapper here) */
.dt-page .dataTables_wrapper { position: relative; clear: both; }
.dt-page .dataTables_wrapper .listtable { display: flex; flex-direction: column; }
.dt-page .dataTables_filter { margin: 0 0 10px; }
.dt-page .dataTables_filter label { display: block; margin: 0; }
.dt-page .dataTables_filter input { width: 100%; max-width: 320px; margin-left: 0; display: inline-block; min-height: 32px; font-size: 12.5px; padding: 5px 10px; }
.dt-page .dataTables_filter input::placeholder { color: var(--placeholder); }
.dt-page .dataTables_info { padding: 8px 0; font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; }
.dt-page .dataTables_length { float: right; margin: 6px 0 0 0; font-size: 11.5px; color: var(--muted); }
.dt-page .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dt-page .dataTables_length select { width: auto; min-height: 28px; padding: 3px 28px 3px 8px; font-size: 12px; display: inline-block; }
.dt-page .dataTables_paginate { float: left; margin: 4px 0 0; }
.dt-page .dataTables_paginate .pagination { margin: 0; }
.dt-page .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 200px; margin: -14px 0 0 -100px; padding: 8px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.dt-page table.dataTable thead > tr > th.sorting, .dt-page table.dataTable thead > tr > th.sorting_asc, .dt-page table.dataTable thead > tr > th.sorting_desc { cursor: pointer; padding-right: 22px; position: relative; }
.dt-page table.dataTable thead > tr > th.sorting::after, .dt-page table.dataTable thead > tr > th.sorting_asc::after, .dt-page table.dataTable thead > tr > th.sorting_desc::after {
    position: absolute; right: 8px; bottom: 9px; font-size: 9px; color: var(--line); letter-spacing: 0;
}
.dt-page table.dataTable thead > tr > th.sorting::after { content: '\25B4\25BE'; }
.dt-page table.dataTable thead > tr > th.sorting_asc::after { content: '\25B4'; color: var(--red-ink); }
.dt-page table.dataTable thead > tr > th.sorting_desc::after { content: '\25BE'; color: var(--red-ink); }
.dt-page table.dataTable thead > tr > th.sorting_disabled { cursor: default; }
.dt-page table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, .dt-page table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
.dt-page table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    content: '+'; display: inline-block; width: 16px; height: 16px; line-height: 14px; text-align: center; margin-right: 8px;
    border: 1px solid var(--line); color: var(--red-ink); font-weight: 600; font-size: 12px; background: var(--bg); box-shadow: none; border-radius: 0; top: auto; left: auto; position: static;
}
.dt-page table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before { content: '\2212'; }
.dt-page table.dataTable > tbody > tr.child { background: var(--bg); }
.dt-page table.dataTable > tbody > tr.child ul.dtr-details { list-style: none; margin: 0; padding: 4px 0; display: block; }
.dt-page table.dataTable > tbody > tr.child ul.dtr-details > li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.dt-page table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
.dt-page table.dataTable > tbody > tr.child span.dtr-title { display: inline-block; min-width: 110px; color: var(--muted); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.dt-page table.dataTable > tbody > tr.child .responsive-edit-button { display: block !important; }
.dt-page table.dataTable.no-footer { border-bottom: 1px solid var(--line); }
.dt-page #tableLoading { padding: 16px; color: var(--muted); font-size: 12.5px; }
.dt-page .view-filter-btns { margin-bottom: 0; }
/* pagination */
.dt-page .pagination { display: inline-flex; margin: 0 0 16px; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--bg); }
.dt-page .pagination > li { margin: 0; display: flex; }
.dt-page .pagination > li > a, .dt-page .pagination > li > span {
    display: block; padding: 5px 11px; font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); border-right: 1px solid var(--line); background: transparent; cursor: pointer; line-height: 1.5;
}
.dt-page .pagination > li:last-child > a, .dt-page .pagination > li:last-child > span { border-right: 0; }
.dt-page .pagination > li > a:hover, .dt-page .pagination > li > a:focus-visible { color: var(--white); background: var(--panel-2); }
.dt-page .pagination > .active > a, .dt-page .pagination > .active > span, .dt-page .pagination > .active > a:hover { color: var(--red-hi); background: var(--red-dim); box-shadow: inset 0 -2px 0 var(--red); }
.dt-page .pagination > .disabled > a, .dt-page .pagination > .disabled > span, .dt-page .pagination > .disabled > a:hover { color: var(--placeholder); cursor: not-allowed; background: transparent; }

/* =========================================================================
   10. Dropdowns, tabs, collapse, tooltips, popovers, modals
   ========================================================================= */
.dt-page .dropdown, .dt-page .dropup { position: relative; }
.dt-page .dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 190px; margin: 2px 0 0; padding: 4px 0; list-style: none;
    background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow-popover); font-size: 12.5px; text-align: left;
}
.dt-page .dropdown-menu-right, .dt-page .dropdown-menu.pull-right { right: 0; left: auto; float: none !important; }
.dt-page .open > .dropdown-menu, .dt-page .dropdown-menu.show { display: block; }
.dt-page .dropdown-menu > li { margin: 0; }
.dt-page .dropdown-menu > li > a, .dt-page .dropdown-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 14px; color: var(--text); white-space: nowrap; cursor: pointer; clear: both; text-decoration: none;
}
.dt-page .dropdown-menu > li > a::before, .dt-page .dropdown-item::before { content: '--'; opacity: 0.4; }
.dt-page .dropdown-menu > li > a:hover, .dt-page .dropdown-menu > li > a:focus-visible, .dt-page .dropdown-item:hover, .dt-page .dropdown-menu > .active > a { background: var(--red-dim); color: var(--red-hi); }
.dt-page .dropdown-menu > .disabled > a, .dt-page .dropdown-item.disabled { color: var(--disabled-text); cursor: not-allowed; }
.dt-page .dropdown-menu > .disabled > a:hover, .dt-page .dropdown-item.disabled:hover { background: transparent; color: var(--disabled-text); }
.dt-page .dropdown-menu > .divider { height: 1px; margin: 4px 0; background: var(--line); }
.dt-page .dropdown-menu > .dropdown-header { padding: 6px 14px 4px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-ink); }
.dt-page .dropdown-menu > .dropdown-header::before { content: '// '; color: var(--muted); }
.dt-page .dropdown-menu .loading { margin-left: auto; }
.dt-page .dropdown-backdrop { position: fixed; inset: 0; z-index: 990; }
/* tabs */
.dt-page .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.dt-page .nav > li { margin: 0; position: relative; }
.dt-page .nav > li > a { display: block; padding: 8px 14px; color: var(--muted); }
.dt-page .nav > li > a:hover { color: var(--text); }
.dt-page .nav-tabs, .dt-page .dt-flags { display: flex; flex-wrap: wrap; border: 1px solid var(--line); background: var(--bg); margin: 0 0 16px; list-style: none; padding: 0; }
.dt-page .nav-tabs > li { margin: 0; display: flex; }
.dt-page .nav-tabs > li > a, .dt-page .nav-tabs > li > .nav-link {
    display: block; padding: 10px 16px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); border: 0; border-right: 1px solid var(--line);
    background: transparent; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); text-decoration: none;
}
.dt-page .nav-tabs > li > a::before { content: '--'; opacity: 0.5; }
.dt-page .nav-tabs > li:last-child > a { border-right: 0; }
.dt-page .nav-tabs > li > a:hover, .dt-page .nav-tabs > li > a:focus-visible { color: var(--text); background: transparent; }
.dt-page .nav-tabs > li.active > a, .dt-page .nav-tabs > li.active > a:hover, .dt-page .nav-tabs > li > a.active { background: var(--red-dim); color: var(--red-hi); box-shadow: inset 0 -2px 0 var(--red); }
.dt-page .nav-tabs > li.disabled > a { color: var(--placeholder); cursor: not-allowed; }
.dt-page .nav-tabs.nav-justified > li { flex: 1; }
.dt-page .nav-tabs.nav-justified > li > a { text-align: center; width: 100%; }
.dt-page .nav-pills > li > a { border: 1px solid transparent; }
.dt-page .nav-pills > li.active > a { color: var(--red-hi); background: var(--red-dim); border-color: rgba(var(--red-rgb), 0.4); }
.dt-page .nav-stacked { flex-direction: column; }
.dt-page .tab-content > .tab-pane { display: none; }
.dt-page .tab-content > .active { display: block; }
.dt-page .tab-content { margin-bottom: 16px; }
/* collapse */
.dt-page .collapse { display: none; }
.dt-page .collapse.in, .dt-page .collapse.show { display: block; }
.dt-page tr.collapse.in { display: table-row; }
.dt-page tbody.collapse.in { display: table-row-group; }
.dt-page .collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.25s ease; }
.dt-page .fade { opacity: 0; transition: opacity 0.15s linear; }
.dt-page .fade.in { opacity: 1; }
.dt-page [data-toggle="collapse"] { cursor: pointer; }
/* tooltip */
.dt-page .tooltip { position: absolute; z-index: 1070; display: block; font-size: 11.5px; letter-spacing: 0.02em; opacity: 0; line-height: 1.45; word-wrap: break-word; }
.dt-page .tooltip.in { opacity: 1; }
.dt-page .tooltip.top { margin-top: -4px; padding: 5px 0; } .dt-page .tooltip.bottom { margin-top: 4px; padding: 5px 0; }
.dt-page .tooltip.left { margin-left: -4px; padding: 0 5px; } .dt-page .tooltip.right { margin-left: 4px; padding: 0 5px; }
.dt-page .tooltip-inner { max-width: 240px; padding: 5px 9px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow-popover); text-align: left; }
.dt-page .tooltip-arrow { display: none; }
/* popover (used for language chooser, notifications, login popover) */
.dt-page .popover {
    position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 320px; min-width: 216px; padding: 0;
    background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow-popover); font-size: 12px; text-align: left; white-space: normal;
}
.dt-page .popover.in { display: block; }
.dt-page .popover.top { margin-top: -8px; } .dt-page .popover.bottom { margin-top: 8px; } .dt-page .popover.left { margin-left: -8px; } .dt-page .popover.right { margin-left: 8px; }
.dt-page .popover > .arrow { display: none; }
.dt-page .popover-title { margin: 0; padding: 7px 12px; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-ink); border-bottom: 1px solid var(--line); background: var(--panel); }
.dt-page .popover-title::before { content: '// '; color: var(--muted); }
.dt-page .popover-content { padding: 8px 0; }
.dt-page .popover-content ul { list-style: none; margin: 0; padding: 0; }
.dt-page .popover-content li { margin: 0; }
.dt-page .popover-content li > a { display: flex; gap: 8px; padding: 6px 12px; color: var(--text); }
.dt-page .popover-content li > a:hover { background: var(--red-dim); color: var(--red-hi); }
.dt-page .popover-content li.none { padding: 6px 12px; color: var(--muted); }
.dt-page .popover-user-notifications { max-width: 340px; width: 340px; }
.dt-page .popover-user-notifications .client-alerts a { align-items: flex-start; }
.dt-page .popover-user-notifications .client-alerts i { margin-top: 2px; color: var(--muted); font-size: 11px; }
.dt-page .popover-user-notifications .client-alerts .message { flex: 1; font-size: 12px; line-height: 1.45; }
.dt-page .popover-user-notifications .client-alerts a .fa-exclamation-circle { color: var(--red-hi); }
.dt-page .popover-user-notifications .client-alerts a .fa-exclamation-triangle { color: var(--warn); }
.dt-page .popover-user-notifications .client-alerts a .fa-check-circle { color: var(--ok); }
.dt-page .login-popover .popover-content { padding: 10px 12px; }
/* modals */
.dt-page .modal-open { overflow: hidden; }
.dt-page .modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow: hidden; outline: 0; -webkit-overflow-scrolling: touch; }
.dt-page .modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.dt-page .modal.fade .modal-dialog { transform: translateY(-16px); transition: transform 0.2s ease-out; }
.dt-page .modal.in .modal-dialog { transform: none; }
.dt-page .modal-dialog { position: relative; width: auto; margin: 24px 12px; }
@media (min-width: 640px) { .dt-page .modal-dialog { width: 600px; margin: 48px auto; } .dt-page .modal-sm { width: 360px; } }
@media (min-width: 992px) { .dt-page .modal-lg { width: 900px; } }
.dt-page .modal-content { position: relative; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); outline: 0; clip-path: var(--cut-lg); }
.dt-page .modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: #000; }
.dt-page .modal-backdrop.fade { opacity: 0; } .dt-page .modal-backdrop.in { opacity: 0.7; }
.dt-page .modal-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.dt-page .modal-header .close { order: 2; margin-left: auto; float: none; }
.dt-page .modal-title { flex: 1; margin: 0; font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.dt-page .modal-title::before { content: '\250C  '; color: var(--red-ink); font-weight: 400; }
.dt-page .modal-body { position: relative; padding: 16px; font-size: 13px; }
.dt-page .modal-body > :last-child { margin-bottom: 0; }
.dt-page .modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel-2); }
.dt-page .modal-footer .loader, .dt-page .modal-footer .pull-left { margin-right: auto; float: none; font-size: 12px; color: var(--muted); }
.dt-page .modal-footer .btn + .btn { margin: 0; }
.dt-page .modal-footer .btn-block + .btn-block { margin-top: 0; }
.dt-page .system-modal .modal-content, .dt-page .modal-content.panel-primary { border-color: var(--line); }
.dt-page .modal .alert:last-child { margin-bottom: 0; }
.dt-page .modal-metric-pricing .modal-dialog { width: auto; max-width: 820px; }

/* =========================================================================
   11. Overlays, banners, footer
   ========================================================================= */
.dt-page #fullpage-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(var(--bg-rgb), 0.86); color: var(--text); backdrop-filter: blur(3px); }
.dt-page #fullpage-overlay.hidden { display: none; }
.dt-page #fullpage-overlay .inner-wrapper { text-align: center; max-width: 420px; padding: 24px; border: 1px solid var(--line); background: var(--panel); clip-path: var(--cut-lg); }
.dt-page #fullpage-overlay img { width: 40px; margin-bottom: 10px; filter: grayscale(1) brightness(1.6); }
.dt-page #fullpage-overlay .msg { display: block; font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }
.dt-page #fullpage-overlay .msg:empty { display: none; }
.dt-page .verification-banner { border-bottom: 1px solid rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.08); }
.dt-page .verification-banner .container { display: flex; align-items: center; gap: 14px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.dt-page .verification-banner .text { flex: 1 1 320px; font-size: 12.5px; color: var(--text); }
.dt-page .verification-banner .text::before { content: '!! '; color: var(--warn); font-weight: 600; }
.dt-page .verification-banner .btn { flex: none; min-height: 28px; padding: 5px 12px; font-size: 12px; color: var(--warn); border-color: rgba(var(--warn-rgb), 0.5); }
.dt-page .verification-banner .btn:hover { border-color: var(--warn); color: var(--white); }
.dt-page .verification-banner .close { font-size: 16px; order: 10; }
.dt-page .admin-masquerade-notice { padding: 6px 0; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); border-bottom: 1px solid rgba(var(--warn-rgb), 0.4); text-align: center; }
.dt-page .dt-footer { margin-top: auto; border-top: 1px solid var(--line); background: rgba(var(--bg-rgb), 0.6); }
.dt-page .dt-footer .container { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 20px; font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; }
.dt-page .dt-footer a { color: var(--muted); }
.dt-page .dt-footer a:hover { color: var(--white); }
.dt-page .dt-footer-links { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.dt-page .dt-footer-links a::before { content: '--'; opacity: 0.5; margin-right: 2px; }
.dt-page .dt-footer .back-to-top { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dt-page .dt-footer .back-to-top::after { content: ' \2191'; }

/* =========================================================================
   12. WHMCS page-specific components
   ========================================================================= */
/* login / register containers */
.dt-page .logincontainer { max-width: 440px; margin: 0 auto; }
.dt-page .logincontainer.with-social { max-width: 760px; }
.dt-page .logincontainer .dt-console { margin-bottom: 16px; }
.dt-page .login-form .btn-block { margin-top: 4px; }
.dt-page .sub-heading, .dt-page .sub-heading-borderless { position: relative; text-align: center; margin: 18px 0; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.dt-page .sub-heading::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.dt-page .sub-heading span { position: relative; background: var(--panel); padding: 0 10px; }
.dt-page .providerLinkingFeedback:empty { display: none; }
.dt-page .providerLinkingFeedback .alert { margin-top: 12px; }
#registration .dt-section { margin-top: 28px; }
.dt-page .marketing-email-optin { margin: 14px 0; }
/* client home: services list (active-products-services-item.tpl) */
.dt-page .div-service-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast); }
.dt-page .div-service-item:last-child { border-bottom: 0; }
.dt-page .div-service-item:hover { background: var(--panel-2); }
.dt-page .div-service-status { flex: none; position: relative; }
.dt-page .div-service-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.dt-page .div-service-name .text-domain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-page .div-service-buttons { flex: none; display: flex; gap: 6px; align-items: center; }
.dt-page .div-service-buttons .btn { min-height: 26px; padding: 3px 9px; font-size: 11px; }
.dt-page .div-service-buttons .btn-view-details > i { display: none; }
.dt-page .product-actions-wrapper .btn { min-height: 26px; }
@media (max-width: 640px) { .dt-page .div-service-item { flex-wrap: wrap; } .dt-page .div-service-buttons { width: 100%; justify-content: flex-end; } }
/* kb search on home */
.dt-page .home-kb-search { position: relative; margin-bottom: 24px; }
.dt-page .home-kb-search .dt-input { width: 100%; }
/* tickets */
.dt-page .ticket-number { color: var(--muted); margin-right: 6px; font-size: 12px; }
.dt-page .ticket-subject.unread { color: var(--white); font-weight: 600; }
.dt-page .ticket-reply { border: 1px solid var(--line); background: var(--panel); margin-bottom: 14px; }
.dt-page .ticket-reply .ticket-reply-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: 12px; color: var(--muted); }
.dt-page .ticket-reply .ticket-reply-head b { color: var(--white); letter-spacing: 0.04em; }
.dt-page .ticket-reply .ticket-reply-head b::before { content: '\250C  '; color: var(--red-ink); font-weight: 400; }
.dt-page .ticket-reply.staff .ticket-reply-head { box-shadow: inset 3px 0 0 var(--red); }
.dt-page .ticket-reply .ticket-reply-body { padding: 14px 16px; font-size: 13px; line-height: 1.65; overflow-wrap: break-word; }
.dt-page .ticket-reply .ticket-reply-body img { max-width: 100%; }
.dt-page .ticket-reply .ticket-reply-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dt-page .ticket-reply .ticket-reply-foot .btn { min-height: 24px; padding: 2px 8px; font-size: 11px; }
.dt-page .ticket-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-page .ticket-attachments a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text); }
.dt-page .ticket-attachments a:hover { border-color: var(--red); color: var(--white); }
.dt-page .ticket-attachments-message { font-size: 11.5px; color: var(--muted); }
.dt-page .ticket-cc-email { display: inline-flex; gap: 8px; align-items: center; padding: 3px 0 3px 10px; border: 1px solid var(--line); font-size: 12px; margin: 2px 4px 2px 0; }
.dt-page .ticket-cc-email .delete-cc-email { color: var(--muted); padding: 0 8px; cursor: pointer; }
.dt-page .ticket-cc-email .delete-cc-email:hover { color: var(--red-hi); }
.dt-page .ticketfeedbackrating label { margin-right: 10px; }
.dt-page .rating { display: inline-flex; gap: 2px; }
.dt-page .rating .star { cursor: pointer; color: var(--line); font-size: 18px; }
.dt-page .rating .star:hover, .dt-page .rating .star.active, .dt-page .rating .star.hover { color: var(--warn); }
/* markdown editor (bootstrap-markdown, initialised by whmcs.js) */
.dt-page .md-editor { border: 1px solid var(--line); background: var(--bg); display: block; }
.dt-page .md-editor.active { border-color: var(--red); box-shadow: var(--glow-focus); outline: 0; }
.dt-page .md-editor > .md-header, .dt-page .md-editor > .btn-toolbar { padding: 6px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dt-page .md-editor .btn-group { gap: 0; }
.dt-page .md-editor .btn { min-height: 24px; padding: 2px 7px; font-size: 11px; }
.dt-page .md-editor .btn .fa, .dt-page .md-editor .btn .fas, .dt-page .md-editor .btn .far { font-size: 10px; }
.dt-page .md-editor > textarea.markdown-editor, .dt-page .md-editor > textarea { border: 0 !important; box-shadow: none !important; background: var(--bg) !important; padding: 12px 14px !important; min-height: 180px; }
.dt-page .md-editor > .md-preview { padding: 12px 14px; border: 0; background: var(--panel); min-height: 180px; font-size: 13px; }
.dt-page .md-editor > .md-footer { padding: 4px 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.dt-page .md-editor.md-fullscreen-mode { position: fixed; inset: 0; z-index: 1100; background: var(--bg); }
.dt-page .markdown-editor-status { padding: 3px 10px; font-size: 11px; color: var(--muted); text-align: right; letter-spacing: 0.04em; }
.dt-page .markdown-content h1 { font-size: 18px; } .dt-page .markdown-content h2 { font-size: 16px; } .dt-page .markdown-content h3 { font-size: 14px; } .dt-page .markdown-content h4 { font-size: 13px; }
.dt-page .markdown-content pre { margin: 10px 0; }
.dt-page .markdown-content table { border: 1px solid var(--line); margin: 10px 0; width: auto; }
.dt-page .markdown-content table td, .dt-page .markdown-content table th { padding: 6px 10px; border: 1px solid var(--line); }
.dt-page .markdown-content img { max-width: 100%; }
.dt-page .markdown-content ul, .dt-page .markdown-content ol { margin-left: 20px; }
/* knowledgebase */
.dt-page .kb-category, .dt-page .kb-article { display: block; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px; color: var(--text); transition: border-color var(--t-fast); }
.dt-page .kb-category:hover, .dt-page .kb-article:hover { border-color: var(--red); color: var(--white); }
.dt-page .kb-category .kb-title, .dt-page .kb-article .kb-title { display: block; color: var(--white); font-weight: 600; font-size: 13px; }
.dt-page .kb-category .kb-meta, .dt-page .kb-article .kb-meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.dt-page .kb-article-content { font-size: 13.5px; line-height: 1.7; }
.dt-page .kb-article-content img { max-width: 100%; }
.dt-page .kb-article-details { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin: 14px 0; }
.dt-page .kb-rate-article { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.dt-page .kb-search { margin-bottom: 20px; }
/* announcements */
.dt-page .announcement-single { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; margin-bottom: 12px; }
.dt-page .announcement-single h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }
.dt-page .announcement-single h3 a { color: var(--white); }
.dt-page .announcement-single h3 a:hover { color: var(--red-hi); }
.dt-page .announcement-single .announcement-date { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.18em; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; text-transform: uppercase; }
.dt-page .announcement-single blockquote { margin: 0; border: 0; background: transparent; padding: 0; color: var(--text); font-size: 13px; }
.dt-page .announcement-single .readmore { margin-left: 6px; }
.dt-page .announcement-content { font-size: 13.5px; line-height: 1.7; }
/* downloads */
.dt-page .download-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px; }
.dt-page .download-item .download-meta { font-size: 11.5px; color: var(--muted); }
/* server status */
.dt-page .server-status-table td .dt-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
/* affiliates */
.dt-page .affiliate-stat { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; }
.dt-page .affiliate-referral-link { display: flex; gap: 8px; }
.dt-page .affiliate-referral-link input { flex: 1; }
/* domains */
.dt-page .domain-checker-bg, .dt-page .domainchecker-homepage-captcha { margin-top: 12px; }
.dt-page .domain-pricing .table td { white-space: nowrap; }
.dt-page .tld-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; font-size: 12.5px; }
.dt-page .tld-row.filtered-row { display: none; }
.dt-page .tld-sale-group { display: inline-flex; margin-left: 6px; }
.dt-page .featured-tld { border: 1px solid var(--line); background: var(--panel); padding: 12px; text-align: center; }
.dt-page .featured-tld .tld-name { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--white); }
.dt-page .featured-tld .tld-price { color: var(--muted); font-size: 12px; margin-top: 4px; }
.dt-page .domnsinputs { display: flex; gap: 8px; }
.dt-page .domnsinputs .form-control { flex: 1; }
.dt-page .domain-validation { display: inline-flex; align-items: center; gap: 6px; min-height: var(--input-h); font-size: 12.5px; color: var(--muted); }
.dt-page .domain-validation.ok { color: var(--ok); }
.dt-page .irtp-field { margin-top: 8px; }
/* payment methods, credit card fields */
.dt-page .cc-number-field { position: relative; }
.dt-page .cc-number-field .cc-type { position: absolute; right: 10px; top: 0; height: var(--input-h); display: flex; align-items: center; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.dt-page .cc-details, .dt-page .bank-details { margin-top: 12px; }
.dt-page .paymethod-info { font-size: 12.5px; color: var(--muted); }
.dt-page #payMethodList .list-group-item { flex-wrap: wrap; }
.dt-page .cc-billing-address { font-size: 12.5px; color: var(--muted); }
.dt-page .billing-address-card { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px; }
.dt-page .select-account .btn { width: 100%; justify-content: flex-start; }
.dt-page .invoice-summary-table td { padding: 6px 10px; font-size: 12.5px; }
.dt-page .masspay-total { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--white); }
/* product details */
.dt-page .product-status { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.dt-page .module-client-area { margin-top: 16px; }
.dt-page .metric-icon { color: var(--muted); font-size: 11px; }
.dt-page .usage-stat { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; }
.dt-page .usage-stat .progress { margin: 8px 0 4px; }
.dt-page .licensing-verification { font-size: 12.5px; }
/* ssl state images in tables */
.dt-page img.ssl-state { height: 18px; width: auto; }
/* two-factor */
.dt-page .twofa-module { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dt-page .twofa-module .twofa-name { flex: 1 1 200px; color: var(--white); font-weight: 600; }
/* whmcs.js puts data-modal-class on the .modal element itself, so never size .twofa-setup directly */
.dt-page .modal.twofa-setup .modal-dialog { width: auto; max-width: 720px; }
.dt-page .twofa-setup .modal-body { min-height: 100px; }
.dt-page .twofa-setup img { background: #fff; padding: 8px; border: 1px solid var(--line); }
.dt-page .twofa-setup .activation-msg { margin: 20px 0; padding: 14px; border: 1px dashed var(--line); text-align: center; }
.dt-page .twofa-setup .backup-code, .dt-page .twofa-setup .activation-msg code { display: inline-block; margin: 14px auto; padding: 10px 16px; font-size: 18px; letter-spacing: 0.2em; color: var(--white); background: var(--bg); border: 1px solid var(--line); }
.dt-page .twofa-setup .radio, .dt-page .twofa-setup .twofa-module { align-items: flex-start; }
.dt-page .backup-code { font-family: var(--mono); font-size: 18px; letter-spacing: 0.2em; color: var(--white); padding: 12px 16px; border: 1px solid var(--line); background: var(--bg); display: inline-block; }
/* sitejet panel */
.dt-page .sitejet-panel-container { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.dt-page .sitejet-preview-item img { border: 1px solid var(--line) !important; }
.dt-page .sitejet-actions-item { flex: 1 1 260px; }
/* error pages */
.dt-page .error-container { max-width: 640px; margin: 40px auto; padding: 32px; border: 1px solid var(--line); background: var(--panel); clip-path: var(--cut-lg); text-align: center; }
.dt-page .error-container .error-code { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 10vw, 96px); line-height: 1; color: var(--red); letter-spacing: 0.04em; margin-bottom: 8px; }
.dt-page .error-container h1 { font-size: 22px; }
.dt-page .error-container h3 { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dt-page .error-container .buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
/* quotes / contracted services */
.dt-page .quote-summary { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; }
/* MarketConnect store landing pages: shared chrome; each page's own CSS is scoped in its template */
.dt-page .landing-page { --lp-gap: 28px; }
.dt-page .landing-page .hero { border: 1px solid var(--line); background: var(--panel); padding: 32px; margin-bottom: var(--lp-gap); clip-path: var(--cut-lg); display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.dt-page .landing-page .hero > div { flex: 1 1 320px; }
.dt-page .landing-page .hero img { max-height: 220px; width: auto; }
.dt-page .landing-page .hero h1 { margin-bottom: 10px; }
.dt-page .landing-page .hero p, .dt-page .landing-page .hero .p-tagline { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.dt-page .landing-page .hero .logo { max-height: 40px; margin-bottom: 14px; }
.dt-page .landing-page .header img.logo { max-height: 44px; width: auto; }
.dt-page .landing-page .features, .dt-page .landing-page .feature-wrapper, .dt-page .landing-page .feature-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: var(--lp-gap); }
.dt-page .landing-page .feature, .dt-page .landing-page .feature-block, .dt-page .landing-page .features__item { border: 1px solid var(--line); background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dt-page .landing-page .feature img, .dt-page .landing-page .feature-block img, .dt-page .landing-page .features__item img, .dt-page .landing-page .icon img { max-height: 48px; width: auto; align-self: flex-start; }
.dt-page .landing-page .feature h3, .dt-page .landing-page .feature-block h3, .dt-page .landing-page .feature h4, .dt-page .landing-page .features__item h3 { font-size: 13px; margin: 0; }
.dt-page .landing-page .feature p, .dt-page .landing-page .feature-block p, .dt-page .landing-page .features__item p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.dt-page .landing-page .content-block, .dt-page .landing-page .content, .dt-page .landing-page .description { margin-bottom: var(--lp-gap); }
.dt-page .landing-page .content-block h2, .dt-page .landing-page .content-block h3 { margin-bottom: 10px; }
.dt-page .landing-page .content-block p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.dt-page .landing-page .screenshot-thumb { border: 1px solid var(--line); background: var(--panel); padding: 4px; }
.dt-page .landing-page .pricing, .dt-page .landing-page .pricing-table { margin-bottom: var(--lp-gap); }
.dt-page .landing-page .pricing-table__cell { border: 1px solid var(--line); background: var(--panel); padding: 16px; }
.dt-page .landing-page .price { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--white); }
.dt-page .landing-page .price small { display: inline; font-size: 11px; color: var(--muted); }
.dt-page .landing-page .faq .faq-title, .dt-page .landing-page .question { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel); margin: 0 0 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--white); }
.dt-page .landing-page .faq .faq-title::before, .dt-page .landing-page .question::before { content: '>'; color: var(--red-ink); font-weight: 600; transition: transform var(--t-fast); }
.dt-page .landing-page .faq .faq-title[aria-expanded="true"]::before, .dt-page .landing-page .question[aria-expanded="true"]::before { transform: rotate(90deg); }
.dt-page .landing-page .faq .faq-answer, .dt-page .landing-page .answer { padding: 10px 14px 14px 28px; font-size: 12.5px; color: var(--muted); line-height: 1.65; margin-bottom: 8px; }
.dt-page .landing-page .standout { border: 1px solid var(--line); border-left: 3px solid var(--red); background: var(--panel); padding: 14px 16px; margin-bottom: var(--lp-gap); }
.dt-page .landing-page .faq-answer p:last-child { margin-bottom: 0; }
.dt-page .landing-page .col-brand-img img { max-height: 36px; width: auto; filter: grayscale(1) brightness(1.4) opacity(0.7); }
.dt-page .landing-page .btn-pricing-scroll { margin-top: 12px; }
.dt-page .landing-page .currency-selector { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dt-page .landing-page .currency-selector select { width: auto; display: inline-block; min-height: 30px; padding: 4px 28px 4px 8px; font-size: 12px; }
.dt-page .landing-page .overlay { display: none; }
.dt-page .landing-page .metric-icon { font-size: 11px; }
.dt-page .store-order-container { border: 1px solid var(--line); background: var(--panel); padding: 20px; clip-path: var(--cut-lg); margin-bottom: 20px; }
.dt-page .store-order-container .payment-term h4 { margin-bottom: 8px; }
.dt-page .store-promoted-product, .dt-page .promo-banner { border: 1px solid var(--line); border-left: 3px solid var(--red); background: var(--panel); padding: 16px; margin-bottom: 16px; }
.dt-page .promo-banner .panel-body { padding: 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.dt-page .promo-banner .icon-left img, .dt-page .store-promoted-product .icon img { max-height: 56px; width: auto; }
.dt-page .promo-banner .content { flex: 1 1 320px; }
.dt-page .promo-banner h3, .dt-page .store-promoted-product h3 { font-size: 14px; margin-bottom: 4px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dt-page .promo-banner h3 small { display: inline; margin: 0; }
.dt-page .promo-banner h4, .dt-page .store-promoted-product h4 { font-family: var(--mono); font-weight: 400; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 8px; }
.dt-page .promo-banner ul, .dt-page .store-promoted-product ul.features { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; font-size: 12.5px; }
.dt-page .promo-banner ul li::before, .dt-page .store-promoted-product ul.features li::before { content: '\2713 '; color: var(--ok); }
.dt-page .promo-banner ul li > i, .dt-page .store-promoted-product ul.features li > i { display: none; }
.dt-page .promo-banner-slim { padding: 10px 14px; }
.dt-page .promo-banner-slim .panel-body { align-items: center; }
.dt-page .mc-promo-login, .dt-page .mc-panel-promo { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; margin-bottom: 14px; }
.dt-page #mc-promo-widgets .panel { margin-bottom: 12px; }
.dt-page .ox-table-accounts td { vertical-align: middle; }
/* generic flex helpers for templates */
.dt-page .dt-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dt-page .dt-row-between { justify-content: space-between; }
.dt-page .dt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dt-page .dt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 767px) { .dt-page .dt-grid-2, .dt-page .dt-grid-3 { grid-template-columns: 1fr; } }
.dt-page .dt-muted { color: var(--muted); }
.dt-page .dt-white { color: var(--white); }
.dt-page .dt-ok { color: var(--ok); } .dt-page .dt-warn { color: var(--warn); } .dt-page .dt-fail { color: var(--red-hi); }
.dt-page .dt-mono-lg { font-size: 15px; color: var(--white); }
.dt-page .dt-code { font-family: var(--mono); color: var(--white); font-weight: 600; letter-spacing: 0.06em; }
.dt-page .dt-copy { display: inline-flex; align-items: stretch; }
.dt-page .dt-copy input { flex: 1; }
.dt-page .dt-copy .btn { margin-left: -1px; }
.dt-page .dt-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 12.5px; border: 1px dashed var(--line); }
.dt-page .dt-empty::before { content: '// '; }

/* =========================================================================
   13. Responsive
   ========================================================================= */
@media (max-width: 991px) {
    .dt-page .dt-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .dt-page .dt-main > .main-content { grid-column: 1; grid-row: 1; }
    .dt-page .dt-main > .dt-sidebar { grid-column: 1; grid-row: 2; width: 100%; margin-top: 24px; }
    .dt-page .dt-main > .dt-sidebar-secondary { grid-row: 3; margin-top: 14px; }
    .dt-page .dt-sidebar .mobile-select { display: block; }
    .dt-page .dt-sidebar .panel-sidebar.hidden-sm.hidden-xs { display: none; }
    .dt-page .dt-nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; }
    .dt-page .dt-nav { display: none; }
    .dt-page .dt-nav.in, .dt-page .dt-nav.is-open { display: block; }
    .dt-page .dt-nav .container { flex-direction: column; gap: 0; padding: 0; }
    .dt-page .navbar-nav { flex-direction: column; }
    .dt-page .navbar-nav > li > a { padding: 10px var(--gutter); border-bottom: 1px solid var(--line); width: 100%; }
    .dt-page .navbar-nav .dropdown-menu { position: static; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; margin: 0; width: 100%; }
    .dt-page .navbar-nav .dropdown-menu > li > a { padding-left: calc(var(--gutter) + 18px); }
    .dt-page .navbar-right { margin-left: 0; }
    .dt-page .dt-topbar-right .dt-clock, .dt-page .dt-topbar-right .dt-clock-tz { display: none; }
}
@media (max-width: 640px) {
    .dt-page .dt-shell { padding: 22px 16px 60px; }
    .dt-page :root, :root { --gutter: 16px; }
    .dt-page .container, .dt-page .container-fluid { padding-left: 16px; padding-right: 16px; }
    .dt-page .dt-topbar { padding: 12px 16px; }
    .dt-page .dt-topbar-right { gap: 8px; }
    .dt-page .dt-topbar-right .dt-sys-dot { display: none; }
    .dt-page .dt-console { padding: 14px; }
    .dt-page .dt-console .dt-pane-head { margin: -14px -14px 14px; }
    .dt-page .btn-primary, .dt-page .dt-btn { width: auto; }
    .dt-page .dt-actions .btn { flex: 1 1 auto; }
    .dt-page .form-horizontal .control-label { text-align: left; padding-top: 0; }
    .dt-page .dataTables_length { float: none; }
    .dt-page .dataTables_paginate { float: none; }
    .dt-page .modal-footer { flex-wrap: wrap; }
    .dt-page .modal-footer .btn { flex: 1 1 auto; }
    .dt-page .dt-stat-value { font-size: 24px; }
    .dt-page .landing-page .hero { padding: 20px; }
}
@media print {
    .dt-page { background: #fff !important; color: #000 !important; }
    .dt-page .dt-topbar, .dt-page .dt-nav, .dt-page .dt-footer, .dt-page .dt-sidebar, .dt-page .btn, .dt-page .verification-banner { display: none !important; }
    .dt-page .panel, .dt-page .table, .dt-page .dt-pane { border-color: #999 !important; background: #fff !important; }
    .dt-page * { color: #000 !important; box-shadow: none !important; clip-path: none !important; }
}

/* =========================================================================
   14. Fixes and additions collected during page conversion
   ========================================================================= */
.dt-page .dt-logo-mark { height: 20px; width: auto; }
.dt-page .dt-topbar .dt-brand-sub { text-decoration: none; }
/* whmcs.js sizes .div-service-status from the hidden placeholder label; keep the chip inside that column */
.dt-page .div-service-status { min-width: 60px; text-align: left; }
.dt-page .div-service-status .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.5; }
.dt-page div[menuitemname="Active Products/Services"] .list-group-item { border-bottom-color: var(--line) !important; display: block; padding: 0; }
.dt-page div[menuitemname="Active Products/Services"] .list-group-item:hover { background: transparent; }
/* domains */
.dt-page .featured-tld { flex: 1 1 150px; max-width: 220px; }
.dt-page .featured-tld .img-container img { max-height: 40px; width: auto; margin-bottom: 8px; }
.dt-page .tld-filters .label { cursor: pointer; }
.dt-page .tld-filters .label:hover { color: var(--white); border-color: var(--red); }
.dt-page .domain-pricing .dt-row-between .dt-section { margin: 0; }
/* tickets: collapsible reply panel, star rating */
.dt-page .panel-collapsable .collapse-icon { margin-left: auto; color: var(--muted); font-size: 11px; }
.dt-page .panel-collapsable.panel-collapsed .panel-body { display: none; }
.dt-page .ticket-reply-foot .ticket-rating-wrap { margin-left: auto; }
.dt-page .ticket-reply .rating, .dt-page .ticket-reply .rating-done { display: inline-flex; align-items: center; gap: 2px; direction: rtl; unicode-bidi: bidi-override; font-size: 18px; line-height: 1; }
.dt-page .ticket-reply .rating span.star, .dt-page .ticket-reply .rating-done span.star { cursor: pointer; color: var(--line); }
.dt-page .ticket-reply .rating span.star::before, .dt-page .ticket-reply .rating-done span.star::before { content: '\2606'; color: var(--muted); }
.dt-page .ticket-reply .rating span.star:hover::before, .dt-page .ticket-reply .rating span.star:hover ~ span.star::before,
.dt-page .ticket-reply .rating-done span.star.active::before, .dt-page .ticket-reply .rating span.star.active::before { content: '\2605'; color: var(--warn); }
.dt-page .ticket-reply .rating-done .rated { font-size: 11.5px; color: var(--muted); direction: ltr; margin-right: 8px; }
.dt-page .ticket-reply-head .type { color: var(--muted); margin-left: 6px; }
.dt-page .visible-print-block { display: none; }
@media print { .dt-page .visible-print-block { display: block !important; } }
/* knowledgebase, downloads, markdown guide, feedback */
.dt-page .kb-category .kb-meta, .dt-page .kb-article .kb-meta { display: block; }
.dt-page .download-item { color: var(--text); }
.dt-page .download-item .dt-dot { margin-top: 5px; }
.dt-page .markdown-guide { max-width: 760px; }
.dt-page .markdown-guide h4 { margin-top: 18px; }
.dt-page .ticketfeedbackrating .dt-choice { margin-right: 6px; }
.dt-page .ticketfeedbackstaffcont { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
/* whmcs.js measures the placeholder before the web font has loaded, so the inline width it sets can be too narrow.
   Size the column from CSS instead and let the inline width be ignored. */
.dt-page .div-service-status { width: auto !important; min-width: 96px; }
.dt-page .div-service-status .label { overflow: visible; max-width: none; }
/* mobile topbar: drop the theme flags and the notification caret; the footer carries the theme switch */
@media (max-width: 640px) {
    .dt-page .dt-topbar-right > .dt-flags { display: none; }
    .dt-page .dt-topbar-right .caret { display: none; }
    .dt-page .dt-topbar-right { gap: 10px; font-size: 11px; }
}
.dt-page .dt-footer-theme { display: inline-flex; gap: 0; }
.dt-page .dt-footer-theme button { appearance: none; background: none; border: 0; color: var(--muted); font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0 6px; }
.dt-page .dt-footer-theme button:first-child::before { content: '--'; opacity: 0.5; }
.dt-page .dt-footer-theme button + button { border-left: 1px solid var(--line); }
.dt-page .dt-footer-theme button:hover, .dt-page .dt-footer-theme button.active { color: var(--white); }
.dt-page .dt-footer-theme button.active { color: var(--red-ink); }
/* account/payment pickers: radio or checkbox wrapped in a list-group-item label */
.dt-page label.list-group-item { cursor: pointer; margin-bottom: 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); align-items: flex-start; }
.dt-page label.list-group-item > input, .dt-page label.list-group-item > .iradio_square-blue, .dt-page label.list-group-item > .icheckbox_square-blue { margin-top: 3px; }
.dt-page label.list-group-item:has(input:checked) { background: var(--red-dim); box-shadow: inset 2px 0 0 var(--red); }
.dt-page .paymethod-list { margin-bottom: 16px; }
.dt-page .dt-row > .radio-inline { margin-right: 0; }
.dt-page .dt-console .dt-section:first-child { margin-top: 0; }
.dt-page .tospanel { margin-top: 16px; }
/* upgrade-configure: product comparison grid */
.dt-page .dt-upgrade-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dt-page .dt-upgrade-products .product.is-recommended { border-color: rgba(var(--red-rgb), 0.5); }
.dt-page .dt-upgrade-products .dt-pane-foot form { width: 100%; }
.dt-page .dt-feature-list { list-style: none; margin: 0; padding: 0; }
.dt-page .dt-feature-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.dt-page .dt-feature-list li:last-child { border-bottom: 0; }
.dt-page .dt-feature-list li > span { color: var(--muted); }
.dt-page .dt-feature-list li > b { color: var(--white); font-weight: 600; }
.dt-page .dt-console > .dt-pane-head + .dt-grid-2 { align-items: start; }
.dt-page .panel-heading > .label, .dt-page .dt-pane-head > .label { flex: none; }
.dt-page .dt-flag small { display: block; }
/* server status issue list */
.dt-page .list-group-item-danger { color: var(--red-hi); } .dt-page .list-group-item-warning { color: var(--warn); } .dt-page .list-group-item-success { color: var(--ok); } .dt-page .list-group-item-info { color: var(--text); }
/* store landing pages: shared chrome promoted from page styles */
.dt-page .landing-page .brand-foot { text-align: center; }
.dt-page .landing-page .brand-foot img { max-height: 36px; width: auto; filter: grayscale(1) brightness(1.4) opacity(0.6); }
.dt-page .landing-page .hero .logo-container img { max-height: 44px; width: auto; margin-bottom: 12px; filter: grayscale(1) brightness(1.4) opacity(0.8); }
.dt-page .landing-page .nav-tabs { margin-bottom: 24px; }
.dt-page .landing-page .feature-block .title { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--white); }
.dt-page .landing-page .feature-block .description { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* phone widths: the topbar keeps only the brand, the admin-return link and the menu toggle;
   login/logout/notifications are reachable from the menu itself */
@media (max-width: 640px) {
    .dt-page .dt-topbar-right > *:not(.dt-nav-toggle):not(.dt-admin-return) { display: none !important; }
    .dt-page .dt-topbar .dt-logo-word { font-size: 14px; }
}
/* Bootstrap 3 carousel (JS is in scripts.min.js; used by marketgoo and xovinow) */
.dt-page .carousel { position: relative; }
.dt-page .carousel-inner { position: relative; overflow: hidden; width: 100%; }
.dt-page .carousel-inner > .item { display: none; position: relative; transition: left 0.6s ease-in-out; }
.dt-page .carousel-inner > .active, .dt-page .carousel-inner > .next, .dt-page .carousel-inner > .prev { display: block; }
.dt-page .carousel-inner > .active { left: 0; }
.dt-page .carousel-inner > .next, .dt-page .carousel-inner > .prev { position: absolute; top: 0; width: 100%; }
.dt-page .carousel-inner > .next { left: 100%; } .dt-page .carousel-inner > .prev { left: -100%; }
.dt-page .carousel-inner > .next.left, .dt-page .carousel-inner > .prev.right { left: 0; }
.dt-page .carousel-inner > .active.left { left: -100%; } .dt-page .carousel-inner > .active.right { left: 100%; }
.dt-page .carousel-indicators { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 6px; justify-content: center; }
.dt-page .carousel-indicators li { width: 8px; height: 8px; background: var(--idle); cursor: pointer; }
.dt-page .carousel-indicators li.active { background: var(--red); box-shadow: 0 0 8px rgba(var(--red-rgb), 0.5); }
/* FAQ accordions built from .panel-group with a .btn-link in .panel-title */
.dt-page .panel-group .panel-title::before { content: none; }
.dt-page .panel-group .panel-title .btn-link { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; color: var(--white); padding: 4px 0; }
.dt-page .panel-group .panel-title .btn-link::before { content: '>'; color: var(--red-ink); margin-right: 8px; font-weight: 600; }
.dt-page .panel-group .panel-title .btn-link[aria-expanded="true"]::before { content: 'v'; }
.dt-page .landing-page .lp-nav { margin-bottom: var(--lp-gap); }

/* =========================================================================
   15. Fixes from the first live deployment
   ========================================================================= */
/* Navbar divider items: WHMCS emits them as a child item with class nav-divider and a "-----" link */
.dt-page .nav-divider, .dt-page .dropdown-menu > li.nav-divider, .dt-page .dropdown-menu > li.divider {
    height: 1px; margin: 4px 0; padding: 0; overflow: hidden; background: var(--line); pointer-events: none;
}
.dt-page .nav-divider > a, .dt-page li.divider > a { display: none; }
/* Status chips that arrive with an inline background colour (core home panels, custom ticket statuses):
   dedicated.js moves the colour to the border and text; this is the no-JS fallback. */
.dt-page .label[style*="background"] { background-color: transparent !important; border-color: var(--muted); color: var(--text); }
.dt-page .label.dt-chip-inline { background-color: transparent !important; }
/* Bootstrap's own stylesheet must not win if a copy is loaded via custom.css */
.dt-page .label, .dt-page .badge { background-color: transparent; border-radius: 0; text-shadow: none; }
.dt-page .label-default, .dt-page .label-info, .dt-page .label-primary, .dt-page .label-success, .dt-page .label-warning, .dt-page .label-danger { background-color: transparent; }
/* DataTables writes a pixel width on the table at init; the table always fills its column */
.dt-page table.dataTable, .dt-page .table-container > .table { width: 100% !important; }
.dt-page .dataTables_filter { position: relative; }
.dt-page .dataTables_filter label::before { content: '// '; color: var(--muted); font-size: 10.5px; letter-spacing: 0.28em; }
.dt-page .dataTables_filter input { display: inline-block; vertical-align: middle; }
/* Links styled as buttons inside alerts, tables and markdown keep button colours, not link colours */
.dt-page .alert a.btn, .dt-page .table td a.btn, .dt-page .markdown-content a.btn, .dt-page .panel-body a.btn { color: var(--text); border-bottom: 0; }
.dt-page .alert a.btn:hover, .dt-page .table td a.btn:hover, .dt-page .panel-body a.btn:hover { color: var(--white); }
.dt-page .alert a.btn-primary, .dt-page .table td a.btn-primary, .dt-page .panel-body a.btn-primary, .dt-page a.btn.btn-primary,
.dt-page .alert a.btn-primary:hover, .dt-page .table td a.btn-primary:hover, .dt-page .panel-body a.btn-primary:hover, .dt-page a.btn.btn-primary:hover { color: var(--on-red); }
.dt-page .alert a.btn-success, .dt-page .table td a.btn-success { color: var(--ok); }
.dt-page .alert a.btn-danger, .dt-page .table td a.btn-danger { color: var(--red-hi); }
.dt-page .alert a.btn-warning, .dt-page .table td a.btn-warning { color: var(--warn); }
.dt-page .alert .btn { margin-top: 10px; margin-left: 0; }
/* bootstrap-switch plugin (bundled in scripts.min.js, initialised by whmcs.js on .toggle-switch-success):
   a two-position slider in the console voice. Class names are the plugin's. */
.dt-page .bootstrap-switch {
    display: inline-flex; vertical-align: middle; position: relative; overflow: hidden; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); line-height: 1; min-width: 0; z-index: 0; direction: ltr; text-align: left;
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; user-select: none;
}
.dt-page .bootstrap-switch .bootstrap-switch-container { display: inline-flex; top: 0; transform: translate3d(0, 0, 0); }
.dt-page .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { transition: margin-left 0.3s; }
.dt-page .bootstrap-switch .bootstrap-switch-handle-on, .dt-page .bootstrap-switch .bootstrap-switch-handle-off, .dt-page .bootstrap-switch .bootstrap-switch-label {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; padding: 6px 12px; height: 28px; white-space: nowrap;
}
.dt-page .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, .dt-page .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, .dt-page .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { padding: 4px 10px; height: 24px; }
.dt-page .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .dt-page .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .dt-page .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { padding: 2px 8px; height: 20px; font-size: 10px; }
.dt-page .bootstrap-switch .bootstrap-switch-handle-on { color: var(--muted); }
.dt-page .bootstrap-switch .bootstrap-switch-handle-off { color: var(--muted); }
.dt-page .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .dt-page .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { color: var(--ok); background: rgba(var(--ok-rgb), 0.12); }
.dt-page .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { color: var(--red-hi); background: var(--red-dim); }
.dt-page .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { color: var(--red-hi); background: var(--red-dim); }
.dt-page .bootstrap-switch .bootstrap-switch-label { position: relative; z-index: 1; background: var(--panel-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--white); }
.dt-page .bootstrap-switch .bootstrap-switch-label::before { content: '\2016'; color: var(--muted); font-size: 12px; }
.dt-page .bootstrap-switch input[type='radio'], .dt-page .bootstrap-switch input[type='checkbox'] { position: absolute !important; top: 0; left: 0; margin: 0; z-index: -1; opacity: 0; visibility: hidden; }
.dt-page .bootstrap-switch.bootstrap-switch-focused { border-color: var(--red); box-shadow: var(--glow-focus); }
.dt-page .bootstrap-switch.bootstrap-switch-disabled, .dt-page .bootstrap-switch.bootstrap-switch-readonly, .dt-page .bootstrap-switch.bootstrap-switch-indeterminate { cursor: not-allowed; opacity: 0.6; }
.dt-page .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label { box-shadow: inset 0 -2px 0 var(--ok); }
.dt-page .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label { box-shadow: inset 0 -2px 0 var(--line); }
.dt-page .marketing-email-optin .bootstrap-switch { margin: 6px 0 14px; }
/* knowledgebase / downloads cards are now div wrappers; the title is the link, the admin edit link sits beside it */
.dt-page div.kb-category, .dt-page div.kb-article { cursor: default; }
.dt-page .kb-category a.kb-title, .dt-page .kb-article a.kb-title { color: var(--white); }
.dt-page .kb-category:hover a.kb-title, .dt-page .kb-article:hover a.kb-title, .dt-page .kb-category a.kb-title:hover, .dt-page .kb-article a.kb-title:hover { color: var(--red-hi); }
.dt-page .kb-category a.kb-title::after, .dt-page .kb-article a.kb-title::after { content: ''; position: absolute; inset: 0; }
.dt-page .kb-category, .dt-page .kb-article { position: relative; }
.dt-page .kb-edit { position: relative; z-index: 1; display: inline-block; margin-top: 6px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-ink); border-bottom: 1px dotted var(--red-ink); }
.dt-page .kb-edit:hover { color: var(--white); border-bottom-color: var(--white); }
.dt-page .kb-edit::before { content: '// '; color: var(--muted); }
.dt-page .kb-category .kb-meta:empty { display: none; }
/* dataTables.bootstrap.js adds .form-inline to the wrapper; it must stay a block, not a flex row */
.dt-page .dataTables_wrapper.form-inline { display: block; gap: 0; }
.dt-page .dataTables_wrapper .listtable { width: 100%; }
.dt-page .dataTables_wrapper::after { content: ''; display: table; clear: both; }
.dt-page .dataTables_wrapper .dataTables_length label { display: inline-flex; }
.dt-page .dataTables_length select { min-width: 68px; }
/* knowledgebase tag cloud: hidden whatever WHMCS names the panel */
.dt-page .panel-sidebar[menuitemname*="tag cloud" i], .dt-page .panel-sidebar[menuitemname*="tagcloud" i], .dt-page .panel-sidebar[menuitemname*="tags" i] { display: none; }
/* core-generated sidebar items (recent tickets, etc.) carry .row/.col-* blocks inside the flex item; keep them inside the panel */
.dt-page .list-group-item { flex-wrap: wrap; }
.dt-page .list-group-item > .row { flex: 1 1 100%; min-width: 0; width: 100%; }
.dt-page .list-group-item > .row > [class*="col-"] { min-width: 0; overflow-wrap: anywhere; }
.dt-page .list-group-item > .row .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-page .list-group-item > .row .text-right { text-align: right; }
.dt-page .list-group-item .small { color: var(--muted); }
/* any block that core drops inside a sidebar list item takes the full item width and cannot overflow it */
.dt-page .list-group-item > * { min-width: 0; max-width: 100%; }
.dt-page .list-group-item > div, .dt-page .list-group-item > p { flex: 1 1 100%; width: 100%; overflow-wrap: anywhere; }
.dt-page .list-group-item > div.truncate, .dt-page .list-group-item .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-page .list-group-item .pull-right { float: right; margin-left: 8px; }
/* DataTables pins equal column widths when it initialises a hidden table; let content decide instead */
.dt-page table.dataTable thead th, .dt-page table.dataTable thead td { width: auto !important; }
/* ticket list: department, status and date hug their content so the subject gets the room */
.dt-page #tableTicketsList td:nth-child(1), .dt-page #tableTicketsList td:nth-child(3), .dt-page #tableTicketsList td:nth-child(4),
.dt-page #tableTicketsList th:nth-child(1), .dt-page #tableTicketsList th:nth-child(3), .dt-page #tableTicketsList th:nth-child(4) { white-space: nowrap; width: 1% !important; }
.dt-page #tableTicketsList td:nth-child(2) { min-width: 240px; }
.dt-page .table td a .ticket-subject { color: var(--text); }
.dt-page .table td a:hover .ticket-subject { color: var(--white); }
.dt-page .table td a .ticket-subject.unread { color: var(--white); font-weight: 600; }
/* dates with a time in parentheses stay on one line in any list table */
.dt-page .table-list td:last-child, .dt-page #tableInvoicesList td:nth-child(2), .dt-page #tableInvoicesList td:nth-child(3) { white-space: nowrap; }
/* home page: recent support tickets shows three (the template also limits it; this covers a differently named panel) */
.dt-page .client-home-panels .panel[menuitemname*="ticket" i] .list-group > .list-group-item:nth-child(n+4) { display: none; }
/* light mode: status chips get a tinted fill and a firmer border so they read on the grey page */
[data-theme="light"] .dt-page .label-success, [data-theme="light"] .dt-page .dt-chip.completed, [data-theme="light"] .dt-page .status-active, [data-theme="light"] .dt-page .status-paid,
[data-theme="light"] .dt-page .status-completed, [data-theme="light"] .dt-page .status-answered, [data-theme="light"] .dt-page .status-accepted, [data-theme="light"] .dt-page .status-open,
[data-theme="light"] .dt-page .status-delivered, [data-theme="light"] .dt-page .product-status-active { background: rgba(var(--ok-rgb), 0.14); border-color: rgba(var(--ok-rgb), 0.7); font-weight: 500; }
[data-theme="light"] .dt-page .label-warning, [data-theme="light"] .dt-page .dt-chip.running, [data-theme="light"] .dt-page .status-pending, [data-theme="light"] .dt-page .status-inprogress,
[data-theme="light"] .dt-page .status-in-progress, [data-theme="light"] .dt-page .status-unpaid, [data-theme="light"] .dt-page .status-customer-reply, [data-theme="light"] .dt-page .status-customerreply,
[data-theme="light"] .dt-page .status-grace, [data-theme="light"] .dt-page .status-pending-transfer, [data-theme="light"] .dt-page .status-onhold, [data-theme="light"] .dt-page .status-on-hold,
[data-theme="light"] .dt-page .status-collections, [data-theme="light"] .dt-page .status-payment-pending, [data-theme="light"] .dt-page .product-status-pending { background: rgba(var(--warn-rgb), 0.14); border-color: rgba(var(--warn-rgb), 0.7); font-weight: 500; }
[data-theme="light"] .dt-page .label-danger, [data-theme="light"] .dt-page .dt-chip.failed, [data-theme="light"] .dt-page .status-suspended, [data-theme="light"] .dt-page .status-terminated,
[data-theme="light"] .dt-page .status-fraud, [data-theme="light"] .dt-page .status-expired, [data-theme="light"] .dt-page .status-overdue, [data-theme="light"] .dt-page .status-dead,
[data-theme="light"] .dt-page .status-lost, [data-theme="light"] .dt-page .product-status-suspended { background: var(--red-dim); border-color: rgba(var(--red-rgb), 0.7); font-weight: 500; }
[data-theme="light"] .dt-page .label-default, [data-theme="light"] .dt-page .status-cancelled, [data-theme="light"] .dt-page .status-closed, [data-theme="light"] .dt-page .status-refunded,
[data-theme="light"] .dt-page .status-draft, [data-theme="light"] .dt-page .product-status-cancelled { background: rgba(92, 102, 114, 0.12); }
[data-theme="light"] .dt-page .label.dt-chip-inline { background: transparent !important; }
/* home page unpaid-invoices panel rows (hooks/dedicated_homepage_panels.php) */
.dt-page .dt-invoice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; }
.dt-page .dt-invoice-row .dt-invoice-num { font-weight: 600; color: var(--white); }
.dt-page .dt-invoice-row .dt-invoice-due { color: var(--muted); font-size: 12px; }
.dt-page .dt-invoice-row .dt-invoice-total { margin-left: auto; font-weight: 600; color: var(--white); }
/* alerts laid out as a row (message + action button) */
.dt-page .alert.dt-row { display: flex; }
.dt-page .alert.dt-row > .btn { margin: 0; flex: none; }
.dt-page .alert.dt-row > span { flex: 1 1 auto; min-width: 0; }
.dt-page .alert-danger.dt-row::before { content: none; }
.dt-page .alert-danger.dt-row > span::before { content: '!! '; font-weight: 600; }
/* bootstrap-markdown toolbar icons are glyphicons; the font is not loaded, so draw them as text marks */
.dt-page .md-editor .btn .glyphicon { display: inline-block; min-width: 12px; text-align: center; font-weight: 600; font-style: normal; }
.dt-page .glyphicon-bold::before { content: 'B'; font-weight: 700; }
.dt-page .glyphicon-italic::before { content: 'I'; font-style: italic; }
.dt-page .glyphicon-header::before { content: 'H'; }
.dt-page .glyphicon-link::before { content: '\1F517'; font-weight: 400; }
.dt-page .glyphicon-picture::before { content: '\25A3'; font-weight: 400; }
.dt-page .glyphicon-list::before { content: '\2022\2261'; letter-spacing: -0.1em; }
.dt-page .glyphicon-th-list::before { content: '1.'; font-size: 10px; }
.dt-page .glyphicon-console::before { content: '</>'; font-size: 10px; letter-spacing: -0.05em; }
.dt-page .glyphicon-comment::before { content: '\201C'; font-size: 16px; line-height: 0; position: relative; top: 3px; }
.dt-page .glyphicon-fullscreen::before { content: '\26F6'; font-weight: 400; }
.dt-page .glyphicon-remove-circle::before { content: '\00D7'; }
.dt-page .glyphicon-search::before { content: '\2315'; font-weight: 400; }
.dt-page .md-editor .btn-toolbar .btn[title]::after { content: none; }
.dt-page .md-editor .btn-primary .glyphicon::before { color: var(--on-red); }
/* no fullscreen mode for the markdown editor: hide the toolbar button and the exit control it leaves at the bottom */
.dt-page .md-editor .md-fullscreen-controls, .dt-page .md-editor .md-control-fullscreen, .dt-page .md-editor .exit-fullscreen-control,
.dt-page .md-editor [data-handler="bootstrap-markdown-cmdFullscreen"], .dt-page .md-editor .btn .glyphicon-fullscreen { display: none !important; }
.dt-page .md-editor .glyphicon-link::before { content: '\2197'; }
/* horizontal rules: a red hairline so they read on both the dark and the grey page */
.dt-page hr, .dt-page .markdown-content hr, .dt-page .kb-article-content hr { border: 0; border-top: 2px solid rgba(var(--red-rgb), 0.75); margin: 24px 0; }