/* /Components/Layout/Cases/AppointmentTranscription.razor.rz.scp.css */
/* Appointment Transcription Component Styles */
@keyframes pulse-b-doagk4dz9e {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.recording-pulse[b-doagk4dz9e] {
    animation: pulse-b-doagk4dz9e 1.5s ease-in-out infinite;
}

.audio-wave[b-doagk4dz9e] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 50px;
}

.audio-wave span[b-doagk4dz9e] {
    display: inline-block;
    width: 4px;
    background: linear-gradient(180deg, #dc3545, #ff6b7a);
    border-radius: 2px;
    animation: wave-b-doagk4dz9e 1s ease-in-out infinite;
}

.audio-wave span:nth-child(1)[b-doagk4dz9e] { animation-delay: 0s; height: 16px; }
.audio-wave span:nth-child(2)[b-doagk4dz9e] { animation-delay: 0.1s; height: 28px; }
.audio-wave span:nth-child(3)[b-doagk4dz9e] { animation-delay: 0.2s; height: 40px; }
.audio-wave span:nth-child(4)[b-doagk4dz9e] { animation-delay: 0.3s; height: 28px; }
.audio-wave span:nth-child(5)[b-doagk4dz9e] { animation-delay: 0.4s; height: 16px; }

@keyframes wave-b-doagk4dz9e {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

.transcription-display[b-doagk4dz9e] {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.transcription-text[b-doagk4dz9e] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #212529;
}

.speaker-label[b-doagk4dz9e] {
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.word-high[b-doagk4dz9e] {
    color: #212529;
    font-weight: normal;
}

.word-medium[b-doagk4dz9e] {
    color: #fd7e14;
    font-weight: normal;
}

.word-low[b-doagk4dz9e] {
    color: #dc3545;
    font-weight: normal;
}

.word-partial[b-doagk4dz9e] {
    color: #6c757d;
    font-style: italic;
    opacity: 0.7;
}

.confidence-high[b-doagk4dz9e] {
    color: #198754;
    font-weight: 500;
}

.confidence-medium[b-doagk4dz9e] {
    color: #fd7e14;
    font-weight: 450;
}

.confidence-low[b-doagk4dz9e] {
    color: #dc3545;
    font-weight: 400;
}

.typing-cursor[b-doagk4dz9e] {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #0d6efd;
    margin-left: 2px;
    animation: blink-b-doagk4dz9e 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink-b-doagk4dz9e {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
/* /Components/Layout/Cases/CaseAppointmentsTab.razor.rz.scp.css */
/* CaseAppointmentsTab — Orcanex theme alignment */
.appointments-tab[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    gap: var(--space-3);
}

.appointments-content[b-ugbj6wbtbt] {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-ugbj6wbtbt] .appointments-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Toolbar */
.appointments-toolbar[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.appointments-search[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 320px;
    color: var(--color-text-muted);
    transition: border-color var(--duration-hover) var(--ease-hover);
    position: relative;
}

.appointments-search:focus-within[b-ugbj6wbtbt] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.appointments-search-input[b-ugbj6wbtbt] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
}

.appointments-search-input[b-ugbj6wbtbt]::placeholder {
    color: var(--color-text-subtle);
}

.appointments-search-clear[b-ugbj6wbtbt] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}

.appointments-search-clear:hover[b-ugbj6wbtbt] {
    color: var(--color-text);
}

.appointments-toolbar-spacer[b-ugbj6wbtbt] {
    flex: 1;
}

.appointments-toolbar-count[b-ugbj6wbtbt] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.appointments-toolbar-count strong[b-ugbj6wbtbt] {
    color: var(--color-text);
    font-weight: 600;
}

/* Legacy search-clear (kept for backwards compatibility on any unmigrated markup) */
.btn-search-clear[b-ugbj6wbtbt] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--color-text-subtle);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search-clear:hover[b-ugbj6wbtbt] {
    color: var(--color-text-muted);
    background-color: var(--color-bg);
}

/* Card wrapper for table - matching Cases page */
.appointments-table-card[b-ugbj6wbtbt] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Grid Container */
.appointments-grid-container[b-ugbj6wbtbt] {
    width: 100%;
}

/* Header Row - matching Cases page styling */
/* Columns: ID, DATE & TIME, DURATION, SPECIALIST, STATUS, TYPE, FLAGS, ACTIONS */
.appointments-header-row[b-ugbj6wbtbt] {
    display: grid;
    grid-template-columns: 80px 130px 110px 230px 200px 1fr 90px 85px;
    align-items: center;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    padding: 0;
    padding-right: 6px; /* Account for scrollbar */
}

.header-cell[b-ugbj6wbtbt] {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-cell.cell-id[b-ugbj6wbtbt] {
    padding-left: 0.75rem;
}

.header-cell.cell-actions[b-ugbj6wbtbt] {
    text-align: right;
    padding-right: 0.75rem;
}

/* Sortable Headers */
.sortable-header[b-ugbj6wbtbt] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all 0.1s ease;
}

.sortable-header:hover[b-ugbj6wbtbt] {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.sortable-header.active[b-ugbj6wbtbt] {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.sort-icon[b-ugbj6wbtbt] {
    opacity: 0.3;
    margin-left: 3px;
    font-size: 0.6875rem;
}

.sort-icon.active[b-ugbj6wbtbt] {
    opacity: 1;
    color: var(--color-accent);
}

/* Virtualized Table Body.
   Height matches the Documents tab's FileList default (`calc(100vh - 350px)`) so
   the appointments card fills the available viewport height instead of being
   capped at 500px. A capped table hid expanded-row detail at desktop and made
   the tab feel cramped; uncapping lets row expansions stay visible without
   forcing the outer page to scroll. */
.virtualized-table-body[b-ugbj6wbtbt] {
    height: calc(100vh - 350px);
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Grid layout for virtual rows - matches header exactly */
.appointment-row-virtual[b-ugbj6wbtbt] {
    display: grid;
    grid-template-columns: 80px 130px 110px 230px 200px 1fr 90px 85px;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-bg);
    cursor: pointer;
    transition: background-color 0.1s ease;
    min-height: 52px;
}

.appointment-row-virtual:nth-child(even)[b-ugbj6wbtbt] {
    background-color: var(--color-bg);
}

.appointment-row-virtual:hover[b-ugbj6wbtbt] {
    background-color: var(--color-bg) !important;
}

.appointment-row-virtual.expanded[b-ugbj6wbtbt] {
    background-color: var(--color-accent-soft);
    border-left: 3px solid var(--color-accent);
}

.appointment-row-virtual.expanded:hover[b-ugbj6wbtbt] {
    background-color: var(--color-accent-soft);
}

.appointment-row-virtual .cell[b-ugbj6wbtbt] {
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cell-specific styles */
.cell-id[b-ugbj6wbtbt] {
    padding-left: 0.75rem !important;
}

/* ID Badge styling - matching Cases page */
.appointment-id[b-ugbj6wbtbt] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.cell-datetime[b-ugbj6wbtbt] {
    white-space: nowrap;
}

/* Date display styling matching Cases page */
.date-display[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.date-main[b-ugbj6wbtbt] {
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.8125rem;
}

.date-time[b-ugbj6wbtbt] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.cell-duration[b-ugbj6wbtbt] {
    white-space: nowrap;
}

/* Duration badge */
.duration-badge[b-ugbj6wbtbt] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.cell-specialist[b-ugbj6wbtbt] {
    min-width: 0;
    overflow: hidden;
}

.specialist-name-text[b-ugbj6wbtbt] {
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.cell-status[b-ugbj6wbtbt] {
    white-space: nowrap;
}

/* Status pill — Orcanex pill shape (rounded pill, sentence case) */
.status-pill[b-ugbj6wbtbt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    letter-spacing: 0.1px;
    text-transform: none;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

.cell-type[b-ugbj6wbtbt] {
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* Type text styling */
.type-text[b-ugbj6wbtbt] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-flags[b-ugbj6wbtbt] {
    white-space: nowrap;
}

.cell-actions[b-ugbj6wbtbt] {
    text-align: right;
    padding-right: 0.75rem !important;
}

/* Flag badges - compact icon indicators */
.flag-badge[b-ugbj6wbtbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.flag-badge i[b-ugbj6wbtbt] {
    font-size: 0.875rem;
}

.flag-mychoice[b-ugbj6wbtbt] {
    background-color: var(--color-warn-soft);
    color: var(--color-warn);
    border: 1px solid var(--color-warn);
}

.flag-video[b-ugbj6wbtbt] {
    background-color: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.flag-translation[b-ugbj6wbtbt] {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.flag-cancelled[b-ugbj6wbtbt] {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

/* Action buttons - matching Cases page style */
.action-buttons[b-ugbj6wbtbt] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.action-btn[b-ugbj6wbtbt] {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover[b-ugbj6wbtbt] {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

.action-btn i[b-ugbj6wbtbt] {
    font-size: 1.08rem;
}

/* Specialist Avatar Styles - Matching Cases page exactly */
.specialist-avatars[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
}

.specialist-avatar[b-ugbj6wbtbt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, z-index 0s;
    position: relative;
    flex-shrink: 0;
}

.specialist-avatar:hover[b-ugbj6wbtbt] {
    transform: scale(1.1);
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.specialist-avatar-img[b-ugbj6wbtbt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    background-color: var(--color-border);
}

.specialist-avatar-placeholder[b-ugbj6wbtbt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-text-subtle);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.specialist-avatar-placeholder i[b-ugbj6wbtbt] {
    font-size: 0.75rem;
}

/* Large avatars for expanded view */
.specialist-avatar-lg[b-ugbj6wbtbt] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.specialist-avatar-placeholder-lg[b-ugbj6wbtbt] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.specialist-avatar-placeholder-lg i[b-ugbj6wbtbt] {
    font-size: 1.5rem;
    color: white;
}

/* Badges */
.appointments-grid-container .badge[b-ugbj6wbtbt] {
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
}

/* Expanded details row — Orcanex accent left-border + soft body */
.expanded-details-row[b-ugbj6wbtbt] {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
}

.expanded-panel[b-ugbj6wbtbt] {
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
}

/* Info cards — Orcanex card pattern (white panel + 1px border + 12px radius) */
.info-card[b-ugbj6wbtbt] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    box-shadow: none;
}

.info-card-success[b-ugbj6wbtbt] { border-color: var(--color-success-soft); }
.info-card-success .info-card-header[b-ugbj6wbtbt] {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.info-card-primary[b-ugbj6wbtbt] { border-color: var(--color-accent-soft); }
.info-card-primary .info-card-header[b-ugbj6wbtbt] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.info-card-info[b-ugbj6wbtbt] { border-color: var(--color-accent-soft); }
.info-card-info .info-card-header[b-ugbj6wbtbt] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.info-card-header[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
}

.info-card-header i[b-ugbj6wbtbt] { font-size: 1.08rem; color: var(--color-text-muted); }

.info-card-body[b-ugbj6wbtbt] { padding: 14px; }

.info-row[b-ugbj6wbtbt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.info-row:last-child[b-ugbj6wbtbt] { border-bottom: none; }

.info-label[b-ugbj6wbtbt] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.info-value[b-ugbj6wbtbt] { font-size: 1rem; color: var(--color-text); font-weight: 500; }

.info-code[b-ugbj6wbtbt] {
    font-size: 0.92rem;
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Scrollbar styling */
.virtualized-table-body[b-ugbj6wbtbt]::-webkit-scrollbar { width: 6px; }
.virtualized-table-body[b-ugbj6wbtbt]::-webkit-scrollbar-track { background: var(--color-bg); border-radius: 10px; }
.virtualized-table-body[b-ugbj6wbtbt]::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; }
.virtualized-table-body[b-ugbj6wbtbt]::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Modal styles */
.appointment-modal[b-ugbj6wbtbt] { border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,0.15); overflow: hidden; }
.appointment-modal .modal-header[b-ugbj6wbtbt] { padding: 0.75rem 1rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.appointment-modal .modal-title[b-ugbj6wbtbt] { font-size: 1rem; font-weight: 600; }
.appointment-modal .modal-body[b-ugbj6wbtbt] { padding: 0; max-height: 65vh; overflow-y: auto; }
.appointment-modal .modal-footer.compact[b-ugbj6wbtbt] { padding: 0.5rem 1rem; background: var(--color-bg); border-top: 1px solid var(--color-border); }
/* Scheduling tabs */
.scheduling-tabs-compact[b-ugbj6wbtbt] { display: flex; background: #fff; border-bottom: 1px solid #e9ecef; }
.scheduling-tabs-compact .tab-btn[b-ugbj6wbtbt] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border: none; background: #f8f9fa; color: #6c757d; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; border-bottom: 2px solid transparent; }
.scheduling-tabs-compact .tab-btn:hover[b-ugbj6wbtbt] { background: #e9ecef; color: #495057; }
.scheduling-tabs-compact .tab-btn.active[b-ugbj6wbtbt] { background: #fff; color: #0d6efd; border-bottom-color: #0d6efd; }
.scheduling-tabs-compact .tab-btn i[b-ugbj6wbtbt] { font-size: 1rem; }
.tab-content-wrapper[b-ugbj6wbtbt] { padding: 0.75rem; }
/* Form styles */
.tab-instructions[b-ugbj6wbtbt] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.75rem; margin-bottom: 0.75rem; }
.tab-instructions i[b-ugbj6wbtbt] { font-size: 1rem; }
.tab-instructions.primary[b-ugbj6wbtbt] { background: #e3f2fd; border: 1px solid #90caf9; color: #1565c0; }
.tab-instructions.success[b-ugbj6wbtbt] { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.compact-form-row[b-ugbj6wbtbt] { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.75rem; }
.compact-form-row .form-field[b-ugbj6wbtbt] { flex: 1; }
.compact-form-row .form-field.my-choice-toggle[b-ugbj6wbtbt] { flex: 0 0 auto; }
.compact-label[b-ugbj6wbtbt] { display: block; font-size: 0.6875rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 0.25rem; }
.compact-label.required-field[b-ugbj6wbtbt]::after { content: " *"; color: #dc3545; }
/* My Choice styles */
.my-choice-check[b-ugbj6wbtbt] { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; font-size: 0.75rem; font-weight: 500; color: #6c757d; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.my-choice-check input[b-ugbj6wbtbt] { display: none; }
.my-choice-check:hover[b-ugbj6wbtbt] { background: #e8f5e9; border-color: #81c784; }
.my-choice-check.checked[b-ugbj6wbtbt] { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.my-choice-check.checked i[b-ugbj6wbtbt] { color: #4caf50; }
.my-choice-check i[b-ugbj6wbtbt] { font-size: 0.875rem; color: #9e9e9e; }
.my-choice-search-panel[b-ugbj6wbtbt] { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.75rem; min-height: 120px; }
.search-date-range[b-ugbj6wbtbt] { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e0e0e0; }
.search-date-range .date-field[b-ugbj6wbtbt] { flex: 1; }
.search-date-range .search-btn-field[b-ugbj6wbtbt] { flex: 0 0 auto; }
.search-prompt-simple[b-ugbj6wbtbt] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; color: #666; font-size: 0.8125rem; }
.search-prompt-simple i[b-ugbj6wbtbt] { font-size: 1.5rem; color: #4caf50; }
/* Specialists grid */
.specialists-grid[b-ugbj6wbtbt] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.specialist-tile[b-ugbj6wbtbt] { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; }
.specialist-tile:hover[b-ugbj6wbtbt] { border-color: #4caf50; background: #f1f8e9; }
.specialist-tile.selected[b-ugbj6wbtbt] { border-color: #4caf50; background: #e8f5e9; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); }
.specialist-tile-icon[b-ugbj6wbtbt] { width: 32px; height: 32px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.specialist-tile-icon i[b-ugbj6wbtbt] { font-size: 1rem; color: #4caf50; }
.specialist-tile.selected .specialist-tile-icon[b-ugbj6wbtbt] { background: #4caf50; }
.specialist-tile.selected .specialist-tile-icon i[b-ugbj6wbtbt] { color: #fff; }
.specialist-tile-info[b-ugbj6wbtbt] { flex: 1; min-width: 0; }
.specialist-tile-name[b-ugbj6wbtbt] { font-size: 0.8125rem; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specialist-tile-slots[b-ugbj6wbtbt] { font-size: 0.6875rem; color: #666; }
.specialist-tile-check[b-ugbj6wbtbt] { color: #4caf50; font-size: 1.25rem; }
/* Selection summary */
.selection-summary[b-ugbj6wbtbt] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.8125rem; margin-top: 0.75rem; }
.selection-summary.success[b-ugbj6wbtbt] { background: #e8f5e9; border: 1px solid #4caf50; color: #2e7d32; }
.selection-summary.primary[b-ugbj6wbtbt] { background: #e3f2fd; border: 1px solid #2196f3; color: #1565c0; }
.selection-summary i[b-ugbj6wbtbt] { font-size: 1.25rem; }
.selection-summary div[b-ugbj6wbtbt] { flex: 1; }
.selection-summary .btn-clear[b-ugbj6wbtbt] { background: none; border: none; color: inherit; opacity: 0.7; cursor: pointer; padding: 0.25rem; }
.selection-summary .btn-clear:hover[b-ugbj6wbtbt] { opacity: 1; }
/* Manual form */
.manual-tab-content .manual-form[b-ugbj6wbtbt] { background: #f8f9fa; padding: 0.75rem; border-radius: 6px; }
.duration-select[b-ugbj6wbtbt] { display: flex; gap: 2px; }
.duration-select .dur-btn[b-ugbj6wbtbt] { flex: 1; padding: 0.375rem 0.25rem; border: 1px solid #dee2e6; background: #fff; font-size: 0.75rem; font-weight: 500; color: #495057; cursor: pointer; transition: all 0.15s ease; }
.duration-select .dur-btn:first-child[b-ugbj6wbtbt] { border-radius: 4px 0 0 4px; }
.duration-select .dur-btn:last-child[b-ugbj6wbtbt] { border-radius: 0 4px 4px 0; }
.duration-select .dur-btn:hover[b-ugbj6wbtbt] { background: #e9ecef; }
.duration-select .dur-btn.active[b-ugbj6wbtbt] { background: #0d6efd; border-color: #0d6efd; color: #fff; }
/* Availability search wrapper */
.availability-search-wrapper[b-ugbj6wbtbt] { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.no-results[b-ugbj6wbtbt] { text-align: center; padding: 1.5rem; color: #666; }
.no-results i[b-ugbj6wbtbt] { font-size: 2rem; color: #ccc; margin-bottom: 0.5rem; }
.no-results p[b-ugbj6wbtbt] { font-size: 0.8125rem; margin-bottom: 0.75rem; }
/* Modal footer */
.modal-footer .btn[b-ugbj6wbtbt] { padding: 0.625rem 1.5rem; font-weight: 500; border-radius: 6px; }
/* Responsive adjustments */
@media (max-width: 1400px) {
    .appointments-header-row[b-ugbj6wbtbt],
    .appointment-row-virtual[b-ugbj6wbtbt] {
        grid-template-columns: 75px 120px 90px 170px 150px 1fr 85px 80px;
    }

    .specialist-name-text[b-ugbj6wbtbt] {
        max-width: 140px;
    }
}

@media (max-width: 1200px) {
    .appointments-header-row[b-ugbj6wbtbt],
    .appointment-row-virtual[b-ugbj6wbtbt] {
        grid-template-columns: 70px 115px 85px 160px 140px 1fr 80px 75px;
    }

    .specialist-name-text[b-ugbj6wbtbt] {
        max-width: 130px;
    }
}

@media (max-width: 992px) {
    .appointments-header-row[b-ugbj6wbtbt],
    .appointment-row-virtual[b-ugbj6wbtbt] {
        grid-template-columns: 65px 110px 80px 150px 130px 1fr 70px;
    }

    .cell-flags[b-ugbj6wbtbt],
    .header-cell.cell-flags[b-ugbj6wbtbt] {
        display: none;
    }

    .specialist-name-text[b-ugbj6wbtbt] {
        max-width: 120px;
    }
}

@media (max-width: 768px) {
    .appointments-header-row[b-ugbj6wbtbt],
    .appointment-row-virtual[b-ugbj6wbtbt] {
        grid-template-columns: 60px 105px 1fr 120px 65px;
    }

    .cell-duration[b-ugbj6wbtbt],
    .cell-type[b-ugbj6wbtbt],
    .header-cell.cell-duration[b-ugbj6wbtbt],
    .header-cell.cell-type[b-ugbj6wbtbt] {
        display: none;
    }

    .specialist-name-text[b-ugbj6wbtbt] {
        max-width: 100px;
    }
}

/* ============================================
   View Transcriptions Modal Styles
   ============================================ */

.transcription-modal-icon[b-ugbj6wbtbt] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.empty-state-icon[b-ugbj6wbtbt] {
    width: 80px;
    height: 80px;
    background: var(--color-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.empty-state-icon i[b-ugbj6wbtbt] {
    font-size: 2.5rem;
    color: var(--color-text-subtle);
}

.transcriptions-summary[b-ugbj6wbtbt] {
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

/* Transcription Cards */
.transcription-cards[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transcription-card[b-ugbj6wbtbt] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.transcription-card:hover[b-ugbj6wbtbt] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.transcription-card.expanded[b-ugbj6wbtbt] {
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.transcription-card-header[b-ugbj6wbtbt] {
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.transcription-card-header:hover[b-ugbj6wbtbt] {
    background-color: var(--color-bg);
}

.transcription-icon-wrapper[b-ugbj6wbtbt] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.transcription-card.expanded .transcription-icon-wrapper[b-ugbj6wbtbt] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
}

.transcription-title[b-ugbj6wbtbt] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.transcription-meta[b-ugbj6wbtbt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.transcription-meta .meta-item[b-ugbj6wbtbt] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.transcription-meta .meta-item i[b-ugbj6wbtbt] {
    font-size: 0.875rem;
    color: var(--color-text-subtle);
}

.encrypted-badge[b-ugbj6wbtbt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #15803d;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid #bbf7d0;
}

.encrypted-badge i[b-ugbj6wbtbt] {
    font-size: 0.875rem;
}

.expand-indicator[b-ugbj6wbtbt] {
    width: 28px;
    height: 28px;
    background: var(--color-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: all 0.2s ease;
}

.transcription-card.expanded .expand-indicator[b-ugbj6wbtbt] {
    background: #0ea5e9;
    color: white;
    transform: rotate(180deg);
}

.transcription-card-header:hover .expand-indicator[b-ugbj6wbtbt] {
    background: var(--color-border);
}

.transcription-card.expanded .transcription-card-header:hover .expand-indicator[b-ugbj6wbtbt] {
    background: #0284c7;
}

/* Transcription Content (Expanded) */
.transcription-card-body[b-ugbj6wbtbt] {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.transcription-text-container[b-ugbj6wbtbt] {
    padding: 1rem;
    max-height: 350px;
    overflow-y: auto;
}

.transcription-text[b-ugbj6wbtbt] {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.transcription-footer[b-ugbj6wbtbt] {
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.transcription-footer .btn-outline-primary[b-ugbj6wbtbt] {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* ============================================
   New Appointment Modal Styles
   ============================================ */

.appointment-modal[b-ugbj6wbtbt] {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.appointment-modal .modal-header[b-ugbj6wbtbt] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
}

.appointment-modal .modal-title[b-ugbj6wbtbt] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

.appointment-modal .modal-body[b-ugbj6wbtbt] {
    padding: 1.25rem;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-panel);
}

.appointment-modal .modal-footer[b-ugbj6wbtbt] {
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    gap: 0.75rem;
}

/* Form Sections */
.appointment-form[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-section[b-ugbj6wbtbt] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.section-header[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
}

.section-header i[b-ugbj6wbtbt] {
    font-size: 1.125rem;
    color: #0d6efd;
}

.section-body[b-ugbj6wbtbt] {
    padding: 1rem;
}

/* Form Labels */
.form-label[b-ugbj6wbtbt] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.375rem;
}

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

.form-label-sm[b-ugbj6wbtbt] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

/* Duration Buttons */
.duration-buttons[b-ugbj6wbtbt] {
    display: flex;
    gap: 4px;
}

.duration-btn[b-ugbj6wbtbt] {
    flex: 1;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--color-border);
    background: var(--color-panel);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.duration-btn:first-child[b-ugbj6wbtbt] {
    border-radius: 6px 0 0 6px;
}

.duration-btn:last-child[b-ugbj6wbtbt] {
    border-radius: 0 6px 6px 0;
}

.duration-btn:hover[b-ugbj6wbtbt] {
    background: var(--color-bg);
    border-color: #cbd5e1;
}

.duration-btn.active[b-ugbj6wbtbt] {
    background: #0d6efd;
    border-color: #0d6efd;
    color: var(--color-panel);
}

/* Availability Search Panel */
.availability-search-panel[b-ugbj6wbtbt] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.search-date-inputs[b-ugbj6wbtbt] {
    padding-bottom: 0.75rem;
}

.availability-results[b-ugbj6wbtbt] {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

/* Slot Selection Banner */
.slot-selection-banner[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, var(--color-success-soft) 100%);
    border: 1px solid var(--color-success);
    border-radius: 8px;
}

.slot-selection-banner .banner-content[b-ugbj6wbtbt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slot-selection-banner .banner-content i[b-ugbj6wbtbt] {
    font-size: 1.5rem;
}

.slot-selection-banner .banner-details[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.slot-selection-banner .banner-details strong[b-ugbj6wbtbt] {
    color: #065f46;
    font-size: 0.9375rem;
}

.slot-selection-banner .banner-details span[b-ugbj6wbtbt] {
    color: #047857;
    font-size: 0.8125rem;
}

/* Attendee Options */
.attendee-options[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attendee-option[b-ugbj6wbtbt] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.attendee-option:hover:not(.disabled)[b-ugbj6wbtbt] {
    border-color: #0d6efd;
    background: var(--color-bg);
}

.attendee-option.selected[b-ugbj6wbtbt] {
    border-color: #0d6efd;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.attendee-option.disabled[b-ugbj6wbtbt] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-bg);
}

.option-radio[b-ugbj6wbtbt] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.15s ease;
}

.attendee-option.selected .option-radio[b-ugbj6wbtbt] {
    border-color: #0d6efd;
}

.radio-inner[b-ugbj6wbtbt] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.15s ease;
}

.radio-inner.checked[b-ugbj6wbtbt] {
    background: #0d6efd;
}

.option-content[b-ugbj6wbtbt] {
    flex: 1;
    min-width: 0;
}

.option-label[b-ugbj6wbtbt] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
}

.option-email[b-ugbj6wbtbt] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.option-disabled-text[b-ugbj6wbtbt] {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    font-style: italic;
    margin-top: 0.25rem;
}

/* Other Attendee Fields / Company Contact Fields */
.other-attendee-fields[b-ugbj6wbtbt],
.company-contact-fields[b-ugbj6wbtbt] {
    padding: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Quick Actions Dropdown Button */
.info-card-body .dropdown[b-ugbj6wbtbt] {
    width: 100%;
}

.info-card-body .dropdown .dropdown-toggle[b-ugbj6wbtbt] {
    text-align: left;
}

.info-card-body .dropdown .dropdown-toggle[b-ugbj6wbtbt]::after {
    margin-left: auto;
}

.info-card-body .dropdown-menu[b-ugbj6wbtbt] {
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border);
    padding: 0.5rem 0;
}

.info-card-body .dropdown-item[b-ugbj6wbtbt] {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
}

.info-card-body .dropdown-item:hover[b-ugbj6wbtbt] {
    background-color: var(--color-bg);
}

.info-card-body .dropdown-item.disabled[b-ugbj6wbtbt] {
    color: var(--color-text-subtle);
    pointer-events: none;
}

.info-card-body .dropdown-divider[b-ugbj6wbtbt] {
    margin: 0.25rem 0;
}

/* ============================================================
   Mobile-stack reflow for the appointments table.
   Hides the column header row entirely (the table becomes a list
   of cards). Each row collapses from an 8-column grid to a 2-row
   mini-card showing date+time + status + chevron on top, and
   specialist name (with avatar) on the bottom row. ID, duration,
   type and flags are hidden — power-user info that crowds the row
   on a phone. The chevron and edit buttons stay accessible.
   ============================================================ */
:root[data-viewport="mobile"]   .appointments-header-row[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointments-header-row[b-ugbj6wbtbt] {
    display: none;
}

:root[data-viewport="mobile"]   .appointment-row-virtual[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual[b-ugbj6wbtbt] {
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas:
        "datetime status   actions"
        "details  details  details" !important;
    column-gap: var(--space-2);
    row-gap: 4px;
    padding: 10px var(--space-3);
    min-height: auto;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-id[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-id[b-ugbj6wbtbt],
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-duration[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-duration[b-ugbj6wbtbt],
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-type[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-type[b-ugbj6wbtbt],
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-flags[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-flags[b-ugbj6wbtbt] {
    display: none;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-datetime[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-datetime[b-ugbj6wbtbt] {
    grid-area: datetime;
    padding: 0;
}

/* Date stack flips to a single inline line on mobile so it takes one
   row's worth of space, not two. */
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-datetime .date-display[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-datetime .date-display[b-ugbj6wbtbt] {
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-datetime .date-main[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-datetime .date-main[b-ugbj6wbtbt] {
    font-size: 0.92rem;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-datetime .date-time[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-datetime .date-time[b-ugbj6wbtbt] {
    font-size: 0.85rem;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-status[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-status[b-ugbj6wbtbt] {
    grid-area: status;
    justify-self: end;
    padding: 0;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-actions[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-actions[b-ugbj6wbtbt] {
    grid-area: actions;
    padding: 0 !important;
}

/* Specialist row — full width below the header line, smaller text so it
   reads as secondary info. The avatar shrinks too. */
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-specialist[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-specialist[b-ugbj6wbtbt] {
    grid-area: details;
    padding: 0;
    font-size: 0.77rem;
    color: var(--color-text-muted);
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-specialist .specialist-avatar-img[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-specialist .specialist-avatar-img[b-ugbj6wbtbt],
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-specialist .specialist-avatar[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-specialist .specialist-avatar[b-ugbj6wbtbt] {
    width: 18px;
    height: 18px;
    font-size: 0.62rem;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-specialist .specialist-name-text[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-specialist .specialist-name-text[b-ugbj6wbtbt] {
    font-size: 0.77rem;
    max-width: 100%;
}

/* Tighten the action buttons so chevron + edit fit on the right edge. */
:root[data-viewport="mobile"]   .appointment-row-virtual .cell-actions .action-buttons[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-actions .action-buttons[b-ugbj6wbtbt] {
    gap: 2px;
}

:root[data-viewport="mobile"]   .appointment-row-virtual .cell-actions .action-btn[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointment-row-virtual .cell-actions .action-btn[b-ugbj6wbtbt] {
    width: 32px;
    height: 32px;
    padding: 0;
}

/* Compact toolbar at mobile — the search field stretches full-width
   and the count text wraps below it instead of fighting for inline space. */
:root[data-viewport="mobile"]   .appointments-toolbar[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointments-toolbar[b-ugbj6wbtbt] {
    gap: var(--space-2);
}
:root[data-viewport="mobile"]   .appointments-search[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointments-search[b-ugbj6wbtbt] {
    width: 100%;
}
:root[data-viewport="mobile"]   .appointments-toolbar-spacer[b-ugbj6wbtbt],
:root[data-viewport="mobile-l"] .appointments-toolbar-spacer[b-ugbj6wbtbt] {
    display: none;
}

/* Mobile full-screen for the appointments modal is now handled globally in
   tokens.css ("Bootstrap legacy modals — mobile full-screen") — every
   Bootstrap `.modal-dialog` in the app gets the same treatment for free.
   Per-page overrides can still raise specificity if a specific modal needs
   bespoke treatment, but for now the appointments modal inherits the
   global recipe cleanly. */

/* =========================================================================
   CM delivery-method picker (phone vs video popup)
   ========================================================================= */
/* Two big horizontal option buttons stacked vertically. The first version
   used Bootstrap utility classes with `<small>` for the description, but
   `<small>` is inline by default — the description wrapped beside the title
   instead of underneath, and align-items-start mis-aligned the icon. This
   block replaces that with a deliberate grid layout: 40px icon column,
   16px gap, then a flex-1 text column with title-above-description. */

.cm-delivery-options[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-delivery-option[b-ugbj6wbtbt] {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    color: #1e2933;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.cm-delivery-option:hover:not(:disabled)[b-ugbj6wbtbt] {
    background: #f7faff;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
}

.cm-delivery-option:focus-visible[b-ugbj6wbtbt] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 98, 255, 0.25);
}

.cm-delivery-option:disabled[b-ugbj6wbtbt] {
    opacity: 0.55;
    cursor: not-allowed;
}

.cm-delivery-option-video[b-ugbj6wbtbt] {
    border-color: #c5e1b3;
}

.cm-delivery-option-video:hover:not(:disabled)[b-ugbj6wbtbt] {
    border-color: #73a14b;
    background: #f4faee;
}

.cm-delivery-option-phone[b-ugbj6wbtbt] {
    border-color: #c2d3ff;
}

.cm-delivery-option-phone:hover:not(:disabled)[b-ugbj6wbtbt] {
    border-color: #2f62ff;
    background: #f5f8ff;
}

.cm-delivery-option-icon[b-ugbj6wbtbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.cm-delivery-option-video .cm-delivery-option-icon[b-ugbj6wbtbt] {
    background: rgba(115, 161, 75, 0.12);
    color: #5a7e3a;
}

.cm-delivery-option-phone .cm-delivery-option-icon[b-ugbj6wbtbt] {
    background: rgba(47, 98, 255, 0.10);
    color: #2f62ff;
}

.cm-delivery-option-text[b-ugbj6wbtbt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cm-delivery-option-title[b-ugbj6wbtbt] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1e2933;
}

.cm-delivery-option-desc[b-ugbj6wbtbt] {
    font-size: 0.825rem;
    line-height: 1.4;
    color: #6c757d;
    white-space: normal;
}
/* /Components/Layout/Cases/CaseStatusActions.razor.rz.scp.css */
/* ============================================================
   CaseStatusActions — right-rail status / actions panel.
   Wraps in <Card Padded="true"> so its outer chrome (background,
   border, padding, radius) is provided by the Card primitive,
   guaranteeing visual alignment with the Card-based form
   sections on the left of the Overview grid.
   ============================================================ */

.case-status-actions[b-9uzl80h241] {
    font-size: 0.9rem;
}

.case-status-actions-loading[b-9uzl80h241],
.case-status-actions-empty[b-9uzl80h241] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
}

.case-status-actions-name[b-9uzl80h241] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ─── Progress bar ─── */

.case-status-actions-progress[b-9uzl80h241] {
    height: 6px;
    background: var(--color-border-soft);
    border-radius: 3px;
    overflow: hidden;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.case-status-actions-progress-fill[b-9uzl80h241] {
    height: 100%;
    background: var(--color-accent);
    transition: width 200ms ease;
}

.case-status-actions-progress-fill.is-complete[b-9uzl80h241] {
    background: var(--color-success);
}

/* ─── Next status preview ─── */

.case-status-actions-next[b-9uzl80h241] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.case-status-actions-next strong[b-9uzl80h241] {
    color: var(--color-text);
}

/* ─── Required actions list ─── */

.case-status-actions-list[b-9uzl80h241] {
    margin-top: var(--space-2);
}

.case-status-actions-list-heading[b-9uzl80h241] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.77rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.case-status-actions-category[b-9uzl80h241] {
    margin-bottom: var(--space-3);
}

.case-status-actions-category:last-child[b-9uzl80h241] {
    margin-bottom: 0;
}

.case-status-actions-category-label[b-9uzl80h241] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-1);
}

.case-status-actions-items[b-9uzl80h241] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-status-actions-item[b-9uzl80h241] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.92rem;
    color: var(--color-text);
}

.case-status-actions-item:last-child[b-9uzl80h241] {
    border-bottom: none;
}

/* ─── Marker bullet (left of each item) — circle for pending,
       filled green for complete ─── */

.case-status-actions-item-marker[b-9uzl80h241] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #ffffff;
}

.case-status-actions-item-marker.is-required[b-9uzl80h241] {
    border-color: var(--color-danger);
}

.case-status-actions-item-marker.is-optional[b-9uzl80h241] {
    border-color: var(--color-border);
}

.case-status-actions-item-marker.is-complete[b-9uzl80h241] {
    border-color: var(--color-success);
    background: var(--color-success);
}

.case-status-actions-item-text[b-9uzl80h241] {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.case-status-actions-item-text.is-strikethrough[b-9uzl80h241] {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* ─── All-complete state ─── */

.case-status-actions-allcomplete[b-9uzl80h241] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-success-soft);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: 500;
}
/* /Components/Layout/Cases/Cases_Activity.razor.rz.scp.css */
/* ============================================================
   Cases_Activity — Audit trail (Orcanex token surface).
   ============================================================ */

.activity-container[b-pn1mwhu879] {
    max-width: 100%;
}

[b-pn1mwhu879] .activity-card {
    margin-bottom: var(--space-3);
}

[b-pn1mwhu879] .activity-titlebar-extras {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-filter-bar[b-pn1mwhu879] {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

.day-group[b-pn1mwhu879] {
    margin-bottom: var(--space-2);
}

.day-header[b-pn1mwhu879] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 2;
}

.day-label[b-pn1mwhu879] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
}

.day-date[b-pn1mwhu879] {
    font-size: 0.92rem;
    color: var(--color-text-subtle);
}

.day-count[b-pn1mwhu879] {
    font-size: 0.85rem;
    padding: 2px 6px;
}

.audit-entry[b-pn1mwhu879] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-1) 0;
    transition: background var(--duration-hover, 120ms) ease-out;
}

.audit-entry:hover[b-pn1mwhu879] {
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.entry-time[b-pn1mwhu879] {
    width: 56px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    padding-top: var(--space-1);
    text-align: right;
    font-weight: 500;
}

.entry-indicator[b-pn1mwhu879] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    flex-shrink: 0;
    padding-top: var(--space-1);
}

.indicator-dot[b-pn1mwhu879] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-muted);
}

.indicator-line[b-pn1mwhu879] {
    width: 1px;
    flex-grow: 1;
    min-height: 20px;
    background-color: var(--color-border-soft);
}

.entry-content[b-pn1mwhu879] {
    flex-grow: 1;
    min-width: 0;
    padding: 2px var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}

.entry-icon[b-pn1mwhu879] {
    font-size: 1.08rem;
    flex-shrink: 0;
}

.entry-description[b-pn1mwhu879] {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.4;
}

.entry-entity[b-pn1mwhu879] {
    font-size: 0.92rem;
    margin-top: 2px;
    color: var(--color-text-muted);
}

/* Action badges — soft pill styling using tokens */
[b-pn1mwhu879] .badge-action-view,
[b-pn1mwhu879] .badge-action-download {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 0.77rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

[b-pn1mwhu879] .badge-action-edit {
    background-color: var(--color-warn-soft);
    color: var(--color-warn);
    font-size: 0.77rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

[b-pn1mwhu879] .badge-action-create {
    background-color: var(--color-success-soft);
    color: var(--color-success);
    font-size: 0.77rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

[b-pn1mwhu879] .badge-action-delete {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: 0.77rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

[b-pn1mwhu879] .badge-action-status,
[b-pn1mwhu879] .badge-action-ai {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 0.77rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

[b-pn1mwhu879] .badge-action-default {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 0.77rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.user-name[b-pn1mwhu879] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.entry-changes[b-pn1mwhu879] {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    border-left: 2px solid var(--color-warn);
    font-size: 0.92rem;
}

.change-item[b-pn1mwhu879] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 1px 0;
    flex-wrap: wrap;
}

.change-field[b-pn1mwhu879] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.85rem;
}

.change-from[b-pn1mwhu879] {
    color: var(--color-danger);
    text-decoration: line-through;
    font-size: 0.85rem;
}

.change-arrow[b-pn1mwhu879] {
    font-size: 0.92rem;
    color: var(--color-text-subtle);
}

.change-to[b-pn1mwhu879] {
    color: var(--color-success);
    font-weight: 500;
    font-size: 0.85rem;
}

/* Scrolling timeline — height was previously hard-coded inline as
   `calc(100vh - 340px)`. Moved here so mobile can shrink the chrome
   subtraction (mobile loses the desktop topbar + workflow footer +
   tab strip, so 340 over-subtracts and leaves ~250 px of entries
   visible). */
.audit-timeline[b-pn1mwhu879] {
    height: calc(100vh - 340px);
    min-height: 300px;
    overflow-y: auto;
}

.audit-timeline[b-pn1mwhu879]::-webkit-scrollbar {
    width: 4px;
}

.audit-timeline[b-pn1mwhu879]::-webkit-scrollbar-track {
    background: transparent;
}

.audit-timeline[b-pn1mwhu879]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

.audit-timeline[b-pn1mwhu879]::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ============================================================
   Mobile workover — compact filter bar + reflowed entry rows.

   Mobile-specific issues fixed here:
     • Filter bar was 3 wrapping inputs eating ~170 px before any
       entries showed. Now: search full-width, two dropdowns side
       by side (50/50), total ~88 px including padding.
     • Entry rows had a 140 px right-aligned user block crushing
       the description to ~150 px usable. Now: user info moves
       below the description as a small inline meta line with a
       compact avatar.
     • Timeline used `100vh - 340px` which over-subtracts on mobile
       (no desktop topbar/footer). Now `100vh - 230px` — 110 px
       more entries visible.
     • Indicator vertical line removed at mobile — just the dot
       remains. Saves ~6 px per row and reads cleaner.
   ============================================================ */

/* The desktop filter bar still owns the .activity-filter-bar class
   and is hidden at mobile via .hide-mobile on the markup. The mobile
   chrome below is its own dedicated single-row component. */

/* ============================================================
   Mobile filter bar — single-row compact pattern.

   Renders an inline search input plus a small filter icon button.
   Tapping the button opens a bottom-sheet drawer (see OrcanexDrawer)
   that hosts the category + user dropdowns and a clear action.
   Active drawer filters surface as chips below the search row so
   the user always sees what's applied.

   This pattern cuts the filter chrome from ~110 px (two stacked
   dropdown rows on the cramped mobile viewport) down to ~52 px
   for the search row plus an optional ~28 px chip row when filters
   are active.
   ============================================================ */

.activity-filter-bar-mobile[b-pn1mwhu879] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Search input — inline icon, ellipsis-friendly placeholder, takes
   all remaining space after the filter button. Custom styling so we
   don't depend on Bootstrap's input-group sizing quirks at mobile. */
.activity-mobile-search[b-pn1mwhu879] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.activity-mobile-search-icon[b-pn1mwhu879] {
    position: absolute;
    left: 10px;
    color: var(--color-text-subtle);
    pointer-events: none;
    font-size: 1.08rem;
}

.activity-mobile-search-input[b-pn1mwhu879] {
    width: 100%;
    height: var(--h-field-tight, 36px);
    padding: 0 32px 0 32px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text);
}

.activity-mobile-search-input:focus[b-pn1mwhu879] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.activity-mobile-search-clear[b-pn1mwhu879] {
    position: absolute;
    right: 6px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
}
.activity-mobile-search-clear:hover[b-pn1mwhu879] { color: var(--color-text); }

/* Filter trigger — 36 × 36 icon button matching the mobile-header
   button shape (see CLAUDE.md "icon-button shape extends to ALL
   icon-only buttons in the mobile page chrome"). A small count badge
   sits inside the button when drawer filters are active. */
.activity-mobile-filter-trigger[b-pn1mwhu879] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.activity-mobile-filter-trigger:hover[b-pn1mwhu879] {
    background: var(--color-bg);
    color: var(--color-text);
}

.activity-mobile-filter-trigger.is-active[b-pn1mwhu879] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.activity-mobile-filter-trigger .mdi[b-pn1mwhu879] {
    font-size: 1.15rem;
    line-height: 1;
}

.activity-mobile-filter-count[b-pn1mwhu879] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

/* Active filter chips — render below the search row when category
   and/or user filters are set. Each chip is a pill with the filter
   value and a close button that clears that single filter. */
.activity-filter-chips[b-pn1mwhu879] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.activity-filter-chip[b-pn1mwhu879] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.77rem;
    font-weight: 500;
    max-width: 100%;
}

.activity-filter-chip > span[b-pn1mwhu879] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-filter-chip button[b-pn1mwhu879] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    opacity: 0.7;
}
.activity-filter-chip button:hover[b-pn1mwhu879] { opacity: 1; }
.activity-filter-chip button .mdi[b-pn1mwhu879] { font-size: 0.92rem; }

/* Drawer body — wraps the filter inputs inside the bottom sheet. */
.activity-filter-drawer-body[b-pn1mwhu879] {
    display: flex;
    flex-direction: column;
}

/* Day header — compact. */
:root[data-viewport="mobile"]   .day-header[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .day-header[b-pn1mwhu879] {
    flex-wrap: wrap;
    gap: var(--space-1);
}
:root[data-viewport="mobile"]   .day-label[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .day-label[b-pn1mwhu879] {
    font-size: 0.77rem;
}
:root[data-viewport="mobile"]   .day-date[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .day-date[b-pn1mwhu879] {
    font-size: 0.77rem;
}

/* Time column — compact, narrower, on its own visual row at the
   start. The fixed 56 px was eating ~15% of a 375 px screen. */
:root[data-viewport="mobile"]   .entry-time[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-time[b-pn1mwhu879] {
    width: 40px;
    font-size: 0.77rem;
    padding-top: 0;
}

/* Indicator — drop the vertical guide line at mobile, keep just the
   coloured dot. The line eats column width and reads as noise on
   a phone. */
:root[data-viewport="mobile"]   .entry-indicator[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-indicator[b-pn1mwhu879] {
    width: 14px;
    padding-top: 6px;
}
:root[data-viewport="mobile"]   .entry-indicator .indicator-line[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-indicator .indicator-line[b-pn1mwhu879] {
    display: none;
}

/* Entry-content row reflow — stack icon+description above the
   user block. The user block then sits below the description as
   a single meta line (avatar + name) instead of a right-aligned
   140 px column. */
:root[data-viewport="mobile"]   .entry-content-row[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-content-row[b-pn1mwhu879] {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* The user block is the LAST flex child of .entry-content-row. At
   mobile we push it to a new line by giving it 100% basis. */
:root[data-viewport="mobile"]   .entry-content-row > .entry-user[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-content-row > .entry-user[b-pn1mwhu879] {
    flex: 1 0 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: left !important;
    margin-top: 2px;
    /* Indent so the avatar aligns under the description text, not
       under the icon column. The icon is ~1.08rem ≈ 17 px plus the
       parent's 8 px gap = ~25 px. */
    padding-left: 25px;
}

/* Compact avatar in the meta line — UserAvatar's inline style forces
   24 px. We override via ::deep + !important to push it to 18 px so
   it reads as inline meta, not as a row-defining element. */
:root[data-viewport="mobile"]   .entry-content-row > .entry-user[b-pn1mwhu879]  .orcanex-avatar,
:root[data-viewport="mobile-l"] .entry-content-row > .entry-user[b-pn1mwhu879]  .orcanex-avatar,
:root[data-viewport="mobile"]   .entry-content-row > .entry-user[b-pn1mwhu879]  [class*="avatar"],
:root[data-viewport="mobile-l"] .entry-content-row > .entry-user[b-pn1mwhu879]  [class*="avatar"] {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.5rem !important;
}

:root[data-viewport="mobile"]   .entry-content-row > .entry-user .user-name[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-content-row > .entry-user .user-name[b-pn1mwhu879] {
    max-width: none !important;
    font-size: 0.77rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

/* Description — slightly smaller so a typical "Generated AI case
   overview (Model: meta-llama/llama-4-scout-17b-16e-instruct)"
   line wraps to two lines instead of four. */
:root[data-viewport="mobile"]   .entry-description[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-description[b-pn1mwhu879] {
    font-size: 0.92rem;
    line-height: 1.3;
}
:root[data-viewport="mobile"]   .entry-entity[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .entry-entity[b-pn1mwhu879] {
    font-size: 0.77rem;
}

/* Timeline scroll area — give back the height that the smaller
   mobile chrome doesn't actually consume. */
:root[data-viewport="mobile"]   .audit-timeline[b-pn1mwhu879],
:root[data-viewport="mobile-l"] .audit-timeline[b-pn1mwhu879] {
    height: calc(100vh - 230px);
    min-height: 280px;
}
/* /Components/Layout/Cases/Cases_CaseNotes.razor.rz.scp.css */
/* Cases_CaseNotes component styles */

/* Drag-to-note host — wraps the whole notes panel and listens for drag events. */
.case-notes-drop-host[b-571wzleavu] {
    position: relative;
    /* Make every child a drop target so dragging anywhere over the panel triggers the swap. */
    min-height: 200px;
}

[b-571wzleavu] .case-notes-card {
    margin-bottom: var(--space-3);
}

[b-571wzleavu] .case-notes-titlebar-extras {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* Card Structure — Orcanex compact note card */
.note-card[b-571wzleavu] {
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out;
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-border) !important;
    background: var(--color-panel);
}

.note-card:hover[b-571wzleavu] {
    border-color: color-mix(in srgb, var(--color-text-muted) 40%, var(--color-border)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.note-card.pinned-note[b-571wzleavu] {
    border-left: 4px solid var(--color-warn) !important;
    background: var(--color-warn-soft);
}

.note-card.sos-note-triggered[b-571wzleavu] {
    border-left: 4px solid var(--color-danger) !important;
    background: var(--color-danger-soft);
}

.note-card.sos-note-acknowledged[b-571wzleavu] {
    border-left: 4px solid var(--color-success) !important;
}

/* Note Content Base */
.note-content[b-571wzleavu] {
    line-height: 1.6;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.note-content.collapsed[b-571wzleavu] {
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.note-content.collapsed[b-571wzleavu]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}

/* ========================================
   Quill Editor Output Styling
   Using ::deep to penetrate CSS isolation
   for dynamically injected HTML content
   ======================================== */

/* Paragraphs */
[b-571wzleavu] .note-content p {
    margin-bottom: 0.1rem;
    margin-top: 0;
}

[b-571wzleavu] .note-content p > br:only-child {
    display: block;
    content: "";
    margin-top: 0.3rem;
}

/* Blockquotes */
[b-571wzleavu] .note-content blockquote {
    border-left: 3px solid var(--bs-primary);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

/* Code blocks */
[b-571wzleavu] .note-content pre,
[b-571wzleavu] .note-content code {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
}

[b-571wzleavu] .note-content code {
    padding: 0.1rem 0.3rem;
    color: #e83e8c;
}

/* Quill Alignment Classes */
[b-571wzleavu] .note-content .ql-align-center,
[b-571wzleavu] .note-content p.ql-align-center,
[b-571wzleavu] .note-content [class*="ql-align-center"] {
    text-align: center !important;
}

[b-571wzleavu] .note-content .ql-align-right,
[b-571wzleavu] .note-content p.ql-align-right,
[b-571wzleavu] .note-content [class*="ql-align-right"] {
    text-align: right !important;
}

[b-571wzleavu] .note-content .ql-align-justify,
[b-571wzleavu] .note-content p.ql-align-justify,
[b-571wzleavu] .note-content [class*="ql-align-justify"] {
    text-align: justify !important;
}

/* Hide Quill UI elements */
[b-571wzleavu] .note-content .ql-ui,
[b-571wzleavu] .note-content [contenteditable="false"] {
    display: none !important;
}

/* Quill List Styling - Base */
[b-571wzleavu] .note-content ol {
    padding-left: 0;
    margin: 0.5rem 0;
    list-style: none;
    counter-reset: list-counter;
}

[b-571wzleavu] .note-content ol li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.25rem;
}

/* Bullet list items */
[b-571wzleavu] .note-content ol li[data-list="bullet"]::before {
    content: "�";
    position: absolute;
    left: 0.5rem;
    color: #374151;
    font-weight: bold;
}

/* Ordered/Numbered list items */
[b-571wzleavu] .note-content ol li[data-list="ordered"] {
    counter-increment: list-counter;
}

[b-571wzleavu] .note-content ol li[data-list="ordered"]::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0.25rem;
    color: #374151;
}

/* Quill indent levels */
[b-571wzleavu] .note-content .ql-indent-1,
[b-571wzleavu] .note-content li.ql-indent-1 {
    padding-left: 3rem !important;
}

[b-571wzleavu] .note-content .ql-indent-2,
[b-571wzleavu] .note-content li.ql-indent-2 {
    padding-left: 4.5rem !important;
}

[b-571wzleavu] .note-content .ql-indent-3,
[b-571wzleavu] .note-content li.ql-indent-3 {
    padding-left: 6rem !important;
}

[b-571wzleavu] .note-content .ql-indent-4,
[b-571wzleavu] .note-content li.ql-indent-4 {
    padding-left: 7.5rem !important;
}

[b-571wzleavu] .note-content .ql-indent-5,
[b-571wzleavu] .note-content li.ql-indent-5 {
    padding-left: 9rem !important;
}

/* ========================================
   End Quill Styling
   ======================================== */

/* Timeline Styling */
.timeline-date-badge[b-571wzleavu] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
    padding: 0.25rem 0;
}

/* Sera Summary Card */
.sera-summary-card[b-571wzleavu] {
    border-radius: var(--radius-lg) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    position: relative;
    border: 1px solid var(--color-border) !important;
}

/* Sera New Update - Green border and pulsing animation */
.sera-summary-card.sera-new-update[b-571wzleavu] {
    border: 2px solid var(--bs-success) !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2), 
                0 4px 12px rgba(25, 135, 84, 0.15) !important;
    animation: sera-pulse-attention-b-571wzleavu 0.6s ease-in-out 5;
}

/* Strong pulse animation that runs 5 times to grab attention */
@keyframes sera-pulse-attention-b-571wzleavu {
    0% {
        background-color: rgba(25, 135, 84, 0);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2), 
                    0 4px 12px rgba(25, 135, 84, 0.15);
        transform: scale(1);
    }
    50% {
        background-color: rgba(25, 135, 84, 0.1);
        box-shadow: 0 0 0 6px rgba(25, 135, 84, 0.35), 
                    0 6px 20px rgba(25, 135, 84, 0.3);
        transform: scale(1.015);
    }
    100% {
        background-color: rgba(25, 135, 84, 0);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2), 
                    0 4px 12px rgba(25, 135, 84, 0.15);
        transform: scale(1);
    }
}

.collapse-icon[b-571wzleavu] {
    transition: transform 0.2s ease;
    font-size: 1rem;
}

.bg-gradient-subtle[b-571wzleavu] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), rgba(59, 130, 246, 0.03));
}

.summary-content[b-571wzleavu] {
    line-height: 1.5;
    color: #374151;
}

.summary-content.collapsed[b-571wzleavu] {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.summary-content.collapsed[b-571wzleavu]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* Editor Styling */
.sticky-editor[b-571wzleavu] {
    position: sticky;
    top: 1rem;
    border-radius: 8px !important;
}

/* Dropdown Styling */
.dropdown-menu[b-571wzleavu] {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 120px;
}

.dropdown-item[b-571wzleavu] {
    font-size: 0.8rem;
}

/* Pinned Notes Container */
.pinned-notes-container[b-571wzleavu] {
    border-left: 2px solid var(--bs-warning);
    padding-left: 0.75rem;
    margin-left: 0.25rem;
}

/* Helpers */
.cursor-pointer[b-571wzleavu] {
    cursor: pointer;
}

.min-width-0[b-571wzleavu] {
    min-width: 0;
}

.note-preview[b-571wzleavu] {
    max-height: 60px;
    overflow: hidden;
}

/* ========================================
   Email Note Styling
   ======================================== */

/* Email note cards - left border indicator */
.note-card.email-note-inbound[b-571wzleavu] {
    border-left: 3px solid var(--color-success) !important;
    background-color: color-mix(in srgb, var(--color-success) 4%, var(--color-panel));
}

.note-card.email-note-outbound[b-571wzleavu] {
    border-left: 3px solid var(--color-accent) !important;
    background-color: color-mix(in srgb, var(--color-accent) 4%, var(--color-panel));
}

/* Report Query note cards - red border for visibility */
.note-card.report-query-note[b-571wzleavu] {
    border-left: 3px solid var(--color-danger) !important;
    background-color: color-mix(in srgb, var(--color-danger) 4%, var(--color-panel));
}

/* Clara QA review notes - amber border, distinct from both email and report-query */
.note-card.qa-review-note[b-571wzleavu] {
    border-left: 3px solid var(--color-warn) !important;
    background-color: color-mix(in srgb, var(--color-warn) 4%, var(--color-panel));
}

/* Clara QA avatar indicator - replaces the user avatar for AI-authored notes */
.qa-review-indicator[b-571wzleavu] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.23rem;
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

/* ========================================
   Clara QA Findings Panel
   HTML injected into note.note via MarkupString by QaReviewService.
   Uses ::deep because the MarkupString content sits inside the scoped note-content element.
   ======================================== */

[b-571wzleavu] .qa-findings {
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0;
    margin: 0.25rem 0 0 0;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%);
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #1f2937;
}

[b-571wzleavu] .qa-findings.qa-status-good {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 40%);
}

[b-571wzleavu] .qa-findings.qa-status-warn {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%);
}

[b-571wzleavu] .qa-findings.qa-status-bad {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 40%);
}

[b-571wzleavu] .qa-findings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.02);
}

[b-571wzleavu] .qa-findings-title {
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-571wzleavu] .qa-findings-title i {
    color: #b45309;
    font-size: 1.05rem;
}

[b-571wzleavu] .qa-findings.qa-status-good .qa-findings-title i {
    color: #047857;
}

[b-571wzleavu] .qa-findings.qa-status-bad .qa-findings-title i {
    color: #b91c1c;
}

[b-571wzleavu] .qa-findings-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    white-space: nowrap;
    border: 1px solid rgba(180, 83, 9, 0.2);
}

[b-571wzleavu] .qa-findings.qa-status-good .qa-findings-status {
    background: #d1fae5;
    color: #065f46;
    border-color: rgba(4, 120, 87, 0.2);
}

[b-571wzleavu] .qa-findings.qa-status-bad .qa-findings-status {
    background: #fee2e2;
    color: #991b1b;
    border-color: rgba(185, 28, 28, 0.2);
}

[b-571wzleavu] .qa-findings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.45rem 0.9rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
    color: #64748b;
    font-size: 0.72rem;
}

[b-571wzleavu] .qa-findings-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[b-571wzleavu] .qa-findings-meta i {
    color: #94a3b8;
    font-size: 0.9rem;
}

[b-571wzleavu] .qa-findings-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem;
    color: #065f46;
    font-weight: 500;
}

[b-571wzleavu] .qa-findings-empty i {
    font-size: 1.2rem;
    color: #10b981;
}

[b-571wzleavu] .qa-findings-section {
    padding: 0.6rem 0.9rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

[b-571wzleavu] .qa-findings-section:first-of-type {
    border-top: none;
}

[b-571wzleavu] .qa-findings-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin: 0 0 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

[b-571wzleavu] .qa-findings-section-title i {
    color: #94a3b8;
    font-size: 0.95rem;
}

/* Issue card */
[b-571wzleavu] .qa-issue {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

[b-571wzleavu] .qa-issue:last-child {
    margin-bottom: 0;
}

[b-571wzleavu] .qa-issue-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    height: fit-content;
    white-space: nowrap;
}

[b-571wzleavu] .qa-issue-type-grammar {
    background: #dbeafe;
    color: #1e40af;
}

[b-571wzleavu] .qa-issue-type-spelling {
    background: #fef3c7;
    color: #92400e;
}

[b-571wzleavu] .qa-issue-type-wording {
    background: #e0e7ff;
    color: #3730a3;
}

[b-571wzleavu] .qa-issue-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

[b-571wzleavu] .qa-issue-line {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.82rem;
}

[b-571wzleavu] .qa-issue-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

[b-571wzleavu] .qa-issue-original .qa-issue-text {
    color: #991b1b;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.35);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: rgba(254, 226, 226, 0.4);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

[b-571wzleavu] .qa-issue-proposed .qa-issue-text {
    color: #065f46;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: rgba(209, 250, 229, 0.4);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

[b-571wzleavu] .qa-issue-reason {
    font-size: 0.76rem;
    color: #64748b;
    font-style: italic;
    padding-top: 0.1rem;
}

/* Omission card */
[b-571wzleavu] .qa-omission {
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
}

[b-571wzleavu] .qa-omission:last-child {
    margin-bottom: 0;
}

[b-571wzleavu] .qa-omission-head {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

[b-571wzleavu] .qa-omission-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-571wzleavu] .qa-omission-none {
    background: #fee2e2;
    color: #991b1b;
}

[b-571wzleavu] .qa-omission-partial {
    background: #fef3c7;
    color: #92400e;
}

[b-571wzleavu] .qa-omission-question {
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
}

[b-571wzleavu] .qa-omission-details {
    font-size: 0.78rem;
    color: #64748b;
    padding-left: 0.2rem;
    border-left: 2px solid rgba(148, 163, 184, 0.25);
    margin-left: 0.1rem;
    padding-left: 0.6rem;
}

/* Per-item decision markers (injected when the user accepts/rejects items in the Change Review modal) */
[b-571wzleavu] .qa-item-decision {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

[b-571wzleavu] .qa-item-badge,
[b-571wzleavu] .qa-item-apply-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

[b-571wzleavu] .qa-item-badge-accepted { background: #d1fae5; color: #065f46; }
[b-571wzleavu] .qa-item-badge-rejected { background: #fee2e2; color: #991b1b; }
[b-571wzleavu] .qa-item-apply-applied { background: #dbeafe; color: #1e40af; }
[b-571wzleavu] .qa-item-apply-notfound { background: #fee2e2; color: #991b1b; }
[b-571wzleavu] .qa-item-apply-skipped { background: #f3f4f6; color: #4b5563; }
[b-571wzleavu] .qa-item-apply-other { background: #fef3c7; color: #92400e; }

/* Dim rejected items slightly so the card scans faster */
[b-571wzleavu] .qa-issue.qa-item-rejected,
[b-571wzleavu] .qa-omission.qa-item-rejected {
    opacity: 0.65;
}

/* Fallback for unparseable JSON */
[b-571wzleavu] .qa-findings-fallback-note {
    padding: 0.5rem 0.9rem 0.3rem;
    font-size: 0.77rem;
    color: #92400e;
}

[b-571wzleavu] .qa-findings-fallback {
    margin: 0 0.9rem 0.6rem;
    padding: 0.6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}

[b-571wzleavu] .qa-findings-footer {
    padding: 0.45rem 0.9rem;
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: center;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    font-style: italic;
}

/* Mobile — stack issue grid vertically */
@media (max-width: 520px) {
    [b-571wzleavu] .qa-issue {
        grid-template-columns: 1fr;
    }

    [b-571wzleavu] .qa-issue-line {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* Email direction indicator icon */
.email-direction-indicator[b-571wzleavu] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.email-direction-indicator.inbound[b-571wzleavu] {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.email-direction-indicator.outbound[b-571wzleavu] {
    background-color: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}

/* Email content specific styling */
[b-571wzleavu] .note-content.email-content strong {
    color: #1e293b;
    font-weight: 600;
}

[b-571wzleavu] .note-content.email-content hr {
    border-color: #e5e7eb;
    opacity: 0.5;
    margin: 0.75rem 0;
}

/* Email header lines (From, To, Subject) */
[b-571wzleavu] .note-content.email-content p:first-of-type,
[b-571wzleavu] .note-content.email-content p:nth-of-type(2),
[b-571wzleavu] .note-content.email-content p:nth-of-type(3) {
    margin-bottom: 0.25rem;
}

/* Full email body container */
.email-body-container[b-571wzleavu] {
    background-color: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 0.5rem;
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Ensure email content respects container bounds */
[b-571wzleavu] .email-body-container img {
    max-width: 100%;
    height: auto;
}

[b-571wzleavu] .email-body-container table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

[b-571wzleavu] .email-body-container pre {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Formatted email note styling (consistent for sent and received) */
[b-571wzleavu] .email-note-formatted {
    font-size: 0.875rem;
}

[b-571wzleavu] .email-note-formatted div[style*="display:flex"] {
    margin-bottom: 10px;
}

[b-571wzleavu] .email-note-formatted div[style*="background:#f8fafc"] {
    transition: background-color 0.15s ease;
}

[b-571wzleavu] .email-note-formatted div[style*="background:#f8fafc"]:hover {
    background-color: #f1f5f9 !important;
}

/* Email metadata header styling. The styled variant carries the panel
   chrome (subtle slate background, rounded border, internal padding) that
   used to be inline `style="..."` in the markup — pulled into scoped CSS
   so we can override it cleanly at mobile. */
[b-571wzleavu] .email-metadata-header {
    font-family: inherit;
    line-height: 1.6;
}

[b-571wzleavu] .email-metadata-header-styled {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.8rem;
}

[b-571wzleavu] .email-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.4rem;
}

[b-571wzleavu] .email-meta-label {
    color: #64748b;
    width: 50px;
    flex-shrink: 0;
    display: inline-block;
}

[b-571wzleavu] .email-meta-value {
    color: #1e293b;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

[b-571wzleavu] .email-meta-value-bold {
    font-weight: 600;
}

/* Legacy <strong> selector kept for any older email markup that still uses
   inline strongs without the row class. */
[b-571wzleavu] .email-metadata-header strong {
    min-width: 55px;
    display: inline-block;
}

/* Mobile — stack label above value so long subjects / sender lines don't
   overflow horizontally. The desktop layout (50px label column on the left,
   value flowing right) is too narrow for a phone — the value column ends up
   ~150 px wide and wraps awkwardly. (No `::deep` here — see the CSS-isolation
   note further down. The .email-meta-* elements live in our own scope.) */
:root[data-viewport="mobile"]   .email-metadata-header-styled[b-571wzleavu],
:root[data-viewport="mobile-l"] .email-metadata-header-styled[b-571wzleavu] {
    padding: 10px 12px;
    font-size: 0.78rem;
}

:root[data-viewport="mobile"]   .email-meta-row[b-571wzleavu],
:root[data-viewport="mobile-l"] .email-meta-row[b-571wzleavu] {
    flex-direction: column;
    gap: 1px;
    margin-bottom: 0.5rem;
}

:root[data-viewport="mobile"]   .email-meta-label[b-571wzleavu],
:root[data-viewport="mobile-l"] .email-meta-label[b-571wzleavu] {
    width: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Email body container - ensure images and content render properly */
[b-571wzleavu] .email-body-container {
    overflow-x: auto;
    word-wrap: break-word;
}

[b-571wzleavu] .email-body-container img {
    max-width: 100%;
    height: auto;
}

/* Email attachments bar */
[b-571wzleavu] .email-attachments-bar {
    font-family: inherit;
}

[b-571wzleavu] .email-attachments-bar .attachment-pill:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    text-decoration: none;
}

/* ========================================
   End Email Styling
   ======================================== */

/* Responsive */
@media (max-width: 991.98px) {
    .sticky-editor[b-571wzleavu] {
        position: relative;
        top: 0;
    }

    .timeline-date-badge[b-571wzleavu] {
        position: relative;
    }
}

/* ============================================================
   Mobile (<768 px) refinements
   ============================================================ */

/* IMPORTANT: Don't combine `:root[data-viewport=...]` with `::deep` in scoped
   CSS — Blazor's CSS-isolation transformer attaches the scope attribute to
   the rightmost selector before `::deep`, which puts it on `:root` (i.e.
   `<html>[b-xxxx]`) and the rule never matches. The buttons / spans below
   are authored in OUR Razor markup so they already carry our scope
   attribute; using a plain descendant selector lets the transformer attach
   the scope to the actual element, which works. */

/* Hide Check Mailbox at mobile — rare admin tooling, no room in the title
   bar at phone widths. SuperAdmins can still use a desktop browser for it. */
:root[data-viewport="mobile"]   .case-notes-btn-check-mailbox[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-check-mailbox[b-571wzleavu] {
    display: none !important;
}

/* Filters button collapses to icon-only at mobile — drop the " Filters"
   label and the leading margin on the icon. The data-bs-toggle behaviour
   is unchanged so the panel still opens/closes via the same button. */
:root[data-viewport="mobile"]   .case-notes-btn-filters .case-notes-btn-label[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-filters .case-notes-btn-label[b-571wzleavu],
:root[data-viewport="mobile"]   .case-notes-btn-email .case-notes-btn-label[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-email .case-notes-btn-label[b-571wzleavu] {
    display: none;
}

:root[data-viewport="mobile"]   .case-notes-btn-filters .mdi[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-filters .mdi[b-571wzleavu],
:root[data-viewport="mobile"]   .case-notes-btn-email .mdi[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-email .mdi[b-571wzleavu] {
    margin-right: 0 !important;
}

/* Tighten the activity titlebar gap so the badge + 2 icon buttons fit
   without forcing a wrap line. */
:root[data-viewport="mobile"]   .case-notes-titlebar-extras[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-titlebar-extras[b-571wzleavu] {
    gap: 4px;
}

:root[data-viewport="mobile"]   .case-notes-titlebar-btn[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-titlebar-btn[b-571wzleavu] {
    margin-left: 0 !important;
}

/* ============================================================
   Mobile icon-button shape consistency.
   The CaseForm Edit button at the top of the page is a 36x36
   square (per the mobile-header convention in CLAUDE.md). Every
   other icon-only button in the page chrome — Clara Summary
   refresh, Case Activity Email + Filter — must match that shape
   so the visual rhythm stays consistent. Bootstrap's `.btn-sm`
   defaults to a wider-than-tall rectangle which breaks the
   symmetry; force 36x36 + zero padding here.
   ============================================================ */
:root[data-viewport="mobile"]   .case-notes-btn-email[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-email[b-571wzleavu],
:root[data-viewport="mobile"]   .case-notes-btn-filters[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-btn-filters[b-571wzleavu],
:root[data-viewport="mobile"]   .sera-summary-card .card-header button[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-header button[b-571wzleavu] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
}

/* The bare chevron at the far right of the Clara Summary header gets
   the same 36x36 footprint so it visually balances the refresh button
   beside it. Click handling stays on the parent .card-header. */
:root[data-viewport="mobile"]   .sera-summary-card .card-header > div:last-child > i.mdi[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-header > div:last-child > i.mdi[b-571wzleavu] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Per-note action buttons (kebab dropdown trigger + inline Reply on
   inbound emails) — same 36x36 square shape as the rest of the page
   chrome. The kebab is `rounded-circle` by default; we override that
   plus the small Bootstrap `p-1` padding so it sits as a panel-shaped
   square matching the Edit / Email / Filter buttons. */
:root[data-viewport="mobile"]   .note-action-btn[b-571wzleavu],
:root[data-viewport="mobile-l"] .note-action-btn[b-571wzleavu] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
}

/* Compact the Clara Summary card at mobile — the desktop card is generous
   (28 px-square avatar circle, 12 px padding) which eats vertical space on
   a phone. The card stays collapsed by default (_seraSummaryCollapsed)
   anyway, but the header itself was still too tall. */
:root[data-viewport="mobile"]   .sera-summary-card .card-header[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-header[b-571wzleavu] {
    padding: 0.4rem 0.6rem !important;
    gap: 0.4rem;
}

:root[data-viewport="mobile"]   .sera-summary-card .card-header > div:first-child > span:first-child[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-header > div:first-child > span:first-child[b-571wzleavu] {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.85rem !important;
}

:root[data-viewport="mobile"]   .sera-summary-card .card-header .fw-semibold[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-header .fw-semibold[b-571wzleavu] {
    font-size: 0.85rem;
}

/* Hide the relative-time hint inside the Clara header at mobile to free
   horizontal room for the count badge + refresh button. */
:root[data-viewport="mobile"]   .sera-summary-card .card-header > div:first-child > span.text-muted[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-header > div:first-child > span.text-muted[b-571wzleavu] {
    display: none;
}

:root[data-viewport="mobile"]   .sera-summary-card .card-body[b-571wzleavu],
:root[data-viewport="mobile-l"] .sera-summary-card .card-body[b-571wzleavu] {
    padding: 0.6rem 0.7rem !important;
}

/* Mobile-only "Add Note" launcher button. Spans full width like a primary
   call-to-action, sits above the timeline so users always know how to add
   a note. Tracks the orcanex token system (accent + soft tones), 44 px tall
   to clear the touch-target floor. */
.case-notes-mobile-add-btn[b-571wzleavu] {
    display: none;
}

:root[data-viewport="mobile"]   .case-notes-mobile-add-btn[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-mobile-add-btn[b-571wzleavu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--touch-target);
    padding: 10px 16px;
    margin-bottom: var(--space-3);
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover);
}

:root[data-viewport="mobile"]   .case-notes-mobile-add-btn:active[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-mobile-add-btn:active[b-571wzleavu],
:root[data-viewport="mobile"]   .case-notes-mobile-add-btn:hover[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-mobile-add-btn:hover[b-571wzleavu] {
    background: var(--color-accent-hover);
    color: #fff;
}

:root[data-viewport="mobile"]   .case-notes-mobile-add-btn .mdi[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-mobile-add-btn .mdi[b-571wzleavu] {
    font-size: 1.2rem;
    line-height: 1;
}

/* Mobile editor modal — Quill toolbar is wider than 320 px so allow
   horizontal scroll on the toolbar row only, not the whole modal body. */
[b-571wzleavu] .case-notes-mobile-editor-modal .ql-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
}

:root[data-viewport="mobile"]   .case-notes-mobile-editor-modal #snow-editor[b-571wzleavu],
:root[data-viewport="mobile-l"] .case-notes-mobile-editor-modal #snow-editor[b-571wzleavu] {
    height: 50vh !important;
    min-height: 220px;
}
/* /Components/Layout/Cases/Cases_ClaraChangeReview.razor.rz.scp.css */
/* Clara Change Review modal — GitHub-style accept/reject list for QA findings. */

.clara-change-review-modal .modal-content[b-qjjqsj6uht] {
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.clara-change-review-modal .modal-header[b-qjjqsj6uht] {
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
    border-bottom: 1px solid #fde68a;
}

.clara-review-list[b-qjjqsj6uht] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.clara-review-card[b-qjjqsj6uht] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.clara-review-card-pending[b-qjjqsj6uht] {
    border-left: 3px solid #f59e0b;
}

.clara-review-card-accepted[b-qjjqsj6uht] {
    border-left: 3px solid #10b981;
    background: rgba(16, 185, 129, 0.02);
}

.clara-review-card-rejected[b-qjjqsj6uht] {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.02);
}

.clara-review-card-head[b-qjjqsj6uht] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.clara-review-type-badge[b-qjjqsj6uht] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    white-space: nowrap;
}

.clara-review-type-grammar[b-qjjqsj6uht] { background: #dbeafe; color: #1e40af; }
.clara-review-type-spelling[b-qjjqsj6uht] { background: #fef3c7; color: #92400e; }
.clara-review-type-wording[b-qjjqsj6uht] { background: #e0e7ff; color: #3730a3; }
.clara-review-type-missing-none[b-qjjqsj6uht] { background: #fee2e2; color: #991b1b; }
.clara-review-type-missing-partial[b-qjjqsj6uht] { background: #fef3c7; color: #92400e; }

.clara-review-status-badge[b-qjjqsj6uht] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.clara-review-badge-pending[b-qjjqsj6uht] { background: #fef3c7; color: #92400e; border: 1px solid rgba(180, 83, 9, 0.2); }
.clara-review-badge-accepted[b-qjjqsj6uht] { background: #d1fae5; color: #065f46; border: 1px solid rgba(4, 120, 87, 0.2); }
.clara-review-badge-rejected[b-qjjqsj6uht] { background: #fee2e2; color: #991b1b; border: 1px solid rgba(185, 28, 28, 0.2); }

.clara-review-apply-badge[b-qjjqsj6uht] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.clara-review-apply-applied[b-qjjqsj6uht] { background: #d1fae5; color: #065f46; }
.clara-review-apply-notfound[b-qjjqsj6uht] { background: #fee2e2; color: #991b1b; }
.clara-review-apply-skipped[b-qjjqsj6uht] { background: #f3f4f6; color: #4b5563; }
.clara-review-apply-pending[b-qjjqsj6uht] { background: #fef3c7; color: #92400e; }

.clara-review-diff[b-qjjqsj6uht] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.clara-review-line[b-qjjqsj6uht] {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.85rem;
}

.clara-review-label[b-qjjqsj6uht] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.clara-review-original .clara-review-text[b-qjjqsj6uht] {
    color: #991b1b;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.4);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: rgba(254, 226, 226, 0.35);
    padding: 0.12rem 0.4rem;
    border-radius: 3px;
}

.clara-review-proposed .clara-review-text[b-qjjqsj6uht] {
    color: #065f46;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: rgba(209, 250, 229, 0.45);
    padding: 0.12rem 0.4rem;
    border-radius: 3px;
}

.clara-review-reason[b-qjjqsj6uht] {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
    padding-top: 0.1rem;
}

.clara-review-missing-question[b-qjjqsj6uht] {
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.clara-review-missing-details[b-qjjqsj6uht] {
    font-size: 0.82rem;
    color: #64748b;
    padding-left: 0.6rem;
    border-left: 2px solid rgba(148, 163, 184, 0.25);
    margin: 0.2rem 0 0 0.1rem;
}

.clara-review-missing-note[b-qjjqsj6uht] {
    margin-top: 0.6rem;
    padding: 0.35rem 0.55rem;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 4px;
    font-size: 0.76rem;
    color: #475569;
}

.clara-review-apply-note[b-qjjqsj6uht] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #475569;
    padding: 0.35rem 0.55rem;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 4px;
}

.clara-review-actions[b-qjjqsj6uht] {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 520px) {
    .clara-review-line[b-qjjqsj6uht] {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}
/* /Components/Layout/Cases/Cases_ClinicalNotes.razor.rz.scp.css */
/* Cases_ClinicalNotes — Orcanex tokens */

[b-s16qr90a8w] .clinical-notes-card {
    margin-bottom: var(--space-3);
}

[b-s16qr90a8w] .clinical-notes-titlebar-extras {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.note-card[b-s16qr90a8w] {
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-border) !important;
    background: var(--color-panel);
    overflow: hidden;
}

.note-card:hover[b-s16qr90a8w] {
    border-color: color-mix(in srgb, var(--color-text-muted) 40%, var(--color-border)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.note-card.clinical-note[b-s16qr90a8w] {
    border-left: 4px solid var(--color-danger) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.note-card.pinned-note[b-s16qr90a8w] {
    border-left: 4px solid var(--color-warn) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.note-card.clinical-note.pinned-note[b-s16qr90a8w] {
    border-left: 4px solid var(--color-warn) !important;
    background: var(--color-warn-soft);
}

/* Sticky Editor */
.sticky-editor[b-s16qr90a8w] {
    position: sticky;
    top: 1rem;
}

/* Note Content Base */
.note-content[b-s16qr90a8w] {
    line-height: 1.6;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.note-content.collapsed[b-s16qr90a8w] {
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.note-content.collapsed[b-s16qr90a8w]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}

/* ========================================
   Quill Editor Output Styling
   Using ::deep to penetrate CSS isolation
   for dynamically injected HTML content
   ======================================== */

/* Paragraphs */
[b-s16qr90a8w] .note-content p {
    margin-bottom: 0.1rem;
    margin-top: 0;
}

[b-s16qr90a8w] .note-content p > br:only-child {
    display: block;
    content: "";
    margin-top: 0.3rem;
}

/* Blockquotes */
[b-s16qr90a8w] .note-content blockquote {
    border-left: 3px solid var(--bs-danger);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

/* Code blocks */
[b-s16qr90a8w] .note-content pre,
[b-s16qr90a8w] .note-content code {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
}

[b-s16qr90a8w] .note-content code {
    padding: 0.1rem 0.3rem;
    color: #e83e8c;
}

/* Quill Alignment Classes */
[b-s16qr90a8w] .note-content .ql-align-center,
[b-s16qr90a8w] .note-content p.ql-align-center,
[b-s16qr90a8w] .note-content [class*="ql-align-center"] {
    text-align: center !important;
}

[b-s16qr90a8w] .note-content .ql-align-right,
[b-s16qr90a8w] .note-content p.ql-align-right,
[b-s16qr90a8w] .note-content [class*="ql-align-right"] {
    text-align: right !important;
}

[b-s16qr90a8w] .note-content .ql-align-justify,
[b-s16qr90a8w] .note-content p.ql-align-justify,
[b-s16qr90a8w] .note-content [class*="ql-align-justify"] {
    text-align: justify !important;
}

/* Hide Quill UI elements */
[b-s16qr90a8w] .note-content .ql-ui,
[b-s16qr90a8w] .note-content [contenteditable="false"] {
    display: none !important;
}

/* Quill List Styling - Base */
[b-s16qr90a8w] .note-content ol {
    padding-left: 0;
    margin: 0.5rem 0;
    list-style: none;
    counter-reset: list-counter;
}

[b-s16qr90a8w] .note-content ol li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.25rem;
}

/* Bullet list items */
[b-s16qr90a8w] .note-content ol li[data-list="bullet"]::before {
    content: "�";
    position: absolute;
    left: 0.5rem;
    color: #374151;
    font-weight: bold;
}

/* Ordered/Numbered list items */
[b-s16qr90a8w] .note-content ol li[data-list="ordered"] {
    counter-increment: list-counter;
}

[b-s16qr90a8w] .note-content ol li[data-list="ordered"]::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0.25rem;
    color: #374151;
}

/* Quill indent levels */
[b-s16qr90a8w] .note-content .ql-indent-1,
[b-s16qr90a8w] .note-content li.ql-indent-1 {
    padding-left: 3rem !important;
}

[b-s16qr90a8w] .note-content .ql-indent-2,
[b-s16qr90a8w] .note-content li.ql-indent-2 {
    padding-left: 4.5rem !important;
}

[b-s16qr90a8w] .note-content .ql-indent-3,
[b-s16qr90a8w] .note-content li.ql-indent-3 {
    padding-left: 6rem !important;
}

[b-s16qr90a8w] .note-content .ql-indent-4,
[b-s16qr90a8w] .note-content li.ql-indent-4 {
    padding-left: 7.5rem !important;
}

[b-s16qr90a8w] .note-content .ql-indent-5,
[b-s16qr90a8w] .note-content li.ql-indent-5 {
    padding-left: 9rem !important;
}

/* ========================================
   End Quill Styling
   ======================================== */

/* Timeline Styling */
.timeline-date-badge[b-s16qr90a8w] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
    padding: 0.25rem 0;
}

/* Note Preview for Delete Modal */
.note-preview[b-s16qr90a8w] {
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   Transcription Timeline Card Styles
   ======================================== */

/* Transcription Card - Use box-shadow for reliable left border */
.note-card.transcription-card[b-s16qr90a8w] {
    border-left: 4px solid var(--color-accent) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-panel));
}

.note-card.transcription-card:hover[b-s16qr90a8w] {
    border-color: var(--color-accent) !important;
}

/* Transcription Avatar */
.transcription-avatar[b-s16qr90a8w] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1.23rem;
}

.transcription-preview[b-s16qr90a8w] {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

/* Transcription Expanded Content */
.transcription-content-expanded[b-s16qr90a8w] {
    background: transparent;
}

.transcription-text[b-s16qr90a8w] {
    color: #374151;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Transcription Full Content in Modal */
.transcription-full-content[b-s16qr90a8w] {
    color: #374151;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .sticky-editor[b-s16qr90a8w] {
        position: relative;
        top: 0;
    }
}

/* ============================================================
   Mobile (<768 px) refinements
   ============================================================ */

/* Mobile-only "Add Clinical Note" launcher button. Mirrors the case-notes
   variant in style; uses the success accent because clinical notes are
   visually green-themed throughout the page (left-bordered cards, green
   icon-box). Touch-target 44 px minimum. */
.clinical-notes-mobile-add-btn[b-s16qr90a8w] {
    display: none;
}

:root[data-viewport="mobile"]   .clinical-notes-mobile-add-btn[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-mobile-add-btn[b-s16qr90a8w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--touch-target);
    padding: 10px 16px;
    margin-bottom: var(--space-3);
    background: var(--color-success);
    color: #fff;
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter var(--duration-hover) var(--ease-hover);
}

:root[data-viewport="mobile"]   .clinical-notes-mobile-add-btn:active[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-mobile-add-btn:active[b-s16qr90a8w],
:root[data-viewport="mobile"]   .clinical-notes-mobile-add-btn:hover[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-mobile-add-btn:hover[b-s16qr90a8w] {
    filter: brightness(0.92);
    color: #fff;
}

:root[data-viewport="mobile"]   .clinical-notes-mobile-add-btn .mdi[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-mobile-add-btn .mdi[b-s16qr90a8w] {
    font-size: 1.2rem;
    line-height: 1;
}

/* Mobile editor modal — Quill toolbar is wider than 320 px so allow
   horizontal scroll on the toolbar row only, not the whole modal body. */
[b-s16qr90a8w] .clinical-notes-mobile-editor-modal .ql-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
}

/* IMPORTANT: don't combine `:root[data-viewport=...]` with `::deep` — the
   isolation transformer attaches the scope to `:root` and the rule never
   matches. Plain descendant selectors work because the elements below are
   in our own scope. */
:root[data-viewport="mobile"]   .clinical-notes-mobile-editor-modal #clinical-editor[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-mobile-editor-modal #clinical-editor[b-s16qr90a8w] {
    height: 45vh !important;
    min-height: 200px;
}

/* Tighten the activity titlebar gap so the count badge + filter button
   fit without forcing a wrap line. */
:root[data-viewport="mobile"]   .clinical-notes-titlebar-extras[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-titlebar-extras[b-s16qr90a8w] {
    gap: 4px;
}

/* Filters / SOS buttons collapse to icon-only at mobile. */
:root[data-viewport="mobile"]   .clinical-notes-btn-filters .clinical-notes-btn-label[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-btn-filters .clinical-notes-btn-label[b-s16qr90a8w],
:root[data-viewport="mobile"]   .clinical-notes-btn-sos .clinical-notes-btn-label[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-btn-sos .clinical-notes-btn-label[b-s16qr90a8w] {
    display: none;
}

:root[data-viewport="mobile"]   .clinical-notes-btn-filters .mdi[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-btn-filters .mdi[b-s16qr90a8w],
:root[data-viewport="mobile"]   .clinical-notes-btn-sos .mdi[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-btn-sos .mdi[b-s16qr90a8w] {
    margin-right: 0 !important;
}

:root[data-viewport="mobile"]   .clinical-notes-titlebar-btn[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-titlebar-btn[b-s16qr90a8w] {
    margin-left: 0 !important;
}

/* ============================================================
   Mobile icon-button shape consistency — match the CaseForm
   Edit button's 36x36 square footprint.
   ============================================================ */
:root[data-viewport="mobile"]   .clinical-notes-btn-filters[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-btn-filters[b-s16qr90a8w],
:root[data-viewport="mobile"]   .clinical-notes-btn-sos[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .clinical-notes-btn-sos[b-s16qr90a8w],
:root[data-viewport="mobile"]   .note-action-btn[b-s16qr90a8w],
:root[data-viewport="mobile-l"] .note-action-btn[b-s16qr90a8w] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
}
/* /Components/Layout/Cases/Cases_Documents.razor.rz.scp.css */
/* ============================================================
   Cases_Documents — Orcanex card surface for upload + file list.
   Token-only colours.
   ============================================================ */

fieldset[disabled][b-m9n0x30slj] { opacity: 0.9; }

.alert-success[b-m9n0x30slj] {
    border-left: 4px solid var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
    border-radius: var(--radius-md);
}

[b-m9n0x30slj] .documents-upload-card {
    margin-bottom: var(--space-3);
}

[b-m9n0x30slj] .documents-upload-titlebar {
    cursor: pointer;
    user-select: none;
}

[b-m9n0x30slj] .documents-upload-toggle {
    margin-left: auto;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
}

.documents-upload-body[b-m9n0x30slj] {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    margin-top: var(--space-2);
}

/* Mobile: tighten the upload card padding so the dropzone doesn't
   eat half the screen. The Card primitive already drops one padding
   notch at mobile via tokens.css; this is an extra squeeze on the
   internal body so the visible upload row sits at ~80 px tall total
   (icon + headline) instead of the desktop ~140 px. */
:root[data-viewport="mobile"]   .documents-upload-body[b-m9n0x30slj],
:root[data-viewport="mobile-l"] .documents-upload-body[b-m9n0x30slj] {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

[b-m9n0x30slj] :root[data-viewport="mobile"]   .documents-upload-card .orcanex-card-titlebar,
[b-m9n0x30slj] :root[data-viewport="mobile-l"] .documents-upload-card .orcanex-card-titlebar {
    /* Smaller titlebar on mobile so the upload card doesn't waste a
       row of vertical space when collapsed. */
    padding: var(--space-2) 0;
}

/* Modal — repaint into token surface (preserve Bootstrap classes used in markup) */
.modal-content[b-m9n0x30slj] {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
}

.modal-header[b-m9n0x30slj] {
    border-bottom: 1px solid var(--color-border-soft) !important;
}

.modal-footer[b-m9n0x30slj] {
    border-top: 1px solid var(--color-border-soft) !important;
}

/* Soft info badge in dropdown */
[b-m9n0x30slj] .badge.bg-soft-info {
    background: var(--color-accent-soft) !important;
    color: var(--color-accent) !important;
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}
/* /Components/Layout/Cases/Cases_Examinee.razor.rz.scp.css */
/* Cases_Examinee styles (scoped)
   Card chrome, titlebar and form-grid styles are global (tokens.css). Only
   page-specific layout / overrides live here. */

.cases-examinee-stack[b-zigj4mrbge] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cases-examinee-card + .cases-examinee-card[b-zigj4mrbge] {
    margin-top: 0;
}

/* Address search row sits above the address grid. */
.cases-examinee-search[b-zigj4mrbge] {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
}

/* Postcode is a code-like value — render it monospace and uppercase, matching
   the form-pattern reference. */
.cases-examinee-postcode[b-zigj4mrbge] {
    font-family: var(--font-mono, monospace);
    text-transform: uppercase;
}

.consent-difference-field[b-zigj4mrbge] {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px var(--color-danger-soft) !important;
}
/* /Components/Layout/Cases/Cases_Overview.razor.rz.scp.css */
/* ============================================================
   Cases_Overview — 2-column grid (form left, action rail right)
   matching the design's case-detail Overview spec.

   Most form-pattern primitives (.orcanex-card-titlebar*,
   .orcanex-form-grid*, .orcanex-igroup*) live globally in
   tokens.css. This file only contains the page-specific 2-col
   layout, the avatar-prefix wrapper for select fields, the
   Examinex checkbox group, and overrides for the right-rail
   CaseStatusActions component.
   ============================================================ */

.cases-overview-grid[b-0pkug3wzrb] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
}

.cases-overview-left[b-0pkug3wzrb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.cases-overview-rail[b-0pkug3wzrb] {
    position: sticky;
    top: 16px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (max-width: 1199.98px) {
    .cases-overview-grid[b-0pkug3wzrb] {
        grid-template-columns: 1fr;
    }
    .cases-overview-rail[b-0pkug3wzrb] {
        position: static;
    }
}

.cases-overview-subgroup[b-0pkug3wzrb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: var(--space-3) 0 var(--space-2);
}

.cases-overview-grid-gap-top[b-0pkug3wzrb] {
    margin-top: var(--space-3);
}

/* ─── Avatar prefix inside a dropdown / input ───
   The avatar appears INSIDE the field's bordered area, not as a
   separate column floating beside it. The avatar/logo is always
   wrapped in `.orcanex-input-avatar-slot` so regardless of whether
   it's an `<Avatar>` primitive or a `<CompanyLogo>` component, the
   same selector pins it. */
[b-0pkug3wzrb] .orcanex-input-with-avatar {
    position: relative;
}
[b-0pkug3wzrb] .orcanex-input-with-avatar > .orcanex-input-avatar-slot {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
[b-0pkug3wzrb] .orcanex-input-with-avatar > .orcanex-input-avatar-slot > *,
[b-0pkug3wzrb] .orcanex-input-with-avatar > .orcanex-input-avatar-slot > * > * {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    font-size: 0.69rem !important;
    margin: 0 !important;
}
[b-0pkug3wzrb] .orcanex-input-with-avatar > .orcanex-input-avatar-slot img {
    object-fit: cover;
    border-radius: var(--radius-sm);
}
[b-0pkug3wzrb] .orcanex-input-with-avatar-placeholder {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
[b-0pkug3wzrb] .orcanex-input-with-avatar > .form-select,
[b-0pkug3wzrb] .orcanex-input-with-avatar > .form-control {
    padding-left: 38px !important;
}

.consent-difference-field[b-0pkug3wzrb] {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px var(--color-danger-soft) !important;
}

/* ─── Trailing pill inside a select wrapper — for "Retail" type chip ─── */
[b-0pkug3wzrb] .orcanex-input-with-suffix {
    position: relative;
}
[b-0pkug3wzrb] .orcanex-input-with-suffix > .form-select {
    padding-right: 96px !important;
}
[b-0pkug3wzrb] .orcanex-input-suffix-pill {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

/* ─── Resend-notification button rendered inside a Field's SuffixContent ───
   The global .orcanex-igroup-suffix provides the bordered box; the inner
   <button> is reset to a transparent icon-button so it visually merges with
   the suffix square. */
[b-0pkug3wzrb] .orcanex-igroup-suffix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-hover) var(--ease-hover);
}
[b-0pkug3wzrb] .orcanex-igroup-suffix-btn:hover:not(:disabled) {
    color: var(--color-accent);
}
[b-0pkug3wzrb] .orcanex-igroup-suffix-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Examinex "Options" checkbox row ─── */
[b-0pkug3wzrb] .cases-overview-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    height: var(--h-field);
}
[b-0pkug3wzrb] .cases-overview-checks .form-check {
    margin: 0;
}

/* ─── Additional report recipients sub-block ───
   Rendered inside the Client card under the primary Report Recipient field.
   Lists the case_report_recipients rows as compact one-per-line edit rows
   plus an "Add contact / Add email" toolbar. The block sits on the same
   surface as the card body so it visually nests rather than introducing a
   second card.

   The host markup adds `.orcanex-form-grid-tight` to the outer container so
   --h-field / --font-tight-field cascade to descendant form-controls and the
   row controls match the heights and typography of the regular Field
   primitives above (the global rules in tokens.css do the heavy lifting —
   this file only sizes the bespoke pill + title + spacing).

   Mobile reflows to single-column at <576px. */
.cases-overview-additional-recipients[b-0pkug3wzrb] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cases-overview-additional-recipients-head[b-0pkug3wzrb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* Match the tight grid's field-label typography so the section header
   reads visually as a peer of the "CLIENT", "REPORT RECIPIENT" labels
   above. Density-aware: --font-tight-label scales with the user's
   density preference (compact/comfortable/large). */
.cases-overview-additional-recipients-title[b-0pkug3wzrb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-tight-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.cases-overview-additional-recipients-hint[b-0pkug3wzrb] {
    font-size: var(--font-tight-label);
    color: var(--color-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.cases-overview-additional-recipients-empty[b-0pkug3wzrb] {
    font-size: var(--font-tight-field);
    color: var(--color-text-subtle);
    padding: var(--space-2) 0;
}
.cases-overview-additional-recipients-list[b-0pkug3wzrb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.cases-overview-additional-recipient-row[b-0pkug3wzrb] {
    display: grid;
    grid-template-columns: auto 1fr 1.4fr auto;
    gap: var(--space-2);
    align-items: center;
}
.cases-overview-additional-recipient-row > .cases-overview-additional-recipient-select[b-0pkug3wzrb] {
    grid-column: 2 / span 2;
}
/* Mode pill — same height + border-radius as the surrounding form
   controls so it visually anchors at the start of each row. Because
   the outer container carries `.orcanex-form-grid-tight`, --h-field
   resolves to --h-field-tight here, keeping the pill in lockstep with
   the inputs even when the user changes density. */
.cases-overview-additional-recipient-mode-pill[b-0pkug3wzrb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--h-field);
    min-width: 64px;
    padding: 0 10px;
    font-size: var(--font-tight-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}
.cases-overview-additional-recipient-mode-pill.is-freeform[b-0pkug3wzrb] {
    color: var(--color-warn);
    background: var(--color-warn-soft);
}
.cases-overview-additional-recipients-add[b-0pkug3wzrb] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .cases-overview-additional-recipient-row[b-0pkug3wzrb] {
        grid-template-columns: 1fr;
    }
    .cases-overview-additional-recipient-row > .cases-overview-additional-recipient-select[b-0pkug3wzrb] {
        grid-column: 1;
    }
}

/* ─── Right rail ───
   The CaseStatusActions panel now wraps itself in <Card Padded="true">, so
   the outer chrome (background, border, padding, radius) comes from the
   shared Card primitive — same as the Card-based form sections on the left.
   That's what keeps the two columns visually aligned at the top of the
   Overview grid. The panel's own scoped CSS (CaseStatusActions.razor.css)
   handles its internal styling.

   Keeping this rail container set to align-self: start (inherited from
   .cases-overview-grid `align-items: start`) means the panel sits at the
   exact same Y as the first card on the left. No additional overrides are
   needed here. */
/* /Components/Layout/Cases/Cases_RelatedCases.razor.rz.scp.css */
/* ============================================================
   Cases_RelatedCases — Orcanex token-driven vertical timeline.
   ============================================================ */

.related-cases-container[b-xjdwo548pr] {
    padding: 0;
}

[b-xjdwo548pr] .related-cases-card {
    margin-bottom: var(--space-3);
}

[b-xjdwo548pr] .related-cases-titlebar-extras {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.empty-state-icon[b-xjdwo548pr] {
    font-size: 3.69rem;
    color: var(--color-text-subtle);
}

.timeline-vertical[b-xjdwo548pr] {
    position: relative;
    padding-left: var(--space-7);
}

.timeline-vertical[b-xjdwo548pr]::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.timeline-item[b-xjdwo548pr] {
    position: relative;
    margin-bottom: var(--space-4);
}

.timeline-item:last-child[b-xjdwo548pr] {
    margin-bottom: 0;
}

.timeline-marker[b-xjdwo548pr] {
    position: absolute;
    left: -22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-panel);
    border: 1.5px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    z-index: 1;
}

.timeline-item.current .timeline-marker[b-xjdwo548pr] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.timeline-content[b-xjdwo548pr] {
    padding-left: var(--space-2);
}

/* Case Card */
.case-card[b-xjdwo548pr] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.case-card:hover[b-xjdwo548pr] {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px var(--color-accent-ring);
}

.case-card.current[b-xjdwo548pr] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.case-card-header[b-xjdwo548pr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.case-card.current .case-card-header[b-xjdwo548pr] {
    background: var(--color-accent-soft);
}

.case-reference[b-xjdwo548pr] {
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-mono);
}

.case-card-body[b-xjdwo548pr] {
    padding: var(--space-3) var(--space-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
}

.case-detail[b-xjdwo548pr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-xjdwo548pr] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.6px;
}

.detail-value[b-xjdwo548pr] {
    font-size: 1rem;
    color: var(--color-text);
}

@media (max-width: 576px) {
    .case-card-body[b-xjdwo548pr] {
        grid-template-columns: 1fr;
    }

    .case-card-header[b-xjdwo548pr] {
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-start;
    }
}
/* /Components/Layout/Cases/Cases_SeraAISummary.razor.rz.scp.css */
/* Cases_SeraAISummary styles (scoped) */

[b-uq5syzgbs9] .sera-card {
    margin-bottom: var(--space-3);
}

[b-uq5syzgbs9] .sera-titlebar-extras {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* =========================================
   Container & Animation
   ========================================= */
.sera-overview-wrapper[b-uq5syzgbs9] {
    animation: fadeIn-b-uq5syzgbs9 0.3s ease-in;
}

@keyframes fadeIn-b-uq5syzgbs9 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* New update glow effect */
.sera-new-update[b-uq5syzgbs9] {
    animation: seraGlow-b-uq5syzgbs9 2s ease-in-out infinite;
    box-shadow: 0 0 0 3px var(--color-success-soft);
}

@keyframes seraGlow-b-uq5syzgbs9 {
    0%, 100% { box-shadow: 0 0 0 2px var(--color-success-soft); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 30%, transparent); }
}

/* =========================================
   Markdown Content - Compact Styling
   ========================================= */
.sera-markdown-content[b-uq5syzgbs9] {
    font-size: 1rem;
    line-height: 1.5;
    max-height: 65vh;
    overflow-y: auto;
    color: var(--color-text);
}

[b-uq5syzgbs9] .sera-markdown-content h2 {
    color: var(--color-accent);
    font-size: 1.23rem;
    font-weight: 600;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-soft);
}

[b-uq5syzgbs9] .sera-markdown-content h3 {
    color: var(--color-text);
    font-size: 1.08rem;
    font-weight: 600;
    margin-top: var(--space-4);
    margin-bottom: 6px;
}

[b-uq5syzgbs9] .sera-markdown-content h4 {
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 600;
    margin-top: var(--space-3);
    margin-bottom: 6px;
}

[b-uq5syzgbs9] .sera-markdown-content h5 {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: var(--space-3);
    margin-bottom: 4px;
}

[b-uq5syzgbs9] .sera-markdown-content p {
    margin-bottom: 0.5rem;
}

[b-uq5syzgbs9] .sera-markdown-content ul,
[b-uq5syzgbs9] .sera-markdown-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

[b-uq5syzgbs9] .sera-markdown-content li {
    margin-bottom: 0.15rem;
}

/* Bold text in lists - match grey color scheme, not black */
[b-uq5syzgbs9] .sera-markdown-content strong {
    color: var(--color-text);
    font-weight: 600;
}

[b-uq5syzgbs9] .sera-markdown-content li strong {
    color: var(--color-text);
    font-weight: 600;
}

[b-uq5syzgbs9] .sera-markdown-content code {
    background-color: var(--color-bg);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-danger);
}

[b-uq5syzgbs9] .sera-markdown-content pre {
    background-color: var(--color-bg);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
}

[b-uq5syzgbs9] .sera-markdown-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.78rem;
}

[b-uq5syzgbs9] .sera-markdown-content hr {
    margin: 1rem 0;
    border-top: 1px solid var(--color-border-soft);
}

/* =========================================
   Horizontal Timeline
   ========================================= */
[b-uq5syzgbs9] .sera-timeline-container {
    margin: 1rem 0;
    padding: 0.75rem 0;
    overflow-x: auto;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
}

[b-uq5syzgbs9] .sera-timeline {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    min-width: max-content;
    position: relative;
}

/* Connecting line - positioned to run through center of dots */
[b-uq5syzgbs9] .sera-timeline::before {
    content: '';
    position: absolute;
    top: 46px;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    background: var(--color-accent);
    z-index: 0;
}

[b-uq5syzgbs9] .sera-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
    max-width: 180px;
    padding: 0 0.5rem;
    position: relative;
    z-index: 1;
}

[b-uq5syzgbs9] .sera-timeline-date {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
    background: var(--color-panel);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-accent-soft);
}

[b-uq5syzgbs9] .sera-timeline-date .day {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
}

[b-uq5syzgbs9] .sera-timeline-date .year {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

[b-uq5syzgbs9] .sera-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-panel);
    border: 3px solid var(--color-accent);
    margin-bottom: 0.35rem;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

[b-uq5syzgbs9] .sera-timeline-item:hover .sera-timeline-dot {
    background: var(--color-accent);
    transform: scale(1.2);
}

[b-uq5syzgbs9] .sera-timeline-content {
    text-align: center;
    padding: 0.4rem;
    background: var(--color-panel);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;
    transition: all 0.2s ease;
}

[b-uq5syzgbs9] .sera-timeline-item:hover .sera-timeline-content {
    border-color: var(--color-accent);
    box-shadow: 0 2px 6px var(--color-accent-soft);
}

[b-uq5syzgbs9] .sera-timeline-event {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

[b-uq5syzgbs9] .sera-timeline-desc {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* =========================================
   Alert Overrides
   ========================================= */
.alert-warning[b-uq5syzgbs9] {
    background-color: var(--color-warn-soft);
    border-color: var(--color-warn) !important;
}

.alert-info-subtle[b-uq5syzgbs9] {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.bg-info-subtle[b-uq5syzgbs9] {
    background-color: var(--color-accent-soft) !important;
}

/* =========================================
   Scrollbar Styling
   ========================================= */
.sera-markdown-content[b-uq5syzgbs9]::-webkit-scrollbar,
[b-uq5syzgbs9] .sera-timeline-container::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.sera-markdown-content[b-uq5syzgbs9]::-webkit-scrollbar-track,
[b-uq5syzgbs9] .sera-timeline-container::-webkit-scrollbar-track {
    background: var(--color-bg);
    border-radius: 3px;
}

.sera-markdown-content[b-uq5syzgbs9]::-webkit-scrollbar-thumb,
[b-uq5syzgbs9] .sera-timeline-container::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.sera-markdown-content[b-uq5syzgbs9]::-webkit-scrollbar-thumb:hover,
[b-uq5syzgbs9] .sera-timeline-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}
/* /Components/Layout/Cases/Cases_Timeline.razor.rz.scp.css */
/* ============================================================
   Cases_Timeline — Orcanex SLA dates editor + visual timeline.
   Token-only colours.
   ============================================================ */

.timeline-page[b-8c12bavxgb] {
    padding: var(--space-2);
}

[b-8c12bavxgb] .timeline-card {
    margin-bottom: var(--space-3);
}

[b-8c12bavxgb] .timeline-titlebar-extras {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* SLA Groups */
.sla-group-title[b-8c12bavxgb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-soft);
}

.sla-group-title i[b-8c12bavxgb] {
    font-size: 1.23rem;
    color: var(--color-accent);
}

/* Form styling */
.form-label.small[b-8c12bavxgb] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.form-control-sm[b-8c12bavxgb] {
    font-size: 1rem;
}

/* Empty state */
.empty-state-icon[b-8c12bavxgb] {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i[b-8c12bavxgb] {
    font-size: 2.77rem;
    color: var(--color-text-subtle);
}

/* ----- Visual day-grouped timeline ----- */

.timeline-visual[b-8c12bavxgb] {
    position: relative;
    padding-left: var(--space-8);
}

.timeline-visual[b-8c12bavxgb]::before {
    content: '';
    position: absolute;
    left: 17px;
    top: var(--space-2);
    bottom: var(--space-2);
    width: 2px;
    background: var(--color-border);
    border-radius: 2px;
}

.timeline-item[b-8c12bavxgb] {
    position: relative;
    padding-bottom: var(--space-4);
    animation: fadeInUp-b-8c12bavxgb 0.3s ease-out;
}

@keyframes fadeInUp-b-8c12bavxgb {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.timeline-item:last-child[b-8c12bavxgb] {
    padding-bottom: 0;
}

/* 22px circular dot — Orcanex spec */
.timeline-marker[b-8c12bavxgb] {
    position: absolute;
    left: -42px;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: white;
    background: var(--color-text-muted);
    border: 1.5px solid var(--color-panel);
    z-index: 1;
    transition: transform 120ms ease-out;
}

.timeline-item:hover .timeline-marker[b-8c12bavxgb] {
    transform: scale(1.05);
}

/* Marker tones — flat, token-driven */
.marker-primary[b-8c12bavxgb] { background: var(--color-accent); }
.marker-secondary[b-8c12bavxgb] { background: var(--color-text-muted); }
.marker-success[b-8c12bavxgb] { background: var(--color-success); }
.marker-info[b-8c12bavxgb] { background: var(--color-accent); }
.marker-warning[b-8c12bavxgb] { background: var(--color-warn); }
.marker-danger[b-8c12bavxgb] { background: var(--color-danger); }
.marker-dark[b-8c12bavxgb] { background: var(--color-text); }

/* Timeline content card */
.timeline-content[b-8c12bavxgb] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    transition: border-color 120ms ease-out, background 120ms ease-out;
    position: relative;
    overflow: hidden;
}

.timeline-content[b-8c12bavxgb]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-border);
    transition: background 120ms ease-out;
}

.timeline-item:hover .timeline-content[b-8c12bavxgb] {
    border-color: var(--color-text-muted);
    background: var(--color-bg);
}

.timeline-item-past .timeline-content[b-8c12bavxgb]::before {
    background: var(--color-success);
}

.timeline-item-today .timeline-content[b-8c12bavxgb]::before {
    background: var(--color-accent);
}

.timeline-item-future .timeline-content[b-8c12bavxgb]::before {
    background: var(--color-text-muted);
}

/* Timeline header row */
.timeline-header-row[b-8c12bavxgb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.timeline-date-display[b-8c12bavxgb] {
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.timeline-event-label[b-8c12bavxgb] {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.timeline-relative-time[b-8c12bavxgb] {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
    font-variant-numeric: tabular-nums;
}

/* State variations */
.timeline-item-past .timeline-marker[b-8c12bavxgb] {
    opacity: 0.95;
}

.timeline-item-today .timeline-marker[b-8c12bavxgb] {
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.timeline-item-today .timeline-content[b-8c12bavxgb] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.timeline-item-future .timeline-marker[b-8c12bavxgb] {
    opacity: 0.75;
}

.timeline-item-future .timeline-content[b-8c12bavxgb] {
    background: var(--color-bg);
    border-style: dashed;
}

/* Badge styles — repaint subtle bootstrap */
.bg-success-subtle[b-8c12bavxgb] {
    background-color: var(--color-success-soft) !important;
}

.text-success[b-8c12bavxgb] {
    color: var(--color-success) !important;
}

.bg-info-subtle[b-8c12bavxgb] {
    background-color: var(--color-accent-soft) !important;
}

.text-info[b-8c12bavxgb] {
    color: var(--color-accent) !important;
}

@media (max-width: 992px) {
    .timeline-page .row[b-8c12bavxgb] {
        flex-direction: column-reverse;
    }
}

@media (max-width: 576px) {
    .timeline-visual[b-8c12bavxgb] {
        padding-left: var(--space-7);
    }

    .timeline-marker[b-8c12bavxgb] {
        left: -36px;
        width: 18px;
        height: 18px;
    }
}
/* /Components/Layout/Cases/ResendConsentEmailBanner.razor.rz.scp.css */
/* ============================================================
   ResendConsentEmailBanner — compact horizontal alert that sits
   right under the workflow bar on the case form. Mirrors the
   .clara-review-banner style in WorkflowProgressBar.razor.css for
   visual consistency, but uses the warn (amber) tone since this
   is an outstanding-action prompt.
   ============================================================ */

.resend-consent-banner[b-a44ehy6ufg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-warn-soft);
    border: 1px solid var(--color-warn);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.resend-consent-banner-icon[b-a44ehy6ufg] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-warn);
    color: #ffffff;
}

.resend-consent-banner-body[b-a44ehy6ufg] {
    flex: 1 1 auto;
    min-width: 0;
}

.resend-consent-banner-title[b-a44ehy6ufg] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.resend-consent-banner-subtitle[b-a44ehy6ufg] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 2px;
}

.resend-consent-banner-action[b-a44ehy6ufg] {
    flex: 0 0 auto;
}

/* At mobile the banner stacks: icon + text on the first row, action on the
   second so the button doesn't get squashed and stays a 44px touch target. */
:root[data-viewport="mobile"] .resend-consent-banner[b-a44ehy6ufg] {
    flex-wrap: wrap;
    gap: var(--space-2);
}

:root[data-viewport="mobile"] .resend-consent-banner-action[b-a44ehy6ufg] {
    flex: 1 1 100%;
}

:root[data-viewport="mobile"] .resend-consent-banner-action[b-a44ehy6ufg]  .orcanex-btn {
    width: 100%;
    min-height: var(--touch-target);
}
/* /Components/Layout/Cases/WorkflowOverviewDialog.razor.rz.scp.css */
/* ===========================================================================
   Workflow Overview Dialog — Phase 5 vertical timeline of every step in the
   case's pinned workflow. Read-only; rendered as an overlay modal.
   =========================================================================== */

.workflow-overview-modal .modal-content[b-cyg6lthx6f] {
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.workflow-overview-header[b-cyg6lthx6f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.workflow-overview-header-title[b-cyg6lthx6f] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.workflow-overview-header-title i[b-cyg6lthx6f] {
    font-size: 1.4rem;
    color: #3b82f6;
}

.workflow-overview-meta[b-cyg6lthx6f] {
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

.workflow-overview-meta strong[b-cyg6lthx6f] {
    color: #1e293b;
}

.workflow-overview-body[b-cyg6lthx6f] {
    padding: 0.5rem 1rem 1rem;
}

/* ----- Vertical timeline ----- */

.workflow-timeline[b-cyg6lthx6f] {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 0;
}

.workflow-timeline[b-cyg6lthx6f]::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background-color: #e2e8f0;
    border-radius: 1px;
}

.workflow-timeline-item[b-cyg6lthx6f] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.5rem 0 0.5rem 0;
    margin-bottom: 0.25rem;
}

.workflow-timeline-badge[b-cyg6lthx6f] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    font-size: 1rem;
}

.workflow-timeline-item.completed .workflow-timeline-badge[b-cyg6lthx6f] {
    border-color: #16a34a;
    background-color: #f0fdf4;
    color: #15803d;
}

.workflow-timeline-item.current .workflow-timeline-badge[b-cyg6lthx6f] {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #1e40af;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

.workflow-timeline-item.future .workflow-timeline-badge[b-cyg6lthx6f] {
    border-color: #cbd5e1;
    background-color: #ffffff;
    color: #94a3b8;
}

.workflow-timeline-content[b-cyg6lthx6f] {
    flex: 1 1 auto;
    min-width: 0;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
}

.workflow-timeline-item.current .workflow-timeline-content[b-cyg6lthx6f] {
    background-color: #eff6ff;
    border-color: #93c5fd;
}

.workflow-timeline-item.completed .workflow-timeline-content[b-cyg6lthx6f] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.workflow-timeline-row[b-cyg6lthx6f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.workflow-timeline-seq[b-cyg6lthx6f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.workflow-timeline-code[b-cyg6lthx6f] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #3b82f6;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.workflow-timeline-name[b-cyg6lthx6f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    flex: 1 1 auto;
    min-width: 0;
}

.workflow-timeline-state[b-cyg6lthx6f] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.workflow-timeline-state.completed[b-cyg6lthx6f] {
    color: #15803d;
    background-color: rgba(22, 163, 74, 0.1);
}

.workflow-timeline-state.current[b-cyg6lthx6f] {
    color: #1e40af;
    background-color: rgba(59, 130, 246, 0.12);
}

.workflow-timeline-state.future[b-cyg6lthx6f] {
    color: #64748b;
    background-color: rgba(100, 116, 139, 0.08);
}

.workflow-timeline-detail[b-cyg6lthx6f] {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #475569;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.55rem;
    row-gap: 0.18rem;
}

.workflow-timeline-detail .label[b-cyg6lthx6f] {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    padding-top: 0.1rem;
    white-space: nowrap;
}

.workflow-timeline-detail .value[b-cyg6lthx6f] {
    color: #1e293b;
    word-break: break-word;
}

.workflow-timeline-milestone[b-cyg6lthx6f] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #1e40af;
    background-color: rgba(59, 130, 246, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.25rem;
}

.workflow-timeline-milestone i[b-cyg6lthx6f] {
    font-size: 0.85rem;
}

.workflow-overview-footer[b-cyg6lthx6f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    background-color: #fafbfc;
    border-radius: 0 0 10px 10px;
}

.workflow-overview-footer-info[b-cyg6lthx6f] {
    color: #64748b;
    font-size: 0.7rem;
}

.workflow-overview-empty[b-cyg6lthx6f] {
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
    padding: 2rem 0;
}
/* /Components/Layout/Cases/WorkflowProgressBar.razor.rz.scp.css */
/* ============================================================
   Workflow rail — numbered horizontal stepper + footer row.
   Token-only colours.
   ============================================================ */

.workflow-bar[b-m93yzrc9yh] {
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    padding: 14px 20px 12px;
}

.workflow-bar-loading[b-m93yzrc9yh] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: 4px 0;
}

/* ─── Stepper row — capped-width scrollable track + tucked meta links ───
   The track is limited to ~half the available width so long workflows
   don't dominate the bar; the meta block stays right-aligned and is
   never pushed offscreen by overflow. The current step is centred on
   load via examinexCaseForm.centerWorkflowCurrentStep (JS interop). */

.workflow-bar-stepper-row[b-m93yzrc9yh] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.workflow-bar-stepper[b-m93yzrc9yh] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    /* Cap to half the bar width on desktop/tablet. min-width: 0 lets the
       flex item shrink below its content width so overflow-x can actually
       scroll inside the track when there are more steps than fit. */
    max-width: 50%;
    min-width: 0;
    overflow-x: auto;
    /* Scrollbar is hidden — the prev/next chevrons either side are the
       advertised affordance. Wheel + drag-to-scroll still work. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.workflow-bar-stepper[b-m93yzrc9yh]::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ─── Stepper prev/next chevron buttons ─── */

.workflow-bar-stepper-nav[b-m93yzrc9yh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.workflow-bar-stepper-nav:hover[b-m93yzrc9yh] {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-accent);
}

.workflow-bar-stepper-nav:focus-visible[b-m93yzrc9yh] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.workflow-bar-step[b-m93yzrc9yh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: background var(--duration-hover) var(--ease-hover);
}

.workflow-bar-step-current[b-m93yzrc9yh] {
    background: var(--color-accent-soft);
}

.workflow-bar-step-dot[b-m93yzrc9yh] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-text-muted);
    line-height: 1;
}

.workflow-bar-step-current .workflow-bar-step-dot[b-m93yzrc9yh] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.workflow-bar-step-completed .workflow-bar-step-dot[b-m93yzrc9yh] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.workflow-bar-step-label[b-m93yzrc9yh] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.workflow-bar-step-current .workflow-bar-step-label[b-m93yzrc9yh] {
    color: var(--color-accent);
    font-weight: 600;
}

.workflow-bar-step-completed .workflow-bar-step-label[b-m93yzrc9yh] {
    color: var(--color-text);
}

.workflow-bar-step-connector[b-m93yzrc9yh] {
    flex: 1;
    min-width: 12px;
    max-width: 64px;
    height: 2px;
    background: var(--color-border-soft);
    margin: 0 4px;
}

.workflow-bar-step-connector-done[b-m93yzrc9yh] {
    background: var(--color-success);
}

/* ─── Tucked meta links on the right of the stepper row ─── */

.workflow-bar-meta[b-m93yzrc9yh] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.workflow-bar-meta-btn[b-m93yzrc9yh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.workflow-bar-meta-btn:hover[b-m93yzrc9yh] {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ─── Inline pending-actions dropdown ───
   Sits between the stepper chevrons and the meta links. The trigger
   summarises the primary outstanding action (or milestone / "all
   complete") and the percent complete; the menu lists required + optional
   + completed actions and exposes milestone + cycle controls.
   The old footer row was removed — this replaces it. */

.workflow-bar-actions[b-m93yzrc9yh] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
}

.workflow-bar-actions-trigger[b-m93yzrc9yh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: background var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.workflow-bar-actions-trigger:hover[b-m93yzrc9yh] {
    background: var(--color-panel);
    border-color: var(--color-accent);
}

.workflow-bar-actions.is-open > .workflow-bar-actions-trigger[b-m93yzrc9yh] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.workflow-bar-actions-bullet[b-m93yzrc9yh] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.workflow-bar-actions-bullet[b-m93yzrc9yh]::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-subtle);
}

.workflow-bar-actions-bullet-warn[b-m93yzrc9yh] { border-color: var(--color-warn); }
.workflow-bar-actions-bullet-warn[b-m93yzrc9yh]::after { background: var(--color-warn); }
.workflow-bar-actions-bullet-success[b-m93yzrc9yh] { border-color: var(--color-success); }
.workflow-bar-actions-bullet-success[b-m93yzrc9yh]::after { background: var(--color-success); }
.workflow-bar-actions-bullet-muted[b-m93yzrc9yh] { border-color: var(--color-border); }

.workflow-bar-actions-text[b-m93yzrc9yh] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-bar-actions-text-muted[b-m93yzrc9yh] {
    color: var(--color-text-muted);
    font-weight: 400;
}

.workflow-bar-actions-meta[b-m93yzrc9yh] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.workflow-bar-actions-percent[b-m93yzrc9yh] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding-left: 4px;
    border-left: 1px solid var(--color-border-soft);
}

/* The dropdown panel anchored to the trigger. */

.workflow-bar-actions-menu[b-m93yzrc9yh] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1001;
    min-width: 360px;
    max-width: 480px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: var(--space-3);
}

.workflow-bar-actions-menu-header[b-m93yzrc9yh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.workflow-bar-actions-menu-percent[b-m93yzrc9yh] {
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.workflow-bar-actions-menu-progress[b-m93yzrc9yh] {
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-soft);
    overflow: hidden;
    margin-bottom: 12px;
}

.workflow-bar-actions-menu-progress-fill[b-m93yzrc9yh] {
    height: 100%;
    background: var(--color-warn);
    transition: width var(--duration-enter) var(--ease-enter);
}

.workflow-bar-actions-menu-progress-fill.complete[b-m93yzrc9yh] {
    background: var(--color-success);
}

.workflow-bar-actions-menu-section[b-m93yzrc9yh] {
    margin-bottom: 12px;
}

.workflow-bar-actions-menu-section:last-of-type[b-m93yzrc9yh] {
    margin-bottom: 0;
}

.workflow-bar-actions-menu-section-title[b-m93yzrc9yh] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-subtle);
    margin-bottom: 6px;
    padding: 0 4px;
}

.workflow-bar-actions-row[b-m93yzrc9yh] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover);
}

.workflow-bar-actions-row:hover:not(:disabled)[b-m93yzrc9yh] {
    background: var(--color-bg);
}

.workflow-bar-actions-row:disabled[b-m93yzrc9yh] {
    cursor: default;
}

.workflow-bar-actions-row-bullet[b-m93yzrc9yh] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    position: relative;
}

.workflow-bar-actions-row-bullet[b-m93yzrc9yh]::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-subtle);
}

.workflow-bar-actions-row-bullet-warn[b-m93yzrc9yh] { border-color: var(--color-warn); }
.workflow-bar-actions-row-bullet-warn[b-m93yzrc9yh]::after { background: var(--color-warn); }
.workflow-bar-actions-row-bullet-muted[b-m93yzrc9yh] { border-color: var(--color-border); }
.workflow-bar-actions-row-bullet-success[b-m93yzrc9yh] {
    background: var(--color-success);
    border-color: var(--color-success);
}
.workflow-bar-actions-row-bullet-success[b-m93yzrc9yh]::after { display: none; }

.workflow-bar-actions-row-text[b-m93yzrc9yh] {
    flex: 1;
    min-width: 0;
}

.workflow-bar-actions-row-text-strike[b-m93yzrc9yh] {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.workflow-bar-actions-row-complete[b-m93yzrc9yh] {
    cursor: default;
}

.workflow-bar-actions-menu-footer[b-m93yzrc9yh] {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Full-viewport invisible click catcher — closes the dropdown when the
   user clicks anywhere outside it. Lower z-index than the menu so the
   menu remains interactive. */
.workflow-bar-actions-backdrop[b-m93yzrc9yh] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

/* ─── Clara review banners ─── */

.clara-review-banner[b-m93yzrc9yh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 1rem;
}

.clara-review-banner-progress[b-m93yzrc9yh] {
    background: var(--color-warn-soft);
    color: var(--color-warn);
    border-color: var(--color-warn-soft);
}

.clara-review-banner-ready[b-m93yzrc9yh] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
}

.clara-review-banner-icon[b-m93yzrc9yh] {
    flex-shrink: 0;
    margin-top: 1px;
}

.clara-review-banner-body[b-m93yzrc9yh] {
    flex: 1;
    min-width: 0;
}

.clara-review-banner-title[b-m93yzrc9yh] {
    font-weight: 600;
    margin-bottom: 2px;
}

.clara-review-banner-subtitle[b-m93yzrc9yh] {
    font-size: 0.92rem;
    opacity: 0.85;
}

.clara-review-banner-pending[b-m93yzrc9yh] {
    font-weight: 400;
    opacity: 0.85;
}

.clara-review-banner-actions[b-m93yzrc9yh] {
    flex-shrink: 0;
}

/* ============================================================
   Mobile-only compact carousel — one pending action at a time
   with prev/next chevrons and a tiny inline progress bar.
   Hidden by default; shown only at the mobile breakpoint. The
   stepper + footer below are hidden in CaseForm.razor.css's
   .caseform-workflow-mobile-compact ::deep rules.
   ============================================================ */
.workflow-bar-mobile[b-m93yzrc9yh] {
    display: none;
}

:root[data-viewport="mobile"]   .workflow-bar-mobile[b-m93yzrc9yh],
:root[data-viewport="mobile-l"] .workflow-bar-mobile[b-m93yzrc9yh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    min-height: 40px;
}

.workflow-bar-mobile-nav[b-m93yzrc9yh] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}
.workflow-bar-mobile-nav:hover[b-m93yzrc9yh] {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-accent);
}

.workflow-bar-mobile-bullet[b-m93yzrc9yh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-muted);
}
.workflow-bar-mobile-bullet.is-warn[b-m93yzrc9yh]   { background: var(--color-warn); }
.workflow-bar-mobile-bullet.is-muted[b-m93yzrc9yh]  { background: var(--color-text-subtle); }

.workflow-bar-mobile-text[b-m93yzrc9yh] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.3;
    /* Truncate long action descriptions — they often run 60+ chars on
       desktop and won't fit on a phone. Two lines max so the strip stays
       under ~50 px tall even when the action description is verbose. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workflow-bar-mobile-text-muted[b-m93yzrc9yh] {
    color: var(--color-text-muted);
}

.workflow-bar-mobile-pos[b-m93yzrc9yh] {
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 30px;
    text-align: center;
}

.workflow-bar-mobile-progress[b-m93yzrc9yh] {
    width: 48px;
    height: 4px;
    background: var(--color-border-soft);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
}

.workflow-bar-mobile-progress-fill[b-m93yzrc9yh] {
    display: block;
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
    transition: width var(--duration-enter) var(--ease-enter);
}
/* /Components/Layout/CRM/CRM_ClientDocuments.razor.rz.scp.css */
/* CRM Client Documents — Orcanex theme. Card-wrapped sections; CompanyFileList
   inherits its own styles. Mirrors Cases_Documents.razor.css for visual parity
   per the CLAUDE.md / mobile-overhaul rules. */

.orcanex-crm-documents[b-o01mcpchdj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   Collapsible upload-card chrome — mirrors Cases_Documents:
   clickable titlebar with chevron, body slides in/out on toggle.
   Default-collapsed so it doesn't dominate vertical at mobile.
   ============================================================ */
[b-o01mcpchdj] .documents-upload-card {
    margin-bottom: var(--space-3);
}

[b-o01mcpchdj] .documents-upload-titlebar {
    cursor: pointer;
    user-select: none;
}

[b-o01mcpchdj] .documents-upload-toggle {
    margin-left: auto;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
}

.documents-upload-body[b-o01mcpchdj] {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    margin-top: var(--space-2);
}

/* Mobile — tighten the upload card padding so the dropzone doesn't eat
   half the screen. CompanyDropzoneUpload already swaps to tap-to-select
   messaging at mobile via the global DropzoneUpload rules. */
:root[data-viewport="mobile"]   .documents-upload-body[b-o01mcpchdj],
:root[data-viewport="mobile-l"] .documents-upload-body[b-o01mcpchdj] {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

[b-o01mcpchdj] :root[data-viewport="mobile"]   .documents-upload-card .orcanex-card-titlebar,
[b-o01mcpchdj] :root[data-viewport="mobile-l"] .documents-upload-card .orcanex-card-titlebar {
    padding: var(--space-2) 0;
}
/* /Components/Layout/CRM/CRM_ClientNotes.razor.rz.scp.css */
/* CRM_ClientNotes — clone of Cases_CaseNotes.razor.css for visual + display parity per the
   Phase 3 plan. Class names overlap (note-card, pinned-note, notes-timeline, timeline-group,
   sticky-editor, ::deep .note-content rules for Quill output). Cases-only rules (sos-note-*,
   sera-summary-card, etc.) match nothing in the CRM markup and are inert here — kept so the two
   files stay drop-in equivalents and any future Cases polish can be re-cloned in one go. */

/* Drag-to-note host — wraps the whole notes panel and listens for drag events. */
.client-notes-drop-host[b-8mnwln4gs3] {
    position: relative;
    min-height: 200px;
}

/* Card Structure - Compact */
.note-card[b-8mnwln4gs3] {
    transition: all 0.15s ease;
    border-radius: 8px !important;
    border-color: #dee2e6 !important;
}

.note-card:hover[b-8mnwln4gs3] {
    border-color: #adb5bd !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.note-card.pinned-note[b-8mnwln4gs3] {
    border-left: 3px solid var(--bs-warning) !important;
}

.note-card.sos-note-triggered[b-8mnwln4gs3] {
    border-left: 4px solid #dc3545 !important;
}

.note-card.sos-note-acknowledged[b-8mnwln4gs3] {
    border-left: 4px solid #198754 !important;
}

/* Note Content Base */
.note-content[b-8mnwln4gs3] {
    line-height: 1.6;
    color: #374151;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.note-content.collapsed[b-8mnwln4gs3] {
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.note-content.collapsed[b-8mnwln4gs3]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}

/* ========================================
   Quill Editor Output Styling
   Using ::deep to penetrate CSS isolation
   for dynamically injected HTML content
   ======================================== */

/* Paragraphs */
[b-8mnwln4gs3] .note-content p {
    margin-bottom: 0.1rem;
    margin-top: 0;
}

[b-8mnwln4gs3] .note-content p > br:only-child {
    display: block;
    content: "";
    margin-top: 0.3rem;
}

/* Blockquotes */
[b-8mnwln4gs3] .note-content blockquote {
    border-left: 3px solid var(--bs-primary);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

/* Code blocks */
[b-8mnwln4gs3] .note-content pre,
[b-8mnwln4gs3] .note-content code {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
}

[b-8mnwln4gs3] .note-content code {
    padding: 0.1rem 0.3rem;
    color: #e83e8c;
}

/* Quill Alignment Classes */
[b-8mnwln4gs3] .note-content .ql-align-center,
[b-8mnwln4gs3] .note-content p.ql-align-center,
[b-8mnwln4gs3] .note-content [class*="ql-align-center"] {
    text-align: center !important;
}

[b-8mnwln4gs3] .note-content .ql-align-right,
[b-8mnwln4gs3] .note-content p.ql-align-right,
[b-8mnwln4gs3] .note-content [class*="ql-align-right"] {
    text-align: right !important;
}

[b-8mnwln4gs3] .note-content .ql-align-justify,
[b-8mnwln4gs3] .note-content p.ql-align-justify,
[b-8mnwln4gs3] .note-content [class*="ql-align-justify"] {
    text-align: justify !important;
}

/* Hide Quill UI elements */
[b-8mnwln4gs3] .note-content .ql-ui,
[b-8mnwln4gs3] .note-content [contenteditable="false"] {
    display: none !important;
}

/* Quill List Styling - Base */
[b-8mnwln4gs3] .note-content ol {
    padding-left: 0;
    margin: 0.5rem 0;
    list-style: none;
    counter-reset: list-counter;
}

[b-8mnwln4gs3] .note-content ol li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.25rem;
}

/* Bullet list items */
[b-8mnwln4gs3] .note-content ol li[data-list="bullet"]::before {
    content: "�";
    position: absolute;
    left: 0.5rem;
    color: #374151;
    font-weight: bold;
}

/* Ordered/Numbered list items */
[b-8mnwln4gs3] .note-content ol li[data-list="ordered"] {
    counter-increment: list-counter;
}

[b-8mnwln4gs3] .note-content ol li[data-list="ordered"]::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0.25rem;
    color: #374151;
}

/* Quill indent levels */
[b-8mnwln4gs3] .note-content .ql-indent-1,
[b-8mnwln4gs3] .note-content li.ql-indent-1 {
    padding-left: 3rem !important;
}

[b-8mnwln4gs3] .note-content .ql-indent-2,
[b-8mnwln4gs3] .note-content li.ql-indent-2 {
    padding-left: 4.5rem !important;
}

[b-8mnwln4gs3] .note-content .ql-indent-3,
[b-8mnwln4gs3] .note-content li.ql-indent-3 {
    padding-left: 6rem !important;
}

[b-8mnwln4gs3] .note-content .ql-indent-4,
[b-8mnwln4gs3] .note-content li.ql-indent-4 {
    padding-left: 7.5rem !important;
}

[b-8mnwln4gs3] .note-content .ql-indent-5,
[b-8mnwln4gs3] .note-content li.ql-indent-5 {
    padding-left: 9rem !important;
}

/* ========================================
   End Quill Styling
   ======================================== */

/* Timeline Styling */
.timeline-date-badge[b-8mnwln4gs3] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
    padding: 0.25rem 0;
}

/* Sera Summary Card */
.sera-summary-card[b-8mnwln4gs3] {
    border-radius: 8px !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    position: relative;
    border: 1px solid #dee2e6 !important;
}

/* Sera New Update - Green border and pulsing animation */
.sera-summary-card.sera-new-update[b-8mnwln4gs3] {
    border: 2px solid var(--bs-success) !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2), 
                0 4px 12px rgba(25, 135, 84, 0.15) !important;
    animation: sera-pulse-attention-b-8mnwln4gs3 0.6s ease-in-out 5;
}

/* Strong pulse animation that runs 5 times to grab attention */
@keyframes sera-pulse-attention-b-8mnwln4gs3 {
    0% {
        background-color: rgba(25, 135, 84, 0);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2), 
                    0 4px 12px rgba(25, 135, 84, 0.15);
        transform: scale(1);
    }
    50% {
        background-color: rgba(25, 135, 84, 0.1);
        box-shadow: 0 0 0 6px rgba(25, 135, 84, 0.35), 
                    0 6px 20px rgba(25, 135, 84, 0.3);
        transform: scale(1.015);
    }
    100% {
        background-color: rgba(25, 135, 84, 0);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2), 
                    0 4px 12px rgba(25, 135, 84, 0.15);
        transform: scale(1);
    }
}

.collapse-icon[b-8mnwln4gs3] {
    transition: transform 0.2s ease;
    font-size: 1rem;
}

.bg-gradient-subtle[b-8mnwln4gs3] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), rgba(59, 130, 246, 0.03));
}

.summary-content[b-8mnwln4gs3] {
    line-height: 1.5;
    color: #374151;
}

.summary-content.collapsed[b-8mnwln4gs3] {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.summary-content.collapsed[b-8mnwln4gs3]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* Editor Styling */
.sticky-editor[b-8mnwln4gs3] {
    position: sticky;
    top: 1rem;
    border-radius: 8px !important;
}

/* Dropdown Styling */
.dropdown-menu[b-8mnwln4gs3] {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 120px;
}

.dropdown-item[b-8mnwln4gs3] {
    font-size: 0.8rem;
}

/* Pinned Notes Container */
.pinned-notes-container[b-8mnwln4gs3] {
    border-left: 2px solid var(--bs-warning);
    padding-left: 0.75rem;
    margin-left: 0.25rem;
}

/* Helpers */
.cursor-pointer[b-8mnwln4gs3] {
    cursor: pointer;
}

.min-width-0[b-8mnwln4gs3] {
    min-width: 0;
}

.note-preview[b-8mnwln4gs3] {
    max-height: 60px;
    overflow: hidden;
}

/* ========================================
   Email Note Styling
   ======================================== */

/* Email note cards - left border indicator */
.note-card.email-note-inbound[b-8mnwln4gs3] {
    border-left: 3px solid #10b981 !important;
    background-color: rgba(16, 185, 129, 0.02);
}

.note-card.email-note-outbound[b-8mnwln4gs3] {
    border-left: 3px solid #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.02);
}

/* Report Query note cards - red border for visibility */
.note-card.report-query-note[b-8mnwln4gs3] {
    border-left: 3px solid #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.02);
}

/* Clara QA review notes - amber border, distinct from both email and report-query */
.note-card.qa-review-note[b-8mnwln4gs3] {
    border-left: 3px solid #f59e0b !important;
    background-color: rgba(245, 158, 11, 0.03);
}

/* Clara QA avatar indicator - replaces the user avatar for AI-authored notes */
.qa-review-indicator[b-8mnwln4gs3] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

/* ========================================
   Clara QA Findings Panel
   HTML injected into note.note via MarkupString by QaReviewService.
   Uses ::deep because the MarkupString content sits inside the scoped note-content element.
   ======================================== */

[b-8mnwln4gs3] .qa-findings {
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0;
    margin: 0.25rem 0 0 0;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%);
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #1f2937;
}

[b-8mnwln4gs3] .qa-findings.qa-status-good {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 40%);
}

[b-8mnwln4gs3] .qa-findings.qa-status-warn {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%);
}

[b-8mnwln4gs3] .qa-findings.qa-status-bad {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 40%);
}

[b-8mnwln4gs3] .qa-findings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.02);
}

[b-8mnwln4gs3] .qa-findings-title {
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-8mnwln4gs3] .qa-findings-title i {
    color: #b45309;
    font-size: 1.05rem;
}

[b-8mnwln4gs3] .qa-findings.qa-status-good .qa-findings-title i {
    color: #047857;
}

[b-8mnwln4gs3] .qa-findings.qa-status-bad .qa-findings-title i {
    color: #b91c1c;
}

[b-8mnwln4gs3] .qa-findings-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    white-space: nowrap;
    border: 1px solid rgba(180, 83, 9, 0.2);
}

[b-8mnwln4gs3] .qa-findings.qa-status-good .qa-findings-status {
    background: #d1fae5;
    color: #065f46;
    border-color: rgba(4, 120, 87, 0.2);
}

[b-8mnwln4gs3] .qa-findings.qa-status-bad .qa-findings-status {
    background: #fee2e2;
    color: #991b1b;
    border-color: rgba(185, 28, 28, 0.2);
}

[b-8mnwln4gs3] .qa-findings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.45rem 0.9rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
    color: #64748b;
    font-size: 0.72rem;
}

[b-8mnwln4gs3] .qa-findings-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[b-8mnwln4gs3] .qa-findings-meta i {
    color: #94a3b8;
    font-size: 0.9rem;
}

[b-8mnwln4gs3] .qa-findings-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem;
    color: #065f46;
    font-weight: 500;
}

[b-8mnwln4gs3] .qa-findings-empty i {
    font-size: 1.2rem;
    color: #10b981;
}

[b-8mnwln4gs3] .qa-findings-section {
    padding: 0.6rem 0.9rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

[b-8mnwln4gs3] .qa-findings-section:first-of-type {
    border-top: none;
}

[b-8mnwln4gs3] .qa-findings-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin: 0 0 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

[b-8mnwln4gs3] .qa-findings-section-title i {
    color: #94a3b8;
    font-size: 0.95rem;
}

/* Issue card */
[b-8mnwln4gs3] .qa-issue {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

[b-8mnwln4gs3] .qa-issue:last-child {
    margin-bottom: 0;
}

[b-8mnwln4gs3] .qa-issue-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    height: fit-content;
    white-space: nowrap;
}

[b-8mnwln4gs3] .qa-issue-type-grammar {
    background: #dbeafe;
    color: #1e40af;
}

[b-8mnwln4gs3] .qa-issue-type-spelling {
    background: #fef3c7;
    color: #92400e;
}

[b-8mnwln4gs3] .qa-issue-type-wording {
    background: #e0e7ff;
    color: #3730a3;
}

[b-8mnwln4gs3] .qa-issue-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

[b-8mnwln4gs3] .qa-issue-line {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.82rem;
}

[b-8mnwln4gs3] .qa-issue-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

[b-8mnwln4gs3] .qa-issue-original .qa-issue-text {
    color: #991b1b;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.35);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: rgba(254, 226, 226, 0.4);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

[b-8mnwln4gs3] .qa-issue-proposed .qa-issue-text {
    color: #065f46;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: rgba(209, 250, 229, 0.4);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

[b-8mnwln4gs3] .qa-issue-reason {
    font-size: 0.76rem;
    color: #64748b;
    font-style: italic;
    padding-top: 0.1rem;
}

/* Omission card */
[b-8mnwln4gs3] .qa-omission {
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
}

[b-8mnwln4gs3] .qa-omission:last-child {
    margin-bottom: 0;
}

[b-8mnwln4gs3] .qa-omission-head {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

[b-8mnwln4gs3] .qa-omission-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-8mnwln4gs3] .qa-omission-none {
    background: #fee2e2;
    color: #991b1b;
}

[b-8mnwln4gs3] .qa-omission-partial {
    background: #fef3c7;
    color: #92400e;
}

[b-8mnwln4gs3] .qa-omission-question {
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
}

[b-8mnwln4gs3] .qa-omission-details {
    font-size: 0.78rem;
    color: #64748b;
    padding-left: 0.2rem;
    border-left: 2px solid rgba(148, 163, 184, 0.25);
    margin-left: 0.1rem;
    padding-left: 0.6rem;
}

/* Per-item decision markers (injected when the user accepts/rejects items in the Change Review modal) */
[b-8mnwln4gs3] .qa-item-decision {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

[b-8mnwln4gs3] .qa-item-badge,
[b-8mnwln4gs3] .qa-item-apply-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

[b-8mnwln4gs3] .qa-item-badge-accepted { background: #d1fae5; color: #065f46; }
[b-8mnwln4gs3] .qa-item-badge-rejected { background: #fee2e2; color: #991b1b; }
[b-8mnwln4gs3] .qa-item-apply-applied { background: #dbeafe; color: #1e40af; }
[b-8mnwln4gs3] .qa-item-apply-notfound { background: #fee2e2; color: #991b1b; }
[b-8mnwln4gs3] .qa-item-apply-skipped { background: #f3f4f6; color: #4b5563; }
[b-8mnwln4gs3] .qa-item-apply-other { background: #fef3c7; color: #92400e; }

/* Dim rejected items slightly so the card scans faster */
[b-8mnwln4gs3] .qa-issue.qa-item-rejected,
[b-8mnwln4gs3] .qa-omission.qa-item-rejected {
    opacity: 0.65;
}

/* Fallback for unparseable JSON */
[b-8mnwln4gs3] .qa-findings-fallback-note {
    padding: 0.5rem 0.9rem 0.3rem;
    font-size: 0.77rem;
    color: #92400e;
}

[b-8mnwln4gs3] .qa-findings-fallback {
    margin: 0 0.9rem 0.6rem;
    padding: 0.6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}

[b-8mnwln4gs3] .qa-findings-footer {
    padding: 0.45rem 0.9rem;
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: center;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    font-style: italic;
}

/* Mobile — stack issue grid vertically */
@media (max-width: 520px) {
    [b-8mnwln4gs3] .qa-issue {
        grid-template-columns: 1fr;
    }

    [b-8mnwln4gs3] .qa-issue-line {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* Email direction indicator icon */
.email-direction-indicator[b-8mnwln4gs3] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.email-direction-indicator.inbound[b-8mnwln4gs3] {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.email-direction-indicator.outbound[b-8mnwln4gs3] {
    background-color: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}

/* Email content specific styling */
[b-8mnwln4gs3] .note-content.email-content strong {
    color: #1e293b;
    font-weight: 600;
}

[b-8mnwln4gs3] .note-content.email-content hr {
    border-color: #e5e7eb;
    opacity: 0.5;
    margin: 0.75rem 0;
}

/* Email header lines (From, To, Subject) */
[b-8mnwln4gs3] .note-content.email-content p:first-of-type,
[b-8mnwln4gs3] .note-content.email-content p:nth-of-type(2),
[b-8mnwln4gs3] .note-content.email-content p:nth-of-type(3) {
    margin-bottom: 0.25rem;
}

/* Full email body container */
.email-body-container[b-8mnwln4gs3] {
    background-color: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 0.5rem;
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Ensure email content respects container bounds */
[b-8mnwln4gs3] .email-body-container img {
    max-width: 100%;
    height: auto;
}

[b-8mnwln4gs3] .email-body-container table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

[b-8mnwln4gs3] .email-body-container pre {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Formatted email note styling (consistent for sent and received) */
[b-8mnwln4gs3] .email-note-formatted {
    font-size: 0.875rem;
}

[b-8mnwln4gs3] .email-note-formatted div[style*="display:flex"] {
    margin-bottom: 10px;
}

[b-8mnwln4gs3] .email-note-formatted div[style*="background:#f8fafc"] {
    transition: background-color 0.15s ease;
}

[b-8mnwln4gs3] .email-note-formatted div[style*="background:#f8fafc"]:hover {
    background-color: #f1f5f9 !important;
}

/* Email metadata header styling */
[b-8mnwln4gs3] .email-metadata-header {
    font-family: inherit;
    line-height: 1.6;
}

[b-8mnwln4gs3] .email-metadata-header strong {
    min-width: 55px;
    display: inline-block;
}

/* Email body container - ensure images and content render properly */
[b-8mnwln4gs3] .email-body-container {
    overflow-x: auto;
    word-wrap: break-word;
}

[b-8mnwln4gs3] .email-body-container img {
    max-width: 100%;
    height: auto;
}

/* Email attachments bar */
[b-8mnwln4gs3] .email-attachments-bar {
    font-family: inherit;
}

[b-8mnwln4gs3] .email-attachments-bar .attachment-pill:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    text-decoration: none;
}

/* ========================================
   End Email Styling
   ======================================== */

/* Responsive */
@media (max-width: 991.98px) {
    .sticky-editor[b-8mnwln4gs3] {
        position: relative;
        top: 0;
    }

    .timeline-date-badge[b-8mnwln4gs3] {
        position: relative;
    }
}

/* ============================================================
   Mobile recipe — mirrors Cases_CaseNotes.razor.css. Three bits:
   (1) the "+ Add Note" launcher button at the top of the notes
   column when the desktop sticky-editor column is gated off;
   (2) per-note kebab dropdowns clamped to 36 × 36 square;
   (3) the modal-hosted Quill editor sized to 45vh.
   Don't combine `:root[data-viewport=mobile]` with `::deep` —
   see the CSS-isolation pitfall in CLAUDE.md.
   ============================================================ */
.client-notes-mobile-add-btn[b-8mnwln4gs3] {
    display: none;
}

:root[data-viewport="mobile"]   .client-notes-mobile-add-btn[b-8mnwln4gs3],
:root[data-viewport="mobile-l"] .client-notes-mobile-add-btn[b-8mnwln4gs3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--touch-target);
    padding: 10px 16px;
    margin-bottom: var(--space-3);
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover);
}

:root[data-viewport="mobile"]   .client-notes-mobile-add-btn:active[b-8mnwln4gs3],
:root[data-viewport="mobile-l"] .client-notes-mobile-add-btn:active[b-8mnwln4gs3],
:root[data-viewport="mobile"]   .client-notes-mobile-add-btn:hover[b-8mnwln4gs3],
:root[data-viewport="mobile-l"] .client-notes-mobile-add-btn:hover[b-8mnwln4gs3] {
    background: var(--color-accent-hover);
    color: #fff;
}

:root[data-viewport="mobile"]   .client-notes-mobile-add-btn .mdi[b-8mnwln4gs3],
:root[data-viewport="mobile-l"] .client-notes-mobile-add-btn .mdi[b-8mnwln4gs3] {
    font-size: 1.2rem;
    line-height: 1;
}

/* Per-note kebab dropdown trigger — 36 × 36 square at mobile so the
   shape matches the rest of the page chrome (per CLAUDE.md). */
:root[data-viewport="mobile"]   .note-action-btn[b-8mnwln4gs3],
:root[data-viewport="mobile-l"] .note-action-btn[b-8mnwln4gs3] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
}

/* Mobile editor modal — Quill toolbar wider than 320 px so allow
   horizontal scroll on the toolbar row only. */
[b-8mnwln4gs3] .client-notes-mobile-editor-modal .ql-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
}

:root[data-viewport="mobile"]   .client-notes-mobile-editor-modal #crm-note-editor[b-8mnwln4gs3],
:root[data-viewport="mobile-l"] .client-notes-mobile-editor-modal #crm-note-editor[b-8mnwln4gs3] {
    height: 45vh !important;
    min-height: 200px;
}
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
/* Public/unauthenticated shell — passthrough wrapper. Each page (Error,
   LockScreen, Login, etc.) paints its own background and centres its own
   card; this just establishes a clean Orcanex baseline (font, text colour)
   without the Hyper `.authentication-bg` body modifier the layout used to
   apply. */

.orcanex-empty-shell[b-uxra0qe7r5] {
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
}
/* /Components/Layout/GlobalBanner.razor.rz.scp.css */
.banner-popup-container[b-3b489t806a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 2000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.banner-popup-alert[b-3b489t806a] {
    margin: 1rem auto;
    min-width: 320px;
    max-width: 600px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-8glel1iltx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-8glel1iltx] {
    flex: 1;
}

.sidebar[b-8glel1iltx] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-8glel1iltx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-8glel1iltx]  a, .top-row[b-8glel1iltx]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-8glel1iltx]  a:hover, .top-row[b-8glel1iltx]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-8glel1iltx]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-8glel1iltx] {
        justify-content: space-between;
    }

    .top-row[b-8glel1iltx]  a, .top-row[b-8glel1iltx]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-8glel1iltx] {
        flex-direction: row;
    }

    .sidebar[b-8glel1iltx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-8glel1iltx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-8glel1iltx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-8glel1iltx], article[b-8glel1iltx] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-8glel1iltx] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-8glel1iltx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-l3jh2ru0xn] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-l3jh2ru0xn] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-l3jh2ru0xn] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-l3jh2ru0xn] {
    font-size: 1.1rem;
}

.bi[b-l3jh2ru0xn] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-l3jh2ru0xn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-l3jh2ru0xn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-l3jh2ru0xn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-file-text-nav-menu[b-l3jh2ru0xn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.bi-compass-nav-menu[b-l3jh2ru0xn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-compass' viewBox='0 0 16 16'%3E%3Cpath d='M8 16.016a7.5 7.5 0 0 0 1.962-14.74A1 1 0 0 0 9 0H7a1 1 0 0 0-.962 1.276A7.5 7.5 0 0 0 8 16.016zm6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z'/%3E%3Cpath d='m6.94 7.44 4.95-2.83-2.83 4.95-4.949 2.831 2.828-4.95z'/%3E%3C/svg%3E");
}

.nav-item[b-l3jh2ru0xn] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-l3jh2ru0xn] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-l3jh2ru0xn] {
        padding-bottom: 1rem;
    }

    .nav-item[b-l3jh2ru0xn]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-l3jh2ru0xn]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-l3jh2ru0xn]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-l3jh2ru0xn] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-l3jh2ru0xn] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-l3jh2ru0xn] {
        display: none;
    }

    .nav-scrollable[b-l3jh2ru0xn] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/Orcanex/AppFrame.razor.rz.scp.css */
.orcanex-frame[b-tolr1g0rm7] {
    position: fixed;
    inset: 0;
    display: flex;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 1rem;
    overflow: hidden;
}

.orcanex-frame-main[b-tolr1g0rm7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.orcanex-frame-content[b-tolr1g0rm7] {
    flex: 1;
    overflow: auto;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}

/* Mobile shell — the IconRail is hidden (see IconRail.razor.css) so the
   frame is effectively a single column. The mobile drawer overlays
   (position: fixed inset:0 inside OrcanexDrawer) so we don't need extra
   layout here.

   The bottom-tab nav clearance is NOT applied here — it's owned by
   tokens.css under a global selector that targets every page root by
   class. Putting it here in scoped CSS was unreliable because some
   pages set `min-height: 100%` on their root, which causes the flex
   container to swallow padding-bottom and ::after spacers (Chromium
   bug: https://bugs.chromium.org/p/chromium/issues/detail?id=748518).
   The global rule in tokens.css applies the safe area to every known
   page wrapper directly — guaranteed to render above the tab strip. */
/* /Components/Layout/Orcanex/CommandPalette.razor.rz.scp.css */
[b-k5ebjvl9lz] .orcanex-cmdk { max-width: 600px; }
[b-k5ebjvl9lz] .orcanex-cmdk-body { padding: 0 !important; }

.orcanex-cmdk-search[b-k5ebjvl9lz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.orcanex-cmdk-input[b-k5ebjvl9lz] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1.08rem;
    background: transparent;
    color: var(--color-text);
}

.orcanex-cmdk-input[b-k5ebjvl9lz]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-cmdk-kbd[b-k5ebjvl9lz] {
    font-size: 0.77rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: inherit;
}

.orcanex-cmdk-results[b-k5ebjvl9lz] {
    padding: 8px;
    max-height: 360px;
    overflow-y: auto;
}

.orcanex-cmdk-section[b-k5ebjvl9lz] {
    padding: 8px 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orcanex-cmdk-item[b-k5ebjvl9lz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
}

.orcanex-cmdk-item:hover[b-k5ebjvl9lz] {
    background: var(--color-bg);
}

.orcanex-cmdk-empty[b-k5ebjvl9lz] {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* /Components/Layout/Orcanex/IconRail.razor.rz.scp.css */
.orcanex-rail-icon[b-y3ixqkf32q] {
    width: var(--w-icon-rail);
    flex-shrink: 0;
    background: var(--color-rail-bg);
    color: var(--color-rail-fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    height: 100vh;
    /* Popouts overflow this rail; they're positioned absolute inside each
       wrapper and need to escape the rail's right edge. */
    overflow: visible;
    transition: width var(--duration-hover) var(--ease-hover);
}

/* Wide-rail mode — flips the rail wider, lets brand/items fill it
   horizontally, and shows the active workspace's sub-menu inline. */
.orcanex-rail-icon.orcanex-rail-expanded[b-y3ixqkf32q] {
    width: var(--w-rail-expanded);
    align-items: stretch;
    padding: 12px 10px;
    overflow-y: auto;
}

.orcanex-rail-brand[b-y3ixqkf32q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    text-decoration: none;
}

.orcanex-rail-expanded .orcanex-rail-brand[b-y3ixqkf32q] {
    /* In wide-rail mode the brand sits flush left and uses the full wordmark.
       Padding lines it up with the menu rows below, height matches the icon
       rail's brand tile (36px) so the layout doesn't jump on toggle. */
    justify-content: flex-start;
    padding: 0 6px;
    margin-bottom: 12px;
    height: 36px;
}

.orcanex-rail-brand-tile[b-y3ixqkf32q] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    /* Accent-aware: follows the user's chosen accent so the brand tile
       reflects the selected palette (and dark-mode variant). */
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: white;
    font-weight: 700;
    font-size: 1.23rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Brand logo image — sits inside the accent-tinted tile and is clamped to
   fit. object-fit: contain preserves aspect ratio without distortion;
   padding keeps the logo off the tile edges. */
.orcanex-rail-brand-logo[b-y3ixqkf32q] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
    display: block;
    /* The Examinex/Orca logos render dark on transparent, so we invert them
       to show light against the accent-tinted tile. */
    filter: brightness(0) invert(1);
}

/* Wide-rail wordmark — full Examinex / Orca logo, no tile, inverted to white
   so it reads against the dark rail background. */
.orcanex-rail-brand-wordmark[b-y3ixqkf32q] {
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.orcanex-rail-brand-fallback[b-y3ixqkf32q] {
    color: var(--color-rail-fg);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.2px;
}

.orcanex-rail-icon-list[b-y3ixqkf32q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.orcanex-rail-expanded .orcanex-rail-icon-list[b-y3ixqkf32q] {
    align-items: stretch;
    width: 100%;
    gap: 2px;
}

/* Each rail entry — icon + popout — sits in its own wrapper so the popout
   can be positioned absolute relative to the icon. */
.orcanex-rail-item-wrapper[b-y3ixqkf32q] {
    position: relative;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orcanex-rail-expanded .orcanex-rail-item-wrapper[b-y3ixqkf32q] {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.orcanex-rail-icon-item[b-y3ixqkf32q] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--color-rail-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.orcanex-rail-icon-item:hover[b-y3ixqkf32q] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
}

.orcanex-rail-icon-item-active[b-y3ixqkf32q] {
    background: var(--color-rail-active);
    color: var(--color-rail-active-fg);
}

/* Wrap the icon in a positioning span so the badge can anchor to it whether
   we're collapsed (square button) or expanded (full-width row). */
.orcanex-rail-icon-item-icon[b-y3ixqkf32q] {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The label is hidden by default (collapsed mode) — wide-rail mode flips it
   on. We rely on display rather than visibility so screen-readers don't
   announce a duplicate label next to aria-label in collapsed mode. */
.orcanex-rail-icon-item-label[b-y3ixqkf32q] {
    display: none;
}

.orcanex-rail-expanded .orcanex-rail-icon-item[b-y3ixqkf32q] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    justify-content: flex-start;
    gap: 10px;
    font-size: 0.96rem;
    font-weight: 500;
}

.orcanex-rail-expanded .orcanex-rail-icon-item-label[b-y3ixqkf32q] {
    display: inline;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-rail-icon-badge[b-y3ixqkf32q] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    padding: 0 3px;
    background: var(--color-danger);
    color: white;
    font-size: 0.69rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.orcanex-rail-icon-spacer[b-y3ixqkf32q] { flex: 1; }

.orcanex-rail-icon-user[b-y3ixqkf32q] {
    margin-top: 6px;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Burger toggle — anchored at the bottom of the rail, switches
   between the compact icon rail and the wide rail.
   ============================================================ */
.orcanex-rail-toggle[b-y3ixqkf32q] {
    margin-top: 6px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--color-rail-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.orcanex-rail-toggle:hover[b-y3ixqkf32q] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
}

.orcanex-rail-toggle-icon[b-y3ixqkf32q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.orcanex-rail-toggle-label[b-y3ixqkf32q] {
    display: none;
}

.orcanex-rail-expanded .orcanex-rail-toggle[b-y3ixqkf32q] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    justify-content: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 500;
}

.orcanex-rail-expanded .orcanex-rail-toggle-label[b-y3ixqkf32q] {
    display: inline;
}

/* ============================================================
   Hover popout — anchored to the right of each rail item.
   The container has padding-left to create a hover bridge so
   the cursor can travel from the icon to the visible card
   without losing :hover state.
   ============================================================ */

.orcanex-rail-popout[b-y3ixqkf32q] {
    position: absolute;
    left: 100%;
    /* Anchor to the top of the icon by default so popouts grow downward and
       stay on-screen for the icons near the top of the rail. The icon is
       40px tall, so a -4px top aligns the popout's first item visually with
       the icon's centre. The bottom-anchored variant below handles the
       settings cog + avatar at the bottom of the rail. */
    top: -4px;
    padding-left: 10px;            /* hover bridge */
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-hover) var(--ease-hover),
                visibility 0s linear var(--duration-hover);
    pointer-events: none;
    /* The card inside has its own fixed-pixel max-height so position-
       relative-to-icon doesn't push it off-screen on smaller viewports. */
}

.orcanex-rail-item-wrapper:hover .orcanex-rail-popout[b-y3ixqkf32q],
.orcanex-rail-popout:hover[b-y3ixqkf32q] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--duration-hover) var(--ease-hover);
}

/* Suppress hover popouts in wide-rail mode — the active workspace's sub-menu
   already shows inline, and inactive workspaces should navigate on click. */
.orcanex-rail-expanded .orcanex-rail-popout[b-y3ixqkf32q] {
    display: none;
}

.orcanex-rail-popout-card[b-y3ixqkf32q] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    width: 240px;
    overflow: hidden;
    color: var(--color-text);
    /* Card uses flex column so the header stays pinned and the body fills
       the rest with overflow:auto. Fixed pixel max-height (not vh) is
       chosen tight enough to fit even from the lowest icon in the rail
       (Admin sits ~492px from viewport top); long lists scroll inside. */
    display: flex;
    flex-direction: column;
    max-height: 460px;
}

.orcanex-rail-popout-header[b-y3ixqkf32q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--color-border-soft);
    flex-shrink: 0;
}

.orcanex-rail-popout-name[b-y3ixqkf32q] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.orcanex-rail-popout-sub[b-y3ixqkf32q] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.orcanex-rail-popout-body[b-y3ixqkf32q] {
    padding: 6px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.orcanex-rail-popout-group + .orcanex-rail-popout-group[b-y3ixqkf32q] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-soft);
}

.orcanex-rail-popout-group-label[b-y3ixqkf32q] {
    padding: 4px 10px 4px;
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.orcanex-rail-popout-item[b-y3ixqkf32q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.orcanex-rail-popout-item:hover[b-y3ixqkf32q] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-rail-popout-item-active[b-y3ixqkf32q] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

.orcanex-rail-popout-item-active[b-y3ixqkf32q]  .orcanex-icon {
    color: var(--color-accent);
}

.orcanex-rail-popout-item-bullet[b-y3ixqkf32q] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.orcanex-rail-popout-item-label[b-y3ixqkf32q] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-rail-popout-item-count[b-y3ixqkf32q] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.orcanex-rail-popout-item-danger[b-y3ixqkf32q] {
    color: var(--color-danger);
}
.orcanex-rail-popout-item-danger:hover[b-y3ixqkf32q] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.orcanex-rail-popout-divider[b-y3ixqkf32q] {
    margin: 6px 0;
    height: 1px;
    background: var(--color-border-soft);
}

.orcanex-rail-popout-empty[b-y3ixqkf32q] {
    padding: 12px 14px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

/* ============================================================
   Inline sub-menu — only rendered in wide-rail mode for the
   currently active workspace. Indented under the active rail
   item so it visually belongs to it.
   ============================================================ */
.orcanex-rail-inline-submenu[b-y3ixqkf32q] {
    display: flex;
    flex-direction: column;
    padding: 4px 0 6px 8px;
    gap: 1px;
}

.orcanex-rail-inline-group + .orcanex-rail-inline-group[b-y3ixqkf32q] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.orcanex-rail-inline-group-label[b-y3ixqkf32q] {
    padding: 4px 10px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-rail-fg-muted);
}

.orcanex-rail-inline-item[b-y3ixqkf32q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 22px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-rail-fg-muted);
    text-decoration: none;
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.orcanex-rail-inline-item:hover[b-y3ixqkf32q] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
}

.orcanex-rail-inline-item-active[b-y3ixqkf32q] {
    background: var(--color-rail-active);
    color: var(--color-rail-active-fg);
    font-weight: 600;
}

.orcanex-rail-inline-item-bullet[b-y3ixqkf32q] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}

.orcanex-rail-inline-item-label[b-y3ixqkf32q] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-rail-inline-item-count[b-y3ixqkf32q] {
    font-size: 0.82rem;
    color: var(--color-rail-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* Anchor popouts to the BOTTOM of the icon for items below the spacer
   (settings cog + user avatar) so they don't fall off the bottom of the
   viewport. */
.orcanex-rail-icon-spacer ~ .orcanex-rail-item-wrapper .orcanex-rail-popout[b-y3ixqkf32q] {
    top: auto;
    bottom: -4px;
}

/* Lower icons in the workspace nav (Master data, Admin) are too close to the bottom of the
   rail for a top-anchored popout to fit on-screen, so they grow upward instead.

   The :nth-child(n+9) guard is essential. The flex:1 spacer below packs the workspace items at
   the TOP of the rail, so an item's index tracks its vertical position, and bottom-anchoring is
   only safe for genuinely-low items (≈9th onward — far enough down that a tall popout growing
   upward still clears the top of the viewport). Without the guard, the last-two rule also fired
   on SHORT menus: a Client sees only Dashboard + Cases, so its "last two" sit at the very top of
   the rail and their popouts grew up and off the top of the page (invisible). SuperAdmin's
   Master data (9th) + Admin (10th) still bottom-anchor exactly as before. */
.orcanex-rail-icon-list .orcanex-rail-item-wrapper:nth-child(n+9):nth-last-child(-n+2) .orcanex-rail-popout[b-y3ixqkf32q] {
    top: auto;
    bottom: -4px;
}

/* ============================================================
   Viewport-aware overrides — see DOCS/Architecture/responsive-design.md.
   - Mobile: rail hidden entirely (replaced by the burger drawer in TopBar
     and the bottom-tab nav).
   - Tablet: rail visible but forced collapsed regardless of the user's
     RailExpanded preference. Inline sub-menu hidden, expanded width
     reverts to the icon-rail width, and the brand reverts to the small
     accent-tinted tile.
   ============================================================ */
:root[data-viewport="mobile"] .orcanex-rail-icon[b-y3ixqkf32q],
:root[data-viewport="mobile-l"] .orcanex-rail-icon[b-y3ixqkf32q] {
    display: none;
}

:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded[b-y3ixqkf32q] {
    width: var(--w-icon-rail);
    align-items: center;
    padding: 12px 0;
    overflow-y: visible;
}
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-icon-list[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-icon-list[b-y3ixqkf32q] {
    align-items: center;
    width: auto;
}
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-item-wrapper[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-item-wrapper[b-y3ixqkf32q] {
    width: 40px;
    flex-direction: row;
    align-items: center;
}
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-icon-item[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-icon-item[b-y3ixqkf32q] {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-icon-item-label[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-icon-item-label[b-y3ixqkf32q],
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-inline-submenu[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-inline-submenu[b-y3ixqkf32q],
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-toggle-label[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-toggle-label[b-y3ixqkf32q],
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-brand-wordmark[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-brand-wordmark[b-y3ixqkf32q] {
    display: none;
}
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-brand[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-brand[b-y3ixqkf32q] {
    justify-content: center;
    padding: 0;
}
:root[data-viewport="tablet"]   .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-toggle[b-y3ixqkf32q],
:root[data-viewport="tablet-l"] .orcanex-rail-icon.orcanex-rail-expanded .orcanex-rail-toggle[b-y3ixqkf32q] {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}
/* /Components/Layout/Orcanex/MainNav.razor.rz.scp.css */
.orcanex-mainnav[b-rk1vo3949p] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-rail-bg);
    color: var(--color-rail-fg);
}

.orcanex-mainnav-brand[b-rk1vo3949p] {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 56px;
}

.orcanex-mainnav-brand-logo[b-rk1vo3949p] {
    height: 28px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    /* Logos render dark on transparent — invert so they show light against
       the rail-tinted background. Same trick as the IconRail tile. */
    filter: brightness(0) invert(1);
}

.orcanex-mainnav-brand-fallback[b-rk1vo3949p] {
    color: var(--color-rail-fg);
    font-weight: 700;
    font-size: 1.15rem;
}

.orcanex-mainnav-list[b-rk1vo3949p] {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    flex: 1;
}

.orcanex-mainnav-item + .orcanex-mainnav-item[b-rk1vo3949p] {
    margin-top: 2px;
}

.orcanex-mainnav-link[b-rk1vo3949p] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    height: var(--touch-target);
    border-radius: var(--radius-md);
    color: var(--color-rail-fg-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-mainnav-link:hover[b-rk1vo3949p] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
}

.orcanex-mainnav-link-active[b-rk1vo3949p] {
    background: var(--color-rail-active);
    color: var(--color-rail-active-fg);
    font-weight: 600;
}

/* Toggle variant — renders as a <button>, not <a>. Resets default browser
   button styles so it matches the <a> sibling. */
button.orcanex-mainnav-link.orcanex-mainnav-link-toggle[b-rk1vo3949p] {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

button.orcanex-mainnav-link.orcanex-mainnav-link-toggle:hover[b-rk1vo3949p] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
}

button.orcanex-mainnav-link.orcanex-mainnav-link-toggle.orcanex-mainnav-link-active[b-rk1vo3949p] {
    background: var(--color-rail-active);
    color: var(--color-rail-active-fg);
}

/* Chevron at the right of an expandable parent — rotates 180° when its
   sub-menu is expanded. */
.orcanex-mainnav-chevron[b-rk1vo3949p] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-rail-fg-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.orcanex-mainnav-link-toggle.is-expanded .orcanex-mainnav-chevron[b-rk1vo3949p] {
    transform: rotate(180deg);
}

.orcanex-mainnav-icon[b-rk1vo3949p] {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.orcanex-mainnav-badge[b-rk1vo3949p] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    padding: 0 3px;
    background: var(--color-danger);
    color: white;
    font-size: 0.69rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.orcanex-mainnav-label[b-rk1vo3949p] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-mainnav-active-mark[b-rk1vo3949p] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Sub-menu nested under the active workspace. */
.orcanex-mainnav-sub[b-rk1vo3949p] {
    display: flex;
    flex-direction: column;
    padding: var(--space-1) 0 var(--space-2) var(--space-3);
    gap: 1px;
}

.orcanex-mainnav-sub-group-label[b-rk1vo3949p] {
    padding: var(--space-1) var(--space-3);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-rail-fg-muted);
    margin-top: var(--space-2);
}

.orcanex-mainnav-sub-link[b-rk1vo3949p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: var(--touch-target);
    border-radius: var(--radius-sm);
    color: var(--color-rail-fg-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-mainnav-sub-link:hover[b-rk1vo3949p] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
}

.orcanex-mainnav-sub-link-active[b-rk1vo3949p] {
    background: var(--color-rail-active);
    color: var(--color-rail-active-fg);
    font-weight: 600;
}

.orcanex-mainnav-sub-count[b-rk1vo3949p] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-rail-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Mobile-only: user identity card at the top of the drawer.
   The desktop topbar still owns the avatar dropdown there, so the
   .show-mobile-only utility hides this block at tablet+.
   ============================================================ */
.orcanex-mainnav-user[b-rk1vo3949p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.orcanex-mainnav-user-text[b-rk1vo3949p] {
    flex: 1;
    min-width: 0;
}

.orcanex-mainnav-user-name[b-rk1vo3949p] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-rail-fg);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mainnav-user-email[b-rk1vo3949p] {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-rail-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Mobile-only: chevron toggle on the right of the user identity card.
   Tapping it expands / collapses the account-actions panel below.
   Matches the 36 × 36 icon-button shape rule from CLAUDE.md so it
   reads as part of the same visual rhythm as the rest of the page
   chrome action buttons.
   ============================================================ */
.orcanex-mainnav-user-toggle[b-rk1vo3949p] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-rail-fg-muted);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-mainnav-user-toggle:hover[b-rk1vo3949p],
.orcanex-mainnav-user-toggle:focus-visible[b-rk1vo3949p] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
    outline: none;
}

.orcanex-mainnav-user-toggle .mdi[b-rk1vo3949p] {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.orcanex-mainnav-user-toggle.is-expanded .mdi[b-rk1vo3949p] {
    transform: rotate(180deg);
}

/* ============================================================
   Mobile-only: account-actions panel (My account / Settings / Support /
   Lock session / Sign out). Sits directly under the user identity card
   and only renders when the chevron toggle is expanded — keeping the
   bottom of the drawer free for the workspace nav.
   ============================================================ */
.orcanex-mainnav-account-panel[b-rk1vo3949p] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(0, 0, 0, 0.12);
}

.orcanex-mainnav-account-item[b-rk1vo3949p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    height: var(--touch-target);
    border-radius: var(--radius-sm);
    color: var(--color-rail-fg-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-mainnav-account-item:hover[b-rk1vo3949p],
.orcanex-mainnav-account-item:focus-visible[b-rk1vo3949p] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-rail-fg);
    outline: none;
}

.orcanex-mainnav-account-item-danger[b-rk1vo3949p] {
    color: var(--color-rail-fg-muted);
}

.orcanex-mainnav-account-item-danger:hover[b-rk1vo3949p],
.orcanex-mainnav-account-item-danger:focus-visible[b-rk1vo3949p] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.orcanex-mainnav-account-icon[b-rk1vo3949p] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* /Components/Layout/Orcanex/MobileBottomTabs.razor.rz.scp.css */
/* Mobile-only bottom-tab navigation. Hidden by default; revealed at the
   mobile / mobile-l viewports via the attribute selector below.

   The bar is fixed to the bottom of the viewport, rendered above the page
   content so the user can always reach the four most-used destinations
   without opening the burger drawer first. Safe-area inset padding keeps
   the bar above the iOS home indicator.

   AppFrame already adds padding-bottom: calc(var(--h-mobile-tabs) +
   env(safe-area-inset-bottom) + var(--space-3)) on .orcanex-frame-content
   at mobile so the last row of any list / form isn't hidden underneath
   this bar — note the safe-area-inset MUST match what we use for the
   bar's own height calc above, or content gets clipped on iOS devices
   with a home indicator. The trailing space-3 adds visual breathing
   room so the final field doesn't visually butt up against the bar.
*/
.orcanex-mobile-tabs[b-9ili2spj0v] {
    display: none;
}

:root[data-viewport="mobile"]   .orcanex-mobile-tabs[b-9ili2spj0v],
:root[data-viewport="mobile-l"] .orcanex-mobile-tabs[b-9ili2spj0v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-panel);
    border-top: 1px solid var(--color-border);
    z-index: var(--z-topbar);
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    height: calc(var(--h-mobile-tabs) + env(safe-area-inset-bottom, 0px));
    /* Subtle shadow so the bar reads as a layer above the content. */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.orcanex-mobile-tab[b-9ili2spj0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--h-mobile-tabs);
    padding: 4px;
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover);
    /* Touch target floor — entire cell is the hit area, well above 44px. */
    min-height: var(--touch-target);
}

.orcanex-mobile-tab:hover[b-9ili2spj0v],
.orcanex-mobile-tab:focus-visible[b-9ili2spj0v] {
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
}

.orcanex-mobile-tab-active[b-9ili2spj0v] {
    color: var(--color-accent);
}

.orcanex-mobile-tab-label[b-9ili2spj0v] {
    font-weight: 500;
    line-height: 1;
}

/* ============================================================
   Hide the bottom-tab nav whenever any modal is open. The
   `body.orcanex-modal-active` class is set / cleared by the
   MutationObserver in user-settings.js (`startModalWatcher`),
   which detects the standard modal patterns:
     - .modal.show / .modal.d-block (Bootstrap-legacy modals)
     - .orcanex-modal-backdrop      (OrcanexModal primitive)
     - [data-modal-active]          (escape hatch for bespoke modals)
   This is the robust path — `body.modal-open` doesn't fire for
   Razor-conditional modals (no Bootstrap JS to set it) and
   CSS `:has()` is unreliable across older browsers + Blazor's
   CSS isolation transformer. The tabs would otherwise overlay
   the modal's bottom rows and obscure save/cancel buttons.
   ============================================================ */
body.orcanex-modal-active .orcanex-mobile-tabs[b-9ili2spj0v] {
    display: none !important;
}
/* /Components/Layout/Orcanex/MobileNotificationsPanel.razor.rz.scp.css */
.orcanex-notif-panel[b-etd71oxxr2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.orcanex-notif-actions[b-etd71oxxr2] {
    display: flex;
    justify-content: flex-end;
}

.orcanex-notif-list[b-etd71oxxr2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.orcanex-notif-item[b-etd71oxxr2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    border: 1px solid var(--color-border-soft);
    cursor: pointer;
    position: relative;
    transition: background var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-notif-item:hover[b-etd71oxxr2] {
    background: var(--color-bg);
    border-color: var(--color-border);
}

.orcanex-notif-item.is-unread[b-etd71oxxr2] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
}

.orcanex-notif-icon[b-etd71oxxr2] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.orcanex-notif-content[b-etd71oxxr2] {
    flex: 1;
    min-width: 0;
}

.orcanex-notif-title[b-etd71oxxr2] {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.orcanex-notif-message[b-etd71oxxr2] {
    margin-top: 2px;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.orcanex-notif-time[b-etd71oxxr2] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

.orcanex-notif-dot[b-etd71oxxr2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    margin-top: 6px;
}
/* /Components/Layout/Orcanex/SubRail.razor.rz.scp.css */
.orcanex-rail-sub[b-2erl1r0ova] {
    width: var(--w-sub-rail);
    flex-shrink: 0;
    background: var(--color-panel);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.orcanex-rail-sub-header[b-2erl1r0ova] {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--color-border-soft);
    flex-shrink: 0;
}

.orcanex-rail-sub-name[b-2erl1r0ova] {
    margin-top: 3px;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-rail-sub-body[b-2erl1r0ova] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
}

.orcanex-rail-sub-group[b-2erl1r0ova] {
    margin-bottom: 14px;
}

.orcanex-rail-sub-group-label[b-2erl1r0ova] {
    padding: 4px 10px 6px;
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.orcanex-rail-sub-item[b-2erl1r0ova] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 2px;
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.orcanex-rail-sub-item:hover[b-2erl1r0ova] {
    background: var(--color-bg);
}

.orcanex-rail-sub-item-active[b-2erl1r0ova] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

.orcanex-rail-sub-item-active[b-2erl1r0ova]  .orcanex-icon {
    color: var(--color-accent);
}

.orcanex-rail-sub-item-label[b-2erl1r0ova] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-rail-sub-item-count[b-2erl1r0ova] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.orcanex-rail-sub-bullet[b-2erl1r0ova] {
    width: 14px;
    height: 14px;
    display: inline-block;
    flex-shrink: 0;
}
/* /Components/Layout/Orcanex/TopBar.razor.rz.scp.css */
.orcanex-topbar[b-moc9qzlnsh] {
    height: var(--h-topbar);
    flex-shrink: 0;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: var(--z-topbar);
}

/* Burger button — only shown at mobile/tablet. Hidden at desktop where the
   IconRail is the navigation. */
.orcanex-topbar-burger[b-moc9qzlnsh] {
    display: none;
    width: var(--touch-target);
    height: var(--touch-target);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: -8px;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-topbar-burger:hover[b-moc9qzlnsh] {
    background: var(--color-bg);
}

:root[data-viewport="mobile"]   .orcanex-topbar-burger[b-moc9qzlnsh],
:root[data-viewport="mobile-l"] .orcanex-topbar-burger[b-moc9qzlnsh],
:root[data-viewport="tablet"]   .orcanex-topbar-burger[b-moc9qzlnsh],
:root[data-viewport="tablet-l"] .orcanex-topbar-burger[b-moc9qzlnsh] {
    display: inline-flex;
}

.orcanex-topbar-crumbs[b-moc9qzlnsh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    min-width: 0;
}

.orcanex-topbar-crumb[b-moc9qzlnsh] { color: var(--color-text-muted); }
.orcanex-topbar-crumb-active[b-moc9qzlnsh] { color: var(--color-text); font-weight: 500; }
.orcanex-topbar-crumb-sep[b-moc9qzlnsh] { color: var(--color-text-subtle); }

.orcanex-topbar-spacer[b-moc9qzlnsh] { flex: 1; }

.orcanex-topbar-search[b-moc9qzlnsh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text-muted);
    min-width: 280px;
    cursor: pointer;
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-topbar-search:hover[b-moc9qzlnsh] { border-color: var(--color-accent); }

.orcanex-topbar-search-text[b-moc9qzlnsh] {
    flex: 1;
    text-align: left;
    color: var(--color-text-subtle);
}

.orcanex-topbar-kbd[b-moc9qzlnsh] {
    font-size: 0.77rem;
    font-family: var(--font-family);
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.orcanex-topbar-divider[b-moc9qzlnsh] {
    width: 1px;
    height: 20px;
    background: var(--color-border);
}

.orcanex-topbar-icon-btn[b-moc9qzlnsh] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.orcanex-topbar-icon-btn:hover[b-moc9qzlnsh] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-topbar-bell-wrap[b-moc9qzlnsh] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}

/* Avatar dropdown wrapper. The button itself is round; the menu hangs below
   right-aligned to the avatar. */
.orcanex-topbar-user-wrap[b-moc9qzlnsh] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.orcanex-topbar-user[b-moc9qzlnsh] {
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.orcanex-topbar-user:focus-visible[b-moc9qzlnsh] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

[b-moc9qzlnsh] .orcanex-topbar-user-menu {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-2);
    min-width: 240px;
    margin-top: var(--space-2) !important;
    font-family: var(--font-family);
    color: var(--color-text);
    /* Sit above page-level chrome like the case-form presence avatars and any
       sticky footer/toolbar. The drawer / modal layers (--z-drawer = 40,
       --z-modal = 50) stay above this. */
    z-index: 1050;
}

[b-moc9qzlnsh] .orcanex-topbar-user-identity {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

[b-moc9qzlnsh] .orcanex-topbar-user-identity-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-moc9qzlnsh] .orcanex-topbar-user-identity-email {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-moc9qzlnsh] .orcanex-topbar-user-divider {
    height: 1px;
    background: var(--color-border-soft);
    margin: var(--space-2) calc(-1 * var(--space-2));
}

[b-moc9qzlnsh] .orcanex-topbar-user-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover);
    /* Reset for &lt;button&gt; variants of this item (e.g. Lock session) so they
       sit flush with the &lt;a&gt; siblings — no native button chrome. */
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

[b-moc9qzlnsh] .orcanex-topbar-user-item:hover,
[b-moc9qzlnsh] .orcanex-topbar-user-item:focus-visible {
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
}

[b-moc9qzlnsh] .orcanex-topbar-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-muted);
}

[b-moc9qzlnsh] .orcanex-topbar-user-item:hover .orcanex-topbar-user-icon {
    color: var(--color-accent);
}

/* Dev-only system switcher mounted inline in the topbar (between the spacer
   and the search box). The DevSystemSwitcher component renders a Bootstrap
   dropdown styled with btn-outline-warning; we just constrain its width and
   align it vertically with the rest of the topbar chrome. */
[b-moc9qzlnsh] .orcanex-topbar-devswitch {
    flex-shrink: 0;
}

[b-moc9qzlnsh] .orcanex-topbar-devswitch .dev-system-switcher {
    /* The component's own width: 100% inside its dropdown wrapper would
       stretch unbounded inside our flex row — clamp to a sensible inline size. */
    width: auto;
}

[b-moc9qzlnsh] .orcanex-topbar-devswitch .dev-system-switcher .dropdown {
    width: auto;
}

[b-moc9qzlnsh] .orcanex-topbar-devswitch .dev-system-switcher .btn {
    width: auto;
    height: 30px;
    padding: 0 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ============================================================
   Mobile: hide the global topbar entirely. The mobile shell pattern is:
   bottom-tab nav for navigation + per-page <MobilePageHeader> at the top
   for on-page actions. Burger, global search, breadcrumbs, settings link,
   theme toggle, bell and avatar all move elsewhere (avatar → More drawer,
   bell → Notifications bottom-tab). The topbar is dead weight on a phone
   so we reclaim its 52 px for the page itself.
   ============================================================ */
:root[data-viewport="mobile"] .orcanex-topbar[b-moc9qzlnsh],
:root[data-viewport="mobile-l"] .orcanex-topbar[b-moc9qzlnsh] {
    display: none;
}

/* ============================================================
   Tablet: keep the topbar but compress it. Burger remains so users can
   reach the drawer when the rail is force-collapsed; search shrinks but
   stays functional. Bell and avatar stay too — tablet is wide enough.
   ============================================================ */
:root[data-viewport="tablet"] .orcanex-topbar[b-moc9qzlnsh],
:root[data-viewport="tablet-l"] .orcanex-topbar[b-moc9qzlnsh] {
    padding: 0 var(--space-3);
    gap: var(--space-2);
}

:root[data-viewport="tablet"] .orcanex-topbar-search[b-moc9qzlnsh] {
    min-width: 200px;
}

:root[data-viewport="tablet"]   .orcanex-topbar-devswitch[b-moc9qzlnsh],
:root[data-viewport="tablet-l"] .orcanex-topbar-devswitch[b-moc9qzlnsh] {
    display: none;
}
/* /Components/Layout/PopupEditorLayout.razor.rz.scp.css */
/* ── Popup editor layout — zero-chrome full-viewport shell ── */
.popup-editor-layout[b-5ezgz12chz] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #f4f5f7;
}
/* /Components/Layout/PublicFormLayout.razor.rz.scp.css */
.public-form-layout[b-wjlbn6oqp1] {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8fafc;
}
/* /Components/Layout/Specialists/Specialist_Biography.razor.rz.scp.css */
/* Biography tab — left column has the photo + two file pickers stacked,
   right column shows the PDF preview. The two columns share top alignment so
   the file inputs sit flush below the photo without random whitespace. */

.orcanex-specialist-bio-grid[b-5s0vwx2exn] {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

.orcanex-specialist-bio-uploads[b-5s0vwx2exn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-specialist-bio-photo[b-5s0vwx2exn] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.orcanex-specialist-bio-photo-img[b-5s0vwx2exn] {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.orcanex-specialist-bio-photo-placeholder[b-5s0vwx2exn] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orcanex-specialist-bio-feedback[b-5s0vwx2exn] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin-top: -4px;
}

.orcanex-specialist-bio-preview[b-5s0vwx2exn] {
    min-height: 0;
    display: flex;
}

.orcanex-specialist-bio-pdf[b-5s0vwx2exn] {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.orcanex-specialist-bio-empty[b-5s0vwx2exn] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

@media (max-width: 900px) {
    .orcanex-specialist-bio-grid[b-5s0vwx2exn] {
        grid-template-columns: 1fr;
    }
}

/* Mobile: shrink the photo so the upload card doesn't dominate the
   above-the-fold viewport, and clamp the PDF preview to a sensible
   height — 70 vh on a phone is most of the screen and feels claustrophobic.
   At mobile the preview is also less useful (users typically download
   the bio rather than read it in-frame). */
:root[data-viewport="mobile"]   .orcanex-specialist-bio-photo-img[b-5s0vwx2exn],
:root[data-viewport="mobile-l"] .orcanex-specialist-bio-photo-img[b-5s0vwx2exn],
:root[data-viewport="mobile"]   .orcanex-specialist-bio-photo-placeholder[b-5s0vwx2exn],
:root[data-viewport="mobile-l"] .orcanex-specialist-bio-photo-placeholder[b-5s0vwx2exn] {
    width: 112px;
    height: 112px;
}

:root[data-viewport="mobile"]   .orcanex-specialist-bio-pdf[b-5s0vwx2exn],
:root[data-viewport="mobile-l"] .orcanex-specialist-bio-pdf[b-5s0vwx2exn] {
    height: 50vh;
    min-height: 320px;
}
/* /Components/Layout/Specialists/Specialist_Contact.razor.rz.scp.css */
/* Specialist_Contact — Orcanex */

.orcanex-specialist-tab[b-yrfv7t0l7f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-form-grid[b-yrfv7t0l7f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.orcanex-form-grid-full[b-yrfv7t0l7f] {
    grid-column: 1 / -1;
}

.orcanex-input-group[b-yrfv7t0l7f] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.orcanex-flag[b-yrfv7t0l7f] {
    width: 24px;
    height: 18px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

[b-yrfv7t0l7f] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-yrfv7t0l7f] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-yrfv7t0l7f] .orcanex-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}
/* /Components/Layout/Specialists/Specialist_Details.razor.rz.scp.css */
/* Specialist_Details — Orcanex */

.orcanex-specialist-tab[b-iwna2cnato] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-form-grid[b-iwna2cnato] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.orcanex-form-grid-full[b-iwna2cnato] {
    grid-column: 1 / -1;
}

[b-iwna2cnato] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-iwna2cnato] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-iwna2cnato] .orcanex-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}
/* /Components/Layout/Specialists/Specialist_Documents.razor.rz.scp.css */
/* Specialist_Documents — mobile-stack reflow for the documents table.

   The 5-column documents table (File / Type / Uploaded / By / Actions) is
   unreadable at 375 px when forced through `.table-responsive` horizontal
   scroll. At mobile we collapse the table into a vertical list of cards —
   one card per document — and stamp each cell's column label on the left
   via the `data-label` attribute so users still know what each value is.

   Authored in this component's own .razor, so plain descendant selectors
   pick up the scope attribute correctly (no ::deep needed). */

:root[data-viewport="mobile"]   .specialist-doc-table thead[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table thead[b-335ptbyp4s] {
    display: none;
}

:root[data-viewport="mobile"]   .specialist-doc-table table[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table table[b-335ptbyp4s] {
    border: none;
}

:root[data-viewport="mobile"]   .specialist-doc-table tbody[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table tbody[b-335ptbyp4s] {
    display: block;
}

:root[data-viewport="mobile"]   .specialist-doc-table tbody tr[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table tbody tr[b-335ptbyp4s] {
    display: block;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

:root[data-viewport="mobile"]   .specialist-doc-table tbody td[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table tbody td[b-335ptbyp4s] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 4px 0;
    border: none;
    font-size: 0.88rem;
    width: 100%;
    text-align: left;
}

/* Stamp the column name as a small uppercase label before the value
   (data-label is set on each <td> in the markup). */
:root[data-viewport="mobile"]   .specialist-doc-table tbody td[b-335ptbyp4s]::before,
:root[data-viewport="mobile-l"] .specialist-doc-table tbody td[b-335ptbyp4s]::before {
    content: attr(data-label);
    flex: 0 0 78px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* File cell gets emphasis — bigger, no label needed. */
:root[data-viewport="mobile"]   .specialist-doc-table tbody td.specialist-doc-cell-file[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table tbody td.specialist-doc-cell-file[b-335ptbyp4s] {
    font-size: 1rem;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: var(--space-1);
}

:root[data-viewport="mobile"]   .specialist-doc-table tbody td.specialist-doc-cell-file[b-335ptbyp4s]::before,
:root[data-viewport="mobile-l"] .specialist-doc-table tbody td.specialist-doc-cell-file[b-335ptbyp4s]::before {
    display: none;
}

/* Actions cell — keep the Delete button right-aligned, separated by a
   subtle top divider, sized to the 36×36 touch target. */
:root[data-viewport="mobile"]   .specialist-doc-table tbody td.specialist-doc-cell-actions[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .specialist-doc-table tbody td.specialist-doc-cell-actions[b-335ptbyp4s] {
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border-soft);
}

:root[data-viewport="mobile"]   .specialist-doc-table tbody td.specialist-doc-cell-actions[b-335ptbyp4s]::before,
:root[data-viewport="mobile-l"] .specialist-doc-table tbody td.specialist-doc-cell-actions[b-335ptbyp4s]::before {
    display: none;
}

/* Per-row kebab/action buttons — square 36×36 panel shape matching the
   rest of the mobile chrome. The button is `btn-sm` + `btn-outline-danger`
   by default; we override the small Bootstrap padding so it sits as the
   exact same shape as other mobile action buttons. */
:root[data-viewport="mobile"]   .note-action-btn[b-335ptbyp4s],
:root[data-viewport="mobile-l"] .note-action-btn[b-335ptbyp4s] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
}
/* /Components/Layout/Specialists/Specialist_Financial.razor.rz.scp.css */
/* Specialist_Financial — Orcanex */

.orcanex-specialist-tab[b-1uqk0pyxbb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-form-grid[b-1uqk0pyxbb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

[b-1uqk0pyxbb] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-1uqk0pyxbb] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-1uqk0pyxbb] .orcanex-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}
/* /Components/Layout/Specialists/Specialist_Locations.razor.rz.scp.css */
/* Specialist_Locations — mobile polish.

   Desktop layout (≥ 992 px) is a two-column split: locations list on
   the left (col-lg-5), editor on the right (col-lg-7). Bootstrap's
   col-lg-* already collapses to col-12 below 992 px so the two panes
   stack naturally on tablet/mobile.

   Below: ensure the per-row delete button is the 36×36 panel-shape
   touch target and that the list / editor have comfortable spacing
   at mobile. */

/* Per-row delete button — already tagged `note-action-btn`. The global
   token-based 44 px touch-target floor handles sizing. We also drop
   the `btn-link` underline-on-hover behaviour inside the location card
   so the icon stays neutral. */
:root[data-viewport="mobile"]   .specialist-location-delete-btn[b-o73iz5vmo5],
:root[data-viewport="mobile-l"] .specialist-location-delete-btn[b-o73iz5vmo5] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none !important;
}

/* Mobile: the location cards should breathe a bit more between rows
   and the editor pane below them gets a top margin so the two stacks
   don't visually run together. */
:root[data-viewport="mobile"]   .col-lg-7[b-o73iz5vmo5],
:root[data-viewport="mobile-l"] .col-lg-7[b-o73iz5vmo5] {
    margin-top: var(--space-3);
}
/* /Components/Layout/Specialists/Specialist_Overview.razor.rz.scp.css */
/* Specialist_Overview — Orcanex */

.orcanex-specialist-tab[b-9m06lcvcy1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-overview-grid[b-9m06lcvcy1] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .orcanex-overview-grid[b-9m06lcvcy1] {
        grid-template-columns: 1fr;
    }
}

.orcanex-overview-side[b-9m06lcvcy1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-overview-profile[b-9m06lcvcy1] {
    text-align: center;
    padding: var(--space-3) 0;
}

.orcanex-overview-name[b-9m06lcvcy1] {
    margin: var(--space-3) 0 var(--space-1);
    font-size: 1.23rem;
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-overview-speciality[b-9m06lcvcy1] {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin: 0 0 var(--space-3);
}

.orcanex-overview-status-row[b-9m06lcvcy1] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.orcanex-overview-kpis[b-9m06lcvcy1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

[b-9m06lcvcy1] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-9m06lcvcy1] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-9m06lcvcy1] .orcanex-input[readonly],
[b-9m06lcvcy1] .orcanex-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

/* Mobile: compact the profile card so the side card (contact info /
   summary) doesn't sit way below the fold. The avatar shrinks from
   120 → 96 px square, the name + speciality drop one notch of size. */
:root[data-viewport="mobile"]   .orcanex-overview-name[b-9m06lcvcy1],
:root[data-viewport="mobile-l"] .orcanex-overview-name[b-9m06lcvcy1] {
    font-size: 1.08rem;
}

:root[data-viewport="mobile"]   .orcanex-overview-speciality[b-9m06lcvcy1],
:root[data-viewport="mobile-l"] .orcanex-overview-speciality[b-9m06lcvcy1] {
    font-size: 0.85rem;
}

:root[data-viewport="mobile"]   .orcanex-overview-profile[b-9m06lcvcy1],
:root[data-viewport="mobile-l"] .orcanex-overview-profile[b-9m06lcvcy1] {
    padding: var(--space-2) 0;
}
/* /Components/Layout/Specialists/Specialist_PersonalInformation.razor.rz.scp.css */
/* Specialist_PersonalInformation — Orcanex */

.orcanex-specialist-tab[b-1zqjqxm9j6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Add a clear gap between the lone-worker info banner and the field grid below */
[b-1zqjqxm9j6] .orcanex-specialist-personal-banner {
    margin-bottom: var(--space-3);
}

.orcanex-form-grid[b-1zqjqxm9j6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

[b-1zqjqxm9j6] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-1zqjqxm9j6] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-1zqjqxm9j6] .orcanex-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}
/* /Components/Layout/Specialists/Specialist_Secretary.razor.rz.scp.css */
/* Specialist_Secretary — Orcanex */

.orcanex-specialist-tab[b-9otyrmwtno] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-form-grid[b-9otyrmwtno] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.orcanex-form-grid-full[b-9otyrmwtno] {
    grid-column: 1 / -1;
}

.orcanex-input-group[b-9otyrmwtno] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.orcanex-flag[b-9otyrmwtno] {
    width: 24px;
    height: 18px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

[b-9otyrmwtno] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-9otyrmwtno] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-9otyrmwtno] .orcanex-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}
/* /Components/Layout/Specialists/Specialist_Services.razor.rz.scp.css */
/* Specialist_Services — wraps the four sub-tabs (Appointment Types, Service Types, Injury
   Types, Specialities) inside one card so the nav-tabs visually attach to the content
   panel instead of floating with their own border. */

.specialist-services-tabs-card[b-ve3opakrrd] {
    background: #fff;
    border: 1px solid #e5e8eb !important;
    border-radius: 0.5rem;
}

/* Card-header-tabs: lift the active tab so it sits flush with the content panel below
   (the bottom border of the active tab merges with the panel's top edge). */
.specialist-services-tabs-card .nav-tabs[b-ve3opakrrd] {
    border-bottom: 1px solid #e5e8eb;
    margin-bottom: 0;
}

.specialist-services-tabs-card .nav-tabs .nav-link[b-ve3opakrrd] {
    border: 1px solid transparent;
    border-bottom: none;
    color: #6c757d;
    background: transparent;
    margin-bottom: -1px;
}

.specialist-services-tabs-card .nav-tabs .nav-link:hover[b-ve3opakrrd] {
    color: #313a46;
    background: #f8f9fa;
    border-color: #f1f3f5 #f1f3f5 transparent;
}

.specialist-services-tabs-card .nav-tabs .nav-link.active[b-ve3opakrrd] {
    color: #3e60d5;
    background: #fff;
    border-color: #e5e8eb #e5e8eb #fff;
    font-weight: 600;
}

/* The inner SectionCards are still useful for grouping but shouldn't add a second border;
   drop the surrounding shadow so it visually merges with the parent card. */
.specialist-services-tabs-card .card-body[b-ve3opakrrd] {
    padding: 1rem;
}

/* ============================================================
   Mobile responsiveness — Specialist Services tab
   ============================================================ */

/* Sub-tab picker — show only at mobile, hidden at tablet+ (the
   `nav-tabs` strip with `hide-mobile` takes its place there). The
   picker sits at the top of the card with bottom-border separator. */
.specialist-services-mobile-subtab-picker[b-ve3opakrrd] {
    display: none;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

:root[data-viewport="mobile"]   .specialist-services-mobile-subtab-picker[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-mobile-subtab-picker[b-ve3opakrrd] {
    display: block;
}

/* Mobile-stack reflow for all service-sub-tab tables (Service Types,
   Injury Types, Specialities). Each <tr> becomes a card; thead hides.
   The Service Types rates table renders Cost / Client charge as two
   half-width cells on a second row inside each card. */
:root[data-viewport="mobile"]   .specialist-services-table[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table[b-ve3opakrrd] {
    max-height: none !important;
    border: none !important;
    overflow-y: visible !important;
}

:root[data-viewport="mobile"]   .specialist-services-table thead[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table thead[b-ve3opakrrd] {
    display: none;
}

:root[data-viewport="mobile"]   .specialist-services-table table[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table table[b-ve3opakrrd] {
    border: none;
}

:root[data-viewport="mobile"]   .specialist-services-table tbody[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table tbody[b-ve3opakrrd] {
    display: block;
}

:root[data-viewport="mobile"]   .specialist-services-table tbody tr[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table tbody tr[b-ve3opakrrd] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

:root[data-viewport="mobile"]   .specialist-services-table tbody td[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table tbody td[b-ve3opakrrd] {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
    width: 100%;
}

/* Hide the row's column label by default; only specific cells stamp it. */
:root[data-viewport="mobile"]   .specialist-services-table tbody td[b-ve3opakrrd]::before,
:root[data-viewport="mobile-l"] .specialist-services-table tbody td[b-ve3opakrrd]::before {
    content: "";
    display: none;
}

/* Select cell — checkbox sits in the left column of the grid. */
:root[data-viewport="mobile"]   .specialist-services-table tbody td.specialist-services-cell-select[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table tbody td.specialist-services-cell-select[b-ve3opakrrd] {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    padding: 0;
    width: auto;
}

/* Service / Injury / Speciality name — right of the checkbox, emphasised. */
:root[data-viewport="mobile"]   .specialist-services-table tbody td.specialist-services-cell-name[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-table tbody td.specialist-services-cell-name[b-ve3opakrrd] {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Service Types rates table — stack Cost and Client charge below the
   service name on full-width rows. The previous layout placed them in
   columns 1 / 2 of `grid-template-columns: auto 1fr`, which meant Cost
   ended up squashed in the tiny checkbox column. Stacked layout gives
   each rate field the full card width — easier to tap and read, and
   the £ + amount input doesn't compete for horizontal space. */
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody tr[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody tr[b-ve3opakrrd] {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    row-gap: var(--space-2);
}

/* Cost full-width on row 2. */
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Cost"][b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Cost"][b-ve3opakrrd] {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
}

/* Client charge full-width on row 3. */
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Client charge"][b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Client charge"][b-ve3opakrrd] {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* Stamp the rate column labels above the input. Higher specificity
   than the general `td::before { display: none }` at line 128 — uses
   `tbody td[attr]::before` (spec 0,3,4) vs the general (0,2,4) — so
   the COST / CLIENT CHARGE labels actually render. */
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Cost"][b-ve3opakrrd]::before,
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Cost"][b-ve3opakrrd]::before,
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Client charge"][b-ve3opakrrd]::before,
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Client charge"][b-ve3opakrrd]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

/* Ensure the input-group fills the cell width and inputs hit the
   44 px touch-target floor. */
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Cost"] .input-group[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Cost"] .input-group[b-ve3opakrrd],
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Client charge"] .input-group[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Client charge"] .input-group[b-ve3opakrrd] {
    width: 100%;
}

:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Cost"] .form-control[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Cost"] .form-control[b-ve3opakrrd],
:root[data-viewport="mobile"]   .specialist-services-rates-table tbody td[data-label="Client charge"] .form-control[b-ve3opakrrd],
:root[data-viewport="mobile-l"] .specialist-services-rates-table tbody td[data-label="Client charge"] .form-control[b-ve3opakrrd] {
    min-height: var(--touch-target);
    font-size: 1rem;
}
/* /Components/Layout/Topbar.razor.rz.scp.css */
/* Topbar — Orcanex retrofit of the Hyper navbar.
   Region badge keeps Hyper-era classes for backwards compatibility, but the
   avatar dropdown is rebuilt with token-driven styling. */

[b-nxubxm7zez] .topbar-region-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: default;
    transition: background var(--duration-hover) var(--ease-hover);
}

[b-nxubxm7zez] .topbar-region-badge:hover {
    background: var(--color-accent-soft);
}

[b-nxubxm7zez] .topbar-region-badge img {
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--color-border-soft);
}

[b-nxubxm7zez] .topbar-region-badge .region-code {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

/* Avatar fallback (initials) — tokens-only */
[b-nxubxm7zez] .orcanex-topbar-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1.08rem;
}

/* ============================================================
   Avatar dropdown — Orcanex menu styled with tokens.
   ============================================================ */
[b-nxubxm7zez] .orcanex-topbar-menu {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-2);
    min-width: 240px;
    margin-top: var(--space-2) !important;
    font-family: var(--font-family);
    color: var(--color-text);
}

[b-nxubxm7zez] .orcanex-topbar-menu-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-3) var(--space-2);
}

[b-nxubxm7zez] .orcanex-topbar-menu-brand img {
    height: 22px;
    width: auto;
    opacity: 0.9;
}

[b-nxubxm7zez] .orcanex-topbar-menu-identity {
    padding: 0 var(--space-3) var(--space-2);
    text-align: center;
}

[b-nxubxm7zez] .orcanex-topbar-menu-identity-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

[b-nxubxm7zez] .orcanex-topbar-menu-identity-role {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

[b-nxubxm7zez] .orcanex-topbar-menu-divider {
    height: 1px;
    background: var(--color-border-soft);
    margin: var(--space-2) calc(-1 * var(--space-2));
}

[b-nxubxm7zez] .orcanex-topbar-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

[b-nxubxm7zez] .orcanex-topbar-menu-item:hover,
[b-nxubxm7zez] .orcanex-topbar-menu-item:focus-visible {
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
}

[b-nxubxm7zez] .orcanex-topbar-menu-item-muted {
    color: var(--color-text-muted);
}

[b-nxubxm7zez] .orcanex-topbar-menu-item-muted:hover {
    color: var(--color-text);
}

[b-nxubxm7zez] .orcanex-topbar-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-muted);
}

[b-nxubxm7zez] .orcanex-topbar-menu-item:hover .orcanex-topbar-menu-icon {
    color: var(--color-accent);
}

[b-nxubxm7zez] .orcanex-topbar-menu-label {
    flex: 1;
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.orcanex-access-denied[b-ev05fq3rdj] {
    width: 100%;
    min-height: calc(100vh - var(--h-topbar));
    min-height: calc(100dvh - var(--h-topbar));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.orcanex-access-denied-card[b-ev05fq3rdj] {
    width: 100%;
    max-width: 480px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    text-align: center;
    color: var(--color-text);
}

.orcanex-access-denied-icon[b-ev05fq3rdj] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.orcanex-access-denied-title[b-ev05fq3rdj] {
    margin: 0 0 var(--space-2);
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.orcanex-access-denied-subtitle[b-ev05fq3rdj] {
    margin: 0 0 var(--space-6);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.orcanex-access-denied-link[b-ev05fq3rdj] {
    color: var(--color-accent);
    text-decoration: none;
}

.orcanex-access-denied-link:hover[b-ev05fq3rdj] {
    text-decoration: underline;
}

.orcanex-access-denied-detail[b-ev05fq3rdj] {
    margin: 0 0 var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 0.92rem;
    color: var(--color-text);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}

.orcanex-access-denied-detail dt[b-ev05fq3rdj] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    align-self: baseline;
}

.orcanex-access-denied-detail dd[b-ev05fq3rdj] {
    margin: 0;
    word-break: break-word;
    color: var(--color-text);
}

.orcanex-access-denied-detail code[b-ev05fq3rdj] {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--color-text);
}

.orcanex-access-denied-actions[b-ev05fq3rdj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.orcanex-access-denied-btn[b-ev05fq3rdj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: var(--h-button);
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-access-denied-btn-primary[b-ev05fq3rdj] {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.orcanex-access-denied-btn-primary:hover[b-ev05fq3rdj] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
}

.orcanex-access-denied-btn-default[b-ev05fq3rdj] {
    background: var(--color-panel);
    color: var(--color-text);
    border-color: var(--color-border);
}

.orcanex-access-denied-btn-default:hover[b-ev05fq3rdj] {
    background: var(--color-bg);
    color: var(--color-text);
}

@media (max-width: 480px) {
    .orcanex-access-denied-card[b-ev05fq3rdj] {
        padding: var(--space-6) var(--space-5);
    }
}
/* /Components/Pages/Administration/ActiveUsers.razor.rz.scp.css */
/* =========================================================
   Active Users — scoped styles
   (palette kept in this file's existing hex style for visual
   consistency; mobile uses the wide-table horizontal-scroll
   exception rather than a positional card reflow.)
   ========================================================= */

/* ----- Tab strip ---------------------------------------- */
.au-tabs[b-luongv2h3h] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1rem;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 0.3rem;
    width: fit-content;
    border: 1px solid #e2e8f0;
}

.au-tab-btn[b-luongv2h3h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.au-tab-btn:hover:not(.active)[b-luongv2h3h] { background: #e8edf3; color: #334155; }
.au-tab-btn.active[b-luongv2h3h] { background: #fff; color: #0f6fec; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.au-tab-btn .au-badge[b-luongv2h3h] { background: #0f6fec; color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 10px; padding: 0.1em 0.5em; line-height: 1.4; }
.au-tab-btn:not(.active) .au-badge[b-luongv2h3h] { background: #22c55e; }

/* ----- Toolbar: compact KPI pills + filters ------------- */
.au-toolbar[b-luongv2h3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.au-kpis[b-luongv2h3h] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* Deliberately small pills — the page is information-dense, KPIs must not dominate. */
.au-kpi[b-luongv2h3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    white-space: nowrap;
}
.au-kpi strong[b-luongv2h3h] { color: #0f172a; font-weight: 700; }
.au-kpi-sys .badge[b-luongv2h3h] { font-size: 0.62rem; padding: 0.1em 0.4em; }
.au-kpi-warn[b-luongv2h3h] { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.au-kpi-paused[b-luongv2h3h] { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }

.au-filters[b-luongv2h3h] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.au-filter-select[b-luongv2h3h] { width: auto; min-width: 8rem; font-size: 0.78rem; }

.au-search[b-luongv2h3h] { position: relative; display: inline-flex; align-items: center; }
.au-search .mdi[b-luongv2h3h] { position: absolute; left: 0.55rem; color: #94a3b8; font-size: 0.9rem; pointer-events: none; }
.au-search input[b-luongv2h3h] { padding-left: 1.9rem !important; min-width: 14rem; font-size: 0.78rem; }

/* ----- Filter card (history) ---------------------------- */
.au-filter-card[b-luongv2h3h] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
}

/* ----- Main grouped table ------------------------------- */
.au-table-card[b-luongv2h3h] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

.au-table-card table thead th[b-luongv2h3h] {
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    white-space: nowrap;
}

/* Sortable header affordance */
.au-sortable[b-luongv2h3h] { cursor: pointer; user-select: none; }
.au-sortable:hover[b-luongv2h3h] { color: #0f6fec; }
.au-sortable .mdi[b-luongv2h3h] { font-size: 0.95rem; vertical-align: -2px; }
.au-sort-idle[b-luongv2h3h] { opacity: 0.35; }

/* Group + session rows */
.au-group-row[b-luongv2h3h], .au-session-row[b-luongv2h3h] {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.au-group-row:hover[b-luongv2h3h], .au-session-row:hover[b-luongv2h3h] { background: #f8fafc; border-left-color: #94a3b8; }
.au-group-row.is-expanded[b-luongv2h3h] { background: #eff6ff; border-left-color: #0f6fec; }
.au-session-row.is-expanded[b-luongv2h3h] { background: #eef2ff; border-left-color: #6366f1; }
.au-group-row td[b-luongv2h3h], .au-session-row td[b-luongv2h3h] { vertical-align: middle; }
.au-online-row td:first-child[b-luongv2h3h] { border-left: 3px solid #22c55e; }

.au-group-chev[b-luongv2h3h] { color: #94a3b8; margin-right: 0.3rem; }
.au-group-row.is-expanded .au-group-chev[b-luongv2h3h] { color: #0f6fec; }
.au-subtext[b-luongv2h3h] { font-size: 0.72rem; }
.au-mono[b-luongv2h3h] { font-family: var(--font-mono, monospace); font-size: 0.72rem; }
.au-device-ic[b-luongv2h3h] { font-size: 1.05rem; color: #1d4ed8; margin-right: 0.2rem; }
.au-leftopen[b-luongv2h3h] { color: #b45309; margin-left: 0.3rem; }

/* System badge colours */
.au-sys-orca[b-luongv2h3h]     { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; font-weight: 600; }
.au-sys-examinex[b-luongv2h3h] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-weight: 600; }
.au-sys-default[b-luongv2h3h]  { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

.au-duration[b-luongv2h3h] { font-size: 0.72rem; font-weight: 600; padding: 0.2em 0.55em; border-radius: 6px; background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; white-space: nowrap; }
.au-pings[b-luongv2h3h] { font-size: 0.72rem; font-weight: 700; padding: 0.2em 0.6em; border-radius: 20px; background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

/* ----- Sessions sub-panel (a user's sessions) ----------- */
.au-subrow > td[b-luongv2h3h] { background: #fafbff; }
.au-sessions-panel[b-luongv2h3h] { padding: 0.4rem 0.75rem 0.6rem 2rem; border-left: 3px solid #bfdbfe; }
.au-sessions-table thead th[b-luongv2h3h] { background: #f1f5f9; color: #475569; font-size: 0.66rem; padding: 0.35rem 0.6rem; border-bottom: 1px solid #e2e8f0; }
.au-sessions-table tbody td[b-luongv2h3h] { padding: 0.35rem 0.6rem; }

/* ----- Device icon + PWA chip -------------------------- */
.au-device[b-luongv2h3h] { display: inline-flex; align-items: center; gap: 0.35rem; color: #475569; font-size: 1rem; line-height: 1; white-space: nowrap; }
.au-device .mdi[b-luongv2h3h] { font-size: 1.05rem; color: #1d4ed8; }
.au-pwa-chip[b-luongv2h3h] { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.15em 0.4em; border-radius: 4px; background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; line-height: 1.2; }

/* ----- Expanded page-journey detail -------------------- */
.au-detail-panel[b-luongv2h3h] { background: #fff; border-top: 2px solid #dbeafe; }
.au-detail-header[b-luongv2h3h] { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem 0.4rem; gap: 1rem; flex-wrap: wrap; }
.au-detail-title[b-luongv2h3h] { font-size: 0.78rem; font-weight: 600; color: #1d4ed8; display: flex; align-items: center; gap: 0.35rem; }
.au-detail-search[b-luongv2h3h] { position: relative; display: inline-flex; align-items: center; max-width: 240px; flex: 1; }
.au-detail-search .mdi[b-luongv2h3h] { position: absolute; left: 0.55rem; color: #94a3b8; font-size: 0.9rem; pointer-events: none; }
.au-detail-search input[b-luongv2h3h] { padding-left: 1.9rem !important; }

.au-journey-scroll[b-luongv2h3h] { max-height: 320px; overflow-y: auto; padding: 0 1rem 0.875rem; }
.au-journey-scroll[b-luongv2h3h]::-webkit-scrollbar { width: 5px; }
.au-journey-scroll[b-luongv2h3h]::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
.au-journey-scroll[b-luongv2h3h]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Sticky journey header — opaque fill + high z-index so rows scroll UNDER it
   (the previously reported "rows through the header" was this not being pinned). */
.au-journey-table thead th[b-luongv2h3h] {
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.6rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background-clip: padding-box;
    border-bottom: 1px solid #bfdbfe;
}
.au-journey-table tbody tr[b-luongv2h3h] { position: relative; z-index: 0; }
.au-journey-table tbody tr:hover td[b-luongv2h3h] { background: #eff6ff; }
.au-step-num[b-luongv2h3h] { color: #94a3b8; font-size: 0.72rem; font-weight: 700; }

/* ----- Empty state + footer ---------------------------- */
.au-empty[b-luongv2h3h] { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
.au-empty i[b-luongv2h3h] { font-size: 2.6rem; opacity: 0.3; display: block; margin-bottom: 0.6rem; }
.au-footer-note[b-luongv2h3h] { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.3rem; }

/* Orcanex retrofit */
.orcanex-active-users-page[b-luongv2h3h] { background: var(--color-bg); }
.orcanex-active-users-body[b-luongv2h3h] { padding: var(--space-4); }

/* ============================================================
   Mobile (<768 px)
   The grouped tables are wide tabular master-data lists, so we
   use the documented .orcanex-mdtable-wide horizontal-scroll
   exception rather than a positional card reflow (which couldn't
   survive the group → session → journey structure). The toolbar,
   filters and journey reflow to fit; the journey opens inline.
   ============================================================ */
:root[data-viewport="mobile"]   .orcanex-active-users-body[b-luongv2h3h],
:root[data-viewport="mobile-l"] .orcanex-active-users-body[b-luongv2h3h] { padding: var(--space-3) var(--space-2); }

:root[data-viewport="mobile"]   .au-tabs[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-tabs[b-luongv2h3h] { width: 100%; margin-bottom: 0.75rem; }
:root[data-viewport="mobile"]   .au-tab-btn[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-tab-btn[b-luongv2h3h] { flex: 1; justify-content: center; padding: 0.45rem 0.5rem; }

/* Toolbar stacks: KPIs on one row, filters wrap full-width below. */
:root[data-viewport="mobile"]   .au-toolbar[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-toolbar[b-luongv2h3h] { flex-direction: column; align-items: stretch; }
:root[data-viewport="mobile"]   .au-filters[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-filters[b-luongv2h3h] { width: 100%; }
:root[data-viewport="mobile"]   .au-search[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-search[b-luongv2h3h] { width: 100%; }
:root[data-viewport="mobile"]   .au-search input[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-search input[b-luongv2h3h] { min-width: 0; width: 100%; }
:root[data-viewport="mobile"]   .au-filter-select[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-filter-select[b-luongv2h3h] { flex: 1; min-width: 6rem; }

/* History search button — drop the text label, keep the icon. */
:root[data-viewport="mobile"]   .au-history-search-btn .au-btn-label[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-history-search-btn .au-btn-label[b-luongv2h3h] { display: none; }

/* Journey opens inline (no full-screen overlay) — keep it simple and scrollable. */
:root[data-viewport="mobile"]   .au-journey-scroll[b-luongv2h3h],
:root[data-viewport="mobile-l"] .au-journey-scroll[b-luongv2h3h] { max-height: 60vh; }
/* /Components/Pages/Administration/AuditIntegrity.razor.rz.scp.css */
/*
    Audit Integrity Verifier page — token-driven, follows the same layout
    language as LogExplorer (le-*) but with its own ai-* prefix.
*/

.ai-page[b-18f1ftq37q] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.ai-body[b-18f1ftq37q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.ai-state[b-18f1ftq37q] {
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Explainer card ───────────────────────────────────────────────────── */

.ai-explainer-text[b-18f1ftq37q] {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

.ai-explainer-text + .ai-explainer-text[b-18f1ftq37q] {
    margin-top: var(--space-2);
}

.ai-explainer-text-muted[b-18f1ftq37q] {
    color: var(--color-text-muted);
    font-size: 0.825rem;
}

.ai-explainer-text code[b-18f1ftq37q] {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* ── Result card (FAIL / NO_PRIOR highlight) ──────────────────────────── */

.ai-result-card.ai-result-fail[b-18f1ftq37q] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.ai-result-card.ai-result-info[b-18f1ftq37q] {
    border-color: var(--color-accent);
}

.ai-result-detail[b-18f1ftq37q] {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

.ai-result-meta[b-18f1ftq37q] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: 0.85rem;
}

.ai-result-meta dt[b-18f1ftq37q] {
    color: var(--color-text-muted);
    font-weight: 600;
}

.ai-result-meta dd[b-18f1ftq37q] {
    margin: 0;
    color: var(--color-text);
}

.ai-hash[b-18f1ftq37q] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    word-break: break-all;
    background: var(--color-bg);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

/* ── History card ─────────────────────────────────────────────────────── */

.ai-history-meta[b-18f1ftq37q] {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: 0.8rem;
}

.ai-history-empty[b-18f1ftq37q] {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
}

.ai-history-empty i[b-18f1ftq37q] {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-subtle);
}

.ai-history-empty p[b-18f1ftq37q] {
    margin: 0;
    font-size: 0.875rem;
}

.ai-history-table[b-18f1ftq37q] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
}

.ai-history-row[b-18f1ftq37q] {
    display: grid;
    grid-template-columns: 140px 90px 90px 100px 1fr 2fr;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.825rem;
    color: var(--color-text);
}

.ai-history-row:last-child[b-18f1ftq37q] {
    border-bottom: none;
}

.ai-history-header[b-18f1ftq37q] {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--color-border);
}

.ai-row-fail[b-18f1ftq37q] {
    background: color-mix(in srgb, var(--color-danger) 6%, transparent);
    border-left: 3px solid var(--color-danger);
}

.ai-row-pass[b-18f1ftq37q] {
    border-left: 3px solid var(--color-success);
}

.ai-row-info[b-18f1ftq37q] {
    border-left: 3px solid var(--color-accent);
}

.ai-history-detail[b-18f1ftq37q] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Result pills inside the history table ───────────────────────────── */

.ai-pill[b-18f1ftq37q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.7rem;
    border: 1px solid transparent;
    letter-spacing: 0.04em;
}

.ai-pill-pass[b-18f1ftq37q] {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-color: var(--color-success);
}

.ai-pill-fail[b-18f1ftq37q] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.ai-pill-info[b-18f1ftq37q] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ── Mobile layout ────────────────────────────────────────────────────── */

:root[data-viewport="mobile"] .ai-body[b-18f1ftq37q],
:root[data-viewport="mobile-l"] .ai-body[b-18f1ftq37q] {
    padding: var(--space-2);
    gap: var(--space-2);
}

:root[data-viewport="mobile"] .ai-history-row[b-18f1ftq37q],
:root[data-viewport="mobile-l"] .ai-history-row[b-18f1ftq37q] {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: var(--space-1);
}

:root[data-viewport="mobile"] .ai-history-header[b-18f1ftq37q],
:root[data-viewport="mobile-l"] .ai-history-header[b-18f1ftq37q] {
    display: none;
}

:root[data-viewport="mobile"] .ai-history-detail[b-18f1ftq37q],
:root[data-viewport="mobile-l"] .ai-history-detail[b-18f1ftq37q] {
    grid-column: 1 / -1;
    white-space: normal;
}

:root[data-viewport="mobile"] .ai-result-meta[b-18f1ftq37q],
:root[data-viewport="mobile-l"] .ai-result-meta[b-18f1ftq37q] {
    grid-template-columns: 1fr;
    gap: 2px;
}

:root[data-viewport="mobile"] .ai-result-meta dt[b-18f1ftq37q],
:root[data-viewport="mobile-l"] .ai-result-meta dt[b-18f1ftq37q] {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
}
/* /Components/Pages/Administration/CreateExternalUser.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   Create-external-user page. The page renders an info banner followed by an
   EditForm containing 3 stacked Cards (Company assignment / User details /
   Password). Without explicit gaps the Cards butt up against each other and
   against the banner — this file adds the vertical rhythm.
   ────────────────────────────────────────────────────────────────────── */

.orcanex-create-user-body[b-uaqazmio1w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The Cards are direct children of the EditForm's <form>, not of
   .orcanex-create-user-body, so the flex-gap above doesn't reach them.
   ::deep is required because <form> is rendered by the EditForm component
   and so doesn't carry this component's scope attribute. */
.orcanex-create-user-body[b-uaqazmio1w]  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* /Components/Pages/Administration/CreateUser.razor.rz.scp.css */
/* Styles for CreateUser component - intentionally blank placeholder for consistent structure */
/* /Components/Pages/Administration/EmailInbox.razor.rz.scp.css */
/* Email Inbox — three-pane Orcanex layout */

.inbox-page[b-2fxxlfwd8v] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*min-height: 0;*/
    padding: 0 24px 24px;
}

.inbox-grid[b-2fxxlfwd8v] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 220px 380px 1fr;
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 1100px) {
    .inbox-grid[b-2fxxlfwd8v] {
        grid-template-columns: 200px 320px 1fr;
    }
}

/* ─── Pane 1: folders ─── */
.inbox-folders[b-2fxxlfwd8v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px 12px;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.inbox-folder-section[b-2fxxlfwd8v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-folder-kicker[b-2fxxlfwd8v] {
    padding: 0 8px 6px;
}

.inbox-folder-item[b-2fxxlfwd8v],
.inbox-filter-stat[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.inbox-folder-item:hover[b-2fxxlfwd8v] {
    background: var(--color-bg);
}

.inbox-folder-item.is-active[b-2fxxlfwd8v] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.inbox-folder-item:disabled[b-2fxxlfwd8v] {
    cursor: not-allowed;
    opacity: 0.6;
}

.inbox-folder-label[b-2fxxlfwd8v] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-folder-count[b-2fxxlfwd8v] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.inbox-folder-item.is-active .inbox-folder-count[b-2fxxlfwd8v] {
    color: var(--color-accent);
}

.inbox-filter-stat[b-2fxxlfwd8v] {
    cursor: default;
}

.inbox-filter-dot[b-2fxxlfwd8v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── Pane 2: list ─── */
.inbox-list[b-2fxxlfwd8v] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    overflow: hidden;
    min-height: 0;
}

.inbox-list-toolbar[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.inbox-list-search[b-2fxxlfwd8v] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}

.inbox-list-search:focus-within[b-2fxxlfwd8v] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.inbox-list-search-input[b-2fxxlfwd8v] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    color: var(--color-text);
    min-width: 0;
}

.inbox-list-search-input[b-2fxxlfwd8v]::placeholder {
    color: var(--color-text-subtle);
}

.inbox-list-meta[b-2fxxlfwd8v] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.inbox-list-empty[b-2fxxlfwd8v] {
    padding: 14px;
}

.inbox-list-scroll[b-2fxxlfwd8v] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.inbox-list-item[b-2fxxlfwd8v] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-soft);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.inbox-list-item:hover[b-2fxxlfwd8v] {
    background: var(--color-bg);
}

.inbox-list-item.is-selected[b-2fxxlfwd8v] {
    background: var(--color-accent-soft);
    border-left-color: var(--color-accent);
}

.inbox-list-row-top[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.inbox-list-row-from-block[b-2fxxlfwd8v] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.inbox-list-row-from[b-2fxxlfwd8v] {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-list-item.is-unread .inbox-list-row-from[b-2fxxlfwd8v] {
    font-weight: 700;
}

.inbox-list-row-time[b-2fxxlfwd8v] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.inbox-list-row-dot[b-2fxxlfwd8v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

.inbox-list-row-subject[b-2fxxlfwd8v] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inbox-list-item:not(.is-unread) .inbox-list-row-subject[b-2fxxlfwd8v] {
    font-weight: 500;
}

.inbox-list-row-attach[b-2fxxlfwd8v] {
    color: var(--color-text-muted);
}

.inbox-list-row-preview[b-2fxxlfwd8v] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* ─── Pane 3: reader ─── */
.inbox-reader[b-2fxxlfwd8v] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.inbox-reader-empty[b-2fxxlfwd8v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
}

.inbox-reader-head[b-2fxxlfwd8v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
}

.inbox-reader-head-text[b-2fxxlfwd8v] {
    flex: 1;
    min-width: 0;
}

.inbox-reader-subject[b-2fxxlfwd8v] {
    margin: 0;
    color: var(--color-text);
}

.inbox-reader-meta[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.inbox-reader-meta-sep[b-2fxxlfwd8v] {
    color: var(--color-text-subtle);
}

.inbox-reader-head-actions[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inbox-reader-from[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-border-soft);
}

.inbox-reader-from-text[b-2fxxlfwd8v] {
    flex: 1;
    min-width: 0;
}

.inbox-reader-from-name[b-2fxxlfwd8v] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.inbox-reader-from-address[b-2fxxlfwd8v] {
    margin-top: 2px;
}

.inbox-reader-meta-block[b-2fxxlfwd8v] {
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inbox-reader-meta-row[b-2fxxlfwd8v] {
    display: flex;
    gap: 12px;
    font-size: 0.92rem;
}

.inbox-reader-meta-label[b-2fxxlfwd8v] {
    width: 36px;
    color: var(--color-text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.inbox-reader-meta-value[b-2fxxlfwd8v] {
    color: var(--color-text);
    flex: 1;
    word-break: break-word;
}

/* Assignment chips */
.inbox-assignment-body[b-2fxxlfwd8v] {
    flex: 1;
}

.inbox-assignment-title[b-2fxxlfwd8v] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.inbox-assignment-list[b-2fxxlfwd8v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inbox-assignment-chip[b-2fxxlfwd8v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.92rem;
}

.inbox-assignment-chip:hover[b-2fxxlfwd8v] {
    background: var(--color-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.inbox-assignment-chip-ref[b-2fxxlfwd8v] {
    font-weight: 600;
}

.inbox-assignment-chip-sep[b-2fxxlfwd8v] {
    color: var(--color-text-subtle);
}

/* Attachments */
.inbox-attachments[b-2fxxlfwd8v] {
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-border-soft);
}

.inbox-attachments-kicker[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.inbox-attachments-list[b-2fxxlfwd8v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inbox-attachment-chip[b-2fxxlfwd8v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.inbox-attachment-chip:hover[b-2fxxlfwd8v] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.inbox-attachment-chip-body[b-2fxxlfwd8v] {
    display: flex;
    flex-direction: column;
}

.inbox-attachment-chip-name[b-2fxxlfwd8v] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Reader body */
.inbox-reader-body[b-2fxxlfwd8v] {
    padding: 18px 24px;
    flex: 1;
    min-height: 280px;
}

.inbox-body-iframe[b-2fxxlfwd8v] {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: none;
    background: var(--color-panel);
}

.inbox-body-text[b-2fxxlfwd8v] {
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.inbox-body-empty[b-2fxxlfwd8v] {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 20px 0;
}

/* Mobile back-to-list button — hidden by default; appears in the reader
   pane at mobile widths via .show-mobile-only on the element. */
.inbox-reader-mobile-back[b-2fxxlfwd8v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    width: 100%;
    background: var(--color-bg);
    border: none;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.inbox-reader-mobile-back:hover[b-2fxxlfwd8v] {
    background: var(--color-panel);
}

/* ============================================================
   Mobile (<768 px) refinements
   - Single-pane: folders hidden (via .hide-mobile on aside)
   - List and reader stack into a single column the user toggles
   - When a message is selected the list hides and the reader fills
     the viewport; back button restores the list
   ============================================================ */
:root[data-viewport="mobile"]   .inbox-page[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-page[b-2fxxlfwd8v] {
    padding: 0 0 12px;
}

:root[data-viewport="mobile"]   .inbox-grid[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-grid[b-2fxxlfwd8v] {
    grid-template-columns: 1fr;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* List pane fills the viewport at mobile when no message is selected */
:root[data-viewport="mobile"]   .inbox-list[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-list[b-2fxxlfwd8v] {
    border-right: 0;
}

/* When a message is selected, hide the list at mobile (the reader takes over) */
:root[data-viewport="mobile"]   .inbox-list.inbox-list-hidden-mobile[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-list.inbox-list-hidden-mobile[b-2fxxlfwd8v] {
    display: none;
}

/* When no message is selected, hide the reader at mobile so the list fills */
:root[data-viewport="mobile"]   .inbox-reader.inbox-reader-hidden-mobile[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-reader.inbox-reader-hidden-mobile[b-2fxxlfwd8v] {
    display: none;
}

/* Reader head — let actions wrap, tighten padding */
:root[data-viewport="mobile"]   .inbox-reader-head[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-reader-head[b-2fxxlfwd8v] {
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
}

:root[data-viewport="mobile"]   .inbox-reader-head-actions[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-reader-head-actions[b-2fxxlfwd8v] {
    width: 100%;
    margin-top: 8px;
}

:root[data-viewport="mobile"]   .inbox-reader-from[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-reader-from[b-2fxxlfwd8v] {
    padding: 12px 14px;
}

:root[data-viewport="mobile"]   .inbox-reader-meta-block[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-reader-meta-block[b-2fxxlfwd8v] {
    padding: 10px 14px;
}

:root[data-viewport="mobile"]   .inbox-reader-body[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-reader-body[b-2fxxlfwd8v] {
    padding: 14px;
}

:root[data-viewport="mobile"]   .inbox-attachments[b-2fxxlfwd8v],
:root[data-viewport="mobile-l"] .inbox-attachments[b-2fxxlfwd8v] {
    padding: 12px 14px;
}
/* /Components/Pages/Administration/ExternalUserDetails.razor.rz.scp.css */
/* ExternalUserDetails — Orcanex retrofit */

.orcanex-user-details-page[b-gen5mc8k30] {
    background: var(--color-bg);
    /*min-height: 100%;*/
}

.orcanex-user-details-tabs[b-gen5mc8k30] {
    padding: var(--space-3) var(--space-4) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
}

.orcanex-tab[b-gen5mc8k30] {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: -1px;
}

.orcanex-tab:hover[b-gen5mc8k30] {
    color: var(--color-text);
}

.orcanex-tab.active[b-gen5mc8k30] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.orcanex-user-details-body[b-gen5mc8k30] {
    padding: var(--space-4);
}
/* /Components/Pages/Administration/HealthMetrics.razor.rz.scp.css */
/*
    Health & Metrics dashboard — token-driven, matches the visual language of
    the Audit Integrity / SAR Lookup pages.
*/

.hm-page[b-q45x6u2lpt] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.hm-body[b-q45x6u2lpt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.hm-state[b-q45x6u2lpt] {
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Explainer card ───────────────────────────────────────────────────── */

.hm-explainer-text[b-q45x6u2lpt] {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

.hm-explainer-text code[b-q45x6u2lpt] {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

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

.hm-empty[b-q45x6u2lpt] {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
}

.hm-empty i[b-q45x6u2lpt] {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-subtle);
}

.hm-empty p[b-q45x6u2lpt] {
    margin: 0;
    font-size: 0.875rem;
}

.hm-empty-hint[b-q45x6u2lpt] {
    margin-top: var(--space-2) !important;
    font-size: 0.8rem !important;
    color: var(--color-text-subtle);
}

/* ── Counter card grid ────────────────────────────────────────────────── */

.hm-counters[b-q45x6u2lpt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
}

.hm-counter-card[b-q45x6u2lpt] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.hm-counter-name[b-q45x6u2lpt] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-counter-tags[b-q45x6u2lpt] {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-counter-value[b-q45x6u2lpt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
    margin-top: var(--space-1);
}

.hm-counter-sub[b-q45x6u2lpt] {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

/* ── Sparkline ────────────────────────────────────────────────────────── */

.hm-spark[b-q45x6u2lpt] {
    width: 100%;
    height: 24px;
    display: block;
    margin-top: var(--space-1);
}

.hm-spark-bar[b-q45x6u2lpt] {
    fill: var(--color-accent);
}

.hm-spark-empty[b-q45x6u2lpt] {
    fill: var(--color-border-soft);
}

/* ── Live gauge cards ─────────────────────────────────────────────────── */

.hm-gauges-meta[b-q45x6u2lpt] {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

.hm-gauges[b-q45x6u2lpt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.hm-gauge-card[b-q45x6u2lpt] {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hm-gauge-name[b-q45x6u2lpt] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-gauge-tags[b-q45x6u2lpt] {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-gauge-value[b-q45x6u2lpt] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-success);
    line-height: 1.1;
    margin-top: 2px;
}

.hm-gauge-sub[b-q45x6u2lpt] {
    font-size: 0.65rem;
    color: var(--color-text-subtle);
}

/* ── Histogram table ──────────────────────────────────────────────────── */

.hm-hist-table[b-q45x6u2lpt] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
}

.hm-hist-row[b-q45x6u2lpt] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-2);
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.825rem;
    color: var(--color-text);
}

.hm-hist-row:last-child[b-q45x6u2lpt] {
    border-bottom: none;
}

.hm-hist-header[b-q45x6u2lpt] {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--color-border);
}

.hm-hist-name[b-q45x6u2lpt] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

:root[data-viewport="mobile"] .hm-body[b-q45x6u2lpt],
:root[data-viewport="mobile-l"] .hm-body[b-q45x6u2lpt] {
    padding: var(--space-2);
    gap: var(--space-2);
}

:root[data-viewport="mobile"] .hm-counters[b-q45x6u2lpt],
:root[data-viewport="mobile-l"] .hm-counters[b-q45x6u2lpt] {
    grid-template-columns: 1fr 1fr;
}

:root[data-viewport="mobile"] .hm-hist-row[b-q45x6u2lpt],
:root[data-viewport="mobile-l"] .hm-hist-row[b-q45x6u2lpt] {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: var(--space-1);
}

:root[data-viewport="mobile"] .hm-hist-header[b-q45x6u2lpt],
:root[data-viewport="mobile-l"] .hm-hist-header[b-q45x6u2lpt] {
    display: none;
}
/* /Components/Pages/Administration/JourneyTreeView.razor.rz.scp.css */
/*
 * JourneyTreeView — recursive renderer for one node in the journey hierarchy.
 *
 * Depth-driven indentation via the --jtv-depth custom property set inline by the
 * .razor template (avoids per-level CSS classes for unlimited nesting depth).
 * One indent step = 1.25rem.
 *
 * Each node kind gets its own left-border colour so the eye can scan the tree by
 * type — Page (blue) / Tab (purple) / Click (accent) / Service (neutral) / Sql
 * (primary) / Http (info) / Job (amber) / Hub (purple-warm) / Log (varies by level).
 */

.jtv-root[b-1i3odfayvf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.jtv-node[b-1i3odfayvf] {
    display: flex;
    flex-direction: column;
}

/* ── Row ──────────────────────────────────────────────────────────────────── */

/* The row is a grid wrapper that hosts TWO buttons side by side:
     • .jtv-chevron-btn — fixed-width left cell, toggles children
     • .jtv-body-btn    — fills the remainder, toggles the props panel
   They're split so clicking the chevron doesn't also pop the props panel, and
   vice versa — each click target has a clear, distinct outcome. */
.jtv-row[b-1i3odfayvf] {
    display: grid;
    grid-template-columns:
        /* chevron */  calc(1rem + var(--jtv-depth, 0) * 1.25rem)
        /* body    */  minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    border-left: 3px solid var(--jtv-accent, var(--color-border-soft));
    transition: background-color 0.08s ease;
}

.jtv-row.is-props-open[b-1i3odfayvf] {
    background-color: var(--color-panel);
}

.jtv-row:hover[b-1i3odfayvf] {
    background-color: var(--color-panel-hover, rgba(0, 0, 0, 0.025));
}

/* ── Chevron button (children toggle) ─────────────────────────────────────── */

.jtv-chevron-btn[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.4rem 0.25rem 0.4rem 0;
    background: transparent;
    border: 0;
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    cursor: default;
}

.jtv-chevron-clickable[b-1i3odfayvf] {
    cursor: pointer;
}

.jtv-chevron-btn:focus-visible[b-1i3odfayvf] {
    outline: 2px solid var(--color-accent-ring);
    outline-offset: -2px;
}

/* ── Body button (props panel toggle) ─────────────────────────────────────── */

.jtv-body-btn[b-1i3odfayvf] {
    display: grid;
    grid-template-columns:
        /* icon     */ 1.25rem
        /* kind     */ 3.25rem
        /* label    */ minmax(0, 1fr)
        /* pills    */ auto
        /* duration */ 8rem
        /* span     */ 6rem
        /* time     */ 7rem
        /* info     */ 1.25rem;
    column-gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.625rem 0.4rem 0.25rem;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
}

.jtv-body-btn:focus-visible[b-1i3odfayvf] {
    outline: 2px solid var(--color-accent-ring);
    outline-offset: -2px;
}

/* Info glyph — rightmost element of the body button. Subtle by default,
   accent-coloured on hover or when the property panel is open. Makes the
   "click body = open properties" affordance explicit and visually distinct
   from the chevron's "expand children" action. */
.jtv-info-glyph[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-subtle);
    font-size: 0.95rem;
    opacity: 0.55;
    transition: color 0.12s ease, opacity 0.12s ease;
}

.jtv-body-btn:hover .jtv-info-glyph[b-1i3odfayvf],
.is-props-open .jtv-info-glyph[b-1i3odfayvf] {
    color: var(--color-accent);
    opacity: 1;
}

/* Subtle hover signal on the BODY (props), distinct from the chevron column. */
.jtv-body-btn:hover[b-1i3odfayvf] {
    background-color: var(--color-accent-soft);
}

.jtv-chevron-btn.jtv-chevron-clickable:hover[b-1i3odfayvf] {
    background-color: var(--color-border-soft);
    color: var(--color-text);
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

.jtv-icon[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--jtv-accent, var(--color-text-muted));
    font-size: 0.95rem;
}

/* ── Kind tag (small uppercase chip) ──────────────────────────────────────── */

.jtv-kind-tag[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jtv-accent, var(--color-text-muted));
    background-color: var(--jtv-accent-soft, transparent);
    padding: 0.125rem 0.4rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-align: center;
}

/* ── Label ────────────────────────────────────────────────────────────────── */

.jtv-label[b-1i3odfayvf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

/* ── Pills ────────────────────────────────────────────────────────────────── */

.jtv-pills[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.jtv-pill[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Direct-children count — shown on containers (Page/Tab/Click/Job/Hub).
   Neutral tone so it doesn't fight with the type-specific pills next to it. */
.jtv-pill-children[b-1i3odfayvf] {
    color: var(--color-text-muted);
    background-color: var(--color-border-soft);
    font-family: var(--font-mono);
    font-weight: 600;
    min-width: 1.5rem;
    justify-content: center;
}

.jtv-pill-sql[b-1i3odfayvf] {
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
}

.jtv-pill-http[b-1i3odfayvf] {
    color: #0891b2;
    background-color: rgba(8, 145, 178, 0.12);
}

.jtv-pill-job[b-1i3odfayvf] {
    color: #b45309;
    background-color: rgba(180, 83, 9, 0.12);
}

.jtv-pill-error[b-1i3odfayvf] {
    color: var(--color-danger);
    background-color: var(--color-danger-soft);
}

/* Level roll-up pills next to SQL / HTTP / error counts. Same shape, different
   tones aligned with the Serilog level palette used elsewhere in the app. */
.jtv-pill-warn[b-1i3odfayvf] {
    color: #b45309;
    background-color: var(--color-warn-soft);
}

.jtv-pill-info[b-1i3odfayvf] {
    color: #0e7490;
    background-color: rgba(14, 116, 144, 0.10);
}

.jtv-pill-debug[b-1i3odfayvf] {
    color: var(--color-text-subtle);
    background-color: var(--color-border-soft);
}

.jtv-pill-level[b-1i3odfayvf] {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.jtv-level-information[b-1i3odfayvf],
.jtv-level-info[b-1i3odfayvf] {
    color: var(--color-text-muted);
    background-color: var(--color-border-soft);
}

.jtv-level-warning[b-1i3odfayvf],
.jtv-level-warn[b-1i3odfayvf] {
    color: #b45309;
    background-color: var(--color-warn-soft);
}

.jtv-level-error[b-1i3odfayvf],
.jtv-level-fatal[b-1i3odfayvf],
.jtv-level-critical[b-1i3odfayvf] {
    color: var(--color-danger);
    background-color: var(--color-danger-soft);
}

.jtv-level-debug[b-1i3odfayvf],
.jtv-level-verbose[b-1i3odfayvf],
.jtv-level-trace[b-1i3odfayvf] {
    color: var(--color-text-subtle);
    background-color: var(--color-border-soft);
}

/* ── Duration bar ─────────────────────────────────────────────────────────── */

/* Seq-style duration bar — horizontal bar showing this span's duration as a
   fraction of the trace's longest span, plus a compact "234ms" / "1.2s" / "2m 15s"
   label on the right. Colour-coded by absolute duration (not the bar's relative width)
   so a fast-but-long-relative span doesn't look alarming. */
.jtv-duration[b-1i3odfayvf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.jtv-duration-bar[b-1i3odfayvf] {
    position: relative;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-border-soft);
    overflow: hidden;
    min-width: 2rem;
}

.jtv-duration-bar-fill[b-1i3odfayvf] {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.15s ease;
}

.jtv-duration-text[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: right;
}

/* Duration tone — drives both the bar fill and the text colour. */
.jtv-duration-fast .jtv-duration-bar-fill[b-1i3odfayvf] { background-color: var(--color-text-subtle); }
.jtv-duration-fast .jtv-duration-text[b-1i3odfayvf]     { color: var(--color-text-subtle); }

.jtv-duration-ok   .jtv-duration-bar-fill[b-1i3odfayvf] { background-color: var(--color-accent); }
.jtv-duration-ok   .jtv-duration-text[b-1i3odfayvf]     { color: var(--color-accent); }

.jtv-duration-warn .jtv-duration-bar-fill[b-1i3odfayvf] { background-color: #b45309; }
.jtv-duration-warn .jtv-duration-text[b-1i3odfayvf]     { color: #b45309; font-weight: 600; }

.jtv-duration-slow .jtv-duration-bar-fill[b-1i3odfayvf] { background-color: var(--color-danger); }
.jtv-duration-slow .jtv-duration-text[b-1i3odfayvf]     { color: var(--color-danger); font-weight: 600; }

/* ── SpanId + Time ────────────────────────────────────────────────────────── */

.jtv-spanid[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.jtv-time[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    text-align: right;
    white-space: nowrap;
}

/* ── Children container ───────────────────────────────────────────────────── */

.jtv-children[b-1i3odfayvf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── Inline filter + sort toolbar ─────────────────────────────────────────── */

/* Shown above the children of a node that has more than 5 children. Indented
   to the same depth as the children so it visually belongs to the parent. */
.jtv-child-toolbar[b-1i3odfayvf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem 0.35rem
             calc(0.6rem + var(--jtv-depth, 0) * 1.25rem);
    background-color: var(--color-panel);
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.78rem;
}

.jtv-child-search[b-1i3odfayvf] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.jtv-child-search:focus-within[b-1i3odfayvf] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-ring);
}

.jtv-child-search > i[b-1i3odfayvf] {
    color: var(--color-text-subtle);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.jtv-child-search input[b-1i3odfayvf] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-text);
    font-size: 0.8rem;
    padding: 0;
}

.jtv-child-search input[b-1i3odfayvf]::placeholder {
    color: var(--color-text-subtle);
    font-style: italic;
}

.jtv-child-search-clear[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0.1rem;
    color: var(--color-text-subtle);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.jtv-child-search-clear:hover[b-1i3odfayvf] {
    color: var(--color-danger);
    background-color: var(--color-border-soft);
}

.jtv-child-search-count[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    white-space: nowrap;
    flex-shrink: 0;
}

.jtv-child-sort[b-1i3odfayvf] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.jtv-sort-select[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.jtv-sort-select:focus-within[b-1i3odfayvf] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-ring);
}

.jtv-sort-select i[b-1i3odfayvf] {
    font-size: 0.9rem;
}

.jtv-sort-select select[b-1i3odfayvf] {
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-text);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0 0.15rem;
    /* Native arrow stays — keeps the dropdown affordance obvious without the global
       carat hack interfering inside the inline toolbar. */
}

/* Asc/desc direction toggle button — small square sitting next to the sort dropdown. */
.jtv-sort-dir[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.1s ease, background-color 0.1s ease;
}

.jtv-sort-dir:hover[b-1i3odfayvf] {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.jtv-sort-dir:focus-visible[b-1i3odfayvf] {
    outline: 2px solid var(--color-accent-ring);
    outline-offset: -2px;
}

.jtv-sort-dir.is-desc[b-1i3odfayvf] {
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent);
}

.jtv-sort-dir i[b-1i3odfayvf] {
    font-size: 0.95rem;
}

/* Empty-state when search matches nothing. */
.jtv-child-empty[b-1i3odfayvf] {
    padding: 0.5rem 0.75rem 0.5rem
             calc(0.75rem + var(--jtv-depth, 0) * 1.25rem);
    color: var(--color-text-subtle);
    font-style: italic;
    font-size: 0.78rem;
    background-color: var(--color-bg);
    border-left: 3px solid var(--color-border-soft);
}

/* ── Properties drill-down panel ──────────────────────────────────────────── */

/* Inline expansion under a row showing the underlying Seq event's full property
   set. Organised into sections (Identity / Message / Database / HTTP / Action /
   Case / User / Session / System / Other) that match the OTel attribute
   namespacing convention. Each section has a header with icon + label. */
.jtv-props[b-1i3odfayvf] {
    padding: 0.6rem 0.75rem 0.85rem
             calc(0.75rem + (var(--jtv-depth, 0) + 1) * 1.25rem + 1.25rem);
    background-color: var(--color-panel);
    border-left: 3px solid var(--jtv-accent, var(--color-border-soft));
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Section ─────────────────────────────────────────────────────────────── */

.jtv-prop-section[b-1i3odfayvf] {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.jtv-prop-section-head[b-1i3odfayvf] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background-color: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.jtv-prop-section-head i[b-1i3odfayvf] {
    font-size: 0.85rem;
    color: var(--color-accent);
}

/* Per-section accent colour — picks up the same hue as the same-kind tree row. */
.jtv-section-database .jtv-prop-section-head i[b-1i3odfayvf] { color: #0e7490; }
.jtv-section-http     .jtv-prop-section-head i[b-1i3odfayvf] { color: #0891b2; }
.jtv-section-hangfire .jtv-prop-section-head i[b-1i3odfayvf] { color: #b45309; }
.jtv-section-action   .jtv-prop-section-head i[b-1i3odfayvf] { color: var(--color-accent); }
.jtv-section-case     .jtv-prop-section-head i[b-1i3odfayvf] { color: #2563eb; }
.jtv-section-page     .jtv-prop-section-head i[b-1i3odfayvf] { color: #2563eb; }
.jtv-section-tab      .jtv-prop-section-head i[b-1i3odfayvf] { color: #7c3aed; }
.jtv-section-system   .jtv-prop-section-head i[b-1i3odfayvf] { color: #475569; }

/* ── Property list ───────────────────────────────────────────────────────── */

.jtv-prop-list[b-1i3odfayvf] {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.6rem;
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.3rem;
    font-size: 0.8rem;
}

.jtv-prop[b-1i3odfayvf] {
    display: contents;
}

.jtv-prop-full[b-1i3odfayvf] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.15rem;
}

.jtv-prop-key[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    padding-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jtv-prop-val[b-1i3odfayvf] {
    color: var(--color-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.jtv-prop-val code[b-1i3odfayvf] {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    background-color: var(--color-panel);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
}

.jtv-empty[b-1i3odfayvf] {
    font-style: italic;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

/* ── SQL statement — formatted code block ────────────────────────────────── */

.jtv-sql[b-1i3odfayvf] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background-color: #0d1117;
    color: #c9d1d9;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
    max-height: 24rem;
    overflow-y: auto;
}

.jtv-sql code[b-1i3odfayvf] {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Light-theme SQL block — matches Orcanex bg/borders. */
:root[data-theme="light"] .jtv-sql[b-1i3odfayvf] {
    background-color: #f6f8fa;
    color: #24292e;
}

/* ── Param chips ─────────────────────────────────────────────────────────── */

.jtv-chips[b-1i3odfayvf] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.jtv-chip[b-1i3odfayvf] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    border: 1px solid var(--color-accent-soft);
    white-space: nowrap;
}

/* ── Exception block ─────────────────────────────────────────────────────── */

.jtv-prop-exception[b-1i3odfayvf] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.jtv-prop-exception .jtv-prop-val pre[b-1i3odfayvf] {
    margin: 0;
    padding: 0.4rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-danger);
    background-color: var(--color-danger-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-danger);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Kind-specific accent colours ─────────────────────────────────────────── */

.jtv-kind-page[b-1i3odfayvf]    { --jtv-accent: #2563eb; --jtv-accent-soft: rgba(37, 99, 235, 0.10); }
.jtv-kind-tab[b-1i3odfayvf]     { --jtv-accent: #7c3aed; --jtv-accent-soft: rgba(124, 58, 237, 0.10); }
.jtv-kind-click[b-1i3odfayvf]   { --jtv-accent: var(--color-accent); --jtv-accent-soft: var(--color-accent-soft); }
.jtv-kind-service[b-1i3odfayvf] { --jtv-accent: #475569; --jtv-accent-soft: rgba(71, 85, 105, 0.08); }
.jtv-kind-sql[b-1i3odfayvf]     { --jtv-accent: #0e7490; --jtv-accent-soft: rgba(14, 116, 144, 0.10); }
.jtv-kind-http[b-1i3odfayvf]    { --jtv-accent: #0891b2; --jtv-accent-soft: rgba(8, 145, 178, 0.10); }
.jtv-kind-job[b-1i3odfayvf]     { --jtv-accent: #b45309; --jtv-accent-soft: rgba(180, 83, 9, 0.10); }
.jtv-kind-hub[b-1i3odfayvf]     { --jtv-accent: #9333ea; --jtv-accent-soft: rgba(147, 51, 234, 0.10); }
.jtv-kind-log[b-1i3odfayvf]     { --jtv-accent: var(--color-text-muted); --jtv-accent-soft: var(--color-border-soft); }
.jtv-kind-other[b-1i3odfayvf]   { --jtv-accent: var(--color-text-subtle); --jtv-accent-soft: var(--color-border-soft); }

/* ── Open state — slight emphasis on the row that has its tree expanded ──── */

.jtv-node.is-open > .jtv-row[b-1i3odfayvf] {
    background-color: var(--color-panel);
}

/* ── Mobile — collapse the timestamp + spanid columns on narrow screens ──── */

:root[data-viewport="mobile"] .jtv-row[b-1i3odfayvf],
:root[data-viewport="mobile-l"] .jtv-row[b-1i3odfayvf] {
    grid-template-columns:
        calc(1rem + var(--jtv-depth, 0) * 1rem)
        minmax(0, 1fr);
}

:root[data-viewport="mobile"] .jtv-body-btn[b-1i3odfayvf],
:root[data-viewport="mobile-l"] .jtv-body-btn[b-1i3odfayvf] {
    grid-template-columns:
        1.25rem
        3rem
        minmax(0, 1fr)
        auto
        1rem;
    padding: 0.5rem 0.5rem 0.5rem 0.25rem;
}

:root[data-viewport="mobile"] .jtv-spanid[b-1i3odfayvf],
:root[data-viewport="mobile-l"] .jtv-spanid[b-1i3odfayvf],
:root[data-viewport="mobile"] .jtv-time[b-1i3odfayvf],
:root[data-viewport="mobile-l"] .jtv-time[b-1i3odfayvf],
:root[data-viewport="mobile"] .jtv-duration[b-1i3odfayvf],
:root[data-viewport="mobile-l"] .jtv-duration[b-1i3odfayvf] {
    display: none;
}

:root[data-viewport="mobile"] .jtv-prop-list[b-1i3odfayvf],
:root[data-viewport="mobile-l"] .jtv-prop-list[b-1i3odfayvf] {
    grid-template-columns: 7rem minmax(0, 1fr);
    font-size: 0.75rem;
}
/* /Components/Pages/Administration/LogDetailPopout.razor.rz.scp.css */
.log-popout-page[b-u27l6cj02b] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
}

.log-popout-header[b-u27l6cj02b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    min-height: 52px;
    flex-shrink: 0;
}

.log-popout-header-title[b-u27l6cj02b] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.log-popout-kind-badge[b-u27l6cj02b] {
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    flex-shrink: 0;
}

.log-popout-title-text[b-u27l6cj02b] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-popout-header-meta[b-u27l6cj02b] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.log-popout-tracking-id[b-u27l6cj02b] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
}

.log-popout-timestamp[b-u27l6cj02b] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.log-popout-loading[b-u27l6cj02b],
.log-popout-error[b-u27l6cj02b],
.log-popout-empty[b-u27l6cj02b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.log-popout-body[b-u27l6cj02b] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
}
/* /Components/Pages/Administration/LogExplorer.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   Log Explorer — Phase 4 reboot
   Minimal styling: tab strip + list rows (name / id / timestamp).
   All values come from Orcanex tokens (tokens.css).
   ────────────────────────────────────────────────────────────────────────── */

.le-page[b-e60eyqwp67] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.le-body[b-e60eyqwp67] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Filter strip ──────────────────────────────────────────────────────── */

/* Sits between the tab strip and the journey list. Hosts the time range,
   level, and user filters as inline labelled controls. Layout collapses to a
   stacked column on mobile (the controls keep their full width). */
.le-filter-strip[b-e60eyqwp67] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.le-filter[b-e60eyqwp67] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    overflow: hidden;
    min-width: 0;
}

.le-filter:focus-within[b-e60eyqwp67] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-ring);
}

.le-filter-grow[b-e60eyqwp67] {
    flex: 1;
    min-width: 14rem;
    max-width: 32rem;
}

.le-filter-label[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    background-color: var(--color-panel);
    border-right: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.le-filter-label i[b-e60eyqwp67] {
    font-size: 0.9rem;
    color: var(--color-accent);
}

.le-filter-select[b-e60eyqwp67],
.le-filter-input[b-e60eyqwp67] {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0.3rem 0.55rem;
    color: var(--color-text);
    font-size: 0.8rem;
    min-width: 0;
}

.le-filter-input[b-e60eyqwp67] {
    flex: 1;
}

.le-filter-input[b-e60eyqwp67]::placeholder {
    color: var(--color-text-subtle);
    font-style: italic;
}

.le-filter-clear[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--color-border-soft);
    color: var(--color-text-subtle);
    cursor: pointer;
}

.le-filter-clear:hover[b-e60eyqwp67] {
    color: var(--color-danger);
    background-color: var(--color-border-soft);
}

:root[data-viewport="mobile"] .le-filter-strip[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-filter-strip[b-e60eyqwp67] {
    flex-direction: column;
    align-items: stretch;
}

:root[data-viewport="mobile"] .le-filter[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-filter[b-e60eyqwp67] {
    width: 100%;
}

/* ── Tab strip ─────────────────────────────────────────────────────────── */

.le-tabs[b-e60eyqwp67] {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
}

.le-tab[b-e60eyqwp67] {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: -1px; /* overlap the tab strip's border-bottom */
}

.le-tab:hover[b-e60eyqwp67] {
    color: var(--color-text);
}

.le-tab.is-active[b-e60eyqwp67] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.le-tab:focus-visible[b-e60eyqwp67] {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-accent-ring);
    border-radius: var(--radius-sm);
}

.le-tab-count[b-e60eyqwp67] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ── List rows ─────────────────────────────────────────────────────────── */

.le-list[b-e60eyqwp67] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-panel);
}

.le-row[b-e60eyqwp67] {
    display: grid;
    /* chevron | name (user pill + title) | count pills | trace id | time */
    grid-template-columns: 1.5rem minmax(0, 1fr) auto minmax(0, 18rem) minmax(0, 11rem);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.85rem;
    transition: background-color 80ms ease;
    text-align: left;
    width: 100%;
}

/* When a row is rendered as a <button> (clickable trace), strip the default chrome
   so it looks identical to the static <div> rows in the Spans tab. */
button.le-row[b-e60eyqwp67] {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.le-row:last-child[b-e60eyqwp67] {
    border-bottom: 0;
}

.le-row:hover[b-e60eyqwp67] {
    background: var(--color-accent-soft);
}

.le-row:focus-visible[b-e60eyqwp67] {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--color-accent-ring);
}

.le-row-clickable.is-open[b-e60eyqwp67] {
    background: var(--color-accent-soft);
}

.le-row-chevron[b-e60eyqwp67] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color 80ms ease;
}

.le-row:hover .le-row-chevron[b-e60eyqwp67],
.le-row-clickable.is-open .le-row-chevron[b-e60eyqwp67] {
    color: var(--color-accent);
}

/* Name cell now holds the user pill + title text side by side. */
.le-row-name[b-e60eyqwp67] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.le-row-title[b-e60eyqwp67] {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.le-row-counts[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Spans tab rows have no chevron / counts — keep them aligned with the trace rows
   by reserving the same column tracks. */
.le-list > .le-row:not(.le-row-clickable)[b-e60eyqwp67] {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto minmax(0, 18rem) minmax(0, 11rem);
}
.le-list > .le-row:not(.le-row-clickable) .le-row-name[b-e60eyqwp67] {
    grid-column: 2;
}
.le-list > .le-row:not(.le-row-clickable) .le-row-id[b-e60eyqwp67] {
    grid-column: 4;
}
.le-list > .le-row:not(.le-row-clickable) .le-row-time[b-e60eyqwp67] {
    grid-column: 5;
}

/* ── Trace detail (expanded under a trace row) ────────────────────────── */

.le-tree[b-e60eyqwp67] {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
    padding: var(--space-2) 0;
}

/* ── Per-trace toolbar (mode badge + search) ─────────────────────────── */

.le-detail-toolbar[b-e60eyqwp67] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-panel);
}

.le-detail-mode[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.le-detail-mode i[b-e60eyqwp67] {
    font-size: 0.95rem;
}

/* Sort toggle: tree mode flips ROOT order (siblings stay chronological).
   Search mode flips the visible event list. */
.le-detail-sort[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
    white-space: nowrap;
}

.le-detail-sort:hover[b-e60eyqwp67] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.le-detail-sort i[b-e60eyqwp67] {
    font-size: 0.95rem;
}

/* Diagnostic: shows how many of the fetched events are spans vs logs. If "0 spans"
   appears, the Data API isn't returning OTel events and we can investigate from there. */
.le-detail-fetched[b-e60eyqwp67] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}
.le-fetched-num[b-e60eyqwp67] {
    color: var(--color-text);
    font-weight: 600;
    font-family: var(--font-mono);
}
.le-fetched-breakdown[b-e60eyqwp67] {
    color: var(--color-text-subtle);
    font-size: 0.72rem;
}
.le-fetched-breakdown strong[b-e60eyqwp67] {
    color: var(--color-text);
    font-weight: 600;
}

.le-detail-search[b-e60eyqwp67] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 28rem;
}

.le-detail-search > i[b-e60eyqwp67] {
    position: absolute;
    left: 10px;
    color: var(--color-text-subtle);
    font-size: 0.95rem;
    pointer-events: none;
}

.le-detail-search input[b-e60eyqwp67] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 5px 10px 5px 30px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.78rem;
    font-family: var(--font-family);
}

.le-detail-search input:focus[b-e60eyqwp67] {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.le-detail-search-count[b-e60eyqwp67] {
    position: absolute;
    right: 10px;
    color: var(--color-text-subtle);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    pointer-events: none;
}

/* ── Detail rows (one per event) ──────────────────────────────────────── */

.le-detail-row[b-e60eyqwp67] {
    /* Fixed-width columns across ALL rows so time / level / message / span all line up
       regardless of the row's tree depth. Indentation is applied INSIDE the chevron
       gutter via padding-left rather than widening the column. */
    display: grid;
    grid-template-columns: 9rem 8rem 7.5rem minmax(0, 1fr) 7rem;
    align-items: center;
    gap: var(--space-3);
    padding: 6px var(--space-4);
    font-size: 0.8rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    position: relative;
}

.le-detail-row:last-child[b-e60eyqwp67] {
    border-bottom: 0;
}

.le-detail-row:hover[b-e60eyqwp67] {
    background: var(--color-accent-soft);
}

.le-detail-row.is-open[b-e60eyqwp67] {
    background: var(--color-accent-soft);
}

/* Span events get a subtle violet stripe on the far left so they stand out
   from log events at the same depth. Logs get a neutral one. */
.le-detail-row.is-tree.is-span[b-e60eyqwp67] {
    border-left: 3px solid #c4b5fd;
}

.le-detail-row.is-tree.is-log[b-e60eyqwp67] {
    border-left: 3px solid #e2e8f0;
}

.le-detail-row.is-tree.is-span:hover[b-e60eyqwp67],
.le-detail-row.is-tree.is-span.is-open[b-e60eyqwp67] {
    border-left-color: #8b5cf6;
}

/* Search-results mode (no tree): keep the simple accent stripe for span rows. */
.le-detail-row:not(.is-tree).is-span[b-e60eyqwp67] {
    border-left: 2px solid var(--color-accent);
    padding-left: calc(var(--space-4) - 2px);
}

.le-detail-chev[b-e60eyqwp67] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 0.95rem;
    /* Indent the chevron/icon by depth INSIDE this fixed-width column so the next
       columns (time / level / message / span) stay aligned across rows. */
    padding-left: calc(var(--depth, 0) * 18px);
    position: relative;
    overflow: hidden;
}

.le-detail-row:hover .le-detail-chev[b-e60eyqwp67],
.le-detail-row.is-open .le-detail-chev[b-e60eyqwp67] {
    color: var(--color-accent);
}

/* Vertical guide line behind every tree row at depth > 0 — a dashed dropper that
   sits at the row's indent level so siblings share a clear vertical alignment. */
.le-detail-row.is-tree[b-e60eyqwp67]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* Same x as the chevron's indent: row's left padding + (depth-1) * 18px + half-icon. */
    left: calc(var(--space-4) + (var(--depth, 0) - 1) * 18px + 12px);
    width: 0;
    border-left: 1px dashed #e2e8f0;
}

/* Depth-0 rows are root spans — no ancestor line. */
.le-detail-row.is-tree[style*="--depth: 0"][b-e60eyqwp67]::before {
    display: none;
}

/* Horizontal connector from the guide line into the chevron icon (depth > 0 only). */
.le-detail-row.is-tree .le-detail-chev[b-e60eyqwp67]::before {
    content: "";
    position: absolute;
    left: calc(var(--depth, 0) * 18px - 6px);
    top: 50%;
    width: 12px;
    height: 1px;
    background: #cbd5e1;
}

.le-detail-row.is-tree[style*="--depth: 0"] .le-detail-chev[b-e60eyqwp67]::before {
    /* depth 0 — root span, no horizontal connector */
    content: none;
}

/* Tree node icons — dots + toggles. */
.le-tree-toggle[b-e60eyqwp67] {
    color: #8b5cf6;
    font-size: 1.05rem;
}

.le-tree-dot[b-e60eyqwp67] {
    font-size: 0.5rem;
}

.le-tree-dot-span[b-e60eyqwp67] {
    color: #8b5cf6;
}

.le-tree-dot-log[b-e60eyqwp67] {
    color: #94a3b8;
    font-size: 0.45rem;
}

/* ── Sub-row property bullet list (expanded under a detail row) ────────── */

.le-detail-props[b-e60eyqwp67] {
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
    border-bottom: 1px solid var(--color-border-soft);
    /* Indent the property panel by the same amount as its parent row's tree depth so
       it visually attaches to the right row even in a deep tree. The base offset clears
       the chevron column (9rem from the row grid) and the row's left padding (var(--space-4)). */
    padding: var(--space-3) var(--space-4) var(--space-3)
             calc(var(--space-4) + 9rem + (var(--depth, 0) * 18px));
}

.le-prop-list[b-e60eyqwp67] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each property is a card-like row with a coloured left-stripe (defined per category below). */
.le-prop-item[b-e60eyqwp67] {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: 6px 10px 6px 12px;
    background: #ffffff;
    border: 1px solid var(--color-border-soft);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

/* Coloured left-stripes per property category — pure visual aid for scanning. */
.le-prop-item[b-e60eyqwp67]                  { border-left-color: var(--color-border); }
.le-prop-item-time[b-e60eyqwp67]             { border-left-color: #94a3b8; }
.le-prop-item-level[b-e60eyqwp67]            { border-left-color: #1d4ed8; }
.le-prop-item-msg[b-e60eyqwp67]              { border-left-color: #15803d; }
.le-prop-item-id[b-e60eyqwp67]               { border-left-color: #6d28d9; }
.le-prop-item-user[b-e60eyqwp67]             { border-left-color: #15803d; }
.le-prop-item-exception[b-e60eyqwp67]        { border-left-color: #b91c1c; background: #fff5f5; }

.le-prop-key[b-e60eyqwp67] {
    color: #475569;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.le-prop-val[b-e60eyqwp67] {
    color: #0f172a;
    word-break: break-word;
    min-width: 0;
    font-size: 0.82rem;
}

.le-prop-val code[b-e60eyqwp67] {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: #1e293b;
    background: #eef2f7;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.le-prop-val-pre pre[b-e60eyqwp67] {
    margin: 4px 0 0;
    padding: var(--space-2);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #7f1d1d;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow: auto;
}

.le-detail-row:hover[b-e60eyqwp67] {
    background: var(--color-accent-soft);
}

.le-detail-head[b-e60eyqwp67] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: 6px;
    cursor: default;
}

.le-detail-head:hover[b-e60eyqwp67],
.le-detail-head.is-open[b-e60eyqwp67] {
    background: transparent;
}

/* Header row never has the span stripe even if it inherits is-span markup elsewhere. */
.le-detail-head.is-span[b-e60eyqwp67] {
    border-left: 0;
    padding-left: var(--space-4);
}

.le-detail-time[b-e60eyqwp67] {
    color: #1d4ed8;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.le-detail-message[b-e60eyqwp67] {
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.le-detail-row.is-span .le-detail-message[b-e60eyqwp67] {
    font-weight: 500;
}

.le-detail-span code[b-e60eyqwp67] {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-muted);
    background: transparent;
    padding: 0;
}

/* ── Pills (level chips, count chips, user chips) ────────────────────── */

.le-pill[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.le-pill i[b-e60eyqwp67] {
    font-size: 0.85rem;
    line-height: 1;
}

/* Level pills. Each level gets a tinted background + darker text + same-tone border so the
   colour reads at a glance even in dark mode. Span = violet (distinct from info blue). */
.le-pill-span[b-e60eyqwp67] {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #ddd6fe;
}
.le-pill-info[b-e60eyqwp67] {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.le-pill-warn[b-e60eyqwp67] {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
}
.le-pill-error[b-e60eyqwp67] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
.le-pill-debug[b-e60eyqwp67] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

/* Trace-row count pills — same tones as level pills above so spans/logs in the row header
   and in the detail level column reinforce each other. */
.le-pill-log[b-e60eyqwp67] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

/* User identity pill (trace row only). */
.le-pill-user[b-e60eyqwp67] {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    font-weight: 600;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.le-pill-system[b-e60eyqwp67] {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    font-weight: 600;
}

.le-tree-loading[b-e60eyqwp67],
.le-tree-empty[b-e60eyqwp67] {
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* (.le-row-name layout lives further up — it's now a flex row holding the user pill
   + the title text. The text styling moved to .le-row-title.) */

.le-row-id[b-e60eyqwp67] {
    color: var(--color-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.le-row-id code[b-e60eyqwp67] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background: transparent;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100% - 24px);
    vertical-align: middle;
}

/* Copy-to-clipboard button — small, inline, only visible on hover of its container row.
   Used next to TraceId / SpanId / ParentSpanId so values can be pasted into Seq's UI. */
.le-copy-btn[b-e60eyqwp67] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 6px;
    color: var(--color-text-subtle);
    cursor: pointer;
    font-size: 0.85rem;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 80ms ease, color 80ms ease;
}

.le-row:hover .le-copy-btn[b-e60eyqwp67],
.le-row.is-open .le-copy-btn[b-e60eyqwp67],
.le-prop-item:hover .le-copy-btn[b-e60eyqwp67],
.le-detail-row.is-open .le-copy-btn[b-e60eyqwp67] {
    opacity: 1;
}

.le-copy-btn:hover[b-e60eyqwp67] {
    color: var(--color-accent);
}

.le-copy-btn:focus-visible[b-e60eyqwp67] {
    opacity: 1;
    outline: 0;
    color: var(--color-accent);
}

.le-row-time[b-e60eyqwp67] {
    color: #1e293b;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

/* ── State (empty / disconnected / loading) ───────────────────────────── */

.le-state[b-e60eyqwp67] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    padding: var(--space-6);
}

.le-state-empty[b-e60eyqwp67] {
    text-align: center;
    color: var(--color-text-muted);
}

.le-state-empty i[b-e60eyqwp67] {
    font-size: 2.4rem;
    color: var(--color-text-subtle);
    display: block;
    margin-bottom: var(--space-2);
}

.le-state-empty h5[b-e60eyqwp67] {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
}

.le-state-empty p[b-e60eyqwp67] {
    margin: 0;
    font-size: 0.85rem;
}

/* ── Journeys tab ─────────────────────────────────────────────────────── */

/* Journey rows get a subtle amber-left-border so they are visually distinct
   from the violet-accented trace rows on the Traces tab. */
.le-row-journey[b-e60eyqwp67] {
    border-left: 3px solid #fde68a;
}

.le-row-journey.is-open[b-e60eyqwp67],
.le-row-journey:hover[b-e60eyqwp67] {
    border-left-color: #f59e0b;
}

/* "N traces" count badge inside the journey row name cell. */
.le-pill-journey-count[b-e60eyqwp67] {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Session chip on the Traces tab — a teal/emerald chip that's visually distinct
   from span/log count pills and clearly signals "click to see the journey". */
button.le-pill-session[b-e60eyqwp67] {
    appearance: none;
    border: 1px solid #a7f3d0;
    background: #d1fae5;
    color: #065f46;
    cursor: pointer;
    font-family: var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.7rem;
    font-weight: 600;
    transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
}

button.le-pill-session:hover[b-e60eyqwp67] {
    background: #a7f3d0;
    border-color: #059669;
    color: #064e3b;
}

button.le-pill-session:focus-visible[b-e60eyqwp67] {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

/* ── Phase 7.3 — Pre-authentication journey styling ───────────────────── */

/* Pre-auth journeys (Login / MFA / sign-in callback before the session is
   minted) get a muted gray left-border instead of the warm amber used for
   user journeys, so they read as distinct at a glance. */
.le-row-journey-preauth[b-e60eyqwp67] {
    border-left-color: var(--color-text-subtle);
}

.le-row-journey-preauth.is-open[b-e60eyqwp67],
.le-row-journey-preauth:hover[b-e60eyqwp67] {
    border-left-color: var(--color-text-muted);
}

/* "Pre-auth" identity chip — same shape as the user/system pills,
   neutral grey tone. */
.le-pill-preauth[b-e60eyqwp67] {
    background: var(--color-border-soft);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* ── Phase 7.4 — Unified hierarchical drill-down container ───────────── */

/* Container that holds the <JourneyTreeView> when a session row is expanded.
   Replaces the old flat trace summary list. The amber left-border ties the
   tree visually to its parent session row. */
.le-journey-tree[b-e60eyqwp67] {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
    border-left: 3px solid #fde68a;
    padding: var(--space-2) 0;
}

/* Match preauth's accent for trees expanded under preauth journeys. */
.le-row-journey-preauth.is-open + .le-journey-tree[b-e60eyqwp67] {
    border-left-color: var(--color-text-muted);
}

/* ── Journey expanded trace sub-list (legacy — kept for backward compat) ── */

.le-journey-traces[b-e60eyqwp67] {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
    border-left: 3px solid #fde68a;
}

/* Header row */
.le-journey-trace-head[b-e60eyqwp67] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto minmax(0, 18rem) 8rem;
    align-items: center;
    gap: var(--space-3);
    padding: 6px var(--space-4);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-panel);
}

/* Trace sub-rows */
.le-journey-trace-row[b-e60eyqwp67] {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;

    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto minmax(0, 18rem) 8rem;
    align-items: center;
    gap: var(--space-3);
    padding: 6px var(--space-4);
    font-size: 0.82rem;
    transition: background-color 80ms ease;
}

.le-journey-trace-row:last-child[b-e60eyqwp67] {
    border-bottom: 0;
}

.le-journey-trace-row:hover[b-e60eyqwp67] {
    background: var(--color-accent-soft);
}

.le-journey-trace-row:focus-visible[b-e60eyqwp67] {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--color-accent-ring);
}

/* Index number cell — mono, muted, right-aligned. */
.le-journey-trace-num[b-e60eyqwp67] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    text-align: right;
}

/* Trace name — same truncation behaviour as .le-row-title. */
.le-journey-trace-name[b-e60eyqwp67] {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.le-journey-trace-counts[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.le-journey-trace-id[b-e60eyqwp67] {
    color: var(--color-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.le-journey-trace-id code[b-e60eyqwp67] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background: transparent;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100% - 24px);
    vertical-align: middle;
}

.le-journey-trace-time[b-e60eyqwp67] {
    color: #1e293b;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* At narrower viewports the timestamp column gets cramped — collapse it onto
   its own line. Plain descendant selector (no ::deep) so the b-xxxx scope
   attribute attaches to .le-row, which is authored in this component. */
:root[data-viewport="mobile"] .le-row[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-row[b-e60eyqwp67] {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-2);
}

:root[data-viewport="mobile"] .le-row-id[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-row-id[b-e60eyqwp67],
:root[data-viewport="mobile"] .le-row-time[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-row-time[b-e60eyqwp67] {
    text-align: left;
}

/* Journey trace sub-rows collapse the id + time columns at mobile. */
:root[data-viewport="mobile"] .le-journey-trace-row[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-journey-trace-row[b-e60eyqwp67] {
    grid-template-columns: 1.5rem 1fr auto;
    gap: var(--space-1);
    padding: var(--space-2);
}

:root[data-viewport="mobile"] .le-journey-trace-id[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-journey-trace-id[b-e60eyqwp67],
:root[data-viewport="mobile"] .le-journey-trace-time[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-journey-trace-time[b-e60eyqwp67],
:root[data-viewport="mobile"] .le-journey-trace-head[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-journey-trace-head[b-e60eyqwp67] {
    display: none;
}

/* Session pill is icon-only at mobile (no label text) — the icon is enough to signal "journey". */
:root[data-viewport="mobile"] button.le-pill-session i[b-e60eyqwp67],
:root[data-viewport="mobile-l"] button.le-pill-session i[b-e60eyqwp67] {
    margin-right: 0;
}

/* ── Phase 1 — error visibility pills + row tinting ─────────────────────────
   The `.le-pill-error` style above uses hex colours from the legacy palette; we
   keep that for backward compatibility and add a token-driven `.le-pill-warning`
   for the new warning pill so any future re-skin via theme tokens carries through.
   `.has-errors` and `.has-warnings` are row-level tints applied to every list-row
   button — a faint left-border accent + slightly-tinted background so the user can
   see at a glance which traces / journeys contain failures even before reading
   the pill text. */

.le-pill-warning[b-e60eyqwp67] {
    background: var(--color-warn-soft);
    color: var(--color-warn);
    border-color: var(--color-warn);
}

/* Row tint when a Trace or Journey row carries at least one Error / Fatal event.
   Uses a 3-px left-border accent (a common "this row needs attention" pattern) and
   a 6 % danger background wash so it remains readable on hover. */
.le-row.has-errors[b-e60eyqwp67] {
    border-left: 3px solid var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

.le-row.has-errors:hover[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

/* Row tint when the row has warnings but no errors. Same idea but warn-toned. */
.le-row.has-warnings[b-e60eyqwp67] {
    border-left: 3px solid var(--color-warn);
    background: color-mix(in srgb, var(--color-warn) 4%, transparent);
}

.le-row.has-warnings:hover[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-warn) 8%, transparent);
}

/* ── Top-of-body status bar — "12 errors · 38 warnings in this window" ──────
   First thing the user sees on every tab so the severity of the active window is
   visible without reading any rows. Hidden when both totals are zero. */
.le-statusbar[b-e60eyqwp67] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.le-statusbar-chip[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    border: 1px solid transparent;
}

.le-statusbar-chip-error[b-e60eyqwp67] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.le-statusbar-chip-warning[b-e60eyqwp67] {
    background: var(--color-warn-soft);
    color: var(--color-warn);
    border-color: var(--color-warn);
}

.le-statusbar-meta[b-e60eyqwp67] {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: 0.8rem;
}

:root[data-viewport="mobile"] .le-statusbar[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-statusbar[b-e60eyqwp67] {
    margin: 0 var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-1);
}

:root[data-viewport="mobile"] .le-statusbar-meta[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-statusbar-meta[b-e60eyqwp67] {
    width: 100%;
    margin-left: 0;
    text-align: right;
}

/* ── Phase 2 — error-first UX styling ─────────────────────────────────────── */

/* Error rows inside the trace detail expansion. Strong danger-tone left border so
   the eye lands on errors even in a 100-row tree. Slight background wash carries
   the tone through the row body without making the text unreadable. */
.le-detail-row.is-error[b-e60eyqwp67] {
    border-left: 3px solid var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

.le-detail-row.is-error:hover[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

/* Warning rows — same approach with the warn token. */
.le-detail-row.is-warning[b-e60eyqwp67] {
    border-left: 3px solid var(--color-warn);
    background: color-mix(in srgb, var(--color-warn) 4%, transparent);
}

.le-detail-row.is-warning:hover[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-warn) 8%, transparent);
}

/* "Jump to first error" button in the detail toolbar — danger tone so it advertises
   itself as "there are errors here". Only renders when the trace has at least one
   Error / Fatal event so this button never appears on clean traces. */
.le-detail-jump-error[b-e60eyqwp67] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, transform 80ms ease;
}

.le-detail-jump-error:hover[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-danger) 18%, var(--color-panel));
}

.le-detail-jump-error:active[b-e60eyqwp67] {
    transform: scale(0.97);
}

/* Pulse animation applied to the scroll target for 1.5 s so the user sees where
   the "Jump to first error" button took them. Triggered from log-explorer-interop.js. */
@keyframes le-row-pulse-keyframes-b-e60eyqwp67 {
    0%   { box-shadow: 0 0 0 0 var(--color-danger); }
    50%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-danger) 30%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.le-row-pulse[b-e60eyqwp67] {
    animation: le-row-pulse-keyframes-b-e60eyqwp67 1.5s ease-out;
}

/* ── Flat events tab (LogViewer demoted-to-tab consolidation) ──────────── */

.le-flat-body[b-e60eyqwp67] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
}

/* Toolbar above the list — Logs-only / Show-spans toggle + explanatory hint. */
.le-flat-toolbar[b-e60eyqwp67] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--color-panel);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
}

.le-flat-hint[b-e60eyqwp67] {
    color: var(--color-text-muted);
    line-height: 1.4;
}

.le-flat-hint strong[b-e60eyqwp67] {
    color: var(--color-text);
    font-weight: 600;
}

/* Header row — same grid as data rows, but typographically distinct so the
   columns read as labels. Sticky so the labels stay visible during scroll. */
.le-flat-row-header[b-e60eyqwp67] {
    background: var(--color-bg) !important;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: default;
    border-bottom: 1px solid var(--color-border) !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.le-flat-row-header:hover[b-e60eyqwp67] {
    background: var(--color-bg) !important;
}

/* JSON block inside the property panel — for dictionaries / arrays / nested
   resource attributes (Seq's OTLP resource attributes come through as a
   nested dictionary). Without this we'd render the .NET type name. */
.le-flat-json[b-e60eyqwp67] {
    background: #f8fafc;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #1e293b;
    overflow-x: auto;
    margin: 4px 0 0;
    line-height: 1.45;
    max-height: 280px;
    overflow-y: auto;
    white-space: pre;
}

/* What-is-a-span explainer card — only renders when the user has flipped
   "Show spans" on. Plain English + concrete examples so the SPAN pill stops
   being a mystery. */
.le-flat-spans-explainer[b-e60eyqwp67] {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    border-left: 4px solid #7c3aed;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: 0.85rem;
    color: #1e293b;
    line-height: 1.55;
}

.le-flat-spans-explainer-head[b-e60eyqwp67] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.le-flat-spans-explainer-head strong[b-e60eyqwp67] {
    font-size: 0.95rem;
    color: #4c1d95;
}

.le-flat-spans-explainer-body[b-e60eyqwp67] {
    margin: 0 0 var(--space-2);
}

.le-flat-spans-explainer-examples[b-e60eyqwp67] {
    margin: var(--space-2) 0 var(--space-1);
    font-weight: 600;
    color: #4c1d95;
}

.le-flat-spans-examples[b-e60eyqwp67] {
    margin: 0 0 var(--space-2) var(--space-3);
    padding: 0;
    list-style: disc;
    font-size: 0.8rem;
    line-height: 1.7;
}

.le-flat-spans-examples li[b-e60eyqwp67] {
    margin: 0;
}

.le-flat-spans-examples code[b-e60eyqwp67] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #4c1d95;
    background: #ffffff;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid #c4b5fd;
}

.le-flat-spans-explainer-tip[b-e60eyqwp67] {
    margin: var(--space-2) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid #c4b5fd;
    color: #5b21b6;
    font-size: 0.78rem;
}

.le-flat-spans-explainer-tip strong[b-e60eyqwp67] {
    color: #4c1d95;
}

.le-flat-list[b-e60eyqwp67] {
    display: flex;
    flex-direction: column;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.le-flat-row[b-e60eyqwp67] {
    display: grid;
    grid-template-columns: 3px 110px 110px 130px 1fr 80px;
    gap: var(--space-2);
    padding: var(--space-2);
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.825rem;
}

.le-flat-row:last-of-type[b-e60eyqwp67] {
    border-bottom: none;
}

.le-flat-row:hover[b-e60eyqwp67] {
    background: var(--color-bg);
}

.le-flat-row.is-error[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-danger) 5%, transparent);
}

.le-flat-row.is-warning[b-e60eyqwp67] {
    background: color-mix(in srgb, var(--color-warn) 4%, transparent);
}

.le-flat-stripe[b-e60eyqwp67] {
    align-self: stretch;
    border-radius: 2px;
    background: var(--color-text-subtle);
}

.le-flat-stripe-error[b-e60eyqwp67] { background: var(--color-danger); }
.le-flat-stripe-warn[b-e60eyqwp67]  { background: var(--color-warn); }
.le-flat-stripe-info[b-e60eyqwp67]  { background: var(--color-accent); }
.le-flat-stripe-debug[b-e60eyqwp67] { background: var(--color-text-subtle); }
.le-flat-stripe-span[b-e60eyqwp67]  { background: #9333ea; }

.le-flat-time[b-e60eyqwp67] {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.le-flat-user[b-e60eyqwp67] {
    color: var(--color-text);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.le-flat-message[b-e60eyqwp67] {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.le-flat-duration[b-e60eyqwp67] {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    text-align: right;
    font-family: var(--font-mono);
}

.le-flat-detail[b-e60eyqwp67] {
    padding: var(--space-3);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.8rem;
}

.le-flat-exception[b-e60eyqwp67] {
    margin-bottom: var(--space-2);
}

.le-flat-exception pre[b-e60eyqwp67] {
    background: var(--color-panel);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-danger);
    overflow-x: auto;
    margin: var(--space-1) 0 0;
}

.le-flat-props[b-e60eyqwp67] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2px var(--space-2);
    margin: 0;
}

.le-flat-props dt[b-e60eyqwp67] {
    color: var(--color-text-muted);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.le-flat-props dd[b-e60eyqwp67] {
    margin: 0;
    color: var(--color-text);
    word-break: break-all;
}

.le-flat-more[b-e60eyqwp67] {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
}

/* Mobile — collapse columns into stacked rows */
:root[data-viewport="mobile"] .le-flat-row[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-row[b-e60eyqwp67] {
    grid-template-columns: 3px 1fr 80px;
    grid-template-rows: auto auto;
}

:root[data-viewport="mobile"] .le-flat-time[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-time[b-e60eyqwp67] {
    grid-column: 2 / 3;
    grid-row: 1;
}

:root[data-viewport="mobile"] .le-flat-level[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-level[b-e60eyqwp67] {
    grid-column: 3 / 4;
    grid-row: 1;
    text-align: right;
}

:root[data-viewport="mobile"] .le-flat-user[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-user[b-e60eyqwp67],
:root[data-viewport="mobile"] .le-flat-duration[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-duration[b-e60eyqwp67] {
    display: none;
}

:root[data-viewport="mobile"] .le-flat-message[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-message[b-e60eyqwp67] {
    grid-column: 2 / 4;
    grid-row: 2;
    white-space: normal;
}

:root[data-viewport="mobile"] .le-flat-props[b-e60eyqwp67],
:root[data-viewport="mobile-l"] .le-flat-props[b-e60eyqwp67] {
    grid-template-columns: 1fr;
}
/* /Components/Pages/Administration/LogViewer.razor.rz.scp.css */
/* ── Page shell ──────────────────────────────────────────────────────────── */

.orcanex-log-viewer-page[b-990w5vkiud] { background: var(--color-bg); }
.orcanex-log-viewer-body[b-990w5vkiud] { padding: var(--space-4); }

/* ── Stats row ───────────────────────────────────────────────────────────── */

.lv-stats-row[b-990w5vkiud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lv-stats-count[b-990w5vkiud] { color: var(--color-text-muted); }
.lv-stats-count strong[b-990w5vkiud] { color: var(--color-text); }

.lv-stats-extras[b-990w5vkiud] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.lv-stat-badge[b-990w5vkiud] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.lv-stat-error[b-990w5vkiud] { background: var(--color-danger-soft, rgba(239,68,68,0.1)); color: var(--color-danger); }
.lv-stat-warn[b-990w5vkiud]  { background: var(--color-warn-soft, rgba(245,158,11,0.1)); color: var(--color-warn); }

/* ── Table container ─────────────────────────────────────────────────────── */

.lv-table-container[b-990w5vkiud] {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 100%;
}

.lv-body[b-990w5vkiud] {
    height: calc(100vh - 380px);
    min-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Header + row grid ───────────────────────────────────────────────────── */

/* stripe(3px) | time(120) | level(90) | user(130) | type(110) | message(1fr) | duration(90) | action(36) */
.lv-header-row[b-990w5vkiud],
.lv-row[b-990w5vkiud] {
    display: grid;
    grid-template-columns: 3px 120px 90px 130px 110px 1fr 90px 36px;
    align-items: center;
    min-width: 600px;
}

.lv-header-row[b-990w5vkiud] {
    padding: 8px 12px 8px 0;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    position: sticky;
    top: 0;
    z-index: 10;
}

.lv-row[b-990w5vkiud] {
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background 0.12s;
    min-height: 44px;
}

.lv-row:hover[b-990w5vkiud] { background: var(--color-accent-soft); }

/* ── Severity stripe (first grid column) ─────────────────────────────────── */

.lv-row-error .lv-stripe[b-990w5vkiud]  { background: var(--color-danger); }
.lv-row-fatal .lv-stripe[b-990w5vkiud]  { background: var(--color-danger); }
.lv-row-warning .lv-stripe[b-990w5vkiud] { background: var(--color-warn); }

.lv-stripe[b-990w5vkiud] {
    align-self: stretch;
    border-radius: 0 2px 2px 0;
}

/* Row background tints */
.lv-row-error[b-990w5vkiud]   { background: var(--color-danger-soft, rgba(239,68,68,0.04)); }
.lv-row-fatal[b-990w5vkiud]   { background: var(--color-danger-soft, rgba(239,68,68,0.08)); }
.lv-row-warning[b-990w5vkiud] { background: var(--color-warn-soft, rgba(245,158,11,0.04)); }

.lv-row-error:hover[b-990w5vkiud]   { background: var(--color-danger-soft, rgba(239,68,68,0.09)); }
.lv-row-fatal:hover[b-990w5vkiud]   { background: var(--color-danger-soft, rgba(239,68,68,0.14)); }
.lv-row-warning:hover[b-990w5vkiud] { background: var(--color-warn-soft, rgba(245,158,11,0.09)); }

/* ── Cells ───────────────────────────────────────────────────────────────── */

.lv-hcell[b-990w5vkiud],
.lv-cell[b-990w5vkiud] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}

.lv-cell-time[b-990w5vkiud] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lv-time[b-990w5vkiud] {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
}

.lv-date[b-990w5vkiud] {
    font-size: 0.69rem;
    color: var(--color-text-muted);
}

.lv-cell-level .badge[b-990w5vkiud] {
    font-size: 0.69rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.lv-pill[b-990w5vkiud] {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-border-soft);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.lv-cell-message[b-990w5vkiud] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lv-message[b-990w5vkiud] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
}

.lv-dur[b-990w5vkiud] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Duration tiers */
.duration-normal[b-990w5vkiud]   { background: var(--color-border-soft); color: var(--color-text-muted); }
.duration-warning[b-990w5vkiud]  { background: rgba(245,158,11,0.12); color: #b45309; }
.duration-slow[b-990w5vkiud]     { background: rgba(239,68,68,0.08); color: var(--color-danger); }
.duration-critical[b-990w5vkiud] { background: var(--color-danger); color: #fff; }

/* ── Hover-reveal action button ──────────────────────────────────────────── */

.lv-cell-action[b-990w5vkiud] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lv-row-actions[b-990w5vkiud] {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.1s;
}

.lv-row:hover .lv-row-actions[b-990w5vkiud] { opacity: 1; }

.lv-action-btn[b-990w5vkiud] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.lv-action-btn:hover[b-990w5vkiud] {
    background: var(--color-border-soft);
    color: var(--color-text);
}

/* ── Event detail slide-out ──────────────────────────────────────────────── */

.log-detail-overlay[b-990w5vkiud] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1040;
}

.log-detail-panel[b-990w5vkiud] {
    position: fixed;
    top: 0;
    right: 0;
    width: 550px;
    max-width: 90vw;
    height: 100vh;
    background: var(--color-panel);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    animation: lv-slide-in-b-990w5vkiud 0.2s ease-out;
}

@keyframes lv-slide-in-b-990w5vkiud {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.detail-header[b-990w5vkiud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-bg);
}

.detail-body[b-990w5vkiud] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.detail-section[b-990w5vkiud] { margin-bottom: var(--space-5); }

.section-title[b-990w5vkiud] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-soft);
}

.message-full[b-990w5vkiud] {
    background: var(--color-bg);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    line-height: 1.5;
    word-break: break-word;
    color: var(--color-text);
}

.exception-text[b-990w5vkiud] {
    background: var(--color-danger-soft, rgba(239,68,68,0.08));
    color: var(--color-danger);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ── SQL panel ───────────────────────────────────────────────────────────── */

.sql-text[b-990w5vkiud] {
    background: #1e2933;
    color: #e9ecef;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.55;
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    border: 1px solid #2a3540;
}

.sql-params-table[b-990w5vkiud] {
    font-size: 0.85rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sql-params-table thead th[b-990w5vkiud] {
    background: var(--color-bg);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-soft);
    padding: 6px 10px;
}

.sql-params-table tbody td[b-990w5vkiud] {
    padding: 6px 10px;
    border-top: 1px solid var(--color-border-soft);
    vertical-align: top;
}

.sql-param-name[b-990w5vkiud] {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
}

.sql-param-value[b-990w5vkiud] {
    font-family: var(--font-mono);
    word-break: break-word;
    white-space: pre-wrap;
    color: var(--color-text);
}

.sql-param-type[b-990w5vkiud] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

/* ── Properties table ────────────────────────────────────────────────────── */

.properties-table[b-990w5vkiud] { font-size: 0.85rem; }

.properties-table .prop-key[b-990w5vkiud] {
    font-weight: 600;
    color: var(--color-text-muted);
    width: 140px;
    vertical-align: top;
    padding: 4px 8px 4px 0;
    white-space: nowrap;
}

.properties-table .prop-value[b-990w5vkiud] {
    color: var(--color-text);
    word-break: break-word;
    padding: 4px 0;
    white-space: pre-wrap;
}

.properties-table .prop-value-json[b-990w5vkiud] {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    max-height: 280px;
    overflow: auto;
    white-space: pre;
    margin: 0;
}

/* ── Trace correlation timeline ──────────────────────────────────────────── */

.trace-timeline[b-990w5vkiud] { margin-top: var(--space-3); overflow: hidden; }

.trace-event[b-990w5vkiud] {
    display: grid;
    grid-template-columns: 110px 120px 1fr 80px;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    align-items: center;
    font-size: 0.85rem;
}

.trace-event:last-child[b-990w5vkiud] { border-bottom: none; }

.trace-event.lv-row-error[b-990w5vkiud] {
    background: var(--color-danger-soft, rgba(239,68,68,0.05));
    border-left: 3px solid var(--color-danger);
    padding-left: 13px;
}

.trace-event.lv-row-warning[b-990w5vkiud] {
    background: var(--color-warn-soft, rgba(245,158,11,0.05));
    border-left: 3px solid var(--color-warn);
    padding-left: 13px;
}

.trace-time[b-990w5vkiud] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.time-offset[b-990w5vkiud] {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
}

.time-actual[b-990w5vkiud] {
    font-size: 0.69rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.trace-type-col[b-990w5vkiud] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.trace-type-col .badge[b-990w5vkiud] { font-size: 0.69rem; flex-shrink: 0; }

.log-type-badge[b-990w5vkiud] {
    display: inline-flex;
    align-items: center;
    font-size: 0.77rem;
    color: var(--color-text-muted);
    background: var(--color-border-soft);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    white-space: nowrap;
}

.trace-content[b-990w5vkiud] {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.trace-message[b-990w5vkiud] {
    color: var(--color-text);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.trace-duration-col[b-990w5vkiud] { text-align: right; min-width: 0; }

/* ── Auto-refresh pulse ──────────────────────────────────────────────────── */

@keyframes lv-pulse-b-990w5vkiud {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

:root[data-viewport="mobile"]   .orcanex-log-viewer-body[b-990w5vkiud],
:root[data-viewport="mobile-l"] .orcanex-log-viewer-body[b-990w5vkiud] {
    padding: var(--space-3) var(--space-2);
}

/* Collapse to 3-column grid at mobile: stripe | time | level | message */
:root[data-viewport="mobile"]   .lv-header-row[b-990w5vkiud],
:root[data-viewport="mobile-l"] .lv-header-row[b-990w5vkiud],
:root[data-viewport="mobile"]   .lv-row[b-990w5vkiud],
:root[data-viewport="mobile-l"] .lv-row[b-990w5vkiud] {
    grid-template-columns: 3px 100px 80px 1fr;
    min-width: unset;
}

/* Stats badges hidden on mobile — the left stripe on rows still signals severity */
:root[data-viewport="mobile"]   .lv-stat-badge[b-990w5vkiud],
:root[data-viewport="mobile-l"] .lv-stat-badge[b-990w5vkiud] {
    display: none;
}

/* Tighten the body height at mobile */
:root[data-viewport="mobile"]   .lv-body[b-990w5vkiud],
:root[data-viewport="mobile-l"] .lv-body[b-990w5vkiud] {
    height: calc(100vh - 280px) !important;
    min-height: 320px !important;
}

/* Slide-out covers full viewport at mobile */
:root[data-viewport="mobile"]   .log-detail-panel[b-990w5vkiud],
:root[data-viewport="mobile-l"] .log-detail-panel[b-990w5vkiud] {
    width: 100vw;
    max-width: 100vw;
}

/* SQL block shrinks font at mobile */
:root[data-viewport="mobile"]   .sql-text[b-990w5vkiud],
:root[data-viewport="mobile-l"] .sql-text[b-990w5vkiud] {
    max-height: 240px;
    font-size: 0.77rem;
    padding: 10px 12px;
}

/* Trace timeline collapses to 2-row layout at mobile */
:root[data-viewport="mobile"]   .trace-event[b-990w5vkiud],
:root[data-viewport="mobile-l"] .trace-event[b-990w5vkiud] {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 8px 12px;
}

:root[data-viewport="mobile"]   .trace-content[b-990w5vkiud],
:root[data-viewport="mobile-l"] .trace-content[b-990w5vkiud] {
    grid-column: 1 / -1;
    order: 3;
}
/* /Components/Pages/Administration/PiiResolve.razor.rz.scp.css */
/* DPO PII Resolve helper — small two-step input + result page. */

.pir-page[b-ml1eo8ghuu] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pir-body[b-ml1eo8ghuu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    max-width: 920px;
}

.pir-explainer-text[b-ml1eo8ghuu] {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

.pir-explainer-text-muted[b-ml1eo8ghuu] {
    color: var(--color-text-muted);
    font-size: 0.825rem;
}

.pir-explainer-list[b-ml1eo8ghuu] {
    margin: var(--space-2) 0 0 1.2rem;
    padding: 0;
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.6;
}

.pir-explainer-list li + li[b-ml1eo8ghuu] {
    margin-top: var(--space-1);
}

.pir-explainer-text code[b-ml1eo8ghuu],
.pir-explainer-list code[b-ml1eo8ghuu] {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* ── Query card ───────────────────────────────────────────────────────── */

.pir-toggle-row[b-ml1eo8ghuu] {
    display: flex;
    align-items: center;
    height: var(--h-field);
}

.pir-toggle[b-ml1eo8ghuu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text);
}

.pir-toggle input[type="checkbox"][b-ml1eo8ghuu] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.pir-query-actions[b-ml1eo8ghuu] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-3);
}

/* ── Result card ──────────────────────────────────────────────────────── */

.pir-result-meta[b-ml1eo8ghuu] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
}

.pir-result-meta dt[b-ml1eo8ghuu] {
    color: var(--color-text-muted);
    font-weight: 600;
}

.pir-result-meta dd[b-ml1eo8ghuu] {
    margin: 0;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pir-pii-divider[b-ml1eo8ghuu] {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

.pir-hash[b-ml1eo8ghuu] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--color-bg);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    word-break: break-all;
}

.pir-sar-link[b-ml1eo8ghuu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}

.pir-sar-link:hover[b-ml1eo8ghuu] {
    text-decoration: underline;
}

.pir-erased[b-ml1eo8ghuu] {
    color: var(--color-warn);
    font-weight: 600;
}

.pir-no-vault[b-ml1eo8ghuu] {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

:root[data-viewport="mobile"] .pir-body[b-ml1eo8ghuu],
:root[data-viewport="mobile-l"] .pir-body[b-ml1eo8ghuu] {
    padding: var(--space-2);
}

:root[data-viewport="mobile"] .pir-result-meta[b-ml1eo8ghuu],
:root[data-viewport="mobile-l"] .pir-result-meta[b-ml1eo8ghuu] {
    grid-template-columns: 1fr;
}

:root[data-viewport="mobile"] .pir-result-meta dt[b-ml1eo8ghuu],
:root[data-viewport="mobile-l"] .pir-result-meta dt[b-ml1eo8ghuu] {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
}
/* /Components/Pages/Administration/SarLookup.razor.rz.scp.css */
/*
    Subject Access Lookup page — token-driven layout matching the
    Audit Integrity Verifier page's visual language.
*/

.sar-page[b-m1swwvcf5h] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sar-body[b-m1swwvcf5h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.sar-explainer-text[b-m1swwvcf5h] {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.55;
}

.sar-explainer-text + .sar-explainer-text[b-m1swwvcf5h] {
    margin-top: var(--space-2);
}

.sar-explainer-text-muted[b-m1swwvcf5h] {
    color: var(--color-text-muted);
    font-size: 0.825rem;
}

.sar-explainer-text code[b-m1swwvcf5h] {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.sar-mono[b-m1swwvcf5h] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* ── Query card actions row ───────────────────────────────────────────── */

.sar-query-actions[b-m1swwvcf5h] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-3);
}

/* ── Results card ─────────────────────────────────────────────────────── */

.sar-results-count[b-m1swwvcf5h] {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: 0.8rem;
}

.sar-empty[b-m1swwvcf5h] {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
}

.sar-empty i[b-m1swwvcf5h] {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-subtle);
}

.sar-empty p[b-m1swwvcf5h] {
    margin: 0;
    font-size: 0.875rem;
}

.sar-empty-hint[b-m1swwvcf5h] {
    margin-top: var(--space-2) !important;
    font-size: 0.8rem !important;
    color: var(--color-text-subtle);
}

/* ── Breakdown chips ──────────────────────────────────────────────────── */

.sar-summary[b-m1swwvcf5h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.sar-summary-chip[b-m1swwvcf5h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
}

.sar-summary-chip-label[b-m1swwvcf5h] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.sar-summary-chip-count[b-m1swwvcf5h] {
    background: var(--color-accent);
    color: #ffffff;
    border-radius: var(--radius-pill);
    padding: 0 6px;
    font-size: 0.75rem;
    min-width: 18px;
    text-align: center;
}

/* Zero-count chip — visually de-emphasised but still rendered so the operator
   sees every audit category was inspected. Border + label stay readable; the
   count badge fades to muted. */
.sar-summary-chip-empty[b-m1swwvcf5h] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.sar-summary-chip-empty .sar-summary-chip-count[b-m1swwvcf5h] {
    background: var(--color-border);
    color: var(--color-text-muted);
}

/* ── Subject identity card ────────────────────────────────────────────── */

.sar-identity-grid[b-m1swwvcf5h] {
    margin-top: var(--space-1);
}

.form-control-static[b-m1swwvcf5h] {
    display: block;
    min-height: var(--h-field);
    padding: 6px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.sar-identity-missing[b-m1swwvcf5h],
.sar-identity-erased[b-m1swwvcf5h] {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.5;
}

.sar-identity-missing[b-m1swwvcf5h] {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
}

.sar-identity-erased[b-m1swwvcf5h] {
    background: var(--color-danger-soft);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

/* ── Cases referenced card ────────────────────────────────────────────── */

.sar-case-list[b-m1swwvcf5h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.sar-case-chip[b-m1swwvcf5h] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-warn-soft);
    color: var(--color-warn);
    border: 1px solid var(--color-warn);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Event table ──────────────────────────────────────────────────────── */

.sar-table[b-m1swwvcf5h] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
}

.sar-table-row[b-m1swwvcf5h] {
    /* 5 columns: When / Activity / Case / Detail / Actor. Source-table +
       event-type folded into the single Activity column (friendly label
       primary, raw event-type as smaller secondary line). */
    display: grid;
    grid-template-columns: 140px 200px 60px 1fr 200px;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 0.825rem;
    color: var(--color-text);
}

/* Secondary event-type line under the friendly activity label —
   small + muted + mono so auditors can still see the raw EventType. */
.sar-event-secondary[b-m1swwvcf5h] {
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.sar-table-row:last-child[b-m1swwvcf5h] {
    border-bottom: none;
}

.sar-table-header[b-m1swwvcf5h] {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--color-border);
}

.sar-description[b-m1swwvcf5h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary actor line — email under the name, or "(unresolved)" tag under
   the truncated hash. Smaller + muted so the primary identity stands out. */
.sar-actor-secondary[b-m1swwvcf5h] {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

:root[data-viewport="mobile"] .sar-body[b-m1swwvcf5h],
:root[data-viewport="mobile-l"] .sar-body[b-m1swwvcf5h] {
    padding: var(--space-2);
    gap: var(--space-2);
}

:root[data-viewport="mobile"] .sar-table-row[b-m1swwvcf5h],
:root[data-viewport="mobile-l"] .sar-table-row[b-m1swwvcf5h] {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: var(--space-1);
}

:root[data-viewport="mobile"] .sar-table-header[b-m1swwvcf5h],
:root[data-viewport="mobile-l"] .sar-table-header[b-m1swwvcf5h] {
    display: none;
}

:root[data-viewport="mobile"] .sar-description[b-m1swwvcf5h],
:root[data-viewport="mobile-l"] .sar-description[b-m1swwvcf5h] {
    grid-column: 1 / -1;
    white-space: normal;
}

:root[data-viewport="mobile"] .sar-query-actions[b-m1swwvcf5h],
:root[data-viewport="mobile-l"] .sar-query-actions[b-m1swwvcf5h] {
    flex-direction: column;
    align-items: stretch;
}
/* /Components/Pages/Administration/SeqLogs.razor.rz.scp.css */
/* SuperAdmin embedded Seq view. The iframe fills the entire viewport below the
   topbar + page header so the embedded UI feels native rather than cramped. */

.seq-logs-page[b-y0o4tdy84y] {
    display: flex;
    flex-direction: column;
    /* Subtract topbar + page-header row + small gap. Tuned to leave the
       iframe flush with the viewport bottom on standard 1080p+ displays. */
    height: calc(100dvh - var(--h-topbar) - 72px);
    min-height: 500px;
    gap: var(--space-3);
}

.seq-logs-frame-wrapper[b-y0o4tdy84y] {
    flex: 1 1 0;
    min-height: 360px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-panel);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.seq-logs-frame[b-y0o4tdy84y] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Mobile — the embedded Seq UI is desktop-shaped, so the user will mostly
   use the "Pop out" action. Keep the iframe filling the available area. */
:root[data-viewport="mobile"] .seq-logs-page[b-y0o4tdy84y] {
    height: calc(100dvh - var(--h-mobile-tabs) - 64px);
    min-height: 360px;
}
/* /Components/Pages/Administration/SpecialistForm.razor.rz.scp.css */
/* SpecialistForm — Orcanex redesign */

.orcanex-specialist-form[b-0sxohztrva] {
    background: var(--color-bg);
    /*min-height: 100%;*/
}

.orcanex-specialist-form-loading[b-0sxohztrva] {
    padding: var(--space-4);
}

/* Combined header — back chevron, identity, KPIs, action buttons all in one row */
.orcanex-specialist-hero[b-0sxohztrva] {
    padding: var(--space-4) var(--space-4) 0;
}

.orcanex-specialist-hero-row[b-0sxohztrva] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.orcanex-specialist-hero-back[b-0sxohztrva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}

.orcanex-specialist-hero-back:hover[b-0sxohztrva] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-specialist-hero-id[b-0sxohztrva] {
    flex: 1;
    min-width: 0;
}

.orcanex-specialist-hero-name[b-0sxohztrva] {
    margin: 0 0 var(--space-1) 0;
    font-size: 1.54rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.orcanex-specialist-hero-meta[b-0sxohztrva] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-specialist-hero-role[b-0sxohztrva] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-specialist-hero-sep[b-0sxohztrva] {
    color: var(--color-text-subtle);
}

.orcanex-specialist-hero-email[b-0sxohztrva] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    text-decoration: none;
}

.orcanex-specialist-hero-email:hover[b-0sxohztrva] {
    color: var(--color-accent);
    text-decoration: underline;
}

.orcanex-specialist-hero-kpis[b-0sxohztrva] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.orcanex-specialist-hero-kpi[b-0sxohztrva] {
    text-align: center;
    min-width: 80px;
}

.orcanex-specialist-hero-kpi-label[b-0sxohztrva] {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.orcanex-specialist-hero-kpi-value[b-0sxohztrva] {
    font-size: 1.38rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}

.orcanex-specialist-hero-actions[b-0sxohztrva] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .orcanex-specialist-hero-kpis[b-0sxohztrva] { display: none; }
}

/* Tab strip */
.orcanex-specialist-tabs[b-0sxohztrva] {
    padding: var(--space-3) var(--space-4) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    margin: var(--space-3) 0 0;
}

.orcanex-tab[b-0sxohztrva] {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
    margin-bottom: -1px;
}

.orcanex-tab:hover[b-0sxohztrva] {
    color: var(--color-text);
}

.orcanex-tab.active[b-0sxohztrva] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Tab content */
.orcanex-specialist-tab-content[b-0sxohztrva] {
    padding: var(--space-4);
}

/* Legacy inline-style guards retained so the embedded SectionCards in the
   tab partials still align inside the new shell. */
[b-0sxohztrva] .row {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================================
   Mobile detail-page header — mirrors `.caseform-mobile-header`
   and `.client-details-mobile-header`. Back chevron + name title
   + role/city subtitle + single Edit/Save action. Hidden at
   tablet+ via plain `display: none`.
   ============================================================ */
.specialist-form-mobile-header[b-0sxohztrva] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    min-height: var(--h-topbar);
    flex-shrink: 0;
}

:root[data-viewport="mobile"]   .specialist-form-mobile-header[b-0sxohztrva],
:root[data-viewport="mobile-l"] .specialist-form-mobile-header[b-0sxohztrva] {
    display: flex;
}

.specialist-form-mobile-back[b-0sxohztrva] {
    width: var(--touch-target);
    height: var(--touch-target);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-left: -8px;
}

.specialist-form-mobile-back:hover[b-0sxohztrva] {
    background: var(--color-bg);
}

.specialist-form-mobile-titles[b-0sxohztrva] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.specialist-form-mobile-title[b-0sxohztrva] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.specialist-form-mobile-subtitle[b-0sxohztrva] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 36 × 36 icon-only Edit/Save button per the page-chrome rule. */
.specialist-form-mobile-header[b-0sxohztrva]  .orcanex-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
}
/* /Components/Pages/Administration/Specialists.razor.rz.scp.css */
/* Specialists list page — matches Cases page card-row pattern */

.orcanex-specialists-page[b-0eo03b4wkh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Defeat the global `.orcanex-frame-content > *:last-child` padding-bottom
   rule from tokens.css. The Specialists page handles its own internal
   scroll on `.orcanex-specialists-rows`; the global wrapper-level
   clearance only produces dead space below the list. The `::after`
   spacer on frame-content still gives the bottom-tab inset. Selector
   specificity (0,4,0) + Blazor scope → (0,5,0) wins over the global
   (0,4,0) rule. */
:root[data-viewport="mobile"]   .orcanex-frame-content .orcanex-specialists-page[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-frame-content .orcanex-specialists-page[b-0eo03b4wkh] {
    padding-bottom: 0 !important;
}

.orcanex-specialists-content[b-0eo03b4wkh] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 24px;
    gap: 12px;
    overflow: hidden;
}

/* At mobile, the desktop 24 px side + bottom padding eats viewport width
   from the cards and adds dead space below the list. Match the Cases /
   Clients mobile recipe: tight 8 px sides, 12 px bottom. */
:root[data-viewport="mobile"]   .orcanex-specialists-content[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-content[b-0eo03b4wkh] {
    padding: var(--space-2) var(--space-2) var(--space-3);
    gap: var(--space-2);
}

.orcanex-specialists-online-strip[b-0eo03b4wkh] { color: var(--color-text-muted); }
.orcanex-specialists-online-num[b-0eo03b4wkh]   { color: var(--color-success); font-weight: 600; }

/* Workload segment cards now use the shared `.orcanex-segments` /
   `.orcanex-segment` primitive defined in `wwwroot/css/orcanex/tokens.css`.
   See Cases.razor for the same pattern applied to pipeline stages. */

/* ─── Toolbar (now embedded in the page-header Toolbar slot) ─── */
.orcanex-specialists-chip-row[b-0eo03b4wkh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.orcanex-specialists-search[b-0eo03b4wkh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 260px;
    max-width: 100%;
    color: var(--color-text-muted);
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-specialists-search:focus-within[b-0eo03b4wkh] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-specialists-search-input[b-0eo03b4wkh] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
}

.orcanex-specialists-search-input[b-0eo03b4wkh]::placeholder { color: var(--color-text-subtle); }

.orcanex-specialists-search-clear[b-0eo03b4wkh] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}
.orcanex-specialists-search-clear:hover[b-0eo03b4wkh] { color: var(--color-text); }

.orcanex-specialists-divider[b-0eo03b4wkh] {
    width: 1px;
    height: 20px;
    background: var(--color-border);
}

.orcanex-specialists-chip[b-0eo03b4wkh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
}

.orcanex-specialists-sort-label[b-0eo03b4wkh] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-specialists-sort-select[b-0eo03b4wkh] {
    height: 28px;
    padding: 0 26px 0 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text);
    cursor: pointer;
}

.orcanex-specialists-sort-dir[b-0eo03b4wkh] {
    width: 28px;
    height: 28px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.orcanex-specialists-sort-dir:hover[b-0eo03b4wkh] { background: var(--color-bg); color: var(--color-text); }

.orcanex-specialists-filter-card[b-0eo03b4wkh] { flex-shrink: 0; }

/* ─── Rows ─── */
.orcanex-specialists-rows[b-0eo03b4wkh] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.orcanex-specialists-row[b-0eo03b4wkh] {
    padding: 12px 16px;
    display: grid;
    /* person | city | open cases | workload | tags | appts | status | last active | chevron */
    grid-template-columns: minmax(220px, 1.6fr) 130px 80px 220px minmax(140px, 1fr) 70px 110px 90px 24px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-specialists-row:hover[b-0eo03b4wkh] {
    background: var(--color-bg);
}

/* List mode: card (default) — each row is its own panel with rounded edges. */
.orcanex-specialists-rows[data-list-mode="card"][b-0eo03b4wkh] { gap: 8px; }
.orcanex-specialists-rows[data-list-mode="card"] .orcanex-specialists-row[b-0eo03b4wkh] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* List mode: tabular — rows packed inside a single panel, divider lines only.
   overflow-x is hidden so the rounded corners clip the rows; overflow-y must
   stay `auto` so the inner virtual list scrolls. */
.orcanex-specialists-rows[data-list-mode="tabular"][b-0eo03b4wkh] {
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    overflow-y: auto;
}
.orcanex-specialists-rows[data-list-mode="tabular"] .orcanex-specialists-row[b-0eo03b4wkh] {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-soft);
}
/* Mobile-stack reflow — single-column mini-card. Hide secondary columns
   (workload, tags, appts, last active); show person + status + chevron only. */
:root[data-viewport="mobile"]   .orcanex-specialists-row[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-row[b-0eo03b4wkh] {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "person  status"
        "city    chevron";
    padding: var(--space-3);
    gap: var(--space-2);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
}
:root[data-viewport="mobile"]   .orcanex-specialists-row > .orcanex-specialists-row-person[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-row > .orcanex-specialists-row-person[b-0eo03b4wkh] { grid-area: person; }
:root[data-viewport="mobile"]   .orcanex-specialists-row > .orcanex-specialists-row-city[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-row > .orcanex-specialists-row-city[b-0eo03b4wkh] { grid-area: city; }
:root[data-viewport="mobile"]   .orcanex-specialists-row > .orcanex-specialists-row-status[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-row > .orcanex-specialists-row-status[b-0eo03b4wkh] { grid-area: status; justify-self: end; }
:root[data-viewport="mobile"]   .orcanex-specialists-row > .orcanex-specialists-row-chevron[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-row > .orcanex-specialists-row-chevron[b-0eo03b4wkh] { grid-area: chevron; justify-self: end; }
:root[data-viewport="mobile"]   .orcanex-specialists-row > :not(.orcanex-specialists-row-person):not(.orcanex-specialists-row-city):not(.orcanex-specialists-row-status):not(.orcanex-specialists-row-chevron)[b-0eo03b4wkh],
:root[data-viewport="mobile-l"] .orcanex-specialists-row > :not(.orcanex-specialists-row-person):not(.orcanex-specialists-row-city):not(.orcanex-specialists-row-status):not(.orcanex-specialists-row-chevron)[b-0eo03b4wkh] {
    display: none;
}

.orcanex-specialists-rows[data-list-mode="tabular"] .orcanex-specialists-row:last-child[b-0eo03b4wkh] {
    border-bottom: none;
}

/* Person (avatar + name + email) */
.orcanex-specialists-row-person[b-0eo03b4wkh] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.orcanex-specialists-row-avatar[b-0eo03b4wkh] {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.orcanex-specialists-presence-dot[b-0eo03b4wkh] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-success);
    border: 2px solid var(--color-panel);
    box-shadow: 0 0 0 2px rgba(98, 179, 106, 0.18);
}

.orcanex-specialists-row-person-text[b-0eo03b4wkh] { min-width: 0; }

.orcanex-specialists-row-name[b-0eo03b4wkh] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-specialists-row-status-pill[b-0eo03b4wkh] {
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    flex-shrink: 0;
}

.orcanex-specialists-row-status-pill.is-active[b-0eo03b4wkh] {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-color: rgba(14, 143, 90, 0.25);
}

.orcanex-specialists-row-status-pill.is-disabled[b-0eo03b4wkh] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* Inactive specialists are de-emphasised in the list — kept legible but visibly
   secondary so an active row never gets confused with one that's been retired. */
.orcanex-specialists-row.is-inactive .orcanex-specialists-row-name span:first-child[b-0eo03b4wkh],
.orcanex-specialists-row.is-inactive .orcanex-specialists-row-meta[b-0eo03b4wkh] {
    color: var(--color-text-muted);
}
.orcanex-specialists-row.is-inactive .orcanex-specialists-row-cases-num[b-0eo03b4wkh] {
    color: var(--color-text-muted);
}
.orcanex-specialists-row.is-inactive[b-0eo03b4wkh]  .orcanex-avatar {
    opacity: 0.6;
}

.orcanex-specialists-row-meta[b-0eo03b4wkh] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-specialists-row-muted[b-0eo03b4wkh] { color: var(--color-text-subtle); font-size: 0.92rem; }

/* Open-cases count (the big number) */
.orcanex-specialists-row-cases[b-0eo03b4wkh] {
    text-align: center;
    line-height: 1.1;
}

.orcanex-specialists-row-cases-num[b-0eo03b4wkh] {
    font-size: 1.38rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.orcanex-specialists-row-cases-label[b-0eo03b4wkh] {
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
    margin-top: 2px;
}

/* Workload — single horizontal bar with a small text label underneath it.
   The bar fill is proportional to OpenCases / Overload (capped at 100%) so
   visually 26 cases reads bigger than 2. The label colour stays neutral so it
   is unambiguously a label, not a second progress segment. */
.orcanex-specialists-row-workload[b-0eo03b4wkh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    cursor: help;
}

.orcanex-specialists-workload-bar[b-0eo03b4wkh] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--color-border-soft);
    overflow: hidden;
}

.orcanex-specialists-workload-fill[b-0eo03b4wkh] {
    height: 100%;
    border-radius: 4px;
    transition: width var(--duration-enter) var(--ease-enter);
    min-width: 2px;
}

.workload-tone-neutral[b-0eo03b4wkh] { background: var(--color-text-subtle); }
.workload-tone-success[b-0eo03b4wkh] { background: var(--color-success); }
.workload-tone-accent[b-0eo03b4wkh]  { background: var(--color-accent); }
.workload-tone-warn[b-0eo03b4wkh]    { background: var(--color-warn); }
.workload-tone-danger[b-0eo03b4wkh]  { background: var(--color-danger); }

.orcanex-specialists-workload-label[b-0eo03b4wkh] {
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* Tags + simple cells */
.orcanex-specialists-row-tags[b-0eo03b4wkh] { min-width: 0; }
.orcanex-specialists-tags[b-0eo03b4wkh] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.orcanex-specialists-row-city[b-0eo03b4wkh],
.orcanex-specialists-row-appts[b-0eo03b4wkh] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
}

/* STATUS column — resource active flag (Active / Disabled).
   Single-line dot + label, matches the screenshot reference. */
.orcanex-specialists-row-status[b-0eo03b4wkh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.orcanex-specialists-status-dot[b-0eo03b4wkh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-subtle);
}

.orcanex-specialists-status-dot.status-tone-success[b-0eo03b4wkh] { background: var(--color-success); }
.orcanex-specialists-status-dot.status-tone-warn[b-0eo03b4wkh]    { background: var(--color-warn); }
.orcanex-specialists-status-dot.status-tone-muted[b-0eo03b4wkh]   { background: var(--color-text-subtle); }

.orcanex-specialists-status-label[b-0eo03b4wkh] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-specialists-status-label.status-tone-success[b-0eo03b4wkh] { color: var(--color-text); }
.orcanex-specialists-status-label.status-tone-warn[b-0eo03b4wkh]    { color: var(--color-warn); }
.orcanex-specialists-status-label.status-tone-muted[b-0eo03b4wkh]   { color: var(--color-text-muted); }

/* LAST ACTIVE column — presence timestamp ("12m ago", "just now", "—").
   Currently-online users get the success colour to draw the eye. */
.orcanex-specialists-row-lastactive[b-0eo03b4wkh] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-specialists-row-lastactive .is-online[b-0eo03b4wkh] {
    color: var(--color-success);
    font-weight: 500;
}

.orcanex-specialists-row-chevron[b-0eo03b4wkh] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tighter column layout when the page is narrow */
@media (max-width: 1500px) {
    .orcanex-specialists-row[b-0eo03b4wkh] {
        /* drop the tags column */
        grid-template-columns: minmax(200px, 1.4fr) 110px 70px 180px 70px 100px 80px 24px;
    }
    .orcanex-specialists-row-tags[b-0eo03b4wkh] { display: none; }
}

@media (max-width: 1200px) {
    .orcanex-specialists-row[b-0eo03b4wkh] {
        /* drop city + appts on top of tags */
        grid-template-columns: minmax(180px, 1.4fr) 70px 160px 100px 80px 24px;
    }
    .orcanex-specialists-row-city[b-0eo03b4wkh],
    .orcanex-specialists-row-appts[b-0eo03b4wkh] {
        display: none;
    }
}

@media (max-width: 900px) {
    .orcanex-specialists-row[b-0eo03b4wkh] {
        /* drop last-active on the smallest viewports */
        grid-template-columns: minmax(180px, 1.4fr) 70px 160px 100px 24px;
    }
    .orcanex-specialists-row-lastactive[b-0eo03b4wkh] { display: none; }
}
/* /Components/Pages/Administration/TaskGroups.razor.rz.scp.css */
/* Task groups page — Orcanex */

.orcanex-task-groups-page[b-qw04ewxs66] {
    background: var(--color-bg);
    /*min-height: 100%;*/
}

.orcanex-task-groups-body[b-qw04ewxs66] {
    padding: var(--space-4);
}

.orcanex-task-groups-grid[b-qw04ewxs66] {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .orcanex-task-groups-grid[b-qw04ewxs66] {
        grid-template-columns: 1fr;
    }
}

/* List card */
.orcanex-task-groups-list[b-qw04ewxs66] {
    overflow: hidden;
}

.orcanex-task-groups-list-body[b-qw04ewxs66] {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}

.orcanex-task-group-row[b-qw04ewxs66] {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease;
}

.orcanex-task-group-row:hover[b-qw04ewxs66] {
    background: var(--color-bg);
}

.orcanex-task-group-row.active[b-qw04ewxs66] {
    background: var(--color-accent-soft);
    border-left: 3px solid var(--color-accent);
    padding-left: calc(var(--space-3) - 3px);
}

.orcanex-task-group-row-text[b-qw04ewxs66] {
    flex: 1;
    min-width: 0;
}

.orcanex-task-group-name[b-qw04ewxs66] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.orcanex-task-group-meta[b-qw04ewxs66] {
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.orcanex-task-group-section-label[b-qw04ewxs66] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: var(--space-3) 0 var(--space-2);
}

.orcanex-task-group-add[b-qw04ewxs66] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.orcanex-task-group-add .orcanex-input[b-qw04ewxs66] {
    flex: 1;
}

.orcanex-task-group-members[b-qw04ewxs66] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.orcanex-task-group-member[b-qw04ewxs66] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.orcanex-task-group-member-id[b-qw04ewxs66] {
    flex: 1;
    min-width: 0;
}

.orcanex-task-group-member-name[b-qw04ewxs66] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-task-group-member-uid[b-qw04ewxs66] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.orcanex-mono[b-qw04ewxs66] {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.orcanex-muted[b-qw04ewxs66] {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin: 0;
}

[b-qw04ewxs66] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-qw04ewxs66] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ============================================================
   Mobile (<768 px) refinements
   - Page padding shrinks
   - List card height becomes content-driven (no internal scroll
     past the viewport — the scroll lives on the page)
   - Add-member row stacks (select on its own line, button below)
   ============================================================ */
:root[data-viewport="mobile"]   .orcanex-task-groups-body[b-qw04ewxs66],
:root[data-viewport="mobile-l"] .orcanex-task-groups-body[b-qw04ewxs66] {
    padding: var(--space-3) var(--space-2);
}

:root[data-viewport="mobile"]   .orcanex-task-groups-grid[b-qw04ewxs66],
:root[data-viewport="mobile-l"] .orcanex-task-groups-grid[b-qw04ewxs66] {
    gap: var(--space-2);
}

:root[data-viewport="mobile"]   .orcanex-task-groups-list-body[b-qw04ewxs66],
:root[data-viewport="mobile-l"] .orcanex-task-groups-list-body[b-qw04ewxs66] {
    max-height: 50vh;
}

:root[data-viewport="mobile"]   .orcanex-task-group-row[b-qw04ewxs66],
:root[data-viewport="mobile-l"] .orcanex-task-group-row[b-qw04ewxs66] {
    padding: var(--space-2) var(--space-3);
    min-height: var(--touch-target);
}

:root[data-viewport="mobile"]   .orcanex-task-group-add[b-qw04ewxs66],
:root[data-viewport="mobile-l"] .orcanex-task-group-add[b-qw04ewxs66] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

:root[data-viewport="mobile"]   .orcanex-task-group-member[b-qw04ewxs66],
:root[data-viewport="mobile-l"] .orcanex-task-group-member[b-qw04ewxs66] {
    padding: var(--space-2);
}
/* /Components/Pages/Administration/UserDetails.razor.rz.scp.css */
/* UserDetails page styles */
.profile-photo[b-l4hrh7ahmx] { border: 3px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.alert-sm[b-l4hrh7ahmx] { font-size: 0.875rem; }
.avatar-extrasmall[b-l4hrh7ahmx] { width: 32px; height: 32px; display: inline-block; }
.avatar-small[b-l4hrh7ahmx] { width: 48px; height: 48px; display: inline-block; }
.avatar-medium[b-l4hrh7ahmx] { width: 64px; height: 64px; display: inline-block; }
.avatar-large[b-l4hrh7ahmx] { width: 96px; height: 96px; display: inline-block; }
.avatar-extralarge[b-l4hrh7ahmx] { width: 120px; height: 120px; display: inline-block; }
.avatar-extraextralarge[b-l4hrh7ahmx] { width: 150px; height: 150px; display: inline-block; }
.avatar-title[b-l4hrh7ahmx] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.5rem; }
.avatar-extrasmall .avatar-title[b-l4hrh7ahmx] { font-size: 0.75rem; }
.avatar-small .avatar-title[b-l4hrh7ahmx] { font-size: 1rem; }
.avatar-medium .avatar-title[b-l4hrh7ahmx] { font-size: 1.25rem; }
.avatar-large .avatar-title[b-l4hrh7ahmx] { font-size: 1.75rem; }
.avatar-extralarge .avatar-title[b-l4hrh7ahmx] { font-size: 2.5rem; }
.avatar-extraextralarge .avatar-title[b-l4hrh7ahmx] { font-size: 3rem; }

/* Tenant context banner */
.tenant-banner[b-l4hrh7ahmx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: .375rem;
    font-size: .8rem;
    font-weight: 500;
}

.tenant-banner.workforce[b-l4hrh7ahmx] {
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), .2);
}

.tenant-banner.external[b-l4hrh7ahmx] {
    background: rgba(var(--bs-info-rgb), .08);
    color: var(--bs-info);
    border: 1px solid rgba(var(--bs-info-rgb), .2);
}

/* Orcanex retrofit */
.orcanex-user-details-page[b-l4hrh7ahmx] { background: var(--color-bg); /*min-height: 100%;*/ }
.orcanex-user-details-tabs[b-l4hrh7ahmx] { padding: var(--space-3) var(--space-4) 0; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--color-border); }
.orcanex-user-details-tabs .orcanex-tab[b-l4hrh7ahmx] { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-family); font-size: 1rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; margin-bottom: -1px; }
.orcanex-user-details-tabs .orcanex-tab:hover[b-l4hrh7ahmx] { color: var(--color-text); }
.orcanex-user-details-tabs .orcanex-tab.active[b-l4hrh7ahmx] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.orcanex-user-details-body[b-l4hrh7ahmx] { padding: var(--space-4); }
/* /Components/Pages/Administration/Users.razor.rz.scp.css */
/* Users management page — Orcanex redesign */

.orcanex-users-page[b-cnwccel4rb] {
    background: var(--color-bg);
    /*min-height: 100%;*/
}

/* Tabs */
.orcanex-users-tabs[b-cnwccel4rb] {
    display: flex;
    gap: 0;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-4);
}

.orcanex-tab[b-cnwccel4rb] {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.orcanex-tab:hover[b-cnwccel4rb] {
    color: var(--color-text);
}

.orcanex-tab.active[b-cnwccel4rb] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.orcanex-tab-count[b-cnwccel4rb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* Body */
.orcanex-users-body[b-cnwccel4rb] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Stats KPIs */
.orcanex-users-kpis[b-cnwccel4rb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.orcanex-users-stats-grid[b-cnwccel4rb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Licence rows */
.orcanex-licence-summary[b-cnwccel4rb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    font-size: 1rem;
    color: var(--color-text-muted);
}

.orcanex-licence-bar[b-cnwccel4rb] {
    height: 6px;
    background: var(--color-border-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.orcanex-licence-bar-fill[b-cnwccel4rb] {
    height: 100%;
    transition: width 200ms ease;
}

.orcanex-licence-bar-fill.ok[b-cnwccel4rb] {
    background: var(--color-success);
}

.orcanex-licence-bar-fill.amber[b-cnwccel4rb] {
    background: var(--color-warn);
}

.orcanex-licence-bar-fill.warn[b-cnwccel4rb] {
    background: var(--color-danger);
}

.orcanex-licence-row[b-cnwccel4rb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 1rem;
}

.orcanex-licence-row:last-child[b-cnwccel4rb] {
    border-bottom: 0;
}

.orcanex-licence-name[b-cnwccel4rb] {
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-licence-meta[b-cnwccel4rb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.orcanex-licence-usage[b-cnwccel4rb] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-role-name[b-cnwccel4rb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Toolbar (search) */
.orcanex-users-toolbar[b-cnwccel4rb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.orcanex-search[b-cnwccel4rb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 320px;
    height: var(--h-field);
    padding: 0 var(--space-2);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}

.orcanex-search:focus-within[b-cnwccel4rb] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.orcanex-search-input[b-cnwccel4rb] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
    padding: 0 var(--space-2);
    height: 100%;
}

.orcanex-search-input[b-cnwccel4rb]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-cnwccel4rb] {
    background: none;
    border: 0;
    padding: var(--space-1);
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-cnwccel4rb] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-users-count[b-cnwccel4rb] {
    margin-left: auto;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* User card grid */
.orcanex-user-grid[b-cnwccel4rb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.orcanex-user-card[b-cnwccel4rb] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    cursor: pointer;
    transition: box-shadow 120ms ease, border-color 120ms ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.orcanex-user-card:hover[b-cnwccel4rb] {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px var(--color-accent-ring);
}

.orcanex-user-card-head[b-cnwccel4rb] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.orcanex-user-card-id[b-cnwccel4rb] {
    flex: 1;
    min-width: 0;
}

.orcanex-user-card-name[b-cnwccel4rb] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-user-card-email[b-cnwccel4rb] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-user-card-meta[b-cnwccel4rb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.orcanex-user-card-footer[b-cnwccel4rb] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
}

/* Role pills filter */
.orcanex-role-filter[b-cnwccel4rb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.orcanex-role-pills[b-cnwccel4rb] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.orcanex-pill-btn[b-cnwccel4rb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--h-button-sm);
    padding: 0 var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
}

.orcanex-pill-btn:hover[b-cnwccel4rb] {
    background: var(--color-bg);
}

.orcanex-pill-btn.active[b-cnwccel4rb] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.orcanex-pill-count[b-cnwccel4rb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.77rem;
    font-weight: 600;
}

.orcanex-pill-btn.active .orcanex-pill-count[b-cnwccel4rb] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Role table */
.orcanex-role-table[b-cnwccel4rb] {
    display: flex;
    flex-direction: column;
}

.orcanex-role-row[b-cnwccel4rb] {
    display: grid;
    grid-template-columns: 2fr 130px 1.4fr 2fr 80px 110px 110px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 1rem;
}

.orcanex-role-row:last-child[b-cnwccel4rb] {
    border-bottom: 0;
}

.orcanex-role-head[b-cnwccel4rb] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.orcanex-role-desc[b-cnwccel4rb] {
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orcanex-role-actions[b-cnwccel4rb] {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

.orcanex-mono[b-cnwccel4rb] {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Helpers */
.orcanex-muted[b-cnwccel4rb] {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin: 0;
}

[b-cnwccel4rb] .orcanex-input {
    width: 100%;
    min-height: var(--h-field);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
}

[b-cnwccel4rb] .orcanex-input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

[b-cnwccel4rb] .orcanex-input[readonly] {
    background: var(--color-bg);
}

.d-none[b-cnwccel4rb] {
    display: none !important;
}

[b-cnwccel4rb] .validation-message {
    color: var(--color-danger);
    font-size: 0.92rem;
    margin-top: var(--space-1);
}
/* /Components/Pages/AdminViews/CollaboraAdmin.razor.rz.scp.css */
.orcanex-collabora[b-txpbxn23lh] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.orcanex-collabora-tabs[b-txpbxn23lh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-self: flex-start;
}

.orcanex-collabora-tab[b-txpbxn23lh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: var(--h-button-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-collabora-tab:hover[b-txpbxn23lh] {
    color: var(--color-text);
    background: var(--color-bg);
}

.orcanex-collabora-tab-active[b-txpbxn23lh] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-collabora-tab-active:hover[b-txpbxn23lh] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-collabora-card[b-txpbxn23lh] {
    overflow: hidden;
}

.orcanex-collabora-loading[b-txpbxn23lh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
}

.orcanex-collabora-spinner[b-txpbxn23lh] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: orcanex-collabora-spin-b-txpbxn23lh 0.9s linear infinite;
}

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

.orcanex-collabora-loading-text[b-txpbxn23lh] {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.orcanex-collabora-error[b-txpbxn23lh] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.orcanex-collabora-error-actions[b-txpbxn23lh] {
    display: flex;
    justify-content: center;
}

.orcanex-collabora-frame[b-txpbxn23lh] {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 540px;
    border: none;
    display: block;
}

/* Mobile-responsiveness (< 768 px = Bootstrap md breakpoint).
   Shrink padding, scroll-snap the 2-tab strip, and let the iframe fill
   the visible viewport (less the topbar/tabs). */
@media (max-width: 767.98px) {
    .orcanex-collabora[b-txpbxn23lh] {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .orcanex-collabora-tabs[b-txpbxn23lh] {
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .orcanex-collabora-tab[b-txpbxn23lh] {
        flex: 0 0 auto;
        height: var(--touch-target);
        scroll-snap-align: start;
    }

    /* Mobile shell hides the global topbar, but the bottom-tabs (56px) plus
       the in-page mobile header (52px) and local tab strip still need room.
       Use 100dvh so iOS Safari doesn't trip on its dynamic viewport. */
    .orcanex-collabora-frame[b-txpbxn23lh] {
        height: calc(100dvh - 240px);
        min-height: 320px;
    }
}
/* /Components/Pages/AdminViews/EnviromentSettings.razor.rz.scp.css */
/* Orcanex page wrapper + tab strip (replaces the legacy CompactPageHeader/Bootstrap nav) */
.orcanex-env[b-d6fbxapulm] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.orcanex-env-tabs[b-d6fbxapulm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-self: flex-start;
}

.orcanex-env-tab[b-d6fbxapulm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: var(--h-button-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-env-tab:hover[b-d6fbxapulm] {
    color: var(--color-text);
    background: var(--color-bg);
}

.orcanex-env-tab-active[b-d6fbxapulm] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-env-tab-active:hover[b-d6fbxapulm] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-env-body[b-d6fbxapulm] {
    /* legacy Bootstrap card markup retained inside; the global tokens.css retrofits surface, border, padding */
}

.stat-icon[b-d6fbxapulm] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.5rem;
}

.stat-card[b-d6fbxapulm] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-d6fbxapulm] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.sticky-top[b-d6fbxapulm] {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Backup table styles */
.virtualized-table-body[b-d6fbxapulm] {
    overflow-y: auto;
}

.backup-row[b-d6fbxapulm] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
    min-height: 40px;
    transition: background-color 0.15s ease;
}

.backup-row:hover[b-d6fbxapulm] {
    background-color: #f8f9fa;
}

.backup-row.missing[b-d6fbxapulm] {
    background-color: #fff3cd;
}

.backup-row.missing:hover[b-d6fbxapulm] {
    background-color: #ffe69c;
}

.backup-row .cell[b-d6fbxapulm] {
    padding: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.backup-row .cell:first-child[b-d6fbxapulm] {
    flex: 1;
}

.badge-sm[b-d6fbxapulm] {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
}

/* Sortable headers */
.sortable-header[b-d6fbxapulm] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-header:hover[b-d6fbxapulm] {
    background-color: #e9ecef;
}

.sortable-header.active[b-d6fbxapulm] {
    background-color: #e7f1ff;
    color: #0d6efd;
}

.sort-icon[b-d6fbxapulm] {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    opacity: 0.5;
}

.sort-icon.active[b-d6fbxapulm] {
    opacity: 1;
    color: #0d6efd;
}

/* Button group compact */
.btn-group-sm > .btn[b-d6fbxapulm] {
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
}

/* Activity Monitor styles */
.activity-stat-card[b-d6fbxapulm] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-stat-card:hover[b-d6fbxapulm] {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.activity-icon[b-d6fbxapulm] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.activity-table[b-d6fbxapulm] {
    font-size: 0.8rem;
}

.activity-table th[b-d6fbxapulm] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.activity-table td[b-d6fbxapulm] {
    vertical-align: middle;
}

.query-text[b-d6fbxapulm] {
    display: block;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
}

.query-text:hover[b-d6fbxapulm] {
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    position: relative;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 4px 8px;
    border-radius: 4px;
    max-width: none;
    width: max-content;
    max-height: 200px;
    overflow-y: auto;
}

/* Nav tabs smaller */
.nav-tabs.nav-sm .nav-link[b-d6fbxapulm] {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

/* Modal fullscreen adjustments */
.modal-fullscreen .modal-body[b-d6fbxapulm] {
    padding: 0.5rem;
}

.modal-fullscreen .modal-header[b-d6fbxapulm] {
    padding: 0.5rem 1rem;
}

/* Progress bar in stats */
.activity-stat-card .progress[b-d6fbxapulm] {
    border-radius: 2px;
}

/* Purple badge for parallelism */
.bg-purple[b-d6fbxapulm] {
    background-color: #6f42c1 !important;
    color: white;
}

/* Compact badges */
.badge[b-d6fbxapulm] {
    font-weight: 500;
}
/* /Components/Pages/AdminViews/WslManagement.razor.rz.scp.css */
.wsl-management[b-qp7g4oo86q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.wsl-last-checked[b-qp7g4oo86q] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-right: var(--space-2);
    align-self: center;
}

/* --- WSL host card --- */

.wsl-host-card .wsl-host-body[b-qp7g4oo86q] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
    align-items: start;
    padding-top: var(--space-3);
}

.wsl-host-meta[b-qp7g4oo86q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.wsl-host-meta-row[b-qp7g4oo86q] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--space-3);
    align-items: baseline;
    font-size: 0.9rem;
}

.wsl-host-actions[b-qp7g4oo86q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 240px;
}

.wsl-meta-detail[b-qp7g4oo86q] {
    margin: 0;
    padding: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 120px;
}

/* --- Container grid --- */

.wsl-container-grid[b-qp7g4oo86q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.wsl-container-card .wsl-container-body[b-qp7g4oo86q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.wsl-container-desc[b-qp7g4oo86q] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.wsl-container-meta[b-qp7g4oo86q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wsl-meta-row[b-qp7g4oo86q] {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-2);
    align-items: baseline;
    font-size: 0.85rem;
    min-width: 0;
}

.wsl-meta-label[b-qp7g4oo86q] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.wsl-meta-value[b-qp7g4oo86q] {
    color: var(--color-text);
    min-width: 0;
}

.wsl-meta-muted[b-qp7g4oo86q] {
    color: var(--color-text-muted);
}

.wsl-meta-danger[b-qp7g4oo86q] {
    color: var(--color-danger);
}

.wsl-meta-break[b-qp7g4oo86q] {
    word-break: break-all;
}

.wsl-mono[b-qp7g4oo86q] {
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

/* --- Loading & confirm --- */

.wsl-loading[b-qp7g4oo86q] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    color: var(--color-text-muted);
}

.wsl-spinner[b-qp7g4oo86q] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: wsl-spin-b-qp7g4oo86q 0.8s linear infinite;
}

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

.wsl-confirm-body[b-qp7g4oo86q] {
    margin: 0 0 var(--space-3);
    font-size: 0.92rem;
    line-height: 1.5;
}

.wsl-confirm-body:last-child[b-qp7g4oo86q] {
    margin-bottom: 0;
}

/* --- Responsive: tablet --- */

@media (max-width: 1199px) {
    .wsl-container-grid[b-qp7g4oo86q] {
        grid-template-columns: repeat(2, 1fr);
    }

    .wsl-host-card .wsl-host-body[b-qp7g4oo86q] {
        grid-template-columns: 1fr;
    }

    .wsl-host-actions[b-qp7g4oo86q] {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }
}

/* --- Responsive: mobile --- */

@media (max-width: 767px) {
    .wsl-container-grid[b-qp7g4oo86q] {
        grid-template-columns: 1fr;
    }

    .wsl-host-meta-row[b-qp7g4oo86q],
    .wsl-meta-row[b-qp7g4oo86q] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .wsl-host-actions[b-qp7g4oo86q] {
        flex-direction: column;
    }

    .wsl-host-actions[b-qp7g4oo86q]  .orcanex-btn {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Analytics/ChartBuilder.razor.rz.scp.css */
/* Chart Builder - Component Scoped Styles */

.chart-type-grid[b-3k1sml7q8x] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.chart-type-btn[b-3k1sml7q8x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    border: 1px solid var(--ct-border-color, #dee2e6);
    border-radius: 6px;
    background: transparent;
    color: var(--ct-body-color);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 2px;
}

.chart-type-btn i[b-3k1sml7q8x] {
    font-size: 1rem;
}

.chart-type-btn span[b-3k1sml7q8x] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chart-type-btn:hover[b-3k1sml7q8x] {
    border-color: var(--ct-primary);
    color: var(--ct-primary);
    background: rgba(var(--ct-primary-rgb, 74, 144, 226), 0.06);
}

.chart-type-btn.active[b-3k1sml7q8x] {
    border-color: var(--ct-primary);
    background: var(--ct-primary);
    color: #fff;
}

.chart-type-btn.active i[b-3k1sml7q8x] {
    color: #fff;
}
/* /Components/Pages/Analytics/DashboardDesigner.razor.rz.scp.css */
.orcanex-page-body[b-jp6ywlevxh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    flex: 1;
}

/* Date filter bar */
.dashboard-filter-row[b-jp6ywlevxh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.dashboard-filter-label[b-jp6ywlevxh] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted);
    height: var(--h-field);
}

.dashboard-filter-field[b-jp6ywlevxh] {
    width: 180px;
}

/* Dashboard list grid */
.dashboard-grid[b-jp6ywlevxh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.dashboard-card[b-jp6ywlevxh] {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.dashboard-card:hover[b-jp6ywlevxh] {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.dashboard-card-body[b-jp6ywlevxh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-card-title[b-jp6ywlevxh] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.dashboard-card-desc[b-jp6ywlevxh] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.dashboard-card-pills[b-jp6ywlevxh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.dashboard-card-meta[b-jp6ywlevxh] {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
}

/* Modal grids */
.dashboard-grid-2[b-jp6ywlevxh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.dashboard-grid-3[b-jp6ywlevxh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

/* Widget type chooser */
.widget-types[b-jp6ywlevxh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Dashboard panel header */
.dashboard-panel-head[b-jp6ywlevxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 var(--space-2);
}

.dashboard-panel-title[b-jp6ywlevxh] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-panel-tools[b-jp6ywlevxh] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.widget-content[b-jp6ywlevxh] {
    height: 100%;
    overflow: hidden;
    padding: var(--space-2);
}

/* Syncfusion panel reskin */
[b-jp6ywlevxh] .e-dashboardlayout .e-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    box-shadow: none;
}

[b-jp6ywlevxh] .e-dashboardlayout .e-panel .e-panel-header {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
    padding: var(--space-2) var(--space-3);
    font-size: 1rem;
}

[b-jp6ywlevxh] .e-dashboardlayout .e-panel .e-panel-content {
    padding: 0;
    overflow: auto;
}

/* Print styles */
@media print {
    .orcanex-page-header-actions[b-jp6ywlevxh],
    .dashboard-filter-card[b-jp6ywlevxh],
    .orcanex-modal-backdrop[b-jp6ywlevxh] {
        display: none !important;
    }

    .orcanex-card[b-jp6ywlevxh],
    .dashboard-card[b-jp6ywlevxh] {
        box-shadow: none !important;
        border: 1px solid var(--color-border) !important;
    }

    [b-jp6ywlevxh] .e-dashboardlayout .e-panel {
        box-shadow: none !important;
        border: 1px solid var(--color-border) !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .widget-content[b-jp6ywlevxh],
    [b-jp6ywlevxh] .e-dashboardlayout .e-panel .e-panel-content {
        overflow: visible !important;
    }

    .dashboard-card:hover[b-jp6ywlevxh] {
        transform: none !important;
    }
}
/* /Components/Pages/Analytics/DashboardPivotWidget.razor.rz.scp.css */
[b-rcprtoc2qp] .e-pivotview {
    border: none;
}

[b-rcprtoc2qp] .e-pivotview .e-grid .e-headercell {
    font-size: 0.92rem;
}

[b-rcprtoc2qp] .e-pivotview .e-grid .e-rowcell {
    font-size: 0.92rem;
}
/* /Components/Pages/Analytics/QueryDesigner.razor.rz.scp.css */
/* QueryDesigner (Report Builder) page styles — follows the Cases page table pattern */

/* Step indicator active state */
.border-start.border-primary[b-vcvhin14ee] {
    transition: border-color 0.2s ease;
}

/* Virtualized results table */
.virtualized-table-container[b-vcvhin14ee] {
    width: 100%;
    overflow-x: auto;
}

.virtualized-table-header[b-vcvhin14ee] {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 8px 0;
    min-width: max-content;
    position: sticky;
    top: 0;
    z-index: 1;
}

.virtualized-table-header .header-cell[b-vcvhin14ee] {
    flex: 1;
    min-width: 120px;
    max-width: 250px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    white-space: nowrap;
}

.virtualized-table-body[b-vcvhin14ee] {
    min-width: max-content;
}

.table-row-virtual[b-vcvhin14ee] {
    display: flex;
    align-items: center;
    height: 36px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.1s ease;
}

    .table-row-virtual:hover[b-vcvhin14ee] {
        background-color: #f8f9fa;
    }

.table-row-virtual .cell[b-vcvhin14ee] {
    flex: 1;
    min-width: 120px;
    max-width: 250px;
    padding: 4px 12px;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected columns table compact styling */
[b-vcvhin14ee] .table-sm td,
[b-vcvhin14ee] .table-sm th {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
}

[b-vcvhin14ee] .table-sm .form-control-sm,
[b-vcvhin14ee] .table-sm .form-select-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

/* Template card hover */
[b-vcvhin14ee] .template-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    [b-vcvhin14ee] .template-card:hover {
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
    }

/* Column picker checkbox spacing */
[b-vcvhin14ee] .form-check {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Info banner for auto-grouping hint */
[b-vcvhin14ee] .bg-info-subtle {
    border-radius: 0 0 0.375rem 0.375rem;
}
/* /Components/Pages/Analytics/ReportScheduler.razor.rz.scp.css */
.schedule-card[b-2i7igojopj] {
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.schedule-card:hover[b-2i7igojopj] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.schedule-card .card-body[b-2i7igojopj] {
    display: flex;
    flex-direction: column;
}

/* Mobile: tighter row gutters and ensure the action button row remains
   tappable. Bootstrap's `col-12` already collapses the card grid to a
   single column at mobile, so no override needed there. The action row
   bottom-trail uses `flex-fill` on the Edit button which already adapts. */
:root[data-viewport="mobile"]   .schedule-card .btn[b-2i7igojopj],
:root[data-viewport="mobile-l"] .schedule-card .btn[b-2i7igojopj] {
    min-height: var(--touch-target);
}
/* /Components/Pages/Auth/MfaChallenge.razor.rz.scp.css */
.orcanex-mfa[b-62berr4285] {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
}

.orcanex-mfa[b-62berr4285]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, var(--color-accent-soft) 0%, transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(123, 156, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

.orcanex-mfa-card[b-62berr4285] {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    text-align: center;
    color: var(--color-text);
}

[b-62berr4285] .orcanex-mfa-wordmark {
    margin-bottom: var(--space-6);
    justify-content: center;
}

.orcanex-mfa-icon[b-62berr4285] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.orcanex-mfa-icon-danger[b-62berr4285] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.orcanex-mfa-title[b-62berr4285] {
    margin: 0 0 var(--space-2);
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.orcanex-mfa-subtitle[b-62berr4285] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.orcanex-mfa-form[b-62berr4285] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

.orcanex-mfa-banner[b-62berr4285] {
    text-align: left;
}

.orcanex-mfa-field[b-62berr4285] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.orcanex-mfa-field-label[b-62berr4285] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

.orcanex-mfa-code-input[b-62berr4285] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    text-align: center;
    font-size: 1.69rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-mfa-code-input:focus[b-62berr4285] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-mfa-code-input[b-62berr4285]::placeholder {
    color: var(--color-text-subtle);
    letter-spacing: 0.4em;
    font-weight: 500;
}

.orcanex-mfa-code-input.is-invalid[b-62berr4285] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.orcanex-mfa-warning[b-62berr4285] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.92rem;
    color: var(--color-warn);
}

.orcanex-mfa-submit[b-62berr4285] {
    width: 100%;
    height: 40px;
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-mfa-submit:hover:not(:disabled)[b-62berr4285] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.orcanex-mfa-submit:disabled[b-62berr4285] {
    opacity: 0.7;
    cursor: not-allowed;
}

.orcanex-mfa-submit-spinner[b-62berr4285] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: orcanex-mfa-spin-b-62berr4285 0.9s linear infinite;
}

@keyframes orcanex-mfa-spin-b-62berr4285 {
    to { transform: rotate(360deg); }
}

.orcanex-mfa-help[b-62berr4285] {
    margin: var(--space-5) 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-subtle);
}

.orcanex-mfa-help-link[b-62berr4285] {
    color: var(--color-accent);
    text-decoration: none;
}

.orcanex-mfa-help-link:hover[b-62berr4285] {
    text-decoration: underline;
}

.orcanex-mfa-redirect[b-62berr4285] {
    padding: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.orcanex-mfa-spinner[b-62berr4285] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: orcanex-mfa-spin-b-62berr4285 0.9s linear infinite;
}

.orcanex-mfa-redirect-text[b-62berr4285] {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

@media (max-width: 480px) {
    .orcanex-mfa-card[b-62berr4285] {
        padding: var(--space-6) var(--space-5);
    }
    .orcanex-mfa-code-input[b-62berr4285] {
        font-size: 1.38rem;
        letter-spacing: 0.3em;
    }
    /* Touch-target floor at mobile (≥ 44px); desktop keeps the 40px sizing. */
    .orcanex-mfa-submit[b-62berr4285] { height: var(--touch-target); }
}
/* /Components/Pages/Auth/MfaSetup.razor.rz.scp.css */
.orcanex-mfa-setup[b-jslrb2yo6m] {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
}

.orcanex-mfa-setup[b-jslrb2yo6m]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, var(--color-accent-soft) 0%, transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(123, 156, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

.orcanex-mfa-setup-card[b-jslrb2yo6m] {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    text-align: center;
    color: var(--color-text);
}

[b-jslrb2yo6m] .orcanex-mfa-setup-wordmark {
    margin-bottom: var(--space-6);
    justify-content: center;
}

.orcanex-mfa-setup-icon[b-jslrb2yo6m] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.orcanex-mfa-setup-icon-success[b-jslrb2yo6m] {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.orcanex-mfa-setup-title[b-jslrb2yo6m] {
    margin: 0 0 var(--space-2);
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.orcanex-mfa-setup-subtitle[b-jslrb2yo6m] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.orcanex-mfa-setup-qr-wrap[b-jslrb2yo6m] {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-4);
}

.orcanex-mfa-setup-qr-image[b-jslrb2yo6m] {
    width: 200px;
    height: 200px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    padding: var(--space-2);
}

.orcanex-mfa-setup-manual[b-jslrb2yo6m] {
    text-align: left;
    margin: 0 0 var(--space-5);
}

.orcanex-mfa-setup-manual-summary[b-jslrb2yo6m] {
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    user-select: none;
    padding: var(--space-1) 0;
}

.orcanex-mfa-setup-manual-summary:hover[b-jslrb2yo6m] {
    color: var(--color-accent);
}

.orcanex-mfa-setup-manual-value[b-jslrb2yo6m] {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    word-break: break-all;
    color: var(--color-text);
}

.orcanex-mfa-setup-form[b-jslrb2yo6m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

.orcanex-mfa-setup-banner[b-jslrb2yo6m] {
    text-align: left;
}

.orcanex-mfa-setup-field[b-jslrb2yo6m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.orcanex-mfa-setup-field-label[b-jslrb2yo6m] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

.orcanex-mfa-setup-code-input[b-jslrb2yo6m] {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    text-align: center;
    font-size: 1.69rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-mfa-setup-code-input:focus[b-jslrb2yo6m] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-mfa-setup-code-input[b-jslrb2yo6m]::placeholder {
    color: var(--color-text-subtle);
    letter-spacing: 0.4em;
    font-weight: 500;
}

.orcanex-mfa-setup-code-input.is-invalid[b-jslrb2yo6m] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.orcanex-mfa-setup-submit[b-jslrb2yo6m] {
    width: 100%;
    height: 40px;
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-mfa-setup-submit:hover:not(:disabled)[b-jslrb2yo6m] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.orcanex-mfa-setup-submit:disabled[b-jslrb2yo6m] {
    opacity: 0.7;
    cursor: not-allowed;
}

.orcanex-mfa-setup-submit-spinner[b-jslrb2yo6m] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: orcanex-mfa-setup-spin-b-jslrb2yo6m 0.9s linear infinite;
}

@keyframes orcanex-mfa-setup-spin-b-jslrb2yo6m {
    to { transform: rotate(360deg); }
}

.orcanex-mfa-setup-help[b-jslrb2yo6m] {
    margin: var(--space-5) 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-subtle);
}

.orcanex-mfa-setup-help-link[b-jslrb2yo6m] {
    color: var(--color-accent);
    text-decoration: none;
}

.orcanex-mfa-setup-help-link:hover[b-jslrb2yo6m] {
    text-decoration: underline;
}

.orcanex-mfa-setup-redirect[b-jslrb2yo6m] {
    padding: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.orcanex-mfa-setup-spinner[b-jslrb2yo6m] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: orcanex-mfa-setup-spin-b-jslrb2yo6m 0.9s linear infinite;
}

.orcanex-mfa-setup-redirect-text[b-jslrb2yo6m] {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

@media (max-width: 480px) {
    .orcanex-mfa-setup-card[b-jslrb2yo6m] {
        padding: var(--space-6) var(--space-5);
    }
    .orcanex-mfa-setup-code-input[b-jslrb2yo6m] {
        font-size: 1.38rem;
        letter-spacing: 0.3em;
    }
    .orcanex-mfa-setup-qr-image[b-jslrb2yo6m] {
        width: 180px;
        height: 180px;
    }
    /* Touch-target floor at mobile (≥ 44px); desktop keeps the 40px sizing. */
    .orcanex-mfa-setup-submit[b-jslrb2yo6m] { height: var(--touch-target); }
    .orcanex-mfa-setup-manual-summary[b-jslrb2yo6m] { padding: var(--space-2) 0; }
}
/* /Components/Pages/Cases/Apps-calendar.razor.rz.scp.css */
/* Apps Calendar — Orcanex chrome around the FullCalendar control */

.apps-calendar-page[b-7lzhx2cfcg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*min-height: 0;*/
    padding: 0 24px 24px;
}

.apps-calendar-grid[b-7lzhx2cfcg] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

@media (max-width: 992px) {
    .apps-calendar-grid[b-7lzhx2cfcg] {
        grid-template-columns: 1fr;
    }
}

/* Main calendar host */
.apps-calendar-card[b-7lzhx2cfcg] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.apps-calendar-host[b-7lzhx2cfcg] {
    padding: 12px 16px 16px;
}

.apps-calendar-host #calendar[b-7lzhx2cfcg] {
    min-height: 600px;
}

/* Right rail */
.apps-calendar-rail[b-7lzhx2cfcg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.apps-calendar-rail-kicker[b-7lzhx2cfcg] {
    margin-bottom: 8px;
}

.apps-calendar-rail-btn[b-7lzhx2cfcg] {
    width: 100%;
    justify-content: center;
}

.apps-calendar-rail-hint[b-7lzhx2cfcg] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    margin-bottom: 12px;
}

.apps-calendar-external[b-7lzhx2cfcg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apps-calendar-event-chip[b-7lzhx2cfcg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: grab;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out),
                border-color var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.apps-calendar-event-chip:hover[b-7lzhx2cfcg] {
    background: var(--color-panel);
    border-color: var(--color-accent);
}

.apps-calendar-event-chip:active[b-7lzhx2cfcg] {
    cursor: grabbing;
}

.apps-calendar-event-dot[b-7lzhx2cfcg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.apps-calendar-tone-success .apps-calendar-event-dot[b-7lzhx2cfcg] { background: var(--color-success); }
.apps-calendar-tone-accent .apps-calendar-event-dot[b-7lzhx2cfcg]  { background: var(--color-accent); }
.apps-calendar-tone-warn .apps-calendar-event-dot[b-7lzhx2cfcg]    { background: var(--color-warn); }
.apps-calendar-tone-danger .apps-calendar-event-dot[b-7lzhx2cfcg]  { background: var(--color-danger); }

.apps-calendar-rail-list[b-7lzhx2cfcg] {
    list-style: disc;
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.apps-calendar-rail-list li[b-7lzhx2cfcg] {
    margin-bottom: 6px;
}
/* /Components/Pages/Cases/CaseForm.razor.rz.scp.css */
/* ============================================================
   CaseForm bespoke shell — command bar + workflow rail + tabs
   + content area. Token-only colours.
   ============================================================ */

.caseform-shell[b-oz2hv7dczp] {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    /*min-height: 100%;*/
}

.caseform-loading[b-oz2hv7dczp] {
    padding: var(--space-6);
}

/* ---------- 1) Command bar ---------- */

.caseform-commandbar[b-oz2hv7dczp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--h-topbar);
    min-height: var(--h-topbar);
    padding: 0 var(--space-4);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    /* Never compress when content below is tall — the chrome rows must
       render at identical heights across every tab. */
    flex-shrink: 0;
}

.caseform-back[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.caseform-back:hover[b-oz2hv7dczp] {
    background: var(--color-bg);
    color: var(--color-text);
}

.caseform-divider[b-oz2hv7dczp] {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Admin status override — compact select that sits inline next to the
   Cancel / Save buttons on the command bar. Sized to match the small
   Btn primitives so it reads as one row of chrome. */
.caseform-override-select[b-oz2hv7dczp] {
    height: 28px;
    padding: 0 26px 0 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.92rem;
    max-width: 220px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.caseform-override-select:hover[b-oz2hv7dczp] {
    border-color: var(--color-text-muted);
}

.caseform-override-select:focus[b-oz2hv7dczp] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.caseform-id-chip[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}

.caseform-sep[b-oz2hv7dczp] {
    color: var(--color-text-subtle);
    font-size: 1rem;
    flex-shrink: 0;
}

.caseform-claimant[b-oz2hv7dczp] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.caseform-client[b-oz2hv7dczp] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.caseform-status-chip[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--status-color, var(--color-text-muted)) 12%, white);
    color: var(--status-color, var(--color-text-muted));
    flex-shrink: 0;
}

.caseform-status-dot[b-oz2hv7dczp] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.caseform-spacer[b-oz2hv7dczp] {
    flex: 1 1 auto;
    min-width: var(--space-3);
}

/* ---------- 2) Workflow rail container ---------- */

.caseform-workflow[b-oz2hv7dczp] {
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    flex-shrink: 0;
}

.caseform-client-status[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) var(--space-6);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 1rem;
}

.caseform-consent-difference-banner[b-oz2hv7dczp] {
    padding: var(--space-3) var(--space-5) 0;
    background: var(--color-panel);
}

.caseform-consent-difference-banner-content[b-oz2hv7dczp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
}

.caseform-consent-difference-banner-content strong[b-oz2hv7dczp] {
    display: block;
    color: var(--color-danger);
    font-weight: 600;
}

.caseform-consent-difference-banner-content div div[b-oz2hv7dczp] {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.94rem;
}

/* ---------- 3) Tab strip ---------- */

.caseform-tabs[b-oz2hv7dczp] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-5);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
    /* Fixed height so the strip never collapses when its tabs render as
       text-only after a navigation (e.g. before badges fetch). Without
       this, switching tabs while badges load makes the strip jump in
       height — and pulls the workflow bar above it with it. */
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    /* Hide the scrollbar entirely while keeping horizontal-scroll behaviour
       when the tab list overflows the container width. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / old Edge */
}

.caseform-tabs[b-oz2hv7dczp]::-webkit-scrollbar {
    display: none;                  /* Chromium / Safari */
    width: 0;
    height: 0;
}

.caseform-tab[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    margin-bottom: -1px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 120ms ease-out, border-color 120ms ease-out;
}

.caseform-tab:hover[b-oz2hv7dczp] {
    color: var(--color-text);
}

.caseform-tab.active[b-oz2hv7dczp] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    /* Font-weight stays at 500 across both states (matches SpecialistForm
       and the rest of the Orcanex tab pattern). Promoting the active tab
       to 600 here used to widen each label slightly and shift every
       sibling tab horizontally on click, which read as a flicker. */
}

.caseform-tab-badge[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

.caseform-consent-diff-list[b-oz2hv7dczp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.caseform-consent-diff-row[b-oz2hv7dczp] {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
}

.caseform-consent-diff-label[b-oz2hv7dczp] {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
}

.caseform-consent-diff-values[b-oz2hv7dczp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    min-width: 0;
}

.caseform-consent-diff-value[b-oz2hv7dczp] {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

.caseform-consent-diff-value span[b-oz2hv7dczp] {
    display: block;
    margin-bottom: 3px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.caseform-consent-diff-old[b-oz2hv7dczp] {
    background: color-mix(in srgb, var(--color-danger) 9%, white);
    color: var(--color-danger);
}

.caseform-consent-diff-old del[b-oz2hv7dczp] {
    text-decoration-thickness: 2px;
    overflow-wrap: anywhere;
}

.caseform-consent-diff-new[b-oz2hv7dczp] {
    background: color-mix(in srgb, var(--color-success) 10%, white);
    color: var(--color-success);
}

.caseform-consent-diff-new ins[b-oz2hv7dczp] {
    text-decoration: none;
    overflow-wrap: anywhere;
}

.caseform-consent-diff-actions[b-oz2hv7dczp] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* ---------- 4) Content area ---------- */

.caseform-content[b-oz2hv7dczp] {
    flex: 1 1 auto;
    background: var(--color-bg);
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
}

.caseform-tabpanes[b-oz2hv7dczp] {
    display: block;
}

.caseform-tabpane[b-oz2hv7dczp] {
    display: block;
}

/* Validation summary box, repainted in tokens. */
.caseform-validation[b-oz2hv7dczp] {
    background: var(--color-danger-soft);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-panel));
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--color-danger);
}

.caseform-validation-title[b-oz2hv7dczp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.caseform-validation ul[b-oz2hv7dczp] {
    margin: 0;
    padding-left: var(--space-5);
    font-size: 1rem;
}

/* Form validation state styling — keep parity with old behaviour using tokens. */
input.is-invalid[b-oz2hv7dczp], select.is-invalid[b-oz2hv7dczp], textarea.is-invalid[b-oz2hv7dczp] {
    border-color: var(--color-danger) !important;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C0322B' viewBox='0 0 16 16'%3e%3cpath d='M11.536 14.01 8 1.99 4.464 14.01h7.072ZM8 16a1.5 1.5 0 0 1-1.414-1.01L.232 1.522A.75.75 0 0 1 .957.5h14.086a.75.75 0 0 1 .725 1.022L9.414 14.99A1.5 1.5 0 0 1 8 16Zm-.9-5.5h1.8v1.8H7.1V10.5Zm0-5h1.8v4H7.1v-4Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 1rem;
}

.is-valid[b-oz2hv7dczp] {
    border-color: var(--color-success) !important;
}

@media (max-width: 768px) {
    .caseform-claimant[b-oz2hv7dczp] {
        max-width: 140px;
    }
    .caseform-client[b-oz2hv7dczp] {
        display: none;
    }
    .caseform-content[b-oz2hv7dczp] {
        padding: var(--space-3) var(--space-3);
    }

    .caseform-consent-difference-banner[b-oz2hv7dczp] {
        padding: var(--space-3);
    }

    .caseform-consent-difference-banner-content[b-oz2hv7dczp],
    .caseform-consent-diff-row[b-oz2hv7dczp],
    .caseform-consent-diff-values[b-oz2hv7dczp] {
        grid-template-columns: 1fr;
    }

    .caseform-consent-difference-banner-content[b-oz2hv7dczp] {
        flex-direction: column;
        align-items: stretch;
    }

    .caseform-consent-diff-row[b-oz2hv7dczp] {
        align-items: stretch;
    }

    .caseform-consent-diff-actions[b-oz2hv7dczp] {
        justify-content: stretch;
    }

    .caseform-consent-diff-actions[b-oz2hv7dczp]  .orcanex-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Welcome banner shown after a new case is created. The InlineBanner has no
   trailing margin of its own; this wrapper adds breathing room so the banner
   doesn't visually clash with the first card below it. */
.case-form-welcome-banner[b-oz2hv7dczp] {
    margin-bottom: var(--space-4);
}

/* ============================================================
   Mobile header — compact replacement for the desktop command bar.
   Hidden by default; flex-row at mobile breakpoints. Same visual
   language as MobilePageHeader (~52 px tall, panel background,
   border-bottom) but with a back chevron on the left.
   Note: we don't use the .show-mobile-only utility here because that
   class uses `display: revert !important` to reveal at mobile, which
   would beat any `display: flex` rule we'd want for layout. Plain
   `display: none` + explicit flex override is more predictable.
   ============================================================ */
.caseform-mobile-header[b-oz2hv7dczp] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    min-height: var(--h-topbar);
    flex-shrink: 0;
}

:root[data-viewport="mobile"]   .caseform-mobile-header[b-oz2hv7dczp],
:root[data-viewport="mobile-l"] .caseform-mobile-header[b-oz2hv7dczp] {
    display: flex;
}

.caseform-mobile-back[b-oz2hv7dczp] {
    width: var(--touch-target);
    height: var(--touch-target);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: -8px;
}
.caseform-mobile-back:hover[b-oz2hv7dczp] {
    background: var(--color-bg);
}

.caseform-mobile-titles[b-oz2hv7dczp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.caseform-mobile-title[b-oz2hv7dczp] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
}

.caseform-mobile-subtitle[b-oz2hv7dczp] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Save / Edit icon-only button at the right — clamp to 36 px. The
   `::deep` is essential: <Btn> renders its <button> in its own scoped
   CSS, so without `::deep` this rule would only reach the raw <button>
   used for Save and skip the Btn-component Edit. Result was a visible
   shift between Cases (36 px New Case Btn) and CaseForm (44 px Edit
   Btn). 36 × 36 is the standard mobile-header icon-button size — must
   match `.orcanex-mobile-page-header-actions ::deep .orcanex-btn`. */
.caseform-mobile-header[b-oz2hv7dczp]  .orcanex-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
}

/* Raw <button class="orcanex-btn"> elements (the submit button used
   for Save) — same scope as the page, so no `::deep` needed. */
.caseform-mobile-header > .orcanex-btn[b-oz2hv7dczp] {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
}

/* ============================================================
   Mobile workflow strip — keep the current-action footer of the
   WorkflowProgressBar but hide the numbered stepper above it. The
   strip ends up ~36–48 px tall instead of the desktop ~140 px block.
   ============================================================ */
:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp],
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp] {
    /* Override the inherited .caseform-workflow background+border so the
       compact strip doesn't double-up against tab + content backgrounds. */
    border-bottom: 1px solid var(--color-border-soft);
    padding: 0 var(--space-3);
}

/* Hide the desktop stepper + footer + admin-meta strip at mobile —
   replaced entirely by the .workflow-bar-mobile carousel inside
   WorkflowProgressBar (single-line, prev/next chevrons, tiny progress).
   The strip-mobile container itself loses its panel chrome since the
   carousel paints its own. */
:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp],
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp] {
    background: transparent;
    border-bottom: none;
}

:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar,
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-stepper-row,
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-stepper-row,
:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-stepper,
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-stepper,
:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-footer,
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-footer,
:root[data-viewport="mobile"]   .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-meta,
:root[data-viewport="mobile-l"] .caseform-workflow-mobile-compact[b-oz2hv7dczp]  .workflow-bar-meta {
    display: none;
}

/* ============================================================
   Mobile content padding — the desktop tab strip is hidden at mobile
   (replaced by <MobileTabPicker> which has its own scoped CSS), so
   the only thing to override here is the content area padding.
   ============================================================ */
:root[data-viewport="mobile"]   .caseform-content[b-oz2hv7dczp],
:root[data-viewport="mobile-l"] .caseform-content[b-oz2hv7dczp] {
    padding: var(--space-3);
}

/* ============================================================
   Mobile shell — drop the `min-height: 100%` so the page wrapper
   collapses to content size. The tokens.css comment explicitly
   warns about this pattern: a `min-height: 100%` flex column
   combined with `flex: 1 1 auto` on the content child causes the
   content area to expand to fill the viewport AND the bottom-tab
   clearance ::after spacer to sit below the shell — yielding a
   large empty band between the last card and the fixed bottom
   tabs (Chromium bug 748518 + flex sizing interaction). Desktop
   keeps the min-height since the shell needs to paint its
   background down to the viewport bottom when content is short.

   Padding-bottom is pinned here as a belt-and-braces guarantee
   that the last card always clears the fixed bottom-tab strip.
   The global `.orcanex-frame-content > *:last-child` rule in
   tokens.css should hit us too, but spelling it out on the shell
   itself removes any room for selector / specificity surprises.
   ============================================================ */
:root[data-viewport="mobile"]   .caseform-shell[b-oz2hv7dczp],
:root[data-viewport="mobile-l"] .caseform-shell[b-oz2hv7dczp] {
    /*min-height: 0;*/
    padding-bottom: calc(var(--h-mobile-tabs) + env(safe-area-inset-bottom, 0px) + var(--space-4));
}
/* /Components/Pages/Cases/CaseValidationErrors.razor.rz.scp.css */
.orcanex-caseval-page[b-6oqik5kfhs] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Same trick as Cases.razor.css — the page owns its own internal scroll inside
   .orcanex-caseval-rows, so defeat the global mobile-tab bottom padding. */
:root[data-viewport="mobile"]   .orcanex-frame-content .orcanex-caseval-page[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-frame-content .orcanex-caseval-page[b-6oqik5kfhs] {
    padding-bottom: 0 !important;
}

.orcanex-caseval-content[b-6oqik5kfhs] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 24px;
    gap: 12px;
    overflow: hidden;
}

:root[data-viewport="mobile"]   .orcanex-caseval-content[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-content[b-6oqik5kfhs] {
    padding: var(--space-2) var(--space-2) var(--space-3);
    gap: var(--space-2);
}

/* ─── Search (mirror of the Cases search box) ─── */
.orcanex-caseval-search[b-6oqik5kfhs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 260px;
    max-width: 100%;
    color: var(--color-text-muted);
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-caseval-search:focus-within[b-6oqik5kfhs] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-caseval-search-input[b-6oqik5kfhs] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
}

.orcanex-caseval-search-input[b-6oqik5kfhs]::placeholder { color: var(--color-text-subtle); }

.orcanex-caseval-search-clear[b-6oqik5kfhs] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}
.orcanex-caseval-search-clear:hover[b-6oqik5kfhs] { color: var(--color-text); }

.orcanex-caseval-divider[b-6oqik5kfhs] {
    width: 1px;
    height: 20px;
    background: var(--color-border);
}

/* ─── Rows ─── */
.orcanex-caseval-rows[b-6oqik5kfhs] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.orcanex-caseval-row[b-6oqik5kfhs] {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 160px 240px 1fr 24px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-caseval-row:hover[b-6oqik5kfhs] { background: var(--color-bg); }

/* List mode: card (default) — each row is its own panel. */
.orcanex-caseval-rows[data-list-mode="card"][b-6oqik5kfhs] { gap: 8px; }
.orcanex-caseval-rows[data-list-mode="card"] .orcanex-caseval-row[b-6oqik5kfhs] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* List mode: tabular — rows packed inside one panel with divider lines. */
.orcanex-caseval-rows[data-list-mode="tabular"][b-6oqik5kfhs] {
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    overflow-y: auto;
}
.orcanex-caseval-rows[data-list-mode="tabular"] .orcanex-caseval-row[b-6oqik5kfhs] {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.orcanex-caseval-rows[data-list-mode="tabular"] .orcanex-caseval-row:last-child[b-6oqik5kfhs] {
    border-bottom: none;
}

/* ─── Cells ─── */
.orcanex-caseval-row-id-num[b-6oqik5kfhs] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.orcanex-caseval-row-stage[b-6oqik5kfhs] { margin-top: 4px; }
.orcanex-caseval-row-stage > .orcanex-pill[b-6oqik5kfhs] { margin-bottom: 0; }

.orcanex-caseval-row-examinee-name[b-6oqik5kfhs] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-caseval-row-examinee-meta[b-6oqik5kfhs] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.orcanex-caseval-row-reasons[b-6oqik5kfhs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.orcanex-caseval-row-reasons-count[b-6oqik5kfhs] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-danger);
}

.orcanex-caseval-row-reasons-chips[b-6oqik5kfhs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 50px;       /* ~2 rows on desktop; full list is in the title tooltip */
    overflow: hidden;
}

.orcanex-caseval-chip[b-6oqik5kfhs] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.orcanex-caseval-chip-more[b-6oqik5kfhs] {
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.orcanex-caseval-row-chevron[b-6oqik5kfhs] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Mobile-stack — id+stage on the top row, examinee+chevron next,
   reasons full-width underneath. Reasons may wrap to a few rows;
   RowItemSize (CaseValidationErrors.razor.cs) is taller at mobile
   to match.
   ============================================================ */
:root[data-viewport="mobile"]   .orcanex-caseval-rows[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-rows[b-6oqik5kfhs] {
    gap: var(--space-2);
    padding-right: 0;
}

:root[data-viewport="mobile"]   .orcanex-caseval-row[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row[b-6oqik5kfhs] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "id        stage"
        "examinee  chevron"
        "reasons   reasons";
    column-gap: var(--space-2);
    row-gap: 6px;
    padding: 10px var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
}

:root[data-viewport="mobile"]   .orcanex-caseval-row-id[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row-id[b-6oqik5kfhs]        { grid-area: id; align-self: start; }
:root[data-viewport="mobile"]   .orcanex-caseval-row-stage[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row-stage[b-6oqik5kfhs]     { grid-area: stage; justify-self: end; align-self: start; margin-top: 0; }
:root[data-viewport="mobile"]   .orcanex-caseval-row-examinee[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row-examinee[b-6oqik5kfhs]  { grid-area: examinee; }
:root[data-viewport="mobile"]   .orcanex-caseval-row-chevron[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row-chevron[b-6oqik5kfhs]   { grid-area: chevron; justify-self: end; align-self: center; }
:root[data-viewport="mobile"]   .orcanex-caseval-row-reasons[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row-reasons[b-6oqik5kfhs]   { grid-area: reasons; }

/* Give the reasons a bit more room on a phone (no hover tooltip there). */
:root[data-viewport="mobile"]   .orcanex-caseval-row-reasons-chips[b-6oqik5kfhs],
:root[data-viewport="mobile-l"] .orcanex-caseval-row-reasons-chips[b-6oqik5kfhs] {
    max-height: 76px;
}
/* /Components/Pages/Cases/CaseWorkflowComplete.razor.rz.scp.css */
.orcanex-wfc-page[b-ld7uip40jb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Same trick as Cases.razor.css — the page owns its own internal scroll inside
   .orcanex-wfc-rows, so defeat the global mobile-tab bottom padding. */
:root[data-viewport="mobile"]   .orcanex-frame-content .orcanex-wfc-page[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-frame-content .orcanex-wfc-page[b-ld7uip40jb] {
    padding-bottom: 0 !important;
}

.orcanex-wfc-content[b-ld7uip40jb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 24px;
    gap: 12px;
    overflow: hidden;
}

:root[data-viewport="mobile"]   .orcanex-wfc-content[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-content[b-ld7uip40jb] {
    padding: var(--space-2) var(--space-2) var(--space-3);
    gap: var(--space-2);
}

/* ─── Search (mirror of the Cases search box) ─── */
.orcanex-wfc-search[b-ld7uip40jb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 280px;
    max-width: 100%;
    color: var(--color-text-muted);
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-wfc-search:focus-within[b-ld7uip40jb] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-wfc-search-input[b-ld7uip40jb] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
}

.orcanex-wfc-search-input[b-ld7uip40jb]::placeholder { color: var(--color-text-subtle); }

.orcanex-wfc-search-clear[b-ld7uip40jb] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}
.orcanex-wfc-search-clear:hover[b-ld7uip40jb] { color: var(--color-text); }

/* "cached · scanned X ago" provenance stamp in the subtitle */
.orcanex-wfc-stamp[b-ld7uip40jb] {
    margin-left: 6px;
    color: var(--color-text-subtle);
    font-size: 0.85rem;
}

/* ─── Scan progress ─── */
.orcanex-wfc-progress[b-ld7uip40jb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.orcanex-wfc-progress-text[b-ld7uip40jb] { white-space: nowrap; }

.orcanex-wfc-progress-bar[b-ld7uip40jb] {
    flex: 1;
    height: 4px;
    background: var(--color-border-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.orcanex-wfc-progress-bar-fill[b-ld7uip40jb] {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.orcanex-wfc-scanning-empty[b-ld7uip40jb] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ─── Rows ─── */
.orcanex-wfc-rows[b-ld7uip40jb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.orcanex-wfc-row[b-ld7uip40jb] {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 160px 240px 1fr 24px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-wfc-row:hover[b-ld7uip40jb] { background: var(--color-bg); }

/* List mode: card (default) — each row is its own panel. */
.orcanex-wfc-rows[data-list-mode="card"][b-ld7uip40jb] { gap: 8px; }
.orcanex-wfc-rows[data-list-mode="card"] .orcanex-wfc-row[b-ld7uip40jb] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* List mode: tabular — rows packed inside one panel with divider lines. */
.orcanex-wfc-rows[data-list-mode="tabular"][b-ld7uip40jb] {
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    overflow-y: auto;
}
.orcanex-wfc-rows[data-list-mode="tabular"] .orcanex-wfc-row[b-ld7uip40jb] {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.orcanex-wfc-rows[data-list-mode="tabular"] .orcanex-wfc-row:last-child[b-ld7uip40jb] {
    border-bottom: none;
}

/* ─── Cells ─── */
.orcanex-wfc-row-id-num[b-ld7uip40jb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.orcanex-wfc-row-stage[b-ld7uip40jb] { margin-top: 4px; }
.orcanex-wfc-row-stage > .orcanex-pill[b-ld7uip40jb] { margin-bottom: 0; }

.orcanex-wfc-row-examinee-name[b-ld7uip40jb] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-wfc-row-examinee-meta[b-ld7uip40jb] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.orcanex-wfc-row-status[b-ld7uip40jb] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.orcanex-wfc-row-status-complete[b-ld7uip40jb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-success);
}

.orcanex-wfc-row-status-next[b-ld7uip40jb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-wfc-row-status-next strong[b-ld7uip40jb] {
    color: var(--color-text);
    font-weight: 600;
}

.orcanex-wfc-row-status-next-end[b-ld7uip40jb] {
    font-style: italic;
}

.orcanex-wfc-row-chevron[b-ld7uip40jb] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Mobile-stack — id+stage on the top row, examinee+chevron next,
   status (complete + next-step) full-width underneath. RowItemSize
   (CaseWorkflowComplete.razor.cs) is taller at mobile to match.
   ============================================================ */
:root[data-viewport="mobile"]   .orcanex-wfc-rows[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-rows[b-ld7uip40jb] {
    gap: var(--space-2);
    padding-right: 0;
}

:root[data-viewport="mobile"]   .orcanex-wfc-row[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row[b-ld7uip40jb] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "id        stage"
        "examinee  chevron"
        "status    status";
    column-gap: var(--space-2);
    row-gap: 6px;
    padding: 10px var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
}

:root[data-viewport="mobile"]   .orcanex-wfc-row-id[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row-id[b-ld7uip40jb]        { grid-area: id; align-self: start; }
:root[data-viewport="mobile"]   .orcanex-wfc-row-stage[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row-stage[b-ld7uip40jb]     { grid-area: stage; justify-self: end; align-self: start; margin-top: 0; }
:root[data-viewport="mobile"]   .orcanex-wfc-row-examinee[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row-examinee[b-ld7uip40jb]  { grid-area: examinee; }
:root[data-viewport="mobile"]   .orcanex-wfc-row-chevron[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row-chevron[b-ld7uip40jb]   { grid-area: chevron; justify-self: end; align-self: center; }
:root[data-viewport="mobile"]   .orcanex-wfc-row-status[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row-status[b-ld7uip40jb]    { grid-area: status; }

:root[data-viewport="mobile"]   .orcanex-wfc-row-status-next[b-ld7uip40jb],
:root[data-viewport="mobile-l"] .orcanex-wfc-row-status-next[b-ld7uip40jb] { white-space: normal; }
/* /Components/Pages/Cases/CollaboraEditor.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   Collabora popup editor — Word-like desktop chrome
   ══════════════════════════════════════════════════════ */

/* ── Full-viewport chrome ── */
.collabora-popup-chrome[b-0qcj5laz91] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #f4f5f7;
}

/* ── Title bar — mimics a desktop application ribbon header ── */
.collabora-title-bar[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    background: linear-gradient(180deg, #2b579a 0%, #1e3f73 100%);
    color: #fff;
    user-select: none;
    -webkit-app-region: drag; /* enables window dragging if supported */
}

.collabora-title-left[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.collabora-app-icon[b-0qcj5laz91] {
    font-size: 1.69rem;
    color: #80b3ff;
    flex-shrink: 0;
}

.collabora-doc-title[b-0qcj5laz91] {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e8edf3;
    letter-spacing: 0.2px;
}

/* ── Badges ── */
.collabora-badge[b-0qcj5laz91] {
    font-size: 0.77rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.collabora-badge.readonly[b-0qcj5laz91] {
    background: rgba(255, 255, 255, 0.15);
    color: #c4d4e8;
}

.collabora-badge.editing[b-0qcj5laz91] {
    background: rgba(10, 207, 151, 0.25);
    color: #6ff0c4;
}

/* ── Centre — save status ── */
.collabora-title-centre[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.collabora-save-status[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #6ff0c4;
    animation: collabora-fade-in-b-0qcj5laz91 0.3s ease-in;
}

.collabora-save-status.waiting[b-0qcj5laz91] {
    color: #9ab3d4;
}

.collabora-save-status i[b-0qcj5laz91] {
    font-size: 1.15rem;
}

@keyframes collabora-fade-in-b-0qcj5laz91 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Right — toolbar buttons ── */
.collabora-title-right[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.collabora-toolbar-btn[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: #c4d4e8;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-app-region: no-drag;
}

.collabora-toolbar-btn:hover:not(:disabled)[b-0qcj5laz91] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.collabora-toolbar-btn:disabled[b-0qcj5laz91] {
    opacity: 0.4;
    cursor: not-allowed;
}

.collabora-toolbar-btn i[b-0qcj5laz91] {
    font-size: 1.23rem;
}

.collabora-toolbar-btn.fullscreen-btn[b-0qcj5laz91] {
    padding: 5px 8px;
}

.collabora-toolbar-btn.fullscreen-btn i[b-0qcj5laz91] {
    font-size: 1.38rem;
}

.collabora-toolbar-btn.close-btn[b-0qcj5laz91] {
    padding: 5px 8px;
    margin-left: 4px;
}

.collabora-toolbar-btn.close-btn:hover[b-0qcj5laz91] {
    background: #e81123;
    color: #fff;
}

.collabora-toolbar-divider[b-0qcj5laz91] {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}

.collabora-btn-label[b-0qcj5laz91] {
    white-space: nowrap;
}

/* ── Editor body — fills remaining viewport ── */
.collabora-editor-body[b-0qcj5laz91] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.collabora-frame[b-0qcj5laz91] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Error panel ── */
.collabora-error-panel[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    margin: 24px;
    background: #fff3f3;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
    font-size: 1.08rem;
}

.collabora-error-panel i[b-0qcj5laz91] {
    font-size: 1.54rem;
    color: #dc3545;
}

/* ── Loading panel ── */
.collabora-loading-panel[b-0qcj5laz91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.collabora-loading-panel p[b-0qcj5laz91] {
    color: #6c757d;
    font-size: 1.08rem;
    margin: 0;
}

/* ── Hide button labels on narrow windows ── */
@media (max-width: 600px) {
    .collabora-btn-label[b-0qcj5laz91] {
        display: none;
    }
}

/* ── QA action buttons ── */
.collabora-qa-btn[b-0qcj5laz91] {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    -webkit-app-region: no-drag;
    letter-spacing: 0.2px;
}

.collabora-qa-btn:disabled[b-0qcj5laz91] {
    opacity: 0.5;
    cursor: not-allowed;
}

.collabora-qa-btn.qa-complete[b-0qcj5laz91] {
    background: #0acf97;
    color: #fff;
}

.collabora-qa-btn.qa-complete:hover:not(:disabled)[b-0qcj5laz91] {
    background: #09b886;
}

.collabora-qa-btn.qa-return[b-0qcj5laz91] {
    background: #ffbc00;
    color: #1e2933;
}

.collabora-qa-btn.qa-return:hover:not(:disabled)[b-0qcj5laz91] {
    background: #e5a800;
}

.collabora-qa-btn.qa-forward[b-0qcj5laz91] {
    background: #39afd1;
    color: #fff;
}

.collabora-qa-btn.qa-forward:hover:not(:disabled)[b-0qcj5laz91] {
    background: #2e9ab8;
}

.collabora-qa-btn i[b-0qcj5laz91] {
    font-size: 1.15rem;
}
/* /Components/Pages/Cases/DocumentEditor.razor.rz.scp.css */
/* ── Document editor wrapper ── */
.doc-editor-wrapper[b-bb8wnwl0on] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ── Document name bar ── */
.doc-editor-name-bar[b-bb8wnwl0on] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    min-height: 40px;
}

.doc-editor-name-bar i[b-bb8wnwl0on] {
    font-size: 1.38rem;
    color: #6c757d;
}

.doc-editor-name[b-bb8wnwl0on] {
    font-size: 1.08rem;
    font-weight: 600;
    color: #313a46;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* ── Custom toolbar icon sizing ── */
[b-bb8wnwl0on] .toolbar-icon {
    font-size: 1.23rem;
}

/* ── Text rendering quality ── */
[b-bb8wnwl0on] .e-documenteditor,
[b-bb8wnwl0on] .e-documenteditor-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Canvas rendering for crisp text ── */
[b-bb8wnwl0on] .e-de-canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ── Remove Syncfusion default title bar if rendered ── */
[b-bb8wnwl0on] .e-de-ctn-title {
    display: none !important;
}

/* ── Toolbar styling refinement ── */
[b-bb8wnwl0on] .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
    font-family: inherit;
}

/* ── Status bar polish ── */
[b-bb8wnwl0on] .e-documenteditor-container .e-de-status-bar {
    border-top: 1px solid #e9ecef;
}
/* /Components/Pages/Cases/VideoMeeting.razor.rz.scp.css */
/* ===========================================================================
   Video meeting page — authenticated full-viewport Whereby web-component embed.
   Uses EmptyLayout so it claims the entire viewport; chrome reads from Orcanex
   tokens so the user's theme + accent automatically apply.

   These selectors target elements authored in this .razor file — plain
   descendant selectors (not ::deep) so Blazor's CSS isolation appends the
   scope attribute to the matched element itself, e.g.
       .video-meeting-shell  →  .video-meeting-shell[b-xxxx]
   which matches the rendered <div class="video-meeting-shell" b-xxxx>.
   =========================================================================== */

.video-meeting-shell[b-7o5z18vzo8] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    overflow: hidden;
}

.video-meeting-topbar[b-7o5z18vzo8] {
    position: relative;
    z-index: 10;
    height: var(--h-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    gap: var(--space-3);
}

.video-meeting-brand[b-7o5z18vzo8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.video-meeting-mark[b-7o5z18vzo8] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.video-meeting-mark-orca[b-7o5z18vzo8] {
    background: linear-gradient(135deg, #3FAFA3, #1F6C7A);
}

.video-meeting-name[b-7o5z18vzo8] {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-meeting-meta[b-7o5z18vzo8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.video-meeting-stage[b-7o5z18vzo8] {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #000000;
    display: flex;
}

/* The <whereby-embed> custom element renders at intrinsic size by default —
   force it to fill the stage. Same treatment as an iframe child. */
.video-meeting-stage whereby-embed[b-7o5z18vzo8] {
    flex: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* ----------- Loading / error states ----------- */
.video-meeting-state[b-7o5z18vzo8] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
}

.video-meeting-state-inner[b-7o5z18vzo8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    max-width: 480px;
}

.video-meeting-state-actions[b-7o5z18vzo8] {
    display: inline-flex;
    gap: var(--space-3);
}

.video-meeting-spinner[b-7o5z18vzo8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: video-meeting-spin-b-7o5z18vzo8 0.9s linear infinite;
}

@keyframes video-meeting-spin-b-7o5z18vzo8 {
    to { transform: rotate(360deg); }
}

.video-meeting-muted[b-7o5z18vzo8] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

@media (max-width: 640px) {
    .video-meeting-topbar[b-7o5z18vzo8] {
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }
    /* Drop the date pill on small phones — brand mark + Host/Guest + Leave
       is enough chrome; the appointment time eats too much horizontal room. */
    .video-meeting-meta > :first-child[b-7o5z18vzo8] { display: none; }
    .video-meeting-name[b-7o5z18vzo8] { font-size: 0.95rem; }
}
/* /Components/Pages/CRM/ClientDetails.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   Client details — Orcanex theme. Hero band + tab strip + Card-padded
   content. Existing SectionCard interiors unchanged.
   ────────────────────────────────────────────────────────────────────── */

.orcanex-client-details-page[b-sbwffpcisk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*min-height: 0;*/
}

/* Defeat the global `.orcanex-frame-content > *:last-child` padding-bottom
   that tokens.css applies for the mobile bottom-tab clearance. The client
   details page has its own internal scroll on `.orcanex-client-details-content`,
   so the global wrapper-level clearance only produces a dead band below the
   tab content. The `::after` spacer on frame-content still gives the bottom-
   tab inset. Selector specificity (0,4,0) + scope → (0,5,0), wins over the
   global (0,4,0) rule. */
:root[data-viewport="mobile"]   .orcanex-frame-content .orcanex-client-details-page[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .orcanex-frame-content .orcanex-client-details-page[b-sbwffpcisk] {
    padding-bottom: 0 !important;
}

.orcanex-client-details-content[b-sbwffpcisk] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px 24px;
}

/* ── Hero ── */
.orcanex-client-hero[b-sbwffpcisk] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-client-hero-back[b-sbwffpcisk] {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.orcanex-client-hero-back:hover[b-sbwffpcisk] {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

.orcanex-client-hero-back:focus-visible[b-sbwffpcisk] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-client-hero-logo[b-sbwffpcisk] {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.orcanex-client-hero-logo-edit[b-sbwffpcisk] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.orcanex-client-hero-text[b-sbwffpcisk] {
    flex: 1;
    min-width: 0;
}

.orcanex-client-hero-title-row[b-sbwffpcisk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.orcanex-client-hero-name[b-sbwffpcisk] {
    margin: 0;
    font-size: 1.54rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.orcanex-client-hero-meta[b-sbwffpcisk] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.orcanex-client-hero-meta span[b-sbwffpcisk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.orcanex-client-hero-stats[b-sbwffpcisk] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Compact override for KPI tiles in the hero row — the default 88px min-height
   and 1.85rem value font make the header row much taller than the avatar +
   name + meta block requires. KpiTile is a shared primitive so we narrow the
   override to this page via the wrapper class + ::deep (KpiTile renders
   .orcanex-kpi inside its own CSS-isolation scope). */
.orcanex-client-hero-stats[b-sbwffpcisk]  .orcanex-kpi {
    padding: 8px 14px;
    min-height: 0;
    min-width: 90px;
    gap: 2px;
}

.orcanex-client-hero-stats[b-sbwffpcisk]  .orcanex-kpi-row {
    margin-top: 0;
}

.orcanex-client-hero-stats[b-sbwffpcisk]  .orcanex-kpi-value {
    font-size: 1.25rem;
    letter-spacing: -0.25px;
}

.orcanex-client-hero-actions[b-sbwffpcisk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.orcanex-client-hero-code[b-sbwffpcisk] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-left: var(--space-1);
}

@media (max-width: 1199px) {
    .orcanex-client-hero[b-sbwffpcisk] {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .orcanex-client-hero-text[b-sbwffpcisk] {
        flex: 1 1 60%;
    }
    .orcanex-client-hero-stats[b-sbwffpcisk] {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }
    .orcanex-client-hero-actions[b-sbwffpcisk] {
        order: 2;
        margin-left: auto;
    }
}

/* ── Tabs ── */
.orcanex-client-tabs[b-sbwffpcisk] {
    display: flex;
    gap: 16px;
    padding: 0 24px;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    flex-shrink: 0;
}

.orcanex-client-tab[b-sbwffpcisk] {
    background: transparent;
    border: none;
    padding: 12px 4px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.orcanex-client-tab:hover[b-sbwffpcisk] {
    color: var(--color-text);
}

.orcanex-client-tab.is-active[b-sbwffpcisk] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}

.orcanex-client-tab-count[b-sbwffpcisk] {
    font-size: 0.85rem;
    background: var(--color-bg);
    color: var(--color-text-muted);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.orcanex-client-tab.is-active .orcanex-client-tab-count[b-sbwffpcisk] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.t-mono[b-sbwffpcisk] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* Existing badges retained for backwards compat */
.timeline .card[b-sbwffpcisk] { border-radius: 6px; }
.badge.font-16[b-sbwffpcisk] { font-size: 1rem; }

/* Service Types Table */
.service-row[b-sbwffpcisk] {
    transition: background-color 0.15s ease;
    border-left: 3px solid transparent;
}

.service-row:hover[b-sbwffpcisk] {
    background-color: var(--color-bg);
}

.service-row.selected[b-sbwffpcisk] {
    background-color: var(--color-accent-soft);
    border-left-color: var(--color-accent);
}

.service-row td[b-sbwffpcisk] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border-soft);
}

/* Umbrella Hierarchy tree */
.umbrella-tree-node[b-sbwffpcisk] {
    border-bottom: 1px dashed var(--color-border);
}

.umbrella-tree-node:last-child[b-sbwffpcisk] {
    border-bottom: none;
}

.umbrella-tree-node.is-current[b-sbwffpcisk] {
    background-color: var(--color-accent-soft);
    border-left: 3px solid var(--color-accent);
}

/* ============================================================
   Mobile detail-page header — mirrors `.caseform-mobile-header`
   from CaseForm.razor.css per the CLAUDE.md detail-page recipe:
   back chevron + name title + type subtitle + single Edit/Save
   action. Hidden at tablet+ via plain `display: none` (don't use
   `display: revert` — it beats subsequent flex rules; see the
   note in CaseForm.razor.css for the full reasoning).
   ============================================================ */
.client-details-mobile-header[b-sbwffpcisk] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    min-height: var(--h-topbar);
    flex-shrink: 0;
}

:root[data-viewport="mobile"]   .client-details-mobile-header[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-details-mobile-header[b-sbwffpcisk] {
    display: flex;
}

.client-details-mobile-back[b-sbwffpcisk] {
    width: var(--touch-target);
    height: var(--touch-target);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: -8px;
}

.client-details-mobile-back:hover[b-sbwffpcisk] {
    background: var(--color-bg);
}

.client-details-mobile-titles[b-sbwffpcisk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.client-details-mobile-title[b-sbwffpcisk] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-details-mobile-subtitle[b-sbwffpcisk] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Save / Edit icon-only button at the right — clamp to 36 px. The
   `::deep` is essential for <Btn>-rendered buttons (Edit), while the
   raw <button class="orcanex-btn"> (Save submit) is in our own scope
   so doesn't need it. See CaseForm.razor.css for the cast-iron note. */
.client-details-mobile-header[b-sbwffpcisk]  .orcanex-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
}

.client-details-mobile-header > .orcanex-btn[b-sbwffpcisk] {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
}

/* ============================================================
   Services + Assessment Types tabs — mobile-stack card reflow.

   Uses the SAME recipe as the Contacts table reflow below so that
   all three tabs (Contacts / Services / Assessment Types) and the
   Addresses tab read identically on a phone:

     • `<tr>` becomes a block-level card (panel background, border,
       radius, soft shadow).
     • The "name" cell is the card title — bold, no label prefix,
       with a bottom-border separator.
     • Every other cell renders as a row of [LABEL] [VALUE] using
       the `::before { content: attr(data-label) }` trick. The
       LABEL takes a fixed 80 px column on the left so all rows
       line up vertically — exactly like the Contacts card.
     • The Services action cell (Configure Workflow button) sits
       at the bottom of the card as a full-width row with a top
       border.

   We deliberately do NOT use `display: grid` for the row. The
   previous grid layout placed the SELECT checkbox in a separate
   column from the NAME, which pushed the name ~36 px right and
   made it visually inconsistent with the flush-left Contacts
   name. Block + flex matches Contacts pixel-for-pixel.
   ============================================================ */
:root[data-viewport="mobile"]   .client-services-table thead[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table thead[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table thead[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table thead[b-sbwffpcisk] {
    display: none;
}

/* Force the <table> itself to behave like a block container at mobile.
   The default `display: table` runs the browser's table-layout algorithm
   on the cells, which fights the `display: flex` we set on each <tr>
   and caps the rows at the table's intrinsic column widths. With
   `display: block; width: 100%` the table simply provides a 100%-wide
   box for the tr/td flex layout to fill — the name cell can then claim
   its full `flex: 1 1 0` width, so short names like "3rd Party" no
   longer wrap onto two lines. */
:root[data-viewport="mobile"]   .client-services-table table[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table table[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table table[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table table[b-sbwffpcisk] {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
}

:root[data-viewport="mobile"]   .client-services-table tbody[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody[b-sbwffpcisk] {
    display: block;
}

/* Each row becomes a panel-bordered card. Flex-wrap so the NAME
   (order -2) and SELECT checkbox (order -1) share the title row —
   the SELECT is the Services / Assessment equivalent of the
   Contacts edit/delete buttons in the header. Default-ordered
   cells (Description, Default, Workflow, Cost, Actions) wrap to
   subsequent full-width rows below. */
:root[data-viewport="mobile"]   .client-services-table tbody tr[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody tr[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody tr[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody tr[b-sbwffpcisk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Every cell defaults to a full-width row of its own. Sets the
   complete label-value layout plus the default flex-basis (100%).
   The name + select cells override `flex` below — for them basis
   becomes `auto`, which is why we deliberately AVOID setting a
   `width: 100%` here: with width set, `flex-basis: auto` would
   fall back to width=100% and force every cell to its own row,
   pushing the select checkbox off the title row. */
:root[data-viewport="mobile"]   .client-services-table tbody td[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody td[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td[b-sbwffpcisk] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 4px 0;
    border: none;
    font-size: 0.88rem;
    text-align: left;
    flex: 0 0 100%;
}

/* NAME cell — title on the left of the header row. Bumped font-size
   and a 36 px min-height match the Contacts title-row size so the
   header reads as a solid block beside the SELECT checkbox.

   `flex: 1 1 0` is deliberate (now that the duplicate `width: 100%`
   on the generic td rule has been removed): basis 0 means the line-
   packing algorithm treats the cell as zero-width when deciding what
   fits on line 1, so name + select always pair up on the title row.
   `flex-grow: 1` then expands the cell to fill the remaining row
   space after the select cell's content width. If the name text is
   long ("Workstation Assessment"), it wraps INSIDE the cell — the
   cell doesn't grow beyond its share of the row, so the checkbox
   stays put. */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-name[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-name[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-name[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-name[b-sbwffpcisk] {
    flex: 1 1 0;
    order: -2;
    min-width: 0;
    min-height: 36px;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 600;
    align-items: center;
    padding-top: 0;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}

/* Force the inner `<div class="d-flex">` to fill the name cell's
   width so the name span has the whole cell to lay out in. Without
   this the inner div stays at its content size (~80 px for "3rd
   Party") even though the outer cell expanded, which left the text
   visually constrained even though the cell was wide. */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-name > div[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-name > div[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-name > div[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-name > div[b-sbwffpcisk] {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

/* The text span inside the inner div should claim the remaining width
   after the colour dot. Without this it sits at content size and any
   "padding" the user perceives between the text and the checkbox is
   actually wasted space inside the cell. */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-name > div > span:last-child[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-name > div > span:last-child[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-name > div > span:last-child[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-name > div > span:last-child[b-sbwffpcisk] {
    flex: 1 1 auto;
    min-width: 0;
    /* Standard wrap behaviour — short text fits on one line, long
       text wraps at word boundaries. No `white-space: nowrap` here
       because the user wants long names to be allowed to wrap. */
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

/* SELECT cell — sits at the right of the header row, next to the
   name. Hidden data-label (the checkbox is self-explanatory). The
   36 px min-height keeps the title row visually balanced with the
   Contacts edit/delete chip row. */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-select[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-select[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-select[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-select[b-sbwffpcisk] {
    flex: 0 0 auto;
    order: -1;
    min-height: 36px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}

:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-select[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-select[b-sbwffpcisk]::before,
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-select[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-select[b-sbwffpcisk]::before {
    display: none;
    content: none;
    flex: 0 0 0;
}

/* Make the checkbox a touch-friendly 24 px square so it's tappable
   inside the 36 px-tall header row. */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-select input[type="checkbox"][b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-select input[type="checkbox"][b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-select input[type="checkbox"][b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-select input[type="checkbox"][b-sbwffpcisk] {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* Services workflow-action cell — push to the bottom of the card so
   the full-width Configure / View Workflow button always sits below
   the data rows (independent of where its <td> falls in DOM order). */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-actions[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-actions[b-sbwffpcisk] {
    order: 99;
}

/* Selected state — accent border + soft tint. */
:root[data-viewport="mobile"]   .client-services-table tbody tr.selected[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody tr.selected[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-assessment-table tbody tr.selected[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody tr.selected[b-sbwffpcisk] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* (Deleted duplicate older block — the consolidated rule above now
   provides the cell layout. The name-cell font/border styling lives
   in the dedicated name override earlier in the file.) */

/* Label prefix — same dimensions as the Contacts table. */
:root[data-viewport="mobile"]   .client-services-table tbody td[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-services-table tbody td[b-sbwffpcisk]::before,
:root[data-viewport="mobile"]   .client-assessment-table tbody td[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-assessment-table tbody td[b-sbwffpcisk]::before {
    content: attr(data-label);
    flex: 0 0 80px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Default cell on Services — standard label-value row. The markup
   carries Bootstrap's `text-center !important` so we need `!important`
   on `text-align` to win the cascade, and we also force flex
   `justify-content: flex-start` to keep the checkbox flush against
   the DEFAULT label rather than centred in the value column. */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-default[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-default[b-sbwffpcisk] {
    text-align: left !important;
    justify-content: flex-start;
}

/* Force the Service Type / Assessment Description name to render bold.
   The markup wraps the text in a `<span class="fw-medium text-dark">`,
   and `.fw-medium` (Bootstrap, `font-weight: 500`) inherits-and-wins
   against any `font-weight` set on the surrounding td. Override
   directly on the inner span. Applies at every viewport so the desktop
   list / "main page" view reads the same way. */
.client-services-cell-name .fw-medium[b-sbwffpcisk],
.client-assessment-cell-name .fw-medium[b-sbwffpcisk] {
    font-weight: 700 !important;
}

/* Cost input on Assessment Types — input-group fills the value column
   after the COST label. */
:root[data-viewport="mobile"]   .client-assessment-table tbody td.client-assessment-cell-cost .input-group[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table tbody td.client-assessment-cell-cost .input-group[b-sbwffpcisk] {
    flex: 1;
    min-width: 0;
}

/* Services workflow action cell — full-width button at the bottom of
   the card, separated by a top border (mirrors the Contacts actions
   row which sits below the data rows). */
:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-actions[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-actions[b-sbwffpcisk] {
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border-soft);
    justify-content: center;
    text-align: center;
    white-space: normal !important;
    width: 100%;
}

:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-actions[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-actions[b-sbwffpcisk]::before {
    display: none;
    content: none;
    flex: 0 0 0;
}

:root[data-viewport="mobile"]   .client-services-table tbody td.client-services-cell-actions .btn[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table tbody td.client-services-cell-actions .btn[b-sbwffpcisk] {
    width: 100%;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Address card action buttons (Edit + Delete) — mobile sizing.
   The desktop `.btn-group .btn-sm` renders as a tight pair; on
   mobile the buttons end up oddly tall (44 px touch-target
   floor inherited from `--h-button-sm`) and the btn-group
   removes the gap between them so they butt up against each
   other awkwardly. Force consistent 36 × 36 squares with a
   small inline gap. Reset the btn-group's negative-margin
   shadowing so each button has its own rounded corners.
   ============================================================ */
:root[data-viewport="mobile"]   .client-address-actions[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-address-actions[b-sbwffpcisk] {
    display: inline-flex;
    gap: var(--space-2);
}

:root[data-viewport="mobile"]   .client-address-actions > .client-address-action-btn[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-address-actions > .client-address-action-btn[b-sbwffpcisk],
.client-address-card-actions > .client-address-action-btn[b-sbwffpcisk] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 0 !important;
}

/* Sticky-top z-index clamp is still needed for desktop — keeps the
   inner thead from leaking above the tab strip. (Mobile reflow hides
   the thead entirely so it's a desktop-only concern there.) */

/* Sticky table headers — Bootstrap's `.sticky-top` defaults to
   `z-index: 1020`, which leaks above the page-level tab strip
   (`.orcanex-client-tabs` has no z-index → it ends up beneath the
   thead). Clamp the thead z-index so it sticks within its own
   `.table-responsive` scrolling container only, not page-wide.
   Applies to both the Services table and the Assessment Types
   table (both use `sticky-top` on the thead). */
.client-services-table thead.sticky-top[b-sbwffpcisk],
.client-assessment-table thead.sticky-top[b-sbwffpcisk] {
    z-index: 1 !important;
}

/* ============================================================
   Addresses tab — card chrome that matches the Contacts mobile
   card pixel-for-pixel.

   The address markup uses explicit `.client-address-card-*` classes
   instead of a `<table>` because addresses are inherently structured
   as a small bag of fields — turning them into table rows for the
   data-label trick would be needless. The visual rules below mirror
   the Contacts mobile-stack card: panel bg, border, soft shadow,
   bold title with bottom-border separator, [LABEL] [VALUE] rows
   with the 80 px label column.

   These rules apply at every viewport so the Address card looks
   consistent on desktop (in the `col-md-6` grid) and mobile (full-
   width column) — only the column count changes.
   ============================================================ */
.client-address-card[b-sbwffpcisk] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.client-address-card-title-row[b-sbwffpcisk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}

.client-address-card-title[b-sbwffpcisk] {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-address-card-actions[b-sbwffpcisk] {
    display: inline-flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.client-address-card-row[b-sbwffpcisk] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: 0.88rem;
}

.client-address-card-label[b-sbwffpcisk] {
    flex: 0 0 80px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.client-address-card-value[b-sbwffpcisk] {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    line-height: 1.4;
    font-style: normal;
}

/* ============================================================
   Contacts tab — mobile-stack card reflow.

   The 6-column Contacts table (Name / Job / Email / Phone / Role /
   Actions) is unreadable at 375 px when forced through
   `.table-responsive` horizontal scroll. At mobile we collapse the
   table into a vertical list of cards — one card per contact — and
   stamp each cell's column label on the left via the `data-label`
   attribute so users still know what each value is.

   The actions cell renders its two buttons side-by-side in a
   horizontal flex row (the desktop default-stack issue the user
   reported was caused by the 1-column reflow pushing each button
   onto its own line — fixed by explicit `flex-direction: row` on
   the actions cell at mobile).
   ============================================================ */
:root[data-viewport="mobile"]   .client-contacts-table thead[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table thead[b-sbwffpcisk] {
    display: none;
}

:root[data-viewport="mobile"]   .client-contacts-table table[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table table[b-sbwffpcisk] {
    border: none;
}

:root[data-viewport="mobile"]   .client-contacts-table tbody[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody[b-sbwffpcisk] {
    display: block;
}

/* Card is a flex-wrap container. Name + actions share the first row
   (the "title row"); all other cells take the full width and wrap to
   subsequent rows. This puts the edit/delete buttons in the header
   like the Addresses tab. */
:root[data-viewport="mobile"]   .client-contacts-table tbody tr[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody tr[b-sbwffpcisk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

:root[data-viewport="mobile"]   .client-contacts-table tbody td[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody td[b-sbwffpcisk] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 4px 0;
    border: none;
    font-size: 0.88rem;
    flex: 0 0 100%;     /* every cell takes its own row by default */
    text-align: left;
}

/* Stamp the column name as a small uppercase label before the value
   (data-label is set on each <td> in the markup). */
:root[data-viewport="mobile"]   .client-contacts-table tbody td[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-contacts-table tbody td[b-sbwffpcisk]::before {
    content: attr(data-label);
    flex: 0 0 80px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Title row — NAME on the left, ACTIONS on the right, both sharing a
   single visual row with a continuous bottom-border separator.

   `order` must be NEGATIVE here so name + actions float to the top of
   the card. Unordered cells (job title, email, phone, role) default
   to `order: 0` — with name at -2 and actions at -1, those default
   cells naturally fall onto subsequent rows below the title row. */
:root[data-viewport="mobile"]   .client-contacts-table tbody td.client-contacts-cell-name[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody td.client-contacts-cell-name[b-sbwffpcisk] {
    flex: 1 1 0;
    order: -2;
    min-width: 0;
    /* Match the action-button row height (36 px) so the title and the
       edit/delete chips share the same visual block. Bigger font-size +
       min-height pull the name up to the same weight as the buttons. */
    min-height: 36px;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 600;
    align-items: center;
    padding-top: 0;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}

:root[data-viewport="mobile"]   .client-contacts-table tbody td.client-contacts-cell-name[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-contacts-table tbody td.client-contacts-cell-name[b-sbwffpcisk]::before {
    display: none;
    content: none;
    flex: 0 0 0;
}

:root[data-viewport="mobile"]   .client-contacts-table tbody td.client-contacts-cell-actions[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody td.client-contacts-cell-actions[b-sbwffpcisk] {
    flex: 0 0 auto;
    order: -1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-1);
    padding-top: 0;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
}

:root[data-viewport="mobile"]   .client-contacts-table tbody td.client-contacts-cell-actions[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .client-contacts-table tbody td.client-contacts-cell-actions[b-sbwffpcisk]::before {
    display: none;
    content: none;
    flex: 0 0 0;
}

/* Role badges — wrap inline rather than stack one per row. */
:root[data-viewport="mobile"]   .client-contacts-table tbody td.client-contacts-cell-role[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody td.client-contacts-cell-role[b-sbwffpcisk] {
    flex-wrap: wrap;
}

/* Edit + Delete buttons — 36 × 36 icon-only chips, matching the
   Addresses action buttons and the global mobile-header convention. */
:root[data-viewport="mobile"]   .client-contacts-table tbody td.client-contacts-cell-actions .btn[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-contacts-table tbody td.client-contacts-cell-actions .btn[b-sbwffpcisk] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    flex-shrink: 0;
}

/* ============================================================
   Document Password Vault (Client Management tab)
   Mirrors the .client-contacts-table mobile-stack pattern so the
   table reflows to cards on phones. Each <td> needs a data-label
   attribute in the markup to populate the stamped column header.
   ============================================================ */
.doc-pwd-intro[b-sbwffpcisk] {
    max-width: 720px;
}

.doc-pwd-cell[b-sbwffpcisk] {
    font-size: 0.92rem;
    white-space: nowrap;
}

.doc-pwd-plaintext[b-sbwffpcisk] {
    word-break: break-all;
    white-space: normal;
}

.doc-pwd-action[b-sbwffpcisk] {
    line-height: 1;
    vertical-align: middle;
}

.doc-pwd-action-btn[b-sbwffpcisk] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
}

/* Mobile / mobile-l — stack rows as cards. */
:root[data-viewport="mobile"]   .doc-pwd-table thead[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table thead[b-sbwffpcisk] {
    display: none;
}

:root[data-viewport="mobile"]   .doc-pwd-table table[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table table[b-sbwffpcisk] {
    border: none;
}

:root[data-viewport="mobile"]   .doc-pwd-table tbody[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table tbody[b-sbwffpcisk] {
    display: block;
}

:root[data-viewport="mobile"]   .doc-pwd-table tbody tr[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table tbody tr[b-sbwffpcisk] {
    display: block;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

:root[data-viewport="mobile"]   .doc-pwd-table tbody td[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table tbody td[b-sbwffpcisk] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 4px 0;
    border: none;
    font-size: 0.88rem;
    width: 100%;
    text-align: left;
    white-space: normal;
}

:root[data-viewport="mobile"]   .doc-pwd-table tbody td[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .doc-pwd-table tbody td[b-sbwffpcisk]::before {
    content: attr(data-label);
    flex: 0 0 90px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* The actions cell never gets a data-label — drop the stamped header
   and keep the buttons in a single row aligned to the right of the
   card with a separator above. */
:root[data-viewport="mobile"]   .doc-pwd-table tbody td.doc-pwd-actions[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table tbody td.doc-pwd-actions[b-sbwffpcisk] {
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border-soft);
    text-align: right;
}

:root[data-viewport="mobile"]   .doc-pwd-table tbody td.doc-pwd-actions[b-sbwffpcisk]::before,
:root[data-viewport="mobile-l"] .doc-pwd-table tbody td.doc-pwd-actions[b-sbwffpcisk]::before {
    display: none;
}

:root[data-viewport="mobile"]   .doc-pwd-table tbody td.doc-pwd-actions .doc-pwd-action-btn[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-table tbody td.doc-pwd-actions .doc-pwd-action-btn[b-sbwffpcisk] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

/* Hide the "Add password" label text at mobile — keep the + icon only. */
:root[data-viewport="mobile"] .doc-pwd-add-btn-label[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-add-btn-label[b-sbwffpcisk] {
    display: none;
}

:root[data-viewport="mobile"] .doc-pwd-add-btn[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-add-btn[b-sbwffpcisk] {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:root[data-viewport="mobile"] .doc-pwd-add-btn .mdi[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .doc-pwd-add-btn .mdi[b-sbwffpcisk] {
    margin-right: 0 !important;
}

/* ============================================================
   Assessment Types tab — DROP the 50 vh max-height + overflow cap
   at mobile. The desktop wrapper caps the table at 50 vh and adds
   its own scroll, which on a phone leaves the user with a tiny
   inner scroll inside an already-scrolling page. The page-level
   scroll handles overflow fine; drop the cap so the assessment-
   cards lay out continuously.

   The full mobile-stack card reflow for `.client-assessment-table`
   (and `.client-services-table`) lives earlier in this file — they
   share the same grid-based recipe under "Services + Assessment
   Types tabs" above.
   ============================================================ */
:root[data-viewport="mobile"]   .client-assessment-table[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-assessment-table[b-sbwffpcisk],
:root[data-viewport="mobile"]   .client-services-table[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .client-services-table[b-sbwffpcisk] {
    max-height: none !important;
    overflow: visible !important;
}

/* Soft shadow on the address Bootstrap cards at mobile so they
   visually match the panel-card chrome of the Contacts /
   Services / Assessment Types mobile cards. */
:root[data-viewport="mobile"]   .orcanex-client-details-content .card[b-sbwffpcisk],
:root[data-viewport="mobile-l"] .orcanex-client-details-content .card[b-sbwffpcisk] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
/* /Components/Pages/CRM/Clients.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   Clients list — Orcanex theme. Token-only colours; rows mirror the Cases
   page virtualised layout. Avatar-square, status pill, SLA mini-bar,
   primary contact + account owner stacks, chevron.
   ────────────────────────────────────────────────────────────────────── */

.orcanex-clients-page[b-udfj5d3s29] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Defeat the global `.orcanex-frame-content > *:last-child` padding-bottom
   rule from tokens.css. The Clients page handles its own internal scroll
   on `.orcanex-clients-rows`; the global wrapper-level clearance only
   produces dead space below the list. The `::after` spacer on
   frame-content still provides the bottom-tab inset. Selector specificity
   (0,4,0) + scope attribute → (0,5,0), beats the global (0,4,0). */
:root[data-viewport="mobile"]   .orcanex-frame-content .orcanex-clients-page[b-udfj5d3s29],
:root[data-viewport="mobile-l"] .orcanex-frame-content .orcanex-clients-page[b-udfj5d3s29] {
    padding-bottom: 0 !important;
}

.orcanex-clients-content[b-udfj5d3s29] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 24px;
    gap: 12px;
    overflow: hidden;
}

/* At mobile the desktop 24 px side + bottom padding adds dead space below
   the row list and pinches the row width. Match the Cases-page mobile
   recipe: tight 8 px sides, 12 px bottom, smaller inter-row gap. */
:root[data-viewport="mobile"]   .orcanex-clients-content[b-udfj5d3s29],
:root[data-viewport="mobile-l"] .orcanex-clients-content[b-udfj5d3s29] {
    padding: var(--space-2) var(--space-2) var(--space-3);
    gap: var(--space-2);
}

.orcanex-num[b-udfj5d3s29] { font-weight: 600; color: var(--color-text); }
.orcanex-clients-active-num[b-udfj5d3s29] { color: var(--color-success); font-weight: 600; }
.orcanex-clients-risk-num[b-udfj5d3s29] { color: var(--color-danger); font-weight: 600; }

/* ── KPI strip ── */
.orcanex-clients-kpis[b-udfj5d3s29] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .orcanex-clients-kpis[b-udfj5d3s29] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Pipeline segments ── */
.orcanex-clients-segments[b-udfj5d3s29] {
    display: flex;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.orcanex-clients-segment[b-udfj5d3s29] {
    flex: 1;
    padding: 10px 14px;
    background: var(--color-panel);
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    position: relative;
    font: inherit;
    color: var(--color-text);
    transition: background var(--duration-hover, 0.15s) ease;
}

.orcanex-clients-segment:last-child[b-udfj5d3s29] { border-right: none; }
.orcanex-clients-segment:hover[b-udfj5d3s29] { background: var(--color-bg); }

.orcanex-clients-segment-active[b-udfj5d3s29]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--seg-color, var(--color-accent));
}

.orcanex-clients-segment-label[b-udfj5d3s29] {
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--seg-color, var(--color-text-muted));
}

.orcanex-clients-segment-row[b-udfj5d3s29] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.orcanex-clients-segment-value[b-udfj5d3s29] {
    font-size: 1.69rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    color: var(--color-text);
    line-height: 1.1;
}

.orcanex-clients-segment-value.is-zero[b-udfj5d3s29] { color: var(--color-text-subtle); }

.orcanex-clients-segment-total[b-udfj5d3s29] {
    background: var(--color-bg);
    cursor: default;
}
.orcanex-clients-segment-total:hover[b-udfj5d3s29] { background: var(--color-bg); }

/* ── Toolbar (now embedded in the PageHeader's Toolbar slot) ── */
.orcanex-clients-search[b-udfj5d3s29] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 260px;
    max-width: 100%;
    color: var(--color-text-muted);
    transition: border-color 0.15s ease;
}

.orcanex-clients-search:focus-within[b-udfj5d3s29] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-clients-search-input[b-udfj5d3s29] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
}

.orcanex-clients-search-input[b-udfj5d3s29]::placeholder { color: var(--color-text-subtle); }

.orcanex-clients-search-clear[b-udfj5d3s29] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
}
.orcanex-clients-search-clear:hover[b-udfj5d3s29] { color: var(--color-text); }

.orcanex-clients-divider[b-udfj5d3s29] {
    width: 1px;
    height: 20px;
    background: var(--color-border);
}

.orcanex-clients-sort-label[b-udfj5d3s29] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-clients-sort-select[b-udfj5d3s29] {
    height: 28px;
    padding: 0 26px 0 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text);
    cursor: pointer;
}

.orcanex-clients-sort-dir[b-udfj5d3s29] {
    width: 28px;
    height: 28px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.orcanex-clients-sort-dir:hover[b-udfj5d3s29] { background: var(--color-bg); color: var(--color-text); }

.orcanex-clients-filter-card[b-udfj5d3s29] { flex-shrink: 0; }

/* ── Rows ── */
.orcanex-clients-rows[b-udfj5d3s29] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.orcanex-clients-row[b-udfj5d3s29] {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 110px 200px minmax(0, 1fr) minmax(0, 1fr) 24px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    min-height: 64px;
}

.orcanex-clients-row:hover[b-udfj5d3s29] {
    background: var(--color-bg);
}

/* List mode: card (default) — each row is its own panel with rounded edges. */
.orcanex-clients-rows[data-list-mode="card"][b-udfj5d3s29] { gap: 8px; }
.orcanex-clients-rows[data-list-mode="card"] .orcanex-clients-row[b-udfj5d3s29] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* List mode: tabular — rows packed inside a single panel, divider lines only.
   overflow-x is hidden so the rounded corners clip the rows; overflow-y must
   stay `auto` so the inner virtual list scrolls. */
.orcanex-clients-rows[data-list-mode="tabular"][b-udfj5d3s29] {
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    overflow-y: auto;
}
.orcanex-clients-rows[data-list-mode="tabular"] .orcanex-clients-row[b-udfj5d3s29] {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.orcanex-clients-rows[data-list-mode="tabular"] .orcanex-clients-row:last-child[b-udfj5d3s29] {
    border-bottom: none;
}

/* Mobile-stack reflow — keep client identity, status, and chevron; hide
   secondary columns (tags, account manager, last activity) for glanceability.
   The first child is identity, the last is the chevron — pure CSS layout. */
:root[data-viewport="mobile"]   .orcanex-clients-row[b-udfj5d3s29],
:root[data-viewport="mobile-l"] .orcanex-clients-row[b-udfj5d3s29] {
    grid-template-columns: 1fr auto !important;
    padding: var(--space-3);
    gap: var(--space-2);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
:root[data-viewport="mobile"]   .orcanex-clients-row > *:nth-child(n+2):nth-child(-n+5)[b-udfj5d3s29],
:root[data-viewport="mobile-l"] .orcanex-clients-row > *:nth-child(n+2):nth-child(-n+5)[b-udfj5d3s29] {
    display: none;
}

.orcanex-clients-row-company[b-udfj5d3s29] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.orcanex-clients-row-company-text[b-udfj5d3s29] {
    min-width: 0;
}

.orcanex-clients-row-company-name[b-udfj5d3s29] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-clients-row-company-meta[b-udfj5d3s29] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-clients-row-code[b-udfj5d3s29] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--color-text-subtle);
}

.orcanex-clients-row-status[b-udfj5d3s29] {
    display: flex;
    align-items: center;
}

.orcanex-clients-row-cases-head[b-udfj5d3s29] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.orcanex-clients-row-cases-num[b-udfj5d3s29] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.orcanex-clients-row-cases-label[b-udfj5d3s29] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.orcanex-clients-row-contact[b-udfj5d3s29],
.orcanex-clients-row-owner[b-udfj5d3s29] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.orcanex-clients-row-contact-name[b-udfj5d3s29],
.orcanex-clients-row-owner-name[b-udfj5d3s29] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.orcanex-clients-row-muted[b-udfj5d3s29] {
    color: var(--color-text-subtle);
    font-size: 0.92rem;
}

.orcanex-clients-row-chevron[b-udfj5d3s29] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .orcanex-clients-row[b-udfj5d3s29] {
        grid-template-columns: minmax(0, 1fr) 90px 24px;
    }
    .orcanex-clients-row-cases[b-udfj5d3s29],
    .orcanex-clients-row-contact[b-udfj5d3s29],
    .orcanex-clients-row-owner[b-udfj5d3s29] {
        display: none;
    }
}
/* /Components/Pages/CRM/NewClient.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   New client — Orcanex theme. 4-step wizard mirroring NewCaseForm. Tab strip
   sits below the PageHeader (desktop) with the same accent-underline pattern
   used by .caseform-tabs.
   ────────────────────────────────────────────────────────────────────── */

.orcanex-newclient-page[b-h6rqkeq03r] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*min-height: 0;*/
}

/* Tab strip — mirrors caseform-tabs (44px row, accent-underline active).
   Disabled tabs (steps the user hasn't reached) read as muted and don't
   respond to hover. */
.newclient-tabs[b-h6rqkeq03r] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-5);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.newclient-tabs[b-h6rqkeq03r]::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.newclient-tab[b-h6rqkeq03r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    margin-bottom: -1px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.newclient-tab:hover:not(:disabled)[b-h6rqkeq03r] {
    color: var(--color-text);
}

.newclient-tab.active[b-h6rqkeq03r] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.newclient-tab:disabled[b-h6rqkeq03r] {
    cursor: not-allowed;
    color: var(--color-text-subtle);
    opacity: 0.65;
}

.orcanex-newclient-content[b-h6rqkeq03r] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px 32px;
}

.orcanex-newclient-container[b-h6rqkeq03r] {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.orcanex-newclient-container[b-h6rqkeq03r]  .orcanex-card {
    margin-bottom: 0;
}

.orcanex-newclient-footer[b-h6rqkeq03r] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
}
/* /Components/Pages/CRM/WorkflowEditor.razor.rz.scp.css */
/* Workflow editor — scoped styles for the per-(company, service type) sequence editor. */

/* ── Page chrome (Orcanex) ── */
.orcanex-workflow-page[b-bw66iy993l] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*min-height: 0;*/
}

.orcanex-workflow-content[b-bw66iy993l] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px 24px;
}

/* Mobile read-only mode — pointer-events killed on edit affordances so the
   user can browse the workflow safely without accidentally re-ordering a
   step on a touchscreen. The "Edit" / "Save" / drag handles still render
   (so the visual layout matches desktop) but they're inert. */
.orcanex-workflow-content-readonly button:not(.alert-link)[b-bw66iy993l],
.orcanex-workflow-content-readonly [draggable="true"][b-bw66iy993l],
.orcanex-workflow-content-readonly .form-control[b-bw66iy993l],
.orcanex-workflow-content-readonly .form-select[b-bw66iy993l],
.orcanex-workflow-content-readonly input[b-bw66iy993l],
.orcanex-workflow-content-readonly select[b-bw66iy993l],
.orcanex-workflow-content-readonly textarea[b-bw66iy993l] {
    pointer-events: none;
    opacity: 0.7;
}

.orcanex-workflow-mobile-banner[b-bw66iy993l] {
    padding: var(--space-3) var(--space-3) 0;
}

:root[data-viewport="mobile"] .orcanex-workflow-content[b-bw66iy993l],
:root[data-viewport="mobile-l"] .orcanex-workflow-content[b-bw66iy993l] {
    padding: var(--space-3);
}

.orcanex-workflow-card[b-bw66iy993l] {
    display: flex;
    flex-direction: column;
}

.orcanex-workflow-card-body[b-bw66iy993l] {
    padding: 16px;
}

.orcanex-workflow-card-footer[b-bw66iy993l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.orcanex-workflow-footer-msg[b-bw66iy993l] {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.orcanex-workflow-footer-actions[b-bw66iy993l] {
    display: flex;
    gap: 8px;
}

.orcanex-workflow-service[b-bw66iy993l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.orcanex-workflow-service-dot[b-bw66iy993l] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    display: inline-block;
}

.workflow-step-list[b-bw66iy993l] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.workflow-step[b-bw66iy993l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    margin-bottom: 0.4rem;
    background-color: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.workflow-step.bookend[b-bw66iy993l] {
    background-color: #f3f6f9;
    border-color: #d3dce5;
    /* Bookend rows are visually locked in view-mode and edit-mode (Phase 3b). */
}

.workflow-step .step-sequence[b-bw66iy993l] {
    font-weight: 600;
    color: #6c757d;
    min-width: 1.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.workflow-step .step-code[b-bw66iy993l] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    color: #6c757d;
    min-width: 3rem;
}

.workflow-step .step-name[b-bw66iy993l] {
    font-weight: 500;
    color: #1e2933;
    flex: 1 1 auto;
}

.workflow-step .step-flag[b-bw66iy993l] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background-color: #e0e8ee;
    color: #4a5b6a;
}

.workflow-step .step-flag.start[b-bw66iy993l] {
    background-color: #d1f0e0;
    color: #1d6c3e;
}

.workflow-step .step-flag.end[b-bw66iy993l] {
    background-color: #fce0d4;
    color: #9b3f1c;
}

.workflow-meta[b-bw66iy993l] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    color: #5f6c7b;
    font-size: 0.875rem;
}

.workflow-meta .meta-label[b-bw66iy993l] {
    color: #1e2933;
    font-weight: 500;
}

/* Phase 3b.1 — edit-mode layout */

.workflow-editor-grid[b-bw66iy993l] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .workflow-editor-grid[b-bw66iy993l] {
        grid-template-columns: 1fr;
    }
}

.workflow-pane[b-bw66iy993l] {
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: #fff;
}

.workflow-pane-header[b-bw66iy993l] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eef1f4;
    background-color: #f8fafc;
    font-weight: 600;
    color: #1e2933;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.workflow-pane-body[b-bw66iy993l] {
    padding: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.workflow-status-pick[b-bw66iy993l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #eef1f4;
    border-radius: 0.3rem;
    margin-bottom: 0.3rem;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.workflow-status-pick:hover:not(.disabled)[b-bw66iy993l] {
    background-color: #f3f6f9;
}

.workflow-status-pick.disabled[b-bw66iy993l] {
    opacity: 0.45;
    cursor: not-allowed;
}

.workflow-step-actions[b-bw66iy993l] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.workflow-step-actions .btn[b-bw66iy993l] {
    padding: 0.15rem 0.45rem;
    line-height: 1;
}

.workflow-step.dirty[b-bw66iy993l] {
    border-left: 3px solid #4a90a4;
}

.workflow-validation[b-bw66iy993l] {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.workflow-validation ul[b-bw66iy993l] {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

/* Phase 3b.2 — drag/drop visual cues */

.workflow-step[draggable="true"][b-bw66iy993l] {
    cursor: grab;
}

.workflow-step.dragging[b-bw66iy993l] {
    opacity: 0.45;
    cursor: grabbing;
    background-color: #eef5fb;
    border-color: #4a90a4;
}

.workflow-step[draggable="true"]:hover[b-bw66iy993l] {
    border-color: #b9c6d2;
}

/* Subtle hover during drag-over to telegraph valid drop target. The bookend
   rows still won't accept drops because the OnRowDrop handler short-circuits. */
.workflow-step:not(.bookend):hover[b-bw66iy993l] {
    background-color: #f7fafc;
}

/* The Bootstrap modal "show" class needs no extra rules — Bootstrap handles
   most styling. The only adjustment we want is a subtle preview-list inset. */
.modal-body .workflow-step-list[b-bw66iy993l] {
    margin-top: 0.5rem;
    padding: 0;
}

.modal-body .workflow-step-list .workflow-step[b-bw66iy993l] {
    margin-bottom: 0.25rem;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Error page — animated theme-aware backdrop, bare pulsing triangle hero,
   red title with the "wrong" snap-off animation, accent-tinted reference
   panel, and the action button.

   Background uses 4 layered radial gradients (danger + accent) that slowly
   drift and breathe so the page never feels static. The triangle has no
   surrounding box — just concentric pulse rings emanating from it. */

.orcanex-error[b-ndt551n0yo] {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
}

/* Animated theme-aware wash. Stronger than a static gradient — the layers
   slowly shift and rotate so the page has a subtle pulse of life. */
.orcanex-error[b-ndt551n0yo]::before {
    content: "";
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(circle at 18% 28%, var(--color-danger-soft) 0%, transparent 38%),
        radial-gradient(circle at 82% 22%, var(--color-accent-soft) 0%, transparent 42%),
        radial-gradient(circle at 50% 95%, var(--color-accent-ring) 0%, transparent 48%),
        radial-gradient(circle at 88% 78%, var(--color-danger-soft) 0%, transparent 36%);
    opacity: 0.95;
    pointer-events: none;
    animation: orcanex-error-bg-drift-b-ndt551n0yo 14s ease-in-out infinite alternate;
}

@keyframes orcanex-error-bg-drift-b-ndt551n0yo {
    from { transform: scale(1) rotate(0deg); }
    to   { transform: scale(1.08) rotate(2deg); }
}

.orcanex-error-card[b-ndt551n0yo] {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    text-align: center;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orcanex-error-brand[b-ndt551n0yo] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

/* Bare warning triangle. The IconBox glyph inherits color from this
   container. The :before / :after rings ripple outward continuously,
   centered on the triangle, with no surrounding box. */
.orcanex-error-icon[b-ndt551n0yo] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    color: var(--color-danger);
}

.orcanex-error-icon[b-ndt551n0yo]::before,
.orcanex-error-icon[b-ndt551n0yo]::after {
    content: "";
    position: absolute;
    width: 56px;
    height: 56px;
    top: 50%;
    left: 50%;
    border: 1.5px solid var(--color-danger);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: orcanex-error-pulse-b-ndt551n0yo 2.4s ease-out infinite;
}

.orcanex-error-icon[b-ndt551n0yo]::after {
    animation-delay: 1.2s;
}

@keyframes orcanex-error-pulse-b-ndt551n0yo {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20%  { opacity: 0.55; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* Title in danger red. The "wrong" word performs a one-shot snap-off
   animation on load — wobbles, tips, and falls off the line, leaving a
   light-grey ghost "wrong" in its place. */
.orcanex-error-title[b-ndt551n0yo] {
    margin: 0 0 var(--space-2);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--color-danger);
    line-height: 1.2;
}

.orcanex-error-wrong-wrap[b-ndt551n0yo] {
    position: relative;
    display: inline-block;
}

/* The ghost sits underneath in normal flow, always visible in light grey.
   The active layer covers it (in red) until its animation fades out. */
.orcanex-error-wrong-ghost[b-ndt551n0yo] {
    color: var(--color-text-subtle);
    font-weight: 700;
}

.orcanex-error-wrong-active[b-ndt551n0yo] {
    position: absolute;
    inset: 0;
    color: var(--color-danger);
    font-weight: 700;
    transform-origin: top left;
    animation: orcanex-error-wrong-fall-b-ndt551n0yo 1.6s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.9s forwards;
    will-change: transform, opacity;
}

@keyframes orcanex-error-wrong-fall-b-ndt551n0yo {
    0%   { transform: rotate(0deg)  translate(0, 0);    opacity: 1; }
    10%  { transform: rotate(-4deg) translate(0, 0);    opacity: 1; }
    25%  { transform: rotate(-14deg) translate(1px, 4px); opacity: 1; }
    45%  { transform: rotate(-22deg) translate(3px, 14px); opacity: 1; }
    100% { transform: rotate(60deg) translate(20px, 220px); opacity: 0; }
}

/* Reduce motion — keep the page static. The active "wrong" stays in place
   (red), and we hide the ghost so it doesn't double up. */
:root[data-reduce-motion="1"] .orcanex-error[b-ndt551n0yo]::before { animation: none; }
:root[data-reduce-motion="1"] .orcanex-error-icon[b-ndt551n0yo]::before,
:root[data-reduce-motion="1"] .orcanex-error-icon[b-ndt551n0yo]::after { animation: none; display: none; }
:root[data-reduce-motion="1"] .orcanex-error-wrong-active[b-ndt551n0yo] { animation: none; }
:root[data-reduce-motion="1"] .orcanex-error-wrong-ghost[b-ndt551n0yo] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    :root:not([data-reduce-motion="0"]) .orcanex-error[b-ndt551n0yo]::before { animation: none; }
    :root:not([data-reduce-motion="0"]) .orcanex-error-icon[b-ndt551n0yo]::before,
    :root:not([data-reduce-motion="0"]) .orcanex-error-icon[b-ndt551n0yo]::after { animation: none; display: none; }
    :root:not([data-reduce-motion="0"]) .orcanex-error-wrong-active[b-ndt551n0yo] { animation: none; }
    :root:not([data-reduce-motion="0"]) .orcanex-error-wrong-ghost[b-ndt551n0yo] { visibility: hidden; }
}

.orcanex-error-subtitle[b-ndt551n0yo] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 36ch;
}

/* Reference panel — accent-tinted so it follows the user's palette. */
.orcanex-error-reference[b-ndt551n0yo] {
    width: 100%;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-ring);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.orcanex-error-reference-label[b-ndt551n0yo] {
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: var(--space-2);
}

.orcanex-error-reference-code[b-ndt551n0yo] {
    font-family: var(--font-mono);
    font-size: 1.23rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-accent);
    background: var(--color-panel);
    border: 1px solid var(--color-accent-ring);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    display: inline-block;
    margin-bottom: var(--space-2);
    user-select: all;
}

.orcanex-error-reference-hint[b-ndt551n0yo] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.orcanex-error-action[b-ndt551n0yo] {
    width: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .orcanex-error-card[b-ndt551n0yo] {
        padding: var(--space-6) var(--space-5);
    }
    .orcanex-error-title[b-ndt551n0yo] {
        font-size: 1.54rem;
    }
}
/* /Components/Pages/LockScreen.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────
   Lock screen — Orcanex theme. Token-driven so it adapts to the user's
   chosen accent + light/dark mode automatically. The card centres itself
   over a soft accent backdrop; depth comes from layered radial gradients
   plus a pronounced modal shadow.

   Pattern mirrors PostLogin / MfaChallenge — flex column inside the card
   with align-items: center, so each block element (wordmark, avatar, name,
   helper, button, alt-link, meta) flows vertically with predictable spacing.
   ────────────────────────────────────────────────────────────────────── */

.orcanex-lock[b-a47x3vdjzs] {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--color-bg);
    padding: var(--space-6);
}

.orcanex-lock-blur[b-a47x3vdjzs] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 28%, var(--color-accent-soft) 0%, transparent 55%),
        radial-gradient(circle at 78% 72%, var(--color-accent-ring) 0%, transparent 50%),
        var(--color-bg);
    pointer-events: none;
}

.orcanex-lock-card[b-a47x3vdjzs] {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    color: var(--color-text);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Wordmark sits at the top; ::deep pierces into BrandWordmark's scope so we
   can adjust spacing without touching the shared component's CSS. */
[b-a47x3vdjzs] .orcanex-lock-brand {
    margin-bottom: var(--space-6);
}

.orcanex-lock-avatar[b-a47x3vdjzs] {
    position: relative;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
}

.orcanex-lock-avatar img[b-a47x3vdjzs] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.orcanex-lock-badge[b-a47x3vdjzs] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-warn);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-panel);
}

.orcanex-lock-name[b-a47x3vdjzs] {
    margin: 0 0 var(--space-1);
    font-size: 1.23rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.orcanex-lock-email[b-a47x3vdjzs] {
    margin: 0 0 var(--space-3);
    font-size: 0.92rem;
    color: var(--color-text-muted);
    word-break: break-all;
}

.orcanex-lock-helper[b-a47x3vdjzs] {
    margin: 0 0 var(--space-5);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    max-width: 30ch;
}

[b-a47x3vdjzs] .orcanex-lock-error {
    margin-bottom: var(--space-4);
    align-self: stretch;
    text-align: left;
}

.orcanex-lock-unlock[b-a47x3vdjzs] {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration-hover) var(--ease-hover),
                box-shadow var(--duration-hover) var(--ease-hover);
}

.orcanex-lock-unlock:hover[b-a47x3vdjzs],
.orcanex-lock-unlock:focus-visible[b-a47x3vdjzs] {
    background: var(--color-accent-hover);
    color: #fff;
    box-shadow: 0 0 0 3px var(--color-accent-ring);
    outline: none;
}

.orcanex-lock-alt[b-a47x3vdjzs] {
    margin-top: var(--space-3);
}

.orcanex-lock-alt-link[b-a47x3vdjzs] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.92rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-hover) var(--ease-hover);
}

.orcanex-lock-alt-link:hover[b-a47x3vdjzs],
.orcanex-lock-alt-link:focus-visible[b-a47x3vdjzs] {
    color: var(--color-text);
    outline: none;
}

.orcanex-lock-meta[b-a47x3vdjzs] {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

@media (max-width: 480px) {
    .orcanex-lock[b-a47x3vdjzs] { padding: var(--space-4); }
    .orcanex-lock-card[b-a47x3vdjzs] { padding: var(--space-6) var(--space-5); }
    /* Touch-target floor at mobile (≥ 44px); desktop keeps the 40px sizing. */
    .orcanex-lock-unlock[b-a47x3vdjzs] { height: var(--touch-target); }
    .orcanex-lock-alt-link[b-a47x3vdjzs] { min-height: var(--touch-target); padding: var(--space-1) var(--space-2); }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ============================================================================
   Login — "Tidal" landing
   Two-column grid (brand left, sign-in right) over a soft tidal gradient with
   drifting wave bands and a faint node-network canvas. Single viewport, no
   scroll. Below 1080px the left brand column drops and the sign-in card
   takes the full screen.
   ============================================================================ */

/* ─── Local design tokens ────────────────────────────────────────────────── */
.orcanex-login[b-jkmxsf3tu5] {
    --t-ink:           #0c2433;
    --t-paper:         #f3f7f8;
    --t-paper-2:       #e9f1f2;
    --t-teal:          #1b6f86;
    --t-teal-d:        #125163;
    --t-teal-bright:   #2a8a9e;
    --t-aqua:          #3fae9a;
    --t-green:         #4ea860;
    --t-blue:          #2f6fb0;
    --t-muted:         #52707c;
    --t-line:          rgba(18, 81, 99, 0.14);
    --t-card:          #ffffff;
}

/* ─── Stage ──────────────────────────────────────────────────────────────── */
.orcanex-login[b-jkmxsf3tu5] {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    overflow: hidden;
    background: var(--t-paper);
    color: var(--t-ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.orcanex-login-bg[b-jkmxsf3tu5] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(110% 70% at 8% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, #eef5f6 0%, #e3eff1 55%, #d8ebed 100%);
    pointer-events: none;
}

.orcanex-login-net[b-jkmxsf3tu5] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    pointer-events: none;
}

.orcanex-login-waves[b-jkmxsf3tu5] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.orcanex-login-wave[b-jkmxsf3tu5] {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
}
.orcanex-login-wave-1[b-jkmxsf3tu5] { opacity: 0.45; animation: orcanex-login-slide-b-jkmxsf3tu5 26s linear infinite; }
.orcanex-login-wave-2[b-jkmxsf3tu5] { opacity: 0.30; animation: orcanex-login-slide-b-jkmxsf3tu5 20s linear infinite reverse; }
.orcanex-login-wave-3[b-jkmxsf3tu5] { opacity: 0.22; animation: orcanex-login-slide-b-jkmxsf3tu5 34s linear infinite; }

@keyframes orcanex-login-slide-b-jkmxsf3tu5 {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─── Left column ────────────────────────────────────────────────────────── */
.orcanex-login-left[b-jkmxsf3tu5] {
    position: relative;
    z-index: 3;
    padding: clamp(34px, 5vh, 60px) clamp(40px, 4.4vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.orcanex-login-brandbar[b-jkmxsf3tu5] {
    display: flex;
    align-items: center;
    gap: 13px;
}
.orcanex-login-brandmark[b-jkmxsf3tu5] {
    width: 88px;
    height: 88px;
    object-fit: contain;
    animation: orcanex-login-bob-b-jkmxsf3tu5 5s ease-in-out infinite;
}
@keyframes orcanex-login-bob-b-jkmxsf3tu5 {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-5px) rotate(-3deg); }
}
.orcanex-login-brandname[b-jkmxsf3tu5] {
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.3em;
    font-size: 1.31rem;
    color: var(--t-teal-d);
}

/* HCB Group wordmark logo — replaces the old "HCB GROUP" text. The file is
   called Orca_logo.png in /assets/images/static/ for legacy reasons; it is
   the HCB Group corporate mark. Height is generous so the wordmark reads
   clearly alongside the bobbing 88px brandmark; width is auto so the
   logo's natural aspect ratio is preserved. No bob animation — the
   brandmark already bobs and a second moving element next to it would
   feel busy. */
.orcanex-login-brandlogo[b-jkmxsf3tu5] {
    height: 64px;
    width: auto;
    object-fit: contain;
    display: block;
}

.orcanex-login-hero[b-jkmxsf3tu5] {
    display: flex;
    flex-direction: column;
}

.orcanex-login-eyebrow[b-jkmxsf3tu5] {
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.92rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--t-teal-bright);
    margin-bottom: 14px;
}

/* The big tinted wordmark — gradient-clipped text */
.orcanex-login-wordmark[b-jkmxsf3tu5] {
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.025em;
    display: flex;
    gap: 0.01em;
}
.orcanex-login-wordmark-orca[b-jkmxsf3tu5]     { font-size: clamp(82px, 11.5vw, 158px); }
.orcanex-login-wordmark-examinex[b-jkmxsf3tu5] { font-size: clamp(54px, 7.2vw, 104px); letter-spacing: -0.035em; }

.orcanex-login-wordmark span[b-jkmxsf3tu5] {
    display: inline-block;
    background: linear-gradient(160deg, #1b6f86, #2a8a9e 55%, #3fae9a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Expansion line (ORCA only) */
.orcanex-login-expand[b-jkmxsf3tu5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
    margin-top: 18px;
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 1.5vw, 20px);
    color: var(--t-teal-d);
}
.orcanex-login-expand b[b-jkmxsf3tu5] {
    color: var(--t-aqua);
    font-weight: 700;
}

/* Strapline (Examinex only) */
.orcanex-login-strap[b-jkmxsf3tu5] {
    margin: 18px 0 0;
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 1.5vw, 20px);
    color: var(--t-teal-d);
}

.orcanex-login-lede[b-jkmxsf3tu5] {
    max-width: 520px;
    margin: 24px 0 0;
    font-size: 1.27rem;
    line-height: 1.66;
    color: var(--t-muted);
}
.orcanex-login-lede strong[b-jkmxsf3tu5] {
    color: var(--t-ink);
    font-weight: 600;
}

/* Stats row */
.orcanex-login-stats[b-jkmxsf3tu5] {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}
.orcanex-login-stat + .orcanex-login-stat[b-jkmxsf3tu5] {
    border-left: 1px solid var(--t-line);
    padding-left: 30px;
}
.orcanex-login-stat-n[b-jkmxsf3tu5] {
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.31rem;
    color: var(--t-teal);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.orcanex-login-stat-n small[b-jkmxsf3tu5] {
    font-size: 1.31rem;
    font-weight: 600;
}
.orcanex-login-stat-l[b-jkmxsf3tu5] {
    font-size: 0.96rem;
    color: var(--t-muted);
    margin-top: 6px;
    max-width: 140px;
    line-height: 1.35;
}

.orcanex-login-footnote[b-jkmxsf3tu5] {
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    color: rgba(82, 112, 124, 0.6);
}

/* ─── Right column ───────────────────────────────────────────────────────── */
.orcanex-login-right[b-jkmxsf3tu5] {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px;
    min-width: 0;
}

.orcanex-login-card[b-jkmxsf3tu5] {
    position: relative;
    width: 100%;
    max-width: 430px;
    border-radius: 24px;
    padding: 34px 32px 28px;
    background: var(--t-card);
    border: 1px solid var(--t-line);
    box-shadow:
        0 30px 70px -28px rgba(12, 81, 99, 0.4),
        0 2px 6px rgba(12, 81, 99, 0.06);
}

/* Region pill floats above the card, top-right */
.orcanex-login-country[b-jkmxsf3tu5] {
    position: absolute;
    top: -58px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--t-line);
    font-size: 1rem;
    color: var(--t-ink);
    cursor: default;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(12, 81, 99, 0.08);
    transition: box-shadow 0.2s;
}
.orcanex-login-country:hover[b-jkmxsf3tu5] {
    box-shadow: 0 6px 16px rgba(12, 81, 99, 0.14);
}
.orcanex-login-country-flag[b-jkmxsf3tu5] {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
}

.orcanex-login-kicker[b-jkmxsf3tu5] {
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.88rem;
    letter-spacing: 0.3em;
    color: var(--t-teal-bright);
    text-transform: uppercase;
}

.orcanex-login-title[b-jkmxsf3tu5] {
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.92rem;
    line-height: 1.18;
    margin: 10px 0 22px;
    letter-spacing: -0.01em;
    color: var(--t-ink);
}

/* ─── Sign-in options ────────────────────────────────────────────────────── */
.orcanex-login-opts[b-jkmxsf3tu5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orcanex-login-opt[b-jkmxsf3tu5] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 15px;
    background: #fbfdfd;
    border: 1px solid var(--t-line);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    color: inherit;
    font-family: inherit;
    transition:
        transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.26s,
        background 0.26s,
        box-shadow 0.26s;
}
.orcanex-login-opt[b-jkmxsf3tu5]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--c);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}
.orcanex-login-opt:hover[b-jkmxsf3tu5],
.orcanex-login-opt:focus-visible[b-jkmxsf3tu5] {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--c) 50%, transparent);
    background: color-mix(in oklab, var(--c) 7%, #fff);
    box-shadow: 0 16px 28px -18px color-mix(in oklab, var(--c) 65%, transparent);
    outline: none;
}
.orcanex-login-opt:hover[b-jkmxsf3tu5]::before,
.orcanex-login-opt:focus-visible[b-jkmxsf3tu5]::before {
    transform: scaleY(1);
}

.orcanex-login-opt-icon[b-jkmxsf3tu5] {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg,
        color-mix(in oklab, var(--c) 92%, white 6%),
        color-mix(in oklab, var(--c) 72%, black 14%));
    box-shadow: 0 8px 16px -8px color-mix(in oklab, var(--c) 60%, transparent);
    color: #fff;
    transition: transform 0.3s;
}
.orcanex-login-opt:hover .orcanex-login-opt-icon[b-jkmxsf3tu5],
.orcanex-login-opt:focus-visible .orcanex-login-opt-icon[b-jkmxsf3tu5] {
    transform: scale(1.06) rotate(-3deg);
}
.orcanex-login-opt-icon svg[b-jkmxsf3tu5] {
    width: 23px;
    height: 23px;
}

.orcanex-login-opt-text[b-jkmxsf3tu5] {
    flex: 1;
    min-width: 0;
    display: block;
}
.orcanex-login-opt-text h3[b-jkmxsf3tu5] {
    font-family: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.23rem;
    color: var(--t-ink);
    margin: 0 0 3px;
    line-height: 1.25;
}
.orcanex-login-opt-text p[b-jkmxsf3tu5] {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.42;
    color: var(--t-muted);
}

.orcanex-login-opt-arr[b-jkmxsf3tu5] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef5f6;
    color: var(--t-teal);
    transition: transform 0.3s, background 0.3s, color 0.3s;
}
.orcanex-login-opt-arr svg[b-jkmxsf3tu5] {
    width: 15px;
    height: 15px;
}
.orcanex-login-opt:hover .orcanex-login-opt-arr[b-jkmxsf3tu5],
.orcanex-login-opt:focus-visible .orcanex-login-opt-arr[b-jkmxsf3tu5] {
    transform: translateX(4px);
    background: var(--c);
    color: #fff;
}

/* Help row */
.orcanex-login-helprow[b-jkmxsf3tu5] {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.96rem;
    color: var(--t-muted);
    gap: 12px;
}
.orcanex-login-helprow a[b-jkmxsf3tu5] {
    color: var(--t-teal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.orcanex-login-helprow a:hover[b-jkmxsf3tu5] {
    border-color: var(--t-teal);
}

.orcanex-login-secure[b-jkmxsf3tu5] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.81rem;
    letter-spacing: 0.08em;
    color: rgba(82, 112, 124, 0.7);
}
.orcanex-login-secure svg[b-jkmxsf3tu5] {
    width: 13px;
    height: 13px;
    color: var(--t-green);
}

/* ─── Authorized — redirect spinner ──────────────────────────────────────── */
.orcanex-login-redirect[b-jkmxsf3tu5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 0;
    color: var(--t-muted);
    font-size: 1rem;
}
.orcanex-login-spinner[b-jkmxsf3tu5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--t-line);
    border-top-color: var(--t-teal);
    animation: orcanex-login-spin-b-jkmxsf3tu5 0.9s linear infinite;
}
@keyframes orcanex-login-spin-b-jkmxsf3tu5 {
    to { transform: rotate(360deg); }
}

/* ─── Entrance animations — gated on body.anim ───────────────────────────── */
@keyframes orcanex-login-rise-b-jkmxsf3tu5 {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes orcanex-login-fadein-b-jkmxsf3tu5 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Default — content visible, no animation */
.orcanex-login-wordmark span[b-jkmxsf3tu5],
.orcanex-login-expand span[b-jkmxsf3tu5],
.orcanex-login-strap[b-jkmxsf3tu5],
.orcanex-login-lede[b-jkmxsf3tu5],
.orcanex-login-stats[b-jkmxsf3tu5],
.orcanex-login-card[b-jkmxsf3tu5],
.orcanex-login-opt[b-jkmxsf3tu5] {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Engaged once <body> gets the .anim class on first rAF */
:global(body.anim) .orcanex-login-wordmark span[b-jkmxsf3tu5] {
    animation: orcanex-login-rise-b-jkmxsf3tu5 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
:global(body.anim) .orcanex-login-wordmark-orca span:nth-child(1)[b-jkmxsf3tu5] { animation-delay: 0.05s; }
:global(body.anim) .orcanex-login-wordmark-orca span:nth-child(2)[b-jkmxsf3tu5] { animation-delay: 0.14s; }
:global(body.anim) .orcanex-login-wordmark-orca span:nth-child(3)[b-jkmxsf3tu5] { animation-delay: 0.23s; }
:global(body.anim) .orcanex-login-wordmark-orca span:nth-child(4)[b-jkmxsf3tu5] { animation-delay: 0.32s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(1)[b-jkmxsf3tu5] { animation-delay: 0.05s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(2)[b-jkmxsf3tu5] { animation-delay: 0.10s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(3)[b-jkmxsf3tu5] { animation-delay: 0.15s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(4)[b-jkmxsf3tu5] { animation-delay: 0.20s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(5)[b-jkmxsf3tu5] { animation-delay: 0.25s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(6)[b-jkmxsf3tu5] { animation-delay: 0.30s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(7)[b-jkmxsf3tu5] { animation-delay: 0.35s; }
:global(body.anim) .orcanex-login-wordmark-examinex span:nth-child(8)[b-jkmxsf3tu5] { animation-delay: 0.40s; }

:global(body.anim) .orcanex-login-expand span[b-jkmxsf3tu5] {
    animation: orcanex-login-fadein-b-jkmxsf3tu5 0.6s ease both;
}
:global(body.anim) .orcanex-login-expand span:nth-child(1)[b-jkmxsf3tu5] { animation-delay: 0.50s; }
:global(body.anim) .orcanex-login-expand span:nth-child(2)[b-jkmxsf3tu5] { animation-delay: 0.62s; }
:global(body.anim) .orcanex-login-expand span:nth-child(3)[b-jkmxsf3tu5] { animation-delay: 0.74s; }
:global(body.anim) .orcanex-login-expand span:nth-child(4)[b-jkmxsf3tu5] { animation-delay: 0.86s; }

:global(body.anim) .orcanex-login-strap[b-jkmxsf3tu5] {
    animation: orcanex-login-fadein-b-jkmxsf3tu5 0.7s ease 0.6s both;
}
:global(body.anim) .orcanex-login-lede[b-jkmxsf3tu5] {
    animation: orcanex-login-fadein-b-jkmxsf3tu5 0.7s ease 0.95s both;
}
:global(body.anim) .orcanex-login-stats[b-jkmxsf3tu5] {
    animation: orcanex-login-fadein-b-jkmxsf3tu5 0.7s ease 1.1s both;
}
:global(body.anim) .orcanex-login-card[b-jkmxsf3tu5] {
    animation: orcanex-login-rise-b-jkmxsf3tu5 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
:global(body.anim) .orcanex-login-opt[b-jkmxsf3tu5] {
    animation: orcanex-login-rise-b-jkmxsf3tu5 0.55s ease both;
}
:global(body.anim) .orcanex-login-opt:nth-child(1)[b-jkmxsf3tu5] { animation-delay: 0.55s; }
:global(body.anim) .orcanex-login-opt:nth-child(2)[b-jkmxsf3tu5] { animation-delay: 0.67s; }
:global(body.anim) .orcanex-login-opt:nth-child(3)[b-jkmxsf3tu5] { animation-delay: 0.79s; }

/* ─── Responsive — drop left brand column below 1080px ───────────────────── */
@media (max-width: 1080px) {
    .orcanex-login[b-jkmxsf3tu5] {
        grid-template-columns: 1fr;
    }
    .orcanex-login-left[b-jkmxsf3tu5] {
        display: none;
    }
    .orcanex-login-right[b-jkmxsf3tu5] {
        padding: 24px;
    }
    .orcanex-login-country[b-jkmxsf3tu5] {
        top: -52px;
    }
}

@media (max-width: 575.98px) {
    .orcanex-login-right[b-jkmxsf3tu5] {
        padding: 18px 16px;
    }
    .orcanex-login-card[b-jkmxsf3tu5] {
        padding: 28px 22px 22px;
        border-radius: 20px;
    }
    .orcanex-login-title[b-jkmxsf3tu5] {
        font-size: 1.69rem;
    }
    .orcanex-login-country[b-jkmxsf3tu5] {
        position: static;
        margin: 0 0 18px;
        align-self: flex-end;
    }
}

/* ─── Reduced motion — kill all decorative motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .orcanex-login-brandmark[b-jkmxsf3tu5],
    .orcanex-login-wave[b-jkmxsf3tu5],
    .orcanex-login-wordmark span[b-jkmxsf3tu5],
    .orcanex-login-expand span[b-jkmxsf3tu5],
    .orcanex-login-strap[b-jkmxsf3tu5],
    .orcanex-login-lede[b-jkmxsf3tu5],
    .orcanex-login-stats[b-jkmxsf3tu5],
    .orcanex-login-card[b-jkmxsf3tu5],
    .orcanex-login-opt[b-jkmxsf3tu5],
    .orcanex-login-spinner[b-jkmxsf3tu5] {
        animation: none !important;
    }
}
/* /Components/Pages/Maintenance.razor.rz.scp.css */
.orcanex-maintenance[b-6q4vvlao2l] {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
    padding: var(--space-4);
    box-sizing: border-box;
}

.orcanex-maintenance[b-6q4vvlao2l]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, var(--color-warn-soft) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, var(--color-accent-soft) 0%, transparent 50%);
    pointer-events: none;
}

.orcanex-maintenance-card[b-6q4vvlao2l] {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    text-align: center;
    color: var(--color-text);
}

.orcanex-maintenance-icon[b-6q4vvlao2l] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-warn-soft);
    color: var(--color-warn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.orcanex-maintenance-title[b-6q4vvlao2l] {
    margin: 0 0 var(--space-2);
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.orcanex-maintenance-text[b-6q4vvlao2l] {
    margin: 0 0 var(--space-6);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.orcanex-maintenance-progress[b-6q4vvlao2l] {
    margin-bottom: var(--space-6);
}

.orcanex-maintenance-progress-track[b-6q4vvlao2l] {
    height: 4px;
    background: var(--color-border-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.orcanex-maintenance-progress-fill[b-6q4vvlao2l] {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    width: 0%;
    transition: width 1s linear;
}

.orcanex-maintenance-countdown[b-6q4vvlao2l] {
    margin-top: var(--space-2);
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-maintenance-countdown-num[b-6q4vvlao2l] {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    display: inline-block;
    font-weight: 600;
}

.orcanex-maintenance-retry[b-6q4vvlao2l] {
    margin-bottom: var(--space-5);
}

.orcanex-maintenance-support[b-6q4vvlao2l] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

@media (max-width: 480px) {
    .orcanex-maintenance-card[b-6q4vvlao2l] {
        padding: var(--space-6) var(--space-5);
        margin: var(--space-4);
    }
}
/* /Components/Pages/MasterData/Configuration/AppointmentOutcomes.razor.rz.scp.css */
/* AppointmentOutcomes styles - token-based row table */

.outcome-color-dot[b-kfgs3ipk8i] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.form-control-color[b-kfgs3ipk8i] {
    cursor: pointer;
}

.orcanex-mdtable[b-kfgs3ipk8i] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-kfgs3ipk8i],
.orcanex-mdtable-row[b-kfgs3ipk8i] {
    display: grid;
    grid-template-columns: 160px 1fr 280px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-kfgs3ipk8i] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-kfgs3ipk8i] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-kfgs3ipk8i] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-kfgs3ipk8i] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code[b-kfgs3ipk8i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-code .t-mono[b-kfgs3ipk8i] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-kfgs3ipk8i] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-flags[b-kfgs3ipk8i] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.orcanex-mdtable-cell-status[b-kfgs3ipk8i] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-kfgs3ipk8i] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-kfgs3ipk8i] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-kfgs3ipk8i] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-kfgs3ipk8i] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-kfgs3ipk8i]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-kfgs3ipk8i] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-kfgs3ipk8i] {
    color: var(--color-text);
}

.orcanex-table-meta[b-kfgs3ipk8i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-kfgs3ipk8i] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-kfgs3ipk8i] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-kfgs3ipk8i] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/AppointmentStatuses.razor.rz.scp.css */
/* AppointmentStatuses styles - token-based row table */

.form-control-color[b-fpuu2lhm4b] {
    width: 48px;
    padding: 0.25rem;
}

/* Bookend section in the edit modal */
.bookend-section[b-fpuu2lhm4b] {
    border-top: 1px solid var(--color-border-soft);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.bookend-section-header[b-fpuu2lhm4b] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bookend-section-hint[b-fpuu2lhm4b] {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin-bottom: var(--space-2);
}

.preview-section[b-fpuu2lhm4b] {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.status-chip[b-fpuu2lhm4b] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Row table */
.orcanex-mdtable[b-fpuu2lhm4b] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-fpuu2lhm4b],
.orcanex-mdtable-row[b-fpuu2lhm4b] {
    display: grid;
    grid-template-columns: 100px 1fr 110px 220px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-fpuu2lhm4b] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-fpuu2lhm4b] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-fpuu2lhm4b] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-fpuu2lhm4b] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-name[b-fpuu2lhm4b] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-fpuu2lhm4b] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-desc .t-mono[b-fpuu2lhm4b] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-flags[b-fpuu2lhm4b] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.orcanex-mdtable-cell-actions[b-fpuu2lhm4b] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

/* Search shell + table meta */
.orcanex-search-shell[b-fpuu2lhm4b] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-fpuu2lhm4b] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-fpuu2lhm4b] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-fpuu2lhm4b]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-fpuu2lhm4b] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-fpuu2lhm4b] {
    color: var(--color-text);
}

.orcanex-table-meta[b-fpuu2lhm4b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-fpuu2lhm4b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-fpuu2lhm4b] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-fpuu2lhm4b] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/AppointmentTypes.razor.rz.scp.css */
/* AppointmentTypes styles - token-based row table */

.orcanex-mdtable[b-m6hurwls21] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-m6hurwls21],
.orcanex-mdtable-row[b-m6hurwls21] {
    display: grid;
    grid-template-columns: 120px 1fr 320px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-m6hurwls21] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-m6hurwls21] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-m6hurwls21] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-m6hurwls21] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-m6hurwls21] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-m6hurwls21] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-flags[b-m6hurwls21] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-m6hurwls21] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.notification-settings-panel[b-m6hurwls21] {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.notification-settings-header[b-m6hurwls21] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: var(--space-2);
}

.orcanex-search-shell[b-m6hurwls21] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-m6hurwls21] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-m6hurwls21] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-m6hurwls21]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-m6hurwls21] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-m6hurwls21] {
    color: var(--color-text);
}

.orcanex-table-meta[b-m6hurwls21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-m6hurwls21] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-m6hurwls21] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-m6hurwls21] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/CancellationTypes.razor.rz.scp.css */
/* CancellationTypes styles - token-based row table */

.orcanex-mdtable[b-hvbdd9sk7f] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-hvbdd9sk7f],
.orcanex-mdtable-row[b-hvbdd9sk7f] {
    display: grid;
    grid-template-columns: 200px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-hvbdd9sk7f] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-hvbdd9sk7f] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-hvbdd9sk7f] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-hvbdd9sk7f] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-hvbdd9sk7f] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-desc[b-hvbdd9sk7f] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-status[b-hvbdd9sk7f] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-hvbdd9sk7f] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-hvbdd9sk7f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-hvbdd9sk7f] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-hvbdd9sk7f] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-hvbdd9sk7f]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-hvbdd9sk7f] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-hvbdd9sk7f] {
    color: var(--color-text);
}

.orcanex-table-meta[b-hvbdd9sk7f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-hvbdd9sk7f] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-hvbdd9sk7f] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-hvbdd9sk7f] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/CaseClosedStatuses.razor.rz.scp.css */
/* CaseClosedStatuses styles - token-based row table */

.status-color-chip[b-vapzq2mgdn] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.form-control-color[b-vapzq2mgdn] {
    width: 48px;
    padding: 0.25rem;
}

.orcanex-mdtable[b-vapzq2mgdn] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-vapzq2mgdn],
.orcanex-mdtable-row[b-vapzq2mgdn] {
    display: grid;
    grid-template-columns: 100px 1fr 140px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-vapzq2mgdn] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-vapzq2mgdn] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-vapzq2mgdn] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-vapzq2mgdn] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-vapzq2mgdn] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-vapzq2mgdn] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.orcanex-mdtable-cell-flags[b-vapzq2mgdn] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.orcanex-mdtable-cell-status[b-vapzq2mgdn] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-vapzq2mgdn] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-table-meta[b-vapzq2mgdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-vapzq2mgdn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-vapzq2mgdn] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-vapzq2mgdn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}

/* Mobile-stack list mode: collapse the table to a single column of stacked
   rows so the description, flags and status pills sit one below the other on
   a phone. Hide the desktop header row — the column labels stop making sense
   when the row is vertical. Reference: DOCS/Architecture/responsive-design.md. */
:root[data-viewport="mobile"] .orcanex-mdtable-head[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-head[b-vapzq2mgdn] {
    display: none;
}

:root[data-viewport="mobile"] .orcanex-mdtable-row[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-row[b-vapzq2mgdn] {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name   actions"
        "flags  flags"
        "status status";
    row-gap: 6px;
    padding: 10px 14px;
}

:root[data-viewport="mobile"] .orcanex-mdtable-cell-code[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-cell-code[b-vapzq2mgdn] {
    display: none;
}

:root[data-viewport="mobile"] .orcanex-mdtable-cell-name[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-cell-name[b-vapzq2mgdn] {
    grid-area: name;
    font-size: 0.92rem;
}

:root[data-viewport="mobile"] .orcanex-mdtable-cell-flags[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-cell-flags[b-vapzq2mgdn] {
    grid-area: flags;
}

:root[data-viewport="mobile"] .orcanex-mdtable-cell-flags:empty[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-cell-flags:empty[b-vapzq2mgdn] {
    display: none;
}

:root[data-viewport="mobile"] .orcanex-mdtable-cell-status[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-cell-status[b-vapzq2mgdn] {
    grid-area: status;
}

:root[data-viewport="mobile"] .orcanex-mdtable-cell-actions[b-vapzq2mgdn],
:root[data-viewport="mobile-l"] .orcanex-mdtable-cell-actions[b-vapzq2mgdn] {
    grid-area: actions;
    align-self: start;
}
/* /Components/Pages/MasterData/Configuration/ClaimantServiceTypes.razor.rz.scp.css */
/* ClaimantServiceTypes styles - token-based row table */

.status-color-chip[b-pa9vim0rev] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.preview-section[b-pa9vim0rev] {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.preview-label[b-pa9vim0rev] {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.form-control-color[b-pa9vim0rev] {
    width: 48px;
    padding: 0.25rem;
}

.orcanex-mdtable[b-pa9vim0rev] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-pa9vim0rev],
.orcanex-mdtable-row[b-pa9vim0rev] {
    display: grid;
    grid-template-columns: 140px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-pa9vim0rev] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-pa9vim0rev] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-pa9vim0rev] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-pa9vim0rev] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-pa9vim0rev] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-pa9vim0rev] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-pa9vim0rev] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-pa9vim0rev] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-pa9vim0rev] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-pa9vim0rev] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-pa9vim0rev] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-pa9vim0rev]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-pa9vim0rev] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-pa9vim0rev] {
    color: var(--color-text);
}

.orcanex-table-meta[b-pa9vim0rev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-pa9vim0rev] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-pa9vim0rev] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-pa9vim0rev] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/ConsentTerms.razor.rz.scp.css */
/* Consent Terms Master Data Page - token-based */

.consent-terms-preview h4[b-zfuqmhpem0],
.consent-terms-preview h5[b-zfuqmhpem0] {
    color: var(--color-text);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.consent-terms-preview h4:first-child[b-zfuqmhpem0],
.consent-terms-preview h5:first-child[b-zfuqmhpem0] {
    margin-top: 0;
}

.consent-terms-preview ul[b-zfuqmhpem0] {
    padding-left: 1.5rem;
}

.consent-terms-preview p:last-child[b-zfuqmhpem0] {
    margin-bottom: 0;
}

.row-active[b-zfuqmhpem0] {
    background-color: var(--color-success-soft);
}

.orcanex-table-meta[b-zfuqmhpem0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-zfuqmhpem0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-zfuqmhpem0] {
    padding: var(--space-4);
}
/* /Components/Pages/MasterData/Configuration/DisabilityTypes.razor.rz.scp.css */
/* DisabilityTypes styles - token-based row table */

.orcanex-mdtable[b-zxu2sfuvkz] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-zxu2sfuvkz],
.orcanex-mdtable-row[b-zxu2sfuvkz] {
    display: grid;
    grid-template-columns: 100px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-zxu2sfuvkz] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-zxu2sfuvkz] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-zxu2sfuvkz] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-zxu2sfuvkz] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-zxu2sfuvkz] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-zxu2sfuvkz] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-zxu2sfuvkz] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-zxu2sfuvkz] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-zxu2sfuvkz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-zxu2sfuvkz] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-zxu2sfuvkz] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-zxu2sfuvkz]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-zxu2sfuvkz] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-zxu2sfuvkz] {
    color: var(--color-text);
}

.orcanex-table-meta[b-zxu2sfuvkz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-zxu2sfuvkz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-zxu2sfuvkz] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-zxu2sfuvkz] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/DocumentTemplates.razor.rz.scp.css */
/* DocumentTemplates styles - token-based row table */

.orcanex-mdtable[b-f9h99ubqch] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-f9h99ubqch],
.orcanex-mdtable-row[b-f9h99ubqch] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 200px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-f9h99ubqch] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-f9h99ubqch] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-f9h99ubqch] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-f9h99ubqch] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-name[b-f9h99ubqch] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-f9h99ubqch] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-flags[b-f9h99ubqch] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.orcanex-mdtable-cell-status[b-f9h99ubqch] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-f9h99ubqch] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-f9h99ubqch] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-f9h99ubqch] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-f9h99ubqch] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-f9h99ubqch]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-f9h99ubqch] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-f9h99ubqch] {
    color: var(--color-text);
}

.orcanex-table-meta[b-f9h99ubqch] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-f9h99ubqch] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-f9h99ubqch] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-f9h99ubqch] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/DocumentTypes.razor.rz.scp.css */
/* DocumentTypes styles - token-based row table */

.orcanex-mdtable[b-u088gztmma] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-u088gztmma],
.orcanex-mdtable-row[b-u088gztmma] {
    display: grid;
    grid-template-columns: 200px 1fr 100px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-u088gztmma] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-u088gztmma] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-u088gztmma] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-u088gztmma] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-u088gztmma] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-u088gztmma] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-flags[b-u088gztmma] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.orcanex-mdtable-cell-status[b-u088gztmma] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-u088gztmma] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-u088gztmma] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-u088gztmma] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-u088gztmma] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-u088gztmma]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-u088gztmma] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-u088gztmma] {
    color: var(--color-text);
}

.orcanex-table-meta[b-u088gztmma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-u088gztmma] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-u088gztmma] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-u088gztmma] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/ErrorMessages.razor.rz.scp.css */
/* ErrorMessages master-data page — token-based row table.
   Mirrors the DisabilityTypes / other Configuration master-data pages in
   layout, with a five-column grid (SourceKey, Heading, ReferencePill,
   StatusPill, Actions) instead of the four-column shape used by simpler
   single-status master-data pages. */

.orcanex-mdtable[b-r5edm7yt4y] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-r5edm7yt4y],
.orcanex-mdtable-row[b-r5edm7yt4y] {
    display: grid;
    grid-template-columns: 180px 1fr 130px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-r5edm7yt4y] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-r5edm7yt4y] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-r5edm7yt4y] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-r5edm7yt4y] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-r5edm7yt4y] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-r5edm7yt4y] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-r5edm7yt4y] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-r5edm7yt4y] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-r5edm7yt4y] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 280px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-r5edm7yt4y] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-r5edm7yt4y] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-r5edm7yt4y]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-r5edm7yt4y] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-r5edm7yt4y] {
    color: var(--color-text);
}

.orcanex-table-meta[b-r5edm7yt4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-r5edm7yt4y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

/* Secondary table-meta line on the right side — the cache-TTL hint that
   tells admins how quickly their edits propagate. Replaces an inline
   `style="margin-left: var(--space-3); color: var(--color-text-muted);"`
   from before the .razor.css was introduced. */
.orcanex-em-cache-hint[b-r5edm7yt4y] {
    margin-left: var(--space-3);
    color: var(--color-text-muted);
}

.orcanex-card-body-padded[b-r5edm7yt4y] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-r5edm7yt4y] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/InjuryTypes.razor.rz.scp.css */
/* InjuryTypes styles - token-based row table */

.orcanex-mdtable[b-pyjz8umg1p] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-pyjz8umg1p],
.orcanex-mdtable-row[b-pyjz8umg1p] {
    display: grid;
    grid-template-columns: 200px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-pyjz8umg1p] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-pyjz8umg1p] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-pyjz8umg1p] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-pyjz8umg1p] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-pyjz8umg1p] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-pyjz8umg1p] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-pyjz8umg1p] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-pyjz8umg1p] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-pyjz8umg1p] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-pyjz8umg1p] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-pyjz8umg1p] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-pyjz8umg1p]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-pyjz8umg1p] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-pyjz8umg1p] {
    color: var(--color-text);
}

.orcanex-table-meta[b-pyjz8umg1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-pyjz8umg1p] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-pyjz8umg1p] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-pyjz8umg1p] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/ServiceProviders.razor.rz.scp.css */
/* ServiceProviders styles - token-based row table */

.orcanex-mdtable[b-0zhi4336fx] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-0zhi4336fx],
.orcanex-mdtable-row[b-0zhi4336fx] {
    display: grid;
    grid-template-columns: 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-0zhi4336fx] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-0zhi4336fx] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-0zhi4336fx] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-0zhi4336fx] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-name[b-0zhi4336fx] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-0zhi4336fx] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-0zhi4336fx] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-0zhi4336fx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-0zhi4336fx] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-0zhi4336fx] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-0zhi4336fx]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-0zhi4336fx] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-0zhi4336fx] {
    color: var(--color-text);
}

.orcanex-table-meta[b-0zhi4336fx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-0zhi4336fx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-0zhi4336fx] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-0zhi4336fx] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/ServiceTypes.razor.rz.scp.css */
/* ServiceTypes styles - token-based row table */

.status-color-chip[b-i3ogc8con5] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.preview-section[b-i3ogc8con5] {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.preview-label[b-i3ogc8con5] {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.form-control-color[b-i3ogc8con5] {
    width: 48px;
    padding: 0.25rem;
}

.orcanex-mdtable[b-i3ogc8con5] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-i3ogc8con5],
.orcanex-mdtable-row[b-i3ogc8con5] {
    display: grid;
    grid-template-columns: 130px 1fr 100px 220px 100px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-i3ogc8con5] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-i3ogc8con5] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-i3ogc8con5] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-i3ogc8con5] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-i3ogc8con5] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-i3ogc8con5] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-i3ogc8con5] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-flags[b-i3ogc8con5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.orcanex-mdtable-cell-status[b-i3ogc8con5] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-i3ogc8con5] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-i3ogc8con5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-i3ogc8con5] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-i3ogc8con5] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-i3ogc8con5]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-i3ogc8con5] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-i3ogc8con5] {
    color: var(--color-text);
}

.orcanex-table-meta[b-i3ogc8con5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-i3ogc8con5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-i3ogc8con5] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-i3ogc8con5] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/SpecialistDocumentTypes.razor.rz.scp.css */
/* SpecialistDocumentTypes styles - token-based row table */

.orcanex-mdtable[b-900ul3xes3] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-900ul3xes3],
.orcanex-mdtable-row[b-900ul3xes3] {
    display: grid;
    grid-template-columns: 160px 1fr 110px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-900ul3xes3] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-900ul3xes3] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-900ul3xes3] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-900ul3xes3] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-900ul3xes3] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-900ul3xes3] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-900ul3xes3] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-status[b-900ul3xes3] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-900ul3xes3] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-900ul3xes3] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-900ul3xes3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/Specialities.razor.rz.scp.css */
/* Specialities styles - token-based row table */

.orcanex-mdtable[b-u6y0gchm4s] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-u6y0gchm4s],
.orcanex-mdtable-row[b-u6y0gchm4s] {
    display: grid;
    grid-template-columns: 200px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-u6y0gchm4s] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-u6y0gchm4s] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-u6y0gchm4s] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-u6y0gchm4s] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-u6y0gchm4s] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-u6y0gchm4s] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-u6y0gchm4s] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-u6y0gchm4s] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-u6y0gchm4s] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-u6y0gchm4s] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-u6y0gchm4s] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-u6y0gchm4s]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-u6y0gchm4s] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-u6y0gchm4s] {
    color: var(--color-text);
}

.orcanex-table-meta[b-u6y0gchm4s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-u6y0gchm4s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-u6y0gchm4s] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-u6y0gchm4s] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/SystemContacts.razor.rz.scp.css */
/* SystemContacts styles - token-based row table */

.orcanex-mdtable[b-d16bfp9yvu] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-d16bfp9yvu],
.orcanex-mdtable-row[b-d16bfp9yvu] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 200px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-d16bfp9yvu] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-d16bfp9yvu] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-d16bfp9yvu] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-d16bfp9yvu] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-name[b-d16bfp9yvu] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-d16bfp9yvu] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-flags[b-d16bfp9yvu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.orcanex-mdtable-cell-status[b-d16bfp9yvu] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-d16bfp9yvu] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-d16bfp9yvu] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-d16bfp9yvu] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-d16bfp9yvu] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-d16bfp9yvu]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-d16bfp9yvu] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-d16bfp9yvu] {
    color: var(--color-text);
}

.orcanex-table-meta[b-d16bfp9yvu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-d16bfp9yvu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-d16bfp9yvu] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-d16bfp9yvu] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Configuration/WorkingHours.razor.rz.scp.css */
/* WorkingHours scoped styles */
/* /Components/Pages/MasterData/CRM/ClientTypes.razor.rz.scp.css */
/* ClientTypes master data styles — token-based row table */

.orcanex-mdtable[b-eg0yjgz7zh] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-eg0yjgz7zh],
.orcanex-mdtable-row[b-eg0yjgz7zh] {
    display: grid;
    grid-template-columns: 100px 1fr 140px 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-eg0yjgz7zh] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-eg0yjgz7zh] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-eg0yjgz7zh] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-eg0yjgz7zh] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-name[b-eg0yjgz7zh] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-eg0yjgz7zh] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-desc .t-mono[b-eg0yjgz7zh] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-status[b-eg0yjgz7zh] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-eg0yjgz7zh] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-eg0yjgz7zh] {
    padding: var(--space-4);
}

.orcanex-table-meta[b-eg0yjgz7zh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-eg0yjgz7zh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-modal-form-actions[b-eg0yjgz7zh] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}

.orcanex-search-shell[b-eg0yjgz7zh] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-eg0yjgz7zh] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-eg0yjgz7zh] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-eg0yjgz7zh]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-eg0yjgz7zh] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-eg0yjgz7zh] {
    color: var(--color-text);
}
/* /Components/Pages/MasterData/CRM/CrmAccountManagers.razor.rz.scp.css */
/* CrmAccountManagers styles — token-based row table */

.orcanex-mdtable[b-qmu2g9n7g0] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-qmu2g9n7g0],
.orcanex-mdtable-row[b-qmu2g9n7g0] {
    display: grid;
    grid-template-columns: 220px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-qmu2g9n7g0] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-qmu2g9n7g0] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-qmu2g9n7g0] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-qmu2g9n7g0] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-name[b-qmu2g9n7g0] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-qmu2g9n7g0] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-status[b-qmu2g9n7g0] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-qmu2g9n7g0] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-qmu2g9n7g0] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-qmu2g9n7g0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmClientStatuses.razor.rz.scp.css */
/* CrmClientStatuses styles — token-based row table */

.orcanex-mdtable[b-l8a8nhpgou] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-l8a8nhpgou],
.orcanex-mdtable-row[b-l8a8nhpgou] {
    display: grid;
    grid-template-columns: 140px 220px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-l8a8nhpgou] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-l8a8nhpgou] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-l8a8nhpgou] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-l8a8nhpgou] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-l8a8nhpgou] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-l8a8nhpgou] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-l8a8nhpgou] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-status[b-l8a8nhpgou] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-l8a8nhpgou] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-l8a8nhpgou] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-l8a8nhpgou] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmClientTypes.razor.rz.scp.css */
/* CrmClientTypes styles — token-based row table */

.orcanex-mdtable[b-osylesnt6j] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-osylesnt6j],
.orcanex-mdtable-row[b-osylesnt6j] {
    display: grid;
    grid-template-columns: 140px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-osylesnt6j] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-osylesnt6j] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-osylesnt6j] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-osylesnt6j] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-osylesnt6j] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-osylesnt6j] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-osylesnt6j] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-osylesnt6j] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-osylesnt6j] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-osylesnt6j] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmIndustryTypes.razor.rz.scp.css */
/* CrmIndustryTypes styles — token-based row table */

.orcanex-mdtable[b-166z5bcrda] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-166z5bcrda],
.orcanex-mdtable-row[b-166z5bcrda] {
    display: grid;
    grid-template-columns: 140px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-166z5bcrda] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-166z5bcrda] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-166z5bcrda] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-166z5bcrda] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-166z5bcrda] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-166z5bcrda] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-166z5bcrda] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-166z5bcrda] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-166z5bcrda] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-166z5bcrda] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmInvoiceFrequencies.razor.rz.scp.css */
/* CrmInvoiceFrequencies styles — token-based row table */

.orcanex-mdtable[b-93iwgm0cih] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-93iwgm0cih],
.orcanex-mdtable-row[b-93iwgm0cih] {
    display: grid;
    grid-template-columns: 140px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-93iwgm0cih] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-93iwgm0cih] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-93iwgm0cih] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-93iwgm0cih] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-93iwgm0cih] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-93iwgm0cih] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-93iwgm0cih] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-93iwgm0cih] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-93iwgm0cih] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-93iwgm0cih] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmReferralSources.razor.rz.scp.css */
/* CrmReferralSources styles — token-based row table */

.orcanex-mdtable[b-mggtl9d719] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-mggtl9d719],
.orcanex-mdtable-row[b-mggtl9d719] {
    display: grid;
    grid-template-columns: 100px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-mggtl9d719] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-mggtl9d719] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-mggtl9d719] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-mggtl9d719] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-mggtl9d719] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-mggtl9d719] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-mggtl9d719] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-mggtl9d719] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-mggtl9d719] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-mggtl9d719] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmReportTypes.razor.rz.scp.css */
/* CrmReportTypes styles — token-based row table */

.orcanex-mdtable[b-ztilpx65eu] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-ztilpx65eu],
.orcanex-mdtable-row[b-ztilpx65eu] {
    display: grid;
    grid-template-columns: 140px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-ztilpx65eu] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-ztilpx65eu] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-ztilpx65eu] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-ztilpx65eu] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-ztilpx65eu] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-ztilpx65eu] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-ztilpx65eu] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-ztilpx65eu] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-ztilpx65eu] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-ztilpx65eu] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/CRM/CrmSlas.razor.rz.scp.css */
/* CrmSlas styles — token-based row table */

.orcanex-mdtable[b-lisy971ci4] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-lisy971ci4],
.orcanex-mdtable-row[b-lisy971ci4] {
    display: grid;
    grid-template-columns: 140px 1fr 110px 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-lisy971ci4] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-lisy971ci4] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-lisy971ci4] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-lisy971ci4] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-lisy971ci4] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-lisy971ci4] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-status[b-lisy971ci4] {
    display: flex;
    align-items: center;
}

.orcanex-mdtable-cell-actions[b-lisy971ci4] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-card-body-padded[b-lisy971ci4] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-lisy971ci4] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Reporting/ReportingSchema.razor.rz.scp.css */
/* ReportingSchema styles - token-based row table */

.orcanex-mdtable[b-d1467e8j7z] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-d1467e8j7z],
.orcanex-mdtable-row[b-d1467e8j7z] {
    display: grid;
    grid-template-columns: 160px 160px 100px 200px 1fr 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-d1467e8j7z] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-d1467e8j7z] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-d1467e8j7z] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-d1467e8j7z] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-d1467e8j7z],
.orcanex-mdtable-cell-alias .t-mono[b-d1467e8j7z] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-d1467e8j7z] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-display[b-d1467e8j7z] {
    color: var(--color-text);
}

.orcanex-mdtable-cell-desc[b-d1467e8j7z] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-actions[b-d1467e8j7z] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-d1467e8j7z] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-d1467e8j7z] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-d1467e8j7z] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-d1467e8j7z]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-d1467e8j7z] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-d1467e8j7z] {
    color: var(--color-text);
}

.orcanex-table-meta[b-d1467e8j7z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-d1467e8j7z] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-d1467e8j7z] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-d1467e8j7z] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MasterData/Reporting/ReportingTables.razor.rz.scp.css */
/* ReportingTables styles - token-based row table */

.orcanex-mdtable[b-scp20l6eg9] {
    display: flex;
    flex-direction: column;
}

.orcanex-mdtable-head[b-scp20l6eg9],
.orcanex-mdtable-row[b-scp20l6eg9] {
    display: grid;
    grid-template-columns: 200px 220px 1fr 32px;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mdtable-head[b-scp20l6eg9] {
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-mdtable-row[b-scp20l6eg9] {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1rem;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mdtable-row:hover[b-scp20l6eg9] {
    background: var(--color-bg);
}

.orcanex-mdtable-row:last-child[b-scp20l6eg9] {
    border-bottom: 0;
}

.orcanex-mdtable-cell-code .t-mono[b-scp20l6eg9] {
    color: var(--color-text-muted);
}

.orcanex-mdtable-cell-name[b-scp20l6eg9] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-mdtable-cell-desc[b-scp20l6eg9] {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mdtable-cell-actions[b-scp20l6eg9] {
    color: var(--color-text-subtle);
    display: flex;
    justify-content: flex-end;
}

.orcanex-search-shell[b-scp20l6eg9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: var(--h-field, 32px);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.orcanex-search-icon[b-scp20l6eg9] {
    color: var(--color-text-subtle);
    display: inline-flex;
    margin-right: var(--space-2);
}

.orcanex-search-input[b-scp20l6eg9] {
    border: 0;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--color-text);
    font-size: 0.85rem;
}

.orcanex-search-input[b-scp20l6eg9]::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-search-clear[b-scp20l6eg9] {
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-search-clear:hover[b-scp20l6eg9] {
    color: var(--color-text);
}

.orcanex-table-meta[b-scp20l6eg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-table-meta-text[b-scp20l6eg9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.orcanex-card-body-padded[b-scp20l6eg9] {
    padding: var(--space-4);
}

.orcanex-modal-form-actions[b-scp20l6eg9] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
/* /Components/Pages/MyAccount.razor.rz.scp.css */
.orcanex-account[b-2lj2uuhqyx] {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mobile: tighter outer padding so cards have room to breathe at 375px. */
:root[data-viewport="mobile"]   .orcanex-account[b-2lj2uuhqyx],
:root[data-viewport="mobile-l"] .orcanex-account[b-2lj2uuhqyx] {
    padding: var(--space-3) var(--space-3) var(--space-6);
}

/* Sub-rail-style tabs */
.orcanex-account-tabs[b-2lj2uuhqyx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-self: flex-start;
}

.orcanex-account-tab[b-2lj2uuhqyx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: var(--h-button-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-account-tab:hover[b-2lj2uuhqyx] {
    color: var(--color-text);
    background: var(--color-bg);
}

.orcanex-account-tab-active[b-2lj2uuhqyx] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-account-tab-active:hover[b-2lj2uuhqyx] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* Mobile: 2-tab strip — within the ≤3 tab rule, keep the horizontal
   strip but bump heights to the touch-target floor and add scroll-snap
   so both tabs are equally easy to hit with a thumb. The wrapper is
   already small enough to fit a 375px row, so no overflow scroll is
   strictly required, but scroll-snap is harmless and helps if the user
   has a larger font-scale. */
:root[data-viewport="mobile"]   .orcanex-account-tabs[b-2lj2uuhqyx],
:root[data-viewport="mobile-l"] .orcanex-account-tabs[b-2lj2uuhqyx] {
    align-self: stretch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

:root[data-viewport="mobile"]   .orcanex-account-tabs[b-2lj2uuhqyx]::-webkit-scrollbar,
:root[data-viewport="mobile-l"] .orcanex-account-tabs[b-2lj2uuhqyx]::-webkit-scrollbar {
    display: none;
}

:root[data-viewport="mobile"]   .orcanex-account-tab[b-2lj2uuhqyx],
:root[data-viewport="mobile-l"] .orcanex-account-tab[b-2lj2uuhqyx] {
    height: var(--touch-target);
    min-height: var(--touch-target);
    flex: 1;
    justify-content: center;
    scroll-snap-align: start;
}

.orcanex-account-stack[b-2lj2uuhqyx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Identity row (avatar + actions on top, fields below) */
.orcanex-account-identity[b-2lj2uuhqyx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.orcanex-account-avatar-wrap[b-2lj2uuhqyx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.orcanex-account-avatar-img[b-2lj2uuhqyx] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.orcanex-account-avatar-actions[b-2lj2uuhqyx] {
    flex: 1;
    min-width: 0;
}

.orcanex-account-avatar-name[b-2lj2uuhqyx] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.orcanex-account-avatar-role[b-2lj2uuhqyx] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

.orcanex-account-avatar-buttons[b-2lj2uuhqyx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Two-column field grid */
.orcanex-account-grid[b-2lj2uuhqyx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .orcanex-account-grid[b-2lj2uuhqyx] {
        grid-template-columns: 1fr;
    }
}

.orcanex-account-readonly[b-2lj2uuhqyx] {
    font-size: 1rem;
    color: var(--color-text);
    padding: 0 var(--space-3);
    height: var(--h-field);
    display: flex;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

/* Footer (form mode) */
.orcanex-account-footer[b-2lj2uuhqyx] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}

/* Loading state */
.orcanex-account-loading[b-2lj2uuhqyx] {
    text-align: center;
    padding: var(--space-7) var(--space-5);
}

.orcanex-account-loading-spinner[b-2lj2uuhqyx] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: orcanex-account-spin-b-2lj2uuhqyx 0.9s linear infinite;
    margin: 0 auto var(--space-3);
}

.orcanex-account-loading-text[b-2lj2uuhqyx] {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

@keyframes orcanex-account-spin-b-2lj2uuhqyx {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Navigation/Cases.razor.rz.scp.css */
.orcanex-cases-page[b-6zf9pxgply] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Defeat the global `.orcanex-frame-content > *:last-child` rule in
   tokens.css that adds 76 px padding-bottom for mobile-tab clearance.
   The Cases page handles its own internal scroll inside
   `.orcanex-cases-rows`, so that bottom clearance ends up wasted dead
   space below the rows. The selector matches the global rule's
   specificity (root + frame-content + cases-page = 0,4,0) plus the
   automatic Blazor scope attribute on `.orcanex-cases-page`, giving
   us (0,5,0) — wins the cascade. The `::after` spacer in
   `mobile-bottom-tab-clearance.css` still gives the page enough
   bottom inset so the last visible row sits above the tab bar. */
:root[data-viewport="mobile"]   .orcanex-frame-content .orcanex-cases-page[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-frame-content .orcanex-cases-page[b-6zf9pxgply] {
    padding-bottom: 0 !important;
}

.orcanex-cases-content[b-6zf9pxgply] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 24px;
    gap: 12px;
    overflow: hidden;
}

/* Mobile: tight side-padding so case rows can be wider; segments and
   toolbar are hidden via .hide-mobile so the rows are the immediate
   content under the MobilePageHeader. */
:root[data-viewport="mobile"]   .orcanex-cases-content[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-content[b-6zf9pxgply] {
    padding: var(--space-2) var(--space-2) var(--space-3);
    gap: var(--space-2);
}


/* Status / pipeline segments — the rich data cards strip at the top of the
   page now uses the shared `.orcanex-segments` / `.orcanex-segment` primitive
   defined in `wwwroot/css/orcanex/tokens.css`. The legacy `.orcanex-cases-*`
   variants were removed when we adopted the icon-tile + percentage + mini-bar
   layout — see Specialists.razor for an identical pattern. */

/* ─── Toolbar (now embedded in the page-header Toolbar slot) ─── */
.orcanex-cases-chip-row[b-6zf9pxgply] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.orcanex-cases-search[b-6zf9pxgply] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 30px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 260px;
    max-width: 100%;
    color: var(--color-text-muted);
    transition: border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-cases-search:focus-within[b-6zf9pxgply] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-cases-search-input[b-6zf9pxgply] {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
}

.orcanex-cases-search-input[b-6zf9pxgply]::placeholder { color: var(--color-text-subtle); }

.orcanex-cases-search-clear[b-6zf9pxgply] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}
.orcanex-cases-search-clear:hover[b-6zf9pxgply] { color: var(--color-text); }

.orcanex-cases-divider[b-6zf9pxgply] {
    width: 1px;
    height: 20px;
    background: var(--color-border);
}

.orcanex-cases-chip[b-6zf9pxgply] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
}

.orcanex-cases-sort-label[b-6zf9pxgply] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-cases-sort-select[b-6zf9pxgply] {
    height: 28px;
    padding: 0 26px 0 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text);
    cursor: pointer;
}

.orcanex-cases-sort-dir[b-6zf9pxgply] {
    width: 28px;
    height: 28px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.orcanex-cases-sort-dir:hover[b-6zf9pxgply] { background: var(--color-bg); color: var(--color-text); }

.orcanex-cases-filter-card[b-6zf9pxgply] { flex-shrink: 0; }

/* Date range field — Bootstrap's `.input-group` defaults to flex-wrap: wrap, so when the
   filter column is narrow (col-md-4 in a viewport partially eaten by the IconRail) the two
   <input type="date"> children + "to" separator overflow and stack into THREE rows instead
   of one. `flex-wrap: nowrap` plus `min-width: 0` on the inputs lets them shrink to fit a
   single row regardless of column width. ::deep punches through the Field primitive's
   scoped CSS so the rule reaches the actual <input-group> in our DOM tree. */
[b-6zf9pxgply] .orcanex-cases-filter-card .input-group {
    flex-wrap: nowrap;
}
[b-6zf9pxgply] .orcanex-cases-filter-card .input-group .form-control {
    min-width: 0;
    flex: 1 1 0;
}
/* Compact the "to" separator chip a touch so it doesn't eat the date inputs' breathing room. */
[b-6zf9pxgply] .orcanex-cases-filter-card .input-group .input-group-text {
    padding: 0 8px;
    flex-shrink: 0;
}

/* ─── Rows ─── */
.orcanex-cases-rows[b-6zf9pxgply] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.orcanex-cases-row[b-6zf9pxgply] {
    padding: 12px 16px;
    display: grid;
    /* Column 2 (stage pill + appt date) widened from 130 → 180px so the
       longest workflow-status pill ("Case Management Consent", ~22 chars at
       chip font-size) fits without truncation. The two 1fr columns absorb
       the +50px; examinee name and client name still fit comfortably. */
    grid-template-columns: 110px 180px 1fr 1fr 220px 200px 24px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-cases-row:hover[b-6zf9pxgply] {
    background: var(--color-bg);
}

/* List mode: card (default) — each row is its own panel with rounded edges. */
.orcanex-cases-rows[data-list-mode="card"][b-6zf9pxgply] { gap: 8px; }
.orcanex-cases-rows[data-list-mode="card"] .orcanex-cases-row[b-6zf9pxgply] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* List mode: tabular — rows packed inside a single panel, divider lines only.
   overflow-x is hidden so the rounded corners clip the rows; overflow-y must
   stay `auto` so the inner virtual list scrolls. Using `overflow: hidden` here
   (the shorthand) blocks the y-axis scroll entirely. */
.orcanex-cases-rows[data-list-mode="tabular"][b-6zf9pxgply] {
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    overflow-y: auto;
}
.orcanex-cases-rows[data-list-mode="tabular"] .orcanex-cases-row[b-6zf9pxgply] {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.orcanex-cases-rows[data-list-mode="tabular"] .orcanex-cases-row:last-child[b-6zf9pxgply] {
    border-bottom: none;
}

/* ============================================================
   Mobile-stack — overrides BOTH card and tabular modes at mobile so the
   user doesn't see a 7-column grid trying to squeeze into 375 px. Each
   row becomes a self-contained mini-card with identity / stage / examinee
   / client stacked vertically. The SLA strip and team avatars are hidden
   to keep the row glanceable.
   Keep in sync with Cases.razor.cs ItemSize (which is viewport-aware so
   Virtualize allocates the right scroll space).
   ============================================================ */
:root[data-viewport="mobile"] .orcanex-cases-rows[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-rows[b-6zf9pxgply] {
    gap: var(--space-2);
    padding-right: 0;
}

:root[data-viewport="mobile"] .orcanex-cases-row[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row[b-6zf9pxgply] {
    /* Override the 7-column grid — three tight rows.
       Row heights are content-driven; no min-height, so cards sit at ~96px
       instead of the original 140px. RowItemSize in Cases.razor.cs must
       stay in sync with the actual rendered height — currently 104. */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "id        stage"
        "examinee  examinee"
        "client    chevron";
    column-gap: var(--space-2);
    row-gap: 4px;
    padding: 10px var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
}

:root[data-viewport="mobile"]   .orcanex-cases-row-id[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-id[b-6zf9pxgply]       { grid-area: id; align-self: start; }
:root[data-viewport="mobile"]   .orcanex-cases-row-stage[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-stage[b-6zf9pxgply]    { grid-area: stage; justify-self: end; align-self: start; }
:root[data-viewport="mobile"]   .orcanex-cases-row-examinee[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-examinee[b-6zf9pxgply] { grid-area: examinee; }
:root[data-viewport="mobile"]   .orcanex-cases-row-client[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-client[b-6zf9pxgply]   { grid-area: client; }
:root[data-viewport="mobile"]   .orcanex-cases-row-chevron[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-chevron[b-6zf9pxgply]  { grid-area: chevron; justify-self: end; align-self: center; }

/* Hide secondary detail at mobile — too dense to read on a phone. */
:root[data-viewport="mobile"]   .orcanex-cases-row-sla[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-sla[b-6zf9pxgply],
:root[data-viewport="mobile"]   .orcanex-cases-row-team[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-team[b-6zf9pxgply] {
    display: none;
}

/* The mobile row drops redundant labels — the visual layout makes the
   roles obvious without "Examinee" / "Client" sub-text. Keeps the row
   short and scannable. */
:root[data-viewport="mobile"]   .orcanex-cases-row-examinee-role[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-examinee-role[b-6zf9pxgply],
:root[data-viewport="mobile"]   .orcanex-cases-row-examinee-sep[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-examinee-sep[b-6zf9pxgply] {
    display: none;
}

/* Compress the case-id area: id and service stack tightly. */
:root[data-viewport="mobile"]   .orcanex-cases-row-id-num[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-id-num[b-6zf9pxgply] {
    font-size: 0.77rem;
    line-height: 1.2;
}
:root[data-viewport="mobile"]   .orcanex-cases-row-id-service[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-id-service[b-6zf9pxgply] {
    font-size: 0.72rem;
    margin-top: 1px;
    line-height: 1.2;
}

/* Examinee block: tighter line-height + smaller meta line. */
:root[data-viewport="mobile"]   .orcanex-cases-row-examinee-name[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-examinee-name[b-6zf9pxgply] {
    font-size: 0.96rem;
    line-height: 1.25;
}
:root[data-viewport="mobile"]   .orcanex-cases-row-examinee-meta[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-examinee-meta[b-6zf9pxgply] {
    font-size: 0.77rem;
    margin-top: 0;
    line-height: 1.25;
}

/* Stage cell — tighten the pill + appt line so the right column doesn't
   add extra height. */
:root[data-viewport="mobile"]   .orcanex-cases-row-stage > .orcanex-pill[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-stage > .orcanex-pill[b-6zf9pxgply] {
    margin-bottom: 0;
}
:root[data-viewport="mobile"]   .orcanex-cases-row-stage .orcanex-cases-row-appt[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-stage .orcanex-cases-row-appt[b-6zf9pxgply] {
    margin-top: 2px;
    text-align: right;
    font-size: 0.72rem;
    line-height: 1.2;
}

/* Client cell — drop the "Client" sub-label, shrink the avatar a touch,
   and inline the name flush with the avatar. */
:root[data-viewport="mobile"]   .orcanex-cases-row-client-meta[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-client-meta[b-6zf9pxgply] {
    display: none;
}
:root[data-viewport="mobile"]   .orcanex-cases-row-client-line[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-client-line[b-6zf9pxgply] {
    gap: 6px;
}
:root[data-viewport="mobile"]   .orcanex-cases-row-client-name[b-6zf9pxgply],
:root[data-viewport="mobile-l"] .orcanex-cases-row-client-name[b-6zf9pxgply] {
    font-size: 0.85rem;
    line-height: 1.2;
}

.orcanex-cases-row-id-num[b-6zf9pxgply] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* TEMP DEBUG — 1-based row number rendered before the case ID. Sized down so
   it reads as ancillary chrome rather than competing with the case ID. Remove
   along with the _debugRowNumbers block in Cases.razor when the visibility
   investigation is over. */
.orcanex-cases-row-num[b-6zf9pxgply] {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 5px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1.4;
}

.orcanex-cases-row-id-service[b-6zf9pxgply] {
    font-size: 0.77rem;
    color: var(--color-text-subtle);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-cases-row-stage > .orcanex-pill[b-6zf9pxgply] {
    margin-bottom: 4px;
}

.orcanex-cases-row-appt[b-6zf9pxgply] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.orcanex-cases-row-appt-val[b-6zf9pxgply] { color: var(--color-text); font-weight: 500; }
.orcanex-cases-row-appt-pending[b-6zf9pxgply] { color: var(--color-warn); font-weight: 500; }
.orcanex-cases-row-appt-not-set[b-6zf9pxgply] { color: var(--color-text-subtle); }
.orcanex-cases-row-appt .is-past[b-6zf9pxgply] { color: var(--color-danger); }

.orcanex-cases-row-examinee-name[b-6zf9pxgply] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-cases-row-examinee-meta[b-6zf9pxgply] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.orcanex-cases-mychoice[b-6zf9pxgply] { color: #E5B83D; }

.orcanex-cases-row-client-line[b-6zf9pxgply] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.orcanex-cases-row-client-name[b-6zf9pxgply] {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.orcanex-cases-row-client-meta[b-6zf9pxgply] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    margin-left: 30px;
}

.orcanex-cases-row-muted[b-6zf9pxgply] { color: var(--color-text-subtle); font-size: 0.92rem; }

.orcanex-cases-row-sla-head[b-6zf9pxgply] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}

.orcanex-cases-row-sla-label[b-6zf9pxgply] {
    font-size: 0.85rem;
    font-weight: 600;
}

.orcanex-cases-row-sla-label.sla-tone-success[b-6zf9pxgply] { color: var(--color-success); }
.orcanex-cases-row-sla-label.sla-tone-warn[b-6zf9pxgply]    { color: var(--color-warn); }
.orcanex-cases-row-sla-label.sla-tone-danger[b-6zf9pxgply]  { color: var(--color-danger); }
.orcanex-cases-row-sla-label.sla-tone-neutral[b-6zf9pxgply] { color: var(--color-text-muted); }

.orcanex-cases-row-sla-next[b-6zf9pxgply] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-cases-row-team[b-6zf9pxgply] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.orcanex-cases-row-team-stack[b-6zf9pxgply] {
    display: inline-flex;
    align-items: center;
}

.orcanex-cases-row-team-stack[b-6zf9pxgply]  .orcanex-avatar {
    border: 2px solid var(--color-panel);
}

.orcanex-cases-row-team-stack[b-6zf9pxgply]  .orcanex-avatar:not(:first-child) {
    margin-left: -8px;
}

.orcanex-cases-row-team-name[b-6zf9pxgply] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.orcanex-cases-row-team-extra[b-6zf9pxgply] { color: var(--color-text-muted); font-weight: 400; }

.orcanex-cases-row-chevron[b-6zf9pxgply] {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Pages/Navigation/Dashboard.razor.rz.scp.css */
.orcanex-dashboard[b-obqysgromu] {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    /*min-height: 0;*/
}
/* /Components/Pages/Navigation/Dashboards/AdminDashboard.razor.rz.scp.css */
/* Admin Dashboard — Orcanex layout */

.admin-dashboard[b-jqv1sgpvqn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── KPI strip ─── */
.admin-kpi-strip[b-jqv1sgpvqn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .admin-kpi-strip[b-jqv1sgpvqn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .admin-kpi-strip[b-jqv1sgpvqn] {
        grid-template-columns: 1fr;
    }
}

/* ─── 2/3 + 1/3 grid ─── */
.admin-grid-2-1[b-jqv1sgpvqn] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 992px) {
    .admin-grid-2-1[b-jqv1sgpvqn] {
        grid-template-columns: 1fr;
    }
}

.admin-rail[b-jqv1sgpvqn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Card heads (re-used across cards) ─── */
.admin-card-list[b-jqv1sgpvqn] {
    overflow: hidden;
}

.admin-card-head[b-jqv1sgpvqn] {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    gap: 8px;
}

.admin-card-head-text[b-jqv1sgpvqn] {
    flex: 1;
    min-width: 0;
}

.admin-card-head-text .t-h3[b-jqv1sgpvqn] {
    margin: 0;
}

.admin-card-head-sub[b-jqv1sgpvqn] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ─── Focus / worklist rows ─── */
.admin-focus-list[b-jqv1sgpvqn],
.admin-cases-list[b-jqv1sgpvqn] {
    display: flex;
    flex-direction: column;
}

.admin-focus-row[b-jqv1sgpvqn] {
    display: grid;
    grid-template-columns: 90px 1fr 140px 16px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.admin-focus-row:last-child[b-jqv1sgpvqn] {
    border-bottom: none;
}

.admin-focus-row:hover[b-jqv1sgpvqn] {
    background: var(--color-bg);
}

.admin-focus-row-id[b-jqv1sgpvqn] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.admin-focus-row-body[b-jqv1sgpvqn] {
    min-width: 0;
}

.admin-focus-row-title[b-jqv1sgpvqn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-focus-row-sub[b-jqv1sgpvqn] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-focus-row-sla[b-jqv1sgpvqn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.admin-focus-row-action[b-jqv1sgpvqn] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.admin-focus-row-chev[b-jqv1sgpvqn] {
    color: var(--color-text-subtle);
}

/* ─── Mobile reflow: focus row stacks ─── */
@media (max-width: 768px) {
    .admin-focus-row[b-jqv1sgpvqn] {
        grid-template-columns: 1fr 16px;
        grid-template-areas:
            "id chev"
            "body chev"
            "sla chev";
        gap: 6px;
        padding: 12px 14px;
    }

    .admin-focus-row-id[b-jqv1sgpvqn] { grid-area: id; }
    .admin-focus-row-body[b-jqv1sgpvqn] { grid-area: body; }
    .admin-focus-row-sla[b-jqv1sgpvqn] { grid-area: sla; flex-direction: row; align-items: center; gap: 8px; }
    .admin-focus-row-chev[b-jqv1sgpvqn] { grid-area: chev; align-self: center; }

    .admin-focus-row-title[b-jqv1sgpvqn] { white-space: normal; }
}

/* ─── Stage capacity bars ─── */
.admin-stage-list[b-jqv1sgpvqn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.admin-stage-row[b-jqv1sgpvqn] {
    display: grid;
    grid-template-columns: 90px 1fr 32px;
    align-items: center;
    gap: 10px;
}

.admin-stage-label[b-jqv1sgpvqn] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stage-track[b-jqv1sgpvqn] {
    height: 6px;
    background: var(--color-border-soft);
    border-radius: 3px;
    overflow: hidden;
}

.admin-stage-fill[b-jqv1sgpvqn] {
    height: 100%;
    border-radius: 3px;
    transition: width 200ms ease-out;
}

.admin-stage-count[b-jqv1sgpvqn] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ─── Agenda rows ─── */
.admin-agenda-list[b-jqv1sgpvqn] {
    display: flex;
    flex-direction: column;
}

.admin-agenda-row[b-jqv1sgpvqn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.admin-agenda-row:last-child[b-jqv1sgpvqn] {
    border-bottom: none;
}

.admin-agenda-row:hover[b-jqv1sgpvqn] {
    background: var(--color-bg);
}

.admin-agenda-time[b-jqv1sgpvqn] {
    width: 56px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.admin-agenda-time-main[b-jqv1sgpvqn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.admin-agenda-time-sub[b-jqv1sgpvqn] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
}

.admin-agenda-bar[b-jqv1sgpvqn] {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--color-accent);
}

.admin-agenda-bar.is-today[b-jqv1sgpvqn] {
    background: var(--color-danger);
}

.admin-agenda-body[b-jqv1sgpvqn] {
    flex: 1;
    min-width: 0;
}

.admin-agenda-title[b-jqv1sgpvqn] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-agenda-sub[b-jqv1sgpvqn] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Recent cases worklist ─── */
.admin-case-row[b-jqv1sgpvqn] {
    display: grid;
    grid-template-columns: 110px 1.4fr 140px 1fr 120px 16px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.admin-case-row:last-child[b-jqv1sgpvqn] {
    border-bottom: none;
}

.admin-case-row:hover[b-jqv1sgpvqn] {
    background: var(--color-bg);
}

.admin-case-row-id[b-jqv1sgpvqn] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.admin-case-row-examinee[b-jqv1sgpvqn] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-case-row-name[b-jqv1sgpvqn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-case-row-owner[b-jqv1sgpvqn] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-case-row-date[b-jqv1sgpvqn] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.admin-case-row-chev[b-jqv1sgpvqn] {
    color: var(--color-text-subtle);
}

@media (max-width: 768px) {
    .admin-case-row[b-jqv1sgpvqn] {
        grid-template-columns: 1fr 16px;
        grid-template-areas:
            "id chev"
            "examinee chev"
            "status chev"
            "owner chev";
        gap: 6px;
        padding: 12px 14px;
    }

    .admin-case-row-id[b-jqv1sgpvqn] { grid-area: id; }
    .admin-case-row-examinee[b-jqv1sgpvqn] { grid-area: examinee; }
    .admin-case-row-status[b-jqv1sgpvqn] { grid-area: status; }
    .admin-case-row-owner[b-jqv1sgpvqn] { grid-area: owner; font-size: 0.85rem; }
    .admin-case-row-date[b-jqv1sgpvqn] { display: none; }
    .admin-case-row-chev[b-jqv1sgpvqn] { grid-area: chev; align-self: center; }
}

/* ─── Stage rows: tighten label column on mobile ─── */
@media (max-width: 768px) {
    .admin-stage-row[b-jqv1sgpvqn] {
        grid-template-columns: 80px 1fr 28px;
        gap: 8px;
    }

    .admin-stage-list[b-jqv1sgpvqn] {
        padding: 12px 14px;
    }

    .admin-agenda-row[b-jqv1sgpvqn] {
        padding: 10px 14px;
    }

    .admin-agenda-time[b-jqv1sgpvqn] {
        width: 50px;
    }
}
/* /Components/Pages/Navigation/Dashboards/ClientDashboard.razor.rz.scp.css */
/* Client Dashboard — Orcanex layout */

.client-dashboard[b-i8c6vrvzlr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.client-banner-reason[b-i8c6vrvzlr] {
    margin-top: 8px;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* ─── Welcome strip ─── */
.client-welcome[b-i8c6vrvzlr] {
    padding: 14px 16px;
}

.client-welcome-row[b-i8c6vrvzlr] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.client-welcome-text[b-i8c6vrvzlr] {
    flex: 1;
    min-width: 0;
}

.client-welcome-greeting[b-i8c6vrvzlr] {
    font-size: 1.23rem;
    font-weight: 600;
    color: var(--color-text);
}

.client-welcome-context[b-i8c6vrvzlr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.client-welcome-meta[b-i8c6vrvzlr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    max-width: 360px;
}

/* ─── KPI strip ─── */
.client-kpi-strip[b-i8c6vrvzlr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .client-kpi-strip[b-i8c6vrvzlr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .client-kpi-strip[b-i8c6vrvzlr] {
        grid-template-columns: 1fr;
    }
}

/* ─── 2/3 + 1/3 grid ─── */
.client-grid-2-1[b-i8c6vrvzlr] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 992px) {
    .client-grid-2-1[b-i8c6vrvzlr] {
        grid-template-columns: 1fr;
    }
}

/* ─── Card heads ─── */
.client-card-list[b-i8c6vrvzlr] {
    overflow: hidden;
}

.client-card-head[b-i8c6vrvzlr] {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    gap: 8px;
}

.client-card-head-text[b-i8c6vrvzlr] {
    flex: 1;
    min-width: 0;
}

.client-card-head-text .t-h3[b-i8c6vrvzlr] {
    margin: 0;
}

.client-card-head-sub[b-i8c6vrvzlr] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ─── Stage / age bars ─── */
.client-stage-list[b-i8c6vrvzlr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.client-stage-row[b-i8c6vrvzlr] {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    align-items: center;
    gap: 12px;
}

.client-stage-label[b-i8c6vrvzlr] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-stage-track[b-i8c6vrvzlr] {
    height: 6px;
    background: var(--color-border-soft);
    border-radius: 3px;
    overflow: hidden;
}

.client-stage-fill[b-i8c6vrvzlr] {
    height: 100%;
    border-radius: 3px;
    transition: width 200ms ease-out;
}

.client-stage-count[b-i8c6vrvzlr] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

/* ─── Document list ─── */
.client-doc-list[b-i8c6vrvzlr] {
    display: flex;
    flex-direction: column;
}

.client-doc-row[b-i8c6vrvzlr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.client-doc-row:last-child[b-i8c6vrvzlr] {
    border-bottom: none;
}

.client-doc-row:hover[b-i8c6vrvzlr] {
    background: var(--color-bg);
}

.client-doc-icon[b-i8c6vrvzlr] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.client-doc-body[b-i8c6vrvzlr] {
    flex: 1;
    min-width: 0;
}

.client-doc-name[b-i8c6vrvzlr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-doc-meta[b-i8c6vrvzlr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.client-doc-meta-sep[b-i8c6vrvzlr] {
    color: var(--color-text-subtle);
}

.client-doc-chev[b-i8c6vrvzlr] {
    color: var(--color-text-subtle);
}

/* ─── Recent cases worklist ─── */
.client-cases-list[b-i8c6vrvzlr] {
    display: flex;
    flex-direction: column;
}

.client-case-row[b-i8c6vrvzlr] {
    display: grid;
    grid-template-columns: 110px 1.4fr 140px 1fr 120px 16px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.client-case-row:last-child[b-i8c6vrvzlr] {
    border-bottom: none;
}

.client-case-row:hover[b-i8c6vrvzlr] {
    background: var(--color-bg);
}

.client-case-row-id[b-i8c6vrvzlr] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.client-case-row-examinee[b-i8c6vrvzlr] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.client-case-row-name[b-i8c6vrvzlr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-case-row-owner[b-i8c6vrvzlr] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-case-row-date[b-i8c6vrvzlr] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.client-case-row-chev[b-i8c6vrvzlr] {
    color: var(--color-text-subtle);
}

@media (max-width: 768px) {
    .client-case-row[b-i8c6vrvzlr] {
        grid-template-columns: 1fr 16px;
        grid-template-areas:
            "id chev"
            "examinee chev"
            "status chev"
            "owner chev";
        gap: 6px;
        padding: 12px 14px;
    }

    .client-case-row-id[b-i8c6vrvzlr] { grid-area: id; }
    .client-case-row-examinee[b-i8c6vrvzlr] { grid-area: examinee; }
    .client-case-row-status[b-i8c6vrvzlr] { grid-area: status; }
    .client-case-row-owner[b-i8c6vrvzlr] { grid-area: owner; font-size: 0.85rem; }
    .client-case-row-date[b-i8c6vrvzlr] { display: none; }
    .client-case-row-chev[b-i8c6vrvzlr] { grid-area: chev; align-self: center; }

    .client-stage-row[b-i8c6vrvzlr] {
        grid-template-columns: 90px 1fr 30px;
        gap: 8px;
    }

    .client-stage-list[b-i8c6vrvzlr] {
        padding: 12px 14px;
    }

    .client-welcome[b-i8c6vrvzlr] {
        padding: 12px 14px;
    }

    .client-welcome-greeting[b-i8c6vrvzlr] {
        font-size: 1.08rem;
    }
}
/* /Components/Pages/Navigation/Dashboards/SpecialistDashboard.razor.rz.scp.css */
/* Specialist Dashboard — Orcanex layout */

.specialist-dashboard[b-wkv4mh57zm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── KPI strip ─── */
.specialist-kpi-strip[b-wkv4mh57zm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .specialist-kpi-strip[b-wkv4mh57zm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .specialist-kpi-strip[b-wkv4mh57zm] {
        grid-template-columns: 1fr;
    }
}

/* ─── Cards ─── */
.specialist-card-list[b-wkv4mh57zm] {
    overflow: hidden;
}

.specialist-card-head[b-wkv4mh57zm] {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    gap: 8px;
}

.specialist-card-head-today[b-wkv4mh57zm] {
    background: var(--color-accent-soft);
}

.specialist-card-head-text[b-wkv4mh57zm] {
    flex: 1;
    min-width: 0;
}

.specialist-card-head-text .t-h3[b-wkv4mh57zm] {
    margin: 0;
}

.specialist-card-head-sub[b-wkv4mh57zm] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ─── Today's schedule ─── */
.specialist-today-list[b-wkv4mh57zm] {
    display: flex;
    flex-direction: column;
}

.specialist-today-row[b-wkv4mh57zm] {
    display: grid;
    grid-template-columns: 64px 4px 32px 1fr auto 16px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.specialist-today-row:last-child[b-wkv4mh57zm] {
    border-bottom: none;
}

.specialist-today-row:hover[b-wkv4mh57zm] {
    background: var(--color-bg);
}

.specialist-today-time[b-wkv4mh57zm] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
}

.specialist-today-bar[b-wkv4mh57zm] {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    background: var(--color-accent);
}

.specialist-today-body[b-wkv4mh57zm] {
    min-width: 0;
}

.specialist-today-name[b-wkv4mh57zm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.specialist-today-meta[b-wkv4mh57zm] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.specialist-today-meta-sep[b-wkv4mh57zm] {
    color: var(--color-text-subtle);
}

.specialist-today-chev[b-wkv4mh57zm] {
    color: var(--color-text-subtle);
}

/* ─── 2-col grid ─── */
.specialist-grid-2[b-wkv4mh57zm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 992px) {
    .specialist-grid-2[b-wkv4mh57zm] {
        grid-template-columns: 1fr;
    }
}

/* ─── Appointment list ─── */
.specialist-appt-list[b-wkv4mh57zm] {
    display: flex;
    flex-direction: column;
}

.specialist-appt-row[b-wkv4mh57zm] {
    display: grid;
    grid-template-columns: 50px 1fr auto 16px;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.specialist-appt-row:last-child[b-wkv4mh57zm] {
    border-bottom: none;
}

.specialist-appt-row:hover[b-wkv4mh57zm] {
    background: var(--color-bg);
}

.specialist-appt-date[b-wkv4mh57zm] {
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px 0;
}

.specialist-appt-day[b-wkv4mh57zm] {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.specialist-appt-month[b-wkv4mh57zm] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 500;
}

.specialist-appt-body[b-wkv4mh57zm] {
    min-width: 0;
}

.specialist-appt-name[b-wkv4mh57zm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    flex-wrap: wrap;
}

.specialist-appt-meta[b-wkv4mh57zm] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.specialist-appt-meta-sep[b-wkv4mh57zm] {
    color: var(--color-text-subtle);
}

.specialist-appt-ref[b-wkv4mh57zm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.specialist-appt-chev[b-wkv4mh57zm] {
    color: var(--color-text-subtle);
}

/* ─── Tasks list ─── */
.specialist-task-list[b-wkv4mh57zm] {
    display: flex;
    flex-direction: column;
}

.specialist-task-row[b-wkv4mh57zm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-soft);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.specialist-task-row:last-child[b-wkv4mh57zm] {
    border-bottom: none;
}

.specialist-task-row:hover[b-wkv4mh57zm] {
    background: var(--color-bg);
}

.specialist-task-row.is-overdue[b-wkv4mh57zm] {
    border-left: 3px solid var(--color-danger);
}

.specialist-task-body[b-wkv4mh57zm] {
    flex: 1;
    min-width: 0;
}

.specialist-task-title[b-wkv4mh57zm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.specialist-task-meta[b-wkv4mh57zm] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.specialist-task-meta-sep[b-wkv4mh57zm] {
    color: var(--color-text-subtle);
}

.specialist-task-overdue-text[b-wkv4mh57zm] {
    color: var(--color-danger);
    font-weight: 600;
}

/* ─── Mini stats ─── */
.specialist-mini-strip[b-wkv4mh57zm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .specialist-mini-strip[b-wkv4mh57zm] {
        grid-template-columns: 1fr;
    }
}

.specialist-mini-stat[b-wkv4mh57zm] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.specialist-mini-label[b-wkv4mh57zm] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.specialist-mini-value[b-wkv4mh57zm] {
    font-size: 1.23rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ─── Mobile reflows ─── */
@media (max-width: 768px) {
    /* Today's schedule row: stack body below avatar/time strip */
    .specialist-today-row[b-wkv4mh57zm] {
        grid-template-columns: 56px 4px 32px 1fr 16px;
        grid-template-areas:
            "time bar avatar body chev"
            ".    .   .      type type";
        gap: 10px;
        padding: 12px 14px;
        align-items: center;
    }

    .specialist-today-time[b-wkv4mh57zm] { grid-area: time; font-size: 1rem; }
    .specialist-today-bar[b-wkv4mh57zm] { grid-area: bar; }
    .specialist-today-row > :nth-child(3)[b-wkv4mh57zm] { grid-area: avatar; }
    .specialist-today-body[b-wkv4mh57zm] { grid-area: body; }
    .specialist-today-row > .orcanex-pill[b-wkv4mh57zm] { grid-area: type; justify-self: end; }
    .specialist-today-chev[b-wkv4mh57zm] { grid-area: chev; align-self: start; }

    .specialist-today-name[b-wkv4mh57zm] { white-space: normal; }

    /* Appointment row: stack date + body + ref */
    .specialist-appt-row[b-wkv4mh57zm] {
        grid-template-columns: 50px 1fr 16px;
        grid-template-areas:
            "date body chev"
            "date ref  chev";
        gap: 10px;
        padding: 12px 14px;
        align-items: start;
    }

    .specialist-appt-date[b-wkv4mh57zm] { grid-area: date; align-self: start; }
    .specialist-appt-body[b-wkv4mh57zm] { grid-area: body; }
    .specialist-appt-ref[b-wkv4mh57zm] { grid-area: ref; justify-self: start; }
    .specialist-appt-chev[b-wkv4mh57zm] { grid-area: chev; align-self: start; margin-top: 6px; }

    /* Task row already flex-based, just tighten padding */
    .specialist-task-row[b-wkv4mh57zm] {
        padding: 12px 14px;
    }

    .specialist-card-head[b-wkv4mh57zm] {
        padding: 12px 14px;
    }

    .specialist-today-list .specialist-today-row[b-wkv4mh57zm] {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    /* On the very smallest screens, collapse today row to a tighter card */
    .specialist-today-row[b-wkv4mh57zm] {
        grid-template-columns: 50px 4px 1fr 16px;
        grid-template-areas:
            "time bar body chev"
            "time bar type chev";
    }

    .specialist-today-row > :nth-child(3)[b-wkv4mh57zm] {
        display: none;
    }
}
/* /Components/Pages/Navigation/NewCaseForm.razor.rz.scp.css */
/* ============================================
   NEW CASE FORM - Professional & Guided
   ============================================ */

/* Title chip in header */
.new-case-title-chip[b-qgnk0ua0ar] {
    display: inline-flex;
    align-items: center;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: #0369a1;
}

/* Footer navigation bar */
.new-case-footer[b-qgnk0ua0ar] {
    position: sticky;
    bottom: 0;
    background: var(--color-panel);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-4);
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* Mobile: ensure the sticky footer sits above the bottom-tab nav and
   respects the safe-area-inset. The tab strip below is reachable via
   the compact-tabs strip. Buttons must also meet 44px touch target. */
:root[data-viewport="mobile"]   .new-case-footer[b-qgnk0ua0ar],
:root[data-viewport="mobile-l"] .new-case-footer[b-qgnk0ua0ar] {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}

:root[data-viewport="mobile"]   .new-case-footer .btn[b-qgnk0ua0ar],
:root[data-viewport="mobile-l"] .new-case-footer .btn[b-qgnk0ua0ar] {
    min-height: var(--touch-target);
}

/* Wizard step strip (Bootstrap `.nav-tabs.compact-tabs`) — horizontal
   scroll with snap on mobile so all 5 steps can be reached with a thumb. */
:root[data-viewport="mobile"]   .compact-tabs[b-qgnk0ua0ar],
:root[data-viewport="mobile-l"] .compact-tabs[b-qgnk0ua0ar] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

:root[data-viewport="mobile"]   .compact-tabs[b-qgnk0ua0ar]::-webkit-scrollbar,
:root[data-viewport="mobile-l"] .compact-tabs[b-qgnk0ua0ar]::-webkit-scrollbar {
    display: none;
}

:root[data-viewport="mobile"]   .compact-tabs .nav-item[b-qgnk0ua0ar],
:root[data-viewport="mobile-l"] .compact-tabs .nav-item[b-qgnk0ua0ar] {
    scroll-snap-align: start;
    flex-shrink: 0;
}

:root[data-viewport="mobile"]   .compact-tabs .nav-link[b-qgnk0ua0ar],
:root[data-viewport="mobile-l"] .compact-tabs .nav-link[b-qgnk0ua0ar] {
    min-height: var(--touch-target);
    padding-inline: var(--space-3);
}

/* ============================================
   REVIEW SECTION
   ============================================ */
.review-grid[b-qgnk0ua0ar] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 767px) {
    .review-grid[b-qgnk0ua0ar] {
        grid-template-columns: 1fr;
    }
}

.review-card[b-qgnk0ua0ar] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.review-card-header[b-qgnk0ua0ar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

.review-card-header i[b-qgnk0ua0ar] {
    margin-right: 0.375rem;
    font-size: 0.875rem;
}

.review-card-header .edit-link[b-qgnk0ua0ar] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #0081B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-card-header .edit-link:hover[b-qgnk0ua0ar] {
    text-decoration: underline;
}

.review-card-body[b-qgnk0ua0ar] {
    padding: 0.625rem 0.875rem;
}

.review-row[b-qgnk0ua0ar] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px dashed #e2e8f0;
}

.review-row:last-child[b-qgnk0ua0ar] {
    border-bottom: none;
}

.review-label[b-qgnk0ua0ar] {
    color: #64748b;
}

.review-value[b-qgnk0ua0ar] {
    color: #1e293b;
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* ============================================
   CLIENT SELECT GROUP (matches edit form)
   ============================================ */
.client-select-group[b-qgnk0ua0ar] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.client-select-group .form-select[b-qgnk0ua0ar] {
    flex: 1;
}

/* ============================================
   REVIEW READY BOX
   ============================================ */
.review-ready-box[b-qgnk0ua0ar] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.875rem 1rem;
}

/* ============================================
   ANIMATION
   ============================================ */
.fade-in[b-qgnk0ua0ar] {
    animation: ncfFadeIn-b-qgnk0ua0ar 0.2s ease-out;
}

@keyframes ncfFadeIn-b-qgnk0ua0ar {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Pages/Navigation/Tasks.razor.rz.scp.css */
/* Tasks page — Orcanex worklist */

.tasks-page[b-cdkho4cvqt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 24px 24px;
    flex: 1;
    min-height: 0;
}

/* ─── KPI strip ─── */
.tasks-kpi-strip[b-cdkho4cvqt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .tasks-kpi-strip[b-cdkho4cvqt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Filters card ─── */
.tasks-filter-card[b-cdkho4cvqt] {
    flex-shrink: 0;
}

.tasks-search-wrap[b-cdkho4cvqt] {
    position: relative;
}

.tasks-search-clear[b-cdkho4cvqt] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    width: 18px;
    height: 18px;
    justify-content: center;
}

.tasks-search-clear:hover[b-cdkho4cvqt] {
    color: var(--color-text);
    background: var(--color-bg);
}

/* ─── Toolbar ─── */
.tasks-toolbar[b-cdkho4cvqt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-shrink: 0;
}

.tasks-toolbar-count[b-cdkho4cvqt] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.tasks-toolbar-spacer[b-cdkho4cvqt] {
    flex: 1;
}

.tasks-toolbar-sort-label[b-cdkho4cvqt] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.tasks-toolbar-sort-select[b-cdkho4cvqt] {
    height: 28px;
    padding: 0 26px 0 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--color-text);
    cursor: pointer;
}

.tasks-toolbar-sort-dir[b-cdkho4cvqt] {
    width: 28px;
    height: 28px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tasks-toolbar-sort-dir:hover[b-cdkho4cvqt] {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ─── Worklist rows ─── */
.tasks-rows[b-cdkho4cvqt] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.tasks-row[b-cdkho4cvqt] {
    display: grid;
    grid-template-columns: 90px 80px 1fr 180px 110px 80px;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out),
                border-color var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.tasks-row:hover[b-cdkho4cvqt] {
    background: var(--color-bg);
}

/* List mode: card (default) — each row is its own panel with rounded edges. */
.tasks-rows[data-list-mode="card"][b-cdkho4cvqt] { gap: 8px; }
.tasks-rows[data-list-mode="card"] .tasks-row[b-cdkho4cvqt] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* List mode: tabular — rows packed inside a single panel, divider lines only.
   overflow-x is hidden so the rounded corners clip the rows; overflow-y must
   stay `auto` so the inner virtual list scrolls. */
.tasks-rows[data-list-mode="tabular"][b-cdkho4cvqt] {
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: hidden;
    overflow-y: auto;
}
.tasks-rows[data-list-mode="tabular"] .tasks-row[b-cdkho4cvqt] {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.tasks-rows[data-list-mode="tabular"] .tasks-row:last-child[b-cdkho4cvqt] {
    border-bottom: none;
}

.tasks-row.is-overdue[b-cdkho4cvqt] {
    border-left: 3px solid var(--color-danger);
}

.tasks-row.is-due-today[b-cdkho4cvqt] {
    border-left: 3px solid var(--color-warn);
}

.tasks-row-due[b-cdkho4cvqt] {
    text-align: left;
}

.tasks-row-due-main[b-cdkho4cvqt] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.tasks-row-due-main.is-overdue[b-cdkho4cvqt] {
    color: var(--color-danger);
}

.tasks-row-due-main.is-today[b-cdkho4cvqt] {
    color: var(--color-warn);
}

.tasks-row-due-sub[b-cdkho4cvqt] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.tasks-row-muted[b-cdkho4cvqt] {
    color: var(--color-text-subtle);
    font-size: 0.92rem;
}

.tasks-row-body[b-cdkho4cvqt] {
    min-width: 0;
}

.tasks-row-title[b-cdkho4cvqt] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-row-title.is-done[b-cdkho4cvqt] {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.tasks-row-sub[b-cdkho4cvqt] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.tasks-row-case-link[b-cdkho4cvqt] {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}

.tasks-row-case-link:hover[b-cdkho4cvqt] {
    text-decoration: underline;
}

.tasks-row-sep[b-cdkho4cvqt] {
    color: var(--color-text-subtle);
}

.tasks-row-owner[b-cdkho4cvqt] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tasks-row-owner-name[b-cdkho4cvqt] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-row-status[b-cdkho4cvqt] {
    display: flex;
    justify-content: flex-start;
}

.tasks-row-actions[b-cdkho4cvqt] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.tasks-row-chev[b-cdkho4cvqt] {
    color: var(--color-text-subtle);
}

@media (max-width: 1100px) {
    .tasks-row[b-cdkho4cvqt] {
        grid-template-columns: 80px 1fr 110px 60px;
    }

    .tasks-row-priority[b-cdkho4cvqt],
    .tasks-row-owner[b-cdkho4cvqt] {
        display: none;
    }
}

/* ============================================================
   Mobile reflow — matches the Cases-card pattern.

   Defeats the global `.orcanex-frame-content > *:last-child`
   padding-bottom rule from tokens.css (which adds the mobile
   bottom-tab clearance). The Tasks page has its own internal
   scroll on `.tasks-rows`, so that wrapper-level padding only
   produces dead space below the list. The `::after` spacer on
   `.orcanex-frame-content` still provides the actual bottom-tab
   inset. Specificity matches the global rule's (0,4,0) plus the
   Blazor scope attribute on `.tasks-page` → (0,5,0) wins.
   ============================================================ */
:root[data-viewport="mobile"]   .orcanex-frame-content .tasks-page[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .orcanex-frame-content .tasks-page[b-cdkho4cvqt] {
    padding: var(--space-2);
    gap: var(--space-2);
    padding-bottom: 0 !important;
}

/* Tasks list — the scroll container should not have leftover
   right-padding at mobile (it leaves a sliver of empty space). */
:root[data-viewport="mobile"]   .tasks-rows[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-rows[b-cdkho4cvqt] {
    padding-right: 0;
    gap: var(--space-2);
}

/* ============================================================
   Mobile task card — compact 2-column mini-card matching the
   Cases-card density.

   Layout:
       ┌─────────────────────────────────────────────────┐
       │ Task title (1 line, ellipsis)         [Status]  │
       │ #1234 · 12 May · Owner                  ✓  ›    │
       └─────────────────────────────────────────────────┘

   • Title + status on row 1
   • Body sub-line (case id + due-date + owner) + actions on row 2
   • All secondary columns (.tasks-row-priority/.tasks-row-owner/
     .tasks-row-due as separate cells) are hidden — their data
     is inlined into the sub-line.
   ============================================================ */
:root[data-viewport="mobile"]   .tasks-row[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row[b-cdkho4cvqt] {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "body    status"
        "body    actions";
    padding: 10px var(--space-3);
    gap: 2px var(--space-2);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: start;
}

/* Place named grid areas. */
:root[data-viewport="mobile"]   .tasks-row-body[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-body[b-cdkho4cvqt]       { grid-area: body; }
:root[data-viewport="mobile"]   .tasks-row-status[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-status[b-cdkho4cvqt]     { grid-area: status; justify-self: end; align-self: start; }
:root[data-viewport="mobile"]   .tasks-row-actions[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-actions[b-cdkho4cvqt]    { grid-area: actions; justify-self: end; align-self: end; gap: 2px; }

/* Hide the separate priority / owner / due cells — those data points
   are surfaced inline in the body sub-line instead. */
:root[data-viewport="mobile"]   .tasks-row-priority[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-priority[b-cdkho4cvqt],
:root[data-viewport="mobile"]   .tasks-row-owner[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-owner[b-cdkho4cvqt],
:root[data-viewport="mobile"]   .tasks-row-due[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-due[b-cdkho4cvqt] {
    display: none;
}

/* Tighten typography in the body. */
:root[data-viewport="mobile"]   .tasks-row-title[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-title[b-cdkho4cvqt] {
    font-size: 0.96rem;
    line-height: 1.25;
}
:root[data-viewport="mobile"]   .tasks-row-sub[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-row-sub[b-cdkho4cvqt] {
    font-size: 0.77rem;
    margin-top: 1px;
    line-height: 1.25;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Action buttons — compact icon-only rendering. Chevron always visible;
   check button conditionally rendered by the .razor. The 36×36 touch
   target shape applies via the global mobile button rules; here we just
   make sure the buttons don't have stray padding. */
:root[data-viewport="mobile"]   .tasks-row-actions[b-cdkho4cvqt]  .orcanex-btn,
:root[data-viewport="mobile-l"] .tasks-row-actions[b-cdkho4cvqt]  .orcanex-btn {
    height: 30px;
    min-height: 30px;
    width: 30px;
    padding: 0;
}

/* ============================================================
   Task edit / view modal footer — single-row layout at mobile.

   The view-mode footer has up to 5 buttons (Close + Open case +
   Edit + Reassign + Complete) which wrap onto two rows on a
   ~375 px phone. To keep them on one row we:
     • Hide the Close button (the modal already has an X in the
       header — the duplicate text button is redundant on mobile).
     • Hide the `.btn-label` text spans so each remaining button
       renders icon-only (~36 px wide).
     • Switch the footer to `flex-nowrap` and tighten the gap.
   The desktop layout is untouched — `.btn-label` spans render
   normally and the existing flex-wrap behaviour stays.
   ============================================================ */
:root[data-viewport="mobile"]   .tasks-modal-footer[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-modal-footer[b-cdkho4cvqt] {
    flex-wrap: nowrap !important;
    gap: var(--space-1) !important;
    padding: var(--space-2) var(--space-3) !important;
    overflow-x: auto;
}

/* Hide the label-text span at mobile so the footer buttons collapse
   to icon-only. Targets the wrapper span we added in the .razor —
   no risk of hiding actual icon content. */
:root[data-viewport="mobile"]   .tasks-modal-footer .btn-label[b-cdkho4cvqt],
:root[data-viewport="mobile-l"] .tasks-modal-footer .btn-label[b-cdkho4cvqt] {
    display: none;
}

/* Compress each footer button to a square icon-only chip. The
   global mobile button rules keep a 44 px touch target floor on
   stand-alone icon buttons, but the modal footer is itself a
   ~52 px tall row so we use the 36 × 36 mobile-header shape
   instead (matches the icon-only buttons in MobilePageHeader). */
:root[data-viewport="mobile"]   .tasks-modal-footer[b-cdkho4cvqt]  .orcanex-btn,
:root[data-viewport="mobile-l"] .tasks-modal-footer[b-cdkho4cvqt]  .orcanex-btn {
    height: 36px !important;
    min-height: 36px !important;
    width: 36px;
    min-width: 36px;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Primary action (Complete / Save / Create) keeps its label visible
   so the user has an obvious primary CTA, and grows to absorb the
   remaining space pushed against the right edge by an auto-margin. */
:root[data-viewport="mobile"]   .tasks-modal-footer[b-cdkho4cvqt]  .orcanex-btn-primary,
:root[data-viewport="mobile-l"] .tasks-modal-footer[b-cdkho4cvqt]  .orcanex-btn-primary {
    width: auto;
    min-width: 0;
    padding: 0 var(--space-3) !important;
    margin-left: auto;
}
:root[data-viewport="mobile"]   .tasks-modal-footer[b-cdkho4cvqt]  .orcanex-btn-primary .btn-label,
:root[data-viewport="mobile-l"] .tasks-modal-footer[b-cdkho4cvqt]  .orcanex-btn-primary .btn-label {
    display: inline;
}
/* /Components/Pages/PostLogin.razor.rz.scp.css */
.orcanex-postlogin[b-8hx3zni6uz] {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.orcanex-postlogin[b-8hx3zni6uz]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 30%, var(--color-accent-soft) 0%, transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(123, 156, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

.orcanex-postlogin-card[b-8hx3zni6uz] {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: var(--space-7) var(--space-6);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-text);
}

.orcanex-postlogin-wordmark[b-8hx3zni6uz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.orcanex-postlogin-mark[b-8hx3zni6uz] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #fff;
    font-weight: 700;
    font-size: 1.23rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-postlogin-mark-orca[b-8hx3zni6uz] {
    background: linear-gradient(135deg, #3FAFA3, #1F6C7A);
}

.orcanex-postlogin-name[b-8hx3zni6uz] {
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.orcanex-postlogin-spinner[b-8hx3zni6uz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: orcanex-postlogin-spin-b-8hx3zni6uz 0.9s linear infinite;
    margin-bottom: var(--space-4);
}

@keyframes orcanex-postlogin-spin-b-8hx3zni6uz {
    to { transform: rotate(360deg); }
}

.orcanex-postlogin-text[b-8hx3zni6uz] {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.orcanex-postlogin-region[b-8hx3zni6uz] {
    margin-top: var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

.orcanex-postlogin-region-flag[b-8hx3zni6uz] {
    width: 16px;
    height: 12px;
    border-radius: 2px;
}
/* /Components/Pages/Public/ConsentForm.razor.rz.scp.css */
/* ===========================================================================
   Public shell — branded full-bleed layout used by ConsentForm.
   Most consent links are opened on a phone, so the design is mobile-first:
   a fixed-attachment gradient background (system-aware) fills the viewport,
   a white card with a top accent stripe and soft elevation hosts the content.

   ── CSS-isolation note ──────────────────────────────────────────────────
   Every selector here targets markup authored in *this* component's .razor
   file, so plain selectors get the scope attribute appended directly
   (e.g. `.public-shell` becomes `.public-shell[b-xxxx]`). The earlier
   version of this file used `::deep .public-shell` which the transformer
   rewrites as `[b-xxxx] .public-shell` — meaning "a `.public-shell` that
   sits *inside* an element with that scope attribute" — but `.public-shell`
   IS the element with the scope, so the rule silently never matched and
   the gradient / topbar / card-stripe styling went missing. The Card
   component's inner `.orcanex-card` markup IS in a different scope, so
   it uses the scope-then-deep pattern (`.public-shell-column ::deep ...`).
   See CLAUDE.md → "Never combine `:root[…]` with `::deep`".
   =========================================================================== */

/* ── Shell root with per-system gradient background ─────────────────────── */

.public-shell[b-lsf2voqp71] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    font-family: var(--font-family);

    /* Default gradient — used until SystemDetermination resolves. Examinex
       blue feels right as the fallback because the codebase defaults to it. */
    background: linear-gradient(135deg, #0B2F6B 0%, #1E51EE 60%, #3B82F6 100%);
    background-attachment: fixed;
}

/* Examinex — corporate blue gradient with a brighter highlight at the top */
.public-shell[data-system="examinex"][b-lsf2voqp71] {
    background: linear-gradient(135deg, #0B2F6B 0%, #1E51EE 55%, #3B82F6 100%);
    background-attachment: fixed;
    --shell-accent: #2F62FF;
    --shell-accent-strong: #1E51EE;
    --shell-accent-soft: rgba(47, 98, 255, 0.10);
    --shell-on-bg: rgba(255, 255, 255, 0.92);
    --shell-on-bg-muted: rgba(255, 255, 255, 0.68);
}

/* Orca — deep navy / teal gradient, calmer than Examinex blue */
.public-shell[data-system="orca"][b-lsf2voqp71] {
    background: linear-gradient(135deg, #0A1B33 0%, #102F4F 50%, #1F4F70 100%);
    background-attachment: fixed;
    --shell-accent: #2E8AB8;
    --shell-accent-strong: #1F6E96;
    --shell-accent-soft: rgba(46, 138, 184, 0.12);
    --shell-on-bg: rgba(255, 255, 255, 0.92);
    --shell-on-bg-muted: rgba(255, 255, 255, 0.68);
}

/* Subtle radial highlight to break up the flat gradient */
.public-shell[b-lsf2voqp71]::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.10), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.18), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.public-shell > *[b-lsf2voqp71] {
    position: relative;
    z-index: 1;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */

.public-shell-topbar[b-lsf2voqp71] {
    height: var(--h-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-5);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.public-shell-helper[b-lsf2voqp71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--shell-accent-strong, var(--color-accent));
    background: var(--shell-accent-soft, var(--color-accent-soft));
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.public-shell-helper span[b-lsf2voqp71] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Main column ───────────────────────────────────────────────────────── */

.public-shell-main[b-lsf2voqp71] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-7) var(--space-5) var(--space-5);
    gap: var(--space-5);
}

.public-shell-column[b-lsf2voqp71] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.public-shell-column-wide[b-lsf2voqp71] {
    max-width: 760px;
}

/* ── Card overrides — accent stripe + elevation against the gradient ───── */

/* The Card primitive renders <div class="orcanex-card">…</div> with its own
   scope attribute. The scope-then-deep pattern attaches our scope to
   .public-shell-column and then `::deep` reaches into the Card's scope to
   target .orcanex-card itself. */
.public-shell-column[b-lsf2voqp71]  .orcanex-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.35),
        0 4px 8px -4px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

/* Top accent stripe on every card — the visual cue that ties the white
   card back to the system's accent colour without colouring the whole
   panel. */
.public-shell-column[b-lsf2voqp71]  .orcanex-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--shell-accent-strong, var(--color-accent)) 0%,
        var(--shell-accent, var(--color-accent)) 100%);
    z-index: 1;
}

/* ── Loading + EmptyState card shapes ──────────────────────────────────── */

.public-shell-loading[b-lsf2voqp71] {
    text-align: center;
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.public-shell-spinner[b-lsf2voqp71] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--shell-accent, var(--color-accent));
    animation: public-shell-spin-b-lsf2voqp71 0.9s linear infinite;
}

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

.public-shell-muted[b-lsf2voqp71] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* ── Typography inside cards ───────────────────────────────────────────── */

.public-shell-lead[b-lsf2voqp71] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.public-shell-banner[b-lsf2voqp71] {
    margin-bottom: var(--space-5);
}

/* ── Form layout ──────────────────────────────────────────────────────── */

.public-shell-dob-row[b-lsf2voqp71] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3);
}

.public-shell-grid-two[b-lsf2voqp71] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .public-shell-grid-two[b-lsf2voqp71] { grid-template-columns: 1fr; }
}

.public-shell-details[b-lsf2voqp71] {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

.public-shell-details .public-shell-grid-two:last-child[b-lsf2voqp71] {
    margin-bottom: 0;
}

.public-shell-section-title[b-lsf2voqp71] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
}

.public-shell-postcode[b-lsf2voqp71] {
    font-family: var(--font-mono, monospace);
    text-transform: uppercase;
}

/* Field inputs get a bit more presence on this short, important form. */
.public-shell-dob-row .form-control[b-lsf2voqp71],
.public-shell-grid-two .form-control[b-lsf2voqp71] {
    min-height: 44px;
    font-size: 1rem;
}

/* ── Terms — scrollable, soft-edged ───────────────────────────────────── */

.public-shell-terms[b-lsf2voqp71] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    background: linear-gradient(180deg, #FAFBFC 0%, #F4F6F9 100%);
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.public-shell-terms h3[b-lsf2voqp71],
.public-shell-terms h4[b-lsf2voqp71],
.public-shell-terms h5[b-lsf2voqp71] {
    color: var(--shell-accent-strong, var(--color-accent));
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.public-shell-terms h3:first-child[b-lsf2voqp71],
.public-shell-terms h4:first-child[b-lsf2voqp71],
.public-shell-terms h5:first-child[b-lsf2voqp71] {
    margin-top: 0;
}

.public-shell-terms ul[b-lsf2voqp71] {
    padding-left: var(--space-5);
}

.public-shell-terms p:last-child[b-lsf2voqp71] {
    margin-bottom: 0;
}

.public-shell-terms[b-lsf2voqp71]::-webkit-scrollbar { width: 6px; }
.public-shell-terms[b-lsf2voqp71]::-webkit-scrollbar-track { background: transparent; }
.public-shell-terms[b-lsf2voqp71]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.public-shell-terms[b-lsf2voqp71]::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-subtle);
}

/* ── Signature canvas — accent-tinted bordered surface ────────────────── */

.public-shell-signature[b-lsf2voqp71] {
    border: 1px dashed var(--shell-accent, var(--color-accent));
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--shell-accent-soft, var(--color-accent-soft)) 100%);
    cursor: crosshair;
    position: relative;
}

.public-shell-signature[b-lsf2voqp71]::before {
    content: "Sign here";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--shell-accent, var(--color-accent));
    opacity: 0.35;
    pointer-events: none;
    font-style: italic;
}

.public-shell-signature canvas[b-lsf2voqp71] {
    display: block;
    width: 100%;
    height: 150px;
    touch-action: none;
    position: relative;
    z-index: 1;
}

.public-shell-signature-actions[b-lsf2voqp71] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}

/* ── Actions row + primary CTA ────────────────────────────────────────── */

.public-shell-actions[b-lsf2voqp71] {
    display: flex;
    justify-content: stretch;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.public-shell-actions-stack[b-lsf2voqp71] {
    flex-direction: column;
    align-items: stretch;
}

.public-shell-cta[b-lsf2voqp71] {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
}

/* The primary CTA picks up the system accent rather than the user's grey. */
.public-shell-cta.orcanex-btn-primary[b-lsf2voqp71],
.public-shell-cta[b-lsf2voqp71]  .orcanex-btn-primary {
    background: var(--shell-accent-strong, var(--color-accent));
    border-color: var(--shell-accent-strong, var(--color-accent));
}

.public-shell-cta.orcanex-btn-primary:hover[b-lsf2voqp71],
.public-shell-cta[b-lsf2voqp71]  .orcanex-btn-primary:hover {
    background: var(--shell-accent, var(--color-accent));
    border-color: var(--shell-accent, var(--color-accent));
}

.public-shell-cta-danger[b-lsf2voqp71] {
    color: var(--color-danger);
}

.public-shell-cta-danger:hover[b-lsf2voqp71] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ── Footer — sits on the gradient ────────────────────────────────────── */

.public-shell-footer[b-lsf2voqp71] {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--shell-on-bg-muted, rgba(255, 255, 255, 0.65));
    text-align: center;
    padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}

/* ── Mobile (< 640px) — full-bleed card, larger signature ─────────────── */

@media (max-width: 640px) {
    .public-shell-topbar[b-lsf2voqp71] {
        padding: 0 var(--space-4);
    }

    .public-shell-main[b-lsf2voqp71] {
        padding: var(--space-4) 0 0;
        gap: var(--space-3);
    }

    .public-shell-column[b-lsf2voqp71] {
        padding: 0 var(--space-3);
        gap: var(--space-3);
    }

    /* Card scales down its border radius at mobile so the white card
       feels more like a sheet sitting on the gradient. */
    .public-shell-column[b-lsf2voqp71]  .orcanex-card {
        border-radius: var(--radius-md);
    }

    .public-shell-dob-row[b-lsf2voqp71] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* Taller signature canvas on phones — 150 px is too cramped to sign
       with a finger; 180 px gives enough room without exceeding a
       comfortable thumb-stroke. */
    .public-shell-signature canvas[b-lsf2voqp71] { height: 180px; }

    /* Terms scroll area shrinks a bit so the canvas + actions fit on
       one screen without aggressive scrolling. */
    .public-shell-terms[b-lsf2voqp71] { max-height: 240px; padding: var(--space-4); }

    .public-shell-helper[b-lsf2voqp71] {
        font-size: 0.78rem;
        padding: 4px 10px;
    }

    .public-shell-footer[b-lsf2voqp71] {
        padding-top: var(--space-4);
    }
}

/* ── Very small viewports (< 380px) — drop helper pill text ───────────── */

@media (max-width: 380px) {
    .public-shell-helper[b-lsf2voqp71] {
        font-size: 0;
        padding: 6px;
    }
    .public-shell-helper span > :first-child[b-lsf2voqp71] { /* keep only icon */
        font-size: 1.08rem; /* 14px @ 13px baseline — restores the icon glyph after the parent's font-size: 0 collapsed it */
    }
}
/* /Components/Pages/Public/ReportReview.razor.rz.scp.css */
/* ===========================================================================
   Public shell for ReportReview. Mirrors the visual language of ConsentForm:
   per-system gradient background, white card with top accent stripe, branded
   helper pill in the topbar, mobile-first density.

   ── CSS-isolation note ──────────────────────────────────────────────────
   Every selector targets markup authored in this .razor file, so PLAIN
   selectors get the scope attribute appended directly. `::deep` at the
   start of a selector rewrites to `[b-xxxx] .target` which means "target
   inside an element with that scope attribute" — but the .public-shell
   root IS the scoped element, not a descendant, so those rules never
   matched in the earlier draft and the branded chrome went missing. See
   CLAUDE.md → "Never combine `:root[…]` with `::deep`".
   =========================================================================== */

/* ── Shell root with per-system gradient background ─────────────────────── */

.public-shell[b-ixsde54bbo] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    font-family: var(--font-family);

    /* Default gradient — used until SystemDetermination resolves. */
    background: linear-gradient(135deg, #0B2F6B 0%, #1E51EE 60%, #3B82F6 100%);
    background-attachment: fixed;
}

.public-shell[data-system="examinex"][b-ixsde54bbo] {
    background: linear-gradient(135deg, #0B2F6B 0%, #1E51EE 55%, #3B82F6 100%);
    background-attachment: fixed;
    --shell-accent: #2F62FF;
    --shell-accent-strong: #1E51EE;
    --shell-accent-soft: rgba(47, 98, 255, 0.10);
    --shell-on-bg: rgba(255, 255, 255, 0.92);
    --shell-on-bg-muted: rgba(255, 255, 255, 0.68);
}

.public-shell[data-system="orca"][b-ixsde54bbo] {
    background: linear-gradient(135deg, #0A1B33 0%, #102F4F 50%, #1F4F70 100%);
    background-attachment: fixed;
    --shell-accent: #2E8AB8;
    --shell-accent-strong: #1F6E96;
    --shell-accent-soft: rgba(46, 138, 184, 0.12);
    --shell-on-bg: rgba(255, 255, 255, 0.92);
    --shell-on-bg-muted: rgba(255, 255, 255, 0.68);
}

.public-shell[b-ixsde54bbo]::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.10), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.18), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.public-shell > *[b-ixsde54bbo] {
    position: relative;
    z-index: 1;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */

.public-shell-topbar[b-ixsde54bbo] {
    height: var(--h-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-5);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.public-shell-helper[b-ixsde54bbo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--shell-accent-strong, var(--color-accent));
    background: var(--shell-accent-soft, var(--color-accent-soft));
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.public-shell-helper span[b-ixsde54bbo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Main column ───────────────────────────────────────────────────────── */

.public-shell-main[b-ixsde54bbo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-7) var(--space-5) var(--space-5);
    gap: var(--space-5);
}

.public-shell-column[b-ixsde54bbo] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.public-shell-column-wide[b-ixsde54bbo] {
    /* The PDF preview + accept/query flow needs more width than the DOB gate. */
    max-width: 880px;
}

/* ── Card overrides — accent stripe + elevation on the gradient ────────── */

.public-shell-column[b-ixsde54bbo]  .orcanex-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.35),
        0 4px 8px -4px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

.public-shell-column[b-ixsde54bbo]  .orcanex-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--shell-accent-strong, var(--color-accent)) 0%,
        var(--shell-accent, var(--color-accent)) 100%);
    z-index: 1;
}

/* ── Loading + EmptyState card shapes ──────────────────────────────────── */

.public-shell-loading[b-ixsde54bbo] {
    text-align: center;
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.public-shell-spinner[b-ixsde54bbo] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--shell-accent, var(--color-accent));
    animation: public-shell-spin-b-ixsde54bbo 0.9s linear infinite;
}

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

.public-shell-muted[b-ixsde54bbo] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.public-shell-lead[b-ixsde54bbo] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.public-shell-banner[b-ixsde54bbo] {
    margin-bottom: var(--space-5);
}

/* ── DOB row ───────────────────────────────────────────────────────────── */

.public-shell-dob-row[b-ixsde54bbo] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3);
}

.public-shell-dob-row .form-control[b-ixsde54bbo] {
    min-height: 44px;
    font-size: 1rem;
}

/* ── PDF preview ───────────────────────────────────────────────────────── */

.public-shell-pdf-card[b-ixsde54bbo] {
    overflow: hidden;
}

.public-shell-pdf[b-ixsde54bbo] {
    position: relative;
    width: 100%;
}

.public-shell-pdf-frame[b-ixsde54bbo] {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
}

.public-shell-pdf-overlay[b-ixsde54bbo] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Accept / Query button row ─────────────────────────────────────────── */

.public-shell-actions[b-ixsde54bbo] {
    display: flex;
    justify-content: stretch;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.public-shell-actions-split[b-ixsde54bbo] {
    justify-content: space-between;
    flex-wrap: wrap;
}

.public-shell-cta[b-ixsde54bbo] {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
}

.public-shell-cta.orcanex-btn-primary[b-ixsde54bbo],
.public-shell-cta[b-ixsde54bbo]  .orcanex-btn-primary {
    background: var(--shell-accent-strong, var(--color-accent));
    border-color: var(--shell-accent-strong, var(--color-accent));
}

.public-shell-cta.orcanex-btn-primary:hover[b-ixsde54bbo],
.public-shell-cta[b-ixsde54bbo]  .orcanex-btn-primary:hover {
    background: var(--shell-accent, var(--color-accent));
    border-color: var(--shell-accent, var(--color-accent));
}

/* ── Query form header (back chevron + title) ──────────────────────────── */

.public-shell-card-head[b-ixsde54bbo] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.public-shell-card-title[b-ixsde54bbo] {
    margin: 0;
    font-size: 1.23rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ── Fine-print under the action row ───────────────────────────────────── */

.public-shell-finepoint[b-ixsde54bbo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

.public-shell-finepoint-center[b-ixsde54bbo] {
    display: flex;
    justify-content: center;
}

/* ── Download-link button (Client download state) ──────────────────────── */

.public-shell-link-btn[b-ixsde54bbo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 48px;
    background: var(--shell-accent-strong, var(--color-accent));
    color: #FFFFFF;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background var(--duration-hover) var(--ease-hover);
}

.public-shell-link-btn:hover[b-ixsde54bbo] {
    background: var(--shell-accent, var(--color-accent));
    color: #FFFFFF;
}

/* ── Footer — sits on the gradient ────────────────────────────────────── */

.public-shell-footer[b-ixsde54bbo] {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--shell-on-bg-muted, rgba(255, 255, 255, 0.65));
    text-align: center;
    padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}

/* ── Mobile (< 640px) — full-bleed card, larger PDF, stacked actions ──── */

@media (max-width: 640px) {
    .public-shell-topbar[b-ixsde54bbo] {
        padding: 0 var(--space-4);
    }

    .public-shell-main[b-ixsde54bbo] {
        padding: var(--space-4) 0 0;
        gap: var(--space-3);
    }

    .public-shell-column[b-ixsde54bbo] {
        padding: 0 var(--space-3);
        gap: var(--space-3);
    }

    .public-shell-column[b-ixsde54bbo]  .orcanex-card {
        border-radius: var(--radius-md);
    }

    .public-shell-dob-row[b-ixsde54bbo] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* PDF preview takes most of the mobile screen — 60% of dvh accounts for
       iOS Safari's URL bar so the iframe doesn't get clipped behind it. */
    .public-shell-pdf-frame[b-ixsde54bbo] { height: 60dvh; min-height: 360px; }

    /* Accept / Raise query buttons full-width, stacked. */
    .public-shell-actions-split[b-ixsde54bbo] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .public-shell-actions-split > *[b-ixsde54bbo] { width: 100%; }

    .public-shell-helper[b-ixsde54bbo] {
        font-size: 0.78rem;
        padding: 4px 10px;
    }

    .public-shell-footer[b-ixsde54bbo] {
        padding-top: var(--space-4);
    }
}

/* ── Very small viewports (< 380px) — drop helper pill text ───────────── */

@media (max-width: 380px) {
    .public-shell-helper[b-ixsde54bbo] {
        font-size: 0;
        padding: 6px;
    }
    .public-shell-helper span > :first-child[b-ixsde54bbo] {
        font-size: 1.08rem; /* 14px @ 13px baseline — restores the icon glyph */
    }
}
/* /Components/Pages/Public/RevealPassword.razor.rz.scp.css */
/* ===========================================================================
   Password reveal — single centred card on a subtle gradient.
   Mirrors the LockScreen visual pattern.
   =========================================================================== */

/* NOTE: no ::deep here. .reveal-shell is THIS component's scoped ROOT element, so it carries
   the [b-xxx] scope attribute itself. A leading `::deep` compiles to `[b-xxx] .reveal-shell`,
   which only matches a DESCENDANT of a scoped element — the root never matches itself, so the
   full-screen flex centring silently dropped and the card fell to top-left. Plain `.reveal-shell`
   compiles to `.reveal-shell[b-xxx]` and matches the root. (Inner elements keep ::deep because
   several are rendered by child components — Btn/Field/BrandWordmark — under their own scope.) */
.reveal-shell[b-etw6eywiip] {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
}

[b-etw6eywiip] .reveal-blur {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(15, 17, 21, 0.45), rgba(47, 98, 255, 0.25)),
        radial-gradient(circle at 30% 30%, rgba(123, 156, 255, 0.22), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(63, 175, 163, 0.18), transparent 45%),
        var(--color-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 0;
}

[b-etw6eywiip] .reveal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: var(--space-7);
    background: var(--color-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-modal);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[b-etw6eywiip] .reveal-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-1);
}

[b-etw6eywiip] .reveal-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.38rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-etw6eywiip] .reveal-mark-orca {
    background: linear-gradient(135deg, #3FAFA3, #1F6C7A);
}

[b-etw6eywiip] .reveal-title {
    margin: 0;
    font-size: 1.54rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--color-text);
    text-align: center;
}

[b-etw6eywiip] .reveal-subtitle {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
}

[b-etw6eywiip] .reveal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
}

[b-etw6eywiip] .reveal-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: reveal-spin-b-etw6eywiip 0.9s linear infinite;
}

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

[b-etw6eywiip] .reveal-muted {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

[b-etw6eywiip] .reveal-banner { margin: 0; }

[b-etw6eywiip] .reveal-cta {
    width: 100%;
    justify-content: center;
}

[b-etw6eywiip] .reveal-credential-block {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

[b-etw6eywiip] .reveal-credential {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text);
    word-break: break-all;
}

[b-etw6eywiip] .reveal-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    height: var(--h-button-sm);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

[b-etw6eywiip] .reveal-copy:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

[b-etw6eywiip] .reveal-fineprint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

[b-etw6eywiip] .reveal-footer {
    position: relative;
    z-index: 1;
    margin-top: var(--space-5);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}
/* /Components/Pages/Public/VideoCall.razor.rz.scp.css */
/* ===========================================================================
   Public shell + video call chrome.
   The DOB gate / invalid / loading states reuse the public-shell mini layout;
   the InCall state takes over the full viewport and lays the brand chrome on
   top of the embedded video.

   These selectors target elements authored in this .razor — plain descendant
   selectors (not ::deep) so the scope attribute is appended to the matched
   element itself. Using ::deep on a root element compiles to a descendant
   selector that does NOT match the scoped root, which is why this file used
   to render against EmptyLayout's bare `.orcanex-empty-shell` background.
   =========================================================================== */

/* ----------- Shared mini-shell (DOB gate / invalid / loading) -----------
   Branded full-bleed layout matching ConsentForm + ReportReview: per-system
   gradient background, white card with top accent stripe, branded helper
   pill in the topbar. The InCall state below takes over with its own
   full-screen chrome and stays unchanged. */
.public-shell[b-ix1x9wesnh] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    font-family: var(--font-family);

    /* Default gradient — used until SystemDetermination resolves. */
    background: linear-gradient(135deg, #0B2F6B 0%, #1E51EE 60%, #3B82F6 100%);
    background-attachment: fixed;
}

.public-shell[data-system="examinex"][b-ix1x9wesnh] {
    background: linear-gradient(135deg, #0B2F6B 0%, #1E51EE 55%, #3B82F6 100%);
    background-attachment: fixed;
    --shell-accent: #2F62FF;
    --shell-accent-strong: #1E51EE;
    --shell-accent-soft: rgba(47, 98, 255, 0.10);
    --shell-on-bg-muted: rgba(255, 255, 255, 0.68);
}

.public-shell[data-system="orca"][b-ix1x9wesnh] {
    background: linear-gradient(135deg, #0A1B33 0%, #102F4F 50%, #1F4F70 100%);
    background-attachment: fixed;
    --shell-accent: #2E8AB8;
    --shell-accent-strong: #1F6E96;
    --shell-accent-soft: rgba(46, 138, 184, 0.12);
    --shell-on-bg-muted: rgba(255, 255, 255, 0.68);
}

.public-shell[b-ix1x9wesnh]::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.10), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.18), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.public-shell > *[b-ix1x9wesnh] {
    position: relative;
    z-index: 1;
}

.public-shell-topbar[b-ix1x9wesnh] {
    height: var(--h-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-5);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.public-shell-helper[b-ix1x9wesnh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--shell-accent-strong, var(--color-accent));
    background: var(--shell-accent-soft, var(--color-accent-soft));
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.public-shell-helper span[b-ix1x9wesnh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.public-shell-main[b-ix1x9wesnh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-7) var(--space-5) var(--space-5);
    gap: var(--space-5);
}

.public-shell-column[b-ix1x9wesnh] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Card accent stripe — reaches into the Card primitive's own scope. */
.public-shell-column[b-ix1x9wesnh]  .orcanex-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.35),
        0 4px 8px -4px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

.public-shell-column[b-ix1x9wesnh]  .orcanex-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--shell-accent-strong, var(--color-accent)) 0%,
        var(--shell-accent, var(--color-accent)) 100%);
    z-index: 1;
}

.public-shell-loading[b-ix1x9wesnh] {
    text-align: center;
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.public-shell-spinner[b-ix1x9wesnh] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--shell-accent, var(--color-accent));
    animation: public-shell-spin-b-ix1x9wesnh 0.9s linear infinite;
}

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

.public-shell-muted[b-ix1x9wesnh] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.public-shell-lead[b-ix1x9wesnh] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.public-shell-banner[b-ix1x9wesnh] {
    margin-bottom: var(--space-5);
}

.public-shell-dob-row[b-ix1x9wesnh] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3);
}

.public-shell-dob-row .form-control[b-ix1x9wesnh] {
    min-height: 44px;
    font-size: 1rem;
}

.public-shell-actions[b-ix1x9wesnh] {
    display: flex;
    justify-content: stretch;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.public-shell-cta[b-ix1x9wesnh] {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
}

.public-shell-cta.orcanex-btn-primary[b-ix1x9wesnh],
.public-shell-cta[b-ix1x9wesnh]  .orcanex-btn-primary {
    background: var(--shell-accent-strong, var(--color-accent));
    border-color: var(--shell-accent-strong, var(--color-accent));
}

.public-shell-cta.orcanex-btn-primary:hover[b-ix1x9wesnh],
.public-shell-cta[b-ix1x9wesnh]  .orcanex-btn-primary:hover {
    background: var(--shell-accent, var(--color-accent));
    border-color: var(--shell-accent, var(--color-accent));
}

.public-shell-footer[b-ix1x9wesnh] {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--shell-on-bg-muted, rgba(255, 255, 255, 0.65));
    text-align: center;
    padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
    .public-shell-topbar[b-ix1x9wesnh] { padding: 0 var(--space-4); }
    .public-shell-main[b-ix1x9wesnh] { padding: var(--space-4) 0 0; gap: var(--space-3); }
    .public-shell-column[b-ix1x9wesnh] { padding: 0 var(--space-3); gap: var(--space-3); }
    .public-shell-column[b-ix1x9wesnh]  .orcanex-card { border-radius: var(--radius-md); }
    .public-shell-dob-row[b-ix1x9wesnh] { grid-template-columns: 1fr; gap: var(--space-2); }
    .public-shell-helper[b-ix1x9wesnh] { font-size: 0.78rem; padding: 4px 10px; }
    .public-shell-footer[b-ix1x9wesnh] { padding-top: var(--space-4); }
}

@media (max-width: 380px) {
    .public-shell-helper[b-ix1x9wesnh] { font-size: 0; padding: 6px; }
    .public-shell-helper span > :first-child[b-ix1x9wesnh] {
        font-size: 1.08rem; /* 14px @ 13px baseline — restores the icon glyph */
    }
}

/* ----------- Full-screen call shell -----------
   Guests are unauthenticated so the global theme attributes default to slate;
   sourcing colours from tokens means the chrome automatically adopts that
   default while the stage stays black for the video. */
.public-call-shell[b-ix1x9wesnh] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    overflow: hidden;
}

.public-call-topbar[b-ix1x9wesnh] {
    position: relative;
    z-index: 10;
    height: var(--h-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.public-call-brand[b-ix1x9wesnh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.public-call-mark[b-ix1x9wesnh] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.public-call-mark-orca[b-ix1x9wesnh] {
    background: linear-gradient(135deg, #3FAFA3, #1F6C7A);
}

.public-call-name[b-ix1x9wesnh] {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.public-call-meta[b-ix1x9wesnh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.public-call-stage[b-ix1x9wesnh] {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #000000;
    display: flex;
}

/* <whereby-embed> renders at intrinsic size by default — force it to fill
   the stage. Same treatment as an iframe child. */
.public-call-stage whereby-embed[b-ix1x9wesnh] {
    flex: 1;
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 640px) {
    .public-call-topbar[b-ix1x9wesnh] { padding: 0 var(--space-3); gap: var(--space-2); }
    /* Hide the date-pill on small phones — the brand mark + Connected pill is
       enough chrome; the appointment time eats too much width otherwise. */
    .public-call-meta > :first-child[b-ix1x9wesnh] { display: none; }
    /* Shrink brand name so it doesn't collide with the Connected pill. */
    .public-call-name[b-ix1x9wesnh] { font-size: 0.95rem; }
}
/* /Components/Pages/Sera.razor.rz.scp.css */
/* Clara (Sera) — Orcanex 2-pane layout */

.clara-page[b-62l1b8otba] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* min-height: 0 is required on a flex item whose inner content can
       exceed the parent's available height (here: the .clara-messages
       scroll list). Without it, the flex item's height is calculated
       from intrinsic content size, which can make the composer drift
       off the bottom of the viewport when messages are added. */
    min-height: 0;
    padding: 0 24px 24px;
}

.clara-grid[b-62l1b8otba] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 992px) {
    .clara-grid[b-62l1b8otba] {
        grid-template-columns: 240px 1fr;
    }
}

/* Mobile: collapse to single-column chat. The sidebar (history + pinned
   prompts + avatar) is hidden — recent chats and pinned prompts are best
   reached via the New chat button in the mobile header for now. The chat
   surface fills the viewport so messages are the focus. */
:root[data-viewport="mobile"]   .clara-page[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-page[b-62l1b8otba] {
    padding: 0;
}

/* Defeat the global `.orcanex-frame-content > *:last-child` padding-bottom
   that tokens.css applies for mobile bottom-tab clearance. The Clara page
   handles its own bottom inset via the `::after` spacer on frame-content,
   so the extra 76 px wrapper padding only pushes the composer up off the
   viewport bottom — creating the floating-composer gap. The selector
   matches the global rule's specificity (0,4,0) plus the Blazor scope
   attribute on `.clara-page` → (0,5,0), so it wins the cascade. */
:root[data-viewport="mobile"]   .orcanex-frame-content .clara-page[b-62l1b8otba],
:root[data-viewport="mobile-l"] .orcanex-frame-content .clara-page[b-62l1b8otba] {
    padding-bottom: 0 !important;
}

:root[data-viewport="mobile"]   .clara-grid[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-grid[b-62l1b8otba] {
    grid-template-columns: 1fr;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

:root[data-viewport="mobile"]   .clara-sidebar[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-sidebar[b-62l1b8otba] {
    display: none;
}

/* ─── Sidebar ─── */
.clara-sidebar[b-62l1b8otba] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 14px;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.clara-avatar-block[b-62l1b8otba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.clara-avatar-ring[b-62l1b8otba] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clara-avatar[b-62l1b8otba] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.clara-avatar-status[b-62l1b8otba] {
    margin-top: 4px;
}

/* Sections */
.clara-section[b-62l1b8otba] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clara-section-history[b-62l1b8otba] {
    flex: 1;
    min-height: 0;
}

.clara-section-title[b-62l1b8otba] {
    padding: 0 4px 6px;
}

.clara-prompt-chip[b-62l1b8otba] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out),
                border-color var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-prompt-chip:hover[b-62l1b8otba] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
}

/* Recent chats */
.clara-history-loading[b-62l1b8otba],
.clara-history-empty[b-62l1b8otba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 4px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.clara-history-empty[b-62l1b8otba]  .orcanex-icon {
    color: var(--color-text-subtle);
}

.clara-history-list[b-62l1b8otba] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.clara-history-item[b-62l1b8otba] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-history-item:hover[b-62l1b8otba] {
    background: var(--color-bg);
}

.clara-history-item.is-active[b-62l1b8otba] {
    background: var(--color-accent-soft);
}

.clara-history-item-body[b-62l1b8otba] {
    flex: 1;
    min-width: 0;
}

.clara-history-item-title[b-62l1b8otba] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clara-history-item.is-active .clara-history-item-title[b-62l1b8otba] {
    color: var(--color-accent);
    font-weight: 600;
}

.clara-history-item-meta[b-62l1b8otba] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.77rem;
    color: var(--color-text-muted);
}

.clara-history-item-count[b-62l1b8otba] {
    color: var(--color-text-subtle);
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    padding: 0 6px;
}

.clara-history-item-delete[b-62l1b8otba] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-subtle);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-history-item:hover .clara-history-item-delete[b-62l1b8otba] {
    opacity: 1;
}

.clara-history-item-delete:hover[b-62l1b8otba] {
    color: var(--color-danger);
    background: var(--color-bg);
}

/* ─── Chat surface ─── */
.clara-chat[b-62l1b8otba] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.clara-messages[b-62l1b8otba] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* Welcome state */
.clara-welcome[b-62l1b8otba] {
    margin: 40px auto 0;
    max-width: 720px;
    text-align: center;
}

.clara-welcome-title[b-62l1b8otba] {
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 8px;
}

.clara-welcome-subtitle[b-62l1b8otba] {
    font-size: 1.08rem;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}

.clara-suggestion-grid[b-62l1b8otba] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .clara-suggestion-grid[b-62l1b8otba] {
        grid-template-columns: 1fr;
    }
}

.clara-suggestion-card[b-62l1b8otba] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-hover, 120ms) var(--ease-hover, ease-out),
                background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-suggestion-card:hover[b-62l1b8otba] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.clara-suggestion-icon[b-62l1b8otba] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.clara-suggestion-title[b-62l1b8otba] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.clara-suggestion-body[b-62l1b8otba] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* Messages */
.clara-msg[b-62l1b8otba] {
    display: flex;
    gap: 12px;
    max-width: 100%;
}

.clara-msg-user[b-62l1b8otba] {
    justify-content: flex-end;
}

.clara-msg-bot[b-62l1b8otba] {
    justify-content: flex-start;
}

.clara-msg-avatar[b-62l1b8otba] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clara-msg-content[b-62l1b8otba] {
    max-width: 80%;
    display: flex;
    flex-direction: column;
}

.clara-msg-user .clara-msg-content[b-62l1b8otba] {
    align-items: flex-end;
}

.clara-msg-bot .clara-msg-content[b-62l1b8otba] {
    align-items: flex-start;
}

.clara-msg-bubble[b-62l1b8otba] {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 1rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.clara-msg-user .clara-msg-bubble[b-62l1b8otba] {
    background: var(--color-accent);
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.clara-msg-bot .clara-msg-bubble[b-62l1b8otba] {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-soft);
    border-bottom-left-radius: 2px;
}

.clara-streaming[b-62l1b8otba] {
    border-color: var(--color-accent);
}

.clara-msg-time[b-62l1b8otba] {
    font-size: 0.77rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.clara-msg-attachment-chip[b-62l1b8otba] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-accent-soft);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Queue + thinking */
.clara-queue[b-62l1b8otba],
.clara-thinking[b-62l1b8otba] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: 14px;
    border-bottom-left-radius: 2px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.clara-queue[b-62l1b8otba] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.clara-queue-title[b-62l1b8otba] {
    font-weight: 600;
    color: var(--color-text);
}

.clara-thinking span:not(.clara-thinking-label)[b-62l1b8otba] {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: clara-thinking-pulse-b-62l1b8otba 1.2s ease-in-out infinite;
}

.clara-thinking span:nth-child(2)[b-62l1b8otba] {
    animation-delay: 0.2s;
}

.clara-thinking span:nth-child(3)[b-62l1b8otba] {
    animation-delay: 0.4s;
}

.clara-thinking-label[b-62l1b8otba] {
    margin-left: 4px;
    color: var(--color-text-muted);
    font-style: italic;
}

@keyframes clara-thinking-pulse-b-62l1b8otba {
    0%, 80%, 100% { opacity: 0.4; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

/* Composer */
.clara-composer[b-62l1b8otba] {
    border-top: 1px solid var(--color-border);
    padding: 14px 24px 18px;
    background: var(--color-panel);
}

.clara-attached-file[b-62l1b8otba] {
    margin-bottom: 8px;
}

.clara-attached-file-chip[b-62l1b8otba] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-accent-soft);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    font-size: 0.85rem;
}

.clara-attached-file-name[b-62l1b8otba] {
    font-weight: 500;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clara-attached-file-remove[b-62l1b8otba] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.clara-composer-shell[b-62l1b8otba] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-composer-shell:focus-within[b-62l1b8otba] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.clara-composer-attach[b-62l1b8otba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-composer-attach:hover[b-62l1b8otba] {
    background: var(--color-panel);
    color: var(--color-text);
}

.clara-composer-attach.is-disabled[b-62l1b8otba] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.clara-composer-input[b-62l1b8otba] {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
    min-height: 24px;
    max-height: 200px;
    padding: 6px 0;
    line-height: 1.5;
}

.clara-composer-input[b-62l1b8otba]::placeholder {
    color: var(--color-text-subtle);
}

.clara-composer-send[b-62l1b8otba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: #ffffff;
    cursor: pointer;
    transition: background var(--duration-hover, 120ms) var(--ease-hover, ease-out);
}

.clara-composer-send:hover:not(:disabled)[b-62l1b8otba] {
    background: #2453d6;
}

.clara-composer-send:disabled[b-62l1b8otba] {
    background: var(--color-text-subtle);
    cursor: not-allowed;
}

.clara-composer-hint[b-62l1b8otba] {
    text-align: center;
    font-size: 0.77rem;
    color: var(--color-text-subtle);
    margin: 8px 0 0;
}

/* Avatar state classes preserved for the Vanta integration */
.clara-avatar-block.is-thinking .clara-avatar-ring[b-62l1b8otba],
.clara-avatar-block.is-streaming .clara-avatar-ring[b-62l1b8otba] {
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

/* Mobile: tighter padding on messages and composer; widen bubbles to use
   available width; respect safe-area-inset on the composer so the send
   button isn't obscured by the home indicator on iOS. The mobile shell
   already pads the frame for the bottom-tab strip, so we only need the
   inset here. */
:root[data-viewport="mobile"]   .clara-messages[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-messages[b-62l1b8otba] {
    padding: var(--space-3) var(--space-3);
    gap: var(--space-3);
}

:root[data-viewport="mobile"]   .clara-msg-content[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-msg-content[b-62l1b8otba] {
    max-width: calc(100% - 40px);
}

:root[data-viewport="mobile"]   .clara-composer[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-composer[b-62l1b8otba] {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}

:root[data-viewport="mobile"]   .clara-composer-attach[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-composer-attach[b-62l1b8otba],
:root[data-viewport="mobile"]   .clara-composer-send[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-composer-send[b-62l1b8otba] {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
}

/* Welcome state — collapse to single-column suggestion grid earlier on
   small viewports and shrink the title so it fits a 375px phone cleanly. */
:root[data-viewport="mobile"]   .clara-welcome[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-welcome[b-62l1b8otba] {
    margin-top: var(--space-4);
}

:root[data-viewport="mobile"]   .clara-welcome-title[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-welcome-title[b-62l1b8otba] {
    font-size: 1.38rem;
}

:root[data-viewport="mobile"]   .clara-welcome-subtitle[b-62l1b8otba],
:root[data-viewport="mobile-l"] .clara-welcome-subtitle[b-62l1b8otba] {
    font-size: 1rem;
    margin-bottom: var(--space-4);
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.orcanex-settings[b-4k9fgjrz7v] {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mobile — drop the desktop max-width + generous padding so the
   MobileTabPicker trigger and the body cards stretch to the full
   viewport width. The user reported the picker looked like "a thin
   line" — that's the trigger rendering inside a narrow padded column
   instead of spanning the row. */
:root[data-viewport="mobile"]   .orcanex-settings[b-4k9fgjrz7v],
:root[data-viewport="mobile-l"] .orcanex-settings[b-4k9fgjrz7v] {
    max-width: none;
    margin: 0;
    padding: 0 var(--space-2) var(--space-3);
    gap: var(--space-2);
}

/* Defeat the global `.orcanex-frame-content > *:last-child`
   padding-bottom that tokens.css applies for the mobile bottom-tab
   clearance — the page already scrolls inside its own wrapper and
   the ::after spacer on frame-content gives the actual bottom-tab
   inset. Specificity (0,4,0) + Blazor scope → (0,5,0) wins over
   the global (0,4,0). */
:root[data-viewport="mobile"]   .orcanex-frame-content > .orcanex-settings[b-4k9fgjrz7v],
:root[data-viewport="mobile-l"] .orcanex-frame-content > .orcanex-settings[b-4k9fgjrz7v] {
    padding-bottom: 0 !important;
}

/* MobileTabPicker trigger — by default the picker draws only a
   bottom border (designed to sit flush at the top of the content
   area). Inside the Settings page we want it to read as a more
   prominent "current section" control, so add side borders too,
   round the corners, and give it a small horizontal margin so it
   doesn't butt up against the screen edge. */
:root[data-viewport="mobile"]   .orcanex-settings[b-4k9fgjrz7v]  .orcanex-mobile-tab-picker-trigger,
:root[data-viewport="mobile-l"] .orcanex-settings[b-4k9fgjrz7v]  .orcanex-mobile-tab-picker-trigger {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: var(--space-2) 0;
}

.orcanex-settings-tabs[b-4k9fgjrz7v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-self: flex-start;
    flex-wrap: wrap;
}

.orcanex-settings-tab[b-4k9fgjrz7v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: var(--h-button-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-settings-tab:hover[b-4k9fgjrz7v] {
    color: var(--color-text);
    background: var(--color-bg);
}

.orcanex-settings-tab-active[b-4k9fgjrz7v] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-settings-tab-active:hover[b-4k9fgjrz7v] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-settings-section-help[b-4k9fgjrz7v] {
    margin: 0 0 var(--space-4);
    font-size: 1rem;
    color: var(--color-text-muted);
}

/* Theme picker */
.orcanex-settings-themes[b-4k9fgjrz7v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .orcanex-settings-themes[b-4k9fgjrz7v] {
        grid-template-columns: 1fr;
    }
}

.orcanex-settings-theme[b-4k9fgjrz7v] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover);
}

.orcanex-settings-theme:hover[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
}

.orcanex-settings-theme-active[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.orcanex-settings-theme-preview[b-4k9fgjrz7v] {
    height: 72px;
    border-radius: var(--radius-sm);
    display: flex;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.orcanex-settings-theme-light[b-4k9fgjrz7v] { background: #FFFFFF; }
.orcanex-settings-theme-light .orcanex-settings-theme-sidebar[b-4k9fgjrz7v] { width: 25%; background: #F7F8FA; border-right: 1px solid #E6E8EC; }
.orcanex-settings-theme-light .orcanex-settings-theme-line[b-4k9fgjrz7v] { background: #E6E8EC; }

.orcanex-settings-theme-dark[b-4k9fgjrz7v] { background: #0F1115; }
.orcanex-settings-theme-dark .orcanex-settings-theme-sidebar[b-4k9fgjrz7v] { width: 25%; background: #1A1D24; border-right: 1px solid #2A2D34; }
.orcanex-settings-theme-dark .orcanex-settings-theme-line[b-4k9fgjrz7v] { background: #2A2D34; }

.orcanex-settings-theme-system[b-4k9fgjrz7v] { background: linear-gradient(90deg, #FFFFFF 50%, #0F1115 50%); }
.orcanex-settings-theme-system .orcanex-settings-theme-sidebar[b-4k9fgjrz7v] { width: 25%; background: linear-gradient(90deg, #F7F8FA 50%, #1A1D24 50%); border-right: 1px solid #E6E8EC; }
.orcanex-settings-theme-system .orcanex-settings-theme-line[b-4k9fgjrz7v] { background: linear-gradient(90deg, #E6E8EC 50%, #2A2D34 50%); }

.orcanex-settings-theme-content[b-4k9fgjrz7v] {
    flex: 1;
    padding: 8px;
}

.orcanex-settings-theme-line[b-4k9fgjrz7v] {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 4px;
}

.orcanex-settings-theme-line-short[b-4k9fgjrz7v] {
    width: 60%;
}

.orcanex-settings-theme-label[b-4k9fgjrz7v] {
    margin-top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
}

/* Toggle rows */
.orcanex-settings-toggle-list[b-4k9fgjrz7v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.orcanex-settings-toggle-row[b-4k9fgjrz7v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.orcanex-settings-toggle-row + .orcanex-settings-toggle-row[b-4k9fgjrz7v] {
    border-top: 1px solid var(--color-border-soft);
}

.orcanex-settings-toggle-text[b-4k9fgjrz7v] {
    flex: 1;
    min-width: 0;
}

.orcanex-settings-toggle-title[b-4k9fgjrz7v] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
}

.orcanex-settings-toggle-help[b-4k9fgjrz7v] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.orcanex-settings-timeout[b-4k9fgjrz7v] {
    margin-top: var(--space-4);
    max-width: 280px;
}

.orcanex-settings-actions-row[b-4k9fgjrz7v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.orcanex-settings-banner[b-4k9fgjrz7v] {
    margin-top: var(--space-4);
}

/* Loading state */
.orcanex-settings-loading[b-4k9fgjrz7v] {
    text-align: center;
    padding: var(--space-7) var(--space-5);
}

.orcanex-settings-loading-spinner[b-4k9fgjrz7v] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: orcanex-settings-spin-b-4k9fgjrz7v 0.9s linear infinite;
    margin: 0 auto var(--space-3);
}

.orcanex-settings-loading-text[b-4k9fgjrz7v] {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

@keyframes orcanex-settings-spin-b-4k9fgjrz7v {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Generic radio-card grid — used for density, font-scale, list mode.
   ============================================================ */
.orcanex-settings-radio-grid[b-4k9fgjrz7v] {
    display: grid;
    gap: var(--space-3);
}

.orcanex-settings-radio-grid-2[b-4k9fgjrz7v] { grid-template-columns: repeat(2, 1fr); }
.orcanex-settings-radio-grid-3[b-4k9fgjrz7v] { grid-template-columns: repeat(3, 1fr); }
.orcanex-settings-radio-grid-4[b-4k9fgjrz7v] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
    .orcanex-settings-radio-grid-2[b-4k9fgjrz7v],
    .orcanex-settings-radio-grid-3[b-4k9fgjrz7v],
    .orcanex-settings-radio-grid-4[b-4k9fgjrz7v] { grid-template-columns: 1fr; }
}

.orcanex-settings-radio[b-4k9fgjrz7v] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover);
    font: inherit;
    color: inherit;
}

.orcanex-settings-radio:hover[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
}

.orcanex-settings-radio-active[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.orcanex-settings-radio-preview[b-4k9fgjrz7v] {
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 8px;
    overflow: hidden;
}

.orcanex-settings-radio-label[b-4k9fgjrz7v] {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 1rem;
    color: var(--color-text);
}

.orcanex-settings-radio-label > span[b-4k9fgjrz7v] {
    font-weight: 500;
}

.orcanex-settings-radio-label > small[b-4k9fgjrz7v] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ============================================================
   Density preview — three rows whose height grows with density.
   ============================================================ */
.orcanex-settings-density-preview-compact .orcanex-settings-density-row[b-4k9fgjrz7v] { height: 6px; margin-bottom: 4px; }
.orcanex-settings-density-preview-comfortable .orcanex-settings-density-row[b-4k9fgjrz7v] { height: 9px; margin-bottom: 6px; }
.orcanex-settings-density-preview-large .orcanex-settings-density-row[b-4k9fgjrz7v] { height: 12px; margin-bottom: 8px; }

.orcanex-settings-density-row[b-4k9fgjrz7v] {
    background: var(--color-border);
    border-radius: 3px;
}

/* ============================================================
   Font preview — single Aa whose size grows with the scale.
   ============================================================ */
.orcanex-settings-font-preview[b-4k9fgjrz7v] {
    align-items: center;
    justify-content: center;
}

.orcanex-settings-font-preview-text[b-4k9fgjrz7v] {
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-family);
    line-height: 1;
}

.orcanex-settings-font-preview-text-small[b-4k9fgjrz7v]  { font-size: 1.23rem; }
.orcanex-settings-font-preview-text-medium[b-4k9fgjrz7v] { font-size: 1.54rem; }
.orcanex-settings-font-preview-text-large[b-4k9fgjrz7v]  { font-size: 1.85rem; }
.orcanex-settings-font-preview-text-xlarge[b-4k9fgjrz7v] { font-size: 2.31rem; }

/* ============================================================
   Accent picker — circular swatches in a grid.
   The --seg-color variables follow the same semantics as the
   segment cards so this picker visually matches the global accent
   palette defined in tokens.css.
   ============================================================ */
.orcanex-settings-accent-grid[b-4k9fgjrz7v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-3);
}

.orcanex-settings-accent[b-4k9fgjrz7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover);
    font: inherit;
    color: inherit;
}

.orcanex-settings-accent:hover[b-4k9fgjrz7v] { border-color: var(--color-accent); }

.orcanex-settings-accent-active[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.orcanex-settings-accent-swatch[b-4k9fgjrz7v] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.08);
}

/* Accent swatch colours — mirror the palette in tokens.css. These are
   raw hex on purpose so the swatch always shows its true colour
   regardless of the user's currently-applied accent. */
.orcanex-settings-accent[data-accent-preview="blue"]    .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #2F62FF; }
.orcanex-settings-accent[data-accent-preview="teal"]    .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #0E8F8F; }
.orcanex-settings-accent[data-accent-preview="indigo"]  .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #5C4DE0; }
.orcanex-settings-accent[data-accent-preview="violet"]  .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #7C3AED; }
.orcanex-settings-accent[data-accent-preview="magenta"] .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #C8359E; }
.orcanex-settings-accent[data-accent-preview="pink"]    .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #E14B89; }
.orcanex-settings-accent[data-accent-preview="crimson"] .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #C0322B; }
.orcanex-settings-accent[data-accent-preview="amber"]   .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #B6781F; }
.orcanex-settings-accent[data-accent-preview="forest"]  .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #286A47; }
.orcanex-settings-accent[data-accent-preview="slate"]    .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #475569; }
.orcanex-settings-accent[data-accent-preview="cyan"]     .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #06B6D4; }
.orcanex-settings-accent[data-accent-preview="emerald"]  .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #10B981; }
.orcanex-settings-accent[data-accent-preview="rose"]     .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #F43F5E; }
.orcanex-settings-accent[data-accent-preview="navy"]     .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #1E3A8A; }
.orcanex-settings-accent[data-accent-preview="graphite"] .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #3F3F46; }
.orcanex-settings-accent[data-accent-preview="copper"]   .orcanex-settings-accent-swatch[b-4k9fgjrz7v] { background: #B45309; }

.orcanex-settings-accent-label[b-4k9fgjrz7v] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
}

/* ============================================================
   List mode preview — card vs tabular.
   ============================================================ */
.orcanex-settings-list-preview-card[b-4k9fgjrz7v] {
    gap: 4px;
    padding: 6px;
}

.orcanex-settings-list-preview-card .orcanex-settings-list-preview-row[b-4k9fgjrz7v] {
    height: 12px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.orcanex-settings-list-preview-tabular[b-4k9fgjrz7v] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0;
    gap: 0;
}

.orcanex-settings-list-preview-tabular .orcanex-settings-list-preview-row[b-4k9fgjrz7v] {
    height: 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-settings-list-preview-tabular .orcanex-settings-list-preview-row:last-child[b-4k9fgjrz7v] {
    border-bottom: none;
}

/* ============================================================
   Sidebar preview — mini representation of the rail in compact
   vs expanded mode. The dark "rail" pillar uses --color-rail-bg
   so it follows the user's accent (same as the live rail), and
   the active row picks up --color-accent so the preview reads
   as theirs too.
   ============================================================ */
.orcanex-settings-sidebar-preview[b-4k9fgjrz7v] {
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0;
    background: var(--color-bg);
    overflow: hidden;
}

.orcanex-settings-sidebar-preview-rail[b-4k9fgjrz7v] {
    background: var(--color-rail-bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.orcanex-settings-sidebar-preview-content[b-4k9fgjrz7v] {
    flex: 1;
    background: var(--color-panel);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 1px solid var(--color-border-soft);
}

.orcanex-settings-sidebar-preview-content-line[b-4k9fgjrz7v] {
    height: 5px;
    width: 80%;
    background: var(--color-border);
    border-radius: 2px;
}

.orcanex-settings-sidebar-preview-content-line-short[b-4k9fgjrz7v] {
    width: 50%;
}

/* Compact mini-rail — narrow column with three icon dots. */
.orcanex-settings-sidebar-preview-compact .orcanex-settings-sidebar-preview-rail[b-4k9fgjrz7v] {
    width: 18px;
    padding: 6px 4px;
    align-items: center;
}

.orcanex-settings-sidebar-preview-compact .orcanex-settings-sidebar-preview-brand[b-4k9fgjrz7v] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    margin-bottom: 4px;
}

.orcanex-settings-sidebar-preview-compact .orcanex-settings-sidebar-preview-row[b-4k9fgjrz7v] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.30);
}

.orcanex-settings-sidebar-preview-compact .orcanex-settings-sidebar-preview-row-active[b-4k9fgjrz7v] {
    background: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent-ring);
}

/* Expanded mini-rail — wide column with labels (bars) and indented sub-items. */
.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-rail[b-4k9fgjrz7v] {
    width: 56%;
    padding: 6px 6px 6px 8px;
    align-items: stretch;
}

.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-brand[b-4k9fgjrz7v] {
    height: 10px;
    width: 70%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}

.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-row[b-4k9fgjrz7v] {
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.30);
}

.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-row:nth-of-type(2)[b-4k9fgjrz7v] { width: 75%; }
.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-row:nth-of-type(3)[b-4k9fgjrz7v] { width: 60%; }

.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-row-active[b-4k9fgjrz7v] {
    background: var(--color-accent);
    width: 80% !important;
}

.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-sub[b-4k9fgjrz7v] {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.20);
    margin-left: 12px;
}

.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-sub:nth-of-type(5)[b-4k9fgjrz7v] { width: 55%; }
.orcanex-settings-sidebar-preview-expanded .orcanex-settings-sidebar-preview-sub:nth-of-type(6)[b-4k9fgjrz7v] { width: 45%; }

/* ============================================================
   Toast position picker — a 3×3 grid styled like a tiny screen.
   The 6 corners/edges are clickable; the middle row is empty
   (toasts never appear vertically centred). The "screen" has a
   subtle frame so the metaphor reads instantly.
   ============================================================ */
.orcanex-settings-toast-screen[b-4k9fgjrz7v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 64px);
    gap: 6px;
    padding: 14px;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    max-width: 480px;
    aspect-ratio: 16 / 9;
}

.orcanex-settings-toast-cell[b-4k9fgjrz7v] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    font: inherit;
    color: var(--color-text-muted);
    transition: border-color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

.orcanex-settings-toast-cell:hover[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.orcanex-settings-toast-cell.is-active[b-4k9fgjrz7v] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-settings-toast-cell-label[b-4k9fgjrz7v] {
    font-size: 0.77rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
}

/* The 6 valid positions are placed on the 3×3 grid. Rows 1 and 3 are the
   top/bottom toast rows; the middle row is left empty by absence of cells. */
.orcanex-settings-toast-cell-top-left[b-4k9fgjrz7v]      { grid-column: 1; grid-row: 1; }
.orcanex-settings-toast-cell-top-center[b-4k9fgjrz7v]    { grid-column: 2; grid-row: 1; }
.orcanex-settings-toast-cell-top-right[b-4k9fgjrz7v]     { grid-column: 3; grid-row: 1; }
.orcanex-settings-toast-cell-bottom-left[b-4k9fgjrz7v]   { grid-column: 1; grid-row: 3; }
.orcanex-settings-toast-cell-bottom-center[b-4k9fgjrz7v] { grid-column: 2; grid-row: 3; }
.orcanex-settings-toast-cell-bottom-right[b-4k9fgjrz7v]  { grid-column: 3; grid-row: 3; }

/* Tiny "toast pill" preview inside each cell */
.orcanex-settings-toast-dot[b-4k9fgjrz7v] {
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background: currentColor;
    opacity: 0.45;
}

.orcanex-settings-toast-cell.is-active .orcanex-settings-toast-dot[b-4k9fgjrz7v] {
    opacity: 1;
}

/* ============================================================
   Account / Regional grid — two columns of fields on desktop.
   ============================================================ */
.orcanex-settings-account-grid[b-4k9fgjrz7v] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-4);
}

@media (max-width: 640px) {
    .orcanex-settings-account-grid[b-4k9fgjrz7v] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Support.razor.rz.scp.css */
.orcanex-support[b-ziqxmwp3c5] {
    padding: var(--space-5);
}

.orcanex-support-grid[b-ziqxmwp3c5] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 960px) {
    .orcanex-support-grid[b-ziqxmwp3c5] {
        grid-template-columns: 1fr;
    }
}

.orcanex-support-main[b-ziqxmwp3c5],
.orcanex-support-side[b-ziqxmwp3c5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Form */
.orcanex-support-form[b-ziqxmwp3c5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.orcanex-support-grid-2[b-ziqxmwp3c5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .orcanex-support-grid-2[b-ziqxmwp3c5] {
        grid-template-columns: 1fr;
    }
}

.orcanex-support-textarea[b-ziqxmwp3c5] {
    min-height: 140px;
    resize: vertical;
}

.orcanex-support-invalid[b-ziqxmwp3c5] {
    color: var(--color-danger);
    font-size: 0.92rem;
    margin-top: var(--space-1);
}

.orcanex-support-checkbox-row[b-ziqxmwp3c5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.orcanex-support-checkbox-help[b-ziqxmwp3c5] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: 50px;
}

.orcanex-support-actions[b-ziqxmwp3c5] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
    margin-top: var(--space-2);
}

/* Success state */
.orcanex-support-success[b-ziqxmwp3c5] {
    text-align: center;
}

.orcanex-support-success-icon[b-ziqxmwp3c5] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-success-soft);
    color: var(--color-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-4) 0 var(--space-3);
}

.orcanex-support-success-title[b-ziqxmwp3c5] {
    margin: 0 0 var(--space-2);
    font-size: 1.38rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.2px;
}

.orcanex-support-success-body[b-ziqxmwp3c5] {
    margin: 0 0 var(--space-5);
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.orcanex-support-success-actions[b-ziqxmwp3c5] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-3);
}

/* Side panels */
.orcanex-support-user[b-ziqxmwp3c5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.orcanex-support-user-avatar[b-ziqxmwp3c5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.orcanex-support-user-text[b-ziqxmwp3c5] {
    min-width: 0;
}

.orcanex-support-user-name[b-ziqxmwp3c5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.orcanex-support-user-email[b-ziqxmwp3c5] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.orcanex-support-note[b-ziqxmwp3c5] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.orcanex-support-help-intro[b-ziqxmwp3c5] {
    margin: 0 0 var(--space-3);
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-support-help-list[b-ziqxmwp3c5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.orcanex-support-help-link[b-ziqxmwp3c5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    color: var(--color-accent);
    text-decoration: none;
}

.orcanex-support-help-link:hover[b-ziqxmwp3c5] {
    text-decoration: underline;
}

.orcanex-support-contact[b-ziqxmwp3c5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
/* /Components/Pages/Tools/Forms/FormBuilder.razor.rz.scp.css */
/* Question Types Grid */
.question-types-grid[b-xzefeyn70b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.question-type-btn[b-xzefeyn70b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 0.375rem;
}

.question-type-btn:hover[b-xzefeyn70b] {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    transform: translateY(-1px);
}

.question-type-btn i[b-xzefeyn70b] {
    font-size: 1.25rem;
}

.question-type-btn span[b-xzefeyn70b] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #475569;
    text-align: center;
}

/* Question Canvas */
.question-canvas[b-xzefeyn70b] {
    min-height: 400px;
    background: #f8fafc;
    border-radius: 8px;
}

.empty-canvas[b-xzefeyn70b] {
    background: white;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    margin: 1rem;
}

/* Questions List */
.questions-list[b-xzefeyn70b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Question Card */
.question-card[b-xzefeyn70b] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
}

.question-card:hover[b-xzefeyn70b] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.question-card.selected[b-xzefeyn70b] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.question-card-header[b-xzefeyn70b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.question-number[b-xzefeyn70b] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50%;
}

.question-type-badge[b-xzefeyn70b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.question-type-badge i[b-xzefeyn70b] {
    font-size: 0.875rem;
}

.question-actions[b-xzefeyn70b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-icon[b-xzefeyn70b] {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 4px;
    transition: all 0.1s ease;
}

.btn-icon:hover:not(:disabled)[b-xzefeyn70b] {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-icon:disabled[b-xzefeyn70b] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon.text-danger:hover:not(:disabled)[b-xzefeyn70b] {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.question-card-body[b-xzefeyn70b] {
    padding: 0.875rem;
}

.question-text-input[b-xzefeyn70b] {
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 0;
    background: transparent;
}

.question-text-input:focus[b-xzefeyn70b] {
    box-shadow: none;
    border-bottom-color: var(--bs-primary);
    background: transparent;
}

.help-text-input[b-xzefeyn70b] {
    font-size: 0.8125rem;
    color: #64748b;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0;
    background: transparent;
}

.help-text-input:focus[b-xzefeyn70b] {
    box-shadow: none;
    border-bottom: 1px dashed #cbd5e1;
    background: transparent;
}

.help-text-input[b-xzefeyn70b]::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* Options Editor */
.options-editor[b-xzefeyn70b] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

/* Branching Section */
.branching-section[b-xzefeyn70b] {
    border: 1px solid #e2e8f0;
}

/* Form Control Color Picker */
.form-control-color[b-xzefeyn70b] {
    height: 32px;
    padding: 2px;
}

/* Accordion Styling */
.accordion-button:not(.collapsed)[b-xzefeyn70b] {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.accordion-button:focus[b-xzefeyn70b] {
    box-shadow: none;
}

.accordion-button[b-xzefeyn70b]::after {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

/* Modal Adjustments */
.modal-xl[b-xzefeyn70b] {
    max-width: 1000px;
}

/* Loading */
.spinner-border[b-xzefeyn70b] {
    width: 2rem;
    height: 2rem;
}
/* /Components/Pages/Tools/Forms/FormPreview.razor.rz.scp.css */
/* Form Preview Container */
.form-preview-container[b-jzwbcrzy8y] {
    /*min-height: 100%;*/
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Form Header */
.form-preview-header[b-jzwbcrzy8y] {
    padding: 2rem;
    text-align: center;
    color: white;
}

.form-logo[b-jzwbcrzy8y] {
    max-height: 60px;
    max-width: 200px;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.form-title[b-jzwbcrzy8y] {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-description[b-jzwbcrzy8y] {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

/* Progress Bar */
.form-progress[b-jzwbcrzy8y] {
    padding: 1rem 2rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.progress-bar-container[b-jzwbcrzy8y] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill[b-jzwbcrzy8y] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-jzwbcrzy8y] {
    font-size: 0.75rem;
    color: #64748b;
    text-align: right;
    margin-top: 0.5rem;
}

/* Questions */
.form-questions[b-jzwbcrzy8y] {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.question-preview[b-jzwbcrzy8y] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.question-preview.current[b-jzwbcrzy8y] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.question-header[b-jzwbcrzy8y] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.question-number-badge[b-jzwbcrzy8y] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

.question-text-container[b-jzwbcrzy8y] {
    flex: 1;
}

.question-text[b-jzwbcrzy8y] {
    font-size: 1.0625rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;
}

.required-indicator[b-jzwbcrzy8y] {
    font-weight: 700;
    margin-left: 0.25rem;
}

.question-help-text[b-jzwbcrzy8y] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.question-help-text i[b-jzwbcrzy8y] {
    margin-top: 2px;
    flex-shrink: 0;
}

.question-input[b-jzwbcrzy8y] {
    margin-left: 2.75rem;
}

/* Child Question Styling */
.question-preview.child-question[b-jzwbcrzy8y] {
    margin-left: 1.5rem;
    border-left: 3px solid var(--bs-secondary, #6c757d);
    background: linear-gradient(135deg, rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.03) 0%, transparent 100%);
}

.question-preview.child-question .question-number-badge[b-jzwbcrzy8y] {
    width: 24px;
    height: 24px;
    font-size: 0.6875rem;
}

/* Choice Options - Interactive */
.choice-options[b-jzwbcrzy8y] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.choice-option[b-jzwbcrzy8y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.choice-option:hover[b-jzwbcrzy8y] {
    border-color: #cbd5e1;
    background: white;
}

.choice-option.selected[b-jzwbcrzy8y] {
    border-color: var(--accent-color, var(--bs-primary));
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.choice-radio[b-jzwbcrzy8y] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.15s ease;
    position: relative;
}

.choice-radio.checked[b-jzwbcrzy8y] {
    border-color: var(--accent-color, var(--bs-primary));
}

.choice-radio.checked[b-jzwbcrzy8y]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--accent-color, var(--bs-primary));
    border-radius: 50%;
}

.choice-checkbox[b-jzwbcrzy8y] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.choice-checkbox.checked[b-jzwbcrzy8y] {
    border-color: var(--accent-color, var(--bs-primary));
    background: var(--accent-color, var(--bs-primary));
    color: white;
}

.choice-label[b-jzwbcrzy8y] {
    font-size: 0.9375rem;
    color: #334155;
}

/* Yes/No Options - Interactive */
.yesno-options[b-jzwbcrzy8y] {
    display: flex;
    gap: 1rem;
}

.yesno-btn[b-jzwbcrzy8y] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    font-size: 1rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.yesno-btn:hover[b-jzwbcrzy8y] {
    border-color: var(--accent-color, var(--bs-primary));
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.yesno-btn.selected[b-jzwbcrzy8y] {
    border-color: var(--accent-color, var(--bs-primary));
    background: var(--accent-color, var(--bs-primary));
    color: white;
}

.yesno-btn i[b-jzwbcrzy8y] {
    font-size: 1.25rem;
}

/* Rating - Interactive */
.rating-preview[b-jzwbcrzy8y] {
    display: flex;
    gap: 0.5rem;
}

.rating-btn[b-jzwbcrzy8y] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rating-btn:hover[b-jzwbcrzy8y] {
    border-color: var(--accent-color, #f59e0b);
    transform: scale(1.1);
}

.rating-btn i[b-jzwbcrzy8y] {
    font-size: 1.25rem;
    color: #cbd5e1;
    transition: color 0.15s ease;
}

.rating-btn:hover i[b-jzwbcrzy8y],
.rating-btn.selected i[b-jzwbcrzy8y] {
    color: var(--accent-color, #f59e0b);
}

.rating-btn.selected[b-jzwbcrzy8y] {
    border-color: var(--accent-color, #f59e0b);
    background: rgba(251, 191, 36, 0.1);
}

/* Likert Scale - Interactive */
.likert-scale[b-jzwbcrzy8y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.likert-labels[b-jzwbcrzy8y] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: #64748b;
}

.likert-options[b-jzwbcrzy8y] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.likert-option[b-jzwbcrzy8y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

.likert-option:hover[b-jzwbcrzy8y] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.likert-option.selected[b-jzwbcrzy8y] {
    border-color: var(--accent-color, var(--bs-primary));
    background: var(--accent-color, var(--bs-primary));
    color: white;
}

.likert-value[b-jzwbcrzy8y] {
    font-size: 1rem;
    font-weight: 600;
}

/* Ranking */
.ranking-preview[b-jzwbcrzy8y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ranking-item[b-jzwbcrzy8y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ranking-handle[b-jzwbcrzy8y] {
    color: #94a3b8;
    cursor: grab;
}

.ranking-position[b-jzwbcrzy8y] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.ranking-text[b-jzwbcrzy8y] {
    flex: 1;
    font-size: 0.9375rem;
    color: #334155;
}

/* Section Divider */
.section-divider[b-jzwbcrzy8y] {
    border-top: 2px solid;
    margin: 1rem 0;
}

/* Signature */
.signature-preview .signature-pad[b-jzwbcrzy8y] {
    height: 120px;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.signature-preview .signature-pad:hover[b-jzwbcrzy8y] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.03);
    color: var(--bs-primary);
}

.signature-preview .signature-pad.signed[b-jzwbcrzy8y] {
    border-style: solid;
    border-color: var(--bs-success);
    background: rgba(25, 135, 84, 0.05);
}

.signature-preview .signature-pad.signed:hover[b-jzwbcrzy8y] {
    border-color: var(--bs-danger);
    background: rgba(220, 53, 69, 0.05);
}

.signature-display[b-jzwbcrzy8y] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-text[b-jzwbcrzy8y] {
    font-family: 'Brush Script MT', cursive;
    font-size: 1.75rem;
    color: #1e293b;
}

.signature-clear-hint[b-jzwbcrzy8y] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.signature-pad.signed:hover .signature-clear-hint[b-jzwbcrzy8y] {
    color: var(--bs-danger);
}

.signature-pad i[b-jzwbcrzy8y] {
    font-size: 2rem;
}

.signature-input[b-jzwbcrzy8y] {
    text-align: center;
}

.signature-preview-box[b-jzwbcrzy8y] {
    background: #f8fafc;
}

/* File Upload */
.file-upload-preview[b-jzwbcrzy8y] {
    padding: 2rem;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    text-align: center;
    color: #94a3b8;
    cursor: pointer;
}

.file-upload-preview i[b-jzwbcrzy8y] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Form Navigation */
.form-navigation[b-jzwbcrzy8y] {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-top: 1px solid #e2e8f0;
    background: white;
    position: sticky;
    bottom: 0;
}

.no-questions[b-jzwbcrzy8y] {
    color: #64748b;
}

/* Validation Error */
.validation-error[b-jzwbcrzy8y] {
    padding: 0.5rem 0.75rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-left: 2.75rem;
}
/* /Components/Pages/Tools/Forms/FormTemplates.razor.rz.scp.css */
.orcanex-page-body[b-1iijwtkgwb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    flex: 1;
}

/* Mobile: tighter outer padding so the card grid uses the full viewport. */
:root[data-viewport="mobile"]   .orcanex-page-body[b-1iijwtkgwb],
:root[data-viewport="mobile-l"] .orcanex-page-body[b-1iijwtkgwb] {
    padding: var(--space-3);
}

.forms-filter-row[b-1iijwtkgwb] {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--space-3);
    align-items: end;
}

/* Mobile: collapse the filter row to a single column so search and
   status filter don't crush each other on a 375 px phone. */
:root[data-viewport="mobile"]   .forms-filter-row[b-1iijwtkgwb],
:root[data-viewport="mobile-l"] .forms-filter-row[b-1iijwtkgwb] {
    grid-template-columns: 1fr;
}

.forms-kpi-strip[b-1iijwtkgwb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .forms-kpi-strip[b-1iijwtkgwb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.forms-card-grid[b-1iijwtkgwb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.forms-template-card[b-1iijwtkgwb] {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.forms-template-card:hover[b-1iijwtkgwb] {
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

.forms-template-actions[b-1iijwtkgwb] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.forms-template-delete[b-1iijwtkgwb] {
    color: var(--color-danger);
}

.forms-template-body[b-1iijwtkgwb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.forms-template-thumb[b-1iijwtkgwb] {
    width: 40px;
    height: 40px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.forms-template-name[b-1iijwtkgwb] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.forms-template-desc[b-1iijwtkgwb] {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forms-template-meta[b-1iijwtkgwb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.forms-template-counts[b-1iijwtkgwb] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.forms-template-modified[b-1iijwtkgwb] {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
}

/* Public link modal */
.forms-link-title[b-1iijwtkgwb] {
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.forms-link-input[b-1iijwtkgwb] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

.forms-link-input input.form-control[b-1iijwtkgwb] {
    flex: 1;
}

.forms-link-open[b-1iijwtkgwb] {
    display: flex;
    justify-content: flex-start;
}
/* /Components/Pages/Tools/Forms/PublicForm.razor.rz.scp.css */
/* ===========================================================================
   Public form — minimal branded layout for token-driven public form rendering.
   Mirrors the visual language of the consent-form public shell.
   =========================================================================== */

[b-5fi1dhk6fb] .public-form-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
}

[b-5fi1dhk6fb] .public-form-topbar {
    height: var(--h-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
}

[b-5fi1dhk6fb] .public-form-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

[b-5fi1dhk6fb] .public-form-brand-logo {
    max-height: 28px;
    width: auto;
}

[b-5fi1dhk6fb] .public-form-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-5fi1dhk6fb] .public-form-mark-orca {
    background: linear-gradient(135deg, #3FAFA3, #1F6C7A);
}

[b-5fi1dhk6fb] .public-form-name {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

[b-5fi1dhk6fb] .public-form-helper {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

[b-5fi1dhk6fb] .public-form-helper span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

[b-5fi1dhk6fb] .public-form-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-7) var(--space-5);
    gap: var(--space-5);
}

[b-5fi1dhk6fb] .public-form-column {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

[b-5fi1dhk6fb] .public-form-loading-card {
    text-align: center;
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

[b-5fi1dhk6fb] .public-form-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    animation: public-form-spin-b-5fi1dhk6fb 0.9s linear infinite;
}

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

[b-5fi1dhk6fb] .public-form-muted {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

[b-5fi1dhk6fb] .public-form-intro {
    text-align: left;
}

[b-5fi1dhk6fb] .public-form-title {
    margin: 0 0 var(--space-2);
    font-size: 1.54rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--color-text);
}

[b-5fi1dhk6fb] .public-form-description {
    margin: 0 0 var(--space-4);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

[b-5fi1dhk6fb] .public-form-progress {
    margin-top: var(--space-4);
}

[b-5fi1dhk6fb] .public-form-progress-track {
    height: 6px;
    background: var(--color-border-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

[b-5fi1dhk6fb] .public-form-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    transition: width 0.4s var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-help {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-soft);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}

[b-5fi1dhk6fb] .public-form-input {
    margin-top: var(--space-2);
}

/* ---- Choice / multi-choice options ---- */
[b-5fi1dhk6fb] .public-form-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-5fi1dhk6fb] .public-form-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-option:hover {
    border-color: var(--color-accent);
    background: var(--color-bg);
}

[b-5fi1dhk6fb] .public-form-option-selected {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

[b-5fi1dhk6fb] .public-form-radio {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-radio-checked {
    border-color: var(--color-accent);
}

[b-5fi1dhk6fb] .public-form-radio-checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}

[b-5fi1dhk6fb] .public-form-checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-checkbox-checked {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #FFFFFF;
}

[b-5fi1dhk6fb] .public-form-option-text {
    font-size: 1.08rem;
    color: var(--color-text);
    flex: 1;
}

/* ---- Yes/No ---- */
[b-5fi1dhk6fb] .public-form-yesno {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

[b-5fi1dhk6fb] .public-form-yesno-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    transition: border-color var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover),
                background var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-yesno-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

[b-5fi1dhk6fb] .public-form-yesno-selected {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

[b-5fi1dhk6fb] .public-form-yesno-btn span {
    font-size: 1.08rem;
    font-weight: 500;
}

/* ---- Rating ---- */
[b-5fi1dhk6fb] .public-form-rating {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

[b-5fi1dhk6fb] .public-form-rating-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-subtle);
    cursor: pointer;
    transition: all var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-rating-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

[b-5fi1dhk6fb] .public-form-rating-selected {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* ---- Likert ---- */
[b-5fi1dhk6fb] .public-form-likert {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

[b-5fi1dhk6fb] .public-form-likert-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

[b-5fi1dhk6fb] .public-form-likert-scale {
    display: flex;
    gap: var(--space-2);
}

[b-5fi1dhk6fb] .public-form-likert-btn {
    flex: 1;
    padding: var(--space-3) 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-likert-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

[b-5fi1dhk6fb] .public-form-likert-selected {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #FFFFFF;
}

/* ---- Signature ---- */
[b-5fi1dhk6fb] .public-form-signature {
    max-width: 480px;
}

[b-5fi1dhk6fb] .public-form-signature-input {
    height: 140px;
    width: 100%;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    background: var(--color-bg);
    cursor: pointer;
    font: inherit;
    transition: border-color var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-signature-input:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-panel);
}

[b-5fi1dhk6fb] .public-form-signature-display {
    height: 140px;
    border: 1.5px solid var(--color-success);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-success-soft);
    cursor: pointer;
    transition: all var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-signature-display:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

[b-5fi1dhk6fb] .public-form-signature-text {
    font-family: 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 1.75rem;
    color: var(--color-text);
}

[b-5fi1dhk6fb] .public-form-signature-clear {
    margin-top: var(--space-1);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

[b-5fi1dhk6fb] .public-form-signature-display:hover .public-form-signature-clear {
    color: var(--color-danger);
}

[b-5fi1dhk6fb] .public-form-signature-preview {
    margin-top: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    text-align: center;
}

/* ---- Ranking ---- */
[b-5fi1dhk6fb] .public-form-ranking {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-5fi1dhk6fb] .public-form-ranking-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

[b-5fi1dhk6fb] .public-form-ranking-pos {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: var(--radius-sm);
}

[b-5fi1dhk6fb] .public-form-ranking-text {
    flex: 1;
    font-size: 1.08rem;
    color: var(--color-text);
}

/* ---- Banner ---- */
[b-5fi1dhk6fb] .public-form-banner {
    margin-top: var(--space-4);
}

/* ---- Navigation ---- */
[b-5fi1dhk6fb] .public-form-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

[b-5fi1dhk6fb] .public-form-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: var(--h-button);
    background: var(--color-accent);
    color: #FFFFFF;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--duration-hover) var(--ease-hover);
}

[b-5fi1dhk6fb] .public-form-link-btn:hover {
    background: var(--color-accent-hover);
    color: #FFFFFF;
}

[b-5fi1dhk6fb] .public-form-footer {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    padding-top: var(--space-4);
    text-align: center;
}

@media (max-width: 640px) {
    [b-5fi1dhk6fb] .public-form-topbar { padding: 0 var(--space-4); }
    [b-5fi1dhk6fb] .public-form-main { padding: var(--space-5) var(--space-4); }
    [b-5fi1dhk6fb] .public-form-yesno { grid-template-columns: 1fr; }
    [b-5fi1dhk6fb] .public-form-likert-scale { flex-wrap: wrap; }
    [b-5fi1dhk6fb] .public-form-likert-btn { flex-basis: calc(20% - var(--space-2)); }
}
/* /Components/Pages/Tools/HangfireDashboard.razor.rz.scp.css */
/* Hangfire Dashboard — Orcanex token-driven styles.
   Colours come exclusively from Orcanex tokens (var(--color-*)) so the page
   adapts to light/dark mode and the user's accent automatically — there is no
   separate palette and no [data-bs-theme] block (tokens handle theming).
   NOTE: this is a SCOPED stylesheet, so `:root { --x }` would compile to
   `:root[b-xxxx]` and never match <html>; never define custom properties on
   :root here — reference the global tokens directly instead. */

/* =====================================================
   Page header search input + KPI strip
   ===================================================== */
.hf-search-wrap[b-8xffebpsom] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    height: var(--h-field);
    padding: 0 var(--space-2);
    width: 280px;
}

.hf-search-icon[b-8xffebpsom] {
    color: var(--color-text-muted);
    display: flex;
}

.hf-search-input[b-8xffebpsom] {
    border: none;
    background: transparent;
    padding: 0;
    height: 32px;
    font-size: 0.92rem;
    color: var(--color-text);
    flex: 1;
    box-shadow: none !important;
}

.hf-search-input:focus[b-8xffebpsom] {
    outline: none;
    box-shadow: none;
}

.hf-kpi-strip[b-8xffebpsom] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 1024px) {
    .hf-kpi-strip[b-8xffebpsom] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   Base Container
   ===================================================== */
.hf-dashboard[b-8xffebpsom] {
    background: transparent;
    color: var(--color-text);
    padding: var(--space-4) var(--space-6);
}

/* =====================================================
   Tabs — contained strip with clear separation from the body
   ===================================================== */
.hf-tabs[b-8xffebpsom] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: stretch;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    margin-bottom: var(--space-4);
}

.hf-tabs .nav-item[b-8xffebpsom] {
    display: flex;
}

.hf-tabs .nav-link[b-8xffebpsom] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    transition: background 0.15s ease, color 0.15s ease;
}

.hf-tabs .nav-link:hover[b-8xffebpsom] {
    color: var(--color-text);
    background: var(--color-panel);
}

.hf-tabs .nav-link.active[b-8xffebpsom] {
    color: var(--color-accent);
    background: var(--color-panel);
    box-shadow: inset 0 0 0 1px var(--color-border), 0 1px 2px rgba(0, 0, 0, 0.04);
    font-weight: 600;
}

.hf-tabs .nav-link .badge[b-8xffebpsom] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25em 0.5em;
    vertical-align: middle;
}

.hf-tabs .btn-close[b-8xffebpsom] {
    filter: none;
    opacity: 0.5;
    font-size: 0.5rem;
}

.hf-tabs .btn-close:hover[b-8xffebpsom] {
    opacity: 1;
}

/* =====================================================
   Body — flat container (no outer frame) so the inner cards,
   sidebar and tables stand on their own and don't double-frame.
   ===================================================== */
.hf-body[b-8xffebpsom] {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.hf-body .card-body[b-8xffebpsom] {
    background: transparent;
}

/* =====================================================
   Sidebar
   ===================================================== */
.hf-sidebar[b-8xffebpsom] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hf-sidebar .list-group-item[b-8xffebpsom] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.hf-sidebar .list-group-item:last-child[b-8xffebpsom] {
    border-bottom: none;
}

.hf-sidebar .list-group-item:hover[b-8xffebpsom] {
    background: var(--color-bg);
    color: var(--color-text);
}

.hf-sidebar .list-group-item.active[b-8xffebpsom] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-left: 3px solid var(--color-accent);
    padding-left: calc(1rem - 3px);
}

.hf-sidebar .list-group-item .badge[b-8xffebpsom] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.25em 0.5em;
    border-radius: var(--radius-sm);
    min-width: 2rem;
    text-align: center;
}

.hf-sidebar .list-group-item.active .badge[b-8xffebpsom] {
    background: var(--color-accent);
    color: var(--color-panel);
}

/* Tonal count badges (idle states stay neutral via the rule above) */
.hf-sidebar .list-group-item .badge.badge-primary[b-8xffebpsom] { background: var(--color-accent-soft); color: var(--color-accent); }
.hf-sidebar .list-group-item .badge.badge-info[b-8xffebpsom] { background: var(--color-accent-soft); color: var(--color-accent); }
.hf-sidebar .list-group-item .badge.badge-warning[b-8xffebpsom] { background: var(--color-warn-soft); color: var(--color-warn); }
.hf-sidebar .list-group-item .badge.badge-success[b-8xffebpsom] { background: var(--color-success-soft); color: var(--color-success); }
.hf-sidebar .list-group-item .badge.badge-danger[b-8xffebpsom] { background: var(--color-danger-soft); color: var(--color-danger); }
.hf-sidebar .list-group-item .badge.badge-dark[b-8xffebpsom] { background: var(--color-bg); color: var(--color-text-muted); }

.hf-sidebar .list-group-item.active .badge.badge-primary[b-8xffebpsom],
.hf-sidebar .list-group-item.active .badge.badge-info[b-8xffebpsom],
.hf-sidebar .list-group-item.active .badge.badge-warning[b-8xffebpsom],
.hf-sidebar .list-group-item.active .badge.badge-success[b-8xffebpsom],
.hf-sidebar .list-group-item.active .badge.badge-danger[b-8xffebpsom],
.hf-sidebar .list-group-item.active .badge.badge-dark[b-8xffebpsom] {
    background: var(--color-accent);
    color: var(--color-panel);
}

/* =====================================================
   Section
   ===================================================== */
.hf-section[b-8xffebpsom] {
    padding: var(--space-5);
}

.hf-section h5[b-8xffebpsom],
.hf-section h6[b-8xffebpsom] {
    color: var(--color-text) !important;
    font-weight: 600;
}

.hf-section-divider[b-8xffebpsom] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}

/* =====================================================
   Toolbar — per-view search + filters + sort (Cases-style)
   ===================================================== */
.hf-toolbar[b-8xffebpsom] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.hf-toolbar-spacer[b-8xffebpsom] {
    flex: 1 1 auto;
}

.hf-filter-search[b-8xffebpsom] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 13rem;
}

.hf-filter-search .mdi[b-8xffebpsom] {
    position: absolute;
    left: 0.55rem;
    color: var(--color-text-subtle);
    font-size: 0.95rem;
    pointer-events: none;
}

.hf-filter-search input[b-8xffebpsom] {
    padding-left: 1.9rem !important;
    font-size: 0.82rem;
}

.hf-filter-select[b-8xffebpsom] {
    width: auto;
    min-width: 8.5rem;
    font-size: 0.82rem;
}

.hf-toolbar-count[b-8xffebpsom] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* =====================================================
   Empty State
   ===================================================== */
.hf-empty-state[b-8xffebpsom] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-subtle);
    text-align: center;
}

.hf-empty-state i[b-8xffebpsom] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.hf-empty-state p[b-8xffebpsom] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* =====================================================
   Queue Cards
   ===================================================== */
.hf-queue-cards[b-8xffebpsom] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hf-queue-card[b-8xffebpsom] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    min-width: 180px;
    max-width: 240px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-align: left;
    color: inherit;
    font: inherit;
}

.hf-queue-card:hover[b-8xffebpsom] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
    background: var(--color-bg);
}

.hf-queue-card.active[b-8xffebpsom] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
    background: var(--color-accent-soft);
}

.hf-queue-card-name[b-8xffebpsom] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--color-text);
    max-width: 200px;
}

.hf-queue-card-stats[b-8xffebpsom] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.hf-queue-card-count[b-8xffebpsom] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.hf-queue-card-label[b-8xffebpsom] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.hf-queue-card-meta[b-8xffebpsom] {
    font-size: 0.75rem;
}

.hf-queue-card-jobs[b-8xffebpsom] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.hf-queue-card-jobs .badge[b-8xffebpsom] {
    font-size: 0.625rem;
    padding: 0.2em 0.5em;
}

/* =====================================================
   Cron Description
   ===================================================== */
.hf-cron-description[b-8xffebpsom] {
    font-size: 0.69rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
    line-height: 1.3;
}

.section-toolbar[b-8xffebpsom] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* =====================================================
   Grid (token-styled table)
   ===================================================== */
.hf-grid[b-8xffebpsom] {
    display: table;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-panel);
    border-collapse: collapse;
}

.hf-grid-head[b-8xffebpsom] {
    display: table-row;
    background: var(--color-bg);
}

.hf-grid-row[b-8xffebpsom] {
    display: table-row;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hf-grid-row:nth-child(even)[b-8xffebpsom] {
    background: var(--color-bg);
}

.hf-grid-row:hover[b-8xffebpsom] {
    background: var(--color-accent-soft);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.hf-grid-row.active[b-8xffebpsom] {
    background: var(--color-accent-soft);
}

.hf-grid-row.expanded[b-8xffebpsom] {
    background: var(--color-danger-soft);
}

.hf-grid-head .cell[b-8xffebpsom],
.hf-grid-row .cell[b-8xffebpsom] {
    display: table-cell;
    vertical-align: middle;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.hf-grid-head .cell[b-8xffebpsom] {
    color: var(--color-text-muted);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

/* Sortable column headers */
.hf-grid-head .cell.sortable[b-8xffebpsom] {
    cursor: pointer;
    user-select: none;
}

.hf-grid-head .cell.sortable:hover[b-8xffebpsom] {
    color: var(--color-accent);
}

.hf-grid-head .cell .hf-sort-ic[b-8xffebpsom] {
    font-size: 0.9rem;
    vertical-align: -2px;
    margin-left: 2px;
}

.hf-grid-head .cell .hf-sort-idle[b-8xffebpsom] {
    opacity: 0.35;
}

.hf-grid-row .cell[b-8xffebpsom] {
    color: var(--color-text);
    font-size: 0.85rem;
}

.hf-grid-row:last-child .cell[b-8xffebpsom] {
    border-bottom: none;
}

/* Specific column widths */
.hf-grid .cell.narrow[b-8xffebpsom] {
    width: 40px;
    text-align: center;
}

.hf-grid .cell.col-id[b-8xffebpsom] {
    width: 100px;
}

.hf-grid .cell.col-job[b-8xffebpsom] {
    width: auto;
    max-width: 350px;
}

.hf-grid .cell.col-date[b-8xffebpsom] {
    width: 160px;
    white-space: nowrap;
}

.hf-grid .cell.col-duration[b-8xffebpsom] {
    width: 100px;
}

.hf-grid .cell.col-server[b-8xffebpsom] {
    width: 200px;
}

.hf-grid .cell.col-status[b-8xffebpsom] {
    width: 120px;
}

.hf-grid .cell.col-queue[b-8xffebpsom] {
    width: 150px;
}

.hf-grid .cell.col-count[b-8xffebpsom] {
    width: 80px;
    text-align: right;
}

.hf-grid .cell.col-reason[b-8xffebpsom] {
    max-width: 250px;
}

.hf-grid .cell.col-cron[b-8xffebpsom] {
    width: 140px;
}

.hf-grid .cell.col-timezone[b-8xffebpsom] {
    width: 120px;
}

.hf-grid .cell.col-next-jobs[b-8xffebpsom] {
    width: auto;
}

/* =====================================================
   Server Cards
   ===================================================== */
.hf-server[b-8xffebpsom] {
    background: var(--color-panel);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s ease;
}

.hf-server:hover[b-8xffebpsom] {
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.hf-server h6[b-8xffebpsom] {
    color: var(--color-text) !important;
    font-weight: 600;
}

.hf-stat[b-8xffebpsom] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
    min-width: 80px;
}

.hf-stat small[b-8xffebpsom] {
    display: block;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* =====================================================
   Cards (Bootstrap card chrome used in Queue Management) → tokens
   ===================================================== */
.hf-dashboard .card[b-8xffebpsom] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.hf-dashboard .card-header[b-8xffebpsom] {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.hf-dashboard .card-header h6[b-8xffebpsom] {
    color: var(--color-text);
}

.hf-dashboard .table[b-8xffebpsom] {
    color: var(--color-text);
    margin-bottom: 0;
}

.hf-dashboard .table > :not(caption) > * > *[b-8xffebpsom] {
    border-bottom-color: var(--color-border-soft);
}

.hf-dashboard .table thead th[b-8xffebpsom] {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-border);
}

.hf-dashboard .table-hover > tbody > tr:hover > *[b-8xffebpsom] {
    background: var(--color-accent-soft);
}

/* =====================================================
   Alerts
   ===================================================== */
.hf-dashboard .alert-dark[b-8xffebpsom] {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.hf-dashboard .alert-info[b-8xffebpsom] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.hf-dashboard .alert-success[b-8xffebpsom] {
    background: var(--color-success-soft);
    border-color: var(--color-success-soft);
    color: var(--color-success);
}

.hf-dashboard .alert-danger[b-8xffebpsom] {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.hf-dashboard .alert-warning[b-8xffebpsom] {
    background: var(--color-warn-soft);
    border-color: var(--color-warn-soft);
    color: var(--color-warn);
}

.alert-sm[b-8xffebpsom] {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
}

/* =====================================================
   Buttons — map Bootstrap variants onto Orcanex tokens
   ===================================================== */
.hf-dashboard .btn-primary[b-8xffebpsom] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.hf-dashboard .btn-primary:hover[b-8xffebpsom] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.hf-dashboard .btn-success[b-8xffebpsom] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.hf-dashboard .btn-success:hover[b-8xffebpsom] {
    filter: brightness(0.93);
}

.hf-dashboard .btn-danger[b-8xffebpsom] {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.hf-dashboard .btn-danger:hover[b-8xffebpsom] {
    filter: brightness(0.93);
}

.hf-dashboard .btn-warning[b-8xffebpsom] {
    background: var(--color-warn);
    border-color: var(--color-warn);
    color: #fff;
}

.hf-dashboard .btn-warning:hover[b-8xffebpsom] {
    filter: brightness(0.93);
}

.hf-dashboard .btn-outline-primary[b-8xffebpsom] {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: transparent;
}

.hf-dashboard .btn-outline-primary:hover[b-8xffebpsom] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.hf-dashboard .btn-outline-danger[b-8xffebpsom] {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: transparent;
}

.hf-dashboard .btn-outline-danger:hover[b-8xffebpsom] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.hf-dashboard .btn-outline-secondary[b-8xffebpsom],
.hf-dashboard .btn-outline-light[b-8xffebpsom] {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: transparent;
}

.hf-dashboard .btn-outline-secondary:hover[b-8xffebpsom],
.hf-dashboard .btn-outline-light:hover[b-8xffebpsom] {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

.hf-dashboard .btn-link[b-8xffebpsom] {
    color: var(--color-accent);
    text-decoration: none;
    padding: 0;
}

.hf-dashboard .btn-link:hover[b-8xffebpsom] {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* =====================================================
   Badges
   ===================================================== */
/* Badges — SIZING ONLY. Colours come from the global soft-pill retrofit in
   tokens.css, which sets `.badge.bg-* { background: <tone>-soft !important;
   color: <tone> !important }`. Do NOT re-skin bg-* here: an earlier version set
   `background: <tone> !important` (won) but `color` WITHOUT !important (lost to
   the global `color !important`), producing saturated-bg + saturated-text
   "blobs" with invisible labels. Deferring to the global rule renders the
   state / count / status badges as readable soft pills, consistent with the app. */
.hf-dashboard .badge[b-8xffebpsom] {
    font-weight: 500;
    font-size: 0.69rem;
    padding: 0.35em 0.65em;
    border-radius: var(--radius-sm);
}

/* bg-dark has no global retrofit — give it a theme-aware neutral pill (both
   declarations !important so the pair stays balanced) instead of harsh black. */
.hf-dashboard .badge.bg-dark[b-8xffebpsom] {
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border);
}

/* =====================================================
   Form Controls
   ===================================================== */
.hf-dashboard .form-control[b-8xffebpsom],
.hf-dashboard .form-select[b-8xffebpsom] {
    background: var(--color-panel);
    border-color: var(--color-border);
    color: var(--color-text);
    font-size: 0.85rem;
}

.hf-dashboard .form-control:focus[b-8xffebpsom],
.hf-dashboard .form-select:focus[b-8xffebpsom] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.hf-dashboard .form-check-input[b-8xffebpsom] {
    border-color: var(--color-border);
    width: 1rem;
    height: 1rem;
}

.hf-dashboard .form-check-input:checked[b-8xffebpsom] {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.hf-dashboard .form-check-input:focus[b-8xffebpsom] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

/* =====================================================
   Job Details
   ===================================================== */
.job-details h4[b-8xffebpsom],
.job-details h5[b-8xffebpsom] {
    color: var(--color-text) !important;
    font-weight: 600;
}

/* Code snippet — theme-aware inset surface (was a fixed dark block) */
.job-code-snippet pre[b-8xffebpsom] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

.job-code-snippet code[b-8xffebpsom] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.81rem;
    line-height: 1.7;
    color: var(--color-text);
    background: transparent !important;
    padding: 0;
    white-space: pre;
}

/* Parameters Grid */
.params-grid[b-8xffebpsom] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.params-row[b-8xffebpsom] {
    display: flex;
    border-bottom: 1px solid var(--color-border-soft);
}

.params-row:last-child[b-8xffebpsom] {
    border-bottom: none;
}

.params-label[b-8xffebpsom] {
    flex: 0 0 180px;
    padding: 0.625rem 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
    background: var(--color-panel);
    border-right: 1px solid var(--color-border-soft);
}

.params-value[b-8xffebpsom] {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
    min-width: 0;
    word-break: break-word;
}

.params-value code[b-8xffebpsom] {
    color: var(--color-accent);
    background: transparent;
    padding: 0;
    font-size: 0.81rem;
}

/* =====================================================
   State Timeline
   ===================================================== */
.state-timeline[b-8xffebpsom] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.state-entry[b-8xffebpsom] {
    position: relative;
    padding: 1rem 1rem 1rem 2rem;
    border-left: 2px solid var(--color-border);
    margin-left: 0.75rem;
}

.state-entry[b-8xffebpsom]::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 1.25rem;
    width: 12px;
    height: 12px;
    background: var(--color-panel);
    border: 2px solid var(--color-border);
    border-radius: 50%;
}

.state-entry.state-current[b-8xffebpsom] {
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 0.5rem;
}

.state-entry.state-current[b-8xffebpsom]::before {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.state-header[b-8xffebpsom] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.state-badge[b-8xffebpsom] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
}

.state-time[b-8xffebpsom] {
    font-size: 0.81rem;
    color: var(--color-text-muted);
}

.state-content[b-8xffebpsom] {
    padding: 0.5rem 0;
}

.state-metric[b-8xffebpsom] {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin-bottom: 0.375rem;
    font-size: 0.85rem;
}

.state-metric .metric-label[b-8xffebpsom] {
    color: var(--color-text-muted);
    min-width: 100px;
    font-weight: 500;
}

.state-metric .metric-value[b-8xffebpsom] {
    color: var(--color-text);
}

.state-reason[b-8xffebpsom] {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.state-data[b-8xffebpsom] {
    background: var(--color-bg);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* =====================================================
   Stack Trace
   ===================================================== */
.hf-stack-trace[b-8xffebpsom] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-danger-soft);
    margin-top: 0.5rem;
}

/* =====================================================
   Console Output — theme-aware inset surface
   ===================================================== */
.console-output-container[b-8xffebpsom] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.console-output[b-8xffebpsom] {
    color: var(--color-text);
    line-height: 1.6;
}

.console-line[b-8xffebpsom] {
    display: flex;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.console-line:last-child[b-8xffebpsom] {
    border-bottom: none;
}

.console-time[b-8xffebpsom] {
    min-width: 80px;
    font-weight: 600;
    flex-shrink: 0;
    color: var(--color-accent);
}

.console-message[b-8xffebpsom] {
    flex-grow: 1;
    word-break: break-word;
}

.console-output-container[b-8xffebpsom]::-webkit-scrollbar {
    width: 8px;
}

.console-output-container[b-8xffebpsom]::-webkit-scrollbar-track {
    background: var(--color-bg);
    border-radius: 4px;
}

.console-output-container[b-8xffebpsom]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.console-line .progress[b-8xffebpsom] {
    background-color: var(--color-bg);
}

.console-line .progress-bar[b-8xffebpsom] {
    font-size: 0.69rem;
    line-height: 16px;
    background: var(--color-success);
}

/* =====================================================
   Pagination
   ===================================================== */
.hf-dashboard .pagination .page-link[b-8xffebpsom] {
    color: var(--color-text-muted);
    background: var(--color-panel);
    border-color: var(--color-border);
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
}

.hf-dashboard .pagination .page-item.active .page-link[b-8xffebpsom] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.hf-dashboard .pagination .page-item.disabled .page-link[b-8xffebpsom] {
    color: var(--color-text-subtle);
    background: var(--color-panel);
}

.hf-dashboard .pagination .page-link:hover[b-8xffebpsom] {
    background: var(--color-bg);
    color: var(--color-text);
}

/* =====================================================
   Utilities — map Bootstrap tonal text onto tokens
   ===================================================== */
.hf-dashboard .text-light[b-8xffebpsom] {
    color: var(--color-text) !important;
}

.hf-dashboard .text-muted[b-8xffebpsom] {
    color: var(--color-text-muted) !important;
}

.hf-dashboard .text-info[b-8xffebpsom] {
    color: var(--color-accent) !important;
}

.hf-dashboard .text-primary[b-8xffebpsom] {
    color: var(--color-accent) !important;
}

.hf-dashboard .text-danger[b-8xffebpsom] {
    color: var(--color-danger) !important;
}

.hf-dashboard .text-success[b-8xffebpsom] {
    color: var(--color-success) !important;
}

.hf-dashboard .text-warning[b-8xffebpsom] {
    color: var(--color-warn) !important;
}

.hf-dashboard .bg-light[b-8xffebpsom] {
    background: var(--color-bg) !important;
}

.hf-dashboard code[b-8xffebpsom] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.81rem;
}

.hf-dashboard code.text-success[b-8xffebpsom] {
    color: var(--color-success) !important;
    background: var(--color-success-soft);
}

.hf-dashboard code.text-danger[b-8xffebpsom] {
    color: var(--color-danger) !important;
    background: var(--color-danger-soft);
}

/* Cron code — theme-aware inset chip (was a fixed dark chip) */
.hf-dashboard code.bg-dark[b-8xffebpsom] {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border);
}

/* Copy button */
.copy-btn[b-8xffebpsom] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.hf-grid-row:hover .copy-btn[b-8xffebpsom],
.d-flex:hover .copy-btn[b-8xffebpsom] {
    opacity: 0.6;
}

.copy-btn:hover[b-8xffebpsom] {
    opacity: 1 !important;
}

/* =====================================================
   Animations
   ===================================================== */
.mdi-spin[b-8xffebpsom] {
    animation: mdi-spin-b-8xffebpsom 1s infinite linear;
}

@keyframes mdi-spin-b-8xffebpsom {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulse dot for auto-refresh indicator */
.pulse-dot[b-8xffebpsom] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    margin-left: 4px;
    vertical-align: middle;
    animation: pulse-b-8xffebpsom 2s ease-in-out infinite;
}

@keyframes pulse-b-8xffebpsom {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* =====================================================
   Stats Ribbon
   ===================================================== */
.hf-stats-ribbon[b-8xffebpsom] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.hf-stats-ribbon-item[b-8xffebpsom] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
}

.hf-stats-ribbon-label[b-8xffebpsom] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hf-stats-ribbon-value[b-8xffebpsom] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
}

.hf-stats-ribbon-divider[b-8xffebpsom] {
    width: 1px;
    height: 1.25rem;
    background: var(--color-border);
    margin: 0 0.25rem;
}

/* =====================================================
   Details/Summary
   ===================================================== */
.hf-dashboard details summary[b-8xffebpsom] {
    cursor: pointer;
    user-select: none;
    color: var(--color-accent);
    font-weight: 500;
}

.hf-dashboard details summary:hover[b-8xffebpsom] {
    text-decoration: underline;
}

.hf-dashboard details[open] summary[b-8xffebpsom] {
    margin-bottom: 0.5rem;
}

/* =====================================================
   Close Button in Tab
   ===================================================== */
.btn-close-sm[b-8xffebpsom] {
    font-size: 0.5rem;
    padding: 0.25rem;
    filter: none;
    vertical-align: middle;
}

/* =====================================================
   Search
   ===================================================== */
.hf-search-group[b-8xffebpsom] {
    width: 240px;
    transition: width 0.2s ease;
}

.hf-search-group:focus-within[b-8xffebpsom] {
    width: 320px;
}

/* =====================================================
   Breadcrumb (Job Details)
   ===================================================== */
.hf-breadcrumb[b-8xffebpsom] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.81rem;
}

.hf-breadcrumb-item[b-8xffebpsom] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-accent);
    font: inherit;
    font-size: 0.81rem;
    font-weight: 500;
    cursor: pointer;
}

.hf-breadcrumb-item:hover[b-8xffebpsom] {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.hf-breadcrumb-separator[b-8xffebpsom] {
    color: var(--color-text-subtle);
}

.hf-breadcrumb-current[b-8xffebpsom] {
    color: var(--color-text);
    font-weight: 600;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 991.98px) {
    .hf-sidebar[b-8xffebpsom] {
        margin-bottom: 1rem;
        display: flex;
        overflow-x: auto;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .hf-sidebar .list-group-item[b-8xffebpsom] {
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        border-left: none !important;
        border-radius: 0;
        flex-shrink: 0;
        padding: 0.5rem 0.875rem;
    }

    .hf-sidebar .list-group-item.active[b-8xffebpsom] {
        border-left: none !important;
        border-bottom: 2px solid var(--color-accent);
        background: var(--color-accent-soft);
        padding-left: 0.875rem;
    }

    .hf-grid[b-8xffebpsom] {
        display: block;
        overflow-x: auto;
    }

    .hf-grid-head[b-8xffebpsom],
    .hf-grid-row[b-8xffebpsom] {
        display: table-row;
    }

    .hf-search-group[b-8xffebpsom] {
        width: 180px;
    }

    .hf-search-group:focus-within[b-8xffebpsom] {
        width: 240px;
    }
}

@media (max-width: 767.98px) {
    .hf-tabs[b-8xffebpsom] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .hf-tabs .nav-link[b-8xffebpsom] {
        padding: 0.5rem 0.75rem;
        font-size: 0.81rem;
        white-space: nowrap;
    }

    .hf-tabs .nav-link .badge[b-8xffebpsom] {
        display: none;
    }

    .hf-section[b-8xffebpsom] {
        padding: var(--space-3);
    }

    .section-toolbar[b-8xffebpsom],
    .hf-toolbar[b-8xffebpsom] {
        flex-direction: column;
        align-items: stretch;
    }

    .hf-filter-search[b-8xffebpsom],
    .hf-filter-select[b-8xffebpsom] {
        width: 100%;
        min-width: 0;
    }

    .state-entry[b-8xffebpsom] {
        padding-left: 1.5rem;
    }

    .hf-queue-cards[b-8xffebpsom] {
        flex-direction: column;
    }

    .hf-queue-card[b-8xffebpsom] {
        max-width: none;
    }

    .hf-stats-ribbon[b-8xffebpsom] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .hf-stats-ribbon-divider[b-8xffebpsom] {
        display: none;
    }

    .hf-search-group[b-8xffebpsom],
    .hf-search-group:focus-within[b-8xffebpsom] {
        width: 100%;
    }

    .hf-breadcrumb[b-8xffebpsom] {
        flex-wrap: wrap;
    }
}

/* =====================================================
   Print
   ===================================================== */
@media print {
    .hf-dashboard .card-body > .d-flex[b-8xffebpsom],
    .hf-dashboard .form-check[b-8xffebpsom],
    .hf-dashboard .btn[b-8xffebpsom],
    .hf-dashboard .section-toolbar .btn[b-8xffebpsom],
    .hf-dashboard .hf-toolbar[b-8xffebpsom],
    .hf-dashboard .pagination[b-8xffebpsom],
    .hf-stats-ribbon[b-8xffebpsom],
    .pulse-dot[b-8xffebpsom],
    .copy-btn[b-8xffebpsom] {
        display: none !important;
    }

    .hf-dashboard[b-8xffebpsom] {
        font-size: 10pt;
    }

    .hf-grid[b-8xffebpsom] {
        border: 1px solid #000;
    }

    .hf-grid-head .cell[b-8xffebpsom],
    .hf-grid-row .cell[b-8xffebpsom] {
        border: 1px solid #ccc;
        padding: 4px 6px;
    }

    .hf-sidebar[b-8xffebpsom] {
        display: none !important;
    }

    .hf-section[b-8xffebpsom] {
        padding: 0;
    }

    .hf-server[b-8xffebpsom] {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
}

/* =====================================================
   SignalR Pulse Indicator
   ===================================================== */
.pulse-dot-signalr[b-8xffebpsom] {
    background: var(--color-accent);
}

/* =====================================================
   Statistics Cards
   ===================================================== */
.hf-stat-card[b-8xffebpsom] {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-panel);
}

.hf-stat-card-value[b-8xffebpsom] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.hf-stat-card-label[b-8xffebpsom] {
    font-size: 0.81rem;
    font-weight: 500;
    margin-top: 0.25rem;
    opacity: 0.7;
}

.hf-stat-card-icon[b-8xffebpsom] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.5rem;
    opacity: 0.12;
}

.hf-stat-card-success[b-8xffebpsom] {
    background: var(--color-success-soft);
    border-color: var(--color-success-soft);
    color: var(--color-success);
}

.hf-stat-card-danger[b-8xffebpsom] {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.hf-stat-card-secondary[b-8xffebpsom] {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* =====================================================
   Throughput Chart (CSS-only)
   ===================================================== */
.hf-throughput-chart[b-8xffebpsom] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.hf-throughput-bar[b-8xffebpsom] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.hf-throughput-bar-stack[b-8xffebpsom] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.hf-throughput-bar-succeeded[b-8xffebpsom] {
    background: var(--color-success);
    min-height: 1px;
    transition: height 0.3s ease;
}

.hf-throughput-bar-failed[b-8xffebpsom] {
    background: var(--color-danger);
    min-height: 1px;
    transition: height 0.3s ease;
}

.hf-throughput-label[b-8xffebpsom] {
    font-size: 0.5625rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    white-space: nowrap;
}

.hf-throughput-bar:hover .hf-throughput-bar-stack[b-8xffebpsom] {
    opacity: 0.8;
}
/* /Components/Pages/Tools/SeraConfig.razor.rz.scp.css */
.font-monospace[b-qwb40dvv4x] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
}

.btn-xs[b-qwb40dvv4x] {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
}

.table-sm td[b-qwb40dvv4x] {
    vertical-align: middle;
}

.compact-tabs .nav-link[b-qwb40dvv4x] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.modal-xl[b-qwb40dvv4x] {
    max-width: 1140px;
}

textarea.form-control[b-qwb40dvv4x] {
    resize: vertical;
    min-height: 100px;
}

.card-header[b-qwb40dvv4x] {
    background-color: #f8f9fa;
}

.border-bottom[b-qwb40dvv4x] {
    border-color: #dee2e6 !important;
}

/* Mobile (< 768 px): scroll-snap the 2-tab strip so both tabs are reachable
   without wrap; wrap the prompts table in horizontal scroll so it never
   pushes the page sideways; and tighten the card-header so the Add-button
   stays on the same row as the title. The Bootstrap `<div class="modal-dialog modal-xl">`
   already goes full-screen at mobile via tokens.css. */
@media (max-width: 767.98px) {
    .compact-tabs[b-qwb40dvv4x] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .compact-tabs .nav-item[b-qwb40dvv4x] {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .compact-tabs .nav-link[b-qwb40dvv4x] {
        height: var(--touch-target);
        display: inline-flex;
        align-items: center;
    }

    /* Tighten section headers so Add / Refresh buttons stay aligned. */
    .card-header[b-qwb40dvv4x] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* Prompts table has many columns — scroll inside its container. */
    .table-responsive[b-qwb40dvv4x] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Groq quota cards: col-md-6 already stacks at < 768 px because md
       breakpoint is 768 px; nothing to do there. */
}
/* /Components/Pages/Tools/SpeechmaticsTranscription.razor.rz.scp.css */
/* Styles extracted from SpeechmaticsTranscription.razor */
.speechmatics-row[b-3m2azolfu6] {
    min-height: calc(100vh - 120px);
}

/* Mobile (< 768 px): drop the desktop min-height (Bootstrap col-lg-3/col-lg-9
   already stack to full width at < 992px, so the right sidebar slides below
   the transcription pane). Trim padding and shrink the giant 120px record
   button to a thumb-friendly but compact 88px. */
@media (max-width: 767.98px) {
    .speechmatics-row[b-3m2azolfu6] {
        min-height: 0;
    }

    .speechmatics-container .transcription-display[b-3m2azolfu6] {
        height: 50vh;
        min-height: 240px;
    }

    /* The big circular record button: 120px → 88px on mobile so the
       record + duration + mic-selector stack fits one screen height. */
    .speechmatics-container .btn-lg.rounded-circle[b-3m2azolfu6] {
        width: 88px !important;
        height: 88px !important;
    }

    .speechmatics-container .btn-lg.rounded-circle i[b-3m2azolfu6] {
        font-size: 2.5rem !important;
    }
}

@keyframes pulse-b-3m2azolfu6 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.recording-pulse[b-3m2azolfu6] {
    animation: pulse-b-3m2azolfu6 1.5s ease-in-out infinite;
}

.audio-wave[b-3m2azolfu6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 60px;
}

.audio-wave span[b-3m2azolfu6] {
    display: inline-block;
    width: 4px;
    background: linear-gradient(180deg, #dc3545, #ff6b7a);
    border-radius: 2px;
    animation: wave-b-3m2azolfu6 1s ease-in-out infinite;
}

.audio-wave span:nth-child(1)[b-3m2azolfu6] { animation-delay: 0s; height: 20px; }
.audio-wave span:nth-child(2)[b-3m2azolfu6] { animation-delay: 0.1s; height: 35px; }
.audio-wave span:nth-child(3)[b-3m2azolfu6] { animation-delay: 0.2s; height: 50px; }
.audio-wave span:nth-child(4)[b-3m2azolfu6] { animation-delay: 0.3s; height: 35px; }
.audio-wave span:nth-child(5)[b-3m2azolfu6] { animation-delay: 0.4s; height: 20px; }

@keyframes wave-b-3m2azolfu6 {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

.transcription-display[b-3m2azolfu6] {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 400px;
    height: calc(100vh - 260px);
}

.transcription-text[b-3m2azolfu6] {
    font-size: 1rem;
    line-height: 1.6;
    color: #212529;
}

.speaker-label[b-3m2azolfu6] {
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.word-high[b-3m2azolfu6] {
    color: #212529;
    font-weight: normal;
}

.word-medium[b-3m2azolfu6] {
    color: #fd7e14;
    font-weight: normal;
}

.word-low[b-3m2azolfu6] {
    color: #dc3545;
    font-weight: normal;
}

.word-partial[b-3m2azolfu6] {
    color: #6c757d;
    font-style: italic;
    opacity: 0.7;
}

.confidence-high[b-3m2azolfu6] {
    color: #198754;
    font-weight: 500;
}

.confidence-medium[b-3m2azolfu6] {
    color: #fd7e14;
    font-weight: 450;
}

.confidence-low[b-3m2azolfu6] {
    color: #dc3545;
    font-weight: 400;
}

.typing-cursor[b-3m2azolfu6] {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #0d6efd;
    margin-left: 2px;
    animation: blink-b-3m2azolfu6 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink-b-3m2azolfu6 {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.word-animation[b-3m2azolfu6] {
    animation: fadeIn-b-3m2azolfu6 0.3s ease-out;
}

@keyframes fadeIn-b-3m2azolfu6 {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/AddressAutocomplete.razor.rz.scp.css */
/* Address Autocomplete Component Styles
 *
 * Layout was previously a Bootstrap .input-group which broke on the public
 * consent form (EmptyLayout doesn't bring the input-group flex rules in
 * predictably, so prefix-icon / input / clear-button stacked vertically
 * instead of sitting in one row). The component now owns the row layout
 * itself via absolute-positioned prefix + suffix, so it renders the same
 * way regardless of host page. */

.address-autocomplete[b-czcnfq1bn0] {
    position: relative;
    width: 100%;
}

.address-input-wrapper[b-czcnfq1bn0] {
    position: relative;
    display: block;
    width: 100%;
}

/* Selectors are doubled up (wrapper + input) to outrank the host page's
 * Field primitive, which sets ::deep input padding at 0,2,1 specificity.
 * Without this, the 36px gutter we reserve for the prefix / suffix icons
 * is overridden by Field's 10px gutter and the magnifier glass overlaps
 * the text. */
.address-input-wrapper .address-input[b-czcnfq1bn0] {
    width: 100%;
    height: var(--h-field, 36px);
    padding: 0 36px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    background: var(--color-panel, #fff);
    color: var(--color-text, #1e293b);
    font-family: var(--font-family);
    font-size: 0.92rem;
    line-height: 1;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--duration-hover, 120ms) var(--ease-hover, ease),
                box-shadow var(--duration-hover, 120ms) var(--ease-hover, ease);
}

.address-input-wrapper .address-input[b-czcnfq1bn0]::placeholder {
    color: var(--color-text-muted, #64748b);
}

.address-input-wrapper .address-input:focus[b-czcnfq1bn0] {
    border-color: var(--color-accent, #2f62ff);
    box-shadow: 0 0 0 3px var(--color-accent-ring, rgba(47, 98, 255, 0.18));
}

.address-input-wrapper .address-input:disabled[b-czcnfq1bn0] {
    background: var(--color-bg, #f8fafc);
    color: var(--color-text-muted, #64748b);
    cursor: not-allowed;
}

.address-prefix[b-czcnfq1bn0],
.address-suffix[b-czcnfq1bn0] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #64748b);
    pointer-events: none;
    font-size: 1rem;
    line-height: 1;
}

.address-prefix[b-czcnfq1bn0] {
    left: 0;
}

.address-suffix[b-czcnfq1bn0] {
    right: 0;
}

.address-clear[b-czcnfq1bn0] {
    pointer-events: auto;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
}

.address-clear:hover[b-czcnfq1bn0],
.address-clear:focus-visible[b-czcnfq1bn0] {
    color: var(--color-text, #1e293b);
    outline: none;
}

.address-autocomplete.open .address-input-wrapper .address-input[b-czcnfq1bn0] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Dropdown */
.address-dropdown[b-czcnfq1bn0] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
}

.address-item[b-czcnfq1bn0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
    border-bottom: 1px solid #f1f5f9;
}

.address-item:last-child[b-czcnfq1bn0] {
    border-bottom: none;
}

.address-item:hover[b-czcnfq1bn0],
.address-item.selected[b-czcnfq1bn0] {
    background: #e0f2fe;
}

.address-item.no-results[b-czcnfq1bn0] {
    color: #64748b;
    font-size: 0.875rem;
    justify-content: center;
    cursor: default;
}

.address-item.no-results:hover[b-czcnfq1bn0] {
    background: transparent;
}

.address-icon[b-czcnfq1bn0] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
}

.address-item.selected .address-icon[b-czcnfq1bn0],
.address-item:hover .address-icon[b-czcnfq1bn0] {
    background: var(--bs-primary);
}

.address-item.selected .address-icon i[b-czcnfq1bn0],
.address-item:hover .address-icon i[b-czcnfq1bn0] {
    color: #fff !important;
}

.address-details[b-czcnfq1bn0] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.address-main[b-czcnfq1bn0] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.address-secondary[b-czcnfq1bn0] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Scrollbar styling for dropdown */
.address-dropdown[b-czcnfq1bn0]::-webkit-scrollbar {
    width: 6px;
}

.address-dropdown[b-czcnfq1bn0]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.address-dropdown[b-czcnfq1bn0]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.address-dropdown[b-czcnfq1bn0]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* /Components/Shared/CalendarComponent.razor.rz.scp.css */
/* CalendarComponent styles */
#calendar[b-tmofmfogtn] { min-height: 400px; }
.external-event[b-tmofmfogtn] { cursor: pointer; }

/* Mobile polish: make legend chips tap-friendly and shrink calendar min-height
   so the FullCalendar listWeek view fits comfortably above the fold. */
:root[data-viewport="mobile"] #calendar[b-tmofmfogtn],
:root[data-viewport="mobile-l"] #calendar[b-tmofmfogtn] {
    min-height: 300px;
}

:root[data-viewport="mobile"] .external-event[b-tmofmfogtn],
:root[data-viewport="mobile-l"] .external-event[b-tmofmfogtn] {
    font-size: 0.85rem;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The 4-up legend strip already uses Bootstrap col-3 which stays 4-up at
   mobile (Bootstrap col-3 is universal). That's fine and reads cleanly. */
/* /Components/Shared/CaseEmailComposer.razor.rz.scp.css */
/* Friendly reminder shown just above the Send button, asking the user
   to add a personal sign-off before sending. */
.email-signoff-reminder[b-5dx9sra37o] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-top: 0.5rem;
    background: linear-gradient(90deg,
        rgba(var(--ct-primary-rgb, 13, 110, 253), 0.06) 0%,
        rgba(var(--ct-primary-rgb, 13, 110, 253), 0.02) 100%);
    border: 1px solid rgba(var(--ct-primary-rgb, 13, 110, 253), 0.18);
    border-left: 3px solid var(--ct-primary, #0d6efd);
    border-radius: 6px;
    color: var(--ct-body-color, #1f2937);
}

.email-signoff-icon[b-5dx9sra37o] {
    font-size: 1.15rem;
    color: var(--ct-primary, #0d6efd);
    margin-top: 0.05rem;
    flex-shrink: 0;
}

.email-signoff-title[b-5dx9sra37o] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ct-body-color, #1f2937);
    margin-bottom: 0.125rem;
}

.email-signoff-body[b-5dx9sra37o] {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--ct-secondary-color, #475569);
}

.email-signoff-body em[b-5dx9sra37o] {
    color: var(--ct-body-color, #1f2937);
    font-style: italic;
}

/* Mobile polish: tighten the reminder card and ensure modal-body content fills
   the available vertical space (global flex rules already handle modal-content;
   we just shrink internal padding here). */
:root[data-viewport="mobile"]   .email-signoff-reminder[b-5dx9sra37o],
:root[data-viewport="mobile-l"] .email-signoff-reminder[b-5dx9sra37o] {
    padding: 0.5rem 0.625rem;
    gap: 0.5rem;
}

:root[data-viewport="mobile"]   .email-signoff-title[b-5dx9sra37o],
:root[data-viewport="mobile-l"] .email-signoff-title[b-5dx9sra37o] {
    font-size: 0.85rem;
}

:root[data-viewport="mobile"]   .email-signoff-body[b-5dx9sra37o],
:root[data-viewport="mobile-l"] .email-signoff-body[b-5dx9sra37o] {
    font-size: 0.8rem;
}
/* /Components/Shared/CaseEmailList.razor.rz.scp.css */
/* CaseEmailList — scoped styles
   Previously inline <style>; moved here so Blazor CSS isolation applies and
   the rules don't leak across the app. Visual parity preserved at desktop;
   tokens used where they don't change the rendered appearance. */

.email-list-container[b-72xt8znzt3] {
    max-height: 400px;
    overflow-y: auto;
}

.email-timeline[b-72xt8znzt3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-item[b-72xt8znzt3] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.email-item:hover[b-72xt8znzt3] {
    background-color: #f8f9fa;
}

.email-item.selected[b-72xt8znzt3] {
    background-color: #e7f1ff;
    border-color: #0d6efd;
}

.email-item.inbound[b-72xt8znzt3] {
    border-left: 3px solid #10b981;
}

.email-item.outbound[b-72xt8znzt3] {
    border-left: 3px solid #0d6efd;
}

.email-indicator[b-72xt8znzt3] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.email-item.inbound .email-indicator[b-72xt8znzt3] {
    background-color: #d1fae5;
    color: #059669;
}

.email-item.outbound .email-indicator[b-72xt8znzt3] {
    background-color: #dbeafe;
    color: #2563eb;
}

.email-preview[b-72xt8znzt3] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.email-detail-panel[b-72xt8znzt3] {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-left: 2.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
}

.email-detail-content[b-72xt8znzt3] {
    background-color: white;
    border-radius: 0.375rem;
    padding: 1rem;
    font-size: 0.875rem;
    max-height: 300px;
    overflow-y: auto;
}

.email-actions[b-72xt8znzt3] {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.email-item:hover .email-actions[b-72xt8znzt3] {
    opacity: 1;
}

/* Mobile polish:
   - Always show reply actions (no hover affordance on touch)
   - Drop the left indent on the detail panel so the body uses the full width
   - Stack the header (from/date) vertically when the row is narrow
   - Allow text to wrap on small screens */
:root[data-viewport="mobile"]   .email-actions[b-72xt8znzt3],
:root[data-viewport="mobile-l"] .email-actions[b-72xt8znzt3] {
    opacity: 1;
}

:root[data-viewport="mobile"]   .email-detail-panel[b-72xt8znzt3],
:root[data-viewport="mobile-l"] .email-detail-panel[b-72xt8znzt3] {
    margin-left: 0;
    padding: 0.75rem;
}

:root[data-viewport="mobile"]   .email-item[b-72xt8znzt3],
:root[data-viewport="mobile-l"] .email-item[b-72xt8znzt3] {
    padding: 0.625rem;
    gap: 0.5rem;
}

:root[data-viewport="mobile"]   .email-indicator[b-72xt8znzt3],
:root[data-viewport="mobile-l"] .email-indicator[b-72xt8znzt3] {
    width: 1.75rem;
    height: 1.75rem;
}

:root[data-viewport="mobile"]   .email-detail-content[b-72xt8znzt3],
:root[data-viewport="mobile-l"] .email-detail-content[b-72xt8znzt3] {
    max-height: none;
    padding: 0.75rem;
}

/* When the container is nested inside a tabbed surface that already scrolls,
   the inner max-height creates a nested scroll trap. Drop it on mobile so the
   parent scroll surface handles vertical movement. */
:root[data-viewport="mobile"]   .email-list-container[b-72xt8znzt3],
:root[data-viewport="mobile-l"] .email-list-container[b-72xt8znzt3] {
    max-height: none;
}
/* /Components/Shared/CaseViewerAvatars.razor.rz.scp.css */
/* ===== Case Viewer Avatars ===== */

.viewer-avatars[b-jtmv7ajyzs] {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse; /* Stacks right-to-left so first avatar is on top */
    margin-right: 0.5rem;
}

.viewer-avatar[b-jtmv7ajyzs] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    flex-shrink: 0;
    cursor: default;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.viewer-avatar:last-child[b-jtmv7ajyzs] {
    margin-left: 0;
}

.viewer-avatar:hover[b-jtmv7ajyzs] {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.viewer-avatar img[b-jtmv7ajyzs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.viewer-initials[b-jtmv7ajyzs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    border-radius: 50%;
}

.overflow-badge[b-jtmv7ajyzs] {
    background-color: #64748b;
    font-size: 0.625rem;
    font-weight: 700;
}
/* /Components/Shared/ClientEmailComposer.razor.rz.scp.css */
/* Friendly reminder shown just above the Send button, asking the user
   to add a personal sign-off before sending. */
.email-signoff-reminder[b-1ybl0w3tc1] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-top: 0.5rem;
    background: linear-gradient(90deg,
        rgba(var(--ct-primary-rgb, 13, 110, 253), 0.06) 0%,
        rgba(var(--ct-primary-rgb, 13, 110, 253), 0.02) 100%);
    border: 1px solid rgba(var(--ct-primary-rgb, 13, 110, 253), 0.18);
    border-left: 3px solid var(--ct-primary, #0d6efd);
    border-radius: 6px;
    color: var(--ct-body-color, #1f2937);
}

.email-signoff-icon[b-1ybl0w3tc1] {
    font-size: 1.15rem;
    color: var(--ct-primary, #0d6efd);
    margin-top: 0.05rem;
    flex-shrink: 0;
}

.email-signoff-title[b-1ybl0w3tc1] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ct-body-color, #1f2937);
    margin-bottom: 0.125rem;
}

.email-signoff-body[b-1ybl0w3tc1] {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--ct-secondary-color, #475569);
}

.email-signoff-body em[b-1ybl0w3tc1] {
    color: var(--ct-body-color, #1f2937);
    font-style: italic;
}
/* /Components/Shared/CompactPageHeader.razor.rz.scp.css */
.orcanex-page-header-compat[b-q8vkn1cill] {
    margin-bottom: 0;
}

.orcanex-page-header-mode[b-q8vkn1cill] {
    display: inline-flex;
    align-items: center;
}

[b-q8vkn1cill] .orcanex-page-header-title-slot h1,
[b-q8vkn1cill] .orcanex-page-header-title-slot h2,
[b-q8vkn1cill] .orcanex-page-header-title-slot h3,
[b-q8vkn1cill] .orcanex-page-header-title-slot h4,
[b-q8vkn1cill] .orcanex-page-header-title-slot h5,
[b-q8vkn1cill] .orcanex-page-header-title-slot h6 {
    margin: 0;
    font-size: 1.38rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

[b-q8vkn1cill] .orcanex-page-header-title-slot .badge {
    margin-left: 8px;
    vertical-align: middle;
}

.compact-tabs-container[b-q8vkn1cill] { padding: 0; margin-top: 8px; }
.compact-tabs[b-q8vkn1cill] { border-bottom: 1px solid var(--color-border-soft); margin: 0; padding: 0; display: flex; gap: 0; }
[b-q8vkn1cill] .compact-tabs .nav-link {
    border: none;
    padding: 8px 14px;
    font-weight: 500;
    font-size: 1rem;
    background: transparent;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    transition: color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
[b-q8vkn1cill] .compact-tabs .nav-link:hover {
    color: var(--color-text);
    background: transparent;
    border-bottom-color: var(--color-border);
}
[b-q8vkn1cill] .compact-tabs .nav-link.active {
    color: var(--color-accent);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
    background: transparent;
}
/* /Components/Shared/CompanyDropzoneUpload.razor.rz.scp.css */
/* DropzoneUpload styles */
#CompanyDropzone[b-bn7a1fkw8i] {
    min-height: 80px !important;
}

    #CompanyDropzone.dz-drag-hover[b-bn7a1fkw8i] {
        border: 2px dashed green;
        background-color: #f6fff6;
    }

.dz-preview.dz-file-preview[b-bn7a1fkw8i] {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: .5rem .75rem;
    position: relative;
}

.dz-preview .progress[b-bn7a1fkw8i] {
    background: #f1f1f1;
}

#totalUploadProgress.progress[b-bn7a1fkw8i] {
    height: 6px;
    background: #f1f1f1;
    margin-top: .5rem;
}
/* /Components/Shared/CompanyFileList.razor.rz.scp.css */
/* CompanyFileList component styles - mirrors FileList.razor.css */

/* Container */
.file-list-container[b-dlji5jtslp] {
    padding: 0;
}

/* Toolbar with search */
.file-list-toolbar[b-dlji5jtslp] {
    padding: 0;
}

/* ──────────────────────────────────────────────────────────
   Search field — the magnifier icon overlaps the placeholder
   text because:
     1. The input uses Bootstrap's `.ps-5` utility class
        (padding-left: 4.5rem !important).
     2. tokens.css's `.form-control-sm { padding: 0 10px !important }`
        has the same specificity (0,1,0) and loads AFTER the
        Bootstrap utility, so it wins the cascade — collapsing
        padding-left back to 10 px.

   We fix it here with a high-specificity rule that explicitly
   pins padding-left to a value that clears the icon, and we
   clamp the icon's font/box size so its glyph cannot extend
   past its declared bounds.
   ────────────────────────────────────────────────────────── */
.file-list-toolbar input.form-control.form-control-sm[b-dlji5jtslp] {
    padding-left: 36px !important;
}

.file-list-toolbar .position-relative > .mdi-magnify[b-dlji5jtslp] {
    /* Inline style on the icon has `left: 12px`; we add the size
       clamp via CSS so the glyph can never bleed wider than its
       declared box and into the placeholder text area. */
    font-size: 0.92rem !important;
    line-height: 12px !important;
    width: 12px !important;
    height: 12px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-text-subtle) !important;
}

/* At mobile, bump the input to touch-target height (44 px) and
   widen padding to 44 px for a comfortable gap with the slightly
   larger 14 px icon. */
:root[data-viewport="mobile"]   .file-list-toolbar input.form-control.form-control-sm[b-dlji5jtslp],
:root[data-viewport="mobile-l"] .file-list-toolbar input.form-control.form-control-sm[b-dlji5jtslp] {
    height: var(--touch-target) !important;
    min-height: var(--touch-target) !important;
    font-size: 1rem !important;
    padding-left: 44px !important;
}

:root[data-viewport="mobile"]   .file-list-toolbar .position-relative > .mdi-magnify[b-dlji5jtslp],
:root[data-viewport="mobile-l"] .file-list-toolbar .position-relative > .mdi-magnify[b-dlji5jtslp] {
    font-size: 1.08rem !important;
    line-height: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Search clear button */
.btn-search-clear[b-dlji5jtslp] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-search-clear:hover[b-dlji5jtslp] {
    color: #64748b;
    background-color: #f1f5f9;
}

/* Grid Container */
.files-grid-container[b-dlji5jtslp] {
    width: 100%;
}

/* Header Row */
.files-header-row[b-dlji5jtslp] {
    display: grid;
    grid-template-columns: 1fr 120px 80px 180px 100px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.header-cell[b-dlji5jtslp] {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.header-cell.cell-name[b-dlji5jtslp] {
    padding-left: 0.75rem;
}

.header-cell.cell-actions[b-dlji5jtslp] {
    text-align: right;
    padding-right: 0.75rem;
}

/* Sortable Headers */
.sortable-header[b-dlji5jtslp] {
    cursor: pointer;
    user-select: none;
    transition: all 0.1s ease;
}

.sortable-header:hover[b-dlji5jtslp] {
    background-color: #f1f5f9;
    color: #334155;
}

.sortable-header.active[b-dlji5jtslp] {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-primary);
}

.sort-icon[b-dlji5jtslp] {
    opacity: 0.3;
    margin-left: 3px;
    font-size: 0.6875rem;
}

.sort-icon.active[b-dlji5jtslp] {
    opacity: 1;
    color: var(--bs-primary);
}

/* Virtualized Table Layout */
.virtualized-table-body[b-dlji5jtslp] {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Grid layout for virtual rows */
.file-row-virtual[b-dlji5jtslp] {
    display: grid;
    grid-template-columns: 1fr 120px 80px 180px 100px;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background-color 0.1s ease;
    min-height: 48px;
}

.file-row-virtual:nth-child(even)[b-dlji5jtslp] {
    background-color: #fafbfc;
}

.file-row-virtual:hover[b-dlji5jtslp] {
    background-color: #f1f5f9 !important;
}

/* Processing state */
.file-row-virtual.processing[b-dlji5jtslp] {
    cursor: default;
    background-color: #f8fafc;
    opacity: 0.8;
}

.file-row-virtual.processing:hover[b-dlji5jtslp] {
    background-color: #f8fafc !important;
}

.file-row-virtual .cell[b-dlji5jtslp] {
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cell-specific styles */
.cell-name[b-dlji5jtslp] {
    padding-left: 0.75rem !important;
    min-width: 0;
}

.cell-name .d-flex[b-dlji5jtslp] {
    min-width: 0;
}

.file-icon[b-dlji5jtslp] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.file-name[b-dlji5jtslp] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    min-width: 0;
    flex: 1;
}

.cell-modified[b-dlji5jtslp] {
    white-space: nowrap;
}

.date-main[b-dlji5jtslp] {
    font-weight: 500;
    color: #475569;
    font-size: 0.75rem;
}

.cell-size[b-dlji5jtslp] {
    white-space: nowrap;
}

.file-size[b-dlji5jtslp] {
    font-size: 0.75rem;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.cell-owner[b-dlji5jtslp] {
    min-width: 0;
}

.owner-name[b-dlji5jtslp] {
    font-size: 0.8125rem;
    color: #475569;
    max-width: 140px;
}

/* Action buttons */
.cell-actions[b-dlji5jtslp] {
    text-align: right;
    padding-right: 0.75rem !important;
}

.action-buttons[b-dlji5jtslp] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.action-btn[b-dlji5jtslp] {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: #64748b;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.action-btn:hover[b-dlji5jtslp] {
    background-color: #f1f5f9;
    color: #334155;
}

.action-btn.text-danger:hover[b-dlji5jtslp] {
    background-color: #fef2f2;
    color: #dc2626;
}

.action-btn i[b-dlji5jtslp] {
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .files-header-row[b-dlji5jtslp],
    .file-row-virtual[b-dlji5jtslp] {
        grid-template-columns: 1fr 100px 70px 120px 80px;
    }
}

@media (max-width: 992px) {
    .files-header-row[b-dlji5jtslp],
    .file-row-virtual[b-dlji5jtslp] {
        grid-template-columns: 1fr 100px 70px 80px;
    }
    
    .cell-owner[b-dlji5jtslp],
    .header-cell.cell-owner[b-dlji5jtslp] {
        display: none;
    }
}

@media (max-width: 768px) {
    .files-header-row[b-dlji5jtslp],
    .file-row-virtual[b-dlji5jtslp] {
        grid-template-columns: 1fr 70px 60px;
    }
    
    .cell-modified[b-dlji5jtslp],
    .header-cell.cell-modified[b-dlji5jtslp] {
        display: none;
    }
}
/* /Components/Shared/CompanyNoteEditor.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────
   CompanyNoteEditor scoped CSS — mobile polish only.
   The desktop layout (3-column row with type / subject / save)
   is laid out via Bootstrap's col-md-* utilities and stays
   bit-for-bit identical. At < 768px the columns collapse to
   single-column automatically; this stylesheet adds tap-target
   floors and ensures the Quill editor host has a sensible
   minimum height even when the toolbar wraps to two rows.
   ────────────────────────────────────────────────────────── */

.company-note-editor[b-abnu1tge18] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    /* Touch-target floor for the toolbar inputs and save button. */
    .company-note-editor .form-select-sm[b-abnu1tge18],
    .company-note-editor .form-control-sm[b-abnu1tge18],
    .company-note-editor .btn-sm[b-abnu1tge18] {
        min-height: var(--touch-target);
        font-size: 0.92rem;
    }

    /* The save button starts as col-md-3 (33% width) at desktop and
       collapses to full-width at mobile. Give it a touch of breathing
       room above the editor host. */
    .company-note-editor .col-md-3[b-abnu1tge18] { margin-top: 0.25rem; }

    /* Allow the editor host to grow on tall phones; the desktop 200px
       feels cramped when the toolbar wraps to two rows on a narrow
       viewport. The Quill toolbar may take two rows of wrapping on
       a 375px-wide viewport. */
    .company-note-editor #crm-note-editor[b-abnu1tge18] {
        min-height: 220px !important;
    }

    /* Follow-up checkbox row — wrap and lift label tap targets. */
    .company-note-editor .form-check[b-abnu1tge18] { min-height: var(--touch-target); display: flex; align-items: center; gap: 0.5rem; }
    .company-note-editor input[type="date"].form-control-sm[b-abnu1tge18] {
        width: 100% !important;
        max-width: 200px;
    }
}
/* /Components/Shared/DevSystemSwitcher.razor.rz.scp.css */
.dev-system-switcher[b-jzhqpwc04y] {
    padding: 0.5rem;
    border-top: 1px dashed var(--ct-warning);
    background: rgba(255, 193, 7, 0.05);
}

.dev-system-switcher .btn-outline-warning[b-jzhqpwc04y] {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    border-style: dashed;
}

.dev-system-switcher .dropdown-menu[b-jzhqpwc04y] {
    font-size: 0.8125rem;
    min-width: 100%;
    box-shadow: var(--ct-box-shadow-lg);
}

.dev-system-switcher .dropdown-header[b-jzhqpwc04y] {
    padding: 0.375rem 0.625rem;
}

.dev-system-switcher .dropdown-item[b-jzhqpwc04y] {
    padding: 0.5rem 0.625rem;
    border-radius: 4px;
    margin: 0 0.25rem;
    width: calc(100% - 0.5rem);
}

.dev-system-switcher .dropdown-item.active[b-jzhqpwc04y] {
    background-color: rgba(var(--ct-primary-rgb), 0.1);
    color: var(--ct-primary);
}

.dev-system-switcher .dropdown-item:hover:not(.active)[b-jzhqpwc04y] {
    background-color: var(--ct-tertiary-bg);
}
/* /Components/Shared/DocumentViewerModal.razor.rz.scp.css */
/* Document Viewer Modal Styles */

/* Overlay/backdrop */
.document-viewer-overlay[b-wqmsrwkhae] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1050;
}

/* Modal container */
.document-viewer-modal[b-wqmsrwkhae] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1400px;
    height: 85vh;
    z-index: 1055;
    display: flex;
    flex-direction: column;
}

/* Fullscreen mode */
.document-viewer-modal.fullscreen[b-wqmsrwkhae] {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Inner container with flexbox layout */
.document-viewer-container[b-wqmsrwkhae] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.document-viewer-modal.fullscreen .document-viewer-container[b-wqmsrwkhae] {
    border-radius: 0;
}

/* Mobile: always render the viewer full-screen, regardless of the
   IsFullscreen toggle. The 90% × 85vh desktop layout leaves the modal
   floating in the middle of the viewport with the page chrome still
   visible — at mobile that's wasted space and lets the bottom-tab nav
   poke through underneath. The bottom-tab nav itself is hidden globally
   by user-settings.js's modal watcher (we added `data-modal-active` on
   the markup so the observer picks this up). */
:root[data-viewport="mobile"]   .document-viewer-modal[b-wqmsrwkhae],
:root[data-viewport="mobile-l"] .document-viewer-modal[b-wqmsrwkhae] {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
}

:root[data-viewport="mobile"]   .document-viewer-modal .document-viewer-container[b-wqmsrwkhae],
:root[data-viewport="mobile-l"] .document-viewer-modal .document-viewer-container[b-wqmsrwkhae] {
    border-radius: 0;
    box-shadow: none;
}

/* Header */
.document-viewer-header[b-wqmsrwkhae] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.document-viewer-title[b-wqmsrwkhae] {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    margin-right: 1rem;
}

.document-viewer-filename[b-wqmsrwkhae] {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-viewer-controls[b-wqmsrwkhae] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Body - takes remaining space */
.document-viewer-body[b-wqmsrwkhae] {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.document-viewer-iframe[b-wqmsrwkhae] {
    width: 100%;
    height: 100%;
    border: none;
}

/* Footer - always visible */
.document-viewer-footer[b-wqmsrwkhae] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

/* Text editor styles */
.document-viewer-body textarea[b-wqmsrwkhae] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    tab-size: 4;
}

.document-viewer-body textarea:focus[b-wqmsrwkhae] {
    outline: none;
    box-shadow: none;
}

/* Video container */
.document-viewer-body video[b-wqmsrwkhae] {
    max-height: 100%;
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .document-viewer-modal:not(.fullscreen)[b-wqmsrwkhae] {
        width: 95%;
        height: 90vh;
    }
    
    .document-viewer-filename[b-wqmsrwkhae] {
        max-width: 200px;
    }
}
/* /Components/Shared/DropzoneUpload.razor.rz.scp.css */
/* DropzoneUpload styles */
#ExaminexDropzone[b-xhr4h4t7t2] { min-height: 80px !important; }
#ExaminexDropzone.dz-drag-hover[b-xhr4h4t7t2] { border: 2px dashed green; background-color: #f6fff6; }
.dz-preview.dz-file-preview[b-xhr4h4t7t2] { background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; padding: .5rem .75rem; position: relative; }
.dz-preview .progress[b-xhr4h4t7t2] { background: #f1f1f1; }
#totalUploadProgress.progress[b-xhr4h4t7t2] { height: 6px; background: #f1f1f1; margin-top: .5rem; }

/* Desktop-only / mobile-only message swap. The component renders both
   spans; CSS shows just the one that fits the current viewport. */
.dz-msg-mobile-only[b-xhr4h4t7t2] { display: none; }

:root[data-viewport="mobile"]   .dz-msg-mobile-only[b-xhr4h4t7t2],
:root[data-viewport="mobile-l"] .dz-msg-mobile-only[b-xhr4h4t7t2] {
    display: inline;
}

:root[data-viewport="mobile"]   .dz-msg-desktop-only[b-xhr4h4t7t2],
:root[data-viewport="mobile-l"] .dz-msg-desktop-only[b-xhr4h4t7t2] {
    display: none !important;
}

/* Mobile: compact dropzone — drag-and-drop is meaningless on a phone, so
   we lose the dotted-border hero treatment and shrink to a single tap
   target the height of a button. The cloud icon drops a font size and
   the headline becomes a single short line. The .needsclick class on
   the dz-message keeps tap-to-select working via Dropzone's internal
   handlers, so the native file picker still opens. */
:root[data-viewport="mobile"]   #ExaminexDropzone[b-xhr4h4t7t2],
:root[data-viewport="mobile-l"] #ExaminexDropzone[b-xhr4h4t7t2] {
    min-height: 0 !important;
    padding: var(--space-3) !important;
    border-style: solid !important;
    border-radius: var(--radius-md) !important;
}

:root[data-viewport="mobile"]   #ExaminexDropzone .dz-message[b-xhr4h4t7t2],
:root[data-viewport="mobile-l"] #ExaminexDropzone .dz-message[b-xhr4h4t7t2] {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
    flex-direction: row;
}

:root[data-viewport="mobile"]   #ExaminexDropzone .dz-cloud-icon[b-xhr4h4t7t2],
:root[data-viewport="mobile-l"] #ExaminexDropzone .dz-cloud-icon[b-xhr4h4t7t2] {
    font-size: 1.5rem !important;
    margin: 0 !important;
    flex-shrink: 0;
}

:root[data-viewport="mobile"]   #ExaminexDropzone .dz-msg-headline[b-xhr4h4t7t2],
:root[data-viewport="mobile-l"] #ExaminexDropzone .dz-msg-headline[b-xhr4h4t7t2] {
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 500;
    flex: 1;
}
/* /Components/Shared/EmailCaseSearchModal.razor.rz.scp.css */
.case-search-results[b-uzqp2muto1] {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--ct-border-color, #e5e7eb);
    border-radius: 6px;
}

.case-search-results .table thead.sticky-top th[b-uzqp2muto1] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--ct-tertiary-bg, #f8fafc);
    border-bottom: 1px solid var(--ct-border-color, #e5e7eb);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ct-secondary-color, #6b7280);
}

.case-search-results .table tbody tr:hover[b-uzqp2muto1] {
    background: rgba(var(--ct-primary-rgb, 74, 144, 226), 0.06);
}
/* /Components/Shared/FileList.razor.rz.scp.css */
/* FileList component styles */

/* Container */
.file-list-container[b-wt6x27qlcm] {
    padding: 0;
}

/* Card header with search + stats */
.file-list-header[b-wt6x27qlcm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0.375rem 0.375rem 0 0;
}

.file-list-search[b-wt6x27qlcm] {
    flex: 0 1 220px;
    min-width: 140px;
}

/* Inner shell containing the magnifier icon + the input. Replaces the
   inline-styled <i style="left: 10px; …"> pattern with stable CSS so we
   can guarantee no overlap with the placeholder text regardless of
   font-scale or touch-target height tweaks. */
.file-list-search-shell[b-wt6x27qlcm] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Icon — explicit pixel sizing (NOT rem) so the user's font-scale
   preference can't grow the icon and push it into the placeholder
   text. Box clamped to 12 px so the glyph can never bleed past it. */
.file-list-search-icon[b-wt6x27qlcm] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-subtle);
    font-size: 0.92rem !important;
    line-height: 12px;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

/* The input's left padding is the SINGLE source of truth for keeping
   the placeholder text clear of the magnifier icon. We use a large
   absolute pixel value (not rem — font-scale must not narrow the
   gap) with high specificity + !important so it always wins.

   Layout: icon sits at left:10, max 12 px wide → right edge ≤ 22 px.
   Padding-left at 36 px gives ~14 px of clear space. The previous
   28 px / 38 px / 44 px attempts kept showing collision in screenshots
   reported by the user, which suggested either the browser was using
   cached CSS, or the icon glyph was rendering past its declared box.
   Tighter icon + still-generous padding makes the result obvious. */
.file-list-search input.file-list-search-input[b-wt6x27qlcm] {
    font-size: 0.8125rem !important;
    padding-left: 36px !important;
    height: 30px;
    background-color: #fff !important;
    border: 1px solid #e2e8f0 !important;
}

/* At mobile, bump the input to the touch-target height (44 px) so the
   search row is comfortably tappable. Padding-left grows to 44 px to
   accommodate the slightly larger 14 px icon. */
:root[data-viewport="mobile"]   .file-list-search input.file-list-search-input[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-search input.file-list-search-input[b-wt6x27qlcm] {
    height: var(--touch-target) !important;
    min-height: var(--touch-target) !important;
    font-size: 1rem !important;
    padding-left: 44px !important;
}

:root[data-viewport="mobile"]   .file-list-search-icon[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-search-icon[b-wt6x27qlcm] {
    font-size: 1.08rem !important;
    line-height: 14px;
    width: 14px;
    height: 14px;
    left: 12px;
}

/* Belt-and-braces for the OLD inline-styled icon markup. The original
   `<i class="mdi mdi-magnify position-absolute" style="left: 10px; …">`
   is still rendered until the dev server picks up the updated
   component. We force-clamp it via `.mdi.mdi-magnify` (higher
   specificity than `.mdi-magnify`) inside `.file-list-search`. Box
   capped to 12 px so the glyph cannot overflow into the placeholder
   area. */
.file-list-search .mdi.mdi-magnify[b-wt6x27qlcm] {
    position: absolute !important;
    font-size: 0.92rem !important;
    line-height: 12px !important;
    width: 12px !important;
    height: 12px !important;
    left: 10px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

:root[data-viewport="mobile"]   .file-list-search .mdi.mdi-magnify[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-search .mdi.mdi-magnify[b-wt6x27qlcm] {
    font-size: 1.08rem !important;
    line-height: 14px !important;
    width: 14px !important;
    height: 14px !important;
    left: 12px !important;
}

/* EXTRA belt-and-braces: directly target the input by its class with the
   highest reasonable specificity, in case some other Bootstrap rule
   (e.g. `.input-group > .form-control` or `.form-control-sm.pe-5`) is
   competing. Repeating the class boosts specificity without needing
   `!important` chains. */
input.file-list-search-input.file-list-search-input[b-wt6x27qlcm] {
    padding-left: 36px !important;
}

:root[data-viewport="mobile"]   input.file-list-search-input.file-list-search-input[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] input.file-list-search-input.file-list-search-input[b-wt6x27qlcm] {
    padding-left: 44px !important;
}

.file-list-search-input:focus[b-wt6x27qlcm] {
    border-color: #4a90a4 !important;
    box-shadow: 0 0 0 0.15rem rgba(74, 144, 164, 0.15) !important;
}

.file-list-stats[b-wt6x27qlcm] {
    white-space: nowrap;
}

.file-list-header-actions[b-wt6x27qlcm] {
    flex-shrink: 0;
}

/* Search clear button */
.btn-search-clear[b-wt6x27qlcm] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 0.75rem;
}

.btn-search-clear:hover[b-wt6x27qlcm] {
    color: #64748b;
    background-color: #f1f5f9;
}

/* Grid Container */
.files-grid-container[b-wt6x27qlcm] {
    width: 100%;
}

/* Header Row */
.files-header-row[b-wt6x27qlcm] {
    display: grid;
    grid-template-columns: 1fr 120px 80px 180px 70px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
    z-index: 2;
    padding-right: 8px;
}

/* Header row with admin columns */
.files-grid-container.with-admin-columns .files-header-row[b-wt6x27qlcm] {
    grid-template-columns: 1fr 120px 100px 80px 90px 160px 70px;
}

.header-cell[b-wt6x27qlcm] {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.header-cell.cell-name[b-wt6x27qlcm] {
    padding-left: 0.75rem;
}

.header-cell.cell-actions[b-wt6x27qlcm] {
    text-align: right;
    padding-right: 0.75rem;
}

/* Sortable Headers */
.sortable-header[b-wt6x27qlcm] {
    cursor: pointer;
    user-select: none;
    transition: all 0.1s ease;
}

.sortable-header:hover[b-wt6x27qlcm] {
    background-color: #f1f5f9;
    color: #334155;
}

.sortable-header.active[b-wt6x27qlcm] {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-primary);
}

.sort-icon[b-wt6x27qlcm] {
    opacity: 0.3;
    margin-left: 3px;
    font-size: 0.6875rem;
}

.sort-icon.active[b-wt6x27qlcm] {
    opacity: 1;
    color: var(--bs-primary);
}

/* Virtualized Table Layout */
.virtualized-table-body[b-wt6x27qlcm] {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Grid layout for virtual rows - NON-ADMIN (no visibility/download columns) */
.file-row-virtual[b-wt6x27qlcm] {
    display: grid;
    grid-template-columns: 1fr 120px 80px 180px 70px;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
    min-height: 48px;
}

/* Grid layout WITH admin columns */
.files-grid-container.with-admin-columns .file-row-virtual[b-wt6x27qlcm] {
    grid-template-columns: 1fr 120px 100px 80px 90px 160px 70px;
}

.file-row-virtual:nth-child(even)[b-wt6x27qlcm] {
    background-color: #fafbfc;
}

.file-row-virtual:hover[b-wt6x27qlcm] {
    background-color: #f1f5f9 !important;
    border-left-color: #4a90a4;
}

.file-row-virtual.processing[b-wt6x27qlcm] {
    background-color: #fffbeb;
}

.file-row-virtual .cell[b-wt6x27qlcm] {
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cell-specific styles */
.cell-name[b-wt6x27qlcm] {
    padding-left: 0.75rem !important;
    min-width: 0;
}

.cell-name .d-flex[b-wt6x27qlcm] {
    min-width: 0;
}

.file-icon[b-wt6x27qlcm] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.file-name[b-wt6x27qlcm] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    min-width: 0;
    flex: 1;
}

.cell-modified[b-wt6x27qlcm] {
    white-space: nowrap;
}

.date-main[b-wt6x27qlcm] {
    font-weight: 500;
    color: #475569;
    font-size: 0.75rem;
}

.cell-size[b-wt6x27qlcm] {
    white-space: nowrap;
}

.file-size[b-wt6x27qlcm] {
    font-size: 0.75rem;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.cell-owner[b-wt6x27qlcm] {
    min-width: 0;
}

.owner-name[b-wt6x27qlcm] {
    font-size: 0.8125rem;
    color: #475569;
    max-width: 140px;
}

/* Visibility buttons */
.cell-visibility[b-wt6x27qlcm] {
    white-space: nowrap;
}

.visibility-btn[b-wt6x27qlcm] {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1rem;
}

.visibility-btn:hover[b-wt6x27qlcm] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.visibility-btn.active[b-wt6x27qlcm] {
    background-color: #f0fdf4;
    border-color: #86efac;
}

.visibility-btn i[b-wt6x27qlcm] {
    font-size: 0.875rem;
}

/* Download toggle button */
.cell-download[b-wt6x27qlcm] {
    white-space: nowrap;
}

.download-toggle-btn[b-wt6x27qlcm] {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #94a3b8;
}

.download-toggle-btn:hover[b-wt6x27qlcm] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.download-toggle-btn.enabled[b-wt6x27qlcm] {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
}

.download-toggle-btn i[b-wt6x27qlcm] {
    font-size: 1rem;
}

/* Action buttons */
.cell-actions[b-wt6x27qlcm] {
    text-align: right;
    padding-right: 0.75rem !important;
}

.action-buttons[b-wt6x27qlcm] {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
}

.action-btn[b-wt6x27qlcm] {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: #64748b;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.action-btn:hover[b-wt6x27qlcm] {
    background-color: #f1f5f9;
    color: #334155;
}

.action-btn.text-danger:hover[b-wt6x27qlcm] {
    background-color: #fef2f2;
    color: #dc2626;
}

.action-btn.text-info:hover[b-wt6x27qlcm] {
    background-color: #f0f9ff;
    color: #0284c7;
}

.action-btn i[b-wt6x27qlcm] {
    font-size: 1rem;
}

/* Action overflow dropdown */
.action-dropdown-backdrop[b-wt6x27qlcm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1040;
    cursor: default;
}

.action-dropdown-menu[b-wt6x27qlcm] {
    position: fixed;
    z-index: 1050;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
}

.action-dropdown-item[b-wt6x27qlcm] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    color: #334155;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s ease;
}

.action-dropdown-item:hover[b-wt6x27qlcm] {
    background-color: #f1f5f9;
}

.action-dropdown-item.text-danger[b-wt6x27qlcm] {
    color: #dc2626;
}

.action-dropdown-item.text-danger:hover[b-wt6x27qlcm] {
    background-color: #fef2f2;
}

/* Document type badge */
.doc-type-badge[b-wt6x27qlcm] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}

/* Type selector menu */
.type-selector-menu[b-wt6x27qlcm] {
    max-height: 320px;
    overflow-y: auto;
}

.type-selector-header[b-wt6x27qlcm] {
    padding: 0.4rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.type-selector-divider[b-wt6x27qlcm] {
    height: 1px;
    background-color: #e2e8f0;
    margin: 0.125rem 0;
}

.action-dropdown-item.type-selected[b-wt6x27qlcm] {
    background-color: #f0fdf4;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .files-header-row[b-wt6x27qlcm],
    .file-row-virtual[b-wt6x27qlcm] {
        grid-template-columns: 1fr 100px 70px 120px 70px;
    }

    .files-grid-container.with-admin-columns .files-header-row[b-wt6x27qlcm],
    .files-grid-container.with-admin-columns .file-row-virtual[b-wt6x27qlcm] {
        grid-template-columns: 1fr 100px 90px 70px 70px 120px 70px;
    }
}

@media (max-width: 992px) {
    .files-header-row[b-wt6x27qlcm],
    .file-row-virtual[b-wt6x27qlcm] {
        grid-template-columns: 1fr 100px 70px 70px;
    }

    .files-grid-container.with-admin-columns .files-header-row[b-wt6x27qlcm],
    .files-grid-container.with-admin-columns .file-row-virtual[b-wt6x27qlcm] {
        grid-template-columns: 1fr 100px 70px 70px;
    }
    
    .cell-visibility[b-wt6x27qlcm],
    .cell-download[b-wt6x27qlcm],
    .cell-owner[b-wt6x27qlcm],
    .header-cell.cell-visibility[b-wt6x27qlcm],
    .header-cell.cell-download[b-wt6x27qlcm],
    .header-cell.cell-owner[b-wt6x27qlcm] {
        display: none;
    }
}

@media (max-width: 768px) {
    .files-header-row[b-wt6x27qlcm],
    .file-row-virtual[b-wt6x27qlcm],
    .files-grid-container.with-admin-columns .files-header-row[b-wt6x27qlcm],
    .files-grid-container.with-admin-columns .file-row-virtual[b-wt6x27qlcm] {
        grid-template-columns: 1fr 70px 70px;
    }

    .cell-modified[b-wt6x27qlcm],
    .header-cell.cell-modified[b-wt6x27qlcm] {
        display: none;
    }
}

/* ============================================================
   Mobile header — hide the file count + total size stats so the Create
   New Document button has room to render in full instead of being cut
   off at the right edge. The search input takes the remaining space.
   ============================================================ */
:root[data-viewport="mobile"]   .file-list-header[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-header[b-wt6x27qlcm] {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    flex-wrap: nowrap;
}

:root[data-viewport="mobile"]   .file-list-stats[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-stats[b-wt6x27qlcm] {
    display: none;
}

:root[data-viewport="mobile"]   .file-list-search[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-search[b-wt6x27qlcm] {
    flex: 1 1 auto;
    min-width: 0;
}

:root[data-viewport="mobile"]   .file-list-header-actions[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-header-actions[b-wt6x27qlcm] {
    flex-shrink: 0;
}

/* The Create-Document dropdown trigger keeps its label intact; nowrap
   guards against any flex layout trying to break the text. */
:root[data-viewport="mobile"]   .file-list-header-actions .dropdown-toggle[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-list-header-actions .dropdown-toggle[b-wt6x27qlcm] {
    white-space: nowrap;
}

/* ============================================================
   Mobile-stack reflow for the file list.
   Layout collapses to 3 columns: NAME (1fr) | SIZE (auto) | ACTIONS (44 px).
   Modified, visibility, owner, download cells all hide on mobile —
   they're either too dense for a phone (modified date, owner name) or
   the action they expose has been moved into the dropdown action menu
   (visibility & download toggle live there for admins now).
   The dropdown menu itself becomes a bottom-anchored sheet so it has
   space for full labels + 44 px tappable rows.
   ============================================================ */
:root[data-viewport="mobile"]   .files-header-row[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .files-header-row[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .file-row-virtual[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-row-virtual[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .files-grid-container.with-admin-columns .files-header-row[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .files-grid-container.with-admin-columns .files-header-row[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .files-grid-container.with-admin-columns .file-row-virtual[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .files-grid-container.with-admin-columns .file-row-virtual[b-wt6x27qlcm] {
    grid-template-columns: 1fr auto 44px !important;
}

:root[data-viewport="mobile"]   .cell-modified[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .cell-modified[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .header-cell.cell-modified[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .header-cell.cell-modified[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .cell-visibility[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .cell-visibility[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .header-cell.cell-visibility[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .header-cell.cell-visibility[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .cell-download[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .cell-download[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .header-cell.cell-download[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .header-cell.cell-download[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .cell-owner[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .cell-owner[b-wt6x27qlcm],
:root[data-viewport="mobile"]   .header-cell.cell-owner[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .header-cell.cell-owner[b-wt6x27qlcm] {
    display: none !important;
}

/* Action button — 36px touch-target, centred in the 44px column. */
:root[data-viewport="mobile"]   .file-row-virtual .action-btn[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-row-virtual .action-btn[b-wt6x27qlcm] {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:root[data-viewport="mobile"]   .file-row-virtual .action-btn i[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .file-row-virtual .action-btn i[b-wt6x27qlcm] {
    font-size: 1.25rem;
}

/* Mobile size column — narrow + right-aligned so the value reads at a
   glance without dominating the row. */
:root[data-viewport="mobile"]   .cell-size[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .cell-size[b-wt6x27qlcm] {
    text-align: right;
    padding-right: var(--space-2);
}

/* The action-dropdown-menu uses `position: fixed` with JS-calculated
   coordinates from the click event. On mobile that's brittle (rows near
   the bottom of the viewport place the menu off-screen) and the menu
   items are too small to tap. Override to a bottom-sheet pattern with
   touch-target rows. */
:root[data-viewport="mobile"]   .action-dropdown-menu[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .action-dropdown-menu[b-wt6x27qlcm] {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100%;
    min-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-2);
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    animation: file-list-sheet-slide-up-b-wt6x27qlcm var(--duration-enter) var(--ease-enter);
}

@keyframes file-list-sheet-slide-up-b-wt6x27qlcm {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

:root[data-viewport="mobile"]   .action-dropdown-item[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .action-dropdown-item[b-wt6x27qlcm] {
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    font-size: 0.96rem;
    border-radius: var(--radius-sm);
}

:root[data-viewport="mobile"]   .action-dropdown-item i[b-wt6x27qlcm],
:root[data-viewport="mobile-l"] .action-dropdown-item i[b-wt6x27qlcm] {
    font-size: 1.15rem;
}
/* /Components/Shared/FullCaseNoteEditor.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────
   FullCaseNoteEditor scoped CSS — visibility toggle styling
   + mobile polish.
   ────────────────────────────────────────────────────────── */

/* "Visible to" role toggles — make the selected state obvious.
   Bootstrap's default `.btn-check:checked + .btn-outline-secondary`
   swap is a subtle gray-on-gray pill that's hard to distinguish from
   the unchecked state against the page's panel chrome. Override with
   the Orcanex accent colour for the selected state: solid background,
   white text, and a soft outer ring. Hover (unchecked) gets a faint
   accent tint so the buttons read as interactive. */
.btn-check + .btn-outline-secondary[b-qyhcxth48l] {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    background-color: var(--color-panel);
    font-weight: 500;
    transition: background-color var(--duration-hover, 120ms) ease,
                border-color var(--duration-hover, 120ms) ease,
                color var(--duration-hover, 120ms) ease,
                box-shadow var(--duration-hover, 120ms) ease;
}

.btn-check + .btn-outline-secondary:hover[b-qyhcxth48l] {
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-check:checked + .btn-outline-secondary[b-qyhcxth48l],
.btn-check:checked + .btn-outline-secondary:hover[b-qyhcxth48l] {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.btn-check:checked + .btn-outline-secondary[b-qyhcxth48l]::before {
    /* Inline checkmark glyph — makes the selected state even more
       obvious at a glance, especially for users with reduced colour
       sensitivity. Uses the Material Design Icons font already loaded
       app-wide. */
    content: "\F012C";          /* mdi-check */
    font-family: "Material Design Icons";
    font-weight: normal;
    margin-right: 4px;
    font-size: 0.95em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.btn-check:focus-visible + .btn-outline-secondary[b-qyhcxth48l] {
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

/* ──────────────────────────────────────────────────────────
   Mobile polish — visibility group + Save button wrap onto
   their own rows; tap targets lifted to 44px; editor host
   stretches a touch taller.
   ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Visibility toggle group (.btn-group) wraps onto its own row at
       mobile; the Save button drops below it. Bootstrap's flex-wrap
       on the parent .d-flex.flex-wrap already enables this — we just
       lift the touch targets. */
    .btn-group .btn[b-qyhcxth48l],
    .btn-group .btn-check + label[b-qyhcxth48l] {
        min-height: var(--touch-target);
    }
    .btn-primary.btn-sm[b-qyhcxth48l] {
        min-height: var(--touch-target);
        font-size: 0.92rem;
    }

    /* Editor host — desktop is 60vh, which is fine on phones too, but
       guarantee a minimum 240px so the writing surface is usable even
       on short landscape viewports. */
    #snow-editor[b-qyhcxth48l] {
        min-height: 240px !important;
    }
}
/* /Components/Shared/GroupedLogList.razor.rz.scp.css */
/* ========================================================
   GroupedLogList — parent/child card layout shared by the
   SessionLogViewer slide-out and the /admin/logs page.
   ======================================================== */

.glv-root[b-q61vak3xfe] {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

/* ── Stats bar ─────────────────────────────────────────── */
.glv-stats-bar[b-q61vak3xfe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.glv-stat[b-q61vak3xfe] { display: inline-flex; align-items: center; color: #475569; }
.glv-stat-error[b-q61vak3xfe] { color: #dc2626; font-weight: 600; }
.glv-stat-warn[b-q61vak3xfe] { color: #b45309; font-weight: 600; }
.glv-stat-sep[b-q61vak3xfe] { color: #cbd5e1; }

/* ── Toolbar: search + sort ─────────────────────────────── */
.glv-toolbar[b-q61vak3xfe] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.glv-search-wrap[b-q61vak3xfe] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.glv-search-icon[b-q61vak3xfe] {
    position: absolute;
    left: 0.55rem;
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}

.glv-search-input[b-q61vak3xfe] {
    width: 100%;
    padding: 0.3rem 2rem 0.3rem 1.9rem;
    font-size: 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.glv-search-input:focus[b-q61vak3xfe] {
    border-color: #0f6fec;
    box-shadow: 0 0 0 3px rgba(15, 111, 236, 0.12);
    background: #fff;
}

.glv-search-input[b-q61vak3xfe]::placeholder { color: #94a3b8; }
.glv-search-input[b-q61vak3xfe]::-webkit-search-cancel-button { display: none; }

.glv-search-clear[b-q61vak3xfe] {
    position: absolute;
    right: 0.4rem;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.glv-search-clear:hover[b-q61vak3xfe] { color: #dc2626; }

.glv-sort-btn[b-q61vak3xfe] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.glv-sort-btn:hover[b-q61vak3xfe] { background: #e0e7ff; border-color: #c7d2fe; color: #4338ca; }
.glv-sort-desc[b-q61vak3xfe] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* ── Empty state ────────────────────────────────────────── */
.glv-empty[b-q61vak3xfe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.glv-empty-icon[b-q61vak3xfe] { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 0.75rem; }
.glv-empty-title[b-q61vak3xfe] { font-size: 0.9rem; font-weight: 600; color: #475569; margin: 0 0 0.3rem; }
.glv-empty-sub[b-q61vak3xfe] { font-size: 0.8rem; color: #94a3b8; margin: 0; line-height: 1.5; }

/* ── Group list ─────────────────────────────────────────── */
.glv-groups[b-q61vak3xfe] { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; }

.glv-group[b-q61vak3xfe] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.glv-group:hover[b-q61vak3xfe] { box-shadow: 0 2px 8px rgba(15, 111, 236, 0.07); }
.glv-group-active[b-q61vak3xfe] { box-shadow: 0 0 0 2px #0f6fec40; border-color: #0f6fec80; }

/* ── Level accent strip ─────────────────────────────────── */
.glv-level-debug[b-q61vak3xfe] { border-left: 3px solid #94a3b8; }
.glv-level-info[b-q61vak3xfe]  { border-left: 3px solid #60a5fa; }
.glv-level-warn[b-q61vak3xfe]  { border-left: 3px solid #f59e0b; }
.glv-level-error[b-q61vak3xfe] { border-left: 3px solid #f87171; }

/* ── Parent row ─────────────────────────────────────────── */
.glv-parent[b-q61vak3xfe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    transition: background 0.1s;
    background: #fff;
}

.glv-parent:hover[b-q61vak3xfe] { background: #f8faff; }

.glv-parent-left[b-q61vak3xfe] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1;
}

.glv-parent-right[b-q61vak3xfe] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ── Log-type icon badge ────────────────────────────────── */
.glv-logtype-badge[b-q61vak3xfe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.glv-logtype-sm[b-q61vak3xfe] { width: 1.3rem; height: 1.3rem; font-size: 0.72rem; border-radius: 0.25rem; }

/* Badge colour per log type */
.glv-logtype-sql[b-q61vak3xfe]        { background: #dbeafe; color: #1d4ed8; }
.glv-logtype-api[b-q61vak3xfe]        { background: #e0e7ff; color: #4338ca; }
.glv-logtype-auth[b-q61vak3xfe],
.glv-logtype-authentication[b-q61vak3xfe] { background: #fef3c7; color: #92400e; }
.glv-logtype-system[b-q61vak3xfe]     { background: #e0f2fe; color: #0369a1; }
.glv-logtype-error[b-q61vak3xfe],
.glv-logtype-critical[b-q61vak3xfe]   { background: #fee2e2; color: #dc2626; }
.glv-logtype-warning[b-q61vak3xfe]    { background: #fef9c3; color: #a16207; }
.glv-logtype-webrequest[b-q61vak3xfe] { background: #dcfce7; color: #166534; }
.glv-logtype-hangfire[b-q61vak3xfe]   { background: #f3e8ff; color: #7c3aed; }
.glv-logtype-ai[b-q61vak3xfe]         { background: #fce7f3; color: #be185d; }
.glv-logtype-info[b-q61vak3xfe],
.glv-logtype-pageload[b-q61vak3xfe]   { background: #e0f2fe; color: #0369a1; }

/* ── Timestamps, messages, durations ────────────────────── */
.glv-time[b-q61vak3xfe] {
    font-size: 0.74rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Cascadia Code', monospace;
}

.glv-msg[b-q61vak3xfe] {
    font-size: 0.85rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.glv-duration-pill[b-q61vak3xfe] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.glv-duration-sm[b-q61vak3xfe] { font-size: 0.66rem; }

/* ── Caret icons ────────────────────────────────────────── */
.glv-detail-caret[b-q61vak3xfe]      { color: #cbd5e1; font-size: 0.85rem; transition: color 0.15s; }
.glv-detail-caret-open[b-q61vak3xfe] { color: #0f6fec; font-size: 0.85rem; }

/* ── Children toggle button ─────────────────────────────── */
.glv-children-btn[b-q61vak3xfe] {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.glv-children-btn:hover[b-q61vak3xfe] { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }

/* ── Children list ──────────────────────────────────────── */
.glv-children-list[b-q61vak3xfe] {
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.glv-child[b-q61vak3xfe] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem 0.4rem 2.5rem;
    cursor: pointer;
    font-size: 0.82rem;
    border-top: 1px solid #f1f5f9;
    transition: background 0.1s;
    background: transparent;
}

.glv-child:first-child[b-q61vak3xfe] { border-top: none; }
.glv-child:hover[b-q61vak3xfe] { background: #eef2ff; }
.glv-child-active[b-q61vak3xfe] { background: #eef2ff !important; }

/* ── Collapsed summary chips ────────────────────────────── */
.glv-child-summary[b-q61vak3xfe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.45rem 0.95rem 0.45rem 2.5rem;
    background: #f8fafc;
    border-top: 1px dashed #e2e8f0;
}

.glv-chip[b-q61vak3xfe] {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 500;
    background: #e2e8f0;
    color: #64748b;
}

.glv-chip-sql[b-q61vak3xfe]        { background: #dbeafe; color: #1d4ed8; }
.glv-chip-api[b-q61vak3xfe]        { background: #e0e7ff; color: #4338ca; }
.glv-chip-hangfire[b-q61vak3xfe]   { background: #f3e8ff; color: #7c3aed; }
.glv-chip-webrequest[b-q61vak3xfe] { background: #dcfce7; color: #166534; }
.glv-chip-auth[b-q61vak3xfe]       { background: #fef3c7; color: #92400e; }
.glv-chip-system[b-q61vak3xfe]     { background: #e0f2fe; color: #0369a1; }

/* ── Event detail panel ─────────────────────────────────── */
.glv-event-detail[b-q61vak3xfe] {
    background: #1e1e2e;
    border-top: 1px solid #2d2d42;
    padding: 0.85rem 1.1rem;
    color: #cdd6f4;
}

.glv-event-detail-child[b-q61vak3xfe] { padding-left: 2.5rem; }

/* ::deep ensures styles apply to elements rendered from RenderFragment in the code-behind. */
[b-q61vak3xfe] .glv-sql-header,
[b-q61vak3xfe] .glv-api-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

[b-q61vak3xfe] .glv-sql-op {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #1d4ed8;
    color: #fff;
    padding: 0.18rem 0.55rem;
    border-radius: 0.25rem;
}

[b-q61vak3xfe] .glv-sql-table {
    font-size: 0.74rem;
    font-family: 'Consolas', 'Cascadia Code', monospace;
    color: #94a3b8;
    background: #2d2d42;
    padding: 0.18rem 0.55rem;
    border-radius: 0.25rem;
}

/* SQL statement — bright green on near-black */
[b-q61vak3xfe] .glv-sql-block {
    background: #0d1117;
    color: #3fb950;
    font-size: 0.78rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.4rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 0 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace;
    border: 1px solid #30363d;
    line-height: 1.6;
}

/* Parameters label */
[b-q61vak3xfe] .glv-sql-params-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #f7c948;
    margin-bottom: 0.3rem;
    margin-top: 0.2rem;
}

/* Parameters table — name | value | type rows on dark background */
[b-q61vak3xfe] .glv-sql-params-table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1500;
    border: 1px solid #3d3000;
    border-radius: 0.4rem;
    overflow: hidden;
    margin-bottom: 0.6rem;
    font-family: 'Consolas', 'Cascadia Code', monospace;
}

[b-q61vak3xfe] .glv-sql-params-table tr { border-bottom: 1px solid #2d2200; }
[b-q61vak3xfe] .glv-sql-params-table tr:last-child { border-bottom: none; }

[b-q61vak3xfe] .glv-sql-param-name {
    color: #f7c948;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
    width: 30%;
    font-size: 0.74rem;
}

[b-q61vak3xfe] .glv-sql-param-value {
    color: #e9d5a0;
    padding: 0.35rem 0.7rem;
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 0.74rem;
}

[b-q61vak3xfe] .glv-sql-param-type {
    color: #8a7330;
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
    width: 18%;
    text-transform: lowercase;
    text-align: right;
}

/* ── API status badges ──────────────────────────────────── */
[b-q61vak3xfe] .glv-status-ok  { font-size: 0.7rem; font-weight: 700; background: #166534; color: #dcfce7; padding: 0.18rem 0.55rem; border-radius: 0.25rem; }
[b-q61vak3xfe] .glv-status-err { font-size: 0.7rem; font-weight: 700; background: #991b1b; color: #fee2e2; padding: 0.18rem 0.55rem; border-radius: 0.25rem; }

/* ── Generic properties table ───────────────────────────── */
[b-q61vak3xfe] .glv-props-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; margin-top: 0.5rem; }

[b-q61vak3xfe] .glv-props-table tr { border-bottom: 1px solid #2d2d42; }
[b-q61vak3xfe] .glv-props-table tr:last-child { border-bottom: none; }
[b-q61vak3xfe] .glv-props-table tr:hover td { background: #25253a; }

[b-q61vak3xfe] .glv-prop-key {
    color: #89b4fa;
    padding: 0.3rem 0.85rem 0.3rem 0;
    white-space: nowrap;
    vertical-align: top;
    width: 32%;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

[b-q61vak3xfe] .glv-prop-val {
    color: #cdd6f4;
    word-break: break-word;
    white-space: pre-wrap;
    padding: 0.3rem 0;
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: 0.74rem;
    vertical-align: top;
}

/* ── Exception block ────────────────────────────────────── */
[b-q61vak3xfe] .glv-exception {
    background: #2d0f0f;
    border: 1px solid #7f1d1d;
    border-radius: 0.35rem;
    font-size: 0.74rem;
    padding: 0.7rem 0.85rem;
    margin-top: 0.5rem;
    white-space: pre-wrap;
    max-height: 280px;
    overflow-y: auto;
    color: #fca5a5;
    font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   Mobile (< 768px). The desktop list is information-dense
   with 0.66–0.78rem text on tight rows; on a phone we lift
   the smallest text up to ≥ 0.78rem so it's readable, give
   each parent row a 44px tap surface, and let the toolbar
   wrap. Desktop sizing is untouched.
   ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .glv-stats-bar[b-q61vak3xfe] {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.82rem;
    }
    .glv-toolbar[b-q61vak3xfe] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .glv-search-input[b-q61vak3xfe] { font-size: 0.92rem; min-height: var(--touch-target); padding-top: 0.45rem; padding-bottom: 0.45rem; }
    .glv-sort-btn[b-q61vak3xfe] { font-size: 0.82rem; min-height: var(--touch-target); padding: 0.45rem 0.8rem; }

    .glv-groups[b-q61vak3xfe] { padding: 0.5rem; gap: 0.4rem; }

    /* Parent row — bump to a 44px tap surface. */
    .glv-parent[b-q61vak3xfe] {
        min-height: var(--touch-target);
        padding: 0.6rem 0.75rem;
        gap: 0.45rem;
    }
    .glv-parent-left[b-q61vak3xfe] { gap: 0.45rem; flex-wrap: wrap; }
    .glv-time[b-q61vak3xfe] { font-size: 0.82rem; }
    .glv-msg[b-q61vak3xfe] { font-size: 0.88rem; white-space: normal; line-height: 1.35; }

    /* Child rows align flush at mobile — no 2.5rem indent (saves horizontal
       space; the parent border-left is still visible). */
    .glv-child[b-q61vak3xfe],
    .glv-child-summary[b-q61vak3xfe] { padding-left: 0.75rem; padding-right: 0.75rem; }
    .glv-child[b-q61vak3xfe] { font-size: 0.85rem; min-height: 40px; }

    /* Duration pills and chips lift their type. */
    .glv-duration-pill[b-q61vak3xfe] { font-size: 0.78rem; padding: 0.18rem 0.55rem; }
    .glv-duration-sm[b-q61vak3xfe] { font-size: 0.78rem; }
    .glv-children-btn[b-q61vak3xfe] { font-size: 0.8rem; padding: 0.25rem 0.6rem; min-height: 32px; }
    .glv-chip[b-q61vak3xfe] { font-size: 0.78rem; padding: 0.2rem 0.55rem; }

    /* Event detail panel — slightly more breathing room. */
    .glv-event-detail[b-q61vak3xfe] { padding: 0.85rem; }
    .glv-event-detail-child[b-q61vak3xfe] { padding-left: 0.85rem; }
    [b-q61vak3xfe] .glv-sql-block,
    [b-q61vak3xfe] .glv-exception { font-size: 0.82rem; }
    [b-q61vak3xfe] .glv-props-table,
    [b-q61vak3xfe] .glv-prop-key,
    [b-q61vak3xfe] .glv-prop-val { font-size: 0.82rem; }
    [b-q61vak3xfe] .glv-sql-param-name,
    [b-q61vak3xfe] .glv-sql-param-value { font-size: 0.8rem; }
}
/* /Components/Shared/HelpIcon.razor.rz.scp.css */
/* ============================================
   HELP ICON COMPONENT
   ============================================ */

.help-icon-wrapper[b-0ymduuqdvf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: 0.25rem;
}

.help-icon-trigger[b-0ymduuqdvf] {
    font-size: 0.875rem;
    color: #94a3b8;
    transition: color 0.15s;
}

.help-icon-wrapper:hover .help-icon-trigger[b-0ymduuqdvf] {
    color: #0081B8;
}

.help-icon-popover[b-0ymduuqdvf] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    width: 240px;
    max-width: 280px;
    z-index: 1080;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: helpPopIn-b-0ymduuqdvf 0.15s ease-out;
    pointer-events: none;
}

.help-icon-popover[b-0ymduuqdvf]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}

@keyframes helpPopIn-b-0ymduuqdvf {
    from { opacity: 0; transform: translateX(-50%) translateY(2px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* /Components/Shared/HierarchicalLogList.razor.rz.scp.css */
.hierarchical-log-list[b-ztdis06u88] {
    display: flex;
    flex-direction: column;
}

.hll-empty[b-ztdis06u88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.hll-toolbar[b-ztdis06u88] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border-soft);
    min-height: 36px;
}

.hll-toolbar-stats[b-ztdis06u88] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.hll-stat-pill[b-ztdis06u88] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}

.hll-stat-error[b-ztdis06u88] {
    background: var(--color-danger-soft, rgba(239, 68, 68, 0.1));
    color: var(--color-danger);
}

.hll-stat-warn[b-ztdis06u88] {
    background: var(--color-warn-soft, rgba(245, 158, 11, 0.1));
    color: var(--color-warn);
}

.hll-stat-db[b-ztdis06u88] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.hll-toolbar-actions[b-ztdis06u88] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.hll-expand-btn[b-ztdis06u88] {
    font-size: 0.77rem;
    padding: 0 var(--space-1);
}

/* ── Node list ────────────────────────────────────────────────────────── */

.hll-nodes[b-ztdis06u88] {
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/LockTimerDisplay.razor.rz.scp.css */
/* Circular Lock Timer */
.lock-timer-circle[b-dugpse6qhz] {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.lock-timer-circle:hover[b-dugpse6qhz] {
    background: rgba(var(--ct-primary-rgb, 74, 144, 226), 0.1);
}

.lock-timer-circle.timer-reset[b-dugpse6qhz] {
    animation: circleTimerPulse-b-dugpse6qhz 0.5s ease-out;
}

@keyframes circleTimerPulse-b-dugpse6qhz {
    0% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.timer-ring[b-dugpse6qhz] {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: rotate(-90deg);
}

.timer-ring-bg[b-dugpse6qhz] {
    fill: none;
    stroke: var(--ct-tertiary-bg, #e2e8f0);
    stroke-width: 3;
}

.timer-ring-fill[b-dugpse6qhz] {
    fill: none;
    stroke: var(--ct-success, #22c55e);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s linear, stroke 0.3s ease;
}

.lock-timer-circle.timer-warning .timer-ring-fill[b-dugpse6qhz] {
    stroke: var(--ct-warning, #f59e0b);
}

.lock-timer-circle.timer-danger .timer-ring-fill[b-dugpse6qhz] {
    stroke: var(--ct-danger, #ef4444);
    animation: ringPulse-b-dugpse6qhz 1.5s ease-in-out infinite;
}

@keyframes ringPulse-b-dugpse6qhz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.timer-minutes[b-dugpse6qhz] {
    position: relative;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;
    color: var(--ct-body-color);
    line-height: 1;
    z-index: 1;
}

.lock-timer-circle.timer-warning .timer-minutes[b-dugpse6qhz] {
    color: var(--ct-warning, #f59e0b);
}

.lock-timer-circle.timer-danger .timer-minutes[b-dugpse6qhz] {
    color: var(--ct-danger, #ef4444);
}

/* ========== Strip Variant ========== */
.lock-timer-strip[b-dugpse6qhz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 10px 6px;
    border-radius: 6px;
    background: rgba(var(--ct-tertiary-bg-rgb, 226, 232, 240), 0.5);
    border: 1px solid rgba(var(--ct-border-color-rgb, 229, 229, 229), 0.7);
    font-size: 0.7rem;
    color: var(--ct-secondary-color, #64748b);
    cursor: default;
    transition: background 0.2s ease, border-color 0.3s ease;
}

.lock-timer-strip.timer-reset[b-dugpse6qhz] {
    animation: stripTimerPulse-b-dugpse6qhz 0.5s ease-out;
}

@keyframes stripTimerPulse-b-dugpse6qhz {
    0% { background: rgba(var(--ct-success-rgb, 34, 197, 94), 0.18); }
    100% { background: rgba(var(--ct-tertiary-bg-rgb, 226, 232, 240), 0.5); }
}

.lock-timer-strip .timer-ring[b-dugpse6qhz] {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.lock-timer-strip .timer-strip-label[b-dugpse6qhz] {
    flex: 1;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lock-timer-strip.timer-warning[b-dugpse6qhz] {
    border-color: rgba(var(--ct-warning-rgb, 245, 158, 11), 0.4);
    color: var(--ct-warning, #f59e0b);
}

.lock-timer-strip.timer-danger[b-dugpse6qhz] {
    border-color: rgba(var(--ct-danger-rgb, 239, 68, 68), 0.5);
    color: var(--ct-danger, #ef4444);
    animation: stripDangerPulse-b-dugpse6qhz 1.6s ease-in-out infinite;
}

@keyframes stripDangerPulse-b-dugpse6qhz {
    0%, 100% { background: rgba(var(--ct-danger-rgb, 239, 68, 68), 0.06); }
    50% { background: rgba(var(--ct-danger-rgb, 239, 68, 68), 0.16); }
}
/* /Components/Shared/LogFilterBar.razor.rz.scp.css */
.log-filter-bar[b-rwhlgc9hr1] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Rows ─────────────────────────────────────────────────────────────── */

.lfb-row[b-rwhlgc9hr1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.lfb-row-expression[b-rwhlgc9hr1] {
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border-soft);
    font-size: 0.77rem;
    color: var(--color-text-muted);
    overflow-x: auto;
}

.lfb-expr-code[b-rwhlgc9hr1] {
    color: var(--color-accent);
    white-space: nowrap;
}

/* ── Controls ─────────────────────────────────────────────────────────── */

.lfb-control[b-rwhlgc9hr1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lfb-label[b-rwhlgc9hr1] {
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.lfb-active-badge[b-rwhlgc9hr1] {
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    padding: 0 4px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
}

.lfb-select[b-rwhlgc9hr1] {
    height: var(--h-field, 34px);
    min-width: 110px;
    font-size: 0.82rem;
    border-color: var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
}

.lfb-control-time .lfb-select[b-rwhlgc9hr1] { min-width: 130px; }
.lfb-control-level .lfb-select[b-rwhlgc9hr1],
.lfb-control-type .lfb-select[b-rwhlgc9hr1] { min-width: 90px; }
.lfb-control-system .lfb-select[b-rwhlgc9hr1] { min-width: 115px; }
.lfb-control-env .lfb-select[b-rwhlgc9hr1] { min-width: 115px; }
.lfb-control-user .lfb-select[b-rwhlgc9hr1] { min-width: 130px; }
.lfb-control-custom-date .lfb-select[b-rwhlgc9hr1] { min-width: 170px; }

/* ── Multi-select dropdowns ───────────────────────────────────────────── */

.lfb-multiselect-drop[b-rwhlgc9hr1] {
    position: relative;
}

.lfb-dropdown-btn[b-rwhlgc9hr1] {
    height: var(--h-field, 34px);
    min-width: 90px;
    max-width: 170px;
    font-size: 0.82rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-sm);
}

.lfb-dropdown-btn:hover[b-rwhlgc9hr1] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.lfb-multiselect-menu[b-rwhlgc9hr1] {
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 0.82rem;
    padding: var(--space-1) 0;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lfb-check-item[b-rwhlgc9hr1] {
    cursor: pointer;
    user-select: none;
    padding: 5px 12px;
    gap: 8px;
}

.lfb-check-item:hover[b-rwhlgc9hr1] { background: var(--color-accent-soft); }

/* Level colour dots */
.lfb-level-dot[b-rwhlgc9hr1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lfb-level-verbose[b-rwhlgc9hr1], .lfb-level-debug[b-rwhlgc9hr1] { background: var(--color-text-subtle); }
.lfb-level-information[b-rwhlgc9hr1] { background: #3b82f6; }
.lfb-level-warning[b-rwhlgc9hr1] { background: var(--color-warn); }
.lfb-level-error[b-rwhlgc9hr1], .lfb-level-fatal[b-rwhlgc9hr1] { background: var(--color-danger); }

/* ── Search row ───────────────────────────────────────────────────────── */

.lfb-search-wrap[b-rwhlgc9hr1] {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 420px;
    display: flex;
    align-items: center;
}

.lfb-tracking-wrap[b-rwhlgc9hr1] {
    position: relative;
    min-width: 160px;
    max-width: 240px;
    display: flex;
    align-items: center;
}

.lfb-search-icon[b-rwhlgc9hr1] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-subtle);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}

.lfb-search-input[b-rwhlgc9hr1],
.lfb-tracking-input[b-rwhlgc9hr1] {
    padding-left: 28px;
    height: var(--h-field, 34px);
    font-size: 0.82rem;
    border-color: var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    width: 100%;
}

.lfb-search-input:focus[b-rwhlgc9hr1],
.lfb-tracking-input:focus[b-rwhlgc9hr1] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.lfb-search-clear[b-rwhlgc9hr1] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    font-size: 0.9rem;
}

/* ── Toggle pills ─────────────────────────────────────────────────────── */

.lfb-toggle[b-rwhlgc9hr1] {
    height: var(--h-field, 34px);
    padding: 0 10px;
    font-size: 0.82rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.lfb-toggle:hover[b-rwhlgc9hr1] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.lfb-toggle-active[b-rwhlgc9hr1] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.lfb-toggle-danger[b-rwhlgc9hr1] {
    background: var(--color-danger-soft, rgba(239, 68, 68, 0.08));
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ── Clear button ─────────────────────────────────────────────────────── */

.lfb-clear-btn[b-rwhlgc9hr1] {
    height: var(--h-field, 34px);
    padding: 0 10px;
    font-size: 0.82rem;
    border: 1px solid var(--color-border-soft);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    margin-left: auto;
}

.lfb-clear-btn:hover[b-rwhlgc9hr1] {
    background: var(--color-danger-soft, rgba(239, 68, 68, 0.08));
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

:root[data-viewport="mobile"] .lfb-row-controls[b-rwhlgc9hr1] {
    flex-direction: column;
    align-items: stretch;
}

:root[data-viewport="mobile"] .lfb-control[b-rwhlgc9hr1] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    justify-content: space-between;
}

:root[data-viewport="mobile"] .lfb-select[b-rwhlgc9hr1],
:root[data-viewport="mobile"] .lfb-dropdown-btn[b-rwhlgc9hr1] {
    flex: 1;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    height: 44px;
    font-size: 0.92rem;
}

:root[data-viewport="mobile"] .lfb-label[b-rwhlgc9hr1] {
    flex-shrink: 0;
    width: 60px;
}

:root[data-viewport="mobile"] .lfb-row-search[b-rwhlgc9hr1] {
    flex-direction: column;
    align-items: stretch;
}

:root[data-viewport="mobile"] .lfb-search-wrap[b-rwhlgc9hr1],
:root[data-viewport="mobile"] .lfb-tracking-wrap[b-rwhlgc9hr1] {
    max-width: none;
}

:root[data-viewport="mobile"] .lfb-search-input[b-rwhlgc9hr1],
:root[data-viewport="mobile"] .lfb-tracking-input[b-rwhlgc9hr1],
:root[data-viewport="mobile"] .lfb-toggle[b-rwhlgc9hr1],
:root[data-viewport="mobile"] .lfb-clear-btn[b-rwhlgc9hr1] {
    min-height: 44px;
    height: 44px;
    font-size: 0.92rem;
}

:root[data-viewport="mobile"] .lfb-clear-btn[b-rwhlgc9hr1] {
    margin-left: 0;
}
/* /Components/Shared/LogHierarchyNodeView.razor.rz.scp.css */
.lhnv-node[b-deg7n0tssi] {
    border-bottom: 1px solid var(--color-border-soft);
}

.lhnv-node:last-child[b-deg7n0tssi] {
    border-bottom: none;
}

/* ── Row ──────────────────────────────────────────────────────────────── */

.lhnv-row[b-deg7n0tssi] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    min-height: 40px;
    padding-left: calc(var(--space-2) + var(--depth, 0) * 24px);
    position: relative;
    transition: background 0.12s;
}

.lhnv-row:hover[b-deg7n0tssi] {
    background: var(--color-accent-soft);
}

/* Session nodes get slightly taller rows and a bolder visual weight */
.depth-0 .lhnv-row[b-deg7n0tssi] {
    min-height: 48px;
    background: var(--color-panel);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* ── Left severity stripe ─────────────────────────────────────────────── */

.lhnv-stripe[b-deg7n0tssi] {
    position: absolute;
    left: calc(var(--depth, 0) * 24px);
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.lhnv-stripe.severity-error[b-deg7n0tssi] { background: var(--color-danger); }
.lhnv-stripe.severity-warning[b-deg7n0tssi] { background: var(--color-warn); }
.lhnv-stripe.severity-ok[b-deg7n0tssi] { background: transparent; }

/* ── Connector line for children ──────────────────────────────────────── */

.lhnv-children[b-deg7n0tssi] {
    border-left: 1px solid var(--color-border-soft);
    margin-left: calc(var(--space-2) + 8px + var(--depth, 0) * 24px);
}

/* ── Chevron ──────────────────────────────────────────────────────────── */

.lhnv-chevron[b-deg7n0tssi] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
    text-decoration: none !important;
    font-size: 1rem;
}

.lhnv-no-chevron[b-deg7n0tssi] {
    display: inline-block;
    width: 16px;
}

/* ── Kind icon ────────────────────────────────────────────────────────── */

.lhnv-kind-icon[b-deg7n0tssi] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.lhnv-icon-session[b-deg7n0tssi] { background: var(--color-accent-soft); color: var(--color-accent); }
.lhnv-icon-page[b-deg7n0tssi] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.lhnv-icon-tab[b-deg7n0tssi] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.lhnv-icon-sql[b-deg7n0tssi] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.lhnv-icon-api[b-deg7n0tssi] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.lhnv-icon-hangfire[b-deg7n0tssi] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.lhnv-icon-service[b-deg7n0tssi] { background: var(--color-border-soft); color: var(--color-text-muted); }
.lhnv-icon-other[b-deg7n0tssi] { background: var(--color-border-soft); color: var(--color-text-subtle); }

/* ── Content area ─────────────────────────────────────────────────────── */

.lhnv-content[b-deg7n0tssi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lhnv-title[b-deg7n0tssi] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.depth-0 .lhnv-title[b-deg7n0tssi] {
    font-size: 0.9rem;
    font-weight: 600;
}

.lhnv-meta[b-deg7n0tssi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.lhnv-time[b-deg7n0tssi] { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.lhnv-user[b-deg7n0tssi] { }
.lhnv-duration[b-deg7n0tssi] { font-variant-numeric: tabular-nums; }

.lhnv-op-badge[b-deg7n0tssi],
.lhnv-table-name[b-deg7n0tssi],
.lhnv-api-provider[b-deg7n0tssi],
.lhnv-endpoint[b-deg7n0tssi] {
    background: var(--color-border-soft);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* ── Summary pills ────────────────────────────────────────────────────── */

.lhnv-pills[b-deg7n0tssi] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.lhnv-pill[b-deg7n0tssi] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.lhnv-pill-db[b-deg7n0tssi] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.lhnv-pill-api[b-deg7n0tssi] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.lhnv-pill-hf[b-deg7n0tssi] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.lhnv-pill-error[b-deg7n0tssi] { background: var(--color-danger-soft, rgba(239, 68, 68, 0.1)); color: var(--color-danger); }
.lhnv-pill-warn[b-deg7n0tssi] { background: var(--color-warn-soft, rgba(245, 158, 11, 0.1)); color: var(--color-warn); }

.lhnv-pill-dur[b-deg7n0tssi] { background: var(--color-border-soft); color: var(--color-text-muted); }
.lhnv-pill-dur-ok[b-deg7n0tssi] { background: var(--color-border-soft); color: var(--color-text-muted); }
.lhnv-pill-dur-warn[b-deg7n0tssi] { background: rgba(245, 158, 11, 0.1); color: #b45309; }
.lhnv-pill-dur-slow[b-deg7n0tssi] { background: rgba(239, 68, 68, 0.08); color: var(--color-danger); }
.lhnv-pill-dur-critical[b-deg7n0tssi] { background: var(--color-danger); color: #fff; }

/* ── Actions ──────────────────────────────────────────────────────────── */

.lhnv-actions[b-deg7n0tssi] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s;
}

.lhnv-row:hover .lhnv-actions[b-deg7n0tssi] {
    opacity: 1;
}

.lhnv-action-btn[b-deg7n0tssi] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    text-decoration: none !important;
}

.lhnv-action-btn:hover[b-deg7n0tssi] {
    background: var(--color-border-soft);
    color: var(--color-text);
}

/* ── Exception panel ──────────────────────────────────────────────────── */

.lhnv-exception-panel[b-deg7n0tssi] {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-soft);
}

.lhnv-exception-text[b-deg7n0tssi] {
    font-family: var(--font-mono);
    font-size: 0.77rem;
    color: var(--color-danger);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

/* ── SQL inline detail ────────────────────────────────────────────────── */

.lhnv-sql-panel[b-deg7n0tssi] {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.lhnv-sql-text[b-deg7n0tssi] {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.77rem;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.lhnv-sql-rows[b-deg7n0tssi] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Sub-events (sibling log lines sharing this scope's TrackingId) ──── */

.lhnv-sub-events[b-deg7n0tssi] {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-soft);
    padding: var(--space-1) 0;
    margin-left: calc(var(--space-2) + 24px + var(--depth, 0) * 24px);
    border-left: 1px solid var(--color-border-soft);
}

.lhnv-sub-row[b-deg7n0tssi] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    border-bottom: 1px dotted var(--color-border-soft);
    min-height: 24px;
}

.lhnv-sub-row:last-child[b-deg7n0tssi] { border-bottom: none; }

.lhnv-sub-row.lhnv-sub-level-error[b-deg7n0tssi],
.lhnv-sub-row.lhnv-sub-level-fatal[b-deg7n0tssi] { color: var(--color-danger); background: var(--color-danger-soft, rgba(239,68,68,0.04)); }
.lhnv-sub-row.lhnv-sub-level-warning[b-deg7n0tssi] { color: var(--color-warn);  background: var(--color-warn-soft, rgba(245,158,11,0.04)); }

.lhnv-sub-time[b-deg7n0tssi] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.lhnv-sub-type[b-deg7n0tssi] {
    font-size: 0.7rem;
    background: var(--color-border-soft);
    color: var(--color-text-muted);
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.lhnv-sub-msg[b-deg7n0tssi] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}

.lhnv-sub-dur[b-deg7n0tssi] {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

:root[data-viewport="mobile"] .lhnv-pills[b-deg7n0tssi] {
    display: none;
}

:root[data-viewport="mobile"] .lhnv-node.lhnv-has-error .lhnv-pills[b-deg7n0tssi],
:root[data-viewport="mobile"] .lhnv-node.lhnv-has-warning .lhnv-pills[b-deg7n0tssi] {
    display: flex;
}

:root[data-viewport="mobile"] .lhnv-pill-db[b-deg7n0tssi],
:root[data-viewport="mobile"] .lhnv-pill-api[b-deg7n0tssi],
:root[data-viewport="mobile"] .lhnv-pill-hf[b-deg7n0tssi],
:root[data-viewport="mobile"] .lhnv-pill-dur-ok[b-deg7n0tssi] {
    display: none;
}
/* /Components/Shared/LogoSelectionModal.razor.rz.scp.css */
.logo-result-card[b-qmotjodw96] {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.logo-result-card:hover[b-qmotjodw96] {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.logo-result-card.border-primary[b-qmotjodw96] {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
/* /Components/Shared/NoteDropFallbackModal.razor.rz.scp.css */
.drop-fallback-steps[b-75g70cdq2z] {
    background: var(--ct-tertiary-bg, #f8fafc);
    border-radius: 8px;
    padding: 0.75rem 0.75rem 0.75rem 2.25rem;
    margin: 0;
    color: var(--ct-body-color, #1f2937);
    font-size: 0.85rem;
    line-height: 1.65;
}

.drop-fallback-steps li[b-75g70cdq2z] {
    padding-left: 0.25rem;
}

.drop-fallback-field[b-75g70cdq2z] {
    margin-top: 1rem;
}

.drop-fallback-label[b-75g70cdq2z] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ct-secondary-color, #6b7280);
    margin-bottom: 0.25rem;
}

.drop-fallback-value-row[b-75g70cdq2z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ct-tertiary-bg, #f3f4f6);
    border: 1px solid var(--ct-border-color, #e5e7eb);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.drop-fallback-value[b-75g70cdq2z] {
    flex: 1;
    background: transparent;
    color: var(--ct-body-color, #111827);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drop-fallback-hint[b-75g70cdq2z] {
    display: block;
    margin-top: 0.35rem;
    color: var(--ct-secondary-color, #6b7280);
    font-size: 0.72rem;
}
/* /Components/Shared/NoteDropzone.razor.rz.scp.css */
/* =============================================================
   Case-note dropzone — drag-and-drop only. The wrapper element
   is the drop target; native dragover/drop listeners are attached
   from JS (case-note-dropzone-interop.js) which posts files to the
   /api/cases/{id}/notes/drop endpoint.
   ============================================================= */
.case-note-dropzone[b-qf8o35htic] {
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(var(--ct-primary-rgb, 13, 110, 253), 0.04) 0%,
            rgba(var(--ct-primary-rgb, 13, 110, 253), 0.10) 100%);
    border: 2px dashed var(--ct-primary, #0d6efd);
    border-radius: 12px;
    min-height: 360px;
    padding: 2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.case-note-dropzone.drag-active[b-qf8o35htic] {
    background:
        linear-gradient(135deg,
            rgba(var(--ct-primary-rgb, 13, 110, 253), 0.10) 0%,
            rgba(var(--ct-primary-rgb, 13, 110, 253), 0.18) 100%);
    border-color: var(--ct-primary, #0d6efd);
    transform: scale(1.005);
    box-shadow: 0 0 0 4px rgba(var(--ct-primary-rgb, 13, 110, 253), 0.10);
}

.case-note-dropzone.processing[b-qf8o35htic] {
    border-style: solid;
    background:
        linear-gradient(135deg,
            rgba(16, 185, 129, 0.06) 0%,
            rgba(16, 185, 129, 0.14) 100%);
    border-color: var(--ct-success, #10b981);
}

.dropzone-content[b-qf8o35htic] {
    text-align: center;
    max-width: 540px;
}

.dropzone-icon[b-qf8o35htic] {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: var(--ct-primary, #0d6efd);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem auto;
    box-shadow: 0 8px 24px rgba(var(--ct-primary-rgb, 13, 110, 253), 0.30);
    animation: dropzone-pulse-b-qf8o35htic 2.4s ease-in-out infinite;
}

@keyframes dropzone-pulse-b-qf8o35htic {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.case-note-dropzone.drag-active .dropzone-icon[b-qf8o35htic] {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(var(--ct-primary-rgb, 13, 110, 253), 0.45);
}

.case-note-dropzone.processing .dropzone-icon[b-qf8o35htic] {
    animation: none;
    background: var(--ct-success, #10b981);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.30);
}

.dropzone-title[b-qf8o35htic] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ct-body-color, #1f2937);
    margin: 0 0 0.4rem 0;
}

.dropzone-subtitle[b-qf8o35htic] {
    font-size: 0.85rem;
    color: var(--ct-secondary-color, #475569);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.dropzone-subtitle code[b-qf8o35htic] {
    background: rgba(var(--ct-primary-rgb, 13, 110, 253), 0.1);
    color: var(--ct-primary, #0d6efd);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.78rem;
}

.dropzone-formats[b-qf8o35htic] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.format-pill[b-qf8o35htic] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(var(--ct-primary-rgb, 13, 110, 253), 0.18);
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ct-secondary-color, #475569);
}

.format-pill i[b-qf8o35htic] {
    color: var(--ct-primary, #0d6efd);
    font-size: 0.95rem;
}

/* Prominent cancel button — replaces the previous text link so users on
   long, busy case views can find it quickly. */
.dropzone-cancel-btn[b-qf8o35htic] {
    margin-top: 0.5rem;
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-width: 2px;
}

.dropzone-cancel-btn:disabled[b-qf8o35htic] {
    opacity: 0.55;
}

/* =================== Upload progress list =================== */
.dropzone-uploads[b-qf8o35htic] {
    margin: 0.25rem 0 1rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem;
}

.dropzone-upload-row[b-qf8o35htic] {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    font-size: 0.8rem;
}

.dropzone-upload-row .upload-name[b-qf8o35htic] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ct-body-color, #1f2937);
    font-weight: 500;
}

.dropzone-upload-row .upload-status[b-qf8o35htic] {
    color: var(--ct-secondary-color, #6b7280);
    font-size: 0.72rem;
    white-space: nowrap;
}

.dropzone-upload-row.uploading[b-qf8o35htic] {
    border-color: rgba(var(--ct-primary-rgb, 13, 110, 253), 0.35);
    background: rgba(var(--ct-primary-rgb, 13, 110, 253), 0.05);
}

.dropzone-upload-row.uploading i[b-qf8o35htic] {
    color: var(--ct-primary, #0d6efd);
    animation: dropzone-spin-b-qf8o35htic 1.4s linear infinite;
}

.dropzone-upload-row.done[b-qf8o35htic] {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.06);
}

.dropzone-upload-row.failed[b-qf8o35htic] {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.06);
}

.dropzone-upload-row.failed .upload-status[b-qf8o35htic] {
    color: #b91c1c;
}

@keyframes dropzone-spin-b-qf8o35htic {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* Notification Bell Container */
.notification-bell-container[b-ab2qrdiqdu] {
    position: relative;
    display: inline-block;
}

/* Bell Icon */
.notification-bell[b-ab2qrdiqdu] {
    position: relative;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-bell:hover[b-ab2qrdiqdu] {
    background-color: rgba(255, 255, 255, 0.1);
}

.notification-bell i[b-ab2qrdiqdu] {
    font-size: 1.38rem;
    color: var(--bs-body-color, #6c757d);
    transition: transform 0.2s ease;
}

.notification-bell:hover i[b-ab2qrdiqdu] {
    transform: scale(1.1);
}

/* Shimmer Animation */
.notification-bell.shimmer[b-ab2qrdiqdu] {
    animation: bell-shimmer-b-ab2qrdiqdu 0.5s ease-in-out 3;
}

.notification-bell.shimmer i[b-ab2qrdiqdu] {
    animation: bell-ring-b-ab2qrdiqdu 0.5s ease-in-out 3;
    color: var(--bs-warning, #ffc107);
}

@keyframes bell-shimmer-b-ab2qrdiqdu {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(255, 193, 7, 0.2);
    }
}

@keyframes bell-ring-b-ab2qrdiqdu {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Notification Badge */
.notification-badge[b-ab2qrdiqdu] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background-color: var(--bs-danger, #dc3545);
    border-radius: 10px;
    animation: badge-pulse-b-ab2qrdiqdu 2s infinite;
}

@keyframes badge-pulse-b-ab2qrdiqdu {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Dropdown — the bell lives in the topbar, near the right edge next to the avatar.
   `position: fixed` takes the dropdown out of any clipping ancestor (overflow:hidden
   on the SimpleBar / topbar wrapper); anchoring to `right` opens it leftward into the
   screen so it never clips off the right edge regardless of viewport width.
   The code-behind measures the bell's bounding rect and writes a precise inline
   `top: N; right: M; left: auto;` style on toggle; this CSS block is the fallback
   when measurement fails (e.g. JS interop disabled). */
.notification-dropdown[b-ab2qrdiqdu] {
    position: fixed;
    top: 64px;
    right: 16px;
    left: auto;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dropdown Header */
.notification-header[b-ab2qrdiqdu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.notification-title[b-ab2qrdiqdu] {
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--bs-body-color, #212529);
}

.btn-mark-all[b-ab2qrdiqdu] {
    background: none;
    border: none;
    color: var(--bs-primary, #0d6efd);
    font-size: 0.92rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-mark-all:hover:not(:disabled)[b-ab2qrdiqdu] {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}

.btn-mark-all:disabled[b-ab2qrdiqdu] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Notification List */
.notification-list[b-ab2qrdiqdu] {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}

/* Notification Item */
.notification-item[b-ab2qrdiqdu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
    transition: background-color 0.15s ease;
    position: relative;
}

.notification-item:hover[b-ab2qrdiqdu] {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.notification-item.unread[b-ab2qrdiqdu] {
    background-color: var(--bs-info-bg-subtle, #cff4fc);
}

.notification-item.unread:hover[b-ab2qrdiqdu] {
    background-color: var(--bs-info-bg-subtle, #b6effb);
}

.notification-icon[b-ab2qrdiqdu] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-secondary-bg, #e9ecef);
    border-radius: 50%;
}

.notification-icon i[b-ab2qrdiqdu] {
    font-size: 1.08rem;
}

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

.notification-item-title[b-ab2qrdiqdu] {
    font-weight: 500;
    font-size: 1rem;
    color: var(--bs-body-color, #212529);
    margin-bottom: 2px;
    line-height: 1.3;
}

.notification-message[b-ab2qrdiqdu] {
    font-size: 0.92rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-time[b-ab2qrdiqdu] {
    font-size: 0.85rem;
    color: var(--bs-tertiary-color, #adb5bd);
}

.notification-unread-dot[b-ab2qrdiqdu] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--bs-primary, #0d6efd);
    border-radius: 50%;
}

/* Empty and Loading States */
.notification-empty[b-ab2qrdiqdu],
.notification-loading[b-ab2qrdiqdu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--bs-secondary-color, #6c757d);
}

.notification-empty i[b-ab2qrdiqdu],
.notification-loading i[b-ab2qrdiqdu] {
    font-size: 2.46rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.notification-empty span[b-ab2qrdiqdu],
.notification-loading span[b-ab2qrdiqdu] {
    font-size: 1rem;
}

/* Footer */
.notification-footer[b-ab2qrdiqdu] {
    padding: 12px 16px;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    text-align: center;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.view-all-link[b-ab2qrdiqdu] {
    color: var(--bs-primary, #0d6efd);
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
}

.view-all-link:hover[b-ab2qrdiqdu] {
    text-decoration: underline;
}

/* Overlay for closing dropdown */
.notification-overlay[b-ab2qrdiqdu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .notification-dropdown[b-ab2qrdiqdu] {
        position: fixed;
        top: 60px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 80px);
    }
}
/* /Components/Shared/Orcanex/Avatar.razor.rz.scp.css */
.orcanex-avatar[b-cm32xauc70] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    object-fit: cover;
    line-height: 1;
    user-select: none;
}

.orcanex-avatar-square[b-cm32xauc70] {
    border-radius: var(--radius-sm);
}

.orcanex-avatar-initials[b-cm32xauc70] {
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
/* /Components/Shared/Orcanex/BrandWordmark.razor.rz.scp.css */
/* Brand wordmark — proper full logo image (Examinex_700x150 / orca-t).
   No tile, no white filter — the logos render in their native colours.
   Used by Error, LockScreen, Login, ConsentForm, ReportReview, MFA, and
   every other unauthenticated / public page. */

.orcanex-wordmark[b-puhqn28yms] {
    display: inline-flex;
    align-items: center;
}

.orcanex-wordmark-logo[b-puhqn28yms] {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.orcanex-wordmark-fallback[b-puhqn28yms] {
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

/* Compact — used inline in topbars / page chrome. */
.orcanex-wordmark[data-size="compact"][b-puhqn28yms] {
    height: 28px;
}
.orcanex-wordmark[data-size="compact"] .orcanex-wordmark-fallback[b-puhqn28yms] {
    font-size: 1.08rem;
}

/* Large — hero usage on Error / LockScreen / Login etc. */
.orcanex-wordmark[data-size="large"][b-puhqn28yms] {
    height: 44px;
}
.orcanex-wordmark[data-size="large"] .orcanex-wordmark-fallback[b-puhqn28yms] {
    font-size: 1.23rem;
}
/* /Components/Shared/Orcanex/Btn.razor.rz.scp.css */
.orcanex-btn[b-aw01y3v9dz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background var(--duration-hover) var(--ease-hover),
                color var(--duration-hover) var(--ease-hover),
                border-color var(--duration-hover) var(--ease-hover);
}

.orcanex-btn-md[b-aw01y3v9dz] {
    height: var(--h-button);
    padding: 0 12px;
    font-size: 1rem;
}

.orcanex-btn-sm[b-aw01y3v9dz] {
    height: var(--h-button-sm);
    padding: 0 10px;
    font-size: 0.92rem;
    gap: 5px;
}

.orcanex-btn-default[b-aw01y3v9dz] {
    background: var(--color-panel);
    color: var(--color-text);
    border-color: var(--color-border);
}
.orcanex-btn-default:hover:not(:disabled)[b-aw01y3v9dz] {
    background: var(--color-bg);
}

.orcanex-btn-ghost[b-aw01y3v9dz] {
    background: transparent;
    color: var(--color-text-muted);
}
.orcanex-btn-ghost:hover:not(:disabled)[b-aw01y3v9dz] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-btn-primary[b-aw01y3v9dz] {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.orcanex-btn-primary:hover:not(:disabled)[b-aw01y3v9dz] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.orcanex-btn-soft[b-aw01y3v9dz] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}
.orcanex-btn-soft:hover:not(:disabled)[b-aw01y3v9dz] {
    background: #DBE5FF;
}

.orcanex-btn-danger[b-aw01y3v9dz] {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.orcanex-btn-danger:hover:not(:disabled)[b-aw01y3v9dz] {
    background: #A12A24;
    border-color: #A12A24;
}

.orcanex-btn:disabled[b-aw01y3v9dz] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Shared/Orcanex/Card.razor.rz.scp.css */
.orcanex-card[b-x9yi1ysl5x] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    /* Container queries — children that want to respond to the card's width
       (rather than the viewport's) can use @container (max-width: …) below.
       Useful for KpiTile grids and segment strips embedded inside cards. */
    container-type: inline-size;
}

.orcanex-card-padded[b-x9yi1ysl5x] {
    padding: var(--space-4);
}

/* Mobile: shrink padding one notch and use the smaller card radius so the
   chrome doesn't dominate at narrow widths. */
:root[data-viewport="mobile"] .orcanex-card-padded[b-x9yi1ysl5x],
:root[data-viewport="mobile-l"] .orcanex-card-padded[b-x9yi1ysl5x] {
    padding: var(--space-3);
}

:root[data-viewport="mobile"] .orcanex-card[b-x9yi1ysl5x],
:root[data-viewport="mobile-l"] .orcanex-card[b-x9yi1ysl5x] {
    border-radius: var(--radius-md);
}

/* Mobile: head + actions stack vertically when actions overflow. */
:root[data-viewport="mobile"] .orcanex-card-head[b-x9yi1ysl5x],
:root[data-viewport="mobile-l"] .orcanex-card-head[b-x9yi1ysl5x] {
    flex-direction: column;
    align-items: stretch;
}
:root[data-viewport="mobile"] .orcanex-card-actions[b-x9yi1ysl5x],
:root[data-viewport="mobile-l"] .orcanex-card-actions[b-x9yi1ysl5x] {
    flex-wrap: wrap;
}

.orcanex-card-accent[b-x9yi1ysl5x] {
    border-left: 4px solid var(--color-accent);
}

.orcanex-card-head[b-x9yi1ysl5x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.orcanex-card-head-text[b-x9yi1ysl5x] {
    min-width: 0;
}

.orcanex-card-title[b-x9yi1ysl5x] {
    margin: 2px 0 0;
}

.orcanex-card-actions[b-x9yi1ysl5x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* /Components/Shared/Orcanex/EmptyState.razor.rz.scp.css */
.orcanex-empty[b-1bo5203epi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 8px;
    color: var(--color-text-muted);
}

.orcanex-empty-icon[b-1bo5203epi] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.orcanex-empty-title[b-1bo5203epi] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-empty-body[b-1bo5203epi] {
    font-size: 1rem;
    max-width: 420px;
    line-height: 1.5;
}

.orcanex-empty-action[b-1bo5203epi] {
    margin-top: 12px;
}
/* /Components/Shared/Orcanex/Field.razor.rz.scp.css */
.orcanex-field[b-o67qkmwvp4] {
    display: flex;
    flex-direction: column;
    gap: var(--field-label-gap);
    min-width: 0;
}

/* Standard form-pattern label — 11px / 600 / uppercase / 0.04em letter-spacing.
   Matches the Orcanex form spec (see CLAUDE.md "UI Design System"). */
.orcanex-field-label[b-o67qkmwvp4] {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}

.orcanex-field-required[b-o67qkmwvp4] {
    color: var(--color-danger);
    margin-left: 2px;
}

.orcanex-field-help[b-o67qkmwvp4] {
    color: var(--color-text-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    margin-left: auto;
}

.orcanex-field-input[b-o67qkmwvp4]  input,
.orcanex-field-input[b-o67qkmwvp4]  select,
.orcanex-field-input[b-o67qkmwvp4]  textarea {
    width: 100%;
    height: var(--h-field);
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color var(--duration-hover) var(--ease-hover),
                box-shadow var(--duration-hover) var(--ease-hover);
}

.orcanex-field-input[b-o67qkmwvp4]  textarea {
    height: auto;
    min-height: 80px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.orcanex-field-input[b-o67qkmwvp4]  input:hover,
.orcanex-field-input[b-o67qkmwvp4]  select:hover,
.orcanex-field-input[b-o67qkmwvp4]  textarea:hover {
    border-color: var(--color-text-subtle);
}

.orcanex-field-input[b-o67qkmwvp4]  input:focus,
.orcanex-field-input[b-o67qkmwvp4]  select:focus,
.orcanex-field-input[b-o67qkmwvp4]  textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.orcanex-field-input[b-o67qkmwvp4]  input::placeholder,
.orcanex-field-input[b-o67qkmwvp4]  textarea::placeholder {
    color: var(--color-text-subtle);
}

.orcanex-field-input[b-o67qkmwvp4]  input:disabled,
.orcanex-field-input[b-o67qkmwvp4]  select:disabled,
.orcanex-field-input[b-o67qkmwvp4]  textarea:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.orcanex-field-hint[b-o67qkmwvp4] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.orcanex-field-error-text[b-o67qkmwvp4] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-danger);
}

.orcanex-field-error .orcanex-field-input[b-o67qkmwvp4]  input,
.orcanex-field-error .orcanex-field-input[b-o67qkmwvp4]  select,
.orcanex-field-error .orcanex-field-input[b-o67qkmwvp4]  textarea {
    border-color: var(--color-danger);
}
/* /Components/Shared/Orcanex/IconBox.razor.rz.scp.css */
[b-hpkvz613ew] .orcanex-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
/* /Components/Shared/Orcanex/InlineBanner.razor.rz.scp.css */
.orcanex-banner[b-y4vdmhmv98] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 1rem;
    line-height: 1.45;
}

.orcanex-banner-icon[b-y4vdmhmv98] {
    flex-shrink: 0;
    margin-top: 1px;
}

.orcanex-banner-body[b-y4vdmhmv98] {
    flex: 1;
    min-width: 0;
}

.orcanex-banner-title[b-y4vdmhmv98] {
    font-weight: 600;
    margin-bottom: 2px;
}

.orcanex-banner-action[b-y4vdmhmv98] {
    flex-shrink: 0;
}

.orcanex-banner-close[b-y4vdmhmv98] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 2px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    opacity: 0.7;
}

.orcanex-banner-close:hover[b-y4vdmhmv98] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.orcanex-banner-info[b-y4vdmhmv98]    { background: var(--color-accent-soft); color: var(--color-accent); }
.orcanex-banner-success[b-y4vdmhmv98] { background: var(--color-success-soft); color: var(--color-success); }
.orcanex-banner-warn[b-y4vdmhmv98]    { background: var(--color-warn-soft); color: var(--color-warn); }
.orcanex-banner-danger[b-y4vdmhmv98]  { background: var(--color-danger-soft); color: var(--color-danger); }
/* /Components/Shared/Orcanex/KpiTile.razor.rz.scp.css */
.orcanex-kpi[b-0rt7f2v927] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.orcanex-kpi-label[b-0rt7f2v927] {
    margin: 0;
}

.orcanex-kpi-row[b-0rt7f2v927] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.orcanex-kpi-value[b-0rt7f2v927] {
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.orcanex-kpi-sub[b-0rt7f2v927] {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Mobile — slightly smaller padding and a smaller value so KPI tiles don't
   crowd the screen when stacked vertically. The numbers stay tabular-nums
   so they line up. */
:root[data-viewport="mobile"] .orcanex-kpi[b-0rt7f2v927],
:root[data-viewport="mobile-l"] .orcanex-kpi[b-0rt7f2v927] {
    padding: var(--space-3);
    min-height: 72px;
}

:root[data-viewport="mobile"] .orcanex-kpi-value[b-0rt7f2v927],
:root[data-viewport="mobile-l"] .orcanex-kpi-value[b-0rt7f2v927] {
    font-size: 1.54rem;
}
/* /Components/Shared/Orcanex/MasterDataListPage.razor.rz.scp.css */
.orcanex-master-page[b-ryimyp5jmp] {
    padding: 16px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.orcanex-master-filters[b-ryimyp5jmp] {
    flex-shrink: 0;
}

.orcanex-master-table[b-ryimyp5jmp] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.orcanex-master-thead[b-ryimyp5jmp] {
    display: flex;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.orcanex-master-tbody[b-ryimyp5jmp] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* /Components/Shared/Orcanex/MobilePageHeader.razor.rz.scp.css */
/* Mobile-only — hidden at tablet and desktop. Tablet keeps the desktop
   PageHeader since horizontal space is no longer constrained. */
.orcanex-mobile-page-header[b-a7pc9shiyl] {
    display: none;
}

:root[data-viewport="mobile"] .orcanex-mobile-page-header[b-a7pc9shiyl],
:root[data-viewport="mobile-l"] .orcanex-mobile-page-header[b-a7pc9shiyl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
    min-height: var(--h-topbar);
    flex-shrink: 0;
}

.orcanex-mobile-page-header-titles[b-a7pc9shiyl] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    /* Don't let the title push other items off-screen — title truncates
       first since the dropdown / actions are more functional. */
    flex: 0 1 auto;
    overflow: hidden;
    /* Match the 36 px action-button height so the visual centre of the
       title text lines up with the centre of the icon button on the
       right. With `align-items: baseline` (the previous default), the
       title block was the natural line-box height (~20 px) and got
       centred by the parent — but Inter's glyph baseline sits at ~75%
       of the line box, so the visual text centre ended up ~2 px below
       the button centre. Forcing the block to 36 px and centring the
       text inside it puts both visual centres on the same Y. */
    height: 36px;
}

.orcanex-mobile-page-header-title[b-a7pc9shiyl] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mobile-page-header-count[b-a7pc9shiyl] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Filter slot — typically a <select>. Takes the remaining horizontal space
   between the title and the action icons; shrinks down but is given priority
   over the title for visibility (filtering is the primary action on a mobile
   list page). */
.orcanex-mobile-page-header-filter[b-a7pc9shiyl] {
    flex: 1;
    min-width: 0;
}

.orcanex-mobile-page-header-filter[b-a7pc9shiyl]  .form-select,
.orcanex-mobile-page-header-filter[b-a7pc9shiyl]  select {
    width: 100%;
    height: 36px;
    font-size: 0.92rem;
    padding-block: 0;
    /* Slightly tighter so it doesn't dominate the row. */
    padding-inline: var(--space-2) var(--space-5);
}

/* Actions slot — right-aligned, icon-only buttons preferred.
   `margin-left: auto` pushes the block to the far right of the flex
   row regardless of how short the title is. Without this the actions
   sit immediately after the title with only the parent gap between
   them — the user reported the edit icon ending up "on the left",
   which is exactly that layout. */
.orcanex-mobile-page-header-actions[b-a7pc9shiyl] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
}

.orcanex-mobile-page-header-actions[b-a7pc9shiyl]  .orcanex-btn {
    /* Icon-only square buttons in this row — clamp to 36px so the strip
       stays compact regardless of the user's density preference. The
       touch-target floor (44px) only kicks in on actual interactive cells;
       these sit inside a 56px-min header which is itself the touch zone. */
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
}
/* /Components/Shared/Orcanex/MobileTabPicker.razor.rz.scp.css */
/* Trigger button — single-row replacement for a tab strip on mobile.
   Hidden at tablet+ so the desktop scrolling strip can take over. */
.orcanex-mobile-tab-picker-trigger[b-ldw2dzinho] {
    display: none;
}

/* Belt-and-braces sizing: explicit `height` AND `min-height` so the row
   is exactly 44 px regardless of whether a badge is present, regardless
   of any global button reset that might try to set `height: auto`.
   `display: flex` (not inline-flex) so width: 100% is reliable. */
:root[data-viewport="mobile"]   .orcanex-mobile-tab-picker-trigger[b-ldw2dzinho],
:root[data-viewport="mobile-l"] .orcanex-mobile-tab-picker-trigger[b-ldw2dzinho] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: var(--touch-target);
    min-height: var(--touch-target);
    box-sizing: border-box;
    padding: 0 var(--space-3);
    background: var(--color-panel);
    border: none;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mobile-tab-picker-trigger:hover[b-ldw2dzinho] {
    background: var(--color-bg);
}

.orcanex-mobile-tab-picker-label[b-ldw2dzinho] {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mobile-tab-picker-badge[b-ldw2dzinho] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}

.orcanex-mobile-tab-picker-spacer[b-ldw2dzinho] {
    flex: 1;
}

.orcanex-mobile-tab-picker-chevron[b-ldw2dzinho] {
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* The drawer body's <ul> — vertical list of tab rows. */
.orcanex-mobile-tab-picker-list[b-ldw2dzinho] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/Orcanex/MobileTabPickerItem.razor.rz.scp.css */
.orcanex-mobile-tab-picker-item[b-pea6zmwsq6] {
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-mobile-tab-picker-item:last-child[b-pea6zmwsq6] {
    border-bottom: none;
}

.orcanex-mobile-tab-picker-item-btn[b-pea6zmwsq6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-target);
    padding: 0 var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-mobile-tab-picker-item-btn:hover[b-pea6zmwsq6],
.orcanex-mobile-tab-picker-item-btn:focus-visible[b-pea6zmwsq6] {
    background: var(--color-bg);
    outline: none;
}

.orcanex-mobile-tab-picker-item-btn.is-active[b-pea6zmwsq6] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

/* Active marker — accent-coloured dot on the left edge. Always rendered
   so non-active rows reserve the same horizontal space and labels line up. */
.orcanex-mobile-tab-picker-item-marker[b-pea6zmwsq6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.orcanex-mobile-tab-picker-item-btn.is-active .orcanex-mobile-tab-picker-item-marker[b-pea6zmwsq6] {
    background: var(--color-accent);
}

.orcanex-mobile-tab-picker-item-icon[b-pea6zmwsq6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.orcanex-mobile-tab-picker-item-btn.is-active .orcanex-mobile-tab-picker-item-icon[b-pea6zmwsq6] {
    color: var(--color-accent);
}

.orcanex-mobile-tab-picker-item-label[b-pea6zmwsq6] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orcanex-mobile-tab-picker-item-badge[b-pea6zmwsq6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}
/* /Components/Shared/Orcanex/OrcanexDrawer.razor.rz.scp.css */
.orcanex-drawer-portal[b-paxjkfsilo] {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: flex;
    justify-content: flex-end;
    pointer-events: auto;
}

/* Left-anchored variant — used by the mobile menu drawer. */
.orcanex-drawer-portal-left[b-paxjkfsilo] {
    justify-content: flex-start;
}

/* Backdrop dimming. The portal element is full-screen; we shade it semi-
   transparent so the page content underneath is visibly muted while the
   drawer is open. ShowBackdrop=false (used by transient drawers that
   shouldn't visually replace the page) hides it. */
.orcanex-drawer-portal[data-show-backdrop="1"][b-paxjkfsilo] {
    background: rgba(0, 0, 0, 0.32);
}

.orcanex-drawer[b-paxjkfsilo] {
    background: var(--color-panel);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-overlay);
    height: 100vh;
    display: flex;
    flex-direction: column;
    animation: orcanex-drawer-slide-b-paxjkfsilo var(--duration-enter) var(--ease-enter);
    max-width: 100%;
}

.orcanex-drawer-left[b-paxjkfsilo] {
    border-left: none;
    border-right: 1px solid var(--color-border);
    animation-name: orcanex-drawer-slide-left-b-paxjkfsilo;
}

@keyframes orcanex-drawer-slide-left-b-paxjkfsilo {
    from { transform: translateX(-100%); }
    to   { transform: none; }
}

/* Mobile drawer fills most of the viewport so nav items are reachable. */
@media (max-width: 767.98px) {
    .orcanex-drawer-left[b-paxjkfsilo] {
        width: min(85vw, 320px) !important;
    }
}

/* ============================================================
   Bottom-anchored variant — slide-up sheet used by MobileTabPicker
   and any future "choose-from-list" mobile picker. Fills the viewport
   width, takes up to 80% of the viewport height (long lists scroll
   inside), and rounds the top corners so it reads as a modal sheet
   rather than a panel.
   ============================================================ */
.orcanex-drawer-portal-bottom[b-paxjkfsilo] {
    align-items: flex-end;
    justify-content: stretch;
}

.orcanex-drawer-bottom[b-paxjkfsilo] {
    width: 100% !important;
    max-width: none;
    height: auto;
    max-height: 80vh;
    border-left: none;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* Lift above the iOS home bar so the close button stays reachable. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation-name: orcanex-drawer-slide-up-b-paxjkfsilo;
}

@keyframes orcanex-drawer-slide-up-b-paxjkfsilo {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.orcanex-drawer-header[b-paxjkfsilo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.orcanex-drawer-title[b-paxjkfsilo] {
    flex: 1;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-drawer-header-actions[b-paxjkfsilo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-drawer-close[b-paxjkfsilo] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-drawer-close:hover[b-paxjkfsilo] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-drawer-body[b-paxjkfsilo] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.orcanex-drawer-footer[b-paxjkfsilo] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

@keyframes orcanex-drawer-slide-b-paxjkfsilo {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .orcanex-drawer[b-paxjkfsilo] { animation: none; }
}
/* /Components/Shared/Orcanex/OrcanexModal.razor.rz.scp.css */
.orcanex-modal-backdrop[b-629hztxn11] {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.45);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: orcanex-modal-fade-b-629hztxn11 var(--duration-enter) var(--ease-enter);
}

.orcanex-modal[b-629hztxn11] {
    background: var(--color-panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: orcanex-modal-pop-b-629hztxn11 var(--duration-enter) var(--ease-enter);
}

.orcanex-modal-sm[b-629hztxn11] { max-width: 320px; }
.orcanex-modal-md[b-629hztxn11] { max-width: 520px; }
.orcanex-modal-lg[b-629hztxn11] { max-width: 720px; }
.orcanex-modal-xl[b-629hztxn11] { max-width: 960px; }

.orcanex-modal-header[b-629hztxn11] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.orcanex-modal-title[b-629hztxn11] {
    flex: 1;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
}

.orcanex-modal-header-actions[b-629hztxn11] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orcanex-modal-close[b-629hztxn11] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.orcanex-modal-close:hover[b-629hztxn11] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-modal-body[b-629hztxn11] {
    padding: 18px;
    overflow-y: auto;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.55;
}

.orcanex-modal-footer[b-629hztxn11] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
}

@keyframes orcanex-modal-fade-b-629hztxn11 { from { opacity: 0; } to { opacity: 1; } }
@keyframes orcanex-modal-pop-b-629hztxn11 {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .orcanex-modal-backdrop[b-629hztxn11], .orcanex-modal[b-629hztxn11] { animation: none; }
}

/* ============================================================
   Mobile: full-screen modal — no padding, no rounded corners,
   the modal fills the viewport. Footer is sticky so primary
   actions stay reachable while long forms scroll inside the body.
   ============================================================ */
:root[data-viewport="mobile"] .orcanex-modal-backdrop[b-629hztxn11],
:root[data-viewport="mobile-l"] .orcanex-modal-backdrop[b-629hztxn11] {
    padding: 0;
}

:root[data-viewport="mobile"] .orcanex-modal[b-629hztxn11],
:root[data-viewport="mobile-l"] .orcanex-modal[b-629hztxn11] {
    max-width: 100% !important;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    animation: orcanex-modal-fade-b-629hztxn11 var(--duration-enter) var(--ease-enter);
}

:root[data-viewport="mobile"] .orcanex-modal-header[b-629hztxn11],
:root[data-viewport="mobile-l"] .orcanex-modal-header[b-629hztxn11] {
    padding: var(--space-3) var(--space-4);
    min-height: var(--touch-target);
}

:root[data-viewport="mobile"] .orcanex-modal-body[b-629hztxn11],
:root[data-viewport="mobile-l"] .orcanex-modal-body[b-629hztxn11] {
    padding: var(--space-3) var(--space-4);
}

:root[data-viewport="mobile"] .orcanex-modal-footer[b-629hztxn11],
:root[data-viewport="mobile-l"] .orcanex-modal-footer[b-629hztxn11] {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    /* Footer sticks to the bottom even when the form body is short — keeps
       the primary action at thumb-reach. */
    position: sticky;
    bottom: 0;
    background: var(--color-panel);
}
/* /Components/Shared/Orcanex/PageHeader.razor.rz.scp.css */
.orcanex-page-header[b-6wlcmfbbdh] {
    padding: 16px 28px 14px;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
}

.orcanex-page-header-crumbs[b-6wlcmfbbdh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.orcanex-page-header-crumb[b-6wlcmfbbdh] {
    color: var(--color-text-muted);
    text-decoration: none;
}
.orcanex-page-header-crumb:hover[b-6wlcmfbbdh] { color: var(--color-text); }

.orcanex-page-header-crumb-active[b-6wlcmfbbdh] {
    color: var(--color-text);
    font-weight: 500;
}

.orcanex-page-header-crumb-sep[b-6wlcmfbbdh] {
    color: var(--color-text-subtle);
}

.orcanex-page-header-row[b-6wlcmfbbdh] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.orcanex-page-header-text[b-6wlcmfbbdh] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.orcanex-page-header-back[b-6wlcmfbbdh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-decoration: none;
    flex-shrink: 0;
}
.orcanex-page-header-back:hover[b-6wlcmfbbdh] {
    background: var(--color-bg);
    color: var(--color-text);
}

.orcanex-page-header-titles[b-6wlcmfbbdh] {
    min-width: 0;
}

.orcanex-page-header-title[b-6wlcmfbbdh] {
    margin: 0;
    color: var(--color-text);
}

.orcanex-page-header-subtitle[b-6wlcmfbbdh] {
    margin-top: 4px;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.orcanex-page-header-actions[b-6wlcmfbbdh] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.orcanex-page-header-below[b-6wlcmfbbdh] {
    margin-top: 12px;
}

/* ============================================================
   Mobile / tablet — compress padding and let title and actions stack
   when the actions strip is wider than the available space.
   ============================================================ */
:root[data-viewport="mobile"] .orcanex-page-header[b-6wlcmfbbdh],
:root[data-viewport="mobile-l"] .orcanex-page-header[b-6wlcmfbbdh] {
    padding: var(--space-3) var(--space-3) var(--space-2);
}

:root[data-viewport="tablet"] .orcanex-page-header[b-6wlcmfbbdh],
:root[data-viewport="tablet-l"] .orcanex-page-header[b-6wlcmfbbdh] {
    padding: var(--space-3) var(--space-4) var(--space-3);
}

/* Crumbs on a mobile screen would mostly duplicate the topbar context — drop
   them and let the title carry the page identity. */
:root[data-viewport="mobile"] .orcanex-page-header-crumbs[b-6wlcmfbbdh],
:root[data-viewport="mobile-l"] .orcanex-page-header-crumbs[b-6wlcmfbbdh] {
    display: none;
}

/* On narrow viewports allow header rows to wrap; the actions go to a new
   line under the title rather than getting cut off. */
:root[data-viewport="mobile"] .orcanex-page-header-row[b-6wlcmfbbdh],
:root[data-viewport="mobile-l"] .orcanex-page-header-row[b-6wlcmfbbdh] {
    flex-wrap: wrap;
    gap: var(--space-2);
}

:root[data-viewport="mobile"] .orcanex-page-header-actions[b-6wlcmfbbdh],
:root[data-viewport="mobile-l"] .orcanex-page-header-actions[b-6wlcmfbbdh] {
    flex-wrap: wrap;
    width: 100%;
}
/* /Components/Shared/Orcanex/Pill.razor.rz.scp.css */
.orcanex-pill[b-mvauh52o7a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.orcanex-pill-neutral[b-mvauh52o7a] { background: #F1F3F6; color: #3B414B; }
.orcanex-pill-accent[b-mvauh52o7a]  { background: var(--color-accent-soft); color: var(--color-accent); }
.orcanex-pill-success[b-mvauh52o7a] { background: var(--color-success-soft); color: var(--color-success); }
.orcanex-pill-warn[b-mvauh52o7a]    { background: var(--color-warn-soft); color: var(--color-warn); }
.orcanex-pill-danger[b-mvauh52o7a]  { background: var(--color-danger-soft); color: var(--color-danger); }
.orcanex-pill-outline[b-mvauh52o7a] { background: transparent; color: #3B414B; border-color: var(--color-border); }

.orcanex-pill-dot[b-mvauh52o7a] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* /Components/Shared/Orcanex/SkeletonRow.razor.rz.scp.css */
.orcanex-skeleton-list[b-ave5ujf65z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orcanex-skeleton-row[b-ave5ujf65z] {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.orcanex-skeleton-shape-card[b-ave5ujf65z] {
    border-radius: var(--radius-lg);
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: 120px;
}

.orcanex-skeleton-shape-tile[b-ave5ujf65z] {
    border-radius: var(--radius-lg);
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 88px;
}

.orcanex-skeleton-bone[b-ave5ujf65z] {
    background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-border-soft) 50%, var(--color-bg) 100%);
    background-size: 200% 100%;
    animation: orcanex-skeleton-shimmer-b-ave5ujf65z 1.4s ease-in-out infinite;
    border-radius: 4px;
    height: 12px;
}

.orcanex-skeleton-bone-1[b-ave5ujf65z] { width: 22%; }
.orcanex-skeleton-bone-2[b-ave5ujf65z] { width: 45%; }
.orcanex-skeleton-bone-3[b-ave5ujf65z] { width: 22%; margin-left: auto; }

.orcanex-skeleton-shape-card .orcanex-skeleton-bone-1[b-ave5ujf65z] { width: 35%; height: 18px; }
.orcanex-skeleton-shape-card .orcanex-skeleton-bone-2[b-ave5ujf65z] { width: 75%; }
.orcanex-skeleton-shape-card .orcanex-skeleton-bone-3[b-ave5ujf65z] { width: 55%; margin-left: 0; }

.orcanex-skeleton-shape-tile .orcanex-skeleton-bone-1[b-ave5ujf65z] { width: 30%; height: 10px; }
.orcanex-skeleton-shape-tile .orcanex-skeleton-bone-2[b-ave5ujf65z] { width: 60%; height: 22px; }
.orcanex-skeleton-shape-tile .orcanex-skeleton-bone-3[b-ave5ujf65z] { width: 40%; height: 10px; margin-left: 0; }

@keyframes orcanex-skeleton-shimmer-b-ave5ujf65z {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .orcanex-skeleton-bone[b-ave5ujf65z] { animation: none; background: var(--color-border-soft); }
}
/* /Components/Shared/Orcanex/SlaProgress.razor.rz.scp.css */
.orcanex-sla[b-e497vyfl0p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.orcanex-sla-track[b-e497vyfl0p] {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border-soft);
    overflow: hidden;
}

.orcanex-sla-fill[b-e497vyfl0p] {
    height: 100%;
    border-radius: 3px;
    transition: width var(--duration-enter) var(--ease-enter);
}

.orcanex-sla-success[b-e497vyfl0p] { background: var(--color-success); }
.orcanex-sla-warn[b-e497vyfl0p]    { background: var(--color-warn); }
.orcanex-sla-danger[b-e497vyfl0p]  { background: var(--color-danger); }
.orcanex-sla-neutral[b-e497vyfl0p] { background: var(--color-text-muted); }

.orcanex-sla-label[b-e497vyfl0p] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.orcanex-sla-label-success[b-e497vyfl0p] { color: var(--color-success); }
.orcanex-sla-label-warn[b-e497vyfl0p]    { color: var(--color-warn); }
.orcanex-sla-label-danger[b-e497vyfl0p]  { color: var(--color-danger); }
.orcanex-sla-label-neutral[b-e497vyfl0p] { color: var(--color-text-muted); }
/* /Components/Shared/Orcanex/Toggle.razor.rz.scp.css */
.orcanex-toggle[b-9sqnkby1bv] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    color: var(--color-text);
}

.orcanex-toggle-disabled[b-9sqnkby1bv] {
    cursor: not-allowed;
    opacity: 0.55;
}

.orcanex-toggle-input[b-9sqnkby1bv] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.orcanex-toggle-track[b-9sqnkby1bv] {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: #D6DAE0;
    border-radius: 999px;
    transition: background var(--duration-hover) var(--ease-hover);
    flex-shrink: 0;
}

.orcanex-toggle-thumb[b-9sqnkby1bv] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform var(--duration-hover) var(--ease-hover);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.orcanex-toggle-input:checked + .orcanex-toggle-track[b-9sqnkby1bv] {
    background: var(--color-accent);
}

.orcanex-toggle-input:checked + .orcanex-toggle-track .orcanex-toggle-thumb[b-9sqnkby1bv] {
    transform: translateX(14px);
}

.orcanex-toggle-input:focus-visible + .orcanex-toggle-track[b-9sqnkby1bv] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.orcanex-toggle-label[b-9sqnkby1bv] {
    line-height: 1.4;
}
/* /Components/Shared/Orcanex/WorkflowRail.razor.rz.scp.css */
.orcanex-rail[b-dg341n8cjt] {
    background: var(--color-panel);
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orcanex-rail-steps[b-dg341n8cjt] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.orcanex-rail-step[b-dg341n8cjt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--color-text-muted);
    transition: background var(--duration-hover) var(--ease-hover);
}

.orcanex-rail-step:hover[b-dg341n8cjt] {
    background: var(--color-bg);
}

.orcanex-rail-step-current[b-dg341n8cjt] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.orcanex-rail-step-current:hover[b-dg341n8cjt] {
    background: #DBE5FF;
}

.orcanex-rail-step-done[b-dg341n8cjt] {
    color: var(--color-text);
}

.orcanex-rail-dot[b-dg341n8cjt] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1.5px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.orcanex-rail-step-current .orcanex-rail-dot[b-dg341n8cjt] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.orcanex-rail-step-done .orcanex-rail-dot[b-dg341n8cjt] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.orcanex-rail-label[b-dg341n8cjt] {
    font-size: 1rem;
    font-weight: 500;
}

.orcanex-rail-step-current .orcanex-rail-label[b-dg341n8cjt] {
    font-weight: 600;
}

.orcanex-rail-connector[b-dg341n8cjt] {
    flex: 1;
    min-width: 16px;
    height: 2px;
    background: var(--color-border-soft);
    margin: 0 4px;
}

.orcanex-rail-connector-done[b-dg341n8cjt] {
    background: var(--color-success);
}

.orcanex-rail-footer[b-dg341n8cjt] {
    margin-top: 12px;
}
/* /Components/Shared/Pwa/PwaInstallBanner.razor.rz.scp.css */
.pwa-install-banner[b-r5i1u7magz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-accent-soft);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    position: relative;
    z-index: 100;
}

.pwa-install-banner-icon[b-r5i1u7magz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-panel);
    color: var(--color-accent);
    flex-shrink: 0;
}

.pwa-install-banner-text[b-r5i1u7magz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-install-banner-title[b-r5i1u7magz] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
}

.pwa-install-banner-body[b-r5i1u7magz] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.pwa-install-banner-actions[b-r5i1u7magz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

:root[data-viewport="mobile"] .pwa-install-banner[b-r5i1u7magz],
:root[data-viewport="mobile-l"] .pwa-install-banner[b-r5i1u7magz] {
    flex-wrap: wrap;
    gap: var(--space-2);
}

:root[data-viewport="mobile"] .pwa-install-banner-body[b-r5i1u7magz],
:root[data-viewport="mobile-l"] .pwa-install-banner-body[b-r5i1u7magz] {
    display: none;
}

:root[data-viewport="mobile"] .pwa-install-banner-actions[b-r5i1u7magz],
:root[data-viewport="mobile-l"] .pwa-install-banner-actions[b-r5i1u7magz] {
    margin-left: auto;
}
/* /Components/Shared/Pwa/PwaNotificationsPanel.razor.rz.scp.css */
.orcanex-pwa-loading[b-pf1e09qo8v] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.orcanex-pwa-permission[b-pf1e09qo8v] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-2);
}

.orcanex-pwa-permission-label[b-pf1e09qo8v] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.orcanex-pwa-banner[b-pf1e09qo8v] {
    margin: var(--space-2) 0;
}

.orcanex-pwa-actions[b-pf1e09qo8v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.orcanex-pwa-devices[b-pf1e09qo8v] {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
}

.orcanex-pwa-devices-title[b-pf1e09qo8v] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.orcanex-pwa-device-list[b-pf1e09qo8v] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.orcanex-pwa-device[b-pf1e09qo8v] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    font-size: 0.88rem;
}

.orcanex-pwa-device-label[b-pf1e09qo8v] {
    font-weight: 500;
    color: var(--color-text);
}

.orcanex-pwa-device-meta[b-pf1e09qo8v] {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin-left: auto;
}

.orcanex-pwa-device-error[b-pf1e09qo8v] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.orcanex-pwa-install-section[b-pf1e09qo8v] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-panel);
    margin-top: var(--space-2);
}

.orcanex-pwa-install-icon[b-pf1e09qo8v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    flex-shrink: 0;
}

.orcanex-pwa-install-text[b-pf1e09qo8v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orcanex-pwa-install-title[b-pf1e09qo8v] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.orcanex-pwa-install-body[b-pf1e09qo8v] {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}
/* /Components/Shared/QuestionRow.razor.rz.scp.css */
/* QuestionRow styles */
.question-row .help-toggle[b-7angkwh4t9] { position: absolute; right: 12px; top: 12px; line-height: 1; }
.question-row .help-toggle:hover .mdi[b-7angkwh4t9] { filter: brightness(0.9); }
/* /Components/Shared/SectionCard.razor.rz.scp.css */
/* SectionCard component styles — token-driven so the card adapts to light/dark themes.
   (Legacy component still used by NewCaseForm, ClientDetails and the Specialist tabs.
   Hardcoded #fff/#1e293b values previously left these panels white in dark mode while
   the dropdowns — styled by the global tokens.css retrofit — went dark.) */
.section-card[b-qbfg3qc1wm] {
    background-color: var(--color-panel);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
}

.section-card-header[b-qbfg3qc1wm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem 0.3rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.section-card-title[b-qbfg3qc1wm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.section-card-icon[b-qbfg3qc1wm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
}

.section-card-title-text[b-qbfg3qc1wm] {
    margin: 0;
}

.section-card-actions[b-qbfg3qc1wm] {
    display: flex;
    align-items: center;
}

.section-card-menu-btn[b-qbfg3qc1wm] {
    padding: 0.25rem 0.5rem;
    color: var(--color-text-subtle);
    border: none;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.15s ease-in-out;
}

.section-card-menu-btn:hover[b-qbfg3qc1wm] {
    color: var(--color-text-muted);
}

.section-card-body[b-qbfg3qc1wm] {
    padding: 1.25rem;
}

.section-card-body fieldset[b-qbfg3qc1wm] {
    border: none;
    margin: 0;
    padding: 0;
}

/* Form styling within cards */
.section-card-body .form-label[b-qbfg3qc1wm] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.375rem;
}

.section-card-body .form-label.required[b-qbfg3qc1wm]::after {
    content: " *";
    color: var(--color-danger);
}

.section-card-body .form-control[b-qbfg3qc1wm],
.section-card-body .form-select[b-qbfg3qc1wm] {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.section-card-body .form-control:focus[b-qbfg3qc1wm],
.section-card-body .form-select:focus[b-qbfg3qc1wm] {
    background-color: var(--color-panel);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem var(--color-accent-ring);
}

.section-card-body .form-control:disabled[b-qbfg3qc1wm],
.section-card-body .form-select:disabled[b-qbfg3qc1wm],
.section-card-body .form-control[readonly][b-qbfg3qc1wm],
.section-card-body .form-select[readonly][b-qbfg3qc1wm] {
    background-color: var(--color-bg);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

.section-card-body .input-group-text[b-qbfg3qc1wm] {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-right: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.section-card-body .input-group .form-control[b-qbfg3qc1wm] {
    border-left: none;
}

/* Specialist avatar styling */
.section-card-body .specialist-inline[b-qbfg3qc1wm] {
    display: flex;
    align-items: center;
}

.section-card-body .specialist-avatar-sm[b-qbfg3qc1wm] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.section-card-body .specialist-avatar-initial[b-qbfg3qc1wm] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
/* /Components/Shared/SeraChat.razor.rz.scp.css */
/* ============================================
   Sera Chat - Modern AI Assistant Styling
   ============================================ */

/* Floating container - button first in DOM, appears at bottom due to column-reverse */
.sera-floating-chat[b-71w9foxdh1] {
    position: fixed;
    bottom: 0.25rem;
    right: 1.5rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Toggle button */
.sera-chat-toggle[b-71w9foxdh1] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #5c6bc0 0%, #7c4dff 100%);
    padding: 3px;
    box-shadow: 0 8px 32px rgba(92,107,192,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.sera-chat-toggle:hover[b-71w9foxdh1] {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(92,107,192,0.5);
}

.sera-chat-toggle:active[b-71w9foxdh1] {
    transform: scale(0.95);
}

.sera-toggle-active[b-71w9foxdh1] {
    box-shadow: 0 4px 20px rgba(92,107,192,0.3);
}

.sera-avatar[b-71w9foxdh1] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
}

.sera-avatar img[b-71w9foxdh1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pulse animation */
.sera-pulse[b-71w9foxdh1] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #5c6bc0;
    animation: sera-pulse-ring-b-71w9foxdh1 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes sera-pulse-ring-b-71w9foxdh1 {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Chat window */
.sera-chat-window[b-71w9foxdh1] {
    background: #1e293b;
    width: 380px;
    max-width: calc(100vw - 2rem);
    height: 520px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    animation: sera-slide-up-b-71w9foxdh1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.75rem;
}

@keyframes sera-slide-up-b-71w9foxdh1 {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */
.sera-chat-header[b-71w9foxdh1] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f8fafc;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sera-header-content[b-71w9foxdh1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sera-header-avatar[b-71w9foxdh1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #5c6bc0;
    flex-shrink: 0;
}

.sera-header-avatar img[b-71w9foxdh1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sera-header-info[b-71w9foxdh1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sera-title[b-71w9foxdh1] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #f8fafc;
    line-height: 1.2;
}

.sera-subtitle[b-71w9foxdh1] {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sera-subtitle[b-71w9foxdh1]::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: sera-online-pulse-b-71w9foxdh1 2s ease-in-out infinite;
}

@keyframes sera-online-pulse-b-71w9foxdh1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sera-header-actions[b-71w9foxdh1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sera-header-btn[b-71w9foxdh1] {
    background: rgba(255,255,255,0.05);
    border: none;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sera-header-btn:hover[b-71w9foxdh1] {
    background: rgba(255,255,255,0.1);
    color: #f8fafc;
}

.sera-header-btn i[b-71w9foxdh1] {
    font-size: 1.1rem;
}

.sera-chat-close[b-71w9foxdh1] {
    background: rgba(255,255,255,0.05);
    border: none;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sera-chat-close:hover[b-71w9foxdh1] {
    background: rgba(255,255,255,0.1);
    color: #f8fafc;
}

.sera-chat-close i[b-71w9foxdh1] {
    font-size: 1.25rem;
}

/* Chat body */
.sera-chat-body[b-71w9foxdh1] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.9rem;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Custom scrollbar */
.sera-chat-body[b-71w9foxdh1]::-webkit-scrollbar {
    width: 6px;
}

.sera-chat-body[b-71w9foxdh1]::-webkit-scrollbar-track {
    background: transparent;
}

.sera-chat-body[b-71w9foxdh1]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.sera-chat-body[b-71w9foxdh1]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}

/* Welcome state */
.sera-welcome[b-71w9foxdh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 1rem;
    flex: 1;
}

.sera-welcome-avatar[b-71w9foxdh1] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #5c6bc0;
    box-shadow: 0 8px 32px rgba(92,107,192,0.3);
}

.sera-welcome-avatar img[b-71w9foxdh1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sera-welcome-text[b-71w9foxdh1] {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 280px;
    margin: 0;
}

/* Messages */
.sera-message[b-71w9foxdh1] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    animation: sera-message-in-b-71w9foxdh1 0.25s ease-out;
}

@keyframes sera-message-in-b-71w9foxdh1 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sera-message-user[b-71w9foxdh1] {
    flex-direction: row-reverse;
}

.sera-message-avatar[b-71w9foxdh1] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

.sera-message-avatar img[b-71w9foxdh1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sera-message-content[b-71w9foxdh1] {
    max-width: 75%;
    min-width: 0;
}

.sera-message-bubble[b-71w9foxdh1] {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sera-message-bot .sera-message-bubble[b-71w9foxdh1] {
    background: rgba(255,255,255,0.08);
    color: #f8fafc;
    border-bottom-left-radius: 4px;
}

.sera-message-user .sera-message-bubble[b-71w9foxdh1] {
    background: linear-gradient(135deg, #5c6bc0 0%, #7c4dff 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Thinking animation */
.sera-thinking-bubble[b-71w9foxdh1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.sera-thinking-dots[b-71w9foxdh1] {
    display: flex;
    gap: 4px;
}

.sera-thinking-dots span[b-71w9foxdh1] {
    width: 8px;
    height: 8px;
    background: #7986cb;
    border-radius: 50%;
    animation: sera-bounce-b-71w9foxdh1 1.4s ease-in-out infinite;
}

.sera-thinking-dots span:nth-child(1)[b-71w9foxdh1] {
    animation-delay: 0s;
}

.sera-thinking-dots span:nth-child(2)[b-71w9foxdh1] {
    animation-delay: 0.2s;
}

.sera-thinking-dots span:nth-child(3)[b-71w9foxdh1] {
    animation-delay: 0.4s;
}

@keyframes sera-bounce-b-71w9foxdh1 {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.sera-thinking-text[b-71w9foxdh1] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}

/* Queue waiting state */
.sera-queued-bubble[b-71w9foxdh1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.sera-queue-icon[b-71w9foxdh1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(251,191,36,0.2);
    border-radius: 50%;
    flex-shrink: 0;
}

.sera-queue-icon i[b-71w9foxdh1] {
    font-size: 1.1rem;
    color: #fbbf24;
    animation: sera-clock-pulse-b-71w9foxdh1 2s ease-in-out infinite;
}

@keyframes sera-clock-pulse-b-71w9foxdh1 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

.sera-queue-info[b-71w9foxdh1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sera-queue-title[b-71w9foxdh1] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fbbf24;
}

.sera-queue-position[b-71w9foxdh1] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* Streaming response */
.sera-streaming[b-71w9foxdh1] {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.sera-typing-cursor[b-71w9foxdh1] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #7986cb;
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: sera-cursor-blink-b-71w9foxdh1 0.6s step-end infinite;
}

@keyframes sera-cursor-blink-b-71w9foxdh1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Error message */
.sera-error-message[b-71w9foxdh1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    border-radius: 12px;
    font-size: 0.85rem;
    border: 1px solid rgba(239,68,68,0.3);
}

.sera-error-message i[b-71w9foxdh1] {
    font-size: 1.1rem;
    color: #ef4444;
}

/* Footer */
.sera-chat-footer[b-71w9foxdh1] {
    padding: 0.75rem;
    background: #0f172a;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sera-input-container[b-71w9foxdh1] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.2s ease;
    width: 100%;
}

.sera-input-container:focus-within[b-71w9foxdh1] {
    border-color: #5c6bc0;
}

.sera-input[b-71w9foxdh1] {
    flex: 1;
    resize: none;
    font-size: 0.9rem;
    border: none;
    background: transparent;
    color: #f8fafc;
    padding: 0.5rem;
    outline: none;
    max-height: 100px;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.4;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.sera-input[b-71w9foxdh1]::-webkit-scrollbar {
    width: 6px;
}

.sera-input[b-71w9foxdh1]::-webkit-scrollbar-track {
    background: transparent;
}

.sera-input[b-71w9foxdh1]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.sera-input[b-71w9foxdh1]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}

.sera-input[b-71w9foxdh1]::placeholder {
    color: #94a3b8;
}

.sera-input:disabled[b-71w9foxdh1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sera-send-btn[b-71w9foxdh1] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #5c6bc0 0%, #7c4dff 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sera-send-btn:hover:not(:disabled)[b-71w9foxdh1] {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(92,107,192,0.4);
}

.sera-send-btn:active:not(:disabled)[b-71w9foxdh1] {
    transform: scale(0.95);
}

.sera-send-btn:disabled[b-71w9foxdh1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sera-send-btn i[b-71w9foxdh1] {
    font-size: 1rem;
}

/* Markdown styling */
.sera-chat-body p[b-71w9foxdh1] {
    margin: 0.25rem 0;
}

.sera-chat-body ul[b-71w9foxdh1],
.sera-chat-body ol[b-71w9foxdh1] {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.sera-chat-body li[b-71w9foxdh1] {
    margin-bottom: 0.25rem;
}

.sera-chat-body code[b-71w9foxdh1] {
    background: rgba(255,255,255,0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.sera-chat-body pre[b-71w9foxdh1] {
    margin: 0.5rem 0;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    overflow: hidden;
}

.sera-chat-body pre code[b-71w9foxdh1] {
    display: block;
    padding: 0.75rem 1rem;
    background: transparent;
    overflow-x: auto;
    line-height: 1.5;
}

.sera-chat-body strong[b-71w9foxdh1] {
    color: #f8fafc;
    font-weight: 600;
}

.sera-chat-body a[b-71w9foxdh1] {
    color: #7986cb;
    text-decoration: none;
}

.sera-chat-body a:hover[b-71w9foxdh1] {
    text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 575.98px) {
    .sera-floating-chat[b-71w9foxdh1] {
        bottom: 1rem;
        right: 1rem;
    }

    .sera-chat-window[b-71w9foxdh1] {
        width: calc(100vw - 2rem);
        height: calc(100vh - 100px);
        max-height: none;
        border-radius: 16px 16px 0 0;
        margin-bottom: 0.5rem;
    }

    .sera-chat-toggle[b-71w9foxdh1] {
        width: 56px;
        height: 56px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sera-chat-window[b-71w9foxdh1],
    .sera-message[b-71w9foxdh1],
    .sera-chat-toggle[b-71w9foxdh1],
    .sera-send-btn[b-71w9foxdh1] {
        animation: none;
        transition: none;
    }

    .sera-thinking-dots span[b-71w9foxdh1] {
        animation: none;
        opacity: 0.8;
    }

    .sera-pulse[b-71w9foxdh1] {
        animation: none;
        display: none;
    }
}

/* High contrast preference */
@media (prefers-contrast: more) {
    .sera-chat-window[b-71w9foxdh1] {
        border: 2px solid #f8fafc;
    }

    .sera-message-bubble[b-71w9foxdh1] {
        border: 1px solid currentColor;
    }
}

/* Attachment chip in floating chat */
.sera-attachment-chip[b-71w9foxdh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(92, 107, 192, 0.2);
    border-radius: 4px;
    padding: 0.15rem 0.375rem;
    font-size: 0.6875rem;
    color: #c5cae9;
    margin-bottom: 0.25rem;
}

.sera-attachment-chip i[b-71w9foxdh1] {
    font-size: 0.75rem;
}
/* /Components/Shared/SessionLogViewer.razor.rz.scp.css */
/* ========================================================
   SessionLogViewer — half-screen slide-out log panel
   ======================================================== */

/* ── Overlay ─────────────────────────────────────────────── */

.slv-overlay[b-xo6g4mpp1f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    backdrop-filter: blur(1px);
}

/* ── Panel — 50 vw, full height, slide-in animation ──────── */

.slv-panel[b-xo6g4mpp1f] {
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;
    min-width: 520px;
    max-width: 900px;
    height: 100vh;
    background: var(--color-panel);
    box-shadow: -6px 0 40px rgba(0, 0, 0, 0.18);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slv-slide-in-b-xo6g4mpp1f 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile — full viewport */
:root[data-viewport="mobile"]   .slv-panel[b-xo6g4mpp1f],
:root[data-viewport="mobile-l"] .slv-panel[b-xo6g4mpp1f] {
    width: 100vw;
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
}

@keyframes slv-slide-in-b-xo6g4mpp1f {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Header ──────────────────────────────────────────────── */

.slv-header[b-xo6g4mpp1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-bg);
    flex-shrink: 0;
}

.slv-header-info[b-xo6g4mpp1f] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.slv-header-title[b-xo6g4mpp1f] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.slv-header-icon[b-xo6g4mpp1f] { font-size: 1.15rem; color: var(--color-accent); flex-shrink: 0; }

.slv-header-meta[b-xo6g4mpp1f] { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

.slv-meta-chip[b-xo6g4mpp1f] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-border-soft);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.slv-meta-sep[b-xo6g4mpp1f] { color: var(--color-border); font-size: 0.75rem; }

/* ── Explorer link button ─────────────────────────────────── */

.slv-btn-explorer[b-xo6g4mpp1f] {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background 0.15s;
    text-decoration: none;
}

.slv-btn-explorer:hover[b-xo6g4mpp1f] { background: var(--color-accent-hover); color: #fff; }

/* ── Close button ─────────────────────────────────────────── */

.slv-close-btn[b-xo6g4mpp1f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: var(--color-panel);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.slv-close-btn:hover[b-xo6g4mpp1f] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: var(--color-danger-soft);
}

/* ── Body scroll area ────────────────────────────────────── */

.slv-body[b-xo6g4mpp1f] {
    flex: 1;
    overflow-y: auto;
    background: var(--color-bg);
}

/* ── Loading state ───────────────────────────────────────── */

.slv-loading[b-xo6g4mpp1f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 4rem 2rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.slv-loading-spinner[b-xo6g4mpp1f] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border-soft);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: slv-spin-b-xo6g4mpp1f 0.7s linear infinite;
}

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

/* ── Empty / error states ────────────────────────────────── */

.slv-empty[b-xo6g4mpp1f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.slv-empty-icon[b-xo6g4mpp1f]  { font-size: 2.5rem; color: var(--color-border); margin-bottom: var(--space-2); }
.slv-empty-title[b-xo6g4mpp1f] { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); margin: 0 0 0.3rem; }
.slv-empty-sub[b-xo6g4mpp1f]   { font-size: 0.8rem; color: var(--color-text-subtle); margin: 0; line-height: 1.5; }
/* /Components/Shared/SpecialistAvailabilitySearch.razor.rz.scp.css */
/* SpecialistAvailabilitySearch styles extracted */
.specialist-search-container[b-8zox0dwv67] { width: 100%; }
.search-criteria-section[b-8zox0dwv67] { border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.search-header[b-8zox0dwv67] { padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; }
.search-body[b-8zox0dwv67] { padding: 0.75rem; }
.duration-buttons[b-8zox0dwv67] { display:flex; gap:2px; }
.dur-btn[b-8zox0dwv67] { flex:1; padding:0.375rem 0.25rem; border:1px solid #dee2e6; background:#fff; font-size:0.75rem; font-weight:500; color:#495057; cursor:pointer; transition: all 0.15s ease; }
.dur-btn:first-child[b-8zox0dwv67] { border-radius:4px 0 0 4px; }
.dur-btn:last-child[b-8zox0dwv67] { border-radius:0 4px 4px 0; }
.dur-btn:hover[b-8zox0dwv67] { background:#e9ecef; }
.dur-btn.active[b-8zox0dwv67] { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.results-section[b-8zox0dwv67] { border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.results-header[b-8zox0dwv67] { padding:0.5rem 0.75rem; display:flex; justify-content:space-between; align-items:center; font-weight:500; font-size:0.875rem; }
.specialists-panel[b-8zox0dwv67] { border-right:1px solid rgba(0,0,0,0.08); }
.specialists-list[b-8zox0dwv67] { max-height:400px; overflow-y:auto; }
.specialist-card[b-8zox0dwv67] { padding:0.75rem; border-bottom:1px solid rgba(0,0,0,0.06); cursor:pointer; transition:all 0.2s ease; position:relative; border-left:3px solid transparent; }
.specialist-card:hover[b-8zox0dwv67] { background: rgba(13,110,253,0.03); border-left-color: rgba(13,110,253,0.3); }
.specialist-card.selected[b-8zox0dwv67] { background: linear-gradient(to right, rgba(13,110,253,0.08), rgba(13,110,253,0.02)); border-left:4px solid; border-left-color:#0d6efd; box-shadow:0 2px 8px rgba(13,110,253,0.15); padding-left:calc(0.75rem - 1px); }
.specialist-card-content[b-8zox0dwv67] { display:flex; align-items:center; gap:0.625rem; }
.specialist-icon[b-8zox0dwv67] { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:600; flex-shrink:0; transition:all 0.2s ease; background: rgba(13,110,253,0.1); color:#0d6efd; }
.specialist-icon.selected[b-8zox0dwv67] { background:#0d6efd; color:white; box-shadow:0 2px 6px rgba(13,110,253,0.3); }
.specialist-initials[b-8zox0dwv67] { font-size:0.875rem; font-weight:600; letter-spacing:0.5px; }
.specialist-photo[b-8zox0dwv67] { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid transparent; transition:all 0.2s ease; }
.specialist-photo.selected[b-8zox0dwv67] { border-color:#0d6efd; box-shadow:0 2px 6px rgba(13,110,253,0.3); }
.specialist-info[b-8zox0dwv67] { flex:1; min-width:0; }
.specialist-name-row[b-8zox0dwv67] { display:flex; align-items:center; gap:0.25rem; margin-bottom:0.125rem; }
.specialist-name[b-8zox0dwv67] { font-weight:600; font-size:0.875rem; color:#2c3e50; }
.bio-btn[b-8zox0dwv67] { background:none; border:none; padding:0.125rem; color:#6c757d; cursor:pointer; opacity:0.6; transition:all 0.15s ease; line-height:1; }
.bio-btn:hover[b-8zox0dwv67] { color:#0d6efd; opacity:1; }
.specialist-slots[b-8zox0dwv67] { font-size:0.75rem; color:#6c757d; }
.specialist-check[b-8zox0dwv67] { font-size:1.375rem; color:#198754; }
.timeslots-panel[b-8zox0dwv67] { display:flex; flex-direction:column; height:400px; }
.timeslots-header[b-8zox0dwv67] { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; background:#f8f9fa; border-bottom:1px solid rgba(0,0,0,0.08); font-size:0.8125rem; font-weight:500; }
.timeslots-content[b-8zox0dwv67] { flex:1; overflow-y:auto; padding:0.5rem 0.75rem; }
.timeslots-empty-content[b-8zox0dwv67] { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem; color:#6c757d; }
.day-section[b-8zox0dwv67] { margin-bottom:1.25rem; }
.day-header[b-8zox0dwv67] { display:flex; justify-content:space-between; align-items:center; padding:0.25rem 0; margin-bottom:0.5rem; border-bottom:1px solid rgba(0,0,0,0.08); font-size:0.75rem; font-weight:600; color:#495057; }
.day-slot-count[b-8zox0dwv67] { font-size:0.6875rem; font-weight:500; color:#6c757d; background:#f0f0f0; padding:0.125rem 0.5rem; border-radius:10px; }
.timeslots-grid[b-8zox0dwv67] { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.timeslot-button[b-8zox0dwv67] { position:relative; padding:0.625rem 0.5rem; border:1px solid rgba(0,0,0,0.12); border-radius:4px; cursor:pointer; transition:all 0.2s ease; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.125rem; background:white; }
.timeslot-button:hover[b-8zox0dwv67] { transform:translateY(-1px); box-shadow:0 3px 8px rgba(13,110,253,0.15); border-color:#0d6efd; background:rgba(13,110,253,0.02); }
.timeslot-button.selected[b-8zox0dwv67] { background:linear-gradient(135deg,#198754 0%,#20c997 100%); border-color:#198754; box-shadow:0 3px 10px rgba(25,135,84,0.25); color:white; }
.timeslot-time[b-8zox0dwv67] { font-size:0.9375rem; font-weight:600; }
.timeslot-duration[b-8zox0dwv67] { font-size:0.6875rem; opacity:0.75; }
.timeslot-check[b-8zox0dwv67] { position:absolute; top:0.25rem; right:0.25rem; font-size:1rem; color:white; }
.form-label[b-8zox0dwv67] { font-size:0.8125rem; font-weight:500; margin-bottom:0.375rem; }
.form-control[b-8zox0dwv67] { border-radius:4px; font-size:0.875rem; padding:0.5rem 0.75rem; }
.badge[b-8zox0dwv67] { padding:0.25em 0.5em; font-weight:500; border-radius:3px; font-size:0.75rem; }
.specialists-list[b-8zox0dwv67]::-webkit-scrollbar, .timeslots-content[b-8zox0dwv67]::-webkit-scrollbar { width:5px; }
.specialists-list[b-8zox0dwv67]::-webkit-scrollbar-track, .timeslots-content[b-8zox0dwv67]::-webkit-scrollbar-track { background:rgba(0,0,0,0.03); }
.specialists-list[b-8zox0dwv67]::-webkit-scrollbar-thumb, .timeslots-content[b-8zox0dwv67]::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); border-radius:3px; }
.specialists-list[b-8zox0dwv67]::-webkit-scrollbar-thumb:hover, .timeslots-content[b-8zox0dwv67]::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.25); }
@media (max-width:768px) {
    .results-body .row[b-8zox0dwv67] { flex-direction:column; }
    .specialists-panel[b-8zox0dwv67] { border-right:none; border-bottom:1px solid rgba(0,0,0,0.08); }
    .specialists-list[b-8zox0dwv67] { max-height:240px; }
    .timeslots-panel[b-8zox0dwv67] { height:auto; min-height:300px; }
    .timeslots-grid[b-8zox0dwv67] { grid-template-columns:repeat(2,1fr); }

    /* Tighter padding on mobile */
    .search-header[b-8zox0dwv67] { padding:0.625rem 0.75rem; }
    .search-body[b-8zox0dwv67] { padding:0.625rem 0.625rem 0.75rem; }
    .results-header[b-8zox0dwv67] { padding:0.625rem 0.75rem; }
    .specialist-card[b-8zox0dwv67] { padding:0.75rem 0.625rem; }

    /* Duration buttons become tap-friendly */
    .dur-btn[b-8zox0dwv67] { padding:0.5rem 0.25rem; font-size:0.8rem; min-height:36px; }

    /* Timeslot buttons taller for finger taps */
    .timeslot-button[b-8zox0dwv67] { padding:0.75rem 0.5rem; min-height:48px; }
    .timeslot-time[b-8zox0dwv67] { font-size:1rem; }

    /* Search button taller */
    .btn-primary.w-100[b-8zox0dwv67] { min-height:44px; }
}

@media (max-width:480px) {
    .timeslots-grid[b-8zox0dwv67] { grid-template-columns:repeat(2,1fr); gap:0.375rem; }
}

.bio-modal[b-8zox0dwv67] { border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,0.15); max-width:800px; width:90vw; }
.bio-modal .modal-header[b-8zox0dwv67] { padding:0.75rem 1rem; background:#f8f9fa; border-bottom:1px solid #e9ecef; }
.bio-modal .modal-title[b-8zox0dwv67] { font-size:1rem; font-weight:600; }
.bio-modal .modal-body[b-8zox0dwv67] { padding:0; height:70vh; overflow:hidden; }
.bio-modal .modal-footer[b-8zox0dwv67] { padding:0.5rem 1rem; background:#f8f9fa; border-top:1px solid #e9ecef; }
.bio-pdf-container[b-8zox0dwv67] { width:100%; height:100%; }
.bio-pdf-embed[b-8zox0dwv67] { width:100%; height:100%; border:none; }

/* Bio modal at mobile: the global Bootstrap modal full-screen rule takes the
   dialog to 100dvh, but the .bio-modal width:90vw + max-width:800px would
   fight that. Let the global rule win at mobile. */
:root[data-viewport="mobile"]   .bio-modal[b-8zox0dwv67],
:root[data-viewport="mobile-l"] .bio-modal[b-8zox0dwv67] {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0;
}

/* The bio PDF embed has a hard 70vh height which on a phone is fine, but the
   surrounding modal-body needs to expand with flex-grow so the PDF fills the
   modal. The global modal-content flex rule already does this; we just need
   to drop the hard 70vh on the modal-body and let flex-grow take over. */
:root[data-viewport="mobile"]   .bio-modal .modal-body[b-8zox0dwv67],
:root[data-viewport="mobile-l"] .bio-modal .modal-body[b-8zox0dwv67] {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Shared/WorkflowReassignDialog.razor.rz.scp.css */
/* Workflow Reassign Dialog — admin-only "change pinned workflow version" modal.
   Styled to match LinkedCaseCheckModal. */

.cursor-pointer[b-0kznds7asc] {
    cursor: pointer;
}

.selected-version-preview[b-0kznds7asc] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.selected-version-preview .badge[b-0kznds7asc] {
    border-radius: 4px;
}