/* _content/OEAI.Apps.SaaS/Chits/Components/ChitBankPanel.razor.rz.scp.css */
/* ChitBankPanel Styles
   COMMENT: Grid layout for displaying chits with selection and filtering
   IMPLICATION: Responsive grid adapts to container width
*/

.chit-bank-panel[b-ljvliizakx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    /* Horizontal padding is supplied by the inner `.chit-grid` so it lines up */
    /* with `.ds-kpi-row` / `.content-view-toolbar` / `.modern-page-header` */
    /* (all at 2.5rem). Previously this panel claimed its own 1.5rem and the */
    /* grid added another 0.75rem on top — total 2.25rem — leaving the cards */
    /* 4px to the left of the KPIs and the rightmost card visibly short of */
    /* the KPI right edge. */
    padding: 0;
}

/* Note: Toolbar removed - filters now in parent ChitBank.razor header */

/* Inline date marker — sits in the flat .chit-grid alongside cards, so a new   */
/* date can begin mid-row instead of forcing a row break. Date tiles intentionally */
/* take ~1/3 the width of a card (1 grid column vs the card's 3-column span) so   */
/* they read as dividers, not evidence. Per user 2026-05-17 follow-up:            */
/* "can we make the date only cards much narrower so they take up less space      */
/* but are still obvious? maybe a third of the current width?"                    */
.date-marker[b-ljvliizakx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(180deg, #f3f7fc 0%, #e7eef7 100%);
    border: 1px dashed #b9c8db;
    border-radius: 8px;
    padding: 0.5rem 0.35rem;
    color: #2E74B5;
    text-align: center;
    /* Stretch to match the row's card height so the row doesn't collapse. */
    align-self: stretch;
}

.date-marker-icon[b-ljvliizakx] {
    font-size: 1.1rem;
    opacity: 0.85;
}

.date-marker-title[b-ljvliizakx] {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    line-height: 1.15;
    /* Allow long labels like "15 May 2025" to wrap rather than overflow */
    word-break: keep-all;
}

/* Loading State */
.loading-container[b-ljvliizakx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #666;
}

.loading-container .fa-spinner[b-ljvliizakx] {
    color: #2E74B5;
}

/* Empty State */
.empty-state[b-ljvliizakx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    color: #666;
}

.empty-icon[b-ljvliizakx] {
    font-size: 4rem;
    color: #ccc;
}

.empty-state h3[b-ljvliizakx] {
    margin: 0;
    color: #333;
}

.empty-state p[b-ljvliizakx] {
    margin: 0;
    max-width: 300px;
}

/* Chit Grid — narrow sub-tracks so the date marker (span 1) can be ~1/3 of a */
/* card (span 3). Effective card width = 3*minTrack + 2*gap = 3*66 + 2*12 = 222px */
/* min, 3*80 + 2*12 = 264px max — close to the previous 220-240px window. The */
/* date marker takes one track (~66-80px), reading clearly as a divider rather */
/* than a tile of evidence. Per DESIGN-SYSTEM.md §9.4 we use `auto-fill` so */
/* partial rows reserve empty tracks (next date's cards backfill them). */
.chit-grid[b-ljvliizakx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 80px));
    gap: 0.75rem;
    /* 2.5rem horizontal gutter matches `.ds-kpi-row`, `.content-view-toolbar` */
    /* and `.modern-page-header`, so the card area's left/right edges line up */
    /* with the KPI strip above. Top gap comes from the content-view-toolbar's */
    /* 1rem bottom padding above; small bottom padding keeps cards off the   */
    /* page-end gutter. */
    padding: 0 2.5rem 0.75rem 2.5rem;
    /* `space-between` distributes the unused row width as extra gap between  */
    /* tracks so the rightmost card lands at the same x-offset as the rightmost */
    /* KPI — addresses "cards stop short of the right edge" feedback (2026-05-17). */
    /* With `auto-fill`, the empty trailing tracks share the distribution too, so  */
    /* partial date-group rows still feel balanced rather than left-clumped. */
    justify-content: space-between;
}

/* Chit Card — spans 3 sub-tracks to reach the canonical ~240px card width. */
.chit-card[b-ljvliizakx] {
    grid-column: span 3;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.chit-card:hover[b-ljvliizakx] {
    border-color: #2E74B5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chit-card.selected[b-ljvliizakx] {
    border-color: #2E74B5;
    background: #f0f7ff;
}

.chit-card-header[b-ljvliizakx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.chit-card-header input[type="checkbox"][b-ljvliizakx] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.chit-title[b-ljvliizakx] {
    flex: 1;
    font-weight: 500;
    font-size: 0.8rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chit-badges[b-ljvliizakx] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Always-visible actions row per AB#1747 / UX-CONSISTENCY-REVIEW.md §2.7. */
/* The legacy opacity:0 + max-height:0 + .chit-card:hover reveal pattern was retired — */
/* delete moved to the card header (§2.6), so the row no longer needs to expand on hover. */
/* `:empty` hides the row cleanly when there are no actions for the current card type. */
.chit-actions[b-ljvliizakx] {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem 0.5rem;
    background: #f0f4f8;
    border-bottom: 1px solid #e0e0e0;
}

.chit-actions:empty[b-ljvliizakx] {
    display: none;
}

/* Card-header delete button (§2.6). Reuses the .action-btn.danger colour treatment but */
/* sits inline with the badges in the header strip, so layout rules differ slightly. */
.chit-header-action-btn[b-ljvliizakx] {
    background: transparent;
    border: none;
    padding: 0.2rem 0.3rem;
    cursor: pointer;
    border-radius: 4px;
    color: #666;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.chit-header-action-btn:hover[b-ljvliizakx] {
    background: #e0e0e0;
    color: #333;
}

.chit-header-action-btn.danger:hover[b-ljvliizakx] {
    background: #ffebee;
    color: #c62828;
}

.action-btn[b-ljvliizakx] {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
}

.action-btn:hover[b-ljvliizakx] {
    background: #e0e0e0;
    color: #333;
}

.action-btn.danger:hover[b-ljvliizakx] {
    background: #ffebee;
    color: #c62828;
}

/* Image Container - show full image without blur/crop */
/* IMPLICATION: Uses contain to avoid cropping, crisp-edges for sharper scaling */
.chit-image-container[b-ljvliizakx] {
    height: 120px;
    background: #f8f9fa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chit-thumbnail[b-ljvliizakx] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Sharper image rendering - avoid browser smoothing that causes blur */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.no-image[b-ljvliizakx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 3rem;
}

/* Card Body - compact for smaller cards */
.chit-card-body[b-ljvliizakx] {
    padding: 0.5rem;
    min-height: 40px;
}

.chit-narrative[b-ljvliizakx] {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: #555;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chit-tags[b-ljvliizakx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag[b-ljvliizakx] {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.65rem;
}

.tag.more[b-ljvliizakx] {
    background: #f5f5f5;
    color: #666;
}

/* Card Footer - compact */
.chit-card-footer[b-ljvliizakx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
}

.chit-card-footer small[b-ljvliizakx] {
    color: #888;
    font-size: 0.65rem;
}

.ai-badge[b-ljvliizakx] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* Edit Form */
.edit-form[b-ljvliizakx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.edit-form .form-group[b-ljvliizakx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-form label[b-ljvliizakx] {
    font-weight: 600;
    color: #333;
}

/* View Tab Buttons - My Captures / Shared with Me / All */
.view-tabs[b-ljvliizakx] {
    display: flex;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.view-tab[b-ljvliizakx] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: none;
    border-right: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* Override Bootstrap 3 global button styles */
    display: inline-block;
    line-height: 1.4;
    min-height: 36px;
    margin: 0;
    vertical-align: middle;
    box-shadow: none;
    text-transform: none;
}

.view-tab:last-child[b-ljvliizakx] {
    border-right: none;
}

.view-tab:hover[b-ljvliizakx] {
    background: #f5f7fa;
    color: #333;
}

.view-tab.active[b-ljvliizakx] {
    background: #2E74B5;
    color: #fff;
}

/* Shared Item Card Styling — blue left border for items shared with the user */
.chit-card.shared-item[b-ljvliizakx] {
    border-left: 4px solid #2E74B5;
}

.shared-by-banner[b-ljvliizakx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 0.7rem;
    font-weight: 500;
}

.shared-by-banner i[b-ljvliizakx] {
    font-size: 0.65rem;
}

/* Share count indicator on owned chits */
.share-indicator[b-ljvliizakx] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: #2E74B5;
    font-weight: 500;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    background: #e3f2fd;
}

.share-indicator i[b-ljvliizakx] {
    font-size: 0.6rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chit-grid[b-ljvliizakx] {
        grid-template-columns: 1fr;
    }

    /* Reset the desktop column-span trick on mobile — single full-width column. */
    .chit-card[b-ljvliizakx],
    .date-marker[b-ljvliizakx] {
        grid-column: auto;
    }

    .view-tabs[b-ljvliizakx] {
        width: 100%;
    }

    .view-tab[b-ljvliizakx] {
        flex: 1;
        text-align: center;
    }
}
/* _content/OEAI.Apps.SaaS/Chits/Components/ChitCaptureButton.razor.rz.scp.css */
/* ChitCaptureButton Styles
   COMMENT: Floating action button for screen capture
   IMPLICATION: Z-index must be high enough to overlay content but below modals
*/

.chit-capture-container[b-v8378n19o9] {
    position: fixed;
    z-index: 999;
    cursor: grab;
    transition: transform 0.2s ease;
}

.chit-capture-container:hover[b-v8378n19o9] {
    transform: scale(1.1);
}

.chit-capture-container:active[b-v8378n19o9] {
    cursor: grabbing;
}

/* Override Syncfusion button styles for camera icon */
[b-v8378n19o9] .chit-capture-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    background-color: #2E74B5 !important;
    border-color: #2E74B5 !important;
}

[b-v8378n19o9] .chit-capture-btn:hover {
    background-color: #1a5a94 !important;
    border-color: #1a5a94 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

[b-v8378n19o9] .chit-capture-btn:active {
    transform: scale(0.95);
}

[b-v8378n19o9] .chit-capture-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-v8378n19o9] .chit-capture-btn .e-btn-icon {
    font-size: 20px !important;
}
/* _content/OEAI.Apps.SaaS/Chits/Components/ChitCaptureModal.razor.rz.scp.css */
/* ChitCaptureModal Styles
   COMMENT: Styles for the capture modal dialog
   IMPLICATION: Uses Syncfusion dialog, so most styling is on inner content
*/

.capture-modal-content[b-5t0pc64sq0] {
    padding: 1rem;
}

/* Crop Section */
.crop-section[b-5t0pc64sq0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crop-toolbar[b-5t0pc64sq0] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;
}

/* Toolbar buttons - visible icons with clear styling */
/* IMPLICATION: Using Font Awesome icons for consistent visibility */
.toolbar-btn[b-5t0pc64sq0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover[b-5t0pc64sq0] {
    background: #e9ecef;
    border-color: #2E74B5;
    color: #2E74B5;
}

.toolbar-btn i[b-5t0pc64sq0] {
    font-size: 14px;
}

/* Spacer to push upload button to the right */
.toolbar-spacer[b-5t0pc64sq0] {
    flex: 1;
}

/* Upload button styling */
/* IMPLICATION: Allows users to upload their own screenshots (esp. for Power BI) */
.upload-btn[b-5t0pc64sq0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: #2E74B5;
    border: 1px solid #2E74B5;
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn:hover[b-5t0pc64sq0] {
    background: #245d94;
    border-color: #245d94;
}

.upload-btn i[b-5t0pc64sq0] {
    font-size: 0.85rem;
}

/* Power BI notice banner */
/* IMPLICATION: Informs users why PBI content cannot be captured directly */
.pbi-notice[b-5t0pc64sq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 0.85rem;
}

.pbi-notice i[b-5t0pc64sq0] {
    color: #ffc107;
    font-size: 1rem;
}

.crop-container[b-5t0pc64sq0] {
    max-height: 500px;
    overflow: hidden;
    background: #333;
    border-radius: 4px;
}

.crop-container img[b-5t0pc64sq0] {
    max-width: 100%;
    display: block;
}

/* Annotate Section */
.annotate-section[b-5t0pc64sq0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preview-container[b-5t0pc64sq0] {
    text-align: center;
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    max-height: 300px;
    overflow: hidden;
}

.preview-image[b-5t0pc64sq0] {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group[b-5t0pc64sq0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-5t0pc64sq0] {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.narrative-actions[b-5t0pc64sq0] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

/* Ask Marge Button - Green with sparkles icon */
/* IMPLICATION: Consistent with Marge AI styling throughout the app */
.ask-marge-btn[b-5t0pc64sq0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #10b981;
    border: 1px solid #10b981;
    border-radius: 6px;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ask-marge-btn:hover:not(:disabled)[b-5t0pc64sq0] {
    background: #059669;
    border-color: #059669;
    transform: translateY(-1px);
}

.ask-marge-btn:disabled[b-5t0pc64sq0] {
    opacity: 0.7;
    cursor: not-allowed;
}

.ask-marge-btn.generating[b-5t0pc64sq0] {
    background: #059669;
}

.ask-marge-btn svg[b-5t0pc64sq0] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Small spinner for loading state */
.spinner-small[b-5t0pc64sq0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5t0pc64sq0 0.8s linear infinite;
}

@keyframes spin-b-5t0pc64sq0 {
    to { transform: rotate(360deg); }
}

[b-5t0pc64sq0] .narrative-input {
    min-height: 100px;
}

[b-5t0pc64sq0] .narrative-input textarea {
    min-height: 100px !important;
    resize: vertical;
}

.ai-indicator[b-5t0pc64sq0] {
    color: #2E74B5;
    font-style: italic;
    margin-top: 0.25rem;
}

[b-5t0pc64sq0] .tags-input {
    width: 100%;
}

.metadata-display[b-5t0pc64sq0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.metadata-display small[b-5t0pc64sq0] {
    color: #666;
    font-size: 0.8rem;
}

.metadata-display strong[b-5t0pc64sq0] {
    color: #333;
}

/* Cropper.js overrides */
[b-5t0pc64sq0] .cropper-container {
    max-height: 500px !important;
}

[b-5t0pc64sq0] .cropper-view-box,
[b-5t0pc64sq0] .cropper-face {
    border-radius: 0;
}

[b-5t0pc64sq0] .cropper-line,
[b-5t0pc64sq0] .cropper-point {
    background-color: #2E74B5;
}
/* _content/OEAI.Apps.SaaS/Chits/Components/ChitDetailViewer.razor.rz.scp.css */
/* ChitDetailViewer Styles
   COMMENT: Split layout — full image left, metadata + comments right
   IMPLICATION: 950px modal with 55/45 split
*/

.detail-viewer-content[b-72iuin3t1w] {
    display: flex;
    gap: 1rem;
    height: calc(85vh - 110px);
    overflow: hidden;
}

/* Left panel: Full-size image */
.detail-image-panel[b-72iuin3t1w] {
    flex: 0 0 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    min-height: 300px;
}

.detail-full-image[b-72iuin3t1w] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}

.detail-full-image:hover[b-72iuin3t1w] {
    opacity: 0.9;
}

.detail-no-image[b-72iuin3t1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #ccc;
    font-size: 3rem;
}

.detail-no-image span[b-72iuin3t1w] {
    font-size: 0.9rem;
}

/* Right panel: Metadata + Narrative + Comments */
.detail-info-panel[b-72iuin3t1w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    padding-right: 0.25rem;
    min-height: 0;
}

/* Metadata section */
.detail-meta-section[b-72iuin3t1w] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.detail-title[b-72iuin3t1w] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.detail-meta-row[b-72iuin3t1w] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.detail-meta-row i[b-72iuin3t1w] {
    font-size: 0.75rem;
    color: #999;
    width: 14px;
    text-align: center;
}

.detail-meta-row.shared-by[b-72iuin3t1w] {
    color: #1565c0;
}

.detail-meta-row.shared-by i[b-72iuin3t1w] {
    color: #1565c0;
}

.detail-tags[b-72iuin3t1w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.detail-tag[b-72iuin3t1w] {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

/* Narrative section */
.detail-narrative-section[b-72iuin3t1w] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    max-height: 35%;
    overflow-y: auto;
    flex-shrink: 1;
}

.section-header[b-72iuin3t1w] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.section-header i[b-72iuin3t1w] {
    color: #2E74B5;
    font-size: 0.8rem;
}

.ai-badge-small[b-72iuin3t1w] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
}

.detail-narrative-text[b-72iuin3t1w] {
    margin: 0;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Owner-editable narrative textarea per AB#1747 §2.5. Mirrors the
   read-only `.detail-narrative-text` typography so the surface reads as
   the same field, just editable. */
.detail-narrative-editor[b-72iuin3t1w] {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: #1f2937;
    line-height: 1.5;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    resize: vertical;
    min-height: 4.5em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.detail-narrative-editor:hover[b-72iuin3t1w] {
    border-color: #9ca3af;
}

.detail-narrative-editor:focus[b-72iuin3t1w] {
    outline: none;
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.15);
}

.narrative-save-state[b-72iuin3t1w] {
    margin-left: auto;
    font-size: 0.75rem;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.narrative-save-state.narrative-saved[b-72iuin3t1w] {
    color: #15803d;
}

/* Comments section */
.detail-comments-section[b-72iuin3t1w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.comments-loading[b-72iuin3t1w],
.comments-empty[b-72iuin3t1w] {
    text-align: center;
    padding: 1rem;
    color: #888;
    font-size: 0.8rem;
}

.comments-loading i[b-72iuin3t1w] {
    color: #2E74B5;
    margin-right: 0.3rem;
}

.comments-thread[b-72iuin3t1w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
    min-height: 60px;
}

.comment-item[b-72iuin3t1w] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.comment-avatar[b-72iuin3t1w] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2E74B5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.comment-body[b-72iuin3t1w] {
    flex: 1;
    min-width: 0;
}

.comment-header[b-72iuin3t1w] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.comment-author[b-72iuin3t1w] {
    font-weight: 600;
    font-size: 0.75rem;
    color: #333;
}

.comment-time[b-72iuin3t1w] {
    font-size: 0.65rem;
    color: #999;
}

.comment-delete-btn[b-72iuin3t1w] {
    background: transparent;
    border: none;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
    color: #ccc;
    font-size: 0.65rem;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: auto;
}

.comment-item:hover .comment-delete-btn[b-72iuin3t1w] {
    opacity: 1;
}

.comment-delete-btn:hover[b-72iuin3t1w] {
    color: #c62828;
    background: #ffebee;
}

.comment-text[b-72iuin3t1w] {
    font-size: 0.8rem;
    color: #444;
    line-height: 1.4;
    word-break: break-word;
}

/* @mention highlight in rendered comments */
.mention-highlight[b-72iuin3t1w] {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.8rem;
}

/* Comment input */
.comment-input-container[b-72iuin3t1w] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    margin-top: 0.5rem;
}

.comment-input-wrapper[b-72iuin3t1w] {
    flex: 1;
}

.comment-input[b-72iuin3t1w] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.comment-input:focus[b-72iuin3t1w] {
    border-color: #2E74B5;
}

.comment-send-btn[b-72iuin3t1w] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #2E74B5;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background 0.2s ease;
}

.comment-send-btn:hover:not(:disabled)[b-72iuin3t1w] {
    background: #1a5c94;
}

.comment-send-btn:disabled[b-72iuin3t1w] {
    background: #ccc;
    cursor: not-allowed;
}

/* @mention dropdown */
.mention-dropdown[b-72iuin3t1w] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-bottom: 4px;
}

.mention-item[b-72iuin3t1w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mention-item:hover[b-72iuin3t1w],
.mention-item.selected[b-72iuin3t1w] {
    background: #f0f7ff;
}

.mention-avatar[b-72iuin3t1w] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e3f2fd;
    color: #1565c0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.mention-info[b-72iuin3t1w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mention-name[b-72iuin3t1w] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
}

.mention-detail[b-72iuin3t1w] {
    font-size: 0.7rem;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .detail-viewer-content[b-72iuin3t1w] {
        flex-direction: column;
    }

    .detail-image-panel[b-72iuin3t1w] {
        flex: none;
        max-height: 250px;
    }
}
/* _content/OEAI.Apps.SaaS/Chits/Components/ChitReportBuilderModal.razor.rz.scp.css */
/* ChitReportBuilderModal Styles
   COMMENT: Styles for the report generation modal
   IMPLICATION: Uses Syncfusion dialog components
*/

.report-builder-content[b-osvb99oxl2] {
    padding: 1rem;
    min-height: 400px;
}

/* Sections */
.section[b-osvb99oxl2] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.section:last-child[b-osvb99oxl2] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section h4[b-osvb99oxl2] {
    margin: 0 0 1rem;
    color: #2E74B5;
    font-size: 1rem;
    font-weight: 600;
}

/* Form Groups */
.form-group[b-osvb99oxl2] {
    margin-bottom: 1rem;
}

.form-group label[b-osvb99oxl2] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

[b-osvb99oxl2] .title-input {
    font-weight: 500;
}

/* Checkbox Groups */
.checkbox-group[b-osvb99oxl2] {
    margin-bottom: 0.75rem;
}

.nested-option[b-osvb99oxl2] {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-osvb99oxl2] .nested-option .e-radio-wrapper {
    margin-bottom: 0.25rem;
}

/* Chit Summary */
.chit-summary[b-osvb99oxl2] {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    border: none !important;
}

.chit-summary p[b-osvb99oxl2] {
    margin: 0 0 0.5rem;
    color: #555;
}

.chit-summary p:last-child[b-osvb99oxl2] {
    margin-bottom: 0;
}

.ai-note[b-osvb99oxl2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2E74B5;
    font-size: 0.9rem;
}

.ai-note .e-icons[b-osvb99oxl2] {
    font-size: 1rem;
}

/* Generation Overlay */
.generating-overlay[b-osvb99oxl2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 300px;
    text-align: center;
}

.generating-overlay h3[b-osvb99oxl2] {
    margin: 0;
    color: #333;
}

.generating-overlay p[b-osvb99oxl2] {
    margin: 0;
    color: #666;
}

.generating-overlay .fa-spinner[b-osvb99oxl2] {
    color: #2E74B5;
}

/* Radio button fixes */
[b-osvb99oxl2] .e-radio-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive */
@media (max-width: 600px) {
    .nested-option[b-osvb99oxl2] {
        margin-left: 0.5rem;
        padding-left: 0.75rem;
    }
}
/* _content/OEAI.Apps.SaaS/Chits/Components/ChitReportHistoryModal.razor.rz.scp.css */
/* ChitReportHistoryModal Styles */

.report-history-content[b-d26t34twmh] {
    min-height: 300px;
}

/* Loading State */
.loading-container[b-d26t34twmh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #666;
}

.loading-container .fa-spinner[b-d26t34twmh] {
    color: #2E74B5;
}

/* Empty State */
.empty-state[b-d26t34twmh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    text-align: center;
    color: #666;
}

.empty-icon[b-d26t34twmh] {
    font-size: 3rem;
    color: #ccc;
}

.empty-state h3[b-d26t34twmh] {
    margin: 0;
    color: #333;
}

.empty-state p[b-d26t34twmh] {
    margin: 0;
}

/* Row-action cluster styles previously lived here as `.action-buttons` —
   removed in favour of the canonical `.row-actions` from
   wwwroot/css/governance-v2/tables.css (DESIGN-SYSTEM.md §14). */
/* _content/OEAI.Apps.SaaS/Chits/Components/ChitSharePicker.razor.rz.scp.css */
/* ChitSharePicker Styles
   COMMENT: User/group picker for sharing evidence items
   IMPLICATION: Must match the existing modal and chip styling conventions
*/

.share-picker-content[b-77x6zffmis] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 450px;
}

/* Search input section */
.search-section[b-77x6zffmis] {
    margin-bottom: 0.25rem;
}

[b-77x6zffmis] .share-search-input {
    width: 100%;
}

/* Selected recipients chip display */
.selected-chips[b-77x6zffmis] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    max-height: 100px;
    overflow-y: auto;
}

.recipient-chip[b-77x6zffmis] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.2s;
}

.recipient-chip.group-chip[b-77x6zffmis] {
    background: #e8f5e9;
    color: #2e7d32;
}

.chip-icon[b-77x6zffmis] {
    font-size: 0.7rem;
    opacity: 0.7;
}

.chip-remove[b-77x6zffmis] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 0.15rem;
    font-size: 0.75rem;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
    line-height: 1;
}

.chip-remove:hover[b-77x6zffmis] {
    opacity: 1;
}

/* Search results list */
.search-results[b-77x6zffmis] {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.search-result-item[b-77x6zffmis] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.search-result-item:last-child[b-77x6zffmis] {
    border-bottom: none;
}

.search-result-item:hover[b-77x6zffmis] {
    background: #f5f7fa;
}

.search-result-item.selected[b-77x6zffmis] {
    background: #e3f2fd;
}

.result-icon[b-77x6zffmis] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a6d82;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.search-result-item.selected .result-icon[b-77x6zffmis] {
    background: #bbdefb;
    color: #1565c0;
}

.result-info[b-77x6zffmis] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow: hidden;
}

.result-name[b-77x6zffmis] {
    font-weight: 500;
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-email[b-77x6zffmis] {
    color: #888;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-members[b-77x6zffmis] {
    color: #2e7d32;
    font-size: 0.75rem;
}

.result-check[b-77x6zffmis] {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.result-check .fa-check-circle[b-77x6zffmis] {
    color: #2E74B5;
    font-size: 1rem;
}

/* Loading and empty states */
.search-loading[b-77x6zffmis],
.no-results[b-77x6zffmis],
.search-hint[b-77x6zffmis] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: #888;
    font-size: 0.85rem;
}

.search-loading .fa-spinner[b-77x6zffmis] {
    color: #2E74B5;
}
/* _content/OEAI.Apps.SaaS/Components/Interventions/InterventionCard.razor.rz.scp.css */
/* InterventionCard scoped styles — compact card layout for the All Interventions
   card view and the Mission Control domain bands. Card is a clickable surface;
   the body @onclick opens the detail, action buttons in the footer stop propagation. */

.intervention-card[b-0pvdf2j1k6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
    /* Status-coloured left edge — gives at-a-glance status feedback in dense card grids. */
    border-left: 3px solid #6b7280;
    /* Belt-and-braces: clip any oversized footer content (long date ranges + action
       icons) to the card. The card-meta flex shrink rules below should already prevent
       overflow, but overflow:hidden guarantees an action icon can never appear OUTSIDE
       the rounded border (the bug visible when a 30-char date range pushed the play /
       trash / tick off the right edge). */
    overflow: hidden;
    /* Constrain max-width so cards inside grid tracks don't try to fit content width. */
    min-width: 0;
}

.intervention-card:hover[b-0pvdf2j1k6] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    border-color: #d1d5db;
}

.intervention-card:focus-visible[b-0pvdf2j1k6] {
    outline: 2px solid #0C5FE3;
    outline-offset: 2px;
}

/* Status accent on the left border */
.intervention-card.status-draft[b-0pvdf2j1k6]     { border-left-color: #9ca3af; }
.intervention-card.status-active[b-0pvdf2j1k6]    { border-left-color: #0C5FE3; }
.intervention-card.status-completed[b-0pvdf2j1k6] { border-left-color: #10b981; }
.intervention-card.status-cancelled[b-0pvdf2j1k6] { border-left-color: #6b7280; }
.intervention-card.overdue[b-0pvdf2j1k6]          { border-left-color: #dc2626; }

.card-header[b-0pvdf2j1k6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.card-title[b-0pvdf2j1k6] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    /* Long titles wrap cleanly inside the narrow card column; without this a
       long unbreakable token (e.g. "Personalised parental attendance...")
       overflows horizontally and breaks the grid layout. */
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    /* Allow up to 2 lines, then ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-chip[b-0pvdf2j1k6] {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.card-template[b-0pvdf2j1k6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.825rem;
    color: #6b7280;
}

.card-template i[b-0pvdf2j1k6] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.card-status-row[b-0pvdf2j1k6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.card-status-badge[b-0pvdf2j1k6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

.card-status-badge.status-draft[b-0pvdf2j1k6]     { background: #f3f4f6; color: #4b5563; }
.card-status-badge.status-active[b-0pvdf2j1k6]    { background: #dbeafe; color: #1d4ed8; }
.card-status-badge.status-completed[b-0pvdf2j1k6] { background: #d1fae5; color: #065f46; }
.card-status-badge.status-cancelled[b-0pvdf2j1k6] { background: #fee2e2; color: #991b1b; }

.intervention-card.overdue .card-status-badge.status-active[b-0pvdf2j1k6] {
    /* Override: an overdue Active instance reads as a warning, not a neutral active. */
    background: #fee2e2;
    color: #991b1b;
}

.card-status-badge i[b-0pvdf2j1k6] {
    font-size: 0.7rem;
}

.card-days-remaining[b-0pvdf2j1k6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.card-progress[b-0pvdf2j1k6] {
    height: 4px;
    background: #f3f4f6;
    border-radius: 2px;
    overflow: hidden;
}

.card-progress-fill[b-0pvdf2j1k6] {
    height: 100%;
    background: #0C5FE3;
    transition: width 250ms ease;
}

.intervention-card.overdue .card-progress-fill[b-0pvdf2j1k6] {
    /* Visual cue: overdue instances render the elapsed bar in red. */
    background: #dc2626;
}

.card-footer[b-0pvdf2j1k6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
    /* min-width: 0 lets nested ellipsis (.card-date-range) activate inside the flex chain. */
    min-width: 0;
}

/* .card-meta is the LEFT slot — it must be able to shrink so the .card-actions
   tick on the right stays inside the card. Without flex:1 1 auto + min-width:0,
   a long date range like "15 May 2026 - 15 Aug 2026" pushes .card-actions off the
   right edge of the card (visible bug: the ✓ icon ends up outside the rounded
   border on narrow card grids). flex:1 lets meta consume the available space and
   shrink when content + actions exceed the card width. */
.card-meta[b-0pvdf2j1k6] {
    display: flex;
    gap: 0.85rem;
    font-size: 0.75rem;
    color: #6b7280;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.card-meta-item[b-0pvdf2j1k6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* Allow individual meta items to shrink so the date range can ellipsis-truncate. */
    min-width: 0;
}

.card-meta-item i[b-0pvdf2j1k6] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.card-date-range[b-0pvdf2j1k6] {
    /* On narrow cards the date range can wrap noisily — let it truncate gracefully.
       Needs min-width:0 + flex-shrink:1 + the .card-meta { min-width: 0 } above
       so ellipsis actually engages instead of just overflowing the flex parent. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.card-actions[b-0pvdf2j1k6] {
    display: flex;
    gap: 0.25rem;
    /* IMPLICATION: flex-shrink:0 pins the action cluster to the right edge so a long
       date range can't push the tick / play / delete icon off the card. */
    flex-shrink: 0;
}

.btn-icon[b-0pvdf2j1k6] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn-icon:hover[b-0pvdf2j1k6] {
    background: #f3f4f6;
    color: #0C5FE3;
    border-color: #e5e7eb;
}

.btn-icon-danger:hover[b-0pvdf2j1k6] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-icon i[b-0pvdf2j1k6] {
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .card-meta[b-0pvdf2j1k6] {
        flex-direction: column;
        gap: 0.25rem;
    }
    .card-date-range[b-0pvdf2j1k6] {
        max-width: 100%;
    }
}
/* _content/OEAI.Apps.SaaS/Components/Interventions/InterventionsHubHeader.razor.rz.scp.css */
/* InterventionsHubHeader scoped styles.

   The tab buttons themselves use the canonical .tabs-container-inline /
   .tab-button-inline classes from /css/modern-page-header.css (no scoped
   redefinition — see DESIGN-SYSTEM.md §Header chrome).

   The only scoped style here is the ⌘K hint label on the Search affordance —
   a small visual cue inside the search tab button so the keyboard shortcut
   is discoverable without a tooltip.

   IMPLICATION: If a future tab needs different behaviour (e.g. an "Ask Marge"
   green variant), add the variant to /css/modern-page-header.css alongside
   the existing .tab-button-inline.tab-marge rule, NOT a one-off here. */

.hub-search-shortcut[b-98rbs2lqlz] {
    /* Slightly smaller + more transparent than the normal tab label so the
       icon + shortcut hint read as paired affordance, not two competing
       elements. Padded into a chip with a subtle border on the dark blue
       banner so it stands out without competing with the active-tab pill. */
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    line-height: 1.3;
}
/* _content/OEAI.Apps.SaaS/Components/Interventions/SnapshotHealthStamp.razor.rz.scp.css */
/* SnapshotHealthStamp scoped styles — small inline pill with semantic-colour
   background mapped to fresh / due / overdue / manual / none states. */

.snapshot-stamp[b-b6awgp8lis] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px; /* full pill */
    line-height: 1.2;
    cursor: help; /* hint that the title attribute has more detail */
    border: 1px solid transparent;
}

.snapshot-stamp i[b-b6awgp8lis] {
    font-size: 0.7rem;
}

.snapshot-stamp-fresh[b-b6awgp8lis] {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.snapshot-stamp-due[b-b6awgp8lis] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.snapshot-stamp-overdue[b-b6awgp8lis] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.snapshot-stamp-manual[b-b6awgp8lis] {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}

.snapshot-stamp-none[b-b6awgp8lis] {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
    font-style: italic;
}

@media (max-width: 480px) {
    /* On very narrow viewports collapse to icon-only */
    .snapshot-stamp-label[b-b6awgp8lis] {
        display: none;
    }
}
/* _content/OEAI.Apps.SaaS/Components/Interventions/StudentDetailDrawer.razor.rz.scp.css */
/* StudentDetailDrawer scoped styles — slide-in panel layout with header, scrollable
   body (Impact + Progress sections), and a sticky footer with the action buttons. */

[b-9caasr3yh8] .student-detail-drawer {
    padding: 0;
}

/* Force the drawer panel AND its backdrop overlay to position: fixed at
   viewport level. SfSidebar's default with `Target="#oeai-main-body"` puts
   the backdrop inside that container — but the Radzen left navigation rail
   sits inside the body too with its own stacking context, so the backdrop
   ends up rendering BEHIND it. Result: drawer covers the main content but
   the left nav stays at full opacity (the "strange effect" the user spotted).
   Pinning the overlay to viewport-level + z-index above the nav fixes it.
   IMPLICATION: Removing these rules reintroduces the half-greyed-out look. */
[b-9caasr3yh8] .e-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
}

[b-9caasr3yh8] .student-detail-drawer.e-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
}

.drawer-shell[b-9caasr3yh8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.drawer-header[b-9caasr3yh8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.drawer-header-content[b-9caasr3yh8] {
    min-width: 0;
}

.drawer-student-name[b-9caasr3yh8] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.drawer-student-chips[b-9caasr3yh8] {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.drawer-chip[b-9caasr3yh8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.drawer-chip-school[b-9caasr3yh8] {
    background: #ecfdf5;
    color: #065f46;
    text-transform: none;
    letter-spacing: 0;
}

.drawer-chip-school i[b-9caasr3yh8] {
    font-size: 0.65rem;
}

.drawer-close[b-9caasr3yh8] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.drawer-close:hover[b-9caasr3yh8] {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #e5e7eb;
}

.drawer-body[b-9caasr3yh8] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.drawer-section[b-9caasr3yh8] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.drawer-section-title[b-9caasr3yh8] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.drawer-section-empty[b-9caasr3yh8] {
    margin: 0;
    padding: 0.85rem 1rem;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    font-size: 0.825rem;
    color: #6b7280;
}

/* ────────── Impact / metric rows ────────── */

.metric-rows[b-9caasr3yh8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.metric-row[b-9caasr3yh8] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metric-row-name[b-9caasr3yh8] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.metric-row-numbers[b-9caasr3yh8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.metric-stat[b-9caasr3yh8] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem 0.6rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.metric-stat-label[b-9caasr3yh8] {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.metric-stat-value[b-9caasr3yh8] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
}

.metric-stat-change.metric-stat-up[b-9caasr3yh8]    { background: #d1fae5; border-color: #a7f3d0; }
.metric-stat-change.metric-stat-up    .metric-stat-value[b-9caasr3yh8] { color: #065f46; }
.metric-stat-change.metric-stat-down[b-9caasr3yh8]  { background: #fee2e2; border-color: #fecaca; }
.metric-stat-change.metric-stat-down  .metric-stat-value[b-9caasr3yh8] { color: #991b1b; }
.metric-stat-change.metric-stat-neutral .metric-stat-value[b-9caasr3yh8] { color: #6b7280; }

/* ────────── Form rows ────────── */

.form-row[b-9caasr3yh8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-label[b-9caasr3yh8] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ────────── Footer ────────── */

.drawer-footer[b-9caasr3yh8] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.drawer-footer-primary[b-9caasr3yh8] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.btn-secondary[b-9caasr3yh8],
.btn-primary[b-9caasr3yh8] {
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.btn-secondary[b-9caasr3yh8] {
    background: #ffffff;
    color: #4b5563;
    border-color: #d1d5db;
}

.btn-secondary:hover[b-9caasr3yh8] {
    background: #f3f4f6;
}

.btn-primary[b-9caasr3yh8] {
    background: #0C5FE3;
    color: #ffffff;
}

.btn-primary:hover:not(:disabled)[b-9caasr3yh8] {
    background: #0a4fc0;
}

.btn-primary:disabled[b-9caasr3yh8] {
    background: #93c5fd;
    cursor: not-allowed;
}

.btn-text-danger[b-9caasr3yh8] {
    background: transparent;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    font-size: 0.825rem;
    padding: 0.4rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-text-danger:hover:not(:disabled)[b-9caasr3yh8] {
    text-decoration: underline;
}

.btn-text-danger:disabled[b-9caasr3yh8] {
    color: #9ca3af;
    cursor: not-allowed;
}

/* ────────── Empty state ────────── */

.drawer-empty[b-9caasr3yh8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7280;
}

.drawer-empty i[b-9caasr3yh8] {
    font-size: 2rem;
    color: #d1d5db;
    margin-bottom: 0.75rem;
}

.drawer-empty p[b-9caasr3yh8] {
    margin: 0;
}

@media (max-width: 480px) {
    .metric-row-numbers[b-9caasr3yh8] {
        grid-template-columns: 1fr;
    }
}
/* _content/OEAI.Apps.SaaS/Components/Interventions/TemplateCard.razor.rz.scp.css */
/* TemplateCard scoped styles — parallel to InterventionCard but tuned for templates
   (no progress bar, more chips, metric count badge). */

.template-card[b-25g0fl0kap] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
    border-left: 3px solid #6b7280;
}

.template-card:hover[b-25g0fl0kap] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    border-color: #d1d5db;
}

.template-card:focus-visible[b-25g0fl0kap] {
    outline: 2px solid #0C5FE3;
    outline-offset: 2px;
}

/* Status accent on the left border — matches the templates page lifecycle colours. */
.template-card.status-draft[b-25g0fl0kap]     { border-left-color: #f59e0b; }
.template-card.status-published[b-25g0fl0kap] { border-left-color: #10b981; }
.template-card.status-archived[b-25g0fl0kap]  { border-left-color: #6b7280; }

.card-header[b-25g0fl0kap] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.card-title[b-25g0fl0kap] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    /* Allow up to 2 lines, then ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-status-badge[b-25g0fl0kap] {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

.card-status-badge.status-draft[b-25g0fl0kap]     { background: #fef3c7; color: #92400e; }
.card-status-badge.status-published[b-25g0fl0kap] { background: #d1fae5; color: #065f46; }
.card-status-badge.status-archived[b-25g0fl0kap]  { background: #f3f4f6; color: #4b5563; }

/* Chip row — category, target type, metric count */
.card-chip-row[b-25g0fl0kap] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.card-chip[b-25g0fl0kap] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.card-chip-category[b-25g0fl0kap] { background: #eef2ff; color: #4338ca; }
.card-chip-target[b-25g0fl0kap]   { background: #ecfdf5; color: #065f46; text-transform: none; letter-spacing: 0; }
.card-chip-metrics[b-25g0fl0kap]  { background: #f3f4f6; color: #4b5563; text-transform: none; letter-spacing: 0; }

.card-chip-metrics i[b-25g0fl0kap] {
    font-size: 0.65rem;
}

.card-description[b-25g0fl0kap] {
    margin: 0;
    font-size: 0.825rem;
    color: #6b7280;
    line-height: 1.5;
    /* Cap at 2 lines so cards stay scannable */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer[b-25g0fl0kap] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.card-meta[b-25g0fl0kap] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 0;
}

.card-meta-item[b-25g0fl0kap] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.card-meta-item i[b-25g0fl0kap] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.card-meta-dim[b-25g0fl0kap] {
    color: #9ca3af;
    margin-left: 0.2rem;
}

.card-actions[b-25g0fl0kap] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.btn-icon[b-25g0fl0kap] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn-icon:hover[b-25g0fl0kap] {
    background: #f3f4f6;
    color: #0C5FE3;
    border-color: #e5e7eb;
}

.btn-icon-primary[b-25g0fl0kap] {
    background: #eff6ff;
    color: #0C5FE3;
}

.btn-icon-primary:hover[b-25g0fl0kap] {
    background: #dbeafe;
    color: #0a4fc0;
    border-color: #bfdbfe;
}

.btn-icon-danger:hover[b-25g0fl0kap] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-icon i[b-25g0fl0kap] {
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .card-meta[b-25g0fl0kap] {
        flex-direction: column;
        gap: 0.25rem;
    }
}
/* _content/OEAI.Apps.SaaS/Components/Interventions/TemplatePickerDrawer.razor.rz.scp.css */
/* TemplatePickerDrawer scoped styles. The SfSidebar provides the slide-in chrome
   (overlay, backdrop, animation); this CSS styles the inner panel content. */

[b-sxug89xwcb] .template-picker-drawer {
    /* Override Syncfusion default padding so we own the inner layout. */
    padding: 0;
}

.drawer-shell[b-sxug89xwcb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.drawer-header[b-sxug89xwcb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.drawer-title[b-sxug89xwcb] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.drawer-subtitle[b-sxug89xwcb] {
    margin: 0.2rem 0 0 0;
    font-size: 0.825rem;
    color: #6b7280;
}

.drawer-close[b-sxug89xwcb] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.drawer-close:hover[b-sxug89xwcb] {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #e5e7eb;
}

.drawer-search[b-sxug89xwcb] {
    padding: 1rem 1.5rem;
    flex-shrink: 0;
    border-bottom: 1px solid #f3f4f6;
}

.drawer-body[b-sxug89xwcb] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.5rem 1.5rem 1.5rem;
}

.template-list[b-sxug89xwcb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.template-card[b-sxug89xwcb] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.template-card:hover[b-sxug89xwcb] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    border-color: #0C5FE3;
}

.template-card:focus-visible[b-sxug89xwcb] {
    outline: 2px solid #0C5FE3;
    outline-offset: 2px;
}

.template-card-header[b-sxug89xwcb] {
    grid-column: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.template-card-title[b-sxug89xwcb] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.template-card-chip[b-sxug89xwcb] {
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.template-card-desc[b-sxug89xwcb] {
    grid-column: 1;
    margin: 0.2rem 0 0 0;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.45;
    /* Cap at 2 lines so cards stay scannable in dense lists. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-card-meta[b-sxug89xwcb] {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #9ca3af;
    font-size: 0.875rem;
    align-self: center;
}

.template-card:hover .template-card-meta[b-sxug89xwcb] {
    color: #0C5FE3;
}

/* ────────── Loading / empty / error states ────────── */

.drawer-loading[b-sxug89xwcb],
.drawer-empty[b-sxug89xwcb],
.drawer-error[b-sxug89xwcb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7280;
}

.drawer-loading i[b-sxug89xwcb],
.drawer-empty i[b-sxug89xwcb],
.drawer-error i[b-sxug89xwcb] {
    font-size: 2rem;
    margin-bottom: 0.85rem;
}

.drawer-loading i[b-sxug89xwcb] { color: #0C5FE3; }
.drawer-empty i[b-sxug89xwcb] { color: #d1d5db; }
.drawer-error i[b-sxug89xwcb] { color: #dc2626; }

.drawer-empty h3[b-sxug89xwcb],
.drawer-error h3[b-sxug89xwcb] {
    margin: 0 0 0.4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.drawer-empty p[b-sxug89xwcb],
.drawer-error p[b-sxug89xwcb] {
    margin: 0;
    font-size: 0.875rem;
    max-width: 280px;
}
/* _content/OEAI.Apps.SaaS/Components/MarginalGains/KpiHistoryDrawer.razor.rz.scp.css */
/*
 * KpiHistoryDrawer scoped styles.
 *
 * PURPOSE: Per-row timeline layout for the snapshot history drawer. Shared
 * chrome (gov-v2-empty card, gov-v2-btn) comes from
 * /wwwroot/css/governance-v2/* — these rules just handle the drawer's
 * internal three-column row (date / value / source pill).
 *
 * IMPLICATION: Removing this file collapses the rows to bare <li>s; the
 * drawer still functions but reads as an unstyled list.
 */

[b-bcyefv1kwv] .kpi-history-drawer__shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
}

[b-bcyefv1kwv] .kpi-history-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    gap: 1rem;
}

[b-bcyefv1kwv] .kpi-history-drawer__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #063662;
}

[b-bcyefv1kwv] .kpi-history-drawer__subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    color: #4b5563;
}

[b-bcyefv1kwv] .kpi-history-drawer__scope {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

[b-bcyefv1kwv] .kpi-history-drawer__scope i {
    margin-right: 0.35rem;
    color: #9ca3af;
}

[b-bcyefv1kwv] .kpi-history-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.5rem 2rem;
}

[b-bcyefv1kwv] .kpi-history-drawer__loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #6b7280;
    justify-content: center;
}

[b-bcyefv1kwv] .kpi-history-drawer__empty {
    margin: 1rem 0;
}

[b-bcyefv1kwv] .kpi-history-drawer__empty-icon {
    font-size: 2rem;
    color: #9ca3af;
    display: block;
    margin-bottom: 0.75rem;
}

[b-bcyefv1kwv] .kpi-history-drawer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-bcyefv1kwv] .kpi-history-drawer__row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

[b-bcyefv1kwv] .kpi-history-drawer__row:last-child {
    border-bottom: none;
}

[b-bcyefv1kwv] .kpi-history-drawer__row-date {
    font-size: 0.85rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

[b-bcyefv1kwv] .kpi-history-drawer__row-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #063662;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

[b-bcyefv1kwv] .kpi-history-drawer__source-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f3f4f6;
    color: #4b5563;
}

[b-bcyefv1kwv] .kpi-history-drawer__source-pill--scheduled {
    background: #e0f2fe;
    color: #075985;
}

[b-bcyefv1kwv] .kpi-history-drawer__source-pill--ondemand {
    background: #dcfce7;
    color: #166534;
}

[b-bcyefv1kwv] .kpi-history-drawer__source-pill--bulkupload {
    background: #fef3c7;
    color: #92400e;
}
/* _content/OEAI.Apps.SaaS/Components/MarginalGains/KpiSourceBindingDialog.razor.rz.scp.css */
/*
 * KpiSourceBindingDialog scoped styles
 *
 * PURPOSE: Form layout for the "Configure data source" dialog opened from
 * KpiManagement and KpiDetail. Inherits the gov-v2 dialog chrome from the
 * shared SfDialog skin — these styles only handle the row layout inside the
 * dialog body and footer.
 *
 * IMPLICATION: Removing this file leaves the form usable but loose — labels
 * and inputs lose their vertical rhythm, and the footer buttons stack
 * instead of sitting on a single row.
 */

.kpi-source-binding-dialog .form-row[b-l6u8r2dowg] {
    margin-bottom: 1.25rem;
}

.kpi-source-binding-dialog label[b-l6u8r2dowg] {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.9rem;
}

.kpi-source-binding-dialog .required[b-l6u8r2dowg] {
    color: #dc2626;
    margin-left: 0.15rem;
}

.kpi-source-binding-dialog .optional-tag[b-l6u8r2dowg] {
    margin-left: 0.4rem;
    color: #6b7280;
    font-weight: 400;
    font-size: 0.8rem;
}

.kpi-source-binding-dialog .help-text[b-l6u8r2dowg] {
    display: block;
    margin-top: 0.35rem;
    color: #4b5563;
    font-size: 0.825rem;
    line-height: 1.4;
}

.kpi-source-binding-dialog .help-text code[b-l6u8r2dowg] {
    background: #f3f4f6;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.82rem;
}

.kpi-source-binding-dialog__footer[b-l6u8r2dowg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.kpi-source-binding-dialog__footer-right[b-l6u8r2dowg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
/* _content/OEAI.Apps.SaaS/Components/MarginalGains/SchoolPicker.razor.rz.scp.css */
/*
 * SchoolPicker scoped styles.
 *
 * PURPOSE: Renders a chip-style trigger with an expandable search +
 * scrollable list panel. Designed to live in the .page-subheader-left of
 * Strategy Dashboard / Aim Detail next to other filter controls, so the
 * baseline alignment matches the existing .filter-item rhythm.
 *
 * IMPLICATION: The panel is positioned absolutely relative to the trigger
 * — keep the parent .school-picker non-overflow so the panel doesn't get
 * clipped. The backdrop is fixed-positioned to catch outside clicks
 * regardless of scroll position.
 */

.school-picker[b-a98yk8nh5v] {
    position: relative;
    display: inline-block;
    min-width: 260px;
}

.school-picker__trigger[b-a98yk8nh5v] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: #1f2937;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.school-picker__trigger:hover[b-a98yk8nh5v] {
    border-color: #9ca3af;
}

.school-picker__trigger:focus-visible[b-a98yk8nh5v] {
    outline: none;
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.18);
}

.school-picker--open .school-picker__trigger[b-a98yk8nh5v] {
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.12);
}

.school-picker__icon[b-a98yk8nh5v] {
    color: #6b7280;
    font-size: 0.9rem;
}

.school-picker__name[b-a98yk8nh5v] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.school-picker__chevron[b-a98yk8nh5v] {
    color: #6b7280;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

/*
 * Backdrop catches outside clicks. Transparent so the page stays visible.
 * Below the panel z-index so the panel still receives clicks first.
 */
.school-picker__backdrop[b-a98yk8nh5v] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.school-picker__panel[b-a98yk8nh5v] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    min-width: 320px;
    max-width: 420px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    /* Cap the panel height so it always fits in the viewport even at the
       bottom of the page. The list scrolls. */
    max-height: 420px;
    overflow: hidden;
}

.school-picker__search[b-a98yk8nh5v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
}

.school-picker__search-input[b-a98yk8nh5v] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    color: #111827;
    padding: 0;
}

.school-picker__list[b-a98yk8nh5v] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.school-picker__option[b-a98yk8nh5v] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 80ms ease;
}

.school-picker__option:hover[b-a98yk8nh5v] {
    background: #f3f4f6;
}

.school-picker__option--selected[b-a98yk8nh5v] {
    background: rgba(12, 95, 227, 0.08);
}

.school-picker__option--selected:hover[b-a98yk8nh5v] {
    background: rgba(12, 95, 227, 0.12);
}

.school-picker__option-icon[b-a98yk8nh5v] {
    color: #6b7280;
    font-size: 0.85rem;
    width: 1rem;
    text-align: center;
    flex: 0 0 auto;
}

.school-picker__option-text[b-a98yk8nh5v] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.school-picker__option-name[b-a98yk8nh5v] {
    font-size: 0.9rem;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-picker__option-detail[b-a98yk8nh5v] {
    font-size: 0.75rem;
    color: #6b7280;
}

.school-picker__option-check[b-a98yk8nh5v] {
    color: #0C5FE3;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.school-picker__empty[b-a98yk8nh5v] {
    padding: 1.25rem 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
    text-align: center;
    font-style: italic;
}
/* _content/OEAI.Apps.SaaS/Components/OpenData/TrustHeatmap.razor.rz.scp.css */
/* TrustHeatmap.razor.css - Cards-only renderer per AB#1747.
   The header chrome (.heatmap-header, .heatmap-title, .heatmap-controls) was
   removed when sort / order / view toggle moved to the parent page per
   DESIGN-SYSTEM.md §4.2 + §4.7. The outer container background/border/shadow
   was dropped too so cards sit flush against the page body — the surrounding
   container was eating screen real estate without adding visual value. */
.trust-heatmap[b-9fadkgybtd] {
    margin: 0 2rem 1.25rem 2rem;
}

/* ========================================
   HEATMAP GRID & CARDS
   ======================================== */

/* Grid container for school cards. Horizontal insets removed when the heatmap */
/* container chrome was stripped — the outer .trust-heatmap margin already gives */
/* gutters from the page edge. Bottom padding keeps breathing room from the */
/* page-body bottom. */
.heatmap-grid[b-9fadkgybtd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0 0 1rem;
}

/* School Cell Wrapper for Flip Animation */
.school-cell-wrapper[b-9fadkgybtd] {
    perspective: 1000px;
    min-height: 400px;
}

.school-cell-flipper[b-9fadkgybtd] {
    position: relative;
    width: 100%;
    height: 100%; /* Exact match to finance-heatmap: height 100% instead of min-height */
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.school-cell-wrapper.flipped .school-cell-flipper[b-9fadkgybtd] {
    transform: rotateY(180deg);
}

/* School Cell (Card) */
.school-cell[b-9fadkgybtd] {
    position: absolute;
    width: 100%;
    min-height: 400px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: white;
    border: 1px solid #dee2e6; /* Exact match: 1px border */
    border-radius: 8px; /* Exact match: 8px radius */
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.school-cell-front[b-9fadkgybtd] {
    z-index: 2;
    transform: rotateY(0deg);
}

.school-cell-front:hover[b-9fadkgybtd] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.school-cell-back[b-9fadkgybtd] {
    transform: rotateY(180deg);
}

.school-cell-back:hover[b-9fadkgybtd] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* School Cell Header */
.school-cell-header[b-9fadkgybtd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f1f3f5;
}

.school-title-section[b-9fadkgybtd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

/* School name with text truncation for long names */
/* IMPLICATION: Prevents layout breaking when school names exceed available width */
.school-name[b-9fadkgybtd] {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.school-pupils[b-9fadkgybtd] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
}

/* Phase Badge - Exact Positioning & Style */
.school-phase-badge[b-9fadkgybtd] {
    background: #1976d2;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* School Cell Body */
.school-cell-body[b-9fadkgybtd] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* KPI Pills Container */
.kpi-pills-container[b-9fadkgybtd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.kpi-pill-row[b-9fadkgybtd] {
    display: flex;
    align-items: center;
    width: 100%;
}

.kpi-pill-container[b-9fadkgybtd] {
    position: relative;
    width: 100%;
    height: 28px;
    border: 2px solid #1976d2;
    border-radius: 14px;
    overflow: hidden;
    background: white;
}

.kpi-pill-fill[b-9fadkgybtd] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 12px 0 0 12px;
    z-index: 1;
}

.kpi-pill-content[b-9fadkgybtd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.kpi-name[b-9fadkgybtd] {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease;
}

.kpi-value[b-9fadkgybtd] {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Flip Button - Exact Match */
.flip-btn[b-9fadkgybtd] {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.4rem;
    margin-top: auto;
}

/* ========================================
   LIST VIEW
   ======================================== */

/* List view container with padding from container edges */
/* IMPLICATION: Removal would cause list to touch container edges */
.heatmap-list[b-9fadkgybtd] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 1.25rem 1.5rem 1.25rem;
}

.heatmap-list table[b-9fadkgybtd] {
    margin: 0;
}

/* School name column — fixed max-width with single-line ellipsis. */
/* Updated per AB#1747 / UX-CONSISTENCY-REVIEW.md §5.5 to fix long school names */
/* breaking the row rhythm of the heatmap list view (table). The card view */
/* already truncates via .school-name (-webkit-line-clamp: 2). */
/* IMPLICATION: Full name is exposed on hover via the `title` attribute in markup. */
.heatmap-list .school-col[b-9fadkgybtd] {
    min-width: 200px;
    max-width: 260px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.heatmap-list .phase-col[b-9fadkgybtd] {
    width: 80px;
}

.heatmap-list .pupils-col[b-9fadkgybtd] {
    width: 100px;
}

.heatmap-list .metric-value-col[b-9fadkgybtd] {
    width: 150px;
}

.heatmap-list .percentile-col[b-9fadkgybtd] {
    width: 200px;
}

.heatmap-list thead th[b-9fadkgybtd] {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 0.5rem 0.75rem;
}

.heatmap-list tbody tr:hover[b-9fadkgybtd] {
    background-color: #f8f9fa;
}

.heatmap-list tbody td[b-9fadkgybtd] {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

/* Percentile Bars for List View */
.percentile-pill-wrapper[b-9fadkgybtd] {
    position: relative;
    width: 100%;
    height: 24px;
    background: #f8f9fa;
    border-radius: 4px;
    overflow: hidden;
}

.percentile-pill-fill[b-9fadkgybtd] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.3s ease;
}

.percentile-pill-content[b-9fadkgybtd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
}

.percentile-text[b-9fadkgybtd] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #212529;
}

/* No Data */
.no-data-message[b-9fadkgybtd] {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.no-data-message i[b-9fadkgybtd] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-data-message p[b-9fadkgybtd] {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .heatmap-grid[b-9fadkgybtd] {
        grid-template-columns: 1fr;
    }
    
    .header-content[b-9fadkgybtd] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .heatmap-controls[b-9fadkgybtd] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    
    .control-group[b-9fadkgybtd] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .control-group .form-select[b-9fadkgybtd] {
        width: 100%;
    }
}
/* _content/OEAI.Apps.SaaS/Components/PredictiveAttendance/PaQuickInterventionModal.razor.rz.scp.css */
/* ============================================================================
   QUICK INTERVENTION MODAL — scoped CSS intentionally empty.
   All qi- styles live in wwwroot/css/predictive-attendance/predictive-attendance.css
   because Syncfusion SfDialog renders content in a portal outside the Blazor
   component tree, so Blazor CSS isolation does not apply.
   ============================================================================ */
/* _content/OEAI.Apps.SaaS/Components/Sales/CustomerDetailPanel.razor.rz.scp.css */
/* Customer Detail Panel Styles */

.customer-detail-panel[b-sarivu9dt1] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Header */
.detail-header[b-sarivu9dt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.header-left[b-sarivu9dt1] {
    flex: 0 0 auto;
}

.header-center[b-sarivu9dt1] {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.header-center h2[b-sarivu9dt1] {
    margin: 0;
    font-size: 1.5rem;
    color: #1a1a1a;
}

.header-right[b-sarivu9dt1] {
    flex: 0 0 auto;
}

.btn-back[b-sarivu9dt1] {
    background: none;
    border: none;
    color: #0066cc;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.btn-back:hover[b-sarivu9dt1] {
    color: #004d99;
}

.customer-type-badge[b-sarivu9dt1] {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

.urn-badge[b-sarivu9dt1] {
    background: #f5f5f5;
    color: #666;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Customer Info Summary */
.customer-info-summary[b-sarivu9dt1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}

.info-card[b-sarivu9dt1] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.info-label[b-sarivu9dt1] {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.info-value[b-sarivu9dt1] {
    font-size: 1rem;
    color: #1a1a1a;
    font-weight: 500;
}

.info-value-large[b-sarivu9dt1] {
    font-size: 1.5rem;
    color: #0066cc;
    font-weight: 600;
}

.info-sub[b-sarivu9dt1] {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Tab Content */
.tab-content[b-sarivu9dt1] {
    padding: 1rem;
}

.toolbar-section[b-sarivu9dt1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

/* Buttons */
.btn-primary[b-sarivu9dt1] {
    background: #0066cc;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.btn-primary:hover[b-sarivu9dt1] {
    background: #0052a3;
}

.btn-secondary[b-sarivu9dt1] {
    background: white;
    color: #0066cc;
    border: 1px solid #0066cc;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.btn-secondary:hover[b-sarivu9dt1] {
    background: #f0f7ff;
}

/* Grid Actions */
.grid-actions[b-sarivu9dt1] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-sarivu9dt1] {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
}

.btn-icon:hover[b-sarivu9dt1] {
    background: #f5f5f5;
    color: #0066cc;
}

.btn-icon.delete:hover[b-sarivu9dt1] {
    color: #dc3545;
}

/* Status Badges */
.status-badge[b-sarivu9dt1] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-quoted[b-sarivu9dt1] {
    background: #fff3e0;
    color: #e65100;
}

.status-purchased[b-sarivu9dt1] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-active[b-sarivu9dt1] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-expired[b-sarivu9dt1] {
    background: #fce4ec;
    color: #c62828;
}

.status-cancelled[b-sarivu9dt1] {
    background: #f5f5f5;
    color: #666;
}

.status-draft[b-sarivu9dt1] {
    background: #f5f5f5;
    color: #666;
}

.status-sent[b-sarivu9dt1] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-accepted[b-sarivu9dt1] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-declined[b-sarivu9dt1] {
    background: #fce4ec;
    color: #c62828;
}

/* Empty State */
.empty-state-small[b-sarivu9dt1] {
    text-align: center;
    padding: 2rem;
    color: #666;
}

.empty-state-small i[b-sarivu9dt1] {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #ccc;
}

.empty-state-small p[b-sarivu9dt1] {
    margin: 0;
}

/* Links */
.quote-link[b-sarivu9dt1],
.customer-name-link[b-sarivu9dt1] {
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;
}

.quote-link:hover[b-sarivu9dt1],
.customer-name-link:hover[b-sarivu9dt1] {
    text-decoration: underline;
}

/* Notes Content */
.notes-content[b-sarivu9dt1] {
    min-height: 200px;
}

.notes-display[b-sarivu9dt1] {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.notes-display pre[b-sarivu9dt1] {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
}

.address-section[b-sarivu9dt1] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.address-section h4[b-sarivu9dt1] {
    margin: 0 0 0.5rem 0;
    color: #666;
    font-size: 0.85rem;
}

.audit-info[b-sarivu9dt1] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    font-size: 0.8rem;
    color: #999;
}
/* _content/OEAI.Apps.SaaS/Components/SemanticModel/SemanticModelFeedbackDialog.razor.rz.scp.css */
/* Styles for SemanticModel Feedback Dialog */
/* IMPLICATION: Removing this CSS breaks the feedback dialog styling */

.feedback-content[b-dfuqjzu50r] {
    padding: 8px 0;
}

.correction-options[b-dfuqjzu50r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.correction-option[b-dfuqjzu50r] {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.correction-option:hover[b-dfuqjzu50r] {
    border-color: #007bff;
    background: #f8f9ff;
}

.correction-option.selected[b-dfuqjzu50r] {
    border-color: #007bff;
    background: #e7f1ff;
}

.option-icon[b-dfuqjzu50r] {
    font-size: 24px;
    margin-bottom: 4px;
}

.option-label[b-dfuqjzu50r] {
    font-weight: 600;
    color: #212529;
}

.option-desc[b-dfuqjzu50r] {
    font-size: 0.85em;
    color: #6c757d;
}

.explanation-input[b-dfuqjzu50r] {
    min-height: 80px;
}

[b-dfuqjzu50r] .semantic-feedback-dialog .e-dlg-header {
    font-weight: 600;
}

[b-dfuqjzu50r] .semantic-feedback-dialog .e-dlg-content {
    padding: 16px 24px;
}
/* _content/OEAI.Apps.SaaS/Components/Shared/ActivityTimeline.razor.rz.scp.css */
/* ActivityTimeline scoped styles — vertical timeline with a left-rail dot column
   and a content column. The vertical connector line between dots is the ::before
   pseudo-element on each row, so adding/removing rows doesn't need to redraw the line. */

.timeline[b-v5jpoqq7fm] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline-row[b-v5jpoqq7fm] {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 0.875rem;
    padding-bottom: 1.25rem;
    /* The connector line — drawn behind the dot, runs from dot centre to next dot. */
}

.timeline-row[b-v5jpoqq7fm]::before {
    content: "";
    position: absolute;
    left: 15px; /* aligned with dot centre (32px col / 2 - 1px line) */
    top: 32px;  /* below the dot */
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.timeline-row:last-child[b-v5jpoqq7fm]::before {
    /* Don't draw the line below the last dot — it'd look like the timeline continues. */
    display: none;
}

.timeline-dot[b-v5jpoqq7fm] {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #6b7280; /* neutral default */
    font-size: 0.85rem;
    flex-shrink: 0;
}

.timeline-dot-neutral[b-v5jpoqq7fm] { background: #6b7280; }
.timeline-dot-info[b-v5jpoqq7fm]    { background: #0C5FE3; } /* design system brand blue */
.timeline-dot-success[b-v5jpoqq7fm] { background: #10b981; }
.timeline-dot-warning[b-v5jpoqq7fm] { background: #f59e0b; }
.timeline-dot-danger[b-v5jpoqq7fm]  { background: #dc2626; }

.timeline-body[b-v5jpoqq7fm] {
    /* Pull the body up slightly so it visually centres against the dot. */
    padding-top: 0.125rem;
    min-width: 0; /* allows children to truncate inside grid */
}

.timeline-headline[b-v5jpoqq7fm] {
    font-size: 0.925rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.timeline-detail[b-v5jpoqq7fm] {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.45;
    /* Wrap naturally; do not constrain — the detail can be a sentence or two. */
}

.timeline-meta[b-v5jpoqq7fm] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.timeline-actor[b-v5jpoqq7fm] {
    font-weight: 500;
    color: #4b5563;
}

.timeline-meta-sep[b-v5jpoqq7fm] {
    color: #d1d5db;
}

.timeline-timestamp[b-v5jpoqq7fm] {
    /* Hover hint shows the absolute time via the title attribute. */
    cursor: help;
}

.timeline-empty[b-v5jpoqq7fm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.5rem;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.9rem;
}

.timeline-empty i[b-v5jpoqq7fm] {
    font-size: 1.1rem;
    color: #9ca3af;
}
/* _content/OEAI.Apps.SaaS/Components/Shared/SparklineChart.razor.rz.scp.css */
/* SparklineChart scoped styles — kept minimal because the chart itself is sized inline
   (Syncfusion needs a deterministic container box at first render). */

.sparkline-empty[b-nd93j9xgfh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af; /* design system neutral — matches the dashed baseline colour */
    font-size: 0.75rem;
    line-height: 1;
}

.sparkline-wrapper[b-nd93j9xgfh] {
    display: inline-block;
    /* Prevent Blazor's default block layout from leaking margin around the inline-sized chart */
    line-height: 0;
}
/* _content/OEAI.Apps.SaaS/Components/Shared/SubTabs.razor.rz.scp.css */
/* SubTabs scoped styles — visual variant of the .tab-button-inline pattern from
   modern-page-header.css. Designed to live BELOW the blue page header on detail pages,
   with a light-grey container so it reads as secondary/sub-navigation. */

.sub-tabs[b-locayd2p7u] {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 1.5rem;
    background: #f9fafb; /* design system neutral surface */
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    /* Prevent the tab bar from squashing icons/labels on narrow viewports —
       horizontal scroll is preferred over text wrap for tab semantics. */
    flex-wrap: nowrap;
    scrollbar-width: thin;
}

.sub-tab-button[b-locayd2p7u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}

.sub-tab-button:hover:not(.disabled):not(.active)[b-locayd2p7u] {
    background: #ffffff;
    color: #0C5FE3; /* brand blue from the design system */
}

.sub-tab-button.active[b-locayd2p7u] {
    background: #ffffff;
    color: #0C5FE3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sub-tab-button.disabled[b-locayd2p7u] {
    color: #9ca3af;
    cursor: not-allowed;
}

.sub-tab-button i[b-locayd2p7u] {
    font-size: 0.85rem;
}

.sub-tab-badge[b-locayd2p7u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffffff;
    background: #0C5FE3;
    border-radius: 9999px;
    line-height: 1;
}

.sub-tab-button:not(.active) .sub-tab-badge[b-locayd2p7u] {
    /* On inactive tabs the brand-blue pill would shout louder than the tab — soften it. */
    background: #6b7280;
}

.sub-tab-button.disabled .sub-tab-badge[b-locayd2p7u] {
    background: #d1d5db;
}
/* _content/OEAI.Apps.SaaS/Components/Shared/ViewToggle.razor.rz.scp.css */
/* ViewToggle scoped styles — segmented control sized to sit alongside filter inputs
   without dominating them. Visual idiom: pill container with two equal buttons,
   active state is white-on-blue inside the same outer border. */

.view-toggle[b-i7g9tctdb2] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.view-toggle-button[b-i7g9tctdb2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: #4b5563;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    /* Each button takes its natural width — both buttons together stay tight. */
}

.view-toggle-button + .view-toggle-button[b-i7g9tctdb2] {
    /* Internal divider between the two buttons */
    border-left: 1px solid #e5e7eb;
}

.view-toggle-button:hover:not(.active)[b-i7g9tctdb2] {
    background: #f3f4f6;
    color: #0C5FE3; /* brand blue */
}

.view-toggle-button.active[b-i7g9tctdb2] {
    background: #0C5FE3;
    color: #ffffff;
}

.view-toggle-button.active i[b-i7g9tctdb2] {
    color: #ffffff;
}

.view-toggle-button i[b-i7g9tctdb2] {
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    /* On small screens hide the labels to keep the toggle compact next to filters. */
    .view-toggle-label[b-i7g9tctdb2] {
        display: none;
    }
    .view-toggle-button[b-i7g9tctdb2] {
        padding: 0.4rem 0.6rem;
    }
}
/* _content/OEAI.Apps.SaaS/HeaderSection.razor.rz.scp.css */
/* Pending Actions Notification Badge */
.pending-actions-wrapper[b-oyeonl7tdo] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pending-actions-btn[b-oyeonl7tdo] {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    color: #64748b;
    transition: all 0.2s ease;
    font-size: 16px;
}

    .pending-actions-btn:hover[b-oyeonl7tdo] {
        background: rgba(0, 0, 0, 0.05);
        color: #0C5FE3;
    }

.pending-actions-badge[b-oyeonl7tdo] {
    position: absolute;
    top: 0;
    right: 0;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Dropdown Panel */
.pending-actions-dropdown[b-oyeonl7tdo] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.pending-actions-header[b-oyeonl7tdo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

    .pending-actions-header small[b-oyeonl7tdo] {
        color: #94a3b8;
        font-weight: 400;
        font-size: 12px;
    }

.pending-actions-group-header[b-oyeonl7tdo] {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pending-actions-list[b-oyeonl7tdo] {
    max-height: 340px;
    overflow-y: auto;
}

.pending-action-item[b-oyeonl7tdo] {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

    .pending-action-item:hover[b-oyeonl7tdo] {
        background: #f8fafc;
        text-decoration: none;
        color: inherit;
    }

    .pending-action-item.overdue[b-oyeonl7tdo] {
        border-left: 3px solid #ef4444;
    }

.pending-action-title[b-oyeonl7tdo] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pending-action-meta[b-oyeonl7tdo] {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #94a3b8;
}

.pending-actions-footer[b-oyeonl7tdo] {
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

    .pending-actions-footer a[b-oyeonl7tdo] {
        font-size: 13px;
        color: #0C5FE3;
        text-decoration: none;
        font-weight: 500;
    }

        .pending-actions-footer a:hover[b-oyeonl7tdo] {
            text-decoration: underline;
        }

.text-danger[b-oyeonl7tdo] {
    color: #ef4444 !important;
}

/* ========================================
   Profile Avatar with Notification Badge
   ======================================== */
.profile-avatar-wrapper[b-oyeonl7tdo] {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-img[b-oyeonl7tdo] {
    height: 37px;
    width: 37px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-notification-badge[b-oyeonl7tdo] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #0C5FE3;
    color: white;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid white;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Profile Popout — Notifications Section
   ======================================== */
.profile-notifications-section[b-oyeonl7tdo] {
    margin: 12px 0;
    padding: 12px 0 0;
    border-top: 1px solid #e5e7eb;
}

.profile-notifications-header[b-oyeonl7tdo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.profile-notifications-title[b-oyeonl7tdo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-notifications-count[b-oyeonl7tdo] {
    background: #0C5FE3;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-notification-item[b-oyeonl7tdo] {
    display: flex;
    gap: 10px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    align-items: flex-start;
}

.profile-notification-item:hover[b-oyeonl7tdo] {
    background: #f3f4f6;
}

.profile-notification-item.unread[b-oyeonl7tdo] {
    background: #eff6ff;
}

.profile-notification-item.unread:hover[b-oyeonl7tdo] {
    background: #dbeafe;
}

.profile-notification-icon[b-oyeonl7tdo] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.7rem;
}

.profile-notification-icon.severity-info[b-oyeonl7tdo] {
    background: #dbeafe;
    color: #1d4ed8;
}

.profile-notification-icon.severity-success[b-oyeonl7tdo] {
    background: #d1fae5;
    color: #065f46;
}

.profile-notification-icon.severity-warning[b-oyeonl7tdo] {
    background: #fef3c7;
    color: #92400e;
}

.profile-notification-content[b-oyeonl7tdo] {
    flex: 1;
    min-width: 0;
}

.profile-notification-title[b-oyeonl7tdo] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-notification-time[b-oyeonl7tdo] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 2px;
}

.profile-notifications-viewall[b-oyeonl7tdo] {
    display: block;
    text-align: center;
    padding: 8px;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0C5FE3;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.profile-notifications-viewall:hover[b-oyeonl7tdo] {
    background: rgba(12, 95, 227, 0.08);
    text-decoration: none;
}

.profile-notifications-empty[b-oyeonl7tdo] {
    text-align: center;
    padding: 12px;
    font-size: 0.78rem;
    color: #9ca3af;
}
/* _content/OEAI.Apps.SaaS/Pages/Actions/MyActions.razor.rz.scp.css */
/* My Actions Page Styles
   COMMENT: Styles for the My Actions page including grid, detail panel, and dialogs
   IMPLICATION: These styles follow the modern-page-header pattern used across the app
*/

/* Page Container */
.page-container[b-i4vydkxh1w] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
}

.content-area[b-i4vydkxh1w] {
    padding: 1.5rem;
    flex: 1;
}

/* Overdue Badge in Header */
/* White pill with red text — readable on blue header background */
/* WCAG: #b71c1c on #fff ≈ 7.8:1 (AAA), white pill clearly visible on blue */
.overdue-badge[b-i4vydkxh1w] {
    color: #b71c1c;
    font-weight: 600;
    margin-left: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85em;
}

/* KPI Warning State */
.kpi-warning[b-i4vydkxh1w] {
    border-color: #ffc107 !important;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%) !important;
}

.kpi-warning .header-kpi-value[b-i4vydkxh1w] {
    color: #856404;
}

/* Loading Container */
.loading-container[b-i4vydkxh1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #666;
}

.spinner[b-i4vydkxh1w] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #2E74B5;
    border-radius: 50%;
    animation: spin-b-i4vydkxh1w 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-i4vydkxh1w {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-i4vydkxh1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #666;
}

.empty-icon[b-i4vydkxh1w] {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1.5rem;
}

.empty-state h3[b-i4vydkxh1w] {
    margin: 0 0 0.5rem;
    color: #333;
}

.empty-state p[b-i4vydkxh1w] {
    margin: 0 0 1.5rem;
}

/* Grid Styling */
.action-title-cell[b-i4vydkxh1w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-link[b-i4vydkxh1w] {
    color: #2E74B5;
    text-decoration: none;
    font-weight: 500;
}

.action-link:hover[b-i4vydkxh1w] {
    text-decoration: underline;
}

.overdue-tag[b-i4vydkxh1w] {
    background: #dc3545;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Priority Indicator */
.priority-indicator[b-i4vydkxh1w] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.priority-low[b-i4vydkxh1w] { background: #6c757d; }
.priority-medium[b-i4vydkxh1w] { background: #17a2b8; }
.priority-high[b-i4vydkxh1w] { background: #ffc107; }
.priority-critical[b-i4vydkxh1w] { background: #dc3545; }

/* Status Badge */
.status-badge[b-i4vydkxh1w] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-not-started[b-i4vydkxh1w] {
    background: #e9ecef;
    color: #495057;
}

.status-in-progress[b-i4vydkxh1w] {
    background: #d4edda;
    color: #155724;
}

.status-on-hold[b-i4vydkxh1w] {
    background: #fff3cd;
    color: #856404;
}

.status-completed[b-i4vydkxh1w] {
    background: #cce5ff;
    color: #004085;
}

.status-cancelled[b-i4vydkxh1w] {
    background: #f8d7da;
    color: #721c24;
}

/* Priority Badge */
.priority-badge[b-i4vydkxh1w] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-badge.priority-low[b-i4vydkxh1w] { background: #e9ecef; color: #495057; }
.priority-badge.priority-medium[b-i4vydkxh1w] { background: #d1ecf1; color: #0c5460; }
.priority-badge.priority-high[b-i4vydkxh1w] { background: #fff3cd; color: #856404; }
.priority-badge.priority-critical[b-i4vydkxh1w] { background: #f8d7da; color: #721c24; }

/* Category Tag */
.category-tag[b-i4vydkxh1w] {
    display: inline-block;
    padding: 3px 8px;
    background: #e7f1ff;
    color: #2E74B5;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Due Date */
.due-date-overdue[b-i4vydkxh1w] {
    color: #dc3545;
    font-weight: 600;
}

/* Source Reference */
.source-ref[b-i4vydkxh1w] {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Clickable source link for actions linked to meeting minutes */
.source-link[b-i4vydkxh1w] {
    color: #0C5FE3;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 0.85rem;
}

.source-link:hover[b-i4vydkxh1w] {
    color: #0a4fc9;
    text-decoration: underline;
}

.source-link i[b-i4vydkxh1w] {
    font-size: 10px;
    margin-right: 2px;
}

/* Action Buttons */
.action-buttons[b-i4vydkxh1w] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-icon[b-i4vydkxh1w] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-complete[b-i4vydkxh1w] {
    background: #d4edda;
    color: #155724;
}

.btn-complete:hover[b-i4vydkxh1w] {
    background: #28a745;
    color: white;
}

.btn-edit[b-i4vydkxh1w] {
    background: #e7f1ff;
    color: #2E74B5;
}

.btn-edit:hover[b-i4vydkxh1w] {
    background: #2E74B5;
    color: white;
}

/* Dialog Form */
.dialog-form[b-i4vydkxh1w] {
    padding: 1rem 0;
}

.form-group[b-i4vydkxh1w] {
    margin-bottom: 1rem;
}

.form-row[b-i4vydkxh1w] {
    display: flex;
    gap: 1rem;
}

.form-group.half[b-i4vydkxh1w] {
    flex: 1;
}

.form-label[b-i4vydkxh1w] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-label.required[b-i4vydkxh1w]::after {
    content: " *";
    color: #dc3545;
}

.form-input[b-i4vydkxh1w] {
    width: 100%;
}

.form-textarea[b-i4vydkxh1w] {
    min-height: 100px;
}

/* Detail Panel */
.detail-panel[b-i4vydkxh1w] {
    border-left: 1px solid #dee2e6;
}

.detail-content[b-i4vydkxh1w] {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 150px);
}

.detail-header-section[b-i4vydkxh1w] {
    margin-bottom: 1.5rem;
}

.detail-title[b-i4vydkxh1w] {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    color: #333;
}

.detail-badges[b-i4vydkxh1w] {
    display: flex;
    gap: 0.5rem;
}

.detail-quick-actions[b-i4vydkxh1w] {
    margin-bottom: 1.5rem;
}

.status-dropdown[b-i4vydkxh1w] {
    max-width: 200px;
}

.detail-section[b-i4vydkxh1w] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.detail-section:last-child[b-i4vydkxh1w] {
    border-bottom: none;
}

.section-title[b-i4vydkxh1w] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-title.clickable[b-i4vydkxh1w] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title.clickable:hover[b-i4vydkxh1w] {
    color: #2E74B5;
}

.detail-row[b-i4vydkxh1w] {
    margin-bottom: 0.75rem;
}

.detail-label[b-i4vydkxh1w] {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.25rem;
}

.detail-value[b-i4vydkxh1w] {
    color: #333;
}

/* Comments */
.comments-container[b-i4vydkxh1w] {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.comment-item[b-i4vydkxh1w] {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.comment-header[b-i4vydkxh1w] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.comment-author[b-i4vydkxh1w] {
    font-weight: 600;
    color: #333;
    font-size: 0.85rem;
}

.comment-date[b-i4vydkxh1w] {
    color: #888;
    font-size: 0.75rem;
}

.comment-text[b-i4vydkxh1w] {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}

.no-comments[b-i4vydkxh1w] {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.add-comment[b-i4vydkxh1w] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.comment-input[b-i4vydkxh1w] {
    flex: 1;
}

.btn-add-comment[b-i4vydkxh1w] {
    background: #2E74B5;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-add-comment:hover:not(:disabled)[b-i4vydkxh1w] {
    background: #245d94;
}

.btn-add-comment:disabled[b-i4vydkxh1w] {
    background: #6c757d;
    cursor: not-allowed;
}

/* History */
.history-container[b-i4vydkxh1w] {
    max-height: 300px;
    overflow-y: auto;
}

.history-item[b-i4vydkxh1w] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

.history-item:last-child[b-i4vydkxh1w] {
    border-bottom: none;
}

.history-icon[b-i4vydkxh1w] {
    width: 28px;
    height: 28px;
    background: #e7f1ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2E74B5;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.history-content[b-i4vydkxh1w] {
    flex: 1;
    font-size: 0.85rem;
}

.history-author[b-i4vydkxh1w] {
    font-weight: 600;
    color: #333;
}

.history-action[b-i4vydkxh1w] {
    color: #666;
}

.history-date[b-i4vydkxh1w] {
    display: block;
    color: #888;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.history-note[b-i4vydkxh1w] {
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-style: italic;
    color: #555;
}

/* Detail Footer */
.detail-footer[b-i4vydkxh1w] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.btn-secondary[b-i4vydkxh1w] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary:hover[b-i4vydkxh1w] {
    background: #5a6268;
}

.btn-danger[b-i4vydkxh1w] {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover[b-i4vydkxh1w] {
    background: #c82333;
}

/* Warning Text in Delete Dialog */
.warning-text[b-i4vydkxh1w] {
    color: #856404;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row[b-i4vydkxh1w] {
        flex-direction: column;
    }

    .form-group.half[b-i4vydkxh1w] {
        flex: none;
    }

    .detail-panel[b-i4vydkxh1w] {
        width: 100% !important;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/AuditDashboard.razor.rz.scp.css */
/* Audit Dashboard Styles */

.audit-dashboard[b-sluwuth8n5] {
    padding: 20px;
    max-width: 1800px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-sluwuth8n5] {
    margin-bottom: 20px;
}

.page-header h2[b-sluwuth8n5] {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
}

.page-header .subtitle[b-sluwuth8n5] {
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
}

/* Filter Bar */
.filter-bar[b-sluwuth8n5] {
    padding: 20px;
    margin-bottom: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filter-row[b-sluwuth8n5] {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.filter-item[b-sluwuth8n5] {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.filter-item label[b-sluwuth8n5] {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 13px;
    color: #2c3e50;
}

.filter-actions[b-sluwuth8n5] {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.readonly-textbox[b-sluwuth8n5] {
    background-color: #f8f9fa !important;
}

/* Loading */
.loading-container[b-sluwuth8n5] {
    text-align: center;
    padding: 60px 20px;
}

.loading-container p[b-sluwuth8n5] {
    margin-top: 15px;
    color: #7f8c8d;
}

.loading-small[b-sluwuth8n5] {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
}

/* Summary Cards */
.summary-cards[b-sluwuth8n5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card[b-sluwuth8n5] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.summary-card:hover[b-sluwuth8n5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.summary-card .card-icon[b-sluwuth8n5] {
    font-size: 40px;
    margin-right: 20px;
}

.summary-card .card-content h3[b-sluwuth8n5] {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: 600;
}

.summary-card .card-content p[b-sluwuth8n5] {
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
}

.summary-card .card-content small[b-sluwuth8n5] {
    font-size: 11px;
    color: #95a5a6;
    display: block;
    margin-top: 5px;
}

.success-card .card-icon[b-sluwuth8n5] { color: #27ae60; }
.info-card .card-icon[b-sluwuth8n5] { color: #3498db; }
.error-card .card-icon[b-sluwuth8n5] { color: #e74c3c; }
.warning-card .card-icon[b-sluwuth8n5] { color: #f39c12; }

.trend[b-sluwuth8n5] {
    font-size: 18px;
    margin-left: 5px;
}

.trend-up[b-sluwuth8n5] { color: #e74c3c; }
.trend-down[b-sluwuth8n5] { color: #27ae60; }
.trend-neutral[b-sluwuth8n5] { color: #95a5a6; }

/* Pipeline Section */
.pipeline-section[b-sluwuth8n5] {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pipeline-section h3[b-sluwuth8n5] {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

/* No Data */
.no-data[b-sluwuth8n5] {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
}

.no-data i[b-sluwuth8n5] {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Pipeline Tree */
.pipeline-tree[b-sluwuth8n5] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pipeline-item[b-sluwuth8n5] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
}

.pipeline-header[b-sluwuth8n5] {
    padding: 15px;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}

.pipeline-header:hover[b-sluwuth8n5] {
    background: #e9ecef;
}

.expand-icon[b-sluwuth8n5] {
    width: 20px;
    color: #7f8c8d;
    transition: transform 0.2s;
}

.status-icon[b-sluwuth8n5] {
    font-size: 18px;
    width: 25px;
    text-align: center;
}

.pipeline-name[b-sluwuth8n5] {
    font-weight: 600;
    font-size: 15px;
    color: #2c3e50;
    flex: 0 0 300px;
}

.pipeline-meta[b-sluwuth8n5] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    flex: 1;
}

.meta-item[b-sluwuth8n5] {
    font-size: 13px;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-item i[b-sluwuth8n5] {
    font-size: 12px;
}

.meta-item.error[b-sluwuth8n5] {
    color: #e74c3c;
    font-weight: 500;
}

.meta-item.warning[b-sluwuth8n5] {
    color: #f39c12;
    font-weight: 500;
}

/* Status Classes */
.status-success[b-sluwuth8n5] {
    border-left: 4px solid #27ae60;
}

.status-error[b-sluwuth8n5] {
    border-left: 4px solid #e74c3c;
}

.status-warning[b-sluwuth8n5] {
    border-left: 4px solid #f39c12;
}

.status-info[b-sluwuth8n5] {
    border-left: 4px solid #3498db;
}

/* Notebook List */
.notebook-list[b-sluwuth8n5] {
    background: white;
    padding: 0 15px 15px 45px;
}

.notebook-item[b-sluwuth8n5] {
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 10px;
}

.notebook-header[b-sluwuth8n5] {
    padding: 12px;
    background: #fdfdfd;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.notebook-header:hover[b-sluwuth8n5] {
    background: #f5f5f5;
}

.notebook-name[b-sluwuth8n5] {
    font-weight: 500;
    font-size: 14px;
    color: #34495e;
    flex: 0 0 250px;
}

.notebook-meta[b-sluwuth8n5] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 12px;
}

/* Notebook Detail */
.notebook-detail[b-sluwuth8n5] {
    padding: 15px;
    background: #fafbfc;
    border-top: 1px solid #e9ecef;
}

.detail-summary[b-sluwuth8n5] {
    display: flex;
    gap: 30px;
    padding: 15px;
    background: white;
    border-radius: 4px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.summary-item[b-sluwuth8n5] {
    font-size: 13px;
}

.summary-item strong[b-sluwuth8n5] {
    color: #2c3e50;
    margin-right: 5px;
}

/* Errors Section */
.errors-section[b-sluwuth8n5] {
    margin-bottom: 20px;
}

.errors-section h4[b-sluwuth8n5] {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #e74c3c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-list[b-sluwuth8n5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-item[b-sluwuth8n5] {
    padding: 12px;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 12px;
    border-left: 3px solid transparent;
}

.error-item:hover[b-sluwuth8n5] {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transform: translateX(2px);
}

.error-item.severity-critical[b-sluwuth8n5] {
    border-left-color: #c0392b;
}

.error-item.severity-error[b-sluwuth8n5] {
    border-left-color: #e74c3c;
}

.error-item.severity-warning[b-sluwuth8n5] {
    border-left-color: #f39c12;
}

.severity-icon[b-sluwuth8n5] {
    font-size: 18px;
}

.error-content[b-sluwuth8n5] {
    flex: 1;
}

.error-header[b-sluwuth8n5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.error-header strong[b-sluwuth8n5] {
    color: #e74c3c;
    font-size: 12px;
    text-transform: uppercase;
}

.timestamp[b-sluwuth8n5] {
    font-size: 12px;
    color: #95a5a6;
    font-family: monospace;
}

.block-context[b-sluwuth8n5] {
    font-size: 12px;
    color: #7f8c8d;
    font-style: italic;
}

.error-message[b-sluwuth8n5] {
    font-size: 13px;
    color: #2c3e50;
    margin-bottom: 5px;
    line-height: 1.4;
}

.exception-type[b-sluwuth8n5] {
    font-size: 11px;
    color: #7f8c8d;
    font-family: monospace;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 5px;
}

.assignment-badge[b-sluwuth8n5] {
    font-size: 11px;
    color: #3498db;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

/* Blocks Section */
.blocks-section[b-sluwuth8n5] {
    margin-bottom: 20px;
}

.blocks-section h4[b-sluwuth8n5] {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #34495e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.block-tree[b-sluwuth8n5] {
    background: white;
    padding: 15px;
    border-radius: 4px;
}

.block-item[b-sluwuth8n5] {
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 3px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.block-icon[b-sluwuth8n5] {
    width: 16px;
}

.block-name[b-sluwuth8n5] {
    flex: 1;
    color: #2c3e50;
}

.block-type[b-sluwuth8n5] {
    font-size: 11px;
    color: #95a5a6;
    font-style: italic;
}

.block-duration[b-sluwuth8n5] {
    font-size: 11px;
    color: #7f8c8d;
    font-family: monospace;
}

/* Event Detail Modal */
.modal-header-content[b-sluwuth8n5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.event-detail-modal[b-sluwuth8n5] {
    height: 100%;
}

.tab-content[b-sluwuth8n5] {
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
}

.detail-grid[b-sluwuth8n5] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
}

.detail-row[b-sluwuth8n5] {
    display: contents;
}

.detail-row.full-width[b-sluwuth8n5] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
}

.detail-row label[b-sluwuth8n5] {
    font-weight: 600;
    color: #34495e;
    font-size: 13px;
}

.detail-row span[b-sluwuth8n5] {
    color: #2c3e50;
    font-size: 13px;
}

.message-box[b-sluwuth8n5] {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #e9ecef;
}

.severity-badge[b-sluwuth8n5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
}

.exception-detail[b-sluwuth8n5] {
    margin-top: 25px;
    padding: 15px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.exception-detail h4[b-sluwuth8n5] {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #e74c3c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.traceback[b-sluwuth8n5] {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    margin: 0;
    font-family: 'Courier New', monospace;
}

/* JSON Sections */
.json-section[b-sluwuth8n5] {
    margin-bottom: 20px;
}

.json-section h4[b-sluwuth8n5] {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #34495e;
}

.json-content[b-sluwuth8n5] {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0;
    font-family: 'Courier New', monospace;
    max-height: 400px;
    overflow-y: auto;
}

/* Attributes Table */
.attributes-table[b-sluwuth8n5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.attributes-table thead[b-sluwuth8n5] {
    background: #f8f9fa;
}

.attributes-table th[b-sluwuth8n5] {
    padding: 10px;
    text-align: left;
    font-weight: 600;
    color: #34495e;
    border-bottom: 2px solid #e9ecef;
}

.attributes-table td[b-sluwuth8n5] {
    padding: 10px;
    border-bottom: 1px solid #f1f3f5;
    color: #2c3e50;
}

.attributes-table tbody tr:hover[b-sluwuth8n5] {
    background: #f8f9fa;
}

/* Assignment Form */
.assignment-form[b-sluwuth8n5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-sluwuth8n5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-sluwuth8n5] {
    font-weight: 600;
    color: #34495e;
    font-size: 13px;
}

.form-actions[b-sluwuth8n5] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

/* Responsive */
@media (max-width: 1200px) {
    .pipeline-name[b-sluwuth8n5] {
        flex: 0 0 200px;
    }

    .notebook-name[b-sluwuth8n5] {
        flex: 0 0 180px;
    }
}

@media (max-width: 768px) {
    .filter-row[b-sluwuth8n5] {
        flex-direction: column;
    }

    .filter-item[b-sluwuth8n5] {
        width: 100%;
    }

    .filter-actions[b-sluwuth8n5] {
        margin-left: 0;
        width: 100%;
    }

    .summary-cards[b-sluwuth8n5] {
        grid-template-columns: 1fr;
    }

    .pipeline-header[b-sluwuth8n5],
    .notebook-header[b-sluwuth8n5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pipeline-meta[b-sluwuth8n5],
    .notebook-meta[b-sluwuth8n5] {
        width: 100%;
    }

    .detail-grid[b-sluwuth8n5] {
        grid-template-columns: 1fr;
    }

    .detail-row.full-width[b-sluwuth8n5] {
        grid-template-columns: 1fr;
    }
}

/* Utility Classes */
.card[b-sluwuth8n5] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.text-success[b-sluwuth8n5] { color: #27ae60; }
.text-danger[b-sluwuth8n5] { color: #e74c3c; }
.text-warning[b-sluwuth8n5] { color: #f39c12; }
.text-info[b-sluwuth8n5] { color: #3498db; }

/* Multi-Tenant Summary View */
.client-cards-grid[b-sluwuth8n5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.client-card[b-sluwuth8n5] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid #3498db;
}

.client-card:hover[b-sluwuth8n5] {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.client-card.status-success[b-sluwuth8n5] {
    border-left-color: #27ae60;
}

.client-card.status-warning[b-sluwuth8n5] {
    border-left-color: #f39c12;
}

.client-card.status-error[b-sluwuth8n5] {
    border-left-color: #e74c3c;
}

.card-header[b-sluwuth8n5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ecf0f1;
}

.card-header h3[b-sluwuth8n5] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.card-header .client-id[b-sluwuth8n5] {
    font-size: 12px;
    color: #95a5a6;
    background: #ecf0f1;
    padding: 4px 8px;
    border-radius: 4px;
}

.card-metrics[b-sluwuth8n5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.metric[b-sluwuth8n5] {
    text-align: center;
}

.metric-value[b-sluwuth8n5] {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.metric-value.error-text[b-sluwuth8n5] {
    color: #e74c3c;
}

.metric-label[b-sluwuth8n5] {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-chart[b-sluwuth8n5] {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.chart-title[b-sluwuth8n5] {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}

.simple-bar-chart[b-sluwuth8n5] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 100px;
    gap: 8px;
}

.bar-container[b-sluwuth8n5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.bar[b-sluwuth8n5] {
    width: 100%;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 4px 4px 0 0;
    min-height: 5px;
    transition: all 0.3s ease;
}

.bar-container:hover .bar[b-sluwuth8n5] {
    opacity: 0.8;
}

.bar-label[b-sluwuth8n5] {
    font-size: 10px;
    color: #7f8c8d;
    font-weight: 600;
}

.bar-value[b-sluwuth8n5] {
    font-size: 11px;
    color: #2c3e50;
    font-weight: 600;
}

.card-footer[b-sluwuth8n5] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ecf0f1;
    text-align: center;
}

.view-details[b-sluwuth8n5] {
    font-size: 13px;
    color: #3498db;
    font-weight: 600;
}

.btn-back[b-sluwuth8n5] {
    margin-left: 20px;
    padding: 8px 16px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.btn-back:hover[b-sluwuth8n5] {
    background: #2980b9;
}

.btn-back i[b-sluwuth8n5] {
    margin-right: 6px;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/ClearCache.razor.rz.scp.css */
/* COMMENT: Styling for cache management page
   PURPOSE: Professional, clean UI for cache administration
   IMPLICATION: Consistent with existing admin pages */

.modern-page-header[b-lklvf3nafv] {
    margin-bottom: 2rem;
}

.header-banner-blue[b-lklvf3nafv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 8px;
}

.header-content-wrapper[b-lklvf3nafv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.header-left-section[b-lklvf3nafv] {
    color: white;
}

.page-title[b-lklvf3nafv] {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-title i[b-lklvf3nafv] {
    font-size: 1.8rem;
}

.page-subtitle[b-lklvf3nafv] {
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
    opacity: 0.9;
}

.page-content[b-lklvf3nafv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.filter-section[b-lklvf3nafv] {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.filter-row[b-lklvf3nafv] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-label[b-lklvf3nafv] {
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 120px;
}

.loading-container[b-lklvf3nafv] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loading-container i[b-lklvf3nafv] {
    font-size: 2.5rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.loading-container p[b-lklvf3nafv] {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

.grid-container[b-lklvf3nafv] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

.grid-header[b-lklvf3nafv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.grid-header h3[b-lklvf3nafv] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.btn[b-lklvf3nafv] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn:disabled[b-lklvf3nafv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger[b-lklvf3nafv] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-lklvf3nafv] {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.3);
}

.btn-secondary[b-lklvf3nafv] {
    background: #6b7280;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-lklvf3nafv] {
    background: #4b5563;
}

.btn-delete[b-lklvf3nafv] {
    background: transparent;
    border: none;
    color: #dc2626;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1.1rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-delete:hover[b-lklvf3nafv] {
    background: #fee2e2;
    color: #b91c1c;
}

.status-badge[b-lklvf3nafv] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.status-active[b-lklvf3nafv] {
    background: #d1fae5;
    color: #065f46;
}

.status-expired[b-lklvf3nafv] {
    background: #fee2e2;
    color: #991b1b;
}

.empty-state[b-lklvf3nafv] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.empty-state i[b-lklvf3nafv] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state p[b-lklvf3nafv] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

.access-denied-container[b-lklvf3nafv] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.access-denied-container h2[b-lklvf3nafv] {
    color: #dc2626;
    margin-bottom: 1rem;
}

.access-denied-container p[b-lklvf3nafv] {
    color: #6b7280;
}

.confirm-dialog[b-lklvf3nafv] {
    padding: 1rem 0;
}

.confirm-dialog p[b-lklvf3nafv] {
    margin: 0.5rem 0;
    font-size: 1rem;
}

.confirm-dialog strong[b-lklvf3nafv] {
    color: #dc2626;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/DeploymentVersionDetail.razor.rz.scp.css */
.dvd-back-btn[b-0095tujqqw] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.dvd-back-btn:hover[b-0095tujqqw] { background: rgba(255, 255, 255, 0.35); }

.dvd-header-btn[b-0095tujqqw] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s;
}

.dvd-header-btn:hover[b-0095tujqqw] { background: rgba(255, 255, 255, 0.35); }

.dvd-version-pill[b-0095tujqqw] {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.15rem 0.65rem;
    border-radius: 20px;
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

.dvd-content-wrapper[b-0095tujqqw] { max-width: 860px; margin: 0 auto; }

.dvd-summary-card[b-0095tujqqw] {
    background: white;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
}

.dvd-summary-header[b-0095tujqqw] { display: flex; align-items: center; gap: 1rem; }

.dvd-summary-icon[b-0095tujqqw] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0C5FE3, #0a4fc0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.dvd-summary-version[b-0095tujqqw] { font-size: 1.1rem; font-weight: 700; color: #0C5FE3; }
.dvd-summary-title[b-0095tujqqw] { font-size: 1rem; font-weight: 600; color: #111827; margin-top: 0.15rem; }

.dvd-badge-published[b-0095tujqqw] {
    background: #dcfce7; color: #166534; padding: 0.25rem 0.7rem;
    border-radius: 20px; font-size: 0.8rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.3rem;
}

.dvd-badge-draft[b-0095tujqqw] {
    background: #fef9c3; color: #854d0e; padding: 0.25rem 0.7rem;
    border-radius: 20px; font-size: 0.8rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.3rem;
}

.dvd-badge-ai[b-0095tujqqw] {
    background: #ede9fe; color: #5b21b6; padding: 0.25rem 0.7rem;
    border-radius: 20px; font-size: 0.8rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.3rem;
}

.dvd-notes-card[b-0095tujqqw] {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
}

.dvd-notes-heading[b-0095tujqqw] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f3f4f6;
}

.dvd-notes-heading i[b-0095tujqqw] { color: #0C5FE3; }

.dvd-notes-body[b-0095tujqqw] { display: flex; flex-direction: column; gap: 0.2rem; }

.dvd-section-heading[b-0095tujqqw] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e40af;
    margin: 1.25rem 0 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dvd-bullet[b-0095tujqqw] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    margin: 0.15rem 0;
    background: #f9fafb;
    transition: background 0.1s;
}

.dvd-bullet:hover[b-0095tujqqw] { background: #f3f4f6; }

.dvd-bullet-dot[b-0095tujqqw] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.dvd-bullet span:last-child[b-0095tujqqw] { color: #374151; font-size: 0.925rem; line-height: 1.55; }

.dvd-paragraph[b-0095tujqqw] { color: #4b5563; font-size: 0.925rem; line-height: 1.6; margin: 0.5rem 0; }

.dvd-meta-row[b-0095tujqqw] {
    display: flex;
    gap: 2rem;
    font-size: 0.82rem;
    color: #6b7280;
    padding: 0.5rem 0;
}

.dvd-empty-state[b-0095tujqqw] {
    text-align: center;
    padding: 4rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: #9ca3af;
}

.dvd-empty-state i[b-0095tujqqw] { font-size: 3rem; margin-bottom: 1rem; display: block; opacity: 0.3; }
.dvd-empty-state h3[b-0095tujqqw] { color: #6b7280; margin: 0 0 0.5rem 0; }

/* Shared button base */
.dvd-btn[b-0095tujqqw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.dvd-btn:disabled[b-0095tujqqw] { opacity: 0.5; cursor: not-allowed; }
.dvd-btn-primary[b-0095tujqqw] { background: #0C5FE3; color: white; }
.dvd-btn-primary:hover:not(:disabled)[b-0095tujqqw] { background: #0a4fc0; }
.dvd-btn-outline[b-0095tujqqw] { background: white; color: #374151; border: 1px solid #d1d5db; }
.dvd-btn-outline:hover[b-0095tujqqw] { background: #f9fafb; }
.dvd-btn-ai[b-0095tujqqw] { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: white; }
.dvd-btn-ai:hover:not(:disabled)[b-0095tujqqw] { opacity: 0.9; }

/* Edit dialog form */
.dvd-form-group[b-0095tujqqw] { margin-bottom: 1.25rem; }

.dvd-label[b-0095tujqqw] {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.dvd-validation-error[b-0095tujqqw] {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

/* AI enhance row (edit dialog) */
.dvd-enhance-row[b-0095tujqqw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dvd-enhanced-tag[b-0095tujqqw] {
    font-size: 0.8rem;
    color: #5b21b6;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Enhanced notes preview panel */
.dvd-enhanced-preview[b-0095tujqqw] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.dvd-enhanced-preview-label[b-0095tujqqw] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dvd-enhanced-preview-text[b-0095tujqqw] {
    font-family: inherit;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/DeploymentVersions.razor.rz.scp.css */
.dv-btn[b-i68adt2kol] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.dv-btn:disabled[b-i68adt2kol] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dv-btn-white[b-i68adt2kol] { background: white; color: #0C5FE3; }
.dv-btn-white:hover[b-i68adt2kol] { background: #eff6ff; }
.dv-btn-primary[b-i68adt2kol] { background: #0C5FE3; color: white; }
.dv-btn-primary:hover:not(:disabled)[b-i68adt2kol] { background: #0a4fc0; }
.dv-btn-outline[b-i68adt2kol] { background: white; color: #374151; border: 1px solid #d1d5db; }
.dv-btn-outline:hover[b-i68adt2kol] { background: #f9fafb; }
.dv-btn-ai[b-i68adt2kol] { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: white; }
.dv-btn-ai:hover:not(:disabled)[b-i68adt2kol] { opacity: 0.9; }
.dv-btn-publish[b-i68adt2kol] { background: #059669; color: white; }
.dv-btn-publish:hover:not(:disabled)[b-i68adt2kol] { background: #047857; }
.dv-btn-danger[b-i68adt2kol] { background: #dc2626; color: white; }
.dv-btn-danger:hover:not(:disabled)[b-i68adt2kol] { background: #b91c1c; }

.dv-empty-state[b-i68adt2kol] {
    text-align: center;
    padding: 4rem;
    color: #9ca3af;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dv-empty-state i[b-i68adt2kol] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
    display: block;
}

.dv-empty-state h3[b-i68adt2kol] { margin: 0 0 0.5rem 0; color: #6b7280; }

.dv-version-list[b-i68adt2kol] { display: flex; flex-direction: column; gap: 0.75rem; }

.dv-version-card[b-i68adt2kol] {
    background: white;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-left: 4px solid #e5e7eb;
    transition: box-shadow 0.15s;
}

.dv-version-card:hover[b-i68adt2kol] { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }

.dv-card-left[b-i68adt2kol] { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }

.dv-card-right[b-i68adt2kol] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dv-version-badge[b-i68adt2kol] {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-published[b-i68adt2kol] { background: #dcfce7; color: #166534; }
.badge-draft[b-i68adt2kol] { background: #fef9c3; color: #854d0e; }

.dv-card-title[b-i68adt2kol] { font-weight: 600; color: #111827; font-size: 0.95rem; }
.dv-card-sub[b-i68adt2kol] { font-size: 0.8rem; color: #6b7280; margin-top: 0.2rem; }

.dv-status-chip[b-i68adt2kol] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
}

.chip-published[b-i68adt2kol] { background: #dcfce7; color: #166534; }
.chip-draft[b-i68adt2kol] { background: #fef9c3; color: #854d0e; }
.chip-ai[b-i68adt2kol] { background: #ede9fe; color: #5b21b6; }

.dv-form-group[b-i68adt2kol] { margin-bottom: 1.25rem; }

.dv-label[b-i68adt2kol] {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.dv-required[b-i68adt2kol] { color: #dc2626; }

.dv-radio-label[b-i68adt2kol] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.dv-validation-error[b-i68adt2kol] {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

/* AI enhance row (create dialog) */
.dv-enhance-row[b-i68adt2kol] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dv-enhanced-tag[b-i68adt2kol] {
    font-size: 0.8rem;
    color: #5b21b6;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Enhanced notes preview panel */
.dv-enhanced-preview[b-i68adt2kol] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.dv-enhanced-preview-label[b-i68adt2kol] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dv-enhanced-preview-text[b-i68adt2kol] {
    font-family: inherit;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/FormManagement.razor.rz.scp.css */
.management-dashboard[b-vp4m4c2gfv] {
    padding: 2rem 0;
}

.stats-grid[b-vp4m4c2gfv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-vp4m4c2gfv] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.stat-icon[b-vp4m4c2gfv] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.stat-content[b-vp4m4c2gfv] {
    flex: 1;
}

.stat-value[b-vp4m4c2gfv] {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-vp4m4c2gfv] {
    color: #666;
    font-size: 0.875rem;
}

.progress-container[b-vp4m4c2gfv] {
    padding: 1rem 0;
}

.progress-bar-large[b-vp4m4c2gfv] {
    height: 40px;
    background: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill-large[b-vp4m4c2gfv] {
    height: 100%;
    background: linear-gradient(90deg, #388e3c, #66bb6a);
    transition: width 0.5s;
}

.progress-legend[b-vp4m4c2gfv] {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.progress-legend-item[b-vp4m4c2gfv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.legend-dot[b-vp4m4c2gfv] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.progress-legend-item.completed .legend-dot[b-vp4m4c2gfv] {
    background: #388e3c;
}

.progress-legend-item.in-progress .legend-dot[b-vp4m4c2gfv] {
    background: #f57c00;
}

.progress-legend-item.not-started .legend-dot[b-vp4m4c2gfv] {
    background: #999;
}

.card-header[b-vp4m4c2gfv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.search-box[b-vp4m4c2gfv] {
    width: 300px;
}

.header-content[b-vp4m4c2gfv] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 1rem 0;
}

.header-actions[b-vp4m4c2gfv] {
    display: flex;
    gap: 0.5rem;
}

.mt-4[b-vp4m4c2gfv] {
    margin-top: 1.5rem;
}

.text-muted[b-vp4m4c2gfv] {
    color: #666;
}

.breadcrumb[b-vp4m4c2gfv] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

    .breadcrumb a[b-vp4m4c2gfv] {
        color: #1976d2;
        text-decoration: none;
    }

        .breadcrumb a:hover[b-vp4m4c2gfv] {
            text-decoration: underline;
        }

.progress-cell[b-vp4m4c2gfv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-mini[b-vp4m4c2gfv] {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-mini[b-vp4m4c2gfv] {
    height: 100%;
    background: #1976d2;
    transition: width 0.3s;
}

.progress-text[b-vp4m4c2gfv] {
    font-size: 0.875rem;
    color: #666;
    min-width: 40px;
}

.completed-icon[b-vp4m4c2gfv] {
    color: #388e3c;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.grid-actions[b-vp4m4c2gfv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-icon-sm[b-vp4m4c2gfv] {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

    .btn-icon-sm:hover[b-vp4m4c2gfv] {
        background: #f5f5f5;
        color: #1976d2;
        border-color: #1976d2;
    }

    .btn-icon-sm i[b-vp4m4c2gfv] {
        font-size: 1rem;
    }

.status-badge[b-vp4m4c2gfv] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-assigned[b-vp4m4c2gfv] {
    background: #e3f2fd;
    color: #1976d2;
}

.status-viewed[b-vp4m4c2gfv] {
    background: #fff3e0;
    color: #f57c00;
}

.status-inprogress[b-vp4m4c2gfv] {
    background: #fff3e0;
    color: #f57c00;
}

.status-completed[b-vp4m4c2gfv] {
    background: #e8f5e9;
    color: #388e3c;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/InterventionsParquetExport.razor.rz.scp.css */
/* InterventionsParquetExport scoped styles — admin ops tool, intentionally simple
   (single textbox, two action cards, results pane). Mirrors the visual idiom of
   ClearCache + other admin pages. */

.export-content[b-bvywjiyng2] {
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 920px;
}

.export-card[b-bvywjiyng2] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.export-card h2[b-bvywjiyng2] {
    margin: 0 0 0.4rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.export-card-danger[b-bvywjiyng2] {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.export-help[b-bvywjiyng2] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #4b5563;
}

.export-help code[b-bvywjiyng2] {
    padding: 0.1rem 0.35rem;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 0.8em;
    color: #1f2937;
}

.form-row[b-bvywjiyng2] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.form-label[b-bvywjiyng2] {
    font-size: 0.825rem;
    font-weight: 500;
    color: #1f2937;
}

.form-actions[b-bvywjiyng2] {
    display: flex;
    gap: 0.5rem;
}

.btn-primary[b-bvywjiyng2],
.btn-secondary[b-bvywjiyng2] {
    padding: 0.55rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.btn-primary[b-bvywjiyng2] {
    background: #0C5FE3;
    color: #ffffff;
}

.btn-primary:hover:not(:disabled)[b-bvywjiyng2] {
    background: #0a4fc0;
}

.btn-primary:disabled[b-bvywjiyng2] {
    background: #93c5fd;
    cursor: not-allowed;
}

.btn-secondary[b-bvywjiyng2] {
    background: #ffffff;
    color: #4b5563;
    border-color: #d1d5db;
}

.btn-secondary-danger[b-bvywjiyng2] {
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-secondary-danger:hover:not(:disabled)[b-bvywjiyng2] {
    background: #fee2e2;
    border-color: #fca5a5;
}

.btn-secondary:disabled[b-bvywjiyng2] {
    color: #9ca3af;
    cursor: not-allowed;
}

/* ────────── Results pane ────────── */

.export-result[b-bvywjiyng2] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.export-result h3[b-bvywjiyng2] {
    margin: 0 0 0.6rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

.result-grid[b-bvywjiyng2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.25rem;
    font-size: 0.825rem;
    color: #4b5563;
}

.result-grid > div[b-bvywjiyng2] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.result-grid strong[b-bvywjiyng2] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.result-grid span[b-bvywjiyng2] {
    color: #1f2937;
    font-weight: 500;
}

.result-status.ok[b-bvywjiyng2] {
    color: #065f46;
}

.result-status.fail[b-bvywjiyng2] {
    color: #991b1b;
}

.result-error[b-bvywjiyng2] {
    grid-column: 1 / -1;
    color: #991b1b;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/PipelineMonitoring.razor.rz.scp.css */
/* Scoped styles for the Pipeline Monitoring admin page.
   PURPOSE: Match the visual language of GroupsNew.razor and other modern admin pages.
   IMPLICATION: Page-specific overrides live here; the blue header banner comes from
                /css/modern-page-header.css. */

.page-container[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-section[b-j75agcn61q] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Manage button placement inside the blue header */
.header-right-section[b-j75agcn61q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-button:disabled[b-j75agcn61q] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary button used for dialog Cancel — neutral colour to differentiate from primary */
.btn-secondary[b-j75agcn61q] {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 8px;
}

.btn-secondary:hover[b-j75agcn61q] {
    background: #f1f5f9;
}

.loading-state[b-j75agcn61q],
.empty-state[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.empty-state i[b-j75agcn61q],
.loading-state i[b-j75agcn61q] {
    color: #2563eb;
    font-size: 28px;
}

.empty-sub[b-j75agcn61q] {
    color: #94a3b8;
    font-size: 13px;
    margin-top: -4px;
}

.unauthorized-container[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #475569;
}

.unauthorized-container i[b-j75agcn61q] {
    font-size: 48px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.unauthorized-container h2[b-j75agcn61q] {
    margin: 0 0 8px;
    color: #1e293b;
}

.grid-footer[b-j75agcn61q] {
    padding: 8px 4px;
    display: flex;
    justify-content: flex-end;
}

.selection-summary[b-j75agcn61q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}

.selection-summary i[b-j75agcn61q] {
    color: #16a34a;
}

/* Syncfusion grid overrides using ::deep so scoped CSS reaches the inner DOM */
[b-j75agcn61q] .e-grid {
    border-radius: 8px;
    overflow: hidden;
}

[b-j75agcn61q] .e-grid .e-headercell {
    background: #f1f5f9;
    color: #1e293b;
    font-weight: 600;
}

/* Dialog content padding — give the picker grid room to breathe */
[b-j75agcn61q] .e-dialog .e-dlg-content {
    padding: 16px 20px;
}

[b-j75agcn61q] .e-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
}

/* Pipeline Run Status section — separator, headline, filter row, expandable detail */
.failures-section[b-j75agcn61q] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

/* Filter row above the run-status grid: All-trusts toggle, Trust dropdown, Status dropdown */
.status-filters[b-j75agcn61q] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 12px 0 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.filter-field[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.filter-field label[b-j75agcn61q] {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* History icon button in the run-status grid's last column */
.history-button[b-j75agcn61q] {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #1e40af;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 120ms ease;
}

.history-button:hover[b-j75agcn61q] {
    background: #eff6ff;
    border-color: #2563eb;
}

.history-button:focus[b-j75agcn61q] {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

/* Configure Databricks button — secondary action in the header alongside Manage Pipelines */
.btn-outline[b-j75agcn61q] {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-right: 8px;
}

.btn-outline:hover:not(:disabled)[b-j75agcn61q] {
    background: rgba(255, 255, 255, 0.1);
}

/* Databricks setup dialog form layout */
.db-form[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.db-form-field[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-form-field label[b-j75agcn61q] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.db-form-field .required[b-j75agcn61q] {
    color: #dc2626;
    margin-left: 2px;
}

.db-form-section-header[b-j75agcn61q] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-form-section-header span[b-j75agcn61q] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.db-form-section-header small[b-j75agcn61q] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Toolbar above the picker grid — currently hosts the Show job parameters toggle */
.picker-toolbar[b-j75agcn61q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 12px;
}

/* Fabric workspace-id override block in the Select-pipelines dialog. */
.fabric-ws-toolbar[b-j75agcn61q] {
    padding: 8px 4px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eef2f7;
}

.fabric-ws-label[b-j75agcn61q] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

/* Input + Fetch button on one row; input flexes, button keeps its width. */
.fabric-ws-row[b-j75agcn61q] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fabric-ws-row .fabric-ws-input[b-j75agcn61q] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Fetch button — never collapses/wraps so it's always visible beside the input. */
.btn-fetch[b-j75agcn61q] {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 13px;
}

.picker-loading[b-j75agcn61q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #2563eb;
}

/* Compact key=value pills used by the Parameters column when the toggle is on */
.param-list[b-j75agcn61q] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.param-pill[b-j75agcn61q] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 11px;
    font-family: ui-monospace, "Consolas", "Cascadia Code", monospace;
    color: #1e293b;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.param-pill .param-key[b-j75agcn61q] {
    color: #475569;
    font-weight: 600;
}

.param-pill .param-sep[b-j75agcn61q] {
    color: #94a3b8;
    margin: 0 2px;
}

.param-pill .param-value[b-j75agcn61q] {
    color: #1e293b;
}

.muted-cell[b-j75agcn61q] {
    color: #94a3b8;
    font-style: italic;
}

/* Checkbox row inside the setup dialog form — no label-above structure since the checkbox label is inline */
.db-form-checkbox[b-j75agcn61q] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.section-header h2[b-j75agcn61q] {
    margin: 0 0 4px;
    font-size: 18px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h2 i[b-j75agcn61q] {
    color: #dc2626;
}

.section-header p[b-j75agcn61q] {
    margin: 0 0 16px;
    font-size: 13px;
    color: #64748b;
}

/* Expandable detail panel inside the failures grid */
.failure-detail[b-j75agcn61q] {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-block[b-j75agcn61q] {
    padding: 12px;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.detail-block.muted[b-j75agcn61q] {
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
}

.detail-label[b-j75agcn61q] {
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-code[b-j75agcn61q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fef2f2;
    color: #991b1b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.error-message[b-j75agcn61q] {
    margin: 0;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1e293b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =====================================================================================
   Pipeline run status chips — colored pills for the Status column.
   PURPOSE: Replace plain status text with a high-contrast chip so admins can scan grid
            state at a glance. InProgress chips pulse to signal a live run.
   IMPLICATION: Chip classes are mapped from the status string by GetStatusChipClass() in
                PipelineMonitoring.razor. Adding a new state requires updating both places.
   ===================================================================================== */
.status-chip[b-j75agcn61q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.status-chip .status-dot[b-j75agcn61q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-chip-success[b-j75agcn61q] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.status-chip-failed[b-j75agcn61q] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.status-chip-inprogress[b-j75agcn61q] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* Pulse only the dot on InProgress so the row doesn't shimmy — gentler than animating the chip. */
.status-chip-inprogress .status-dot[b-j75agcn61q] {
    animation: pm-pulse-dot-b-j75agcn61q 1.4s ease-in-out infinite;
}

@keyframes pm-pulse-dot-b-j75agcn61q {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.55); opacity: 0.55; }
}

.status-chip-cancelled[b-j75agcn61q] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.status-chip-pending[b-j75agcn61q] {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.status-chip-deduped[b-j75agcn61q] {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.status-chip-default[b-j75agcn61q] {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

/* =====================================================================================
   Refresh button — sits in the filters row. Icon spins while a load is in flight.
   PURPOSE: Lets the admin force a re-read of the run-status grid without changing filters.
   IMPLICATION: The .spinning modifier is toggled by Razor from isLoadingLatest; pure CSS handles
                the rotation. Disabled while spinning to prevent double-fires.
   ===================================================================================== */
.filter-field-action[b-j75agcn61q] {
    min-width: 0;
    justify-content: flex-end;
}

.refresh-button[b-j75agcn61q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e40af;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.refresh-button:hover:not(:disabled)[b-j75agcn61q] {
    background: #eff6ff;
    border-color: #2563eb;
}

.refresh-button:active:not(:disabled)[b-j75agcn61q] {
    transform: scale(0.97);
}

.refresh-button:disabled[b-j75agcn61q] {
    opacity: 0.6;
    cursor: progress;
}

.refresh-button i[b-j75agcn61q] {
    transition: transform 200ms ease;
}

.refresh-button.spinning i[b-j75agcn61q] {
    animation: pm-refresh-spin-b-j75agcn61q 0.9s linear infinite;
}

@keyframes pm-refresh-spin-b-j75agcn61q {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =====================================================================================
   Page fade-in — subtle entrance animation for loading/empty states and the run-status grid
   so data swaps feel smooth instead of snapping.
   PURPOSE: Apply a soft fade + slight upward translate (~6px) over 180ms when these
            sections mount or re-mount. Cheap, GPU-friendly, no JS state.
   IMPLICATION: Animation triggers each time the block enters the DOM (filter change,
                refresh, dialog open) — same effect as a content swap.
   ===================================================================================== */
.loading-state[b-j75agcn61q],
.empty-state[b-j75agcn61q],
.failures-section[b-j75agcn61q]  .e-grid,
[b-j75agcn61q] .e-dialog .e-grid {
    animation: pm-fade-slide-in-b-j75agcn61q 180ms ease-out both;
}

@keyframes pm-fade-slide-in-b-j75agcn61q {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Date-range toolbar shown above the run history grid in the popup.
   Layout: From + To date pickers side by side with a reset link on the right.
   Why: keeps the picker controls visually paired and pinned above the grid so
   ops always know which window the grid currently reflects. */
.history-toolbar[b-j75agcn61q] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.history-date-field[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
}

.history-date-field label[b-j75agcn61q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-reset-btn[b-j75agcn61q] {
    margin-left: auto;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.history-reset-btn:hover[b-j75agcn61q] {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b;
}

.history-reset-btn i[b-j75agcn61q] {
    margin-right: 0.375rem;
}

/* ===== Linked Reports column chip ===== */
.report-link-chip[b-j75agcn61q] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    border: 1px dashed #94a3b8;
    background: transparent;
    color: #64748b;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.report-link-chip:hover[b-j75agcn61q] {
    background: #f1f5f9;
    border-color: #475569;
    color: #1e293b;
}

.report-link-chip.has-links[b-j75agcn61q] {
    border-style: solid;
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.report-link-chip.has-links:hover[b-j75agcn61q] {
    background: #dbeafe;
}

/* ===== Link Reports sub-dialog ===== */
.report-picker-subtitle[b-j75agcn61q] {
    font-weight: 400;
    font-size: 0.875rem;
    color: #64748b;
    margin-left: 0.25rem;
}

.report-picker-hint[b-j75agcn61q] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 0.875rem 0;
}

.report-picker-list[b-j75agcn61q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.report-picker-item[b-j75agcn61q] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 100ms ease;
    border: 1px solid transparent;
}

.report-picker-item:hover[b-j75agcn61q] {
    background: #f8fafc;
}

.report-picker-item.selected[b-j75agcn61q] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.report-picker-name[b-j75agcn61q] {
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.4;
}

.report-picker-count[b-j75agcn61q] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: #64748b;
    text-align: right;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/TemplateDistributions.razor.rz.scp.css */
.template-distributions-page[b-hieckbx3br] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-hieckbx3br] {
    margin-bottom: 2rem;
}

.breadcrumb[b-hieckbx3br] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.breadcrumb a[b-hieckbx3br] {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover[b-hieckbx3br] {
    text-decoration: underline;
}

.header-content h1[b-hieckbx3br] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 600;
}

.subtitle[b-hieckbx3br] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.header-actions[b-hieckbx3br] {
    margin-top: 1rem;
}

.page-content[b-hieckbx3br] {
    margin-top: 2rem;
}

/* Empty State */
.empty-state[b-hieckbx3br] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--background-light, #f9f9f9);
    border-radius: 8px;
}

.empty-icon[b-hieckbx3br] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state h3[b-hieckbx3br] {
    margin: 1rem 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.empty-state p[b-hieckbx3br] {
    margin: 0 0 2rem 0;
    color: var(--text-muted);
}

/* Progress Cell */
.progress-cell[b-hieckbx3br] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-mini[b-hieckbx3br] {
    flex: 1;
    min-width: 60px;
    height: 8px;
    background: var(--background-light, #e0e0e0);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-mini[b-hieckbx3br] {
    height: 100%;
    background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-hieckbx3br] {
    font-size: 0.875rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* Status Badges */
.status-badge[b-hieckbx3br] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-badge.status-draft[b-hieckbx3br] {
    background: var(--info-light, #e3f2fd);
    color: var(--info, #2196f3);
}

.status-badge.status-active[b-hieckbx3br] {
    background: var(--success-light, #e8f5e9);
    color: var(--success, #4caf50);
}

.status-badge.status-closed[b-hieckbx3br] {
    background: var(--text-muted-light, #f5f5f5);
    color: var(--text-muted, #757575);
}

.status-badge i[b-hieckbx3br] {
    font-size: 0.875rem;
}

/* Action Buttons */
.action-buttons[b-hieckbx3br] {
    display: flex;
    gap: 0.5rem;
}

/* Summary Stats */
.summary-stats[b-hieckbx3br] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.stat-card[b-hieckbx3br] {
    text-align: center;
    padding: 1.5rem;
}

.stat-label[b-hieckbx3br] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.stat-value[b-hieckbx3br] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Grid Card */
.distributions-card[b-hieckbx3br] {
    padding: 1.5rem;
}

/* KPI Subheader - compact stats row below main header */
.kpi-subheader[b-hieckbx3br] {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 2rem;
}

.kpi-row[b-hieckbx3br] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.kpi-tile[b-hieckbx3br] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.kpi-icon[b-hieckbx3br] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.kpi-icon.blue[b-hieckbx3br] {
    background: #dbeafe;
    color: #2563eb;
}

.kpi-icon.green[b-hieckbx3br] {
    background: #dcfce7;
    color: #16a34a;
}

.kpi-icon.orange[b-hieckbx3br] {
    background: #ffedd5;
    color: #ea580c;
}

.kpi-icon.purple[b-hieckbx3br] {
    background: #f3e8ff;
    color: #9333ea;
}

.kpi-content[b-hieckbx3br] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.kpi-value[b-hieckbx3br] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

.kpi-label[b-hieckbx3br] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Simplified progress text */
.progress-text-simple[b-hieckbx3br] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
}
/* _content/OEAI.Apps.SaaS/Pages/Admin/TrustPipelineOverview.razor.rz.scp.css */
/* ===== TRUST PIPELINE OVERVIEW — scoped styles =====
   PURPOSE: Full-width accordion table replacing the old card grid.
   IMPLICATION: Health colours are load-bearing — they map to OverallHealth values
                returned by TrustPipelineCardDto. The health-dot and row left-bar
                both derive from the same health-* class. */

.page-container[b-1tc659y8g6] { display: flex; flex-direction: column; width: 100%; }
.content-section[b-1tc659y8g6] { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }

/* ── Header stats ── */
.header-stats[b-1tc659y8g6] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Last-refreshed timestamp on the blue header banner — muted light text. */
.last-refreshed[b-1tc659y8g6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    margin-right: 4px;
}
.last-refreshed i[b-1tc659y8g6] { font-size: 11px; }
.stat-chip[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.stat-chip i[b-1tc659y8g6] { font-size: 11px; }
.stat-chip-neutral[b-1tc659y8g6]    { background: rgba(255,255,255,0.15); color: #fff; }
.stat-chip-success[b-1tc659y8g6]    { background: rgba(16,185,129,0.25);  color: #a7f3d0; }
.stat-chip-failed[b-1tc659y8g6]     { background: rgba(239,68,68,0.25);   color: #fca5a5; }
.stat-chip-inprogress[b-1tc659y8g6] { background: rgba(59,130,246,0.25);  color: #bfdbfe; }

.admin-button.spinning i[b-1tc659y8g6] { animation: spin-b-1tc659y8g6 0.8s linear infinite; }
@keyframes spin-b-1tc659y8g6 { to { transform: rotate(360deg); } }

/* ── Filter bar ── */
.filter-bar[b-1tc659y8g6] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 0 4px; }

.search-wrapper[b-1tc659y8g6] { position: relative; flex: 0 0 260px; }
.search-icon[b-1tc659y8g6] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; pointer-events: none; }
.search-input[b-1tc659y8g6] { width: 100%; padding: 8px 30px 8px 32px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #1e293b; background: #fff; outline: none; transition: border-color 0.15s; }
.search-input:focus[b-1tc659y8g6] { border-color: #2563eb; }
.search-clear[b-1tc659y8g6] { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 12px; padding: 2px; }
.search-clear:hover[b-1tc659y8g6] { color: #475569; }

.filter-chips[b-1tc659y8g6] { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip[b-1tc659y8g6] { padding: 5px 14px; border-radius: 20px; border: 1px solid #e2e8f0; background: #fff; font-size: 13px; color: #475569; cursor: pointer; transition: all 0.15s; font-weight: 500; }
.filter-chip:hover[b-1tc659y8g6] { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.filter-chip.active[b-1tc659y8g6] { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ── Trust table (full-width accordion list) ── */
.trust-table[b-1tc659y8g6] { display: flex; flex-direction: column; gap: 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* Column widths for the summary row */
.tt-header-row[b-1tc659y8g6], .tt-row[b-1tc659y8g6] {
    display: grid;
    grid-template-columns: 1fr 120px 120px 180px 110px 40px;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
}
.tt-header-row[b-1tc659y8g6] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tt-row[b-1tc659y8g6] {
    padding-top: 14px;
    padding-bottom: 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.tt-row:hover[b-1tc659y8g6] { background: #f8fafc; }

/* Health-colored left bar on each trust row */
.tt-row-wrapper[b-1tc659y8g6] {
    border-bottom: 1px solid #f1f5f9;
    border-left: 4px solid #e2e8f0;
    transition: border-left-color 0.15s;
}
.tt-row-wrapper:last-child[b-1tc659y8g6] { border-bottom: none; }
.tt-row-wrapper.health-healthy[b-1tc659y8g6]    { border-left-color: #10b981; }
.tt-row-wrapper.health-failed[b-1tc659y8g6]     { border-left-color: #ef4444; }
.tt-row-wrapper.health-inprogress[b-1tc659y8g6] { border-left-color: #3b82f6; }
.tt-row-wrapper.health-warning[b-1tc659y8g6]    { border-left-color: #f59e0b; }
.tt-row-wrapper.health-nodata[b-1tc659y8g6]     { border-left-color: #94a3b8; }
.tt-row-wrapper.expanded[b-1tc659y8g6] { background: #fafcff; }

.tt-col-trust[b-1tc659y8g6] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tt-col-actions[b-1tc659y8g6] { display: flex; justify-content: flex-end; }

/* Health dot (filled circle) */
.health-dot[b-1tc659y8g6] {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.health-dot-healthy[b-1tc659y8g6]    { background: #10b981; }
.health-dot-failed[b-1tc659y8g6]     { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,0.5); }
.health-dot-inprogress[b-1tc659y8g6] { background: #3b82f6; animation: pulse-dot-b-1tc659y8g6 1.4s ease-in-out infinite; }
.health-dot-warning[b-1tc659y8g6]    { background: #f59e0b; }
.health-dot-nodata[b-1tc659y8g6]     { background: #cbd5e1; }
@keyframes pulse-dot-b-1tc659y8g6 { 0%,100%{opacity:1} 50%{opacity:0.3} }

.trust-name[b-1tc659y8g6] { font-size: 14px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-count-label[b-1tc659y8g6] { font-size: 13px; color: #475569; }
.last-activity[b-1tc659y8g6] { font-size: 12px; color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; }
.expand-icon[b-1tc659y8g6] { color: #94a3b8; font-size: 12px; transition: color 0.15s; }
.tt-row:hover .expand-icon[b-1tc659y8g6] { color: #475569; }

/* Platform badge */
.platform-badge[b-1tc659y8g6] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-fabric[b-1tc659y8g6]     { background: #e0f2fe; color: #0369a1; }
.badge-databricks[b-1tc659y8g6] { background: #fef3c7; color: #92400e; }

/* Smaller variant for pipeline rows */
.platform-badge-sm[b-1tc659y8g6] {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 600; white-space: nowrap;
}

/* Health count mini-pills */
.health-counts[b-1tc659y8g6] { display: flex; gap: 5px; flex-wrap: wrap; }
.hc[b-1tc659y8g6] { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.hc-healthy[b-1tc659y8g6]    { background: #d1fae5; color: #059669; }
.hc-failed[b-1tc659y8g6]     { background: #fee2e2; color: #dc2626; }
.hc-inprogress[b-1tc659y8g6] { background: #dbeafe; color: #2563eb; }
.hc-nodata[b-1tc659y8g6]     { background: #f1f5f9; color: #94a3b8; }

/* ── Expanded detail area ── */
.tt-detail[b-1tc659y8g6] {
    border-top: 1px solid #e2e8f0;
    background: #fff;
    animation: fadeDown-b-1tc659y8g6 0.18s ease-out;
}
@keyframes fadeDown-b-1tc659y8g6 { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.detail-loading[b-1tc659y8g6], .detail-empty[b-1tc659y8g6] {
    padding: 24px; text-align: center; color: #64748b; font-size: 13px;
}

/* ── Tab bar ── */
.detail-tab-bar[b-1tc659y8g6] {
    display: flex; align-items: center; gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.detail-tab[b-1tc659y8g6] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 18px;
    font-size: 13px; font-weight: 500; color: #64748b;
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; transition: all 0.15s;
    white-space: nowrap;
}
.detail-tab:hover[b-1tc659y8g6] { color: #2563eb; }
.detail-tab.active[b-1tc659y8g6] { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.tab-count[b-1tc659y8g6] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: #e2e8f0; color: #475569; border-radius: 10px; font-size: 11px; font-weight: 700;
}
.detail-tab.active .tab-count[b-1tc659y8g6] { background: #dbeafe; color: #2563eb; }
.tab-bar-spacer[b-1tc659y8g6] { flex: 1; }

/* ── Pipeline table (inside expanded row) ── */
.pipeline-table[b-1tc659y8g6] { padding: 8px 20px 12px; }

.pt-header[b-1tc659y8g6], .pt-row[b-1tc659y8g6] {
    display: grid;
    grid-template-columns: 130px 1fr 110px 100px 120px 220px 40px;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
}
.pt-header[b-1tc659y8g6] {
    font-size: 11px; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;
}
.pt-row[b-1tc659y8g6] { border-bottom: 1px solid #f8fafc; transition: background 0.1s; }
.pt-row:hover[b-1tc659y8g6] { background: #f8fafc; border-radius: 6px; }
.pt-row:last-of-type[b-1tc659y8g6] { border-bottom: none; }

.pipeline-name[b-1tc659y8g6] { font-size: 13px; font-weight: 600; color: #1e293b; }
.workspace-label[b-1tc659y8g6] { font-size: 11px; color: #94a3b8; background: #f8fafc; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.run-time[b-1tc659y8g6] { font-size: 12px; color: #94a3b8; }

/* Last-run cell stacks the explicit date over the relative age. */
.pt-col-time[b-1tc659y8g6] { display: flex; flex-direction: column; line-height: 1.25; }
.run-date[b-1tc659y8g6] { font-size: 12px; color: #334155; font-weight: 500; }

/* ── Report table (PowerBI tab) ── */
.report-table[b-1tc659y8g6] { padding: 8px 20px 12px; }

.rt-header[b-1tc659y8g6], .rt-row[b-1tc659y8g6] {
    display: grid;
    grid-template-columns: 130px 1fr 110px 40px;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
}
.rt-header[b-1tc659y8g6] {
    font-size: 11px; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;
}
.rt-row[b-1tc659y8g6] { border-bottom: 1px solid #f8fafc; transition: background 0.1s; }
.rt-row:hover[b-1tc659y8g6] { background: #f8fafc; border-radius: 6px; }
.rt-row:last-of-type[b-1tc659y8g6] { border-bottom: none; }

.report-link[b-1tc659y8g6] { font-size: 13px; font-weight: 600; color: #2563eb; text-decoration: none; }
.report-link:hover[b-1tc659y8g6] { text-decoration: underline; }
.link-icon[b-1tc659y8g6] { font-size: 10px; opacity: 0.6; margin-left: 3px; }
.report-id-label[b-1tc659y8g6] { font-size: 10px; color: #94a3b8; margin-left: 6px; font-family: monospace; }

/* History icon button */
.icon-btn[b-1tc659y8g6] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    background: none; border: 1px solid #e2e8f0; color: #64748b;
    cursor: pointer; font-size: 12px; transition: all 0.15s;
}
.icon-btn:hover[b-1tc659y8g6] { background: #eff6ff; border-color: #2563eb; color: #2563eb; }

/* ── client_id badge ── */
.client-id-badge[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #fef3c7; color: #92400e; border-radius: 6px; font-size: 11px; font-weight: 600; }

/* ── Error badge ── */
.error-badge[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #fee2e2; color: #dc2626; border-radius: 6px; font-size: 11px; font-weight: 500; }

/* ── Job params toggle + pills ── */
.params-toggle[b-1tc659y8g6] {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #475569;
    font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.params-toggle:hover[b-1tc659y8g6], .params-toggle.open[b-1tc659y8g6] { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

.param-list[b-1tc659y8g6] { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 24px 8px; animation: fadeDown-b-1tc659y8g6 0.15s ease-out; }
.param-pill[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 11px; max-width: 320px; overflow: hidden; }
.param-key[b-1tc659y8g6]  { color: #475569; font-weight: 600; white-space: nowrap; }
.param-sep[b-1tc659y8g6]  { color: #94a3b8; }
.param-value[b-1tc659y8g6] { color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Status chips ── */
.status-chip[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-dot[b-1tc659y8g6]  { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-chip-success[b-1tc659y8g6]    { background: #d1fae5; color: #059669; }
.status-chip-failed[b-1tc659y8g6]     { background: #fee2e2; color: #dc2626; }
.status-chip-inprogress[b-1tc659y8g6] { background: #dbeafe; color: #2563eb; }
.status-chip-inprogress .status-dot[b-1tc659y8g6] { animation: pulse-dot-b-1tc659y8g6 1.2s ease-in-out infinite; }
.status-chip-cancelled[b-1tc659y8g6]  { background: #fef3c7; color: #d97706; }
.status-chip-pending[b-1tc659y8g6]    { background: #f1f5f9; color: #64748b; }
.status-chip-default[b-1tc659y8g6]    { background: #f1f5f9; color: #94a3b8; }

/* ── Report chips (linked reports in pipeline row) ── */
.report-chip[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; cursor: default; }
.report-chip-ok[b-1tc659y8g6]      { background: #d1fae5; color: #059669; border-color: #a7f3d0; }
.report-chip-fail[b-1tc659y8g6]    { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.report-chip-disabled[b-1tc659y8g6]{ background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
.report-chip-unknown[b-1tc659y8g6] { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.report-chip-loading[b-1tc659y8g6] { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }

/* ── Picker / dialog helpers ── */
.picker-toolbar[b-1tc659y8g6] { padding: 8px 0 12px; display: flex; align-items: center; gap: 12px; }
.grid-footer[b-1tc659y8g6] { padding: 8px 4px; display: flex; justify-content: flex-end; }
.selection-summary[b-1tc659y8g6] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #059669; font-weight: 500; }
.btn-sm[b-1tc659y8g6] { padding: 5px 12px; font-size: 13px; }

/* ── Loading / empty / error states ── */
.loading-state[b-1tc659y8g6], .empty-state[b-1tc659y8g6] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: #64748b; font-size: 14px; text-align: center; }
.empty-state i[b-1tc659y8g6] { color: #2563eb; font-size: 36px; }
.unauthorized-container[b-1tc659y8g6] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: #475569; }
.unauthorized-container i[b-1tc659y8g6]  { font-size: 48px; color: #94a3b8; margin-bottom: 16px; }
.unauthorized-container h2[b-1tc659y8g6] { margin: 0 0 8px; color: #1e293b; }

@media (max-width: 900px) {
    .tt-header-row[b-1tc659y8g6], .tt-row[b-1tc659y8g6] { grid-template-columns: 1fr 110px 140px 36px; }
    .tt-col-platform[b-1tc659y8g6], .tt-col-pipelines[b-1tc659y8g6], .tt-col-activity[b-1tc659y8g6] { display: none; }
    .pt-header[b-1tc659y8g6], .pt-row[b-1tc659y8g6] { grid-template-columns: 120px 1fr 90px 36px; }
    .pt-col-platform[b-1tc659y8g6], .pt-col-client[b-1tc659y8g6] { display: none; }
}
/* _content/OEAI.Apps.SaaS/Pages/Analytics/Components/MargeReport.razor.rz.scp.css */
/* MargeReport component scoped styles
   PURPOSE: Loading state and container styling for Marge-rendered reports
   IMPLICATION: Removing breaks loading spinner and report container sizing */

.marge-report-container[b-09i4s880mh] {
    width: 100%;
    position: relative;
}

.marge-loading-container[b-09i4s880mh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.marge-loading-spinner[b-09i4s880mh] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: marge-spin 0.8s linear infinite;
}

@@keyframes marge-spin {
    0%[b-09i4s880mh] { transform: rotate(0deg); }
    100%[b-09i4s880mh] { transform: rotate(360deg); }
}

.marge-loading-text[b-09i4s880mh] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.marge-loading-detail[b-09i4s880mh] {
    color: #9ca3af;
    font-size: 12px;
    margin: 0;
    font-style: italic;
}

.marge-error-container[b-09i4s880mh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

.marge-error-text[b-09i4s880mh] {
    color: #1f2937;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.marge-error-detail[b-09i4s880mh] {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
    max-width: 480px;
}
/* _content/OEAI.Apps.SaaS/Pages/ChitBank.razor.rz.scp.css */
/* ChitBank Page Styles
   COMMENT: Styles for the main Chit Bank page
*/

.chit-bank-page[b-3doxqsfcib] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    min-height: calc(100vh - 200px);
}

/* Page Header */
.page-header[b-3doxqsfcib] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left h1[b-3doxqsfcib] {
    margin: 0;
    font-size: 1.75rem;
    color: #2E74B5;
}

.header-left .subtitle[b-3doxqsfcib] {
    margin: 0.25rem 0 0;
    color: #666;
    font-size: 0.95rem;
}

.header-actions[b-3doxqsfcib] {
    display: flex;
    gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-3doxqsfcib] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-3doxqsfcib] {
        justify-content: flex-end;
    }
}

/* .content-view-toolbar + .content-view-toolbar--with-kpis + .content-view-toolbar__kpis */
/* moved to wwwroot/css/modern-page-header.css so every page can use the canonical chrome */
/* per DESIGN-SYSTEM.md §4.7 + §15. Page-scoped CSS below covers only the Evidence-Bank- */
/* specific toggle chip styling. */

/* Evidence view toggle chips — used inside .content-view-toolbar */
/* (AB#1747 §2.2). */

.evidence-view-toggle[b-3doxqsfcib] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    align-self: end;
    height: 36px;
}

.evidence-view-toggle__btn[b-3doxqsfcib] {
    background: #ffffff;
    border: none;
    border-right: 1px solid #e5e7eb;
    padding: 0 0.9rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.evidence-view-toggle__btn:last-child[b-3doxqsfcib] {
    border-right: none;
}

.evidence-view-toggle__btn:hover[b-3doxqsfcib] {
    background: #f3f4f6;
    color: #1f2937;
}

.evidence-view-toggle__btn.is-active[b-3doxqsfcib] {
    background: #0C5FE3;
    color: #ffffff;
}

.evidence-view-toggle__btn i[b-3doxqsfcib] {
    font-size: 0.75rem;
}

/* Evidence Bank sub-header action buttons now use the global */
/* `.sub-header-btn--ghost` (Upload image) + `.sub-header-btn--marge` (Create report) */
/* canonical variants defined in modern-page-header.css. The old per-page */
/* `.evidence-upload-btn` + `.btn-header-marge.evidence-create-report-btn` rules */
/* used the wrong green (#2B7A4B) and the wrong button chrome for a grey sub-header — */
/* retired in favour of the canonical sub-header button family. */
/* _content/OEAI.Apps.SaaS/Pages/Dashboard.razor.rz.scp.css */
/* IMPLICATION: Remove overflow from page-container to allow header to display properly */
.page-container[b-q81g9tp3bh] {
    overflow: visible !important;
}

/* IMPLICATION: White background for main content area */
.page-body[b-q81g9tp3bh] {
    background: white;
    padding: 2rem;
}

/* Loading and Error States */
.loading-state[b-q81g9tp3bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    gap: 1rem;
}

.loading-state i[b-q81g9tp3bh] {
    font-size: 2rem;
    color: #10b981;
}

.no-data-container[b-q81g9tp3bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.no-data-container i[b-q81g9tp3bh] {
    font-size: 3rem;
    color: #ffc107;
    margin-bottom: 1rem;
}

/* Placeholder Data Indicator */
.placeholder-data[b-q81g9tp3bh] {
    position: relative;
    opacity: 0.7;
}

.placeholder-data[b-q81g9tp3bh]::after {
    content: "Demo data";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #fbbf24;
    color: #78350f;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-title[b-q81g9tp3bh] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: #1a1a1a;
}

/* Three Column Grid */
.dashboard-grid[b-q81g9tp3bh] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (max-width: 1200px) {
    .dashboard-grid[b-q81g9tp3bh] {
        grid-template-columns: 1fr;
    }
}

/* Left Column: Recent Wins */
.win-card[b-q81g9tp3bh] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #065f46;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.win-card:hover[b-q81g9tp3bh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 95, 70, 0.15);
}

.win-header[b-q81g9tp3bh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.win-badge[b-q81g9tp3bh] {
    background: #065f46;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.win-date[b-q81g9tp3bh] {
    font-size: 0.85rem;
    color: #065f46;
}

.win-metric[b-q81g9tp3bh] {
    font-size: 2rem;
    font-weight: 700;
    color: #065f46;
    margin-bottom: 0.5rem;
}

.win-description[b-q81g9tp3bh] {
    color: #064e3b;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.win-location[b-q81g9tp3bh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #065f46;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Centre Column: Metrics and Focus Areas */
.metrics-grid[b-q81g9tp3bh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.metric-tile[b-q81g9tp3bh] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s;
}

.metric-tile:hover[b-q81g9tp3bh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.metric-tile i[b-q81g9tp3bh] {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 0.75rem;
}

.metric-value[b-q81g9tp3bh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.25rem;
}

.metric-label[b-q81g9tp3bh] {
    font-size: 0.85rem;
    color: #1e3a8a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.focus-card[b-q81g9tp3bh] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #92400e;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.focus-card:hover[b-q81g9tp3bh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(146, 64, 14, 0.15);
}

.focus-header[b-q81g9tp3bh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.focus-badge[b-q81g9tp3bh] {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.focus-badge.severity-high[b-q81g9tp3bh] {
    background: #dc2626;
    color: white;
}

.focus-badge.severity-medium[b-q81g9tp3bh] {
    background: #f59e0b;
    color: white;
}

.focus-category[b-q81g9tp3bh] {
    font-size: 0.85rem;
    color: #92400e;
    font-weight: 600;
}

.focus-description[b-q81g9tp3bh] {
    color: #78350f;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.focus-footer[b-q81g9tp3bh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.focus-value[b-q81g9tp3bh] {
    font-size: 0.9rem;
    color: #92400e;
    font-weight: 600;
}

.focus-link[b-q81g9tp3bh] {
    color: #92400e;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.focus-link:hover[b-q81g9tp3bh] {
    text-decoration: underline;
}

/* Right Column: AI Insights and Quick Actions */
.ai-insight-card[b-q81g9tp3bh] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 2px solid #6d28d9;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.ai-header[b-q81g9tp3bh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #6d28d9;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.ai-insight-card p[b-q81g9tp3bh] {
    color: #5b21b6;
    line-height: 1.6;
    margin: 0;
}

.action-button[b-q81g9tp3bh] {
    width: 100%;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.action-button:hover[b-q81g9tp3bh] {
    background: #f9fafb;
    border-color: #14b8a6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-button i[b-q81g9tp3bh] {
    color: #14b8a6;
    font-size: 1.25rem;
}
/* _content/OEAI.Apps.SaaS/Pages/Error/UserNotFound.razor.rz.scp.css */
/* PURPOSE: Full-page container that centers the error card both horizontally and vertically.
   Uses the app's background color for a clean, consistent look.
   IMPLICATION: Removing this causes the card to render top-left without centering. */
.user-not-found-page[b-o718w5m44s] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4ff 0%, #f9fbff 50%, #f0fdf4 100%);
    padding: 2rem;
}

/* PURPOSE: The main error card container — white card with rounded corners and shadow,
   matching the app's card design pattern (12px radius, subtle shadow).
   IMPLICATION: Removing this removes the card visual treatment. */
.user-not-found-card[b-o718w5m44s] {
    background: white;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    max-width: 480px;
    width: 100%;
    border: 1px solid #e5e7eb;
}

/* PURPOSE: Logo section at the top of the card for brand recognition.
   IMPLICATION: Removing this removes the MG branding from the error page. */
.card-logo[b-o718w5m44s] {
    margin-bottom: 2rem;
}

/* PURPOSE: Constrains the logo to a reasonable size within the card.
   IMPLICATION: Without this, the logo may render at its native size (too large). */
.mg-logo[b-o718w5m44s] {
    height: 36px;
    width: auto;
}

/* PURPOSE: Wrapper for the circular error icon — provides spacing.
   IMPLICATION: Removing this removes vertical spacing around the icon. */
.error-icon-wrapper[b-o718w5m44s] {
    margin-bottom: 1.5rem;
}

/* PURPOSE: Circular background for the error icon using the app's danger/warning gradient.
   Uses the app's standard icon circle pattern (seen in TrustOnboarding success/error states).
   IMPLICATION: Removing this renders the SVG icon without its circular background. */
.error-icon-circle[b-o718w5m44s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0C5FE3 0%, #0a4fc0 100%);
    box-shadow: 0 4px 12px rgba(12, 95, 227, 0.3);
}

/* PURPOSE: Main error title styled with the app's heading pattern (dark text, bold weight).
   Uses #1f2937 from the app's body text dark palette.
   IMPLICATION: Removing this removes the primary error heading. */
.error-title[b-o718w5m44s] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
}

/* PURPOSE: Primary error message that tells the user what happened.
   Includes the user's name when available for personalised feedback.
   IMPLICATION: Removing this removes the main explanation text. */
.error-message[b-o718w5m44s] {
    font-size: 1rem;
    color: #374151;
    margin: 0 0 0.5rem 0;
    line-height: 1.6;
}

/* PURPOSE: Secondary hint text providing context about why this error occurred
   and what the user should do. Uses the muted text color from the design system.
   IMPLICATION: Removing this removes the actionable guidance for the user. */
.error-hint[b-o718w5m44s] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

/* PURPOSE: Visual divider between the error information and the action buttons.
   Matches the app's card border color (#e5e7eb).
   IMPLICATION: Purely cosmetic; removing this just removes the visual separation. */
.card-divider[b-o718w5m44s] {
    height: 1px;
    background: #e5e7eb;
    margin: 0 0 1.5rem 0;
}

/* PURPOSE: Container for the action buttons — stacked vertically with consistent spacing.
   IMPLICATION: Without this, buttons would not be properly spaced. */
.action-buttons[b-o718w5m44s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* PURPOSE: Primary action button styled to match the app's brand blue (#0C5FE3).
   Uses the same border-radius (8px) and font-weight (600) as .btn-header-primary.
   IMPLICATION: Removing this removes the main recovery action for the user. */
.btn-primary-action[b-o718w5m44s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #0C5FE3 0%, #0a4fc0 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(12, 95, 227, 0.25);
}

.btn-primary-action:hover[b-o718w5m44s] {
    background: linear-gradient(135deg, #0a4fc0 0%, #083da0 100%);
    box-shadow: 0 4px 12px rgba(12, 95, 227, 0.35);
    transform: translateY(-1px);
}

/* PURPOSE: Secondary action button — ghost/outline style matching .btn-header-secondary pattern.
   Provides a less prominent alternative action for the user.
   IMPLICATION: Removing this removes the secondary navigation option. */
.btn-secondary-action[b-o718w5m44s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: white;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-action:hover[b-o718w5m44s] {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* PURPOSE: Support/contact information footer section.
   Uses the muted text color (#6b7280) for non-primary information.
   IMPLICATION: Removing this removes the user's path to get help. */
.support-text[b-o718w5m44s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.5;
}

/* PURPOSE: Link style for the support email — uses brand blue for visibility.
   IMPLICATION: Removing this makes the email address blend into the surrounding text. */
.support-link[b-o718w5m44s] {
    color: #0C5FE3;
    text-decoration: none;
    font-weight: 600;
}

.support-link:hover[b-o718w5m44s] {
    text-decoration: underline;
}

/* PURPOSE: Responsive adjustments for smaller screens (mobile).
   Reduces padding and font sizes for a better mobile experience.
   IMPLICATION: Removing this makes the card look cramped on mobile devices. */
@media (max-width: 480px) {
    .user-not-found-card[b-o718w5m44s] {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .error-title[b-o718w5m44s] {
        font-size: 1.25rem;
    }

    .error-icon-circle[b-o718w5m44s] {
        width: 64px;
        height: 64px;
    }

    .error-icon-circle svg[b-o718w5m44s] {
        width: 32px;
        height: 32px;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Forms/FormView.razor.rz.scp.css */
.form-view-page[b-2n7hsz8ox1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.view-header[b-2n7hsz8ox1] {
    margin-bottom: 2rem;
}

.breadcrumb[b-2n7hsz8ox1] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

    .breadcrumb a[b-2n7hsz8ox1] {
        color: #1976d2;
        text-decoration: none;
    }

        .breadcrumb a:hover[b-2n7hsz8ox1] {
            text-decoration: underline;
        }

.view-title-section[b-2n7hsz8ox1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

    .view-title-section h1[b-2n7hsz8ox1] {
        margin: 0;
    }

.status-badge[b-2n7hsz8ox1] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-completed[b-2n7hsz8ox1] {
    background: #e8f5e9;
    color: #388e3c;
}

.view-info[b-2n7hsz8ox1] {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 8px;
}

.info-item[b-2n7hsz8ox1] {
    display: flex;
    gap: 0.5rem;
}

.info-label[b-2n7hsz8ox1] {
    font-weight: 600;
}

.view-actions[b-2n7hsz8ox1] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.form-view-content[b-2n7hsz8ox1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-card[b-2n7hsz8ox1] {
    padding: 2rem;
}

.section-title[b-2n7hsz8ox1] {
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #1976d2;
}

.question-response[b-2n7hsz8ox1] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

    .question-response:last-child[b-2n7hsz8ox1] {
        border-bottom: none;
    }

.question-header-view[b-2n7hsz8ox1] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.question-code[b-2n7hsz8ox1] {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
}

.question-type-badge[b-2n7hsz8ox1] {
    background: #f5f5f5;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.question-text-view[b-2n7hsz8ox1] {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.question-purpose-view[b-2n7hsz8ox1] {
    background: #e1f5fe;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    display: flex;
    gap: 0.5rem;
    align-items: start;
}

.response-display[b-2n7hsz8ox1] {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.response-text[b-2n7hsz8ox1] {
    white-space: pre-wrap;
    line-height: 1.6;
}

.no-response[b-2n7hsz8ox1] {
    color: #999;
}

.sub-questions-view[b-2n7hsz8ox1] {
    margin-top: 1.5rem;
    padding-left: 2rem;
    border-left: 3px solid #e0e0e0;
}

    .sub-questions-view h4[b-2n7hsz8ox1] {
        margin-bottom: 1rem;
        font-size: 1rem;
    }

.sub-question-response[b-2n7hsz8ox1] {
    margin-bottom: 1.5rem;
}

.sub-question-label[b-2n7hsz8ox1] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sub-q-code[b-2n7hsz8ox1] {
    background: #e1f5fe;
    color: #0288d1;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.summary-item[b-2n7hsz8ox1] {
    margin-bottom: 2rem;
}

    .summary-item h4[b-2n7hsz8ox1] {
        margin-bottom: 0.5rem;
        color: #666;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.summary-text[b-2n7hsz8ox1] {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    line-height: 1.6;
    white-space: pre-wrap;
}

@@media print {
    .view-actions[b-2n7hsz8ox1],
    .breadcrumb[b-2n7hsz8ox1] {
        display: none;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Governance/AnnualCycle.razor.rz.scp.css */
/* IMPLICATION: Remove overflow from page-container to allow header to display properly */
.page-container[b-nizqcztlwa] {
    overflow: visible !important;
}

/* IMPLICATION: White background for main content area - reduced padding for less scrolling */
.page-body[b-nizqcztlwa] {
    background: white;
    padding: 1rem 2rem;
    width: 100%;
    max-width: 100%;
}

/* Loading State */
.loading-state[b-nizqcztlwa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem;
    text-align: center;
    gap: 1rem;
}

.loading-state i[b-nizqcztlwa] {
    font-size: 2rem;
    color: #0C5FE3;
}

/* IMPLICATION: Placeholder styling for content areas */
.content-placeholder[b-nizqcztlwa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    color: #6c757d;
}

.content-placeholder h3[b-nizqcztlwa] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
}

.content-placeholder p[b-nizqcztlwa] {
    margin: 0;
    font-size: 1rem;
    max-width: 500px;
}

/* Event Legend - positioned below calendar */
.event-legend[b-nizqcztlwa] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

.legend-header[b-nizqcztlwa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.legend-header:hover[b-nizqcztlwa] {
    background: rgba(0, 0, 0, 0.02);
    margin: -0.5rem -1rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.legend-header i[b-nizqcztlwa] {
    color: #6c757d;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.legend-title[b-nizqcztlwa] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.legend-items[b-nizqcztlwa] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.legend-item[b-nizqcztlwa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color[b-nizqcztlwa] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.legend-label[b-nizqcztlwa] {
    font-size: 0.9rem;
    color: #495057;
}

/* Calendar Container */
.calendar-container[b-nizqcztlwa] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    min-width: 100%;
}

/* Ensure Syncfusion Scheduler takes full width */
[b-nizqcztlwa] .e-schedule {
    width: 100% !important;
}

[b-nizqcztlwa] .e-schedule .e-schedule-table {
    width: 100% !important;
}

/* IMPLICATION: Hide time display in events, show only subject/title */
[b-nizqcztlwa] .e-schedule .e-appointment .e-time {
    display: none !important;
}

[b-nizqcztlwa] .e-schedule .e-appointment .e-subject {
    width: 100% !important;
    font-weight: 500;
}

/* IMPLICATION: Color coding for different governance event types */

/* Members Board - Deep Purple */
[b-nizqcztlwa] .event-members-board {
    background-color: #6f42c1 !important;
    border-color: #5a32a3 !important;
}

.legend-color.event-members-board[b-nizqcztlwa] {
    background-color: #6f42c1;
}

/* Trust Board - Royal Blue */
[b-nizqcztlwa] .event-trust-board {
    background-color: #0C5FE3 !important;
    border-color: #0a4fc0 !important;
}

.legend-color.event-trust-board[b-nizqcztlwa] {
    background-color: #0C5FE3;
}

/* Hub Committee - Teal */
[b-nizqcztlwa] .event-hub-committee {
    background-color: #14b8a6 !important;
    border-color: #0f9488 !important;
}

.legend-color.event-hub-committee[b-nizqcztlwa] {
    background-color: #14b8a6;
}

/* Education Committee - Green */
[b-nizqcztlwa] .event-education-committee {
    background-color: #10b981 !important;
    border-color: #059669 !important;
}

.legend-color.event-education-committee[b-nizqcztlwa] {
    background-color: #10b981;
}

/* FAR Committee - Orange */
[b-nizqcztlwa] .event-far-committee {
    background-color: #f59e0b !important;
    border-color: #d97706 !important;
}

.legend-color.event-far-committee[b-nizqcztlwa] {
    background-color: #f59e0b;
}

/* Training - Pink */
[b-nizqcztlwa] .event-training {
    background-color: #ec4899 !important;
    border-color: #db2777 !important;
}

.legend-color.event-training[b-nizqcztlwa] {
    background-color: #ec4899;
}

/* Visit - Indigo */
[b-nizqcztlwa] .event-visit {
    background-color: #6366f1 !important;
    border-color: #4f46e5 !important;
}

.legend-color.event-visit[b-nizqcztlwa] {
    background-color: #6366f1;
}

/* Report - Red */
[b-nizqcztlwa] .event-report {
    background-color: #ef4444 !important;
    border-color: #dc2626 !important;
}

.legend-color.event-report[b-nizqcztlwa] {
    background-color: #ef4444;
}

/* Review - Cyan */
[b-nizqcztlwa] .event-review {
    background-color: #06b6d4 !important;
    border-color: #0891b2 !important;
}

.legend-color.event-review[b-nizqcztlwa] {
    background-color: #06b6d4;
}

/* Other - Gray */
[b-nizqcztlwa] .event-other {
    background-color: #6b7280 !important;
    border-color: #4b5563 !important;
}

.legend-color.event-other[b-nizqcztlwa] {
    background-color: #6b7280;
}

/* IMPLICATION: Event text white for Month view (colored backgrounds) */
/* NOTE: Agenda view has white background so text color is set in site.css */
[b-nizqcztlwa] .e-schedule .e-month-view .e-appointment {
    color: white !important;
}

[b-nizqcztlwa] .e-schedule .e-month-view .e-appointment .e-subject,
[b-nizqcztlwa] .e-schedule .e-month-view .e-appointment .e-location,
[b-nizqcztlwa] .e-schedule .e-month-view .e-appointment .e-time {
    color: white !important;
}

/* IMPLICATION: Custom editor styling to match Syncfusion theme */
.custom-event-editor[b-nizqcztlwa] {
    padding: 1rem;
}

.custom-event-editor .e-textlabel[b-nizqcztlwa] {
    font-weight: 600;
    padding: 0.5rem;
    vertical-align: top;
    width: 120px;
}

.custom-event-editor td[b-nizqcztlwa] {
    padding: 0.5rem;
}

.custom-event-editor .e-field[b-nizqcztlwa] {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 1rem;
}

.custom-event-editor .e-field:focus[b-nizqcztlwa] {
    outline: none;
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.1);
}

/* ============================================================
   NOTE: Timeline Year View and Tooltip styles have been moved to site.css
   IMPLICATION: Syncfusion components use dynamic DOM elements that are
   outside the Blazor CSS isolation scope. The ::deep combinator doesn't
   work reliably with Syncfusion. All scheduler styles must be in global CSS.
   ============================================================ */

/* ============================================================
   AGENDA VIEW DATE HEADER
   IMPLICATION: Shows full date with month in List/Agenda view
   ============================================================ */
.agenda-date-header[b-nizqcztlwa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    min-width: 80px;
}

.agenda-date-day[b-nizqcztlwa] {
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
}

.agenda-date-number[b-nizqcztlwa] {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

.agenda-date-month[b-nizqcztlwa] {
    font-size: 12px;
    font-weight: 600;
    color: #0C5FE3;
    text-transform: uppercase;
}

/* ============================================================
   EXTRACTED INLINE STYLES
   PURPOSE: Classes moved from inline style attributes to scoped CSS.
   IMPLICATION: Removing any of these classes reverts their elements to
   browser defaults — test the editor template and placeholder before removing.
   ============================================================ */

/* Ask Marge placeholder icon — large teal icon in the content-placeholder block */
.annual-cycle-marge-icon[b-nizqcztlwa] {
    font-size: 3rem;
    color: #10b981;
    margin-bottom: 1rem;
}

/* Required field marker — red asterisk inside the Hub row of the editor */
.annual-cycle-required[b-nizqcztlwa] {
    color: red;
}

/* Full-width form inputs inside the Syncfusion editor template.
   Replaces style="width: 100%;" on e-field / e-input elements. */
.annual-cycle-full-width[b-nizqcztlwa] {
    width: 100%;
}

/* Textarea inside the scheduler editor — full-width and vertically resizable */
.annual-cycle-textarea[b-nizqcztlwa] {
    resize: vertical;
}

/* Link-as-button — prevents underline on .btn elements used as anchor tags */
.annual-cycle-link-btn[b-nizqcztlwa] {
    text-decoration: none;
}

/* Tooltip document row — adds top margin when a document link row follows other rows */
.event-tooltip-row--spaced[b-nizqcztlwa] {
    margin-top: 8px;
}
/* _content/OEAI.Apps.SaaS/Pages/Governance/GovernanceActions.razor.rz.scp.css */
/* Governance Actions Page Styles */
/* IMPLICATION: Uses shared modern-page-header.css for header styling */

/* Page content background override — white surface inside the page body.
   IMPLICATION: Removing this makes the content area transparent against the
   global page background colour. */
.page-content--white[b-kn4mr02c5v] {
    background: white;
    position: relative;
}

/* Loading State */
.loading-container[b-kn4mr02c5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #666;
}

.loading-spinner[b-kn4mr02c5v] {
    text-align: center;
    color: #0C5FE3;
}

.loading-spinner p[b-kn4mr02c5v] {
    margin-top: 1rem;
    color: #6b7280;
}

/* Summary Cards */
.summary-cards[b-kn4mr02c5v] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.summary-card[b-kn4mr02c5v] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
}

.card-icon[b-kn4mr02c5v] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.card-icon.overdue[b-kn4mr02c5v] {
    background: #fee2e2;
    color: #dc2626;
}

.card-icon.in-progress[b-kn4mr02c5v] {
    background: #dbeafe;
    color: #2563eb;
}

.card-icon.not-started[b-kn4mr02c5v] {
    background: #fef3c7;
    color: #d97706;
}

.card-icon.completed[b-kn4mr02c5v] {
    background: #d1fae5;
    color: #059669;
}

.card-icon.escalated[b-kn4mr02c5v] {
    background: #fef3c7;
    color: #d97706;
}

.card-content[b-kn4mr02c5v] {
    flex: 1;
}

.card-value[b-kn4mr02c5v] {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.card-label[b-kn4mr02c5v] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* Filters Section */
.filters-section[b-kn4mr02c5v] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 24px;
}

.filter-group[b-kn4mr02c5v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.filter-group label[b-kn4mr02c5v] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
}

.filter-actions[b-kn4mr02c5v] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Buttons */
.btn-primary[b-kn4mr02c5v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover:not(:disabled)[b-kn4mr02c5v] {
    background: #0a4fc9;
}

.btn-secondary[b-kn4mr02c5v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover[b-kn4mr02c5v] {
    background: #e5e7eb;
}

/* Empty State */
.empty-state[b-kn4mr02c5v] {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
}

.empty-icon[b-kn4mr02c5v] {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state h3[b-kn4mr02c5v] {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.empty-state p[b-kn4mr02c5v] {
    color: #6b7280;
}

/* Actions Grid */
.actions-grid-container[b-kn4mr02c5v] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Group Header */
.group-header[b-kn4mr02c5v] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1f2937;
}

.group-header i[b-kn4mr02c5v] {
    color: #0C5FE3;
}

.group-count[b-kn4mr02c5v] {
    font-weight: normal;
    color: #6b7280;
    font-size: 13px;
}

/* Action Cell */
.action-cell[b-kn4mr02c5v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-title-text[b-kn4mr02c5v] {
    font-weight: 500;
    color: #1f2937;
}

.action-source-ref[b-kn4mr02c5v] {
    font-size: 12px;
    color: #6b7280;
}

/* Clickable source link for actions linked to meeting minutes */
.source-link[b-kn4mr02c5v] {
    color: #0C5FE3;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.source-link:hover[b-kn4mr02c5v] {
    color: #0a4fc9;
    text-decoration: underline;
}

.source-link i[b-kn4mr02c5v] {
    font-size: 10px;
    margin-right: 2px;
}

/* Status Badges */
.status-badge[b-kn4mr02c5v] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.status-notstarted[b-kn4mr02c5v] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-inprogress[b-kn4mr02c5v] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-onhold[b-kn4mr02c5v] {
    background: #f3e8ff;
    color: #7c3aed;
}

.status-badge.status-completed[b-kn4mr02c5v] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-cancelled[b-kn4mr02c5v] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Priority Badges */
.priority-badge[b-kn4mr02c5v] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.priority-badge.priority-critical[b-kn4mr02c5v] {
    background: #fee2e2;
    color: #991b1b;
}

.priority-badge.priority-high[b-kn4mr02c5v] {
    background: #ffedd5;
    color: #9a3412;
}

.priority-badge.priority-medium[b-kn4mr02c5v] {
    background: #fef3c7;
    color: #92400e;
}

.priority-badge.priority-low[b-kn4mr02c5v] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Overdue date styling */
.date-overdue[b-kn4mr02c5v] {
    color: #dc2626;
    font-weight: 500;
}

.date-overdue i[b-kn4mr02c5v] {
    margin-left: 6px;
    color: #dc2626;
}

/* Grid Action Buttons */
.grid-actions[b-kn4mr02c5v] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.btn-grid[b-kn4mr02c5v] {
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.btn-grid:hover[b-kn4mr02c5v] {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.btn-grid-success[b-kn4mr02c5v] {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.btn-grid-success:hover[b-kn4mr02c5v] {
    background: #a7f3d0;
    border-color: #6ee7b7;
}

.btn-grid-danger[b-kn4mr02c5v] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.btn-grid-danger:hover[b-kn4mr02c5v] {
    background: #fecaca;
    border-color: #fca5a5;
}

/* Header Action Button */
.btn-header-action[b-kn4mr02c5v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: #0C5FE3;
    border: 2px solid white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 16px;
}

.btn-header-action:hover[b-kn4mr02c5v] {
    background: rgba(255, 255, 255, 0.9);
}

/* Dialog Styles */
.dialog-header[b-kn4mr02c5v] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.dialog-header i[b-kn4mr02c5v] {
    color: #0C5FE3;
}

.dialog-header-danger i[b-kn4mr02c5v] {
    color: #dc2626;
}

.dialog-form[b-kn4mr02c5v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.form-group[b-kn4mr02c5v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.form-row[b-kn4mr02c5v] {
    display: flex;
    gap: 16px;
}

.form-label[b-kn4mr02c5v] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-label .required[b-kn4mr02c5v] {
    color: #dc2626;
}

.dialog-footer[b-kn4mr02c5v] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Danger Button */
.btn-danger[b-kn4mr02c5v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover:not(:disabled)[b-kn4mr02c5v] {
    background: #b91c1c;
}

.btn-danger:disabled[b-kn4mr02c5v],
.btn-primary:disabled[b-kn4mr02c5v],
.btn-secondary:disabled[b-kn4mr02c5v] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Delete Confirmation */
.delete-confirmation[b-kn4mr02c5v] {
    text-align: center;
    padding: 8px 0;
}

.delete-confirmation p[b-kn4mr02c5v] {
    color: #374151;
    margin-bottom: 16px;
}

.delete-action-preview[b-kn4mr02c5v] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.delete-action-preview strong[b-kn4mr02c5v] {
    display: block;
    color: #1f2937;
    margin-bottom: 4px;
}

.delete-action-preview .source-ref[b-kn4mr02c5v] {
    font-size: 13px;
    color: #6b7280;
}

.delete-warning[b-kn4mr02c5v] {
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
}

/* Syncfusion Grid Overrides */
[b-kn4mr02c5v] .e-grid .e-gridheader {
    background: #f9fafb;
}

[b-kn4mr02c5v] .e-grid .e-headercell {
    font-weight: 600;
    color: #374151;
}

[b-kn4mr02c5v] .e-grid .e-rowcell {
    color: #1f2937;
}

[b-kn4mr02c5v] .e-grid .e-groupcaption {
    background: #eff6ff;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
    .summary-cards[b-kn4mr02c5v] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-section[b-kn4mr02c5v] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-kn4mr02c5v] {
        min-width: 100%;
    }

    .filter-actions[b-kn4mr02c5v] {
        margin-left: 0;
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .summary-cards[b-kn4mr02c5v] {
        grid-template-columns: 1fr;
    }
}

/* Escalation Button */
.btn-escalate[b-kn4mr02c5v] {
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.btn-escalate:hover[b-kn4mr02c5v] {
    background: #fef3c7;
    color: #d97706;
    border-color: #fcd34d;
}

.btn-escalate.escalated[b-kn4mr02c5v] {
    background: #fef3c7;
    color: #d97706;
    border-color: #fcd34d;
}

.btn-escalate.escalated:hover[b-kn4mr02c5v] {
    background: #fde68a;
    color: #b45309;
    border-color: #f59e0b;
}

/* Feedback Button */
.btn-grid-feedback[b-kn4mr02c5v] {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.btn-grid-feedback:hover[b-kn4mr02c5v] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.btn-grid-feedback.has-feedback[b-kn4mr02c5v] {
    background: #d1fae5;
    color: #059669;
    border-color: #a7f3d0;
}

.btn-grid-feedback.has-feedback:hover[b-kn4mr02c5v] {
    background: #a7f3d0;
    border-color: #6ee7b7;
}

/* Escalation Dialog Header */
.dialog-header-escalation i[b-kn4mr02c5v] {
    color: #d97706;
}

/* Feedback Dialog Content */
.feedback-dialog-content[b-kn4mr02c5v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feedback-action-info[b-kn4mr02c5v] {
    background: #f9fafb;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #d97706;
}

.action-title-preview[b-kn4mr02c5v] {
    font-weight: 600;
    color: #1f2937;
}

.action-source-preview[b-kn4mr02c5v] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* Existing Feedback Display */
.existing-feedback[b-kn4mr02c5v] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 16px;
}

.feedback-header[b-kn4mr02c5v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}

.feedback-author[b-kn4mr02c5v] {
    color: #1f2937;
    font-weight: 500;
}

.feedback-author i[b-kn4mr02c5v] {
    color: #d97706;
    margin-right: 6px;
}

.feedback-date[b-kn4mr02c5v] {
    color: #6b7280;
}

.feedback-text[b-kn4mr02c5v] {
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Feedback Textarea */
[b-kn4mr02c5v] .feedback-textarea textarea {
    min-height: 120px;
}
/* _content/OEAI.Apps.SaaS/Pages/Governance/ImportNotesDialog.razor.rz.scp.css */
/* ImportNotesDialog.razor.css
   IMPLICATION: Styles for the historical notes import dialog component
*/

/* Dialog Header */
.dialog-header[b-so9v3dn6ke] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.dialog-header i[b-so9v3dn6ke] {
    color: #0C5FE3;
}

/* Dialog Content */
.dialog-content[b-so9v3dn6ke] {
    padding: 16px 0;
}

/* Upload Container */
.upload-container[b-so9v3dn6ke] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.instruction-text[b-so9v3dn6ke] {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* Upload Area */
.upload-area[b-so9v3dn6ke] {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s;
    background: #f9fafb;
}

.upload-area:hover[b-so9v3dn6ke],
.upload-area.drag-over[b-so9v3dn6ke] {
    border-color: #0C5FE3;
    background: #eff6ff;
}

.file-input[b-so9v3dn6ke] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-label[b-so9v3dn6ke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.upload-icon[b-so9v3dn6ke] {
    font-size: 40px;
    color: #9ca3af;
}

.upload-area:hover .upload-icon[b-so9v3dn6ke],
.upload-area.drag-over .upload-icon[b-so9v3dn6ke] {
    color: #0C5FE3;
}

.upload-text[b-so9v3dn6ke] {
    color: #6b7280;
    font-size: 14px;
}

.selected-file[b-so9v3dn6ke] {
    color: #0C5FE3;
    font-weight: 600;
}

.file-size[b-so9v3dn6ke] {
    color: #9ca3af;
    font-weight: normal;
}

/* Validation Error */
.validation-error[b-so9v3dn6ke] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dc2626;
    font-size: 14px;
    margin: 0;
}

.validation-error i[b-so9v3dn6ke] {
    color: #dc2626;
}

/* Info Section */
.info-section[b-so9v3dn6ke] {
    background: #f0f9ff;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #0C5FE3;
}

.info-section h4[b-so9v3dn6ke] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    color: #1e40af;
    font-size: 14px;
    font-weight: 600;
}

.info-section h4 i[b-so9v3dn6ke] {
    color: #f59e0b;
}

.info-list[b-so9v3dn6ke] {
    margin: 0;
    padding-left: 20px;
    color: #3b82f6;
    font-size: 13px;
    line-height: 1.8;
}

/* Processing Container */
.processing-container[b-so9v3dn6ke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 20px;
}

.processing-text[b-so9v3dn6ke] {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* Results Container */
.results-container[b-so9v3dn6ke] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.results-header[b-so9v3dn6ke] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #059669;
}

.success-icon[b-so9v3dn6ke] {
    font-size: 24px;
    color: #10b981;
}

.results-summary[b-so9v3dn6ke] {
    background: #f0fdf4;
    border-radius: 8px;
    padding: 16px;
}

.result-item[b-so9v3dn6ke] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #d1fae5;
}

.result-item:last-child[b-so9v3dn6ke] {
    border-bottom: none;
}

.result-label[b-so9v3dn6ke] {
    color: #065f46;
    font-size: 14px;
}

.result-value[b-so9v3dn6ke] {
    color: #047857;
    font-weight: 600;
    font-size: 14px;
}

/* Matched Questions */
.matched-questions[b-so9v3dn6ke] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}

.matched-questions h4[b-so9v3dn6ke] {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #374151;
}

.matched-question[b-so9v3dn6ke] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: #4b5563;
}

.matched-question i[b-so9v3dn6ke] {
    color: #10b981;
    flex-shrink: 0;
}

.matched-question span:nth-child(2)[b-so9v3dn6ke] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confidence-badge[b-so9v3dn6ke] {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Note Text */
.note-text[b-so9v3dn6ke] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef3c7;
    padding: 12px;
    border-radius: 8px;
    color: #92400e;
    font-size: 13px;
    margin: 0;
}

.note-text i[b-so9v3dn6ke] {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Error Container */
.error-container[b-so9v3dn6ke] {
    text-align: center;
    padding: 20px;
}

.error-header[b-so9v3dn6ke] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 16px;
}

.error-icon[b-so9v3dn6ke] {
    font-size: 24px;
    color: #dc2626;
}

.error-message[b-so9v3dn6ke] {
    color: #7f1d1d;
    background: #fef2f2;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin: 0;
}

/* Dialog Footer */
.dialog-footer[b-so9v3dn6ke] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Buttons */
.btn-primary[b-so9v3dn6ke] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    font-size: 14px;
}

.btn-primary:hover:not(:disabled)[b-so9v3dn6ke] {
    background: #0a4fc9;
}

.btn-primary:disabled[b-so9v3dn6ke] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-so9v3dn6ke] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    font-size: 14px;
}

.btn-secondary:hover[b-so9v3dn6ke] {
    background: #e5e7eb;
}

/* Syncfusion Dialog Overrides */
[b-so9v3dn6ke] .import-notes-dialog .e-dlg-header-content {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
}

[b-so9v3dn6ke] .import-notes-dialog .e-footer-content {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}
/* _content/OEAI.Apps.SaaS/Pages/Governance/MeetingAgendas.razor.rz.scp.css */
/* Meeting Agendas page scoped styles.
   PURPOSE: Page-level layout overrides not covered by modern-page-header.css.
   IMPLICATION: Removing this file leaves the page content area without a white background. */

/* Page content area — white background to match the design intent on the grey page background.
   IMPLICATION: Removing this class makes the content area transparent. */
.page-content--white[b-1l6189dx9x] {
    background: white;
}
/* _content/OEAI.Apps.SaaS/Pages/Governance/MeetingMinutes.razor.rz.scp.css */
/* Meeting Minutes AI Page Styles */
/* IMPLICATION: Uses shared modern-page-header.css for header styling */

/* NOTE: Coming Soon overlay uses inline styles in the Razor file for reliability */

/* Page content white background — matches the design intent of white body content
   on the standard grey page background.
   IMPLICATION: Removing this makes the content area transparent. */
.page-content--white[b-nut3ai1bpl] {
    background: white;
    position: relative;
}

/* Loading State */
.loading-container[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #666;
}

.loading-spinner[b-nut3ai1bpl] {
    text-align: center;
    color: #0C5FE3;
}

.loading-spinner p[b-nut3ai1bpl] {
    margin-top: 1rem;
    color: #6b7280;
}

/* Form Styles */
.minutes-form-container[b-nut3ai1bpl] {
    max-width: 900px;
    margin: 0 auto;
}

.form-card[b-nut3ai1bpl] {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.form-title[b-nut3ai1bpl] {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.form-group[b-nut3ai1bpl] {
    margin-bottom: 24px;
}

.form-label[b-nut3ai1bpl] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.form-label .required[b-nut3ai1bpl] {
    color: #dc2626;
}

.form-hint[b-nut3ai1bpl] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Meeting Pack Indicator - shows when agenda auto-populated from Meeting Pack */
.meeting-pack-indicator[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 14px;
}

.meeting-pack-indicator i[b-nut3ai1bpl] {
    color: #22c55e;
    font-size: 18px;
}

.meeting-pack-indicator .btn-link[b-nut3ai1bpl] {
    margin-left: auto;
}

/* Link button style */
.btn-link[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #0C5FE3;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-link:hover[b-nut3ai1bpl] {
    background: rgba(12, 95, 227, 0.08);
    text-decoration: underline;
}

/* Danger outline button for delete action */
.btn-danger-outline[b-nut3ai1bpl] {
    color: #dc2626 !important;
    border-color: #dc2626 !important;
}

.btn-danger-outline:hover[b-nut3ai1bpl] {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* Input with upload option container */
.input-with-upload[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Upload row styling */
.upload-row[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
}

.upload-row[b-nut3ai1bpl]  input[type="file"] {
    font-size: 13px;
    color: #4b5563;
}

.upload-row .form-hint[b-nut3ai1bpl] {
    margin: 0;
}

[b-nut3ai1bpl] .agenda-input textarea,
[b-nut3ai1bpl] .transcript-input textarea {
    min-height: 120px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

[b-nut3ai1bpl] .transcript-input textarea {
    min-height: 200px;
}

.form-actions[b-nut3ai1bpl] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Buttons */
.btn-primary[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover:not(:disabled)[b-nut3ai1bpl] {
    background: #0a4fc9;
}

.btn-primary:disabled[b-nut3ai1bpl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover[b-nut3ai1bpl] {
    background: #e5e7eb;
}

.btn-success[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-success:hover[b-nut3ai1bpl] {
    background: #047857;
}

.btn-outline[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-outline:hover[b-nut3ai1bpl] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-icon[b-nut3ai1bpl] {
    padding: 8px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

.btn-icon:hover[b-nut3ai1bpl] {
    background: #f3f4f6;
    color: #374151;
}

/* Minutes View Container */
.minutes-view-container[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Status Bar */
.status-bar[b-nut3ai1bpl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.status-info[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-badge[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.status-draft[b-nut3ai1bpl] {
    background: #fef3c7;
    color: #92400e;
}

.status-pendingclarification[b-nut3ai1bpl] {
    background: #dbeafe;
    color: #1e40af;
}

.status-generated[b-nut3ai1bpl] {
    background: #d1fae5;
    color: #065f46;
}

.status-approved[b-nut3ai1bpl] {
    background: #c7d2fe;
    color: #3730a3;
}

.status-exported[b-nut3ai1bpl] {
    background: #e0e7ff;
    color: #4338ca;
}

.meeting-info[b-nut3ai1bpl] {
    font-weight: 500;
    color: #1f2937;
}

.version-info[b-nut3ai1bpl] {
    font-size: 13px;
    color: #6b7280;
}

.status-actions[b-nut3ai1bpl] {
    display: flex;
    gap: 10px;
}

/* Clarification Panel */
.clarification-panel[b-nut3ai1bpl] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 20px;
}

.clarification-header[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.clarification-header i[b-nut3ai1bpl] {
    font-size: 20px;
    color: #d97706;
}

.clarification-header h3[b-nut3ai1bpl] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
}

.question-count[b-nut3ai1bpl] {
    font-size: 13px;
    color: #b45309;
    margin-left: auto;
}

.clarification-questions[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-item[b-nut3ai1bpl] {
    background: white;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #fde68a;
}

.question-text[b-nut3ai1bpl] {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 8px;
}

.question-context[b-nut3ai1bpl] {
    font-size: 13px;
    color: #6b7280;
    padding-left: 12px;
    border-left: 2px solid #fcd34d;
    margin-bottom: 12px;
}

.answer-input[b-nut3ai1bpl] {
    margin-top: 8px;
}

.clarification-actions[b-nut3ai1bpl] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #fde68a;
}

/* Content Panels */
.minutes-content-panel[b-nut3ai1bpl],
.actions-panel[b-nut3ai1bpl] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

.panel-header[b-nut3ai1bpl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.panel-header h3[b-nut3ai1bpl] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-count[b-nut3ai1bpl] {
    font-size: 13px;
    color: #6b7280;
    font-weight: normal;
}

.panel-content[b-nut3ai1bpl] {
    padding: 20px;
}

.minutes-preview[b-nut3ai1bpl] {
    line-height: 1.7;
    color: #374151;
    width: 100%;
}

/* Override AI-generated inline styles that constrain width or add unwanted borders.
   IMPLICATION: AI often wraps generated HTML in a div with max-width/width inline styles
   (e.g. max-width: 50%, width: 800px) that squash the content into the left half.
   Targeting :first-child ensures the outermost wrapper is always reset to full width,
   even when it is not the only child element. */
[b-nut3ai1bpl] .minutes-preview > div:first-child {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.minutes-preview h2[b-nut3ai1bpl],
[b-nut3ai1bpl] .minutes-preview h2 {
    color: #003366;
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.minutes-preview h3[b-nut3ai1bpl],
[b-nut3ai1bpl] .minutes-preview h3 {
    color: #003366;
    font-size: 15px;
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Ensure tables in generated content are full width */
[b-nut3ai1bpl] .minutes-preview table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
}

[b-nut3ai1bpl] .minutes-preview table td,
[b-nut3ai1bpl] .minutes-preview table th {
    padding: 8px 12px;
}

.no-content[b-nut3ai1bpl] {
    color: #9ca3af;
    font-style: italic;
    text-align: center;
    padding: 40px;
}

.edit-actions[b-nut3ai1bpl] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Actions List */
.actions-list[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item[b-nut3ai1bpl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s;
}

.action-item:hover[b-nut3ai1bpl] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.action-item.selected[b-nut3ai1bpl] {
    border-color: #0C5FE3;
    background: #eff6ff;
}

.action-checkbox[b-nut3ai1bpl] {
    padding-top: 2px;
}

.action-details[b-nut3ai1bpl] {
    flex: 1;
}

.action-title[b-nut3ai1bpl] {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 6px;
}

.action-meta[b-nut3ai1bpl] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}

.meta-item[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-item.confidence[b-nut3ai1bpl] {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 10px;
}

.actions-footer[b-nut3ai1bpl] {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Empty State */
.empty-state[b-nut3ai1bpl] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-width: 600px;
    margin: 0 auto;
}

.empty-icon[b-nut3ai1bpl] {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state h2[b-nut3ai1bpl] {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.empty-state p[b-nut3ai1bpl] {
    color: #6b7280;
    margin-bottom: 24px;
}

.recent-minutes[b-nut3ai1bpl] {
    margin-top: 40px;
    text-align: left;
}

.recent-minutes h3[b-nut3ai1bpl] {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
}

.minutes-grid[b-nut3ai1bpl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.minutes-card[b-nut3ai1bpl] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.minutes-card:hover[b-nut3ai1bpl] {
    border-color: #0C5FE3;
    background: white;
    box-shadow: 0 2px 8px rgba(12, 95, 227, 0.1);
}

.card-header[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 8px;
}

.status-dot[b-nut3ai1bpl] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.status-draft[b-nut3ai1bpl] { background: #fbbf24; }
.status-dot.status-pendingclarification[b-nut3ai1bpl] { background: #3b82f6; }
.status-dot.status-generated[b-nut3ai1bpl] { background: #10b981; }
.status-dot.status-approved[b-nut3ai1bpl] { background: #6366f1; }
.status-dot.status-exported[b-nut3ai1bpl] { background: #8b5cf6; }

.meeting-date[b-nut3ai1bpl] {
    font-size: 14px;
    color: #6b7280;
}

.card-meta[b-nut3ai1bpl] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
}

/* Toast Styles */
.toast-content[b-nut3ai1bpl] {
    padding: 12px 16px;
}

/* List View Styles */
.list-view-container[b-nut3ai1bpl] {
    padding: 0;
}

.list-header[b-nut3ai1bpl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.list-header h2[b-nut3ai1bpl] {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.empty-list[b-nut3ai1bpl] {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
}

.empty-list .empty-icon[b-nut3ai1bpl] {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-list h3[b-nut3ai1bpl] {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.empty-list p[b-nut3ai1bpl] {
    color: #6b7280;
}

/* Grid Action Buttons */
.grid-actions[b-nut3ai1bpl] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.btn-grid[b-nut3ai1bpl] {
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.btn-grid:hover[b-nut3ai1bpl] {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.btn-grid-success[b-nut3ai1bpl] {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

.btn-grid-success:hover[b-nut3ai1bpl] {
    background: #a7f3d0;
    border-color: #34d399;
}

.btn-grid-danger[b-nut3ai1bpl] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.btn-grid-danger:hover[b-nut3ai1bpl] {
    background: #fecaca;
    border-color: #f87171;
}

/* Back Button */
.btn-back[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-back:hover[b-nut3ai1bpl] {
    color: #0C5FE3;
}

/* Form Header with Back Button */
.form-header[b-nut3ai1bpl] {
    margin-bottom: 24px;
}

.form-header .btn-back[b-nut3ai1bpl] {
    margin-bottom: 16px;
    padding-left: 0;
}

.form-header .form-title[b-nut3ai1bpl] {
    margin-bottom: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Detail Header */
.detail-header[b-nut3ai1bpl] {
    margin-bottom: 12px;
}

/* Syncfusion Grid Overrides */
[b-nut3ai1bpl] .e-grid .e-gridheader {
    background: #f9fafb;
}

[b-nut3ai1bpl] .e-grid .e-headercell {
    font-weight: 600;
    color: #374151;
}

[b-nut3ai1bpl] .e-grid .e-rowcell {
    color: #1f2937;
}

/* Action Item Buttons */
.action-buttons[b-nut3ai1bpl] {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-left: auto;
}

.btn-icon-sm[b-nut3ai1bpl] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    border: none;
}

/* Flag button (escalation) - default grey */
.btn-icon-sm.btn-flag[b-nut3ai1bpl] {
    background: #f3f4f6;
    color: #9ca3af;
}

.btn-icon-sm.btn-flag:hover[b-nut3ai1bpl] {
    background: #fef3c7;
    color: #d97706;
}

/* Edit button - blue */
.btn-icon-sm.btn-edit[b-nut3ai1bpl] {
    background: #dbeafe;
    color: #2563eb;
}

.btn-icon-sm.btn-edit:hover[b-nut3ai1bpl] {
    background: #bfdbfe;
    color: #1d4ed8;
}

/* Delete button - red */
.btn-icon-sm.btn-delete[b-nut3ai1bpl] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-icon-sm.btn-delete:hover[b-nut3ai1bpl] {
    background: #fecaca;
    color: #b91c1c;
}

/* Action Edit Form (inline) */
.action-edit-form[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.action-edit-form .edit-row[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-edit-form .edit-row label[b-nut3ai1bpl] {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
}

.action-edit-form .edit-actions[b-nut3ai1bpl] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

/* Small buttons for action edit form */
.btn-sm[b-nut3ai1bpl] {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sm.btn-primary[b-nut3ai1bpl] {
    background: #0C5FE3;
    color: white;
    border: none;
}

.btn-sm.btn-primary:hover[b-nut3ai1bpl] {
    background: #0a4fc9;
}

.btn-sm.btn-secondary[b-nut3ai1bpl] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-sm.btn-secondary:hover[b-nut3ai1bpl] {
    background: #e5e7eb;
}

/* Dialog Styles */
.dialog-header[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.dialog-header i[b-nut3ai1bpl] {
    color: #0C5FE3;
}

.dialog-header-danger i[b-nut3ai1bpl] {
    color: #dc2626;
}

.dialog-form[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.dialog-form .form-group[b-nut3ai1bpl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    margin-bottom: 0;
}

.dialog-form .form-row[b-nut3ai1bpl] {
    display: flex;
    gap: 16px;
}

.dialog-form .form-label[b-nut3ai1bpl] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0;
}

.dialog-footer[b-nut3ai1bpl] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Danger Button */
.btn-danger[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover:not(:disabled)[b-nut3ai1bpl] {
    background: #b91c1c;
}

.btn-danger:disabled[b-nut3ai1bpl] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Delete Confirmation */
.delete-confirmation[b-nut3ai1bpl] {
    text-align: center;
    padding: 8px 0;
}

.delete-confirmation p[b-nut3ai1bpl] {
    color: #374151;
    margin-bottom: 16px;
}

.delete-action-preview[b-nut3ai1bpl] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.delete-action-preview strong[b-nut3ai1bpl] {
    display: block;
    color: #1f2937;
    margin-bottom: 4px;
}

.delete-action-preview .source-ref[b-nut3ai1bpl] {
    font-size: 13px;
    color: #6b7280;
}

.delete-warning[b-nut3ai1bpl] {
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
}

/* Panel Header Actions - container for action count and add button */
.panel-header-actions[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Add Action Button */
.btn-add-action[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-action:hover[b-nut3ai1bpl] {
    background: #0a4fc9;
}

/* Escalation Badge in Action Title */
.escalation-badge[b-nut3ai1bpl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #fef3c7;
    color: #d97706;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 11px;
}

/* Escalated Action Item */
.action-item.escalated[b-nut3ai1bpl] {
    border-color: #fcd34d;
    background: #fffbeb;
}

.action-item.escalated:hover[b-nut3ai1bpl] {
    border-color: #f59e0b;
    background: #fef3c7;
}

.action-item.escalated.selected[b-nut3ai1bpl] {
    border-color: #d97706;
    background: #fef3c7;
}

/* Escalation Flag Button (active/inactive states) */
.btn-icon-sm.btn-icon-escalated[b-nut3ai1bpl] {
    background: #fef3c7;
    color: #d97706;
    border-color: #fcd34d;
}

.btn-icon-sm.btn-icon-escalated:hover[b-nut3ai1bpl] {
    background: #fde68a;
    color: #b45309;
    border-color: #f59e0b;
}

/* Empty Actions State */
.empty-actions[b-nut3ai1bpl] {
    text-align: center;
    padding: 32px 20px;
    color: #6b7280;
}

.empty-actions i[b-nut3ai1bpl] {
    font-size: 32px;
    color: #d1d5db;
    margin-bottom: 12px;
}

.empty-actions p[b-nut3ai1bpl] {
    margin: 0;
    font-size: 14px;
}

/* Checkbox Row (for escalation toggle in add dialog) */
.checkbox-row[b-nut3ai1bpl] {
    display: flex;
    align-items: center;
    padding: 8px 0;
}
/* _content/OEAI.Apps.SaaS/Pages/Governance/MonitoringVisits.razor.rz.scp.css */
/* Monitoring Visits page scoped styles.
   PURPOSE: Page-level layout overrides not covered by modern-page-header.css.
   IMPLICATION: Removing this file leaves the page content area without a white background
   and the filter item misaligned. */

/* Page content area — white background to match the design intent.
   IMPLICATION: Removing this class makes the content area transparent. */
.page-content--white[b-at7umb4zd2] {
    background: white;
}

/* Filter item aligned to the bottom of the filter row — used for the "Create Visit" button
   so it aligns with the bottom edge of the other filter dropdowns.
   IMPLICATION: Without this, the button top-aligns against the label of the adjacent filters. */
.filter-item--end[b-at7umb4zd2] {
    align-self: flex-end;
}
/* _content/OEAI.Apps.SaaS/Pages/Group/TenantGroupsNew.razor.rz.scp.css */
/* ========================================
   TENANT GROUPS PAGE - Modern Styles
   ========================================
   PURPOSE: Styles for the modernized Tenant Groups management page
   IMPLICATION: Provides consistent UX with other modern pages
   ======================================== */

/* Page Container */
.page-container[b-88zyxyr6sr] {
    min-height: 100vh;
    background: #f3f4f6;
}

/* Loading State - matches SchoolProfileV2 pattern */
.loading-state[b-88zyxyr6sr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

/* Content Section */
.content-section[b-88zyxyr6sr] {
    padding: 1.5rem 2.5rem;
}

/* Per AB#1747: stop `.gov-v2-table-wrap` doubling the horizontal padding when */
/* it sits inside `.content-section` (which already provides 2.5rem). Same fix */
/* as UsersNew.razor.css. */
.content-section .gov-v2-table-wrap[b-88zyxyr6sr] {
    padding-left: 0;
    padding-right: 0;
}

/* Groups Tabs - Active/Archived */
.groups-tabs[b-88zyxyr6sr] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.groups-tab[b-88zyxyr6sr] {
    background: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.groups-tab:hover:not(.active)[b-88zyxyr6sr] {
    color: #374151;
    background: #f9fafb;
}

.groups-tab.active[b-88zyxyr6sr] {
    color: #0C5FE3;
    border-bottom-color: #0C5FE3;
    background: transparent;
}

.groups-tab i[b-88zyxyr6sr] {
    font-size: 0.95rem;
}

/* Search Bar */
.search-bar[b-88zyxyr6sr] {
    margin-bottom: 1rem;
}

.search-input-wrapper[b-88zyxyr6sr] {
    position: relative;
    max-width: 400px;
}

.search-input-wrapper .search-icon[b-88zyxyr6sr] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.search-input[b-88zyxyr6sr] {
    width: 100%;
    padding: 0.625rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.search-input:focus[b-88zyxyr6sr] {
    outline: none;
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.1);
}

.clear-search[b-88zyxyr6sr] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
}

.clear-search:hover[b-88zyxyr6sr] {
    color: #6b7280;
}

/* Status Badges */
.status-badge[b-88zyxyr6sr] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active[b-88zyxyr6sr] {
    background: #d1fae5;
    color: #065f46;
}

.status-hidden[b-88zyxyr6sr] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Action Buttons in Grid */
.btn-icon[b-88zyxyr6sr] {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-88zyxyr6sr] {
    background: #0C5FE3;
    color: white;
}

/* Dialog Styles */
.dialog-tabs[b-88zyxyr6sr] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.dialog-tab[b-88zyxyr6sr] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    color: #6b7280;
}

.dialog-tab:hover:not(:disabled)[b-88zyxyr6sr] {
    background: #e5e7eb;
}

.dialog-tab.active[b-88zyxyr6sr] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.dialog-tab:disabled[b-88zyxyr6sr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-content[b-88zyxyr6sr] {
    min-height: 380px;
    height: 380px;
}

/* Form Grid */
.form-grid[b-88zyxyr6sr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-grid-single[b-88zyxyr6sr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row-inline[b-88zyxyr6sr] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.form-group[b-88zyxyr6sr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group-flex[b-88zyxyr6sr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group-status[b-88zyxyr6sr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 120px;
}

.checkbox-row[b-88zyxyr6sr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    margin-top: 2px;
}

.checkbox-label[b-88zyxyr6sr] {
    font-weight: 400;
    margin: 0;
}

.form-group-checkbox[b-88zyxyr6sr] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.form-group-full[b-88zyxyr6sr] {
    grid-column: span 2;
}

.form-label[b-88zyxyr6sr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-label .required[b-88zyxyr6sr] {
    color: #ef4444;
}

.disabled-input[b-88zyxyr6sr] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* Members Container - Picklist Style */
.members-container[b-88zyxyr6sr] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 320px;
}

.members-panel[b-88zyxyr6sr] {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-88zyxyr6sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.panel-header h4[b-88zyxyr6sr] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header h4 i[b-88zyxyr6sr] {
    color: #6b7280;
}

.count-badge[b-88zyxyr6sr] {
    background: #e5e7eb;
    color: #374151;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.members-panel .search-box[b-88zyxyr6sr] {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.members-list[b-88zyxyr6sr] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    max-height: 240px;
}

.member-item[b-88zyxyr6sr] {
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.member-item:hover[b-88zyxyr6sr] {
    background: #e5e7eb;
}

.member-item.selected[b-88zyxyr6sr] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.member-name[b-88zyxyr6sr] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Email caption under member name per AB#1747 §10.6. */
.member-email[b-88zyxyr6sr] {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-list[b-88zyxyr6sr] {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    font-style: italic;
}

/* Transfer Buttons */
.transfer-buttons[b-88zyxyr6sr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.btn-transfer[b-88zyxyr6sr] {
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-transfer:hover:not(:disabled)[b-88zyxyr6sr] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.btn-transfer:disabled[b-88zyxyr6sr] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Delete Confirmation */
.delete-confirm-content[b-88zyxyr6sr] {
    padding: 0.5rem 0;
}

.delete-confirm-content p[b-88zyxyr6sr] {
    margin: 0.5rem 0;
}

.warning-text[b-88zyxyr6sr] {
    color: #f59e0b;
    font-size: 0.875rem;
    margin-top: 1rem !important;
}

.warning-text i[b-88zyxyr6sr] {
    margin-right: 0.5rem;
}

.dialog-header-icon[b-88zyxyr6sr] {
    color: #f59e0b;
    margin-right: 0.5rem;
}

/* Unauthorized Container */
.unauthorized-container[b-88zyxyr6sr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6b7280;
}

.unauthorized-container i[b-88zyxyr6sr] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.unauthorized-container h2[b-88zyxyr6sr] {
    margin: 0 0 0.5rem;
    color: #374151;
}

/* Grid Styling Overrides */
[b-88zyxyr6sr] .e-grid {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

[b-88zyxyr6sr] .e-grid .e-headercell {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

/* COMMENT: Reduced row padding for condensed view */
/* IMPLICATION: More rows visible without scrolling */
[b-88zyxyr6sr] .e-grid .e-rowcell {
    padding: 0.4rem 0.75rem;
}

[b-88zyxyr6sr] .e-grid .e-row:hover .e-rowcell {
    background: #f3f4f6;
}

/* Dialog Button Overrides */
[b-88zyxyr6sr] .e-dialog .e-footer-content {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-primary {
    background: #0C5FE3;
    border-color: #0C5FE3;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-primary:hover {
    background: #0a4fc0;
    border-color: #0a4fc0;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-warning {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-warning:hover {
    background: #d97706;
    border-color: #d97706;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-success {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

[b-88zyxyr6sr] .e-dialog .e-btn.e-success:hover {
    background: #059669;
    border-color: #059669;
}

/* Toast Notification Styling */
[b-88zyxyr6sr] .e-toast-container {
    top: 70px !important;
}

[b-88zyxyr6sr] .e-toast {
    min-height: auto !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
}

[b-88zyxyr6sr] .e-toast .e-toast-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 !important;
}

[b-88zyxyr6sr] .e-toast .e-toast-title {
    font-weight: 600;
    font-size: 0.875rem;
}

[b-88zyxyr6sr] .e-toast .e-toast-content {
    font-size: 0.875rem;
    padding: 0 !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-success {
    background-color: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-success .e-toast-title,
[b-88zyxyr6sr] .e-toast.e-toast-success .e-toast-content {
    color: #065f46 !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-danger,
[b-88zyxyr6sr] .e-toast.e-toast-error {
    background-color: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-danger .e-toast-title,
[b-88zyxyr6sr] .e-toast.e-toast-danger .e-toast-content,
[b-88zyxyr6sr] .e-toast.e-toast-error .e-toast-title,
[b-88zyxyr6sr] .e-toast.e-toast-error .e-toast-content {
    color: #991b1b !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-warning {
    background-color: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    color: #92400e !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-warning .e-toast-title,
[b-88zyxyr6sr] .e-toast.e-toast-warning .e-toast-content {
    color: #92400e !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-info {
    background-color: #dbeafe !important;
    border: 1px solid #93c5fd !important;
    color: #1e40af !important;
}

[b-88zyxyr6sr] .e-toast.e-toast-info .e-toast-title,
[b-88zyxyr6sr] .e-toast.e-toast-info .e-toast-content {
    color: #1e40af !important;
}

/* Responsive */
@media (max-width: 768px) {
    .content-section[b-88zyxyr6sr] {
        padding: 1rem;
    }

    .form-grid[b-88zyxyr6sr] {
        grid-template-columns: 1fr;
    }

    .form-group-full[b-88zyxyr6sr] {
        grid-column: span 1;
    }

    .members-container[b-88zyxyr6sr] {
        flex-direction: column;
    }

    .transfer-buttons[b-88zyxyr6sr] {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0;
    }
}

/* Info banner shown inside the Group Details tab when the group has not yet been */
/* saved (GroupKey == 0). Per AB#1747 / UX-CONSISTENCY-REVIEW.md §10.5 — the */
/* sibling Group Members tab is disabled in that state and we explain why right */
/* here rather than leaving the user to guess. */
.new-group-members-hint[b-88zyxyr6sr] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 42, 102, 0.06);
    border-left: 3px solid #0F2A66;
    border-radius: 6px;
    color: #1f2937;
    font-size: 0.875rem;
    line-height: 1.45;
}

.new-group-members-hint i[b-88zyxyr6sr] {
    color: #0F2A66;
    font-size: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.new-group-members-hint strong[b-88zyxyr6sr] {
    color: #0F2A66;
}

.new-group-members-hint p[b-88zyxyr6sr] {
    margin: 0.25rem 0 0 0;
}

.new-group-members-hint em[b-88zyxyr6sr] {
    font-style: normal;
    font-weight: 600;
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/CreateIntervention.razor.rz.scp.css */
/* ========================================
   Create Intervention Page Styles
   ========================================
   PURPOSE: Page-specific styles for Create Intervention wizard
   IMPLICATION: Works with modern-page-header.css for consistent UX
   ======================================== */

/* Page Container */
/* IMPLICATION: Provides proper spacing and layout for the page */
.page-container[b-mmpjnjvei3] {
    padding: 0;
    min-height: 100vh;
    background: #f9fafb;
}

/* Loading Container */
/* IMPLICATION: Shown while template is loading */
.loading-container[b-mmpjnjvei3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    margin: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-mmpjnjvei3] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

.loading-container p[b-mmpjnjvei3] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Template Category Badge in Header */
/* IMPLICATION: Shows the template category in the header with consistent white/blue styling */
/* Uses white text on semi-transparent white background to match header theme */
.template-category-badge[b-mmpjnjvei3] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* IMPLICATION: Override category-specific colors in header context to maintain readability */
.template-category-badge.category-attendance[b-mmpjnjvei3],
.template-category-badge.category-behaviour[b-mmpjnjvei3],
.template-category-badge.category-academic[b-mmpjnjvei3],
.template-category-badge.category-wellbeing[b-mmpjnjvei3],
.template-category-badge.category-send[b-mmpjnjvei3],
.template-category-badge.category-safeguarding[b-mmpjnjvei3],
.template-category-badge.category-general[b-mmpjnjvei3] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Wizard Header Row */
/* IMPLICATION: Contains the step indicators */
.wizard-header-row[b-mmpjnjvei3] {
    justify-content: center;
    padding: 1.25rem 2.5rem;
}

/* Wizard Steps - Updated for header */
.wizard-steps[b-mmpjnjvei3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 600px;
}

.wizard-step[b-mmpjnjvei3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.step-number[b-mmpjnjvei3] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.wizard-step.active .step-number[b-mmpjnjvei3] {
    background: #0C5FE3;
    color: white;
    border-color: rgba(12, 95, 227, 0.3);
    box-shadow: 0 0 0 4px rgba(12, 95, 227, 0.15);
}

.wizard-step.completed .step-number[b-mmpjnjvei3] {
    background: #10b981;
    color: white;
    border-color: rgba(16, 185, 129, 0.3);
}

.wizard-step.completed .step-number i[b-mmpjnjvei3] {
    font-size: 0.875rem;
}

.step-label[b-mmpjnjvei3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.wizard-step.active .step-label[b-mmpjnjvei3] {
    color: #0C5FE3;
}

.wizard-step.completed .step-label[b-mmpjnjvei3] {
    color: #10b981;
}

.wizard-step-connector[b-mmpjnjvei3] {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    max-width: 80px;
    min-width: 40px;
    margin: 0 0.75rem;
    margin-bottom: 1.75rem;
    border-radius: 2px;
}

.wizard-step-connector.completed[b-mmpjnjvei3] {
    background: #10b981;
}

/* Wizard Container */
/* IMPLICATION: Contains the wizard content cards, uses most of available width */
.wizard-container[b-mmpjnjvei3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Wizard Content Card */
.wizard-content[b-mmpjnjvei3] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 2rem !important;
}

.wizard-content h3[b-mmpjnjvei3] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.wizard-content > .text-muted[b-mmpjnjvei3] {
    color: #6b7280;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Form Styles */
.form-group[b-mmpjnjvei3] {
    margin-bottom: 1.25rem;
}

.form-group label[b-mmpjnjvei3] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

.form-row[b-mmpjnjvei3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Radzen Input Overrides */
.wizard-content .rz-textbox[b-mmpjnjvei3],
.wizard-content .rz-textarea[b-mmpjnjvei3],
.wizard-content .rz-dropdown[b-mmpjnjvei3],
.wizard-content .rz-datepicker[b-mmpjnjvei3] {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
}

.wizard-content .rz-textbox:focus[b-mmpjnjvei3],
.wizard-content .rz-textarea:focus[b-mmpjnjvei3],
.wizard-content .rz-dropdown:focus-within[b-mmpjnjvei3],
.wizard-content .rz-datepicker:focus-within[b-mmpjnjvei3] {
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.1);
}

/* AI Query Section */
/* IMPLICATION: Light green background to match "Ask Marge" branding */
.ai-query-section[b-mmpjnjvei3] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ai-query-header[b-mmpjnjvei3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.ai-query-header i[b-mmpjnjvei3] {
    font-size: 1.25rem;
}

.ai-query-input[b-mmpjnjvei3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-query-input button[b-mmpjnjvei3] {
    align-self: flex-start;
}

/* Ask Marge Button - Marge green styling */
/* IMPLICATION: Matches the "Ask Marge" branding used throughout the application */
/* PURPOSE: Clear visual distinction between enabled (bright green) and disabled (muted gray) states */
/* NOTE: Uses ::deep to override Radzen's internal .rz-button styles which otherwise compete */
[b-mmpjnjvei3] .ask-marge-btn,
[b-mmpjnjvei3] .ask-marge-btn.rz-button,
[b-mmpjnjvei3] .ask-marge-btn.rz-success,
.ask-marge-btn[b-mmpjnjvei3] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    background-color: #059669 !important;
    border-color: #10b981 !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
    transition: all 0.2s ease !important;
    font-size: 0.95rem !important;
    padding: 0.75rem 1.5rem !important;
    letter-spacing: 0.02em !important;
}

[b-mmpjnjvei3] .ask-marge-btn:hover:not(:disabled),
.ask-marge-btn:hover:not(:disabled)[b-mmpjnjvei3] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    background-color: #047857 !important;
    border-color: #059669 !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-1px) !important;
}

[b-mmpjnjvei3] .ask-marge-btn:disabled,
[b-mmpjnjvei3] .ask-marge-btn.rz-state-disabled,
.ask-marge-btn:disabled[b-mmpjnjvei3] {
    background: #d1d5db !important;
    background-color: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.ai-query-result[b-mmpjnjvei3] {
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
}

.ai-query-result i[b-mmpjnjvei3] {
    color: #0C5FE3;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ai-query-error[b-mmpjnjvei3] {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #dc2626;
}

.ai-query-error i[b-mmpjnjvei3] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* SQL Query Display */
/* IMPLICATION: Shows the generated SQL for debugging/verification - GlobalAdmin only */
.ai-query-sql[b-mmpjnjvei3] {
    margin-top: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.sql-header[b-mmpjnjvei3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sql-header i[b-mmpjnjvei3] {
    color: #0C5FE3;
}

.sql-code[b-mmpjnjvei3] {
    margin: 0;
    padding: 1rem;
    color: #1e293b;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    background: #f8fafc;
}

/* Selection Controls */
.selection-controls[b-mmpjnjvei3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.selection-info[b-mmpjnjvei3] {
    font-size: 0.875rem;
    color: #374151;
}

.selection-buttons[b-mmpjnjvei3] {
    display: flex;
    gap: 0.5rem;
}

/* Student Grid */
.student-grid-container[b-mmpjnjvei3] {
    max-height: 400px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.attendance-badge[b-mmpjnjvei3] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.attendance-badge.good[b-mmpjnjvei3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.attendance-badge.warning[b-mmpjnjvei3] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.attendance-badge.danger[b-mmpjnjvei3] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

/* Empty State */
.empty-state[b-mmpjnjvei3] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
}

.empty-state i[b-mmpjnjvei3] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #9ca3af;
}

/* Review Section */
.review-section[b-mmpjnjvei3] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.review-section:last-of-type[b-mmpjnjvei3] {
    border-bottom: none;
}

.review-section h4[b-mmpjnjvei3] {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.review-row[b-mmpjnjvei3] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    align-items: flex-start;
}

.review-label[b-mmpjnjvei3] {
    min-width: 140px;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}

.review-value[b-mmpjnjvei3] {
    font-size: 0.875rem;
    color: #1f2937;
}

/* Student Preview */
.student-preview[b-mmpjnjvei3] {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 8px;
    margin-top: 1rem;
    border: 1px solid #e5e7eb;
}

.student-preview h5[b-mmpjnjvei3] {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.student-chips[b-mmpjnjvei3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.student-chip[b-mmpjnjvei3] {
    background: white;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.student-chip.more[b-mmpjnjvei3] {
    background: #0C5FE3;
    color: white;
    border: none;
    font-weight: 600;
}

/* Category Badge in Review */
.category-badge[b-mmpjnjvei3] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
}

.category-attendance[b-mmpjnjvei3] {
    background: #fce7f3;
    color: #be185d;
}

.category-behaviour[b-mmpjnjvei3] {
    background: #f3e8ff;
    color: #7c3aed;
}

.category-academic[b-mmpjnjvei3] {
    background: #e0e7ff;
    color: #4338ca;
}

.category-wellbeing[b-mmpjnjvei3] {
    background: #ccfbf1;
    color: #0d9488;
}

.category-send[b-mmpjnjvei3] {
    background: #fef3c7;
    color: #d97706;
}

.category-safeguarding[b-mmpjnjvei3] {
    background: #fee2e2;
    color: #dc2626;
}

/* Metrics Preview Section - Review screen */
/* PURPOSE: Display configured metrics on the review screen */
/* IMPLICATION: Users can see what will be tracked before creating the intervention */
.metrics-preview[b-mmpjnjvei3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.metric-preview-item[b-mmpjnjvei3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 8px;
    border-left: 3px solid #0C5FE3;
}

.metric-preview-name[b-mmpjnjvei3] {
    font-weight: 600;
    color: #1e40af;
    font-size: 0.875rem;
}

.metric-preview-desc[b-mmpjnjvei3] {
    font-size: 0.75rem;
    color: #6b7280;
}

.review-section h4 i[b-mmpjnjvei3] {
    margin-right: 0.5rem;
    color: #0C5FE3;
}

/* Wizard Actions */
.wizard-actions[b-mmpjnjvei3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Syncfusion Grid Overrides */
[b-mmpjnjvei3] .e-grid {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

[b-mmpjnjvei3] .e-grid .e-gridheader {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

[b-mmpjnjvei3] .e-grid .e-headercell {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem;
}

[b-mmpjnjvei3] .e-grid .e-rowcell {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
}

[b-mmpjnjvei3] .e-grid .e-row:hover .e-rowcell {
    background: #f9fafb;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wizard-container[b-mmpjnjvei3] {
        padding: 0 1rem 1rem 1rem;
    }

    .wizard-content[b-mmpjnjvei3] {
        padding: 1.5rem !important;
    }

    .form-row[b-mmpjnjvei3] {
        grid-template-columns: 1fr;
    }

    .wizard-steps[b-mmpjnjvei3] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .step-label[b-mmpjnjvei3] {
        font-size: 0.65rem;
    }

    .wizard-step-connector[b-mmpjnjvei3] {
        min-width: 30px;
    }

    .wizard-actions[b-mmpjnjvei3] {
        flex-direction: column;
    }

    .wizard-actions button[b-mmpjnjvei3] {
        width: 100%;
    }
}

/* Print Styles */
@media print {
    .wizard-container[b-mmpjnjvei3] {
        box-shadow: none;
        padding: 0;
    }

    .wizard-actions[b-mmpjnjvei3] {
        display: none;
    }

    .ai-query-section[b-mmpjnjvei3] {
        background: #f3f4f6;
        border: 1px solid #d1d5db;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/Hub/All.razor.rz.scp.css */
/* All Interventions page scoped styles — summary strip, view toggle bar,
   card grid, empty state, table-view tweaks. */

/* ────────── KPI strip ──────────
   The five summary cards on this page use the canonical .ds-kpi-card pattern
   from /css/modern-page-header.css — no scoped CSS needed. The earlier
   .summary-card / .summary-card-success/warning/danger/info/neutral rules
   were retired 2026-05-16 as part of the "multicoloured mess" critique
   (DESIGN_SYSTEM.md §KPI cards). DO NOT reintroduce per-status colour
   variants here. */

/* ────────── View toggle bar ────────── */

.view-toggle-bar[b-xqzi6mri9q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.5rem 0.5rem 2.5rem;
}

.view-toggle-count[b-xqzi6mri9q] {
    font-size: 0.825rem;
    color: #6b7280;
}

.view-toggle-count strong[b-xqzi6mri9q] {
    color: #1f2937;
    font-weight: 600;
}

/* ────────── Card grid ────────── */

.card-grid[b-xqzi6mri9q] {
    display: grid;
    /* minmax(0, 1fr) — not plain 1fr — so columns are allowed to shrink BELOW
       their intrinsic min-content size. With `1fr` alone, a long unbreakable
       title token (e.g. "Personalised parental attendance communications") sets
       the column's min-content above 1/4 of viewport and pushes the rightmost
       card past the screen edge. Same constraint applies at every breakpoint. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 0 2.5rem 2rem 2.5rem;
    /* Defensive overflow guard — even if a child somehow exceeds its column
       (e.g. an embedded chart with intrinsic width), the page itself never
       develops a horizontal scrollbar. */
    overflow-x: hidden;
}

@media (min-width: 640px) {
    .card-grid[b-xqzi6mri9q] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .card-grid[b-xqzi6mri9q] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .card-grid[b-xqzi6mri9q] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ────────── Empty state ────────── */

.empty-state[b-xqzi6mri9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-state i[b-xqzi6mri9q] {
    font-size: 2.5rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h3[b-xqzi6mri9q] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.empty-state p[b-xqzi6mri9q] {
    margin: 0 0 1.25rem 0;
    max-width: 480px;
}

.empty-state .btn-primary[b-xqzi6mri9q] {
    padding: 0.5rem 1rem;
    background: #0C5FE3;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}

.empty-state .btn-primary:hover[b-xqzi6mri9q] {
    background: #0a4fc0;
}

/* ────────── Loading ────────── */

.loading-container[b-xqzi6mri9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.loading-spinner[b-xqzi6mri9q] {
    font-size: 2rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

/* ────────── Table-view row helpers ────────── */

[b-xqzi6mri9q] .instance-name-link {
    color: #0C5FE3;
    cursor: pointer;
    font-weight: 500;
}

[b-xqzi6mri9q] .instance-name-link:hover {
    text-decoration: underline;
}

[b-xqzi6mri9q] .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

[b-xqzi6mri9q] .status-badge.status-draft     { background: #f3f4f6; color: #4b5563; }
[b-xqzi6mri9q] .status-badge.status-active    { background: #dbeafe; color: #1d4ed8; }
[b-xqzi6mri9q] .status-badge.status-completed { background: #d1fae5; color: #065f46; }
[b-xqzi6mri9q] .status-badge.status-cancelled { background: #fee2e2; color: #991b1b; }

[b-xqzi6mri9q] .overdue-icon {
    color: #dc2626;
    font-size: 0.7rem;
}

[b-xqzi6mri9q] .row-actions {
    display: inline-flex;
    gap: 0.25rem;
}

[b-xqzi6mri9q] .row-actions .btn-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #6b7280;
    cursor: pointer;
}

[b-xqzi6mri9q] .row-actions .btn-icon:hover {
    background: #f3f4f6;
    color: #0C5FE3;
}

[b-xqzi6mri9q] .row-actions .btn-icon-danger:hover {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 640px) {
    /* .ds-kpi-row has its own mobile padding rule in /css/modern-page-header.css */
    .view-toggle-bar[b-xqzi6mri9q] { padding: 1rem 1rem 0.5rem 1rem; }
    .card-grid[b-xqzi6mri9q] { padding: 0 1rem 2rem 1rem; }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/Hub/Insights.razor.rz.scp.css */
/* Insights page scoped styles — wraps the MargeReport embed with the standard Hub
   padding. The embed itself self-styles via /css/analytics/marge-*.css (loaded by
   MargeReport.razor and the layout templates that render its blueprints). */

.interventions-insights-content[b-bnpy8do1av] {
    /* Use the full Hub viewport — no max-width clamp here, since marge reports
       are wide-canvas by default (multi-column charts, school-comparison grids). */
    padding: 1rem 1.5rem 2rem 1.5rem;
}

.interventions-insights-embed[b-bnpy8do1av] {
    /* Min-height matches MargeReport.razor's container (line 43 there) so the
       loading spinner doesn't cause a viewport jump on first render. */
    min-height: 600px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    /* The embed renders into a #marge-interventions-insights div whose chart canvases
       use absolute positioning — keep this container as the positioning context.
       Mirrors the .marge-insights-content fix in commit 276a609e. */
    position: relative;
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/Hub/InstanceDetail.razor.rz.scp.css */
/* InstanceDetail page scoped styles — header, sub-tab content shells, KPI strip,
   improvement tiles, students table tweaks, dialog form layout. */

/* ────────── Header tweaks ────────── */

.page-breadcrumb[b-q8aes59w5f] {
    margin-bottom: 0.5rem;
    font-size: 0.825rem;
}

.page-breadcrumb a[b-q8aes59w5f] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.page-breadcrumb a:hover[b-q8aes59w5f] {
    color: #ffffff;
}

.page-subtitle-row[b-q8aes59w5f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.55rem;
}

.header-chip[b-q8aes59w5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
}

.header-status-badge[b-q8aes59w5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

.header-status-badge.status-draft[b-q8aes59w5f]     { background: #fef3c7; color: #92400e; }
.header-status-badge.status-active[b-q8aes59w5f]    { background: #d1fae5; color: #065f46; }
.header-status-badge.status-completed[b-q8aes59w5f] { background: #dbeafe; color: #1d4ed8; }
.header-status-badge.status-cancelled[b-q8aes59w5f] { background: #fee2e2; color: #991b1b; }

.header-status-badge i[b-q8aes59w5f] {
    font-size: 0.7rem;
}

.header-days-left[b-q8aes59w5f] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
}

.btn-header-danger:hover[b-q8aes59w5f] {
    background: rgba(220, 38, 38, 0.15);
    color: #fee2e2;
}

/* ────────── Sub-tab content shell ────────── */

.subtab-content[b-q8aes59w5f] {
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .subtab-content[b-q8aes59w5f] { padding: 1rem; }
}

/* MargeReport on the Impact sub-tab needs a positioning context — its chart canvases
   use absolute positioning. Mirrors .marge-insights-content from commit 276a609e and
   the .interventions-insights-embed rule on the Insights tab. */
.impact-embed-content[b-q8aes59w5f] {
    position: relative;
    min-height: 600px;
}

/* ────────── Overview: KPI strip ──────────
   KPI cards on the Overview use the canonical .ds-kpi-card pattern defined
   in modern-page-header.css (blue left accent + white card). The previous
   bespoke .kpi-tile / .kpi-tile-up / .kpi-tile-down (green/red bg variants)
   were retired 2026-05-16 — design review wanted consistency with the
   .ds-kpi-card pattern used everywhere else in the app. */

/* Small inline "/ total" suffix on the Improved card — sits next to the
   bold value so the denominator reads as supporting context, not a primary
   number. */
.ds-kpi-card .ds-kpi-suffix[b-q8aes59w5f] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #9ca3af;
    margin-left: 0.2rem;
}

/* The .ds-kpi-row and .gov-v2-table-wrap both carry their own 2.5rem
   horizontal padding (canonical — see modern-page-header.css and
   governance-v2/tables.css). That works when those wrappers are DIRECT
   children of .page-container. Here both are nested inside .subtab-content
   which ALSO provides 2.5rem horizontal padding, so the inner content
   ends up double-padded and visibly narrower than its siblings. Zero the
   horizontal padding (keep vertical for breathing room) so the KPI cards,
   trend chart, and Students table all align to the same left/right edge.
   IMPLICATION: ::deep is needed because .ds-kpi-row / .gov-v2-table-wrap
   aren't scoped classes — the scope applies to .subtab-content (defined in
   this file) and the ::deep descendant combinator reaches into unscoped
   child markup. */
.subtab-content[b-q8aes59w5f]  .ds-kpi-row,
.subtab-content[b-q8aes59w5f]  .gov-v2-table-wrap {
    padding-left: 0;
    padding-right: 0;
}

/* ────────── Overview: trend chart ──────────
   White card chrome matching the .ds-kpi-card family so the chart reads as
   part of the same surface. Header above the SfChart frames the metric the
   chart is showing. The Empty / single-point state falls back to an info
   panel rather than rendering a degenerate chart. */
.overview-trend[b-q8aes59w5f] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 42, 102, 0.04);
}

.overview-trend-header[b-q8aes59w5f] {
    margin-bottom: 0.5rem;
}

.overview-trend-header h3[b-q8aes59w5f] {
    margin: 0 0 0.2rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.overview-trend-header h3 i[b-q8aes59w5f] {
    color: #0C5FE3;
    font-size: 0.95rem;
}

.overview-trend-sub[b-q8aes59w5f] {
    margin: 0;
    font-size: 0.825rem;
    color: #6b7280;
}

.overview-trend-empty[b-q8aes59w5f] {
    margin-top: 1rem;
    padding: 2rem 1rem;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.overview-trend-empty p[b-q8aes59w5f] {
    margin: 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ────────── Overview: improvement tiles ────────── */

.overview-tiles[b-q8aes59w5f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.improvement-tile[b-q8aes59w5f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.improvement-tile:hover[b-q8aes59w5f] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.improvement-tile:focus-visible[b-q8aes59w5f] {
    outline: 2px solid #0C5FE3;
    outline-offset: 2px;
}

.improvement-tile-celebrate[b-q8aes59w5f] { border-left-color: #10b981; }
.improvement-tile-focus[b-q8aes59w5f]     { border-left-color: #f59e0b; }
.improvement-tile-concern[b-q8aes59w5f]   { border-left-color: #6b7280; }

.improvement-tile-icon[b-q8aes59w5f] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
}

.improvement-tile-celebrate .improvement-tile-icon[b-q8aes59w5f] { background: #10b981; }
.improvement-tile-focus     .improvement-tile-icon[b-q8aes59w5f] { background: #f59e0b; }
.improvement-tile-concern   .improvement-tile-icon[b-q8aes59w5f] { background: #6b7280; }

.improvement-tile-count[b-q8aes59w5f] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.improvement-tile-label[b-q8aes59w5f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.improvement-tile-help[b-q8aes59w5f] {
    font-size: 0.75rem;
    color: #6b7280;
}

/* ────────── Students tab ────────── */

.students-toolbar[b-q8aes59w5f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.students-toolbar > .e-input-group[b-q8aes59w5f],
.students-toolbar > .e-textbox[b-q8aes59w5f] {
    flex: 1;
    min-width: 220px;
}

.students-filter-chips[b-q8aes59w5f] {
    display: flex;
    gap: 0.4rem;
}

.filter-chip[b-q8aes59w5f] {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.filter-chip:hover[b-q8aes59w5f] {
    background: #f3f4f6;
}

.filter-chip.active[b-q8aes59w5f] {
    background: #0C5FE3;
    color: #ffffff;
    border-color: #0C5FE3;
}

.filter-chip-celebrate.active[b-q8aes59w5f] { background: #10b981; border-color: #10b981; }
.filter-chip-focus.active[b-q8aes59w5f]     { background: #f59e0b; border-color: #f59e0b; }
.filter-chip-concern.active[b-q8aes59w5f]   { background: #6b7280; border-color: #6b7280; }

[b-q8aes59w5f] .row-link {
    background: transparent;
    border: none;
    color: #0C5FE3;
    cursor: pointer;
    font-weight: 500;
    text-align: left;
    padding: 0;
}

[b-q8aes59w5f] .row-link:hover { text-decoration: underline; }

[b-q8aes59w5f] .row-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

[b-q8aes59w5f] .row-status.status-assigned   { background: #f3f4f6; color: #4b5563; }
[b-q8aes59w5f] .row-status.status-inprogress { background: #dbeafe; color: #1d4ed8; }
[b-q8aes59w5f] .row-status.status-completed  { background: #d1fae5; color: #065f46; }
[b-q8aes59w5f] .row-status.status-removed    { background: #fee2e2; color: #991b1b; }

[b-q8aes59w5f] .row-delta {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

[b-q8aes59w5f] .row-delta-up      { background: #d1fae5; color: #065f46; }
[b-q8aes59w5f] .row-delta-down    { background: #fee2e2; color: #991b1b; }
[b-q8aes59w5f] .row-delta-neutral { background: #f3f4f6; color: #4b5563; }

[b-q8aes59w5f] .row-muted { color: #9ca3af; }

[b-q8aes59w5f] .row-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
}

[b-q8aes59w5f] .row-icon-btn:hover {
    background: #f3f4f6;
    color: #0C5FE3;
}

/* ────────── Impact placeholder ────────── */

.placeholder-card[b-q8aes59w5f] {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    background: #ffffff;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    text-align: center;
    color: #4b5563;
}

.placeholder-card i[b-q8aes59w5f] {
    font-size: 2.25rem;
    color: #0C5FE3;
    margin-bottom: 0.85rem;
}

.placeholder-card h3[b-q8aes59w5f] {
    margin: 0 0 0.6rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
}

.placeholder-card p[b-q8aes59w5f] {
    margin: 0 0 0.6rem 0;
    line-height: 1.55;
}

.placeholder-card .placeholder-hint[b-q8aes59w5f] {
    margin-top: 0.85rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* ────────── Loading / empty / dialog form (shared) ────────── */

.loading-container[b-q8aes59w5f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.loading-spinner[b-q8aes59w5f] {
    font-size: 2rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

.empty-state[b-q8aes59w5f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.empty-state i[b-q8aes59w5f] {
    font-size: 2.25rem;
    color: #d1d5db;
    margin-bottom: 0.85rem;
}

.empty-state h3[b-q8aes59w5f] {
    margin: 0 0 0.4rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.empty-state p[b-q8aes59w5f] {
    margin: 0 0 1rem 0;
    max-width: 460px;
}

.empty-state .btn-primary[b-q8aes59w5f] {
    padding: 0.5rem 1rem;
    background: #0C5FE3;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

[b-q8aes59w5f] .dialog-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

[b-q8aes59w5f] .dialog-form p {
    margin: 0;
    line-height: 1.5;
    color: #4b5563;
}

[b-q8aes59w5f] .dialog-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

[b-q8aes59w5f] .dialog-form .form-label {
    font-size: 0.825rem;
    font-weight: 500;
    color: #1f2937;
}

[b-q8aes59w5f] .e-footer-content {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

[b-q8aes59w5f] .btn-secondary,
[b-q8aes59w5f] .btn-primary,
[b-q8aes59w5f] .btn-danger {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

[b-q8aes59w5f] .btn-secondary { background: #ffffff; color: #4b5563; border-color: #d1d5db; }
[b-q8aes59w5f] .btn-secondary:hover { background: #f3f4f6; }
[b-q8aes59w5f] .btn-primary { background: #0C5FE3; color: #ffffff; }
[b-q8aes59w5f] .btn-primary:hover:not(:disabled) { background: #0a4fc0; }
[b-q8aes59w5f] .btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
[b-q8aes59w5f] .btn-danger { background: #dc2626; color: #ffffff; }
[b-q8aes59w5f] .btn-danger:hover:not(:disabled) { background: #b91c1c; }
/* _content/OEAI.Apps.SaaS/Pages/Interventions/Hub/Overview.razor.rz.scp.css */
/* Overview page scoped styles — Mission Control v1.
   Layout: KPI strip in the page header, then a vertical content stack of:
   hero summary → coming up → domain bands → top movers (deferred placeholder). */

/* ────────── KPI row tweak inside the page header ────────── */

.overview-kpi-row[b-pszw0gnp4s] {
    /* The default header-filters-kpi-row is split filters/KPIs; on Overview we have no
       filters, so push the KPI cards left so they hug the start of the content area. */
    justify-content: flex-start;
}

/* ────────── Page content shell ────────── */

.overview-content[b-pszw0gnp4s] {
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.overview-loading[b-pszw0gnp4s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem;
    color: #6b7280;
    justify-content: center;
}

.overview-loading i[b-pszw0gnp4s] {
    font-size: 1.25rem;
    color: #0C5FE3;
}

/* ────────── Welcome / first-run state ────────── */

.overview-welcome[b-pszw0gnp4s] {
    max-width: 540px;
    margin: 3rem auto;
    text-align: center;
    color: #4b5563;
}

.overview-welcome i[b-pszw0gnp4s] {
    font-size: 2.75rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

.overview-welcome h2[b-pszw0gnp4s] {
    margin: 0 0 0.6rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1f2937;
}

.overview-welcome p[b-pszw0gnp4s] {
    margin: 0 0 1.5rem 0;
    line-height: 1.55;
}

.overview-welcome .btn-primary[b-pszw0gnp4s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: #0C5FE3;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
}

.overview-welcome .btn-primary:hover[b-pszw0gnp4s] {
    background: #0a4fc0;
}

.overview-welcome-hint[b-pszw0gnp4s] {
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
}

/* ────────── Hero summary block ────────── */

.overview-hero[b-pszw0gnp4s] {
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.overview-hero-text h2[b-pszw0gnp4s] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    color: #1f2937;
}

.overview-hero-text h2 span[b-pszw0gnp4s] {
    color: #0C5FE3;
    font-weight: 600;
}

.overview-hero-warning[b-pszw0gnp4s] {
    margin: 0.85rem 0 0 0;
    padding: 0.6rem 0.85rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.overview-hero-warning i[b-pszw0gnp4s] {
    color: #f59e0b;
    font-size: 0.875rem;
}

.overview-hero-warning a[b-pszw0gnp4s] {
    color: #92400e;
    text-decoration: underline;
    margin-left: auto;
    font-weight: 500;
}

/* ────────── Section blocks ────────── */

.overview-section[b-pszw0gnp4s] {
    /* Each major section sits in its own card-like region with a header strip and a
       grid/list body below. */
}

.overview-section-header[b-pszw0gnp4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.overview-section-header h3[b-pszw0gnp4s] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.overview-section-header h3 i[b-pszw0gnp4s] {
    color: #6b7280;
    font-size: 0.9rem;
}

.overview-section-count[b-pszw0gnp4s] {
    background: #eef2ff;
    color: #4338ca;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ────────── Card grid (shared with All page idiom) ────────── */

.card-grid[b-pszw0gnp4s] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .card-grid[b-pszw0gnp4s] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .card-grid[b-pszw0gnp4s] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) {
    .card-grid[b-pszw0gnp4s] { grid-template-columns: repeat(4, 1fr); }
}

/* ────────── Domain bands ────────── */

.domain-band + .domain-band[b-pszw0gnp4s] {
    margin-top: 1.5rem;
}

.domain-band-header[b-pszw0gnp4s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.domain-band-header h4[b-pszw0gnp4s] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
}

.domain-band-name[b-pszw0gnp4s] {
    font-weight: 600;
}

.domain-band-count[b-pszw0gnp4s] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

.domain-band-link[b-pszw0gnp4s] {
    font-size: 0.825rem;
    color: #0C5FE3;
    text-decoration: none;
    font-weight: 500;
}

.domain-band-link:hover[b-pszw0gnp4s] {
    text-decoration: underline;
}

/* ────────── Deferred section placeholder (Top movers) ────────── */

.overview-section-deferred[b-pszw0gnp4s] {
    opacity: 0.85;
}

.overview-deferred-card[b-pszw0gnp4s] {
    padding: 1.5rem;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.55;
}

.overview-deferred-card p[b-pszw0gnp4s] {
    margin: 0;
}

@media (max-width: 640px) {
    .overview-content[b-pszw0gnp4s] { padding: 1rem; }
    .overview-hero[b-pszw0gnp4s] { padding: 1.1rem; }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/Hub/StartIntervention.razor.rz.scp.css */
/* StartIntervention page scoped styles — single-page Create flow.
   Layout: 2-column grid on lg+ (main + sticky right rail), single column below. */

/* ────────── Header tweaks ────────── */

.page-breadcrumb[b-aytc7iuj8u] {
    margin-bottom: 0.5rem;
    font-size: 0.825rem;
}

.page-breadcrumb a[b-aytc7iuj8u] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.page-breadcrumb a:hover[b-aytc7iuj8u] {
    color: #ffffff;
}

/* ────────── Page grid ────────── */

.start-page-grid[b-aytc7iuj8u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

@media (min-width: 1024px) {
    .start-page-grid[b-aytc7iuj8u] {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
    }
}

.start-main[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0; /* Prevent grid blow-out from wide form children */
}

/* ────────── Form sections ────────── */

.form-section[b-aytc7iuj8u] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.form-section-header[b-aytc7iuj8u] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-bottom: 1px solid #e5e7eb;
}

.form-section-number[b-aytc7iuj8u] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0C5FE3;
    color: #ffffff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
}

.form-section-title[b-aytc7iuj8u] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.form-section-help[b-aytc7iuj8u] {
    margin: 0.25rem 0 0 0;
    font-size: 0.825rem;
    color: #6b7280;
    line-height: 1.5;
}

.form-section-body[b-aytc7iuj8u] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ────────── Form rows ────────── */

.form-row[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-row-split[b-aytc7iuj8u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-col[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.form-label[b-aytc7iuj8u] {
    font-size: 0.825rem;
    font-weight: 500;
    color: #1f2937;
}

.required[b-aytc7iuj8u] {
    color: #dc2626;
    margin-left: 0.15rem;
}

.form-help[b-aytc7iuj8u] {
    margin: 0.2rem 0 0 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

/* ────────── AI query block ────────── */

/* AI action row — Find students button right-aligned (terminal AI trigger
   sits on the right edge of its form field, matching the right-aligned
   page-subheader-right convention). Any inline status (error / explanation)
   sits to the left and shrinks to fit. */
.ai-actions[b-aytc7iuj8u] {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ai-actions .ai-error[b-aytc7iuj8u],
.ai-actions .ai-explanation[b-aytc7iuj8u] {
    margin-right: auto;
}

.ai-error[b-aytc7iuj8u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #dc2626;
    font-size: 0.825rem;
}

.ai-explanation[b-aytc7iuj8u] {
    color: #4b5563;
    font-size: 0.825rem;
    font-style: italic;
}

.generated-sql[b-aytc7iuj8u] {
    margin-top: 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
}

.generated-sql summary[b-aytc7iuj8u] {
    cursor: pointer;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.generated-sql pre[b-aytc7iuj8u] {
    margin: 0.6rem 0 0 0;
    padding: 0.6rem;
    background: #1f2937;
    color: #f3f4f6;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ────────── Student grid actions row ────────── */

.student-grid-actions[b-aytc7iuj8u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.85rem 0 0.5rem 0;
    font-size: 0.825rem;
}

.student-count[b-aytc7iuj8u] {
    color: #4b5563;
    font-weight: 500;
}

.btn-text[b-aytc7iuj8u] {
    background: transparent;
    border: none;
    color: #0C5FE3;
    cursor: pointer;
    font-size: 0.825rem;
    padding: 0.2rem 0.4rem;
    text-decoration: none;
}

.btn-text:hover[b-aytc7iuj8u] {
    text-decoration: underline;
}

.action-sep[b-aytc7iuj8u] {
    color: #d1d5db;
    margin: 0 0.2rem;
}

/* ────────── Attendance pill in the grid ────────── */

[b-aytc7iuj8u] .attendance-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

[b-aytc7iuj8u] .attendance-pill.good    { background: #d1fae5; color: #065f46; }
[b-aytc7iuj8u] .attendance-pill.warning { background: #fef3c7; color: #92400e; }
[b-aytc7iuj8u] .attendance-pill.danger  { background: #fee2e2; color: #991b1b; }

[b-aytc7iuj8u] .muted {
    color: #9ca3af;
}

/* ────────── Right rail (sticky summary) ────────── */

.start-rail[b-aytc7iuj8u] {
    /* On mobile / md, the rail flows below the main content. On lg+ it's sticky. */
}

@media (min-width: 1024px) {
    .start-rail[b-aytc7iuj8u] {
        position: sticky;
        top: 1.5rem;
    }
}

.start-rail-card[b-aytc7iuj8u] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.start-rail-title[b-aytc7iuj8u] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
}

.start-rail-list[b-aytc7iuj8u] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.start-rail-list > div[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.start-rail-list dt[b-aytc7iuj8u] {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.start-rail-list dd[b-aytc7iuj8u] {
    margin: 0;
    font-size: 0.875rem;
    color: #1f2937;
    line-height: 1.4;
}

.start-rail-metric-list[b-aytc7iuj8u] {
    list-style: disc;
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.825rem;
    color: #4b5563;
}

.start-rail-metric-list li[b-aytc7iuj8u] {
    margin-bottom: 0.15rem;
}

.start-rail-actions[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.start-rail-actions .btn-primary[b-aytc7iuj8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #0C5FE3;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 120ms ease;
}

.start-rail-actions .btn-primary:hover:not(:disabled)[b-aytc7iuj8u] {
    background: #0a4fc0;
}

.start-rail-actions .btn-primary:disabled[b-aytc7iuj8u] {
    background: #93c5fd;
    cursor: not-allowed;
}

.start-rail-actions .btn-link[b-aytc7iuj8u] {
    background: transparent;
    border: none;
    color: #0C5FE3;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.4rem;
    text-decoration: underline;
    align-self: center;
}

.start-rail-actions .btn-link:disabled[b-aytc7iuj8u] {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: none;
}

.start-rail-hint[b-aytc7iuj8u] {
    margin: 0.4rem 0 0 0;
    padding: 0.5rem 0.7rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.4;
}

.start-rail-hint i[b-aytc7iuj8u] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ────────── Empty / loading states ────────── */

.empty-state[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-state.empty-state-inline[b-aytc7iuj8u] {
    padding: 2rem 1rem;
}

.empty-state i[b-aytc7iuj8u] {
    font-size: 2rem;
    color: #d1d5db;
    margin-bottom: 0.85rem;
}

.empty-state h3[b-aytc7iuj8u], .empty-state h4[b-aytc7iuj8u] {
    margin: 0 0 0.4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.empty-state p[b-aytc7iuj8u] {
    margin: 0 0 1rem 0;
    max-width: 460px;
}

.empty-state .btn-primary[b-aytc7iuj8u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #0C5FE3;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Canonical gov-v2 page loader (DESIGN-SYSTEM.md §6) — pure-CSS spinner sits
   ABOVE the "Loading…" caption with a fixed 12px gap. Replaces the older
   .loading-container + .loading-spinner pair which left a large visible gap
   because the fa-spinner glyph's line-box was much taller than the visible
   icon. Pure CSS spinner ensures consistent vertical rhythm.
   IMPLICATION: Removing these rules leaves the loading state unstyled. */
.gov-v2-page-loader[b-aytc7iuj8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
    color: #6b7280;
}

.gov-v2-page-loader__spinner[b-aytc7iuj8u] {
    width: 32px;
    height: 32px;
    margin: 0 0 12px;
    border: 3px solid rgba(15, 42, 102, 0.12);
    border-top-color: #0F2A66;
    border-radius: 50%;
    animation: start-intervention-spin-b-aytc7iuj8u 0.9s linear infinite;
}

.gov-v2-page-loader p[b-aytc7iuj8u] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

@keyframes start-intervention-spin-b-aytc7iuj8u {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .start-page-grid[b-aytc7iuj8u] { padding: 1rem; }
    .form-row-split[b-aytc7iuj8u] { grid-template-columns: 1fr; }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/Hub/Templates.razor.rz.scp.css */
/* Templates page scoped styles — view toggle, card grid, empty state, table-view
   helpers, and the SfDialog Create/Edit form layout. */

/* ────────── Dialog header title wrapper ──────────
   PURPOSE: Wrapper div around the dialog title + subtitle text block.
   Allows the title text to flex-grow and shrink without overflowing the
   close button on the right of the dialog header.
   IMPLICATION: Removing this class causes the title block to overflow the
   dialog header on narrow viewports or with long template names. */
.template-dialog-title-wrapper[b-u7a6gar4ca] {
    flex: 1;
    min-width: 0;
}

/* ────────── View toggle bar (mirrors All page idiom) ────────── */

.view-toggle-bar[b-u7a6gar4ca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.5rem 0.5rem 2.5rem;
}

.view-toggle-count[b-u7a6gar4ca] {
    font-size: 0.825rem;
    color: #6b7280;
}

.view-toggle-count strong[b-u7a6gar4ca] {
    color: #1f2937;
    font-weight: 600;
}

/* ────────── Card grid ────────── */

.card-grid[b-u7a6gar4ca] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 2.5rem 2rem 2.5rem;
}

@media (min-width: 640px) {
    .card-grid[b-u7a6gar4ca] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .card-grid[b-u7a6gar4ca] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) {
    .card-grid[b-u7a6gar4ca] { grid-template-columns: repeat(4, 1fr); }
}

/* ────────── Empty / loading states ────────── */

.empty-state[b-u7a6gar4ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-state i[b-u7a6gar4ca] {
    font-size: 2.5rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h3[b-u7a6gar4ca] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.empty-state p[b-u7a6gar4ca] {
    margin: 0 0 1.25rem 0;
    max-width: 480px;
}

.empty-state .btn-primary[b-u7a6gar4ca] {
    padding: 0.5rem 1rem;
    background: #0C5FE3;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}

.empty-state .btn-primary:hover[b-u7a6gar4ca] {
    background: #0a4fc0;
}

/* Canonical gov-v2 page loader (DESIGN-SYSTEM.md §6) — pure-CSS spinner.
   PURPOSE: Replaces the legacy .loading-container + .loading-spinner pair that
   relied on a FontAwesome glyph; the FA dependency made the spinner invisible
   if the icon font failed to load. The keyframe is duplicated locally (rather
   than imported from layout.css's gov-v2-spin) so this page's loader doesn't
   silently break if layout.css is reorganised.
   IMPLICATION: Removing this rule causes the loading state to render as plain
   "Loading templates..." text with no visual progress indicator. */
.gov-v2-page-loader[b-u7a6gar4ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.gov-v2-page-loader__spinner[b-u7a6gar4ca] {
    width: 32px;
    height: 32px;
    margin: 0 auto 1rem;
    border: 3px solid rgba(15, 42, 102, 0.12);
    border-top-color: #0F2A66;
    border-radius: 50%;
    animation: templates-spin-b-u7a6gar4ca 0.9s linear infinite;
}

@keyframes templates-spin-b-u7a6gar4ca {
    to { transform: rotate(360deg); }
}

/* ────────── Table-view row helpers ────────── */

[b-u7a6gar4ca] .template-name-link {
    color: #0C5FE3;
    cursor: pointer;
    font-weight: 500;
}

[b-u7a6gar4ca] .template-name-link:hover { text-decoration: underline; }

[b-u7a6gar4ca] .template-name-desc {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.2rem;
    line-height: 1.3;
}

[b-u7a6gar4ca] .status-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

[b-u7a6gar4ca] .status-badge.status-draft     { background: #fef3c7; color: #92400e; }
[b-u7a6gar4ca] .status-badge.status-published { background: #d1fae5; color: #065f46; }
[b-u7a6gar4ca] .status-badge.status-archived  { background: #f3f4f6; color: #4b5563; }

[b-u7a6gar4ca] .row-actions {
    display: inline-flex;
    gap: 0.25rem;
}

[b-u7a6gar4ca] .row-actions .btn-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #6b7280;
    cursor: pointer;
}

[b-u7a6gar4ca] .row-actions .btn-icon:hover {
    background: #f3f4f6;
    color: #0C5FE3;
}

[b-u7a6gar4ca] .row-actions .btn-icon-primary {
    background: #eff6ff;
    color: #0C5FE3;
}

[b-u7a6gar4ca] .row-actions .btn-icon-primary:hover {
    background: #dbeafe;
    color: #0a4fc0;
}

[b-u7a6gar4ca] .row-actions .btn-icon-danger:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* ────────── SfDialog Create/Edit form ────────── */

[b-u7a6gar4ca] .template-dialog .e-dlg-header {
    color: #1f2937;
    font-weight: 600;
}

[b-u7a6gar4ca] .template-dialog .e-footer-content {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

[b-u7a6gar4ca] .dialog-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

[b-u7a6gar4ca] .dialog-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

[b-u7a6gar4ca] .dialog-form .form-row-split {
    flex-direction: row;
    gap: 1rem;
}

[b-u7a6gar4ca] .dialog-form .form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

[b-u7a6gar4ca] .dialog-form .form-label {
    font-size: 0.825rem;
    font-weight: 500;
    color: #1f2937;
}

[b-u7a6gar4ca] .dialog-form .required {
    color: #dc2626;
    margin-left: 0.15rem;
}

[b-u7a6gar4ca] .dialog-form .form-help {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

[b-u7a6gar4ca] .metric-suggest-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

[b-u7a6gar4ca] .metric-suggest-row .e-input-group,
[b-u7a6gar4ca] .metric-suggest-row .e-textbox {
    flex: 1;
}

[b-u7a6gar4ca] .metric-suggest-row .e-btn {
    flex-shrink: 0;
    align-self: flex-start;
}

[b-u7a6gar4ca] .metric-list {
    list-style: none;
    margin: 0.6rem 0 0 0;
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[b-u7a6gar4ca] .metric-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

[b-u7a6gar4ca] .metric-desc {
    font-size: 0.7rem;
    color: #6b7280;
    margin-left: 1.6rem; /* indent under the checkbox */
}

[b-u7a6gar4ca] .btn-secondary,
[b-u7a6gar4ca] .btn-primary {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

[b-u7a6gar4ca] .btn-secondary {
    background: #ffffff;
    color: #4b5563;
    border-color: #d1d5db;
}

[b-u7a6gar4ca] .btn-secondary:hover {
    background: #f3f4f6;
}

[b-u7a6gar4ca] .btn-primary {
    background: #0C5FE3;
    color: #ffffff;
}

[b-u7a6gar4ca] .btn-primary:hover:not(:disabled) {
    background: #0a4fc0;
}

[b-u7a6gar4ca] .btn-primary:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .view-toggle-bar[b-u7a6gar4ca] { padding: 1rem 1rem 0.5rem 1rem; }
    .card-grid[b-u7a6gar4ca] { padding: 0 1rem 2rem 1rem; }
    [b-u7a6gar4ca] .dialog-form .form-row-split {
        flex-direction: column;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/InterventionInstanceDetail.razor.rz.scp.css */
/* ========================================
   Intervention Instance Detail Page Styles
   ========================================
   PURPOSE: Page-specific styles for Intervention Instance Detail view
   IMPLICATION: Works with modern-page-header.css for consistent UX
   ======================================== */

/* Page Container */
/* IMPLICATION: Provides proper spacing and layout for the page */
.page-container[b-4e9y68jyhk] {
    padding: 0;
    min-height: 100vh;
    background: #f9fafb;
}

/* Loading Container */
/* IMPLICATION: Shown while instance is loading */
.loading-container[b-4e9y68jyhk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    margin: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-4e9y68jyhk] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

.loading-container p[b-4e9y68jyhk] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Error Container */
/* IMPLICATION: Shown when instance not found */
.error-container[b-4e9y68jyhk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    margin: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.error-container i[b-4e9y68jyhk] {
    font-size: 3rem;
    color: #f59e0b;
    margin-bottom: 1rem;
}

.error-container h2[b-4e9y68jyhk] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: #1f2937;
}

.error-container p[b-4e9y68jyhk] {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* ========================================
   SLIM HEADER OVERRIDES
   PURPOSE: Matches FormComplete compact header pattern
   ======================================== */
.form-header-slim[b-4e9y68jyhk] {
    margin-bottom: 0;
    flex-shrink: 0;
}

.form-header-slim .header-banner-blue[b-4e9y68jyhk] {
    padding: 0.875rem 0;
    border-radius: 0;
}

.form-header-slim .header-content-wrapper[b-4e9y68jyhk] {
    padding: 0 1.5rem;
}

.form-header-slim .header-left-section[b-4e9y68jyhk] {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.form-header-slim .header-title-section[b-4e9y68jyhk] {
    gap: 0.25rem;
}

.form-header-slim .page-title[b-4e9y68jyhk] {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.form-header-slim .page-subtitle[b-4e9y68jyhk] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Header Breadcrumb */
.header-breadcrumb[b-4e9y68jyhk] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

.header-breadcrumb a[b-4e9y68jyhk] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.header-breadcrumb a:hover[b-4e9y68jyhk] {
    color: white;
    text-decoration: underline;
}

.header-breadcrumb span[b-4e9y68jyhk] {
    color: rgba(255, 255, 255, 0.6);
}

/* Status group in header */
.header-status-group[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-status-badge[b-4e9y68jyhk] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.header-status-badge.status-draft[b-4e9y68jyhk] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.header-status-badge.status-active[b-4e9y68jyhk] {
    background: #10b981;
    color: white;
}

.header-status-badge.status-completed[b-4e9y68jyhk] {
    background: #10b981;
    color: white;
}

.header-status-badge.status-cancelled[b-4e9y68jyhk] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.header-status-badge.status-overdue[b-4e9y68jyhk] {
    background: #ef4444;
    color: white;
}

.header-days-remaining[b-4e9y68jyhk] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Category badge in subtitle */
.category-badge[b-4e9y68jyhk] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 0.375rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ============================================================================
   INFO TOOLTIP
   PURPOSE: Hover tooltip showing instance details next to title
   IMPLICATION: Provides context without cluttering the main content area
   ============================================================================ */
.info-tooltip-container[b-4e9y68jyhk] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-icon[b-4e9y68jyhk] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: help;
    transition: color 0.2s ease;
}

.info-icon:hover[b-4e9y68jyhk] {
    color: rgba(255, 255, 255, 0.9);
}

.info-tooltip[b-4e9y68jyhk] {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 340px;
    padding: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.info-tooltip[b-4e9y68jyhk]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

.info-tooltip-container:hover .info-tooltip[b-4e9y68jyhk] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.info-tooltip strong[b-4e9y68jyhk] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.tooltip-detail[b-4e9y68jyhk] {
    margin-bottom: 0.75rem;
}

.tooltip-detail:last-child[b-4e9y68jyhk] {
    margin-bottom: 0;
}

.tooltip-label[b-4e9y68jyhk] {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.tooltip-value[b-4e9y68jyhk] {
    display: block;
    font-size: 0.8rem;
    color: #1f2937;
    line-height: 1.5;
}

.tooltip-value.ai-query-text[b-4e9y68jyhk] {
    background: #f3f4f6;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-style: italic;
    border-left: 3px solid #0C5FE3;
}

/* Responsive tooltip positioning */
@media (max-width: 768px) {
    .info-tooltip[b-4e9y68jyhk] {
        width: 280px;
        left: -50px;
    }

    .info-tooltip[b-4e9y68jyhk]::before {
        left: 70px;
    }
}

/* Subheader Filters Container */
/* IMPLICATION: Contains student filter dropdown in subheader */
.subheader-filters-container[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================================================
   PEOPLE PICKER COMPONENT
   PURPOSE: Custom student selector with avatar, truncated name, and dropdown
   IMPLICATION: Provides a more visual selection experience than standard dropdown
   ============================================================================ */

/* Container holds the selected display and dropdown */
.people-picker-container[b-4e9y68jyhk] {
    position: relative;
}

/* Selected student display - clickable to open dropdown */
.people-picker-selected[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    max-width: 240px;
}

.people-picker-selected:hover[b-4e9y68jyhk] {
    border-color: #0C5FE3;
    box-shadow: 0 2px 4px rgba(12, 95, 227, 0.1);
}

/* Avatar circle with icon */
.people-avatar[b-4e9y68jyhk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0C5FE3 0%, #0a4fc0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.people-avatar i[b-4e9y68jyhk] {
    color: white;
    font-size: 0.7rem;
}

.people-avatar.all-students[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.people-avatar.all-students i[b-4e9y68jyhk] {
    font-size: 0.65rem;
}

/* Truncated name with ellipsis */
.people-name[b-4e9y68jyhk] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron indicator */
.people-picker-chevron[b-4e9y68jyhk] {
    font-size: 0.65rem;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Dropdown list */
.people-picker-dropdown[b-4e9y68jyhk] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Individual option in dropdown */
.people-picker-option[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.people-picker-option:first-child[b-4e9y68jyhk] {
    border-radius: 10px 10px 0 0;
}

.people-picker-option:last-child[b-4e9y68jyhk] {
    border-radius: 0 0 10px 10px;
}

.people-picker-option:hover[b-4e9y68jyhk] {
    background: #f3f4f6;
}

.people-picker-option.selected[b-4e9y68jyhk] {
    background: #eff6ff;
}

.people-picker-option.selected .people-option-name[b-4e9y68jyhk] {
    color: #0C5FE3;
    font-weight: 600;
}

/* Truncated name in dropdown options */
.people-option-name[b-4e9y68jyhk] {
    flex: 1;
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   METRIC PICKER COMPONENT
   PURPOSE: Metric selector styled to match the people picker in the subheader
   IMPLICATION: Provides consistent visual styling for filter dropdowns
   ============================================================================ */

.metric-picker-container[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    transition: all 0.2s ease;
}

.metric-picker-container:hover[b-4e9y68jyhk] {
    border-color: #0C5FE3;
    box-shadow: 0 2px 4px rgba(12, 95, 227, 0.1);
}

.metric-picker-icon[b-4e9y68jyhk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-picker-icon i[b-4e9y68jyhk] {
    color: white;
    font-size: 0.7rem;
}

/* Override Radzen dropdown styling within metric picker */
.metric-picker-container[b-4e9y68jyhk]  .rz-dropdown {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.metric-picker-container[b-4e9y68jyhk]  .rz-dropdown .rz-inputtext {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
}

/* Overdue text in tooltip */
.overdue-text[b-4e9y68jyhk] {
    color: #dc2626;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Content Section */
/* IMPLICATION: Wraps content cards below the header */
.content-section[b-4e9y68jyhk] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 1.5rem 1.5rem 1.5rem;
    padding: 1.5rem;
    overflow: hidden;
}

.section-header[b-4e9y68jyhk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.section-header h3[b-4e9y68jyhk] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h3 i[b-4e9y68jyhk] {
    color: #0C5FE3;
}

/* Details Grid */
/* IMPLICATION: Layout for instance details */
.details-grid[b-4e9y68jyhk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.detail-item[b-4e9y68jyhk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-4e9y68jyhk] {
    grid-column: 1 / -1;
}

.detail-item label[b-4e9y68jyhk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-item p[b-4e9y68jyhk] {
    margin: 0;
    font-size: 0.875rem;
    color: #1f2937;
    line-height: 1.5;
}

.ai-query[b-4e9y68jyhk] {
    background: #f3f4f6;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-style: italic;
    border-left: 3px solid #0C5FE3;
}

/* Status Badges */
/* IMPLICATION: Visual indicators for instance and student status */
.status-badge[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-draft[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.status-active[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
}

.status-completed[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.status-cancelled[b-4e9y68jyhk] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Student Status Badges */
.student-status-badge[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.student-status-badge.status-assigned[b-4e9y68jyhk] {
    background: #e0f2fe;
    color: #0369a1;
}

.student-status-badge.status-inprogress[b-4e9y68jyhk] {
    background: #fef3c7;
    color: #92400e;
}

.student-status-badge.status-completed[b-4e9y68jyhk] {
    background: #d1fae5;
    color: #065f46;
}

.student-status-badge.status-removed[b-4e9y68jyhk] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Category Badges */
/* IMPLICATION: Color-coded badges for different intervention categories */
.category-badge[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.category-attendance[b-4e9y68jyhk] {
    background: rgba(236, 72, 153, 0.15);
    color: #be185d;
}

.category-behaviour[b-4e9y68jyhk] {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.category-academic[b-4e9y68jyhk] {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.category-wellbeing[b-4e9y68jyhk] {
    background: rgba(20, 184, 166, 0.15);
    color: #0d9488;
}

.category-send[b-4e9y68jyhk] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.category-safeguarding[b-4e9y68jyhk] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.category-general[b-4e9y68jyhk] {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

/* IMPLICATION: Override category badge colors in header context for readability on blue background */
.page-subtitle .category-badge[b-4e9y68jyhk],
.page-subtitle .category-badge.category-attendance[b-4e9y68jyhk],
.page-subtitle .category-badge.category-behaviour[b-4e9y68jyhk],
.page-subtitle .category-badge.category-academic[b-4e9y68jyhk],
.page-subtitle .category-badge.category-wellbeing[b-4e9y68jyhk],
.page-subtitle .category-badge.category-send[b-4e9y68jyhk],
.page-subtitle .category-badge.category-safeguarding[b-4e9y68jyhk],
.page-subtitle .category-badge.category-general[b-4e9y68jyhk] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

/* Action Buttons */
/* IMPLICATION: Button group styling in grid rows - horizontal layout for compact rows */
/* Note: Uses ::deep to penetrate Syncfusion grid component isolation */
[b-4e9y68jyhk] .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

[b-4e9y68jyhk] .action-buttons .rz-button {
    padding: 0.25rem 0.5rem;
    min-width: unset !important;
    width: 32px;
    height: 32px;
}

/* Empty State */
.empty-state[b-4e9y68jyhk] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
}

.empty-state i[b-4e9y68jyhk] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #9ca3af;
}

/* Notes Preview */
.notes-preview[b-4e9y68jyhk] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Buttons */
.btn-primary[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-4e9y68jyhk] {
    background: #0a4fc0;
}

.btn-secondary[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-4e9y68jyhk] {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* ========================================
   HEADER BUTTONS - Matches FormComplete pattern
   ======================================== */
.header-btn[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.header-btn:disabled[b-4e9y68jyhk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.header-btn-white[b-4e9y68jyhk] {
    background: white;
    color: #0C5FE3;
}

.header-btn-white:hover:not(:disabled)[b-4e9y68jyhk] {
    background: #f0f7ff;
}

.header-btn-outline[b-4e9y68jyhk] {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.header-btn-outline:hover:not(:disabled)[b-4e9y68jyhk] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.header-btn-success[b-4e9y68jyhk] {
    background: #10b981;
    color: white;
}

.header-btn-success:hover:not(:disabled)[b-4e9y68jyhk] {
    background: #059669;
}

/* Snapshot button disabled states */
.btn-header-snapshot:disabled[b-4e9y68jyhk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-header-snapshot.capturing[b-4e9y68jyhk] {
    opacity: 0.8;
}

.btn-header-snapshot.no-metrics[b-4e9y68jyhk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dialog Styles */
/* IMPLICATION: Modal dialog for completing intervention */
.dialog-overlay[b-4e9y68jyhk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-4e9y68jyhk 0.2s ease;
}

@keyframes fadeIn-b-4e9y68jyhk {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog-container[b-4e9y68jyhk] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: slideUp-b-4e9y68jyhk 0.3s ease;
}

@keyframes slideUp-b-4e9y68jyhk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-header[b-4e9y68jyhk] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #0C5FE3 0%, #0a4fc0 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-header h2[b-4e9y68jyhk] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
}

.dialog-header .rz-button[b-4e9y68jyhk] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
}

.dialog-header .rz-button:hover[b-4e9y68jyhk] {
    background: rgba(255, 255, 255, 0.3);
}

.dialog-body[b-4e9y68jyhk] {
    padding: 1.5rem;
    overflow-y: auto;
    background: #f9fafb;
}

.dialog-body p[b-4e9y68jyhk] {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.dialog-footer[b-4e9y68jyhk] {
    padding: 1rem 1.5rem;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Form Styles */
.form-group[b-4e9y68jyhk] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-4e9y68jyhk] {
    margin-bottom: 0;
}

.form-group label[b-4e9y68jyhk] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

/* Syncfusion Grid Overrides */
[b-4e9y68jyhk] .e-grid {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

[b-4e9y68jyhk] .e-grid .e-gridheader {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

[b-4e9y68jyhk] .e-grid .e-headercell {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem;
}

[b-4e9y68jyhk] .e-grid .e-rowcell {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
}

[b-4e9y68jyhk] .e-grid .e-row:hover .e-rowcell {
    background: #f9fafb;
}

[b-4e9y68jyhk] .e-grid .e-pager {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-section[b-4e9y68jyhk] {
        margin: 0 1rem 1rem 1rem;
        padding: 1rem;
    }

    .details-grid[b-4e9y68jyhk] {
        grid-template-columns: 1fr;
    }

    .instance-info-container[b-4e9y68jyhk] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .content-section[b-4e9y68jyhk] {
        margin: 0 0.75rem 0.75rem 0.75rem;
        border-radius: 8px;
    }

    .dialog-container[b-4e9y68jyhk] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .section-header[b-4e9y68jyhk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    [b-4e9y68jyhk] .e-grid .e-headercell,
    [b-4e9y68jyhk] .e-grid .e-rowcell {
        padding: 0.75rem;
    }
}

/* ============================================
   IMPACT TRACKING SECTION STYLES
   PURPOSE: Styling for intervention impact visualization
   IMPLICATION: Provides visual feedback for metric tracking and trend charts
   ============================================ */

.impact-section .section-header[b-4e9y68jyhk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.metric-selector[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loading-impact[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #6b7280;
}

.loading-impact i[b-4e9y68jyhk] {
    color: #0C5FE3;
}

/* Impact KPI Grid */
.impact-kpi-grid[b-4e9y68jyhk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.impact-kpi-card[b-4e9y68jyhk] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.impact-kpi-card .kpi-label[b-4e9y68jyhk] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.impact-kpi-card .kpi-value[b-4e9y68jyhk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.impact-kpi-card.baseline[b-4e9y68jyhk] {
    background: #f0f9ff;
    border-color: #bae6fd;
}

.impact-kpi-card.current[b-4e9y68jyhk] {
    background: #eff6ff;
    border-color: #93c5fd;
}

.impact-kpi-card.change.positive[b-4e9y68jyhk] {
    background: #f0fdf4;
    border-color: #86efac;
}

.impact-kpi-card.change.positive .kpi-value[b-4e9y68jyhk] {
    color: #16a34a;
}

.impact-kpi-card.change.negative[b-4e9y68jyhk] {
    background: #fef2f2;
    border-color: #fecaca;
}

.impact-kpi-card.change.negative .kpi-value[b-4e9y68jyhk] {
    color: #dc2626;
}

.impact-kpi-card.students[b-4e9y68jyhk] {
    background: #faf5ff;
    border-color: #e9d5ff;
}

/* Trend Chart Container */
.trend-chart-container[b-4e9y68jyhk] {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    min-height: 300px;
}

.no-trend-data[b-4e9y68jyhk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px dashed #d1d5db;
}

.no-trend-data i[b-4e9y68jyhk] {
    font-size: 2.5rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.no-trend-data p[b-4e9y68jyhk] {
    max-width: 400px;
    font-size: 0.9rem;
}

/* Responsive for Impact KPIs */
@media (max-width: 1024px) {
    .impact-kpi-grid[b-4e9y68jyhk] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .impact-kpi-grid[b-4e9y68jyhk] {
        grid-template-columns: 1fr;
    }

    .impact-section .section-header[b-4e9y68jyhk] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   SNAPSHOT BUTTON STYLES
   PURPOSE: Manual snapshot capture button in Impact Tracking section
   IMPLICATION: Allows users to capture current metric values on-demand
   ============================================ */

/* Impact Header Actions Container */
.impact-header-actions[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filter Group - Dropdown with label */
.filter-group[b-4e9y68jyhk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-label[b-4e9y68jyhk] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-label i[b-4e9y68jyhk] {
    font-size: 0.65rem;
    color: #9ca3af;
}

/* Snapshot Button */
.btn-snapshot[b-4e9y68jyhk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.btn-snapshot:hover:not(:disabled)[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.btn-snapshot:disabled[b-4e9y68jyhk] {
    background: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-snapshot.capturing[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    opacity: 0.8;
}

.btn-snapshot i[b-4e9y68jyhk] {
    font-size: 0.875rem;
}

/* ============================================
   METRIC COLUMN STYLES FOR STUDENT GRID
   PURPOSE: Display baseline/current metric values in student grid
   IMPLICATION: Shows impact tracking progress for each student
   ============================================ */

/* Metric Cell Container */
[b-4e9y68jyhk] .metric-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
}

/* Baseline and Current Value Rows */
[b-4e9y68jyhk] .metric-baseline,
[b-4e9y68jyhk] .metric-current {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    align-items: center;
}

[b-4e9y68jyhk] .metric-label {
    color: #6b7280;
    font-size: 0.65rem;
    text-transform: uppercase;
}

[b-4e9y68jyhk] .metric-value {
    font-weight: 600;
    color: #1f2937;
}

/* Change Indicator */
[b-4e9y68jyhk] .metric-change {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
    margin-top: 0.125rem;
}

[b-4e9y68jyhk] .metric-change.positive {
    background: #d1fae5;
    color: #065f46;
}

[b-4e9y68jyhk] .metric-change.negative {
    background: #fee2e2;
    color: #dc2626;
}

/* No Metric Data Placeholder */
[b-4e9y68jyhk] .no-metric-data {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* ========================================
   IMPACT KPI CARDS IN SUBHEADER
   ========================================
   PURPOSE: Display impact metrics (Baseline, Current, Change, Improved) in subheader
   IMPLICATION: Provides quick visibility of intervention performance at glance
   ======================================== */

/* Baseline KPI Card - Neutral gray to indicate starting point */
[b-4e9y68jyhk] .header-kpi-card-baseline {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: #9ca3af;
}

[b-4e9y68jyhk] .header-kpi-card-baseline .header-kpi-value {
    color: #4b5563;
}

[b-4e9y68jyhk] .header-kpi-card-baseline .header-kpi-label {
    color: #6b7280;
}

/* Current KPI Card - Blue to indicate active/current state */
[b-4e9y68jyhk] .header-kpi-card-current {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

[b-4e9y68jyhk] .header-kpi-card-current .header-kpi-value {
    color: #1d4ed8;
}

[b-4e9y68jyhk] .header-kpi-card-current .header-kpi-label {
    color: #2563eb;
}

/* Change KPI Card - Dynamic color based on positive/negative */
[b-4e9y68jyhk] .header-kpi-card-change {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: #9ca3af;
}

[b-4e9y68jyhk] .header-kpi-card-change .header-kpi-value {
    color: #4b5563;
}

[b-4e9y68jyhk] .header-kpi-card-change .header-kpi-label {
    color: #6b7280;
}

/* Positive change - Green gradient */
[b-4e9y68jyhk] .header-kpi-card-change.positive {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
}

[b-4e9y68jyhk] .header-kpi-card-change.positive .header-kpi-value {
    color: #065f46;
}

[b-4e9y68jyhk] .header-kpi-card-change.positive .header-kpi-label {
    color: #047857;
}

/* Negative change - Red gradient */
[b-4e9y68jyhk] .header-kpi-card-change.negative {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
}

[b-4e9y68jyhk] .header-kpi-card-change.negative .header-kpi-value {
    color: #991b1b;
}

[b-4e9y68jyhk] .header-kpi-card-change.negative .header-kpi-label {
    color: #b91c1c;
}

/* Improved KPI Card - Success green to highlight positive outcome */
[b-4e9y68jyhk] .header-kpi-card-improved {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
}

[b-4e9y68jyhk] .header-kpi-card-improved .header-kpi-value {
    color: #065f46;
}

[b-4e9y68jyhk] .header-kpi-card-improved .header-kpi-label {
    color: #047857;
}

/* ============================================
   IMPROVEMENT GROUPING TILES
   PURPOSE: Celebrate / Focus / Concern summary tiles
   IMPLICATION: Visual grouping of students by metric improvement status
   ============================================ */

.improvement-tiles[b-4e9y68jyhk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.improvement-tile[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.improvement-tile:hover[b-4e9y68jyhk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.improvement-tile.active[b-4e9y68jyhk] {
    border-color: currentColor;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Celebrate - Green */
.improvement-tile.celebrate[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
}

.improvement-tile.celebrate .tile-icon[b-4e9y68jyhk] {
    background: #10b981;
}

.improvement-tile.celebrate.active[b-4e9y68jyhk] {
    border-color: #10b981;
}

/* Focus - Amber */
.improvement-tile.focus[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
}

.improvement-tile.focus .tile-icon[b-4e9y68jyhk] {
    background: #f59e0b;
}

.improvement-tile.focus.active[b-4e9y68jyhk] {
    border-color: #f59e0b;
}

/* Concern - Red */
.improvement-tile.concern[b-4e9y68jyhk] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
}

.improvement-tile.concern .tile-icon[b-4e9y68jyhk] {
    background: #ef4444;
}

.improvement-tile.concern.active[b-4e9y68jyhk] {
    border-color: #ef4444;
}

.tile-icon[b-4e9y68jyhk] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tile-icon i[b-4e9y68jyhk] {
    color: white;
    font-size: 1rem;
}

.tile-count[b-4e9y68jyhk] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.tile-label[b-4e9y68jyhk] {
    font-size: 0.875rem;
    font-weight: 700;
    margin-top: 0.125rem;
}

.tile-description[b-4e9y68jyhk] {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.125rem;
}

/* Group filter dropdown in section header */
.group-filter-container[b-4e9y68jyhk] {
    display: flex;
    align-items: center;
}

/* Improvement dot/badge in student grid */
[b-4e9y68jyhk] .improvement-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}

[b-4e9y68jyhk] .improvement-dot i {
    font-size: 0.6rem;
}

[b-4e9y68jyhk] .improvement-dot.celebrate {
    background: #d1fae5;
    color: #065f46;
}

[b-4e9y68jyhk] .improvement-dot.focus {
    background: #fef3c7;
    color: #92400e;
}

[b-4e9y68jyhk] .improvement-dot.concern {
    background: #fee2e2;
    color: #991b1b;
}

/* Responsive for improvement tiles */
@media (max-width: 768px) {
    .improvement-tiles[b-4e9y68jyhk] {
        grid-template-columns: 1fr;
    }
}

/* Print Styles */
@media print {
    .content-section[b-4e9y68jyhk] {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .dialog-overlay[b-4e9y68jyhk] {
        display: none;
    }

    .action-buttons[b-4e9y68jyhk] {
        display: none;
    }

    .header-btn[b-4e9y68jyhk],
    .btn-secondary[b-4e9y68jyhk] {
        display: none;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/InterventionInstances.razor.rz.scp.css */
/* ========================================
   Intervention Instances List Page Styles
   ========================================
   PURPOSE: Page-specific styles for Intervention Instances list
   IMPLICATION: Works with modern-page-header.css for consistent UX
   ======================================== */

/* Page Container */
.page-container[b-wo1bj6wsac] {
    padding: 0;
    min-height: 100vh;
    background: #f9fafb;
}

/* Content Section - Grid Card */
.content-section[b-wo1bj6wsac] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 1.5rem 1.5rem 1.5rem;
    padding: 1.5rem;
    overflow: hidden;
}

/* Loading Container */
.loading-container[b-wo1bj6wsac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-wo1bj6wsac] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

.loading-container p[b-wo1bj6wsac] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Empty State */
.empty-state[b-wo1bj6wsac] {
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-state i[b-wo1bj6wsac] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
    color: #d1d5db;
}

.empty-state h3[b-wo1bj6wsac] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: #374151;
}

.empty-state p[b-wo1bj6wsac] {
    margin: 0 0 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Instance Name Link */
.instance-name-link[b-wo1bj6wsac] {
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: color 0.15s ease;
}

.instance-name-link:hover[b-wo1bj6wsac] {
    color: #0C5FE3;
}

/* Status Badges */
.status-badge[b-wo1bj6wsac] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-draft[b-wo1bj6wsac] {
    background: #fef3c7;
    color: #92400e;
}

.status-active[b-wo1bj6wsac] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-completed[b-wo1bj6wsac] {
    background: #d1fae5;
    color: #065f46;
}

.status-cancelled[b-wo1bj6wsac] {
    background: #f3f4f6;
    color: #6b7280;
}

.overdue-icon[b-wo1bj6wsac] {
    font-size: 0.65rem;
    color: #dc2626;
}

/* Category Badges */
.category-badge[b-wo1bj6wsac] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.category-attendance[b-wo1bj6wsac] {
    background: #fce7f3;
    color: #be185d;
}

.category-behaviour[b-wo1bj6wsac] {
    background: #f3e8ff;
    color: #7c3aed;
}

.category-academic[b-wo1bj6wsac] {
    background: #e0e7ff;
    color: #4338ca;
}

.category-wellbeing[b-wo1bj6wsac] {
    background: #ccfbf1;
    color: #0d9488;
}

.category-send[b-wo1bj6wsac] {
    background: #fef3c7;
    color: #d97706;
}

.category-safeguarding[b-wo1bj6wsac] {
    background: #fee2e2;
    color: #dc2626;
}

.category-general[b-wo1bj6wsac] {
    background: #f3f4f6;
    color: #4b5563;
}

/* Action Buttons - matches UsersNew/TenantGroupsNew pattern */
.action-buttons[b-wo1bj6wsac] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.btn-icon[b-wo1bj6wsac] {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-wo1bj6wsac] {
    background: #0C5FE3;
    color: white;
}

.btn-icon-danger:hover[b-wo1bj6wsac] {
    background: #ef4444;
    color: white;
}

/* Header Button Variants */
.btn-header-primary[b-wo1bj6wsac] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: white;
    color: #0C5FE3;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-primary:hover[b-wo1bj6wsac] {
    background: #f0f9ff;
}

.btn-header-secondary[b-wo1bj6wsac] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-secondary:hover[b-wo1bj6wsac] {
    background: rgba(255, 255, 255, 0.3);
}

/* Filter styles */
.filter-select[b-wo1bj6wsac] {
    min-width: 150px;
}

.filter-input[b-wo1bj6wsac] {
    min-width: 200px;
}

/* Syncfusion Grid Overrides */
[b-wo1bj6wsac] .e-grid {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

[b-wo1bj6wsac] .e-grid .e-gridheader {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

[b-wo1bj6wsac] .e-grid .e-headercell {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem;
}

[b-wo1bj6wsac] .e-grid .e-rowcell {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
    font-size: 0.85rem;
}

[b-wo1bj6wsac] .e-grid .e-row:hover .e-rowcell {
    background: #f9fafb;
}

[b-wo1bj6wsac] .e-grid .e-pager {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-section[b-wo1bj6wsac] {
        margin: 0 1rem 1rem 1rem;
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .content-section[b-wo1bj6wsac] {
        margin: 0 0.75rem 0.75rem 0.75rem;
        border-radius: 8px;
    }

    [b-wo1bj6wsac] .e-grid .e-headercell,
    [b-wo1bj6wsac] .e-grid .e-rowcell {
        padding: 0.5rem;
    }
}

/* Print Styles */
@media print {
    .content-section[b-wo1bj6wsac] {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .action-buttons[b-wo1bj6wsac] {
        display: none;
    }

    .btn-header-primary[b-wo1bj6wsac],
    .btn-header-secondary[b-wo1bj6wsac] {
        display: none;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Interventions/InterventionTemplateDetail.razor.rz.scp.css */
/* ========================================
   Intervention Template Detail Page Styles
   ========================================
   PURPOSE: Page-specific styles for Intervention Template Detail view
   IMPLICATION: Works with modern-page-header.css for consistent UX
   ======================================== */

/* Page Container */
/* IMPLICATION: Provides proper spacing and layout for the page */
.page-container[b-hv88dduss9] {
    padding: 0;
    min-height: 100vh;
    background: #f9fafb;
}

/* Loading Container */
/* IMPLICATION: Shown while template is loading */
.loading-container[b-hv88dduss9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    margin: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-hv88dduss9] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0C5FE3;
    margin-bottom: 1rem;
}

.loading-container p[b-hv88dduss9] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Error Container */
/* IMPLICATION: Shown when template not found */
.error-container[b-hv88dduss9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    margin: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.error-container i[b-hv88dduss9] {
    font-size: 3rem;
    color: #f59e0b;
    margin-bottom: 1rem;
}

.error-container h2[b-hv88dduss9] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: #1f2937;
}

.error-container p[b-hv88dduss9] {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Header Breadcrumb */
/* IMPLICATION: Navigation path in header */
.header-breadcrumb[b-hv88dduss9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-hv88dduss9] {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover[b-hv88dduss9] {
    color: white;
}

.header-breadcrumb i[b-hv88dduss9] {
    font-size: 0.65rem;
}

/* Template Info Container */
/* IMPLICATION: Shows key template metadata in header */
.template-info-container[b-hv88dduss9] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.info-item[b-hv88dduss9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.info-item i[b-hv88dduss9] {
    color: #6b7280;
}

/* Content Section */
/* IMPLICATION: Wraps content cards below the header */
.content-section[b-hv88dduss9] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 1.5rem 1.5rem 1.5rem;
    padding: 1.5rem;
    overflow: hidden;
}

.section-header[b-hv88dduss9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.section-header h3[b-hv88dduss9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h3 i[b-hv88dduss9] {
    color: #0C5FE3;
}

/* Details Grid */
/* IMPLICATION: Layout for template details */
.details-grid[b-hv88dduss9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.detail-item[b-hv88dduss9] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-item.full-width[b-hv88dduss9] {
    grid-column: 1 / -1;
}

.detail-item label[b-hv88dduss9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-item p[b-hv88dduss9] {
    margin: 0;
    font-size: 0.875rem;
    color: #1f2937;
    line-height: 1.5;
}

/* Resource Link */
/* IMPLICATION: Styled external link for resources */
.resource-link[b-hv88dduss9] {
    color: #0C5FE3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.resource-link:hover[b-hv88dduss9] {
    color: #0a4fc0;
    text-decoration: underline;
}

.resource-link i[b-hv88dduss9] {
    font-size: 0.75rem;
}

/* Status Badges */
/* IMPLICATION: Visual indicators for template status */
.status-badge[b-hv88dduss9] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-draft[b-hv88dduss9] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.status-published[b-hv88dduss9] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.status-archived[b-hv88dduss9] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-active[b-hv88dduss9] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
}

.status-completed[b-hv88dduss9] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.status-cancelled[b-hv88dduss9] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Category Badges */
/* IMPLICATION: Color-coded badges for different intervention categories */
.category-badge[b-hv88dduss9] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.category-attendance[b-hv88dduss9] {
    background: rgba(236, 72, 153, 0.15);
    color: #be185d;
}

.category-behaviour[b-hv88dduss9] {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.category-academic[b-hv88dduss9] {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.category-wellbeing[b-hv88dduss9] {
    background: rgba(20, 184, 166, 0.15);
    color: #0d9488;
}

.category-send[b-hv88dduss9] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.category-safeguarding[b-hv88dduss9] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.category-general[b-hv88dduss9] {
    background: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

/* IMPLICATION: Override category badge colors in header context for readability on blue background */
.page-subtitle .category-badge[b-hv88dduss9],
.page-subtitle .category-badge.category-attendance[b-hv88dduss9],
.page-subtitle .category-badge.category-behaviour[b-hv88dduss9],
.page-subtitle .category-badge.category-academic[b-hv88dduss9],
.page-subtitle .category-badge.category-wellbeing[b-hv88dduss9],
.page-subtitle .category-badge.category-send[b-hv88dduss9],
.page-subtitle .category-badge.category-safeguarding[b-hv88dduss9],
.page-subtitle .category-badge.category-general[b-hv88dduss9] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

/* Action Buttons */
/* IMPLICATION: Button group styling in grid rows */
.action-buttons[b-hv88dduss9] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.action-buttons .rz-button[b-hv88dduss9] {
    padding: 0.375rem 0.625rem;
    min-width: unset;
}

/* Empty State */
.empty-state[b-hv88dduss9] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
}

.empty-state i[b-hv88dduss9] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #9ca3af;
}

.empty-state p[b-hv88dduss9] {
    margin-bottom: 1.5rem;
}

/* Buttons */
.btn-primary[b-hv88dduss9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-hv88dduss9] {
    background: #0a4fc0;
}

.btn-secondary[b-hv88dduss9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-hv88dduss9] {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Header Button Variants */
.btn-header-primary[b-hv88dduss9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: white;
    color: #0C5FE3;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-primary:hover[b-hv88dduss9] {
    background: #f0f9ff;
}

.btn-header-secondary[b-hv88dduss9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-secondary:hover[b-hv88dduss9] {
    background: rgba(255, 255, 255, 0.3);
}

/* Syncfusion Grid Overrides */
[b-hv88dduss9] .e-grid {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

[b-hv88dduss9] .e-grid .e-gridheader {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

[b-hv88dduss9] .e-grid .e-headercell {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem;
}

[b-hv88dduss9] .e-grid .e-rowcell {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
}

[b-hv88dduss9] .e-grid .e-row:hover .e-rowcell {
    background: #f9fafb;
}

[b-hv88dduss9] .e-grid .e-pager {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-section[b-hv88dduss9] {
        margin: 0 1rem 1rem 1rem;
        padding: 1rem;
    }

    .details-grid[b-hv88dduss9] {
        grid-template-columns: 1fr;
    }

    .template-info-container[b-hv88dduss9] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .content-section[b-hv88dduss9] {
        margin: 0 0.75rem 0.75rem 0.75rem;
        border-radius: 8px;
    }

    .section-header[b-hv88dduss9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    [b-hv88dduss9] .e-grid .e-headercell,
    [b-hv88dduss9] .e-grid .e-rowcell {
        padding: 0.75rem;
    }
}

/* Print Styles */
@media print {
    .content-section[b-hv88dduss9] {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .action-buttons[b-hv88dduss9] {
        display: none;
    }

    .btn-header-primary[b-hv88dduss9],
    .btn-header-secondary[b-hv88dduss9],
    .btn-secondary[b-hv88dduss9] {
        display: none;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/MarginalGains/InsightDetail.razor.rz.scp.css */
/* ============================================================================
   INSIGHT DETAIL PAGE STYLES
   PURPOSE: Styles for the insight drill-down page with charts and Marge panel
   IMPLICATION: 2/3 + 1/3 layout with charts on left, Marge AI on right
   NOTE: Header styles come from /css/modern-page-header.css for consistency
   ============================================================================ */

/* ============================================================================
   PAGE CONTAINER
   IMPLICATION: Uses same structure as InsightsLanding for consistent UX
   ============================================================================ */
.page-container[b-5xrpf1zhn2] {
    min-height: 100vh;
    background: #f8fafc;
}

/* ============================================================================
   HEADER OVERRIDES
   IMPLICATION: Extends modern-page-header.css with page-specific styling
   ============================================================================ */

/* Last updated styling for white text in blue header */
.last-updated[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.last-updated i[b-5xrpf1zhn2] {
    font-size: 0.8rem;
}

/* ============================================================================
   PAGE CONTENT
   ============================================================================ */
.page-content[b-5xrpf1zhn2] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Loading State */
.loading-state[b-5xrpf1zhn2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: #6b7280;
}

/* Empty State */
.empty-state[b-5xrpf1zhn2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state i[b-5xrpf1zhn2] {
    font-size: 3rem;
    color: #d1d5db;
}

.empty-state h3[b-5xrpf1zhn2] {
    font-size: 1.25rem;
    color: #374151;
    margin: 0;
}

.empty-state p[b-5xrpf1zhn2] {
    color: #6b7280;
    margin: 0;
}

.primary-button[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.primary-button:hover[b-5xrpf1zhn2] {
    background: #2563eb;
}

/* ============================================================================
   INSIGHT SUMMARY CARD
   ============================================================================ */
.insight-summary-card[b-5xrpf1zhn2] {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.summary-icon[b-5xrpf1zhn2] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.summary-icon.direction-positive[b-5xrpf1zhn2] {
    background: #dcfce7;
    color: #16a34a;
}

.summary-icon.direction-negative[b-5xrpf1zhn2] {
    background: #fee2e2;
    color: #dc2626;
}

.summary-icon.direction-neutral[b-5xrpf1zhn2] {
    background: #f3f4f6;
    color: #6b7280;
}

.summary-content[b-5xrpf1zhn2] {
    flex: 1;
}

.summary-headline-row[b-5xrpf1zhn2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.summary-headline[b-5xrpf1zhn2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.summary-detail[b-5xrpf1zhn2] {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.summary-meta[b-5xrpf1zhn2] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meta-item[b-5xrpf1zhn2] {
    font-size: 0.8rem;
    color: #6b7280;
}

.meta-item strong[b-5xrpf1zhn2] {
    color: #374151;
}

/* ============================================================================
   TWO COLUMN LAYOUT
   ============================================================================ */
.detail-layout[b-5xrpf1zhn2] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

/* ============================================================================
   CHARTS SECTION
   ============================================================================ */
.charts-section[b-5xrpf1zhn2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.chart-card[b-5xrpf1zhn2] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.chart-header[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.chart-header h3[b-5xrpf1zhn2] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* ============================================================================
   INFO TOOLTIPS
   IMPLICATION: Provides context for users about metrics and time periods
   ============================================================================ */
.info-tooltip-container[b-5xrpf1zhn2] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-icon[b-5xrpf1zhn2] {
    font-size: 0.8rem;
    color: #9ca3af;
    cursor: help;
    transition: color 0.2s ease;
}

.info-icon:hover[b-5xrpf1zhn2] {
    color: #6b7280;
}

.info-tooltip[b-5xrpf1zhn2] {
    position: absolute;
    top: calc(100% + 8px);
    right: -10px;
    width: 320px;
    padding: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.info-tooltip[b-5xrpf1zhn2]::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

.info-tooltip-container:hover .info-tooltip[b-5xrpf1zhn2] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.info-tooltip strong[b-5xrpf1zhn2] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.info-tooltip p[b-5xrpf1zhn2] {
    font-size: 0.8rem;
    color: #4b5563;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.info-tooltip ul[b-5xrpf1zhn2] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.info-tooltip ul li[b-5xrpf1zhn2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.info-tooltip ul li i[b-5xrpf1zhn2] {
    flex-shrink: 0;
    width: 16px;
    font-size: 0.7rem;
    margin-top: 2px;
    color: #6b7280;
}

.info-tooltip ul li strong[b-5xrpf1zhn2] {
    display: inline;
    font-size: inherit;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
    border: none;
}

.info-tooltip .tooltip-note[b-5xrpf1zhn2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: #6b7280;
    background: #f9fafb;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    margin: 0.5rem 0 0 0;
}

.info-tooltip .tooltip-note i[b-5xrpf1zhn2] {
    flex-shrink: 0;
    font-size: 0.65rem;
    margin-top: 2px;
    color: #9ca3af;
}

.chart-body[b-5xrpf1zhn2] {
    padding: 1rem;
}

/* ============================================================================
   CHART CONTROLS
   IMPLICATION: Provides school selector for comparing individual schools to trust
   ============================================================================ */
.chart-controls[b-5xrpf1zhn2] {
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}

.chart-control-label[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #374151;
}

.chart-control-label span[b-5xrpf1zhn2] {
    font-weight: 500;
}

.chart-select[b-5xrpf1zhn2] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #1f2937;
    background: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    appearance: none;
    cursor: pointer;
    min-width: 200px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chart-select:hover[b-5xrpf1zhn2] {
    border-color: #9ca3af;
}

.chart-select:focus[b-5xrpf1zhn2] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================================================
   MARGE SECTION
   ============================================================================ */
.marge-section[b-5xrpf1zhn2] {
    position: sticky;
    top: 80px;
    height: fit-content;
}

.marge-panel[b-5xrpf1zhn2] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.marge-header[b-5xrpf1zhn2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.marge-header-left[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.marge-header-left h3[b-5xrpf1zhn2] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.marge-icon[b-5xrpf1zhn2] {
    font-size: 1.125rem;
}

.marge-refresh-btn[b-5xrpf1zhn2] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.marge-refresh-btn:hover:not(:disabled)[b-5xrpf1zhn2] {
    background: rgba(255, 255, 255, 0.3);
}

.marge-refresh-btn:disabled[b-5xrpf1zhn2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.marge-body[b-5xrpf1zhn2] {
    padding: 1.25rem;
}

/* Loading state */
.marge-loading[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #6b7280;
}

/* Prompt state */
.marge-prompt[b-5xrpf1zhn2] {
    text-align: center;
    padding: 1.5rem;
}

.marge-prompt p[b-5xrpf1zhn2] {
    color: #6b7280;
    margin: 0 0 1rem 0;
}

.generate-btn[b-5xrpf1zhn2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.generate-btn:hover[b-5xrpf1zhn2] {
    background: #059669;
}

/* Narrative display */
.marge-narrative[b-5xrpf1zhn2] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.marge-narrative p[b-5xrpf1zhn2] {
    margin: 0 0 0.75rem 0;
}

.marge-narrative p:last-child[b-5xrpf1zhn2] {
    margin-bottom: 0;
}

.marge-narrative strong[b-5xrpf1zhn2] {
    color: #1a1a1a;
}

/* Quick questions */
.marge-questions[b-5xrpf1zhn2] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.questions-label[b-5xrpf1zhn2] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.question-buttons[b-5xrpf1zhn2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.question-btn[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.question-btn:hover:not(:disabled)[b-5xrpf1zhn2] {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.question-btn:disabled[b-5xrpf1zhn2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.question-btn i[b-5xrpf1zhn2] {
    font-size: 0.65rem;
    color: #6b7280;
}

/* Custom question input */
.marge-input-area[b-5xrpf1zhn2] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.marge-input[b-5xrpf1zhn2] {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.marge-input:focus[b-5xrpf1zhn2] {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.marge-input:disabled[b-5xrpf1zhn2] {
    background: #f9fafb;
    cursor: not-allowed;
}

.send-btn[b-5xrpf1zhn2] {
    padding: 0.625rem 0.875rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.send-btn:hover:not(:disabled)[b-5xrpf1zhn2] {
    background: #059669;
}

.send-btn:disabled[b-5xrpf1zhn2] {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Error state */
.marge-error[b-5xrpf1zhn2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.8rem;
    margin-top: 1rem;
}

.marge-error i[b-5xrpf1zhn2] {
    color: #dc2626;
}

/* Footer */
.marge-footer[b-5xrpf1zhn2] {
    padding: 0.75rem 1.25rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    font-size: 0.7rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */
@media (max-width: 1200px) {
    .detail-layout[b-5xrpf1zhn2] {
        grid-template-columns: 1fr;
    }

    .marge-section[b-5xrpf1zhn2] {
        position: static;
    }
}

@media (max-width: 768px) {
    .page-header[b-5xrpf1zhn2] {
        padding: 1rem;
    }

    .header-content[b-5xrpf1zhn2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-left[b-5xrpf1zhn2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .page-content[b-5xrpf1zhn2] {
        padding: 1rem;
    }

    .insight-summary-card[b-5xrpf1zhn2] {
        flex-direction: column;
        gap: 1rem;
    }

    .summary-icon[b-5xrpf1zhn2] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .summary-meta[b-5xrpf1zhn2] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .chart-body[b-5xrpf1zhn2] {
        padding: 0.5rem;
    }

    .question-buttons[b-5xrpf1zhn2] {
        flex-direction: column;
    }

    .question-btn[b-5xrpf1zhn2] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title[b-5xrpf1zhn2] {
        font-size: 1.25rem;
    }

    .back-button span[b-5xrpf1zhn2] {
        display: none;
    }

    .summary-headline[b-5xrpf1zhn2] {
        font-size: 1.1rem;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/MarginalGains/InsightsLanding.razor.rz.scp.css */
/*
    InsightsLanding.razor.css
    PURPOSE: Styles for the redesigned Marginal Gains Insights Landing page
    IMPLICATION: Scoped CSS file per CLAUDE.md - no inline styles in Razor
    IMPLICATION: Compact card design for dense dashboard layout
*/

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */
.page-container[b-rnsezqbcpc] {
    min-height: 100vh;
    background: #f5f7fa;
}

.page-content[b-rnsezqbcpc] {
    padding: 1.5rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* ============================================================================
   HEADER - LAST UPDATED
   ============================================================================ */
.last-updated[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

/* ============================================================================
   KPI SUB-HEADER ROW
   PURPOSE: Display key metrics in a horizontal row below the header
   IMPLICATION: Must fit all 6 KPIs on screen without horizontal scroll
   ============================================================================ */
.kpi-subheader[b-rnsezqbcpc] {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
}

.kpi-row[b-rnsezqbcpc] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
    margin: 0 auto;
    min-width: min-content;
}

.kpi-tile[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    min-width: 120px;
    max-width: 180px;
    flex: 1 1 auto;
    transition: all 0.2s ease;
}

.kpi-tile:hover[b-rnsezqbcpc] {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.kpi-icon[b-rnsezqbcpc] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* KPI Icon Colors - Unified brand blue for cleaner visual hierarchy */
/* IMPLICATION: All KPIs use same color to reduce visual noise; numbers tell the story */
.kpi-cohort .kpi-icon[b-rnsezqbcpc],
.kpi-attendance .kpi-icon[b-rnsezqbcpc],
.kpi-absence .kpi-icon[b-rnsezqbcpc],
.kpi-suspensions .kpi-icon[b-rnsezqbcpc],
.kpi-pp .kpi-icon[b-rnsezqbcpc],
.kpi-send .kpi-icon[b-rnsezqbcpc] {
    background: #dbeafe;
    color: #2563eb;
}

.kpi-content[b-rnsezqbcpc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.kpi-value[b-rnsezqbcpc] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    white-space: nowrap;
}

.kpi-label[b-rnsezqbcpc] {
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 500;
    white-space: nowrap;
}

.kpi-change[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.kpi-change.positive[b-rnsezqbcpc] {
    background: #d1fae5;
    color: #059669;
}

.kpi-change.negative[b-rnsezqbcpc] {
    background: #fee2e2;
    color: #dc2626;
}

/* ============================================================================
   LOADING AND EMPTY STATES
   ============================================================================ */
.loading-state[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    font-size: 1.1rem;
    color: #6c757d;
}

.loading-state i[b-rnsezqbcpc] {
    font-size: 1.5rem;
}

.empty-state[b-rnsezqbcpc] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state i[b-rnsezqbcpc] {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state h3[b-rnsezqbcpc] {
    margin: 0 0 0.5rem 0;
    color: #1a1a1a;
}

.empty-state p[b-rnsezqbcpc] {
    margin: 0;
    color: #6c757d;
}

/* ============================================================================
   DASHBOARD THREE-COLUMN LAYOUT
   PURPOSE: Three columns - Celebrate | Equity Gaps | Focus
   IMPLICATION: Fits all content on screen without overflow
   ============================================================================ */
.dashboard-three-col[b-rnsezqbcpc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .dashboard-three-col[b-rnsezqbcpc] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .dashboard-three-col[b-rnsezqbcpc] {
        grid-template-columns: 1fr;
    }
}

/* Section content as vertical stack */
.section-content-stack[b-rnsezqbcpc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.section-content-stack[b-rnsezqbcpc]::-webkit-scrollbar {
    width: 4px;
}

.section-content-stack[b-rnsezqbcpc]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

/* Section themes - Semantic colors for clear visual hierarchy */
/* IMPLICATION: Green=celebrate, Amber=watch/equity gaps, Red=focus/concern */
.celebrate-section[b-rnsezqbcpc] {
    border-top: 3px solid #10b981;
}

.equity-section[b-rnsezqbcpc] {
    border-top: 3px solid #f59e0b;
}

.focus-section[b-rnsezqbcpc] {
    border-top: 3px solid #ef4444;
}

/* ============================================================================
   DASHBOARD SECTIONS
   PURPOSE: Individual section containers for grouped insights
   ============================================================================ */
.dashboard-section[b-rnsezqbcpc] {
    background: white;
    border-radius: 10px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Compact section header for new layout */
.section-header-compact[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.section-icon-small[b-rnsezqbcpc] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.section-title-small[b-rnsezqbcpc] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
}

.section-count-small[b-rnsezqbcpc] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.section-count-small.warning[b-rnsezqbcpc] {
    color: #dc2626;
    background: #fef2f2;
}

/* ============================================================================
   INFO TOOLTIP
   PURPOSE: Hover tooltips explaining each section
   IMPLICATION: Provides context for users about what each section contains
   ============================================================================ */
.info-tooltip-container[b-rnsezqbcpc] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0.5rem;
}

.info-icon[b-rnsezqbcpc] {
    font-size: 0.8rem;
    color: #9ca3af;
    cursor: help;
    transition: color 0.2s ease;
}

.info-icon:hover[b-rnsezqbcpc] {
    color: #6b7280;
}

.info-tooltip[b-rnsezqbcpc] {
    position: absolute;
    top: calc(100% + 8px);
    right: -10px;
    width: 320px;
    padding: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.info-tooltip[b-rnsezqbcpc]::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

.info-tooltip-container:hover .info-tooltip[b-rnsezqbcpc] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.info-tooltip strong[b-rnsezqbcpc] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.info-tooltip p[b-rnsezqbcpc] {
    font-size: 0.8rem;
    color: #4b5563;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.info-tooltip ul[b-rnsezqbcpc] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.info-tooltip ul li[b-rnsezqbcpc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.info-tooltip ul li i[b-rnsezqbcpc] {
    flex-shrink: 0;
    width: 16px;
    font-size: 0.7rem;
    margin-top: 2px;
    color: #6b7280;
}

.info-tooltip ul li strong[b-rnsezqbcpc] {
    display: inline;
    font-size: inherit;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
    border: none;
}

.info-tooltip .tooltip-note[b-rnsezqbcpc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: #6b7280;
    background: #f9fafb;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    margin: 0.5rem 0 0 0;
}

.info-tooltip .tooltip-note i[b-rnsezqbcpc] {
    flex-shrink: 0;
    font-size: 0.65rem;
    margin-top: 2px;
    color: #9ca3af;
}

/* Responsive tooltip positioning */
@media (max-width: 768px) {
    .info-tooltip[b-rnsezqbcpc] {
        width: 280px;
        right: -50px;
    }

    .info-tooltip[b-rnsezqbcpc]::before {
        right: 54px;
    }
}

@media (max-width: 480px) {
    .info-tooltip[b-rnsezqbcpc] {
        width: 260px;
        right: -80px;
    }

    .info-tooltip[b-rnsezqbcpc]::before {
        right: 84px;
    }
}

/* Legacy section header (kept for backwards compatibility) */
.section-header[b-rnsezqbcpc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.section-title-group[b-rnsezqbcpc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.section-icon[b-rnsezqbcpc] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.section-title[b-rnsezqbcpc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.section-subtitle[b-rnsezqbcpc] {
    margin: 0.125rem 0 0 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.section-count[b-rnsezqbcpc] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    min-width: 36px;
    text-align: center;
}

.section-count.warning[b-rnsezqbcpc] {
    color: #dc2626;
    background: #fef2f2;
}

/* Section Color Themes - Semantic colors */
/* IMPLICATION: Consistent green/amber/red palette across sections */
.wins-section[b-rnsezqbcpc] { border-top: 3px solid #10b981; }
.wins-icon[b-rnsezqbcpc] { background: #d1fae5; color: #059669; }

.equity-icon[b-rnsezqbcpc] { background: #fef3c7; color: #d97706; }

.movers-up-section[b-rnsezqbcpc] { border-top: 3px solid #10b981; }
.movers-up-icon[b-rnsezqbcpc] { background: #d1fae5; color: #059669; }

.movers-down-section[b-rnsezqbcpc] { border-top: 3px solid #ef4444; }
.movers-down-icon[b-rnsezqbcpc] { background: #fee2e2; color: #dc2626; }

.concerns-section[b-rnsezqbcpc] { border-top: 3px solid #ef4444; }
.concerns-icon[b-rnsezqbcpc] { background: #fee2e2; color: #dc2626; }

/* ============================================================================
   HORIZONTAL CARDS LAYOUT
   PURPOSE: Horizontal scrolling card container for compact sections
   ============================================================================ */
.horizontal-cards[b-rnsezqbcpc] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.horizontal-cards[b-rnsezqbcpc]::-webkit-scrollbar {
    height: 4px;
}

.horizontal-cards[b-rnsezqbcpc]::-webkit-scrollbar-track {
    background: transparent;
}

.horizontal-cards[b-rnsezqbcpc]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

/* Make compact cards fixed width in horizontal layout */
.horizontal-cards[b-rnsezqbcpc]  .compact-card {
    flex: 0 0 auto;
    width: 200px;
    min-width: 200px;
}

.empty-inline[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.75rem;
    white-space: nowrap;
}

.empty-inline i[b-rnsezqbcpc] {
    color: #9ca3af;
}

/* ============================================================================
   MINI MOVER CARDS
   PURPOSE: Compact cards for school movers in vertical stack
   ============================================================================ */
.mini-mover[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.mini-mover:hover[b-rnsezqbcpc] {
    background: white;
    border-color: #d1d5db;
}

/* Mini mover cards - subtle left border, section provides context */
.mini-mover.mover-up[b-rnsezqbcpc] {
    border-left: 2px solid #e5e7eb;
}

.mini-mover.mover-down[b-rnsezqbcpc] {
    border-left: 2px solid #e5e7eb;
}

.mini-mover-icon[b-rnsezqbcpc] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* Mini mover icons - neutral styling */
.mover-up .mini-mover-icon[b-rnsezqbcpc],
.mover-down .mini-mover-icon[b-rnsezqbcpc] {
    background: #f3f4f6;
    color: #6b7280;
}

.mini-mover-content[b-rnsezqbcpc] {
    flex: 1;
    min-width: 0;
}

.mini-mover-name[b-rnsezqbcpc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-mover-detail[b-rnsezqbcpc] {
    font-size: 0.65rem;
    color: #6b7280;
}

.mini-mover-change[b-rnsezqbcpc] {
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mini-mover-change.positive[b-rnsezqbcpc] {
    color: #10b981;
}

.mini-mover-change.negative[b-rnsezqbcpc] {
    color: #dc2626;
}

/* Legacy grid layout (kept for backwards compatibility) */
.compact-cards-grid[b-rnsezqbcpc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

@media (max-width: 768px) {
    .compact-cards-grid[b-rnsezqbcpc] {
        grid-template-columns: 1fr;
    }
}

.empty-section-message[b-rnsezqbcpc] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.85rem;
}

.empty-section-message i[b-rnsezqbcpc] {
    font-size: 1.1rem;
    color: #9ca3af;
}

/* ============================================================================
   COMPACT INSIGHT CARD
   PURPOSE: Smaller insight cards for dense dashboard view
   ============================================================================ */
[b-rnsezqbcpc] .compact-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 52px;
}

[b-rnsezqbcpc] .compact-card:hover {
    background: white;
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Compact card left borders - subtle indicators that inherit section context */
/* IMPLICATION: Removed heavy colored borders; section container provides context */
[b-rnsezqbcpc] .compact-card-win,
[b-rnsezqbcpc] .compact-card-concern,
[b-rnsezqbcpc] .compact-card-kpi,
[b-rnsezqbcpc] .compact-card-equity {
    border-left: 2px solid #e5e7eb;
}

[b-rnsezqbcpc] .compact-card-left {
    flex-shrink: 0;
}

[b-rnsezqbcpc] .compact-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Item icons - Simplified neutral styling */
/* IMPLICATION: Section border provides context, icons are subtle/neutral */
[b-rnsezqbcpc] .icon-win,
[b-rnsezqbcpc] .icon-concern,
[b-rnsezqbcpc] .icon-kpi,
[b-rnsezqbcpc] .icon-equity,
[b-rnsezqbcpc] .icon-default {
    background: #f3f4f6;
    color: #6b7280;
}

[b-rnsezqbcpc] .compact-card-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

[b-rnsezqbcpc] .compact-headline {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-rnsezqbcpc] .compact-entity {
    font-size: 0.7rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-rnsezqbcpc] .compact-card-right {
    flex-shrink: 0;
    text-align: right;
}

[b-rnsezqbcpc] .compact-metric {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
}

[b-rnsezqbcpc] .compact-change {
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
}

[b-rnsezqbcpc] .change-positive { color: #10b981; }
[b-rnsezqbcpc] .change-negative { color: #ef4444; }

/* ============================================================================
   MOVERS CARDS
   PURPOSE: School improvement/decline cards
   ============================================================================ */
.movers-cards-grid[b-rnsezqbcpc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mover-card[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.mover-card:hover[b-rnsezqbcpc] {
    background: white;
    border-color: #d1d5db;
}

/* Mover cards - subtle borders, section provides context */
.mover-up[b-rnsezqbcpc] {
    border-left: 2px solid #e5e7eb;
}

.mover-down[b-rnsezqbcpc] {
    border-left: 2px solid #e5e7eb;
}

.mover-rank[b-rnsezqbcpc] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Mover rank icons - neutral styling */
.mover-up .mover-rank[b-rnsezqbcpc],
.mover-down .mover-rank[b-rnsezqbcpc] {
    background: #f3f4f6;
    color: #6b7280;
}

.mover-content[b-rnsezqbcpc] {
    flex: 1;
    min-width: 0;
}

.mover-name[b-rnsezqbcpc] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mover-metric[b-rnsezqbcpc] {
    font-size: 0.7rem;
    color: #6b7280;
}

.mover-change[b-rnsezqbcpc] {
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mover-change.positive[b-rnsezqbcpc] {
    color: #10b981;
}

.mover-change.negative[b-rnsezqbcpc] {
    color: #dc2626;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Large screens - all KPIs in one row */
@media (min-width: 1200px) {
    .kpi-row[b-rnsezqbcpc] {
        flex-wrap: nowrap;
    }

    .kpi-tile[b-rnsezqbcpc] {
        flex: 1 1 0;
        min-width: 0;
        max-width: 200px;
    }
}

/* Medium screens - allow wrapping to 2 rows */
@media (max-width: 1199px) and (min-width: 769px) {
    .kpi-row[b-rnsezqbcpc] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .kpi-tile[b-rnsezqbcpc] {
        flex: 0 0 auto;
        min-width: 140px;
        max-width: 180px;
    }
}

/* Small screens - compact tiles, allow scroll */
@media (max-width: 768px) {
    .page-content[b-rnsezqbcpc] {
        padding: 1rem;
    }

    .kpi-subheader[b-rnsezqbcpc] {
        padding: 0.5rem 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kpi-row[b-rnsezqbcpc] {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.375rem;
    }

    .kpi-tile[b-rnsezqbcpc] {
        flex: 0 0 auto;
        min-width: 100px;
        max-width: 140px;
        padding: 0.375rem 0.5rem;
    }

    .kpi-icon[b-rnsezqbcpc] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .kpi-value[b-rnsezqbcpc] {
        font-size: 0.95rem;
    }

    .kpi-label[b-rnsezqbcpc] {
        font-size: 0.6rem;
    }

    .kpi-change[b-rnsezqbcpc] {
        font-size: 0.6rem;
        padding: 0.125rem 0.25rem;
    }

    .dashboard-section[b-rnsezqbcpc] {
        padding: 1rem;
    }

    .section-icon[b-rnsezqbcpc] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .kpi-tile[b-rnsezqbcpc] {
        min-width: 90px;
        max-width: 120px;
    }

    .kpi-value[b-rnsezqbcpc] {
        font-size: 0.85rem;
    }
}

/* ============================================================================
   ASK MARGE BUTTON
   PURPOSE: Floating action button to open AI assistant
   IMPLICATION: Consistent with StrategyDashboard styling
   ============================================================================ */
.ask-marge-button[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.ask-marge-button:hover:not(:disabled)[b-rnsezqbcpc] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.ask-marge-button:disabled[b-rnsezqbcpc] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.ask-marge-button.active[b-rnsezqbcpc] {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ask-marge-button i[b-rnsezqbcpc] {
    font-size: 0.9rem;
}

/* ============================================================================
   ASK MARGE PANEL
   PURPOSE: Collapsible panel for AI chat interface
   IMPLICATION: Provides clear visual separation from insights content
   ============================================================================ */
.marge-panel[b-rnsezqbcpc] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.marge-panel-header[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.marge-header-left[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marge-header-left h3[b-rnsezqbcpc] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.marge-icon[b-rnsezqbcpc] {
    font-size: 1.25rem;
}

.marge-close-btn[b-rnsezqbcpc] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.marge-close-btn:hover[b-rnsezqbcpc] {
    background: rgba(255, 255, 255, 0.3);
}

.marge-panel-body[b-rnsezqbcpc] {
    padding: 1.25rem;
}

/* Quick Questions */
.quick-questions[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.quick-label[b-rnsezqbcpc] {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.quick-btn[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover[b-rnsezqbcpc] {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.quick-btn i[b-rnsezqbcpc] {
    font-size: 0.7rem;
    color: #6b7280;
}

/* Input Container */
.marge-input-container[b-rnsezqbcpc] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.marge-input[b-rnsezqbcpc] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.marge-input:focus[b-rnsezqbcpc] {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.marge-input:disabled[b-rnsezqbcpc] {
    background: #f9fafb;
    cursor: not-allowed;
}

.marge-send-btn[b-rnsezqbcpc] {
    padding: 0.75rem 1rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
}

.marge-send-btn:hover:not(:disabled)[b-rnsezqbcpc] {
    background: #059669;
}

.marge-send-btn:disabled[b-rnsezqbcpc] {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Response Area */
.marge-response[b-rnsezqbcpc] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.response-header[b-rnsezqbcpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.response-header i[b-rnsezqbcpc] {
    color: #10b981;
}

.response-header span[b-rnsezqbcpc] {
    flex: 1;
}

.response-action-btn[b-rnsezqbcpc] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.response-action-btn:hover[b-rnsezqbcpc] {
    color: #6b7280;
}

.response-content[b-rnsezqbcpc] {
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #374151;
    max-height: 400px;
    overflow-y: auto;
}

.response-footer[b-rnsezqbcpc] {
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Error State */
.marge-error[b-rnsezqbcpc] {
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.marge-error i[b-rnsezqbcpc] {
    color: #dc2626;
}

/* Responsive adjustments for Marge panel */
@media (max-width: 768px) {
    .marge-panel-header[b-rnsezqbcpc] {
        padding: 0.875rem 1rem;
    }

    .marge-header-left h3[b-rnsezqbcpc] {
        font-size: 1rem;
    }

    .marge-panel-body[b-rnsezqbcpc] {
        padding: 1rem;
    }

    .quick-questions[b-rnsezqbcpc] {
        flex-direction: column;
        align-items: flex-start;
    }

    .quick-btn[b-rnsezqbcpc] {
        font-size: 0.7rem;
    }

    .marge-input[b-rnsezqbcpc] {
        font-size: 0.85rem;
        padding: 0.625rem 0.875rem;
    }

    .response-content[b-rnsezqbcpc] {
        max-height: 300px;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/MarginalGains/KpiDetail.razor.rz.scp.css */
/*
 * KpiDetail scoped styles
 *
 * PURPOSE: Page-level layout for KpiDetail that doesn't belong in the
 * shared modern-page-header / gov-v2 CSS. Limited to the "Linked to
 * objectives:" chip row that sits between the page sub-header and the
 * Performance Data section.
 *
 * IMPLICATION: Removing this file makes the linked-objective chip row
 * cling to the page edges and lose its visual separation from the
 * Performance Data card below it. The gov-v2-btn chrome on each chip
 * comes from /wwwroot/css/governance-v2/layout.css — don't duplicate it
 * here.
 */

.kpi-detail-linked-objectives[b-l8ex30w32h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 2rem 0;
    margin-bottom: 0.5rem;
}

.kpi-detail-linked-label[b-l8ex30w32h] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
    margin-right: 0.25rem;
}

@media (max-width: 768px) {
    .kpi-detail-linked-objectives[b-l8ex30w32h] {
        padding: 0.75rem 1rem 0;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/MarginalGains/ManageAIPs.razor.rz.scp.css */
.dashboard-container[b-sqnunly2bs] {
    min-height: 100vh;
    background-color: #f8f9fa;
}

.breadcrumb-navigation[b-sqnunly2bs] {
    padding: 1rem 2rem;
    background: white;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.breadcrumb-back[b-sqnunly2bs] {
    background: none;
    border: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.breadcrumb-back:hover[b-sqnunly2bs] {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.breadcrumb-text[b-sqnunly2bs] {
    color: #6c757d;
    font-size: 0.9rem;
}

.page-header[b-sqnunly2bs] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h1[b-sqnunly2bs] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
}

.page-header p[b-sqnunly2bs] {
    margin: 0;
    color: #666;
}

.filters-card[b-sqnunly2bs] {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 0 2rem 2rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-row[b-sqnunly2bs] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-sqnunly2bs] {
    flex: 1;
    min-width: 200px;
}

.filter-group label[b-sqnunly2bs] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.loading-container[b-sqnunly2bs] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-container p[b-sqnunly2bs] {
    margin-top: 1rem;
    color: #666;
}

.empty-state[b-sqnunly2bs] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
    margin: 0 2rem;
}

.empty-state i[b-sqnunly2bs] {
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state h3[b-sqnunly2bs] {
    margin: 1rem 0 0.5rem 0;
    color: #333;
}

.empty-state p[b-sqnunly2bs] {
    color: #666;
    margin-bottom: 1.5rem;
}

.aips-grid[b-sqnunly2bs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    padding: 0 2rem 2rem 2rem;
}

.aip-card[b-sqnunly2bs] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.aip-card:hover[b-sqnunly2bs] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.aip-card-header[b-sqnunly2bs] {
    padding: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.aip-card-header h3[b-sqnunly2bs] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.academic-year[b-sqnunly2bs] {
    display: inline-block;
    background: #e7f3ff;
    color: #007bff;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge[b-sqnunly2bs] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-draft[b-sqnunly2bs] {
    background: #fef3c7;
    color: #92400e;
}

.status-active[b-sqnunly2bs] {
    background: #d1fae5;
    color: #065f46;
}

.status-completed[b-sqnunly2bs] {
    background: #dbeafe;
    color: #1e40af;
}

.status-archived[b-sqnunly2bs] {
    background: #f3f4f6;
    color: #6b7280;
}

.aip-card-body[b-sqnunly2bs] {
    padding: 1.5rem;
    flex: 1;
}

.aip-stats[b-sqnunly2bs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat[b-sqnunly2bs] {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.stat i[b-sqnunly2bs] {
    font-size: 1.5rem;
    color: #007bff;
    margin-bottom: 0.5rem;
}

.stat-value[b-sqnunly2bs] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0.25rem 0;
}

.stat-label[b-sqnunly2bs] {
    display: block;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aip-meta[b-sqnunly2bs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meta-item[b-sqnunly2bs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.meta-item i[b-sqnunly2bs] {
    color: #adb5bd;
}

.aip-card-footer[b-sqnunly2bs] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 0.5rem;
}

.aip-card-footer .btn[b-sqnunly2bs] {
    flex: 1;
}

.btn[b-sqnunly2bs] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary[b-sqnunly2bs] {
    background: #007bff;
    color: white;
}

.btn-primary:hover[b-sqnunly2bs] {
    background: #0056b3;
}

.btn-outline-secondary[b-sqnunly2bs] {
    background: white;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.btn-outline-secondary:hover[b-sqnunly2bs] {
    background: #f8f9fa;
    border-color: #adb5bd;
}
/* _content/OEAI.Apps.SaaS/Pages/MarginalGains/StrategyDashboard.razor.rz.scp.css */
/*
 * StrategyDashboard scoped styles
 *
 * PURPOSE: Page-level layout that doesn't belong in the global modern-page-header
 * / gov-v2 CSS. The KPI count tiles (Aims / Objectives / KPIs / Overall achievement)
 * have moved out of the page header into the main content area per AB#1747
 * ("In governance v2 these sit in main page content rather than the subheader").
 * This file just gives them the right padding + spacing inside .page-content.
 *
 * IMPLICATION: Removing this file leaves the count tiles flush against the
 * left edge and touching the first body section; visually identical to the
 * old behaviour was that they sat in .header-filters-kpi-row, which had its
 * own padding. The tile chrome itself (.header-kpi-card) comes from
 * /wwwroot/css/modern-page-header.css — don't duplicate it here.
 */

/* .strategy-summary-tiles was removed when the KPI summary row migrated to
   the canonical .ds-kpi-card pattern (DESIGN_SYSTEM.md §KPI cards) — the
   shared .ds-kpi-row carries its own padding + responsive grid, so nothing
   page-scoped is required. */

/*
 * KPIs tab + Objectives tab grid (AB#1748 Stream 2 polish).
 *
 * PURPOSE: The KPIs tab can list 30–80 KPI cards grouped by aim. The
 * previous layout had no .cards-grid rule in CSS so the cards fell back
 * to inline block flow — vertical stack, no responsive columns. This
 * gives them a tight auto-fill grid sized for the new compact KpiCard
 * (~130px tall, 240px min-width), so a typical 1440px viewport shows
 * 5 cards per row instead of one.
 *
 * IMPLICATION: shared with ObjectiveCard inside the Objectives tab —
 * same grid, same minmax, so cards align visually whichever tab the
 * user lands on.
 */
.cards-grid[b-3t4340c5dj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.aim-section[b-3t4340c5dj] {
    margin-bottom: 1.75rem;
    /* No horizontal padding here — the .scrollable-grid parent (defined in
       the inline <style> on StrategyDashboard.razor) already supplies the
       2.5rem rhythm that matches .ds-kpi-row above. The previous 2.5rem
       on this rule stacked on top of the .scrollable-grid padding, giving
       a total 5rem inset that visibly pushed the aim sections in vs. the
       KPI summary tiles. The user flagged this misalignment repeatedly
       before we traced it to this double-padding. */
    padding: 0;
}

.aim-section-title[b-3t4340c5dj] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #063662;
}

/* Strip the .objective-list's own horizontal padding when it's nested
   inside an .aim-section on the Objectives tab. The .aim-section already
   provides the 2.5rem rhythm; double-padding pushes the rows in further
   than the heading + tiles above.
   IMPLICATION: This override is scoped to the .aim-section context only —
   on AimDetail.razor the .objective-list lives directly inside
   .page-content and keeps its own 2rem padding so it doesn't sit flush
   against the page edge. */
.aim-section .objective-list[b-3t4340c5dj] {
    padding: 0 0 1rem 0;
}

.scrollable-grid[b-3t4340c5dj] {
    /* Wrapper around the per-aim sections on the Objectives and KPIs tabs.
       Provides bottom padding so the last card has breathing room. */
    padding-bottom: 2rem;
}

@media (max-width: 640px) {
    .aim-section[b-3t4340c5dj] {
        padding: 0 1rem;
    }
}

/*
 * Marge analytics layout (AB#1748 Stream 4).
 *
 * PURPOSE: Hosts the <MargeReport> embed alongside the right-hand
 * <MargeAnalyticsChatPanel>. The .marge-insights-content class is the
 * canonical containment wrapper from AB#1603 — it carries position: relative
 * so the .ma-canvas (which Marge renders position: absolute; inset: 0)
 * doesn't escape the strategy-dashboard content area or render under the
 * chat panel. Without this rule the Marge canvas overflows on scroll and
 * sits beneath the chat panel rather than resizing as a flex sibling.
 *
 * The viewport-locked height matches the post-AB#1603 pattern used by
 * MargeReportHubPage; calc(100vh - 200px) leaves room for the page header,
 * sub-header and SubTabs row above.
 */
.strategy-marge-layout[b-3t4340c5dj] {
    display: flex;
    gap: 1rem;
    padding: 0 2rem 2rem;
    height: calc(100vh - 200px);
    /* position: relative comes from .marge-insights-content on the same
       element — the order of the two classes doesn't matter, but keeping
       the class name visible here documents the wiring. */
}

.strategy-marge-content[b-3t4340c5dj] {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    /* Collapse to a stacked layout on smaller screens so the chat panel
       doesn't squeeze the report below readability. */
    .strategy-marge-layout[b-3t4340c5dj] {
        flex-direction: column;
        height: auto;
    }
}

/*
 * Empty-state wrapper (AB#1748 Stream 2).
 *
 * PURPOSE: Gives the .gov-v2-empty card the same horizontal padding the
 * rest of the tab body uses so it lines up with the count tiles + content
 * grids above. Limits the card width on wide screens so the call-to-action
 * doesn't stretch across a 1600px viewport.
 *
 * IMPLICATION: Removing this wrapper leaves the empty card flush against
 * the left edge and stretches it to the full content area, both of which
 * read as ugly. The .gov-v2-empty chrome itself comes from
 * /wwwroot/css/governance-v2/visits.css — don't redefine it here.
 */
.strategy-empty-state-wrapper[b-3t4340c5dj] {
    padding: 1rem 2rem 2rem;
    max-width: 720px;
    margin: 0 auto;
}

[b-3t4340c5dj] .strategy-empty-state-wrapper .gov-v2-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--gov-v2-text-tertiary, #9ca3af);
    display: block;
}

[b-3t4340c5dj] .strategy-empty-state-wrapper .gov-v2-btn {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/*
 * Grouped-aims grid (AB#1748 Stream 2c).
 *
 * PURPOSE: Replaces the flat .progress-grid that rendered every aim in a
 * single uniform band. The new layout groups aims by RAG status so the
 * trust executive's eye lands on Off-track aims first, then At-risk,
 * then On-track, then Not-set — mirroring the Evidence Bank grouped
 * grid shipped in AB#1747.
 *
 * IMPLICATION: Removing this rule reverts to the previous flat grid via
 * the legacy .progress-grid (which still exists in
 * /wwwroot/css/governance-monitoring.css for other consumers).
 */
.aims-grouped-grid[b-3t4340c5dj] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 2rem 2rem;
}

.aims-grouped-grid__group[b-3t4340c5dj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aims-grouped-grid__heading[b-3t4340c5dj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Tight padding so the badge + count sit just above the cards. */
    padding: 0 0.25rem;
}

.aims-grouped-grid__count[b-3t4340c5dj] {
    color: #6b7280;
    font-size: 0.85rem;
}

.aims-grouped-grid__cards[b-3t4340c5dj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* AB#1748 design review — the Aims tab no longer groups cards by RAG
   status. .aims-grouped-grid__cards--flat reuses the responsive grid
   sizing but lives directly under .page-content with the same horizontal
   rhythm as the canonical .ds-kpi-row above (2.5rem) so the band aligns
   edge-to-edge with the KPI summary tiles. */
.aims-grouped-grid__cards--flat[b-3t4340c5dj] {
    padding: 0 2.5rem 2rem;
}

@media (max-width: 640px) {
    .aims-grouped-grid[b-3t4340c5dj] {
        padding: 0 1rem 1.5rem;
        gap: 1.5rem;
    }
}

/*
 * Legacy AI Strategy Summary generator styles (AB#1748 Marge tab).
 *
 * PURPOSE: Houses the "Generate / Regenerate" control row, error/stale banners,
 * loading spinner, and the collapsible result card for the legacy inline strategy
 * summary that runs while the Marge strategy/overview blueprint is being built.
 * Once the blueprint ships, this entire block (and the corresponding razor markup)
 * can be removed in one pass.
 *
 * IMPLICATION: Removing this block before removing the razor markup leaves the
 * summary section unstyled. Remove together.
 */

.legacy-summary-outer[b-3t4340c5dj] {
    padding: 0 2rem;
    margin-bottom: 1.5rem;
}

.legacy-summary-card[b-3t4340c5dj] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.legacy-summary-controls[b-3t4340c5dj] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.legacy-summary-type-field[b-3t4340c5dj] {
    flex: 1;
    min-width: 300px;
}

.legacy-summary-label[b-3t4340c5dj] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.875rem;
}

.legacy-summary-select[b-3t4340c5dj] {
    width: 100%;
    height: 38px;
}

.legacy-summary-btn-wrapper[b-3t4340c5dj] {
    display: flex;
    align-items: flex-end;
}

.legacy-summary-regen-btn[b-3t4340c5dj] {
    background-color: #10b981;
    border-color: #10b981;
    color: white;
    white-space: nowrap;
    height: 38px;
}

.legacy-summary-regen-btn:hover[b-3t4340c5dj] {
    background-color: #059669;
    border-color: #059669;
    color: white;
}

.legacy-summary-regen-btn--sm[b-3t4340c5dj] {
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
    height: auto;
}

.legacy-summary-spinner-icon[b-3t4340c5dj] {
    margin-right: 0.5rem;
}

.legacy-summary-error[b-3t4340c5dj] {
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    margin-bottom: 1rem;
    color: #991b1b;
}

.legacy-summary-stale-warning[b-3t4340c5dj] {
    padding: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    margin-bottom: 1rem;
    color: #92400e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.legacy-summary-generating[b-3t4340c5dj] {
    text-align: center;
    padding: 3rem 2rem;
    background: #f9fafb;
    border-radius: 8px;
}

.legacy-summary-generating-icon[b-3t4340c5dj] {
    font-size: 2rem;
    color: #2563eb;
}

.legacy-summary-generating-text[b-3t4340c5dj] {
    margin-top: 1rem;
    color: #666;
}

.legacy-summary-result[b-3t4340c5dj] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.legacy-summary-result-header[b-3t4340c5dj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.legacy-summary-result-title[b-3t4340c5dj] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.legacy-summary-chevron[b-3t4340c5dj] {
    color: #10b981;
}

.legacy-summary-result-actions[b-3t4340c5dj] {
    display: flex;
    gap: 0.5rem;
}

.legacy-summary-action-btn[b-3t4340c5dj] {
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
}

.legacy-summary-body[b-3t4340c5dj] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #1a1a1a;
}

.legacy-summary-footer[b-3t4340c5dj] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.legacy-summary-meta[b-3t4340c5dj] {
    margin: 0;
    color: #666;
    font-size: 0.875rem;
}

.legacy-summary-meta + .legacy-summary-meta[b-3t4340c5dj] {
    margin-top: 0.5rem;
}

.legacy-summary-collapsed-hint[b-3t4340c5dj] {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
}

/*
 * Aim-section toggle title (Objectives tab, AB#1748 §2c).
 *
 * PURPOSE: The aim-section heading doubles as a click target to expand/collapse
 * the objectives list below it. These classes extract the inline styles from
 * the razor template so the collapsible title is purely CSS-driven.
 *
 * IMPLICATION: Removing .aim-section-title--toggle reverts the title to its
 * static .aim-section-title appearance — no cursor or flex layout; the chevron
 * and count badge will flow inline without visual separation.
 */
.aim-section-title--toggle[b-3t4340c5dj] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Chevron icon inside the collapsible aim heading — rotates between right (collapsed)
   and down (expanded) via the fa-chevron-right / fa-chevron-down class toggle in markup. */
.aim-section-chevron[b-3t4340c5dj] {
    font-size: 0.9rem;
    color: #6b7280;
    min-width: 16px;
}

/* Objective count badge pushed to the trailing edge of the heading row. */
.aim-section-count[b-3t4340c5dj] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6b7280;
    margin-left: auto;
}
/* _content/OEAI.Apps.SaaS/Pages/MarginalGains/ViewAIP.razor.rz.scp.css */
.loading-container[b-qllunuyu9j], .error-container[b-qllunuyu9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.error-container i[b-qllunuyu9j] {
    color: #ffc107;
    margin-bottom: 1rem;
}

.error-container h3[b-qllunuyu9j] {
    margin: 1rem 0 0.5rem 0;
}

.error-container p[b-qllunuyu9j] {
    color: #666;
    margin-bottom: 1.5rem;
}

.aip-view-container[b-qllunuyu9j] {
    min-height: 100vh;
    background-color: #f8f9fa;
    padding-bottom: 3rem;
}

.aip-header[b-qllunuyu9j] {
    background: white;
    padding: 2rem;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-qllunuyu9j] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.btn-back[b-qllunuyu9j] {
    background: white;
    border: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back:hover[b-qllunuyu9j] {
    background: #f8f9fa;
}

.header-info h1[b-qllunuyu9j] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.header-meta[b-qllunuyu9j] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.badge-year[b-qllunuyu9j] {
    background: #e7f3ff;
    color: #007bff;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge[b-qllunuyu9j] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-draft[b-qllunuyu9j] { background: #fef3c7; color: #92400e; }
.status-active[b-qllunuyu9j] { background: #d1fae5; color: #065f46; }
.status-completed[b-qllunuyu9j] { background: #dbeafe; color: #1e40af; }
.status-archived[b-qllunuyu9j] { background: #f3f4f6; color: #6b7280; }

.header-actions[b-qllunuyu9j] {
    display: flex;
    gap: 0.5rem;
}

.summary-cards[b-qllunuyu9j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.summary-card[b-qllunuyu9j] {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    gap: 1rem;
    align-items: center;
}

.summary-card i[b-qllunuyu9j] {
    font-size: 2rem;
    color: #007bff;
}

.summary-value[b-qllunuyu9j] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.summary-label[b-qllunuyu9j] {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priorities-container[b-qllunuyu9j] {
    padding: 0 2rem;
}

.empty-state[b-qllunuyu9j] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 8px;
}

.empty-state i[b-qllunuyu9j] {
    color: #dee2e6;
    margin-bottom: 1rem;
}

.priority-card[b-qllunuyu9j] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.priority-header[b-qllunuyu9j] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.priority-title[b-qllunuyu9j] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.priority-number[b-qllunuyu9j] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 700;
}

.priority-title h3[b-qllunuyu9j] {
    margin: 0;
    font-size: 1.25rem;
}

.priority-actions[b-qllunuyu9j] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-qllunuyu9j], .btn-icon-small[b-qllunuyu9j] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-small[b-qllunuyu9j] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-icon:hover[b-qllunuyu9j], .btn-icon-small:hover[b-qllunuyu9j] {
    background: rgba(255, 255, 255, 0.3);
}

.btn-icon.danger[b-qllunuyu9j], .btn-icon-small.danger[b-qllunuyu9j] {
    background: rgba(220, 53, 69, 0.2);
}

.btn-icon.danger:hover[b-qllunuyu9j], .btn-icon-small.danger:hover[b-qllunuyu9j] {
    background: rgba(220, 53, 69, 0.4);
}

.priority-description[b-qllunuyu9j] {
    padding: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    color: #495057;
}

.milestones-grid[b-qllunuyu9j] {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.milestone[b-qllunuyu9j] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.milestone strong[b-qllunuyu9j] {
    color: #007bff;
    margin-right: 0.5rem;
}

.targets-section[b-qllunuyu9j] {
    padding: 1.5rem;
}

.targets-section h4[b-qllunuyu9j] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #495057;
}

.target-card[b-qllunuyu9j] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid #007bff;
}

.target-header[b-qllunuyu9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.target-number[b-qllunuyu9j] {
    background: #007bff;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.target-actions[b-qllunuyu9j] {
    display: flex;
    gap: 0.25rem;
}

.rag-status-row[b-qllunuyu9j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.rag-item[b-qllunuyu9j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.rag-label[b-qllunuyu9j] {
    font-weight: 600;
    color: #495057;
}

.rag-badge[b-qllunuyu9j] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rag-red[b-qllunuyu9j] { background: #fee2e2; color: #991b1b; }
.rag-amber[b-qllunuyu9j] { background: #fef3c7; color: #92400e; }
.rag-green[b-qllunuyu9j] { background: #d1fae5; color: #065f46; }
.rag-none[b-qllunuyu9j] { background: #f3f4f6; color: #6b7280; }

.actions-list[b-qllunuyu9j] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

.actions-list strong[b-qllunuyu9j] {
    display: block;
    margin-bottom: 0.75rem;
    color: #495057;
    font-size: 0.9rem;
}

.action-item[b-qllunuyu9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: white;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border-left: 3px solid #6c757d;
}

.action-item.status-completed[b-qllunuyu9j] {
    border-left-color: #28a745;
}

.action-item.status-inprogress[b-qllunuyu9j] {
    border-left-color: #ffc107;
}

.action-content[b-qllunuyu9j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.action-meta[b-qllunuyu9j] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.action-meta i[b-qllunuyu9j] {
    margin-right: 0.25rem;
}

.action-buttons[b-qllunuyu9j] {
    display: flex;
    gap: 0.25rem;
}

.btn[b-qllunuyu9j] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-qllunuyu9j] {
    background: #007bff;
    color: white;
}

.btn-primary:hover[b-qllunuyu9j] {
    background: #0056b3;
}

.btn-outline-primary[b-qllunuyu9j] {
    background: white;
    color: #007bff;
    border: 1px solid #007bff;
}

.btn-outline-primary:hover[b-qllunuyu9j] {
    background: #007bff;
    color: white;
}

.dialog-content[b-qllunuyu9j] {
    padding: 1rem 0;
}

.dialog-content label[b-qllunuyu9j] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
/* _content/OEAI.Apps.SaaS/Pages/Navigation/Components/NavigationTreeItem.razor.rz.scp.css */
/* COMMENT: NavigationTreeItem component styles */
/* PURPOSE: Tree item layout with drag-drop, icons, and actions */

/* ==========================================================================
   Tree Item Container
   ========================================================================== */

.tree-item[b-dzwlj164ge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    border-left: 3px solid transparent;
    position: relative;
}

/* ==========================================================================
   Indentation and Spacing
   ========================================================================== */

.tree-indent[b-dzwlj164ge] {
    width: 1.5rem;
    flex-shrink: 0;
}

.expand-spacer[b-dzwlj164ge] {
    width: 20px;
    flex-shrink: 0;
}

.tree-item:hover[b-dzwlj164ge] {
    background: #f8fafc;
}

.tree-item.selected[b-dzwlj164ge] {
    background: #eff6ff;
    border-left-color: #0066cc;
}

.tree-item.has-changes[b-dzwlj164ge] {
    background: #fef3c7;
}

.tree-item.navigation[b-dzwlj164ge] {
    font-weight: 600;
}

.tree-item.content[b-dzwlj164ge] {
    margin-left: 1.5rem;
    font-weight: 400;
}

/* ==========================================================================
   Drag Handle
   ========================================================================== */

.drag-handle[b-dzwlj164ge] {
    color: #94a3b8;
    cursor: grab;
    padding: 0.25rem;
}

.drag-handle:hover[b-dzwlj164ge] {
    color: #475569;
}

.drag-handle:active[b-dzwlj164ge] {
    cursor: grabbing;
}

/* ==========================================================================
   Expand/Collapse Toggle
   ========================================================================== */

.expand-toggle[b-dzwlj164ge] {
    background: none;
    border: none;
    padding: 0.25rem;
    color: #64748b;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.expand-toggle:hover[b-dzwlj164ge] {
    color: #0066cc;
}

.expand-toggle.expanded[b-dzwlj164ge] {
    transform: rotate(90deg);
}

/* ==========================================================================
   Item Icon
   ========================================================================== */

.item-icon[b-dzwlj164ge] {
    color: #0066cc;
    font-size: 1rem;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tree-item.content .item-icon[b-dzwlj164ge] {
    color: #64748b;
}

/* ==========================================================================
   Item Title
   ========================================================================== */

.item-title[b-dzwlj164ge] {
    flex: 1;
    font-size: 0.9rem;
    color: #1e293b;
}

.tree-item.content .item-title[b-dzwlj164ge] {
    font-size: 0.85rem;
    color: #475569;
}

.inline-edit-input[b-dzwlj164ge] {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 2px solid #0066cc;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.inline-edit-input:focus[b-dzwlj164ge] {
    border-color: #0052a3;
}

/* ==========================================================================
   Status Indicators
   ========================================================================== */

.status-indicator[b-dzwlj164ge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot[b-dzwlj164ge] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.active[b-dzwlj164ge] {
    background: #22c55e;
}

.status-dot.inactive[b-dzwlj164ge] {
    background: #ef4444;
}

.status-indicators[b-dzwlj164ge] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.status-badge[b-dzwlj164ge] {
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.inactive[b-dzwlj164ge] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.secured[b-dzwlj164ge] {
    background: #dbeafe;
    color: #1e40af;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.item-actions[b-dzwlj164ge] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tree-item:hover .item-actions[b-dzwlj164ge] {
    opacity: 1;
}

.action-btn[b-dzwlj164ge] {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.action-btn:hover[b-dzwlj164ge] {
    background: #e2e8f0;
    color: #0066cc;
}

.action-btn.danger:hover[b-dzwlj164ge] {
    background: #fee2e2;
    color: #dc2626;
}

/* ==========================================================================
   Tree Children
   ========================================================================== */

.tree-children[b-dzwlj164ge] {
    margin-left: 1rem;
    border-left: 2px solid #e2e8f0;
    padding-left: 0.5rem;
}

/* ==========================================================================
   Empty Drop Zone
   ========================================================================== */

.empty-drop-zone[b-dzwlj164ge] {
    margin-left: 2rem;
    padding: 1rem;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    color: #94a3b8;
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.empty-drop-zone:hover[b-dzwlj164ge],
.empty-drop-zone.drag-over[b-dzwlj164ge] {
    border-color: #0066cc;
    background: #eff6ff;
    color: #0066cc;
}

/* ==========================================================================
   Drag States
   ========================================================================== */

.tree-item.dragging[b-dzwlj164ge] {
    opacity: 0.5;
}

.tree-item.drag-over[b-dzwlj164ge] {
    background: #eff6ff;
    border-left-color: #0066cc;
}

/* ==========================================================================
   Visibility Pill (AB#1747 / UX-CONSISTENCY-REVIEW.md §11.5)
   At-a-glance signal of whether a tree item is reachable on the live nav,
   so admins can spot the "active but no group visibility" trap without
   clicking into each item.
   ========================================================================== */

.visibility-pill[b-dzwlj164ge] {
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.visibility-pill--visible[b-dzwlj164ge] {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.visibility-pill--inactive[b-dzwlj164ge] {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.visibility-pill--no-groups[b-dzwlj164ge] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}
/* _content/OEAI.Apps.SaaS/Pages/Navigation/Components/VisibilityForm.razor.rz.scp.css */
/* ===========================================================================
   Visibility Form Styles (Component-Scoped)
   =========================================================================== */

/* Groups List Container */
.groups-list[b-ryv2ctaaif] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    background: #fafafa;
    margin-bottom: 1.5rem;
}

.groups-list[b-ryv2ctaaif]::-webkit-scrollbar {
    width: 8px;
}

.groups-list[b-ryv2ctaaif]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.groups-list[b-ryv2ctaaif]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.groups-list[b-ryv2ctaaif]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Group Item */
.group-item[b-ryv2ctaaif] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.group-item:first-child[b-ryv2ctaaif] {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.group-item:last-child[b-ryv2ctaaif] {
    border-bottom: none;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.group-item:hover[b-ryv2ctaaif] {
    background: #f8fafc;
}

.group-item.selected[b-ryv2ctaaif] {
    background: #eff6ff;
    border-left: 3px solid #0066cc;
}

.group-item input[type="checkbox"][b-ryv2ctaaif] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0066cc;
    flex-shrink: 0;
}

/* Group Info */
.group-info[b-ryv2ctaaif] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.group-name[b-ryv2ctaaif] {
    font-weight: 500;
    color: #1e293b;
    font-size: 0.9rem;
}

.group-description[b-ryv2ctaaif] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Check Icon (for selected items) */
.check-icon[b-ryv2ctaaif] {
    color: #0066cc;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.group-item.selected .check-icon[b-ryv2ctaaif] {
    opacity: 1;
}

/* Empty State */
.empty-state-small[b-ryv2ctaaif] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #94a3b8;
    text-align: center;
}

.empty-state-small i[b-ryv2ctaaif] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
}

.empty-state-small p[b-ryv2ctaaif] {
    margin: 0;
    font-size: 0.875rem;
}

/* Info Box */
.info-box[b-ryv2ctaaif] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    margin-bottom: 1.5rem;
}

.info-box.info[b-ryv2ctaaif] {
    background: #dbeafe;
    border-left-color: #0066cc;
}

.info-icon[b-ryv2ctaaif] {
    color: #f59e0b;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.info-box.info .info-icon[b-ryv2ctaaif] {
    color: #0066cc;
}

.info-content[b-ryv2ctaaif] {
    flex: 1;
    font-size: 0.875rem;
    color: #1e293b;
}

.info-content strong[b-ryv2ctaaif] {
    font-weight: 600;
}

.info-content p[b-ryv2ctaaif] {
    margin: 0 0 0.5rem 0;
}

.info-content p:last-child[b-ryv2ctaaif] {
    margin-bottom: 0;
}

.small-text[b-ryv2ctaaif] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Visibility Summary */
.visibility-summary[b-ryv2ctaaif] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-item[b-ryv2ctaaif] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #475569;
}

.summary-item.warning[b-ryv2ctaaif] {
    color: #dc2626;
    font-weight: 500;
}

.summary-icon[b-ryv2ctaaif] {
    color: #0066cc;
    font-size: 1.125rem;
}

.summary-item.warning .summary-icon[b-ryv2ctaaif] {
    color: #dc2626;
}

/* Selected Groups Tags */
.selected-groups[b-ryv2ctaaif] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.group-tag[b-ryv2ctaaif] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    font-size: 0.8rem;
    color: #1e40af;
}

.group-tag i[b-ryv2ctaaif] {
    font-size: 0.75rem;
}

.remove-group[b-ryv2ctaaif] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    cursor: pointer;
    color: #1e40af;
    transition: color 0.2s ease;
}

.remove-group:hover[b-ryv2ctaaif] {
    color: #dc2626;
}

.remove-group i[b-ryv2ctaaif] {
    font-size: 0.7rem;
}
/* _content/OEAI.Apps.SaaS/Pages/Navigation/NavigationBuilder.razor.rz.scp.css */
/* COMMENT: NavigationBuilder styles - unified navigation management interface */
/* PURPOSE: Clean, modern styling for tree + properties two-panel layout */
/* IMPLICATION: Follows existing Marginal Gains design system patterns */

/* ==========================================================================
   Loading & Error States
   ========================================================================== */

/* COMMENT: Loading state matching SchoolProfileV2 style */
/* PURPOSE: Consistent loading animation across the application */
/* IMPLICATION: Uses Font Awesome spinner with same styling as school profile page */
.loading-state[b-br5j40g17m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

/* ==========================================================================
   Main Layout Container
   ========================================================================== */

.navigation-builder-container[b-br5j40g17m] {
    width: 100%;
    min-height: calc(100vh - 100px);
}

.builder-content[b-br5j40g17m] {
    padding: 2rem;
    max-width: 1800px;
    margin: 0 auto;
}

.builder-panels[b-br5j40g17m] {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 2rem;
    align-items: start;
}

/* ==========================================================================
   Navigation Tree Panel (Left)
   ========================================================================== */

.navigation-tree-panel[b-br5j40g17m] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 600px;
    max-height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
}

.panel-header[b-br5j40g17m] {
    margin-bottom: 1rem;
}

.btn-block[b-br5j40g17m] {
    width: 100%;
}

.tree-container[b-br5j40g17m] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==========================================================================
   Tree Items
   ========================================================================== */

.tree-item[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
}

.tree-item:hover[b-br5j40g17m] {
    background: #f9fafb;
}

.tree-item.selected[b-br5j40g17m] {
    background: #eff6ff;
    border-left: 3px solid #0066cc;
    padding-left: calc(0.75rem - 3px);
}

.tree-item.has-changes[b-br5j40g17m] {
    background: #fef3c7;
}

.tree-item.has-changes.selected[b-br5j40g17m] {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}

.tree-item.content[b-br5j40g17m] {
    margin-left: 2rem;
    font-size: 0.95rem;
}

/* Tree Item Elements */

.tree-indent[b-br5j40g17m] {
    width: 1.5rem;
    flex-shrink: 0;
}

.drag-handle[b-br5j40g17m] {
    color: #9ca3af;
    cursor: grab;
    flex-shrink: 0;
    padding: 0.25rem;
}

.drag-handle:hover[b-br5j40g17m] {
    color: #6b7280;
}

.drag-handle:active[b-br5j40g17m] {
    cursor: grabbing;
}

.expand-toggle[b-br5j40g17m] {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.expand-toggle:hover[b-br5j40g17m] {
    background: #e5e7eb;
    color: #374151;
}

.expand-spacer[b-br5j40g17m] {
    width: 1.5rem;
    flex-shrink: 0;
}

.item-icon[b-br5j40g17m] {
    color: #6b7280;
    font-size: 1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.tree-item.navigation .item-icon[b-br5j40g17m] {
    color: #0066cc;
}

.item-title[b-br5j40g17m] {
    flex: 1;
    font-weight: 500;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-item.content .item-title[b-br5j40g17m] {
    font-weight: 400;
}

.inline-edit-input[b-br5j40g17m] {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid #0066cc;
    border-radius: 4px;
    font-size: inherit;
    font-weight: inherit;
    outline: none;
}

.status-indicator[b-br5j40g17m] {
    flex-shrink: 0;
}

.status-dot[b-br5j40g17m] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active[b-br5j40g17m] {
    background: #10b981;
}

.status-dot.inactive[b-br5j40g17m] {
    background: #9ca3af;
}

.changes-indicator[b-br5j40g17m] {
    color: #f59e0b;
    font-size: 0.5rem;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.item-actions[b-br5j40g17m] {
    position: relative;
    flex-shrink: 0;
}

.actions-menu-button[b-br5j40g17m] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tree-item:hover .actions-menu-button[b-br5j40g17m],
.actions-menu-button:focus[b-br5j40g17m] {
    opacity: 1;
}

.actions-menu-button:hover[b-br5j40g17m] {
    background: #e5e7eb;
    color: #374151;
}

.actions-dropdown[b-br5j40g17m] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 100;
}

.action-item[b-br5j40g17m] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #374151;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.action-item:hover[b-br5j40g17m] {
    background: #f9fafb;
}

.action-item.danger[b-br5j40g17m] {
    color: #dc2626;
}

.action-item.danger:hover[b-br5j40g17m] {
    background: #fef2f2;
}

.action-item i[b-br5j40g17m] {
    width: 1rem;
    text-align: center;
}

/* Tree Children */

.tree-children[b-br5j40g17m] {
    margin-left: 1rem;
}

.empty-drop-zone[b-br5j40g17m] {
    margin-left: 3.5rem;
    padding: 1rem;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    color: #9ca3af;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.empty-drop-zone:hover[b-br5j40g17m] {
    border-color: #0066cc;
    color: #0066cc;
    background: #f0f9ff;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state[b-br5j40g17m] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7280;
}

.empty-icon[b-br5j40g17m] {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h3[b-br5j40g17m] {
    margin: 0.5rem 0;
    color: #374151;
    font-size: 1.25rem;
}

.empty-state p[b-br5j40g17m] {
    margin: 0.5rem 0 1.5rem 0;
    color: #9ca3af;
}

/* ==========================================================================
   Properties Panel (Right)
   ========================================================================== */

.properties-panel[b-br5j40g17m] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 600px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.no-selection-state[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    color: #6b7280;
}

.selection-icon[b-br5j40g17m] {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.no-selection-state h3[b-br5j40g17m] {
    margin: 0.5rem 0;
    color: #374151;
}

.no-selection-state p[b-br5j40g17m] {
    margin: 0.5rem 0;
    color: #9ca3af;
}

.properties-content[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.properties-header[b-br5j40g17m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.properties-header h2[b-br5j40g17m] {
    margin: 0;
    font-size: 1.5rem;
    color: #111827;
}

/* Property Tabs */

.property-tabs[b-br5j40g17m] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.property-tab[b-br5j40g17m] {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    color: #6b7280;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.property-tab:hover[b-br5j40g17m] {
    color: #374151;
}

.property-tab.active[b-br5j40g17m] {
    color: #0066cc;
    border-bottom-color: #0066cc;
}

.property-form-container[b-br5j40g17m] {
    flex: 1;
}

/* ==========================================================================
   Property Forms (shared styles)
   ========================================================================== */

.property-form[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section[b-br5j40g17m] {
    background: #f9fafb;
    border-radius: 6px;
    padding: 1.25rem;
}

.section-title[b-br5j40g17m] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-description[b-br5j40g17m] {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #6b7280;
}

.form-field[b-br5j40g17m] {
    margin-bottom: 1rem;
}

.form-field:last-child[b-br5j40g17m] {
    margin-bottom: 0;
}

.form-label[b-br5j40g17m] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.required[b-br5j40g17m] {
    color: #dc2626;
}

.form-input[b-br5j40g17m],
.form-textarea[b-br5j40g17m] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-br5j40g17m],
.form-textarea:focus[b-br5j40g17m] {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-textarea[b-br5j40g17m] {
    resize: vertical;
    font-family: inherit;
}

.field-hint[b-br5j40g17m] {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.375rem;
}

.field-hint.error[b-br5j40g17m] {
    color: #dc2626;
}

.form-row[b-br5j40g17m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-field[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-label[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-br5j40g17m] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
}

.checkbox-text[b-br5j40g17m] {
    font-weight: 500;
    color: #374151;
}

/* Metadata Section */

.metadata-section[b-br5j40g17m] {
    background: #fefce8;
    border-left: 4px solid #fbbf24;
}

.metadata-grid[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metadata-item[b-br5j40g17m] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.metadata-label[b-br5j40g17m] {
    font-weight: 600;
    color: #78716c;
    min-width: 80px;
}

.metadata-value[b-br5j40g17m] {
    color: #57534e;
}

/* Content Source Selector */

.source-type-selector[b-br5j40g17m] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.radio-label[b-br5j40g17m] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-label:hover[b-br5j40g17m] {
    border-color: #0066cc;
    background: #f0f9ff;
}

.radio-label.selected[b-br5j40g17m] {
    border-color: #0066cc;
    background: #eff6ff;
}

.radio-label input[type="radio"][b-br5j40g17m] {
    cursor: pointer;
}

.radio-text[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.radio-text i[b-br5j40g17m] {
    font-size: 1.125rem;
    color: #0066cc;
}

/* Icon Dropdown */

.icon-dropdown-item[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.icon-preview[b-br5j40g17m] {
    font-size: 1.125rem;
    width: 1.5rem;
    text-align: center;
}

/* ==========================================================================
   Visibility Form
   ========================================================================== */

.visibility-form[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.groups-list[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.group-item[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-item:hover[b-br5j40g17m] {
    border-color: #0066cc;
    background: #f9fafb;
}

.group-item.selected[b-br5j40g17m] {
    border-color: #0066cc;
    background: #eff6ff;
}

.group-item input[type="checkbox"][b-br5j40g17m] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.group-info[b-br5j40g17m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.group-name[b-br5j40g17m] {
    font-weight: 500;
    color: #111827;
}

.group-description[b-br5j40g17m] {
    font-size: 0.85rem;
    color: #6b7280;
}

.check-icon[b-br5j40g17m] {
    color: #0066cc;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.group-item.selected .check-icon[b-br5j40g17m] {
    opacity: 1;
}

.info-box[b-br5j40g17m] {
    padding: 1rem;
    background: #eff6ff;
    border-left: 4px solid #0066cc;
    border-radius: 6px;
    display: flex;
    gap: 1rem;
    align-items: start;
}

.info-box.info[b-br5j40g17m] {
    background: #f0f9ff;
    border-left-color: #0ea5e9;
}

.info-icon[b-br5j40g17m] {
    font-size: 1.25rem;
    color: #0066cc;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.info-box.info .info-icon[b-br5j40g17m] {
    color: #0ea5e9;
}

.info-content[b-br5j40g17m] {
    flex: 1;
    font-size: 0.9rem;
    color: #1e40af;
}

.info-box.info .info-content[b-br5j40g17m] {
    color: #075985;
}

.info-content p[b-br5j40g17m] {
    margin: 0 0 0.5rem 0;
}

.info-content p:last-child[b-br5j40g17m] {
    margin-bottom: 0;
}

.small-text[b-br5j40g17m] {
    font-size: 0.85rem;
}

.visibility-summary[b-br5j40g17m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-item[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #374151;
}

.summary-icon[b-br5j40g17m] {
    font-size: 1.25rem;
    color: #0066cc;
}

.selected-groups[b-br5j40g17m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.group-tag[b-br5j40g17m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #eff6ff;
    border: 1px solid #0066cc;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1e40af;
}

.group-tag i[b-br5j40g17m] {
    font-size: 0.875rem;
}

.remove-group[b-br5j40g17m] {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.remove-group:hover[b-br5j40g17m] {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.empty-state-small[b-br5j40g17m] {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

.empty-state-small i[b-br5j40g17m] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* ==========================================================================
   Delete Dialog
   ========================================================================== */

.dialog-header-icon[b-br5j40g17m] {
    color: #f59e0b;
    margin-right: 0.5rem;
}

.delete-confirm-content[b-br5j40g17m] {
    padding: 1rem 0;
}

.delete-items-list[b-br5j40g17m] {
    margin: 1rem 0;
    padding-left: 1.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.delete-items-list li[b-br5j40g17m] {
    margin: 0.5rem 0;
    color: #374151;
}

.more-items[b-br5j40g17m] {
    color: #6b7280;
    font-style: italic;
}

.warning-text[b-br5j40g17m] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1200px) {
    .builder-panels[b-br5j40g17m] {
        grid-template-columns: 40% 60%;
    }
}

@media (max-width: 992px) {
    .builder-panels[b-br5j40g17m] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .navigation-tree-panel[b-br5j40g17m],
    .properties-panel[b-br5j40g17m] {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .builder-content[b-br5j40g17m] {
        padding: 1rem;
    }

    .form-row[b-br5j40g17m] {
        grid-template-columns: 1fr;
    }

    .source-type-selector[b-br5j40g17m] {
        flex-direction: column;
    }
}
/* COMMENT: NavigationTreeItem component styles */
/* PURPOSE: Tree item layout with drag-drop, icons, and actions */

/* ==========================================================================
   Tree Item Container
   ========================================================================== */

.tree-item[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    border-left: 3px solid transparent;
    position: relative;
}

/* ==========================================================================
   Indentation and Spacing
   ========================================================================== */

.tree-indent[b-br5j40g17m] {
    width: 1.5rem;
    flex-shrink: 0;
}

.expand-spacer[b-br5j40g17m] {
    width: 20px;
    flex-shrink: 0;
}

.tree-item:hover[b-br5j40g17m] {
    background: #f8fafc;
}

.tree-item.selected[b-br5j40g17m] {
    background: #eff6ff;
    border-left-color: #0066cc;
}

.tree-item.has-changes[b-br5j40g17m] {
    background: #fef3c7;
}

.tree-item.navigation[b-br5j40g17m] {
    font-weight: 600;
}

.tree-item.content[b-br5j40g17m] {
    margin-left: 1.5rem;
    font-weight: 400;
}

/* ==========================================================================
   Drag Handle
   ========================================================================== */

.drag-handle[b-br5j40g17m] {
    color: #94a3b8;
    cursor: grab;
    padding: 0.25rem;
}

.drag-handle:hover[b-br5j40g17m] {
    color: #475569;
}

.drag-handle:active[b-br5j40g17m] {
    cursor: grabbing;
}

/* ==========================================================================
   Expand/Collapse Toggle
   ========================================================================== */

.expand-toggle[b-br5j40g17m] {
    background: none;
    border: none;
    padding: 0.25rem;
    color: #64748b;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.expand-toggle:hover[b-br5j40g17m] {
    color: #0066cc;
}

.expand-toggle.expanded[b-br5j40g17m] {
    transform: rotate(90deg);
}

/* ==========================================================================
   Item Icon
   ========================================================================== */

.item-icon[b-br5j40g17m] {
    color: #0066cc;
    font-size: 1rem;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tree-item.content .item-icon[b-br5j40g17m] {
    color: #64748b;
}

/* ==========================================================================
   Item Title
   ========================================================================== */

.item-title[b-br5j40g17m] {
    flex: 1;
    font-size: 0.9rem;
    color: #1e293b;
}

.tree-item.content .item-title[b-br5j40g17m] {
    font-size: 0.85rem;
    color: #475569;
}

.inline-edit-input[b-br5j40g17m] {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 2px solid #0066cc;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.inline-edit-input:focus[b-br5j40g17m] {
    border-color: #0052a3;
}

/* ==========================================================================
   Status Indicators
   ========================================================================== */

.status-indicator[b-br5j40g17m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot[b-br5j40g17m] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.active[b-br5j40g17m] {
    background: #22c55e;
}

.status-dot.inactive[b-br5j40g17m] {
    background: #ef4444;
}

.status-indicators[b-br5j40g17m] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.status-badge[b-br5j40g17m] {
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.inactive[b-br5j40g17m] {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.secured[b-br5j40g17m] {
    background: #dbeafe;
    color: #1e40af;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.item-actions[b-br5j40g17m] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tree-item:hover .item-actions[b-br5j40g17m] {
    opacity: 1;
}

.action-btn[b-br5j40g17m] {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.action-btn:hover[b-br5j40g17m] {
    background: #e2e8f0;
    color: #0066cc;
}

.action-btn.danger:hover[b-br5j40g17m] {
    background: #fee2e2;
    color: #dc2626;
}

/* ==========================================================================
   Tree Children
   ========================================================================== */

.tree-children[b-br5j40g17m] {
    margin-left: 1rem;
    border-left: 2px solid #e2e8f0;
    padding-left: 0.5rem;
}

/* ==========================================================================
   Empty Drop Zone
   ========================================================================== */

.empty-drop-zone[b-br5j40g17m] {
    margin-left: 2rem;
    padding: 1rem;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    color: #94a3b8;
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.empty-drop-zone:hover[b-br5j40g17m],
.empty-drop-zone.drag-over[b-br5j40g17m] {
    border-color: #0066cc;
    background: #eff6ff;
    color: #0066cc;
}

/* ==========================================================================
   Drag States
   ========================================================================== */

.tree-item.dragging[b-br5j40g17m] {
    opacity: 0.5;
}

.tree-item.drag-over[b-br5j40g17m] {
    background: #eff6ff;
    border-left-color: #0066cc;
}

/* ==========================================================================
   Add Content parent-picker dialog (AB#1747 / UX-CONSISTENCY-REVIEW.md §11.7)
   ========================================================================== */

[b-br5j40g17m] .add-content-dialog-body {
    padding: 0.5rem 0;
}

[b-br5j40g17m] .add-content-dialog-body p {
    margin: 0 0 0.75rem 0;
    color: #1f2937;
    font-size: 0.9rem;
}

[b-br5j40g17m] .add-content-parent-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #1f2937;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

[b-br5j40g17m] .add-content-parent-select:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

[b-br5j40g17m] .add-content-hint {
    margin: 0 !important;
    padding: 0.6rem 0.75rem;
    background: rgba(15, 42, 102, 0.05);
    border-left: 3px solid #0F2A66;
    border-radius: 4px;
    color: #4b5563 !important;
    font-size: 0.825rem !important;
    line-height: 1.4;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

[b-br5j40g17m] .add-content-hint i {
    color: #0F2A66;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
/* _content/OEAI.Apps.SaaS/Pages/Notifications/MyNotifications.razor.rz.scp.css */
/* ========================================
   My Notifications Page Styles
   ======================================== */

.notifications-list-container[b-geq45askzj] {
    padding: 0 1.5rem 1.5rem;
}

/* Loading State */
.notifications-loading[b-geq45askzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

.notifications-loading i[b-geq45askzj] {
    font-size: 1.5rem;
    color: #0C5FE3;
}

/* Empty State */
.notifications-empty-state[b-geq45askzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 4rem 2rem;
    text-align: center;
}

.notifications-empty-state i[b-geq45askzj] {
    font-size: 2.5rem;
    color: #d1d5db;
}

.notifications-empty-state h3[b-geq45askzj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.notifications-empty-state p[b-geq45askzj] {
    font-size: 0.85rem;
    color: #9ca3af;
    max-width: 400px;
    margin: 0;
}

/* Notification Row */
/* Per AB#1747 / UX-CONSISTENCY-REVIEW.md §1.3: collapsed to 2 visible lines */
/* (header + 1-line message). Row height is now driven by the icon box (40px) plus */
/* the body's natural height (~2 line-heights), with reduced vertical padding so */
/* the icon sets the row constraint. */
.notification-row[b-geq45askzj] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    align-items: center;
}

.notification-row:hover[b-geq45askzj] {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.notification-row.unread[b-geq45askzj] {
    background: #f0f7ff;
    border-color: #bfdbfe;
}

.notification-row.unread:hover[b-geq45askzj] {
    background: #e0efff;
    border-color: #93c5fd;
}

/* Severity Icon */
.notification-row-icon[b-geq45askzj] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.9rem;
}

.notification-row-icon.severity-info[b-geq45askzj] {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-row-icon.severity-success[b-geq45askzj] {
    background: #d1fae5;
    color: #065f46;
}

.notification-row-icon.severity-warning[b-geq45askzj] {
    background: #fef3c7;
    color: #92400e;
}

.notification-row-icon.severity-error[b-geq45askzj] {
    background: #fee2e2;
    color: #991b1b;
}

/* Body */
.notification-row-body[b-geq45askzj] {
    flex: 1;
    min-width: 0;
}

/* Header row now hosts title + pill + time + unread-dot all on a single line. */
/* Per §1.3 the meta strip has been folded in to keep the body to 2 visible lines. */
.notification-row-header[b-geq45askzj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.notification-row-title[b-geq45askzj] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-row.read .notification-row-title[b-geq45askzj] {
    font-weight: 500;
    color: #6b7280;
}

/* Pill tag — height locked to the icon line-height so the row reads as a single */
/* visual rhythm (per §1.4 "Align pill tag height to match icon height"). The 22px */
/* min-height matches the 0.9rem icon glyph + 4px breathing room inside the 40px box. */
.notification-row-category[b-geq45askzj] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0 10px;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
}

/* Message: 1-line clamp so the row stays inside the icon-box envelope */
.notification-row-message[b-geq45askzj] {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.15rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-row-time[b-geq45askzj] {
    font-size: 0.72rem;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.notification-row-time i[b-geq45askzj] {
    font-size: 0.65rem;
}

.notification-row-unread-dot[b-geq45askzj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0C5FE3;
    flex-shrink: 0;
}

/* Row-action icon cluster. Always visible per AB#1747 / UX-CONSISTENCY-REVIEW.md
   §2.7 (no hover-reveal patterns — discoverability + parity with the canonical
   .row-actions cluster from governance-v2/tables.css §14). Neutral transparent
   chrome with grey-on-hover, matching the icon-button style used on the
   Evidence Bank cards (.action-btn / .chit-header-action-btn). The previous
   green / blue pill backgrounds were bespoke and read as colour-coded status
   chips rather than action buttons. */
.notification-row-actions[b-geq45askzj] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    align-items: center;
}

.notification-mark-read-btn[b-geq45askzj],
.notification-navigate-btn[b-geq45askzj] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.notification-mark-read-btn:hover[b-geq45askzj],
.notification-navigate-btn:hover[b-geq45askzj] {
    background: #f3f4f6;
    color: #1f2937;
}

/* Pagination */
.notifications-pagination[b-geq45askzj] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    margin-top: 0.5rem;
}

.pagination-btn[b-geq45askzj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled)[b-geq45askzj] {
    border-color: #0C5FE3;
    color: #0C5FE3;
    background: #f0f7ff;
}

.pagination-btn:disabled[b-geq45askzj] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-geq45askzj] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Header button styles */
.btn-header-secondary[b-geq45askzj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-secondary:hover[b-geq45askzj] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

/* `.kpi-warning` + `.header-kpi-value` rules removed — were styling the */
/* pre-AB#1747 .header-kpi-card markup that has been replaced with the */
/* shared <KpiTile> component (DS §15) + its `.ds-kpi-tile--alert` variant. */

/* Responsive */
@media (max-width: 768px) {
    .notification-row-header[b-geq45askzj] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .notifications-pagination[b-geq45askzj] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/Components/SchoolProfileDetailed.razor.rz.scp.css */
.detailed-view[b-v5u6hskeu6] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.distribution-section[b-v5u6hskeu6] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.performance-table-container[b-v5u6hskeu6] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.table-header-row[b-v5u6hskeu6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-section-title[b-v5u6hskeu6] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.table-view-toggle[b-v5u6hskeu6] {
    display: flex;
    gap: 0.5rem;
}

.schools-table th[b-v5u6hskeu6] {
    white-space: nowrap;
    vertical-align: bottom;
    font-size: 0.8rem;
    padding: 0.5rem 0.4rem;
}

/* Rotate all column headers except first (School) and last (Actions) */
.schools-table thead tr th:not(:first-child):not(:last-child)[b-v5u6hskeu6] {
    height: 140px;
    white-space: nowrap;
    vertical-align: bottom;
    padding: 0 0.3rem 0.5rem 0.3rem;
    text-align: left;
}

.schools-table thead tr th:not(:first-child):not(:last-child) > *[b-v5u6hskeu6] {
    transform: rotate(-45deg);
    transform-origin: left bottom;
    width: 30px;
    text-align: left;
    white-space: nowrap;
    display: inline-block;
}

.schools-table thead tr th:not(:first-child):not(:last-child) i[b-v5u6hskeu6] {
    font-size: 0.7rem;
    margin-left: 3px;
}

/* School name column - no wrapping */
.schools-table thead tr th:first-child[b-v5u6hskeu6] {
    white-space: nowrap;
    min-width: 200px;
    vertical-align: middle;
}

.schools-table tbody td:first-child[b-v5u6hskeu6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.schools-table tbody td:first-child strong[b-v5u6hskeu6] {
    font-weight: 600;
}

.schools-table td[b-v5u6hskeu6] {
    vertical-align: middle;
    font-size: 0.85rem;
    padding: 0.5rem 0.4rem;
}

.schools-table th.text-center[b-v5u6hskeu6],
.schools-table td.text-center[b-v5u6hskeu6] {
    min-width: 65px;
    max-width: 85px;
}

.schools-table .sortable[b-v5u6hskeu6] {
    cursor: pointer;
}

.percentile-badge[b-v5u6hskeu6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
    font-size: 0.85rem;
}

.school-phase[b-v5u6hskeu6] {
    font-size: 0.8rem;
    color: #6b7280;
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/Components/SchoolProfileExecutive.razor.rz.scp.css */
/* Container for executive view components */
/* IMPLICATION: Removal would cause child components to lose flex layout */
.executive-view[b-86jj7e2c6b] {
    display: flex;
    flex-direction: column;
}

.metric-ranking[b-86jj7e2c6b] {
    font-size: 0.85rem;
    color: #2563eb;
    font-weight: 500;
}

/* Priority schools section wrapper - applies margin to match heatmap */
/* IMPLICATION: Removal would cause section to lose consistent spacing with other components */
.priority-section-wrapper[b-86jj7e2c6b] {
    margin: 0 2rem 1.25rem 2rem;
}

/* Override AiContentSection styling for priority schools context */
/* IMPLICATION: Ensures priority cards and content display correctly within AI section */
.priority-section-wrapper[b-86jj7e2c6b]  .ai-content-body {
    padding: 1rem 0 0 0;
}

/* Align AI disclaimer with zero-padded content body */
/* IMPLICATION: Ensures disclaimer is visible and aligns with the content above it */
.priority-section-wrapper[b-86jj7e2c6b]  .ai-disclaimer {
    margin: 0;
    border-radius: 0 0 8px 8px;
}

/* Intro text for AI context */
/* IMPLICATION: Removal would lose the explanatory text for users */
.priority-intro[b-86jj7e2c6b] {
    color: #047857;
    font-size: 0.95rem;
    margin: 0 1rem 1rem 1rem;
    line-height: 1.5;
}

/* No priority message with horizontal margins to align with disclaimer */
/* IMPLICATION: Ensures "no priority" message aligns with disclaimer padding */
.no-priority[b-86jj7e2c6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #10b981;
    margin: 0 1rem;
}

.no-priority i[b-86jj7e2c6b] {
    font-size: 1.75rem;
}

/* Priority schools list grid with horizontal margins to align with disclaimer */
/* IMPLICATION: Ensures cards align with disclaimer padding for visual consistency */
.priority-list[b-86jj7e2c6b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 0 1rem;
}

.priority-card[b-86jj7e2c6b] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.priority-card:hover[b-86jj7e2c6b] {
    transform: translateY(-2px);
    box-shadow: 0 12px 16px -8px rgba(15, 23, 42, 0.2);
}

.priority-header[b-86jj7e2c6b] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.priority-header h4[b-86jj7e2c6b] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.priority-phase[b-86jj7e2c6b] {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #2563eb;
}

.priority-urn[b-86jj7e2c6b] {
    font-size: 0.8rem;
    color: #6b7280;
}

.priority-concerns[b-86jj7e2c6b] {
    margin: 0;
    padding-left: 1rem;
    color: #4b5563;
    font-size: 0.9rem;
}

.priority-actions[b-86jj7e2c6b] {
    display: flex;
    justify-content: flex-start;
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/Components/TrustFinanceDetailed.razor.rz.scp.css */
/* Scoped CSS for the Trust Finance detailed table. */
/* Created per AB#1747 / UX-CONSISTENCY-REVIEW.md §6.5 to fix long academy names */
/* pushing row height around. Pre-v1.0 the table had NO scoped CSS, so academy names */
/* fell through to default <td> wrap behaviour — multi-line names made rows of wildly */
/* different heights and ate vertical space the rest of the page needed. */

/* Academy name cell — fixed max-width with single-line ellipsis. */
/* PURPOSE: Every row is the same height regardless of name length. */
/* IMPLICATION: Names longer than the column are truncated; the full name is */
/*              available via the `title` attribute on the <strong> tag (set in markup). */
.academy-name-cell[b-t9nivqpqr1] {
    max-width: 260px;
    min-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-name-cell strong[b-t9nivqpqr1] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/IDSRAnalysisView.razor.rz.scp.css */
/*
 * IDSR Analysis View Styles
 * PURPOSE: Styles for the structured IDSR analysis framework
 * IMPLICATION: Removing this breaks visual presentation of IDSR analysis
 */

/* Container */
.idsr-analysis-container[b-uqjpeckxbe] {
    padding: 1rem;
    background: #f8f9fa;
    min-height: 500px;
}

/* Loading State */
.analysis-loading[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-progress[b-uqjpeckxbe] {
    text-align: center;
    color: #6b7280; /* normalised text-secondary per §8.4 */
}

/* Error State */
.analysis-error[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    text-align: center;
}

.analysis-error i[b-uqjpeckxbe] {
    font-size: 3rem;
    color: #dc3545;
}

/* Placeholder State */
.analysis-placeholder[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    text-align: center;
    color: #6b7280; /* normalised text-secondary per §8.4 */
}

.analysis-placeholder i[b-uqjpeckxbe] {
    font-size: 3rem;
    color: #0C5FE3;
}

/* Header with Marge branding */
.analysis-header-marge[b-uqjpeckxbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 8px;
    margin-bottom: 1rem;
    color: white;
}

.analysis-header-left[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marge-analysis-avatar[b-uqjpeckxbe] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marge-analysis-avatar[b-uqjpeckxbe]  .ai-sparkles-icon,
.marge-analysis-avatar[b-uqjpeckxbe]  .marge-sparkles {
    color: white;
    stroke: white;
}

.school-info h2[b-uqjpeckxbe] {
    margin: 0;
    font-size: 1.5rem;
    color: white;
}

.academic-year[b-uqjpeckxbe] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Header right section with risk badge and export */
.header-right-actions[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Export button in header */
.btn-header-export[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-header-export:hover:not(:disabled)[b-uqjpeckxbe] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-header-export:disabled[b-uqjpeckxbe] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Risk Badge */
.risk-badge[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
}

.risk-badge .risk-label[b-uqjpeckxbe] {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.risk-badge .risk-value[b-uqjpeckxbe] {
    font-size: 1.25rem;
}

.risk-badge.risk-low[b-uqjpeckxbe] {
    background: rgba(255, 255, 255, 0.9);
    color: #155724;
}

.risk-badge.risk-medium[b-uqjpeckxbe] {
    background: rgba(255, 243, 205, 0.95);
    color: #856404;
}

.risk-badge.risk-high[b-uqjpeckxbe] {
    background: rgba(248, 215, 218, 0.95);
    color: #721c24;
}

/* Section Navigation - inline buttons matching main header style */
.analysis-section-nav[b-uqjpeckxbe] {
    background: white;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.section-nav-buttons[b-uqjpeckxbe] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.section-nav-btn[b-uqjpeckxbe] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #4b5563;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.section-nav-btn:hover[b-uqjpeckxbe] {
    background: #e5e7eb;
    color: #1f2937;
}

.section-nav-btn.active[b-uqjpeckxbe] {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
}

.section-nav-btn i[b-uqjpeckxbe] {
    font-size: 0.9rem;
}

/* Tab Content Area */
.analysis-tab-content[b-uqjpeckxbe] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 1.5rem;
}

/* Heading hierarchy normalised per AB#1747 / UX-CONSISTENCY-REVIEW.md §8.2. */
/* Pre-v1.0 the tabs used four visually-distinct heading levels (page banner / */
/* tab nav / section h4 / sub-card h5 with heavy coloured bottom border), which */
/* read as "too many levels" — the h5 cards looked like peer sections rather */
/* than subordinate to their h4. The rules below pin the two in-tab levels to */
/* a tight font-size range and let weight + colour carry the hierarchy. */
.analysis-tab-content h4[b-uqjpeckxbe] {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.35;
}

.analysis-tab-content h5[b-uqjpeckxbe] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.35;
}

/* Footer */
.analysis-footer[b-uqjpeckxbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-top: 1rem;
    background: white;
    border-radius: 8px;
}

.generated-time[b-uqjpeckxbe] {
    font-size: 0.85rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
}

.generated-time i[b-uqjpeckxbe] {
    margin-right: 0.5rem;
}

/* Footer action buttons */
.footer-actions[b-uqjpeckxbe] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-regenerate[b-uqjpeckxbe] {
    color: #059669;
    border-color: #059669;
}

.btn-regenerate:hover:not(:disabled)[b-uqjpeckxbe] {
    background: #059669;
    color: white;
}

/* Cache indicator - shows when analysis was loaded from cache */
.cache-indicator[b-uqjpeckxbe] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 0.75rem;
    border-radius: 4px;
}

.cache-indicator i[b-uqjpeckxbe] {
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

/* Executive Summary */
.executive-summary[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.summary-section h4[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #1f2937; /* normalised text-primary per §8.4 */
    font-size: 1.1rem;
}

.risk-section .risk-card[b-uqjpeckxbe] {
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.risk-card.risk-low[b-uqjpeckxbe] {
    background: #d4edda;
    border-color: #28a745;
}

.risk-card.risk-medium[b-uqjpeckxbe] {
    background: #fff3cd;
    border-color: #ffc107;
}

.risk-card.risk-high[b-uqjpeckxbe] {
    background: #f8d7da;
    border-color: #dc3545;
}

.risk-header[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.risk-rating[b-uqjpeckxbe] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.risk-explanation[b-uqjpeckxbe] {
    margin: 0;
    opacity: 0.9;
}

.assessment-content[b-uqjpeckxbe] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    line-height: 1.6;
}

.assessment-content ul[b-uqjpeckxbe],
.assessment-content ol[b-uqjpeckxbe] {
    padding-left: 1.25rem;
    margin-left: 0.75rem;
    margin-bottom: 0.75rem;
    list-style-position: outside;
}

.assessment-content li[b-uqjpeckxbe] {
    padding: 0.2rem 0;
    padding-left: 0.25rem;
}

.summary-grid[b-uqjpeckxbe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .summary-grid[b-uqjpeckxbe] {
        grid-template-columns: 1fr;
    }
}

.summary-card[b-uqjpeckxbe] {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid #e9ecef;
}

.summary-card h5[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    /* Heavy 2px coloured bottom border retired per §8.2 — it made the sub-card */
    /* heading look like a peer of the parent section h4 and visually inflated */
    /* the hierarchy. Colour on the text + icon still carries the semantic. */
}

.summary-card.strengths h5[b-uqjpeckxbe] {
    color: #15803d; /* green-700: semantic strength accent (text only — border-bottom removed in §8.2) */
}

.summary-card.development h5[b-uqjpeckxbe] {
    color: #b45309; /* amber-700: semantic dev/attention accent */
}

.summary-card.focus h5[b-uqjpeckxbe] {
    color: #0C5FE3; /* brand navy: semantic focus accent */
}

.summary-card ul[b-uqjpeckxbe] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-card li[b-uqjpeckxbe] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-card li:last-child[b-uqjpeckxbe] {
    border-bottom: none;
}

.summary-card li i[b-uqjpeckxbe] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.summary-card.strengths li i[b-uqjpeckxbe] { color: #28a745; }
.summary-card.development li i[b-uqjpeckxbe] { color: #fd7e14; }
.summary-card.focus li i[b-uqjpeckxbe] { color: #0C5FE3; }

/* Section Walkthrough */
.section-walkthrough[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-nav[b-uqjpeckxbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.nav-btn[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #0C5FE3;
    background: white;
    color: #0C5FE3;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-btn:hover:not(:disabled)[b-uqjpeckxbe] {
    background: #0C5FE3;
    color: white;
}

.nav-btn:disabled[b-uqjpeckxbe] {
    opacity: 0.5;
    cursor: not-allowed;
}

.section-indicator[b-uqjpeckxbe] {
    text-align: center;
}

.section-indicator span[b-uqjpeckxbe] {
    display: block;
    font-size: 0.85rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
}

.section-indicator strong[b-uqjpeckxbe] {
    font-size: 1.1rem;
    color: #1f2937; /* normalised text-primary per §8.4 */
}

.section-tabs[b-uqjpeckxbe] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.section-tab[b-uqjpeckxbe] {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.section-tab:hover[b-uqjpeckxbe] {
    background: #f8f9fa;
}

.section-tab.active[b-uqjpeckxbe] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

/* Split View */
/* Per AB#1747 / UX-CONSISTENCY-REVIEW.md §8.3 the columns use `minmax(0, 1fr)` */
/* instead of `1fr` so the embedded raw IDSR HTML (injected via MarkupString in */
/* the left panel) can't push the column wider than its grid track. Without this, */
/* sections whose IDSR HTML contained wide tables / fixed-width inline styles */
/* caused the whole split-view (and therefore the page) to shift horizontally */
/* between section tabs. */
.split-view[b-uqjpeckxbe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    min-height: 500px;
}

/* Per §8.3: panels carry the overflow so the raw IDSR HTML scrolls inside */
/* its own column instead of stretching the layout. min-width: 0 lets the */
/* flex/grid child shrink below its intrinsic content width. */
.split-panel[b-uqjpeckxbe],
.idsr-content[b-uqjpeckxbe],
.marge-analysis[b-uqjpeckxbe] {
    min-width: 0;
}

.idsr-html-content[b-uqjpeckxbe] {
    min-width: 0;
    overflow-x: auto;
    max-width: 100%;
}

.idsr-html-content table[b-uqjpeckxbe] {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .split-view[b-uqjpeckxbe] {
        grid-template-columns: 1fr;
    }
}

.split-panel[b-uqjpeckxbe] {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
}

.idsr-content .panel-header[b-uqjpeckxbe] {
    color: #495057;
}

.marge-analysis .panel-header[b-uqjpeckxbe] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.marge-analysis .panel-header[b-uqjpeckxbe]  .ai-sparkles-icon,
.marge-analysis .panel-header[b-uqjpeckxbe]  .marge-sparkles {
    color: white;
    stroke: white;
}

.panel-body[b-uqjpeckxbe] {
    flex: 1;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: 500px;
}

.idsr-html-content[b-uqjpeckxbe] {
    font-size: 0.9rem;
    line-height: 1.5;
}

.idsr-html-content ul[b-uqjpeckxbe],
.idsr-html-content ol[b-uqjpeckxbe] {
    padding-left: 1.25rem;
    margin-left: 0.75rem;
    margin-bottom: 0.75rem;
    list-style-position: outside;
}

.idsr-html-content li[b-uqjpeckxbe] {
    padding: 0.2rem 0;
    padding-left: 0.25rem;
    line-height: 1.5;
}

/* Style IDSR tables within content */
.idsr-html-content table[b-uqjpeckxbe] {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

.idsr-html-content th[b-uqjpeckxbe],
.idsr-html-content td[b-uqjpeckxbe] {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    text-align: left;
}

.idsr-html-content th[b-uqjpeckxbe] {
    background: #f8f9fa;
    font-weight: 600;
}

.marge-narrative[b-uqjpeckxbe] {
    line-height: 1.7;
}

.marge-narrative h4[b-uqjpeckxbe] {
    color: #1f2937; /* normalised text-primary per §8.4 */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.marge-narrative p[b-uqjpeckxbe] {
    margin-bottom: 0.75rem;
}

.marge-narrative ul[b-uqjpeckxbe],
.marge-narrative ol[b-uqjpeckxbe] {
    padding-left: 1.25rem;
    margin-left: 0.75rem;
    margin-bottom: 0.75rem;
    list-style-position: outside;
}

.marge-narrative li[b-uqjpeckxbe] {
    padding: 0.25rem 0;
    padding-left: 0.25rem;
    line-height: 1.6;
}

.marge-narrative .text-success[b-uqjpeckxbe],
.marge-narrative strong[b-uqjpeckxbe] {
    color: #059669;
}

.marge-narrative .text-danger[b-uqjpeckxbe] {
    color: #dc3545;
}

.no-analysis[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
    padding: 2rem;
}

.key-data-points[b-uqjpeckxbe] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.key-data-points h5[b-uqjpeckxbe] {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
}

.data-points-grid[b-uqjpeckxbe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.data-point[b-uqjpeckxbe] {
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    text-align: center;
}

.data-point .value[b-uqjpeckxbe] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
}

.data-point .context[b-uqjpeckxbe] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-point.positive[b-uqjpeckxbe] { border-left: 3px solid #28a745; }
.data-point.negative[b-uqjpeckxbe] { border-left: 3px solid #dc3545; }
.data-point.neutral[b-uqjpeckxbe] { border-left: 3px solid #6c757d; }

/* Inspector Questions */
.inspector-questions[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.questions-intro[b-uqjpeckxbe] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #e7f1ff;
    border-radius: 8px;
    align-items: flex-start;
}

.questions-intro i[b-uqjpeckxbe] {
    color: #0C5FE3;
    font-size: 1.25rem;
    margin-top: 0.2rem;
}

.questions-intro p[b-uqjpeckxbe] {
    margin: 0;
    color: #495057;
}

.priority-section[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.priority-section h4[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    /* Heavy 2px coloured border-bottom removed per §8.2 — same rationale as the */
    /* .summary-card h5 change above. Text + icon colour still carry the priority. */
}

.priority-section.high h4[b-uqjpeckxbe] {
    color: #b91c1c; /* red-700 */
}

.priority-section.medium h4[b-uqjpeckxbe] {
    color: #b45309; /* amber-700 */
}

.priority-section.low h4[b-uqjpeckxbe] {
    color: #15803d; /* green-700 */
}

.question-card[b-uqjpeckxbe] {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.question-header[b-uqjpeckxbe] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.section-badge[b-uqjpeckxbe] {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    background: #e9ecef;
    border-radius: 4px;
    color: #495057;
}

.priority-badge[b-uqjpeckxbe] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.high[b-uqjpeckxbe] {
    background: #f8d7da;
    color: #721c24;
}

.priority-badge.medium[b-uqjpeckxbe] {
    background: #fff3cd;
    color: #856404;
}

.priority-badge.low[b-uqjpeckxbe] {
    background: #d4edda;
    color: #155724;
}

.question-body[b-uqjpeckxbe] {
    padding: 1rem;
}

.question-text[b-uqjpeckxbe] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: #1f2937; /* normalised text-primary per §8.4 */
}

.question-text i[b-uqjpeckxbe] {
    color: #0C5FE3;
    margin-top: 0.2rem;
}

.why-asked[b-uqjpeckxbe],
.suggested-response[b-uqjpeckxbe],
.evidence-list[b-uqjpeckxbe] {
    margin-bottom: 1rem;
}

.why-asked strong[b-uqjpeckxbe],
.suggested-response strong[b-uqjpeckxbe],
.evidence-list strong[b-uqjpeckxbe] {
    display: block;
    font-size: 0.85rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
    margin-bottom: 0.25rem;
}

.evidence-list ul[b-uqjpeckxbe] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.evidence-list li[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.85rem;
}

.evidence-list li i[b-uqjpeckxbe] {
    color: #0C5FE3;
}

/* Current Evidence */
.current-evidence[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.evidence-intro[b-uqjpeckxbe] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
}

.evidence-intro i[b-uqjpeckxbe] {
    font-size: 2rem;
    opacity: 0.9;
}

.evidence-intro h5[b-uqjpeckxbe] {
    margin: 0 0 0.25rem 0;
}

.evidence-intro p[b-uqjpeckxbe] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.trend-summary[b-uqjpeckxbe] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    font-weight: 500;
}

.comparison-grid[b-uqjpeckxbe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    /* align-items: start prevents cards from stretching to match the tallest card in
       a row, which can create visual impression of cards overlapping each other.
       IMPLICATION: Without this, shorter cards stretch to match taller neighbours,
       making the gap between rows appear to vanish on some viewport widths. */
    align-items: start;
}

.comparison-card[b-uqjpeckxbe] {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.comparison-card.improving[b-uqjpeckxbe] {
    border-left: 4px solid #28a745;
}

.comparison-card.declining[b-uqjpeckxbe] {
    border-left: 4px solid #dc3545;
}

.comparison-card.stable[b-uqjpeckxbe] {
    border-left: 4px solid #6c757d;
}

.comparison-header[b-uqjpeckxbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.metric-name[b-uqjpeckxbe] {
    font-weight: 600;
    color: #1f2937; /* normalised text-primary per §8.4 */
}

.domain-badge[b-uqjpeckxbe] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: #0C5FE3;
    color: white;
    border-radius: 4px;
}

.comparison-values[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    gap: 1rem;
}

.value-box[b-uqjpeckxbe] {
    text-align: center;
    flex: 1;
}

.value-box .label[b-uqjpeckxbe] {
    display: block;
    font-size: 0.75rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
    margin-bottom: 0.25rem;
}

.value-box .value[b-uqjpeckxbe] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
}

.value-box.idsr .value[b-uqjpeckxbe] {
    color: #6c757d;
}

.value-box.current .value[b-uqjpeckxbe] {
    color: #1f2937; /* normalised text-primary per §8.4 */
}

.trend-arrow[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
}

.trend-arrow i[b-uqjpeckxbe] {
    font-size: 1.5rem;
}

.trend-arrow.improving i[b-uqjpeckxbe] { color: #28a745; }
.trend-arrow.declining i[b-uqjpeckxbe] { color: #dc3545; }
.trend-arrow.stable i[b-uqjpeckxbe] { color: #6c757d; }

.trend-arrow span[b-uqjpeckxbe] {
    font-size: 0.75rem;
    font-weight: 600;
}

.talking-point[b-uqjpeckxbe] {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    font-size: 0.85rem;
    color: #495057;
    border-top: 1px solid #e9ecef;
}

.talking-point i[b-uqjpeckxbe] {
    color: #0C5FE3;
    margin-right: 0.5rem;
}

.data-source[b-uqjpeckxbe] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: #999;
}

.talking-points-section[b-uqjpeckxbe] {
    padding: 1rem;
    background: #e7f1ff;
    border-radius: 8px;
}

.talking-points-section h5[b-uqjpeckxbe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    color: #0C5FE3;
}

.talking-points-section ul[b-uqjpeckxbe] {
    margin: 0;
    padding-left: 1.5rem;
}

.talking-points-section li[b-uqjpeckxbe] {
    padding: 0.5rem 0;
}

.no-evidence[b-uqjpeckxbe],
.no-questions[b-uqjpeckxbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #6b7280; /* normalised text-secondary per §8.4 */
    text-align: center;
}

.no-evidence i[b-uqjpeckxbe],
.no-questions i[b-uqjpeckxbe] {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/Ofsted.razor.rz.scp.css */
/* IMPLICATION: Remove overflow from page-container to allow header to scroll with content */
.page-container[b-a84lmf4ncy] {
    overflow: visible !important;
}

/* IMPLICATION: White background for main content area */
.page-body[b-a84lmf4ncy] {
    background: white;
    padding: 2rem;
}

/* IDSR tab button sparkles icon - white on green, green on white when active */
.tab-button-inline.tab-marge[b-a84lmf4ncy]  .tab-sparkles {
    color: white;
    stroke: white;
    width: 16px;
    height: 16px;
}

.tab-button-inline.tab-marge.active[b-a84lmf4ncy]  .tab-sparkles {
    color: #059669;
    stroke: #059669;
}

/* Override shared header padding to give timeline more width */
.header-filters-kpi-row[b-a84lmf4ncy] {
    padding: 0.75rem 1rem !important;
}

/* IMPLICATION: Placeholder styling for content areas */
.content-placeholder[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    color: #6c757d;
}

.content-placeholder h3[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
}

.content-placeholder p[b-a84lmf4ncy] {
    margin: 0;
    font-size: 1rem;
    max-width: 500px;
}

/* IMPLICATION: Override Bootstrap btn-primary to use modern header blue (#0C5FE3) */
.btn-primary[b-a84lmf4ncy] {
    background-color: #0C5FE3 !important;
    border-color: #0C5FE3 !important;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover[b-a84lmf4ncy] {
    background-color: #0a4fc0 !important;
    border-color: #0a4fc0 !important;
}

.btn-primary:active[b-a84lmf4ncy],
.btn-primary:focus[b-a84lmf4ncy] {
    background-color: #0a4fc0 !important;
    border-color: #0a4fc0 !important;
    box-shadow: 0 0 0 0.2rem rgba(12, 95, 227, 0.25) !important;
}

.btn-primary:disabled[b-a84lmf4ncy] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Secondary and outline buttons */
.btn-secondary[b-a84lmf4ncy] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
}

.btn-outline[b-a84lmf4ncy] {
    background: transparent;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-outline:hover[b-a84lmf4ncy] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-danger[b-a84lmf4ncy] {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.btn-danger:hover[b-a84lmf4ncy] {
    background: #dc3545 !important;
    color: white !important;
}

/* Outline button variants for action buttons */
/* IMPLICATION: These styles ensure consistent button appearance in grid rows */
.btn-outline-secondary[b-a84lmf4ncy] {
    background: transparent !important;
    border: 1px solid #6c757d !important;
    color: #6c757d !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-outline-secondary:hover[b-a84lmf4ncy] {
    background: #6c757d !important;
    color: white !important;
}

.btn-outline-danger[b-a84lmf4ncy] {
    background: transparent !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-outline-danger:hover[b-a84lmf4ncy] {
    background: #dc3545 !important;
    color: white !important;
}

.btn-sm[b-a84lmf4ncy] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-width: 32px;
    min-height: 32px;
}

/* ========================================
   IDSR VIEW STYLES
   IMPLICATION: Styles for IDSR document management tab
   ======================================== */

.idsr-view[b-a84lmf4ncy] {
    padding: 0;
}

/* Help text in section header */
.idsr-help-text[b-a84lmf4ncy] {
    font-size: 0.875rem;
    color: #6b7280;
}

.idsr-help-text a[b-a84lmf4ncy] {
    color: #0C5FE3;
    text-decoration: none;
}

.idsr-help-text a:hover[b-a84lmf4ncy] {
    text-decoration: underline;
}

/* Action buttons in grid row - horizontal layout */
/* IMPLICATION: Must use !important to override Syncfusion grid cell default styling */
.action-buttons[b-a84lmf4ncy] {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
}

/* COMMENT: Action button styling with icon + text labels per UI Standard */
/* IMPLICATION: Ensures buttons are properly sized and aligned for readability */
.action-buttons .btn[b-a84lmf4ncy] {
    padding: 0.375rem 0.75rem;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.action-buttons .btn i[b-a84lmf4ncy] {
    font-size: 0.75rem;
}

/* Override Syncfusion grid cell to allow horizontal button layout */
/* IMPLICATION: Prevents grid cell from clipping action buttons */
[b-a84lmf4ncy] .e-grid .e-rowcell .action-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* Ensure grid cell doesn't clip button content */
[b-a84lmf4ncy] .e-grid .e-rowcell {
    overflow: visible !important;
}

.idsr-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.idsr-intro h3[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.idsr-intro h3 i[b-a84lmf4ncy] {
    color: #0C5FE3;
}

.idsr-intro p[b-a84lmf4ncy] {
    margin: 0;
    color: #6c757d;
    max-width: 600px;
}

.idsr-intro a[b-a84lmf4ncy] {
    color: #0C5FE3;
    text-decoration: none;
}

.idsr-intro a:hover[b-a84lmf4ncy] {
    text-decoration: underline;
}

/* No documents state */
.no-documents[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
}

.no-documents i[b-a84lmf4ncy] {
    font-size: 4rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

.no-documents h4[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #212529;
}

.no-documents p[b-a84lmf4ncy] {
    margin: 0 0 1.5rem 0;
    color: #6c757d;
}

/* IDSR Card Grid */
.idsr-grid[b-a84lmf4ncy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.idsr-card[b-a84lmf4ncy] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.idsr-card:hover[b-a84lmf4ncy] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.idsr-card-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.idsr-card-header i[b-a84lmf4ncy] {
    font-size: 1.5rem;
    color: #0C5FE3;
}

.category-badge[b-a84lmf4ncy] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.category-primary[b-a84lmf4ncy] {
    background: #e3f2fd;
    color: #1565c0;
}

.category-secondary[b-a84lmf4ncy] {
    background: #fce4ec;
    color: #c2185b;
}

.category-special[b-a84lmf4ncy] {
    background: #e8f5e9;
    color: #2e7d32;
}

.category-other[b-a84lmf4ncy] {
    background: #f5f5f5;
    color: #616161;
}

.idsr-card-body[b-a84lmf4ncy] {
    padding: 1rem;
}

.idsr-card-body h5[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}

.idsr-card-body .description[b-a84lmf4ncy] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.4;
}

.meta-info[b-a84lmf4ncy] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.meta-info span[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.tags[b-a84lmf4ncy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag[b-a84lmf4ncy] {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: #e9ecef;
    color: #495057;
    border-radius: 4px;
}

.idsr-card-footer[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e9ecef;
    background: #fafafa;
}

/* ========================================
   ASK MARGE VIEW STYLES
   IMPLICATION: Styles for AI-powered Ofsted analysis with green theming
   REFERENCE: Matches AI Content Standard - green header, sparkles icon
   ======================================== */

.ask-marge-view[b-a84lmf4ncy] {
    max-width: 100%;
    margin: 0;
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

/* Green gradient header matching AI Content Standard */
/* IMPLICATION: Provides consistent AI branding across the application */
.marge-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #10b981, #059669);
    margin: 0;
    border-bottom: none;
}

.marge-header-left[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marge-header-right[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* IDSR dropdown in the header */
.header-idsr-selector[b-a84lmf4ncy] {
    min-width: 280px;
}

/* Style the Syncfusion dropdown to look good on green background */
.header-idsr-selector[b-a84lmf4ncy]  .e-input-group,
.header-idsr-selector[b-a84lmf4ncy]  .e-control-wrapper {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.header-idsr-selector[b-a84lmf4ncy]  .e-input-group input,
.header-idsr-selector[b-a84lmf4ncy]  .e-ddl input {
    font-size: 0.85rem !important;
    color: #1f2937 !important;
}

/* Analyse button in header - white on green */
.btn-header-analyse[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid white;
    border-radius: 8px;
    color: #059669;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-header-analyse:hover[b-a84lmf4ncy] {
    background: rgba(255, 255, 255, 0.9);
}

/* Avatar container for sparkles icon */
/* IMPLICATION: Circular container provides visual focus for AI indicator */
.marge-avatar[b-a84lmf4ncy] {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sparkles icon styling - white on green background */
/* IMPLICATION: Replaces robot icon with standard AI sparkles */
.marge-avatar[b-a84lmf4ncy]  .ai-sparkles-icon,
.marge-avatar[b-a84lmf4ncy]  .marge-sparkles {
    color: white;
    stroke: white;
}

/* Title and subtitle styling - white text on green */
.marge-intro h3[b-a84lmf4ncy] {
    margin: 0 0 0.25rem 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: white;
}

.marge-intro p[b-a84lmf4ncy] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

/* Content area padding - applies to all content below header */
/* IMPLICATION: Provides consistent spacing within the rounded container */
.ask-marge-view > .analysis-mode-selector[b-a84lmf4ncy],
.ask-marge-view > .marge-chat-container[b-a84lmf4ncy],
.ask-marge-view > .full-analysis-view[b-a84lmf4ncy],
.ask-marge-view > .analysis-ready[b-a84lmf4ncy],
.ask-marge-view > .analysis-placeholder-card[b-a84lmf4ncy],
.ask-marge-view[b-a84lmf4ncy] >  .ai-disclaimer-standalone {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* Analysis Mode Selector */
.analysis-mode-selector[b-a84lmf4ncy] {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.mode-label[b-a84lmf4ncy] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #495057;
}

.mode-options[b-a84lmf4ncy] {
    display: flex;
    gap: 0.75rem;
}

.mode-btn[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:hover:not(:disabled)[b-a84lmf4ncy] {
    border-color: #0C5FE3;
    color: #0C5FE3;
}

.mode-btn.active[b-a84lmf4ncy] {
    background: #0C5FE3;
    border-color: #0C5FE3;
    color: white;
}

.mode-btn:disabled[b-a84lmf4ncy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mode-btn small[b-a84lmf4ncy] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* IDSR Selector */
.idsr-selector[b-a84lmf4ncy] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.idsr-selector .form-label[b-a84lmf4ncy] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #495057;
}

.analysis-ready[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e8f5e9;
    border-radius: 8px;
    color: #2e7d32;
    margin-bottom: 1.5rem;
}

.analysis-ready i[b-a84lmf4ncy] {
    color: #4caf50;
}

/* Chat Placeholder */
.marge-chat-container[b-a84lmf4ncy] {
    background: #f8f9fa;
    border-radius: 12px;
    min-height: 400px;
    margin-bottom: 1rem;
}

/* AI Disclaimer styling within Ask Marge */
/* IMPLICATION: Provides bottom spacing and consistent disclaimer appearance */
.ask-marge-view[b-a84lmf4ncy]  .ai-disclaimer-standalone {
    margin-bottom: 1.5rem;
}

.chat-placeholder[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.chat-placeholder i[b-a84lmf4ncy] {
    font-size: 3rem;
    color: #10b981;
    margin-bottom: 1rem;
}

.chat-placeholder h4[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #212529;
}

.chat-placeholder > p[b-a84lmf4ncy] {
    margin: 0 0 1.5rem 0;
    color: #6c757d;
}

.sample-questions[b-a84lmf4ncy] {
    text-align: left;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    max-width: 400px;
}

.sample-questions p[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #495057;
}

.sample-questions ul[b-a84lmf4ncy] {
    margin: 0;
    padding-left: 1.25rem;
}

.sample-questions li[b-a84lmf4ncy] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.375rem;
}

/* ========================================
   UPLOAD DIALOG STYLES
   IMPLICATION: Styles for IDSR upload modal
   ======================================== */

.dialog-header[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.dialog-header i[b-a84lmf4ncy] {
    color: #0C5FE3;
}

.dialog-header-warning i[b-a84lmf4ncy] {
    color: #f59e0b;
}

.upload-form[b-a84lmf4ncy] {
    padding: 1rem 0;
}

.form-group[b-a84lmf4ncy] {
    margin-bottom: 1.25rem;
}

.form-label[b-a84lmf4ncy] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #495057;
}

.required[b-a84lmf4ncy] {
    color: #dc3545;
}

.file-upload-area[b-a84lmf4ncy] {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.file-upload-area:hover[b-a84lmf4ncy] {
    border-color: #0C5FE3;
    background: #f8f9fa;
}

.file-upload-area.has-file[b-a84lmf4ncy] {
    border-style: solid;
    border-color: #10b981;
    background: #f0fdf4;
}

.file-input[b-a84lmf4ncy] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-prompt[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
}

.upload-prompt i[b-a84lmf4ncy] {
    font-size: 2rem;
    color: #adb5bd;
}

.upload-prompt small[b-a84lmf4ncy] {
    font-size: 0.75rem;
}

.upload-prompt a[b-a84lmf4ncy] {
    color: #0C5FE3;
}

.file-info[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #10b981;
}

.file-info i[b-a84lmf4ncy] {
    font-size: 1.5rem;
}

.remove-file[b-a84lmf4ncy] {
    margin-left: auto;
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.25rem;
}

.upload-progress[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #6c757d;
}

.dialog-footer[b-a84lmf4ncy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* KPI card for info (blue) */
.header-kpi-card-info[b-a84lmf4ncy] {
    border-left: 3px solid #0C5FE3;
}

.header-kpi-card-info .header-kpi-value[b-a84lmf4ncy] {
    color: #0C5FE3;
}

/* Text utilities */
.text-muted[b-a84lmf4ncy] {
    color: #6c757d;
    font-size: 0.875rem;
}

/* ========================================
   IDSR CHAT STYLES
   IMPLICATION: Styles for the SfAIAssistView chat component
   ======================================== */

/* Style the chat container to fill available space */
[b-a84lmf4ncy] .idsr-chat {
    min-height: 450px;
    border-radius: 12px;
    overflow: hidden;
}

/* Style the chat input area */
[b-a84lmf4ncy] .idsr-chat .e-aiassistview-content {
    background: white;
    border-radius: 12px;
}

/* Style chat messages */
[b-a84lmf4ncy] .idsr-chat .e-aiassistview-messages {
    padding: 1rem;
    background: white;
}

/* Style the prompt suggestions */
[b-a84lmf4ncy] .idsr-chat .e-prompt-suggestion {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
}

[b-a84lmf4ncy] .idsr-chat .e-prompt-suggestion:hover {
    background: #e9ecef;
    border-color: #0C5FE3;
    color: #0C5FE3;
}

/* Style the send button */
[b-a84lmf4ncy] .idsr-chat .e-send-btn {
    background: #0C5FE3 !important;
    border-color: #0C5FE3 !important;
    color: white !important;
}

[b-a84lmf4ncy] .idsr-chat .e-send-btn:hover {
    background: #0a4fc0 !important;
}

/* Style the input field */
[b-a84lmf4ncy] .idsr-chat .e-input-group {
    border: 2px solid #e9ecef;
    border-radius: 8px;
}

[b-a84lmf4ncy] .idsr-chat .e-input-group:focus-within {
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.1);
}

/* Style response messages */
[b-a84lmf4ncy] .idsr-chat .e-assistant-message {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
    margin: 0.5rem 0;
}

/* Style user messages */
[b-a84lmf4ncy] .idsr-chat .e-user-message {
    background: #0C5FE3;
    color: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

/* ==================== Full Analysis Mode Styles ==================== */
/* IMPLICATION: Styles for the IDSR Analysis Framework mode */

/* Mode button with gradient for Full Analysis */
.mode-btn.mode-analysis[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
}

.mode-btn.mode-analysis:hover:not(:disabled)[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%) !important;
    transform: translateY(-1px);
}

.mode-btn.mode-analysis.active[b-a84lmf4ncy] {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.mode-btn.mode-analysis:disabled[b-a84lmf4ncy] {
    background: #e9ecef !important;
    color: #6c757d !important;
}

/* Analysis selector row with button */
.analysis-selector-row[b-a84lmf4ncy] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.analysis-selector-row .e-dropdownlist[b-a84lmf4ncy] {
    flex: 1;
}

/* Full analysis view container */
.full-analysis-view[b-a84lmf4ncy] {
    margin-top: 1rem;
}

/* Analysis placeholder card */
.analysis-placeholder-card[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    margin-top: 1rem;
}

.analysis-placeholder-card i[b-a84lmf4ncy] {
    font-size: 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.analysis-placeholder-card h4[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #1a1a1a;
}

.analysis-placeholder-card p[b-a84lmf4ncy] {
    margin: 0 0 1.5rem 0;
    color: #666;
    max-width: 500px;
}

.analysis-placeholder-card ul[b-a84lmf4ncy] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    text-align: left;
}

@media (max-width: 768px) {
    .analysis-placeholder-card ul[b-a84lmf4ncy] {
        grid-template-columns: 1fr;
    }
}

.analysis-placeholder-card li[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.analysis-placeholder-card li i[b-a84lmf4ncy] {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

/* ========================================
   OFSTED INSPECTION VIEW STYLES
   IMPLICATION: Styles for Ofsted data display from client database
   Framework grouping and grade display styles
   ======================================== */

/* Grade Colour Classes - Ofsted standard colours */
/* IMPLICATION: These colours match Ofsted's official grading colour scheme */
.grade-outstanding[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.grade-good[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    color: white;
}

.grade-ri[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: white;
}

.grade-inadequate[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
}

.grade-ungraded[b-a84lmf4ncy] {
    background: #e5e7eb;
    color: #6b7280;
}

/* Outcome Badge */
.outcome-badge[b-a84lmf4ncy] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
}

/* Grade Pills for grid display */
.grade-pill[b-a84lmf4ncy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.grade-pill.large[b-a84lmf4ncy] {
    width: auto;
    height: auto;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

.grade-pill.muted[b-a84lmf4ncy] {
    opacity: 0.6;
}

/* Executive View Styles */
.executive-view[b-a84lmf4ncy] {
    padding: 0;
}

.framework-summary-cards[b-a84lmf4ncy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.framework-card[b-a84lmf4ncy] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.framework-card:hover[b-a84lmf4ncy] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.framework-card-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.framework-card-header h4[b-a84lmf4ncy] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.school-count[b-a84lmf4ncy] {
    font-size: 0.85rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.framework-description[b-a84lmf4ncy] {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

/* Schools Section */
.schools-section[b-a84lmf4ncy] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    width: 100%;
    overflow-x: auto;
}

/* Ensure grid uses full width */
[b-a84lmf4ncy] .schools-section .e-grid {
    width: 100% !important;
    min-width: 100%;
}

[b-a84lmf4ncy] .schools-section .e-gridcontent {
    width: 100% !important;
}

[b-a84lmf4ncy] .schools-section .e-headercell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.section-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h3[b-a84lmf4ncy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h3 i[b-a84lmf4ncy] {
    color: #0C5FE3;
}

.filter-controls[b-a84lmf4ncy] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Detailed View Styles */
.detailed-view[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.framework-group[b-a84lmf4ncy] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.framework-group-header[b-a84lmf4ncy] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.framework-title[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.framework-title h3[b-a84lmf4ncy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.framework-title .badge[b-a84lmf4ncy] {
    background: #0C5FE3;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.framework-desc[b-a84lmf4ncy] {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

/* REIF School Cards - No overall grade */
.school-cards[b-a84lmf4ncy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

.school-card[b-a84lmf4ncy] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.school-card:hover[b-a84lmf4ncy] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.school-card.reif-card[b-a84lmf4ncy] {
    border-left: 4px solid #0C5FE3;
}

.school-card-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.school-card-header h5[b-a84lmf4ncy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.phase-badge[b-a84lmf4ncy] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: #e5e7eb;
    color: #4b5563;
    border-radius: 4px;
}

.school-card-body[b-a84lmf4ncy] {
    padding: 1rem;
}

.inspection-date[b-a84lmf4ncy] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inspection-date i[b-a84lmf4ncy] {
    color: #0C5FE3;
}

.sub-judgements[b-a84lmf4ncy] {
    display: grid;
    gap: 0.75rem;
}

.judgement[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.judgement .label[b-a84lmf4ncy] {
    font-size: 0.85rem;
    color: #4b5563;
}

.no-overall-notice[b-a84lmf4ncy] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #eff6ff;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.no-overall-notice i[b-a84lmf4ncy] {
    color: #3b82f6;
}

/* Deep Dive View Styles */
.deep-dive-view[b-a84lmf4ncy] {
    padding: 0;
}

.deep-dive-school-selector[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    margin-bottom: 1rem;
}

.deep-dive-school-selector .filter-item[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.deep-dive-school-selector .filter-label[b-a84lmf4ncy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.deep-dive-school-selector .filter-select[b-a84lmf4ncy] {
    flex: 1;
    max-width: 500px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1f2937;
    background: white;
    transition: border-color 0.15s ease;
}

.deep-dive-school-selector .filter-select:focus[b-a84lmf4ncy] {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.select-school-prompt[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
}

.select-school-prompt i[b-a84lmf4ncy] {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.select-school-prompt h3[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #1f2937;
}

.select-school-prompt p[b-a84lmf4ncy] {
    margin: 0;
    color: #6b7280;
    max-width: 400px;
}

.school-detail-card[b-a84lmf4ncy] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.school-detail-header[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.school-info h2[b-a84lmf4ncy] {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
}

.school-meta[b-a84lmf4ncy] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.school-meta span[b-a84lmf4ncy] {
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.school-meta span i[b-a84lmf4ncy] {
    color: #9ca3af;
}

.overall-grade[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 2rem;
    border-radius: 12px;
    min-width: 140px;
}

.overall-grade .grade-number[b-a84lmf4ncy] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.overall-grade .grade-label[b-a84lmf4ncy] {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.overall-grade .grade-sublabel[b-a84lmf4ncy] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.125rem;
}

.inspection-details[b-a84lmf4ncy] {
    padding: 1.5rem;
    display: grid;
    gap: 2rem;
}

.detail-section h4[b-a84lmf4ncy] {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.detail-row[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row .label[b-a84lmf4ncy] {
    font-size: 0.875rem;
    color: #6b7280;
}

.detail-row .value[b-a84lmf4ncy] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
}

.detail-row.category-concern[b-a84lmf4ncy] {
    background: #fef2f2;
    padding: 0.75rem;
    margin: 0.5rem -0.5rem;
    border-radius: 8px;
    border-bottom: none;
}

.detail-row.category-concern .label[b-a84lmf4ncy],
.detail-row.category-concern .value[b-a84lmf4ncy] {
    color: #b91c1c;
}

.judgements-grid[b-a84lmf4ncy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.judgement-item[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.judgement-label[b-a84lmf4ncy] {
    font-size: 0.85rem;
    color: #4b5563;
}

.judgement-grade[b-a84lmf4ncy] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Loading and No Data States */
.loading-state[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: #6b7280;
    font-size: 1.1rem;
}

.loading-state i[b-a84lmf4ncy] {
    font-size: 1.5rem;
    color: #0C5FE3;
}

.no-data-container[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
}

.no-data-container i[b-a84lmf4ncy] {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.no-data-container h3[b-a84lmf4ncy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #1f2937;
}

.no-data-container p[b-a84lmf4ncy] {
    margin: 0;
    color: #6b7280;
    max-width: 500px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .school-detail-header[b-a84lmf4ncy] {
        flex-direction: column;
    }

    .overall-grade[b-a84lmf4ncy] {
        width: 100%;
    }

    .judgements-grid[b-a84lmf4ncy] {
        grid-template-columns: 1fr;
    }

    .school-cards[b-a84lmf4ncy] {
        grid-template-columns: 1fr;
    }

    .framework-summary-cards[b-a84lmf4ncy] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   SCHOOL INSPECTION TIMELINE STYLES
   IMPLICATION: Multi-year timeline with school callout boxes
   Shows each school's last inspection date positioned on a timeline
   ======================================== */

.school-inspection-timeline[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: white;
    border-radius: 8px;
    padding: 0.75rem 0.75rem;
    border: 1px solid #e5e7eb;
    flex: 1;
    min-width: 0;
    width: 100%;
    overflow: visible;
}

/* Year markers along the top */
.timeline-years[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
}

.timeline-year-marker[b-a84lmf4ncy] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    flex: 1;
}

.timeline-year-marker.current-year[b-a84lmf4ncy] {
    color: #0C5FE3;
    font-weight: 700;
}

/* Main timeline track */
.timeline-track[b-a84lmf4ncy] {
    position: relative;
    height: 80px;
    margin: 0.25rem 0;
    overflow: visible;
}

/* Background urgency zones */
.timeline-urgency-zones[b-a84lmf4ncy] {
    display: flex;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.urgency-zone[b-a84lmf4ncy] {
    height: 100%;
}

.urgency-zone.overdue[b-a84lmf4ncy] {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
}

.urgency-zone.due[b-a84lmf4ncy] {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
}

.urgency-zone.in-window[b-a84lmf4ncy] {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
}

.urgency-zone.recent[b-a84lmf4ncy] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.urgency-zone.future[b-a84lmf4ncy] {
    background: linear-gradient(180deg, rgba(229, 231, 235, 0.3) 0%, rgba(229, 231, 235, 0.15) 100%);
}

/* School callout boxes container */
.timeline-callouts[b-a84lmf4ncy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* Individual school callout */
.school-callout[b-a84lmf4ncy] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
}

.school-callout .callout-dot[b-a84lmf4ncy] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7280;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, background 0.2s;
}

.school-callout .callout-label[b-a84lmf4ncy] {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
    background: white;
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.2s;
}

.school-callout:hover .callout-label[b-a84lmf4ncy] {
    opacity: 1;
}

.school-callout:hover .callout-dot[b-a84lmf4ncy] {
    transform: scale(1.3);
}

/* Due this year - amber styling */
.school-callout.due-this-year .callout-dot[b-a84lmf4ncy] {
    background: #f59e0b;
    border-color: #fef3c7;
    width: 14px;
    height: 14px;
}

.school-callout.due-this-year .callout-label[b-a84lmf4ncy] {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    opacity: 1;
}

/* Overdue - red styling */
.school-callout.overdue .callout-dot[b-a84lmf4ncy] {
    background: #ef4444;
    border-color: #fee2e2;
    width: 14px;
    height: 14px;
}

.school-callout.overdue .callout-label[b-a84lmf4ncy] {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
    opacity: 1;
}

/* Ungraded inspection indicator */
.school-callout.ungraded .callout-dot[b-a84lmf4ncy] {
    border-color: #10b981;
    border-width: 3px;
}

/* Requires Improvement - orange styling with shorter cycle indicator */
.school-callout.requires-improvement .callout-dot[b-a84lmf4ncy] {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.school-callout.requires-improvement .callout-label[b-a84lmf4ncy] {
    border: 1px solid #f59e0b;
}

/* Selected state - highlight clicked school */
.school-callout.selected .callout-dot[b-a84lmf4ncy] {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px rgba(12, 95, 227, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.school-callout.selected .callout-label[b-a84lmf4ncy] {
    opacity: 1;
    background: #0C5FE3;
    color: white;
    font-weight: 600;
}

/* Timeline Popup Card */
.timeline-popup-card[b-a84lmf4ncy] {
    position: absolute;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    z-index: 100;
    min-width: 260px;
    max-width: 320px;
    border: 1px solid #e5e7eb;
    animation: popup-fade-in-b-a84lmf4ncy 0.15s ease-out;
}

@keyframes popup-fade-in-b-a84lmf4ncy {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Arrow pointing up from card to dot */
.timeline-popup-card[b-a84lmf4ncy]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
}

.popup-close[b-a84lmf4ncy] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem;
    line-height: 1;
}

.popup-close:hover[b-a84lmf4ncy] {
    color: #4b5563;
}

.popup-school-name[b-a84lmf4ncy] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    padding-right: 1.5rem;
    line-height: 1.3;
}

.popup-details[b-a84lmf4ncy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.popup-detail-row[b-a84lmf4ncy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.popup-label[b-a84lmf4ncy] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.popup-value[b-a84lmf4ncy] {
    font-size: 0.8rem;
    color: #1f2937;
    font-weight: 600;
}

.popup-value.outcome-badge[b-a84lmf4ncy] {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

.popup-status[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.popup-status.status-overdue[b-a84lmf4ncy] {
    background: #fee2e2;
    color: #991b1b;
}

.popup-status.status-due[b-a84lmf4ncy] {
    background: #fef3c7;
    color: #92400e;
}

/* "Now" indicator */
.timeline-now-indicator[b-a84lmf4ncy] {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 5;
}

.timeline-now-indicator .now-line[b-a84lmf4ncy] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #0C5FE3;
    transform: translateX(-50%);
}

.timeline-now-indicator .now-label[b-a84lmf4ncy] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    color: #0C5FE3;
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #0C5FE3;
}

/* Summary statistics */
.timeline-summary-stats[b-a84lmf4ncy] {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.summary-stat[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.summary-stat .stat-count[b-a84lmf4ncy] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.summary-stat .stat-text[b-a84lmf4ncy] {
    font-size: 0.75rem;
    color: #6b7280;
}

.summary-stat.due-highlight .stat-count[b-a84lmf4ncy] {
    color: #d97706;
}

.summary-stat.due-highlight .stat-text[b-a84lmf4ncy] {
    color: #92400e;
}

.summary-stat.overdue-highlight .stat-count[b-a84lmf4ncy] {
    color: #dc2626;
}

.summary-stat.overdue-highlight .stat-text[b-a84lmf4ncy] {
    color: #991b1b;
}

.idsr-count-badge[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #eff6ff;
    color: #1e40af;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.idsr-count-badge i[b-a84lmf4ncy] {
    color: #3b82f6;
}

@media (max-width: 768px) {
    .timeline-summary[b-a84lmf4ncy] {
        justify-content: center;
    }

    .timeline-divider[b-a84lmf4ncy] {
        display: none;
    }

    .timeline-stat[b-a84lmf4ncy] {
        padding: 0.5rem;
    }

    .timeline-legend[b-a84lmf4ncy] {
        justify-content: center;
    }
}

/* ========================================
   UNGRADED INSPECTION INDICATOR
   IMPLICATION: Shows when a school's date comes from an ungraded inspection
   that confirmed their grade (e.g., "School continues to be good")
   ======================================== */

.ungraded-indicator[b-a84lmf4ncy] {
    color: #10b981;
    font-size: 0.75rem;
    margin-left: 0.375rem;
    cursor: help;
}

/* Framework info icon in grid */
.framework-cell[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.framework-info-icon[b-a84lmf4ncy] {
    color: #9ca3af;
    font-size: 0.75rem;
    cursor: help;
    transition: color 0.2s;
}

.framework-info-icon:hover[b-a84lmf4ncy] {
    color: #0C5FE3;
}

/* ========================================
   EXPECTED INSPECTION CALLOUTS
   IMPLICATION: Duplicate callouts for schools due/overdue
   shown to the LEFT of "Now" to indicate expected soon
   ======================================== */

/* Expected inspection callout - pulsing animation to draw attention */
.school-callout.expected-inspection .callout-dot[b-a84lmf4ncy] {
    animation: pulse-expected-b-a84lmf4ncy 2s ease-in-out infinite;
}

.school-callout.expected-inspection .callout-label[b-a84lmf4ncy] {
    opacity: 1 !important;
    font-weight: 600;
    border: 2px dashed;
    background: rgba(255, 255, 255, 0.95);
}

/* Due this year expected - amber dashed border */
.school-callout.expected-inspection.due-this-year .callout-label[b-a84lmf4ncy] {
    border-color: #f59e0b;
    color: #92400e;
}

/* Overdue expected - red dashed border */
.school-callout.expected-inspection.overdue .callout-label[b-a84lmf4ncy] {
    border-color: #ef4444;
    color: #991b1b;
}

/* Pulse animation for expected inspection dots */
@keyframes pulse-expected-b-a84lmf4ncy {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
        transform: scale(1.1);
    }
}

/* ========================================
   SCHOOL DETAIL VIEW - ADDITIONAL SECTIONS
   IMPLICATION: Styles for ungraded inspections and data source info
   ======================================== */

/* Section header icons */
.detail-section h4 i[b-a84lmf4ncy] {
    margin-right: 0.5rem;
    color: #0C5FE3;
}

/* Ungraded inspection section styling */
.detail-section.ungraded-section[b-a84lmf4ncy] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-left: 4px solid #10b981;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.detail-section.ungraded-section h4[b-a84lmf4ncy] {
    border-bottom-color: #10b981;
}

.detail-section.ungraded-section h4 i[b-a84lmf4ncy] {
    color: #10b981;
}

.ungraded-outcome[b-a84lmf4ncy] {
    font-weight: 500;
    color: #059669;
}

.ungraded-confirmation-notice[b-a84lmf4ncy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #d1fae5;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #065f46;
}

.ungraded-confirmation-notice i[b-a84lmf4ncy] {
    color: #10b981;
}

/* Effective date notice */
.effective-date-notice[b-a84lmf4ncy] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #eff6ff;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #1e40af;
}

.effective-date-notice i[b-a84lmf4ncy] {
    color: #3b82f6;
    margin-top: 0.125rem;
}

/* Data source section styling */
.detail-section.data-source-section[b-a84lmf4ncy] {
    background: #f9fafb;
    border-left: 4px solid #9ca3af;
    padding: 1rem 1.25rem;
    border-radius: 8px;
}

.detail-section.data-source-section h4[b-a84lmf4ncy] {
    color: #6b7280;
    border-bottom-color: #d1d5db;
    font-size: 0.95rem;
}

.detail-section.data-source-section h4 i[b-a84lmf4ncy] {
    color: #9ca3af;
}

.detail-section.data-source-section .detail-row[b-a84lmf4ncy] {
    font-size: 0.85rem;
}

.detail-section.data-source-section .value[b-a84lmf4ncy] {
    color: #6b7280;
}

/* ========================================
   ICON-ONLY ACTION BUTTONS
   IMPLICATION: Compact button styling for grid actions to save space
   ======================================== */

/* Icon-only action buttons in grid cells */
.action-buttons.icon-only[b-a84lmf4ncy] {
    display: flex !important;
    gap: 0.375rem;
    justify-content: center;
}

.btn-icon-action[b-a84lmf4ncy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: transparent;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.btn-icon-action:hover[b-a84lmf4ncy] {
    background: #f8f9fa;
    border-color: #0C5FE3;
    color: #0C5FE3;
}

.btn-icon-action:active[b-a84lmf4ncy] {
    background: #e9f0ff;
}

/* Delete button styling */
.btn-icon-action.delete[b-a84lmf4ncy] {
    color: #6c757d;
}

.btn-icon-action.delete:hover[b-a84lmf4ncy] {
    background: #fee2e2;
    border-color: #dc3545;
    color: #dc3545;
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/SchoolProfileV2.razor.rz.scp.css */
.page-header[b-gb46bcb0c6] {
    margin-bottom: 2rem;
}

.header-main-row[b-gb46bcb0c6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 2rem;
}

.header-title-group[b-gb46bcb0c6] {
    flex: 1;
}

.header-title-group h1[b-gb46bcb0c6] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
}

.header-subtitle[b-gb46bcb0c6] {
    margin: 0;
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.5;
}

.view-toggle[b-gb46bcb0c6] {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}

.view-toggle .btn[b-gb46bcb0c6] {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-toggle .btn i[b-gb46bcb0c6] {
    font-size: 0.875rem;
}

.view-toggle .btn-primary[b-gb46bcb0c6] {
    background-color: #0C5FE3 !important;
    border-color: #0C5FE3 !important;
    color: white;
}

.view-toggle .btn-primary:hover[b-gb46bcb0c6] {
    background-color: #0a4fc0 !important;
    border-color: #0a4fc0 !important;
}

.view-toggle .btn-primary:active[b-gb46bcb0c6],
.view-toggle .btn-primary:focus[b-gb46bcb0c6] {
    background-color: #083fa0 !important;
    border-color: #083fa0 !important;
    box-shadow: 0 0 0 0.2rem rgba(12, 95, 227, 0.25) !important;
}

.view-toggle .btn-outline-primary[b-gb46bcb0c6] {
    color: #0C5FE3;
    border-color: #dee2e6;
}

.view-toggle .btn-outline-primary:hover[b-gb46bcb0c6] {
    background-color: #f0f6ff;
    border-color: #0C5FE3;
    color: #0C5FE3;
}

.header-filters-row[b-gb46bcb0c6] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group[b-gb46bcb0c6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 250px;
    flex: 1;
}

.filter-group-short[b-gb46bcb0c6] {
    min-width: 200px;
    flex: 0 0 200px;
}

.filter-group-trust[b-gb46bcb0c6] {
    min-width: auto;
    flex: 0 0 auto;
    margin-left: auto;
}

.summary-card-inline[b-gb46bcb0c6] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 140px;
    flex: 0 0 auto;
}

.summary-card-inline .metric-label[b-gb46bcb0c6] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-card-inline .metric-value[b-gb46bcb0c6] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.filter-group label[b-gb46bcb0c6] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    margin: 0;
}

.trust-uid-controls[b-gb46bcb0c6] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.trust-autocomplete-wrapper[b-gb46bcb0c6] {
    position: relative;
    width: 320px;
}

.trust-uid-controls .form-control[b-gb46bcb0c6] {
    width: 100%;
    height: 38px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 2px solid #ced4da;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.trust-uid-controls .form-control:focus[b-gb46bcb0c6] {
    border-color: #0C5FE3;
    box-shadow: 0 0 0 0.2rem rgba(12, 95, 227, 0.25);
    outline: none;
}

.trust-dropdown[b-gb46bcb0c6] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.trust-dropdown-item[b-gb46bcb0c6] {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

    .trust-dropdown-item:last-child[b-gb46bcb0c6] {
        border-bottom: none;
    }

    .trust-dropdown-item:hover[b-gb46bcb0c6] {
        background-color: #f8f9fa;
    }

.trust-name[b-gb46bcb0c6] {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.trust-uid[b-gb46bcb0c6] {
    font-size: 0.85rem;
    color: #6c757d;
}

.trust-apply-btn[b-gb46bcb0c6],
.trust-clear-btn[b-gb46bcb0c6] {
    white-space: nowrap;
    height: 38px;
    padding: 0 1.25rem;
    font-size: 0.95rem;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-apply-btn[b-gb46bcb0c6] {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

    .trust-apply-btn:hover:not(:disabled)[b-gb46bcb0c6] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

    .trust-apply-btn:disabled[b-gb46bcb0c6] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.trust-clear-btn[b-gb46bcb0c6] {
    border: 2px solid #2563eb;
    color: #2563eb;
    background: white;
}

    .trust-clear-btn:hover[b-gb46bcb0c6] {
        background: #eff6ff;
    }

.filter-group .form-select[b-gb46bcb0c6] {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 2px solid #ced4da;
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-group .form-select:hover[b-gb46bcb0c6] {
    border-color: #0d6efd;
}

.filter-group .form-select:focus[b-gb46bcb0c6] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.ai-opendata-section[b-gb46bcb0c6] {
    margin: 0 0 1.5rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-section-header[b-gb46bcb0c6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px 8px 0 0;
}

.ai-section-header:hover[b-gb46bcb0c6] {
    background-color: #f9fafb;
}

.ai-header-left[b-gb46bcb0c6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-icon-wrapper[b-gb46bcb0c6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981 0%, #02e29c 100%);
    color: white;
    font-size: 1.25rem;
}

.ai-title-block h3[b-gb46bcb0c6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.ai-title-block p[b-gb46bcb0c6] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.ai-section-header .fa-chevron-down[b-gb46bcb0c6] {
    font-size: 1.25rem;
    color: #9ca3af;
    transition: transform 0.3s ease;
}

.ai-section-header .fa-chevron-down.chevron-expanded[b-gb46bcb0c6] {
    transform: rotate(180deg);
}

.ai-section-body[b-gb46bcb0c6] {
    padding: 1.25rem;
    border-top: 1px solid #e5e7eb;
    background-color: #fafbfc;
}

.ai-controls[b-gb46bcb0c6] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ai-control-group[b-gb46bcb0c6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 1 auto;
}

.ai-generate-btn[b-gb46bcb0c6] {
    background: linear-gradient(135deg, #10b981 0%, #02e29c 100%);
    color: white;
    border: none;
    padding: 0.625rem 1.5rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.ai-generate-btn:hover:not(:disabled)[b-gb46bcb0c6] {
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.ai-generate-btn:disabled[b-gb46bcb0c6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-response-container[b-gb46bcb0c6] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
    min-height: 200px;
    max-height: 600px;
    overflow-y: auto;
}

.ai-response-header[b-gb46bcb0c6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.ai-response-title[b-gb46bcb0c6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f2937;
}

.ai-response-timestamp[b-gb46bcb0c6] {
    font-size: 0.8125rem;
    color: #6b7280;
}

.ai-response-content[b-gb46bcb0c6] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #374151;
    white-space: pre-wrap;
}

.ai-error-message[b-gb46bcb0c6] {
    color: #dc2626;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.ai-generating-indicator[b-gb46bcb0c6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    font-style: italic;
}

.ai-spinner[b-gb46bcb0c6] {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-gb46bcb0c6 0.8s linear infinite;
}

@keyframes spin-b-gb46bcb0c6 {
    to {
        transform: rotate(360deg);
    }
}

.page-body[b-gb46bcb0c6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.loading-state[b-gb46bcb0c6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

.no-data-container[b-gb46bcb0c6] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.no-data-container i[b-gb46bcb0c6] {
    font-size: 2rem;
    color: #f59e0b;
}

.no-data-container ul[b-gb46bcb0c6] {
    text-align: left;
    margin: 0;
}

/* Gray out disabled metric options in dropdown */
#metric-select option:disabled[b-gb46bcb0c6] {
    color: #999;
    background-color: #f5f5f5;
    font-style: italic;
}
/* _content/OEAI.Apps.SaaS/Pages/OpenData/TrustFinance.razor.rz.scp.css */
/* Scoped CSS for Open Financial Data / Trust Finance page. */
/* Created per AB#1747 / UX-CONSISTENCY-REVIEW.md §6.2 to style the */
/* per-pupil clarification banner that sits above every view. */

/* Per-pupil clarification banner — sits between the sub-header strip and    */
/* the view content on Detailed / By-school. On the Overview tab the note is */
/* rendered inline inside the content-view-toolbar instead (see              */
/* .per-pupil-note below) so it shares a row with the Grid/List toggle.       */
/* IMPLICATION: Removing this banner reintroduces the ambiguity flagged in §6.2. */
.per-pupil-clarification-banner[b-mwpeoq0gks] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 2.5rem 0.75rem 2.5rem;
    padding: 0.5rem 0.85rem;
    background: rgba(15, 42, 102, 0.06);
    border-left: 3px solid #0F2A66;
    border-radius: 6px;
    color: #1f2937;
    font-size: 0.875rem;
    line-height: 1.4;
}

.per-pupil-clarification-banner i[b-mwpeoq0gks] {
    color: #0F2A66;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.per-pupil-clarification-banner strong[b-mwpeoq0gks],
.per-pupil-clarification-banner em[b-mwpeoq0gks] {
    color: #0F2A66;
    font-style: normal;
    font-weight: 600;
}

/* Overview tab toolbar: per-pupil note on the left, Grid/List toggle on the */
/* right, sharing a row. Overrides the canonical .content-view-toolbar's     */
/* `justify-content: flex-end` because we now have a left-side item to align  */
/* against. */
.content-view-toolbar.finance-overview-toolbar[b-mwpeoq0gks] {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Compact in-toolbar variant of the per-pupil note. No background pill —    */
/* the toolbar's surrounding chrome already separates it from the content. */
.per-pupil-note[b-mwpeoq0gks] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
    font-size: 0.85rem;
    line-height: 1.3;
}

.per-pupil-note i[b-mwpeoq0gks] {
    color: #0F2A66;
    font-size: 0.95rem;
}

.per-pupil-note strong[b-mwpeoq0gks],
.per-pupil-note em[b-mwpeoq0gks] {
    color: #0F2A66;
    font-style: normal;
    font-weight: 600;
}

@media (max-width: 768px) {
    .per-pupil-clarification-banner[b-mwpeoq0gks] {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/PowerBI/PbiActivityPanel.razor.rz.scp.css */
/* Scoped CSS for PbiActivityPanel.razor
   Styles the side drawer panel, minimized pill, activity rows, status indicators, and AI suggestion box.
   IMPLICATION: Removing this file removes all visual styling for the activity panel. */

/* Side drawer — slides in from the right edge, does not block page interaction */
/* Uses fixed positioning so it stays visible during page scroll */
.pbi-activity-drawer[b-rwyg1k9v67] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    animation: drawer-slide-in-b-rwyg1k9v67 0.25s ease-out;
}

/* Slide-in animation from right edge */
@keyframes drawer-slide-in-b-rwyg1k9v67 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Container fills the drawer height and provides white background */
.pbi-activity-container[b-rwyg1k9v67] {
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Floating pill shown when panel is minimized — fixed at bottom-right of viewport */
/* Displays running operation count or "Activity" label when idle */
.pbi-activity-pill[b-rwyg1k9v67] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
}

.pbi-activity-pill:hover[b-rwyg1k9v67] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

/* Pulse animation when a new completion arrives while minimized — draws user attention */
.pbi-activity-pill-pulse[b-rwyg1k9v67] {
    animation: pill-pulse-b-rwyg1k9v67 0.6s ease-in-out 3;
}

@keyframes pill-pulse-b-rwyg1k9v67 {
    0% { transform: scale(1); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37, 99, 235, 0.6); }
    100% { transform: scale(1); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4); }
}

/* Yellow notification dot on pill indicating unseen completions */
.pbi-activity-pill-badge[b-rwyg1k9v67] {
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Header with blue gradient matching the app design system */
.pbi-activity-header[b-rwyg1k9v67] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.pbi-activity-header-left[b-rwyg1k9v67] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

/* Running count badge displayed in header when operations are active */
.pbi-activity-running-badge[b-rwyg1k9v67] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Header action buttons container (minimize and close) */
.pbi-activity-header-actions[b-rwyg1k9v67] {
    display: flex;
    gap: 0.25rem;
}

/* Transparent header buttons with hover effect */
.pbi-activity-header-btn[b-rwyg1k9v67] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.pbi-activity-header-btn:hover[b-rwyg1k9v67] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Scrollable body area containing activity rows */
.pbi-activity-body[b-rwyg1k9v67] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}

/* Empty state styling when no activities exist */
.pbi-activity-empty[b-rwyg1k9v67] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.pbi-activity-empty i[b-rwyg1k9v67] {
    font-size: 2.5rem;
    color: #d1d5db;
    margin-bottom: 1rem;
    display: block;
}

.pbi-activity-empty p[b-rwyg1k9v67] {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: #4b5563;
}

.pbi-activity-empty small[b-rwyg1k9v67] {
    color: #9ca3af;
}

/* Activity list container with vertical spacing */
.pbi-activity-list[b-rwyg1k9v67] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual activity row with left border colour indicating status */
.pbi-activity-row[b-rwyg1k9v67] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-left-width: 4px;
    transition: border-color 0.2s;
}

/* Blue left border for in-progress operations */
.pbi-activity-row-loading[b-rwyg1k9v67] {
    border-left-color: #2563eb;
    background: #eff6ff;
}

/* Green left border for successful operations */
.pbi-activity-row-success[b-rwyg1k9v67] {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

/* Red left border for failed operations */
.pbi-activity-row-failed[b-rwyg1k9v67] {
    border-left-color: #dc2626;
    background: #fef2f2;
}

/* Default grey left border */
.pbi-activity-row-default[b-rwyg1k9v67] {
    border-left-color: #9ca3af;
}

/* Row header with status icon, name, badge, and timestamp */
.pbi-activity-row-header[b-rwyg1k9v67] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pbi-activity-status-icon[b-rwyg1k9v67] {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.pbi-activity-report-name[b-rwyg1k9v67] {
    font-weight: 600;
    color: #1f2937;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action badge colour coding for different operation types */
.pbi-activity-action-badge[b-rwyg1k9v67] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.badge-deploy[b-rwyg1k9v67] { background: #dbeafe; color: #1d4ed8; }
.badge-refresh[b-rwyg1k9v67] { background: #d1fae5; color: #059669; }
.badge-update[b-rwyg1k9v67] { background: #fef3c7; color: #b45309; }
.badge-delete[b-rwyg1k9v67] { background: #fee2e2; color: #dc2626; }
.badge-default[b-rwyg1k9v67] { background: #f3f4f6; color: #6b7280; }

.pbi-activity-timestamp[b-rwyg1k9v67] {
    color: #9ca3af;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Details row with branch, message, and copy button */
.pbi-activity-row-details[b-rwyg1k9v67] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #6b7280;
    padding-left: 1.75rem;
}

.pbi-activity-branch[b-rwyg1k9v67] {
    flex-shrink: 0;
    color: #7c3aed;
    font-size: 0.8rem;
}

.pbi-activity-message[b-rwyg1k9v67] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbi-activity-copy-btn[b-rwyg1k9v67] {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

.pbi-activity-copy-btn:hover[b-rwyg1k9v67] {
    color: #2563eb;
}

/* Completed timestamp row */
.pbi-activity-row-completed[b-rwyg1k9v67] {
    padding-left: 1.75rem;
    margin-top: 0.25rem;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* AI section for failed operations */
.pbi-activity-ai-section[b-rwyg1k9v67] {
    margin-top: 0.5rem;
    padding-left: 1.75rem;
}

/* AI suggestion box with green accent border */
.pbi-activity-ai-suggestion[b-rwyg1k9v67] {
    margin-top: 0.5rem;
    border: 1px solid #86efac;
    border-radius: 8px;
    background: #f0fdf4;
    overflow: hidden;
}

.pbi-activity-ai-suggestion-header[b-rwyg1k9v67] {
    background: #dcfce7;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #166534;
}

.pbi-activity-ai-suggestion-body[b-rwyg1k9v67] {
    padding: 0.75rem;
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Footer area with Load History button */
.pbi-activity-footer[b-rwyg1k9v67] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: #f9fafb;
}

.pbi-activity-history-note[b-rwyg1k9v67] {
    color: #6b7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pbi-activity-history-note i[b-rwyg1k9v67] {
    color: #16a34a;
}

/* ==========================================
   Check Status section styles
   Mirrors the AI suggestion pattern with blue accent instead of green.
   IMPLICATION: Removing these styles breaks the Check Status results display.
   ========================================== */

/* Container for the Check Status button and results — mirrors .pbi-activity-ai-section */
.pbi-activity-status-section[b-rwyg1k9v67] {
    margin-top: 0.5rem;
    padding-left: 1.75rem;
}

/* Status result card with blue accent border */
.pbi-activity-status-result[b-rwyg1k9v67] {
    margin-top: 0.5rem;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #eff6ff;
    overflow: hidden;
}

/* Result header with info icon, title, timestamp, and re-check button */
.pbi-activity-status-result-header[b-rwyg1k9v67] {
    background: #dbeafe;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e40af;
}

/* Timestamp shown in header — pushed to the right */
.pbi-status-checked-at[b-rwyg1k9v67] {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b7280;
}

/* Re-check button in header — transparent with hover effect */
.pbi-activity-recheck-btn[b-rwyg1k9v67] {
    background: transparent;
    border: none;
    color: #2563eb;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: background 0.15s;
}

.pbi-activity-recheck-btn:hover[b-rwyg1k9v67] {
    background: rgba(37, 99, 235, 0.15);
}

/* Error message inside status result */
.pbi-status-error[b-rwyg1k9v67] {
    padding: 0.5rem 0.75rem;
    color: #dc2626;
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.pbi-status-error i[b-rwyg1k9v67] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* 2-column grid for report metadata (Last Modified, Dataset ID) */
.pbi-status-summary[b-rwyg1k9v67] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #bfdbfe;
}

.pbi-status-field[b-rwyg1k9v67] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pbi-status-label[b-rwyg1k9v67] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
}

.pbi-status-value[b-rwyg1k9v67] {
    font-size: 0.85rem;
    color: #1f2937;
}

/* Monospace font for IDs */
.pbi-status-mono[b-rwyg1k9v67] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

/* History entries container */
.pbi-status-history[b-rwyg1k9v67] {
    padding: 0.5rem 0.75rem;
}

.pbi-status-history-label[b-rwyg1k9v67] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Individual history entry row */
.pbi-status-history-row[b-rwyg1k9v67] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.pbi-status-history-row:last-child[b-rwyg1k9v67] {
    border-bottom: none;
}

/* Status badge with colour coding */
.pbi-status-badge[b-rwyg1k9v67] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Refresh status colours */
.pbi-status-completed[b-rwyg1k9v67] {
    background: #d1fae5;
    color: #059669;
}

.pbi-status-failed[b-rwyg1k9v67] {
    background: #fee2e2;
    color: #dc2626;
}

.pbi-status-in-progress[b-rwyg1k9v67] {
    background: #dbeafe;
    color: #2563eb;
}

.pbi-status-disabled[b-rwyg1k9v67] {
    background: #f3f4f6;
    color: #6b7280;
}

.pbi-status-deleted[b-rwyg1k9v67] {
    background: #fef3c7;
    color: #b45309;
}

.pbi-status-default[b-rwyg1k9v67] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Timestamp in history row */
.pbi-status-time[b-rwyg1k9v67] {
    color: #6b7280;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Message text in deployment history row — truncated with ellipsis */
.pbi-status-message[b-rwyg1k9v67] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
    font-size: 0.75rem;
    min-width: 0;
}

/* Empty state when no history entries found */
.pbi-status-empty[b-rwyg1k9v67] {
    padding: 0.5rem 0.75rem;
    color: #9ca3af;
    text-align: center;
}
/* _content/OEAI.Apps.SaaS/Pages/PowerBI/PbiManagement.razor.rz.scp.css */
/* Scoped CSS for PbiManagement.razor
   Contains styles previously inline in the razor file.
   IMPLICATION: Removing this file removes all page-specific styling for PBI Management. */

/* Hides the Syncfusion tab header strip — custom tab buttons in the header replace it */
[b-qddrg924uf] .e-toolbar {
    display: none !important;
}

/* Removes default bottom margin from the page header */
[b-qddrg924uf] .modern-page-header {
    margin-bottom: 0rem !important;
}

/* Delete confirmation modal backdrop */
.pbi-delete-modal-backdrop[b-qddrg924uf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.pbi-delete-modal[b-qddrg924uf] {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    width: 90%;
}

.pbi-delete-actions[b-qddrg924uf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Path configuration modal backdrop */
.pbi-path-modal-backdrop[b-qddrg924uf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.pbi-path-modal[b-qddrg924uf] {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    width: 70%;
    max-width: 95%;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

.pbi-path-modal h3[b-qddrg924uf] {
    margin: 0 0 0.35rem 0;
    font-size: 1.25rem;
}

.pbi-path-modal p[b-qddrg924uf] {
    margin: 0 0 1rem 0;
    color: #4b5563;
}

.pbi-path-field[b-qddrg924uf] {
    margin-bottom: 0.85rem;
}

.pbi-path-field label[b-qddrg924uf] {
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
}

.pbi-path-input[b-qddrg924uf] {
    width: 100%;
}

.pbi-path-modal-actions[b-qddrg924uf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ─── Upload card section ─── */

/* Main card container with subtle border and shadow */
.pbi-upload-card[b-qddrg924uf] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Card header — icon + title side by side */
.pbi-upload-header[b-qddrg924uf] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Circular icon container with blue accent */
.pbi-upload-header-icon[b-qddrg924uf] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

/* Title text — no extra margin since parent handles spacing */
.pbi-upload-title[b-qddrg924uf] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

/* Subtitle description below title */
.pbi-upload-subtitle[b-qddrg924uf] {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Loading state shown while branches and PBIX files are being fetched */
.pbi-upload-loading[b-qddrg924uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.pbi-upload-loading i[b-qddrg924uf] {
    color: #2563eb;
    font-size: 1.1rem;
}

/* Two-column form layout for branch + file dropdowns */
.pbi-upload-form[b-qddrg924uf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Individual field wrapper */
.pbi-upload-field[b-qddrg924uf] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Label with icon — slightly bold, muted colour */
.pbi-upload-label[b-qddrg924uf] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pbi-upload-label i[b-qddrg924uf] {
    color: #6b7280;
    font-size: 0.78rem;
}

/* Selected file indicator — green accent for valid selection */
.pbi-upload-selection[b-qddrg924uf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #166534;
    margin-bottom: 1rem;
}

.pbi-upload-selection i[b-qddrg924uf] {
    color: #16a34a;
}

/* Empty selection state — amber accent for informational */
.pbi-upload-selection-empty[b-qddrg924uf] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.pbi-upload-selection-empty i[b-qddrg924uf] {
    color: #d97706;
}

/* Action bar — buttons aligned to the right */
.pbi-upload-actions[b-qddrg924uf] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;

}

/* Deploy button override — slightly larger for emphasis */
[b-qddrg924uf] .pbi-deploy-btn {
    min-width: 180px;
}

/* Activity button override — flat style */
[b-qddrg924uf] .pbi-activity-btn {
    color: #4b5563;
}

/* Stack form fields on narrow viewports */
@media (max-width: 640px) {
    .pbi-upload-form[b-qddrg924uf] {
        grid-template-columns: 1fr;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/PowerBI/PbiScheduleRefreshDialog.razor.rz.scp.css */
/* Scoped CSS for PbiScheduleRefreshDialog.razor
   Follows the .pbi-delete-modal-backdrop / .pbi-path-modal pattern from PbiManagement.razor.css
   IMPLICATION: Removing this file removes all styling for the schedule refresh dialog */

/* Full-screen backdrop overlay — centres the modal and blocks interaction with content behind */
.pbi-schedule-modal-backdrop[b-wg40nwccvl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* Modal container — white card with rounded corners and drop shadow */
.pbi-schedule-modal[b-wg40nwccvl] {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    max-width: 520px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.pbi-schedule-modal h4[b-wg40nwccvl] {
    margin: 0 0 1rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #111827;
}

/* Loading spinner container */
.pbi-schedule-loading[b-wg40nwccvl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0;
    justify-content: center;
    color: #6b7280;
}

.pbi-schedule-loading i[b-wg40nwccvl] {
    color: #2563eb;
}

/* Error message displayed when schedule retrieval fails */
.pbi-schedule-error[b-wg40nwccvl] {
    color: #dc2626;
    font-size: 0.9rem;
    margin: 1rem 0 0.25rem 0;
}

/* Detailed error message from the PBI API — shown below the generic error in a muted box */
.pbi-schedule-error-detail[b-wg40nwccvl] {
    font-size: 0.8rem;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0 1rem 0;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Form field wrapper — label + control with consistent spacing */
.pbi-schedule-field[b-wg40nwccvl] {
    margin-bottom: 1rem;
}

.pbi-schedule-field > label[b-wg40nwccvl] {
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: #374151;
}

/* Day checkbox row — wraps horizontally */
.pbi-schedule-days[b-wg40nwccvl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Time chips container — wraps added times as small tags */
.pbi-schedule-times[b-wg40nwccvl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

/* Individual time chip — small rounded tag with remove button */
.pbi-schedule-time-chip[b-wg40nwccvl] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #e5e7eb;
    border-radius: 16px;
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    color: #374151;
}

/* Remove button inside a time chip */
.pbi-schedule-chip-remove[b-wg40nwccvl] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.pbi-schedule-chip-remove:hover[b-wg40nwccvl] {
    color: #dc2626;
}

/* Time picker + Add button row */
.pbi-schedule-time-add[b-wg40nwccvl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Action buttons row — right-aligned Save and Cancel */
.pbi-schedule-actions[b-wg40nwccvl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
/* _content/OEAI.Apps.SaaS/Pages/PowerBI/PbiUpdateReportDialog.razor.rz.scp.css */
/* Scoped CSS for PbiUpdateReportDialog.razor.
   Mirrors the .pbi-schedule-modal-* / .pbi-delete-modal-* patterns used elsewhere on
   the Power BI Management page so the visual language stays consistent.
   IMPLICATION: Removing this file leaves the Update Report popup unstyled (raw white box). */

/* Full-screen backdrop overlay */
.pbi-update-modal-backdrop[b-sxfuvfrqya] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* Modal card */
.pbi-update-modal[b-sxfuvfrqya] {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    max-width: 560px;
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
}

.pbi-update-modal h4[b-sxfuvfrqya] {
    margin: 0 0 1rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #111827;
}

/* Form field — label + control with consistent spacing */
.pbi-update-field[b-sxfuvfrqya] {
    margin-bottom: 1rem;
}

.pbi-update-field > label[b-sxfuvfrqya] {
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: #374151;
}

.pbi-update-field > label > i[b-sxfuvfrqya] {
    margin-right: 0.35rem;
    color: #2563eb;
}

/* Inline loading row used inside fields while data is being fetched */
.pbi-update-inline-loading[b-sxfuvfrqya] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

.pbi-update-inline-loading i[b-sxfuvfrqya] {
    color: #2563eb;
}

/* Empty state shown when a branch has no PBIX files / no commit history */
.pbi-update-empty[b-sxfuvfrqya] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.pbi-update-empty i[b-sxfuvfrqya] {
    color: #9ca3af;
}

/* Commit info card */
.pbi-update-commit[b-sxfuvfrqya] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.pbi-update-commit-title[b-sxfuvfrqya] {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.pbi-update-commit-title i[b-sxfuvfrqya] {
    color: #2563eb;
    margin-right: 0.35rem;
}

.pbi-update-commit-row[b-sxfuvfrqya] {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.2rem 0;
    font-size: 0.88rem;
}

.pbi-update-commit-label[b-sxfuvfrqya] {
    flex: 0 0 100px;
    color: #6b7280;
    font-weight: 500;
}

.pbi-update-commit-value[b-sxfuvfrqya] {
    color: #111827;
    word-break: break-word;
}

.pbi-update-commit-message[b-sxfuvfrqya] {
    white-space: pre-wrap;
}

/* Action bar — right-aligned Cancel + Update */
.pbi-update-actions[b-sxfuvfrqya] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
/* _content/OEAI.Apps.SaaS/Pages/PowerBI/PowerBIRlsManagement.razor.rz.scp.css */
/* Ensures dropdown popups render on top of dialog modals */
/* The z-index must be higher than the Syncfusion dialog backdrop and content */
/* Syncfusion dialog typically uses z-index around 1000-1050 */
/* Setting this to 10000 ensures dropdowns always appear on top */
/* IMPLICATION: Removing this will cause dropdowns to render behind dialog modals */

[b-yihmq7c4fy] .rz-dropdown-panel {
    z-index: 10000 !important;
}

/* Alternative selector for Radzen dropdown popup */
[b-yihmq7c4fy] .rz-popup {
    z-index: 10000 !important;
}

/* Ensures the popup container has proper positioning */
[b-yihmq7c4fy] .rz-dropdown-items-wrapper {
    z-index: 10000 !important;
}

/* Additional selectors for Radzen components to ensure proper layering */
[b-yihmq7c4fy] .rz-multiselect-panel {
    z-index: 10000 !important;
}

[b-yihmq7c4fy] .rz-dropdown-items {
    z-index: 10000 !important;
}

/* Ensures dropdown overlay renders on top */
[b-yihmq7c4fy] .rz-overlaypanel {
    z-index: 10000 !important;
}

/* Power BI RLS refresh status banner — shown after any assignment change so admins see what was done and what is pending.
   Each colour variant signals a distinct outcome: blue=in-progress, green=queued, yellow=no-op, red=failed.
   IMPLICATION: Removing these styles breaks the auto-refresh feedback visible on this page. */
.rls-refresh-status[b-yihmq7c4fy] {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.rls-status-icon[b-yihmq7c4fy] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.rls-refresh-status strong[b-yihmq7c4fy] {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 600;
}

.rls-refresh-status span[b-yihmq7c4fy] {
    display: block;
    opacity: 0.85;
}

.rls-refresh-status.pending[b-yihmq7c4fy] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
}

.rls-refresh-status.done[b-yihmq7c4fy] {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.rls-refresh-status.none[b-yihmq7c4fy] {
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
}

.rls-refresh-status.failed[b-yihmq7c4fy] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
/* _content/OEAI.Apps.SaaS/Pages/PrivacyPolicy.razor.rz.scp.css */
/*
    ====== Privacy Policy Page Styles ======
    PURPOSE: Styles for the /privacy-policy page.
    BRAND:   Marginal Gains — Green #10b981/#059669, Blue #0C5FE3/#0a4fc0, font Inter/Aptos.
    LAYOUT:  Single-column readable layout within PublicFormLayout shell.
    IMPLICATION: Removing this file will revert the privacy page to unstyled default rendering.
*/

/* ---- Container ---- */
.privacy-container[b-xp3uj8v7dy] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- Page Header — green gradient banner ---- */
.privacy-header[b-xp3uj8v7dy] {
    text-align: center;
    padding: 32px 24px;
    margin-bottom: 40px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    color: #ffffff;
}

.privacy-header h1[b-xp3uj8v7dy] {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.effective-date[b-xp3uj8v7dy] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ---- Body Content ---- */
.privacy-body[b-xp3uj8v7dy] {
    line-height: 1.75;
    color: #334155;
    font-size: 0.95rem;
}

/* ---- Sections ---- */
.policy-section[b-xp3uj8v7dy] {
    margin-bottom: 40px;
}

.policy-section h2[b-xp3uj8v7dy] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #059669;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E2E8F0;
}

.policy-section h3[b-xp3uj8v7dy] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1E293B;
    margin: 24px 0 10px;
}

.policy-section p[b-xp3uj8v7dy] {
    margin: 0 0 12px;
}

/* ---- Lists ---- */
.policy-section ul[b-xp3uj8v7dy] {
    margin: 0 0 16px;
    padding-left: 24px;
}

.policy-section ul li[b-xp3uj8v7dy] {
    margin-bottom: 6px;
    padding-left: 4px;
}

.policy-section ul li strong[b-xp3uj8v7dy] {
    color: #1E293B;
}

/* ---- Contact Address Blocks ---- */
.contact-address[b-xp3uj8v7dy] {
    background: #F1F5F9;
    border-left: 3px solid #0C5FE3;
    padding: 14px 20px;
    margin: 12px 0 16px;
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.8;
    border-radius: 0 6px 6px 0;
    color: #334155;
}

.contact-address a[b-xp3uj8v7dy] {
    color: #0C5FE3;
    text-decoration: none;
}

.contact-address a:hover[b-xp3uj8v7dy] {
    text-decoration: underline;
}

/* ---- Callout / Highlight Boxes ---- */
.callout[b-xp3uj8v7dy] {
    padding: 14px 20px;
    border-radius: 6px;
    margin: 16px 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.callout-important[b-xp3uj8v7dy] {
    background: #FFF7ED;
    border-left: 3px solid #F97316;
    color: #7C2D12;
}

/* ---- Tables ---- */
.table-responsive[b-xp3uj8v7dy] {
    overflow-x: auto;
    margin: 16px 0 20px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.policy-table[b-xp3uj8v7dy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.6;
}

.policy-table thead[b-xp3uj8v7dy] {
    background: linear-gradient(135deg, #0C5FE3 0%, #0a4fc0 100%);
}

.policy-table thead th[b-xp3uj8v7dy] {
    color: #FFFFFF;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.policy-table tbody tr[b-xp3uj8v7dy] {
    border-bottom: 1px solid #E2E8F0;
}

.policy-table tbody tr:last-child[b-xp3uj8v7dy] {
    border-bottom: none;
}

.policy-table tbody tr:nth-child(even)[b-xp3uj8v7dy] {
    background: #F8FAFC;
}

.policy-table tbody td[b-xp3uj8v7dy] {
    padding: 12px 16px;
    vertical-align: top;
    color: #334155;
}

.policy-table tbody td strong[b-xp3uj8v7dy] {
    color: #1E293B;
}

/* ---- Links within body ---- */
.privacy-body a[b-xp3uj8v7dy] {
    color: #0C5FE3;
    text-decoration: none;
}

.privacy-body a:hover[b-xp3uj8v7dy] {
    text-decoration: underline;
    color: #0948B3;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .privacy-container[b-xp3uj8v7dy] {
        padding: 0 8px;
    }

    .privacy-header h1[b-xp3uj8v7dy] {
        font-size: 1.5rem;
    }

    .policy-section h2[b-xp3uj8v7dy] {
        font-size: 1.15rem;
    }

    .policy-table[b-xp3uj8v7dy] {
        font-size: 0.82rem;
    }

    .policy-table thead th[b-xp3uj8v7dy],
    .policy-table tbody td[b-xp3uj8v7dy] {
        padding: 10px 12px;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/PupilPremium/PPDashboard.razor.rz.scp.css */
/* ========================================
   PUPIL PREMIUM DASHBOARD - Custom Styles
   ========================================
   IMPLICATION: Complements modern-page-header.css
   Per CLAUDE.md: Separate CSS file, no inline styles
   ======================================== */

/* Tab Content Container */
.tab-content-container[b-ygq5jcbosw] {
    padding: 1.5rem 0;
}

.tab-content[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 2rem;
}

/* Loading and Error States */
.loading-container[b-ygq5jcbosw],
.error-container[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-container i[b-ygq5jcbosw] {
    font-size: 3rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

.coming-soon-container[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
}

.coming-soon-container i[b-ygq5jcbosw] {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.coming-soon-container h3[b-ygq5jcbosw] {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.coming-soon-container p[b-ygq5jcbosw] {
    color: #6b7280;
}

/* ========================================
   CRITICAL ALERT BANNER
   ======================================== */
.critical-alert-banner[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #dc2626;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.alert-content[b-ygq5jcbosw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.alert-content i[b-ygq5jcbosw] {
    color: #dc2626;
    flex-shrink: 0;
}

.alert-text h3[b-ygq5jcbosw] {
    color: #991b1b;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.alert-text p[b-ygq5jcbosw] {
    color: #7f1d1d;
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   SUMMARY CARDS ROW
   ======================================== */
.summary-cards-row[b-ygq5jcbosw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-ygq5jcbosw] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.summary-card:hover[b-ygq5jcbosw] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.summary-card-header[b-ygq5jcbosw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-header i[b-ygq5jcbosw] {
    font-size: 1.25rem;
    color: #0C5FE3;
}

.summary-card-value[b-ygq5jcbosw] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.summary-card-footer[b-ygq5jcbosw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6b7280;
    font-size: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

/* Card Variants */
.summary-card.card-danger[b-ygq5jcbosw] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.summary-card.card-danger .summary-card-header i[b-ygq5jcbosw] {
    color: #dc2626;
}

.summary-card.card-danger .summary-card-value[b-ygq5jcbosw] {
    color: #991b1b;
}

.summary-card.card-success[b-ygq5jcbosw] {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
}

.summary-card.card-success .summary-card-header i[b-ygq5jcbosw] {
    color: #059669;
}

.summary-card.card-success .summary-card-value[b-ygq5jcbosw] {
    color: #065f46;
}

.summary-card.card-highlight[b-ygq5jcbosw] {
    border-color: #0C5FE3;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.summary-card.card-highlight .summary-card-header i[b-ygq5jcbosw] {
    color: #0C5FE3;
}

.summary-card.card-highlight .summary-card-value[b-ygq5jcbosw] {
    color: #1e3a8a;
}

/* ========================================
   SECTION CONTAINERS
   ======================================== */
.section-container[b-ygq5jcbosw] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-header[b-ygq5jcbosw] {
    margin-bottom: 1.5rem;
}

.section-header h2[b-ygq5jcbosw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-header h2 i[b-ygq5jcbosw] {
    font-size: 1.25rem;
}

.section-description[b-ygq5jcbosw] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-ygq5jcbosw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge-danger[b-ygq5jcbosw] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.badge-warning[b-ygq5jcbosw] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-info[b-ygq5jcbosw] {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.badge-success[b-ygq5jcbosw] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.badge-secondary[b-ygq5jcbosw] {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

/* ========================================
   INFO PANEL
   ======================================== */
.info-panel[b-ygq5jcbosw] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 2rem;
}

.info-panel-blue[b-ygq5jcbosw] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.info-panel-header[b-ygq5jcbosw] {
    background: #dbeafe;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.info-panel-header i[b-ygq5jcbosw] {
    color: #0C5FE3;
    font-size: 1.25rem;
}

.info-panel-header h3[b-ygq5jcbosw] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e3a8a;
}

.info-panel-content[b-ygq5jcbosw] {
    padding: 1.5rem;
    color: #1e40af;
}

.info-panel-content p[b-ygq5jcbosw] {
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.info-panel-content ul[b-ygq5jcbosw] {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

.info-panel-content li[b-ygq5jcbosw] {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.info-panel-content .text-muted[b-ygq5jcbosw] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ========================================
   SCHOOL ACCORDION TILES
   ======================================== */
.school-tile-header[b-ygq5jcbosw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
}

.school-tile-left[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.school-name[b-ygq5jcbosw] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.school-urn[b-ygq5jcbosw] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.school-tile-kpis[b-ygq5jcbosw] {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.school-kpi[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #f9fafb;
    border-radius: 8px;
    min-width: 100px;
}

.school-kpi-highlight[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
}

.school-kpi-value[b-ygq5jcbosw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.school-kpi-highlight .school-kpi-value[b-ygq5jcbosw] {
    color: #0C5FE3;
}

.school-kpi-label[b-ygq5jcbosw] {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
    font-weight: 600;
}

.school-tile-content[b-ygq5jcbosw] {
    padding: 1.5rem 0 0 0;
}

.student-grid-container[b-ygq5jcbosw] {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.student-grid-intro[b-ygq5jcbosw] {
    margin: 0 0 1rem 0;
    padding: 1rem;
    background: white;
    border-left: 4px solid #0C5FE3;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #374151;
}

.student-grid-intro i[b-ygq5jcbosw] {
    color: #0C5FE3;
    margin-right: 0.5rem;
}

.no-students-message[b-ygq5jcbosw] {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-style: italic;
}

.no-students-message i[b-ygq5jcbosw] {
    color: #10b981;
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.mismatch-reason-badge[b-ygq5jcbosw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-action-review[b-ygq5jcbosw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action-review:hover[b-ygq5jcbosw] {
    background: #0a4ec2;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(12, 95, 227, 0.3);
}

.btn-action-review i[b-ygq5jcbosw] {
    font-size: 0.9rem;
}

.no-data-container[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
}

.no-data-container i[b-ygq5jcbosw] {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 1rem;
}

.no-data-container h3[b-ygq5jcbosw] {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.no-data-container p[b-ygq5jcbosw] {
    color: #6b7280;
}

/* ========================================
   COLLAPSIBLE INFO HEADER (NEW DESIGN)
   ========================================
   IMPLICATION: Single-line collapsible info section per user requirements
   Replaces large info-panel-blue with compact header + expandable content
   ======================================== */
.info-header-collapsible[b-ygq5jcbosw] {
    background: white;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* IMPLICATION: Button-based header allows single-line display with expand/collapse */
.info-header-toggle[b-ygq5jcbosw] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #eff6ff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.info-header-toggle:hover[b-ygq5jcbosw] {
    background: #dbeafe;
}

.info-header-toggle.expanded[b-ygq5jcbosw] {
    background: #dbeafe;
    border-bottom: 1px solid #bfdbfe;
}

.info-header-left[b-ygq5jcbosw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* IMPLICATION: Info icon provides visual cue for informational content */
.info-icon[b-ygq5jcbosw] {
    color: #0C5FE3;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-header-title[b-ygq5jcbosw] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 0;
}

/* IMPLICATION: Chevron icon rotates to indicate expand/collapse state */
.chevron-icon[b-ygq5jcbosw] {
    color: #0C5FE3;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.info-header-toggle.expanded .chevron-icon[b-ygq5jcbosw] {
    transform: rotate(180deg);
}

/* IMPLICATION: Content section hidden by default, shown when expanded */
.info-header-content[b-ygq5jcbosw] {
    padding: 1.5rem;
    background: white;
    color: #1e40af;
    line-height: 1.6;
}

.info-header-content p[b-ygq5jcbosw] {
    margin: 0 0 1rem 0;
}

.info-header-content ul[b-ygq5jcbosw] {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

.info-header-content li[b-ygq5jcbosw] {
    margin-bottom: 0.5rem;
}

.info-header-content .text-muted[b-ygq5jcbosw] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ========================================
   SECTION HEADERS (SIMPLE VERSION)
   ======================================== */
.section-header-simple[b-ygq5jcbosw] {
    margin-bottom: 1.5rem;
}

.section-header-simple h2[b-ygq5jcbosw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
}

.section-header-simple p[b-ygq5jcbosw] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* ========================================
   MODERN SCHOOL CARDS (NEW DESIGN)
   ========================================
   IMPLICATION: Full-width horizontal cards with inline metrics
   Single-line layout per user requirements
   Clear visual indicators for clickable elements
   ======================================== */
.school-cards-container[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}

/* IMPLICATION: Card wrapper with shadow and hover effects indicates clickability */
.school-card[b-ygq5jcbosw] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.school-card:hover[b-ygq5jcbosw] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #bfdbfe;
}

.school-card.expanded[b-ygq5jcbosw] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #0C5FE3;
}

/* IMPLICATION: Button-based header spans full width with space-between layout */
.school-card-header[b-ygq5jcbosw] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: left;
    gap: 2rem;
}

.school-card-header:hover[b-ygq5jcbosw] {
    background: #f9fafb;
}

.school-card.expanded .school-card-header[b-ygq5jcbosw] {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

/* IMPLICATION: Left side with icon and school info */
.school-card-left[b-ygq5jcbosw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    min-width: 0;
}

/* IMPLICATION: Icon provides visual identity for school */
.school-card-icon[b-ygq5jcbosw] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #bfdbfe;
    border-radius: 8px;
    color: #0C5FE3;
    font-size: 1rem;
    flex-shrink: 0;
}

.school-card-info[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 250px;
}

.school-card-name[b-ygq5jcbosw] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.school-card-urn[b-ygq5jcbosw] {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* IMPLICATION: Metrics display horizontally on right side of card header */
.school-card-metrics[b-ygq5jcbosw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 0 0 auto;
}

/* IMPLICATION: Compact metric display - vertical stack of value + label */
.school-metric[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
    min-width: 85px;
    gap: 0.15rem;
}

.school-metric-highlight[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
}

.school-metric-value[b-ygq5jcbosw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.school-metric-highlight .school-metric-value[b-ygq5jcbosw] {
    color: #0C5FE3;
}

.school-metric-label[b-ygq5jcbosw] {
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    white-space: nowrap;
}

/* IMPLICATION: Chevron rotation provides visual feedback for expand/collapse state */
.school-card-chevron[b-ygq5jcbosw] {
    color: #6b7280;
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.school-card-chevron.rotated[b-ygq5jcbosw] {
    transform: rotate(180deg);
    color: #0C5FE3;
}

/* IMPLICATION: Content area for expanded student grid */
.school-card-content[b-ygq5jcbosw] {
    padding: 1.5rem;
    background: #f9fafb;
}

/* Ensure grid toolbar is visible */
.school-card-content .e-grid .e-toolbar[b-ygq5jcbosw] {
    display: flex !important;
    visibility: visible !important;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.school-card-content .e-grid .e-toolbar-items[b-ygq5jcbosw] {
    display: flex !important;
    gap: 0.5rem;
}

.school-card-content .e-grid .e-toolbar .e-toolbar-item[b-ygq5jcbosw] {
    display: inline-flex !important;
}

/* ========================================
   STATUS BADGES (NEW DESIGN)
   ========================================
   IMPLICATION: Yes/No indicators for PP Indicator, FSM, FSM6, Disadvantaged
   Per user requirements: show these specific fields with badges
   ======================================== */
.status-badge[b-ygq5jcbosw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* IMPLICATION: Green badge for positive/yes status */
.status-yes[b-ygq5jcbosw] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-yes i[b-ygq5jcbosw] {
    color: #059669;
}

/* IMPLICATION: Red badge for negative/no status */
.status-no[b-ygq5jcbosw] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-no i[b-ygq5jcbosw] {
    color: #dc2626;
}

/* ========================================
   STUDENT GRID COMPONENTS
   ======================================== */
/* IMPLICATION: Banner provides context for student list within school card */
.student-intro-banner[b-ygq5jcbosw] {
    margin: 0 0 1rem 0;
    padding: 1rem;
    background: white;
    border-left: 4px solid #0C5FE3;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.5;
}

.student-intro-banner i[b-ygq5jcbosw] {
    color: #0C5FE3;
    margin-right: 0.5rem;
}

/* IMPLICATION: Highlighted funding amounts in GBP per user requirements */
.funding-amount[b-ygq5jcbosw] {
    font-weight: 700;
    color: #0C5FE3;
    font-size: 0.95rem;
}

/* IMPLICATION: Review action button for future workflow implementation */
.btn-review[b-ygq5jcbosw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #0C5FE3;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-review:hover[b-ygq5jcbosw] {
    background: #0a4ec2;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(12, 95, 227, 0.3);
}

.btn-review i[b-ygq5jcbosw] {
    font-size: 0.9rem;
}

/* ========================================
   EMPTY STATE
   ========================================
   IMPLICATION: Friendly message when no data quality issues exist
   ======================================== */
.empty-state[b-ygq5jcbosw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
}

.empty-state i[b-ygq5jcbosw] {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 1rem;
}

.empty-state h3[b-ygq5jcbosw] {
    color: #1f2937;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.empty-state p[b-ygq5jcbosw] {
    color: #6b7280;
    font-size: 0.95rem;
}

/* ========================================
   PRIORITY BADGES (IDACI TAB)
   ========================================
   IMPLICATION: Color-coded priority indicators
   ======================================== */
.status-high-priority[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.status-medium-priority[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.status-low-priority[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ========================================
   SUMMARY CARD ENHANCEMENTS (NEW)
   ========================================
   IMPLICATION: Enhanced summary cards with icon backgrounds
   ======================================== */
/* ========================================
   ANALYTICS TAB - HEATMAP STYLES
   ========================================
   IMPLICATION: Styles for geographic heatmap and hotspot table
   ======================================== */

.stat-card[b-ygq5jcbosw] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover[b-ygq5jcbosw] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.stat-card-highlight[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
}

.stat-value[b-ygq5jcbosw] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label[b-ygq5jcbosw] {
    font-size: 0.85rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.hotspot-table[b-ygq5jcbosw] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.hotspot-table thead[b-ygq5jcbosw] {
    background: #f9fafb;
}

.hotspot-table th[b-ygq5jcbosw] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
}

.hotspot-table tbody tr[b-ygq5jcbosw] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.hotspot-table tbody tr:hover[b-ygq5jcbosw] {
    background: #f9fafb;
}

.hotspot-table td[b-ygq5jcbosw] {
    padding: 1rem;
    font-size: 0.9rem;
    color: #1f2937;
}

.rank-badge[b-ygq5jcbosw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
}

.rank-1[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    color: #92400e;
}

.rank-2[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border: 2px solid #818cf8;
    color: #3730a3;
}

.rank-3[b-ygq5jcbosw] {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    border: 2px solid #fb923c;
    color: #7c2d12;
}

.rank-4[b-ygq5jcbosw] {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    color: #6b7280;
}

.badge-high-priority[b-ygq5jcbosw] {
    display: inline-block;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.summary-card-icon[b-ygq5jcbosw] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 10px;
    flex-shrink: 0;
}

.summary-card-icon i[b-ygq5jcbosw] {
    color: #0C5FE3;
    font-size: 1.5rem;
}

.summary-card[b-ygq5jcbosw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.summary-card-content[b-ygq5jcbosw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-card-label[b-ygq5jcbosw] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-danger[b-ygq5jcbosw] {
    color: #dc2626 !important;
}

.text-success[b-ygq5jcbosw] {
    color: #059669 !important;
}

.text-muted[b-ygq5jcbosw] {
    color: #6b7280 !important;
}

.fw-bold[b-ygq5jcbosw] {
    font-weight: 700 !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1200px) {
    .school-card-metrics[b-ygq5jcbosw] {
        gap: 1rem;
    }

    .school-metric[b-ygq5jcbosw] {
        min-width: 75px;
        padding: 0.35rem 0.6rem;
    }

    .school-metric-value[b-ygq5jcbosw] {
        font-size: 1.1rem;
    }

    .school-metric-label[b-ygq5jcbosw] {
        font-size: 0.6rem;
    }
}

@media (max-width: 768px) {
    .summary-cards-row[b-ygq5jcbosw] {
        grid-template-columns: 1fr;
    }

    .section-container[b-ygq5jcbosw] {
        padding: 1rem;
    }

    .alert-content[b-ygq5jcbosw] {
        flex-direction: column;
        text-align: center;
    }

    .summary-card-value[b-ygq5jcbosw] {
        font-size: 2rem;
    }

    .school-card-header[b-ygq5jcbosw] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .school-card-left[b-ygq5jcbosw] {
        flex: 1 1 100%;
    }

    .school-card-metrics[b-ygq5jcbosw] {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .school-metric[b-ygq5jcbosw] {
        min-width: 70px;
        flex: 0 0 auto;
    }

    .school-card-chevron[b-ygq5jcbosw] {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/SENDV2/Components/InlineConflictIndicator.razor.rz.scp.css */
/* Inline conflict indicator styles */
.inline-conflict-box[b-1jfyzsf16d] {
    border: 2px solid #f59e0b;
    background: #fffbeb;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
}

.conflict-header[b-1jfyzsf16d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #d97706;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.conflict-header i[b-1jfyzsf16d] {
    font-size: 1.1rem;
}

.conflict-options[b-1jfyzsf16d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.conflict-option[b-1jfyzsf16d] {
    border: 2px solid #d1d5db;
    background: white;
    border-radius: 6px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.conflict-option:hover[b-1jfyzsf16d] {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.conflict-option.selected[b-1jfyzsf16d] {
    border-color: #10b981;
    background: #ecfdf5;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.conflict-option.fabricated-option[b-1jfyzsf16d] {
    border-color: #ef4444;
    background: #fef2f2;
}

.conflict-option.fabricated-option.selected[b-1jfyzsf16d] {
    border-color: #dc2626;
    background: #fee2e2;
}

.option-header[b-1jfyzsf16d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.option-header i.fa-database[b-1jfyzsf16d] {
    color: #3b82f6;
}

.option-header i.fa-file-pdf[b-1jfyzsf16d] {
    color: #dc2626;
}

.check-icon[b-1jfyzsf16d] {
    margin-left: auto;
    color: #10b981;
    font-size: 1.1rem;
}

.fabrication-badge[b-1jfyzsf16d] {
    background: #fecaca;
    color: #991b1b;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
}

.option-value[b-1jfyzsf16d] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.375rem;
    word-break: break-word;
}

.option-value.text-danger[b-1jfyzsf16d] {
    color: #dc2626;
}

.option-source[b-1jfyzsf16d] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.fabrication-warning[b-1jfyzsf16d] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #fee2e2;
    border-radius: 4px;
    color: #991b1b;
    font-size: 0.75rem;
    font-weight: 500;
}

.fabrication-warning i[b-1jfyzsf16d] {
    font-size: 0.875rem;
}

.conflict-action[b-1jfyzsf16d] {
    display: flex;
    justify-content: center;
}

.btn-use-selected[b-1jfyzsf16d] {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-use-selected:hover[b-1jfyzsf16d] {
    background: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.btn-use-selected:active[b-1jfyzsf16d] {
    transform: translateY(0);
}

.btn-use-selected i[b-1jfyzsf16d] {
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .conflict-options[b-1jfyzsf16d] {
        grid-template-columns: 1fr;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/SENDV2/Components/ProvisionMapTab.razor.rz.scp.css */
/* ============================================================================
   Provision Map Tab Styles
   PURPOSE: Styles for the inline-editable costed provision map table.
   ============================================================================ */

.provision-map-tab[b-c7d9t3dcyd] {
    padding: 1rem 0;
}

/* Loading state */
.loading-state[b-c7d9t3dcyd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: #6c757d;
    font-size: 1rem;
}

.loading-state i[b-c7d9t3dcyd] {
    font-size: 1.5rem;
    color: #0066cc;
}

/* Toolbar */
.provision-map-toolbar[b-c7d9t3dcyd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbar-left[b-c7d9t3dcyd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-label[b-c7d9t3dcyd] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #495057;
    white-space: nowrap;
}

.toolbar-right[b-c7d9t3dcyd] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-secondary[b-c7d9t3dcyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-secondary:hover[b-c7d9t3dcyd] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.btn-secondary:disabled[b-c7d9t3dcyd] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Save All button */
.btn-save-all[b-c7d9t3dcyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-save-all:hover[b-c7d9t3dcyd] {
    background: #0056b3;
    border-color: #004999;
}

.btn-save-all:disabled[b-c7d9t3dcyd] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Empty state */
.empty-state[b-c7d9t3dcyd] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state i[b-c7d9t3dcyd] {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state h3[b-c7d9t3dcyd] {
    margin: 0 0 0.5rem;
    color: #495057;
}

.empty-state p[b-c7d9t3dcyd] {
    max-width: 400px;
    margin: 0 auto;
    font-size: 0.9rem;
}

/* Table wrapper — horizontal scroll for wide table */
.provision-map-table-wrapper[b-c7d9t3dcyd] {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

/* Table */
.provision-map-table[b-c7d9t3dcyd] {
    width: 100%;
    min-width: 1800px;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.provision-map-table thead th[b-c7d9t3dcyd] {
    background: #0066cc;
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.4rem;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.provision-map-table thead th:last-child[b-c7d9t3dcyd] {
    border-right: none;
}

.provision-map-table tbody td[b-c7d9t3dcyd] {
    padding: 0.25rem 0.3rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.provision-map-table tbody tr:hover[b-c7d9t3dcyd] {
    background: #f8f9fa;
}

/* Row states */
.row-new[b-c7d9t3dcyd] {
    background: #f0f9ff !important;
}

.row-dirty td[b-c7d9t3dcyd] {
    border-left: 3px solid #ffc107;
}

.row-dirty td:first-child[b-c7d9t3dcyd] {
    border-left: 3px solid #ffc107;
}

/* Column widths */
.col-area[b-c7d9t3dcyd] { min-width: 160px; }
.col-provision[b-c7d9t3dcyd] { min-width: 180px; }
.col-outcomes[b-c7d9t3dcyd] { min-width: 180px; }
.col-location[b-c7d9t3dcyd] { min-width: 120px; }
.col-role[b-c7d9t3dcyd] { min-width: 100px; }
.col-grade[b-c7d9t3dcyd] { min-width: 140px; }
.col-ratio[b-c7d9t3dcyd] { min-width: 80px; }
.col-session[b-c7d9t3dcyd] { min-width: 110px; }
.col-sessions[b-c7d9t3dcyd] { min-width: 110px; }
.col-weeks[b-c7d9t3dcyd] { min-width: 100px; }
.col-hours[b-c7d9t3dcyd] { min-width: 80px; }
.col-cost[b-c7d9t3dcyd] { min-width: 100px; }
.col-actions[b-c7d9t3dcyd] { min-width: 70px; }

/* Calculated cells */
.calculated[b-c7d9t3dcyd] {
    font-weight: 600;
    color: #212529;
    text-align: right;
    white-space: nowrap;
    padding-right: 0.5rem !important;
}

/* Match AI button to toolbar button border-radius */
[b-c7d9t3dcyd] .ai-button.ai-button-sm {
    border-radius: 4px;
}

/* Syncfusion component overrides for compact table cells */
[b-c7d9t3dcyd] .pm-dropdown {
    font-size: 0.8rem !important;
}

/* Ensure dropdown popup list items show full text (not truncated with ellipsis) */
[b-c7d9t3dcyd] .e-ddl.pm-dropdown .e-list-item,
[b-c7d9t3dcyd] .e-dropdownbase .e-list-item {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4;
    padding: 6px 8px !important;
}

[b-c7d9t3dcyd] .pm-dropdown .e-input {
    font-size: 0.8rem !important;
    height: 28px !important;
}

[b-c7d9t3dcyd] .pm-textbox textarea {
    font-size: 0.8rem !important;
    min-height: 50px;
    resize: vertical;
}

[b-c7d9t3dcyd] .pm-numeric .e-input {
    font-size: 0.8rem !important;
    height: 28px !important;
    text-align: center;
}

/* Hide spin buttons on numeric inputs to save horizontal space */
[b-c7d9t3dcyd] .pm-numeric .e-spin-up,
[b-c7d9t3dcyd] .pm-numeric .e-spin-down {
    display: none !important;
}

[b-c7d9t3dcyd] .pm-numeric .e-input-group {
    min-width: 60px;
}

/* Summary row */
.summary-row[b-c7d9t3dcyd] {
    background: #f1f3f5;
    border-top: 2px solid #0066cc;
}

.summary-row td[b-c7d9t3dcyd] {
    padding: 0.6rem 0.4rem !important;
    font-size: 0.85rem;
}

.non-staff-total[b-c7d9t3dcyd] {
    font-size: 0.75rem;
    color: #6c757d;
}

.grand-total-row[b-c7d9t3dcyd] {
    background: #e7f0fd;
}

.grand-total-row td[b-c7d9t3dcyd] {
    padding: 0.6rem 0.4rem !important;
    font-size: 0.9rem;
}

/* Action buttons */
.action-buttons[b-c7d9t3dcyd] {
    display: flex;
    gap: 0.25rem;
}

.btn-icon[b-c7d9t3dcyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s;
}

.btn-save[b-c7d9t3dcyd] {
    background: #28a745;
    color: #fff;
}

.btn-save:hover[b-c7d9t3dcyd] {
    background: #218838;
}

.btn-save:disabled[b-c7d9t3dcyd] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete[b-c7d9t3dcyd] {
    background: transparent;
    color: #dc3545;
}

.btn-delete:hover[b-c7d9t3dcyd] {
    background: #f8d7da;
}

/* AI Preview Dialog */
.ai-preview-intro[b-c7d9t3dcyd] {
    margin: 0 0 1rem;
    color: #495057;
}

.ai-sources[b-c7d9t3dcyd] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.ai-suggestions-list[b-c7d9t3dcyd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.ai-suggestion-item[b-c7d9t3dcyd] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.15s;
}

.ai-suggestion-item.selected[b-c7d9t3dcyd] {
    background: #f0f9ff;
    border-color: #0066cc;
}

.suggestion-checkbox[b-c7d9t3dcyd] {
    flex-shrink: 0;
    padding-top: 0.25rem;
}

.suggestion-details[b-c7d9t3dcyd] {
    flex: 1;
}

.suggestion-header[b-c7d9t3dcyd] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.suggestion-area[b-c7d9t3dcyd] {
    font-weight: 600;
    color: #0066cc;
    font-size: 0.8rem;
}

.suggestion-provision[b-c7d9t3dcyd] {
    font-weight: 500;
    color: #212529;
    font-size: 0.85rem;
}

.suggestion-confidence[b-c7d9t3dcyd] {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: #e7f0fd;
    color: #0066cc;
    border-radius: 3px;
    font-weight: 600;
}

.suggestion-outcomes[b-c7d9t3dcyd] {
    font-size: 0.8rem;
    color: #495057;
    margin-bottom: 0.25rem;
}

.suggestion-meta[b-c7d9t3dcyd] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.suggestion-meta i[b-c7d9t3dcyd] {
    margin-right: 0.2rem;
}

/* Status message */
.status-message[b-c7d9t3dcyd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

.status-message.success[b-c7d9t3dcyd] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error[b-c7d9t3dcyd] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-message.info[b-c7d9t3dcyd] {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}
/* _content/OEAI.Apps.SaaS/Pages/SENDV2/SendFormCompletion.razor.rz.scp.css */
/* SEND Form Completion - Matches FormComplete.razor styling */

/* Loading & Error States */
.loading-container[b-84cyem4iex] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

.error-container[b-84cyem4iex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.error-container i[b-84cyem4iex] {
    font-size: 4rem;
    color: #dc3545;
}

.error-container h3[b-84cyem4iex] {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.error-container p[b-84cyem4iex] {
    color: #666;
    margin: 0.5rem 0 1rem 0;
}

/* Main Container */
.form-complete-container[b-84cyem4iex] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
}

/* Header */
.form-complete-header[b-84cyem4iex] {
    background: white;
    padding: 20px 30px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.breadcrumb[b-84cyem4iex] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 10px;
}

.breadcrumb a[b-84cyem4iex] {
    color: #2563eb;
    text-decoration: none;
}

.breadcrumb a:hover[b-84cyem4iex] {
    text-decoration: underline;
}

.form-title-row[b-84cyem4iex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-title-section[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.form-title-section h1[b-84cyem4iex] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
}

.status-badge[b-84cyem4iex] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-inprogress[b-84cyem4iex] {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-completed[b-84cyem4iex] {
    background-color: #d1fae5;
    color: #065f46;
}

.form-actions[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.autosave-indicator[b-84cyem4iex] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.autosave-indicator.saving[b-84cyem4iex] {
    color: #2563eb;
    background: #eff6ff;
}

.autosave-indicator.saved[b-84cyem4iex] {
    color: #059669;
    background: #ecfdf5;
}

/* COMMENT: Yellow indicator shown immediately after a successful save */
/* IMPLICATION: Signals to user that their answer was just persisted */
.autosave-indicator.saved-recent[b-84cyem4iex] {
    color: #b45309;
    background: #fef3c7;
}

/* COMMENT: Red indicator shown when autosave fails */
/* IMPLICATION: Alerts user that data may not have been saved */
.autosave-indicator.save-failed[b-84cyem4iex] {
    color: #dc2626;
    background: #fef2f2;
}

/* Buttons */
.btn[b-84cyem4iex] {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-84cyem4iex] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
}

.btn-primary:hover[b-84cyem4iex] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-secondary[b-84cyem4iex] {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-84cyem4iex] {
    border-color: #9ca3af;
    background: #f9fafb;
}

/* Export Button */
.btn-export[b-84cyem4iex] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border: none;
}

.btn-export:hover:not(:disabled)[b-84cyem4iex] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-export:disabled[b-84cyem4iex] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-export.exporting[b-84cyem4iex] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* Two-Panel Layout */
.form-panels.send-form-layout[b-84cyem4iex] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

/* Left Panel - Navigation + AI Instructions */
.nav-panel[b-84cyem4iex] {
    background: white;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    height: 100%;
}

/* Progress Section */
.progress-section[b-84cyem4iex] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.progress-text[b-84cyem4iex] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.progress-bar[b-84cyem4iex] {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-84cyem4iex] {
    height: 100%;
    background: #10b981;
    transition: width 0.3s ease;
}

.progress-percentage[b-84cyem4iex] {
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
}

/* AI Instructions Section */
.ai-instructions-section[b-84cyem4iex] {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.ai-section-header[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.ai-section-header i[b-84cyem4iex] {
    color: white;
    font-size: 1rem;
}

.ai-help-text[b-84cyem4iex] {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.ai-instructions-input[b-84cyem4iex] {
    width: 100%;
    font-size: 13px;
}

/* AI Bulk Fill Section */
.ai-bulk-fill-section[b-84cyem4iex] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.btn-fill-all[b-84cyem4iex] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.btn-fill-all:hover:not(:disabled)[b-84cyem4iex] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.btn-fill-all:disabled[b-84cyem4iex] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-fill-all.processing[b-84cyem4iex] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    pointer-events: none;
}

.btn-fill-all i[b-84cyem4iex] {
    font-size: 1rem;
}

.bulk-fill-result[b-84cyem4iex] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.875rem;
}

.result-success[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #059669;
    font-weight: 500;
}

.result-success i[b-84cyem4iex] {
    font-size: 1rem;
}

.result-warning[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f59e0b;
    font-weight: 500;
    margin-top: 0.25rem;
}

.result-warning i[b-84cyem4iex] {
    font-size: 1rem;
}

/* Section Navigation */
.section-nav-group[b-84cyem4iex] {
    margin-bottom: 15px;
}

.section-nav-title[b-84cyem4iex] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.question-nav-item[b-84cyem4iex] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.question-nav-item:hover[b-84cyem4iex] {
    background: #f3f4f6;
}

.question-nav-item.active[b-84cyem4iex] {
    background: #dbeafe;
    color: #1e40af;
}

.question-nav-item.answered i[b-84cyem4iex] {
    color: #10b981;
}

.question-nav-item:not(.answered) i[b-84cyem4iex] {
    color: #d1d5db;
}

.question-nav-text[b-84cyem4iex] {
    flex: 1;
    line-height: 1.4;
}

/* Center Panel - Form Content */
.content-panel[b-84cyem4iex] {
    background: #f9fafb;
    overflow-y: auto;
    padding: 0;
    height: 100%;
}

.form-content-inner[b-84cyem4iex] {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px;
}

/* Student Info Banner */
.student-info-banner[b-84cyem4iex] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-info-banner i[b-84cyem4iex] {
    font-size: 1.5rem;
}

.student-info-banner div[b-84cyem4iex] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.student-info-banner strong[b-84cyem4iex] {
    font-size: 1.1rem;
}

.student-info-banner span[b-84cyem4iex] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Form Sections */
.form-section[b-84cyem4iex] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    margin-bottom: 24px;
    overflow: hidden;
}

.section-header[b-84cyem4iex] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-number[b-84cyem4iex] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-header h2[b-84cyem4iex] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.section-description[b-84cyem4iex] {
    padding: 1rem 1.5rem;
    margin: 0;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
}

.section-questions[b-84cyem4iex] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Questions */
.question-container[b-84cyem4iex] {
    scroll-margin-top: 20px;
}

.question-header-row[b-84cyem4iex] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.question-label[b-84cyem4iex] {
    font-weight: 600;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.5;
    flex: 1;
}

.required-indicator[b-84cyem4iex] {
    color: #dc2626;
    font-weight: 700;
    margin-left: 0.25rem;
}

/* COMMENT: Per-question save indicator shown inline next to the question label */
/* IMPLICATION: Gives users immediate feedback on which specific question is being saved */
.question-save-indicator[b-84cyem4iex] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
    animation: fadeIn-b-84cyem4iex 0.2s ease-in;
}

.question-save-indicator.saving[b-84cyem4iex] {
    color: #2563eb;
    background: #eff6ff;
}

.question-save-indicator.saved[b-84cyem4iex] {
    color: #059669;
    background: #ecfdf5;
}

@keyframes fadeIn-b-84cyem4iex {
    from { opacity: 0; }
    to { opacity: 1; }
}

.question-guidance[b-84cyem4iex] {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    padding: 0.75rem 1rem;
    margin: 0 0 0.75rem 0;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #1e40af;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
}

.question-guidance i[b-84cyem4iex] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* AI Assist Button */
.ai-assist-button[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ai-assist-button:hover:not(:disabled)[b-84cyem4iex] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ai-assist-button:disabled[b-84cyem4iex] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-assist-button.processing[b-84cyem4iex] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    pointer-events: none;
}

.ai-assist-button i[b-84cyem4iex] {
    font-size: 1rem;
}

/* Question Inputs */
.question-input[b-84cyem4iex] {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Yes/No Options */
.yesno-options[b-84cyem4iex] {
    display: flex;
    gap: 1.5rem;
}

.yesno-option[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: #374151;
}

.yesno-option input[type="radio"][b-84cyem4iex] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.yesno-option span[b-84cyem4iex] {
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .form-panels.send-form-layout[b-84cyem4iex] {
        grid-template-columns: 280px 1fr;
    }

    .form-content-inner[b-84cyem4iex] {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .form-panels.send-form-layout[b-84cyem4iex] {
        grid-template-columns: 1fr;
    }

    .nav-panel[b-84cyem4iex] {
        display: none; /* Hide sidebar on mobile, show as modal if needed */
    }

    .form-content-inner[b-84cyem4iex] {
        padding: 15px;
    }

    .question-header-row[b-84cyem4iex] {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-assist-button[b-84cyem4iex] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   PlanTable — Repeatable Plans with Dynamic Outcome Rows
   ============================================================================ */

.plan-table-container[b-84cyem4iex] {
    margin-top: 0.5rem;
}

.plan-empty-state[b-84cyem4iex] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.plan-empty-state i[b-84cyem4iex] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #9ca3af;
}

.plan-empty-state p[b-84cyem4iex] {
    margin: 0;
    font-size: 0.9rem;
}

.plan-accordion[b-84cyem4iex] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.plan-accordion:hover[b-84cyem4iex] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.plan-accordion.plan-complete[b-84cyem4iex] {
    border-color: #d1fae5;
    background: #f0fdf4;
}

.plan-header[b-84cyem4iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    user-select: none;
    transition: background 0.15s ease;
}

.plan-header:hover[b-84cyem4iex] {
    background: #f1f5f9;
}

.plan-header-left[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-chevron[b-84cyem4iex] {
    font-size: 0.75rem;
    color: #6b7280;
    width: 1rem;
    transition: transform 0.2s ease;
}

.plan-title[b-84cyem4iex] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
}

.plan-date[b-84cyem4iex] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 400;
}

.plan-status-badge[b-84cyem4iex] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.plan-status-badge.status-active[b-84cyem4iex] {
    background: #dbeafe;
    color: #1d4ed8;
}

.plan-status-badge.status-complete[b-84cyem4iex] {
    background: #d1fae5;
    color: #059669;
}

.plan-body[b-84cyem4iex] {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* Outcome Table */
.outcome-table[b-84cyem4iex] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.outcome-table th[b-84cyem4iex] {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.outcome-table td[b-84cyem4iex] {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.outcome-table tr:hover td[b-84cyem4iex] {
    background: #fafbfc;
}

.outcome-row-num[b-84cyem4iex] {
    width: 2rem;
    text-align: center;
    color: #9ca3af;
    font-weight: 500;
}

.outcome-actions[b-84cyem4iex] {
    width: 2.5rem;
    text-align: center;
}

.outcome-delete-btn[b-84cyem4iex] {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.15s ease;
    font-size: 0.85rem;
}

.outcome-delete-btn:hover[b-84cyem4iex] {
    color: #ef4444;
    background: #fef2f2;
}

/* Plan cell inputs — minimal styling to blend with table */
[b-84cyem4iex] .plan-cell-input,
[b-84cyem4iex] .plan-cell-input .e-input,
[b-84cyem4iex] .plan-cell-input .e-control {
    font-size: 0.85rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: border-color 0.15s ease;
}

[b-84cyem4iex] .plan-cell-input:focus-within,
[b-84cyem4iex] .plan-cell-input:focus-within .e-input,
[b-84cyem4iex] .plan-cell-input:focus-within .e-control {
    border-color: #3b82f6 !important;
    background: #fff !important;
}

/* Plan Footer */
.plan-footer[b-84cyem4iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.add-outcome-btn[b-84cyem4iex] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #3b82f6;
    background: transparent;
    border: 1px dashed #93c5fd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-outcome-btn:hover[b-84cyem4iex] {
    background: #eff6ff;
    border-color: #3b82f6;
}

.plan-status-control[b-84cyem4iex] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}

[b-84cyem4iex] .plan-status-dropdown {
    width: 120px;
    font-size: 0.8rem !important;
}

/* Add Plan button */
.add-plan-btn[b-84cyem4iex] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.add-plan-btn:hover[b-84cyem4iex] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.no-columns-warning[b-84cyem4iex] {
    padding: 1rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    color: #92400e;
    font-size: 0.85rem;
}
/* _content/OEAI.Apps.SaaS/Pages/SENDV2/StudentFolderDetail.razor.rz.scp.css */
/* Loading & Error States */
.loading-container[b-og3p48krhb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

.error-container[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.error-container i[b-og3p48krhb] {
    font-size: 4rem;
    color: #dc3545;
}

.error-container h3[b-og3p48krhb] {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.error-container p[b-og3p48krhb] {
    color: #666;
    margin: 0.5rem 0 1rem 0;
}

/* Back Button */
.back-button[b-og3p48krhb] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    margin-right: 1rem;
}

.back-button:hover[b-og3p48krhb] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-2px);
}

/* Tabs - Now use inline styles from modern-page-header.css (.tabs-container-inline, .tab-button-inline) */
/* IMPLICATION: Removed .header-tabs-row, .tabs-container, .tab-button - now using inline header tabs */

/* Main Content */
.folder-detail-content[b-og3p48krhb] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Overview Tab - Info Cards Grid */
.overview-tab[b-og3p48krhb] {
    width: 100%;
}

/* INFO CARDS GRID: 3 columns on desktop, responsive down */
/* IMPLICATION: Narrower cards (300px min) to fit more on screen and reduce line count */
.info-cards-grid[b-og3p48krhb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.info-card[b-og3p48krhb] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.info-card-title[b-og3p48krhb] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.info-card-title i[b-og3p48krhb] {
    font-size: 1.1rem;
}

.info-card-content[b-og3p48krhb] {
    padding: 1rem;
}

.info-row[b-og3p48krhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child[b-og3p48krhb] {
    border-bottom: none;
}

.info-label[b-og3p48krhb] {
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.info-value[b-og3p48krhb] {
    color: #333;
    font-size: 0.95rem;
    text-align: right;
}

.badge-status[b-og3p48krhb] {
    background: #e3f2fd;
    color: #0066cc;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Documents, Forms & Milestones Tabs */
.documents-tab[b-og3p48krhb],
.forms-tab[b-og3p48krhb],
.milestones-tab[b-og3p48krhb] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-header[b-og3p48krhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.tab-header h2[b-og3p48krhb] {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

/* Empty State */
.empty-state[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state i[b-og3p48krhb] {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.empty-state h3[b-og3p48krhb] {
    margin: 0 0 0.5rem 0;
    color: #555;
    font-size: 1.25rem;
}

.empty-state p[b-og3p48krhb] {
    color: #777;
    margin: 0 0 1.5rem 0;
}

/* Buttons */
.btn-primary[b-og3p48krhb] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover[b-og3p48krhb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-primary i[b-og3p48krhb] {
    font-size: 1rem;
}

/* Add Form Dialog Styles */
.form-template-list[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.form-template-item[b-og3p48krhb] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border: 3px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
}

.form-template-item[b-og3p48krhb]::before {
    content: "Click to select";
    position: absolute;
    top: -8px;
    right: 12px;
    background: #6b7280;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.form-template-item:hover[b-og3p48krhb]::before {
    opacity: 1;
}

.form-template-item:hover[b-og3p48krhb] {
    border-color: #0066cc;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
    transform: translateY(-2px);
}

.form-template-item.selected[b-og3p48krhb] {
    border-color: #0066cc;
    border-width: 4px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.3);
}

.form-template-item.selected[b-og3p48krhb]::before {
    content: "Selected";
    background: #10b981;
    opacity: 1;
}

.template-icon[b-og3p48krhb] {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    border-radius: 8px;
    font-size: 1.5rem;
}

.template-info[b-og3p48krhb] {
    flex: 1;
}

.template-info h4[b-og3p48krhb] {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
}

.template-info p[b-og3p48krhb] {
    margin: 0 0 0.75rem 0;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.template-meta[b-og3p48krhb] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

.template-meta span[b-og3p48krhb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.template-selected-icon[b-og3p48krhb] {
    flex-shrink: 0;
    color: #0066cc;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

/* Forms List */
.forms-list[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-card[b-og3p48krhb] {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.form-card:hover[b-og3p48krhb] {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
    transform: translateY(-2px);
}

/* COMMENT: Delete button for form cards */
/* IMPLICATION: Red button with trash icon, appears on right side of card */
.btn-icon-danger[b-og3p48krhb] {
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
}

.btn-icon-danger:hover[b-og3p48krhb] {
    background: #dc2626;
    color: white;
    transform: scale(1.05);
}

.btn-icon-danger:active[b-og3p48krhb] {
    transform: scale(0.95);
}

.btn-icon-danger i[b-og3p48krhb] {
    font-size: 1rem;
}

.form-card-header[b-og3p48krhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.form-card-title[b-og3p48krhb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
}

.form-card-title i[b-og3p48krhb] {
    color: #0066cc;
    font-size: 1.1rem;
}

.form-status-badge[b-og3p48krhb] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.form-status-inprogress[b-og3p48krhb] {
    background: #dbeafe;
    color: #1e40af;
}

.form-status-scheduled[b-og3p48krhb] {
    background: #fef3c7;
    color: #92400e;
}

.form-status-completed[b-og3p48krhb] {
    background: #d1fae5;
    color: #065f46;
}

.form-card-meta[b-og3p48krhb] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.form-card-meta span[b-og3p48krhb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-card-meta i[b-og3p48krhb] {
    font-size: 0.875rem;
}

/* ============================================
   DOCUMENT UPLOAD & DISPLAY STYLES
   ============================================ */

/* Document Grid */
.documents-grid[b-og3p48krhb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Document Card */
.document-card[b-og3p48krhb] {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.document-card:hover[b-og3p48krhb] {
    border-color: #0066cc;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.15);
    transform: translateY(-2px);
}

.document-card-header[b-og3p48krhb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.document-icon[b-og3p48krhb] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    border-radius: 10px;
    font-size: 1.5rem;
}

.document-icon .fa-file-pdf[b-og3p48krhb] { color: #ef4444; }
.document-icon .fa-file-word[b-og3p48krhb] { color: #2563eb; }
.document-icon .fa-file-excel[b-og3p48krhb] { color: #22c55e; }

.document-actions[b-og3p48krhb] {
    display: flex;
    gap: 0.5rem;
}

.doc-action-btn[b-og3p48krhb] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.doc-action-btn:hover[b-og3p48krhb] {
    background: #f3f4f6;
    color: #0066cc;
}

.doc-action-btn.doc-action-delete:hover[b-og3p48krhb] {
    background: #fef2f2;
    color: #dc2626;
}

.document-card-body[b-og3p48krhb] {
    padding: 1rem;
}

.document-name[b-og3p48krhb] {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
}

.document-category-badge[b-og3p48krhb] {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.document-tags[b-og3p48krhb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.document-tag[b-og3p48krhb] {
    background: #f3f4f6;
    color: #4b5563;
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
}

.document-tag-more[b-og3p48krhb] {
    background: #0066cc;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.document-card-footer[b-og3p48krhb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.document-status[b-og3p48krhb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.document-status.status-processed[b-og3p48krhb] {
    color: #059669;
}

.document-status.status-pending[b-og3p48krhb] {
    color: #d97706;
}

.document-meta[b-og3p48krhb] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ============================================
   UPLOAD DIALOG STYLES
   ============================================ */

.upload-dialog-content[b-og3p48krhb] {
    padding: 0.5rem 0;
}

.upload-section[b-og3p48krhb] {
    margin-bottom: 1.5rem;
}

.upload-section:last-child[b-og3p48krhb] {
    margin-bottom: 0;
}

.upload-label[b-og3p48krhb] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.upload-label .required[b-og3p48krhb] {
    color: #dc2626;
}

.upload-label .optional[b-og3p48krhb] {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.8rem;
}

.upload-dropzone[b-og3p48krhb] {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    background: #fafafa;
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-dropzone:hover[b-og3p48krhb] {
    border-color: #0066cc;
    background: #f0f7ff;
}

.upload-dropzone.has-files[b-og3p48krhb] {
    border-style: solid;
    border-color: #10b981;
    background: #f0fdf4;
    padding: 1rem;
}

.upload-input[b-og3p48krhb] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.dropzone-content[b-og3p48krhb] {
    pointer-events: none;
}

.dropzone-content i[b-og3p48krhb] {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.dropzone-content p[b-og3p48krhb] {
    margin: 0 0 0.5rem 0;
    color: #4b5563;
    font-weight: 500;
}

.dropzone-hint[b-og3p48krhb] {
    font-size: 0.8rem;
    color: #9ca3af;
}

.selected-files[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selected-file[b-og3p48krhb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.selected-file i[b-og3p48krhb] {
    font-size: 1.25rem;
    color: #0066cc;
}

.selected-file .file-name[b-og3p48krhb] {
    flex: 1;
    font-weight: 500;
    color: #1f2937;
    font-size: 0.9rem;
}

.selected-file .file-size[b-og3p48krhb] {
    color: #6b7280;
    font-size: 0.8rem;
}

.remove-file-btn[b-og3p48krhb] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-file-btn:hover[b-og3p48krhb] {
    background: #dc2626;
    color: white;
}

.upload-hint[b-og3p48krhb] {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.375rem;
}

/* Checkbox Styling */
.upload-checkbox[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkbox-container[b-og3p48krhb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

.checkbox-container input[type="checkbox"][b-og3p48krhb] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0066cc;
}

/* Upload Progress */
.upload-progress-section[b-og3p48krhb] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f0f7ff;
    border-radius: 8px;
}

.progress-text[b-og3p48krhb] {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: #1e40af;
    margin-top: 0.75rem;
    font-weight: 500;
}

/* ============================================
   DELETE CONFIRMATION DIALOG
   ============================================ */

.delete-confirm-content[b-og3p48krhb] {
    padding: 0;
}

.delete-confirm-content p[b-og3p48krhb] {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1rem;
}

.delete-warning-text[b-og3p48krhb] {
    color: #dc2626 !important;
    font-size: 0.875rem;
    background: #fef2f2;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Medium screens: 2 columns */
@media (max-width: 1200px) {
    .info-cards-grid[b-og3p48krhb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens: 1 column */
@media (max-width: 768px) {
    .info-cards-grid[b-og3p48krhb] {
        grid-template-columns: 1fr;
    }

    .form-card-header[b-og3p48krhb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .form-card-meta[b-og3p48krhb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .header-content-wrapper[b-og3p48krhb] {
        flex-direction: column;
        gap: 1rem;
    }

    .kpi-cards-container[b-og3p48krhb] {
        flex-direction: column;
        width: 100%;
    }

    .header-kpi-card[b-og3p48krhb] {
        width: 100%;
    }

    .tabs-container[b-og3p48krhb] {
        overflow-x: auto;
    }

    .folder-detail-content[b-og3p48krhb] {
        padding: 1rem;
    }

    .documents-grid[b-og3p48krhb] {
        grid-template-columns: 1fr;
    }

    .document-card-footer[b-og3p48krhb] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ============================================
   MILESTONE TAB STYLES
   PURPOSE: Styling for EHCP application milestone tracking
   IMPLICATION: Timeline display for statutory deadline monitoring
   ============================================ */

.milestones-content[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.milestones-description[b-og3p48krhb] {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #0066cc;
}

.milestone-card[b-og3p48krhb] {
    margin-bottom: 0;
}

.milestone-form-row[b-og3p48krhb] {
    padding: 1rem;
}

.milestone-label[b-og3p48krhb] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Milestone Grid Layout */
.milestones-grid[b-og3p48krhb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.milestone-item[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.milestone-item:hover[b-og3p48krhb] {
    border-color: #0066cc;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.milestone-header[b-og3p48krhb] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.milestone-icon[b-og3p48krhb] {
    font-size: 1.25rem;
    color: #0066cc;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.milestone-info[b-og3p48krhb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.milestone-title[b-og3p48krhb] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
}

.milestone-hint[b-og3p48krhb] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.milestone-date-picker[b-og3p48krhb] {
    width: 100%;
}

/* Timeline Summary Stats */
.timeline-summary[b-og3p48krhb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
}

.timeline-stat[b-og3p48krhb] {
    flex: 1;
    min-width: 200px;
    padding: 1.25rem;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-stat.stat-good[b-og3p48krhb] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.timeline-stat.stat-warning[b-og3p48krhb] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
}

.stat-value[b-og3p48krhb] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.stat-good .stat-value[b-og3p48krhb] {
    color: #065f46;
}

.stat-warning .stat-value[b-og3p48krhb] {
    color: #92400e;
}

.stat-label[b-og3p48krhb] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.stat-hint[b-og3p48krhb] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Responsive milestone grid */
@media (max-width: 768px) {
    .milestones-grid[b-og3p48krhb] {
        grid-template-columns: 1fr;
    }

    .timeline-summary[b-og3p48krhb] {
        flex-direction: column;
    }

    .timeline-stat[b-og3p48krhb] {
        min-width: auto;
    }
}

/* Consultation badge in header subtitle */
.consultation-badge-header[b-og3p48krhb] {
    background: #fef3c7;
    color: #92400e;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Exported Forms Section */
.exported-forms-section[b-og3p48krhb] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.export-card[b-og3p48krhb] {
    border-left: 3px solid #2b579a;
}

.export-card:hover[b-og3p48krhb] {
    border-left-color: #1a3a6e;
}
/* _content/OEAI.Apps.SaaS/Pages/Shared/NotificationBell.razor.rz.scp.css */
/* ========================================
   Notification Bell Component Styles
   ======================================== */

.notification-bell-container[b-17yu0gzz19] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notification-bell-btn[b-17yu0gzz19] {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #6b7280;
    font-size: 1.1rem;
    transition: color 0.2s ease;
    border-radius: 8px;
}

.notification-bell-btn:hover[b-17yu0gzz19] {
    color: #0C5FE3;
    background: rgba(12, 95, 227, 0.08);
}

.notification-badge[b-17yu0gzz19] {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ef4444;
    color: white;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid white;
}

/* Backdrop to close dropdown when clicking outside */
.notification-dropdown-backdrop[b-17yu0gzz19] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.notification-dropdown[b-17yu0gzz19] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifDropIn-b-17yu0gzz19 0.2s ease;
}

@keyframes notifDropIn-b-17yu0gzz19 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-dropdown-header[b-17yu0gzz19] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.notification-dropdown-title[b-17yu0gzz19] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}

.mark-all-read-btn[b-17yu0gzz19] {
    background: none;
    border: none;
    color: #0C5FE3;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mark-all-read-btn:hover[b-17yu0gzz19] {
    background: rgba(12, 95, 227, 0.08);
}

.notification-dropdown-list[b-17yu0gzz19] {
    overflow-y: auto;
    max-height: 400px;
}

.notification-empty[b-17yu0gzz19] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #9ca3af;
}

.notification-empty i[b-17yu0gzz19] {
    font-size: 1.5rem;
}

.notification-empty span[b-17yu0gzz19] {
    font-size: 0.85rem;
}

.notification-item[b-17yu0gzz19] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.notification-item:last-child[b-17yu0gzz19] {
    border-bottom: none;
}

.notification-item:hover[b-17yu0gzz19] {
    background: #f9fafb;
}

.notification-item.unread[b-17yu0gzz19] {
    background: #eff6ff;
}

.notification-item.unread:hover[b-17yu0gzz19] {
    background: #dbeafe;
}

.notification-icon-wrapper[b-17yu0gzz19] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
}

.notification-icon-wrapper.severity-info[b-17yu0gzz19] {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-icon-wrapper.severity-success[b-17yu0gzz19] {
    background: #d1fae5;
    color: #065f46;
}

.notification-icon-wrapper.severity-warning[b-17yu0gzz19] {
    background: #fef3c7;
    color: #92400e;
}

.notification-icon-wrapper.severity-error[b-17yu0gzz19] {
    background: #fee2e2;
    color: #991b1b;
}

.notification-icon-wrapper i[b-17yu0gzz19] {
    font-size: 0.85rem;
}

.notification-content[b-17yu0gzz19] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-17yu0gzz19] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.notification-message[b-17yu0gzz19] {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-time[b-17yu0gzz19] {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.notification-dropdown-footer[b-17yu0gzz19] {
    padding: 10px 1.25rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

.notification-dropdown-footer a[b-17yu0gzz19] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0C5FE3;
    text-decoration: none;
    transition: color 0.2s ease;
}

.notification-dropdown-footer a:hover[b-17yu0gzz19] {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .notification-dropdown[b-17yu0gzz19] {
        width: 300px;
        right: -60px;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/Trust/Trust.razor.rz.scp.css */
/* Trust Configuration Page Scoped Styles */

/* Hide non-functional navigation tabs until functionality is implemented */
/* IMPLICATION: Navigation tabs will not be visible to users */
/* PURPOSE: Prevents user confusion with non-working navigation elements */
/* TO RE-ENABLE: Remove or comment out this rule when navigation is functional */
[b-peei9xc50l] .header-right-section {
    display: none;
}
/* _content/OEAI.Apps.SaaS/Pages/User/GroupsNew.razor.rz.scp.css */
/* ========================================
   GROUPS PAGE - Modern Styles
   ========================================
   PURPOSE: Styles for the modernized Groups management page
   IMPLICATION: Provides consistent UX with other modern pages
   ======================================== */

/* Page Container */
.page-container[b-mbvuvvzzcs] {
    min-height: 100vh;
    background: #f3f4f6;
}

/* Loading State - matches SchoolProfileV2 pattern */
.loading-state[b-mbvuvvzzcs] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

/* Tab Badge */
.tab-badge[b-mbvuvvzzcs] {
    background: rgba(255, 255, 255, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.tab-button-inline.active .tab-badge[b-mbvuvvzzcs] {
    background: rgba(12, 95, 227, 0.15);
    color: #0C5FE3;
}

/* Content Section */
.content-section[b-mbvuvvzzcs] {
    padding: 1.5rem 2.5rem;
}

/* Pending Actions Bar */
.pending-actions-bar[b-mbvuvvzzcs] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

/* Status Badges */
.status-badge[b-mbvuvvzzcs] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active[b-mbvuvvzzcs] {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive[b-mbvuvvzzcs] {
    background: #fee2e2;
    color: #991b1b;
}

/* Action Buttons in Grid */
.action-buttons[b-mbvuvvzzcs] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-icon[b-mbvuvvzzcs] {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-mbvuvvzzcs] {
    background: #0C5FE3;
    color: white;
}

/* Primary Button */
.btn-primary[b-mbvuvvzzcs] {
    background: #0C5FE3;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-mbvuvvzzcs] {
    background: #0a4fc0;
}

.btn-primary:disabled[b-mbvuvvzzcs] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dialog Styles */
.group-dialog .e-dlg-header[b-mbvuvvzzcs] {
    font-weight: 600;
    font-size: 1.1rem;
}

.dialog-tabs[b-mbvuvvzzcs] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.dialog-tab[b-mbvuvvzzcs] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    color: #6b7280;
}

.dialog-tab:hover:not(:disabled)[b-mbvuvvzzcs] {
    background: #e5e7eb;
}

.dialog-tab.active[b-mbvuvvzzcs] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.dialog-tab:disabled[b-mbvuvvzzcs] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-content[b-mbvuvvzzcs] {
    min-height: 300px;
}

/* Form Grid */
.form-grid[b-mbvuvvzzcs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-mbvuvvzzcs] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group-checkbox[b-mbvuvvzzcs] {
    flex-direction: row;
    align-items: center;
    grid-column: span 2;
    margin-top: 0.5rem;
}

.form-label[b-mbvuvvzzcs] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-label .required[b-mbvuvvzzcs] {
    color: #ef4444;
}

/* Members Container - Picklist Style */
.members-container[b-mbvuvvzzcs] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: 320px;
}

.members-panel[b-mbvuvvzzcs] {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-mbvuvvzzcs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.panel-header h4[b-mbvuvvzzcs] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header h4 i[b-mbvuvvzzcs] {
    color: #6b7280;
}

.count-badge[b-mbvuvvzzcs] {
    background: #e5e7eb;
    color: #374151;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.members-panel .search-box[b-mbvuvvzzcs] {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.members-list[b-mbvuvvzzcs] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.member-item[b-mbvuvvzzcs] {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.25rem;
}

.member-item:hover[b-mbvuvvzzcs] {
    background: #e5e7eb;
}

.member-item.selected[b-mbvuvvzzcs] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.member-name[b-mbvuvvzzcs] {
    font-size: 0.875rem;
    color: #374151;
}

.empty-list[b-mbvuvvzzcs] {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    font-style: italic;
}

/* Transfer Buttons */
.transfer-buttons[b-mbvuvvzzcs] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.btn-transfer[b-mbvuvvzzcs] {
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-transfer:hover:not(:disabled)[b-mbvuvvzzcs] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.btn-transfer:disabled[b-mbvuvvzzcs] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Unauthorized Container */
.unauthorized-container[b-mbvuvvzzcs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6b7280;
}

.unauthorized-container i[b-mbvuvvzzcs] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.unauthorized-container h2[b-mbvuvvzzcs] {
    margin: 0 0 0.5rem;
    color: #374151;
}

/* Grid Styling Overrides */
[b-mbvuvvzzcs] .e-grid {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

[b-mbvuvvzzcs] .e-grid .e-headercell {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

[b-mbvuvvzzcs] .e-grid .e-rowcell {
    padding: 0.75rem;
}

[b-mbvuvvzzcs] .e-grid .e-row:hover .e-rowcell {
    background: #f3f4f6;
}

/* Dialog Button Overrides */
[b-mbvuvvzzcs] .e-dialog .e-footer-content {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

[b-mbvuvvzzcs] .e-dialog .e-btn.e-primary {
    background: #0C5FE3;
    border-color: #0C5FE3;
}

[b-mbvuvvzzcs] .e-dialog .e-btn.e-primary:hover {
    background: #0a4fc0;
    border-color: #0a4fc0;
}

/* Responsive */
@media (max-width: 768px) {
    .content-section[b-mbvuvvzzcs] {
        padding: 1rem;
    }

    .form-grid[b-mbvuvvzzcs] {
        grid-template-columns: 1fr;
    }

    .members-container[b-mbvuvvzzcs] {
        flex-direction: column;
    }

    .transfer-buttons[b-mbvuvvzzcs] {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/User/SecurityGroupsConfiguration.razor.rz.scp.css */
/* ========================================
   SECURITY GROUPS PAGE - Modern Styles
   ========================================
   PURPOSE: Styles for the unified Security Groups management page (Azure AD + Google)
   IMPLICATION: Follows same patterns as GroupsNew.razor.css and UsersNew.razor.css
   ======================================== */

/* Page Container */
.page-container[b-p6b9t2dvxy] {
    min-height: 100vh;
    background: #f3f4f6;
}

/* Loading State */
.loading-state[b-p6b9t2dvxy] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

/* Tab Badge */
.tab-badge[b-p6b9t2dvxy] {
    background: rgba(255, 255, 255, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.tab-button-inline.active .tab-badge[b-p6b9t2dvxy] {
    background: rgba(12, 95, 227, 0.15);
    color: #0C5FE3;
}

/* Content Section */
.content-section[b-p6b9t2dvxy] {
    padding: 1.5rem 2.5rem;
}

/* Provider Toggle — Azure AD | Google selector */
.provider-toggle[b-p6b9t2dvxy] {
    display: inline-flex;
    background: #e5e7eb;
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
}

.provider-button[b-p6b9t2dvxy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: #6b7280;
    transition: all 0.2s ease;
}

.provider-button:hover[b-p6b9t2dvxy] {
    color: #374151;
}

.provider-button.active[b-p6b9t2dvxy] {
    background: white;
    color: #0C5FE3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Provider Badge — inline label in grid rows */
.provider-badge[b-p6b9t2dvxy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.provider-azure[b-p6b9t2dvxy] {
    background: #dbeafe;
    color: #1e40af;
}

.provider-google[b-p6b9t2dvxy] {
    background: #fef3c7;
    color: #92400e;
}

/* Preview Card — holds fetched groups before import */
.preview-card[b-p6b9t2dvxy] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.preview-header[b-p6b9t2dvxy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.preview-header h3[b-p6b9t2dvxy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-header h3 i[b-p6b9t2dvxy] {
    color: #4285f4;
}

.preview-subtitle[b-p6b9t2dvxy] {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.preview-actions[b-p6b9t2dvxy] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    gap: 0.5rem;
}

/* Count Badge */
.count-badge[b-p6b9t2dvxy] {
    background: #e5e7eb;
    color: #374151;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Info Banner — warning/info state messages */
.info-banner[b-p6b9t2dvxy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.info-banner.warning[b-p6b9t2dvxy] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.info-banner i[b-p6b9t2dvxy] {
    font-size: 1.1rem;
}

/* Actions Bar — buttons grouped on the right, no spreading */
.actions-bar[b-p6b9t2dvxy] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    gap: 0.5rem;
}

/* Status Badges */
.status-badge[b-p6b9t2dvxy] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active[b-p6b9t2dvxy] {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive[b-p6b9t2dvxy] {
    background: #fee2e2;
    color: #991b1b;
}

/* Danger Override — red variant of upload-button for Make Inactive */
.btn-danger-override[b-p6b9t2dvxy] {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

.btn-danger-override:hover:not(:disabled)[b-p6b9t2dvxy] {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Disabled state for filter-button and upload-button */
.filter-button:disabled[b-p6b9t2dvxy],
.upload-button:disabled[b-p6b9t2dvxy] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dialog Styles */
.group-dialog .e-dlg-header[b-p6b9t2dvxy] {
    font-weight: 600;
    font-size: 1.1rem;
}

.dialog-content[b-p6b9t2dvxy] {
    min-height: 100px;
    padding: 1rem 0;
}

/* Form Group */
.form-group[b-p6b9t2dvxy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-label[b-p6b9t2dvxy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

/* Unauthorized Container */
.unauthorized-container[b-p6b9t2dvxy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6b7280;
}

.unauthorized-container i[b-p6b9t2dvxy] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.unauthorized-container h2[b-p6b9t2dvxy] {
    margin: 0 0 0.5rem;
    color: #374151;
}

/* Grid Styling Overrides */
[b-p6b9t2dvxy] .e-grid {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

[b-p6b9t2dvxy] .e-grid .e-headercell {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

[b-p6b9t2dvxy] .e-grid .e-rowcell {
    padding: 0.75rem;
}

[b-p6b9t2dvxy] .e-grid .e-row:hover .e-rowcell {
    background: #f3f4f6;
}

/* Dialog Button Overrides */
[b-p6b9t2dvxy] .e-dialog .e-footer-content {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

[b-p6b9t2dvxy] .e-dialog .e-btn.e-primary {
    background: #0C5FE3;
    border-color: #0C5FE3;
}

[b-p6b9t2dvxy] .e-dialog .e-btn.e-primary:hover {
    background: #0a4fc0;
    border-color: #0a4fc0;
}

/* Deactivation Warning Dialog */
.deactivate-warning[b-p6b9t2dvxy] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.5rem 0;
}

.deactivate-warning-icon[b-p6b9t2dvxy] {
    font-size: 2rem;
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.deactivate-warning-title[b-p6b9t2dvxy] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 0.5rem 0;
}

.deactivate-warning-text[b-p6b9t2dvxy] {
    font-size: 0.875rem;
    color: #374151;
    margin: 0;
    line-height: 1.5;
}

.deactivate-group-list[b-p6b9t2dvxy] {
    margin: 0.25rem 0 0 1.25rem;
    padding: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.deactivate-group-list li[b-p6b9t2dvxy] {
    margin-bottom: 0.2rem;
}

/* Import Dialog — slightly wider grid area */
[b-p6b9t2dvxy] .import-dialog .e-dlg-content {
    max-height: 500px;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .content-section[b-p6b9t2dvxy] {
        padding: 1rem;
    }

    .preview-card[b-p6b9t2dvxy] {
        padding: 1rem;
    }

    .actions-bar[b-p6b9t2dvxy] {
        flex-wrap: wrap;
    }

    .provider-toggle[b-p6b9t2dvxy] {
        flex-direction: column;
    }
}
/* _content/OEAI.Apps.SaaS/Pages/User/User.razor.rz.scp.css */
/* ========================================
   USER PAGE - Validation Styles
   ========================================
   PURPOSE: Client-side validation error display
   IMPLICATION: Clear visual feedback for invalid form inputs
   ======================================== */

/* COMMENT: Validation message styling */
/* PURPOSE: Display validation errors in a user-friendly manner */
/* IMPLICATION: Clear visual feedback for invalid form inputs */
[b-4936hqin8u] .validation-message,
.validation-message[b-4936hqin8u] {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}
/* _content/OEAI.Apps.SaaS/Pages/User/UsersNew.razor.rz.scp.css */
/* ========================================
   USERS PAGE - Modern Styles
   ========================================
   PURPOSE: Styles for the modernized Users management page
   IMPLICATION: Provides consistent UX with other modern pages
   ======================================== */

/* Page Container */
.page-container[b-sf5qh2zhz9] {
    min-height: 100vh;
    background: #f3f4f6;
}

/* Loading State - matches SchoolProfileV2 pattern */
.loading-state[b-sf5qh2zhz9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #6c757d;
    gap: 0.75rem;
}

/* Content Section */
.content-section[b-sf5qh2zhz9] {
    padding: 1.5rem 2.5rem;
}

/* Per AB#1747 follow-up: when `.gov-v2-table-wrap` sits inside `.content-section` */
/* the wrap shouldn't add its own 2.5rem horizontal padding on top of the section's */
/* own 2.5rem — otherwise the table is inset by 5rem each side and reads as narrower */
/* than the tab strip / search box above it. Vertical padding stays (page-end gutter). */
.content-section .gov-v2-table-wrap[b-sf5qh2zhz9] {
    padding-left: 0;
    padding-right: 0;
}

/* Tab Bar - Subheading Bar Style */
/* COMMENT: Subheading bar navigation consistent with other Settings pages */
/* PURPOSE: Pill-shaped tab buttons with background highlighting for active state */
/* IMPLICATION: Provides clearer visual hierarchy than underlined tabs */
.tab-bar[b-sf5qh2zhz9] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.tab-button[b-sf5qh2zhz9] {
    background: transparent;
    border: none;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-button:hover[b-sf5qh2zhz9] {
    background: rgba(12, 95, 227, 0.08);
    color: #374151;
}

.tab-button.active[b-sf5qh2zhz9] {
    background: #0C5FE3;
    color: white;
    box-shadow: 0 1px 3px rgba(12, 95, 227, 0.2);
}

.tab-badge[b-sf5qh2zhz9] {
    background: rgba(0, 0, 0, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tab-button.active .tab-badge[b-sf5qh2zhz9] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Search and Actions Bar */
.search-actions-bar[b-sf5qh2zhz9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.search-input-wrapper[b-sf5qh2zhz9] {
    position: relative;
    max-width: 400px;
    flex: 1;
}

.search-input-wrapper .search-icon[b-sf5qh2zhz9] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.search-input[b-sf5qh2zhz9] {
    width: 100%;
    padding: 0.625rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.search-input:focus[b-sf5qh2zhz9] {
    outline: none;
    border-color: #0C5FE3;
    box-shadow: 0 0 0 3px rgba(12, 95, 227, 0.1);
}

.clear-search[b-sf5qh2zhz9] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
}

.clear-search:hover[b-sf5qh2zhz9] {
    color: #6b7280;
}

/* Primary Button */
.btn-primary[b-sf5qh2zhz9] {
    background: #0C5FE3;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-sf5qh2zhz9] {
    background: #0a4fc0;
}

.btn-primary:disabled[b-sf5qh2zhz9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Action Buttons in Grid */
.btn-icon[b-sf5qh2zhz9] {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-sf5qh2zhz9] {
    background: #0C5FE3;
    color: white;
}

/* Dialog Styles */
.user-dialog .e-dlg-header[b-sf5qh2zhz9] {
    font-weight: 600;
    font-size: 1.1rem;
}

.dialog-tabs[b-sf5qh2zhz9] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.dialog-tab[b-sf5qh2zhz9] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    color: #6b7280;
}

.dialog-tab:hover:not(:disabled)[b-sf5qh2zhz9] {
    background: #e5e7eb;
}

.dialog-tab.active[b-sf5qh2zhz9] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.dialog-tab:disabled[b-sf5qh2zhz9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-content-wrapper[b-sf5qh2zhz9] {
    position: relative;
}

.dialog-content[b-sf5qh2zhz9] {
    min-height: 380px;
    height: 380px;
}

/* Form Grid */
.form-grid[b-sf5qh2zhz9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group-status[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 120px;
}

.checkbox-row[b-sf5qh2zhz9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    margin-top: 2px;
}

.checkbox-label[b-sf5qh2zhz9] {
    font-weight: 400;
    margin: 0;
}

.form-label[b-sf5qh2zhz9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-label .required[b-sf5qh2zhz9] {
    color: #ef4444;
}

.form-label .form-hint[b-sf5qh2zhz9] {
    font-weight: 400;
    font-size: 0.8rem;
    color: #6b7280;
}

.form-group-full[b-sf5qh2zhz9] {
    grid-column: span 2;
}

/* Label with action button (e.g., Select All) */
.label-with-action[b-sf5qh2zhz9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.label-with-action .form-label[b-sf5qh2zhz9] {
    margin-bottom: 0;
}

.btn-select-all[b-sf5qh2zhz9] {
    background: none;
    border: 1px solid #d1d5db;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #0C5FE3;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.btn-select-all:hover[b-sf5qh2zhz9] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.btn-select-all i[b-sf5qh2zhz9] {
    font-size: 0.7rem;
}

.disabled-input[b-sf5qh2zhz9] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* COMMENT: Validation message styling */
/* PURPOSE: Display validation errors in a user-friendly manner */
/* IMPLICATION: Clear visual feedback for invalid form inputs */
[b-sf5qh2zhz9] .validation-message,
.validation-message[b-sf5qh2zhz9] {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* Members Container - Picklist Style */
.members-container[b-sf5qh2zhz9] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    height: 100%;
}

.members-panel[b-sf5qh2zhz9] {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-sf5qh2zhz9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.panel-header h4[b-sf5qh2zhz9] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-header h4 i[b-sf5qh2zhz9] {
    color: #6b7280;
}

.count-badge[b-sf5qh2zhz9] {
    background: #e5e7eb;
    color: #374151;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.members-panel .search-box[b-sf5qh2zhz9] {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.members-list[b-sf5qh2zhz9] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    max-height: 260px;
}

.member-item[b-sf5qh2zhz9] {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.25rem;
}

.member-item:hover[b-sf5qh2zhz9] {
    background: #e5e7eb;
}

.member-item.selected[b-sf5qh2zhz9] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.member-name[b-sf5qh2zhz9] {
    font-size: 0.875rem;
    color: #374151;
}

.empty-list[b-sf5qh2zhz9] {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    font-style: italic;
}

/* Transfer Buttons */
.transfer-buttons[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.btn-transfer[b-sf5qh2zhz9] {
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.btn-transfer:hover:not(:disabled)[b-sf5qh2zhz9] {
    background: #0C5FE3;
    color: white;
    border-color: #0C5FE3;
}

.btn-transfer:disabled[b-sf5qh2zhz9] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Import Dialog */
.import-container[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
}

.import-icon[b-sf5qh2zhz9] {
    font-size: 4rem;
    color: #0C5FE3;
}

.import-instructions[b-sf5qh2zhz9] {
    text-align: left;
    width: 100%;
}

.import-instructions p[b-sf5qh2zhz9] {
    margin: 0 0 0.5rem;
    color: #374151;
}

.import-instructions ul[b-sf5qh2zhz9] {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.import-instructions li[b-sf5qh2zhz9] {
    margin: 0.25rem 0;
    color: #6b7280;
}

.template-link a[b-sf5qh2zhz9] {
    color: #0C5FE3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.template-link a:hover[b-sf5qh2zhz9] {
    text-decoration: underline;
}

.import-upload[b-sf5qh2zhz9] {
    width: 100%;
    padding: 1rem;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
}

.uploaded-file[b-sf5qh2zhz9] {
    margin-top: 0.5rem;
    color: #065f46;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Unauthorized Container */
.unauthorized-container[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6b7280;
}

.unauthorized-container i[b-sf5qh2zhz9] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.unauthorized-container h2[b-sf5qh2zhz9] {
    margin: 0 0 0.5rem;
    color: #374151;
}

/* Grid Styling Overrides */
[b-sf5qh2zhz9] .e-grid {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

[b-sf5qh2zhz9] .e-grid .e-headercell {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

/* COMMENT: Reduced row padding for condensed view */
/* IMPLICATION: More rows visible without scrolling */
[b-sf5qh2zhz9] .e-grid .e-rowcell {
    padding: 0.4rem 0.75rem;
}

[b-sf5qh2zhz9] .e-grid .e-row:hover .e-rowcell {
    background: #f3f4f6;
}

/* Dialog Button Overrides */
[b-sf5qh2zhz9] .e-dialog .e-footer-content {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

[b-sf5qh2zhz9] .e-dialog .e-btn.e-primary {
    background: #0C5FE3;
    border-color: #0C5FE3;
}

[b-sf5qh2zhz9] .e-dialog .e-btn.e-primary:hover {
    background: #0a4fc0;
    border-color: #0a4fc0;
}

/* Action Buttons Container */
.action-buttons[b-sf5qh2zhz9] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Danger Icon Button (Archive) */
.btn-icon-danger:hover[b-sf5qh2zhz9] {
    background: #ef4444;
    color: white;
}

/* Modal Overlay - matches InterventionTemplates pattern */
/* COMMENT: High z-index ensures confirmation dialogs appear above SfDialog modals */
/* IMPLICATION: Confirmation dialogs will always be visible on top of main dialogs */
.modal-overlay[b-sf5qh2zhz9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: fadeIn-b-sf5qh2zhz9 0.2s ease;
}

/* COMMENT: Inner Modal - rendered inside SfDialog for confirmation dialogs */
/* PURPOSE: Display confirmation dialog on top of main dialog content */
/* IMPLICATION: Uses fixed positioning to cover entire viewport, very high z-index to appear above SfDialog */
[b-sf5qh2zhz9] .inner-modal-overlay,
.inner-modal-overlay[b-sf5qh2zhz9] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    animation: fadeIn-b-sf5qh2zhz9 0.2s ease;
}

[b-sf5qh2zhz9] .inner-modal-content,
.inner-modal-content[b-sf5qh2zhz9] {
    background: white !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 450px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
    animation: slideUp-b-sf5qh2zhz9 0.3s ease;
    position: relative !important;
    z-index: 1000000 !important;
}

.inner-modal-header[b-sf5qh2zhz9] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inner-modal-header h2[b-sf5qh2zhz9] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
}

.inner-modal-header h2 i[b-sf5qh2zhz9] {
    margin-right: 0.5rem;
}

.inner-btn-close[b-sf5qh2zhz9] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.inner-btn-close:hover[b-sf5qh2zhz9] {
    background: rgba(255, 255, 255, 0.3);
}

.inner-modal-body[b-sf5qh2zhz9] {
    padding: 1.5rem;
    background: #f9fafb;
}

.inner-modal-body p[b-sf5qh2zhz9] {
    margin: 0 0 0.75rem;
    color: #374151;
    line-height: 1.5;
}

.inner-modal-body .text-muted[b-sf5qh2zhz9] {
    color: #6b7280;
    font-size: 0.875rem;
}

.inner-modal-footer[b-sf5qh2zhz9] {
    padding: 1rem 1.5rem;
    background: white;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@keyframes fadeIn-b-sf5qh2zhz9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-sf5qh2zhz9] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: slideUp-b-sf5qh2zhz9 0.3s ease;
}

@keyframes slideUp-b-sf5qh2zhz9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-small[b-sf5qh2zhz9] {
    max-width: 450px;
}

.modal-header[b-sf5qh2zhz9] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #0C5FE3 0%, #0a4fc0 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-sf5qh2zhz9] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.modal-header h2 i[b-sf5qh2zhz9] {
    margin-right: 0.5rem;
}

.modal-header .btn-close[b-sf5qh2zhz9] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.modal-header .btn-close:hover[b-sf5qh2zhz9] {
    background: rgba(255, 255, 255, 0.3);
}

.modal-body[b-sf5qh2zhz9] {
    padding: 1.5rem;
    background: #f9fafb;
}

.modal-body p[b-sf5qh2zhz9] {
    margin: 0 0 0.75rem;
    color: #374151;
    line-height: 1.5;
}

.modal-body .text-muted[b-sf5qh2zhz9] {
    color: #6b7280;
    font-size: 0.875rem;
}

.modal-footer[b-sf5qh2zhz9] {
    padding: 1rem 1.5rem;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Button styles for modals */
.btn[b-sf5qh2zhz9] {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    border: none;
}

.btn-secondary[b-sf5qh2zhz9] {
    background: #e5e7eb;
    color: #374151;
}

.btn-secondary:hover[b-sf5qh2zhz9] {
    background: #d1d5db;
}

.btn-danger[b-sf5qh2zhz9] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-sf5qh2zhz9] {
    background: #b91c1c;
}

.btn-danger:disabled[b-sf5qh2zhz9] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Permissions Tab */
.permissions-container[b-sf5qh2zhz9] {
    overflow-y: auto;
    max-height: 360px;
    padding-right: 0.5rem;
}

.permissions-info-banner[b-sf5qh2zhz9] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1e40af;
    font-size: 0.875rem;
}

.permissions-info-banner i[b-sf5qh2zhz9] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.permission-category[b-sf5qh2zhz9] {
    margin-bottom: 1.25rem;
}

.category-header[b-sf5qh2zhz9] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.permission-list[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.permission-item[b-sf5qh2zhz9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.permission-item:hover[b-sf5qh2zhz9] {
    background: #f9fafb;
}

.permission-description[b-sf5qh2zhz9] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-left: 1.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .content-section[b-sf5qh2zhz9] {
        padding: 1rem;
    }

    .search-actions-bar[b-sf5qh2zhz9] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper[b-sf5qh2zhz9] {
        max-width: 100%;
    }

    .form-grid[b-sf5qh2zhz9] {
        grid-template-columns: 1fr;
    }

    .members-container[b-sf5qh2zhz9] {
        flex-direction: column;
    }

    .transfer-buttons[b-sf5qh2zhz9] {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0;
    }
}

/* Power BI RLS refresh status banner — shown inside the user dialog after school assignments are saved.
   Each state variant uses a colour-coded border/background so admins can tell at a glance what is done vs pending.
   IMPLICATION: Removing these styles breaks the visibility of the auto-refresh feedback in the user dialog. */
.rls-refresh-status[b-sf5qh2zhz9] {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.rls-refresh-status i[b-sf5qh2zhz9] {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.rls-refresh-status strong[b-sf5qh2zhz9] {
    display: block;
    margin-bottom: 0.15rem;
}

.rls-refresh-status span[b-sf5qh2zhz9] {
    display: block;
    opacity: 0.85;
}

.rls-refresh-status.pending[b-sf5qh2zhz9] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
}

.rls-refresh-status.done[b-sf5qh2zhz9] {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.rls-refresh-status.none[b-sf5qh2zhz9] {
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
}

.rls-refresh-status.failed[b-sf5qh2zhz9] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/AddSchoolsDialog.razor.rz.scp.css */
/* AddSchoolsDialog styles
   PURPOSE: Scoped styles for the add-missing-schools admin dialog
   IMPLICATION: Removing breaks layout of current schools list, GIAS picker, and manual entry rows */

.add-schools-content[b-564jdnvgap] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ===== Section headings ===== */
.section-heading[b-564jdnvgap] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.school-count-badge[b-564jdnvgap] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
}

.optional-tag[b-564jdnvgap] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
}

/* ===== Current schools list ===== */
.current-schools-section[b-564jdnvgap] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.current-schools-list[b-564jdnvgap] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 160px;
    overflow-y: auto;
}

.current-schools-list li[b-564jdnvgap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #334155;
    padding: 0.2rem 0;
}

.school-name[b-564jdnvgap] {
    flex: 1;
}

.school-urn[b-564jdnvgap] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

/* ===== GIAS picker ===== */
.gias-picker-section[b-564jdnvgap] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.loading-text[b-564jdnvgap],
.no-gias-text[b-564jdnvgap] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.gias-hint[b-564jdnvgap] {
    font-size: 0.775rem;
    color: #94a3b8;
    margin: 0.5rem 0 0;
}

.full-width[b-564jdnvgap] {
    width: 100%;
}

/* ===== Manual entry ===== */
.manual-entry-section[b-564jdnvgap] {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.manual-hint[b-564jdnvgap] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 0.75rem;
}

.manual-entry-row[b-564jdnvgap] {
    display: grid;
    grid-template-columns: 1fr 160px auto;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.6rem;
}

.manual-field label[b-564jdnvgap] {
    display: block;
    font-size: 0.775rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.3rem;
}

.required[b-564jdnvgap] {
    color: #ef4444;
}

.remove-entry-btn[b-564jdnvgap] {
    width: 34px;
    height: 34px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.remove-entry-btn:hover[b-564jdnvgap] {
    background: #fecaca;
}

.add-row-btn[b-564jdnvgap] {
    margin-top: 0.25rem;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/AdminInitiateOnboarding.razor.rz.scp.css */
.admin-trust-onboarding-container[b-qdhuda4w9i] {
    padding: 0 1.5rem;
}

.page-header[b-qdhuda4w9i] {
    margin-bottom: 2rem;
}

.page-header h2[b-qdhuda4w9i] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.375rem;
    letter-spacing: -0.02em;
}

.subtitle[b-qdhuda4w9i] {
    font-size: 0.95rem;
    color: #64748b;
}

.onboarding-form-card[b-qdhuda4w9i] {
    background: white;
    border-radius: 14px;
    padding: 2rem 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.form-section[b-qdhuda4w9i] {
    margin-bottom: 2.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.form-section:last-of-type[b-qdhuda4w9i] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title[b-qdhuda4w9i] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.375rem;
}

.section-description[b-qdhuda4w9i] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.form-grid[b-qdhuda4w9i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.form-field[b-qdhuda4w9i] {
    display: flex;
    flex-direction: column;
}

.form-field.full-width[b-qdhuda4w9i] {
    grid-column: 1 / -1;
}

.form-field label[b-qdhuda4w9i] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.required[b-qdhuda4w9i] {
    color: #ef4444;
}

.full-width[b-qdhuda4w9i] {
    width: 100%;
}

.notes-textarea[b-qdhuda4w9i] {
    min-height: 100px;
}

.module-checkboxes[b-qdhuda4w9i] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.module-checkbox[b-qdhuda4w9i] {
    min-width: 120px;
}

.module-group-label[b-qdhuda4w9i] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.module-radio-group[b-qdhuda4w9i] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ownership-radio-group[b-qdhuda4w9i] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.radio-option[b-qdhuda4w9i] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.radio-option input[type="radio"][b-qdhuda4w9i] {
    margin-top: 0.25rem;
    cursor: pointer;
    accent-color: #3b82f6;
}

.radio-option label[b-qdhuda4w9i] {
    cursor: pointer;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radio-option label strong[b-qdhuda4w9i] {
    font-size: 0.875rem;
    color: #1a1a1a;
}

.radio-description[b-qdhuda4w9i] {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: normal;
}

.loading-message[b-qdhuda4w9i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    color: #0369a1;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.info-message[b-qdhuda4w9i] {
    padding: 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.selected-schools-info[b-qdhuda4w9i] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: #166534;
    font-size: 0.875rem;
    font-weight: 500;
}

.schools-preview[b-qdhuda4w9i] {
    margin-top: 2rem;
}

.schools-preview h4[b-qdhuda4w9i] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.schools-list-preview[b-qdhuda4w9i] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.schools-list-preview li[b-qdhuda4w9i] {
    padding: 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.schools-list-preview strong[b-qdhuda4w9i] {
    color: #1a1a1a;
    font-weight: 600;
}

.school-urn[b-qdhuda4w9i] {
    color: #6b7280;
    font-size: 0.8125rem;
    margin-left: 0.5rem;
}

.school-type[b-qdhuda4w9i] {
    color: #059669;
    font-size: 0.8125rem;
    margin-left: 0.5rem;
}

.schools-list[b-qdhuda4w9i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.school-card[b-qdhuda4w9i] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1.5rem;
}

.school-card-header[b-qdhuda4w9i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.school-card-header h4[b-qdhuda4w9i] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* ===== Azure Admin Toggle ===== */
.admin-toggle-row[b-qdhuda4w9i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.875rem 1.25rem;
}

.admin-toggle-label[b-qdhuda4w9i] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

/* ===== Bromcom Type Selector ===== */
.bromcom-type-selector[b-qdhuda4w9i] {
    margin-top: 1rem;
    padding: 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.form-actions[b-qdhuda4w9i] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
}

.success-overlay[b-qdhuda4w9i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.success-dialog[b-qdhuda4w9i] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.success-header[b-qdhuda4w9i] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.success-icon[b-qdhuda4w9i] {
    font-size: 3rem;
    color: #10b981;
    margin-bottom: 0.5rem;
}

.success-header h3[b-qdhuda4w9i] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.success-body[b-qdhuda4w9i] {
    margin-bottom: 1.5rem;
}

.success-body p[b-qdhuda4w9i] {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

.link-container[b-qdhuda4w9i] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.expiry-note[b-qdhuda4w9i] {
    font-size: 0.75rem;
    color: #f59e0b;
    font-style: italic;
}

.success-footer[b-qdhuda4w9i] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

@media (max-width: 1024px) {
    .form-grid[b-qdhuda4w9i] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-trust-onboarding-container[b-qdhuda4w9i] {
        padding: 0 0.75rem;
    }

    .onboarding-form-card[b-qdhuda4w9i] {
        padding: 1.5rem 1.25rem;
    }

    .form-grid[b-qdhuda4w9i] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-qdhuda4w9i] {
        flex-direction: column;
    }

    .success-footer[b-qdhuda4w9i] {
        flex-direction: column;
    }
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/OnboardingManagement.razor.rz.scp.css */
/* Onboarding Management Dashboard styles
   PURPOSE: Scoped styles for admin onboarding management page
   IMPLICATION: Styles for stats bar, status badges, detail dialog, action buttons */

/* ===== Page Layout ===== */
.management-container[b-l1qn9uzk9e] {
    max-width: 100%;
    margin: 2rem auto;
    padding: 0 1.25rem;
}

.page-header[b-l1qn9uzk9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.header-title h1[b-l1qn9uzk9e] {
    font-size: 1.625rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.header-title p[b-l1qn9uzk9e] {
    color: #64748b;
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ===== Statistics Bar ===== */
.stats-bar[b-l1qn9uzk9e] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-card[b-l1qn9uzk9e] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    flex: 1;
}

.stat-card:hover[b-l1qn9uzk9e] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.stat-count[b-l1qn9uzk9e] {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.stat-label[b-l1qn9uzk9e] {
    display: block;
    font-size: 0.725rem;
    color: #64748b;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.stat-pending[b-l1qn9uzk9e] { border-left: 3px solid #f59e0b; }
.stat-inprogress[b-l1qn9uzk9e] { border-left: 3px solid #6366f1; }
.stat-completed[b-l1qn9uzk9e] { border-left: 3px solid #10b981; }
.stat-provisioned[b-l1qn9uzk9e] { border-left: 3px solid #8b5cf6; }
.stat-cancelled[b-l1qn9uzk9e] { border-left: 3px solid #ef4444; }
.stat-total[b-l1qn9uzk9e] { border-left: 3px solid #64748b; }

/* ===== Filter Bar ===== */
.filter-bar[b-l1qn9uzk9e] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.filter-field[b-l1qn9uzk9e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-field label[b-l1qn9uzk9e] {
    font-size: 0.825rem;
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
}

.filter-dropdown[b-l1qn9uzk9e] {
    width: 200px;
}

/* ===== Status Badges ===== */
.status-badge[b-l1qn9uzk9e] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-pending[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.status-inprogress[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
}

.status-completed[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.status-provisioned[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #5b21b6;
}

.status-cancelled[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

.status-default[b-l1qn9uzk9e] {
    background: #f1f5f9;
    color: #334155;
}

/* ===== Action Buttons ===== */
.action-buttons[b-l1qn9uzk9e] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Amber "Add Schools" button — visually distinct from primary/danger so it's not confused with destructive actions */
[b-l1qn9uzk9e] .e-warning.e-flat.e-small {
    color: #b45309 !important;
    background: #fef9c3 !important;
    border-color: #fde047 !important;
}

[b-l1qn9uzk9e] .e-warning.e-flat.e-small:hover {
    background: #fef08a !important;
    border-color: #facc15 !important;
}

/* ===== Detail Dialog ===== */
.detail-content[b-l1qn9uzk9e] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.detail-section[b-l1qn9uzk9e] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1rem;
}

.detail-section:last-child[b-l1qn9uzk9e] {
    border-bottom: none;
}

.detail-section h4[b-l1qn9uzk9e] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.detail-grid[b-l1qn9uzk9e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.detail-item[b-l1qn9uzk9e] {
    font-size: 0.85rem;
    color: #334155;
}

.detail-item.full-width[b-l1qn9uzk9e] {
    grid-column: 1 / -1;
}

.detail-label[b-l1qn9uzk9e] {
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
}

.detail-list[b-l1qn9uzk9e] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-list li[b-l1qn9uzk9e] {
    padding: 0.375rem 0;
    font-size: 0.85rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.detail-list li:last-child[b-l1qn9uzk9e] {
    border-bottom: none;
}

.config-detail-item[b-l1qn9uzk9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.config-module-name[b-l1qn9uzk9e] {
    font-weight: 600;
    color: #334155;
    font-size: 0.875rem;
}

.config-detail-status[b-l1qn9uzk9e] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
}

.config-detail-status.stored[b-l1qn9uzk9e] {
    background: #d1fae5;
    color: #065f46;
}

.config-detail-status.pending[b-l1qn9uzk9e] {
    background: #fef3c7;
    color: #92400e;
}

.source-tag[b-l1qn9uzk9e] {
    font-size: 0.65rem;
    font-weight: 600;
    background: #e2e8f0;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: #64748b;
    margin-left: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.more-items[b-l1qn9uzk9e] {
    color: #64748b;
    font-style: italic;
}

/* ===== School Assignment Tags (Detail Dialog) ===== */
.school-tag[b-l1qn9uzk9e] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.25rem;
}

.school-tag.all[b-l1qn9uzk9e] {
    background: #ede9fe;
    color: #6d28d9;
}

/* ===== Wizard Stage Badges ===== */
/* PURPOSE: Colour-coded badges showing which wizard step each customer has reached
   IMPLICATION: Displayed in the Wizard Stage column of the management grid */
.wizard-stage-badge[b-l1qn9uzk9e] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.stage-notstarted[b-l1qn9uzk9e] {
    background: #f1f5f9;
    color: #64748b;
}

.stage-inprogress[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
}

.stage-almostdone[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    color: #854d0e;
}

.stage-done[b-l1qn9uzk9e] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.stage-na[b-l1qn9uzk9e] {
    color: #94a3b8;
}

/* ===== Cancel Form Field ===== */
.form-field[b-l1qn9uzk9e] {
    margin-top: 1rem;
}

.form-field label[b-l1qn9uzk9e] {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

.full-width[b-l1qn9uzk9e] {
    width: 100%;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .stats-bar[b-l1qn9uzk9e] {
        flex-direction: column;
    }

    .page-header[b-l1qn9uzk9e] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .detail-grid[b-l1qn9uzk9e] {
        grid-template-columns: 1fr;
    }
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/ProvisionDialog.razor.rz.scp.css */
/* Provision Dialog styles
   PURPOSE: Scoped styles for the trust provisioning confirmation dialog
   IMPLICATION: Styles for summary, warning box, and layout within the dialog */

.provision-dialog-content p[b-fmaukzs447] {
    color: #374151;
    margin-bottom: 1rem;
}

.provision-summary[b-fmaukzs447] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.provision-item[b-fmaukzs447] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.provision-label[b-fmaukzs447] {
    font-weight: 500;
    color: #6b7280;
    min-width: 100px;
}

.provision-warning[b-fmaukzs447] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #92400e;
}

.provision-warning i[b-fmaukzs447] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/TrustOnboardingWizard.razor.rz.scp.css */
/* TrustOnboardingWizard — main wizard layout and progress bar
   PURPOSE: Core layout, progress indicators, step content area, navigation actions, overlays
   IMPLICATION: Removing this file breaks the entire wizard visual structure
   BRAND: MG Blue #0C5FE3 (buttons) | MG Green #22C55E (stages) | Font Aptos | BG white | Labels black */

/* ===== Loading State ===== */
.loading-container[b-l4wpf5i05j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.25rem;
    color: #000000;
    font-size: 0.95rem;
    font-family: 'Aptos', 'Segoe UI', -apple-system, sans-serif;
}

.spinner[b-l4wpf5i05j] {
    width: 48px;
    height: 48px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #0C5FE3;
    border-radius: 50%;
    animation: spin-b-l4wpf5i05j 0.8s linear infinite;
}

@keyframes spin-b-l4wpf5i05j {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== Error State ===== */
.error-container[b-l4wpf5i05j] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.error-card[b-l4wpf5i05j] {
    background: #ffffff;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    max-width: 480px;
    border: 1px solid #f1f5f9;
}

.error-icon[b-l4wpf5i05j] {
    font-size: 3.5rem;
    color: #ef4444;
    margin-bottom: 1.25rem;
}

.error-card h2[b-l4wpf5i05j] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.625rem;
    letter-spacing: -0.01em;
}

.error-card p[b-l4wpf5i05j] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== Wizard Container ===== */
.wizard-container[b-l4wpf5i05j] {
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'Aptos', 'Segoe UI', -apple-system, sans-serif;
    color: #000000;
}

/* ===== Progress Bar ===== */
/* PURPOSE: Hide progress bar when wizard is in the schools-missing paused state
   IMPLICATION: Prevents customer from seeing "Step 3/5" while they cannot advance */
.wizard-progress-hidden[b-l4wpf5i05j] {
    display: none !important;
}

.wizard-progress[b-l4wpf5i05j] {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

.progress-steps[b-l4wpf5i05j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.progress-step[b-l4wpf5i05j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    position: relative;
}

.step-circle[b-l4wpf5i05j] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
}

.progress-step.active .step-circle[b-l4wpf5i05j] {
    background: #22C55E;
    color: #ffffff;
    border-color: #22C55E;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.progress-step.completed .step-circle[b-l4wpf5i05j] {
    background: #15803D;
    color: #ffffff;
    border-color: #15803D;
}

.step-label[b-l4wpf5i05j] {
    font-size: 0.75rem;
    color: #000000;
    text-align: center;
    font-weight: 500;
    transition: all 0.3s ease;
    max-width: 80px;
    line-height: 1.3;
    font-family: 'Aptos', 'Segoe UI', -apple-system, sans-serif;
}

.progress-step.active .step-label[b-l4wpf5i05j] {
    color: #000000;
    font-weight: 700;
}

.progress-step.completed .step-label[b-l4wpf5i05j] {
    color: #000000;
    font-weight: 500;
}

.step-connector[b-l4wpf5i05j] {
    height: 2px;
    background: #e2e8f0;
    flex: 1;
    margin: 0 0.375rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
}

.step-connector.completed[b-l4wpf5i05j] {
    background: #15803D;
}

/* ===== Wizard Content Card ===== */
.wizard-content[b-l4wpf5i05j] {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.wizard-card[b-l4wpf5i05j] {
    padding: 2.5rem 3rem;
}

/* ===== Step Content Shared Styles ===== */
.wizard-step h2[b-l4wpf5i05j] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0.375rem;
    letter-spacing: -0.02em;
    font-family: 'Aptos', 'Segoe UI', -apple-system, sans-serif;
}

.step-description[b-l4wpf5i05j] {
    font-size: 0.925rem;
    color: #000000;
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* ===== Form Grid (shared by Trust Info, Contact, Schools, Azure Admin) ===== */
.form-grid[b-l4wpf5i05j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-field[b-l4wpf5i05j] {
    display: flex;
    flex-direction: column;
}

.form-field.full-width[b-l4wpf5i05j] {
    grid-column: 1 / -1;
}

.form-field label[b-l4wpf5i05j] {
    font-size: 0.825rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
    font-family: 'Aptos', 'Segoe UI', -apple-system, sans-serif;
}

.required[b-l4wpf5i05j] {
    color: #ef4444;
    font-weight: 700;
}

.full-width[b-l4wpf5i05j] {
    width: 100%;
}

/* ===== Schools List ===== */
.schools-list[b-l4wpf5i05j] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.school-card[b-l4wpf5i05j] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.2s ease;
}

.school-card:hover[b-l4wpf5i05j] {
    border-color: #cbd5e1;
}

.school-card h4[b-l4wpf5i05j] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

/* ===== Modules Info (Step 3 module overview) ===== */
.modules-info[b-l4wpf5i05j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.info-card[b-l4wpf5i05j] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
}

.info-card h4[b-l4wpf5i05j] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.75rem;
}

.module-list[b-l4wpf5i05j] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module-list li[b-l4wpf5i05j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.425rem 0;
    color: #000000;
    font-size: 0.9rem;
}

.module-list i[b-l4wpf5i05j] {
    color: #15803D;
    font-size: 0.9rem;
}

.checklist[b-l4wpf5i05j] {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #64748b;
}

.checklist li[b-l4wpf5i05j] {
    padding: 0.425rem 0;
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.875rem;
    line-height: 1.5;
}

.checklist li[b-l4wpf5i05j]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
}

/* ===== Review Section ===== */
.review-sections[b-l4wpf5i05j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.review-section[b-l4wpf5i05j] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.review-section h4[b-l4wpf5i05j] {
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.review-grid[b-l4wpf5i05j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}

.review-item[b-l4wpf5i05j] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.review-item .label[b-l4wpf5i05j] {
    font-size: 0.8rem;
    color: #000000;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.review-item .value[b-l4wpf5i05j] {
    font-size: 0.95rem;
    color: #000000;
    font-weight: 500;
}

.school-list[b-l4wpf5i05j] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.school-list li[b-l4wpf5i05j] {
    padding: 0.5rem 0;
    color: #000000;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
}

.school-list li:last-child[b-l4wpf5i05j] {
    border-bottom: none;
}

/* ===== Confirmation Checkbox ===== */
.confirmation-checkbox[b-l4wpf5i05j] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

/* ===== Wizard Navigation Actions ===== */
.wizard-actions[b-l4wpf5i05j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.75rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 2rem;
}

.spacer[b-l4wpf5i05j] {
    flex: 1;
}

/* ===== Success Overlay Dialog ===== */
.success-overlay[b-l4wpf5i05j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-l4wpf5i05j 0.3s ease;
}

@keyframes fadeIn-b-l4wpf5i05j {
    from { opacity: 0; }
    to { opacity: 1; }
}

.success-dialog[b-l4wpf5i05j] {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.75rem 2.5rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    animation: slideUp-b-l4wpf5i05j 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp-b-l4wpf5i05j {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-header[b-l4wpf5i05j] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.success-icon[b-l4wpf5i05j] {
    font-size: 3.5rem;
    color: #15803D;
    margin-bottom: 0.75rem;
}

.success-header h3[b-l4wpf5i05j] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    letter-spacing: -0.01em;
    font-family: 'Aptos', 'Segoe UI', -apple-system, sans-serif;
}

.success-body[b-l4wpf5i05j] {
    text-align: center;
    margin-bottom: 2rem;
}

.success-body p[b-l4wpf5i05j] {
    font-size: 0.95rem;
    color: #000000;
    margin-bottom: 0.375rem;
    line-height: 1.6;
}

.success-footer[b-l4wpf5i05j] {
    display: flex;
    justify-content: center;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .wizard-container[b-l4wpf5i05j] {
        margin: 1rem auto;
        width: calc(100% - 1rem);
    }

    .wizard-progress[b-l4wpf5i05j] {
        padding: 1.25rem 1rem;
    }

    .progress-steps[b-l4wpf5i05j] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .progress-step[b-l4wpf5i05j] {
        flex-direction: row;
        gap: 0.75rem;
    }

    .step-label[b-l4wpf5i05j] {
        max-width: none;
    }

    .step-connector[b-l4wpf5i05j] {
        display: none;
    }

    .wizard-card[b-l4wpf5i05j] {
        padding: 1.5rem 1.25rem;
    }

    .form-grid[b-l4wpf5i05j] {
        grid-template-columns: 1fr;
    }

    .modules-info[b-l4wpf5i05j] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-l4wpf5i05j] {
        grid-template-columns: 1fr;
    }

    .wizard-actions[b-l4wpf5i05j] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .spacer[b-l4wpf5i05j] {
        display: none;
    }
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepAzureAdmin.razor.rz.scp.css */
/* Step Azure Admin styles — inherits wizard-step, form-grid, form-field from parent
   PURPOSE: Scoped styles for Azure tenant admin step and consent tracking section
   IMPLICATION: Styles for consent status panel, waiting indicators, and action buttons */

/* ===== Admin Toggle Section =====
   PURPOSE: Toggle row for "I am the Azure tenant admin"
   IMPLICATION: Removing these styles breaks the toggle layout */

.admin-toggle-section[b-j8b8ijfofp] {
    margin-bottom: 1.5rem;
}

.admin-toggle-row[b-j8b8ijfofp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.admin-toggle-label[b-j8b8ijfofp] {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ===== Admin Self-Identification Info =====
   PURPOSE: Confirmation message when contact person is also the Azure admin
   IMPLICATION: Removing this hides the email destination feedback */

.admin-self-info[b-j8b8ijfofp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    color: #0c4a6e;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* ===== Consent Section Container ===== */
.consent-section[b-j8b8ijfofp] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.consent-section h3[b-j8b8ijfofp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.375rem;
    letter-spacing: -0.01em;
}

.consent-description[b-j8b8ijfofp] {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ===== Consent Email Sent Confirmation ===== */
.consent-email-sent[b-j8b8ijfofp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 8px;
    color: #065f46;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
    border: 1px solid #6ee7b7;
}

/* ===== Consent Status Panel ===== */
.consent-status-panel[b-j8b8ijfofp] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.consent-status-item[b-j8b8ijfofp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.consent-status-item:last-child[b-j8b8ijfofp] {
    border-bottom: none;
}

.consent-app-name[b-j8b8ijfofp] {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.consent-granted[b-j8b8ijfofp] {
    color: #059669;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.consent-pending[b-j8b8ijfofp] {
    color: #b45309;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.consent-na[b-j8b8ijfofp] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.825rem;
}

/* ===== Consent Action Buttons Row ===== */
.consent-actions[b-j8b8ijfofp] {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

/* ===== Consent Waiting / Warning Note ===== */
.consent-waiting-note[b-j8b8ijfofp] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.5;
}

.consent-waiting-note i[b-j8b8ijfofp] {
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

/* ===== Consent Error Message ===== */
.consent-error[b-j8b8ijfofp] {
    color: #991b1b;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    background: #fee2e2;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #fecaca;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepContact.razor.rz.scp.css */
/* Step Contact styles — inherits wizard-step, form-grid, form-field from parent
   PURPOSE: Scoped styles for contact information step */
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepDataSource.razor.rz.scp.css */
/* Step Data Source styles
   PURPOSE: Scoped styles for data source credential collection step
   IMPLICATION: Styles for module config sections, connection type selector, info banners */

/* ===== Module Config Section Card ===== */
.module-config-section[b-exxs8qk3r9] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease;
}

.module-config-section:hover[b-exxs8qk3r9] {
    border-color: #cbd5e1;
}

.module-config-section h3[b-exxs8qk3r9] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.section-description[b-exxs8qk3r9] {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* ===== Connection Type Selector ===== */
.connection-type-selector[b-exxs8qk3r9] {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

/* ===== Info Banner ===== */
.info-banner[b-exxs8qk3r9] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #1e40af;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
}

.info-banner i[b-exxs8qk3r9] {
    color: #3b82f6;
    flex-shrink: 0;
    font-size: 1rem;
}

/* ===== No Modules Empty State ===== */
.no-modules-message[b-exxs8qk3r9] {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.no-modules-message i[b-exxs8qk3r9] {
    font-size: 2.25rem;
    color: #cbd5e1;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepGoogleAdmin.razor.rz.scp.css */
/* Step Google Admin styles — inherits wizard-step, form-grid, form-field, admin-toggle-section,
   consent-section, consent-email-sent, consent-actions, consent-error from StepAzureAdmin.razor.css
   PURPOSE: Scoped styles specific to the Google Workspace admin step
   IMPLICATION: Shared class names (admin-toggle-section etc.) intentionally reused for visual parity */

/* ===== Google Steps Summary (post-send confirmation)
   PURPOSE: Shows the 4 Google Admin Console steps after instructions email is sent
   IMPLICATION: Removing hides the "what admin needs to do" guidance *@
===== */

.google-steps-summary[b-f1u0gwrzjh] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.google-steps-summary h4[b-f1u0gwrzjh] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.google-steps-summary ol[b-f1u0gwrzjh] {
    margin: 0;
    padding-left: 1.25rem;
    color: #334155;
    font-size: 0.875rem;
    line-height: 1.8;
}

.google-steps-summary .steps-note[b-f1u0gwrzjh] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #059669;
    font-weight: 500;
}

/* ===== Next Steps Info Bar (reuses consent-next-steps from parent CSS) ===== */
.consent-next-steps[b-f1u0gwrzjh] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #0c4a6e;
    line-height: 1.5;
    margin-top: 1rem;
}

.consent-next-steps i[b-f1u0gwrzjh] {
    flex-shrink: 0;
    margin-top: 0.15rem;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepReview.razor.rz.scp.css */
/* Step Review styles
   PURPOSE: Scoped styles for the review and submit step
   NOTE: Styles for review-sections/grid/item defined here (not in parent wizard CSS)
         because Blazor CSS isolation does not cascade from parent to child components.
   IMPLICATION: Removing this file causes the review step to render as unstyled plain text */

/* ===== Review Section Layout ===== */
.review-sections[b-2qqyi65v8m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.review-section[b-2qqyi65v8m] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.review-section h4[b-2qqyi65v8m] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2e8f0;
}

/* ===== Label/Value Grid ===== */
.review-grid[b-2qqyi65v8m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}

.review-item[b-2qqyi65v8m] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.review-item .label[b-2qqyi65v8m] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.review-item .value[b-2qqyi65v8m] {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 500;
    word-break: break-word;
}

/* ===== School List — 2 columns ===== */
.school-list[b-2qqyi65v8m] {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}

.school-list li[b-2qqyi65v8m] {
    padding: 0.35rem 0;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    break-inside: avoid;
    line-height: 1.4;
}

.school-list li:last-child[b-2qqyi65v8m] {
    border-bottom: none;
}

/* ===== Module List ===== */
.module-list[b-2qqyi65v8m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module-list li[b-2qqyi65v8m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    color: #334155;
    font-size: 0.9rem;
}

.module-list i[b-2qqyi65v8m] {
    color: #10b981;
}

/* ===== Data Source Config Summary ===== */
.config-summary[b-2qqyi65v8m] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.5rem;
}

.config-item[b-2qqyi65v8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.config-item:last-child[b-2qqyi65v8m] {
    border-bottom: none;
}

.config-module[b-2qqyi65v8m] {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.config-status.configured[b-2qqyi65v8m] {
    color: #059669;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== Wonde Approver Summary ===== */
.wonde-approver-summary[b-2qqyi65v8m] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #1e40af;
}

/* ===== User Section ===== */
.user-breakdown[b-2qqyi65v8m] {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.user-list[b-2qqyi65v8m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-list li[b-2qqyi65v8m] {
    padding: 0.425rem 0;
    color: #334155;
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.6;
}

.user-list li:last-child[b-2qqyi65v8m] {
    border-bottom: none;
}

.more-users[b-2qqyi65v8m] {
    color: #64748b;
    font-style: italic;
}

.no-users-note[b-2qqyi65v8m] {
    color: #64748b;
    font-size: 0.875rem;
    font-style: italic;
}

/* ===== School Assignment Tags ===== */
.user-school-tag[b-2qqyi65v8m] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.35rem;
    vertical-align: middle;
    letter-spacing: 0.01em;
}

.user-school-tag.all[b-2qqyi65v8m] {
    background: #ede9fe;
    color: #6d28d9;
}

/* ===== Confirmation Checkbox ===== */
.confirmation-checkbox[b-2qqyi65v8m] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

/* ===== Consent Email Note ===== */
.consent-email-note[b-2qqyi65v8m] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-left: 3px solid #10b981;
    border-radius: 4px;
    font-size: 0.825rem;
    color: #065f46;
    font-weight: 500;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .review-grid[b-2qqyi65v8m] {
        grid-template-columns: 1fr;
    }

    .school-list[b-2qqyi65v8m] {
        columns: 1;
    }
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepSchools.razor.rz.scp.css */
/* Step Schools styles
   PURPOSE: Scoped styles for the schools information step
   IMPLICATION: Removing breaks table layout and confirmation section styling */

/* ===== Schools Table ===== */
.schools-table-container[b-dw0jwa6cok] {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.schools-table[b-dw0jwa6cok] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.schools-table thead th[b-dw0jwa6cok] {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.schools-table thead th:first-child[b-dw0jwa6cok] {
    border-radius: 10px 0 0 0;
    width: 72%;
}

.schools-table thead th:last-child[b-dw0jwa6cok] {
    border-radius: 0 10px 0 0;
    width: 28%;
}

.schools-table tbody tr[b-dw0jwa6cok] {
    transition: background 0.15s ease;
}

.schools-table tbody tr:nth-child(even)[b-dw0jwa6cok] {
    background: #fafbfc;
}

.schools-table tbody tr:hover[b-dw0jwa6cok] {
    background: #f0f4ff;
}

.schools-table tbody td[b-dw0jwa6cok] {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.schools-table tbody tr:last-child td[b-dw0jwa6cok] {
    border-bottom: none;
}

/* Strip Syncfusion textbox chrome inside table cells so cells look like plain text rows */
[b-dw0jwa6cok] .table-input .e-input-group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

[b-dw0jwa6cok] .table-input .e-input-group:hover,
[b-dw0jwa6cok] .table-input .e-input-group.e-input-focus {
    border: none !important;
    box-shadow: none !important;
}

[b-dw0jwa6cok] .table-input .e-input {
    padding: 0.35rem 0.25rem !important;
    background: transparent !important;
    font-size: 0.875rem;
    color: #334155;
}

/* ===== Confirmation Section ===== */
.schools-confirmation[b-dw0jwa6cok] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.confirmation-question[b-dw0jwa6cok] {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 1rem;
}

.confirmation-buttons[b-dw0jwa6cok] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* "No" button — muted red outline to signal a destructive-ish action without alarming */
.confirm-no-btn[b-dw0jwa6cok] {
    color: #b45309 !important;
    border-color: #d97706 !important;
}

.confirm-no-btn:hover[b-dw0jwa6cok] {
    background: #fff7ed !important;
}

/* ===== Schools Paused State ===== */
/* PURPOSE: Full-step replacement shown when customer reports schools are missing
   IMPLICATION: Replaces table and confirmation buttons; customer cannot advance until EdEquity resolves */

.schools-paused-state[b-dw0jwa6cok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem 1.5rem;
}

/* Animated clock icon */
.paused-icon-wrap[b-dw0jwa6cok] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border: 2px solid #fde047;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    animation: pulse-amber-b-dw0jwa6cok 2s ease-in-out infinite;
}

@keyframes pulse-amber-b-dw0jwa6cok {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4); }
    50%       { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
}

.paused-icon[b-dw0jwa6cok] {
    font-size: 2.2rem;
    color: #b45309;
}

.paused-heading[b-dw0jwa6cok] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
}

.paused-subtitle[b-dw0jwa6cok] {
    font-size: 0.925rem;
    color: #64748b;
    max-width: 480px;
    line-height: 1.6;
    margin: 0 auto 2rem;
}

/* ===== Three-step progress ===== */
.paused-steps[b-dw0jwa6cok] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 480px;
    margin-bottom: 2rem;
    text-align: left;
}

.paused-step[b-dw0jwa6cok] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ps-connector[b-dw0jwa6cok] {
    width: 2px;
    height: 28px;
    background: #e2e8f0;
    margin-left: 19px;
}

.ps-connector-done[b-dw0jwa6cok] {
    background: #10b981;
}

/* Step dot */
.ps-dot[b-dw0jwa6cok] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.ps-dot-done[b-dw0jwa6cok] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 2px solid #10b981;
}

.ps-dot-active[b-dw0jwa6cok] {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    color: #b45309;
    border: 2px solid #facc15;
    animation: pulse-amber-b-dw0jwa6cok 2s ease-in-out infinite;
}

.ps-dot-upcoming[b-dw0jwa6cok] {
    background: #f8fafc;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
}

/* Step content */
.ps-content[b-dw0jwa6cok] {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ps-label[b-dw0jwa6cok] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.paused-step-upcoming .ps-label[b-dw0jwa6cok] {
    color: #94a3b8;
}

.ps-desc[b-dw0jwa6cok] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.2rem;
    line-height: 1.5;
}

.paused-step-upcoming .ps-desc[b-dw0jwa6cok] {
    color: #94a3b8;
}

/* ===== Saved note ===== */
.paused-saved-note[b-dw0jwa6cok] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    font-size: 0.8rem;
    color: #64748b;
    max-width: 480px;
}

.paused-saved-note i[b-dw0jwa6cok] {
    font-size: 1rem;
    color: #94a3b8;
    flex-shrink: 0;
}
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepTrustInfo.razor.rz.scp.css */
/* Step Trust Info styles — inherits wizard-step, form-grid, form-field from parent
   PURPOSE: Scoped styles for trust information step
   IMPLICATION: Removing this file will not break layout (parent CSS provides base styles) */
/* _content/OEAI.Apps.SaaS/TrustSignup/Pages/WizardSteps/StepUserImport.razor.rz.scp.css */
/* Step User Import styles
   PURPOSE: Scoped styles for user import step (CSV upload and manual entry)
   IMPLICATION: Styles for import tabs, upload area, staged users list */

/* ===== Import Tab Buttons ===== */
.import-tabs[b-18fmwwu345] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 0.3rem;
}

/* ===== Section Containers ===== */
.csv-upload-section[b-18fmwwu345],
.manual-entry-section[b-18fmwwu345] {
    margin-bottom: 2rem;
}

/* ===== Template Download Banner ===== */
.template-download[b-18fmwwu345] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.template-download p[b-18fmwwu345] {
    margin: 0;
    color: #166534;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== Upload Area ===== */
.upload-area[b-18fmwwu345] {
    margin-bottom: 1.5rem;
}

/* ===== Validation Errors ===== */
.validation-errors[b-18fmwwu345] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.validation-errors h4[b-18fmwwu345] {
    color: #dc2626;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.validation-errors ul[b-18fmwwu345] {
    margin: 0;
    padding-left: 1.25rem;
    color: #991b1b;
    font-size: 0.825rem;
    line-height: 1.7;
}

/* ===== CSV Parsed Preview ===== */
.parsed-preview[b-18fmwwu345] {
    margin-bottom: 1.5rem;
}

.parsed-preview h4[b-18fmwwu345] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.parsed-actions[b-18fmwwu345] {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* ===== Manual Entry Form ===== */
.add-button-container[b-18fmwwu345] {
    display: flex;
    align-items: flex-end;
}

.manual-error[b-18fmwwu345] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-top: 0.75rem;
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== Staged Users Section ===== */
.staged-users-section[b-18fmwwu345] {
    margin-top: 2rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

.staged-users-section h4[b-18fmwwu345] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.staged-users-list[b-18fmwwu345] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.staged-user-row[b-18fmwwu345] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.staged-user-row:hover[b-18fmwwu345] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ===== User Info (within staged row) ===== */
.user-info[b-18fmwwu345] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.user-name[b-18fmwwu345] {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
}

.user-email[b-18fmwwu345] {
    color: #64748b;
    font-size: 0.825rem;
}

.user-role[b-18fmwwu345] {
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e2e8f0;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    letter-spacing: 0.01em;
}

/* ===== Source Badges ===== */
.badge-csv[b-18fmwwu345] {
    font-size: 0.7rem;
    font-weight: 600;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-manual[b-18fmwwu345] {
    font-size: 0.7rem;
    font-weight: 600;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ===== No Users Empty State ===== */
.no-users-message[b-18fmwwu345] {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
    margin-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.no-users-message i[b-18fmwwu345] {
    font-size: 2.25rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 0.75rem;
}

/* ===== School Reference Panel ===== */
.school-reference-panel[b-18fmwwu345] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.school-reference-panel h4[b-18fmwwu345] {
    color: #1d4ed8;
    font-size: 0.9rem;
    margin-bottom: 0.375rem;
    font-weight: 700;
}

.reference-note[b-18fmwwu345] {
    font-size: 0.825rem;
    color: #334155;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.school-chips[b-18fmwwu345] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.school-chip[b-18fmwwu345] {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    padding: 0.25rem 0.625rem;
    font-size: 0.775rem;
    color: #1d4ed8;
    font-weight: 500;
}

/* ===== School Display in Staged Users ===== */
.user-schools[b-18fmwwu345] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #0369a1;
    background: #e0f2fe;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-schools.all-schools[b-18fmwwu345] {
    background: #ede9fe;
    color: #6d28d9;
}