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

    Lansoft 9 — Custom Stylesheet
    Overrides the Nexus palette (this file replaces
    nexus/css/custom.css via child-theme asset lookup,
    so the full :root palette must be defined here).

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

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Lansoft brand palette */
    --primary-50: #eef0fb;
    --primary-100: #dfe2f7;
    --primary-200: #c3c8f0;
    --primary-300: #9ba3e6;
    --primary-400: #6a75d9;
    --primary-500: #444fc9;
    --primary-600: #2f38b8;
    --primary-700: #1F23AB;
    --primary-800: #1a1d8c;
    --primary-900: #171a70;
    --primary-950: #0f114a;

    --primary: #1F23AB;
    --primary-lifted: #1a1d8c;
    --primary-accented: #171a70;

    --accent: #FF8126;
    --accent-lifted: #ff6b00;
    --accent-accented: #e85f00;

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);
    --bg-body: #f7f8fa;

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* =====================================================
   Dark mode — flips the semantic palette; components
   inherit through var() references in nexus theme.css
   ===================================================== */
html[data-theme="dark"] {
    --primary: #6a75d9;
    --primary-lifted: #9ba3e6;
    --primary-accented: #c3c8f0;

    --text: #f4f5f7;
    --text-accented: #d0d5dd;
    --text-lifted: #9ca3af;
    --text-muted: #6b7280;
    /* --text-inverted stays white: nexus pairs it with the inverted
       (dark) surfaces below, which remain dark in dark mode too */
    --text-inverted: #fff;

    --border-muted: #1f2937;
    --border: #374151;
    --border-lifted: #4b5563;
    --border-accented: #6b7280;

    --bg: #111827;
    --bg-muted: #161e2e;
    --bg-lifted: #1f2937;
    --bg-accented: #374151;
    /* NOT flipped to light: nexus uses bg-inverted/grayscale as button,
       badge and footer backgrounds with hardcoded #fff text */
    --bg-inverted: #374151;
    --bg-body: #0b101b;

    --grayscale: #4b5563;
    --grayscale-lifted: #5c6675;
    --grayscale-accented: #6b7280;
}

/* =====================================================
   Typography & base
   ===================================================== */
body {
    font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-body);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-weight: 600;
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-lifted);
}

/* =====================================================
   Buttons — Lansoft accent
   ===================================================== */
.btn-primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--accent-lifted);
    border-color: var(--accent-lifted);
}

.btn-primary.disabled, .btn-primary:disabled {
    background: var(--accent);
    border-color: var(--accent);
    opacity: .5;
}

/* Nexus hardcodes .btn-link:hover to #fff, which is invisible on
   light cards — restore a readable hover color in both modes */
.btn-link:hover,
.btn-link:focus {
    color: var(--primary-lifted);
}

/* =====================================================
   Header: contact topbar + navbar
   ===================================================== */
#contact-topbar {
    background-color: var(--primary-950);
    font-size: 0.85rem;
}

#contact-topbar a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

#contact-topbar a:hover {
    color: var(--accent);
}

#contact-topbar .lang-link {
    padding: 0 .35rem;
    font-weight: 400;
}

#contact-topbar .lang-link.active {
    font-weight: 700;
    color: var(--accent);
}

#contact-topbar .lang-sep {
    color: rgba(255, 255, 255, .5);
}

#contact-topbar .social-link {
    padding: 0 .35rem;
}

.header .navbar-light {
    background-color: var(--primary);
}

.header .navbar-light .navbar-brand,
.header .navbar-light .toolbar .nav-link {
    color: #fff;
}

.header .navbar-light .toolbar .nav-link:hover {
    color: var(--accent);
}

.header .navbar-light .toolbar .cart-btn .badge {
    background-color: var(--accent);
}

.main-navbar-wrapper {
    background-color: var(--primary-lifted);
}

.main-navbar-wrapper .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .9);
}

.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-item.active .nav-link {
    color: #fff;
}

html[data-theme="dark"] #contact-topbar,
html[data-theme="dark"] .header .navbar-light {
    background-color: #0d1120;
}

html[data-theme="dark"] .main-navbar-wrapper {
    background-color: #131a30;
}

/* Theme toggle icon states */
.theme-icon-light { display: none; }
.theme-icon-dark { display: inline-block; }
html[data-theme="dark"] .theme-icon-light { display: inline-block; }
html[data-theme="dark"] .theme-icon-dark { display: none; }

#btnThemeToggle {
    min-width: 44px;
    min-height: 44px;
}

/* =====================================================
   Footer
   ===================================================== */
.footer-lansoft h5 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

/* Footer is a dark surface (nexus bg-inverted) in both modes —
   links must not inherit the dark primary blue */
.footer-lansoft,
.footer-lansoft p {
    color: rgba(255, 255, 255, .85);
}

.footer-lansoft h5 {
    color: #fff;
}

.footer-lansoft a {
    color: rgba(255, 255, 255, .85);
}

.footer-lansoft a:hover {
    color: var(--accent);
}

.footer-lansoft .footer-navigation a {
    display: block;
    padding: .15rem 0;
}

.footer-lansoft .footer-logo {
    filter: brightness(0) invert(1);
}

/* =====================================================
   WhatsApp button
   ===================================================== */
#whatsapp-btn {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
}

#whatsapp-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #23b33a;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

#whatsapp-btn a:hover {
    background: #1e9e33;
    color: #fff;
}

/* =====================================================
   Homepage service cards
   ===================================================== */
.service-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--bg);
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
    transition: box-shadow .2s ease, transform .2s ease;
}

.service-card:hover {
    box-shadow: 0 6px 20px rgba(17, 24, 39, .12);
    transform: translateY(-2px);
}

.service-card .service-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.service-card h4 {
    font-size: 1.1rem;
    margin-bottom: .35rem;
}

.service-card p {
    color: var(--text-lifted);
    margin-bottom: 0;
}

/* =====================================================
   Dark-mode component fixes (hardcoded colors in the
   compiled bootstrap layer of nexus theme.min.css)
   ===================================================== */
html[data-theme="dark"] body {
    color: var(--text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--border-muted);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--bg-accented);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .table {
    color: var(--text);
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    border-color: var(--border-muted);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-muted);
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--bg) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--text) !important;
}

html[data-theme="dark"] .close {
    color: var(--text);
    text-shadow: none;
}

html[data-theme="dark"] .page-link {
    background-color: var(--bg);
    border-color: var(--border-muted);
    color: var(--text);
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-muted);
    color: var(--text-muted);
}

html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .master-breadcrumb {
    background-color: transparent;
}

html[data-theme="dark"] .alert-info {
    background-color: #10233f;
    border-color: #1b3a66;
    color: #9ec5fe;
}

html[data-theme="dark"] .alert-warning {
    background-color: #3a2405;
    border-color: #664d03;
    color: #ffda6a;
}

html[data-theme="dark"] .alert-danger {
    background-color: #3a0d12;
    border-color: #58151c;
    color: #f1aeb5;
}

html[data-theme="dark"] .alert-success {
    background-color: #0a2e1a;
    border-color: #0f5132;
    color: #75b798;
}

html[data-theme="dark"] .sidebar .card,
html[data-theme="dark"] .sidebar .list-group-item {
    background-color: var(--bg);
}

/* --- Dark: every nexus/bootstrap component with a hardcoded light
   background (audited from theme.css) ------------------------------- */
html[data-theme="dark"] header.header {
    background-color: transparent;
}

/* Tables (invoices, domains, services lists) */
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    background-color: transparent;
}

html[data-theme="dark"] .table .thead-light th,
html[data-theme="dark"] table.table-list thead th {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .table-list > tbody > tr > td {
    background-color: var(--bg);
}

html[data-theme="dark"] body .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: var(--bg-lifted);
    color: var(--text);
}

/* Buttons with light backgrounds */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light {
    background-color: var(--bg-accented);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
    background-color: var(--border-lifted);
    border-color: var(--border-lifted);
    color: var(--text);
}

html[data-theme="dark"] .badge-light {
    background-color: var(--bg-accented);
    color: var(--text);
}

/* Form elements — focus/disabled states keep hardcoded white in BS4 */
html[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .custom-select:disabled {
    background-color: var(--bg-accented);
    color: var(--text-lifted);
}

html[data-theme="dark"] .custom-file-label,
html[data-theme="dark"] .custom-file-label::after,
html[data-theme="dark"] .custom-control-label::before {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .input-group .btn-reveal-pw:hover,
html[data-theme="dark"] .input-group .btn-reveal-pw:active {
    background-color: var(--bg-accented);
    color: var(--text);
}

/* Tabs */
html[data-theme="dark"] .nav-tabs {
    border-color: var(--border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--border) var(--border) var(--bg);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border);
}

html[data-theme="dark"] .responsive-tabs-sm,
html[data-theme="dark"] .responsive-tabs-sm .nav-item a.active,
html[data-theme="dark"] .responsive-tabs-sm .nav-item a:hover,
html[data-theme="dark"] .responsive-tabs-sm-connector .channel {
    background-color: var(--bg-lifted);
    color: var(--text);
}

/* Markdown editor (ticket reply) */
html[data-theme="dark"] .md-editor {
    border-color: var(--border);
}

html[data-theme="dark"] .md-editor > .btn-toolbar {
    background-color: var(--bg-lifted);
    border-color: var(--border);
}

html[data-theme="dark"] .md-editor > textarea.markdown-editor,
html[data-theme="dark"] .md-editor > .md-preview {
    background-color: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .md-preview table,
html[data-theme="dark"] .markdown-content table {
    background-color: transparent;
}

/* Homepage / client home cards */
html[data-theme="dark"] .action-icon-btns a {
    background-color: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .client-home-cards .card-header,
html[data-theme="dark"] body .primary-content .client-home-cards .card .card-footer,
html[data-theme="dark"] body .primary-content .client-home-cards .card .card-header .btn {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .home-domain-search .input-group-wrapper {
    background-color: var(--bg-lifted);
}

/* Modals, popovers, lists, misc */
html[data-theme="dark"] .modal .modal-header {
    background-color: var(--bg-lifted);
    border-color: var(--border);
}

html[data-theme="dark"] .popover-header {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus,
html[data-theme="dark"] .list-group-item-action:active {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .list-group-item.disabled,
html[data-theme="dark"] .list-group-item:disabled {
    background-color: var(--bg-muted);
    color: var(--text-muted);
}

html[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .promo-banner,
html[data-theme="dark"] .alert:has(form) {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .progress {
    background-color: var(--bg-accented);
}

html[data-theme="dark"] .img-thumbnail {
    background-color: var(--bg);
    border-color: var(--border);
}

/* Registration, upgrades, product/domain pricing blocks */
html[data-theme="dark"] #registration .field,
html[data-theme="dark"] #registration .form-control {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] #registration .sub-heading span,
html[data-theme="dark"] body #order-standard_cart .sub-heading span {
    background-color: var(--bg-body);
    color: var(--text);
}

html[data-theme="dark"] .featured-tld,
html[data-theme="dark"] .upgrade .products .product,
html[data-theme="dark"] div.product-details-tab-container,
html[data-theme="dark"] .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: var(--bg-lifted);
    color: var(--text);
}

/* Widgets from all.css: phone-country dropdown, markdown editor
   chrome, captcha overlay */
html[data-theme="dark"] .intl-tel-input .country-list {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .intl-tel-input .country-list .country.highlight {
    background-color: var(--bg-accented);
}

html[data-theme="dark"] .md-editor .md-footer,
html[data-theme="dark"] .md-editor > .md-header {
    background-color: var(--bg-lifted);
}

html[data-theme="dark"] .md-editor > textarea,
html[data-theme="dark"] .md-editor > textarea:focus,
html[data-theme="dark"] .md-editor.md-fullscreen-mode .md-input,
html[data-theme="dark"] .md-editor.md-fullscreen-mode .md-preview,
html[data-theme="dark"] .md-editor.md-fullscreen-mode {
    background-color: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .captcha-overlay-popup {
    background-color: var(--bg-lifted);
    color: var(--text);
}

/* =====================================================
   Dark: cart (standard_cart bundle loads AFTER this file,
   so every rule keeps the #order-standard_cart id to win
   the cascade) + store/marketconnect pages
   ===================================================== */
html[data-theme="dark"] #order-standard_cart .panel,
html[data-theme="dark"] #order-standard_cart .panel-default,
html[data-theme="dark"] #order-standard_cart .products .product,
html[data-theme="dark"] #order-standard_cart .product-recommendations .product-recommendation,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item,
html[data-theme="dark"] #order-standard_cart .view-cart-promotion-code,
html[data-theme="dark"] #order-standard_cart .view-cart-gateway-checkout,
html[data-theme="dark"] #order-standard_cart .apply-credit-container,
html[data-theme="dark"] #order-standard_cart .default-captcha,
html[data-theme="dark"] #order-standard_cart .mc-promo,
html[data-theme="dark"] #order-standard_cart .domain-promo-box,
html[data-theme="dark"] #order-standard_cart .domain-selection-options,
html[data-theme="dark"] #order-standard_cart .view-cart-empty,
html[data-theme="dark"] #order-standard_cart .cart-body .products .product header {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--border-muted);
}

html[data-theme="dark"] #order-standard_cart .view-cart-items .item:nth-child(even),
html[data-theme="dark"] #order-standard_cart .panel .panel-heading,
html[data-theme="dark"] #order-standard_cart .panel .panel-footer,
html[data-theme="dark"] #order-standard_cart .panel-addon .panel-price,
html[data-theme="dark"] #order-standard_cart .account-select-container div.account,
html[data-theme="dark"] #order-standard_cart .secondary-cart-body #domainRenewals,
html[data-theme="dark"] #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
html[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header div,
html[data-theme="dark"] #order-standard_cart .domain-pricing .tld-filters .badge,
html[data-theme="dark"] #order-standard_cart .well {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border-muted);
}

html[data-theme="dark"] #order-standard_cart .field,
html[data-theme="dark"] #order-standard_cart .form-control,
html[data-theme="dark"] #order-standard_cart input.field,
html[data-theme="dark"] #order-standard_cart select.field {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] #order-standard_cart .panel .panel-body {
    background-color: var(--bg);
    color: var(--text);
}

/* domain checker + spotlight TLDs (shared classes, may appear
   outside the #order-standard_cart wrapper too) */
html[data-theme="dark"] .domain-checker-container .input-group-box,
html[data-theme="dark"] div.domainresults div:not(.btn-group),
html[data-theme="dark"] .spotlight-tld,
html[data-theme="dark"] .domain-promo-box,
html[data-theme="dark"] .suggested-domains {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border-muted);
}

html[data-theme="dark"] .spotlight-tld .invalid,
html[data-theme="dark"] .spotlight-tld .unavailable {
    background-color: var(--bg-accented);
    color: var(--text-lifted);
}

/* DataTables (assets/css/jquery.dataTables.min.css loads on the
   list pages with high-specificity rules and !important colors —
   matched here with !important) */
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody tr.odd,
html[data-theme="dark"] table.dataTable tbody tr.even {
    background-color: transparent !important;
}

html[data-theme="dark"] table.dataTable tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr > .sorting_3,
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_3,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_3 {
    background-color: var(--bg-muted) !important;
}

html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr:hover > .sorting_2,
html[data-theme="dark"] table.dataTable tbody tr:hover > .sorting_3 {
    background-color: var(--bg-lifted) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-lifted);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-lifted);
    color: var(--text);
    border: 1px solid var(--border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--text) !important;
    background: var(--bg-accented) !important;
    border-color: var(--border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    background: var(--bg-lifted) !important;
    border-color: var(--border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-muted) !important;
    background: transparent !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] div.dataTables_processing {
    color: var(--text);
    background: var(--bg-lifted) !important;
}

html[data-theme="dark"] .table.dataTable tbody tr.active,
html[data-theme="dark"] .table.dataTable tbody tr.active td,
html[data-theme="dark"] .table.dataTable tbody tr.active th {
    background-color: var(--bg-accented) !important;
    color: var(--text);
}

/* Sorted header cell — the nexus rule has 3-class specificity, so
   repeat the full selector under the dark scope */
html[data-theme="dark"] .dataTables_wrapper table.table-list thead th.sorting_asc,
html[data-theme="dark"] .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--bg-accented);
    color: var(--text);
}

/* Second sweep: light-gray hardcoded backgrounds (extended palette
   audit: #f6f6f6, #f8f8f8, #eee, #e5e5e5 ...) */
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .tiles .tile,
html[data-theme="dark"] .twofa-setup .backup-code,
html[data-theme="dark"] .continue-container,
html[data-theme="dark"] .invite-box,
html[data-theme="dark"] .upgrade .product-to-be-upgraded,
html[data-theme="dark"] .view-ticket .posted-by,
html[data-theme="dark"] .view-ticket .attachment-list li figure,
html[data-theme="dark"] .ticketfeedbackstaffcont,
html[data-theme="dark"] div.credit-card,
html[data-theme="dark"] div.product-details div.product-icon,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-sm-2,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-sm-4,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-xs-2,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-xs-4 {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] .markdown-content table > thead > tr > th,
html[data-theme="dark"] .md-preview table > thead > tr > th {
    background-color: var(--bg-lifted);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .invoice-summary-table td.total-row,
html[data-theme="dark"] tr.masspay-total td {
    background-color: var(--bg-accented);
    color: var(--text);
}

html[data-theme="dark"] .btn-default.focus,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default.active,
html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default {
    background-color: var(--border-lifted);
    border-color: var(--border-lifted);
    color: var(--text);
}

html[data-theme="dark"] .select-account a:hover,
html[data-theme="dark"] .popover-user-notifications ul li a:hover {
    background-color: var(--bg-lifted);
    color: var(--text);
}

html[data-theme="dark"] #registration .field[disabled],
html[data-theme="dark"] #registration .field[readonly],
html[data-theme="dark"] #registration .form-control[disabled],
html[data-theme="dark"] #registration .form-control[readonly] {
    background-color: var(--bg-accented);
    color: var(--text-lifted);
}

html[data-theme="dark"] body #order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--bg-accented);
    color: var(--text);
}

/* store / marketconnect promo layouts */
html[data-theme="dark"] .promo-container,
html[data-theme="dark"] .mc-promo,
html[data-theme="dark"] .mc-promo-manage,
html[data-theme="dark"] .mc-promo-login,
html[data-theme="dark"] .panel.card,
html[data-theme="dark"] .panel.card .panel-heading,
html[data-theme="dark"] .panel.card .panel-body {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--border-muted);
}

/* =====================================================
   Mobile
   ===================================================== */
@media (max-width: 575.98px) {
    #contact-topbar {
        font-size: 0.8rem;
    }

    .header .navbar-brand img.logo-img {
        width: 90px;
        height: auto;
    }

    .footer-lansoft .social-media a {
        display: inline-flex;
        margin-right: 1rem;
    }
}