html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
}
/*Set text for site*/
html, body {
    font-family: Helvetica, Arial, sans-serif, 'Times New Roman';
}
/* Fixed Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 56px;
    width: 100%;
    z-index: 1030;
    background-color: #003466 !important;
    border-bottom: 3px solid #6e7e85;
}
/*To control the padding in the splitter*/
.dxbl-splitter-pane-content {
    padding: 0 !important;
}
/*END padding in the splitter*/
/* Main content full width and scrollable */
.main-content {
    margin-top: 56px;
}

/* Override Bootstrap 5 btn-primary — must set CSS variables AND properties.
   The DevExpress Purple theme drives colors via --bs-btn-* variables; overriding
   only background-color leaves those variables intact and the theme can still win.
   Higher specificity (body .btn-primary) ensures this beats the theme's selectors. */
body .btn-primary, .dxbl-btn-standalone.dxbl-btn-primary, .dxbl-checkbox-check-element, .dxbl-btn-standalone,
.btn-primary {
    --bs-btn-bg: #003466;
    --bs-btn-border-color: #003466;
    --bs-btn-hover-bg: #002450;
    --bs-btn-hover-border-color: #002450;
    --bs-btn-active-bg: #002450;
    --bs-btn-active-border-color: #002450;
    background-color: #003466 !important;
    border-color: #003466 !important;
    color: #fff !important;
    accent-color: #003466;
}
.dxbl-btn-secondary {
    background-color: white !important;
    color: Black !important;
}

a, .btn-link {
    color: #006bb7;
    
}


.text-primary {
    color: #003466 !important;
}

/* Strength of Corrective Action Plan value — CapPlan.razor.
   Boxed badge so the auto-populated tier (Stronger / Intermediate / Weaker
   Actions) reads as a result rather than ordinary body text.
   Accessibility: the tier is conveyed by the wording itself, never by colour
   alone (WCAG 1.4.1). #003466 on #e7eef5 measures ~10.7:1, well past the
   4.5:1 AA floor (1.4.3), and the 2px navy border clears 3:1 for non-text
   contrast (1.4.11). Sized in rem so it scales with browser text zoom.
   Explicit #003466 rather than Bootstrap's border-primary — app.css overrides
   .text-primary and the button variables, but not the global --bs-primary. */
.cap-strength-badge {
    display: inline-block;
    padding: .35rem .75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #003466;
    background-color: #e7eef5;
    border: 2px solid #003466;
    border-radius: .375rem;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.dropdown-header {
    background-color: #003f62 !important;
    color: #ffffff !important;
    padding: 5px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
/*    CSS Ovverrides */
/*    top nav */
.nav-link {
    color: #ffffff !important;
}

    .nav-link:hover {
        text-decoration: underline;
    }
/**    this is for long text on the devexpress DxFormLayout */
.padding-left-12 {
    padding-left: 12px;
    padding-top: 15px;
}
/**    this is to override Devexpress when there is a label inside <template> on a <DxFormLayoutItem> */
.my-fi .dxbl-fl-ctrl.dxbl-fl-ctrl-nc {
    margin-top: 0px !important;
}

.myMargin {
    margin: 0px;
    padding: 0px;
    border: 0px;
    vertical-align: baseline;
}

/* Shrinks the Event Status pie chart legend so ~10 items (incl. closed / not reportable)
   don't tower over the small pie next to it */
.event-status-chart-legend {
    font-size: 0.6rem;
}
.event-status-chart-legend .dxbl-chart-legend-item {
    margin-bottom: 0;
    padding: 0;
}
.event-status-chart-legend .dxbl-chart-legend-marker {
    width: 7px;
    height: 7px;
}
/* DevExpress renders legend labels as SVG text in some versions — size those too */
.event-status-chart-legend text {
    font-size: 9px;
}

.my-NavBar {
    background-color: #003466 !important;
    color: #ffffff !important;
    border: none !important;
}

/* UAT-only navbar override — lighter gray so testers can't mistake UAT for Production.
   Applied by TopNav.razor only when ASPNETCORE_ENVIRONMENT=UAT. */
.my-NavBar-uat {
    background-color: #495057 !important; /* dark gray vs. production #003466 navy */
}

/* UAT-only header strip override — the fixed .header bar behind the navbar stays
   navy otherwise. Applied by the layouts only when ASPNETCORE_ENVIRONMENT=UAT. */
.header-uat {
    background-color: #495057 !important;
}

/* UAT-only "TEST" label rendered beside the logo in the navbar title */
.uat-test-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    margin-left: 1rem;
    vertical-align: middle;
}

/* Vertically centers the search/logout DxMenuItem content in the navbar */
.search-menu-item {
    display: flex !important;
    align-items: center !important;
}

/* Nudges the Logout button up to align with the text nav items */
.logout-menu-item {
    margin-top: -5px !important;
}

/* Gap between the search box and the Logout button */
.nav-fts-box {
    margin-right: 12px;
}

/* Nav search box — blends into the #003466 navy navbar */
.nav-fts-box input.form-control {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.85rem;
    height: 30px;
    min-width: 160px !important;
    border-radius: 4px;
}

.nav-fts-box input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.nav-fts-box input.form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
    color: #ffffff;
    outline: none;
}

.nav-fts-box button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    height: 30px;
    padding: 0 8px;
    border-radius: 4px;
    line-height: 1;
}

.nav-fts-box button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

/**Causes arrow on menu to slightly move on hover*/
.my-link img {
    transition: transform 0.2s !important;
}

.my-link:hover img {
    transform: translateX(2px) !important;
}

.dxbl-drawer {
    --dxbl-drawer-content-shading-bg: none !important;
}

.btn {
    border-radius: 5px !important;
}
/*Selected menu item*/
.selected-menu-item {
    /* pick colors that fit your theme */
    background-color: #e9edf6 !important;
}
/* Hover effect */
.CtrlSearchWidth {
    max-width: 350px !important;
    width: 300px !important;
    min-width: 100px !important;
}

.CtrlMinMaxWidth {
    max-width: 300px !important;
    min-width: 100px !important;
}

.SmallCtrlMinMaxWidth {
    max-width: 125px !important;
    min-width: 75px !important;
}

.LongCtrlMinMaxWidth {
    max-width: 600px !important;
    min-width: 200px !important;
}

.TextBoxMinMaxWidth {
    max-width: 500px !important;
    min-width: 150px !important;
}

.SmallerTextBoxMinMaxWidth {
    max-width: 300px !important;
    min-width: 100px !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    vertical-align: top !important;
}

.SideMenuHeader {
    text-align: center;
    font-weight: bold;
    border-bottom: 3px solid #6e7e85;
    color: #003466;
}

/* Event ID badge — always-visible Event ID shown at the top of the left pane on
   MainEventPage and ReviewPage (see Features/Shared/EventIdBadge.razor).
   Matches the SideMenuHeader palette but with a filled background so it stands out. */
.event-id-badge {
    display: inline-block;
    background-color: #eef3f8;
    border: 1px solid #6e7e85;
    border-radius: 4px;
    color: #003466;
    font-weight: bold;
    padding: 2px 10px;
    margin: 6px 4px;
    white-space: nowrap;
}

    /* The number itself gets a small size bump so it's readable at a glance */
    .event-id-badge .event-id-badge-number {
        font-size: 1.1em;
    }

/* ========================================
   DASHBOARD STYLES
   ========================================
   These styles are specifically for the Dashboard.razor component
   located at /Features/Reports/Dashboard.razor
   
   Includes:
   - Dashboard container layout with sidebar and main area
   - Sidebar styling for dashboard navigation
   - Dashboard toolbar and controls
   - Responsive design for dashboard viewing
   - Role-based UI elements (SiteAdmin features)
   ======================================== */

/* Sidebar header with title and New button */
.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sidebar-header h4 {
        margin: 0;
        color: #495057;
    }

/* Dashboard list styling */
.dashboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual dashboard items */
.dashboard-item {
    border-bottom: 1px solid #e9ecef;
}

    .dashboard-item a {
        display: block;
        padding: 5px;
        text-decoration: none;
        color: #495057;
        transition: background-color 0.2s;
    }

        .dashboard-item a:hover {
            background-color: #e9ecef;
            text-decoration: none;
            color: #495057;
        }

    /* Active/selected dashboard item */
    .dashboard-item.active a {
        background-color: #e9edf6;
        color: black;
    }

        .dashboard-item.active a:hover {
            background-color: #0056b3;
            color: white;
        }

/* Dashboard name styling */
.dashboard-name {
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Last modified date styling */
.dashboard-item small {
    display: block;
    margin-top: 0.25rem;
    margin-left: 1.5rem;
    font-size: 0.75rem;
}

.dashboard-item.active small {
    color: rgba(255, 255, 255, 0.8);
}

/* Empty state when no dashboards exist */
.no-dashboards {
    padding: 2rem 1rem;
    text-align: center;
}

/* Placeholder shown when no dashboard is selected */
.dashboard-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.placeholder-content {
    text-align: center;
}

/* End of Dashboard Styles */

.AccordHeader {
    text-align: center !important;
    font-weight: bold !important;
    border-bottom: 3px solid #6e7e85 !important;
    color: #003466 !important;
    background-color: #f8f9fa !important;
}

.SendToReporterButtonPad {
    padding: 20px !important;
    height: 150px !important;
}

canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}
/*Css for descriptions returned from event types and lookup maintenace*/
.group-description-highlight {
    background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);
    border: 2px solid #2196f3;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
    align-items: center;
    font-size: 1.1em;
    color: #1565c0;
    transition: all 0.3s ease;
}

    .group-description-highlight:hover {
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.25);
    }

    .group-description-highlight i {
        color: #2196f3;
        font-size: 1.2em;
    }

    .group-description-highlight strong {
        color: #0d47a1;
        font-weight: 600;
    }
/*END Css for descriptions returned from event types and lookup maintenace*/

/* ===== Print styles — only show #printable-event-content ===== */
@media print {
    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    /* Show only the printable content and its children */
    #printable-event-content,
    #printable-event-content * {
        visibility: visible;
    }

    /* Position printable content at top-left, full width */
    #printable-event-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        overflow: visible !important;
        height: auto !important;
    }

    /* Hide elements marked as no-print (e.g., print button) */
    .no-print {
        display: none !important;
    }

    /* Remove splitter constraints for print */
    .dxbl-splitter, .dxbl-splitter-pane {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Allow page breaks inside content */
    html, body {
        overflow: visible !important;
        height: auto !important;
    }

    /* Hide the fixed header during print */
    .header {
        display: none !important;
    }
}
/* ===== End Print styles ===== */

/* ===== Print Comments — the copy printed from its own frame (printElementAsShown) =====
   The rules above print the event form and hide everything else. Print Comments prints a
   separate copy of the comments panel, so on that copy those rules have to be undone. Every
   rule here is tied to the class on that copy's <html>, so none of it reaches the live page. */
.print-element-document body {
    margin: 0;
    padding: 0 .25in;
    background-color: #fff;
}

.print-element-title {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: #002f5f;
}

@media print {
    /* Undo "body * { visibility: hidden }" from the event print rules. */
    .print-element-document body * {
        visibility: visible;
    }

    /* Browsers drop background colours when printing unless told not to. The Field bars and
       the badges are carried by their backgrounds, so without this they print blank. */
    .print-element-document * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep each comment on one page, and keep a Field bar or heading with what follows it. */
    .print-element-document .comment-card {
        break-inside: avoid;
    }

    .print-element-document .comment-group-label,
    .print-element-document .comment-section-heading {
        break-after: avoid;
    }
}
/* ===== End Print Comments ===== */


/*Form Header ovverride*/
.dxbl-group-header {
    background-color: #003466 !important;
    color: white !important;
}

.dxbl-group-header-color {
    color: white !important;
}
/*END Form Header ovverride*/

/* ── DxPopup header — match app blue ──────────────────────────────────────── */
.dxbl-popup-header {
    background-color: #003466 !important;
    color: #ffffff !important;
    border-bottom: 3px solid #6e7e85 !important;
}
    /* Force white on all child text elements — DevExpress sets color on inner spans directly */
    .dxbl-popup-header,
    .dxbl-popup-header * {
        color: #ffffff !important;
    }

        /* Close / drag icon inside the popup header */
        .dxbl-popup-header .dxbl-btn,
        .dxbl-popup-header .dxbl-image {
            color: #ffffff !important;
            filter: brightness(10);
        }
/* ── END DxPopup header ────────────────────────────────────────────────────── */
/*Time edit ovverride*/
/* Add to your component's <style> or a shared CSS file */
/* Scope with ::deep if inside a Blazor component */

button[title="Now"] {
    display: none !important;
}
/*End Time edit ovverride*/

/* ── Contributing Factor custom scroll panel (RootCauseMainPage.razor) ─────
   Replaces DxListBox with a plain scrollable div so the sticky column header
   and the item rows share the exact same container width — no scrollbar-offset
   misalignment is possible regardless of viewport size or OS scrollbar width. */

/* Scrollable container — fixed height, vertical scroll only */
.rc-cf-scroll-panel {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* Sticky column header — stays pinned to the top of the scroll panel */
.rc-cf-col-header {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    border-bottom: 2px solid #dee2e6;
    padding: 6px 8px;
}

/* Category group label */
.rc-cf-group-header {
    padding: 4px 8px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Individual item row */
.rc-cf-row {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
}

    .rc-cf-row:hover {
        background: #f5f5f5;
    }
/* ── RootCauseRead contributing factor read-only panel (RootCauseRead.razor) ─
   Displays only the selected contributing factor items grouped by category.
   Mirrors the visual structure of rc-cf-scroll-panel but as a static list. */

/* Container — no fixed height needed; content determines height */
.rc-cf-read-panel {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 0;
}

/* Category group label */
.rc-cf-read-group-header {
    padding: 4px 8px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.rc-cf-read-panel > .rc-cf-read-group-header:first-child {
    border-top: none;
}

/* Individual selected item row */
.rc-cf-read-row {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
}

    .rc-cf-read-row:last-child {
        border-bottom: none;
    }

/* Checkmark icon color — matches Contributing checkbox blue */
.rc-cf-check {
    color: #0d6efd;
    font-size: 0.85rem;
}
/*    End CSS Ovverrides */

/* ============================================================
   Helpdesk Widget & Chat Styles
   ============================================================ */

/* ── Clipboard paste zone ─────────────────────────────────────────────────── */
.helpdesk-paste-zone {
    border: 2px dashed #ced4da;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, background-color 0.15s;
    outline: none;
    user-select: none;
}

    .helpdesk-paste-zone:focus {
        border-color: #0d6efd;
        background-color: #f0f6ff;
        color: #0d6efd;
    }

.helpdesk-paste-zone--filled {
    border-color: #198754;
    background-color: #f0faf3;
    color: #198754;
}

/* ── ACS calling panel ────────────────────────────────────────────────────── */
.helpdesk-call-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 6px;
    text-align: center;
}

/* Animated red dot indicating an active call */
.helpdesk-call-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #dc3545;
    border-radius: 50%;
    margin-right: 6px;
    animation: helpdesk-pulse 1.2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes helpdesk-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.helpdesk-call-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: #856404;
}

/* ── Escalation options panel ─────────────────────────────────────────────── */
.helpdesk-escalate-options {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 6px;
    text-align: center;
}

.helpdesk-escalate-prompt {
    font-size: 0.82rem;
    color: #495057;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Floating widget container */
.helpdesk-widget {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 1050;
}

/* Chat bubble button — cursor:grab hints that it can be dragged vertically */
.helpdesk-bubble-btn {
    width: 90px;
    height: 75px;
    border-radius: 30%;
    background-color: #003466;
    color: #fff;
    border: none;
    font-size: 1.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    cursor: grab;
    position: relative;
    transition: background-color 0.2s;
}

    .helpdesk-bubble-btn:hover {
        background-color: #005aad;
    }

/* Unread count badge on bubble */
.helpdesk-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Widget chat panel */
.helpdesk-chat-panel {
    width: 380px;
    height: 520px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Smooth resize transition when toggling expanded state */
    transition: width 0.2s ease, height 0.2s ease;
}

/* Expanded state — larger panel, still anchored to bottom-right */
.helpdesk-chat-panel--expanded {
    width: min(600px, calc(100vw - 48px));
    height: min(760px, calc(100vh - 48px));
}

/* Compact panel when chat UI is hidden — auto-height sizes to header + buttons only */
.helpdesk-chat-panel--no-chat {
    height: auto;
}

/* Chat header */
.helpdesk-chat-header {
    background-color: #003466;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.helpdesk-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}

    .helpdesk-close-btn:hover {
        color: #fff;
    }

/* Message list scrollable area */
.helpdesk-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual message row */
.helpdesk-msg {
    display: flex;
}

.helpdesk-msg-user {
    justify-content: flex-end;
}

.helpdesk-msg-bot {
    justify-content: flex-start;
}

/* Message bubble */
.helpdesk-msg-bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.helpdesk-msg-user .helpdesk-msg-bubble {
    background-color: #003466;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.helpdesk-msg-bot .helpdesk-msg-bubble {
    background-color: #f0f2f5;
    color: #212529;
    border-bottom-left-radius: 4px;
}

/* Admin reply bubble (used on page and transcript) */
.helpdesk-msg-admin .helpdesk-msg-bubble {
    background-color: #fff3cd;
    color: #212529;
    border-bottom-left-radius: 4px;
}

.helpdesk-admin-label {
    font-size: 0.72rem;
    color: #856404;
    margin-top: 2px;
}

/* Thinking/typing indicator */
.helpdesk-thinking {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 10px 14px;
}

    .helpdesk-thinking span {
        width: 7px;
        height: 7px;
        background-color: #adb5bd;
        border-radius: 50%;
        display: inline-block;
        animation: helpdesk-bounce 1.2s infinite ease-in-out;
    }

        .helpdesk-thinking span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .helpdesk-thinking span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes helpdesk-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Escalation banner */
.helpdesk-escalated-banner {
    background-color: #fff3cd;
    border-top: 1px solid #ffc107;
    color: #664d03;
    padding: 8px 14px;
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* Widget input area */
.helpdesk-input-area {
    border-top: 1px solid #dee2e6;
    padding: 10px;
    flex-shrink: 0;
}

.helpdesk-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.helpdesk-input {
    flex: 1;
    resize: none;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.87rem;
    outline: none;
    transition: border-color 0.15s;
}

    .helpdesk-input:focus {
        border-color: #003466;
    }

.helpdesk-send-btn {
    background-color: #003466;
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .helpdesk-send-btn:disabled {
        background-color: #adb5bd;
        cursor: not-allowed;
    }

    .helpdesk-send-btn:hover:not(:disabled) {
        background-color: #005aad;
    }

.helpdesk-escalate-btn {
    width: 100%;
    margin-top: 6px;
    background: none;
    border: 1px solid #ffc107;
    color: #856404;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
}

    .helpdesk-escalate-btn:hover:not(:disabled) {
        background-color: #fff3cd;
    }

/* ── Helpdesk Page (full-page layout) ── */

.helpdesk-page {
    display: flex;
    height: calc(100vh - 90px);
    gap: 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.helpdesk-page-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    padding: 16px;
    background-color: #f8f9fa;
}

.helpdesk-sidebar-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.helpdesk-ticket-item {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 6px;
    border: 1px solid transparent;
    transition: background-color 0.15s;
}

    .helpdesk-ticket-item:hover {
        background-color: #e9ecef;
    }

    .helpdesk-ticket-item.active {
        background-color: #dbeafe;
        border-color: #93c5fd;
    }

.helpdesk-ticket-subject {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212529;
}

.helpdesk-ticket-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.helpdesk-page-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px 0;
}

    /* Ensure nav-tabs inside the chat panel are never clipped */
    .helpdesk-page-chat .nav-tabs {
        flex-shrink: 0;
        margin-bottom: 12px !important;
    }

.helpdesk-page-chat-header {
    padding: 14px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background-color: #fff;
}

.helpdesk-page-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.helpdesk-msg-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 3px;
    font-weight: 600;
}

.helpdesk-page-input-area {
    padding: 16px 20px;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
    background-color: #fff;
}

.helpdesk-page-input {
    font-size: 0.9rem;
    resize: none;
}

/* Admin transcript panel */
.helpdesk-admin-transcript {
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

    /* In the admin transcript, stack label above bubble (column) so the date never overlaps.
   Align user messages to the right, bot/admin to the left. */
    .helpdesk-admin-transcript .helpdesk-msg {
        flex-direction: column;
    }

    .helpdesk-admin-transcript .helpdesk-msg-user {
        align-items: flex-end;
    }

    .helpdesk-admin-transcript .helpdesk-msg-bot,
    .helpdesk-admin-transcript .helpdesk-msg-admin {
        align-items: flex-start;
    }

    /* Slightly smaller font in the transcript so long messages don't dominate the panel */
    .helpdesk-admin-transcript .helpdesk-msg-bubble {
        font-size: 0.82rem;
    }

/* ── Helpdesk admin grid: the row whose transcript is open below ──────────────
   Applied by CustomizeElement on both the ticket and chat grids. The left bar
   plus tint reads clearly against DevExpress's own hover/focus row styling. */
.helpdesk-row-selected td {
    background-color: #e7f1ff !important;
    font-weight: 500;
}

    .helpdesk-row-selected td:first-child {
        box-shadow: inset 3px 0 0 0 #0d6efd;
    }

/* ── Helpdesk page placeholder — shown when no ticket is selected and no form is active ── */
.helpdesk-page-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
}

/* ── TicketDetail shared component — consistent dl list for all ticket detail fields ── */
.helpdesk-ticket-detail {
    border: none;
    box-shadow: none;
}

.helpdesk-ticket-detail .card-body {
    background-color: #f8f9fa;
}

.helpdesk-ticket-detail-list dt,
.helpdesk-ticket-detail-list dd {
    font-size: 0.9rem;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 0;
    border-bottom: 1px solid #dee2e6;
}

.helpdesk-ticket-detail-list dt {
    font-weight: 600;
    color: #495057;
}

/* ── RCA Specific checklist — replaces DxListBox to fix unlabeled checkbox inputs ──
   Matches the visual style of DxListBox with ShowCheckboxes: bordered container,
   per-item rows with hover highlight, and consistent padding. */
.rca-specific-checklist {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    max-width: 400px;
}

.rca-specific-checklist-item {
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
}

    .rca-specific-checklist-item:last-child {
        border-bottom: none;
    }

    .rca-specific-checklist-item:hover {
        background-color: #f5f5f5;
    }
/* --- End RCA Specific checklist****************************** */

/* --- DxTabs tab text contrast fix ******
   The DevExpress Purple theme renders tab labels in a light purple that fails
   WCAG AA contrast (3.07:1) against the white background. The text lives in
   span.dxbl-tabs-text-overflow inside the dxbl-tab-item custom element — there
   is no nav-link wrapper in the DOM, so the selector must target the span directly. */
span.dxbl-tabs-text-overflow {
    color: #003466 !important;
}

.user-edit-form {
    min-width: 800px;
    max-width: 1200px;
}
/*--- Manage the color on the logout button home page text contrast fix */
.btn-outline-primary {
    --bs-btn-color: #003466 !important;
    --bs-btn-border-color: #003466 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #003466 !important;
    --bs-btn-hover-border-color: #003466 !important;
}
.badgeTextColor {
    color: #000 !important;
}
/*--Fix: Replace style="display:none" on the <InputFile> with a CSS class that visually hides it but keeps it in the DOM and accessible:---*/
.visually-hidden-input {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/*The placeholder text 'Search by Event ID or IDPH ID' has a color contrast below the required 4.5:1. 
    The current color contrast is 4.1:1. Recommend updating the text to #6E6E6E, which will bring the color contrast up to 4.6:1.*/
.dxbl-text-input::placeholder {
    color: #6E6E6E !important;
}

/* P3-#7: Selected item in Event Types listbox had contrast 2.7:1 (purple bg + white text).
   DevTools confirmed the actual class is dxbl-list-box-item-selected.
   #495FFE brings contrast up to 4.8:1. */
.dxbl-list-box-item-selected {
    background-color: #495FFE !important;
}

/* Remove pointer cursor from the timeline chart legend — toggle is disabled
   so the legend is display-only and should not look interactive. */
.chart-legend-no-click,
.chart-legend-no-click * {
    cursor: default !important;
    pointer-events: none !important;
}
/*Help Icon Size - experiment with this to change the size of the help icon*/
/* Larger help icon in the shared HelpBox component */
.myMargin .bi-question-circle-fill {
    font-size: 1.4rem;
}
/* Virtual scrolling requires a bounded grid height — without this the grid
   expands to fit all rows, the page scrollbar takes over, and every row gets
   rendered (no virtualization). Used by EventGridPage and ReviewerGridPage. */
.event-grid {
    height: calc(100vh - 220px); /* viewport minus header/toolbar/chart area — tune as needed */
}

/* Search-term highlight inside templated grid cells — the grid can't auto-highlight
   template content, so LongTextCellTemplate wraps matches in this class itself.
   Yellow background mirrors the grid's built-in search highlight. */
.grid-search-highlight {
    background-color: #ffff00;
}

/* Flashes the box a reviewer's comment is about when the facility clicks Edit on it.
   Scrolling alone lands them near the right place but does not say which of several
   boxes to look at. Added by highlightSectionField in domInterop.js.

   Written as an animation rather than a class the code takes off again, so it clears
   itself — nothing can leave a box outlined permanently, which would read as an error.
   Amber rather than red for the same reason. */
.comment-highlight {
    animation: comment-highlight-fade 5s ease-out 1;
}

@keyframes comment-highlight-fade {
    0% {
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.9);
        border-color: #ffc107;
    }

    100% {
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0);
    }
}

/* ---------------------------------------------------------------------------
   Reviewer comments panel — PrintComments.razor

   Every comment used to run straight into the next one. The only dividing line
   on the whole panel came at the end of a whole section, so the three separate
   remarks about how the event was described arrived as one unbroken block of
   text and the facility could not tell where one ended and the next began. The
   tick box was worse — it sat between two comments, equally close to both, with
   nothing saying which one it belonged to.

   Each comment is now its own bordered card with its tick box shut inside it,
   and the gap between cards is deliberately larger than any gap inside one.
   That difference in spacing is what the eye reads as "two separate things".
   --------------------------------------------------------------------------- */

.comment-group {
    margin-bottom: 1.75rem;
}

/* "Field: ..." bar over each group of comments. Used on the facility and reviewer
   screens. "Field:" is bold via <strong>; the section name stays regular. */
.comment-group-label {
    margin: 0 0 .5rem;
    padding: .35rem .75rem;
    border-radius: .25rem;
    background-color: #1a5e80;
    color: #fff; /* about 7:1 on the background */
    font-size: .95rem;
    font-weight: 400;
}

/* Heading over the Current and Previous sections in View All Comments. */
.comment-section-heading {
    margin: 1rem 0 .25rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #002f5f;
}

/* Bar separating the current round from earlier rounds. Deliberately heavier and darker
   than the field bars so it reads as a break, not another field. */
.comment-previous-divider {
    height: 6px;
    margin: 2rem 0 .5rem;
    border-radius: 3px;
    background-color: #002f5f;
}

.comment-previous-note {
    margin: 0 auto 1rem;
    max-width: 40rem;
    text-align: center;
    font-size: .85rem;
    color: #495057;
}

/* One comment. The margin below is larger than the padding within, which is what
   separates one card from the next without needing a line between them. */
.comment-card {
    margin-bottom: 1rem;
    padding: .75rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-left-width: 4px;
    border-radius: .375rem;
}

/* The colour down the left edge is a shortcut for someone scanning a long panel,
   never the only thing carrying the state — the badge says the same thing in
   words, which is what anyone who cannot tell the colours apart reads instead
   (WCAG 1.4.1). That is also why these bars are not held to the 3:1 non-text
   contrast rule: nothing is identified by the colour alone. */

/* Still waiting on the facility. The same amber as the flash on the field they
   are sent to edit, so the two read as one thread of work. */
.comment-card-todo {
    border-left-color: #ffc107;
}

/* Ticked off. */
.comment-card-done {
    border-left-color: #198754;
}

/* Nothing is being asked for — the facility only has to read this one. */
.comment-card-info {
    border-left-color: #003466;
}

/* Badges follow .cap-strength-badge higher up this file, scaled down to sit
   inside a card. Every pairing below is a Bootstrap tint with its matching
   emphasis colour: 7.2:1 amber, 10.4:1 green, and navy on #e7eef5 at the ~10.7:1
   already measured for .cap-strength-badge. All clear the 4.5:1 floor (1.4.3). */
.comment-badge {
    display: inline-block;
    margin-bottom: .4rem;
    padding: .15rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid;
    border-radius: .25rem;
}

.comment-card-todo .comment-badge {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffe69c;
}

.comment-card-done .comment-badge {
    color: #0a3622;
    background-color: #d1e7dd;
    border-color: #a3cfbb;
}

.comment-card-info .comment-badge {
    color: #003466;
    background-color: #e7eef5;
    border-color: #c3d4e4;
}

/* A badge that takes the reader to the part of the form the comment is about is
   a real button, so it can be reached and pressed by keyboard like anything
   else. A button brings its own font and line height with it, which would leave
   it looking nothing like the plain badges beside it — hence the two inherits.

   The colours are left to the three rules above, so an actionable badge is the
   same colour as a plain one. What marks it out is the underline on hover and
   the cursor, which is how the rest of the app signals something can be
   clicked. */
.comment-badge-action {
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.comment-badge-action:hover,
.comment-badge-action:focus-visible {
    text-decoration: underline;
}

/* Only a comment a review checklist wrote begins with its criterion name in
   bold, and only those get that first line lifted out as the card's title. A
   comment typed in the Add Comment window comes from a rich text editor with a
   bold button, so bold anywhere inside one of those is the reviewer's own and
   has to be left alone. That is why this hangs off the class the page puts only
   on comments carrying a criterion, rather than on "the first bold thing in any
   comment".

   None of this is particular to one checklist. Everything here applies to any
   comment carrying a criterion, so the RCA/CAP checklist will pick it up as it
   stands once that one is converted. */
.comment-card-titled .comment-card-body > strong:first-child {
    display: block;
    margin-bottom: .25rem;
    font-size: .95rem;
    color: #212529;
}

/* The stored comment has a line break straight after that bold name, put there
   to push the wording on to the next line. The name is its own block now, so the
   break would leave an empty line underneath it. */
.comment-card-titled .comment-card-body > strong:first-child + br {
    display: none;
}

/* Slightly softer than the title above it, and given room to breathe — these are
   full sentences read in a pane that is about a third of the window wide.
   overflow-wrap catches a long unbroken run of characters, which would otherwise
   push the card out past the edge of that pane. */
.comment-card-body {
    color: #343a40;
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* Separates the tick box from the comment it belongs to without letting it drift
   away from it. */
.comment-card-foot {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid #eef0f2;
}

/* The tally across the whole panel, sat above the first group. Kept to one line
   of words and a count: a facility reading this wants to know whether they are
   finished, which is a number, not a picture. */
.comment-progress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #dee2e6;
}

.comment-progress-count {
    font-weight: 600;
    color: #212529;
}

/* The same amber as a card still waiting on the facility, so the count and the
   cards it is counting are plainly the same thing. Overrides the gap the badge
   normally leaves beneath it, which is not wanted in a single row. */
.comment-progress-outstanding {
    margin-bottom: 0;
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffe69c;
}

/* ---------------------------------------------------------------------------
   Changed-field marks on the reviewer's read-only view of the event

   A reviewer looking at a resubmitted event had no way of seeing what the
   facility had actually altered without leaving the page for the Event Versions
   tab, comparing two versions there, and coming back. The client asked for the
   clicking to stop.

   So a field the facility changed now says so where it sits, and offers what it
   said before. Deliberately a small mark and not the change itself: this side of
   the screen is where the reviewer reads the event as it now stands, and running
   the old wording through it in strikethrough would turn a readable form into a
   list of corrections.
   --------------------------------------------------------------------------- */

/* A button rather than a coloured span, so it can be reached and opened by
   keyboard like anything else on the page.

   Added, Removed and Modified are the same three words and the same three
   colours the Compare Version window uses, because a reviewer reads both and
   should not have to learn the same thing twice. The word is what carries the
   meaning — the colour only backs it up — so nothing here depends on being able
   to tell green from red (WCAG 1.4.1). Every pairing below is at least 7:1
   against the 4.5:1 floor (1.4.3). */
.field-change-badge {
    margin-left: .4rem;
    padding: .1rem .45rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid;
    border-radius: .25rem;
    cursor: pointer;
    vertical-align: middle;
}

/* Answered where it had been left blank. 10.4:1. */
.field-change-badge.field-change-added {
    color: #0a3622;
    background-color: #d1e7dd;
    border-color: #a3cfbb;
}

.field-change-badge.field-change-added:hover {
    background-color: #a3cfbb;
}

/* Cleared out, where there had been an answer. 10.3:1. */
.field-change-badge.field-change-removed {
    color: #58151c;
    background-color: #f8d7da;
    border-color: #f1aeb5;
}

.field-change-badge.field-change-removed:hover {
    background-color: #f1aeb5;
}

/* Reworded. 7.2:1. */
.field-change-badge.field-change-modified {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffe69c;
}

.field-change-badge.field-change-modified:hover {
    background-color: #ffe69c;
}

/* What the field said before.

   This sits in the ordinary flow of the page and pushes the fields below it
   down while it is open. It was floated over them to begin with, which avoided
   the shuffling — but these labels are drawn inside a DevExpress form layout
   caption, and that cuts off anything reaching outside itself, so the panel
   opened and was never visible. Being pushed down the page is a far smaller
   problem than not being there. */
.field-change-panel {
    display: block;
    margin: .35rem 0 .25rem;
    padding: .5rem .65rem;
    max-width: 46rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid #ffc107;
    border-radius: .375rem;
}

.field-change-panel.field-change-added {
    border-left-color: #198754;
}

.field-change-panel.field-change-removed {
    border-left-color: #dc3545;
}

.field-change-panel.field-change-modified {
    border-left-color: #ffc107;
}

.field-change-panel-title {
    display: block;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #495057;
}

/* Normal weight and wrapping, because the old wording can be a long paragraph
   of narrative. */
.field-change-panel-body {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.5;
    color: #343a40;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}