/* ==========================================================================
   InCentre brand overlay for the HostBill "2019" client portal theme
   Matches the incentre.net 2026 redesign (strategy/web-design-system.md):
     Navy #0f2747 chrome  ·  brand-red #e41824 actions  ·  navy/ink type  ·  Poppins headings
   --------------------------------------------------------------------------
   Deployed to:  templates/2019/custom/incentre-brand.css on portal.incentre.net
   Linked from:  templates/2019/header.shared.tpl  (one <link> after app.min.css)
   Persistence:  tools/portal/check_portal_brand.sh (cron) re-applies BOTH the
                 file and the header <link> from this repo if a HostBill theme
                 update wipes them. This file is the source of truth - edit here,
                 then let the checker deploy (or run it with --deploy).
   MARKER (do not remove - the checker greps for it): INCENTRE-2019-BRAND
   --------------------------------------------------------------------------
   Type note: we keep the theme's bundled Rubik (a clean modern sans) rather
   than pulling Poppins off Google Fonts - no external font fetch / privacy hit
   on a billing portal. The brand match is carried by the colour system.
   ========================================================================== */

/* INCENTRE-2019-BRAND v1 */

:root{
  --primary:#e41824;      /* brand red = the universal action colour            */
  --secondary:#1b3a63;    /* navy-2                                             */
}

/* ---- Sidebar -> brand navy (was slate #464851) ------------------------- */
body.template_2019 aside.sidebar{ background:#0f2747 !important; }
aside.sidebar .sidebar-heading{ color:#7e93b3 !important; letter-spacing:.04em; }
aside.sidebar .nav-link{ color:#c8d6e8 !important; }
aside.sidebar .nav-link:hover,
aside.sidebar .nav-link:focus{ color:#fff !important; background:rgba(255,255,255,.06) !important; }
aside.sidebar .nav-link.active,
aside.sidebar li.active>.nav-link{ color:#fff !important; box-shadow:inset 3px 0 0 #e41824; }
aside.sidebar .material-icons{ color:inherit !important; }

/* Top-left logo cell (sits above the sidebar) -> navy, was slate #464851.
   Unifies the brand corner with the navy sidebar; the rest of the top bar
   stays white (matches the site's white main bar). */
.navbar .navbar-left{ background-color:#0f2747 !important; }

/* Active sidebar item (e.g. Dashboard) -> brand red, was theme blue #3891F2.
   Covers top-level items AND sub-nav items (Services > Hosted Email, etc.). */
.sidebar .nav-item > .nav-link.active,
.sidebar .nav-item .nav-subnav .nav-item > .nav-link.active{
  background-color:#e41824 !important; color:#fff !important;
}
.sidebar .nav-item > .nav-link.active .material-icons,
.sidebar .nav-item .nav-subnav .nav-item > .nav-link.active .material-icons{ color:#fff !important; }

/* Expanded sub-menu (e.g. Services) -> nested navy, was gray #3d3e46.
   The theme paints BOTH the container AND each sub-link gray, so override both:
   container = recessed navy, links = transparent (let the navy show), and brand
   the hover/active states (theme used gray hover + blue active). */
/* The expanded dropdown HEADER (e.g. open "Services" toggle) -> nested navy,
   was gray #3d3e46; matches the submenu below so the open group reads as one. */
.sidebar .nav-item > .nav-link.nav-link-dropdown:not(.collapsed){ background-color:#0a1d37 !important; }
.sidebar .nav-item .nav-subnav{ background-color:#0a1d37 !important; }
.sidebar .nav-item .nav-subnav .nav-item > .nav-link{
  background-color:transparent !important; color:#c8d6e8 !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover{
  background-color:rgba(255,255,255,.06) !important; color:#fff !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link.active{
  background-color:#e41824 !important; color:#fff !important;
}

/* ---- Secondary buttons (e.g. "View All") -> navy, was gray #9BA0B3 ----- */
.btn-secondary{ background-color:#1b3a63 !important; border-color:#1b3a63 !important; color:#fff !important; }
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active{
  background-color:#0f2747 !important; border-color:#0f2747 !important; color:#fff !important;
}

/* ---- Mobile (<=993px): the collapsed top bar / menu drawer -> navy ----- */
@media (max-width:993px){
  .navbar .navbar-body{ background:#0f2747 !important; }
}

/* ---- Primary action buttons -> brand red ------------------------------- */
.btn-primary{ background-color:#e41824 !important; border-color:#e41824 !important; color:#fff !important; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active{
  background-color:#c01018 !important; border-color:#c01018 !important;
  box-shadow:0 0 0 .2rem rgba(228,24,36,.35) !important;
}
.btn-outline-primary{ color:#0f2747 !important; border-color:#0f2747 !important; }
.btn-outline-primary:hover{ background:#0f2747 !important; color:#fff !important; border-color:#0f2747 !important; }

/* ---- Top-bar "Order" toggler -> navy (keep ONE red primary per view) --- */
.navbar-order-toggler.btn-success,
.btn-success.navbar-order-toggler{ background-color:#0f2747 !important; border-color:#0f2747 !important; }
.navbar-order-toggler.btn-success:hover{ background-color:#1b3a63 !important; border-color:#1b3a63 !important; }
/* NB: generic .btn-success / .badge-success (paid/active status) is left green on purpose. */

/* ---- Accents that used the old theme blue ------------------------------ */
.text-primary{ color:#0f2747 !important; }
.bg-primary{ background-color:#0f2747 !important; }
.badge-primary{ background-color:#e41824 !important; }
a{ color:#1b3a63; }
a:hover{ color:#e41824; }

/* ---- Form focus -> navy ring ------------------------------------------- */
.form-control:focus{ border-color:#1b3a63 !important; box-shadow:0 0 0 .2rem rgba(27,58,99,.2) !important; }
.custom-control-input:checked~.custom-control-label::before{ background-color:#e41824 !important; border-color:#e41824 !important; }

/* ---- Typography -> ink headings (body-scoped to beat the theme's h* rules) */
body.template_2019 h1, body.template_2019 h2, body.template_2019 h3,
body.template_2019 .h1, body.template_2019 .h2, body.template_2019 .h3{ color:#0b1b30 !important; }

/* ---- Login / signup card: subtle red top accent ----------------------- */
.form-credentials,.form-signin{ border-top:3px solid #e41824; }