/* =====================================================================
 * Session sidebar GROUPS, the HEADING CLUSTER, and the INLINE RENAME
 * editor. Three things in one file because they are one round of work
 * on one strip of UI, and splitting them would put three 60-line files
 * where the shared context is the thing worth keeping.
 *
 * WHY THIS FILE EXISTS AT ALL, recorded because the gap was invisible:
 * client/index.html linked it and every class below was already being
 * EMITTED by the JS, so every DOM assertion in the suite passed while
 * the browser rendered an unstyled pile. A class with no rule is not a
 * missing style, it is a missing FEATURE a DOM-text test cannot see.
 *
 * Load order: AFTER session-sidebar.css and session-sidebar-density.css.
 * It overrides the header layout in the first and depends on the row
 * metrics in the second.
 *
 * EVERY COLOUR HERE IS AN --oc-* PALETTE TOKEN AND NO LITERAL APPEARS
 * BELOW. These used to be --color-* theme tokens, so a session theme
 * repainted this strip and the `terminal` theme squared its corners.
 * This strip is chrome now: it reads the same palette the operations
 * center dashboard does, whatever theme the session is wearing.
 * ===================================================================== */

/* ---- The heading ----------------------------------------------------
 * `.heading` holds the wordmark; `.actions` holds the controls that act
 * on the BAR, pushed to the far edge. Controls that act on the LIST live
 * in the button row under the header (web/src/lib/drawer-tabs/) since
 * 2026-09-22. */

@layer components {
.session-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    /* The title gives way before the controls do. Without this the flex
     * default of min-width:auto lets a long title push the tools out of
     * the panel entirely rather than ellipsing itself. */
    min-width: 0;
    flex: 1 1 auto;
}

.session-sidebar-heading .session-sidebar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Panel chrome, pushed to the far edge. This is where the `auto` lives
 * now: on the cluster boundary, not on a button. */
.session-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---- Section headers -------------------------------------------------
 * Headers are ROWS of the list, not captions floating above it, which is
 * the Claude Code sidebar shape the user pointed at. They read as
 * structure: muted, smaller, letter-spaced, and never competing with a
 * session name for attention. */

.session-sidebar-group {
    display: block;
}

/* ---- Space between bands ---------------------------------------------
 * NOT HERE ANY MORE (issue #897). The space between two bands, the
 * dividers and the gap under a heading are one spacing scale now, the
 * `--sidebar-*-gap` tokens in session-sidebar-band-structure.css, laid out
 * as a flex `row-gap` on the list rather than a margin on each band. */

/* ---- The header ROW: fold button, light, menu -------------------------
 *
 * Every header reads chevron, then its own aggregate status light, then
 * its name, all THREE inside the one fold `<button>` - then, outside it,
 * a hand-made group's kebab (issue #525, rolled out to every grouping by
 * #625, owner 2026-09-25: "the same needs to be for all groupings. like
 * PROJECTS / PINNED / etc"). THE LIGHT DRAWS ONLY WHILE ITS OWN HEADING IS
 * COLLAPSED, and leaves no gap once expanded - see
 * `.session-sidebar-group__project-led` below, the light's own class,
 * still named for #525 but drawn by every heading now. TERMINALS and
 * BROWSERS draw no light at all (#623). Before 1.11.1 the light sat
 * trailing, at the right end next to the kebab, always on regardless of
 * fold state (docs/DECISIONS.md) - that trailing slot is gone. ONLY A
 * REAL USER GROUP DRAWS THE KEBAB; a reserved band renders none and the
 * rule below reserves its width, so every heading's name starts at one x
 * whether or not its band has a menu.
 */
.session-sidebar-group__headerrow {
    display: flex;
    align-items: center;
    width: 100%;
}

/* A RESERVED BAND DRAWS NO KEBAB (owner, 2026-09-21) but still PAYS FOR
 * ITS COLUMN, so every header's fold target ends at the same x and a long
 * name elides at the same place whether or not its band has a menu. 26px
 * is the button's 20px width plus the 6px margin it carried. */
.session-sidebar-group__headerrow[data-band-kind="reserved"] {
    padding-right: 26px;
}

/* Fixed-width column for the fold CHEVRON, first inside the toggle, so
 * every chevron and every name start at one x under every header.
 * `--sidebar-gutter` is declared once, in styles.css. */
.session-sidebar-group__gutter {
    flex: 0 0 var(--sidebar-gutter);
    width: var(--sidebar-gutter);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--oc-space-1);
}

/* THE MENU IS SYMMETRIC AND INSET, never an edge bar.
 * scripts/verify_sidebar_row_edges.py asserts a sidebar row's left three
 * pixels match its right three, and a control painting a rail on either
 * edge would break that for every row beneath it. */
/* The kebab is `.oc-ibtn--bare` (web/src/opscenter/controls.css), 20 by 22,
 * with the drawer's accent on hover. */
.session-sidebar-group__menu {
    --oc-ibtn-size: 20px;
    flex: 0 0 auto;
    height: 22px;
    margin: 0 6px 0 0;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-secondary);
    font-size: 0.9em;
    line-height: 1;
}

.session-sidebar-group__menu:hover:not(:disabled),
.session-sidebar-group__menu:focus-visible {
    color: var(--oc-orange);
}

.session-sidebar-group__header {
    display: flex;
    align-items: center;
    /* session-sidebar-band-structure.css owns the token (issue #769). */
    gap: var(--sidebar-heading-inline-gap, 6px);
    flex: 1 1 auto;
    min-width: 0;
    /* No left inset: the chevron's own gutter column is the inset. */
    padding: var(--oc-space-1) 10px var(--oc-space-1) 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-text-secondary);
    font-family: inherit;
    /* Bumped from 0.72em (owner, 2026-09-22: "Reduce the font size and
     * weight for sessions so the project / group names are larger") -
     * session rows shrink in session-sidebar-density.css instead. */
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    /* DECLARED, not emergent. The header's height is part of the list
     * geometry the density contract is measured against, so it is stated
     * rather than left to whatever the chevron happens to be. RESTATED
     * unchanged despite the font-size bump above, on purpose - see
     * client/css/session-sidebar-density.css's own density-contract note. */
    min-height: 22px;
    box-sizing: border-box;
    transition: color 120ms ease, background 120ms ease;
}

/* THE PROJECTS SUPER-HEADING READS AS A TOP-LEVEL HEADING - bigger and
 * heavier than an individual group or project header beneath it, since it
 * is the one label the whole PROJECTS block hangs off. */
.session-sidebar-group__header--projects {
    font-size: 0.88em;
    font-weight: 800;
}

/* A PROJECT'S OWN NAME KEEPS ITS REAL CASE (owner, 2026-09-26, issue #667:
 * "don't force upper case on the Projects titles"). Every other heading,
 * PROJECTS/PINNED/TERMINALS/BROWSERS and a group included, stays uppercase. */
.session-sidebar-group__headerrow[data-band-kind="project"] .session-sidebar-group__label,
.session-sidebar-group__headerrow[data-band-kind="company"] .session-sidebar-group__label {
    text-transform: none;
}

/* The rename editor (issue #850) opens ON a heading's own label span, so
 * a project's real-case rule above must reach the input and its error
 * text too, or renaming a project would show what you type forced to
 * upper case while every surrounding letter on the row stays real-case. */
.session-sidebar-group__headerrow[data-band-kind="project"] .session-sidebar-rename-input,
.session-sidebar-group__headerrow[data-band-kind="project"] .session-sidebar-rename-error {
    text-transform: none;
}

/* Marks the wrapper for anything addressing PROJECTS specifically; the
 * gap around it is the list's row-gap (session-sidebar-band-structure.css). */
.session-sidebar-projects {
    display: block;
}

.session-sidebar-group__header:hover,
.session-sidebar-group__header:focus-visible {
    color: var(--oc-orange);
    background: var(--oc-ground-hover);
    outline: none;
}

/* The chevron points right when shut and down when open, driven off
 * `aria-expanded` - the SAME attribute a screen reader reads, so the
 * glyph cannot disagree with the announced state. */
.session-sidebar-group__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform 120ms ease;
}

/* Any fold button (the huddle's bars, FoldChevron.svelte) turns it the same way. */
[aria-expanded="true"] > .session-sidebar-group__gutter > .session-sidebar-group__chevron,
.session-sidebar-group__header[aria-expanded="true"] .session-sidebar-group__chevron {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .session-sidebar-group__chevron {
        transition: none;
    }
}

/* THE HEADING ICON (issue #661) - PROJECTS, a project section, PINNED,
 * TERMINALS, BROWSERS. Unlike `.session-sidebar-group__chevron`, this
 * draws whether the heading is collapsed or expanded; unlike
 * `.session-sidebar-group__project-led` below, it never disappears.
 * Fixed 12px box so it never nudges the label when a heading's rows
 * change the light beside it. Colour is inherited `currentColor` from
 * the button's own text colour (`.session-sidebar-group__header`), so
 * hover and every theme repaint it for free. */
.session-sidebar-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.session-sidebar-group__icon svg {
    display: block;
}

.session-sidebar-group__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-sidebar-group__body {
    display: block;
}

/* A COLLAPSED BODY IS EMPTY, NOT HIDDEN. The element stays so
 * `aria-controls` resolves and a drag still has a drop target, but the
 * rows are not in it: web/src/lib/sidebar-shell/row-focus.ts reads the
 * visible order off the DOM. This rule removes the leftover box. */
.session-sidebar-group[data-collapsed="1"] .session-sidebar-group__body {
    min-height: 0;
}

/* The pinned band's hairline is one of the band dividers in
 * session-sidebar-band-structure.css (issue #897), centred in the gap
 * below the band instead of hugging it. */

/* WHILE A DRAG IS IN FLIGHT the empty pinned group is drawn as a drop
 * target, and an empty target has to be big enough to hit. Steady state
 * never sees this rule: outside a drag the empty group is not drawn. */
.session-sidebar-list--dragging .session-sidebar-group[data-group="pinned"][data-count="0"]
.session-sidebar-group__body {
    min-height: 28px;
    border: 1px dashed var(--oc-orange);
    border-radius: var(--oc-radius-sm);
    background: var(--oc-orange-tint);
}

/* ---- Inline rename ---------------------------------------------------
 * The editor replaces the name IN PLACE and must not resize the row: a
 * row that grows when you double-click it shoves every row below it
 * down, and the pointer is already moving. Matching the name's own type
 * and box keeps the height identical between the two states. */

.session-sidebar-rename-edit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* The rename box is `.oc-field` (web/src/opscenter/fields.css); the focus edge
 * is the one shared rule. Only the size, which follows the label it replaced,
 * is here. */
.session-sidebar-rename-input {
    width: 100%;
    min-height: 0;
    padding: 0 var(--oc-space-1);
    /* `inherit` on all three is the whole trick: the input is the same
     * type as the label it replaced, so the row does not reflow. */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* A REJECTED RENAME SAYS SO AND KEEPS THE TEXT. This is the only place
 * the reason is shown, and it is shown next to the input the user is
 * about to correct rather than in a toast that has already gone. */
.session-sidebar-rename-error {
    color: var(--oc-coral);
    font-size: 0.7em;
    line-height: 1.3;
    word-break: break-word;
}

.session-sidebar-group__inactive-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: var(--oc-space-1);
    color: var(--oc-text-muted);
    line-height: 0;
}

/* EVERY HEADING'S OWN LIGHT (issue #525, rolled out to every grouping by
 * #625, owner 2026-09-25: "the same needs to be for all groupings. like
 * PROJECTS / PINNED / etc"; #525 itself, owner: "move the status
 * indicator between the chevron and the project name, and only have it
 * show the indicator when the grouping is collapsed and hide it when it's
 * expanded"). Sits between the chevron gutter and the name, inside the
 * fold button - `.session-sidebar-group__header`'s own `gap: 6px` is what
 * spaces it from its neighbours, so no margin lives here. It is simply
 * ABSENT from the markup while its own heading is expanded (`ledHtml` in
 * web/src/lib/sidebar-shell/project-header.ts), never hidden by CSS: no rule below
 * reserves width for it, so expanding a heading closes the gap on its own
 * instead of leaving one.
 *
 * CLICKING IT FOLDS THE GROUP FOR FREE, THE SAME AS THE CHEVRON, because
 * it is drawn INSIDE the same `[data-group-toggle]` (or
 * `[data-projects-toggle]`) button rather than beside it - no separate
 * click routing exists for it anywhere. Before 1.11.1 the light sat
 * trailing, at the right end next to the kebab, with its own click
 * wrapper and its own routing (`onAggregateClick`,
 * web/src/lib/drawer/chrome-clicks.ts) - that trailing slot is
 * gone now that every heading draws its light this way instead
 * (docs/DECISIONS.md). */
.session-sidebar-group__project-led {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ---- TERMINALS: the folder subtitle (issue #448 slice S3) ------------
 * A flat terminal list has no PROJECTS heading to say where each shell
 * runs, so web/src/lib/drawer/bucketing.ts hands its folder text
 * to the drawer row (web/src/lib/sidebar-shell/row-plan.ts), which draws it right
 * after the name - see that file's docblock for why that costs the row
 * NO EXTRA HEIGHT: `.session-sidebar-row` is a flex row (already `display:
 * flex; align-items: center` in session-sidebar-rows.css), so a sibling
 * span lays out BESIDE the name, not below it, and this rule's own
 * `min-width`/`overflow`/`ellipsis` keep an arbitrarily long path from
 * pushing the pin and kebab off the edge of a narrow (320px) drawer. */
.session-sidebar-row-subtitle {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72em;
    color: var(--oc-text-muted);
}
}