/* ==========================================================
   LeadSuite Design Tokens
   Loaded after bootstrap.min.css, before site.css
   ========================================================== */

:root {
    --ls-bg:          #F2F4F7;
    --ls-surface:     #FFFFFF;
    --ls-surface-2:   #F7F8FA;
    --ls-line:        #DDE2EA;
    --ls-line-strong: #C3CAD6;
    --ls-text:        #1B2230;
    --ls-text-2:      #5B6676;
    --ls-text-3:      #8A94A4;
    --ls-nav:         #13203A;
    --ls-accent:      #E8780A;
    --ls-accent-ink:  #FFFFFF;
    --ls-accent-soft: #FFF1E3;
    --ls-accent-text: #B85C00;
    --ls-good:        #1E8A4C;
    --ls-good-soft:   #E4F4EA;
    --ls-warn:        #B86E00;
    --ls-warn-soft:   #FFF4DF;
    --ls-bad:         #C4352B;
    --ls-bad-soft:    #FBE7E5;
    --ls-info-soft:   #E5F0FB;
    --ls-info-text:   #1F5FA8;

    --ls-radius:      10px;
    --ls-shadow:      0 1px 2px rgba(20,30,50,.06), 0 4px 12px rgba(20,30,50,.05);

    /* Map to Bootstrap variables */
    --bs-body-bg:         var(--ls-bg);
    --bs-body-color:      var(--ls-text);
    --bs-border-color:    var(--ls-line);
    --bs-primary:         var(--ls-accent);
    --bs-primary-rgb:     232, 120, 10;
    --bs-secondary-color: var(--ls-text-2);
    --bs-tertiary-bg:     var(--ls-surface-2);
    --bs-card-bg:         var(--ls-surface);
    --bs-table-bg:        transparent;
}

[data-bs-theme="dark"] {
    --ls-bg:          #10151D;
    --ls-surface:     #181E28;
    --ls-surface-2:   #1F2632;
    --ls-line:        #2B3441;
    --ls-line-strong: #3B4656;
    --ls-text:        #E8ECF2;
    --ls-text-2:      #A5AFBE;
    --ls-text-3:      #717C8D;
    --ls-nav:         #0D1320;
    --ls-accent:      #F08A22;
    --ls-accent-ink:  #14100A;
    --ls-accent-soft: #3A2712;
    --ls-accent-text: #F5A656;
    --ls-good:        #3DBB72;
    --ls-good-soft:   #16331F;
    --ls-warn:        #E0A23A;
    --ls-warn-soft:   #3A2B0E;
    --ls-bad:         #EA6A60;
    --ls-bad-soft:    #3E1A17;
    --ls-info-soft:   #17283B;
    --ls-info-text:   #7FB3EE;

    --bs-body-bg:         var(--ls-bg);
    --bs-body-color:      var(--ls-text);
    --bs-border-color:    var(--ls-line);
    --bs-primary:         var(--ls-accent);
    --bs-primary-rgb:     240, 138, 34;
    --bs-secondary-color: var(--ls-text-2);
    --bs-tertiary-bg:     var(--ls-surface-2);
    --bs-card-bg:         var(--ls-surface);
}

/* ==========================================================
   Global table header fix
   ========================================================== */
.table > thead {
    background-color: var(--ls-surface-2);
}
.table > thead th {
    color: var(--ls-text-2);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ls-line);
    padding: .5rem .75rem;
}
.table > thead th.text-end {
    font-variant-numeric: tabular-nums;
}
.table > tbody > tr:hover {
    background-color: var(--ls-surface-2);
}

/* ==========================================================
   Cards
   ========================================================== */
.card {
    background: var(--ls-surface);
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}
.card-header {
    background: var(--ls-surface-2);
    border-bottom: 1px solid var(--ls-line);
}

/* ==========================================================
   Button discipline
   ========================================================== */
.btn-primary {
    --bs-btn-bg:           var(--ls-accent);
    --bs-btn-border-color: var(--ls-accent);
    --bs-btn-color:        var(--ls-accent-ink);
    --bs-btn-hover-bg:     #D06A00;
    --bs-btn-hover-border-color: #C06200;
    --bs-btn-hover-color:  #FFFFFF;
    --bs-btn-active-bg:    #B85C00;
    --bs-btn-active-border-color: #A85100;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg:  #E8A960;
    --bs-btn-disabled-border-color: #E8A960;
    --bs-btn-disabled-color:#FFFFFF;
}

.btn-outline-secondary {
    --bs-btn-color:        var(--ls-text-2);
    --bs-btn-border-color: var(--ls-line-strong);
    --bs-btn-hover-bg:     var(--ls-surface-2);
    --bs-btn-hover-border-color: var(--ls-line-strong);
    --bs-btn-hover-color:  var(--ls-text);
    --bs-btn-active-bg:    var(--ls-line);
    --bs-btn-active-border-color: var(--ls-line-strong);
    --bs-btn-active-color: var(--ls-text);
}

.btn-danger-text {
    background: transparent;
    border: none;
    color: var(--ls-bad);
    padding: .375rem .75rem;
    font-size: inherit;
    cursor: pointer;
    border-radius: .375rem;
    transition: background .15s, color .15s;
}
.btn-danger-text:hover {
    background: var(--ls-bad-soft);
    color: var(--ls-bad);
}
.btn-danger-text:focus-visible {
    outline: 2px solid var(--ls-bad);
    outline-offset: 2px;
}

/* ==========================================================
   Count badges (neutral)
   ========================================================== */
.badge-count {
    display: inline-flex;
    align-items: center;
    background: var(--ls-surface-2);
    color: var(--ls-text-2);
    font-weight: 600;
    font-size: .75rem;
    padding: .2em .6em;
    border-radius: .375rem;
}

/* ==========================================================
   Status chips
   ========================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15em .55em;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}
.chip-info     { background: var(--ls-info-soft); color: var(--ls-info-text); }
.chip-good     { background: var(--ls-good-soft); color: var(--ls-good); }
.chip-warn     { background: var(--ls-warn-soft); color: var(--ls-warn); }
.chip-bad      { background: var(--ls-bad-soft);  color: var(--ls-bad); }
.chip-accent   { background: var(--ls-accent-soft); color: var(--ls-accent-text); }
.chip-neutral  { background: var(--ls-surface-2); color: var(--ls-text-2); }

/* ==========================================================
   Nav avatar dropdown
   ========================================================== */
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ls-accent);
    color: var(--ls-accent-ink);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    line-height: 1;
}

/* ==========================================================
   Theme toggle fixed width
   ========================================================== */
.btn-theme-toggle {
    width: 36px;
    height: 36px;
}

/* ==========================================================
   Active nav item
   ========================================================== */
.navbar-ddt .nav-link.active,
.navbar-ddt .nav-item .nav-link.active {
    color: #FFFFFF !important;
    font-weight: 600;
    background: rgba(255,255,255,.08);
    border-radius: .375rem;
}

/* ==========================================================
   Phone number mono
   ========================================================== */
.font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Tabular numbers for data columns
   ========================================================== */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}