/* _content/ReadyRecruit.Web/Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* _content/ReadyRecruit.Web/Components/Account/Pages/Login.razor.rz.scp.css */
/* _content/ReadyRecruit.Web/Components/Account/Pages/LoginWith2fa.razor.rz.scp.css */
/* _content/ReadyRecruit.Web/Components/Account/Pages/ResetPassword.razor.rz.scp.css */
/* _content/ReadyRecruit.Web/Components/Account/Pages/Setup.razor.rz.scp.css */
/* Style for the header to remove negative margins */
.page-header-gradient[b-3kg17zswpl] {
    margin: -1.1rem -2rem 0 -2rem !important;
}

/* Style for the accordion items */
.accordion-item[b-3kg17zswpl] {
    margin-bottom: 1rem;
    border-radius: 0.5rem !important;
    border: 1px solid #dee2e6;
    overflow: hidden; /* This is key for the border-radius to work */
}

/* Style for the step-by-step guide text in the button */
.guide-step[b-3kg17zswpl] {
    background-color: var(--brand-blue);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    margin-right: 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.accordion-button[b-3kg17zswpl] {
    font-family: var(--bs-body-font-family);
    font-weight: 700; /* Bolder text for the accordion title */
    font-size: 1.1rem;
}

    .accordion-button:not(.collapsed)[b-3kg17zswpl] {
        color: var(--brand-blue);
        background-color: var(--bs-primary-bg-subtle);
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    }

.accordion-body[b-3kg17zswpl] {
    line-height: 1.6;
}

    .accordion-body h6[b-3kg17zswpl] {
        font-weight: 700;
        color: var(--bs-body-color);
    }
/* _content/ReadyRecruit.Web/Components/Account/Pages/UserManagement.razor.rz.scp.css */
/* Style is the same as .lead-card/avoding conflicts */
.user-card[b-im3v5s1kzh] {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.badge[b-im3v5s1kzh] {
    font-size: 0.8rem;
    padding: 0.4em 0.7em;
}
/* _content/ReadyRecruit.Web/Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/*
 * Styles for the segmented button group navigation.
*/

[b-5kxlbmiavk] .btn-group > .btn {
    /* Base style for all buttons in the group */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    /* This helps ensure the active button's border is always on top */
    position: relative;
}

    [b-5kxlbmiavk] .btn-group > .btn.active {
        /* Style for the ACTIVE button */
        background-color: var(--brand-blue, #0d6efd);
        border-color: var(--brand-blue, #0d6efd);
        color: #fff;
        /* A higher z-index ensures its borders aren't overlapped by adjacent buttons */
        z-index: 2;
        /* Add a subtle shadow to make it pop */
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25);
    }

    /* Optional: Add a subtle effect on hover for non-active buttons */
    [b-5kxlbmiavk] .btn-group > .btn:not(.active):hover {
        background-color: #e9ecef;
        z-index: 1;
    }
/* _content/ReadyRecruit.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-npgfyz33tw] {
    --sidebar-width-expanded: 260px;
    padding-left: var(--sidebar-width-expanded);
}

main[b-npgfyz33tw] {
    background-color: var(--bs-body-bg);
    min-height: 100vh;
}

.top-row[b-npgfyz33tw] {
    display: flex;
    align-items: center;
}

.mobile-logo img[b-npgfyz33tw] {
    max-height: 32px;
}

@keyframes fadeIn-and-slideUp-b-npgfyz33tw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main > article[b-npgfyz33tw] {
    animation: fadeIn-and-slideUp-b-npgfyz33tw 0.5s ease-out forwards;
}

@media (max-width: 991.98px) {
    .page[b-npgfyz33tw] {
        padding-left: 0;
    }

    .top-row[b-npgfyz33tw] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        height: 3.5rem;
        background-color: white;
        border-bottom: 1px solid #dee2e6;
    }

    main > article[b-npgfyz33tw] {
        padding-top: 4.5rem;
    }

    main[b-npgfyz33tw] {
        position: relative;
        z-index: 1;
    }
}


/* --- Style for the mobile navigation button --- */
.mobile-nav-toggle[b-npgfyz33tw] {
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1032;
}

    /* --- The Icon Swap Logic --- */

    /* By default, the 'X' icon is hidden */
    .mobile-nav-toggle .bi-x-lg[b-npgfyz33tw] {
        display: none;
    }

    /* When the button gets an 'is-open' class... */
    .mobile-nav-toggle.is-open .bi-list[b-npgfyz33tw] {
        display: none; /* ...hide the hamburger icon... */
    }

    .mobile-nav-toggle.is-open .bi-x-lg[b-npgfyz33tw] {
        display: block; /* ...and show the 'X' icon. */
    }
/* _content/ReadyRecruit.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar[b-zao575y4ml] {
    --sidebar-width-expanded: 260px;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1031;
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    padding: 1rem;
    width: var(--sidebar-width-expanded);
}

.sidebar-header[b-zao575y4ml] {
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

.logo-full[b-zao575y4ml] {
    display: inline-block;
}

    .logo-full img[b-zao575y4ml] {
        max-height: 40px;
        width: auto;
    }

.sidebar nav[b-zao575y4ml] {
    overflow-y: auto;
    min-height: 0;
}

.nav-item[b-zao575y4ml] {
    margin-bottom: 0.25rem;
}

.nav-link[b-zao575y4ml] {
    color: #495057;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

    .nav-link:not(.active):hover[b-zao575y4ml] {
        background-color: #f0f3f5;
        color: var(--brand-blue);
    }

    .nav-link .bi[b-zao575y4ml] {
        font-size: 1.2rem;
        width: 25px;
        text-align: center;
        margin-right: 1.25rem;
        transition: transform 0.2s ease-in-out;
    }

.sidebar-footer[b-zao575y4ml] {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
}

    .sidebar-footer hr[b-zao575y4ml] {
        display: none;
    }

.user-profile[b-zao575y4ml] {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.user-avatar[b-zao575y4ml] {
    background-color: var(--brand-blue);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 1rem;
}

.logout-link[b-zao575y4ml] {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: #495057;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
}

    .logout-link:hover[b-zao575y4ml] {
        background-color: #f8f9fa;
    }

.nav-text[b-zao575y4ml], .user-details[b-zao575y4ml], .footer-content[b-zao575y4ml] {
    opacity: 1;
}

.nav-link:not(.active):hover .bi[b-zao575y4ml] {
    transform: scale(1.2);
}

.nav-heading[b-zao575y4ml] {
    padding: 0.75rem 1rem 0.25rem 1.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-top: 1rem;
}

.user-name[b-zao575y4ml] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

@media (max-width: 991.98px) {
    .sidebar[b-zao575y4ml] {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

        .sidebar.open[b-zao575y4ml] {
            transform: translateX(0);
        }
}
/* _content/ReadyRecruit.Web/Components/Pages/Home.razor.rz.scp.css */
/* --- Re-using the Lead Card style --- */
.lead-card[b-rrp3x0ufuc] {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .lead-card:hover[b-rrp3x0ufuc] {
        transform: translateY(-4px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

/* --- Action Items Timeline --- */
.timeline-container[b-rrp3x0ufuc] {
    position: relative;
}

    .timeline-container[b-rrp3x0ufuc]::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #e9ecef;
    }

.timeline-item[b-rrp3x0ufuc] {
    position: relative;
    display: flex;
    align-items: flex-start;
    align-items: center;
    margin-bottom: 1.5rem;
}

.timeline-marker[b-rrp3x0ufuc] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    z-index: 2;
    margin-right: 1.5rem;
}

.timeline-content[b-rrp3x0ufuc] {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
    width: 100%;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

    .timeline-content:hover[b-rrp3x0ufuc] {
        transform: translateY(-2px);
        box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
    }

.timeline-link[b-rrp3x0ufuc] {
    font-weight: 500;
    color: #343a40;
    text-decoration: none;
}

    .timeline-link:hover[b-rrp3x0ufuc] {
        color: var(--brand-blue);
    }

.timeline-meta[b-rrp3x0ufuc] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* --- Chart Card Styles --- */
.chart-card[b-rrp3x0ufuc] {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    border-color: #dee2e6;
}


/* 
  ================================================================
  Responsive Scrolling for Hourly Chart
  ================================================================
*/

/* This wrapper provides the scrolling mechanism when needed. */
/*.time-chart-wrapper {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}*/

/* 
  The container now uses minmax() to define its columns.
  Each of the 24 bars will try to be flexible (1fr), but will REFUSE to shrink below 25px.
  This is the robust solution that allows scrolling.
*/
.time-chart-container[b-rrp3x0ufuc] {
    display: grid;
    grid-template-columns: repeat(24, 1fr); /* <-- MODIFIED LINE */
    align-items: flex-end;
    gap: 2px;
    height: 130px;
    width: 100%;
}

/* The rest of the bar chart styles */
.time-bar-group[b-rrp3x0ufuc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.time-bar[b-rrp3x0ufuc] {
    width: 100%;
    background-color: var(--bs-primary-bg-subtle2);
    border-radius: 2px;
    transition: background-color 0.2s ease-in-out;
    position: relative;
    transform-origin: bottom;
    animation: growBar-b-rrp3x0ufuc 1s ease-out forwards;
}

    .time-bar:hover[b-rrp3x0ufuc] {
        background-color: var(--brand-blue);
    }

.bar-label[b-rrp3x0ufuc] {
    font-size: clamp(0.4rem, 2.5vw, 0.6rem); /* <-- Add this line */
    color: #6c757d;
    margin-top: 0.25rem;
    white-space: nowrap;
}
    @media (max-width: 399px) {
        .bar-label[b-rrp3x0ufuc] {
            font-size: clamp(0.35rem, 2.5vw, 0.4rem); /* <-- Add this line */
        }
    }


@keyframes growBar-b-rrp3x0ufuc {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}


@media (max-width: 599px) {
    a.btn.btn-sm.btn-outline-primary[b-rrp3x0ufuc] {
        margin: 10px 0;
    }
}
/* _content/ReadyRecruit.Web/Components/Pages/Integrations/Integration.razor.rz.scp.css */
/* --- Base Card Style --- */
.integration-card[b-hdlyijweev] {
    /* The transition is now on all cards */
    transition: all 0.3s ease-in-out;
    border: 1px solid #dee2e6;
}

    /* --- THE NEW LOGIC: Gray out ONLY the disconnected cards --- */
    .integration-card.disconnected[b-hdlyijweev] {
        filter: grayscale(90%);
        opacity: 0.7;
    }

    /* On hover, all cards lift and get a blue border */
    .integration-card:hover[b-hdlyijweev] {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
        border-color: var(--brand-blue);
    }

    /* On hover, a disconnected card becomes full color */
    .integration-card.disconnected:hover[b-hdlyijweev] {
        filter: grayscale(0%);
        opacity: 1;
    }


/* --- The rest of the styles are unchanged --- */
.integration-header[b-hdlyijweev] {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .integration-header .card-title[b-hdlyijweev] {
        font-weight: 700;
        color: #343a40;
    }

.integration-logo-area[b-hdlyijweev] {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.integration-logo[b-hdlyijweev] {
    max-width: 240px;
    max-height: 100%;
    object-fit: contain;
}

.integration-description[b-hdlyijweev] {
    min-height: 70px;
}

.integration-footer[b-hdlyijweev] {
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.connection-status[b-hdlyijweev] {
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .connection-status .bi[b-hdlyijweev] {
        font-size: 1.1rem;
        margin-right: 0.25rem;
    }
/* _content/ReadyRecruit.Web/Components/Pages/Integrations/Manage.razor.rz.scp.css */
/*
  ================================================================
  STYLES FOR MANAGE INTEGRATIONS PAGE (manage.razor)
  ================================================================
*/

/* Style for the 'Download Fields' action card */
.action-card[b-aojkro22kv] {
    border: 1px solid var(--border-color); /* General border */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: var(--bs-body-bg); /* Match body background */
    border-radius: .5rem;
    overflow: hidden; /* Ensure button doesn't spill corners */
}

    .action-card:hover[b-aojkro22kv] {
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
        transform: translateY(-3px);
    }

    .action-card .btn[b-aojkro22kv] {
        border-radius: 0; /* Make button fill corners of the card-body */
        border: none; /* Remove button border to use card border */
        box-shadow: none; /* Remove button box shadow */
        font-weight: 700; /* Make text bolder */
    }

/* Base style for individual field cards */
.field-card[b-aojkro22kv] {
    border: 1px solid var(--border-color); /* General border for all cards */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: var(--bs-body-bg); /* Ensure card background matches body for consistency */
    border-radius: .5rem; /* Match other cards */
    overflow: hidden; /* Important for collected field highlight */
    padding: 1rem; /* Internal padding for card body */
}

    .field-card:hover[b-aojkro22kv] {
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
        transform: translateY(-3px);
    }

    /* Styling for 'Collect It' fields - NO LEFT BORDER. Use subtle background and full border. */
    .field-card.field-collected[b-aojkro22kv] {
        background-color: var(--bs-primary-bg-subtle); /* Use subtle primary background */
        border-color: var(--bs-primary); /* Border in the primary color */
        box-shadow: 0 0 0 1px var(--bs-primary); /* A subtle outline/glow */
    }
        /* If collected and hovered, make it pop a bit more */
        .field-card.field-collected:hover[b-aojkro22kv] {
            box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb),.15), 0 0 0 1px var(--bs-primary);
        }


/* Style for the badge that says "Required" or "Optional" */
.reqTag[b-aojkro22kv] {
    min-width: 70px; /* Give badges a consistent minimum width */
    text-align: center;
}

/* Specific styling for labels within form groups in this context */
.field-card .form-label[b-aojkro22kv] {
    font-weight: 500;
    margin-bottom: .25rem; /* Closer to the input */
    color: #6c757d; /* Muted label color */
}

/* Ensure form-check items align properly and have spacing */
.field-card .form-check[b-aojkro22kv] {
    margin-bottom: .5rem; /* Spacing between checkboxes */
}

/* Adjustments for default option in selects */
.form-control option[value=""][b-aojkro22kv] {
    color: #6c757d; /* Mute the 'Select...' option */
}

/* Additional style for form inputs within cards for better appearance */
.field-card .form-control[b-aojkro22kv],
.field-card .form-select[b-aojkro22kv] {
    border-color: #ced4da; /* Bootstrap default border color */
    box-shadow: none; /* Remove any default box-shadow */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .field-card .form-control:focus[b-aojkro22kv],
    .field-card .form-select:focus[b-aojkro22kv] {
        border-color: var(--brand-blue); /* Highlight focus with brand blue */
        box-shadow: 0 0 0 0.25rem rgba(var(--brand-blue-rgb), 0.25);
    }

/* Style for Bootstrap form-switch (toggle) */
.form-check.form-switch .form-check-input[b-aojkro22kv] {
    width: 2.5em; /* Standard switch width */
    height: 1.25em; /* Standard switch height */
    background-color: #ced4da; /* Default gray for off state */
    border-color: #ced4da; /* Default gray border */
    transition: background-position .15s ease-in-out; /* Add transition for thumb movement */
}

    .form-check.form-switch .form-check-input:checked[b-aojkro22kv] {
        background-color: var(--bs-primary); /* Primary color when checked */
        border-color: var(--bs-primary);
    }
/* _content/ReadyRecruit.Web/Components/Pages/Leads/Details.razor.rz.scp.css */
/* --- Page Layout --- */
.details-page-container[b-yb5olmw99w] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    height: calc(100vh - 100px);
}

.info-panel[b-yb5olmw99w] {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
}

.info-card[b-yb5olmw99w] {
    margin-bottom: 1rem;
}

.conversation-panel[b-yb5olmw99w] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.conversation-log[b-yb5olmw99w] {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1199px) {
    .details-page-container[b-yb5olmw99w] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .conversation-log[b-yb5olmw99w] {
        min-height: 500px;
    }
}

/*
  ================================================================
  MESSAGE BUBBLE COLOR STYLES
  ================================================================
*/

/* --- Base Message Bubble Styles --- */
.message-bubble[b-yb5olmw99w] {
    padding: 0.75rem 1.25rem;
    border-radius: 1.25rem;
    margin-bottom: 1rem;
    max-width: 80%;
}

    /* --- INBOUND (Lead's) Messages --- */
    .message-bubble.inbound[b-yb5olmw99w] {
        background-color: #e9ecef;
        align-self: flex-start;
        border-top-left-radius: 0.25rem;
        border-left: 5px solid transparent;
    }
    /* Color the BORDER and ICON to match the channel */
    .message-bubble.SMS .message-icon[b-yb5olmw99w] {
        color: var(--bs-success);
    }

    .message-bubble.SMS[b-yb5olmw99w] {
        border-left-color: var(--bs-success);
    }

    .message-bubble.Email .message-icon[b-yb5olmw99w] {
        color: var(--bs-warning);
    }

    .message-bubble.Email[b-yb5olmw99w] {
        border-left-color: var(--bs-warning);
    }

    .message-bubble.Phone .message-icon[b-yb5olmw99w] {
        color: var(--brand-purple);
    }

    .message-bubble.Phone[b-yb5olmw99w] {
        border-left-color: var(--brand-purple);
    }

    .message-bubble.Chat .message-icon[b-yb5olmw99w] {
        color: var(--bs-primary);
    }

    .message-bubble.Chat[b-yb5olmw99w] {
        border-left-color: var(--bs-primary);
    }

    .message-bubble.inbound .message-text[b-yb5olmw99w] {
        color: #212529;
    }


    /* --- OUTBOUND (Your) Messages --- */
    .message-bubble.outbound[b-yb5olmw99w] {
        align-self: flex-end;
        border-top-right-radius: 0.25rem;
    }
        /* Outbound SMS */
        .message-bubble.outbound.SMS[b-yb5olmw99w] {
            background-color: var(--bs-success-bg-subtle);
            border: 1px solid var(--bs-success-border-subtle);
            border-right: 5px solid var(--bs-success);
        }

            .message-bubble.outbound.SMS .message-icon[b-yb5olmw99w],
            .message-bubble.outbound.SMS .message-text[b-yb5olmw99w] {
                color: var(--bs-success-text-emphasis);
            }

        /* Outbound Email */
        .message-bubble.outbound.Email[b-yb5olmw99w] {
            background-color: var(--bs-warning-light);
            border: 1px solid var(--bs-warning);
            border-right: 5px solid var(--bs-warning);
        }

            .message-bubble.outbound.Email .message-icon[b-yb5olmw99w],
            .message-bubble.outbound.Email .message-text[b-yb5olmw99w] {
                color: var(--bs-warning-text-emphasis);
            }

        /* Outbound Phone */
        .message-bubble.outbound.Phone[b-yb5olmw99w] {
            background-color: var(--brand-purple-bg-subtle);
            border: 1px solid var(--brand-purple-border-subtle);
            border-right: 5px solid var(--brand-purple);
        }

            .message-bubble.outbound.Phone .message-icon[b-yb5olmw99w],
            .message-bubble.outbound.Phone .message-text[b-yb5olmw99w] {
                color: var(--brand-purple-text-emphasis);
            }

        /* Outbound Chat */
        .message-bubble.outbound.Chat[b-yb5olmw99w] {
            background-color: var(--bs-primary-bg-subtle);
            border: 1px solid var(--bs-primary-border-subtle);
            border-right: 5px solid var(--bs-primary);
        }

            .message-bubble.outbound.Chat .message-icon[b-yb5olmw99w],
            .message-bubble.outbound.Chat .message-text[b-yb5olmw99w] {
                color: var(--bs-primary-text-emphasis);
            }

/*
  ================================================================
  FILTER BUTTON ACTIVE STYLES (Unchanged)
  ================================================================
*/
.filter-controls .btn.all.active[b-yb5olmw99w] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.filter-controls .btn.sms[b-yb5olmw99w] {
    color: var(--bs-success);
}

    .filter-controls .btn.sms.active[b-yb5olmw99w] {
        background-color: var(--bs-success);
        border-color: var(--bs-success);
    }

.filter-controls .btn.email[b-yb5olmw99w] {
    color: var(--bs-warning);
}

    .filter-controls .btn.email.active[b-yb5olmw99w] {
        background-color: var(--bs-warning);
        border-color: var(--bs-warning);
    }

.filter-controls .btn.phone[b-yb5olmw99w] {
    color: var(--brand-purple);
}

    .filter-controls .btn.phone.active[b-yb5olmw99w] {
        background-color: var(--brand-purple);
        border-color: var(--brand-purple);
    }

.filter-controls .btn.chat[b-yb5olmw99w] {
    color: var(--bs-primary);
}

    .filter-controls .btn.chat.active[b-yb5olmw99w] {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

.filter-controls .btn.active[b-yb5olmw99w], .filter-controls .btn:hover[b-yb5olmw99w] {
    color: #ffffff;
}

/*
  ================================================================
  MESSAGE CONTENT & SUPPORTING STYLES
  ================================================================
*/

.message-content[b-yb5olmw99w] {
    display: flex;
    align-items: flex-start;
}

.message-icon[b-yb5olmw99w] {
    font-size: 1.1rem;
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.message-text[b-yb5olmw99w] {
    flex-grow: 1;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-timestamp[b-yb5olmw99w] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
}

.message-bubble.inbound .message-timestamp[b-yb5olmw99w] {
    justify-content: flex-start;
    margin-left: calc(1.1rem + 0.75rem);
}

.message-bubble.outbound .message-timestamp[b-yb5olmw99w] {
    justify-content: flex-end;
}

.message-bubble.outbound .message-timestamp[b-yb5olmw99w] {
    color: #6c757d;
}

.save-status[b-yb5olmw99w] {
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

.status-typing[b-yb5olmw99w] {
    color: #6c757d;
}

.status-saving[b-yb5olmw99w] {
    color: var(--brand-blue);
}

    .status-saving .bi-arrow-repeat[b-yb5olmw99w] {
        animation: spin-b-yb5olmw99w 1s linear infinite;
    }

.status-saved[b-yb5olmw99w] {
    color: var(--bs-success);
}

@keyframes spin-b-yb5olmw99w {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*
  ================================================================
  NEW & UPDATED STYLES FOR ADDED FEATURES
  ================================================================
*/

.clickable-flag[b-yb5olmw99w] {
    cursor: pointer;
    font-size: 0.9rem;
    vertical-align: middle;
    margin-right: 0.3rem;
}

.flag-green[b-yb5olmw99w] {
    color: var(--bs-success);
}

.flag-yellow[b-yb5olmw99w] {
    color: var(--bs-warning);
}

.flag-grey[b-yb5olmw99w] {
    color: var(--bs-dark);
}

.flag-red[b-yb5olmw99w] {
    color: var(--bs-danger);
}

.modal-message-text[b-yb5olmw99w] {
    max-height: 150px;
    overflow-y: auto;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
  ================================================================
  MESSAGE EXPANSION
  ================================================================
*/

.message-text-wrapper[b-yb5olmw99w] {
    width: 100%;
}

.message-text[b-yb5olmw99w] {
    /* These properties are required for line-clamp to work. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds the "..." */
}

    /* This class is applied to the text of a long message when it is collapsed */
    .message-text.collapsed[b-yb5olmw99w] {
        /* Truncate the text after 3, 4 etc. lines; also change # in details.razor */
        -webkit-line-clamp: 4;
    }

/* Styling for the "(see more)" and "(see less)" link */
.toggle-expansion-link[b-yb5olmw99w] {
    display: block;
    text-align: left;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 5px;
    color: #0d6efd; 
    text-decoration: none;
    cursor: pointer;
}

    .toggle-expansion-link:hover[b-yb5olmw99w] {
        text-decoration: underline;
    }
/* _content/ReadyRecruit.Web/Components/Pages/Leads/List.razor.rz.scp.css */
/* Style for the clean, white "card" for each lead */
.lead-card[b-20ht410ztd] {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    color: #495057;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .lead-card:hover[b-20ht410ztd] {
        transform: translateY(-4px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

.label[b-20ht410ztd] {
    font-weight: bold;
    color: #6c757d;
    margin-right: 0.5rem;
}

@media (max-width: 767.98px) {
    .lead-card .col-md-2[b-20ht410ztd] {
        margin-top: 1rem;
    }

    .lead-card .btn[b-20ht410ztd] {
        margin-top: 15px;
        width: 100%;
    }
}

.lead-meta-data[b-20ht410ztd] {
    font-size: 0.9rem;
    color: #6c757d;
}

.meta-label[b-20ht410ztd] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #adb5bd;

.meta-value {
    font-weight: 500;
    color: #495057;
}

.status-active[b-20ht410ztd] {
    color: var(--bs-success);
    font-weight: 700;
}

.status-new[b-20ht410ztd] {
    color: var(--bs-primary);
    font-weight: 700;
}

.status-contacted[b-20ht410ztd] {
    color: var(--bs-info);
}

.status-closed[b-20ht410ztd] {
    color: var(--bs-secondary);
    text-decoration: line-through;
}
/* _content/ReadyRecruit.Web/Components/Pages/OptInStatus.razor.rz.scp.css */
body[b-w86u8t89up] {
}
/* _content/ReadyRecruit.Web/Components/Pages/Testing/ExampleChat.razor.rz.scp.css */
/* Styles specifically for the ExampleChat.razor component */

.conversation-panel[b-18zzywekwp] {
    display: flex;
    flex-direction: column;
    /* We can remove the height: 100% as it's not needed in this simpler layout */
}

.conversation-log[b-18zzywekwp] {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #dee2e6;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 500px; /* Good for responsive layout */
}

/* Base style for all message bubbles */
.message-bubble[b-18zzywekwp] {
    padding: 0.75rem 1.25rem;
    border-radius: 1.25rem;
    margin-bottom: 1rem;
    max-width: 80%;
}

    /* --- INBOUND (User's) Messages --- */
    .message-bubble.inbound[b-18zzywekwp] {
        background-color: #e9ecef;
        align-self: flex-start; /* Aligns to the left */
        border-top-left-radius: 0.25rem;
        border-left: 5px solid var(--bs-primary); /* Use the 'Chat' color */
    }

        .message-bubble.inbound.Chat .message-icon[b-18zzywekwp] {
            color: var(--bs-primary);
        }

        .message-bubble.inbound .message-text[b-18zzywekwp] {
            color: #212529;
        }

    /* --- OUTBOUND (AI's) Messages --- */
    .message-bubble.outbound[b-18zzywekwp] {
        align-self: flex-end; /* Aligns to the right */
        border-top-right-radius: 0.25rem;
    }

        /* We only need the 'Chat' specific outbound style */
        .message-bubble.outbound.Chat[b-18zzywekwp] {
            background-color: var(--bs-primary-bg-subtle);
            border: 1px solid var(--bs-primary-border-subtle);
            border-right: 5px solid var(--bs-primary);
        }

            .message-bubble.outbound.Chat .message-icon[b-18zzywekwp],
            .message-bubble.outbound.Chat .message-text[b-18zzywekwp] {
                color: var(--bs-primary-text-emphasis);
            }

/* --- Message Content & Supporting Styles --- */
.message-content[b-18zzywekwp] {
    display: flex;
    align-items: flex-start;
}

.message-icon[b-18zzywekwp] {
    font-size: 1.1rem;
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.message-text[b-18zzywekwp] {
    flex-grow: 1;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-timestamp[b-18zzywekwp] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
}

.message-bubble.inbound .message-timestamp[b-18zzywekwp] {
    justify-content: flex-start;
    margin-left: calc(1.1rem + 0.75rem);
}

.message-bubble.outbound .message-timestamp[b-18zzywekwp] {
    justify-content: flex-end;
}