/* =====================================================================
 * Config/project file tree panel
 * ---------------------------------------------------------------------
 * New CSS file (not appended to the already-oversized styles.css), same
 * convention as session-sidebar.css.
 * THE PALETTE IS --oc-*, NOT THE SESSION THEME. This surface is app
 * chrome, so it reads the military terminal tokens web/src/opscenter/
 * tokens.css puts on :root (they reach every screen through the single
 * client/dist/app.css that client/index.html loads), the same source the
 * shared modal chassis in styles.css and terminal-carnivore.css read.
 * No new token was added and no colour literal is left in this file.
 *
 * This file is the inside of the FILE DRAWER: the header band and the
 * tree. The drawer's box is config-drawer.css. The
 * EDITOR MODAL that stacks over it lives in the sibling stylesheet
 * config-editor-modal.css, split out purely to keep both files under this
 * project's 500-line rule; load both, in either order, alongside this
 * feature's JS. Stacking chrome (scroll lock, covered-modal treatment) is
 * in modal-stack.css.
 * ===================================================================== */

/* `.modal-overlay` sets display: flex, which beats the `hidden`
 * attribute's UA display: none - so the picker needs this to actually
 * stay hidden between opens. Its markup is static in index.html rather
 * than built on demand, which is why it needs a hidden state at all. */
.config-editor-picker-overlay[hidden] {
    display: none;
}

/* THE PICKER'S BOX IS NOT DESCRIBED HERE ANY MORE. It stopped being a
 * centred dialog and became a right-hand DRAWER that can be pinned open,
 * docking the app to the left of it. Its geometry, the docked layout and
 * the pin control all live in client/css/config-drawer.css, which loads
 * after this file. Everything below - the header row, the tree, the rows -
 * is unchanged and is what the drawer contains. */

/* The header container. Its contents are the compiled header
 * (web/src/lib/file-drawer/FileDrawerHeader.svelte, which carries its own
 * scoped styles); this rule is only the band it sits in. */
.config-editor-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--oc-line-faint);
}

/* New-file prompt: the root select, the path input, and the inline error.
 * Reuses .modal-overlay / .modal-btn from styles.css for the chrome. */
.config-editor-new-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.config-editor-new-form label {
    color: var(--oc-text-secondary);
    font-size: 0.8rem;
}

.config-editor-new-form select,
.config-editor-new-form input {
    width: 100%;
    box-sizing: border-box;
    background: var(--oc-ground-field);
    border: 1px solid var(--oc-line-rule);
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 10px;
}

.config-editor-new-hint {
    color: var(--oc-text-muted);
    font-size: 0.75rem;
}

/* THE GIT PIECES' BANDS (#1406). Their contents are compiled
 * (web/src/lib/file-drawer/FileDrawerGit.svelte, FileDrawerGitLine.svelte,
 * each with its own scoped styles); these rules are only where they sit.
 * The views band holds the files / changed files tabs under the header; on
 * "changed files" the drawer marks its box `data-file-tab="changed"`, the
 * tree's body steps aside and the band takes the height instead. The line
 * band is pinned under both. */
.config-editor-git {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
}

.config-editor-picker-content[data-file-tab="changed"] .config-editor-git {
    flex: 1 1 auto;
}

.config-editor-picker-content[data-file-tab="changed"] .config-editor-body {
    display: none;
}

.config-editor-gitline {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

/* Full-height tree - no more 45%-max-height split with an inline editor. */
.config-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.config-editor-tree {
    flex: 1;
    padding: 4px 4px 8px;
    overflow-y: auto;
}

.config-editor-loading,
/* An absent root's explanation. Muted, not danger-coloured: "this project
   has no .claude/" is ordinary. It exists so a short tree can never be
   mistaken for a complete one. */
.config-editor-notice {
    padding: 4px 8px;
    color: var(--oc-text-secondary);
    font-size: 12px;
    line-height: 16px;
}

.config-editor-error {
    padding: 10px 8px;
    color: var(--oc-coral);
    font-size: 0.85rem;
}

.config-editor-error.config-editor-success {
    color: var(--oc-orange);
}

.config-editor-root-label {
    /* No text-transform here - these are real filesystem paths
       (~/.claude, project .claude, working dir); "uppercase" rendered
       "~/.claude" as "~/.CLAUDE" which is a DIFFERENT, misleading path. */
    color: var(--oc-text-muted);
}

.config-editor-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* The panel's outer tree area is itself explicitly left-aligned - rows
 * are flush against it, never centered. Every row's own content is
 * additionally text-align: left below, so nothing upstream (a stray
 * inherited text-align: center on an ancestor) can pull rows toward the
 * middle of the panel again. */
.config-editor-tree,
.config-editor-list--roots {
    text-align: left;
}

/* ---- tree rows: directory/root toggle + file button share one visual
 * language (full-width row: indent + chevron or spacer + icon + name),
 * differing only in the chevron and in what a click does. Both are real
 * <button> elements, keyboard-reachable and screen-reader legible.
 *
 * THE SIZES ARE THE OWNER'S REFERENCE (2026-09-23), a compact explorer
 * list measured beside the terminal it sat next to: type a step smaller
 * than the terminal's 14px, 24px rows, a 14px icon, 16px per level (a
 * 12px indent span plus the row's 4px gap), so a child's icon sits under
 * its parent's chevron-to-icon step. Before: 13.6px type, 34px rows, 16px
 * icons, a 14px ruled guide plus a 6px gap per level (20px) and a boxed
 * +/- glyph. ---- */
.config-editor-toggle,
.config-editor-file {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    /* Explicit, for the bare `button` reset in styles.css, which pins
     * height to 36px (40px under @media max-width 480px); min-height
     * cannot lower a declared height. */
    height: 24px;
    min-height: 0;
    /* One pixel less each side than the old 0 6px 0 4px: the reserved border below takes it, the glyph and name stay put. */
    padding: 0 5px 0 3px;
    /* A reserved, invisible 1px border (Joe, 2026-10-28, "focusring"): the shared focus rule brightens it on keyboard
     * focus (web/src/opscenter/focus.css), so the row draws no ring of its own. */
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    cursor: pointer;
}

/* A tree row's hover affordance is COLOR ONLY - it must never change the
 * row's horizontal extent.
 *
 * These rows are real <button> elements, so the bare `button` reset in
 * styles.css reaches them, and its `button:hover:not(:disabled)` rule
 * (styles.css:514) applies `transform: scale(1.05)` plus a 12px outset
 * glow. That reset is written for the round 36x36 header controls, where
 * growing 5% on hover is the intended flourish. On a full-width row it is
 * an overflow bug: a 485px row scaled 1.05 renders 509px, overhanging
 * 12px past its own right edge, and `.config-editor-tree` has
 * `overflow-y: auto` - which per CSS overflow-3 computes the OTHER axis to
 * `auto` as well - so the overhang became a real horizontal scrollbar that
 * appeared the instant the pointer touched any row. Measured before this
 * rule: tree scrollWidth 505 against clientWidth 501 at desktop width, and
 * 364 against 363 with the panel at its 390px-viewport width, at every
 * nesting depth. After: 501/501 and 363/363.
 *
 * The `:not(:disabled)` here is not defensive noise - it is what raises
 * these selectors to (0,3,0), above the reset's (0,2,1), so the intended
 * background actually wins too. Without it the reset's accent tint was
 * silently overriding both colors declared below.
 *
 * If a row ever needs a hover affordance that wants more room, it has to
 * fit INSIDE the existing width - absolutely positioned within the row, or
 * space the row already reserves at rest - never a transform or an outset
 * shadow. */
.config-editor-toggle:hover:not(:disabled),
.config-editor-file:hover:not(:disabled),
.config-editor-toggle:focus-visible,
.config-editor-file:focus-visible {
    background: var(--oc-ground-hover);
    outline: none;
    transform: none;
    box-shadow: none;
}

.config-editor-file {
    color: var(--oc-text-secondary);
}

.config-editor-file:hover:not(:disabled),
.config-editor-file:focus-visible {
    color: var(--oc-orange);
    background: var(--oc-orange-tint);
}

/* KEYBOARD FOCUS IS THE SHARED RULE (web/src/opscenter/focus.css), on the row's own reserved 1px border above; the
 * `box-shadow: none` earlier exists only to kill the bare button reset's outset glow. */

/* The entry Enter will take while typing in find: the same look as a
 * focused row (hover ground, inset 1px accent), never a width change. */
.config-editor-toggle.config-editor-match,
.config-editor-file.config-editor-match {
    background: var(--oc-ground-hover);
    box-shadow: inset 0 0 0 1px var(--oc-orange);
}

.config-editor-file.config-editor-match {
    color: var(--oc-orange);
    background: var(--oc-orange-tint);
}

.config-editor-toggle svg,
.config-editor-file svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.config-editor-toggle > svg,
.config-editor-file > svg {
    color: var(--oc-text-muted);
}

/* One fixed-width span per ancestor level; with the row's 4px gap every
 * depth steps by the same 16px. Unruled: the reference list draws no guide
 * lines. */
.config-editor-guide {
    display: inline-block;
    width: 12px;
    flex-shrink: 0;
}

/* The chevron: points right when closed, down when open. Real state lives
 * on the row's aria-expanded; the glyph is presentational. A fixed square
 * so file rows can reserve the identical spacer and names line up at
 * every depth. */
.config-editor-toggle-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--oc-text-muted);
}

.config-editor-toggle-glyph svg {
    width: 12px;
    height: 12px;
    transition: transform 100ms ease;
}

.config-editor-toggle[aria-expanded="true"] .config-editor-toggle-glyph svg {
    transform: rotate(90deg);
}

.config-editor-toggle:hover .config-editor-toggle-glyph,
.config-editor-toggle:focus-visible .config-editor-toggle-glyph {
    color: var(--oc-text-primary);
}

/* File rows have no chevron, but reserve its exact width. */
.config-editor-toggle-spacer {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Root nodes (~/.claude, project .claude, project files) read as the
 * top of the tree, not just another directory - bolder name, accent
 * color, same +/- affordance as everything below it. */
.config-editor-toggle--root .config-editor-root-label {
    color: var(--oc-text-primary);
}

/* min-width: 0 is load-bearing, not decoration. A flex item defaults to
 * min-width: auto, which is its min-content width, so a long name plus a
 * flex-shrink: 0 badge (read-only / sensitive) makes the row's content
 * wider than the row. A <button> overflows its own box symmetrically in
 * that case, so the whole row drifted ~10px LEFT of its siblings at the
 * same depth and broke the guide-line alignment. min-width: 0 lets the
 * name shrink and the ellipsis above actually take effect. */
.config-editor-node-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-editor-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 5px;
    font-size: 10px;
    line-height: 14px;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-ground-field);
    color: var(--oc-text-muted);
}

.config-editor-badge svg {
    width: 11px;
    height: 11px;
}

.config-editor-badge--exec {
    background: var(--oc-ground-field);
    color: var(--oc-yellow);
}

/* NO MOBILE BOX OVERRIDE HERE ANY MORE. There used to be a
 * `@media (max-width: 700px)` block widening the picker to 98%/92dvh,
 * back when it was a centred dialog. The drawer is full height at every
 * width and narrows via --config-drawer-w, which config-drawer.css
 * redefines at the same 700px. Two files describing one box is how a
 * drawer turns back into a dialog by accident. */

/* ---- GIT STATUS TAGS on tree rows (#1406, the owner's VS Code shot) ----
 * The compiled tagger (web/src/lib/file-drawer/git-tags.ts) sets
 * data-git-tone, data-git-letter and data-git-kind on a row; nothing else
 * is added to the row. The NAME takes the tone and the letter is drawn at
 * the row's right edge: U untracked and A added in green, M modified and R
 * renamed in yellow, D deleted and ! conflicted in coral. A folder with
 * changed descendants wears its strongest child's tone and a dot. Tokens
 * only. The badges before it ("read-only", "sensitive") keep their place. */
.config-editor-toggle[data-git-letter]::after,
.config-editor-file[data-git-letter]::after {
    content: attr(data-git-letter);
    flex: 0 0 auto;
    min-width: 1em;
    margin-left: auto;
    padding-left: 6px;
    text-align: right;
}

.config-editor-toggle[data-git-tone="green"] .config-editor-node-name,
.config-editor-file[data-git-tone="green"] .config-editor-node-name,
.config-editor-toggle[data-git-tone="green"]::after,
.config-editor-file[data-git-tone="green"]::after {
    color: var(--oc-green);
}

.config-editor-toggle[data-git-tone="yellow"] .config-editor-node-name,
.config-editor-file[data-git-tone="yellow"] .config-editor-node-name,
.config-editor-toggle[data-git-tone="yellow"]::after,
.config-editor-file[data-git-tone="yellow"]::after {
    color: var(--oc-yellow);
}

.config-editor-toggle[data-git-tone="coral"] .config-editor-node-name,
.config-editor-file[data-git-tone="coral"] .config-editor-node-name,
.config-editor-toggle[data-git-tone="coral"]::after,
.config-editor-file[data-git-tone="coral"]::after {
    color: var(--oc-coral);
}