/* ==========================================================================
   CloudBP — HostFact client-area polish (v2, scoped to real classes)
   Auto-loaded via custom/assets/css/ (load_custom_assets). Override-only.
   Light-touch: respects the existing LIGHT theme — only softens shapes,
   typography and accents. No white/dark forcing. Rollback = delete this file.
   Targets verified against core/views: home.phtml, menu.phtml, header.phtml.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --brand:      #22BC66;
    --brand-ink:  #1AA058;
    --brand-soft: #E7F7EE;
    --ink:        #15181F;
    --body:       #3A3F4B;
    --muted:      #6B7280;
    --line:       #E3E7EF;
}

/* ---- Typography (whole panel) -------------------------------------------- */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-large {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif !important;
    color: var(--ink) !important;
    letter-spacing: -.02em;
}

/* ---- Nav bar: kill the green slab, keep it clean & light ----------------- */
/* .nav-container has bg-primary (green) and runs full-width → green overhang.
   Neutralize to white with a hairline, dark links, green active/hover. */
.nav-container.bg-primary,
.navbar.navbar-dark {
    background: #fff !important;
    border-bottom: 1.5px solid var(--line);
}
.navbar-dark .nav-link {
    color: var(--ink) !important;
    font-weight: 600;
    border-radius: 9px;
    transition: background .12s, color .12s;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: var(--brand-ink) !important;
    background: var(--brand-soft) !important;
}
.navbar-dark .nav-link.active {
    color: var(--brand-ink) !important;
    background: var(--brand-soft) !important;
}
.navbar-toggler.bg-primary { background: var(--brand) !important; border-radius: 10px; }

/* ---- Panels / cards: .content-block -------------------------------------- */
.content-block {
    background: #fff;
    border: 1.5px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 0 var(--line);
    transition: box-shadow .12s, border-color .12s;
}
.content-block h1 { font-size: 22px; margin-bottom: 6px; }
.content-block h1.font-large { font-size: 22px; }
/* the rule/divider under "Welkom..." heading, if present */
.content-block hr { border-top: 1.5px solid var(--line); }

/* ---- Stat buttons (25 Domeinnamen / 2 Hostingaccounts ...) --------------- */
/* .total-btn > a.btn.btn-secondary.content-block ; number is in .fa-2x */
.total-btn .btn-secondary {
    background: #fff !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 16px !important;
    color: var(--body) !important;
    box-shadow: 0 2px 0 var(--line);
    transition: border-color .12s, box-shadow .12s, transform .04s;
}
.total-btn .btn-secondary:hover {
    border-color: #BBE7CD !important;
    box-shadow: 0 4px 0 var(--brand-soft);
    transform: translateY(-1px);
}
.total-btn .btn-secondary .fa-2x {
    color: var(--brand-ink) !important;        /* the big number → brand green */
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 700;
}
.total-btn .btn-secondary > div {              /* the label under the number */
    color: var(--muted) !important;
    font-weight: 600;
}

/* ---- Links & primary accents --------------------------------------------- */
a { color: var(--brand-ink); }
a:hover, a:focus { color: var(--brand); }
.text-primary { color: var(--brand-ink) !important; }

/* ---- Buttons: only the real PRIMARY action buttons go green -------------- */
/* (leave .btn-secondary alone except the stat cards handled above) */
.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    border-radius: 13px !important;
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
}

/* ---- Inputs (forms across the panel) ------------------------------------- */
.form-control {
    border: 1.5px solid var(--line) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}
.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
}