/* ============================================
   NEEDS ACTION — triage drilldown
   Mirrors mockups/needs-action-white.html structure & dimensions
   exactly, but skinned via theme tokens so it auto-flips dark↔light.
   Class names use a `na-` prefix to avoid collisions with the
   existing dashboard CSS.
   ============================================ */

/* ── Stat-card "Needs Action" entry point ────────────────── */
.stat-card[data-tile="needs-action"] {
    cursor: pointer;
    transition: box-shadow .18s, transform .15s, border-color .15s;
    position: relative;
    border-color: var(--sev-crit);
}
.stat-card[data-tile="needs-action"]:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card[data-tile="needs-action"].is-open {
    border-color: var(--sev-crit);
    box-shadow: 0 0 0 2px var(--sev-crit-tint), var(--shadow-sm);
}
.stat-card[data-tile="needs-action"] .stat-icon { background: var(--sev-crit-tint); }
.stat-card[data-tile="needs-action"] .stat-value { color: var(--sev-crit); }
.stat-card[data-tile="needs-action"] .na-chevron {
    position: absolute; top: 10px; right: 10px;
    color: var(--sev-crit); font-size: .75rem;
    transition: transform .2s ease;
}
.stat-card[data-tile="needs-action"].is-open .na-chevron { transform: rotate(180deg); }

/* ── Drill-down outer animation wrapper ──────────────────── */
.na-drilldown {
    overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease;
    max-height: 0; opacity: 0;
    margin: 0 1rem;
}
.na-drilldown.is-open { max-height: 5000px; opacity: 1; margin-top: .55rem; margin-bottom: 1rem; }
.na-drilldown[hidden] { display: none; }

.na-drill-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    font-family: var(--na-font-sans);
}

/* ── Distribution meter (top section) ─────────────────────── */
.na-dist-meter {
    padding: .85rem 1.1rem;
    background: var(--bg-row-alt);
    border-bottom: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.1rem;
    align-items: center;
}
.na-dm-total .num {
    font-family: var(--na-font-mono);
    font-size: 1.7rem; font-weight: 700; line-height: 1;
    color: var(--sev-crit);
    display: block;
}
.na-dm-total .lbl {
    font-size: .55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-muted);
    display: block; margin-top: .2rem;
}
.na-dm-bar {
    display: flex; height: 10px; border-radius: 999px; overflow: hidden;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.na-dm-bar > span { display: block; height: 100%; transition: width .25s ease; }
.na-dm-bar .seg-crit  { background: var(--sev-crit); }
.na-dm-bar .seg-imm   { background: var(--sev-imm); }
.na-dm-bar .seg-docs  { background: var(--sev-docs); }
.na-dm-bar .seg-comp  { background: var(--sev-comp); }
.na-dm-bar .seg-stock { background: var(--sev-stock); }

.na-dm-legend {
    display: flex; gap: 1rem; margin-top: .5rem; flex-wrap: wrap;
    font-size: .65rem; color: var(--text-muted);
}
.na-dm-legend .item { display: inline-flex; align-items: center; gap: .4rem; }
.na-dm-legend .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.na-dm-legend .swatch.crit  { background: var(--sev-crit); }
.na-dm-legend .swatch.imm   { background: var(--sev-imm); }
.na-dm-legend .swatch.docs  { background: var(--sev-docs); }
.na-dm-legend .swatch.comp  { background: var(--sev-comp); }
.na-dm-legend .swatch.stock { background: var(--sev-stock); }
.na-dm-legend strong { color: var(--text-primary); font-family: var(--na-font-mono); }

.na-dm-search-wrap { position: relative; }
.na-dm-search-wrap > i {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .7rem; pointer-events: none;
}
.na-dm-search {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: .4rem .65rem .4rem 1.95rem;
    color: var(--text-primary);
    font-size: .72rem;
    font-family: inherit;
    width: 220px;
    transition: border-color .15s, box-shadow .15s;
}
.na-dm-search:focus {
    outline: none;
    border-color: var(--sev-comp);
    box-shadow: 0 0 0 3px var(--sev-comp-tint);
}

/* ── Filter bar ──────────────────────────────────────────── */
.na-filterbar {
    display: flex; gap: .4rem;
    padding: .65rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; align-items: center;
    background: var(--bg-secondary);
}
.na-pill {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: .3rem .7rem;
    font-size: .65rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: all .12s; line-height: 1;
    font-family: inherit;
}
.na-pill:hover {
    border-color: var(--na-border-strong);
    color: var(--text-primary);
    background: var(--bg-row-alt);
}
.na-pill.is-active {
    background: var(--bg-tertiary);
    border-color: var(--na-border-strong);
    color: var(--text-primary);
}
.na-pill .na-pill-count {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-family: var(--na-font-mono); font-size: .58rem; font-weight: 700;
    padding: .08rem .42rem; border-radius: 999px;
    border: 1px solid var(--border-color);
}
.na-pill.is-active.cat-crit  { border-color: var(--sev-crit);  color: var(--sev-crit);  background: var(--sev-crit-tint); }
.na-pill.is-active.cat-imm   { border-color: var(--sev-imm);   color: var(--sev-imm);   background: var(--sev-imm-tint); }
.na-pill.is-active.cat-docs  { border-color: var(--sev-docs);  color: var(--sev-docs);  background: var(--sev-docs-tint); }
.na-pill.is-active.cat-comp  { border-color: var(--sev-comp);  color: var(--sev-comp);  background: var(--sev-comp-tint); }
.na-pill.is-active.cat-stock { border-color: var(--sev-stock); color: var(--sev-stock); background: var(--sev-stock-tint); }
.na-pill.is-active.cat-dismissed { border-color: var(--text-muted); color: var(--text-muted); opacity: .85; }

.na-pill.is-active.cat-crit  .na-pill-count { background: var(--sev-crit-tint);  color: var(--sev-crit);  border-color: transparent; }
.na-pill.is-active.cat-imm   .na-pill-count { background: var(--sev-imm-tint);   color: var(--sev-imm);   border-color: transparent; }
.na-pill.is-active.cat-docs  .na-pill-count { background: var(--sev-docs-tint);  color: var(--sev-docs);  border-color: transparent; }
.na-pill.is-active.cat-comp  .na-pill-count { background: var(--sev-comp-tint);  color: var(--sev-comp);  border-color: transparent; }
.na-pill.is-active.cat-stock .na-pill-count { background: var(--sev-stock-tint); color: var(--sev-stock); border-color: transparent; }

.na-sort {
    margin-left: auto;
    display: flex; align-items: center; gap: .4rem;
    font-size: .65rem; color: var(--text-muted);
}
.na-sort select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    border-radius: var(--radius-sm);
    padding: .3rem .5rem;
    font-size: .65rem; cursor: pointer; font-family: inherit;
}

/* ── Triage queue ────────────────────────────────────────── */
.na-queue { background: var(--bg-secondary); }

.na-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
}

/* ── "N permanently dismissed" footnote ──────────────────────
   A COUNT, not a list. A permanent dismissal is stripped out of the
   API payload entirely (NeedsActionController::buildQueue), so this
   line is the only trace it leaves on the tab; the audit trail is the
   position log. Muted on purpose — it is a footnote, not a queue. */
.na-hidden-note {
    padding: .5rem 1.1rem .6rem;
    background: var(--bg-row-alt);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .63rem;
    display: flex; align-items: center; gap: .45rem;
    line-height: 1.4;
}
.na-hidden-note i { font-size: .58rem; opacity: .85; }

.na-row {
    display: grid;
    grid-template-columns: 4px 22px 1fr auto auto;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
    transition: background .15s;
}
.na-row:nth-child(even) { background: var(--bg-row-alt); }
.na-row:last-child { border-bottom: none; }
.na-row:hover { background: var(--bg-row-hover); }
.na-row.is-expanded { background: var(--bg-row-hover); }
/* Dismissed rows: tone down the body text but keep the rail/icon at full
   contrast so the severity stays readable. */
.na-row.is-dismissed { background: var(--bg-row-alt); }
.na-row.is-dismissed .na-body,
.na-row.is-dismissed .na-age { opacity: .65; }

.na-rail { align-self: stretch; background: var(--border-color); }
.na-row.sev-crit  .na-rail { background: var(--sev-crit); }
.na-row.sev-imm   .na-rail { background: var(--sev-imm); }
.na-row.sev-docs  .na-rail { background: var(--sev-docs); }
.na-row.sev-comp  .na-rail { background: var(--sev-comp); }
.na-row.sev-stock .na-rail { background: var(--sev-stock); }

.na-icon {
    color: var(--text-muted);
    font-size: .8rem;
    width: 22px; text-align: center;
}
.na-row.sev-crit  .na-icon { color: var(--sev-crit); }
.na-row.sev-imm   .na-icon { color: var(--sev-imm); }
.na-row.sev-docs  .na-icon { color: var(--sev-docs); }
.na-row.sev-comp  .na-icon { color: var(--sev-comp); }
.na-row.sev-stock .na-icon { color: var(--sev-stock); }

.na-body {
    padding: .55rem 0;
    display: flex; align-items: center; gap: .7rem;
    flex-wrap: nowrap; overflow: hidden; min-width: 0;
}
.na-file {
    font-family: var(--na-font-mono); font-weight: 600;
    font-size: .78rem; color: var(--text-primary);
    flex-shrink: 0;
}
.na-customer {
    font-size: .72rem; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px; flex-shrink: 0;
}
.na-container {
    font-family: var(--na-font-mono); font-size: .65rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.na-badges {
    display: flex; gap: .3rem;
    flex-shrink: 1; min-width: 0; overflow: hidden;
}

.na-badge {
    font-size: .55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .14rem .42rem; border-radius: 3px;
    display: inline-flex; align-items: center; gap: .28rem;
    white-space: nowrap; line-height: 1;
}
.na-badge i { font-size: .5rem; }
.na-badge.bd-t1      { background: var(--sev-crit-tint);  color: var(--sev-crit); }
.na-badge.bd-permit  { background: var(--sev-imm-tint);   color: var(--sev-imm); }
.na-badge.bd-pkg     { background: var(--sev-docs-tint);  color: var(--sev-docs); }
.na-badge.bd-phyto   { background: var(--sev-docs-tint);  color: var(--sev-docs); }
.na-badge.bd-nvwa    { background: var(--sev-comp-tint);  color: var(--sev-comp); }
.na-badge.bd-kcb     { background: var(--sev-comp-tint);  color: var(--sev-comp); }
.na-badge.bd-freight { background: var(--sev-imm-tint);   color: var(--sev-imm); }
.na-badge.bd-stock   { background: var(--sev-stock-tint); color: var(--sev-stock); }
.na-badge.bd-eta     { background: var(--sev-imm-tint);   color: var(--sev-imm); }

.na-age {
    font-family: var(--na-font-mono); font-size: .66rem;
    color: var(--text-muted);
    padding: .25rem .55rem; border-radius: 5px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    min-width: 56px; text-align: center; flex-shrink: 0;
}
.na-row.sev-crit .na-age,
.na-row.sev-imm  .na-age {
    color: var(--sev-crit);
    background: var(--sev-crit-tint);
    border-color: var(--sev-crit);
    font-weight: 700;
}
.na-row.sev-imm .na-age {
    color: var(--sev-imm);
    background: var(--sev-imm-tint);
    border-color: var(--sev-imm);
}

.na-actions {
    display: flex; gap: .25rem;
    padding-right: .85rem;
    opacity: 0; transform: translateX(4px);
    transition: opacity .15s, transform .15s;
}
.na-row:hover .na-actions,
.na-row.is-expanded .na-actions { opacity: 1; transform: translateX(0); }

.na-q-btn {
    width: 26px; height: 26px;
    border-radius: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem;
    transition: all .12s;
}
.na-q-btn:hover {
    color: var(--na-navy);
    border-color: var(--na-navy);
    background: var(--na-navy-tint);
}
.na-q-btn.danger:hover  { color: var(--sev-crit); border-color: var(--sev-crit); background: var(--sev-crit-tint); }
.na-q-btn.dismiss:hover { color: var(--sev-imm);  border-color: var(--sev-imm);  background: var(--sev-imm-tint); }

/* ── Inline expanded detail ──────────────────────────────── */
.na-detail {
    grid-column: 1 / -1;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: .85rem 1.1rem 1rem 1.5rem;
    display: none;
}
.na-row.is-expanded .na-detail { display: block; }

.na-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .65rem 1.25rem;
    font-size: .72rem;
    margin-bottom: .6rem;
}
.na-meta-grid .key {
    font-size: .55rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted); font-weight: 700;
    margin-bottom: .15rem;
}
.na-meta-grid .val { color: var(--text-primary); font-weight: 500; }
.na-meta-grid .val.mono { font-family: var(--na-font-mono); }

.na-reason-list {
    list-style: none; padding: 0; margin: .35rem 0 .65rem;
    font-size: .72rem;
}
.na-reason-list li {
    padding: .35rem 0;
    border-bottom: 1px dashed var(--border-color);
    display: flex; align-items: flex-start; gap: .55rem;
    color: var(--text-secondary);
}
.na-reason-list li:last-child { border-bottom: none; }
.na-reason-list i.crit { color: var(--sev-crit); margin-top: .15rem; }
.na-reason-list i.warn { color: var(--sev-imm);  margin-top: .15rem; }
.na-reason-list strong { color: var(--text-primary); }

.na-cta-row {
    display: flex; gap: .4rem; flex-wrap: wrap;
    padding-top: .35rem; border-top: 1px solid var(--border-color);
    margin-top: .35rem;
}
.na-cta {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: .4rem .7rem;
    font-size: .68rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: all .12s; line-height: 1;
    font-family: inherit;
}
.na-cta:hover { border-color: var(--na-navy); color: var(--na-navy); }
.na-cta.primary {
    background: var(--sev-crit); border-color: var(--sev-crit); color: #fff;
}
.na-cta.primary:hover {
    background: var(--sev-crit); filter: brightness(1.05); color: #fff;
}
.na-cta.is-active {
    background: var(--na-navy); border-color: var(--na-navy); color: #fff;
}
.na-cta.dismiss {
    background: transparent;
    border-color: var(--sev-imm); color: var(--sev-imm);
    margin-left: auto;
}
.na-cta.dismiss:hover {
    background: var(--sev-imm-tint);
    border-color: var(--sev-imm); color: var(--sev-imm);
}

/* ── Tool panes (inline, slide-in) ───────────────────────── */
.na-tool-pane {
    margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
    background: var(--bg-row-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: max-height .3s, opacity .2s, margin-top .3s;
}
.na-tool-pane.is-open {
    margin-top: .65rem; max-height: 1500px; opacity: 1;
}
.na-tp-header {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .85rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.na-tp-title {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-primary);
    display: inline-flex; align-items: center; gap: .4rem;
}
.na-tp-title i { color: var(--na-navy); }
.na-tp-hint {
    flex: 1; font-size: .62rem; color: var(--text-muted); line-height: 1.4;
}
.na-tp-hint code {
    background: var(--bg-row-alt);
    padding: .02rem .28rem; border-radius: 3px;
    font-family: var(--na-font-mono);
    color: var(--na-navy); font-size: .58rem;
    border: 1px solid var(--border-color);
}
.na-tp-close {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-muted); width: 22px; height: 22px;
    border-radius: 4px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .6rem; flex-shrink: 0;
}
.na-tp-close:hover { color: var(--text-primary); border-color: var(--na-border-strong); }
.na-tp-body { padding: .85rem; }

/* ── Mini positions table (Position tool pane) ───────────── */
.na-mini-positions {
    width: 100%; border-collapse: collapse;
    font-size: .68rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--border-color);
}
.na-mini-positions th {
    background: var(--bg-row-alt);
    color: var(--text-muted);
    font-size: .5rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: .45rem .55rem; text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.na-mini-positions td {
    padding: .45rem .55rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.na-mini-positions tr:last-child td { border-bottom: none; }
.na-mini-positions .mono { font-family: var(--na-font-mono); font-size: .65rem; }
.na-mp-pill {
    display: inline-block;
    padding: .12rem .42rem; border-radius: 3px;
    font-size: .55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.na-mp-pill.warn   { background: var(--sev-imm-tint);   color: var(--sev-imm); }
.na-mp-pill.ok     { background: var(--sev-stock-tint); color: var(--sev-stock); }
.na-mp-pill.bad    { background: var(--sev-crit-tint);  color: var(--sev-crit); }
.na-mp-pill.info   { background: var(--sev-comp-tint);  color: var(--sev-comp); }
.na-mp-pill.muted  { background: var(--bg-tertiary);    color: var(--text-muted); }

/* horizontal scroll for the wide mini-positions table on small screens */
.na-mini-wrap { overflow-x: auto; }

.na-tp-footer {
    display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
    margin-top: .75rem; padding-top: .65rem;
    border-top: 1px dashed var(--border-color);
}
.na-tp-log-hint {
    margin-left: auto; font-size: .62rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: .35rem;
}
.na-tp-log-hint code {
    background: var(--bg-row-alt);
    padding: .02rem .28rem; border-radius: 3px;
    font-family: var(--na-font-mono);
    color: var(--na-navy); font-size: .58rem;
    border: 1px solid var(--border-color);
}

/* ── Dismiss form (inline within row detail) ─────────────── */
.na-dismiss-form {
    margin-top: .65rem;
    padding: .65rem .75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: none;
    font-size: .7rem;
}
.na-dismiss-form.is-open { display: block; }
.na-dismiss-form h6 {
    margin: 0 0 .35rem; font-size: .55rem;
    color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.na-dismiss-form textarea {
    width: 100%;
    min-height: 50px;
    padding: .4rem .55rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    border-radius: var(--radius-sm);
    font-family: inherit; font-size: .7rem;
    resize: vertical;
}
.na-dismiss-form .na-scope-row {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin: .5rem 0;
}
.na-dismiss-form .na-scope-row label {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .65rem;
    color: var(--text-secondary); cursor: pointer;
    padding: .25rem .55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    transition: all .12s;
}
.na-dismiss-form .na-scope-row label:hover {
    border-color: var(--na-border-strong); color: var(--text-primary);
}
.na-dismiss-form .na-scope-row input[type=radio] { accent-color: var(--na-navy); }
.na-dismiss-form .na-scope-row label:has(input:checked) {
    background: var(--na-navy);
    border-color: var(--na-navy);
    color: #fff;
}
/* PERMANENT is the one irreversible choice on this form, so it wears the
   dismiss colour rather than the navy the other two share. */
.na-dismiss-form .na-scope-row label.is-permanent:has(input:checked) {
    background: var(--sev-imm);
    border-color: var(--sev-imm);
    color: #fff;
}
.na-dismiss-form .na-scope-hint {
    margin: 0 0 .5rem;
    font-size: .62rem; line-height: 1.5;
    color: var(--text-muted);
    display: flex; align-items: flex-start; gap: .4rem;
}
.na-dismiss-form .na-scope-hint i { color: var(--sev-imm); margin-top: .15rem; flex-shrink: 0; }
.na-dismiss-form .na-scope-hint strong { color: var(--text-primary); }

/* ============================================================
   LIGHT THEME — the tab's own buttons
   ============================================================
   WHY THIS BLOCK EXISTS. css/themes.css repaints every <button> on the
   page in light mode, with !important:

       [data-theme="light"] button  { background:#fff!important;
                                      color:#102033!important;
                                      border:1px solid #b9cedb!important; }
       [data-theme="light"] em, i   { color:#334155!important; }
       [data-theme="light"] label   { color:#33465a!important; }

   That is what washed the tab out: the primary CTA, the amber dismiss
   button and all seven filter pills flattened into the same white chip,
   every Font Awesome glyph inside them went slate, and the SELECTED
   scope pill in the dismiss form rendered dark-navy-on-slate — its
   `color:#fff` losing to the `label` rule above.

   The rules below are scoped `[data-theme="light"] .na-*` — specificity
   (0,2,0), which beats themes.css's (0,1,1) element selectors — and
   carry !important to meet its !important head-on. Icons are re-pointed
   at `currentColor` so a glyph always wears its button's text colour.

   PALETTE — solid backgrounds, WHITE text, every pair ≥4.5:1 on white:
     primary / active     Harbor marine  #0a5989 → hover #0d6db0
     destructive / dismiss deep amber    #a8631a → hover #8a4f12
     critical accent      deep red       #b03a2e → hover #8f2d23
     secondary / muted    dark slate     #3d5165 → hover #2b3b4d
     disabled             pale slate on #eef4f8 (must NOT read clickable)

   NOT TOUCHED: the search input and the sort <select>. They are form
   fields, not affordances — white-with-dark-text is what a text field
   is supposed to look like, and themes.css already gives them the
   Harbor treatment.

   DARK THEME IS UNTOUCHED: nothing here matches without the
   data-theme="light" attribute. There is no "system light" case to
   cover — js/theme-manager.js is the only thing that sets data-theme
   (defaulting to 'dark'), and the app carries no prefers-color-scheme
   rule anywhere in css/ or js/.
   ============================================================ */

/* Glyphs follow their button's text colour, in every button of the tab. */
[data-theme="light"] .na-pill i,
[data-theme="light"] .na-q-btn i,
[data-theme="light"] .na-cta i,
[data-theme="light"] .na-tp-close i,
[data-theme="light"] .na-scope-row label i {
    color: currentColor !important;
}

/* ── Filter pills ─────────────────────────────────────────── */
[data-theme="light"] .na-pill {
    background: #3d5165 !important;
    border-color: #3d5165 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-pill:hover {
    background: #2b3b4d !important;
    border-color: #2b3b4d !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-pill .na-pill-count {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
/* The SELECTED pill wears its own severity, solid — that is the whole
   point of the filter bar, and a tint-with-coloured-text version of it
   is exactly what read as washed out. */
[data-theme="light"] .na-pill.is-active {
    background: #0a5989 !important;
    border-color: #0a5989 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-pill.is-active.cat-crit      { background: #b03a2e !important; border-color: #b03a2e !important; color: #ffffff !important; }
[data-theme="light"] .na-pill.is-active.cat-imm       { background: #96631a !important; border-color: #96631a !important; color: #ffffff !important; }
[data-theme="light"] .na-pill.is-active.cat-docs      { background: #8a5f14 !important; border-color: #8a5f14 !important; color: #ffffff !important; }
[data-theme="light"] .na-pill.is-active.cat-comp      { background: #14708a !important; border-color: #14708a !important; color: #ffffff !important; }
[data-theme="light"] .na-pill.is-active.cat-stock     { background: #2c7449 !important; border-color: #2c7449 !important; color: #ffffff !important; }
[data-theme="light"] .na-pill.is-active.cat-dismissed { background: #2b3b4d !important; border-color: #2b3b4d !important; color: #ffffff !important; opacity: 1; }
[data-theme="light"] .na-pill.is-active .na-pill-count {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* ── Row icon buttons ─────────────────────────────────────── */
[data-theme="light"] .na-q-btn {
    background: #3d5165 !important;
    border-color: #3d5165 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-q-btn:hover {
    background: #0a5989 !important;
    border-color: #0a5989 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-q-btn.danger:hover {
    background: #b03a2e !important;
    border-color: #b03a2e !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-q-btn.dismiss {
    background: #a8631a !important;
    border-color: #a8631a !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-q-btn.dismiss:hover {
    background: #8a4f12 !important;
    border-color: #8a4f12 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-q-btn:disabled,
[data-theme="light"] .na-q-btn:disabled:hover {
    background: #eef4f8 !important;
    border-color: #d6e2ea !important;
    color: #8496a8 !important;
    cursor: not-allowed;
}

/* ── Detail-pane CTAs ─────────────────────────────────────── */
[data-theme="light"] .na-cta {
    background: #3d5165 !important;
    border-color: #3d5165 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-cta:hover {
    background: #2b3b4d !important;
    border-color: #2b3b4d !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-cta.primary,
[data-theme="light"] .na-cta.is-active {
    background: #0a5989 !important;
    border-color: #0a5989 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-cta.primary:hover,
[data-theme="light"] .na-cta.is-active:hover {
    background: #0d6db0 !important;
    border-color: #0d6db0 !important;
    color: #ffffff !important;
    filter: none;
}
/* Dismiss, and the confirm button that commits it, stay in the amber
   family the tab already uses for "silence this". Listed AFTER .primary
   because the confirm button carries both classes at equal specificity. */
[data-theme="light"] .na-cta.dismiss,
[data-theme="light"] .na-cta[data-na-dismiss-confirm] {
    background: #a8631a !important;
    border-color: #a8631a !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-cta.dismiss:hover,
[data-theme="light"] .na-cta[data-na-dismiss-confirm]:hover {
    background: #8a4f12 !important;
    border-color: #8a4f12 !important;
    color: #ffffff !important;
}
/* LAST in the group: a Phase-2 placeholder must not look pressable, no
   matter which of the classes above it also carries. */
[data-theme="light"] .na-cta:disabled,
[data-theme="light"] .na-cta:disabled:hover {
    background: #eef4f8 !important;
    border-color: #d6e2ea !important;
    color: #7b8b9c !important;
    cursor: not-allowed;
    filter: none;
}

/* ── Tool-pane close ──────────────────────────────────────── */
[data-theme="light"] .na-tp-close {
    background: #3d5165 !important;
    border-color: #3d5165 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-tp-close:hover {
    background: #b03a2e !important;
    border-color: #b03a2e !important;
    color: #ffffff !important;
}

/* ── Dismiss form: scope picker ───────────────────────────────
   The UNSELECTED scopes stay light on purpose: three solid dark chips
   would make the chosen one impossible to spot, and choosing is the
   only thing this control does. Selected = solid, and PERMANENT gets
   the dismiss amber because it is the irreversible one. */
[data-theme="light"] .na-dismiss-form .na-scope-row label {
    background: #ffffff !important;
    border-color: #b9cedb !important;
    color: #33465a !important;
}
[data-theme="light"] .na-dismiss-form .na-scope-row label:hover {
    border-color: #0a5989 !important;
    color: #0a5989 !important;
}
[data-theme="light"] .na-dismiss-form .na-scope-row label:has(input:checked) {
    background: #0a5989 !important;
    border-color: #0a5989 !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-dismiss-form .na-scope-row label.is-permanent:has(input:checked) {
    background: #a8631a !important;
    border-color: #a8631a !important;
    color: #ffffff !important;
}
[data-theme="light"] .na-dismiss-form .na-scope-hint {
    color: #536579 !important;
}
[data-theme="light"] .na-dismiss-form .na-scope-hint i { color: #a8631a !important; }
[data-theme="light"] .na-dismiss-form .na-scope-hint strong { color: #102033 !important; }

/* Footnote: muted, and it must stay muted — it is not a button. */
[data-theme="light"] .na-hidden-note {
    background: #f2f6f9 !important;
    color: #536579 !important;
    border-top-color: #d6e2ea !important;
}
[data-theme="light"] .na-hidden-note i { color: #7b8b9c !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .na-dist-meter { grid-template-columns: auto 1fr; }
    .na-dm-search-wrap { grid-column: 1 / -1; }
    .na-dm-search { width: 100%; box-sizing: border-box; }
}
@media (max-width: 760px) {
    .na-row .na-customer { max-width: 120px; }
    .na-row .na-container { display: none; }
}