/* ==========================================================================
   teleleads-refresh.css
   Week 1 visual refresh — design tokens + component styles.
   Load AFTER existing Bootstrap/ExtJS <link> tags in every master page
   so these rules cascade on top without !important.
   ========================================================================== */

:root {
    /* Brand — sampled from monexgroup.com header */
    --tl-navy:          #0a1f5c;
    --tl-navy-hover:    #0d2670;
    --tl-green:         #22c55e;
    --tl-green-hover:   #16a34a;

    /* Neutrals */
    --tl-bg:            #f6f7f9;
    --tl-surface:       #ffffff;
    --tl-border:        #e3e6eb;
    --tl-border-strong: #cfd4dc;
    --tl-text:          #1a1f2b;
    --tl-text-muted:    #6b7280;
    --tl-text-label:    #4a5160;

    /* Semantic */
    --tl-required:      #d32f2f;
    --tl-row-alt:       #fafbfc;
    --tl-focus-ring:    rgba(34, 197, 94, 0.18);

    /* Typography — Inter first; Segoe UI fallback ships on every Windows machine */
    --tl-font-sans:     "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tl-font-display:  "Inter", "Segoe UI", sans-serif;
    --tl-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Geometry */
    --tl-radius:        6px;
    --tl-radius-lg:     10px;
    --tl-shadow:        0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
    --tl-shadow-lg:     0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   Bootstrap 3 col-md-* breakpoint fix
   Bootstrap 3's col-md-* only activates at ≥992px. The team's 14" laptops
   at 150% display scale produce a CSS viewport of ~790–853px, so col-md-*
   layouts stack vertically. This media query lowers the activation point to
   768px (same as col-sm-*) so every form grid works at the team's viewport.
   ========================================================================== */
@media (min-width: 768px) {
    .col-md-1  { width: 8.33333%;  float: left; }
    .col-md-2  { width: 16.66667%; float: left; }
    .col-md-3  { width: 25%;       float: left; }
    .col-md-4  { width: 33.33333%; float: left; }
    .col-md-5  { width: 41.66667%; float: left; }
    .col-md-6  { width: 50%;       float: left; }
    .col-md-7  { width: 58.33333%; float: left; }
    .col-md-8  { width: 66.66667%; float: left; }
    .col-md-9  { width: 75%;       float: left; }
    .col-md-10 { width: 83.33333%; float: left; }
    .col-md-11 { width: 91.66667%; float: left; }
    .col-md-12 { width: 100%;      float: left; }
    .col-md-offset-1  { margin-left: 8.33333%;  }
    .col-md-offset-2  { margin-left: 16.66667%; }
    .col-md-offset-3  { margin-left: 25%;        }
    .col-md-offset-4  { margin-left: 33.33333%; }
    .col-md-offset-5  { margin-left: 41.66667%; }
    .col-md-offset-6  { margin-left: 50%;        }
    .col-md-offset-11 { margin-left: 91.66667%; }
}

/* ==========================================================================
   Page wrapper — force full viewport width regardless of Bootstrap container
   ========================================================================== */

/* 100vw is absolute viewport width — cannot be constrained by any parent */
#tl-page-wrap,
#tl-page-wrap.container,
#tl-page-wrap.container-fluid {
    width:         100vw   !important;
    min-width:     100vw   !important;
    max-width:     100vw   !important;
    padding-left:  0       !important;
    padding-right: 0       !important;
    margin-left:   0       !important;
    margin-right:  0       !important;
    box-sizing:    border-box !important;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

body {
    font-family: var(--tl-font-sans);
    color: var(--tl-text);
    background: var(--tl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Utility class referenced by PropertiesLead.aspx TODO comment */
.row-padded {
    padding-left:  15px;
    padding-right: 15px;
}

/* Scope accordion/divzero row gutters for PropertiesLead interior content */
#accordion .row,
#divzero .row {
    margin-left:  -15px !important;
    margin-right: -15px !important;
}
#accordion [class*="col-"],
#divzero [class*="col-"] {
    padding-left:  15px !important;
    padding-right: 15px !important;
}

/* Navbar layout — mobile: Bootstrap collapse; desktop: flexbox centered.
   Structure: [navbar-header / home icon] [collapse flex:1 centered] [tl-user-area] */

@media (max-width: 767px) {
    /* Let Bootstrap collapse work — hide when closed, show when open */
    .navbar.navbar-default .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }
    .navbar.navbar-default .navbar-collapse.in {
        display: block !important;
    }

    /* Row 1: [hamburger+home] [user area] — all on one line */
    .navbar.navbar-default > .container {
        display:        flex      !important;
        flex-wrap:      wrap      !important;
        align-items:    center    !important;
        padding-left:   12px      !important;
        padding-right:  12px      !important;
    }
    .navbar.navbar-default .navbar-header {
        flex:           1         !important;
        float:          none      !important;
        display:        flex      !important;
        align-items:    center    !important;
        margin:         0         !important;
    }
    .navbar.navbar-default .tl-user-area {
        flex-shrink:    0         !important;
        order:          2         !important;
        padding:        0 4px     !important;
    }
    /* Row 2: collapse takes full width below the header row */
    .navbar.navbar-default .navbar-collapse {
        flex-basis:     100%      !important;
        width:          100%      !important;
        order:          3         !important;
        max-height:     none      !important;
        padding:        4px 0 8px !important;
        overflow:       visible   !important;
    }
    /* White slide-down panel — matches monexgroup.com mobile nav */
    .navbar.navbar-default .navbar-collapse.in {
        background-color: #ffffff   !important;
        border-top:  2px solid #e8eaed !important;
        padding-left: 0             !important;
        padding-right: 0            !important;
    }
    /* Stack menu items vertically — clear Bootstrap's -15px negative margin */
    .navbar.navbar-default .navbar-collapse .navbar-nav {
        display:        block     !important;
        float:          none      !important;
        width:          100%      !important;
        margin:         0         !important;
        padding:        0         !important;
    }
    .navbar.navbar-default .navbar-collapse .navbar-nav > li {
        display:        block     !important;
        width:          100%      !important;
        float:          none      !important;
        border-bottom:  1px solid #e8eaed !important;
    }
    .navbar.navbar-default .navbar-collapse .navbar-nav > li > a {
        padding:        13px 16px 13px 20px !important;
        display:        block     !important;
        width:          100%      !important;
        box-sizing:     border-box !important;
        font-size:      15px      !important;
        background-color: transparent !important;
    }
    /* Dark text on white — scoped to open panel, beats global white-text rule */
    .navbar.navbar-default .navbar-collapse.in .navbar-nav > li > a,
    .navbar.navbar-default .navbar-collapse.in .navbar-nav > li > a:hover,
    .navbar.navbar-default .navbar-collapse.in .navbar-nav > li > a:focus {
        color: #0a1f5c !important;
    }
    .navbar.navbar-default .navbar-collapse.in .navbar-nav > li > a:hover {
        background-color: #f5f7fa !important;
    }
    /* Dropdowns open downward, full width, white */
    .navbar.navbar-default .dropdown-menu {
        position:         static    !important;
        float:            none      !important;
        width:            100%      !important;
        box-shadow:       none      !important;
        background-color: #f5f7fa  !important;
        border:           none      !important;
        border-radius:    0         !important;
        margin:           0         !important;
    }
    .navbar.navbar-default .navbar-collapse.in .dropdown-menu > li > a,
    .navbar.navbar-default .navbar-collapse.in .dropdown-menu > li > a:hover,
    .navbar.navbar-default .navbar-collapse.in .dropdown-menu > li > a:focus {
        color:         #0a1f5c     !important;
        padding-left:  32px        !important;
        font-size:     14px        !important;
        border-bottom: 1px solid #e8eaed !important;
    }
    .navbar.navbar-default .navbar-collapse.in .dropdown-menu > li > a:hover {
        background-color: #eaecf0  !important;
    }

    /* ── Hamburger → X spin animation ──
       nth-child counts from the button's first child.
       Bootstrap's toggle has: <span class="sr-only"> as child 1,
       then three <span class="icon-bar"> as children 2, 3, 4. */
    .navbar-toggle .icon-bar {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        transform-origin: center !important;
    }
    .navbar-toggle.is-active .icon-bar:nth-child(2) {
        transform: translateY(6px) rotate(45deg) !important;
    }
    .navbar-toggle.is-active .icon-bar:nth-child(3) {
        opacity:   0 !important;
        transform: scaleX(0) !important;
    }
    .navbar-toggle.is-active .icon-bar:nth-child(4) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }
}

/* Desktop (≥768px): flexbox replaces Bootstrap 3 floats entirely.
   padding-top/bottom:0 and top/left:auto cancel the PropertiesLead.aspx inline style
   ".row div { padding-top:9px; top:-2px; left:-1px }" that bleeds into navbar divs. */
@media (min-width: 768px) {
    .navbar.navbar-default > .container {
        display:        flex     !important;
        align-items:    center   !important;
        flex-wrap:      nowrap   !important;
        max-width:      none     !important;
        width:          100%     !important;
        padding-left:   12px     !important;
        padding-right:  12px     !important;
        padding-top:    0        !important;
        padding-bottom: 0        !important;
        top:            auto     !important;
        left:           auto     !important;
        position:       relative !important;
    }
    .navbar.navbar-default .navbar-header {
        float:          none !important;
        flex-shrink:    0    !important;
        padding-top:    0    !important;
        padding-bottom: 0    !important;
        top:            auto !important;
        left:           auto !important;
    }
    .navbar.navbar-default .navbar-collapse {
        flex:            1       !important;
        display:         flex    !important;
        justify-content: center  !important;
        align-items:     center  !important;
        padding:         0       !important;
        max-height:      none    !important;
        overflow:        visible !important;
        border-top:      none    !important;
        box-shadow:      none    !important;
    }
    /* #menuTop is mangled by runat=server — use class selector instead */
    .navbar.navbar-default .navbar-collapse .navbar-nav {
        display:   flex    !important;
        flex-wrap: nowrap  !important;
        float:     none    !important;
        margin:    0       !important;
        padding:   0       !important;
    }
    .navbar.navbar-default .navbar-collapse .navbar-nav > li {
        display: block !important;
        float:   none  !important;
    }
    .navbar.navbar-default .navbar-nav > li > a {
        padding-top:    10px !important;
        padding-bottom: 10px !important;
        padding-left:   10px !important;
        padding-right:  10px !important;
    }
}

/* Medium screens / 150 % Windows DPI scaling (~910 px effective viewport):
   compress nav-link padding so all items stay on one row. */
@media (min-width: 768px) and (max-width: 1199px) {
    .navbar.navbar-default .navbar-nav > li > a {
        padding-left:  6px  !important;
        padding-right: 6px  !important;
        font-size:     13px !important;
    }
}

/* ==========================================================================
   Navbar — single full-width navy band matching monexgroup.com
   ========================================================================== */

.tl-nav-bar {
    background: var(--tl-navy);
    color: white;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.tl-nav-bar .tl-nav-logo {
    font-family: var(--tl-font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 14px 0;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.tl-nav-bar .tl-nav-logo .group {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
}

.tl-nav-bar .tl-product-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--tl-green);
    padding: 4px 8px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 3px;
    margin-left: -16px;
}

.tl-nav-bar .tl-nav-menu {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
}

.tl-nav-bar .tl-nav-menu a,
.tl-nav-bar .tl-nav-menu .tl-home-icon {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 18px 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.tl-nav-bar .tl-nav-menu a:hover,
.tl-nav-bar .tl-nav-menu .tl-home-icon:hover {
    color: white;
}

.tl-nav-bar .tl-nav-menu a.active {
    color: white;
    border-bottom-color: var(--tl-green);
}

.tl-nav-bar .tl-nav-menu .tl-home-icon {
    font-size: 18px;
    padding: 18px 12px;
    color: rgba(255, 255, 255, 0.7);
}

.tl-nav-bar .tl-user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.tl-nav-bar .tl-user-name {
    color: white;
    font-weight: 500;
}

.tl-nav-bar .tl-logout-icon {
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 16px;
}

.tl-nav-bar .tl-logout-icon:hover { color: white; }

/* ==========================================================================
   Bootstrap navbar-default overrides (HeaderNew.ascx in SwiftNew.master)
   Collapses the Bootstrap menu band into the navy brand colour so the
   header reads as one unified bar rather than two separate strips.
   ========================================================================== */

/* !important needed on background/border: bootstrapspacelab.css theme
   defines .navbar-default with equal specificity and loads before us.
   padding:0 cancels the PropertiesLead.aspx ".row div { padding-top:9px }" leak
   on the outer .navbar element itself. */
.navbar.navbar-default {
    background-color: #0a1f5c !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    padding:    0 !important;
}

/* Cancel the same ".row div" leak on the .col-md-12 that wraps the navbar
   (identified by id added to SwiftNew.master). */
#tl-nav-row,
#tl-nav-row > [class*="col-"] {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
    top:            auto !important;
    left:           auto !important;
}

.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
    font-family: var(--tl-font-sans);
    font-size: 14px;
    font-weight: 500;
}

.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 2px solid #22c55e;
}

.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.navbar.navbar-default .navbar-toggle {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar.navbar-default .navbar-toggle .icon-bar {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar.navbar-default .dropdown-menu {
    background-color: #ffffff !important;
    border-color: #e3e6eb !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.08) !important;
}

.navbar.navbar-default .dropdown-menu > li > a {
    color: #1a1f2b !important;
    font-size: 13px;
}

.navbar.navbar-default .dropdown-menu > li > a:hover,
.navbar.navbar-default .dropdown-menu > li > a:focus {
    color: #0a1f5c !important;
    background-color: #f6f7f9 !important;
}

/* Fix home icon and logout button — kill white background in all states */
.navbar.navbar-default .navbar-header,
.navbar.navbar-default .navbar-collapse {
    background-color: transparent !important;
}

.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus,
.navbar.navbar-default .navbar-brand:active {
    padding: 14px 16px !important;
    line-height: 1 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar.navbar-default .navbar-brand .glyphicon-home {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar.navbar-default .navbar-nav.navbar-right > li > a,
.navbar.navbar-default .navbar-nav.navbar-right > li > a:hover,
.navbar.navbar-default .navbar-nav.navbar-right > li > a:focus,
.navbar.navbar-default .navbar-nav.navbar-right > li > a:active {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* User/logout area — static flex child on the right of the navbar flex row.
   flex-shrink:0 keeps it from being squashed by the centered collapse. */
.tl-user-area {
    display:     flex   !important;
    align-items: center !important;
    gap:         10px   !important;
    flex-shrink: 0      !important;
    padding:     0 8px  !important;
    /* override any leftover absolute positioning */
    position:    static !important;
}
.tl-user-name,
.tl-user-name * {
    color:       rgba(255, 255, 255, 0.9);
    font-size:   12px;
    font-family: var(--tl-font-sans);
    font-weight: 500;
    white-space: nowrap;
}
.tl-logout-btn,
.tl-logout-btn:hover,
.tl-logout-btn:focus,
.tl-logout-btn:visited {
    color:           rgba(255, 255, 255, 0.85) !important;
    font-size:       16px !important;
    text-decoration: none !important;
    line-height:     1;
}
.tl-logout-btn:hover { color: #ffffff !important; }

/* (navbar container flexbox rules are in the centering block above) */

/* ==========================================================================
   PropertiesLead page (#divzero info strip + accordion panels)
   ========================================================================== */

/* Lead info strip — nav bar placeholder + Follow Up / Priority row */
#divzero {
    background: #ffffff;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius);
    padding: 10px 15px 6px;
    margin-bottom: 14px;
    box-shadow: var(--tl-shadow);
}

#divzero .control-label {
    font-weight: 600 !important;
    color: var(--tl-text-label) !important;
    padding-top: 6px !important;
}

/* Tighten up the accordion panels on this page */
.panel-group .panel {
    border-radius: var(--tl-radius) !important;
    margin-bottom: 8px !important;
}

.panel-group .panel-heading {
    padding: 8px 14px !important;
}

/* .panel-group scope misses panels outside #accordion (Upload attachments,
   Hubspot Info, Extra Notes sit outside it in PropertiesLead.aspx) — use
   .panel as the scope so all accordion-style panels match. */
.panel-group .panel-title,
.panel .panel-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.panel-group .panel-body {
    padding: 12px 14px !important;
}

/* Form labels inside accordion */
.panel-group .control-label {
    font-weight: 600 !important;
    color: var(--tl-text-label) !important;
    text-align: right !important;
}

/* PropertiesLead — PDF-export class aliases (s1–s19) consolidated from inline <style> */
.s1  { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 13px; font-weight: 500; }
.s2  { color: #374151; font-family: var(--tl-font-sans); font-size: 12px; }
.s3  { color: #0a1f5c; font-family: var(--tl-font-sans); font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; }
.s4  { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 11px; }
.s5  { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 10px; }
.s6  { color: #9ca3af; font-family: var(--tl-font-sans); font-size: 14px; font-weight: 700; }
.s7  { color: #9ca3af; font-size: 14px; }
.s9  { color: #dc2626; font-family: var(--tl-font-sans); font-size: 14px; font-weight: 700; }
.s10 { color: #dc2626; font-size: 14px; }
.s11 { color: #9ca3af; font-family: var(--tl-font-sans); font-size: 11px; }
.s12 { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 11px; }
.s13 { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 12px; }
.s14 { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 11px; }
.s15 { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 16px; }
.s16 { color: #1a1a1a; font-family: var(--tl-font-sans); font-size: 14px; }
.s17 { font-family: monospace; font-size: 13px; }
.s18txt { font-family: var(--tl-font-sans); font-size: 10px; padding-top: 2px; padding-left: 1px; text-align: center; }
.s19txt { font-family: var(--tl-font-sans); font-size: 10px; text-align: center; width: 33px; }

/* Equipment / shipping tables inside PropertiesLead accordion */
#divEquipment table.table-bordered,
#accordion table.table-bordered {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 13px;
}
#divEquipment table.table-bordered th,
#accordion table.table-bordered th {
    background: #f1f5f9;
    color: #0a1f5c;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    border: 1px solid var(--tl-border);
    text-align: center;
    vertical-align: middle;
}
#divEquipment table.table-bordered td,
#accordion table.table-bordered td {
    padding: 4px 6px;
    border: 1px solid var(--tl-border);
    vertical-align: middle;
}
#divEquipment table.table-bordered .s2,
#accordion table.table-bordered .s2 {
    margin: 0;
    text-align: center;
    font-weight: 600;
    color: #0a1f5c;
}

/* ==========================================================================
   Login page
   ========================================================================== */

.tl-login-stage {
    background:
        radial-gradient(circle at 20% 20%, rgba(34, 197, 94, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, #f6f7f9 0%, #eef1f6 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tl-login-card {
    background: var(--tl-surface);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    box-shadow: var(--tl-shadow-lg);
    padding: 22px 30px 18px;
    width: 100%;
    max-width: 420px;
}

.tl-login-logo {
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tl-border);
}

.tl-login-logo .wordmark {
    font-family: var(--tl-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tl-navy);
    line-height: 1;
}

.tl-login-logo .wordmark .group {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: var(--tl-navy);
    margin-left: 2px;
}

.tl-login-logo .product {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--tl-green);
}

.tl-login-card h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--tl-text);
}

.tl-subtitle {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--tl-text-muted);
}

.tl-error {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--tl-required);
}

.tl-login-card .tl-forgot {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--tl-navy);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.tl-login-card .tl-forgot:hover { color: var(--tl-green-hover); }

/* ==========================================================================
   Bootstrap .form-control override
   Styles every input/select/textarea that uses Bootstrap's form-control class
   to match the tl-input design — no markup changes needed across the 4 forms.
   ========================================================================== */

.form-control {
    border: 1px solid var(--tl-border-strong) !important;
    border-radius: var(--tl-radius) !important;
    color: var(--tl-text) !important;
    font-family: var(--tl-font-sans) !important;
    font-size: 13px !important;
    background-color: var(--tl-surface) !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: auto !important;
    padding: 8px 10px !important;
}

.form-control:focus {
    border-color: var(--tl-green) !important;
    box-shadow: 0 0 0 3px var(--tl-focus-ring) !important;
    outline: none !important;
}

.form-control::placeholder { color: #9aa1ad; }

/* Bootstrap .btn-primary override — navy instead of default blue */
.btn.btn-primary,
input.btn-primary,
button.btn-primary {
    background-color: var(--tl-navy) !important;
    background-image: none !important;
    border-color: var(--tl-navy) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-family: var(--tl-font-sans);
    letter-spacing: 0.01em;
    border-radius: var(--tl-radius) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
input.btn-primary:hover,
button.btn-primary:hover {
    background-color: var(--tl-navy-hover) !important;
    border-color: var(--tl-navy-hover) !important;
}

/* Bootstrap panel-info header — tone down the saturated blue */
.panel-info > .panel-heading {
    background-color: #f3f5f8 !important;
    border-color: var(--tl-border) !important;
    color: var(--tl-text) !important;
}

.panel-info {
    border-color: var(--tl-border) !important;
}

.panel-info > .panel-heading a {
    color: var(--tl-navy) !important;
    font-weight: 600;
}

/* Required label asterisk — labels ending with *: get a red star */
.control-label[for] {
    color: var(--tl-text-label);
    font-weight: 500;
}

/* ==========================================================================
   Shared form primitives (login + lead forms)
   ========================================================================== */

.tl-form-group { margin-bottom: 14px; }

.tl-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--tl-text-label);
    margin-bottom: 4px;
}

.tl-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--tl-border-strong);
    border-radius: var(--tl-radius);
    font-size: 14px;
    color: var(--tl-text);
    background: var(--tl-surface);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tl-input:focus {
    outline: none;
    border-color: var(--tl-green);
    box-shadow: 0 0 0 3px var(--tl-focus-ring);
}

.tl-input::placeholder { color: #9aa1ad; }

.tl-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 18px;
    font-size: 13px;
    color: var(--tl-text-label);
}

.tl-btn-primary {
    background: var(--tl-navy);
    color: white;
    border: 1px solid var(--tl-navy);
    padding: 10px 16px;
    border-radius: var(--tl-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    width: 100%;
    letter-spacing: 0.01em;
}

.tl-btn-primary:hover {
    background: var(--tl-navy-hover);
    border-color: var(--tl-navy-hover);
}

/* Required field asterisk — add CssClass="tl-label-req" to required <asp:Label> controls */
.tl-label-req::after {
    content: " *";
    color: var(--tl-required);
    font-weight: 600;
}

/* ==========================================================================
   Lead search grid
   ========================================================================== */

.tl-grid-banner {
    padding: 18px 24px 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tl-text);
}

.tl-grid-controls {
    padding: 0 24px 16px;
    display: flex;
    gap: 24px;
    font-size: 13px;
    align-items: center;
    color: var(--tl-text-label);
}

.tl-grid-controls label {
    font-weight: 500;
    color: var(--tl-text-label);
    margin-right: 6px;
}

.tl-control-input {
    border: 1px solid var(--tl-border-strong);
    padding: 6px 10px;
    border-radius: var(--tl-radius);
    font-size: 13px;
    color: var(--tl-text);
    font-family: inherit;
    min-width: 90px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tl-control-input:focus {
    outline: none;
    border-color: var(--tl-green);
    box-shadow: 0 0 0 3px var(--tl-focus-ring);
}

.tl-grid-tabs {
    padding: 0 24px;
    border-bottom: 1px solid var(--tl-border);
    display: flex;
    gap: 4px;
    font-size: 13px;
}

.tl-grid-tabs .tab {
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    color: var(--tl-text-muted);
    cursor: pointer;
    font-weight: 500;
    margin-bottom: -1px;
}

.tl-grid-tabs .tab.active {
    color: var(--tl-navy);
    border-color: var(--tl-green);
}

.tl-grid-table-wrap {
    margin: 16px 24px 24px;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius);
    overflow: hidden;
    background: var(--tl-surface);
    box-shadow: var(--tl-shadow);
}

.tl-grid-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.tl-grid-table th {
    background: #f3f5f8;
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--tl-text-label);
    border-bottom: 1px solid var(--tl-border);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tl-grid-table th.sorted {
    color: var(--tl-navy);
    background: #e8edf7;
}

.tl-grid-table th .sort-icon {
    font-size: 10px;
    margin-left: 4px;
    color: var(--tl-text-muted);
    display: none;
}

.tl-grid-table th.sorted .sort-icon {
    display: inline;
    color: var(--tl-green);
}

.tl-grid-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text);
}

.tl-grid-table tr:last-child td { border-bottom: none; }
.tl-grid-table tr:nth-child(even) td { background: var(--tl-row-alt); }
.tl-grid-table tr:hover td { background: #eef4ff; }

.tl-grid-table .lead-num {
    color: var(--tl-navy);
    font-weight: 600;
}

/* Empty cells — CSS-only fallback; works when cells are truly empty */
.tl-grid-table td:empty::before {
    content: "—";
    color: var(--tl-text-muted);
}

/* FooTable lead grid — applies to both Home.aspx and SearchLeads.aspx */
/* Shared rules for lead grids + Country admin grid */
#tblLeads,
#tblTeam,
#tblCountries {
    font-size:       12px !important;
    border-collapse: collapse !important;
    width:           100% !important;
}
#tblLeads thead tr,
#tblTeam  thead tr,
#tblCountries thead tr {
    background-color: #f3f5f8 !important;
}
#tblLeads thead tr th,
#tblTeam  thead tr th,
#tblCountries thead tr th {
    background-color: #f3f5f8 !important;
    color:            #4a5160 !important;
    font-size:        11px    !important;
    font-weight:      600     !important;
    letter-spacing:   0.04em  !important;
    text-transform:   uppercase !important;
    padding:          10px 12px !important;
    border-bottom:    2px solid #e3e6eb !important;
}
#tblLeads tbody td,
#tblTeam  tbody td,
#tblCountries tbody td {
    padding:          9px 12px !important;
    border-bottom:    1px solid #e3e6eb !important;
    color:            #1a1f2b  !important;
    vertical-align:   middle   !important;
}
#tblLeads tbody tr.sucess td,
#tblTeam  tbody tr.sucess td,
#tblCountries tbody tr.sucess td  { background-color: #ffffff !important; }
#tblLeads tbody tr.warning td,
#tblTeam  tbody tr.warning td,
#tblCountries tbody tr.warning td { background-color: #fafbfc !important; }
#tblLeads tbody tr:hover td,
#tblTeam  tbody tr:hover td,
#tblCountries tbody tr:hover td   { background-color: #eef4ff !important; cursor: pointer; }
#tblLeads tbody tr.sucess td a,
#tblLeads tbody tr.warning td a,
#tblTeam  tbody tr.sucess td a,
#tblTeam  tbody tr.warning td a,
#tblCountries tbody tr.sucess td a,
#tblCountries tbody tr.warning td a { color: #0a1f5c !important; font-weight: 600 !important; }

.tl-empty {
    color: var(--tl-text-muted);
    font-style: italic;
    font-size: 12px;
}

.tl-stage-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #eef4ff;
    color: var(--tl-navy);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.tl-stage-badge.stage-lead       { background: #eef4ff; color: #0a1f5c; }
.tl-stage-badge.stage-prospect   { background: #fef9c3; color: #854d0e; }
.tl-stage-badge.stage-active     { background: #dcfce7; color: #166534; }
.tl-stage-badge.stage-closed     { background: #d1fae5; color: #065f46; }
.tl-stage-badge.stage-cancelled  { background: #fee2e2; color: #991b1b; }
.tl-stage-badge.stage-revision   { background: #ffedd5; color: #9a3412; }
.tl-stage-badge.stage-other      { background: #f3f4f6; color: #374151; }

/* ==========================================================================
   Lead / employee forms
   ========================================================================== */

.tl-form-banner {
    padding: 18px 24px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tl-form-banner h2,
.tl-form-banner .tl-form-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tl-text);
}

.tl-form-banner .tl-btn-submit {
    background: var(--tl-navy);
    color: white;
    border: 1px solid var(--tl-navy);
    padding: 8px 22px;
    border-radius: var(--tl-radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    transition: background 0.15s;
}

.tl-form-banner .tl-btn-submit:hover { background: var(--tl-navy-hover); }

.tl-form-grid {
    padding: 8px 24px 32px;
    font-size: 13px;
}

.tl-form-row {
    display: grid;
    grid-template-columns: 170px 1fr 170px 1fr;
    gap: 12px 16px;
    margin-bottom: 12px;
    align-items: center;
}

.tl-form-row label {
    text-align: right;
    color: var(--tl-text-label);
    font-size: 13px;
    font-weight: 500;
}

.tl-form-row label .req {
    color: var(--tl-required);
    margin-left: 2px;
    font-weight: 600;
}

.tl-form-row input,
.tl-form-row select {
    border: 1px solid var(--tl-border-strong);
    padding: 7px 10px;
    border-radius: var(--tl-radius);
    font-size: 13px;
    width: 100%;
    font-family: inherit;
    background: var(--tl-surface);
    color: var(--tl-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tl-form-row input:focus,
.tl-form-row select:focus {
    outline: none;
    border-color: var(--tl-green);
    box-shadow: 0 0 0 3px var(--tl-focus-ring);
}

.tl-form-row .tl-radios {
    font-size: 13px;
    color: var(--tl-text);
    display: flex;
    gap: 16px;
    align-items: center;
}

.tl-form-row .tl-radios label {
    text-align: left;
    font-weight: 400;
    color: var(--tl-text);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.tl-form-row .tl-radios input { width: auto; }

.tl-form-row .tl-auto-value {
    color: var(--tl-text-muted);
    font-style: italic;
    font-size: 13px;
    padding: 7px 0;
}

/* ==========================================================================
   RatesAndPricingPDF.aspx — Wizard / PDF builder page
   ========================================================================== */

/* Progress bar */
.rapdf-progress {
    height:        22px;
    border-radius: 6px;
    margin-top:    20px;
    margin-bottom: 20px;
    background:    #e3e6eb;
}
.rapdf-progress .progress-bar {
    background-color: #22c55e !important;
    border-radius:    6px     !important;
    line-height:      22px    !important;
    font-size:        12px    !important;
    font-weight:      600     !important;
}

/* Wizard outer wrapper */
.wizard-container {
    margin-top: 8px;
}

/* Panel heading — already styled globally, but ensure the step subtitle shows */
#rapdf-wizard .panel-heading small {
    font-weight: 400;
    font-size:   12px;
    opacity:     0.85;
}

/* Navigation button row (Next / Back) */
.rapdf-nav {
    padding-top:  12px  !important;
    margin-top:   16px  !important;
    border-top:   1px solid #e9ecef;
}
.rapdf-nav .btn + .btn { margin-left: 8px; }

/* ── Form label paragraphs ──────────────────────────────────────────────── */
/* The <p class="s16"> / <p> elements in form-groups act as field labels     */
#rapdf-wizard .form-group > div > p,
#rapdf-wizard .form-group > div > p.s16,
#rapdf-wizard .form-group > div > p.s1 {
    font-size:   13px    !important;
    font-weight: 600     !important;
    color:       #4a5160 !important;
    padding-top: 7px     !important;
    padding-left: 0      !important;
    margin:      0       !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    text-indent: 0       !important;
}

/* ── Section sub-headers (Equipment Information, WeVend, Shipping) ───────── */
#rapdf-wizard .s3 {
    font-size:      14px      !important;
    font-weight:    700       !important;
    color:          #0a1f5c   !important;
    font-family:    'Segoe UI', Arial, sans-serif !important;
    letter-spacing: 0.01em    !important;
    text-indent:    0         !important;
}

/* ── Equipment / fees tables ────────────────────────────────────────────── */
#rapdf-wizard .table {
    font-size: 12px   !important;
    width:     100%   !important;
    margin-bottom: 0  !important;
}
#rapdf-wizard .table thead tr,
#rapdf-wizard .table tr:first-child {
    background-color: #f3f5f8 !important;
}
#rapdf-wizard .table thead td,
#rapdf-wizard .table th {
    background-color: #f3f5f8  !important;
    color:            #4a5160  !important;
    font-size:        11px     !important;
    font-weight:      600      !important;
    letter-spacing:   0.03em   !important;
    text-transform:   uppercase !important;
    padding:          7px 8px  !important;
    vertical-align:   middle   !important;
    text-indent:      0        !important;
}
/* Most tables use <p class="s2"> inside <td> for headers */
#rapdf-wizard .table td p.s2 {
    font-size:      11px   !important;
    font-weight:    600    !important;
    color:          #4a5160 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-align:     center !important;
    margin:         0      !important;
    text-indent:    0      !important;
}
#rapdf-wizard .table td {
    padding:        6px 8px  !important;
    vertical-align: middle   !important;
    text-indent:    0        !important;
}
/* Tiered / IC+ fee table label classes */
#rapdf-wizard .table td p.s11,
#rapdf-wizard .table td p.s12 {
    font-size:   12px    !important;
    color:       #1a1f2b !important;
    font-weight: 500     !important;
    margin:      0       !important;
    text-indent: 0       !important;
}
#rapdf-wizard .table td p.s6 {
    font-size:   12px    !important;
    font-weight: 600     !important;
    color:       #4a5160 !important;
    margin:      0       !important;
    text-indent: 0       !important;
}
#rapdf-wizard .table td p.s9 {
    font-size:   12px    !important;
    font-weight: 700     !important;
    color:       #c0392b !important;
    margin:      0       !important;
    text-indent: 0       !important;
}

/* ── Small text inputs inside tables (s18txt / s19txt) ─────────────────── */
#rapdf-wizard .s18txt,
#rapdf-wizard .s19txt {
    font-size:    12px          !important;
    color:        #1a1f2b       !important;
    width:        100%          !important;
    border:       1px solid #ced4da !important;
    border-radius: 3px          !important;
    padding:      3px 5px       !important;
    text-align:   center        !important;
    text-indent:  0             !important;
    background:   #fff          !important;
}
#rapdf-wizard .s18txt:focus,
#rapdf-wizard .s19txt:focus {
    outline:    none             !important;
    border-color: #22c55e       !important;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.18) !important;
}

/* ── Dropdown selects inside tables ────────────────────────────────────── */
#rapdf-wizard .table select.s4 {
    font-size:    12px      !important;
    width:        100%      !important;
    border:       1px solid #ced4da !important;
    border-radius: 3px      !important;
    padding:      3px 4px   !important;
    color:        #1a1f2b   !important;
    background:   #fff      !important;
}

/* ── Lease-term label+input rows above tables ───────────────────────────── */
#rapdf-wizard .form-group .s1 {
    font-size:   13px  !important;
    font-weight: 500   !important;
    color:       #4a5160 !important;
    padding-top: 7px   !important;
    text-indent: 0     !important;
    margin:      0     !important;
}