/* ============================================================
/* ============================================================
   IDS TOOLS MODULE - NAMENSKONVENTION
   Module-specific styling - uses common classes from site.css and components.css
   ============================================================ */

/* ===== Page Containers ===== */
.naming-convention-configuration,
.naming-convention-upload,
.naming-convention-settings,
.naming-convention-help {
    padding: var(--space-24);
    max-width: 1400px;
}

.naming-convention-configuration h1,
.naming-convention-upload h1,
.naming-convention-settings h1,
.naming-convention-help h1 {
    font-size: 24px;
    color: var(--color-text-primary);
    margin-bottom: var(--space-24);
    margin-top: 0;
}

/* ===== Full Width Card ===== */
.card-full-width {
    margin-bottom: var(--space-24);
}

/* ===== Configuration Row ===== */
.config-row {
    display: flex;
    gap: var(--space-12);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--space-16);
}

/* Profile Management: Restrict width of form fields to 70% */
.config-row .form-group {
    flex: 0 1 auto;
    max-width: 280px;
    min-width: 200px;
    margin-bottom: 0; /* Remove bottom margin to align with buttons */
}

/* Override app-input max-width in config-row */
.config-row .app-input {
    max-width: 90%;
    height: 46px; /* Explicit height to match buttons */
    box-sizing: border-box; /* Include padding and border in height */
}

/* Profile Management: Button sizing to match inputs */
.config-row .btn {
    height: 46px; /* Matches app-input height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1; /* Ensure consistent text alignment */
    padding: 0 var(--space-16); /* Use horizontal padding only */
}

/* ===== Panel Grid ===== */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
}

@media (max-width: 1024px) {
    .panel-grid {
        grid-template-columns: 1fr;
    }
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16) var(--space-24);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
}

.panel-header h2 {
    font-size: 18px;
    color: var(--color-text-primary);
    margin: 0;
}

.panel-body {
    padding: var(--space-20);
}

/* ===== Settings Section ===== */
.settings-section {
    margin-bottom: var(--space-20);
}

.settings-section h3 {
    font-size: 18px;
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
}

/* ===== Segments and Routes Lists ===== */
.segments-list,
.routes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.segment-item,
.route-item {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: var(--color-white);
}

.segment-header,
.route-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-12) var(--space-16);
    background: var(--color-grey-50);
    border-bottom: 1px solid var(--color-border-subtle);
}

.segment-position,
.route-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.segment-body,
.route-body {
    padding: var(--space-16);
}

.form-row {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
    flex-wrap: wrap;
}

.btn-remove {
    color: var(--color-error);
}

/* ===== Drop Zone (Module-Specific) ===== */
.file-input-hidden {
    display: none;
}

.drop-zone {
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-32);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-grey-50);
    margin-bottom: var(--space-16);
}

.drop-zone:hover {
    border-color: var(--color-brand-primary);
    background-color: var(--color-grey-100);
}

.drop-zone.drag-over {
    border-color: var(--color-brand-primary);
    background-color: var(--color-brand-primary-light);
    border-style: solid;
}

.drop-zone.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.drop-zone.has-file {
    border-color: var(--color-brand-primary);
    border-style: solid;
    background-color: var(--color-grey-50);
}

/* ===== IdsCreator Import Upload Action ===== */
.ids-import-upload-action {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.ids-import-upload-action .btn {
    width: auto;
    min-width: 160px;
    align-self: flex-start;
}

/* Export button + help icon on same horizontal line */
.ids-import-export-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.ids-import-guide-btn {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.ids-import-guide-btn:hover:not(:disabled) {
    color: var(--color-primary);
}

.ids-import-guide-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Guide modal body: scrollable, readable */
.ids-guide-modal-body {
    overflow-y: auto;
    max-height: 520px;
}

.ids-guide-h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 1.2rem 0 0.4rem;
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 0.25rem;
}

.ids-guide-h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0.9rem 0 0.3rem;
}

.ids-guide-h4 {
    font-size: 0.95rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-secondary, rgba(0,0,0,0.78));
    margin: 0.7rem 0 0.25rem;
}

.ids-guide-p {
    margin: 0.25rem 0 0.5rem;
    line-height: 1.55;
    color: var(--color-text-secondary, rgba(0,0,0,0.78));
}

.ids-guide-list {
    margin: 0.25rem 0 0.5rem 1.2rem;
    padding: 0;
    color: var(--color-text-secondary, rgba(0,0,0,0.78));
    line-height: 1.55;
}

.ids-guide-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ids-guide-help-link:hover {
    color: var(--color-brand-primary-dark);
    text-decoration-thickness: 2px;
}


.drop-zone-content {
    pointer-events: none;
}

.drop-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--space-12);
}

.drop-zone p {
    margin: var(--space-8) 0;
    color: var(--color-text-primary);
}

.drop-hint {
    color: var(--color-text-muted);
    font-size: 14px !important;
}

/* ===== Routing Info ===== */
.routing-info {
    background-color: rgba(12, 119, 190, 0.1);
    border-left: 4px solid var(--color-brand-primary-light);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-16);
    border-radius: var(--radius-small);
}

.routing-info p {
    margin: 0 0 var(--space-8) 0;
    color: var(--color-brand-primary);
}

.routing-info ol {
    margin: 0;
    padding-left: var(--space-24);
    color: var(--color-text-primary);
}

/* ===== File List ===== */
.file-list {
    margin-top: var(--space-16);
}

.file-list h4 {
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
}

.file-item {
    display: flex;
    align-items: center;
    padding: var(--space-12) var(--space-16);
    background-color: var(--color-grey-50);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-8);
}

.file-name {
    flex: 1;
    color: var(--color-text-primary);
    font-weight: 500;
}

.file-size {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-right: var(--space-12);
}

/* ===== Upload Actions ===== */
.upload-actions {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

.upload-actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
}

.upload-actions .btn .btn-icon {
    font-size: 18px;
}

/* ===== Progress Indicator ===== */
.upload-progress {
    margin-top: var(--space-16);
    padding: var(--space-16);
    background-color: rgba(12, 119, 190, 0.1);
    border-radius: var(--radius-small);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
    color: var(--color-brand-primary);
    font-weight: 600;
}

.ids-progress-track {
    height: 8px;
    background-color: var(--color-grey-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-8);
}

.ids-progress-fill {
    height: 100%;
    background-color: var(--color-brand-primary);
    transition: width 0.3s ease;
}

.progress-details {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ===== Protocol Summary ===== */
.protocol-summary {
    margin-bottom: var(--space-20);
}

.protocol-summary h4 {
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
}

.summary-item {
    padding: var(--space-12);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
    text-align: center;
    border: 2px solid var(--color-border-subtle);
}

.summary-item.success {
    border-color: var(--color-success);
    background-color: var(--color-success-light);
}

.summary-item.danger {
    border-color: var(--color-error);
    background-color: var(--color-error-light);
}

.summary-item.info {
    border-color: var(--color-brand-primary-light);
    background-color: rgba(12, 119, 190, 0.1);
}

.summary-label {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.summary-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ===== Protocol Entries ===== */
.protocol-entries {
    max-height: 500px;
    overflow-y: auto;
}

.protocol-entry {
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-12);
    background-color: var(--color-white);
}

.protocol-entry.status-valid {
    border-left-color: var(--color-success);
    background-color: var(--color-success-light);
}

.protocol-entry.status-invalid {
    border-left-color: var(--color-error);
    background-color: var(--color-error-light);
}

.protocol-entry.status-uploaded {
    border-left-color: var(--color-brand-primary-light);
    background-color: rgba(12, 119, 190, 0.1);
}

.protocol-entry.status-failed {
    border-left-color: var(--color-error);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
}

.entry-filename {
    font-weight: 600;
    color: var(--color-text-primary);
}

.entry-status {
    font-size: 13px;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-small);
    background-color: var(--color-grey-50);
}

.entry-details {
    font-size: 13px;
    margin-top: var(--space-8);
}

.entry-details span {
    display: block;
    margin-bottom: var(--space-4);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-error);
}

.error-list {
    margin: var(--space-8) 0 0 var(--space-20);
    padding: 0;
    list-style: disc;
}

.error-list li {
    color: var(--color-error);
    margin-bottom: var(--space-4);
}

.entry-error {
    margin-top: var(--space-8);
    font-size: 13px;
}

/* ===== Protocol History Table ===== */
.full-width {
    grid-column: 1 / -1;
}

.header-actions {
    display: flex;
    gap: var(--space-8);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead {
    background-color: var(--color-table-header-bg);
}

.data-table th {
    padding: var(--space-12) var(--space-16);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border-subtle);
}

.data-table td {
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
}

.data-table td.success {
    color: var(--color-success);
    font-weight: 600;
}

.data-table td.danger {
    color: var(--color-error);
    font-weight: 600;
}

.data-table td.info {
    color: var(--color-brand-primary-light);
    font-weight: 600;
}

.data-table tbody tr:hover {
    background-color: var(--color-table-row-hover-bg);
}

.empty-message {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-24);
    font-style: italic;
}

/* ===== Logo Upload (Settings-Specific) ===== */
.logo-upload-area {
    margin-top: var(--space-16);
}

.logo-preview-container {
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-24);
    background-color: var(--color-grey-50);
    text-align: center;
}

.logo-preview {
    margin-bottom: var(--space-16);
}

.logo-preview img {
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-8);
    background-color: white;
}

.logo-placeholder {
    display: inline-block;
    padding: var(--space-20) var(--space-32);
    background-color: var(--color-grey-200);
    border-radius: var(--radius-small);
}

.logo-placeholder span {
    font-size: 48px;
    display: block;
    margin-bottom: var(--space-8);
}

.logo-placeholder p {
    margin: 0;
    color: var(--color-text-secondary);
}

.logo-actions {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
}

.logo-empty {
    cursor: pointer;
    padding: var(--space-32) var(--space-24);
    transition: all 0.2s ease;
}

.logo-empty:hover {
    background-color: var(--color-grey-100);
    border-color: var(--color-brand-primary);
}

.logo-empty .upload-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--space-12);
}

.logo-empty p {
    margin: var(--space-8) 0;
    color: var(--color-text-primary);
}

/* ===== Checkbox List (Settings-Specific) ===== */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.checkbox-label {
    display: flex;
    align-items: center;
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-label:hover {
    background-color: var(--color-grey-100);
}

.checkbox-label input[type="checkbox"] {
    margin-right: var(--space-12);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-label span {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ===== Help Page Content ===== */
.help-content {
    line-height: 1.8;
}

.help-section {
    margin-bottom: var(--space-32);
}

.help-section h3 {
    font-size: 20px;
    color: var(--color-brand-primary);
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-8);
    border-bottom: 2px solid var(--color-border-subtle);
}

.help-section h4 {
    font-size: 18px;
    color: var(--color-text-primary);
    margin-top: var(--space-20);
    margin-bottom: var(--space-12);
}

.help-section p {
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.help-section ul,
.help-section ol {
    margin-left: var(--space-24);
    margin-bottom: var(--space-16);
}

.help-section li {
    margin-bottom: var(--space-8);
    color: var(--color-text-primary);
}

.help-section code {
    background-color: var(--color-grey-200);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--color-error);
}

/* Help Table */
.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-20) 0;
    font-size: 14px;
}

.help-table thead {
    background-color: var(--color-table-header-bg);
}

.help-table th {
    padding: var(--space-12) var(--space-16);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-subtle);
}

.help-table td {
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
}

.help-table tbody tr:hover {
    background-color: var(--color-table-row-hover-bg);
}

.help-tip {
    background-color: rgba(12, 119, 190, 0.1);
    border-left: 4px solid var(--color-brand-primary-light);
    padding: var(--space-12) var(--space-16);
    margin: var(--space-16) 0;
    border-radius: var(--radius-small);
}

.help-tip a {
    color: var(--color-brand-primary);
    text-decoration: none;
}

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

/* Help Example */
.help-example {
    background-color: var(--color-grey-50);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-16);
    border-radius: var(--radius-small);
    margin: var(--space-16) 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.help-example strong {
    color: var(--color-brand-primary);
}

.help-example code {
    background-color: white;
    padding: var(--space-4) var(--space-8);
}

/* FAQ Items */
.faq-item {
    margin-bottom: var(--space-24);
    padding: var(--space-16);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
    border-left: 4px solid var(--color-brand-primary);
}

.faq-item strong {
    display: block;
    color: var(--color-brand-primary);
    font-size: 16px;
    margin-bottom: var(--space-8);
}

.faq-item p {
    margin-bottom: var(--space-8);
}

.faq-item ul {
    margin-top: var(--space-8);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .config-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .header-actions {
        flex-direction: column;
    }
    
    .help-table {
        font-size: 12px;
    }
    
    .help-table th,
    .help-table td {
        padding: var(--space-8);
    }
}

/* ===== Global height fix for embedded layout ===== */
html, body {
    height: 100%;
    margin: 0;
    min-height: 0;
}

/* ===== IdsTools Layout ===== */
.idstools-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--color-grey-100);
}

.idstools-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Must be a flex column so that children can use flex:1 and get a definite height.
       Without display:flex here, children using height:100% cannot resolve against a
       flex-only height (CSS spec: percentage heights only resolve against explicitly-set
       heights, not flex-computed ones) → entire height chain collapses → Cytoscape/AG Grid
       see clientHeight=0. */
    display: flex;
    flex-direction: column;
}

    .idstools-content:has(.ids-creator-workspace) {
        overflow-y: hidden;
    }


@media (max-width: 768px) {
    .idstools-content {
        padding: var(--space-12);
    }
}

/* ============================================================
   IDS CREATOR COMPONENTS
   ============================================================ */

/* ===== Session List ===== */
.ids-session-list {
    padding: var(--space-16);
    background: var(--color-surface);
    border-radius: var(--border-radius);
    height: 100%;
    overflow-y: auto;
}

.session-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border);
}

.session-list-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-text-primary);
}

.session-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.session-item {
    padding: var(--space-12);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.session-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: var(--color-primary);
}

.session-item.selected {
    border-color: var(--color-primary);
    background: rgba(0, 102, 179, 0.05);
}

.session-item.session-item-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.session-info {
    flex: 1;
}

.session-info h4 {
    margin: 0 0 var(--space-4) 0;
    font-size: 16px;
    color: var(--color-text-primary);
}

.session-meta {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: var(--space-4) 0;
}

.session-description {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: var(--space-8) 0 0 0;
    line-height: 1.4;
}

.loading {
    text-align: center;
    padding: var(--space-24);
    color: var(--color-text-secondary);
}

/* ===== Property Panel ===== */
.ids-property-panel {
    padding: var(--space-16);
    background: var(--color-surface);
    height: 100%;
    overflow-y: auto;
}

.property-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border);
}

.property-panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-text-primary);
}

/* =========================================================
   Node levels (structure colors)
   ========================================================= */
:root {
    /* Level 0: Context - Purple */
    --node-level-0-color: #7B2FBE;
    --node-level-0-bg: #F3E8FF;
    --node-level-0-bg-light: #FAF0FF;
    --node-level-0-selected-bg: #FAF0FF;
    /* Level 1: Domain - Blue */
    --node-level-1-color: #0066B3;
    --node-level-1-bg: #E6F2FF;
    --node-level-1-bg-light: #F2F8FF;
    --node-level-1-selected-bg: #F2F8FF;
    /* Level 2: Element - Turquoise */
    --node-level-2-color: #2B9AA0;
    --node-level-2-bg: #E6FAFB;
    --node-level-2-bg-light: #F2FCFD;
    --node-level-2-selected-bg: #F2FCFD;
    /* Level 3: Representation - Green */
    --node-level-3-color: #2E8540;
    --node-level-3-bg: #E6F7E6;
    --node-level-3-bg-light: #F2FBF2;
    --node-level-3-selected-bg: #F2FBF2;
    /* Level 4: InfoRequirement - Golden Orange */
    --node-level-4-color: #C97A00;
    --node-level-4-bg: #FFF4E6;
    --node-level-4-bg-light: #FFFAF2;
    --node-level-4-selected-bg: #FFFAF2;
}

/* =========================================================
   Swimlane colors
   Lane 1 = Level 1+2 (Blue), Lane 2 = Level 3 (Green),
   Lane 3 = Level 4 (Golden Orange).
   Background: very light tint of the level color.
   Text: dark variant of the level color.
   ========================================================= */
:root {
    /* Lane 1 — Structural Elements (Blue, Level 1–2) */
    --ids-lane-1-bg:   #EEF6FF;
    --ids-lane-1-text: #003D6B;

    /* Lane 2 — Product Elements (Green, Level 3) */
    --ids-lane-2-bg:   #F0FAF0;
    --ids-lane-2-text: #1A5228;

    /* Lane 3 — Information Elements (Golden Orange, Level 4) */
    --ids-lane-3-bg:   #FFF8EE;
    --ids-lane-3-text: #7A4700;
}


/* ======================================================
       LOGIC BADGE COLORS
====================================================== */
:root {
    --color-badge-logic-AND: #2E8540;
    --color-badge-logic-AND-bg: #E6F7E6;
    --color-badge-logic-AND-bg-light: #EBF9EB;
    --color-badge-logic-OR: #C97A00;
    --color-badge-logic-OR-bg: #FFF6CC;
    --color-badge-logic-OR-bg-light: #FFF5B9;
    --color-badge-logic-NOT: #C62828;
    --color-badge-logic-NOT-bg: #FDEAEA;
    --color-badge-logic-NOT-bg-light: #FDEEEE;
}

    /* ── Node Lifecycle / LockState Styling Variables ─────────────────────────────
   Per IDS-CREATOR_NODE_AND_BCF_COLOR_CONTRACT.md §4.
   Used by Cytoscape (via JS) and AG Grid (via CSS classes below).
   ────────────────────────────────────────────────────────────────────────── */
    :root {
    /* Fill intensity (multiplied against the level bg color) */
    --ids-lock-fill-unlocked: 1;
    --ids-lock-fill-pending-approval: 0.5;
    --ids-lock-fill-unlocked-rejected: 0.4;
    --ids-lock-fill-pending-deletion: 0.4;
    /* Border colors */
    --ids-lock-border-neutral: var(--color-grey-200);
    --ids-lock-border-pending-approval: var(--color-brand-primary);
    --ids-lock-border-unlocked-rejected: var(--color-error);
    --ids-lock-border-pending-deletion: var(--color-error);
    /* Border styles */
    --ids-lock-border-style-unlocked: solid;
    --ids-lock-border-style-pending-approval: dashed;
    --ids-lock-border-style-unlocked-rejected: solid;
    --ids-lock-border-style-pending-deletion: dashed;
    /* Derived bg fills for lifecycle states (pre-computed light variants) */
    --ids-lock-unlocked-rejected-bg: #EFB5B5;
    --ids-lock-unlocked-rejected-bg-legend: #F3C7C7;
    --ids-lock-pending-deletion-bg: #F0F0F0;
    /* BCF status colors — matches IDS-CREATOR_NODE_AND_BCF_COLOR_CONTRACT.md §6.2 */
    --bcf-status-new: #2f80ed;
    --bcf-status-in-progress: #f2b705;
    --bcf-status-waiting: #27ae60;
    --bcf-status-done: #2f80ed;
    --bcf-status-closed: #2bb0c8;
    /* BCF priority colors */
    --bcf-priority-low: #9e9e9e;
    --bcf-priority-normal: #2f80ed;
    --bcf-priority-high: #f2b705;
    --bcf-priority-critical: var(--color-error);
    /* IDS-Checker AG Grid row outcome backgrounds */
    --idsc-row-pass-bg: #f0faf2;
    --idsc-row-pass-bg-hover: #e4f5e7;
    --idsc-row-fail-bg: #fff5f5;
    --idsc-row-fail-bg-hover: #ffe8e8;
    --idsc-row-error-bg: #fffdf0;
    --idsc-row-error-bg-hover: #fff9d6;
}

.property-section {
    margin-bottom: var(--space-8);
}

.property-section h4 {
    font-size: 14px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-12) 0;
    font-weight: 600;
}

.property-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.property-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.property-value {
    font-size: 13px;
    color: var(--color-text-primary);
}

.approval-status {
    background: var(--color-success-light);
    padding: var(--space-12);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-success);
}

.ids-approval-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.ids-approval-badge.approved {
    background: var(--color-success);
    color: white;
}

.property-panel-actions {
    display: flex;
    gap: var(--space-8);
    padding-bottom: var(--space-16);
    border-top: 1px solid var(--color-border);
}

/* ===== Node Properties & Classification Cards ===== */
.ids-node-prop-card {
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-12);
    background: var(--color-white);
}

.ids-node-prop-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
    user-select: none;
    background: var(--color-grey-50);
    border-radius: var(--radius-small) var(--radius-small) 0 0;
}

.ids-node-prop-card-header:hover {
    background: var(--color-grey-100);
}

.ids-node-prop-card-header-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ids-node-prop-card-header-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-node-prop-card-header-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.ids-node-prop-card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    margin-left: var(--space-8);
}

.ids-node-prop-chevron {
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.ids-node-prop-card-body {
    padding: var(--space-12);
}

.ids-node-prop-card-edit-actions {
    display: flex;
    gap: var(--space-8);
}

/* ===== Multi-Edit Card Selection States ===== */
/* Collect mode — unselected: blue left border (default card look) */
.multi-edit-card-active-collect {
    border-left: 4px solid var(--color-brand-primary);
}
/* Collect mode — selected: full blue border */
.multi-edit-card-sel-collect {
    border: 2px solid var(--color-brand-primary) !important;
    border-radius: var(--radius-small);
}
/* Delete mode — unselected: red left border */
.multi-edit-card-active-delete {
    border-left: 4px solid var(--color-error) !important;
}
/* Delete mode — selected: full red border */
.multi-edit-card-sel-delete {
    border: 2px solid var(--color-error) !important;
    border-radius: var(--radius-small);
}

/* ===== Filter Panel ===== */
.ids-filter-panel {
    padding: var(--space-16);
    background: var(--color-surface);
    height: 100%;
}

.ids-filter-panel h3 {
    margin: 0 0 var(--space-16) 0;
    font-size: 18px;
    color: var(--color-text-primary);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border);
}

.filter-section {
    margin-bottom: var(--space-20);
}

.filter-section h4 {
    font-size: 14px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8) 0;
    font-weight: 600;
}

/* Scoped to .ids-filter-panel to avoid collision with components.css .filter-actions (flex row) */
.ids-filter-panel__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border);
}

.ids-filter-panel__actions .btn {
    width: 100%;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
}

/* ===== Modal Overlay ===== */
/* Base .modal-overlay, .modal-content defined in App.Web/wwwroot/css/modal.css */

/* Scoped: IdsSessionList modal-content uses heading directly (no modal-header wrapper) */
.ids-session-list .modal-content {
    min-width: 400px;
    max-width: 600px;
    padding: var(--space-24);
}

.ids-session-list .modal-content h3 {
    margin: 0 0 var(--space-20) 0;
    font-size: 20px;
    color: var(--color-text-primary);
}

.modal-actions {
    display: flex;
    gap: var(--space-8);
    justify-content: flex-end;
    margin-top: var(--space-20);
}

/* ===== Button Variants ===== */


/* ============================================================
   IDS CREATOR - QUESTION WIZARD
   Wizard component for guided node creation through 4 levels
   ============================================================ */

.ids-question-wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-border);
}

    .wizard-header h3 {
        margin: 0;
        font-size: 20px;
        color: var(--color-text-primary);
    }

/* Progress Indicator */
.wizard-progress {
    padding: var(--space-24) var(--space-16);
    background: var(--color-background-secondary);
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

    .progress-steps::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--color-border);
        z-index: 0;
    }

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    position: relative;
    z-index: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-background);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.step-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.progress-step.active .step-number {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.progress-step.completed .step-number {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.progress-step.active .step-label,
.progress-step.completed .step-label {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Wizard Content */
.wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-24);
}

.wizard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-48);
    gap: var(--space-16);
}

.question-section h4 {
    font-size: 18px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-24) 0;
}

/* Answer Options */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-bottom: var(--space-24);
}

.answer-option,
.answer-optionselected {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-16);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .answer-option:hover {
        border-color: var(--color-border);
        background: var(--color-background-secondary);
    }

    .answer-option.selected {
        border-color: var(--color-primary);
    }

    .answer-option.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

.answer-optionselected {
    border-color: var(--color-primary);
    font-style: italic;
}

.option-content {
    flex: 1;
}

.option-title {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.option-description {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Custom Entries */
.custom-entry-section {
    margin-top: var(--space-24);
    padding: var(--space-16);
    border-radius: var(--border-radius);
}

    .custom-entry-section h5 {
        font-size: 16px;
        color: var(--color-text-primary);
        margin: 0 0 var(--space-16) 0;
    }

.custom-entry-item {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

    .custom-entry-item .app-input {
        flex: 1;
    }

.custom-entry-add {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

    .custom-entry-add .app-input {
        flex: 1;
    }

/* Wizard Navigation */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    padding: var(--space-16);
    border-top: 1px solid var(--color-border);
    background: var(--color-background-secondary);
}

.nav-right {
    display: flex;
    gap: var(--space-8);
}

/* Alert in wizard */
.ids-question-wizard .alert {
    margin: 0 var(--space-24) var(--space-16) var(--space-24);
}

/* ============================================================
   IDS CREATOR - DIAGRAM CANVAS
   Cytoscape.js diagram visualization component
   ============================================================ */

.ids-diagram-canvas {
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--color-background);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ids-diagram-container {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.ids-diagram-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    z-index: 10;
}

.ids-diagram-loading .spinner-border {
    width: 50px;
    height: 50px;
    border-width: 4px;
    color: var(--color-primary);
}

.ids-diagram-loading p {
    margin-top: var(--space-16);
    color: var(--color-text-secondary);
    font-size: 16px;
}

.ids-diagram-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--space-24);
    background: var(--color-error-light);
    border: 2px solid var(--color-error);
    border-radius: var(--border-radius);
    color: var(--color-error);
    font-weight: 600;
    text-align: center;
    max-width: 500px;
}

/* Cytoscape.js Canvas Styling (overrides) */
#cy {
    width: 100%;
    /* Height is provided by flex:1 from .ids-diagram-container (same element).
       Removing height:100% avoids a conflict with flex sizing. */
    background: var(--color-background);
}

/* Layout Controls */
.ids-layout-controls {
    display: flex;
    gap: 8px;
    padding: 7px;
    background: white;
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    z-index: 100;
}

.ids-layout-unsaved {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
}


/* ===== Shared toolbar button (diagram + matrix) =====
   Apply Class="ids-toolbar-btn" to MudButton in both toolbars.
   MudButton renders as <button class="mud-button-root ...ids-toolbar-btn...">. */
.ids-toolbar-btn.mud-button-root {
    min-width: 32px;
    height: 50px;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ids-toolbar-btn .mud-button-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Large, dominant icon inside toolbar buttons */
.ids-toolbar-btn .ids-icon,
.ids-toolbar-btn i[class*="bi "],
.ids-toolbar-btn i.bi {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shared icon class used by both toolbars */
.ids-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

/* Layout Dropdowns (Node Width and Spacing) */
.ids-layout-dropdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ids-dropdown-label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.ids-dropdown-select {
    padding: 6px 8px;
    border: 1px solid var(--color-border-subtle);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
}

.ids-dropdown-select:hover {
    background: var(--color-grey-50);
    border-color: var(--color-brand-primary);
}

.ids-dropdown-select:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.1);
}

/* Context Menu */
.ids-context-menu {
    position: fixed;
    background: white;
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 10000;
}

.ids-context-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-grey-100);
}

.ids-context-menu-item:last-child {
    border-bottom: none;
}

.ids-context-menu-item:hover {
    background: var(--color-grey-50);
}

.ids-context-menu-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Context Menu Divider */
.ids-context-menu-divider {
    height: 1px;
    background: var(--color-border-subtle);
    margin: 4px 0;
}

/* Link Mode UI (Section A) */
.ids-link-mode-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--color-brand-primary);
    border-radius: 4px;
    flex: 1;
}

.ids-link-mode-help {
    font-weight: 500;
    color: var(--color-brand-primary);
}

.ids-link-mode-source {
    padding: 4px 8px;
    background: white;
    border-radius: 4px;
    font-size: 14px;
}

.ids-link-mode-cancel-btn {
    padding: 6px 16px;
    background: white;
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    margin-left: auto;
    transition: all 0.2s;
}

.ids-link-mode-cancel-btn:hover {
    background: var(--color-error);
    color: white;
}

/* Toolbar Error Message */
.ids-layout-error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: 4px;
    color: var(--color-error);
    flex: 1;
}

.ids-error-icon {
    font-size: 18px;
}

/* Search bar - shown under toolbar when search is open */
.ids-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 7px;
    background: white;
    border-bottom: 1px solid var(--color-border-subtle);
}

.ids-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ids-search-input:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.15);
}

/* Active (toggled) state for toolbar buttons */
.ids-layout-btn-active {
    background: var(--color-brand-primary-light);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

/* Search bar action buttons (apply / clear) */
.ids-search-apply-btn,
.ids-search-clear-btn {
    padding: 4px 8px;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ids-search-apply-btn {
    border: 1px solid var(--color-button-success-bg);
    color: var(--color-button-success-bg);
}

.ids-search-apply-btn:hover {
    background: var(--color-button-success-bg);
    color: white;
}

.ids-search-clear-btn {
    border: 1px solid var(--color-button-danger-bg);
    color: var(--color-button-danger-bg);
}

.ids-search-clear-btn:hover {
    background: var(--color-button-danger-bg);
    color: white;
}

/* Highlighted Node (for link mode) */
.ids-diagram-container .highlighted {
    border-width: 4px !important;
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 12px rgba(0, 102, 179, 0.5) !important;
}

/* ============================================================
   IDS CREATOR - MAIN PAGE LAYOUT
   ============================================================ */

.page-header {
    padding: var(--space-16) var(--space-24);
    background: white;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.page-header h1 {
    font-size: 18px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8) 0;
}

.page-description {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 14px;
}

/* ============================================================
   IDS EXPORT DIALOG
   ============================================================ */

.ids-export-dialog {
    padding: var(--space-16);
}

.export-options h3 {
    font-size: 18px;
    margin: 0 0 var(--space-8) 0;
    color: var(--color-text-primary);
}

.export-options p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-16) 0;
}

.export-format-selection {
    margin-bottom: var(--space-24);
}

.export-format-option {
    display: flex;
    gap: var(--space-12);
    padding: var(--space-16);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-12);
    cursor: pointer;
    transition: all 0.2s;
}

.export-format-option:hover {
    border-color: var(--color-primary);
    background: var(--color-background);
}

.export-format-option input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.export-format-option label {
    flex: 1;
    cursor: pointer;
    margin: 0;
}

.export-format-option label strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--color-text-primary);
}

.export-format-option label p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.export-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-32);
    gap: var(--space-16);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   IDS CREATOR - NEW COMPONENTS FOR REDESIGNED UI
   Modellierung, Freigabe, Workspace Panel, Modeling Panel
   ============================================================ */

/* ===== Modeling Panel ===== */
.ids-modeling-panel {
    background: var(--color-surface, white);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ids-modeling-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16) 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: white;
    flex-shrink: 0;
}

.ids-modeling-panel .panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.ids-modeling-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-12) var(--space-16) 0;
}

.panel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-48);
    gap: var(--space-16);
}

.panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: 0 var(--space-16);
}

.level-indicator {
    margin-bottom: var(--space-12);
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.level-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-brand-primary);
    color: white;
}

/* Level-specific badge colors for modeling panel */
.level-badge.level-0 { background: var(--node-level-0-color); }
.level-badge.level-1 { background: var(--node-level-1-color); }
.level-badge.level-2 { background: var(--node-level-2-color); }
.level-badge.level-3 { background: var(--node-level-3-color); }
.level-badge.level-4 { background: var(--node-level-4-color); }

.panel-actions {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

.btn-block {
    width: 100%;
    display: block;
}

/* ===== Workspace Panel ===== */


/* Common workspace tabs styling */
.workspace-tabs {
    display: flex;
    height: 66px;
    gap: var(--space-4);
    padding-bottom: var(--space-0);
    border-bottom: 2px solid var(--color-border-subtle);
    flex-shrink: 0; /* Never let the tab strip compress — it must always be fully visible */
}


/* The wrapper ensures that the flex/scroll chain on the right side is not broken. */
.workspace-panel-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}


.tab-button {
    flex: 1;
    padding: var(--space-12);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}

.tab-button:hover {
    background: var(--color-grey-50);
    color: var(--color-text-primary);
}

.tab-button.active {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
}

.ids-tab-content {
    display: flex;
    flex-direction: column;
}

.control-section {
    padding: var(--space-16);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    margin-bottom: var(--space-16);
}

.control-section h4 {
    margin: 0 0 var(--space-12) 0;
    font-size: 14px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.control-section label {
    display: block;
    margin-bottom: var(--space-4);
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.export-button {
    margin-bottom: var(--space-8);
}

.export-button:last-child {
    margin-bottom: 0;
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-48);
    text-align: center;
    color: var(--color-text-secondary);
}

.placeholder-icon {
    font-size: 64px;
    margin-bottom: var(--space-16);
    opacity: 0.3;
}

.placeholder-content p {
    font-size: 14px;
    max-width: 250px;
    margin: 0;
}

/* ===== Approval Panel ===== */
.ids-approval-panel {
    background: var(--color-surface, white);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ids-approval-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16) 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: white;
    flex-shrink: 0;
}

.ids-approval-panel .panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.ids-approval-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-16) 0;
}




.ids-approval-badge.pending {
    background: var(--color-warning);
    color: var(--color-text-primary);
}

.badge-icon {
    margin-right: var(--space-4);
}

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

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

.info-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.info-value {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Base .modal-header, .modal-close, .modal-body defined in App.Web/wwwroot/css/modal.css */

/* Scoped: IdsWorkspacePanel export/copy dialogs use h2 inside modal-header */
.workspace-panel-body .modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--color-text-primary);
}

/* ============================================================
   IDS CREATOR - SINGLE PAGE WORKSPACE
   ============================================================ */

.ids-creator-workspace {
    flex: 1; /* Fill .idstools-content which is display:flex; flex-direction:column.
                Using flex:1 instead of height:100% avoids the CSS percentage-height
                resolution problem: height:100% on a block child only resolves against
                its parent's height when that parent has an explicitly-set height, not
                a flex-computed one. Pure flex:1 propagates definite height without
                relying on percentage resolution. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent outer scrollbar - internal panels scroll independently */
    /* Note: .workspace-layout (.mud-layout) needs flex:1 below (see next rule) */

    /* Fix A+D: MudDrawer uses --mud-appbar-height to position itself.
       Set it to the TcTabs height so both drawers start below the tab navigation row.
       Without this, the right drawer's top: auto (undefined var) falls back to its
       DOM-flow position, pushing it below MudMainContent. */
    --mud-appbar-height: var(--layout-tab-height);

    /* Mini strip width shown when a side panel is collapsed.
       Must be wide enough for the toggle MudIconButton (~40px) plus padding. */
    --mud-drawer-width-mini-left: 48px;
    --mud-drawer-width-mini-right: 48px;
}



/* MudLayout rendered by MudLayout (Class="workspace-layout") is a flex item inside
   .ids-creator-workspace (flex-direction:column). Without flex:1 it collapses to content
   height, breaking height:100% resolution on all descendants including #cy.
   MudBlazor renders MudLayout as position:relative (block), so it is a flex item here
   but won't grow unless explicitly told to. */
.workspace-layout {
    flex: 1;
    min-height: 0;
}

.workspace-main-content {
    flex: 1;
    height: 100%; /* MudLayout (.mud-layout) is position:relative, not a flex container.
                    flex:1 has no height effect here; height:100% fills MudLayout's own height
                    and propagates a definite size down through the flex chain to Cytoscape / AG Grid. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
    background: var(--color-grey-50);
    padding: 0 !important;
}

/* Center panel — generic scrollable content (start page, loading state, no-session states) */
.center-panel-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Stable 3-row center layout =====
   MudBlazor's KeepPanelsAlive sets display:contents on tab panels which collapses
   the flex:1 height chain (panel disappears from box model → children fall into a
   display:block ancestor → flex:1 has no effect → Cytoscape/AG Grid get 0 height).
   Fix: own the center structure explicitly — no MudTabs in the center area.

   Structure:
     .center-shell               – flex column, fills workspace-main-content
       .center-main-region       – flex:1, the ONLY height-growing row
         .center-diagram-host    – fills main region, no scrollbars (Cytoscape)
         .center-table-host      – fills main region, overflow allowed (AG Grid)
       .center-bottom-row        – auto height, mode-switch buttons
*/

.center-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.center-main-region {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Diagram host: no scrollbars — Cytoscape owns its own viewport */
.center-diagram-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Table host: both axes scrollable for AG Grid */
.center-table-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Inactive view — completely hidden; the other view gets the full flex:1 */
.center-view-hidden {
    display: none !important;
}

/* Bottom mode-switch row */
.center-bottom-row {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    gap: 0;
}

.center-view-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    width: 50%;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

    .center-view-tab:hover {
        color: var(--color-grey-200);
    }

    .center-view-tab.active {
        color: var(--color-primary);
        border-top-color: var(--color-primary);
        border-top-width: medium;
    }


/* Drawer toggle button — sits at the trailing end of a workspace-tabs row */
.workspace-panel-toggle {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.workspace-panel-toggle:hover {
    opacity: 1;
}

/* ===== Fix C: Vertical scrolling in side panel body areas ===== */
/* workspace-content fills remaining height in a flex column and scrolls its own content.
   Applies to both the left-drawer body (direct child of mud-drawer-content) and the
   right-drawer body inside workspace-panel-body. */
.workspace-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-10);
}

/* ===== Fix B: Mini-drawer collapsed state — tab strip behaviour ===== */
/* When a side panel is collapsed the MudDrawer shrinks to its mini width (48 px).
   Hide the tab-button labels so only the toggle icon fits in the narrow strip.
   The toggle button is centered so it is always accessible. */

.workspace-left-panel.mud-drawer--closed .tab-button,
.workspace-right-panel.mud-drawer--closed .tab-button {
    display: none;
}

/* Center the lone toggle button inside the 48 px mini strip */
.workspace-left-panel.mud-drawer--closed .workspace-panel-toggle,
.workspace-right-panel.mud-drawer--closed .workspace-panel-toggle {
    margin: auto;
}

/* Hide scrollable body content in mini/collapsed state */
.workspace-left-panel.mud-drawer--closed .workspace-content,
.workspace-right-panel.mud-drawer--closed .workspace-content {
    display: none;
}

.panel-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* GOAL D: Button layout and sizing in left panel */
.ids-modeling-panel .panel-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

/* Shared button height for consistency */
.ids-modeling-panel .panel-actions .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
}

/* Make buttons full width in left panel */
.ids-modeling-panel .panel-actions .btn {
    width: 100%;
}


/* ============================================================
   IDS CREATOR - AI INTEGRATION STYLES
   ============================================================ */

/* AI-generated answer options */
.answer-option.ai-generated {
    border-style: dashed;
    border-color: var(--color-brand-primary-light);
    background: rgba(0, 102, 179, 0.05);
}

.answer-option.ai-generated .option-title,
.answer-option.ai-generated .option-description {
    font-style: italic;
}

.text-italic {
    font-style: italic;
}

/* AI Section */
.ai-section {
    padding: var(--space-16);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border: 2px solid var(--color-brand-primary-light);
}

.ai-section .alert {
    margin-bottom: var(--space-12);
}

.ai-buttons {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.ai-buttons .btn {
    flex: 1;
    min-width: 140px;
}

/* AI Badge */
.badge.bg-info {
    background: var(--color-brand-primary) !important;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    vertical-align: middle;
}

/* AI Loading State */
.ai-loading {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12);
    background: rgba(0, 102, 179, 0.1);
    border-radius: var(--radius-small);
}

/* Responsive AI Section */
@media (max-width: 768px) {
    .ai-buttons {
        flex-direction: column;
    }
    
    .ai-buttons .btn {
        width: 100%;
    }
}

/* ============================================================
   IDS CREATOR - RULE MANAGEMENT STYLES
   Session 3: Rule selection UI for Level 4 nodes
   ============================================================ */

/* Rules List */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
}

/* Rule Type Selection */
.property-section .form-group {
    margin-bottom: var(--space-12);
}

.property-section .form-group label {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.property-section .form-select {
    width: 100%;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: white;
    font-size: 14px;
    color: var(--color-text-primary);
}

.property-section .alert-info {
    background: rgba(0, 102, 179, 0.1);
    border: 1px solid var(--color-brand-primary-light);
    border-radius: var(--radius-small);
    padding: var(--space-12);
    font-size: 13px;
}

.property-section .alert-info strong {
    display: block;
    color: var(--color-brand-primary);
    margin-bottom: var(--space-4);
}

.property-section .alert-info p {
    margin: 0;
    color: var(--color-text-primary);
}

.property-section .alert-success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    border-radius: var(--radius-small);
    padding: var(--space-12);
    font-size: 13px;
}

.property-section .alert-danger {
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: var(--radius-small);
    padding: var(--space-12);
    font-size: 13px;
}

/* Loading Spinner in Rules Section */
.property-section .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* ============================================================
   IDS CREATOR - SETTINGS PAGE STYLING
   Consistent styling for Kataloge, IFC Mapping, Pset, Classifications, and UserRights pages
   ============================================================ */

/* Settings page content - 24px horizontal padding */
.ids-creator-settings {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
}

/* Add 5px top margin to H3 headings */
.ids-creator-settings h3 {
    margin-top: 5px;
}

/* Zebra striping for tables - header with background, first data row white, then alternating */
.ids-creator-settings .table-hover thead {
    background-color: var(--color-table-header-bg);
}

.ids-creator-settings .table-hover tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.ids-creator-settings .table-hover tbody tr:hover {
    background-color: var(--color-table-row-hover-bg);
}

/* Ensure consistent row height in edit and view modes */
.ids-creator-settings .table td {
    vertical-align: middle;
    padding: var(--space-8) var(--space-12);
}

/* Compact description editor with internal scroll */
.ids-creator-settings .description-editor {
    min-height: 34px;
    max-height: 34px;
    overflow-y: auto;
    resize: none;
    line-height: 1.4;
    padding: var(--space-4) var(--space-8);
    width: 100%;
    box-sizing: border-box;
}

/* Keep inputs and selects the same height for consistency */
.ids-creator-settings .app-input,
.ids-creator-settings .form-select {
    height: 34px;
    padding: var(--space-4) var(--space-8);
}

/* Override form-control-sm to match regular app-input in tables */
.ids-creator-settings .table .app-input-sm {
    height: 34px;
    padding: var(--space-4) var(--space-8);
}

/* Ensure left alignment in both view and edit modes */
.ids-creator-settings .table td {
    text-align: left;
}

.ids-creator-settings .table td input,
.ids-creator-settings .table td select,
.ids-creator-settings .table td textarea {
    text-align: left;
}

/* AI controls inline with filters */
.ids-creator-settings .inline-ai-controls {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.ids-creator-settings .inline-ai-controls .form-select {
    width: auto;
    min-width: 140px;
}

/* Bottom action buttons area */
    .ids-creator-settings .bottom-actions {
        display: flex;
        align-items: flex-start;
        gap: var(--space-8);
        margin-top: var(--space-16);
        margin-bottom: var(--space-16);
        flex-wrap: wrap;
    }

/* Ensure all action buttons have consistent height */
.ids-creator-settings .bottom-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
}

/* Match filter controls height with buttons - all 38px for consistency */
.ids-creator-settings .row .app-input,
.ids-creator-settings .settings-filter-row .app-input,
.ids-creator-settings .row .form-select,
.ids-creator-settings .settings-filter-row .form-select,
.ids-creator-settings .row .btn,
.ids-creator-settings .settings-filter-row .btn {
    height: 38px;
    box-sizing: border-box;
}

/* Specific fix for search input to match select height */
.ids-creator-settings .row .search-input,
.ids-creator-settings .settings-filter-row .search-input {
    height: 38px !important;
    padding: var(--space-4) var(--space-8) !important;
    box-sizing: border-box !important;
}

/* Ensure buttons in filter row align properly */
.ids-creator-settings .row .btn,
.ids-creator-settings .settings-filter-row .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
    box-sizing: border-box;
}

/* AI generated row styling */
.ids-creator-settings .ai-generated {
    background-color: rgba(12, 119, 190, 0.05) !important;
    border-left: 3px solid var(--color-brand-primary-light);
}

/* === Shared top-section classes for CatalogsPage, IfcMappingPage, PsetPage === */

/* Outer flex row for filter/control fields */
.ids-creator-settings .settings-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
    align-items: flex-end;
}

/* Individual field block: label stacked above its control */
.ids-creator-settings .settings-field {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    flex: 1 1 auto;
    max-width: 240px;
}

/* Label within a settings field */
.ids-creator-settings .settings-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

/* Inline checkbox + label group, vertically aligned with controls */
.ids-creator-settings .settings-checkbox-inline {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 34px;
}

/* Horizontal group of action buttons or button + badge */
.ids-creator-settings .settings-button-group {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Loading state wrapper — spinner + optional text */
.ids-creator-settings .settings-loading {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-16) 0;
    color: var(--color-text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ids-creator-settings {
        padding-left: var(--space-16);
        padding-right: var(--space-16);
    }
    
    .ids-creator-settings .inline-ai-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ids-creator-settings .inline-ai-controls .form-select {
        width: 100%;
    }

    .ids-creator-settings .settings-filter-row {
        flex-direction: column;
    }

    .ids-creator-settings .settings-field {
        max-width: 100%;
    }
}

/* Model History Page (Package 6 - Session 2)
   ======================================== */

.ids-model-history-page {
    padding: var(--space-24);
    max-width: 1200px;
    margin: 0 auto;
}

.model-history-container {
    background: var(--color-surface);
    border-radius: var(--radius-large);
}

.model-history-container .page-header {
    margin-bottom: var(--space-24);
}

.model-history-container .page-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

/* Session Selection */
.session-selection {
    margin-bottom: var(--space-32);
    padding: var(--space-20);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.session-label {
    display: block;
    margin-bottom: var(--space-12);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.session-select {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 1rem;
}

.session-select:focus {
    outline: none;
    border-color: var(--color-brand-primary-light);
    box-shadow: 0 0 0 3px rgba(12, 119, 190, 0.1);
}

/* Snapshots Section */
.snapshots-section {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: var(--space-20);
}

.snapshots-header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-20);
}

.snapshots-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.snapshot-count {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.loading-snapshots {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-32);
    justify-content: center;
    color: var(--color-text-secondary);
}

/* Snapshots List */
.snapshots-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.snapshot-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: var(--space-20);
    transition: all 0.2s ease;
}

.snapshot-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--color-brand-primary-light);
}

.snapshot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-16);
}

.snapshot-title h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
}

.snapshot-date {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.btn-restore {
    padding: var(--space-8) var(--space-20);
    background: var(--color-brand-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-medium);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-restore:hover:not(:disabled) {
    background: var(--color-brand-primary-dark);
    transform: translateY(-1px);
}

.btn-restore:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Snapshot Details */
.snapshot-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.detail-item {
    display: flex;
    gap: var(--space-8);
}

/* Snapshot Stats */
.snapshot-stats {
    display: flex;
    gap: var(--space-24);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-light);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.stat-icon {
    font-size: 1.2rem;
}

.stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* No Snapshots */
.no-snapshots {
    padding: var(--space-48);
    text-align: center;
    color: var(--color-text-secondary);
}

.no-snapshots .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-16);
}

.no-snapshots p {
    font-size: 1rem;
    margin: 0;
}

/* Base .modal-overlay, .modal-dialog, .modal-header, .modal-close, .modal-body, .modal-footer
   defined in App.Web/wwwroot/css/modal.css — removed duplicates below */

/* Scoped: ModelHistory restore dialog — header uses h3 */
.ids-model-history-page .modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.warning-banner {
    background: var(--color-warning-light);
    color: var(--color-warning);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-small);
    border-left: 4px solid var(--color-warning);
    margin-bottom: var(--space-20);
    font-weight: 600;
}

/* Scoped: ModelHistory restore dialog — paragraph spacing inside modal body */
.ids-model-history-page .modal-body p {
    margin: 0 0 var(--space-20) 0;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.snapshot-preview {
    padding: var(--space-16);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.snapshot-preview strong {
    color: var(--color-text-primary);
}

.snapshot-preview small {
    color: var(--color-text-secondary);
}

.btn-cancel {
    padding: var(--space-10) var(--space-20);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled) {
    background: var(--color-grey-50);
}

.btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-confirm-restore {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-20);
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: var(--radius-medium);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-confirm-restore:hover:not(:disabled) {
    background: var(--color-error);
}

.btn-confirm-restore:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: var(--space-24);
    right: var(--space-24);
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-medium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    font-size: 0.95rem;
    font-weight: 500;
    animation: toastSlideIn 0.3s ease;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    background: var(--color-success);
    color: white;
}

.toast-error {
    background: var(--color-error);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ids-model-history-page {
        padding: var(--space-16);
    }

    .snapshot-header {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-restore {
        width: 100%;
        margin-top: var(--space-12);
    }

    .snapshot-stats {
        flex-direction: column;
        gap: var(--space-12);
    }

    /* Scoped: ModelHistory restore dialog responsive overrides */
    .ids-model-history-page .modal-overlay {
        padding: var(--space-12);
    }

    .ids-model-history-page .modal-footer {
        flex-direction: column;
    }

    .btn-cancel,
    .btn-confirm-restore {
        width: 100%;
    }
}


/* ==========================================================================
   FIXED MODAL OVERLAY (ConfirmModal component)
   True overlay modals that render on top of all content
   ========================================================================== */

/* Backdrop - full screen overlay with high z-index */
.modal-backdrop-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-20);
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Dialog box - the actual modal */
.modal-dialog-fixed {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Close button */
.modal-close-btn-fixed {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-4);
    line-height: 1;
    transition: color 0.2s ease;
    z-index: 1;
}

.modal-close-btn-fixed:hover {
    color: var(--color-text-primary);
}

/* Header */
.modal-header-fixed {
    padding: var(--space-24);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Body */
.modal-body-fixed {
    padding: var(--space-24);
    overflow-y: auto;
    flex: 1;
    color: var(--color-text-secondary);
}

/* Footer */
.modal-footer-fixed {
    padding: var(--space-24);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    gap: var(--space-12);
    justify-content: flex-end;
}

/* Rule Picker */
.rule-picker {
    padding: var(--space-16);
    margin-bottom: var(--space-16);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-medium);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.rule-picker-row {
    display: flex;
    gap: var(--space-12);
    align-items: center;
}

.rule-picker-button-row {
    display: flex;
}

.rule-picker-select-operator {
    flex: 0 0 25%;
    min-width: 150px;
}

.rule-picker-select-type {
    flex: 1;
    min-width: 300px;
}

/* Rule Card Renderer */
.advanced-fields {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-8);
}

.read-only-fields {
    padding: var(--space-8);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
}

/* ============================================================
   IDS CREATOR COMPONENTS - CONSOLIDATED FROM SCOPED CSS
   Moved from Module.IdsTools component CSS files to global stylesheet
   Due to Trimble Connect hosting issues with scoped selectors
   ============================================================ */

/* ===== IdsCreator: IdsModelStartPage ===== */
/* Model loading start page styling */

.ids-model-start-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; 
    width: 100%;
    background-color: var(--color-white);
}

.start-page-content {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 600px;
    width: 100%;
    animation: fadeInSlide 0.3s ease-in;
}

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

/* Status Icons */
.ids-model-start-page .status-icon {
    margin-bottom: 2rem;
}

.ids-model-start-page .status-icon i {
    font-size: 120px;
    line-height: 1;
}

/* Colors */
.ids-model-start-page .success-icon {
    color: var(--color-success);
}

.ids-model-start-page .error-icon {
    color: var(--color-error);
}

/* Status Title */
.ids-model-start-page .status-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Status Message */
.ids-model-start-page .status-message {
    font-size: 18px;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Status Hint */
.ids-model-start-page .status-hint {
    font-size: 16px;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 1.5rem;
}

/* Error Details */
.ids-model-start-page .error-details {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--color-error-light);
    border-left: 4px solid var(--color-error);
    border-radius: 4px;
    text-align: left;
}

.ids-model-start-page .error-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    word-wrap: break-word;
    font-family: 'Courier New', Courier, monospace;
}


/* Inline Progress Overlay */
.deletion-progress-overlay {
    position: relative;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--color-brand-primary);
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.progress-content h4 {
    margin: 0 0 10px 0;
    color: var(--color-brand-primary);
}

.progress-content p {
    margin: 5px 0;
}

.progress-message {
    font-size: 0.9em;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Inline Result Messages */
.deletion-result {
    position: relative;
    margin: 15px 0;
    border-radius: 8px;
    animation: slideDown 0.3s ease-out;
}

    .deletion-result .btn-close {
        position: absolute;
        top: 10px;
        right: 10px;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.deletion-result ul {
    list-style: none;
    padding-left: 0;
    max-height: 200px;
    overflow-y: auto;
}

    .deletion-result ul li {
        padding: 2px 0;
    }

/* ===== IdsCreator: IdsDiagramCanvas ===== */
/* Session 6: All-Domains Read-Only Mode Styles */
.diagram-mode-banner {
    position: absolute;
    top: 45px;
    left: 0px;
    z-index: 1000;
    max-width: 500px;
    margin-bottom: 0;
}

.ids-diagram-container.read-only {
    cursor: default !important;
}

.ids-diagram-container.read-only * {
    cursor: default !important;
}

/* ===== IdsCreator: IdsSelectionPanel ===== */
/* IDS Selection Panel Component Styles - Consolidated */
/* Reuses design tokens from site.css and components.css */

/* Panel Container - No outer card wrapper */
.ids-selection-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    
    /* Consistent horizontal gutter for all child elements */
    --ids-gutter-x: var(--space-8);
    --ids-gutter-y: var(--space-12);
}

    /* IdsSelectionPanel: override padding */
    .ids-selection-panel .panel-body {
        padding: 0;
    }

/* Rule Insert Card - Header-style strip without frame */
.selection-insert-card {
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    padding: var(--ids-gutter-y) var(--ids-gutter-x);
    display: flex;
    flex-direction: column;
    gap: var(--ids-gutter-y);
}

/* Top row: dropdown + help button on the same line */
.selection-insert-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dropdown wrapper grows to fill available space, leaving room for the button */
.selection-insert-dropdown {
    flex: 1;
    min-width: 0;
}

/* The select control is narrower so the button fits on the same line.
   The native dropdown list will still expand to fit its content. */
.selection-insert-dropdown .app-input {
    width: 100%;
}

/* Button on separate line below dropdown */
.selection-insert-button {
    width: 100%;
}

.selection-insert-button .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-24);
    min-height: 38px;
}

/* Panel Header - Used when editor is showing */
.ids-selection-panel .selection-panel-header {
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
}

.ids-selection-panel .selection-panel-header h3 {
    font-size: 18px;
    color: var(--color-text-primary);
    margin: 0;
}

/* Panel Body - No wrapper styling, operator zones are independent cards */
.ids-selection-panel .panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* Loading State */
.ids-selection-panel .panel-loading {
    padding: var(--space-32);
    text-align: center;
    color: var(--color-text-secondary);
}

/* Empty State */
.ids-selection-panel .empty-state {
    padding: var(--space-32);
    text-align: center;
    color: var(--color-text-secondary);
}

/* Operator Zone - Each zone is an independent card */
.rule-zone {
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: visible;
}

.rule-zone-and {
    border-left: 4px solid var(--color-success);
}

.rule-zone-or {
    border-left: 4px solid var(--color-warning);
}

.rule-zone-not {
    border-left: 4px solid var(--color-error);
}

/* Zone Header - Full width clickable, left badge, center arrow, right counter */
.rule-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--ids-gutter-y) var(--ids-gutter-x);
    background: var(--color-grey-50);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.rule-zone-header:hover {
    background: var(--color-grey-100);
}

/* Operator Arrow - Centered in header */
.zone-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 16px;
    transition: transform 0.2s ease;
}

/* Arrow colors matching operator badges */
.zone-arrow-and {
    color: var(--color-success);
}

.zone-arrow-or {
    color: var(--color-warning);
}

.zone-arrow-not {
    color: var(--color-error);
}

/* Operator Badge Styles */
.operator-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-small);
    font-weight: 600;
    font-size: 12px;
    color: white;
    min-width: 50px;
}

.operator-badge.operator-and {
    background: var(--color-success);
}

.operator-badge.operator-or {
    background: var(--color-warning);
    color: var(--color-black);
}

.operator-badge.operator-not {
    background: var(--color-error);
}

/* Rule Count Badge */
.rule-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-small);
    font-weight: 500;
    font-size: 12px;
    min-width: 30px;
}

/* Zone Body */
.rule-zone-body {
    padding: 0;
    background: var(--color-white);
    min-height: 40px; /* Ensure LogicExpanded state is visibly different from collapsed */
}

/* Zone Info Placeholder - shown in LogicExpanded state */
.zone-info-placeholder {
    padding: var(--space-8);
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Rule Card Container (Active System) */
/* ── Rule Card ────────────────────────────────────────────────────────────── */

.rule-card-container {
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    /* No accent/blue left border (per spec) */
    border-radius: var(--radius-small);
    margin-left: var(--ids-gutter-x);
    margin-right: var(--ids-gutter-x);
    margin-bottom: var(--space-12);
    overflow: visible;
}

.rule-card-container:hover {
    box-shadow: var(--shadow-sm);
}

/* Rule Card Header — matches Darstellung (ids-node-prop-card-header) pattern */
.rule-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    cursor: pointer;
    user-select: none;
}

.rule-card-header:hover {
    background: var(--color-grey-100);
}

/* Title block: primary (blue-toned) + secondary (gray) stacked */
.rule-card-header-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rule-card-primary-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-brand-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rule-card-secondary-title {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rule-card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.rule-card-chevron {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Rule Card Body */
.rule-card-body {
    padding: var(--ids-gutter-y) var(--ids-gutter-x);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Rule Details */
.rule-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}

.rule-detail,
.rule-phase-info,
.rule-modification-info {
    display: flex;
    gap: var(--space-8);
    font-size: 13px;
}

.detail-label {
    font-weight: 500;
    color: var(--color-text-secondary);
    min-width: 140px;
    flex-shrink: 0;
}

.detail-value {
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Thin divider between detail rows and phase/last-modified footer */
.rule-card-divider {
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-4) 0;
}

/* Phase info and modification info share the same row style */
.rule-phase-info .detail-label,
.rule-modification-info .detail-label {
    color: var(--color-text-muted);
    font-weight: 400;
}

.rule-modification-info .detail-value {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Editor Modification Info */
.editor-modification-info {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-subtle);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: left;
}

/* Legacy selectors kept for any remaining usages */
.rule-card-header-minimal { cursor: pointer; user-select: none; }
.rule-card-header-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--ids-gutter-y) var(--ids-gutter-x);
    background: var(--color-grey-50);
    border-bottom: 1px solid var(--color-border-subtle);
}
.rule-title-block { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; }
.rule-type  { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; font-weight: 600; }
.rule-title { font-size: 14px; color: var(--color-text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-card-menu { flex-shrink: 0; margin-left: auto; }

/* Alert Styles */
.ids-selection-panel .alert {
    padding: var(--space-16);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-16);
}

.ids-selection-panel .alert-danger {
    background: var(--color-error-light);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-text);
}

/* Scoped overrides: IdsSelectionPanel modals need higher z-index and custom dialog sizing */

/* Higher z-index so the modal appears above the IDS tree panel (base is 1000) */
.ids-selection-panel .modal-overlay {
    z-index: 10000;
}

/* Custom sizing: fixed width with responsive constraints */
.ids-selection-panel .modal-dialog {
    width: 500px;
    min-width: 360px;
    max-width: 90vw;
    max-height: 800px;
}

/* Compact header/footer padding compared to the 24px base */
.ids-selection-panel .modal-header {
    padding: var(--space-16) var(--space-24);
}

.ids-selection-panel .modal-header h5 {
    margin: 0;
    font-size: 18px;
    color: var(--color-text-primary);
}

/* Compact footer: smaller gap and padding than the base */
.ids-selection-panel .modal-footer {
    padding: var(--space-16) var(--space-24);
    gap: var(--space-8);
}


.ifc-component-editor .validation-error {
    display: block;
    margin-top: var(--space-4);
    color: var(--color-error);
    font-size: 13px;
}

.ifc-component-editor .alert {
    padding: var(--space-12);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-16);
}

.ifc-component-editor .alert-danger {
    background: var(--color-error-light);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-text);
}

.ifc-component-editor .editor-footer {
    display: flex;
    gap: var(--space-8);
    justify-content: flex-end;
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

.ifc-component-editor .btn {
    min-width: 80px;
}

/* ===== IdsCreator: Shared Rule Editor Base ===== */
/* .property-rule-editor, .classification-rule-editor, .ifc-component-editor
   all share identical structure. The common rules live here under .rule-editor;
   the named classes below apply the same styles via multi-selector. */

.rule-editor,
.property-rule-editor,
.classification-rule-editor,
.ifc-component-editor {
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    padding: var(--space-24);
    margin-bottom: var(--space-16);
}

.rule-editor .editor-header,
.property-rule-editor .editor-header,
.classification-rule-editor .editor-header,
.ifc-component-editor .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid var(--color-border-subtle);
}

.rule-editor .editor-header h4,
.property-rule-editor .editor-header h4,
.classification-rule-editor .editor-header h4,
.ifc-component-editor .editor-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.ifc-component-editor .editor-header-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.ifc-component-editor .ai-suggest-btn {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
}

.ifc-component-editor .ai-message {
    margin-bottom: var(--space-16);
    font-size: 13px;
}

.rule-editor .editor-body,
.property-rule-editor .editor-body,
.classification-rule-editor .editor-body,
.ifc-component-editor .editor-body {
    margin-bottom: var(--space-24);
}

.rule-editor .form-group,
.property-rule-editor .form-group,
.classification-rule-editor .form-group,
.ifc-component-editor .form-group {
    margin-bottom: var(--space-16);
}

.rule-editor .form-group label,
.property-rule-editor .form-group label,
.classification-rule-editor .form-group label,
.ifc-component-editor .form-group label {
    display: block;
    margin-bottom: var(--space-8);
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 14px;
}

.rule-editor .app-input,
.property-rule-editor .app-input,
.classification-rule-editor .app-input,
.ifc-component-editor .app-input {
    width: 90%;
}

.rule-editor .app-input:disabled,
.property-rule-editor .app-input:disabled,
.classification-rule-editor .app-input:disabled,
.ifc-component-editor .app-input:disabled {
    background: var(--color-grey-50);
    color: var(--color-text-secondary);
}

.rule-editor textarea.app-input,
.property-rule-editor textarea.app-input,
.classification-rule-editor textarea.app-input,
.ifc-component-editor textarea.app-input {
    min-height: 60px;
}

.rule-editor .validation-error,
.property-rule-editor .validation-error,
.classification-rule-editor .validation-error,
.ifc-component-editor .validation-error {
    display: block;
    margin-top: var(--space-4);
    color: var(--color-error);
    font-size: 13px;
}

.rule-editor .alert,
.property-rule-editor .alert,
.classification-rule-editor .alert,
.ifc-component-editor .alert {
    padding: var(--space-12);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-16);
}

.rule-editor .alert-danger,
.property-rule-editor .alert-danger,
.classification-rule-editor .alert-danger,
.ifc-component-editor .alert-danger {
    background: var(--color-error-light);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-text);
}

.rule-editor .editor-footer,
.property-rule-editor .editor-footer,
.classification-rule-editor .editor-footer,
.ifc-component-editor .editor-footer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    justify-content: space-between;
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

.rule-editor .editor-audit-info,
.property-rule-editor .editor-audit-info,
.classification-rule-editor .editor-audit-info,
.ifc-component-editor .editor-audit-info {
    flex: 1;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.rule-editor .editor-footer-actions,
.property-rule-editor .editor-footer-actions,
.classification-rule-editor .editor-footer-actions,
.ifc-component-editor .editor-footer-actions {
    display: flex;
    gap: var(--space-8);
    flex-shrink: 0;
}

.rule-editor .btn,
.property-rule-editor .btn,
.classification-rule-editor .btn,
.ifc-component-editor .btn {
    min-width: 80px;
}

/* IfcComponentEditor-specific additions */
.ifc-component-editor .extended-fields-toggle {
    margin-bottom: var(--space-16);
}

.ifc-component-editor .extended-fields-toggle .btn-link {
    padding: 0;
    color: var(--color-brand-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
}

.ifc-component-editor .extended-fields-toggle .btn-link:hover {
    text-decoration: underline;
}

.ifc-component-editor .extended-fields {
    padding: var(--space-16);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-16);
}

.ifc-component-editor .extended-fields .form-group:last-child {
    margin-bottom: 0;
}

/* ============================================================
   LEVEL 3 EXCLUSIVE SELECTION SECTIONS
   ============================================================ */


/* ============================================================================
   Release/Freigabe Workflow CSS
   Session 2 - PHASE 5: UI Styling for Release/Freigabe Workflow
   ============================================================================ */

/* Release Actions Section — no card wrapper; buttons sit directly in panel-content */
.release-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-buttons-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.action-buttons-row button {
    width: 100%;
    min-height: 44px; /* Ensure consistent minimum height for touch targets */
}

.action-buttons button:disabled,
.action-buttons-row button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Phase Status Table - Used in IdsApprovalPanel */
.phase-status-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    table-layout: fixed;
}

.phase-status-table th {
    font-weight: 600;
    padding: 0.6rem; /* Reduced from 0.75rem (20% reduction) */
    background: var(--color-grey-50);
    border-bottom: 2px solid var(--color-border);
}

.phase-status-table th:first-child {
    text-align: left;
    max-width: 120px; /* Limit phase name column width */
}

    .phase-status-table th:first-child,
    .phase-status-table td.phase-name {
        width: 120px; 
        max-width: 120px;
    }

/* Vertical headers for status columns to save space */
    .phase-status-table th.status-column,
    .phase-status-table td.status-cell {
        width: 40px; /* fast bredde */
        max-width: 40px;
        overflow: hidden;
        white-space: nowrap;
    }

    .phase-status-table th.status-column {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        text-align: left;
        padding: 0.4rem;
        min-height: 80px;
        line-height: 1;
    }

.phase-status-table td {
    padding: 0.6rem; /* Reduced from 0.75rem (20% reduction) */
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
}

.phase-status-table td.phase-name {
    text-align: left;
    font-weight: 500;
    max-width: 120px; /* Limit phase name cell width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .phase-status-table td.status-cell {
        padding: 0.2rem 0.1rem;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

.phase-status-table td.status-cell:hover {
    background: var(--color-table-row-hover-bg);
}

.phase-status-table td.status-cell.active {
    background: var(--color-primary-light);
    font-weight: 600;
}

    .phase-status-table .count-badge {
        display: inline-block;
        min-width: 1.2em;
        padding: 0.1rem 0.2rem;
        background: var(--color-grey-100);
        border-radius: 0.25rem;
        font-weight: 500;
        font-size: 0.85rem;
    }

.phase-status-table tbody tr:hover {
    background: var(--color-grey-50);
}


/* Lock State Indicator */
.lock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.lock-indicator.locked,
.lock-indicator.pending-approval,
.lock-indicator.pending-deletion {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.lock-indicator.unlocked {
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.lock-indicator i {
    font-size: 1rem;
}

/* Current Node Actions Header */
.release-actions h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Alert messages in Release actions */
.release-actions .alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.release-actions .alert-success {
    background: var(--color-success-light);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.release-actions .alert-error,
.release-actions .alert-danger {
    background: var(--color-error-light);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.release-actions .alert-info {
    background: var(--color-info-light);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

/* ============================================================
   TASK 1: Collapsible Approval Cards (UND/ODER Style)
   ============================================================ */

.approval-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-8); /* TASK 3: Compact spacing */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Release cards: explicit primary-blue left border. */
.approval-card-release {
    border-left: 4px solid var(--color-success);
}

/* Deleted cards: red left border so they are visually distinct from release cards. */
.approval-card-delete {
    border-left: 4px solid var(--color-error);
}

/* TASK 1: Active card indicator (subtle shadow only - DO NOT override type colors) */
.approval-card.active-card {
    box-shadow: 0 2px 8px rgba(0, 95, 158, 0.15);
    /* Removed border-color override to preserve type-specific colors */
}

/* TASK 5: Hover effect */
.approval-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* TASK 1: Card Header (Clickable - expands/collapses) */
.approval-card-header {
    padding: var(--space-12) var(--space-16);
    background-color: var(--color-grey-50);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.approval-card-header:hover {
    background-color: var(--color-grey-100);
}

/* TASK 1: Progress Badge (X/Y) - Left side, blue background */
.progress-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-brand-primary);
    color: var(--color-white);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

/* TASK 1: Expand/Collapse Arrow - Center */
.expand-arrow {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

/* TASK 1: Request Type Badge (Release/Deletion) - Right side */
.request-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
}

.request-type-badge.request-type-create,
.request-type-badge.request-type-update {
    background-color: var(--color-success); /* Green for Release */
}

.request-type-badge.request-type-delete {
    background-color: var(--color-error); /* Red for Deletion */
}

/* TASK 1: Card Body (Collapsible Content) */
.approval-card-body {
    padding: var(--space-12) var(--space-16); /* TASK 3: Compact padding */
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-8); /* TASK 3: Compact gap */
}

/* TASK 1: Card Title */
.card-title {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.card-title strong {
    font-weight: 600;
    color: var(--color-brand-primary-dark);
}


/* TASK 1: Card Date */
.card-date {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ── Approval cards use the standard ids-node-prop-card primary-blue left border (Darstellung pattern). ── */
/* Do NOT override border-left-color here — all approval cards must match the Darstellung style.       */

.ids-node-prop-card.active-card {
    box-shadow: 0 2px 8px rgba(0, 95, 158, 0.15);
}

/* ── ApprovalInfo text (shown before creator name/date in card body) ── */
.approval-info-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-4);
}

/* ── Release card action button row: approve/reject fill equally; comment button is icon-width only ── */
.app-card-action-buttons {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.app-card-action-main-btn {
    flex: 1;
}

/* ── Approval action buttons (approve / reject) ── */
.approval-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-small);
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.approval-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.approval-action-btn-approve {
    background: var(--color-success-light);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

.approval-action-btn-approve:hover:not(:disabled) {
    background: var(--color-success);
    color: var(--color-white);
}

.approval-action-btn-reject {
    background: var(--color-error-light);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

.approval-action-btn-reject:hover:not(:disabled) {
    background: var(--color-error);
    color: var(--color-white);
}

/* ── Approval comment textarea ── */
.approval-comment-textarea {
    width: 100%;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    resize: vertical;
}

.approval-comment-textarea:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 95, 158, 0.1);
}

/* ── Deleted items list card body ── */
.deleted-card-summary {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* ── Release action buttons (Publish + Mark for Deletion) ── */
.release-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    min-height: 44px;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-small);
    border: 1px solid transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    justify-content: center;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.release-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.release-action-btn-primary {
    background: var(--color-brand-primary);
    color: var(--color-white);
}

.release-action-btn-primary:hover:not(:disabled) {
    background: var(--color-brand-primary-dark);
}

.release-action-btn-danger {
    background: var(--color-error-light);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

.release-action-btn-danger:hover:not(:disabled) {
    background: var(--color-error);
    color: var(--color-white);
}

/* ── Modal footer buttons ── */
.modal-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-20);
    border-radius: var(--radius-small);
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.modal-footer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-footer-btn-secondary {
    background: var(--color-grey-100);
    color: var(--color-text-primary);
    border-color: var(--color-border-subtle);
}

.modal-footer-btn-secondary:hover:not(:disabled) {
    background: var(--color-grey-200);
}

.modal-footer-btn-primary {
    background: var(--color-brand-primary);
    color: var(--color-white);
}

.modal-footer-btn-primary:hover:not(:disabled) {
    background: var(--color-brand-primary-dark);
}

.modal-footer-btn-danger {
    background: var(--color-error);
    color: var(--color-white);
}

.modal-footer-btn-danger:hover:not(:disabled) {
    background: var(--color-error);
}

/* ── Semantic color helpers (replacing Bootstrap text-danger / text-success / text-muted) ── */
.ids-text-success {
    color: var(--color-success);
}

.ids-text-danger {
    color: var(--color-error);
}

.ids-text-muted {
    color: var(--color-text-muted);
}

/* TASK 1: Compact Approval Steps (Multi-step indicator as dots) */
.approval-steps-compact {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-right: var(--space-8); /* Space before request type badge */
}

.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--color-border-subtle);
}

.step-dot.step-approved {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.step-dot.step-rejected {
    background-color: var(--color-error);
    border-color: var(--color-error);
}

.step-dot.step-pending {
    background-color: var(--color-grey-200);
    border-color: var(--color-grey-300);
}

/* Sequential blocker step: orange indicator while the step is still pending */
.step-dot.step-sequential-blocker {
    background-color: var(--color-warning);
    border-color: var(--color-warning-text);
}

/* TASK 1: Card Action Buttons */
/* Decision History (for decided cards) - phase_req.txt Issue B */
/* FIX 3: Decision history with no extra indentation */
.card-decision-history {
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-top: var(--space-12);
}

.card-decision-history .history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-12) 0;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}

.history-step {
    font-weight: 600;
    color: var(--color-text-primary);
    min-width: 60px;
}

.history-decision {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-small);
    min-width: 80px;
    text-align: center;
}

.decision-approved .history-decision {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
}

.decision-rejected .history-decision {
    background-color: var(--color-error-light);
    color: var(--color-danger-text);
}

.history-approver {
    flex: 1;
    color: var(--color-text-secondary);
}

.history-date {
    color: var(--color-text-muted);
    font-size: 12px;
    min-width: 70px;
    text-align: right;
}

/* TASK 1: Card Status Info (when buttons not shown) */
.card-status-info {
    padding: var(--space-8);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    text-align: center;
}

.card-status-info .status-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ============================================================
   TASK 2: Sticky Revision Dropdown
   ============================================================ */

.sticky-revision-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-white);
    padding: var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    margin-bottom: var(--space-12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.sticky-revision-dropdown {
    flex: 1;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: white;
    font-size: 14px;
    color: var(--color-text-primary);
    min-width: 250px;
}

.sticky-revision-dropdown:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 95, 158, 0.1);
}

.historical-indicator {
    font-size: 12px;
    color: var(--color-warning);
    font-weight: 600;
    white-space: nowrap;
}

.loading-revisions-small {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.loading-revisions-small .spinner-small {
    width: 16px;
    height: 16px;
    /* size override only; animation from shared .spinner-small in components.css */
}

/* ============================================================
   TASK 3: Compact Vertical Layout Adjustments
   ============================================================ */

.approval-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8); /* Reduced from --space-16 */
}

.approval-items-section {
    margin-top: var(--space-12); /* Reduced margin */
}

/* ============================================================
   TASK 6: Hover Tooltip for Table Cells
   ============================================================ */

.hover-tooltip {
    position: fixed;
    z-index: 1000;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: var(--space-12);
    min-width: 200px;
    max-width: 320px; /* As per phase_req.txt requirement */
    pointer-events: none; /* Don't interfere with mouse events */
    white-space: normal; /* Allow text wrapping */
    overflow-wrap: anywhere; /* Break long words if needed */
}

/* Right expansion (default) */
.hover-tooltip.tooltip-expand-right {
    transform: translateX(10px);
}

/* Left expansion (when near right edge) */
.hover-tooltip.tooltip-expand-left {
    transform: translateX(calc(-100% - 10px));
}

.hover-tooltip-loading {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-text-secondary);
    font-size: 13px;
}

.hover-tooltip-loading .spinner-small {
    width: 14px;
    height: 14px;
    /* size override only; animation from shared .spinner-small in components.css */
}


.hover-tooltip-empty {
    color: var(--color-text-muted);
    font-size: 13px;
    font-style: italic;
}

.hover-tooltip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.hover-tooltip-list li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-grey-100);
    font-size: 13px;
    line-height: 1.4;
}

.hover-tooltip-list li:last-child {
    border-bottom: none;
}

.tooltip-node-title {
    color: var(--color-text-primary);
    font-weight: 500;
}

.tooltip-node-level {
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-left: var(--space-4);
}

.hover-tooltip-more {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

/* Make status cells hoverable */
.status-cell {
    position: relative;
    cursor: pointer;
}

/* ============================================================
   COMMENT FEATURE STYLING
   For pending and decided approval cards
   ============================================================ */

/* Comment Button */
.comment-btn {
    padding: 6px 10px;
    border-radius: var(--radius-small);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.comment-btn svg {
    width: 16px;
    height: 16px;
}

/* Comment button when it has comment */
.comment-btn.has-comment {
    color: var(--color-brand-primary);
}

.comment-btn.has-comment svg {
    fill: var(--color-brand-primary);
}

/* Comment Textarea Container */
.comment-textarea-container {
    margin-top: var(--space-12);
    padding: var(--space-12);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
}

.comment-textarea-container label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: var(--space-8);
    color: var(--color-text-primary);
}

.comment-textarea-container textarea {
    width: 100%;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}

.comment-textarea-container textarea:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 95, 158, 0.1);
}

/* Show Comments Toggle (for decided cards) */
.show-comments-toggle {
    margin-bottom: var(--space-12);
    padding: var(--space-8);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
}

.show-comments-toggle label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.show-comments-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* TASK 3: Comment indicator icon next to "Kommentare anzeigen" */
.approval-comments-indicator-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--space-8);
    width: 20px;
    height: 20px;
    color: var(--color-text-muted); /* Gray by default (no comments) */
}

.approval-comments-indicator-icon svg {
    display: block; /* Prevent baseline spacing issues */
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.approval-comments-indicator-icon.has-comments {
    color: var(--color-brand-primary); /* Blue when comments exist */
}

/* TASK 2: Ensure comment label and text are on separate line */
.decision-comment {
    display: block;
    border-left: 2px solid var(--color-border-light);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1;
    margin-top: var(--space-8);
    padding-left: var(--space-12);
}

.decision-comment strong {
    display: block; /* Put label on its own line */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4); /* Small spacing after label */
}

.decision-comment-placeholder {
    font-style: italic;
    opacity: 0.7;
}

/* ============================================================
   APPROVAL CARD BUTTON LAYOUT (TASK 1)
   ============================================================ */

.card-action-buttons {
    display: flex;
    gap: var(--space-8);
    align-items: stretch;
    margin-top: var(--space-8);
    height: 32px;
}

.card-action-buttons .btn {
    flex: 2;
    padding: var(--space-8) var(--space-12);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    white-space: nowrap;
}

.card-action-buttons .btn-approve {
    background-color: var(--color-success);
    color: white;
    border: none;
}

.card-action-buttons .btn-approve:hover:not(:disabled) {
    background-color: var(--color-success);
}

.card-action-buttons .btn-reject {
    background-color: var(--color-error);
    color: white;
    border: none;
}

.card-action-buttons .btn-reject:hover:not(:disabled) {
    background-color: var(--color-error);
}

.card-action-buttons .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-action-buttons .btn-icon {
    font-size: 16px;
    line-height: 1;
}

/* Decision comment icon button - icon-only, no background styling */
.approval-decision-comment-icon-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--color-grey-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.card-action-buttons .btn.approval-decision-comment-icon-btn {
    flex: 0 0 32px;
    width: 32px;
}

.approval-decision-comment-icon-btn:hover:not(:disabled),
.approval-decision-comment-icon-btn:focus-visible {
    background: transparent;
}

.approval-decision-comment-icon-btn.has-comment {
    color: var(--color-brand-primary);
}

.approval-decision-comment-icon-btn svg {
    width: 32px;
    height: 32px;
}

/* Responsive: wrap on narrow screens but maintain equal heights */
@media (max-width: 500px) {
    .card-action-buttons {
        flex-wrap: wrap;
    }
}

/* ============================================================
   APPROVAL HISTORY LAYOUT (TASK 4 - Multi-line structure)
   ============================================================ */

/* FIX 3: History item with no extra padding, equal width distribution */
.history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.history-item:last-child {
    border-bottom: none;
}

/* FIX 3: Equal width row for Step, Badge, and Name+Date */
.history-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.history-item-row > * {
    flex: 1;
    min-width: 0; /* Allow text truncation if needed */
}

.step-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.history-item-user-inline {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Decision badges (approved/rejected) as compact pills */
.decision-approved,
.decision-rejected {
    display: inline-block;
    padding: 4px 12px;
    text-align: center;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
}

.decision-approved {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--color-success);
}

.decision-rejected {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--color-error);
}

/* End Release/Freigabe Workflow CSS */

/* ============================================================
   PROJECT SETTINGS - APPROVAL STEP CARDS
   Matching style of IdsApprovalPanel cards
   ============================================================ */

/* Step Card Container */
/* Approval Step Cards Container - Centered with constraints */
.steps-list-container {
    max-width: 800px;
    width: 100%;
    min-width: 800px;
    margin: 0;
}

@media (max-width: 850px) {
    .steps-list-container {
        min-width: 100%;
        padding: 0 var(--space-8);
    }
}

.steps-list {
    display: flex;
    flex-direction: column;
}

.approval-step-card {
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-brand-primary); /* Blue left border */
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-16);
    transition: box-shadow 0.3s ease;
}

.approval-step-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-step-card.expanded {
    box-shadow: 0 2px 8px rgba(0, 95, 158, 0.15);
}

/* Card Header (Collapsible) */
.step-card-header {
    padding: var(--space-12) var(--space-16);
    background-color: var(--color-grey-50);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.step-card-header:hover {
    background-color: var(--color-grey-100);
}

/* Step Badge (Blue, Left side) */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-brand-primary);
    color: var(--color-white);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

/* Step Name (Center) */
.step-name {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Header Actions (Right side) */
.step-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Mode Badge */
.mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-grey-200);
    color: var(--color-text-primary);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    width: 200px;
}

/* Card Body (Collapsible Content) */
.step-card-body {
    padding: var(--space-16);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-subtle);
}

/* View Mode */
.view-mode {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.view-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.view-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.view-value {
    color: var(--color-text-primary);
    font-size: 0.9375rem;
}

.assignees-view {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.assignee-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-grey-100);
    color: var(--color-text-primary);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
}

/* Edit Mode */
.edit-mode {
    display: flex;
    flex-direction: column;
}

/* Assignees List (Edit Mode) */
.assignees-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.assignee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-subtle);
}

.assignee-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.assignee-row .btn {
    flex-shrink: 0;
}

/* Search Results */
.search-results {
    background: var(--color-white);
}

.search-result-item {
    border-radius: var(--radius-small);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: var(--color-grey-50);
}

/* ── Search result section label (approval step assignee search) ── */
.search-result-section-label {
    padding: var(--space-4) var(--space-8);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ── Search result type badge ("Group" pill in search results) ── */
.search-result-type-badge {
    display: inline-block;
    margin-left: var(--space-4);
    padding: 1px var(--space-8);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    background: var(--color-grey-200);
    color: var(--color-text-secondary);
    vertical-align: middle;
}

/* ── Group badges (approval step settings) ──────────────── */
.step-group-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/* Blue primary badge showing a group name with icon */
.step-group-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-brand-primary);
    color: var(--color-white);
    border-radius: var(--radius-small);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* × button inside group badge (replaces Bootstrap btn-close btn-close-white) */
.step-group-badge-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-left: var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    opacity: 0.75;
    font-size: 1rem;
    line-height: 1;
}

.step-group-badge-remove::after {
    content: "×";
}

.step-group-badge-remove:hover {
    opacity: 1;
}

/* ── Sync date text (shown after sync button, replaces text-muted ms-2) ── */
.sync-date-text {
    display: inline-block;
    margin-left: var(--space-8);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ── Settings table (replaces Bootstrap table table-bordered) ── */
.ids-settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.ids-settings-table th,
.ids-settings-table td {
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
}

.ids-settings-table thead {
    background: var(--color-grey-100);
}

/* Muted / alternate-style table row (replaces Bootstrap table-secondary) */
.ids-table-row-muted {
    background: var(--color-grey-100);
    color: var(--color-text-secondary);
}

/* ── Button group (adjacent buttons, replaces Bootstrap btn-group) ── */
.ids-btn-group {
    display: inline-flex;
}

.ids-btn-group .btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ids-btn-group .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Input group (joined input + button, replaces Bootstrap input-group) ── */
.ids-input-group {
    display: flex;
}

.ids-input-group .app-input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ids-input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ============================================================
   BCF TOPIC DIALOG - SCOPED OVERRIDES
   Moved from IdsBcfTopicDialog.razor inline <style> block.
   Base .modal-* classes come from App.Web/wwwroot/css/modal.css.
   ============================================================ */

/* BCF dialog is wider than the 500px modal-dialog base */
.modal-dialog.ids-bcf-topic-dialog {
    max-width: 600px;
}

/* BCF dialog close button — uses flexbox centering, not Bootstrap's SVG bg-image */
.ids-bcf-topic-dialog .btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.ids-bcf-topic-dialog .btn-close:hover {
    background: var(--color-grey-100);
}

/* BCF dialog h3 heading inside modal-header */
.ids-bcf-topic-dialog .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Required field indicator */
.ids-bcf-topic-dialog .required {
    color: var(--color-error);
}



/* AG Grid Row Selection - Custom styling to match IdsCreator theme */
.ag-theme-alpine .ag-row-selected {
    background-color: rgba(0, 102, 179, 0.15) !important;
    border-left: 3px solid var(--color-brand-primary) !important;
}

.ag-theme-alpine .ag-row-selected:hover {
    background-color: rgba(0, 102, 179, 0.2) !important;
}

.ag-theme-alpine .ag-row-focus {
    outline: none;
}

/* Ensure selected row stands out */
.ag-theme-alpine .ag-row-selected .ag-cell {
    font-weight: 500;
}

/* IDS Matrix View Styles */
/* Aligned with idstools.css color scheme */

.ids-matrix-view {
    display: flex;
    flex-direction: column;
    /* Remove height: 100% - doesn't work in scrollable parent */
    /* Use min-height to ensure the view takes up space */
    min-height: 300px;
    width: 100%;
    height: 100%;
    background: var(--color-surface);
}

/* Matrix Toolbar — single row, no wrapping */
.ids-matrix-toolbar {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    align-items: flex-end;
    flex-shrink: 0;
    height: 66px;
}

    /* Override ids-dropdown-label to use title-case (not all-caps) for matrix toolbar */
    .ids-matrix-toolbar .ids-dropdown-label {
        text-transform: none;
    }

/* Dropdown group — all dropdowns equal width, flex-shrink allowed */
.ids-matrix-toolbar-dropdowns {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 0.5rem;
    align-items: flex-end;
}

    .ids-matrix-toolbar-dropdowns > .ids-layout-dropdown {
        flex: 1 1 0;
        min-width: 0;
        max-width: 160px;
    }

/* Compact toolbar-style dropdown for the matrix toolbar — matches diagram toolbar look */
.ids-matrix-select {
    padding: 6px 8px;
    border: 1px solid var(--color-border-subtle);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all 0.2s;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-matrix-select:hover {
    background: var(--color-grey-50);
    border-color: var(--color-brand-primary);
}

.ids-matrix-select:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.1);
}

/* Search toggle wrapper */
.ids-matrix-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: flex-end;
}

    .ids-matrix-toolbar-search.ids-search-expanded {
        flex-shrink: 1;
    }

/* Icon-only search toggle button */
.ids-matrix-search-toggle {
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
}

/* Search input in expanded state */
.ids-matrix-search {
    width: clamp(120px, 16vw, 240px);
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    height: auto;
    line-height: 1.5;
    border-radius: 4px;
}

/* Right group: 2-line status + refresh */
.ids-matrix-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: flex-end;
}

/* 2-line "Loaded / N rows" status */
.ids-matrix-status-2line {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
    white-space: nowrap;
}

/* Matrix Grid Container */
.ids-matrix-grid-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    overflow-y: auto;

}

/* AG Grid element - must have explicit height */
.ids-matrix-grid {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

/* AG Grid Theme Overrides */
.ag-theme-alpine {
    --ag-header-background-color: var(--color-grey-50);
    --ag-header-foreground-color: var(--color-text-primary);
    --ag-border-color: var(--color-border);
    --ag-row-hover-color: var(--color-grey-50);
}

/* Matrix Header Text Wrapping - Unlimited lines with ellipsis */
.ag-theme-alpine .ag-header-cell .ag-header-cell-label,
.ag-theme-alpine .ag-header-cell .ag-header-cell-text {
    white-space: normal !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset;   /* Removed 2-line limit */
    letter-spacing: 0.05em;
}

/* Vertical column headers for rule/attribute columns.
 * Rules live in the global stylesheet (not a scoped *.razor.css) so they apply
 * to AG Grid DOM that is outside the Blazor component boundary.
 * DevTools verification: inspect a rule/attribute header cell — it must carry
 * .ag-header-cell + .ids-vertical-header and the matched rule must show
 * "idstools.css" (no [b-xxxxx] scope attribute selector).
 */

.ag-theme-alpine .ag-header-cell.ids-vertical-header {
    padding: 4px 2px !important;
    overflow: hidden;
}

.ag-theme-alpine .ag-header-cell.ids-vertical-header .ag-header-cell-label {
    align-items: flex-start;
    justify-content: center;
    white-space: normal !important;
    overflow: hidden;
    display: flex;
    text-overflow: clip;
    height: 120px;
    max-height: 120px;
}

.ag-theme-alpine .ag-header-cell.ids-vertical-header .ag-header-cell-text {
    writing-mode: vertical-rl;
    display: block !important;
    white-space: normal !important;
    overflow: hidden;          
    line-height: 1.2;
    letter-spacing: 0.05em;
}

/* Matrix Cell Styling */
.matrix-hierarchy-cell {
    font-weight: 500;
    background: var(--color-grey-50);
}

/* Row spanning cells - ensures proper borders and alignment for merged cells */
.ag-cell-span {
    display: flex;
    align-items: center;
    border-right: 1px solid var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Background colors for structure columns using node level color system */
.matrix-col-domain {
    background: var(--node-level-1-bg) !important;
}

.matrix-col-element {
    background: var(--node-level-2-bg) !important;
}

.matrix-col-representation {
    background: var(--node-level-3-bg) !important;
}

.matrix-col-inforeq {
    background: var(--node-level-4-bg) !important;
}

/* Ensure backgrounds work in pinned columns container */
.ag-pinned-left-cols-container .matrix-col-domain,
.ag-pinned-left-cols-container .matrix-col-element,
.ag-pinned-left-cols-container .matrix-col-representation,
.ag-pinned-left-cols-container .matrix-col-inforeq {
    background: inherit;
}

/* Apply background to inner cell wrapper for themes that use it */
.matrix-col-domain .ag-cell-value {
    background: var(--node-level-1-bg);
}

.matrix-col-element .ag-cell-value {
    background: var(--node-level-2-bg);
}

.matrix-col-representation .ag-cell-value {
    background: var(--node-level-3-bg);
}

.matrix-col-inforeq .ag-cell-value {
    background: var(--node-level-4-bg);
}

/* Compact node columns: fixed narrow width, no wrap, truncate with ellipsis */
.matrix-compact-col {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── AG Grid Hierarchy Cell Lifecycle / LockState Styling ─────────────────────
   Per IDS-CREATOR_NODE_AND_BCF_COLOR_CONTRACT.md §4 (Sections 4A–4G).
   Applied on the actual merged hierarchy cell block, on top of the base level color.
   Rendering order: base fill (level) → lifecycle border+fill → optional BCF accent.
   ─────────────────────────────────────────────────────────────────────────── */

/* PendingApproval: 50% level bg fill + blue dashed outer border */
.matrix-col-domain.ids-lock-pending-approval {
    background: var(--node-level-1-bg-light) !important;
    border: 2px dashed var(--ids-lock-border-pending-approval) !important;
}
.matrix-col-element.ids-lock-pending-approval {
    background: var(--node-level-2-bg-light) !important;
    border: 2px dashed var(--ids-lock-border-pending-approval) !important;
}
.matrix-col-representation.ids-lock-pending-approval {
    background: var(--node-level-3-bg-light) !important;
    border: 2px dashed var(--ids-lock-border-pending-approval) !important;
}
.matrix-col-inforeq.ids-lock-pending-approval {
    background: var(--node-level-4-bg-light) !important;
    border: 2px dashed var(--ids-lock-border-pending-approval) !important;
}

/* Unlocked_Rejected: 40% RED fill + red solid outer border */
.matrix-col-domain.ids-lock-unlocked-rejected {
    background: var(--ids-lock-unlocked-rejected-bg) !important;
    border: 2px solid var(--ids-lock-border-unlocked-rejected) !important;
}
.matrix-col-element.ids-lock-unlocked-rejected {
    background: var(--ids-lock-unlocked-rejected-bg) !important;
    border: 2px solid var(--ids-lock-border-unlocked-rejected) !important;
}
.matrix-col-representation.ids-lock-unlocked-rejected {
    background: var(--ids-lock-unlocked-rejected-bg) !important;
    border: 2px solid var(--ids-lock-border-unlocked-rejected) !important;
}
.matrix-col-inforeq.ids-lock-unlocked-rejected {
    background: var(--ids-lock-unlocked-rejected-bg) !important;
    border: 2px solid var(--ids-lock-border-unlocked-rejected) !important;
}

/* PendingDeletion: 40% gray fill + red dashed outer border */
.matrix-col-domain.ids-lock-pending-deletion,
.matrix-col-element.ids-lock-pending-deletion,
.matrix-col-representation.ids-lock-pending-deletion,
.matrix-col-inforeq.ids-lock-pending-deletion {
    background: var(--ids-lock-pending-deletion-bg) !important;
    border: 2px dashed var(--ids-lock-border-pending-deletion) !important;
}

/* Inner cell wrapper must mirror the lifecycle background for pinned-column themes */
.matrix-col-domain.ids-lock-pending-approval .ag-cell-value {
    background: var(--node-level-1-bg-light);
}
.matrix-col-element.ids-lock-pending-approval .ag-cell-value {
    background: var(--node-level-2-bg-light);
}
.matrix-col-representation.ids-lock-pending-approval .ag-cell-value {
    background: var(--node-level-3-bg-light);
}
.matrix-col-inforeq.ids-lock-pending-approval .ag-cell-value {
    background: var(--node-level-4-bg-light);
}

.matrix-col-domain.ids-lock-unlocked-rejected .ag-cell-value {
    background: var(--ids-lock-unlocked-rejected-bg);
}
.matrix-col-element.ids-lock-unlocked-rejected .ag-cell-value {
    background: var(--ids-lock-unlocked-rejected-bg);
}
.matrix-col-representation.ids-lock-unlocked-rejected .ag-cell-value {
    background: var(--ids-lock-unlocked-rejected-bg);
}
.matrix-col-inforeq.ids-lock-unlocked-rejected .ag-cell-value {
    background: var(--ids-lock-unlocked-rejected-bg);
}

.matrix-col-domain.ids-lock-pending-deletion .ag-cell-value,
.matrix-col-element.ids-lock-pending-deletion .ag-cell-value,
.matrix-col-representation.ids-lock-pending-deletion .ag-cell-value,
.matrix-col-inforeq.ids-lock-pending-deletion .ag-cell-value {
    background: var(--ids-lock-pending-deletion-bg);
}



.matrix-compact-col .ag-cell-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

/* Secondary (shared) node title — displayed in italic to indicate a borrowed branch */
.matrix-secondary-node {
    font-style: italic;
    opacity: 0.85;
}

/* Modified By and Modified Date optional columns */
.matrix-col-modified-by,
.matrix-col-modified-date {
    background: var(--color-grey-50);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.matrix-rule-cell {
    text-align: center;
    padding: 0 !important;
}

.matrix-cell-content {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    height: 100%;
}

.matrix-cell-empty {
    color: var(--color-text-muted);
    font-size: 1rem;
    opacity: 0.5;
}

/* Logical Operator Badges */
.matrix-op {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .matrix-op:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.matrix-op-and {
    background-color: var(--color-badge-logic-AND-bg);
    color: var(--color-badge-logic-AND);
    border: 1px solid var(--color-badge-logic-AND);
}

    .matrix-op-and:hover {
        background-color: var(--color-badge-logic-AND-bg-light);
    }

.matrix-op-or {
    background-color: var(--color-badge-logic-OR-bg);
    color: var(--color-badge-logic-OR);
    border: 1px solid var(--color-badge-logic-OR);
}

    .matrix-op-or:hover {
        background-color: var(--color-badge-logic-OR-bg-light);
    }

.matrix-op-not {
    background-color: var(--color-badge-logic-NOT-bg);
    color: var(--color-badge-logic-NOT);
    border: 1px solid var(--color-badge-logic-NOT);
}

    .matrix-op-not:hover {
        background-color: var(--color-badge-logic-NOT-bg-light);
    }

/* Age-Based Coloring (Optional) — newest → oldest: green → blue → yellow → orange (20% lighter) */
.matrix-age-week1 {
    background-color: rgba(46, 133, 64, 0.24); /* 0-7 days  - Green (freshest) */
}

.matrix-age-week2 {
    background-color: rgba(30, 136, 229, 0.24); /* 8-14 days - Blue  (recent)  */
}

.matrix-age-week3 {
    background-color: rgba(255, 193, 7, 0.28);  /* 15-21 days - Yellow (aging)  */
}

.matrix-age-week4 {
    background-color: rgba(230, 81, 0, 0.24);   /* 22-28 days - Orange (old)    */
}

/* Show vertical column lines in rule/property columns (when enabled via ShowVerticalLines setting) */
.ids-matrix-grid.ids-show-vertical-lines .ag-cell:not(.matrix-col-domain):not(.matrix-col-element):not(.matrix-col-representation):not(.matrix-col-inforeq):not(.matrix-col-phase):not(.matrix-col-classification):not(.matrix-col-modified-by):not(.matrix-col-modified-date) {
    border-right: 1px solid var(--color-border) !important;
}

/* ====================================================================
   Rule Editor Modal Content
   The .modal-body from App.Web/wwwroot/css/modal.css already handles
   overflow-y: auto and flex: 1, so we only need to set a minimum height.
   Override: .modal-lg is narrower here (700px) than the global 800px
   because the rule editor panel layout needs to fit the side-by-side view.
   ==================================================================== */
.modal-dialog.modal-lg {
    max-width: 700px;
}

.ids-rule-editor-modal-body {
    padding: var(--space-16, 16px) var(--space-24, 24px);
    min-height: 390px;
}

/* Quick Create "+" Button in empty matrix cells */
.matrix-cell-empty-with-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 100%;
    padding: 0.25rem;
}

/* Non-empty cell in Requirements/Selection mode — rule count + "+" side by side */
.matrix-cell-with-add {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 0.25rem;
    gap: 0.25rem;
}

.matrix-cell-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--color-brand-primary);
    border-radius: 50%;
    background: transparent;
    color: var(--color-brand-primary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.ag-cell:hover .matrix-cell-add-btn,
.ag-row:hover .matrix-cell-add-btn {
    opacity: 0.6;
}

.matrix-cell-add-btn:hover {
    opacity: 1 !important;
    background: var(--color-brand-primary);
    color: var(--color-white);
}


.ids-matrix-loading,
.ids-matrix-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.ids-matrix-error {
    color: var(--color-error);
}

.ids-matrix-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* ===============================================================
 * Attribute List View (AttributeList matrix data source mode)
 * =============================================================== */

.ids-attribute-list-empty {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

.ids-attribute-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed; /* widths are driven by <colgroup> in the Razor template */
}

.ids-attribute-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-grey-50);
    border-bottom: 2px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-attribute-list-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.1s;
}

.ids-attribute-list-table tbody tr:hover {
    background: var(--color-grey-50);
}

.ids-attribute-list-table tbody td {
    padding: 0.375rem 0.75rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date-based row coloring (when ShowDateColoring is enabled) — colors match matrix-age-week* */
.ids-attr-age-1 { background: rgba(46, 133, 64, 0.24) !important; }  /* ≤ 7 days  - Green  */
.ids-attr-age-2 { background: rgba(30, 136, 229, 0.24) !important; } /* ≤ 14 days - Blue   */
.ids-attr-age-3 { background: rgba(255, 193, 7, 0.28) !important; }  /* ≤ 21 days - Yellow */
.ids-attr-age-4 { background: rgba(230, 81, 0, 0.24) !important; }   /* ≤ 28 days - Orange */

/* Vertical column separators for the HTML Attribute List table (Bug 4) */
.ids-attribute-list-table.ids-show-vertical-lines th,
.ids-attribute-list-table.ids-show-vertical-lines td {
    border-right: 1px solid var(--color-border);
}
.ids-attribute-list-table.ids-show-vertical-lines th:last-child,
.ids-attribute-list-table.ids-show-vertical-lines td:last-child {
    border-right: none;
}

/* Row-level age coloring for AG Grid (AttributeInfo and IfcMappings modes):
   Color all non-hierarchy data cells, leaving node columns with their own background */
.ag-row.matrix-age-week1 .ag-cell:not(.matrix-hierarchy-cell) { background-color: rgba(46, 133, 64, 0.24) !important; }
.ag-row.matrix-age-week2 .ag-cell:not(.matrix-hierarchy-cell) { background-color: rgba(30, 136, 229, 0.24) !important; }
.ag-row.matrix-age-week3 .ag-cell:not(.matrix-hierarchy-cell) { background-color: rgba(255, 193, 7, 0.28) !important; }
.ag-row.matrix-age-week4 .ag-cell:not(.matrix-hierarchy-cell) { background-color: rgba(230, 81, 0, 0.24) !important; }

/* Ancestor-aggregated rows: all cells rendered in italics */
.ag-row.matrix-ancestor-row .ag-cell { font-style: italic; }

/* Approval focus filter: dim rows whose node is not in the active filter set to 20% opacity */
.ag-row.ids-approval-dimmed .ag-cell { opacity: 0.2; }

/* Scrollable node-selection list inside CreateAttributeModal */
.ids-node-list-scroll {
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small, 4px);
    padding: 4px 8px;
}

@media (max-width: 768px) {
    .ids-matrix-toolbar {
        flex-wrap: wrap;
        overflow: visible;
    }

        .ids-matrix-toolbar-dropdowns {
            flex-wrap: wrap;
            flex: 1 1 100%;
        }

        .ids-matrix-toolbar-dropdowns > .ids-layout-dropdown {
            max-width: none;
        }

        .ids-matrix-select {
            max-width: 100%;
        }
}




/* ============================================================
   END OF IDS CREATOR COMPONENTS CONSOLIDATED CSS
   ============================================================ */

/* ============================================================
   IDS CREATOR - IMPORT PAGE (ids-import-* classes)
   Replaces all Bootstrap utility / component classes previously
   used in ImportPage.razor. Zero Bootstrap dependencies.
   ============================================================ */

/* ── Page title spacing ───────────────────────────────────── */
.ids-import-page-title {
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.ids-import-page-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.ids-import-page-title-row .ids-import-page-title {
    margin-bottom: 0;
}

/* ── Settings page title row (title + help icon on same line) ─ */
.settings-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: 0.5rem;
}

.settings-title-row h3,
.settings-title-row h4,
.settings-title-row .settings-section-title {
    margin-bottom: 0;
}

/* ── Section header row (Settings pages: h3 + help button side-by-side) ─ */
.ids-section-header-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Panel header row (Phase 3: help buttons in side panels) ─ */
.panel-header-row {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 4px 0;
}

.panel-phase-section-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}

/* ── Section card (replaces .card) ───────────────────────── */
.ids-import-section {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    background: var(--color-white);
    margin-bottom: var(--space-12);
    box-shadow: var(--shadow-sm);
}

.ids-import-section-header {
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

.ids-import-section-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ids-import-section-body {
    padding: var(--space-16);
}

/* ── Two-column grid (replaces .row .col-md-6) ───────────── */
.ids-import-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

@media (max-width: 768px) {
    .ids-import-grid-2 {
        grid-template-columns: 1fr;
    }
}

.ids-import-col-left,
.ids-import-col-right {
    min-width: 0;
}

/* ── Six-column filter row (replaces .row.g-2 with 6x.col-md-2) */
.ids-import-filters-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

@media (max-width: 1200px) {
    .ids-import-filters-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ids-import-filters-row {
        grid-template-columns: 1fr 1fr;
    }
}

.ids-import-filter-col {
    min-width: 0;
}

/* ── Form controls ────────────────────────────────────────── */
.ids-import-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.ids-import-select {
    display: block;
    width: 100%;
    padding: 6px var(--space-8);
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    box-sizing: border-box;
    appearance: auto;
}

.ids-import-select:focus {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 1px;
    border-color: var(--color-brand-primary);
}

.ids-import-select-sm {
    padding: 3px var(--space-8);
    font-size: 13px;
}

/* ── Radio option row (replaces .form-check) ─────────────── */
.ids-import-radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.ids-import-radio-input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-brand-primary);
}

.ids-import-radio-label {
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
    line-height: 1.4;
}

/* ── Hint / muted text ────────────────────────────────────── */
.ids-import-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    display: block;
    margin-top: var(--space-4);
}

.ids-import-muted {
    color: var(--color-text-muted);
}

/* ── Alert banners ────────────────────────────────────────── */
.ids-import-alert-error,
.ids-import-alert-success,
.ids-import-alert-info,
.ids-import-alert-warn {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-small);
    border: 1px solid transparent;
    margin-bottom: var(--space-12);
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}

.ids-import-alert-error {
    background-color: var(--color-error-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

.ids-import-alert-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.ids-import-alert-info {
    background-color: var(--color-info-light);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}

.ids-import-alert-warn {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning-light);
    color: var(--color-warning-text);
}

.ids-import-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
    padding: 0;
    flex-shrink: 0;
    color: inherit;
}

.ids-import-alert-close::before {
    content: "×";
}

.ids-import-alert-close:hover {
    opacity: 1;
}

/* ── Loading row ──────────────────────────────────────────── */
.ids-import-loading-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* ── Inline spinner (replaces .spinner-border.spinner-border-sm) */
.ids-import-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ids-import-spin 0.65s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}

@keyframes ids-import-spin {
    to { transform: rotate(360deg); }
}

/* ── Screen-reader-only (replaces .visually-hidden) ──────── */
.ids-import-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Badges (replaces .badge.bg-*) ───────────────────────── */
.ids-import-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    margin-right: var(--space-4);
}

.ids-import-badge-success  { background-color: var(--color-success-light); color: var(--color-success-text); }
.ids-import-badge-primary  { background-color: var(--color-info-light); color: var(--color-info-text); }
.ids-import-badge-secondary{ background-color: var(--color-grey-200); color: var(--color-text-primary); }
.ids-import-badge-info     { background-color: var(--color-info-light); color: var(--color-info-text); }
.ids-import-badge-warning  { background-color: var(--color-warning-light); color: var(--color-warning-text); }
.ids-import-badge-neutral  { background-color: var(--color-grey-100); color: var(--color-text-secondary); }

/* ── Preview table ────────────────────────────────────────── */
.ids-import-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-8);
}

.ids-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ids-import-table-head {
    background-color: var(--color-table-header-bg);
}

.ids-import-table th {
    padding: var(--space-8) var(--space-12);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-subtle);
    white-space: nowrap;
}

.ids-import-table td {
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
}

.ids-import-table tbody tr:hover {
    background-color: var(--color-table-row-hover-bg);
}

.ids-import-row-edge {
    background-color: var(--color-grey-100);
}

.ids-import-center {
    text-align: center;
}

.ids-import-icon-ok {
    color: var(--color-success);
}

/* ── Error list (validation modal) ───────────────────────── */
.ids-import-error-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 400px;
    overflow-y: auto;
    margin-top: var(--space-8);
}

.ids-import-error-item {
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: var(--color-white);
    font-size: 13px;
}

.ids-import-error-item-blocking {
    border-left: 3px solid var(--color-error);
    background-color: var(--color-error-light);
}

.ids-import-error-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.ids-import-error-item-header h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Validation errors modal overlay ─────────────────────── */
.ids-import-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Error modal header (replaces .modal-header.bg-danger.text-white) */
.ids-import-modal-header-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-12) var(--space-16);
    background-color: var(--color-error);
    color: var(--color-white);
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    gap: var(--space-8);
}

.ids-import-modal-header-error .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Close button inside modal header (replaces .btn-close.btn-close-white) */
.ids-import-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--color-white);
    opacity: 0.8;
    padding: 0;
    flex-shrink: 0;
}

.ids-import-modal-close::before {
    content: "×";
}

.ids-import-modal-close:hover {
    opacity: 1;
}

/* ── Action bar (replaces .d-flex.justify-content-end.gap-2) */
.ids-import-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-8);
}

/* ── Action help text ─────────────────────────────────────── */
.ids-import-action-help {
    margin-top: var(--space-8);
}

/* ── Import progress bar (full-width, above upload button) ─── */
.ids-import-progress-wrap {
    width: 100%;
}

.ids-import-progress-bar-track {
    height: 18px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--color-grey-200);
}

.ids-import-progress-bar-track .ids-progress-fill {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
    transition: width 0.35s ease;
}

.ids-import-progress-pct {
    white-space: nowrap;
}

.ids-import-progress-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}


/* ── IdsRuleFilterCard ─────────────────────────────────────────────────────── */
.ids-rule-filter-divider {
    border: none;
    border-top: 1px solid var(--color-grey-300);
    margin: var(--space-8) 0;
}

.ids-rule-filter-section {
    margin-bottom: var(--space-8);
}

.ids-rule-filter-section-label {
    display: block;
    margin-bottom: var(--space-4);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ids-rule-filter-checkboxes .form-check {
    margin-bottom: 0.2rem;
}

.ids-rule-filter-checkboxes .form-check-label {
    font-size: 0.875rem;
}

/* ── Step 6: Deleted Category Section ───────────────────────────────────── */

.deleted-category-section {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}

.deleted-count-badge {
    display: inline-block;
    background: var(--color-error);
    color: var(--color-white);
    border-radius: 9999px;
    font-size: 0.7rem;
    padding: 1px 7px;
    font-weight: 600;
    vertical-align: middle;
}

.deleted-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.deleted-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-error);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.deleted-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.deleted-card-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deleted-card-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.deleted-card-summary {
    font-size: 0.78rem;
    line-height: 1.3;
    word-break: break-word;
}

.request-type-badge.badge-delete {
    background: var(--color-error);
    color: var(--color-white);
}

.empty-state-small {
    padding: 0.75rem 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ============================================================
   BOOTSTRAP REMOVAL — Semantic replacement classes
   Added to replace Bootstrap utility classes removed per
   engineering playbook (no Bootstrap CSS utilities allowed)
   ============================================================ */

/* ── Approval panel "versioning disabled" centred notice ──── */
.approval-disabled-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-16);
}

/* ── Badge system (replaces Bootstrap badge + bg-*) ─────── */
.ids-badge {
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    line-height: 1.4;
    vertical-align: middle;
}

.ids-badge-primary {
    background: var(--color-brand-primary);
    color: var(--color-white);
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    line-height: 1.4;
    vertical-align: middle;
}

.ids-badge-secondary {
    background: var(--color-grey-200);
    color: var(--color-text-primary);
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    line-height: 1.4;
    vertical-align: middle;
}

.ids-badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    line-height: 1.4;
    vertical-align: middle;
}

.ids-badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    line-height: 1.4;
    vertical-align: middle;
}

.ids-badge-danger {
    background: var(--color-error-light);
    color: var(--color-error);
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    line-height: 1.4;
    vertical-align: middle;
}

/* ── Version history card — same look as ids-node-prop-card ── */
.version-history-card {
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-8);
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: visible;
}

/* ── Version history header (button inside the card) ──────── */
.version-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    border: none;           /* no inner border — card itself has the border */
    border-radius: 0;       /* no radius — card overflow:hidden handles corners */
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: background 0.15s ease;
    box-sizing: border-box;
    gap: var(--space-8);
}

.version-history-header:hover {
    background: var(--color-grey-100);
}

/* ── Version history header title block (primary + subtitle) ── */
.version-history-header-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.version-history-header-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-brand-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-history-header-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Version history list (inside version-history-card) ── */
.version-history-body {
    padding: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
}

.revision-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.revision-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-white);
    gap: var(--space-8);
}

.revision-list-item.revision-selected {
    border-color: var(--color-brand-primary);
    border-left: 3px solid var(--color-brand-primary);
    background: rgba(0, 95, 158, 0.08);
}

.revision-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1;
    min-width: 0;
}

.revision-number {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-brand-primary);
}

.revision-date {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.revision-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-10);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: var(--color-grey-50);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.revision-preview-btn:hover:not(:disabled) {
    background: rgba(0, 95, 158, 0.07);
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.revision-preview-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Time travel exit button ─────────────────────────────── */
.time-travel-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-12);
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.time-travel-exit-btn:hover:not(:disabled) {
    background: var(--color-grey-100);
    color: var(--color-text-primary);
}

.time-travel-exit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Admin override section ──────────────────────────────── */
.admin-override-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
}

.admin-override-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-override-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
    padding: var(--space-4) var(--space-12);
    background: transparent;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-small);
    color: var(--color-warning);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-override-btn:hover:not(:disabled) {
    background: var(--color-warning-light);
}

.admin-override-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Approval confirm modals ─────────────────────────────── */
.approval-confirm-modal-body {
    padding: var(--space-12) 0;
}

.approval-confirm-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-8) 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.approval-confirm-change-summary {
    margin-bottom: var(--space-12);
}

.approval-confirm-change-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8) 0;
}

.approval-confirm-change-item {
    padding: var(--space-4) 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.approval-confirm-preflight {
    margin-bottom: var(--space-12);
}

.approval-confirm-preflight-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8) 0;
}

.approval-confirm-preflight-item {
    padding: var(--space-4) 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.approval-confirm-preflight-item-danger {
    padding: var(--space-4) 0;
    font-size: 0.875rem;
    color: var(--color-error);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.approval-confirm-comment-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.approval-confirm-textarea {
    width: 100%;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background: var(--color-white);
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.approval-confirm-textarea:focus {
    border-color: var(--color-brand-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 95, 158, 0.15);
}

/* ── Time-travel property / rule cards ──────────────────────
   Each snapshot rule is displayed as a small card in time-travel
   mode, matching the ids-node-prop-card Darstellung pattern.
   ─────────────────────────────────────────────────────────── */
.time-travel-rules {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8) 0;
}

.time-travel-rule-card {
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.time-travel-rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    gap: var(--space-8);
    min-height: 40px;
}

.time-travel-rule-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    flex: 1;
    min-width: 0;
}

/* Badge: rule type (e.g. "Eigenschaft", "Klassifikation") */
.time-travel-rule-card .rule-type-badge {
    display: inline-block;
    padding: 2px var(--space-8);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-small);
    background: rgba(0, 95, 158, 0.10);
    color: var(--color-brand-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Primary detail text (property name / classification name) */
.time-travel-rule-card .rule-detail {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Secondary detail (pset name / classification code) */
.time-travel-rule-card .rule-pset {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   MISSING CSS CLASSES — Approval Panel & Time Travel
   Full audit 2026-03-06: every class used in Razor now has a
   matching CSS rule here.
   ══════════════════════════════════════════════════════════════ */

/* ── Time-travel banner in IdsApprovalPanel ─────────────────── */
.time-travel-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    background: rgba(0, 95, 158, 0.08);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-8);
    font-size: 0.875rem;
}

.time-travel-banner-content {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--color-brand-primary);
}

/* ── Time-travel banner + actions in IdsPropertiesRulesPanel ── */
.time-travel-panel-banner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-12);
    background: rgba(0, 95, 158, 0.08);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-6);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand-primary);
}

.time-travel-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-4) var(--space-8) var(--space-4);
    flex-wrap: wrap;
}

/* ── Approval section headers (h4 + filter controls row) ────── */
.approval-header {
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
}

    .approval-header h4 {
        font-weight: 600;
        color: var(--color-text-primary);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--space-6);
    }

/* ── Filter controls (checkbox row beside heading) ────────────  */
.filter-controls {
    align-items: center;
    flex-shrink: 0;
    font-size: 0.8125rem;
    display: flex;
    align-items: baseline;
}

    .filter-controls button {
        margin-left: auto;
    }

/* ── Phase × Status table container ─────────────────────────── */
.phase-status-table-container {
    margin-bottom: var(--space-12);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-subtle);
}

/* ── Active filter badge row ─────────────────────────────────── */
.selected-filter-info {
    margin-bottom: var(--space-8);
    white-space: normal;
    overflow-wrap: anywhere;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-10);
    background: rgba(0, 95, 158, 0.08);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    font-size: 0.8125rem;
    color: var(--color-brand-primary);
}

.filter-label {
    font-weight: 500;
}

.clear-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-brand-primary);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 50%;
    font-size: 0.875rem;
    line-height: 1;
}

.clear-filter-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ── Approval items sub-section header ───────────────────────── */
.approval-items-header {
    padding: var(--space-4) 0 var(--space-8) 0;
}

.approval-items-header h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Loading state for items list ─────────────────────────────── */
.loading-items {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.loading-items p {
    margin: 0;
}

/* ── Empty items state (all items processed) ─────────────────── */
.empty-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    color: var(--color-text-muted);
    text-align: center;
    font-size: 0.875rem;
}

.empty-items p {
    margin: var(--space-4) 0 0;
}

/* ── Empty table row (no phases configured) ───────────────────── */
.empty-row {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-12) !important;
    font-size: 0.875rem;
}

/* ── Restore plan summary list (in confirm modal) ────────────── */
.restore-plan-summary {
    list-style: none;
    padding: var(--space-8) 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: 0.875rem;
}

.restore-plan-summary li {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* ── Snapshot indicator badge on revision list items ─────────── */
.revision-snapshot-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* ── Snapshot indicator: icon-only variant ───────────────────── */
.revision-snapshot-icon {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    opacity: 0.75;
}

/* ── Admin override section (outside panel-content, at bottom) ─ */
.admin-override-section {
    border-top: 2px solid var(--color-warning);
    padding: var(--space-8) var(--space-12);
    background: var(--color-white);
    flex-shrink: 0;
}

/* ── Release Control icon in modal header ──────────────────── */
.release-control-icon {
    margin-right: var(--space-6, 6px);
    color: var(--color-warning);
}

/* ── Release Control modal body ──────────────────────────────── */
.release-control-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 8px);
    padding: var(--space-12, 12px) 0;
}

/* ── Individual option row (acts as a radio label) ────────────── */
.release-control-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10, 10px);
    padding: var(--space-10, 10px) var(--space-12, 12px);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small, 4px);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.release-control-option:hover {
    background: var(--color-hover-bg, rgba(0, 67, 123, 0.04));
}

.release-control-option--selected {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-light, rgba(0, 67, 123, 0.04));
}

.release-control-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-brand-primary);
}

.release-control-option-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
}

.release-control-option-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.release-control-option-warning {
    font-size: 0.8125rem;
    color: var(--color-text-muted, rgba(0, 0, 0, 0.55));
    font-style: italic;
}

/* ── Date picker row ──────────────────────────────────────────── */
.release-control-date-row {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    margin-top: var(--space-6, 6px);
}

.release-control-date-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.78));
    white-space: nowrap;
}

.release-control-date-input {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small, 4px);
    padding: 3px 6px;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

/* ── Result message ───────────────────────────────────────────── */
.release-control-result {
    margin-top: var(--space-8, 8px);
    font-size: 0.875rem;
}

/* ── Scope toggle (Open Model / All Models) ───────────────────── */
.release-control-scope-section {
    display: flex;
    align-items: center;
    gap: var(--space-10, 10px);
    padding: var(--space-10, 10px) var(--space-12, 12px);
    background: var(--color-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small, 4px);
    margin-bottom: var(--space-4, 4px);
}

.release-control-scope-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.78));
    white-space: nowrap;
}

.release-control-scope-toggle {
    display: flex;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small, 4px);
    overflow: hidden;
}

.release-control-scope-btn {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
    padding: 4px var(--space-12, 12px);
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--color-surface);
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.78));
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.release-control-scope-btn:not(:last-child) {
    border-right: 1px solid var(--color-border-subtle);
}

.release-control-scope-btn:hover {
    background: var(--color-hover-bg, rgba(0, 67, 123, 0.06));
}

.release-control-scope-btn--active {
    background: var(--color-brand-primary);
    color: var(--color-white);
}

.release-control-scope-btn--active:hover {
    background: var(--color-brand-primary);
}

.release-control-scope-info {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.55));
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   MISSING CSS — Time Travel Selection Panel & Global Node Info
   ══════════════════════════════════════════════════════════════ */

/* ── Global node info container (IdsSelectionPanel) ────────── */
.global-node-info {
    padding: var(--space-12);
}

/* ── Time-travel selection container ────────────────────────── */
.time-travel-selection {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) 0;
}

/* ── Each selection set card in time-travel mode ─────────────── */
.time-travel-set-card {
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-brand-primary);
    border-radius: var(--radius-small);
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: var(--space-8) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ── IFC entity badge inside time-travel selection set card ─── */
.time-travel-ifc-entity {
    background: var(--color-brand-primary);
    color: var(--color-white);
}

/* ── IFC badge in new card-per-row selection view ────────────── */
.time-travel-ifc-badge {
    background: var(--color-brand-primary);
    color: var(--color-white);
    padding: 2px var(--space-8);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--radius-small);
}

/* ── Selection rules container inside set card ───────────────── */
.time-travel-sel-rules {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* ── Individual selection rule badge ─────────────────────────── */
.time-travel-sel-rule-badge {
    flex-shrink: 0;
}

/* ── Comment text (BCF panel + general) ─────────────────────── */
.comment-text {
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    color: var(--color-text-secondary);
}

/* ============================================================
   IDS LEGEND PANEL
   ============================================================ */

/* Container that wraps the help button and the floating panel */
.ids-legend-panel-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Invisible overlay that catches outside-clicks to close the panel */
.ids-legend-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

/* Floating panel */
.ids-legend-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 9999;
    background: var(--color-white);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--radius-medium, 6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: var(--space-16, 16px);
    min-width: 280px;
    max-width: 340px;
}

/* Panel header row: title + close button */
.ids-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8, 8px);
    padding-bottom: var(--space-8, 8px);
    border-bottom: 1px solid var(--color-grey-200);
}

.ids-legend-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ids-legend-close-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    border-radius: var(--radius-small, 3px);
    line-height: 1;
}

.ids-legend-close-btn:hover {
    background: var(--color-grey-100);
    color: var(--color-text-secondary);
}

/* Intro text */
.ids-legend-intro {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 var(--space-4, 4px) 0;
}

.ids-legend-more-info {
    margin: 0 0 var(--space-12, 12px) 0;
}

.ids-legend-more-info-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--color-brand-primary);
    cursor: pointer;
    text-decoration: underline;
}

.ids-legend-more-info-btn:hover {
    color: var(--color-brand-primary-dark);
}

/* Section block */
.ids-legend-section {
    margin-bottom: var(--space-12, 12px);
}

.ids-legend-section:last-child {
    margin-bottom: 0;
}

/* Section header label */
.ids-legend-section-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6, 6px);
}

/* Row list */
.ids-legend-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Single legend row: sample + label */
.ids-legend-row {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
}

/* Label text */
.ids-legend-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* ── Node Status Sample Boxes ─────────────────────────────────────
   These use CSS variables so they stay in sync with real node
   styling in the diagram and matrix. Level 3 (orange/amber) is used
   as the representative example color, per the spec.
   ──────────────────────────────────────────────────────────────── */
.ids-legend-sample {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 3px;
}

    .ids-legend-sample.sample-unlocked {
        background: var(--node-level-4-bg);
        border: 2px var(--ids-lock-border-style-unlocked, solid) var(--ids-lock-border-neutral);
    }

    .ids-legend-sample.sample-pending-approval {
        background: var(--node-level-4-bg-light);
        border: 2px var(--ids-lock-border-style-pending-approval, dashed) var(--ids-lock-border-pending-approval);
    }

    .ids-legend-sample.sample-unlocked-rejected {
        background: var(--ids-lock-unlocked-rejected-bg-legend);
        border: 2px var(--ids-lock-border-style-unlocked-rejected, solid) var(--ids-lock-border-unlocked-rejected);
    }

    .ids-legend-sample.sample-pending-deletion {
        background: var(--ids-lock-pending-deletion-bg);
        border: 2px var(--ids-lock-border-style-pending-deletion, dashed) var(--ids-lock-border-pending-deletion);
    }

/* ── BCF Badge Samples (Cytoscape view) ──────────────────────────
   Mimic the badge-like appearance of BCF status indicators in the
   Cytoscape diagram. Use the same bcf-status color variables as the
   real bcf-child-badge classes in components.css.
   ──────────────────────────────────────────────────────────────── */
.ids-legend-bcf-badge {
    flex-shrink: 0;
    display: inline-block;
    width: 36px;
    height: 18px;
    border-radius: 4px;
    background-color: var(--color-grey-300);
}

.ids-legend-bcf-badge.bcf-status-new {
    background-color: var(--bcf-status-new);
}

.ids-legend-bcf-badge.bcf-status-in-progress {
    background-color: var(--bcf-status-in-progress);
}

.ids-legend-bcf-badge.bcf-status-waiting {
    background-color: var(--bcf-status-waiting);
}

.ids-legend-bcf-badge.bcf-status-done {
    background-color: var(--bcf-status-done);
}

.ids-legend-bcf-badge.bcf-status-closed {
    background-color: var(--bcf-status-closed);
}

/* ── BCF Frame Samples (AG Grid view) ────────────────────────────
   Mimic the inset box-shadow BCF frame applied to rule cells in the
   AG Grid matrix view (see buildCellStyleFn in matrix-grid-interop.js).
   Uses node-level-4 background so the sample matches a real node cell.
   ──────────────────────────────────────────────────────────────── */
.ids-legend-sample.sample-bcf-frame-new {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-status-new);
}

.ids-legend-sample.sample-bcf-frame-in-progress {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-status-in-progress);
}

.ids-legend-sample.sample-bcf-frame-waiting {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-status-waiting);
}

.ids-legend-sample.sample-bcf-frame-done {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-status-done);
}

.ids-legend-sample.sample-bcf-frame-closed {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-status-closed);
}

.ids-legend-sample.sample-bcf-priority-low {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-priority-low);
}

.ids-legend-sample.sample-bcf-priority-normal {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-priority-normal);
}

.ids-legend-sample.sample-bcf-priority-high {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-priority-high);
}

.ids-legend-sample.sample-bcf-priority-critical {
    background: var(--node-level-4-bg);
    box-shadow: inset 0 0 0 3px var(--bcf-priority-critical);
}

/* ─── Help Drawer ─────────────────────────────────────────────────────────── */

/* Semi-transparent backdrop — visible only when drawer is open */
.help-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1100;
}

/* Drawer panel — always in the DOM; slides in from the right */
.help-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: var(--color-white);
    border-left: 1px solid var(--color-border-subtle);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
}

.help-drawer.help-drawer-open {
    right: 0;
}

.help-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
    background: var(--color-grey-50);
}

.help-drawer-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.help-drawer-close {
    font-size: 1.1rem;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.help-drawer-close:hover {
    color: var(--color-text-primary);
}

.help-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ============================================================
   IDS CREATOR - HELP PAGE (ids-help-* classes)
   Two-column layout: content (left) + topic nav sidebar (right)
   ============================================================ */

.ids-help-page {
    display: flex;
    flex-direction: row-reverse; /* sidebar right, content left */
    gap: 0;
    height: 100%;
    overflow: hidden;
}

/* Main content area */
.ids-help-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    min-width: 0;
}

.ids-help-content-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1.2rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border-subtle);
}

/* Right sidebar — topic navigator */
.ids-help-nav {
    width: 220px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 16px 0;
    border-left: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
}

.ids-help-nav-group {
    margin-bottom: 8px;
    padding: 0 8px;
}

.ids-help-nav-group-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, rgba(0, 0, 0, 0.45));
    padding: 10px 8px 4px 8px;
}

.ids-help-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.87rem;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.78));
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

.ids-help-nav-item:hover {
    background: var(--color-grey-100);
    color: var(--color-text-primary);
}

.ids-help-nav-item.active {
    background: var(--color-brand-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

/* ======================================================
   Classification page — master-detail layout (Task 4)
   ====================================================== */

.classification-master-detail {
    display: flex;
    height: 480px;
    overflow: hidden;
}

/* Left: tree navigation panel */
.classification-tree-panel {
    flex: 0 0 340px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.classification-tree-panel .classification-tree {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 4px 0;
}

/* Right: detail panel */
.classification-detail-panel {
    flex: 1 1 0;
    overflow-y: auto;
    background: var(--color-background);
}

/* Tree node styling */
.tree-node {
    user-select: none;
}

.tree-node-row {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
    gap: 4px;
}

.tree-node-row:hover {
    background: var(--color-grey-50);
}

.tree-node-row.selected {
    background: var(--color-brand-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

.tree-toggle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    min-width: 18px;
    text-align: center;
}

.tree-toggle-placeholder {
    display: inline-block;
    min-width: 18px;
}

.tree-node-label {
    font-size: 0.88rem;
    line-height: 1.4;
}

.tree-children {
    /* children indented via margin-left on tree-node */
}


/* ═══════════════════════════════════════════════════════════════════════════
   IDS CHECKER - VALIDATION PAGE (ids-checker-* classes)
   All IdsChecker UI classes are scoped under .ids-checker-* namespace.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.ids-checker-validation {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ids-checker-settings {
    padding: 20px;
}

/* ── Two-column layout ─────────────────────────────────────────────────── */
.ids-checker-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-16, 16px);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1024px) {
    .ids-checker-layout {
        grid-template-columns: 1fr;
    }
}

.ids-checker-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-16, 16px);
    min-width: 0;
}

.ids-checker-right {
    display: flex;
    min-height: 0;
    min-width: 0;
}

/* ── Card base ─────────────────────────────────────────────────────────── */
.ids-checker-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ids-checker-card-header {
    padding: var(--space-12, 12px) var(--space-16, 16px);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    display: flex;
    align-items: center;
    min-height: 48px;
    box-sizing: border-box;
}

.ids-checker-card-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.ids-checker-card-header--with-actions {
    justify-content: space-between;
    gap: var(--space-8, 8px);
}

.ids-checker-card-body {
    padding: var(--space-16, 16px);
}

/* ── Result card modifiers (left border coloring) ──────────────────────── */
.ids-checker-card--pass {
    border-left: 4px solid var(--color-success);
}

.ids-checker-card--fail {
    border-left: 4px solid var(--color-error);
}

.ids-checker-card--warn {
    border-left: 4px solid var(--color-warning);
}

/* ── Results card stretches vertically ─────────────────────────────────── */
.ids-checker-results-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ids-checker-results-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    min-height: 0;
}

/* ── Tab bar ───────────────────────────────────────────────────────────── */
.ids-checker-tab-bar {
    display: flex;
    border-bottom: 2px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    padding: 0 var(--space-8, 8px);
    gap: var(--space-4, 4px);
}

.ids-checker-tab {
    padding: var(--space-8, 8px) var(--space-16, 16px);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.ids-checker-tab:hover {
    color: var(--color-text-primary);
}

.ids-checker-tab--active {
    color: var(--color-primary, var(--color-brand-primary));
    border-bottom-color: var(--color-primary, var(--color-brand-primary));
    font-weight: 600;
}

/* Tab count badge */
.ids-checker-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 4px;
    background: var(--color-grey-200);
    color: var(--color-text-secondary);
}

.ids-checker-tab-badge--pass {
    background: var(--color-success-light);
    color: var(--color-success);
}

.ids-checker-tab-badge--fail {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ── Tab content area ──────────────────────────────────────────────────── */
.ids-checker-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-16, 16px);
    overflow: auto;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.ids-checker-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--space-8, 8px);
    color: var(--color-text-muted);
}

.ids-checker-empty-icon {
    font-size: 2.5rem;
    opacity: 0.35;
}

/* ── File selection elements ───────────────────────────────────────────── */
.ids-checker-file-section {
    margin-bottom: var(--space-12, 12px);
}

.ids-checker-file-label {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
    margin-bottom: var(--space-8, 8px);
    font-size: 0.9rem;
}

.ids-checker-source-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 4px);
    margin-bottom: var(--space-8, 8px);
}

.ids-checker-file-slot {
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-12, 12px) var(--space-16, 16px);
    min-height: 52px;
    display: flex;
    align-items: center;
    background: var(--color-grey-50);
    font-size: 0.875rem;
}

.ids-checker-divider {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-12, 12px) 0;
}

/* ── Run actions ───────────────────────────────────────────────────────── */
.ids-checker-run-actions {
    display: flex;
    gap: var(--space-8);
    justify-content: flex-end;
    margin-top: var(--space-12, 12px);
}

/* ── Output options ────────────────────────────────────────────────────── */
.ids-checker-output-option {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-6, 6px) 0;
}

.ids-checker-output-option .form-check-input {
    flex-shrink: 0;
    cursor: pointer;
}

.ids-checker-pdf-template {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-4, 4px) 0 var(--space-8, 8px) var(--space-28, 28px);
}

.ids-checker-export-actions {
    display: grid;
    margin-top: var(--space-12, 12px);
    padding-top: var(--space-12, 12px);
    border-top: 1px solid var(--color-border-subtle);
}

/* ── Settings page ─────────────────────────────────────────────────────── */
.ids-checker-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ids-checker-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16, 16px);
    padding: var(--space-10, 10px) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.ids-checker-toggle-row:last-child {
    border-bottom: none;
}

.ids-checker-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.ids-checker-toggle-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ids-checker-toggle-switch {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.ids-checker-toggle-switch .form-check-input {
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
    margin: 0;
}

/* ── IdsCheckerFileSelector component ─────────────────────────────────── */

.ids-checker-file-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 8px);
}

.ids-checker-picker-row {
    display: flex;
}

.ids-checker-tc-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
}

.ids-checker-tc-folder-row {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
}

.ids-checker-tc-folder-row .ids-import-select {
    flex: 1;
    min-width: 0;
}

.ids-checker-tc-refresh {
    flex-shrink: 0;
    padding: 0 var(--space-6, 6px);
    height: 32px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small, 4px);
    background: transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.ids-checker-tc-refresh:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.ids-checker-tc-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ids-checker-tc-label {
    margin-bottom: 2px;
}

/* Selected-file summary strip (TC + Previous Run modes) */
.ids-checker-selected-strip {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
    padding: var(--space-6, 6px) var(--space-10, 10px);
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-medium);
    font-size: 0.875rem;
}

.ids-checker-strip-ok {
    color: var(--color-success);
    flex-shrink: 0;
}

.ids-checker-strip-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ids-checker-strip-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
    border-radius: var(--radius-small, 3px);
    transition: color 0.15s, background 0.15s;
}

.ids-checker-strip-clear:hover {
    color: var(--color-error);
    background: var(--color-error-light);
}

/* ── IdsChecker Results UI ─────────────────────────────────────────────── */

/* Summary badges in results card header */
.ids-checker-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 4px);
    margin-left: var(--space-12, 12px);
}

.ids-checker-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ids-checker-badge-info    { background: var(--color-info-light);    color: var(--color-info);    }
.ids-checker-badge-success { background: var(--color-success-light); color: var(--color-success); }
.ids-checker-badge-danger  { background: var(--color-error-light);   color: var(--color-error);   }
.ids-checker-badge-warn    { background: var(--color-warn-light);    color: var(--color-warn);    }

/* Tab counts */
.ids-checker-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-grey-50);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.ids-checker-tab--pass .ids-checker-tab-count { background: var(--color-success-light); color: var(--color-success); }
.ids-checker-tab--fail .ids-checker-tab-count { background: var(--color-error-light);   color: var(--color-error);   }

/* Results table */
.ids-checker-table-wrapper {
    overflow-x: auto;
    max-height: 65vh;
    overflow-y: auto;
}

.ids-checker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ids-checker-table thead {
    position: sticky;
    top: 0;
    background: var(--color-grey-200);
    z-index: 1;
}

.ids-checker-table th,
.ids-checker-table td {
    padding: var(--space-6, 6px) var(--space-8, 8px);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
    white-space: nowrap;
}

.ids-checker-table td.ids-checker-fail-detail,
.ids-checker-table td.ids-checker-pass-summary {
    white-space: normal;
    max-width: 260px;
}

.ids-checker-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ids-checker-table tbody tr:hover {
    background: var(--color-grey-50);
}

/* Row colouring */
.ids-checker-row-pass td { border-left: 3px solid var(--color-success); }
.ids-checker-row-fail td { border-left: 3px solid var(--color-error);   }

.ids-checker-entity-type {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    padding: 1px 4px;
    background: var(--color-grey-50);
    border-radius: 3px;
}

.ids-checker-check-type {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ids-checker-guid {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.ids-checker-fail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--color-error);
    color: var(--color-white);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.72rem;
    font-weight: 700;
}

.ids-checker-expected { color: var(--color-success); font-style: italic; }
.ids-checker-actual   { color: var(--color-error);   font-style: italic; }
.ids-checker-cell-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* Warnings section */
.ids-checker-warnings-section {
    margin-top: var(--space-12, 12px);
    border: 1px solid var(--color-warn-light);
    border-radius: var(--radius-medium);
    padding: var(--space-8, 8px) var(--space-12, 12px);
    background: var(--color-warn-light);
}

.ids-checker-warnings-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    list-style: none;
}

.ids-checker-warnings-summary::-webkit-details-marker { display: none; }

.ids-checker-warnings-list {
    margin: var(--space-8, 8px) 0 0;
    padding-left: var(--space-16, 16px);
    font-size: 0.8125rem;
    list-style: disc;
    color: var(--color-text-secondary);
}

.ids-checker-warnings-list li {
    margin-bottom: var(--space-4, 4px);
}

/* ── IdsChecker Settings actions ─────────────────────────────────────────── */

.ids-checker-settings-actions {
    display: flex;
    gap: var(--space-8);
    justify-content: flex-end;
    padding: var(--space-16, 16px) 0 var(--space-8, 8px);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-16, 16px);
}

/* ── IdsChecker Reopen Run section ───────────────────────────────────────── */

.ids-checker-reopen-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 8px);
    padding: var(--space-12, 12px);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm, 4px);
}

/* ── IdsCheckerRunPicker ─────────────────────────────────────────────────── */

.ids-checker-run-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 6px);
}

/* ── IdsChecker AG Grid (Community) ─────────────────────────────────────────
   idsc-* classes are used exclusively by the IdsCheckerEntityGrid and
   IdsCheckerResultGrid Blazor components.  All AG Grid features used here are
   available in AG Grid Community (Apache 2.0).  No Enterprise features.
   ─────────────────────────────────────────────────────────────────────────── */

/* Wrapper that fills the tab content area and enables horizontal scrolling */
.idsc-ag-grid-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

.idsc-ag-grid-surface {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ── Header row: solid, slightly darker than the surrounding panel ───────── */
.idsc-ag-grid-container .ag-header {
    background-color: var(--color-grey-200);
    border-bottom: 2px solid var(--color-border-light);
}

.idsc-ag-grid-container .ag-header-cell {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

/* ── Row outcome background colors (subtle, professional) ───────────────── */

/* Pass — very light green */
.idsc-ag-grid-container .ag-row.idsc-row-pass {
    background-color: var(--idsc-row-pass-bg);
}
.idsc-ag-grid-container .ag-row.idsc-row-pass:hover {
    background-color: var(--idsc-row-pass-bg-hover);
}

/* Fail — very light red */
.idsc-ag-grid-container .ag-row.idsc-row-fail {
    background-color: var(--idsc-row-fail-bg);
}
.idsc-ag-grid-container .ag-row.idsc-row-fail:hover {
    background-color: var(--idsc-row-fail-bg-hover);
}

/* Error / warning — very light yellow */
.idsc-ag-grid-container .ag-row.idsc-row-error {
    background-color: var(--idsc-row-error-bg);
}
.idsc-ag-grid-container .ag-row.idsc-row-error:hover {
    background-color: var(--idsc-row-error-bg-hover);
}

/* ── Vertical border lines on data columns (OFF by default, ON with .idsc-vlines-on) ── */
.idsc-ag-grid-container.idsc-vlines-on .ag-cell {
    border-right: 1px solid var(--color-border-light);
}

/* Left accent border preserved from the existing ids-checker-row-pass/fail
   convention — applies to the first data cell via AG Grid border trick */
.idsc-ag-grid-container .ag-row.idsc-row-pass .ag-cell:first-child {
    border-left: 3px solid var(--color-success);
}
.idsc-ag-grid-container .ag-row.idsc-row-fail .ag-cell:first-child {
    border-left: 3px solid var(--color-error);
}
.idsc-ag-grid-container .ag-row.idsc-row-error .ag-cell:first-child {
    border-left: 3px solid var(--color-warn);
}

/* ── Long-text cells: allow wrapping ─────────────────────────────────────── */
.idsc-cell-wrap {
    white-space: normal !important;
    line-height: 1.45;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ── Font size consistency with existing IdsChecker tables ──────────────── */
.idsc-ag-grid-container .ag-cell,
.idsc-ag-grid-container .ag-header-cell-label {
    font-size: 0.8125rem;
}

/* ── Grid display toggles (Color rows / Vertical lines) ─────────────────── */
/* Placed on the right side of the results tab bar, same row as the tabs. */

.ids-checker-grid-toggles {
    display: flex;
    align-items: center;
    gap: var(--space-12, 12px);
    margin-left: auto;
    padding: 0 var(--space-4, 4px);
}

.ids-checker-grid-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-5, 5px);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding: var(--space-4, 4px) 0;
}

.ids-checker-grid-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* ── IdsChecker 3D Viewer ───────────────────────────────────────────────── */

/* Standalone layout container for the 3D viewer page */
.idsc-viewer3d-standalone-layout {
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: 0;
    margin: 0;
}

/* Row highlight flash: briefly pulses a selected row when found from 3D selection */
@keyframes idsc-row-flash {
    0%   { background-color: rgba(0, 95, 158, 0.25); }
    50%  { background-color: rgba(0, 95, 158, 0.10); }
    100% { background-color: transparent; }
}

.idsc-row-highlight-flash {
    animation: idsc-row-flash 2s ease-out forwards;
}

/* Viewer page layout */
.idsc-viewer3d-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 8px;
    box-sizing: border-box;
    background: var(--color-bg-primary, #f5f5f5);
    gap: 8px;
}

.idsc-viewer3d-toolbar {
    background: white;
    border: 1px solid var(--color-border-light, #e0e0e0);
    border-radius: var(--radius-medium, 6px);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.idsc-viewer3d-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.idsc-viewer3d-run-select {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--color-border-subtle, #ccc);
    border-radius: var(--radius-small, 4px);
    font-size: 0.875rem;
    background: white;
    color: var(--color-text-primary);
}

.idsc-viewer3d-run-select:focus {
    outline: none;
    border-color: var(--color-brand-primary, #005f9e);
    box-shadow: 0 0 0 2px rgba(0, 95, 158, 0.15);
}

.idsc-viewer3d-checkboxes {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.idsc-viewer3d-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

.idsc-viewer3d-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-brand-primary, #005f9e);
}

/* Colored dot indicator for the checkbox labels */
.idsc-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.idsc-color-dot-red  { background-color: #e53935; }
.idsc-color-dot-green { background-color: #43a047; }

/* Selection notification bar */
.idsc-viewer3d-selection-bar {
    background: rgba(0, 95, 158, 0.08);
    border: 1px solid rgba(0, 95, 158, 0.25);
    border-radius: var(--radius-small, 4px);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.idsc-viewer3d-selection-bar button {
    background: var(--color-brand-primary, #005f9e);
    color: white;
    border: none;
    border-radius: var(--radius-small, 4px);
    padding: 3px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.idsc-viewer3d-selection-bar button:hover {
    background: var(--color-brand-primary-dark, #00437b);
}

/* Grid area with tabs */
.idsc-viewer3d-grid-area {
    background: white;
    border: 1px solid var(--color-border-light, #e0e0e0);
    border-radius: var(--radius-medium, 6px);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* No-data message */
.idsc-viewer3d-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: var(--color-text-muted);
    padding: 32px;
    text-align: center;
}

.idsc-viewer3d-no-data i {
    font-size: 2rem;
    opacity: 0.4;
}

/* Summary badges row */
.idsc-viewer3d-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

/* IFC load button */
.idsc-viewer3d-load-btn {
    background: var(--color-brand-primary, #005f9e);
    color: white;
    border: none;
    border-radius: var(--radius-small, 4px);
    padding: 5px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.idsc-viewer3d-load-btn:hover {
    background: var(--color-brand-primary-dark, #00437b);
}

.idsc-viewer3d-load-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}