/* Module.IfcTools — IFC Property Editor styles
   All CSS for this module lives here per docs/StylingCSS.md
   (No wwwroot/ folder inside Module.IfcTools itself.)
*/

.ifctools-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ifctools-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
}

/* Viewer layout content — allows the page to scroll vertically and horizontally */
.ifctools-viewer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0;
    min-height: 0;
}

/* ================================================================
   IFC Editor — page wrapper and two-panel layout
   ================================================================ */

/* Full-height flex column — fills .ifctools-content */
.ifc-editor-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ifc-editor-alerts {
    flex-shrink: 0;
    padding: 0 var(--space-16);
}

.ifc-editor-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: var(--space-16);
    padding: var(--space-16);
    overflow: hidden;
}

.ifc-editor-left {
    width: 300px;
    min-width: 260px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Left-panel ids-input-group: push help icon to the right */
.ifc-editor-left .ids-input-group {
    justify-content: space-between;
    align-items: center;
}

.ifc-editor-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Toolbar row above the datasheet grid ────────────────────── */

.ifc-editor-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-bottom: var(--space-8);
    gap: var(--space-8);
}

.ifc-editor-toolbar-row-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.ifc-editor-toolbar-row-right {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ifc-editor-card {
    padding: var(--space-16);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-12);
}

.ifc-editor-card label,
.ifc-editor-card h6 {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Pset list in left panel ─────────────────────────────────── */

.ifc-pset-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.ifc-pset-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    padding: var(--space-4) var(--space-8);
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifc-pset-item:hover {
    background: var(--color-grey-100);
    border-color: var(--color-border-subtle);
}

.ifc-pset-item.active {
    background: var(--color-brand-light);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
    font-weight: 600;
}

/* ── Datasheet table ─────────────────────────────────────────── */

/* CSS custom properties used by sticky frozen columns */
:root {
    --ifc-col-globalid-w: 120px;
    --ifc-col-name-w: 160px;
    /* Vertical overhead above the MudDataGrid scrollable body:
       --layout-tab-height (70) + layout-top-padding (16)
       + toolbar-row + its padding-bottom (48) + grid column-header (31) */
    --ifc-editor-grid-overhead: 165px;
}

.ifc-datasheet {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85rem;
}

.ifc-datasheet th {
    position: sticky;
    top: 0;
    background: var(--color-table-header-bg);
    z-index: 1;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--color-border-subtle);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.ifc-datasheet td {
    border: 1px solid var(--color-border-subtle);
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Frozen header + data cells */
.ifc-col-frozen {
    position: sticky;
    background: var(--color-surface);
    z-index: 2;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifc-datasheet th.ifc-col-frozen {
    z-index: 3;
    background: var(--color-table-header-bg);
}

.ifc-col-id {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    max-width: var(--ifc-col-globalid-w);
}

.ifc-cell-clickable {
    cursor: pointer;
}

.ifc-cell-clickable:hover {
    background-color: var(--color-row-hover, rgba(0,0,0,0.04));
}

.ifc-cell-empty {
    color: var(--color-text-muted);
    text-align: center;
}

.ifc-cell-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
}

.ifc-cell-input:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.ifc-cell-dirty {
    background-color: var(--color-warning-light);
}

/* ── Badge (dirty count on Save button) ─────────────────────── */

.ifc-dirty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    color: var(--color-brand-primary);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: var(--space-4);
}

/* ── IfcEditorFileSelector helper classes ────────────────────── */

.ifc-selector-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ifc-selector-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: var(--space-4) 0 0 0;
}

.ifc-selector-error {
    font-size: 0.8rem;
    color: var(--color-error);
}

/* ── Utility spacing (used in left panel) ────────────────────── */

.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ── InsertPsetDialog ────────────────────────────────────────── */

.ifc-insert-tabs {
    display: flex;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-8);
}

.ifc-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-4) var(--space-12);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ifc-tab-btn.active {
    border-bottom-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
    font-weight: 600;
}

.ifc-tab-btn .badge {
    background: var(--color-border-subtle);
    color: var(--color-text-secondary);
    border-radius: 9999px;
    font-size: 0.7rem;
    padding: 0 6px;
    line-height: 1.4;
}

.ifc-insert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.ifc-insert-list-item {
    cursor: pointer;
    padding: var(--space-8) var(--space-12);
}

.ifc-insert-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ifc-insert-list-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.ifc-insert-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ifc-insert-prop-count {
    color: var(--color-text-muted);
}

.ifc-insert-preview {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0 0;
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ifc-insert-preview li {
    display: flex;
    gap: var(--space-8);
    font-size: 0.8rem;
}

.ifc-insert-prop-name {
    color: var(--color-text-primary);
}

.ifc-insert-prop-type {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── MudDataGrid — PsetDatasheet ────────────────────────────── */

/* Container: flex column to fill .ifc-editor-right */
.ifc-pset-datagrid {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Force fixed table layout for reliable cell truncation */
.ifc-pset-datagrid .mud-table {
    table-layout: fixed;
}

/* Compact cell padding to maximise data density */
.ifc-pset-datagrid .mud-table-cell {
    padding: 2px 6px;
    font-size: 0.83rem;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slightly smaller header font */
.ifc-pset-datagrid .mud-table-head .mud-table-cell {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Click-to-edit cell value div fills the full cell area */
.ifc-cell-value {
    min-height: 1.4em;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Help icon buttons: ~20% smaller */
.ifc-help-btn.mud-icon-button,
.ifc-help-btn .mud-button-root {
    font-size: 0.8em;
}

/* Dirty cell highlight (reused by both legacy table and new grid) */
.ifc-pset-datagrid .ifc-cell-dirty,
.ifc-cell-dirty {
    background-color: var(--color-warning-light) !important;
}

/* Inline edit input inside MudDataGrid cell */
.ifc-pset-datagrid .ifc-cell-input {
    width: 100%;
    border: 1px solid var(--color-brand-primary);
    border-radius: 2px;
    background: var(--color-surface);
    font-size: inherit;
    font-family: inherit;
    padding: 1px 4px;
}

.ifc-pset-datagrid .ifc-cell-input:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* Filter popup content */
.ifc-datagrid-filter-popup {
    padding: 4px 8px;
    min-width: 180px;
}

.ifc-datagrid-filter-input {
    width: 100%;
}

/* ── ExcelOptionsPanel ───────────────────────────────────────── */

.ifc-excel-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Row of 3 equal-width action buttons — wraps to column when narrow */
.ifc-excel-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: stretch;   /* stretch ensures all items reach the same height */
}

.ifc-excel-action-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* MudFileUpload outer wrapper: transparent pass-through for height */
.mud-file-upload.ifc-excel-action-btn {
    display: flex;
    align-items: stretch;
}

/* Inner button inside MudFileUpload fills the wrapper height */
.mud-file-upload.ifc-excel-action-btn button.mud-button-root {
    flex: 1;
    width: 100%;
    height: auto;
}

.ifc-excel-file-label {
    cursor: pointer;
    display: block;
    user-select: none;
}

.ifc-excel-file-label input[type="file"] {
    display: none;
}

.ifc-excel-preview {
    background: var(--color-surface-subtle, #f5f5f5);
    border-radius: var(--radius-medium);
    padding: var(--space-8) var(--space-12);
}

.ifc-excel-preview-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

/* ── IFC Compare ─────────────────────────────────────────────────────────── */

/* Module-level colour tokens (match viewer applyColors constants) */
:root {
    --ifctools-color-geometry-changed: #ff8c00;  /* orange — matches viewer COLOR_GEO  */
    --ifctools-color-property-changed: #ffdc00;  /* yellow — matches viewer COLOR_PROP */
}

/* Viewer selection list — capped at ~10 rows, scrolls internally */
.viewer-selection-list {
    max-height: 330px;   /* ~10 rows × ~33px */
    overflow-y: auto;
    overflow-x: auto;
}

.viewer-selection-list thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface, #fff);
    z-index: 1;
}

/* Single-column vertical layout for narrow TC side-panel */
.ifctools-compare-page {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: auto;
}

/* File name hint below file-picker */
.ifctools-compare-filename {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: var(--space-4) 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Empty state placeholder */
.ifctools-compare-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-24);
    color: var(--color-text-muted);
    gap: var(--space-8);
}

/* ── Summary stats strip ────────────────────────────────────────────────── */

.ifctools-compare-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-12) 0 var(--space-4) 0;
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-12);
}

.ifctools-compare-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    background: var(--color-grey-50, #f5f5f5);
    border-radius: var(--radius-small);
    padding: var(--space-4) var(--space-8);
    border: 1px solid #d5d5d5;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.ifctools-compare-stat:hover {
    background: #f4f7fb;
    border-color: #b8c7da;
}

.ifctools-compare-stat--active {
    border-color: #1976d2;
    background: #eaf3ff;
    box-shadow: 0 0 0 2px rgba(25,118,210,.15);
}

.ifctools-compare-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.ifctools-compare-stat-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}

.ifctools-compare-stat--added   .ifctools-compare-stat-value { color: var(--color-success, #2e7d32); }
.ifctools-compare-stat--removed .ifctools-compare-stat-value { color: var(--color-error,   #c62828); }
.ifctools-compare-stat--changed .ifctools-compare-stat-value { color: var(--ifctools-color-property-changed); }
.ifctools-compare-stat--geometry-changed .ifctools-compare-stat-value { color: var(--ifctools-color-geometry-changed); }

/* ── Analysis indicator rows ────────────────────────────────────────────── */

.ifctools-compare-analysis-flags {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) 0 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.ifctools-compare-analysis-flag {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.ifctools-compare-analysis-flag .bi-check-circle-fill { color: var(--color-success, #2e7d32); }
.ifctools-compare-analysis-flag .bi-circle            { color: var(--color-text-muted); }

/* ── Result tables ──────────────────────────────────────────────────────── */

.ifctools-compare-table-wrap {
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
}

.ifctools-compare-guid {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifctools-compare-val--old {
    color: var(--color-error, #c62828);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifctools-compare-val--new {
    color: var(--color-success, #2e7d32);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}