/* Organisation chart boxes, connectors, frame/staff/leader nodes, per-box edit dialogs.
   Split out of stomn_theme.css (original lines 5449-6091) — 2026-08-18,
   CSS @layer restructuring step 2 (Basecamp "Fra Fizzy-gjennomgang:
   CSS-arkitektur"). Numeric filename prefix controls load order (see
   app/helpers/application_helper.rb#stomn_theme_stylesheet_link_tag) —
   files are concatenated in this exact original order, so no cascade
   tie-break changes. */
@layer overrides {
/* "Uten avdeling" pool at the top of the org chart (company/show.html.erb)
   — a drag source/target using the app's shared sortable-group controller,
   same as every department box's own member list below. Supersedes the
   earlier per-department Kanban-column board this page used to have
   alongside (not instead of) the org chart. */
.org-chart-unassigned {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    min-height: 3.5rem;
}

.org-chart-unassigned__label {
    font-size: var(--text-size-sm);
    color: rgba(28, 25, 20, 0.5);
    margin-right: var(--space-2);
}

.org-chart-unassigned__card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: calc(var(--card-radius) - 4px);
    background: var(--ui-0, #fff);
    cursor: grab;
}

/* The reparenting fallback select inside each org-chart box. */
.org-chart__parent-select {
    width: 100%;
    margin-top: var(--space-2);
}

.org-chart__box-name-input {
    width: 100%;
}

/* Graphical box-and-connector org chart — a hand-rolled CSS tree (the
   classic nested-flex + pseudo-element-connector technique) rather than an
   SVG/canvas diagram or a chart library, matching the app's "no dependency
   unless there's no reasonable alternative" line. Supersedes an earlier,
   simpler indented-list version. */
/* Torleiv, 2026-08-14: "unngå scrollbarer for området arket ligger på" —
   the CSS spec computes an unset overflow-y as auto (not its own initial
   visible) whenever overflow-x is explicitly set to anything but visible,
   so this box was silently getting its own vertical scrollbar nobody
   asked for, confirmed via getComputedStyle (overflowY: "auto" despite
   only overflow-x being declared).
   CONFIRMED WRONG ON THE FIRST ATTEMPT: setting overflow-y to visible
   explicitly (even with an inline !important, tested live) still computes
   to "auto" — per the same spec rule, the UA is required to promote
   visible to auto whenever the other axis isn't visible, and that
   promotion happens at the computed-value stage, after cascade/specificity
   are already resolved, so no amount of specificity or !important can
   make "visible" stick here. hidden is a genuinely different computed
   value (not silently promoted), and does take effect — the chart's own
   height already just fits its content (no fixed height set anywhere),
   so nothing is actually being clipped in normal use; this only ever
   matters for stopping the phantom scrollbar. overflow-x stays auto — a
   genuinely wide chart (many top-level departments) still needs to
   scroll horizontally without breaking the page layout. */
.org-chart {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-4) 0 var(--space-2);
}

/* Every connector line in the chart is drawn into this one SVG overlay by
   org_chart_lines_controller.js, computed from the actual rendered
   position of each .org-chart__box — see that file for why (replaces a
   chain of separately-tuned CSS pseudo-elements that kept drifting out of
   alignment with each other). Sits first in the DOM (see
   company/_org_chart_section.html.erb) so the boxes — all
   position: relative, painted in normal DOM order — layer above it
   without needing an explicit z-index. Sized in JS to the chart's full
   scrollable content, not just the visible viewport (.org-chart itself
   scrolls horizontally on a wide chart), and scrolls together with that
   content since it's absolutely positioned inside the same scrolling
   .org-chart, not fixed to the viewport. */
.org-chart__lines {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.org-chart__list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Every department's (possibly childless) list is a drag-and-drop
       target for reparenting — an empty <ul> needs real height to have
       anywhere to drop onto. */
    min-height: var(--space-5);
    /* Every list needs this — including the top-level one. The gap this
       reserves is where org_chart_lines_controller.js draws the branch
       line down from the parent box above into each item below;
       without it, the top-level list would sit with zero gap under the
       root branch and read as disconnected from the box above it. */
    padding-top: var(--space-5);
}

.org-chart__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 var(--space-3);
}

.org-chart__box {
    position: relative;
    background: var(--ui-0, #fff);
    border: 1px solid rgba(28, 25, 20, 0.12);
    border-radius: var(--card-radius);
    padding: var(--space-2) var(--space-3);
    width: 150px;
    /* Torleiv, 2026-08-13: "stab større enn avdelingene" — a fixed width
       alone doesn't guarantee a fixed HEIGHT: a longer name (e.g. "Analyse
       og etterlevelse") wraps to two lines within that same 150px, making
       that box visibly taller than a one-line-name box with otherwise
       identical content. min-height (not height) sets a shared floor
       without clipping a box that genuinely needs more room (a longer
       name, or enough avatars to wrap their own row). */
    min-height: 124px;
    text-align: center;
}

/* Torleiv, 2026-08-17 ("Juster ned høyden på en-manns-boksene"): the
   shared 124px floor above is sized for a box that actually shows a
   members row (Kundeservice/Salg og marked/Utvikling) — a solo box has
   real content around 90-115px tall, so the floor alone was leaving a
   visible empty gap under it. Two separate rules since the two "solo"
   shapes aren't structurally the same: the root leader box
   (_org_chart_section.html.erb) never renders a .org-chart__box-members
   element at all, while a solo department/staff box
   (_org_chart_box.html.erb) always renders that element but leaves it
   with no .org-chart__box-member children (the department's one person
   is shown via .org-chart__box-leader instead — see that partial's own
   comment on why a solo member isn't duplicated into this row too).

   Can't use :empty for the second case — the ERB template's own
   surrounding whitespace inside .org-chart__box-members (from
   `<% ... .each do |person| %>` with nothing rendered) is itself a text
   node, so the element never actually matches :empty even with zero
   real member cards in it. Checking for the absence of any
   .org-chart__box-member instead sidesteps that — it only looks at
   real rendered content, not incidental template whitespace.

   Torleiv, 2026-08-17 ("Analyse og etterlevelse / Produkt og innovasjon:
   lag samme høyde som Daglig leder"): raised from 92px to match the
   116px floor below rather than the other way around — tried lowering
   the staff boxes' own floor to 92px first (matching what was actually
   asked), but their real content (name + leader-link + the always-
   rendered, functional drag-and-drop members row two rules below) is
   already ~114px tall regardless of any floor, so a 92px floor was a
   no-op that left them unchanged. 92px only ever fit the leader box
   because it alone has no members row to make room for. Growing the
   shorter box was the only version of "same height" that doesn't
   either silently do nothing or shrink the drop target other boxes
   rely on for dragging people in.

   Later the same day ("Lag stab-boksene mindre"): reversed again — no
   longer trying to match the department/leader boxes at all, just make
   the two staff boxes as small as their own content actually needs.
   :not(.org-chart__box--staff) added below so they fall out of the
   shared 116px floor — but that alone left them at the BASE
   .org-chart__box rule's own unconditional 124px floor (above), taller
   than before, not smaller: falling out of one override just exposes
   whatever's underneath it, it doesn't mean "no floor." The explicit
   .org-chart__box--staff rule below is what actually shrinks them,
   sized to match their real natural content height (measured live,
   min-height removed entirely: 90.4px) — see .org-chart__box--staff
   .org-chart__box-members' own rule further down for the other half of
   this (the empty drag-and-drop row was the other big chunk of unused
   height). */
.org-chart__box--leader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 116px;
}

.org-chart__box--staff {
    min-height: 90px;
}

.org-chart__box:has(.org-chart__box-members):not(:has(.org-chart__box-member)):not(.org-chart__box--staff) {
    min-height: 116px;
}

/* Torleiv, 2026-08-13: "endre slik at alle boksene er like stor" — a
   `min-width` let boxes with more member avatars grow wider than boxes
   with fewer, so same-size-class boxes still ended up visibly uneven
   (Kundeservice/Salg og marked/Utvikling, 3/2/4 avatars, three different
   widths). A fixed `width` above stops that. Group::BOX_SIZES (sm/md/lg)
   still exists as a data field and a picker in the UI, but no longer
   changes the org chart's own box width — every box renders at the one
   fixed size regardless of its box_size value, until/unless a future
   request brings size variation back. */
.org-chart__box--sm,
.org-chart__box--md,
.org-chart__box--lg {
    width: 150px;
    padding: var(--space-2) var(--space-3);
    font-size: inherit;
}

/* Torleiv, 2026-08-14: "avdelingene helst litt bredere enn solo-boksene"
   — reintroduces size variation on top of the fixed 150px above, but
   keyed to actual member count (see _org_chart_box.html.erb) rather than
   the box_size field this same file's 2026-08-13 comment retired from
   driving width. Wins by source order (loads after .org-chart__box--sm/
   md/lg, same specificity), not !important. */
.org-chart__box--wide {
    width: 190px;
}

/* Torleiv, 2026-08-10: used to be the company's own identity box (thick
   signal-color border, its name as the label), then briefly the settings/
   add-department hub once the name moved to .org-chart__frame-label — now
   neither: the gear and its panel moved up into the frame label too (see
   .org-chart__frame-label-gear), so once departments exist this box has
   nothing left to show at all (see .org-chart__box--root-hidden right
   below) and is kept only as an invisible flex-layout spacer between the
   staff columns. Onboarding (no departments yet) still renders a real,
   visible box here. */
.org-chart__box--root-hidden {
    border: none;
    background: none;
    padding: 0;
    min-width: 0;
}

/* A card-style frame around the entire tree (leader, staff, departments),
   with the organisation's name as a corner label — like a fieldset
   legend — instead of a floating box mid-tree. */
.org-chart__frame {
    position: relative;
    border: 1px solid rgba(28, 25, 20, 0.15);
    border-radius: var(--card-radius);
    padding: var(--space-5) var(--space-4) var(--space-4);
}

.org-chart__frame-label {
    position: absolute;
    top: 0;
    left: var(--space-4);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--ui-0, #fff);
    padding: 0 var(--space-2);
    font-weight: 600;
    font-size: var(--text-size-sm);
    color: rgba(28, 25, 20, 0.6);
}

/* Torleiv, 2026-08-10: the settings/add-department control moved from a
   hover-revealed gear inside the (now-empty) root box up into the frame
   label itself — always visible rather than hover-revealed, since this is
   a small, permanent header-style control now, not one box among many in
   a big tree where hover-reveal earns its keep by reducing clutter. */
.org-chart__frame-label-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: rgba(28, 25, 20, 0.5);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.org-chart__frame-label-gear:hover {
    background-color: rgba(28, 25, 20, 0.08);
    color: var(--signal-color);
}

/* Torleiv, 2026-08-11: used to be position:absolute — a small popover
   dropping below the (also absolutely-positioned) frame label corner
   pill. That meant it never occupied real space in .org-chart__frame's
   layout, so once "Legg til avdeling" was opened inside it too (making
   it tall), it just painted over the leader box and Stab row below
   instead of pushing them down — and browser stacking order let those
   position:relative boxes win hit-testing over the popover in practice,
   so clicks on the panel's own buttons landed on the chart underneath
   instead. Now a plain block sibling of the frame label (see
   _org_chart_section.html.erb) in normal flow: position:relative stays
   only so .org-chart__box-gear--close (position:absolute, top/right:
   space-1) still anchors to THIS box's own corner rather than some
   further-out ancestor. */
.org-chart__frame-label-panel {
    position: relative;
    margin: var(--space-2) 0;
    min-width: 220px;
    padding: var(--space-3);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--dialog-shadow);
    text-align: left;
    font-weight: normal;
    color: inherit;
}

/* Marks "change the leader" and "add a department" as two distinct
   steps within the one shared panel above, not one undifferentiated
   block of fields — see the comment in _org_chart_section.html.erb on
   why they're still one panel rather than two independently-toggled
   ones. */
.org-chart__frame-label-panel__section-title {
    font-size: var(--text-size-sm);
    font-weight: 600;
    color: rgba(28, 25, 20, 0.5);
    margin-bottom: var(--space-1);
}

.org-chart__frame-label-panel__divider {
    border-top: 1px solid rgba(28, 25, 20, 0.1);
    margin: var(--space-3) 0;
}

/* Staff functions (advisory, not in the chain of command) render with a
   dashed border to read as "beside the line" rather than "in the line".
   Torleiv, 2026-08-17: "Stabs-boksene er litt høye? Midtstill vertikalt
   også" — these boxes share the same 116px solo-box floor as a
   department led by only its own leader (see the shared :has() rule
   below), but unlike those, .org-chart__box's default block layout
   doesn't fill that height — the gear/name/leader-link/members stack
   only needed ~100px, leaving a visible gap below the content instead of
   distributing it. flex + justify-content: center centers the existing
   stack within whatever height the box actually has, rather than
   guessing a new, smaller floor. */
.org-chart__box--staff {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-style: dashed;
    background: rgba(28, 25, 20, 0.02);
}

/* Torleiv, 2026-08-15: "Boksene til Andreas og meg kan lages mindre" —
   these two boxes ("Analyse og etterlevelse", "Produkt og innovasjon")
   were visibly taller than every department box below them, but not
   because of any explicit size setting (box_size is dead for layout,
   see .org-chart__box--sm/md/lg's own comment) — their department names
   are long enough to wrap to two lines at the base 15px name size inside
   this box's 150px width, while every other box's shorter name fits on
   one line. Measured (not guessed): "Analyse og etterlevelse" needs
   ~147px unwrapped at 15px, and only ~124px is actually available inside
   the box's padding — var(--text-size-xs) (12px, the smallest size token
   already in use elsewhere in the app) still isn't quite small enough to
   force it onto one line (needs ~138px), but does bring the box down
   from 143px to ~134px. Deliberately stopped at the app's own existing
   minimum text size rather than going smaller still to force a single
   line — ask Torleiv whether that's small enough, or whether he'd rather
   go below the app's usual floor for these two boxes specifically. */
.org-chart__box--staff .org-chart__box-name {
    font-size: var(--text-size-xs);
}

/* Secondary per-box actions (add sub-department, delete) — a plain .ghost
   button read as too loud/competing once a box is this dense with
   controls (leader select, members, parent select). Hidden until the box
   is hovered or has focus inside it (:focus-within, so keyboard/screen
   reader users can still reach it without hovering), matching the
   app's other row-hover-revealed secondary actions. */
.org-chart__box-action {
    display: inline-block;
    font-size: var(--text-size-sm);
    color: rgba(28, 25, 20, 0.4);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.org-chart__box:hover .org-chart__box-action,
.org-chart__box:focus-within .org-chart__box-action {
    opacity: 1;
}

.org-chart__box-action:hover {
    color: var(--signal-color);
    text-decoration: underline;
}

.org-chart__box-name {
    font-weight: 600;
}

/* Torleiv, 2026-08-14 ("Person-visning"): wraps the leader's avatar+name
   so clicking either opens the person modal — a plain block link, not
   .person-mention's pill (that padding/background is meant for a chip
   sitting inline in prose, not this box's own already-centered,
   already-compact layout). Color/decoration reset so it reads exactly
   as it did before becoming a link. Shared by both the root leader box
   (_org_chart_section.html.erb) and every department/staff box's own
   leader link (_org_chart_box.html.erb) — same markup, same class, since
   2026-08-17 ("Gjør daglig leder helt like stabsboksene").

   No hover-underline rule here (there used to be one, targeting a
   .org-chart__box-name this link no longer wraps) — a department box's
   own leader link never had one either, so removing it is what makes
   the two actually match instead of the root box alone getting special
   hover treatment. */
.org-chart__box-leader-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* First-time setup only (root box, before any department exists) — marks
   the leader-select and the create-department form below it as an
   ordered "do this, then this" sequence rather than two equally-weighted
   controls, per Torleiv's request to guide first-time setup in order. */
.org-chart__onboarding-step {
    font-size: var(--text-size-sm);
    font-weight: 600;
    color: var(--signal-color);
}

.org-chart__box-leader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--text-size-sm);
    color: var(--signal-color);
    margin-top: var(--space-1);
}

.org-chart__box-leader .ui-avatar {
    width: 1.2em;
    height: 1.2em;
}

/* Torleiv, 2026-08-14: the person's job title (Person#localized_job_titles_text)
   — secondary to their name, so smaller and muted rather than the
   signal-color used for the name/link above it.

   Clamped to one line with an ellipsis: a long title ("Medgründer &
   Leder for analyse og etterlevelse") wrapped to two lines in this box's
   fixed 150px width, making it visibly taller than a sibling department
   box whose leader has no title at all (or a shorter one) — box_size no
   longer drives height (see the 2026-08-13 comment above
   .org-chart__box--sm/md/lg), so this was the only remaining source of
   uneven department-box heights. Already at the smallest text size
   token, so a further font-size cut wasn't a good option. The full text
   is still available via the element's title attribute (native tooltip
   on hover) — see _org_chart_box.html.erb. */
.org-chart__box-title {
    font-size: var(--text-size-xs);
    color: var(--text-300);
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* Reserves the line's height even when empty (see the view comment on
       why this is now always rendered) — one line at this font-size. */
    min-height: 1.4em;
}

/* Always has real height (see the equivalent comment on .org-chart__list)
   so a department with no members yet is still a valid drop target for
   dragging someone in from the "Uten avdeling" pool or another box.
   Torleiv, 2026-08-10: used to require the (now-removed) global edit
   toggle before it would accept drags at all (pointer-events: none at
   rest) — now that editing is a per-box gear instead of one shared
   switch for the whole chart, gating member-dragging the same way would
   mean BOTH the source and destination box's own gears would need to be
   open at once just to move one person between them. Always draggable
   now, matching every other drag-and-drop surface in the app (nothing
   else requires an explicit "edit mode" first either). */
.org-chart__box-members {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
    min-height: 1.75rem;
}

.org-chart__box-member {
    cursor: grab;
}

/* Per-box edit toggle (Torleiv, 2026-08-10) — replaces the single
   "Rediger organisasjonskart" button that used to switch every box in
   the whole chart into edit mode at once. Hover/focus-revealed like
   .org-chart__box-action above, same reasoning: a small icon-only
   control doesn't need to compete for attention until the box itself is
   actually being looked at. */
.org-chart__box-gear {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: rgba(28, 25, 20, 0.4);
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.org-chart__box:hover .org-chart__box-gear,
.org-chart__box:focus-within .org-chart__box-gear,
.org-chart__box-gear--close {
    opacity: 1;
}

.org-chart__box-gear:hover {
    background-color: rgba(28, 25, 20, 0.08);
    color: var(--signal-color);
}

/* Torleiv, 2026-08-14: "vis skjema for hver boks som modal" — same modal
   chrome as .document-nav-gear__dialog (own <dialog>, corner close-X,
   centered, native ::backdrop) rather than a bespoke look, since this is
   the same kind of "small form in a dialog" case. */
.org-chart-box-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 22rem;
    max-width: calc(100vw - var(--space-6));
    max-height: calc(100vh - var(--space-6) * 2);
    overflow-y: auto;
    padding: var(--space-6);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--dialog-shadow);
    text-align: left;
}

.org-chart-box-dialog::backdrop {
    background: var(--dialog-backdrop);
}

.org-chart-box-dialog__title {
    margin: 0 0 var(--space-4);
    padding-right: 2rem;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
}

.org-chart__leader-select {
    margin-top: var(--space-2);
    width: 100%;
}

/* The daglig leder's own node, sitting above the company box as the actual
   apex of the hierarchy. The connecting line down to it is drawn by
   org_chart_lines_controller.js (see .org-chart__lines below), not CSS —
   this just reserves the vertical gap the SVG line is drawn into. */
.org-chart__leader-branch {
    display: flex;
    justify-content: center;
    position: relative;
    padding-bottom: var(--space-5);
}

/* Torleiv, 2026-08-15: "Daglig leder kan skrives like tydelig som
   avdelingsnavnene på de andre" — matches .org-chart__box-name's own
   weight/color now (bold, full-strength text color) instead of reading
   as a small, muted subtitle beneath the leader's actual name. */
.org-chart__box-role {
    font-weight: 600;
}

/* Torleiv, 2026-08-11: without justify-content: center, this row (left
   staff column, invisible root spacer, right staff column) hugged the
   LEFT edge of the frame instead of centering under the leader's
   connector line — .org-chart__list below already centers the same way,
   this just brings .org-chart__branch in line with it. With it centered,
   the spacer (and the line above it) sits at the row's true midpoint, so
   the two staff columns end up flanking it symmetrically as intended. */
.org-chart__branch {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
}

/* The staff row sits beside its parent's box — the connector line itself
   is drawn by org_chart_lines_controller.js (see .org-chart__lines
   below), which reads each box's actual rendered position instead of a
   chain of separately-tuned CSS pseudo-elements (the previous approach,
   replaced 2026-08-13 after repeated "gap still doesn't quite meet"
   reports — see that controller's own comment for why). */
.org-chart__staff-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    position: relative;
}

/* The leader's own staff row (see _org_chart_section.html.erb) is a
   direct, full-width child of .org-chart__frame rather than a flex item
   inside an already-centered .org-chart__branch (how a department's own
   staff row sits, one level down) — needs its own justify-content to
   center the staff columns under the leader/trunk instead of packing to
   the left. */
.org-chart__staff-row--leader {
    justify-content: center;
}

/* Torleiv, 2026-08-11: kept for layout only now — min-height stops this
   row from collapsing to ~0 height on a company with no Stab functions
   at all (just the invisible root-spacer box, see
   .org-chart__box--root-hidden below), which would otherwise leave no
   vertical room for the leader→root connector line to be drawn into. */
.org-chart__frame > .org-chart__branch {
    position: relative;
    min-height: var(--space-5);
}

/* One column per staff function inside the row — stacks that function's
   own box above its own (usually empty) child list, the same way a
   normal child's box and list stack in .org-chart__branch/.org-chart__list
   below it, instead of every staff function's box and list all becoming
   loose siblings laid out in the row's own flex direction. */
.org-chart__staff-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}


} /* @layer overrides */