/* Resource Nodes screens. Shared pieces (colors, type, buttons, tables, pills, KPIs,
 * bar lists, dialog, toasts) come from kit/; this file holds the field table, the
 * node strip, the detail column and the small harvest progress bar, using kit tokens only. */

/* ---------------------------------------------------------------- field status pills */

/* Names come from RN.FieldStatus in shared/core.lua. */
.pill.healthy  { --status: var(--success); --i: var(--icon-check); }
.pill.draining { --status: var(--warning); --i: var(--icon-down); }
.pill.low      { --status: var(--danger);  --i: var(--icon-warning); }
.pill.empty    { --status: var(--danger);  --i: var(--icon-error); }
.pill.frozen   { --status: var(--info);    --i: var(--icon-frozen); }

/* ---------------------------------------------------------------- layout */

.admin-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(22rem, 1fr); gap: var(--sp-3); align-items: start; }
.side { display: flex; flex-direction: column; gap: var(--sp-3); }
.note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); max-width: 80ch; }

/* ---------------------------------------------------------------- field table */

#fields tbody tr { cursor: pointer; }
#fields tbody tr.selected td { background: var(--surface-3); box-shadow: inset 0 1px 0 var(--line-strong), inset 0 -1px 0 var(--line-strong); }
#fields tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--line-strong), inset 0 -1px 0 var(--line-strong); }
#fields td { vertical-align: middle; }
.fname { display: block; font-weight: 650; }
.ftype { display: block; color: var(--muted); font-size: var(--fs-sm); }
.meter { display: grid; grid-template-columns: 6rem 6.5rem; align-items: center; gap: var(--sp-2); }
.meter .track { height: .5714rem; background: var(--data-track); border-radius: var(--radius); overflow: hidden; }
.meter .fill { height: 100%; background: var(--bar, var(--data-in)); border-radius: var(--radius);
               transform-origin: left; animation: grow-x var(--dur-slow) var(--ease-out); }
.meter .fill.low { --bar: var(--data-out); }
.meter span { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; }
.acts { display: inline-flex; gap: var(--sp-1); justify-content: flex-end; }
.acts .chip-btn { white-space: nowrap; }
td.soon { color: var(--warning); font-weight: 600; }
td.never { color: var(--muted); }

/* ---------------------------------------------------------------- detail column */

.detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.detail-head h2 { font-size: var(--fs-lg); font-weight: 700; }
.detail-head .sub { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* One column per node, filled to its stock. Number on top, node number below. */
.nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: var(--sp-2); }
.node { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); text-align: center; }
.node .cell { position: relative; height: 3.4rem; background: var(--data-track); border-radius: var(--radius); overflow: hidden;
              border: var(--border) solid var(--line); }
.node .cell .lvl { position: absolute; left: 0; right: 0; bottom: 0; background: var(--data-in);
                   transform-origin: bottom; animation: grow-y var(--dur-slow) var(--ease-out); }
.node.out .cell { border-style: dashed; border-color: var(--line-strong); }
.node b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink); }
.node small { font-size: var(--fs-sm); color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--muted); font-size: var(--fs-sm); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

#detail .bar-list .bar-row { grid-template-columns: minmax(6rem, 9rem) 1fr minmax(3.5rem, auto); }
#detail td:nth-child(2) { font-weight: 600; }

/* ---------------------------------------------------------------- harvest progress (in world, no shell) */

.progress {
    position: fixed; left: 50%; bottom: 9vh; transform: translateX(-50%); width: 26rem;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-1); border: var(--border) solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
.progress-label { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); font-weight: 600; }
.progress-label span:last-child { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.progress-track { height: .5714rem; background: var(--data-track); border-radius: var(--radius); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--data-in); border-radius: var(--radius); }

#confirm .dialog { z-index: 11; }
#confirm .scrim { z-index: 10; }

@media (max-width: 1300px) {
    .admin-grid { grid-template-columns: minmax(0, 1fr); }
}