/* Organisation chart boxes, connectors, frame/staff/leader nodes, per-box edit dialogs.
   Split out of 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#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: color-mix(in srgb, var(--text-900) 50%, transparent);
    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;
}

/* #10276074965 (Torleiv screenshot, mobile: boxes cut off on BOTH the
   left and right edge at once, org-chart's own overflow-x: auto
   notwithstanding): the classic centered-flex-overflow scroll bug —
   when a flex container's content is wider than its scrollable
   ancestor, a bare justify-content: center lays the overflow out
   symmetrically and the initial scrollLeft lands in the MIDDLE of it,
   with equal amounts clipped on both sides, rather than starting at 0
   showing the left edge. safe center (CSS Box Alignment) keeps the
   centered look whenever the content actually fits, but falls back to
   start alignment the moment it doesn't — so a wide chart starts
   scrolled to its own left edge (the root box), reachable and
   scrollable rightward from there, instead of landing on an arbitrary
   centered slice with content missing on both sides. */
.org-chart__list {
    display: flex;
    justify-content: safe 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 color-mix(in srgb, var(--text-900) 12%, transparent);
    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 color-mix(in srgb, var(--text-900) 15%, transparent);
    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: color-mix(in srgb, var(--text-900) 60%, transparent);
}

/* 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: color-mix(in srgb, var(--text-900) 50%, transparent);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.org-chart__frame-label-gear:hover {
    background-color: color-mix(in srgb, var(--text-900) 8%, transparent);
    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;
}

/* Mobile (found live): the "Legg til avdeling" form inside this panel
   (company/_org_chart_section.html.erb) is a bare flex row (name field +
   staff-function checkbox + submit button) with no wrap — on a phone the
   panel itself stayed correctly within the viewport, but the checkbox
   label and submit button ran straight off the right edge of the panel
   (and the screen), unreachable rather than just cramped. */
.org-chart__frame-label-panel form {
    flex-wrap: wrap;
}

/* Labels the one remaining action in this panel ("legg til avdeling") —
   used to also mark it apart from a leader-select sharing the same
   panel, before that moved out to its own gear+dialog on the leader box
   (Torleiv, 2026-08-23, #10229924492). */
.org-chart__frame-label-panel__section-title {
    font-size: var(--text-size-sm);
    font-weight: 600;
    color: color-mix(in srgb, var(--text-900) 50%, transparent);
    margin-bottom: var(--space-1);
}

/* 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: color-mix(in srgb, var(--text-900) 2%, transparent);
}

/* 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. Originally hover/focus-revealed (2026-08-10) like
   .org-chart__box-gear, back when this content expanded IN PLACE inside
   the box itself — hiding it until the box was actually being looked at
   made sense there.

   #10246995725 (2026-08-30): that reveal-on-:hover/:focus-within never
   got dropped when this content moved into a <dialog> (2026-08-14), and
   it's the reason Torleiv couldn't find a way to delete a department at
   all — a showModal() dialog paints in the browser's top layer, fully
   decoupled from .org-chart__box's own on-page position, so hovering the
   (centered) dialog essentially never counts as hovering the box behind
   it, and :focus-within is only true while an actual field inside the
   dialog has focus. Always visible now — these buttons live exclusively
   inside the dialog (verified: only usage, see the view), so the box
   itself already stayed clutter-free by requiring the dialog to be
   opened first; there's no clutter left to hide once it's open. */
.org-chart__box-action {
    display: inline-block;
    font-size: var(--text-size-sm);
    color: color-mix(in srgb, var(--text-900) 40%, transparent);
    text-decoration: none;
}

.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;
}

.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: color-mix(in srgb, var(--text-900) 40%, transparent);
    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;
}

/* #10281061392 (mobile round 2): same as .ui-box__gear — a hover-only
   reveal is no reveal on a phone. Visible and fingertip-sized there. */
@media (hover: none) {
    .org-chart__box-gear,
    .org-chart__frame-label-gear {
        opacity: 1;
    }

    .org-chart__box-gear::after,
    .org-chart__frame-label-gear::after {
        content: "";
        position: absolute;
        inset: -10px;
    }

    .org-chart__frame-label-gear {
        position: relative;
    }
}

.org-chart__box-gear:hover {
    background-color: color-mix(in srgb, var(--text-900) 8%, transparent);
    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. */
/* #10246995725 (2026-08-28): a very recent Chromium build (confirmed:
   Arc 1.161.1 / Chromium 151, "same in Chrome") rendered this dialog's
   overflowing content (the "Legg til underavdeling"/"Slett avdeling" row,
   on a short box with few fields above it) escaping past the dialog's
   own visible border into the backdrop — present in the DOM, geometrically
   verified to sit INSIDE the dialog's own bounding box in an older
   Chromium (148) here, so this reads as a browser-engine regression in
   the position:fixed + transform + overflow-y:auto combination
   specifically, not a code/layout bug. inset+margin:auto reaches the same
   centered result without transform, sidestepping that combination
   entirely — same fix applied to every other dialog in this app sharing
   the identical top/left/transform centering (see
   .document-nav-gear__dialog, .app-confirm-dialog,
   .awareness-wizard-dialog), since they're all equally exposed to the
   same latent issue, not just this one Torleiv happened to hit content
   long enough to trigger it. `margin: auto` needs stating explicitly
   despite being <dialog>'s own UA default — the app's global reset zeroes
   out margin app-wide (see .app-confirm-dialog's own comment on this).

   #10246995725 (2026-08-30): the inset+margin:auto fix above did NOT
   solve it - Torleiv confirmed the action row (add subdepartment/remove)
   still rendered outside the dialog's own border after that deploy, on
   the same browser build, unreproducible everywhere I could test. Rather
   than keep guessing at the exact rendering cause ("Finn ny losning, ikke
   let mer etter css-feil"), changed the layout so the action row can't
   land in that failure mode regardless of its cause: the dialog is now a
   flex column, and only .org-chart-box-dialog__scroll (everything above
   the action row) scrolls. The action row itself
   (.org-chart-box-dialog__footer) is a plain flex sibling, never inside
   an overflow-y:auto region - whatever was misplacing overflowed content
   before, this row is no longer part of the content that overflow
   applies to. */
.org-chart-box-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 22rem;
    max-width: calc(100dvw - var(--space-6));
    max-height: calc(100vh - var(--space-6) * 2);
    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;
}

/* [open] guard is load-bearing: a bare `display:` on the dialog itself
   would override the UA stylesheet's `dialog:not([open]) { display:none }`,
   making it visible at rest instead of only after showModal() (same
   pattern as .global-search__dialog[open]). */
.org-chart-box-dialog[open] {
    display: flex;
    flex-direction: column;
}

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

/* min-height:0 overrides flex items' default min-height:auto - without
   it, this can never shrink below its own content height, so it grows
   the whole dialog past max-height instead of scrolling internally. */
.org-chart-box-dialog__scroll {
    overflow-y: auto;
    min-height: 0;
}

.org-chart-box-dialog__footer {
    flex-shrink: 0;
}

/* Mobile — same bug and same fix as .org-chart__frame-label-panel form
   above: the "add subdepartment" form here (_org_chart_box.html.erb,
   name field + staff-function checkbox + submit + cancel) is the same
   bare flex row with no wrap, so it overflowed the dialog's own
   max-width just like the top-level add-department panel did. */
.org-chart-box-dialog__footer form {
    flex-wrap: wrap;
}

.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;
}

/* Mobile — same bare-flex-row-with-no-wrap bug as the two add-department
   forms above, on company/show.html.erb's own "+ Legg til lenke" form
   (title field, URL field, submit, cancel): all four ran off the right
   edge of the screen on a phone with no way to reach the later ones.
   Wrapping the form alone wasn't enough — .ui-input never sets its own
   width (same root cause as the evidence-search fix), and the
   surrounding .company-link-section's own justify-content: flex-end
   (needed on desktop to right-align the two trigger buttons) pushed the
   now-taller wrapped form off the LEFT edge instead once it no longer
   fit the row. Stacking the whole section into a single left-aligned
   column on mobile, with each input given real width, fixes both. */
@media (max-width: 640px) {
    .company-link-section {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .company-link-form {
        flex-wrap: wrap;
    }

    .company-link-form .ui-input {
        width: 100%;
        min-width: 0;
    }
}


} /* @layer overrides */