/* ============================================
   PROJECT DETAIL VIEW STYLES
   ============================================ */

.project-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.project-shell {
    display: flex;
    height: 100%;
    width: 100%;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-light);
}

.project-tools-bar {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* ============================================
   PROJECT NAVIGATION
   ============================================ */

/* .project-nav { border: 1px solid var(--border-color); } */
.nav-item { color: var(--text-color); }
.project-tools-bar { background: var(--bg-surface); }

/* .project-nav.collapsed {
    width: 60px;
} */

.project-nav.collapsed .nav-label,
.project-nav.collapsed .nav-collapse-btn .collapse-label {
    opacity: 0;
    width: 0;
    display: none;
}

.project-nav.collapsed svg.icon-collapse {
    display: block;
}

.project-nav.collapsed svg.icon-expand {
    display: none;
}

.project-nav.collapsed .nav-collapse-btn {
    justify-content: center;
    padding: 12px 16px;
    gap: 0;
}

.project-nav.collapsed .nav-collapse-btn .icon-collapse {
    display: none;
}

.project-nav.collapsed .nav-collapse-btn .icon-expand {
    display: block;
}

.nav-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* margin-top: 28px; */
    flex: 1;
}

.nav-item { color: var(--text-color); }
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--color-primary-bg); color: var(--color-primary); }
.nav-item svg { color: var(--text-muted); }
.nav-item.active svg { color: var(--color-primary); }

.project-nav.collapsed .nav-item {
    padding: 12px;
    justify-content: center;
}

.nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Mặc định và khi hover: chữ đen để dễ đọc */
.project-nav .nav-item,
.project-nav .nav-item:hover {
    color: var(--text-primary);
}

.nav-item:hover { background-color: var(--bg-hover); }
.project-nav .nav-item.active { background-color: var(--color-primary); color: var(--bg-surface); }
.project-nav .nav-item.active svg { color: var(--bg-surface) !important; }

.nav-collapse-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.nav-collapse-btn:hover { background-color: var(--bg-hover); color: var(--text-primary); }
.explorer-header { background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); }

.nav-collapse-btn svg {
    flex-shrink: 0;
}

.nav-collapse-btn .collapse-label {
    flex: 1;
}

/* ============================================
   PROJECT MAIN CONTENT
   ============================================ */

.project-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.section.active {
    display: flex;
    flex-direction: column;
}

/* ============================================
   DATA SECTION
   ============================================ */

/* Data header đã bị bỏ */

.explorer-pane {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-lighter);
    height: 100%;
}

.explorer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--gray-200);
    gap: 16px;
}

.breadcrumb-container {
    flex: 1;
    min-width: 0;
}

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

.view-mode-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--gray-50);
}

.view-mode-toggle .btn-icon {
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-mode-toggle .btn-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.view-mode-toggle .btn-icon.active {
    background-color: white;
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.header-controls .btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-base);
    min-height: 32px;
}

/* CDE Standard Buttons */
#btn-cde-submittal,
#btn-cde-rfa,
#btn-cde-versions {
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background-color: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn-cde-submittal:hover,
#btn-cde-rfa:hover,
#btn-cde-versions:hover {
    background-color: white;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#btn-cde-submittal svg,
#btn-cde-rfa svg,
#btn-cde-versions svg {
    width: 16px;
    height: 16px;
}

/* CDE Zone Indicator */
.cde-zone-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-300);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.zone-dot.zone-wip {
    background-color: var(--color-warning);
}

.zone-dot.zone-shared {
    background-color: var(--color-info);
}

.zone-dot.zone-published {
    background-color: var(--color-success);
}

.zone-dot.zone-archived {
    background-color: var(--gray-600);
}

.zone-label {
    color: var(--text-secondary);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.breadcrumb-item {
    color: var(--text-secondary);
    transition: color 0.2s;
    padding: 2px 4px;
    border-radius: 3px;
}

.breadcrumb-item:not(.active):hover {
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--text-light);
    margin: 0 6px;
    font-weight: 300;
}

.file-list-container {
    flex: 1;
    overflow: auto;
    width: 100%;
}

.file-list-container .cde-table {
    min-width: 100%;
    table-layout: auto;
}

.folder-item {
    padding: var(--spacing-sm) 0;
}

.folder-header {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.folder-header:hover {
    background-color: rgba(30, 90, 150, 0.1);
}

.folder-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.subfolders {
    padding-left: var(--spacing-lg);
    border-left: 1px solid var(--gray-200);
    margin-left: var(--spacing-sm);
}

/* ============================================
   DATA SECTION - Layout
   ============================================ */

.data-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--spacing-md);
}

.data-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: var(--spacing-md);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--font-size-sm);
    width: 180px;
}

.search-box svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-light);
}

.data-layout {
    display: flex;
    flex: 1;
    gap: var(--spacing-md);
    min-height: 0;
}

.folder-tree-panel,
.file-list-panel {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.folder-tree-panel {
    width: 250px;
    flex-shrink: 0;
}

.file-list-panel {
    flex: 1;
    min-width: 0;
}

.panel-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-lighter);
}

.panel-header h4 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.folder-tree-container,
.file-list-container {
    flex: 1;
    overflow: auto;
    /* padding: var(--spacing-sm); */
}

.file-list-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================
   CDE TABLE (Common Data Environment - chuẩn Autodesk/Trimble)
   ============================================ */

.cde-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: var(--font-size-base);
    table-layout: fixed;
}

.cde-table thead {
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cde-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--gray-50);
}

.cde-table th.col-name {
    /* Freeze first column */
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--gray-50);
    border-right: 1px solid var(--gray-200);
    min-width: 200px;
    width: 250px;
    resize: none;
    overflow: hidden;
}

.cde-table th.col-name .resize-handle,
.cde-table th.col-name::after {
    display: none !important;
    pointer-events: none;
}

.cde-table td.col-name {
    /* Freeze first column */
    position: sticky;
    left: 0;
    z-index: 9;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--gray-200);
    min-width: 200px;
    width: 250px;
}

/* Actions column - frozen on right side, like Excel freeze column */
/* Fixed width 30px, stays in place when scrolling */
.cde-table th.col-actions {
    position: sticky;
    right: 0;
    z-index: 20;
    background-color: var(--gray-50);
    border-left: 1px solid var(--gray-200);
    min-width: 30px;
    width: 30px;
    text-align: center;
    box-shadow: -2px 0 4px rgba(0,0,0,0.05);
    justify-content: space-around;
}

/* Actions column cell - flex container for buttons */
.cde-table td.col-actions {
    position: sticky;
    right: 0;
    z-index: 19;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--gray-200);
    min-width: 30px;
    width: 30px;
    padding: 2px !important;
    vertical-align: middle;
}

/* Inner container for action buttons - flex layout */
.cde-table td.col-actions .actions-cell {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 2px;
}

/* Button styles for view-model (left) and menu (right) */
.cde-table td.col-actions .btn-view-model,
.cde-table td.col-actions .btn-file-menu,
.cde-table td.col-actions .btn-folder-menu {
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.cde-table td.col-actions .btn-view-model:hover,
.cde-table td.col-actions .btn-file-menu:hover,
.cde-table td.col-actions .btn-folder-menu:hover {
    opacity: 1;
}

.cde-table td.col-actions .btn-view-model svg,
.cde-table td.col-actions .btn-file-menu svg,
.cde-table td.col-actions .btn-folder-menu svg {
    width: 12px;
    height: 12px;
}

/* Column resize handle */
.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 20;
}

.resize-handle:hover {
    background: var(--color-info);
}

/* Sortable column headers */
.cde-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.cde-table th.sortable:hover {
    background-color: var(--gray-200);
}

.cde-table th.sort-asc::after {
    content: ' ▲';
    font-size: var(--font-size-xs);
    color: var(--color-info);
}

.cde-table th.sort-desc::after {
    content: ' ▼';
    font-size: var(--font-size-xs);
    color: var(--color-info);
}

/* Folder/Name cell styling */
.cde-name {
    /* display: flex; */
    align-items: center;
    gap: 6px;
}

.folder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.folder-icon svg {
    width: 16px;
    height: 16px;
    color: var(--color-warning);
}

.folder-name {
    font-weight: 500;
    color: var(--text-color);
    font-size: inherit;
}

.file-name {
    font-weight: 400;
    color: var(--text-color);
    font-size: inherit;
}

.cde-table th.col-modified-by,
.cde-table th.col-created-by,
.cde-table th.col-modified-on,
.cde-table th.col-version,
.cde-table th.col-size,
.cde-table th.col-tags
{
    min-width: 100px;
    width: 120px;
    max-width: 200px;
    text-align: left;
    position: relative;
    user-select: none;
}


/* Resize handle for columns */
.cde-table th .resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
}

.cde-table th .resize-handle:hover {
    background: rgba(0, 0, 0, 0.1);
}

.cde-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background-color 0.15s ease;
}

.cde-table tbody tr:hover {
    background-color: var(--gray-50);
}

.cde-table tbody tr.folder-row {
    font-weight: 500;
    cursor: pointer;
}

.cde-table tbody tr.folder-row:hover {
    background-color: var(--gray-100);
}

/* Folder toggle button */
.folder-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-right: 4px;
    color: var(--gray-500);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.folder-toggle-btn:hover {
    color: var(--text-color);
}

.folder-toggle-btn.expanded {
    transform: rotate(90deg);
}

.folder-toggle-btn.invisible {
    visibility: hidden;
    pointer-events: none;
}

.folder-toggle-btn svg {
    width: 12px;
    height: 12px;
}

/* Folder color indicator */
.folder-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Folder menu button */
.btn-folder-menu,
.btn-file-menu,
.btn-view-model {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.15s ease;
    margin-left: 4px;
}

.btn-folder-menu:hover,
.btn-file-menu:hover,
.btn-view-model:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-color);
}

.btn-folder-menu svg,
.btn-file-menu svg,
.btn-view-model svg {
    width: 14px;
    height: 14px;
}

.cde-table tbody tr.file-row.file-status-converting,
.cde-table tbody tr.file-row.file-status-running {
    background-color: rgba(255, 193, 7, 0.05);
}

.cde-table tbody tr.file-row.file-status-completed {
    background-color: rgba(76, 175, 80, 0.02);
}

.cde-table tbody tr.file-row.file-status-failed {
    background-color: rgba(244, 67, 54, 0.05);
}

.cde-table td {
    padding: 6px 12px;
    vertical-align: middle;
    color: var(--text-color);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    background-color: var(--bg-surface);
}

#cde-empty-state.cde-root-zone-empty {
    height: auto;
    min-height: 220px;
    padding: 20px 16px;
}

.cde-root-zone-empty-wrap {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cde-root-zone-empty-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
}

.cde-root-zone-empty-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted, #64748b);
}

.cde-root-zone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cde-root-zone-item {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--bg-surface);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cde-root-zone-item:hover {
    transform: translateY(-1px);
    border-color: var(--gray-400);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.cde-root-zone-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cde-root-zone-name {
    font-size: var(--font-size-sm);
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cde-root-zone-create-btn {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    line-height: 1;
    border: 1px solid #cbd5e1;
    color: #334155;
    background: #f8fafc;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .cde-root-zone-grid {
        grid-template-columns: 1fr;
    }
}

.cde-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-toggle {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.folder-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.folder-toggle.open svg {
    transform: rotate(90deg);
}

.folder-toggle-spacer {
    width: 16px;
    flex-shrink: 0;
}

.column-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
    z-index: 10;
}

.column-resize-handle:hover {
    background-color: var(--primary-color);
    opacity: 0.5;
}

.cde-table th {
    position: relative;
    user-select: none;
}

.cde-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cde-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor !important;
    fill: none !important;
}

.cde-icon svg.has-color {
    stroke: inherit !important;
}

.cde-name {
    font-weight: inherit;
    color: var(--text-color);
    font-size: inherit;
}

.cde-table .col-name {
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 12px 6px 12px !important;
}

/* Hierarchical indentation for folder/file rows */
.cde-table .col-name.level-0 { padding-left: 10px !important; }
.cde-table .col-name.level-1 { padding-left: 30px !important; }
.cde-table .col-name.level-2 { padding-left: 50px !important; }
.cde-table .col-name.level-3 { padding-left: 70px !important; }
.cde-table .col-name.level-4 { padding-left: 90px !important; }
.cde-table .col-name.level-5 { padding-left: 110px !important; }

.cde-table .col-name .cde-name {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cde-table .col-modified-by,
.cde-table .col-created-by {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cde-table .col-modified-on {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cde-table .col-size {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family-primary, 'FZ Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Phiên bản (Version) */
.cde-table .col-version {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cde-table .col-tags {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cde-table .col-actions {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding: 6px 12px !important;
}

/* Column settings button in table header - compact gear icon style */
.cde-table th.col-actions .btn-table-column-settings {
    width: 24px;
    height: 24px;
    padding: 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    opacity: 0.6;
}

.cde-table th.col-actions .btn-table-column-settings:hover {
    background-color: var(--gray-200);
    opacity: 1;
}

.cde-table th.col-actions .btn-table-column-settings svg {
    width: 14px;
    height: 14px;
    color: var(--gray-600);
}

.cde-table th.col-actions .btn-table-column-settings:hover svg {
    color: var(--color-info);
}

/* Actions column - buttons layout: btn-view-model on left, btn-folder-menu on right */
.cde-table td.col-actions {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px !important;
    gap: 2px;
}

.cde-table td.col-actions .btn-view-model,
.cde-table td.col-actions .btn-file-menu,
.cde-table td.col-actions .btn-folder-menu {
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.cde-table td.col-actions .btn-view-model:hover,
.cde-table td.col-actions .btn-file-menu:hover,
.cde-table td.col-actions .btn-folder-menu:hover {
    opacity: 1;
}

.cde-table td.col-actions .btn-view-model svg,
.cde-table td.col-actions .btn-file-menu svg,
.cde-table td.col-actions .btn-folder-menu svg {
    width: 12px;
    height: 12px;
}

/* Table action buttons - compact for narrow column */
.cde-table .col-actions .btn-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
}

.cde-table .col-actions .btn {
    margin: 0;
    flex-shrink: 0;
    font-size: var(--font-size-base);
    padding: 4px 8px;
    min-height: 26px;
    line-height: 1;
}

.cde-table .col-actions .btn:last-child {
    margin: 0;
}

/* ============================================
   Column Visibility - Hidden columns from settings
   JavaScript adds .col-hidden class to hide columns
   ============================================ */
.cde-table th.col-hidden,
.cde-table td.col-hidden {
    display: none !important;
}

/* Also target table-wrap context */
.table-wrap th.col-hidden,
.table-wrap td.col-hidden {
    display: none !important;
}

/* ============================================
   DRAG & DROP FILE UPLOAD
   ============================================ */
.table-wrap.drag-over {
    position: relative;
    background-color: rgba(37, 99, 235, 0.08) !important;
    border: 2px dashed var(--color-primary, #2563eb);
    outline: 2px solid rgba(37, 99, 235, 0.2);
    outline-offset: -2px;
    transition: all 0.15s ease;
}

.table-wrap.drag-over::after {
    content: 'Drop files here to upload';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(37, 99, 235, 0.95);
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: var(--font-size-md);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ============================================
   COMPACT VIEW (Chế độ rút gọn)
   ============================================ */

.compact-list {
    padding: 8px;
}

.compact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 2px;
}

.compact-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.compact-item.folder-item {
    font-weight: 500;
}

.compact-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor !important;
    fill: none !important;
}

.compact-icon svg.has-color {
    stroke: inherit !important;
}

.compact-name {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* Empty folder message */
.empty-folder-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-light);
    min-height: 300px;
}

.empty-folder-message .empty-icon {
    font-size: var(--font-size-icon-xl);
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-folder-message .empty-text {
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-folder-message .empty-hint {
    font-size: var(--font-size-base);
    color: var(--text-light);
}

/* ============================================
   TAG BADGES
   ============================================ */

.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background-color: var(--color-info-bg);
    color: var(--color-info-dark);
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

/* ============================================
   COLOR PICKER
   ============================================ */

/* Color picker in form dialog */
.color-picker {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 12px;
}

.color-picker .color-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.color-picker .color-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.color-picker .color-btn.selected {
    border-color: var(--text-color);
    transform: scale(1.1);
}

.color-picker-form {
    padding: 16px;
}

.color-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.color-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.color-option:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.color-option.selected {
    background-color: rgba(0, 122, 255, 0.1);
}

.color-option input[type="radio"] {
    margin: 0;
}

.color-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ============================================
   NAMING CONVENTION OPTIONS
   ============================================ */

.naming-option-group {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.naming-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.naming-option:hover {
    background-color: var(--gray-100);
}

.naming-option:has(input:checked) {
    border-color: var(--color-info-dark);
    background-color: rgba(25, 118, 210, 0.05);
}

.naming-option input[type="radio"] {
    margin: 0;
}

.naming-option-label {
    font-size: var(--font-size-base);
    color: var(--text-color);
}

.iso19650-hint {
    margin-top: 6px;
    color: var(--gray-600);
    font-style: italic;
}

.iso19650-hint small {
    color: var(--color-info-dark);
}

/* ============================================
   SORT INDICATOR
   ============================================ */

.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.sortable::after {
    content: ' ↕';
    font-size: var(--font-size-4xs);
    opacity: 0.35;
}

.sortable.sort-asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--color-primary, #3b82f6);
}

.sortable.sort-desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--color-primary, #3b82f6);
}

.sort-indicator {
    margin-left: 4px;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* ============================================
   EXPLORER STYLE (giống Windows Explorer) - DEPRECATED
   ============================================ */

.explorer-list {
    padding: 4px;
}

.explorer-items {
    display: flex;
    flex-direction: column;
}

.explorer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 2px;
}

.explorer-item:hover {
    background-color: var(--gray-100);
}

.explorer-item.file-status-converting,
.explorer-item.file-status-running {
    background-color: rgba(255, 193, 7, 0.05);
}

.explorer-item.file-status-completed {
    background-color: rgba(76, 175, 80, 0.05);
}

.explorer-item.file-status-failed {
    background-color: rgba(244, 67, 54, 0.05);
}

.explorer-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explorer-item-icon svg {
    width: 20px;
    height: 20px;
}

.explorer-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.explorer-item-name {
    font-weight: 500;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.explorer-item-status {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.explorer-item-status.file-status-converting,
.explorer-item-status.file-status-running {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--color-warning-dark);
}

.explorer-item-status.file-status-completed {
    background-color: rgba(76, 175, 80, 0.2);
    color: var(--color-success-dark);
}

.explorer-item-status.file-status-failed {
    background-color: rgba(244, 67, 54, 0.2);
    color: var(--color-danger-dark);
}

.explorer-item-size,
.explorer-item-date {
    color: var(--text-secondary);
}

.explorer-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* opacity: 0; */
    transition: opacity 0.2s ease;
}

.explorer-item:hover .explorer-item-actions {
    opacity: 1;
}

.explorer-item-actions .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-secondary);
}

.explorer-item-actions .btn-icon:hover {
    background-color: var(--gray-300);
    color: var(--text-primary);
}

/* ============================================
   COST ESTIMATOR
   ============================================ */

.cost-estimator {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.cost-header-left h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
}

.cost-subtitle {
    margin: 4px 0 0;
    font-size: var(--font-size-base);
    color: var(--text-muted);
}

.cost-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-select {
    padding: 6px 10px;
    font-size: var(--font-size-base);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.cost-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 8px;
    flex: 1;
    padding: 8px 12px 12px;
    background-color: var(--bg-surface);
}

.cost-tree-panel,
.cost-table-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--gray-50);
    overflow: hidden;
}

.cost-panel-header {
    padding: 8px 10px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--gray-100);
}

.cost-tree-body {
    padding: 6px 8px;
}

.cost-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-base);
    font-family: var(--font-mono, 'Consolas', 'Courier New', monospace);
}

.cost-tree-item {
    padding: 2px 0;
    white-space: nowrap;
}

.cost-tree-level-0 {
    font-weight: 600;
}

.cost-table-wrapper {
    flex: 1;
    overflow: auto;
}

.cost-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: var(--font-size-base);
}

.cost-table thead {
    background-color: var(--color-info-bg);
}

.cost-table th,
.cost-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
    white-space: nowrap;
}

.cost-table tbody tr:nth-child(odd) {
    background-color: var(--gray-50);
}

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

.empty-state {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-light);
    font-size: var(--font-size-base);
}

/* ============================================
   ACTIVITY SECTION
   ============================================ */

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
}

.activity-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.activity-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.activity-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--gray-100);
    border-radius: 6px;
    border-left: 3px solid var(--primary-blue);
    transition: all 0.2s ease;
}

.activity-item:hover {
    background-color: var(--gray-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.activity-icon {
    font-size: var(--font-size-xxl);
    min-width: 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon svg {
    width: 20px;
    height: 20px;
}

.activity-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.activity-title {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.4;
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

/* ============================================
   COLLABORATION SECTION (Topics + Members tabs)
   ============================================ */

.collaboration-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-light);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.collaboration-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.collaboration-tab:hover {
    color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.08);
}

.collaboration-tab.active {
    background: white;
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.collaboration-tab svg {
    width: 18px;
    height: 18px;
}

.collaboration-tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================
   TOPICS TAB - Autodesk ACC Style
   ============================================ */

.topics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

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

.topics-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.btn-new-topic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-new-topic:hover {
    background: var(--secondary-blue);
}

.btn-new-topic svg {
    width: 12px;
    height: 12px;
}

.topics-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-select {
    padding: var(--select-padding-y-sm, 4px) var(--spacing-xl, 18px) var(--select-padding-y-sm, 4px) var(--select-padding-x-sm, 8px);
    border: 1px solid var(--select-border-color, var(--border-color));
    border-radius: var(--select-border-radius-sm, 4px);
    background: var(--select-bg-color, white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center;
    background-size: 12px;
    font-size: var(--select-font-size-sm, 12px);
    color: var(--select-text-color, var(--text-secondary));
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: var(--select-min-width-sm, 100px);
    transition: var(--select-transition);
    line-height: var(--select-line-height, 1.4);
    box-sizing: border-box;
}

.filter-select:hover {
    border-color: var(--select-hover-border, var(--primary-blue-lighter));
}

.filter-select:focus {
    outline: none;
    border-color: var(--select-focus-border, var(--primary-blue));
    box-shadow: 0 0 0 3px var(--select-focus-shadow, rgba(59, 130, 246, 0.1));
}

/* Topic Cards - ACC Style */
.topics-list {
    overflow-y: auto;
    flex: 1;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
    min-height: 0;
}

.topic-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.topic-item:hover {
    border-color: var(--primary-blue-lighter);
    background: rgba(59, 130, 246, 0.02);
}

.topic-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.topic-status.open { background: var(--color-success); }
.topic-status.closed { background: var(--gray-500); }
.topic-type-badge.issue { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.topic-type-badge.question { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.topic-type-badge.request { background: var(--color-success-bg); color: var(--color-success-dark); }

.topic-content {
    flex: 1;
    min-width: 0;
}

.topic-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
}

.topic-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--text-light);
    flex-wrap: wrap;
}

.topic-meta span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.topic-author {
    font-weight: 500;
    color: var(--text-secondary);
}

.topic-date::before {
    content: '•';
    margin-right: 6px;
}

.topic-comments {
    color: var(--primary-blue);
    font-weight: 500;
}

.topic-comments::before {
    content: '•';
    margin-right: 6px;
}

/* Topic Type Badge */
.topic-type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.topic-type-badge.issue { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.topic-type-badge.question { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.topic-type-badge.request { background: var(--color-success-bg); color: var(--color-success-dark); }

/* Empty State */
.topics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-light);
    text-align: center;
}

.topics-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.4;
}

.topics-empty p {
    margin: 0;
    font-size: var(--font-size-base);
}

/* ============================================
   TEAM/MEMBERS TAB - Autodesk ACC Style
   ============================================ */

.members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.members-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    flex: 1;
}

.members-search {
    position: relative;
    flex: 1;
    max-width: 200px;
    min-width: 140px;
}

.members-search svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    color: var(--text-light);
}

.members-search input {
    width: 100%;
    padding: 5px 8px 5px 26px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--font-size-xs);
    transition: all 0.2s ease;
}

.members-search input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.members-filters {
    display: flex;
    gap: 4px;
}

.btn-add-member {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-member:hover {
    background: var(--secondary-blue);
}

.btn-add-member svg {
    width: 12px;
    height: 12px;
}

/* Company Groups */
.members-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
    min-height: 0;
}

.company-group { background: var(--bg-surface); }
.company-group-header { background: var(--gray-50); }
.company-group-header:hover { background: var(--gray-100); }
.party-badge.client { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.party-badge.consultant { background: var(--color-success-bg); color: var(--color-success-dark); }
.party-badge.contractor { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.party-badge.external { background: var(--gray-100); color: var(--gray-600); }
.btn-add-to-group { background: var(--bg-surface); }
.btn-add-to-group:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }

.company-group-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.company-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.party-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.party-badge.client {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
}

.party-badge.consultant {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

.party-badge.contractor {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.party-badge.external { background: var(--gray-100); color: var(--gray-600); }
.btn-add-to-group { background: var(--bg-surface); }
.btn-add-to-group:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }

.btn-add-to-group svg {
    width: 10px;
    height: 10px;
}

/* Members Table - CDE Standard */
.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    table-layout: fixed;
}

.members-table th {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.members-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members-table tr:last-child td {
    border-bottom: none;
}

.members-table tr:hover td {
    background: rgba(59, 130, 246, 0.02);
}

/* Column widths for members table - aligned with data section */
.members-table th.col-name { width: 35%; }
.members-table th.col-email { width: 25%; }
.members-table th.col-role { width: 15%; }
.members-table th.col-phone { width: 12%; }
.members-table th.col-status { width: 8%; }
.members-table th.col-actions { width: 5%; }

/* Member Avatar */
.member-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.member-avatar.client {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-light) 100%);
    color: var(--color-info-dark);
}

.member-avatar.consultant {
    background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-light) 100%);
    color: var(--color-success-dark);
}

.member-avatar.contractor {
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-warning-light) 100%);
    color: var(--color-warning-dark);
}

.member-avatar.external {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    color: var(--gray-600);
}

.member-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.member-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--font-size-xs);
}

.member-email {
    /* font-size: var(--font-size-xs); */
    color: var(--text-light);
}

.member-role {
    display: inline-flex;
    padding: 2px 6px;
    background: var(--gray-100);
    border-radius: 3px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.member-phone {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.member-phone.empty {
    color: var(--text-light);
    font-style: italic;
}

.member-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.member-status.active {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

.member-status.inactive {
    background: var(--gray-100);
    color: var(--gray-600);
}

.member-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.member-actions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.member-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s ease;
}

.member-action-btn:hover {
    background: var(--gray-100);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.member-action-btn.delete:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.member-action-btn svg {
    width: 12px;
    height: 12px;
}

/* Empty Members State */
.members-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-light);
    text-align: center;
    background: white;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.members-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.4;
}

.members-empty p {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-base);
}

.members-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-200);
    padding: 4px;
    border-radius: 8px;
}

.members-tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--gray-600);
    font-size: var(--font-size-base);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.members-tab-btn:hover {
    color: var(--primary-blue);
}

.members-tab-btn.active {
    background: var(--bg-surface);
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.members-team-panel,
.members-org-panel {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.organizations-panel-container {
    flex: 1;
    overflow-y: auto;
}

/* Activity tabs */
.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
    gap: 16px;
}

.activity-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.activity-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-200);
    padding: 4px;
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
}

.activity-tabs .tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--gray-600);
    font-size: var(--font-size-base);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.activity-tabs .tab-btn:hover {
    color: var(--primary-blue);
}

.activity-tabs .tab-btn.active {
    background: var(--bg-surface);
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ============================================
   TEAM SECTION
   ============================================ */

.team-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--spacing-md);
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.team-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.team-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.team-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-200);
    padding: 4px;
    border-radius: 8px;
}

.team-tabs .tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--gray-600);
    font-size: var(--font-size-base);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.team-tabs .tab-btn:hover {
    color: var(--primary-blue);
}

.team-tabs .tab-btn.active {
    background: var(--bg-surface);
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.team-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.team-content .tab-panel {
    display: none;
    height: 100%;
    overflow: auto;
}

.team-content .tab-panel.active {
    display: block;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.members-table th,
.members-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.members-table th {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--text-primary);
    position: sticky;
    top: 0;
}

.members-table tr:hover {
    background: var(--bg-lighter);
}

.members-list {
    padding: var(--spacing-sm);
}

/* ============================================
   CLASH SECTION
   ============================================ */

.clash-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--spacing-md);
}

.clash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.clash-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.clash-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.clash-layout {
    display: flex;
    flex: 1;
    gap: var(--spacing-md);
    min-height: 0;
}

.clash-tests-panel,
.clash-results-panel,
.clash-details-panel {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clash-tests-panel {
    width: 280px;
    flex-shrink: 0;
}

.clash-results-panel {
    flex: 1;
    min-width: 0;
}

.clash-details-panel {
    width: 320px;
    flex-shrink: 0;
}

.clash-tests-list,
.clash-results-content,
.clash-details-content {
    flex: 1;
    overflow: auto;
    padding: var(--spacing-sm);
}

.matrix-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-light);
    font-size: var(--font-size-sm);
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: var(--text-light);
    font-size: var(--font-size-sm);
}

/* ============================================
   SETTINGS SECTION
   ============================================ */

.settings-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--spacing-md);
    font-size: var(--cde-fs-md);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.settings-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

/* Settings Tabs - Similar to collaboration-tabs */
.settings-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-light);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.08);
}

.settings-tab.active {
    background: white;
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.settings-tab svg {
    width: 18px;
    height: 18px;
}

.settings-content {
    flex: 1;
    overflow: auto;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--spacing-md);
}

.settings-content .tab-panel {
    display: none;
}

.settings-content .tab-panel.active {
    display: block;
}

/* .settings-form {
    max-width: 600px;
} */

.settings-form .form-group {
    margin-bottom: var(--spacing-md);
}

.settings-form .form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.settings-form .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    transition: border-color 0.2s ease;
}

.settings-form .form-control:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.settings-form textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.settings-form .form-actions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.settings-placeholder {
    color: var(--text-light);
    font-size: var(--font-size-sm);
    padding: var(--spacing-lg);
    text-align: center;
}

.activity-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.activity-content .tab-panel {
    display: none;
    flex: 1;
    overflow: auto;
}

.activity-content .tab-panel.active {
    display: block;
}

.activity-list {
    padding: var(--spacing-sm);
}

.activity-list .activity-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.activity-list .activity-item:hover {
    background: var(--bg-light);
}

.activity-list .activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-blue-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-list .activity-icon svg {
    stroke: var(--primary-blue);
}

.activity-list .activity-content {
    flex: 1;
    min-width: 0;
}

.activity-list .activity-title {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.activity-list .activity-time {
    font-size: var(--font-size-xs);
    color: var(--text-light);
    margin-top: 2px;
}

.activity-tab-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--gray-600);
    font-size: var(--font-size-base);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.activity-tab-btn:hover {
    color: var(--primary-blue);
}

.activity-tab-btn.active {
    background: var(--bg-surface);
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.activity-feed-panel,
.activity-audit-panel {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.audit-log-panel-container {
    flex: 1;
    overflow-y: auto;
}

.members-container {
    /* Không chiếm toàn bộ chiều cao để tránh che ma trận trách nhiệm phía dưới */
    flex: 0 0 auto;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.member-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--gray-100);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.member-item:hover {
    background-color: var(--gray-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.member-avatar {
    font-size: var(--font-size-xl);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-blue-lightest);
    border-radius: 50%;
    flex-shrink: 0;
}

.member-avatar svg {
    width: 22px;
    height: 22px;
}

.member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.member-name {
    /* font-size: var(--font-size-base); */
    font-weight: 600;
    color: var(--text-primary);
}

.member-role {
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

.member-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Nút icon chung trong members section */
.member-item .btn-icon {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.member-item .btn-icon:hover { background-color: var(--color-danger-bg); color: var(--color-danger); }
.responsibility-matrix { background-color: var(--bg-surface); border-color: var(--border-color); }
.rm-subtitle { color: var(--text-secondary); }

.rm-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.rm-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.rm-subtitle {
    font-size: var(--font-size-base);
    color: var(--gray-500);
}

.rm-table-wrapper {
    overflow-x: auto;
}

.rm-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--font-size-base);
}

.rm-table th,
.rm-table td {
    border: 1px solid var(--gray-200);
    padding: 6px 8px;
    text-align: center;
}

.rm-col-role {
    text-align: left;
    min-width: 160px;
    background-color: var(--gray-50);
}

.rm-col-phase {
    min-width: 110px;
}

.rm-row:nth-child(even) {
    background-color: var(--gray-50);
}

.rm-role {
    text-align: left;
    font-weight: 500;
}

.rm-select {
    width: 100%;
    padding: 3px 4px;
    border-radius: 12px;
    border: 1px solid var(--gray-300);
    font-size: var(--font-size-xs);
    background-color: var(--gray-50);
    cursor: pointer;
}

.rm-select.rm-none {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-dark);
    border-color: var(--color-danger-light);
}

.rm-select.rm-read {
    background-color: var(--color-info-bg);
    color: var(--color-info-dark);
    border-color: var(--color-info-light);
}

.rm-select.rm-write {
    background-color: var(--color-success-bg);
    color: var(--color-success-dark);
    border-color: var(--color-success-light);
}

/* ============================================
   SETTINGS SECTION
   ============================================ */

.settings-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
}

.settings-header h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.settings-subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-light);
}

/* Settings Content */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    overflow-y: auto;
    padding-right: var(--spacing-md);
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.settings-section {
    padding: var(--spacing-md);
    background-color: var(--gray-100);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.settings-section h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
}

.settings-section h5 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
}

.settings-section p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-light);
}

.settings-section.danger-zone {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-light);
}

.settings-section.danger-zone h4 {
    color: var(--color-danger-dark);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.danger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.danger-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-danger-dark);
}

.setting-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.setting-item:last-child {
    margin-bottom: 0;
}

.setting-item label {
    min-width: 140px;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.setting-item input[type="text"],
.setting-item input[type="email"],
.setting-item input[type="tel"],
.setting-item input[type="number"],
.setting-item input[type="password"],
.setting-item input[type="checkbox"],
.setting-item select,
.setting-item textarea {
    padding: 6px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: var(--font-size-base);
    background-color: var(--bg-white);
    color: var(--text-primary);
    font-family: inherit;
}

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

.setting-item select,
.setting-item input[type="text"],
.setting-item input[type="email"],
.setting-item input[type="tel"],
.setting-item input[type="number"],
.setting-item input[type="password"],
.setting-item textarea {
    flex: 1;
    max-width: 400px;
}

.setting-item textarea {
    resize: vertical;
    font-family: inherit;
}

.api-key-container {
    display: flex;
    gap: var(--spacing-sm);
    flex: 1;
    max-width: 500px;
}

.api-key-container input {
    flex: 1;
}

.api-key-container .btn {
    flex-shrink: 0;
}

.integration-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-white);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    margin-bottom: var(--spacing-md);
    transition: all 0.2s ease;
}

.integration-item:last-child {
    margin-bottom: 0;
}

.integration-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.integration-info {
    flex: 1;
}

.integration-info h5 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.integration-info p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-light);
}

/* Settings form styles */
.settings-form .form-group {
  margin-bottom: 20px;
}

.settings-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.settings-form .form-control {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: var(--font-size-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.settings-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.settings-form .form-actions {
  /* margin-top: 24px;
  padding-top: 16px; */
  border-top: 1px solid var(--gray-200);
}

/* Zone prefix list styles */
.zone-prefix-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.zone-prefix-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.zone-prefix-item .zone-code {
  font-weight: 600;
  color: var(--color-primary);
  min-width: 40px;
}

.zone-prefix-item .zone-prefix {
  font-family: monospace;
  background: var(--color-info-bg);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.zone-prefix-item .zone-name {
  color: var(--gray-600);
  font-size: var(--font-size-base);
}

/* Form hint */
.form-hint {
  margin-top: 6px;
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.4;
}

/* Checkbox option */
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.checkbox-option span {
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: var(--text-white);
}

.btn-primary:hover {
    background-color: var(--primary-blue-light);
    box-shadow: 0 2px 8px rgba(30, 90, 150, 0.2);
}

.btn-secondary {
    background-color: var(--color-warning);
    color: var(--text-primary);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
    background-color: var(--color-warning-dark);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--text-white);
}

.btn-danger:hover {
    background-color: var(--color-danger-dark);
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
}

.btn-delete-file {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-delete-file:hover {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--color-danger);
}

.btn-open-file {
    padding: 6px 12px;
    background-color: var(--primary-blue);
    color: var(--text-white);
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    /* transition: all 0.2s ease; */
}
/* 
.btn-open-file:hover {
    background-color: var(--primary-blue-light);
} */

/* ============================================
   SCROLLABLE CONTAINERS
   ============================================ */

.scrollable {
    overflow-y: auto;
}

.scrollable::-webkit-scrollbar {
    width: 8px;
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* ============================================
   SCHEDULE 4D EDITOR (giống Bexel Manager)
   ============================================ */

.schedule-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-surface);
}

.schedule-toolbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 8px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
}

.toolbar-group-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-weight: 600;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.toolbar-divider-vertical {
    width: 1px;
    height: 20px;
    background: var(--gray-300);
    margin: 0 2px;
    flex-shrink: 0;
}

.toolbar-spacer {
    flex: 1;
    min-width: 20px;
}

.schedule-btn {
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    border: 1px solid var(--gray-300);
    border-radius: 2px;
    background: var(--bg-surface);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s;
    height: 22px;
    line-height: 1.2;
    white-space: nowrap;
    min-width: auto;
}

.schedule-btn:hover {
    background: var(--color-info-bg);
    border-color: var(--color-info-dark);
    color: var(--color-primary);
}

.schedule-btn:active {
    background: var(--color-info-bg);
    border-color: var(--color-primary);
}

.schedule-btn-primary {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-weight: 500;
}

.schedule-btn-primary:hover {
    background: var(--primary-blue-light);
    border-color: var(--primary-blue-light);
    color: white;
}

.schedule-content {
    display: grid;
    grid-template-columns: 350px 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.schedule-task-list {
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.schedule-task-header {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

.schedule-task-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

.schedule-task-table thead {
    background: var(--gray-100);
    position: sticky;
    top: 0;
    z-index: 10;
}

.schedule-task-table th {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    font-size: var(--font-size-xs);
}

.schedule-task-table .col-name {
    min-width: 180px;
}

.schedule-task-table .col-duration {
    min-width: 90px;
}

.schedule-task-table .col-start {
    min-width: 120px;
}

.schedule-task-table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    transition: background-color 0.15s;
    height: 28px;
}

.schedule-task-table tbody tr:hover {
    background-color: var(--gray-100);
}

.schedule-task-table tbody tr.task-selected {
    background-color: var(--color-primary);
    color: white;
}

.schedule-task-table tbody tr.task-selected td {
    color: white;
}

.schedule-task-table tbody tr.task-level-0 {
    font-weight: 600;
}

.schedule-task-table tbody tr.task-level-1 {
    background-color: var(--bg-surface);
}

.schedule-task-table td {
    padding: 6px 10px;
    color: var(--text-color);
    font-size: var(--font-size-xs);
}

.task-indent-0 {
    display: inline-block;
    width: 0;
}

.task-indent-1 {
    display: inline-block;
    width: 20px;
}

.schedule-gantt {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-surface);
}

.gantt-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.gantt-toolbar .schedule-btn {
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    height: 22px;
}

.gantt-select {
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-surface);
    height: 22px;
}

.gantt-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    margin-left: 8px;
}

.gantt-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 12px;
    height: 12px;
}

.gantt-chart-container {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--bg-surface);
}

.gantt-timeline {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border-color);
}

.gantt-years {
    display: flex;
    height: 28px;
    border-bottom: 1px solid var(--border-color);
}

.gantt-year {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-color);
    border-right: 1px solid var(--border-color);
}

.gantt-months {
    display: flex;
    height: 24px;
}

.gantt-month {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    border-right: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.gantt-grid {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.gantt-grid-lines {
    position: relative;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(100% / 84 - 1px),
            var(--gray-200) calc(100% / 84 - 1px),
            var(--gray-200) calc(100% / 84)
        );
}

.gantt-bars-container {
    position: relative;
    min-height: 400px;
    padding: 12px 0;
    z-index: 2;
}

.gantt-bar {
    position: absolute;
    height: 20px;
    background: var(--color-info);
    border-radius: 2px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--color-info-dark);
    box-sizing: border-box;
}

.gantt-bar:hover {
    background: var(--color-info-dark);
    border-color: var(--color-primary);
    z-index: 10;
}

.gantt-bar-main {
    top: 0;
    background: var(--color-primary);
    height: 24px;
    font-weight: 600;
    border-color: var(--primary-blue-light);
}

.gantt-bar-level-1 {
    top: 32px;
    background: var(--color-info-light);
    border-color: var(--color-info);
}

.gantt-bar-level-1:nth-of-type(2) { top: 32px; }
.gantt-bar-level-1:nth-of-type(3) { top: 60px; }
.gantt-bar-level-1:nth-of-type(4) { top: 88px; }
.gantt-bar-level-1:nth-of-type(5) { top: 116px; }
.gantt-bar-level-1:nth-of-type(6) { top: 144px; }
.gantt-bar-level-1:nth-of-type(7) { top: 172px; }
.gantt-bar-level-1:nth-of-type(8) { top: 200px; }

.gantt-bar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}


/* ============================================
   CDE - Information Container Styles
   ============================================ */

/* CDE Badge */
.cde-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

/* CDE Table Columns */
.cde-table th.col-state,
.cde-table th.col-suitability,
.cde-table th.col-discipline,
.cde-table th.col-code {
    width: 80px;
    text-align: center;
    font-size: var(--font-size-xs);
}

.cde-table td.col-state,
.cde-table td.col-suitability,
.cde-table td.col-discipline,
.cde-table td.col-code {
    text-align: center;
    font-size: var(--font-size-xs);
}

.cde-table td.col-code {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

/* CDE Detail Panel */
.cde-detail-panel {
    padding: 16px;
}

.cde-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
}

.cde-detail-row label {
    font-weight: 600;
    color: var(--gray-600);
    font-size: var(--font-size-base);
}

.cde-detail-row span {
    font-size: var(--font-size-base);
}

.cde-actions {
    display: flex;
    gap: 8px;
    /* margin-top: 16px; */
    padding-top: 16px;
    /* border-top: 1px solid #eee; */
}

/* CDE State Panel */
.cde-state-panel {
    padding: 16px;
}

.cde-current-state,
.cde-suitability-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cde-current-state label,
.cde-suitability-info label {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.cde-state-options {
    margin-bottom: 16px;
}

.cde-state-options label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-bottom: 8px;
}

.state-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.state-btn {
    padding: 6px 12px;
    background: var(--gray-200);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all 0.2s;
}

.state-btn:hover {
    background: var(--color-info);
    color: white;
    border-color: var(--color-info);
}

/* CDE Extra Columns */
.cde-extra-columns {
    display: table-cell;
    vertical-align: middle;
    padding: 8px 4px;
}

/* Workflow Badge */
.workflow-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.workflow-badge.pending { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.workflow-badge.in_progress { background: var(--color-info-bg); color: var(--color-info-dark); }
.workflow-badge.completed { background: var(--color-success-bg); color: var(--color-success-dark); }
.workflow-badge.rejected { background: var(--color-danger-bg); color: var(--color-danger-dark); }

/* Federation Badge */
.federation-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.federation-badge.pending { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.federation-badge.coordinating { background: var(--color-info-bg); color: var(--color-info-dark); }
.federation-badge.clash_detected { background: var(--color-danger-bg); color: var(--color-danger-dark); }
.federation-badge.resolved { background: var(--color-success-bg); color: var(--color-success-dark); }
.federation-badge.approved { background: var(--color-success); color: white; }

/* Clash Badge */
.clash-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.clash-badge.critical { background: var(--color-danger); color: white; }
.clash-badge.major { background: var(--color-warning); color: var(--text-primary); }
.clash-badge.minor { background: var(--color-info); color: white; }
.clash-badge.open { background: var(--color-danger); color: white; }
.clash-badge.in_progress { background: var(--color-warning); color: var(--text-primary); }
.clash-badge.resolved { background: var(--color-success); color: white; }
.clash-badge.ignored { background: var(--gray-500); color: white; }

/* ============================================
   ORGANIZATION PANEL STYLES
   ============================================ */

.organization-panel {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.organization-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.organization-panel .panel-header h3 {
    margin: 0;
    font-size: var(--font-size-xxl);
    color: var(--text-primary);
}

.organization-panel .header-actions {
    display: flex;
    gap: 10px;
}

.org-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.org-stats .stat-card {
    background: var(--gray-100);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.org-stats .stat-value {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-info);
}

.org-stats .stat-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-top: 4px;
}

.panel-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.panel-filters .search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: var(--font-size-md);
}

.panel-filters .filter-select {
    padding: var(--select-padding-y, 6px) var(--spacing-xl, 18px) var(--select-padding-y, 6px) var(--select-padding-x, 10px);
    border: 1px solid var(--select-border-color, var(--gray-200));
    border-radius: var(--select-border-radius, 6px);
    font-size: var(--select-font-size, 13px);
    min-width: 150px;
    background-color: var(--select-bg-color, var(--bg-surface));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: var(--select-transition);
    color: var(--select-text-color, var(--text-primary));
    box-sizing: border-box;
}

.panel-filters .filter-select:hover {
    border-color: var(--select-hover-border, var(--primary-blue-lighter));
}

.panel-filters .filter-select:focus {
    outline: none;
    border-color: var(--select-focus-border, var(--cde-blue));
    box-shadow: 0 0 0 3px var(--select-focus-shadow, rgba(20, 96, 184, 0.15));
}

.org-list {
    min-height: 300px;
}

.org-list .loading,
.audit-list .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--gray-600);
}

.org-list table,
.audit-table {
    width: 100%;
    border-collapse: collapse;
}

.org-list th,
.audit-table th {
    background: var(--gray-100);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--gray-200);
}

.org-list td,
.audit-table td {
    padding: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.org-list tr:hover,
.audit-table tbody tr:hover {
    background: var(--gray-100);
}

.org-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.org-type-badge.owner { background: var(--color-info-bg); color: var(--color-info-dark); }
.org-type-badge.consultant { background: var(--color-purple-bg); color: var(--color-purple-dark); }
.org-type-badge.contractor { background: var(--color-success-bg); color: var(--color-success-dark); }
.org-type-badge.subcontractor { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.org-type-badge.supplier { background: var(--color-danger-bg); color: var(--color-danger-dark); }

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.status-badge.active { background: var(--color-success-bg); color: var(--color-success-dark); }
.status-badge.inactive { background: var(--color-danger-bg); color: var(--color-danger-dark); }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-600);
}

.empty-state .empty-icon {
    font-size: var(--font-size-icon-lg);
    margin-bottom: 16px;
}

.empty-state p {
    margin-bottom: 16px;
}

/* ============================================
   AUDIT LOG PANEL STYLES
   ============================================ */

.audit-panel {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.audit-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.audit-panel .panel-header h3 {
    margin: 0;
    font-size: var(--font-size-xxl);
    color: var(--text-primary);
}

.audit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.audit-stats .stat-card {
    background: var(--gray-100);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.audit-stats .stat-value {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-success);
}

.audit-stats .stat-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-top: 4px;
}

.audit-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--gray-100);
    border-radius: 8px;
}

.audit-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-filters .filter-group label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    font-weight: 500;
}

.audit-filters .filter-input,
.audit-filters .filter-select {
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: var(--font-size-md);
    min-width: 140px;
}

.audit-filters .filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.audit-table {
    font-size: var(--font-size-base);
}

.audit-table .timestamp {
    white-space: nowrap;
    color: var(--gray-600);
}

.audit-table .user-cell {
    display: flex;
    flex-direction: column;
}

.audit-table .user-name {
    font-weight: 500;
}

.audit-table .org-name {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.audit-table .action-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: white;
}

.audit-table .entity-id {
    font-size: var(--font-size-xs);
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 3px;
}

.audit-table .hash-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--font-size-base);
}

.audit-table .hash-status.valid {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

.audit-table .hash-status.invalid {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.audit-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.audit-pagination #page-info {
    font-size: var(--font-size-md);
    color: var(--gray-600);
}

/* ============================================
   RBAC PANEL STYLES
   ============================================ */

.rbac-panel {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rbac-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.rbac-panel .panel-header h3 {
    margin: 0;
    font-size: var(--font-size-xxl);
    color: var(--text-primary);
}

.rbac-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.rbac-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--gray-200);
}

.rbac-tabs .tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.rbac-tabs .tab-btn:hover {
    color: var(--color-info);
}

.rbac-tabs .tab-btn.active {
    color: var(--color-info);
    border-bottom-color: var(--color-info);
}

.rbac-table {
    width: 100%;
    border-collapse: collapse;
}

.rbac-table th {
    background: var(--gray-100);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--gray-200);
}

.rbac-table td {
    padding: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.rbac-table tr:hover {
    background: var(--gray-100);
}

.role-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-name {
    font-weight: 500;
}

.system-badge {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.level-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.level-badge.level-system { background: var(--color-danger-bg); color: var(--color-danger-dark); }
.level-badge.level-organization { background: var(--color-info-bg); color: var(--color-info-dark); }
.level-badge.level-project { background: var(--color-success-bg); color: var(--color-success-dark); }
.level-badge.level-member { background: var(--color-purple-bg); color: var(--color-purple-dark); }

.resource-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    background: var(--gray-200);
    color: var(--text-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.permissions-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.permissions-filters .search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: var(--font-size-md);
}

.permissions-filters .filter-select {
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: var(--font-size-md);
    min-width: 150px;
}

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

.modal-content {
    background: var(--bg-surface);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-content.modal-lg {
    max-width: 800px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-xxxl);
    color: var(--gray-600);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid var(--gray-200);
}

.role-details .detail-section {
    margin-bottom: 24px;
}

.role-details .detail-section h4 {
    margin: 0 0 12px;
    font-size: var(--font-size-xl);
    color: var(--text-primary);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ==================== SKELETON LOADING ==================== */
.sk-shimmer {
    position: relative;
    overflow: hidden;
    background: #e2e8f0;
}

.sk-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(226, 232, 240, 0) 100%);
    animation: skShimmer 1.1s ease-in-out infinite;
}

@keyframes skShimmer {
    100% { transform: translateX(100%); }
}

.pd-skeleton-nav .sk-item {
    height: 34px;
    border-radius: 8px;
    margin: 6px 10px;
}

.pd-skeleton-main {
    padding: 16px;
}

.sk-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sk-toolbar-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.sk-block {
    height: 24px;
    border-radius: 8px;
}

.sk-pill {
    height: 32px;
    width: 130px;
    border-radius: 8px;
}

.sk-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
}

.sk-row {
    height: 36px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.sk-row:last-child {
    margin-bottom: 0;
}

.cde-skel-row td {
    padding: 8px 12px;
}

.cde-skel-line {
    height: 22px;
    border-radius: 7px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    font-weight: 500;
}

.detail-item span {
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.role-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.perm-tag {
    background: var(--gray-200);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: var(--font-size-base);
}

.details-json {
    background: var(--gray-100);
    padding: 16px;
    border-radius: 6px;
    font-size: var(--font-size-base);
    overflow-x: auto;
}

.error-message {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
}

/* ==================== PERMISSION SETTINGS DIALOG ==================== */

.permission-settings {
    padding: 8px 0;
}

.permission-settings .permission-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.permission-settings .permission-header p {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--gray-600);
    line-height: 1.5;
}

.permission-settings .permission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.permission-settings .permission-row:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.permission-settings .permission-row.inherited {
    background: var(--color-info-bg);
    border-color: var(--color-info-dark);
}

.permission-settings .permission-role {
    display: flex;
    align-items: center;
    gap: 8px;
}

.permission-settings .role-label {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

.permission-settings .inherited-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-info-dark);
    background: var(--color-info-bg);
    padding: 2px 8px;
    border-radius: 12px;
}

.permission-settings .permission-options {
    display: flex;
    gap: 8px;
}

.permission-settings .permission-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.permission-settings .permission-option:hover {
    border-color: var(--color-info);
    background: var(--color-info-bg);
}

.permission-settings .permission-option.selected {
    border-color: var(--color-info-dark);
    background: var(--color-info-bg);
    color: var(--color-info-dark);
    font-weight: 500;
}

.permission-settings .permission-option input {
    display: none;
}

/* ==================== CDE PERMISSIONS EDITOR DIALOG ==================== */

.cde-permission-dialog .dialog-content {
    width: min(980px, calc(100vw - 32px));
    max-height: 92vh;
}

.cde-permission-dialog .dialog-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cde-permission-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: visible;
}

.cde-permission-editor-note {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}

.cde-permission-editor-rule {
    font-size: var(--font-size-sm);
    color: var(--color-warning-dark);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    padding: 10px 12px;
}

.cde-permission-editor-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-y: scroll;
    overflow-x: hidden;
    flex: 1;
    min-height: 200px;
    max-height: 400px;
    background: var(--bg-surface);
    position: relative;
}

.cde-permission-editor-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px;
    table-layout: fixed;
}

.cde-permission-editor-table th:first-child,
.cde-permission-editor-table td:first-child {
    width: auto;
}

.cde-permission-editor-table th:nth-child(2),
.cde-permission-editor-table td:nth-child(2) {
    width: 200px;
}

.cde-permission-editor-table th,
.cde-permission-editor-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    overflow: visible;
}

.cde-permission-editor-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: var(--gray-50);
}

.cde-permission-editor-table tr:last-child td {
    border-bottom: none;
}

.cde-permission-editor-table td:last-child,
.cde-permission-editor-table th:last-child {
    width: 100px;
    text-align: right;
}

.cde-permission-editor-actions {
    display: flex;
    justify-content: flex-start;
}

.cde-perm-add-btn,
.cde-perm-remove-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cde-perm-add-btn:hover,
.cde-perm-remove-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.cde-perm-remove-btn {
    color: var(--color-danger-dark);
    min-width: 64px;
}

/* Combobox for member selection in permissions editor */
.cde-perm-combobox-wrap {
    position: relative;
    width: 100%;
}

.cde-perm-email {
    width: 100%;
}

.cde-perm-dropdown {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.cde-perm-dropdown-portal {
    position: absolute !important;
}

.cde-perm-dropdown-fixed {
    position: fixed !important;
    z-index: 10002;
}

.cde-perm-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.cde-perm-dropdown-item:hover {
    background: var(--gray-100);
}

.cde-perm-item-email {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.cde-perm-item-name {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

.cde-perm-no-results {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .cde-permission-dialog .dialog-content {
        width: calc(100vw - 16px);
        max-height: 95vh;
    }

    .cde-permission-dialog .dialog-body {
        padding: 14px 12px;
    }

    .cde-permission-editor-table {
        min-width: 480px;
    }
}

.permission-settings .permission-option .permission-label {
    font-size: var(--font-size-base);
}

.permission-settings .permission-inherit-toggle {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.permission-settings .inherit-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.permission-settings .inherit-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-info-dark);
    cursor: pointer;
}

/* ==================== NAMING CONVENTION OPTIONS ==================== */

.naming-option-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.naming-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-surface);
}

.naming-option:hover {
    border-color: var(--color-info);
    background: var(--gray-50);
}

.naming-option.selected {
    border-color: var(--color-info);
    background: var(--color-info-bg);
}

.naming-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--color-info-dark);
}

.naming-option-content {
    flex: 1;
}

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

.naming-option-desc {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: 1.4;
}

.iso19650-hint {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--color-warning-bg);
    border-radius: 6px;
    border-left: 3px solid var(--color-warning);
}

.iso19650-hint small {
    font-size: var(--font-size-base);
    color: var(--color-warning-dark);
}

/* ==================== SETTINGS SECTION STYLES ==================== */

.settings-section {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 24px;
    margin: 16px;
}

.settings-header h3 {
    font-size: var(--font-size-xxl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gray-200);
}

/* .settings-content .tab-panel {
    padding: 16px 0;
} */

.settings-section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.settings-description {
    font-size: var(--font-size-md);
    color: var(--gray-600);
    margin-bottom: 16px;
}

.settings-subsection {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: 8px;
}

.settings-subsection h5 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.naming-settings-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 4px;
}

.settings-subtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-subtab:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.settings-subtab.active {
    border-color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary-blue);
}

.settings-card-block {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
    min-width: 0;
}

.naming-subpanel {
    display: none;
}

.naming-subpanel.active {
    display: block;
}

.settings-card-header {
    margin-bottom: 18px;
}

.settings-card-header .settings-section-title {
    margin-bottom: 10px;
}

.settings-card-header .settings-description {
    margin-bottom: 0;
}

.naming-settings-card .form-actions {
    margin-top: 20px;
}

.topic-numbering-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.summary-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: 4px;
}

.topic-numbering-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--bg-surface);
}

.topic-numbering-toolbar-copy {
    display: grid;
    gap: 4px;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

.topic-numbering-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* ==================== TOPIC NUMBERING RULES ==================== */

.topic-numbering-state {
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: var(--font-size-md);
    line-height: 1.45;
}

.topic-numbering-loading {
    background: var(--bg-surface);
    border: 1px dashed var(--gray-300);
    color: var(--gray-600);
}

.topic-numbering-readonly {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.topic-numbering-types {
    display: grid;
    gap: 16px;
}

.topic-type-section {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 16px;
}

.topic-type-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.topic-type-header {
    margin: 0;
}

/* ── Topic type badge + label ──────────────────────────────── */
.topic-type-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--cde-fs-md);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.topic-type-blue  { background: #2563eb; color: #fff; }
.topic-type-green { background: #16a34a; color: #fff; }
.topic-type-purple { background: #7c3aed; color: #fff; }
.topic-type-orange { background: #ea580c; color: #fff; }

.topic-type-count {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* ── Stream card ─────────────────────────────────────────── */
.stream-card {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.stream-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.stream-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
}

.stream-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.stream-card-body {
    padding: 10px 14px;
    display: grid;
    gap: 6px;
}

/* ── Format → Preview row ────────────────────────────────── */
.stream-format-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.stream-format-code,
.stream-preview-code {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.stream-format-code {
    background: var(--gray-100);
    color: var(--text-primary);
    border: 1px solid var(--gray-200);
}

.stream-preview-code {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.stream-arrow {
    color: var(--gray-400);
    flex-shrink: 0;
}

.stream-seq-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    white-space: nowrap;
}

.stream-seq-pill strong {
    color: var(--text-primary);
}

/* ── Stream metadata ─────────────────────────────────────── */
.stream-meta {
    display: flex;
    gap: 12px;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* ── Action buttons ──────────────────────────────────────── */
.stream-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.stream-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.stream-action-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--text-primary);
}

.stream-action-btn.danger {
    color: #dc2626;
    border-color: #fecaca;
}

.stream-action-btn.danger:hover {
    background: #fff1f2;
    border-color: #fca5a5;
}

/* ── Naming Builder (nm2-* shared, used by submittal naming in Settings) ───── */
.nm2-preview-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.nm2-preview-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    margin-bottom: var(--spacing-sm);
}
.nm2-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
}
/* Chip: dùng 1 màu neutral, phân biệt bằng border thay vì màu sắc */
.nm2-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    background: var(--gray-700);
    color: #fff;
    font-size: var(--cde-fs-md);
    font-weight: var(--font-weight-medium);
}
/* Sequence chip nổi bật hơn 1 chút */
.nm2-chip.chip-sequence {
    background: var(--color-primary);
}
.nm2-chip-sep { color: var(--gray-400); font-size: var(--font-size-base); padding: 0 1px; }

.nm2-sep-section { margin-bottom: var(--spacing-lg); }
.nm2-sep-label { font-size: var(--cde-fs-md); font-weight: var(--font-weight-medium); color: var(--gray-600); margin-bottom: var(--spacing-xs); }
.nm2-sep-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.nm2-sep-pill {
    height: 28px;
    min-width: 32px;
    padding: 0 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-size: var(--cde-fs-md);
    font-family: var(--font-family-mono);
    color: var(--gray-600);
    cursor: pointer;
    transition: all .15s;
}
.nm2-sep-pill.active,
.nm2-sep-pill:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }

.nm2-fields-section { margin-bottom: var(--spacing-lg); }
.nm2-fields-label {
    font-size: var(--cde-fs-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
    display: flex;
    justify-content: space-between;
}
.nm2-field-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.nm2-field-table th {
    background: var(--gray-100);
    font-size: var(--cde-fs-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    padding: 7px 8px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}
/* ── Field list (div-based, replaces table) ──────────────────────────────── */
.tn-field-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tn-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--bg-surface);
    font-size: var(--cde-fs-md);
}
.tn-field-row:last-child { border-bottom: none; }
.tn-field-row.drag-over { background: var(--color-primary-bg); }
.tn-field-row.dragging { opacity: .4; }

/* control area grows to fill */
.tn-field-control {
    flex: 1;
    min-width: 0;
    display: flex;
}
.tn-field-control .form-select-sm,
.tn-field-control .form-input-sm { width: 100%; }

/* action buttons */
.tn-field-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Fixed token (year/month) — read-only pill */
.tn-fixed-token {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    font-family: var(--font-family-mono);
    font-size: var(--cde-fs-md);
    color: var(--gray-500);
}

/* Drag handle */
.drag-handle {
    color: var(--gray-400);
    font-size: var(--cde-fs-md);
    cursor: grab;
    user-select: none;
    padding: 0 2px;
}
.drag-handle:active { cursor: grabbing; }
/* Type label — text only, no colored badge */
.nm2-type-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}
/* Keep nm2-type-badge for backward compat but override to neutral */
.nm2-type-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: var(--cde-fs-md);
    font-weight: var(--font-weight-medium);
    background: var(--gray-200);
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
}
.nm2-move-btns { display: flex; flex-direction: column; gap: 1px; }
.nm2-move-btn {
    width: 20px;
    height: 15px;
    border: 1px solid var(--gray-200);
    border-radius: 3px;
    background: var(--bg-surface);
    font-size: var(--font-size-4xs);
    color: var(--gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.nm2-move-btn:hover:not(:disabled) { background: var(--gray-100); color: var(--gray-700); }
.nm2-move-btn:disabled { opacity: .35; cursor: not-allowed; }
.nm2-remove-btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--gray-400);
    font-size: var(--font-size-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nm2-remove-btn:hover { background: var(--color-danger-bg); color: var(--color-danger-dark); }
.nm2-examples-section {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
}
.nm2-examples-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    margin-bottom: var(--spacing-xs);
}
.nm2-examples-list { display: flex; flex-direction: column; gap: 3px; }
.snf-example-code,
.nm2-example-code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ── Topic Numbering 2-column compact layout ──────────────────────────────── */
.tn-builder {
    padding: 0;
}

.tn-2col {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-xl);
    align-items: start;
}

.tn-col-left {
    min-width: 0;
}

.tn-col-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.tn-col-label {
    font-size: var(--cde-fs-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tn-field-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--gray-400);
}

/* Add row inline under table */
.tn-add-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.tn-add-row .form-select-sm { flex: 1; }

.tn-add-btn-inline {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--gray-600);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tn-add-btn-inline:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Right panel sub-elements */
.tn-preview-compact {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}
.tn-preview-compact .nm2-chips-row { flex: 1; min-height: 26px; }

.tn-sep-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.tn-sep-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    white-space: nowrap;
}
.tn-sep-row .nm2-sep-pills { gap: 4px; }
.tn-sep-row .nm2-sep-pill { height: 28px; min-width: 30px; padding: 0 8px; font-size: var(--cde-fs-md); }

/* Examples in right panel — compact */
.tn-examples-compact {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tn-examples-compact .snf-example-code {
    font-size: var(--font-size-sm);
    padding: 2px 6px;
}

/* Save row */
.tn-save-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.tn-save-row .form-input-sm { flex: 1; min-width: 0; }
.tn-save-row .btn-primary { flex-shrink: 0; white-space: nowrap; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--gray-600);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.btn-ghost:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-800); }

/* Streams compact inline rows */
.tn-streams-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tn-panel-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    margin-bottom: 4px;
}

.tn-stream-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    transition: box-shadow var(--transition-fast);
}
.tn-stream-row:hover { box-shadow: var(--shadow-sm); }

.tn-stream-row-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    flex-wrap: wrap;
}

.stream-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stream-status-dot.is-enabled { background: var(--color-success); }
.stream-status-dot.is-disabled { background: var(--gray-300); }

.tn-stream-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
}

.tn-stream-row-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.tn-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.tn-row-btn:hover { background: var(--gray-100); border-color: var(--gray-300); }
.tn-row-btn.danger { color: var(--color-danger-dark); border-color: var(--color-danger-border); }
.tn-row-btn.danger:hover { background: var(--color-danger-bg); }

.tn-streams-empty {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Panel label in sep section is same style, re-use via tn-sep-label */
.tn-panel-label { margin-bottom: var(--spacing-xs); }

/* Responsive: stack to 1 col on narrow panels */
@media (max-width: 700px) {
    .tn-2col { grid-template-columns: 1fr; }
}

/* ── Topic Numbering Type Tab Switcher ───────────────────────────────────────── */
.tn-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--gray-200, #e2e8f0);
    padding-bottom: 0;
}

.tn-type-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    font-size: var(--cde-fs-md);
    font-weight: 500;
    color: var(--gray-500);
    transition: color .15s, border-color .15s, background .15s;
}

.tn-type-tab:hover {
    background: var(--gray-50);
    color: var(--gray-800);
}

.tn-type-tab.active {
    color: var(--gray-900);
    border-bottom-color: var(--color-primary);
    background: var(--gray-50);
}

/* Active tab: badge trong tab active trông sáng hơn (opacity đầy đủ) */
.tn-type-tab .topic-type-badge { opacity: 0.55; }
.tn-type-tab.active .topic-type-badge,
.tn-type-tab:hover .topic-type-badge { opacity: 1; }

.tn-panels { position: relative; }

.tn-type-panel {
    display: none;
}

.tn-type-panel.active {
    display: block;
}

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

.streams-list {
    display: grid;
    gap: 12px;
}

.stream-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

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

.stream-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.stream-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
}

.stream-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.stream-status-badge.is-enabled {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.stream-status-badge.is-disabled {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.stream-format,
.stream-preview,
.stream-sequence,
.stream-metadata {
    font-size: var(--font-size-base);
    color: var(--gray-700);
}

.stream-format,
.stream-preview,
.stream-sequence {
    margin-bottom: 6px;
}

.stream-format code,
.stream-preview code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--gray-100);
    color: var(--text-primary);
}

.stream-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

.stream-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.stream-actions button {
    white-space: nowrap;
}

.no-streams-message {
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--gray-50);
    color: var(--gray-600);
    border: 1px dashed var(--gray-300);
}

@media (max-width: 900px) {
    .topic-numbering-summary {
        grid-template-columns: 1fr;
    }

    .topic-numbering-toolbar {
        flex-direction: column;
    }

    .topic-numbering-toolbar-actions {
        justify-content: flex-start;
    }

    .topic-type-header-row,
    .stream-row,
    .stream-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .stream-actions {
        justify-content: flex-start;
    }

    .stream-format-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== DATA FIELDS TABLE ==================== */

.data-fields-table {
    margin: 16px 0;
}

.fields-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.fields-table th {
    background: var(--gray-50);
    padding: 12px 16px;
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-200);
}

.fields-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.fields-table tr:hover {
    background: var(--gray-50);
}

.fields-table .col-visible {
    width: 80px;
    text-align: center;
}

.fields-table .col-field {
    width: 50%;
}

.fields-table .col-required {
    width: 100px;
    text-align: center;
}

.fields-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ==================== SIMPLE DATA FIELDS UI ==================== */

.data-fields-simple {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.data-fields-header {
    display: grid;
    grid-template-columns: 60px 1fr 120px 50px;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-fields-list {
    max-height: 400px;
    overflow-y: auto;
}

.data-field-row {
    display: grid;
    grid-template-columns: 60px 1fr 120px 50px;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    align-items: center;
    transition: background 0.15s ease;
}

.data-field-row:hover {
    background: var(--gray-50);
}

.data-field-row.active {
    background: var(--color-info-bg);
}

.data-field-row .df-col-check {
    text-align: center;
}

.data-field-row .df-col-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-info);
}

.data-field-row .df-col-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-field-row .field-label-text {
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.data-field-row .badge-required {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    border-radius: 4px;
    font-weight: 500;
}

.data-field-row .df-col-category {
    text-align: left;
}

.data-field-row .category-tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.category-tag.category-basic { background: var(--color-info-bg); color: var(--color-info-dark); }
.category-tag.category-iso19650 { background: var(--color-success-bg); color: var(--color-success-dark); }
.category-tag.category-audit { background: var(--color-danger-bg); color: var(--color-danger-dark); }
.category-tag.category-versioning { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.category-tag.category-checkout { background: var(--color-info-bg); color: var(--color-info-dark); }
.category-tag.category-classification { background: var(--color-purple-bg); color: var(--color-purple-dark); }
.category-tag.category-workflow { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.category-tag.category-properties { background: var(--gray-200); color: var(--text-primary); }

.data-field-row .df-col-actions {
    text-align: center;
}

.btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-sm:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.data-fields-simple .btn-add-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px;
    padding: 10px 16px;
    font-size: var(--font-size-md);
    accent-color: var(--color-info);
}

.badge-required {
    color: var(--color-success);
    font-weight: 600;
}

.badge-optional {
    color: var(--gray-400);
}

/* ==================== ATTRIBUTES TABLE ==================== */

.attributes-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    margin-bottom: 12px;
}

.attributes-table th {
    background: var(--gray-50);
    padding: 12px;
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-200);
}

.attributes-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.attributes-table .attr-code-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: var(--font-size-base);
    font-family: monospace;
}

.btn-remove-attr {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-remove-attr:hover {
    background: var(--color-danger-bg);
}

/* ==================== NAMING PREVIEW BOX ==================== */

.naming-preview-box {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.naming-preview-box code {
    display: block;
    font-size: var(--font-size-xl);
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-success-dark);
    margin-bottom: 8px;
}

.naming-preview-box .preview-example {
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

/* ==================== NAMING ATTRIBUTES LIST ==================== */

.attributes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.attr-item {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
}

.attr-item .attr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
}

.attr-item .attr-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.attr-item .attr-code {
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-base);
    font-family: monospace;
    color: var(--gray-600);
}

.attr-item .attr-config {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.attr-item .attr-values {
    flex: 1;
    min-width: 200px;
}

.attr-item .attr-values label {
    display: block;
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-bottom: 6px;
}

.attr-item .attr-values-select {
    width: 100%;
    max-width: 300px;
}

.attr-item .attr-auto {
    color: var(--gray-400);
    font-style: italic;
    font-size: var(--font-size-base);
}

/* ==================== ROLES LIST ==================== */

.roles-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.role-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.role-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
}

.role-desc {
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.role-permissions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.permission-badge {
    padding: 4px 8px;
    background: var(--color-info-bg);
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-info-dark);
}

/* ==================== DATA FIELDS CATEGORIES ==================== */

.data-fields-categories {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-category {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface);
}

.field-category .category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--gray-50);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    border-bottom: 1px solid var(--gray-200);
    transition: background 0.2s;
}

.field-category .category-header:hover {
    background: var(--gray-100);
}

.field-category .category-header .toggle-icon {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    transition: transform 0.2s;
}

.field-category.collapsed .category-header .toggle-icon {
    transform: rotate(-90deg);
}

.field-category .category-fields {
    padding: 12px;
}

.field-category.collapsed .category-fields {
    display: none;
}

/* ==================== RBAC MATRIX ==================== */

.rbac-matrix-wrapper {
    overflow-x: auto;
    margin: 16px 0;
}

.rbac-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

.rbac-matrix-table th,
.rbac-matrix-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.rbac-matrix-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rbac-matrix-table .col-role {
    min-width: 180px;
}

.rbac-matrix-table .col-party {
    min-width: 80px;
}

.rbac-matrix-table .col-zone {
    min-width: 90px;
    text-align: center;
}

.role-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.role-name-cell .role-name {
    font-weight: 600;
    color: var(--text-primary);
}

.role-name-cell .role-desc {
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.party-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.party-badge.party-client {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
}

.party-badge.party-consultant {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

.party-badge.party-contractor {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.party-badge.party-external {
    background: var(--gray-100);
    color: var(--gray-600);
}

.zone-perm-select {
    padding: 6px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--bg-surface);
    font-size: var(--font-size-base);
    cursor: pointer;
    min-width: 80px;
}

.zone-perm-select:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Permission Legend */
.permission-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.perm-full { background: var(--color-success); }
.perm-write { background: var(--color-info); }
.perm-read { background: var(--color-warning); }
.perm-none { background: var(--gray-200); }

/* Permission Badges */
.perm-badge-full { background: var(--color-success); color: white; }
.perm-badge-write { background: var(--color-info); color: white; }
.perm-badge-read { background: var(--color-warning); color: white; }
.perm-badge-delete { background: var(--color-danger); color: white; }
.perm-badge-manage { background: var(--color-primary); color: white; }
.perm-badge-approve { background: var(--color-info); color: white; }
.perm-badge-publish { background: var(--color-pink); color: white; }
.perm-badge-comment { background: var(--color-success); color: white; }
.perm-badge-settings { background: var(--gray-600); color: white; }

/* ==================== INTEGRATION STATUS ==================== */

.integration-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-400);
}

.status-indicator.connected {
    background: var(--color-success);
}

.api-key-container {
    display: flex;
    gap: 8px;
}

.api-key-container input {
    flex: 1;
}

/* ==================== TOAST NOTIFICATION ==================== */

.toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: var(--font-size-md);
    font-weight: 500;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

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

.toast-notification.error {
    /* background: var(--color-danger); */
    color: white;
}

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

/* ==================== VERSION MANAGEMENT ==================== */

/* ============================================
   VERSION MANAGEMENT - ISO 19650 CDE GITFLOW
   ============================================ */

.version-management {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    min-height: calc(100vh - 120px);
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gray-200);
    background: var(--bg-surface);
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.version-header h2 {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.version-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.version-view-toggle {
    display: flex;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--gray-200);
}

.view-toggle-btn.active {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* ============================================
   SIMPLE RULE FORMAT BUILDER STYLES
   ============================================ */

.builder-field-wrapper {
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.simple-rule-builder {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.builder-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pattern-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-family: 'Monaco', 'Menlo', monospace;
    min-width: 200px;
}

.pattern-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.btn-variables {
    padding: 8px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    color: var(--text-color);
}

.btn-variables:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.preview-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-samples {
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: var(--font-size-sm);
    color: var(--primary-blue);
    font-weight: 500;
    line-height: 1.6;
    min-height: 50px;
}

.variables-panel {
    padding: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 4px;
}

.variables-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.var-item {
    display: flex;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.var-item code {
    min-width: 80px;
    padding: 2px 6px;
    background: var(--primary-blue);
    color: white;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 500;
    font-size: var(--font-size-xs);
}

.error-message {
    padding: 8px 12px;
    background: #ffebee;
    border: 1px solid #ef5350;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    color: #c62828;
    font-weight: 500;
}

.var-protected {
    background: rgba(37, 99, 235, 0.05);
    border-left: 3px solid var(--primary-blue);
    padding-left: 10px;
}

.var-custom {
    background: rgba(76, 175, 80, 0.05);
    border-left: 3px solid #4caf50;
    padding-left: 10px;
}

.variables-note {
    padding: 8px 12px;
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    color: #e65100;
    margin-top: 8px;
    font-weight: 500;
}

.topic-no-rules-dialog .dialog-content {
    max-width: 400px;
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.topic-no-rules-dialog .dialog-header h3 {
    margin: 0 0 16px 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
}

.topic-no-rules-dialog .dialog-body {
    margin-bottom: 20px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.topic-no-rules-dialog .dialog-body p {
    margin: 8px 0;
}

.topic-no-rules-dialog .dialog-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.topic-no-rules-dialog .btn {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

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

.version-actions {
    display: flex;
    gap: 12px;
}

/* Gitflow Timeline */
.version-gitflow {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.gitflow-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-100);
    flex-wrap: wrap;
    background: var(--gray-50);
    padding: 16px 20px;
    border-radius: 10px;
}

.legend-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    color: var(--gray-600);
    padding: 6px 12px;
    background: var(--bg-surface);
    border-radius: 20px;
    border: 1px solid var(--gray-200);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px white, 0 2px 4px rgba(0,0,0,0.1);
}

.legend-separator {
    color: var(--gray-300);
    font-size: var(--font-size-xl);
    margin: 0 8px;
}

.gitflow-timeline {
    min-height: 200px;
}

.gitflow-empty {
    text-align: center;
    padding: 40px;
    color: var(--gray-400);
    font-size: var(--font-size-md);
}

.gitflow-container {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    overflow-x: auto;
    padding: 20px 0;
}

.gitflow-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.branch-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.branch-icon {
    font-size: var(--font-size-md);
}

.branch-line {
    width: 2px;
    height: 100%;
    min-height: 150px;
    background: linear-gradient(to bottom, var(--gray-200), var(--gray-300));
    border-radius: 1px;
}

.version-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.version-node:hover {
    transform: scale(1.05);
}

.node-connector {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 40px;
    height: 2px;
    background: var(--gray-200);
}

.version-node:first-child .node-connector {
    display: none;
}

.node-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s;
}

.version-node:hover .node-circle {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.version-node.current .node-circle {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.node-info {
    margin-top: 12px;
    text-align: center;
    min-width: 100px;
}

.node-version {
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--text-color);
}

.node-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: 2px;
}

.node-zone {
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

.node-date {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    margin-top: 4px;
}

.node-badge-current {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--color-info);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Version List */
.version-list-container {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.version-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.version-list-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.version-filters {
    display: flex;
    gap: 12px;
}

.version-filters .gantt-select {
    padding: 8px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--bg-surface);
    font-size: var(--font-size-base);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.version-filters .gantt-select:hover {
    border-color: var(--color-info);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.version-list {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    max-height: 700px;
    overflow-y: auto;
    background: var(--gray-50);
}

.version-card {
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.version-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--state-color, var(--gray-600));
}

.version-card:hover {
    border-color: var(--color-info);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.version-card.highlight {
    animation: cardHighlight 0.5s ease;
}

@keyframes cardHighlight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); border-color: var(--color-info); }
}

.version-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-bottom: 1px solid var(--gray-100);
}

.version-number {
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.version-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 24px;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.version-current-badge {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5); }
}

.version-card-body {
    padding: 20px;
}

.version-file {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: 12px;
    word-break: break-all;
    padding: 10px 14px;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 3px solid var(--color-info);
}

.version-description {
    font-size: var(--font-size-md);
    color: var(--gray-500);
    margin-bottom: 16px;
    line-height: 1.6;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
}

.version-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--font-size-base);
    color: var(--gray-500);
    flex-wrap: wrap;
}

.version-zone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--gray-200);
}

.zone-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px white, 0 2px 4px rgba(0,0,0,0.1);
}

.version-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-surface);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.2s;
    border: 1px solid var(--gray-200);
}

.btn-icon:hover {
    background: var(--gray-100);
    color: var(--color-info);
    border-color: var(--color-info);
}

/* Advance Dialog */
.advance-dialog .state-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.state-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-size-base);
    color: var(--text-color);
}

.state-option:hover {
    border-color: var(--state-color, var(--color-info));
    background: var(--gray-50);
}

.state-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* New Version Dialog */
.new-version-dialog .form-group {
    margin-bottom: 16px;
}

.new-version-dialog label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 6px;
}

.new-version-dialog .form-input,
.new-version-dialog .form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: var(--font-size-base);
    transition: border-color 0.2s;
}

.new-version-dialog .form-input:focus,
.new-version-dialog .form-select:focus {
    outline: none;
    border-color: var(--color-info);
}

/* Responsive */
@media (max-width: 768px) {
    .version-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .version-filters {
        flex-direction: column;
        width: 100%;
    }

    .gitflow-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .gitflow-branch {
        flex-direction: row;
        min-width: auto;
    }

    .branch-line {
        width: auto;
        height: 2px;
        min-width: 100px;
    }

    .version-list {
        grid-template-columns: 1fr;
    }
}

/* Version View Toggle */
.version-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.version-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--gray-100);
    padding: 4px;
    border-radius: 8px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--gray-600);
    transition: all 0.2s;
}

.view-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
}

.view-toggle-btn.active {
    background: var(--bg-surface);
    color: var(--color-info);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Version Views */
.version-view {
    display: none;
}

.version-view.active {
    display: block;
}

/* Legend Separator */
.legend-separator {
    color: var(--gray-300);
    margin: 0 8px;
}

/* File Label in Gitflow */
.file-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-bottom: 8px;
    white-space: nowrap;
    font-weight: 500;
}

/* Per-File View */
.perfile-header {
    margin-bottom: 20px;
}

.perfile-header select {
    min-width: 300px;
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: var(--font-size-md);
    background: var(--bg-surface);
}

.perfile-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-400);
    font-size: var(--font-size-md);
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.perfile-detail {
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.perfile-info {
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.perfile-info h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 16px 0;
    font-family: monospace;
}

.perfile-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    font-weight: 500;
}

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

.perfile-timeline {
    padding: 20px;
}

.perfile-timeline h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 16px 0;
}

.timeline-vertical {
    display: flex;
    flex-direction: column;
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-surface);
    z-index: 1;
}

.timeline-content {
    flex: 1;
    padding-top: 2px;
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.timeline-version {
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--text-color);
}

.timeline-state {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.timeline-current {
    background: var(--color-info);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.timeline-description {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-bottom: 6px;
}

.timeline-meta {
    display: flex;
    gap: 16px;
    font-size: var(--font-size-xs);
    color: var(--gray-400);
}

/* Compare View */
.compare-header {
    margin-bottom: 20px;
}

.compare-selectors {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.compare-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compare-selector label {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--gray-600);
}

.compare-selector select {
    min-width: 250px;
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: var(--font-size-base);
    background: var(--bg-surface);
}

.compare-placeholder {
    text-align: center;
    padding: 80px 20px;
    color: var(--gray-400);
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.compare-placeholder svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.compare-placeholder p {
    font-size: var(--font-size-md);
}

.compare-result {
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.compare-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 24px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.compare-version {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.compare-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    text-transform: uppercase;
    font-weight: 500;
}

.compare-version-num {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-color);
}

.compare-state {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.compare-arrow {
    font-size: var(--font-size-xxxl);
    color: var(--gray-300);
}

.compare-details {
    padding: 20px;
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

.compare-table th,
.compare-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.compare-table th {
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-100);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.compare-table td:first-child {
    font-weight: 500;
    color: var(--gray-600);
    width: 150px;
}

.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
    font-family: monospace;
    font-size: var(--font-size-base);
}

.compare-table td:last-child {
    text-align: center;
    width: 80px;
}

.compare-table .changed {
    color: var(--color-danger);
    font-weight: 600;
}

.compare-table .unchanged {
    color: var(--gray-400);
}

/* Version Detail Dialog */
.version-detail-dialog .detail-section {
    margin-bottom: 24px;
}

.version-detail-dialog .detail-section:last-child {
    margin-bottom: 0;
}

.version-detail-dialog h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-weight: 500;
    text-transform: uppercase;
}

.detail-item span {
    font-size: var(--font-size-base);
    color: var(--text-color);
}

.version-detail-dialog p {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Approval Chain */
.version-approval-chain {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.approval-chain-label {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-weight: 500;
    margin-bottom: 8px;
}

.approval-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    padding: 4px 0;
}

.approval-action {
    font-weight: 500;
    color: var(--color-info);
}

.approval-user {
    color: var(--text-color);
}

.approval-date {
    color: var(--gray-400);
}

/* Approval Timeline in Detail */
.approval-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.approval-entry {
    display: flex;
    gap: 12px;
}

.approval-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: 700;
    flex-shrink: 0;
}

.approval-info {
    flex: 1;
}

.approval-info .approval-action {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-success);
    display: block;
    margin-bottom: 2px;
}

.approval-info .approval-user {
    font-size: var(--font-size-base);
    color: var(--text-color);
    display: block;
}

.approval-info .approval-date {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    display: block;
    margin-top: 2px;
}

.approval-comment {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    font-style: italic;
    margin-top: 4px;
}

/* Additional Responsive */
@media (max-width: 768px) {
    .version-header-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .version-view-toggle {
        width: 100%;
    }

    .view-toggle-btn {
        flex: 1;
        justify-content: center;
    }

    .compare-selectors {
        flex-direction: column;
    }

    .compare-selector select {
        width: 100%;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== CLASH HISTORY ==================== */

.clash-history-section {
  margin-top: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}

.clash-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
}

.clash-history-header:hover { background: var(--gray-100); }

.clash-history-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.clash-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clash-history-chevron {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
}

.clash-history-body {
  overflow-y: auto;
  max-height: 420px;
}

.clash-history-body.collapsed { display: none; }

.clash-history-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
}

.clash-history-list {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Clash badge — severity colours (reused in matrix too) */
.clash-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.clash-badge.no-clash      { background: #f0fdf4; color: #166534; }
.clash-badge.has-clash-low    { background: #fef9c3; color: #854d0e; }
.clash-badge.has-clash-medium { background: #fed7aa; color: #9a3412; }
.clash-badge.has-clash-high   { background: #fecaca; color: #991b1b; }

/* ── Toolbar (search + filter + group toggle) ─────────────── */
.ch-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ch-search {
  flex: 1;
  min-width: 100px;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.ch-search:focus { outline: none; border-color: var(--color-primary); }

.ch-sev-filter {
  height: 26px;
  padding: 0 6px;
  font-size: 11px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
}

.ch-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ch-delete-selected {
  margin-left: auto;
  white-space: nowrap;
}
.ch-group-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ch-group-toggle.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Table ────────────────────────────────────────────────── */
.ch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.ch-table thead {
  position: sticky;
  top: 39px;
  z-index: 1;
  background: var(--gray-50);
}

.ch-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.ch-sortable { cursor: pointer; user-select: none; }
.ch-sortable:hover { color: var(--color-primary); }
.ch-sort-hint { opacity: 0.35; }

.ch-th-checkbox { width: 32px; text-align: center; }
.ch-th-model  { width: auto; }
.ch-th-count  { width: 55px; text-align: center; }
.ch-th-time   { width: 110px; }
.ch-th-actions{ width: 115px; text-align: right; }

/* Data rows */
.ch-row td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  line-height: 1.4;
}
.ch-row:last-child td { border-bottom: none; }
.ch-row:hover td { background: var(--gray-50); }
.ch-row-indented td:first-child { padding-left: 24px; }

/* Group header row */
.ch-group-row td { padding: 0; border-bottom: none; }
.ch-group-label {
  display: block;
  padding: 4px 10px 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.ch-group-count {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Model cell */
.ch-td-model {
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.3;
}
.ch-model-name {
  display: inline;
  color: var(--text-primary);
}
.ch-vs {
  display: inline;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 2px;
}

.ch-td-checkbox {
  text-align: center;
  vertical-align: middle;
}

.ch-td-checkbox input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

.ch-td-count { text-align: center; }

.ch-td-time {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ch-td-actions {
  text-align: right;
  white-space: nowrap;
}

.ch-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  padding: 14px 0 !important;
}

/* Action buttons */
.btn-history-view, .ch-btn-view {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-history-view:hover, .ch-btn-view:hover {
  background: var(--color-primary-lightest, #eff6ff);
  border-color: var(--color-primary);
}

.ch-btn-bcf {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.15s;
}
.ch-btn-bcf:hover {
  border-color: #10b981;
  color: #059669;
  background: #f0fdf4;
}
.ch-btn-bcf:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn.btn-xs {
  font-size: 11px;
  padding: 3px 8px;
  min-height: unset;
  border-radius: 4px;
}

/* ==================== P3: BCF RIGHT PANEL SECTIONS ==================== */

/* Collapsible section wrapper */
.bcf-section-collapsible {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--gray-50);
  user-select: none;
}

.section-toggle:hover {
  background: var(--gray-100);
}

.section-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

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

.section-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* BCF Header section */
.bcf-header-section {
  border: none;
  padding: 0;
  margin-bottom: 8px;
}

.bcf-header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bcf-type-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bcf-select-inline {
  font-size: var(--font-size-sm);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* Status badge */
.bcf-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}
.status-open           { background: #dbeafe; color: #1d4ed8; }
.status-in-progress    { background: #fef3c7; color: #92400e; }
.status-resolved       { background: #d1fae5; color: #065f46; }
.status-closed         { background: var(--gray-100); color: var(--text-muted); }

/* Priority badge */
.bcf-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.priority-critical { background: #fee2e2; color: #991b1b; }
.priority-major    { background: #ffedd5; color: #9a3412; }
.priority-normal   { background: #e0f2fe; color: #0369a1; }
.priority-minor    { background: var(--gray-100); color: var(--text-muted); }

.bcf-meta-row {
  display: flex;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.bcf-index-label { font-weight: 600; }
.bcf-guid-label { display: flex; align-items: center; gap: 4px; }

.btn-copy-guid {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
}
.btn-copy-guid:hover { color: var(--color-primary); }

.bcf-status-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.status-transition-btn {
  font-size: var(--font-size-sm);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}
.status-transition-btn.btn-info    { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.status-transition-btn.btn-success { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.status-transition-btn.btn-primary { background: var(--color-primary); color: #fff; }
.status-transition-btn.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-color: var(--gray-300);
}
.status-transition-btn:hover { filter: brightness(0.93); }

.bcf-priority-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Element detail rows */
.element-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  margin-top: 3px;
}
.edr-key {
  flex-shrink: 0;
  width: 64px;
  color: var(--text-muted);
  font-size: 11px;
}
.edr-val {
  flex: 1;
  color: var(--text-primary);
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ifc-guid-val { font-family: monospace; font-size: 11px; }
.ifc-guid-missing { color: var(--text-muted); font-style: italic; }
.guid-missing { color: #f59e0b; cursor: help; }

/* Location row */
.location-row {
  display: flex;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: 4px 0;
}

/* Labels */
.labels-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
.bcf-label-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border-radius: 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.label-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.label-remove-btn:hover { color: var(--color-danger); }
.label-input-row {
  display: flex;
  gap: 6px;
}

/* Viewpoints */
.viewpoints-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.viewpoint-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  background: var(--gray-50);
}
.vp-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 3px;
}
.vp-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-200);
  color: var(--text-muted);
}
.vp-index { font-size: 11px; color: var(--text-muted); }
.vp-restore-btn { width: 100%; }
.empty-hint { font-size: var(--font-size-sm); color: var(--text-muted); font-style: italic; }

/* Related topics */
.related-topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: var(--font-size-sm);
}
.related-topic-guid { font-family: monospace; }
.btn-remove-related {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
}
.btn-remove-related:hover { color: var(--color-danger); }

/* Document references */
.doc-refs-list { display: flex; flex-direction: column; gap: 4px; }
.doc-ref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  gap: 8px;
}
.doc-ref-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-primary); }
.btn-remove-doc-ref {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.btn-remove-doc-ref:hover { color: var(--color-danger); }
.doc-ref-input-row { display: flex; gap: 6px; }

/* Description textarea */
.detail-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
}
.detail-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* detail-field helper */
.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-field.half { flex: 1; min-width: 0; }

/* btn-sm */
.btn-sm {
  font-size: var(--font-size-sm);
  padding: 5px 12px;
  min-height: 28px;
  border-radius: 5px;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  transition: all 0.15s;
}

/* ─────────────────────────────────────────────────────────────
   P6: Clash list — status pills, priority filter, richer cards
   ───────────────────────────────────────────────────────────── */

/* Status filter pills */
.conflict-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-200);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.status-pill:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.status-pill.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.pill-count {
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px;
  min-width: 16px;
  text-align: center;
}
.status-pill:not(.active) .pill-count {
  background: var(--gray-200);
  color: var(--gray-700);
}

/* Stats bar */
.conflict-list-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
}
.stat-item {
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}
.stat-critical { background: #fee2e2; color: #991b1b; }
.stat-major    { background: #fef3c7; color: #92400e; }
.stat-warn     { background: #fef9c3; color: #713f12; cursor: default; }
.stat-total    { margin-left: auto; color: var(--gray-500); font-weight: 400; }

/* Richer clash cards */
.conflict-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
.conflict-card:hover {
  background: var(--gray-50);
}
.conflict-card.active {
  background: var(--primary-50, #eff6ff);
  border-left: 3px solid var(--primary-color);
  padding-left: 7px;
}
.conflict-card-left {
  display: flex;
  align-items: center;
  padding-top: 4px;
  flex-shrink: 0;
}
.conflict-card-body {
  flex: 1;
  min-width: 0;
}
.conflict-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.conflict-card-elements {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.conflict-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.conflict-card-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Assigned avatar */
.assigned-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-100, #dbeafe);
  color: var(--primary-700, #1d4ed8);
  font-size: 9px;
  font-weight: 700;
  cursor: default;
}

/* Due date indicator */
.due-date-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--gray-500);
}
.due-date-indicator.overdue {
  color: #dc2626;
  font-weight: 600;
}

/* IFC GUID warning indicator */
.guid-warn {
  font-size: 11px;
  color: #d97706;
  cursor: default;
}

/* Clash distance */
.clash-distance {
  font-size: 10px;
  color: var(--gray-400);
}

/* Resolve button */
.btn-resolve-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: all 0.12s;
}
.btn-resolve-sm:hover {
  background: #f0fdf4;
  border-color: #10b981;
}

/* Resolved indicator */
.resolved-indicator {
  font-size: 13px;
  color: #10b981;
  font-weight: 700;
}

.ch-btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.15s;
}
.ch-btn-pdf:hover {
  border-color: #6366f1;
  color: #4f46e5;
  background: #eef2ff;
}
.ch-btn-pdf:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Clash matrix skeleton loading ── */
.clash-matrix-skeleton {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.clash-matrix-skeleton .skeleton-bar {
  height: 14px;
  width: 120px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s infinite;
  margin-bottom: 12px;
}
.clash-matrix-skeleton .skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.clash-matrix-skeleton .skeleton-cell {
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}