/* Checklist Module Styles */

/* === Module-local token extensions (supplement site.css :root) === */
:root {
    --color-info-bg: #cfe2ff;
    --color-info-text: #084298;
    --color-warning-border: #ffeeba;
}

.checklist-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* === Two-column workspace === */
.checklist-workspace {
    display: flex;
    gap: var(--space-20);
    height: calc(100vh - 150px);
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.checklist-col-left {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.checklist-workspace.checklist-panel-open .checklist-col-left {
    flex: 1 1 0;
}

.checklist-col-right {
    flex: 1 1 0;
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    overflow-y: auto;
    min-width: 0;
}

.checklist-panel-card {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-16);
}

/* === PDF overlay (left column) === */
.checklist-pdf-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

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

.checklist-pdf-overlay-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.checklist-pdf-body {
    flex: 1;
    overflow: hidden;
}

.checklist-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* === Full-screen overlay (BibliothekPage PDF) === */
.checklist-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.checklist-fullscreen-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-subtle);
}

.checklist-fullscreen-overlay-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.checklist-fullscreen-overlay-body {
    flex: 1;
    background: var(--color-white);
    overflow: auto;
}

.checklist-fullscreen-overlay-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* === Delete/confirm modal overlay === */
.checklist-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist-modal-dialog {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    padding: var(--space-24);
    max-width: 500px;
    box-shadow: var(--shadow-lg);
}

.checklist-modal-dialog h3 {
    margin: 0 0 var(--space-16) 0;
    font-size: 20px;
    font-weight: 600;
}

.checklist-modal-dialog p {
    margin: 0 0 var(--space-24) 0;
    color: var(--color-text-secondary);
}

.checklist-modal-actions {
    display: flex;
    gap: var(--space-12);
    justify-content: flex-end;
}

/* === Filter bar === */
.checklist-filter-bar {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
    flex-wrap: wrap;
}

/* === Error / Loading state === */
.checklist-error-state {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.checklist-error-state i.checklist-error-icon {
    font-size: 48px;
    color: var(--color-warning);
    margin-bottom: var(--space-16);
}

.checklist-error-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-8);
}

.checklist-error-state p {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-16);
}

.checklist-center-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
}

.checklist-center-state p {
    font-size: 16px;
    margin: 0;
    text-align: center;
}

/* === Detail Panel === */
.checklist-detail-header {
    margin-bottom: var(--space-24);
}

/* Row 1: title + help icon */
.checklist-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
}

.checklist-detail-title-row h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* Row 2: action buttons aligned to the left */
.checklist-detail-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-16);
}

/* Normalize all action-row button heights to MudBlazor medium (36px) */
.checklist-detail-action-row .mud-button-root,
.checklist-detail-action-row .mud-chip {
    height: 36px;
    min-height: 36px;
}

/* Row 3: description (1/3 left) + front picture (2/3 right) */
.checklist-detail-frontrow {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
    margin-bottom: var(--space-16);
}

.checklist-detail-description-col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    color: var(--color-text-secondary);
}

.checklist-detail-frontpicture-col {
    flex: 0 0 66.666%;
    max-width: 66.666%;
    display: flex;
    justify-content: flex-end;
}

.checklist-frontpicture {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-medium);
    display: block;
}

/* Plain description when no front picture */
.checklist-detail-header > .page-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
}

/* Legacy classes kept for backward compatibility */
.checklist-detail-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.checklist-detail-title-group {
    flex: 1;
}

.checklist-detail-title-group h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: var(--space-8);
}

.checklist-detail-title-group p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
}

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

/* === Section title in detail === */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-brand-primary);
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-8);
    border-bottom: 2px solid var(--color-brand-primary);
}

/* === Question rendering === */
.question-number {
    color: var(--color-brand-primary);
    font-weight: 600;
}

.question-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.question-checkbox-row label {
    margin: 0;
    cursor: pointer;
}

.checklist-small-text {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: var(--space-8);
    padding: var(--space-8);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
}

.checklist-small-text p {
    margin-bottom: var(--space-4);
}

.question-table-container {
    margin-top: var(--space-12);
    overflow-x: auto;
}

.question-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-8) 0;
}

.question-table th {
    padding: var(--space-8);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-grey-100);
    text-align: left;
}

.question-table td {
    padding: var(--space-8);
    border: 1px solid var(--color-border-subtle);
}

.search-results {
    max-height: 200px;
    overflow-y: auto;
}

.question-images {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-top: var(--space-12);
}

.image-thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-small);
    cursor: pointer;
    border: 1px solid var(--color-border-subtle);
}

/* === Image modal === */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.image-modal-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.image-modal-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-medium);
}

.image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
}

/* === Editor page layout === */
.editor-tab-strip {
    display: flex;
    border-bottom: 1px solid var(--color-border-subtle);
}

.editor-panel-left {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
}

.editor-panel-scroll {
    padding: var(--space-16);
    overflow-y: auto;
    max-height: calc(100vh - 300px);
}

.library-name-hint {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: var(--space-16);
}

.library-template-card {
    padding: var(--space-12);
    margin-bottom: var(--space-8);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
    cursor: pointer;
}

.library-template-card:hover {
    background-color: var(--color-grey-100);
}

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

.library-template-meta {
    font-size: 13px;
    color: var(--color-text-muted);
}

.library-group-header {
    font-weight: 600;
    color: var(--color-brand-primary);
    padding: var(--space-8);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-12);
}

/* === Editor component layout === */
.editor-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

/* Header bar with title + actions */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-24);
}

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

/* Label + button row inside a filter-group */
.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

/* Compact list of stacked items */
.app-list-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Hint text below a label */
.app-hint {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: var(--space-8);
}

.delete-confirm-panel {
    margin-bottom: var(--space-24);
    padding: var(--space-16);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-small);
}

.delete-confirm-panel p {
    margin: 0 0 var(--space-12) 0;
    font-weight: 600;
}

.delete-confirm-panel p.secondary {
    font-weight: normal;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-16);
}

.delete-confirm-actions {
    display: flex;
    gap: var(--space-12);
}

.editor-hint {
    color: var(--color-text-muted);
    font-size: 12px;
    margin-top: var(--space-8);
    font-style: italic;
}

.editor-empty-state {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 14px;
}

.editor-input-readonly {
    background-color: var(--color-grey-200) !important;
    cursor: not-allowed !important;
}

.editor-input-readonly-sm {
    background-color: var(--color-grey-200) !important;
    cursor: not-allowed !important;
    max-width: 100px;
}

.editor-textarea {
    min-height: 100px;
    resize: vertical;
}

.editor-textarea-sm {
    min-height: 80px;
    resize: vertical;
}

.editor-textarea-mono {
    min-height: 80px;
    resize: vertical;
    font-family: monospace;
    font-size: 12px;
}

.editor-textarea-mono-lg {
    min-height: 120px;
    resize: vertical;
    font-family: monospace;
    font-size: 12px;
}

.section-question-count {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-left: var(--space-8);
}

.section-grip-icon {
    color: var(--color-grey-300);
    cursor: move;
}

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

.editor-clickable-row {
    cursor: pointer;
}

.editor-clickable-row:hover {
    background-color: var(--color-hover, rgba(0,0,0,.04));
    border-radius: var(--radius-sm, 4px);
}

.section-item-label {
    flex: 1;
}

.section-item-actions {
    display: flex;
    gap: var(--space-4);
}

.editor-question-number {
    font-weight: 600;
    color: var(--color-brand-primary);
    margin-right: var(--space-8);
}

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

.option-input-main {
    flex: 1;
}

.option-input-value {
    flex: 0 0 150px;
}

.hint-text-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.hint-text-row textarea {
    flex: 1;
    min-height: 60px;
    resize: vertical;
}

/* === Permission Section === */
.permission-section-item {
    margin-bottom: var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background-color: var(--color-white);
}

.permission-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-12);
    cursor: pointer;
    background-color: var(--color-grey-50);
}

.permission-section-body {
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.permission-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    cursor: pointer;
    border-radius: var(--radius-small);
    transition: background-color 0.2s;
}

.permission-item-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.permission-item-row span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.permission-item-row.disabled input[type="checkbox"] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* === Image Attachment Editor === */
.image-attachment-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
}

.image-attachment-icon {
    color: var(--color-brand-primary);
    font-size: 20px;
}

.image-attachment-info {
    flex: 1;
}

.image-attachment-filename {
    font-weight: 500;
    font-size: 14px;
}

.image-attachment-label {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* === BibliothekPage detail panel === */
.bibliothek-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-24);
}

.bibliothek-detail-actions {
    display: flex;
    gap: var(--space-12);
}

.bibliothek-section-block {
    margin-bottom: var(--space-20);
    padding: var(--space-16);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border-left: 4px solid var(--color-brand-primary);
}

.bibliothek-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brand-primary);
    margin: 0 0 var(--space-12) 0;
}

.bibliothek-question-list {
    margin: 0;
    padding-left: var(--space-20);
    list-style-type: disc;
}

.bibliothek-question-list li {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.bibliothek-question-number {
    font-weight: 600;
    color: var(--color-brand-primary);
}

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

/* === SectionTree === */
.tree-section {
    margin-left: var(--space-24);
}

.tree-questions {
    margin-left: var(--space-24);
}

.tree-root-title {
    font-size: 18px;
    font-weight: 600;
}

.tree-section-title {
    font-size: 16px;
    font-weight: 600;
}

.tree-question-number {
    font-weight: 600;
    margin-right: var(--space-4);
}

/* === filter-label: stored in proper case, rendered uppercase (Phase F) === */
.filter-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === Input/select sizing variants === */
.filter-select-xs {
    max-width: 200px;
}

.filter-select-sm {
    max-width: 300px;
}

.filter-select-md {
    max-width: 300px;
}

.filter-select-lg {
    max-width: 500px;
}

.checklist-choice-btn {
    min-width: 80px;
}

.checklist-choice-btn--selected {
    font-weight: 600;
    box-shadow: 0 0 0 2px currentColor;
}

/* === Option value color coding === */
.option-yes {
    background-color: var(--color-success-light);
}

.option-partial {
    background-color: var(--color-warning-light);
}

.option-no {
    background-color: var(--color-error-light);
}

/* === MudDataGrid checklist overview === */
.checklist-datagrid {
    height: auto;
}

/* Show vertical separators for all header columns in the first row */
.checklist-datagrid .mud-table-head .mud-table-cell {
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.checklist-datagrid .mud-table-head .mud-table-cell:last-child {
    border-right: none !important;
}

/* Required field hint in create form */
.app-hint.checklist-required-hint {
    color: var(--color-text-muted);
    font-style: italic;
}

.checklist-datagrid .status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.checklist-datagrid .status-badge.status-draft {
    background-color: var(--color-grey-200);
    color: var(--color-text-secondary);
}

.checklist-datagrid .status-badge.status-submitted {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.checklist-datagrid .status-badge.status-inreview {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
}

.checklist-datagrid .status-badge.status-approved {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.checklist-datagrid .status-badge.status-rejected {
    background-color: var(--color-error-light);
    color: var(--color-danger-text);
}

.checklist-datagrid .tag-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-grey-200);
    border-radius: 10px;
    font-size: 11px;
    margin-right: 2px;
}

.checklist-datagrid .checklist-reviewer-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.checklist-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-20);
}

/* Section Tree Styles */
.section-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tree-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
    color: var(--color-text-secondary);
}

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

.tree-item.selected {
    background-color: var(--color-brand-primary);
    color: var(--color-white);
}

.tree-item-root {
    font-weight: 600;
    color: var(--color-brand-primary);
}

.tree-item-root.selected {
    color: var(--color-white);
}

.tree-item-question {
    font-size: 13px;
}

.tree-section-card {
    border: 1px solid var(--color-border-subtle);
}

.tree-section-card.selected {
    background-color: var(--color-brand-primary) !important;
    color: var(--color-white);
    border-color: var(--color-brand-primary);
}

.drag-over {
    border: 2px dashed var(--color-brand-primary) !important;
    background-color: var(--color-grey-100);
}

/* Editor Styles */
.editor-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.editor-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-brand-primary);
    margin: 0;
}

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

/* Question Styles */
.question-section {
    margin-bottom: var(--space-24);
}

.question-item {
    padding: var(--space-16);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    margin-bottom: var(--space-12);
}

.question-text {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
    line-height: 1.5;
}

.question-options {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.question-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: var(--space-8);
    padding: var(--space-8);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-small);
}

/* Metadata Styles */
.checklist-metadata {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    padding: var(--space-20);
    background-color: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
}

/* Detail Panel Styles */
.checklist-detail {
    padding: var(--space-24);
}

.checklist-questions {
    margin-top: var(--space-24);
}

/* Editor Tab Styles */
.editor-tab {
    flex: 1;
    padding: var(--space-12) var(--space-16);
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

.editor-tab:hover {
    background-color: var(--color-grey-50);
}

.editor-tab.active {
    background-color: var(--color-brand-primary);
    color: var(--color-white);
}

/* Form Styles */
.form-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: var(--space-24);
}

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

/* Filter button Styles */

.checklist-filter-btn {
    padding: 6px 12px;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: 0.2s;
}

.checklist-filter-btn:hover {
    background: var(--color-grey-100);
}

.checklist-filter-btn.active {
    background: var(--color-brand-primary);
    color: white;
    border-color: var(--color-brand-primary);
}




/* Fixed-width button in filter bars */
.filter-btn-fixed {
    width: fit-content;
    flex: 0 0 auto;
    display: inline-block;
    white-space: nowrap;
}

/* Left-aligned text in MudButton */
.btn-left-align {
    justify-content: flex-start;
    text-align: left;
}

/* Monospace for JSON editors */
.mud-input-mono .mud-input textarea {
    font-family: monospace;
    font-size: 12px;
}

/* MudSelect color coding for option values */
.mud-select.option-yes .mud-input-slot { background-color: var(--color-success-light); }
.mud-select.option-partial .mud-input-slot { background-color: var(--color-warning-light); }
.mud-select.option-no .mud-input-slot { background-color: var(--color-error-light); }

/* === Page tab strip (BibliothekPage) === */
.checklist-page-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border-subtle);
    background: var(--color-white);
    padding: var(--space-0) var(--space-24);
    margin-bottom: var(--space-16);
}

.checklist-tab-button {
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-bottom-color 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.checklist-tab-button:hover {
    color: var(--color-primary);
}

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

/* === User Rights panel === */
.checklist-user-rights-panel {
    padding: var(--space-24);
}

.checklist-library-actions {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    align-items: center;
}

.checklist-editor-right {
    padding: var(--space-24);
}

/* === Reviewer setup panel (ChecklistDetailPanel) === */
.checklist-reviewer-setup {
    margin-bottom: var(--space-16);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.reviewer-setup-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-12) var(--space-16);
    background: var(--color-grey-50);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: left;
    transition: background 0.15s;
}

.reviewer-setup-toggle:hover {
    background: var(--color-grey-100);
}

.reviewer-setup-toggle > i:last-child {
    margin-left: auto;
}

.reviewer-setup-body {
    padding: var(--space-16);
    background: var(--color-white);
}

.reviewer-setup-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-12);
}

/* === Workflow banners === */
.workflow-banner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-medium);
    margin-bottom: var(--space-16);
    font-size: 0.95rem;
    font-weight: 600;
}

.workflow-banner-approved {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.workflow-banner-rejected {
    background-color: var(--color-error-light);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.workflow-banner-inreview {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* === Workflow modals === */
.workflow-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
}

.workflow-modal {
    background: var(--color-white);
    border-radius: var(--radius-large);
    padding: var(--space-24);
    min-width: 360px;
    max-width: 540px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.workflow-modal h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

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

/* === Per-question review overlay (active reviewer) === */
.question-review-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    margin-top: var(--space-8);
    border-top: 1px dashed var(--color-border-subtle);
    background: var(--color-grey-50);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.review-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-small);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.review-status-pending {
    background-color: var(--color-grey-200);
    color: var(--color-text-secondary);
}

.review-status-approved {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
}

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

.review-comment-input {
    flex: 1;
    min-width: 180px;
}

/* === Per-question self-comment (assignee, Draft mode) === */
.question-self-comment {
    margin-top: var(--space-8);
}

/* === Question read-only overlay === */
.question-item-readonly {
    opacity: 0.85;
}

/* === Detail panel footer (Save / Submit buttons) === */
.checklist-detail-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-16) 0 var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-24);
}

/* === Reviewer footer (Save / Approve / Reject) === */
.checklist-review-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-16) 0 var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-24);
}

.review-progress {
    display: inline-block;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-medium);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
}

.review-progress--pending {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
}

.review-progress--complete {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

.review-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}

/* === Attached files strip === */
.checklist-attached-files {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-12);
}

.attached-files-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.attached-files-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* === Review history (non-active reviewer read-only view) === */
.review-history {
    margin-top: var(--space-8);
    border-top: 1px dashed var(--color-border-subtle);
    padding-top: var(--space-8);
}

.review-history-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}

.review-history-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-4) 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

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

.review-history-step-reviewer {
    font-weight: 600;
    white-space: nowrap;
}

.review-history-step-comment {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ── Advanced-mode review step timeline ─────────────────────────────── */

.review-step-history {
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
}

.review-step-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.review-step-item--past {
    background-color: var(--color-surface-secondary);
    opacity: 0.8;
}

.review-step-item--active {
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
}

.review-step-item--future {
    background-color: var(--color-surface-secondary);
    opacity: 0.5;
}

.review-step-status-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.review-status-future {
    background-color: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* ── Admin Settings Page ─────────────────────────────────────────── */

/* ── Columns configuration panel ────────────────────────────────── */

.checklist-columns-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.checklist-columns-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.checklist-columns-panel-body {
    padding: var(--space-12) var(--space-20);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.checklist-column-toggle {
    display: flex;
    align-items: center;
}



/* ── BCF status badge in checklist table ─────────────────────────── */

.checklist-bcf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-small, 4px);
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    background-color: var(--color-grey-400, #9e9e9e);
}

.checklist-bcf-badge.bcf-status-new {
    background-color: var(--bcf-status-new, #2f80ed);
}

.checklist-bcf-badge.bcf-status-in-progress {
    background-color: var(--bcf-status-in-progress, #f2b705);
}

.checklist-bcf-badge.bcf-status-waiting {
    background-color: var(--bcf-status-waiting, #e65f38);
}

.checklist-bcf-badge.bcf-status-done {
    background-color: var(--bcf-status-done, #27ae60);
}

.checklist-bcf-badge.bcf-status-closed {
    background-color: var(--bcf-status-closed, #2bb0c8);
}

/* ── Aggregate column cell backgrounds ───────────────────────────── */

.checklist-agg-yes {
    background-color: var(--color-success-light, #dff3e6) !important;
}

.checklist-agg-partial {
    background-color: var(--color-warning-light, #fff3cd) !important;
}

.checklist-agg-no {
    background-color: var(--color-error-light, #f8d7da) !important;
}

.checklist-agg-open {
    background-color: var(--color-info-bg, #cfe2ff) !important;
}

.checklist-admin-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.checklist-admin-section {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-20);
}

.checklist-admin-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-16) 0;
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
}

.checklist-admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.checklist-admin-form-actions {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.checklist-admin-table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-12);
}

.checklist-admin-inline-form {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-8);
}

.checklist-admin-copyconfig-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: var(--space-12) 0;
}

/* ── BCF inline modal: comments section ───────────────────────────────── */
.bcf-add-comment {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: var(--space-8);
}

.comment-item {
    padding: var(--space-8);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    border-left: 3px solid var(--color-primary);
}

.comment-meta {
    display: flex;
    gap: var(--space-8);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.comment-author {
    font-weight: 600;
}

.comment-text {
    font-size: 0.875rem;
    white-space: pre-wrap;
}

/* === Front image upload control (EditorChecklist) === */
.checklist-frontimage-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-medium);
    cursor: pointer;
    overflow: hidden;
    background: var(--color-bg-subtle, #f8f9fa);
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.checklist-frontimage-upload:hover {
    border-color: var(--color-primary);
    background: var(--color-grey-50);
}

.checklist-frontimage-upload img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
}

.checklist-frontimage-filename {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    text-align: center;
}

.checklist-frontimage-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-text-muted);
    padding: var(--space-16);
}

.checklist-frontimage-placeholder i {
    font-size: 2.5rem;
}

/* === PDF upload control (EditorChecklist) === */
.checklist-pdf-upload {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: var(--color-bg-subtle, #f8f9fa);
    cursor: pointer;
    transition: border-color 0.2s;
}

.checklist-pdf-upload:hover {
    border-color: var(--color-primary);
}

.checklist-pdf-filename {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === SectionTree move buttons === */
.tree-item-move-actions {
    margin-left: auto;
    display: flex;
    gap: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.tree-item:hover .tree-item-move-actions,
.tree-item.selected .tree-item-move-actions {
    opacity: 1;
}

/* === Table builder (EditorQuestion) === */
.checklist-table-setup {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-12);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-subtle);
}

.checklist-table-editor {
    overflow-x: auto;
    margin-top: var(--space-8);
}

.checklist-table-grid {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.875rem;
}

.checklist-table-grid th,
.checklist-table-grid td {
    border: 1px solid var(--color-border-subtle);
    padding: 0;
}

.checklist-table-grid th {
    background: var(--color-grey-100);
}

.checklist-table-cell {
    width: 100%;
    min-width: 80px;
    padding: var(--space-4) var(--space-8);
    border: none;
    background: transparent;
    font-size: 0.875rem;
    outline: none;
}

.checklist-table-cell:focus {
    background: var(--color-primary-bg-subtle, #f0f4ff);
}

/* === Library section-copy panel === */
.library-template-card--expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.library-section-list {
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-top: none;
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    margin-bottom: var(--space-8);
    padding: var(--space-4) 0;
}

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

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

.library-section-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-group-header--clickable {
    cursor: pointer;
    user-select: none;
}

.library-group-header--clickable:hover {
    background: var(--color-grey-100);
}

/* === Section copy feedback toast === */
.checklist-copy-feedback {
    position: fixed;
    bottom: var(--space-24);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-8) var(--space-20);
    border-radius: var(--radius-medium);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 9999;
}