/* ============================================================
   TABS.CSS — Tab bar, Editor pane, CodeMirror
   ============================================================ */

/* ── Tab bar ─────────────────────────────────────────────── */

.tabs-container {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    gap: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-btn .count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
}

.tab-btn.active .count {
    background: var(--accent);
    color: #fff;
}

.tabs-container .spacer {
    flex: 1;
}

/* ── Main content ───────────────────────────────────────── */

#content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Editor pane ─────────────────────────────────────────── */

#editor-pane {
    width: 35%;
    min-width: 280px;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    border-right: 3px solid var(--border);
    background: var(--bg-primary);
    transition: width 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

#editor-pane.hidden {
    width: 0;
    min-width: 0;
    opacity: 0;
    border-right: none;
}

#editor-header {
    height: 40px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 12px;
    color: var(--text-muted);
}

#editor-header .file-icon {
    margin-right: 8px;
}

#editor-container {
    flex: 1;
    overflow: hidden;
}

#editor-container .CodeMirror {
    height: 100%;
    font-size: 14px;
}

#editor-container .CodeMirror-vscrollbar {
    outline: none;
}

/* ── CodeMirror overrides ────────────────────────────────── */

.CodeMirror {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.CodeMirror-gutters {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border) !important;
}

.CodeMirror-linenumber {
    color: var(--text-muted) !important;
}

.CodeMirror-activeline-background {
    background: rgba(233, 69, 96, 0.1) !important;
}

.CodeMirror-selected {
    background: rgba(233, 69, 96, 0.25) !important;
}

.CodeMirror-cursor {
    border-left: 2px solid var(--accent) !important;
}

/* ── Resizer ─────────────────────────────────────────────── */

#resizer {
    width: 6px;
    background: var(--border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.2s;
    position: relative;
    z-index: 10;
}

#resizer:hover {
    background: var(--accent);
}

#resizer.hidden {
    display: none;
}

/* ── YAML Tabs ──────────────────────────────────────────── */

.yaml-tabs-header {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
    gap: 0;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    overflow: hidden;
}

.yaml-tabs-list {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    flex: 1;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    height: 100%;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-secondary);
}

.yaml-tabs-list::-webkit-scrollbar {
    height: 6px;
}
.yaml-tabs-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}
.yaml-tabs-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.yaml-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    max-width: 160px;
}

.yaml-tab:hover {
    border-color: var(--accent);
}

.yaml-tab.active {
    background: var(--accent);
    border-color: var(--accent);
}

.yaml-tab.active .yaml-tab-name {
    color: #fff;
}

.yaml-tab-name {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    width: 120px;
    outline: none;
}

.yaml-tab-name:focus {
    color: var(--text-primary);
}

.yaml-tab-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.yaml-tab-close:hover {
    color: var(--accent);
}

.yaml-tab.active .yaml-tab-close {
    color: #fff;
}

.add-tab-btn {
    flex-shrink: 0;
    margin-left: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.add-tab-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.yaml-search-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 14px;
}

.yaml-search-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 71, 87, 0.1);
}

/* ── YAML editor workspace ──────────────────────────────── */

#yaml-tabs-container {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

#yaml-workspace {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

#editor-container-yaml {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#editor-container-yaml .CodeMirror {
    height: 100%;
    font-size: 13.5px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

#editor-container-yaml .CodeMirror-vscrollbar {
    outline: none;
}

#editor-container-yaml .CodeMirror-foldgutter-open,
#editor-container-yaml .CodeMirror-foldgutter-folded {
    color: #4a5568;
    cursor: pointer;
}

#editor-container-yaml .CodeMirror-foldgutter-open:hover,
#editor-container-yaml .CodeMirror-foldgutter-folded:hover {
    color: #60a5fa;
}

/* ── YAML syntax token colors (replaces radioactive CM defaults) ── */

/* Keys and booleans (true/false/null) — soft sky blue instead of purple */
#editor-container-yaml .CodeMirror .cm-atom        { color: #7dd3fc; }

/* Quoted strings — muted sage green */
#editor-container-yaml .CodeMirror .cm-string      { color: #86efac; }
#editor-container-yaml .CodeMirror .cm-string-2    { color: #6ee7b7; }

/* Numbers — warm amber */
#editor-container-yaml .CodeMirror .cm-number      { color: #fdba74; }

/* --- separators, directives */
#editor-container-yaml .CodeMirror .cm-keyword     { color: #f87171; }
#editor-container-yaml .CodeMirror .cm-meta        { color: #6b7280; }

/* Anchors (&) and aliases (*) */
#editor-container-yaml .CodeMirror .cm-variable    { color: #c9d1d9; }
#editor-container-yaml .CodeMirror .cm-variable-2  { color: #60a5fa; }

/* !! type tags */
#editor-container-yaml .CodeMirror .cm-tag         { color: #60a5fa; }

/* Comments — dark muted slate, italic */
#editor-container-yaml .CodeMirror .cm-comment     {
    color: #4a5568;
    font-style: italic;
}

/* Remove red squiggly underlines from cm-error tokens */
#editor-container-yaml .CodeMirror .cm-error {
    color: #94a3b8 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    background: transparent !important;
}

/* ── YAML Empty State ────────────────────────────────────── */

.yaml-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.yaml-empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.yaml-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.yaml-empty-state p {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 300px;
}

/* ── Content panels ──────────────────────────────────────── */

.content-panel {
    display: none;
    flex: 1;
    overflow: hidden;
}

.content-panel.active {
    display: flex;
}

/* ── Files list ─────────────────────────────────────────── */

.files-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-item:hover {
    border-color: var(--accent);
    background: rgba(233, 69, 96, 0.1);
}

.file-item.active {
    border-color: var(--accent);
    background: rgba(233, 69, 96, 0.15);
}

.file-item .icon {
    font-size: 18px;
}

.file-item .name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.file-item .path {
    font-size: 11px;
    color: var(--text-muted);
}