/* ================================================================
   lp-brand.css — LeadPointe brand tokens + Bootstrap 5.3 overrides
   ================================================================
   Loads right after Bootstrap and before app.css, so every app
   stylesheet can use the tokens. Keep this file to tokens and
   Bootstrap overrides; layout and component styles live in app.css.

   Do NOT set --bs-body-bg: cards, dropdowns, modals, list groups and
   inputs take their background from it. The page color is set on
   body directly.
   ================================================================ */

:root {
    --lp-navy:        #31446A;   /* header, panel headers, primary buttons, page titles */
    --lp-navy-dark:   #1B2D45;   /* body text and headings, pressed state */
    --lp-navy-mid:    #435071;   /* secondary fills, neutral stat tile */
    --lp-navy-light:  #526189;   /* navy button hover, initials avatar fill */
    --lp-red:         #B01D18;   /* one primary action per screen, active nav, alerts */
    --lp-red-dark:    #961815;
    --lp-gold:        #F0B429;   /* focus ring, star ratings — never a fill */
    --lp-green:       #2E9E5B;
    --lp-ground:      #ECEDF0;   /* page background */
    --lp-border:      #E2E6EC;   /* card and input borders */
    --lp-divider:     #EEF0F3;   /* row dividers inside cards */
    --lp-subtle:      #F7F9FC;   /* card hover, subtle backgrounds */
    --lp-text-muted:  #5B6880;   /* secondary text */
    --lp-icon-muted:  #7A8A9E;   /* icons and decoration only, never text */
    --lp-appbar-text:    #CDD3DE;   /* inactive header nav */
    --lp-header-h:    64px;      /* app header height — full-height screens subtract it */

    --lp-font-ui:      'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lp-font-display: 'Oswald', 'Arial Narrow', sans-serif;

    /* Bootstrap globals */
    --bs-primary:            #31446A;
    --bs-primary-rgb:        49, 68, 106;
    --bs-secondary:          #435071;
    --bs-secondary-rgb:      67, 80, 113;
    --bs-danger:             #B01D18;   /* unchanged from the old theme */
    --bs-danger-rgb:         176, 29, 24;
    --bs-success:            #538647;
    --bs-success-rgb:        83, 134, 71;
    --bs-warning:            #EEB424;
    --bs-warning-rgb:        238, 180, 36;
    --bs-info:               #407887;
    --bs-info-rgb:           64, 120, 135;
    --bs-light:              #F3F3F3;
    --bs-light-rgb:          243, 243, 243;
    --bs-dark:               #333333;
    --bs-dark-rgb:           51, 51, 51;

    --bs-body-font-family:   var(--lp-font-ui);
    --bs-body-font-size:     14px;
    --bs-body-color:         #1B2D45;
    --bs-body-color-rgb:     27, 45, 69;
    --bs-secondary-color:    #5B6880;          /* .text-muted, .form-text */
    --bs-secondary-color-rgb: 91, 104, 128;
    --bs-emphasis-color:     #1B2D45;
    --bs-heading-color:      #1B2D45;
    --bs-border-color:       #E2E6EC;
    --bs-border-color-translucent: #E2E6EC;    /* cards, dropdowns, modals */
    --bs-border-radius:      .5rem;
    --bs-link-color:         #31446A;
    --bs-link-color-rgb:     49, 68, 106;
    --bs-link-hover-color:   #B01D18;
    --bs-link-hover-color-rgb: 176, 29, 24;
}

@media (max-width: 1199.98px) {
    :root { --lp-header-h: 112px; }   /* nav drops to its own 48px row */
}

body { background-color: var(--lp-ground); }

/* ── Buttons ── */
.btn-primary {
    --bs-btn-color: #fff;  --bs-btn-bg: #31446A;  --bs-btn-border-color: #31446A;
    --bs-btn-hover-color: #fff;  --bs-btn-hover-bg: #526189;  --bs-btn-hover-border-color: #526189;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1B2D45; --bs-btn-active-border-color: #1B2D45;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #31446A; --bs-btn-disabled-border-color: #31446A;
    --bs-btn-focus-shadow-rgb: 49, 68, 106;
}
.btn-outline-primary {
    --bs-btn-color: #31446A;  --bs-btn-border-color: #31446A;
    --bs-btn-hover-color: #fff;  --bs-btn-hover-bg: #31446A;  --bs-btn-hover-border-color: #31446A;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1B2D45; --bs-btn-active-border-color: #1B2D45;
    --bs-btn-disabled-color: #31446A; --bs-btn-disabled-border-color: #31446A;
    --bs-btn-focus-shadow-rgb: 49, 68, 106;
}
.btn-secondary {
    --bs-btn-color: #fff;  --bs-btn-bg: #435071;  --bs-btn-border-color: #435071;
    --bs-btn-hover-color: #fff;  --bs-btn-hover-bg: #31446A;  --bs-btn-hover-border-color: #31446A;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1B2D45; --bs-btn-active-border-color: #1B2D45;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #435071; --bs-btn-disabled-border-color: #435071;
    --bs-btn-focus-shadow-rgb: 67, 80, 113;
}
.btn-danger {
    --bs-btn-color: #fff;  --bs-btn-bg: #B01D18;  --bs-btn-border-color: #B01D18;
    --bs-btn-hover-color: #fff;  --bs-btn-hover-bg: #961815;  --bs-btn-hover-border-color: #961815;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #7E1411; --bs-btn-active-border-color: #7E1411;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B01D18; --bs-btn-disabled-border-color: #B01D18;
    --bs-btn-focus-shadow-rgb: 176, 29, 24;
}
.btn-outline-danger {
    --bs-btn-color: #B01D18;  --bs-btn-border-color: #B01D18;
    --bs-btn-hover-color: #fff;  --bs-btn-hover-bg: #B01D18;  --bs-btn-hover-border-color: #B01D18;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #961815; --bs-btn-active-border-color: #961815;
    --bs-btn-disabled-color: #B01D18; --bs-btn-disabled-border-color: #B01D18;
    --bs-btn-focus-shadow-rgb: 176, 29, 24;
}
/* The one primary action per screen (Add contact, New page, Activate, Call).
   .btn-action is the older name for the same button. */
.btn-lp-red,
.btn-action {
    --bs-btn-color: #fff;  --bs-btn-bg: #B01D18;  --bs-btn-border-color: #B01D18;
    --bs-btn-hover-color: #fff;  --bs-btn-hover-bg: #961815;  --bs-btn-hover-border-color: #961815;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #7E1411; --bs-btn-active-border-color: #7E1411;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B01D18; --bs-btn-disabled-border-color: #B01D18;
    --bs-btn-focus-shadow-rgb: 176, 29, 24;
    font-weight: 600;
}

/* ── Components that set their own color variables ── */
.pagination {
    --bs-pagination-color: #31446A;
    --bs-pagination-hover-color: #1B2D45;
    --bs-pagination-focus-color: #1B2D45;
    --bs-pagination-active-bg: #31446A;
    --bs-pagination-active-border-color: #31446A;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(49, 68, 106, .2);
}
.nav-pills   { --bs-nav-pills-link-active-bg: #31446A; }
.dropdown-menu { --bs-dropdown-link-active-bg: #31446A; }
.list-group  { --bs-list-group-active-bg: #31446A; --bs-list-group-active-border-color: #31446A; }
.progress, .progress-stacked { --bs-progress-bar-bg: #31446A; }

/* ── Form focus: navy glow instead of Bootstrap blue ── */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #8C9AB8;
    box-shadow: 0 0 0 .25rem rgba(49, 68, 106, .2);
}
.form-check-input:checked { background-color: #31446A; border-color: #31446A; }

/* ── Keyboard focus: gold ring on links and buttons ── */
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--lp-gold);
    outline-offset: 2px;
    box-shadow: none;
}