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

    PAINEL SOFT — Custom Stylesheet
    Child Theme baseado em "Twenty-One" (WHMCS 9)
    Agência SOFT · cor principal #0171bb

    Este arquivo é carregado automaticamente por cima do
    theme.min.css do tema pai. Tudo o que está aqui
    sobrescreve o visual padrão do WHMCS sem tocar nos
    arquivos originais do tema.

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

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

/* ---------------------------------------------------
   1. TOKENS DE MARCA
--------------------------------------------------- */
:root {
    /* Azul Agência SOFT */
    --soft-blue-900: #012c47;
    --soft-blue-800: #013a5e;
    --soft-blue-700: #015690;
    --soft-blue-600: #0171bb; /* cor principal */
    --soft-blue-500: #2f8fd0;
    --soft-blue-400: #4a9bd6;
    --soft-blue-200: #bcdcf2;
    --soft-blue-100: #e8f3fb;
    --soft-blue-50:  #f4faff;

    --soft-ink:   #0c1b24;
    --soft-slate: #4d6072;

    /* Sobrescreve o token --primary usado pelo bloco
       de variáveis do tema pai (Nexus Cart / novos componentes) */
    --primary-50:  var(--soft-blue-50);
    --primary-100: var(--soft-blue-100);
    --primary-200: var(--soft-blue-200);
    --primary-300: var(--soft-blue-400);
    --primary-400: var(--soft-blue-500);
    --primary-500: var(--soft-blue-600);
    --primary-600: var(--soft-blue-600);
    --primary-700: var(--soft-blue-700);
    --primary-800: var(--soft-blue-800);
    --primary-900: var(--soft-blue-900);
    --primary-950: var(--soft-blue-900);

    --primary: var(--soft-blue-600);
    --primary-lifted: var(--soft-blue-700);
    --primary-accented: var(--soft-blue-800);

    --rounding-sm: 6px;
    --rounding-md: 10px;
    --rounding-lg: 14px;
}

/* ---------------------------------------------------
   2. TIPOGRAFIA
--------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--soft-ink);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-title,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--soft-blue-900);
}

/* rótulos / dados tabulares ganham a mono, lembrando o
   painel apresentado no site institucional */
.badge,
.copyright,
code,
.status-label,
table.request-list td:first-child {
    font-family: 'IBM Plex Mono', SFMono-Regular, monospace;
}

/* ---------------------------------------------------
   3. LINKS
--------------------------------------------------- */
a {
    color: var(--soft-blue-600);
}
a:hover,
a:focus {
    color: var(--soft-blue-700);
}
.text-primary {
    color: var(--soft-blue-600) !important;
}
a.text-primary:hover,
a.text-primary:focus {
    color: var(--soft-blue-700) !important;
}

/* ---------------------------------------------------
   4. BOTÕES
--------------------------------------------------- */
.btn {
    border-radius: var(--rounding-sm);
    font-weight: 600;
}

.btn-primary {
    color: #fff;
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--soft-blue-700);
    border-color: var(--soft-blue-700);
}
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--soft-blue-700);
    border-color: var(--soft-blue-700);
    box-shadow: 0 0 0 0.2rem rgba(1, 113, 187, 0.4);
}
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--soft-blue-800);
    border-color: var(--soft-blue-800);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(1, 113, 187, 0.4);
}

.btn-outline-primary {
    color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--soft-blue-600);
    background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}

.btn-link {
    color: var(--soft-blue-600);
}

/* ---------------------------------------------------
   5. FORMULÁRIOS
--------------------------------------------------- */
.form-control:focus {
    border-color: var(--soft-blue-500);
    box-shadow: 0 0 0 0.2rem rgba(1, 113, 187, 0.25);
}
.input-group > .form-control:focus {
    z-index: 3;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--soft-blue-600);
    background-color: var(--soft-blue-600);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--soft-blue-600);
    background-color: var(--soft-blue-600);
}
.custom-range::-webkit-slider-thumb { background-color: var(--soft-blue-600); }
.custom-range::-moz-range-thumb     { background-color: var(--soft-blue-600); }
.custom-range::-ms-thumb            { background-color: var(--soft-blue-600); }

/* ---------------------------------------------------
   6. NAVEGAÇÃO / ABAS / PAGINAÇÃO
--------------------------------------------------- */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--soft-blue-600);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--soft-blue-600);
}
.page-link {
    color: var(--soft-blue-600);
}
.page-item.active .page-link {
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--soft-blue-600);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--soft-blue-700);
}

/* ---------------------------------------------------
   7. DISTINTIVOS / STATUS / BARRAS DE PROGRESSO
--------------------------------------------------- */
.badge-primary {
    background-color: var(--soft-blue-600);
}
a.badge-primary:hover,
a.badge-primary:focus {
    background-color: var(--soft-blue-800);
}
.progress-bar {
    background-color: var(--soft-blue-600);
}
.list-group-item.active {
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
}
.bg-primary {
    background-color: var(--soft-blue-600) !important;
}
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--soft-blue-800) !important;
}
.border-primary {
    border-color: var(--soft-blue-600) !important;
}

/* status de faturas/serviços que herdam a cor "primary" do tema */
.status-onhold,
.status-payment-pending,
.status-delivered {
    background-color: var(--soft-blue-600);
}

/* ---------------------------------------------------
   8. CABEÇALHO / TOPO
--------------------------------------------------- */
.header .navbar-brand img.logo-img {
    max-height: 42px;
}
.header .navbar-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--soft-blue-900);
}
.header .navbar {
    border-bottom: 1px solid #e6edf3;
}
.header .cart-btn .badge {
    background-color: var(--soft-blue-600);
}
.topbar {
    background-color: var(--soft-blue-50);
    border-bottom: 1px solid var(--soft-blue-100);
}
.topbar .btn-active-client {
    color: var(--soft-blue-700);
    font-weight: 600;
}

/* ---------------------------------------------------
   9. CARDS / PAINÉIS
--------------------------------------------------- */
.card {
    border-radius: var(--rounding-md);
    border-color: #e3ecf3;
    box-shadow: 0 1px 2px rgba(1, 44, 71, 0.04), 0 8px 20px -14px rgba(1, 44, 71, 0.18);
}
.card-header {
    background-color: var(--soft-blue-50);
    border-bottom-color: #e3ecf3;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

/* ---------------------------------------------------
   10. BARRA LATERAL (SIDEBAR)
--------------------------------------------------- */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background-color: var(--soft-blue-600);
    border-color: var(--soft-blue-600);
    color: #fff;
}
.sidebar .list-group-item > i.far.fa-circle {
    color: var(--soft-blue-600);
}

/* ---------------------------------------------------
   11. RODAPÉ
--------------------------------------------------- */
footer.footer {
    background-color: var(--soft-blue-900);
    color: rgba(255, 255, 255, 0.78);
}
footer.footer .nav-link {
    color: rgba(255, 255, 255, 0.82);
}
footer.footer .nav-link:hover {
    color: #fff;
}
footer.footer .btn {
    background-color: rgba(255, 255, 255, 0.1);
}
footer.footer .copyright,
footer.footer .notices {
    color: rgba(255, 255, 255, 0.55);
}
footer.footer a {
    color: rgba(255, 255, 255, 0.82);
}
footer.footer a:hover {
    color: #fff;
}

/* links extras adicionados no footer.tpl (Agência SOFT / SOFT Node) */
footer.footer .footer-soft-links {
    margin: 0 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}
footer.footer .footer-soft-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
footer.footer .footer-soft-links a:hover {
    color: #fff;
}