/* *****************************************************
   K-PLANET v4 — Aggressive overrides for Twenty-One
   Targets exact TW classes: .tiles, .bg-color-*, .card-accent-*,
   .primary-bg-color, etc.
***************************************************** */

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

:root {
    /* Everything below is overridden live by the color-switcher widget
       (see includes/color-switcher.tpl) — these are just the defaults. */
    --kp-bg:          #050814;
    --kp-bg-alt:      #0A1228;
    --kp-card:        #0F1C2E;
    --kp-card-hover:  #1A3055;
    --kp-accent:      #FF7A18;
    --kp-accent-dim:  #E8590C;
    --kp-gold:        #FFC542;
    --kp-gold-dim:    #F2A900;
    --kp-accent-rgb:  255, 122, 24;
    --kp-gold-rgb:    255, 197, 66;
    --kp-grad:        linear-gradient(90deg, var(--kp-accent), var(--kp-gold));
    --kp-text:        #E8EEFF;
    --kp-muted:       #A0AEC0;
    --kp-line:        rgba(var(--kp-accent-rgb), 0.25);
}

/* ========== BODY / PRIMARY BG ========== */
html, body,
body.primary-bg-color,
body.primary-bg-color #main-body,
#main-body,
section#main-body,
.main-content,
.primary-content {
    background-color: var(--kp-bg) !important;
    background: var(--kp-bg) !important;
    color: var(--kp-text) !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

/* ========== HEADER ========== */
.header,
.navbar,
.navbar-light,
nav.navbar {
    background-color: var(--kp-bg-alt) !important;
    background: var(--kp-bg-alt) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
}
.navbar a, .nav-link, .navbar-brand {
    color: rgba(255,255,255,0.9) !important;
}
.navbar a:hover, .nav-link:hover {
    color: #fff !important;
}

/* ========== HOME TILES (the white boxes with colored tops) ========== */
.tiles,
.tiles .row,
.tiles .tile,
a.tile {
    background: var(--kp-card) !important;
    background-color: var(--kp-card) !important;
    color: var(--kp-text) !important;
    border: 1px solid rgba(var(--kp-accent-rgb), 0.25) !important;
    border-radius: 12px !important;
}
.tiles .tile {
    margin: 4px !important;
}
.tiles .tile .title,
.tiles .tile .stat,
.tiles .tile i {
    color: var(--kp-gold) !important;
}
.tiles .tile:hover {
    background: var(--kp-card-hover) !important;
    border-color: rgba(var(--kp-gold-rgb), 0.4) !important;
}

/* ========== HOME QUICK-LINK TILES ("How can we help today" / "Your Account") ========== */
/* Base WHMCS rule (.action-icon-btns a) ships white bg + gray text/icon; override it. */
.action-icon-btns a {
    background-color: var(--kp-card) !important;
    color: var(--kp-text) !important;
    border: 1px solid rgba(var(--kp-accent-rgb), 0.2) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}
/* Every .card-accent-* variant (teal, pomegranate, sun-flower, midnight-blue, etc.)
   ships its own rainbow border-top color in theme.css — unify them to the brand accent. */
.action-icon-btns a[class*="card-accent-"] {
    border-top: 3px solid var(--kp-accent) !important;
}
.action-icon-btns a .ico-container i {
    color: var(--kp-accent) !important;
}
.action-icon-btns a:hover {
    background-color: var(--kp-card-hover) !important;
    color: #fff !important;
    border-color: rgba(var(--kp-gold-rgb), 0.45) !important;
}
.action-icon-btns a:hover .ico-container i {
    color: var(--kp-gold) !important;
}

/* Kill ALL colored highlights (blue/green/red/gold) → purple only */
.tiles .highlight,
.tiles .highlight.bg-color-blue,
.tiles .highlight.bg-color-green,
.tiles .highlight.bg-color-red,
.tiles .highlight.bg-color-gold,
.tiles .highlight.bg-color-orange,
.tiles .highlight.bg-color-pink,
.bg-color-blue,
.bg-color-green,
.bg-color-red,
.bg-color-gold,
.bg-color-orange,
.bg-color-pink,
.bg-color-purple {
    background: var(--kp-accent) !important;
    background-color: var(--kp-accent) !important;
    background-image: linear-gradient(90deg, var(--kp-accent), var(--kp-gold)) !important;
}

/* ========== CLIENT HOME CARDS (Your Account section) ========== */
.client-home-cards .card,
.client-home-cards .card-accent-teal,
.client-home-cards .card-accent-red,
.client-home-cards .card-accent-green,
.client-home-cards .card-accent-blue,
.client-home-cards .card-accent-gold,
.client-home-cards .card-accent-orange,
.client-home-cards .card-accent-asbestos,
.client-home-cards .card-accent-pink,
.client-home-cards .card-accent-purple,
.client-home-cards .card-accent-lime,
.client-home-cards .card-accent-emerald,
.card.card-accent-teal,
.card.card-accent-red,
.card.card-accent-green,
.card.card-accent-blue,
.card.card-accent-gold,
.card.card-accent-orange,
.card.card-accent-asbestos,
.card.card-accent-pink,
.card.card-accent-purple,
.card[class*="card-accent"] {
    background: var(--kp-card) !important;
    background-color: var(--kp-card) !important;
    border: 1px solid rgba(var(--kp-accent-rgb), 0.25) !important;
    border-top: 3px solid var(--kp-accent) !important;
    color: var(--kp-text) !important;
    border-radius: 12px !important;
}
.client-home-cards .card-header,
.card[class*="card-accent"] .card-header {
    background: var(--kp-bg-alt) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: #fff !important;
}
.client-home-cards .card a,
.card[class*="card-accent"] a {
    color: var(--kp-gold) !important;
}
.client-home-cards .card:hover {
    border-color: rgba(var(--kp-gold-rgb), 0.4) !important;
    box-shadow: 0 8px 24px rgba(var(--kp-accent-rgb), 0.2) !important;
}

/* ========== GENERAL CARDS / PANELS ========== */
.card, .panel, .well, .list-group-item {
    background-color: var(--kp-card) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: var(--kp-text) !important;
}
.card-header, .panel-heading, .card-footer {
    background-color: var(--kp-bg-alt) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: #fff !important;
}
.card-body, .panel-body {
    background-color: transparent !important;
    color: var(--kp-text) !important;
}

/* Kill white backgrounds everywhere */
.bg-white, .bg-light, .white-bg,
.card.bg-white, .panel.bg-white {
    background-color: var(--kp-card) !important;
    color: var(--kp-text) !important;
}

/* ========== BUTTONS ========== */
.btn-primary, .btn-success, .btn-info,
a.btn-primary, button.btn-primary,
.btn.search, input[type="submit"].btn-primary {
    background: linear-gradient(90deg, var(--kp-accent), var(--kp-gold)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.btn-primary:hover, .btn-success:hover {
    background: linear-gradient(90deg, var(--kp-accent-dim), var(--kp-gold-dim)) !important;
    color: #fff !important;
}
.btn-default, .btn-secondary, .btn-light {
    background: var(--kp-card) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: var(--kp-text) !important;
}
.btn-outline-primary {
    border: 1.5px solid var(--kp-accent) !important;
    color: var(--kp-gold) !important;
    background: transparent !important;
}

/* ========== FORMS ========== */
.form-control, input.form-control, select.form-control, textarea.form-control,
input[type="text"], input[type="email"], input[type="password"], select, textarea {
    background-color: var(--kp-bg) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: #fff !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--kp-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--kp-accent-rgb), 0.3) !important;
    background-color: var(--kp-bg) !important;
    color: #fff !important;
}

/* ========== LINKS / TEXT ========== */
a { color: var(--kp-gold) !important; }
a:hover { color: #fff !important; }
h1, h2, h3, h4, h5, h6, .card-title {
    font-family: "Sora", sans-serif !important;
    color: #fff !important;
}
.text-muted, label, small, .help-block { color: var(--kp-muted) !important; }

/* ========== SIDEBAR ========== */
.card-sidebar .list-group-item {
    background: transparent !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: var(--kp-text) !important;
}
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item:hover {
    background: linear-gradient(90deg, rgba(var(--kp-accent-rgb), 0.35), rgba(var(--kp-gold-rgb), 0.12)) !important;
    color: #fff !important;
}

/* ========== FOOTER ========== */
#footer, footer, .footer {
    background: var(--kp-bg-alt) !important;
    border-top: 1px solid rgba(var(--kp-accent-rgb), 0.25) !important;
    color: var(--kp-muted) !important;
}
#footer a { color: var(--kp-muted) !important; }
#footer a:hover { color: var(--kp-gold) !important; }

/* ========== TABLES ========== */
.table thead th {
    background: var(--kp-bg-alt) !important;
    color: var(--kp-muted) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
}
.table td, .table th {
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: var(--kp-text) !important;
}
/* Explicit row/cell backgrounds — without these, a table sitting on any
   ancestor that isn't our dark bg (DataTables wrappers, "table-container"
   divs, etc.) falls back to a transparent/light background, and our light
   text color on that becomes almost unreadable (e.g. domain pricing table). */
.table, .table-list, table.dataTable,
.dataTables_wrapper table.table-list,
.dataTables_wrapper table.dataTable {
    background-color: var(--kp-card) !important;
}
.table tbody tr, .table-list tbody tr, table.dataTable tbody tr {
    background-color: var(--kp-card) !important;
}
.table tbody td, .table-list tbody td, table.dataTable tbody td {
    background-color: var(--kp-card) !important;
    color: var(--kp-text) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter label {
    color: var(--kp-muted) !important;
}
.dataTables_wrapper .dataTables_filter .form-control {
    background-color: var(--kp-bg) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--kp-card) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
    color: var(--kp-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--kp-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ========== DROPDOWNS / MODALS ========== */
.dropdown-menu {
    background: var(--kp-card) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
}
.dropdown-item { color: var(--kp-text) !important; }
.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(var(--kp-accent-rgb), 0.3), rgba(var(--kp-gold-rgb), 0.1)) !important;
    color: #fff !important;
}
.modal-content {
    background: var(--kp-card) !important;
    color: var(--kp-text) !important;
    border-color: rgba(var(--kp-accent-rgb), 0.25) !important;
}

/* ========== FORCE KILL ANY REMAINING WHITE ========== */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: white"],
[style*="background: white"],
[style*="background-color:#ffffff"],
[style*="background:#ffffff"] {
    background-color: var(--kp-card) !important;
    color: var(--kp-text) !important;
}