/*
    Partner portal — the token-mapped override layer on top of Metronic 7.

    WHY THIS FILE IS SHAPED LIKE THIS
    Metronic ships here as a PRE-COMPILED bundle (/theme/styles/style.bundle.css). There is no
    SCSS source in the repo and no build pipeline, so `$primary` cannot be overridden at source
    and recompiled. The compiled bundle also carries literal hex, not var(), so a bare
    `:root { --primary }` does not propagate either. The only mechanism that works is this:
    an explicit per-component override sheet, loaded after the bundle, mapping every Metronic
    component the portal actually uses onto our tokens from css/core/variables.css.

    CONSEQUENCE TO KNOW: a Metronic component NOT covered below renders in stock Metronic blue.
    When you introduce a new component to the portal, add its block here in the same change.
*/

/* ═══════════════════════════════════════════════════════════
   1. BRAND — Metronic primary (#3699FF) remapped onto our tokens
   ═══════════════════════════════════════════════════════════ */

/* Buttons — solid */
.btn.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle {
    background-color: var(--button-hover) !important;
    border-color: var(--button-hover) !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: var(--button-pressed) !important;
    border-color: var(--button-pressed) !important;
}

/* Buttons — tinted */
.btn.btn-light-primary {
    background-color: var(--primary-10) !important;
    color: var(--primary) !important;
    border-color: transparent !important;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn.btn-hover-primary:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* Focus is replaced, never merely removed — one ring recipe for every control. */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.12) !important; /* --primary at 12% */
}

/* Text / background / links */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-hover-primary:hover,
a.text-hover-primary:hover { color: var(--primary) !important; }
a { color: var(--primary); }

/* Labels */
.label.label-primary { background-color: var(--primary) !important; color: var(--white) !important; }
.label.label-light-primary { background-color: var(--primary-10) !important; color: var(--primary) !important; }

/* Semantic label scales — mapped onto our own, not Metronic's teal/violet defaults. */
.label.label-light-info { background-color: var(--info-10) !important; color: var(--info-active) !important; }
.label.label-light-success { background-color: var(--success-10) !important; color: var(--success-active) !important; }
.label.label-light-warning { background-color: var(--warning-10) !important; color: var(--warning-active) !important; }
.label.label-light-danger { background-color: var(--error-10) !important; color: var(--error-active) !important; }

/* Symbols / avatars */
.symbol.symbol-light-primary .symbol-label {
    background-color: var(--primary-10) !important;
    color: var(--primary) !important;
}

.progress-bar.bg-primary { background-color: var(--primary) !important; }
.form-control:focus { border-color: var(--primary) !important; }

.svg-icon.svg-icon-primary svg [fill]:not([fill="none"]),
.svg-icon.svg-icon-primary svg { color: var(--primary) !important; }

/* ═══════════════════════════════════════════════════════════
   2. FOUNDATION — page canvas, cards, spacing rhythm
   ═══════════════════════════════════════════════════════════ */

.content {
    padding: 24px 32px;
    background-color: var(--light-bg);
}

/* One max width for the whole product, so pages don't sprawl on a 1920 monitor. */
.content > .d-flex > .container-fluid,
.content > .subheader > .container-fluid {
    max-width: 1400px;
    margin-inline: auto;
}

/* Borders carry the card, not shadow. Shadow is reserved for hover. */
.card.card-custom {
    border: 1px solid var(--dark-border);
    box-shadow: none;
}

.card.card-custom > .card-header {
    border-bottom: 1px solid var(--dark-border);
    min-height: 60px;
    padding: 0 24px;
}

.card.card-custom > .card-body { padding: 24px; }

.card.card-custom > .card-header .card-title .card-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--heading);
    margin: 0;
}

.separator.separator-dashed { border-bottom: 1px dashed var(--dark-border); }

/*
    bootstrap-select menus are appended to <body> whenever a picker sets
    data-container="body" (which every portal picker does, so the menu can escape card
    overflow). That puts them outside any page-scoped stylesheet, so their mapping has to
    live here, unscoped — a page-level .some-page .dropdown-menu rule can never match them.
*/
.bootstrap-select .dropdown-menu {
    border: 1px solid var(--dark-border);
    border-radius: 8px;
}

.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    background-color: var(--primary-10);
    color: var(--primary);
}

.bootstrap-select .bs-searchbox .form-control {
    height: 38px;
    font-size: 14px;
    border-radius: 6px;
    background-color: var(--white);
    border: 1px solid var(--dark-border);
}

.bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.12); /* --primary at 12% */
}

/* ═══════════════════════════════════════════════════════════
   3. WELCOME STRIP — replaces the purple hero slab
   ═══════════════════════════════════════════════════════════ */

.wp-welcome { margin-bottom: 24px; }

.wp-welcome__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--heading);
    margin: 0;
}

.wp-welcome__sub {
    font-size: 13px;
    color: var(--text-3);
    margin: 4px 0 0;
}

/* The page's #1 action. 44px so it reads as the primary control, not a toolbar button. */
.wp-welcome__cta {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════════
   4. STAT CARDS — designed for empty, holds for data
   ═══════════════════════════════════════════════════════════ */

.wp-stat { display: block; height: 100%; }

/* Only the clickable variant gets affordance. The tier card has nowhere to go, so it
   deliberately carries neither pointer nor hover. */
a.wp-stat { text-decoration: none; }

a.wp-stat .card.card-custom {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

a.wp-stat:hover .card.card-custom {
    border-color: var(--primary-20);
    box-shadow: 0 4px 16px -4px rgba(98, 0, 238, 0.10); /* --primary at 10% */
}

.wp-stat__value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading);
}

/*
    THE EMPTY-STATE RULE: a zero renders grey, not black. A bold black 0 reads as broken;
    a grey 0 reads as "nothing yet". The moment a value is non-zero the modifier comes off
    and it goes full --heading. This one rule is what makes the empty dashboard look
    intentional rather than unfinished.
*/
.wp-stat__value--empty { color: var(--text-4); }

.wp-stat__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 4px;
}

.wp-stat__foot {
    font-size: 12px;
    color: var(--text-4);
    margin-top: 8px;
}

.wp-stat__foot--up { color: var(--success-100); }
.wp-stat__foot--down { color: var(--error-100); }

/* ═══════════════════════════════════════════════════════════
   5. EMPTY STATE — a real state, not a bare table row
   ═══════════════════════════════════════════════════════════ */

.wp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 240px;
    padding: 24px;
}

.wp-empty__symbol {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-10);
    color: var(--text-4);
    margin-bottom: 16px;
}

.wp-empty__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-2);
    margin: 0;
}

.wp-empty__text {
    font-size: 13px;
    color: var(--text-3);
    margin: 4px 0 16px;
}

/* ═══════════════════════════════════════════════════════════
   6. GET STARTED — the activation checklist
   ═══════════════════════════════════════════════════════════ */

.wp-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--light-border);
}

.wp-check:last-child { border-bottom: none; }

.wp-check__icon { flex-shrink: 0; display: inline-flex; }
.wp-check__icon--done { color: var(--success-100); }
.wp-check__icon--todo { color: var(--text-5); }

.wp-check__label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
}

/* Done reads as settled, not actionable — struck through would be heavy, so it just recedes. */
.wp-check--done .wp-check__label {
    color: var(--text-3);
    font-weight: 500;
}

.wp-progress-note {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════
   7. TABLES — populated leads state
   ═══════════════════════════════════════════════════════════ */

.table.table-head-custom thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-4);
    border-bottom: 1px solid var(--dark-border);
    padding-top: 0;
}

.table.table-row-dashed tbody tr { border-bottom: 1px dashed var(--dark-border); }
.table.table-row-dashed tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background-color: var(--light-bg); }

.wp-lead__name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.wp-lead__sub { font-size: 12px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   8. ASIDE — dark, with a floating active pill
   ═══════════════════════════════════════════════════════════ */

/*
    Aside surface colours.

    These two are NOT in css/core/variables.css — the sidebar uses a deeper purple-navy than
    --heading (#071437), and the brand row sits a shade darker than the menu below it so the
    logo block reads as its own plane. Declared once here rather than repeated as raw hex at
    each use site. If they become official palette values they belong in variables.css instead;
    see the note in the handover.
*/
.aside {
    --wp-aside-brand-bg: #0B0030;
    --wp-aside-menu-bg: #0D0038;

    background-color: var(--wp-aside-menu-bg);
    width: 265px;
}

/*
    #kt_brand, not .brand: app.css carries `#kt_brand { background: #ffffff }`, and an ID
    selector outranks any class rule no matter which file loads later. Matching the ID and
    adding the .aside class is what wins here — `!important` would only paper over it.
*/
.aside #kt_brand {
    background-color: var(--wp-aside-brand-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* --white at 6% */
    padding: 0 16px;
}

.aside .aside-menu-wrapper,
.aside .aside-menu { background-color: var(--wp-aside-menu-bg); }

.aside .brand .brand-logo { display: flex; align-items: center; }

/* Intrinsic 186x32 stays on the element so the box is reserved correctly; CSS scales it. */
.aside .brand .brand-logo img { height: 26px; width: auto; }

.aside .brand-toggle {
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-4);
    transition: background-color 150ms ease, color 150ms ease;
}

.aside .brand-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06); /* --white at 6% */
    color: var(--white);
}

.aside .aside-menu { background-color: transparent; padding: 8px 0; }

/*
    Rest text is --text-5 at full opacity, NOT a dimmed --text-4. On #071437 that clears 4.5:1;
    the previous near-invisible icons were an opacity problem, not a colour one.
*/
.aside .menu-nav .menu-item > .menu-link {
    margin: 2px 8px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background-color 150ms ease, color 150ms ease;
}

.aside .menu-nav .menu-item > .menu-link .menu-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-5);
}

/*
    The icon slot must be SQUARE. Metronic sets `flex: 0 0 35px` on .menu-icon, so a plain
    `width: 20px` is ignored in the flex row — the span stayed 35 wide against a 20 tall icon.
    The flex basis is what has to change; width/height alone cannot win here.
*/
.aside .menu-nav .menu-item > .menu-link .menu-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-5);
    margin-right: 12px;
}

/* Metronic also hard-sizes the glyph to 23px and nudges it -2px; both are undone here. */
.aside .menu-nav .menu-item > .menu-link .menu-icon svg {
    color: var(--text-5);
    width: 20px;
    height: 20px;
    margin-left: 0;
}

.aside .menu-nav .menu-item > .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.04) !important; /* --white at 4% */
}

.aside .menu-nav .menu-item > .menu-link:hover .menu-text,
.aside .menu-nav .menu-item > .menu-link:hover .menu-icon,
.aside .menu-nav .menu-item > .menu-link:hover .menu-icon svg {
    color: var(--white);
}

/* Active is a filled pill inset from the rail — purple-text-on-black was far too quiet. */
.aside .menu-nav .menu-item.menu-item-active > .menu-link {
    background-color: var(--primary) !important;
}

.aside .menu-nav .menu-item.menu-item-active > .menu-link .menu-text,
.aside .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon,
.aside .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon svg {
    color: var(--white) !important;
}

.aside .menu-nav .menu-section {
    margin: 24px 0 4px;
    padding: 0 20px;
}

.aside .menu-nav .menu-section .menu-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
}

/* Collapsed rail: icons only, labels hidden, pill shrinks to the icon. */
.aside-minimize .aside { width: 70px; }
.aside-minimize .aside .menu-nav .menu-item > .menu-link { justify-content: center; padding: 10px; }
.aside-minimize .aside .menu-nav .menu-item > .menu-link .menu-icon { margin-right: 0; }
.aside-minimize .aside .menu-nav .menu-section { display: none; }

/* ═══════════════════════════════════════════════════════════
   9. HEADER / TOPBAR
   ═══════════════════════════════════════════════════════════ */

.header.header-fixed {
    background-color: var(--white);
    height: 65px;
    border-bottom: 1px solid var(--dark-border);
    box-shadow: 0 4px 20px rgba(7, 20, 55, 0.04); /* --heading at 4% */
}

.wp-topbar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--heading);
    margin: 0;
}

.wp-topbar__btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--text-3);
    transition: background-color 150ms ease, color 150ms ease;
}

.wp-topbar__btn:hover {
    background-color: var(--dark-bg);
    color: var(--text-1);
}

/* Unread marker. Paired with an aria-label on the button, never colour alone. */
.wp-topbar__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--error-100);
    border: 2px solid var(--white);
}

/* ═══════════════════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════════════════ */

.footer {
    background-color: var(--white);
    border-top: 1px solid var(--dark-border);
}

.footer,
.footer a { font-size: 13px; color: var(--text-4); }
.footer a:hover { color: var(--primary); }

/*
    Scroll-to-top. The portal has no chat/support FAB — this is the only floating control, and
    it was rendering clipped against the viewport edge. Given proper inset, size, and shadow it
    reads as a deliberate control instead of an artifact.
*/
.scrolltop {
    right: 24px;
    bottom: 24px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 24px -6px rgba(98, 0, 238, 0.40); /* --primary at 40% */
}

.scrolltop:hover { background-color: var(--button-hover); }
.scrolltop .svg-icon svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════
   11. UTILITIES the compiled v7 bundle omits
   ═══════════════════════════════════════════════════════════ */

.text-white-75 { color: rgba(255, 255, 255, 0.75) !important; } /* --white at 75% */
.fw-bold { font-weight: 600 !important; }
.required-asterisk { margin-left: 2px; }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* ═══════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .content { padding: 16px; }
}

@media (max-width: 575.98px) {
    .wp-welcome__cta { width: 100%; justify-content: center; }
    .card.card-custom > .card-body { padding: 20px; }
}