/* NRB Production Management System — design tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --nrb-ink:        #0E1320;     /* operator dark bg */
  --nrb-ink-2:      #161C2D;     /* card on dark */
  --nrb-ink-3:      #1E2638;     /* elevated on dark */
  --nrb-line-d:     #2A3247;     /* hairline on dark */
  --nrb-mute-d:     #8A93A8;     /* muted text on dark */
  --nrb-text-d:     #E8EBF2;     /* primary text on dark */

  /* Light surfaces */
  --bg:             #F5F6F8;
  --surface:        #FFFFFF;
  --surface-2:      #FAFBFC;
  --line:           #E5E7EB;
  --line-2:         #EEF0F3;
  --text:           #0E1320;
  --text-2:         #4B5363;
  --mute:           #8A93A8;

  /* Status */
  --ok:             #19A974;
  --ok-soft:        #E6F6EE;
  --warn:           #F5A524;
  --warn-soft:      #FEF3DC;
  --bad:            #E5484D;
  --bad-soft:       #FCE7E8;
  --info:           #2563EB;
  --info-soft:      #E3EBFB;
  --accent:         #19A974;

  /* Radii / shadows */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-1: 0 1px 2px rgba(14,19,32,.05), 0 1px 1px rgba(14,19,32,.04);
  --shadow-2: 0 4px 16px rgba(14,19,32,.08);
  --shadow-3: 0 12px 40px rgba(14,19,32,.18);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; }

/* utility */
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* pulse for active interval */
@keyframes nrbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,169,116,0.55), inset 0 0 0 1.5px var(--ok); }
  50%      { box-shadow: 0 0 0 8px rgba(25,169,116,0.0),  inset 0 0 0 1.5px var(--ok); }
}
.nrb-pulse { animation: nrbPulse 1.8s ease-in-out infinite; }

@keyframes blink {
  0%, 60%, 100% { opacity: 1; }
  30% { opacity: 0.35; }
}
.blink { animation: blink 1.4s ease-in-out infinite; }

/* tablet bezel (lightweight, not iOS frame) */
.tablet-bezel {
  position: relative;
  background: #0a0d15;
  border-radius: 28px;
  padding: 18px;
  box-shadow:
    inset 0 0 0 2px #1a1f2e,
    0 30px 80px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04);
}
.tablet-bezel::after{
  content: ""; position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2c3344, #0a0d15);
}

/* dark scrollbar */
.dark-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.dark-scroll::-webkit-scrollbar-track { background: transparent; }
.dark-scroll::-webkit-scrollbar-thumb { background: #2a3247; border-radius: 10px; }
.dark-scroll::-webkit-scrollbar-thumb:hover { background: #3a4258; }

.light-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.light-scroll::-webkit-scrollbar-track { background: transparent; }
.light-scroll::-webkit-scrollbar-thumb { background: #d6dbe3; border-radius: 10px; }

/* generic input reset */
input, select, textarea, button { font-family: inherit; }
button { cursor: pointer; }

/* status pills */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; }
.pill .dot { width:6px; height:6px; border-radius:50%; }
.pill-ok   { background: var(--ok-soft);   color: #0F7B53; }
.pill-warn { background: var(--warn-soft); color: #9A6300; }
.pill-bad  { background: var(--bad-soft);  color: #B23037; }
.pill-info { background: var(--info-soft); color: #1E4FCF; }
.pill-mute { background: #ECEEF2; color: #4B5363; }

/* on dark */
.pill-ok-d   { background: rgba(25,169,116,.16);  color: #4FD9A2; }
.pill-warn-d { background: rgba(245,165,36,.18);  color: #FFC25A; }
.pill-bad-d  { background: rgba(229,72,77,.18);   color: #FF7A7E; }
.pill-info-d { background: rgba(37,99,235,.18);   color: #6FA1FF; }
.pill-mute-d { background: rgba(255,255,255,.08); color: #B6BCCB; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: all .15s; }
.btn-ink { background: #0E1320; color: #fff; }
.btn-ink:hover { background: #1c2336; }
.btn-line { background: #fff; color: var(--text); border-color: var(--line); }
.btn-line:hover { border-color: #cfd4dc; }
.btn-bad { background: var(--bad); color:#fff; }
.btn-ok { background: var(--ok); color:#fff; }
.btn-ghost-d { background: transparent; color: var(--nrb-text-d); border-color: var(--nrb-line-d); }

.section-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }