html, body { height: 100%; margin: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; overflow: hidden; }

.editor-shell { display: flex; flex-direction: column; height: 100vh; }
.editor-header { display: flex; align-items: center; gap: 12px; padding: 4px 12px; border-bottom: 1px solid var(--bs-border-color, #444); background: var(--bs-tertiary-bg, rgba(127,127,127,.08)); flex: 0 0 auto; }
.editor-header .brand { font-weight: 600; font-size: 15px; text-decoration: none; color: inherit; white-space: nowrap; }
.editor-header .db-label { font-family: Consolas, monospace; font-size: 12px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 193, 7, .18); color: var(--bs-warning-text-emphasis, #e0a800); white-space: nowrap; }
.editor-header .header-search { display: flex; gap: 6px; flex: 1 1 auto; max-width: 520px; }
.editor-header .header-search .dxbl-text-edit { flex: 1 1 auto; }
.editor-header .header-toggles { display: flex; gap: 14px; white-space: nowrap; }
.editor-header .user-name { opacity: .8; white-space: nowrap; }

.editor-body { display: flex; flex: 1 1 auto; min-height: 0; }
.editor-nav { width: 240px; flex: 0 0 auto; overflow: auto; border-right: 1px solid var(--bs-border-color, #444); }
.editor-nav .editor-tree { font-size: 12.5px; }
.editor-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* list pages */
.list-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.list-page .page-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; flex: 0 0 auto; }
.list-page .page-head h1 { font-size: 16px; margin: 0; font-weight: 600; }
.list-page .page-head .muted { opacity: .65; font-size: 12px; }
.list-page .page-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.entity-grid { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.entity-grid .grid-toolbar { flex: 0 0 auto; padding: 2px 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.entity-grid .grid-host { flex: 1 1 auto; min-height: 0; }
.entity-grid .grid-host .dxbl-grid { height: 100%; }
.entity-grid .grid-error { margin: 4px 8px; padding: 6px 10px; border-radius: 4px; background: rgba(220, 53, 69, .15); color: var(--bs-danger-text-emphasis, #ff6b6b); white-space: pre-wrap; font-family: Consolas, monospace; font-size: 12px; }
.entity-grid .grid-info { margin: 4px 8px; padding: 6px 10px; border-radius: 4px; background: rgba(13, 110, 253, .12); white-space: pre-wrap; }
.entity-grid .dirty-badge { color: var(--bs-warning-text-emphasis, #e0a800); font-weight: 600; }
.cell-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; object-fit: contain; }
.cell-image { max-height: 32px; max-width: 64px; object-fit: contain; }
.lookup-icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; object-fit: contain; }
.cell-id { font-family: Consolas, monospace; font-size: 11px; opacity: .8; }
.dxbl-grid .dxbl-grid-data-row td { padding-top: 2px; padding-bottom: 2px; }

.details-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.details-panel .dxbl-tabs { height: 100%; display: flex; flex-direction: column; }
.details-panel .dxbl-tabs-content, .details-panel .dxbl-tab-page { flex: 1 1 auto; min-height: 0; height: 100%; }
.details-panel .detail-head { display: flex; align-items: center; gap: 8px; padding: 2px 8px; font-weight: 600; }

/* login */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; background: #1e1f22; color: #ddd; }
.login-card { width: 320px; padding: 28px; border-radius: 8px; background: #2b2d31; box-shadow: 0 8px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 10px; }
.login-card h1 { font-size: 22px; margin: 0; }
.login-card .login-db { font-family: Consolas, monospace; color: #e0a800; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.login-card input { padding: 6px 8px; border-radius: 4px; border: 1px solid #555; background: #1e1f22; color: #eee; }
.login-card .login-error { color: #ff6b6b; }
.login-card .login-hint { font-size: 11px; opacity: .6; }

/* home */
.home-page { padding: 20px; overflow: auto; }
.home-page h1 { font-size: 20px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.home-card { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--bs-border-color, #444); text-decoration: none; color: inherit; }
.home-card:hover { background: rgba(127,127,127,.12); }
.home-card .count { font-size: 20px; font-weight: 600; }
.home-card .name { opacity: .75; font-size: 12px; }

/* map */
.map-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.map-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 8px; }
.map-toolbar .sep { width: 1px; height: 22px; background: var(--bs-border-color, #555); margin: 0 4px; }
.map-body { flex: 1 1 auto; min-height: 0; display: flex; }
.map-canvas-host { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: scroll; background: #111; position: relative; }
.map-canvas-host.panning { cursor: grab; }
.map-canvas-host.panning:active { cursor: grabbing; }
.map-canvas-host canvas { display: block; cursor: crosshair; }
.map-side { width: 420px; flex: 0 0 auto; border-left: 1px solid var(--bs-border-color, #444); display: flex; flex-direction: column; min-height: 0; }
.map-status { font-family: Consolas, monospace; font-size: 12px; opacity: .8; }

/* trees & pivots */
.tree-page, .pivot-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tree-page .page-head, .pivot-page .page-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; flex: 0 0 auto; }
.tree-page .page-head h1, .pivot-page .page-head h1 { font-size: 16px; margin: 0; font-weight: 600; }
.tree-page .page-body, .pivot-page .page-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 6px 6px; }
.hero-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* many-to-many editor */
.m2m-editor { display: flex; gap: 8px; height: 100%; min-height: 0; padding: 4px 8px; }
.m2m-pane { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.m2m-head { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 2px 0 4px; }
.m2m-filter { max-width: 220px; }
.m2m-list { flex: 1 1 auto; min-height: 0; }
.m2m-buttons { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.m2m-host { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.m2m-host .grid-toolbar { flex: 0 0 auto; padding: 2px 6px; display: flex; align-items: center; gap: 6px; }
.m2m-host .m2m-editor { flex: 1 1 auto; }

/* property sheet & hero sheet */
.property-sheet { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; align-items: center; max-width: 620px; }
.property-sheet .ps-row { display: contents; }
.property-sheet .ps-label { opacity: .8; font-size: 12px; white-space: nowrap; }
.hero-page .page-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; flex: 0 0 auto; }
.hero-page .page-head h1 { font-size: 16px; margin: 0; font-weight: 600; }
.hero-picker { width: 260px; }
.hero-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hero-tabs .dxbl-tabs-content, .hero-tabs .dxbl-tab-page { flex: 1 1 auto; min-height: 0; height: 100%; }
.hero-summary { padding: 10px; overflow: auto; height: 100%; display: flex; gap: 24px; align-items: flex-start; }
.hero-notes { opacity: .7; font-size: 12px; max-width: 320px; }
.hero-two { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hero-two > * { flex: 1 1 50%; min-height: 0; }
.map-snap { width: 80px; }
.map-combo { width: 200px; }

/* memo columns */
.memo-cell { display: flex; align-items: flex-start; gap: 4px; max-width: 100%; }
.memo-cell .memo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.memo-cell.wrap .memo-text { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; line-height: 1.3; }
.memo-cell .memo-open { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .45; cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; }
.memo-cell .memo-open:hover { opacity: 1; }
.memo-popup-editor { height: 100%; }
.memo-popup-editor textarea { min-height: 380px; font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; }
.dxbl-popup-footer { display: flex; align-items: center; gap: 8px; width: 100%; }

/* support pages */
.support-page { display: flex; height: 100%; min-height: 0; }
.support-actions { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.support-card { border: 1px solid var(--bs-border-color, #444); border-radius: 6px; padding: 6px 10px; }
.support-card.support-hero { background: rgba(127,127,127,.08); }
.support-title { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.support-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.support-param { display: flex; flex-direction: column; gap: 2px; font-size: 11px; opacity: .95; }
.support-combo { width: 280px; }
.support-text { width: 280px; }
.support-small { width: 90px; }
.support-log { width: 420px; flex: 0 0 auto; border-left: 1px solid var(--bs-border-color, #444); display: flex; flex-direction: column; min-height: 0; padding: 8px 10px; }
.support-log-text { flex: 1 1 auto; min-height: 0; overflow: auto; font-family: Consolas, monospace; font-size: 12px; white-space: pre-wrap; margin: 0; }
.edit-mode-combo { width: 130px; }
.entity-edit-form { max-width: 95vw; }
.entity-edit-form .dxbl-popup-body { max-height: 75vh; overflow: auto; }
.entity-form { padding: 6px 2px; }
.entity-edit-form .dxbl-popup { width: min(1100px, 95vw); }

/* ---- data browser (raw table navigator) ---- */
.data-page .page-head { flex-wrap: wrap; }
.data-page .data-crumb { opacity: .75; }
.data-page .data-crumb::after { content: " ›"; opacity: .5; }
.data-page .data-id { font-family: Consolas, monospace; font-size: 14px; }
.data-page .data-find { width: 320px; }
.data-find-results { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 10px 6px; font-size: 13px; }
.data-chip { display: inline-flex; gap: 6px; align-items: center; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: rgba(13, 110, 253, .18); border: 1px solid rgba(13, 110, 253, .4); }
.data-chip a { text-decoration: none; }
.data-grid .data-link { font-family: Consolas, monospace; font-size: 12px; }
.data-filter { margin-left: 4px; opacity: .5; text-decoration: none; }
.data-filter:hover { opacity: 1; }
.data-record-body { overflow: auto; padding: 6px 10px; }
.data-record { display: flex; gap: 16px; align-items: flex-start; padding: 4px 6px; }
.data-props { flex: 0 1 60%; min-width: 320px; }
.data-children { flex: 1 1 40%; min-width: 280px; }
.data-record-head { display: flex; gap: 12px; align-items: center; padding: 2px 0 6px; }
.data-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.data-table th { text-align: left; font-weight: 600; padding: 2px 10px 2px 0; vertical-align: top; white-space: nowrap; opacity: .85; }
.data-table td { padding: 2px 6px; vertical-align: top; word-break: break-word; }
.data-table tr { border-top: 1px solid rgba(127, 127, 127, .15); }
.data-table tr.data-key th { color: var(--bs-primary, #4da3ff); }
.data-table .data-null { opacity: .4; font-style: italic; }
.data-table .data-text { white-space: pre-wrap; }
.data-table .data-parent { margin-left: 8px; }
.data-table .data-count { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-more { margin-left: 8px; font-size: 11px; }
.data-items { margin: 2px 0 4px; padding-left: 16px; }
.data-items li { line-height: 1.5; }
.editor-header .db-switch { white-space: nowrap; }
.editor-header .db-readonly { font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: rgba(220, 53, 69, .2); color: var(--bs-danger-text-emphasis, #ff6b6b); white-space: nowrap; }
.entity-grid .readonly-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: rgba(220, 53, 69, .2); color: var(--bs-danger-text-emphasis, #ff6b6b); }
.entity-grid .paged-badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(13, 110, 253, .18); white-space: nowrap; }

/* Developper page (mass recomputation with dry run) */
.developper-page .page-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.developper-page .grid-info, .developper-page .grid-error { margin: 0; padding: 6px 10px; border-radius: 4px; white-space: pre-wrap; }
.developper-page .grid-info { background: rgba(13, 110, 253, .12); }
.developper-page .grid-error { background: rgba(220, 53, 69, .15); color: var(--bs-danger-text-emphasis, #ff6b6b); font-family: Consolas, monospace; font-size: 12px; }
.dev-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-cards .support-card { flex: 1 1 420px; }
.dev-desc { font-size: 12px; margin-bottom: 6px; }
.dev-summary { margin-top: 6px; font-size: 12px; }
.dev-warnings { margin-top: 4px; font-size: 12px; }
.dev-warnings pre { max-height: 160px; overflow: auto; font-size: 11px; }
.dev-grid { flex: 1 1 auto; min-height: 300px; display: flex; flex-direction: column; }
.dev-grid .dev-dxgrid { flex: 1 1 auto; min-height: 0; }