/* =========================================================================
   DMARCER custom overrides — kept separate from the ported template assets
   so the template (assets/css/*) stays pristine and upgradeable.
   ========================================================================= */

/* Stripe Test-mode chip styling lives inline on _StripeModeBanner.cshtml (#110 moved the
   full-width banner into the header chip slot alongside the No-card chip). The legacy
   .stripe-test-banner rule has been removed - no chrome in either mode by default. */


/* Stacking fix: the template gives .top-header .navbar z-index:10 but the
   navigation .nav-container z-index:100, so the Account dropdown (a child of
   the header) was painting BEHIND the nav bar. Raise the header (and its
   dropdowns) above the navigation. Still below Bootstrap modals (1050+). */
.top-header .navbar        { z-index: 1031; }
.nav-container             { z-index: 1030; }
.top-header .dropdown-menu { z-index: 1040; }

/* Content offset: on desktop BOTH fixed bars are shown — header (60px) + nav (60px) = 120px.
   The template default (.page-content margin-top:50px) tucks content under them. Below xl the
   nav collapses to a drawer, so the template's own smaller offset is left as-is. */
@media (min-width: 1200px) {
    .page-content { margin-top: 120px; }
}

/* =========================================================================
   DMARCER BRANDING
   ------------------------------------------------------------------------
   Applies the dmarcer brand palette on top of the ported template.
     - Dark navy : #18222D  (header bar + login panel)
     - Green     : #A3C82D  (accent — sampled from the lime "d"/dots in the
                             source logo; primary buttons + menu accent)
   All rules are additive here; the template's assets/css/* stay untouched.
   ========================================================================= */

/* --- Top header bar: dark navy with light text/icons -------------------- */
.top-header .navbar,
.top-header .topbar-logo-header {
    /* !important: the template sets the header background via a higher-specificity theme rule,
       which otherwise wins over this override and leaves the bar light (fading the white logo). */
    background-color: #18222D !important;
    border-color: #0f1820 !important;
}

/* Wordmark + app-switcher links + user name */
.top-header .navbar .logo-text,
.top-header .navbar .top-navbar .nav-link,
.top-header .navbar .user-name {
    color: #e9edf2;
}
.top-header .navbar .top-navbar .nav-link:hover,
.top-header .navbar .top-navbar .nav-link:focus {
    color: #ffffff;
}

/* Toggle / search trigger icons in the bar */
.top-header .navbar .mobile-toggle-icon,
.top-header .navbar .search-toggle-icon,
.top-header .navbar .nav-link > i,
.top-header .navbar .user-setting {
    color: rgba(255, 255, 255, .85);
}

/* Search field sitting in the dark bar: translucent so it reads on navy,
   with light text + placeholder. (Dropdown panels stay light — see below.) */
.top-header .navbar .searchbar .form-control {
    background-color: rgba(255, 255, 255, .10);
    color: #e9edf2;
}
.top-header .navbar .searchbar .form-control::placeholder {
    color: rgba(255, 255, 255, .65);
}
.top-header .navbar .searchbar .search-icon,
.top-header .navbar .searchbar .search-close-icon {
    color: rgba(255, 255, 255, .75);
}

/* Keep the dropdown MENU panels light (white backgrounds, dark text) — only
   the bar itself is dark. Re-assert the template's light treatment so the
   bar rules above can't bleed into the open menus. */
.top-header .navbar .dropdown-menu,
.top-header .navbar .dropdown-menu .dropdown-item {
    color: #5e636b;
}

/* --- Login page left panel: brand navy behind the transparent logo ------ */
.bg-login {
    background-color: #18222D !important;
}

/* --- Green accent ------------------------------------------------------- */
.btn-primary {
    background-color: #A3C82D;
    border-color: #A3C82D;
    color: #18222D;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #93b526;
    border-color: #93b526;
    color: #18222D;
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(163, 200, 45, .4);
}

/* Navigation (metisMenu) active/hover accent -> brand green */
.topbar-nav .metismenu a:hover,
.topbar-nav .metismenu a:focus,
.topbar-nav .metismenu a:active,
.topbar-nav .metismenu li.mm-active > a {
    background: #A3C82D;
    color: #18222D;
}

/* --- Mobile nav header bar: dark navy so the white logo-icon + wordmark read.
   The white logo variants (logo.png / assets/images/logo-icon.png) are now
   light-on-transparent, so this bar must be dark like the desktop top header. */
.mobile-topbar-header {
    background-color: #18222D;
}
.mobile-topbar-header .logo-text {
    color: #e9edf2;
}
.mobile-topbar-header .toggle-icon,
.mobile-topbar-header .mobile-toggle-icon,
.mobile-topbar-header .mobile-toggle-menu,
.mobile-topbar-header .mobile-toggle-menu .toggle-icon {
    color: #e9edf2;
}

/* --- Global footer (company details to be added later) ------------------ */
.app-footer {
    position: fixed;            /* pinned to the bottom on every page, regardless of content height */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;              /* above page content, below modals (1055) / toasts (1090) */
    background-color: #ffffff;
    border-top: 1px solid #e2e3e4;
    padding: 12px 1.5rem;
    font-size: 12px;
    color: #5e636b;
}

/* Reserve space so page content never hides behind the fixed footer (gives a gap above it). */
.page-content { padding-bottom: 64px; }

/* --- Customer detail (tabbed, full-height): the tab area is pinned between nav and footer
   like Domain Management / DMARC Scores; the ACTIVE pane fills it and scrolls internally.
   Only one pane is visible at a time, so there's no band-stacking/overlap. ---------------- */
.cust-page {
    position: fixed;
    top: 128px; left: 1.5rem; right: 1.5rem; bottom: 64px;   /* ~20px gap above the fixed footer */
    display: flex; flex-direction: column; overflow: hidden;
}
.cust-page > .tab-content { flex: 1 1 auto; min-height: 0; }
/* The active pane fills the region and does NOT scroll itself (desktop) — each card scrolls
   internally instead, so the three Overview cards scroll independently. */
.cust-page > .tab-content > .tab-pane.active { height: 100%; overflow: hidden; }
.cust-page > .tab-content > .tab-pane.active > .card { height: 100%; }   /* single-card panes fill */
.cust-page .card-body.scroll-body { overflow-y: auto; min-height: 0; flex: 1 1 0; }
@media (min-width: 992px) {
    /* Overview: 3 cards fill + equalise to the region height (they scroll internally) */
    .cust-page > .tab-content > .tab-pane.active > .row { height: 100%; }
    /* Single-card columns (e.g. Domains tab pane: one big table) fill the region. Multi-card
       columns (Overview right rail: Pending billing + Contact + Xero stacked) DON'T - if we
       applied height:100% per card the second and third would each try to fill the region too
       and get clipped by the parent's overflow:hidden. */
    .cust-page > .tab-content > .tab-pane.active > .row > [class*="col-"] > .card:only-child { height: 100%; }
    /* Multi-card columns scroll internally so the user can see every card in the stack. */
    .cust-page > .tab-content > .tab-pane.active > .row > [class*="col-"]:has(> .card + .card) {
        overflow-y: auto;
        min-height: 0;
    }
}
/* Below lg the cards stack — let the pane scroll the stack instead. */
@media (max-width: 991.98px) {
    .cust-page > .tab-content > .tab-pane.active { overflow-y: auto; }
}
#trendChart, #scTrendChart { width: 100%; }
.scroll-body { overflow-y: auto; }

/* --- Readable tooltips (column-header explainers etc.) ------------------ */
.tooltip-inner {
    max-width: 340px;
    text-align: left;
    font-size: .8rem;
    padding: 8px 10px;
    line-height: 1.35;
}

/* --- Compact filter rows: label on the left, control on the right -------
   A fixed first column means every control starts at the same x, so the
   dropdowns line up in a single column (not "higgledy-piggledy"). */
.filter-row {
    display: grid;
    grid-template-columns: 72px 1fr;   /* label gutter | control */
    align-items: center;
    column-gap: .4rem;
    margin-bottom: .4rem;
}
.filter-row > label {
    margin: 0;
    font-size: .75rem;
    line-height: 1.1;
    color: #5e636b;
    white-space: nowrap;               /* never wrap labels onto a second line */
}

/* --- Scrollable table body with a STATIC (sticky) header ---------------- */
.table-scroll { overflow-y: auto; overflow-x: hidden; }   /* fixed table-layout fits the width: no horizontal bar */
.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #eef1f4;   /* solid, so scrolling rows don't show through the header */
    white-space: nowrap;          /* keep headers (e.g. "DMARC") on a single line */
}

/* --- Active nav section: light green highlight (distinct from the full-green hover) --- */
.topbar-nav .metismenu li.section-active > a {
    background: rgba(163, 200, 45, 0.18);
    color: #18222D;
    font-weight: 600;
    border-radius: 6px;
}

/* --- Top-nav item sizing: the vendored style.css sets `flex: 1 1 0%` on every <li>
       so all items get an equal share of the row regardless of content width. That
       cramps long labels (Domain Management, Blacklist Monitoring) and forces them
       to wrap to a second line on anything narrower than ~1500px.
       Fix: size each item to its content (flex: 0 0 auto) and stop labels wrapping.
       Only applies in horizontal mode (≥1281px) where the original equal-flex rule
       kicks in - below that the menu stacks vertically and the rule is moot. */
@media (min-width: 1281px) {
    .topbar-nav .metismenu > li {
        flex: 0 0 auto;
    }
    .topbar-nav .metismenu a .menu-title {
        white-space: nowrap;
    }
}

/* --- User menu button (top-right): brand-green pill with white text --- */
.top-header .user-setting {
    background-color: #A3C82D;
    border-radius: 30px;
    padding: 5px 16px 5px 8px;
}
.top-header .user-setting .user-name {
    color: #ffffff !important;
    padding-left: 0 !important;
}