/**
 *
 * Apply Here your Custom CSS
 *
*/

/* ============================================================
   DESIGN TOKENS — single source of truth for the redesign
   ============================================================ */
:root {
    /* Greys */
    --grey-25:  #FBFBFC;
    --grey-50:  #F8F8F8;
    --grey-100: #F3F4F6;
    --grey-200: #F1F2F4;
    --grey-300: #ECEDF0;
    --grey-400: #E2E4E9;
    --grey-500: #D3D6DD;
    --grey-600: #8F929C;
    --grey-700: #74798B;
    --grey-800: #4A4D59;
    --grey-900: #25272D;

    /* Blues */
    --blue-25:  #F5F8FF;
    --blue-50:  #EFF4FF;
    --blue-100: #D1E0FF;
    --blue-200: #B2CCFF;
    --blue-300: #84A0FF;
    --blue-400: #528BFF;
    --blue-500: #2970FF;
    --blue-600: #155EEF;
    --blue-700: #004EE8;
    --blue-800: #0040C1;
    --blue-900: #00359E;
    --blue-950: #002266;

    /* Brand & semantic */
    --color-primary:        #004EEB;   /* Primary button blue */
    --color-primary-hover:  #0040C1;
    --color-sidebar-active: #2F6BFF;   /* Sidebar active item bg */
    --color-sidebar-sub:    #DCE7FF;   /* Sidebar sub-item active bg */
    --color-auth-bg:        #051938;   /* Dark navy on login/forgot/etc */
    --color-screen-bg:      #F5F7FB;   /* App screen bg */
    --color-card-border:    rgba(53, 69, 96, 0.10);   /* #354560 @ 10% */

    /* Status */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-error:   #EF4444;
    --color-info:    #155EEF;

    /* Text */
    --text-primary:   #25272D;
    --text-secondary: #4A4D59;
    --text-muted:     #74798B;
    --text-inverse:   #FFFFFF;

    /* Typography */
    --font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 18px;
    --fs-lg: 16px;
    --fs-md: 14px;
    --fs-sm: 12px;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;

    /* Radius */
    --radius-input:  8px;
    --radius-card:   12px;
    --radius-button: 50px;   /* full pill */

    /* Shadows */
    --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
    --shadow-pop:  0 8px 24px rgba(0,0,0,.08);

    /* Layout */
    --sidebar-width: 260px;

    /* Avatar */
    --avatar-bg: #D1E0FF;
    --avatar-fg: #004EE8;
    --avatar-size: 32px;
}

/* ============================================================
   BASE — pull global font + apply tokens to body
   ============================================================ */
html, body {
    font-family: var(--font-family);
    color: var(--text-primary);
}

body.page-body {
    background-color: var(--color-screen-bg);
}

/* ============================================================
   ICON ALIGNMENT — feather SVGs sized + baseline-aligned by default
   ============================================================ */
svg.feather {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    stroke-width: 2;
}

a > svg.feather,
button > svg.feather,
li > svg.feather {
    vertical-align: -3px;
}

/* ============================================================
   LAYOUT SHELL — sidebar + topbar + footer (overrides Neon dark theme)
   ============================================================ */

/* --- Sidebar: white panel ----------------------------------- */
.page-container .sidebar-menu,
.page-container .sidebar-menu .sidebar-menu-inner {
    background: #FFFFFF;
}

.page-container .sidebar-menu {
    width: var(--sidebar-width);
    border-right: 1px solid var(--grey-300);
    box-shadow: none;
}

/* Logo header inside sidebar */
.page-container .sidebar-menu header.logo-env {
    background: #FFFFFF;
    border-bottom: 0;
    padding: 12px 16px;
    height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-container .sidebar-menu .logo-env > div.logo {
    margin: 0;
    flex: 0 0 auto;
}

.page-container .sidebar-menu .logo-env > div.logo a {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
}

.page-container .sidebar-menu .logo-env > div.logo img {
    max-height: 48px;
    width: auto;
    display: block;
}

.page-container .sidebar-menu .logo-env > div.sidebar-collapse,
.page-container .sidebar-menu .logo-env > div.sidebar-mobile-menu {
    margin: 0;
    flex: 0 0 auto;
}

.page-container .sidebar-menu .logo-env > div.sidebar-collapse a,
.page-container .sidebar-menu .logo-env > div.sidebar-mobile-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--grey-700);
    border-radius: 6px;
}

.page-container .sidebar-menu .logo-env > div.sidebar-collapse a:hover,
.page-container .sidebar-menu .logo-env > div.sidebar-mobile-menu a:hover {
    background: var(--grey-100);
    color: var(--text-primary);
}

.page-container .sidebar-menu .logo-env > div.sidebar-collapse a > svg,
.page-container .sidebar-menu .logo-env > div.sidebar-mobile-menu a > svg {
    width: 20px;
    height: 20px;
}

/* Hide Neon's logo-env decorative pseudo-elements (lines/shadows) */
.page-container .sidebar-menu .logo-env::before,
.page-container .sidebar-menu .logo-env::after {
    display: none !important;
    content: none !important;
}

/* Top-level menu items — inset pill rows.
   Specificity here matches Neon's `.page-container .sidebar-menu #main-menu li > a`
   so we win without !important. */
.page-container .sidebar-menu #main-menu.main-menu {
    padding: 8px;
}

.page-container .sidebar-menu #main-menu li {
    margin: 2px 0;
    border: 0;
}

.page-container .sidebar-menu #main-menu li > a {
    color: var(--grey-800);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    padding: 9px 12px;
    border: 0;
    border-bottom: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    transition: background .15s ease, color .15s ease;
}

.page-container .sidebar-menu #main-menu li > a:hover {
    background: var(--grey-100);
    color: var(--text-primary);
}

.page-container .sidebar-menu #main-menu li.active > a,
.page-container .sidebar-menu #main-menu li.active > a:hover {
    background: var(--color-sidebar-sub);
    color: var(--color-primary);
}

.page-container .sidebar-menu #main-menu li.active > a > svg {
    color: var(--color-primary);
    stroke: var(--color-primary);
}

/* Suppress Neon's bottom hairline between items */
.page-container .sidebar-menu #main-menu li,
.page-container .sidebar-menu #main-menu li > a,
.page-container .sidebar-menu #main-menu li:after,
.page-container .sidebar-menu #main-menu li:before {
    box-shadow: none;
}

/* Suppress Neon's `:before` Entypo chevron on has-sub items.
   It's an inline pseudo-element that pushes the icon + label rightward
   (shifting "Reports" past the other items). We render our own chevron via ::after. */
.page-container .sidebar-menu #main-menu li.has-sub > a::before,
.page-container .sidebar-menu #main-menu li.has-sub.opened > a::before {
    content: none !important;
    display: none !important;
}

/* Match Neon's sub-list border color to our subtle divider */
.page-container .sidebar-menu #main-menu li ul {
    border-top: 0;
}

/* "has-sub" parent (Projects, Reports) — chevron on the right */
.main-menu > li.has-sub > a::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform .2s ease;
}

.main-menu > li.has-sub.opened > a::after,
.main-menu > li.has-sub.active > a::after {
    transform: rotate(90deg);
}

/* Hide Neon's built-in expand caret */
.main-menu > li.has-sub > a > .badge,
.main-menu > li.has-sub > a:before,
.main-menu > li.has-sub > a:after {
    /* keep our ::after, only suppress old Neon decorations from neon-core */
}

/* Sub-menu items (Projects > children, Reports > children) */
.main-menu li ul {
    background: #FFFFFF;
    padding: 4px 0;
}

.main-menu li ul > li {
    margin: 1px 0;
}

.main-menu li ul > li > a {
    color: var(--grey-800);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    padding: 8px 12px 8px 42px;
    background: transparent;
    border-radius: 8px;
}

.main-menu li ul > li > a:hover {
    background: var(--grey-100);
}

/* Sub-menu items (non-active): match the look of top-level non-active items
   — Neon default puts dark bg + grey-toned divider lines, override both. */
.page-container .sidebar-menu #main-menu li ul > li {
    border-bottom: 0;
    border-top: 0;
}

.page-container .sidebar-menu #main-menu li ul > li > a {
    background: transparent;
    color: var(--grey-800);
    padding: 8px 12px 8px 42px;
    border-radius: 8px;
}

.page-container .sidebar-menu #main-menu li ul > li > a:hover {
    background: var(--grey-100);
    color: var(--text-primary);
}

.page-container .sidebar-menu #main-menu li ul > li.active > a,
.page-container .sidebar-menu #main-menu li ul > li.active > a:hover {
    background: var(--color-sidebar-sub);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

/* Feather icons inside sidebar links */
.main-menu > li > a > svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
    vertical-align: middle;
    color: var(--grey-700);
    stroke: var(--grey-700);
}

/* Disable Neon's font icon glyphs */
.main-menu li a > i.entypo-menu,
.main-menu li a > i[class^="entypo-"] {
    display: none;
}

/* --- Top user bar (inc_headerMenu.cfm) ---------------------
   Matches the sidebar logo cell height (72px) so its vertical center
   lines up with the logo. The negative margin pulls it up over the
   .main-content's 20px top padding, and zero horizontal padding plus
   matching negative margin keeps the avatar/text aligned with the
   page titles directly below. */
.user-info-navbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--grey-200);
    padding: 0;
    height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: -20px -20px 24px;
}

.user-info-navbar > .row {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.user-info-navbar > .row > [class*="col-"] {
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.user-info-navbar .user-info,
.user-info-navbar .list-inline {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
}

.user-info-navbar .user-info > li,
.user-info-navbar .list-inline > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.user-info-navbar .list-inline.pull-right {
    margin-left: auto;
}

.user-info-navbar .profile-info > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Language selector pill — flag + label + chevron, all inline */
.user-info-navbar .language-selector > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    text-decoration: none;
}

.user-info-navbar .language-selector > a:hover {
    color: var(--color-primary);
}

.user-info-navbar .language-selector img {
    border-radius: 50%;
    object-fit: cover;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.user-info-navbar .language-selector .lang-label {
    line-height: 1;
}

.user-info-navbar .language-selector svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    stroke: var(--text-secondary);
}

/* Profile dropdown menu (Edit Account Details / Edit Profile) — light theme.
   Specificity bumped to beat Bootstrap/Neon defaults that paint the menu dark. */
.user-info-navbar .profile-info.dropdown .dropdown-menu,
.user-info-navbar .dropdown-menu {
    background-color: #FFFFFF !important;
    border: 1px solid var(--grey-300) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-pop) !important;
    padding: 6px !important;
    min-width: 220px;
    margin-top: 8px;
}

.user-info-navbar .profile-info.dropdown .dropdown-menu > li,
.user-info-navbar .dropdown-menu > li {
    background: transparent !important;
    border: 0 !important;
}

.user-info-navbar .profile-info.dropdown .dropdown-menu > li > a,
.user-info-navbar .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    color: var(--text-primary) !important;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    border-radius: 8px !important;
    background-color: transparent !important;
    text-shadow: none !important;
    text-decoration: none;
}

.user-info-navbar .profile-info.dropdown .dropdown-menu > li > a:hover,
.user-info-navbar .profile-info.dropdown .dropdown-menu > li > a:focus,
.user-info-navbar .profile-info.dropdown .dropdown-menu > li.active > a,
.user-info-navbar .dropdown-menu > li > a:hover,
.user-info-navbar .dropdown-menu > li > a:focus {
    background-color: var(--color-sidebar-sub) !important;
    color: var(--color-primary) !important;
}

.user-info-navbar .profile-info.dropdown .dropdown-menu > li > a > svg,
.user-info-navbar .dropdown-menu > li > a > svg {
    width: 16px;
    height: 16px;
    color: var(--grey-700);
    stroke: var(--grey-700);
    flex-shrink: 0;
}

.user-info-navbar .profile-info.dropdown .dropdown-menu > li > a:hover > svg,
.user-info-navbar .profile-info.dropdown .dropdown-menu > li > a:focus > svg,
.user-info-navbar .dropdown-menu > li > a:hover > svg,
.user-info-navbar .dropdown-menu > li > a:focus > svg {
    color: var(--color-primary);
    stroke: var(--color-primary);
}

/* Hide Neon's reverse caret indicator above the dropdown */
.user-info-navbar .dropdown-menu .caret {
    display: none !important;
}

.user-info-navbar .user-info {
    margin: 0;
    padding: 0;
}

.user-info-navbar .user-info > li > a,
.user-info-navbar .list-inline > li > a {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
}

.user-info-navbar .list-inline > li > a:hover {
    color: var(--color-primary);
}

/* Avatar circle with initials */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-fg);
    font-weight: var(--fw-semibold);
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Hide the old hr separator the headerMenu had */
.user-info-navbar + hr,
.main-content > hr {
    display: none;
}

/* --- Main content area -------------------------------------
   Neon's layout uses display: table-cell for sidebar + main-content,
   so do NOT add margin-left here (breaks mobile, where the layout
   switches to display: block at <=768px). Just paint the bg.
   Specificity bumped to override Neon's `.page-container .main-content { background: #fff }`. */
.page-container .main-content,
.main-content {
    background: var(--color-screen-bg);
}

/* Page body inherits the light grey too — covers the area outside the
   table-cell layout on tall pages. */
html, body, body.page-body {
    background: var(--color-screen-bg);
}

/* Auth pages: paint the html element too so no light strip shows above the body. */
html:has(body.login-page) {
    background: var(--color-auth-bg);
}

/* --- Footer ----------------------------------------------- */
footer.main {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    border-top: 1px solid var(--grey-200);
    padding: 16px 24px;
    margin: 32px -20px 0;
    text-align: left;
    background: transparent;
}

footer.main strong {
    color: var(--text-secondary);
}

/* ============================================================
   USER ACCESS — permission matrix
   ============================================================ */

/* Subtler stage section header rows (was dark slate, now light grey) */
.main-content table.table tbody tr th[style*="background-color:rgb(55, 62, 74)"],
.main-content table.table thead tr th[style*="background-color:rgb(55, 62, 74)"] {
    background: var(--grey-100) !important;
    color: var(--text-primary) !important;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    padding: 12px 16px;
}

/* User Access matrix — cell action icons (download / upload / x).
   Small icons inside light grey circle backgrounds. */
.main-content table.table td > svg.btn-default,
.main-content table.table th > svg.btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 5px;
    margin: 0 2px;
    background: var(--grey-100);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    text-shadow: none;
    color: var(--text-primary);
    stroke: var(--text-primary);
    stroke-width: 2;
    vertical-align: middle;
}

/* Stage permission check icon (inside dark stage header row) — dark navy filled circle, white check */
.main-content table.table td > svg.btn-primary,
.main-content table.table th > svg.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    margin: 0 2px;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    background: var(--color-auth-bg);
    color: var(--text-inverse);
    stroke: var(--text-inverse);
}

/* Top legend icons (User Access page header) — blue filled circles with white icons */
.main-content .well svg.btn,
.main-content .well [data-feather].btn,
.main-content .user-access-header svg.btn,
.main-content .user-access-header [data-feather].btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 4px;
    margin-right: 6px;
    border-radius: 50%;
    border: 0;
    background: var(--color-primary);
    color: var(--text-inverse);
    stroke: var(--text-inverse);
    vertical-align: -6px;
}

/* User Access header sits flat on the page, no box */
.main-content .user-access-header {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 24px;
}

.main-content .user-access-header h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0 0 6px;
}

.main-content .user-access-header h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    margin: 0;
}

/* ============================================================
   PROJECT DETAIL — vertical stage timeline
   (uses Neon's cbp_tmtimeline component)
   ============================================================ */

.cbp_tmtimeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* The vertical line down the middle/left.
   The plugin paints a 10px-wide light-blue bar at left: 20% — override that. */
.cbp_tmtimeline::before,
.cbp_tmtimeline:before {
    content: "" !important;
    position: absolute;
    top: 8px !important;
    bottom: 8px !important;
    left: 227px !important;
    margin-left: 0 !important;
    width: 2px !important;
    background: var(--grey-300) !important;
    z-index: 0;
}

.cbp_tmtimeline > li {
    position: relative;
    margin-bottom: 18px;   /* matches the card's 18px inner top/bottom padding */
    padding-left: 280px;
    padding-right: 0;
    min-height: 64px;
    box-sizing: border-box;
}

.main-content .cbp_tmtimeline > li > .cbp_tmtime,
.main-content .cbp_tmtimeline > li .cbp_tmtime,
.cbp_tmtimeline > li > .cbp_tmtime,
.cbp_tmtimeline > li .cbp_tmtime {
    position: absolute !important;
    left: 0 !important;
    top: 16px !important;
    width: 200px !important;
    max-width: 200px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    color: var(--text-primary) !important;
}

/* Plugin's CSS sets the inner spans (stage name + status) to text-align: right.
   Override that so the labels left-align with the page content. */
.cbp_tmtimeline > li .cbp_tmtime span,
.cbp_tmtimeline > li > .cbp_tmtime span {
    text-align: left !important;
}

.cbp_tmtimeline > li > .cbp_tmtime span:first-child {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
}

.cbp_tmtimeline > li > .cbp_tmtime span:last-child {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}

/* Status icon circle — solid color, no extra ring/border.
   Plugin places it at left:20% with margin-left:-25px and a blue ring — override hard. */
.cbp_tmtimeline > li .cbp_tmicon,
.cbp_tmicon {
    position: absolute !important;
    left: 210px !important;
    top: 8px !important;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 50% !important;
    background: var(--grey-400) !important;
    color: var(--text-inverse) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border: 0 !important;
    box-shadow: 0 0 0 4px var(--color-screen-bg) !important;
    font-size: 0;
}

/* Status colors — use !important to win over the default-grey rule above */
.cbp_tmtimeline > li .cbp_tmicon.bg-info,
.cbp_tmicon.bg-info {
    background: var(--color-primary) !important;
    color: var(--text-inverse) !important;
}

.cbp_tmtimeline > li .cbp_tmicon.bg-success,
.cbp_tmicon.bg-success {
    background: var(--color-success) !important;
    color: var(--text-inverse) !important;
}

.cbp_tmicon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 3;
}

/* Make the "play" icon a solid white triangle (Feather is stroke-only by default) */
.cbp_tmicon svg.feather-play {
    fill: currentColor;
}

/* The stage card.
   Use !important so the vertical-timeline plugin (loaded after this file
   in some situations) can't repaint the card blue. */
.cbp_tmtimeline > li .cbp_tmlabel,
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel,
.cbp_tmlabel {
    background: #FFFFFF !important;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 18px 20px !important;
    margin: 0 0 0 0 !important;
    color: var(--text-primary) !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-regular) !important;
    line-height: 1.5 !important;
}

/* Pointer triangle on the left edge of each card (matches Figma).
   `filter: drop-shadow` follows the actual rendered triangle shape,
   so it casts a shadow on the two left edges (top-left and bottom-left). */
.cbp_tmtimeline > li .cbp_tmlabel:after,
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    display: block !important;
    content: "" !important;
    position: absolute;
    top: 14px;
    right: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 12px 0;
    border-color: transparent #FFFFFF transparent transparent;
    pointer-events: none;
    filter:
        drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.04))
        drop-shadow(-2px 4px 6px rgba(0, 0, 0, 0.04));
    /* Suppress plugin's old colored borders */
    border-right-color: #FFFFFF !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.cbp_tmtimeline > li .cbp_tmlabel h2 {
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 8px;
    line-height: 1.4;
}

/* Status btn-group inside stage card (Pending / In Progress / Complete pills) */
.cbp_tmlabel .btn-group {
    display: inline-flex;
    gap: 6px;
    background: transparent;
    margin: 4px 12px 4px 0;
}

/* Wrapper row that holds the pills + payment status + edit button.
   Use flex to keep everything on one line and aligned: pills + payment on the left,
   Edit button pinned to the right. */
.cbp_tmlabel > div:first-child {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 24px;
}

/* "Payment: Pending" — not bold, regular weight */
.cbp_tmlabel > div:first-child > strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--fw-regular);
}

/* Edit button still uses .pull-right but flex wins — push it to the right with margin-left:auto */
.cbp_tmlabel > div:first-child > .btn.pull-right {
    float: none !important;
    margin-left: auto !important;
}

/* Override Bootstrap's btn-group radius collapse (which makes pills look connected). */
.cbp_tmlabel .btn-group > .btn,
.cbp_tmlabel .btn-group > .btn:first-child,
.cbp_tmlabel .btn-group > .btn:last-child,
.cbp_tmlabel .btn-group > .btn:not(:first-child):not(:last-child),
.cbp_tmlabel .btn-group > .btn-xs,
.cbp_tmlabel .btn-group > .btn-xs:first-child,
.cbp_tmlabel .btn-group > .btn-xs:last-child {
    border-top-left-radius: var(--radius-button) !important;
    border-top-right-radius: var(--radius-button) !important;
    border-bottom-left-radius: var(--radius-button) !important;
    border-bottom-right-radius: var(--radius-button) !important;
    margin-left: 0 !important;
}

.cbp_tmlabel .btn-group .btn-xs {
    border-radius: var(--radius-button);
    padding: 4px 14px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    border: 0;
    background: var(--grey-100);
    color: var(--text-secondary);
    box-shadow: none;
    text-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

/* Inactive (.btn-white) — light grey */
.cbp_tmlabel .btn-group .btn-white.btn-xs {
    background: var(--grey-100);
    color: var(--text-primary);
}

/* Active pill — dark grey with white text (status is conveyed by the
   timeline circle on the left, not the pill color). */
.cbp_tmlabel .btn-group .btn-primary.btn-xs {
    background: var(--grey-800);
    color: var(--text-inverse);
}

.cbp_tmlabel .btn-group .btn-xs:hover {
    filter: brightness(0.95);
}

/* Payment status text */
.cbp_tmlabel strong + .text-success,
.cbp_tmlabel strong .text-success,
.cbp_tmlabel .text-success { color: var(--color-success); }

.cbp_tmlabel strong + .text-danger,
.cbp_tmlabel strong .text-danger,
.cbp_tmlabel .text-danger  { color: var(--color-error); }

/* Edit Stage button — same style as the table-row "Edit" button (grey filled pill) */
.cbp_tmlabel .btn-blue.btn-xs {
    background: var(--grey-100);
    border: 0;
    color: var(--text-primary);
    border-radius: var(--radius-button);
    padding: 4px 12px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    box-shadow: none;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cbp_tmlabel .btn-blue.btn-xs:hover {
    background: var(--grey-500);
    border-color: var(--grey-500);
    color: var(--text-primary);
}

.cbp_tmlabel .btn-blue.btn-xs svg {
    width: 12px;
    height: 12px;
}

/* Payment status text */
.cbp_tmlabel .text-success { color: var(--color-success); }
.cbp_tmlabel .text-danger  { color: var(--color-warning); }

/* File table inside stage card */
.cbp_tmlabel table.table {
    margin-top: 8px;
    margin-bottom: 0;
}

.cbp_tmlabel table.table thead th {
    background: var(--grey-50);
    color: var(--text-muted);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border-top: 0;
    border-bottom: 1px solid var(--grey-200);
    padding: 8px 12px;
}

.cbp_tmlabel table.table tbody td {
    padding: 10px 12px;
    border-top: 1px solid var(--grey-200);
    font-size: var(--fs-sm);
}

.cbp_tmlabel table.table tbody td a {
    color: var(--text-primary);
    font-weight: var(--fw-regular);
    text-decoration: none;
}

.cbp_tmlabel table.table tbody td a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* "Add File" button in file table header */
.cbp_tmlabel table.table .btn-default.btn-xs {
    background: transparent;
    border: 1px solid var(--grey-300);
    color: var(--text-secondary);
    border-radius: var(--radius-input);
    padding: 4px 12px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-shadow: none;
    box-shadow: none;
}

.cbp_tmlabel table.table .btn-default.btn-xs:hover {
    background: var(--grey-100);
    color: var(--text-primary);
}

.cbp_tmlabel table.table .btn-default.btn-xs svg {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* Per-file row icon buttons — delete is a small red icon, download is a dark navy filled circle */
.cbp_tmlabel table.table .btn-danger.btn-xs {
    background: transparent;
    border: 0;
    padding: 4px;
    margin: 0 4px;
    box-shadow: none;
    text-shadow: none;
    color: var(--color-error);
}

.cbp_tmlabel table.table .btn-danger.btn-xs:hover {
    background: rgba(239, 68, 68, 0.12);
    border-radius: 50%;
}

.cbp_tmlabel table.table .btn-black.btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0 2px;
    border: 0;
    border-radius: 50%;
    background: var(--color-auth-bg);
    color: var(--text-inverse);
    box-shadow: none;
    text-shadow: none;
}

.cbp_tmlabel table.table .btn-black.btn-xs:hover {
    background: var(--grey-900);
    color: var(--text-inverse);
}

.cbp_tmlabel table.table .btn-danger.btn-xs svg,
.cbp_tmlabel table.table .btn-black.btn-xs svg {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* Notes scroll panel */
.dynamic-div {
    background: #FFFFFF;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-input);
    padding: 10px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   PROJECT TIMELINE — responsive: stack stage name + card vertically
   below 1340px so on tablet / narrow desktop the layout doesn't
   crowd the icon column.
   ------------------------------------------------------------ */
@media (max-width: 1340px) {
    /* No more 280px reserved for the side column — card takes full width */
    .cbp_tmtimeline > li {
        padding-left: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 18px !important;
    }

    /* Stage name flows above the card */
    .main-content .cbp_tmtimeline > li > .cbp_tmtime,
    .main-content .cbp_tmtimeline > li .cbp_tmtime,
    .cbp_tmtimeline > li > .cbp_tmtime,
    .cbp_tmtimeline > li .cbp_tmtime {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 56px 6px 0 !important;
        text-align: left !important;
        min-height: 40px;
    }

    .cbp_tmtimeline > li > .cbp_tmtime span:first-child {
        font-size: var(--fs-md);
    }

    /* Status circle on the same horizontal line as the stage name (top-right) */
    .cbp_tmtimeline > li .cbp_tmicon,
    .cbp_tmicon {
        left: auto !important;
        right: 0 !important;
        top: 4px !important;
        box-shadow: none !important;
    }

    /* Hide the vertical timeline line — doesn't fit the stacked layout */
    .cbp_tmtimeline::before,
    .cbp_tmtimeline:before {
        display: none !important;
    }

    /* Hide the white pointer triangle (no timeline to point to) */
    .cbp_tmtimeline > li .cbp_tmlabel:after,
    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        display: none !important;
    }

    /* Compact file table: hide File Size + Date columns at narrow widths.
       They are always the 2nd-to-last and 3rd-to-last columns (Actions is last). */
    .cbp_tmlabel table.table th:nth-last-child(2),
    .cbp_tmlabel table.table th:nth-last-child(3),
    .cbp_tmlabel table.table td:nth-last-child(2),
    .cbp_tmlabel table.table td:nth-last-child(3) {
        display: none !important;
    }
}

/* ============================================================
   FORMS — panel/card + rounded inputs + pill action buttons
   ============================================================ */

/* Form panel/card */
.main-content .panel.panel-default,
.main-content .panel.panel-shadow,
.main-content .panel.panel-primary {
    background: #FFFFFF;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
}

.main-content .panel-heading {
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding: 8px 16px;
}

.main-content .panel-title,
.main-content .panel-heading .panel-title.bold,
.main-content .panel-heading > .panel-title {
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 0;
}

.main-content .panel-body {
    padding: 24px;
}

/* Form rows */
.main-content .form-horizontal .form-group {
    margin-bottom: 16px;
}

.main-content .form-horizontal .control-label {
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    padding-top: 9px;
    text-align: right;
}

.main-content .form-control,
.main-content .select2-container .select2-choice,
.main-content .select2-container-multi .select2-choices {
    background: var(--grey-50);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    font-size: var(--fs-md);
    padding: 9px 14px;
    height: auto;
    min-height: 40px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.main-content textarea.form-control {
    padding: 10px 14px;
    line-height: 1.5;
    min-height: 80px;
}

.main-content .form-control:focus,
.main-content .select2-container.select2-container-active .select2-choice,
.main-content .select2-container-multi.select2-container-active .select2-choices {
    background: #FFFFFF;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 78, 235, 0.10);
    outline: none;
}

.main-content .form-control[disabled],
.main-content .form-control[readonly] {
    background: var(--grey-100);
    color: var(--text-muted);
    cursor: not-allowed;
}

.main-content .form-control::placeholder {
    color: var(--grey-600);
}

/* Helper / hint text under inputs */
.main-content .form-horizontal .description,
.main-content .form-horizontal .help-block {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Save / Cancel pill buttons (used at bottom of forms) */
.main-content .btn-green {
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
    color: var(--text-inverse);
    font-size: var(--fs-md);
}

.main-content .btn-green:hover,
.main-content .btn-green:focus {
    background-color: #1B9D4B; /* ~20% darker than #22C55E */
    border-color: #1B9D4B;
    color: var(--text-inverse);
}

.main-content .btn-red {
    background-color: rgba(239, 68, 68, 0.12);
    border: 1px solid transparent;
    color: var(--color-error);
    font-size: var(--fs-md);
}

.main-content .btn-red:hover,
.main-content .btn-red:focus {
    background-color: rgba(239, 68, 68, 0.30); /* ~20% more saturated */
    color: var(--color-error);
}

/* Bottom action button row */
.main-content form > div:last-child > .list-inline {
    margin: 24px 0 0;
}

/* select2 multi-select chip restyle (engineer pickers in Add/Edit Project)
   Matches the Details/active-sidebar pill: light blue (#DCE7FF) bg + primary blue text. */
.main-content .select2-container-multi .select2-choices {
    background: var(--grey-50);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    box-shadow: none;
    padding: 4px 6px;
    min-height: 40px;
}

.main-content .select2-container-multi .select2-choices .select2-search-choice {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: var(--radius-button);
    color: var(--text-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    padding: 4px 30px 4px 0;   /* extra right room for the close button */
    margin: 3px 12px 3px 0;
    box-shadow: none;
    text-shadow: none;
    line-height: 1.4;
    transition: color .15s ease;
    position: relative;
}

.main-content .select2-container-multi .select2-choices .select2-search-choice:hover {
    background-color: transparent;
    color: var(--color-primary);
}

/* The "remove" close button — dark filled circle with white × inside, on the RIGHT */
.main-content .select2-container-multi .select2-choices .select2-search-choice-close {
    position: absolute;
    top: 50%;
    right: 8px;
    left: auto;
    margin-top: -8px;   /* recenter vertically (replaces transform: translateY) */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--text-secondary) !important;
    background-image: none !important;
    color: #FFFFFF;
    opacity: 1;
    text-indent: -9999px;   /* hide any sprite text leak */
    overflow: hidden;
    transition: background-color .15s ease;
}

.main-content .select2-container-multi .select2-choices .select2-search-choice-close::before {
    content: "\00D7";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: var(--fw-regular);
    color: #FFFFFF;
    text-align: center;
    text-indent: 0;
}

.main-content .select2-container-multi .select2-choices .select2-search-choice-close:hover {
    background-color: var(--text-primary) !important;
}

/* ============================================================
   BUTTONS — generic rules (all buttons on the page)

   Conventions matched to Figma:
   - Icons sit on the LEFT of the text (visually). Many CFM templates write
     `Save <i data-feather="...">` so we use flex-direction: row-reverse
     when the .icon-left class is present, putting the SVG before the text.
   - Equal horizontal padding (no extra space "for the icon" on one side).
   - No button has a white background — every button is either filled with
     a brand color or transparent ghost-style.
   - Hover state is consistently ~20% darker than the resting state.
   ============================================================ */

.main-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    line-height: 1.4;
    box-shadow: none;
    text-shadow: none;
    border-radius: var(--radius-button);
    font-weight: var(--fw-medium);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Restore symmetric padding on Neon's preset .btn-icon paddings. */
.main-content .btn.btn-icon,
.main-content .btn.btn-icon.icon-left,
.main-content .btn.btn-icon.btn-lg,
.main-content .btn.btn-icon.btn-lg.icon-left,
.main-content .btn.btn-icon.btn-sm,
.main-content .btn.btn-icon.btn-sm.icon-left,
.main-content .btn.btn-icon.btn-xs,
.main-content .btn.btn-icon.btn-xs.icon-left {
    padding-left: 18px;
    padding-right: 18px;
}

.main-content .btn.btn-xs {
    padding: 4px 10px;
}

/* All `.btn-icon.icon-left` buttons are written as `<i></i> Label` in HTML,
   so the default flex row puts the icon on the left visually. */

/* The icon itself: drop Neon's grey "tab" background + sizing. */
.main-content .btn.btn-icon i,
.main-content .btn.btn-icon svg {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    position: static !important;
    float: none !important;
    line-height: 1 !important;
}

/* ============================================================
   PAGE HEADERS — h2 with right-aligned action button
   (used on Project List, User List, Clients, Reports)
   ============================================================ */
.main-content > h2 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0 0 24px;
    overflow: hidden;
}

.main-content > h2 .pull-right {
    margin-top: 4px;
}

/* Primary blue action button (Add Project, Add Client, Create Project, etc.) */
.main-content .btn-blue,
.main-content a.btn-blue {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--text-inverse);
    font-size: var(--fs-md);
}

.main-content .btn-blue:hover,
.main-content .btn-blue:focus,
.main-content a.btn-blue:hover,
.main-content a.btn-blue:focus {
    background-color: #003BB0; /* ~20% darker than #004EEB */
    border-color: #003BB0;
    color: var(--text-inverse);
}

/* ============================================================
   TABLES — DataTables restyle (project / user / client lists)
   ============================================================ */

/* DataTables wrapper card */
.dataTables_wrapper {
    background: #FFFFFF;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    margin-bottom: 24px;
}

/* Show entries + search row */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 36px;
    line-height: 1.4;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    padding: 0 12px;
    font-size: var(--fs-sm);
    background: #FFFFFF;
    box-sizing: border-box;
    vertical-align: middle;
}

/* select2 wraps the native <select> for the "show entries" dropdown — match height */
.dataTables_wrapper .dataTables_length .select2-container,
.dataTables_wrapper .dataTables_length .select2-choice {
    height: 36px;
    line-height: 34px;
    box-sizing: border-box;
}

.dataTables_wrapper .dataTables_length .select2-choice {
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    padding: 0 28px 0 12px;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--text-primary);
}

.dataTables_wrapper .dataTables_length .select2-choice .select2-arrow {
    border: 0;
    background: transparent;
    width: 24px;
    top: 0;
    bottom: 0;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 78, 235, 0.10);
}

/* Table itself */
.main-content table.table.datatable,
.main-content table.table-bordered {
    border: 0;
    margin-bottom: 0;
}

.main-content table.table thead th {
    background: var(--grey-50);
    border-top: 0;
    border-bottom: 1px solid var(--grey-200);
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    text-transform: none;
    padding: 12px 16px;
    letter-spacing: 0;
}

.main-content table.table tbody td {
    border-top: 1px solid var(--grey-200);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    vertical-align: middle;
}

/* Plain DataTables (project list, user list, etc.) keep edge-to-edge rows. */
.main-content table.table-bordered > thead > tr > th,
.main-content table.table-bordered > tbody > tr > td {
    border-left: 0;
    border-right: 0;
}

/* Client Overview report — header row is light grey, matching the Figma
   "Dashboard - Client Overview" screen. */
.main-content table.table.client-overview-table thead th {
    background: var(--grey-50);
    color: var(--text-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    padding: 14px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--grey-200);
    text-transform: none;
}

.main-content .panel.client-overview {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* The User Access matrix uses .table-bordered too, but we want column borders
   so the matrix grid reads clearly (matches Figma). */
.main-content table.table-bordered.user-access-grid > thead > tr > th,
.main-content table.table-bordered.user-access-grid > tbody > tr > td,
.main-content table.table-bordered.user-access-grid > tbody > tr > th {
    border-left: 1px solid var(--grey-200);
    border-right: 1px solid var(--grey-200);
}

.main-content table.table-bordered.user-access-grid > thead > tr > th:first-child,
.main-content table.table-bordered.user-access-grid > tbody > tr > td:first-child,
.main-content table.table-bordered.user-access-grid > tbody > tr > th:first-child {
    border-left: 0;
}

.main-content table.table-bordered.user-access-grid > thead > tr > th:last-child,
.main-content table.table-bordered.user-access-grid > tbody > tr > td:last-child,
.main-content table.table-bordered.user-access-grid > tbody > tr > th:last-child {
    border-right: 0;
}

.main-content table.table tbody tr:hover {
    background: var(--grey-50);
}

/* Per-column search row in tfoot */
.main-content table.table tfoot th {
    background: #FFFFFF;
    border-top: 1px solid var(--grey-200);
    padding: 8px 16px;
}

.main-content table.table tfoot input.form-control {
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    padding: 6px 10px;
    font-size: var(--fs-sm);
    background: #FFFFFF;
    height: auto;
    box-shadow: none;
}

/* Table action buttons — filled pill style (Details / Edit / Delete) */
.main-content table.table .btn-xs {
    border: 0;
    box-shadow: none;
    text-shadow: none;
    font-size: 11px;
    font-weight: var(--fw-medium);
    padding: 4px 12px;
    border-radius: var(--radius-button);
    margin-right: 4px;
    gap: 6px;
    transition: background-color .15s ease, color .15s ease;
}

/* Details — light blue tint */
.main-content table.table .btn-info.btn-xs,
.main-content table.table a.btn-info.btn-xs {
    background-color: var(--color-sidebar-sub);   /* #DCE7FF */
    color: var(--color-primary);
}

.main-content table.table .btn-info.btn-xs:hover,
.main-content table.table .btn-info.btn-xs:focus,
.main-content table.table a.btn-info.btn-xs:hover {
    background-color: #B3CCFF;   /* ~20% darker than #DCE7FF */
    color: var(--color-primary);
}

/* Edit — light grey */
.main-content table.table .btn-default.btn-xs,
.main-content table.table a.btn-default.btn-xs {
    background-color: var(--grey-100);
    color: var(--text-primary);
}

.main-content table.table .btn-default.btn-xs:hover,
.main-content table.table .btn-default.btn-xs:focus,
.main-content table.table a.btn-default.btn-xs:hover {
    background-color: var(--grey-500);   /* ~30% darker than grey-100 */
    color: var(--text-primary);
}

/* Delete — light red */
.main-content table.table .btn-danger.btn-xs,
.main-content table.table a.btn-danger.btn-xs {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--color-error);
}

.main-content table.table .btn-danger.btn-xs:hover,
.main-content table.table .btn-danger.btn-xs:focus,
.main-content table.table a.btn-danger.btn-xs:hover {
    background-color: rgba(239, 68, 68, 0.30);   /* ~20% darker */
    color: var(--color-error);
}

.main-content table.table .btn-xs svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    color: currentColor;
}

/* Status column — colored dot before text */
/* Apply by wrapping status text in a span with .status-dot, or use this generic
   pattern: column 6 / 7 of a list table is "Status". We add subtle dots via :before
   if value matches. CFML pages output bare text — we leverage CSS attribute selectors
   on tbody td to apply color text. Fallback: bold the status text in muted color. */
.main-content table.table tbody td.status-active::before { content: "● "; color: var(--color-success); }
.main-content table.table tbody td.status-inactive::before { content: "● "; color: var(--color-error); }
.main-content table.table tbody td.status-pending::before { content: "● "; color: var(--color-warning); }

/* DataTables pagination */
.dataTables_wrapper .dataTables_info {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding-top: 16px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    background: #FFFFFF;
    color: var(--text-primary) !important;
    margin-left: 4px;
    padding: 4px 10px;
    font-size: var(--fs-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-inverse) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--grey-100) !important;
    border-color: var(--grey-300) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   DASHBOARD — welcome well + stat cards
   ============================================================ */

/* Welcome banner ("March 12, 2026" + greeting) */
.main-content .well {
    background: #FFFFFF;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.main-content .well h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0 0 8px;
}

.main-content .well h3 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
    margin: 0;
}

.main-content .well h3 strong {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

/* Stat cards */
.stat-card.tile-stats {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px 28px;
    margin-bottom: 16px;
    color: var(--text-primary);
    overflow: hidden;
}

/* Override Neon's `.tile-stats.tile-gray .num/h3/p { color: #8f8f8f }`
   so the dashboard stat numbers/labels match the date color. */
.stat-card.tile-stats .num,
.stat-card.tile-stats.tile-gray .num {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-primary) !important;
    line-height: 1;
    margin-bottom: 16px;
}

.stat-card.tile-stats h3,
.stat-card.tile-stats.tile-gray h3 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    color: var(--text-primary) !important;
    margin: 0 0 4px;
}

.stat-card.tile-stats p,
.stat-card.tile-stats.tile-gray p {
    font-size: var(--fs-sm);
    color: var(--text-muted) !important;
    margin: 0;
}

.stat-card .icon {
    position: absolute;
    top: 24px;
    right: 24px;
    pointer-events: none;
    /* SVGs exported from Figma already include 30% opacity baked in. */
}

.stat-card .icon svg,
.stat-card .icon img {
    height: 40px;
    width: auto;
    display: block;
}

/* ============================================================
   AUTH PAGES — dark navy bg, centered white card
   (login / forgotPassword / resetPassword / signup / confirm)
   ============================================================ */
body.login-page {
    background: var(--color-auth-bg) !important;
    color: var(--text-inverse);
    font-family: var(--font-family);
    min-height: 100vh;
}

.login-container {
    max-width: 460px;
    width: 92%;
    margin: 80px auto 40px;
    text-align: center;
}

.login-container .login-header {
    background: transparent;
    box-shadow: none;
    margin-bottom: 24px;
    padding: 0;
}

.login-container .login-header::after,
.login-container .login-header::before {
    display: none;
}

.login-container .logo {
    display: inline-block;
    margin-bottom: 24px;
}

.login-container .logo img {
    max-height: 36px;
    width: auto;
}

.login-container .auth-heading {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-inverse);
    margin: 0 0 12px;
    line-height: 1.2;
}

.login-container .description {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    margin: 0 0 28px;
    line-height: 1.5;
}

.login-container .description strong {
    font-weight: var(--fw-regular);
    color: rgba(255, 255, 255, 0.65);
}

/* Hide the Neon spinner indicators by default; they show during submit. */
.login-container .login-progressbar,
.login-container .login-progressbar-indicator {
    display: none;
}

/* Plans page is wider to fit the pricing-grid (any login-container that contains a pricing grid) */
.login-container:has(.pricing-container) {
    max-width: 1320px;
    width: 96%;
}

/* Let the heading area span the full container width on the plans page,
   so "Choose The Plan That Best / Aligns With Your Needs" can sit on two lines. */
.login-container:has(.pricing-container) .login-header,
.login-container:has(.pricing-container) .login-header .login-content {
    width: auto;
    max-width: none;
    min-height: 0;
}

.login-container:has(.pricing-container) .auth-heading {
    white-space: normal;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* The white card */
.login-container .login-form {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-card);
    text-align: left;
    color: var(--text-primary);
    transition: background-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}

/* During Neon's "logging-in" state the form fields fade out + slide up,
   but the white card behind them stays visible. Hide that too. */
body.login-page.logging-in .login-container .login-form,
body.login-page.logging-in-lockscreen .login-container .login-form {
    background: transparent;
    box-shadow: none;
}

.login-container .login-form .login-content {
    padding: 0;
}

.login-container .form-group {
    margin-bottom: 16px;
}

.login-container .form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    text-align: left;
}

.login-container .form-group .btn,
.login-container .form-group button {
    text-align: center;
}

/* Inputs */
.login-container .input-group {
    width: 100%;
}

.login-container .form-control {
    background: var(--grey-50);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    font-size: var(--fs-md);
    padding: 10px 14px;
    height: auto;
    box-shadow: none;
    width: 100%;
}

.login-container .form-control:focus {
    background: #FFFFFF;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 78, 235, 0.15);
    outline: none;
}

.login-container .input-group-addon {
    background: transparent;
    border: 0;
    color: var(--grey-600);
    padding: 0 8px 0 0;
}

.login-container .input-group-addon svg {
    width: 16px;
    height: 16px;
}

/* Primary login button */
.login-container .btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-button);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    padding: 11px 24px;
    text-align: center;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    transition: background .15s ease;
}

.login-container .btn-login:hover,
.login-container .btn-login:focus {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--text-inverse);
}

.login-container .btn-login svg {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

/* Bottom links (forgot pw, sign up) — sit inside the white card. */
.login-container .login-bottom-links {
    margin-top: 16px;
    padding: 16px 0 0 !important;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.login-container .login-bottom-links .link,
.login-page .login-bottom-links .link,
.login-page .login-bottom-links a {
    display: inline-block;
    color: var(--color-primary) !important;
    text-decoration: none;
    font-weight: var(--fw-medium);
    margin: 4px 0;
    transition: color .15s ease;
}

.login-container .login-bottom-links .link:hover,
.login-page .login-bottom-links .link:hover,
.login-page .login-bottom-links a:hover {
    color: var(--color-primary-hover) !important;
    text-decoration: underline;
}

.login-container .login-bottom-links strong {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

/* Status / success / error messages inside the card */
.login-container .form-login-error,
.login-container .form-forgotpassword-success,
.login-container .form-register-success {
    display: none;
    background: var(--grey-100);
    border-radius: var(--radius-input);
    padding: 12px 14px;
    margin-bottom: 16px;
    color: var(--text-primary);
    text-align: center;
}

.login-container .form-forgotpassword-success,
.login-container .form-register-success {
    background: rgba(34, 197, 94, 0.10);
    color: var(--color-success);
}

.login-container .form-login-error {
    background: rgba(239, 68, 68, 0.10);
    color: var(--color-error);
}

.login-container .form-login-error h3,
.login-container .form-forgotpassword-success h3,
.login-container .form-register-success h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 4px;
    color: inherit;
}

.login-container .form-login-error p,
.login-container .form-forgotpassword-success p,
.login-container .form-register-success p {
    font-size: var(--fs-sm);
    margin: 0;
    color: inherit;
}

/* "Step X of Y" indicator (signup) */
.login-container .form-group:last-of-type {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ============================================================
   UTILITY CLASSES (kept from existing)
   ============================================================ */
.mt-1 {
    margin-top: 5px;
}

.mr-2 {
    margin-right: 10px;
}

.alert {
    transition: opacity 0.5s ease-out;
}
.alert.fade-out {
    opacity: 0;
    pointer-events: none;
}
.alertSml {
    padding: 5px;
}

/* ============================================================
   PRICING / PLANS PAGE (existing — kept, will be revisited in Phase 4)
   ============================================================ */
.pricing-container {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    padding: 40px 20px !important;
    width: 100% !important;
}

.pricing-box {
    background: #FFFFFF;
    border-radius: var(--radius-card);
    padding: 24px 20px;
    width: 240px;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.pricing-box .plan-highlights {
    flex: 1 1 auto;
}

.pricing-box .get-started {
    margin-top: auto;
}

.pricing-box .monthly-link {
    margin-top: 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

.pricing-box .monthly-link a {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
    display: inline-block;
    margin-top: 2px;
}

.pricing-box .monthly-link .save-text {
    color: var(--color-success);
    font-weight: var(--fw-medium);
}

.pricing-box .monthly-link a:hover {
    text-decoration: underline;
}

.pricing-box:hover {
    transform: translateY(-5px);
}

.pricing-box h2 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin: 0 0 12px;
    color: var(--text-primary);
    text-align: left;
}

.price {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: left;
}

.price span {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}

.price .small {
    font-size: var(--fs-sm);
    display: block;
    color: var(--text-muted);
}

.savings {
    display: inline-block;
    align-self: flex-start;
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
    padding: 3px 12px;
    border-radius: var(--radius-button);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: 16px;
}

.get-started {
    display: block;
    background: var(--color-primary);
    color: var(--text-inverse);
    padding: 10px 24px;
    border-radius: var(--radius-button);
    text-decoration: none;
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    margin: 16px 0 0;
    transition: background .15s ease;
    text-align: center;
}

.get-started:hover {
    background: var(--color-primary-hover);
    color: var(--text-inverse);
    text-decoration: none;
}

.plan-highlights {
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 16px;
}

.plan-highlights h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 10px;
    color: var(--text-primary);
}

.plan-highlights ul {
    padding-left: 0;
    list-style-type: none;
    margin: 0;
}

.plan-highlights ul li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 24px;
}

.plan-highlights ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: transparent;
    border: 1.5px solid var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
}

@media (max-width: 1200px) {
    .pricing-box {
        width: 260px;
    }
}

@media (max-width: 1280px) {
    .pricing-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
    }
    .pricing-box {
        width: 280px;
        max-width: 100%;
        /* No margin-left/right auto — that would push wrapped cards to the
           edges of the row, leaving a big gap in the middle. */
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .pricing-container {
        flex-direction: column;
        align-items: center;
    }
    .pricing-box {
        width: 100%;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   LOGIN BAR — top of dsp_home.cfm
   ============================================================ */
.login-bar {
    background: rgba(0, 0, 0, 0.25);
    padding: 12px 20px;
    text-align: right;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    font-family: var(--font-family);
}

.login-bar p {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--text-inverse);
}

.login-bar a {
    color: var(--blue-300);
    text-decoration: none;
    font-weight: var(--fw-medium);
    margin-left: 5px;
}

.login-bar a:hover {
    color: var(--blue-200);
    text-decoration: underline;
}