@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap");
/* ==========================================================================
   ConectHost — Tema WHMCS "Navy" (V3 · corporativo híbrido)
   --------------------------------------------------------------------------
   Chrome navy de operadora (header + breadcrumb + sidebar escuros, cada um
   com FUNDO PRÓPRIO) sobre conteúdo claro off-white em cards. REGRA DE OURO:
   nenhum texto aposta em qual fundo vai cair — branco só sobre navy próprio.
   JetBrains Mono = "voz técnica" (IDs, valores, status), Space Grotesk nos
   títulos, laranja EXCLUSIVO para pagamento.

   Carregado por último via includes/head.tpl {assetExists file="custom.css"}
   (e também no viewinvoice/viewquote standalone). Não editar theme.css nem
   scripts.min.js — todo o rebrand vive aqui + edições pontuais de .tpl.
   Bootstrap 4.5.3 / jQuery 1.12.4 preservados.
   ========================================================================== */

/* ================================================================= TOKENS */
:root {
    /* Marca */
    --ch-primary: #0a5edc;
    --ch-primary-bright: #2f7dff;
    --ch-primary-dark: #0948b3;
    --ch-primary-darker: #073482;
    --ch-navy: #02345c;
    --ch-navy-deep: #021a33;
    --ch-cyan: #38e0f0;        /* decorativo sobre navy */
    --ch-cyan-text: #0369a1;   /* cyan LEGÍVEL p/ texto sobre claro (AA) */
    --ch-accent: #f67a3c;
    --ch-accent-2: #ff9d2f;
    --ch-accent-ink: #2a1402;

    /* Estados */
    --ch-green: #16a34a;
    --ch-green-bright: #34d399;
    --ch-info: #0ea5e9;
    --ch-warning: #b45309;
    --ch-danger: #dc2626;

    /* Superfícies claras */
    --ch-bg: #f4f7fc;
    --ch-surface: #ffffff;
    --ch-surface-2: #eef3fb;
    --ch-border: #e4e9f2;
    --ch-border-strong: #cdd6e6;
    --ch-heading: #0f213a;
    --ch-text: #334155;
    --ch-text-muted: #64748b;

    /* Sobre navy */
    --ch-on-navy: rgba(255, 255, 255, .85);
    --ch-on-navy-dim: rgba(255, 255, 255, .6);
    --ch-navy-line: rgba(56, 224, 240, .16);

    /* Forma */
    --ch-radius-sm: 10px;
    --ch-radius: 14px;
    --ch-radius-lg: 18px;
    --ch-radius-pill: 999px;

    /* Sombras / brilhos */
    --ch-shadow-card: 0 1px 3px rgba(15, 33, 58, .05), 0 12px 30px -20px rgba(15, 33, 58, .16);
    --ch-shadow: 0 18px 40px -22px rgba(15, 33, 58, .22);
    --ch-shadow-deep: 0 20px 50px -24px rgba(2, 18, 40, .5);
    --ch-glow-blue: 0 0 0 1px rgba(10, 94, 220, .18), 0 14px 34px -14px rgba(10, 94, 220, .42);
    --ch-glow-cta: 0 0 0 1px rgba(255, 157, 47, .35), 0 18px 44px -14px rgba(255, 122, 60, .55);

    /* Tipografia */
    --ch-font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ch-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ch-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --ch-transition: .18s ease;
}

/* =================================================================== BASE */
body {
    font-family: var(--ch-font-body);
    color: var(--ch-text);
    background: #eef2f9; /* páginas standalone (viewinvoice/viewquote) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* REGRA DE OURO (aprendida no deploy): o navy mora nos PRÓPRIOS elementos
   (header, breadcrumb, banners com fundo próprio) — nunca numa banda do body
   em altura fixa. Nenhum texto aposta em qual fundo vai cair. */
body.primary-bg-color {
    background-color: var(--ch-bg);
    background-image: radial-gradient(900px 480px at 85% -10%, rgba(10, 94, 220, .06), transparent 60%);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ch-font-display);
    color: var(--ch-heading);
    letter-spacing: -.02em;
    font-weight: 700;
}

a { color: var(--ch-primary); transition: color var(--ch-transition); }
a:hover { color: var(--ch-primary-dark); }
::selection { background: rgba(10, 94, 220, .18); }
hr { border-top-color: var(--ch-border); }
.text-primary { color: var(--ch-primary) !important; }
.text-muted { color: var(--ch-text-muted) !important; }

/* Conteúdo assenta direto no fundo (morre o painel de vidro do tema antigo) */
#main-body > .container {
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

/* Utilitárias de marca */
.ch-eyebrow {
    font-family: var(--ch-font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ch-cyan-text);
}
.ch-chip {
    display: inline-block;
    font-family: var(--ch-font-mono);
    font-size: .72rem;
    color: var(--ch-text);
    border: 1px solid var(--ch-border);
    background: var(--ch-surface);
    border-radius: var(--ch-radius-pill);
    padding: .24rem .65rem;
}
/* Display técnico escuro embutido (Pix, credenciais, status) */
.ch-display {
    background: #0a0f1d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--ch-radius);
    color: #c7d2e0;
    font-family: var(--ch-font-mono);
    padding: 1rem 1.15rem;
}
.ch-display .ok { color: var(--ch-green-bright); }
.ch-display .cy { color: var(--ch-cyan); }

@keyframes chLive {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
    70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.ch-dot-live {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ch-green-bright); animation: chLive 2s infinite;
}

/* ================================================================= HEADER */
/* Header carrega o próprio navy (gradiente 90deg = horizontal puro: o
   breadcrumb logo abaixo usa o MESMO gradiente e a emenda fica invisível) */
header.header {
    background: linear-gradient(90deg, var(--ch-navy-deep) 0%, #06376c 60%, var(--ch-primary-dark) 100%);
    box-shadow: none;
}

header.header .topbar {
    background: rgba(2, 14, 30, .35);
    color: var(--ch-on-navy);
}
header.header .topbar .btn { color: var(--ch-on-navy); }
header.header .topbar .btn:hover { color: #fff; }
header.header .topbar .btn-active-client {
    background: rgba(255, 255, 255, .12);
    border-radius: var(--ch-radius-sm);
    font-weight: 600;
    font-family: var(--ch-font-mono);
    font-size: .82rem;
}

header.header .navbar.navbar-light {
    background: transparent;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
/* header.header na frente: vence .navbar-light .navbar-brand do Bootstrap */
header.header .navbar-brand,
header.header .navbar-brand:hover,
header.header .navbar-brand:focus { color: #fff; font-family: var(--ch-font-display); font-weight: 700; }
/* Logo colorida vira chip branco sobre o navy (regra da marca) */
.navbar-brand .logo-img {
    max-height: 44px; width: auto;
    background: #fff;
    padding: 5px 10px;
    border-radius: 9px;
    box-shadow: 0 2px 12px rgba(2, 18, 40, .3);
}
.main-navbar-wrapper {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid var(--ch-navy-line);
}
/* CAUSA RAIZ do texto apagado: theme.css tem `header.header .navbar a
   { color:#444 }` (0,2,2), que vence seletores mais fracos e pinta marca e
   menu de cinza. Override na MESMA especificidade — custom.css carrega
   depois, então vence. O navbar.tpl real NÃO usa .nav-item/.nav-link:
   os links são `ul#nav > li > a` e `ul.navbar-nav > li > a`. */
header.header .navbar a,
header.header .navbar-nav .nav-link { color: rgba(255, 255, 255, .92); }
header.header .navbar a:hover,
header.header .navbar a:focus,
header.header .navbar-nav .nav-link:hover { color: #fff; }
header.header .navbar-brand { font-size: 1.35rem; letter-spacing: -.02em; }

/* Links do menu (primário #nav e secundário "Conta") */
#nav > li > a,
header.header .navbar-nav > li > a {
    font-family: var(--ch-font-body);
    font-weight: 600;
    font-size: .95rem;
    padding: .55rem .95rem;
    border-radius: var(--ch-radius-sm);
    transition: color var(--ch-transition), background-color var(--ch-transition);
}
#nav > li > a:hover,
header.header .navbar-nav > li > a:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* Dropdowns abrem em painel CLARO — re-escurecer os itens (o override branco
   acima os alcançaria e sumiriam no branco) */
header.header .navbar .dropdown-menu a {
    color: var(--ch-text);
    font-weight: 500;
}
header.header .navbar .dropdown-menu a:hover,
header.header .navbar .dropdown-menu a:focus {
    color: var(--ch-primary);
    background: var(--ch-surface-2);
}
header.header .dropdown-item.active,
header.header .dropdown-item:active { background-color: var(--ch-primary); }
header.header .navbar .dropdown-menu .dropdown-item.active a { color: #fff; }

/* Dropdowns do menu abrem como painel claro premium */
.dropdown-menu {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    padding: .45rem;
}
.dropdown-menu .dropdown-item,
.navbar-nav .dropdown-menu .dropdown-item a,
.navbar-nav .dropdown-menu li > a {
    color: var(--ch-text);
    border-radius: var(--ch-radius-sm);
    font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--ch-surface-2); color: var(--ch-primary); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--ch-primary); color: #fff; }
.dropdown-divider { border-top-color: var(--ch-border); }

/* Busca no header — campo de comando sobre o navy */
header.header .input-group.search .form-control {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}
header.header .input-group.search .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
    font-family: var(--ch-font-mono);
    font-size: .85rem;
}
header.header .input-group.search .btn-default {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: var(--ch-cyan);
}
.cart-btn { color: rgba(255, 255, 255, .9); }
.cart-btn .badge-info, .badge-info {
    background-color: var(--ch-accent);
    color: #fff;
    font-family: var(--ch-font-mono);
}

/* ============================================================= BREADCRUMB */
/* Mesmo gradiente 90deg do header — continuidade sem emenda + sombra fecha o chrome */
.master-breadcrumb {
    background: linear-gradient(90deg, var(--ch-navy-deep) 0%, #06376c 60%, var(--ch-primary-dark) 100%);
    border: 0;
    border-bottom: 1px solid var(--ch-navy-line);
    box-shadow: 0 10px 30px -18px rgba(2, 18, 40, .55);
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    font-family: var(--ch-font-mono);
    font-size: .8rem;
    padding: .45rem 0;
    margin: 0;
}
/* Breadcrumb de item ÚNICO é inútil (é o nome do sistema, sem link — na home
   aparecia um "Suporte" morto, vindo do lang globalsystemname). Some com ele;
   trilhas reais (2+ itens, ex. "Suporte / Minhas Faturas") continuam. */
.master-breadcrumb .breadcrumb-item:only-child { display: none; }
.master-breadcrumb:has(.breadcrumb-item:only-child) { display: none; }
.master-breadcrumb .breadcrumb a,
.master-breadcrumb .breadcrumb-item { color: var(--ch-on-navy-dim); }
.master-breadcrumb .breadcrumb a:hover { color: #fff; }
.master-breadcrumb .breadcrumb-item.active { color: var(--ch-cyan); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .3);
    content: "/";
}

/* ================================================================ SIDEBAR */
/* A pilha de cards do WHMCS funde-se numa rail navy única */
.sidebar .card-sidebar {
    background: linear-gradient(180deg, var(--ch-navy-deep) 0%, var(--ch-navy) 55%, var(--ch-primary-dark) 160%);
    border: 1px solid var(--ch-navy-line);
    border-radius: var(--ch-radius-lg);
    box-shadow: var(--ch-shadow-deep);
    overflow: hidden;
}
.sidebar .card-sidebar .card-header {
    background: transparent;
    border-bottom: 0;
    padding: .9rem 1rem .3rem;
}
.sidebar .card-sidebar .card-header .card-title {
    font-family: var(--ch-font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a99b3;
}
.sidebar .card-sidebar .card-header .card-minimise { color: rgba(255, 255, 255, .35); }
.sidebar .card-sidebar .list-group-item {
    background: transparent;
    border: 0;
    color: var(--ch-on-navy);
    font-size: .92rem;
    margin: 2px 10px;
    border-radius: var(--ch-radius-sm);
    padding: .55rem .85rem;
    transition: background-color var(--ch-transition), color var(--ch-transition);
}
.sidebar .card-sidebar .list-group-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .card-sidebar .list-group-item.active,
.sidebar .card-sidebar .list-group-item.active:hover {
    background: rgba(56, 224, 240, .16);
    color: var(--ch-cyan);
    font-weight: 600;
    border-left: 3px solid var(--ch-cyan);
    box-shadow: inset 0 0 12px rgba(56, 224, 240, .06);
}
.sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--ch-cyan); }
.sidebar .card-sidebar .sidebar-menu-item-icon { color: #7fb3ff; }
.sidebar .card-sidebar .list-group-item .badge {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-family: var(--ch-font-mono);
    border-radius: var(--ch-radius-pill);
}
.sidebar .card-sidebar .card-footer {
    background: rgba(2, 14, 30, .3);
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--ch-on-navy);
}
.sidebar .card-sidebar .card-footer a { color: var(--ch-cyan); }
/* fallback mobile (select) escurece junto */
.sidebar select.form-control,
.card .card-body select.form-control[onchange] {
    border-radius: var(--ch-radius-sm);
}

/* =========================================================== WELCOME BAR */
/* Banner navy com FUNDO PRÓPRIO (não depende de nada atrás) */
.ch-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    margin: .25rem 0 1.5rem;
    background:
        radial-gradient(420px 160px at 92% 0%, rgba(56, 224, 240, .14), transparent 65%),
        linear-gradient(120deg, var(--ch-navy-deep) 0%, var(--ch-navy) 55%, var(--ch-primary-dark) 100%);
    border: 1px solid var(--ch-navy-line);
    border-radius: var(--ch-radius-lg);
    color: #fff;
    box-shadow: var(--ch-shadow-deep);
}
.ch-welcome h2 {
    color: #fff;
    margin: 0;
    font-size: 1.55rem;
    font-family: var(--ch-font-display);
}
.ch-welcome p {
    color: var(--ch-on-navy-dim);
    margin: .3rem 0 0;
    font-family: var(--ch-font-mono);
    font-size: .8rem;
}
.ch-welcome .btn-light {
    background: rgba(255, 255, 255, .12);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.ch-welcome .btn-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ================================================================= TILES */
/* KPI cards fintech (cards brancos sobre o fundo claro) */
.tiles .row.no-gutters { margin: -6px; }
.tiles .tile {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow-card);
    margin: 6px;
    padding: 16px 18px 14px;
    position: relative;
    overflow: hidden;
    transition: transform var(--ch-transition), box-shadow var(--ch-transition), border-color var(--ch-transition);
}
.tiles .tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow);
    border-color: var(--ch-border-strong);
    color: inherit;
    text-decoration: none;
}
.tiles .tile i {
    color: var(--ch-primary);
    background: rgba(10, 94, 220, .08);
    width: 40px; height: 40px;
    border-radius: var(--ch-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.tiles .tile .stat {
    color: var(--ch-heading);
    font-family: var(--ch-font-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.15;
}
.tiles .tile .title {
    color: var(--ch-text-muted);
    font-family: var(--ch-font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* Faixa colorida sai do rodapé e vira fio de acento no TOPO */
.tiles .tile .highlight {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.bg-color-blue   { background: linear-gradient(90deg, var(--ch-primary), var(--ch-info)) !important; }
.bg-color-green  { background: var(--ch-green) !important; }
.bg-color-red    { background: var(--ch-danger) !important; }
.bg-color-gold,
.bg-color-orange { background: linear-gradient(90deg, var(--ch-accent-2), var(--ch-accent)) !important; }

/* ================================================================== CARDS */
.card {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow-card);
    transition: box-shadow var(--ch-transition), border-color var(--ch-transition);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ch-border);
    border-radius: var(--ch-radius) var(--ch-radius) 0 0;
    padding: 1rem 1.25rem;
}
.card .card-header .card-title {
    font-family: var(--ch-font-display);
    font-weight: 700;
    color: var(--ch-heading);
    font-size: 1rem;
}
.card .card-footer {
    background: transparent;
    border-top: 1px solid var(--ch-border);
    border-radius: 0 0 var(--ch-radius) var(--ch-radius);
}
/* Acentos de card: fio gradiente no topo (remap dos card-accent-*) */
.card[class*="card-accent-"] { border-top: 0; position: relative; overflow: hidden; }
.card[class*="card-accent-"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ch-primary), var(--ch-info));
}
.card.card-accent-green::before,
.card.card-accent-emerald::before  { background: var(--ch-green); }
.card.card-accent-teal::before     { background: linear-gradient(90deg, #14b8a6, var(--ch-info)); }
.card.card-accent-sun-flower::before,
.card.card-accent-gold::before     { background: linear-gradient(90deg, var(--ch-accent-2), var(--ch-accent)); }
.card.card-accent-pomegranate::before,
.card.card-accent-red::before      { background: var(--ch-danger); }
.card.card-accent-asbestos::before { background: var(--ch-navy); }
.card.card-accent-midnight-blue::before { background: linear-gradient(90deg, var(--ch-navy), var(--ch-primary)); }

.list-group-item { border-color: var(--ch-border); }
.list-group-item.active {
    background-color: rgba(10, 94, 220, .08);
    border-color: rgba(10, 94, 220, .08);
    color: var(--ch-primary-dark);
    font-weight: 600;
}
.list-group-item-action:hover { background-color: #f6f9fe; }

/* Tabelas soltas (tablelist) ganham "card" próprio (superfície branca) */
.table-container {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow-card);
    padding: .75rem 1rem;
}

/* ================================================================= BOTÕES */
.btn {
    font-family: var(--ch-font-body);
    font-weight: 600;
    border-radius: var(--ch-radius-sm);
    transition: background-color var(--ch-transition), border-color var(--ch-transition),
                box-shadow var(--ch-transition), transform var(--ch-transition), color var(--ch-transition);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 2px; }

.btn-primary {
    background: linear-gradient(180deg, var(--ch-primary-bright), var(--ch-primary));
    border-color: transparent;
    box-shadow: var(--ch-glow-blue);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background: linear-gradient(180deg, var(--ch-primary), var(--ch-primary-dark));
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(10, 94, 220, .3), 0 18px 40px -14px rgba(10, 94, 220, .5);
}
.btn-primary.disabled, .btn-primary:disabled {
    background: var(--ch-primary);
    border-color: var(--ch-primary);
    box-shadow: none;
}

.btn-default, .btn-secondary {
    background: var(--ch-surface);
    border-color: var(--ch-border-strong);
    color: var(--ch-heading);
    box-shadow: var(--ch-shadow-card);
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--ch-surface-2);
    border-color: var(--ch-primary-bright);
    color: var(--ch-primary);
}

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

/* Laranja = EXCLUSIVO de pagamento/contratação */
.btn-accent, .btn-success {
    color: var(--ch-accent-ink);
    background: linear-gradient(180deg, var(--ch-accent-2), var(--ch-accent));
    border-color: transparent;
    box-shadow: var(--ch-glow-cta);
}
.btn-accent:hover, .btn-success:hover,
.btn-success:not(:disabled):not(.disabled):active {
    color: var(--ch-accent-ink);
    background: linear-gradient(180deg, var(--ch-accent), #e9631f);
    border-color: transparent;
}

.btn-danger {
    background: transparent;
    border-color: var(--ch-danger);
    color: var(--ch-danger);
}
.btn-danger:hover { background: var(--ch-danger); color: #fff; border-color: var(--ch-danger); }

.btn-link { color: var(--ch-primary); }
.btn-link:hover { color: var(--ch-primary-dark); }

/* ================================================================== FORMS */
.form-control, .custom-select {
    border-radius: var(--ch-radius-sm);
    border-color: var(--ch-border-strong);
    color: var(--ch-text);
    min-height: 42px;
    transition: border-color var(--ch-transition), box-shadow var(--ch-transition);
}
textarea.form-control { min-height: 0; }
.form-control:focus, .custom-select:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 .2rem rgba(10, 94, 220, .15);
}
.form-control::placeholder { color: #94a3b8; }
.form-control.is-invalid { border-color: var(--ch-danger); }
.invalid-feedback { color: var(--ch-danger); }
label, .form-control-label { color: var(--ch-heading); font-weight: 600; }

.input-group-text {
    background: var(--ch-surface-2);
    border-color: var(--ch-border-strong);
    color: var(--ch-text-muted);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ch-primary);
    border-color: var(--ch-primary);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(10, 94, 220, .2);
}

/* ============================================================ TABELAS + DT */
.table { color: var(--ch-text); }
.table thead th, .table thead td {
    border-top: 0;
    border-bottom: 1px solid var(--ch-border);
    color: var(--ch-text-muted);
    font-family: var(--ch-font-mono);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.table td, .table th { border-color: var(--ch-border); vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-hover tbody tr:hover { background: #f6f9fe; }

/* Chrome do DataTables — a parte mais "WHMCS" das listas */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ch-border-strong);
    border-radius: var(--ch-radius-sm);
    padding: .35rem .65rem;
    color: var(--ch-text);
    background: var(--ch-surface);
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 .2rem rgba(10, 94, 220, .12);
    outline: 0;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-family: var(--ch-font-mono);
    font-size: .78rem;
    color: var(--ch-text-muted);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--ch-radius-sm) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--ch-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ch-surface-2) !important;
    color: var(--ch-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ch-primary) !important;
    color: #fff !important;
    border-color: var(--ch-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--ch-primary) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.dataTables_empty { color: var(--ch-text-muted); font-family: var(--ch-font-mono); }

.pagination .page-link { color: var(--ch-primary); border-color: var(--ch-border); }
.pagination .page-item.active .page-link {
    background: var(--ch-primary);
    border-color: var(--ch-primary);
}

/* ====================================================== STATUS PILLS/BADGES */
.badge, .label {
    font-family: var(--ch-font-mono);
    font-weight: 600;
    border-radius: var(--ch-radius-pill);
    padding: .32em .7em;
    letter-spacing: .03em;
}
.badge-success, .label-success, .status-active   { background: #ecfdf3 !important; color: #067647 !important; }
.badge-danger, .label-danger, .status-terminated,
.status-cancelled, .status-fraud                 { background: #fef3f2 !important; color: #b42318 !important; }
.badge-warning, .label-warning, .status-pending,
.status-suspended                                { background: #fff4ec !important; color: #b54708 !important; }
.badge-info, .label-info                         { background: var(--ch-accent); color: #fff; }
.badge-default, .label-default                   { background: #f1f5f9 !important; color: var(--ch-text-muted) !important; }
.badge-primary, .label-primary                   { background: rgba(10, 94, 220, .12) !important; color: var(--ch-primary-dark) !important; }

/* ================================================================= ALERTS */
.alert { border: 1px solid transparent; border-radius: var(--ch-radius); }
.alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.alert-info    { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }
.alert-warning { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.alert-danger  { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.alert .alert-link { color: inherit; text-decoration: underline; }

/* ====================================================== TABS / PROGRESS */
.nav-tabs { border-bottom-color: var(--ch-border); }
.nav-tabs .nav-link {
    border: 0;
    color: var(--ch-text-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ch-primary); border-color: transparent transparent var(--ch-border); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--ch-primary);
    background: transparent;
    border-bottom: 2px solid var(--ch-primary);
}
.nav-pills .nav-link.active { background: var(--ch-primary); }

.progress {
    background: var(--ch-surface-2);
    border-radius: var(--ch-radius-pill);
    height: 10px;
}
.progress-bar { background: linear-gradient(90deg, var(--ch-primary), var(--ch-info)); }
.progress-bar.bg-warning { background: linear-gradient(90deg, var(--ch-accent-2), var(--ch-accent)) !important; }
.progress-bar.bg-danger { background: var(--ch-danger) !important; }

/* ======================================================== MODAIS / POPOVER */
.modal-content {
    border: 0;
    border-radius: var(--ch-radius-lg);
    box-shadow: 0 28px 80px rgba(2, 18, 40, .4);
}
.modal-header { border-bottom-color: var(--ch-border); }
.modal-header .modal-title { font-family: var(--ch-font-display); color: var(--ch-heading); }
.modal-footer { border-top-color: var(--ch-border); }
.popover {
    border-color: var(--ch-border);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
}
.popover .popover-header {
    background: transparent;
    border-bottom-color: var(--ch-border);
    font-family: var(--ch-font-display);
}
.tooltip-inner { border-radius: var(--ch-radius-sm); font-family: var(--ch-font-mono); font-size: .75rem; }
.client-alerts li a:hover { background: var(--ch-surface-2); }

/* ============================================================ AUTENTICAÇÃO */
.ch-auth-split {
    display: flex;
    max-width: 940px;
    margin: 1.5rem auto;
    background: var(--ch-surface);
    border-radius: var(--ch-radius-lg);
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(2, 18, 40, .45);
}
.ch-auth-split .ch-auth-brand {
    flex: 0 0 42%;
    padding: 3rem 2.5rem;
    color: #fff;
    background:
        radial-gradient(420px 200px at 110% 0%, rgba(246, 122, 60, .22), transparent 70%),
        linear-gradient(160deg, var(--ch-navy-deep) 0%, var(--ch-primary-dark) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ch-auth-split .ch-auth-brand .ch-auth-logo {
    font-family: var(--ch-font-display);
    font-size: 1.5rem; font-weight: 700;
    margin-bottom: 1.25rem; letter-spacing: -.02em;
}
.ch-auth-split .ch-auth-brand h2 { color: #fff; font-size: 1.45rem; }
.ch-auth-split .ch-auth-brand p { color: var(--ch-on-navy-dim); }
.ch-auth-split .ch-auth-brand ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.ch-auth-split .ch-auth-brand ul li { padding: .3rem 0; color: var(--ch-on-navy); }
.ch-auth-split .ch-auth-brand ul li i { color: var(--ch-green-bright); margin-right: .5rem; }
/* chips técnicos do painel de marca (login.tpl) */
.ch-brand-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.ch-brand-chips span {
    font-family: var(--ch-font-mono);
    font-size: .7rem;
    color: var(--ch-on-navy);
    border: 1px solid rgba(56, 224, 240, .25);
    background: rgba(56, 224, 240, .08);
    border-radius: var(--ch-radius-pill);
    padding: .26rem .7rem;
}
.ch-brand-status {
    margin-top: 1.1rem;
    font-family: var(--ch-font-mono);
    font-size: .78rem;
    color: var(--ch-on-navy);
    display: flex; align-items: center; gap: .5rem;
}
.ch-auth-split .ch-auth-form { flex: 1 1 58%; padding: 2.75rem 2.5rem; }
.ch-auth-split .ch-auth-form .card { box-shadow: none !important; border: 0; }
.ch-auth-split .ch-auth-form .card-body { padding: 0 !important; }
.ch-auth-split .ch-auth-form .card-footer { background: transparent; border: 0; padding: 1rem 0 0; }
@media (max-width: 767.98px) {
    .ch-auth-split { flex-direction: column; }
    .ch-auth-split .ch-auth-brand { flex-basis: auto; padding: 2rem; }
    .ch-auth-split .ch-auth-form { padding: 1.75rem; }
}
.ch-auth-intro { text-align: center; max-width: 640px; margin: 1rem auto 2rem; }
.ch-auth-intro h1 { font-size: 1.7rem; color: var(--ch-heading); }
.ch-auth-intro p { color: var(--ch-text-muted); margin-bottom: 0; }
.ch-auth-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ch-navy), var(--ch-primary));
    color: #fff; font-size: 1.4rem;
    box-shadow: var(--ch-shadow-deep);
}
.login-form .card { border: 0; }

/* ================================================== FATURA (standalone) */
.invoice-container {
    max-width: 920px;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    box-shadow: 0 24px 70px -24px rgba(2, 18, 40, .35);
    padding: 2.2rem 2.4rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.invoice-container h2, .invoice-container h3 { color: var(--ch-heading); }
.invoice-status span {
    display: inline-block;
    font-family: var(--ch-font-mono);
    padding: .4rem 1.1rem;
    border-radius: var(--ch-radius-pill);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.invoice-status .paid        { background: #ecfdf3; color: #067647; }
.invoice-status .unpaid      { background: #fff4ec; color: #b54708; }
.invoice-status .draft       { background: #f1f5f9; color: #475569; }
.invoice-status .refunded    { background: #eff8ff; color: #175cd3; }
.invoice-status .cancelled   { background: #f1f5f9; color: #64748b; }
.invoice-status .collections { background: #fef3f2; color: #b42318; }
.invoice-container .table td.total-row { background: var(--ch-surface-2); }
.invoice-container .table tr:last-child .total-row {
    background: rgba(10, 94, 220, .06);
    color: var(--ch-heading);
    font-family: var(--ch-font-display);
    font-size: 1.05rem;
}
.invoice-container .small-text { color: var(--ch-text-muted); }
.payment-btn-container .btn { margin-top: .5rem; }

/* ================================================================ TICKETS */
.view-ticket .card-title { color: var(--ch-heading); }
.ticket-reply { border-radius: var(--ch-radius); overflow: hidden; border: 1px solid var(--ch-border); }
.ticket-reply .posted-by {
    background: var(--ch-surface-2);
    border-bottom: 1px solid var(--ch-border);
    padding: .6rem 1rem;
    font-family: var(--ch-font-mono);
    font-size: .78rem;
    color: var(--ch-text-muted);
}
.ticket-reply .posted-by .posted-by-name { color: var(--ch-heading); font-weight: 700; }
.ticket-reply.staff {
    border-left: 3px solid var(--ch-primary);
    background: #f6f9fe;
}
.ticket-reply.staff .posted-by { background: rgba(10, 94, 220, .07); }
.requestor-badge {
    border-radius: var(--ch-radius-pill);
    padding: .2rem .7rem;
    font-family: var(--ch-font-mono);
    font-size: .7rem;
    font-weight: 600;
    background: var(--ch-surface-2);
    color: var(--ch-heading);
}
.requestor-type-client { background: #f1f5f9; color: var(--ch-text); }
.requestor-type-admin, .requestor-type-operator {
    background: rgba(10, 94, 220, .12);
    color: var(--ch-primary-dark);
}
.attachment-list .caption { color: var(--ch-text); }

/* ==================================================== BUSCA DE DOMÍNIO */
/* Markup real: includes/domain-search.tpl usa .home-domain-search.bg-white
   (utilitário Bootstrap com !important — por isso o override também precisa) */
.home-domain-search, .home-domain-search.bg-white {
    background:
        radial-gradient(560px 220px at 90% 0%, rgba(56, 224, 240, .14), transparent 65%),
        linear-gradient(135deg, var(--ch-navy-deep) 0%, var(--ch-navy) 55%, var(--ch-primary-dark) 100%) !important;
    border-bottom: 1px solid var(--ch-navy-line);
}
.home-domain-search h2 { color: #fff; }
.home-domain-search .form-control { border: 0; min-height: 48px; }
.home-domain-search .tld-logos li { color: var(--ch-on-navy); font-family: var(--ch-font-mono); }
.home-domain-search .btn-link { color: var(--ch-cyan); font-weight: 600; }
.home-domain-search .btn-link:hover { color: #fff; }
/* Página do domain checker (order form) mantém o hero navy */
#domain-checker, .domain-checker-container {
    background: linear-gradient(135deg, var(--ch-navy-deep) 0%, var(--ch-navy) 55%, var(--ch-primary-dark) 100%);
}
#domain-checker .domaincheckerheader { color: #fff; }

/* ============================================================ HOME PÚBLICA */
.ch-hero {
    position: relative;
    margin: .25rem 0 2rem;
    padding: 3rem 1.5rem 3.4rem;
    background:
        radial-gradient(520px 220px at 12% 0%, rgba(246, 122, 60, .18), transparent 70%),
        radial-gradient(680px 280px at 100% 100%, rgba(56, 224, 240, .16), transparent 70%),
        linear-gradient(135deg, var(--ch-navy-deep) 0%, var(--ch-navy) 55%, var(--ch-primary-dark) 100%);
    border: 1px solid var(--ch-navy-line);
    border-radius: var(--ch-radius-lg);
    color: #fff;
    text-align: center;
    overflow: hidden;
    box-shadow: var(--ch-shadow-deep);
}
.ch-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; }
.ch-hero p.lead { color: var(--ch-on-navy); font-size: 1.1rem; max-width: 640px; margin: 0 auto 1.5rem; }
.ch-hero .ch-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; margin-top: 1.4rem; }
.ch-hero .ch-hero-badges span { color: var(--ch-on-navy); font-size: .9rem; font-family: var(--ch-font-mono); }
.ch-hero .ch-hero-badges i { color: var(--ch-green-bright); margin-right: .4rem; }
.ch-section-title { position: relative; text-align: center; margin: 2.5rem 0 1.75rem; font-weight: 700; }
.ch-section-title::after {
    content: "";
    display: block;
    width: 56px; height: 4px;
    margin: .75rem auto 0;
    border-radius: var(--ch-radius-pill);
    background: linear-gradient(90deg, var(--ch-primary), var(--ch-accent));
}
.card-columns.home .card:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow); }
.action-icon-btns a {
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow-card);
    transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}
.action-icon-btns a:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow); }
.action-icon-btns .ico-container i { color: var(--ch-primary); }

/* ================================================================= FOOTER */
footer.footer {
    background: var(--ch-navy-deep);
    color: var(--ch-on-navy-dim);
    margin-top: 3rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid var(--ch-navy-line);
}
footer.footer a, footer.footer .nav-link { color: var(--ch-on-navy); }
footer.footer a:hover, footer.footer .nav-link:hover { color: #fff; }
footer.footer .copyright { color: rgba(255, 255, 255, .45); font-family: var(--ch-font-mono); font-size: .82rem; }
footer.footer .btn { color: var(--ch-on-navy); }

/* ==================================================== STORE / ORDER (tema) */
/* Mesmo princípio do carrinho: conteúdo num card branco —
   nada de texto solto apostando em qual fundo vai cair */
.store-order-container {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    box-shadow: var(--ch-shadow-card);
    padding: 1.6rem 1.8rem;
}
.store-order-container h2 { color: var(--ch-heading); }
.store-order-container .payment-term {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    padding: 1rem 1.25rem;
}
.store-order-container .payment-term h4 { font-size: 1rem; color: var(--ch-text-muted); }
.store-domain-tabs .nav-link { color: var(--ch-text-muted); }
.store-domain-tabs .nav-link.active { color: var(--ch-primary); }
.store-domain-tab-content {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-top: 0;
    border-radius: 0 0 var(--ch-radius) var(--ch-radius);
    padding: 1.25rem;
}
.domain-validation.ok { color: var(--ch-green); font-weight: 600; }
.store-promoted-product {
    background: linear-gradient(135deg, #f8fafc, #eef4ff);
    border-radius: var(--ch-radius-lg);
}
.store-promoted-product .features { list-style: none; padding: 0; }
.store-promoted-product .features li i { color: var(--ch-green); margin-right: .4rem; }

/* ======================================================= MISC / ESTADOS */
.panel, .well { border-radius: var(--ch-radius); }
#fullpage-overlay { background: rgba(2, 18, 40, .55); }
.generate-password-modal .modal-content { border-radius: var(--ch-radius-lg); }
.pw-strength-bar .progress { height: 8px; }

/* Acessibilidade */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible {
    outline: 2px solid var(--ch-primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================= RESPONSIVO */
/* Menu colapsável (<1200px): o collapse estende além do header sobre o corpo
   claro — fundo navy sólido garante links brancos sempre legíveis */
@media (max-width: 1199.98px) {
    .main-navbar-wrapper {
        background: var(--ch-navy-deep);
        border-radius: 0 0 var(--ch-radius) var(--ch-radius);
        box-shadow: var(--ch-shadow-deep);
    }
}
@media (max-width: 575.98px) {
    .ch-welcome h2 { font-size: 1.3rem; }
    .invoice-container { padding: 1.4rem 1.1rem; }
    .tiles .tile .stat { font-size: 1.6rem; }
}