/*
 * DTS Theme — clientarea.css
 *
 * Page-specific styles for the clientarea area. Loaded after components.css in
 * includes/head.tpl. Compose the shared classes from components.css
 * (.dts-section--dark, .dts-testimonial-card, .dts-browser-mockup,
 * .dts-terminal-mockup, .dts-roadmap-card, .dts-compare-table,
 * .dts-trust-strip, .dts-skeleton) rather than duplicating them here.
 *
 * Owned by one Phase 2 agent — do not edit from another agent's task.
 */

/* ══════════════════════════════════════════════════════════════════════
 * 1. DASHBOARD — stat tile icons + visual hierarchy
 * ══════════════════════════════════════════════════════════════════════ */

/* custom.css hides <i> tags inside .tile with `!important` (selectors
   `.tiles .tile i` / `a.tile > i`, specificity (0,0,2,1) / (0,0,1,2)).
   We route the icon through a dedicated wrapper and re-show it with a
   selector that beats both on specificity, so this works regardless of
   stylesheet load order.
   The parent twenty-one theme ALSO styles `.tile i` as a 55px absolutely-
   positioned grey watermark — reset position/size/color here too or the
   icon escapes the circular plate and floats over the tile. */
.tiles .tile .dts-stat-icon i,
a.tile .dts-stat-icon i {
    display: inline-block !important;
    position: static !important;
    font-size: inherit !important;
    line-height: 1 !important;
    color: inherit !important;
    opacity: 1 !important;
}

.dts-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(74, 144, 217, 0.12);
    color: var(--dts-primary);
    font-size: 1.2rem;
    margin-bottom: var(--dts-space-2);
    transition: var(--dts-transition-fast);
}

.tiles .tile:hover .dts-stat-icon,
a.tile:hover .dts-stat-icon {
    background: var(--dts-gradient-cta);
    color: #fff;
    transform: scale(1.06);
}

/* "Needs attention" tiles — open tickets / unpaid invoices. Calm amber
   accent (not alarmist red) so it reads as "worth a look", not an error. */
.tiles .tile.dts-tile--attention,
a.tile.dts-tile--attention {
    border-color: rgba(245, 158, 11, 0.45) !important;
}

.tiles .tile.dts-tile--attention .dts-stat-icon,
a.tile.dts-tile--attention .dts-stat-icon {
    background: rgba(245, 158, 11, 0.16);
    color: var(--dts-warning);
}

.tiles .tile.dts-tile--attention:hover .dts-stat-icon,
a.tile.dts-tile--attention:hover .dts-stat-icon {
    background: var(--dts-warning);
    color: #fff;
}

.tiles .tile.dts-tile--attention .stat {
    color: #92400e;
}

/* ── Restore urgency accent on the "Unpaid Invoices" home panel ────────
 * custom.css strips the accent border from every `.card-accent-*` panel
 * inside `.client-home-cards` for a clean, uniform look. That's the right
 * call for informational panels, but it flattens the ONE panel that is
 * actually an action item — re-apply emphasis just for that one so a
 * returning client's eye is drawn to it first. */
.client-home-cards .card[menuitemname="Unpaid Invoices"],
.client-home-cards .card[menuitemname="Overdue Invoices"] {
    border-top: 3px solid var(--dts-danger) !important;
}

.client-home-cards .card[menuitemname="Unpaid Invoices"] .card-header,
.client-home-cards .card[menuitemname="Overdue Invoices"] .card-header {
    background-color: rgba(231, 0, 11, 0.05) !important;
}

.client-home-cards .card[menuitemname="Unpaid Invoices"] .card-title,
.client-home-cards .card[menuitemname="Overdue Invoices"] .card-title {
    color: #8a0009;
    font-weight: 600;
}

.client-home-cards .card[menuitemname="Unpaid Invoices"] .card-body p,
.client-home-cards .card[menuitemname="Overdue Invoices"] .card-body p {
    font-weight: 500;
    color: var(--dts-text);
}

.client-home-cards .card[menuitemname="Unpaid Invoices"] .card-header .btn,
.client-home-cards .card[menuitemname="Overdue Invoices"] .card-header .btn {
    border-color: var(--dts-danger) !important;
    color: var(--dts-danger) !important;
}

.client-home-cards .card[menuitemname="Unpaid Invoices"] .card-header .btn:hover,
.client-home-cards .card[menuitemname="Overdue Invoices"] .card-header .btn:hover {
    background-color: var(--dts-danger) !important;
    color: #fff !important;
}

/* ── "Active Products/Services" panel — real row treatment ─────────────
 * This markup (`div-service-item`, etc.) is rendered by WHMCS core, not
 * our tpl, so we only style it — no markup change, no data change. */
.client-home-cards .div-service-item {
    padding: 6px 0;
    gap: 12px;
}

.client-home-cards .div-service-status .label-success {
    background-color: var(--dts-success) !important;
}

.client-home-cards .div-service-status .label-warning {
    background-color: var(--dts-warning) !important;
}

.client-home-cards .div-service-status .label-danger {
    background-color: var(--dts-danger) !important;
}

.client-home-cards .div-service-name > span:first-child {
    font-weight: 600;
    font-size: 14px;
}

.client-home-cards .div-service-name .text-domain {
    font-size: 12px;
    color: var(--dts-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
 * 2. UNIFIED DATA-LIST PATTERN
 * Shared across clientareaproducts / clientareadomains / clientareainvoices
 * / clientareaquotes / clientareaemails so the five list pages read as one
 * coherent product instead of five separately-styled clones. The DataTable
 * chrome itself (badges, header row, hover, pagination) is already unified
 * in custom.css — this layer standardizes the CARD around it: header
 * (icon + title + live count), optional toolbar, and table wrapper.
 * ══════════════════════════════════════════════════════════════════════ */

.dts-list-card-header {
    flex-wrap: wrap;
}

/* Live item count next to the card title — turns a title that would
   otherwise just repeat the page's blue subheader into something that
   carries real information. */
.dts-list-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dts-text-secondary);
    background-color: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-pill);
}

.dts-list-card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Bulk-action toolbar (domains list) */
.dts-list-toolbar {
    padding: 10px 16px;
    background-color: var(--dts-bg-alt);
    border-bottom: 1px solid var(--dts-border);
}

.dts-list-toolbar .btn-group .btn {
    font-size: 12px;
}

/* Table wrapper — consistent horizontal scroll behavior on all 5 pages */
.dts-list-table-wrap {
    width: 100%;
}

.dts-list-loading-state {
    border-top: 1px solid var(--dts-border);
}

/* ══════════════════════════════════════════════════════════════════════
 * 3. PRODUCT DETAILS — hero secondary actions (upgrade / cancel)
 * The renew button already sits in `.dts-product-hero-actions` as a solid
 * primary button. Upgrade/cancel are real actions that were either buried
 * as a low-opacity link far below the fold (cancel) or missing from the
 * hero entirely (upgrade) — surface both here as calm, secondary buttons
 * that read on the dark hero gradient without competing with Renew.
 * ══════════════════════════════════════════════════════════════════════ */

.dts-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--dts-radius-sm);
    transition: var(--dts-transition-fast);
    text-decoration: none;
}

.dts-hero-btn-secondary:hover,
.dts-hero-btn-secondary:focus {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
}

.dts-hero-btn-secondary.dts-hero-btn-cancel:hover,
.dts-hero-btn-secondary.dts-hero-btn-cancel:focus {
    background: rgba(231, 0, 11, 0.35);
    border-color: rgba(231, 0, 11, 0.6);
}

.dts-hero-btn-secondary.disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* ══════════════════════════════════════════════════════════════════════
 * 4. DOMAIN SUBPAGES — real section structure instead of raw form dumps
 * Applies to clientareadomaindetails / -dns / -contactinfo / -addons /
 * -emailforwarding / -getepp / -registerns.
 * ══════════════════════════════════════════════════════════════════════ */

/* Domain overview status/summary strip at the very top of domaindetails */
.dts-domain-status-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: var(--dts-space-5);
    background: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
}

.dts-domain-status-banner-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    margin-right: 8px;
}

/* Groups a related set of fields/rows under a labeled section, used to
   break up long stacked forms (nameservers, contact info, DNS, etc.) */
.dts-form-section {
    margin-bottom: var(--dts-space-6);
}

.dts-form-section:last-child {
    margin-bottom: 0;
}

.dts-form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--dts-font-size-base);
    font-weight: 600;
    color: var(--dts-text);
    margin: 0 0 var(--dts-space-3);
    padding-bottom: var(--dts-space-2);
    border-bottom: 1px solid var(--dts-border);
}

.dts-form-section-title i {
    color: var(--dts-accent);
    font-size: 0.9em;
}

.dts-form-section-hint {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin: -4px 0 var(--dts-space-4);
}

/* Quick-actions list (domaindetails "What would you like to do?") */
.dts-quick-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    overflow: hidden;
}

.dts-quick-actions li {
    border-bottom: 1px solid var(--dts-border);
}

.dts-quick-actions li:last-child {
    border-bottom: none;
}

.dts-quick-actions a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-quick-actions a:hover {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary);
    text-decoration: none;
    padding-left: 20px;
}

/* SVG chevron: this WHMCS build only ships FA6 webfont files, so an FA5
   pseudo-element glyph silently renders as an invisible tofu here. */
.dts-quick-actions a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none' stroke='%234a90d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5-5 5'/%3E%3C/svg%3E");
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
}

/* Status toggle banner (autorenew / reglock) — replaces a bare centered
   <h2>/<h4> with a proper labeled row */
.dts-status-toggle-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: var(--dts-space-4);
    margin-bottom: var(--dts-space-4);
    background: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    text-align: center;
}

.dts-status-toggle-banner-label {
    font-size: var(--dts-font-size-base);
    color: var(--dts-text-secondary);
    margin: 0;
}

/* Nameserver rows — cleaner 2-up grid on larger screens instead of five
   stacked full-width rows */
.dts-ns-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dts-space-3) var(--dts-space-5);
}

@media (min-width: 768px) {
    .dts-ns-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.dts-ns-grid .form-group {
    margin-bottom: 0;
}

/* Domain addon rows (idprotect / dnsmanagement / emailforwarding) */
.dts-addon-row {
    display: flex;
    align-items: flex-start;
    gap: var(--dts-space-4);
    padding: var(--dts-space-4) 0;
    border-bottom: 1px solid var(--dts-border);
}

.dts-addon-row:last-child {
    border-bottom: none;
}

.dts-addon-row-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--dts-radius);
    background: var(--dts-bg-alt);
    color: var(--dts-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.dts-addon-row-body {
    flex: 1;
    min-width: 0;
}

.dts-addon-row-title {
    font-weight: 600;
    color: var(--dts-text);
    display: block;
    margin-bottom: 2px;
}

.dts-addon-row-desc {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    display: block;
    margin-bottom: var(--dts-space-3);
}

/* DNS records table polish */
.dts-dns-table {
    margin-bottom: 0;
}

.dts-dns-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    background-color: var(--dts-bg-alt);
    border-bottom: 2px solid var(--dts-border);
}

.dts-dns-table tbody tr:hover {
    background-color: var(--dts-bg-alt);
}

.dts-dns-table .form-control {
    font-size: var(--dts-font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH-JOURNEY & FALLBACK-CLIFF PAGES — added by the "auth journey / fallback
   cliff" redesign track (register, password reset, 2FA, mass pay, add funds,
   invoice payment, payment method partials, ticket-flow gaps, KB article).

   These pages render inside the STANDARD client-area chrome (header/footer),
   NOT the login.tpl full-viewport split-panel bypass (header.tpl/footer.tpl
   only bypass chrome for $templatefile == 'login', and this track is not
   permitted to edit either file). They instead reuse the same input/label/
   button "visual vocabulary" already established by the login page — see
   the many pre-existing standalone `.dts-login-field` / `.dts-login-label` /
   `.dts-login-input*` / `.dts-login-title` rules above, which are NOT scoped
   under `.dts-login-page`/`.dts-login-wrap` and are safe to reuse anywhere.

   Every rule below is a NEW class name — nothing above this section was
   modified. All new page templates are wrapped in one of the scoping
   classes below (.dts-auth-page, .dts-money-page, .dts-paymethod-*) so these
   rules never leak onto other pages that also use plain `.card`/`.form-*`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared "auth card" shell — register / password-reset / 2FA ─────────── */

.dts-auth-page {
    max-width: 620px;
    margin: 8px auto 24px;
}

.dts-auth-page--wide {
    max-width: 900px;
}

.dts-auth-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    box-shadow: var(--dts-shadow-md);
    overflow: hidden;
}

.dts-auth-card-topbar {
    height: 4px;
    background: var(--dts-gradient-cta);
}

.dts-auth-card-body {
    padding: 40px 44px 36px;
}

@media (max-width: 576px) {
    .dts-auth-card-body {
        padding: 28px 22px 24px;
    }
}

.dts-auth-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dts-gradient-cta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 20px;
    box-shadow: var(--dts-shadow-btn);
}

.dts-auth-header {
    margin-bottom: 28px;
}

.dts-auth-header .dts-login-title {
    margin-bottom: 6px;
}

.dts-auth-section {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    background: var(--dts-bg-alt);
    padding: 24px 24px 8px;
    margin-bottom: 24px;
}

.dts-auth-section .card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dts-text);
    margin-bottom: 18px;
}

.dts-auth-section .dts-login-field,
.dts-auth-page .form-group {
    margin-bottom: 20px;
}

/* Register/password forms don't have the icon-in-input wrap login.tpl uses
   for every field (too many fields, too many icons) — but the bare input
   should still match the login page's rounded, focus-glow field styling. */
.dts-auth-page input.form-control,
.dts-auth-page select.form-control,
.dts-auth-page textarea.form-control,
.dts-auth-page input.field,
.dts-auth-page select.field {
    height: 46px;
    border: 1.5px solid var(--dts-border-input);
    border-radius: var(--dts-radius);
    font-size: 0.9375rem;
    box-shadow: none;
}

.dts-auth-page textarea.form-control {
    height: auto;
}

.dts-auth-page input.form-control:focus,
.dts-auth-page select.form-control:focus,
.dts-auth-page textarea.form-control:focus,
.dts-auth-page input.field:focus,
.dts-auth-page select.field:focus {
    border-color: var(--dts-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}

.dts-auth-page label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dts-text);
}

.dts-auth-submit-row {
    text-align: center;
    margin-top: 8px;
}

.dts-auth-submit-row .btn {
    height: 48px;
    padding: 0 32px;
    font-size: 0.9375rem;
}

.dts-auth-footnote {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dts-border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--dts-text-secondary);
}

.dts-auth-footnote a {
    color: var(--dts-accent);
    font-weight: 500;
    text-decoration: none;
}

.dts-auth-footnote a:hover {
    color: var(--dts-primary);
    text-decoration: none;
}

/* 2FA backup-code toggle links reuse the login "forgot password" look */
.dts-auth-link-muted {
    font-size: 0.8125rem;
    color: var(--dts-text-muted);
}

.dts-auth-link-muted a {
    color: var(--dts-accent);
    text-decoration: none;
}

.dts-auth-link-muted a:hover {
    color: var(--dts-primary);
    text-decoration: none;
}

/* ── Money flows — masspay / add funds / invoice payment ─────────────────
   These pages sit inside .primary-content, where the global rule at the top
   of this stylesheet's sibling file strips default `.card` borders/shadows
   (`.primary-content .card { border:none; box-shadow:none; ... }`). Restore
   a clean boxed-card look scoped to this new wrapper, mirroring the existing
   `.dts-support-page .card` pattern used by the ticket/KB pages. */

.dts-money-page .card {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    background-color: var(--dts-bg);
    overflow: visible;
}

.dts-money-page .card .card-body {
    padding: 24px;
}

.dts-money-page .card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dts-primary);
    margin-bottom: 6px;
}

.dts-money-page .card + .card,
.dts-money-page .card + .row,
.dts-money-page .row + .card {
    margin-top: 24px;
}

.dts-money-page .table thead th {
    background: var(--dts-bg-alt);
    color: var(--dts-text);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--dts-border);
}

.dts-money-page .table td,
.dts-money-page .table th {
    border-color: var(--dts-border);
}

.dts-money-page tr.masspay-invoice-detail td {
    color: var(--dts-text-secondary);
    font-size: 0.875rem;
}

.dts-money-page tr.masspay-total td {
    font-weight: 600;
    color: var(--dts-text);
}

.dts-money-page tr.masspay-total td:last-child {
    text-align: right;
}

.dts-money-page .card.bg-default {
    background-color: var(--dts-bg-alt) !important;
}

.dts-money-page .card-header {
    background-color: var(--dts-bg);
    border-bottom: 1px solid var(--dts-border);
    border-radius: var(--dts-radius) var(--dts-radius) 0 0 !important;
}

.dts-money-page .alert.gateway-errors {
    border-radius: var(--dts-radius);
}

/* Invoice summary mini-card used inside invoice-payment.tpl */
.dts-money-page #invoiceIdSummary .total-row {
    border-top: 1px solid var(--dts-border);
    color: var(--dts-text-secondary);
}

.dts-money-page #invoiceIdSummary .alert-success {
    background-color: rgba(0, 166, 62, 0.08);
    border-color: rgba(0, 166, 62, 0.3);
    color: #0a7a34;
    border-radius: var(--dts-radius);
}

/* ── Payment method partials — payment/billing-address.tpl,
   payment/card/*.tpl, payment/bank/*.tpl. These are shared, JS-coupled
   partials (icheck radio buttons, jquery.payment formatting, StatesDropdown)
   included by invoice-payment.tpl, checkout, and account-paymentmethods
   pages — kept structurally identical to stock (same ids/classes/names so
   existing JS keeps working), restyled additively via new wrapper classes
   only. */

.dts-paymethod-grid .paymethod-info {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dts-border);
}

.dts-paymethod-grid .paymethod-info:last-of-type {
    border-bottom: none;
}

.dts-billing-address-card {
    background: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 20px 20px 4px;
    margin-top: 8px;
}

.dts-cc-inputs-card,
.dts-bank-inputs-card {
    background: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 20px 20px 4px;
    margin-bottom: 20px;
}

/* ── Ticket-flow gap pages (confirm / customfields / kbsuggestions) share
   the existing .dts-support-page / .dts-field-box / .dts-sidebar-card
   treatment already used by supportticketsubmit-stepone/steptwo.tpl and
   viewticket.tpl (both live in this track's neighbouring track's files but
   the classes are shared vocabulary) — see custom.css for those rules. Only
   a few net-new tweaks needed here. */

.dts-ticket-confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 166, 62, 0.1);
    color: var(--dts-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 16px;
}

.dts-kb-suggest-list .kb-article-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
}

.dts-kb-suggest-list .kb-article-item small {
    display: block;
    color: var(--dts-text-muted);
    font-size: 0.8125rem;
}

/* ── Knowledgebase article page ──────────────────────────────────────────
   Article view is flagged $dts_is_support_page by dts_support_sidebar.php
   (URI contains "knowledgebase"), so it already inherits the
   `.dts-support-page .card` boxed treatment. Just a couple of KB-specific
   accents below. */

.dts-kb-article-tag {
    background: rgba(74, 144, 217, 0.12) !important;
    color: var(--dts-primary) !important;
    font-weight: 600;
}

.dts-kb-article-useful {
    color: var(--dts-text-secondary);
    font-size: 0.875rem;
}

.dts-kb-vote-row .btn {
    border-radius: var(--dts-radius-pill);
    padding: 8px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT-AREA BEAUTY PASS (Agent E) — dashboard tiles, slimmer subheader,
   data-list refinements, empty states, auth touch-ups, mobile ordering.
   All rules are additive; clientarea.css loads after custom.css so
   same-specificity overrides below win by source order.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Dashboard stat tiles — coloured icon plates per category ────────── */

.dts-stat-icon {
    border-radius: 14px;
}

.dts-stat-icon--services {
    background: rgba(30, 90, 142, 0.1);
    color: var(--dts-primary);
}

.dts-stat-icon--domains {
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}

.dts-stat-icon--tickets {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.dts-stat-icon--invoices {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.dts-stat-icon--quotes,
.dts-stat-icon--affiliate {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

/* Category-tinted hover fill (attention tiles keep their amber hover —
   their selector carries one more class so it still wins). */
.tiles .tile:hover .dts-stat-icon--services   { background: var(--dts-primary); color: #fff; }
.tiles .tile:hover .dts-stat-icon--domains    { background: #0d9488; color: #fff; }
.tiles .tile:hover .dts-stat-icon--tickets    { background: #7c3aed; color: #fff; }
.tiles .tile:hover .dts-stat-icon--invoices   { background: #b45309; color: #fff; }
.tiles .tile:hover .dts-stat-icon--quotes,
.tiles .tile:hover .dts-stat-icon--affiliate  { background: #475569; color: #fff; }

/* Number + label typography */
.tiles .tile .stat,
.tile .stat {
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--dts-primary-dark);
}

.tiles .tile .title,
.tile .title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dts-text-secondary);
    margin-top: 4px;
}

/* ── 2. Slimmer blue page subheader ─────────────────────────────────────── */

.dts-page-subheader {
    padding: 26px 0 22px;
}

.dts-page-subheader-title {
    font-size: 27px;
    line-height: 36px;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

.dts-breadcrumb-item {
    font-size: 12px;
}

/* ── 3. Dashboard "Active Products/Services" — soft status pills ────────── */

.client-home-cards .div-service-status .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--dts-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.client-home-cards .div-service-status .label.label-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}

.client-home-cards .div-service-status .label.label-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.client-home-cards .div-service-status .label.label-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

/* Manage button — quiet outline that fills on hover */
.client-home-cards .btn-view-details {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-sm);
    background-color: var(--dts-bg);
    color: var(--dts-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    transition: var(--dts-transition-fast);
}

.client-home-cards .btn-view-details:hover,
.client-home-cards .btn-view-details:focus {
    background-color: var(--dts-primary);
    border-color: var(--dts-primary);
    color: #fff;
}

.client-home-cards .btn-view-details i {
    display: none;
}

.client-home-cards .div-service-item {
    padding: 9px 8px;
    margin: 0 -8px;
    border-radius: var(--dts-radius-sm);
    transition: background-color 0.13s ease;
}

.client-home-cards .div-service-item:hover {
    background-color: var(--dts-bg-alt);
}

/* ── 4. Data lists — roomier rows, subtle zebra, refined empty state ────── */

table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    padding: 11px 16px;
}

table.table-list tbody td,
.dataTables_wrapper table.table-list tbody td {
    padding: 12px 16px;
}

/* Subtle zebra — light enough to keep the hover tint readable */
.dataTables_wrapper table.table-list tbody tr:nth-child(even) td {
    background-color: #fafcfe;
}

/* Empty state: icon + message instead of a bare "No Records Found" row.
   The primary CTA (Add a Service / Open New Ticket) already lives in the
   card header directly above, so the cell stays a calm, informative void.
   Selector stays generic (not table.table-list) because the tickets list
   table uses `dts-tickets-table` instead. */
.dataTables_wrapper table td.dataTables_empty {
    padding: 44px 16px 40px;
    text-align: center;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

/* Inline SVG (Feather "inbox" outline) rather than an icon-font glyph:
   this WHMCS build only ships FA6 webfont files, so an FA5 pseudo-element
   glyph silently renders as an invisible tofu here. */
.dataTables_wrapper table td.dataTables_empty::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23b9cbdd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
    display: block;
    line-height: 1;
    margin-bottom: 12px;
}

/* ── 5. Domain details — SSL/meta h5s read as field labels, not headings ── */

.dts-form-section h5 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    margin-bottom: 4px;
}

.dts-form-section .row + .row {
    margin-top: 12px;
}

/* ── 6. Auth touch-ups ──────────────────────────────────────────────────── */

/* Left-panel brandmark on the login split layout (logo-light.png swap) */
.dts-login-brandmark {
    height: auto;
    max-height: 40px;
    width: auto;
    margin-bottom: 32px;
}

/* Sidebar "Already registered?" blurb was clipped to one ellipsised line —
   static (non-link) sidebar entries may wrap. */
.dts-sidebar-nav-item--static {
    align-items: flex-start;
}

.dts-sidebar-nav-item--static .dts-sidebar-nav-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.55;
}

/* ── 7. Mobile ──────────────────────────────────────────────────────────── */

/* Below lg the sidebar column stacks ABOVE the page content (it precedes it
   in the DOM), burying the actual page under panels of secondary nav.
   Content first, sidebar after. */
@media (max-width: 991.98px) {
    #main-body .dts-sidebar-col {
        order: 2;
    }

    #main-body .primary-content {
        order: 1;
    }

    /* footer.tpl injects a mobile-only copy of the secondary sidebar ahead
       of the reordered columns; the real sidebar column is visible on
       mobile (just moved below the content), so this copy is a duplicate. */
    #main-body .row > .sidebar.sidebar-secondary.d-lg-none {
        display: none;
    }

    #main-body .dts-sidebar-col .dts-sidebar-sticky {
        position: static;
        top: auto;
    }
}

@media (max-width: 575.98px) {
    .dts-page-subheader {
        padding: 18px 0 16px;
    }

    .dts-page-subheader-title {
        font-size: 22px;
        line-height: 30px;
    }

    .tiles .tile .stat,
    .tile .stat {
        font-size: 1.7rem;
    }

    .dts-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
        border-radius: 12px;
    }

    /* Active products rows: let name/domain wrap instead of crushing */
    .client-home-cards .div-service-item {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    /* Product-details hero: the desktop layout is a single non-wrapping
       flex row (icon | name | status | actions) that overflows a 390px
       viewport — let it wrap and drop the ellipsised one-line name. */
    .dts-product-hero {
        flex-wrap: wrap;
    }

    .dts-product-hero-info {
        flex: 1 1 calc(100% - 68px);
    }

    .dts-product-hero-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .dts-product-hero-actions {
        flex-basis: 100%;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_filter label .form-control {
        width: 130px;
    }
}