/* components-editor.css - Editor and data entry form components */

/* ============================================
   Split Panel Container
   ============================================ */
.split-container {
    display: flex;
    height: calc(100vh - 52px);
    overflow: hidden;
}

.tree-panel-resizable {
    min-width: 200px;
    max-width: 60%;
    width: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-color-secondary, #f5f5f5);
}

.tree-panel-resizable .panel {
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: inherit;
    display: flex;
    flex-direction: column;
}

.tree-panel-resizable .panel-heading {
    background: var(--primary-color, #00d1b2);
    color: #1a1a1a;
}

.tree-panel-resizable .tree-container {
    flex: 1;
    overflow: auto;
}

.content-panel-resizable {
    flex: 1;
    overflow: hidden;
    min-width: 300px;
    padding: 1rem;
    overflow-y: auto;
}

.content-panel-resizable .box {
    height: 100%;
    overflow-y: auto;
}

/* ============================================
   Resizable Splitter
   ============================================ */
.splitter {
    width: 6px;
    background: linear-gradient(to right, #e0e0e0, #f0f0f0, #e0e0e0);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s;
}

.splitter:hover,
.splitter.dragging {
    background: linear-gradient(to right, var(--primary-color, #3273dc), var(--link-color, #4a90e2), var(--primary-color, #3273dc));
}

.splitter::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: #999;
    border-radius: 1px;
}

.splitter:hover::before,
.splitter.dragging::before {
    background: #fff;
}

/* ============================================
   Tree Panel (sidebar)
   ============================================ */
.tree-panel {
    border-right: 1px solid var(--border-color, #dbdbdb);
    background: var(--bg-color-secondary, #f5f5f5);
}

.tree-panel .panel {
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.tree-container {
    height: calc(100% - 140px);
    overflow-y: auto;
}

/* ============================================
   Content Panel
   ============================================ */
.content-panel {
    padding: 1rem;
    overflow-y: auto;
}

/* ============================================
   Field Groups (form sections)
   ============================================ */
.field-group {
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.field-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.field-group-title {
    font-weight: 600;
    font-size: 1rem;
}

/* ============================================
   Nested Elements (hierarchical forms)
   ============================================ */
.nested-element {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--primary-color, #3273dc);
}

/* ============================================
   Repeated Element Lists
   ============================================ */
.repeated-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.repeated-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-color-secondary, #fafafa);
    border-radius: 4px;
}

.repeated-list-item .item-content {
    flex: 1;
}

.repeated-list-item .item-actions {
    flex-shrink: 0;
}

/* ============================================
   Type Selector (abstract types)
   ============================================ */
.type-selector {
    margin-bottom: 1rem;
}

.type-selector .select {
    width: 100%;
}

/* ============================================
   Enum Select
   ============================================ */
.enum-select {
    width: 100%;
}

/* ============================================
   Validation States
   ============================================ */
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select select {
    border-color: var(--danger-color, #ff3860);
}

.field.has-error .help {
    color: var(--danger-color, #ff3860);
}

.field.is-valid .input,
.field.is-valid .textarea,
.field.is-valid .select select {
    border-color: var(--success-color, #23d160);
}

/* ============================================
   Loading Overlay (full-screen)
   ============================================ */
.loading-overlay-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* ============================================
   Drag and Drop Zone
   ============================================ */
.drop-zone {
    border: 2px dashed var(--border-color, #dbdbdb);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.drop-zone.is-active {
    border-color: var(--primary-color, #3273dc);
    background: rgba(50, 115, 220, 0.1);
}

.drop-zone.is-hover {
    border-color: var(--success-color, #23d160);
    background: rgba(35, 209, 96, 0.1);
}

/* ============================================
   Children List/Table View
   ============================================ */
.children-table {
    font-size: 0.9rem;
}

.children-table .child-row {
    cursor: pointer;
}

.children-table .child-row:hover {
    background-color: #f0f8ff !important;
}

.children-table .child-row td {
    vertical-align: middle;
}

.children-table .buttons {
    gap: 0.25rem;
}

.children-table .buttons .button {
    margin-bottom: 0 !important;
}

/* ============================================
   Fancytree Overrides
   ============================================ */
ul.fancytree-container {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: transparent;
    padding: 0.5rem;
}

.fancytree-node {
    padding: 2px 0;
}

.fancytree-title {
    font-size: 0.9rem;
}

.fancytree-active .fancytree-title {
    background-color: var(--primary-color, #3273dc) !important;
    color: white !important;
    border-color: var(--primary-color, #3273dc) !important;
}

.fancytree-node:hover .fancytree-title {
    background-color: #e8f4ff;
    border-color: #b5d5ff;
}

.fancytree-match .fancytree-title {
    font-weight: bold;
}

span.fancytree-node.fancytree-match {
    background-color: #fffde7;
}

/* ============================================
   Dark Mode Overrides
   ============================================ */

/* Bulma panel dark mode */
html.dark-mode .panel {
    background: var(--bg-color, #1a1a1a) !important;
    color: var(--text-color, #f5f5f5) !important;
}

html.dark-mode .panel-heading {
    background: var(--bg-lighter, #2c2c2c) !important;
    color: var(--text-color, #f5f5f5) !important;
    border-color: var(--border-color, #3e3e3e) !important;
}

html.dark-mode .panel-block {
    background: var(--bg-color, #1a1a1a) !important;
    color: var(--text-color, #f5f5f5) !important;
    border-color: var(--border-color, #3e3e3e) !important;
}

html.dark-mode .panel-block:first-child {
    border-top-color: var(--border-color, #3e3e3e) !important;
}

/* Tree panel dark mode */
html.dark-mode .tree-panel {
    background: var(--bg-color, #1a1a1a) !important;
    border-right-color: var(--border-color, #3e3e3e) !important;
}

html.dark-mode .tree-panel .panel {
    background: var(--bg-color, #1a1a1a) !important;
}

html.dark-mode .tree-panel .panel-heading {
    background: var(--bg-lighter, #2c2c2c) !important;
    color: var(--text-color, #f5f5f5) !important;
}

html.dark-mode .tree-container {
    background: var(--bg-color, #1a1a1a) !important;
    color: var(--text-color, #f5f5f5) !important;
}

/* Tree resizable panel dark mode */
html.dark-mode .tree-panel-resizable {
    background: var(--card-bg, #3a3a3a);
}

html.dark-mode .tree-panel-resizable .panel-block {
    background: var(--card-bg, #3a3a3a);
    border-color: #4a4a4a;
}

html.dark-mode .tree-panel-resizable .panel-heading {
    background: #00947e;
    border-color: #4a4a4a;
}

html.dark-mode .tree-panel-resizable .input {
    background-color: #2c2c2c;
    border-color: #4a4a4a;
    color: #f5f5f5;
}

html.dark-mode .tree-panel-resizable .input::placeholder {
    color: #888;
}

/* Splitter dark mode */
html.dark-mode .splitter {
    background: linear-gradient(to right, #4a4a4a, #555, #4a4a4a);
}

html.dark-mode .splitter:hover,
html.dark-mode .splitter.dragging {
    background: linear-gradient(to right, #3273dc, #4a90e2, #3273dc);
}

html.dark-mode .splitter::before {
    background: #888;
}

/* Field group dark mode */
html.dark-mode .field-group {
    border-color: var(--border-color, #3e3e3e) !important;
    background: var(--bg-lighter, #2c2c2c) !important;
}

/* Repeated list dark mode */
html.dark-mode .repeated-list-item {
    background: var(--bg-lighter, #2c2c2c) !important;
}

/* Children table dark mode */
html.dark-mode .children-table .child-row:hover {
    background-color: #3a4a5a !important;
}

/* Loading overlay dark mode */
html.dark-mode .loading-overlay-fullscreen {
    background: rgba(0, 0, 0, 0.8);
}

/* Fancytree dark mode */
html.dark-mode ul.fancytree-container {
    background-color: transparent;
}

html.dark-mode .fancytree-title {
    color: #f5f5f5;
}

html.dark-mode .fancytree-active .fancytree-title {
    background-color: #3273dc !important;
    color: white !important;
}

html.dark-mode .fancytree-node:hover .fancytree-title {
    background-color: #4a4a4a;
    border-color: #666;
}

html.dark-mode span.fancytree-node.fancytree-match {
    background-color: #4a4020;
}

html.dark-mode .fancytree-expander,
html.dark-mode .fancytree-icon {
    filter: invert(0.8);
}

/* XML preview dark mode (uses code-preview class) */
html.dark-mode .xml-preview {
    background: var(--bg-color, #1a1a1a) !important;
    color: var(--text-color, #f5f5f5) !important;
}