/* Nova Assure for Republic Services: shared light theme (the "Individual Tracking Redesign" look). */
:root {
  --nv-bg: #eef2f6; --nv-surface: #f8fafc; --nv-card: #ffffff; --nv-line: #dbe5f0; --nv-line-2: #e8eef5;
  --nv-ink: #0f1d33; --nv-ink-2: #34465e; --nv-muted: #66788f; --nv-faint: #9aa9ba;
  --nv-blue: #1e5bd8; --nv-blue-2: #3b82f6; --nv-blue-soft: #e8f0fe; --nv-navy: #0b2a5b;
  --nv-red: #dc2626; --nv-red-soft: #fef0f0; --nv-amber: #d97706; --nv-amber-soft: #fff6e5; --nv-green: #059669; --nv-green-soft: #e9f8f1;
  --nv-violet: #7c3aed; --nv-violet-soft: #f3edff; --nv-slate: #64748b; --nv-slate-soft: #f1f5f9;
  --nv-nova: #E8322F;
  --nv-radius: 12px; --nv-shadow: 0 1px 2px rgba(15, 29, 51, .06), 0 4px 16px rgba(15, 29, 51, .05);
  --nv-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nv-bg); color: var(--nv-ink-2); font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--nv-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
.mono { font-family: var(--nv-mono); }

/* header */
.nv-top { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 18px; padding: 10px 22px; background: rgba(248, 250, 252, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nv-line); border-top: 3px solid var(--nv-nova); }
.nv-logo img { height: 32px; display: block; }
.nv-org { line-height: 1.15; white-space: nowrap; }
.nv-org b { display: block; color: var(--nv-navy); font-size: 14px; }
.nv-org span { color: var(--nv-muted); font-size: 11.5px; font-weight: 600; }
.nv-org em { font-style: normal; }
/* the customer name is the switch: it opens the customer menu */
.nv-cust { border: 0; background: none; text-align: left; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; font-family: inherit; }
.nv-cust:hover { background: var(--nv-blue-soft); }
.nv-cust:hover span { color: var(--nv-blue); }
.nv-nav { display: flex; gap: 2px; margin-left: 10px; overflow-x: auto; scrollbar-width: none; }
.nv-nav a { color: var(--nv-muted); font-weight: 600; font-size: 13px; padding: 6px 9px; border-radius: 8px; white-space: nowrap; }
.nv-nav a:hover { background: var(--nv-blue-soft); color: var(--nv-blue); text-decoration: none; }
.nv-nav a.on { background: var(--nv-blue); color: #fff; }
.nv-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 12.5px; color: var(--nv-muted); }

.nv-search { margin-left: auto; display: flex; align-items: center; gap: 10px; border: 1px solid var(--nv-line); background: var(--nv-card); color: var(--nv-muted); border-radius: 8px; padding: 6px 8px 6px 12px; font: 600 12.5px Inter, sans-serif; min-width: 170px; flex: none; }
@media (max-width: 1250px) { .nv-search { min-width: 0; } }
@media (max-width: 1060px) { .nv-search { font-size: 0; gap: 0; padding: 6px 8px; } .nv-search kbd { margin: 0; font-size: 10.5px; } }
.nv-search:hover { border-color: var(--nv-blue-2); color: var(--nv-blue); }
.nv-search kbd { margin-left: auto; font: 600 10.5px var(--nv-mono); background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: 4px; padding: 1px 5px; color: var(--nv-muted); }
.nv-search + .nv-user { margin-left: 0; }
.nv-pal { position: fixed; inset: 0; z-index: 2500; background: rgba(15, 29, 51, .4); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.nv-menu { position: fixed; z-index: 2400; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 18px; width: 590px; max-width: calc(100vw - 16px); background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 29, 51, .18); padding: 12px 14px; }
.nv-menu h6 { margin: 0 0 4px; font: 800 10.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-faint); }
.nv-menu a { display: block; padding: 5px 8px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--nv-ink-2); }
.nv-menu a:hover { background: var(--nv-blue-soft); color: var(--nv-blue); text-decoration: none; }
.nv-menu a.on { color: var(--nv-blue); }
.nv-cmenu { display: block; width: 340px; padding: 12px 10px 10px; }
.nv-cmenu h6 { padding: 0 6px; }
.nv-cm-list { max-height: min(52vh, 420px); overflow: auto; margin-top: 4px; }
.nv-cm-q { display: block; width: 100%; margin: 2px 0 6px; padding: 7px 10px; border: 1px solid var(--nv-line); border-radius: 8px; font: 500 13px Inter, sans-serif; color: var(--nv-ink); outline: none; }
.nv-cm-q:focus { border-color: var(--nv-blue-2); }
.nv-cm-row { display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 8px 8px; border-radius: 8px; font: 600 13px Inter, sans-serif; color: var(--nv-ink-2); }
.nv-cm-row b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-cm-row small { font-size: 11px; color: var(--nv-faint); white-space: nowrap; }
.nv-cm-row:hover { background: var(--nv-blue-soft); color: var(--nv-blue); }
.nv-cm-row.on { cursor: default; background: none; color: var(--nv-navy); }
.nv-cm-row.on b { font-weight: 800; }
.nv-cm-row.on small { color: var(--nv-blue); font-weight: 700; }
.nv-cm-foot { border-top: 1px solid var(--nv-line-2); margin-top: 6px; padding: 8px 6px 0; font-size: 11.5px; color: var(--nv-muted); }
.nv-cm-foot.err { color: var(--nv-red); font-weight: 600; }
.nv-pal-card { width: min(640px, calc(100vw - 32px)); max-height: 66vh; background: var(--nv-card); border-radius: 14px; box-shadow: 0 30px 80px rgba(15, 29, 51, .35); display: flex; flex-direction: column; overflow: hidden; }
.nv-pal-card input { border: 0; border-bottom: 1px solid var(--nv-line); padding: 16px 18px; font: 500 16px Inter, sans-serif; outline: none; color: var(--nv-ink); }
.nv-pal-list { overflow: auto; padding: 6px; }
.nv-pal-row { display: grid; grid-template-columns: 92px 1fr; gap: 0 10px; padding: 8px 10px; border-radius: 8px; color: var(--nv-ink-2); text-decoration: none; }
.nv-pal-row:hover, .nv-pal-row.on { background: var(--nv-blue-soft); text-decoration: none; }
.nv-pal-row .k { grid-row: span 2; font: 700 10px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-blue-2); padding-top: 3px; }
.nv-pal-row b { color: var(--nv-ink); font-weight: 600; } .nv-pal-row small { color: var(--nv-muted); font-size: 11.5px; }
.nv-pal-empty { color: var(--nv-faint); padding: 14px; text-align: center; font-size: 13px; }
.nv-pal-foot { border-top: 1px solid var(--nv-line); padding: 7px 14px; font-size: 11px; color: var(--nv-faint); }
/* buttons, chips */
.nv-btn { border: 1px solid var(--nv-blue); background: var(--nv-blue); color: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.nv-btn:hover { background: var(--nv-navy); border-color: var(--nv-navy); }
.nv-btn:disabled { opacity: .5; cursor: default; }
.nv-btn.ghost { background: var(--nv-card); color: var(--nv-navy); border-color: var(--nv-line); }
.nv-btn.ghost:hover { border-color: var(--nv-blue-2); color: var(--nv-blue); background: var(--nv-blue-soft); }
.nv-btn.small { padding: 4px 10px; font-size: 11px; }
.nv-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--nv-slate-soft); color: var(--nv-slate); border: 1px solid transparent; }
.nv-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nv-pill.ok { background: var(--nv-green-soft); color: var(--nv-green); border-color: #bfe9d4; }
.nv-pill.warn { background: var(--nv-amber-soft); color: var(--nv-amber); border-color: #f6dca8; }
.nv-pill.alert { background: var(--nv-red-soft); color: var(--nv-red); border-color: #f7c6c6; }
.nv-pill.blue { background: var(--nv-blue-soft); color: var(--nv-blue); border-color: #c9dafc; }
.nv-pill.violet { background: var(--nv-violet-soft); color: var(--nv-violet); border-color: #ddd0fb; }

/* layout */
.nv-wrap { max-width: 1320px; margin: 0 auto; padding: 22px 22px 60px; }
.nv-crumbs { font-size: 12px; color: var(--nv-blue-2); font-weight: 600; margin-bottom: 2px; }
.nv-crumbs a { color: var(--nv-blue-2); }
.nv-h1 { font-size: 26px; font-weight: 800; color: var(--nv-navy); margin: 0; letter-spacing: -.01em; }
.nv-sub { color: var(--nv-muted); margin: 2px 0 0; }
.nv-card { background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow); }
.nv-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--nv-line-2); }
.nv-card-h h2 { margin: 0; font-size: 13px; font-weight: 800; color: var(--nv-navy); text-transform: uppercase; letter-spacing: .07em; }
.nv-card-h .sp { flex: 1; }
.nv-card-b { padding: 16px 18px; }
.nv-label { font-size: 10.5px; font-weight: 700; color: var(--nv-blue-2); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.nv-kpi { padding: 14px 16px; }
.nv-kpi b { display: block; font-size: 26px; font-weight: 800; color: var(--nv-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nv-kpi small { color: var(--nv-muted); font-size: 12px; }
.nv-grid { display: grid; gap: 16px; }
.nv-empty { color: var(--nv-faint); font-style: italic; text-align: center; padding: 18px; font-size: 13px; }
.nv-foot { color: var(--nv-faint); font-size: 11.5px; margin-top: 26px; text-align: center; }

/* modal */
.nv-modal { position: fixed; inset: 0; z-index: 1500; background: rgba(15, 29, 51, .45); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.nv-modal.on { opacity: 1; pointer-events: auto; }
.nv-modal-card { background: var(--nv-card); border-radius: 16px; width: min(1180px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(15, 29, 51, .35); transform: translateY(10px) scale(.98); transition: transform .2s; }
.nv-modal.on .nv-modal-card { transform: none; }
.nv-modal-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--nv-line); }
.nv-modal-h h3 { margin: 0; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--nv-navy); }
.nv-modal-b { overflow: auto; padding: 18px 20px; }

/* login gate */
.nv-gate { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: radial-gradient(900px 600px at 50% 30%, #dfe9fb, var(--nv-bg)); padding: 16px; }
.nv-gate-card { width: min(420px, 100%); background: var(--nv-card); border: 1px solid var(--nv-line); border-top: 3px solid var(--nv-nova); border-radius: 16px; padding: 26px; box-shadow: 0 30px 80px rgba(15, 29, 51, .15); }
.nv-gate-logo { height: 36px; }
.nv-gate-card h1 { margin: 16px 0 2px; color: var(--nv-navy); font-size: 22px; }
.nv-gate-card p { margin: 0 0 16px; color: var(--nv-muted); font-size: 13px; }
.nv-gate-card label { display: block; font-size: 11px; font-weight: 700; color: var(--nv-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
.nv-gate-card input[type=email], .nv-gate-card input[type=password] { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--nv-line); border-radius: 8px; font: 14px Inter, sans-serif; color: var(--nv-ink); }
.nv-gate-card input:focus { outline: 3px solid var(--nv-blue-soft); border-color: var(--nv-blue-2); }
.nv-gate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nv-check { display: flex !important; align-items: center; gap: 6px; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; margin: 0 !important; font-size: 13px !important; color: var(--nv-ink-2) !important; }
.nv-err { color: var(--nv-red); font-size: 12.5px; min-height: 18px; margin-top: 10px; }
.nv-tok { margin: 6px 0 12px; font-size: 12.5px; color: var(--nv-blue); }
.nv-tok summary { cursor: pointer; }
.nv-tok form { display: flex; gap: 8px; margin-top: 8px; }
.nv-tok input { flex: 1; padding: 7px 10px; border: 1px solid var(--nv-line); border-radius: 8px; }
.nv-gate-card small { color: var(--nv-faint); font-size: 11px; }
.nv-fatal { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: 12px; padding: 18px 22px; display: grid; gap: 8px; box-shadow: var(--nv-shadow); z-index: 3000; }
.nv-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--nv-navy); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; z-index: 3000; pointer-events: none; }
.nv-toast.on { opacity: 1; }
.nv-loading { display: grid; place-items: center; min-height: 50vh; color: var(--nv-muted); }
.nv-loading .bar { width: 220px; height: 3px; background: var(--nv-line); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.nv-loading .bar i { display: block; height: 100%; width: 0; background: var(--nv-blue); transition: width .3s; }

@media (max-width: 760px) {
  .nv-top { flex-wrap: wrap; gap: 10px; padding: 8px 16px; }
  .nv-logo img { height: 26px; }
  .nv-nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .nv-user span { display: none; }
  .nv-wrap { padding: 16px 16px 50px; }
}