/* ============================================
   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;
}

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

/* ── 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; }
}