/* NW Biofuel Customer Portal — site stylesheet (Static Resource nwb_portal_css)
   Loaded from Builder → Settings → Advanced → Head Markup.
   Design tokens follow the approved Sep 11 2026 mockup. */

:root {
  --nwb-navy: #0A1A2F;
  --nwb-navy-soft: #2A3B52;
  --nwb-orange: #F7941D;
  --nwb-orange-deep: #D97B06;
  --nwb-ink-2: #4A5C70;
  --nwb-line: #DEE6EE;
  --nwb-line-soft: #EEF2F6;
  --nwb-bg: #F4F7FA;
  --nwb-radius: 14px;
  --nwb-radius-sm: 10px;
}

/* ---------- Cards ---------- */
.nwb-card {
  background: #FFFFFF;
  border: 1.5px solid var(--nwb-line);
  border-radius: var(--nwb-radius);
  padding: 24px;
  color: var(--nwb-navy);
}
.nwb-card-lg { padding: 28px 32px; }
.nwb-card-dark {
  background: var(--nwb-navy);
  color: #FFFFFF;
  border-radius: var(--nwb-radius);
  padding: 24px;
}
.nwb-card-dark .nwb-eyebrow { color: var(--nwb-orange); }
.nwb-card-dark .nwb-muted  { color: #C9D3DF; }

/* Flow screens: every embedded flow gets card chrome by default.
   (Flow content lives in shadow DOM; only the host can be styled from here.)
   Opt out per component with CSS Class "nwb-flow-plain" (Builder → Style → Custom CSS). */
dxp_flow-flow {
  display: block;
  background: #FFFFFF;
  border: 1.5px solid var(--nwb-line);
  border-radius: var(--nwb-radius);
  padding: 20px 28px;
}
.nwb-flow-plain dxp_flow-flow, dxp_flow-flow.nwb-flow-plain {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ---------- Header bar (theme header Section has CSS Class "nwb-header") ---------- */
.nwb-header { background: var(--nwb-navy) !important; }
.nwb-header a { color: #C9D3DF !important; font-weight: 600; }
.nwb-header a:hover { color: #FFFFFF !important; }
.nwb-header a.isActive { color: #FFFFFF !important; border-bottom-color: var(--nwb-orange) !important; }
.nwb-brand { color: #FFFFFF; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; }
.nwb-brand-sub { color: #8FA1B5; font-size: 12px; font-weight: 600; }
.nwb-header a.nwb-btn-accent { color: var(--nwb-navy) !important; }
.nwb-header a.nwb-btn-ghost  { color: #FFFFFF !important; }

/* ---------- Type ---------- */
.nwb-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nwb-orange-deep);
}
.nwb-eyebrow-muted { color: var(--nwb-ink-2); letter-spacing: 0.1em; }

.nwb-h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; color: var(--nwb-navy); }
.nwb-h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--nwb-navy); }
.nwb-title { font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--nwb-navy); }
.nwb-title:empty { display: none; }
.nwb-big { font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--nwb-navy); }
.nwb-body { font-size: 15px; line-height: 1.45; color: var(--nwb-navy); }
.nwb-muted { color: var(--nwb-ink-2); }
.nwb-small { font-size: 13px; }

/* ---------- Pills ---------- */
.nwb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px; line-height: 1;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.nwb-pill-due     { background: #FFF4E5; color: #9A5A08; }
.nwb-pill-ok      { background: #EAF4EE; color: #1F6B3A; }
.nwb-pill-neutral { background: var(--nwb-line-soft); color: var(--nwb-ink-2); }

/* ---------- Buttons & links ---------- */
.nwb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 14px; line-height: 1;
  padding: 12px 18px; border-radius: var(--nwb-radius-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.nwb-btn:hover { text-decoration: none; filter: brightness(0.96); }
/* The site theme styles <a> with higher specificity than a single class,
   so button/link colours are pinned with !important. */
.nwb-btn-primary,   a.nwb-btn-primary,   a.nwb-btn-primary:visited   { background: var(--nwb-navy) !important;   color: #FFFFFF !important; }
.nwb-btn-accent,    a.nwb-btn-accent,    a.nwb-btn-accent:visited    { background: var(--nwb-orange) !important; color: var(--nwb-navy) !important; }
.nwb-btn-secondary, a.nwb-btn-secondary, a.nwb-btn-secondary:visited { background: #FFFFFF !important; color: var(--nwb-navy) !important; border: 1.5px solid var(--nwb-line); font-weight: 700; }
.nwb-btn-ghost,     a.nwb-btn-ghost,     a.nwb-btn-ghost:visited     { background: transparent !important; color: #FFFFFF !important; border: 1.5px solid #3A4D66; font-weight: 700; }
.nwb-btn-block     { display: flex; width: 100%; }

.nwb-link, a.nwb-link, a.nwb-link:visited { color: var(--nwb-orange-deep) !important; font-weight: 700; text-decoration: none; }
.nwb-link:hover, a.nwb-link:hover { color: var(--nwb-navy) !important; }

/* ---------- Meters (container fill) ---------- */
.nwb-meter { height: 10px; background: var(--nwb-line-soft); border-radius: 999px; overflow: hidden; }
.nwb-meter-fill { height: 10px; max-width: 100%; background: var(--nwb-orange); border-radius: 999px; }

/* ---------- Fact grid at the bottom of a card ---------- */
.nwb-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  border-top: 1px solid var(--nwb-line-soft); padding-top: 14px; margin-top: 4px;
}
.nwb-fact-label { font-size: 12px; color: var(--nwb-ink-2); }
.nwb-fact-value { font-size: 15px; font-weight: 700; color: var(--nwb-navy); }

/* ---------- Layout helpers ---------- */
.nwb-stack   { display: flex; flex-direction: column; gap: 16px; }
.nwb-stack-sm{ display: flex; flex-direction: column; gap: 6px; }
.nwb-row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nwb-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nwb-divider { border-top: 1px solid var(--nwb-line-soft); margin: 14px 0; }

/* ---------- Footer ---------- */
.nwb-footer { border-top: 1px solid var(--nwb-line); }

/* ---------- Service drawings (Static Resource nwb_portal_art, Feature report #4) ----------
   An empty <div class="nwb-art"></div> inside a card that carries nwb-type-<RecordType first word>
   gets the drawing for that service type as a background image. */
.nwb-art {
  flex: none;
  width: 56px;
  height: 56px;
  background: no-repeat center / contain url(/sfsites/c/resource/nwb_portal_art/nwb_trap_generic.svg);
}
.nwb-art-lg { width: 72px; height: 72px; }
.nwb-type-Used        .nwb-art { background-image: url(/sfsites/c/resource/nwb_portal_art/nwb_drum_55.svg); }
.nwb-type-Grease      .nwb-art { background-image: url(/sfsites/c/resource/nwb_portal_art/nwb_trap_indoor.svg); }
.nwb-type-Interceptor .nwb-art { background-image: url(/sfsites/c/resource/nwb_portal_art/nwb_interceptor_outdoor.svg); }
.nwb-type-Drain       .nwb-art { background-image: url(/sfsites/c/resource/nwb_portal_art/nwb_trap_floor.svg); }
.nwb-type-Waste       .nwb-art { background-image: url(/sfsites/c/resource/nwb_portal_art/nwb_container_generic.svg); }

/* ---------- Detail-page pieces ---------- */
.nwb-huge { font-size: 46px; line-height: 1; font-weight: 800; color: var(--nwb-navy); letter-spacing: -0.02em; }
.nwb-fact-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--nwb-line-soft); font-size: 14px;
}
.nwb-fact-row:last-child { border-bottom: 0; }
.nwb-fact-row .nwb-fact-label { font-size: 14px; }
.nwb-fact-row .nwb-fact-value { text-align: right; }
/* Bound fields that come back blank collapse their line (or their whole fact row). */
.nwb-h1:empty, .nwb-h2:empty, .nwb-big:empty, .nwb-body:empty, .nwb-small:empty, .nwb-fact-value:empty { display: none; }
.nwb-fact-row:has(> .nwb-fact-value:empty) { display: none; }

/* ---------- Per-service-type blocks (keep LAST: must out-rank the layout helpers) ----------
   The card wrapper carries nwb-type-{!Item.RecordType.Name}. The Grid only exposes list-view
   columns, so DeveloperName is unavailable; the Name has spaces, so "Used Cooking Oil" becomes
   the classes nwb-type-Used + Cooking + Oil and we match the first word:
   Used (cooking oil) · Grease (trap) · Interceptor · Drain (cleaning) · Waste (run). */
.nwb-uco-only, .nwb-uco-only.nwb-stack-sm, .nwb-uco-only.nwb-stack { display: none; }
.nwb-type-Used .nwb-uco-only { display: block; }
.nwb-type-Used .nwb-uco-only.nwb-stack-sm,
.nwb-type-Used .nwb-uco-only.nwb-stack { display: flex; }
.nwb-type-Used .nwb-uco-only.nwb-pill { display: inline-flex; }
.nwb-type-Used .nwb-uco-only.nwb-row,
.nwb-type-Used .nwb-uco-only.nwb-between,
.nwb-type-Used .nwb-uco-only.nwb-fact-row { display: flex; }
.nwb-type-Used .nwb-uco-only.nwb-fact-row:has(> .nwb-fact-value:empty) { display: none; }
.nwb-type-Used .nwb-not-uco, .nwb-type-Used .nwb-not-uco.nwb-stack-sm { display: none; }