/* ============================================================================
   APS COMPONENT CONVENTIONS — how a card, a table, a form, a button and a tree
   look everywhere in this system.

   ⚠️ USE THESE. A new page is styled by composing these classes, not by writing
   fresh CSS. If something here is wrong, fix it HERE so every page gets the fix
   — the alternative is nine areas each solving "what does a table look like"
   slightly differently, which is what this replaces.

   ⚠️ EVERY SELECTOR IS SINGLE-CLASS AND UNSCOPED-SAFE. No element selectors, no
   descendant chains like `.aps-card h2`. That shape is what let
   `.aps-ops h1,h2,h3` (0,1,1) silently outrank a single-class heading rule and
   made a deployed CSS fix do nothing. Specificity here stays flat at 0,1,0 so an
   area stylesheet can always override with one extra class.

   Logical properties throughout: LTR operations and RTL Persian from one rule.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────── page furniture */

.aps-page        { max-inline-size: var(--content-max); margin-inline: auto; padding: var(--sp-4); }
.aps-page-head   { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline;
                   justify-content: space-between; margin-block-end: var(--sp-5); }
.aps-title       { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--aps-ink);
                   line-height: var(--lh-tight); margin: 0; }
.aps-subtitle    { font-size: var(--fs-sm); color: var(--aps-muted); margin: var(--sp-1) 0 0; }
.aps-section     { font-size: var(--fs-xl); font-weight: var(--fw-semi); color: var(--aps-ink);
                   margin-block: var(--sp-6) var(--sp-3); }

/* ───────────────────────────────────────────────────────────────────── card */

.aps-card        { background: var(--aps-card); border: 1px solid var(--aps-line);
                   border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-xs); }
.aps-card-head   { display: flex; gap: var(--sp-3); align-items: center;
                   justify-content: space-between; margin-block-end: var(--sp-3); }
.aps-card-title  { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--aps-ink); margin: 0; }

/* A row of headline numbers. Mobile-first: stacked, then a grid at tablet. */
.aps-stats       { display: grid; gap: var(--sp-3); grid-template-columns: 1fr;
                   margin-block-end: var(--sp-5); }
.aps-stat        { background: var(--aps-card); border: 1px solid var(--aps-line);
                   border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.aps-stat__n     { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold);
                   color: var(--aps-navy-dark); line-height: var(--lh-tight); }
.aps-stat__l     { display: block; font-size: var(--fs-xs); color: var(--aps-muted);
                   margin-block-start: var(--sp-1); }
.aps-stat--warn .aps-stat__n { color: var(--aps-warn); }
.aps-stat--ok   .aps-stat__n { color: var(--aps-ok); }

@media (min-width: 640px) { .aps-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

/* ─────────────────────────────────────────────────────────────────── status */

.aps-note        { border: 1px solid var(--aps-line); border-inline-start-width: 3px;
                   border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
                   font-size: var(--fs-sm); margin-block-end: var(--sp-4);
                   background: var(--aps-card-alt); color: var(--aps-ink-soft); }
.aps-note--ok    { background: var(--aps-ok-bg);   border-color: var(--aps-ok-line);   border-inline-start-color: var(--aps-ok);   color: var(--aps-ok); }
.aps-note--warn  { background: var(--aps-warn-bg); border-color: var(--aps-warn-line); border-inline-start-color: var(--aps-gold); color: var(--aps-warn); }
.aps-note--bad   { background: var(--aps-bad-bg);  border-color: var(--aps-bad-line);  border-inline-start-color: var(--aps-bad);  color: var(--aps-bad); }
.aps-note--info  { background: var(--aps-info-bg); border-color: var(--aps-info-line); border-inline-start-color: var(--aps-navy); color: var(--aps-info); }

/* ───────────────────────────────────────────────────────────────────── pill */

.aps-pill        { display: inline-flex; align-items: center; gap: var(--sp-1);
                   font-size: var(--fs-xs); font-weight: var(--fw-med);
                   padding: 2px var(--sp-2); border-radius: var(--r-pill);
                   background: var(--aps-n-100); color: var(--aps-ink-soft);
                   border: 1px solid var(--aps-line); white-space: nowrap; }
.aps-pill--ok    { background: var(--aps-ok-bg);   color: var(--aps-ok);   border-color: var(--aps-ok-line); }
.aps-pill--warn  { background: var(--aps-warn-bg); color: var(--aps-warn); border-color: var(--aps-warn-line); }
.aps-pill--bad   { background: var(--aps-bad-bg);  color: var(--aps-bad);  border-color: var(--aps-bad-line); }
.aps-pill--info  { background: var(--aps-info-bg); color: var(--aps-info); border-color: var(--aps-info-line); }
.aps-pill--quiet { background: transparent; color: var(--aps-muted); border-style: dashed; }

/* A username. Always shown beside a display name — two pairs on this estate are
   one letter apart, and a name alone has picked the wrong person before. */
.aps-sam         { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                   font-size: var(--fs-xs); color: var(--aps-muted);
                   background: var(--aps-n-100); border-radius: var(--r-sm);
                   padding: 1px var(--sp-1); }

/* ─────────────────────────────────────────────────────────────────── button */

.aps-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-block-size: var(--tap-min); padding-inline: var(--sp-4); padding-block: var(--sp-2);
    border-radius: var(--r-md); border: 1px solid transparent;
    background: var(--aps-primary); color: var(--aps-primary-ink);
    font-size: var(--fs-md); font-weight: var(--fw-semi); font-family: inherit;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aps-btn:hover        { background: var(--aps-navy-dark); }
.aps-btn:active       { background: var(--aps-navy-deep); }
.aps-btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.aps-btn[disabled]    { opacity: .55; cursor: not-allowed; }

.aps-btn--ghost  { background: var(--aps-card); color: var(--aps-navy-dark); border-color: var(--aps-line-strong); }
.aps-btn--ghost:hover  { background: var(--aps-n-100); }
.aps-btn--ghost:active { background: var(--aps-n-200); }

.aps-btn--action { background: var(--aps-action); }
.aps-btn--action:hover { background: var(--aps-orange-dark); }

.aps-btn--danger { background: var(--aps-card); color: var(--aps-bad); border-color: var(--aps-bad-line); }
.aps-btn--danger:hover { background: var(--aps-bad-bg); }

.aps-btn--sm     { min-block-size: 30px; padding-inline: var(--sp-3); font-size: var(--fs-sm); }

/* ───────────────────────────────────────────────────────────────────── form */

.aps-field       { display: block; margin-block-end: var(--sp-3); }
.aps-label       { display: block; font-size: var(--fs-sm); font-weight: var(--fw-med);
                   color: var(--aps-ink-soft); margin-block-end: var(--sp-1); }
.aps-hint        { display: block; font-size: var(--fs-xs); color: var(--aps-muted);
                   margin-block-start: var(--sp-1); }

.aps-input {
    inline-size: 100%; min-block-size: var(--tap-min);
    padding-inline: var(--sp-3); padding-block: var(--sp-2);
    border: 1px solid var(--aps-line-strong); border-radius: var(--r-md);
    background: var(--aps-card); color: var(--aps-ink);
    font-size: var(--fs-md); font-family: inherit;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aps-input:hover        { border-color: var(--aps-n-400); }
.aps-input:focus-visible{ outline: none; border-color: var(--aps-navy); box-shadow: var(--focus-ring); }
.aps-input--sm   { min-block-size: 30px; font-size: var(--fs-sm); }
textarea.aps-input { min-block-size: 84px; resize: vertical; line-height: var(--lh-body); }

.aps-check       { display: flex; align-items: flex-start; gap: var(--sp-2);
                   font-size: var(--fs-sm); color: var(--aps-ink-soft); }
.aps-check input { inline-size: 18px; block-size: 18px; margin-block-start: 2px; flex: none; }

.aps-form-row    { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; }

/* ──────────────────────────────────────────────────────────────────── table */

.aps-table       { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.aps-table th    { text-align: start; font-weight: var(--fw-semi); color: var(--aps-ink-soft);
                   font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
                   padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--aps-line-strong);
                   background: var(--aps-n-50); white-space: nowrap; }
.aps-table td    { padding: var(--sp-3); border-block-end: 1px solid var(--aps-line);
                   color: var(--aps-ink); vertical-align: top; }
.aps-table tbody tr:hover td { background: var(--aps-n-25); }
.aps-table tbody tr:last-child td { border-block-end: none; }

/* ⚠️ A wide table SCROLLS INSIDE THIS, never widens the page. At 390px the body
   must not scroll sideways or the whole layout feels broken. */
.aps-tablewrap   { overflow-x: auto; border: 1px solid var(--aps-line);
                   border-radius: var(--r-lg); background: var(--aps-card); }

/* ───────────────────────────────────────────────────────────────────── tree */
/*
   THE DEPTH SPINE.

   This company logs wells for a living: depth is the axis its whole trade is
   organised around. So organisational depth is drawn the way a depth track is —
   a continuous spine per level with a tick into each node — rather than as an
   indented list with a hairline. It is the one deliberate flourish on the page;
   everything around it stays quiet.

   ⚠️ WHY THE RAIL IS A BORDER ON THE <ul>, NOT A PSEUDO-ELEMENT PER NODE.
   The previous version drew the guide with `.aps-node::before` positioned at a
   negative offset and sized `block-size: 100%`. It was reported as invisible,
   and per-node absolute positioning has too many ways to fail quietly — a
   stacking context, an overflow, a parent without position. A border on the list
   ITSELF always renders. The elbow is the only pseudo-element left, and if it
   ever fails the spine still shows the hierarchy.

   ⚠️ RTL-SAFE. margin-inline-start, border-inline-start, inset-inline-start:
   the whole structure mirrors for Persian with no second set of rules.
*/

.aps-tree { list-style: none; margin: 0; padding: 0; }

.aps-tree ul {
    list-style: none;
    margin: 0;
    /* The spine sits at the parent chevron's centre line, so a child traces
       straight back to the control that opened it. */
    margin-inline-start: 15px;
    padding-inline-start: var(--tree-indent, 40px);
    border-inline-start: 2px solid var(--aps-rail, var(--aps-n-300));
}

.aps-node { position: relative; margin-block-start: var(--sp-2); }

/* The tick into each node. 2px to match the spine — a 1px elbow off a 2px rail
   reads as a rendering artefact rather than a connector. */
.aps-node::before {
    content: "";
    position: absolute;
    inset-block-start: 21px;
    inset-inline-start: calc(var(--tree-indent, 40px) * -1);
    inline-size: calc(var(--tree-indent, 40px) - 8px);
    block-size: 2px;
    background: var(--aps-rail, var(--aps-n-300));
}

/* ⚠️ THE LAST CHILD MASKS THE SPINE BELOW ITS OWN TICK, so the rail stops at the
   final node instead of running on into nothing. That truncation is the detail
   that separates a tree from an indented list. The mask is painted in the page
   background, so it must be updated if a branch ever sits on a tinted surface. */
.aps-node:last-child::after {
    content: "";
    position: absolute;
    inset-block-start: 23px;
    inset-block-end: -8px;
    inset-inline-start: calc(var(--tree-indent, 40px) * -1 - 2px);
    inline-size: 2px;
    background: var(--aps-bg);
}

/* A node with no visible children must not trail a spine into empty space. */
.aps-node:has(> ul[hidden])::after { content: none; }

.aps-node__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

/* The expander. A chevron that rotates on state — the convention every design
   system with a serious tree settled on, and it reads at a glance where +/− has
   to be decoded. */
.aps-toggle {
    inline-size: 26px; block-size: 26px; flex: none;
    display: inline-grid; place-items: center;
    border: 1px solid var(--aps-line); border-radius: var(--r-sm);
    background: var(--aps-card); color: var(--aps-n-500);
    cursor: pointer; padding: 0;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.aps-toggle:hover { background: var(--aps-navy); border-color: var(--aps-navy); color: #fff; }
.aps-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.aps-toggle__chevron {
    inline-size: 7px; block-size: 7px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--dur) var(--ease);
    margin-inline-start: -2px;
}
.aps-toggle[aria-expanded="true"] .aps-toggle__chevron {
    transform: rotate(45deg); margin-block-start: -3px; margin-inline-start: 0;
}

.aps-toggle__leaf { inline-size: 26px; flex: none; }

.aps-tree [hidden] { display: none !important; }

.aps-muted       { color: var(--aps-muted); }
.aps-nowrap      { white-space: nowrap; }