/* ============================================================
 * Update request sections (.ng-update-section, .ng-update-jumpbar)
 * ------------------------------------------------------------
 * The Data Update Request form can carry several categories in
 * one submission, each becoming its own update request (#1386).
 * Every selected category renders as a stacked section with a
 * header that says which category it is, how far along it is,
 * and offers a way out of it.
 *
 * Markup: resources/views/pages/update/form/_section-header.blade.php
 * and the per-category partials beside it. Rationale and anatomy:
 * docs/design.md, "Update request sections".
 *
 * The whole layer is gated on `.ng-update-sections--multi`, set by
 * the page only once two categories are selected. With one
 * selected — the way every update was written until now — the
 * marker, status line and actions are not rendered at all and the
 * section is the plain titled panel it has always been.
 *
 * Four section states, each with its OWN SHAPE, not just its own
 * colour — same rule as .ng-batch-stepper, and for the same
 * reason: the marker's entire job is to say "this one still needs
 * you", which must survive anyone who cannot discriminate hue.
 *
 *   todo     hollow ring
 *   partial  ring with a solid centre dot
 *   done     filled disc + check glyph
 *   error    ring with a centre bar
 *
 * Every colour is a semantic token, so the component flips with
 * the dark theme for free.
 * ============================================================ */

/* ---- Section ------------------------------------------------- */

/* The form lives inside `.portlet-body`, where _cards.css flattens every
   nested panel: no border, no radius, and `.panel-body { padding: 0 }`. A
   header with a horizontal inset of its own would therefore hang to the right
   of the very fields it titles, so it carries none — its text starts on the
   same edge as the first label under it. For the same reason it separates
   itself the way every other flattened panel heading does, with a hairline
   underneath rather than a filled band: the card layer removed heading fills
   deliberately ("no boxes-within-boxes") and there is no box here to fill. */
.ng-update-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 0 var(--space-2);
}

/* One selected category: no chrome, and the heading keeps the
   spacing the page always gave it. */
.ng-update-sections:not(.ng-update-sections--multi) .ng-update-section__marker,
.ng-update-sections:not(.ng-update-sections--multi) .ng-update-section__status,
.ng-update-sections:not(.ng-update-sections--multi) .ng-update-section__actions {
    display: none;
}

.ng-update-sections--multi .ng-update-section__header {
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.ng-update-section__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 22px;
    color: var(--color-text-strong);
    word-break: break-word;
}

.ng-update-section__status {
    flex: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.ng-update-section__actions {
    display: flex;
    flex: none;
    gap: var(--space-3);
}

.ng-update-section__action {
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.ng-update-section__action--danger,
.ng-update-section__action--danger:hover,
.ng-update-section__action--danger:focus {
    color: var(--color-feedback-danger);
}

/* Collapsing is presentation only: the fields stay in the DOM and
   a collapsed section is still read and submitted. */
.ng-update-section--collapsed > .panel-body {
    display: none;
}

/* Messages the server sent back for this section, above its
   fields so they are read before anything is re-typed. */
.ng-update-section__errors p {
    margin: 0;
}

.ng-update-section__errors p + p {
    margin-top: var(--space-1);
}

/* ---- Marker -------------------------------------------------- */

.ng-update-section__marker {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
}

/* partial — ring with a solid centre dot */
.ng-update-section[data-state="partial"] .ng-update-section__marker {
    border-color: var(--color-brand-secondary);
}

.ng-update-section[data-state="partial"] .ng-update-section__marker::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-brand-secondary);
}

/* done — filled disc with a check drawn from two borders */
.ng-update-section[data-state="done"] .ng-update-section__marker {
    border-color: var(--color-feedback-success);
    background: var(--color-feedback-success);
}

.ng-update-section[data-state="done"] .ng-update-section__marker::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* error — ring with a centre bar */
.ng-update-section[data-state="error"] .ng-update-section__marker {
    border-color: var(--color-feedback-danger);
}

.ng-update-section[data-state="error"] .ng-update-section__marker::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    width: 10px;
    height: 2px;
    background: var(--color-feedback-danger);
}

.ng-update-section[data-state="error"] .ng-update-section__status {
    color: var(--color-feedback-danger);
}

/* todo — hollow ring, no inner glyph. */

/* ---- Jump bar ------------------------------------------------ */

/* Appears only from two selected categories on: by then the page
   is long enough that scrolling back to a section is work. */
.ng-update-jumpbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-2) 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand-secondary-soft);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.ng-update-jumpbar__count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-strong);
}

.ng-update-jumpbar__divider {
    width: 1px;
    height: 16px;
    background: var(--color-border-default);
}

.ng-update-jumpbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ng-update-jumpbar__chip,
.ng-update-jumpbar__chip:hover,
.ng-update-jumpbar__chip:focus {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-default);
    text-decoration: none;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
}

.ng-update-jumpbar__chip:hover {
    border-color: var(--color-brand-secondary);
}

/* The section marker at chip scale — same four shapes, so the bar
   and the headers tell the same story. */
.ng-update-jumpbar__chip-marker {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
}

.ng-update-jumpbar__chip[data-state="partial"] .ng-update-jumpbar__chip-marker {
    border-color: var(--color-brand-secondary);
    background: var(--color-brand-secondary);
    box-shadow: inset 0 0 0 2px var(--color-bg-surface);
}

.ng-update-jumpbar__chip[data-state="done"] .ng-update-jumpbar__chip-marker {
    border-color: var(--color-feedback-success);
    background: var(--color-feedback-success);
}

.ng-update-jumpbar__chip[data-state="error"] .ng-update-jumpbar__chip-marker {
    border-color: var(--color-feedback-danger);
}

.ng-update-jumpbar__chip[data-state="error"] .ng-update-jumpbar__chip-marker::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 1px;
    width: 6px;
    height: 2px;
    background: var(--color-feedback-danger);
}

/* ---- Hints --------------------------------------------------- */

/* Both sit OUTSIDE their .form-group on purpose: succesInput()
   blanks every .help-block inside one, which would wipe them the
   first time the field beside them validates. */
.ng-update-lock-hint,
.ng-update-multi-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    line-height: 18px;
    color: var(--color-text-muted);
}

.ng-update-lock-hint .fa {
    margin-right: var(--space-1);
}

/* ---- Fan-out notice ------------------------------------------ */

/* What Submit is about to do, said directly above the button that
   does it. `.ng-alert--inline` carries a top margin only — it is
   built to hug the control it annotates from above — so the gap
   down to the submit row has to come from this side.

   Scoped to the notice rather than given to `.form-actions`, which
   renders in both modes: with one category selected the page has to
   stay exactly as it was. */
#update-fanout-notice {
    margin-bottom: var(--space-4);
}