html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- SRM App Layout (MainLayout.razor) --- */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #1B2A4A;
    color: white;
    flex-shrink: 0;
    z-index: 1100;
    position: relative;
    height: 56px;
    box-sizing: border-box;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.logo-link {
    display: flex;
    align-items: center;
}

.header-logo {
    height: 32px;
}

.header-title {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

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

.btn-primary {
    color: #fff;
    background-color: #27325e;
    border-color: #27325e;
}

.btn-primary:hover {
    background-color: #1e2649;
    border-color: #1e2649;
}

.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;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.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;
}

/* ============================================
   Login Page Styles (matching PHP SRWeb)
   ============================================ */

.innovative-logo {
    max-width: 200px;
    width: 200px;
    height: auto;
}

.login-image {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.login-box {
    margin: 0 auto;
    border: 1px solid #27325e;
    border-radius: 0.25rem;
    padding: 0;
    min-width: 320px;
    max-width: 400px;
}

.login-box-header {
    background-color: #27325e;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin-bottom: 0;
}

.login-box-header h3 {
    margin: 0;
    color: #fff;
    padding: 10px;
}

.login-box-form {
    padding: 20px 40px;
}

.login-box-form .form-control {
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.login-box-form .btn-primary {
    width: 100%;
    background-color: #27325e;
    color: #fff;
}

.login-box-form .btn-primary:hover {
    background-color: #1e2649;
}

/* ============================================
   Login Layout (full page background)
   ============================================ */

.login-page {
    min-height: 100vh;
    padding-top: 40px;
    background-color: #ffffff;
}

/* ============================================
   SR Detail Page Styles
   ============================================ */

.sr-detail {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.sr-header {
    border-bottom: 2px solid #27325e;
    padding-bottom: 1rem;
}

.sr-header h1 {
    color: #27325e;
    margin-bottom: 0.5rem;
}

.sr-header h2 {
    font-size: 1.25rem;
    font-weight: normal;
}

.sr-info dt {
    font-weight: 600;
    color: #27325e;
}

.sr-info dd {
    margin-bottom: 0.5rem;
}

/* ============================================
   Top Navigation Bar
   ============================================ */

.top-row {
    background-color: #27325e;
    color: white;
    height: 50px;
}

.top-row a {
    color: white;
}

.top-row a:hover {
    color: #ddd;
}

/* ============================================
   MudBlazor Global Style Fixes
   ============================================ */

/* Fix dropdown/select transparent backgrounds */
.mud-select .mud-input-control,
.mud-select input,
.mud-select-input,
.mud-input-control,
.mud-popover-open,
.mud-list,
.mud-menu-list,
.mud-select-menu,
.mud-autocomplete-menu {
    background-color: white !important;
}

/* Fix MudSelect dropdown menu */
.mud-popover .mud-list {
    background-color: white !important;
}

/* Fix MudSelect input field */
.mud-select .mud-input-slot {
    background-color: white !important;
}

/* Ensure all input controls have white background */
.mud-input-control-input-container {
    background-color: white !important;
}

/* ============================================
   Fix floating label cutoff on outlined inputs
   The label floats above the border and needs visible overflow
   ============================================ */

/* Allow floating labels to be visible above the input border */
.mud-input-control {
    overflow: visible !important;
}

/* The input wrapper also needs visible overflow for the label */
.mud-input {
    overflow: visible !important;
}

/* Specifically for select/autocomplete outlined variants */
.mud-select.mud-input-outlined .mud-input-control,
.mud-autocomplete.mud-input-outlined .mud-input-control {
    overflow: visible !important;
}

/* Fix modal/dialog transparent backgrounds */
.mud-dialog {
    background-color: white !important;
}

.mud-dialog-content {
    background-color: white !important;
}

.mud-dialog-actions {
    background-color: white !important;
}

.mud-dialog-title {
    background-color: white !important;
}

/* MudPaper should have white background */
.mud-paper {
    background-color: white !important;
}

/* MudCard should have white background */
.mud-card {
    background-color: white !important;
}

/* ============================================
   Tab Container Scrollbar Fix
   ============================================ */

/* Hide vertical scrollbar in tab-content that isn't needed */
.tab-content::-webkit-scrollbar {
    width: 8px;
}

.tab-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.tab-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Only show scrollbar when content overflows */
.tab-content {
    scrollbar-gutter: stable;
}

/* ============================================
   MudBlazor Dropdown/Popover Styling
   Uses SRWeb color scheme (#c8dceb)
   ============================================ */

/* Style all MudBlazor popovers (dropdowns, menus, calendars) */
/* z-index must be higher than mud-overlay (1400) to allow clicks */
.mud-popover {
    background-color: #c8dceb !important;
    border: 1px solid #27325e !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 1500 !important;
    margin-top: 2px !important;
}

/* Style the list inside dropdowns */
.mud-popover .mud-list {
    background-color: #c8dceb !important;
}

/* Style individual list items */
.mud-popover .mud-list-item {
    background-color: #c8dceb !important;
}

/* Hover state for list items - must be visually distinct */
.mud-popover .mud-list-item:hover {
    background-color: #a8c4db !important;
}

/* Selected state for list items */
.mud-popover .mud-list-item.mud-selected {
    background-color: #88b4d1 !important;
}

/* Calendar/Date picker styling - only style the opened calendar popover */
.mud-picker-popover {
    background-color: #c8dceb !important;
    border: 1px solid #27325e !important;
}

.mud-picker-popover .mud-picker-content {
    background-color: #c8dceb !important;
}

.mud-picker-popover .mud-picker-calendar {
    background-color: #c8dceb !important;
}

.mud-picker-popover .mud-picker-calendar-header {
    background-color: #b8d0e5 !important;
}

/* Ensure date picker input field has white background */
.mud-picker .mud-input-control,
.mud-picker-input .mud-input-control {
    background-color: white !important;
}

.mud-picker .mud-input-slot,
.mud-picker-input .mud-input-slot {
    background-color: white !important;
}

/* Autocomplete dropdown */
.mud-autocomplete-popover {
    background-color: #c8dceb !important;
    border: 1px solid #27325e !important;
}

/* Menu dropdown */
.mud-menu {
    background-color: #c8dceb !important;
    border: 1px solid #27325e !important;
}

/* Select dropdown menu */
.mud-select-menu {
    background-color: #c8dceb !important;
}

/* ============================================
   Fix double scrollbar in MudBlazor dropdowns
   ============================================ */

/* Hide scrollbar on ALL outer containers - only inner list should scroll */
.mud-popover {
    overflow: hidden !important;
}

.mud-popover > .mud-paper {
    overflow: hidden !important;
}

.mud-popover .mud-paper {
    overflow: hidden !important;
}

.mud-popover-cascading-value {
    overflow: hidden !important;
}

.mud-select-menu {
    overflow: hidden !important;
}

/* The inner list handles scrolling - this is the ONLY scrollbar */
.mud-popover .mud-list {
    max-height: 300px;
    overflow-y: auto !important;
}

/* Select input container needs overflow visible for floating labels */
.mud-select .mud-input-control {
    overflow: visible !important;
}

/* ============================================
   Fix for MudBlazor outlined input label cutoff
   The floating label needs more vertical space
   ============================================ */

/* REMOVED: These overrides caused label overlap in dialogs
   MudBlazor handles floating labels correctly by default. */

/* ============================================
   Dialog Tab Styling (custom bordered tabs)
   Matches main navigation tab style per Rule 16
   ============================================ */

.dialog-tabs-container {
    display: flex;
    flex-direction: column;
    height: 500px;
    min-width: 700px;
    background-color: white;
}

.dialog-tab-bar {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #dee2e6;
    padding: 4px 4px 0 4px;
    gap: 2px;
    flex-shrink: 0;
}

.dialog-tab {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
    margin-bottom: -1px;
    color: #6c757d;
    font-weight: normal;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1;
}

.dialog-tab:hover {
    background-color: #fff;
}

.dialog-tab.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 2;
    font-weight: 700;
    color: #27325e;
    border-top: 3px solid #27325e;
}

.dialog-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
}

/* ============================================
   MudBlazor Snackbar Styling
   Colored backgrounds for better visibility
   ============================================ */

/* Success/Info/Warning snackbar - green background (good/neutral messages) */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-warning {
    background-color: #2e7d32 !important;
    color: white !important;
}

/* Error snackbar - red background (bad messages) */
.mud-snackbar.mud-alert-filled-error {
    background-color: #d32f2f !important;
    color: white !important;
}

/* Snackbar close button — always visible and clickable */
.mud-snackbar .mud-alert-close {
    color: white !important;
    opacity: 0.9;
    pointer-events: auto !important;
    cursor: pointer;
}
.mud-snackbar .mud-alert-close:hover {
    opacity: 1;
}

/* ============================================
   SRM Grid Styling (matching PHP SRWeb)
   Strong header with alternating row colors
   Sticky header - only body rows scroll
   ============================================ */

/* Grid header - navy background with white text, STICKY */
.srm-grid .mud-table-head {
    background-color: #27325e !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

.srm-grid .mud-table-head th {
    background-color: #27325e !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-bottom: none !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

.srm-grid .mud-table-head .mud-table-sort-label {
    color: white !important;
}

.srm-grid .mud-table-head .mud-table-sort-label:hover {
    color: #c8dceb !important;
}

.srm-grid .mud-table-head .mud-button-root {
    color: white !important;
}

/* Alternating row colors */
.srm-grid .mud-table-body tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.srm-grid .mud-table-body tr:nth-child(even) {
    background-color: #f0f4f8 !important;
}

/* Row hover effect */
.srm-grid .mud-table-body tr:hover {
    background-color: #c8dceb !important;
}

/* Cell padding and borders */
.srm-grid .mud-table-body td {
    padding: 8px 16px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Pager styling */
.srm-grid .mud-table-pagination {
    background-color: #f5f5f5 !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* Downloads grid - columns shrink to content, empty space on right */
.downloads-grid {
    width: 100%;
}

.downloads-grid .mud-table {
    table-layout: auto;
}

/* ============================================
   Horizontal Splitter / Resizer
   ============================================ */

.splitter-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the tab-panel container */
    overflow: hidden;
    padding-bottom: 8px; /* Ensure content doesn't touch viewport edge */
}

.splitter-panel-top {
    flex-shrink: 0;
    overflow: auto;
    min-height: 100px;
}

.splitter-handle {
    height: 8px;
    background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    -webkit-user-select: none;
    user-select: none;
}

.splitter-handle:hover {
    background: linear-gradient(to bottom, #c8dceb, #a8c4db);
}

.splitter-handle::before {
    content: "";
    width: 40px;
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        #888,
        #888 2px,
        transparent 2px,
        transparent 6px
    );
    border-radius: 2px;
}

.splitter-panel-bottom {
    flex: 1;
    overflow: hidden;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

/* Splitter panel grids - proper scrolling with sticky headers */
.splitter-panel-bottom .mud-paper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.splitter-panel-bottom .srm-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.splitter-panel-bottom .srm-grid .mud-table-container {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.splitter-panel-bottom .srm-grid .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.splitter-panel-bottom .srm-grid .mud-table-head th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #27325e !important;
}

/* ============================================
   Global Tab Styling
   Consistent active tab appearance across all tabs
   ============================================ */

/* MudTabs - Active tab styling */
.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 700 !important;
    color: #27325e !important;
    border-top: 3px solid #27325e !important;
}

/* MudTabs - Inactive tab styling */
.mud-tabs .mud-tab:not(.mud-tab-active) {
    color: #6c757d !important;
    font-weight: normal !important;
}

/* MudTabs - Tab indicator (the sliding bar under tabs) */
.mud-tabs .mud-tab-slider {
    background-color: #27325e !important;
    height: 3px !important;
}

/* Bootstrap nav-tabs - Active styling */
.nav-tabs .nav-link {
    color: #6c757d;
    font-weight: normal;
}

.nav-tabs .nav-link.active {
    font-weight: 700 !important;
    color: #27325e !important;
    border-top: 3px solid #27325e !important;
    background-color: #fff;
}

/* ============================================
   Dialog z-index and positioning
   Ensure dialogs are centered in viewport
   Popovers (dropdowns) inside dialogs must be highest
   ============================================ */

/* Dialog overlay (backdrop) - fixed to viewport */
.mud-overlay.mud-overlay-dialog {
    z-index: 1300 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Dialog container - fixed positioning, anchored to top of viewport */
.mud-dialog-container {
    z-index: 1400 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 8vh !important;
    padding-left: 3vw !important;
    padding-right: 3vw !important;
    padding-bottom: 3vh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

/* Dialog itself - ensure it doesn't exceed viewport */
.mud-dialog {
    z-index: 1400 !important;
    max-height: 85vh !important;
    margin: 0 !important;
    overflow: auto !important;
    flex-shrink: 0 !important;
}

/* Ensure MudBlazor filled buttons have proper styling with standard shading (override Bootstrap) */
.mud-button-filled {
    border: none !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12) !important;
}

.mud-button-filled:hover {
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) !important;
}

.mud-button-filled:disabled {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.26) !important;
    box-shadow: none !important;
}

/* Popovers (dropdowns) must be ABOVE dialogs so they're visible */
.mud-popover {
    z-index: 1500 !important;
}

/* ============================================
   Tab Content - No main scrollbar
   Individual sections/grids should scroll
   ============================================ */

/* MudContainer inside tabs should fill height and allow sections to scroll */
.tab-content > div,
.tab-content .mud-container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Filter sections (with mb-* margin class) should NOT grow - only take space they need */
/* Add padding-top for floating labels to have room above the input border */
.tab-content .mud-paper.mb-1,
.tab-content .mud-paper.mb-2,
.tab-content .mud-paper.mb-3,
.tab-content .mud-paper.mb-4,
.tab-content .mud-paper.mb-5,
.tab-content .mud-paper.mb-6,
.tab-content .mud-stack.mb-1,
.tab-content .mud-stack.mb-2,
.tab-content .mud-stack.mb-3,
.tab-content .mud-stack.mb-4,
.tab-content .mud-stack.mb-5,
.tab-content .mud-stack.mb-6 {
    flex: 0 0 auto;
    overflow: visible;
    padding-top: 8px !important;
}

/* Main content paper (no mb-* margin) should grow to fill remaining space */
.tab-content .mud-paper:not(.mb-1):not(.mb-2):not(.mb-3):not(.mb-4):not(.mb-5):not(.mb-6) {
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Toolbar row inside main content should NOT scroll */
.tab-content .mud-paper:not(.mb-1):not(.mb-2):not(.mb-3):not(.mb-4):not(.mb-5):not(.mb-6) > .mud-stack {
    flex: 0 0 auto;
}

/* Grid container should grow - scrolling handled by inner container */
.tab-content .mud-paper:not(.mb-1):not(.mb-2):not(.mb-3):not(.mb-4):not(.mb-5):not(.mb-6) > .mud-table,
.tab-content .mud-paper:not(.mb-1):not(.mb-2):not(.mb-3):not(.mb-4):not(.mb-5):not(.mb-6) .srm-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The MudTable container (inner div) is the scroll area */
.tab-content .srm-grid .mud-table-container {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Sticky header - stays fixed while body rows scroll */
.tab-content .srm-grid .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tab-content .srm-grid .mud-table-head th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #27325e !important;
}

/* -------------------------------------------------------
   Standard Admin Tab Pattern (srm-tab-*)
   Use for all multi-tab admin pages (Help Content, etc.)
   Structure: .srm-tabs-container > .srm-tab-bar > .srm-tab(s)
              .srm-tabs-container > .srm-tab-content
   ------------------------------------------------------- */
.srm-tabs-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.srm-tab-bar {
    display: flex;
    background-color: transparent;
    border-bottom: 1px solid #dee2e6;
    padding: 4px 4px 0 4px;
    gap: 2px;
    flex-shrink: 0;
}

.srm-tab {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
    position: relative;
    margin-bottom: -1px;
    color: #6c757d;
    font-weight: normal;
    user-select: none;
}

.srm-tab:hover {
    background-color: #fff;
}

.srm-tab.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 1;
    font-weight: 700;
    color: #27325e;
    border-top: 3px solid #27325e;
}

.srm-tab-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
}

/* Custom tab containers (like Company Info) should grow to fill space */
.tab-content .company-info-tabs-container,
.tab-content [class*="-tabs-container"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ============================================
   SR Update Notification - Pulse Animation
   For tabs and grid rows with pending updates
   ============================================ */

/* Keyframe animation for pulsing glow */
@keyframes sr-notification-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* Tab with pending SR notification - pulsing glow */
.sr-notification-tab {
    animation: sr-notification-pulse 1.5s infinite;
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-left: 3px solid #ffc107 !important;
}

/* Grid row with pending SR notification - pulsing background */
@keyframes sr-row-pulse {
    0% {
        background-color: rgba(255, 193, 7, 0.3);
    }
    50% {
        background-color: rgba(255, 193, 7, 0.1);
    }
    100% {
        background-color: rgba(255, 193, 7, 0.3);
    }
}

.sr-notification-row {
    animation: sr-row-pulse 1.5s infinite !important;
    border-left: 3px solid #ffc107 !important;
}

/* Override hover effect for notification rows */
.srm-grid .mud-table-body tr.sr-notification-row:hover {
    animation: none !important;
    background-color: #c8dceb !important;
}

/* Badge/indicator for tabs with notifications */
.sr-notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #ffc107;
    border-radius: 50%;
    border: 2px solid white;
    animation: sr-notification-pulse 1.5s infinite;
}


/* User dropdown menu - remove MudBlazor default styling */
.user-dropdown-wrapper .mud-button-root {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: unset !important;
    padding: 4px 8px !important;
    color: #333 !important;
}

.user-dropdown-wrapper .mud-button-root:hover {
    background: transparent !important;
    background-color: rgba(0,0,0,0.04) !important;
}

.user-dropdown-wrapper .mud-button-label {
    color: #333 !important;
    text-transform: none !important;
    font-weight: normal !important;
}

/* ============================================
   Download Links in SR Text
   Auto-linked filenames to downloadable files
   ============================================ */

/* Download link styling */
.download-link {
    color: #006bb7 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.download-link:hover {
    color: #004080 !important;
    text-decoration: underline !important;
}

/* Multiple files indicator */
.download-link.download-multiple::after {
    content: " \25BC"; /* Down arrow */
    font-size: 0.7em;
    vertical-align: middle;
}

/* Download dropdown menu */
.download-dropdown {
    background-color: #fff;
    border: 1px solid #27325e;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    max-width: 300px;
}

.download-dropdown-header {
    padding: 5px 10px;
    background-color: #27325e;
    color: white;
    font-weight: 600;
    font-size: 11px;
}

.download-dropdown-option {
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

.download-dropdown-option:last-child {
    border-bottom: none;
}

.download-dropdown-option:hover {
    background-color: #c8dceb;
}

.download-dropdown-option strong {
    color: #27325e;
    font-size: 12px;
}

.download-dropdown-option small {
    color: #888;
    font-size: 10px;
    display: block;
    margin-top: 1px;
}

/* ============================================
   Login Page - Responsive Logo
   Hide left logo column on smaller screens
   ============================================ */

.login-page .logo-left-column {
    display: none !important;
}

@media screen and (min-width: 992px) {
    .login-page .logo-left-column {
        display: flex !important;
    }
}

/* ============================================
   Atlas Help System — Global Styles
   All help page styles live here (not scoped)
   to avoid Blazor scoped CSS issues with
   @rendermode InteractiveServer.
   ============================================ */

/* --- Help Layout (HelpLayout.razor) --- */

.help-app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f5f5f5;
}

/* Override MudBlazor's Roboto with system font stack to match SRM main layout */
.help-header,
.help-header *,
.help-doc-container,
.help-doc-container *,
.help-search-panel,
.help-search-panel *,
.help-auth-gate,
.help-auth-gate * {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

.help-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1B2A4A;
    color: white;
    padding: 0 24px;
    height: 56px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1000;
}

.help-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.help-header-logo {
    height: 32px;
    width: auto;
}

.help-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.help-header-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

.help-header-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 800px;
    margin: 0 16px;
}

.help-search-input {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.help-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.help-search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

.help-search-icon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Header search form — flex row: [input] [icon button] */
.help-header-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 28px;
}

/* Submit button — icon to the right of the input */
.help-search-submit {
    background: none;
    border: none;
    padding: 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.help-sign-in-link {
    white-space: nowrap;
}

.help-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.help-nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-nav-link i {
    font-size: 16px;
}

.help-nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
}

.help-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


.help-user-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
}

.help-sign-in-btn {
    color: white !important;
    text-transform: none;
}

.help-content {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0; /* CHG 26/08/04 - 36px reserved a footer bar that no longer exists (blank strip) */
    overflow: hidden;
    transition: right 0.3s ease;
}


/* --- Help Doc Browser (HelpDoc.razor + HelpDocsIndex.razor) --- */

.help-doc-container {
    display: flex;
    gap: 0;
    height: 100%;
}

.help-doc-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    background: #1B2A4A;
    display: flex;
    flex-direction: column;
}

/* CHG 26/08/04 - version footer pinned under the tree, mirrors SRM .sidebar-version */
.help-sidebar-version {
    padding: 8px;
    text-align: center;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.help-doc-sidebar-header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.help-sidebar-filter-input {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.help-sidebar-filter-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.help-sidebar-filter-input:focus {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.15);
}

/* details/summary — suppress default disclosure triangle */
.tree-node-folder-wrap > summary {
    list-style: none;
    cursor: pointer;
}

.tree-node-folder-wrap > summary::-webkit-details-marker {
    display: none;
}

.help-doc-tree {
    flex: 1;
    overflow-y: scroll;
    padding: 8px 0;
    min-height: 0;
    /* Force always-visible scrollbar gutter regardless of OS overlay setting */
    scrollbar-gutter: stable;
    /* W3C scrollbar styling (Chrome 121+, Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.05);
}

/* Webkit fallback — forces classic (non-overlay) scrollbar */
.help-doc-tree::-webkit-scrollbar {
    width: 8px;
}

.help-doc-tree::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.help-doc-tree::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}

.help-doc-tree::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}

.help-doc-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 24px 32px;
    background: #fff;
    overflow-y: auto;
}

.help-doc-content h1 {
    color: #27325e;
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.help-doc-content p {
    color: #666;
    margin-bottom: 0;
}

/* Topic cards in docs index grid */
.help-doc-content .mud-paper h4 a {
    color: #27325e;
    text-decoration: none;
    font-weight: 600;
}

.help-doc-content .mud-paper h4 a:hover {
    text-decoration: underline;
    color: #006bb7;
}

.help-doc-content .text-muted {
    color: #888;
    font-size: 0.85rem;
}

/* Doc header */
.help-doc-header h1 {
    color: #27325e;
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.help-doc-description {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.help-doc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #888;
}

/* Two-column page layout: ToC sidebar (left) + content body (right).
   The body carries the vertical separator on its left edge so the divider
   line runs the full page height, even past the bottom of the ToC content. */
.help-doc-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.help-doc-body-wrapper {
    min-width: 0;
    border-left: 1px solid #d6dee8;
    padding-left: 28px;
    margin-left: 8px;
}

/* When the page has <2 headings the ToC is hidden — collapse the empty track. */
.help-doc-layout.no-toc {
    grid-template-columns: 1fr;
}

.help-doc-layout.no-toc .help-doc-body-wrapper {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

/* Collapsed state: shrink the ToC column to a thin rail with just the toggle. */
.help-doc-layout.toc-collapsed {
    grid-template-columns: 24px minmax(0, 1fr);
}

.help-doc-layout.toc-collapsed .help-doc-toc-title,
.help-doc-layout.toc-collapsed .help-doc-toc-nav {
    display: none;
}

/* Deep-link placeholder while the page verdict is still pending (auth bridge). */
.help-doc-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 4px;
    color: #666;
    font-size: 0.9rem;
}

/* Per-page Table of Contents — populated by helpBuildTocForPage. */
.help-doc-toc {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    /* overflow-x MUST stay hidden: a box with one axis auto/scroll computes the
       other to auto, so the 24px collapsed rail grew a native horizontal
       scrollbar — the stray left/right arrow buttons under the ToC chevron. */
    overflow-x: hidden;
    padding-right: 8px;
    font-size: 0.85rem;
}

.help-doc-toc-toggle {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 2px 4px;
    margin: 0 0 4px -4px;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    border-radius: 3px;
}

.help-doc-toc-toggle:hover {
    color: #006bb7;
    background: #f0f6fc;
}

.help-doc-toc-title {
    font-weight: 600;
    color: #27325e;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.help-doc-toc-nav {
    display: flex;
    flex-direction: column;
}

.help-doc-toc-link {
    display: block;
    padding: 4px 8px;
    color: #555;
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.35;
    word-break: break-word;
}

.help-doc-toc-link:hover {
    color: #006bb7;
    text-decoration: none;
}

.help-doc-toc-link.active {
    color: #006bb7;
    border-left-color: #006bb7;
    font-weight: 600;
    background: #f0f6fc;
}

.help-doc-toc-link.toc-h1 {
    font-weight: 600;
}

.help-doc-toc-link.toc-h2 {
    padding-left: 14px;
}

.help-doc-toc-link.toc-h3 {
    padding-left: 24px;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Narrow viewports: the sidebar (ToC / transcript) stays reachable — it defaults
   to the chevron-only collapsed state (set by the JS builders when no stored
   preference exists) and expands/collapses with the same toggle as desktop.
   Never display:none it — that left no way to open it at all. */

/* Doc body — wiki content rendering */
.help-doc-body {
    line-height: 1.7;
    font-size: 0.95rem;
    color: #333;
}

.help-doc-body h1 {
    font-size: 1.5rem;
    color: #27325e;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
    margin-top: 24px;
}

.help-doc-body h2 {
    font-size: 1.3rem;
    color: #27325e;
    margin-top: 20px;
}

.help-doc-body h3 {
    font-size: 1.1rem;
    color: #27325e;
    margin-top: 16px;
}

.help-doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.help-doc-body table th {
    background-color: #27325e;
    color: white;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.88rem;
}

.help-doc-body table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.88rem;
}

.help-doc-body table tr:nth-child(even) {
    background-color: #f0f4f8;
}

.help-doc-body table tr:hover {
    background-color: #c8dceb;
}

.help-doc-body img {
    max-width: 100%;
    height: auto;
}

.help-doc-body code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.88em;
}

.help-doc-body pre {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 4px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
}

/* Quill stores code blocks as <div class="ql-code-block-container"><div class="ql-code-block">...</div>...</div>.
   quill.snow.css scopes its styling under .ql-editor (the editor wrapper, only present in the edit view), so on
   the rendered help page these divs fall through unstyled and read as flat prose. Style them here, scoped to
   .help-doc-body, to match the existing .help-doc-body pre treatment. */
.help-doc-body .ql-code-block-container {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 4px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    margin: 12px 0;
}

.help-doc-body .ql-code-block {
    display: block;
    font-family: Menlo, Monaco, "Courier New", monospace;
    font-size: 0.85em;
    line-height: 1.4;
    white-space: pre-wrap;
    color: #2d2d2d;
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.help-doc-body a {
    color: #006bb7;
}

.help-doc-body a:hover {
    text-decoration: underline;
}

/* Related articles */
.help-related h3 {
    color: #27325e;
    font-size: 1rem;
    margin-bottom: 8px;
}

/* Feedback section */
.help-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 0.9rem;
}

.help-feedback-thanks {
    color: #27325e;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Responsive doc layout */
@media (max-width: 768px) {
    .help-doc-container {
        flex-direction: column;
    }

    .help-doc-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 300px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
}

/* --- Sidebar Tree Node (HelpTreeNode.razor) --- */

.tree-node {
    user-select: none;
}

.tree-node-label {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.tree-node-label:hover {
    background-color: rgba(255,255,255,0.1);
}

.tree-node-active > .tree-node-label {
    background-color: rgba(255,255,255,0.2);
}

.tree-node-arrow {
    flex-shrink: 0;
    width: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    transition: color 0.2s ease;
}

.tree-node-label:hover .tree-node-arrow {
    color: #fff;
}

.tree-node-spacer {
    display: inline-block;
    width: 20px;
    flex-shrink: 0;
}

/* Leaf rows use this spacer to align with the folder chevron column. */
.tree-node-spacer--chevron {
    display: inline-block;
    width: 20px;
    flex-shrink: 0;
}

/* Folder disclosure chevron — right-pointing when closed, rotates 90° when open. */
.tree-node-chevron {
    flex-shrink: 0;
    width: 20px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    transition: transform 0.15s ease, color 0.15s ease;
}

.tree-node-folder-wrap[open] > summary .tree-node-chevron {
    transform: rotate(90deg);
    color: rgba(255, 255, 255, 0.95);
}

.tree-node-folder-wrap > summary:hover .tree-node-chevron {
    color: #fff;
}

/* Folder icon swap: closed by default, swap to open variant when details[open]. */
.tree-node-icon--open {
    display: none;
}

.tree-node-folder-wrap[open] > summary .tree-node-icon--closed {
    display: none;
}

.tree-node-folder-wrap[open] > summary .tree-node-icon--open {
    display: inline-block;
}

/* Subtle highlight on an open folder summary so the expanded parent is easy to scan. */
.tree-node-folder-wrap[open] > summary {
    background-color: rgba(255, 255, 255, 0.04);
}

.tree-node-icon {
    flex-shrink: 0;
    width: 20px;
    font-size: 16px;
    margin-right: 6px;
    color: rgba(255,255,255,0.7);
    text-align: center;
}

.tree-node-icon-folder {
    color: rgba(255,255,255,0.85);
}

.tree-node-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    font-family: inherit;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-node-link:hover {
    color: #fff;
}

.tree-node-folder {
    font-weight: 500;
    color: rgba(255,255,255,0.95);
    cursor: default;
}

.tree-node-folder:hover {
    color: #fff;
}

.tree-node-link.active {
    color: #fff;
    font-weight: 600;
}

.tree-node-children {
    padding-left: 16px;
}

/* --- Help Landing Page (HelpIndex.razor) --- */

.help-landing {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.help-topic-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.help-hero {
    text-align: center;
    padding: 48px 0 32px;
}

.help-hero-title {
    font-size: 2rem;
    font-weight: 600;
    color: #27325e;
    margin-bottom: 24px;
}

.help-search-container {
    max-width: 600px;
    margin: 0 auto;
}

.help-search-input .mud-input-outlined-border {
    border-color: #27325e !important;
}

.help-search-input .mud-input {
    font-size: 1.05rem;
}

.help-results {
    margin-top: 16px;
}

.help-results-header {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 16px;
    font-weight: 400;
}

.help-result-card {
    border-left: 3px solid #27325e;
    transition: box-shadow 0.15s ease;
}

.help-result-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

.help-result-title {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.help-result-title a {
    color: #006bb7;
    text-decoration: none;
    font-weight: 600;
}

.help-result-title a:hover {
    text-decoration: underline;
}

.help-result-description {
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.help-result-snippet {
    color: #444;
    font-size: 0.88rem;
    margin-bottom: 8px;
    line-height: 1.5;
}

.help-result-snippet em {
    background-color: #fff3cd;
    font-style: normal;
    padding: 0 2px;
}

.help-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.help-result-path {
    font-size: 0.8rem;
    color: #888;
}

.help-quick-links h3 {
    color: #27325e;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.help-topic-card {
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    border-top: 3px solid #27325e;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

.help-topic-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px);
}

.help-topic-card h4 {
    color: #27325e;
    margin: 8px 0 4px;
    font-size: 1.05rem;
}

.help-topic-card p {
    color: #666;
    font-size: 0.85rem;
    margin: 0;
}

.help-search-error {
    text-align: center;
    padding: 16px;
    color: #666;
}

/* --- Help Search Modal --- */

/* --- Search Panel (right-docked slide-in) --- */

.help-search-panel {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 36px;
    width: 420px;
    z-index: 1500;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease, width 0.3s ease;
}

.help-search-panel.open {
    transform: translateX(0);
}

.help-search-panel.collapsed {
    width: 40px;
    overflow: hidden;
}

.help-search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e8ecf0;
    font-size: 0.9rem;
    color: #555;
    background: #f8f9fa;
    flex-shrink: 0;
    min-height: 44px;
}

.help-search-panel-header strong {
    color: #1B2A4A;
}

.help-search-panel-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-search-panel.collapsed .help-search-panel-title {
    display: none;
}

.help-search-panel-toggle {
    color: #888;
    font-size: 16px;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 8px;
    cursor: pointer;
}

.help-search-panel-toggle:hover {
    color: #333;
}

.help-search-panel.collapsed .help-search-panel-toggle {
    margin-right: 0;
}

.help-search-panel-close {
    color: #888;
    font-size: 14px;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 4px;
    cursor: pointer;
}

.help-search-panel-close:hover {
    color: #dc3545;
}

.help-search-panel.collapsed .help-search-panel-close {
    display: none;
}

.help-search-panel-body {
    overflow-y: auto;
    flex: 1;
}

.help-search-panel.collapsed .help-search-panel-body {
    display: none;
}

.help-search-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 0.95rem;
}

.help-search-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}

.help-search-result:hover {
    background: #f5f7fb;
    text-decoration: none;
    color: inherit;
}

.help-search-result-icon {
    color: #8898aa;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.help-search-result-info {
    flex: 1;
    min-width: 0;
}

.help-search-result-title {
    font-weight: 500;
    color: #1B2A4A;
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.help-search-result-title em {
    background: #fff3c0;
    font-style: normal;
    font-weight: 600;
    border-radius: 2px;
    padding: 0 1px;
}

.help-search-result-path {
    font-size: 0.75rem;
    color: #8898aa;
    margin-bottom: 4px;
}

.help-search-result-snippet {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.help-search-result-snippet em {
    background: #fff3c0;
    font-style: normal;
    font-weight: 600;
    border-radius: 2px;
    padding: 0 1px;
}

.help-search-more {
    display: block;
    text-align: center;
    padding: 12px 16px;
    color: #1B2A4A;
    font-size: 0.85rem;
    text-decoration: none;
    border-top: 1px solid #e8ecf0;
}

.help-search-more:hover {
    background: #f5f7fb;
    text-decoration: underline;
}

/* Draft item with delete button */
.help-draft-item {
    display: flex;
    align-items: stretch;
}

.help-draft-item .help-draft-link {
    flex: 1;
    min-width: 0;
}

.help-draft-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    color: #aaa;
    border: none;
    background: none;
    border-left: 1px solid #f0f2f5;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.help-draft-delete:hover {
    color: #dc3545;
    background: #fef2f2;
}

/* Animated loading bar shown while searching */
.help-search-loading-bar {
    height: 3px;
    background: linear-gradient(90deg, #1B2A4A 0%, #3498db 50%, #1B2A4A 100%);
    background-size: 200% 100%;
    animation: helpSearchSlide 1.2s linear infinite;
}

@keyframes helpSearchSlide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Page Management Panel (left-docked collapsible) --- */

.help-page-panel {
    position: fixed;
    left: 280px;
    top: 56px;
    bottom: 36px;
    width: 190px;
    z-index: 1100;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease, width 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.help-page-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.help-page-panel.collapsed {
    width: 45px;
    overflow: hidden;
}

.help-page-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #e8ecf0;
    background: #f8f9fa;
    flex-shrink: 0;
    min-height: 42px;
}

.help-page-panel-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
}

.help-page-panel.collapsed .help-page-panel-label {
    display: none;
}

.help-page-panel-toggle {
    color: #888;
    font-size: 14px;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.help-page-panel-toggle:hover {
    color: #333;
}

.help-page-panel-items {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.help-page-panel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.help-page-panel-item:hover {
    background: #f0f2f5;
    color: #1B2A4A;
}

.help-page-panel-item i {
    font-size: 16px;
    color: #6c757d;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.help-page-panel-item .panel-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-page-panel.collapsed .panel-text {
    display: none;
}

.help-page-panel-divider {
    height: 1px;
    background: #e9ecef;
    margin: 2px 0;
}

.help-page-panel-item.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.help-page-panel-item.danger:not(.disabled):hover {
    color: #dc3545;
}

.help-page-panel-item.danger:not(.disabled) i {
    color: #dc3545;
}

/* --- Help Admin + Analytics --- */

.help-admin-container {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.help-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.help-admin-header h1 {
    color: #27325e;
    font-size: 1.5rem;
    margin: 0;
}

.es-admin-section {
    padding: 8px 0;
}

/* --- Help Login Modal --- */

.help-login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-login-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    width: 380px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
}

.help-login-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    background: #1B2A4A;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.help-login-modal-header button {
    color: #fff;
    font-size: 1.1rem;
    opacity: 0.8;
    padding: 0 4px;
}

.help-login-modal-header button:hover {
    opacity: 1;
}

.help-login-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-login-modal-body input[type="email"],
.help-login-modal-body input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
}

.help-login-modal-body input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.18);
}

.help-login-modal-body button#help-login-submit {
    width: 100%;
    padding: 10px;
    background: #1B2A4A;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.help-login-modal-body button#help-login-submit:hover {
    background: #243a62;
}

.help-login-modal-body button#help-login-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.help-login-error {
    color: #c0392b;
    font-size: 0.875rem;
    padding: 6px 10px;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

/* --- Help Toast Notification --- */

.help-toast {
    position: fixed;
    top: 70px;
    right: 24px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    animation: helpToastSlideIn 0.3s ease;
    max-width: 400px;
}

.help-toast-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.help-toast-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes helpToastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- Help Prompt Modal Input --- */

.help-prompt-text-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
}

.help-prompt-text-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.18);
}

.help-prompt-ok-btn {
    width: 100%;
    padding: 10px;
    background: #1B2A4A;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.help-prompt-ok-btn:hover {
    background: #243a62;
}

/* --- Help Confirm Modal Buttons --- */

.help-confirm-cancel {
    background: #e9ecef;
    color: #333;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

.help-confirm-cancel:hover {
    background: #dee2e6;
}

.help-confirm-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.help-confirm-danger:hover {
    background: #c82333;
}

/* --- Help Header: User Dropdown + Page Management Dropdown --- */

.help-user-dropdown,
.help-page-mgmt-dropdown {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.2s ease;
    user-select: none;
    position: relative;
}

.help-user-dropdown:hover,
.help-page-mgmt-dropdown:hover {
    background-color: rgba(255,255,255,0.15);
    color: #fff;
}

.help-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    min-width: 170px;
    z-index: 1100;
    overflow: hidden;
}

.help-user-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    box-sizing: border-box;
}

.help-user-menu-item:hover {
    background: #f0f2f5;
    color: #1B2A4A;
}

.help-user-menu-item i {
    font-size: 16px;
    color: #6c757d;
}

.help-user-menu-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Google Translate widget: suppress its top banner. The banner is an iframe injected above
   <body> (which it shifts down with body{top:40px}); it overlays the Atlas header and swallows
   clicks on the user menu, and the language is ours to control — not the banner's. */
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate iframe,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Atlas language row in the user menu — a native select so the menu's own click handling is untouched. */
.help-user-menu-lang {
    cursor: default;
}

.help-user-menu-lang:hover {
    background: none;
}

.help-user-menu-select {
    flex: 1;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
}

.help-user-menu-item.danger {
    color: #dc3545;
}

.help-user-menu-item.danger i {
    color: #dc3545;
}

.help-user-menu-divider {
    height: 1px;
    background: #e9ecef;
    margin: 2px 0;
}

.help-dropdown-wrapper {
    position: relative;
}

.help-menu-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* --- Help Page Actions (MudMenu dropdown) --- */

.help-page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
}

/* --- Help Language Selector --- */

.help-lang-selector {
    display: flex;
    align-items: center;
}

.help-lang-dropdown {
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
}

.help-lang-dropdown:hover {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
}

.help-lang-dropdown option {
    color: #333;
    background: #fff;
}

/* --- Help View Source --- */

.help-source-view {
    background: #f5f7fb;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
    overflow: auto;
    max-height: 60vh;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* --- Help Revision View (history dialog) --- */

.help-revision-view {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px 24px;
    overflow: auto;
    max-height: 60vh;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
}

.help-revision-view img {
    max-width: 100%;
    height: auto;
}

/* --- Help Edit Page --- */

.help-edit-page {
    padding: 16px 32px 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.help-edit-header {
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.help-edit-header h2 {
    color: #1B2A4A;
    font-size: 1.4rem;
    margin: 0;
}

/* --- Subtabs (Page Info / Content) --- */
/* Styled to match the main navigation tab appearance, not MudTabs. */

.help-edit-subtabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #cdd3dc;
    margin-bottom: 16px;
    flex: 0 0 auto;
}

.help-edit-subtab {
    appearance: none;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
    transition: background 0.15s ease, color 0.15s ease;
}

.help-edit-subtab:hover {
    background: #f0f4f8;
    color: #27325e;
}

.help-edit-subtab.active {
    background: #fff;
    color: #27325e;
    border-color: #cdd3dc;
    border-bottom-color: #fff;
    font-weight: 600;
}

.help-edit-subtab-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
    /* Page Info panel scrolls internally when its fields exceed the available height;
       the Publish toggle + Save/Cancel footer below stay anchored. */
    overflow-y: auto;
    padding: 4px 4px 8px 0;
}

.help-edit-subtab-panel.hidden {
    display: none;
}

/* Content subtab: editor handles its own scrolling inside the Quill container, so
   don't double-scroll on the panel itself. */
.help-edit-subtab-panel--content {
    gap: 0;
    overflow: hidden;
}

.help-edit-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.help-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.help-edit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.help-edit-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
}

.help-edit-required {
    color: #c0392b;
}

.help-edit-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

.help-edit-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.15);
}

.help-edit-input:disabled {
    background: #f5f7fb;
    color: #888;
}

.help-edit-hint {
    font-size: 0.78rem;
    color: #888;
}

/* Quill editor container */

.help-quill-wrap {
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    overflow: hidden;
}

/* Fill the Content subtab: toolbars stay at the top, the editor area grows
   and scrolls internally so the toolbar is always visible while editing. */
.help-quill-wrap--fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.help-quill-wrap--fill .help-quill-toolbar-extra,
.help-quill-wrap--fill .ql-toolbar {
    flex: 0 0 auto;
}

.help-quill-wrap--fill .ql-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.help-quill-wrap--fill .ql-editor {
    height: 100%;
    overflow-y: auto;
}

.help-quill-editor--fill {
    flex: 1 1 auto;
    min-height: 0;
}

.help-quill-toolbar-extra {
    background: #f5f7fb;
    border-bottom: 1px solid #cdd3dc;
    padding: 4px 8px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.help-quill-img-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #cdd3dc;
    border-radius: 4px;
    background: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    color: #1B2A4A;
}

.help-quill-img-btn:hover {
    background: #eef1f7;
}

.help-quill-editor {
    min-height: 320px;
    font-size: 0.95rem;
    background: #fff;
}

.help-quill-wrap .ql-editor {
    background: #fff;
}

/* Quill overrides — ensure the toolbar+editor sit inside our wrapper */
.help-quill-wrap .ql-toolbar {
    border: none;
    border-bottom: 1px solid #cdd3dc;
}

.help-quill-wrap .ql-container {
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
}

/* Document import drop zone */

.help-doc-drop-zone {
    border: 2px dashed #c7d0df;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    background: #f9fafc;
    color: #666;
    font-size: 0.875rem;
    transition: border-color 0.15s, background 0.15s;
}

.help-doc-drop-zone:hover {
    border-color: #3498db;
    background: #f0f6ff;
}

.help-doc-drop-zone.dropzone-active {
    border-color: #2196F3;
    background: #e3f2fd;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

/* Drafts badge in header */

.help-drafts-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.15s;
}

.help-drafts-badge:hover {
    background: rgba(255,255,255,0.1);
}

.help-drafts-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff9800;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
}

.help-drafts-menu {
    max-height: 400px;
    overflow: visible;
    overflow-y: auto;
    min-width: 420px;
    right: 0;
    width: 420px;
}

.help-drafts-menu-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
}

.help-draft-row {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.help-draft-row:last-child {
    border-bottom: none;
}

.help-draft-row:hover {
    background: #f8f9fa;
}

.help-draft-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1B2A4A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-draft-row:hover .help-draft-title {
    color: #3498db;
}

.help-draft-meta {
    font-size: 0.75rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-doc-browse-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px solid #c7d0df;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.875rem;
    color: #1B2A4A;
    transition: background 0.15s;
}

.help-doc-browse-btn:hover {
    background: #eef1f7;
}

.help-doc-import-status {
    margin-top: 8px;
    font-size: 0.82rem;
    color: #2e7d32;
}

.help-doc-import-status.error {
    color: #c0392b;
}

/* Edit/publish checkbox */

/* Publish toggle sits between the subtab panels and the Save/Cancel actions row. */
.help-edit-publish-toggle {
    flex: 0 0 auto;
    padding: 4px 0 8px 0;
}

.help-edit-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Edit action buttons */

.help-edit-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

/* --- Help Tab System (Atlas Knowledge Base) --- */

.help-tab-system {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

.help-tab-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Small-screen nav toggle — hidden on desktop, shown in the tab bar under 768px. */
.help-sidebar-toggle {
    display: none;
    border: none;
    background: transparent;
    color: #1B2A4A;
    font-size: 1.3rem;
    padding: 2px 10px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Small screens: content owns the viewport. The sidebar is hidden by default and
   opens as a drawer over the content while navigating (helpToggleSidebar); it
   closes on topic pick or any tap outside. */
@media (max-width: 768px) {
    .help-tab-system {
        position: relative;
    }
    .help-sidebar-toggle {
        display: block;
    }
    .help-tab-system .help-doc-sidebar {
        display: none;
    }
    .help-tab-system.sidebar-open .help-doc-sidebar {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        min-width: 0;
        max-height: none; /* the legacy ≤768px rule caps .help-doc-sidebar at 300px */
        z-index: 1200;
        box-shadow: 4px 0 18px rgba(0,0,0,0.35);
    }
    .help-tab-system .help-tab-right {
        flex: 1;
        min-width: 0;
        min-height: 0;
    }
}

.help-tab-bar-container {
    display: flex;
    align-items: stretch;
    background: #f0f2f5;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    min-height: 34px;
}

.help-tab-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.help-tab-scroll-btn:hover {
    background: #e9ecef;
    color: #333;
}

.help-tab-bar {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1px;
    padding: 4px 2px 0 2px;
    scroll-behavior: smooth;
}

.help-tab-bar::-webkit-scrollbar {
    display: none;
}

.help-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
    margin-bottom: -1px;
    color: #6c757d;
    user-select: none;
    max-width: 200px;
    transition: background 0.1s;
}

.help-tab:hover {
    background: #fff;
    color: #333;
}

.help-tab.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    z-index: 1;
    font-weight: 600;
    color: #1B2A4A;
    border-top: 3px solid #1B2A4A;
}

.help-tab.dirty .help-tab-title::after {
    content: ' *';
    color: #e67e22;
}

.help-tab.dragging {
    opacity: 0.5;
}

.help-tab.drag-over {
    border-left: 2px solid #3498db;
}

.help-tab i:first-child {
    font-size: 13px;
    flex-shrink: 0;
}

.help-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.help-tab-dirty {
    color: #e67e22;
    font-weight: bold;
}

.help-tab-favorite {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #ccc;
    font-size: 11px;
    flex-shrink: 0;
}

.help-tab-favorite .bi-star-fill {
    color: #f59e0b;
}

.help-tab-favorite:hover {
    color: #f59e0b;
}

.help-tab-close {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #999;
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.help-tab:hover .help-tab-close,
.help-tab.active .help-tab-close {
    opacity: 1;
}

.help-tab-close:hover {
    color: #dc3545;
}

.help-tab-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.help-tab-panel {
    height: 100%;
    overflow-y: auto;
    padding: 16px 24px;
}

.help-tab-panel.hidden {
    display: none;
}

.help-tab-panel.active {
    display: block;
}

/* --- Help Dashboard (Home Tab) --- */

.help-dashboard {
    padding: 8px 16px;
}

/* --- Dashboard Collection Expand/Collapse --- */

.help-dash-coll {
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 6px;
}

.help-dash-coll-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.help-dash-coll-header:hover {
    background: #f5f7fb;
}

.help-dash-coll-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1B2A4A;
}

.help-dash-coll-rename-input {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1B2A4A;
    border: 1px solid #3498db;
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
    min-width: 180px;
}

.help-dash-coll-count {
    font-size: 0.8rem;
    color: #8898aa;
    flex: 1;
}

.help-dash-coll-pages {
    border-top: 1px solid #e9ecef;
    padding: 4px 0 4px 28px;
}

.help-dash-coll-empty {
    color: #999;
    font-size: 0.85rem;
    padding: 6px 8px;
}

/* Dashboard draggable rows */
.help-dash-rows {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.help-dash-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    user-select: none;
}

.help-dash-row:last-child {
    border-bottom: none;
}

.help-dash-row:hover {
    background: #f5f7fa;
}

.help-dash-row[draggable="true"] {
    cursor: grab;
}

.help-dash-row[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.6;
}

/* Prevent child elements from creating their own drag images */
.help-dash-row * {
    pointer-events: none;
}

/* Re-enable pointer events on interactive children */
.help-dash-row .mud-icon-button,
.help-dash-row a {
    pointer-events: auto;
}

.help-dash-drag-handle {
    opacity: 0.3;
    cursor: grab;
}

.help-dash-row:hover .help-dash-drag-handle {
    opacity: 0.6;
}

.help-dash-row-title {
    flex: 1;
    font-weight: 500;
    color: #1B2A4A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-dash-row-path {
    color: #8898aa;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.help-dash-row-time {
    color: #999;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

/* Drop target highlights */
.help-dash-coll-drop-active {
    outline: 2px dashed #3498db;
    outline-offset: 2px;
    background: #e8f4fd;
    border-radius: 4px;
}

.help-dash-newcoll-drop-active {
    background: #e8f4fd;
    border-radius: 4px;
    outline: 2px dashed #3498db;
    outline-offset: -2px;
    padding: 8px;
}

.help-dash-drop-hint {
    color: #3498db;
    font-size: 0.9rem;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #3498db;
    border-radius: 4px;
    background: #f0f7ff;
    margin-bottom: 8px;
    transition: background 0.15s;
}

.help-dash-drop-hint-active {
    background: #d4e9fd;
    border-color: #1a7fd4;
}

.help-dash-coll-page {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 3px;
}

.help-dash-coll-page:hover {
    background: #f5f7fb;
}

.help-dash-coll-page-link {
    font-size: 0.85rem;
    color: #1B2A4A;
    text-decoration: none;
    font-weight: 500;
}

.help-dash-coll-page-link:hover {
    text-decoration: underline;
}

.help-dash-coll-page-path {
    font-size: 0.75rem;
    color: #8898aa;
    flex: 1;
}

/* --- Help Page Toolbar (collection chips + print) --- */

.help-page-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.help-page-toolbar-collections {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* --- Collection Dialog Modal --- */

.help-collection-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-collection-modal {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    min-width: 360px;
    max-width: 460px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.help-collection-modal h4 {
    margin: 0 0 8px 0;
    color: #1B2A4A;
    font-size: 1.1rem;
}

.help-collection-modal-desc {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 12px 0;
}

.help-collection-modal-pages {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #f5f7fb;
    border-radius: 4px;
    font-size: 0.9rem;
}

.help-collection-modal-pages i {
    color: #8898aa;
    margin-right: 6px;
}

.help-collection-modal-select select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    font-size: 0.9rem;
    outline: none;
    margin-bottom: 8px;
}

.help-collection-modal-select select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.15);
}

.help-collection-modal-new input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    font-size: 0.9rem;
    outline: none;
    margin-bottom: 8px;
}

.help-collection-modal-new input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.15);
}

.help-collection-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.help-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
}

.help-btn-primary {
    background: #1B2A4A;
    color: #fff;
}

.help-btn-primary:hover {
    background: #243a62;
}

.help-btn-secondary {
    background: #e9ecef;
    color: #333;
}

.help-btn-secondary:hover {
    background: #dee2e6;
}

/* --- Collection Print Area (hidden on screen, shown in print) --- */

.help-collection-print-area {
    display: none;
}

.help-collection-print-page {
    page-break-after: always;
}

.help-collection-print-page:last-child {
    page-break-after: auto;
}

/* --- Print Styles --- */

@media print {
    /* Hide non-content elements */
    .help-doc-sidebar,
    .help-tab-bar-container,
    .help-header,
    .help-tab-scroll-btn,
    .help-page-toolbar,
    .help-chatbot-fab,
    .help-doc-interactive,
    .help-search-panel,
    .ql-search-panel,
    .help-collection-modal-overlay,
    .help-footer {
        display: none !important;
    }

    .help-collection-print-area {
        display: block !important;
    }

    /* When printing from collection view, hide the page list */
    .help-collection-header,
    .help-collection-view > .mud-table,
    .help-collection-view > .mud-alert {
        display: none !important;
    }

    /* Break EVERY ancestor out of fixed positioning and overflow clipping */
    .help-app-container,
    .help-content,
    .help-doc-container,
    .help-tab-system,
    .help-tab-right,
    .help-tab-content,
    .help-tab-panel,
    .help-tab-panel.active {
        display: block !important;
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .help-tab-panel {
        padding: 0 !important;
    }

    .help-tab-panel.hidden {
        display: none !important;
    }

    @page {
        margin: 0.75in;
    }
}

/* --- Help Search View (Search Tab) --- */

.help-search-view-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.help-search-view-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cdd3dc;
    border-radius: 5px;
    font-size: 0.9rem;
    outline: none;
}

.help-search-view-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.15);
}

.help-search-view-btn {
    padding: 8px 16px;
    background: #1B2A4A;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-search-view-btn:hover {
    background: #243a62;
}

/* --- Help Collection View --- */

.help-collection-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.help-collection-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.2rem;
    color: #1B2A4A;
}

.help-collection-count {
    font-size: 0.85rem;
    color: #888;
}

/* --- Quick Lookup Right-Dock Panel --- */

.ql-search-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    z-index: 1500;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease, width 0.3s ease;
}

.ql-search-panel.open {
    transform: translateX(0);
}

/* Atlas host override — POSITIONING ONLY; width/chrome/sections stay shared with SRM.
   SRM's dock is absolute inside a container that already starts below the header, so top:0 is
   correct there. Atlas's dock lives at the layout root, where top:0 is the top of the VIEWPORT —
   which slid the panel up over the fixed 56px header. Atlas has a fixed header (56px) and a
   fixed footer (36px), so the dock is fixed between them, exactly as .help-search-panel was
   before the two panels were unified. */
.ql-search-panel.ql-search-panel-help {
    position: fixed;
    top: 56px;
    bottom: 36px;
}

.ql-search-panel.collapsed {
    width: 40px;
    overflow: hidden;
}

.ql-search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e8ecf0;
    font-size: 0.9rem;
    color: #555;
    background: #f8f9fa;
    flex-shrink: 0;
    min-height: 44px;
}

.ql-search-panel-header strong {
    color: #1B2A4A;
}

.ql-search-panel-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ql-search-panel.collapsed .ql-search-panel-title {
    display: none;
}

.ql-search-panel-toggle {
    color: #888;
    font-size: 16px;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 8px;
    cursor: pointer;
    background: none;
    border: none;
}

.ql-search-panel-toggle:hover {
    color: #333;
}

.ql-search-panel.collapsed .ql-search-panel-toggle {
    margin-right: 0;
}

.ql-search-panel-close {
    color: #888;
    font-size: 14px;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 4px;
    cursor: pointer;
    background: none;
    border: none;
}

.ql-search-panel-close:hover {
    color: #dc3545;
}

.ql-search-panel.collapsed .ql-search-panel-close {
    display: none;
}

.ql-search-panel-body {
    overflow-y: auto;
    flex: 1;
}

.ql-search-panel.collapsed .ql-search-panel-body {
    display: none;
}

.ql-search-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 0.95rem;
}

/* --- Per-category section structure --- */
.ql-section {
    border-bottom: 1px solid #e9ecef;
}

.ql-loading-bar-small {
    height: 2px;
    background: linear-gradient(90deg, #1B2A4A 0%, #3498db 50%, #1B2A4A 100%);
    background-size: 200% 100%;
    animation: qlLoadingSlide 1.5s infinite;
    border-radius: 2px;
}

@@keyframes qlLoadingSlide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ql-cat-searching {
    padding: 8px 16px 10px;
}

/* Section body — animated expand/collapse via CSS grid trick */
.ql-section-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}

.ql-section-inner {
    overflow: hidden;
}

/* Collapse body when section has no results */
.ql-section-body.ql-section-empty {
    grid-template-rows: 0fr;
}

/* Results expand to natural height */
.ql-section-body.ql-section-loaded {
    grid-template-rows: 1fr;
}

/* Fade in results */
.ql-section-body .ql-result {
    animation: qlFadeIn 0.2s ease both;
}

@@keyframes qlFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Category headers */
.ql-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: #1B2A4A;
    cursor: pointer;
    user-select: none;
}

.ql-category-header:hover {
    background: #243456;
}

.ql-category-header i {
    font-size: 0.85rem;
    color: #fff;
}

.ql-cat-chevron {
    transition: transform 0.15s ease;
}

.ql-section.ql-section-collapsed .ql-cat-chevron {
    transform: rotate(-90deg);
}

.ql-section.ql-section-collapsed .ql-section-body {
    grid-template-rows: 0fr;
}

.ql-cat-status {
    font-weight: 400;
    font-size: 0.72rem;
    opacity: 0.7;
    letter-spacing: 0;
    text-transform: none;
    margin-left: auto;
}

.ql-load-more {
    display: block;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: #1B2A4A;
    text-decoration: none;
    cursor: pointer;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    transition: background 0.15s;
}

.ql-load-more:hover {
    background: #e9ecef;
    color: #0d1b2a;
}

.ql-load-more i {
    margin-right: 6px;
    font-size: 0.85rem;
}

/* Result items */
.ql-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.1s;
}

.ql-result:hover {
    background: #f5f7fb;
    text-decoration: none;
}

.ql-result-info {
    flex: 1;
    min-width: 0;
}

.ql-result-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1B2A4A;
    line-height: 1.3;
}

.ql-result-title mark {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

.ql-result-sub {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ql-result-snippet {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ql-result-snippet mark {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}


/* ============================================
   Cloud Logins Tab — 08.96.12825 SR 53059
   Per-subtab scroll: toolbar/header pinned, body scrolls.
   ============================================ */

/* When the host tab-panel renders Cloud Logins, suppress its own scrollbar
   so our internal subtab body owns the scroll. Mirrors .splitter-container hook. */
.tab-panel:has(.cloud-logins-root) {
    overflow: hidden;
}

.cloud-logins-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.cloud-logins-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cloud-logins-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.cloud-logins-tab-panel {
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* MudTabPanel wraps content in .mud-tab-panel; force it to flex too so our
   .cloud-logins-subtab can flex-grow inside. */
.cloud-logins-tabs .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.cloud-logins-subtab {
    flex: 1 1 auto;
}

.cloud-logins-subtab {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* 08.96.12825 SR 53059 — the guide panel keeps its natural height; the grid takes the rest. */
.cloud-logins-guide {
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cloud-logins-guide-steps,
.cloud-logins-guide-columns {
    margin: 0;
    padding-left: 1.5rem;
}

.cloud-logins-guide p {
    margin: 0 0 6px 0;
}

.cloud-logins-guide-columns {
    list-style: none;
    padding-left: 0.5rem;
}

.cloud-logins-subtab-toolbar {
    flex: 0 0 auto;
    padding: 16px 16px 8px 16px;
}

.cloud-logins-subtab-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* MudTable Height="100%" doesn't always plumb through; force the container to fill
   so that FixedHeader has a bounded scroll area. */
.cloud-logins-subtab-body .mud-table-container {
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto;
}

.cloud-logins-subtab-body .mud-table-root {
    height: auto;
}

/* The MudTable component-root wrapper needs to fill the subtab-body too. */
.cloud-logins-subtab-body > .mud-table {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Training-video embeds (SR 53208 v2 Wave B.1). The editor shows the div as a
   placeholder card; the viewer swaps it for the streaming player. */
.ql-editor .atlas-video-embed {
    border: 1px dashed #8898aa;
    border-radius: 6px;
    background: #f0f4f8;
    color: #1B2A4A;
    padding: 12px 16px;
    margin: 8px 0;
    font-weight: 500;
    cursor: default;
    user-select: none;
}
.help-doc-body .atlas-video-embed {
    margin: 12px 0;
}
.help-doc-body .atlas-video-embed video {
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    background: #000;
}
.atlas-video-unavailable {
    border: 1px dashed #bbb;
    border-radius: 4px;
    padding: 10px 14px;
    color: #555;
    font-style: italic;
}

/* Training-video player layout: player left, collapsible transcript panel right
   (SR 53208 — panel-right revision). Collapse state persists per video. */
.atlas-video-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    /* YouTube-style: the player and transcript share one viewport-capped band. */
    --tv-band-height: calc(100vh - 240px);
}
.atlas-video-main {
    flex: 1;
    min-width: 0;
    /* The embed path renders the player as a plain full-width block (no side
       panel) — give the band cap a home outside .atlas-video-layout. */
    --tv-band-height: calc(100vh - 240px);
}

/* Transcript in the page's ToC sidebar (video pages): same shell as the text-page
   ToC — the entries just inherit the chapter-row look, not the old side-panel box. */
.help-doc-toc .atlas-video-chapters {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    padding: 0;
    order: 0;
    overflow-y: visible;
}
.atlas-video-main video {
    display: block;
    width: 100%;
    height: auto;
    /* Reserve a proper player box before (or without) metadata — otherwise the
       element renders as a thin full-width strip. Natural ratio wins once loaded. */
    aspect-ratio: auto 16 / 9;
    max-height: var(--tv-band-height);
    background: #000;
    border-radius: 6px;
}
.atlas-video-chapters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 300px;
    flex-shrink: 0;
    /* Left of the player — the transcript is the video's ToC, and the page ToC
       sits left in the standard layout. */
    order: -1;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    padding: 6px;
    /* Run the full band and scroll internally. */
    height: var(--tv-band-height);
    overflow-y: auto;
}
.atlas-video-chapters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #1B2A4A;
    padding: 2px 4px 6px 8px;
}
.atlas-video-chapters-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #1B2A4A;
    padding: 2px 6px;
    border-radius: 4px;
}
.atlas-video-chapters-toggle:hover {
    background: #c8dceb;
}
.atlas-video-chapters.collapsed {
    width: 40px;
    overflow: hidden;
}
.atlas-video-chapters.collapsed .atlas-video-chapter,
.atlas-video-chapters.collapsed .atlas-video-chapters-title {
    display: none;
}
.atlas-video-chapters.collapsed .atlas-video-chapters-header {
    padding: 2px;
    justify-content: center;
}
@media (max-width: 900px) {
    /* Narrow viewport: stack like YouTube mobile — video full-width on top,
       transcript below with its own bounded scroll. */
    .atlas-video-layout {
        flex-direction: column;
    }
    .atlas-video-chapters,
    .atlas-video-chapters.collapsed {
        width: 100%;
        height: auto;
        max-height: 45vh;
        order: 1; /* stacked mode: video first, transcript below */
    }
}
.atlas-video-chapter {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    border: none;
    background: transparent;
    text-align: left;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #1B2A4A;
    font-size: 0.9rem;
}
.atlas-video-chapter:hover {
    background: #c8dceb;
}
.atlas-video-chapter-time {
    font-family: monospace;
    color: #667;
    min-width: 48px;
}

/* ============================================
   Announcements Tab — 08.96.12825
   Same flex idiom as the Cloud Logins tab: the sub-tab bar and the toolbar stay
   put, only the grid body scrolls, so the sticky header (Rule 17) has a bounded
   scroll area to be sticky inside.
   ============================================ */

.tab-panel:has(.announcements-root) {
    overflow: hidden;
}

.announcements-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* The house sub-tab container (.srm-tabs-container) is already flex; its content
   pane needs to hand its height down to the sub-tab so the grid can fill it. */
.announcements-root .srm-tabs-container {
    flex: 1 1 auto;
    min-height: 0;
}

.announcements-root .srm-tab-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.announcements-subtab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.announcements-subtab-toolbar {
    flex: 0 0 auto;
    padding: 12px 12px 8px 12px;
}

.announcements-subtab-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 12px 12px 12px;
}

/* MudTable Height="100%" does not always plumb through; the container has to fill
   the body so FixedHeader has something bounded to stick to. */
.announcements-subtab-body .mud-table-container {
    height: 100%;
    max-height: 100%;
    flex: 1 1 auto;
}

.announcements-subtab-body .mud-table-root {
    height: auto;
}

.announcements-subtab-body > .mud-table {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* An inactive announcement is still listed — greyed, not hidden, so its audit
   stays one click away. */
.announcements-inactive td {
    color: #9aa0a6;
    font-style: italic;
}

.announcements-count {
    flex: 0 0 auto;
    padding: 4px 12px 8px 12px;
    font-size: 12px;
    color: #6c757d;
}

/* The editor's Quill instance: fixed height so the dialog does not grow with the body. */
.announcement-editor .ql-container {
    height: 220px;
    overflow: hidden;
}

.announcement-editor .ql-editor {
    height: 100%;
    overflow-y: auto;
}

.announcement-picker-list {
    max-height: 220px;
    overflow-y: auto;
}

/* CHG 26/09/09    JAKE    08.96.12825    Announcements — the editor's Message / Targets tabs
   The dialog's tabs are the house .srm-tab-bar tabs (Rule 16). The container is flex-based and a
   dialog gives it no height to divide, so it is stated here; without it the panels collapse to the
   height of whichever one is showing and the dialog jumps on every tab switch. */
.announcement-dialog-tabs {
    min-height: 560px;
}

.announcement-dialog-tabs .srm-tab-content {
    padding: 12px;
}

/* Both panels stay in the DOM — the Quill host cannot be unrendered without losing the editor —
   so the hidden one is hidden inline (display:none), not removed. */
.announcement-dialog-panel {
    width: 100%;
}

.announcement-targets-note {
    color: #6c757d;
}