:root {
  color-scheme: light;
  font-family: "DM Sans", Inter, "Segoe UI", Arial, sans-serif;
  --bg: #f4f5f4;
  --panel: #ffffff;
  --ink: #121513;
  --muted: #6f7471;
  --line: #d9ddda;
  --soft: #eef1ef;
  --black: #111111;
  --green: #1f8f4d;
  --amber: #b7791f;
  --red: #b42318;
  --blue: #175cd3;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  /* Chart palette — overridden per theme so charts follow the active theme. */
  --chart-bar: #1f8f4d;
  --chart-bar-soft: #c2e2d0;
  --chart-line: #1f8f4d;
  --chart-area: rgba(31, 143, 77, .12);
  --chart-grid: #e8ebe8;
  --chart-axis: #6f7471;
  --chart-value: #121513;
  --chart-track: #e4e9e5;
  --chart-dot: #ffffff;
  --chart-reduction: #1f8f4d;
  --chart-emission: #b7791f;
  --chart-increase: #b42318;
  --chart-neutral: #aeb6b1;
  --chart-warning: #e58a2b;
  --cat-1: #36a85a; --cat-2: #e8793b; --cat-3: #43a2c7; --cat-4: #f0a13a;
  --cat-5: #6b76d9; --cat-6: #7fbd58; --cat-7: #a36bc4; --cat-8: #df6b86;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { border: 0; background: var(--black); color: white; border-radius: 8px; padding: 10px 14px; font-weight: 800; cursor: pointer; }
button.secondary { background: #e7e9e7; color: var(--ink); }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--red); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; background: white; color: var(--ink); }
textarea { min-height: 92px; resize: vertical; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; position: sticky; top: 0; background: #f9faf9; z-index: 1; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.click-row { cursor: pointer; }
tr.click-row:hover { background: #f3f7f4; }
small, .muted { color: var(--muted); }
.hidden { display: none !important; }
.eyebrow { color: var(--green); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel, .nested-panel, .client-shell, .client-portal, .master-shell, .master-content, .view { min-width: 0; }
.stack-wide { display: grid; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.check-row input { width: auto; margin: 0; }
.account-guide { display: grid; gap: 6px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #c9dccb; border-left: 4px solid var(--green); border-radius: 12px; background: #f4faf4; color: var(--muted); font-size: 13px; }
.account-guide strong { color: var(--ink); font-family: Georgia, serif; font-size: 18px; }
.registry-tabs { display: flex; gap: 8px; margin: 16px 0 10px; }
.registry-tabs button { width: auto; min-width: 150px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* ============================================================
   LOGIN SCREEN — Circular Economy SaaS
   ============================================================ */

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #fafaf7;
  color: #111827;
  overflow: hidden;
  position: relative;
}

/* Paper dot grid */
.motion-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(22,163,74,.16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

/* Soft green rounded square — top-left */
.login-screen::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 64px;
  background: #dcf2e4;
  top: -80px;
  left: -70px;
  transform: rotate(18deg);
  animation: shapeDrift 16s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Amber ring — bottom-right */
.login-screen::after {
  content: "";
  display: block;
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 28px solid #ffe9c7;
  bottom: -60px;
  right: 50px;
  animation: ringPulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* Light blue square — top-right */
.motion-bg::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 30px;
  background: #dbeafe;
  top: 56px;
  right: -28px;
  transform: rotate(-12deg);
  animation: shapeDriftReverse 20s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Slowly rotating ♻ — bottom-left, the eco anchor */
.motion-bg::before {
  content: "\267B";
  position: absolute;
  font-size: 320px;
  line-height: 1;
  color: #16a34a;
  opacity: .08;
  bottom: -50px;
  left: -30px;
  animation: recycleRotate 80s linear infinite;
  pointer-events: none;
  user-select: none;
}

/* Floating CO2e / ESG chips */
.eco-chip {
  position: absolute;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0f6e56;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(29,158,117,.4);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 2px 10px rgba(15,110,86,.10);
  opacity: 0;
  animation: chipFloat 11s linear infinite;
  pointer-events: none;
  user-select: none;
}
.eco-chip.amber { color: #854f0b; border-color: rgba(186,117,23,.4); box-shadow: 0 2px 10px rgba(133,79,11,.10); }
.eco-chip.blue  { color: #185fa5; border-color: rgba(55,138,221,.4); box-shadow: 0 2px 10px rgba(24,95,165,.10); }
.eco-chip.c1  { left: 9%;   bottom: 14%; animation-delay: 0s; }
.eco-chip.c2  { right: 11%; bottom: 30%; animation-delay: 3s; }
.eco-chip.c3  { left: 17%;  bottom: 48%; animation-delay: 6s;    animation-duration: 13s; }
.eco-chip.c4  { right: 19%; bottom: 8%;  animation-delay: 8.5s;  animation-duration: 12s; }
.eco-chip.c5  { left: 5%;   bottom: 34%; animation-delay: 1.5s;  animation-duration: 12s; }
.eco-chip.c6  { right: 5%;  bottom: 52%; animation-delay: 4.5s;  animation-duration: 14s; }
.eco-chip.c7  { left: 24%;  bottom: 6%;  animation-delay: 7s; }
.eco-chip.c8  { right: 26%; bottom: 40%; animation-delay: 9.5s;  animation-duration: 13s; }
.eco-chip.c9  { left: 12%;  bottom: 62%; animation-delay: 2.5s;  animation-duration: 14s; }
.eco-chip.c10 { right: 8%;  bottom: 12%; animation-delay: 5.5s;  animation-duration: 12s; }
.eco-chip.c11 { left: 28%;  bottom: 26%; animation-delay: 10.5s; animation-duration: 13s; }
.eco-chip.c12 { right: 15%; bottom: 60%; animation-delay: 12s;   animation-duration: 14s; }

@keyframes chipFloat {
  0%   { transform: translateY(30px) scale(.92); opacity: 0; }
  10%  { opacity: .95; }
  70%  { opacity: .75; }
  100% { transform: translateY(-300px) scale(1.04); opacity: 0; }
}
@keyframes shapeDrift        { from { transform: rotate(18deg)  translate(0,0); } to { transform: rotate(24deg)  translate(14px,10px); } }
@keyframes shapeDriftReverse { from { transform: rotate(-12deg) translate(0,0); } to { transform: rotate(-18deg) translate(-10px,12px); } }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes recycleRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── CLEAN WHITE CARD ───────────────────────────────────── */
.login-panel {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 42px;
  box-shadow:
    0 2px 4px  rgba(17,39,28,.04),
    0 10px 28px rgba(17,39,28,.09),
    0 28px 60px rgba(17,39,28,.12);
  animation: panelFadeIn .55s cubic-bezier(.22,.68,0,1.2) both;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.login-panel h1 {
  margin: 6px 0 4px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #111827;
  line-height: 1.15;
}

.login-panel p {
  color: #6b7280;
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 400;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.login-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}

.login-screen .eyebrow {
  color: #16a34a;
  letter-spacing: .11em;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

/* Green accent line under eyebrow */
.login-screen .eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: #16a34a;
  border-radius: 2px;
  margin-top: 7px;
  opacity: .55;
}

/* ── INPUTS ─────────────────────────────────────────────── */
.login-screen input {
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  color: #111827;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 400;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.login-screen input::placeholder { color: #9ca3af; }

.login-screen input:focus {
  outline: none;
  background: #fff;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.13);
}

/* ── SIGN IN BUTTON ─────────────────────────────────────── */
.login-screen #loginForm button[type="submit"] {
  background: #16a34a;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 1px 3px rgba(22,163,74,.30), 0 4px 14px rgba(22,163,74,.20);
  transition: background .16s, box-shadow .16s, transform .12s;
}

.login-screen #loginForm button[type="submit"]:hover {
  background: #15803d;
  box-shadow: 0 2px 6px rgba(22,163,74,.35), 0 6px 22px rgba(22,163,74,.28);
  transform: translateY(-1px);
}

.login-screen #loginForm button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(22,163,74,.20);
}

/* ── PRODUCT CARDS ──────────────────────────────────────── */
.product-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }

.login-screen .product-card {
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  color: #111827;
  border-radius: 12px;
  padding: 13px;
  min-height: 88px;
  display: grid;
  gap: 4px;
  align-content: start;
  text-align: left;
  font-weight: 400;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.login-screen .product-card strong { font-size: 13px; font-weight: 700; color: #111827; }

.login-screen .product-card:hover {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.login-screen .product-card.preview {
  background: #f4fbf5;
  border-color: #b9dec2;
}

.login-screen .product-card.preview strong { color: #14532d; }

.login-screen .product-card.active {
  background: #f0fdf4;
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22,163,74,.12);
}

.login-screen .product-card span {
  color: #6b7280;
  font-size: 11.5px;
  line-height: 1.45;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.demo-users {
  margin-top: 18px;
  color: #9ca3af;
  font-size: 11.5px;
  line-height: 1.6;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#loginError { color: #dc2626; font-size: 12px; min-height: 16px; }

@media (max-width: 560px) {
  .login-screen .product-choice { grid-template-columns: 1fr; }
}

/* ============================================================
   APP SHELL — unchanged
   ============================================================ */

.app-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 310px; grid-template-rows: auto 1fr; }
body.rail-collapsed .app-shell { grid-template-columns: minmax(0, 1fr) 38px; }
body[data-role="driver"] .app-shell,
body[data-role="customer_view"] .app-shell,
body[data-role="customer_master"] .app-shell { grid-template-columns: minmax(0, 1fr); }
body[data-role="customer_view"] .sidebar,
body[data-role="customer_master"] .sidebar { display: none; }
body[data-role="customer_view"] main,
body[data-role="customer_master"] main { grid-column: 1; padding: 0; }
body[data-role="customer_view"] .topbar,
body[data-role="customer_master"] .topbar { display: none; }
body[data-role="driver"] .sidebar { display: flex; }
body[data-role="driver"] main { grid-column: 1; min-width: 0; }
body[data-role="driver"] #view-dashboard { display: none !important; }
body[data-role="driver"] .driver-app { width: min(100%, 1180px); margin: 0 auto; }
.portal-home { min-height: 100vh; position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: #050d0e; color: #f4fff8; }
.portal-home-atmosphere { position: absolute; inset: -20%; z-index: -3; background: radial-gradient(circle at 50% 48%, rgba(137, 224, 63, .24), transparent 18%), radial-gradient(ellipse at 18% 62%, rgba(23, 186, 149, .18), transparent 35%), radial-gradient(ellipse at 84% 42%, rgba(14, 141, 171, .16), transparent 34%), linear-gradient(135deg, #040a0c, #0b1c1c 48%, #031014); background-size: 140% 140%; animation: portalAtmosphere 16s ease-in-out infinite alternate; }
.portal-home-atmosphere::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(202, 255, 125, .55) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(72, 220, 202, .35) 0 1px, transparent 1.5px); background-size: 90px 90px, 130px 130px; background-position: 10px 20px, 60px 50px; opacity: .28; animation: portalParticles 24s linear infinite; }
@keyframes portalAtmosphere { from { transform: scale(1) translate3d(-1%, 0, 0); } to { transform: scale(1.08) translate3d(1%, -1%, 0); } }
@keyframes portalParticles { to { background-position: 110px 160px, -80px 180px; } }
.portal-home-brand { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); display: grid; text-align: center; letter-spacing: .24em; }
.portal-home-brand span { font-family: Georgia, 'Times New Roman', serif; font-size: 31px; font-weight: 700; font-style: italic; letter-spacing: .08em; color: #caff66; text-shadow: 0 0 24px rgba(202,255,102,.28); }
.portal-home-brand em { margin-top: 7px; font-size: 9px; color: #7d9d9a; letter-spacing: .28em; font-style: normal; text-transform: uppercase; }
.portal-home-core { display: grid; justify-items: center; text-align: center; gap: 7px; z-index: 2; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.portal-home-logo-wrap { width: 210px; height: 210px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(190, 255, 78, .2), rgba(13, 45, 43, .1) 54%, transparent 70%); box-shadow: 0 0 0 1px rgba(176, 255, 104, .18), 0 0 70px rgba(94, 239, 122, .26); animation: portalLogoPulse 4s ease-in-out infinite; }
.portal-home-mark { width: 172px; height: 172px; display: block; }
@keyframes portalLogoPulse { 50% { transform: scale(1.035); box-shadow: 0 0 0 1px rgba(176, 255, 104, .32), 0 0 100px rgba(94, 239, 122, .42); } }
.portal-home-core h1 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 42px); letter-spacing: -.04em; }
.portal-home-core p { margin: 0; color: #9eb9ae; font-size: 13px; }
.portal-home-core > small { margin-top: 8px; color: #baf46d; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.portal-home-menu { position: absolute; top: 50%; display: grid; gap: 24px; transform: translateY(-50%) scale(.94); z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.portal-home.menu-open .portal-home-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1); }
.portal-home-menu-left { left: clamp(28px, 10vw, 180px); }
.portal-home-menu-right { right: clamp(28px, 10vw, 180px); }
.portal-home-module { display: flex; align-items: center; gap: 16px; min-width: 330px; padding: 18px 22px; border: 1px solid rgba(151, 228, 183, .24); border-radius: 20px; background: rgba(10, 30, 29, .46); color: #f3fff7; text-align: left; cursor: pointer; backdrop-filter: blur(14px); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.portal-home-menu-left .portal-home-module { text-align: right; flex-direction: row-reverse; }
.portal-home-module:hover { transform: translateX(8px); border-color: rgba(188, 255, 110, .68); background: rgba(69, 156, 104, .22); }
.portal-home-menu-left .portal-home-module:hover { transform: translateX(-8px); }
.portal-home-module i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(189, 255, 108, .52); border-radius: 50%; color: #caff66; font-size: 22px; font-style: normal; }
.portal-home-module span { display: grid; gap: 2px; }
.portal-home-module strong { font-size: 16px; }
.portal-home-module small { color: #8da9a0; font-size: 12px; }
.portal-home-orbit { position: absolute; width: min(60vw, 760px); aspect-ratio: 1; border: 1px solid rgba(78, 215, 182, .15); border-radius: 50%; pointer-events: none; animation: portalOrbit 22s linear infinite; }
.portal-home-orbit-a { transform: rotate(22deg) scaleY(.35); }
.portal-home-orbit-b { transform: rotate(-28deg) scaleY(.2); border-color: rgba(192, 255, 93, .15); animation-duration: 29s; animation-direction: reverse; }
.portal-home-bridge { position: absolute; width: min(82vw, 1080px); height: min(48vw, 520px); border: 1px solid rgba(121, 232, 172, .15); border-radius: 50%; box-shadow: 0 0 48px rgba(56, 210, 155, .08), inset 0 0 40px rgba(56, 210, 155, .04); transform: rotate(-6deg); pointer-events: none; z-index: 1; animation: portalBridgePulse 6s ease-in-out infinite; }
.portal-home-forest { position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .34; overflow: hidden; }
.portal-home-forest::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(5, 13, 14, .76) 0%, rgba(5, 13, 14, .04) 38%, rgba(5, 13, 14, .3) 100%), radial-gradient(ellipse at 50% 48%, transparent 30%, rgba(5, 13, 14, .48) 100%); pointer-events: none; }
.portal-home-forest img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; mix-blend-mode: normal; filter: saturate(.86) contrast(1.04) brightness(.82) drop-shadow(0 34px 44px rgba(0,0,0,.18)); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%); animation: portalForestDrift 22s ease-in-out infinite alternate; }
@keyframes portalForestDrift { from { transform: translate3d(-1.2%, 4px, 0) scale(1.01); } to { transform: translate3d(1.2%, -2px, 0) scale(1.04); } }
@keyframes portalBridgePulse { 50% { border-color: rgba(191, 255, 107, .3); box-shadow: 0 0 70px rgba(56, 210, 155, .14), inset 0 0 60px rgba(56, 210, 155, .07); } }
@keyframes portalOrbit { to { transform: rotate(382deg) scaleY(.35); } }
.portal-home-orbit-b { animation-name: portalOrbitB; }
@keyframes portalOrbitB { to { transform: rotate(-388deg) scaleY(.2); } }
.portal-home-footer { position: absolute; bottom: 28px; display: flex; gap: 22px; color: #6e9388; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.portal-shell { min-height: 100vh; position: relative; display: block; }
.portal-top-controls { z-index: 20; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.portal-home-controls { position: absolute; top: 22px; left: 26px; right: 26px; }
.portal-section-controls { position: relative; margin: 0; padding: 22px 28px 12px; min-height: 58px; }
.portal-shell:has(.portal-section-controls) > .client-portal { padding: 0 24px 24px; }
.portal-top-controls button { pointer-events: auto; }
.portal-back-button, .portal-profile-button, .portal-logout-button, .portal-theme-button { border: 1px solid rgba(151, 228, 183, .2); border-radius: 10px; padding: 9px 12px; background: rgba(8, 25, 25, .58); color: #cfe9dc; font-size: 11px; font-weight: 700; cursor: pointer; backdrop-filter: blur(12px); }
.portal-back-button:hover, .portal-profile-button:hover, .portal-logout-button:hover, .portal-theme-button:hover { border-color: rgba(202,255,102,.6); color: #caff66; }
.portal-profile-wrap { display: flex; gap: 8px; align-items: center; }
.portal-notification-bell { flex: 0 0 36px; width: 36px; height: 36px; background: rgba(8, 25, 25, .58); color: #cfe9dc; border-color: rgba(151, 228, 183, .2); }
.portal-notification-bell .material-symbols-rounded { font-size: 18px; }
.portal-profile-button { display: inline-flex; align-items: center; gap: 7px; }
.portal-profile-button span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b9f56d; color: #10251b; font-size: 11px; }
.portal-logout-button { color: #b9aaa5; }
.client-tabs { align-items: center; min-height: 48px; }
.client-tabs button { flex: 0 0 auto; width: auto; height: auto; min-height: 36px; align-self: center; }
.client-tabs button.active { height: 36px; min-height: 36px; }
.client-empty-state { min-height: 320px; }
@media (max-width: 900px) { .portal-home-menu { position: static; transform: none; grid-template-columns: repeat(3, 1fr); position: absolute; left: 16px; right: 16px; bottom: 34px; top: auto; gap: 8px; } .portal-home-menu-left, .portal-home-menu-right { left: 16px; right: 16px; } .portal-home-menu-right { bottom: 102px; } .portal-home-module, .portal-home-menu-left .portal-home-module { min-width: 0; padding: 9px; text-align: center; flex-direction: column; } .portal-home-module small { display: none; } .portal-home-footer { display: none; } }

/* Customer/master Home owns the full viewport; keep legacy shell rules from narrowing it. */
body[data-role="customer_view"] .app-shell,
body[data-role="customer_master"] .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
body[data-role="customer_view"] .sidebar,
body[data-role="customer_master"] .sidebar { display: none !important; }
body[data-role="customer_view"] main,
body[data-role="customer_master"] main { grid-column: 1 !important; width: 100%; min-width: 0; padding: 0 !important; }
body[data-role="customer_view"] .topbar,
body[data-role="customer_master"] .topbar { display: none !important; }

/* Customer portals have no sidebar/topbar. Keep their main surface in the
   only visible app-shell row so a removed row cannot leave a large blank band
   above the portal Home canvas. */
body[data-role="customer_view"] .app-shell,
body[data-role="customer_master"] .app-shell { grid-template-rows: 1fr !important; }
body[data-role="customer_view"] main,
body[data-role="customer_master"] main { grid-row: 1 !important; }

/* Customer portal subpages must not inherit the stretched grid shell. */
body[data-role="customer_view"] .portal-shell,
body[data-role="customer_master"] .portal-shell { display: block !important; align-content: start !important; }
body[data-role="customer_view"] #view-customer:has(.portal-shell),
body[data-role="customer_master"] #view-customer:has(.portal-shell) {
  padding: 0 !important;
}
body[data-role="customer_view"] .portal-section-controls,
body[data-role="customer_master"] .portal-section-controls { height: auto !important; min-height: 58px !important; }

/* Driver shell priority fix. */
body[data-role="driver"] main { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; }
body[data-role="driver"] .app-shell { grid-template-columns: var(--sb-w) minmax(0, 1fr) !important; }
body[data-role="driver"] .view.active { display: block !important; }

/* Final driver shell override. */
body[data-role="driver"] .app-shell { grid-template-columns: var(--sb-w) minmax(0, 1fr) !important; }
body[data-role="driver"] .sidebar { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; }
body[data-role="driver"] main { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; }
body[data-role="driver"] .view.active { display: block !important; }

/* Driver-only shell must override the legacy shell rules above. */
body[data-role="driver"] .app-shell {
  grid-template-columns: var(--sb-w) minmax(0, 1fr) !important;
}
body[data-role="driver"] .sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
}
body[data-role="driver"] main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
}
body[data-role="driver"] .view.active {
  display: block !important;
}
body[data-role="driver"] .driver-mobile-shell .panel,
body[data-role="driver"] .driver-collapse,
body[data-role="driver"] .driver-evidence-card,
body[data-role="driver"] .driver-exception-card,
body[data-role="driver"] .driver-return-card,
body[data-role="driver"] .driver-history-card {
  background: #161920 !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.10) !important;
}
body[data-role="driver"] .driver-mobile-shell input,
body[data-role="driver"] .driver-mobile-shell select,
body[data-role="driver"] .driver-mobile-shell textarea,
body[data-role="driver"] .driver-mobile-shell .driver-evidence-item {
  background: #1d2028 !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.12) !important;
}
body[data-role="driver"] .driver-mobile-shell .driver-evidence-item.ok {
  background: rgba(61,214,140,.12) !important;
  border-color: rgba(61,214,140,.35) !important;
}
body[data-role="driver"] .driver-mobile-shell .driver-evidence-item.warn {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.35) !important;
}
body[data-role="driver"] .driver-mobile-shell label,
body[data-role="driver"] .driver-mobile-shell .muted,
body[data-role="driver"] .driver-mobile-shell small {
  color: #94a3b8 !important;
}

@media (max-width: 760px) {
  body[data-role="driver"] .app-shell { display: block; }
  body[data-role="driver"] .sidebar { position: sticky; top: 0; z-index: 20; padding: 8px 12px; }
  body[data-role="driver"] .sidebar .brand { flex: 0 0 auto; }
  body[data-role="driver"] nav { flex: 1; justify-content: flex-end; }
  body[data-role="driver"] nav button { padding: 9px 12px; }
  body[data-role="driver"] .nav-section-label { display: none; }
  body[data-role="driver"] main { padding: 12px; }
  body[data-role="driver"] .topbar { display: none; }
  .driver-app, .driver-layout { grid-template-columns: 1fr; }
  .driver-hero { grid-template-columns: 1fr; padding: 14px; }
  .driver-shift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .driver-mobile-hero { border-radius: 16px; padding: 14px; }
}

@media (max-width: 420px) {
  body[data-role="driver"] main { padding: 8px; }
  body[data-role="driver"] .sidebar .brand { display: none; }
  body[data-role="driver"] nav { justify-content: stretch; }
  body[data-role="driver"] nav button { width: 100%; justify-content: center; }
  .driver-shift-grid, .driver-mobile-metrics, .driver-history-metrics { grid-template-columns: 1fr; }
  .driver-progress { grid-template-columns: repeat(2, 1fr); }
  .driver-route-header { padding: 14px; }
  .driver-route-header h2 { font-size: 22px; }
  .driver-route-stop-head { grid-template-columns: 30px minmax(0, 1fr); }
  .driver-route-status { grid-column: 2; }
}

/* Keep the branch control strip compact; the ESG workspace below is the primary content. */
body[data-role="customer_master"] .master-control-segment {
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
}
body[data-role="customer_master"] .master-control-segment .master-segment-heading {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px;
}
body[data-role="customer_master"] .master-control-segment .master-segment-heading h2 {
  margin-bottom: 1px;
  font-size: 16px;
}
body[data-role="customer_master"] .master-control-segment .master-segment-heading p {
  font-size: 11px;
}
body[data-role="customer_master"] .master-control-segment .mp-info-strip {
  gap: 8px;
}
body[data-role="customer_master"] .master-control-segment .mp-info-strip article {
  min-height: 0;
  padding: 8px 11px;
  gap: 2px;
  border-left-width: 3px;
  border-radius: 10px;
}
body[data-role="customer_master"] .master-control-segment .mp-info-strip strong {
  font-size: 11px;
}
body[data-role="customer_master"] .master-control-segment .mp-info-strip span {
  font-size: 10.5px;
  line-height: 1.25;
}
body[data-role="customer_master"] .master-control-segment .master-branch-selector {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, .55fr);
  align-items: center;
  gap: 16px;
  padding: 9px 14px;
  border-radius: 11px;
}
body[data-role="customer_master"] .master-control-segment .master-branch-selector .mp-card-h h3 {
  margin-bottom: 2px;
  font-size: 13px;
}
body[data-role="customer_master"] .master-control-segment .master-branch-selector .mp-card-h p {
  font-size: 10.5px;
  line-height: 1.25;
}
body[data-role="customer_master"] .master-control-segment .master-branch-selector .mp-filter {
  margin: 0;
}
body[data-role="customer_master"] .master-control-segment .master-branch-selector select {
  width: 100%;
  min-height: 36px;
  padding-block: 6px;
}
@media (max-width: 820px) {
  body[data-role="customer_master"] .master-control-segment .master-segment-heading,
  body[data-role="customer_master"] .master-control-segment .master-branch-selector {
    grid-template-columns: 1fr;
  }
}

body[data-role="customer_master"] .master-shell.portal-shell {
  min-height: 100vh;
  padding: 0 24px 24px;
}
body[data-role="customer_master"] .master-shell.portal-shell > .portal-section-controls {
  padding-inline: 22px;
}
body[data-role="customer_view"] .portal-shell > .portal-primary-header + .client-portal,
body[data-role="customer_master"] .portal-shell > .portal-primary-header + .client-portal {
  padding: 0 24px 24px;
}
body[data-role="customer_master"] .master-shell.portal-shell > .portal-primary-header {
  margin-inline: -24px;
}
body[data-role="customer_master"] .master-shell.portal-shell > .mp-hero,
body[data-role="customer_master"] .master-shell.portal-shell > .master-content,
body[data-role="customer_master"] .master-shell.portal-shell > .master-empty {
  margin-top: 14px;
}

/* Final driver shell overrides: keep the single Driver Flow view visible. */
body[data-role="driver"] .app-shell { grid-template-columns: var(--sb-w) minmax(0, 1fr) !important; }
body[data-role="driver"] .sidebar { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; }
body[data-role="driver"] main { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; }
body[data-role="driver"] .view.active { display: block !important; }
body[data-role="customer_view"] .portal-shell,
body[data-role="customer_master"] .portal-shell { display: block !important; align-content: start !important; }
body[data-role="customer_view"] .portal-section-controls,
body[data-role="customer_master"] .portal-section-controls { height: auto !important; min-height: 58px !important; }
.sidebar { grid-column: 1 / -1; grid-row: 1; background: #151816; color: white; padding: 6px 14px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; padding: 4px; flex: 0 0 auto; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--green); border-radius: 9px; font-weight: 900; }
.brand small, .side-card span, .side-card small { display: block; color: #b9c1bc; }
nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
nav button { background: transparent; text-align: left; color: #dfe6e2; border-radius: 8px; padding: 7px 9px; white-space: nowrap; }
nav button.active { background: #2b302d; color: white; box-shadow: inset 0 -3px 0 var(--green); }
.nav-group { position: relative; }
.nav-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; border-radius: 999px; background: rgba(31,143,77,.95); color: #fff; font-size: 11px; font-weight: 900; }
.nav-caret { margin-left: 6px; font-size: 11px; opacity: .8; }
.nav-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #151816; border: 1px solid #303833; border-radius: 10px; padding: 8px; box-shadow: var(--shadow); z-index: 30; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display: grid; gap: 4px; }
.nav-menu button { width: 100%; }
.side-card { margin-left: auto; background: transparent; color: white; border-radius: 10px; padding: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.profile-chip { display: flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); padding: 0; text-align: left; }
.profile-chip span { width: 32px; height: 32px; border-radius: 9px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 900; }
.profile-chip strong { color: white; }
.notification-bell { position: relative; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; padding: 0; background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.notification-bell:hover { background: rgba(255,255,255,.18); }
.notification-bell.has-unread { background: #0f5132; border-color: rgba(82, 222, 157, .55); }
.bell-icon { width: 18px; height: 18px; display: grid; place-items: center; line-height: 1; }
.bell-icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.bell-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 900; border: 2px solid #151816; }
.profile-avatar-large { width: 62px; height: 62px; border-radius: 16px; background: linear-gradient(135deg, #15803d, #22c55e); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 900; }
.role-badge { display: inline-block; background: #fef3c7; color: #854f0b; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; margin-left: 6px; letter-spacing: .04em; }
.profile-sec { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; display: grid; gap: 10px; margin-top: 12px; }
.profile-sec-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.profile-sec-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.profile-sec.danger { border-color: #f3caca; background: #fffafa; }
.profile-sec.danger .profile-sec-title::before { background: var(--red); }
.profile-sec.danger p { margin: 0; font-size: 12px; }
.logout-outline { background: transparent; color: #9a3412; border: 1px solid #c2410c; }
.logout-outline:hover { background: #fff7ed; border-color: #9a3412; color: #7c2d12; }
.logout-outline:focus-visible { outline: 3px solid rgba(194,65,12,.2); outline-offset: 2px; }
#profileForm .profile-actions { margin-top: 12px; }
.profile-drawer-head { display: flex; align-items: center; gap: 14px; padding: 12px; background: #f5f7f5; border: 1px solid var(--line); border-radius: 12px; }
.profile-drawer-head h3, .profile-drawer-head p { margin: 0; }
.profile-actions { display: flex; justify-content: flex-start; gap: 10px; }
.profile-actions button { width: auto; min-width: 150px; }
.profile-logout { max-width: 170px; }

main { grid-column: 1; grid-row: 2; padding: 24px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.topbar h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: 0; }
.top-actions { display: flex; align-items: center; gap: 10px; color: var(--muted); }

/* ===== Mobile navigation: hamburger + slide-in drawer (all roles) ===== */
/* The scrim and drawer are driven by the [hidden] attribute (JS toggles it)
   so that when the menu is closed they are display:none and cannot intercept
   taps anywhere on the page. Only the button has a media-query display. */
.mnav-btn { display: none; }
.mnav-scrim[hidden],
.mnav-drawer[hidden] { display: none; }
.mnav-scrim:not([hidden]) { display: block; }
.mnav-drawer:not([hidden]) { display: flex; }
.mnav-btn {
  position: fixed; top: 9px; right: 12px; z-index: 120;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(20, 60, 30, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(20, 60, 30, .16);
  align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mnav-bars { display: grid; gap: 4px; width: 18px; }
.mnav-bars span { display: block; height: 2px; border-radius: 2px; background: #12331c; transition: transform .2s ease, opacity .2s ease; }
body.mnav-open .mnav-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.mnav-open .mnav-bars span:nth-child(2) { opacity: 0; }
body.mnav-open .mnav-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mnav-scrim {
  position: fixed; inset: 0; z-index: 118;
  background: rgba(12, 24, 16, .44);
  opacity: 0; transition: opacity .24s ease;
}
body.mnav-open .mnav-scrim { opacity: 1; }
.mnav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 119;
  width: min(86vw, 340px);
  background: #ffffff;
  border-left: 1px solid var(--line, rgba(20,60,30,.14));
  box-shadow: -18px 0 46px rgba(12, 24, 16, .26);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  flex-direction: column;
  overflow: hidden;
}
body.mnav-open .mnav-drawer { transform: none; }
.mnav-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--line, rgba(20,60,30,.14));
  background: #f4f8f4;
}
.mnav-profile {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px; min-width: 0;
  font: inherit; color: #12331c; text-align: left; cursor: pointer;
}
.mnav-av {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #1f7a3d, #3fb463); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.mnav-nm { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-close {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(20, 60, 30, .16); background: #fff;
  font-size: 20px; line-height: 1; color: #12331c; cursor: pointer;
}
.mnav-drawer .mnav-items { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; display: grid; grid-template-columns: 1fr; gap: 2px; align-content: start; }
.mnav-drawer .mnav-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #6f8a76; padding: 12px 10px 4px;
}
.mnav-drawer .mnav-label:first-child { padding-top: 4px; }
.mnav-drawer .mnav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 12px; margin: 0; border: 0; border-radius: 10px;
  background: none; box-shadow: none; font: inherit; font-size: 14px; font-weight: 500;
  color: #1a2e20; white-space: normal; text-align: left; cursor: pointer;
}
.mnav-drawer .mnav-item:hover { background: rgba(20, 60, 30, .06); }
.mnav-drawer .mnav-item.is-active { background: rgba(31, 143, 77, .12); color: #12331c; font-weight: 700; box-shadow: inset 3px 0 0 var(--green, #1f8f4d); }
.mnav-drawer .mnav-item .nav-ic { flex: none; width: 20px; text-align: center; font-size: 15px; opacity: .85; }
.mnav-drawer .mnav-item .nav-lbl { flex: 1; min-width: 0; }
.mnav-drawer .mnav-item .nav-count { flex: none; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: rgba(31,143,77,.95); color: #fff; font-size: 11px; font-weight: 800; padding: 0 5px; }
.mnav-logout {
  margin: 8px 12px 14px; padding: 10px; border-radius: 10px;
  border: 1px solid #c2410c; background: transparent; color: #9a3412;
  font: inherit; font-weight: 700; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .mnav-drawer, .mnav-scrim, .mnav-bars span { transition: none; }
}

@media (max-width: 860px) {
  body:not(.esg-screenshot-mode):not([data-role="driver"]) .mnav-btn { display: flex; }
  body.mnav-open { overflow: hidden; }

  /* Internal roles: collapse the cramped top strip, keep only the brand. */
  body:not([data-role="driver"]) .sidebar { flex-direction: row; align-items: center; gap: 10px; padding: 8px 60px 8px 12px; min-height: 0; }
  body:not([data-role="driver"]) .sidebar #nav,
  body:not([data-role="driver"]) .sidebar .side-card { display: none; }
  body:not([data-role="driver"]) .sidebar .brand { flex: 1; }
  body:not([data-role="driver"]) .sidebar .brand small { display: none; }

  /* Customer portal: hide the wrapping link row + account cluster. */
  #view-customer .recovery-process-main-nav,
  #view-customer .recovery-process-account { display: none !important; }
  #view-customer .recovery-process-header { padding-right: 62px; }
}
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi-grid article, .panel, .rail-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.kpi-grid article { padding: 14px; }
.kpi-grid span { color: var(--muted); display: block; font-size: 12px; }
.kpi-grid strong { font-size: 24px; }
.view { display: none; }
.view.active { display: grid; gap: 14px; }
.panel { padding: 16px; overflow: hidden; }
.panel-title { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 12px; }
.panel-title h2, .panel-title h3 { margin: 3px 0 0; }
.section-heading { display: grid; gap: 2px; margin: 10px 0 2px; }
.section-heading h2 { margin: 0; font-size: 28px; }
.table-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.list { display: grid; gap: 8px; max-height: 540px; overflow: auto; }
.list-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: white; cursor: pointer; }
.list-item.active { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 8px; background: var(--soft); font-size: 12px; font-weight: 800; }
.pill.green { background: #dff6e9; color: #087443; }
.pill.amber { background: #fff2cc; color: #8a5700; }
.pill.red { background: #fde4e1; color: #a11910; }
.pill.blue { background: #dbeafe; color: #174ea6; }
.crm-layout, .work-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; }
.crm-master-list { display: grid; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.crm-master-card { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; background: #f7fbf8; color: var(--ink); border: 1px solid #cfe1d5; border-radius: 12px; padding: 8px 10px; box-shadow: none; }
.crm-master-card:hover { border-color: var(--green); background: #eef8f1; }
.crm-master-card .customer-logo { width: 34px; height: 34px; }
.crm-master-card span { display: grid; min-width: 0; }
.crm-master-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-master-card small { color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-card { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.detail-rail { grid-column: 2; grid-row: 2; background: #ecefed; border-left: 1px solid var(--line); padding: 24px 14px; display: grid; gap: 14px; align-content: start; position: relative; }
.rail-toggle { position: sticky; top: 72px; z-index: 12; width: 28px; height: 42px; border-radius: 999px; padding: 0; display: grid; place-items: center; justify-self: start; margin-left: -6px; }
body.rail-collapsed .detail-rail { padding: 24px 4px; }
body.rail-collapsed .detail-rail .rail-panel { display: none; }
body.rail-collapsed .rail-toggle { margin-left: 0; }
body[data-role="driver"] .detail-rail,
body[data-role="customer_view"] .detail-rail,
body[data-role="customer_master"] .detail-rail { display: none; }
.rail-panel { padding: 14px; }
.flag-list { display: grid; gap: 8px; }
.flag { border-left: 4px solid var(--green); background: #f7faf8; padding: 8px; border-radius: 7px; }
.flag.warn { border-left-color: var(--amber); }
.flag.bad { border-left-color: var(--red); }
.timeline { display: grid; gap: 8px; }
.correction-control { border-left: 3px solid #d6932c; background: #fffaf0; }
.correction-control h3 { margin: 4px 0; }
.correction-control small { color: var(--muted); }
.correction-review-note { display: flex; gap: 8px; align-items: baseline; margin: 0 0 14px; padding: 9px 11px; border: 1px solid #ecd49d; border-radius: 8px; background: #fff8e8; color: #755414; font-size: 12px; }
.correction-review-note span { color: #80682f; }
.step { display: flex; gap: 10px; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.step.done .dot { background: var(--green); }
.col-chart { display: flex; align-items: flex-end; gap: 6px; padding: 6px 2px 0; }
.col-cell { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: end; gap: 4px; cursor: default; }
.col-value { font-size: 10px; font-weight: 800; color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .12s; }
.col-value.show, .col-cell:hover .col-value { opacity: 1; }
.col-bar { width: 100%; max-width: 38px; border-radius: 4px 4px 0 0; background: #bfe3cd; transition: background .12s; }
.col-bar.hot, .col-cell:hover .col-bar { background: var(--green); }
.col-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.col-chart-svg { width: 100%; }
.col-chart-svg svg { width: 100%; height: auto; display: block; overflow: visible; }
.col-svg-value { fill: var(--chart-value); font-size: 11px; font-weight: 800; }
.col-svg-label { fill: var(--chart-axis); font-size: 11px; }
.col-g rect { transition: opacity .12s ease; }
.col-g:hover rect { opacity: .82; }
.monthly-bar-chart {
  min-height: 210px;
  align-items: flex-end;
  padding: 18px 8px 4px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to top, rgba(18,21,19,.08) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(245,248,246,.25));
}
.monthly-bar-chart .col-cell { min-height: 190px; }
.monthly-bar-chart .col-bar {
  max-width: 42px;
  background: linear-gradient(180deg, #2fb36f, #1d8f55);
  box-shadow: 0 8px 18px rgba(31,142,86,.16);
}
.monthly-bar-chart .col-value { opacity: 1; font-size: 11px; }
.stack-chart { display: grid; gap: 12px; }
.stack-total strong { font-size: 22px; margin-right: 8px; }
.stack-total span { color: var(--muted); font-size: 12px; }
.stack-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; }
.stack-bar span { display: block; height: 100%; min-width: 2px; }
.stack-bar span:hover { filter: brightness(1.12); }
.stack-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px 12px; }
.stack-chip { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: start; }
.stack-chip strong { font-size: 13px; display: block; line-height: 1.2; }
.stack-chip small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.stack-swatch { width: 12px; height: 12px; border-radius: 4px; margin-top: 3px; }
.rank-chart { display: grid; gap: 7px; }
.rank-row { display: grid; grid-template-columns: 24px minmax(0, 190px) 1fr 110px; gap: 10px; align-items: center; }
.rank-no { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 900; background: #eef1ee; color: var(--muted); }
.rank-no.top { background: #fef3c7; color: #854f0b; }
.rank-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-track { height: 10px; border-radius: 999px; background: #eef1ee; overflow: hidden; }
.rank-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #238a55, #31a867); }
.rank-value { font-size: 12.5px; text-align: right; white-space: nowrap; }
.chart-bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 90px; gap: 10px; align-items: center; }
.band-chart { display: grid; gap: 10px; }
.band-row { display: grid; gap: 6px; }
.band-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; }
.band-meta span { color: var(--ink); font-weight: 700; }
.band-meta strong { color: var(--ink); font-size: 14px; }
.band-track { height: 16px; border-radius: 999px; background: linear-gradient(90deg, #edf2ee 0%, #e1e7e2 100%); overflow: hidden; border: 1px solid #d8dfda; }
.band-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #238a55 0%, #31a867 100%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.pie-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; }
.pie-shell { display: grid; place-items: center; }
.pie-chart { width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.pie-chart-surface { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.pie-hole { width: 108px; height: 108px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.pie-hole strong { font-size: 20px; line-height: 1.1; }
.pie-hole span { color: var(--muted); font-size: 12px; }
.pie-legend { display: grid; gap: 10px; }
.pie-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.pie-item:hover { background: #f6fbf8; border-radius: 8px; }
.pie-item:hover strong { text-decoration: underline; }
.pie-swatch { width: 14px; height: 14px; border-radius: 4px; margin-top: 3px; }
.pie-item strong { display: block; font-size: 14px; }
.pie-item small { color: var(--muted); font-size: 12px; }
.bar { height: 12px; background: #e5e7e5; border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); }
.form-section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 12px; align-items: center; }
.ops-control-center .panel-title { align-items: flex-start; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dashboard-shell { display: grid; gap: 14px; }
.dashboard-hero { background: linear-gradient(135deg, #ffffff 0%, #f4f7f5 56%, #eef6f1 100%); border: 1px solid rgba(31, 143, 77, .18); }
.dashboard-topbar { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 14px; }
.dashboard-topbar h2 { margin: 4px 0 6px; font-size: 28px; }
.dashboard-top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-kpi { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.9); display: grid; gap: 6px; box-shadow: 0 10px 28px rgba(17,21,19,.05); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.dashboard-kpi:hover { transform: translateY(-1px); border-color: rgba(31,143,77,.35); }
.dashboard-kpi span { color: var(--muted); font-size: 12px; font-weight: 700; }
.dashboard-kpi strong { font-size: 28px; line-height: 1; }
.dashboard-kpi small { color: var(--muted); font-size: 12px; }
.dashboard-kpi-green { border-color: rgba(31,143,77,.24); background: linear-gradient(180deg, #ffffff, #f1faf4); }
.dashboard-kpi-blue { border-color: rgba(23,92,211,.18); background: linear-gradient(180deg, #ffffff, #f2f7ff); }
.dashboard-kpi-amber { border-color: rgba(183,121,31,.24); background: linear-gradient(180deg, #ffffff, #fff8ef); }
.dashboard-kpi-red { border-color: rgba(180,35,24,.22); background: linear-gradient(180deg, #ffffff, #fff3f1); }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .95fr); gap: 14px; align-items: start; }
.dashboard-trend-panel { min-width: 0; }
.dashboard-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.dashboard-side-stack { display: grid; gap: 14px; }
.dashboard-side-panel { min-width: 0; }
.dashboard-task-card, .dashboard-risk-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fbfcfb; display: grid; gap: 5px; }
.dashboard-task-card strong, .dashboard-risk-card strong { font-size: 15px; }
.dashboard-task-card span, .dashboard-risk-card span { color: var(--ink); font-weight: 700; }
.dashboard-task-card small, .dashboard-risk-card small { color: var(--muted); }
.dashboard-task-card em { font-style: normal; color: var(--muted); font-size: 12px; }
.dashboard-task-card button { justify-self: start; margin-top: 2px; }
.dashboard-queue-panel { background: linear-gradient(135deg, #ffffff 0%, #f9fbfa 100%); }
.ops-card { display: grid; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.ops-card strong { font-size: 28px; line-height: 1; }
.ops-card small { color: var(--muted); }
.ops-card.attention { border-color: rgba(180, 71, 45, .35); box-shadow: inset 4px 0 0 var(--amber); }
.quality-alert.danger-state,
.approval-alert.danger-state,
.notification-alert.danger-state { border-color: rgba(180, 71, 45, .35); }
.quality-alert.ok-state,
.approval-alert.ok-state,
.notification-alert.ok-state { border-color: rgba(22, 163, 74, .35); }
.danger-text { color: var(--red); }
.approval-card { display: grid; gap: 14px; }
.approval-evidence-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: 14px; align-items: start; }
.approval-evidence-grid h3 { margin: 0 0 8px; font-size: 15px; }
.review-row { border-top: 1px solid var(--line); padding-top: 12px; }
.review-row input { min-width: 260px; flex: 1; }
.json-block { max-height: 460px; overflow: auto; white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12px; line-height: 1.45; }
.action-cell { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 900px) {
  .approval-evidence-grid { grid-template-columns: 1fr; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-topbar { flex-direction: column; }
  .dashboard-mini-metrics { grid-template-columns: 1fr; }
}
.material-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pdf-preview-section { gap: 14px; min-height: calc(100vh - 180px); }
.pdf-frame-wrap { position: relative; min-height: min(72vh, 920px); }
.pdf-frame { display: block; width: 100%; height: min(72vh, 920px); border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.pdf-loading-state { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: var(--ink); background: color-mix(in srgb, var(--soft) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.pdf-loading-state strong, .pdf-loading-state p { display: block; margin: 0; }
.pdf-loading-state p { margin-top: 4px; }
.pdf-preview-fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.pdf-preview-fallback strong { font-size: 18px; }
.pdf-preview-fallback span { max-width: 520px; color: var(--muted); }
.pdf-loading-spinner { width: 22px; height: 22px; flex: 0 0 auto; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: pdf-spin .8s linear infinite; }
.pdf-error-state { min-height: 180px; align-content: center; justify-items: center; text-align: center; }
@keyframes pdf-spin { to { transform: rotate(360deg); } }
.pdf-actions { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.pdf-actions .button-link { width: auto; min-width: 104px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; }
.pdf-actions .compact-btn { min-height: auto; }
.compact-btn { padding: 8px 11px; min-width: auto; font-size: 13px; }
.weight-slip-lineage-note { display: block; margin-top: 3px; color: #8a6200; font-size: 10.5px; line-height: 1.25; font-weight: 700; }
.weight-slip-pdf-pending, .weight-slip-action-note { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 8px; border: 1px solid #e6d6ad; border-radius: 8px; background: #fff8e8; color: #80601a; font-size: 11px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.weight-slip-action-note { border-color: var(--line); background: var(--soft); color: var(--muted); }
html[data-theme="carbon_dark"] .weight-slip-lineage-note { color: #f3c46f; }
html[data-theme="carbon_dark"] .weight-slip-pdf-pending { border-color: rgba(243,196,111,.35); background: rgba(243,196,111,.1); color: #f3c46f; }
.disabled-link { opacity: .45; pointer-events: none; }
.role-switcher { display: flex; gap: 10px; flex-wrap: wrap; }
.data-grid { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: white; }
.data-grid table { min-width: 900px; }
.drawer .data-grid, .drawer .table-wrap { overflow: hidden; max-height: none; }
.drawer .data-grid table, .drawer .table-wrap table { min-width: 0; width: 100%; table-layout: fixed; }
.drawer .data-grid th, .drawer .data-grid td, .drawer .table-wrap th, .drawer .table-wrap td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.do-photo-evidence { display: grid; justify-items: start; gap: 5px; min-width: 112px; }
.do-photo-preview { display: block; width: 112px; height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.do-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.do-photo-evidence .compact-btn { padding: 5px 7px; font-size: 11px; }
.grid-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.grid-pager button { width: auto; }
#drawerBody .data-quality-issue-section { display: grid; gap: 8px; min-height: 0; }
#drawerBody .data-quality-issue-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 12px; }
#drawerBody .data-quality-issue-heading span { color: var(--muted); font-size: 11px; font-weight: 800; }
#detailDrawerOverlay:has(.data-quality-issue-section) #detailDrawer { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
#detailDrawerOverlay:has(.data-quality-issue-section) #drawerBody { min-height: 0; align-content: start; grid-auto-rows: max-content; overflow-y: auto; }
#drawerBody .data-quality-issue-list { min-height: 150px; height: min(42vh, 380px); max-height: min(42vh, 380px); overflow-x: auto !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: 12px; }
#drawerBody .data-quality-issue-list::-webkit-scrollbar { width: 10px; height: 10px; }
#drawerBody .data-quality-issue-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: #a7b9aa; background-clip: padding-box; }
#drawerBody .data-quality-issue-list { scrollbar-color: #a7b9aa transparent; scrollbar-width: thin; }
#drawerBody .data-quality-issue-list table { min-width: 920px; table-layout: fixed; }
#drawerBody .data-quality-issue-list th { position: sticky; top: 0; z-index: 1; background: var(--soft); }
#drawerBody .data-quality-issue-list th:nth-child(1) { width: 86px; }
#drawerBody .data-quality-issue-list th:nth-child(2) { width: 94px; }
#drawerBody .data-quality-issue-list th:nth-child(3) { width: 180px; }
#drawerBody .data-quality-issue-list th:nth-child(5) { width: 170px; }
#drawerBody .data-quality-issue-list th:nth-child(6) { width: 164px; }
#drawerBody .data-quality-action-cell { white-space: nowrap; }
#drawerBody .data-quality-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
#drawerBody .data-quality-ignore { border-color: #d9a441; background: #fff8e8; color: #825d11; }
.sponsor-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sponsor-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; min-width: 0; }
.sponsor-card .customer-logo { flex: 0 0 auto; }
.sponsor-card div { min-width: 0; }
.sponsor-card strong, .sponsor-card small { display: block; overflow-wrap: anywhere; }
.nested-panel { border-radius: 10px; box-shadow: none; }
.answer-bank { display: grid; gap: 12px; }
.answer-bank article { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; display: grid; gap: 8px; }
.answer-bank p { margin: 0; color: var(--muted); line-height: 1.45; }
.esg-submission-screen { display: grid; gap: 14px; background: linear-gradient(135deg,#fffdf7 0%,#f4f7ed 100%); }
.esg-submission-screen > .panel-title { align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.esg-submission-screen .grid-4 { grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; }
.esg-submission-screen .metric-card { background: #fff; border-color: #ded6c4; border-radius: 14px; padding: 14px; }
.esg-submission-screen .metric-card strong { font-size: clamp(18px, 2vw, 24px); }
.esg-submission-screen .metric-card small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.latest-pack-card strong, .latest-pack-card small { overflow-wrap: anywhere; }
.esg-submission-screen .nested-panel { background: rgba(255,255,255,.78); border: 1px solid #e2dac8; padding: 16px; }
.esg-command-panel { background: radial-gradient(circle at 92% 8%, rgba(71, 132, 76, .16), transparent 26%), linear-gradient(135deg, #fffdf7 0%, #f0f6e9 100%) !important; }
.esg-command-panel > .panel-title { align-items: flex-start; border-bottom: 1px solid #dfd6c5; padding-bottom: 12px; }
.esg-command-panel > .panel-title button { width: auto; min-width: 280px; }
.esg-period-bar { grid-template-columns: minmax(180px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; margin-top: 12px; }
.compact-scorecard { margin-top: 12px; }
.compact-scorecard .scorecard-item { min-height: 96px; padding: 12px; }
.compact-scorecard .scorecard-item strong { font-size: clamp(18px, 2vw, 24px); }
.esg-command-metrics { margin-top: 12px; }
.esg-boundary-note { border: 1px solid #d8ccb7; border-left: 4px solid var(--green); border-radius: 12px; background: rgba(255,255,255,.74); padding: 10px 12px; color: var(--muted); line-height: 1.4; }
.esg-readiness-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.esg-readiness-card { background: rgba(20,27,23,.72); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 8px; color: var(--ink); }
.esg-readiness-card strong { font-size: 24px; line-height: 1.1; }
.esg-readiness-card p { margin: 0; color: var(--muted); }
.esg-readiness-card.tone-ready { border-color: rgba(61,214,140,.5); box-shadow: inset 0 0 0 1px rgba(61,214,140,.2); }
.esg-readiness-card.tone-progress { border-color: rgba(240,169,60,.5); box-shadow: inset 0 0 0 1px rgba(240,169,60,.18); }
.esg-readiness-card.tone-attention { border-color: rgba(239,68,68,.45); box-shadow: inset 0 0 0 1px rgba(239,68,68,.16); }
.esg-readiness-meter { height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.esg-readiness-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3dd68c 0%, #7be0af 100%); }
.esg-readiness-checks { display: grid; gap: 14px; }
.esg-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.esg-check-item { background: rgba(20,27,23,.72); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; color: var(--ink); }
.esg-check-item strong { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.esg-check-item span { font-weight: 700; color: var(--ink); }
.esg-check-item small { color: var(--muted); }
.esg-check-item.ok strong { color: #1f8f57; }
.esg-check-item.gap strong { color: #c27b13; }
.esg-check-item.info strong { color: #3158d3; font-size: 20px; letter-spacing: 0; }
.esg-workspace-panel > .grid-2 { align-items: start; }
.esg-workspace-panel .nested-panel { background: #fff; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; }
.esg-workspace-stack { display: grid; gap: 12px; }
/* Supporting-data workspace: each panel holds a wide table + form, so stack them
   full-width instead of cramming three narrow columns. */
.esg-workspace-three { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.esg-workspace-three .filter-bar { margin-bottom: 12px; }
/* Fit the wide declaration / evidence tables inside the now full-width panels
   so they no longer force a cramped horizontal scrollbar. */
.esg-workspace-three .compact-declaration-table table { min-width: 760px; }
.esg-workspace-three .esg-compact-table table { min-width: 520px; }
.esg-mini-checklist { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid #d6e5d9; border-radius: 12px; background: #f4faf5; }
.esg-mini-checklist strong { font-size: 14px; }
.esg-mini-checklist span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.esg-collapsible { display: grid; gap: 12px; }
.esg-collapsible > summary { cursor: pointer; list-style: none; font-weight: 900; font-size: 18px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.esg-collapsible > summary::-webkit-details-marker { display: none; }
.esg-collapsible > summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .16s ease; }
.esg-collapsible[open] > summary::before { transform: rotate(90deg); }
.esg-collapsible .nested-panel { margin-top: 12px; background: #fff; }
.esg-support-launcher { display: grid; gap: 16px; overflow: hidden; }
.esg-support-launcher .panel-title { margin-bottom: 0; }
.esg-support-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.esg-support-action {
  --support-accent: #3dd68c;
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--support-accent) 34%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--support-accent) 8%, var(--panel));
  color: var(--ink);
  box-shadow: none;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy arrow"
    "icon status arrow";
  align-items: center;
  gap: 8px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.esg-support-action.evidence { --support-accent: #60a5fa; }
.esg-support-action.note { --support-accent: #f0a93c; }
.esg-support-action:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--support-accent) 70%, var(--line));
  background: color-mix(in srgb, var(--support-accent) 13%, var(--panel));
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.esg-support-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--support-accent) 44%, transparent); outline-offset: 2px; }
.esg-support-action-icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--support-accent) 18%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--support-accent) 38%, var(--line));
  font-size: 22px;
}
.esg-support-action-copy { grid-area: copy; display: grid; gap: 5px; min-width: 0; }
.esg-support-action-copy strong { color: var(--ink); font-size: 15px; line-height: 1.2; }
.esg-support-action-copy small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.esg-support-action-status {
  grid-area: status;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--support-accent) 14%, var(--soft));
  color: color-mix(in srgb, var(--support-accent) 82%, white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.esg-support-action-arrow { grid-area: arrow; color: var(--support-accent); font-size: 20px; transition: transform .16s ease; }
.esg-support-action:hover .esg-support-action-arrow { transform: translateX(3px); }
.esg-support-modal-overlay { background: rgba(3, 8, 12, .72); backdrop-filter: blur(8px); }
.esg-support-modal-overlay .center-modal {
  width: min(1180px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  animation: esgSupportModalIn .22s ease-out both;
}
.esg-support-modal-overlay .center-modal-head { padding: 18px 22px; }
.esg-support-modal-overlay .center-modal-body { padding: 20px 22px 24px; }
.esg-support-modal-content { min-width: 0; }
.esg-support-modal-content > .nested-panel { margin: 0; display: grid; gap: 14px; }
.esg-support-modal-content .panel-title { margin-bottom: 0; }
.esg-support-modal-content .data-grid { overflow-x: auto; }
.esg-support-modal-content .compact-declaration-table table { min-width: 900px; }
.esg-support-modal-content .esg-compact-table table { min-width: 680px; }
.esg-support-form { grid-template-columns: minmax(150px, .7fr) minmax(160px, .75fr) minmax(260px, 1.5fr) auto; }
.esg-note-period { grid-template-columns: minmax(180px, 260px); }
@keyframes esgSupportModalIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 980px) {
  .esg-support-actions { grid-template-columns: 1fr; }
  .esg-support-action { min-height: 88px; }
  .esg-support-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .esg-support-modal-overlay { padding: 8px; place-items: stretch; }
  .esg-support-modal-overlay .center-modal { width: 100%; max-height: calc(100vh - 16px); border-radius: 16px; }
  .esg-support-modal-overlay .center-modal-head,
  .esg-support-modal-overlay .center-modal-body { padding: 14px; }
  .esg-support-form { grid-template-columns: 1fr; }
  .esg-support-action { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 14px; }
  .esg-support-action-icon { width: 42px; height: 42px; }
}
.esg-readiness-hero { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(150px, 1fr)); gap: 10px; }
.readiness-score { border-radius: 18px; padding: 16px; color: #fff; display: grid; align-content: center; gap: 4px; min-height: 104px; }
.readiness-score span, .readiness-score small { color: rgba(255,255,255,.82); }
.readiness-score strong { font-size: clamp(24px, 3vw, 36px); line-height: 1; }
.readiness-score.ready { background: linear-gradient(135deg,#235f3b,#6f9a55); }
.readiness-score.need-action { background: linear-gradient(135deg,#8b5c20,#d2a13c); }
.readiness-score.missing { background: linear-gradient(135deg,#7b2e22,#c46a4d); }
.esg-workspace-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 12px; align-items: start; }
.scorecard-hero { background: linear-gradient(135deg,#fffdf7 0%,#eef6e9 100%) !important; }
.scorecard-hero .panel-title { align-items: flex-start; }
.scorecard-hero .panel-title button { width: auto; min-width: 260px; }
.scorecard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.scorecard-item { border: 1px solid #d8ccb7; border-left: 5px solid #c6bca6; border-radius: 16px; background: #fff; padding: 14px; display: grid; gap: 6px; min-height: 120px; }
.scorecard-item span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.scorecard-item strong { font-size: clamp(20px, 2.3vw, 28px); line-height: 1.05; }
.scorecard-item small { color: var(--muted); line-height: 1.35; }
.scorecard-item.ready { border-left-color: #5f9864; background: linear-gradient(135deg,#f4fbf1,#fff); }
.scorecard-item.check { border-left-color: #c99b28; background: linear-gradient(135deg,#fff8df,#fff); }
.scorecard-item.need-action { border-left-color: #b7644f; background: linear-gradient(135deg,#fff1ea,#fff); }
.highlight-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.highlight-grid article { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px; display: grid; gap: 4px; }
.highlight-grid span { color: var(--muted); font-size: 12px; }
.highlight-grid strong { font-size: 20px; }
.highlight-grid small { color: var(--muted); }
.claim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.claim-grid article { border-radius: 14px; border: 1px solid #d8ccb7; background: #fffaf0; padding: 12px; }
.claim-grid strong { display: block; margin-bottom: 5px; }
.claim-grid p { margin: 0; color: var(--muted); line-height: 1.4; }
.compact-action-note { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) 120px 150px 150px; gap: 8px; margin-top: 12px; }
.esg-task-panel { align-self: start; min-height: 0; }
.check-stack { display: grid; gap: 8px; }
.workflow-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.workflow-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-left: 5px solid #c6bca6; border-radius: 14px; background: #fff; padding: 12px; }
.workflow-card.ready { border-left-color: #5f9864; background: linear-gradient(90deg,#f3fbf2,#fff); }
.workflow-card.need-action { border-left-color: #b7644f; background: linear-gradient(90deg,#fff4ef,#fff); }
.workflow-card.check { border-left-color: #c99b28; background: linear-gradient(90deg,#fff8df,#fff); }
.workflow-index { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #efe8db; color: #5b4b31; font-weight: 900; }
.workflow-card.ready .workflow-index { background: #dcebd8; color: #255b31; }
.workflow-card.need-action .workflow-index { background: #f4ded7; color: #7c2e1c; }
.workflow-card.check .workflow-index { background: #fff1c9; color: #7b5700; }
.workflow-card strong { display: block; font-size: 14px; }
.workflow-card p { margin: 3px 0; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.workflow-card small { display: block; color: #6d614d; font-weight: 700; font-size: 11.5px; }
.workflow-card button { width: auto; min-width: 96px; }
.fix-list { display: grid; gap: 8px; }
.fix-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px; }
.fix-item > span { border-radius: 999px; padding: 6px 9px; text-align: center; font-size: 12px; font-weight: 900; color: #7c2e1c; background: #f4ded7; }
.fix-item.check > span { color: #7b5700; background: #fff1c9; }
.fix-item.ready > span { color: #255b31; background: #dcebd8; }
.fix-item strong { display: block; }
.fix-item small { display: block; color: var(--muted); margin-top: 2px; }
.fix-item button { width: auto; min-width: 96px; }
.task-progress { position: relative; display: grid; grid-template-columns: repeat(6, minmax(82px, 1fr)); gap: 6px; padding: 6px 2px 0; }
.task-progress::before { content: ""; position: absolute; left: 8%; right: 8%; top: 23px; height: 2px; background: #d9d1bf; z-index: 0; }
.task-step { position: relative; z-index: 1; min-height: 76px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; box-shadow: none; }
.task-step:hover .step-dot { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.15); }
.step-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f2eadc; border: 2px solid #d4c8b2; color: #5d533f; font-weight: 900; transition: .18s ease; font-size: 13px; }
.task-step strong { font-size: 11.5px; line-height: 1.1; }
.task-step small { font-size: 10.5px; color: var(--muted); font-weight: 800; }
.task-completed .step-dot, .task-locked .step-dot { background: #dcebd8; border-color: #5f9864; color: #255b31; }
.task-pending .step-dot { background: #fff1c9; border-color: #c99b28; color: #7b5700; }
.task-missing .step-dot { background: #f4ded7; border-color: #b7644f; color: #7c2e1c; }
.task-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; color: var(--muted); font-size: 11px; }
.task-legend span { display: inline-flex; align-items: center; gap: 5px; }
.task-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.task-legend .done { background: #5f9864; }
.task-legend .todo { background: #b7644f; }
.task-legend .check { background: #c99b28; }
.check-stack article { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.check-stack article { justify-content: flex-start; align-items: flex-start; }
.check-stack strong { display: block; }
.check-stack small { display: block; color: var(--muted); margin-top: 2px; }
.esg-input-panel .filter-bar { grid-template-columns: 160px 170px minmax(220px, 1fr) 210px; }
.esg-document-form { grid-template-columns: 190px minmax(180px, 1fr) minmax(180px, 1fr) 120px; }
.esg-action-form { grid-template-columns: repeat(2, minmax(180px, 1fr)) 130px 150px 120px; }
.compact-declaration-table table { min-width: 1040px; }
.compact-declaration-table th, .compact-declaration-table td { padding: 8px 10px; font-size: 13px; }
.esg-compact-table table { min-width: 760px; }
.esg-compact-table .action-cell, .compact-actions { min-width: 0; }
.esg-compact-table th, .esg-compact-table td { padding: 8px 10px; font-size: 13px; }
.esg-submission-screen .chart-card { min-height: 220px; background: #fff; }
.compact-answer-panel { padding-bottom: 10px; }
.compact-answer-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compact-answer-bank article { display: grid; gap: 6px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbf7; }
.compact-answer-bank strong { display: block; font-size: 13px; margin-bottom: 4px; }
.compact-answer-bank p { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.compact-answer-bank details { border-top: 1px solid var(--line); padding-top: 7px; }
.compact-answer-bank details summary { cursor: pointer; color: var(--green); font-weight: 900; font-size: 12px; }
.compact-answer-bank details p { display: block; -webkit-line-clamp: unset; margin: 8px 0; background: #fff; border-radius: 10px; padding: 8px; }
.compact-answer-bank .compact-btn { padding: 7px 10px; }
.mini-tag { display: inline-flex; width: fit-content; border-radius: 999px; background: #e8efe5; color: var(--green); padding: 2px 7px; font-size: 11px; font-weight: 800; margin-bottom: 5px; }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; }
.module-grid label { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px; font-weight: 800; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; justify-items: start; min-height: 62px; text-align: left; }
.module-grid label span { display: grid; gap: 2px; }
.module-grid label small { color: var(--muted); font-weight: 600; line-height: 1.25; }
.module-grid input { width: auto; }
.pack-purpose-help, .evidence-type-help { border: 1px solid #d8ccb7; border-left: 4px solid var(--green); border-radius: 12px; background: #fffaf0; padding: 10px 12px; display: grid; gap: 3px; color: var(--muted); }
.pack-purpose-help strong { color: var(--ink); }
.pack-purpose-help span, .pack-purpose-help small { display: block; }
.pack-builder .filter-bar { grid-template-columns: minmax(220px, 360px); }
.pack-builder .panel-title button { width: auto; min-width: 170px; }
.role-permission-cards { display: grid; gap: 12px; }
.role-permission-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px; display: grid; gap: 12px; }
.role-permission-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.role-permission-head strong { font-size: 15px; }
.role-permission-head small { color: var(--muted); line-height: 1.35; }
.permission-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.permission-group > span { color: var(--green); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding-top: 5px; }
.notification-admin-panel { border-left: 4px solid var(--green); }
.notification-admin-panel .compact-grid table { min-width: 760px; }
.account-flow-guide { display: grid; gap: 14px; }
.account-flow-guide > div:first-child { display: grid; gap: 4px; }
.account-control-hero { border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 16px; background: radial-gradient(circle at 96% 0%, rgba(95,152,100,.18), transparent 28%), #fff; padding: 16px; display: grid; gap: 14px; }
.account-control-hero h2 { margin: 3px 0; }
.account-control-hero p { margin: 0; color: var(--muted); }
.account-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.account-mode-grid button { background: #f4f1e9; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: left; display: grid; gap: 4px; min-height: 86px; }
.account-mode-grid button.active { background: #111712; color: #fff; border-color: #111712; box-shadow: 0 16px 34px rgba(17,23,18,.16); }
.account-mode-grid button span { color: var(--muted); font-weight: 700; }
.account-mode-grid button.active span { color: rgba(255,255,255,.72); }
.account-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-path-grid article { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 13px; display: grid; gap: 6px; }
.account-path-grid b { font-size: 15px; }
.account-path-grid span, .account-path-grid small { color: var(--muted); line-height: 1.35; }
.account-path-grid span strong { color: var(--ink); }
.account-scope-help { border: 1px solid #d8ccb7; border-left: 4px solid var(--green); border-radius: 12px; background: #fffaf0; padding: 10px 12px; color: var(--muted); line-height: 1.35; }
.internal-account-panel { border-left: 5px solid #111712; }
.single-customer-panel { border-left: 5px solid var(--green); }
.table-subtext { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.single-customer-form { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; align-items: start; }
.single-customer-form .upload-box { min-height: 42px; }
.single-customer-form button { grid-column: 1 / -1; }
.account-checklist-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.account-checklist-panel article { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.account-checklist-panel article > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #f4ded7; color: #7c2e1c; }
.account-checklist-panel article.ready > span { background: #dcebd8; color: #255b31; }
.account-checklist-panel strong, .account-checklist-panel small { display: block; }
.account-checklist-panel small { color: var(--muted); margin-top: 2px; }
.settings-clean { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(520px, 1.15fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.settings-permission-panel { grid-row: span 2; }
.account-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.account-form-row { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) 180px; gap: 10px; align-items: center; }
.account-form-row button { height: 100%; min-height: 42px; }
.standalone-title { margin: 8px 0 -4px; }
.master-shell { display: grid; gap: 14px; }
.master-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(520px, .95fr); gap: 18px; align-items: stretch; background: radial-gradient(circle at 86% 12%, rgba(95,152,100,.22), transparent 34%), linear-gradient(135deg, #101813, #263327 48%, #f8f4e9 48.2%, #fffdf7); color: #fff; overflow: hidden; }
.master-hero-copy { display: grid; align-content: center; gap: 10px; min-height: 210px; }
.master-hero-copy h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: .98; max-width: 12ch; }
.master-hero-copy p { margin: 0; max-width: 62ch; color: rgba(255,255,255,.88); }
.master-hero-copy small { color: rgba(255,255,255,.72); font-weight: 700; }
.master-hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.master-hero-metrics article { border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.88); color: var(--ink); border-radius: 16px; padding: 16px; box-shadow: 0 18px 40px rgba(19,28,21,.12); }
.master-hero-metrics span { display: block; color: var(--muted); font-size: 12px; }
.master-hero-metrics strong { display: block; margin-top: 4px; font-size: 24px; line-height: 1.05; }
.master-tabs { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 16px; padding: 7px; background: rgba(255,255,255,.84); position: sticky; top: 8px; z-index: 9; backdrop-filter: blur(10px); }
.master-tabs button { width: auto; background: transparent; color: #6a6254; border-radius: 12px; padding: 10px 14px; }
.master-tabs button.active { background: #111712; color: #fff; box-shadow: inset 0 -2px 0 var(--green); }
.master-content { display: grid; gap: 14px; }
.master-workspace-page { gap: 24px; }
.master-control-segment,
.master-branch-portal-segment { display: grid; gap: 14px; min-width: 0; }
.master-control-segment {
  padding: 22px;
  border: 1px solid rgba(132, 151, 177, .18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(25, 29, 38, .88), rgba(17, 20, 27, .96));
}
.master-branch-portal-segment {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(68, 211, 135, .3);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(13, 31, 25, .72), rgba(14, 17, 23, .97) 28%);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22), inset 0 1px rgba(111, 239, 166, .05);
}
.master-branch-portal-segment::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 34px;
  width: min(260px, 35%);
  height: 2px;
  background: linear-gradient(90deg, #52d68b, rgba(82, 214, 139, 0));
}
.master-segment-heading { display: grid; grid-template-columns: minmax(150px, .25fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.master-segment-heading > span { color: #52d68b; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.master-segment-heading h2 { margin: 0 0 4px; font-size: 20px; }
.master-segment-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.branch-portal-heading { grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr) auto; padding: 2px 4px 6px; }
.branch-portal-heading em { justify-self: end; padding: 7px 11px; border: 1px solid rgba(82, 214, 139, .28); border-radius: 999px; color: #8ae6b0; background: rgba(31, 120, 75, .13); font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.master-branch-selector { background: rgba(20, 23, 31, .72); }
@media (max-width: 820px) {
  .master-control-segment,
  .master-branch-portal-segment { padding: 16px; }
  .master-segment-heading,
  .branch-portal-heading { grid-template-columns: 1fr; gap: 7px; }
  .branch-portal-heading em { justify-self: start; }
}
.master-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); gap: 14px; }
.master-wide { grid-column: 1 / -1; }
.master-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.master-action-list { display: grid; gap: 8px; }
.master-action-list article { border: 1px solid var(--line); border-radius: 12px; background: #fbfbf7; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.master-action-list strong, .master-action-list small { display: block; }
.master-action-list small { color: var(--muted); margin-top: 3px; }
.master-action-list button { width: auto; }
.master-evidence-grid { align-items: start; }
.master-chart-page { display: grid; gap: 14px; }
.master-chart-brief { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; }
.master-goal-box { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px; display: grid; gap: 8px; }
.master-goal-box label, .master-goal-box small { color: var(--muted); font-weight: 700; }
.master-goal-box input { font-size: 22px; font-weight: 900; }
.master-goal-form { display: grid; grid-template-columns: minmax(220px, 1.2fr) 130px 130px 130px minmax(180px, 1fr) 130px; gap: 10px; align-items: center; margin: 12px 0; }
.master-goal-form-stack { grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(210px, 1fr)) minmax(180px, .8fr) 150px; align-items: stretch; }
.master-goal-triplet { border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: #fbfbf7; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.master-goal-triplet label { grid-column: 1 / -1; color: var(--muted); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.master-goal-cell { display: grid; gap: 4px; min-width: 170px; }
.master-goal-cell strong, .master-goal-cell small { display: block; }
.master-goal-cell small { color: var(--muted); }
.master-goal-period-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.master-goal-period-grid.compact { margin: 10px 0; }
.master-goal-period-grid > article { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fbfbf7; }
.master-goal-period-grid > article > span { display: block; color: var(--muted); font-weight: 900; margin-bottom: 8px; }
.master-goal-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 14px; align-items: center; }
.master-goal-head h2 { margin-bottom: 4px; }
.master-goal-head p { margin: 0; }
.master-goal-mini { border: 1px solid var(--line); border-radius: 14px; background: #fbfbf7; padding: 10px; }
.master-goal-details { margin-top: 12px; border: 0; background: transparent; overflow: visible; width: fit-content; }
.master-goal-details summary { cursor: pointer; list-style: none; width: fit-content; min-width: 230px; padding: 10px 14px; border-radius: 999px; background: #111712; color: #fff; font-weight: 900; display: inline-flex; gap: 18px; justify-content: space-between; align-items: center; }
.master-goal-details summary::-webkit-details-marker { display: none; }
.master-goal-details summary::after { content: "Open"; font-size: 12px; color: #cfe7d5; }
.master-goal-details[open] summary::after { content: "Close"; }
.master-goal-details > :not(summary) { margin-left: 0; margin-right: 0; }
.master-goal-onboarding { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(11,18,13,.62); backdrop-filter: blur(8px); }
.master-goal-onboarding-card { width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; background: #fffdf7; box-shadow: 0 30px 90px rgba(0,0,0,.32); padding: 26px; display: grid; gap: 16px; position: relative; }
.master-goal-onboarding-close { position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: #eef2ee; color: var(--ink); padding: 0; display: grid; place-items: center; font-size: 24px; line-height: 1; }
.master-goal-onboarding-card h2 { margin: 4px 0; font-size: clamp(28px, 4vw, 46px); line-height: .98; }
.master-goal-onboarding-card p { margin: 0; color: var(--muted); max-width: 70ch; }
.master-goal-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.master-goal-rules article { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px; display: grid; gap: 5px; }
.master-goal-rules strong, .master-goal-rules span { display: block; }
.master-goal-rules span { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.master-goal-onboarding-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.master-goal-onboarding-form label { display: grid; gap: 6px; color: var(--muted); font-weight: 900; }
.master-goal-onboarding-form .wide, .master-goal-onboarding-form button { grid-column: 1 / -1; }
.master-goal-locked-note, .master-campaign-purpose { border: 1px solid var(--line); border-radius: 12px; background: #fbfbf7; padding: 10px 12px; display: grid; gap: 4px; }
.master-goal-locked-note strong, .master-goal-locked-note span, .master-campaign-purpose span, .master-campaign-purpose strong { display: block; }
.master-goal-locked-note span, .master-campaign-purpose span { color: var(--muted); font-weight: 800; font-size: 12px; }
.master-goal-locked-screen { min-height: 420px; align-content: center; justify-items: start; gap: 18px; background: radial-gradient(circle at 88% 12%, rgba(191,152,56,.16), transparent 34%), #fffdf7; }
.master-goal-locked-screen h2 { margin: 4px 0; font-size: clamp(28px, 4vw, 46px); line-height: .98; max-width: 760px; }
.master-goal-locked-screen p { max-width: 820px; }
.master-goal-locked-screen button { width: min(360px, 100%); }
.master-branch-goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 0 0 12px; }
.master-branch-goal-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px; display: grid; gap: 8px; }
.master-branch-goal-card > strong, .master-branch-goal-card > small { display: block; }
.master-branch-goal-card > small { color: var(--muted); }
.warning-note { border: 1px solid #d8b45a; border-left: 5px solid #bf9838; background: #fff8e7; border-radius: 12px; padding: 10px 12px; margin: 10px 0; color: #5f4610; }
.master-admin-goal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.master-mission-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr); gap: 18px; align-items: stretch; border: 1px solid var(--line); border-radius: 22px; padding: 24px; background: radial-gradient(circle at 88% 14%, rgba(47,143,88,.18), transparent 32%), linear-gradient(135deg, #111712, #253326 52%, #faf7ee 52.2%, #fffdf7); color: #fff; overflow: hidden; }
.master-mission-hero.amber { background: radial-gradient(circle at 88% 14%, rgba(191,152,56,.22), transparent 32%), linear-gradient(135deg, #1d1a11, #483c1d 52%, #fff8e7 52.2%, #fffdf7); }
.master-mission-hero.red { background: radial-gradient(circle at 88% 14%, rgba(180,95,71,.23), transparent 32%), linear-gradient(135deg, #21120f, #4a241c 52%, #fff1ef 52.2%, #fffdf7); }
.master-mission-hero h2 { margin: 4px 0 8px; font-size: clamp(30px, 4vw, 54px); line-height: .96; max-width: 14ch; }
.master-mission-hero p { margin: 0; color: rgba(255,255,255,.82); max-width: 68ch; }
.master-mission-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.master-mission-status small { color: rgba(255,255,255,.76); font-weight: 800; }
.master-mission-progress { margin-top: 18px; display: grid; gap: 8px; max-width: 760px; }
.master-mission-progress-label { display: flex; justify-content: space-between; align-items: end; gap: 14px; color: #fff; }
.master-mission-progress-label strong { font-size: 24px; line-height: 1; }
.master-mission-progress-label span { font-size: 28px; font-weight: 950; color: #bde8c4; }
.master-mission-progress-track { height: 34px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.34); display: flex; justify-content: flex-start; box-shadow: inset 0 1px 8px rgba(0,0,0,.2); }
.master-mission-progress-track i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #1e8e4d, #b7cf76); transition: width .45s ease; }
.master-mission-progress small { color: rgba(255,255,255,.75); font-weight: 800; }
.master-boundary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.master-boundary-strip article { border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: rgba(255,255,255,.1); padding: 10px; color: #fff; }
.master-boundary-strip span, .master-boundary-strip strong, .master-boundary-strip small { display: block; }
.master-boundary-strip span { color: rgba(255,255,255,.66); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.master-boundary-strip strong { margin-top: 3px; font-size: 19px; }
.master-boundary-strip small { color: rgba(255,255,255,.66); margin-top: 2px; font-size: 11px; font-weight: 800; line-height: 1.25; }
.master-mission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.master-mission-grid article { border: 1px solid rgba(255,255,255,.56); background: rgba(255,255,255,.88); color: var(--ink); border-radius: 16px; padding: 14px; box-shadow: 0 18px 38px rgba(19,28,21,.13); }
.master-mission-grid span { display: block; color: var(--muted); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.master-mission-grid strong { display: block; margin-top: 4px; font-size: 24px; line-height: 1.05; }
.master-mission-grid small { display: block; margin-top: 3px; color: var(--muted); font-weight: 800; }
.master-mission-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.master-mission-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.master-mission-filters button { width: auto; padding: 8px 12px; border-radius: 999px; background: #eef2ee; color: var(--ink); }
.master-mission-filters button.active { background: #07120c; color: #fff; }
.master-mission-table { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.master-mission-table table { width: 100%; border-collapse: collapse; min-width: 980px; table-layout: fixed; }
.master-mission-table th:nth-child(1), .master-mission-table td:nth-child(1) { width: 46px; }
.master-mission-table th:nth-child(2), .master-mission-table td:nth-child(2) { width: 20%; }
.master-mission-table th:nth-child(3), .master-mission-table td:nth-child(3) { width: 24%; }
.master-mission-table th:nth-child(4), .master-mission-table td:nth-child(4) { width: 12%; }
.master-mission-table th:nth-child(5), .master-mission-table td:nth-child(5) { width: 18%; }
.master-mission-table th:nth-child(6), .master-mission-table td:nth-child(6),
.master-mission-table th:nth-child(7), .master-mission-table td:nth-child(7) { width: 10%; }
.master-mission-table th:nth-child(8), .master-mission-table td:nth-child(8) { width: 116px; }
.master-mission-table th { position: sticky; top: 0; z-index: 1; background: #f4f8f5; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.master-mission-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.master-mission-table tr:last-child td { border-bottom: none; }
.master-mission-table tr.green td { background: #f6fcf7; }
.master-mission-table tr.amber td { background: #fffaf0; }
.master-mission-table tr.red td { background: #fff4f1; }
.master-mission-table strong, .master-mission-table small { display: block; }
.master-mission-table small { color: var(--muted); margin-top: 2px; font-weight: 750; line-height: 1.25; }
.master-rank { width: 26px; height: 26px; border-radius: 50%; background: #e6efe8; color: var(--green); display: grid; place-items: center; font-weight: 950; }
.master-mission-row-meter { display: grid; grid-template-columns: minmax(130px, 1fr) 62px; align-items: center; gap: 8px; }
.master-mission-row-meter span { text-align: right; font-weight: 950; }
.master-mission-card, .master-campaign-challenge { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 14px; display: grid; gap: 10px; }
.master-mission-card.green, .master-campaign-challenge.green { border-color: #a8d8b6; background: #f3fbf5; }
.master-mission-card.amber, .master-campaign-challenge.amber { border-color: #ddc37a; background: #fff9e8; }
.master-mission-card.red, .master-campaign-challenge.red { border-color: #e0a39b; background: #fff2ef; }
.master-mission-card-head, .master-campaign-challenge-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.master-mission-card-head strong, .master-campaign-challenge-head strong { display: block; }
.master-mission-card-head small, .master-campaign-challenge-head small, .master-campaign-challenge > small { color: var(--muted); font-weight: 800; }
.master-mission-card-meter, .master-campaign-meter { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.master-mission-card-meter span, .master-campaign-meter span { text-align: right; font-weight: 900; }
.master-mission-card-kpis, .master-campaign-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.master-mission-card-kpis span, .master-campaign-kpis span { border: 1px solid var(--line); border-radius: 10px; padding: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.master-mission-card-kpis b, .master-campaign-kpis b { display: block; color: var(--ink); margin-top: 2px; }
.master-mission-action { display: grid; gap: 6px; }
.master-mission-action span { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; background: rgba(255,255,255,.66); padding: 8px; color: var(--muted); font-size: 12px; font-weight: 900; }
.master-mission-action b { display: block; color: var(--ink); font-weight: 800; margin-top: 2px; line-height: 1.25; }
.master-campaign-challenges { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.master-campaign-challenge { grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.4fr) minmax(260px, .9fr); align-items: center; }
.master-campaign-challenge-head { align-items: center; }
.master-campaign-main { display: grid; gap: 8px; }
.master-campaign-challenge .master-campaign-purpose { min-height: 0; }
.master-campaign-challenge > small { grid-column: 1 / -1; }
.master-campaign-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.master-campaign-footer small { color: var(--muted); font-weight: 800; overflow-wrap: anywhere; }
.master-risk-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.master-risk-reasons article { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fffdf6; display: grid; gap: 8px; align-content: start; }
.master-risk-reasons span, .master-risk-reasons strong, .master-risk-reasons small { display: block; }
.master-risk-reasons span { color: var(--muted); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.master-risk-reasons strong { font-size: 22px; margin-top: 4px; }
.master-risk-reasons small { color: var(--muted); margin-top: 4px; line-height: 1.35; }
.master-risk-reasons button { width: fit-content; margin-top: 4px; }
.master-chart-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 14px; align-items: start; }
.master-chart-card { min-height: 0; overflow: hidden; }
.master-goal-control-row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; align-items: stretch; justify-content: stretch; width: 100%; }
.master-goal-control-row > .master-wide { grid-column: auto; }
.master-goal-control-row > .master-chart-card { min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.master-goal-control-row .master-goal-head { grid-template-columns: 1fr; gap: 12px; height: 100%; }
.master-goal-control-row .master-goal-head h2 { font-size: 22px; line-height: 1.05; }
.master-goal-control-row .master-goal-head p { font-size: 13px; line-height: 1.35; }
.master-goal-control-row .master-goal-mini { min-height: 84px; align-content: center; }
.master-goal-control-row .master-goal-details { margin-top: auto; }
.master-goal-control-row .master-goal-details summary { min-width: 0; width: 100%; justify-content: center; }
.master-goal-control-row .master-campaign-challenges { max-height: 150px; overflow: auto; }
.master-goal-control-row .master-campaign-challenge { grid-template-columns: 1fr; padding: 12px; }
.master-goal-control-row .master-campaign-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.master-goal-control-row .master-goal-details[open] { position: fixed; inset: 0; z-index: 170; margin: 0; width: auto; background: rgba(9,16,11,.58); backdrop-filter: blur(6px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 760px); align-items: stretch; animation: fadeIn .16s ease; }
.master-goal-control-row .master-goal-details[open] > summary { position: fixed; right: 18px; top: 18px; z-index: 2; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #07120c; box-shadow: 0 16px 38px rgba(0,0,0,.22); font-size: 0; display: flex; align-items: center; justify-content: center; }
.master-goal-control-row .master-goal-details[open] > summary::before { content: ""; display: none; }
.master-goal-control-row .master-goal-details[open] > summary::after { content: "x"; color: #fff; font-size: 18px; line-height: 1; margin: 0; transform: translateY(-1px); }
.master-slide-body { display: none; }
.master-goal-control-row .master-goal-details[open] .master-slide-body { position: fixed; right: 0; top: 0; bottom: 0; display: block; width: min(760px, calc(100vw - 32px)); height: auto; overflow: auto; background: #fffdf7; border-left: 1px solid var(--line); box-shadow: -24px 0 70px rgba(0,0,0,.22); padding: 76px 24px 24px; animation: slideInRight .2s ease; }
.master-goal-control-row .master-goal-details[open] .master-goal-form,
.master-goal-control-row .master-goal-details[open] .master-goal-form-stack,
.master-goal-control-row .master-goal-details[open] .master-campaign-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.master-goal-control-row .master-goal-details[open] .master-campaign-branches,
.master-goal-control-row .master-goal-details[open] .mp-table,
.master-goal-control-row .master-goal-details[open] .master-branch-goal-grid { grid-column: 1 / -1; }
.master-goal-control-row .master-goal-details[open] .master-branch-goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@keyframes slideInRight { from { transform: translateX(28px); opacity: .72; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.master-column-chart { min-height: 230px; display: grid; grid-template-columns: repeat(12, minmax(34px, 1fr)); gap: 10px; align-items: end; padding-top: 12px; overflow-x: auto; }
.master-column { min-height: 220px; display: grid; grid-template-rows: 28px 1fr 22px; gap: 6px; align-items: end; text-align: center; min-width: 42px; }
.master-column strong { font-size: 11px; color: var(--ink); white-space: nowrap; transform: rotate(-18deg); transform-origin: center; }
.master-column span { height: 150px; border-radius: 999px; background: var(--chart-track); display: flex; align-items: end; overflow: hidden; border: 1px solid var(--line); }
.master-column i { display: block; width: 100%; min-height: 4px; background: linear-gradient(180deg, var(--chart-bar), #77b07c); border-radius: 999px 999px 0 0; }
.master-column small { color: var(--muted); font-weight: 800; }
.master-bar-list { display: grid; gap: 9px; }
.master-bar-row { display: grid; grid-template-columns: 28px minmax(150px, 1fr) 1.8fr 96px; gap: 10px; align-items: center; cursor: pointer; }
.master-bar-row > span { width: 26px; height: 26px; border-radius: 50%; background: #e6efe8; color: var(--green); display: grid; place-items: center; font-weight: 900; }
.master-bar-row strong, .master-bar-row small { display: block; }
.master-bar-row small { color: var(--muted); margin-top: 2px; }
.master-bar-track, .master-mini-track, .master-progress-track { height: 13px; border-radius: 999px; background: var(--chart-track); overflow: hidden; border: 1px solid var(--line); display: flex; align-items: stretch; justify-content: flex-start; }
.master-bar-track i, .master-mini-track i, .master-progress-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--chart-bar), #9dbb6f); border-radius: inherit; }
.master-combo-wrap { display: grid; gap: 8px; }
.master-combo-legend { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; font-size: 12px; }
.master-combo-legend span { display: inline-block; }
.master-combo-legend .bar-key { width: 18px; height: 10px; border-radius: 3px; background: var(--chart-bar); }
.master-combo-legend .line-key { width: 22px; height: 3px; border-radius: 999px; background: #c4622d; }
.master-combo-chart { width: 100%; height: auto; min-height: 240px; display: block; overflow: visible; }
.master-combo-chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.master-combo-chart .grid text { fill: var(--chart-axis); font-size: 10px; }
.master-combo-chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
.master-combo-chart .bars rect { fill: url(#none); fill: var(--chart-bar); opacity: .88; cursor: pointer; }
.master-combo-chart .bars text { fill: var(--chart-axis); font-size: 10px; font-weight: 800; }
.master-combo-chart .waste-line { fill: none; stroke: #c4622d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.master-combo-chart .waste-dots circle { fill: #fff; stroke: #c4622d; stroke-width: 3; }
.master-linebar-list { display: grid; gap: 10px; }
.master-linebar-list.compact .master-linebar-row { grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.5fr) 90px; padding: 8px 10px; }
.master-linebar-list.compact .master-linebar { min-height: 54px; }
.master-linebar-list.compact .master-linebar span { height: 54px; }
.master-linebar-row { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(360px, 1.5fr) 110px; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fbfbf7; padding: 10px 12px; cursor: pointer; }
.master-linebar-row strong, .master-linebar-row small { display: block; }
.master-linebar-row small { color: var(--muted); margin-top: 2px; }
.master-linebar { min-height: 74px; display: grid; grid-template-columns: repeat(6, minmax(34px, 1fr)); gap: 8px; align-items: end; }
.master-linebar span { display: grid; grid-template-rows: 1fr 16px; gap: 3px; height: 72px; align-items: end; text-align: center; }
.master-linebar span i { display: block; width: 100%; min-height: 3px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--chart-bar), #82ad72); }
.master-linebar span small { color: var(--muted); font-size: 10px; font-weight: 800; }
.master-linebar-list.waste .master-linebar span i { background: linear-gradient(180deg, #bf9838, #b45f47); }
.master-donut-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; }
.master-donut { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center; background: radial-gradient(circle at center, #fff 0 48%, transparent 49%), conic-gradient(var(--chart-bar) 0 74%, #c9b46d 74% 88%, #d8e2d6 88% 100%); border: 1px solid var(--line); }
.master-donut strong, .master-donut small { display: block; }
.master-donut small { color: var(--muted); font-weight: 800; }
.master-pie-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: center; }
.master-branch-pie { width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line), 0 18px 45px rgba(20,34,24,.12); position: relative; }
.master-branch-pie::after { content: ""; position: absolute; inset: 54px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.master-branch-pie span { position: relative; z-index: 1; text-align: center; display: grid; gap: 2px; }
.master-branch-pie strong { font-size: 22px; }
.master-branch-pie small { color: var(--muted); font-weight: 900; }
.master-pie-tooltip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); width: 260px; max-width: 82vw; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 18px 45px rgba(20,34,24,.18); padding: 10px; z-index: 3; display: grid; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.master-branch-pie:hover .master-pie-tooltip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.master-pie-tooltip div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
.master-pie-tooltip strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-pie-tooltip span { color: var(--muted); font-weight: 800; }
.master-pie-legend-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.master-pie-legend { width: 100%; border: 1px solid var(--line); background: #fbfbf7; color: var(--ink); border-radius: 12px; padding: 9px; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; text-align: left; align-items: center; }
.master-pie-legend strong, .master-pie-legend small { display: block; }
.master-pie-legend small { grid-column: 2; color: var(--muted); font-size: 12px; }
.master-material-list { display: grid; gap: 9px; }
.master-material-row { display: grid; grid-template-columns: 14px minmax(120px, 1fr) 1.2fr; gap: 9px; align-items: center; }
.master-material-row strong, .master-material-row small { display: block; }
.master-material-row small { color: var(--muted); }
.material-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.dot-1 { background: #c9b46d; }
.dot-2 { background: #5f7f9f; }
.dot-3 { background: #bb7d52; }
.dot-4 { background: #7c6f59; }
.dot-5 { background: #a3b18a; }
.master-stack { display: grid; gap: 16px; }
.master-stack-bar { height: 38px; border-radius: 999px; overflow: hidden; display: flex; background: var(--chart-track); border: 1px solid var(--line); }
.master-stack-bar span { display: block; height: 100%; min-width: 2px; }
.master-stack-bar .ready { background: #5f9864; }
.master-stack-bar .need { background: #bf9838; }
.master-stack-bar .missing { background: #b45f47; }
.master-status-grid, .master-target-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.master-status-grid article, .master-target-numbers article, .master-insight-list article { border: 1px solid var(--line); border-radius: 12px; background: #fbfbf7; padding: 10px; }
.master-status-grid strong, .master-status-grid span, .master-target-numbers span, .master-target-numbers strong, .master-insight-list span, .master-insight-list strong, .master-insight-list small { display: block; }
.master-status-grid span, .master-target-numbers span, .master-insight-list span, .master-insight-list small { color: var(--muted); }
.master-target-meter { display: grid; gap: 14px; }
.master-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: center; }
.master-progress-row > strong { text-align: right; font-size: 18px; }
.master-progress-track { height: 28px; position: relative; }
.mp-command-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: radial-gradient(circle at 90% 8%, rgba(47,143,88,.18), transparent 34%), linear-gradient(135deg, #f9f6ee, #ffffff); box-shadow: 0 18px 45px rgba(20,34,24,.08); }
.mp-command-hero h2 { margin: 4px 0; font-size: clamp(30px, 4vw, 48px); line-height: .96; max-width: 12ch; }
.mp-command-hero p { margin: 0; max-width: 64ch; color: var(--muted); }
.mp-command-progress { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.86); }
.mp-progress-label { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mp-progress-label span { font-weight: 900; color: var(--green); }
.mp-progress-label + .master-progress-track { height: 18px; }
.mp-command-progress small { color: var(--muted); font-weight: 800; }
.mp-info-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mp-info-strip article { border: 1px solid var(--line); border-left: 4px solid #3dd68c; border-radius: 14px; background: #fffdf6; padding: 12px 14px; display: grid; gap: 4px; min-height: 84px; }
.mp-info-strip strong { font-size: 13px; line-height: 1.2; }
.mp-info-strip span { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.mp-league-grid, .mp-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-league-card, .mp-report-grid article { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; display: grid; gap: 5px; min-height: 110px; }
.mp-league-card span, .mp-report-grid span { color: var(--muted); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.mp-league-card strong, .mp-report-grid strong { font-size: 22px; line-height: 1.05; }
.mp-league-card small, .mp-report-grid small { color: var(--muted); font-weight: 700; }
#view-customer .mp-report-grid article.featured { border-color: #2f9e5b; background: linear-gradient(135deg, #effbf1, #dcefe1); box-shadow: 0 8px 20px rgba(27, 111, 60, .12); }
#view-customer .mp-report-grid article.featured span { color: #18713a; }
.mp-league-card.green { border-color: #a8d8b6; background: #f0fbf4; }
.mp-league-card.amber { border-color: #ddc37a; background: #fff9e8; }
.mp-league-card.red { border-color: #e0a39b; background: #fff1ef; }
.mp-risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mp-risk-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; cursor: pointer; }
.mp-risk-card > button { grid-column: 1 / -1; width: fit-content; }
.mp-risk-card span, .mp-risk-card strong, .mp-risk-card small { display: block; }
.mp-risk-card span { color: var(--muted); font-weight: 900; font-size: 12px; }
.mp-risk-card small { color: var(--muted); margin-top: 4px; }
.mp-risk-card.green { border-color: #a8d8b6; background: #f5fcf7; }
.mp-risk-card.amber { border-color: #ddc37a; background: #fffaf0; }
.mp-risk-card.red { border-color: #e0a39b; background: #fff3f1; }
.mp-details-card { padding: 0; overflow: hidden; }
.mp-details-card summary { cursor: pointer; padding: 14px 16px; font-weight: 900; border-bottom: 1px solid var(--line); background: #fbfbf7; }
.mp-details-card[open] { padding-bottom: 14px; }
.mp-details-card > :not(summary) { margin-left: 14px; margin-right: 14px; }
.master-campaign-form { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 150px minmax(220px, 1fr) 150px; gap: 10px; align-items: start; margin: 12px 0; }
.master-campaign-branches { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fbfbf7; }
.master-campaign-branches label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-weight: 800; align-items: start; }
.master-campaign-branches label small { grid-column: 2; color: var(--muted); font-weight: 700; font-size: 12px; margin-top: -4px; }
.master-insight-list { display: grid; gap: 9px; }
.master-insight-list article { cursor: pointer; }
.master-branch-switcher { display: grid; gap: 14px; }
.master-branch-switcher > .filter-bar { grid-template-columns: minmax(260px, 420px); }
.master-embedded-branch { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.master-empty { min-height: 320px; align-content: center; background: radial-gradient(circle at 80% 20%, rgba(95,152,100,.18), transparent 32%), #fff; }
.master-empty h2 { margin: 4px 0; font-size: 36px; }
.focus-flash { animation: focusFlash 1.2s ease; }
@keyframes focusFlash {
  0%, 100% { box-shadow: none; }
  20% { box-shadow: 0 0 0 4px rgba(96,139,91,.22), 0 14px 40px rgba(96,139,91,.22); }
}
@media (max-width: 1100px) {
  .esg-submission-screen .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esg-readiness-band, .esg-check-grid { grid-template-columns: 1fr; }
  .esg-readiness-hero, .esg-workspace-grid, .esg-workspace-three { grid-template-columns: 1fr; }
  .scorecard-grid, .highlight-grid, .claim-grid { grid-template-columns: 1fr; }
  .scorecard-hero .panel-title button { width: 100%; min-width: 0; }
  .compact-action-note { grid-template-columns: 1fr; }
  .workflow-card-grid { grid-template-columns: 1fr; }
  .workflow-card, .fix-item { grid-template-columns: 32px minmax(0, 1fr); }
  .workflow-card button, .fix-item button { grid-column: 2; justify-self: start; }
  .fix-item > span { grid-column: 1; grid-row: 1 / span 2; }
  .task-progress { grid-template-columns: repeat(6, 96px); overflow-x: auto; padding-bottom: 8px; }
  .task-progress::before { left: 34px; right: 34px; }
  .esg-input-panel .filter-bar { grid-template-columns: 1fr; }
  .esg-document-form, .esg-action-form { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .compact-answer-bank { grid-template-columns: 1fr; }
  .role-permission-head, .permission-group { grid-template-columns: 1fr; }
  .account-path-grid { grid-template-columns: 1fr; }
  .account-mode-grid { grid-template-columns: 1fr; }
  .account-form-row { grid-template-columns: 1fr; }
  .single-customer-form { grid-template-columns: 1fr; }
  .account-checklist-panel { grid-template-columns: 1fr; }
  .settings-clean { grid-template-columns: 1fr; }
  .master-hero, .master-grid, .master-chart-grid, .master-chart-brief, .master-goal-form, .master-goal-form-stack, .master-mission-hero, .master-goal-control-row { grid-template-columns: 1fr; }
  .master-goal-control-row { max-width: none; gap: 12px; }
  .master-hero { background: linear-gradient(135deg, #101813, #263327); }
  .master-kpis, .master-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-command-hero, .mp-info-strip, .mp-league-grid, .mp-report-grid, .master-campaign-form { grid-template-columns: 1fr; }
  .master-campaign-branches { grid-template-columns: 1fr; }
  .master-action-list article { grid-template-columns: 1fr; }
  .master-goal-head { grid-template-columns: 1fr; }
  .master-goal-details { margin-top: 10px; }
  .master-bar-row { grid-template-columns: 28px minmax(0, 1fr); }
  .master-bar-track, .master-bar-row b { grid-column: 2; }
  .master-linebar-row { grid-template-columns: 1fr; }
  .master-donut-layout, .master-pie-layout, .master-status-grid, .master-target-numbers, .master-goal-period-grid, .master-mission-grid, .master-mission-card-kpis, .master-campaign-kpis, .master-goal-rules, .master-goal-onboarding-form, .master-boundary-strip, .master-campaign-challenge, .master-risk-reasons { grid-template-columns: 1fr; }
  .master-goal-control-row .master-goal-details[open] { grid-template-columns: 1fr; }
  .master-goal-control-row .master-goal-details[open] .master-slide-body { grid-column: 1; width: 100%; }
  .master-goal-control-row .master-goal-details[open] .master-goal-form,
  .master-goal-control-row .master-goal-details[open] .master-goal-form-stack,
  .master-goal-control-row .master-goal-details[open] .master-campaign-form,
  .master-goal-control-row .master-goal-details[open] .master-branch-goal-grid { grid-template-columns: 1fr; }
}
body.esg-screenshot-mode .sidebar,
body.esg-screenshot-mode .client-tabs,
body.esg-screenshot-mode .topbar,
body.esg-screenshot-mode .detail-rail,
body.esg-screenshot-mode .filter-bar,
body.esg-screenshot-mode .drawer-overlay { display: none !important; }
body.esg-screenshot-mode .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
body.esg-screenshot-mode main { grid-column: 1; grid-row: 1; padding: 18px; }
body.esg-screenshot-mode .client-portal { max-width: 1180px; margin: 0 auto; }
.action-cell { display: flex; gap: 6px; flex-wrap: wrap; min-width: 360px; }
.compact-grid table { min-width: 1180px; }
.compact-grid td, .compact-grid th { padding: 7px; }
.driver-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 14px; }
.driver-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; display: grid; gap: 12px; }
.driver-head, .point-title { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.driver-head small { display: block; margin-top: 4px; }
.point-grid { display: grid; gap: 10px; }
.point-card { background: #f8faf8; border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 9px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; background: var(--black); color: white; text-decoration: none; border-radius: 8px; padding: 10px 14px; font-weight: 800; }
.upload-box { border: 1px dashed #aab2ad; background: #fbfcfb; border-radius: 10px; padding: 12px; display: grid; gap: 8px; color: var(--muted); }
.upload-box input { border: 0; padding: 0; }
.ocr-result { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13px; background: #fbfcfb; }
.ocr-result strong { color: var(--ink); }
.ocr-result.ok { border-color: #2f9960; background: #f0fbf4; }
.ocr-result.warn { border-color: #c98725; background: #fff8e8; }
.ocr-result.pending { border-color: #94a3b8; background: #f8fafc; }
.mini-timeline { display: grid; gap: 4px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.feed-list { display: grid; gap: 8px; max-height: 310px; overflow: auto; }
.feed-item { border-left: 3px solid var(--green); background: #f8faf8; border-radius: 8px; padding: 8px; display: grid; gap: 2px; }
.feed-item span, .feed-item small { color: var(--muted); font-size: 12px; }
.panel-title.compact { margin-bottom: 8px; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(12, 18, 14, .18); z-index: 50; isolation: isolate; display: flex; justify-content: flex-end; }
.drawer { position: relative; z-index: 1; width: min(1120px, calc(100vw - 20px)); height: 100%; background: white; box-shadow: -22px 0 60px rgba(0,0,0,.18); display: grid; grid-template-rows: auto 1fr; }
.drawer-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; padding: 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 4px 0 0; }
.drawer-body { padding: 18px; overflow: auto; display: grid; gap: 16px; }
.drawer-body:has(.pdf-preview-section) { padding: 14px 18px 18px; }
.drawer-section { display: grid; gap: 10px; }
.drawer-section h3 { margin: 0; }
.notification-filter { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.drawer .notification-table { overflow-x: auto; max-width: 100%; }
.drawer .notification-table table { min-width: 860px; table-layout: auto; }
.notification-table th, .notification-table td { font-size: 12px; }
.notification-table .action-cell { min-width: 220px; }
.center-modal-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: clamp(12px, 3vw, 34px); background: rgba(10, 16, 12, .42); backdrop-filter: blur(4px); }
.center-modal { width: min(1060px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.28); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.center-modal-head { display: flex; justify-content: space-between; gap: 14px; align-items: start; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fffdf8; }
.center-modal-head h2 { margin: 4px 0 0; }
.center-modal-body { padding: 18px 20px; overflow: auto; display: grid; gap: 14px; }
.announcement-modal { width: min(1120px, calc(100vw - 28px)); }
.announcement-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }
.form-success { border-left: 4px solid var(--green); background: #f0fdf4; color: #14532d; border-radius: 10px; padding: 9px 10px; font-weight: 800; }
.form-error { border-left: 4px solid #dc2626; background: #fef2f2; color: #7f1d1d; border-radius: 10px; padding: 9px 10px; font-weight: 800; }
.announcement-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.announcement-summary article { border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; padding: 9px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "note note"; align-items: center; gap: 2px 8px; min-width: 0; min-height: 58px; }
.announcement-summary span { grid-area: label; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.announcement-summary strong { grid-area: value; font-size: 17px; line-height: 1; overflow-wrap: anywhere; text-align: right; }
.announcement-summary small { grid-area: note; color: var(--muted); overflow-wrap: anywhere; font-size: 11px; line-height: 1.25; }
.announcement-role-hint { border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 12px; line-height: 1.35; }
.announcement-audience, .announcement-role-hint { display: inline-block; }
.announcement-audience { width: fit-content; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.audience-all { color: #7f1d1d; background: #fef2f2; border-color: #ef4444; }
.audience-internal { color: #7c2d12; background: #fff7ed; border-color: #f97316; }
.audience-driver { color: #1e3a8a; background: #eff6ff; border-color: #3b82f6; }
.audience-customer, .audience-customer_view { color: #14532d; background: #f0fdf4; border-color: #22c55e; }
.audience-customer_master { color: #134e4a; background: #ecfeff; border-color: #14b8a6; }
.announcement-actions { display: grid; gap: 8px; justify-items: end; }
.announcement-list { display: grid; gap: 10px; }
.announcement-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.announcement-card.unread { border-left: 5px solid var(--green); background: #f6fbf7; }
.announcement-card.read { opacity: .78; }
.announcement-card strong { display: block; font-size: 16px; margin: 4px 0; }
.announcement-card p { margin: 0 0 8px; color: var(--ink); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-inbox-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 420px; }
.announcement-channel-list { border-right: 1px solid var(--line); padding-right: 12px; display: grid; gap: 8px; align-content: start; }
.announcement-channel-list > strong { font-size: 16px; margin-bottom: 4px; }
.announcement-channel-list button { background: #f7faf7; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; text-align: left; padding: 12px; display: grid; gap: 4px; }
.announcement-channel-list button.active { border-color: rgba(31,143,77,.45); background: #eef8ef; box-shadow: inset 4px 0 0 var(--green); }
.announcement-channel-list span { font-weight: 900; overflow-wrap: anywhere; }
.announcement-channel-list small { color: var(--muted); line-height: 1.35; }
.announcement-message-list { display: grid; gap: 10px; align-content: start; }
.announcement-detail-card { border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 16px; background: #fbfefb; padding: 16px; display: grid; gap: 14px; }
.notice-template-preview { width: min(100%, 760px); margin: 0 auto; display: grid; gap: 14px; padding: 18px; border: 1px solid #cbded0; border-left: 5px solid #d59b2f; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(21, 74, 39, .06); }
.notice-template-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.notice-template-heading > div { display: grid; gap: 5px; }
.notice-template-heading h3 { margin: 0; font-size: 20px; }
.notice-demo-preview-pill { display: inline-flex; align-items: center; border: 1px solid #e8d3a5; border-radius: 999px; padding: 6px 10px; color: #805a12; background: #fff7e5; font-size: 10px; font-weight: 850; letter-spacing: .06em; white-space: nowrap; }
.notice-in-app-pill { border-color: #b8dec5; color: #176b39; background: #eaf7ee; }
.notice-template-subject { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #f6faf6; }
.notice-template-subject > span, .notice-template-metrics > div > span { color: var(--muted); font-size: 11px; }
.notice-template-subject strong { font-size: 15px; line-height: 1.35; }
.notice-template-message { display: grid; gap: 11px; padding: 2px 1px; }
.notice-template-message p { margin: 0; line-height: 1.55; }
.notice-template-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.notice-template-metrics > div { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbf8; }
.notice-template-metrics > div > strong { font-size: 16px; }
.notice-template-cta { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 10px 13px; border-radius: 10px; background: #19834b; color: #fff; font-size: 13px; font-weight: 850; }
button.notice-template-cta { border: 0; cursor: pointer; font-family: inherit; }
.notice-template-cta .material-symbols-rounded { font-size: 17px; }
.notice-template-signoff { color: var(--muted); }
.notice-template-disclaimer { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 700px) {
  .notice-template-preview { padding: 13px; }
  .notice-template-heading { display: grid; }
  .notice-template-metrics { grid-template-columns: 1fr; }
}
.announcement-detail-card.is-clickable { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.announcement-detail-card.is-clickable:hover { border-color: #78b98a; box-shadow: 0 12px 26px rgba(21, 74, 39, .1); transform: translateY(-1px); }
.announcement-detail-card.is-clickable:focus-visible { outline: 3px solid rgba(31, 143, 77, .28); outline-offset: 3px; }
.announcement-cover { display: block; width: 100%; height: auto; max-height: min(52vh, 480px); object-fit: contain; object-position: center; border: 1px solid var(--line); border-radius: 12px; background: #edf7ef; }
.announcement-detail-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.announcement-detail-head h3 { margin: 8px 0 4px; font-size: clamp(22px, 3vw, 32px); }
.announcement-full-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 15px; max-height: 430px; overflow: auto; padding-right: 8px; }
.announcement-chat-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 0; min-height: 540px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #f7faf7; }
.announcement-chat-layout .announcement-channel-list { border-right: 1px solid var(--line); padding: 14px 10px; min-width: 0; overflow: auto; }
.announcement-channel-head { display: grid; gap: 3px; padding: 2px 6px 12px; }
.announcement-channel-head strong { font-size: 16px; }
.announcement-channel-head small { color: var(--muted); font-size: 11px; }
.announcement-channel-items { display: grid; gap: 6px; }
.announcement-channel-item { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; border: 0 !important; border-radius: 10px !important; padding: 10px 8px !important; background: transparent !important; box-shadow: none !important; cursor: pointer; }
.announcement-channel-item:hover { background: rgba(31,143,77,.07) !important; }
.announcement-channel-item.active { background: #eaf6ed !important; box-shadow: inset 3px 0 0 var(--green) !important; }
.announcement-channel-visual { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f0f8f1; color: var(--green); }
.announcement-channel-icon { font-size: 18px; }
.announcement-channel-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.announcement-channel-copy { display: grid; gap: 3px; min-width: 0; }
.announcement-channel-copy strong, .announcement-channel-copy small { overflow-wrap: anywhere; }
.announcement-channel-copy strong { font-size: 12px; }
.announcement-channel-copy small { color: var(--muted); line-height: 1.35; }
.announcement-channel-state { color: var(--muted); font-size: 10px; font-weight: 800; }
.announcement-channel-item.unread .announcement-channel-state { color: var(--green); }
.announcement-chat-pane { display: grid; grid-template-rows: auto minmax(150px, 1fr) auto; min-width: 0; background: #fcfefc; }
.announcement-chat-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.announcement-chat-header > div { display: grid; gap: 3px; min-width: 0; }
.announcement-chat-header strong { overflow-wrap: anywhere; }
.announcement-chat-status { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: 10px; font-weight: 900; }
.announcement-chat-pane > .announcement-message-list { min-height: 0; overflow: auto; padding: 18px; background: linear-gradient(180deg, #f7fbf7, #fcfefc); }
.announcement-chat-pane .announcement-detail-card { max-width: 760px; margin-right: auto; box-shadow: 0 8px 22px rgba(21, 74, 39, .06); }
.announcement-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.announcement-read-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 132px; }
.announcement-action-spinner { display: none; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.announcement-read-action.is-loading .announcement-action-spinner { display: inline-block; animation: announcement-spin .75s linear infinite; }
.announcement-feedback { margin-top: 2px; }
.announcement-detail-page { display: grid; gap: 12px; }
.announcement-detail-page .announcement-detail-card { max-width: none; box-shadow: none; }
.announcement-detail-page .announcement-cover { max-height: min(60vh, 560px); }
.announcement-detail-page .announcement-full-body { max-height: none; overflow: visible; }
.announcement-detail-back { justify-self: start; }
@keyframes announcement-spin { to { transform: rotate(360deg); } }
.announcement-detail-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.announcement-composer { display: grid; gap: 10px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.announcement-composer-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.announcement-composer-head > div { display: grid; gap: 2px; }
.announcement-composer-head small { max-width: 340px; color: var(--muted); line-height: 1.35; text-align: right; }
.announcement-composer-fields { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 10px; }
.announcement-composer label, .announcement-image-picker { display: grid; gap: 5px; min-width: 0; }
.announcement-composer label > span, .announcement-image-picker > span:first-child { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.announcement-composer label > span small, .announcement-image-picker > span:first-child small { display: inline; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.announcement-image-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 10px; border: 1px dashed #aabfb0; border-radius: 12px; background: #f7fbf7; }
.announcement-image-picker > span:first-child { grid-column: 1 / -1; }
.announcement-image-picker input { width: 100%; min-width: 0; }
.announcement-image-preview { min-height: 48px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.announcement-image-preview.has-image { color: var(--ink); font-weight: 800; }
.announcement-image-preview.is-error { color: #9b2c2c; }
.announcement-image-preview img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.announcement-composer-actions { display: flex; justify-content: flex-end; }
.announcement-empty-state { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.announcement-empty-state .material-symbols-rounded { font-size: 34px; color: var(--green); }
.announcement-history { margin-bottom: 14px; }
.metric-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #f8faf8; }
.metric-card span { display: block; color: var(--muted); font-size: 12px; }
.metric-card strong { font-size: 20px; }
.metric-card.impact-increase { border-color: #c62828 !important; background: #fff5f5 !important; }
.metric-card.impact-increase span, .metric-card.impact-increase strong { color: #b42318 !important; }
.impact-status { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; line-height: 1.45; }
.impact-status-increase { border: 1px solid #c62828; background: #fff5f5; color: #8f1d1d; }
.impact-status-increase strong { color: #b42318; }
.customer-logo { width: 44px; height: 44px; border-radius: 10px; background: #111; color: #fff; display: inline-grid; place-items: center; font-weight: 900; object-fit: cover; flex: 0 0 auto; }
.logo-card .customer-logo { width: 92px; height: 64px; border-radius: 8px; background: transparent; color: var(--ink); object-fit: contain; }
.customer-title, .customer-list-row { display: flex; align-items: center; gap: 12px; }
.customer-list-row .customer-logo { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
.profile-compact { display: grid; gap: 8px; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.search-suggestions .compact-btn { border-radius: 999px; }
.autocomplete-wrap { position: relative; }
.autocomplete-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 280px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 20; padding: 6px; display: grid; gap: 6px; }
.autocomplete-option { width: 100%; text-align: left; background: #f7f8f7; color: var(--ink); border-radius: 10px; padding: 10px 12px; }
.autocomplete-option small { color: var(--muted); margin-left: 8px; }
.autocomplete-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.ok-text { color: var(--green); font-size: 13px; }
.error-text { color: var(--red); font-size: 13px; }
.success-text { color: var(--green-dark); font-size: 13px; font-weight: 800; }
.profile-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.profile-field span { color: var(--muted); font-size: 12px; }
.profile-field strong { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.proof-photo { display: block; max-width: 100%; max-height: 360px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #f8faf8; margin-top: 10px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.home-tabs { display: flex; gap: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.home-tabs button { background: transparent; color: var(--muted); padding: 7px 0; border-radius: 0; }
.home-tabs button.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--green); }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 24px 18px; }
.logo-card { border: 0; background: transparent; color: var(--ink); display: grid; justify-items: center; gap: 6px; text-align: center; padding: 10px; border-radius: 10px; }
.logo-card:hover { background: #f4f7f5; }
.logo-card strong { font-size: 13px; line-height: 1.15; }
.logo-card span, .logo-card small { color: var(--muted); }
.participant-directory { margin-top: 18px; }
.participant-directory-card { background: #f8faf8; border: 1px solid var(--line); }
.participant-directory-card:hover { background: #eef5ef; }
.participant-wall { min-width: min(920px, calc(100vw - 90px)); }
.participant-wall-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; align-items: stretch; }
.participant-wall-card { min-height: 170px; border: 1px solid var(--line); background: #fbfcfb; align-content: center; box-shadow: 0 10px 24px rgba(18,21,19,.05); }
.participant-wall-card .customer-logo { width: 104px; height: 72px; }
.participant-wall-card strong { min-height: 32px; display: grid; align-items: center; }
.participant-page-hero { border-radius: 24px; padding: 28px; min-height: 210px; display: flex; justify-content: space-between; align-items: end; gap: 24px; background: radial-gradient(circle at 88% 22%, rgba(50,170,105,.24), transparent 24%), linear-gradient(135deg, #0d1c14 0%, #173421 54%, #f6f3ea 54%, #fffaf0 100%); color: #fff; box-shadow: 0 24px 70px rgba(18,31,22,.16); }
.participant-page-hero h1 { margin: 6px 0; font-size: clamp(40px, 5vw, 76px); line-height: .92; letter-spacing: -.05em; }
.participant-page-hero p { margin: 0; max-width: 720px; color: rgba(255,255,255,.82); font-size: 16px; }
.participant-page-actions { min-width: 220px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); border-radius: 18px; padding: 16px; display: grid; gap: 6px; backdrop-filter: blur(10px); }
.participant-page-actions strong { font-size: 38px; line-height: 1; }
.participant-page-actions span { color: rgba(255,255,255,.76); font-weight: 800; }
.participant-page-panel { margin-top: 16px; }
.participant-page-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.participant-page-card { min-height: 190px; border: 1px solid var(--line); background: #fff; align-content: center; box-shadow: 0 12px 30px rgba(18,21,19,.06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.participant-page-card:hover { transform: translateY(-3px); border-color: rgba(31,143,77,.42); box-shadow: 0 20px 44px rgba(18,21,19,.11); }
.participant-page-card .customer-logo { width: 118px; height: 80px; }
.participant-page-card strong { min-height: 38px; display: grid; align-items: center; font-size: 14px; }
.lead-hero { background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.82)), radial-gradient(circle at 15% 35%, rgba(31,143,77,.16), transparent 35%); }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow: auto; }
.kanban-col { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fafbfa; min-height: 260px; }
.kanban-col h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; }
.kanban-card { width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); text-align: left; display: grid; gap: 5px; margin-bottom: 8px; }
.kanban-card span, .kanban-card small { color: var(--muted); }
.compact-form { display: grid; gap: 10px; }
.compact-form label { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; }
.compact-form label > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.crm-cc-email-control { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 8px; min-width: 0; }
.crm-cc-email-control > input { min-width: 0; }
.crm-cc-email-control > small { color: var(--muted); font-size: 10px; line-height: 1.3; white-space: nowrap; }
.status-timeline .step { display: grid; grid-template-columns: 12px minmax(110px, 1fr) auto; align-items: center; }
.status-timeline small { font-size: 11px; }
.route-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.driver-app { display: grid; gap: 14px; }
.driver-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: radial-gradient(circle at 12% 20%, rgba(31,143,77,.12), transparent 28%), #fff; }
.driver-hero h2 { margin: 4px 0 6px; font-size: 28px; }
.driver-hero p { margin: 0; color: var(--muted); }
.driver-mobile-shell { display: grid; gap: 14px; max-width: 460px; margin: 0 auto; }
.driver-mobile-hero { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 22px; padding: 18px; background: linear-gradient(180deg, #ffffff, #f4faf6); }
.driver-mobile-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.driver-mobile-hero h2 { margin: 0; font-size: 30px; line-height: 1.08; }
.driver-mobile-hero p { margin: 0; color: var(--muted); }
.driver-shift-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #e7f6eb; color: #13783d; font-weight: 800; font-size: 12px; }
.driver-period-mobile { grid-template-columns: 1fr 1fr; }
.driver-mobile-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.driver-mobile-metrics article, .driver-history-metrics article { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; display: grid; gap: 4px; }
.driver-mobile-metrics span, .driver-history-metrics span { color: var(--muted); font-size: 11px; font-weight: 800; }
.driver-mobile-metrics strong, .driver-history-metrics strong { font-size: 22px; line-height: 1.1; }
.driver-focus-card { display: grid; gap: 12px; }
.driver-shift-panel { display: grid; gap: 12px; }
.driver-shift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.driver-shift-grid article { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; display: grid; gap: 4px; }
.driver-shift-grid span { color: var(--muted); font-size: 11px; font-weight: 800; }
.driver-shift-grid strong { font-size: 20px; line-height: 1.1; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 22px; align-items: stretch; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: linear-gradient(115deg, rgba(18,19,14,.82), rgba(22,52,33,.62)), url('assets/home/hero-truck-recycle-bin.png') center/cover no-repeat; color: #fff; min-height: 420px; }
.home-hero-copy { display: grid; align-content: center; gap: 16px; padding: 42px 38px; }
.home-hero-copy h1 { margin: 0; font-size: 56px; line-height: 1.03; max-width: 11ch; }
.home-hero-copy p { margin: 0; max-width: 58ch; color: rgba(255,255,255,.9); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-edit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.home-edit-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.home-edit-actions button { padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.home-hero-visual { display: flex; align-items: flex-end; justify-content: flex-end; padding: 28px; }
.home-hero-badge { display: grid; gap: 8px; max-width: 300px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16); }
.home-hero-badge img { width: 140px; height: auto; }
.home-hero-badge strong { font-size: 22px; }
.home-hero-badge span { color: rgba(255,255,255,.86); }
.home-services { display: grid; gap: 18px; }
.service-intro h2, .impact-copy h2 { margin: 4px 0 8px; }
.service-intro p, .impact-copy p { margin: 0; color: var(--muted); max-width: 72ch; }
.service-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fcfcfa; }
.service-card h3 { margin: 0 0 6px; }
.service-card p { margin: 0 0 10px; color: var(--muted); }
.service-thumb { width: 110px; height: 110px; border-radius: 18px; background-size: cover; background-position: center; }
.service-thumb-box { background-image: linear-gradient(135deg, rgba(31,143,77,.12), rgba(31,143,77,.02)), url('assets/home/service-ar-box.png'); background-size: contain; background-repeat: no-repeat; background-color: #f6f1e7; }
.service-thumb-scrap { background-image: linear-gradient(135deg, rgba(31,143,77,.12), rgba(31,143,77,.03)), url('/api/uploads/collection_photos/ARDO000016-P1-collection.jpg'); }
.service-thumb-roro { background-image: linear-gradient(135deg, rgba(31,143,77,.16), rgba(31,143,77,.04)), url('/api/uploads/collection_photos/ARDO000009-P1-collection.jpg'); }
.link-btn { border: 0; background: transparent; color: var(--green); padding: 0; font-weight: 700; cursor: pointer; }
.home-impact { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: center; }
.impact-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.impact-card { padding: 18px 16px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #fff, #f7faf7); text-align: center; }
.impact-card strong { display: block; margin-bottom: 6px; font-size: 26px; }
.impact-card span { color: var(--muted); font-size: 13px; }
.home-showcase { display: grid; grid-template-columns: 1.2fr 1fr 1fr .9fr; gap: 18px; }
.home-showcase h2 { margin: 4px 0 10px; }
.campaign-card, .stories-card, .media-card, .partner-card { min-height: 100%; }
.campaign-card { background: linear-gradient(140deg, rgba(29,33,24,.84), rgba(45,70,50,.62)), url('/api/uploads/collection_photos/ARDO000003-P1-collection.jpg') center/cover no-repeat; color: #fff; }
.campaign-card p { color: rgba(255,255,255,.9); max-width: 34ch; }
.story-list { display: grid; gap: 12px; }
.story-item { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.story-item .home-edit-actions { justify-content: flex-start; margin-bottom: 2px; }
.story-item:last-child { padding-bottom: 0; border-bottom: 0; }
.story-item small, .story-item span { color: var(--muted); }
.media-preview { display: grid; place-items: center; min-height: 210px; border-radius: 20px; background: linear-gradient(135deg, rgba(31,143,77,.14), rgba(31,143,77,.04)), url('/api/uploads/collection_photos/ARDO000015-P1-collection.jpg') center/cover no-repeat; margin-bottom: 12px; }
.media-play { width: 70px; height: 70px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.54); color: #fff; font-size: 30px; }
.partner-logo { display: grid; place-items: start; min-height: 110px; margin: 12px 0 18px; }
.partner-logo img { width: 180px; max-width: 100%; height: auto; object-fit: contain; }
.home-footer-note { text-align: center; }
.home-footer-note p { margin: 0 0 8px; color: var(--muted); }
.home-footer-note strong { font-size: 28px; color: var(--green); }
.driver-period { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; }
.driver-period label { display: grid; gap: 4px; }
.driver-period span { color: var(--muted); font-size: 11px; font-weight: 800; }
.driver-period input { padding: 9px 10px; }
.driver-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.driver-metrics div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #f9fbfa; }
.driver-metrics span { display: block; color: var(--muted); font-size: 11px; }
.driver-metrics strong { font-size: 22px; }
.driver-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.route-list { display: grid; gap: 8px; max-height: 620px; overflow: auto; }
.route-item { width: 100%; text-align: left; background: white; color: var(--ink); border: 1px solid var(--line); display: grid; gap: 5px; border-radius: 10px; padding: 12px; }
.route-item.active { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.route-item span, .route-item small { color: var(--muted); }
.route-item-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.driver-route-mobile { max-height: none; }
.driver-route-shell { width: min(100%, 720px); margin: 0 auto; display: grid; gap: 14px; }
.driver-route-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px; border: 1px solid rgba(61,214,140,.28); border-radius: 18px; background: linear-gradient(135deg, #123b28, #176b42); color: #fff; }
.driver-route-header h2 { margin: 4px 0; font-size: 26px; }
.driver-route-header p { margin: 0; color: rgba(255,255,255,.72); }
.driver-route-count { width: 58px; height: 58px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; display: grid; place-items: center; font-size: 21px; font-weight: 900; }
.driver-route-count small { font-size: 11px; color: rgba(255,255,255,.75); }
.driver-route-summary { display: flex; flex-wrap: wrap; gap: 8px; color: #94a3b8; font-size: 12px; }
.driver-route-summary span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: #161920; }
.driver-route-timeline { display: grid; gap: 8px; position: relative; }
.driver-route-stop { border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: #161920; overflow: hidden; }
.driver-route-stop.current { border-color: #3dd68c; box-shadow: 0 0 0 1px rgba(61,214,140,.18); }
.driver-route-stop.completed { opacity: .62; }
.driver-route-stop-head { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 13px; background: transparent; color: #f8fafc; }
.driver-route-marker { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #26313a; color: #cbd5e1; font-weight: 900; }
.completed .driver-route-marker { background: #247a52; color: #fff; }
.current .driver-route-marker { background: #3dd68c; color: #07140d; }
.driver-route-stop-copy { display: grid; gap: 3px; min-width: 0; }
.driver-route-stop-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-route-stop-copy small { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-route-status { color: #3dd68c; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.driver-route-stop-detail { padding: 0 13px 13px; border-top: 1px solid rgba(255,255,255,.08); }
.driver-route-empty { display: grid; gap: 6px; place-items: center; padding: 42px 18px; border: 1px dashed rgba(255,255,255,.16); border-radius: 14px; color: #94a3b8; }
.driver-route-empty strong { color: #f8fafc; font-size: 18px; }

/* Driver route follows the selected compact timeline concept. */
body[data-role="driver"] #view-driver { padding: 14px; }
body[data-role="driver"] .driver-route-shell { width: min(100%, 410px); margin: 0 auto; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 10px; padding: 12px; border: 1px solid #303943; border-radius: 18px; background: #10151b; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.driver-route-appbar { min-height: 42px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; text-align: center; color: #f3f6f8; }
.driver-route-appbar strong { font-size: 15px; letter-spacing: -.01em; }
.driver-route-icon { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #9aa6b2; font-size: 19px; }
body[data-role="driver"] .driver-route-summary { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 0; color: #a7b0ba; font-size: 11px; border: 1px solid #28313a; border-radius: 9px; background: #1a2129; }
body[data-role="driver"] .driver-route-summary span { padding: 10px 8px; text-align: center; border: 0; border-right: 1px solid #2b343e; border-radius: 0; background: transparent; }
body[data-role="driver"] .driver-route-summary span:last-child { border-right: 0; }
body[data-role="driver"] .driver-route-timeline { align-content: start; display: grid; gap: 7px; position: relative; padding: 0 0 0 27px; }
body[data-role="driver"] .driver-route-timeline::before { content: ""; position: absolute; left: 15px; top: 24px; bottom: 24px; width: 1px; background: #3b4651; }
body[data-role="driver"] .driver-route-stop { position: relative; border: 1px solid rgba(255,255,255,.10); border-radius: 11px; background: #181e25; overflow: visible; }
body[data-role="driver"] .driver-route-stop.current { border-color: #3dd68c; background: #113528; box-shadow: 0 0 0 1px rgba(61,214,140,.12); }
body[data-role="driver"] .driver-route-stop.completed { opacity: .64; }
body[data-role="driver"] .driver-route-stop-head { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 10px 11px; background: transparent; color: #f8fafc; }
body[data-role="driver"] .driver-route-marker { position: absolute; left: -42px; top: 9px; transform: none; width: 30px; height: 30px; margin: 0; border: 1px solid #66717d; border-radius: 50%; display: grid; place-items: center; background: #141a20; color: #cbd5e1; font-weight: 900; z-index: 1; }
body[data-role="driver"] .completed .driver-route-marker { border-color: #38bd7a; background: #2da56b; color: #fff; }
body[data-role="driver"] .current .driver-route-marker { border-color: #65e5a2; background: #10151b; color: #7cf0af; }
body[data-role="driver"] .driver-route-stop-copy strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-route-stop-copy small { color: #94a3b8; font-size: 10px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-route-status { color: #52dc92; font-size: 9px; font-weight: 900; text-transform: uppercase; }
body[data-role="driver"] .driver-route-stop-detail { padding: 0 10px 10px; border-top: 0; }
.driver-route-current { display: grid; gap: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); }
.driver-route-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.driver-route-actions a, .driver-route-actions button, .driver-route-actions span { min-height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-right: 1px solid rgba(255,255,255,.12); background: transparent; color: #b8c5ce; font-size: 11px; font-weight: 700; text-decoration: none; }
.driver-route-actions > :last-child { border-right: 0; }
.driver-route-primary .driver-primary-btn { min-height: 42px; border-radius: 8px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; background: #2fbf71; color: #07140d; }
.driver-route-photo { display: none; }
.driver-route-more { justify-self: center; min-height: auto; padding: 3px 8px; border: 0; background: transparent; color: #8fa49a; font-size: 10px; text-decoration: underline; }
.driver-route-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: auto; padding: 7px; border-top: 1px solid #27313a; border-radius: 0 0 12px 12px; background: rgba(16,21,27,.96); backdrop-filter: blur(12px); }
.driver-route-nav button { min-height: 42px; padding: 4px; border: 0; background: transparent; color: #87939f; font-size: 10px; }
.driver-route-nav button.active { border-radius: 8px; background: #152a22; color: #82e842; font-weight: 900; }

@media (max-width: 520px) {
  body[data-role="driver"] .sidebar { display: none !important; }
  body[data-role="driver"] .app-shell { display: block !important; }
  body[data-role="driver"] #view-driver { padding: 6px; }
  body[data-role="driver"] .driver-route-shell { width: 100%; height: calc(100dvh - 12px); min-height: 0; border-radius: 14px; }
}
.driver-detail { display: grid; gap: 12px; }
.driver-action-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f7faf8; }
.driver-action-strip-mobile { display: grid; grid-template-columns: 1fr; }
.driver-primary-action { display: grid; }
.driver-primary-btn { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.driver-primary-done { display: flex; justify-content: flex-start; }
.driver-section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.driver-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.driver-step { text-align: center; border: 1px solid var(--line); border-radius: 999px; padding: 9px 8px; color: var(--muted); background: #fff; font-weight: 800; font-size: 12px; }
.driver-step.done { border-color: #bce4c9; color: #13783d; background: #e7f6eb; }
.compact-record { padding: 10px; }
.gps-chip { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 5px 9px; font-weight: 800; font-size: 12px; }
.gps-chip.ok { color: #13783d; background: #e0f5e7; }
.gps-chip.warn { color: #9a6400; background: #fff1d6; }
.driver-ops-board { display: grid; gap: 14px; }
.driver-return-stack { display: grid; gap: 10px; }
.driver-return-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #f8fbf9; }
.driver-return-card span { display: block; color: var(--muted); margin-top: 3px; }
.driver-evidence-card, .driver-exception-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fbfcfb; }
.driver-evidence-list { display: grid; gap: 8px; }
.driver-evidence-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); }
.driver-evidence-item.ok { border-color: #bce4c9; background: #eef9f1; }
.driver-evidence-item.warn { border-color: #ffe3a7; background: #fff8e8; }
.driver-exception-actions { display: grid; gap: 10px; }
.driver-exception-actions textarea { min-height: 88px; resize: vertical; }
.driver-history-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.driver-commission-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #f9fbfa, #ffffff); }
.driver-commission-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.driver-commission-head h3 { margin: 4px 0 0; }
.driver-commission-head strong { font-size: 24px; color: var(--green); }
.driver-commission-controls { display: grid; gap: 10px; }
.driver-commission-controls label { display: grid; gap: 6px; }
.driver-commission-controls input[type="range"] { width: 100%; }
.driver-history-list { display: grid; gap: 10px; }
.driver-history-card { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; }
.driver-history-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.driver-history-card > span { color: var(--muted); }
.driver-history-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); }

/* ===== Driver mobile app — task-first redesign ===== */
.driver-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-radius: 18px; background: linear-gradient(135deg, #15803d, #22a35a); color: #fff; box-shadow: 0 12px 28px rgba(31,143,77,.28); }
.driver-hi { display: grid; gap: 3px; min-width: 0; }
.driver-hi span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.driver-hi strong { font-size: 19px; line-height: 1.12; }
.driver-progress-ring { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 15px; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55); }
.driver-next { display: grid; gap: 12px; border-radius: 22px; padding: 18px; }
.driver-next-tag { justify-self: start; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #13783d; background: #e7f6eb; padding: 5px 12px; border-radius: 999px; }
.driver-next > h2 { margin: 0; font-size: 27px; line-height: 1.08; }
.driver-next-addr { margin: 0; color: var(--muted); font-size: 14px; }
.driver-next-empty { justify-items: center; text-align: center; padding: 32px 18px; }
.driver-next-empty h2 { margin: 0; }
.driver-done-badge { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: #e7f6eb; color: #13783d; }
.driver-detail .driver-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.driver-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.driver-quick > a:only-child { grid-column: 1 / -1; }
.driver-saved-photo { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.driver-saved-photo > a:first-child { display: block; overflow: hidden; border-radius: 10px; background: #e7eee9; }
.driver-saved-photo img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.driver-saved-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.driver-photo-empty { display: grid; gap: 5px; padding: 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); background: var(--soft); }
.driver-photo-empty .material-symbols-rounded { color: var(--green); font-size: 24px; }
.driver-photo-empty strong { color: var(--ink); }
.driver-photo-empty .button-link { width: fit-content; }
.driver-nav-btn, .driver-call-btn { min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; }
.driver-nav-btn { background: var(--black); color: #fff; }
.driver-call-btn { background: #e7f6eb; color: #13783d; border: 1px solid #bce4c9; }
.driver-collapse { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.driver-collapse > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; }
.driver-collapse > summary::-webkit-details-marker { display: none; }
.driver-collapse-icon { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--muted); font-weight: 900; font-size: 18px; line-height: 1; transition: transform .18s ease; }
.driver-collapse[open] > summary .driver-collapse-icon { transform: rotate(45deg); }
.driver-collapse-body { display: grid; gap: 12px; padding: 2px 16px 16px; }
.driver-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.driver-queue-count { min-width: 26px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.driver-return-panel { display: grid; gap: 10px; }
.driver-route-mobile .route-item { padding: 14px; border-radius: 14px; }

.alert-list { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fbfcfb; }
.alert-list h3 { margin: 0 0 8px; }
.alert-item { margin: 0 0 7px; border-left: 3px solid #b3261e; padding: 7px 9px; background: #fff5f4; border-radius: 6px; }
.secondary-link { background: #e7e9e7; color: var(--ink); }
.material-list { display: grid; grid-template-columns: 1fr; gap: 9px; }
.material-list label { display: grid; grid-template-columns: minmax(150px, 220px) minmax(120px, 1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fbfcfb; }
.material-list span { font-weight: 800; color: var(--ink); }
.material-list input { padding: 8px; min-width: 120px; width: 100%; }
.permission-grid { display: grid; gap: 10px; }
.permission-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.permission-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.permission-checks label { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.permission-checks input { width: auto; }
.theme-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; display: grid; gap: 6px; }
.eco-motion { min-height: 86px; border-radius: 12px; background: radial-gradient(circle at 20% 35%, rgba(31,143,77,.35), transparent 22%), linear-gradient(135deg, #fff, #edf4ef 50%, #d8dedb); position: relative; overflow: hidden; }
.eco-motion::after { content: "\1F333"; position: absolute; right: 18px; bottom: 8px; font-size: 38px; animation: floatTree 3s ease-in-out infinite; }
.workspace-loading {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(244, 250, 243, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  isolation: isolate;
  pointer-events: auto;
  touch-action: none;
}
.workspace-loading-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(440px, 100%);
  padding: 18px 20px;
  border: 1px solid rgba(31, 143, 77, .24);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 55px rgba(31, 73, 45, .16);
}
.workspace-loading-card strong,
.workspace-loading-card span {
  display: block;
}
.workspace-loading-card strong {
  color: #173b23;
  font-size: 15px;
}
.workspace-loading-card span {
  margin-top: 4px;
  color: #5d7864;
  font-size: 12px;
}
.workspace-loading-spinner {
  width: 28px;
  height: 28px;
  margin: 0 !important;
  border: 3px solid rgba(31, 143, 77, .18);
  border-top-color: #1f8f4d;
  border-radius: 50%;
  animation: workspaceSpin .75s linear infinite;
}
html[data-theme="carbon_dark"] .workspace-loading {
  background: rgba(8, 14, 11, .93);
}
html[data-theme="carbon_dark"] .workspace-loading-card {
  border-color: rgba(83, 210, 145, .32);
  background: #171b20;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .38);
}
html[data-theme="carbon_dark"] .workspace-loading-card strong { color: #f5f8f7; }
html[data-theme="carbon_dark"] .workspace-loading-card span { color: #8d9c96; }
html[data-theme="carbon_dark"] .workspace-loading-spinner {
  border-color: rgba(83, 210, 145, .2);
  border-top-color: #53d291;
}
body.app-loading nav button,
body.app-loading .detail-rail {
  pointer-events: none;
  opacity: .5;
}
body.app-loading { overflow: hidden !important; }
@keyframes workspaceSpin { to { transform: rotate(360deg); } }
body[data-role="customer_view"] .workspace-loading,
body[data-role="customer_master"] .workspace-loading,
body[data-role="driver"] .workspace-loading {
  left: 0;
}
@media (max-width: 900px) {
  .workspace-loading { inset: 0; }
}
.approval-alert { border-width: 2px; }
.approval-alert.danger-state { border-color: var(--red); background: #fff7f6; }
.approval-alert.ok-state { border-color: var(--green); background: #f4fbf6; }
.big-number { font-size: 34px; }
@keyframes floatTree { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.client-shell { display: grid; gap: 14px; min-width: 0; }
.client-preview-bar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) minmax(240px, 1fr); gap: 10px; align-items: end; padding: 12px; border: 1px solid #f1c96b; background: #fff9e8; border-radius: 12px; }
.client-preview-bar strong, .client-preview-bar small { display: block; }
.client-preview-bar small { color: var(--muted); margin-top: 3px; }
.preview-search { min-width: 0; }
.client-identity { display: flex; justify-content: space-between; align-items: center; gap: 18px; background: linear-gradient(135deg, #fff 0%, #f6f8f6 58%, #eef6f1 100%); }
.client-identity h2 { margin: 2px 0 4px; font-size: 30px; }
.client-identity p { margin: 0; color: var(--muted); }
.client-id-metrics { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; min-width: 520px; }
.client-id-metrics article { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.82); }
.client-id-metrics span { display: block; color: var(--muted); font-size: 12px; }
.client-id-metrics strong { display: block; margin-top: 4px; font-size: 18px; }
.client-portal { display: grid; gap: 14px; min-width: 0; }
.client-portal .chart-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--panel); min-width: 0; }
.client-portal .chart-card h3 { margin-top: 0; }
.client-tabs { display: flex; justify-content: flex-start; gap: 8px; overflow: auto; padding: 5px; border: 1px solid var(--line); background: #fff; border-radius: 14px; width: 100%; }
.client-tabs button { background: transparent; color: var(--muted); border-radius: 10px; white-space: nowrap; padding: 9px 12px; }
.client-tabs button.active { background: #111; color: #fff; box-shadow: inset 0 -3px 0 var(--green); }
.client-welcome { min-height: 150px; display: flex; justify-content: space-between; align-items: center; gap: 18px; background: radial-gradient(circle at 92% 20%, rgba(31,143,77,.18), transparent 22%), linear-gradient(135deg, #101513 0%, #19201d 48%, #f9fbfa 48%, #fff 100%); color: #fff; }
.client-welcome h2 { margin: 5px 0; font-size: 30px; max-width: 720px; }
.client-welcome p { margin: 0; color: #d8e2dc; max-width: 680px; }
.client-stage-card { min-width: 230px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 14px; padding: 14px; display: grid; gap: 4px; box-shadow: var(--shadow); }
.client-stage-card span, .client-stage-card small { color: var(--muted); font-size: 12px; }
.client-stage-card strong { font-size: 20px; }
.client-empty-state { min-height: 320px; align-content: center; justify-items: start; background: linear-gradient(135deg, #fff, #f4f7f5); }
.client-empty-state h2 { margin: 4px 0; font-size: 30px; }
.client-empty-state p { max-width: 640px; color: var(--muted); }
.client-empty-state-actions { display: flex; gap: 10px; margin-top: 10px; }
.client-hero { min-height: 230px; display: flex; justify-content: space-between; gap: 24px; align-items: center; background: linear-gradient(115deg, #101513 0%, #1f2a24 58%, #edf4ef 58%, #fff 100%); color: #fff; position: relative; overflow: hidden; }
.client-hero::after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 360px; height: 360px; border-radius: 50%; border: 42px solid rgba(31,143,77,.16); }
.client-hero h2 { margin: 8px 0; font-size: 38px; max-width: 760px; }
.client-hero p { max-width: 560px; color: #d8e2dc; font-size: 15px; }
.client-hero .eyebrow { color: #72d89d; }
.mission-ring { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #fff 0 48%, transparent 49%), conic-gradient(var(--green) 0 76%, rgba(255,255,255,.22) 76% 100%); color: #111; display: grid; place-items: center; text-align: center; z-index: 1; flex: 0 0 auto; }
.mission-ring strong { font-size: 34px; line-height: 1; }
.mission-ring span { font-size: 12px; color: var(--muted); max-width: 86px; }
.client-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.client-metrics article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 8px; }
.client-metrics span { color: var(--muted); font-size: 12px; }
.client-metrics strong { font-size: 24px; }
.client-metrics article.clickable-metric { cursor: pointer; border: 2px solid rgba(31,143,77,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.client-metrics article.clickable-metric:hover { transform: translateY(-2px); border-color: rgba(31,143,77,.9); box-shadow: 0 16px 40px rgba(18,21,19,.10), 0 0 0 3px rgba(31,143,77,.18); background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%); }
.client-metrics article.clickable-metric:nth-child(3n + 1) { border-color: rgba(31,143,77,.65); }
.client-metrics article.clickable-metric:nth-child(3n + 2) { border-color: rgba(56,189,248,.62); }
.client-metrics article.clickable-metric small { color: var(--muted); font-size: 12px; font-weight: 700; }
.client-branch-mission { margin-top: 14px; border-color: rgba(36,129,79,.28); background: linear-gradient(135deg, #fffdf7, #eef7ef); }
.client-branch-mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.client-branch-mission-card { border: 1px solid rgba(36,129,79,.18); border-radius: 14px; background: rgba(255,255,255,.92); padding: 14px; display: grid; gap: 8px; box-shadow: 0 10px 22px rgba(20,34,24,.05); }
.client-branch-mission-card.campaign { border-color: rgba(180,126,31,.32); background: #fff8e9; }
.client-branch-mission-card span { color: var(--green); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.client-branch-mission-card strong { font-size: 22px; }
.client-branch-mission-card small { color: var(--muted); font-weight: 800; line-height: 1.35; }
.client-branch-mission-card em { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.35; }
.impact-motion {
  min-height: 116px;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(31,143,77,.18);
  background:
    radial-gradient(circle at 10% 40%, rgba(31,143,77,.22), transparent 24%),
    linear-gradient(115deg, rgba(18,21,19,.05), rgba(255,255,255,.92) 42%, rgba(31,143,77,.12));
}
.impact-motion::before {
  content: "";
  position: absolute;
  inset: -80px -30%;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.72) 44%, transparent 52% 100%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(31,143,77,.06) 29px 30px);
  animation: videoSweep 7s linear infinite;
  pointer-events: none;
}
.impact-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(31,143,77,.28) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .26;
  animation: particleDrift 16s linear infinite;
  pointer-events: none;
}
.impact-motion > * { position: relative; z-index: 1; }
.impact-motion strong { display: block; max-width: 620px; font-size: 22px; }
.impact-motion small { display: block; margin-top: 5px; color: var(--muted); }
.motion-orb {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 20px 55px rgba(31,143,77,.22), inset 0 0 0 10px rgba(255,255,255,.12);
  animation: softPulse 3.2s ease-in-out infinite;
}
.impact-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.net-impact-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.net-impact-card.impact-reduction { border-color: rgba(31,143,77,.36); background: #f0fbf4; }
.net-impact-card.impact-reduction strong { color: #087443; }
.net-impact-card.impact-increase { border-color: rgba(180,35,24,.42); background: #fff5f3; animation: increasePulse 1.6s ease-in-out infinite; }
.net-impact-card.impact-increase strong, .net-impact-card.impact-increase span { color: var(--red); }
.net-impact-card.impact-neutral { background: #f8faf8; }
.impact-stack { display: grid; gap: 16px; }
.impact-stack-bar { height: 34px; display: flex; overflow: hidden; border-radius: 999px; background: var(--chart-track); border: 1px solid var(--line); }
.impact-stack-bar span { display: block; min-height: 100%; transition: width .25s ease; }
.impact-stack-legend { display: grid; gap: 10px; }
.impact-stack-legend div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.impact-stack-legend small { color: var(--muted); }
.line-chart { display: grid; gap: 6px; }
.line-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.line-area { fill: var(--chart-area); }
.line-path { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-point circle { fill: var(--chart-dot); stroke: var(--chart-line); stroke-width: 2; transition: r .18s ease; }
.line-point:hover circle, .line-point:focus circle { r: 7; }
.line-axis { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 11px; }
.waterfall-chart { display: grid; gap: 12px; }
.waterfall-row { display: grid; grid-template-columns: minmax(140px, 1fr) 1.7fr minmax(120px, auto); gap: 12px; align-items: center; }
.waterfall-row > span { font-weight: 800; }
.waterfall-track { height: 16px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.waterfall-track i { display: block; height: 100%; border-radius: inherit; }
.waterfall-row.reduction .waterfall-track i { background: var(--chart-reduction); }
.waterfall-row.emission .waterfall-track i { background: var(--chart-emission); }
.waterfall-row.increase .waterfall-track i { background: var(--chart-increase); }
.waterfall-row.neutral .waterfall-track i { background: var(--chart-neutral); }
.waterfall-row strong { text-align: right; }
@keyframes videoSweep { from { transform: translateX(-20%); } to { transform: translateX(20%); } }
@keyframes particleDrift { from { background-position: 0 0; } to { background-position: 120px 72px; } }
@keyframes increasePulse { 0%,100% { transform: translateY(0); box-shadow: none; } 50% { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(180,35,24,.12); } }
@keyframes increaseBar { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.esg-passport { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: radial-gradient(circle at 78% 22%, rgba(31,143,77,.16), transparent 22%), linear-gradient(135deg, #fff, #f3f7f4); overflow: hidden; }
.esg-passport h2, .esg-passport p { margin: 0; }
.passport-orbit { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 180deg, #111 0 34%, #238a55 34% 72%, #dfe8e2 72% 100%); box-shadow: inset 0 0 0 14px #fff, 0 16px 44px rgba(31,143,77,.18); animation: softPulse 4s ease-in-out infinite; flex: 0 0 auto; }
.passport-orbit span { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; font-weight: 900; font-size: 16px; text-align: center; line-height: 1.05; }
@keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.client-chain { background: #fff; }
.chain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chain-grid article { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: linear-gradient(135deg, #fff, #f6f8f6); display: grid; gap: 8px; min-height: 130px; }
.chain-grid article span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; font-weight: 900; }
.chain-grid article strong { font-size: 16px; }
.chain-grid article small { color: var(--muted); line-height: 1.35; }
.highlight-row,
.highlight-row td {
  background: rgba(88, 154, 106, .16) !important;
}
.highlight-row td {
  box-shadow: inset 0 1px 0 rgba(180, 231, 191, .05), inset 0 -1px 0 rgba(180, 231, 191, .05);
}
.client-live-card { min-height: 160px; border-radius: 18px; border: 1px solid var(--line); padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 18px; background: radial-gradient(circle at 85% 30%, rgba(31,143,77,.2), transparent 22%), linear-gradient(135deg, #101513, #1c241f); color: #fff; overflow: hidden; }
.client-live-card h2, .client-live-card p { margin: 0; }
.client-live-card p { color: #d8e2dc; }
.client-live-card .eyebrow { color: #80e6a8; }
.live-status-orb { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#31a765 var(--progress, 50%), rgba(255,255,255,.22) 0); box-shadow: inset 0 0 0 12px rgba(255,255,255,.92), 0 18px 55px rgba(31,143,77,.22); animation: softPulse 3.8s ease-in-out infinite; flex: 0 0 auto; }
.live-status-orb span { width: 66px; height: 66px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 900; }
.client-progress-card { display: grid; gap: 12px; }
.progress-rail, .mini-progress { height: 14px; border-radius: 999px; background: #e4e9e5; overflow: hidden; border: 1px solid #d5ddd8; }
.progress-rail { position: relative; overflow: visible; }
.progress-rail span, .mini-progress span { display: block; height: 100%; background: linear-gradient(90deg, #1f8f4d, #45b56f); border-radius: 999px; }
.dynamic-progress span { position: relative; overflow: hidden; background: linear-gradient(90deg, #168a45 0%, #37b26d 50%, #168a45 100%); background-size: 220% 100%; animation: progressFlow 2.2s linear infinite; }
.dynamic-progress span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.45) 48%, transparent 62% 100%); transform: translateX(-100%); animation: progressShine 2.4s ease-in-out infinite; }
.dynamic-progress i { position: absolute; top: 50%; left: clamp(9px, var(--progress), calc(100% - 9px)) !important; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--green); box-shadow: 0 0 0 6px rgba(31,143,77,.16); transform: translate(-50%, -50%); animation: progressPulse 1.6s ease-in-out infinite; }
.client-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.client-steps span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 8px; color: var(--muted); font-size: 12px; text-align: center; background: #fff; }
.client-steps span.done { background: #e2f6ea; color: #087443; border-color: #bfe8ce; font-weight: 800; }
.live-map { height: 330px; border-radius: 16px; border: 1px solid var(--line); position: relative; overflow: hidden; background: linear-gradient(135deg, #f6f8f6 0 25%, #e9efeb 25% 26%, #f6f8f6 26% 50%, #e9efeb 50% 51%, #f6f8f6 51% 75%, #e9efeb 75% 76%, #f6f8f6 76%); }
.live-map::before { content: ""; position: absolute; inset: 28px; border: 2px dashed rgba(31,143,77,.45); border-radius: 38px; }
.route-line { position: absolute; left: 14%; right: 14%; top: 50%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green), #111); opacity: .75; }
.map-pin { position: absolute; display: grid; place-items: center; min-width: 58px; height: 42px; border-radius: 999px; font-weight: 900; box-shadow: var(--shadow); }
.map-pin.aspen { left: 8%; top: 42%; background: #111; color: #fff; }
.map-pin.truck { left: 48%; top: 40%; background: var(--green); color: #fff; animation: truckPulse 1.8s ease-in-out infinite; }
.map-pin.client { right: 8%; top: 42%; background: #fff; color: #111; border: 1px solid var(--line); }
@keyframes truckPulse { 0%,100% { transform: translateX(-6px); } 50% { transform: translateX(8px); } }
@keyframes progressFlow { from { background-position: 0 0; } to { background-position: 220% 0; } }
@keyframes progressShine { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(120%); } }
@keyframes progressPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(31,143,77,.16); } 50% { box-shadow: 0 0 0 10px rgba(31,143,77,.06); } }
.evidence-strip, .report-builder, .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.evidence-strip article, .report-builder article, .method-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #f8faf8; display: grid; gap: 8px; }
.evidence-strip strong, .report-builder strong, .method-card strong { font-size: 18px; }
.evidence-strip span, .report-builder small, .method-card span { color: var(--muted); font-size: 12px; }
.report-builder article span { width: 34px; height: 34px; border-radius: 10px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 900; }
.report-builder article:has(button[onclick="makeImpactPassportPdf()"]) { border-color: rgba(31,143,77,.45); background: linear-gradient(135deg, #f8faf8, #eef8f2); }
.notification-alert { border-color: rgba(31,143,77,.55); background: linear-gradient(135deg, #ffffff, #f0f8f3); }
.notification-alert.danger-state { border-color: rgba(180,35,24,.35); background: linear-gradient(135deg, #ffffff, #fff4f2); }
.notification-alert h2 { margin: 4px 0; }
.method-grid { grid-template-columns: repeat(2, 1fr); }
.method-card span { text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: var(--green); }
.labelled-form label { display: grid; gap: 5px; }
.labelled-form label span { font-weight: 900; color: var(--ink); }
.labelled-form label small { color: var(--muted); line-height: 1.35; min-height: 30px; }
.labelled-form input, .labelled-form select { width: 100%; }

/* ── Emissions Factor — detailed two-column form ── */
.ef-form { display: grid; gap: 16px; margin-bottom: 4px; }
.ef-form-section { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fcfdfc; }
.ef-section-title { font-size: 12.5px; font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ef-section-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.ef-section-desc { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }
.ef-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.ef-meta-grid label { display: grid; gap: 4px; align-content: start; }
.ef-meta-grid label > span { font-weight: 800; color: var(--ink); font-size: 12.5px; }
.ef-meta-grid label > small { color: var(--muted); font-size: 11px; line-height: 1.35; min-height: 28px; }
.ef-material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 0 20px; margin-top: 2px; }
.ef-material { display: grid; grid-template-columns: minmax(0, 1fr) 144px; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.ef-mat-name { font-weight: 800; font-size: 13px; color: var(--ink); }
.ef-mat-name small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.ef-input-wrap { position: relative; display: flex; align-items: center; }
.ef-input-wrap input { padding-right: 68px; text-align: right; }
.ef-input-wrap em { position: absolute; right: 10px; font-style: normal; font-size: 10px; color: var(--muted); pointer-events: none; }
.ef-form-actions button { min-width: 190px; }

/* Recalculation create form → two-column layout (CSS only, JS untouched) */
#recalcCreateForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
#recalcCreateForm > button { grid-column: 1 / -1; justify-self: start; min-width: 190px; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; }
  .detail-rail { display: none; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .crm-layout, .work-layout { grid-template-columns: 1fr; }
  .driver-board { grid-template-columns: 1fr; }
  .driver-hero { grid-template-columns: 1fr; }
  .driver-layout { grid-template-columns: 1fr; }
  .home-hero, .home-impact, .home-showcase { grid-template-columns: 1fr; }
  .service-strip { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-preview-bar, .client-identity { grid-template-columns: 1fr; display: grid; }
  .client-id-metrics { min-width: 0; grid-template-columns: 1fr; }
  .client-metrics { grid-template-columns: repeat(2, 1fr); }
  .evidence-strip, .report-builder, .method-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; align-items: stretch; flex-direction: column; }
  nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .side-card { margin-left: 0; justify-content: flex-end; }
  .grid-2, .grid-3, .grid-4, .material-grid, .material-list, .kpi-grid, .client-metrics, .client-steps, .client-branch-mission-grid { grid-template-columns: 1fr; }
  .filter-bar, .esg-period-bar, .notification-filter { grid-template-columns: 1fr !important; }
  .drawer { width: 100vw; }
  .drawer-head, .drawer-body { padding: 14px; }
  .announcement-card { grid-template-columns: 1fr; display: grid; }
  .announcement-summary { grid-template-columns: 1fr; }
  .announcement-inbox-layout { grid-template-columns: 1fr; }
  .announcement-channel-list { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; }
  .announcement-card button { justify-self: start; }
  .announcement-chat-layout { min-height: 0; }
  .announcement-chat-pane { min-height: 560px; }
  .announcement-composer-fields { grid-template-columns: 1fr; }
  .announcement-image-picker { grid-template-columns: 1fr; }
  .announcement-image-picker > span:first-child { grid-column: auto; }
  .announcement-composer-head { align-items: start; display: grid; }
  .announcement-composer-head small { max-width: none; text-align: left; }
  .center-modal-overlay { padding: 8px; place-items: stretch; }
  .center-modal { width: 100%; max-height: calc(100vh - 16px); border-radius: 16px; }
  .center-modal-head { padding: 14px; }
  .center-modal-body { padding: 14px; }
  .announcement-detail-head { display: grid; }
  .data-grid, .table-wrap { overflow-x: auto; }
  .panel, .nested-panel { padding: 14px; }
  .client-welcome, .client-hero { display: grid; min-height: auto; }
  .client-welcome h2 { font-size: 24px; }
  .client-hero h2 { font-size: 28px; }
  .mission-ring { width: 124px; height: 124px; }
  .live-map { height: 240px; }
  .driver-hero { padding: 14px; }
  .driver-mobile-shell { max-width: none; }
  .driver-mobile-hero { padding: 16px; border-radius: 18px; }
  .driver-mobile-hero h2 { font-size: 26px; }
  .home-hero-copy { padding: 24px 20px; }
  .home-hero-copy h1 { font-size: 38px; }
  .home-hero-visual { justify-content: flex-start; padding: 0 20px 20px; }
  .impact-grid { grid-template-columns: 1fr; }
  .service-card { grid-template-columns: 1fr; }
  .driver-metrics, .driver-progress, .driver-period, .driver-mobile-metrics, .driver-history-metrics, .driver-shift-grid { grid-template-columns: 1fr; }
  .driver-action-strip { display: grid; grid-template-columns: 1fr; }
  .driver-action-strip button, .driver-action-strip .button-link { width: 100%; min-height: 48px; }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-topbar h2 { font-size: 24px; }
  .dashboard-kpi strong { font-size: 24px; }
  .driver-return-card, .driver-mobile-topline, .driver-commission-head, .driver-history-head, .route-item-head, .driver-section-head { display: grid; }
  .route-list { max-height: none; }
  main { padding: 14px; }
}

/* ============================================================
   UI THEMES — presentation only (variable overrides + surfaces).
   Layout and app logic are unchanged. Switch via #themeSelect.
   ============================================================ */

/* Theme picker (lives in Settings). Surfaces use theme vars so it adapts to every theme. */
.theme-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-option { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 11px; font-weight: 600; transition: border-color .12s ease, box-shadow .12s ease; }
.theme-option:hover { border-color: var(--green); }
.theme-option.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.theme-swatch { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .12); }
.theme-option-text { display: grid; gap: 2px; min-width: 0; }
.theme-option-text strong { font-size: 13px; }
.theme-option-text small { color: var(--muted); font-weight: 500; line-height: 1.25; }

/* ============================================================
   THEME · Forest Canopy — light, nature green & white
   Foundation pass: shell, generic panels/buttons/inputs/tables,
   dashboard, settings/accounts. Page-specific dark-locked
   components added later in the session (dashboard hero nd-*,
   CRM v2, DO board, Approval, Sorting, Driver mobile, Master
   portal, client Waste Performance) get fixed in a follow-up
   pass — same as how Carbon Dark itself was built, page by page.
   ============================================================ */
html[data-theme="forest_canopy"] {
  color-scheme: light;
  --bg: linear-gradient(160deg, #f2f9f1 0%, #e3f2e2 100%);
  --panel: rgba(255,255,255,.72);
  --panel2: rgba(255,255,255,.85);
  --ink: #12331c;
  --muted: #55705c;
  --line: rgba(20,60,30,.14);
  --line2: rgba(20,60,30,.2);
  --soft: rgba(20,60,30,.06);
  --black: #12331c;
  --green: #1f8f4d;
  --amber: #b7791f;
  --red: #c0392b;
  --blue: #1d6fa5;
  --shadow: 0 8px 24px rgba(20,80,40,.1);
  --sb-bg: rgba(255,255,255,.6);
  --radius: 12px;
  --chart-bar: #2e9e52;
  --chart-bar-soft: rgba(46,158,82,.18);
  --chart-line: #2e9e52;
  --chart-area: rgba(46,158,82,.12);
  --chart-grid: rgba(20,60,30,.08);
  --chart-axis: #6f8a76;
  --chart-value: #12331c;
  --chart-track: rgba(20,60,30,.08);
  --chart-dot: #ffffff;
  --chart-reduction: #2e9e52;
  --chart-emission: #b7791f;
  --chart-increase: #c0392b;
  --chart-neutral: #9fb3a4;
  --chart-warning: #e58a2b;
  --cat-1:#36a85a; --cat-2:#e8793b; --cat-3:#43a2c7; --cat-4:#f0a13a;
  --cat-5:#6b76d9; --cat-6:#7fbd58; --cat-7:#a36bc4; --cat-8:#df6b86;
}
html[data-theme="forest_canopy"] body { background: var(--bg); background-attachment: fixed; color: var(--ink); }
html[data-theme="forest_canopy"] main { background: transparent !important; }
html[data-theme="forest_canopy"] button.secondary { background: rgba(20,60,30,.06); color: var(--ink); border: 1px solid var(--line2); }
html[data-theme="forest_canopy"] button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
html[data-theme="forest_canopy"] button.danger { background: var(--red); color: #fff; }
html[data-theme="forest_canopy"] input,
html[data-theme="forest_canopy"] select,
html[data-theme="forest_canopy"] textarea { background: rgba(255,255,255,.85) !important; border-color: rgba(20,60,30,.18) !important; color: #12331c !important; }
html[data-theme="forest_canopy"] input::placeholder { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] option { background: #ffffff !important; color: #12331c !important; }
html[data-theme="forest_canopy"] th { background: rgba(20,60,30,.05); color: var(--muted); }
html[data-theme="forest_canopy"] th, html[data-theme="forest_canopy"] td { border-bottom-color: var(--line); }
html[data-theme="forest_canopy"] tr.click-row:hover { background: rgba(20,60,30,.05); }
html[data-theme="forest_canopy"] small, html[data-theme="forest_canopy"] .muted { color: var(--muted); }
html[data-theme="forest_canopy"] .eyebrow { color: var(--green); }
html[data-theme="forest_canopy"] .panel,
html[data-theme="forest_canopy"] .metric-card,
html[data-theme="forest_canopy"] .chart-card,
html[data-theme="forest_canopy"] .kpi-grid article,
html[data-theme="forest_canopy"] .rail-panel,
html[data-theme="forest_canopy"] .record-card,
html[data-theme="forest_canopy"] .data-grid,
html[data-theme="forest_canopy"] .drawer {
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow);
  color: var(--ink);
}
html[data-theme="forest_canopy"] .sidebar { background: var(--sb-bg); backdrop-filter: blur(10px); border-right: 1px solid rgba(255,255,255,.6); }
html[data-theme="forest_canopy"] .brand-mark { background: linear-gradient(135deg,#3fb463,#1f7a3d); color: #fff; }
html[data-theme="forest_canopy"] nav button { color: var(--muted); }
html[data-theme="forest_canopy"] nav button.active { background: rgba(46,158,82,.12); color: #1f7a3d; box-shadow: inset 0 -3px 0 #2e9e52; }
html[data-theme="forest_canopy"] .topbar { background: transparent; }
html[data-theme="forest_canopy"] .detail-rail { background: var(--sb-bg); backdrop-filter: blur(10px); border-left: 1px solid rgba(255,255,255,.6); }
html[data-theme="forest_canopy"] .pill,
html[data-theme="forest_canopy"] .role-badge { background: rgba(46,158,82,.14); color: #1f7a3d; }
html[data-theme="forest_canopy"] ::-webkit-scrollbar-thumb { background: rgba(20,60,30,.18); }

/* Login screen renders before any module and must stay on its own light design,
   immune to the saved app theme. Reset theme vars + form controls at #id specificity. */
#loginScreen { --ink: #111827; --muted: #6b7280; --line: #e5e7eb; --panel: #ffffff; --soft: #eef1ef; --green: #16a34a; --black: #16a34a; }
body.auth-checking #loginScreen { visibility: hidden; opacity: 0; }
body.auth-checking::before { content: 'Restoring secure session…'; position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; color: #7d9a88; background: #f2f7f1; font-size: 13px; letter-spacing: .02em; }
#loginScreen input, #loginScreen textarea, #loginScreen select { background: #f9fafb; color: #111827; border: 1.5px solid #e5e7eb; }
#loginScreen input::placeholder { color: #9ca3af; }
#loginScreen input:focus { background: #fff; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.13); }

/* ============================================================
   NEW DASHBOARD (nd-*) — 2026-06-26
   Dark top nav (teal) + brand-new card layout, "C" teal style.
   Presentation only. Scoped to #view-dashboard except the shared
   top nav. Remove this block + revert renderDashboard markup to
   undo. Backups: styles.css.backup-redesign-20260626,
   script.js.backup-redesign-20260626.
   ============================================================ */

/* ---- shared top nav: deeper green-black + teal active ---- */
.sidebar { background: #111318; }
.brand-mark { background: #3dd68c; color: #06231f; }
nav button.active { background: rgba(16,179,163,.16); color: #fff; box-shadow: inset 0 -3px 0 #3dd68c; }
.nav-count { background: #3dd68c; color: #06231f; }
.profile-chip span { background: #3dd68c; color: #06231f; }

/* ---- new dashboard scope tokens ---- */
#view-dashboard {
  --nd-teal: #3dd68c;
  --nd-teal-ink: #0c7c70;
  --nd-green: #1f9d57;
  --nd-amber: #e08a1e;
  --nd-card: #ffffff;
  --nd-line: #e7edeb;
  --nd-ring-track: #e4ecea;
  --nd-ink: #13211c;
  --nd-mut: #7a8a84;
  --nd-shadow: 0 6px 18px rgba(20,40,32,.07);
}
#view-dashboard.view.active { display: block; }
#view-dashboard .nd-dash { display: flex; flex-direction: column; gap: 16px; }

/* header */
#view-dashboard .nd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#view-dashboard .nd-title { margin: 0; font-size: 22px; color: var(--nd-ink); }
#view-dashboard .nd-sub { margin: 3px 0 0; color: var(--nd-mut); font-size: 13px; }
#view-dashboard .nd-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPI cards */
#view-dashboard .nd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
#view-dashboard .nd-kpi { text-align: left; background: var(--nd-card); border: 1px solid var(--nd-line); border-left: 4px solid var(--nd-line); border-radius: 16px; padding: 14px 15px; box-shadow: var(--nd-shadow); cursor: pointer; display: grid; gap: 3px; transition: transform .14s ease, box-shadow .14s ease; }
#view-dashboard .nd-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20,40,32,.12); }
#view-dashboard .nd-kpi-h { display: flex; align-items: center; justify-content: space-between; }
#view-dashboard .nd-kpi-h span { color: var(--nd-mut); font-size: 12px; font-weight: 600; }
#view-dashboard .nd-ic { font-style: normal; font-size: 16px; opacity: .9; }
#view-dashboard .nd-kpi strong { font-size: 28px; line-height: 1.05; color: var(--nd-ink); }
#view-dashboard .nd-kpi small { color: var(--nd-mut); font-size: 11.5px; }
#view-dashboard .nd-kpi-teal { border-left-color: var(--nd-teal); }
#view-dashboard .nd-kpi-green { border-left-color: var(--nd-green); }
#view-dashboard .nd-kpi-green strong { color: var(--nd-green); }
#view-dashboard .nd-kpi-amber { border-left-color: var(--nd-amber); }
#view-dashboard .nd-kpi-amber strong { color: var(--nd-amber); }

/* generic card */
#view-dashboard .nd-card { background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--nd-shadow); }
#view-dashboard .nd-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#view-dashboard .nd-card-h strong { font-size: 15px; color: var(--nd-ink); }
#view-dashboard .nd-card-sub { display: block; color: var(--nd-mut); font-size: 11.5px; margin-top: 2px; }

/* rows */
#view-dashboard .nd-row-chart { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 14px; align-items: start; }
#view-dashboard .nd-row-work { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 14px; align-items: start; }

/* teal chart bars inside the new chart card */
#view-dashboard .nd-chart .col-bar,
#view-dashboard .nd-chart .monthly-bar-chart .col-bar { background: linear-gradient(180deg, #34cbbb, #3dd68c); box-shadow: none; }
#view-dashboard .nd-chart .col-bar.hot, #view-dashboard .nd-chart .col-cell:hover .col-bar { background: linear-gradient(180deg, #0fb3a3, #0c8d80); }

/* progress rings */
#view-dashboard .nd-rings { display: flex; flex-direction: column; gap: 14px; }
#view-dashboard .nd-ring-row { display: flex; align-items: center; gap: 12px; }
#view-dashboard .nd-ring { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
#view-dashboard .nd-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--nd-card); }
#view-dashboard .nd-ring span { position: relative; z-index: 1; font-size: 12px; font-weight: 800; color: var(--nd-ink); }
#view-dashboard .nd-ring-t { font-size: 13px; font-weight: 600; color: var(--nd-ink); }
#view-dashboard .nd-ring-s { font-size: 11px; color: var(--nd-mut); }

/* blocker task list */
#view-dashboard .nd-task-list { display: grid; gap: 10px; max-height: 360px; overflow: auto; }
#view-dashboard .nd-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--nd-line); border-left: 3px solid var(--nd-teal); border-radius: 12px; padding: 11px 13px; background: #fafdfc; transition: box-shadow .14s ease, transform .14s ease; }
#view-dashboard .nd-task:hover { transform: translateY(-2px); box-shadow: var(--nd-shadow); }
#view-dashboard .nd-task-main { display: grid; gap: 2px; min-width: 0; }
#view-dashboard .nd-task-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#view-dashboard .nd-task-top strong { font-size: 14px; color: var(--nd-ink); }
#view-dashboard .nd-task-cust { color: var(--nd-ink); font-weight: 600; font-size: 13px; }
#view-dashboard .nd-task small { color: var(--nd-mut); font-size: 12px; }
#view-dashboard .nd-task em { font-style: normal; color: var(--nd-teal-ink); font-size: 11.5px; font-weight: 600; }
#view-dashboard .nd-empty { color: var(--nd-mut); }

/* side queues */
#view-dashboard .nd-side { display: flex; flex-direction: column; gap: 10px; }
#view-dashboard .nd-queue { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; padding: 11px 13px; border: 1px solid var(--nd-line); }
#view-dashboard .nd-queue.nd-q-warn { background: #fff7ed; border-color: #f6dcb6; }
#view-dashboard .nd-queue.nd-q-ok { background: #effaf4; border-color: #c9ecd8; }
#view-dashboard .nd-q-t { font-size: 13px; font-weight: 600; color: var(--nd-ink); }
#view-dashboard .nd-q-s { font-size: 11.5px; color: var(--nd-mut); }
#view-dashboard .nd-mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
#view-dashboard .nd-mini { background: #f4f8f6; border: 1px solid var(--nd-line); border-radius: 12px; padding: 11px; text-align: center; }
#view-dashboard .nd-mini span { display: block; color: var(--nd-mut); font-size: 11.5px; }
#view-dashboard .nd-mini strong { font-size: 20px; color: var(--nd-teal-ink); }

/* tables + filter inside new cards */
#view-dashboard .nd-table { border: 1px solid var(--nd-line); border-radius: 12px; }
#view-dashboard .nd-filter { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; margin-bottom: 12px; }
#view-dashboard .nd-card button:not(.secondary):not(.ghost):not(.compact-btn) { background: var(--nd-teal); color: #06231f; }
#view-dashboard .nd-card button:not(.secondary):not(.ghost):not(.compact-btn):hover { background: #0e9e90; }
#view-dashboard .nd-card .compact-btn, #view-dashboard .nd-card .secondary { background: #eef2f0; color: var(--nd-ink); border: 1px solid var(--nd-line); }

@media (max-width: 1100px) {
  #view-dashboard .nd-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #view-dashboard .nd-row-chart, #view-dashboard .nd-row-work { grid-template-columns: 1fr; }
  #view-dashboard .nd-filter { grid-template-columns: 1fr; }
}
/* ============================================================
   END NEW DASHBOARD — 2026-06-26
   ============================================================ */

/* ============================================================
   MASTER PORTAL (mp-*) — 2026-06-26
   ============================================================ */

/* Hero banner */
.mp-hero { background: linear-gradient(135deg, #111318 0%, #1c3829 55%, #0f1d15 100%); color: #fff; border-radius: 20px; padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 36px; align-items: center; }
.mp-hero-left { display: grid; gap: 10px; }
.mp-hero-left .eyebrow { color: #3dd68c; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.mp-hero-left h2 { margin: 0; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.02; }
.mp-hero-left p { margin: 0; color: rgba(255,255,255,.72); max-width: 56ch; font-size: 14px; }
.mp-hero-left small { color: rgba(255,255,255,.45); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.mp-hero-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-hero-kpi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 14px; padding: 16px 18px; }
.mp-hero-kpi span { display: block; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.mp-hero-kpi strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
.mp-hero-kpi.teal strong { color: #3dd68c; }

/* Tab navigation */
.mp-tabs { display: flex; flex-wrap: wrap; gap: 5px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 14px; padding: 5px; position: sticky; top: 8px; z-index: 9; backdrop-filter: blur(14px); }
.mp-tabs button { width: auto; background: transparent; color: var(--muted); border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 600; border: none; transition: background .15s, color .15s; }
.mp-tabs button:hover { background: rgba(16,179,163,.09); color: #0a8e82; }
.mp-tabs button.active { background: #111318; color: #fff; box-shadow: inset 0 -3px 0 #3dd68c; }

/* Page shell */
.mp-page { display: grid; gap: 16px; }
.mp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 16px; align-items: start; }
.mp-full { grid-column: 1 / -1; }
.mp-chart-wrap { display: grid; gap: 16px; }

/* KPI row */
.mp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mp-kpi { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 14px; padding: 18px 20px; transition: box-shadow .18s; }
.mp-kpi:hover { box-shadow: 0 4px 16px rgba(16,179,163,.1); }
.mp-kpi.teal { border-top-color: #3dd68c; }
.mp-kpi.green { border-top-color: #5cc99a; }
.mp-kpi.amber { border-top-color: #f0a93c; }
.mp-kpi.red { border-top-color: #e05353; }
.mp-kpi span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mp-kpi strong { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; margin: 6px 0 2px; }
.mp-kpi small { display: block; color: var(--muted); font-size: 12px; }

/* Card */
.mp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.mp-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.mp-card-h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.mp-card-h p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.mp-card-h button { flex-shrink: 0; }

/* Action list */
.mp-action-list { display: grid; gap: 8px; }
.mp-action-item { border: 1px solid var(--line); border-radius: 11px; background: #fafcfa; padding: 11px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; cursor: pointer; transition: background .14s, border-color .14s; }
.mp-action-item:hover { background: #f0faf5; border-color: #3dd68c; }
.mp-action-item strong { display: block; font-size: 14px; }
.mp-action-item small { display: block; color: var(--muted); margin-top: 2px; font-size: 12px; }

/* Stat pair cards (in Group Overview right column) */
.mp-stat-pair { display: grid; gap: 10px; }
.mp-stat-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.mp-stat-box .mp-stat-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.mp-stat-box .mp-stat-val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.mp-stat-box .mp-stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Table */
.mp-table { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
.mp-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table th { background: #f4f8f5; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mp-table td { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.04); vertical-align: middle; }
.mp-table tr:last-child td { border-bottom: none; }
.mp-table tr.click-row { cursor: pointer; }
.mp-table tr.click-row:hover td { background: #f5faf6; }

/* Branch role badge */
.mp-role-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(16,179,163,.12); color: #0a8e82; display: inline-block; margin-left: 4px; vertical-align: middle; }

/* Filter bar */
.mp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.mp-filter input, .mp-filter select { flex: 1; min-width: 130px; max-width: 280px; }

/* Chart brief header card */
.mp-chart-brief-card { display: grid; gap: 4px; padding-bottom: 4px; }
.mp-chart-brief-card .eyebrow { color: #3dd68c; }
.mp-chart-brief-card h2 { margin: 0; }
.mp-chart-brief-card p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 1100px) {
  .mp-hero { grid-template-columns: 1fr; }
  .mp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   END MASTER PORTAL — 2026-06-26
   ============================================================ */

/* ============================================================
   PHASE 1 REDESIGN — Dark Sidebar Layout  2026-07-01
   ============================================================ */

/* ── Root: switch to dark theme ── */
:root {
  color-scheme: dark;
  --bg: #0d0f14;
  --panel: #161920;
  --panel2: #1c1f29;
  --ink: #f8fafc;
  --muted: #64748b;
  --line: rgba(255,255,255,0.07);
  --line2: rgba(255,255,255,0.11);
  --soft: rgba(255,255,255,0.04);
  --black: #3dd68c;
  --green: #3dd68c;
  --amber: #f59e0b;
  --red: #ef4444;
  --blue: #3b82f6;
  --shadow: 0 4px 24px rgba(0,0,0,0.45);
  --sb-bg: #111318;
  --sb-w: 228px;
  --radius: 12px;
  --chart-bar: #3dd68c;
  --chart-bar-soft: rgba(61,214,140,0.2);
  --chart-line: #3dd68c;
  --chart-area: rgba(61,214,140,0.1);
  --chart-grid: rgba(255,255,255,0.06);
  --chart-axis: #475569;
  --chart-value: #f8fafc;
  --chart-track: rgba(255,255,255,0.06);
  --chart-dot: #111318;
  --chart-reduction: #3dd68c;
  --chart-emission: #f59e0b;
  --chart-increase: #ef4444;
  --chart-neutral: #475569;
  --chart-warning: #f5a524;
  --cat-1:#52df8f; --cat-2:#ff8b5c; --cat-3:#55b8ed; --cat-4:#ffc04d;
  --cat-5:#8f9aff; --cat-6:#9edb67; --cat-7:#c084fc; --cat-8:#ff7f9e;
}

/* ============================================================
   CUSTOMER RECOVERY PROCESS — FOREST CANOPY FOCUS CANVAS
   Scoped to the recovery route so the other customer pages keep
   their existing information architecture and theme.
   ============================================================ */
#view-customer .portal-recovery-shell {
  --recovery-ink: #163b2a;
  --recovery-muted: #60766b;
  --recovery-green: #2b8d4e;
  --recovery-green-deep: #176b39;
  --recovery-line: #d8e2da;
  --recovery-soft: #f2f7f1;
  --recovery-ivory: #fbfaf5;
  --recovery-blue: #4d9ac6;
  min-height: 100vh !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--recovery-ivory) !important;
  color: var(--recovery-ink) !important;
}
#view-customer:has(.portal-recovery-shell) {
  padding: 0 !important;
  background: var(--recovery-ivory) !important;
}
#view-customer .portal-recovery-shell > .client-portal {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--recovery-ivory) !important;
}
#view-customer .recovery-process-page,
#view-customer .recovery-process-page * { box-sizing: border-box; }
#view-customer .recovery-process-page {
  min-height: 100vh;
  background: var(--recovery-ivory);
  color: var(--recovery-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#view-customer .recovery-process-page button,
#view-customer .recovery-process-page select { font: inherit; }
#view-customer .portal-primary-header {
  --recovery-ink: #163b2a;
  --recovery-muted: #60766b;
  --recovery-green: #2b8d4e;
  --recovery-green-deep: #176b39;
  --recovery-line: #d8e2da;
}
#view-customer .recovery-process-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 0 32px;
  border-top: 2px solid var(--recovery-green);
  border-bottom: 1px solid var(--recovery-line);
  background: rgba(255, 255, 252, .96);
  box-shadow: 0 8px 20px rgba(31, 79, 46, .08);
  backdrop-filter: blur(14px);
}
#view-customer .recovery-process-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--recovery-ink);
  text-decoration: none;
}
#view-customer .recovery-process-brand-mark {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--recovery-green);
  color: #fff;
  font-size: 18px;
}
#view-customer .recovery-process-brand strong { font-size: 17px; line-height: 1.1; letter-spacing: -.02em; }
#view-customer .recovery-process-brand:hover { color: var(--recovery-green-deep); }
#view-customer .recovery-process-main-nav {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  align-items: stretch;
  align-self: stretch;
  justify-content: center;
  gap: clamp(5px, 1vw, 14px);
  min-width: 0;
  overflow-x: auto !important;
  scrollbar-width: none;
}
#view-customer .recovery-process-main-nav::-webkit-scrollbar { display: none; }
#view-customer .recovery-process-main-nav button {
  position: relative;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 52px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #708278;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
#view-customer .recovery-process-main-nav button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: transparent;
  border-radius: 99px 99px 0 0;
  transition: background-color .16s ease, height .16s ease;
}
#view-customer .recovery-process-main-nav button:hover {
  background: #eff8ef;
  color: var(--recovery-green-deep);
}
#view-customer .recovery-process-main-nav button:hover::after { height: 2px; background: #9ac8a4; }
#view-customer .recovery-process-main-nav button:focus-visible {
  outline: 2px solid #72ad82;
  outline-offset: -2px;
}
#view-customer .recovery-process-main-nav button.active { color: var(--recovery-ink); }
#view-customer .recovery-process-main-nav button.active::after { background: var(--recovery-green); }
#view-customer .recovery-process-account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}
#view-customer .recovery-process-account .portal-notification-bell,
#view-customer .recovery-process-profile,
#view-customer .recovery-process-logout {
  border: 1px solid var(--recovery-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--recovery-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#view-customer .recovery-process-account .portal-notification-bell { width: 31px; height: 31px; }
#view-customer .recovery-process-profile,
#view-customer .recovery-process-logout { min-height: 31px; padding: 0 10px; font-size: 11px; font-weight: 800; cursor: pointer; }
#view-customer .recovery-process-profile { display: inline-flex; align-items: center; gap: 6px; }
#view-customer .recovery-process-profile > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--recovery-green); color: #fff; font-size: 10px; }
#view-customer .recovery-process-logout { color: var(--recovery-muted) !important; }
#view-customer .recovery-process-profile:hover,
#view-customer .recovery-process-logout:hover { border-color: var(--recovery-green) !important; color: var(--recovery-green-deep) !important; }
#view-customer .recovery-process-utility {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 46px;
  padding: 0 32px;
  border-bottom: 1px solid #e5ebe5;
  background: #fffefb;
}
#view-customer .recovery-process-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; color: #839188; font-size: 11px; }
#view-customer .recovery-process-breadcrumb strong { overflow: hidden; color: var(--recovery-ink); text-overflow: ellipsis; white-space: nowrap; }
#view-customer .recovery-process-selected-material { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--recovery-muted); font-size: 10px; white-space: nowrap; }
#view-customer .recovery-process-selected-material select { appearance: none; min-width: 94px; padding: 5px 19px 5px 7px; border: 0; background: transparent; color: var(--recovery-ink); font-size: 11px; font-weight: 800; cursor: pointer; }
#view-customer .recovery-process-selected-material > .material-symbols-rounded { position: absolute; right: 1px; pointer-events: none; color: var(--recovery-muted); font-size: 14px; }
#view-customer .recovery-process-content { max-width: none; margin: 0 auto; padding: 0 32px 112px; }
#view-customer .recovery-process-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 47%); align-items: center; min-height: 235px; padding: 26px 0 6px; }
#view-customer .recovery-process-hero .eyebrow,
#view-customer .recovery-process-detail .eyebrow { color: var(--recovery-green-deep); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
#view-customer .recovery-process-hero h1 { max-width: 760px; margin: 7px 0 12px; color: var(--recovery-ink) !important; font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 4.8vw, 70px); font-weight: 700; letter-spacing: -.045em; line-height: .98; }
#view-customer .recovery-process-hero p { margin: 0; color: var(--recovery-muted) !important; font-size: 14px; line-height: 1.55; }
#view-customer .recovery-process-forest { display: block; justify-self: end; width: min(100%, 660px); max-height: 230px; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
#view-customer .recovery-process-timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; min-height: 125px; padding: 0 3px; }
#view-customer .recovery-process-timeline-stage { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 0 8px; text-align: center; }
#view-customer .recovery-process-timeline-icon { z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c9d9ce; border-radius: 50%; background: var(--recovery-ivory); color: var(--recovery-green-deep); font-size: 22px; }
#view-customer .recovery-process-timeline-stage.is-complete .recovery-process-timeline-icon { border-color: var(--recovery-green); background: var(--recovery-green); color: #fff; box-shadow: 0 4px 12px rgba(43, 141, 78, .2); }
#view-customer .recovery-process-timeline-stage.is-current .recovery-process-timeline-icon { border-color: #a9d2e8; background: #f1f8fc; color: var(--recovery-blue); }
#view-customer .recovery-process-timeline-stage strong { color: var(--recovery-ink); font-size: 13px; line-height: 1.2; }
#view-customer .recovery-process-timeline-stage small { max-width: 165px; color: var(--recovery-muted); font-size: 10px; line-height: 1.35; }
#view-customer .recovery-process-timeline-number { position: absolute; z-index: 2; top: 3px; left: calc(50% + 8px); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--recovery-green); color: #fff; font-size: 9px; font-weight: 900; }
#view-customer .recovery-process-timeline-stage.is-current .recovery-process-timeline-number { background: #4c9dd0; }
#view-customer .recovery-process-timeline-connector { position: absolute; top: 24px; left: calc(50% + 25px); width: calc(100% - 50px); height: 1px; background: #b6cdbd; }
#view-customer .recovery-process-timeline-connector::after { content: ""; position: absolute; top: -2px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #9ebaa4; }
#view-customer .recovery-process-note { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 0; border-top: 1px solid #e1e9e2; border-bottom: 1px solid #e1e9e2; color: var(--recovery-muted); font-size: 11px; line-height: 1.45; }
#view-customer .recovery-process-note .material-symbols-rounded { flex: 0 0 auto; color: var(--recovery-green); font-size: 15px; }
#view-customer .recovery-process-note span:nth-child(2) { color: var(--recovery-ink); font-weight: 800; }
#view-customer .recovery-process-explorer { margin-top: 19px; }
#view-customer .recovery-process-explorer-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; }
#view-customer .recovery-process-material-list { min-width: 0; padding-right: 21px; border-right: 1px solid var(--recovery-line); }
#view-customer .recovery-process-material-list h2,
#view-customer .recovery-process-selected > h2 { margin: 0 0 5px; color: var(--recovery-ink) !important; font-size: 16px; letter-spacing: -.015em; }
#view-customer .recovery-process-material-list > p { margin: 0 0 14px; color: var(--recovery-muted); font-size: 11px; }
#view-customer .recovery-process-selected > h2 { margin-bottom: 16px; }
#view-customer .recovery-process-material-options { display: grid; gap: 1px; }
#view-customer .recovery-process-material-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) 17px; align-items: center; gap: 9px; width: 100%; min-height: 49px; padding: 7px 9px; border: 1px solid transparent !important; border-bottom-color: var(--recovery-line) !important; border-radius: 8px !important; background: transparent !important; color: var(--recovery-ink) !important; text-align: left; cursor: pointer; }
#view-customer .recovery-process-material-option:hover { background: #f2f8f2 !important; }
#view-customer .recovery-process-material-option.active { border-color: #99c7a5 !important; background: #f0f7ef !important; box-shadow: inset 3px 0 0 var(--recovery-green); }
#view-customer .recovery-process-material-option.is-disposal.active { border-color: #e5c891 !important; background: #fff8e9 !important; box-shadow: inset 3px 0 0 #c78a24; }
#view-customer .recovery-process-option-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #edf6ed; color: var(--recovery-green); font-size: 16px; }
#view-customer .recovery-process-material-option.is-disposal .recovery-process-option-icon { background: #fff2da; color: #bf7c1c; }
#view-customer .recovery-process-material-option > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
#view-customer .recovery-process-material-option strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#view-customer .recovery-process-material-option small { color: var(--recovery-muted); font-size: 10px; }
#view-customer .recovery-process-option-arrow { color: #84a08c; font-size: 15px; }
#view-customer .recovery-process-material-option.active .recovery-process-option-arrow { color: var(--recovery-green); }
#view-customer .recovery-process-detail { display: grid; gap: 16px; min-width: 0; }
#view-customer .recovery-process-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
#view-customer .recovery-process-detail-head h2 { display: flex; align-items: center; gap: 8px; margin: 5px 0 7px; color: var(--recovery-ink) !important; font-size: 30px; letter-spacing: -.03em; }
#view-customer .recovery-process-material-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: #e6f3e7; color: var(--recovery-green); font-size: 16px; }
#view-customer .recovery-process-detail-head p { max-width: 760px; margin: 0; color: var(--recovery-muted); font-size: 11px; line-height: 1.45; }
#view-customer .recovery-process-route-badge { flex: 0 0 auto; margin-top: 2px; padding: 4px 9px; border: 1px solid #a9d1b1; border-radius: 99px; color: var(--recovery-green-deep); font-size: 8px; font-weight: 800; }
#view-customer .recovery-process-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#view-customer .recovery-process-metrics article { display: grid; gap: 3px; min-height: 68px; padding: 11px; border: 1px solid var(--recovery-line); border-radius: 10px; background: rgba(244, 248, 242, .78); }
#view-customer .recovery-process-metrics span,
#view-customer .recovery-process-metrics small { color: var(--recovery-muted); font-size: 10px; }
#view-customer .recovery-process-metrics strong { color: var(--recovery-ink) !important; font-size: 14px; line-height: 1.3; }
#view-customer .recovery-process-route { display: grid; gap: 8px; }
#view-customer .recovery-process-route > .eyebrow { color: var(--recovery-green-deep); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
#view-customer .recovery-process-route-cards { display: flex; align-items: stretch; gap: 7px; min-width: 0; }
#view-customer .recovery-process-route-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: center; align-items: center; gap: 3px 7px; flex: 1 1 0; min-width: 0; min-height: 75px; padding: 10px; border: 1px solid var(--recovery-line); border-radius: 8px; background: #fffefb; }
#view-customer .recovery-process-route-card.is-disposal { border-color: #e4c78f; background: #fffaf0; }
#view-customer .recovery-process-route-icon { grid-row: span 2; display: grid; place-items: center; color: var(--recovery-green); font-size: 18px; }
#view-customer .recovery-process-route-card.is-disposal .recovery-process-route-icon { color: #bd7c1f; }
#view-customer .recovery-process-route-card strong { overflow: hidden; color: var(--recovery-ink); font-size: 11px; line-height: 1.25; text-overflow: ellipsis; }
#view-customer .recovery-process-route-card small { overflow: hidden; color: var(--recovery-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; }
#view-customer .recovery-process-route-arrow { display: grid; place-items: center; align-self: center; flex: 0 0 auto; color: var(--recovery-green); font-size: 16px; }
#view-customer .recovery-process-actions { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; margin: 27px -32px -105px; padding: 12px 32px; border-top: 1px solid var(--recovery-line); background: rgba(251, 250, 245, .94); backdrop-filter: blur(10px); }
#view-customer .recovery-process-action-secondary,
#view-customer .recovery-process-action-primary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 6px; font-size: 11px; font-weight: 800; cursor: pointer; }
#view-customer .recovery-process-action-secondary { border: 1px solid #8db99b; background: #fffefb; color: var(--recovery-green-deep); }
#view-customer .recovery-process-action-primary { border: 1px solid #467da7; background: #3676a5; color: #fff; }
#view-customer .recovery-process-action-secondary:hover { background: #eff8ef; }
#view-customer .recovery-process-action-primary:hover { background: #28648e; }
#view-customer .recovery-process-actions .material-symbols-rounded { font-size: 14px; }

@media (max-width: 1120px) {
  #view-customer .recovery-process-header { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 12px; padding-inline: 20px; }
  #view-customer .recovery-process-utility { padding-inline: 20px; }
  #view-customer .recovery-process-content { padding-inline: 20px; }
  #view-customer .recovery-process-actions { margin-inline: -20px; padding-inline: 20px; }
  #view-customer .recovery-process-main-nav { justify-content: flex-start; }
}
@media (max-width: 820px) {
  #view-customer .recovery-process-header { grid-template-columns: 1fr auto; }
  #view-customer .recovery-process-main-nav { grid-column: 1 / -1; grid-row: 2; min-height: 38px; }
  #view-customer .recovery-process-main-nav button { min-height: 36px; }
  #view-customer .recovery-process-utility { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-block: 8px; }
  #view-customer .recovery-process-selected-material { grid-column: auto; grid-row: auto; justify-self: end; }
  #view-customer .recovery-process-hero { grid-template-columns: 1fr; padding-top: 26px; }
  #view-customer .recovery-process-forest { justify-self: center; width: min(100%, 500px); max-height: 170px; margin-top: 8px; }
  #view-customer .recovery-process-explorer-layout { grid-template-columns: 1fr; }
  #view-customer .recovery-process-material-list { padding-right: 0; padding-bottom: 15px; border-right: 0; border-bottom: 1px solid var(--recovery-line); }
}
@media (max-width: 560px) {
  #view-customer .recovery-process-header { padding-inline: 12px; }
  #view-customer .recovery-process-account .portal-notification-bell { display: none; }
  #view-customer .recovery-process-profile { padding-inline: 6px; font-size: 0; }
  #view-customer .recovery-process-profile > span { width: 24px; height: 24px; }
  #view-customer .recovery-process-logout { padding-inline: 7px; font-size: 9px; }
  #view-customer .recovery-process-utility { grid-template-columns: 1fr auto; padding-inline: 12px; }
  #view-customer .recovery-process-breadcrumb { display: none; }
  #view-customer .recovery-process-content { padding-inline: 12px; }
  #view-customer .recovery-process-main-nav { width: 100%; min-width: 0; overflow-x: auto !important; overflow-y: hidden !important; }
  #view-customer .recovery-process-hero h1 { font-size: 37px; }
  #view-customer .recovery-process-hero p br { display: none; }
  #view-customer .recovery-process-timeline { grid-template-columns: repeat(5, 104px); width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 10px; }
  #view-customer .recovery-process-timeline-stage { padding-inline: 5px; }
  #view-customer .recovery-process-timeline-connector { width: 64px; left: calc(50% + 20px); }
  #view-customer .recovery-process-note { align-items: flex-start; flex-wrap: wrap; }
  #view-customer .recovery-process-note span:nth-child(3) { flex-basis: calc(100% - 24px); }
  #view-customer .recovery-process-detail-head { display: grid; }
  #view-customer .recovery-process-metrics { grid-template-columns: 1fr; }
  #view-customer .recovery-process-route-cards { display: grid; grid-template-columns: 1fr 1fr; }
  #view-customer .recovery-process-route-arrow { display: none; }
  #view-customer .recovery-process-actions { justify-content: stretch; margin-inline: -12px; padding-inline: 12px; }
  #view-customer .recovery-process-action-secondary,
  #view-customer .recovery-process-action-primary { flex: 1 1 0; justify-content: center; padding-inline: 7px; }
}

/* ── Base elements ── */
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); }
button { background: var(--green); color: #0d0f14; border-radius: 8px; padding: 9px 14px; font-weight: 700; }
button.secondary { background: rgba(255,255,255,0.06); color: var(--ink); border: 1px solid var(--line2); }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
button.danger { background: var(--red); color: #fff; }
button.compact-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; }
input, select, textarea { background: rgba(255,255,255,0.04); border-color: var(--line2); color: var(--ink); }
input::placeholder { color: var(--muted); }
option { background: #1c1f29; }
th { background: rgba(255,255,255,0.03); color: var(--muted); font-size: 11.5px; }
th, td { border-bottom-color: var(--line); padding: 9px 8px; }
tr.click-row:hover { background: rgba(255,255,255,0.03); }
small, .muted { color: var(--muted); }
.eyebrow { color: var(--green); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: none; }
.panel-title h2, .panel-title h3 { color: var(--ink); }

/* ── App shell: vertical sidebar ── */
.app-shell {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--sb-w) minmax(0,1fr) 300px;
  grid-template-rows: 1fr;
}
body.rail-collapsed .app-shell { grid-template-columns: var(--sb-w) minmax(0,1fr) 40px; }
body[data-role="driver"] .app-shell,
body[data-role="customer_view"] .app-shell,
body[data-role="customer_master"] .app-shell { grid-template-columns: var(--sb-w) minmax(0,1fr); }

/* ── Sidebar: vertical left column ── */
.sidebar {
  grid-column: 1;
  grid-row: 1;
  height: 100vh;
  overflow: hidden;
  background: var(--sb-bg);
  border-right: 1px solid var(--line);
  border-bottom: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: sticky;
  top: 0;
}

/* Brand */
.brand {
  flex: 0 0 auto;
  padding: 15px 14px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3dd68c, #16a34a);
  color: #0d0f14;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}
.brand strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.brand small, .brand-mark + div small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

/* Nav: vertical */
nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  flex-wrap: nowrap;
  min-width: 0;
}
nav::-webkit-scrollbar { width: 0; }

nav button {
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  box-shadow: none;
  transition: all 0.13s;
}
nav button:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
nav button.active {
  background: rgba(61,214,140,0.1);
  color: var(--green);
  border: 1px solid rgba(61,214,140,0.18);
  box-shadow: none;
}

/* Nav section labels */
.nav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 10px 4px;
  user-select: none;
}

/* Nav icon + label layout */
nav button .nav-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 14px;
  margin-right: 9px;
  flex-shrink: 0;
  opacity: 0.75;
}
nav button.active .nav-ic { opacity: 1; }
nav button .nav-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Nav groups */
.nav-group { position: relative; display: flex; flex-direction: column; }
.nav-group > button { width: 100%; display: flex; align-items: center; gap: 6px; }
.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: rgba(239,68,68,0.15); color: var(--red);
  font-size: 10px; font-weight: 700; margin-left: auto;
}
.nav-count--approval {
  min-width: 20px;
  padding: 0 5px;
  background: rgba(217,119,6,0.16);
  border: 1px solid rgba(217,119,6,0.28);
  color: #b45309;
}
html[data-theme="carbon_dark"] .nav-count--approval {
  background: rgba(245,158,11,0.2);
  border-color: rgba(245,158,11,0.34);
  color: #fbbf24;
}
.nav-caret { margin-left: 4px; font-size: 10px; color: var(--muted); }
.nav-menu {
  position: static;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: auto;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.open .nav-menu { display: flex; }
.nav-menu button { padding: 7px 10px; font-size: 12px; width: 100%; }

/* Side card (bottom of sidebar) */
.side-card {
  flex: 0 0 auto;
  margin-top: auto;
  margin-left: 0;
  padding: 10px 8px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: transparent;
}

/* The signed-in role is always anchored to the bottom of the rail. */
.sidebar > .side-card { margin-top: auto; }
.notification-bell {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  padding: 0;
}
.notification-bell svg { fill: currentColor; width: 16px; height: 16px; }
.bell-count { background: var(--red); color: #fff; font-size: 9px; border-radius: 9px; padding: 1px 4px; }
@keyframes announcement-bell-sway {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.notification-bell.has-unread .bell-icon,
.portal-notification-bell.has-unread .material-symbols-rounded {
  animation: announcement-bell-sway .72s ease-in-out infinite;
  transform-origin: 50% 15%;
}
@media (prefers-reduced-motion: reduce) {
  .notification-bell.has-unread .bell-icon,
  .portal-notification-bell.has-unread .material-symbols-rounded { animation: none; }
}
.profile-chip {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: left;
  min-width: 0;
  color: var(--ink);
  font-weight: 500;
}
.profile-chip span {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3dd68c, #2563eb);
  color: #fff;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.profile-chip strong { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Main area ── */
main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Topbar ── */
.topbar {
  flex-shrink: 0;
  height: 54px;
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar > div:first-child { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.topbar .eyebrow { font-size: 10px; margin-bottom: 0; display: block; }
.topbar h1 { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.top-actions {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 12px;
}
.top-actions button { padding: 6px 12px; font-size: 12px; font-weight: 600; }
#storagePath { font-size: 11px; color: var(--muted); }

/* ── KPI grid (manager header bar) ── */
.kpi-grid {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
}
.kpi-grid article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: none;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-grid article span { font-size: 10.5px; color: var(--muted); }
.kpi-grid article strong { font-size: 20px; font-weight: 800; color: var(--ink); }

/* ── View sections: scrollable ── */
.view { display: none; flex: 1; overflow-y: auto; padding: 20px 22px; min-height: 0; }
.view.active { display: block; }
.view::-webkit-scrollbar { width: 4px; }
.view::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

/* ── Detail rail ── */
.detail-rail {
  grid-column: 3;
  grid-row: 1;
  height: 100vh;
  overflow-y: auto;
  background: var(--sb-bg);
  border-left: 1px solid var(--line);
}
.rail-panel { border-bottom: 1px solid var(--line); padding: 14px 16px; }
.rail-panel h3 { font-size: 13px; font-weight: 700; margin: 4px 0; color: var(--ink); }
.rail-toggle { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; }

/* ── Drawer ── */
.drawer-overlay { background: rgba(0,0,0,0.65); }
.drawer { background: #13151e; border-left: 1px solid var(--line2); }
.drawer-head { border-bottom: 1px solid var(--line); padding: 18px 20px; }
.drawer-head h2 { font-size: 18px; font-weight: 800; color: var(--ink); }
.drawer-body { padding: 18px 20px; }
.drawer-body:has(.pdf-preview-section) { padding: 14px 18px 18px; }
.ghost#drawerClose { background: rgba(255,255,255,0.06); border-color: var(--line2); color: var(--ink); }

/* ── Responsive ── */
@media (max-width: 1280px) {
  .app-shell { grid-template-columns: var(--sb-w) minmax(0,1fr); }
  .detail-rail { display: none; }
}
@media (max-width: 900px) {
  :root { --sb-w: 52px; }
  .brand strong, .brand small { display: none; }
  nav button { padding: 10px; justify-content: center; font-size: 0; }
  .nav-count, .nav-caret { display: none; }
  .profile-chip strong { display: none; }
  .profile-chip { padding: 7px; justify-content: center; }
}

/* ── ESG screenshot mode: keep working ── */
body.esg-screenshot-mode .sidebar,
body.esg-screenshot-mode .topbar,
body.esg-screenshot-mode .detail-rail { display: none !important; }
body.esg-screenshot-mode .app-shell { grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr; height: auto; overflow: visible; }
body.esg-screenshot-mode main { grid-column: 1; height: auto; overflow: visible; }

/* ============================================================
   PHASE 1 — DASHBOARD REDESIGN
   ============================================================ */

#view-dashboard {
  --nd-teal:  #3dd68c;
  --nd-teal-ink: #22c55e;
  --nd-green: #3dd68c;
  --nd-amber: #f59e0b;
  --nd-red:   #ef4444;
  --nd-blue:  #3b82f6;
  --nd-card:  #161920;
  --nd-line:  rgba(255,255,255,0.07);
  --nd-ring-track: rgba(255,255,255,0.06);
  --nd-ink:   #f8fafc;
  --nd-mut:   #64748b;
  --nd-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

#view-dashboard.view.active { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#view-dashboard .nd-dash { display: flex; flex-direction: column; gap: 18px; flex: 1; overflow-y: auto; padding: 20px 22px; }
#view-dashboard .nd-dash::-webkit-scrollbar { width: 4px; }
#view-dashboard .nd-dash::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Section row */
#view-dashboard .nd-section-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#view-dashboard .nd-section-label { font-size: 10.5px; font-weight: 600; color: var(--nd-mut); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
#view-dashboard .nd-section-line { flex: 1; height: 1px; background: var(--nd-line); min-width: 20px; }
#view-dashboard .nd-head-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#view-dashboard .nd-head-actions button { padding: 6px 12px; font-size: 11.5px; font-weight: 600; }

/* KPI cards */
#view-dashboard .nd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
#view-dashboard .nd-kpi {
  text-align: left;
  background: var(--nd-card);
  border: 1px solid var(--nd-line);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .14s, border-color .14s;
  position: relative; overflow: hidden;
  box-shadow: var(--nd-shadow);
}
#view-dashboard .nd-kpi::before {
  content:''; position:absolute; width:90px; height:90px; border-radius:50%;
  top:-25px; right:-25px; filter:blur(30px); opacity:.3; pointer-events:none;
}
#view-dashboard .nd-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
#view-dashboard .nd-kpi-h { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
#view-dashboard .nd-kpi-h span { color: var(--nd-mut); font-size: 11px; font-weight: 500; }
#view-dashboard .nd-ic { font-style:normal; font-size:18px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(255,255,255,0.06); }
#view-dashboard .nd-kpi strong { font-size: 36px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; color: var(--nd-ink); margin-bottom: 6px; display: block; }
#view-dashboard .nd-kpi small { color: var(--nd-mut); font-size: 11.5px; margin-bottom: 10px; display: block; }
#view-dashboard .nd-kpi-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; }
#view-dashboard .nd-kpi-bar-fill { height: 100%; border-radius: 2px; }

#view-dashboard .nd-kpi-teal { border-color: rgba(61,214,140,0.2); }
#view-dashboard .nd-kpi-teal::before { background: #3dd68c; }
#view-dashboard .nd-kpi-teal strong { color: var(--nd-teal); }
#view-dashboard .nd-kpi-green { border-color: rgba(61,214,140,0.18); }
#view-dashboard .nd-kpi-green::before { background: #3dd68c; }
#view-dashboard .nd-kpi-green strong { color: var(--nd-green); }
#view-dashboard .nd-kpi-amber { border-color: rgba(245,158,11,0.2); }
#view-dashboard .nd-kpi-amber::before { background: #f59e0b; }
#view-dashboard .nd-kpi-amber strong { color: var(--nd-amber); }
#view-dashboard .nd-kpi-red { border-color: rgba(239,68,68,0.25); }
#view-dashboard .nd-kpi-red::before { background: #ef4444; }
#view-dashboard .nd-kpi-red strong { color: var(--nd-red); }

/* Pipeline */
#view-dashboard .nd-pipeline { background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 14px; overflow: hidden; }
#view-dashboard .nd-pipeline-head { padding: 13px 18px; border-bottom: 1px solid var(--nd-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#view-dashboard .nd-pipeline-head strong { font-size: 13px; font-weight: 700; }
#view-dashboard .nd-pipeline-hint { font-size: 11px; color: var(--nd-mut); font-weight: 400; margin-left: 4px; }
#view-dashboard .nd-pipeline-body { display: flex; align-items: center; padding: 16px 12px; }
#view-dashboard .nd-stage { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 10px; cursor: pointer; transition: background 0.13s; min-width: 0; }
#view-dashboard .nd-stage:hover { background: rgba(255,255,255,0.04); }
#view-dashboard .nd-stage-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 8px; border: 1px solid; position: relative; transition: transform 0.13s; }
#view-dashboard .nd-stage:hover .nd-stage-icon { transform: translateY(-2px); }
#view-dashboard .nd-stage-badge { position: absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; padding:0 4px; border:2px solid var(--nd-card); }
#view-dashboard .nd-stage-name { font-size: 11px; font-weight: 700; text-align: center; margin-bottom: 2px; color: var(--nd-ink); }
#view-dashboard .nd-stage-sub { font-size: 9.5px; color: var(--nd-mut); text-align: center; }
#view-dashboard .nd-stage-arrow { color: rgba(255,255,255,0.14); font-size: 18px; flex-shrink: 0; padding-bottom: 22px; user-select: none; }
#view-dashboard .nd-stage-icon.g { background: rgba(61,214,140,0.1); border-color: rgba(61,214,140,0.2); }
#view-dashboard .nd-stage-icon.a { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
#view-dashboard .nd-stage-icon.r { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }
#view-dashboard .nd-stage-icon.b { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); }
#view-dashboard .nd-stage-icon.mute { background: rgba(255,255,255,0.04); border-color: var(--nd-line); }
#view-dashboard .nd-stage-badge.r { background: var(--nd-red); color: #fff; }
#view-dashboard .nd-stage-badge.a { background: var(--nd-amber); color: #0d0f14; }
#view-dashboard .nd-stage-badge.g { background: var(--nd-green); color: #0d0f14; }
#view-dashboard .nd-stage-badge.b { background: var(--nd-blue); color: #fff; }

/* Live badge */
#view-dashboard .nd-live-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; background:rgba(61,214,140,0.08); border:1px solid rgba(61,214,140,0.2); color:var(--nd-green); }
#view-dashboard .nd-live-dot { width:6px; height:6px; border-radius:50%; background:var(--nd-green); animation:nd-blink 1.6s ease-in-out infinite; }
@keyframes nd-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Generic card */
#view-dashboard .nd-card { background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--nd-shadow); }
#view-dashboard .nd-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#view-dashboard .nd-card-h strong { font-size: 13px; font-weight: 700; color: var(--nd-ink); }
#view-dashboard .nd-card-sub { display: block; color: var(--nd-mut); font-size: 11px; margin-top: 2px; }
#view-dashboard .nd-card-h button { padding: 6px 12px; font-size: 11.5px; font-weight: 600; }
#view-dashboard .nd-card button.secondary, #view-dashboard .nd-card button.compact-btn { background: rgba(255,255,255,0.06); color: var(--nd-ink); border: 1px solid var(--nd-line); }

/* Rows */
#view-dashboard .nd-row-chart { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 14px; align-items: start; }
#view-dashboard .nd-row-work { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 14px; align-items: start; }

/* Chart bars */
#view-dashboard .nd-chart .col-bar,
#view-dashboard .nd-chart .monthly-bar-chart .col-bar { background: linear-gradient(180deg,#3dd68c,#22c55e); box-shadow: none; }
#view-dashboard .nd-chart .col-bar.hot,
#view-dashboard .nd-chart .col-cell:hover .col-bar { background: linear-gradient(180deg,#22c55e,#16a34a); }

/* Progress rings */
#view-dashboard .nd-rings { display: flex; flex-direction: column; gap: 16px; }
#view-dashboard .nd-ring-row { display: flex; align-items: center; gap: 12px; }
#view-dashboard .nd-ring { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
#view-dashboard .nd-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--nd-card); }
#view-dashboard .nd-ring span { position:relative; z-index:1; font-size:11px; font-weight:800; color:var(--nd-ink); }
#view-dashboard .nd-ring-t { font-size: 13px; font-weight: 600; color: var(--nd-ink); }
#view-dashboard .nd-ring-s { font-size: 11px; color: var(--nd-mut); }

/* Blocker task list */
#view-dashboard .nd-task-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
#view-dashboard .nd-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--nd-line); border-left: 3px solid var(--nd-teal); border-radius: 10px; padding: 11px 13px; background: rgba(255,255,255,0.02); transition: background 0.13s; }
#view-dashboard .nd-task:hover { background: rgba(255,255,255,0.04); }
#view-dashboard .nd-task-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view-dashboard .nd-task-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#view-dashboard .nd-task-top strong { font-size: 13px; color: var(--nd-ink); }
#view-dashboard .nd-task-cust { color: var(--nd-ink); font-weight: 600; font-size: 12px; }
#view-dashboard .nd-task small { color: var(--nd-mut); font-size: 11.5px; }
#view-dashboard .nd-task em { font-style:normal; color:var(--nd-teal); font-size:11.5px; font-weight:600; }
#view-dashboard .nd-task button { padding: 6px 11px; font-size: 11.5px; font-weight: 600; flex-shrink: 0; }
#view-dashboard .nd-empty { color: var(--nd-mut); font-size: 13px; padding: 8px 0; }

/* Side queues */
#view-dashboard .nd-side { display: flex; flex-direction: column; gap: 10px; }
#view-dashboard .nd-queue { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--nd-line); background: rgba(255,255,255,0.02); }
#view-dashboard .nd-queue.nd-q-warn { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); }
#view-dashboard .nd-queue.nd-q-ok { background: rgba(61,214,140,0.05); border-color: rgba(61,214,140,0.14); }
#view-dashboard .nd-q-t { font-size: 13px; font-weight: 600; color: var(--nd-ink); }
#view-dashboard .nd-q-s { font-size: 11.5px; color: var(--nd-mut); }
#view-dashboard .nd-queue button { padding: 6px 11px; font-size: 11.5px; flex-shrink: 0; }
#view-dashboard .nd-mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
#view-dashboard .nd-mini { background: rgba(255,255,255,0.03); border: 1px solid var(--nd-line); border-radius: 10px; padding: 12px; text-align: center; }
#view-dashboard .nd-mini span { display: block; color: var(--nd-mut); font-size: 11px; margin-bottom: 4px; }
#view-dashboard .nd-mini strong { font-size: 20px; color: var(--nd-teal); }

/* Lower 3-col layout */
#view-dashboard .nd-lower { display: grid; grid-template-columns: 1fr 240px 240px; gap: 14px; align-items: start; }
#view-dashboard .nd-right-col { display: flex; flex-direction: column; gap: 12px; }

/* Progress panel */
#view-dashboard .nd-prog-panel { background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 14px; padding: 16px 18px; }
#view-dashboard .nd-prog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
#view-dashboard .nd-prog-title { font-size: 13px; font-weight: 700; color: var(--nd-ink); }
#view-dashboard .nd-prog-items { display: flex; flex-direction: column; gap: 12px; }
#view-dashboard .nd-ppi { display: flex; align-items: center; gap: 10px; }
#view-dashboard .nd-ppi-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
#view-dashboard .nd-ppi-icon.g { background: rgba(61,214,140,0.1); }
#view-dashboard .nd-ppi-icon.a { background: rgba(245,158,11,0.1); }
#view-dashboard .nd-ppi-icon.b { background: rgba(59,130,246,0.1); }
#view-dashboard .nd-ppi-body { flex: 1; }
#view-dashboard .nd-ppi-label { font-size: 11.5px; font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--nd-ink); }
#view-dashboard .nd-ppi-pct { font-size: 11.5px; font-weight: 800; }
#view-dashboard .nd-ppi-pct.g { color: var(--nd-green); }
#view-dashboard .nd-ppi-pct.a { color: var(--nd-amber); }
#view-dashboard .nd-ppi-pct.b { color: var(--nd-blue); }
#view-dashboard .nd-ppi-track { height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; }
#view-dashboard .nd-ppi-fill { height: 100%; border-radius: 3px; }

/* Action needed panel */
#view-dashboard .nd-action-panel { background: var(--nd-card); border: 1px solid rgba(245,158,11,0.2); border-radius: 14px; padding: 14px 16px; }
#view-dashboard .nd-action-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#view-dashboard .nd-action-title { font-size: 13px; font-weight: 700; color: var(--nd-amber); }
#view-dashboard .nd-action-items { display: flex; flex-direction: column; gap: 6px; }
#view-dashboard .nd-action-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.1); border-radius: 9px; cursor: pointer; transition: background 0.13s; }
#view-dashboard .nd-action-item:hover { background: rgba(245,158,11,0.09); }
#view-dashboard .nd-action-item-lbl { flex: 1; font-size: 12px; color: var(--nd-ink); }
#view-dashboard .nd-action-item-count { font-size: 14px; font-weight: 800; color: var(--nd-amber); }
#view-dashboard .nd-action-item-arr { color: var(--nd-mut); font-size: 14px; }

/* Tables + filter */
#view-dashboard .nd-table { border: 1px solid var(--nd-line); border-radius: 10px; overflow: hidden; }
#view-dashboard .nd-table th { background: rgba(255,255,255,0.03); }
#view-dashboard .nd-filter { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; margin-bottom: 12px; }
#view-dashboard .nd-filter input, #view-dashboard .nd-filter select { font-size: 12.5px; padding: 8px 10px; }
#view-dashboard .nd-filter button { padding: 8px 14px; font-size: 12.5px; }

/* Blockers card */
#view-dashboard .nd-blockers { display: flex; flex-direction: column; }

/* ── Responsive overrides ── */
@media (max-width: 1100px) {
  #view-dashboard .nd-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #view-dashboard .nd-row-chart, #view-dashboard .nd-row-work { grid-template-columns: 1fr; }
  #view-dashboard .nd-lower { grid-template-columns: 1fr; }
  #view-dashboard .nd-filter { grid-template-columns: 1fr; }
  #view-dashboard .nd-pipeline-body { flex-wrap: wrap; justify-content: center; gap: 8px; }
  #view-dashboard .nd-stage-arrow { display: none; }
}

/* ============================================================
   PHASE 1 — DASHBOARD LAYOUT v2  (matches demo)  2026-07-01
   ============================================================ */

/* override: view.active as flex column for dashboard */
#view-dashboard.view { display: none; }
#view-dashboard.view.active { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#view-dashboard .nd-dash { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
#view-dashboard .nd-dash::-webkit-scrollbar { width: 4px; }
#view-dashboard .nd-dash::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ── Status cards (4-col) ── */
#view-dashboard .nd-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
#view-dashboard .nd-status-card {
  background: var(--nd-card); border: 1px solid var(--nd-line); border-radius: 14px;
  padding: 18px 20px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .14s, border-color .14s; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
}
#view-dashboard .nd-status-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.13); }
#view-dashboard .nd-status-card::before {
  content:''; position:absolute; width:100px; height:100px; border-radius:50%;
  top:-30px; right:-20px; filter:blur(35px); opacity:.25; pointer-events:none;
}
#view-dashboard .nd-sc-top { display:flex; align-items:center; justify-content:space-between; }
#view-dashboard .nd-sc-label { font-size:11px; font-weight:500; color:var(--nd-mut); text-transform:uppercase; letter-spacing:.05em; }
#view-dashboard .nd-sc-badge { font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; }
#view-dashboard .nd-sc-badge.r { background:rgba(239,68,68,.14); color:#ef4444; }
#view-dashboard .nd-sc-badge.a { background:rgba(245,158,11,.14); color:#f59e0b; }
#view-dashboard .nd-sc-badge.g { background:rgba(61,214,140,.14); color:#3dd68c; }
#view-dashboard .nd-sc-badge.b { background:rgba(59,130,246,.14); color:#3b82f6; }
#view-dashboard .nd-sc-num { font-size:42px; line-height:1; font-weight:900; letter-spacing:-.03em; }
#view-dashboard .nd-sc-sub { font-size:11.5px; color:var(--nd-mut); }
#view-dashboard .nd-sc-bar { height:3px; background:rgba(255,255,255,.06); border-radius:2px; margin-top:4px; }
#view-dashboard .nd-sc-bar-fill { height:100%; border-radius:2px; }
#view-dashboard .nd-status-card.c-red  { border-color:rgba(239,68,68,.2); }
#view-dashboard .nd-status-card.c-red  .nd-sc-num { color:#ef4444; }
#view-dashboard .nd-status-card.c-red::before  { background:#ef4444; }
#view-dashboard .nd-status-card.c-amber { border-color:rgba(245,158,11,.2); }
#view-dashboard .nd-status-card.c-amber .nd-sc-num { color:#f59e0b; }
#view-dashboard .nd-status-card.c-amber::before { background:#f59e0b; }
#view-dashboard .nd-status-card.c-green { border-color:rgba(61,214,140,.2); }
#view-dashboard .nd-status-card.c-green .nd-sc-num { color:#3dd68c; }
#view-dashboard .nd-status-card.c-green::before { background:#3dd68c; }
#view-dashboard .nd-status-card.c-blue  { border-color:rgba(59,130,246,.2); }
#view-dashboard .nd-status-card.c-blue  .nd-sc-num { color:#3b82f6; }
#view-dashboard .nd-status-card.c-blue::before  { background:#3b82f6; }

/* ── Pipeline ── */
#view-dashboard .nd-pipeline { background:var(--nd-card); border:1px solid var(--nd-line); border-radius:14px; overflow:visible; }
#view-dashboard .nd-pipeline-head { padding:12px 18px; border-bottom:1px solid var(--nd-line); display:flex; align-items:center; gap:8px; }
#view-dashboard .nd-pipeline-head strong { font-size:12px; font-weight:600; color:var(--nd-ink); }
#view-dashboard .nd-pipeline-hint { font-size:11px; color:var(--nd-mut); }
#view-dashboard .nd-pipeline-body { display:flex !important; flex-direction:row !important; align-items:center; padding:16px 8px; gap:0; overflow-x:auto; }
#view-dashboard .nd-stage { flex:1; min-width:70px; display:flex; flex-direction:column; align-items:center; padding:8px 4px; border-radius:10px; cursor:pointer; transition:background .13s; }
#view-dashboard .nd-stage:hover { background:rgba(255,255,255,.05); }
#view-dashboard .nd-stage-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:6px; border:1.5px solid; position:relative; flex-shrink:0; transition:transform .13s; }
#view-dashboard .nd-stage:hover .nd-stage-icon { transform:translateY(-2px); }
#view-dashboard .nd-stage-badge { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; padding:0 4px; border:2px solid var(--nd-card); }
#view-dashboard .nd-stage-name { font-size:10.5px; font-weight:700; text-align:center; color:var(--nd-ink); line-height:1.2; }
#view-dashboard .nd-stage-sub { font-size:9.5px; color:var(--nd-mut); text-align:center; margin-top:2px; }
#view-dashboard .nd-stage-arrow { color:rgba(255,255,255,.14); font-size:20px; flex-shrink:0; padding-bottom:20px; user-select:none; line-height:1; }
#view-dashboard .nd-stage-icon.g { background:rgba(61,214,140,.1); border-color:rgba(61,214,140,.25); }
#view-dashboard .nd-stage-icon.a { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.25); }
#view-dashboard .nd-stage-icon.r { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.25); }
#view-dashboard .nd-stage-icon.b { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.25); }
#view-dashboard .nd-stage-icon.m { background:rgba(255,255,255,.04); border-color:var(--nd-line); }
#view-dashboard .nd-stage-badge.r { background:#ef4444; color:#fff; }
#view-dashboard .nd-stage-badge.a { background:#f59e0b; color:#0d0f14; }
#view-dashboard .nd-stage-badge.g { background:#3dd68c; color:#0d0f14; }
#view-dashboard .nd-stage-badge.b { background:#3b82f6; color:#fff; }
#view-dashboard .nd-stage-badge.m { background:rgba(255,255,255,.12); color:var(--nd-mut); }

/* ── Detail & Activity — 3-column layout ── */
#view-dashboard .nd-detail-grid { display:grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1.1fr) minmax(0,1fr); gap:14px; align-items:start; }

/* Activity feed */
#view-dashboard .nd-activity-card { background:var(--nd-card); border:1px solid var(--nd-line); border-radius:14px; padding:16px 18px; }
#view-dashboard .nd-activity-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#view-dashboard .nd-activity-head strong { font-size:13px; font-weight:700; color:var(--nd-ink); }
#view-dashboard .nd-activity-head a { font-size:11.5px; color:var(--nd-teal); cursor:pointer; text-decoration:none; }
#view-dashboard .nd-feed { display:flex; flex-direction:column; gap:1px; }
#view-dashboard .nd-feed-item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
#view-dashboard .nd-feed-item:last-child { border-bottom:none; }
#view-dashboard .nd-feed-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
#view-dashboard .nd-feed-icon.g { background:rgba(61,214,140,.1); }
#view-dashboard .nd-feed-icon.a { background:rgba(245,158,11,.1); }
#view-dashboard .nd-feed-icon.b { background:rgba(59,130,246,.1); }
#view-dashboard .nd-feed-icon.m { background:rgba(255,255,255,.05); }
#view-dashboard .nd-feed-body { flex:1; min-width:0; }
#view-dashboard .nd-feed-text { font-size:12.5px; color:var(--nd-ink); line-height:1.4; }
#view-dashboard .nd-feed-text strong { font-weight:700; }
#view-dashboard .nd-feed-badge { display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; margin-left:5px; vertical-align:middle; }
#view-dashboard .nd-feed-badge.g { background:rgba(61,214,140,.14); color:#3dd68c; }
#view-dashboard .nd-feed-badge.a { background:rgba(245,158,11,.14); color:#f59e0b; }
#view-dashboard .nd-feed-badge.b { background:rgba(59,130,246,.14); color:#3b82f6; }
#view-dashboard .nd-feed-badge.m { background:rgba(255,255,255,.08); color:var(--nd-mut); }
#view-dashboard .nd-feed-meta { font-size:11px; color:var(--nd-mut); margin-top:2px; }
#view-dashboard .nd-feed-empty { color:var(--nd-mut); font-size:12.5px; padding:12px 0; text-align:center; }

/* Center column: progress + action needed */
#view-dashboard .nd-center-col { display:flex; flex-direction:column; gap:12px; }
#view-dashboard .nd-prog-card { background:var(--nd-card); border:1px solid var(--nd-line); border-radius:14px; padding:14px 16px; }
#view-dashboard .nd-prog-card-title { font-size:13px; font-weight:700; color:var(--nd-ink); margin-bottom:4px; }
#view-dashboard .nd-prog-card-date { font-size:11px; color:var(--nd-mut); margin-bottom:14px; }
#view-dashboard .nd-prog-rows { display:flex; flex-direction:column; gap:12px; }
#view-dashboard .nd-prow { display:flex; align-items:center; gap:10px; }
#view-dashboard .nd-prow-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
#view-dashboard .nd-prow-body { flex:1; }
#view-dashboard .nd-prow-label { display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--nd-ink); margin-bottom:5px; }
#view-dashboard .nd-prow-pct { font-weight:800; }
#view-dashboard .nd-prow-pct.g { color:#3dd68c; }
#view-dashboard .nd-prow-pct.a { color:#f59e0b; }
#view-dashboard .nd-prow-pct.b { color:#3b82f6; }
#view-dashboard .nd-prow-track { height:5px; background:rgba(255,255,255,.05); border-radius:3px; }
#view-dashboard .nd-prow-fill { height:100%; border-radius:3px; }

#view-dashboard .nd-action-card { background:var(--nd-card); border:1px solid rgba(245,158,11,.18); border-radius:14px; padding:14px 16px; }
#view-dashboard .nd-action-card-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
#view-dashboard .nd-action-card-title { font-size:13px; font-weight:700; color:#f59e0b; }
#view-dashboard .nd-arow { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; background:rgba(245,158,11,.05); border:1px solid rgba(245,158,11,.09); cursor:pointer; transition:background .12s; margin-bottom:6px; }
#view-dashboard .nd-arow:last-child { margin-bottom:0; }
#view-dashboard .nd-arow:hover { background:rgba(245,158,11,.1); }
#view-dashboard .nd-arow-lbl { flex:1; font-size:12px; color:var(--nd-ink); }
#view-dashboard .nd-arow-count { font-size:15px; font-weight:800; color:#f59e0b; }
#view-dashboard .nd-arow-arr { color:var(--nd-mut); font-size:14px; }

/* Data quality panel (right col) */
#view-dashboard .nd-dq-card { background:var(--nd-card); border:1px solid var(--nd-line); border-radius:14px; padding:14px 16px; }
#view-dashboard .nd-dq-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#view-dashboard .nd-dq-title { font-size:13px; font-weight:700; color:var(--nd-ink); }
#view-dashboard .nd-dq-fix { font-size:11.5px; color:var(--nd-teal); cursor:pointer; }
#view-dashboard .nd-dq-items { display:flex; flex-direction:column; gap:8px; }
#view-dashboard .nd-dq-item { padding:10px 12px; border-radius:10px; border-left:3px solid; }
#view-dashboard .nd-dq-item.r { background:rgba(239,68,68,.06); border-left-color:#ef4444; }
#view-dashboard .nd-dq-item.a { background:rgba(245,158,11,.06); border-left-color:#f59e0b; }
#view-dashboard .nd-dq-item.g { background:rgba(61,214,140,.05); border-left-color:#3dd68c; }
#view-dashboard .nd-dq-item-top { display:flex; justify-content:space-between; align-items:flex-start; }
#view-dashboard .nd-dq-item-title { font-size:12.5px; font-weight:700; color:var(--nd-ink); }
#view-dashboard .nd-dq-item-count { font-size:18px; font-weight:900; line-height:1; }
#view-dashboard .nd-dq-item-count.r { color:#ef4444; }
#view-dashboard .nd-dq-item-count.a { color:#f59e0b; }
#view-dashboard .nd-dq-item-count.g { color:#3dd68c; }
#view-dashboard .nd-dq-item-sub { font-size:11px; color:var(--nd-mut); margin-top:2px; }

/* Analytics 2-col */
#view-dashboard .nd-analytics-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; align-items:start; }
#view-dashboard .nd-weekly-rows { display:flex; flex-direction:column; gap:10px; }
#view-dashboard .nd-weekly-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); }
#view-dashboard .nd-weekly-row:last-child { border-bottom:none; }
#view-dashboard .nd-weekly-label { font-size:12.5px; color:var(--nd-ink); display:flex; align-items:center; gap:8px; }
#view-dashboard .nd-weekly-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#view-dashboard .nd-weekly-val { font-size:14px; font-weight:800; }

/* Live badge */
#view-dashboard .nd-live-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; background:rgba(61,214,140,.08); border:1px solid rgba(61,214,140,.2); color:#3dd68c; }
#view-dashboard .nd-live-dot { width:6px; height:6px; border-radius:50%; background:#3dd68c; animation:nd-blink 1.6s ease-in-out infinite; }

/* Section row */
#view-dashboard .nd-section-row { display:flex; align-items:center; gap:10px; }
#view-dashboard .nd-section-label { font-size:10.5px; font-weight:600; color:var(--nd-mut); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
#view-dashboard .nd-section-line { flex:1; height:1px; background:rgba(255,255,255,.07); }
#view-dashboard .nd-head-actions { display:flex; gap:6px; margin-left:auto; }
#view-dashboard .nd-head-actions button { padding:6px 12px; font-size:11.5px; font-weight:600; }

/* Inspection table at bottom */
#view-dashboard .nd-filter { display:grid; grid-template-columns:1fr 180px auto; gap:10px; margin-bottom:12px; }
#view-dashboard .nd-filter input, #view-dashboard .nd-filter select { font-size:12.5px; padding:8px 10px; }
#view-dashboard .nd-filter button { padding:8px 14px; font-size:12.5px; }
#view-dashboard .nd-table { border:1px solid rgba(255,255,255,.07); border-radius:10px; overflow:hidden; }

/* Dashboard audit register: independently scrollable, without trapping page scroll. */
#view-dashboard .dashboard-audit-grid-card { overflow: visible; }
#view-dashboard .dashboard-audit-grid-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 12px; }
#view-dashboard .dashboard-audit-grid-head h2 { margin: 3px 0 4px; font-size: 20px; }
#view-dashboard .dashboard-audit-grid-head p { margin: 0; color: var(--nd-mut); font-size: 11.5px; }
#view-dashboard .dashboard-latest-slip { min-width: 260px; padding: 11px 13px; border: 1px solid rgba(61,214,140,.2); border-radius: 11px; background: rgba(61,214,140,.06); display: grid; gap: 2px; }
#view-dashboard .dashboard-latest-slip span { color: #3dd68c; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#view-dashboard .dashboard-latest-slip strong { font-size: 13px; }
#view-dashboard .dashboard-latest-slip small { color: var(--nd-mut); font-size: 10.5px; }
#view-dashboard .dashboard-audit-boundary { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; padding: 8px 10px; border-left: 3px solid #3b82f6; border-radius: 7px; background: rgba(59,130,246,.06); font-size: 10.5px; }
#view-dashboard .dashboard-audit-boundary strong { color: #7db2ff; white-space: nowrap; }
#view-dashboard .dashboard-audit-boundary span { color: var(--nd-mut); }
#view-dashboard .dashboard-audit-filter { grid-template-columns: minmax(240px,1fr) minmax(190px,.7fr) 140px 145px 145px 145px 145px auto auto; }
#view-dashboard .dashboard-audit-filter input[type="date"]:disabled { opacity: .45; cursor: not-allowed; }
#view-dashboard .dashboard-audit-resultbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 1px 8px; color: var(--nd-mut); font-size: 10.5px; }
#view-dashboard .dashboard-audit-resultbar strong { color: var(--nd-ink); font-size: 12px; }
#view-dashboard .dashboard-audit-table { max-height: 540px; overflow: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; }
#view-dashboard .dashboard-audit-table table { min-width: 1320px; }
#view-dashboard .dashboard-audit-table thead { position: sticky; top: 0; z-index: 3; }
#view-dashboard .dashboard-audit-table th { background: #1c2028 !important; white-space: nowrap; }
#view-dashboard .dashboard-audit-row { cursor: pointer; }
#view-dashboard .dashboard-audit-row:hover td { background: rgba(61,214,140,.045) !important; }
#view-dashboard .dashboard-audit-row td { vertical-align: middle; }
#view-dashboard .dashboard-audit-row td small { display: block; margin-top: 2px; color: var(--nd-mut); font-size: 9.5px; }
#view-dashboard .dashboard-audit-pager { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; color: var(--nd-mut); font-size: 10.5px; }
#view-dashboard .dashboard-audit-pager > div { display: flex; gap: 7px; }
#view-weight-slip { min-height: 100%; overflow-y: auto; }
#view-weight-slip .weight-slip-page { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
#view-weight-slip .weight-slip-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#view-weight-slip .weight-slip-page-head h1 { margin: 4px 0; font-size: 24px; }
#view-weight-slip .weight-slip-page-head p { margin: 0; color: var(--nd-mut); font-size: 12px; }
#view-weight-slip .dashboard-latest-slip { min-width: 260px; padding: 11px 13px; border: 1px solid rgba(61,214,140,.2); border-radius: 11px; background: rgba(61,214,140,.06); display: grid; gap: 2px; }
#view-weight-slip .dashboard-latest-slip span { color: #3dd68c; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#view-weight-slip .dashboard-latest-slip strong { font-size: 13px; }
#view-weight-slip .dashboard-latest-slip small { color: var(--nd-mut); font-size: 10.5px; }
#view-weight-slip .dashboard-audit-boundary { display: flex; gap: 9px; align-items: center; padding: 8px 10px; border-left: 3px solid #3b82f6; border-radius: 7px; background: rgba(59,130,246,.06); font-size: 10.5px; }
#view-weight-slip .dashboard-audit-boundary strong { color: #7db2ff; white-space: nowrap; }
#view-weight-slip .dashboard-audit-boundary span { color: var(--nd-mut); }
#view-weight-slip .weight-slip-workflow-guide { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--nd-line); border-radius: 10px; background: rgba(61,214,140,.045); color: var(--nd-mut); font-size: 11px; font-weight: 700; }
#view-weight-slip .weight-slip-workflow-guide strong { margin-right: 4px; color: var(--nd-ink); }
#view-weight-slip .weight-slip-workflow-guide span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#view-weight-slip .weight-slip-workflow-guide b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(61,214,140,.16); color: #3dd68c; font-size: 10px; }
#view-weight-slip .weight-slip-workflow-guide i { color: #3dd68c; font-style: normal; }
#view-weight-slip .weight-slip-submit-action, #view-weight-slip .weight-slip-approval-action { display: inline-flex; align-items: center; gap: 4px; background: #3dd68c !important; border-color: #3dd68c !important; color: #0d0f14 !important; }
#view-weight-slip .weight-slip-submit-action:hover, #view-weight-slip .weight-slip-approval-action:hover { background: #2fc478 !important; border-color: #2fc478 !important; }
#view-weight-slip .weight-slip-awaiting-action { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 8px; border: 1px solid rgba(243,196,111,.35); border-radius: 8px; background: rgba(243,196,111,.1); color: #80601a; font-size: 11px; font-weight: 800; white-space: nowrap; }
#view-weight-slip .dashboard-audit-filter { display: grid; grid-template-columns: minmax(280px, 1.8fr) minmax(190px, 1fr) 130px 130px 130px 76px 76px; gap: 8px; margin: 0; align-items: center; }
#view-weight-slip .dashboard-audit-filter input,
#view-weight-slip .dashboard-audit-filter select,
#view-weight-slip .dashboard-audit-filter button { min-width: 0; height: 38px; padding: 8px 10px; font-size: 12px; }
#view-weight-slip .dashboard-audit-filter input[type="date"]:disabled { display: none; }
#view-weight-slip .dashboard-audit-filter button { padding-inline: 16px; }
#view-weight-slip .dashboard-audit-resultbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 1px 8px; color: var(--nd-mut); font-size: 10.5px; }
#view-weight-slip .dashboard-audit-resultbar strong { color: var(--nd-ink); font-size: 12px; }
#view-weight-slip .dashboard-audit-table { min-height: 360px; overflow: visible; }
#view-weight-slip .dashboard-audit-table { max-height: none; }
#view-weight-slip .dashboard-audit-table table { min-width: 1320px; }
#view-weight-slip .dashboard-audit-table thead { position: sticky; top: 0; z-index: 3; }
#view-weight-slip .dashboard-audit-table th { background: #1c2028 !important; white-space: nowrap; }
#view-weight-slip .dashboard-audit-table th:last-child, #view-weight-slip .dashboard-audit-table td.row { min-width: 225px; }
#view-weight-slip .dashboard-audit-row { cursor: pointer; }
#view-weight-slip .dashboard-audit-row:hover td { background: rgba(61,214,140,.045) !important; }
#view-weight-slip .dashboard-audit-row td { vertical-align: middle; }
#view-weight-slip .dashboard-audit-row td.row { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; white-space: nowrap; }
#view-weight-slip .dashboard-audit-row td.row > button { flex: 0 0 auto; min-height: 28px; padding: 5px 8px; border: 0; border-radius: 7px; box-shadow: none; font-size: 11px; font-weight: 800; line-height: 1; }
#view-weight-slip .dashboard-audit-row td.row > button.secondary { background: transparent !important; color: var(--nd-ink) !important; }
#view-weight-slip .dashboard-audit-row td.row > button.secondary:hover { background: rgba(61,214,140,.12) !important; color: var(--nd-ink) !important; }
#view-weight-slip .dashboard-audit-row td.row > button.danger { background: rgba(239,68,68,.08) !important; color: #b84a4a !important; }
#view-weight-slip .dashboard-audit-row td.row > button.danger:hover { background: rgba(239,68,68,.15) !important; color: #a33d3d !important; }
#view-weight-slip .dashboard-audit-row td.row > .weight-slip-submit-action, #view-weight-slip .dashboard-audit-row td.row > .weight-slip-approval-action { padding-inline: 9px; }
#view-weight-slip .dashboard-audit-row td.row > .weight-slip-pdf-pending, #view-weight-slip .dashboard-audit-row td.row > .weight-slip-action-note, #view-weight-slip .dashboard-audit-row td.row > .weight-slip-awaiting-action { border: 0; border-radius: 7px; background: transparent; padding: 5px 6px; }
#view-weight-slip .dashboard-audit-row td small { display: block; margin-top: 2px; color: var(--nd-mut); font-size: 9.5px; }
#view-weight-slip .dashboard-audit-pager { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; color: var(--nd-mut); font-size: 10.5px; }
#view-weight-slip .dashboard-audit-pager > div { display: flex; gap: 7px; }
#view-weight-slip .dashboard-audit-pager { margin-top: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#view-weight-slip .dashboard-audit-pager > div { margin-left: auto; }

.audit-detail-intro { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px solid rgba(61,214,140,.18); border-radius: 12px; background: rgba(61,214,140,.055); }
.audit-detail-intro > div { display: grid; gap: 3px; }
.audit-detail-intro span { color: #3dd68c; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.audit-detail-intro strong { font-size: 16px; }
.audit-detail-intro small { color: var(--muted); font-size: 10.5px; }
.audit-workflow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.audit-workflow article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.02); }
.audit-workflow article i { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 900; }
.audit-workflow article.done i { color: #071c12; background: #3dd68c; }
.audit-workflow article.pending i { color: var(--muted); border: 1px solid var(--line); }
.audit-workflow article div { display: grid; gap: 2px; min-width: 0; }
.audit-workflow article strong { font-size: 10.5px; }
.audit-workflow article small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.audit-readiness-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.audit-readiness-grid article { padding: 10px; border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 3px; }
.audit-readiness-grid article span { font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.audit-readiness-grid article strong { font-size: 10.5px; }
.audit-readiness-grid article.ready { border-color: rgba(61,214,140,.22); background: rgba(61,214,140,.05); }
.audit-readiness-grid article.ready span { color: #3dd68c; }
.audit-readiness-grid article.gap { border-color: rgba(245,158,11,.24); background: rgba(245,158,11,.05); }
.audit-readiness-grid article.gap span { color: #f59e0b; }
#drawerBody .metric-card.audit-metric-card { display: grid; grid-template-rows: auto 1fr; min-height: 92px; }
#drawerBody .metric-card.audit-metric-card > span { display: inline-flex !important; align-items: center; gap: 7px; min-width: 0; margin-bottom: 8px !important; font-size: 12px !important; font-weight: 800; letter-spacing: .015em; }
#drawerBody .metric-card.audit-metric-card > strong { align-self: end; margin: 0 !important; font-size: clamp(18px, 1.55vw, 24px) !important; line-height: 1.12; overflow-wrap: anywhere; }
.audit-metric-emoji { display: inline-grid !important; place-items: center; width: 18px; min-width: 18px; color: inherit !important; font-size: 14px !important; line-height: 1; }
.audit-detail-actions { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.audit-detail-actions > button { flex: 0 1 250px; width: auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-weight: 800; }
.audit-detail-actions > button .material-symbols-rounded { font-size: 18px; }
.audit-detail-actions > .audit-detail-action-primary { background: #2e9e52 !important; border-color: #2e9e52 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(46,158,82,.2); }
.audit-detail-actions > .audit-detail-action-primary:hover,
.audit-detail-actions > .audit-detail-action-primary:focus-visible { background: #247d40 !important; border-color: #247d40 !important; }
.audit-detail-actions > .audit-detail-action:not(.audit-detail-action-primary) { background: #eaf5ff !important; border-color: #8fc5eb !important; color: #17668f !important; box-shadow: 0 4px 12px rgba(23,102,143,.1); }
.audit-detail-actions > .audit-detail-action:not(.audit-detail-action-primary):hover,
.audit-detail-actions > .audit-detail-action:not(.audit-detail-action-primary):focus-visible { background: #dceeff !important; border-color: #58a7d7 !important; }

/* Plain-language audit register: readable first, technical evidence on demand. */
.audit-log-page { overflow: hidden; }
.audit-log-page > .panel-title { align-items: flex-start; }
.audit-log-page > .panel-title h2 { margin: 4px 0 5px; }
.audit-log-page > .panel-title p { max-width: 620px; }
.audit-log-page > .panel-title > button { display: inline-flex; align-items: center; gap: 6px; }
.audit-log-page > .panel-title .material-symbols-rounded,
.audit-log-page .filter-bar .material-symbols-rounded,
.audit-log-page .audit-log-table .material-symbols-rounded { font-size: 16px; vertical-align: middle; }
.audit-log-guidance { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 13px; border-left: 3px solid #3b82f6; border-radius: 8px; background: rgba(59,130,246,.07); color: var(--muted); font-size: 11px; line-height: 1.45; }
.audit-log-guidance > .material-symbols-rounded { flex: 0 0 auto; color: #2677b8; font-size: 18px; }
.audit-log-guidance div { display: grid; gap: 2px; }
.audit-log-guidance strong { color: var(--ink); font-size: 11.5px; }
.audit-log-page .filter-bar { align-items: center; }
.audit-log-page .filter-bar input,
.audit-log-page .filter-bar select,
.audit-log-page .filter-bar button { min-height: 38px; }
.audit-log-page .filter-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.audit-log-resultbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 15px 1px 8px; color: var(--muted); font-size: 10.5px; }
.audit-log-resultbar strong { color: var(--ink); font-size: 12px; }
.audit-log-table { max-height: 590px; overflow: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; }
.audit-log-table table { min-width: 1050px; }
.audit-log-table thead { position: static; }
.audit-log-table th { position: sticky; top: 0; z-index: 3; white-space: nowrap; background: #e5f3e8; color: #174c2b; box-shadow: inset 0 -1px 0 #b8d7c0, 0 2px 5px rgba(26, 80, 47, .08); }
.audit-log-table th:nth-child(1) { width: 145px; }
.audit-log-table th:nth-child(2) { width: 190px; }
.audit-log-table th:nth-child(3) { width: 265px; }
.audit-log-table th:nth-child(4) { width: 350px; }
.audit-log-row { cursor: pointer; }
.audit-log-row:hover td { background: rgba(43,141,78,.045) !important; }
.audit-log-row td { vertical-align: middle; }
.audit-log-row td small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.audit-log-time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-log-actor { color: var(--ink); }
.audit-log-action strong { color: var(--ink); }
.audit-log-affected strong { color: var(--ink); }
.audit-log-table td:last-child { white-space: nowrap; }
.audit-log-table td:last-child button { display: inline-flex; align-items: center; gap: 5px; }
.audit-log-empty { padding: 30px !important; color: var(--muted); text-align: center; }
.audit-detail-plain { display: grid; gap: 14px; }
.audit-detail-hero { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid rgba(43,141,78,.2); border-radius: 12px; background: rgba(43,141,78,.06); }
.audit-detail-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #2b8d4e; color: #fff; font-size: 19px; }
.audit-detail-hero > div { display: grid; gap: 3px; min-width: 0; }
.audit-detail-hero .eyebrow { margin: 0; }
.audit-detail-hero h3 { margin: 1px 0 2px; font-size: 17px; line-height: 1.2; }
.audit-detail-hero p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.audit-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.audit-detail-meta > div { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.audit-detail-meta span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.audit-detail-meta strong { overflow-wrap: anywhere; color: var(--ink); font-size: 11px; line-height: 1.35; }
.audit-detail-meta small { overflow-wrap: anywhere; color: var(--muted); font-size: 9.5px; }
.audit-detail-section { display: grid; gap: 9px; }
.audit-detail-section-title { display: flex; align-items: center; gap: 8px; }
.audit-detail-section-title > .material-symbols-rounded { color: #2b8d4e; font-size: 18px; }
.audit-detail-section-title > div { display: grid; gap: 1px; }
.audit-detail-section-title h4 { margin: 0; color: var(--ink); font-size: 12px; }
.audit-detail-section-title p { margin: 0; color: var(--muted); font-size: 10px; }
.audit-detail-change-list,
.audit-detail-check-list { display: grid; gap: 7px; }
.audit-detail-change { display: grid; grid-template-columns: minmax(125px,.6fr) minmax(0,1.4fr); gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.audit-detail-change span { color: var(--muted); font-size: 10px; }
.audit-detail-change strong { color: var(--ink); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
.audit-detail-check { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.audit-detail-check > .material-symbols-rounded { flex: 0 0 auto; margin-top: 1px; font-size: 17px; }
.audit-detail-check.is-good { border-color: rgba(43,141,78,.22); background: rgba(43,141,78,.055); }
.audit-detail-check.is-good > .material-symbols-rounded { color: #2b8d4e; }
.audit-detail-check.is-neutral > .material-symbols-rounded { color: #2677b8; }
.audit-detail-check > div { display: grid; gap: 2px; min-width: 0; }
.audit-detail-check strong { color: var(--ink); font-size: 10.5px; }
.audit-detail-check span:not(.material-symbols-rounded) { color: var(--muted); font-size: 10px; line-height: 1.4; }
.audit-detail-drawer-overlay { align-items: flex-start; justify-content: center; padding: 28px 18px; }
.audit-detail-drawer-overlay .drawer { width: min(720px, calc(100vw - 36px)); height: auto; max-height: calc(100vh - 56px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 56px rgba(0, 0, 0, .24); }
.audit-detail-drawer-overlay .drawer-head { padding: 14px 16px; }
.audit-detail-drawer-overlay .drawer-body { padding: 14px 16px 16px; gap: 12px; }
.notification-gap-fix { display: grid; gap: 14px; }
.notification-gap-fix-intro { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid rgba(43,141,78,.2); border-radius: 10px; background: rgba(43,141,78,.06); }
.notification-gap-fix-intro > .material-symbols-rounded { color: #2b8d4e; font-size: 22px; }
.notification-gap-fix-intro strong, .notification-gap-fix-next strong { display: block; color: var(--ink); font-size: 12px; }
.notification-gap-fix-intro p, .notification-gap-fix-next span { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.notification-gap-fix-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.notification-gap-fix-details > div { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.notification-gap-fix-details dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.notification-gap-fix-details dd { margin: 4px 0 0; color: var(--ink); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.notification-gap-fix-next { padding: 10px 12px; border-left: 3px solid #2b8d4e; border-radius: 7px; background: #f3faf5; }
.notification-gap-fix-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.account-map-manage-button { min-width: 76px; gap: 5px; }
@media (max-width: 700px) { .audit-detail-drawer-overlay { padding: 0; } .audit-detail-drawer-overlay .drawer { width: 100vw; max-height: 100vh; border-radius: 0; } .notification-gap-fix-details { grid-template-columns: 1fr; } }
.audit-technical-details { border-top: 1px solid var(--line); padding-top: 10px; }
.audit-technical-details summary { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.audit-technical-details summary:hover { color: var(--ink); }
.audit-technical-details summary .material-symbols-rounded { font-size: 15px; }
.audit-technical-details > p { margin: 8px 0; color: var(--muted); font-size: 10px; }
.audit-technical-details .json-block { max-height: 270px; margin: 0; overflow: auto; }
@media (max-width: 1100px) {
  #view-dashboard .dashboard-audit-filter { grid-template-columns: 1fr 1fr; }
  #view-weight-slip .dashboard-audit-filter { grid-template-columns: minmax(220px, 1.6fr) minmax(170px, 1fr) 125px auto auto; }
  .audit-workflow { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  #view-dashboard .dashboard-audit-grid-head { flex-direction: column; }
  #view-dashboard .dashboard-latest-slip { min-width: 0; width: 100%; }
  #view-dashboard .dashboard-audit-filter { grid-template-columns: 1fr; }
  #view-weight-slip .weight-slip-page { padding: 14px; }
  #view-weight-slip .weight-slip-page-head { flex-direction: column; }
  #view-weight-slip .dashboard-latest-slip { min-width: 0; width: 100%; }
  #view-weight-slip .dashboard-audit-filter { grid-template-columns: 1fr 1fr; }
  #view-weight-slip .dashboard-audit-filter input:first-child { grid-column: 1 / -1; }
  #view-dashboard .dashboard-audit-resultbar { align-items: flex-start; flex-direction: column; }
  .audit-readiness-grid { grid-template-columns: 1fr; }
  .audit-detail-actions { align-items: stretch; flex-direction: column; }
  .audit-detail-actions > button { flex: 1 1 auto; width: 100%; }
  .audit-detail-meta { grid-template-columns: 1fr; }
  .audit-detail-change { grid-template-columns: 1fr; gap: 3px; }
}

/* Settings contains only values saved here; operational modules remain separate. */
.settings-configuration-intro { padding: 24px 28px; border: 1px solid #bfe7ce; border-radius: 18px; background: linear-gradient(135deg, #ecfaf0, #f8fcf8); }
.settings-configuration-intro h2 { margin: 4px 0 8px; font-size: clamp(28px, 3vw, 40px); color: #123725; }
.settings-configuration-intro p { margin: 0; max-width: 720px; color: var(--muted); }
.settings-system-rules, .settings-masterdata, .settings-personal { margin-top: 16px; }
.settings-system-form { display: grid; gap: 22px; }
.settings-rule-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.settings-rule-head, .settings-rule-row { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr) minmax(185px, .75fr); align-items: center; gap: 16px; padding: 13px 16px; }
.settings-rule-head { background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.settings-rule-row { border-top: 1px solid var(--line); }
.settings-rule-row strong { line-height: 1.35; }
.settings-rule-effect { color: var(--muted); font-size: 13px; line-height: 1.4; }
.settings-rule-row label { margin: 0; }
.settings-rule-row select { width: 100%; }
.settings-template-heading { border-top: 1px solid var(--line); padding-top: 20px; }
.settings-template-heading h3 { margin: 4px 0 5px; }
.settings-template-heading p { margin: 0; max-width: 760px; }
.settings-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.settings-template-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.settings-template-card h4 { margin: 0; font-size: 15px; }
.settings-template-card label, .settings-tracking-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.settings-template-card textarea { resize: vertical; min-height: 76px; }
.settings-tracking-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(160px, .6fr) minmax(220px, .8fr); gap: 12px; }
.settings-save-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; }
.settings-feedback { color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-save-row button { white-space: nowrap; }
@media (max-width: 900px) {
  .settings-configuration-intro { padding: 20px; }
  .settings-rule-head { display: none; }
  .settings-rule-row { grid-template-columns: 1fr; gap: 8px; padding: 15px; }
  .settings-template-grid, .settings-tracking-grid { grid-template-columns: 1fr; }
  .settings-save-row { align-items: stretch; flex-direction: column; }
  .settings-save-row button { width: 100%; }
}

/* Responsive */
@media (max-width:1200px) {
  #view-dashboard .nd-detail-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  #view-dashboard .nd-dq-card { grid-column:1/-1; }
}
@media (max-width:900px) {
  #view-dashboard .nd-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-dashboard .nd-detail-grid { grid-template-columns:1fr; }
  #view-dashboard .nd-analytics-grid { grid-template-columns:1fr; }
}

/* ============================================================
   GLOBAL DARK OVERRIDES — drawers, modals, all pages
   ============================================================ */

/* ── Drawer shell ── */
#detailDrawerOverlay { background: rgba(0,0,0,.72) !important; }
#detailDrawer { background: #111318 !important; color: #f8fafc !important; border-left: 1px solid rgba(255,255,255,.08) !important; }
#detailDrawer .drawer-head { background: #111318 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
#detailDrawer .drawer-head h2 { color: #f8fafc !important; }
#detailDrawer .eyebrow { color: #3dd68c !important; }
#detailDrawer #drawerClose { background: rgba(255,255,255,.06) !important; color: #f8fafc !important; border: 1px solid rgba(255,255,255,.12) !important; }
#detailDrawer .drawer-body { background: #111318 !important; }

/* Everything inside drawer body */
#drawerBody { color: #f8fafc !important; }
#drawerBody p, #drawerBody li { color: #94a3b8 !important; }
#drawerBody h2, #drawerBody h3, #drawerBody h4 { color: #f8fafc !important; }
#drawerBody label { color: #94a3b8 !important; }
#drawerBody strong { color: #f8fafc; }
#drawerBody small, #drawerBody .muted { color: #64748b !important; }
#drawerBody .eyebrow { color: #3dd68c !important; }

#drawerBody .metric-card { background: #1c1f29 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; padding: 14px 16px !important; }
#drawerBody .metric-card span { display: block; color: #64748b !important; font-size: 11px !important; margin-bottom: 6px !important; }
#drawerBody .metric-card strong { font-size: 28px !important; font-weight: 900 !important; color: #f8fafc !important; }
#drawerBody .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 12px 0; }

#drawerBody table { background: transparent !important; width: 100%; }
#drawerBody th { background: rgba(255,255,255,.03) !important; color: #64748b !important; font-size: 11px !important; font-weight: 600 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; padding: 9px 10px !important; }
#drawerBody td { color: #f8fafc !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; background: transparent !important; padding: 9px 10px !important; font-size: 12.5px !important; }
#drawerBody tr:hover td { background: rgba(255,255,255,.03) !important; }
#drawerBody .data-grid, #drawerBody .table-wrap { background: #161920 !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 10px !important; overflow: hidden !important; }

#drawerBody .panel { background: #1c1f29 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; }
#drawerBody .panel-title h2, #drawerBody .panel-title h3 { color: #f8fafc !important; }

#drawerBody input, #drawerBody select, #drawerBody textarea { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f8fafc !important; border-radius: 8px !important; }
#drawerBody input::placeholder { color: #64748b !important; }
#drawerBody option { background: #1c1f29 !important; }

#drawerBody button.secondary, #drawerBody button.ghost, #drawerBody button.compact-btn { background: rgba(255,255,255,.07) !important; color: #f8fafc !important; border: 1px solid rgba(255,255,255,.12) !important; }
#drawerBody button:not(.secondary):not(.ghost):not(.compact-btn):not(.danger) { background: #3dd68c !important; color: #0d0f14 !important; }

#drawerBody .form-section { border-top: 1px solid rgba(255,255,255,.07) !important; padding-top: 14px !important; }
#drawerBody .profile-compact .field-label { color: #64748b !important; }
#drawerBody .profile-compact .field-value { color: #f8fafc !important; }
#drawerBody a { color: #3dd68c !important; }

/* ── Global page content dark ── */
.view { background: var(--bg); }
.panel { background: var(--panel) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.panel-title h2, .panel-title h3 { color: var(--ink) !important; }
.list-item { background: rgba(255,255,255,.03) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.list-item.active { background: rgba(61,214,140,.1) !important; border-color: rgba(61,214,140,.2) !important; }
.list-item:hover { background: rgba(255,255,255,.05) !important; }
.data-grid table, .table-wrap table { background: var(--panel) !important; }
.data-grid th, .table-wrap th { background: rgba(255,255,255,.03) !important; color: var(--muted) !important; border-bottom-color: var(--line) !important; }
.data-grid td, .table-wrap td { color: var(--ink) !important; border-bottom-color: var(--line) !important; }
.form-section { border-top-color: var(--line) !important; }
.form-section h3 { color: var(--ink) !important; }
.profile-compact .field-label { color: var(--muted) !important; }
.profile-compact .field-value { color: var(--ink) !important; }
.profile-compact .profile-field { border-bottom-color: var(--line) !important; }
.metric-card { background: var(--panel) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.metric-card span { color: var(--muted) !important; }
.metric-card strong { color: var(--ink) !important; }
input, select, textarea { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: var(--ink) !important; }
input::placeholder { color: var(--muted) !important; }
option { background: #1c1f29 !important; }
a { color: var(--green) !important; }

/* ============================================================
   PHASE 2 — CRM PAGE  2026-07-01
   ============================================================ */

#view-crm.view.active { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#view-crm .crm-shell { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 0; flex: 1; overflow: hidden; }
#view-crm .crm-list-panel { background: var(--sb-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#view-crm .crm-list-head { padding: 14px 14px 0; flex-shrink: 0; }
#view-crm .crm-list-head-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#view-crm .crm-list-head-title strong { font-size: 15px; font-weight: 800; color: var(--ink); }
#view-crm .crm-list-head-title span { font-size: 11px; color: var(--muted); }
#view-crm .crm-list-search { width: 100%; padding: 9px 12px; font-size: 13px; border-radius: 9px; margin-bottom: 10px; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important; color: var(--ink) !important; }
#view-crm .crm-master-strip { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
#view-crm .crm-master-strip-label { font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; padding: 2px 0 6px; }
#view-crm .crm-master-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); text-align: left; color: var(--ink) !important; font-weight: 500; transition: background .12s; }
#view-crm .crm-master-card:hover { background: rgba(255,255,255,.06) !important; }
#view-crm .crm-master-card strong { font-size: 12.5px; display: block; color: var(--ink); }
#view-crm .crm-master-card small { font-size: 11px; color: var(--muted); }
#view-crm .crm-list-body { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
#view-crm .crm-list-body::-webkit-scrollbar { width: 3px; }
#view-crm .crm-list-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* Customer list items */
#view-crm .list-item { border-radius: 9px !important; margin-bottom: 4px; padding: 10px 12px !important; cursor: pointer; border: 1px solid transparent !important; }
#view-crm .list-item.active { background: rgba(61,214,140,.1) !important; border-color: rgba(61,214,140,.2) !important; }
#view-crm .customer-list-row { display: flex; align-items: center; gap: 10px; }
#view-crm .customer-list-row strong { font-size: 13px; color: var(--ink); display: block; margin-bottom: 2px; }
#view-crm .customer-list-row small { color: var(--muted); font-size: 11px; }
#view-crm .customer-logo, #view-crm .logo-circle { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; object-fit: contain; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--green); border: 1px solid rgba(255,255,255,.08); }

/* CRM detail panel */
#view-crm .crm-detail-panel { background: var(--bg); display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
#view-crm .crm-detail-panel::-webkit-scrollbar { width: 4px; }
#view-crm .crm-detail-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
#view-crm #crmCustomerDetail { padding: 20px 24px; }
#view-crm .customer-title { display: flex; align-items: center; gap: 12px; }
#view-crm .crm-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
#view-crm .crm-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#view-crm .crm-detail-actions button { padding: 8px 14px; font-size: 12.5px; }
#view-crm .profile-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 20px; }
#view-crm .profile-compact .profile-field { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); grid-column: span 1; }
#view-crm .profile-compact .profile-field:nth-child(odd) { padding-right: 20px; }
#view-crm .panel-title { margin-bottom: 0; }
#view-crm .panel-title h2 { font-size: 20px; font-weight: 800; color: var(--ink); }
#view-crm .form-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
#view-crm .form-section h3 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
#view-crm .form-section.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
#view-crm table { width: 100%; }
#view-crm th { background: rgba(255,255,255,.03) !important; color: var(--muted) !important; font-size: 11px !important; border-bottom: 1px solid var(--line) !important; }
#view-crm td { color: var(--ink) !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; font-size: 12.5px !important; }

/* ============================================================
   PHASE 2 — CRM v2  (visual dashboard, no data grids)
   ============================================================ */

#view-crm.view.active { display: flex; flex-direction: column; padding: 0; overflow-y: auto; }
#view-crm::-webkit-scrollbar { width: 4px; }
#view-crm::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* Remove old crm-shell styles that may linger */
#view-crm .crm-shell { display: contents; }

/* ── Hero ── */
#view-crm .crm-v2 { display: flex; flex-direction: column; min-height: 100%; }
#view-crm .crm-hero {
  position: relative;
  background: linear-gradient(135deg, #071a0e 0%, #0d2818 35%, #0c1f34 70%, #0d0f14 100%);
  padding: 0 28px 0;
  overflow: hidden;
  flex-shrink: 0;
}
#view-crm .crm-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(61,214,140,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(167,139,250,.08) 0%, transparent 40%);
}
#view-crm .crm-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 32px 0 24px;
}
#view-crm .crm-greeting {
  font-size: 34px; font-weight: 900; color: #f8fafc; letter-spacing: -.02em; margin: 0 0 6px;
}
#view-crm .crm-date { font-size: 13px; color: rgba(255,255,255,.45); margin: 0; }
#view-crm .crm-hero-search-wrap { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
#view-crm .crm-hero-search {
  width: 280px; padding: 10px 16px; border-radius: 10px; font-size: 13.5px;
  background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.14) !important;
  color: #f8fafc !important; outline: none; transition: border-color .15s;
}
#view-crm .crm-hero-search:focus { border-color: rgba(61,214,140,.4) !important; background: rgba(255,255,255,.12) !important; }
#view-crm .crm-hero-search::placeholder { color: rgba(255,255,255,.35) !important; }
#view-crm .crm-hero-btn {
  padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: #3dd68c; color: #0d0f14; border: none; cursor: pointer; white-space: nowrap;
  transition: opacity .13s;
}
#view-crm .crm-hero-btn:hover { opacity: .88; }
#view-crm .crm-report-support-btn { background: rgba(255,255,255,.1); color: #e8f5eb; border: 1px solid rgba(255,255,255,.2); }
#view-crm .crm-report-support-btn:hover { background: rgba(255,255,255,.16); }

/* KPI bar inside hero */
#view-crm .crm-kpi-bar {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0;
}
#view-crm .crm-kpi {
  padding: 18px 24px;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 4px;
}
#view-crm .crm-kpi:last-child { border-right: none; }
#view-crm .crm-kpi span { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
#view-crm .crm-kpi strong { font-size: 30px; font-weight: 900; color: #f8fafc; line-height: 1; }

/* ── Charts row ── */
#view-crm .crm-charts-row {
  display: grid; grid-template-columns: 220px 220px minmax(0,1fr);
  gap: 16px; padding: 20px 28px;
  background: var(--bg); flex-shrink: 0;
}
#view-crm .crm-chart-card {
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 16px 18px;
}
#view-crm .crm-chart-wide { /* spans via grid */ }
#view-crm .crm-chart-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
#view-crm .crm-chart-head strong { font-size: 13px; font-weight: 700; color: var(--ink); }
#view-crm .crm-chart-sub { font-size: 11px; color: var(--muted); }
#view-crm .crm-chart-empty { color: var(--muted); font-size: 12.5px; }

/* Area horizontal bars */
#view-crm .crm-area-bars { display: flex; flex-direction: column; gap: 8px; }
#view-crm .crm-area-row { display: flex; align-items: center; gap: 8px; }
#view-crm .crm-area-label { font-size: 11px; color: var(--muted); width: 70px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
#view-crm .crm-area-track { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
#view-crm .crm-area-fill { height: 100%; background: #3dd68c; border-radius: 3px; transition: width .4s; }
#view-crm .crm-area-count { font-size: 11px; font-weight: 700; color: var(--ink); width: 24px; text-align: right; flex-shrink: 0; }

/* Enterprise type list */
#view-crm .crm-type-list { display: flex; flex-direction: column; gap: 9px; }
#view-crm .crm-type-row { display: flex; align-items: center; gap: 8px; }
#view-crm .crm-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#view-crm .crm-type-row span { flex: 1; font-size: 11.5px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-crm .crm-type-row strong { font-size: 13px; font-weight: 800; color: var(--ink); flex-shrink: 0; }
#view-crm .crm-type-bar-track { width: 40px; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; flex-shrink: 0; overflow: hidden; }
#view-crm .crm-type-bar-fill { height: 100%; border-radius: 2px; }

/* ── Customer filters ── */
#view-crm .crm-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 0 28px 18px;
}
#view-crm .crm-filter-bar label { display: grid; gap: 6px; min-width: 0; }
#view-crm .crm-filter-bar label > span {
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
#view-crm .crm-filter-bar select { width: 100%; min-width: 0; }
#view-crm .crm-filter-bar button { min-height: 40px; white-space: nowrap; }

/* ── Section row ── */
#view-crm .crm-section-row { display: flex; align-items: center; gap: 10px; padding: 4px 28px 12px; }
#view-crm .crm-section-label { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
#view-crm .crm-section-line { flex: 1; height: 1px; background: rgba(255,255,255,.07); }
#view-crm .crm-count { font-size: 11px; color: var(--muted); }

/* ── Customer card grid ── */
#view-crm .crm-customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; padding: 0 28px 28px;
}
#view-crm .crm-empty { color: var(--muted); font-size: 13px; padding: 20px 0; grid-column: 1/-1; text-align: center; }

#view-crm .crm-ccard {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 16px;
  cursor: pointer;
  transition: transform .14s, border-color .14s, box-shadow .14s;
  display: flex; flex-direction: column; gap: 10px;
}
#view-crm .crm-ccard:hover {
  transform: translateY(-3px);
  border-color: rgba(61,214,140,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
#view-crm .crm-ccard-hq { border-color: rgba(61,214,140,.18); }

#view-crm .crm-ccard-top { display: flex; align-items: center; gap: 10px; }
#view-crm .crm-ccard-info { flex: 1; min-width: 0; }
#view-crm .crm-ccard-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-crm .crm-ccard-info small { font-size: 10.5px; color: var(--muted); }

#view-crm .crm-ccard-badge { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
#view-crm .crm-ccard-badge.hq { background: rgba(61,214,140,.12); color: #3dd68c; border: 1px solid rgba(61,214,140,.2); }
#view-crm .crm-ccard-badge.branch { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.2); }

#view-crm .crm-ccard-meta { display: flex; gap: 12px; }
#view-crm .crm-ccard-meta span { font-size: 11px; color: var(--muted); }

#view-crm .crm-ccard-contact { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#view-crm .crm-ccard-foot { display: flex; gap: 6px; margin-top: 2px; }
#view-crm .crm-ccard-do, #view-crm .crm-ccard-portal {
  flex: 1; padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: background .12s; border: 1px solid;
}
#view-crm .crm-ccard-do { background: rgba(61,214,140,.1); color: #3dd68c; border-color: rgba(61,214,140,.2); }
#view-crm .crm-ccard-do:hover { background: rgba(61,214,140,.18); }
#view-crm .crm-ccard-portal { background: rgba(59,130,246,.1); color: #3b82f6; border-color: rgba(59,130,246,.2); }
#view-crm .crm-ccard-portal:hover { background: rgba(59,130,246,.18); }

/* Pagination */
#view-crm .crm-pagination { display: flex; align-items: center; justify-content: space-between; padding: 0 28px 28px; gap: 12px; }
#view-crm .crm-page-info { font-size: 12px; color: var(--muted); }
#view-crm .crm-page-btns { display: flex; gap: 4px; align-items: center; }
#view-crm .crm-page-btn { padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--ink); cursor: pointer; transition: background .12s; }
#view-crm .crm-page-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
#view-crm .crm-page-btn.active { background: #3dd68c; color: #0d0f14; border-color: #3dd68c; }
#view-crm .crm-page-btn:disabled { opacity: .35; cursor: default; }
#view-crm .crm-page-ellipsis { color: var(--muted); padding: 0 4px; font-size: 13px; }

/* Customer logo inside cards */
#view-crm .customer-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; flex-shrink: 0; }
#view-crm .logo-circle { width: 38px; height: 38px; border-radius: 9px; background: rgba(61,214,140,.1); border: 1px solid rgba(61,214,140,.2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #3dd68c; flex-shrink: 0; }

   MANAGER / APPROVAL PAGE
══════════════════════════════════════════════════════ */
.mgr-page { display: flex; flex-direction: column; gap: 18px; }
.mgr-hero { background: linear-gradient(135deg, rgba(61,214,140,.08) 0%, rgba(61,214,140,.02) 100%); border: 1px solid rgba(61,214,140,.12); border-radius: 18px; padding: 22px 26px; display: flex; align-items: center; gap: 20px; }
.mgr-hero-icon { font-size: 32px; }
.mgr-hero-text { flex: 1; }
.mgr-hero-text h2 { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 4px; }
.mgr-hero-text p { font-size: 13px; color: var(--muted); margin: 0; }
.mgr-hero-badge { background: rgba(61,214,140,.15); color: #3dd68c; border: 1px solid rgba(61,214,140,.25); border-radius: 10px; padding: 8px 18px; font-size: 28px; font-weight: 900; text-align: center; }
.mgr-hero-badge span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.mgr-empty { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 48px; text-align: center; color: var(--muted); font-size: 14px; }
.mgr-cards { display: flex; flex-direction: column; gap: 16px; }

/* Approval card new design */
.appr-card { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; }
.appr-card-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.appr-card-id { font-size: 15px; font-weight: 900; color: var(--ink); }
.appr-card-company { font-size: 13px; color: var(--muted); }
.appr-card-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.appr-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.appr-metrics.operational-review-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.appr-metric { padding: 14px 22px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(255,255,255,.06); }
.appr-metric:last-child { border-right: none; }
.appr-metric-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.appr-metric-val { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; }
.appr-metric-val.green { color: #3dd68c; }
.appr-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.appr-body-section { padding: 18px 22px; }
.appr-body-section:first-child { border-right: 1px solid rgba(255,255,255,.06); }
.appr-body-section h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 12px; }
.appr-mat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.appr-mat-table th { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
.appr-mat-table td { padding: 5px 6px; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.04); }
.appr-mat-table .material-zero-row td { color: var(--muted); }
.appr-checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.appr-check-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.appr-check-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; flex-shrink: 0; }
.appr-check-icon.ok { background: rgba(61,214,140,.15); color: #3dd68c; }
.appr-check-icon.fail { background: rgba(239,68,68,.12); color: #f87171; }
.appr-check-label { color: var(--ink); }
.appr-check-sub { color: var(--muted); font-size: 11px; margin-left: auto; }
.appr-evidence-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.appr-evidence-links a, .appr-evidence-links button { font-size: 11.5px; padding: 5px 12px; border-radius: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--ink); text-decoration: none; cursor: pointer; }
.appr-alert-box { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.appr-alert-box .alert-title { font-size: 11px; font-weight: 800; color: #f87171; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.appr-alert-item { font-size: 12px; color: #f87171; padding: 2px 0; }
.appr-trip-evidence { margin: 0 22px 18px; padding: 16px; border: 1px solid rgba(61,214,140,.28); border-radius: 12px; background: rgba(61,214,140,.06); }
.appr-trip-evidence.missing { border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.06); }
.appr-trip-evidence-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.appr-trip-evidence-head div { display: grid; gap: 4px; }
.appr-trip-evidence-head span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.appr-trip-evidence-head strong { color: var(--ink); font-size: 14px; }
.appr-trip-evidence-head b { color: #3dd68c; font-size: 10px; letter-spacing: .05em; }
.appr-trip-evidence.missing .appr-trip-evidence-head b { color: #f87171; }
.appr-trip-evidence p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.appr-trip-evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.appr-trip-evidence-grid div { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid rgba(61,214,140,.16); border-radius: 9px; background: rgba(255,255,255,.03); }
.appr-trip-evidence-grid span { color: var(--muted); font-size: 10px; }
.appr-trip-evidence-grid strong { color: var(--ink); font-size: 12px; }
.appr-trip-evidence-issues { display: grid; gap: 3px; margin: 10px 0; color: #f87171; font-size: 12px; }
.appr-trip-evidence-note { margin-top: 10px !important; }
.appr-trip-evidence-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.appr-trip-evidence-actions a, .appr-trip-evidence-actions button { padding: 6px 10px; border: 1px solid rgba(61,214,140,.28); border-radius: 7px; background: rgba(61,214,140,.08); color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.appr-trip-evidence-actions a:hover, .appr-trip-evidence-actions button:hover { border-color: rgba(61,214,140,.6); background: rgba(61,214,140,.16); }
.appr-trip-evidence.missing .appr-trip-evidence-actions a, .appr-trip-evidence.missing .appr-trip-evidence-actions button { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.appr-action-row { padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.15); }
.appr-action-row input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 12px; color: var(--ink); font-size: 13px; }
.appr-action-row input:focus { outline: none; border-color: rgba(61,214,140,.4); }
.appr-btn-approve { background: #3dd68c; color: #0d0f14; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 800; cursor: pointer; }
.appr-btn-approve:hover { background: #2fc478; }
.appr-btn-review { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); color: #f59e0b; border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.appr-btn-reject { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #f87171; border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.appr-btn-sec { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; }
.approval-pdf-recovery { margin-bottom:20px; padding:22px; border:1px solid #d7bf88; border-radius:16px; background:var(--panel); box-shadow:0 6px 24px rgba(25,64,43,.05); }
.approval-pdf-recovery header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
.approval-pdf-recovery h2 { margin:6px 0; font-size:20px; }
.approval-pdf-recovery h2 span { display:inline-flex; padding:2px 9px; border-radius:20px; background:#fff1d3; color:#80581b; font-size:13px; vertical-align:middle; }
.approval-pdf-recovery p { color:var(--muted); margin:0; font-size:13px; }
.approval-pdf-recovery header > .material-symbols-rounded { color:#a67624; background:#fff4dc; padding:12px; border-radius:12px; }
.approval-pdf-recovery td small { display:block; margin-top:5px; font-size:11px; max-width:330px; overflow-wrap:anywhere; }
.approval-pdf-recovery .data-grid { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.approval-pdf-status { display:inline-block; padding:4px 9px; border-radius:20px; background:#fff4dc; font-size:12px; color:#80581b; font-weight:700; }
.approval-pdf-recovery button.secondary.compact-btn { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:9px 14px; border:1px solid #9eb9aa !important; border-radius:8px; background:#f1f7f2 !important; color:#18583f !important; font-weight:700; white-space:nowrap; }
.approval-pdf-recovery button.secondary.compact-btn:hover { background:#e1eee5 !important; border-color:#458163 !important; }
.approval-pdf-recovery button.secondary.compact-btn:disabled { opacity:.65; cursor:wait; }
@media(max-width:700px) { .approval-pdf-recovery { padding:16px; } .approval-pdf-recovery .data-grid { overflow-x:auto; } .approval-pdf-recovery table { min-width:660px; } }

/* ═══════════════════════════════════════════════════════
   SORTING + OCR PAGE
══════════════════════════════════════════════════════ */
.sort-page { display: flex; flex-direction: column; gap: 18px; }
.sort-queue-section { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; }
.sort-queue-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sort-queue-head h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; flex: 1; }
.sort-queue-count { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 800; }
.sort-queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 16px; }
.sort-queue-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .14s; }
.sort-queue-card:hover { border-color: rgba(245,158,11,.25); }
.sort-queue-card-head { display: flex; align-items: center; gap: 8px; }
.sort-queue-card-head strong { font-size: 13px; font-weight: 800; color: var(--ink); flex: 1; }
.sort-queue-card .company { font-size: 12px; color: var(--muted); }
.sort-queue-card .time-label { font-size: 11px; color: var(--muted); }
.sort-queue-checklist { display: flex; flex-direction: column; gap: 4px; }
.sort-check { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sort-check .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sort-check .dot.green { background: #3dd68c; }
.sort-check .dot.amber { background: #f59e0b; }
.sort-check .dot.red { background: #f87171; }
.sort-check span { color: var(--muted); }
.sort-queue-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; }

.sort-panels { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 18px; }
.sort-card { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.sort-card h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.sort-form { display: flex; flex-direction: column; gap: 10px; }
.sort-form select, .sort-form input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 9px 12px; color: var(--ink); font-size: 13px; width: 100%; box-sizing: border-box; }
.sort-form select:focus, .sort-form input:focus { outline: none; border-color: rgba(61,214,140,.4); }
.sort-form .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sorting-intake-binding { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(61,214,140,.3); border-radius: 11px; background: rgba(61,214,140,.07); }
.sorting-intake-binding.is-locked { border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.07); }
.sorting-intake-binding > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sorting-intake-binding > strong { color: var(--ink); font-size: 13px; }
.sorting-intake-binding > small { color: var(--muted); font-size: 11px; }
.sorting-intake-binding button { justify-self: start; margin-top: 4px; }
.sorting-intake-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sorting-intake-fields:disabled { opacity: .48; }
.sort-activity-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(61,214,140,.28); border-radius: 12px; background: rgba(61,214,140,.055); }
.sort-activity-card label { display: grid; gap: 5px; min-width: 0; }
.sort-activity-card label > span { color: var(--ink); font-size: 11px; font-weight: 800; }
.sort-activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sort-activity-head div { display: grid; gap: 3px; }
.sort-activity-head strong { color: var(--ink); font-size: 13px; }
.sort-activity-head small, .sort-activity-note { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.sort-activity-head > span { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(61,214,140,.26); border-radius: 999px; background: rgba(61,214,140,.1); color: #3dd68c; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.operational-calculation { border-color: rgba(61,214,140,.28); background: rgba(61,214,140,.035); }
.operational-calculation td small { display: block; margin-top: 4px; color: var(--muted); }
.calculation-trail-evidence { display: grid; grid-template-columns: 1fr 1.25fr auto; gap: 12px; align-items: center; margin: 0 0 14px; padding: 12px; border: 1px solid rgba(61,214,140,.3); border-radius: 12px; background: rgba(61,214,140,.07); }
.calculation-trail-evidence > div { display: grid; gap: 4px; min-width: 0; }
.calculation-trail-evidence span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.calculation-trail-evidence strong { overflow-wrap: anywhere; }
.calculation-trail-evidence small { color: var(--muted); line-height: 1.35; }
.calculation-trail-evidence-legacy { border-color: var(--line); background: rgba(255,255,255,.02); }
.operational-source-notes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 8px 22px; margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--line); }
.operational-source-notes p { min-width: 0; max-width: none; margin: 0; line-height: 1.35; font-size: 12px; }
.operational-source-notes p + p { padding-left: 22px; border-left: 1px solid var(--line); }
.operational-source-notes strong { color: var(--ink); }
.sort-mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sort-mat-label { display: flex; flex-direction: column; gap: 4px; }
.sort-mat-label span { font-size: 11px; color: var(--muted); font-weight: 600; }
.sort-mat-label { align-items: flex-start; }
.sort-mat-label input { width: 9rem; max-width: 100%; padding: 8px 10px; }
.sort-form button[type=submit] { background: #3dd68c; color: #0d0f14; border: none; border-radius: 9px; padding: 10px; font-weight: 800; font-size: 13px; cursor: pointer; }
.sort-form button[type=submit]:disabled { opacity: .4; cursor: default; }
.inline-action-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: inline-action-spin .7s linear infinite; }
@keyframes inline-action-spin { to { transform: rotate(360deg); } }
.sort-action-message, .manager-action-feedback { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: 12px; }
.sort-batch-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; margin: 8px 0 10px; padding: 10px 12px; border: 1px solid rgba(61,214,140,.18); border-radius: 10px; background: rgba(61,214,140,.05); }
.sort-batch-toolbar label { display: inline-flex; align-items: center; gap: 6px; min-width: max-content; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 700; }
.sort-batch-toolbar button { width: auto; padding: 8px 12px; }
.sort-batch-toolbar > span { min-width: max-content; }
.sort-slip-select { display: flex; align-items: center; gap: 8px; }
.sort-slip-select input { width: 16px; height: 16px; accent-color: var(--green); }
.manager-action-feedback { margin-bottom: 10px; padding: 10px 14px; border: 1px solid rgba(61,214,140,.2); border-radius: 10px; background: rgba(61,214,140,.06); }

/* ═══════════════════════════════════════════════════════
   DRIVER MONITOR PAGE (admin view)
══════════════════════════════════════════════════════ */
.drv-admin-wrap { display: flex; flex-direction: column; gap: 20px; }
.drv-admin-hero { background: linear-gradient(135deg, rgba(96,165,250,.08) 0%, rgba(96,165,250,.02) 100%); border: 1px solid rgba(96,165,250,.14); border-radius: 18px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; }
.drv-admin-hero-text h2 { font-size: 19px; font-weight: 900; color: var(--ink); margin: 0 0 4px; }
.drv-admin-hero-text p { font-size: 13px; color: var(--muted); margin: 0; }
.drv-period-row { display: flex; gap: 12px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.drv-period-row label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.drv-period-row input[type=date] { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 6px 10px; color: var(--ink); font-size: 12px; }
.drv-kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.drv-kpi { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.drv-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.drv-kpi-val { font-size: 24px; font-weight: 900; color: var(--ink); line-height: 1; }
.drv-kpi-val.blue { color: #60a5fa; }
.drv-kpi-val.green { color: #3dd68c; }

/* ═══════════════════════════════════════════════════════
   REPORTS PAGE
══════════════════════════════════════════════════════ */
.rpt-page { display: flex; flex-direction: column; gap: 18px; }
.rpt-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rpt-chart-card { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 22px; }
.rpt-chart-card h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.rpt-chart-card .eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.rpt-table-card { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.rpt-table-card h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; }
.rpt-filter-row { display: grid; grid-template-columns: 1fr 200px auto; gap: 10px; }
.rpt-filter-row input, .rpt-filter-row select { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 9px 12px; color: var(--ink); font-size: 13px; }
.rpt-filter-row button { background: #3dd68c; color: #0d0f14; border: none; border-radius: 9px; padding: 9px 18px; font-weight: 800; font-size: 13px; cursor: pointer; }
.rpt-table-scroll { overflow-x: auto; }
.rpt-table-scroll table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rpt-table-scroll th { background: rgba(255,255,255,.03); color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.rpt-table-scroll td { padding: 8px 10px; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.04); }
.rpt-table-scroll tr:hover td { background: rgba(255,255,255,.025); }

/* ═══════════════════════════════════════════════════════
   SHARED dark-mode table override for panel pages
══════════════════════════════════════════════════════ */
.panel table th { background: rgba(255,255,255,.03) !important; color: var(--muted) !important; }
.panel table td { color: var(--ink) !important; background: transparent !important; }
.panel { background: var(--panel) !important; border-color: rgba(255,255,255,.07) !important; }
.panel .eyebrow { color: var(--muted) !important; }
.panel h2, .panel h3 { color: var(--ink) !important; }
.panel input, .panel select, .panel textarea { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; color: var(--ink) !important; }
.panel .muted, .panel small { color: var(--muted) !important; }

@media (max-width: 1100px) {
  #view-crm .crm-charts-row { grid-template-columns: 1fr 1fr; }
  #view-crm .crm-chart-wide { grid-column: 1 / -1; }
  #view-crm .crm-kpi-bar { grid-template-columns: repeat(2, 1fr); }
  #view-crm .crm-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #view-crm .crm-hero-inner { flex-direction: column; }
  #view-crm .crm-hero-search-wrap { width: 100%; flex-wrap: wrap; }
  #view-crm .crm-hero-search { width: 100%; flex: 1 1 100%; }
  #view-crm .crm-hero-btn { flex: 1 1 auto; }
  #view-crm .crm-charts-row { grid-template-columns: 1fr; }
  #view-crm .crm-filter-bar { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   END PHASE 1 REDESIGN — 2026-07-01
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   DARK THEME — chart color overrides
   (applied globally so bar/rank charts look right)
══════════════════════════════════════════════════════ */
:root {
  --chart-bar: #3dd68c;
  --chart-bar-soft: rgba(61,214,140,.15);
  --chart-line: #3dd68c;
  --chart-area: rgba(61,214,140,.1);
  --chart-grid: rgba(255,255,255,.06);
  --chart-axis: #64748b;
  --chart-value: #f8fafc;
  --chart-track: rgba(255,255,255,.06);
  --chart-dot: #0d0f14;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL VIEW padding — all view sections
══════════════════════════════════════════════════════ */
.view.active { padding: 20px 24px; box-sizing: border-box; overflow-y: auto; }
#view-crm.view.active { padding: 0; }

/* Fix main backgrounds */
main { background: var(--bg) !important; }
body, html { background: var(--bg); }

/* Fix section-heading / eyebrow color globally */
.section-heading h2, .section-heading .eyebrow { color: var(--muted) !important; }
.eyebrow { color: var(--muted) !important; }
h1, h2, h3, h4 { color: var(--ink); }

/* Metric card dark fix */
.metric-card { background: var(--panel) !important; border-color: rgba(255,255,255,.08) !important; }
.metric-card span { color: var(--muted) !important; }
.metric-card strong { color: var(--ink) !important; }

/* list-item dark fix */
.list-item { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.07) !important; color: var(--ink) !important; }
.list-item:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(61,214,140,.2) !important; }

/* record-card dark */
.record-card { background: var(--panel) !important; border-color: rgba(255,255,255,.08) !important; color: var(--ink) !important; }

/* filter-bar dark */
.filter-bar input, .filter-bar select, .filter-bar button { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; color: var(--ink) !important; }
.filter-bar button { background: rgba(255,255,255,.07) !important; }

/* data-grid table dark */
.data-grid table th, .table-wrap table th { background: rgba(255,255,255,.03) !important; color: var(--muted) !important; border-color: rgba(255,255,255,.07) !important; }
.data-grid table td, .table-wrap table td { color: var(--ink) !important; border-color: rgba(255,255,255,.04) !important; }
.data-grid table tr:hover td, .table-wrap table tr:hover td { background: rgba(255,255,255,.025) !important; }

/* compact-btn global fix */
.compact-btn, .secondary.compact-btn { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: var(--ink) !important; }
.danger.compact-btn { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; color: #f87171 !important; }

/* Kanban dark fix */
.kanban-col { background: rgba(255,255,255,.025) !important; border-color: rgba(255,255,255,.07) !important; }
.kanban-col h3 { color: var(--ink) !important; }
.kanban-card { background: var(--panel) !important; border-color: rgba(255,255,255,.08) !important; color: var(--ink) !important; }

/* Settings dark fix */
.settings-clean .panel { margin-bottom: 16px; }
.role-permission-card { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.07) !important; }
.theme-option { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; }
.theme-option strong, .theme-option small { color: var(--ink) !important; }

/* Account control hero dark */
.account-control-hero { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.07) !important; }
.account-mode-grid button { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--ink) !important; }
.account-mode-grid button.active { background: rgba(61,214,140,.12) !important; border-color: rgba(61,214,140,.25) !important; color: #3dd68c !important; }

/* ESG / Archive dark fix (already covered by .panel override) */
.approval-alert.danger-state { background: rgba(239,68,68,.05) !important; border-color: rgba(239,68,68,.15) !important; }

/* Home page dark */
.home-hero { background: var(--panel) !important; }
.home-hero-copy h1 { color: var(--ink) !important; }
.home-hero-copy p { color: var(--muted) !important; }
.impact-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; }
.impact-card strong { color: var(--ink) !important; }
.impact-card span { color: var(--muted) !important; }
.story-item { border-color: rgba(255,255,255,.07) !important; }
.story-item strong { color: var(--ink) !important; }
.story-item small, .story-item span { color: var(--muted) !important; }

/* Driver ops board — kill residual white boxes */
.alert-list { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 12px !important; padding: 14px 16px !important; }
.alert-list h3 { color: var(--ink) !important; font-size: 13px !important; }
.alert-list .alert-item { color: #f59e0b !important; background: rgba(245,158,11,.06) !important; border-radius: 7px; padding: 6px 10px; font-size: 12px; margin: 4px 0; }
.driver-ops-board, .driver-commission-card, .driver-history-card { background: var(--panel) !important; border-color: rgba(255,255,255,.07) !important; }
.driver-history-card strong, .driver-history-card span, .driver-history-card small { color: var(--ink) !important; }

/* Profile drawer — fix white-on-white */
#drawerBody .profile-drawer-head, #drawerBody .profile-sec { background: #1c1f29 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; }
#drawerBody .profile-sec-title { color: #3dd68c !important; }
#drawerBody .profile-drawer-head h3 { color: #f8fafc !important; }
#drawerBody .profile-drawer-head p { color: #64748b !important; }
#drawerBody .profile-avatar-large { background: #3dd68c !important; color: #08130d !important; }
#drawerBody .compact-form label span, #drawerBody .profile-sec label span { color: #64748b !important; }
#drawerBody .compact-form label strong, #drawerBody .profile-sec strong { color: #f8fafc !important; }
#drawerBody .compact-form input, #drawerBody .profile-sec input, #drawerBody #profileForm input { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f8fafc !important; }
#drawerBody .profile-sec .muted, #drawerBody #profileSaveMessage { color: #64748b !important; }
#drawerBody .role-badge { background: rgba(61,214,140,.15) !important; color: #3dd68c !important; border: 1px solid rgba(61,214,140,.25) !important; }
#drawerBody .compact-btn { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #f8fafc !important; }
#drawerBody .logout-outline { background: transparent !important; border-color: #c2410c !important; color: #fb923c !important; }
#drawerBody .logout-outline:hover { background: rgba(194,65,12,.12) !important; border-color: #ea580c !important; color: #fdba74 !important; }

/* ═══════════════════════════════════════════════════════
   TEMPLATE B — Split master-detail (Approval + Sorting)
══════════════════════════════════════════════════════ */
.mgr-split, .sort-split { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; align-items: start; height: calc(100vh - 120px); }

/* Left rail */
.mgr-rail, .sort-rail { background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.mgr-rail-head, .sort-rail-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mgr-rail-eyebrow, .sort-rail-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.mgr-rail-title, .sort-rail-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.mgr-rail-badge, .sort-rail-badge { margin-left: auto; background: rgba(61,214,140,.15); color: #3dd68c; border: 1px solid rgba(61,214,140,.25); border-radius: 9px; padding: 4px 12px; font-size: 15px; font-weight: 900; }
.mgr-rail-body, .sort-rail-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mgr-rail-body::-webkit-scrollbar, .sort-rail-body::-webkit-scrollbar { width: 4px; }
.mgr-rail-body::-webkit-scrollbar-thumb, .sort-rail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.mgr-rail-item, .sort-rail-item { background: transparent; border: 1px solid transparent; border-radius: 11px; padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: background .12s, border-color .12s; width: 100%; }
.mgr-rail-item:hover, .sort-rail-item:hover { background: rgba(255,255,255,.03); }
.mgr-rail-item.active, .sort-rail-item.active { background: rgba(61,214,140,.1); border-color: rgba(61,214,140,.28); }
.mgr-rail-item-top { display: flex; align-items: center; gap: 8px; }
.mgr-rail-item-top strong { font-size: 13px; font-weight: 800; color: var(--ink); flex: 1; }
.mgr-rail-warn { color: #f59e0b; font-size: 13px; }
.mgr-rail-ok { color: #3dd68c; font-size: 12px; }
.mgr-rail-item-company { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-rail-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.mgr-rail-item-meta span { font-size: 11px; color: var(--muted); flex: 1; }
.mgr-rail-empty, .sort-rail-empty { text-align: center; padding: 40px 16px; color: var(--muted); font-size: 14px; line-height: 1.8; }

/* Right detail pane */
.mgr-detail, .sort-detail { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.mgr-detail::-webkit-scrollbar, .sort-detail::-webkit-scrollbar { width: 5px; }
.mgr-detail::-webkit-scrollbar-thumb, .sort-detail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
.mgr-detail .appr-card { border-radius: 16px; }
.mgr-detail-empty, .sort-detail-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.mgr-detail-empty-icon { font-size: 42px; color: rgba(61,214,140,.4); }
.mgr-detail-empty h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.mgr-detail-empty p { font-size: 13px; margin: 0; }

/* Sorting-specific rail checklist */
.sort-rail-item-checks { display: flex; gap: 5px; margin-top: 3px; }
.sort-rail-dot { width: 6px; height: 6px; border-radius: 50%; }
.sort-rail-dot.green { background: #3dd68c; } .sort-rail-dot.amber { background: #f59e0b; } .sort-rail-dot.red { background: #f87171; }
.sort-rail-item-company { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sort-rail-item-date { display: grid; grid-template-columns: 18px 1fr; gap: 1px 7px; align-items: center; width: 100%; margin-top: 2px; padding: 7px 9px; border: 1px solid rgba(96,165,250,.15); border-radius: 8px; background: rgba(96,165,250,.055); text-align: left; box-sizing: border-box; }
.sort-rail-item-date > .material-symbols-rounded { grid-row: 1 / 3; color: #60a5fa; font-size: 17px; }
.sort-rail-item-date > span:not(.material-symbols-rounded) { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.sort-rail-item-date strong { color: #cbd5e1; font-size: 11px; font-weight: 800; }
.sort-detail-stack { display: flex; flex-direction: column; gap: 16px; }


/* Weekly collection planning */
.weekly-planner { border-color: rgba(61,214,140,.18); }
.weekly-planner .panel-title { align-items: flex-start; gap: 16px; }
.weekly-planner .panel-title button { min-width: 150px; }
.planner-head-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.planner-head-actions button { width: auto; }
.route-lock-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.trip-calendar-toolbar { display: grid; grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) 1fr; gap: 10px; align-items: end; margin-top: 14px; }
.planner-month-nav { display: flex; align-items: end; gap: 6px; min-width: 0; }
.planner-month-nav label { flex: 1 1 110px; min-width: 110px; }
.planner-month-nav input[type="month"] { min-width: 110px; }
.planner-month-nav button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Reward marketplace checkout and management centre */
.reward-store-header-actions { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.reward-sidebar-cart:hover { background: #16783d; }
.reward-floating-cart { position: fixed; right: 24px; bottom: 24px; z-index: 85; display: inline-flex; align-items: center; gap: 10px; min-width: 168px; min-height: 64px; padding: 12px 16px; border: 1px solid rgba(186, 255, 207, .5); border-radius: 18px; color: #effff4; background: #1f8f4d; box-shadow: 0 16px 34px rgba(14, 72, 40, .24); font-size: 12px; font-weight: 900; cursor: pointer; text-align: left; }
.reward-floating-cart:hover { background: #16783d; transform: translateY(-2px); }
.reward-floating-cart > .material-symbols-rounded { flex: 0 0 auto; font-size: 24px; }
.reward-floating-cart-copy { display: grid; gap: 2px; min-width: 0; }
.reward-floating-cart-copy strong { color: #fff; font-size: 14px; }
.reward-floating-cart-copy b, .reward-floating-cart-copy small { color: #d8ffe5; font-size: 10px; }
.reward-floating-cart-copy small { font-weight: 750; }
.reward-sidebar-cart { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; color: #fff; background: #1f8f4d; font-size: 11px; font-weight: 900; cursor: pointer; }
.reward-checkout-shell { display: grid; gap: 16px; }
.reward-checkout-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 15px; }
.reward-checkout-section { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(20, 60, 30, .13); border-radius: 15px; background: #fbfdf9; }
.reward-checkout-section + .reward-checkout-section { margin-top: 12px; }
.reward-checkout-section h3, .reward-checkout-group h4 { margin: 0; color: #12331c; }
.reward-checkout-section label { display: grid; gap: 5px; color: #5d7464; font-size: 11px; font-weight: 850; }
.reward-checkout-section input, .reward-checkout-section textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid rgba(20, 60, 30, .16); border-radius: 9px; color: #12331c; background: #fff; font: inherit; }
.reward-cart-lines { display: grid; gap: 8px; }
.reward-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #eef5ee; }
.reward-cart-line > div { display: grid; gap: 2px; min-width: 0; }
.reward-cart-line strong, .reward-cart-line small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-cart-line small { color: #708375; }
.reward-cart-line input { width: 56px; padding: 6px; }
.reward-cart-line .icon-button { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(20, 60, 30, .16); border-radius: 50%; color: #8b3a31; background: #fff; font-size: 18px; cursor: pointer; }
.reward-checkout-total { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(20, 60, 30, .12); color: #5d7464; font-size: 12px; }
.reward-checkout-total strong { color: #138548; font-size: 21px; }
.reward-checkout-group { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(20, 60, 30, .1); }
.reward-checkout-group p { margin: 0; color: #708375; font-size: 11px; }
.reward-delivery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reward-delivery-choice { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid rgba(20, 60, 30, .14); border-radius: 10px; background: #fff; cursor: pointer; }
.reward-delivery-choice:has(input:checked) { border-color: #1f8f4d; box-shadow: 0 0 0 2px rgba(31, 143, 77, .12); }
.reward-delivery-choice input { width: auto; margin-top: 3px; }
.reward-delivery-choice span { display: grid; gap: 3px; }
.reward-delivery-choice small { color: #708375; font-size: 10px; font-weight: 650; line-height: 1.35; }
.reward-fixed-delivery { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(31, 143, 77, .28); border-radius: 11px; color: #123d28; background: #edf8ef; }
.reward-fixed-delivery > .material-symbols-rounded { flex: 0 0 auto; color: #1f8f4d; font-size: 20px; }
.reward-fixed-delivery span:last-child { display: grid; gap: 3px; }
.reward-fixed-delivery small, .reward-product-delivery-note { color: #5d7464; font-size: 10px; line-height: 1.4; }
.reward-product-delivery-note { display: flex; gap: 7px; align-items: flex-start; margin: 0; padding: 9px 10px; border-radius: 9px; background: #edf8ef; }
.reward-product-delivery-note .material-symbols-rounded { color: #1f8f4d; font-size: 16px; }
.reward-checkout-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: #657a6b; font-size: 11px; line-height: 1.4; }
.reward-checkout-note .material-symbols-rounded { color: #1f8f4d; font-size: 16px; }
.reward-checkout-submit { min-height: 44px; border: 0; border-radius: 10px; color: #fff; background: #123d28; font-size: 12px; font-weight: 900; cursor: pointer; }
.reward-checkout-submit:hover { background: #1f8f4d; }
.reward-checkout-submit:disabled,
.reward-checkout-submit.is-unavailable { cursor: not-allowed; color: #6b7e70; background: #dce8df; border: 1px solid rgba(20, 60, 30, .14); box-shadow: none; }
.reward-checkout-submit:disabled:hover,
.reward-checkout-submit.is-unavailable:hover { color: #6b7e70; background: #dce8df; transform: none; }
.reward-checkout-unavailable { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid rgba(178, 132, 34, .28); border-radius: 9px; color: #765b22; background: #fff7df; font-size: 11px; line-height: 1.4; }
.reward-checkout-unavailable .material-symbols-rounded { flex: 0 0 auto; font-size: 16px; }
.reward-partner-cta > button { color: #f3fff6; background: linear-gradient(135deg, #1a5a39, #103d29); border: 1px solid rgba(16, 61, 41, .3); box-shadow: 0 8px 18px rgba(16, 61, 41, .16), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.reward-partner-cta > button:hover { color: #fff; background: linear-gradient(135deg, #226f47, #155237); box-shadow: 0 11px 22px rgba(16, 61, 41, .22), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px); }
.reward-partner-cta > button:focus-visible { outline: 3px solid rgba(46, 158, 82, .28); outline-offset: 2px; }
html[data-theme="carbon_dark"] .reward-checkout-unavailable { color: #f4d58a; background: rgba(177, 130, 35, .14); border-color: rgba(244, 213, 138, .24); }
html[data-theme="carbon_dark"] .reward-checkout-submit:disabled,
html[data-theme="carbon_dark"] .reward-checkout-submit.is-unavailable { color: #9eb1a5; background: #2b3830; border-color: rgba(207, 239, 218, .16); }
.reward-admin-hero { display: flex; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: 20px; color: #effff4; background: radial-gradient(circle at 90% 10%, rgba(135, 255, 177, .2), transparent 30%), linear-gradient(135deg, #105332, #0d291b 72%); }
.reward-admin-hero h1 { margin: 5px 0 8px; color: #fff; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.reward-admin-hero p { max-width: 720px; margin: 0; color: rgba(239, 255, 244, .78); line-height: 1.5; }
.reward-admin-summary { min-width: 170px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 2px 10px; padding: 15px; border: 1px solid rgba(186, 255, 207, .28); border-radius: 15px; background: rgba(0, 0, 0, .18); }
.reward-admin-summary strong { font-size: 24px; }
.reward-admin-summary span { align-self: center; color: rgba(239, 255, 244, .7); font-size: 11px; }
.reward-admin-form, .reward-rule-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 18px; }
.reward-admin-form label, .reward-rule-form label { display: grid; gap: 6px; color: #5d7464; font-size: 11px; font-weight: 850; }
.reward-admin-form input, .reward-admin-form select, .reward-admin-form textarea, .reward-rule-form input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid rgba(20, 60, 30, .16); border-radius: 9px; color: #12331c; background: #fff; font: inherit; }
.reward-admin-form .reward-admin-span, .reward-rule-form .reward-admin-span { grid-column: span 2; }
.reward-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 38px; }
.reward-check-row label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 6px; color: #405d49; font-size: 11px; }
.reward-check-row input { width: auto; }
.reward-delivery-readonly { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 9px 10px; border: 1px solid rgba(31, 143, 77, .2); border-radius: 9px; color: #24613b; background: #eef8ef; }
.reward-delivery-readonly .material-symbols-rounded { color: #1f8f4d; font-size: 17px; }
.reward-delivery-readonly small { margin-left: auto; color: #708375; font-size: 10px; font-weight: 650; }
.reward-admin-form > button, .reward-rule-form > button { min-height: 42px; }
.reward-admin-table-wrap { overflow-x: auto; }
.reward-fulfilment-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.reward-proof-input { max-width: 180px; font-size: 12px; }
.reward-admin-table { min-width: 760px; }
.reward-admin-table select { max-width: 160px; padding: 7px; border: 1px solid rgba(20, 60, 30, .16); border-radius: 8px; background: #fff; color: #305b3d; font: inherit; }
.reward-supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reward-supplier-grid article { display: grid; gap: 4px; padding: 13px; border: 1px solid rgba(20, 60, 30, .13); border-radius: 12px; background: #eef5ee; }
.reward-supplier-grid span, .reward-supplier-grid small { color: #708375; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="carbon_dark"] .reward-checkout-section,
html[data-theme="carbon_dark"] .reward-delivery-choice,
html[data-theme="carbon_dark"] .reward-admin-form input,
html[data-theme="carbon_dark"] .reward-admin-form select,
html[data-theme="carbon_dark"] .reward-admin-form textarea,
html[data-theme="carbon_dark"] .reward-rule-form input,
html[data-theme="carbon_dark"] .reward-admin-table select { color: #eafff0; border-color: rgba(207, 239, 218, .16); background: #171b19; }
html[data-theme="carbon_dark"] .reward-checkout-section h3,
html[data-theme="carbon_dark"] .reward-checkout-group h4 { color: #eafff0; }
html[data-theme="carbon_dark"] .reward-cart-line,
html[data-theme="carbon_dark"] .reward-supplier-grid article { background: rgba(255, 255, 255, .045); }
@media (max-width: 900px) {
  .reward-checkout-grid { grid-template-columns: 1fr; }
  .reward-admin-form, .reward-rule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .reward-store-header-actions, .reward-admin-hero { display: grid; }
  .reward-store-header-actions { grid-template-columns: 1fr; }
  .reward-sidebar-cart { min-height: 40px; }
  .reward-delivery-options, .reward-admin-form, .reward-rule-form, .reward-supplier-grid { grid-template-columns: 1fr; }
  .reward-admin-form .reward-admin-span, .reward-rule-form .reward-admin-span { grid-column: auto; }
}
.trip-calendar-toolbar label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.trip-calendar-toolbar input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 13px; text-transform: none; letter-spacing: 0; }
.trip-calendar-selected { border: 1px solid rgba(61,214,140,.22); background: rgba(61,214,140,.07); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-height: 42px; justify-content: center; }
.trip-calendar-selected strong { font-size: 13px; color: var(--ink); }
.trip-calendar-selected span { font-size: 11.5px; color: var(--muted); }
.weekly-plan-form { display: grid; grid-template-columns: minmax(260px, 1.5fr) minmax(150px, .8fr) minmax(130px, .7fr) minmax(190px, 1fr) minmax(150px, .78fr) minmax(260px, 1.15fr) minmax(160px, .78fr); gap: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px; margin-top: 12px; align-items: stretch; }
.weekly-plan-form select,
.weekly-plan-form input,
.weekly-plan-form textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 13px; }
.planner-search-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.planner-search-field small { color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.planner-time-wrap,
.planner-time-pair label { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.planner-time-wrap input,
.planner-time-wrap select,
.planner-time-pair input,
.planner-time-pair select { color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.planner-time-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.planner-time-wrap.hidden,
.planner-time-pair.hidden { display: none !important; }
.weekly-plan-form .planner-load-input { min-width: 140px; }
.weekly-plan-form textarea { min-height: 42px; resize: vertical; }
.weekly-plan-form button { width: 100%; }
.trip-calendar { margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.trip-calendar-weekdays,
.trip-calendar-grid { min-width: 1120px; display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); }
.trip-calendar-weekdays { gap: 0; border: 1px solid rgba(255,255,255,.08); border-bottom: 0; border-radius: 14px 14px 0 0; overflow: hidden; background: rgba(255,255,255,.035); }
.trip-calendar-weekdays span { padding: 9px 10px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; border-right: 1px solid rgba(255,255,255,.06); }
.trip-calendar-weekdays span:last-child { border-right: 0; }
.trip-calendar-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 8px 2px 0; color: var(--muted); font-size: 10.5px; font-weight: 800; }
.trip-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trip-calendar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.trip-calendar-legend i.scheduled { background: #43c66a; }
.trip-calendar-legend i.available { background: #94a3b8; }
.trip-calendar-legend i.locked { background: #f59e0b; }
.trip-calendar-grid { border-left: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); }
.trip-day { min-height: 148px; padding: 9px; border: 0; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.018); color: var(--ink); text-align: left; display: flex; flex-direction: column; gap: 6px; cursor: pointer; position: relative; }
.trip-day.has-trip { background: rgba(34,197,94,.045); }
.trip-day.no-trip { background: rgba(148,163,184,.035); box-shadow: inset 0 3px 0 rgba(148,163,184,.5); }
.trip-day:hover { background: rgba(61,214,140,.055); }
.trip-day.muted { opacity: .42; background: rgba(255,255,255,.01); }
.trip-day.selected { outline: 2px solid rgba(61,214,140,.72); outline-offset: -2px; background: rgba(61,214,140,.08); }
.trip-day.today .trip-day-head strong { background: rgba(61,214,140,.2); color: #8ef0b8; }
.trip-day.amber { box-shadow: inset 0 3px 0 rgba(245,158,11,.55); }
.trip-day.red { box-shadow: inset 0 3px 0 rgba(248,113,113,.55); }
.trip-day.low { box-shadow: inset 0 3px 0 rgba(34,197,94,.42); }
.trip-day.locked { box-shadow: inset 0 3px 0 rgba(245,158,11,.72); }
.trip-day.completed { box-shadow: inset 0 3px 0 rgba(34,197,94,.72); }
.trip-day-empty { min-height: 148px; background: rgba(255,255,255,.006); cursor: default; pointer-events: none; opacity: .32; }
.trip-complete-stamp { position: absolute; top: 34px; right: 10px; transform: rotate(-12deg); border: 2px solid rgba(34,197,94,.72); color: #86efac; border-radius: 8px; padding: 4px 8px; font-size: 10px; font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; background: rgba(34,197,94,.08); z-index: 2; }
.trip-day-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.trip-day-head strong { width: 26px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; }
.trip-day-head em { font-style: normal; font-size: 10px; font-weight: 800; color: #0f5132; background: #d1fae5; border-radius: 999px; padding: 3px 7px; }
.trip-day-stats,
.trip-day-area { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.25; min-height: 14px; }
.trip-day-area { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-day-events { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.trip-event { background: linear-gradient(135deg, rgba(34,197,94,.9), rgba(21,128,61,.88)); color: #fff; border-radius: 7px; padding: 5px 7px; display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: start; min-width: 0; }
.trip-event.locked { background: linear-gradient(135deg, rgba(245,158,11,.96), rgba(180,83,9,.92)); color: #111827; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.trip-event strong { display: block; font-size: 10.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-event small { display: block; font-size: 9.5px; line-height: 1.1; opacity: .9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-event i { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.22); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 900; cursor: pointer; }
.trip-more { color: #9be7bd; font-size: 10px; font-weight: 800; cursor: pointer; }
.trip-day-route-summary { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); border-radius: 10px; padding: 8px; display: grid; gap: 3px; min-height: 48px; cursor: pointer; }
.trip-day-route-summary.locked { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }
.trip-day-route-summary b { font-size: 11.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-day-route-summary small { color: var(--muted); font-size: 10px; line-height: 1.2; }
.trip-day-actions { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.trip-day-add,
.trip-day-detail { font-size: 10px; color: var(--muted); border: 1px dashed rgba(255,255,255,.11); border-radius: 7px; padding: 5px; text-align: center; }
.trip-day-detail { border-style: solid; color: #9be7bd; border-color: rgba(61,214,140,.22); font-weight: 800; cursor: pointer; white-space: nowrap; }
.weekly-lock-note { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 12.5px; }
.lock-picker-list { display: grid; gap: 8px; margin: 14px 0; }
.lock-picker-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(61,214,140,.2); border-radius: 10px; background: rgba(61,214,140,.06); cursor: pointer; }
.lock-picker-row input { width: 16px; height: 16px; accent-color: #3dd68c; }
.lock-picker-row span { display: grid; gap: 3px; }
.lock-picker-row small { color: var(--muted); }
.planner-assist-grid { display: grid; grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.35fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.planner-day-command,
.planner-suggestions,
.driver-assign-panel { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); padding: 12px; min-width: 0; }
.planner-day-command { display: grid; grid-template-columns: 1fr; gap: 10px; border-left: 3px solid rgba(61,214,140,.72); }
.planner-day-command.medium { border-left-color: rgba(245,158,11,.8); }
.planner-day-command.high { border-left-color: rgba(248,113,113,.8); }
.planner-day-command h3,
.planner-suggestions h3 { margin: 2px 0 4px; font-size: 18px; }
.planner-day-command p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.planner-day-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.planner-day-metrics span { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; background: rgba(255,255,255,.025); min-width: 0; }
.planner-day-metrics b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-day-metrics small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.planner-day-actions-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.planner-day-actions-main button { width: 100%; padding: 9px 10px; font-size: 12px; }
.planner-day-actions-main button:disabled { opacity: .42; cursor: not-allowed; }
.planner-day-actions-main .soft-danger { background: rgba(185,28,28,.18); color: #fecaca; border: 1px solid rgba(248,113,113,.2); }
.planner-suggestions-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.planner-suggestions-head small { color: var(--muted); font-size: 10.5px; max-width: 230px; text-align: right; }
.planner-suggestion-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 206px; overflow: auto; padding-right: 3px; }
.planner-suggestion-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); border-radius: 11px; padding: 9px; min-width: 0; }
.planner-suggestion-card strong,
.planner-suggestion-card span,
.planner-suggestion-card small { display: block; line-height: 1.18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-suggestion-card strong { font-size: 12px; }
.planner-suggestion-card span,
.planner-suggestion-card small { color: var(--muted); font-size: 10.5px; margin-top: 3px; }
.planner-suggestion-card button { padding: 7px 10px; font-size: 11px; }
.driver-assign-panel { margin-top: 12px; display: grid; gap: 10px; }
.driver-assign-panel h3 { margin: 0; font-size: 18px; }
.driver-assign-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.driver-assign-controls { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(180px, .35fr) auto; gap: 10px; align-items: center; }
.driver-assign-controls select { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.driver-assign-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.driver-assign-list label { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); border-radius: 11px; padding: 9px; }
.driver-assign-list strong,
.driver-assign-list span { display: block; line-height: 1.2; }
.driver-assign-list span { color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.planner-coverage-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.planner-coverage-board section { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); padding: 12px; min-width: 0; }
.planner-coverage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9be7bd; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.planner-coverage-head.amber { color: #f7d47a; }
.planner-coverage-head strong { font-size: 24px; color: var(--ink); letter-spacing: 0; }
.planner-coverage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; padding-right: 3px; }
.planner-coverage-card { border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 10px; background: rgba(255,255,255,.025); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.planner-coverage-card strong { font-size: 12.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-coverage-card span,
.planner-coverage-card small { color: var(--muted); font-size: 10.5px; line-height: 1.2; }

.route-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(2, 6, 23, .72); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.route-modal-card { width: min(920px, calc(100vw - 48px)); max-height: calc(100vh - 80px); overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.45); padding: 22px; }
.route-modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 14px; margin-bottom: 16px; }
.route-modal-head h2 { margin: 4px 0 6px; }
.route-modal-head button { min-width: 92px; }
.route-modal-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.route-modal-summary span { border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.035); }
.route-modal-summary b { display: block; font-size: 18px; }
.route-modal-summary small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.route-lock-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(245,158,11,.38); border-radius: 14px; background: rgba(245,158,11,.1); padding: 12px; margin: 0 0 12px; }
.route-lock-strip b { display: block; color: var(--ink); }
.route-lock-strip small { display: block; color: var(--muted); margin-top: 2px; }
.route-lock-strip button { min-width: 150px; white-space: nowrap; }
.route-lock-strip button:disabled { opacity: .55; cursor: not-allowed; }
.route-modal-actions { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(120px, .6fr) minmax(170px, .9fr) minmax(140px, .7fr); gap: 10px; align-items: end; margin-bottom: 12px; }
.route-modal-actions label,
.route-time-edit label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.route-modal-actions select,
.route-time-edit select { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--ink); padding: 9px 10px; font-size: 12px; font-weight: 800; }
.route-chain { min-height: 76px; border: 1px solid rgba(61,214,140,.2); background: rgba(61,214,140,.06); border-radius: 16px; padding: 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.route-node { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 999px; padding: 8px 12px; font-weight: 900; font-size: 12px; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.route-node.locked { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); color: #f7d47a; }
.route-arrow { color: #9be7bd; font-weight: 900; }
.route-list { display: grid; gap: 9px; }
.route-row { display: grid; grid-template-columns: 44px 1fr minmax(190px, .55fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); border-radius: 14px; padding: 10px; cursor: grab; }
.route-row:hover { border-color: rgba(61,214,140,.35); background: rgba(61,214,140,.055); }
.route-row.locked { cursor: grab; border-color: rgba(245,158,11,.26); background: rgba(245,158,11,.08); }
.route-row > strong { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(61,214,140,.18); color: #9be7bd; }
.route-row.locked > strong { background: rgba(245,158,11,.18); color: #f7d47a; }
.route-row b { display: block; font-size: 13px; }
.route-row span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.route-row small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 4px; }
.route-row button { padding: 8px 12px; }
.route-time-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.route-row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.route-row-actions button { white-space: nowrap; }
.template-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(2, 6, 23, .72); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.template-modal-card { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 80px); overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.45); padding: 22px; }
.template-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.template-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.template-weekday { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; }
.template-weekday.weekend { color: #f59e0b; }
.template-month-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; }
.template-month-grid .template-day { cursor: grab; }
.template-month-grid .template-day:active { cursor: grabbing; }
.template-day { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px; min-height: 120px; background: rgba(255,255,255,.025); display: flex; flex-direction: column; gap: 6px; }
.template-day.empty { opacity: .25; background: transparent; }
.template-day.has-items { border-color: rgba(61,214,140,.26); background: rgba(61,214,140,.055); }
.template-day.weekend { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.16); }
.template-day.weekend.has-items { border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.08); }
.template-day b { font-size: 12px; color: var(--muted); }
.template-day span { display: block; border-radius: 8px; padding: 5px 7px; background: rgba(255,255,255,.055); font-size: 10.5px; font-weight: 800; line-height: 1.15; }
.template-day-note { display: block; margin-top: auto; font-size: 10px; color: #f59e0b; font-weight: 700; }

@media (max-width: 1280px) {
  .weekly-plan-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planner-search-field { grid-column: span 2; }
  .trip-calendar-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-calendar-selected { grid-column: 1 / -1; }
  .planner-assist-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .weekly-planner .panel-title { flex-direction: column; }
  .weekly-planner .panel-title button { width: 100%; }
  .weekly-plan-form,
  .trip-calendar-toolbar,
  .planner-coverage-board,
  .planner-day-metrics,
  .planner-day-actions-main,
  .planner-suggestion-list,
  .driver-assign-controls,
  .template-month-grid { grid-template-columns: 1fr; }
  .planner-month-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; }
  .planner-month-nav label { min-width: 0; }
  .planner-month-nav input[type="month"] { min-width: 88px; }
  .planner-head-actions { justify-content: flex-start; }
  .planner-search-field { grid-column: auto; }
  .planner-time-pair { grid-template-columns: 1fr; }
  .trip-calendar-weekdays,
  .trip-calendar-grid { min-width: 980px; }
  .route-modal-card { width: min(100%, calc(100vw - 24px)); padding: 16px; }
  .route-modal-summary,
  .route-lock-strip,
  .route-modal-actions,
  .route-time-edit { grid-template-columns: 1fr; }
  .route-modal-head,
  .route-row { grid-template-columns: 1fr; }
  .route-row { display: flex; flex-direction: column; align-items: stretch; }
}

/* ============================================================
   UNIFIED SURFACE SYSTEM — 2026-07-09
   Single source of truth for neutral card/panel backgrounds.
   Every neutral container derives its background from var(--panel)
   and text from var(--ink)/var(--muted), so it adapts to whatever
   theme is active (dark by default, white under the light themes).
   This removes the hardcoded #fff cards that caused white-on-white.
   Colored status tokens (pills, .green/.amber/.red variants, warning
   bars, status chips, .ocr-result/.flag/.driver-evidence-item states)
   are deliberately NOT listed so they keep their own colors.
   ============================================================ */
:is(
  .account-guide, .crm-master-card, .sponsor-card,
  .answer-bank article, .compact-answer-bank article, .compact-answer-bank details p,
  .nested-panel, .esg-mini-checklist, .esg-boundary-note,
  .chart-card, .scorecard-item, .highlight-grid article, .claim-grid article,
  .workflow-card, .fix-item, .check-stack article,
  .module-grid label, .role-permission-card,
  .account-mode-grid button, .account-path-grid article, .account-scope-help, .account-checklist-panel article,
  .pack-purpose-help, .evidence-type-help,
  .master-action-list article, .master-goal-box, .master-goal-triplet,
  .master-goal-period-grid > article, .master-goal-mini, .master-goal-onboarding-card,
  .master-goal-rules article, .master-branch-goal-card, .master-risk-reasons article,
  .master-linebar-row, .master-pie-legend, .master-campaign-branches,
  .mp-info-strip article, .mp-details-card summary,
  .center-modal, .center-modal-head,
  .announcement-form, .announcement-summary article, .announcement-detail-card,
  .participant-directory-card, .participant-wall-card, .participant-page-card,
  .driver-shift-grid article, .service-card, .driver-return-card, .driver-history-card,
  .alert-item, .alert-list, .client-chain,
  .client-metrics article, .client-id-metrics article, .chain-grid article,
  .metric-card, .record-card, .list-item, .data-grid, .point-card, .feed-item,
  .driver-card, .route-item, .kanban-col, .kanban-card, .permission-row,
  .theme-card, .theme-option, .upload-box, .autocomplete-panel, .autocomplete-option,
  .material-list label, .evidence-strip article, .report-builder article, .method-card,
  .client-stage-card, .client-tabs, .proof-photo, .profile-sec, .drawer,
  .ef-form-section, .driver-action-strip, .driver-metrics div, .driver-step, .client-steps span,
  .appr-card, .mgr-empty, .sort-queue-section, .sort-queue-card, .sort-card,
  .mgr-rail, .sort-rail, .ch-stage-card
) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
/* Table headers use a subtle theme-aware tint */
:is(.data-grid, .master-mission-table, table) th {
  background: var(--soft) !important;
  color: var(--muted) !important;
}
/* ============================================================
   END UNIFIED SURFACE SYSTEM
   ============================================================ */

/* ============================================================
   ESG REPORT (simplified submission tab) — 2026-07-09
   ============================================================ */
.esg-report-hero { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.esg-report-hero-copy { min-width: 260px; flex: 1; }
.esg-report-hero-copy h2 { margin: 2px 0 4px; }
.esg-report-hero-action { display: grid; gap: 6px; justify-items: end; text-align: right; }
.esg-export-btn { width: auto; padding: 14px 26px; font-size: 15px; font-weight: 800; border-radius: 12px; background: var(--green); color: #06231f; box-shadow: 0 10px 26px rgba(31,143,77,.28); white-space: nowrap; }
.esg-export-btn:hover { filter: brightness(1.05); }
.esg-export-btn:disabled { opacity: .65; cursor: progress; box-shadow: none; }
.esg-report-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 4px; }
.esg-report-breakdown { align-items: stretch; }
.esg-report-breakdown .chart-card { display: flex; flex-direction: column; }
.esg-disclosure-table { margin-top: 4px; }
@media (max-width: 760px) {
  .esg-report-hero-action { justify-items: stretch; text-align: left; width: 100%; }
  .esg-export-btn { width: 100%; }
  .esg-report-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* ============================================================
   END ESG REPORT
   ============================================================ */

/* ============================================================
   WASTE PERFORMANCE dashboard (wp-*) — 2026-07-10
   ============================================================ */
.wp-dash .filter-bar { margin-bottom: 14px; }
.wp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 4px; }
.wp-kpis article { padding: 14px 16px; }
.wp-kpis strong { font-size: 20px; }
.wp-table-card .wp-table table { min-width: 0; width: 100%; }
.wp-table-card .wp-table th, .wp-table-card .wp-table td { padding: 9px 12px; font-size: 13px; }
.wp-kpis .net-impact-card.impact-neutral strong { color: var(--ink); }
.wp-operational-carbon { align-items: stretch; }
.wp-operational-carbon > .chart-card { min-height: 260px; }
.operational-carbon-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.operational-carbon-heading h3 { margin-bottom: 4px; }
.operational-carbon-heading > strong { flex: 0 0 auto; padding: 10px 12px; border: 1px solid rgba(31,143,77,.28); border-radius: 12px; background: rgba(31,143,77,.08); color: var(--green); font-size: 24px; line-height: 1; text-align: right; }
.operational-carbon-heading > strong small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
/* Keep charts compact — the SVGs scale with card width and got far too tall. */
.wp-dash .chart-card { min-height: 0; }
.wp-dash .chart-card h3 { margin-bottom: 8px; }
.wp-dash .chart-card .col-chart-svg svg,
.wp-dash .chart-card .line-chart svg { max-height: 172px; width: 100%; height: auto; }
.wp-dash .chart-card .col-chart { min-height: 0; max-height: 190px; }
.wp-dash .chart-card .pie-chart { width: 168px; height: 168px; }
.wp-dash .chart-card .pie-hole { width: 92px; height: 92px; }
.wp-dash .chart-card .chart-bars { gap: 8px; }
.wp-section-head { display: flex; align-items: center; gap: 12px; margin: 20px 2px 2px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.wp-section-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wp-month-comparison { margin-bottom: 2px; }
.month-compare { display: grid; gap: 10px; padding-top: 4px; }
.month-compare-summary { display: flex; align-items: baseline; gap: 9px; }
.month-compare-summary span { color: var(--muted); font-size: 11px; }
.month-compare-delta { font-size: 24px; letter-spacing: -.04em; }
.month-compare.up .month-compare-delta { color: #3dd68c; }
.month-compare.down .month-compare-delta { color: #f87171; }
.month-compare.flat .month-compare-delta { color: var(--muted); }
.month-compare-row { display: grid; grid-template-columns: 76px minmax(80px, 1fr) auto; align-items: center; gap: 9px; font-size: 11px; }
.month-compare-row > span { color: var(--ink); }
.month-compare-row.previous > span { color: var(--muted); }
.month-compare-row strong { font-size: 12px; white-space: nowrap; color: var(--ink); }
.month-compare-track { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(125, 134, 148, .16); }
.month-compare-track i { display: block; height: 100%; border-radius: inherit; background: #3dd68c; transition: width .35s ease; }
.month-compare-row.previous .month-compare-track i { background: #718096; opacity: .72; }
.month-compare.down .month-compare-row:not(.previous) .month-compare-track i { background: #f87171; }
/* Short description under each chart title */
.chart-desc { margin: -2px 0 12px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.wp-dash .chart-card h3 { margin-bottom: 3px; }
.sort-history-custom-dates { align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.sort-history-custom-dates input { width: auto; flex: 0 0 auto; }
/* Cursor-following hover tooltip shared by all charts */
.chart-tooltip { position: fixed; z-index: 9999; pointer-events: none; background: var(--panel2, #1c1f29); color: var(--ink); border: 1px solid var(--line2, var(--line)); border-radius: 10px; padding: 7px 11px; box-shadow: 0 10px 28px rgba(0,0,0,.4); display: grid; gap: 1px; white-space: nowrap; }
.chart-tooltip strong { font-size: 13px; font-weight: 800; }
.chart-tooltip span { font-size: 12px; font-weight: 700; color: var(--green); }
.chart-tooltip.hidden { display: none; }
/* Enlarge SVG mark hit feedback */
.col-g rect { transition: filter .15s ease; cursor: pointer; }
.col-g rect:hover { filter: brightness(1.15); }
.bar-row { cursor: pointer; }
@media (max-width: 1200px) { .wp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .appr-metrics.operational-review-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sort-form .g2, .sort-activity-card .grid-2 { grid-template-columns: 1fr; }
  .operational-carbon-heading { flex-direction: column; }
}

/* Responsive role navigation and driver-first mobile layout. */
@media (max-width: 900px) {
  body:not([data-role="driver"]):not([data-role="customer_view"]):not([data-role="customer_master"]) { overflow-y:auto; }
  .app-shell { display: block; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { position: sticky; top: 0; height: auto; min-height: 0; z-index: 50; }
  .sidebar .brand { padding: 10px 12px; }
  .sidebar nav { flex: 0 0 auto; max-height: 108px; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; padding: 8px; gap: 6px; }
  .sidebar nav .nav-section-label { display: none; }
  .sidebar nav button { width: auto; min-width: max-content; padding: 8px 10px; }
  .sidebar .side-card { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px; z-index: 70; background: rgba(13,15,20,.96); border-top: 1px solid var(--line); }
  .sidebar .side-card .notification-bell { display: none; }
  main { height: auto; min-height: calc(100vh - 120px); overflow: visible; }
  main { padding-bottom: 58px; }
  .topbar { position: sticky; top: 0; z-index: 40; }
  .driver-mobile-shell { width: min(100%, 680px); margin: 0 auto; padding: 12px; }
  .driver-mobile-shell .driver-next { margin: 0; }
  .driver-mobile-shell .driver-point-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================================================
   END WASTE PERFORMANCE
   ============================================================ */

/* ============================================================
   MASTER / ESG PORTAL — dark-theme readability fix (visual only)
   Kills every white-on-white card in the customer/master portal.
   ============================================================ */
#view-customer { color: #f8fafc; }

/* Half-light hero gradients -> full dark */
#view-customer .mp-command-hero,
#view-customer .master-hero,
#view-customer .master-mission-hero {
  background: radial-gradient(circle at 90% 8%, rgba(61,214,140,.14), transparent 42%), linear-gradient(135deg, #141822, #1b2530) !important;
  color: #f8fafc !important; box-shadow: none !important;
}
#view-customer .master-mission-hero.amber { background: linear-gradient(135deg,#241f12,#3a3016) !important; }
#view-customer .master-mission-hero.red { background: linear-gradient(135deg,#241310,#3d1f18) !important; }

/* White / cream cards -> dark panel */
#view-customer .mp-command-progress,
#view-customer .mp-info-strip article,
#view-customer .mp-league-card,
#view-customer .mp-report-grid article,
#view-customer .mp-risk-card,
#view-customer .mp-kpi,
#view-customer .mp-card,
#view-customer .mp-action-item,
#view-customer .mp-stat-box,
#view-customer .mp-details-card,
#view-customer .master-hero-metrics article,
#view-customer .master-mission-grid article,
#view-customer .master-action-list article,
#view-customer .master-goal-box,
#view-customer .master-goal-triplet,
#view-customer .master-goal-period-grid > article,
#view-customer .master-goal-mini,
#view-customer .master-goal-rules article,
#view-customer .master-goal-locked-note,
#view-customer .master-campaign-purpose,
#view-customer .master-branch-goal-card,
#view-customer .master-mission-table,
#view-customer .master-mission-card,
#view-customer .master-campaign-challenge,
#view-customer .master-risk-reasons article,
#view-customer .master-linebar-row,
#view-customer .master-pie-legend,
#view-customer .master-status-grid article,
#view-customer .master-target-numbers article,
#view-customer .master-insight-list article,
#view-customer .master-campaign-branches,
#view-customer .master-goal-onboarding-card,
#view-customer .master-slide-body,
#view-customer .master-empty {
  background: #161920 !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}

/* Detail summary bars */
#view-customer .mp-details-card summary,
#view-customer .master-goal-details summary { background: rgba(255,255,255,.05) !important; color: #f8fafc !important; }

/* Status-tinted cards (keep meaning, go dark) */
#view-customer .mp-league-card.green, #view-customer .mp-risk-card.green,
#view-customer .master-mission-card.green, #view-customer .master-campaign-challenge.green { background: rgba(61,214,140,.09) !important; border-color: rgba(61,214,140,.28) !important; }
#view-customer .mp-league-card.amber, #view-customer .mp-risk-card.amber,
#view-customer .master-mission-card.amber, #view-customer .master-campaign-challenge.amber { background: rgba(245,158,11,.09) !important; border-color: rgba(245,158,11,.28) !important; }
#view-customer .mp-league-card.red, #view-customer .mp-risk-card.red,
#view-customer .master-mission-card.red, #view-customer .master-campaign-challenge.red { background: rgba(239,68,68,.09) !important; border-color: rgba(239,68,68,.28) !important; }

/* Ensure card values / headings stay readable */
#view-customer .mp-kpi strong, #view-customer .mp-stat-val,
#view-customer .mp-card h3, #view-customer .mp-command-progress strong,
#view-customer .master-hero-metrics article strong { color: #f8fafc !important; }

/* Tab bars */
#view-customer .mp-tabs, #view-customer .master-tabs { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
#view-customer .mp-tabs button, #view-customer .master-tabs button { color: #94a3b8 !important; }
#view-customer .mp-tabs button:hover, #view-customer .master-tabs button:hover { background: rgba(61,214,140,.1) !important; color: #3dd68c !important; }
#view-customer .mp-tabs button.active, #view-customer .master-tabs button.active { background: #3dd68c !important; color: #08130d !important; box-shadow: none !important; }

/* Tables */
#view-customer .mp-table th, #view-customer .master-mission-table th { background: rgba(255,255,255,.03) !important; color: #94a3b8 !important; }
#view-customer .mp-table td, #view-customer .master-mission-table td { color: #f8fafc !important; border-color: rgba(255,255,255,.05) !important; }
#view-customer .mp-table tr.click-row:hover td, #view-customer .mp-table tr:hover td { background: rgba(255,255,255,.03) !important; }
#view-customer .master-mission-table tr.green td { background: rgba(61,214,140,.06) !important; }
#view-customer .master-mission-table tr.amber td { background: rgba(245,158,11,.06) !important; }
#view-customer .master-mission-table tr.red td { background: rgba(239,68,68,.06) !important; }

/* action-item hover + info-strip accent */
#view-customer .mp-action-item:hover { background: rgba(61,214,140,.08) !important; border-color: rgba(61,214,140,.3) !important; }
#view-customer .master-mission-action span { background: rgba(255,255,255,.06) !important; color: #94a3b8 !important; border-color: rgba(255,255,255,.08) !important; }

/* Pie/donut legend row hover was light (#f6fbf8) -> white row in dark mode */
.pie-item:hover { background: rgba(255,255,255,.06) !important; }
#view-customer .pie-legend, #view-customer .pie-shell { background: transparent !important; }
#view-customer .pie-item { color: #f8fafc !important; }

/* ============================================================
   CLIENT OVERVIEW — Impact Hero (Plan A)
   ============================================================ */
.ch-hero {
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.8fr);
  gap: 20px; align-items: center;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(61,214,140,.24), transparent 55%),
    radial-gradient(ellipse at 95% 110%, rgba(61,214,140,.10), transparent 50%),
    #10141b;
  border: 1px solid rgba(61,214,140,.16); border-radius: 20px;
  padding: 30px 32px 0; overflow: hidden; margin-bottom: 18px;
}
.ch-hero-main { padding-bottom: 26px; }
.ch-hero-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7d8694; margin-bottom: 12px; }
.ch-hero-title { font-size: 30px; font-weight: 800; line-height: 1.22; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.ch-hero-title em { font-style: normal; color: #3dd68c; }
.ch-hero-sub { font-size: 13px; color: #8a93a0; margin: 0 0 18px; max-width: 52ch; line-height: 1.55; }
.ch-hero-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ch-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,140,.12); border: 1px solid rgba(61,214,140,.32); color: #a4f0c9; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; }
.ch-chip i { font-style: normal; font-size: 13px; }
.ch-chip-click { cursor: pointer; transition: background .15s, transform .15s; }
.ch-chip-click:hover { background: rgba(61,214,140,.22); transform: translateY(-1px); }
.ch-hero-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 26px; }
.ch-stage-card { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 18px; text-align: left; }
.ch-stage-card span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7d8694; margin-bottom: 4px; }
.ch-stage-card strong { display: block; font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; }
.ch-stage-card small { font-size: 11px; color: #7d8694; }
.ch-orbit { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 1px; background: radial-gradient(circle at center, #10141b 0 58%, transparent 59%), conic-gradient(#3dd68c 0 calc(var(--pct,75)*1%), rgba(255,255,255,.08) 0 100%); border: 1px solid rgba(255,255,255,.08); }
.ch-orbit span { font-size: 19px; font-weight: 900; color: #fff; }
.ch-orbit small { font-size: 9.5px; color: #7d8694; text-transform: uppercase; letter-spacing: .05em; }
.ch-hero-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.08); margin: 0 -32px; padding: 0; }
.ch-hero-strip article { padding: 15px 22px; border-right: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); }
.ch-hero-strip article:last-child { border-right: none; }
.ch-hero-strip span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7d8694; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-hero-strip strong { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.ch-strip-click { cursor: pointer; transition: background .15s; }
.ch-strip-click:hover { background: rgba(61,214,140,.10); }
.ch-strip-click strong { color: #3dd68c; }
.ch-rank-overview { display: grid; align-content: start; gap: 5px; position: relative; overflow: hidden; isolation: isolate; }
.ch-rank-overview::before { content: ''; position: absolute; left: -35%; right: -35%; bottom: 2px; height: 34px; z-index: -2; opacity: .78; background: linear-gradient(100deg, transparent 5%, rgba(61,214,140,.04) 18%, rgba(61,214,140,.34) 42%, rgba(44,213,194,.24) 58%, transparent 82%); filter: blur(7px); transform: rotate(-3deg); animation: rankEcoFlow 5.5s ease-in-out infinite; pointer-events: none; }
.ch-rank-overview::after { content: ''; position: absolute; left: 12%; right: 8%; bottom: 8px; height: 2px; z-index: -1; opacity: .78; background: linear-gradient(90deg, transparent, rgba(61,214,140,.55), rgba(44,213,194,.72), transparent); box-shadow: 0 0 10px rgba(61,214,140,.36); transform: rotate(-3deg); animation: rankEcoFlowLine 4.2s ease-in-out infinite reverse; pointer-events: none; }
.ch-rank-overview.rank-tier-champion::before { background: linear-gradient(100deg, transparent 5%, rgba(205,186,74,.05) 18%, rgba(185,245,109,.38) 42%, rgba(61,214,140,.26) 58%, transparent 82%); }
.ch-rank-overview.rank-tier-top10::before { background: linear-gradient(100deg, transparent 5%, rgba(61,214,140,.04) 18%, rgba(70,171,139,.32) 42%, rgba(44,213,194,.26) 58%, transparent 82%); }
@keyframes rankEcoFlow { 0%, 100% { transform: translateX(-7%) rotate(-3deg); } 50% { transform: translateX(7%) rotate(-3deg); } }
@keyframes rankEcoFlowLine { 0%, 100% { transform: translateX(-5%) rotate(-3deg); opacity: .42; } 50% { transform: translateX(5%) rotate(-3deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ch-rank-overview::before, .ch-rank-overview::after { animation: none; } }
.ch-rank-overview-badge { min-height: 24px; display: flex; align-items: center; }
.ch-rank-overview-badge { justify-content: center; }
.ch-rank-overview-badge .rank-pill { margin: 0 auto; }
.ch-rank-impact-note { color: #76ecaa !important; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rank-method-note { margin: -6px 0 10px; color: #7d8694; font-size: 11px; line-height: 1.4; }
.rank-pill-cell { width: 170px; }
.rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 122px;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(61,214,140,.28);
  background: rgba(61,214,140,.10);
  color: #eafff3;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.rank-pill-icon,
.rank-pill-no,
.rank-pill-label { display: inline-flex; align-items: center; line-height: 1; }
.rank-pill-icon { font-size: 13px; }
.rank-pill-no { font-size: 16px; letter-spacing: 0; }
.rank-pill-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.rank-pill-mini { min-width: 70px; }
.rank-pill-compact { min-width: 0; min-height: 24px; padding: 4px 8px; gap: 5px; }
.rank-pill-compact .rank-pill-no { font-size: 13px; }
.rank-pill-champion { border-color: rgba(185,245,109,.40); background: linear-gradient(135deg, rgba(185,245,109,.25), rgba(61,214,140,.16)); color: #f2ffd4; }
.rank-pill-river { border-color: rgba(76,182,196,.42); background: linear-gradient(135deg, rgba(76,182,196,.24), rgba(61,214,140,.12)); color: #dffbff; }
.rank-pill-earth { border-color: rgba(168,136,84,.42); background: linear-gradient(135deg, rgba(168,136,84,.26), rgba(61,214,140,.12)); color: #fff0d2; }
.rank-pill-grove { border-color: rgba(61,214,140,.28); background: rgba(61,214,140,.10); color: #eafff3; }
.rank-pill-plain { color: #d7fbe5; }
.ch-rank-overview small,
.ch-recyclable-rank small { color: #7d8694; line-height: 1.35; }
.ch-rank-overview small { display: block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-rank-overview .rank-pill {
  min-width: 0;
  width: auto;
  max-width: none;
}
.ch-rank-overview .rank-pill.rank-pill-compact {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
@media (max-width: 1100px) {
  .ch-hero { grid-template-columns: 1fr; padding: 24px 24px 0; }
  .ch-hero-side { flex-direction: row; justify-content: space-between; width: 100%; }
  .ch-hero-strip { grid-template-columns: repeat(4,1fr); margin: 0 -24px; }
  .ch-hero-strip article:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.06); }
}

/* Final customer/master Home shell overrides. */
body[data-role="customer_view"] .app-shell,
body[data-role="customer_master"] .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
body[data-role="customer_view"] .sidebar,
body[data-role="customer_master"] .sidebar { display: none !important; }
body[data-role="customer_view"] main,
body[data-role="customer_master"] main { grid-column: 1 !important; width: 100%; min-width: 0; padding: 0 !important; }
body[data-role="customer_view"] .topbar,
body[data-role="customer_master"] .topbar { display: none !important; }
body[data-role="customer_view"] .portal-shell,
body[data-role="customer_master"] .portal-shell { display: block !important; align-content: start !important; }
body[data-role="customer_view"] .portal-section-controls,
body[data-role="customer_master"] .portal-section-controls { height: auto !important; min-height: 58px !important; }


/* ============================================================
   DRIVER ROUTE — Concept 2 rescue skin (overrides earlier rules)
   ============================================================ */
.driver-route-shell { width: min(100%, 400px); margin: 10px auto; display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid #2b333d; border-radius: 26px; background: #10151c; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
body[data-role="driver"] .driver-route-shell { width: min(100%, 400px); grid-template-rows: none; display: flex; padding: 0; }

.driver-route-shell .driver-route-appbar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 16px 16px 12px; min-height: 0; }
.driver-route-shell .driver-route-appbar strong { font-size: 16px; font-weight: 800; color: #fff; text-align: center; }
.driver-route-shell .driver-route-icon { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: #cbd5e1; font-size: 15px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.driver-route-shell .driver-route-icon:hover { background: rgba(255,255,255,.12); }

.driver-route-shell .driver-route-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 0; margin: 0 16px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; }
.driver-route-shell .driver-route-summary span { padding: 10px 14px; border: none; border-right: 1px solid rgba(255,255,255,.08); border-radius: 0; background: transparent; font-size: 12px; font-weight: 700; color: #cbd5e1; text-align: center; white-space: nowrap; }
.driver-route-shell .driver-route-summary span:last-child { border-right: none; color: #3dd68c; }

.driver-route-shell .driver-route-timeline { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; position: relative; max-height: 56vh; overflow-y: auto; }
.driver-route-shell .driver-route-timeline::-webkit-scrollbar { width: 4px; }
.driver-route-shell .driver-route-timeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.driver-route-shell .driver-route-stop { position: relative; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #171d26; overflow: visible; }
.driver-route-shell .driver-route-stop:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 100%; height: 10px; width: 2px; background: rgba(255,255,255,.12); }
.driver-route-shell .driver-route-stop.completed { opacity: 1; }
.driver-route-shell .driver-route-stop.completed .driver-route-stop-copy strong { color: #8fa0b0; text-decoration: line-through; text-decoration-color: rgba(143,160,176,.5); }
.driver-route-shell .driver-route-stop.current { background: rgba(61,214,140,.08); border-color: rgba(61,214,140,.55); box-shadow: 0 0 0 1px rgba(61,214,140,.2), 0 8px 26px rgba(61,214,140,.08); }

.driver-route-shell .driver-route-stop-head { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 13px 14px; background: transparent; border: none; text-align: left; cursor: pointer; }
.driver-route-shell .driver-route-marker { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; background: transparent; border: 2px solid rgba(255,255,255,.28); color: #cbd5e1; }
.driver-route-shell .current .driver-route-marker { border-color: #3dd68c; color: #3dd68c; background: transparent; }
.driver-route-shell .completed .driver-route-marker { background: #3dd68c; border-color: #3dd68c; color: #08130d; }
.driver-route-shell .driver-route-stop-copy strong { font-size: 13.5px; color: #f3f6f8; }
.driver-route-shell .driver-route-stop-copy small { font-size: 11px; color: #8fa0b0; }
.driver-route-shell .driver-route-status { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8fa0b0; }
.driver-route-shell .current .driver-route-status { color: #08130d; background: #3dd68c; padding: 3px 9px; border-radius: 20px; }
.driver-route-shell .completed .driver-route-status { color: #3dd68c; }

.driver-route-shell .driver-route-stop-detail { padding: 0; border-top: 1px solid rgba(61,214,140,.25); }
.driver-route-shell .driver-route-actions { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid rgba(61,214,140,.25); }
.driver-route-shell .driver-route-actions a,
.driver-route-shell .driver-route-actions button,
.driver-route-shell .driver-route-actions span { padding: 11px 0; text-align: center; background: none; border: none; border-right: 1px solid rgba(61,214,140,.2); color: #3dd68c; font-size: 12.5px; font-weight: 800; text-decoration: none; cursor: pointer; }
.driver-route-shell .driver-route-actions > *:last-child { border-right: none; }
.driver-route-shell .driver-route-actions span { color: #55606c; cursor: default; }
.driver-route-shell .driver-route-photo input[type=file] { display: none; }
.driver-route-shell .driver-route-primary { padding: 13px 14px 6px; }
.driver-route-shell .driver-primary-btn { display: block; width: 100%; background: #3dd68c; color: #08130d; border: none; border-radius: 12px; padding: 13px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-align: center; }
.driver-route-shell .driver-primary-btn:hover { background: #2fc478; }
.driver-route-shell .driver-route-more { display: block; width: 100%; padding: 4px 0 12px; background: none; border: none; color: #a4f0c9; font-size: 11.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }

.driver-route-shell .driver-route-empty { margin: 4px 0 8px; padding: 44px 18px; border: 1px dashed rgba(255,255,255,.16); border-radius: 16px; display: grid; gap: 6px; place-items: center; color: #8fa0b0; }
.driver-route-shell .driver-route-empty strong { color: #f3f6f8; font-size: 17px; }

.driver-route-shell .driver-route-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 10px 14px 16px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.22); }
.driver-route-shell .driver-route-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; background: none; border: none; border-radius: 12px; color: #8fa0b0; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.driver-route-shell .driver-route-nav button i { font-style: normal; font-size: 16px; line-height: 1; }
.driver-route-shell .driver-route-nav button:hover { color: #cbd5e1; }
.driver-route-shell .driver-route-nav button.active { color: #3dd68c; background: rgba(61,214,140,.12); }

/* ============================================================
   DRIVER ROUTE — FINAL override (beats body[data-role] rules)
   ============================================================ */
body[data-role="driver"] .driver-route-shell { width: min(100%, 400px); margin: 10px auto; display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid #2b333d; border-radius: 26px; background: #10151c; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
body[data-role="driver"] .driver-route-appbar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 16px 16px 12px; min-height: 0; }
body[data-role="driver"] .driver-route-appbar strong { font-size: 16px; font-weight: 800; color: #fff; }
body[data-role="driver"] .driver-route-icon { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: #cbd5e1; font-size: 15px; display: grid; place-items: center; }

body[data-role="driver"] .driver-route-summary { display: grid; grid-template-columns: auto 1fr auto; margin: 0 16px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; font-size: 12px; }
body[data-role="driver"] .driver-route-summary span { padding: 10px 14px; border-right: 1px solid rgba(255,255,255,.08); font-weight: 700; color: #cbd5e1; white-space: nowrap; }
body[data-role="driver"] .driver-route-summary span:last-child { border-right: none; color: #3dd68c; }

body[data-role="driver"] .driver-route-timeline { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; max-height: none; overflow-y: auto; }
body[data-role="driver"] .driver-route-timeline::before { content: none; }

body[data-role="driver"] .driver-route-stop { position: relative; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #171d26; overflow: visible; }
body[data-role="driver"] .driver-route-stop:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 100%; height: 10px; width: 2px; background: rgba(255,255,255,.14); }
body[data-role="driver"] .driver-route-stop.completed { opacity: 1; }
body[data-role="driver"] .driver-route-stop.completed .driver-route-stop-copy strong { color: #8fa0b0; text-decoration: line-through; text-decoration-color: rgba(143,160,176,.5); }
body[data-role="driver"] .driver-route-stop.current { background: rgba(61,214,140,.08); border-color: rgba(61,214,140,.55); box-shadow: 0 0 0 1px rgba(61,214,140,.2); }

body[data-role="driver"] .driver-route-stop-head { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; }
body[data-role="driver"] .driver-route-marker { position: static; left: auto; top: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; background: transparent; border: 2px solid rgba(255,255,255,.28); color: #cbd5e1; z-index: auto; }
body[data-role="driver"] .current .driver-route-marker { border-color: #3dd68c; color: #3dd68c; background: transparent; }
body[data-role="driver"] .completed .driver-route-marker { background: #3dd68c; border-color: #3dd68c; color: #08130d; }

body[data-role="driver"] .driver-route-stop-copy strong { font-size: 13.5px; color: #f3f6f8; }
body[data-role="driver"] .driver-route-stop-copy small { font-size: 11px; color: #8fa0b0; }
body[data-role="driver"] .driver-route-status { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8fa0b0; }
body[data-role="driver"] .driver-route-status.done { color: #fff; background: linear-gradient(135deg, #3730a3, #6d28d9); padding: 5px 10px; border: 1px solid rgba(196,181,253,.72); border-radius: 999px; box-shadow: 0 4px 10px rgba(91,33,182,.18); font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1; text-transform: none; }
body[data-role="driver"] .driver-route-status.arrived { color: #60a5fa; background: rgba(96,165,250,.14); padding: 4px 8px; border-radius: 999px; }
body[data-role="driver"] .driver-route-status.confirmed { color: #f2b84b; background: rgba(242,184,75,.14); padding: 4px 8px; border-radius: 999px; }
body[data-role="driver"] .driver-route-status.pending { color: #aeb9c5; background: rgba(174,185,197,.10); padding: 4px 8px; border-radius: 999px; }
body[data-role="driver"] .current .driver-route-status { color: #08130d; background: #3dd68c; padding: 3px 9px; border-radius: 20px; }
body[data-role="driver"] .completed .driver-route-status { color: #f7f1ff; }

body[data-role="driver"] .driver-route-stop-detail { padding: 0; border-top: 1px solid rgba(61,214,140,.25); }
body[data-role="driver"] .driver-route-current { padding-top: 0; border-top: none; display: block; }
body[data-role="driver"] .driver-live-status { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(61,214,140,.35); border-radius: 10px; background: rgba(61,214,140,.10); }
body[data-role="driver"] .driver-live-status.arrived { border-color: rgba(96,165,250,.42); background: rgba(96,165,250,.10); }
body[data-role="driver"] .driver-live-status.done { border-color: rgba(61,214,140,.28); background: rgba(61,214,140,.06); }
body[data-role="driver"] .driver-live-status-dot { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #3dd68c; box-shadow: 0 0 0 4px rgba(61,214,140,.14); }
body[data-role="driver"] .driver-live-status.arrived .driver-live-status-dot { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.14); }
body[data-role="driver"] .driver-live-status > div { display: grid; gap: 2px; }
body[data-role="driver"] .driver-live-status strong { color: #f5fff9; font-size: 11px; letter-spacing: .06em; }
body[data-role="driver"] .driver-live-status small { color: #b7c9c0; font-size: 10px; line-height: 1.35; }
body[data-role="driver"] .driver-live-status em { color: #75e9aa; font-size: 9px; font-style: normal; font-weight: 700; }
body[data-role="driver"] .driver-route-actions { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid rgba(61,214,140,.25); }
body[data-role="driver"] .driver-route-actions a,
body[data-role="driver"] .driver-route-actions button,
body[data-role="driver"] .driver-route-actions span { min-height: 40px; display: grid; place-items: center; border-right: 1px solid rgba(61,214,140,.2); color: #3dd68c; font-size: 12.5px; font-weight: 800; }
body[data-role="driver"] .driver-route-actions > :last-child { border-right: none; }
body[data-role="driver"] .driver-route-actions span { color: #55606c; }
body[data-role="driver"] .driver-route-primary { padding: 13px 14px 6px; }
body[data-role="driver"] .driver-route-primary .driver-primary-btn { min-height: 44px; background: #3dd68c; color: #08130d; border-radius: 12px; font-size: 13px; font-weight: 800; }
body[data-role="driver"] .driver-route-more { display: block; width: 100%; padding: 4px 0 12px; color: #a4f0c9; font-size: 11.5px; font-weight: 700; text-decoration: underline; justify-self: stretch; }

body[data-role="driver"] .driver-route-nav { position: static; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; padding: 10px 10px 16px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0; background: rgba(0,0,0,.22); backdrop-filter: none; }
body[data-role="driver"] .driver-route-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; padding: 8px 0; border-radius: 12px; color: #8fa0b0; font-size: 10.5px; font-weight: 700; }
body[data-role="driver"] .driver-route-nav button i { font-style: normal; font-size: 16px; line-height: 1; }
body[data-role="driver"] .driver-route-nav button.active { color: #3dd68c; background: rgba(61,214,140,.12); font-weight: 800; }
.driver-aspen-return { display: grid; gap: 7px; margin: 4px 16px 12px 42px; padding: 14px; border: 1px solid rgba(61,214,140,.45); border-radius: 13px; background: linear-gradient(145deg, rgba(14,73,47,.85), rgba(9,39,29,.92)); }
.driver-aspen-return-label { color: #6ff0ae; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.driver-aspen-return strong { color: #f8fafc; font-size: 14px; }
.driver-aspen-return p, .driver-aspen-return small { margin: 0; color: #a9bab2; font-size: 10.5px; line-height: 1.4; }
.driver-aspen-return button { min-height: 42px; margin-top: 4px; border: 0; border-radius: 10px; background: #3dd68c; color: #08130d; font-size: 11px; font-weight: 900; }
.driver-aspen-return button:disabled { opacity: .65; cursor: wait; }
.driver-carryover { display: grid; gap: 7px; margin: 4px 16px 12px 42px; padding: 14px; border: 1px solid rgba(245,158,11,.45); border-radius: 13px; background: linear-gradient(145deg, rgba(84,54,12,.55), rgba(45,31,11,.8)); }
.driver-carryover strong { color: #f8fafc; font-size: 14px; }
.driver-carryover p { margin: 0; color: #e6c27a; font-size: 10.5px; line-height: 1.5; }
.driver-carryover button { min-height: 40px; margin-top: 4px; border: 0; border-radius: 10px; background: #f2b84b; color: #201507; font-size: 11px; font-weight: 900; }

/* ============================================================
   DRIVER IN-APP SHEET — popups stay inside the phone shell
   ============================================================ */
body[data-role="driver"] .driver-route-shell { position: relative; min-height: 0; }
/* Driver is a mobile-only operational surface, even when opened on a desktop browser. */
body[data-role="driver"] { min-height: 100dvh; overflow: hidden; background: #10151c; }
body[data-role="driver"] .app-shell { display: block !important; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
body[data-role="driver"] .sidebar { display: none !important; }
body[data-role="driver"] .topbar,
body[data-role="driver"] #kpiGrid { display: none !important; }
body[data-role="driver"] main { display: block !important; width: 100%; height: 100dvh; min-width: 0; padding: 0 !important; overflow: hidden; background: #10151c; }
body[data-role="driver"] #view-driver { display: block !important; width: 100%; height: 100dvh; min-height: 0; padding: 0 !important; overflow: hidden; }
body[data-role="driver"] .driver-route-shell { width: min(100%, 430px); height: 100dvh; min-height: 0; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; }
.driver-sheet { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #10151c; border-radius: 26px; animation: driverSheetUp .18s ease; }
.driver-sheet.hidden { display: none; }
@keyframes driverSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.driver-sheet-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.driver-sheet-head strong { flex: 1; font-size: 15px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-sheet-close { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; font-size: 13px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.driver-sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }
.driver-sheet-body::-webkit-scrollbar { width: 4px; }
.driver-sheet-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

/* Dark-mode fixes for stop-detail content rendered inside the sheet */
.driver-sheet-body { color: #f8fafc; }
.driver-sheet-body h3 { color: #fff; font-size: 13.5px; }
.driver-sheet-body .muted, .driver-sheet-body small { color: #8fa0b0 !important; }
.driver-sheet-body .driver-progress { gap: 6px; }
.driver-sheet-body .driver-step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #8fa0b0; font-size: 11px; }
.driver-sheet-body .driver-step.done { background: rgba(61,214,140,.14); border-color: rgba(61,214,140,.4); color: #3dd68c; }
.driver-sheet-body .driver-action-strip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.driver-sheet-body .driver-primary-btn { background: #3dd68c !important; color: #08130d !important; border: none; }
.driver-sheet-body .button-link { display: grid; place-items: center; min-height: 44px; border-radius: 12px; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #f8fafc !important; font-weight: 800; text-decoration: none; }
.driver-sheet-body .button-link.secondary-link { background: rgba(255,255,255,.07) !important; color: #a4f0c9 !important; }
.driver-sheet-body a.driver-primary-btn { background: #3dd68c !important; color: #08130d !important; }
.driver-sheet-body input, .driver-sheet-body textarea, .driver-sheet-body select { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #f8fafc; border-radius: 10px; }
.driver-sheet-body input::placeholder, .driver-sheet-body textarea::placeholder { color: #66717d; }
.driver-sheet-body input[type="file"] { color: #8fa0b0; }
.driver-sheet-body details { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; }
.driver-sheet-body details summary { color: #f8fafc; font-weight: 700; cursor: pointer; padding: 6px 0; }
.driver-sheet-body .driver-evidence-card, .driver-sheet-body .driver-exception-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.driver-sheet-body .driver-evidence-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #f8fafc; }
.driver-sheet-body .driver-evidence-item.ok { background: rgba(61,214,140,.1); border-color: rgba(61,214,140,.3); }
.driver-history-toolbar { display: grid; gap: 3px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(61,214,140,.22); border-radius: 10px; background: rgba(61,214,140,.07); }
.driver-history-toolbar strong { color: #f8fafc; font-size: 13px; }
.driver-history-toolbar small { color: #91a69b; font-size: 10px; }
.driver-sheet-body .driver-evidence-item.warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.32); }
.driver-sheet-body .gps-chip.ok { background: rgba(61,214,140,.15); color: #3dd68c; }
.driver-sheet-body .gps-chip.warn { background: rgba(245,158,11,.15); color: #f59e0b; }
.driver-sheet-body .record-card, .driver-sheet-body .compact-record { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.1) !important; color: #f8fafc !important; }
.driver-sheet-body .drawer-section { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px 14px; }
.driver-sheet-body .profile-compact label span, .driver-sheet-body .profile-field span { color: #8fa0b0 !important; }
.driver-sheet-body .profile-compact strong, .driver-sheet-body .profile-field strong { color: #f8fafc !important; }
.driver-sheet-body .metric-card, .driver-sheet-body .grid-3 > * { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.1) !important; color: #f8fafc !important; border-radius: 12px; }

/* Kill sidebar `nav{flex:1}` inheritance on the driver bottom bar */
body[data-role="driver"] .driver-route-nav { flex: 0 0 auto; height: auto; margin-top: auto; overflow: visible; align-content: center; }
body[data-role="driver"] .driver-route-nav { grid-template-columns: repeat(4, 1fr); }

body[data-role="driver"] .driver-dashboard-view { position: relative; width: min(100%, 430px); height: 100dvh; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding: max(18px, env(safe-area-inset-top)) 16px 0; border: 0; border-radius: 0; background: #10151c; box-shadow: none; overflow-y: auto; overflow-x: hidden; }
body[data-role="driver"] .driver-dashboard-greeting { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 4px 4px 6px; }
body[data-role="driver"] .driver-dashboard-greeting > div { display: grid; gap: 4px; min-width: 0; }
body[data-role="driver"] .driver-dashboard-greeting span, body[data-role="driver"] .driver-aspen-return-label { color: #3dd68c; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
body[data-role="driver"] .driver-dashboard-greeting strong { color: #f2f6f8; font-size: 21px; }
body[data-role="driver"] .driver-dashboard-greeting small, body[data-role="driver"] .driver-dashboard-status small { color: #8fa0b0; font-size: 12px; }
body[data-role="driver"] .driver-visible-logout { min-height: 36px; padding: 0 11px; border: 1px solid rgba(248,113,113,.35); border-radius: 10px; background: rgba(239,68,68,.1); color: #f87171; font-size: 11px; font-weight: 900; cursor: pointer; }
body[data-role="driver"] .driver-visible-logout:hover { background: rgba(239,68,68,.18); }
body[data-role="driver"] .driver-route-appbar { grid-template-columns: 40px minmax(0,1fr) 40px auto; gap: 6px; }
body[data-role="driver"] .driver-dashboard-status { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(61,214,140,.42); border-radius: 14px; background: rgba(61,214,140,.09); }
body[data-role="driver"] .driver-dashboard-status.arrived { border-color: rgba(87,164,232,.55); background: rgba(87,164,232,.11); }
body[data-role="driver"] .driver-dashboard-status.done { border-color: rgba(61,214,140,.25); }
body[data-role="driver"] .driver-dashboard-status > div { display: grid; gap: 3px; }
body[data-role="driver"] .driver-dashboard-status strong { color: #f2f6f8; font-size: 12px; }
body[data-role="driver"] .driver-live-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #3dd68c; box-shadow: 0 0 0 4px rgba(61,214,140,.13); }
body[data-role="driver"] .driver-dashboard-status.arrived .driver-live-status-dot { background: #57a4e8; box-shadow: 0 0 0 4px rgba(87,164,232,.14); }
body[data-role="driver"] .driver-dashboard-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
body[data-role="driver"] .driver-dashboard-kpis article { display: grid; gap: 5px; padding: 13px; border: 1px solid #2b333d; border-radius: 12px; background: #171d25; }
body[data-role="driver"] .driver-dashboard-kpis small, body[data-role="driver"] .driver-dashboard-progress span { color: #8fa0b0; font-size: 11px; }
body[data-role="driver"] .driver-dashboard-kpis strong { color: #f2f6f8; font-size: 23px; }
body[data-role="driver"] .driver-dashboard-progress { display: grid; gap: 8px; padding: 13px; border: 1px solid #2b333d; border-radius: 12px; background: #171d25; }
body[data-role="driver"] .driver-dashboard-progress > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
body[data-role="driver"] .driver-dashboard-progress strong { color: #f2f6f8; font-size: 12px; }
body[data-role="driver"] .driver-dashboard-progress-bar { height: 8px; overflow: hidden; border-radius: 99px; background: #27313a; }
body[data-role="driver"] .driver-dashboard-progress-bar i { display: block; height: 100%; border-radius: inherit; background: #3dd68c; }
body[data-role="driver"] .driver-dashboard-next { display: grid; gap: 7px; margin-top: auto; padding: 15px; border: 1px solid rgba(61,214,140,.42); border-radius: 14px; background: rgba(15,74,51,.7); }
body[data-role="driver"] .driver-dashboard-next strong { color: #f2f6f8; font-size: 15px; }
body[data-role="driver"] .driver-dashboard-next button { width: 100%; padding: 11px; border: 0; border-radius: 10px; background: #3dd68c; color: #07100d; font-weight: 900; cursor: pointer; }
body[data-role="driver"] .driver-dashboard-view .driver-route-nav { position: sticky; bottom: 0; z-index: 4; width: calc(100% + 32px); margin: 0 -16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
body[data-role="driver"] .driver-route-timeline { flex: 1 1 auto; min-height: 0; }
body[data-role="driver"] .driver-replace-photo-btn { background: #263647 !important; color: #a9d0f3 !important; border: 1px solid rgba(96,165,250,.38) !important; }

@media (max-width: 480px) {
  body[data-role="driver"] .driver-dashboard-view,
  body[data-role="driver"] .driver-route-shell { width: 100%; max-width: none; }
  body[data-role="driver"] .driver-route-nav { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Driver Pulse — selected mobile concept */
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; }
body[data-role="driver"] .driver-pulse-view { gap: 0; padding: max(18px, env(safe-area-inset-top)) 16px 0; background: radial-gradient(circle at 50% 0%, rgba(15,72,57,.18), transparent 34%), #081017; }
body[data-role="driver"] .driver-pulse-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-role="driver"] .driver-pulse-brand-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
body[data-role="driver"] .driver-location-badge { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 7px; border: 1px solid rgba(61,214,140,.28); border-radius: 999px; background: rgba(61,214,140,.09); color: #8ee8b6; font-size: 9px; font-weight: 800; white-space: nowrap; }
body[data-role="driver"] .driver-location-badge .material-symbols-rounded { font-size: 14px; }
body[data-role="driver"] .driver-location-badge.pending { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #f5c56b; }
body[data-role="driver"] .driver-location-badge.denied { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); color: #fda4af; }
body[data-role="driver"] .driver-pulse-brandmark { display: flex; align-items: center; gap: 9px; min-width: 0; }
body[data-role="driver"] .driver-pulse-brandmark > .material-symbols-rounded { color: #55d482; font-size: 40px; font-variation-settings: 'FILL' 1; }
body[data-role="driver"] .driver-pulse-brandmark div { display: grid; gap: 1px; }
body[data-role="driver"] .driver-pulse-brandmark strong { color: #f4f7f8; font-size: 16px; letter-spacing: .08em; }
body[data-role="driver"] .driver-pulse-brandmark small { color: #53d680 !important; font-size: 10px; letter-spacing: .05em; }
body[data-role="driver"] .driver-pulse-brand .driver-visible-logout { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; }
body[data-role="driver"] .driver-pulse-brand .driver-visible-logout .material-symbols-rounded { font-size: 19px; }
body[data-role="driver"] .driver-pulse-greeting { display: grid; gap: 3px; margin-top: 18px; }
body[data-role="driver"] .driver-pulse-greeting strong { color: #f5f7f8; font-size: 19px; line-height: 1.2; }
body[data-role="driver"] .driver-pulse-greeting strong em { color: #55d482; font-style: normal; }
body[data-role="driver"] .driver-pulse-greeting small { color: #8b98a8 !important; font-size: 12px; }
body[data-role="driver"] .driver-pulse-overview { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 16px; align-items: center; margin-top: 18px; }
body[data-role="driver"] .driver-pulse-ring { width: 128px; height: 128px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#55d482 0 var(--driver-progress), #202b35 var(--driver-progress) 360deg); position: relative; }
body[data-role="driver"] .driver-pulse-ring::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #081017; }
body[data-role="driver"] .driver-pulse-ring > div { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; }
body[data-role="driver"] .driver-pulse-ring strong { color: #f8fafc; font-size: 31px; line-height: 1; }
body[data-role="driver"] .driver-pulse-ring strong b { margin: 0 4px; color: #dce2e7; font-size: 18px; }
body[data-role="driver"] .driver-pulse-ring span { margin-top: 8px; color: #55d482; font-size: 10px; font-weight: 800; line-height: 1.35; letter-spacing: .06em; }
body[data-role="driver"] .driver-pulse-summary { min-width: 0; padding-left: 14px; border-left: 1px solid #27323c; }
body[data-role="driver"] .driver-pulse-summary h2 { margin: 0; color: #f6f8f9; font-size: 18px; }
body[data-role="driver"] .driver-pulse-summary > p { margin: 3px 0 14px; color: #8b98a8; font-size: 11px; }
body[data-role="driver"] .driver-pulse-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
body[data-role="driver"] .driver-pulse-metrics article { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: transparent; text-align: center; }
body[data-role="driver"] .driver-pulse-metrics .material-symbols-rounded { font-size: 23px; }
body[data-role="driver"] .driver-pulse-metrics .blue { color: #54aaf0; }
body[data-role="driver"] .driver-pulse-metrics .green { color: #55d482; }
body[data-role="driver"] .driver-pulse-metrics .amber { color: #f2b84b; }
body[data-role="driver"] .driver-pulse-metrics strong { color: #f8fafc; font-size: 22px; line-height: 1.1; }
body[data-role="driver"] .driver-pulse-metrics small { color: #8b98a8 !important; font-size: 9px; line-height: 1.2; }
body[data-role="driver"] .driver-pulse-route { display: grid; gap: 9px; margin-top: 18px; }
body[data-role="driver"] .driver-pulse-route > h2 { margin: 0; color: #7f8c9c; font-size: 10px; letter-spacing: .14em; }
body[data-role="driver"] .driver-pulse-stop { display: grid; gap: 13px; padding: 15px; border: 1px solid rgba(61,214,140,.25); border-radius: 16px; background: linear-gradient(145deg, rgba(12,73,51,.55), rgba(8,26,29,.76)); }
body[data-role="driver"] .driver-pulse-stop.arrived { border-color: rgba(52,197,235,.42); background: linear-gradient(145deg, rgba(8,70,65,.62), rgba(8,29,37,.82)); }
body[data-role="driver"] .driver-pulse-stop-head { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; }
body[data-role="driver"] .driver-pulse-location { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid #43bce8; border-radius: 50%; color: #43bce8; font-size: 28px; }
body[data-role="driver"] .driver-pulse-stop-head > div { display: grid; gap: 5px; min-width: 0; }
body[data-role="driver"] .driver-pulse-stop-head strong { overflow: hidden; color: #f7f9fa; font-size: 18px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-pulse-stop-head div > span { width: fit-content; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; color: #43bce8; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
body[data-role="driver"] .driver-pulse-stop.active .driver-pulse-stop-head div > span, body[data-role="driver"] .driver-pulse-stop.completed .driver-pulse-stop-head div > span { color: #55d482; }
body[data-role="driver"] .driver-pulse-stop-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body[data-role="driver"] .driver-pulse-stop-meta > div { display: grid; grid-template-columns: 24px 1fr; column-gap: 7px; align-items: center; min-width: 0; }
body[data-role="driver"] .driver-pulse-stop-meta .material-symbols-rounded { grid-row: 1 / 3; color: #55d482; font-size: 24px; }
body[data-role="driver"] .driver-pulse-stop-meta > div:last-child .material-symbols-rounded { color: #54aaf0; }
body[data-role="driver"] .driver-pulse-stop-meta small { color: #65d98c !important; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
body[data-role="driver"] .driver-pulse-stop-meta strong { overflow: hidden; color: #f4f7f8; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-pulse-file { display: none; }
body[data-role="driver"] .driver-pulse-primary-wrap > button { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: #55d482; color: #07120d; font-size: 13px; font-weight: 900; }
body[data-role="driver"] .driver-pulse-primary-wrap > button.driver-pulse-primary { display: flex; align-items: center; justify-content: center; gap: 8px; }
body[data-role="driver"] .driver-pulse-primary-wrap .driver-pulse-primary .material-symbols-rounded { font-size: 24px; }
body[data-role="driver"] .driver-pulse-primary-wrap .driver-pulse-primary.replace { background: #263647; color: #a9d0f3; }
body[data-role="driver"] .driver-pulse-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
body[data-role="driver"] .driver-pulse-secondary > a, body[data-role="driver"] .driver-pulse-secondary > span { min-height: 52px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(61,214,140,.32); border-radius: 12px; color: #55d482; font-size: 11px; font-weight: 800; text-decoration: none; }
body[data-role="driver"] .driver-pulse-secondary .map { border-color: rgba(84,170,240,.36); color: #54aaf0; }
body[data-role="driver"] .driver-pulse-secondary .material-symbols-rounded { grid-row: 1 / 3; font-size: 23px; }
body[data-role="driver"] .driver-pulse-secondary b { font-size: 11px; }
body[data-role="driver"] .driver-pulse-secondary small { color: #8b98a8 !important; font-size: 8px; font-weight: 500; }
body[data-role="driver"] .driver-pulse-secondary .disabled { border-color: rgba(255,255,255,.1); color: #697684; }
body[data-role="driver"] .driver-pulse-next { display: grid; gap: 5px; }
body[data-role="driver"] .driver-pulse-next > span { color: #7f8c9c; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
body[data-role="driver"] .driver-pulse-next button { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid #28333d; border-radius: 12px; background: #111a22; text-align: left; }
body[data-role="driver"] .driver-pulse-next b { overflow: hidden; color: #f4f7f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-pulse-next small { color: #8b98a8 !important; font-size: 9px; }
body[data-role="driver"] .driver-pulse-next .material-symbols-rounded { grid-column: 2; grid-row: 1 / 3; color: #8b98a8; }
body[data-role="driver"] .driver-pulse-empty { min-height: 190px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 22px; border: 1px solid #28333d; border-radius: 16px; background: #111a22; text-align: center; }
body[data-role="driver"] .driver-pulse-empty > .material-symbols-rounded { color: #55d482; font-size: 38px; }
body[data-role="driver"] .driver-pulse-empty strong { color: #f4f7f8; font-size: 16px; }
body[data-role="driver"] .driver-pulse-empty small { max-width: 260px; color: #8b98a8 !important; font-size: 11px; line-height: 1.45; }
body[data-role="driver"] .driver-pulse-empty button { margin-top: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #55d482; color: #07120d; font-weight: 900; }
body[data-role="driver"] .driver-pulse-view > .driver-route-nav { position: sticky; bottom: 0; z-index: 4; width: calc(100% + 32px); margin: auto -16px 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: rgba(7,13,19,.96); }
body[data-role="driver"] .driver-route-nav button .material-symbols-rounded { font-size: 21px; }

/* Customer Collections — live operations and completed DO history share one workspace. */
.client-collections-workspace { display: grid; gap: 14px; }
.collection-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 8px;
  width: fit-content;
  padding: 6px;
  border: 1px solid #29333d;
  border-radius: 16px;
  background: #121820;
}
.collection-mode-tabs button {
  min-width: 190px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #8fa0b0;
  text-align: left;
}
.collection-mode-tabs button > span { grid-row: 1 / 3; align-self: center; color: #607082; font-size: 17px; text-align: center; }
.collection-mode-tabs button strong { color: #dce5ea; font-size: 13px; }
.collection-mode-tabs button small { color: #788998; font-size: 10px; }
.collection-mode-tabs button.active {
  border-color: rgba(61,214,140,.42);
  background: linear-gradient(145deg, rgba(18,77,58,.78), rgba(11,48,43,.82));
  box-shadow: 0 8px 24px rgba(3,20,15,.2);
}
.collection-mode-tabs button.active > span,
.collection-mode-tabs button.active strong { color: #55dc99; }
.collection-mode-tabs button.active small { color: #a8c8bb; }
.collection-history-panel { overflow: hidden; }
.collection-history-panel .panel-title { align-items: end; }
.collection-history-count {
  min-width: 96px;
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(61,214,140,.24);
  border-radius: 12px;
  background: rgba(61,214,140,.07);
}
.collection-history-count strong { color: #55dc99; font-size: 21px; line-height: 1; }
.collection-history-count span { color: #8fa0b0; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.collection-history-filters { grid-template-columns: minmax(280px, 1fr) minmax(190px, 260px); }
.collection-history-table { overflow-x: auto; }
.collection-history-table table { min-width: 1260px; }
.collection-history-table td { vertical-align: middle; }
.collection-history-table td:first-child,
.collection-history-table td:nth-child(2) { white-space: nowrap; }
.collection-history-empty {
  min-height: 130px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  color: #dce5ea;
  text-align: center;
}
.collection-history-empty span { color: #788998; font-size: 12px; }

@media (max-width: 760px) {
  .collection-mode-tabs { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-mode-tabs button { min-width: 0; }
  .collection-history-panel .panel-title { align-items: start; }
  .collection-history-count { justify-items: start; }
  .collection-history-filters { grid-template-columns: 1fr; }
}

/* ============================================================
   WASTE PERFORMANCE — Story Flow (Concept B, client waste dashboard)
   ============================================================ */
.wp-story { background: #10141b !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 14px !important; padding: 26px 24px !important; }
.wp-story-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7d8694; margin: 0 0 6px; }
.wp-story-hero { font-size: 38px; font-weight: 800; margin: 0 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wp-story-sub { font-size: 12.5px; color: #8a93a0; margin: 0 0 20px; max-width: 60ch; line-height: 1.55; }
.wp-waterfall-svg { width: 100%; height: 100px; display: block; margin-bottom: 6px; }
.wp-wf-baseline { stroke: #1e242d; stroke-width: 1; }
.wp-wf-connector { stroke: #232a34; stroke-width: 1; stroke-dasharray: 3 3; }
.wp-wf-label { font-size: 10px; fill: #a8b2bd; }
.wp-wf-value { font-size: 9px; fill: #7d8694; }
.wp-wf-outcome-label { font-size: 10px; font-weight: 600; }
.wp-wf-outcome-value { font-size: 16px; font-weight: 700; fill: #fff; }
.wp-story-divider { height: 1px; background: rgba(255,255,255,.07); margin: 22px 0; }
.wp-story-trends { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wp-story-trend-label { font-size: 11px; color: #7d8694; margin: 0 0 4px; }
.wp-story-trend-num { font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.wp-story-trend-num span { font-size: 12px; font-weight: 400; color: #7d8694; }
.wp-story-trend-delta { font-size: 12px; font-weight: 600; margin: 0; }
.wp-story-comp-label { font-size: 11px; color: #7d8694; margin: 0 0 8px; }
.wp-story-comp-bar { display: flex; height: 22px; border-radius: 11px; overflow: hidden; gap: 2px; margin-bottom: 6px; }
.wp-story-comp-recyclable { background: var(--chart-reduction); display: flex; align-items: center; padding-left: 12px; min-width: 0; }
.wp-story-comp-recyclable span { font-size: 11px; font-weight: 700; color: #08130d; white-space: nowrap; }
.wp-story-comp-waste { background: var(--chart-neutral); }
.wp-story-comp-note { font-size: 10.5px; color: #7d8694; margin: 0; }
@media (max-width: 720px) {
  .wp-story-trends { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   WASTE PERFORMANCE — Material composition, full-width card
   Scoped to .wp-material-card only (other pieChart() call sites unaffected)
   ============================================================ */
.wp-material-card { width: 100%; box-sizing: border-box; }
.wp-material-card .pie-layout { grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.wp-material-card .pie-legend { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 28px; }
.wp-material-card .pie-item { padding: 8px 10px; border-radius: 10px; }
.wp-material-card .pie-hole {
  width: 108px;
  height: 108px;
  box-sizing: border-box;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 9px 7px;
  overflow: hidden;
}
.wp-material-card .pie-total {
  max-width: 100%;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wp-material-card .pie-total.is-wide { font-size: 14px; }
.wp-material-card .pie-label,
.wp-material-card .pie-meta { display: none; }

/* Removed: an earlier pass here made this a 3D-tilted ring with a dark
   green centre hole (perspective/rotateX/rotateZ + dark gradient), which
   clashed with the flat, bright Impact Ticker language used everywhere
   else on the page. Replaced with a plain flat donut matching the rest
   of the redesign. */
html[data-theme="forest_canopy"] .wp-material-card .pie-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
html[data-theme="forest_canopy"] .wp-material-card .pie-chart { width: 200px; height: 200px; }
html[data-theme="forest_canopy"] .wp-material-card .pie-hole {
  width: 108px;
  height: 108px;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: none;
  color: var(--ink);
}
html[data-theme="forest_canopy"] .wp-material-card .pie-total { color: var(--ink) !important; font-size: 18px; }
/* Material composition: a compact 3D ring for the Forest Canopy dashboard.
   The conic-gradient still carries the real material values; these layers add
   depth, a lower rim, highlight and a readable centre without changing data. */
html[data-theme="forest_canopy"] .wp-material-card .pie-layout {
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
html[data-theme="forest_canopy"] .wp-material-card .pie-shell {
  min-height: 250px;
  padding: 4px 0 14px;
  perspective: 760px;
  perspective-origin: 50% 45%;
}
html[data-theme="forest_canopy"] .wp-material-card .pie-chart {
  width: 236px;
  height: 236px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 13px rgba(20,80,40,.16));
}
html[data-theme="forest_canopy"] .wp-material-card .pie-chart-surface {
  z-index: 1;
  transform: rotateX(38deg) rotateZ(-7deg) translateY(8px);
  transform-origin: center;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 0 rgba(24,101,51,.62), 0 20px 26px rgba(20,80,40,.16);
}
html[data-theme="forest_canopy"] .wp-material-card .pie-chart-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,.42), transparent 40%, rgba(0,0,0,.16));
  mix-blend-mode: screen;
  opacity: .52;
  pointer-events: none;
}
html[data-theme="forest_canopy"] .wp-material-card .pie-hole {
  width: 96px;
  height: 96px;
  background: linear-gradient(145deg, #1c5130, #0d2a19) !important;
  border: 2px solid rgba(177,239,190,.72) !important;
  box-shadow: inset 0 4px 10px rgba(255,255,255,.10), 0 7px 18px rgba(7,38,19,.26);
  color: #fff;
  /* Keep the centre plane front-facing so its value never rotates or squashes. */
  transform: translate(-50%, -50%);
}
html[data-theme="forest_canopy"] .wp-material-card .pie-total { color: #fff !important; font-size: 18px; }
html[data-theme="forest_canopy"] .wp-material-card .pie-legend { gap: 10px 14px; }
html[data-theme="forest_canopy"] .wp-material-card .pie-item {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,60,30,.13);
  box-shadow: 0 3px 10px rgba(20,80,40,.05);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
html[data-theme="forest_canopy"] .wp-material-card .pie-item strong { color: #183b23 !important; }
html[data-theme="forest_canopy"] .wp-material-card .pie-item small { color: #55735d !important; }
html[data-theme="forest_canopy"] .wp-material-card .pie-item:hover,
html[data-theme="forest_canopy"] .wp-material-card .pie-item:focus-within {
  background: #edf8ef !important;
  border-color: rgba(46,158,82,.38) !important;
  box-shadow: 0 8px 16px rgba(20,80,40,.1);
  transform: translateY(-2px);
}
html[data-theme="forest_canopy"] .wp-material-card .pie-item:hover strong { text-decoration: none; }
html[data-theme="forest_canopy"] .wp-material-card .pie-swatch {
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 4px rgba(20,80,40,.12);
}

/* Customer impact detail: compact, centred slide-in with one size system. */
.tree-equivalent-modal-overlay {
  background: rgba(3, 8, 12, .78);
  backdrop-filter: blur(8px);
}
.tree-equivalent-modal-overlay .center-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(660px, calc(100vh - 32px));
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,.46);
  animation: treeEquivalentModalIn .2s ease-out both;
}
.tree-equivalent-modal-overlay .center-modal-head {
  padding: 18px 20px;
  background: var(--panel) !important;
  border-bottom-color: rgba(255,255,255,.08);
}
.tree-equivalent-modal-overlay .center-modal-body {
  padding: 20px;
  background: var(--panel);
}
.tree-equivalent-detail { display: grid; gap: 14px; }
.tree-equivalent-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tree-equivalent-metrics article {
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.tree-equivalent-metrics span,
.tree-equivalent-metrics small,
.tree-equivalent-formula span,
.tree-equivalent-boundary dt {
  color: var(--muted);
  font-size: 11px;
}
.tree-equivalent-metrics strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tree-equivalent-metrics small { line-height: 1.3; }
.tree-equivalent-formula {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "equation result";
  gap: 5px 16px;
  align-items: end;
  padding: 14px 16px;
  border: 1px solid rgba(61,214,140,.22);
  border-radius: 12px;
  background: rgba(61,214,140,.07);
}
.tree-equivalent-formula span { grid-area: label; }
.tree-equivalent-formula strong { grid-area: equation; font-size: 18px; font-variant-numeric: tabular-nums; }
.tree-equivalent-formula b { grid-area: result; color: var(--green); font-size: 18px; white-space: nowrap; }
.tree-equivalent-boundary {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.tree-equivalent-boundary div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tree-equivalent-boundary div:last-child { border-bottom: 0; }
.tree-equivalent-boundary dt,
.tree-equivalent-boundary dd {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
}
.tree-equivalent-boundary dt { background: rgba(255,255,255,.035); }
.tree-equivalent-boundary dd { color: var(--ink); font-size: 12px; line-height: 1.35; }
.tree-equivalent-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tree-equivalent-sources a {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(61,214,140,.20);
  border-radius: 10px;
  background: rgba(61,214,140,.055);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.tree-equivalent-sources a:hover,
.tree-equivalent-sources a:focus-visible {
  border-color: rgba(61,214,140,.48);
  background: rgba(61,214,140,.11);
}
.tree-equivalent-sources a span { color: var(--muted); }
.tree-equivalent-use-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.tree-equivalent-use-note strong { color: var(--ink); }
@keyframes treeEquivalentModalIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 760px) {
  .wp-material-card .pie-layout { grid-template-columns: 1fr; justify-items: center; }
  .wp-material-card .pie-legend { grid-template-columns: 1fr; width: 100%; }
  html[data-theme="forest_canopy"] .wp-material-card .pie-shell { min-height: 218px; padding-bottom: 10px; }
  html[data-theme="forest_canopy"] .wp-material-card .pie-chart { width: 200px; height: 200px; }
  .tree-equivalent-metrics { grid-template-columns: 1fr; }
  .tree-equivalent-metrics article { min-height: 86px; }
  .tree-equivalent-boundary div { grid-template-columns: 1fr; }
  .tree-equivalent-boundary dt { padding-bottom: 4px; }
  .tree-equivalent-boundary dd { padding-top: 4px; }
  .tree-equivalent-sources { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tree-equivalent-modal-overlay { padding: 8px; place-items: stretch; }
  .tree-equivalent-modal-overlay .center-modal { width: 100%; max-height: calc(100vh - 16px); border-radius: 16px; }
  .tree-equivalent-modal-overlay .center-modal-head,
  .tree-equivalent-modal-overlay .center-modal-body { padding: 14px; }
  .tree-equivalent-formula { grid-template-columns: 1fr; grid-template-areas: "label" "equation" "result"; }
}

/* ============================================================
   GOALS & CAMPAIGNS — Dense Analyst (Concept C)
   Reuses existing .mp-kpi / .mp-card / .mp-table dark-mode base
   ============================================================ */
.mc-dense { display: flex; flex-direction: column; gap: 14px; }
.mc-kpi-donut { display: flex; flex-direction: column; }
.mc-donut-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mc-mini-donut { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; position: relative; }
.mc-mini-donut::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.mc-mini-legend { display: flex; flex-direction: column; gap: 3px; }
.mc-mini-legend span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.mc-mini-legend i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.mc-month-labels { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 3px; }
.mc-month-labels span { font-size: 9px; color: var(--muted); }
.mc-recovery-chart { display:grid; gap:8px; margin-top:6px; }
.mc-recovery-chart-scroll { overflow-x:auto; overflow-y:hidden; padding-bottom:4px; scrollbar-color:rgba(61,214,140,.25) transparent; }
.mc-recovery-chart-inner { min-width:900px; }
.mc-recovery-svg { display:block; width:100%; height:auto; min-height:210px; overflow:visible; }
.mc-recovery-grid line { stroke:rgba(255,255,255,.075); stroke-width:1; stroke-dasharray:4 6; }
.mc-recovery-grid text,
.mc-recovery-axis-unit { fill:var(--muted); font-size:10px; font-weight:700; }
.mc-recovery-grid text { text-anchor:end; }
.mc-recovery-area {
  fill:rgba(61,214,140,.075);
  opacity:0;
  animation:mcRecoveryAreaIn .65s ease-out .45s forwards;
}
.mc-recovery-line {
  fill:none;
  stroke:var(--chart-reduction);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:mcRecoveryDraw 1.05s cubic-bezier(.2,.75,.25,1) forwards;
}
.mc-recovery-point { outline:none; cursor:crosshair; }
.mc-recovery-guide {
  stroke:rgba(61,214,140,.48);
  stroke-width:1;
  stroke-dasharray:3 4;
  opacity:0;
  transition:opacity .16s ease;
}
.mc-recovery-dot-halo {
  fill:rgba(61,214,140,.14);
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .16s ease, transform .16s ease;
}
.mc-recovery-dot {
  fill:#3dd68c;
  stroke:#122219;
  stroke-width:2;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:mcRecoveryPointIn .32s ease-out forwards;
  animation-delay:calc(.38s + var(--point-delay));
  transition:transform .16s ease, fill .16s ease;
}
.mc-recovery-value {
  fill:#c8f7dd;
  font-size:10px;
  font-weight:800;
  opacity:.78;
  transition:opacity .16s ease, fill .16s ease;
  paint-order:stroke;
  stroke:#161920;
  stroke-width:3px;
  stroke-linejoin:round;
}
.mc-recovery-point:hover .mc-recovery-guide,
.mc-recovery-point:focus .mc-recovery-guide,
.mc-recovery-point:hover .mc-recovery-dot-halo,
.mc-recovery-point:focus .mc-recovery-dot-halo { opacity:1; }
.mc-recovery-point:hover .mc-recovery-dot-halo,
.mc-recovery-point:focus .mc-recovery-dot-halo { transform:scale(1.35); }
.mc-recovery-point:hover .mc-recovery-dot,
.mc-recovery-point:focus .mc-recovery-dot { transform:scale(1.55); fill:#8ce9b8; }
.mc-recovery-point:hover .mc-recovery-value,
.mc-recovery-point:focus .mc-recovery-value { opacity:1; fill:#fff; }
.mc-recovery-value-grid {
  display:grid;
  grid-template-columns:repeat(var(--month-count,12),minmax(68px,1fr));
  gap:0;
  padding-left:48px;
  padding-right:22px;
}
.mc-recovery-period {
  display:grid;
  gap:2px;
  min-width:0;
  padding:7px 4px 0;
  border-top:1px solid rgba(255,255,255,.07);
  opacity:0;
  animation:mcRecoveryPeriodIn .28s ease-out forwards;
  animation-delay:calc(.45s + var(--point-delay));
  text-align:center;
}
.mc-recovery-period span { color:var(--muted); font-size:9px; white-space:nowrap; }
.mc-recovery-period strong { color:var(--ink); font-size:10px; white-space:nowrap; }
.mc-recovery-hint { margin:0; color:var(--muted); font-size:10px; }
.mc-recovery-empty { padding:30px 16px; border:1px dashed rgba(255,255,255,.1); border-radius:12px; color:var(--muted); text-align:center; }
@keyframes mcRecoveryDraw { to { stroke-dashoffset:0; } }
@keyframes mcRecoveryAreaIn { to { opacity:1; } }
@keyframes mcRecoveryPointIn { from { opacity:0; transform:scale(.35); } to { opacity:1; transform:scale(1); } }
@keyframes mcRecoveryPeriodIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.mc-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mc-row { cursor: pointer; transition: background .12s; }
.mc-row:hover td { background: rgba(61,214,140,.05); }
.mc-num { text-align: right; font-variant-numeric: tabular-nums; }
.mc-waste { color: var(--chart-emission); }
.mc-share { color: var(--chart-reduction); font-weight: 700; }
.mc-trend { text-align: right; }
@media (max-width: 900px) {
  .mp-kpis.mc-kpis { grid-template-columns: repeat(2, 1fr); }
  .mc-recovery-chart-inner { min-width:820px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-recovery-area,
  .mc-recovery-line,
  .mc-recovery-dot,
  .mc-recovery-period { animation:none; opacity:1; stroke-dashoffset:0; transform:none; }
}

/* ============================================================
   ACCOUNTS — Organisation hierarchy navigator
   One visible model: Master Account > Branch / Site > Users
   ============================================================ */
.account-v2-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; padding:18px 20px; border:1px solid rgba(255,255,255,.08); border-left:4px solid var(--green); border-radius:16px; background:rgba(255,255,255,.025); }
.account-v2-header h2 { margin:4px 0 6px; }
.account-v2-header p { max-width:720px; margin:0; color:var(--muted); }
.account-v2-header-actions, .account-detail-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.account-hierarchy-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:14px; align-items:start; }
.account-hierarchy-pane, .account-detail-pane { min-width:0; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.025); }
.account-hierarchy-layout > .account-detail-pane { grid-area:auto; grid-column:auto; }
.account-hierarchy-pane { padding:16px; position:sticky; top:12px; }
.account-pane-heading, .account-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.account-pane-heading h3, .account-section-heading h3 { margin:3px 0 0; }
.account-pane-help, .account-section-heading p { color:var(--muted); line-height:1.4; margin:8px 0 12px; }
.account-hierarchy-pane > input { width:100%; margin-bottom:12px; }
.account-tree-root { display:flex; align-items:center; gap:8px; padding:8px 4px; color:var(--ink); border-bottom:1px solid rgba(255,255,255,.07); }
.platform-icon { color:var(--green); font-size:12px; }
.account-tree-list { display:grid; gap:4px; padding-top:6px; max-height:560px; overflow:auto; }
.account-tree-organization { border-radius:10px; }
.account-tree-organization.selected { background:rgba(61,214,140,.1); }
.account-tree-row { display:grid; grid-template-columns:14px 18px minmax(0,1fr); align-items:center; gap:6px; width:100%; padding:9px 7px; border:0; background:transparent; color:var(--ink); text-align:left; }
.account-tree-row:hover { background:rgba(61,214,140,.08); }
.tree-chevron { color:var(--muted); font-size:18px; line-height:1; }
.tree-icon { color:var(--green); font-size:15px; }
.tree-label, .account-tree-site { min-width:0; display:grid; gap:2px; }
.tree-label b, .account-tree-site b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.tree-label small, .account-tree-site small, .account-tree-empty { color:var(--muted); font-size:10px; }
.account-tree-sites { display:grid; gap:3px; padding:0 8px 8px 22px; }
.account-tree-site { grid-template-columns:12px 16px minmax(0,1fr); align-items:center; position:relative; padding:5px 0; }
.tree-branch-line { position:absolute; width:1px; height:100%; left:-10px; top:-4px; background:rgba(255,255,255,.12); }
.site-icon { color:#7db7ff; font-size:12px; }
.account-tree-empty { padding:8px 12px; }
.account-hierarchy-legend { display:grid; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.account-hierarchy-legend > div { display:flex; align-items:center; gap:8px; }
.legend-symbol { width:20px; text-align:center; font-size:12px; }
.master-symbol { color:var(--green); }.site-symbol { color:#7db7ff; }.user-symbol { color:#a78bfa; }
.account-hierarchy-legend span:last-child { display:grid; gap:1px; }.account-hierarchy-legend b { font-size:11px; }.account-hierarchy-legend small { color:var(--muted); font-size:10px; }
.account-detail-pane { padding:20px; }
.account-detail-heading { display:flex; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08); }
.account-detail-heading h2 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:4px 0 6px; }
.account-detail-heading p { margin:0; color:var(--muted); }
.account-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.account-summary-grid article { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.025); }
.summary-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--green); background:rgba(61,214,140,.12); font-size:14px; flex:0 0 auto; }
.account-summary-grid article div { display:grid; gap:2px; }.account-summary-grid small, .account-summary-grid span { color:var(--muted); font-size:11px; }.account-summary-grid strong { font-size:22px; line-height:1.1; }
.account-branches-section, .account-internal-section { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.account-section-heading { margin-bottom:12px; }.account-section-heading p { margin:4px 0 0; }
.account-branches-section table { min-width:720px; }.table-primary { display:flex; align-items:center; gap:7px; font-weight:700; }.site-table-icon { color:var(--green); }
.empty-state-compact { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; }.empty-state-compact span { color:var(--muted); }
.internal-access-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.internal-access-grid article { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.02); }
.internal-role-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#b79cff; background:rgba(167,139,250,.12); }
.internal-access-grid article div { display:grid; gap:2px; }.internal-access-grid small { color:var(--muted); }.internal-access-grid strong { font-size:20px; margin-top:5px; }.text-link { padding:0; border:0; background:transparent; color:var(--green); text-align:left; font-size:11px; }
.account-action-zone { margin-top:14px; border:1px solid rgba(61,214,140,.22); border-radius:16px; background:rgba(61,214,140,.04); overflow:hidden; }
.account-action-zone summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; }.account-action-zone summary::-webkit-details-marker { display:none; }.account-action-zone summary > span:first-child { display:grid; gap:2px; }.action-zone-close { color:var(--green); font-size:12px; }.account-action-body { padding:0 16px 16px; }.account-action-panel { padding-top:14px; }.account-action-panel + .account-action-panel { border-top:1px solid rgba(255,255,255,.08); }.account-action-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.account-action-form .upload-box, .account-action-form .check-row, .account-action-form button, .account-action-form #organizationFormMessage { grid-column:1/-1; }.account-action-site-fields { display:grid; grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.account-action-zone .panel-title { margin-bottom:12px; }.account-action-zone .panel-title h3 { margin:3px 0; }.account-action-zone .panel-title p { margin:0; }
@media (max-width: 1180px) { .account-hierarchy-layout { grid-template-columns:1fr; }.account-hierarchy-pane { position:static; }.account-tree-list { max-height:260px; }.account-detail-heading { flex-direction:column; }.account-detail-actions { justify-content:flex-start; } }
@media (max-width: 820px) { .account-v2-header { align-items:flex-start; flex-direction:column; }.account-hierarchy-layout { grid-template-columns:1fr; }.account-hierarchy-pane { position:static; }.account-tree-list { max-height:260px; }.account-summary-grid, .internal-access-grid { grid-template-columns:1fr; }.account-action-form, .account-action-site-fields { grid-template-columns:1fr; }.account-action-form .upload-box, .account-action-form .check-row, .account-action-form button, .account-action-form #organizationFormMessage { grid-column:auto; } }

/* ============================================================
   ACCOUNTS V3 — task-first workspaces
   Home = four destinations; creation and management never stack.
   ============================================================ */
.account-v3 { display:grid; gap:18px; width:100%; }
.account-choice-head,
.account-workspace-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--green);
  border-radius:18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(61,214,140,.11), transparent 28%),
    rgba(255,255,255,.025);
}
.account-choice-head h2,
.account-workspace-head h2 { margin:4px 0 6px; font-size:clamp(24px,2.4vw,34px); }
.account-choice-head p,
.account-workspace-head p { max-width:760px; margin:0; color:var(--muted); line-height:1.55; }
.account-workspace-head.wizard-head { min-height:88px; padding:13px 18px; align-items:center; }
.account-workspace-head.wizard-head h2 { margin:2px 0 3px; font-size:23px; }
.account-workspace-head.wizard-head p { max-width:820px; font-size:12px; line-height:1.4; }
.account-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.account-choice-card {
  min-height:250px;
  padding:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  color:var(--ink);
  text-align:left;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:10px;
  box-shadow:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.account-choice-card:hover {
  transform:translateY(-2px);
  border-color:rgba(61,214,140,.38);
  background:rgba(61,214,140,.07);
}
.account-choice-number {
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(61,214,140,.12);
  border:1px solid rgba(61,214,140,.2);
  color:var(--green);
  font-size:24px;
  font-weight:900;
  letter-spacing:-.04em;
}
.account-choice-card h2 { margin:0; font-size:25px; }
.account-choice-card p { margin:0; max-width:560px; color:var(--muted); line-height:1.5; }
.account-choice-card footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--muted);
}
.account-choice-card footer b { color:var(--green); }
.account-wizard-page {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(61,214,140,.08), transparent 24%),
    rgba(255,255,255,.02);
}
.account-wizard-stepper {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.account-wizard-step {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--muted);
}
.account-wizard-step:not(:last-child)::after {
  content:"";
  position:absolute;
  z-index:0;
  top:17px;
  left:48px;
  right:12px;
  height:1px;
  background:rgba(255,255,255,.11);
}
.account-wizard-step > span {
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:#171c22;
  font-weight:900;
}
.account-wizard-step b {
  position:relative;
  z-index:1;
  padding-right:12px;
  background:#11161c;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-wizard-step.active { color:#fff; }
.account-wizard-step.active > span,
.account-wizard-step.done > span {
  border-color:rgba(61,214,140,.55);
  background:var(--green);
  color:#07130d;
}
.account-wizard-step.done { color:var(--green); }
.account-wizard-intro {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.account-wizard-intro h2 { margin:5px 0 0; font-size:26px; }
.account-wizard-intro p { max-width:470px; margin:0; color:var(--muted); line-height:1.5; text-align:right; }
.account-wizard-alert {
  margin:16px 26px 0;
  padding:12px 14px;
  border:1px solid rgba(61,214,140,.22);
  border-radius:12px;
  background:rgba(61,214,140,.08);
  color:var(--green);
}
.account-wizard-shell { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.75fr); min-height:500px; }
.account-wizard-main {
  height:auto;
  overflow:visible;
  display:block;
  grid-column:1;
  grid-row:1;
  min-width:0;
  padding:30px 34px 34px;
  background:transparent !important;
}
.account-wizard-guide {
  grid-column:2;
  grid-row:1;
  padding:30px;
  border-left:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.08);
}
.account-wizard-guide h3 { margin:6px 0; font-size:21px; }
.account-wizard-guide > p { margin:0; color:var(--muted); line-height:1.5; }
.account-guide-list { display:grid; gap:16px; margin-top:28px; }
.account-guide-list > div { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:center; opacity:.55; }
.account-guide-list > div.active,
.account-guide-list > div.done { opacity:1; }
.account-guide-list > div > span {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted);
  font-weight:800;
}
.account-guide-list > div.active > span,
.account-guide-list > div.done > span {
  border-color:rgba(61,214,140,.35);
  background:rgba(61,214,140,.12);
  color:var(--green);
}
.account-guide-list > div > div { display:grid; gap:3px; }
.account-guide-list small { color:var(--muted); }
.account-wizard-form,
.account-review-panel { display:grid; gap:24px; }
.account-form-section {
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.018);
}
.account-form-section > div:first-child { display:grid; gap:4px; }
.account-form-section h3 { margin:0; font-size:18px; }
.account-form-section p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.account-form-heading h2,
.account-review-panel h2 { margin:5px 0 7px; font-size:27px; }
.account-form-heading p,
.account-review-panel > p { margin:0; color:var(--muted); line-height:1.5; }
.account-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.account-wizard-field { min-width:0; display:grid; gap:7px; }
.account-wizard-field > span { color:#aab6c5; font-size:11px; font-weight:800; }
.account-wizard-field input,
.account-wizard-field select { width:100%; }
.account-file-field { grid-column:1/-1; padding:14px; border:1px dashed rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.02); }
.account-wizard-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding-top:6px; }
.account-wizard-actions button { min-width:190px; }
.account-review-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.account-review-grid > div,
.account-detail-section > div {
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.account-review-grid span,
.account-detail-section span { color:var(--muted); font-size:11px; }
.account-review-grid b,
.account-detail-section strong { overflow-wrap:anywhere; }
.account-success-card {
  width:min(760px,100%);
  margin:20px auto;
  padding:36px;
  display:grid;
  gap:16px;
  text-align:center;
  border:1px solid rgba(61,214,140,.28);
  border-radius:20px;
  background:rgba(61,214,140,.06);
}
.account-success-mark {
  width:62px;
  height:62px;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#07130d;
  font-size:30px;
  font-weight:900;
}
.account-success-card h2,
.account-success-card p { margin:0; }
.account-success-card p { color:var(--muted); }
.account-list-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.account-list-metrics article {
  min-height:122px;
  padding:17px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
.account-list-metrics span { color:var(--muted); }
.account-list-metrics strong { font-size:34px; line-height:1; color:var(--green); }
.account-list-panel {
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:rgba(255,255,255,.02);
}
.account-list-tabs {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:5px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.account-list-tabs button {
  min-width:180px;
  width:auto;
  border-color:transparent;
  background:transparent;
  color:var(--muted);
}
.account-list-tabs button.active {
  border-color:rgba(61,214,140,.28);
  background:rgba(61,214,140,.12);
  color:var(--green);
}
.account-list-toolbar { display:grid; grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(150px,.55fr)); gap:10px; margin-bottom:14px; }
.account-list-table table { min-width:850px; }
.account-list-table td:first-child b,
.account-list-table td:first-child small { display:block; }
.account-list-table td:first-child small { margin-top:3px; }
.account-structure-intro {
  margin-bottom:14px;
  padding:15px 16px;
  border:1px solid rgba(61,214,140,.18);
  border-radius:13px;
  background:rgba(61,214,140,.045);
}
.account-structure-intro h3 { margin:4px 0; font-size:18px; }
.account-structure-intro p { max-width:900px; margin:0; color:var(--muted); line-height:1.5; }
.account-structure-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) minmax(190px,.32fr); gap:10px; margin-bottom:14px; }
.account-structure-table table { min-width:960px; }
.account-pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:14px;
  color:var(--muted);
  font-size:12px;
}
.account-pagination > div { display:flex; align-items:center; gap:10px; }
.account-pagination b { min-width:90px; color:var(--ink); text-align:center; }
.account-detail-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.account-detail-metrics article {
  display:grid;
  gap:8px;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(61,214,140,.05);
}
.account-detail-metrics span { color:var(--muted); font-size:11px; }
.account-detail-metrics strong { font-size:20px; overflow-wrap:anywhere; }
.account-detail-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.account-email-editor {
  display:grid;
  gap:10px;
  margin:12px 0;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius:12px;
  background:color-mix(in srgb, var(--green) 6%, var(--panel));
}
.account-email-editor label { display:grid; gap:5px; }
.account-email-editor label > span { color:var(--muted); font-size:11px; font-weight:800; }
.account-email-editor input { min-height:38px; }
.account-email-editor-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.account-email-editor-actions button { min-width:150px; }
.account-identity-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.account-identity-editor-head > div { display:grid; gap:4px; min-width:0; }
.account-identity-editor-head strong { color:var(--ink); font-size:13px; }
.account-identity-editor-head p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.account-identity-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.account-identity-editor-grid label { display:grid; gap:5px; }
.account-identity-editor-grid label > span { color:var(--muted); font-size:11px; font-weight:800; }
.account-identity-editor-grid input { min-height:40px; }
.account-detail-action-label { color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.account-detail-danger-zone p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.35; }
.center-modal .account-detail-actions {
  justify-content:flex-start;
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.08);
}
.account-structure-callout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px;
  border:1px solid rgba(61,214,140,.26);
  border-radius:14px;
  background:rgba(61,214,140,.07);
}
.account-structure-callout.multi {
  border-color:rgba(83,177,255,.24);
  background:rgba(83,177,255,.06);
}
.account-structure-callout h3 { margin:4px 0; }
.account-structure-callout p { margin:0; color:var(--muted); line-height:1.45; }
.account-structure-callout > strong {
  flex:0 0 auto;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(0,0,0,.13);
}
.account-structure-actions { display:flex; flex-wrap:wrap; gap:10px; }
.account-structure-section { display:grid; gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.account-structure-section .account-section-heading { display:grid; justify-content:start; gap:4px; margin:0; }
.account-structure-section .account-section-heading h3 { margin:0; }
.account-structure-card-list { display:grid; gap:9px; }
.account-structure-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);
  gap:16px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.022);
}
.account-structure-card h3 { margin:4px 0; font-size:16px; }
.account-structure-card p { margin:0; color:var(--muted); }
.account-structure-card-meta {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.account-structure-card-meta a { color:var(--green); }
.account-modal-form { display:grid; gap:20px; }
.account-modal-form-intro h3 { margin:0 0 5px; }
.account-modal-form-intro p { max-width:760px; margin:0; color:var(--muted); line-height:1.5; }
.account-form-span { grid-column:1/-1; }
.account-wizard-field small { color:var(--muted); font-size:10px; }
.account-wizard-field.scope-disabled { opacity:.48; }
.account-wizard-field.scope-disabled select { cursor:not-allowed; }
.form-message { min-height:16px; margin:0; color:#ff8d8d; }
.account-governance-filters { grid-template-columns:minmax(230px,1.4fr) repeat(4,minmax(140px,.7fr)) repeat(3,minmax(150px,.8fr)); }
.account-governance-filters select,
.account-governance-filters input { min-width:0; }
.account-list-metrics article.attention { border-color:color-mix(in srgb, #f0b24b 35%, var(--line)); background:color-mix(in srgb, #f0b24b 8%, var(--panel)); }
.account-attention-label { color:#f0b24b; font-weight:800; }
.account-system-references { margin-top:14px; border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }
.account-system-references summary { cursor:pointer; color:var(--muted); font-size:12px; font-weight:800; }
.account-system-references .account-detail-section { margin-top:12px; }
.account-confirm-form,
.account-system-notice,
.account-credential-handoff { display:grid; gap:16px; }
.account-confirm-form p,
.account-system-notice p,
.account-credential-handoff p { margin:0; color:var(--muted); line-height:1.55; }
.account-confirm-phrase { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }
.account-confirm-phrase input { min-height:42px; }
.account-confirm-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:10px; }
.account-confirm-actions button { min-width:150px; }
.account-credential-target { display:grid; gap:4px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--green) 25%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--green) 7%, var(--panel)); }
.account-credential-target span { color:var(--muted); font-size:11px; }
.account-credential-value { padding:18px; border:1px dashed color-mix(in srgb, var(--green) 45%, var(--line)); border-radius:12px; background:rgba(0,0,0,.16); color:var(--ink); font:700 20px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; text-align:center; overflow-wrap:anywhere; user-select:all; }
.account-save-confirm { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; line-height:1.35; }
.account-save-confirm input { width:14px; height:14px; min-width:14px; margin:0; accent-color:var(--green); }
.account-credential-handoff small { min-height:18px; }
.account-credential-modal { width:min(620px, calc(100vw - 28px)); max-height:min(620px, calc(100vh - 28px)); }
.account-credential-modal .center-modal-body { padding:20px 22px 22px; }
.account-credential-handoff { gap:14px; max-width:560px; margin:0 auto; }
.account-credential-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.account-credential-actions button { width:100%; min-width:0; }
.account-credential-save-row { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:0; border:0; background:transparent; }
.account-credential-save-row .account-save-confirm { flex:0 0 auto; }
.account-credential-save-row small { flex:0 1 auto; max-width:240px; min-height:0; text-align:right; }
@media (max-width:620px) {
  .account-credential-modal .center-modal-body { padding:18px; }
  .account-credential-actions { grid-template-columns:1fr; }
  .account-credential-save-row { align-items:flex-start; flex-direction:column; gap:6px; }
  .account-credential-save-row small { text-align:left; }
}
@media (max-width: 1250px) { .account-governance-filters { grid-template-columns:repeat(3,minmax(150px,1fr)); } }
@media (max-width: 1050px) {
  .account-wizard-shell { grid-template-columns:1fr; }
  .account-wizard-main { grid-column:1; grid-row:1; }
  .account-wizard-guide { grid-column:1; grid-row:2; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .account-list-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-structure-card { grid-template-columns:1fr; }
  .account-structure-card-meta { justify-content:flex-start; }
}
@media (max-width: 760px) {
  .account-choice-grid,
  .account-form-grid,
  .account-review-grid,
  .account-list-metrics,
  .account-detail-metrics,
  .account-detail-section { grid-template-columns:1fr; }
  .account-choice-head,
  .account-workspace-head,
  .account-wizard-intro { align-items:flex-start; flex-direction:column; }
  .account-wizard-intro p { text-align:left; }
  .account-wizard-stepper { grid-template-columns:1fr; gap:10px; }
  .account-wizard-step:not(:last-child)::after { display:none; }
  .account-wizard-main,
  .account-wizard-guide { padding:22px 18px; }
  .account-list-toolbar,
  .account-structure-toolbar { grid-template-columns:1fr; }
  .account-list-tabs { width:100%; }
  .account-list-tabs button { flex:1; min-width:0; }
  .account-pagination { align-items:flex-start; flex-direction:column; }
  .account-structure-callout { align-items:flex-start; flex-direction:column; }
  .account-wizard-actions button { width:100%; }
}

/* Fleet Management */
.fleet-workspace { display:grid; gap:16px; }
.fleet-hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  border:1px solid rgba(61,214,140,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(61,214,140,.10),rgba(76,182,196,.035));
}
.fleet-hero h2 { margin:4px 0; font-size:26px; }
.fleet-hero p { max-width:780px; margin:0; color:var(--muted); line-height:1.5; }
.fleet-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.55fr); gap:16px; align-items:start; }
.fleet-register, .fleet-side { min-width:0; }
.fleet-table table { min-width:900px; }
.fleet-table input, .fleet-table select { min-width:130px; }
.fleet-fuel-alert { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 14px; padding:11px 12px; border:1px solid rgba(220,145,25,.38); border-radius:10px; background:rgba(220,145,25,.09); }
.fleet-fuel-alert > div { display:grid; gap:3px; }
.fleet-fuel-alert strong { color:#8a5400; font-size:12px; }
.fleet-fuel-alert span, .fleet-fuel-required, .fleet-save-status { display:block; color:var(--muted); font-size:10px; line-height:1.35; }
.fleet-fuel-required { margin-top:4px; color:#a46000; font-weight:800; }
.fleet-row-fuel-missing td { background:rgba(220,145,25,.035); }
.fleet-fuel-missing { border-color:rgba(220,145,25,.62) !important; box-shadow:0 0 0 2px rgba(220,145,25,.08); }
.fleet-row-action { min-width:142px; }
.fleet-save-status { min-height:14px; margin-top:4px; }
.fleet-save-status.success { color:#177744; font-weight:800; }
.fleet-save-status.error-text { color:#b34343; font-weight:800; }
.fleet-side { display:grid; gap:16px; }
.fleet-create-card { display:grid; gap:16px; }
.fleet-create-card h3, .fleet-status-chart h3 { margin:4px 0; }
.fleet-create-card form { display:grid; gap:11px; }
.fleet-create-card label { display:grid; gap:6px; }
.fleet-create-card label > span { color:var(--muted); font-size:11px; font-weight:700; }
.fleet-status-chart { display:grid; gap:14px; }
.fleet-status-row { display:grid; grid-template-columns:86px minmax(80px,1fr) 22px; gap:10px; align-items:center; font-size:12px; }
.fleet-status-row > div { height:9px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); }
.fleet-status-row i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3dd68c,#4cb6c4); }
.fleet-status-row strong { text-align:right; }
@media (max-width:1050px) {
  .fleet-layout { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .fleet-hero { align-items:flex-start; flex-direction:column; }
  .fleet-hero button { width:100%; }
  .fleet-fuel-alert { align-items:flex-start; flex-direction:column; }
  .fleet-fuel-alert button { width:100%; }
}

.trip-evidence-fuel-notice, .trip-evidence-fuel-blocker {
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(220,145,25,.38);
  border-radius:10px;
  background:rgba(220,145,25,.08);
}
.trip-evidence-fuel-notice strong, .trip-evidence-fuel-blocker h3 { margin:0; color:#805000; }
.trip-evidence-fuel-notice span, .trip-evidence-fuel-blocker p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.trip-evidence-fuel-blocker button { justify-self:start; }

/* Customer engagement charts */
.engagement-workspace { display:grid; gap:16px; }
.engagement-toolbar {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:15px 16px;
  border:1px solid rgba(61,214,140,.20);
  border-radius:13px;
  background:rgba(61,214,140,.055);
}
.engagement-toolbar h3 { margin:0 0 5px; }
.engagement-toolbar p, .engagement-chart-card p { margin:0; color:var(--muted); line-height:1.45; }
.engagement-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.engagement-toggle { display:flex; gap:4px; padding:4px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(0,0,0,.14); }
.engagement-toggle button { padding:8px 11px; border-color:transparent; background:transparent; color:var(--muted); }
.engagement-toggle button.active { border-color:rgba(61,214,140,.28); background:rgba(61,214,140,.12); color:var(--green); }
.engagement-controls select { min-width:145px; }
.engagement-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.engagement-chart-card {
  display:grid;
  align-content:start;
  gap:16px;
  min-width:0;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.022);
}
.engagement-chart-card h3 { margin:4px 0; }
.engagement-bars { display:grid; gap:12px; }
.engagement-bar-row { display:grid; gap:5px; }
.engagement-bar-row > div:first-child { display:flex; justify-content:space-between; gap:16px; font-size:12px; }
.engagement-bar-row > div:first-child span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.engagement-bar-row > div:first-child strong { flex:0 0 auto; color:var(--ink); }
.engagement-bar-row small { color:var(--muted); font-size:10px; }
.engagement-bar-track { height:9px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.055); }
.engagement-bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3dd68c,#4cb6c4); }
.engagement-trend-card { min-height:240px; }
.engagement-trend { display:flex; align-items:flex-end; gap:5px; min-height:145px; padding:14px 8px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.engagement-trend-column { display:grid; grid-template-rows:120px 18px; align-items:end; flex:1; min-width:5px; height:138px; }
.engagement-trend-column i { display:block; width:100%; min-height:4px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#4cb6c4,#3dd68c); }
.engagement-trend-column span { overflow:hidden; color:var(--muted); font-size:8px; text-align:center; white-space:nowrap; }
.engagement-empty { padding:32px 18px; border:1px dashed rgba(255,255,255,.1); border-radius:12px; color:var(--muted); text-align:center; }
.engagement-note { margin:0; color:var(--muted); font-size:11px; }
.customer-reference-note {
  display:grid;
  gap:5px;
  padding:13px 14px;
  border:1px solid rgba(61,214,140,.20);
  border-radius:11px;
  background:rgba(61,214,140,.055);
}
.customer-reference-note span { color:var(--muted); font-size:11px; line-height:1.45; }
@media (max-width:850px) {
  .engagement-toolbar { flex-direction:column; }
  .engagement-chart-grid { grid-template-columns:1fr; }
}

/* ============================================================
   2026-07-25 PRODUCT DESIGN PASS
   Account guidance, inventory status and Master Goals hierarchy
   ============================================================ */

/* Account creation: visible help without competing with the primary form. */
.account-workspace-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.account-help-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-color:rgba(61,214,140,.28);
  background:rgba(61,214,140,.09);
  color:var(--green);
}
.account-help-button > span {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border:1px solid rgba(61,214,140,.36);
  border-radius:50%;
  font-weight:900;
}
.account-help-layout { display:grid; gap:16px; }
.account-help-callout,
.account-help-grid > section,
.account-help-warning {
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.account-help-callout { padding:18px; border-left:4px solid var(--green); }
.account-help-callout h3 { margin:5px 0 7px; font-size:20px; }
.account-help-callout p { margin:0; color:var(--muted); line-height:1.55; }
.account-help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-help-grid > section { padding:16px; }

/* ============================================================
   FOREST CANOPY ACCOUNTS — table layering + control clarity
   The account list scrolls inside its own table frame.  Keep the
   header opaque and above rows so content cannot bleed through it.
   ============================================================ */
.account-list-table {
  position: relative;
  isolation: isolate;
  overflow: auto;
}
.account-list-table table {
  border-collapse: separate;
  border-spacing: 0;
}
.account-list-table thead {
  position: sticky;
  top: 0;
  z-index: 4;
}
.account-list-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 0 var(--line), 0 5px 12px rgba(20,60,30,.08);
}
.account-list-table tbody { position: relative; z-index: 0; }

html[data-theme="forest_canopy"] #view-accounts .account-choice-head,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-head,
html[data-theme="forest_canopy"] #view-accounts .account-list-panel,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-page,
html[data-theme="forest_canopy"] #view-accounts .account-choice-card,
html[data-theme="forest_canopy"] #view-accounts .account-list-metrics article,
html[data-theme="forest_canopy"] #view-accounts .account-structure-intro,
html[data-theme="forest_canopy"] #view-accounts .account-structure-card {
  border-color: rgba(20,60,30,.2);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 22px rgba(20,80,40,.08);
}
html[data-theme="forest_canopy"] #view-accounts .account-choice-head,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-head {
  border-left: 4px solid var(--green);
}
html[data-theme="forest_canopy"] #view-accounts .account-list-metrics article {
  border-top: 3px solid rgba(46,158,82,.42);
}
html[data-theme="forest_canopy"] #view-accounts .account-list-tabs {
  border-color: rgba(20,60,30,.22);
  background: rgba(244,251,245,.9);
  box-shadow: 0 4px 12px rgba(20,80,40,.06);
}
html[data-theme="forest_canopy"] #view-accounts .account-list-tabs button {
  border: 1px solid transparent;
  color: #55705c;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-tabs button:hover {
  border-color: rgba(46,158,82,.28);
  background: rgba(46,158,82,.07);
  color: #1f7a3d;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-tabs button.active {
  border-color: rgba(46,158,82,.38);
  background: #e2f4e5;
  color: #1f7a3d;
  box-shadow: inset 0 -3px 0 #2e9e52;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-toolbar input,
html[data-theme="forest_canopy"] #view-accounts .account-list-toolbar select {
  border-color: rgba(20,60,30,.25) !important;
  box-shadow: inset 0 1px 2px rgba(20,60,30,.04);
}
html[data-theme="forest_canopy"] #view-accounts .account-list-toolbar input:focus,
html[data-theme="forest_canopy"] #view-accounts .account-list-toolbar select:focus {
  border-color: #2e9e52 !important;
  box-shadow: 0 0 0 3px rgba(46,158,82,.14);
  outline: none;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table {
  border-color: rgba(20,60,30,.26);
  background: #f8fcf8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 8px 18px rgba(20,80,40,.07);
  scrollbar-color: rgba(20,60,30,.3) transparent;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table thead th {
  background: #eaf6ec !important;
  color: #3f654a !important;
  border-bottom: 1px solid rgba(20,60,30,.22) !important;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table tbody td {
  border-bottom-color: rgba(20,60,30,.12) !important;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table tbody tr:nth-child(even) td {
  background: rgba(241,249,242,.58);
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table tbody tr:hover td {
  background: #e9f6eb !important;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table td:last-child {
  white-space: nowrap;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table td:last-child button,
html[data-theme="forest_canopy"] #view-accounts .account-pagination button {
  border: 1px solid rgba(20,60,30,.25);
  background: #f3faf4;
  color: #246b38;
  box-shadow: 0 2px 5px rgba(20,80,40,.06);
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table td:last-child button:hover,
html[data-theme="forest_canopy"] #view-accounts .account-pagination button:hover:not(:disabled) {
  border-color: #2e9e52;
  background: #e2f4e5;
  color: #155b2c;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table td:last-child button[onclick^="sendAccountInvite"] {
  border-color: #2e9e52;
  background: #2e9e52;
  color: #fff;
}
html[data-theme="forest_canopy"] #view-accounts .account-list-table td:last-child button[onclick^="sendAccountInvite"]:hover {
  background: #237e41;
  color: #fff;
}
html[data-theme="forest_canopy"] #view-accounts .account-choice-card:hover,
html[data-theme="forest_canopy"] #view-accounts .account-list-metrics article:hover {
  border-color: #2e9e52;
  box-shadow: 0 12px 26px rgba(20,80,40,.12);
}

/* Account creation: make the wizard controls and boundaries clear in Forest Canopy. */
html[data-theme="forest_canopy"] #view-accounts .account-wizard-page {
  border-color: rgba(31,122,61,.24);
  background:
    radial-gradient(circle at 94% 5%, rgba(46,158,82,.08), transparent 28%),
    rgba(255,255,255,.84);
  box-shadow: 0 14px 32px rgba(20,80,40,.09);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-stepper {
  background: rgba(242,249,243,.86);
  border-bottom-color: rgba(20,60,30,.14);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step {
  color: #6b8671;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(46,158,82,.35), rgba(20,60,30,.12));
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step > span {
  border-color: rgba(20,60,30,.2);
  background: #f4faf4;
  color: #55705c;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step b {
  background: rgba(242,249,243,.96);
  color: #55705c;
  border-radius: 6px;
  padding: 3px 10px 3px 0;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step.active > span,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step.done > span {
  border-color: #267f42;
  background: #2e9e52;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(46,158,82,.12);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step.active b {
  color: #12331c;
  font-weight: 900;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step.done,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-step.done b {
  color: #1f7a3d;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-intro {
  border-bottom-color: rgba(20,60,30,.14);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-main {
  background: rgba(255,255,255,.42) !important;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-guide {
  border-left-color: rgba(20,60,30,.16);
  background: linear-gradient(180deg, #f2f8f2, #eaf3eb);
}
html[data-theme="forest_canopy"] #view-accounts .account-guide-list > div > span {
  border-color: rgba(20,60,30,.2);
  background: rgba(255,255,255,.62);
  color: #6b8671;
}
html[data-theme="forest_canopy"] #view-accounts .account-guide-list > div.active > span,
html[data-theme="forest_canopy"] #view-accounts .account-guide-list > div.done > span {
  border-color: rgba(46,158,82,.42);
  background: #e2f4e5;
  color: #1f7a3d;
  box-shadow: 0 0 0 3px rgba(46,158,82,.08);
}
html[data-theme="forest_canopy"] #view-accounts .account-form-section {
  border-color: rgba(20,60,30,.16);
  background: rgba(255,255,255,.68);
  box-shadow: 0 5px 16px rgba(20,80,40,.05);
}
html[data-theme="forest_canopy"] #view-accounts .account-file-field {
  border-color: rgba(46,158,82,.34);
  background: rgba(242,249,243,.72);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field > span {
  color: #55705c;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field input,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field select,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field textarea {
  border-color: rgba(20,60,30,.24) !important;
  box-shadow: inset 0 1px 2px rgba(20,80,40,.04);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field input:focus,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field select:focus,
html[data-theme="forest_canopy"] #view-accounts .account-wizard-field textarea:focus {
  border-color: #2e9e52 !important;
  box-shadow: 0 0 0 4px rgba(46,158,82,.14), inset 0 1px 2px rgba(20,80,40,.04);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-actions button,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-actions button {
  min-height: 40px;
  border: 1px solid rgba(31,122,61,.32);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(20,80,40,.08);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-actions button:not(.secondary):not(.ghost) {
  background: #2e9e52;
  border-color: #267f42;
  color: #fff;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-actions button:not(.secondary):not(.ghost):hover {
  background: #237e41;
  border-color: #1f6e39;
  color: #fff;
  box-shadow: 0 6px 14px rgba(20,80,40,.16);
  transform: translateY(-1px);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-actions button.secondary,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-actions button.secondary {
  background: #f7fbf7;
  border-color: rgba(31,122,61,.34);
  color: #1f7a3d;
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-actions button.secondary:hover,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-actions button.secondary:hover {
  background: #e2f4e5;
  border-color: #2e9e52;
  color: #155b2c;
  box-shadow: 0 5px 12px rgba(20,80,40,.12);
  transform: translateY(-1px);
}
html[data-theme="forest_canopy"] #view-accounts .account-workspace-actions .account-help-button {
  background: #eef8ef;
  border-color: rgba(46,158,82,.42);
  color: #1f7a3d;
}
html[data-theme="forest_canopy"] #view-accounts .account-workspace-actions .account-help-button:hover {
  background: #e2f4e5;
  border-color: #2e9e52;
  color: #155b2c;
  box-shadow: 0 5px 12px rgba(20,80,40,.12);
  transform: translateY(-1px);
}
html[data-theme="forest_canopy"] #view-accounts .account-workspace-head > button.secondary {
  min-height: 40px;
  border: 1px solid rgba(31,122,61,.34);
  border-radius: 10px;
  background: #f7fbf7;
  color: #1f7a3d;
  box-shadow: 0 3px 8px rgba(20,80,40,.08);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
html[data-theme="forest_canopy"] #view-accounts .account-workspace-head > button.secondary:hover {
  background: #e2f4e5;
  border-color: #2e9e52;
  color: #155b2c;
  box-shadow: 0 5px 12px rgba(20,80,40,.12);
  transform: translateY(-1px);
}
html[data-theme="forest_canopy"] #view-accounts .account-wizard-actions button:focus-visible,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-actions button:focus-visible,
html[data-theme="forest_canopy"] #view-accounts .account-workspace-head > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(46,158,82,.18), 0 4px 10px rgba(20,80,40,.1);
}
html[data-theme="forest_canopy"] #view-accounts .account-choice-card {
  border-color: rgba(20,60,30,.2);
  background: rgba(255,255,255,.84);
}
html[data-theme="forest_canopy"] #view-accounts .account-choice-card footer {
  border-top-color: rgba(20,60,30,.14);
}
.account-help-grid ol { display:grid; gap:10px; margin:13px 0 0; padding-left:24px; color:var(--ink); }
.account-help-grid li { padding-left:5px; line-height:1.45; }
.account-help-grid li::marker { color:var(--green); font-weight:900; }
.account-help-warning {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  padding:13px 15px;
  border-color:rgba(245,158,11,.25);
  background:rgba(245,158,11,.07);
}
.account-help-warning strong { color:#f7c65f; }
.account-help-warning span { color:var(--muted); line-height:1.45; }

/* Master Goals & Campaigns: hierarchy and dark-state consistency. */
#view-customer .master-risk-explain {
  border-color:rgba(245,158,11,.2);
  background:linear-gradient(135deg,rgba(245,158,11,.045),rgba(255,255,255,.018));
}
.master-risk-reasons {
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
#view-customer .master-mission-filters button {
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.035) !important;
  color:#94a3b8 !important;
  box-shadow:none !important;
}
#view-customer .master-mission-filters button:hover {
  border-color:rgba(61,214,140,.28) !important;
  background:rgba(61,214,140,.08) !important;
  color:#8ce9b8 !important;
}
#view-customer .master-mission-filters button.active {
  border-color:rgba(61,214,140,.38) !important;
  background:rgba(61,214,140,.16) !important;
  color:#3dd68c !important;
}
.master-mission-table table { min-width:1160px; }
.master-mission-table th:nth-child(1),
.master-mission-table td:nth-child(1) { width:44px; }
.master-mission-table th:nth-child(2),
.master-mission-table td:nth-child(2) { width:210px; }
.master-mission-table th:nth-child(3),
.master-mission-table td:nth-child(3) { width:230px; }
.master-mission-table th:nth-child(4),
.master-mission-table td:nth-child(4) { width:130px; }
.master-mission-table th:nth-child(5),
.master-mission-table td:nth-child(5) { width:190px; }
.master-mission-table th:nth-child(6),
.master-mission-table td:nth-child(6),
.master-mission-table th:nth-child(7),
.master-mission-table td:nth-child(7) { width:135px; }
.master-mission-table th:nth-child(8),
.master-mission-table td:nth-child(8) { width:120px; }
.master-mission-table td { overflow-wrap:anywhere; }
.master-mission-table td:nth-child(4) strong,
.master-mission-table td:nth-child(6) strong,
.master-mission-table td:nth-child(7) strong { white-space:nowrap; }
.master-mission-row-meter {
  grid-template-columns:minmax(90px,1fr) 58px;
  gap:7px;
}
.master-mission-row-meter span { white-space:nowrap; }
.master-goal-control-row { grid-template-columns:repeat(3,minmax(260px,1fr)); }
.mc-dense,
.mc-dense > .mp-card,
.mc-dense > .mp-kpis,
.mc-dense .mc-table { width:100%; min-width:0; box-sizing:border-box; }
.mc-dense .mp-card > svg { display:block; width:100%; height:auto; min-height:70px; }
.mc-table table { min-width:760px; }

@media (max-width:1100px) {
  .master-goal-control-row { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .account-workspace-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .account-workspace-actions button { width:auto; flex:1 1 180px; }
  .account-help-grid { grid-template-columns:1fr; }
  .account-help-warning { grid-template-columns:1fr; }
}

/* Ranking privacy choice: centred, blocking notice for customer portals. */
.ranking-privacy-overlay { background: rgba(3, 8, 12, .82); backdrop-filter: blur(9px); }
.ranking-privacy-overlay .center-modal {
  width: min(720px, calc(100vw - 28px));
  border: 1px solid rgba(61,214,140,.42) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(61,214,140,.08);
}
.ranking-privacy-overlay .center-modal-head {
  padding: 22px 24px;
  background: var(--panel) !important;
}
.ranking-privacy-overlay .center-modal-body { padding: 24px 26px 26px; }
.ranking-privacy-copy { display: grid; gap: 18px; color: var(--ink); }
.ranking-privacy-intro { display: flex; align-items: center; gap: 14px; }
.ranking-privacy-shield {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: rgba(61,214,140,.13);
  color: var(--green);
  font-size: 30px;
}
.ranking-privacy-intro p { max-width: 510px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ranking-privacy-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ranking-privacy-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}
.ranking-privacy-choice > .material-symbols-rounded {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(61,214,140,.12);
  color: var(--green);
  font-size: 22px;
}
.ranking-privacy-choice > span:last-child { display: grid; align-content: center; gap: 4px; }
.ranking-privacy-choice strong { color: var(--ink); font-size: 16px; }
.ranking-privacy-choice small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.45; }
.ranking-privacy-choice.is-selected {
  border-color: var(--green);
  background: rgba(61,214,140,.09);
  box-shadow: inset 3px 0 0 var(--green);
}
.ranking-privacy-choice:hover, .ranking-privacy-choice:focus-visible { border-color: var(--green); background: rgba(61,214,140,.13); color: var(--ink); transform: translateY(-1px); }
.ranking-privacy-choice:focus-visible { outline: 3px solid rgba(61,214,140,.28); outline-offset: 2px; }
.ranking-privacy-data {
  display: grid;
  gap: 13px;
  padding: 18px 0 2px;
  border-top: 1px solid var(--line);
}
.ranking-privacy-data > strong { color: var(--muted); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.ranking-privacy-data > div { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 22px; }
.ranking-privacy-data span { display: grid; grid-template-columns: 31px minmax(0, 1fr); column-gap: 9px; align-items: center; color: var(--ink); font-size: 13px; font-weight: 800; }
.ranking-privacy-data i { display: grid; grid-row: span 2; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(61,214,140,.11); color: var(--green); font-size: 17px; font-style: normal; }
.ranking-privacy-data small { grid-column: 2; color: var(--muted); font-size: 11px; font-weight: 500; }
.ranking-privacy-note { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ranking-privacy-note .material-symbols-rounded { color: var(--muted); font-size: 19px; }
.ranking-privacy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ranking-privacy-actions button { min-height: 48px; font-weight: 800; }
.ranking-privacy-actions .secondary { border-color: rgba(61,214,140,.48); color: var(--ink); }
.ranking-privacy-sec { border-color: rgba(61,214,140,.28) !important; }
.ranking-privacy-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.ranking-privacy-toggle input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: 0 0 auto; }
.ranking-privacy-toggle span { display: grid; gap: 5px; }
.ranking-privacy-toggle strong { color: var(--ink); }
.ranking-privacy-toggle small { color: var(--muted); line-height: 1.4; }
.rank-pill-icon.material-symbols-rounded { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.rank-pill-compact .rank-pill-icon.material-symbols-rounded { font-size: 15px; }

/* Trip Evidence: one daily route entry, with a compact audit register. */
.trip-evidence-page { display: grid; gap: 18px; }
.trip-evidence-hero { display: flex; justify-content: space-between; align-items: end; gap: 18px; padding: 24px; border: 1px solid rgba(61,214,140,.28); border-left: 4px solid var(--green); border-radius: 18px; background: linear-gradient(135deg, rgba(61,214,140,.10), var(--panel)); }
.trip-evidence-hero h2 { margin: 5px 0 7px; }
.trip-evidence-hero p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.5; }
.trip-evidence-mode-chip { display: inline-flex; vertical-align: middle; align-items: center; margin-left: 8px; padding: 5px 9px; border: 1px solid rgba(245,158,11,.56); border-radius: 999px; background: rgba(245,158,11,.14); color: #f7d47a; font-size: 10px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.trip-evidence-demo-banner, .trip-evidence-operational-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 15px 17px; border-radius: 14px; }
.trip-evidence-demo-banner { border: 1px solid rgba(245,158,11,.48); border-left: 5px solid #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(120,53,15,.10)); }
.trip-evidence-operational-banner { border: 1px solid rgba(61,214,140,.34); border-left: 5px solid var(--green); background: rgba(61,214,140,.08); }
.trip-evidence-demo-banner > .material-symbols-rounded, .trip-evidence-operational-banner > .material-symbols-rounded { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; }
.trip-evidence-demo-banner > .material-symbols-rounded { color: #f7d47a; background: rgba(245,158,11,.18); }
.trip-evidence-operational-banner > .material-symbols-rounded { color: #9be7bd; background: rgba(61,214,140,.16); }
.trip-evidence-demo-banner strong, .trip-evidence-operational-banner strong { display: block; color: var(--ink); font-size: 12px; letter-spacing: .05em; }
.trip-evidence-demo-banner p, .trip-evidence-operational-banner p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.trip-evidence-demo-badge, .trip-evidence-register-demo-tag { align-self: start; padding: 6px 9px; border: 1px solid rgba(245,158,11,.5); border-radius: 999px; color: #f7d47a; background: rgba(245,158,11,.12); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.trip-evidence-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trip-evidence-stat-grid article { display: grid; gap: 7px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.trip-evidence-stat-grid span, .trip-evidence-detail-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.trip-evidence-stat-grid strong { font-size: 25px; }
.trip-evidence-stat-grid small, .trip-evidence-batch-row small { color: var(--muted); }
.trip-evidence-alert, .sorting-trip-evidence-missing { display: grid; gap: 7px; padding: 14px 16px; border: 1px solid rgba(245,158,11,.34); border-left: 4px solid #f59e0b; border-radius: 12px; background: rgba(245,158,11,.08); color: var(--ink); }
.sorting-trip-evidence-missing .trip-evidence-same-day-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 3px; padding: 10px 14px; border: 1px solid rgba(31,122,61,.62); border-radius: 10px; background: linear-gradient(135deg, #2e9e52, #1f7a3d); color: #fff; box-shadow: 0 8px 16px rgba(31,122,61,.16); }
.sorting-trip-evidence-missing .trip-evidence-same-day-cta:hover { border-color: #1f7a3d; background: linear-gradient(135deg, #36ad5d, #246f3f); transform: translateY(-1px); }
.sorting-trip-evidence-missing .trip-evidence-same-day-cta:focus-visible { outline: 3px solid rgba(46,158,82,.28); outline-offset: 2px; }
.trip-evidence-same-day-cta .material-symbols-rounded { font-size: 18px; }
.trip-evidence-register { padding: 0; overflow: hidden; }
.trip-evidence-register .panel-title { padding: 20px; margin: 0; border-bottom: 1px solid var(--line); }
.trip-evidence-register-tags { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.trip-evidence-method { padding: 8px 11px; border: 1px solid rgba(61,214,140,.3); border-radius: 999px; color: var(--green); font-size: 11px; font-weight: 800; }
.trip-evidence-table-head, .trip-evidence-batch-row { display: grid; grid-template-columns: 1.05fr 1.45fr 1fr .9fr .75fr; gap: 15px; align-items: center; }
.trip-evidence-table-head { padding: 11px 20px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.trip-evidence-batch-row { width: 100%; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; padding: 16px 20px; }
.trip-evidence-batch-row:hover { background: rgba(61,214,140,.08); }
.trip-evidence-batch-row.is-demo { border-left: 4px solid #f59e0b; padding-left: 16px; background: rgba(245,158,11,.055); }
.trip-evidence-batch-row.is-demo:hover { background: rgba(245,158,11,.11); }
.trip-evidence-batch-row > span { display: grid; gap: 4px; min-width: 0; }
.trip-evidence-batch-row strong, .trip-evidence-batch-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-evidence-batch-row .trip-evidence-date strong { color: var(--green); }
.trip-evidence-row-badge { width: fit-content; padding: 3px 6px; border: 1px solid rgba(245,158,11,.5); border-radius: 999px; color: #9a6700; background: #fff4c7; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.trip-evidence-actions { display: flex !important; align-items: flex-end; justify-content: center; gap: 8px; }
.trip-evidence-open { min-height: auto; padding: 5px 0; border: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 800; text-align: right; white-space: nowrap; }
.trip-evidence-open:hover { background: transparent; color: #155b2c; text-decoration: underline; }
.trip-evidence-edit { min-height: 30px; padding: 6px 10px; border: 1px solid rgba(61,214,140,.42); border-radius: 8px; background: rgba(61,214,140,.09); color: var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.trip-evidence-edit:hover { border-color: var(--green); background: rgba(61,214,140,.18); color: var(--ink); transform: translateY(-1px); }
.trip-evidence-action-message { margin: 14px 20px 0; }
.trip-evidence-empty { display: grid; gap: 6px; justify-items: center; padding: 48px 20px; text-align: center; color: var(--muted); }
.trip-evidence-empty strong { color: var(--ink); }
.trip-evidence-empty.compact { justify-items: start; padding: 16px; text-align: left; }
.trip-evidence-form { display: grid; gap: 15px; }
.trip-evidence-explainer, .trip-evidence-step { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.trip-evidence-explainer { border-color: rgba(61,214,140,.3); background: rgba(61,214,140,.08); }
.trip-evidence-explainer span, .trip-evidence-step-title small { color: var(--muted); line-height: 1.45; }
.trip-evidence-step-title { display: flex; gap: 11px; align-items: center; }
.trip-evidence-step-title > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #07130c; background: var(--green); }
.trip-evidence-step-title div { display: grid; gap: 2px; }
.trip-evidence-stop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.trip-evidence-stop-toolbar label { display: inline-flex; gap: 8px; align-items: center; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.trip-evidence-stop-toolbar input, .trip-evidence-stop-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.trip-evidence-stop-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 220px; overflow: auto; }
.trip-evidence-stop-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.trip-evidence-stop-option:hover { border-color: rgba(61,214,140,.45); transform: translateY(-1px); }
.trip-evidence-stop-option:has(input:checked) { border-color: rgba(61,214,140,.72); background: rgba(61,214,140,.10); box-shadow: inset 3px 0 0 var(--green); }
.trip-evidence-date-empty { margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; }
.trip-evidence-date-groups { display: grid; gap: 9px; max-height: 360px; overflow: auto; padding: 2px; }
.trip-evidence-date-group { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.trip-evidence-date-group.active { border-color: rgba(61,214,140,.55); background: rgba(61,214,140,.06); }
.trip-evidence-date-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 2px 3px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.trip-evidence-date-group-head > span { display: grid; gap: 3px; min-width: 0; }
.trip-evidence-date-group-head strong { color: var(--ink); font-size: 13px; }
.trip-evidence-date-group-head small { color: var(--muted); font-size: 11px; }
.trip-evidence-date-group-head em { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: rgba(148,163,184,.14); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 800; }
.trip-evidence-date-group-head:not(:disabled):hover { color: var(--green); }
.trip-evidence-date-group-head:disabled { opacity: 1; cursor: default; }
.trip-evidence-date-group.active .trip-evidence-date-group-head em { background: rgba(61,214,140,.18); color: var(--green); }
.trip-evidence-date-group .trip-evidence-stop-list { max-height: none; overflow: visible; gap: 6px; }
.trip-evidence-date-group .trip-evidence-stop-option { min-height: 52px; padding: 9px 11px; }
.trip-evidence-stop-option.is-date-inactive { cursor: default; }
.trip-evidence-stop-option.is-date-inactive:hover { border-color: var(--line); transform: none; }
.trip-evidence-stop-option.is-date-inactive > .material-symbols-rounded { color: var(--muted); font-size: 17px; }
.trip-evidence-stop-info { display: grid; gap: 4px; min-width: 0; }
.trip-evidence-stop-info strong, .trip-evidence-stop-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-evidence-stop-info strong { color: var(--ink); }
.trip-evidence-stop-info small { color: var(--muted); }
.trip-evidence-stop-status { justify-self: end; padding: 5px 9px; border: 1px solid rgba(148,163,184,.24); border-radius: 999px; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.trip-evidence-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.trip-evidence-preview div, .trip-evidence-detail-grid div { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.trip-evidence-preview span { color: var(--muted); font-size: 11px; }
.sorting-trip-evidence-linked { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid rgba(61,214,140,.35); border-radius: 12px; background: rgba(61,214,140,.08); }
.sorting-trip-evidence-linked > div { display: grid; gap: 4px; }
.sorting-trip-evidence-linked span { color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 800; }
.sorting-trip-evidence-linked small { color: var(--muted); }
.trip-evidence-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trip-evidence-route-note { display: grid; gap: 5px; padding: 13px; border-left: 3px solid var(--green); background: rgba(61,214,140,.08); }
.trip-evidence-detail-demo-note { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(245,158,11,.48); border-left: 4px solid #f59e0b; border-radius: 12px; background: rgba(245,158,11,.10); }
.trip-evidence-detail-demo-note strong { color: #9a6700; font-size: 11px; letter-spacing: .06em; }
.trip-evidence-detail-demo-note span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.trip-evidence-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid rgba(61,214,140,.32); border-radius: 12px; background: rgba(61,214,140,.08); }
.trip-evidence-detail-actions span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.trip-evidence-detail-actions button { flex: 0 0 auto; }
.trip-evidence-lock-note { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(245,158,11,.4); border-left: 3px solid #f59e0b; border-radius: 10px; background: rgba(245,158,11,.08); }
.trip-evidence-lock-note strong { color: var(--ink); font-size: 12px; }
.trip-evidence-lock-note span { color: var(--muted); font-size: 12px; line-height: 1.45; }
html[data-theme="forest_canopy"] .trip-evidence-mode-chip,
html[data-theme="forest_canopy"] .trip-evidence-demo-badge,
html[data-theme="forest_canopy"] .trip-evidence-register-demo-tag { color: #7a4d00; background: rgba(183,121,31,.12); }
html[data-theme="forest_canopy"] .trip-evidence-detail-demo-note strong { color: #7a4d00; }
.trip-evidence-route-note span { color: var(--muted); font-size: 12px; }
.trip-evidence-image { margin: 0; display: grid; gap: 7px; }
.trip-evidence-image img { width: 100%; max-height: 360px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #0d1110; }
.trip-evidence-image figcaption { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .trip-evidence-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-evidence-table-head { display: none; }
  .trip-evidence-batch-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .trip-evidence-actions { align-items: flex-start; justify-content: flex-start; }
  .trip-evidence-open { text-align: left; }
  .trip-evidence-detail-actions { align-items: stretch; flex-direction: column; }
  .trip-evidence-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .trip-evidence-hero { align-items: stretch; flex-direction: column; padding: 17px; }
  .trip-evidence-demo-banner, .trip-evidence-operational-banner { grid-template-columns: auto minmax(0, 1fr); }
  .trip-evidence-demo-badge { grid-column: 2; justify-self: start; }
  .trip-evidence-register-tags { justify-content: flex-start; }
  .trip-evidence-stat-grid, .trip-evidence-stop-list, .trip-evidence-preview, .trip-evidence-detail-grid { grid-template-columns: 1fr; }
  .trip-evidence-batch-row { grid-template-columns: 1fr; padding: 14px 15px; }
  .sorting-trip-evidence-linked { grid-template-columns: 1fr; }
  .trip-evidence-stop-option { grid-template-columns: auto minmax(0, 1fr); }
  .trip-evidence-stop-status { grid-column: 2; justify-self: start; }
  .operational-source-notes { display: grid; gap: 8px; }
  .operational-source-notes p + p { padding-left: 0; border-left: 0; }
  .calculation-trail-evidence { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  .ranking-privacy-overlay { padding: 10px; }
  .ranking-privacy-overlay .center-modal { width: 100%; max-height: calc(100vh - 20px); border-radius: 18px; }
  .ranking-privacy-overlay .center-modal-head,
  .ranking-privacy-overlay .center-modal-body { padding: 16px; }
  .ranking-privacy-copy { gap: 15px; }
  .ranking-privacy-shield { width: 46px; height: 46px; flex-basis: 46px; font-size: 26px; }
  .ranking-privacy-intro p { font-size: 14px; }
  .ranking-privacy-choices, .ranking-privacy-data > div, .ranking-privacy-actions { grid-template-columns: 1fr; }
  .ranking-privacy-choice { min-height: 82px; padding: 13px; }
  .ranking-privacy-data { gap: 11px; padding-top: 15px; }
}

/* ============================================================
   THEME · Forest Canopy — follow-up pass 1
   Drawer/modal system (#detailDrawer, #drawerBody) — used across
   every page (weight slip, driver notes, audit, profile...).
   Placed at end of file + !important to reliably beat the
   Carbon Dark drawer patches regardless of source order.
   ============================================================ */
html[data-theme="forest_canopy"] #detailDrawer { background: #fbfdf9 !important; color: #12331c !important; border-left: 1px solid rgba(20,60,30,.14) !important; }
html[data-theme="forest_canopy"] #detailDrawer .drawer-head { background: #fbfdf9 !important; border-bottom: 1px solid rgba(20,60,30,.12) !important; }
html[data-theme="forest_canopy"] #detailDrawer .drawer-head h2 { color: #12331c !important; }
html[data-theme="forest_canopy"] #detailDrawer .eyebrow { color: #1f8f4d !important; }
html[data-theme="forest_canopy"] #detailDrawer #drawerClose { background: rgba(20,60,30,.06) !important; color: #12331c !important; border: 1px solid rgba(20,60,30,.16) !important; }

html[data-theme="forest_canopy"] #view-customer .mp-hero-left h2 { color: var(--ink) !important; }
html[data-theme="forest_canopy"] #view-customer .mp-hero-left .eyebrow { color: var(--sky) !important; }
html[data-theme="forest_canopy"] #view-customer .mp-hero-left small { color: var(--muted) !important; }

html[data-theme="forest_canopy"] .esg-readiness-card,
html[data-theme="forest_canopy"] .esg-check-item { background: rgba(255,255,255,.72) !important; }

html[data-theme="forest_canopy"] .collection-mode-tabs { border-color: rgba(20,60,30,.14) !important; background: rgba(255,255,255,.5) !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button { color: #55705c !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button > span { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button strong { color: #12331c !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button small { color: #55705c !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button.active { border-color: rgba(46,158,82,.4) !important; background: linear-gradient(145deg, rgba(46,158,82,.16), rgba(31,122,61,.12)) !important; box-shadow: 0 8px 20px rgba(20,80,40,.1) !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button.active > span,
html[data-theme="forest_canopy"] .collection-mode-tabs button.active strong { color: #1f7a3d !important; }
html[data-theme="forest_canopy"] .collection-mode-tabs button.active small { color: #2e9e52 !important; }
html[data-theme="forest_canopy"] #drawerBody { background: #fbfdf9 !important; color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody p, html[data-theme="forest_canopy"] #drawerBody li { color: #55705c !important; }
html[data-theme="forest_canopy"] #drawerBody h2, html[data-theme="forest_canopy"] #drawerBody h3, html[data-theme="forest_canopy"] #drawerBody h4 { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody label { color: #55705c !important; }
html[data-theme="forest_canopy"] #drawerBody strong { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody small, html[data-theme="forest_canopy"] #drawerBody .muted { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody .eyebrow { color: #1f8f4d !important; }
html[data-theme="forest_canopy"] #drawerBody .metric-card { background: #eef8ef !important; border: 1px solid rgba(20,60,30,.12) !important; }
html[data-theme="forest_canopy"] #drawerBody .metric-card span { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody .metric-card strong { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody table { background: transparent !important; }
html[data-theme="forest_canopy"] #drawerBody th { background: rgba(20,60,30,.05) !important; color: #55705c !important; border-bottom: 1px solid rgba(20,60,30,.1) !important; }
html[data-theme="forest_canopy"] #drawerBody td { color: #12331c !important; border-bottom: 1px solid rgba(20,60,30,.08) !important; background: transparent !important; }
html[data-theme="forest_canopy"] #drawerBody tr:hover td { background: rgba(20,60,30,.04) !important; }
html[data-theme="forest_canopy"] #drawerBody .data-grid, html[data-theme="forest_canopy"] #drawerBody .table-wrap { background: #f4faf3 !important; border: 1px solid rgba(20,60,30,.1) !important; }
html[data-theme="forest_canopy"] #drawerBody .panel { background: #eef8ef !important; border: 1px solid rgba(20,60,30,.12) !important; }
html[data-theme="forest_canopy"] #drawerBody .panel-title h2, html[data-theme="forest_canopy"] #drawerBody .panel-title h3 { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody input, html[data-theme="forest_canopy"] #drawerBody select, html[data-theme="forest_canopy"] #drawerBody textarea { background: #ffffff !important; border: 1px solid rgba(20,60,30,.18) !important; color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody input::placeholder { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody option { background: #ffffff !important; color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody button.secondary, html[data-theme="forest_canopy"] #drawerBody button.ghost, html[data-theme="forest_canopy"] #drawerBody button.compact-btn { background: rgba(20,60,30,.06) !important; color: #12331c !important; border: 1px solid rgba(20,60,30,.16) !important; }
html[data-theme="forest_canopy"] #drawerBody button:not(.secondary):not(.ghost):not(.compact-btn):not(.danger) { background: #2e9e52 !important; color: #ffffff !important; }
html[data-theme="forest_canopy"] #drawerBody .form-section { border-top: 1px solid rgba(20,60,30,.1) !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-compact .field-label { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-compact .field-value { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody a { color: #1f8f4d !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-drawer-head, html[data-theme="forest_canopy"] #drawerBody .profile-sec { background: #eef8ef !important; border: 1px solid rgba(20,60,30,.12) !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-sec-title { color: #1f8f4d !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-drawer-head h3 { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-drawer-head p { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-avatar-large { background: #2e9e52 !important; color: #ffffff !important; }
html[data-theme="forest_canopy"] #drawerBody .compact-form label span, html[data-theme="forest_canopy"] #drawerBody .profile-sec label span { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody .compact-form label strong, html[data-theme="forest_canopy"] #drawerBody .profile-sec strong { color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody .compact-form input, html[data-theme="forest_canopy"] #drawerBody .profile-sec input, html[data-theme="forest_canopy"] #drawerBody #profileForm input { background: #ffffff !important; border: 1px solid rgba(20,60,30,.16) !important; color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-sec .muted, html[data-theme="forest_canopy"] #drawerBody #profileSaveMessage { color: #6f8a76 !important; }
html[data-theme="forest_canopy"] #drawerBody .role-badge { background: rgba(46,158,82,.14) !important; color: #1f7a3d !important; border: 1px solid rgba(46,158,82,.25) !important; }
html[data-theme="forest_canopy"] #drawerBody .compact-btn { background: rgba(20,60,30,.06) !important; border: 1px solid rgba(20,60,30,.14) !important; color: #12331c !important; }
html[data-theme="forest_canopy"] #drawerBody .logout-outline { background: transparent !important; border-color: #c2410c !important; color: #9a3412 !important; }
html[data-theme="forest_canopy"] #drawerBody .logout-outline:hover { background: #fff7ed !important; border-color: #9a3412 !important; color: #7c2d12 !important; }
html[data-theme="forest_canopy"] .portal-notification-bell { background: rgba(255,255,255,.72); color: #176b39; border-color: rgba(23,107,57,.2); }
html[data-theme="forest_canopy"] .announcement-chat-layout { background: #f3f9f3; }
html[data-theme="forest_canopy"] .announcement-chat-header,
html[data-theme="forest_canopy"] .announcement-composer { background: #ffffff; }
html[data-theme="forest_canopy"] .announcement-chat-pane { background: #fbfefb; }
html[data-theme="carbon_dark"] .announcement-chat-layout { background: #101612; border-color: rgba(207,239,218,.14); }
html[data-theme="carbon_dark"] .announcement-chat-header,
html[data-theme="carbon_dark"] .announcement-composer { background: #141b17; border-color: rgba(207,239,218,.14); }
html[data-theme="carbon_dark"] .announcement-chat-pane { background: #111713; }
html[data-theme="carbon_dark"] .announcement-chat-pane > .announcement-message-list { background: linear-gradient(180deg, #101612, #111713); }
html[data-theme="carbon_dark"] .announcement-channel-item.active { background: rgba(61,214,140,.12) !important; }
html[data-theme="carbon_dark"] .announcement-detail-card { background: #151d18; }
html[data-theme="carbon_dark"] .notice-template-preview { background: #151d18; border-color: rgba(207,239,218,.18); }
html[data-theme="carbon_dark"] .notice-template-subject,
html[data-theme="carbon_dark"] .notice-template-metrics > div { background: #101612; border-color: rgba(207,239,218,.14); }
html[data-theme="carbon_dark"] .notice-in-app-pill { color: #bfe8cb; border-color: rgba(112,196,140,.45); background: rgba(37,118,65,.2); }
html[data-theme="carbon_dark"] .announcement-empty-state { color: #a6bcae; }
html[data-theme="carbon_dark"] .announcement-modal,
html[data-theme="carbon_dark"] .center-modal { background: #121814; border-color: rgba(207,239,218,.14); }
html[data-theme="carbon_dark"] .center-modal-head { background: #151d18; border-color: rgba(207,239,218,.14); }
html[data-theme="carbon_dark"] .center-modal-body { background: #121814; }
html[data-theme="carbon_dark"] .announcement-summary article,
html[data-theme="carbon_dark"] .announcement-form { background: #151d18; border-color: rgba(207,239,218,.14); }
html[data-theme="carbon_dark"] .announcement-composer input,
html[data-theme="carbon_dark"] .announcement-composer select,
html[data-theme="carbon_dark"] .announcement-composer textarea { background: #101612; color: #eafff0; border-color: rgba(207,239,218,.18); }

/* ============================================================
   THEME · Forest Canopy — follow-up pass 2
   ESG Impact Portal / master goals & campaigns card family
   (mp-*, master-*). Mirrors the Carbon Dark patch list above,
   placed at end of file + !important for the same reason.
   ============================================================ */
html[data-theme="forest_canopy"] #view-customer .mp-command-hero,
html[data-theme="forest_canopy"] #view-customer .master-hero,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero {
  background: linear-gradient(135deg, #eafcee, #dff2e0) !important;
  color: #12331c !important;
}
html[data-theme="forest_canopy"] #view-customer .master-mission-hero.amber { background: linear-gradient(135deg,#fdf6e6,#faecc9) !important; }
html[data-theme="forest_canopy"] #view-customer .master-mission-hero.red { background: linear-gradient(135deg,#fdedec,#f9d9d6) !important; }

html[data-theme="forest_canopy"] #view-customer .mp-command-progress,
html[data-theme="forest_canopy"] #view-customer .mp-info-strip article,
html[data-theme="forest_canopy"] #view-customer .mp-league-card,
html[data-theme="forest_canopy"] #view-customer .mp-report-grid article,
html[data-theme="forest_canopy"] #view-customer .mp-risk-card,
html[data-theme="forest_canopy"] #view-customer .mp-kpi,
html[data-theme="forest_canopy"] #view-customer .mp-card,
html[data-theme="forest_canopy"] #view-customer .mp-action-item,
html[data-theme="forest_canopy"] #view-customer .mp-stat-box,
html[data-theme="forest_canopy"] #view-customer .mp-details-card,
html[data-theme="forest_canopy"] #view-customer .master-hero-metrics article,
html[data-theme="forest_canopy"] #view-customer .master-mission-grid article,
html[data-theme="forest_canopy"] #view-customer .master-action-list article,
html[data-theme="forest_canopy"] #view-customer .master-goal-box,
html[data-theme="forest_canopy"] #view-customer .master-goal-triplet,
html[data-theme="forest_canopy"] #view-customer .master-goal-period-grid > article,
html[data-theme="forest_canopy"] #view-customer .master-goal-mini,
html[data-theme="forest_canopy"] #view-customer .master-goal-rules article,
html[data-theme="forest_canopy"] #view-customer .master-goal-locked-note,
html[data-theme="forest_canopy"] #view-customer .master-campaign-purpose,
html[data-theme="forest_canopy"] #view-customer .master-branch-goal-card,
html[data-theme="forest_canopy"] #view-customer .master-mission-table,
html[data-theme="forest_canopy"] #view-customer .master-mission-card,
html[data-theme="forest_canopy"] #view-customer .master-campaign-challenge,
html[data-theme="forest_canopy"] #view-customer .master-risk-reasons article,
html[data-theme="forest_canopy"] #view-customer .master-linebar-row,
html[data-theme="forest_canopy"] #view-customer .master-pie-legend,
html[data-theme="forest_canopy"] #view-customer .master-status-grid article,
html[data-theme="forest_canopy"] #view-customer .master-target-numbers article,
html[data-theme="forest_canopy"] #view-customer .master-insight-list article,
html[data-theme="forest_canopy"] #view-customer .master-campaign-branches,
html[data-theme="forest_canopy"] #view-customer .master-goal-onboarding-card,
html[data-theme="forest_canopy"] #view-customer .master-slide-body,
html[data-theme="forest_canopy"] #view-customer .master-empty {
  background: rgba(255,255,255,.72) !important;
  color: #12331c !important;
  border-color: rgba(20,60,30,.14) !important;
  box-shadow: 0 8px 20px rgba(20,80,40,.08) !important;
}

html[data-theme="forest_canopy"] #view-customer .mp-details-card summary,
html[data-theme="forest_canopy"] #view-customer .master-goal-details summary { background: rgba(20,60,30,.05) !important; color: #12331c !important; }

html[data-theme="forest_canopy"] #view-customer .mp-league-card.green, html[data-theme="forest_canopy"] #view-customer .mp-risk-card.green,
html[data-theme="forest_canopy"] #view-customer .master-mission-card.green, html[data-theme="forest_canopy"] #view-customer .master-campaign-challenge.green { background: rgba(46,158,82,.1) !important; border-color: rgba(46,158,82,.3) !important; }
html[data-theme="forest_canopy"] #view-customer .mp-league-card.amber, html[data-theme="forest_canopy"] #view-customer .mp-risk-card.amber,
html[data-theme="forest_canopy"] #view-customer .master-mission-card.amber, html[data-theme="forest_canopy"] #view-customer .master-campaign-challenge.amber { background: rgba(183,121,31,.1) !important; border-color: rgba(183,121,31,.3) !important; }
html[data-theme="forest_canopy"] #view-customer .mp-league-card.red, html[data-theme="forest_canopy"] #view-customer .mp-risk-card.red,
html[data-theme="forest_canopy"] #view-customer .master-mission-card.red, html[data-theme="forest_canopy"] #view-customer .master-campaign-challenge.red { background: rgba(192,57,43,.08) !important; border-color: rgba(192,57,43,.28) !important; }

html[data-theme="forest_canopy"] #view-customer .mp-kpi strong, html[data-theme="forest_canopy"] #view-customer .mp-stat-val,
html[data-theme="forest_canopy"] #view-customer .mp-card h3, html[data-theme="forest_canopy"] #view-customer .mp-command-progress strong,
html[data-theme="forest_canopy"] #view-customer .master-hero-metrics article strong { color: #12331c !important; }

html[data-theme="forest_canopy"] #view-customer .mp-tabs, html[data-theme="forest_canopy"] #view-customer .master-tabs { background: rgba(20,60,30,.04) !important; border-color: rgba(20,60,30,.1) !important; }
html[data-theme="forest_canopy"] #view-customer .mp-tabs button, html[data-theme="forest_canopy"] #view-customer .master-tabs button { color: #55705c !important; }
html[data-theme="forest_canopy"] #view-customer .mp-tabs button:hover, html[data-theme="forest_canopy"] #view-customer .master-tabs button:hover { background: rgba(46,158,82,.1) !important; color: #1f8f4d !important; }
html[data-theme="forest_canopy"] #view-customer .mp-tabs button.active, html[data-theme="forest_canopy"] #view-customer .master-tabs button.active { background: #2e9e52 !important; color: #ffffff !important; box-shadow: none !important; }

html[data-theme="forest_canopy"] #view-customer .mp-table th, html[data-theme="forest_canopy"] #view-customer .master-mission-table th { background: rgba(20,60,30,.04) !important; color: #55705c !important; }
html[data-theme="forest_canopy"] #view-customer .mp-table td, html[data-theme="forest_canopy"] #view-customer .master-mission-table td { color: #12331c !important; border-color: rgba(20,60,30,.08) !important; }
html[data-theme="forest_canopy"] #view-customer .mp-table tr.click-row:hover td, html[data-theme="forest_canopy"] #view-customer .mp-table tr:hover td { background: rgba(20,60,30,.04) !important; }
html[data-theme="forest_canopy"] #view-customer .master-mission-table tr.green td { background: rgba(46,158,82,.07) !important; }
html[data-theme="forest_canopy"] #view-customer .master-mission-table tr.amber td { background: rgba(183,121,31,.08) !important; }
html[data-theme="forest_canopy"] #view-customer .master-mission-table tr.red td { background: rgba(192,57,43,.07) !important; }

html[data-theme="forest_canopy"] #view-customer .mp-action-item:hover { background: rgba(46,158,82,.08) !important; border-color: rgba(46,158,82,.3) !important; }
html[data-theme="forest_canopy"] #view-customer .master-mission-action span { background: rgba(20,60,30,.05) !important; color: #55705c !important; border-color: rgba(20,60,30,.1) !important; }

html[data-theme="forest_canopy"] .pie-item:hover { background: rgba(46,158,82,.08) !important; }

html[data-theme="forest_canopy"] #view-customer .master-risk-explain {
  border-color: rgba(183,121,31,.25) !important;
  background: linear-gradient(135deg, rgba(183,121,31,.06), rgba(255,255,255,.4)) !important;
}
html[data-theme="forest_canopy"] #view-customer .master-mission-filters button {
  border: 1px solid rgba(20,60,30,.12) !important;
  background: rgba(20,60,30,.04) !important;
  color: #55705c !important;
  box-shadow: none !important;
}
html[data-theme="forest_canopy"] #view-customer .master-mission-filters button:hover {
  border-color: rgba(46,158,82,.3) !important;
  background: rgba(46,158,82,.1) !important;
  color: #1f7a3d !important;
}
html[data-theme="forest_canopy"] #view-customer .master-mission-filters button.active {
  border-color: rgba(46,158,82,.4) !important;
  background: rgba(46,158,82,.16) !important;
  color: #1f7a3d !important;
}

/* ============================================================
   THEME · Forest Canopy — follow-up pass 3
   Dashboard (nd-*) — this whole component family reads from the
   --nd-* variables set on #view-dashboard, so overriding just
   those variables re-themes every nd-card/nd-kpi/nd-pipeline/etc
   at once instead of patching each selector individually.
   Verified live: #view-dashboard .nd-status-card background was
   rgb(22,25,32) before this fix.
   ============================================================ */
html[data-theme="forest_canopy"] #view-dashboard {
  --nd-teal: #2e9e52;
  --nd-teal-ink: #1f7a3d;
  --nd-green: #2e9e52;
  --nd-amber: #b7791f;
  --nd-red: #c0392b;
  --nd-blue: #1d6fa5;
  --nd-card: rgba(255,255,255,.78);
  --nd-line: rgba(20,60,30,.14);
  --nd-ring-track: rgba(20,60,30,.08);
  --nd-ink: #12331c;
  --nd-mut: #55705c;
  --nd-shadow: 0 8px 20px rgba(20,80,40,.08);
}
html[data-theme="forest_canopy"] #view-dashboard .nd-kpi:hover { border-color: rgba(46,158,82,.3); }
html[data-theme="forest_canopy"] #view-dashboard .nd-ic { background: rgba(20,60,30,.06); }
html[data-theme="forest_canopy"] #view-dashboard .nd-kpi-bar { background: rgba(20,60,30,.08); }
html[data-theme="forest_canopy"] #view-dashboard .nd-stage:hover { background: rgba(20,60,30,.05); }
html[data-theme="forest_canopy"] #view-dashboard .nd-stage-arrow { color: rgba(20,60,30,.22); }
html[data-theme="forest_canopy"] #view-dashboard .nd-stage-icon.mute { background: rgba(20,60,30,.05); }
html[data-theme="forest_canopy"] #view-dashboard .nd-card button.secondary, html[data-theme="forest_canopy"] #view-dashboard .nd-card button.compact-btn { background: rgba(20,60,30,.06); }
html[data-theme="forest_canopy"] #view-dashboard .nd-task { background: #f4faf3; }
html[data-theme="forest_canopy"] #view-dashboard .nd-mini { background: #f4faf3; }
html[data-theme="forest_canopy"] #view-dashboard .nd-queue.nd-q-warn { background: #fdf6e6; border-color: #f2dfb0; }
html[data-theme="forest_canopy"] #view-dashboard .nd-queue.nd-q-ok { background: #eafbee; border-color: #c9ecd8; }
html[data-theme="forest_canopy"] #view-dashboard .nd-dash::-webkit-scrollbar-thumb { background: rgba(20,60,30,.14); }
html[data-theme="forest_canopy"] #view-dashboard .nd-sc-badge.g,
html[data-theme="forest_canopy"] #view-dashboard .nd-feed-badge.g,
html[data-theme="forest_canopy"] #view-dashboard .nd-prow-pct.g,
html[data-theme="forest_canopy"] #view-dashboard .nd-dq-item-count.g,
html[data-theme="forest_canopy"] #view-dashboard .nd-live-badge,
html[data-theme="forest_canopy"] #view-dashboard .dashboard-latest-slip span,
html[data-theme="forest_canopy"] #view-dashboard .nd-status-card.c-green .nd-sc-num { color: #1f7a3d; }
html[data-theme="forest_canopy"] #view-dashboard .nd-live-badge { background: rgba(31,122,61,.1); border-color: rgba(31,122,61,.25); }
html[data-theme="forest_canopy"] #view-dashboard .nd-stage-badge.g { background: #2e9e52; color: #ffffff; }
html[data-theme="forest_canopy"] #view-dashboard .dashboard-audit-boundary strong { color: #1d6fa5; }
html[data-theme="forest_canopy"] #view-dashboard .nd-action-card-title,
html[data-theme="forest_canopy"] #view-dashboard .nd-arow-count { color: #b7791f; }

html[data-theme="forest_canopy"] #view-crm .crm-chart-card,
html[data-theme="forest_canopy"] #view-crm .crm-ccard { border-color: rgba(20,60,30,.14); }
html[data-theme="forest_canopy"] #view-crm .crm-ccard:hover { border-color: rgba(46,158,82,.35); box-shadow: 0 8px 20px rgba(20,80,40,.12); }
html[data-theme="forest_canopy"] #view-crm .crm-ccard-hq { border-color: rgba(46,158,82,.3); }
html[data-theme="forest_canopy"] #view-crm .crm-area-track,
html[data-theme="forest_canopy"] #view-crm .crm-type-bar-track { background: rgba(20,60,30,.08); }
html[data-theme="forest_canopy"] #view-crm .crm-area-fill { background: #2e9e52; }
html[data-theme="forest_canopy"] #view-crm .crm-section-line { background: rgba(20,60,30,.12); }
html[data-theme="forest_canopy"] #view-crm .crm-ccard-badge.hq,
html[data-theme="forest_canopy"] #view-crm .crm-ccard-do { color: #1f7a3d; background: rgba(31,122,61,.1); border-color: rgba(31,122,61,.25); }
html[data-theme="forest_canopy"] #view-crm .crm-ccard-do:hover { background: rgba(31,122,61,.18); }
html[data-theme="forest_canopy"] #view-crm .crm-hero-search:focus { border-color: rgba(46,158,82,.5) !important; }

html[data-theme="forest_canopy"] .do-new-summary-icon,
html[data-theme="forest_canopy"] .mgr-hero-badge,
html[data-theme="forest_canopy"] .mgr-rail-badge,
html[data-theme="forest_canopy"] .sort-rail-badge,
html[data-theme="forest_canopy"] .sort-activity-head > span { color: #1f7a3d; background: rgba(31,122,61,.1); border-color: rgba(31,122,61,.25); }
html[data-theme="forest_canopy"] .sort-rail-item-date strong { color: #12331c; }
html[data-theme="forest_canopy"] .sort-rail-item-date { background: rgba(29,111,165,.06); border-color: rgba(29,111,165,.15); }
html[data-theme="forest_canopy"] .sort-rail-item-date > .material-symbols-rounded { color: #1d6fa5; }
html[data-theme="forest_canopy"] .mgr-hero { background: linear-gradient(135deg, rgba(46,158,82,.1) 0%, rgba(46,158,82,.02) 100%); border-color: rgba(46,158,82,.2); }
html[data-theme="forest_canopy"] .appr-action-row { background: rgba(20,60,30,.04); }
html[data-theme="forest_canopy"] .appr-btn-sec { background: rgba(20,60,30,.05); border-color: rgba(20,60,30,.12); }
html[data-theme="forest_canopy"] .sort-form select, html[data-theme="forest_canopy"] .sort-form input { background: rgba(255,255,255,.6); border-color: rgba(20,60,30,.14); }
html[data-theme="forest_canopy"] .sort-queue-card { background: rgba(255,255,255,.5); border-color: rgba(20,60,30,.1); }
html[data-theme="forest_canopy"] .mgr-rail-body::-webkit-scrollbar-thumb, html[data-theme="forest_canopy"] .sort-rail-body::-webkit-scrollbar-thumb,
html[data-theme="forest_canopy"] .mgr-detail::-webkit-scrollbar-thumb, html[data-theme="forest_canopy"] .sort-detail::-webkit-scrollbar-thumb { background: rgba(20,60,30,.14); }
html[data-theme="forest_canopy"] .mgr-rail-item:hover, html[data-theme="forest_canopy"] .sort-rail-item:hover { background: rgba(20,60,30,.05); }
html[data-theme="forest_canopy"] .mgr-rail-item.active, html[data-theme="forest_canopy"] .sort-rail-item.active { background: rgba(46,158,82,.1); border-color: rgba(46,158,82,.28); }

/* ============================================================
   FOREST CANOPY · component separation pass
   Compact the customer stage summary and give planner/modal
   controls their own visual boundaries.  This is presentation-only;
   no data, workflow, or API behaviour is changed.
   ============================================================ */
html[data-theme="forest_canopy"] {
  --fc-deep: #12331c;
  --fc-green: #2e9e52;
  --fc-green-dark: #1f7a3d;
  --fc-muted: #55705c;
  --fc-line: rgba(20,60,30,.18);
  --fc-line-strong: rgba(46,158,82,.36);
  --fc-surface: rgba(255,255,255,.9);
  --fc-surface-soft: #f5fbf6;
  --fc-shadow: 0 8px 22px rgba(20,80,40,.09);
}

/* Removed: an earlier "compact stage card" pass here set a half-dark,
   half-light split gradient on .ch-hero plus dark .ch-orbit/.ch-hero-strip
   colours, conflicting with the fully-light Overview hero further down
   this file. That's the only version kept now. */
/* Customer portal: compact stage card with the same green language as the page. */
html[data-theme="forest_canopy"] #view-customer .ch-hero {
  /* Keep this legacy sizing pass from overriding the final bright hero theme. */
  background: linear-gradient(135deg, #12331c 0%, #1d4a2b 64%, #e8f4e8 64%, #f8fcf8 100%);
  border-color: rgba(20,60,30,.25) !important;
  border-radius: 16px !important;
  padding: 22px 24px 0 !important;
  gap: 16px;
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-main { padding-bottom: 20px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-title { font-size: 26px; line-height: 1.16; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-side {
  max-width: 250px;
  gap: 10px;
  padding: 0 0 20px;
}
html[data-theme="forest_canopy"] #view-customer .ch-stage-card {
  width: min(250px, 100%);
  background: #edf8ef !important;
  border: 1px solid #a5dfb4 !important;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(20,80,40,.12);
}
html[data-theme="forest_canopy"] #view-customer .ch-stage-card span { color: var(--fc-muted); margin-bottom: 3px; }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card strong { color: var(--fc-deep); font-size: 15px; }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card small { color: var(--fc-muted); }
html[data-theme="forest_canopy"] #view-customer .ch-orbit {
  width: 92px;
  height: 92px;
  background: radial-gradient(circle, #12331c 0 57%, transparent 58%), conic-gradient(#5bd58a 0 72%, rgba(255,255,255,.3) 72% 100%);
  border-color: rgba(255,255,255,.3);
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip { margin: 0 -24px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article {
  background: rgba(7,30,15,.26);
  border-color: rgba(255,255,255,.2);
  padding: 12px 16px;
}

/* Driver Flow planner: every group is a card, every action has a clear role. */
html[data-theme="forest_canopy"] .weekly-planner {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--fc-line) !important;
  box-shadow: var(--fc-shadow);
  padding: 16px;
}
html[data-theme="forest_canopy"] .weekly-planner .panel-title { gap: 12px; margin-bottom: 10px; }
html[data-theme="forest_canopy"] .weekly-planner .panel-title h2 { font-size: 20px; }
html[data-theme="forest_canopy"] .planner-head-actions { gap: 8px; }
html[data-theme="forest_canopy"] .planner-head-actions button {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--fc-line-strong);
  box-shadow: 0 1px 2px rgba(20,80,40,.08);
}
html[data-theme="forest_canopy"] .planner-head-actions button:not(.secondary):not(.soft-danger) {
  background: var(--fc-green);
  color: #fff;
  border-color: #267f42;
}
html[data-theme="forest_canopy"] .trip-calendar-toolbar { gap: 8px; margin-top: 10px; }
html[data-theme="forest_canopy"] .trip-calendar-toolbar label { color: var(--fc-muted); }
html[data-theme="forest_canopy"] .trip-calendar-toolbar input,
html[data-theme="forest_canopy"] .weekly-plan-form input,
html[data-theme="forest_canopy"] .weekly-plan-form select,
html[data-theme="forest_canopy"] .weekly-plan-form textarea,
html[data-theme="forest_canopy"] .driver-assign-controls select,
html[data-theme="forest_canopy"] .route-modal-actions select,
html[data-theme="forest_canopy"] .route-time-edit select {
  background: #fff !important;
  border: 1px solid rgba(20,60,30,.22) !important;
  box-shadow: inset 0 1px 2px rgba(20,80,40,.06);
}
html[data-theme="forest_canopy"] .trip-calendar-selected {
  background: #edf8ef;
  border-color: #a5dfb4;
}
html[data-theme="forest_canopy"] .weekly-plan-form {
  background: #f8fcf8;
  border: 1px solid var(--fc-line);
  box-shadow: 0 4px 12px rgba(20,80,40,.07);
  padding: 10px;
  gap: 8px;
}
html[data-theme="forest_canopy"] .weekly-plan-form button,
html[data-theme="forest_canopy"] .planner-suggestion-card button,
html[data-theme="forest_canopy"] .planner-day-actions-main button,
html[data-theme="forest_canopy"] .driver-assign-controls button,
html[data-theme="forest_canopy"] .route-row-actions button {
  border: 1px solid rgba(31,122,61,.35);
  box-shadow: 0 1px 2px rgba(20,80,40,.1);
}
html[data-theme="forest_canopy"] .trip-calendar-weekdays {
  border-color: var(--fc-line);
  background: #edf6ee;
}
html[data-theme="forest_canopy"] .trip-calendar-weekdays span {
  border-color: rgba(20,60,30,.12);
  color: var(--fc-muted);
}
html[data-theme="forest_canopy"] .trip-calendar-legend { color: var(--fc-muted); }
html[data-theme="forest_canopy"] .trip-calendar-legend i { box-shadow: 0 0 0 1px rgba(20,60,30,.18); }
html[data-theme="forest_canopy"] .trip-calendar-grid { border-color: var(--fc-line); }
html[data-theme="forest_canopy"] .trip-day {
  min-height: 128px;
  padding: 8px;
  background: #fff;
  border-right-color: rgba(20,60,30,.16);
  border-bottom-color: rgba(20,60,30,.16);
}
html[data-theme="forest_canopy"] .trip-day.has-trip:not(.amber):not(.red):not(.locked):not(.completed) {
  background: #edf8ef;
  box-shadow: inset 0 4px 0 #3da85a;
}
html[data-theme="forest_canopy"] .trip-day.no-trip {
  background: #fff;
  box-shadow: inset 0 3px 0 #c7d2c9;
}
html[data-theme="forest_canopy"] .trip-day:hover { background: #f1faf2; }
html[data-theme="forest_canopy"] .trip-day.selected {
  outline: 2px solid var(--fc-green);
  outline-offset: -2px;
  background: #edf8ef;
}
html[data-theme="forest_canopy"] .trip-day-route-summary {
  background: #f4faf4;
  border-color: var(--fc-line);
}
html[data-theme="forest_canopy"] .trip-day.has-trip:not(.locked) .trip-day-route-summary {
  background: #eaf7ed;
  border-color: #9bd8aa;
}
html[data-theme="forest_canopy"] .trip-day.no-trip .trip-day-route-summary {
  background: #fafcf9;
  border-color: #d6e2d8;
}
html[data-theme="forest_canopy"] .trip-day-add {
  border-color: rgba(20,60,30,.2);
  color: var(--fc-muted);
  background: #fff;
}
html[data-theme="forest_canopy"] .trip-day-detail {
  border-color: var(--fc-line-strong);
  color: var(--fc-green-dark);
  background: #eef8f0;
}
html[data-theme="forest_canopy"] .planner-assist-grid { gap: 10px; margin-top: 10px; }
html[data-theme="forest_canopy"] .planner-day-command,
html[data-theme="forest_canopy"] .planner-suggestions,
html[data-theme="forest_canopy"] .driver-assign-panel {
  background: #fff;
  border: 1px solid var(--fc-line);
  box-shadow: 0 4px 14px rgba(20,80,40,.08);
  padding: 12px;
}
html[data-theme="forest_canopy"] .planner-day-command { border-left: 3px solid var(--fc-green); }
html[data-theme="forest_canopy"] .planner-day-metrics span,
html[data-theme="forest_canopy"] .planner-suggestion-card,
html[data-theme="forest_canopy"] .driver-assign-list label {
  background: var(--fc-surface-soft);
  border-color: rgba(20,60,30,.16);
}
html[data-theme="forest_canopy"] .planner-day-actions-main button,
html[data-theme="forest_canopy"] .planner-suggestion-card button {
  background: var(--fc-green);
  color: #fff;
  border-color: #267f42;
}
html[data-theme="forest_canopy"] .planner-day-actions-main button:disabled {
  background: #e7efe8;
  color: #78917d;
  border-color: #d1dfd3;
}

/* Route modal: compact, centred, and visibly segmented like the reference UI. */
html[data-theme="forest_canopy"] .route-modal-backdrop { background: rgba(18,51,28,.32); }
html[data-theme="forest_canopy"] .route-modal-card {
  width: min(860px, calc(100vw - 40px));
  max-height: calc(100vh - 64px);
  padding: 18px;
  border: 1px solid rgba(20,60,30,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 22px 70px rgba(20,60,30,.22);
}
html[data-theme="forest_canopy"] .route-modal-head {
  border-bottom-color: rgba(20,60,30,.12);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
html[data-theme="forest_canopy"] .route-modal-head button {
  min-width: 84px;
  padding: 8px 14px;
  background: var(--fc-green);
  color: #fff;
  border: 1px solid #267f42;
}
html[data-theme="forest_canopy"] .route-modal-summary { gap: 8px; margin-bottom: 10px; }
html[data-theme="forest_canopy"] .route-modal-summary span {
  background: #f6fbf6;
  border-color: rgba(20,60,30,.16);
  padding: 9px;
}
html[data-theme="forest_canopy"] .route-lock-strip {
  border-color: rgba(183,121,31,.35);
  background: #fff8e9;
  padding: 10px;
  margin-bottom: 10px;
}
html[data-theme="forest_canopy"] .route-lock-strip button,
html[data-theme="forest_canopy"] .route-modal-actions button,
html[data-theme="forest_canopy"] .route-row button {
  background: var(--fc-green);
  color: #fff;
  border: 1px solid #267f42;
}
html[data-theme="forest_canopy"] .route-lock-strip button.soft-danger {
  background: #fff;
  color: #8b5a17;
  border-color: rgba(183,121,31,.35);
}
html[data-theme="forest_canopy"] .route-modal-actions { gap: 8px; margin-bottom: 10px; }
html[data-theme="forest_canopy"] .route-chain {
  min-height: 58px;
  padding: 10px;
  margin-bottom: 10px;
  background: #edf8ef;
  border-color: #a5dfb4;
}
html[data-theme="forest_canopy"] .route-node {
  background: #fff;
  border-color: var(--fc-line);
  color: var(--fc-deep);
  padding: 7px 10px;
}
html[data-theme="forest_canopy"] .route-node.locked {
  background: #fff8e9;
  border-color: rgba(183,121,31,.35);
  color: #8b5a17;
}
html[data-theme="forest_canopy"] .route-row {
  background: #fff;
  border-color: rgba(20,60,30,.16);
  border-radius: 12px;
  padding: 9px;
}
html[data-theme="forest_canopy"] .route-row:hover { background: #f3fbf4; border-color: var(--fc-line-strong); }
html[data-theme="forest_canopy"] .route-row.locked { background: #fff8e9; border-color: rgba(183,121,31,.35); }
html[data-theme="forest_canopy"] .route-row > strong { background: #e0f3e4; color: var(--fc-green-dark); }
html[data-theme="forest_canopy"] .route-row.locked > strong { background: #f5e8c8; color: #8b5a17; }
html[data-theme="forest_canopy"] .route-row button.soft-danger {
  background: #fff;
  color: #a13e2d;
  border-color: rgba(192,57,43,.28);
}

/* Removed: an earlier "correction pass" here forced the Overview hero
   (.ch-hero, .ch-stage-card, .ch-orbit, .ch-hero-strip) back to dark
   colours with !important, fighting the light redesign and winning the
   cascade. This user wants the whole hero card bright — see the .ch-hero
   rules further down this file, which are now the only ones left. */
/* Legacy sizing pass: keep the original portal layout.  Colour surfaces are
   resolved by the final Forest Canopy block below, so they must not use
   !important here and block the light theme. */
html[data-theme="forest_canopy"] #view-customer .ch-hero {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(61,214,140,.24), transparent 55%),
    radial-gradient(ellipse at 95% 110%, rgba(61,214,140,.10), transparent 50%),
    #10141b;
  border: 1px solid rgba(61,214,140,.16);
  border-radius: 20px !important;
  padding: 30px 32px 0 !important;
  gap: 20px;
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-main { padding-bottom: 26px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-title { font-size: 30px; line-height: 1.22; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-side {
  max-width: none;
  gap: 14px;
  padding: 0 0 26px;
}
html[data-theme="forest_canopy"] #view-customer .ch-stage-card {
  width: min(100%, 260px);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: none;
}
html[data-theme="forest_canopy"] #view-customer .ch-stage-card span,
html[data-theme="forest_canopy"] #view-customer .ch-stage-card small { color: #7d8694; }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card strong { color: #fff; font-size: 16px; }
html[data-theme="forest_canopy"] #view-customer .ch-orbit {
  width: 108px;
  height: 108px;
  background: radial-gradient(circle at center, #10141b 0 58%, transparent 59%), conic-gradient(#3dd68c 0 calc(var(--pct,75)*1%), rgba(255,255,255,.08) 0 100%);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip { margin: 0 -32px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article {
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.06);
  padding: 15px 22px;
}

/* Coverage board: separate each list and customer card without changing its layout. */
html[data-theme="forest_canopy"] .planner-coverage-board { gap: 14px; }
html[data-theme="forest_canopy"] .planner-coverage-board > section {
  background: #fff;
  border: 1px solid var(--fc-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(20,80,40,.07);
  padding: 12px;
}
html[data-theme="forest_canopy"] .planner-coverage-card {
  background: #f8fcf8;
  border: 1px solid rgba(20,60,30,.18);
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(20,80,40,.05);
}
html[data-theme="forest_canopy"] .planner-coverage-card:hover {
  background: #f1faf2;
  border-color: var(--fc-line-strong);
}

/* Forest Canopy contrast and component-boundary pass.
   Keep each control/card visibly separate on the light theme. */
html[data-theme="forest_canopy"] .report-builder article,
html[data-theme="forest_canopy"] .rpt-chart-card,
html[data-theme="forest_canopy"] .rpt-table-card {
  border: 1px solid rgba(20,60,30,.22) !important;
  box-shadow: 0 5px 16px rgba(20,80,40,.07);
}
html[data-theme="forest_canopy"] .report-builder article button,
html[data-theme="forest_canopy"] .rpt-page button {
  min-height: 36px;
  border: 1px solid #2e9e52 !important;
  border-radius: 9px;
  background: #fff !important;
  color: #1f7a3d !important;
  box-shadow: 0 2px 5px rgba(20,80,40,.08);
}
html[data-theme="forest_canopy"] .report-builder article button:hover,
html[data-theme="forest_canopy"] .rpt-page button:hover:not(:disabled) {
  background: #e8f6eb !important;
  border-color: #237e41 !important;
  color: #155b2c !important;
}
html[data-theme="forest_canopy"] .report-builder article button:disabled,
html[data-theme="forest_canopy"] .rpt-page button:disabled {
  border-color: rgba(20,60,30,.14) !important;
  background: #f3f8f3 !important;
  color: #78917d !important;
  box-shadow: none;
}

/* Strong table frame and row separators for Box Inventory and Customer Structure. */
html[data-theme="forest_canopy"] #view-boxes .table-wrap,
html[data-theme="forest_canopy"] #view-accounts .account-list-table,
html[data-theme="forest_canopy"] #view-accounts .account-structure-table,
html[data-theme="forest_canopy"] #drawerBody .data-grid,
html[data-theme="forest_canopy"] #drawerBody .table-wrap {
  border: 1px solid rgba(20,60,30,.24) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(20,80,40,.07), inset 0 0 0 1px rgba(255,255,255,.58);
}
html[data-theme="forest_canopy"] #view-boxes .table-wrap table,
html[data-theme="forest_canopy"] #view-accounts .account-list-table table,
html[data-theme="forest_canopy"] #view-accounts .account-structure-table table,
html[data-theme="forest_canopy"] #drawerBody .data-grid table,
html[data-theme="forest_canopy"] #drawerBody .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}
html[data-theme="forest_canopy"] #view-boxes .table-wrap th,
html[data-theme="forest_canopy"] #view-accounts .account-list-table th,
html[data-theme="forest_canopy"] #view-accounts .account-structure-table th,
html[data-theme="forest_canopy"] #drawerBody .data-grid th,
html[data-theme="forest_canopy"] #drawerBody .table-wrap th {
  background: #eaf6ec !important;
  color: #3f654a !important;
  border-bottom: 1px solid rgba(20,60,30,.22) !important;
}
html[data-theme="forest_canopy"] #view-boxes .table-wrap td,
html[data-theme="forest_canopy"] #view-accounts .account-list-table td,
html[data-theme="forest_canopy"] #view-accounts .account-structure-table td,
html[data-theme="forest_canopy"] #drawerBody .data-grid td,
html[data-theme="forest_canopy"] #drawerBody .table-wrap td {
  border-bottom: 1px solid rgba(20,60,30,.12) !important;
}
html[data-theme="forest_canopy"] #view-boxes .table-wrap tbody tr:hover td,
html[data-theme="forest_canopy"] #view-accounts .account-list-table tbody tr:hover td,
html[data-theme="forest_canopy"] #view-accounts .account-structure-table tbody tr:hover td,
html[data-theme="forest_canopy"] #drawerBody .data-grid tbody tr:hover td,
html[data-theme="forest_canopy"] #drawerBody .table-wrap tbody tr:hover td {
  background: #f1faf2 !important;
}

/* Account detail and CUSTOMER STRUCTURE cards should read as separate records. */
html[data-theme="forest_canopy"] .center-modal {
  border: 1px solid rgba(20,60,30,.24) !important;
  box-shadow: 0 24px 70px rgba(20,60,30,.2);
}
html[data-theme="forest_canopy"] .center-modal-head {
  background: #f3faf4 !important;
  border-bottom: 1px solid rgba(20,60,30,.18) !important;
}
html[data-theme="forest_canopy"] .center-modal .account-detail-metrics article,
html[data-theme="forest_canopy"] .center-modal .account-detail-section > div,
html[data-theme="forest_canopy"] .center-modal .account-structure-callout,
html[data-theme="forest_canopy"] .center-modal .account-structure-card {
  border: 1px solid rgba(20,60,30,.18) !important;
  background: #f8fcf8 !important;
  box-shadow: 0 2px 8px rgba(20,80,40,.05);
}
html[data-theme="forest_canopy"] .center-modal .account-detail-actions,
html[data-theme="forest_canopy"] .center-modal .account-structure-section {
  border-top-color: rgba(20,60,30,.16) !important;
}
/* Account identity actions stay scannable: grouped controls prevent a wall of
   equal green buttons and keep the destructive action visually separated. */
.account-v2-modal .account-detail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 14px;
}
.account-v2-modal .account-detail-action-group {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dce9df;
  border-radius: 10px;
  background: #f7fbf7;
}
.account-v2-modal .account-detail-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.account-v2-modal .account-detail-action-buttons button {
  min-height: 38px;
  flex: 1 1 180px;
  white-space: normal;
}
.account-v2-modal .account-detail-danger-zone {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #efc8c2;
  border-radius: 10px;
  background: #fff7f5;
}
.account-v2-modal .account-detail-danger-zone button {
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}
.account-v2-modal .account-detail-actions button.primary {
  border-color: #267b40 !important;
  background: #2e9e52 !important;
  color: #fff !important;
}
.account-v2-modal .account-detail-actions button.secondary {
  border-color: #b8d4bd !important;
  background: #fff !important;
  color: #205d35 !important;
}
.account-v2-modal .account-detail-actions button.danger {
  border-color: #c53d30 !important;
  background: #c74334 !important;
  color: #fff !important;
}
@media (max-width: 560px) {
  .account-identity-editor-head,
  .account-v2-modal .account-detail-danger-zone { align-items: stretch; flex-direction: column; }
  .account-identity-editor-grid { grid-template-columns: 1fr; }
  .account-v2-modal .account-detail-action-buttons button,
  .account-v2-modal .account-detail-danger-zone button { width: 100%; }
}


.do-date-picker, .do-time-picker { display: grid; gap: 7px; }
.do-date-picker label, .do-time-picker label { color: #476752; font-size: 11px; font-weight: 850; }
.do-quick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.do-create-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.do-create-actions .route-note { flex: 1; min-width: 230px; color: #6a806f; font-size: 11px; }
.do-create-actions > button[type='submit'] { min-width: 210px; }
.compact-btn { min-height: 32px; padding: 0 10px; border-radius: 8px; }
.collection-notification-intro { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #c8e1cf; border-radius: 10px; background: #eef9f0; color: #3b6749; }
.collection-notification-intro .material-symbols-rounded { color: #2d9850; }
.collection-notification-intro p { margin: 0; font-size: 12px; line-height: 1.45; }
.collection-notification-drawer .notification-table small { display: block; margin-top: 3px; color: #708476; font-size: 10px; }
.collection-notification-drawer .notification-error { max-width: 230px; color: #a44337 !important; line-height: 1.35; }
html[data-theme="forest_canopy"] .center-modal .account-structure-actions button,
html[data-theme="forest_canopy"] .center-modal .account-detail-actions button {
  border: 1px solid #2e9e52 !important;
  box-shadow: 0 2px 5px rgba(20,80,40,.08);
}

/* ESG support forms: primary actions must read as buttons, not inline text. */
.esg-support-modal-content .esg-form-submit {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid #237f45 !important;
  border-radius: 10px;
  background: #2e9e52 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 0 rgba(20, 60, 30, .12), 0 6px 14px rgba(20, 80, 40, .12);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.esg-support-modal-content .esg-form-submit:hover {
  transform: translateY(-1px);
  border-color: #176b39 !important;
  background: #237f45 !important;
  box-shadow: 0 3px 0 rgba(20, 60, 30, .14), 0 8px 18px rgba(20, 80, 40, .16);
}
.esg-support-modal-content .esg-form-submit:focus-visible {
  outline: 3px solid rgba(46, 158, 82, .28);
  outline-offset: 2px;
}
.esg-support-modal-content .esg-form-submit:active { transform: translateY(0); }
.esg-support-modal-content .esg-form-submit:disabled {
  transform: none;
  border-color: rgba(20, 60, 30, .18) !important;
  background: #a9cdb3 !important;
  box-shadow: none;
}

/* Rank badges in the light Forest Canopy drawer need dark readable text. */
html[data-theme="forest_canopy"] #drawerBody .rank-pill,
html[data-theme="forest_canopy"] #drawerBody .rank-pill-plain { color: #21452b !important; text-shadow: none; }
html[data-theme="forest_canopy"] #drawerBody .rank-pill-champion { background:#e8f6d9 !important; border-color:#9fcd76 !important; color:#35651c !important; }
html[data-theme="forest_canopy"] #drawerBody .rank-pill-river { background:#def3f4 !important; border-color:#8bcac7 !important; color:#16645f !important; }
html[data-theme="forest_canopy"] #drawerBody .rank-pill-earth { background:#fff1d7 !important; border-color:#d8b76e !important; color:#7b5411 !important; }
html[data-theme="forest_canopy"] #drawerBody .rank-pill-grove { background:#e2f4e6 !important; border-color:#9fd5ad !important; color:#2d6f3d !important; }

/* Driver mobile operations: keep the three summary metrics readable on narrow phones. */
body[data-role="driver"] .driver-route-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-role="driver"] .driver-route-summary span { min-width: 0; overflow-wrap: anywhere; white-space: normal; line-height: 1.25; }
body[data-role="driver"] .driver-photo-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body[data-role="driver"] .driver-camera-btn { min-height: 44px; padding: 0 12px; border: 1px solid rgba(61,214,140,.55); border-radius: 12px; background: rgba(61,214,140,.12); color: #a4f0c9; font-weight: 800; }
body[data-role="driver"] .driver-photo-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; }
body[data-role="driver"] .driver-photo-actions .driver-primary-btn,
body[data-role="driver"] .driver-photo-actions .driver-gallery-btn { min-height: 44px; padding: 10px 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; line-height: 1.2; }
body[data-role="driver"] .driver-photo-actions .driver-primary-btn { border: 1px solid #3dd68c; background: #55d482; color: #07120d; font-weight: 900; }
body[data-role="driver"] .driver-photo-actions .driver-gallery-btn { border: 1px solid rgba(61,214,140,.55); background: rgba(61,214,140,.12); color: #a4f0c9; font-weight: 800; cursor: pointer; }
body[data-role="driver"] .driver-photo-actions .driver-primary-btn { cursor: pointer; }
body[data-role="driver"] .driver-photo-actions .material-symbols-rounded { font-size: 17px; }
body[data-role="driver"] .driver-route-photo input[type=file], body[data-role="driver"] .driver-pulse-file { display: none; }
.driver-aspen-orders { display: grid; gap: 6px; margin-top: 5px; }
.driver-aspen-order { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(61,214,140,.24); border-radius: 10px; background: rgba(255,255,255,.04); cursor: pointer; }
.driver-aspen-order input { accent-color: #3dd68c; }
.driver-aspen-order span { display: grid; gap: 2px; min-width: 0; }
.driver-aspen-order strong { font-size: 11px; color: #f8fafc; }
.driver-aspen-order small { color: #a9bab2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-aspen-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.driver-aspen-actions button { min-height: 42px; margin-top: 4px; border: 1px solid rgba(61,214,140,.42); border-radius: 10px; background: #3dd68c; color: #08130d; font-size: 10.5px; font-weight: 900; }
.driver-aspen-actions .driver-history-reset { background: rgba(61,214,140,.12); color: #a4f0c9; }
.driver-history-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.driver-history-filter label { display: grid; gap: 4px; color: #91a69b; font-size: 10px; font-weight: 800; }
.driver-history-filter input { width: 100%; box-sizing: border-box; padding: 9px; }
.driver-history-filter button { min-height: 40px; }
.driver-history-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.driver-history-stats div { display: grid; gap: 2px; padding: 10px 8px; border: 1px solid rgba(61,214,140,.22); border-radius: 10px; background: rgba(61,214,140,.06); text-align: center; }
.driver-gps-link { display: inline-flex; text-decoration: none; }
.driver-gps-link + small { display: block; margin-top: 3px; color: #718477; font-size: 10px; }

/* Driver navigation and handover sheet: keep each destination distinct and usable on phones. */
body[data-role="driver"] .driver-route-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
body[data-role="driver"] .driver-route-nav button {
  min-width: 0;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
  font-size: 9px;
}
body[data-role="driver"] .driver-route-nav button .material-symbols-rounded {
  display: block;
  flex: 0 0 auto;
  font-size: 15px;
}
body[data-role="driver"] .driver-sheet {
  border-radius: 0;
}
body[data-role="driver"] .driver-sheet-body {
  padding: 16px 14px 20px;
}
body[data-role="driver"] .driver-sheet-body > .driver-aspen-return {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
}
body[data-role="driver"] .driver-sheet-body .driver-aspen-order {
  justify-content: flex-start;
  text-align: left;
}
body[data-role="driver"] .driver-sheet-body .driver-aspen-order span {
  flex: 1 1 auto;
  text-align: left;
}
.driver-history-stats strong { color: #3dd68c; font-size: 17px; }
.driver-history-stats span { color: #91a69b; font-size: 9px; }
.driver-history-days { display: grid; gap: 6px; }
.driver-history-day { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: #cbd5e1; font-size: 11px; }
.driver-history-day strong { color: #f8fafc; }

/* ============================================================
   CUSTOMER PORTAL — BRIGHT ESG IMPACT REDESIGN — 2026-07-31
   Scope: html[data-theme="forest_canopy"] #view-customer ONLY.
   This theme is opt-in via the existing theme picker; the default
   "carbon_dark" experience (bare :root, no data-theme attribute) is
   completely untouched by any rule below. Presentation-only: no
   markup, ids, onclick handlers or app logic were changed.
   ============================================================ */

html[data-theme="forest_canopy"] #view-customer {
  --lime: #5fbf3f;
  --sky: #1f8fbf;
  --gold: #d9971f;
}

/* gradient hero headline accent, used wherever markup already wraps a word in <em> */
html[data-theme="forest_canopy"] #view-customer .ch-hero-title em,
html[data-theme="forest_canopy"] #view-customer .mp-hero-left h2 em,
html[data-theme="forest_canopy"] #view-customer .mp-command-hero h2 em,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero h2 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--lime), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* portal home launcher (first screen after login) — keep the Forest Canopy canvas light */
html[data-theme="forest_canopy"] #view-customer .portal-home {
  background:
    radial-gradient(circle at 50% 42%, rgba(95,191,63,.10), transparent 46%),
    radial-gradient(ellipse at 15% 70%, rgba(31,143,207,.08), transparent 50%),
    var(--bg);
  color: var(--ink);
}
html[data-theme="forest_canopy"] #view-customer .portal-home-atmosphere {
  background: radial-gradient(circle at 50% 48%, rgba(95,191,63,.12), transparent 22%), radial-gradient(ellipse at 18% 62%, rgba(31,143,207,.08), transparent 38%), radial-gradient(ellipse at 84% 42%, rgba(185,138,46,.06), transparent 38%), var(--bg);
  background-size: 140% 140%;
}
html[data-theme="forest_canopy"] #view-customer .portal-home-atmosphere::after {
  background-image: radial-gradient(circle, rgba(31,143,77,.28) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(31,143,207,.2) 0 1px, transparent 1.5px);
  opacity: .4;
}
html[data-theme="forest_canopy"] #view-customer .portal-home-brand span { color: var(--ink); text-shadow: none; font-family: Georgia, "Times New Roman", serif; }
html[data-theme="forest_canopy"] #view-customer .portal-home-brand em { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .portal-home-logo-wrap { background: radial-gradient(circle, rgba(95,191,63,.16), rgba(255,255,255,0) 54%, transparent 70%); box-shadow: 0 0 0 1px rgba(31,143,77,.16), 0 0 60px rgba(95,191,63,.16); }
html[data-theme="forest_canopy"] #view-customer .portal-home-mark .mark-accent { stroke: var(--lime); }
html[data-theme="forest_canopy"] #view-customer .portal-home-core p { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .portal-home-core > small { color: var(--green); }
html[data-theme="forest_canopy"] #view-customer .portal-home-module {
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.7);
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
html[data-theme="forest_canopy"] #view-customer .portal-home-module:hover { border-color: rgba(31,143,77,.55); background: rgba(255,255,255,.9); }
html[data-theme="forest_canopy"] #view-customer .portal-home-module i { border: 1px solid rgba(31,143,77,.4); color: var(--green); }
html[data-theme="forest_canopy"] #view-customer .portal-home-module small { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .portal-home-orbit { border-color: rgba(31,143,77,.16); }
html[data-theme="forest_canopy"] #view-customer .portal-home-orbit-b { border-color: rgba(31,143,207,.16); }
html[data-theme="forest_canopy"] #view-customer .portal-home-bridge { border-color: rgba(31,143,77,.16); box-shadow: 0 0 40px rgba(31,143,77,.06), inset 0 0 32px rgba(31,143,77,.03); }
html[data-theme="forest_canopy"] #view-customer .portal-home-forest { opacity: .42; }
html[data-theme="forest_canopy"] #view-customer .portal-home-forest::before { background: linear-gradient(180deg, rgba(244, 250, 243, .9) 0%, rgba(244, 250, 243, .12) 38%, rgba(244, 250, 243, .42) 100%), radial-gradient(ellipse at 50% 46%, transparent 34%, rgba(244, 250, 243, .42) 100%); }
html[data-theme="forest_canopy"] #view-customer .portal-home-forest img { mix-blend-mode: normal; filter: saturate(.96) contrast(1.04) brightness(1.02) drop-shadow(0 34px 44px rgba(31, 83, 52, .18)); }
html[data-theme="forest_canopy"] #view-customer .portal-home-footer { color: var(--muted); position: relative; z-index: 3; padding: 6px 12px; border-radius: 999px; background: rgba(244, 250, 243, .72); box-shadow: 0 8px 24px rgba(31, 83, 52, .06); }
.profile-ledger-intro-actions { display: flex; align-items: center; gap: 10px; }
.profile-ledger-intro-actions .portal-notification-bell { width: 34px; height: 34px; }

/* overview impact hero (clientHomePanel) — headline card + chips + stage ring */
html[data-theme="forest_canopy"] #view-customer .ch-hero {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(95,191,63,.14), transparent 55%),
    radial-gradient(ellipse at 95% 110%, rgba(31,143,207,.08), transparent 50%),
    var(--panel);
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-title { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-eyebrow { color: var(--sky); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-sub { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .ch-chip { background: color-mix(in srgb, var(--green) 10%, #fff); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); color: color-mix(in srgb, var(--green) 82%, black); }
html[data-theme="forest_canopy"] #view-customer .ch-chip-click:hover { background: color-mix(in srgb, var(--green) 18%, #fff); }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card { background: var(--panel2); border: 1px solid var(--line); }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card span { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card strong { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card small { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .ch-orbit { background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(var(--lime) 0 calc(var(--pct,75)*1%), var(--line) 0 100%); border: 1px solid var(--line); }
html[data-theme="forest_canopy"] #view-customer .ch-orbit span { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .ch-orbit small { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip { border-top-color: var(--line); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article { background: var(--panel2); border-right-color: var(--line); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip span { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip strong { color: var(--ink); }

/* ESG Submission — readiness band, disclosure checks, support launcher */
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card { background: var(--panel2); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-meter { background: var(--line); }
html[data-theme="forest_canopy"] #view-customer .esg-check-item { background: var(--panel2); }
html[data-theme="forest_canopy"] #view-customer .esg-support-action { --support-accent: #1f8f4d; }
html[data-theme="forest_canopy"] #view-customer .esg-support-action.evidence { --support-accent: #1f8fbf; }
html[data-theme="forest_canopy"] #view-customer .esg-support-action.note { --support-accent: #b98a2e; }

/* Waste Performance story strip — was a dark hardcoded panel */
html[data-theme="forest_canopy"] #view-customer .wp-story { background: var(--panel2) !important; border: 1px solid var(--line) !important; }
html[data-theme="forest_canopy"] #view-customer .wp-story-eyebrow { color: var(--sky); }
html[data-theme="forest_canopy"] #view-customer .wp-story-hero { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .wp-story-sub { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .wp-story-divider { background: var(--line); }
html[data-theme="forest_canopy"] #view-customer .wp-story-trend-label, html[data-theme="forest_canopy"] #view-customer .wp-story-comp-label, html[data-theme="forest_canopy"] #view-customer .wp-story-comp-note { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .wp-story-trend-num { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .wp-story-trend-num span { color: var(--muted); }

/* KPI / metric cards across every customer view — a small gradient accent bar
   gives every stat card the same "picto-bar" identity used across the portal */
html[data-theme="forest_canopy"] #view-customer .client-metrics article,
html[data-theme="forest_canopy"] #view-customer .esg-report-kpis article,
html[data-theme="forest_canopy"] #view-customer .wp-kpis article,
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card {
  position: relative;
  overflow: hidden;
}
html[data-theme="forest_canopy"] #view-customer .client-metrics article::before,
html[data-theme="forest_canopy"] #view-customer .esg-report-kpis article::before,
html[data-theme="forest_canopy"] #view-customer .wp-kpis article::before,
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lime), var(--sky));
}
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-progress::before { background: linear-gradient(90deg, var(--gold), var(--lime)); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-attention::before { background: linear-gradient(90deg, var(--red), var(--gold)); }

/* Light tinted-card treatment for the submission readiness card — status
   reads through a soft tint + colored top bar, not a saturated fill block. */
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-ready {
  background: color-mix(in srgb, var(--lime) 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--lime) 34%, var(--line)) !important;
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-ready strong { color: color-mix(in srgb, var(--lime) 65%, var(--ink)); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-ready p { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-ready .esg-readiness-meter { background: color-mix(in srgb, var(--lime) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-ready .esg-readiness-meter span { background: var(--lime); }

html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-progress {
  background: color-mix(in srgb, var(--gold) 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line)) !important;
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-progress strong { color: color-mix(in srgb, var(--gold) 70%, var(--ink)); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-progress p { color: var(--muted); }

html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-attention {
  background: color-mix(in srgb, var(--red) 10%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--red) 32%, var(--line)) !important;
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-attention strong { color: color-mix(in srgb, var(--red) 68%, var(--ink)); }
html[data-theme="forest_canopy"] #view-customer .esg-readiness-card.tone-attention p { color: var(--muted); }

/* Disclosure check "Ready / Gap" labels — solid filled stamp pills instead of
   plain coloured text, matching the mockup's badge treatment. */
html[data-theme="forest_canopy"] #view-customer .esg-check-item strong {
  display: inline-block;
  width: fit-content;
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .05em;
  color: #fff !important;
}
html[data-theme="forest_canopy"] #view-customer .esg-check-item.ok strong { background: var(--lime); }
html[data-theme="forest_canopy"] #view-customer .esg-check-item.gap strong { background: var(--gold); }
html[data-theme="forest_canopy"] #view-customer .esg-check-item.info strong { background: none; font-size: 20px; letter-spacing: 0; padding: 0; border-radius: 0; color: var(--sky) !important; }

/* ============================================================
   TYPOGRAPHY + LAYOUT — matches the approved mockup's editorial
   scale, not just its colours. Previous passes only recoloured the
   existing corporate-dashboard skeleton; this changes font sizes,
   filter-control shape, and the disclosure-check card layout.
   ============================================================ */

/* eyebrows read as loud section labels, not small grey captions */
html[data-theme="forest_canopy"] #view-customer .eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

/* ESG Submission hero headline — was plain default <h2> size */
html[data-theme="forest_canopy"] #view-customer .esg-report-hero-copy h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.06;
  margin: 10px 0 10px;
}
html[data-theme="forest_canopy"] #view-customer .esg-report-hero-copy h2 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--lime), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="forest_canopy"] #view-customer .esg-report-hero-copy p { font-size: 14px; max-width: 62ch; }

/* pill-shaped filter controls instead of the app's default rectangular inputs */
html[data-theme="forest_canopy"] #view-customer .filter-bar input,
html[data-theme="forest_canopy"] #view-customer .filter-bar select {
  border-radius: 999px !important;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: #fff !important;
  color: var(--ink) !important;
}

/* Disclosure check cards — badge sits beside the copy, not stacked above it */
html[data-theme="forest_canopy"] #view-customer .esg-check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge title" "badge hint";
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  padding: 16px;
}
html[data-theme="forest_canopy"] #view-customer .esg-check-item strong {
  grid-area: badge;
  align-self: start;
  margin-top: 1px;
}
html[data-theme="forest_canopy"] #view-customer .esg-check-item span { grid-area: title; font-size: 14px; font-weight: 700; color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .esg-check-item small { grid-area: hint; }
html[data-theme="forest_canopy"] #view-customer .esg-check-item.info { grid-template-columns: 1fr; grid-template-areas: none; }
html[data-theme="forest_canopy"] #view-customer .esg-check-item.info strong { grid-area: auto; justify-self: start; }
html[data-theme="forest_canopy"] #view-customer .esg-check-item.info span { grid-area: auto; font-size: 15px; }
html[data-theme="forest_canopy"] #view-customer .esg-check-item.info small { grid-area: auto; }

/* Collections — Live / History tabs and record count chip */
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs { border-color: var(--line); background: var(--panel2); }
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button > span { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button strong { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button small { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button.active {
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 12%, #fff);
  box-shadow: 0 8px 20px rgba(31,143,77,.1);
}
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button.active > span,
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button.active strong { color: var(--green); }
html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button.active small { color: color-mix(in srgb, var(--green) 60%, var(--muted)); }
html[data-theme="forest_canopy"] #view-customer .collection-history-count strong { color: var(--green); }
html[data-theme="forest_canopy"] #view-customer .collection-history-count span { color: var(--muted); }

/* top controls (Back / theme toggle / Profile / Log out) — were dark glass chips */
html[data-theme="forest_canopy"] #view-customer .portal-back-button,
html[data-theme="forest_canopy"] #view-customer .portal-profile-button,
html[data-theme="forest_canopy"] #view-customer .portal-logout-button,
html[data-theme="forest_canopy"] #view-customer .portal-theme-button {
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.7);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
html[data-theme="forest_canopy"] #view-customer .portal-back-button:hover,
html[data-theme="forest_canopy"] #view-customer .portal-profile-button:hover,
html[data-theme="forest_canopy"] #view-customer .portal-logout-button:hover,
html[data-theme="forest_canopy"] #view-customer .portal-theme-button:hover {
  border-color: rgba(31,143,77,.5);
  color: var(--green);
}
html[data-theme="forest_canopy"] #view-customer .portal-profile-button span { background: var(--green); color: #fff; }
html[data-theme="forest_canopy"] #view-customer .portal-logout-button { color: var(--muted); }

/* ============================================================
   IMPACT TICKER — FULL EDITORIAL REBUILD + MOBILE — 2026-08-03
   Applies the bold, colourful, magazine-style language from the
   approved mockup across every customer view: huge gradient
   headlines, solid-colour pill chips, picto-bar KPI cards. Same
   scope as above; CSS + two <em> markup wraps for gradient text
   (same pattern already used on the ESG Submission headline).
   ============================================================ */

html[data-theme="forest_canopy"] #view-customer h2,
html[data-theme="forest_canopy"] #view-customer .panel-title h2 { font-weight: 800; letter-spacing: -.01em; }

/* ---- Overview hero — huge gradient headline, solid pill chips ---- */
html[data-theme="forest_canopy"] #view-customer .ch-hero-title {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin-bottom: 12px;
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; }

/* Pie/donut legend text was forced white for the dark theme everywhere in
   #view-customer (unscoped by theme), which made it unreadable here. */
html[data-theme="forest_canopy"] #view-customer .pie-item { color: var(--ink) !important; }
html[data-theme="forest_canopy"] #view-customer .pie-item small { color: var(--muted) !important; }
html[data-theme="forest_canopy"] #view-customer .pie-item:hover { background: var(--panel2) !important; }
html[data-theme="forest_canopy"] #view-customer .ch-chip { border: none; color: #fff; font-weight: 700; padding: 8px 16px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips .ch-chip:nth-child(1) { background: var(--green); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips .ch-chip:nth-child(2) { background: var(--sky); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips .ch-chip:nth-child(3) { background: var(--lime); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips .ch-chip:nth-child(4) { background: var(--gold); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips .ch-chip:nth-child(5) { background: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips .ch-chip-click:hover { filter: brightness(1.1); transform: translateY(-1px); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip strong { font-size: 21px; font-weight: 800; }

/* KPI numbers stay a consistent bold weight everywhere they appear */
html[data-theme="forest_canopy"] #view-customer .client-metrics strong,
html[data-theme="forest_canopy"] #view-customer .esg-report-kpis strong,
html[data-theme="forest_canopy"] #view-customer .wp-kpis strong,
html[data-theme="forest_canopy"] #view-customer .kbar strong { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Portal home launcher — gradient title, colour-coded modules ---- */
html[data-theme="forest_canopy"] #view-customer .portal-home-core h1 { font-weight: 900; letter-spacing: -.03em; }
html[data-theme="forest_canopy"] #view-customer .portal-home-core h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--lime), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="forest_canopy"] #view-customer .portal-home-menu-left .portal-home-module:nth-child(1) i,
html[data-theme="forest_canopy"] #view-customer .portal-home-menu-right .portal-home-module:nth-child(1) i { background: var(--green); border-color: var(--green); color: #fff; }
html[data-theme="forest_canopy"] #view-customer .portal-home-menu-left .portal-home-module:nth-child(2) i,
html[data-theme="forest_canopy"] #view-customer .portal-home-menu-right .portal-home-module:nth-child(2) i { background: var(--sky); border-color: var(--sky); color: #fff; }
html[data-theme="forest_canopy"] #view-customer .portal-home-menu-left .portal-home-module:nth-child(3) i,
html[data-theme="forest_canopy"] #view-customer .portal-home-menu-right .portal-home-module:nth-child(3) i { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---- Waste Performance — bolder eyebrow/hero to match the rest ---- */
html[data-theme="forest_canopy"] #view-customer .wp-story-hero { font-weight: 900; letter-spacing: -.02em; }
html[data-theme="forest_canopy"] #view-customer .wp-section-head { font-weight: 800; letter-spacing: .1em; }

/* ---- Collections — Live card + tabs read as part of the same system ---- */
html[data-theme="forest_canopy"] #view-customer .client-live-card {
  background: linear-gradient(120deg, #123522 0%, var(--green) 55%, var(--lime) 100%) !important;
  align-items: flex-start !important;
  position: relative;
  overflow: hidden;
  padding-top: 20px !important;
}
html[data-theme="forest_canopy"] #view-customer .client-live-card .eyebrow { color: #fff !important; opacity: .85; }
html[data-theme="forest_canopy"] #view-customer .client-live-card p { color: rgba(255,255,255,.9); }
html[data-theme="forest_canopy"] #view-customer .client-live-card h2 { color: #fff !important; }
html[data-theme="forest_canopy"] #view-customer .client-live-card > div:not(.live-route-wrap),
html[data-theme="forest_canopy"] #view-customer .client-live-card > .live-status-orb { position: relative; z-index: 2; }

/* Animated route line + travelling lorry, riding the same curve.
   Must win over the ".client-live-card > div" rule above (which also
   matches this div) or it loses position:absolute and gets laid out
   as a normal flex item instead of overlaying the whole card. */
html[data-theme="forest_canopy"] #view-customer .client-live-card > .live-route-wrap {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
html[data-theme="forest_canopy"] #view-customer .live-route-svg { display: block; width: 100%; height: 100%; }
html[data-theme="forest_canopy"] #view-customer .live-route-line { stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-dasharray: 14 16; fill: none; animation: live-route-dash 2.2s linear infinite; }
@keyframes live-route-dash { to { stroke-dashoffset: -60; } }
html[data-theme="forest_canopy"] #view-customer .live-route-truck { filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
html[data-theme="forest_canopy"] #view-customer .live-leaf { position: absolute; z-index: 1; opacity: .5; font-size: 13px; animation: live-leaf-drift linear infinite; }
html[data-theme="forest_canopy"] #view-customer .live-leaf.l1 { left: 18%; bottom: 10px; animation-duration: 6s; animation-delay: 0s; }
html[data-theme="forest_canopy"] #view-customer .live-leaf.l2 { left: 48%; bottom: 10px; animation-duration: 7.5s; animation-delay: 2s; }
html[data-theme="forest_canopy"] #view-customer .live-leaf.l3 { left: 76%; bottom: 10px; animation-duration: 6.8s; animation-delay: 4s; }
@keyframes live-leaf-drift { from { transform: translateY(0) rotate(0deg); opacity: 0; } 15% { opacity: .5; } to { transform: translateY(-140px) rotate(200deg); opacity: 0; } }

/* Master workspace surfaces must use the same light customer-portal canvas.
   The old dark wrappers sat behind translucent cards, which made every
   control card render as a muddy grey block in the Master role. */
html[data-theme="forest_canopy"] #view-customer .master-control-segment,
html[data-theme="forest_canopy"] #view-customer .master-branch-portal-segment {
  background:
    radial-gradient(circle at 96% 0%, rgba(95,191,63,.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(242,250,242,.78)) !important;
  color: var(--ink) !important;
  border-color: rgba(20,60,30,.14) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="forest_canopy"] #view-customer .master-control-segment .master-segment-heading h2,
html[data-theme="forest_canopy"] #view-customer .master-branch-portal-segment .master-segment-heading h2 {
  color: var(--ink) !important;
}
html[data-theme="forest_canopy"] #view-customer .master-control-segment .master-segment-heading p,
html[data-theme="forest_canopy"] #view-customer .master-branch-portal-segment .master-segment-heading p {
  color: var(--muted) !important;
}
html[data-theme="forest_canopy"] #view-customer .master-branch-portal-segment::before {
  background: linear-gradient(90deg, var(--green), rgba(31,143,77,0)) !important;
}

/* ============================================================
   MOBILE — every section above collapses to a single column
   ============================================================ */
@media (max-width: 860px) {
  html[data-theme="forest_canopy"] #view-customer .ch-hero { grid-template-columns: 1fr; padding: 22px 20px 0; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-side { padding-bottom: 20px; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-strip { grid-template-columns: repeat(2, 1fr); margin: 0 -20px; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article:nth-child(2n) { border-right: none; }
  html[data-theme="forest_canopy"] #view-customer .client-metrics,
  html[data-theme="forest_canopy"] #view-customer .esg-report-kpis,
  html[data-theme="forest_canopy"] #view-customer .wp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme="forest_canopy"] #view-customer .esg-readiness-band,
  html[data-theme="forest_canopy"] #view-customer .esg-check-grid,
  html[data-theme="forest_canopy"] #view-customer .stat-table,
  html[data-theme="forest_canopy"] #view-customer .grid-2,
  html[data-theme="forest_canopy"] #view-customer .grid-3 { grid-template-columns: 1fr !important; }
  html[data-theme="forest_canopy"] #view-customer .esg-check-item { grid-template-columns: auto 1fr; }
  html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs { grid-template-columns: 1fr; width: 100%; }
  html[data-theme="forest_canopy"] #view-customer .collection-mode-tabs button { min-width: 0; }

  /* the orbital launcher only works on wide screens — fall back to a
     simple stacked list of module buttons on phones */
  html[data-theme="forest_canopy"] #view-customer .portal-home { display: block; padding: 84px 18px 40px; min-height: 100vh; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-orbit,
  html[data-theme="forest_canopy"] #view-customer .portal-home-bridge { display: none; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-brand { position: static; transform: none; margin-bottom: 28px; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-core { position: static; margin-bottom: 24px; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-core h1 { font-size: 28px; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    display: grid; gap: 10px; left: auto; right: auto;
  }
  html[data-theme="forest_canopy"] #view-customer .portal-home-module { min-width: 0; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-menu-left .portal-home-module { text-align: left; flex-direction: row; }
  html[data-theme="forest_canopy"] #view-customer .portal-home-footer { position: static; margin-top: 28px; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  html[data-theme="forest_canopy"] #view-customer .ch-hero-strip { grid-template-columns: 1fr; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article:nth-child(2n) { border-right: 1px solid var(--line); }
  html[data-theme="forest_canopy"] #view-customer .client-metrics,
  html[data-theme="forest_canopy"] #view-customer .esg-report-kpis,
  html[data-theme="forest_canopy"] #view-customer .wp-kpis { grid-template-columns: 1fr !important; }
  html[data-theme="forest_canopy"] #view-customer .portal-top-controls { flex-wrap: wrap; gap: 8px; }
  html[data-theme="forest_canopy"] #view-customer .portal-profile-wrap { flex-wrap: wrap; }
}

/* ============================================================
   OVERVIEW — Evidence and Impact Workspace
   The selected Overview layout keeps the existing data/actions but
   replaces the oversized hero with a report-first customer canvas.
   ============================================================ */
html[data-theme="forest_canopy"] #view-customer .client-overview-canvas {
  display: grid;
  gap: 14px;
  min-width: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-surface {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgidentity,
html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions,
html[data-theme="forest_canopy"] #view-customer .client-overview-share,
html[data-theme="forest_canopy"] #view-customer .client-overview-video-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgidentity > div,
html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions label,
html[data-theme="forest_canopy"] #view-customer .client-overview-video-copy,
html[data-theme="forest_canopy"] #view-customer .client-overview-share > div {
  display: grid;
  gap: 3px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgidentity strong {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -.01em;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgidentity small,
html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions label,
html[data-theme="forest_canopy"] #view-customer .client-overview-inline-period {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-logo,
html[data-theme="forest_canopy"] #view-customer .client-overview-orgidentity .customer-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid #dce8df;
  border-radius: 50%;
  background: #f0f8f1;
  padding: 7px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions {
  justify-content: flex-end;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions label,
html[data-theme="forest_canopy"] #view-customer .client-overview-inline-period {
  gap: 5px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions select,
html[data-theme="forest_canopy"] #view-customer .client-overview-inline-period select {
  min-height: 38px;
  min-width: 190px;
  margin-top: 2px;
  border-color: var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary,
html[data-theme="forest_canopy"] #view-customer .client-overview-readiness-action,
html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid var(--green);
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary {
  padding: 0 16px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary:hover,
html[data-theme="forest_canopy"] #view-customer .client-overview-readiness-action:hover,
html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta:hover strong {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary .material-symbols-rounded,
html[data-theme="forest_canopy"] #view-customer .client-overview-readiness-action .material-symbols-rounded,
html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta .material-symbols-rounded {
  font-size: 17px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(320px, .9fr);
  gap: 14px;
  align-items: stretch;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-impact,
html[data-theme="forest_canopy"] #view-customer .client-overview-readiness,
html[data-theme="forest_canopy"] #view-customer .client-overview-material,
html[data-theme="forest_canopy"] #view-customer .client-overview-evidence,
html[data-theme="forest_canopy"] #view-customer .client-overview-video-panel {
  padding: 18px 20px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-inline-period {
  display: grid;
  flex: 0 0 190px;
  text-align: left;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-impact-main {
  display: grid;
  grid-template-columns: minmax(148px, .72fr) minmax(260px, 1.45fr) minmax(135px, .78fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics {
  display: grid;
  gap: 16px;
  align-content: center;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics article {
  display: grid;
  gap: 5px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--line);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics article:last-child {
  padding-bottom: 4px;
  border-bottom: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics span,
html[data-theme="forest_canopy"] #view-customer .client-overview-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics strong {
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics strong small {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-primary-metrics em,
html[data-theme="forest_canopy"] #view-customer .client-overview-score-note,
html[data-theme="forest_canopy"] #view-customer .client-overview-benchmark small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-trend {
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-trend .line-chart {
  margin-top: 5px;
  min-height: 175px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-trend .line-chart svg {
  height: 175px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-ring {
  display: grid;
  place-items: center;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: conic-gradient(var(--green) var(--score), #dfe8e1 0);
  position: relative;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--panel);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-ring strong,
html[data-theme="forest_canopy"] #view-customer .client-overview-score-ring small {
  position: relative;
  z-index: 1;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-ring strong {
  margin-top: 11px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-ring small {
  margin-top: -7px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-benchmarks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-benchmark {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-benchmark:hover {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

html[data-theme="forest_canopy"] #view-customer .client-overview-benchmark > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-benchmark > strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-benchmark > strong small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness ul {
  display: grid;
  gap: 0;
  margin: 17px 0 14px;
  padding: 0;
  list-style: none;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li:last-child {
  border-bottom: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-check {
  color: var(--green);
  font-size: 18px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li.is-pending .client-overview-check,
html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li.is-pending em {
  color: var(--amber, #b7791f);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li strong {
  color: var(--ink);
  font-size: 12px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness li em {
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness-action {
  width: 100%;
  justify-content: flex-start;
  padding: 0 12px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-readiness-action .material-symbols-rounded:last-child {
  margin-left: auto;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(260px, 1.25fr) minmax(220px, .9fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-layout {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-chart {
  width: 144px;
  height: 144px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole {
  width: 83px;
  height: 83px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole strong {
  font-size: 14px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-item {
  padding: 4px 6px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-table .data-grid {
  max-width: 100%;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-table table {
  min-width: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-table th,
html[data-theme="forest_canopy"] #view-customer .client-overview-material-table td {
  padding: 9px 8px;
  font-size: 11px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 152px;
  padding: 18px;
  border: 1px solid #d8e7dc;
  border-radius: 13px;
  background: #f5faf5;
  color: var(--muted);
  text-align: left;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta > .material-symbols-rounded {
  color: var(--green);
  font-size: 30px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta span:not(.material-symbols-rounded) {
  font-size: 11px;
  line-height: 1.4;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta strong {
  justify-content: space-between;
  padding: 0 12px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(310px, .92fr);
  gap: 14px;
  align-items: stretch;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-evidence .data-grid {
  margin-top: 15px;
  overflow-x: auto;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-evidence table {
  min-width: 680px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-evidence th,
html[data-theme="forest_canopy"] #view-customer .client-overview-evidence td {
  padding: 9px 8px;
  font-size: 11px;
  vertical-align: middle;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-evidence th {
  color: var(--muted);
  background: var(--panel2);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 11%, transparent);
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-status .material-symbols-rounded {
  font-size: 13px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-row-action,
html[data-theme="forest_canopy"] #view-customer .client-overview-text-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-text-button:hover,
html[data-theme="forest_canopy"] #view-customer .client-overview-row-action:hover {
  color: color-mix(in srgb, var(--green) 70%, var(--ink));
  text-decoration: underline;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-row-action .material-symbols-rounded,
html[data-theme="forest_canopy"] #view-customer .client-overview-text-button .material-symbols-rounded {
  font-size: 15px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-body {
  align-items: stretch;
  margin-top: 15px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-media {
  position: relative;
  flex: 0 0 46%;
  min-height: 170px;
  overflow: hidden;
  border-radius: 11px;
  background: #19352a;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  background: #ff1744;
  color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-play:hover {
  filter: brightness(1.08);
  transform: translate(-50%, -50%) scale(1.05);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-play .material-symbols-rounded {
  font-size: 25px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-copy {
  align-content: center;
  min-width: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-kicker {
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-copy strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-copy small,
html[data-theme="forest_canopy"] #view-customer .client-overview-video-copy p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-copy p {
  margin: 2px 0 4px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-watch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-watch .material-symbols-rounded {
  font-size: 17px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 170px;
  margin-top: 15px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  text-align: center;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-empty .material-symbols-rounded {
  color: var(--green);
  font-size: 28px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-empty strong {
  color: var(--ink);
  font-size: 13px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-empty small {
  font-size: 10px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share {
  justify-content: space-between;
  padding: 13px 18px;
  background: #f4faf4;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ddf0df;
  color: var(--green);
  font-size: 21px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share > div {
  flex: 1 1 auto;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share strong {
  color: var(--ink);
  font-size: 14px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share small {
  color: var(--muted);
  font-size: 10px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-empty {
  padding: 22px !important;
  color: var(--muted) !important;
  text-align: center;
}

@media (max-width: 1120px) {
  html[data-theme="forest_canopy"] #view-customer .client-overview-top-grid,
  html[data-theme="forest_canopy"] #view-customer .client-overview-lower-grid {
    grid-template-columns: 1fr;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-material-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

@media (max-width: 820px) {
  html[data-theme="forest_canopy"] #view-customer .client-overview-orgbar,
  html[data-theme="forest_canopy"] #view-customer .client-overview-share {
    align-items: stretch;
    flex-direction: column;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions {
    align-items: stretch;
    flex-direction: column;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions label,
  html[data-theme="forest_canopy"] #view-customer .client-overview-orgactions select,
  html[data-theme="forest_canopy"] #view-customer .client-overview-primary {
    width: 100%;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-impact-main {
    grid-template-columns: 1fr 1fr;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-trend {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
    border-right: 0;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-score {
    border-left: 1px solid var(--line);
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-material-grid {
    grid-template-columns: 1fr;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  html[data-theme="forest_canopy"] #view-customer .client-overview-impact,
  html[data-theme="forest_canopy"] #view-customer .client-overview-readiness,
  html[data-theme="forest_canopy"] #view-customer .client-overview-material,
  html[data-theme="forest_canopy"] #view-customer .client-overview-evidence,
  html[data-theme="forest_canopy"] #view-customer .client-overview-video-panel {
    padding: 15px;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-section-head {
    flex-direction: column;
    gap: 10px;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-inline-period {
    width: 100%;
    flex-basis: auto;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-inline-period select {
    width: 100%;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-impact-main {
    grid-template-columns: 1fr;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-score {
    padding-top: 14px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-trend {
    grid-column: auto;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-benchmarks {
    grid-template-columns: 1fr;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-video-body {
    align-items: stretch;
    flex-direction: column;
  }
  html[data-theme="forest_canopy"] #view-customer .client-overview-video-media {
    flex-basis: auto;
    min-height: 180px;
  }
}
.driver-history-day span { color: #8fa0b0; }

/* ============================================================
   MASTER GOALS - unified SustainHub theme + centered modal
   Status (critical / amber) must not change the product surface
   from green to pink. The meaning stays in the badge and metrics;
   the page keeps one calm Forest Canopy visual language.
   ============================================================ */
.master-mission-hero.amber,
.master-mission-hero.red {
  background:
    radial-gradient(circle at 88% 14%, rgba(95,191,63,.2), transparent 32%),
    linear-gradient(135deg, #123522 0%, #2f8f58 52%, #edf7ee 52.2%, #fffdf7) !important;
  color: #fff !important;
}

html[data-theme="forest_canopy"] #view-customer .master-mission-hero,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero.amber,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero.red {
  background:
    radial-gradient(circle at 88% 14%, rgba(95,191,63,.2), transparent 32%),
    linear-gradient(135deg, #123522 0%, #2f8f58 52%, #edf7ee 52.2%, #fffdf7) !important;
  color: #fff !important;
}

/* A goal/campaign editor is a modal, not a right-hand drawer. */
.master-goal-control-row .master-goal-details[open] {
  position: fixed;
  inset: 0;
  z-index: 170;
  width: auto;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  background: rgba(9,16,11,.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .16s ease;
}

.master-goal-control-row .master-goal-details[open] .master-slide-body {
  position: relative;
  inset: auto;
  right: auto;
  top: auto;
  bottom: auto;
  display: block;
  width: min(760px, calc(100vw - 48px));
  max-height: min(86vh, 900px);
  height: auto;
  overflow: auto;
  padding: 32px 24px 24px;
  background: #fffdf7;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  animation: slideInCenter .22s ease;
}

@keyframes slideInCenter {
  from { transform: translateY(20px) scale(.98); opacity: .7; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

html[data-theme="forest_canopy"] #view-customer .master-goal-control-row .master-goal-details[open] .master-slide-body {
  background: rgba(255,255,255,.94) !important;
  color: #12331c !important;
}

@media (max-width: 760px) {
  .master-goal-control-row .master-goal-details[open] {
    padding: 12px;
  }
  .master-goal-control-row .master-goal-details[open] .master-slide-body {
    grid-column: auto;
    width: min(100%, 760px);
    max-height: calc(100vh - 24px);
    padding: 64px 16px 20px;
    border-radius: 18px;
  }
}

/* The three goal editors are rendered in separate cards, so the modal rules
   must be global rather than scoped to .master-goal-control-row. */
.master-goal-details[open] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 170 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 24px !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  background: rgba(9,16,11,.58) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .16s ease;
}

.master-goal-details[open] > summary {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 2 !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #123522 !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22) !important;
}

.master-goal-details[open] > summary::before { content: none !important; }
.master-goal-details[open] > summary::after {
  content: "×" !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
}

.master-test-cleanup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.master-test-cleanup .danger { white-space: nowrap; }

.master-goal-details[open] .master-slide-body {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  grid-column: auto !important;
  width: min(760px, calc(100vw - 48px)) !important;
  max-width: 760px !important;
  max-height: min(86vh, 900px) !important;
  height: auto !important;
  overflow: auto !important;
  padding: 32px 24px 24px !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.28) !important;
  animation: slideInCenter .22s ease;
}

/* Goal cards: make the period, target, status and remaining kg explicit so
   an empty monthly target cannot be confused with a saved yearly target. */
.master-goal-period-card,
.master-goal-period-slot {
  min-width: 0;
}
.master-goal-period-slot {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfbf7;
}
.master-goal-cell {
  gap: 7px;
}
.master-goal-cell-heading,
.master-goal-cell-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.master-goal-cell-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.master-goal-status {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.master-goal-status.active { background: rgba(46,158,82,.12); color: #23753b; }
.master-goal-status.achieved { background: rgba(31,143,77,.16); color: #176c39; }
.master-goal-status.neutral { background: rgba(112,128,116,.14); color: var(--muted); }
.master-goal-amount {
  font-size: 18px;
  line-height: 1.1;
  color: var(--ink);
}
.master-goal-amount span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.master-goal-empty-value {
  color: var(--muted);
  font-size: 16px;
}
.master-goal-cell-meta small,
.master-goal-cell-note {
  color: var(--muted);
  font-size: 11px;
}
.master-goal-cell-note {
  line-height: 1.35;
}
.master-goal-period-card > .master-goal-cell {
  min-height: 112px;
}
.master-branch-goal-card > .master-goal-period-slot {
  background: color-mix(in srgb, var(--panel) 78%, var(--line));
}
html[data-theme="forest_canopy"] #view-customer .master-goal-period-slot {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(20,60,30,.14) !important;
}

/* backdrop-filter creates a new containing block for fixed descendants. The
   card behind an open editor must release that filter, otherwise the supposed
   full-screen modal is still trapped inside the card and gets clipped. */
#view-customer .master-chart-card:has(.master-goal-details[open]) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 760px) {
  .master-goal-details[open] { padding: 12px !important; }
  .master-goal-details[open] .master-slide-body {
    width: min(100%, 760px) !important;
    max-height: calc(100vh - 24px) !important;
    padding: 64px 16px 20px !important;
    border-radius: 18px !important;
  }
}

/* Goal manager polish: the action affordance must remain readable on the
   light forest theme, and a branch editor should show one company at a time. */
.master-goal-details:not([open]) > summary::after {
  color: #176c39 !important;
  font-weight: 900;
}

.master-goal-details[open] > summary::after {
  content: "X" !important;
  font-family: Arial, sans-serif !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  transform: none !important;
}

.master-goal-details[open] > summary {
  text-indent: 0 !important;
}

.master-goal-details[open] .master-slide-body {
  background: #fffdf7 !important;
  isolation: isolate;
}

.master-branch-goal-editor {
  display: grid;
  gap: 16px;
}

.master-branch-goal-selector {
  display: grid;
  gap: 6px;
  max-width: 480px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfbf7;
}

.master-branch-goal-selector label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.master-branch-goal-selector small,
.master-branch-goal-selected-head small {
  color: var(--muted);
  font-size: 12px;
}

.master-branch-goal-selected {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #a8d8b6;
  border-radius: 16px;
  background: #f3fbf5;
}

.master-branch-goal-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.master-branch-goal-selected-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.master-branch-goal-selected-head strong {
  color: var(--ink);
  font-size: 18px;
}

.master-branch-goal-selected .master-goal-period-grid {
  margin: 0;
}

.master-branch-goal-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.master-branch-goal-form .master-goal-triplet {
  min-width: 0;
}

.master-branch-goal-form > input[name="note"],
.master-branch-goal-form > button {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .master-branch-goal-selected-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .master-branch-goal-selected-head button {
    width: 100%;
  }

  .master-branch-goal-form,
  .master-branch-goal-selected .master-goal-period-grid {
    grid-template-columns: 1fr;
  }
}

/* SustainHub Recycling Journey — shared Customer / Master route language. */
.material-flow-panel { display: grid; gap: 18px; overflow: hidden; }
.material-flow-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.material-flow-intro h2 { margin: 4px 0 5px; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.02em; }
.material-flow-intro p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; }
.material-flow-boundary { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
.material-flow-boundary .material-symbols-rounded { font-size: 16px; color: var(--green); }
.material-flow-universal-rail, .material-flow-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.material-flow-universal-step, .material-flow-step { position: relative; display: grid; gap: 5px; min-width: 0; padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 86%, var(--soft)); }
.material-flow-universal-step { min-height: 98px; align-content: start; }
.material-flow-step { min-height: 90px; align-content: start; padding: 10px 9px; }
.material-flow-universal-step strong, .material-flow-step strong { font-size: 12px; line-height: 1.2; }
.material-flow-universal-step small, .material-flow-step small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.material-flow-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--green); font-size: 18px; }
.material-flow-arrow { position: absolute; right: -11px; top: 34px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--green); font-size: 18px; line-height: 1; }
.material-flow-disclosure-banner { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--green) 8%, var(--panel)); color: var(--muted); font-size: 12px; line-height: 1.45; }
.material-flow-disclosure-banner .material-symbols-rounded { flex: 0 0 auto; color: var(--green); font-size: 18px; }
.material-flow-route-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.material-flow-route-heading h3 { margin: 3px 0 0; font-size: 16px; }
.material-flow-period { color: var(--muted); font-size: 11px; font-weight: 800; }
.material-flow-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.material-flow-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, var(--soft)); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.material-flow-card:hover { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); box-shadow: 0 8px 22px color-mix(in srgb, var(--green) 12%, transparent); transform: translateY(-1px); }
.material-flow-card.is-disposal { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.material-flow-card-button { display: grid; gap: 10px; width: 100%; padding: 14px; text-align: left; background: transparent; color: var(--ink); border-radius: inherit; }
.material-flow-card-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 48%, transparent); outline-offset: -3px; }
.material-flow-card-head, .material-flow-card-head > span:first-child { display: flex; align-items: center; gap: 8px; }
.material-flow-card-head { justify-content: space-between; align-items: flex-start; }
.material-flow-card-head strong { font-size: 14px; }
.material-flow-route-badge { max-width: 52%; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 999px; color: var(--green); font-size: 9px; font-weight: 900; line-height: 1.2; text-align: right; }
.material-flow-card-weight { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.material-flow-card-weight small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0; }
.material-flow-card-stage, .material-flow-card-next { display: grid; gap: 3px; padding-top: 9px; border-top: 1px solid var(--line); }
.material-flow-card-stage span, .material-flow-card-next span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
.material-flow-card-stage strong, .material-flow-card-next strong { font-size: 12px; line-height: 1.35; }
.material-flow-card-note { min-height: 32px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.material-flow-card-cta { display: flex; justify-content: space-between; align-items: center; color: var(--green); font-size: 11px; font-weight: 900; }
.material-flow-card-cta span { font-size: 17px; }
.material-flow-master-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.material-flow-master-summary article { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 86%, var(--soft)); }
.material-flow-master-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }
.material-flow-master-summary strong { font-size: 20px; }
.material-flow-master-summary small { color: var(--muted); font-size: 10px; }
.material-flow-contribution { display: grid; gap: 4px; margin-top: 3px; }
.material-flow-contribution .mp-card-h { margin-bottom: 6px; }
.material-flow-contribution .mp-table { overflow-x: auto; }
.material-flow-contribution table { min-width: 640px; }
.material-flow-contribution td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.material-flow-detail { display: grid; gap: 16px; }
.material-flow-detail-summary { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
.material-flow-detail-summary > div { display: grid; gap: 3px; }
.material-flow-detail-summary strong { font-size: 17px; }
.material-flow-detail-summary span:not(.material-flow-icon) { color: var(--muted); font-size: 11px; }
.material-flow-detail-copy { display: grid; gap: 9px; }
.material-flow-detail-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.material-flow-detail-copy strong { color: var(--ink); }
.material-flow-disclosure { padding: 10px 12px; border-left: 3px solid var(--green); background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
.center-modal .material-flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.center-modal .material-flow-step:nth-child(3) .material-flow-arrow, .center-modal .material-flow-step:nth-child(6) .material-flow-arrow { display: none; }

@media (max-width: 980px) {
  .material-flow-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-flow-universal-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .material-flow-universal-step:nth-child(3) .material-flow-arrow { display: none; }
}
@media (max-width: 680px) {
  .material-flow-intro, .material-flow-route-heading { display: grid; align-items: start; }
  .material-flow-route-grid, .material-flow-master-summary, .material-flow-steps, .center-modal .material-flow-steps { grid-template-columns: 1fr; }
  .material-flow-universal-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-flow-universal-step .material-flow-arrow, .material-flow-step .material-flow-arrow { display: none; }
}

/* Recovery Process is a separate route map, not a dashboard card grid. */
.material-flow-mindmap { display: grid; gap: 14px; padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 25%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--green) 5%, var(--panel)); }
.material-flow-map-root { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 13px 17px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--green) 13%, var(--panel)); box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 10%, transparent); }
.material-flow-map-root > span:last-child, .material-flow-map-node > span:last-of-type, .material-flow-map-outcome > span:last-child { display: grid; gap: 3px; text-align: left; }
.material-flow-map-root strong { font-size: 15px; }
.material-flow-map-root small, .material-flow-map-node small, .material-flow-map-outcome small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.material-flow-map-root-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--green); color: var(--panel); font-size: 22px; }
.material-flow-map-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.material-flow-map-node, .material-flow-map-outcome { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 12px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.material-flow-map-node:hover, .material-flow-map-outcome:hover { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); box-shadow: 0 7px 18px color-mix(in srgb, var(--green) 12%, transparent); transform: translateY(-1px); }
.material-flow-map-node:focus-visible, .material-flow-map-outcome:focus-visible, .material-flow-route-branch:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 48%, transparent); outline-offset: 2px; }
.material-flow-map-node strong, .material-flow-map-outcome strong { display: block; font-size: 11px; line-height: 1.25; }
.material-flow-map-node-icon { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 9px; background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--green); font-size: 17px; }
.material-flow-map-node.is-branch { border-color: color-mix(in srgb, var(--teal, #2c9c91) 38%, var(--line)); }
.material-flow-map-link { display: grid; place-items: center; margin-left: auto; color: var(--green); font-size: 17px; }
.material-flow-map-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; padding-top: 5px; }
.material-flow-map-outcome { justify-content: flex-start; }
.material-flow-map-outcome.is-disposal { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.material-flow-map-outcome.is-disposal .material-flow-map-node-icon { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--panel)); }
.material-flow-map-hint { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.material-flow-map-hint .material-symbols-rounded { color: var(--green); font-size: 15px; }
.material-flow-route-list { display: grid; gap: 10px; }
.material-flow-route-branch { display: grid; grid-template-columns: 175px minmax(0, 1fr) 68px; gap: 10px; align-items: stretch; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.material-flow-route-branch:hover { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); box-shadow: 0 7px 18px color-mix(in srgb, var(--green) 11%, transparent); transform: translateY(-1px); }
.material-flow-route-branch.is-disposal { border-color: color-mix(in srgb, var(--amber) 48%, var(--line)); }
.material-flow-route-branch-label { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: center; align-items: center; gap: 7px; min-width: 0; padding: 4px; }
.material-flow-route-branch-label strong { font-size: 12px; line-height: 1.25; }
.material-flow-route-branch-label small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.3; }
.material-flow-route-branch-path { display: flex; align-items: stretch; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.material-flow-route-node { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-content: center; align-items: center; gap: 4px; flex: 1 1 0; min-width: 98px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 88%, var(--soft)); }
.material-flow-route-node > .material-symbols-rounded { grid-row: span 2; color: var(--green); font-size: 16px; }
.material-flow-route-node strong { font-size: 10px; line-height: 1.2; }
.material-flow-route-node small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.material-flow-route-node.is-disposal { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.material-flow-route-node.is-disposal > .material-symbols-rounded { color: var(--amber); }
.material-flow-route-arrow { display: grid; place-items: center; flex: 0 0 auto; color: var(--green); font-size: 17px; }
.material-flow-route-branch-cta { display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: var(--green); font-size: 10px; font-weight: 900; }
.material-flow-route-branch-cta .material-symbols-rounded { font-size: 14px; }
.material-flow-stage-detail { display: grid; gap: 13px; }
.material-flow-stage-detail > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 980px) {
  .material-flow-map-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .material-flow-route-branch { grid-template-columns: 155px minmax(0, 1fr) 60px; }
}
@media (max-width: 680px) {
  .material-flow-map-stages { grid-template-columns: 1fr; }
  .material-flow-map-outcomes { grid-template-columns: 1fr; }
  .material-flow-route-branch { grid-template-columns: 1fr; gap: 8px; }
  .material-flow-route-branch-path { padding-bottom: 2px; }
  .material-flow-route-branch-cta { justify-content: flex-start; padding: 2px 4px 0; }
}

/* Mind-map hierarchy: one shared chain, then material-specific branches. */
.material-flow-map-stages { max-width: 940px; width: 100%; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.material-flow-map-stages .material-flow-map-node { min-height: 68px; }
.material-flow-map-branch-title { display: flex; align-items: center; gap: 7px; max-width: 940px; width: 100%; margin: 3px auto 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--green) 35%, var(--line)); }
.material-flow-map-branch-title .material-symbols-rounded { color: var(--green); font-size: 18px; }
.material-flow-map-branch-title strong { font-size: 12px; }
.material-flow-map-branch-title small { color: var(--muted); font-size: 10px; }
.material-flow-map-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-width: 940px; width: 100%; margin: 0 auto; }
.material-flow-map-material { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) 16px; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.material-flow-map-material:hover { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); box-shadow: 0 6px 14px color-mix(in srgb, var(--green) 10%, transparent); transform: translateY(-1px); }
.material-flow-map-material.is-disposal { border-color: color-mix(in srgb, var(--amber) 52%, var(--line)); }
.material-flow-map-branch-icon { color: var(--green); font-size: 18px; }
.material-flow-map-material.is-disposal .material-flow-map-branch-icon { color: var(--amber); }
.material-flow-map-material-name { display: grid; gap: 3px; min-width: 0; }
.material-flow-map-material-name strong { font-size: 11px; line-height: 1.2; }
.material-flow-map-material-name small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.material-flow-map-branch-cta { color: var(--green); font-size: 15px; }

@media (max-width: 680px) {
  .material-flow-map-materials { grid-template-columns: 1fr; }
  .material-flow-map-branch-title { align-items: flex-start; flex-wrap: wrap; }
  .material-flow-map-branch-title small { flex-basis: 100%; padding-left: 25px; }
}

/* Interactive material explorer: one selected route instead of nine repeated route rows. */
.material-flow-explorer { display: grid; gap: 14px; }
.material-flow-explorer-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.material-flow-explorer-heading h3 { margin: 3px 0 4px; font-size: 18px; }
.material-flow-explorer-heading p { margin: 0; max-width: 660px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.material-flow-explorer-hint { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--green); font-size: 10px; font-weight: 900; }
.material-flow-explorer-hint .material-symbols-rounded { font-size: 16px; }
.material-flow-explorer-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 12px; align-items: start; }
.material-flow-material-picker { display: grid; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, var(--soft)); }
.material-flow-material-picker-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 15px; align-items: center; gap: 8px; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.material-flow-material-picker-item:hover { background: color-mix(in srgb, var(--green) 8%, var(--panel)); }
.material-flow-material-picker-item.active { border-color: color-mix(in srgb, var(--green) 52%, var(--line)); background: color-mix(in srgb, var(--green) 13%, var(--panel)); }
.material-flow-material-picker-item.is-disposal.active { border-color: color-mix(in srgb, var(--amber) 58%, var(--line)); background: color-mix(in srgb, var(--amber) 10%, var(--panel)); }
.material-flow-material-picker-item > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.material-flow-material-picker-item strong { font-size: 11px; line-height: 1.2; }
.material-flow-material-picker-item small { color: var(--muted); font-size: 9px; line-height: 1.2; }
.material-flow-material-picker-item > .material-symbols-rounded:last-child { color: var(--muted); font-size: 16px; }
.material-flow-material-picker-item.active > .material-symbols-rounded:last-child { color: var(--green); }
.material-flow-explorer-detail-wrap { min-width: 0; }
.material-flow-explorer-detail { display: grid; gap: 14px; min-height: 250px; padding: 16px; border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line)); border-radius: 15px; background: var(--panel); }
.material-flow-explorer-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.material-flow-explorer-detail-head h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 20px; }
.material-flow-explorer-detail-head h3 .material-flow-icon { width: 28px; height: 28px; font-size: 17px; }
.material-flow-explorer-detail-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.material-flow-explorer-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-flow-explorer-metrics article { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--green) 5%, var(--panel)); }
.material-flow-explorer-metrics span, .material-flow-explorer-metrics small { color: var(--muted); font-size: 10px; }
.material-flow-explorer-metrics strong { font-size: 13px; line-height: 1.3; }
.material-flow-explorer-route { display: grid; gap: 7px; }
.material-flow-explorer-route-nodes { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.material-flow-explorer-node { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-content: center; align-items: center; gap: 3px 6px; flex: 1 1 0; min-width: 128px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 88%, var(--soft)); color: var(--ink); text-align: left; cursor: pointer; }
.material-flow-explorer-node:hover { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); }
.material-flow-explorer-node > .material-symbols-rounded { grid-row: span 2; color: var(--green); font-size: 16px; }
.material-flow-explorer-node strong { font-size: 10px; line-height: 1.2; }
.material-flow-explorer-node small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.material-flow-explorer-node.is-disposal { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.material-flow-explorer-node.is-disposal > .material-symbols-rounded { color: var(--amber); }
.material-flow-explorer-arrow { display: grid; place-items: center; flex: 0 0 auto; color: var(--green); font-size: 17px; }
.material-flow-explorer-note { display: flex; align-items: flex-start; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.4; }
.material-flow-explorer-note .material-symbols-rounded { color: var(--green); font-size: 16px; }

@media (max-width: 760px) {
  .material-flow-explorer-heading { display: grid; align-items: start; }
  .material-flow-explorer-layout { grid-template-columns: 1fr; }
  .material-flow-material-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .material-flow-material-picker { grid-template-columns: 1fr; }
  .material-flow-explorer-metrics { grid-template-columns: 1fr; }
  .material-flow-explorer-detail-head { display: grid; }
}

.material-flow-education { display: grid; gap: 13px; padding-top: 4px; }
.material-flow-education-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.material-flow-education-heading h3 { margin: 3px 0 3px; font-size: 17px; }
.material-flow-education-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.material-flow-education-heading button { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.material-flow-education-heading button .material-symbols-rounded { font-size: 15px; }
.material-flow-education-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.material-flow-education-grid article { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, var(--soft)); }
.material-flow-education-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--green); font-size: 17px; }
.material-flow-education-grid article > div { display: grid; gap: 3px; }
.material-flow-education-grid strong { font-size: 11px; }
.material-flow-education-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.material-flow-education-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-flow-education-details details { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.material-flow-education-details summary { display: flex; align-items: center; gap: 6px; padding: 11px; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 900; list-style: none; }
.material-flow-education-details summary::-webkit-details-marker { display: none; }
.material-flow-education-details summary .material-symbols-rounded { color: var(--green); font-size: 16px; }
.material-flow-education-details details > p { margin: 0; padding: 0 11px 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.material-flow-education-details dl { display: grid; gap: 7px; margin: 0; padding: 0 11px 11px; }
.material-flow-education-details dl > div { display: grid; gap: 2px; padding-top: 7px; border-top: 1px solid var(--line); }
.material-flow-education-details dt { font-size: 10px; font-weight: 900; }
.material-flow-education-details dd { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
@media (max-width: 760px) {
  .material-flow-education-heading { display: grid; align-items: start; }
  .material-flow-education-grid, .material-flow-education-details { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT ASPEN RECYCLE — 2026-08-06
   Internal preview (admin/manager only for now, via roleViews).
   Always bright regardless of the viewer's carbon_dark/forest_canopy
   theme choice — same "reset tokens at #id specificity" pattern
   already used for #loginScreen, since this is a showcase page.
   ============================================================ */
#view-about {
  --ink: #0e1b12; --muted: #5f7264; --lime: #5fbf3f; --sky: #1f8fbf; --gold: #d9971f;
  --green: #1f8f4d; --line: #e4ece5; --panel2: #f6faf5; --bg: #f5f8f5;
  background: var(--bg); color: var(--ink);
}
#view-about .about-aspen { max-width: 1180px; margin: 0 auto; padding: 30px 24px 70px; }
#view-about .about-portal-return { margin-bottom: 18px; }
#view-about .about-portal-return button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--ink); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
#view-about .about-portal-return button:hover { border-color: var(--green); color: var(--green); }
#view-about .about-portal-return + .about-hero { margin-top: 0; }
#view-about .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
#view-about h1, #view-about h2 { margin: 0; color: var(--ink); }
#view-about section { margin-top: 46px; }
#view-about section:first-child { margin-top: 0; }

#view-about .about-hero h1 { font-size: clamp(28px, 4.2vw, 46px); font-weight: 900; letter-spacing: -.02em; line-height: 1.16; margin-top: 10px; text-wrap: balance; }
#view-about .about-hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--lime), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#view-about .about-hero p { font-size: 14.5px; color: var(--muted); max-width: 62ch; margin-top: 12px; line-height: 1.55; }

#view-about .about-service { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
#view-about .about-service.reverse { direction: rtl; }
#view-about .about-service.reverse > * { direction: ltr; }
#view-about .about-photo { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px rgba(18,36,27,.12); aspect-ratio: 4/3; }
#view-about .about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#view-about .about-photo:has(.about-box-photo) { aspect-ratio: 5/4; }
#view-about .about-photo .about-box-photo { object-position: center 42%; filter: brightness(.88) contrast(1.03) saturate(.92); }
#view-about .about-photo-inset { position: absolute; right: 14px; bottom: 14px; width: 42%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 12px 24px rgba(18,36,27,.28); }
#view-about .about-photo-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
#view-about .about-photo-inset-label { position: absolute; left: 6px; bottom: 6px; z-index: 2; background: rgba(14,27,18,.75); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
#view-about .about-copy h2 { font-size: clamp(21px, 2.5vw, 28px); font-weight: 800; letter-spacing: -.01em; margin: 8px 0 10px; }
#view-about .about-copy p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
#view-about .about-tag { display: inline-flex; align-items: center; gap: 6px; background: #12211a; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
#view-about .about-tag.secondary { background: var(--sky); }

#view-about .about-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 16px; }
#view-about .about-stat-row article { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; position: relative; overflow: hidden; background: #fff; }
#view-about .about-stat-row article::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lime), var(--sky)); }
#view-about .about-stat-row strong { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
#view-about .about-stat-row span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

#view-about .about-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
#view-about .about-chip-row span { background: color-mix(in srgb, var(--green) 10%, #fff); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); color: color-mix(in srgb, var(--green) 82%, black); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
#view-about .about-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); background: #eef2ee; padding: 9px 16px; border-radius: 999px; cursor: not-allowed; }

#view-about .about-fleet-banner { position: relative; border-radius: 20px; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; }
#view-about .about-fleet-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
#view-about .about-fleet-banner::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(10,20,14,.88) 0%, rgba(10,20,14,.35) 55%, transparent 100%); }
#view-about .about-fleet-copy { position: relative; z-index: 3; padding: 30px 34px; color: #fff; max-width: 640px; }
#view-about .about-fleet-copy .eyebrow { color: #bfe98f; }
#view-about .about-fleet-copy h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 900; letter-spacing: -.01em; margin: 8px 0 8px; color: #fff; }
#view-about .about-fleet-copy p { font-size: 13.5px; color: rgba(255,255,255,.88); line-height: 1.55; margin: 0; }
#view-about .about-fleet-stats { position: relative; z-index: 3; display: flex; gap: 22px; padding: 14px 34px 24px; flex-wrap: wrap; }
#view-about .about-fleet-stats div { color: #fff; }
#view-about .about-fleet-stats strong { display: block; font-size: 19px; font-weight: 800; }
#view-about .about-fleet-stats span { font-size: 10.5px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .05em; }

#view-about .about-philosophy { background: linear-gradient(120deg, #123522 0%, var(--green) 60%, var(--lime) 100%); border-radius: 20px; padding: 32px 34px; color: #fff; }
#view-about .about-philosophy .eyebrow { color: #cdeccd; }
#view-about .about-philosophy h2 { font-size: clamp(21px, 2.7vw, 30px); font-weight: 900; letter-spacing: -.01em; margin: 8px 0 18px; color: #fff; }
#view-about .about-philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#view-about .about-philosophy-grid article { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 16px; }
#view-about .about-philosophy-grid strong { display: block; font-size: 14.5px; margin-bottom: 4px; color: #fff; }
#view-about .about-philosophy-grid span { font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.4; }

#view-about .about-certs h2 { font-size: 25px; font-weight: 800; margin: 8px 0 16px; }
#view-about .about-cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#view-about .about-cert-card { min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; }
#view-about .about-cert-card.verified { background: linear-gradient(160deg, var(--lime), #3f9e2c); color: #fff; border: none; }
#view-about .about-cert-badge { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
#view-about .about-cert-card.verified .about-cert-badge { background: rgba(255,255,255,.25); color: #fff; }
#view-about .about-cert-card:not(.verified) .about-cert-badge { background: color-mix(in srgb, var(--gold) 16%, #fff); color: var(--gold); }
#view-about .about-cert-card strong { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 6px; color: inherit; }
#view-about .about-cert-card p { margin: 0; font-size: 12px; line-height: 1.5; }
#view-about .about-cert-card:not(.verified) p { color: var(--muted); }
#view-about .about-cert-card.verified p { color: rgba(255,255,255,.9); }

#view-about .about-locations { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 46px; flex-wrap: wrap; gap: 12px; }
#view-about .about-loc-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
#view-about .about-loc-item strong { color: var(--ink); }

@media (max-width: 820px) {
  #view-about .about-service, #view-about .about-service.reverse { grid-template-columns: 1fr; direction: ltr; }
  #view-about .about-stat-row, #view-about .about-cert-grid { grid-template-columns: repeat(2, 1fr); }
  #view-about .about-cert-card { grid-column: auto; }
  #view-about .about-philosophy-grid { grid-template-columns: 1fr; }
}

/* Manager/Admin Control Tower v2 */
.control-tower-dashboard { display: grid; gap: 16px; padding-bottom: 28px; }
.ct-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 24px 26px; border: 1px solid #cfe3d4; border-radius: 18px; background: linear-gradient(125deg, #effaf1, #ffffff 72%); }
.ct-hero h2 { margin: 5px 0 7px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; color: #173b26; }
.ct-hero p { margin: 0; max-width: 680px; color: #587160; line-height: 1.45; }
.ct-hero-meta { display: grid; justify-items: end; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ct-live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #e4f5e8; border: 1px solid #b9dec0; color: #277342; font-weight: 800; }
.ct-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #26964e; box-shadow: 0 0 0 4px rgba(38,150,78,.12); }
.ct-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ct-metric { display: grid; gap: 5px; min-height: 116px; padding: 14px 15px; text-align: left; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 16px rgba(26,70,42,.04); }
.ct-metric:hover, .ct-action-row:hover, .ct-login-row:hover, .ct-stage:hover { border-color: #86bf96; transform: translateY(-1px); }
.ct-metric.warn { border-top: 3px solid #d38a18; }
.ct-metric.good { border-top: 3px solid #3d9c5a; }
.ct-metric span, .ct-metric small { color: var(--muted); }
.ct-metric span { font-size: 11px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.ct-metric strong { font-size: 25px; line-height: 1; color: #173b26; }
.ct-metric strong em { font-size: 13px; font-style: normal; font-weight: 800; }
.ct-metric small { font-size: 11px; line-height: 1.25; }
.ct-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 16px; }
.ct-main-grid.lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ct-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 4px 16px rgba(26,70,42,.035); }
.ct-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 13px; }
.ct-card-head h3 { margin: 4px 0 0; font-size: 19px; color: #173b26; }
.ct-card-note { color: var(--muted); font-size: 11px; font-weight: 800; }
.ct-action-list, .ct-activity-list { display: grid; gap: 8px; }
.ct-action-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfb; transition: transform .16s ease, border-color .16s ease; }
.ct-action-row.urgent { background: #fffaf0; border-color: #ecd9ab; }
.ct-action-row.clear { background: #f7fcf8; }
.ct-severity-dot { width: 8px; height: 8px; border-radius: 50%; background: #b9c2bc; }
.ct-action-row.urgent .ct-severity-dot { background: #d56d32; box-shadow: 0 0 0 4px rgba(213,109,50,.12); }
.ct-action-row.attention .ct-severity-dot { background: #d38a18; box-shadow: 0 0 0 4px rgba(211,138,24,.12); }
.ct-action-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ct-action-title strong { color: #234b31; font-size: 13px; }
.ct-action-title span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ct-action-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.ct-action-count { min-width: 28px; text-align: right; font-size: 20px; color: #173b26; }
.ct-inline-action { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #b8d4be; border-radius: 8px; background: #edf8ef; color: #287544; font-size: 10px; font-weight: 900; white-space: nowrap; }
.ct-inline-action:hover { background: #dff2e3; }
.ct-login-list { display: grid; gap: 7px; }
.ct-customer-login-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-customer-login-summary > div { display: grid; align-content: center; gap: 6px; min-width: 0; min-height: 60px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #f4faf5; }
.ct-customer-login-summary strong { color: #173b26; font-size: 18px; line-height: 1.1; }
.ct-customer-login-summary span { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ct-customer-login-note { margin: 8px 0 10px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ct-login-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; text-align: left; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: #fbfdfb; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.ct-login-row:hover { border-color: #86bf96; background: #f1faf3; transform: translateY(-1px); }
.ct-login-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e5f4e8; color: #2c824a; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.ct-login-user { display: grid; min-width: 0; gap: 3px; }
.ct-login-user strong { overflow: hidden; color: #234b31; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ct-login-user small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ct-login-presence { display: grid; justify-items: end; gap: 2px; min-width: 86px; }
.ct-login-presence strong { display: inline-flex; align-items: center; gap: 5px; color: #718178; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.ct-login-presence strong::before { width: 6px; height: 6px; content: ''; border-radius: 50%; background: #a9b8ad; }
.ct-login-presence.online strong { color: #247941; }
.ct-login-presence.online strong::before { background: #2eaa5e; box-shadow: 0 0 0 3px rgba(46,170,94,.12); }
.ct-login-presence small { color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.ct-login-empty { padding: 16px 10px; color: var(--muted); font-size: 11px; }
.ct-login-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ct-login-footer .ct-helper { margin: 0; }
.ct-helper { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ct-pipeline-card { padding-bottom: 15px; }
.ct-stage-list { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.ct-stage { display: grid; grid-template-columns: auto minmax(110px, 1fr) auto; align-items: center; gap: 9px; flex: 1 0 170px; min-height: 70px; padding: 10px 11px; text-align: left; color: var(--ink); background: #fbfdfb; border: 1px solid var(--line); border-radius: 11px; transition: transform .16s ease, border-color .16s ease; }
.ct-stage.has-work { background: #fffaf0; border-color: #ecd9ab; }
.ct-stage-index { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e5f4e8; color: #2c824a; font-size: 10px; font-weight: 900; }
.ct-stage-copy { display: grid; gap: 3px; }
.ct-stage-copy strong { color: #234b31; font-size: 12px; }
.ct-stage-copy small { color: var(--muted); font-size: 10px; line-height: 1.2; }
.ct-stage-count { color: #173b26; font-size: 20px; font-weight: 900; }
.ct-stage-arrow { align-self: center; color: #7ea987; font-size: 22px; }
.ct-tracking-card { overflow: hidden; }
.ct-tracking-intro { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ct-tracking-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ct-tracking-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -2px 0 14px; }
.ct-tracking-summary-item { display: inline-flex; align-items: center; gap: 6px; color: #234b31; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.ct-tracking-summary-item i, .ct-driver-track-status i { width: 7px; height: 7px; border-radius: 50%; background: #a9b8ad; }
.ct-tracking-summary-item.live i, .ct-driver-track-status.live i { background: #2eaa5e; box-shadow: 0 0 0 3px rgba(46,170,94,.12); }
.ct-tracking-summary-item.stale i, .ct-driver-track-status.stale i { background: #ca851a; box-shadow: 0 0 0 3px rgba(202,133,26,.12); }
.ct-tracking-summary-item.offline i, .ct-driver-track-status.offline i { background: #a9b8ad; }
.ct-tracking-summary-note { margin-left: auto; color: var(--muted); font-size: 11px; }
.ct-tracking-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr); gap: 13px; }
.ct-tracking-map-panel { position: relative; z-index: 0; isolation: isolate; min-width: 0; overflow: hidden; border: 1px solid #cfe3d4; border-radius: 13px; background: #eaf4ec; }
.ct-tracking-map { position: relative; z-index: 0; isolation: isolate; min-height: 350px; height: 350px; overflow: hidden; background: linear-gradient(135deg, #e8f4eb, #f8fbf8); }
.ct-tracking-map .leaflet-container { z-index: 0; }
.ct-tracking-map-empty { display: grid; place-items: center; align-content: center; gap: 6px; height: 100%; min-height: 350px; padding: 20px; text-align: center; color: #587160; }
.ct-tracking-map-empty .material-symbols-rounded { color: #3d9c5a; font-size: 30px; }
.ct-tracking-map-empty strong { color: #234b31; font-size: 14px; }
.ct-tracking-map-empty small { max-width: 240px; font-size: 11px; line-height: 1.35; }
.ct-tracking-map-footer { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-top: 1px solid #cfe3d4; background: rgba(255,255,255,.7); color: #587160; font-size: 10px; line-height: 1.3; }
.ct-driver-map-marker-wrap { border: 0; background: transparent; }
.ct-driver-map-marker { display: block; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(17,59,32,.28); }
.ct-driver-map-marker.live { background: #229653; }
.ct-driver-map-marker.stale { background: #c8861a; }
.ct-driver-track-list { display: grid; align-content: start; gap: 7px; max-height: 398px; overflow: auto; padding-right: 2px; }
.ct-driver-track-row { display: grid; gap: 5px; padding: 11px 12px; text-align: left; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: #fbfdfb; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.ct-driver-track-row:hover, .ct-driver-track-row.selected { border-color: #79b989; background: #f1faf3; transform: translateY(-1px); }
.ct-driver-track-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ct-driver-track-top strong { overflow: hidden; color: #234b31; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ct-driver-track-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #587160; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.ct-driver-track-status.live { color: #247941; }
.ct-driver-track-status.stale { color: #a66511; }
.ct-driver-track-meta, .ct-driver-track-time { color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.ct-driver-track-time { color: #6c8272; }
.ct-tracking-empty { padding: 20px 12px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ct-health-grid, .ct-pulse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ct-health-grid > div, .ct-pulse-grid > div { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfb; }
.ct-health-grid strong, .ct-pulse-grid strong { color: #173b26; font-size: 22px; }
.ct-health-grid span, .ct-pulse-grid span { color: #234b31; font-size: 11px; font-weight: 900; }
.ct-health-grid small, .ct-pulse-grid small { color: var(--muted); font-size: 10px; line-height: 1.25; }
.ct-activity-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--soft); }
.ct-activity-row:last-child { border-bottom: 0; }
.ct-activity-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; font-size: 13px; font-weight: 900; }
.ct-activity-icon.good { background: #e2f5e6; color: #2c824a; }
.ct-activity-icon.warn { background: #fff2d8; color: #a76510; }
.ct-activity-icon.bad { background: #fde6e3; color: #a32b20; }
.ct-activity-icon.info { background: #e4effb; color: #2767a7; }
.ct-activity-row div { display: grid; gap: 2px; min-width: 0; }
.ct-activity-row strong { color: #234b31; font-size: 12px; }
.ct-activity-row small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .ct-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ct-hero, .ct-main-grid, .ct-main-grid.lower { grid-template-columns: 1fr; flex-direction: column; }
  .ct-hero-meta { justify-items: start; }
  .ct-tracking-grid { grid-template-columns: 1fr; }
  .ct-driver-track-list { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-health-grid, .ct-pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ct-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-action-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .ct-action-row .ct-inline-action { grid-column: 2 / -1; justify-self: start; }
  .ct-tracking-head-actions { justify-content: flex-start; }
  .ct-tracking-map, .ct-tracking-map-empty { min-height: 280px; height: 280px; }
  .ct-tracking-map-footer { display: grid; gap: 2px; }
  .ct-driver-track-list { grid-template-columns: 1fr; }
  .ct-health-grid, .ct-pulse-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MASTER / HQ PORTAL — BRIGHT — 2026-08-06
   Same treatment as the rest of the customer portal: the Master/HQ
   Control Tower (renderMasterPortal + its mp- / master- sub-views)
   was still hardcoded dark. Scoped to forest_canopy + #view-customer,
   same as everywhere else in this redesign.
   ============================================================ */
html[data-theme="forest_canopy"] #view-customer .mp-hero {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(95,191,63,.14), transparent 55%),
    radial-gradient(ellipse at 95% 110%, rgba(31,143,207,.08), transparent 50%),
    var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-theme="forest_canopy"] #view-customer .mp-hero-left .eyebrow { color: var(--sky); }
html[data-theme="forest_canopy"] #view-customer .mp-hero-left p { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .mp-hero-left small { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .mp-hero-kpi { background: #fff; border: 1px solid var(--line); }
html[data-theme="forest_canopy"] #view-customer .mp-hero-kpi span { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .mp-hero-kpi strong { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .mp-hero-kpi.teal strong { color: var(--lime); }
html[data-theme="forest_canopy"] #view-customer .mp-tabs button.active { background: var(--green); color: #fff; }

html[data-theme="forest_canopy"] #view-customer .master-hero,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero {
  background:
    radial-gradient(circle at 86% 12%, rgba(95,191,63,.16), transparent 34%),
    linear-gradient(135deg, var(--panel2), var(--panel));
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-theme="forest_canopy"] #view-customer .master-hero-copy p,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero p { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .master-hero-copy small,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero small { color: var(--muted); }
html[data-theme="forest_canopy"] #view-customer .master-tabs button.active { background: var(--green); color: #fff; }
html[data-theme="forest_canopy"] #view-customer .master-control-segment {
  background: var(--panel2);
  border: 1px solid var(--line);
}
html[data-theme="forest_canopy"] #view-customer .master-branch-portal-segment {
  background: color-mix(in srgb, var(--lime) 6%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line));
  box-shadow: none;
}
html[data-theme="forest_canopy"] #view-customer .master-segment-heading h2 { color: var(--ink); }
html[data-theme="forest_canopy"] #view-customer .master-branch-selector { background: var(--panel2); }
html[data-theme="forest_canopy"] #view-customer .master-goal-details summary { background: var(--green); color: #fff; }
html[data-theme="forest_canopy"] #view-customer .master-mission-filters button {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
html[data-theme="forest_canopy"] #view-customer .master-mission-filters button:hover {
  border-color: rgba(61,214,140,.4) !important;
  background: rgba(61,214,140,.1) !important;
  color: #1f8f5b !important;
}
html[data-theme="forest_canopy"] #view-customer .master-mission-filters button.active {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #fff !important;
}
html[data-theme="forest_canopy"] #view-customer .mc-recovery-grid line { stroke: rgba(20,30,24,.1); }
html[data-theme="forest_canopy"] #view-customer .mc-recovery-period { border-top: 1px solid var(--line); }
html[data-theme="forest_canopy"] #view-customer .mc-recovery-empty { border: 1px dashed var(--line); }
html[data-theme="forest_canopy"] #view-customer .mc-recovery-value { fill: #1f8f5b; stroke: #fff; }
html[data-theme="forest_canopy"] #view-customer .mc-recovery-point:hover .mc-recovery-value,
html[data-theme="forest_canopy"] #view-customer .mc-recovery-point:focus .mc-recovery-value { fill: #0f5c38; }

/* Recovery Process map — colorful accents so it isn't single-tone green. */
html[data-theme="forest_canopy"] #view-customer .material-flow-master-summary article:nth-child(1) { border-top: 3px solid var(--green); }
html[data-theme="forest_canopy"] #view-customer .material-flow-master-summary article:nth-child(2) { border-top: 3px solid var(--gold); }
html[data-theme="forest_canopy"] #view-customer .material-flow-master-summary article:nth-child(3) { border-top: 3px solid var(--sky); }
html[data-theme="forest_canopy"] #view-customer .material-flow-map-stages .material-flow-map-node:nth-child(1) .material-flow-map-node-icon { color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-map-stages .material-flow-map-node:nth-child(2) .material-flow-map-node-icon { color: var(--sky); background: color-mix(in srgb, var(--sky) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-map-stages .material-flow-map-node:nth-child(3) .material-flow-map-node-icon { color: var(--lime); background: color-mix(in srgb, var(--lime) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-material-picker-item:nth-child(4n+1) .material-flow-icon { color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-material-picker-item:nth-child(4n+2) .material-flow-icon { color: var(--sky); background: color-mix(in srgb, var(--sky) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-material-picker-item:nth-child(4n+3) .material-flow-icon { color: var(--lime); background: color-mix(in srgb, var(--lime) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-material-picker-item:nth-child(4n+4) .material-flow-icon { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-material-picker-item.is-disposal .material-flow-icon { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, var(--panel)); }
html[data-theme="forest_canopy"] #view-customer .material-flow-education-icon { color: #fff; border-radius: 10px; padding: 4px; }
html[data-theme="forest_canopy"] #view-customer .material-flow-education-grid article:nth-child(1) .material-flow-education-icon { background: var(--green); }
html[data-theme="forest_canopy"] #view-customer .material-flow-education-grid article:nth-child(2) .material-flow-education-icon { background: var(--sky); }
html[data-theme="forest_canopy"] #view-customer .material-flow-education-grid article:nth-child(3) .material-flow-education-icon { background: var(--gold); }

/* Admin Control Tower: the dashboard view is the single vertical scroll surface.
   The current dashboard renderer mounts .control-tower-dashboard directly (not
   inside the legacy .nd-dash wrapper), so keeping this view overflow-hidden
   clips everything below Operational flow. */
#view-dashboard.view.active {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 22px 36px;
  min-height: 0;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
}

#view-dashboard.view.active .control-tower-dashboard {
  min-height: max-content;
}

/* Keep analytics and audit tables on the same light SustainHub theme. */
#view-analytics.view.active {
  padding: 0;
  background: #fff;
}

#view-weight-slip .dashboard-audit-table th {
  background: rgba(20, 60, 30, .07) !important;
  color: #2b6842 !important;
  border-bottom-color: #cfe2d4 !important;
}

/* Emissions Factor controls: make the state-changing actions obvious and
   keep a visible result message when the API rejects a Draft activation. */
.ef-action-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 128px;
}
.ef-action-btn {
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.ef-action-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.ef-action-btn:disabled { cursor: wait; opacity: .58; transform: none; }
.ef-action-btn.primary {
  background: var(--green) !important;
  border: 1px solid var(--green) !important;
  color: #fff !important;
}
.ef-action-btn.secondary {
  background: color-mix(in srgb, var(--green) 8%, var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line)) !important;
  color: var(--green-dark) !important;
}
.ef-action-btn.danger {
  background: color-mix(in srgb, var(--red) 8%, var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--red) 32%, var(--line)) !important;
  color: var(--red) !important;
}
.ef-action-current {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.ef-status-message {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  min-height: 20px;
  font-size: 13px;
  font-weight: 700;
}
.ef-status-message.muted { color: var(--muted); }
.ef-source-matrix table { min-width: 1100px; }
.ef-source-matrix td { vertical-align: top; white-space: normal; line-height: 1.35; }
.ef-source-link { margin-top: 5px; font-weight: 700; }
.ef-source-link a { color: var(--green-dark); text-decoration: underline; }

/* Master recovery mission: executive scorecard layout.
   The previous split/diagonal treatment made the section feel like a poster
   and pushed the boundary metrics into a low-contrast second background. */
.master-mission-hero,
.master-mission-hero.amber,
.master-mission-hero.red,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero.amber,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero.red {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(500px, .94fr) !important;
  gap: 42px !important;
  align-items: center !important;
  padding: 34px 40px 0 !important;
  border: 1px solid #dbe7de !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #12331c !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(22, 67, 39, .06) !important;
}

.master-mission-hero > div:first-child,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero > div:first-child {
  color: #12331c !important;
  min-width: 0;
}

.master-mission-hero h2,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero h2 {
  margin: 8px 0 14px !important;
  max-width: none !important;
  font-size: clamp(32px, 3.2vw, 48px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  color: #12331c !important;
  text-shadow: none !important;
  white-space: nowrap;
}

.master-mission-hero h2 em,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero h2 em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #12331c !important;
  color: #12331c !important;
  font-style: normal;
}

.master-mission-hero .eyebrow,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .eyebrow {
  color: #2f9456 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
}

.master-mission-hero p,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero p {
  max-width: 62ch !important;
  margin: 0 !important;
  color: #405b49 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.master-mission-status {
  margin-top: 20px !important;
  gap: 12px !important;
}

.master-mission-status .pill {
  padding: 8px 13px !important;
  border: 1px solid #e4c16b !important;
  background: #fff5d7 !important;
  color: #80570a !important;
  font-size: 12px !important;
  letter-spacing: .04em;
}

.master-mission-hero .master-mission-status small,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-status small {
  color: #405b49 !important;
  font-size: 13px !important;
}

.master-mission-progress {
  max-width: none !important;
  margin-top: 30px !important;
  gap: 10px !important;
}

.master-mission-progress-label,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-progress-label {
  color: #12331c !important;
}

.master-mission-progress-label strong {
  font-size: 27px !important;
  letter-spacing: -.02em;
}

.master-mission-progress-label span,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-progress-label span {
  color: #2f9456 !important;
  font-size: 28px !important;
}

.master-mission-progress-label strong .master-mission-target,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-progress-label strong .master-mission-target {
  color: #718477 !important;
  font-size: inherit !important;
  font-weight: 500 !important;
}

.master-mission-progress-track {
  height: 18px !important;
  border: 0 !important;
  background: #e7ede9 !important;
  box-shadow: inset 0 0 0 1px #dbe5dd !important;
}

.master-mission-progress-track i {
  min-width: 0 !important;
  background: #2f9b57 !important;
}

.master-mission-progress small,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-progress small {
  color: #2f9456 !important;
  font-size: 13px !important;
}

.master-mission-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-content: center !important;
}

.master-mission-grid article,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-grid article {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 14px !important;
  align-items: center !important;
  min-height: 100px !important;
  padding: 16px 18px !important;
  border: 1px solid #dce8df !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #12331c !important;
  box-shadow: none !important;
}

.master-mission-grid article > .master-mission-metric-icon {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eaf6ed;
  color: #145d35;
  font-size: 23px;
}

.master-mission-grid span:not(.master-mission-metric-icon),
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-grid span:not(.master-mission-metric-icon) {
  display: block;
  color: #4b6856 !important;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.master-mission-grid strong,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-grid strong {
  display: block;
  margin-top: 5px;
  color: #12331c !important;
  font-size: 24px !important;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.master-mission-grid small,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-mission-grid small {
  grid-column: 2;
  display: block;
  margin-top: 4px;
  color: #587161 !important;
  font-size: 12px !important;
  font-weight: 700;
}

.master-boundary-strip {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 4px -40px 0 !important;
  padding: 24px 16px 26px !important;
  border-top: 1px solid #e2ebe4 !important;
}

.master-boundary-strip article,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-boundary-strip article {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 4px 24px !important;
  border: 0 !important;
  border-right: 1px solid #e2ebe4 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #12331c !important;
}

.master-boundary-strip article:last-child { border-right: 0 !important; }

.master-boundary-strip .master-boundary-icon {
  display: grid !important;
  place-items: center;
  grid-row: 1 / -1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eaf6ed;
  color: #145d35;
  font-family: 'Material Symbols Rounded';
  font-size: 21px;
}

.master-boundary-strip article > div > span,
.master-boundary-strip article > div > strong,
.master-boundary-strip article > div > small,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-boundary-strip span:not(.master-boundary-icon),
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-boundary-strip strong,
html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-boundary-strip small {
  display: block;
  color: #12331c !important;
}

.master-boundary-strip article > div > span {
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.master-boundary-strip article > div > strong {
  margin-top: 5px;
  font-size: 21px;
}

.master-boundary-strip article > div > small {
  margin-top: 3px;
  color: #587161 !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 1120px) {
  .master-mission-hero,
  .master-mission-hero.amber,
  .master-mission-hero.red,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero.amber,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero.red {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .master-mission-hero h2,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero h2 { white-space: normal !important; }
  .master-boundary-strip { grid-row: 3 !important; }
}

@media (max-width: 900px) {
  .master-boundary-strip,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero .master-boundary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .master-boundary-strip article { padding-inline: 12px !important; }
  .master-boundary-strip article:nth-child(2) { border-right: 0 !important; }
  .master-boundary-strip article:nth-child(-n+2) { border-bottom: 1px solid #e2ebe4 !important; }
}

@media (max-width: 680px) {
  .master-mission-hero,
  .master-mission-hero.amber,
  .master-mission-hero.red,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero.amber,
  html[data-theme="forest_canopy"] #view-customer .master-mission-hero.red {
    padding: 24px 20px 0 !important;
  }
  .master-mission-grid { grid-template-columns: 1fr !important; }
  .master-boundary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 4px -20px 0 !important;
    padding-inline: 8px !important;
  }
  .master-boundary-strip article { padding-inline: 12px !important; }
  .master-boundary-strip article:nth-child(2) { border-right: 0 !important; }
  .master-boundary-strip article:nth-child(-n+2) { border-bottom: 1px solid #e2ebe4 !important; }
}

/* SustainHub V1 account profile refresh — compact, role-aware and bilingual. */
.profile-shell { display: grid; gap: 12px; color: var(--ink); }
/* Drawers must stay above the workspace hydration veil. Otherwise a slow or
   failed state request can visually cover the Profile panel and make it look
   like the panel opened only partially. */
#detailDrawerOverlay { position: fixed; isolation: isolate; z-index: 2000 !important; }
#detailDrawerOverlay #detailDrawer { position: relative; z-index: 1; }
.profile-shell .profile-drawer-head { margin: 0; }
.profile-identity-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.profile-identity-copy { min-width: 0; display: grid; gap: 3px; }
.profile-identity-copy h3 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.15; }
.profile-identity-copy p, .profile-identity-copy small { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.profile-identity-copy small { font-size: 11px; }
.profile-identity-topline { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.profile-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e52; box-shadow: 0 0 0 3px rgba(46,158,82,.12); }
.profile-status-dot.bad { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.profile-preference-grid label { display: grid; gap: 5px; }
.profile-preference-grid label > span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.profile-preference-grid select, .profile-preference-grid input { min-height: 36px; }
.profile-first-activation { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(191,145,29,.35); border-left: 4px solid #c49523; border-radius: 12px; background: rgba(255,248,221,.7); color: #704f0c; }
.profile-first-activation span { font-size: 12px; color: #89691f; }
.profile-sec { margin-top: 0; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.profile-sec-title { color: var(--muted); }
.profile-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.profile-section-heading { cursor: pointer; }
.profile-section-heading > div { min-width: 0; }
.profile-collapse-toggle { flex: 0 0 auto; min-width: 62px; padding: 6px 9px; font-size: 10px; }
.profile-collapsible.is-collapsed { gap: 0; }
.profile-collapsible.is-collapsed > :not(.profile-section-heading) { display: none; }
.profile-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.profile-readonly-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; }
.profile-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-info-item { display: grid; gap: 4px; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 88%, var(--soft)); }
.profile-info-item span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.profile-info-item strong { color: var(--ink); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.profile-info-item.is-good strong { color: #2e9e52; }
.profile-info-item.is-bad strong { color: #c0392b; }
.profile-info-item.is-warn strong { color: #9a6b10; }
.profile-permission-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 10px 11px; border-radius: 10px; background: rgba(46,158,82,.08); color: var(--ink); }
.profile-permission-note .material-symbols-rounded { color: #2e9e52; font-size: 18px; }
.profile-permission-note strong { font-size: 12px; }
.profile-permission-note p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-edit-grid label { min-width: 0; }
.profile-edit-grid input[readonly], .profile-preference-grid input[readonly] { opacity: .9; cursor: default; }
.profile-edit-grid label > strong { min-height: 38px; display: flex; align-items: center; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--panel) 88%, var(--soft)); font-size: 13px; }
.profile-password-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.profile-preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-activity-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.profile-activity-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; }
.profile-activity-list li strong { font-size: 12px; color: var(--ink); }
.profile-activity-list li span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.profile-empty-state { color: var(--muted); font-size: 12px; }
.profile-save-message { min-height: 20px; padding: 0 2px; font-size: 12px; }
.profile-action-bar { position: sticky; bottom: -14px; z-index: 2; display: flex; justify-content: flex-end; padding: 12px 0 0; background: linear-gradient(180deg, transparent, var(--panel) 34%); }
.profile-action-bar button { min-width: 150px; }
.profile-session-action { display: flex; justify-content: flex-end; padding-top: 2px; }
.profile-session-action .logout-outline {
  min-width: 140px;
  background: transparent !important;
  border-color: #c2410c !important;
  color: #9a3412 !important;
}
.profile-session-action .logout-outline:hover {
  background: #fff7ed !important;
  border-color: #9a3412 !important;
  color: #7c2d12 !important;
}
.profile-session-action .logout-outline:focus-visible { outline: 3px solid rgba(194,65,12,.2); outline-offset: 2px; }
html[data-theme="carbon_dark"] .profile-session-action .logout-outline { color: #fb923c !important; }
html[data-theme="carbon_dark"] .profile-session-action .logout-outline:hover { background: rgba(194,65,12,.12) !important; border-color: #ea580c !important; color: #fdba74 !important; }
#drawerBody .profile-session-action .logout-outline {
  background: transparent !important;
  border: 1px solid #c2410c !important;
  color: #fb923c !important;
}
#drawerBody .profile-session-action .logout-outline:hover { background: rgba(194,65,12,.12) !important; border-color: #ea580c !important; color: #fdba74 !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-session-action .logout-outline { background: transparent !important; border: 1px solid #c2410c !important; color: #9a3412 !important; }
html[data-theme="forest_canopy"] #drawerBody .profile-session-action .logout-outline:hover { background: #fff7ed !important; border-color: #9a3412 !important; color: #7c2d12 !important; }

html[data-theme="forest_canopy"] .profile-shell { color: #12331c; }
html[data-theme="forest_canopy"] .profile-identity-card,
html[data-theme="forest_canopy"] .profile-sec { background: #fbfdf9; border-color: rgba(20,60,30,.13); }
html[data-theme="forest_canopy"] .profile-info-item,
html[data-theme="forest_canopy"] .profile-edit-grid label > strong { background: #f4faf3; border-color: rgba(20,60,30,.12); }
html[data-theme="forest_canopy"] .profile-info-item strong,
html[data-theme="forest_canopy"] .profile-edit-grid label > strong,
html[data-theme="forest_canopy"] .profile-identity-copy h3,
html[data-theme="forest_canopy"] .profile-activity-list li strong { color: #12331c; }
html[data-theme="forest_canopy"] .profile-info-item.is-good strong { color: #1f8f4d; }
html[data-theme="forest_canopy"] .profile-info-item.is-warn strong { color: #946b11; }
html[data-theme="forest_canopy"] .profile-action-bar { background: linear-gradient(180deg, transparent, #fbfdf9 34%); }

@media (max-width: 700px) {
  .profile-identity-card { grid-template-columns: auto minmax(0, 1fr); }
  .profile-info-grid, .profile-edit-grid, .profile-password-grid, .profile-preference-grid { grid-template-columns: 1fr; }
  .profile-section-heading { display: grid; }
  .profile-readonly-badge { justify-self: start; }
  .profile-activity-list li { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Reward / AGP marketplace */
.reward-page { display: grid; gap: 18px; padding: 4px 0 40px; color: var(--ink); font-family: "DM Sans", Inter, "Segoe UI", Arial, sans-serif; }
.reward-hero { display: flex; justify-content: space-between; gap: 22px; align-items: stretch; padding: 28px; border-radius: 22px; color: #effff4; background: radial-gradient(circle at 85% 10%, rgba(131, 255, 177, .24), transparent 34%), linear-gradient(135deg, #0f4b2b, #0c2118 70%); box-shadow: 0 18px 45px rgba(14, 72, 40, .16); }
.reward-hero.master { background: radial-gradient(circle at 85% 10%, rgba(255, 205, 91, .22), transparent 34%), linear-gradient(135deg, #254a3a, #111c18 70%); }
.reward-hero.supplier { background: radial-gradient(circle at 85% 10%, rgba(117, 210, 255, .23), transparent 34%), linear-gradient(135deg, #153c52, #101c24 70%); }
.reward-hero h2 { margin: 5px 0 8px; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.04em; }
.reward-hero p { max-width: 660px; margin: 0; color: rgba(239, 255, 244, .76); line-height: 1.55; }
.reward-hero .eyebrow { color: #aef7c3; }
.reward-wallet-hero { min-width: 190px; align-self: center; padding: 18px; border: 1px solid rgba(186, 255, 207, .25); border-radius: 16px; background: rgba(0, 0, 0, .18); display: grid; gap: 4px; }
.reward-wallet-hero span, .reward-wallet-hero small { color: rgba(239, 255, 244, .68); }
.reward-wallet-hero strong { font-size: 28px; letter-spacing: -.04em; }
.reward-wallet-hero.locked strong { color: #ffd88a; }
.reward-wallet-hero.supplier strong { color: #9de2ff; }
.reward-wallet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reward-wallet-grid article { min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); display: grid; align-content: center; gap: 5px; box-shadow: var(--shadow); }
.reward-wallet-grid article span { color: var(--muted); font-size: 12px; }
.reward-wallet-grid article strong { color: var(--ink); font-size: 23px; font-weight: 850; letter-spacing: -.035em; }
.reward-wallet-grid article.current { border-color: rgba(31, 143, 77, .45); background: rgba(31, 143, 77, .08); }
.reward-rules-panel { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.reward-rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.reward-rate-grid article { padding: 13px; border-radius: 12px; background: var(--soft); display: grid; gap: 4px; }
.reward-rate-grid article span, .reward-rate-grid article small { color: var(--muted); }
.reward-rate-grid article strong { font-size: 20px; color: var(--green); }
.reward-rate-grid article.deduction strong { color: var(--red); }
.reward-shop-section, .reward-history { display: grid; gap: 12px; }
.reward-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reward-product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); display: grid; }
.reward-product-card.is-sold-out { opacity: .64; }
.reward-product-image { width: 100%; height: 180px; object-fit: cover; background: linear-gradient(135deg, rgba(31, 143, 77, .16), rgba(15, 75, 43, .06)); }
.reward-product-placeholder { display: grid; place-items: center; color: var(--green); font-size: 42px; }
.reward-product-body { padding: 16px; display: grid; gap: 8px; }
.reward-product-category { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.reward-product-body h3 { margin: 0; font-size: 18px; }
.reward-product-body p { min-height: 42px; margin: 0; color: var(--muted); line-height: 1.45; }
.reward-product-meta, .reward-product-action { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.reward-product-meta strong { color: var(--green); font-size: 18px; }
.reward-product-meta span { color: var(--muted); font-size: 12px; }
.reward-product-action label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.reward-product-action input { width: 64px; padding: 8px; }
.reward-product-action button { padding: 9px 11px; }
.reward-policy-callout { display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border-left: 4px solid #c49a3a; border-radius: 10px; background: rgba(196, 154, 58, .1); }
.reward-policy-callout strong { color: #8a6517; }
.reward-policy-callout span { color: var(--muted); line-height: 1.45; }
.reward-mini-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reward-mini-product { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.reward-mini-image { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex: 0 0 58px; }
.reward-mini-product > div { display: grid; gap: 3px; min-width: 0; }
.reward-mini-product strong, .reward-mini-product span, .reward-mini-product small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-mini-product span { color: var(--green); font-size: 12px; }
.reward-loading { min-height: 180px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.reward-table-image { width: 54px; height: 44px; border-radius: 8px; object-fit: cover; }
.reward-product-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.reward-product-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.reward-product-form .reward-product-description { grid-column: span 2; }
.reward-product-form > button { min-height: 42px; }
.reward-product-form > span { align-self: center; }
.supplier-page .panel { padding: 18px; }
html[data-theme="carbon_dark"] .reward-product-card,
html[data-theme="carbon_dark"] .reward-rules-panel,
html[data-theme="carbon_dark"] .reward-wallet-grid article { background: #171b19; border-color: rgba(207, 239, 218, .12); }
html[data-theme="carbon_dark"] .reward-rate-grid article,
html[data-theme="carbon_dark"] .reward-mini-product { background: rgba(255, 255, 255, .045); }
html[data-theme="carbon_dark"] .reward-product-form input,
html[data-theme="carbon_dark"] .reward-product-form select,
html[data-theme="carbon_dark"] .reward-product-form textarea { background: #111513; color: #eafff0; border-color: rgba(207, 239, 218, .18); }
html[data-theme="forest_canopy"] .reward-page { color: #12331c; }
html[data-theme="forest_canopy"] .reward-page .reward-wallet-grid article,
html[data-theme="forest_canopy"] .reward-page .reward-product-card,
html[data-theme="forest_canopy"] .reward-page .reward-rules-panel,
html[data-theme="forest_canopy"] .reward-page .reward-history { background: #fbfdf9; border-color: rgba(20, 60, 30, .13); }
html[data-theme="forest_canopy"] .reward-page .reward-wallet-grid article strong,
html[data-theme="forest_canopy"] .reward-page .reward-product-body h3,
html[data-theme="forest_canopy"] .reward-page .reward-rules-panel h3,
html[data-theme="forest_canopy"] .reward-page .reward-history h2 { color: #12331c; }
html[data-theme="forest_canopy"] .reward-page .reward-rate-grid article,
html[data-theme="forest_canopy"] .reward-page .reward-mini-product { background: #eef5ee; }
#view-customer .reward-hero h2 { color: #effff4; }
@media (max-width: 980px) {
  .reward-product-grid, .reward-mini-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-wallet-grid, .reward-rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-product-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .reward-hero { display: grid; padding: 20px; }
  .reward-wallet-hero { min-width: 0; }
  .reward-product-grid, .reward-mini-products, .reward-wallet-grid, .reward-rate-grid, .reward-product-form { grid-template-columns: 1fr; }
  .reward-product-form .reward-product-description { grid-column: auto; }
  .reward-product-action { align-items: stretch; flex-direction: column; }
  .reward-product-action button { width: 100%; }
}

/* Reward storefront: customer-facing marketplace layout */
.reward-store-page { gap: 20px; padding-top: 0; }
.reward-store-intro { display: flex; justify-content: space-between; align-items: stretch; gap: 22px; padding: 24px 26px; border-radius: 20px; color: #effff4; background: radial-gradient(circle at 88% 12%, rgba(135, 255, 177, .22), transparent 30%), linear-gradient(135deg, #105332, #0d291b 72%); box-shadow: 0 16px 34px rgba(14, 72, 40, .13); }
.reward-store-intro h1 { margin: 6px 0 8px; color: #f7fff9; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; line-height: 1.02; }
.reward-store-intro p { max-width: 650px; margin: 0; color: rgba(239, 255, 244, .78); line-height: 1.5; }
.reward-store-intro .eyebrow { color: #aef7c3; }
.reward-store-header-wallet { min-width: 210px; align-self: center; display: grid; gap: 4px; padding: 16px 18px; border: 1px solid rgba(186, 255, 207, .28); border-radius: 15px; background: rgba(0, 0, 0, .18); }
.reward-store-header-wallet span, .reward-store-header-wallet small { color: rgba(239, 255, 244, .72); font-size: 12px; }
.reward-store-header-wallet strong { color: #f7fff9; font-size: 27px; letter-spacing: -.04em; }
.reward-partner-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; border: 1px solid rgba(31, 143, 77, .24); border-radius: 17px; background: linear-gradient(110deg, rgba(255, 255, 255, .9), rgba(232, 247, 235, .92)); box-shadow: 0 9px 22px rgba(20, 60, 30, .06); }
.reward-partner-cta h2 { margin: 4px 0 5px; color: #12331c; font-size: 21px; letter-spacing: -.03em; }
.reward-partner-cta p { max-width: 760px; margin: 0; color: #63776a; font-size: 12px; line-height: 1.5; }
.reward-partner-cta > button { flex: 0 0 auto; width: auto; min-height: 42px; padding: 10px 15px; white-space: nowrap; }
.reward-partner-modal-copy { display: grid; gap: 12px; color: var(--ink); line-height: 1.6; }
.reward-partner-modal-copy p { margin: 0; }
.reward-partner-modal-note { display: grid; gap: 3px; padding: 13px 15px; border-left: 3px solid #2e9e52; border-radius: 10px; background: rgba(46, 158, 82, .09); }
.reward-partner-modal-note strong { color: #1f7a3d; }
.reward-partner-modal-note span { color: var(--muted); }
.reward-store-layout { display: grid; grid-template-columns: minmax(0, 1fr) 284px; gap: 18px; align-items: start; }
.reward-store-main { min-width: 0; display: grid; gap: 14px; height: auto !important; overflow: visible !important; }
.reward-store-main, .reward-store-layout, .reward-shop-grid { align-content: start; }
.reward-store-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.reward-store-section-heading h2 { margin: 4px 0 5px; color: #12331c; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.035em; }
.reward-store-section-heading p { margin: 0; }
.reward-product-count { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(31, 143, 77, .22); border-radius: 999px; color: #217b42; background: rgba(31, 143, 77, .07); font-size: 11px; font-weight: 850; white-space: nowrap; }
.reward-store-toolbar { display: grid; gap: 11px; padding: 13px; border: 1px solid rgba(20, 60, 30, .11); border-radius: 15px; background: rgba(255, 255, 255, .55); }
.reward-store-search { max-width: 460px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(20, 60, 30, .15); border-radius: 11px; background: #fff; color: #277b46; }
.reward-store-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #12331c; font: inherit; }
.reward-store-search input::placeholder { color: #809489; }
.reward-category-list { display: flex; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 7px; }
.reward-category-chip { flex: 0 0 auto; width: auto; height: 34px !important; min-height: 34px !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid rgba(20, 60, 30, .16); border-radius: 999px; color: #315b3c; background: #fff; font-size: 11px; font-weight: 850; line-height: 1; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.reward-category-chip:hover { border-color: rgba(31, 143, 77, .5); color: #1f8f4d; transform: translateY(-1px); }
.reward-category-chip.active { border-color: #1f8f4d; color: #fff; background: #1f8f4d; box-shadow: 0 5px 12px rgba(31, 143, 77, .18); }
.reward-shop-grid { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 15px; height: auto !important; max-height: none !important; overflow: visible !important; }
.reward-store-card { flex: 0 0 calc((100% - 30px) / 3); min-width: 0; height: auto !important; min-height: 0 !important; align-self: flex-start; overflow: visible; border: 1px solid rgba(20, 60, 30, .13); border-radius: 17px; background: #fff; box-shadow: 0 9px 22px rgba(20, 60, 30, .08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.reward-store-card:hover { border-color: rgba(31, 143, 77, .35); box-shadow: 0 14px 28px rgba(20, 60, 30, .13); transform: translateY(-2px); }
.reward-store-card.is-sold-out { opacity: .7; }
.reward-store-card-media { position: relative; overflow: hidden; border-radius: 16px 16px 0 0; background: #edf5ed; }
.reward-store-card-image { display: block; width: 100%; height: 188px; object-fit: cover; }
.reward-store-card-media .reward-product-placeholder { display: grid; place-items: center; height: 188px; color: #27854a; font-size: 42px; }
.reward-product-demo, .reward-stock-badge { position: absolute; top: 11px; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 1; }
.reward-product-demo { left: 11px; color: #225c35; background: rgba(238, 255, 243, .94); }
.reward-stock-badge { right: 11px; color: #225c35; background: rgba(255, 255, 255, .92); }
.reward-stock-badge.sold-out { color: #9b3126; background: rgba(255, 239, 237, .95); }
.reward-store-card-body { min-height: 255px; height: auto !important; display: grid; align-content: start; gap: 9px; padding: 15px; overflow: visible; }
.reward-store-card-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.reward-product-category { overflow: hidden; color: #1f8f4d; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.reward-supplier-name { overflow: hidden; color: #8a9b8e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reward-store-card h3 { min-height: 42px; margin: 0; color: #12331c; font-size: 18px; letter-spacing: -.025em; line-height: 1.16; }
.reward-detail-link { width: fit-content; min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: #1f8f4d; background: transparent; font-size: 11px; font-weight: 900; line-height: 1; }
.reward-detail-link:hover { color: #126b36; text-decoration: underline; }
.reward-detail-link .material-symbols-rounded { font-size: 16px; }
.reward-store-card p { min-height: 53px; margin: 0; color: #63776a; font-size: 12px; line-height: 1.48; }
.reward-store-price-row { display: flex; align-items: baseline; gap: 6px; padding-top: 3px; }
.reward-store-price-row strong { color: #138548; font-size: 19px; letter-spacing: -.035em; }
.reward-store-price-row span { color: #84968a; font-size: 10px; }
.reward-store-buy { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: end; }
.reward-store-buy label { display: grid; gap: 4px; color: #718477; font-size: 10px; font-weight: 850; }
.reward-store-buy input { width: 100%; padding: 9px 7px; border: 1px solid rgba(20, 60, 30, .16); border-radius: 9px; color: #12331c; background: #f7faf6; font: inherit; }
.reward-store-buy button { min-height: 38px; display: inline-flex; justify-content: center; align-items: center; gap: 5px; padding: 8px 10px; border: 0; border-radius: 9px; color: #fff; background: #1f8f4d; font-size: 11px; font-weight: 900; cursor: pointer; }
.reward-store-buy button:hover { background: #16783d; }
.reward-store-buy button:disabled { cursor: not-allowed; opacity: .58; }
.reward-store-buy button .material-symbols-rounded { font-size: 16px; }
.reward-sold-out-copy { grid-column: 1 / -1; padding: 10px 0 2px; color: #9b6b67; font-size: 11px; }
.reward-store-sidebar { position: sticky; top: 16px; display: grid; gap: 13px; }
.reward-store-wallet-card, .reward-store-note { padding: 18px; border: 1px solid rgba(20, 60, 30, .13); border-radius: 16px; background: #fff; box-shadow: 0 9px 22px rgba(20, 60, 30, .07); }
.reward-store-wallet-card { display: grid; gap: 6px; }
.reward-store-wallet-card > strong { color: #12331c; font-size: 28px; letter-spacing: -.04em; }
.reward-store-wallet-card > small { color: #6e8374; font-size: 11px; }
.reward-store-wallet-card dl { display: grid; gap: 9px; margin: 12px 0 7px; padding-top: 12px; border-top: 1px solid rgba(20, 60, 30, .1); }
.reward-store-wallet-card dl div { display: flex; justify-content: space-between; gap: 10px; }
.reward-store-wallet-card dt, .reward-store-wallet-card dd { font-size: 11px; }
.reward-store-wallet-card dt { color: #789083; }
.reward-store-wallet-card dd { margin: 0; color: #305b3d; font-weight: 850; }
.reward-store-wallet-card p { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 13px; color: #718477; font-size: 11px; line-height: 1.45; }
.reward-store-wallet-card p .material-symbols-rounded { flex: 0 0 auto; color: #1f8f4d; font-size: 16px; }
.reward-orders-link { display: flex; justify-content: space-between; align-items: center; padding: 10px 11px; border-radius: 9px; color: #fff; background: #123d28; font-size: 11px; font-weight: 850; text-decoration: none; }
.reward-orders-link:hover { background: #1f8f4d; }
.reward-store-note { display: grid; gap: 6px; background: #eef5ee; }
.reward-store-note strong { color: #12331c; font-size: 15px; }
.reward-store-note p { margin: 0; color: #657a6b; font-size: 11px; line-height: 1.5; }
.reward-store-empty { grid-column: 1 / -1; min-height: 210px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 28px; border: 1px dashed rgba(31, 143, 77, .35); border-radius: 16px; color: #6f8375; background: rgba(255, 255, 255, .48); text-align: center; }
.reward-store-empty .material-symbols-rounded { color: #27854a; font-size: 34px; }
.reward-store-empty strong { color: #234a30; }
.reward-rules-compact { overflow: hidden; border: 1px solid rgba(20, 60, 30, .13); border-radius: 15px; background: #fff; }
.reward-rules-compact > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 17px; color: #12331c; font-size: 13px; font-weight: 900; cursor: pointer; list-style: none; }
.reward-rules-compact > summary::-webkit-details-marker { display: none; }
.reward-rules-compact > summary > span { display: inline-flex; align-items: center; gap: 7px; }
.reward-rules-compact > summary .material-symbols-rounded { color: #1f8f4d; font-size: 18px; }
.reward-rules-compact > summary small { color: #6e8374; font-size: 11px; font-weight: 750; }
.reward-rules-compact[open] > summary { border-bottom: 1px solid rgba(20, 60, 30, .1); }
.reward-rules-compact .reward-rules-panel { border: 0; border-radius: 0; box-shadow: none; }
.reward-detail-layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.reward-detail-media { overflow: hidden; border: 1px solid rgba(20, 60, 30, .12); border-radius: 15px; background: #edf5ed; }
.reward-detail-image { display: block; width: 100%; max-height: 390px; aspect-ratio: 1 / 1; object-fit: cover; }
.reward-detail-copy { display: grid; align-content: start; gap: 12px; }
.reward-detail-copy h3 { margin: 0; color: #12331c; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; line-height: 1.05; }
.reward-detail-copy > p { margin: 0; color: #63776a; line-height: 1.55; }
.reward-product-demo-inline { width: fit-content; padding: 5px 8px; border-radius: 999px; color: #225c35; background: #e8f7eb; font-size: 10px; font-weight: 900; }
.reward-detail-price { display: flex; align-items: baseline; gap: 7px; padding-top: 4px; }
.reward-detail-price strong { color: #138548; font-size: 26px; letter-spacing: -.04em; }
.reward-detail-price span { color: #84968a; font-size: 11px; }
.reward-detail-meta { display: grid; gap: 8px; margin: 0; padding: 13px 0; border-top: 1px solid rgba(20, 60, 30, .1); border-bottom: 1px solid rgba(20, 60, 30, .1); }
.reward-detail-meta div { display: flex; justify-content: space-between; gap: 15px; }
.reward-detail-meta dt, .reward-detail-meta dd { font-size: 12px; }
.reward-detail-meta dt { color: #789083; }
.reward-detail-meta dd { margin: 0; color: #305b3d; font-weight: 850; text-align: right; }
.reward-detail-buy { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: end; }
.reward-detail-buy label { display: grid; gap: 5px; color: #718477; font-size: 11px; font-weight: 850; }
.reward-detail-buy input { width: 100%; padding: 10px 8px; }
.reward-detail-buy button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border-radius: 10px; background: #1f8f4d; color: #fff; font-size: 12px; font-weight: 900; }
.reward-detail-buy button:disabled { opacity: .55; }
.reward-detail-buy .material-symbols-rounded { font-size: 18px; }
html[data-theme="carbon_dark"] .reward-store-section-heading h2,
html[data-theme="carbon_dark"] .reward-store-card h3,
html[data-theme="carbon_dark"] .reward-store-wallet-card > strong,
html[data-theme="carbon_dark"] .reward-store-note strong,
html[data-theme="carbon_dark"] .reward-rules-compact > summary { color: #eafff0; }
html[data-theme="carbon_dark"] .reward-store-toolbar,
html[data-theme="carbon_dark"] .reward-store-card,
html[data-theme="carbon_dark"] .reward-store-wallet-card,
html[data-theme="carbon_dark"] .reward-store-note,
html[data-theme="carbon_dark"] .reward-rules-compact { border-color: rgba(207, 239, 218, .14); background: #171b19; }
html[data-theme="carbon_dark"] .reward-store-search,
html[data-theme="carbon_dark"] .reward-category-chip { border-color: rgba(207, 239, 218, .18); color: #d6f2dd; background: #111513; }
html[data-theme="carbon_dark"] .reward-store-search input,
html[data-theme="carbon_dark"] .reward-store-buy input { color: #eafff0; }
html[data-theme="carbon_dark"] .reward-store-card p,
html[data-theme="carbon_dark"] .reward-store-note p { color: #a6bcae; }
html[data-theme="carbon_dark"] .reward-store-buy input { border-color: rgba(207, 239, 218, .18); background: #111513; }
html[data-theme="carbon_dark"] .reward-store-empty { color: #a6bcae; background: rgba(255, 255, 255, .03); }
html[data-theme="carbon_dark"] .reward-detail-copy h3,
html[data-theme="carbon_dark"] .reward-detail-meta dd { color: #eafff0; }
html[data-theme="carbon_dark"] .reward-detail-copy > p,
html[data-theme="carbon_dark"] .reward-detail-meta dt { color: #a6bcae; }
html[data-theme="carbon_dark"] .reward-detail-media { border-color: rgba(207, 239, 218, .14); background: #111513; }
html[data-theme="carbon_dark"] .reward-partner-cta { border-color: rgba(131, 255, 177, .26); background: linear-gradient(110deg, rgba(24, 42, 31, .95), rgba(19, 55, 34, .9)); }
html[data-theme="carbon_dark"] .reward-partner-cta h2,
html[data-theme="carbon_dark"] .reward-partner-modal-note strong { color: #eafff0; }
html[data-theme="carbon_dark"] .reward-partner-cta p,
html[data-theme="carbon_dark"] .reward-partner-modal-copy,
html[data-theme="carbon_dark"] .reward-partner-modal-note span { color: #a6bcae; }
@media (max-width: 1180px) {
  .reward-store-card { flex-basis: calc((100% - 15px) / 2); }
}
@media (max-width: 820px) {
  .reward-store-layout { grid-template-columns: 1fr; }
  .reward-store-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-store-note { align-content: center; }
}
@media (max-width: 650px) {
  .reward-store-intro { display: grid; padding: 20px; }
  .reward-partner-cta { align-items: stretch; flex-direction: column; padding: 17px; }
  .reward-partner-cta > button { width: 100%; white-space: normal; }
  .reward-store-header-wallet { min-width: 0; }
  .reward-store-section-heading { display: grid; align-items: start; }
  .reward-store-toolbar { padding: 10px; }
  .reward-store-card { flex-basis: 100%; }
  .reward-store-card-image, .reward-store-card-media .reward-product-placeholder { height: 210px; }
  .reward-rules-compact > summary { align-items: flex-start; }
  .reward-rules-compact > summary small { display: none; }
  .reward-detail-layout { grid-template-columns: 1fr; gap: 16px; }
  .reward-detail-image { max-height: 270px; }
}

/* Reward marketplace — story-led catalogue layout (category rail + card grid + wallet rail) */
.reward-story-shop { gap: 20px; }
.rsc-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.rsc-pagehead h1 { margin: 5px 0 7px; color: #12331c; font-size: clamp(23px, 2.4vw, 31px); letter-spacing: -.035em; }
.rsc-pagehead p { margin: 0; max-width: 56ch; color: #63776a; font-size: 12.5px; line-height: 1.55; }
.rsc-pagehead .reward-store-search { flex: 0 0 auto; width: 300px; max-width: 100%; }
.rsc-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr) 284px; gap: 18px; align-items: start; }
.rsc-sidebar { position: sticky; top: 16px; display: grid; gap: 10px; padding: 16px 13px; border: 1px solid rgba(20, 60, 30, .13); border-radius: 16px; background: #fff; box-shadow: 0 9px 22px rgba(20, 60, 30, .06); }
.rsc-side-label { margin: 0; color: #789083; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.rsc-filter-list { display: grid; gap: 3px; }
.rsc-filter-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 0; border-radius: 9px; background: transparent; color: #315b3c; font-size: 12.5px; font-weight: 750; text-align: left; cursor: pointer; }
.rsc-filter-item:hover { background: #f2f8f2; }
.rsc-filter-item .n { color: #84968a; font-size: 11px; font-variant-numeric: tabular-nums; }
.rsc-filter-item.active { background: rgba(31, 143, 77, .12); color: #12331c; font-weight: 900; }
.rsc-filter-item.active .n { color: #1f8f4d; }
.rsc-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
.rsc-main-head { display: flex; justify-content: flex-end; }
.rsc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rsc-card { display: flex; flex-direction: column; border: 1px solid rgba(20, 60, 30, .13); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(20, 60, 30, .06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rsc-card:hover { border-color: rgba(31, 143, 77, .35); box-shadow: 0 10px 20px rgba(20, 60, 30, .1); transform: translateY(-2px); }
.rsc-card.is-sold-out { opacity: .72; }
.rsc-card .reward-store-card-media { height: 118px; }
.rsc-card .reward-store-card-image,
.rsc-card .reward-store-card-media .reward-product-placeholder { height: 118px; }
.rsc-card .reward-product-demo, .rsc-card .reward-stock-badge { top: 8px; padding: 3px 7px; font-size: 9px; }
.rsc-card-body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 10px 11px 11px; }
.rsc-card-body h3 { margin: 0; color: #12331c; font-size: 13.5px; letter-spacing: -.015em; line-height: 1.2; }
.rsc-card .reward-detail-link { font-size: 10px; }
.rsc-card .reward-detail-link .material-symbols-rounded { font-size: 14px; }
.rsc-story { margin: 0; padding-left: 8px; border-left: 2px solid rgba(31, 143, 77, .35); color: #3c5548; font-size: 11px; line-height: 1.45; display: grid; gap: 3px; }
.rsc-story .eyebrow { font-size: 9.5px; }
.rsc-bottom-row { margin-top: auto; display: grid; gap: 6px; padding-top: 2px; }
.rsc-card .reward-store-price-row strong { font-size: 14.5px; }
.rsc-card .reward-store-price-row span { font-size: 9px; }
.rsc-card .reward-store-buy { grid-template-columns: 48px minmax(0, 1fr); gap: 6px; }
.rsc-card .reward-store-buy label { font-size: 9px; gap: 2px; }
.rsc-card .reward-store-buy input { padding: 6px 5px; }
.rsc-card .reward-store-buy button { min-height: 30px; font-size: 10px; padding: 6px 7px; }
.rsc-card .reward-store-buy button .material-symbols-rounded { font-size: 13px; }
.rsc-partner-slot .reward-partner-cta { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px 16px; border-radius: 14px; }
.rsc-partner-slot .reward-partner-cta h2 { font-size: 15px; }
.rsc-partner-slot .reward-partner-cta p { font-size: 11px; }
.rsc-partner-slot .reward-partner-cta > button { width: 100%; }
html[data-theme="carbon_dark"] .rsc-pagehead h1,
html[data-theme="carbon_dark"] .rsc-card-body h3,
html[data-theme="carbon_dark"] .rsc-filter-item.active { color: #eafff0; }
html[data-theme="carbon_dark"] .rsc-pagehead p,
html[data-theme="carbon_dark"] .rsc-story { color: #a6bcae; }
html[data-theme="carbon_dark"] .rsc-sidebar,
html[data-theme="carbon_dark"] .rsc-card { border-color: rgba(207, 239, 218, .14); background: #171b19; }
html[data-theme="carbon_dark"] .rsc-filter-item { color: #d6f2dd; }
html[data-theme="carbon_dark"] .rsc-filter-item:hover { background: rgba(255, 255, 255, .05); }
html[data-theme="carbon_dark"] .rsc-filter-item.active { background: rgba(79, 175, 116, .18); }
html[data-theme="carbon_dark"] .rsc-story { border-left-color: rgba(79, 175, 116, .4); }
@media (max-width: 1180px) {
  .rsc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rsc-shell { grid-template-columns: 1fr; }
  .rsc-sidebar { position: static; display: flex; flex-direction: row; overflow-x: auto; gap: 8px; }
  .rsc-filter-list { display: flex; flex-direction: row; gap: 8px; }
  .rsc-filter-item { flex: 0 0 auto; }
  .rsc-side-label { display: none; }
}
@media (max-width: 650px) {
  .rsc-pagehead { display: grid; }
  .rsc-pagehead .reward-store-search { width: 100%; }
  .rsc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GLOBAL RESPONSIVE LAYOUT SYSTEM
   One shared phone/tablet layer for Admin, Manager, Customer and Master.
   Keep this block last so legacy component-specific media rules cannot
   re-introduce fixed columns, clipped drawers or horizontal page overflow.
   ============================================================ */
html, body { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
main, .view, .view.active, .client-shell, .client-portal, .master-shell, .master-content,
.panel, .nested-panel, .mgr-detail, .sort-detail, .rsc-main { min-width: 0; }
.table-wrap, .data-grid, .reward-admin-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }

@media (max-width: 1024px) {
  /* Manager/Admin navigation becomes a compact top navigation instead of a
     52px icon rail that hides labels and pushes content off-screen. */
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 100dvh;
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100%;
    height: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 40;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .brand {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    border-bottom: 0;
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .brand strong,
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .brand small { display: block; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    min-height: 45px;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar nav button {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    padding: 8px 10px;
    justify-content: flex-start;
    font-size: 12px;
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar nav button .nav-count,
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar nav button .nav-caret { display: inline-flex; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .nav-section-label { display: none; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .nav-group { flex: 0 0 auto; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .nav-menu { position: fixed; top: 98px; left: 10px; right: 10px; max-height: 55vh; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); z-index: 80; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .side-card {
    flex: 0 0 auto;
    order: 2;
    margin: 0;
    padding: 7px 9px;
    border-top: 0;
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    background: transparent;
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 98px);
    overflow: visible;
  }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .detail-rail { display: none !important; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .view,
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .view.active { overflow: visible; }

  .topbar { height: auto; min-height: 54px; padding: 10px 16px; flex-wrap: wrap; align-items: center; }
  .topbar > div:first-child { min-width: 150px; }
  .top-actions { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
  #storagePath { display: none; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 16px; }
  .view.active { padding: 16px; }
  .grid-4, .dashboard-kpi-grid, .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .material-grid, .scorecard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-grid, .dashboard-shell .dashboard-main-grid, .esg-workspace-grid, .approval-evidence-grid { grid-template-columns: 1fr; }
  .crm-layout, .work-layout { grid-template-columns: 1fr; }
  .form-grid, .labelled-form, .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-title { flex-wrap: wrap; }
  .panel-title > button, .panel-title > .button-link { max-width: 100%; }

  /* Manager mobile review is a queue-first layout: select a record above,
     then read and action the full review card below it. */
  .mgr-split, .sort-split { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .mgr-rail, .sort-rail { height: auto; max-height: none; }
  .mgr-rail-body, .sort-rail-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .mgr-detail, .sort-detail { height: auto; max-height: none; overflow: visible; padding-right: 0; }
  .mgr-detail-empty, .sort-detail-empty { min-height: 180px; }
  .appr-body { grid-template-columns: 1fr; }
  .appr-body-section:first-child { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .appr-metrics.operational-review-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appr-trip-evidence { margin-inline: 12px; }
  .appr-trip-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Reward catalogue/table surfaces retain data but become scroll-safe. */
  .rsc-shell { grid-template-columns: 1fr; }
  .rsc-sidebar { position: static; display: flex; flex-direction: row; overflow-x: auto; }
  .rsc-filter-list { display: flex; flex-direction: row; overflow: visible; }
  .rsc-filter-item { flex: 0 0 auto; }
  .rsc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-checkout-grid { grid-template-columns: 1fr; }
  .reward-admin-form, .reward-rule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tablet portal home uses a normal document flow. The former desktop
     orbit positions placed the two module rails over the content at 768px. */
  .portal-home { min-height: 100dvh; height: auto; display: flex; flex-direction: column; align-items: stretch; overflow: auto; padding: 88px 18px 26px; }
  .portal-home-orbit, .portal-home-bridge { display: none; }
  .portal-home-brand { position: static; order: 1; transform: none; margin: 0 auto 24px; }
  .portal-home-core { order: 2; width: 100%; margin: 0 auto 24px; }
  .portal-home-logo-wrap { width: 168px; height: 168px; }
  .portal-home-mark { width: 138px; height: 138px; }
  .portal-home-menu { display: none; position: static; inset: auto; transform: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
  .portal-home.menu-open .portal-home-menu { display: grid; opacity: 1; visibility: visible; pointer-events: auto; }
  .portal-home-menu-left, .portal-home-menu-right { order: 3; }
  .portal-home-module, .portal-home-menu-left .portal-home-module { min-width: 0; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left; flex-direction: row; }
  .portal-home-module small { display: block; font-size: 11px; line-height: 1.35; }
  .portal-home-footer { position: static; order: 4; margin-top: 14px; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
  .portal-top-controls { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .portal-section-controls { padding: 14px 18px 10px; }
  .portal-shell:has(.portal-section-controls) > .client-portal { padding: 0 18px 22px; }
}

@media (max-width: 760px) {
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .brand strong { font-size: 12px; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .brand small { font-size: 9px; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar .profile-chip strong { display: block; max-width: 100px; }
  .view.active { padding: 12px; }
  .topbar { padding: 10px 12px; }
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) main { padding-bottom: 0; }
  .topbar > div:first-child { flex: 1 1 100%; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .top-actions button { flex: 1 1 auto; min-height: 36px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 12px; }
  .grid-2, .grid-3, .grid-4, .material-grid, .material-list, .kpi-grid,
  .client-metrics, .client-steps, .client-branch-mission-grid, .dashboard-kpi-grid,
  .highlight-grid, .scorecard-grid, .claim-grid, .workflow-card-grid,
  .form-grid, .labelled-form, .compact-form, .reward-admin-form, .reward-rule-form,
  .reward-supplier-grid { grid-template-columns: 1fr; }
  .filter-bar, .esg-period-bar, .notification-filter, .trip-calendar-toolbar { grid-template-columns: 1fr !important; }
  .panel, .nested-panel { padding: 12px; }
  .panel-title { align-items: stretch; gap: 8px; }
  .panel-title > button, .panel-title > .button-link { width: 100%; min-width: 0; }
  .data-grid, .table-wrap, .reward-admin-table-wrap { overflow-x: auto; }
  .data-grid table, .reward-admin-table { min-width: 680px; }
  .drawer-overlay { justify-content: stretch; }
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer-head, .drawer-body { padding: 12px; }
  .center-modal-overlay { padding: 8px; place-items: stretch; }
  .center-modal { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); border-radius: 16px; }
  .center-modal-head, .center-modal-body { padding: 12px; }
  .portal-top-controls { position: relative; inset: auto; padding: 12px; gap: 10px; flex-wrap: wrap; }
  .portal-home-controls { position: absolute; top: 12px; left: 12px; right: 12px; padding: 0; }
  .portal-section-controls { padding: 12px; min-height: 0; }
  .portal-profile-wrap { flex-wrap: wrap; justify-content: flex-end; }
  .portal-shell:has(.portal-section-controls) > .client-portal { padding: 0 12px 18px; }
  .client-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .client-tabs button { flex: 0 0 auto; }

  /* Customer/Master home: remove desktop orbit positioning and turn the
     module menu into a normal, scrollable phone document. */
  .portal-home { min-height: 100dvh; height: auto; display: flex; flex-direction: column; align-items: stretch; overflow: auto; padding: 78px 12px 22px; }
  .portal-home-atmosphere, .portal-home-orbit, .portal-home-bridge { position: fixed; }
  .portal-home-orbit, .portal-home-bridge { display: none; }
  .portal-home-brand { position: static; order: 1; transform: none; margin: 0 auto 22px; }
  .portal-home-brand span { font-size: 24px; }
  .portal-home-core { order: 2; width: 100%; margin: 0 auto 20px; }
  .portal-home-logo-wrap { width: 140px; height: 140px; }
  .portal-home-mark { width: 116px; height: 116px; }
  .portal-home-core h1 { font-size: 28px; }
  .portal-home-core p { font-size: 12px; }
  .portal-home-menu { display: none; position: static; inset: auto; transform: none !important; grid-template-columns: 1fr; gap: 8px; margin: 0 0 8px; }
  .portal-home.menu-open .portal-home-menu { display: grid; opacity: 1; visibility: visible; pointer-events: auto; }
  .portal-home-menu-left, .portal-home-menu-right { order: 3; }
  .portal-home-module, .portal-home-menu-left .portal-home-module { width: 100%; min-width: 0; padding: 12px 14px; border-radius: 14px; text-align: left; flex-direction: row; }
  .portal-home-module i { width: 36px; height: 36px; flex: 0 0 36px; font-size: 18px; }
  .portal-home-module strong { font-size: 14px; }
  .portal-home-module small { display: block; font-size: 11px; line-height: 1.35; }
  .portal-home-footer { position: static; order: 4; margin-top: 14px; justify-content: center; flex-wrap: wrap; gap: 8px 14px; font-size: 8px; }

  /* Manager queue/detail cards fit the narrowest supported phone. */
  .mgr-rail-head, .sort-rail-head { padding: 12px; }
  .mgr-rail-body, .sort-rail-body { grid-template-columns: 1fr; padding: 6px; }
  .mgr-rail-item, .sort-rail-item { padding: 10px; }
  .appr-card-head { align-items: flex-start; flex-wrap: wrap; padding: 14px; }
  .appr-card-head-right { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
  .appr-metrics.operational-review-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appr-metric { padding: 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .appr-metric:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.06); }
  .appr-body-section { padding: 14px 12px; }
  .appr-mat-table { font-size: 11px; }
  .appr-mat-table th, .appr-mat-table td { padding: 5px 4px; }
  .appr-action-row { display: grid; grid-template-columns: 1fr; padding: 12px; }
  .appr-action-row input, .appr-action-row button { width: 100%; min-width: 0; }
  .appr-trip-evidence { margin-inline: 0; }
  .appr-trip-evidence-grid { grid-template-columns: 1fr; }

  .rsc-pagehead { display: grid; gap: 10px; }
  .rsc-pagehead h1 { font-size: 25px; }
  .rsc-pagehead .reward-store-search { width: 100%; }
  .rsc-grid { grid-template-columns: 1fr; }
  .rsc-card .reward-store-card-media, .rsc-card .reward-store-card-image,
  .rsc-card .reward-store-card-media .reward-product-placeholder { height: 170px; }
  .reward-floating-cart { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-width: 0; width: auto; justify-content: center; border-radius: 14px; }
  .reward-floating-cart-copy { min-width: 120px; }
  .reward-delivery-options { grid-template-columns: 1fr; }
  .reward-admin-form .reward-admin-span, .reward-rule-form .reward-admin-span { grid-column: auto; }
  .reward-admin-hero { display: grid; padding: 18px 16px; }
  .reward-admin-summary { min-width: 0; }
  .reward-cart-line { grid-template-columns: minmax(0, 1fr) auto 28px; gap: 6px; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .top-actions button { flex: 1 1 100%; }
  .portal-home { padding-inline: 10px; }
  .portal-home-controls { left: 10px; right: 10px; }
  .portal-profile-wrap { width: 100%; justify-content: space-between; }
  .portal-profile-button, .portal-logout-button { flex: 1 1 auto; justify-content: center; }
  .portal-notification-bell { flex: 0 0 36px; }
  .portal-home-core h1 { font-size: 24px; }
  .portal-home-logo-wrap { width: 122px; height: 122px; }
  .portal-home-mark { width: 102px; height: 102px; }
  .appr-metrics.operational-review-metrics { grid-template-columns: 1fr 1fr; }
  .appr-metric-val { font-size: 19px; }
  .reward-floating-cart { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-home-atmosphere, .portal-home-orbit, .portal-home-bridge,
  .portal-home-logo-wrap { animation: none !important; }
}

/* ============================================================
   RESPONSIVE SCROLL-CHAIN REPAIR
   Keep one deliberate scroll owner per role. The compact navigation uses
   the active view as its scroll surface; customer/master portal pages use
   the document flow so detail pages cannot be clipped by a 100vh main.
   ============================================================ */
@media (max-width: 1024px) {
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body:not([data-role="customer_view"]):not([data-role="customer_master"]) main {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .view,
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .view.active {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-role="customer_view"] .app-shell,
  body[data-role="customer_master"] .app-shell {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  html:has(body[data-role="customer_view"]),
  html:has(body[data-role="customer_master"]),
  body[data-role="customer_view"],
  body[data-role="customer_master"] {
    overflow-y: auto !important;
  }

  body[data-role="customer_view"],
  body[data-role="customer_master"] {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body[data-role="customer_view"] main,
  body[data-role="customer_master"] main {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-role="customer_view"] .view.active,
  body[data-role="customer_master"] .view.active {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ============================================================
   MOBILE PORTAL OVERRIDE V4
   Route header and Master pages. The Master portal uses mp-* classes
   rather than the older master-* shell classes, so both families must be
   constrained at the phone breakpoint.
   ============================================================ */
@media (max-width: 760px) {
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-controls {
    display: block !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-controls > span,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-controls > span {
    display: none !important;
  }

  /* Inner pages: Back + notification + Profile + Log out share one row. */
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls {
    display: grid !important;
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    min-height: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls .portal-back-button,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls .portal-back-button {
    grid-column: 1;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    padding-inline: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls .portal-profile-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls .portal-profile-wrap {
    grid-column: 2;
    grid-row: 1;
  }

  /* Actual Master pages are rendered with mp-* layouts. */
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-shell.portal-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 12px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-content,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-page,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-chart-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-workspace-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    gap: 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-left,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-status-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-target-numbers,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-donut-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-pie-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-chart-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-risk-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-league-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-report-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-risk-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-linebar-list,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-material-list,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-triplet,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-period-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-rules,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-form,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-form-stack,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-goal-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-form,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-challenges,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-kpis {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-copy h2,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading h2,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .branch-portal-heading h2 {
    max-width: none !important;
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-tabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-card,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-portal-segment,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-chart-card,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-risk-card,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-card-h,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-action-list article,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-action-item {
    grid-template-columns: minmax(0, 1fr) !important;
    display: grid !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-filter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-filter input,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-filter select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Tables scroll locally; the page itself remains fixed to the phone width. */
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .data-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-table table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .data-grid table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .table-wrap table {
    min-width: 560px;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-donut,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-pie,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-chart-card svg,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer canvas {
    max-width: 100% !important;
  }
}

@media (max-width: 360px) {
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding-inline: 8px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-profile-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-profile-wrap {
    gap: 5px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-profile-wrap > button,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-profile-wrap > button {
    padding-inline: 5px !important;
    font-size: 9px !important;
  }
}

/* ============================================================
   FOREST CANOPY DEFAULT — DRIVER LIGHT SURFACES
   Driver screens have intentionally specific dark-control-room rules above.
   Keep those rules available for Carbon Dark, but make the default theme
   consistent with the rest of the app when Forest Canopy is selected.
   ============================================================ */
html[data-theme="forest_canopy"] body[data-role="driver"],
html[data-theme="forest_canopy"] body[data-role="driver"] main,
html[data-theme="forest_canopy"] body[data-role="driver"] #view-driver {
  background: #f2f9f1 !important;
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-view,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-view,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-shell {
  background: #f7fbf6 !important;
  color: #12331c !important;
  border-color: rgba(20, 60, 30, .14) !important;
  box-shadow: 0 18px 45px rgba(20, 80, 40, .10) !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-greeting strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-status strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-kpis strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-progress strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-next strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-appbar strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop-copy strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-empty strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brandmark strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-greeting strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-summary h2,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-metrics strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-stop-head strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-stop-meta strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-next b,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-empty strong {
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-greeting small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-status small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-kpis small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-progress span,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop-copy small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-greeting small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-summary > p,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-metrics small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-next small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-empty small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-more {
  color: #55705c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-kpis article,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-progress,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-next,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-summary,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-empty,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-next button,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-empty {
  background: #fff !important;
  border-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-next,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop.current,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-stop,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-stop.arrived {
  background: #eef8f0 !important;
  border-color: rgba(46, 158, 82, .36) !important;
  box-shadow: 0 8px 24px rgba(20, 80, 40, .08) !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop.current {
  background: #e7f5ea !important;
  border-color: #56ad70 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-summary,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-summary {
  color: #55705c !important;
  border-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-summary span {
  color: #55705c !important;
  border-right-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-appbar,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-icon {
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-icon {
  background: #fff !important;
  border: 1px solid #cfe0d2 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-timeline::before,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop:not(:last-child)::after {
  background: #cfe0d2 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop-head {
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-marker {
  background: #fff !important;
  border-color: #a9c8af !important;
  color: #347b47 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .completed .driver-route-marker {
  background: #38a85b !important;
  border-color: #38a85b !important;
  color: #fff !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .current .driver-route-marker {
  background: #e7f5ea !important;
  border-color: #2e9e52 !important;
  color: #23763c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .current .driver-route-status {
  color: #fff !important;
  background: #2e9e52 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-status,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions a,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions button,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-more {
  color: #267b40 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-status.done {
  color: #fff !important;
  background: linear-gradient(135deg, #3730a3, #6d28d9) !important;
  border-color: rgba(196,181,253,.72) !important;
  box-shadow: 0 4px 10px rgba(91,33,182,.18) !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop-detail,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions {
  border-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions span {
  color: #718675 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions a,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions button,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-actions span {
  border-right-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-nav,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-view > .driver-route-nav,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-view .driver-route-nav {
  background: rgba(255, 255, 255, .96) !important;
  border-top-color: #d7e5d9 !important;
  box-shadow: 0 -8px 22px rgba(20, 80, 40, .06);
}

/* Failed collection state: a report is a terminal driver task state until
   internal management re-dispatches it. Keep it visually distinct and never
   present the photo/collection action again. */
body[data-role="driver"] .driver-route-summary span.failed,
body[data-role="driver"] .driver-route-status.failed { color: #ffb4a8 !important; }
body[data-role="driver"] .driver-route-stop.failed { background: rgba(125, 35, 35, .18); border-color: rgba(255, 123, 105, .7); }
body[data-role="driver"] .driver-route-stop.failed.current { box-shadow: 0 0 0 1px rgba(255, 123, 105, .28), 0 8px 26px rgba(255, 92, 75, .12); }
body[data-role="driver"] .driver-route-stop.failed .driver-route-marker { background: #f06f5e; border-color: #f06f5e; color: #fff; }
body[data-role="driver"] .driver-route-stop.failed .driver-route-status,
body[data-role="driver"] .driver-route-stop.current .driver-route-status.failed { color: #fff !important; background: #c94b42 !important; padding: 3px 9px; border-radius: 20px; }
body[data-role="driver"] .driver-route-current.failed { border-top-color: rgba(255, 123, 105, .35); }
body[data-role="driver"] .driver-live-status.failed { color: #ffb4a8; background: rgba(125, 35, 35, .22); border-color: rgba(255, 123, 105, .55); }
body[data-role="driver"] .driver-live-status.failed .driver-live-status-dot { background: #f06f5e; }
body[data-role="driver"] .driver-primary-failed,
body[data-role="driver"] .driver-failure-banner { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid rgba(255, 123, 105, .55); border-radius: 12px; background: rgba(125, 35, 35, .22); color: #ffb4a8; }
body[data-role="driver"] .driver-primary-failed { grid-template-columns: auto 1fr; align-items: center; }
body[data-role="driver"] .driver-primary-failed .material-symbols-rounded { font-size: 21px; }
body[data-role="driver"] .driver-primary-failed strong { color: #fff; font-size: 13px; }
body[data-role="driver"] .driver-primary-failed small { grid-column: 2; color: #ffb4a8; font-size: 10px; }
body[data-role="driver"] .driver-failure-banner strong { color: #fff; font-size: 13px; }
body[data-role="driver"] .driver-failure-banner span,
body[data-role="driver"] .driver-failure-banner small { color: #ffb4a8 !important; font-size: 11px; }
body[data-role="driver"] .driver-pulse-stop.failed { border-color: rgba(255, 123, 105, .62); background: linear-gradient(145deg, rgba(104, 34, 39, .72), rgba(31, 17, 24, .88)); }
body[data-role="driver"] .driver-pulse-stop.failed .driver-pulse-stop-head div > span { color: #ffb4a8; }
body[data-role="driver"] .driver-pulse-metrics:has(.failed) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-role="driver"] .driver-pulse-metrics article.failed { color: #ffb4a8; }
body[data-role="driver"] .driver-pulse-metrics article.failed .material-symbols-rounded { color: #f06f5e; }

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-summary span.failed,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-status.failed { color: #b63b31 !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop.failed { background: #fff1ef !important; border-color: #e48b80 !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop.failed .driver-route-marker { background: #d95549 !important; border-color: #d95549 !important; color: #fff !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop.failed .driver-route-status,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-stop.current .driver-route-status.failed { color: #fff !important; background: #c94b42 !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-live-status.failed,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-primary-failed,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-failure-banner { color: #a9362d !important; background: #fff1ef !important; border-color: #e48b80 !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-primary-failed strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-failure-banner strong { color: #7f241d !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-primary-failed small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-failure-banner span,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-failure-banner small { color: #a9362d !important; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-stop.failed { background: #fff1ef !important; border-color: #e48b80 !important; }

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-nav button {
  color: #718675 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-nav button:hover,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-nav button.active {
  color: #267b40 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-route-nav button.active {
  background: #e4f4e8 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-live-status,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-status {
  background: #edf8f0 !important;
  border-color: #a9d8b4 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-live-status.arrived,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-status.arrived {
  background: #eef7ff !important;
  border-color: #abd2f2 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-live-status strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-live-status small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-status strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-dashboard-status small {
  color: #365d40 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-view {
  background: radial-gradient(circle at 50% 0%, rgba(112, 194, 132, .18), transparent 34%), #f7fbf6 !important;
}

/* Driver Pulse top bar: keep the light theme, but make the first glance
   controls readable on a phone. The previous pastel GPS text was too close
   to its pale background, especially in the header screenshot. */
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brandmark strong {
  color: #12331c !important;
  font-size: 17px !important;
  letter-spacing: .09em !important;
  white-space: nowrap !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brandmark small {
  color: #267b40 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge {
  min-height: 34px !important;
  padding: 0 9px !important;
  border-color: #a9d8b4 !important;
  background: #e8f6eb !important;
  color: #267b40 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge .material-symbols-rounded {
  color: #2e9e52 !important;
  font-size: 15px !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge.pending {
  border-color: #e8c875 !important;
  background: #fff8e6 !important;
  color: #8a5a00 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge.denied {
  border-color: #e6a5a5 !important;
  background: #fff0f0 !important;
  color: #a63d3d !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-greeting {
  margin-top: 20px !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-greeting strong {
  font-size: 21px !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-greeting small {
  color: #496b51 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-summary h2 {
  font-size: 20px !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-summary > p {
  color: #496b51 !important;
  font-size: 12px !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-metrics small {
  color: #496b51 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

@media (max-width: 400px) {
  html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brandmark {
    gap: 7px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brandmark > .material-symbols-rounded {
    font-size: 36px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brandmark strong {
    font-size: 16px !important;
    letter-spacing: .07em !important;
  }

  html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge {
    gap: 2px !important;
    padding: 0 7px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 430px) {
  html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brand {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-brand-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-ring {
  background: conic-gradient(#2e9e52 0 var(--driver-progress), #dce9df var(--driver-progress) 360deg) !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-ring::after {
  background: #f7fbf6 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-ring strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-ring strong b {
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-route > h2,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-next > span {
  color: #5f7b66 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-secondary > a,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-secondary > span {
  background: #fff !important;
  border-color: #b8d8bf !important;
  color: #267b40 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-secondary .map {
  border-color: #acd1ed !important;
  color: #2876ad !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-secondary small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-secondary .disabled {
  color: #718675 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-pulse-secondary .disabled {
  background: #f5f8f5 !important;
  border-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-visible-logout {
  border: 1px solid #c2410c !important;
  background: transparent !important;
  color: #9a3412 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-visible-logout:hover {
  background: #fff7ed !important;
}

/* Keep GPS as a compact status chip, so the action row stays calm on phones. */
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge {
  min-height: 32px !important;
  gap: 5px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 15px !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge .driver-location-label {
  opacity: .72;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-location-badge strong {
  font-size: 10px;
  font-weight: 900;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet {
  background: #f7fbf6 !important;
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-head {
  border-bottom-color: #d7e5d9 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-head strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body h3,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body details summary,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .profile-compact strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .profile-field strong {
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-close {
  background: #fff !important;
  border-color: #cfe0d2 !important;
  color: #267b40 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .muted,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .profile-compact label span,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .profile-field span {
  color: #55705c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body input,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body textarea,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body select,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body details,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-action-strip,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-evidence-card,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-exception-card,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-evidence-item,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .record-card,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .compact-record,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .metric-card,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .grid-3 > *,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .drawer-section {
  background: #fff !important;
  border-color: #d7e5d9 !important;
  color: #12331c !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body input::placeholder,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body textarea::placeholder {
  color: #829887 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-step {
  background: #f5f8f5 !important;
  border-color: #d7e5d9 !important;
  color: #718675 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-step.done,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-evidence-item.ok {
  background: #edf8f0 !important;
  border-color: #a9d8b4 !important;
  color: #267b40 !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-sheet-body .driver-evidence-item.warn {
  background: #fff8e8 !important;
  border-color: #f0d18d !important;
  color: #8a5a00 !important;
}

/* Photo source actions must remain legible on the light driver surface. */
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-photo-actions .driver-gallery-btn {
  border-color: #8acb99 !important;
  background: #eaf7ed !important;
  color: #267b40 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-photo-actions .driver-gallery-btn:hover {
  border-color: #4cae67 !important;
  background: #dff2e4 !important;
  color: #185c2d !important;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-photo-actions .driver-gallery-btn .material-symbols-rounded {
  color: #2e9e52 !important;
}

/* Keep the standalone session action visually separated from profile panels. */
.profile-session-action {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.profile-session-action .logout-outline {
  width: auto;
  min-width: 140px;
}

/* Profile collapse controls: the direction carries the state, so no English
   label needs to occupy the compact section header. */
.profile-collapse-toggle.icon-only {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  gap: 0;
}

.profile-collapse-toggle.icon-only .profile-collapse-icon {
  font-size: 18px;
  line-height: 1;
}

/* Profile drawer sizing fix: keep cards at content height instead of
   distributing the full drawer height across the profile grid tracks. */
#detailDrawer:has(.profile-shell) .drawer-body {
  display: block;
  align-content: initial;
}

#detailDrawer:has(.profile-shell) .profile-shell {
  min-height: 0;
  align-content: start;
}

/* Profile drawer density polish: keep the same hierarchy with less vertical waste. */
#detailDrawer:has(.profile-shell) .drawer-head {
  padding: 14px 18px;
}

#detailDrawer:has(.profile-shell) .drawer-body {
  padding: 12px 18px 16px;
}

.profile-shell {
  gap: 8px;
}

.profile-identity-card {
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
}

.profile-avatar-large {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-size: 20px;
}

.profile-identity-copy h3 {
  font-size: 18px;
}

.profile-sec {
  padding: 10px 12px;
  border-radius: 12px;
}

.profile-section-heading {
  gap: 10px;
  margin-bottom: 6px;
}

.profile-section-heading p {
  margin-top: 2px;
  line-height: 1.3;
}

.profile-shell [data-profile-collapsible].is-collapsed > .profile-section-heading {
  margin-bottom: 0;
}

.profile-collapse-toggle {
  min-height: 30px;
  padding: 5px 9px;
}

.profile-readonly-badge {
  padding: 3px 7px;
}

.profile-info-grid {
  gap: 6px;
}

.profile-info-item {
  padding: 8px 10px;
}

.profile-permission-note {
  margin-top: 8px;
  padding: 8px 10px;
}

.profile-save-message {
  min-height: 14px;
}

.profile-action-bar {
  padding-top: 8px;
}

.profile-session-action {
  padding-top: 2px;
}

@media (max-width: 700px) {
  #detailDrawer:has(.profile-shell) .drawer-head {
    padding: 12px;
  }

  #detailDrawer:has(.profile-shell) .drawer-body {
    padding: 10px 12px 14px;
  }

  .profile-shell {
    gap: 7px;
  }

  .profile-identity-card {
    padding: 10px 12px;
  }

  .profile-sec {
    padding: 9px 10px;
  }
}

/* ============================================================
   CUSTOMER RECOVERY PROCESS — CARBON DARK THEME
   The recovery page has its own Forest Canopy canvas, so it needs
   an explicit dark surface map instead of relying on global tokens.
   ============================================================ */
html[data-theme="carbon_dark"] #view-customer .portal-recovery-shell,
html[data-theme="carbon_dark"] #view-customer:has(.portal-recovery-shell),
html[data-theme="carbon_dark"] #view-customer .portal-recovery-shell > .client-portal,
html[data-theme="carbon_dark"] #view-customer .recovery-process-page {
  --recovery-ink: #eafff0;
  --recovery-muted: #a6bcae;
  --recovery-green: #3dd68c;
  --recovery-green-deep: #8ce9b8;
  --recovery-line: rgba(207, 239, 218, .14);
  --recovery-soft: #17231c;
  --recovery-ivory: #101612;
  --recovery-blue: #7ecbff;
  background: #101612 !important;
  color: #eafff0 !important;
}

html[data-theme="carbon_dark"] #view-customer .portal-primary-header {
  --recovery-ink: #eafff0;
  --recovery-muted: #a6bcae;
  --recovery-green: #3dd68c;
  --recovery-green-deep: #8ce9b8;
  --recovery-line: rgba(207, 239, 218, .14);
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-header {
  border-top-color: #3dd68c;
  border-bottom-color: rgba(207, 239, 218, .14);
  background: rgba(20, 27, 23, .94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-main-nav button {
  color: #a6bcae;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-main-nav button:hover {
  background: rgba(61, 214, 140, .1);
  color: #8ce9b8;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-main-nav button:hover::after {
  background: rgba(61, 214, 140, .55);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-main-nav button:focus-visible {
  outline-color: #3dd68c;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-main-nav button.active {
  color: #eafff0;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-account .portal-notification-bell,
html[data-theme="carbon_dark"] #view-customer .recovery-process-profile,
html[data-theme="carbon_dark"] #view-customer .recovery-process-logout {
  border-color: rgba(207, 239, 218, .18) !important;
  background: #171b19 !important;
  color: #eafff0 !important;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-logout {
  color: #a6bcae !important;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-profile:hover,
html[data-theme="carbon_dark"] #view-customer .recovery-process-logout:hover {
  border-color: #3dd68c !important;
  background: rgba(61, 214, 140, .1) !important;
  color: #8ce9b8 !important;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-utility {
  border-bottom-color: rgba(207, 239, 218, .14);
  background: #111713;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-breadcrumb {
  color: #91a69b;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-selected-material select {
  color: #eafff0;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-selected-material > .material-symbols-rounded {
  color: #a6bcae;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-forest {
  /* Remove the white source canvas and recolour the illustration for dark mode. */
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(135deg) saturate(.72) brightness(.72) contrast(1.12);
  opacity: .82;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-timeline-icon {
  border-color: rgba(207, 239, 218, .2);
  background: #111713;
  color: #8ce9b8;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-timeline-stage.is-complete .recovery-process-timeline-icon {
  border-color: #3dd68c;
  background: #238957;
  box-shadow: 0 4px 12px rgba(61, 214, 140, .22);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-timeline-stage.is-current .recovery-process-timeline-icon {
  border-color: rgba(126, 203, 255, .55);
  background: rgba(126, 203, 255, .1);
  color: #7ecbff;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-timeline-connector {
  background: rgba(140, 233, 184, .32);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-timeline-connector::after {
  background: #6fae89;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-timeline-stage.is-current .recovery-process-timeline-number {
  background: #3b9bd4;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-note {
  border-top-color: rgba(207, 239, 218, .14);
  border-bottom-color: rgba(207, 239, 218, .14);
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-material-option:hover {
  background: rgba(61, 214, 140, .08) !important;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-material-option.active {
  border-color: rgba(61, 214, 140, .46) !important;
  background: rgba(61, 214, 140, .13) !important;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-material-option.is-disposal.active {
  border-color: rgba(244, 213, 138, .42) !important;
  background: rgba(177, 130, 35, .14) !important;
  box-shadow: inset 3px 0 0 #d9a441;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-option-icon {
  background: rgba(61, 214, 140, .12);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-material-option.is-disposal .recovery-process-option-icon {
  background: rgba(244, 213, 138, .14);
  color: #f4d58a;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-option-arrow {
  color: #91a69b;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-material-option.active .recovery-process-option-arrow {
  color: #3dd68c;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-material-icon {
  background: rgba(61, 214, 140, .14);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-route-badge {
  border-color: rgba(140, 233, 184, .42);
  color: #8ce9b8;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-metrics article {
  background: rgba(255, 255, 255, .045);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-route-card {
  border-color: rgba(207, 239, 218, .14);
  background: #171b19;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-route-card.is-disposal {
  border-color: rgba(244, 213, 138, .3);
  background: rgba(177, 130, 35, .12);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-route-card.is-disposal .recovery-process-route-icon {
  color: #f4d58a;
}

html[data-theme="carbon_dark"] #view-customer .recovery-process-actions {
  border-top-color: rgba(207, 239, 218, .14);
  background: rgba(16, 22, 18, .94);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-action-secondary {
  border-color: rgba(140, 233, 184, .42);
  background: #171b19;
  color: #8ce9b8;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-action-secondary:hover {
  background: rgba(61, 214, 140, .12);
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-action-primary {
  border-color: #4288b8;
  background: #2c6f9b;
  color: #f4fbff;
}
html[data-theme="carbon_dark"] #view-customer .recovery-process-action-primary:hover {
  background: #3785b7;
}

/* ============================================================
   PROFILE COLLAPSE + PORTAL MOTION REPAIR
   Profile sections are marked with data-profile-collapsible by the
   renderer. Keep the visual state bound to that same source of truth.
   ============================================================ */
.profile-shell [data-profile-collapsible].is-collapsed {
  gap: 0;
}

.profile-shell [data-profile-collapsible].is-collapsed > :not(.profile-section-heading) {
  display: none;
}

.portal-home-atmosphere,
.portal-home-orbit,
.portal-home-bridge,
.portal-home-logo-wrap {
  will-change: transform;
}

.portal-home-bridge {
  will-change: transform, box-shadow;
}

@media (prefers-reduced-motion: no-preference) {
  .portal-home-atmosphere,
  .portal-home-atmosphere::after,
  .portal-home-orbit,
  .portal-home-bridge,
  .portal-home-logo-wrap {
    animation-play-state: running;
  }
}

@media (max-width: 700px) {
  .profile-shell {
    gap: 10px;
  }

  .profile-identity-card {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
  }

  .profile-section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .profile-collapse-toggle {
    justify-self: end;
  }

  .profile-action-bar {
    position: static;
  }

  .profile-action-bar button,
  .profile-session-action .logout-outline {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-home-atmosphere,
  .portal-home-atmosphere::after,
  .portal-home-orbit,
  .portal-home-bridge,
  .portal-home-logo-wrap {
    animation: none !important;
  }
}

/* ============================================================
   CUSTOMER PORTAL PHONE LAYOUT REPAIR
   These selectors are intentionally last: older component rules below the
   first mobile block were restoring desktop columns for the route map and
   assurance chain after the mobile breakpoint had already applied.
   ============================================================ */
@media (max-width: 760px) {
  body[data-role="customer_view"] .material-flow-map-root,
  body[data-role="customer_master"] .material-flow-map-root {
    width: 100%;
    margin: 0;
    align-items: flex-start;
    padding: 12px;
  }

  body[data-role="customer_view"] .material-flow-map-root > span:last-child,
  body[data-role="customer_master"] .material-flow-map-root > span:last-child,
  body[data-role="customer_view"] .material-flow-map-node > span:nth-child(2),
  body[data-role="customer_master"] .material-flow-map-node > span:nth-child(2) {
    min-width: 0;
  }

  body[data-role="customer_view"] .material-flow-map-stages,
  body[data-role="customer_master"] .material-flow-map-stages {
    grid-template-columns: 1fr !important;
  }

  body[data-role="customer_view"] .material-flow-map-node,
  body[data-role="customer_master"] .material-flow-map-node {
    width: 100%;
    align-items: flex-start;
  }

  body[data-role="customer_view"] .material-flow-map-link,
  body[data-role="customer_master"] .material-flow-map-link {
    display: none;
  }

  body[data-role="customer_view"] .chain-grid,
  body[data-role="customer_master"] .chain-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-role="customer_view"] .chain-grid article,
  body[data-role="customer_master"] .chain-grid article {
    min-width: 0;
    min-height: 0;
  }

  body[data-role="customer_view"] .ch-hero,
  body[data-role="customer_master"] .ch-hero {
    grid-template-columns: 1fr !important;
    min-width: 0;
    padding: 18px 14px 0 !important;
  }

  body[data-role="customer_view"] .ch-hero-title,
  body[data-role="customer_master"] .ch-hero-title {
    font-size: clamp(24px, 7vw, 30px);
    overflow-wrap: anywhere;
  }

  body[data-role="customer_view"] .ch-hero-main,
  body[data-role="customer_master"] .ch-hero-main,
  body[data-role="customer_view"] .ch-hero-side,
  body[data-role="customer_master"] .ch-hero-side {
    min-width: 0;
  }

  body[data-role="customer_view"] .ch-hero-side,
  body[data-role="customer_master"] .ch-hero-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
  }

  body[data-role="customer_view"] .ch-stage-card,
  body[data-role="customer_master"] .ch-stage-card {
    min-width: 0;
    padding: 12px;
  }

  body[data-role="customer_view"] .ch-orbit,
  body[data-role="customer_master"] .ch-orbit {
    width: 96px;
    height: 96px;
  }

  body[data-role="customer_view"] .ch-hero-strip,
  body[data-role="customer_master"] .ch-hero-strip {
    grid-template-columns: 1fr !important;
    margin: 0 -14px !important;
  }

  body[data-role="customer_view"] .ch-hero-strip article,
  body[data-role="customer_master"] .ch-hero-strip article {
    min-width: 0;
    padding: 13px 14px;
  }

  body[data-role="customer_view"] .ch-hero-strip span,
  body[data-role="customer_master"] .ch-hero-strip span,
  body[data-role="customer_view"] .ch-hero-strip strong,
  body[data-role="customer_master"] .ch-hero-strip strong,
  body[data-role="customer_view"] .ch-hero-strip small,
  body[data-role="customer_master"] .ch-hero-strip small {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   MOBILE RESPONSIVE REPAIR V2
   Final phone layer for shared portal controls, charts, drawers and Master
   layouts. Several older theme blocks use stronger selectors and appear
   after the first responsive pass, so these rules deliberately stay last.
   ============================================================ */
@media (max-width: 760px) {
  /* The portal header must be a real two-row phone header on inner pages. */
  body[data-role="customer_view"] .portal-section-controls,
  body[data-role="customer_master"] .portal-section-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100%;
    padding: 12px !important;
  }

  body[data-role="customer_view"] .portal-section-controls .portal-back-button,
  body[data-role="customer_master"] .portal-section-controls .portal-back-button {
    width: fit-content;
    max-width: 100%;
  }

  body[data-role="customer_view"] .portal-section-controls .portal-profile-wrap,
  body[data-role="customer_master"] .portal-section-controls .portal-profile-wrap,
  body[data-role="customer_view"] .portal-home-controls .portal-profile-wrap,
  body[data-role="customer_master"] .portal-home-controls .portal-profile-wrap {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  body[data-role="customer_view"] .portal-profile-wrap > button,
  body[data-role="customer_master"] .portal-profile-wrap > button {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
    justify-content: center;
  }

  /* Reset all desktop positioning before applying phone document order. */
  body[data-role="customer_view"] .portal-home,
  body[data-role="customer_master"] .portal-home {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
    padding: 76px 12px 28px !important;
  }

  body[data-role="customer_view"] .portal-home-brand,
  body[data-role="customer_master"] .portal-home-brand {
    position: static !important;
    order: 1 !important;
    transform: none !important;
    margin: 0 auto 18px !important;
  }

  body[data-role="customer_view"] .portal-home-core,
  body[data-role="customer_master"] .portal-home-core {
    position: static !important;
    order: 2 !important;
    width: 100%;
    min-width: 0;
    margin: 0 auto 20px !important;
  }

  body[data-role="customer_view"] .portal-home-menu,
  body[data-role="customer_master"] .portal-home-menu {
    position: static !important;
    inset: auto !important;
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    min-width: 0;
    margin: 0 0 8px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body[data-role="customer_view"] .portal-home-module,
  body[data-role="customer_master"] .portal-home-module {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    padding: 12px 14px;
  }

  body[data-role="customer_view"] .portal-home-footer,
  body[data-role="customer_master"] .portal-home-footer {
    position: static !important;
    order: 4 !important;
    margin-top: 12px;
  }

  /* Every donut/pie becomes chart first, legend second. This prevents the
     legend from remaining in a hidden desktop column on a narrow screen. */
  body[data-role="customer_view"] .pie-layout,
  body[data-role="customer_master"] .pie-layout,
  body[data-role="customer_view"] .wp-material-card .pie-layout,
  body[data-role="customer_master"] .wp-material-card .pie-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    gap: 14px !important;
    width: 100%;
  }

  body[data-role="customer_view"] .pie-shell,
  body[data-role="customer_master"] .pie-shell {
    min-width: 0;
    max-width: 100%;
  }

  body[data-role="customer_view"] .pie-legend,
  body[data-role="customer_master"] .pie-legend {
    grid-template-columns: 1fr !important;
    width: 100%;
    min-width: 0;
  }

  body[data-role="customer_view"] .pie-item,
  body[data-role="customer_master"] .pie-item {
    min-width: 0;
    grid-template-columns: 14px minmax(0, 1fr);
  }

  body[data-role="customer_view"] .pie-item strong,
  body[data-role="customer_view"] .pie-item small,
  body[data-role="customer_master"] .pie-item strong,
  body[data-role="customer_master"] .pie-item small {
    overflow-wrap: anywhere;
  }

  /* Drawer cards must use one column. The later #drawerBody rule otherwise
     restores three fixed columns and creates the clipped Delivery Detail. */
  #detailDrawer,
  #detailDrawer .drawer,
  #detailDrawer .drawer-head,
  #detailDrawer .drawer-body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  #detailDrawer .drawer-head,
  #detailDrawer .drawer-body {
    padding: 12px !important;
  }

  #detailDrawer .drawer-head h2 {
    min-width: 0;
    max-width: 78vw;
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  #drawerBody .grid-2,
  #drawerBody .grid-3,
  #drawerBody .profile-compact {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  #drawerBody .metric-card,
  #drawerBody .profile-field {
    min-width: 0;
  }

  #drawerBody .metric-card strong,
  #drawerBody .profile-field strong {
    overflow-wrap: anywhere;
  }

  #drawerBody .data-grid {
    max-width: 100%;
    overflow-x: auto !important;
  }

  /* Five-column operational tables stay readable inside their own scroll
     area instead of shrinking every cell into an unreadable strip. */
  #drawerBody .data-grid:has(th:nth-child(5)) table {
    min-width: 560px !important;
    table-layout: fixed;
  }

  /* Ranking pills must not occupy the company column. */
  #drawerBody .rank-pill-cell {
    width: 86px !important;
  }

  #drawerBody .rank-pill {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    padding: 6px 4px;
    gap: 3px;
    white-space: normal;
    flex-wrap: wrap;
  }

  #drawerBody .rank-pill-label {
    max-width: 100%;
    font-size: 8px;
    letter-spacing: .03em;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* Master portal cards with desktop minimum columns must collapse before
     the browser starts scrolling the whole page sideways. */
  body[data-role="customer_master"] .master-hero,
  body[data-role="customer_master"] .master-mission-hero,
  body[data-role="customer_master"] .master-grid,
  body[data-role="customer_master"] .master-chart-grid,
  body[data-role="customer_master"] .master-goal-control-row,
  body[data-role="customer_master"] .master-segment-heading,
  body[data-role="customer_master"] .branch-portal-heading,
  body[data-role="customer_master"] .master-hero-metrics,
  body[data-role="customer_master"] .master-mission-grid,
  body[data-role="customer_master"] .master-boundary-strip,
  body[data-role="customer_master"] .master-risk-reasons,
  body[data-role="customer_master"] .master-mission-card-kpis,
  body[data-role="customer_master"] .master-campaign-kpis,
  body[data-role="customer_master"] .master-goal-period-grid,
  body[data-role="customer_master"] .master-goal-rules,
  body[data-role="customer_master"] .master-branch-goal-grid,
  body[data-role="customer_master"] .master-goal-form,
  body[data-role="customer_master"] .master-goal-form-stack,
  body[data-role="customer_master"] .master-campaign-form,
  body[data-role="customer_master"] .master-campaign-challenge {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  body[data-role="customer_master"] .master-hero,
  body[data-role="customer_master"] .master-mission-hero {
    padding: 16px !important;
  }

  body[data-role="customer_master"] .master-hero-copy h2,
  body[data-role="customer_master"] .master-mission-hero h2 {
    max-width: none;
    font-size: clamp(28px, 8vw, 42px);
    overflow-wrap: anywhere;
  }

  body[data-role="customer_master"] .master-goal-cell,
  body[data-role="customer_master"] .master-campaign-challenge > * {
    min-width: 0 !important;
  }

  /* Shared cards and labels must be allowed to shrink at 320–390px. */
  body[data-role="customer_view"] .panel,
  body[data-role="customer_master"] .panel,
  body[data-role="customer_view"] .nested-panel,
  body[data-role="customer_master"] .nested-panel,
  body[data-role="customer_view"] .chart-card,
  body[data-role="customer_master"] .chart-card {
    min-width: 0;
    max-width: 100%;
  }

  body[data-role="customer_view"] h1,
  body[data-role="customer_view"] h2,
  body[data-role="customer_view"] h3,
  body[data-role="customer_master"] h1,
  body[data-role="customer_master"] h2,
  body[data-role="customer_master"] h3 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  body[data-role="customer_view"] .portal-profile-wrap,
  body[data-role="customer_master"] .portal-profile-wrap {
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
  }

  body[data-role="customer_view"] .portal-profile-button,
  body[data-role="customer_view"] .portal-logout-button,
  body[data-role="customer_master"] .portal-profile-button,
  body[data-role="customer_master"] .portal-logout-button {
    padding-inline: 8px;
    font-size: 10px;
  }
}

/* ============================================================
   MOBILE PORTAL OVERRIDE V3
   Forest-theme portal selectors are intentionally more specific than the
   first responsive layer. Keep this final layer equally specific so the
   live Customer and Master markup follows the same phone rules as the
   shared components.
   ============================================================ */
@media (max-width: 760px) {
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 78px 12px 28px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-brand,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-brand {
    position: static !important;
    order: 1 !important;
    transform: none !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 20px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-core,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-core {
    position: static !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto 20px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-menu,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-menu {
    position: static !important;
    inset: auto !important;
    order: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 8px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-module,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-module,
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-menu-left .portal-home-module,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-menu-left .portal-home-module {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    text-align: left !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-footer,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-footer {
    position: static !important;
    order: 4 !important;
    margin-top: 14px !important;
    justify-content: center;
    flex-wrap: wrap;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-forest,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-forest {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0;
    transform: none !important;
    opacity: .34;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-footer,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-footer {
    order: 5 !important;
    position: relative;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(244, 250, 243, .72);
    box-shadow: 0 8px 24px rgba(31, 83, 52, .06);
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-top-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-top-controls {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-controls {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-profile-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-profile-wrap {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-profile-wrap > button,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-profile-wrap > button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap;
    justify-content: center;
  }

  /* Charts: never reserve a desktop legend column on a phone. */
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .pie-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .pie-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .wp-material-card .pie-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .wp-material-card .pie-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-pie-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-items: center;
    gap: 14px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .pie-legend,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .pie-legend,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-pie-legend {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .pie-item,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .pie-item,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-pie-legend > * {
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Detail drawers: one metric card per row, tables scroll inside their own
     container, and ranking badges cannot consume the company column. */
  html[data-theme="forest_canopy"] #detailDrawer,
  html[data-theme="forest_canopy"] #detailDrawer .drawer-head,
  html[data-theme="forest_canopy"] #detailDrawer .drawer-body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] #drawerBody .grid-2,
  html[data-theme="forest_canopy"] #drawerBody .grid-3,
  html[data-theme="forest_canopy"] #drawerBody .profile-compact {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] #drawerBody .data-grid,
  html[data-theme="forest_canopy"] #drawerBody .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  html[data-theme="forest_canopy"] #drawerBody .rank-pill-cell {
    width: 86px !important;
  }

  html[data-theme="forest_canopy"] #drawerBody .rank-pill {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal;
    flex-wrap: wrap;
    gap: 3px;
    padding: 6px 4px;
  }

  html[data-theme="forest_canopy"] #drawerBody .rank-pill-label {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: 8px;
    letter-spacing: .03em;
  }

  /* Master desktop minimums must not survive the phone breakpoint. */
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-hero,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-hero,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-chart-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-control-row,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .branch-portal-heading,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-hero-metrics,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-boundary-strip,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-risk-reasons,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-card-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-period-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-rules,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-goal-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-form,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-form-stack,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-form,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-challenge {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   MOBILE PORTAL FINAL OVERRIDE V4
   This is deliberately last: older responsive blocks above contain the
   legacy two-row header rules and must not override the final phone layout.
   ============================================================ */
@media (max-width: 760px) {
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls {
    display: grid !important;
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls .portal-back-button,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls .portal-back-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls .portal-profile-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls .portal-profile-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-controls {
    display: block !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-home-controls > span,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-home-controls > span {
    display: none !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-shell.portal-shell,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-content,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-page,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-chart-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-workspace-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 12px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-chart-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-status-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-target-numbers,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-donut-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-pie-layout,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-risk-reasons,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-period-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-rules,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-goal-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-form,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-goal-form-stack,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-form,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-challenges,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-campaign-kpis {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero {
    padding: 16px !important;
    gap: 14px !important;
    overflow: hidden !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-tabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-card,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-portal-segment,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-chart-card,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-risk-card,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 14px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-filter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-filter input,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-filter select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .data-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-mission-table table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .data-grid table,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .table-wrap table {
    min-width: 560px;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer h1,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer h2,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer h3,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer strong {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-section-controls,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-section-controls {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding-inline: 8px !important;
  }

  html[data-theme="forest_canopy"] body[data-role="customer_view"] #view-customer .portal-profile-wrap,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-profile-wrap {
    gap: 5px !important;
  }
}

/* Aspen handover: selected light operational sheet */
body[data-role="driver"] .driver-handover-sheet {
  background: #f8fbf8;
  color: #123b28;
}

body[data-role="driver"] .driver-handover-sheet .driver-sheet-head {
  display: none;
}

body[data-role="driver"] .driver-handover-sheet .driver-sheet-body {
  padding: 0;
  background: #fff;
  color: #173b2d;
}

body[data-role="driver"] .driver-handover-view {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

body[data-role="driver"] .driver-handover-brandbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) 18px 22px;
  background: #063d2c;
  color: #fff;
}

body[data-role="driver"] .driver-handover-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

body[data-role="driver"] .driver-handover-brand img {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  object-fit: contain;
}

body[data-role="driver"] .driver-handover-brand strong {
  color: #fff;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.04em;
}

body[data-role="driver"] .driver-handover-brand strong span {
  color: #51d98d;
  font-weight: 500;
}

body[data-role="driver"] .driver-handover-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}

body[data-role="driver"] .driver-handover-close .material-symbols-rounded {
  font-size: 23px;
}

body[data-role="driver"] .driver-handover-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 18px max(20px, env(safe-area-inset-bottom));
  margin-top: -1px;
  border-radius: 24px 24px 0 0;
  background: #fff;
}

body[data-role="driver"] .driver-handover-content h1 {
  margin: 0;
  color: #123b28;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.035em;
}

body[data-role="driver"] .driver-handover-intro {
  margin: 13px 0 22px;
  color: #53625c;
  font-size: 14px;
  line-height: 1.5;
}

body[data-role="driver"] .driver-handover-selection-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dcebe1;
  border-radius: 18px;
  background: #f4faf6;
}

body[data-role="driver"] .driver-handover-summary-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #42c77b;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
}

body[data-role="driver"] .driver-handover-selection-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-role="driver"] .driver-handover-selection-summary strong {
  color: #173b2d;
  font-size: 19px;
  line-height: 1.1;
}

body[data-role="driver"] .driver-handover-selection-summary div span {
  color: #61726a;
  font-size: 13px;
}

body[data-role="driver"] .driver-handover-section-label {
  margin: 26px 2px 11px;
  color: #4f7861;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

body[data-role="driver"] .driver-handover-view .driver-aspen-orders {
  display: grid;
  gap: 8px;
  margin: 0;
}

body[data-role="driver"] .driver-handover-view .driver-aspen-order {
  position: relative;
  display: grid;
  grid-template-columns: 26px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  box-sizing: border-box;
  padding: 13px 12px;
  border: 1px solid #b7e0c5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(24, 91, 49, .06);
  cursor: pointer;
  text-align: left;
}

body[data-role="driver"] .driver-handover-view .driver-aspen-order:has(input:checked) {
  border-color: #6aca8a;
  background: #f3faf5;
}

body[data-role="driver"] .driver-handover-view .driver-aspen-order input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body[data-role="driver"] .driver-handover-checkbox {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #afc8b7;
  border-radius: 5px;
  color: transparent;
  font-size: 18px;
  font-weight: 900;
}

body[data-role="driver"] .driver-handover-view .driver-aspen-order:has(input:checked) .driver-handover-checkbox {
  border-color: #3cbe78;
  background: #3cbe78;
  color: #fff;
}

body[data-role="driver"] .driver-handover-order-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6f5eb;
  color: #2b9a56;
  font-size: 23px;
}

body[data-role="driver"] .driver-handover-order-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-role="driver"] .driver-handover-order-copy strong {
  overflow: hidden;
  color: #173b2d;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-role="driver"] .driver-handover-order-copy small {
  overflow: hidden;
  color: #667770;
  font-size: 12.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-role="driver"] .driver-handover-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e5f5e9;
  color: #2c9858;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-role="driver"] .driver-handover-confirmation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 14vh, 150px);
  padding: 16px 4px 14px;
  border-top: 1px solid #e8efe9;
}

body[data-role="driver"] .driver-handover-confirmation-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e6f5eb;
  color: #2b9a56;
  font-size: 23px;
}

body[data-role="driver"] .driver-handover-confirmation div {
  min-width: 0;
}

body[data-role="driver"] .driver-handover-confirmation strong {
  color: #173b2d;
  font-size: 16px;
}

body[data-role="driver"] .driver-handover-confirmation p {
  margin: 3px 0 0;
  color: #667770;
  font-size: 12.5px;
  line-height: 1.35;
}

body[data-role="driver"] .driver-handover-sheet .driver-aspen-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}

body[data-role="driver"] .driver-handover-sheet .driver-aspen-actions button {
  min-height: 54px;
  margin: 0;
  border: 1px solid #38b974;
  border-radius: 13px;
  background: #42cf82;
  color: #063d2c;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

body[data-role="driver"] .driver-handover-sheet .driver-aspen-actions button:last-child {
  order: -1;
}

body[data-role="driver"] .driver-handover-sheet .driver-aspen-actions .driver-history-reset {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: #2d8951;
  font-size: 12px;
}

body[data-role="driver"] .driver-handover-sheet .driver-aspen-actions button:disabled {
  opacity: .58;
  cursor: wait;
}

body[data-role="driver"] .driver-handover-empty {
  justify-content: flex-start;
}

@media (max-width: 380px) {
  body[data-role="driver"] .driver-handover-brandbar {
    padding-inline: 14px;
  }

  body[data-role="driver"] .driver-handover-content {
    padding-inline: 14px;
  }

  body[data-role="driver"] .driver-handover-content h1 {
    font-size: 26px;
  }

  body[data-role="driver"] .driver-handover-view .driver-aspen-order {
    grid-template-columns: 24px 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 9px;
  }

  body[data-role="driver"] .driver-handover-order-icon {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  body[data-role="driver"] .driver-handover-status {
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* Driver pages: Tasks and History stay in the app shell instead of opening
   as slide-in sheets. The bottom navigation remains part of the page layout. */
body[data-role="driver"] .driver-tasks-page,
body[data-role="driver"] .driver-history-page {
  overflow-y: hidden;
}

body[data-role="driver"] .driver-tasks-page > .driver-route-nav,
body[data-role="driver"] .driver-history-page > .driver-route-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
}

body[data-role="driver"] .driver-history-page {
  gap: 0;
}

body[data-role="driver"] .driver-page-heading {
  display: grid;
  gap: 4px;
  flex: 0 0 auto;
  margin: 22px 4px 16px;
}

body[data-role="driver"] .driver-page-heading > span {
  color: #55d482;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

body[data-role="driver"] .driver-page-heading h1 {
  margin: 0;
  color: #f5f7f8;
  font-size: 24px;
  line-height: 1.1;
}

body[data-role="driver"] .driver-page-heading p,
body[data-role="driver"] .driver-page-heading small {
  margin: 0;
  color: #8b98a8;
  font-size: 11px;
  line-height: 1.35;
}

body[data-role="driver"] .driver-history-page-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 2px 14px;
}

body[data-role="driver"] .driver-history-page-content::-webkit-scrollbar {
  width: 4px;
}

body[data-role="driver"] .driver-history-page-content::-webkit-scrollbar-thumb {
  background: rgba(61, 214, 140, .28);
  border-radius: 999px;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-page-heading > span {
  color: #2e9e52;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-page-heading h1 {
  color: #12331c;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-page-heading p,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-page-heading small {
  color: #55705c;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content {
  color: #12331c;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-filter {
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e5d9;
  border-radius: 14px;
  background: #fff;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-filter label {
  color: #55705c;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-filter input {
  min-height: 40px;
  border: 1px solid #cfe0d2;
  border-radius: 10px;
  background: #fff;
  color: #12331c;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-primary-btn,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-reset {
  min-height: 40px;
  border: 1px solid #2e9e52;
  border-radius: 10px;
  background: #2e9e52;
  color: #fff;
  font-weight: 900;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-reset {
  border-color: #cfe0d2;
  background: #edf7ef;
  color: #267b40;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-stats div {
  border-color: #d7e5d9;
  background: #fff;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-stats strong {
  color: #2e9e52;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-stats span,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-toolbar small {
  color: #718675;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-toolbar {
  border-color: #bfe0c6;
  background: #edf8f0;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-toolbar strong {
  color: #173b2d;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-day {
  border-color: #d7e5d9;
  background: #fff;
  color: #55705c;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-day strong {
  color: #173b2d;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-history-page-content .driver-history-days > .muted {
  color: #718675;
}

body[data-role="driver"] .driver-handover-page {
  gap: 0;
  overflow-y: hidden;
}

body[data-role="driver"] .driver-handover-page-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 2px 14px;
}

body[data-role="driver"] .driver-handover-page-scroll::-webkit-scrollbar {
  width: 4px;
}

body[data-role="driver"] .driver-handover-page-scroll::-webkit-scrollbar-thumb {
  background: rgba(61, 214, 140, .28);
  border-radius: 999px;
}

body[data-role="driver"] .driver-handover-page-content {
  min-height: 100%;
}

body[data-role="driver"] .driver-handover-page > .driver-route-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
}

@media (max-width: 380px) {
  body[data-role="driver"] .driver-page-heading {
    margin-top: 18px;
  }

  body[data-role="driver"] .driver-page-heading h1 {
    font-size: 22px;
  }
}

/* ============================================================
   ACCOUNT PROFILE · AUDIT LEDGER LAYOUT
   Selected profile direction: a compact, scannable governance ledger.
   The existing Forest Canopy / Carbon Dark tokens remain the source of
   truth so this redesign changes structure without changing the theme.
   ============================================================ */
#detailDrawer:has(.profile-ledger) {
  width: min(1460px, calc(100vw - 48px));
  background: var(--panel) !important;
}

#detailDrawer:has(.profile-ledger) .drawer-body {
  display: block;
  overflow: auto;
  padding: 22px 30px 26px;
  background: var(--panel) !important;
}

#detailDrawer:has(.profile-ledger) .drawer-head {
  padding: 18px 30px;
  background: var(--panel) !important;
}

.profile-ledger {
  width: min(1360px, 100%);
  margin: 0 auto;
  gap: 16px;
  color: var(--ink);
}

.profile-ledger-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 4px;
}

.profile-ledger-intro h3 {
  margin: 5px 0 0;
  color: var(--ink) !important;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.profile-ledger-intro p {
  margin: 7px 0 0;
  color: var(--muted) !important;
  font-size: 14px;
}

.profile-ledger-scope {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--green) !important;
  font-size: 12px;
  font-weight: 800;
}

.profile-ledger-scope .material-symbols-rounded {
  font-size: 18px;
}

.profile-ledger-identity {
  display: grid;
  grid-template-columns: minmax(290px, 1.55fr) repeat(3, minmax(150px, 1fr));
  align-items: center;
  gap: 0;
  padding: 20px 22px;
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, var(--soft)) !important;
  box-shadow: none !important;
}

.profile-identity-person {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-right: 20px;
}

.profile-ledger .profile-avatar-large {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green) !important;
  color: #fff !important;
  font-size: 24px;
}

.profile-ledger .profile-identity-copy h3 {
  font-size: 22px;
  color: var(--ink) !important;
}

.profile-ledger .profile-identity-copy p,
.profile-ledger .profile-identity-copy small,
.profile-ledger .profile-identity-topline {
  color: var(--muted) !important;
}

.profile-ledger-meta {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 58px;
  padding: 4px 18px;
  border-left: 1px solid var(--line);
}

.profile-ledger-meta span,
.profile-ledger-columns,
.profile-ledger-meta strong {
  overflow-wrap: anywhere;
}

.profile-ledger-meta span {
  color: var(--muted) !important;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.profile-ledger-meta strong {
  color: var(--ink) !important;
  font-size: 14px;
  line-height: 1.25;
}

.profile-ledger-meta strong.is-good { color: var(--green) !important; }
.profile-ledger-meta strong.is-bad { color: var(--red) !important; }

.profile-ledger-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 26px;
}

.profile-ledger-main {
  min-width: 0;
}

.profile-ledger-columns {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(220px, 1.35fr) minmax(160px, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 18px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-ledger-columns span:last-child {
  text-align: right;
  white-space: nowrap;
}

.profile-ledger #profileForm {
  display: contents;
}

.profile-ledger .profile-ledger-row {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-ledger .profile-ledger-heading {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(220px, 1.35fr) minmax(160px, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 17px 0;
  cursor: pointer;
}

.profile-ledger-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.profile-ledger-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--soft) 76%, var(--panel));
  color: var(--green) !important;
  font-size: 20px;
}

.profile-ledger .profile-sec-title {
  display: block;
  color: var(--ink) !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.profile-ledger .profile-sec-title::before {
  display: none;
}

.profile-ledger .profile-section-heading p {
  max-width: 38ch;
  margin: 4px 0 0;
  color: var(--muted) !important;
  font-size: 12px;
  line-height: 1.4;
}

.profile-ledger-current,
.profile-ledger-managed {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.profile-ledger-current strong {
  color: var(--ink) !important;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-ledger-current strong + strong {
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 600;
}

.profile-ledger-managed {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted) !important;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.profile-ledger-managed .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--green) !important;
  font-size: 17px;
}

.profile-ledger .profile-collapse-toggle {
  justify-self: end;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}

.profile-ledger-row-body {
  display: grid;
  gap: 14px;
  padding: 0 0 18px 50px;
}

.profile-ledger-row-body .profile-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-ledger-row-body .profile-info-item {
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.profile-ledger-row-body .profile-info-item span {
  color: var(--muted) !important;
  font-size: 10px;
}

.profile-ledger-row-body .profile-info-item strong {
  color: var(--ink) !important;
  font-size: 13px;
}

.profile-ledger .profile-edit-grid,
.profile-ledger .profile-password-grid,
.profile-ledger .profile-preference-grid {
  gap: 12px 18px;
  margin-top: 0;
}

.profile-ledger .profile-edit-grid label,
.profile-ledger .profile-password-grid label,
.profile-ledger .profile-preference-grid label {
  gap: 5px;
}

.profile-ledger .profile-edit-grid label > span,
.profile-ledger .profile-password-grid label > span,
.profile-ledger .profile-preference-grid label > span {
  color: var(--muted) !important;
  font-size: 11px;
  font-weight: 800;
}

.profile-ledger .profile-edit-grid input,
.profile-ledger .profile-password-grid input,
.profile-ledger .profile-preference-grid input,
.profile-ledger .profile-preference-grid select {
  min-height: 38px;
  color: var(--ink) !important;
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

.profile-ledger .profile-edit-grid label > strong {
  min-height: 38px;
  color: var(--ink) !important;
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

.profile-company-logo-editor {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 5%, var(--panel));
}

.profile-company-logo-preview {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.profile-company-logo,
.profile-company-logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.profile-company-logo {
  object-fit: contain;
}

.profile-company-logo-fallback {
  color: var(--green);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
}

.profile-company-logo-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-company-logo-copy > strong {
  color: var(--ink);
  font-size: 13px;
}

.profile-company-logo-copy > p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.profile-logo-upload {
  width: max-content;
  cursor: pointer;
}

.profile-logo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.profile-company-logo-copy small {
  color: var(--muted);
  font-size: 10px;
}

.profile-ledger .profile-permission-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.profile-ledger-activity {
  min-width: 0;
  margin: 0;
  padding: 18px 0 0 22px !important;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-ledger-activity .profile-section-heading {
  display: flex;
  align-items: start;
  margin: 0 0 16px;
  padding: 0;
}

.profile-ledger-activity .profile-section-heading .profile-sec-title {
  font-size: 18px;
}

.profile-ledger-activity .profile-collapse-toggle {
  margin-left: auto;
}

.profile-ledger-activity .profile-activity-list {
  position: relative;
  gap: 0;
  padding-left: 14px;
}

.profile-ledger-activity .profile-activity-list::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 3px;
  width: 1px;
  background: var(--line);
  content: '';
}

.profile-ledger-activity .profile-activity-list li {
  position: relative;
  display: grid;
  justify-content: start;
  gap: 4px;
  padding: 0 0 20px 20px;
  border: 0;
  border-radius: 0;
}

.profile-ledger-activity .profile-activity-list li::before {
  position: absolute;
  top: 5px;
  left: -15px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px var(--green);
  content: '';
}

.profile-ledger-activity .profile-activity-list li strong {
  color: var(--ink) !important;
  font-size: 13px;
}

.profile-ledger-activity .profile-activity-list li span {
  color: var(--green) !important;
  font-size: 11px;
}

.profile-ledger-activity .profile-empty-state {
  display: block;
  padding-left: 0;
  color: var(--muted) !important;
}

.profile-ledger-activity .profile-empty-state::before {
  display: none;
}

.profile-ledger-footer {
  position: sticky;
  bottom: -26px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding: 16px 0 2px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, var(--panel) 24%);
}

.profile-ledger-footer .profile-session-action {
  justify-content: flex-start;
  padding: 0;
}

.profile-ledger-footer .profile-session-action .logout-outline {
  min-width: 150px;
  min-height: 42px;
}

.profile-ledger-footer .profile-action-bar {
  position: static;
  padding: 0;
  background: transparent;
}

.profile-ledger-footer .profile-action-bar button {
  min-width: 170px;
  min-height: 42px;
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}

.profile-ledger-footer .profile-action-bar button:hover {
  filter: brightness(.94);
}

@media (max-width: 980px) {
  #detailDrawer:has(.profile-ledger) {
    width: calc(100vw - 20px);
  }

  #detailDrawer:has(.profile-ledger) .drawer-head,
  #detailDrawer:has(.profile-ledger) .drawer-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .profile-ledger-identity {
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(120px, 1fr));
    padding: 16px;
  }

  .profile-ledger-layout {
    grid-template-columns: 1fr;
  }

  .profile-ledger-activity {
    padding: 18px 0 0 !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }
}

@media (max-width: 700px) {
  #detailDrawer:has(.profile-ledger) {
    width: 100vw;
  }

  #detailDrawer:has(.profile-ledger) .drawer-head,
  #detailDrawer:has(.profile-ledger) .drawer-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .profile-ledger-intro {
    display: grid;
    gap: 10px;
  }

  .profile-ledger-identity {
    grid-template-columns: 1fr 1fr;
    gap: 12px 0;
  }

  .profile-identity-person {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .profile-ledger-meta {
    min-height: 0;
    padding: 0 12px;
  }

  .profile-ledger-meta:nth-of-type(2n) {
    border-left: 0;
  }

  .profile-ledger-columns {
    display: none;
  }

  .profile-ledger .profile-ledger-heading {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 10px;
    padding: 14px 0;
  }

  .profile-ledger-current,
  .profile-ledger-managed {
    grid-column: 1 / -1;
    padding-left: 50px;
  }

  .profile-ledger-row-body {
    padding-left: 0;
  }

  .profile-ledger-row-body .profile-info-grid,
  .profile-ledger .profile-edit-grid,
  .profile-ledger .profile-password-grid,
  .profile-ledger .profile-preference-grid {
    grid-template-columns: 1fr;
  }

  .profile-company-logo-editor {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .profile-company-logo-preview {
    width: 60px;
    height: 60px;
  }

  .profile-ledger-footer {
    grid-template-columns: 1fr;
    bottom: -14px;
    gap: 10px;
  }

  .profile-ledger-footer .profile-session-action,
  .profile-ledger-footer .profile-action-bar,
  .profile-ledger-footer .profile-action-bar button,
  .profile-ledger-footer .profile-session-action .logout-outline {
    width: 100%;
  }
}

/* ============================================================
   COLLECTION VIDEO JOURNAL — embedded review workbench
   YouTube links and internal review decisions are persisted in Supabase.
   ============================================================ */
.internal-video-review-shell { display: grid; gap: 16px; }
.internal-video-review-intro { margin: 0; }
.internal-video-review-intro .panel-title { align-items: flex-start; }
.cvj-workbench-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.internal-video-review-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.internal-video-review-rules span { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--soft) 62%, transparent); color: var(--muted); font-size: 11px; }
.internal-video-review-rules strong { color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.collection-video-journal {
  --cvj-surface: var(--panel);
  --cvj-soft: var(--soft);
  --cvj-border: var(--line);
  --cvj-accent-soft: color-mix(in srgb, var(--green) 12%, transparent);
  display: grid;
  gap: 14px;
  margin: 12px 0;
  padding: 18px;
  color: var(--ink);
  background: var(--cvj-surface);
  border: 1px solid var(--cvj-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.cvj-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cvj-heading h2 { margin: 3px 0 2px; font-size: 21px; line-height: 1.15; color: var(--ink); }
.cvj-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.cvj-role-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 999px; padding: 8px 12px; color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; }
.cvj-role-badge .material-symbols-rounded { font-size: 16px; }
.cvj-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .72fr); gap: 12px; align-items: start; }
.cvj-layout.is-full { grid-template-columns: minmax(0, 1fr); }
.cvj-main { min-width: 0; }
.cvj-featured { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(220px, .78fr); overflow: hidden; height: 320px; min-height: 0; background: var(--cvj-surface); border: 1px solid var(--cvj-border); border-radius: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.cvj-featured-media { position: relative; height: 320px; min-height: 0; overflow: hidden; background: #17221b; }
.cvj-featured-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgba(0,0,0,.18)); pointer-events: none; }
.cvj-featured-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(.92); }
.cvj-featured-embed { display: block; width: 100%; height: 100%; border: 0; background: #111; }
.cvj-play-button { position: absolute; z-index: 2; inset: 50% auto auto 50%; display: grid; place-items: center; width: 68px; height: 48px; padding: 0; transform: translate(-50%, -50%); background: #ff1744; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .15s ease, filter .15s ease; }
.cvj-play-button:hover { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.1); }
.cvj-play-button .material-symbols-rounded { font-size: 31px; color: #fff; }
.cvj-youtube-badge { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 8px; color: #fff; background: rgba(0,0,0,.86); font-size: 11px; font-weight: 800; }
.cvj-youtube-badge .material-symbols-rounded { font-size: 16px; color: #ff1744; }
.cvj-featured-info { display: grid; align-content: center; gap: 10px; padding: 18px; overflow: hidden; }
.cvj-kicker, .cvj-section-heading .cvj-count { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.cvj-featured-info h3 { margin: 0; max-width: 17ch; color: var(--ink); font-size: 20px; line-height: 1.2; }
.cvj-featured-info dl { display: grid; gap: 8px; margin: 0; }
.cvj-featured-info dl div { display: grid; gap: 4px; }
.cvj-featured-info dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.cvj-featured-info dt .material-symbols-rounded { font-size: 16px; color: var(--green); }
.cvj-featured-info dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.cvj-featured-source { display: flex; align-items: center; gap: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink); }
.cvj-featured-source > .material-symbols-rounded { color: #ff1744; font-size: 21px; }
.cvj-featured-source span:last-child { display: grid; gap: 2px; }
.cvj-featured-source strong { font-size: 12px; }
.cvj-featured-source small { color: var(--muted); font-size: 11px; }
.cvj-logs { margin-top: 12px; padding: 14px 16px 10px; background: var(--cvj-surface); border: 1px solid var(--cvj-border); border-radius: 15px; }
.cvj-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cvj-section-heading > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cvj-section-heading h3, .cvj-admin-title h3 { margin: 0; color: var(--ink); font-size: 16px; }
.cvj-section-heading p, .cvj-admin-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.cvj-section-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--green); background: var(--cvj-accent-soft); }
.cvj-section-icon .material-symbols-rounded { font-size: 20px; }
.cvj-table-wrap { overflow-x: auto; border: 1px solid var(--cvj-border); border-radius: 12px; }
.cvj-table-wrap table { min-width: 700px; }
.cvj-table-wrap th { padding: 10px 12px; color: var(--muted) !important; background: var(--cvj-soft) !important; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cvj-table-wrap td { padding: 12px; color: var(--ink); border-bottom: 1px solid var(--cvj-border); vertical-align: middle; }
.cvj-table-wrap tr:last-child td { border-bottom: 0; }
.cvj-table-wrap td strong, .cvj-table-wrap td small { display: block; }
.cvj-table-wrap td strong { color: var(--ink); font-size: 12px; }
.cvj-table-wrap td small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.cvj-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 999px; color: var(--green); background: var(--cvj-accent-soft); font-size: 10px; font-weight: 800; white-space: nowrap; }
.cvj-status.is-pending { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.cvj-status.is-issue { color: var(--red, #d85c52); border-color: color-mix(in srgb, var(--red, #d85c52) 34%, var(--line)); background: color-mix(in srgb, var(--red, #d85c52) 10%, transparent); }
.cvj-status.is-verified { color: var(--green); border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: color-mix(in srgb, var(--green) 12%, transparent); }
.cvj-status.is-archived { color: var(--muted); border-color: var(--cvj-border); background: color-mix(in srgb, var(--cvj-soft) 86%, transparent); }
.cvj-status .material-symbols-rounded, .cvj-watch-button .material-symbols-rounded { font-size: 15px; vertical-align: middle; }
.cvj-watch-button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cvj-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cvj-row-actions button { display: inline-flex; align-items: center; gap: 4px; }
.cvj-table-wrap tr.is-archived { opacity: .72; }
.cvj-table-foot { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.cvj-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.cvj-pagination > div { display: inline-flex; align-items: center; gap: 9px; }
.cvj-pagination strong { color: var(--ink); white-space: nowrap; }
.cvj-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.cvj-toolbar { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(150px, .7fr) minmax(180px, .8fr) auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.cvj-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.cvj-toolbar input, .cvj-toolbar select { min-height: 40px; border-color: var(--cvj-border); background: var(--cvj-soft); color: var(--ink); font-size: 12px; }
.cvj-queue-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.cvj-queue-summary span { display: grid; gap: 1px; min-width: 62px; padding: 7px 9px; border: 1px solid var(--cvj-border); border-radius: 9px; color: var(--muted); background: color-mix(in srgb, var(--cvj-soft) 75%, transparent); font-size: 9px; text-transform: uppercase; }
.cvj-queue-summary strong { color: var(--ink); font-size: 14px; }
.cvj-queue-summary.is-side { margin-top: 4px; }
.cvj-empty { padding: 24px !important; color: var(--muted) !important; text-align: center; }
.cvj-empty-state { display: grid; place-items: center; gap: 7px; min-height: 180px; padding: 28px; color: var(--muted); text-align: center; background: var(--cvj-surface); border: 1px dashed var(--cvj-border); border-radius: 15px; }
.cvj-empty-state .material-symbols-rounded { color: var(--green); font-size: 30px; }
.cvj-empty-state strong { color: var(--ink); font-size: 15px; }
.cvj-empty-state span:last-child { font-size: 11px; }
.cvj-side { min-width: 0; }
.cvj-admin-card { display: grid; gap: 14px; height: 100%; box-sizing: border-box; padding: 18px; background: var(--cvj-surface); border: 1px solid var(--cvj-border); border-radius: 15px; }
.cvj-admin-title { display: flex; align-items: flex-start; gap: 10px; }
.cvj-admin-form { display: grid; gap: 15px; }
.cvj-admin-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
.cvj-admin-form input, .cvj-admin-form select { min-height: 45px; border-color: var(--cvj-border); background: var(--cvj-soft); color: var(--ink); }
.cvj-privacy { display: flex; gap: 9px; padding-top: 4px; color: var(--muted); }
.cvj-privacy > .material-symbols-rounded { flex: 0 0 auto; color: var(--green); font-size: 20px; }
.cvj-privacy strong { display: block; color: var(--ink); font-size: 12px; }
.cvj-privacy p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; }
.cvj-add-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; background: var(--green); color: #06231f; }
.cvj-add-button:hover { filter: brightness(1.08); }
.cvj-add-button .material-symbols-rounded { font-size: 20px; }
.cvj-form-message { margin: 0; color: var(--green); font-size: 11px; line-height: 1.45; }
.cvj-form-message.is-error { color: var(--red, #d85c52); }
.cvj-review-card { display: grid; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--cvj-border); }
.cvj-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cvj-review-head h4 { margin: 3px 0 0; color: var(--ink); font-size: 15px; }
.cvj-review-help, .cvj-review-meta { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.cvj-review-note-label { display: grid; gap: 6px; color: var(--ink); font-size: 11px; font-weight: 800; }
.cvj-review-note-label textarea { min-height: 76px; resize: vertical; border-color: var(--cvj-border); background: var(--cvj-soft); color: var(--ink); font-size: 12px; }
.cvj-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cvj-review-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--cvj-border); border-radius: 9px; font-size: 11px; font-weight: 800; }
.cvj-review-actions .material-symbols-rounded { font-size: 17px; }
.cvj-review-verify { color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--cvj-surface)); }
.cvj-review-issue { color: var(--red, #d85c52); background: color-mix(in srgb, var(--red, #d85c52) 11%, var(--cvj-surface)); }
.cvj-review-actions button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cvj-record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 2px; }
.cvj-record-actions button, .cvj-restore-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; border: 1px solid var(--cvj-border); border-radius: 9px; font-size: 10px; font-weight: 800; }
.cvj-record-actions button .material-symbols-rounded, .cvj-restore-button .material-symbols-rounded { font-size: 16px; }
.cvj-record-actions .is-danger { color: var(--red, #d85c52); background: color-mix(in srgb, var(--red, #d85c52) 8%, var(--cvj-surface)); }
.cvj-restore-button { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--cvj-surface)); }
.cvj-internal-note { display: grid; gap: 3px; margin: 0; padding: 9px 10px; border-radius: 9px; color: var(--muted); background: var(--cvj-soft); font-size: 10px; line-height: 1.45; }
.cvj-internal-note strong { color: var(--ink); }
.cvj-review-readonly { display: grid; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.cvj-review-readonly small { color: var(--muted); font-size: 10px; }
.collection-video-form-overlay .center-modal { width: min(780px, calc(100vw - 28px)); }
.cvj-link-form { display: grid; gap: 16px; }
.cvj-link-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cvj-link-form label, .cvj-status-reason { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.cvj-link-form label > span { color: var(--muted); font-size: 10px; font-weight: 500; }
.cvj-link-form-wide { grid-column: 1 / -1; }
.cvj-link-form input, .cvj-link-form select, .cvj-link-form textarea, .cvj-status-reason textarea { width: 100%; box-sizing: border-box; border-color: var(--cvj-border); background: var(--cvj-soft); color: var(--ink); }
.cvj-link-form input, .cvj-link-form select { min-height: 44px; }
.cvj-link-form textarea, .cvj-status-reason textarea { resize: vertical; }
.cvj-link-assurance { display: flex; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 12px; color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); }
.cvj-link-assurance.is-warning { color: var(--red, #d85c52); border-color: color-mix(in srgb, var(--red, #d85c52) 28%, var(--line)); background: color-mix(in srgb, var(--red, #d85c52) 8%, transparent); }
.cvj-link-assurance > .material-symbols-rounded { flex: 0 0 auto; font-size: 21px; }
.cvj-link-assurance p { display: grid; gap: 3px; margin: 0; }
.cvj-link-assurance strong { color: var(--ink); font-size: 12px; }
.cvj-link-assurance p span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.cvj-link-form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.cvj-link-form-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; }
.cvj-link-form-actions button:disabled { cursor: wait; opacity: .55; }
html[data-theme="forest_canopy"] .collection-video-journal { --cvj-surface: rgba(255,255,255,.76); --cvj-soft: rgba(20,60,30,.055); --cvj-border: rgba(20,60,30,.16); box-shadow: 0 12px 30px rgba(20,80,40,.08); }
html[data-theme="forest_canopy"] .cvj-featured-media { background: #dcebdc; }
html[data-theme="forest_canopy"] .cvj-add-button { color: #fff; }
html[data-theme="forest_canopy"] .cvj-table-wrap th { color: var(--muted) !important; }
html[data-theme="carbon_dark"] .collection-video-journal, :root .collection-video-journal { box-shadow: 0 14px 35px rgba(0,0,0,.18); }
@media (max-width: 1180px) {
  .cvj-layout, .cvj-layout.is-full { grid-template-columns: 1fr; }
  .cvj-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cvj-admin-card { height: auto; min-height: 0; }
}
@media (max-width: 760px) {
  .internal-video-review-rules { grid-template-columns: 1fr; }
  .cvj-workbench-actions { justify-content: flex-start; }
  .collection-video-journal { padding: 16px; border-radius: 15px; }
  .cvj-heading { display: grid; gap: 10px; }
  .cvj-role-badge { width: fit-content; }
  .cvj-featured { grid-template-columns: 1fr; height: auto; }
  .cvj-featured-media, .cvj-featured-media img { min-height: 210px; height: 210px; }
  .cvj-featured-info { padding: 18px; }
  .cvj-side { grid-template-columns: 1fr; }
  .cvj-logs { padding: 14px; }
  .cvj-section-heading { align-items: flex-start; }
  .cvj-count { white-space: nowrap; }
  .cvj-toolbar { grid-template-columns: 1fr; }
  .cvj-queue-summary { min-height: 0; }
  .cvj-pagination { align-items: flex-start; flex-direction: column; }
  .cvj-pagination > div { width: 100%; justify-content: space-between; }
  .cvj-review-actions { grid-template-columns: 1fr; }
  .cvj-record-actions, .cvj-link-form-grid { grid-template-columns: 1fr; }
  .cvj-link-form-wide { grid-column: auto; }
  .cvj-link-form-actions { display: grid; grid-template-columns: 1fr; }
}

/* Phase 1: customer impact sharing stays inside the existing Overview flow. */
.impact-share-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 24px; align-items: stretch; padding: 24px; overflow: hidden; background: #f4f7ef; border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line)); }
.impact-share-panel::before { content: ''; position: absolute; inset: -12px; z-index: 0; background-image: url("assets/recovery/overview-forest-depth-v1.png"); background-repeat: no-repeat; background-size: cover; background-position: center 72%; opacity: .62; filter: saturate(1.06) contrast(1.03); transform: scale(1.04) translate3d(-1%, 0, 0); animation: impactShareForestDrift 24s ease-in-out infinite alternate; pointer-events: none; }
.impact-share-panel::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(250, 252, 245, .30); pointer-events: none; }
.impact-share-panel > * { position: relative; z-index: 1; }
@keyframes impactShareForestDrift { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.09) translate3d(1%, -1%, 0); } }
.impact-share-panel-copy { min-width: 0; }
.impact-share-panel-copy h2 { margin: 5px 0 8px; color: var(--ink); font-size: clamp(22px, 3vw, 31px); line-height: 1.12; }
.impact-share-panel-copy p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.55; }
.impact-share-mini-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.impact-share-mini-metrics span { display: grid; gap: 2px; min-width: 124px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.impact-share-mini-metrics strong { color: var(--ink); font-size: 16px; }
.impact-share-mini-metrics small, .impact-share-panel-action small { color: var(--muted); font-size: 11px; }
.impact-share-panel-action { display: grid; align-content: center; justify-items: start; gap: 6px; min-width: 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.impact-share-panel-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 12px; color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); font-size: 21px; }
.impact-share-panel-action strong { max-width: 100%; overflow-wrap: anywhere; color: var(--ink); font-size: 15px; }
.impact-share-panel-action > small { max-width: 100%; overflow-wrap: anywhere; }
.impact-share-open-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; margin-top: 10px; border: 0; border-radius: 10px; color: #fff; background: var(--green); font-weight: 800; }
.impact-share-open-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.impact-share-open-btn .material-symbols-rounded { font-size: 18px; }
.impact-share-panel-note { margin-top: 2px; line-height: 1.4; }
.impact-share-panel-compact { grid-template-columns: minmax(0, 1fr) minmax(390px, .72fr); gap: 18px; align-items: center; min-height: 154px; padding: 14px 22px; }
.impact-share-panel-compact .impact-share-panel-copy { display: grid; grid-template-columns: minmax(245px, .86fr) minmax(260px, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "eyebrow metrics" "title metrics" "description metrics"; column-gap: 24px; align-items: center; }
.impact-share-panel-compact .impact-share-panel-copy > .eyebrow { grid-area: eyebrow; }
.impact-share-panel-compact .impact-share-panel-copy h2 { grid-area: title; margin: 2px 0 3px; font-size: clamp(20px, 2.2vw, 26px); }
.impact-share-panel-compact .impact-share-panel-copy p { grid-area: description; max-width: 48ch; margin: 0; font-size: 12px; line-height: 1.35; }
.impact-share-panel-compact .impact-share-mini-metrics { grid-area: metrics; align-self: center; margin-top: 0; gap: 8px; }
.impact-share-panel-compact .impact-share-mini-metrics span { min-width: 98px; padding: 8px 10px; border-radius: 10px; }
.impact-share-panel-compact .impact-share-mini-metrics strong { font-size: 14px; }
.impact-share-panel-compact .impact-share-panel-action { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon company" "icon period" "button button" "note note"; align-content: center; gap: 3px 9px; padding: 12px 14px; border-radius: 13px; }
.impact-share-panel-compact .impact-share-panel-icon { grid-area: icon; align-self: start; width: 32px; height: 32px; margin: 0 2px 0 0; font-size: 18px; }
.impact-share-panel-compact .impact-share-panel-action strong { grid-area: company; font-size: 14px; line-height: 1.2; }
.impact-share-panel-compact .impact-share-panel-action > small:not(.impact-share-panel-note) { grid-area: period; line-height: 1.2; }
.impact-share-panel-compact .impact-share-open-btn { grid-area: button; min-height: 38px; margin-top: 7px; }
.impact-share-panel-compact .impact-share-panel-note { grid-area: note; margin-top: 1px; font-size: 10px; }
.impact-share-overlay { z-index: 1100; }
.impact-share-overlay .center-modal { width: min(1180px, calc(100vw - 32px)); max-height: min(900px, calc(100vh - 32px)); }
.impact-share-overlay .center-modal-body { padding: 0; overflow: auto; }
.impact-share-modal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); min-height: 600px; background: var(--surface); }
.impact-share-preview-column { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 24px; background: color-mix(in srgb, var(--green) 5%, var(--surface)); border-right: 1px solid var(--line); }
.impact-share-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.impact-share-preview-head h3 { margin: 5px 0 0; color: var(--ink); font-size: 20px; }
.impact-share-live-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); border-radius: 999px; color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); font-size: 10px; font-weight: 800; white-space: nowrap; }
.impact-share-live-badge .material-symbols-rounded { font-size: 15px; }
.impact-share-canvas-wrap { display: grid; place-items: center; min-height: 520px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 84%, var(--green)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent); }
#impactShareCanvas { display: block; width: min(100%, 590px); height: auto; aspect-ratio: 1 / 1; border-radius: 0; box-shadow: 0 14px 32px rgba(12, 46, 29, .18); }
.impact-share-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.impact-share-controls { display: grid; align-content: start; gap: 22px; min-width: 0; padding: 24px; background: var(--surface); }
.impact-share-format-summary { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.impact-share-format-summary strong { color: var(--ink); font-size: 15px; }
.impact-share-format-summary small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.impact-share-format-list { display: grid; gap: 8px; margin-top: 10px; }
.impact-share-format { display: grid; gap: 3px; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: color-mix(in srgb, var(--surface) 86%, var(--green)); text-align: left; }
.impact-share-format:hover, .impact-share-format.is-active { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.impact-share-format span { font-size: 13px; font-weight: 800; }
.impact-share-format small { color: var(--muted); font-size: 11px; }
.impact-share-plan-field { display: grid; gap: 8px; color: var(--ink); }
.impact-share-plan-field textarea { width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box; }
.impact-share-plan-field > small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.impact-share-action-group { display: grid; gap: 10px; }
.impact-share-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.impact-share-action-grid button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 10px; font-size: 12px; }
.impact-share-action-grid button:first-child { grid-column: 1 / -1; }
.impact-share-action-grid .material-symbols-rounded { font-size: 17px; }
.impact-share-scope-note { display: flex; gap: 8px; margin: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line)); border-radius: 11px; color: var(--muted); background: color-mix(in srgb, var(--amber) 8%, transparent); font-size: 11px; line-height: 1.45; }
.impact-share-scope-note .material-symbols-rounded { flex: 0 0 auto; color: var(--amber); font-size: 17px; }
html[data-theme="forest_canopy"] .impact-share-panel { box-shadow: 0 12px 30px rgba(20, 80, 40, .08); }
html[data-theme="forest_canopy"] .impact-share-panel::after { background: rgba(250, 252, 245, .30); }
html[data-theme="forest_canopy"] .impact-share-panel-action { background: rgba(255,255,255,.72); }
html[data-theme="forest_canopy"] .impact-share-open-btn { background: #235c3b; box-shadow: 0 10px 20px rgba(35, 92, 59, .18); }
html[data-theme="forest_canopy"] .impact-share-open-btn:hover { background: #1b4c30; box-shadow: 0 12px 24px rgba(35, 92, 59, .24); filter: none; }
html[data-theme="carbon_dark"] .impact-share-panel { background: linear-gradient(135deg, rgba(47,155,87,.17), var(--surface)); border-color: rgba(116, 210, 145, .25); }
html[data-theme="carbon_dark"] .impact-share-panel::before { opacity: .12; }
html[data-theme="carbon_dark"] .impact-share-panel::after { background: rgba(9, 21, 14, .72); }
html[data-theme="carbon_dark"] .impact-share-panel-action, html[data-theme="carbon_dark"] .impact-share-canvas-wrap { background: rgba(11, 27, 19, .66); border-color: rgba(116, 210, 145, .24); }
html[data-theme="carbon_dark"] .impact-share-mini-metrics span, html[data-theme="carbon_dark"] .impact-share-format { background: rgba(255,255,255,.035); border-color: rgba(116, 210, 145, .2); }
html[data-theme="carbon_dark"] .impact-share-format:hover, html[data-theme="carbon_dark"] .impact-share-format.is-active { background: rgba(66, 180, 101, .18); border-color: #74d291; }
html[data-theme="carbon_dark"] .impact-share-modal, html[data-theme="carbon_dark"] .impact-share-controls { background: #111a15; }
html[data-theme="carbon_dark"] .impact-share-preview-column { background: #0d2117; border-color: rgba(116, 210, 145, .2); }
html[data-theme="carbon_dark"] .impact-share-format-summary { background: rgba(66, 180, 101, .12); border-color: rgba(116, 210, 145, .28); }
@media (max-width: 900px) {
  .impact-share-modal { grid-template-columns: 1fr; }
  .impact-share-preview-column { border-right: 0; border-bottom: 1px solid var(--line); }
  .impact-share-canvas-wrap { min-height: 340px; }
  #impactShareCanvas { width: min(100%, 520px); }
}
@media (max-width: 700px) {
  .impact-share-panel { grid-template-columns: 1fr; padding: 18px; }
  .impact-share-panel-action { padding: 15px; }
  .impact-share-preview-column, .impact-share-controls { padding: 16px; }
  .impact-share-preview-head { display: grid; }
  .impact-share-live-badge { width: fit-content; }
  .impact-share-action-grid { grid-template-columns: 1fr; }
  .impact-share-action-grid button:first-child { grid-column: auto; }
  .impact-share-panel-compact { min-height: 0; gap: 12px; padding: 15px; }
  .impact-share-panel-compact .impact-share-panel-copy { display: grid; grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "description" "metrics"; gap: 0; }
  .impact-share-panel-compact .impact-share-mini-metrics { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-share-panel::before { animation: none; }
}

/* Overview fidelity pass — keeps the existing Control Tower shell, while the
   customer Overview content follows the selected visual reference. */
html[data-theme="forest_canopy"] #view-customer .client-overview-impact,
html[data-theme="forest_canopy"] #view-customer .client-overview-share {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-impact > *,
html[data-theme="forest_canopy"] #view-customer .client-overview-share > * {
  position: relative;
  z-index: 1;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-impact-art {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  pointer-events: none;
  opacity: .34;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-impact-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% center;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share-art {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 39%;
  pointer-events: none;
  opacity: .28;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 57%;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-share > div:not(.client-overview-share-art) {
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  html[data-theme="forest_canopy"] #view-customer .client-overview-impact-art {
    width: 58%;
    opacity: .16;
  }

  html[data-theme="forest_canopy"] #view-customer .client-overview-share-art {
    width: 55%;
    opacity: .18;
  }
}

html[data-theme="forest_canopy"] #view-customer .client-overview-orgbar {
  min-height: 72px;
  padding: 14px 20px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-period-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-period-label .material-symbols-rounded {
  color: var(--green);
  font-size: 14px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-metric-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-metric-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 2px;
  border: 1px solid #d6e8d9;
  border-radius: 50%;
  background: #eff8f0;
  color: var(--green);
  font-size: 15px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-info {
  color: var(--green);
  font-size: 13px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid #d5e8d8;
  border-radius: 999px;
  background: #eef8ef;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-score-note .material-symbols-rounded {
  font-size: 14px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-grid {
  grid-template-columns: minmax(300px, 1.08fr) minmax(300px, 1.24fr) minmax(250px, .92fr);
  gap: 18px;
  min-height: 144px;
  margin-top: 14px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie {
  display: grid;
  gap: 6px;
  min-width: 0;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-layout {
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  min-height: 124px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-chart {
  width: 124px;
  height: 124px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole {
  width: 74px;
  height: 74px;
  padding: 5px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole strong {
  font-size: 13px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole span,
html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole small {
  font-size: 9px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-legend {
  gap: 4px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-item {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 7px;
  padding: 1px 4px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-item strong {
  font-size: 11px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-item small {
  font-size: 10px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-table .client-overview-label {
  display: block;
  margin-bottom: 6px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-material-cta {
  min-height: 124px;
  padding: 14px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-lower-grid {
  grid-template-columns: minmax(0, 1.22fr) minmax(390px, .98fr);
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-media {
  min-height: 145px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-video-media img {
  min-height: 145px;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-trend {
  --chart-line: #2c9fa8;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-trend .line-path {
  stroke: #2c9fa8;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-trend .line-point circle {
  fill: #fff;
  stroke: #2c9fa8;
}

html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole strong,
html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole span,
html[data-theme="forest_canopy"] #view-customer .client-overview-pie .pie-hole small {
  visibility: hidden;
}

.account-integrity-panel {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid rgba(43, 145, 82, .24);
  border-radius: 16px;
  background: rgba(239, 249, 241, .72);
}

.account-integrity-warning {
  border-color: rgba(196, 133, 25, .35);
  background: rgba(255, 248, 228, .8);
}

.account-integrity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.account-integrity-head h3,
.account-integrity-panel h3 {
  margin: 4px 0 4px;
}

.account-integrity-head p,
.account-integrity-panel p {
  margin: 0;
  color: var(--muted);
}

.account-integrity-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(43, 145, 82, .24);
  border-radius: 999px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.account-integrity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.account-integrity-grid article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(43, 145, 82, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.account-integrity-grid strong {
  color: var(--ink);
  font-size: 22px;
}

.account-integrity-grid span,
.account-integrity-list span,
.account-integrity-list small {
  color: var(--muted);
  font-size: 12px;
}

.account-integrity-list {
  display: grid;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(43, 145, 82, .14);
}

.account-integrity-list b {
  font-size: 12px;
}

@media (max-width: 820px) {
  .account-integrity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-integrity-head {
    display: grid;
  }
}

/* ============================================================
   Goals & Campaigns — redesigned master section (.gc-page)
   White, unified surface; status colour reserved for pace/mission
   state. Self-contained: every value is explicit so it holds on any
   host theme. Scoped to #view-customer so nothing else is touched.
   ============================================================ */
#view-customer .gc-page {
  --gc-plane: #f4f7f9;
  --gc-surface: #ffffff;
  --gc-surface-2: #f1f4f7;
  --gc-surface-3: #e9eef3;
  --gc-line: #e3e7ec;
  --gc-line-2: #d3dae1;
  --gc-ink: #101828;
  --gc-ink-2: #45546a;
  --gc-muted: #7a8698;
  --gc-accent: #235e9e;
  --gc-accent-soft: #eaf1f9;
  --gc-good: #0f7d38;
  --gc-warn: #9a6a12;
  --gc-crit: #b5322b;
  --gc-good-bg: #e6f4e9;
  --gc-warn-bg: #f9f0dd;
  --gc-crit-bg: #f8e7e6;
  --gc-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 24px;
  color: var(--gc-ink);
  font-size: 14px;
  line-height: 1.5;
}
#view-customer .gc-page * { box-sizing: border-box; }
/* Every direct grid/flex child must be allowed to shrink below its content
   width, or a wide chart / SVG / table pushes the whole page past the phone
   viewport (portal roles clip x-overflow, so it just gets cut off). */
#view-customer .gc-page .gc-card,
#view-customer .gc-cols > *,
#view-customer .gc-charts > *,
#view-customer .gc-mission-inner > * { min-width: 0; }
#view-customer .gc-card {
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: 18px 20px;
}
#view-customer .gc-eyebrow {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gc-accent); margin: 0 0 6px;
}
#view-customer .gc-eyebrow-sm { color: var(--gc-muted); margin-bottom: 2px; }
#view-customer .gc-muted { color: var(--gc-muted); font-size: 12px; }
#view-customer .gc-num { font-variant-numeric: tabular-nums; }
#view-customer .gc-sub { font-size: 10.5px; color: var(--gc-muted); }
#view-customer .gc-co { font-weight: 600; color: var(--gc-ink); }
#view-customer .gc-page h1 { font-size: 20px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
#view-customer .gc-page h2 { font-size: 16px; font-weight: 700; margin: 0; }
#view-customer .gc-page h4 { font-size: 12.5px; font-weight: 600; margin: 0 0 2px; }
#view-customer .gc-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
#view-customer .gc-head p { margin: 2px 0 0; }
#view-customer .gc-link-btn, #view-customer .gc-ghost-btn, #view-customer .gc-row-btn {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: var(--gc-accent); background: none;
  border: 1px solid var(--gc-line-2); border-radius: 7px; padding: 5px 10px;
}
#view-customer .gc-link-btn { border: none; padding: 4px 2px; }
#view-customer .gc-page button:focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 2px; }

/* status tags */
#view-customer .gc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
#view-customer .gc-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#view-customer .gc-tag-good { background: var(--gc-good-bg); color: var(--gc-good); }
#view-customer .gc-tag-warn { background: var(--gc-warn-bg); color: var(--gc-warn); }
#view-customer .gc-tag-crit { background: var(--gc-crit-bg); color: var(--gc-crit); }
#view-customer .gc-tag-neutral { background: var(--gc-surface-3); color: var(--gc-muted); }

/* zone 1 — mission strip */
#view-customer .gc-mission { padding: 0; overflow: hidden; max-width: 100%; }
#view-customer .gc-mission-banner { height: 84px; overflow: hidden; border-bottom: 1px solid var(--gc-line); }
#view-customer .gc-mission-banner svg { display: block; width: 100%; max-width: 100%; height: 100%; }
#view-customer .gc-mission-inner { padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: flex-start; justify-content: space-between; }
#view-customer .gc-mission-lead { min-width: 220px; }
#view-customer .gc-pace { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
#view-customer .gc-pace i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#view-customer .gc-pace-good { background: var(--gc-good-bg); color: var(--gc-good); }
#view-customer .gc-pace-warn { background: var(--gc-warn-bg); color: var(--gc-warn); }
#view-customer .gc-pace-crit { background: var(--gc-crit-bg); color: var(--gc-crit); }
#view-customer .gc-pace-neutral { background: var(--gc-surface-3); color: var(--gc-muted); }
#view-customer .gc-mission-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
#view-customer .gc-stat { min-width: 84px; }
#view-customer .gc-stat .l { display: block; font-size: 11px; color: var(--gc-muted); }
#view-customer .gc-stat .v { font-size: 17px; font-weight: 600; color: var(--gc-ink); font-variant-numeric: tabular-nums; }
#view-customer .gc-stat .v small { font-size: 11px; font-weight: 500; color: var(--gc-muted); }
#view-customer .gc-stat-target { border: 1px solid var(--gc-accent); background: var(--gc-accent-soft); border-radius: 9px; padding: 7px 13px; }
#view-customer .gc-stat-target .l { color: var(--gc-accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
#view-customer .gc-stat-target .v, #view-customer .gc-stat-target .v small { color: var(--gc-accent); }
#view-customer .gc-stat-target .v { font-size: 20px; }
#view-customer .gc-track { width: 100%; height: 6px; border-radius: 999px; background: var(--gc-surface-3); overflow: hidden; margin-top: 4px; }
#view-customer .gc-track i { display: block; height: 100%; background: var(--gc-accent); border-radius: 999px; }

/* zone 2 — runway */
#view-customer .gc-runway-timeline { position: relative; margin: 2px 0 20px; }
#view-customer .gc-runway-track { position: absolute; left: 10%; right: 10%; top: 6px; height: 3px; background: var(--gc-surface-3); border-radius: 2px; }
#view-customer .gc-runway-track i { display: block; height: 100%; max-width: 100%; background: var(--gc-accent); border-radius: 2px; }
#view-customer .gc-runway-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
#view-customer .gc-runway-steps article { text-align: center; }
#view-customer .gc-runway-mk { display: block; width: 13px; height: 13px; margin: 0 auto 12px; border-radius: 50%; background: var(--gc-surface); border: 2px solid var(--gc-line-2); }
#view-customer .gc-runway-steps article.done .gc-runway-mk { background: var(--gc-accent); border-color: var(--gc-accent); }
#view-customer .gc-runway-steps article.now .gc-runway-mk { width: 17px; height: 17px; margin-bottom: 10px; background: var(--gc-accent); border-color: var(--gc-accent); box-shadow: 0 0 0 4px var(--gc-accent-soft); }
#view-customer .gc-runway-badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--gc-accent); background: var(--gc-accent-soft); border-radius: 999px; padding: 0 6px; margin-bottom: 3px; }
#view-customer .gc-runway-steps strong { display: block; font-size: 12px; }
#view-customer .gc-runway-steps small { display: block; font-size: 9.5px; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .03em; }
#view-customer .gc-runway-steps p { margin: 3px 0 0; font-size: 11px; color: var(--gc-ink-2); }
#view-customer .gc-snapshot { border-top: 1px solid var(--gc-line); padding-top: 14px; }
#view-customer .gc-head-sm { margin-bottom: 10px; }
#view-customer .gc-snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
#view-customer .gc-snapshot-grid button { font: inherit; text-align: left; cursor: pointer; background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
#view-customer .gc-snapshot-grid button:hover { border-color: var(--gc-accent); }
#view-customer .gc-snapshot-grid small { font-size: 11px; color: var(--gc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-customer .gc-snapshot-grid strong { font-size: 13px; font-variant-numeric: tabular-nums; }

/* zone 3 — board + action panel */
#view-customer .gc-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#view-customer .gc-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; }
#view-customer .gc-filters button { font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--gc-ink-2); background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 999px; padding: 4px 11px; }
#view-customer .gc-filters button.active { background: var(--gc-ink); color: #fff; border-color: var(--gc-ink); }
#view-customer .gc-table-wrap { overflow-x: auto; }
#view-customer .gc-board-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#view-customer .gc-board-table th { text-align: left; padding: 8px 10px; color: var(--gc-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--gc-line); }
#view-customer .gc-board-table td { padding: 10px; border-bottom: 1px solid var(--gc-line); vertical-align: top; }
#view-customer .gc-board-table tr:last-child td { border-bottom: none; }
#view-customer .gc-minitrack { display: inline-block; vertical-align: middle; width: 74px; height: 5px; background: var(--gc-surface-3); border-radius: 999px; overflow: hidden; }
#view-customer .gc-minitrack i { display: block; height: 100%; background: var(--gc-accent); }
#view-customer .gc-action { position: sticky; top: 16px; display: grid; gap: 12px; align-content: start; }
#view-customer .gc-pace-req { display: flex; gap: 12px; align-items: baseline; }
#view-customer .gc-pace-req strong { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
#view-customer .gc-pace-req span { font-size: 11px; color: var(--gc-muted); }
#view-customer .gc-action-list { display: grid; gap: 2px; }
#view-customer .gc-action-list button { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 9px; align-items: center; width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: none; border-radius: 7px; padding: 8px; color: var(--gc-ink); }
#view-customer .gc-action-list button:hover { background: var(--gc-surface-2); }
#view-customer .gc-action-list b { font-size: 11px; font-weight: 700; color: var(--gc-muted); }
#view-customer .gc-action-list .nm { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-customer .gc-action-list em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--gc-crit); font-variant-numeric: tabular-nums; }
#view-customer .gc-action-list .chev, #view-customer .gc-risk-line .chev { color: var(--gc-muted); }
#view-customer .gc-risk-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: none; border-top: 1px solid var(--gc-line); padding: 10px 8px; }
#view-customer .gc-risk-line b { font-size: 18px; font-weight: 700; margin-right: 8px; }
#view-customer .gc-risk-line small { font-size: 11px; color: var(--gc-muted); }
#view-customer .gc-evidence-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gc-line); border: 1px solid var(--gc-line); border-radius: 8px; overflow: hidden; }
#view-customer .gc-evidence-strip div { background: var(--gc-surface); padding: 8px 10px; }
#view-customer .gc-evidence-strip .l { display: block; font-size: 10px; color: var(--gc-muted); }
#view-customer .gc-evidence-strip .v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* zone 4 — planner */
#view-customer .gc-planner { padding: 0; box-shadow: 0 6px 22px rgba(16,24,40,.06); }
#view-customer .gc-planner-head { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: flex-start; padding: 18px 20px 0; }
#view-customer .gc-planner-head p { margin: 4px 0 0; max-width: 52ch; }
#view-customer .gc-planner-mini { text-align: right; border-left: 1px solid var(--gc-line); padding-left: 16px; }
#view-customer .gc-planner-mini .v { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
#view-customer .gc-planner-mini .l { font-size: 10.5px; color: var(--gc-muted); }
#view-customer .gc-ptabs { display: flex; gap: 2px; padding: 14px 20px 0; border-bottom: 1px solid var(--gc-line); }
#view-customer .gc-ptabs button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--gc-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 12px 11px; }
#view-customer .gc-ptabs button[aria-selected="true"] { color: var(--gc-ink); border-bottom-color: var(--gc-accent); }
#view-customer .gc-planner-body { padding: 18px 20px; display: grid; gap: 14px; }
#view-customer .gc-planner-lead { margin: 0; font-size: 12.5px; color: var(--gc-ink-2); }
#view-customer .gc-step { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gc-muted); }
#view-customer .gc-step b { width: 16px; height: 16px; border-radius: 4px; background: var(--gc-accent-soft); color: var(--gc-accent); display: grid; place-items: center; font-size: 10px; }
#view-customer .gc-period-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#view-customer .gc-pcell { border: 1px solid var(--gc-line); border-radius: 9px; padding: 10px 12px; background: var(--gc-surface-2); }
#view-customer .gc-lockbar { display: flex; gap: 9px; background: var(--gc-warn-bg); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--gc-ink-2); }
#view-customer .gc-lockbar i { flex-shrink: 0; width: 7px; height: 7px; margin-top: 4px; border-radius: 2px; background: var(--gc-warn); }
#view-customer .gc-lockbar b { color: var(--gc-warn); }
#view-customer .gc-goal-form { display: grid; grid-template-columns: 1fr; gap: 9px; }
#view-customer .gc-goal-form input:not([type="checkbox"]):not([type="radio"]) { font: inherit; font-size: 12.5px; border: 1px solid var(--gc-line-2); border-radius: 7px; padding: 8px 10px; background: var(--gc-surface); color: var(--gc-ink); }
#view-customer .gc-goal-form button { justify-self: start; font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; background: var(--gc-accent); color: #fff; border: none; border-radius: 7px; padding: 9px 18px; }
#view-customer .gc-goal-form .master-goal-triplet { display: grid; grid-template-columns: 96px 1fr 1fr; gap: 8px; align-items: center; }
#view-customer .gc-goal-form .master-goal-triplet label { font-size: 11.5px; font-weight: 600; color: var(--gc-ink-2); }
#view-customer .gc-select { font: inherit; font-size: 12.5px; border: 1px solid var(--gc-line-2); border-radius: 7px; padding: 8px 10px; background: var(--gc-surface); color: var(--gc-ink); max-width: 340px; }
#view-customer .gc-branch-selected { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 4px 0; }
#view-customer .gc-locked-note { font-size: 12px; color: var(--gc-ink-2); background: var(--gc-surface-2); border: 1px solid var(--gc-line); border-radius: 8px; padding: 10px 12px; }
#view-customer .gc-revise-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#view-customer .gc-msg-err { font-size: 12px; color: var(--gc-crit); }
#view-customer .gc-msg-ok { font-size: 12px; color: var(--gc-good); }
#view-customer .gc-campaign-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
#view-customer .gc-page .master-campaign-branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
#view-customer .gc-page .master-campaign-branches label { font-size: 12px; display: flex; gap: 6px; align-items: center; }

/* zone 5 — branch analytics */
#view-customer .gc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 4px; }
#view-customer .gc-tile { border: 1px solid var(--gc-line); border-radius: 9px; padding: 12px 14px; }
#view-customer .gc-tile .l { display: block; font-size: 11px; color: var(--gc-muted); }
#view-customer .gc-tile .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
#view-customer .gc-tile .v small { font-size: 12px; font-weight: 500; color: var(--gc-ink-2); }
#view-customer .gc-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
#view-customer .gc-chart-card { border: 1px solid var(--gc-line); border-radius: 9px; padding: 14px 16px 12px; }
#view-customer .gc-chart-card.gc-chart-wide { grid-column: 1 / -1; }
#view-customer .gc-chart-card p { margin: 0 0 8px; }
#view-customer .gc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
#view-customer .gc-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gc-ink-2); }
#view-customer .gc-legend i { width: 16px; height: 3px; border-radius: 2px; }
#view-customer .gc-svg-wrap { max-width: 100%; overflow-x: auto; }
#view-customer .gc-svg-wrap svg { width: 100%; min-width: 320px; height: auto; display: block; }
#view-customer .gc-svg-wrap .gc-grid { stroke: #e8ebef; stroke-width: 1; }
#view-customer .gc-svg-wrap .gc-axtext { fill: var(--gc-muted); font-size: 10px; font-family: inherit; }
#view-customer .gc-svg-wrap .gc-dlabel { fill: var(--gc-ink-2); font-size: 10.5px; font-weight: 600; font-family: inherit; }
#view-customer .gc-chart-empty { padding: 24px 0; text-align: center; }
#view-customer .gc-prog-rows { display: grid; gap: 12px; margin-top: 2px; }
#view-customer .gc-prog-row { display: grid; grid-template-columns: 130px 1fr 96px; gap: 12px; align-items: center; }
#view-customer .gc-prog-name { font-size: 12px; font-weight: 600; }
#view-customer .gc-prog-track { position: relative; height: 20px; background: var(--gc-surface-2); border-radius: 6px; overflow: hidden; }
#view-customer .gc-prog-track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px 0 0 6px; }
#view-customer .gc-prog-track .gc-prog-tick { position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; background: var(--gc-ink); border-radius: 0; }
#view-customer .gc-prog-val { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
#view-customer .gc-prog-val b { font-weight: 700; }
#view-customer .gc-datatable { margin-top: 12px; border-top: 1px solid var(--gc-line); padding-top: 8px; }
#view-customer .gc-datatable summary { font-size: 11.5px; font-weight: 600; color: var(--gc-accent); cursor: pointer; }
#view-customer .gc-datatable .gc-board-table td { font-variant-numeric: tabular-nums; }

/* planner — campaigns tab */
#view-customer .gc-campaign-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
#view-customer .gc-campaign-card { border: 1px solid var(--gc-line); border-radius: 9px; padding: 12px 14px; background: var(--gc-surface); display: grid; gap: 8px; align-content: start; }
#view-customer .gc-campaign-top { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
#view-customer .gc-campaign-top > div { min-width: 0; }
#view-customer .gc-campaign-top strong { font-size: 13px; }
#view-customer .gc-campaign-top .gc-sub { display: block; }
#view-customer .gc-campaign-meter { display: flex; align-items: center; gap: 8px; }
#view-customer .gc-campaign-meter .gc-minitrack { flex: 1; width: auto; }
#view-customer .gc-campaign-meter b { font-size: 11.5px; }
#view-customer .gc-campaign-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#view-customer .gc-campaign-kpis span { display: grid; gap: 1px; font-size: 10px; color: var(--gc-muted); }
#view-customer .gc-campaign-kpis b { font-size: 11.5px; color: var(--gc-ink); font-variant-numeric: tabular-nums; }
#view-customer .gc-campaign-next { margin: 0; font-size: 11.5px; color: var(--gc-ink-2); }
#view-customer .gc-campaign-next span { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--gc-muted); }
#view-customer .gc-campaign-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--gc-line); padding-top: 8px; }
#view-customer .gc-danger { color: var(--gc-crit); border-color: var(--gc-crit); }
#view-customer .gc-branch-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 10px; border: 1px solid var(--gc-line); border-radius: 8px; padding: 10px; background: var(--gc-surface-2); }
#view-customer .gc-branch-check { display: block; position: relative; padding: 5px 4px 5px 26px; font-size: 12px; line-height: 1.35; cursor: pointer; }
#view-customer .gc-branch-check input[type="checkbox"] { position: absolute; left: 2px; top: 6px; width: 14px; height: 14px; margin: 0; padding: 0; border-radius: 3px; background: var(--gc-surface); -webkit-appearance: auto; appearance: auto; }
#view-customer .gc-branch-check strong { display: block; font-weight: 600; color: var(--gc-ink); }
#view-customer .gc-branch-check small { display: block; font-size: 10.5px; color: var(--gc-muted); }
#view-customer .gc-campaign-status-actions { display: flex; flex-wrap: wrap; gap: 4px; }
#view-customer .gc-status-btn { font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--gc-ink-2); background: var(--gc-surface-2); border: 1px solid var(--gc-line-2); border-radius: 6px; padding: 3px 9px; }
#view-customer .gc-status-btn.is-selected { background: var(--gc-accent); color: #fff; border-color: var(--gc-accent); }
#view-customer .gc-status-btn.gc-danger { background: none; }
#view-customer .gc-page .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--gc-surface-3); color: var(--gc-muted); }
#view-customer .gc-page .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#view-customer .gc-page .pill.green { background: var(--gc-good-bg); color: var(--gc-good); }
#view-customer .gc-page .pill.amber { background: var(--gc-warn-bg); color: var(--gc-warn); }
#view-customer .gc-page .pill.red { background: var(--gc-crit-bg); color: var(--gc-crit); }
#view-customer .gc-page .pill.blue { background: var(--gc-accent-soft); color: var(--gc-accent); }
#view-customer .gc-page .master-campaign-message.error { color: var(--gc-crit); }
#view-customer .gc-page .master-campaign-message.success { color: var(--gc-good); }

/* planner — reused goalProgressCell markup inside .gc-pcell */
#view-customer .gc-pcell .master-goal-cell { display: grid; gap: 5px; padding: 0; border: 0; background: none; }
#view-customer .gc-pcell .master-goal-cell-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--gc-muted); }
#view-customer .gc-pcell .master-goal-status { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--gc-surface-3); color: var(--gc-muted); }
#view-customer .gc-pcell .master-goal-status.active { background: var(--gc-warn-bg); color: var(--gc-warn); }
#view-customer .gc-pcell .master-goal-status.achieved { background: var(--gc-good-bg); color: var(--gc-good); }
#view-customer .gc-pcell .master-goal-amount, #view-customer .gc-pcell .master-goal-empty-value { font-size: 13px; font-weight: 600; color: var(--gc-ink); font-variant-numeric: tabular-nums; }
#view-customer .gc-pcell .master-goal-amount span { font-size: 10.5px; font-weight: 500; color: var(--gc-muted); }
#view-customer .gc-pcell .master-mini-track { height: 5px; background: var(--gc-surface-3); border-radius: 999px; overflow: hidden; }
#view-customer .gc-pcell .master-mini-track i { display: block; height: 100%; background: var(--gc-accent); }
#view-customer .gc-pcell .master-goal-cell-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--gc-muted); font-variant-numeric: tabular-nums; }
#view-customer .gc-pcell .master-goal-cell-note { font-size: 10px; color: var(--gc-muted); }

@media (max-width: 1000px) {
  #view-customer .gc-cols { grid-template-columns: minmax(0, 1fr); }
  #view-customer .gc-action { position: static; }
  #view-customer .gc-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #view-customer .gc-tiles,
  #view-customer .gc-period-cells,
  #view-customer .gc-campaign-kpis { grid-template-columns: 1fr 1fr; }
  #view-customer .gc-runway-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  #view-customer .gc-runway-track { display: none; }
  #view-customer .gc-goal-form .master-goal-triplet { grid-template-columns: 1fr; }
  #view-customer .gc-prog-row { grid-template-columns: 1fr; gap: 4px; }
  #view-customer .gc-mission-banner { height: 60px; }
  #view-customer .gc-mission-inner { padding: 16px; gap: 14px; }
  #view-customer .gc-planner-head { padding: 16px 16px 0; }
  #view-customer .gc-planner-mini { border-left: 0; padding-left: 0; text-align: left; }
  #view-customer .gc-planner-body,
  #view-customer .gc-card:not(.gc-mission):not(.gc-planner) { padding-left: 16px; padding-right: 16px; }
  #view-customer .gc-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  #view-customer .gc-branch-checks { grid-template-columns: 1fr; }
  #view-customer .gc-campaign-cards { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  #view-customer .gc-tiles,
  #view-customer .gc-period-cells,
  #view-customer .gc-campaign-kpis { grid-template-columns: 1fr; }
  #view-customer .gc-mission-stats { gap: 8px 16px; }
  #view-customer .gc-stat { min-width: 72px; }
}

/*
   Goals & Campaigns — Recovery Campaign Canvas (legacy, dormant)
   Retained only so any cached markup degrades gracefully; the section
   now renders through .gc-page above.
*/
#view-customer .master-campaign-canvas-page {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  padding: 24px;
  overflow: visible;
  background-color: #f7f5eb;
  background-image: url('/assets/recovery/overview-forest-depth-v1.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  color: #173923;
}

#view-customer .master-campaign-canvas-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(250, 250, 244, .84);
  border-radius: 20px;
}

#view-customer .master-campaign-mission-header,
#view-customer .master-campaign-runway,
#view-customer .master-campaign-evidence-ledger,
#view-customer .master-campaign-attention,
#view-customer .master-campaign-next-30,
#view-customer .master-campaign-branch-board,
#view-customer .master-campaign-canvas-page .master-chart-card {
  border: 1px solid rgba(38, 99, 57, .16);
  border-radius: 18px;
  background: rgba(255, 255, 252, .88);
  box-shadow: 0 12px 30px rgba(35, 70, 45, .06);
}

#view-customer .master-campaign-mission-header {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(620px, 1.55fr);
  gap: 22px;
  align-items: center;
  padding: 28px 30px;
}

#view-customer .master-campaign-mission-copy h1 {
  max-width: 16ch;
  margin: 8px 0 10px;
  color: #173923;
  font-size: clamp(32px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.045em;
}

#view-customer .master-campaign-mission-copy p {
  max-width: 64ch;
  margin: 0;
  color: #607467;
}

#view-customer .master-campaign-alert {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: #214c2e;
  font-size: 13px;
}

#view-customer .master-campaign-alert .pill {
  border: 1px solid #d8b456;
  background: #fff8df;
  color: #7a5c16;
}

#view-customer .master-campaign-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#view-customer .master-campaign-kpi-row article {
  min-height: 92px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 12px;
  border: 1px solid rgba(38, 99, 57, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}

#view-customer .master-campaign-kpi-icon,
#view-customer .master-campaign-kpi-progress {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf5eb;
  color: #1d7640;
}

#view-customer .master-campaign-kpi-icon {
  font-size: 22px;
}

#view-customer .master-campaign-kpi-progress {
  border: 3px solid #83b78c;
  background: #fbfdf8;
  font-size: 10px;
  font-weight: 900;
}

#view-customer .master-campaign-kpi-row article > div {
  min-width: 0;
}

#view-customer .master-campaign-kpi-row article > div > span,
#view-customer .master-campaign-kpi-row article > div > strong {
  display: block;
}

#view-customer .master-campaign-kpi-row article > div > span {
  color: #607467;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-customer .master-campaign-kpi-row article > div > strong {
  margin-top: 6px;
  color: #173923;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.05;
  white-space: nowrap;
}

#view-customer .master-campaign-canvas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 16px;
  align-items: start;
}

#view-customer .master-campaign-content {
  min-width: 0;
  display: grid;
  gap: 16px;
  /* Reset the global bare `main { grid-column: 2; grid-row: 1 }` rule
     (styles.css ~3260), which otherwise leaks into this nested <main> and
     swaps it into the narrow sidebar track of .master-campaign-canvas-layout. */
  grid-column: auto;
  grid-row: auto;
}

#view-customer .master-campaign-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

#view-customer .master-campaign-section-head h2 {
  margin: 4px 0 0;
  color: #173923;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -.02em;
}

#view-customer .master-campaign-section-head p {
  margin: 5px 0 0;
}

#view-customer .master-campaign-runway {
  padding: 24px 20px 18px;
}

#view-customer .master-campaign-runway-remaining {
  max-width: 34ch;
  color: #42614b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

#view-customer .master-campaign-runway-lede {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(38, 99, 57, .12);
}

#view-customer .master-campaign-runway-lede strong {
  color: #2d9750;
  font-size: 30px;
  line-height: 1;
}

#view-customer .master-campaign-runway-lede span {
  color: #31513b;
  font-size: 14px;
  font-weight: 800;
}

#view-customer .master-runway-timeline {
  position: relative;
  padding: 34px 8px 12px;
}

#view-customer .master-runway-track {
  position: absolute;
  top: 68px;
  left: 8%;
  right: 8%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #c4cec5;
}

#view-customer .master-runway-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2d9750;
}

#view-customer .master-runway-milestones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

#view-customer .master-runway-milestones article {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  text-align: center;
}

#view-customer .master-runway-marker {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fdfdf9;
  box-shadow: 0 0 0 2px #274a31;
  color: #274a31;
}

#view-customer .master-runway-marker .material-symbols-rounded {
  font-size: 17px;
}

#view-customer .master-runway-milestones article.complete .master-runway-marker,
#view-customer .master-runway-milestones article.current .master-runway-marker {
  background: #2d9750;
  color: #fff;
}

#view-customer .master-runway-milestones article.checkpoint .master-runway-marker {
  border-color: #d8b456;
  box-shadow: 0 0 0 2px #bd8c18;
  color: #a3710e;
}

#view-customer .master-runway-milestones article.finish .master-runway-marker {
  width: 38px;
  height: 38px;
  margin-top: -4px;
  background: #eaf3e5;
}

#view-customer .master-runway-badge {
  min-width: 58px;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid #b7d2bc;
  border-radius: 999px;
  background: #eef6ed;
  color: #295a36;
  font-size: 11px;
}

#view-customer .master-runway-milestones strong {
  margin-top: 7px;
  color: #173923;
  font-size: 12px;
}

#view-customer .master-runway-milestones small {
  color: #67806d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

#view-customer .master-runway-milestones p {
  max-width: 18ch;
  margin: 2px 0 0;
  color: #587060;
  font-size: 11px;
  line-height: 1.35;
}

#view-customer .master-branch-snapshot {
  margin-top: 8px;
  padding: 14px 12px 4px;
  border-top: 1px solid rgba(38, 99, 57, .12);
}

#view-customer .master-branch-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

#view-customer .master-branch-snapshot-grid button {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 8px;
  border: 1px solid rgba(38, 99, 57, .13);
  border-radius: 10px;
  background: rgba(245, 250, 243, .72);
  color: #173923;
  text-align: left;
}

#view-customer .master-branch-snapshot-grid button:hover,
#view-customer .master-branch-snapshot-grid button:focus-visible {
  border-color: #6da87a;
  background: #eef7ed;
}

#view-customer .master-branch-snapshot-grid button > .material-symbols-rounded {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e4f0e1;
  color: #287745;
  font-size: 17px;
}

#view-customer .master-branch-snapshot-grid button small,
#view-customer .master-branch-snapshot-grid button strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-customer .master-branch-snapshot-grid button small {
  color: #607467;
  font-size: 10px;
}

#view-customer .master-branch-snapshot-grid button strong {
  margin-top: 3px;
  font-size: 13px;
}

#view-customer .master-campaign-evidence-ledger {
  padding: 18px 20px;
}

#view-customer .master-evidence-ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#view-customer .master-evidence-ledger-grid article {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid rgba(38, 99, 57, .14);
}

#view-customer .master-evidence-ledger-grid article:last-child {
  border-right: 0;
}

#view-customer .master-evidence-ledger-grid article > .material-symbols-rounded {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f3e6;
  color: #287745;
}

#view-customer .master-evidence-ledger-grid article > div,
#view-customer .master-evidence-ledger-grid article span,
#view-customer .master-evidence-ledger-grid article strong,
#view-customer .master-evidence-ledger-grid article small {
  display: block;
}

#view-customer .master-evidence-ledger-grid article span {
  color: #607467;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#view-customer .master-evidence-ledger-grid article strong {
  margin-top: 5px;
  color: #173923;
  font-size: 19px;
}

#view-customer .master-evidence-ledger-grid article small {
  margin-top: 3px;
  color: #6c8172;
  font-size: 10px;
  line-height: 1.3;
}

#view-customer .master-campaign-attention {
  padding: 20px;
}

#view-customer .master-campaign-attention-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

#view-customer .master-campaign-attention-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(38, 99, 57, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .76);
}

#view-customer .master-campaign-attention-card > .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf4e9;
  color: #287745;
  font-size: 18px;
}

#view-customer .master-campaign-attention-card:nth-child(1) > .material-symbols-rounded,
#view-customer .master-campaign-attention-card:nth-child(4) > .material-symbols-rounded {
  background: #fff3d8;
  color: #a3710e;
}

#view-customer .master-campaign-attention-card small,
#view-customer .master-campaign-attention-card strong,
#view-customer .master-campaign-attention-card p {
  display: block;
}

#view-customer .master-campaign-attention-card small {
  color: #607467;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#view-customer .master-campaign-attention-card strong {
  margin-top: 5px;
  color: #173923;
  font-size: 20px;
}

#view-customer .master-campaign-attention-card p {
  min-height: 42px;
  margin: 6px 0 10px;
  color: #607467;
  font-size: 11px;
  line-height: 1.35;
}

#view-customer .master-campaign-attention-card button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid rgba(38, 99, 57, .12);
  border-radius: 0;
  background: transparent;
  color: #214c2e;
  text-align: left;
}

#view-customer .master-campaign-next-30 {
  position: sticky;
  top: 16px;
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 18px;
}

#view-customer .master-campaign-next-30 h2 {
  max-width: 18ch;
  font-size: 20px;
  line-height: 1.05;
}

#view-customer .master-next-pace-card,
#view-customer .master-next-risk,
#view-customer .master-next-list button {
  border: 1px solid rgba(38, 99, 57, .14);
  border-radius: 12px;
  background: rgba(247, 251, 245, .82);
}

#view-customer .master-next-pace-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

#view-customer .master-next-pace-card > .material-symbols-rounded,
#view-customer .master-next-risk > .material-symbols-rounded:first-child {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f1e3;
  color: #287745;
}

#view-customer .master-next-pace-card span,
#view-customer .master-next-pace-card strong,
#view-customer .master-next-pace-card small {
  display: block;
}

#view-customer .master-next-pace-card span {
  color: #607467;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#view-customer .master-next-pace-card strong {
  margin-top: 4px;
  color: #173923;
  font-size: 22px;
}

#view-customer .master-next-pace-card small {
  margin-top: 3px;
  color: #607467;
  font-size: 11px;
}

#view-customer .master-next-list {
  display: grid;
  gap: 7px;
}

#view-customer .master-next-list > .eyebrow {
  margin: 2px 0 3px;
}

#view-customer .master-next-list button {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 18px;
  gap: 7px;
  align-items: center;
  padding: 10px;
  color: #214c2e;
  text-align: left;
}

#view-customer .master-next-list button:hover,
#view-customer .master-next-list button:focus-visible,
#view-customer .master-next-risk:hover,
#view-customer .master-next-risk:focus-visible {
  border-color: #6da87a;
  background: #eef7ed;
}

#view-customer .master-next-list button b {
  color: #607467;
  font-size: 12px;
}

#view-customer .master-next-list button span:not(.material-symbols-rounded) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

#view-customer .master-next-list button em {
  padding: 3px 6px;
  border: 1px solid #e1c06e;
  border-radius: 999px;
  background: #fff8df;
  color: #8a6617;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

#view-customer .master-next-list button > .material-symbols-rounded,
#view-customer .master-next-risk > .material-symbols-rounded:last-child {
  color: #287745;
  font-size: 18px;
}

#view-customer .master-next-risk {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: #214c2e;
  text-align: left;
}

#view-customer .master-next-risk > span:nth-child(2) {
  min-width: 0;
}

#view-customer .master-next-risk small,
#view-customer .master-next-risk strong,
#view-customer .master-next-risk em {
  display: block;
}

#view-customer .master-next-risk small {
  color: #607467;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#view-customer .master-next-risk strong {
  margin-top: 3px;
  color: #173923;
  font-size: 18px;
}

#view-customer .master-next-risk em {
  margin-top: 2px;
  color: #607467;
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

#view-customer .master-next-action {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid #1f7c43;
  border-radius: 10px;
  background: #267d44;
  color: #fff;
  font-weight: 900;
}

#view-customer .master-campaign-branch-board,
#view-customer .master-campaign-content > .master-goal-control-row,
#view-customer .master-campaign-content > .master-chart-grid {
  width: 100%;
  min-width: 0;
}

#view-customer .master-campaign-branch-board {
  padding: 20px;
}

#view-customer .master-campaign-content > .master-goal-control-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#view-customer .master-campaign-content > .master-goal-control-row > .master-chart-card {
  min-width: 0;
}

#view-customer .master-campaign-content > .master-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#view-customer .master-campaign-content > .master-chart-grid .mp-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#view-customer .master-goal-control-row .master-goal-details[open] .master-slide-body,
#view-customer .master-goal-details[open] .master-slide-body {
  border-color: #b5ceb7 !important;
  border-radius: 20px !important;
  background: #fbfdf8 !important;
  box-shadow: 0 28px 80px rgba(24, 58, 32, .26) !important;
}

#view-customer .master-goal-details[open] > summary {
  border: 1px solid #1f7c43 !important;
  background: #1f7c43 !important;
}

#view-customer .master-goal-details[open] .master-slide-body::before {
  content: 'RECOVERY CAMPAIGN WORKSPACE';
  display: block;
  margin-bottom: 10px;
  color: #2d9750;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

#view-customer .master-goal-details[open] .master-slide-body h2 {
  color: #173923 !important;
  letter-spacing: -.02em;
}

#view-customer .master-goal-details[open] .master-slide-body .master-goal-period-grid,
#view-customer .master-goal-details[open] .master-slide-body .master-goal-form,
#view-customer .master-goal-details[open] .master-slide-body .master-campaign-form {
  gap: 10px;
}

#view-customer .master-goal-details[open] .master-slide-body .master-goal-period-card,
#view-customer .master-goal-details[open] .master-slide-body .master-goal-triplet,
#view-customer .master-goal-details[open] .master-slide-body .master-campaign-purpose,
#view-customer .master-goal-details[open] .master-slide-body .master-campaign-challenge,
#view-customer .master-goal-details[open] .master-slide-body .warning-note,
#view-customer .master-goal-details[open] .master-slide-body .master-goal-locked-note {
  border-color: rgba(38, 99, 57, .14);
  border-radius: 12px;
  background: #f3f8f0;
}

#view-customer .master-goal-details[open] .master-slide-body input,
#view-customer .master-goal-details[open] .master-slide-body select,
#view-customer .master-goal-details[open] .master-slide-body textarea {
  border-color: rgba(38, 99, 57, .22);
  background: #fff;
  color: #173923;
}

#view-customer .master-goal-details[open] .master-slide-body input:focus,
#view-customer .master-goal-details[open] .master-slide-body select:focus,
#view-customer .master-goal-details[open] .master-slide-body textarea:focus {
  border-color: #2d9750;
  outline: 3px solid rgba(45, 151, 80, .16);
}

@media (max-width: 1280px) {
  #view-customer .master-campaign-mission-header {
    grid-template-columns: 1fr;
  }

  #view-customer .master-campaign-mission-copy h1 {
    max-width: none;
  }

  #view-customer .master-campaign-canvas-layout {
    grid-template-columns: 1fr;
  }

  #view-customer .master-campaign-next-30 {
    position: static;
  }
}

@media (max-width: 900px) {
  #view-customer .master-campaign-canvas-page {
    padding: 14px;
  }

  #view-customer .master-campaign-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #view-customer .master-runway-milestones {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    min-width: 760px;
  }

  #view-customer .master-runway-timeline {
    overflow-x: auto;
  }

  #view-customer .master-branch-snapshot-grid,
  #view-customer .master-campaign-attention-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-customer .master-evidence-ledger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-customer .master-evidence-ledger-grid article:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 620px) {
  #view-customer .master-campaign-mission-header,
  #view-customer .master-campaign-runway,
  #view-customer .master-campaign-evidence-ledger,
  #view-customer .master-campaign-attention,
  #view-customer .master-campaign-next-30,
  #view-customer .master-campaign-branch-board {
    padding: 16px;
    border-radius: 14px;
  }

  #view-customer .master-campaign-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-customer .master-campaign-kpi-row article:last-child {
    grid-column: 1 / -1;
  }

  #view-customer .master-campaign-section-head {
    display: grid;
  }

  #view-customer .master-campaign-runway-remaining {
    max-width: none;
    text-align: left;
  }

  #view-customer .master-branch-snapshot-grid,
  #view-customer .master-campaign-attention-grid,
  #view-customer .master-evidence-ledger-grid {
    grid-template-columns: 1fr;
  }

  #view-customer .master-evidence-ledger-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(38, 99, 57, .12);
  }

  #view-customer .master-evidence-ledger-grid article:last-child {
    border-bottom: 0;
  }

  #view-customer .master-campaign-attention-card p {
    min-height: 0;
  }
}

/* Option 3 fidelity fix: the legacy global main rule was constraining the
   canvas to one viewport and shrinking the first four grid tracks. */
#view-customer .master-campaign-canvas-page,
#view-customer .master-campaign-canvas-page .master-campaign-canvas-layout,
#view-customer .master-campaign-canvas-page .master-campaign-content {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

#view-customer .master-campaign-canvas-page .master-campaign-runway,
#view-customer .master-campaign-canvas-page .master-campaign-evidence-ledger,
#view-customer .master-campaign-canvas-page .master-campaign-attention,
#view-customer .master-campaign-canvas-page .master-campaign-branch-board {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

@media (min-width: 1281px) {
  #view-customer .master-campaign-mission-header {
    grid-template-columns: minmax(520px, .95fr) minmax(620px, 1.55fr);
  }

  #view-customer .master-campaign-mission-copy h1 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(32px, 3vw, 48px);
  }
}

/* Campaign slide-in table: keep each status control inside its own row and
   prevent long branch names from pushing the action column off-screen. */
#view-customer .master-goal-details[open] .master-campaign-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

#view-customer .master-goal-details[open] .master-campaign-table table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
}

#view-customer .master-goal-details[open] .master-campaign-table th,
#view-customer .master-goal-details[open] .master-campaign-table td {
  min-width: 0;
  padding: 10px 8px;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

#view-customer .master-goal-details[open] .master-campaign-table th:nth-child(1),
#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(1) { width: 21%; }
#view-customer .master-goal-details[open] .master-campaign-table th:nth-child(2),
#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(2) { width: 10%; }
#view-customer .master-goal-details[open] .master-campaign-table th:nth-child(3),
#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(3) { width: 15%; }
#view-customer .master-goal-details[open] .master-campaign-table th:nth-child(4),
#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(4) { width: 19%; }
#view-customer .master-goal-details[open] .master-campaign-table th:nth-child(5),
#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(5) { width: 13%; }
#view-customer .master-goal-details[open] .master-campaign-table th:nth-child(6),
#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(6) { width: 22%; }

#view-customer .master-goal-details[open] .master-campaign-table td > strong,
#view-customer .master-goal-details[open] .master-campaign-table td > small {
  display: block;
}

#view-customer .master-goal-details[open] .master-campaign-table td:nth-child(5) .pill {
  white-space: nowrap;
}

#view-customer .master-goal-details[open] .master-campaign-table td > small {
  margin-top: 4px;
  color: #607467;
  font-size: 10px;
  line-height: 1.25;
}

#view-customer .master-goal-details[open] .master-campaign-branch-list {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#view-customer .master-goal-details[open] .master-campaign-branch-list span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#view-customer .master-goal-details[open] .master-campaign-action-cell {
  display: table-cell !important;
  min-width: 0 !important;
  width: 22%;
}

#view-customer .master-goal-details[open] .master-campaign-actions-label {
  display: block;
  margin-bottom: 6px;
  color: #55705c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#view-customer .master-goal-details[open] .master-campaign-status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#view-customer .master-goal-details[open] .master-campaign-status-button {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 4px;
  font-size: 10px;
  line-height: 1.1;
  white-space: normal;
}

#view-customer .master-goal-details[open] .master-campaign-delete-action {
  margin-top: 6px;
}

#view-customer .master-goal-details[open] .master-campaign-delete-action button {
  width: 100%;
  min-width: 0;
  padding: 6px 5px;
  font-size: 10px;
  white-space: normal;
}

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-photo-actions .driver-primary-btn {
  border-color: #2e9e52 !important;
  background: #2e9e52 !important;
  color: #ffffff !important;
}

/* Master campaign UI repair: keep the existing forest-canopy system, but
   make the editor hierarchy and actions readable at a glance. */
#view-customer .master-campaign-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

#view-customer .master-campaign-count strong {
  font-size: 20px;
  line-height: 1;
}

#view-customer .master-campaign-count small {
  color: #55705c;
  font-size: 11px;
}

#view-customer .master-goal-details[open] {
  z-index: 1100 !important;
}

#view-customer .master-goal-details[open] > summary {
  top: 68px !important;
  right: 24px !important;
  z-index: 1200 !important;
  border: 1px solid #176c39 !important;
  background: #1f7c43 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(17, 83, 40, .28) !important;
}

#view-customer .master-goal-details[open] > summary::after {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

#view-customer .master-goal-details[open] .master-slide-body {
  max-height: min(86vh, 760px) !important;
  overflow-y: auto !important;
  padding: 34px 28px 28px !important;
}

#view-customer .master-campaign-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

#view-customer .master-campaign-form .master-campaign-branches,
#view-customer .master-campaign-form .master-campaign-submit {
  grid-column: 1 / -1;
}

#view-customer .master-campaign-form > .master-campaign-submit {
  width: min(100%, 310px);
  min-height: 42px;
  border: 1px solid #176c39;
  border-radius: 10px;
  background: #1f8f4d;
  color: #fff;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(31, 143, 77, .18);
}

#view-customer .master-campaign-form > .master-campaign-submit:hover,
#view-customer .master-campaign-form > .master-campaign-submit:focus-visible {
  background: #176c39;
  border-color: #10562d;
}

#view-customer .master-goal-details[open] .master-campaign-branches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

#view-customer .master-goal-details[open] .master-campaign-branches label {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 8px;
  align-content: start;
  padding: 9px 10px;
  border: 1px solid rgba(38, 99, 57, .2);
  border-radius: 10px;
  background: #f8fbf7;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

#view-customer .master-goal-details[open] .master-campaign-branches label:has(input:checked) {
  border-color: #2d9750;
  background: #eaf7ed;
  box-shadow: inset 0 0 0 1px rgba(45, 151, 80, .12);
}

#view-customer .master-goal-details[open] .master-campaign-branches label small {
  grid-column: 2;
  color: #607467;
  line-height: 1.25;
}

#view-customer .master-goal-details[open] .master-campaign-table {
  margin-top: 16px;
  border-radius: 14px;
  background: #fff;
}

#view-customer .master-goal-details[open] .master-campaign-status-button {
  min-height: 34px;
  padding: 7px 5px;
  border: 1px solid #b5ceb7 !important;
  border-radius: 8px;
  background: #fff !important;
  color: #173923 !important;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(24, 58, 32, .06);
}

#view-customer .master-goal-details[open] .master-campaign-status-button:hover,
#view-customer .master-goal-details[open] .master-campaign-status-button:focus-visible,
#view-customer .master-goal-details[open] .master-campaign-status-button.is-selected {
  border-color: #1f7c43 !important;
  background: #eaf7ed !important;
  color: #176c39 !important;
  box-shadow: inset 0 0 0 1px rgba(31, 124, 67, .12);
}

#view-customer .master-goal-details[open] .master-campaign-status-button:disabled {
  cursor: wait;
  opacity: .55;
}

#view-customer .master-goal-details[open] .master-campaign-delete-action button {
  min-height: 34px;
  border: 1px solid #e7b7b1 !important;
  border-radius: 8px;
  background: #fff4f2 !important;
  color: #b42318 !important;
  font-weight: 900;
}

#view-customer .master-goal-details[open] .master-campaign-delete-action button:hover,
#view-customer .master-goal-details[open] .master-campaign-delete-action button:focus-visible {
  background: #fde6e3 !important;
  border-color: #c94b40 !important;
}

/* The forest theme has a more specific important rule for summary bars.
   Keep the open-state close affordance green and high-contrast. */
html[data-theme="forest_canopy"] #view-customer .master-goal-details[open] > summary {
  background: #1f7c43 !important;
  color: #fff !important;
}

#view-customer .master-campaign-message {
  min-height: 20px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}

#view-customer .master-campaign-message.success { color: #176c39; }
#view-customer .master-campaign-message.error { color: #b42318; }

.app-text-input-modal { width: min(580px, calc(100vw - 28px)); }
.app-text-input-form { display: grid; gap: 14px; }
.app-text-input-message { margin: 0; color: var(--muted); line-height: 1.55; }
.app-text-input-field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.app-text-input-field textarea { width: 100%; min-height: 108px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--panel); color: var(--ink); font: inherit; line-height: 1.45; }
.app-text-input-field textarea:focus { border-color: var(--green); outline: 3px solid color-mix(in srgb, var(--green) 18%, transparent); }
.app-text-input-error { min-height: 18px; margin: 0; color: #b42318; }
.app-text-input-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
.app-text-input-actions button { min-width: 150px; }

.app-choice-input-modal { width: min(680px, calc(100vw - 28px)); }
.app-choice-input-form { display: grid; gap: 14px; }
.app-choice-input-message { margin: 0; color: var(--muted); line-height: 1.55; }
.app-choice-input-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.app-choice-input-field legend { padding: 0; font: inherit; }
.app-choice-input-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: min(52vh, 430px); overflow-y: auto; padding: 2px; }
.app-choice-input-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; min-height: 70px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.app-choice-input-option:hover, .app-choice-input-option:focus-within { border-color: var(--green); background: color-mix(in srgb, var(--green) 5%, var(--panel)); }
.app-choice-input-option:has(input:checked) { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); box-shadow: inset 3px 0 0 var(--green); }
.app-choice-input-option input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--green); }
.app-choice-input-option > span:nth-of-type(1) { display: grid; gap: 4px; min-width: 0; }
.app-choice-input-option strong { color: var(--ink); font-size: 12px; line-height: 1.25; }
.app-choice-input-option small { color: var(--muted); font-size: 10.5px; font-weight: 500; line-height: 1.35; }
.app-choice-input-check { color: var(--green); font-size: 18px; opacity: 0; }
.app-choice-input-option:has(input:checked) .app-choice-input-check { opacity: 1; }
.app-choice-input-error { min-height: 18px; margin: 0; color: #b42318; }
.app-choice-input-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
.app-choice-input-actions button { min-width: 150px; }
.app-choice-input-actions button:disabled { cursor: not-allowed; opacity: .48; }

.app-dialog-modal { width: min(540px, calc(100vw - 28px)); }
.app-dialog-content { display: grid; gap: 18px; }
.app-dialog-message { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.app-dialog-message p { margin: 0; color: var(--ink); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.app-dialog-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-size: 24px; }
.app-dialog-warning .app-dialog-message { border-color: #e8c66b; background: #fffaf0; }
.app-dialog-warning .app-dialog-icon { color: #9a6700; background: #fff0bd; }
.app-dialog-danger .app-dialog-message, .app-dialog-error .app-dialog-message { border-color: #efb4ae; background: #fff5f3; }
.app-dialog-danger .app-dialog-icon, .app-dialog-error .app-dialog-icon { color: #b42318; background: #fbd9d5; }
.app-dialog-success .app-dialog-message { border-color: #a9d8b7; background: #f1fbf3; }
.app-dialog-success .app-dialog-icon { color: #176c39; background: #d8f1df; }
.app-dialog-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
.app-dialog-actions button { min-width: 116px; }

html[data-theme="forest_canopy"] .app-text-input-modal { background: #fbfdf8; border-color: #b5ceb7; }
html[data-theme="forest_canopy"] .app-text-input-modal .center-modal-head { background: #f4faf2; }
html[data-theme="forest_canopy"] .app-choice-input-modal { background: #fbfdf8; border-color: #b5ceb7; }
html[data-theme="forest_canopy"] .app-choice-input-modal .center-modal-head { background: #f4faf2; }
html[data-theme="forest_canopy"] .app-choice-input-option { background: #fff; border-color: #d7e5d9; }
html[data-theme="forest_canopy"] .app-choice-input-option:hover, html[data-theme="forest_canopy"] .app-choice-input-option:focus-within { background: #f1f9f1; }
html[data-theme="forest_canopy"] .app-choice-input-option:has(input:checked) { background: #eaf7ec; }
html[data-theme="forest_canopy"] .app-dialog-modal { background: #fbfdf8; border-color: #b5ceb7; }
html[data-theme="forest_canopy"] .app-dialog-modal .center-modal-head { background: #f4faf2; }
html[data-theme="forest_canopy"] .app-dialog-warning .app-dialog-message { background: #fffaf0; }

@media (max-width: 620px) {
  .app-dialog-modal { width: calc(100vw - 20px); }
  .app-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .app-dialog-actions button { width: 100%; }
  .app-choice-input-modal { width: calc(100vw - 20px); }
  .app-choice-input-list { grid-template-columns: 1fr; max-height: 52vh; }
  .app-choice-input-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .app-choice-input-actions button { width: 100%; }
}

/* Keep the single-point monthly chart aligned with its only plotted point.
   The previous one-column grid centered the month label across the full card,
   making the label look detached from the point at the left edge. */
#view-customer .mc-recovery-chart-scroll { min-width: 0; max-width: 100%; }
#view-customer .mc-recovery-chart-inner.is-single-period { min-width: 0; width: 100%; }
#view-customer .mc-recovery-value-grid.is-single-period {
  position: relative;
  display: block;
  height: 35px;
  padding: 0;
}
#view-customer .mc-recovery-value-grid.is-single-period .mc-recovery-period {
  position: absolute;
  top: 0;
  left: 5%;
  width: max-content;
  transform: translateX(-50%);
}

/* Keep the close affordance attached to the centered editor instead of
   floating at the far edge of the dimmed page. */
#view-customer .master-goal-details[open] {
  place-items: start center !important;
  padding: 68px 24px 24px !important;
  overflow: auto !important;
}
#view-customer .master-goal-details[open] > summary {
  top: 68px !important;
  right: max(24px, calc(50% - min(380px, calc(50vw - 24px)))) !important;
}
#view-customer .master-goal-details[open] .master-slide-body {
  max-height: calc(100vh - 92px) !important;
}

/* The close glyph is an overlay inside the circular control. Removing it
   from the summary flex flow prevents the glyph's font side-bearing from
   shifting the X toward the right edge. */
#view-customer .master-goal-details[open] > summary::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translate(-50%, -50%) !important;
  background:
    linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%) !important;
}

@media (max-width: 760px) {
  #view-customer .master-goal-details[open] > summary {
    top: 58px !important;
    right: 16px !important;
  }

  #view-customer .master-goal-details[open] .master-campaign-form,
  #view-customer .master-goal-details[open] .master-campaign-branches {
    grid-template-columns: 1fr;
  }

  #view-customer .master-goal-details[open] .master-campaign-branches label {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  #view-customer .master-goal-details[open] {
    padding: 56px 12px 12px !important;
  }

  #view-customer .master-goal-details[open] > summary {
    top: 56px !important;
    right: 12px !important;
  }

  #view-customer .master-goal-details[open] .master-slide-body {
    max-height: calc(100vh - 68px) !important;
  }
}
/* Account V2: one clear identity register for Aspen internal and customer access. */
.account-v2 {
  --account-v2-ink: #173b2a;
  --account-v2-muted: #63786c;
  --account-v2-line: #d6e3d9;
  --account-v2-surface: rgba(255, 255, 255, .92);
  --account-v2-soft: #f2f8f3;
  --account-v2-green: #27884e;
  --account-v2-green-dark: #176b3a;
  display: grid;
  gap: 18px;
  width: 100%;
  color: var(--account-v2-ink);
}
.account-v2-hero,
.account-v2-page-head,
.account-v2-principle,
.account-v2-aspen-panel,
.account-v2-integrity-strip,
.account-v2-register-panel {
  border: 1px solid var(--account-v2-line);
  border-radius: 22px;
  background: var(--account-v2-surface);
  box-shadow: 0 14px 36px rgba(35, 82, 54, .07);
}
.account-v2-hero,
.account-v2-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 32px;
}
.account-v2-hero h1,
.account-v2-page-head h1 {
  margin: 5px 0 8px;
  color: var(--account-v2-ink);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.045em;
  line-height: 1;
}
.account-v2-hero p,
.account-v2-page-head p,
.account-v2-aspen-panel p,
.account-v2-integrity-strip p {
  max-width: 650px;
  margin: 0;
  color: var(--account-v2-muted);
  line-height: 1.55;
}
.account-v2-kicker,
.account-v2-card-kicker {
  display: block;
  color: #5e7a68;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.account-v2-hero-actions,
.account-v2-page-actions,
.account-v2-identity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.account-v2-button {
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.account-v2-button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(31, 92, 55, .14); }
.account-v2-button:focus-visible,
.account-v2-back:focus-visible,
.account-v2-action-card:focus-visible { outline: 3px solid rgba(39, 136, 78, .28); outline-offset: 2px; }
.account-v2-button-primary { background: var(--account-v2-green); color: #fff; }
.account-v2-button-primary:hover { background: var(--account-v2-green-dark); }
.account-v2-button-secondary { border-color: #b9d1bf; background: #fff; color: #1c5d36; }
.account-v2-button-secondary:hover { border-color: #70ab82; background: #f0f8f2; }
.account-v2-principle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-color: #b8dcc2;
  background: linear-gradient(100deg, #edf9f0, #f8fcf8);
}
.account-v2-principle-icon,
.account-v2-avatar,
.account-v2-card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #dff2e4;
  color: var(--account-v2-green-dark);
  font-weight: 900;
}
.account-v2-principle strong { display: block; margin-bottom: 3px; font-size: 15px; }
.account-v2-principle p { margin: 0; color: var(--account-v2-muted); font-size: 13px; line-height: 1.45; }
.account-v2-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.account-v2-chip-current { margin-left: auto; border-color: #b5d8bd; background: #fff; color: #287044; }
.account-v2-chip-review { border-color: #e3c879; background: #fff9e9; color: #876400; }
.account-v2-chip-danger { border-color: #edb8b0; background: #fff1ef; color: #9b3e35; }
.account-v2-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.account-v2-stat-grid article {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 18px 20px;
  border: 1px solid var(--account-v2-line);
  border-radius: 17px;
  background: rgba(255,255,255,.8);
}
.account-v2-stat-grid span,
.account-v2-identity-column span,
.account-v2-register-summary span { color: #698072; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.account-v2-stat-grid strong { font-size: 30px; letter-spacing: -.04em; }
.account-v2-stat-grid small,
.account-v2-identity-column small { color: var(--account-v2-muted); font-size: 12px; line-height: 1.35; }
.account-v2-stat-review { border-color: #ead4a0 !important; background: #fffaf0 !important; }
.account-v2-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-v2-action-card {
  display: grid;
  gap: 9px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--account-v2-line);
  border-radius: 17px;
  background: rgba(255,255,255,.86);
  color: var(--account-v2-ink);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.account-v2-action-card:hover { transform: translateY(-2px); border-color: #8fc29d; box-shadow: 0 12px 24px rgba(32, 89, 52, .11); }
.account-v2-card-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
.account-v2-card-icon-review { background: #fff0c8; color: #886000; }
.account-v2-action-card strong { font-size: 17px; }
.account-v2-action-card p { min-height: 54px; margin: 0; color: var(--account-v2-muted); font-size: 13px; line-height: 1.5; }
.account-v2-card-link { align-self: end; color: var(--account-v2-green-dark); font-size: 12px; font-weight: 850; }
.account-v2-aspen-panel,
.account-v2-integrity-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; background: #edf7ef; }
.account-v2-aspen-panel h2 { margin: 5px 0 5px; font-size: 20px; letter-spacing: -.025em; }
.account-v2-back { display: block; margin-bottom: 14px; padding: 0; border: 0; background: none; color: var(--account-v2-green-dark); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.account-v2-register-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--account-v2-line); border-radius: 17px; background: #fff; }
.account-v2-register-summary > div { display: grid; gap: 4px; min-height: 86px; padding: 17px 20px; border-right: 1px solid var(--account-v2-line); }
.account-v2-register-summary > div:last-child { border-right: 0; }
.account-v2-register-summary strong { font-size: 25px; letter-spacing: -.04em; }
.account-v2-register-panel { padding: 22px; }
.account-v2-register-toolbar { display: flex; align-items: end; gap: 12px; margin-bottom: 22px; }
.account-v2-search, .account-v2-filter { display: grid; gap: 6px; color: #5d7565; font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.account-v2-search { flex: 1 1 auto; }
.account-v2-filter { flex: 0 0 210px; }
.account-v2-search input, .account-v2-filter select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #cbdccf; border-radius: 10px; background: #fbfefb; color: var(--account-v2-ink); font: inherit; font-size: 13px; }
.account-v2-search input:focus, .account-v2-filter select:focus { outline: 3px solid rgba(39, 136, 78, .17); border-color: #6eb080; }
.account-v2-register-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.account-v2-register-heading h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.03em; }
.account-v2-count { color: #698072; font-size: 12px; font-weight: 800; }
.account-v2-identity-list { display: grid; gap: 10px; }
.account-v2-identity-card { display: grid; grid-template-columns: minmax(250px, 1.6fr) minmax(130px, .8fr) minmax(170px, 1fr) minmax(120px, .75fr) minmax(210px, 1.3fr); align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--account-v2-line); border-radius: 15px; background: #fff; }
.account-v2-identity-card.is-review { border-color: #ead7a6; background: #fffaf1; }
.account-v2-identity-main { display: flex; align-items: center; min-width: 0; gap: 11px; }
.account-v2-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
.account-v2-identity-main > div:last-child { min-width: 0; }
.account-v2-identity-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.account-v2-identity-title strong { font-size: 14px; }
.account-v2-identity-main p { overflow: hidden; margin: 3px 0 0; color: #2f6042; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-v2-identity-main small { display: block; overflow: hidden; margin-top: 4px; color: var(--account-v2-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-v2-identity-column { display: grid; gap: 3px; min-width: 0; }
.account-v2-identity-column strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-v2-identity-actions { justify-content: flex-start; }
.account-v2-action-note { color: #8a6a19; font-size: 11px; font-weight: 800; }
.account-v2-empty { padding: 42px 20px; border: 1px dashed #bbd1c0; border-radius: 14px; background: #f8fcf8; text-align: center; }
.account-v2-empty strong { display: block; margin-bottom: 5px; }
.account-v2-empty p { margin: 0; color: var(--account-v2-muted); font-size: 13px; }
.account-v2-integrity-strip { border-color: #c7ddcb; }
.account-v2-integrity-strip strong { display: block; margin: 4px 0; font-size: 16px; }
@media (max-width: 1180px) {
  .account-v2-action-grid, .account-v2-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-v2-identity-card { grid-template-columns: minmax(240px, 1.5fr) minmax(140px, 1fr) minmax(160px, 1fr); }
  .account-v2-identity-column:nth-of-type(3) { grid-column: 2; }
  .account-v2-identity-column:nth-of-type(4) { grid-column: 3; }
  .account-v2-identity-actions { grid-column: 1 / -1; padding-top: 3px; border-top: 1px solid #edf3ee; }
}
@media (max-width: 720px) {
  .account-v2-hero, .account-v2-page-head, .account-v2-aspen-panel, .account-v2-integrity-strip { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
  .account-v2-hero-actions, .account-v2-page-actions, .account-v2-identity-actions { justify-content: flex-start; }
  .account-v2-principle { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  .account-v2-chip-current { margin-left: 54px; }
  .account-v2-stat-grid, .account-v2-action-grid, .account-v2-register-summary { grid-template-columns: 1fr; }
  .account-v2-register-summary > div { border-right: 0; border-bottom: 1px solid var(--account-v2-line); }
  .account-v2-register-summary > div:last-child { border-bottom: 0; }
  .account-v2-register-panel { padding: 16px; }
  .account-v2-register-toolbar { align-items: stretch; flex-direction: column; }
  .account-v2-filter { flex-basis: auto; }
  .account-v2-identity-card { grid-template-columns: 1fr; }
  .account-v2-identity-column:nth-of-type(3), .account-v2-identity-column:nth-of-type(4), .account-v2-identity-actions { grid-column: auto; }
}
.account-v2-wizard .account-workspace-head { padding: 6px 4px 0; }
.account-v2-wizard .account-workspace-head h2 { margin: 4px 0 6px; color: var(--account-v2-ink); font-size: 28px; letter-spacing: -.035em; }
.account-v2-wizard .account-workspace-head p { max-width: 720px; color: var(--account-v2-muted); }
.account-v2-wizard .account-wizard-page { border: 1px solid var(--account-v2-line); border-radius: 22px; background: var(--account-v2-surface); box-shadow: 0 14px 36px rgba(35, 82, 54, .07); }
.account-v2-wizard .account-wizard-stepper { border-bottom-color: var(--account-v2-line); }
.account-v2-wizard .account-wizard-step.active > span,
.account-v2-wizard .account-wizard-step.done > span { border-color: #8fc69b; background: #e1f3e5; color: var(--account-v2-green-dark); }
.account-v2-wizard .account-wizard-step.active b,
.account-v2-wizard .account-wizard-step.done b { color: var(--account-v2-green-dark); }
.account-v2-wizard .account-wizard-intro { border-bottom-color: var(--account-v2-line); }
.account-v2-wizard .account-wizard-intro h2 { color: var(--account-v2-ink); letter-spacing: -.03em; }
.account-v2-wizard .account-wizard-main,
.account-v2-wizard .account-wizard-guide { border-color: var(--account-v2-line); background: rgba(255,255,255,.72); }
.account-v2-wizard .account-wizard-field input,
.account-v2-wizard .account-wizard-field select,
.account-v2-wizard .account-wizard-field textarea { border-color: #c7dbcc; border-radius: 10px; background: #fbfefb; }
.account-v2-wizard .account-wizard-field input:focus,
.account-v2-wizard .account-wizard-field select:focus,
.account-v2-wizard .account-wizard-field textarea:focus { border-color: #6eaf7e; box-shadow: 0 0 0 3px rgba(39,136,78,.12); }
.account-v2-wizard .account-wizard-actions button:not(.secondary):not(.ghost) { border-color: var(--account-v2-green); border-radius: 11px; background: var(--account-v2-green); color: #fff; font-weight: 850; }
.account-v2-wizard .account-wizard-actions button:not(.secondary):not(.ghost):hover { background: var(--account-v2-green-dark); }
.account-v2-wizard .account-wizard-actions button.secondary,
.account-v2-wizard .account-workspace-actions button.secondary { border-color: #b9d1bf; border-radius: 11px; background: #fff; color: #1c5d36; }

/* Account V2 completion layer: structure register and unambiguous status surfaces. */
.account-v2-organisation-list { display: grid; gap: 12px; }
.account-v2-organisation-card {
  display: grid;
  gap: 16px;
  padding: 19px;
  border: 1px solid var(--account-v2-line);
  border-radius: 17px;
  background: #fff;
}
.account-v2-organisation-card:hover { border-color: #9bc9a7; box-shadow: 0 8px 20px rgba(31, 92, 55, .08); }
.account-v2-organisation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.account-v2-organisation-head h2 { margin: 5px 0 4px; color: var(--account-v2-ink); font-size: 20px; letter-spacing: -.03em; }
.account-v2-organisation-head p { margin: 0; color: var(--account-v2-muted); font-size: 12px; }
.account-v2-organisation-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.account-v2-organisation-badges .account-v2-chip-current { margin-left: 0; }
.account-v2-organisation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.account-v2-organisation-grid > div { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid #e0ebe2; border-radius: 12px; background: #f8fcf8; }
.account-v2-organisation-grid span { color: #698072; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.account-v2-organisation-grid strong { overflow: hidden; color: var(--account-v2-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-v2-organisation-grid small { overflow: hidden; color: var(--account-v2-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.account-v2-organisation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 2px; border-top: 1px solid #e7efe8; }
.account-v2-modal { width: min(1180px, calc(100vw - 28px)); border-color: #c6ddca; }
.account-v2-modal .center-modal-head { background: #f6fbf6; border-bottom-color: #d8e7da; }
.account-v2-modal .center-modal-body { background: #fbfefb; }
.account-v2-modal .account-detail-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account-v2-modal .account-detail-metrics .account-v2-chip { margin-left: 0; }
.account-v2-modal .account-internal-role-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); align-items: end; gap: 16px; }
.account-internal-role-control > div:first-child { display: grid; gap: 5px; }
.account-internal-role-control p { max-width: 560px; margin: 0; color: var(--account-v2-muted); font-size: 12px; line-height: 1.45; }
.account-v2-modal .account-internal-role-control .account-detail-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex: none; }
.account-v2-modal .account-internal-role-control .account-detail-action-buttons button { flex: 0 0 auto; min-width: 112px; }
.account-internal-role-control select { min-width: 0; }
.account-v2-status-explanation { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid #c8dfcc; border-radius: 12px; background: #edf8ef; color: #28583a; }
.account-v2-status-explanation strong { font-size: 13px; }
.account-v2-status-explanation span { color: #5f7868; font-size: 12px; line-height: 1.45; }
.account-v2-audit-section { display: grid; gap: 12px; margin-top: 14px; padding: 15px; border: 1px solid #dce9df; border-radius: 14px; background: #f8fcf8; }
.account-v2-audit-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-v2-audit-heading h3 { margin: 4px 0; color: var(--account-v2-ink); font-size: 15px; }
.account-v2-audit-heading p { margin: 0; color: var(--account-v2-muted); font-size: 12px; line-height: 1.4; }
.account-v2-audit-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.account-v2-audit-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid #e1ece3; border-radius: 10px; background: #fff; }
.account-v2-audit-list li > div { display: grid; gap: 3px; min-width: 0; }
.account-v2-audit-list strong { color: var(--account-v2-ink); font-size: 12px; }
.account-v2-audit-list small, .account-v2-audit-list li > span { color: var(--account-v2-muted); font-size: 11px; line-height: 1.4; }
.account-v2-audit-list li > span { max-width: 48%; overflow-wrap: anywhere; text-align: right; }
@media (max-width: 620px) {
  .account-v2-audit-heading, .account-v2-audit-list li { flex-direction: column; }
  .account-v2-audit-list li > span { max-width: none; text-align: left; }
}
.account-structure-status-label { color: #698072; font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 900px) {
  .account-v2-organisation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-v2-modal .account-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .account-v2-organisation-head { flex-direction: column; }
  .account-v2-organisation-badges { justify-content: flex-start; }
  .account-v2-organisation-grid,
  .account-v2-modal .account-detail-metrics { grid-template-columns: 1fr; }
  .account-v2-organisation-actions .account-v2-button { width: 100%; }
  .account-v2-modal .account-internal-role-control { grid-template-columns: 1fr; align-items: stretch; }
  .account-internal-role-control .account-detail-action-buttons { width: 100%; }
  .account-v2-modal .account-internal-role-control .account-detail-action-buttons > * { width: auto; flex: 1 1 0; }
}

/* Account V2 selected direction: Organisation Access Map. The legacy renderers remain
   available for backwards-compatible helpers, but the active Account surface uses this
   single workbench so organisation, site and identity state are never mixed. */
.account-map-shell {
  --map-ink: #183b2a;
  --map-muted: #6a7f72;
  --map-line: #d6e5da;
  --map-soft: #f4faf5;
  --map-green: #27894d;
  --map-green-dark: #176638;
  --map-warning: #b97808;
  --map-danger: #c43b35;
  display: grid;
  gap: 16px;
  width: 100%;
  color: var(--map-ink);
}
.account-map-shell button,
.account-map-shell input,
.account-map-shell select { font: inherit; }
.account-map-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 4px 2px 8px; }
.account-map-page-head > div:first-child { min-width: 0; }
.account-map-page-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 5px 0 7px; color: var(--map-ink); font-size: clamp(28px, 3vw, 39px); letter-spacing: -.045em; line-height: 1.05; }
.account-map-page-head h1, .account-map-title-line h2 { overflow-wrap: anywhere; }
.account-map-page-head p { margin: 0; color: var(--map-muted); font-size: 14px; line-height: 1.5; }
.account-map-breadcrumb { display: flex; align-items: center; gap: 12px; }
.account-map-kicker { display: block; color: #5d7867; font-size: 10px; font-weight: 850; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.account-map-back-button { padding: 0; border: 0; background: transparent; color: var(--map-green-dark); cursor: pointer; font-size: 12px; font-weight: 800; }
.account-map-back-button:hover, .account-map-link-button:hover, .account-map-inline-button:hover { color: var(--map-green); text-decoration: underline; }
.account-map-supabase-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border: 1px solid #b8d9c0; border-radius: 999px; background: #eef8f0; color: var(--map-green-dark); font-size: 11px; font-weight: 800; letter-spacing: 0; }
.account-map-head-actions, .account-map-detail-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.account-map-head-actions { flex: 0 1 auto; }
.account-map-detail-actions { flex: 0 1 auto; }
.account-map-primary-button, .account-map-secondary-button, .account-map-review-button { min-height: 40px; padding: 10px 15px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 850; line-height: 1.1; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
.account-map-primary-button, .account-map-secondary-button, .account-map-review-button { white-space: nowrap; }
.account-map-head-count { display: inline-grid; min-width: 18px; min-height: 18px; place-items: center; margin-left: 2px; padding: 2px 5px; border-radius: 999px; background: #fff3d8; color: #9a6807; font-size: 10px; line-height: 1; }
.account-map-primary-button { border-color: var(--map-green); background: var(--map-green); color: #fff; box-shadow: 0 5px 12px rgba(39, 137, 77, .14); }
.account-map-primary-button:hover { border-color: var(--map-green-dark); background: var(--map-green-dark); transform: translateY(-1px); }
.account-map-secondary-button { border-color: #b9d1c0; background: #fff; color: var(--map-green-dark); }
.account-map-secondary-button:hover { border-color: #77ad86; background: #f2faf4; transform: translateY(-1px); }
.account-map-review-button { border-color: #ead9ba; background: #fffdfa; color: var(--map-warning); }
.account-map-review-button:hover { border-color: #d7ae61; background: #fff7e8; }
.account-map-primary-button:focus-visible, .account-map-secondary-button:focus-visible, .account-map-review-button:focus-visible, .account-map-back-button:focus-visible, .account-map-link-button:focus-visible, .account-map-inline-button:focus-visible, .account-map-icon-button:focus-visible, .account-map-more-button:focus-visible, .account-map-organisation-row:focus-visible, .account-map-tabs button:focus-visible { outline: 3px solid rgba(39, 137, 77, .24); outline-offset: 2px; }
.account-map-toolbar { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(190px, .55fr); gap: 9px; }
.account-map-search-field, .account-map-status-filter { display: flex; align-items: center; min-height: 42px; border: 1px solid #cbded0; border-radius: 8px; background: rgba(255, 255, 255, .9); }
.account-map-search-field { gap: 8px; padding: 0 13px; color: #80978a; }
.account-map-search-field span { font-size: 24px; line-height: 1; transform: translateY(-1px); }
.account-map-search-field input, .account-map-status-filter select { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 0; outline: 0; background: transparent; color: var(--map-ink); font-size: 13px; }
.account-map-search-field:focus-within, .account-map-status-filter:focus-within { border-color: #6eaf7c; box-shadow: 0 0 0 3px rgba(39, 137, 77, .11); }
.account-map-status-filter select { cursor: pointer; }
.account-map-workspace-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 6px; border: 1px solid var(--map-line); border-radius: 10px; background: rgba(247, 252, 248, .92); }
.account-map-workspace-nav button { display: grid; gap: 3px; min-width: 0; min-height: 52px; padding: 9px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #687d70; cursor: pointer; text-align: left; }
.account-map-workspace-nav button:hover { border-color: #c3dcc9; background: #f2faf4; color: var(--map-green-dark); }
.account-map-workspace-nav button.is-active { border-color: #a8d0b2; background: #eaf7ed; color: var(--map-green-dark); box-shadow: inset 0 -2px 0 var(--map-green); }
.account-map-workspace-nav button span { overflow: hidden; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.account-map-workspace-nav button small { overflow: hidden; color: #7d9183; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-map-workspace-nav button.is-active small { color: #4d795d; }
.account-map-workbench { display: grid; grid-template-columns: minmax(265px, .62fr) minmax(0, 1.72fr); height: min(720px, calc(100vh - 245px)); min-height: 560px; border: 1px solid var(--map-line); border-radius: 9px; background: rgba(255, 255, 255, .9); overflow: hidden; }
.account-map-organisation-panel { display: flex; min-width: 0; min-height: 0; height: 100%; flex-direction: column; border-right: 1px solid var(--map-line); background: #fbfefb; }
.account-map-panel-head { padding: 20px 18px 15px; border-bottom: 1px solid var(--map-line); }
.account-map-panel-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: var(--map-ink); font-size: 17px; letter-spacing: -.025em; }
.account-map-panel-head h2 span { display: inline-grid; min-width: 27px; min-height: 22px; place-items: center; padding: 3px 7px; border-radius: 999px; background: #eff5f0; color: #627a6b; font-size: 11px; letter-spacing: 0; }
.account-map-panel-head p { margin: 0; color: var(--map-muted); font-size: 11px; }
.account-map-organisation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
.account-map-organisation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; width: 100%; padding: 14px 15px 14px 17px; border: 0; border-bottom: 1px solid #e3eee5; border-left: 3px solid transparent; background: transparent; color: var(--map-ink); cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease; }
.account-map-organisation-row:hover { background: #f2f8f3; }
.account-map-organisation-row.is-selected { border-left-color: var(--map-green); background: #edf7ef; }
.account-map-organisation-row > span:first-child { display: grid; gap: 4px; min-width: 0; }
.account-map-organisation-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-map-organisation-row small { overflow: hidden; color: var(--map-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-map-organisation-row-meta { display: grid; justify-items: end; gap: 4px; min-width: 80px; }
.account-map-row-risk { color: var(--map-warning) !important; font-size: 10px !important; font-weight: 800; }
.account-map-chevron { color: #829b8a; font-size: 21px; line-height: 1; }
.account-map-panel-footer { display: grid; gap: 10px; margin-top: auto; padding: 15px; border-top: 1px solid var(--map-line); }
.account-map-panel-footer .account-map-secondary-button { width: 100%; }
.account-map-panel-footer .account-map-link-button { justify-self: start; }
.account-map-link-button, .account-map-inline-button { padding: 0; border: 0; background: transparent; color: var(--map-green-dark); cursor: pointer; font-size: 12px; font-weight: 850; }
.account-map-detail-panel { min-width: 0; min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto; background: #fff; overscroll-behavior: contain; }
.account-map-detail-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 20px; padding: 20px 20px 17px; border-bottom: 1px solid var(--map-line); }
.account-map-detail-title { display: flex; flex: 1 1 320px; align-items: center; min-width: 0; gap: 13px; }
.account-map-detail-title > div { min-width: 0; }
.account-map-org-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: #e7f3e9; color: var(--map-green-dark); }
.account-map-org-symbol { color: var(--map-green-dark); font-size: 23px; line-height: 1; }
.account-map-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.account-map-title-line h2 { min-width: 0; margin: 0; color: var(--map-ink); font-size: 20px; letter-spacing: -.025em; }
.account-map-detail-title p { max-width: 720px; margin: 4px 0 2px; color: var(--map-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.account-map-detail-title small { color: #8a9b90; font-size: 10px; overflow-wrap: anywhere; }
.account-map-detail-actions { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.account-map-detail-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid #dce9df; border-radius: 12px; background: #f7fbf8; }
.account-map-detail-action-group .account-map-secondary-button { min-height: 36px; padding: 8px 10px; border-color: transparent; background: transparent; }
.account-map-detail-action-group .account-map-secondary-button:hover { border-color: #b9d7c1; background: #fff; }
.account-map-action-icon { display: inline-grid; width: 14px; place-items: center; color: var(--map-green); font-size: 15px; font-weight: 900; line-height: 1; }
.account-map-detail-actions > .account-map-primary-button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
@media (min-width: 1081px) {
  .account-map-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; }
  .account-map-detail-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 6px; max-width: 470px; }
  .account-map-detail-action-group { justify-content: flex-end; }
}
.account-map-status { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 850; line-height: 1; white-space: nowrap; }
.account-map-status-current { border-color: #c9e7d1; background: #e9f8ed; color: #2e8550; }
.account-map-status-review { border-color: #ecd9a9; background: #fff8e9; color: #9a6807; }
.account-map-status-danger { border-color: #f0c5c1; background: #fff0ef; color: var(--map-danger); }
.account-map-tabs { display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: stretch; height: auto; gap: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 0 18px; border-bottom: 1px solid var(--map-line); }
.account-map-tabs button { display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #73867a; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.account-map-tabs button:hover { color: var(--map-green-dark); }
.account-map-tabs button.is-active { border-bottom-color: var(--map-green); color: var(--map-green-dark); }
.account-map-detail-content { min-width: 0; }
.account-map-section { padding: 18px 20px 20px; border-bottom: 1px solid #e4eee6; }
.account-map-section:last-child { border-bottom: 0; }
.account-map-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.account-map-section-head h2 { margin: 4px 0 0; color: var(--map-ink); font-size: 15px; letter-spacing: -.02em; }
.account-map-section-head p { max-width: 680px; margin: 5px 0 0; color: var(--map-muted); font-size: 12px; line-height: 1.45; }
.account-map-crm-contact-section { background: #fbfefb; }
.account-map-crm-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.account-map-crm-contact-grid > div { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--map-line); border-radius: 8px; background: #fff; }
.account-map-crm-contact-grid span, .account-map-crm-empty-contact span { color: var(--map-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.account-map-crm-contact-grid strong { overflow-wrap: anywhere; font-size: 12px; }
.account-map-crm-contact-grid small { color: var(--map-muted); font-size: 10px; }
.account-map-reference-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; margin-top: 5px; color: var(--map-muted); font-size: 10px; line-height: 1.35; }
.account-map-reference-line span { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.account-map-reference-line strong { color: var(--map-ink); font-weight: 800; }
.account-map-empty-with-crm { padding: 14px; }
.account-map-crm-empty-contact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; margin: 7px auto 0; max-width: 100%; padding: 7px 10px; border: 1px solid #cfe4d4; border-radius: 8px; background: #f7fcf8; text-align: left; }
.account-map-crm-empty-contact b { overflow-wrap: anywhere; color: var(--map-green-dark); font-size: 12px; }
.account-map-crm-empty-contact small { flex-basis: 100%; color: var(--map-muted); font-size: 10px; line-height: 1.3; }
.account-map-crm-prefill { display: grid; gap: 3px; margin-top: 11px; padding: 10px 12px; border: 1px solid #cfe4d4; border-radius: 8px; background: #f7fcf8; }
.account-map-crm-prefill strong { color: var(--map-green-dark); font-size: 11px; }
.account-map-crm-prefill span { overflow-wrap: anywhere; color: var(--map-ink); font-size: 12px; font-weight: 800; }
.account-map-crm-prefill small { color: var(--map-muted); font-size: 10px; line-height: 1.4; }
.account-map-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--map-line); border-radius: 8px; }
.account-map-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.account-map-table th { padding: 10px 10px; border-bottom: 1px solid var(--map-line); background: #f3f8f4; color: #718578; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.account-map-table td { padding: 10px; border-bottom: 1px solid #e5eee7; color: var(--map-ink); font-size: 12px; vertical-align: middle; }
.account-map-table tbody tr:last-child td { border-bottom: 0; }
.account-map-table tbody tr:hover td { background: #fbfefb; }
.account-map-table tbody tr.is-review td { background: #fffdf7; }
.account-map-table tbody tr.is-danger td { background: #fffafa; }
.account-map-table th:first-child, .account-map-table td:first-child { width: 25%; }
.account-map-table th:nth-child(2), .account-map-table td:nth-child(2) { width: 17%; }
.account-map-table th:nth-child(3), .account-map-table td:nth-child(3) { width: 16%; }
.account-map-table th:nth-child(4), .account-map-table td:nth-child(4) { width: 14%; }
.account-map-table th:nth-child(5), .account-map-table td:nth-child(5) { width: 20%; }
.account-map-table th:last-child, .account-map-table td:last-child { width: 8%; text-align: right; }
.account-map-table td > strong, .account-map-table td > small { display: block; }
.account-map-table td > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-map-table td > small { margin-top: 4px; overflow: hidden; color: var(--map-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.account-map-user-table { min-width: 0; }
.account-map-user-table th:first-child, .account-map-user-table td:first-child { width: 34%; }
.account-map-user-table th:nth-child(2), .account-map-user-table td:nth-child(2) { width: 16%; }
.account-map-user-table th:nth-child(3), .account-map-user-table td:nth-child(3), .account-map-user-table th:nth-child(5), .account-map-user-table td:nth-child(5) { display: none; }
.account-map-user-table th:nth-child(4), .account-map-user-table td:nth-child(4) { width: 20%; }
.account-map-user-table th:last-child, .account-map-user-table td:last-child { width: 30%; }
.account-map-directory-panel .account-map-user-table { min-width: 900px; }
.account-map-directory-panel .account-map-user-table th:nth-child(3), .account-map-directory-panel .account-map-user-table td:nth-child(3), .account-map-directory-panel .account-map-user-table th:nth-child(5), .account-map-directory-panel .account-map-user-table td:nth-child(5) { display: table-cell; }
.account-map-directory-panel .account-map-user-table th:nth-child(3), .account-map-directory-panel .account-map-user-table td:nth-child(3) { width: 18%; }
.account-map-directory-panel .account-map-user-table th:nth-child(5), .account-map-directory-panel .account-map-user-table td:nth-child(5) { width: 18%; }
.account-map-directory-panel .account-map-user-table th:last-child, .account-map-directory-panel .account-map-user-table td:last-child { width: 14%; }
.account-map-login-activity-table { min-width: 760px; }
.account-map-login-activity-table th:first-child, .account-map-login-activity-table td:first-child { width: 34%; }
.account-map-login-activity-table th:nth-child(2), .account-map-login-activity-table td:nth-child(2) { width: 42%; }
.account-map-login-activity-table th:nth-child(3), .account-map-login-activity-table td:nth-child(3) { width: 24%; }
.account-map-login-activity-shell > .account-map-toolbar.is-hidden-for-login-activity { display: none; }
.account-map-login-activity-panel .account-map-directory-toolbar { grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
.account-map-login-activity-table .account-map-sort-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }
.account-map-login-activity-table .account-map-sort-button:hover, .account-map-login-activity-table .account-map-sort-button:focus-visible { color: var(--map-green-dark); }
.account-map-login-activity-table .account-map-sort-button span { color: var(--map-green); font-size: 14px; line-height: 1; }
.account-map-person { display: flex; align-items: center; min-width: 0; gap: 9px; }
.account-map-person > span:last-child { display: grid; min-width: 0; }
.account-map-person strong, .account-map-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-map-person small { margin-top: 3px; color: var(--map-muted); font-size: 10px; }
.account-map-login-presence { display: inline-flex; align-items: center; gap: 5px; }
.account-map-login-presence::before { width: 6px; height: 6px; content: ''; border-radius: 50%; background: #a9b8ad; }
.account-map-login-presence.is-online { color: #247941; }
.account-map-login-presence.is-online::before { background: #2eaa5e; box-shadow: 0 0 0 3px rgba(46,170,94,.12); }
.account-map-avatar { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #e9f4eb; color: var(--map-green-dark); font-size: 10px; font-weight: 850; }
.account-map-attention { color: var(--map-warning) !important; }
.account-map-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 7px; white-space: nowrap; }
.account-map-icon-button { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #8ab99a; border-radius: 7px; background: #f7fcf8; box-shadow: 0 1px 2px rgba(26, 80, 47, .08); color: var(--map-green-dark); cursor: pointer; font-size: 24px; line-height: 1; }
.account-map-icon-button:hover { border-color: #478b5b; background: #eaf7ed; box-shadow: 0 3px 7px rgba(26, 80, 47, .14); }
.account-map-more-button { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 30px; padding: 5px 10px; border: 1px solid #c9ded0; border-radius: 6px; background: #fff; color: var(--map-green-dark); cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; }
.account-map-more-button:hover { border-color: #72aa82; background: #f1faf3; }
.account-map-upgrade-button { min-width: 112px; border-color: #8dbf9a; background: #eff9f1; }
.account-map-progress-line { display: grid; grid-template-columns: 34px minmax(56px, 1fr); align-items: center; gap: 7px; }
.account-map-progress-line strong { font-size: 11px; }
.account-map-progress-line span { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #e3eae5; }
.account-map-progress-line i { display: block; height: 100%; border-radius: inherit; background: var(--map-green); }
.account-map-table-row.is-review .account-map-progress-line i { background: #d99017; }
.account-map-progress-line small { grid-column: 1 / -1; margin-top: 0 !important; }
.account-map-site-table { min-width: 980px; }
.account-map-site-table th:first-child, .account-map-site-table td:first-child { width: 18%; }
.account-map-site-table th:nth-child(2), .account-map-site-table td:nth-child(2) { width: 13%; }
.account-map-site-table th:nth-child(3), .account-map-site-table td:nth-child(3) { width: 11%; }
.account-map-site-table th:nth-child(4), .account-map-site-table td:nth-child(4) { width: 9%; }
.account-map-site-table th:nth-child(5), .account-map-site-table td:nth-child(5) { width: 15%; }
.account-map-site-table th:nth-child(6), .account-map-site-table td:nth-child(6) { width: 27%; }
.account-map-site-table th:last-child, .account-map-site-table td:last-child { width: 7%; }
.account-map-site-access { display: grid; gap: 5px; min-width: 180px; }
.account-map-site-access > strong { color: var(--map-ink); font-size: 11px; overflow: visible; white-space: normal; }
.account-map-site-access > small { color: var(--map-muted); font-size: 10px; line-height: 1.35; }
.account-map-site-access.is-empty > strong { color: #a96814; }
.account-map-site-access-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.account-map-site-access-chips > span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 5px 3px 3px; border: 1px solid #cce5d3; border-radius: 999px; background: #f2fbf4; color: #174b2a; font-size: 10px; font-weight: 750; }
.account-map-site-access-chips > span b { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #d6efdd; color: #176a3a; font-size: 8px; }
.account-map-site-access-chips > span em { overflow: hidden; max-width: 58px; color: #5e7c68; font-size: 9px; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.account-map-site-access-chips > small { color: var(--map-muted); font-size: 10px; font-weight: 750; }
.account-map-site-detail { display: grid; gap: 14px; }
.account-map-site-detail-intro { padding: 11px 13px; border: 1px solid var(--map-line); border-radius: 8px; background: #f5faf6; }
.account-map-site-detail-intro p { margin: 4px 0 0; color: var(--map-muted); font-size: 12px; }
.account-map-site-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-map-site-detail-grid > div { display: grid; gap: 4px; min-width: 0; padding: 10px 11px; border: 1px solid var(--map-line); border-radius: 7px; background: #fff; }
.account-map-site-detail-grid span { color: #718578; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.account-map-site-detail-grid strong { overflow-wrap: anywhere; color: var(--map-ink); font-size: 12px; line-height: 1.35; }
.account-map-site-access-panel { display: grid; gap: 11px; padding: 13px; border: 1px solid #cce5d3; border-radius: 8px; background: #f7fcf8; }
.account-map-site-access-panel h3 { margin: 3px 0 0; color: var(--map-ink); font-size: 14px; }
.account-map-site-access-panel p { margin: 5px 0 0; color: var(--map-muted); font-size: 11px; line-height: 1.45; }
.account-map-site-access-panel .account-map-site-access-chips > span { font-size: 11px; }
.account-map-site-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.account-map-site-detail-actions .account-map-secondary-button, .account-map-site-detail-actions .account-map-primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; text-decoration: none; }
.account-map-danger-button { min-height: 36px; padding: 0 12px; border: 1px solid #deaaa4; border-radius: 7px; background: #fff8f7; color: #a33a32; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.account-map-danger-button:hover, .account-map-danger-button:focus-visible { border-color: #c06a62; background: #fff0ee; outline: none; }
.account-map-detail-action-group { flex-wrap: wrap; gap: 5px; white-space: normal; }
.account-map-empty { padding: 25px 14px; color: var(--map-muted); font-size: 12px; text-align: center; }
.account-map-integrity-section { background: #f2faf4; }
.account-map-review-flag { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 850; }
.account-map-review-flag.is-review { border-color: #ecd9a9; background: #fff8e9; color: var(--map-warning); }
.account-map-review-flag.is-clear { border-color: #c9e7d1; background: #e9f8ed; color: var(--map-green-dark); }
.account-map-integrity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 15px; border: 1px solid var(--map-line); border-radius: 8px; background: #fff; }
.account-map-integrity-grid article { display: grid; gap: 4px; min-height: 78px; padding: 14px; border-right: 1px solid var(--map-line); }
.account-map-integrity-grid article:last-child { border-right: 0; }
.account-map-integrity-grid strong { color: var(--map-green-dark); font-size: 23px; letter-spacing: -.04em; }
.account-map-integrity-grid span { color: var(--map-muted); font-size: 10px; line-height: 1.35; }
.account-map-review-list { margin-top: 13px; }
.account-map-review-list h3 { margin: 0 0 8px; font-size: 13px; }
.account-map-review-list ul, .account-map-activity-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.account-map-review-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dce9df; border-radius: 7px; background: #fff; }
.account-map-review-list li strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-map-review-list li span { color: var(--map-warning); font-size: 10px; font-weight: 800; }
.account-map-integrity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.account-map-activity-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 11px 12px; border: 1px solid var(--map-line); border-radius: 7px; background: #fff; }
.account-map-activity-list li > div { display: grid; gap: 3px; min-width: 0; }
.account-map-activity-list strong { font-size: 12px; }
.account-map-activity-list small, .account-map-activity-list li > span { color: var(--map-muted); font-size: 10px; line-height: 1.4; }
.account-map-activity-list li > span { max-width: 48%; overflow-wrap: anywhere; text-align: right; }
.account-map-no-selection { display: grid; min-height: 500px; place-items: center; align-content: center; gap: 9px; padding: 30px; text-align: center; }
.account-map-no-selection h2 { margin: 6px 0 0; font-size: 20px; }
.account-map-no-selection p { max-width: 360px; margin: 0 0 8px; color: var(--map-muted); font-size: 12px; line-height: 1.5; }
.account-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #75897b; font-size: 11px; }
.account-map-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.account-map-directory-toolbar { display: grid; grid-template-columns: minmax(0, 1.4fr) 220px 220px; gap: 9px; padding: 14px; border: 1px solid var(--map-line); border-radius: 8px; background: #fbfefb; }
.account-map-directory-toolbar label { display: grid; gap: 6px; color: #718578; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.account-map-directory-toolbar input, .account-map-directory-toolbar select { min-height: 40px; padding: 9px 11px; border: 1px solid #cbded0; border-radius: 7px; background: #fff; color: var(--map-ink); font-size: 12px; }
.account-map-directory-toolbar input:focus, .account-map-directory-toolbar select:focus { outline: 3px solid rgba(39, 137, 77, .12); border-color: #6eaf7c; }
.account-map-directory-panel { border: 1px solid var(--map-line); border-radius: 8px; background: #fff; }
.account-map-directory-panel .account-map-section-head { padding: 18px 18px 0; }
.account-map-count { color: var(--map-muted); font-size: 11px; font-weight: 800; }
.account-map-directory-panel .account-map-table-wrap { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0 0 8px 8px; }
.account-map-reconciliation { display: grid; gap: 16px; padding: 18px; }
.account-map-reconciliation .account-map-page-head { padding-bottom: 0; }
.account-map-reconciliation-notice { display: flex; align-items: flex-start; gap: 8px; padding: 13px 15px; border: 1px solid #c9e7d1; border-radius: 8px; background: #effaf1; color: #426b4f; font-size: 12px; line-height: 1.45; }
.account-map-reconciliation-notice strong { color: var(--map-green-dark); white-space: nowrap; }
.account-map-reconciliation-table { min-width: 0; }
.account-map-reconciliation-table th:first-child, .account-map-reconciliation-table td:first-child { width: 18%; }
.account-map-reconciliation-table th:nth-child(2), .account-map-reconciliation-table td:nth-child(2) { width: 19%; }
.account-map-reconciliation-table th:nth-child(3), .account-map-reconciliation-table td:nth-child(3) { width: 18%; }
.account-map-reconciliation-table th:nth-child(4), .account-map-reconciliation-table td:nth-child(4) { width: 15%; }
.account-map-reconciliation-table th:nth-child(5), .account-map-reconciliation-table td:nth-child(5) { width: 22%; }
.account-map-reconciliation-table th:last-child, .account-map-reconciliation-table td:last-child { width: 8%; }
.account-map-focus-view .account-map-toolbar.is-hidden-for-focus-view, .account-map-focus-view .account-map-organisation-panel.is-hidden-for-focus-view, .account-map-focus-view .account-map-footer.is-hidden-for-focus-view { display: none; }
.account-map-focus-view .account-map-workbench { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; overflow: visible; background: transparent; }
.account-map-focus-view .account-map-detail-panel { height: auto; min-height: 0; overflow: visible; border: 1px solid var(--map-line); border-radius: 9px; background: #fff; }
.account-map-focus-view .account-map-directory-toolbar { grid-template-columns: minmax(320px, 1.45fr) minmax(180px, .55fr) minmax(210px, .7fr); margin: 16px 18px; }
.account-map-focus-view .account-map-directory-panel { margin: 0 18px 18px; }
.account-map-focus-view .account-map-user-table { min-width: 1040px; }
.account-map-focus-view .account-map-review-table th:nth-child(4), .account-map-focus-view .account-map-review-table td:nth-child(4) { width: 17%; }
.account-map-focus-view .account-map-review-table th:nth-child(5), .account-map-focus-view .account-map-review-table td:nth-child(5) { width: 20%; }
.account-map-focus-view .account-map-reconciliation { gap: 18px; padding: 22px; }
.account-map-focus-view .account-map-reconciliation .account-map-directory-panel { margin: 0; }
.account-map-focus-view .account-map-reconciliation-table { min-width: 0; }
.account-map-focus-view .account-map-reconciliation-table td:nth-child(5) > strong { overflow: visible; white-space: normal; line-height: 1.45; }
.account-map-focus-view .account-map-reconciliation-table td { padding-top: 13px; padding-bottom: 13px; }
.account-map-focus-view .account-map-reconciliation-table tbody tr.is-review td { background: #fffaf0; }
.account-map-focus-view .account-map-reconciliation-table .account-map-status-review { border-color: #ebca84; background: #fff1d6; color: #8a5700; }
.account-map-focus-view .account-map-reconciliation-table .account-map-status-current { border-color: #a9d9b6; background: #e7f7eb; color: #1f7340; }
.account-map-focus-view .account-map-reconciliation-table .account-map-manage-button { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 32px; padding: 6px 9px; border: 1px solid #6bad7c; border-radius: 6px; background: #fff; color: #216f3e; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; white-space: nowrap; }
.account-map-focus-view .account-map-reconciliation-table .account-map-manage-button:hover, .account-map-focus-view .account-map-reconciliation-table .account-map-manage-button:focus-visible { border-color: #277e47; background: #eaf7ed; outline: none; }
.account-map-internal-panel { margin: 16px 18px 18px; }
@media (max-width: 1080px) {
  .account-map-workbench { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.55fr); }
  .account-map-detail-head { align-items: flex-start; flex-direction: column; }
  .account-map-detail-actions { justify-content: flex-start; }
  .account-map-workspace-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-map-directory-toolbar { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(170px, .5fr)); }
}
@media (max-width: 780px) {
  .account-map-page-head { flex-direction: column; }
  .account-map-head-actions { justify-content: flex-start; }
  .account-map-toolbar, .account-map-directory-toolbar { grid-template-columns: 1fr; }
  .account-map-workspace-nav { grid-template-columns: 1fr; }
  .account-map-workbench { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .account-map-organisation-panel { height: auto; max-height: 420px; border-right: 0; border-bottom: 1px solid var(--map-line); }
  .account-map-organisation-list { max-height: 270px; }
  .account-map-detail-panel { height: auto; overflow: visible; }
  .account-map-focus-view .account-map-directory-toolbar { grid-template-columns: 1fr; margin: 14px; }
  .account-map-focus-view .account-map-directory-panel { margin: 0 14px 14px; }
  .account-map-focus-view .account-map-reconciliation { padding: 14px; }
  .account-map-reconciliation-table { min-width: 920px; }
  .account-map-integrity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-map-integrity-grid article:nth-child(2) { border-right: 0; }
  .account-map-integrity-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--map-line); }
}
@media (max-width: 560px) {
  .account-map-page-head h1 { font-size: 29px; }
  .account-map-page-head p { font-size: 12px; }
  .account-map-detail-head, .account-map-section { padding-right: 14px; padding-left: 14px; }
  .account-map-tabs { padding: 0 7px; }
  .account-map-tabs button { padding: 0 9px; }
  .account-map-site-detail-grid { grid-template-columns: 1fr; }
  .account-map-site-detail-actions, .account-map-site-detail-actions > * { width: 100%; }
  .account-map-detail-actions, .account-map-detail-actions button, .account-map-detail-action-group { width: 100%; }
  .account-map-detail-actions button { justify-content: center; }
  .account-map-detail-action-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-map-section-head { flex-direction: column; }
  .account-map-review-list li { grid-template-columns: 1fr; gap: 5px; }
  .account-map-activity-list li { flex-direction: column; }
  .account-map-activity-list li > span { max-width: none; text-align: left; }
  .account-map-footer { align-items: flex-start; flex-direction: column; }
  .account-map-integrity-grid { grid-template-columns: 1fr; }
  .account-map-integrity-grid article, .account-map-integrity-grid article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--map-line); }
  .account-map-integrity-grid article:last-child { border-bottom: 0; }
}

.collection-ops-board {
  min-height: 100%;
  color: #253b2d;
  background: #f8faf8;
  font-family: inherit;
}
.collection-board-primary,
.collection-board-secondary,
.collection-board-icon-button,
.collection-board-card-link,
.collection-board-footer-link,
.collection-board-day,
.collection-board-today,
.collection-board-back {
  border: 1px solid #d3e0d7;
  border-radius: 7px;
  background: #fff;
  color: #31543d;
  font: inherit;
  cursor: pointer;
}
.collection-board-primary {
  min-height: 36px;
  padding: 0 14px;
  border-color: #218149;
  background: #2f9353;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.collection-board-primary:hover { border-color: #176a39; background: #237a45; }
.collection-board-primary span { margin-right: 5px; font-size: 16px; font-weight: 900; }
.collection-board-icon-button { width: 32px; height: 32px; font-size: 19px; }
.collection-board-icon-button:hover { border-color: #86b797; background: #f0f8f1; }

.collection-board-main { min-height: 100%; box-sizing: border-box; overflow: visible; }
.collection-board-flash { position: fixed; right: 22px; bottom: 18px; z-index: 80; max-width: 310px; margin: 0; padding: 11px 14px; border: 1px solid #a8d7b4; border-radius: 8px; background: #f0faf2; color: #276b3e; box-shadow: 0 12px 30px rgba(26, 76, 43, .16); font-size: 11px; font-weight: 750; }
.collection-board-surface { width: 100%; min-width: 1080px; margin: 0 auto; padding: 0; border: 1px solid #e1e9e3; border-radius: 11px; background: #fff; box-shadow: 0 8px 24px rgba(34, 72, 47, .04); overflow: hidden; }

.collection-board-month-strip { padding: 16px 10px 10px; border-bottom: 0; }
.collection-board-month-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 10px; }
.collection-board-month-nav { display: inline-flex; align-items: center; gap: 10px; }
.collection-board-month-nav strong { min-width: 105px; color: #27382c; font-size: 14px; font-weight: 750; text-align: center; }
.collection-board-month-nav .collection-board-icon-button { width: 30px; height: 30px; }
.collection-board-calendar-legend { display: flex; justify-content: flex-end; gap: 15px; color: #78877d; font-size: 9px; }
.collection-board-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.collection-board-today { min-height: 34px; padding: 0 13px; color: #374d3d; font-size: 10px; font-weight: 750; }
.collection-board-today:hover { border-color: #82b594; background: #f2f8f3; }
.collection-board-days { display: grid; grid-template-columns: repeat(14, minmax(72px, 1fr)); gap: 0; border: 1px solid #e1e9e3; border-radius: 7px; overflow: hidden; }
.collection-board-day { position: relative; min-width: 72px; min-height: 91px; padding: 10px 9px 8px; display: grid; align-content: start; justify-items: start; gap: 8px; border: 0; border-right: 1px solid #e6ece7; border-radius: 0; color: #53675a; text-align: left; }
.collection-board-day:last-child { border-right: 0; }
.collection-board-day:hover { background: #f5faf6; }
.collection-board-day em { height: 10px; color: #72847a; font-size: 9px; font-style: normal; font-weight: 750; }
.collection-board-day > span { color: #364b3c; font-size: 10px; font-weight: 750; }
.collection-board-day > strong { display: none; }
.collection-board-day > small { color: #566a5b; font-size: 9px; }
.collection-board-day.is-selected { z-index: 1; background: #f8fcf8; box-shadow: inset 0 0 0 1px #319258; }
.collection-board-day.is-selected > span { color: #1d6940; }
.collection-board-day.is-today em { color: #698271; }
.collection-board-day-dot { width: 8px; height: 8px; }
.collection-board-day-dot.is-booked,
.collection-board-legend-dot.is-booked { background: #2d9953; }
.collection-board-day-dot.is-failed,
.collection-board-legend-dot.is-failed { background: #d62d2d; }
.collection-board-day-dot,
.collection-board-legend-dot,
.collection-board-column-dot { display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #aeb8b1; }
.collection-board-legend-dot.is-locked { background: #e29b24; }
.collection-board-schedule-caption { display: none; }

.collection-board-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 10px 10px; align-items: start; }
.collection-board-column { min-width: 0; min-height: 745px; border: 1px solid #e3e9e4; border-radius: 8px; background: #fafcfa; overflow: hidden; }
.collection-board-column.is-failed { border-color: #f0bebe; background: #fffafa; }
.collection-board-column > header { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 45px; padding: 0 11px; border-bottom: 1px solid #e4ebe5; background: #fdfefd; }
.collection-board-column-title { display: inline-flex; align-items: center; gap: 8px; color: #33483a; font-size: 11px; font-weight: 800; }
.collection-board-column.is-failed .collection-board-column-title { color: #ce2b2b; }
.collection-board-column-dot { width: 8px; height: 8px; }
.collection-board-column-dot.gray { background: #8f9893; }
.collection-board-column-dot.green { background: #3d9759; }
.collection-board-column-dot.blue { background: #3887d1; }
.collection-board-column-dot.red { background: #da2e2e; }
.collection-board-column > header b { min-width: 20px; height: 20px; background: #eaf2eb; color: #6a7b6e; font-size: 9px; }
.collection-board-column.is-failed > header b { background: #fde3e3; color: #d33030; }
.collection-board-column-body { display: grid; gap: 8px; min-height: 700px; padding: 8px; }
.collection-board-empty { min-height: 140px; color: #a1ada5; font-size: 10px; }
.collection-board-card { display: grid; min-height: 238px; gap: 10px; padding: 11px 10px 9px; border: 1px solid #dfe7e1; border-radius: 8px; background: #fff; box-shadow: 0 3px 9px rgba(35, 72, 47, .035); }
.collection-board-card.is-failed { min-height: 246px; border-color: #f07070; background: #fffafa; }
.collection-board-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; min-height: 36px; }
.collection-board-company { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.collection-board-company-logo .customer-logo { width: 36px; height: 36px; border: 1px solid #d1e0d5; border-radius: 50%; background: #f7fbf7; color: #4a7554; font-size: 9px; }
.collection-board-company > div { padding-top: 2px; }
.collection-board-company strong,
.collection-board-company small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-board-company strong { color: #355541; font-size: 10px; line-height: 1.25; }
.collection-board-company small { margin-top: 4px; color: #8a988f; font-size: 8px; }
.collection-board-status { display: none; }
.collection-board-card-time { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid #edf1ed; color: #3d5043; font-size: 9px; }
.collection-board-card-time .material-symbols-rounded { color: #586b5d; font-size: 14px; }
.collection-board-card-time strong { color: #3a5041; font-size: 9px; }
.collection-board-card-details { display: grid; gap: 8px; padding-top: 0; border-top: 0; }
.collection-board-card-details span { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 5px; align-items: center; }
.collection-board-card-details span > .material-symbols-rounded { grid-row: 1 / span 2; color: #637469; font-size: 14px; }
.collection-board-card-details small { grid-column: 2; color: #89968d; font-size: 8px; }
.collection-board-card-details strong { grid-column: 2; color: #425c4a; font-size: 9px; }
.collection-board-progress { display: none; }
.collection-board-failure { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #d52d2d; }
.collection-board-failure::before { content: 'error'; font-family: 'Material Symbols Rounded'; font-size: 14px; }
.collection-board-failure strong { color: #d52d2d; font-size: 9px; }
.collection-board-failure span { display: none; }
.collection-board-notice { display: none; }
.collection-board-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; margin-top: auto; padding-top: 6px; border-top: 1px solid #edf1ed; }
.collection-board-card-notify,
.collection-board-review {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #9bc7a7;
  border-radius: 6px;
  background: #fff;
  color: #347047;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.collection-board-card-notify:hover { background: #eef8f0; border-color: #4a9e63; }
.collection-board-card-notify:disabled { opacity: .55; cursor: wait; }
.collection-board-card-notify.collection-workbench-channel-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-color: #176b62; background: #176b62; color: #fff; box-shadow: 0 2px 6px rgba(17, 82, 75, .18); }
.collection-board-card-notify.collection-workbench-channel-action:hover { border-color: #10574f; background: #10574f; }
.collection-board-card-notify.collection-workbench-channel-action:focus-visible { outline: 2px solid #8dcfc0; outline-offset: 2px; }
.collection-board-card-notify.collection-workbench-channel-action .material-symbols-rounded { font-size: 14px; }
.collection-board-review { flex: 1; border-color: #ec7070; color: #d53232; }
.collection-board-review:hover { background: #fff0f0; }
.collection-board-completed { display: inline-flex; align-items: center; gap: 4px; color: #3c9957; font-size: 9px; font-weight: 800; }
.collection-board-completed .material-symbols-rounded { font-size: 14px; }
.collection-board-card-menu { position: relative; margin-left: auto; }
.collection-board-card-menu summary { display: grid; width: 25px; height: 27px; place-items: center; border: 0; background: transparent; color: #50665a; list-style: none; cursor: pointer; }
.collection-board-card-menu summary::-webkit-details-marker { display: none; }
.collection-board-card-menu summary .material-symbols-rounded { font-size: 17px; }
.collection-board-card-menu > div { position: absolute; z-index: 10; right: 0; bottom: calc(100% + 4px); display: grid; min-width: 110px; padding: 4px; border: 1px solid #d3e0d7; border-radius: 7px; background: #fff; box-shadow: 0 10px 24px rgba(32, 67, 43, .14); }
.collection-board-card-menu > div button { min-height: 28px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: #31543d; font: inherit; font-size: 9px; text-align: left; cursor: pointer; }
.collection-board-card-menu > div button:hover { background: #eef7f0; }
.collection-board-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; margin: 0; padding: 0 10px; border-top: 1px solid #e5ebe6; color: #77867b; font-size: 9px; }
.collection-board-footer-link { min-height: 28px; padding: 0 9px; color: #3c6849; font-size: 9px; font-weight: 800; }
.collection-board-footer-link:hover { border-color: #86b797; background: #f0f8f1; }

.center-modal-overlay:has(.collection-ops-add-modal) { background: rgba(33, 52, 39, .08); backdrop-filter: none; }
.collection-ops-add-modal { width: min(432px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 28px)); border: 1px solid #d7e3da; border-radius: 11px; box-shadow: 0 22px 60px rgba(32, 63, 42, .18); }
.collection-ops-add-modal .center-modal-head { min-height: 53px; box-sizing: border-box; padding: 15px 16px; background: #fff; }
.collection-ops-add-modal .center-modal-head .eyebrow { display: none; }
.collection-ops-add-modal .center-modal-head h2 { margin: 0; color: #273c2d; font-size: 15px; font-weight: 800; }
.collection-ops-add-modal .center-modal-head button { width: 25px; height: 25px; padding: 0; border: 0; background: transparent; color: #4c6755; font-size: 0; }
.collection-ops-add-modal .center-modal-head button::after { content: '×'; font-size: 20px; line-height: 1; }
.collection-ops-add-modal .center-modal-body { padding: 14px 16px 15px; background: #fff; }
.collection-add-trip-form { gap: 12px; }
.collection-add-trip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.collection-add-trip-grid label { gap: 5px; color: #587061; font-size: 9px; font-weight: 750; }
.collection-add-trip-grid label b { color: #cf4545; font-weight: 800; }
.collection-add-trip-wide { grid-column: 1 / -1; }
.collection-add-trip-grid input,
.collection-add-trip-grid select { min-height: 34px; padding: 0 9px; border: 1px solid #d5e0d8; border-radius: 6px; color: #3c5745; font-size: 10px; }
.collection-add-trip-grid input:focus,
.collection-add-trip-grid select:focus { border-color: #4b9c63; box-shadow: 0 0 0 2px rgba(75, 156, 99, .12); }
.collection-add-trip-actions { justify-content: space-between; gap: 10px; padding-top: 4px; }
.collection-add-trip-actions > button { flex: 1; min-height: 34px; font-size: 10px; }
.collection-add-trip-actions .secondary { border-color: #d2dfd6; background: #fff; color: #45634f; }

@media (max-width: 900px) {
  .collection-board-primary { padding: 0 9px; }
}

/* Collection Control: image-2 three-column dispatch workbench */
.collection-dispatch-workbench {
  display: grid;
  grid-template-columns: minmax(230px, 28%) minmax(420px, 1fr) minmax(285px, 30%);
  gap: 8px;
  height: calc(100vh - 54px - 40px);
  min-height: 0;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background: #f3f6f3;
}
.collection-workbench-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8e2db;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(21, 57, 35, .04);
}
.collection-workbench-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 13px 9px;
  border-bottom: 1px solid #edf1ed;
}
.collection-workbench-eyebrow { display: block; margin-bottom: 4px; color: #6d8074; font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.collection-workbench-panel h2 { margin: 0; color: #1d3525; font-size: 14px; line-height: 1.15; }
.collection-workbench-panel p { margin: 4px 0 0; color: #708277; font-size: 9px; line-height: 1.35; }
.collection-workbench-month-actions { display: flex; align-items: center; gap: 5px; }
.collection-workbench-month-actions strong { min-width: 80px; color: #31513d; font-size: 10px; text-align: center; }
.collection-workbench-month-actions button,
.collection-workbench-calendar-tools button {
  display: inline-grid;
  min-width: 25px;
  min-height: 25px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #d3e2d7;
  border-radius: 5px;
  background: #fff;
  color: #336548;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.collection-workbench-month-actions button:hover,
.collection-workbench-calendar-tools button:hover { border-color: #55ae73; background: #eff9f1; }
.collection-workbench-calendar-tools { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #7a897f; font-size: 8px; }
.collection-workbench-calendar-tools button { min-height: 22px; padding: 0 8px; }
.collection-workbench-weekdays,
.collection-workbench-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 9px; }
.collection-workbench-weekdays { padding-bottom: 5px; color: #839288; font-size: 7px; font-weight: 800; letter-spacing: .05em; text-align: center; }
.collection-workbench-calendar-grid { flex: 1; align-content: start; grid-auto-rows: minmax(42px, 1fr); padding-bottom: 8px; }
.collection-workbench-day { display: flex; min-width: 0; min-height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #294634; font: inherit; cursor: pointer; }
.collection-workbench-day:hover { border-color: #8bc69b; background: #f1faf3; }
.collection-workbench-day > span { font-size: 10px; font-weight: 800; }
.collection-workbench-day > small { min-height: 9px; color: #7d8b82; font-size: 7px; white-space: nowrap; }
.collection-workbench-day.is-outside { color: #b3bdb6; }
.collection-workbench-day.is-outside > small { color: #c0c8c2; }
.collection-workbench-day.is-today > span { color: #26834a; }
.collection-workbench-day.is-selected { border-color: #197642; background: #176b3d; color: #fff; box-shadow: 0 3px 8px rgba(23, 107, 61, .18); }
.collection-workbench-day.is-selected > small { color: #d2f4dc; }
.collection-workbench-day > i { width: 5px; height: 5px; border-radius: 50%; background: #b4c0b8; }
.collection-workbench-day.has-trips > i { background: #45c77b; }
.collection-workbench-day.has-failed > i { background: #e45858; }
.collection-workbench-day.is-selected > i { background: #8ce5aa; }
.collection-workbench-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px 12px 11px; border-top: 1px solid #edf1ed; color: #77867b; font-size: 8px; }
.collection-workbench-legend span { display: inline-flex; align-items: center; gap: 4px; }
.collection-workbench-legend i { width: 6px; height: 6px; border-radius: 2px; background: #b4c0b8; }
.collection-workbench-legend i.is-scheduled { background: #45c77b; }
.collection-workbench-legend i.is-failed { background: #e45858; }

.collection-workbench-details-header { display: block; padding: 14px 15px 12px; }
.collection-workbench-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e9efea; }
.collection-workbench-stats { display: flex; min-width: 0; align-items: center; gap: 14px; }
.collection-workbench-load { min-width: 0; text-align: left; }
.collection-workbench-load span { display: block; color: #78897e; font-size: 8px; font-weight: 750; letter-spacing: .07em; }
.collection-workbench-load strong { display: block; margin-top: 3px; color: #245b37; font-size: 16px; line-height: 1.1; }
.collection-workbench-trip-count { display: flex; min-height: 31px; align-items: center; gap: 6px; padding-left: 13px; border-left: 1px solid #dfe8e1; white-space: nowrap; }
.collection-workbench-trip-count strong { color: #28583a; font-size: 19px; line-height: 1; }
.collection-workbench-trip-count span { color: #75877b; font-size: 9px; }
.collection-workbench-copy-actions { display: flex; min-width: 144px; flex-direction: column; align-items: stretch; gap: 4px; }
.collection-workbench-copy { display: inline-flex; width: 100%; min-height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #287d45; border-radius: 6px; background: #2f8d4e; color: #fff; font: inherit; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 4px rgba(35, 105, 57, .12); }
.collection-workbench-copy:hover { background: #247842; }
.collection-workbench-copy:disabled { border-color: #d5e3d9; background: #f8faf8; color: #9aa69e; cursor: not-allowed; }
.collection-workbench-copy .material-symbols-rounded { font-size: 13px; }
.collection-workbench-copy-status { min-height: 0; color: #237443 !important; font-size: 8px !important; line-height: 1.25; text-align: right; }
.collection-workbench-copy-status:empty { display: none; }
.collection-workbench-detail-list { min-height: 0; flex: 1; overflow: auto; }
.collection-workbench-detail-row { display: grid; gap: 7px; padding: 11px 12px; border-bottom: 1px solid #edf1ed; }
.collection-workbench-detail-main { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.collection-workbench-company-logo { display: grid; width: 28px; height: 28px; place-items: center; overflow: hidden; border-radius: 50%; background: #eef7ef; color: #2c874d; font-size: 9px; font-weight: 800; }
.collection-workbench-company-logo img { width: 100%; height: 100%; object-fit: cover; }
.collection-workbench-detail-main strong { display: block; overflow: hidden; color: #274833; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.collection-workbench-detail-main small { display: block; margin-top: 2px; color: #849187; font-size: 8px; }
.collection-workbench-status { padding: 4px 7px; border-radius: 999px; background: #edf3ee; color: #607769; font-size: 8px; font-weight: 800; white-space: nowrap; }
.collection-workbench-status.confirmed,
.collection-workbench-status.completed { background: #dff4e5; color: #248047; }
.collection-workbench-status.in-progress { background: #e6f0ff; color: #3978ba; }
.collection-workbench-status.failed { background: #fff0f0; color: #c74242; }
.collection-workbench-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; padding-left: 35px; color: #6f8075; font-size: 8px; }
.collection-workbench-detail-meta span { display: flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-workbench-detail-meta i { color: #4f9a69; font-size: 13px; }
.collection-workbench-detail-actions { display: flex; align-items: center; gap: 6px; padding-left: 35px; }
.collection-workbench-detail-actions button { min-height: 25px; padding: 0 8px; border: 1px solid #d5e3d9; border-radius: 5px; background: #fff; color: #316342; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.collection-workbench-detail-actions button:hover { border-color: #50a86b; background: #eff9f1; }
.collection-workbench-detail-actions .collection-workbench-notify { border-color: #319052; background: #329553; color: #fff; }
.collection-workbench-detail-actions .collection-workbench-notify:hover { background: #247842; }
.collection-workbench-detail-actions .collection-workbench-notify:disabled { opacity: .55; cursor: wait; }
.collection-workbench-detail-actions .collection-workbench-channel-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 10px; border-color: #176b62; border-radius: 8px; background: #176b62; color: #fff; box-shadow: 0 2px 6px rgba(17, 82, 75, .18); font-size: 9px; }
.collection-workbench-detail-actions .collection-workbench-channel-action:hover { border-color: #10574f; background: #10574f; }
.collection-workbench-detail-actions .collection-workbench-channel-action:focus-visible { outline: 2px solid #8dcfc0; outline-offset: 2px; }
.collection-workbench-channel-action .material-symbols-rounded { font-size: 14px; }
.collection-notice-channel-button { border-color: #176b62 !important; background: #176b62 !important; color: #fff !important; }
.collection-notice-channel-button:hover { border-color: #10574f !important; background: #10574f !important; }
.collection-workbench-link { margin-right: auto; border-color: transparent !important; background: transparent !important; color: #297b48 !important; }
.collection-workbench-empty { display: grid; min-height: 220px; place-content: center; justify-items: center; padding: 24px; color: #7f8e84; text-align: center; }
.collection-workbench-empty .material-symbols-rounded { margin-bottom: 7px; color: #74b887; font-size: 28px; }
.collection-workbench-empty strong { color: #31513d; font-size: 11px; }
.collection-workbench-empty p { max-width: 210px; font-size: 9px; }
.collection-workbench-details-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 12px; border-top: 1px solid #edf1ed; color: #809087; font-size: 8px; }
.collection-workbench-details-footer button { padding: 3px 0; border: 0; background: transparent; color: #317848; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }

.collection-workbench-add .collection-workbench-panel-header { padding-bottom: 11px; }
.collection-workbench-stepper { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #edf1ed; }
.collection-workbench-stepper span { display: inline-flex; align-items: center; gap: 5px; color: #8b988f; font-size: 8px; font-weight: 800; }
.collection-workbench-stepper b { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #edf2ee; color: #819086; font-size: 8px; }
.collection-workbench-stepper .is-current { color: #267b47; }
.collection-workbench-stepper .is-current b { background: #319653; color: #fff; }
.collection-workbench-stepper i { width: 25px; height: 1px; background: #dbe5dd; }
.collection-workbench-add > .collection-add-trip-form { min-height: 0; flex: 1; overflow: auto; padding: 11px 12px 12px; }
.collection-workbench-add .collection-add-trip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.collection-workbench-add .collection-add-trip-grid label { min-width: 0; gap: 4px; color: #61756a; font-size: 8px; }
.collection-workbench-add .collection-add-trip-grid label b { color: #d44b4b; }
.collection-workbench-add .collection-add-trip-grid input,
.collection-workbench-add .collection-add-trip-grid select { width: 100%; min-height: 29px; box-sizing: border-box; padding: 0 7px; border: 1px solid #d5e1d8; border-radius: 5px; background: #fff; color: #31513e; font: inherit; font-size: 8px; }
.collection-workbench-add .collection-add-trip-field-note { display: block; color: #738579; font-size: 9px; font-weight: 550; line-height: 1.35; }
.collection-workbench-add .collection-delivery-box-field { padding: 8px 9px; border: 1px solid #dceade; border-radius: 7px; background: #f7fbf7; }
.collection-workbench-add .collection-delivery-box-field input { border-color: #b9d8c1; }
.collection-workbench-add .collection-delivery-box-field .collection-add-trip-field-note { margin-top: 2px; color: #52735c; }
.collection-workbench-add .collection-add-trip-grid input:focus,
.collection-workbench-add .collection-add-trip-grid select:focus { border-color: #46a264; outline: 0; box-shadow: 0 0 0 2px rgba(70, 162, 100, .12); }
.collection-add-trip-draft-note { margin: 0; padding: 8px 9px; border: 1px solid #d9ebdd; border-radius: 6px; background: #f4faf5; color: #4f735a; font-size: 10px; line-height: 1.4; }
.collection-workbench-fast-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-top: 9px; color: #7b8a80; font-size: 8px; }
.collection-workbench-fast-actions span { margin-right: 2px; font-weight: 800; }
.collection-workbench-fast-actions button { min-height: 22px; padding: 0 7px; border: 1px solid #d5e3d9; border-radius: 5px; background: #f8fbf8; color: #39734d; font: inherit; font-size: 8px; cursor: pointer; }
.collection-workbench-fast-actions button:hover { border-color: #49a66a; background: #edf8ef; }
.collection-workbench-add .collection-add-trip-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 7px; padding-top: 12px; }
.collection-workbench-add .collection-add-trip-actions button { min-height: 32px; border-radius: 5px; font-size: 9px; font-weight: 800; cursor: pointer; }
.collection-workbench-add .collection-add-trip-actions .secondary { border: 1px solid #d7e3da; background: #fff; color: #52705d; }
.collection-workbench-add .collection-add-trip-actions .collection-board-primary { border: 1px solid #247b45; background: #319553; color: #fff; }
.collection-workbench-add .collection-add-trip-actions button:hover { filter: brightness(.97); transform: translateY(-1px); }

@media (max-width: 1180px) {
  .collection-dispatch-workbench { grid-template-columns: minmax(205px, 27%) minmax(350px, 1fr) minmax(260px, 31%); }
}
@media (max-width: 900px) {
  .collection-dispatch-workbench { grid-template-columns: minmax(190px, 27%) minmax(320px, 1fr) minmax(235px, 31%); }
}
@media (max-width: 700px) {
  .collection-dispatch-workbench { height: auto; min-height: calc(100vh - 55px); grid-template-columns: 1fr; overflow: auto; }
  .collection-workbench-panel { min-height: 420px; }
  .collection-workbench-calendar { min-height: 445px; }
  .collection-workbench-add { min-height: 560px; }
}

/* Collection Control typography: use the same readable scale as the other internal pages. */
.collection-workbench-panel-header { padding: 15px 15px 11px; }
.collection-workbench-eyebrow { font-size: 11px; }
.collection-workbench-panel h2 { font-size: 20px; }
.collection-workbench-panel p { font-size: 13px; }
.collection-workbench-month-actions strong { min-width: 90px; font-size: 14px; }
.collection-workbench-month-actions button,
.collection-workbench-calendar-tools button { min-height: 29px; font-size: 11px; }
.collection-workbench-calendar-tools { padding: 9px 14px; font-size: 11.5px; }
.collection-workbench-weekdays { font-size: 11px; }
.collection-workbench-calendar-grid { grid-auto-rows: minmax(48px, 1fr); }
.collection-workbench-day { min-height: 48px; }
.collection-workbench-day > span { font-size: 12px; }
.collection-workbench-day > small { font-size: 10.5px; }
.collection-workbench-legend { padding: 10px 14px 12px; font-size: 10.5px; }
.collection-workbench-load span { font-size: 9px; }
.collection-workbench-load strong { font-size: 18px; }
.collection-workbench-trip-count span { font-size: 10px; }
.collection-workbench-copy { min-height: 36px; font-size: 11px; }
.collection-workbench-detail-row { padding: 13px 14px; }
.collection-workbench-detail-main { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
.collection-workbench-company-logo { width: 34px; height: 34px; font-size: 11px; }
.collection-workbench-detail-main strong { font-size: 14px; }
.collection-workbench-detail-main small { font-size: 11px; }
.collection-workbench-status { padding: 5px 8px; font-size: 10px; }
.collection-workbench-detail-meta { padding-left: 43px; font-size: 11px; }
.collection-workbench-detail-meta i { font-size: 15px; }
.collection-workbench-detail-actions { padding-left: 43px; }
.collection-workbench-detail-actions button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.collection-workbench-empty strong { font-size: 15px; }
.collection-workbench-empty p { font-size: 12px; }
.collection-workbench-details-footer { font-size: 11px; }
.collection-workbench-details-footer button { font-size: 11px; }
.collection-workbench-stepper span { font-size: 11px; }
.collection-workbench-stepper b { width: 21px; height: 21px; font-size: 11px; }
.collection-workbench-add > .collection-add-trip-form { padding: 13px 15px 15px; }
.collection-workbench-add .collection-add-trip-grid { gap: 10px; }
.collection-workbench-add .collection-add-trip-grid label { font-size: 11px; }
.collection-workbench-add .collection-add-trip-grid input,
.collection-workbench-add .collection-add-trip-grid select { min-height: 35px; padding: 0 9px; font-size: 13px; }

@media (max-width: 420px) {
  .collection-workbench-summary { align-items: stretch; flex-direction: column; }
  .collection-workbench-copy-actions { width: 100%; }
  .collection-workbench-copy-status { text-align: left; }
}
.collection-workbench-add .collection-transport-mode-field { gap: 4px; color: #61756a; font-size: 11px; font-weight: 750; }
.collection-workbench-add .collection-transport-mode-field select { width: 100%; min-height: 35px; padding: 0 9px; border-color: #cbdacf; border-radius: 6px; background: #fff; color: #315641; font: inherit; font-size: 13px; }
.collection-workbench-add .collection-add-trip-form [hidden] { display: none !important; }
.collection-workbench-fast-actions { padding-top: 11px; font-size: 11px; }
.collection-workbench-fast-actions button { min-height: 27px; font-size: 11px; }
.collection-workbench-add .collection-add-trip-actions { padding-top: 14px; }
.collection-workbench-add .collection-add-trip-actions button { min-height: 37px; font-size: 12px; }

.collection-board-primary {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #287b46;
  border-radius: 8px;
  background: #2e854b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.collection-board-primary:hover {
  border-color: #1f6639;
  background: #246f40;
}
.collection-dispatch-workbench {
  gap: 10px;
  padding: 10px;
  background: #f5f8f5;
}
.collection-workbench-panel {
  border-color: #d0ddd3;
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(40, 79, 50, .045);
}
.collection-workbench-day.is-selected { border-color: #2e7548; background: #2e7548; box-shadow: 0 3px 8px rgba(46, 117, 72, .16); }
.collection-workbench-day.has-trips > i { background: #3f9b5e; }
.collection-workbench-day.has-failed > i { background: #c94b4b; }
.collection-workbench-add .collection-add-trip-grid input,
.collection-workbench-add .collection-add-trip-grid select { border-color: #cbdacf; background: #fff; color: #315641; }
.collection-workbench-fast-actions button { border-color: #cbdacf; background: #f8fbf8; color: #3c7250; }
.collection-workbench-add .collection-add-trip-actions .collection-board-primary { border-color: #287b46; background: #2e854b; }
.collection-workbench-detail-actions { flex-wrap: wrap; }
.collection-workbench-detail-actions .collection-workbench-danger,
.collection-board-menu-danger {
  border-color: #e6baba;
  background: #fff8f8;
  color: #b83e3e;
}
.collection-workbench-detail-actions .collection-workbench-danger:hover,
.collection-board-menu-danger:hover {
  border-color: #d77a7a;
  background: #fff0f0;
  color: #962f2f;
}
.collection-board-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  right: 20px;
  bottom: 20px;
  left: auto;
  max-width: min(390px, calc(100vw - 40px));
  padding: 10px 10px 10px 14px;
  border: 1px solid #b8d7bf;
  border-radius: 10px;
  background: #fff;
  color: #2b7043;
  box-shadow: 0 12px 28px rgba(34, 85, 49, .15);
  font-size: 12px;
  line-height: 1.35;
}
.collection-board-flash > span { flex: 1; }
.collection-board-flash > button {
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  padding: 0;
  border: 1px solid #cbdacf;
  border-radius: 7px;
  background: #f4faf5;
  color: #4b6f56;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.collection-board-flash > button:hover,
.collection-board-flash > button:focus-visible { border-color: #79aa85; background: #eaf5ec; color: #24673b; outline: 0; }

/* DO editing stays in the app's centred modal system, with a compact two-column form. */
.center-modal-overlay:has(.collection-do-edit-modal) { z-index: 130; background: rgba(25, 42, 31, .42); backdrop-filter: blur(4px); }
.collection-do-edit-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border: 1px solid #cbdacf;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(25, 57, 35, .24);
}
.collection-do-edit-modal .center-modal-head { padding: 16px 18px; background: #fbfdfb; }
.collection-do-edit-modal .center-modal-head h2 { color: #1d3525; font-size: 20px; }
.collection-do-edit-modal .center-modal-body { padding: 16px 18px 18px; background: #fff; }
.collection-do-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 14px;
}
.collection-do-edit-form > label { display: grid; min-width: 0; gap: 5px; color: #5c7463; font-size: 12px; font-weight: 750; }
.collection-do-edit-form > label > span { color: #4f6d59; }
.collection-do-edit-form input,
.collection-do-edit-form select { min-height: 38px; box-sizing: border-box; padding: 0 10px; border: 1px solid #cbdacf; border-radius: 8px; background: #fff; color: #294b35; font: inherit; font-size: 13px; }
.collection-do-edit-form input:focus,
.collection-do-edit-form select:focus { border-color: #4b9861; outline: 0; box-shadow: 0 0 0 3px rgba(75, 152, 97, .13); }
.collection-do-edit-form > .do-edit-aspen-fields,
.collection-do-edit-form > .customer-delivery-plan-note { grid-column: 1 / -1; }
.collection-do-edit-form .do-edit-aspen-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 14px;
  min-width: 0;
}
.collection-do-edit-form .do-edit-aspen-fields > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 5px;
  min-width: 0;
}
.collection-do-edit-form .do-edit-aspen-fields select { width: 100%; min-width: 0; }
.collection-do-edit-form [hidden] { display: none !important; }
.collection-do-edit-form .customer-reference-note,
.collection-do-edit-form #doEditMessage,
.collection-do-edit-form > button { grid-column: 1 / -1; }
.collection-do-edit-form .customer-reference-note { margin-top: 2px; padding: 11px 12px; border: 1px solid #cce4d1; border-radius: 9px; background: #f1f9f2; color: #376047; }
.collection-do-edit-form .customer-reference-note strong,
.collection-do-edit-form .customer-reference-note span { display: block; }
.collection-do-edit-form .customer-reference-note strong { font-size: 13px; }
.collection-do-edit-form .customer-reference-note span { margin-top: 4px; font-size: 11px; line-height: 1.4; }
.collection-do-edit-form #doEditMessage { min-height: 0; margin: 0; }
.collection-do-edit-form > button { min-height: 42px; border: 1px solid #287b46; border-radius: 8px; background: #2e854b; color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.collection-do-edit-form > button:hover { background: #246f40; }
.collection-do-edit-form > button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 620px) {
  .collection-do-edit-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .collection-do-edit-modal .center-modal-body { padding: 14px; }
  .collection-do-edit-form { grid-template-columns: 1fr; gap: 10px; }
  .collection-do-edit-form .do-edit-aspen-fields { grid-template-columns: 1fr; }
  .collection-do-edit-form .customer-reference-note,
  .collection-do-edit-form #doEditMessage,
  .collection-do-edit-form > button { grid-column: auto; }
}

/* Driver Calendar: a single, low-noise schedule view inside the existing Driver Pulse shell. */
body[data-role="driver"] .driver-calendar-page { gap: 12px; }
body[data-role="driver"] .driver-calendar-heading { padding: 16px 4px 4px; }
body[data-role="driver"] .driver-calendar-heading h1 { margin: 5px 0 4px; color: #f4f7f8; font-size: 21px; }
body[data-role="driver"] .driver-calendar-heading p { margin: 0; color: #8fa0b0; font-size: 11px; line-height: 1.4; }
body[data-role="driver"] .driver-calendar-card,
body[data-role="driver"] .driver-calendar-selected { margin: 0; border: 1px solid rgba(61,214,140,.22); border-radius: 16px; background: rgba(255,255,255,.045); }
body[data-role="driver"] .driver-calendar-toolbar { display: grid; grid-template-columns: 34px 1fr 34px auto; align-items: center; gap: 7px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08); color: #f4f7f8; }
body[data-role="driver"] .driver-calendar-toolbar > strong { text-align: center; font-size: 15px; }
body[data-role="driver"] .driver-calendar-arrow,
body[data-role="driver"] .driver-calendar-today { min-height: 32px; border: 1px solid rgba(61,214,140,.28); border-radius: 9px; background: rgba(61,214,140,.08); color: #a4f0c9; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
body[data-role="driver"] .driver-calendar-today { padding: 0 9px; font-size: 10px; }
body[data-role="driver"] .driver-calendar-arrow:hover,
body[data-role="driver"] .driver-calendar-today:hover { border-color: #3dd68c; background: rgba(61,214,140,.16); }
body[data-role="driver"] .driver-calendar-weekdays,
body[data-role="driver"] .driver-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body[data-role="driver"] .driver-calendar-weekdays { padding: 10px 10px 7px; color: #7f9290; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-align: center; }
body[data-role="driver"] .driver-calendar-grid { gap: 5px; padding: 0 10px 10px; }
body[data-role="driver"] .driver-calendar-day { min-width: 0; min-height: 62px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); color: #f4f7f8; text-align: left; cursor: pointer; }
body[data-role="driver"] .driver-calendar-day:hover { border-color: rgba(61,214,140,.5); background: rgba(61,214,140,.1); }
body[data-role="driver"] .driver-calendar-day.is-outside { opacity: .38; }
body[data-role="driver"] .driver-calendar-day.is-selected { border-color: #3dd68c; background: rgba(61,214,140,.18); box-shadow: 0 0 0 1px rgba(61,214,140,.2); }
body[data-role="driver"] .driver-calendar-day.is-today .driver-calendar-day-number { color: #3dd68c; }
body[data-role="driver"] .driver-calendar-day.has-trips { border-color: rgba(61,214,140,.3); }
body[data-role="driver"] .driver-calendar-day-number { font-size: 12px; font-weight: 900; }
body[data-role="driver"] .driver-calendar-day small { width: 100%; overflow: hidden; color: #a4f0c9; font-size: 8px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-calendar-day .driver-calendar-more { color: #8fa0b0; }
body[data-role="driver"] .driver-calendar-day .driver-calendar-empty-label { color: #71818c; font-weight: 600; }
body[data-role="driver"] .driver-calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 9px 12px 11px; border-top: 1px solid rgba(255,255,255,.08); color: #8fa0b0; font-size: 9px; }
body[data-role="driver"] .driver-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
body[data-role="driver"] .driver-calendar-legend i { width: 7px; height: 7px; border-radius: 50%; background: #71818c; }
body[data-role="driver"] .driver-calendar-legend i.is-scheduled { background: #3dd68c; }
body[data-role="driver"] .driver-calendar-legend i.is-today { background: #a4f0c9; box-shadow: 0 0 0 2px rgba(61,214,140,.2); }
body[data-role="driver"] .driver-calendar-selected { padding: 13px 12px 12px; }
body[data-role="driver"] .driver-calendar-selected-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
body[data-role="driver"] .driver-calendar-selected-head span { color: #7f9290; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
body[data-role="driver"] .driver-calendar-selected-head h2 { margin: 4px 0 0; color: #f4f7f8; font-size: 14px; }
body[data-role="driver"] .driver-calendar-selected-head > strong { padding: 5px 8px; border: 1px solid rgba(61,214,140,.25); border-radius: 999px; color: #a4f0c9; font-size: 9px; white-space: nowrap; }
body[data-role="driver"] .driver-calendar-detail-list { display: grid; gap: 7px; }
body[data-role="driver"] .driver-calendar-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); }
body[data-role="driver"] .driver-calendar-detail > div { min-width: 0; display: grid; gap: 3px; }
body[data-role="driver"] .driver-calendar-detail strong { overflow: hidden; color: #f4f7f8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body[data-role="driver"] .driver-calendar-detail small { color: #8fa0b0; font-size: 9px; }
body[data-role="driver"] .driver-calendar-status { flex: 0 0 auto; color: #a4f0c9; font-size: 8px; font-weight: 800; text-transform: uppercase; }
body[data-role="driver"] .driver-calendar-no-selection { margin: 4px 0; color: #8fa0b0; font-size: 10px; }
body[data-role="driver"] .driver-calendar-page > .driver-route-nav { margin-top: auto; }

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-heading h1,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-selected-head h2,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-detail strong { color: #183a25; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-heading p,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-legend,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-day .driver-calendar-empty-label,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-detail small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-no-selection { color: #6c8173; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-card,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-selected { border-color: #c9dfce; background: #fff; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-toolbar { border-bottom-color: #e1ebe3; color: #183a25; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-arrow,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-today { border-color: #b8d9c0; background: #f0f8f1; color: #2f8150; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-day { border-color: #e1ebe3; background: #fbfdfb; color: #183a25; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-day.is-selected { border-color: #2f9452; background: #eaf6ed; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-day small { color: #347d4d; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-legend { border-top-color: #e1ebe3; }
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-calendar-detail { border-color: #dbe8de; background: #f7fbf7; }

/* Operations Board: simple month view for company-level collection planning. */
.collection-board-large-calendar {
  margin: 0 10px 18px;
  overflow: hidden;
  border: 1px solid #d0ddd3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(40, 79, 50, .055);
}
.collection-board-large-calendar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 19px 15px;
  border-bottom: 1px solid #e1ebe3;
}
.collection-board-large-calendar-head > div:first-child { min-width: 0; }
.collection-board-large-calendar-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #60786a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.collection-board-large-calendar-head h2 {
  margin: 0;
  color: #183a25;
  font-size: 20px;
  line-height: 1.1;
}
.collection-board-large-calendar-head p {
  margin: 6px 0 0;
  color: #6c8173;
  font-size: 12px;
}
.collection-board-large-calendar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.collection-board-large-calendar-actions button {
  min-width: 34px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #cbdacf;
  border-radius: 7px;
  background: #f8fbf8;
  color: #315f40;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.collection-board-large-calendar-actions button:hover,
.collection-board-large-calendar-actions button:focus-visible {
  border-color: #4ba56a;
  background: #edf8ef;
  outline: 0;
}
.collection-board-large-calendar-weekdays,
.collection-board-large-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.collection-board-large-calendar-weekdays {
  padding: 10px 14px 8px;
  background: #f5f9f5;
  color: #60786a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.collection-board-large-calendar-weekdays span { min-width: 0; padding: 0 8px; }
.collection-board-large-calendar-grid { border-top: 1px solid #e1ebe3; }
.collection-board-large-calendar-day {
  display: flex;
  min-width: 0;
  min-height: 126px;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 11px 12px 12px;
  border: 0;
  border-right: 1px solid #e1ebe3;
  border-bottom: 1px solid #e1ebe3;
  background: #fff;
  color: #183a25;
  text-align: left;
  cursor: pointer;
}
.collection-board-large-calendar-day:nth-child(7n) { border-right: 0; }
.collection-board-large-calendar-day:hover,
.collection-board-large-calendar-day:focus-visible {
  background: #f5fbf6;
  outline: 0;
  box-shadow: inset 0 0 0 2px #8ac69b;
}
.collection-board-large-calendar-day.is-outside { background: #fafcfb; color: #a3b0a8; }
.collection-board-large-calendar-day.is-selected { box-shadow: inset 0 0 0 2px #2e8b50; }
.collection-board-large-calendar-day.is-complete { background: #f0faf2; }
.collection-board-large-calendar-day.is-problem { background: #fff9ef; }
.collection-board-large-calendar-day.is-today .collection-board-large-calendar-date b {
  color: #2e8b50;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collection-board-large-calendar-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.collection-board-large-calendar-date b { font-size: 14px; }
.collection-board-large-calendar-date em {
  color: #71867a;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.collection-board-large-calendar-status {
  display: inline-grid;
  align-items: center;
  align-self: flex-start;
  width: 20px;
  height: 20px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f1f5f2;
  color: #6c8173;
  font-size: 0;
}
.collection-board-large-calendar-status b {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  background: #a7b5ac;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}
.collection-board-large-calendar-status.is-scheduled { width: 10px; height: 10px; background: #4db873; }
.collection-board-large-calendar-status.is-scheduled b { display: none; }
.collection-board-large-calendar-status.is-complete { background: #e2f4e6; color: #237442; }
.collection-board-large-calendar-status.is-complete b { background: #2e9a55; }
.collection-board-large-calendar-status.is-problem { background: #fff0d2; color: #9a6519; }
.collection-board-large-calendar-status.is-problem b { background: #e59a1c; }
.collection-board-large-calendar-companies {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  margin-top: 1px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #d9e5dc;
  border-radius: 8px;
  background: #f8fbf8;
}
.collection-board-large-calendar-companies strong + strong {
  padding-top: 5px;
  border-top: 1px solid #e5eee7;
}
.collection-board-large-calendar-companies strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #244b31;
  font-size: 11px;
  line-height: 1.25;
}
.collection-board-large-calendar-companies small {
  color: #9aa9a0;
  font-size: 10px;
  line-height: 1.25;
}
.collection-board-large-calendar-day.is-outside .collection-board-large-calendar-companies strong { color: #9eaca3; }
.collection-board-large-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 17px;
  padding: 11px 15px 13px;
  color: #6c8173;
  font-size: 10px;
}
.collection-board-large-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.collection-board-large-calendar-legend i {
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #a7b5ac;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.collection-board-large-calendar-legend i.is-scheduled { width: 8px; height: 8px; background: #4db873; }
.collection-board-large-calendar-legend i.is-complete { background: #2e9a55; }
.collection-board-large-calendar-legend i.is-problem { background: #e59a1c; }
.collection-workbench-day.is-complete { background: #f0faf2; }
.collection-workbench-day.is-problem { background: #fff9ef; }
.collection-workbench-day.is-selected,
.collection-workbench-day.is-selected.is-complete,
.collection-workbench-day.is-selected.is-problem { border-color: #2e7548; background: #2e7548; }
.collection-workbench-day-status {
  display: inline-grid;
  align-self: center;
  width: 18px;
  height: 18px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 0;
}
.collection-workbench-day-status b {
  display: inline-grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  line-height: 1;
}
.collection-workbench-day-status.is-scheduled { width: 9px; height: 9px; background: #4db873; }
.collection-workbench-day-status.is-scheduled b { display: none; }
.collection-workbench-day-status.is-complete { background: #e2f4e6; color: #237442; }
.collection-workbench-day-status.is-complete b { background: #2e9a55; }
.collection-workbench-day-status.is-problem { background: #fff0d2; color: #9a6519; }
.collection-workbench-day-status.is-problem b { background: #e59a1c; }
.collection-workbench-day.is-selected.is-complete,
.collection-workbench-day.is-selected.is-problem { color: #fff; }
.collection-workbench-day.is-selected .collection-workbench-day-status { background: rgba(255,255,255,.18); color: #fff; }
.collection-workbench-day.is-selected .collection-workbench-day-status b { background: rgba(255,255,255,.28); }
.collection-workbench-legend i.is-complete,
.collection-workbench-legend i.is-failed { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 900; line-height: 1; }
.collection-workbench-legend i.is-complete { background: #2e9a55; }
.collection-workbench-legend i.is-failed { background: #e59a1c; }
@media (max-width: 700px) {
  .collection-board-large-calendar { overflow-x: auto; }
  .collection-board-large-calendar-head { align-items: flex-start; flex-direction: column; }
  .collection-board-large-calendar-weekdays,
  .collection-board-large-calendar-grid { min-width: 720px; }
}

/* Driver menu is a real page, not a sheet layered over the calendar. */
body[data-role="driver"] .driver-menu-page {
  gap: 0;
  overflow: hidden;
}

body[data-role="driver"] .driver-menu-page .driver-menu-appbar {
  flex: 0 0 auto;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  margin: 0 -4px;
  padding: 0 0 12px;
}

body[data-role="driver"] .driver-menu-page .driver-menu-appbar strong {
  text-align: center;
}

body[data-role="driver"] .driver-menu-content {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 20px;
}

body[data-role="driver"] .driver-menu-content::-webkit-scrollbar { width: 4px; }
body[data-role="driver"] .driver-menu-content::-webkit-scrollbar-thumb {
  background: rgba(61, 214, 140, .28);
  border-radius: 999px;
}

body[data-role="driver"] .driver-menu-identity,
body[data-role="driver"] .driver-menu-card {
  border: 1px solid #2b333d;
  border-radius: 16px;
  background: #171d25;
}

body[data-role="driver"] .driver-menu-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

body[data-role="driver"] .driver-menu-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(61, 214, 140, .14);
  color: #3dd68c;
  font-size: 23px;
}

body[data-role="driver"] .driver-menu-identity > div,
body[data-role="driver"] .driver-menu-actions button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-role="driver"] .driver-menu-identity span,
body[data-role="driver"] .driver-menu-fact span {
  color: #8fa0b0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body[data-role="driver"] .driver-menu-identity strong,
body[data-role="driver"] .driver-menu-fact strong,
body[data-role="driver"] .driver-menu-actions strong {
  color: #f2f6f8;
  font-size: 13px;
}

body[data-role="driver"] .driver-menu-identity small,
body[data-role="driver"] .driver-menu-actions small {
  color: #8fa0b0;
  font-size: 11px;
}

body[data-role="driver"] .driver-menu-card {
  display: grid;
  overflow: hidden;
}

body[data-role="driver"] .driver-menu-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
}

body[data-role="driver"] .driver-menu-fact + .driver-menu-fact {
  border-top: 1px solid #2b333d;
}

body[data-role="driver"] .driver-menu-fact strong {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-role="driver"] .driver-menu-fact strong.has-issues { color: #e6a548; }

body[data-role="driver"] .driver-menu-actions {
  padding: 0;
}

body[data-role="driver"] .driver-menu-actions button {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-role="driver"] .driver-menu-actions button + button { border-top: 1px solid #2b333d; }
body[data-role="driver"] .driver-menu-actions button:hover { background: rgba(61, 214, 140, .08); }
body[data-role="driver"] .driver-menu-actions button:focus-visible,
body[data-role="driver"] .driver-menu-logout:focus-visible {
  outline: 2px solid #3dd68c;
  outline-offset: -2px;
}
body[data-role="driver"] .driver-menu-actions button > .material-symbols-rounded,
body[data-role="driver"] .driver-menu-actions button > b {
  color: #3dd68c;
}
body[data-role="driver"] .driver-menu-actions button > .material-symbols-rounded { font-size: 21px; }
body[data-role="driver"] .driver-menu-actions button > b { font-size: 20px; font-weight: 500; }

body[data-role="driver"] .driver-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(248, 113, 113, .35);
  border-radius: 12px;
  background: rgba(239, 68, 68, .08);
  color: #f87171;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
body[data-role="driver"] .driver-menu-logout:hover { background: rgba(239, 68, 68, .15); }

html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-identity,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-card {
  border-color: #d7e5d9 !important;
  background: #fff !important;
}
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-identity strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-fact strong,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-actions strong {
  color: #12331c !important;
}
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-identity span,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-fact span,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-identity small,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-actions small {
  color: #55705c !important;
}
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-fact + .driver-menu-fact,
html[data-theme="forest_canopy"] body[data-role="driver"] .driver-menu-actions button + button {
  border-top-color: #d7e5d9 !important;
}

/* Emission Factor Studio — selected Factor Studio layout */
.ef-studio-shell { display: grid; gap: 0; padding: 0; overflow: hidden; background: var(--panel); }
.ef-studio-shell > * { min-width: 0; }
.ef-studio-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.ef-studio-heading { min-width: 0; }
.ef-breadcrumb { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.ef-breadcrumb span { color: var(--line2); }
.ef-studio-title-row { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.ef-studio-title-row h2 { margin: 0; font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -.03em; }
.ef-studio-heading > p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ef-studio-header-actions { display: flex; align-items: end; gap: 10px; flex: 0 0 auto; }
.ef-version-picker { display: grid; gap: 4px; min-width: 214px; }
.ef-version-picker > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ef-version-picker select { min-height: 38px; padding: 8px 30px 8px 11px; font-size: 12px; font-weight: 800; }
.ef-primary-action { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; white-space: nowrap; }
.ef-primary-action .material-symbols-rounded { font-size: 18px; }
.ef-governance-overview { display: grid; gap: 12px; padding: 16px 22px 0; }
.ef-governance-overview-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.ef-governance-overview-head h3 { margin: 3px 0 0; color: var(--ink); font-size: 17px; letter-spacing: -.02em; }
.ef-governance-selected-note { max-width: 360px; padding: 7px 9px; border: 1px solid #ecd9ad; border-radius: 8px; background: #fff9e9; color: #8b651d; font-size: 10px; font-weight: 800; line-height: 1.35; text-align: right; }
.ef-governance-selected-note.is-active { border-color: #cfe3d2; background: #f0f9f1; color: var(--green); }
.ef-governance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.ef-governance-card { display: grid; gap: 4px; min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ef-governance-card > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ef-governance-card strong { overflow: hidden; color: var(--ink); font-size: 16px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.ef-governance-card small, .ef-governance-card b { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ef-governance-card b { color: var(--ink); font-weight: 800; }
.ef-governance-card.is-active { border-color: #b8dcbf; background: #f7fbf7; box-shadow: inset 3px 0 0 var(--green); }
.ef-governance-card.is-ready { border-color: #b8dcbf; background: #f7fbf7; }
.ef-governance-card.is-ready strong, .ef-governance-card.is-ready b { color: var(--green); }
.ef-governance-card.is-review { border-color: #ecd9ad; background: #fffdf6; }
.ef-governance-card.is-review strong { color: #8b651d; }
.ef-governance-action { justify-self: start; margin-top: 4px; }
.ef-studio-message { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #eef8ef; color: var(--green); font-size: 12px; font-weight: 700; }
.ef-studio-message.error-text { background: #fff1f0; color: var(--red); }
.ef-studio-tabs { display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 0 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, var(--bg)); }
.ef-studio-tab { display: inline-flex; flex: 0 0 auto; width: auto; align-items: center; gap: 7px; min-height: 48px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.ef-studio-tab:hover { color: var(--ink); background: rgba(31, 143, 77, .05); }
.ef-studio-tab.is-active { border-bottom-color: var(--green); color: var(--green); background: rgba(31, 143, 77, .06); }
.ef-studio-tab .material-symbols-rounded { font-size: 17px; }
.ef-rule-banner { display: flex; align-items: center; gap: 12px; margin: 18px 22px 0; padding: 13px 14px; border: 1px solid #cfe3d2; border-radius: 12px; background: #f7fbf7; }
.ef-rule-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #e0f2e3; color: var(--green); font-size: 20px; }
.ef-rule-banner > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ef-rule-banner strong { color: #1b3d25; font-size: 13px; }
.ef-rule-banner > div span { color: #5f7665; font-size: 11px; line-height: 1.4; }
.ef-warning-chip { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid #ecd9ad; border-radius: 999px; background: #fff9e9; color: #8b651d; font-size: 10px; font-weight: 800; white-space: nowrap; }
.ef-warning-chip .material-symbols-rounded { font-size: 15px; }
.ef-warning-chip .material-symbols-rounded { font-size: 15px; }
.ef-material-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 31%); gap: 16px; padding: 18px 22px 0; align-items: start; }
.ef-material-layout.is-inspector-closed { grid-template-columns: 1fr; }
.ef-library-column { min-width: 0; }
.ef-section-head, .ef-tab-intro, .ef-card-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ef-section-head { margin-bottom: 12px; }
.ef-section-head h3, .ef-tab-intro h3, .ef-card-heading h3 { margin: 3px 0 0; color: var(--ink); font-size: 18px; letter-spacing: -.02em; }
.ef-section-head p, .ef-tab-intro p, .ef-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.ef-count-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 7px; border-radius: 999px; background: #edf2ee; color: #587160; font-size: 10px; font-weight: 800; vertical-align: middle; }
.ef-library-tools { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.ef-search-field { display: flex; align-items: center; gap: 6px; min-width: 210px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ef-search-field .material-symbols-rounded { color: var(--muted); font-size: 17px; }
.ef-search-field input { min-width: 0; height: 32px; padding: 4px 0; border: 0; background: transparent; font-size: 12px; outline: 0; }
.ef-filter-button { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 11px; font-size: 12px; }
.ef-filter-button.is-active { border-color: rgba(31, 143, 77, .4); color: var(--green); background: #eef8ef; }
.ef-filter-button .material-symbols-rounded { font-size: 16px; }
.ef-filter-panel { display: flex; justify-content: flex-end; align-items: end; gap: 9px; margin: -3px 0 11px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.ef-filter-panel label { display: grid; gap: 3px; min-width: 150px; }
.ef-filter-panel label > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ef-filter-panel select { height: 32px; padding: 5px 8px; font-size: 11px; }
.ef-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ef-material-card { display: grid; gap: 7px; min-width: 0; padding: 13px 14px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--ink); text-align: left; box-shadow: 0 2px 8px rgba(25, 59, 35, .03); }
.ef-material-card:hover { border-color: #9dc8a6; background: #fbfefb; transform: translateY(-1px); }
.ef-material-card.is-selected { border-color: var(--green); background: #f4fbf5; box-shadow: 0 0 0 2px rgba(31, 143, 77, .08); }
.ef-material-card-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ef-material-card-head strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ef-material-index { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border-radius: 6px; background: #eef3ef; color: var(--muted); font-size: 10px; font-weight: 900; }
.ef-material-card.is-selected .ef-material-index { background: #d9f0dc; color: var(--green); }
.ef-card-action { margin-left: auto; color: #a7b4aa; font-size: 18px; }
.ef-material-card.is-selected .ef-card-action { color: var(--green); }
.ef-material-definition { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ef-material-value { display: flex; align-items: baseline; gap: 7px; }
.ef-material-value strong { color: var(--green); font-size: 22px; letter-spacing: -.04em; }
.ef-material-value small { color: var(--muted); font-size: 10px; }
.ef-material-value small { color: var(--muted); font-size: 10px; }
.ef-material-card-meta { display: grid; grid-template-columns: auto auto minmax(42px, 1fr); gap: 7px; align-items: center; color: var(--muted); font-size: 9px; }
.ef-source-chip { display: inline-flex; align-items: center; gap: 3px; width: fit-content; padding: 3px 6px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.ef-source-chip.ready { background: #e8f6eb; color: #23763b; }
.ef-source-chip.pending { background: #fff7df; color: #87641e; }
.ef-source-chip .material-symbols-rounded { font-size: 13px; }
.ef-impact-meter { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #e5ebe6; }
.ef-impact-meter i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #4aaf62, #19783b); }
.ef-empty-state { display: grid; place-items: center; gap: 6px; min-height: 170px; padding: 20px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--muted); text-align: center; }
.ef-empty-state .material-symbols-rounded { color: var(--green); font-size: 28px; }
.ef-empty-state strong { color: var(--ink); font-size: 13px; }
.ef-empty-state small { font-size: 11px; }
.ef-material-inspector { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 10px 28px rgba(25, 59, 35, .06); }
.ef-inspector-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ef-inspector-head h3 { margin: 4px 0 0; font-size: 18px; }
.ef-status-tag { display: inline-flex; padding: 3px 6px; border-radius: 999px; background: #e8f6eb; color: #23763b; font-size: 9px; font-weight: 800; vertical-align: middle; }
.ef-status-tag.draft { background: #fff6dd; color: #87641e; }
.ef-inspector-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; }
.ef-inspector-close .material-symbols-rounded { font-size: 17px; }
.ef-inspector-value { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 7px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.ef-inspector-value > span:first-child { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.ef-inspector-value strong { color: var(--green); font-size: 34px; letter-spacing: -.06em; line-height: 1.05; }
.ef-inspector-value small { color: var(--muted); font-size: 10px; }
.ef-inspector-value > span:last-child { grid-column: 1 / -1; margin-top: 5px; color: var(--muted); font-size: 10px; }
.ef-inspector-details { display: grid; gap: 0; margin: 0; }
.ef-inspector-details > div { display: grid; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ef-inspector-details dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.ef-inspector-details dd { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.ef-inspector-actions { display: grid; gap: 7px; }
.ef-inspector-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 34px; padding: 7px 9px; font-size: 11px; }
.ef-inspector-action .material-symbols-rounded { font-size: 15px; }
.ef-link-button { text-decoration: none; }
.ef-link-button { text-decoration: none; }
.ef-locked-record-card { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 11px; border: 1px solid #cfe3d2; border-radius: 10px; background: #f5fbf6; color: var(--ink); text-align: left; }
.ef-locked-record-card > .material-symbols-rounded { color: var(--green); font-size: 20px; }
.ef-locked-record-card > span:nth-child(2) { display: grid; gap: 3px; }
.ef-locked-record-card strong { font-size: 11px; }
.ef-locked-record-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.ef-locked-record-card > span:last-child { color: var(--muted); font-size: 17px; }
.ef-audit-trace { display: grid; gap: 8px; padding-top: 2px; }
.ef-audit-trace > strong { font-size: 11px; }
.ef-audit-trace > div { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.ef-audit-trace > div span { color: var(--muted); }
.ef-audit-trace > div b { max-width: 65%; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.ef-text-ready { color: var(--green) !important; }
.ef-text-pending { color: var(--amber) !important; }
.ef-inspector-note, .ef-governance-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ef-inspector-note .material-symbols-rounded, .ef-governance-note .material-symbols-rounded { flex: 0 0 auto; color: var(--green); font-size: 15px; }
.ef-shortcut-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 16px 22px 0; }
.ef-shortcut-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); text-align: left; }
.ef-shortcut-card:hover { border-color: #9dc8a6; background: #fbfefb; }
.ef-shortcut-card > .material-symbols-rounded:first-child { color: var(--green); font-size: 21px; }
.ef-shortcut-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.ef-shortcut-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ef-shortcut-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ef-shortcut-arrow { color: var(--muted); font-size: 17px; }
.ef-protection-footer { display: flex; gap: 7px; align-items: center; margin: 16px 22px 20px; padding: 10px 11px; border: 1px solid #d7e7d9; border-radius: 9px; background: #f6fbf6; color: #53705a; font-size: 10px; line-height: 1.4; }
.ef-protection-footer > .material-symbols-rounded { flex: 0 0 auto; color: var(--green); font-size: 16px; }
.ef-protection-footer strong { color: #285c35; }
.ef-record-count { margin-left: auto; color: var(--muted); text-align: right; white-space: nowrap; }
.ef-record-count { margin-left: auto; color: var(--muted); text-align: right; white-space: nowrap; }
.ef-tab-intro { padding: 22px 22px 15px; border-bottom: 1px solid var(--line); }
.ef-tab-intro > .ef-studio-message { margin-top: 0; }
.ef-operational-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 22px; }
.ef-ops-binding { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin: 0 22px; padding: 11px; border: 1px solid #cfe3d2; border-radius: 10px; background: #f7fbf7; }
.ef-ops-binding > div { display: grid; gap: 3px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ef-ops-binding > div > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ef-ops-binding strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ef-ops-binding small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.ef-ops-binding-symbol { display: grid; place-items: center; color: var(--green); font-size: 20px; font-weight: 800; }
.ef-operational-card, .ef-evidence-card, .ef-recalc-create, .ef-recalc-table { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.ef-operational-head { display: flex; gap: 9px; align-items: center; }
.ef-operational-head > div { min-width: 0; flex: 1; }
.ef-operational-head h3 { margin: 3px 0 0; font-size: 14px; }
.ef-icon-tile { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #e8f6eb; color: var(--green); }
.ef-icon-tile.large { width: 44px; height: 44px; border-radius: 13px; }
.ef-icon-tile .material-symbols-rounded { font-size: 19px; }
.ef-icon-tile.large .material-symbols-rounded { font-size: 25px; }
.ef-operational-value { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 12px; }
.ef-operational-value strong { color: var(--green); font-size: 30px; letter-spacing: -.05em; }
.ef-operational-value span { color: var(--muted); font-size: 11px; }
.ef-operational-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }
.ef-operational-card dl div:last-child { grid-column: 1 / -1; }
.ef-operational-card dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.ef-operational-card dd { margin: 3px 0 0; color: var(--ink); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.ef-inline-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; }
.ef-inline-link .material-symbols-rounded { font-size: 14px; }
.ef-governance-note { display: flex; gap: 6px; align-items: flex-start; margin: 0 22px 20px; padding: 11px 12px; border: 1px solid #d7e7d9; border-radius: 9px; background: #f6fbf6; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ef-governance-note .material-symbols-rounded { flex: 0 0 auto; color: var(--green); font-size: 15px; }
.ef-evidence-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; padding: 18px 22px 0; }
.ef-evidence-card { display: grid; gap: 13px; }
.ef-card-heading button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ef-card-heading button .material-symbols-rounded { font-size: 16px; }
.ef-readiness-score { display: grid; justify-items: end; gap: 2px; padding: 9px 12px; border-radius: 9px; background: #fff7df; color: #8b651d; }
.ef-readiness-score.is-ready { background: #e8f6eb; color: var(--green); }
.ef-readiness-score strong { font-size: 24px; letter-spacing: -.05em; }
.ef-readiness-score span { font-size: 10px; font-weight: 800; }
.ef-readiness-list { display: grid; gap: 6px; }
.ef-readiness-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 17px; gap: 8px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-align: left; }
.ef-readiness-row:hover { border-color: #9dc8a6; background: #fbfefb; }
.ef-readiness-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.ef-readiness-row strong { font-size: 11px; }
.ef-readiness-row small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.ef-readiness-row b { font-size: 10px; }
.ef-readiness-row.is-ready b { color: var(--green); }
.ef-readiness-row.is-missing b { color: var(--red); }
.ef-readiness-icon { color: var(--red); font-size: 18px; }
.ef-readiness-row.is-ready .ef-readiness-icon { color: var(--green); }
.ef-readiness-row > .material-symbols-rounded:last-child { color: var(--muted); font-size: 16px; }
.ef-evidence-summary-card { align-content: start; justify-items: start; background: #f7fbf7; }
.ef-evidence-summary-card h3 { margin: 0; font-size: 16px; }
.ef-evidence-summary-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.ef-evidence-summary-card button { margin-top: 3px; }
.ef-source-matrix-card { margin: 12px 22px 20px; }
.ef-source-matrix-grid { max-height: 410px; }
.ef-source-matrix-grid table { min-width: 980px; }
.ef-source-matrix-grid th, .ef-source-matrix-grid td { font-size: 11px; }
.ef-source-link { margin-top: 5px; }
.ef-source-link a { color: var(--green); font-weight: 800; }
.ef-source-link a { color: var(--green); font-weight: 800; }
.ef-version-register { display: grid; gap: 8px; padding: 18px 22px 0; }
.ef-version-row { display: flex; gap: 10px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ef-version-row.is-selected { border-color: #9dc8a6; background: #f7fbf7; box-shadow: inset 3px 0 0 var(--green); }
.ef-version-select-row { display: grid; grid-template-columns: 19px minmax(0, 1fr) auto; gap: 9px; align-items: center; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.ef-version-radio { display: block; width: 14px; height: 14px; border: 1px solid #9ba89e; border-radius: 50%; }
.ef-version-radio.is-selected { border: 4px solid var(--green); }
.ef-version-select-row > span:nth-child(2) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.ef-version-select-row strong { font-size: 13px; }
.ef-version-select-row small { flex-basis: 100%; color: var(--muted); font-size: 10px; }
.ef-version-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.ef-version-meta .material-symbols-rounded { font-size: 16px; }
.ef-version-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.ef-version-actions button { display: inline-flex; align-items: center; gap: 4px; }
.ef-version-actions .material-symbols-rounded { font-size: 14px; }
.ef-version-switcher { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 260px); gap: 10px 14px; min-width: 390px; padding: 12px; border: 1px solid #cfe3d2; border-radius: 9px; background: #f4faf5; }
.ef-version-switcher > div:first-child { display: grid; gap: 3px; align-content: center; }
.ef-version-switcher > div:first-child strong { color: var(--ink); font-size: 12px; }
.ef-version-switcher > div:first-child small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.ef-version-switcher label { display: grid; gap: 4px; }
.ef-version-switcher label > span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ef-version-switcher select { min-height: 34px; font-size: 11px; }
.ef-version-switcher-actions { grid-column: 1 / -1; display: flex; gap: 7px; }
.ef-version-switcher-actions button { display: inline-flex; align-items: center; gap: 4px; }
.ef-version-switcher-actions .material-symbols-rounded { font-size: 15px; }
.ef-workflow-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.ef-workflow-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; padding: 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }
.ef-workflow-step:hover, .ef-workflow-step.is-current { border-color: #a7d2af; background: #f0f9f1; }
.ef-workflow-step.is-ready { border-color: #a7d2af; background: #e9f7eb; }
.ef-workflow-step > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e4eee6; color: var(--muted); font-size: 10px; }
.ef-workflow-step.is-current > b, .ef-workflow-step.is-ready > b { background: var(--green); color: #fff; }
.ef-workflow-step > span { display: grid; gap: 3px; min-width: 0; }
.ef-workflow-step strong { color: var(--ink); font-size: 10px; line-height: 1.25; }
.ef-workflow-step small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.ef-compare-card { display: grid; gap: 16px; margin: 18px 22px 0; padding: 18px; border: 1px solid #cfe3d2; border-radius: 11px; background: #f7fbf7; }
.ef-compare-card.ef-compare-current { background: var(--panel); }
.ef-compare-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.ef-compare-heading h3 { margin: 4px 0 0; font-size: 17px; }
.ef-compare-heading p { max-width: 760px; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.ef-compare-status { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }
.ef-compare-status > span { color: var(--muted); font-size: 10px; }
.ef-compare-decision, .ef-compare-meta { display: grid; gap: 9px; }
.ef-compare-decision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ef-compare-decision article, .ef-compare-meta > div { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ef-compare-decision article > span, .ef-compare-meta span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ef-compare-decision strong, .ef-compare-meta strong { color: var(--ink); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.ef-compare-decision small, .ef-compare-meta small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.ef-compare-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ef-compare-detail { display: grid; gap: 9px; min-width: 0; }
.ef-compare-detail-head { display: flex; justify-content: space-between; gap: 10px; align-items: end; }
.ef-compare-detail-head h4 { margin: 3px 0 0; color: var(--ink); font-size: 14px; }
.ef-compare-table { max-height: 490px; margin-top: 0; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.ef-compare-table table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ef-compare-table thead { position: sticky; top: 0; z-index: 4; }
.ef-compare-table thead th { position: static; height: 42px; padding: 10px 8px; background: #e8f3e9 !important; color: var(--ink); box-shadow: 0 1px 0 #cfe3d2; font-size: 10px; line-height: 1.25; white-space: normal; vertical-align: middle; }
.ef-compare-table tbody { position: static; z-index: auto; }
.ef-compare-table tbody th, .ef-compare-table tbody td { position: static !important; z-index: auto !important; padding-top: 12px; padding-bottom: 12px; background: var(--panel); overflow: hidden; }
.ef-compare-table tbody tr:first-child > th, .ef-compare-table tbody tr:first-child > td { background: #f7fbf7; }
.ef-compare-table td, .ef-compare-table th { font-size: 11px; vertical-align: top; overflow-wrap: anywhere; }
.ef-compare-table th[scope='row'] { width: auto; color: var(--ink); text-align: left; }
.ef-compare-table th:nth-child(1) { width: 14%; }
.ef-compare-table th:nth-child(2), .ef-compare-table th:nth-child(3) { width: 12%; }
.ef-compare-table th:nth-child(4) { width: 17%; }
.ef-compare-table th:nth-child(5) { width: 45%; }
.ef-compare-table th[scope='row'] strong, .ef-compare-table td > strong { display: block; }
.ef-compare-table th[scope='row'] small, .ef-compare-table td > small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.ef-compare-table td:nth-child(2), .ef-compare-table td:nth-child(3) { width: auto; text-align: right; white-space: nowrap; }
.ef-compare-table td:nth-child(2) strong, .ef-compare-table td:nth-child(3) strong { color: var(--ink); font-size: 12px; }
.ef-compare-delta { width: auto; }
.ef-compare-delta strong, .ef-compare-delta span, .ef-compare-delta small { display: block; }
.ef-compare-delta strong { font-size: 12px; }
.ef-compare-delta span { margin-top: 2px; font-size: 10px; font-weight: 800; }
.ef-compare-delta small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.ef-compare-delta.up strong, .ef-compare-delta.up span { color: var(--red); }
.ef-compare-delta.down strong, .ef-compare-delta.down span { color: var(--green); }
.ef-compare-delta.neutral strong, .ef-compare-delta.neutral span { color: var(--muted); }
.ef-compare-source-detail { display: grid; gap: 3px; min-width: 0; max-width: none; }
.ef-compare-source-detail strong { color: var(--ink); font-size: 10px; line-height: 1.35; }
.ef-compare-source-detail span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.ef-compare-source-detail .ef-compare-limitation { color: #8b651d; }
.ef-compare-source-detail a { display: inline-flex; align-items: center; gap: 3px; width: fit-content; margin-top: 2px; color: var(--green); font-size: 10px; font-weight: 800; text-decoration: none; }
.ef-compare-source-detail a .material-symbols-rounded { font-size: 13px; }
.ef-compare-next-step { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border: 1px solid #d7e7d9; border-radius: 8px; background: #eef8ef; color: var(--muted); font-size: 10px; line-height: 1.4; }
.ef-compare-next-step > .material-symbols-rounded { flex: 0 0 auto; color: var(--green); font-size: 17px; }
.ef-compare-next-step div { display: grid; gap: 2px; }
.ef-compare-next-step strong { color: var(--ink); font-size: 10px; }
.ef-delta-up { color: var(--red) !important; font-weight: 800; }
.ef-delta-down { color: var(--green) !important; font-weight: 800; }
.ef-editor-panel { margin: 16px 22px 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); overflow: hidden; }
.ef-editor-panel > summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.ef-editor-panel > summary::-webkit-details-marker { display: none; }
.ef-editor-panel > summary > span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.ef-editor-panel > summary .material-symbols-rounded { color: var(--green); font-size: 19px; }
.ef-editor-panel > summary small { color: var(--muted); font-size: 10px; }
.ef-editor-form { display: grid; gap: 14px; padding: 0 16px 16px; }
.ef-editor-section { display: grid; gap: 11px; padding-top: 14px; border-top: 1px solid var(--line); }
.ef-editor-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.ef-editor-section-head h3 { margin: 3px 0 0; font-size: 14px; }
.ef-editor-helper { color: var(--muted); font-size: 10px; }
.ef-editor-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 11px 13px; }
.ef-editor-meta-grid label, .ef-editor-material-grid label { display: grid; gap: 4px; align-content: start; }
.ef-editor-meta-grid label > span, .ef-editor-material-grid label > span:first-child { color: var(--ink); font-size: 11px; font-weight: 800; }
.ef-editor-meta-grid label > span small, .ef-editor-material-grid label > span small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.35; }
.ef-editor-meta-grid input, .ef-editor-meta-grid select, .ef-editor-meta-grid textarea, .ef-editor-material-grid input { min-height: 34px; padding: 7px 9px; font-size: 11px; }
.ef-editor-material-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 9px 16px; }
.ef-editor-material-grid label { grid-template-columns: minmax(0, 1fr) 150px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ef-editor-material-grid .ef-input-wrap { width: 100%; min-width: 0; }
.ef-editor-material-grid .ef-input-wrap input { width: 100%; min-width: 0; box-sizing: border-box; padding-right: 76px; text-align: right; }
.ef-editor-material-grid .ef-input-wrap .ef-input-unit { position: absolute; right: 9px; white-space: nowrap; font-size: 9px; line-height: 1; color: var(--muted); pointer-events: none; }
.ef-editor-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 2px; }
.ef-editor-actions button { display: inline-flex; align-items: center; gap: 5px; }
.ef-editor-actions button:disabled { cursor: wait; opacity: .72; }
.ef-editor-actions .material-symbols-rounded { font-size: 16px; }
.ef-editor-save-status { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.35; }
.ef-editor-save-status.success-text { color: var(--green); }
.ef-editor-save-status.error-text { color: var(--red); }
.ef-editor-save-status:empty { display: none; }
.ef-editor-note { color: var(--muted); font-size: 10px; }
.ef-recalc-warning { display: flex; gap: 8px; align-items: flex-start; margin: 18px 22px 12px; padding: 11px 12px; border: 1px solid #ecd9ad; border-radius: 9px; background: #fff9e9; color: #765b22; font-size: 11px; line-height: 1.45; }
.ef-recalc-warning > .material-symbols-rounded { color: #b7791f; font-size: 18px; }
.ef-recalc-create, .ef-recalc-table { margin: 0 22px 12px; }
.ef-recalc-form { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 11px 13px; margin-top: 14px; }
.ef-recalc-form label { display: grid; gap: 4px; }
.ef-recalc-form label > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ef-recalc-form input, .ef-recalc-form select { min-height: 35px; padding: 7px 9px; font-size: 11px; }
.ef-recalc-form > button { align-self: end; min-height: 35px; }
.ef-recalc-table { margin-bottom: 20px; }
.ef-recalc-table .data-grid { margin-top: 14px; }
.ef-recalc-table table { min-width: 900px; }
.ef-recalc-table td, .ef-recalc-table th { font-size: 11px; }
.ef-recalc-table td:last-child { white-space: nowrap; }
.ef-recalc-table td:last-child { white-space: nowrap; }
@media (max-width: 1120px) {
  .ef-governance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-compare-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-version-switcher { min-width: 0; }
  .ef-material-layout, .ef-material-layout.is-inspector-closed { grid-template-columns: 1fr; }
  .ef-material-inspector { max-width: none; }
  .ef-shortcut-strip { grid-template-columns: 1fr; }
  .ef-evidence-layout { grid-template-columns: 1fr; }
  .ef-evidence-summary-card { grid-template-columns: auto 1fr; align-items: center; }
  .ef-evidence-summary-card p, .ef-evidence-summary-card button { grid-column: 2; }
  .ef-editor-meta-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 760px) {
  .ef-studio-header { display: grid; gap: 14px; padding: 18px 14px 15px; }
  .ef-studio-header-actions { align-items: stretch; }
  .ef-version-picker { flex: 1; min-width: 0; }
  .ef-studio-tabs { padding-inline: 8px; }
  .ef-governance-overview { padding: 14px 14px 0; }
  .ef-governance-overview-head { display: grid; gap: 8px; }
  .ef-governance-selected-note { max-width: none; text-align: left; }
  .ef-governance-grid, .ef-compare-decision, .ef-compare-meta { grid-template-columns: 1fr; }
  .ef-workflow-strip, .ef-version-switcher { grid-template-columns: 1fr; }
  .ef-version-switcher-actions { grid-column: auto; flex-wrap: wrap; }
  .ef-version-switcher-actions button { flex: 1; justify-content: center; }
  .ef-compare-heading { display: grid; }
  .ef-compare-status { justify-items: start; }
  .ef-compare-card { margin: 14px 14px 0; }
  .ef-ops-binding { grid-template-columns: 1fr; margin-inline: 14px; }
  .ef-ops-binding-symbol { min-height: 18px; }
  .ef-rule-banner { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin: 14px 14px 0; }
  .ef-warning-chip { grid-column: 1 / -1; width: fit-content; }
  .ef-material-layout { padding: 14px 14px 0; }
  .ef-section-head, .ef-tab-intro, .ef-card-heading { display: grid; }
  .ef-library-tools { width: 100%; }
  .ef-search-field { flex: 1; min-width: 0; }
  .ef-material-grid, .ef-operational-grid { grid-template-columns: 1fr; }
  .ef-shortcut-strip { padding: 14px 14px 0; }
  .ef-protection-footer { display: grid; margin: 14px 14px 16px; }
  .ef-record-count { margin-left: 0; text-align: left; white-space: normal; }
  .ef-tab-intro { padding: 17px 14px 13px; }
  .ef-evidence-layout { padding: 14px 14px 0; }
  .ef-source-matrix-card, .ef-recalc-create, .ef-recalc-table { margin-inline: 14px; }
  .ef-editor-panel { margin-inline: 14px; }
  .ef-editor-meta-grid, .ef-editor-material-grid, .ef-recalc-form { grid-template-columns: 1fr; }
  .ef-editor-material-grid label { grid-template-columns: minmax(0, 1fr) 145px; }
  .ef-version-row { align-items: flex-start; flex-direction: column; }
  .ef-version-actions { width: 100%; }
  .ef-version-actions button { flex: 1; justify-content: center; }
}
html[data-theme="carbon_dark"] .ef-rule-banner, html[data-theme="carbon_dark"] .ef-protection-footer, html[data-theme="carbon_dark"] .ef-governance-note, html[data-theme="carbon_dark"] .ef-locked-record-card { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-rule-banner strong, html[data-theme="carbon_dark"] .ef-protection-footer strong { color: var(--ink); }
html[data-theme="carbon_dark"] .ef-warning-chip, html[data-theme="carbon_dark"] .ef-recalc-warning { background: rgba(183, 121, 31, .12); border-color: rgba(183, 121, 31, .28); }
html[data-theme="carbon_dark"] .ef-governance-card.is-active, html[data-theme="carbon_dark"] .ef-governance-card.is-ready, html[data-theme="carbon_dark"] .ef-compare-card { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-governance-card.is-review, html[data-theme="carbon_dark"] .ef-governance-selected-note { background: rgba(183, 121, 31, .12); border-color: rgba(183, 121, 31, .28); }

/* Simplified EF workflow: keep the audit controls, but make the daily path
   visible and move secondary registers behind one expandable section. */
.ef-simple-shell { gap: 0; overflow: visible; background: var(--panel); }
.ef-simple-shell .ef-simple-header { display: flex; justify-content: space-between; gap: 24px; align-items: stretch; padding: 20px 24px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #f8fcf8, #eef8f0); }
.ef-simple-header > div:first-child { min-width: 0; }
.ef-simple-header .ef-studio-title-row { margin-top: 5px; }
.ef-simple-header .ef-studio-title-row h2 { font-size: 26px; }
.ef-simple-header p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ef-simple-header-action { display: grid; align-content: center; justify-items: end; min-width: 190px; padding: 12px 14px; border: 1px solid #c9e2cf; border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(25, 59, 35, .05); }
.ef-simple-header-action > span, .ef-simple-current-card > div > span, .ef-simple-version-row .ef-simple-label, .ef-simple-activation-row > div > span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ef-simple-header-action strong { margin-top: 2px; color: var(--green); font-size: 16px; }
.ef-simple-header-action small { color: var(--muted); font-size: 10px; }
.ef-simple-header-action button { margin-top: 9px; }
.ef-simple-shell .ef-studio-message { margin-top: 10px; }
.ef-simple-current-card { display: grid; grid-template-columns: 1.35fr 1fr 1fr auto; gap: 12px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--line); background: #fff; }
.ef-simple-current-card > div { display: grid; gap: 3px; min-width: 0; }
.ef-simple-current-card > div strong { color: var(--ink); font-size: 16px; letter-spacing: -.02em; }
.ef-simple-current-card > div small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.ef-simple-current-badge { display: inline-flex; align-items: center; gap: 5px; justify-self: end; padding: 7px 9px; border: 1px solid #c9e2cf; border-radius: 999px; background: #f1faf3; color: var(--green); font-size: 10px; font-weight: 900; white-space: nowrap; }
.ef-simple-current-badge .material-symbols-rounded { font-size: 15px; }
.ef-simple-guide { display: flex; align-items: center; gap: 10px; margin: 14px 24px 0; padding: 10px 12px; border: 1px solid #d6e7d9; border-radius: 10px; background: #f4faf5; color: var(--muted); font-size: 10px; }
.ef-simple-guide strong { color: var(--ink); font-size: 11px; }
.ef-simple-guide span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ef-simple-guide b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #d7efdc; color: var(--green); font-size: 10px; }
.ef-simple-guide i { color: #8ab695; font-style: normal; }
.ef-simple-step { margin: 12px 24px 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
.ef-simple-step-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 15px; }
.ef-simple-step-head > div { display: grid; gap: 3px; min-width: 0; }
.ef-simple-step-head strong { color: var(--ink); font-size: 13px; }
.ef-simple-step-head small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.ef-simple-step-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #dff2e2; color: var(--green); font-size: 12px; font-weight: 900; }
.ef-simple-step-count { padding: 5px 8px; border-radius: 999px; background: #f0f3f1; color: var(--muted); font-size: 10px; font-weight: 900; white-space: nowrap; }
.ef-simple-step-count.is-ready { background: #e3f4e6; color: var(--green); }
.ef-simple-step-details > summary { cursor: pointer; list-style: none; }
.ef-simple-step-details > summary::-webkit-details-marker, .ef-simple-more > summary::-webkit-details-marker, .ef-editor-advanced > summary::-webkit-details-marker { display: none; }
.ef-simple-step-details > summary:hover, .ef-simple-more > summary:hover, .ef-editor-advanced > summary:hover { background: #fbfdfb; }
.ef-simple-summary-arrow { color: var(--muted); transition: transform .15s ease; }
.ef-simple-step-details[open] .ef-simple-summary-arrow, .ef-simple-more[open] .ef-simple-summary-arrow, .ef-editor-advanced[open] > summary .ef-simple-summary-arrow { transform: rotate(180deg); }
.ef-simple-version-row { display: grid; grid-template-columns: minmax(230px, 1.2fr) minmax(180px, 1fr) auto; gap: 14px; align-items: end; padding: 0 15px 15px 53px; }
.ef-simple-version-row label { display: grid; gap: 5px; }
.ef-simple-version-row label > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.ef-simple-version-row select { min-height: 36px; }
.ef-simple-version-row > div { display: grid; gap: 3px; padding-bottom: 5px; }
.ef-simple-version-row > div strong { color: var(--ink); font-size: 12px; }
.ef-simple-version-row > div small { color: var(--muted); font-size: 10px; }
.ef-simple-data-grid { margin: 0; overflow-x: auto; }
.ef-simple-data-grid table { width: 100%; min-width: 620px; table-layout: fixed; }
.ef-simple-data-grid th, .ef-simple-data-grid td { padding: 9px 12px; font-size: 11px; vertical-align: middle; }
.ef-simple-data-grid th:first-child { width: 34%; }
.ef-simple-data-grid th:nth-child(2) { width: 22%; }
.ef-simple-data-grid th:nth-child(3) { width: 27%; }
.ef-simple-data-grid th:last-child { width: 17%; text-align: right; }
.ef-simple-data-grid tbody tr.is-selected { background: #f2faf3; }
.ef-simple-data-grid tbody tr:hover { background: #f8fcf8; }
.ef-simple-data-grid tbody tr.ef-simple-boundary-row { background: #fffaf0; }
.ef-simple-data-grid tbody th { color: var(--ink); text-align: left; }
.ef-simple-data-grid tbody th strong, .ef-simple-data-grid tbody th small { display: block; }
.ef-simple-data-grid tbody th small, .ef-simple-data-grid td small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.ef-simple-data-grid td strong { color: var(--green); font-size: 14px; }
.ef-simple-data-grid td:last-child { text-align: right; }
.ef-simple-status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #aab5ad; }
.ef-simple-status-dot.is-ready { background: var(--green); }
.ef-simple-status-dot.is-missing { background: #c99432; }
.ef-simple-view-link { padding: 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ef-simple-view-link:hover { color: #0d5a3c; }
.ef-simple-material-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 15px 14px; }
.ef-simple-material-layout.has-inspector { grid-template-columns: minmax(0, 1fr) minmax(270px, 31%); }
.ef-simple-material-layout .ef-material-inspector { align-self: start; min-width: 0; padding: 13px; box-shadow: none; }
.ef-simple-inline-details { margin: 0 15px 15px 53px; border-top: 1px solid var(--line); }
.ef-simple-inline-details summary { display: flex; align-items: center; gap: 7px; padding: 10px 0 6px; color: var(--ink); cursor: pointer; list-style: none; }
.ef-simple-inline-details summary::-webkit-details-marker { display: none; }
.ef-simple-inline-details summary .material-symbols-rounded { color: var(--green); font-size: 17px; }
.ef-simple-inline-details summary small { margin-left: auto; color: var(--muted); font-size: 10px; }
.ef-simple-formula { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: #f3f8f3; color: var(--muted); font-size: 10px; }
.ef-simple-formula b { color: var(--green); }
.ef-simple-formula strong { color: var(--ink); }
.ef-simple-inline-details p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ef-simple-source-body { padding: 0 15px 15px 53px; }
.ef-simple-source-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.ef-simple-source-summary > div { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfb; }
.ef-simple-source-summary span, .ef-simple-binding-line span { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.ef-simple-source-summary strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ef-simple-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.ef-simple-check-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 7px; align-items: center; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ef-simple-check-row > .material-symbols-rounded { color: #b47e25; font-size: 16px; }
.ef-simple-check-row.is-ready > .material-symbols-rounded { color: var(--green); }
.ef-simple-check-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.ef-simple-check-row strong { color: var(--ink); font-size: 10px; }
.ef-simple-check-row small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.ef-simple-check-row b { color: #9a6d20; font-size: 9px; }
.ef-simple-check-row.is-ready b { color: var(--green); }
.ef-simple-source-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 10px; }
.ef-simple-activation-step { border-color: #c9e2cf; background: #f8fcf8; }
.ef-simple-activation-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 0 15px 15px 53px; }
.ef-simple-activation-row > div:first-child { display: grid; gap: 3px; }
.ef-simple-activation-row > div:first-child strong { color: var(--green); font-size: 14px; }
.ef-simple-activation-row > div:first-child small { color: var(--muted); font-size: 10px; }
.ef-simple-blocker-note { display: grid; gap: 3px; max-width: 430px; padding: 8px 10px; border: 1px solid #ead8aa; border-radius: 8px; background: #fffaf0; color: #806323; font-size: 10px; line-height: 1.35; }
.ef-simple-blocker-note strong { color: #755719; font-size: 10px; }
.ef-simple-activation-action { display: flex; justify-content: end; }
.ef-simple-activation-action button { display: inline-flex; align-items: center; gap: 5px; }
.ef-simple-active-note { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 900; }
.ef-simple-active-note .material-symbols-rounded { font-size: 17px; }
.ef-simple-more { margin: 12px 24px 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
.ef-simple-more > summary { display: flex; align-items: center; gap: 8px; padding: 12px 15px; cursor: pointer; list-style: none; }
.ef-simple-more > summary > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 900; }
.ef-simple-more > summary .material-symbols-rounded { color: var(--green); font-size: 17px; }
.ef-simple-more > summary small { margin-left: auto; color: var(--muted); font-size: 10px; }
.ef-simple-more > summary .ef-simple-summary-arrow { margin-left: 0; color: var(--muted); }
.ef-simple-more-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 15px 14px; }
.ef-simple-more-actions button { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 1px 7px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfb; color: var(--ink); text-align: left; cursor: pointer; }
.ef-simple-more-actions button:hover, .ef-simple-more-actions button.is-active { border-color: #9dc8a6; background: #f2faf3; }
.ef-simple-more-actions button > .material-symbols-rounded { grid-row: span 2; color: var(--green); font-size: 17px; }
.ef-simple-more-actions strong { font-size: 10px; }
.ef-simple-more-actions small { color: var(--muted); font-size: 9px; }
.ef-simple-detail-panel { margin: 0 15px 15px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fbfdfb; }
.ef-simple-detail-heading { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 11px; }
.ef-simple-detail-heading h3 { margin: 3px 0 0; color: var(--ink); font-size: 14px; }
.ef-simple-detail-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.ef-simple-binding-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 11px; padding: 8px 10px; border: 1px solid #d6e7d9; border-radius: 8px; background: #f3faf4; color: var(--muted); font-size: 10px; }
.ef-simple-binding-line strong { margin-left: 4px; color: var(--ink); font-size: 11px; }
.ef-simple-history-list { display: grid; gap: 8px; }
.ef-simple-history-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(150px, .8fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ef-simple-history-row.is-selected { border-color: #9dc8a6; background: #f4fbf5; }
.ef-simple-history-row > div:first-child { display: grid; grid-template-columns: auto auto; gap: 3px 7px; align-items: center; min-width: 0; }
.ef-simple-history-row > div:first-child strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ef-simple-history-row > div:first-child small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.ef-simple-history-row > div:nth-child(2) { display: grid; gap: 3px; color: var(--muted); font-size: 9px; }
.ef-simple-row-actions { display: flex; justify-content: end; gap: 6px; flex-wrap: wrap; }
.ef-simple-protection-footer { display: flex; gap: 8px; align-items: flex-start; margin: 12px 24px 20px; padding: 10px 12px; border: 1px solid #d6e7d9; border-radius: 9px; background: #f3faf4; color: var(--muted); font-size: 10px; line-height: 1.4; }
.ef-simple-protection-footer > .material-symbols-rounded { color: var(--green); font-size: 17px; }
.ef-simple-protection-footer div { display: grid; gap: 2px; }
.ef-simple-protection-footer strong { color: var(--ink); }
.ef-simple-shell .ef-editor-panel { margin: 0 15px 15px; border-radius: 9px; }
.ef-simple-shell .ef-editor-panel > summary { padding: 11px 13px; }
.ef-simple-shell .ef-editor-meta-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.ef-simple-shell .ef-editor-essential-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.ef-simple-shell .ef-editor-advanced { border-top: 1px solid var(--line); }
.ef-simple-shell .ef-editor-advanced > summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 0; cursor: pointer; list-style: none; }
.ef-simple-shell .ef-editor-advanced > summary > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 11px; font-weight: 900; }
.ef-simple-shell .ef-editor-advanced > summary .material-symbols-rounded { color: var(--green); font-size: 17px; }
.ef-simple-shell .ef-editor-advanced > summary small { color: var(--muted); font-size: 9px; }
.ef-simple-shell .ef-editor-advanced > .ef-editor-meta-grid, .ef-simple-shell .ef-editor-advanced > .ef-editor-material-grid { padding-bottom: 11px; }
.ef-simple-shell .ef-editor-wide-field { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .ef-simple-header { flex-direction: column; }
  .ef-simple-header-action { justify-items: start; }
  .ef-simple-current-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-simple-current-badge { justify-self: start; }
  .ef-simple-source-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-simple-material-layout.has-inspector { grid-template-columns: 1fr; }
  .ef-simple-more-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-simple-shell .ef-editor-meta-grid, .ef-simple-shell .ef-editor-essential-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 640px) {
  .ef-simple-shell .ef-simple-header { padding: 15px; }
  .ef-simple-current-card, .ef-simple-guide, .ef-simple-step, .ef-simple-more { margin-left: 14px; margin-right: 14px; }
  .ef-simple-current-card { grid-template-columns: 1fr; }
  .ef-simple-guide { align-items: flex-start; flex-direction: column; gap: 6px; }
  .ef-simple-guide i { display: none; }
  .ef-simple-step-head { grid-template-columns: 25px minmax(0, 1fr) auto; padding: 11px 12px; }
  .ef-simple-version-row, .ef-simple-activation-row { grid-template-columns: 1fr; display: grid; padding-left: 12px; padding-right: 12px; }
  .ef-simple-blocker-note { max-width: none; }
  .ef-simple-source-body, .ef-simple-inline-details { margin-left: 12px; padding-left: 0; margin-right: 12px; }
  .ef-simple-check-list, .ef-simple-source-summary, .ef-simple-more-actions { grid-template-columns: 1fr; }
  .ef-simple-source-actions { align-items: flex-start; flex-direction: column; }
  .ef-simple-history-row { grid-template-columns: 1fr; }
  .ef-simple-row-actions { justify-content: start; }
  .ef-simple-protection-footer { margin-left: 14px; margin-right: 14px; }
  .ef-simple-shell .ef-editor-panel { margin-left: 0; margin-right: 0; }
  .ef-simple-shell .ef-editor-meta-grid, .ef-simple-shell .ef-editor-essential-grid { grid-template-columns: 1fr; }
}
html[data-theme="carbon_dark"] .ef-ops-binding { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-compare-next-step { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-compare-source-detail .ef-compare-limitation { color: #e8bf63; }
html[data-theme="carbon_dark"] .ef-version-switcher { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-workflow-strip { background: var(--panel); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-workflow-step:hover, html[data-theme="carbon_dark"] .ef-workflow-step.is-current, html[data-theme="carbon_dark"] .ef-workflow-step.is-ready { background: rgba(61, 214, 140, .12); border-color: rgba(61, 214, 140, .28); }
html[data-theme="carbon_dark"] .ef-compare-table thead th { background: #163b2a; box-shadow: 0 1px 0 rgba(61, 214, 140, .28); }
html[data-theme="carbon_dark"] .ef-compare-table tbody tr:first-child > th, html[data-theme="carbon_dark"] .ef-compare-table tbody tr:first-child > td { background: rgba(61, 214, 140, .06); }

/* Customer-arranged delivery: explicit handover evidence and no fake Aspen transport fields. */
.collection-transport-mode-field { display: grid; gap: 5px; color: #587061; font-size: 9px; font-weight: 800; }
.collection-transport-mode-field select { min-height: 36px; padding: 0 10px; border: 1px solid #b8d8c0; border-radius: 8px; background: #f3fbf4; color: #1d3525; font-weight: 700; }
.customer-delivery-plan-note, .customer-delivery-receive-intro { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid #b8ddc1; border-left: 4px solid #2e9e52; border-radius: 10px; background: #eef9f0; color: #31513d; font-size: 11px; line-height: 1.4; }
.customer-delivery-plan-note strong, .customer-delivery-receive-intro strong { color: #1d6f3b; font-size: 12px; }
.customer-delivery-plan-note small, .customer-delivery-receive-intro small, .customer-delivery-receive-intro p { color: #708277; }
.customer-delivery-receive-intro p { margin: 4px 0 0; }
.customer-delivery-receive-form { gap: 12px; }
.customer-delivery-receive-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.customer-delivery-receive-actions { display: flex; justify-content: flex-end; gap: 8px; }
.customer-delivery-receive-actions button { min-height: 36px; }
.sorting-customer-delivery-linked { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid rgba(46,158,82,.35); border-radius: 12px; background: rgba(46,158,82,.08); }
.sorting-customer-delivery-linked > div { display: grid; gap: 4px; }
.sorting-customer-delivery-linked span { color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 800; }
.sorting-customer-delivery-linked small { color: var(--muted); }
.customer-delivery-detail-section { border-left: 3px solid #2e9e52; padding-left: 14px; }
.appr-evidence-reference { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid rgba(61,214,140,.28); border-radius: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.do-edit-aspen-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 640px) {
  .sorting-customer-delivery-linked, .do-edit-aspen-fields { grid-template-columns: 1fr; }
  .customer-delivery-receive-actions { flex-direction: column-reverse; }
  .customer-delivery-receive-actions button { width: 100%; }
}

/* Box Inventory v2 owns the page layout in box-inventory-v2.css. These tokens
   remain available to the existing, tested inventory modal workflows. */
#view-boxes {
  --bi-surface: #ffffff;
  --bi-surface-2: #f5f7f9;
  --bi-line: #e3e7ec;
  --bi-ink: #101828;
  --bi-muted: #7a8698;
  --bi-accent: #235e9e;
  --bi-accent-soft: #eaf1f9;
  --bi-good: #0f7d38; --bi-good-bg: #e6f4e9;
  --bi-warn: #9a6a12; --bi-warn-bg: #f9f0dd;
  --bi-crit: #b5322b; --bi-crit-bg: #f8e7e6;
}
.center-modal.bi-modal, .center-modal.bi-modal-lg {
  --bi-surface: #ffffff;
  --bi-line: #e3e7ec;
  --bi-ink: #101828;
  --bi-accent: #235e9e;
  --bi-crit: #b5322b;
}
.center-modal.bi-modal .row-btn, .center-modal.bi-modal-lg .row-btn { padding: 5px 10px; border: 1px solid var(--bi-line); border-radius: 7px; background: var(--bi-surface); color: var(--bi-accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.center-modal.bi-modal .row-btn:hover, .center-modal.bi-modal-lg .row-btn:hover { border-color: var(--bi-accent); }
.center-modal.bi-modal .row-btn.danger, .center-modal.bi-modal-lg .row-btn.danger { color: var(--bi-crit); }
.center-modal.bi-modal .row-btn:disabled, .center-modal.bi-modal-lg .row-btn:disabled { opacity: .5; cursor: not-allowed; }
.center-modal.bi-modal .btn-primary, .center-modal.bi-modal-lg .btn-primary { border: none; border-radius: 8px; padding: 9px 16px; background: var(--bi-accent); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.center-modal.bi-modal .btn-primary:disabled, .center-modal.bi-modal-lg .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.center-modal.bi-modal .btn-ghost, .center-modal.bi-modal-lg .btn-ghost { border: 1px solid var(--bi-line); border-radius: 8px; padding: 9px 16px; background: var(--bi-surface); color: var(--bi-ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.center-modal.bi-modal .btn-ghost:hover, .center-modal.bi-modal-lg .btn-ghost:hover { border-color: var(--bi-accent); color: var(--bi-accent); }
.center-modal.bi-modal .btn-ghost:disabled, .center-modal.bi-modal-lg .btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
body.box-inventory-modal-open .mnav-btn { visibility: hidden; pointer-events: none; }
.center-modal-overlay.box-inventory-modal-overlay { z-index: 130; }

/* Box Inventory modals: batch-add grid, bulk update, replace, stocktake, box-type reference. */
.center-modal.bi-modal { width: min(820px, calc(100vw - 24px)) !important; max-height: calc(100vh - 24px); }
.center-modal.bi-modal-lg { width: min(1480px, calc(100vw - 24px)) !important; max-height: calc(100vh - 24px); }
.center-modal.bi-modal .center-modal-body, .center-modal.bi-modal-lg .center-modal-body { overflow: auto; }

/* The inventory view has its own display:grid rule. It must still obey the
   shared view contract when another role/view is active. */
#view-boxes.view:not(.active) { display: none !important; }

.bi-modal-form { display: grid; gap: 14px; font-size: 13px; }
.bi-modal-form label { display: grid; gap: 5px; color: #7a8698; font-size: 11px; font-weight: 700; }
.bi-modal-form input, .bi-modal-form select, .bi-modal-form textarea { width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 10px; border: 1px solid #e3e7ec; border-radius: 7px; background: #fff; color: #101828; font-size: 12.5px; }
.bi-modal-form textarea { min-height: 64px; padding: 8px 10px; }
.bi-modal-form input:focus, .bi-modal-form select:focus, .bi-modal-form textarea:focus { border-color: #235e9e; outline: 2px solid #eaf1f9; outline-offset: 1px; }
.bi-modal-form input[readonly] { background: #f5f7f9; color: #7a8698; }
.bi-modal-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid #d7e6f5; border-left: 4px solid #235e9e; border-radius: 12px; background: #eaf1f9; }
.bi-modal-intro h3 { margin: 3px 0 4px; color: #101828; font-size: 16.5px; }
.bi-modal-intro p { margin: 0; max-width: 700px; color: #45546a; line-height: 1.45; }
.bi-modal-count { flex: 0 0 auto; padding: 7px 12px; border: 1px solid #235e9e; border-radius: 999px; color: #235e9e; font-size: 11px; font-weight: 700; white-space: nowrap; }
.bi-modal-defaults { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(120px, .7fr)) auto; gap: 10px; align-items: end; padding: 14px; border: 1px solid #e3e7ec; border-radius: 12px; background: #f5f7f9; }
.bi-modal-defaults button { min-height: 36px; white-space: nowrap; }
.bi-modal-batch-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.bi-modal-hint { padding: 10px 12px; border-radius: 9px; background: #fdf4e3; color: #7a8698; font-size: 11px; line-height: 1.4; }
.bi-modal-subpanel { display: grid; gap: 12px; padding: 14px; border: 1px solid #d7e6f5; border-radius: 12px; background: #f5f9fd; }
.bi-modal-subpanel[hidden] { display: none; }
.bi-modal-subpanel strong { color: #101828; }
.bi-modal-subpanel p { margin: 3px 0 0; color: #45546a; }
.bi-modal-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bi-modal-fields-grid .bi-modal-notes { grid-column: 1 / -1; }
.bi-modal-table-wrap { overflow: auto; border: 1px solid #e3e7ec; border-radius: 12px; }
.bi-modal-table { width: 100%; min-width: 1100px; border-collapse: separate; border-spacing: 0; }
.bi-modal-table th, .bi-modal-table td { padding: 8px 7px; border-bottom: 1px solid #e3e7ec; vertical-align: middle; text-align: left; }
.bi-modal-table th { position: sticky; top: 0; z-index: 1; background: #f5f7f9; color: #7a8698; font-size: 10px; font-weight: 700; white-space: nowrap; }
.bi-modal-table tr:last-child td { border-bottom: 0; }
.bi-modal-table input, .bi-modal-table select { width: 100%; min-height: 34px; box-sizing: border-box; padding: 0 8px; border: 1px solid #e3e7ec; border-radius: 7px; background: #fff; color: #101828; font-size: 11px; }
.bi-modal-table td:nth-child(2) input { width: 100px; }
.bi-modal-table td:nth-child(3) select { width: 130px; }
.bi-modal-table td:nth-child(4) input { width: 78px; }
.bi-modal-table td:nth-child(5) select { width: 120px; }
.bi-modal-table td:nth-child(6) select { width: 112px; }
.bi-modal-table td:nth-child(7) input { width: 220px; }
.bi-modal-table td:nth-child(8) input { width: 160px; }
.bi-modal-table td:nth-child(9) input { width: 140px; }
.bi-row-num { width: 28px; color: #7a8698; font-size: 11px; font-weight: 700; text-align: center !important; }
.bi-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; bottom: -1px; padding: 12px 0 0; border-top: 1px solid #e3e7ec; background: #fff; }
.bi-modal-footer > p { flex: 1; min-height: 18px; margin: 0; line-height: 1.4; }
.bi-modal-footer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.bi-modal-footer-actions button { min-height: 36px; }
.bi-catalogue-list { display: grid; gap: 8px; }
.bi-catalogue-row { display: grid; grid-template-columns: 150px 90px 1fr; align-items: center; gap: 12px; padding: 13px; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; }
.bi-catalogue-note { color: #7a8698; font-size: 11px; }
.bi-stocktake-toolbar { display: grid; grid-template-columns: minmax(200px, 1fr) auto auto; gap: 8px; align-items: center; }
.bi-stocktake-toolbar input { min-width: 0; }
.bi-stocktake-list { max-height: min(480px, 54vh); overflow: auto; border: 1px solid #e3e7ec; border-radius: 12px; }
.bi-stocktake-row { display: grid; grid-template-columns: 26px minmax(150px,1fr) minmax(160px,1fr) minmax(130px,1fr); gap: 12px; align-items: center; padding: 11px 13px; border-bottom: 1px solid #e3e7ec; cursor: pointer; }
.bi-stocktake-row:last-child { border-bottom: 0; }
.bi-stocktake-row:hover { background: #f5f7f9; }
.bi-stocktake-row > span { display: grid; gap: 3px; color: #101828; font-size: 11px; }
.bi-stocktake-row small { color: #7a8698; font-size: 10px; }
@media (max-width: 1100px) {
  .bi-modal-defaults { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-modal-batch-picker { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .center-modal.bi-modal, .center-modal.bi-modal-lg { width: calc(100vw - 14px) !important; max-height: calc(100vh - 14px); }
  .bi-modal-intro, .bi-modal-footer { flex-direction: column; align-items: stretch; }
  .bi-modal-fields-grid { grid-template-columns: 1fr; }
  .bi-modal-fields-grid .bi-modal-notes { grid-column: auto; }
  .bi-stocktake-toolbar { grid-template-columns: 1fr 1fr; }
  .bi-stocktake-toolbar input { grid-column: 1 / -1; }
  .bi-stocktake-row { grid-template-columns: 26px 1fr 1fr; }
  .bi-stocktake-row > span:last-child { grid-column: 2 / -1; }
  .bi-catalogue-row { grid-template-columns: 1fr auto; }
  .bi-catalogue-note { grid-column: 1 / -1; }
}

/* Box Inventory details drawer. */
#detailDrawer:has(.bi-detail-section) .drawer-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; grid-auto-rows: max-content; gap: 12px; }
#detailDrawer:has(.bi-detail-section) .drawer-body > .bi-detail-section { min-width: 0; margin-bottom: 0; }
#detailDrawer:has(.bi-detail-section) .drawer-body > .bi-detail-section:first-child,
#detailDrawer:has(.bi-detail-section) .drawer-body > .bi-detail-section:last-child { grid-column: 1 / -1; }
#detailDrawer:has(.bi-detail-section) .drawer-body > .bi-detail-section:nth-child(2) p { margin: 0; padding: 11px 12px; border: 1px solid #dbe5df; border-radius: 9px; background: #f7fbf8; }
#drawerBody .bi-detail-section { display: grid; gap: 10px; }
#drawerBody .bi-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#drawerBody .bi-detail-grid > div { display: grid; gap: 4px; padding: 11px; border: 1px solid #e3e7ec; border-radius: 10px; background: #f5f7f9; }
#drawerBody .bi-detail-list { display: grid; gap: 8px; }
#drawerBody .bi-detail-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e3e7ec; border-radius: 9px; }
#drawerBody .bi-detail-list span { color: #7a8698; }
@media (max-width: 760px) {
  #detailDrawer:has(.bi-detail-section) .drawer-body { grid-template-columns: 1fr; }
  #detailDrawer:has(.bi-detail-section) .drawer-body > .bi-detail-section:first-child,
  #detailDrawer:has(.bi-detail-section) .drawer-body > .bi-detail-section:last-child { grid-column: auto; }
  #drawerBody .bi-detail-grid { grid-template-columns: 1fr; }
}

/* Final narrow internal shell: keep the compact brand bar above the page
   header. Earlier responsive rules switched between block and grid layouts,
   which let the two sticky bars occupy the same visual layer. */
@media (max-width:860px) {
  body:not([data-role="driver"]):not([data-role="customer_view"]):not([data-role="customer_master"]) .app-shell {
    display:flex !important;
    flex-direction:column;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }
  body:not([data-role="driver"]):not([data-role="customer_view"]):not([data-role="customer_master"]) .sidebar {
    flex:0 0 auto;
    width:100%;
    height:auto;
    min-height:54px;
    box-sizing:border-box;
    position:relative;
  }
  body:not([data-role="driver"]):not([data-role="customer_view"]):not([data-role="customer_master"]) main {
    flex:1 1 auto;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }
}

/* Online inquiry performance module — fresh register, no legacy lead data. */
#view-leads .online-inquiry-module { display: grid; gap: 18px; }
#view-leads .online-inquiry-hero,
#view-leads .online-inquiry-register,
#view-leads .online-inquiry-daily,
#view-leads .online-inquiry-breakdown { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
#view-leads .online-inquiry-hero { padding: 24px 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(135deg, rgba(46, 158, 82, .12), rgba(73, 168, 137, .05)); }
#view-leads .online-inquiry-hero h2,
#view-leads .online-inquiry-register h3,
#view-leads .online-inquiry-daily h3 { margin: 4px 0; color: var(--ink); }
#view-leads .online-inquiry-hero p,
#view-leads .online-inquiry-register p { margin: 0; color: var(--muted); }
#view-leads .online-inquiry-view-only { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
#view-leads .online-inquiry-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#view-leads .online-inquiry-kpis article { min-height: 88px; padding: 18px; display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
#view-leads .online-inquiry-kpis .material-symbols-rounded { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(46, 158, 82, .12); color: #2e9e52; }
#view-leads .online-inquiry-kpis strong { display: block; color: var(--ink); font-size: 25px; line-height: 1; }
#view-leads .online-inquiry-kpis small { display: block; margin-top: 7px; color: var(--muted); font-weight: 700; }
#view-leads .online-inquiry-insights { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.7fr); gap: 14px; }
#view-leads .online-inquiry-daily,
#view-leads .online-inquiry-breakdown { padding: 18px; }
#view-leads .online-inquiry-daily > header,
#view-leads .online-inquiry-breakdown > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#view-leads .online-inquiry-daily > div > div,
#view-leads .online-inquiry-rank { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
#view-leads .online-inquiry-daily strong,
#view-leads .online-inquiry-rank strong { color: var(--ink); }
#view-leads .online-inquiry-breakdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#view-leads .online-inquiry-breakdown > header { justify-content: flex-start; color: var(--ink); }
#view-leads .online-inquiry-breakdown > header .material-symbols-rounded { color: #2e9e52; }
#view-leads .online-inquiry-register { overflow: hidden; }
#view-leads .online-inquiry-register > header { padding: 20px 22px 12px; }
#view-leads .online-inquiry-filters { padding: 0 22px 16px; display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .48fr)) repeat(2, minmax(135px, .42fr)) auto auto; gap: 8px; align-items: center; }
#view-leads .online-inquiry-filters input,
#view-leads .online-inquiry-filters select { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); padding: 7px 10px; }
#view-leads .online-inquiry-search { position: relative; }
#view-leads .online-inquiry-search .material-symbols-rounded { position: absolute; left: 10px; top: 9px; color: var(--muted); font-size: 19px; }
#view-leads .online-inquiry-search input { padding-left: 36px; }
#view-leads .online-inquiry-table-wrap { overflow: auto; border-top: 1px solid var(--line); }
#view-leads .online-inquiry-table-wrap table { width: 100%; min-width: 1560px; border-collapse: collapse; }
#view-leads .online-inquiry-table-wrap th,
#view-leads .online-inquiry-table-wrap td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--muted); font-size: 12px; }
#view-leads .online-inquiry-table-wrap th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--ink); font-size: 10px; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
#view-leads .online-inquiry-table-wrap td strong { color: var(--ink); }
#view-leads .online-inquiry-long { min-width: 260px; max-width: 360px; white-space: normal; }
#view-leads .online-inquiry-platform { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: rgba(46, 158, 82, .12); color: #267b40; font-weight: 800; white-space: nowrap; }
#view-leads .online-inquiry-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
#view-leads .online-inquiry-empty .material-symbols-rounded { font-size: 34px; color: #2e9e52; }
#view-leads .online-inquiry-empty strong { color: var(--ink); font-size: 16px; }
#view-leads .online-inquiry-actions { display: inline-flex; gap: 6px; align-items: center; }
#view-leads .online-inquiry-actions .compact-btn { min-width: 32px; min-height: 32px; padding: 5px; }
#view-leads .online-inquiry-actions .danger { color: #b84a4a; border-color: rgba(184, 74, 74, .28); }
.online-inquiry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.online-inquiry-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.online-inquiry-form input,
.online-inquiry-form textarea,
.online-inquiry-form select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 10px 11px; font: inherit; }
.online-inquiry-form textarea { min-height: 110px; resize: vertical; }
.online-inquiry-form-wide,
.online-inquiry-form-actions { grid-column: 1 / -1; }
.online-inquiry-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }
html[data-theme="carbon_dark"] #view-leads .online-inquiry-platform { color: #7be6a3; background: rgba(61, 214, 140, .12); }
@media (max-width: 1100px) {
  #view-leads .online-inquiry-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-leads .online-inquiry-insights { grid-template-columns: 1fr; }
  #view-leads .online-inquiry-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-leads .online-inquiry-search { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #view-leads .online-inquiry-hero { align-items: flex-start; flex-direction: column; }
  #view-leads .online-inquiry-kpis,
  #view-leads .online-inquiry-breakdowns,
  #view-leads .online-inquiry-filters,
  .online-inquiry-form { grid-template-columns: 1fr; }
  #view-leads .online-inquiry-search,
  .online-inquiry-form-wide,
  .online-inquiry-form-actions { grid-column: auto; }
}

/* Product Design follow-up — notification queue and delivery-order detail.
   The data model and actions stay unchanged; these rules improve scanability,
   grouping and responsive behavior for the two high-frequency review flows. */
.center-modal.notification-queue-modal {
  width: min(1280px, calc(100vw - 32px));
  max-width: 1280px;
  max-height: min(880px, calc(100vh - 32px));
  border: 1px solid rgba(38, 104, 67, .18);
  box-shadow: 0 28px 80px rgba(20, 54, 36, .2);
}
.notification-queue-modal .center-modal-head {
  padding: 20px 26px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.notification-queue-modal .center-modal-head h2 { margin-top: 5px; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.025em; }
.notification-queue-modal .center-modal-head button { min-width: 70px; }
.notification-queue-modal .center-modal-body {
  display: block;
  overflow: auto;
  padding: 20px 26px 28px;
  background: #f7faf7;
}
.notification-drawer { display: grid; gap: 16px; }
.notification-queue-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid rgba(46, 158, 82, .18);
  border-radius: 16px;
  background: linear-gradient(105deg, rgba(46, 158, 82, .1), rgba(255, 255, 255, .68));
}
.notification-queue-intro-icon,
.notification-filter-heading > .material-symbols-rounded {
  display: grid;
  place-items: center;
  color: var(--green);
  background: rgba(46, 158, 82, .13);
}
.notification-queue-intro-icon { width: 40px; height: 40px; border-radius: 12px; }
.notification-queue-intro-icon .material-symbols-rounded { font-size: 21px; }
.notification-queue-intro .eyebrow { color: var(--green); }
.notification-queue-intro h3,
.notification-queue-list-head h3 { margin: 3px 0 2px; color: var(--ink); font-size: 16px; letter-spacing: -.015em; }
.notification-queue-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.notification-queue-count { min-width: 108px; padding-left: 17px; border-left: 1px solid rgba(46, 158, 82, .18); color: var(--ink); font-size: 24px; line-height: 1; text-align: right; }
.notification-queue-count small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.2; }
.notification-filter-panel {
  display: grid;
  gap: 13px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.notification-filter-heading { display: flex; align-items: center; gap: 10px; }
.notification-filter-heading > .material-symbols-rounded { width: 30px; height: 30px; border-radius: 9px; font-size: 17px; }
.notification-filter-heading strong,
.notification-filter-heading span:not(.material-symbols-rounded) { display: block; }
.notification-filter-heading strong { color: var(--ink); font-size: 13px; }
.notification-filter-heading div > span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.notification-filter { display: grid; grid-template-columns: minmax(190px, 1.3fr) repeat(2, minmax(150px, 1fr)) repeat(2, minmax(145px, .85fr)) auto; gap: 10px; align-items: end; }
.notification-filter label { display: grid; gap: 6px; min-width: 0; }
.notification-filter label > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notification-filter input,
.notification-filter select { width: 100%; min-height: 40px; border-radius: 10px; }
.notification-filter-apply { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.notification-filter-apply .material-symbols-rounded { font-size: 16px; }
.notification-queue-list { display: grid; gap: 10px; }
.notification-queue-list-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 2px 2px 1px; }
.notification-queue-list-head > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.notification-queue-row {
  display: grid;
  grid-template-columns: minmax(155px, .9fr) minmax(205px, 1.15fr) minmax(220px, 1.15fr) minmax(140px, .7fr) minmax(275px, 1.6fr);
  gap: 12px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 5px 16px rgba(29, 76, 47, .035);
}
.notification-queue-row:hover { border-color: rgba(46, 158, 82, .35); box-shadow: 0 8px 22px rgba(29, 76, 47, .08); }
.notification-queue-cell { min-width: 0; display: grid; gap: 3px; align-content: center; }
.notification-queue-label { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.notification-queue-cell strong { color: var(--ink); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.notification-queue-cell small { color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.notification-queue-status { align-items: start; }
.notification-queue-status .pill { width: fit-content; max-width: 100%; }
.notification-queue-actions { min-width: 0; display: grid; gap: 7px; align-content: center; }
.notification-queue-action-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.notification-queue-action-buttons button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 6px 9px; font-size: 10px; white-space: nowrap; }
.notification-queue-action-buttons .material-symbols-rounded { font-size: 15px; }
.notification-queue-action-buttons .notification-mark-sent-btn { background: var(--green); color: #fff; border-color: var(--green); }
.notification-queue-action-buttons .notification-skip-btn { color: #b25d50; background: rgba(197, 92, 77, .08); border-color: rgba(197, 92, 77, .18); }
.notification-queue-empty { display: grid; place-items: center; gap: 6px; min-height: 180px; padding: 28px; border: 1px dashed var(--line); border-radius: 14px; background: var(--panel); color: var(--muted); text-align: center; }
.notification-queue-empty .material-symbols-rounded { color: var(--green); font-size: 30px; }
.notification-queue-empty strong { color: var(--ink); font-size: 13px; }
.notification-queue-empty span:last-child { font-size: 11px; }

#detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer {
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: 980px !important;
  background: #f7faf7 !important;
}
#detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer .drawer-head { padding: 20px 26px 17px; background: var(--panel) !important; }
#detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer .drawer-head h2 { margin-top: 5px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; }
#detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer .drawer-body { display: block; padding: 20px 26px 30px; background: #f7faf7 !important; }
.delivery-order-detail { display: grid; gap: 16px; }
.delivery-order-detail-intro { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 17px; border: 1px solid rgba(46, 158, 82, .18); border-radius: 15px; background: linear-gradient(105deg, rgba(46, 158, 82, .1), rgba(255, 255, 255, .72)); }
.delivery-order-detail-intro-copy { min-width: 0; display: flex; align-items: center; gap: 11px; }
.delivery-order-detail-intro-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(46, 158, 82, .14); color: var(--green); }
.delivery-order-detail-intro-icon .material-symbols-rounded { font-size: 20px; }
.delivery-order-detail-intro .eyebrow { color: var(--green); }
.delivery-order-detail-intro strong { display: block; margin-top: 3px; color: var(--ink); font-size: 15px; }
.delivery-order-detail-intro p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.delivery-order-type { flex: 0 0 auto; max-width: 220px; padding: 6px 9px; border: 1px solid rgba(46, 158, 82, .2); border-radius: 999px; color: var(--green); background: rgba(255, 255, 255, .58); font-size: 10px; font-weight: 800; line-height: 1.25; text-align: center; }
.delivery-order-detail .do-detail-metrics { gap: 10px; }
.delivery-order-detail .do-detail-metrics .metric-card { min-height: 86px; padding: 13px 14px; border-radius: 13px; box-shadow: 0 4px 14px rgba(29, 76, 47, .035); }
.delivery-order-detail .do-detail-metrics .metric-card > span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.delivery-order-detail .do-detail-metrics .metric-card > strong { margin-top: 7px; color: var(--ink); font-size: clamp(16px, 1.7vw, 23px) !important; line-height: 1.15; overflow-wrap: anywhere; }
.delivery-order-detail .do-detail-metrics .do-detail-customer > strong { font-size: clamp(18px, 2vw, 25px) !important; }
.delivery-order-detail .do-detail-metrics .do-detail-evidence > strong { font-size: clamp(15px, 1.6vw, 21px) !important; }
.delivery-order-detail .do-detail-section { display: grid; gap: 13px; margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.delivery-order-detail .do-detail-section > h3 { margin: 0; color: var(--ink); font-size: 14px; }
.do-detail-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.do-detail-section-heading h3 { margin: 3px 0 3px; color: var(--ink); font-size: 15px; }
.do-detail-section-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.do-detail-section-count { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--green); background: rgba(46, 158, 82, .1); font-size: 10px; font-weight: 800; }
.delivery-order-detail .do-detail-section .metric-card { min-height: 68px; padding: 11px 12px; border-radius: 11px; }
.delivery-order-detail .do-detail-section .metric-card > span { font-size: 9px; }
.delivery-order-detail .do-detail-section .metric-card > strong { margin-top: 5px; font-size: 14px !important; line-height: 1.25; overflow-wrap: anywhere; }
.do-detail-linkage { background: rgba(46, 158, 82, .035) !important; }
.do-detail-linkage > .muted { margin: 0; font-size: 11px; line-height: 1.45; }
.do-detail-table { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.do-detail-table table { min-width: 760px; }
.do-detail-table th { padding: 9px 10px; font-size: 9px; letter-spacing: .06em; }
.do-detail-table td { padding: 10px; font-size: 11px; line-height: 1.35; vertical-align: middle; }
.do-detail-table td strong { font-size: 11px; }
.do-detail-table td small { font-size: 9px; line-height: 1.3; }
.do-detail-table .compact-btn { min-height: 28px; padding: 5px 8px; font-size: 10px; }
.do-detail-timeline-section .mini-timeline { display: grid; gap: 0; margin: 0; padding: 2px 0 2px 17px; border-left: 2px solid rgba(46, 158, 82, .22); }
.do-detail-timeline-section .mini-timeline span { position: relative; padding: 8px 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.do-detail-timeline-section .mini-timeline span::before { content: ''; position: absolute; top: 12px; left: -23px; width: 9px; height: 9px; border: 2px solid var(--panel); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px rgba(46, 158, 82, .25); }

html[data-theme="carbon_dark"] .notification-queue-modal .center-modal-body,
html[data-theme="carbon_dark"] #detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer,
html[data-theme="carbon_dark"] #detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer .drawer-body { background: var(--bg) !important; }
html[data-theme="carbon_dark"] .notification-queue-intro,
html[data-theme="carbon_dark"] .delivery-order-detail-intro { background: linear-gradient(105deg, rgba(46, 158, 82, .14), rgba(255, 255, 255, .035)); }
html[data-theme="carbon_dark"] .notification-filter-panel,
html[data-theme="carbon_dark"] .notification-queue-row,
html[data-theme="carbon_dark"] .notification-queue-empty,
html[data-theme="carbon_dark"] .delivery-order-detail .do-detail-section { background: var(--panel); }
html[data-theme="carbon_dark"] .notification-queue-count,
html[data-theme="carbon_dark"] .delivery-order-type { background: rgba(255, 255, 255, .045); }

@media (max-width: 1120px) {
  .notification-filter { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .notification-filter-apply { grid-column: span 1; }
  .notification-queue-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .notification-queue-actions { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .center-modal.notification-queue-modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  .notification-queue-modal .center-modal-head { padding: 16px 17px 14px; }
  .notification-queue-modal .center-modal-body { padding: 14px 17px 20px; }
  .notification-queue-intro { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .notification-queue-count { grid-column: 2; min-width: 0; padding: 9px 0 0; border-top: 1px solid rgba(46, 158, 82, .18); border-left: 0; text-align: left; }
  .notification-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-filter-apply { grid-column: 1 / -1; }
  .notification-queue-row { grid-template-columns: 1fr; gap: 11px; padding: 14px; }
  .notification-queue-actions { grid-column: auto; padding-top: 11px; }
  .notification-queue-action-buttons button { flex: 1 1 calc(50% - 7px); }
  #detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer { width: 100vw !important; max-width: 100vw !important; }
  #detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer .drawer-head { padding: 16px 17px 14px; }
  #detailDrawerOverlay.delivery-order-detail-overlay #detailDrawer .drawer-body { padding: 14px 17px 22px; }
  .delivery-order-detail-intro { align-items: start; flex-direction: column; padding: 14px; }
  .delivery-order-type { max-width: none; }
  .delivery-order-detail .do-detail-metrics { grid-template-columns: 1fr; }
  .do-detail-section-heading { flex-direction: column; }
}

/* Online inquiry UI redesign — clearer register hierarchy and a compact,
   task-focused editor. Interaction, fields and permission rules stay intact. */
#view-leads .online-inquiry-hero {
  padding: 22px 24px;
  align-items: stretch;
  background: rgba(46, 158, 82, .075);
  border-color: rgba(46, 158, 82, .2);
}
#view-leads .online-inquiry-hero-copy { min-width: 0; flex: 1; display: grid; align-content: center; gap: 0; }
#view-leads .online-inquiry-hero-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
#view-leads .online-inquiry-access,
#view-leads .online-inquiry-hero-meta span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
#view-leads .online-inquiry-access { padding: 5px 9px; border: 1px solid rgba(46, 158, 82, .2); border-radius: 999px; background: rgba(255,255,255,.48); color: var(--green); }
#view-leads .online-inquiry-access .material-symbols-rounded,
#view-leads .online-inquiry-hero-meta .material-symbols-rounded { font-size: 15px; }
#view-leads .online-inquiry-hero h2 { margin-top: 7px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.025em; }
#view-leads .online-inquiry-hero p { max-width: 620px; margin-top: 5px; line-height: 1.55; }
#view-leads .online-inquiry-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
#view-leads .online-inquiry-hero-action { min-width: 236px; display: grid; align-content: center; gap: 7px; padding: 14px 16px; border: 1px solid rgba(46, 158, 82, .18); border-radius: 14px; background: rgba(255,255,255,.62); }
#view-leads .online-inquiry-hero-action-label { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
#view-leads .online-inquiry-hero-action strong { color: var(--ink); font-size: 13px; }
#view-leads .online-inquiry-hero-action button { width: 100%; margin-top: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#view-leads .online-inquiry-hero-action button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #176b46 0%, #22a568 54%, #76d59c 100%);
  color: #fff;
  box-shadow: 0 9px 18px rgba(23, 107, 70, .22);
}
#view-leads .online-inquiry-hero-action button.primary:hover {
  background: linear-gradient(135deg, #125b3b 0%, #1d945d 54%, #63c98c 100%);
  box-shadow: 0 11px 22px rgba(23, 107, 70, .28);
  transform: translateY(-1px);
}
#view-leads .online-inquiry-hero-action button.primary:focus-visible {
  outline: 3px solid rgba(34, 165, 104, .28);
  outline-offset: 2px;
}
#view-leads .online-inquiry-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
#view-leads .online-inquiry-pagination > div { display: inline-flex; align-items: center; gap: 9px; }
#view-leads .online-inquiry-pagination strong { color: var(--ink); white-space: nowrap; }
#view-leads .online-inquiry-pagination button:disabled { cursor: not-allowed; opacity: .45; }

#detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer {
  width: min(760px, 100vw) !important;
  max-width: 760px !important;
  background: var(--panel) !important;
}
#detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-head {
  padding: 20px 24px 17px;
  background: var(--panel) !important;
}
#detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-body {
  display: block;
  padding: 18px 24px 0;
  background: var(--panel) !important;
}
#detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-head h2 { font-size: 22px; letter-spacing: -.02em; }
#detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer #drawerClose { min-width: 72px; }
.online-inquiry-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 100%; }
.online-inquiry-form-intro,
.online-inquiry-form-section,
.online-inquiry-form-actions { grid-column: 1; }
.online-inquiry-form-intro { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid rgba(46, 158, 82, .2); border-radius: 14px; background: rgba(46, 158, 82, .065); }
.online-inquiry-form-intro > div { display: flex; align-items: flex-start; gap: 10px; }
.online-inquiry-form-intro > div > .material-symbols-rounded { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(46, 158, 82, .14); color: var(--green); }
.online-inquiry-form-intro strong { display: block; color: var(--ink); font-size: 13px; }
.online-inquiry-form-intro p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.online-inquiry-form-intro > small { display: inline-flex; align-items: center; gap: 5px; padding-top: 9px; border-top: 1px solid rgba(46, 158, 82, .14); color: var(--muted); font-size: 11px; }
.online-inquiry-form-intro > small .material-symbols-rounded { font-size: 15px; color: var(--green); }
.online-inquiry-form-section { display: grid; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.online-inquiry-form-section > header { display: flex; align-items: flex-start; gap: 10px; }
.online-inquiry-form-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(46, 158, 82, .1); color: var(--green); font-size: 18px; }
.online-inquiry-form-section h3 { margin: 1px 0 3px; color: var(--ink); font-size: 14px; }
.online-inquiry-form-section header p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.online-inquiry-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.online-inquiry-form label { gap: 7px; color: var(--ink); letter-spacing: .035em; }
.online-inquiry-form label > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.online-inquiry-form label > span:first-child em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .02em; text-transform: none; }
.online-inquiry-form input,
.online-inquiry-form textarea,
.online-inquiry-form select { min-height: 43px; border-radius: 10px; background: var(--panel); border-color: var(--line); transition: border-color .16s ease, box-shadow .16s ease; }
.online-inquiry-form textarea { min-height: 106px; line-height: 1.5; }
.online-inquiry-form input::placeholder,
.online-inquiry-form textarea::placeholder { color: var(--muted); opacity: .78; }
.online-inquiry-form input:focus,
.online-inquiry-form textarea:focus,
.online-inquiry-form select:focus { outline: 0; border-color: rgba(46, 158, 82, .72); box-shadow: 0 0 0 3px rgba(46, 158, 82, .12); }
.online-inquiry-form-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 -24px; padding: 14px 24px 20px; border-top: 1px solid var(--line); background: var(--panel); }
.online-inquiry-form-actions > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.online-inquiry-form-actions > span .material-symbols-rounded { font-size: 15px; color: var(--green); }
.online-inquiry-form-actions > div { display: flex; justify-content: flex-end; gap: 9px; }
.online-inquiry-form-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; }

html[data-theme="carbon_dark"] #view-leads .online-inquiry-access,
html[data-theme="carbon_dark"] #view-leads .online-inquiry-hero-action { background: rgba(255,255,255,.045); }
html[data-theme="carbon_dark"] #detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-body,
html[data-theme="carbon_dark"] #detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-head { background: var(--panel) !important; }

@media (max-width: 720px) {
  #view-leads .online-inquiry-hero { padding: 18px; }
  #view-leads .online-inquiry-hero-action { width: 100%; min-width: 0; }
  #view-leads .online-inquiry-pagination { align-items: flex-start; flex-direction: column; }
  #view-leads .online-inquiry-pagination > div { width: 100%; justify-content: space-between; }
  #detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer { width: 100vw !important; max-width: 100vw !important; }
  #detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-head { padding: 16px !important; }
  #detailDrawerOverlay.online-inquiry-drawer-overlay #detailDrawer .drawer-body { padding: 14px 16px 0 !important; }
  .online-inquiry-form-grid { grid-template-columns: 1fr; }
  #detailDrawerOverlay.online-inquiry-drawer-overlay #drawerBody .online-inquiry-form-actions { position: static !important; align-items: stretch; flex-direction: column; margin: 0 -16px; padding: 12px 16px 16px; }
  .online-inquiry-form-actions > div { width: 100%; }
  .online-inquiry-form-actions button { flex: 1; }
}

/* Follow-up polish from annotated review: compact DO metrics, readable
   waterfall labels, and a year control that belongs to its chart. */
.delivery-order-detail .do-detail-metrics .metric-card {
  min-height: 70px;
  padding: 11px 12px;
  border-radius: 12px;
}
.delivery-order-detail .do-detail-metrics .metric-card > strong {
  margin-top: 5px;
  font-size: clamp(15px, 1.25vw, 19px) !important;
  line-height: 1.15;
}
.delivery-order-detail .do-detail-metrics .do-detail-customer > strong {
  font-size: clamp(16px, 1.45vw, 21px) !important;
}
.delivery-order-detail .do-detail-metrics .do-detail-evidence > strong {
  font-size: clamp(14px, 1.15vw, 17px) !important;
}
.delivery-order-detail .do-detail-linkage .metric-card > strong,
.delivery-order-detail .do-detail-section .metric-card > strong {
  font-size: 13px !important;
  line-height: 1.2;
}
.wp-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wp-chart-heading > div { min-width: 0; }
.wp-chart-heading h3 { margin-top: 0 !important; }
.wp-chart-year-filter { display: grid; flex: 0 0 auto; gap: 4px; min-width: 92px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wp-chart-year-filter select { min-height: 31px; padding: 5px 25px 5px 9px; border-radius: 8px; color: var(--ink); font-size: 11px; font-weight: 700; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-baseline { stroke: #7b9284 !important; stroke-width: 1.4; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-connector { stroke: #8ba094 !important; stroke-width: 1.2; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-label { fill: #3c5f4b !important; font-size: 12px; font-weight: 850; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-value { fill: #355847 !important; font-size: 11px; font-weight: 800; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-outcome-label { fill: #237f45 !important; font-size: 11px; font-weight: 900; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-outcome-label.impact-increase { fill: #a33f35 !important; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-outcome-value { fill: #174b2c !important; font-size: 18px; font-weight: 900; }
html[data-theme="forest_canopy"] #view-customer .wp-story .wp-wf-outcome-value.impact-increase { fill: #8f3029 !important; }
@media (max-width: 620px) {
  .wp-chart-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .wp-chart-year-filter { min-width: 82px; }
}

/* The legacy drawer baseline uses #drawerBody selectors with !important.
   Keep the DO-specific compact hierarchy authoritative in both themes. */
#drawerBody .delivery-order-detail .do-detail-metrics .metric-card {
  min-height: 70px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
}
#drawerBody .delivery-order-detail .do-detail-metrics .metric-card > span {
  margin-bottom: 0 !important;
  font-size: 9px !important;
}
#drawerBody .delivery-order-detail .do-detail-metrics .metric-card > strong {
  margin-top: 5px;
  font-size: clamp(15px, 1.25vw, 19px) !important;
  line-height: 1.15;
}
#drawerBody .delivery-order-detail .do-detail-metrics .do-detail-customer > strong {
  font-size: clamp(16px, 1.45vw, 21px) !important;
}
#drawerBody .delivery-order-detail .do-detail-metrics .do-detail-evidence > strong {
  font-size: clamp(14px, 1.15vw, 17px) !important;
}
#drawerBody .delivery-order-detail .do-detail-linkage .metric-card > strong,
#drawerBody .delivery-order-detail .do-detail-section .metric-card > strong {
  font-size: 13px !important;
  line-height: 1.2;
}

/* Annotated review pass — keep the Overview useful at a glance and make the
   delivery-order PDF action visible without competing with the record title. */
html[data-theme="forest_canopy"] #view-customer .ch-hero {
  grid-template-columns: minmax(0, 1.38fr) minmax(220px, .62fr);
  gap: 16px;
  padding: 24px 26px 0 !important;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(22, 83, 45, .08);
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-main { padding-bottom: 20px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-title {
  max-width: 18ch;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-sub { max-width: 58ch; margin-bottom: 15px; font-size: 12px; line-height: 1.45; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-chips { gap: 7px; }
html[data-theme="forest_canopy"] #view-customer .ch-chip { padding: 7px 11px; font-size: 11px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-side { gap: 12px; padding: 0 0 20px; }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card { width: auto; padding: 13px 14px; border-radius: 13px; box-shadow: 0 6px 16px rgba(22, 83, 45, .05); }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card strong { font-size: 15px; }
html[data-theme="forest_canopy"] #view-customer .ch-orbit { width: 118px; height: 118px; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip {
  margin: 0 -26px;
  border-top-color: var(--line);
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article {
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  background: rgba(246, 251, 246, .86);
  border-right-color: var(--line);
}
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip span { font-size: 9px; letter-spacing: .07em; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip strong { font-size: 16px; line-height: 1.2; }
html[data-theme="forest_canopy"] #view-customer .ch-hero-strip small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.25; }
html[data-theme="forest_canopy"] #view-customer .ch-rank-overview-badge { min-height: 21px; }

html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .76fr);
  gap: 16px;
  min-height: 170px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(120deg, #f0f8f0 0%, #f5f9f3 58%, #e7f2e7 100%);
  box-shadow: 0 12px 26px rgba(22, 83, 45, .07);
}
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact::before { opacity: .2; background-position: right center; }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact::after { background: linear-gradient(90deg, rgba(245, 249, 243, .95) 0%, rgba(245, 249, 243, .82) 62%, rgba(245, 249, 243, .68) 100%); }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-panel-copy { column-gap: 18px; }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-panel-copy h2 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.025em; }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-panel-copy p { font-size: 11px; line-height: 1.4; }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-mini-metrics { gap: 7px; }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-mini-metrics span { min-width: 0; flex: 1 1 86px; padding: 9px 10px; background: rgba(255, 255, 255, .78); }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-mini-metrics strong { font-size: 13px; }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-panel-action { padding: 13px 14px; border-color: rgba(31, 143, 77, .2); background: rgba(255, 255, 255, .9); box-shadow: 0 8px 18px rgba(22, 83, 45, .06); }
html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact .impact-share-open-btn { min-height: 40px; margin-top: 6px; background: #237b45; box-shadow: 0 6px 14px rgba(35, 123, 69, .18); }

.delivery-order-intro-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.delivery-order-intro-actions .delivery-order-type { max-width: 220px; }
#drawerBody .delivery-order-intro-actions .do-detail-pdf-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 10px; color: var(--green); border-color: rgba(46, 158, 82, .28); background: rgba(255, 255, 255, .82); font-size: 10px; font-weight: 800; white-space: nowrap; }
#drawerBody .delivery-order-intro-actions .do-detail-pdf-button:hover { border-color: var(--green); background: rgba(46, 158, 82, .1); }
#drawerBody .delivery-order-intro-actions .do-detail-pdf-button .material-symbols-rounded { font-size: 16px; }

@media (max-width: 860px) {
  html[data-theme="forest_canopy"] #view-customer .ch-hero { grid-template-columns: 1fr; padding: 20px 20px 0 !important; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-side { flex-direction: row; align-items: center; justify-content: space-between; }
  html[data-theme="forest_canopy"] #view-customer .ch-stage-card { flex: 1; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-strip { margin: 0 -20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-strip article:nth-child(2n) { border-right: none; }
  html[data-theme="forest_canopy"] #view-customer .impact-share-panel-compact { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  html[data-theme="forest_canopy"] #view-customer .ch-hero-side { align-items: stretch; flex-direction: column; }
  html[data-theme="forest_canopy"] #view-customer .ch-orbit { align-self: center; }
  .delivery-order-intro-actions { width: 100%; justify-content: flex-start; }
  .delivery-order-intro-actions .delivery-order-type { max-width: none; }
}

/* Master portal visual system — keep the existing forest canopy palette, but
   give each control surface a clear job and reduce the feeling of nested boxes. */
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer {
  color: var(--ink);
  background: linear-gradient(180deg, #f4faf5 0%, #edf6ef 100%);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-shell.portal-shell {
  gap: 16px;
  padding: 0 16px 28px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .portal-primary-header {
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(38, 104, 65, .16);
  box-shadow: 0 4px 12px rgba(29, 79, 48, .05);
  background: rgba(255, 255, 255, .88);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .recovery-process-brand {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.03em;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .recovery-process-brand:hover { color: var(--green); }

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(48, 139, 77, .2);
  border-radius: 20px;
  background: linear-gradient(120deg, #eaf7eb 0%, #f9fcf8 58%, #e7f2ec 100%);
  box-shadow: 0 14px 30px rgba(22, 83, 45, .07);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-left { min-width: 0; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-left h2 { max-width: 15ch; margin: 5px 0 8px; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.05; letter-spacing: -.045em; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-left p { max-width: 62ch; margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-left small { display: block; color: var(--muted); font-size: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpi {
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid rgba(47, 125, 75, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .86);
  box-shadow: none;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpi span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpi strong { display: block; margin-top: 8px; color: var(--ink); font-size: 22px; line-height: 1.05; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpi.teal strong { color: var(--green); }

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-info-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-info-strip article {
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid rgba(48, 112, 70, .14);
  border-left: 3px solid rgba(47, 151, 82, .65);
  border-radius: 13px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 6px 16px rgba(22, 83, 45, .045);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-info-strip strong { font-size: 10px; color: var(--ink); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-info-strip span { font-size: 10px; line-height: 1.35; color: var(--muted); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-kpis { gap: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-kpi { min-height: 92px; padding: 14px 16px; border: 1px solid rgba(47, 125, 75, .14); border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 7px 18px rgba(22, 83, 45, .045); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-kpi strong { font-size: 24px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-grid { gap: 14px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-card {
  border: 1px solid rgba(47, 125, 75, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px rgba(22, 83, 45, .05);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-card-h { gap: 14px; margin-bottom: 12px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-card-h h3 { letter-spacing: -.02em; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-action-item { border-color: rgba(47, 125, 75, .13); background: #fbfefb; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-action-item:hover { border-color: rgba(47, 151, 82, .38); box-shadow: 0 6px 14px rgba(22, 83, 45, .06); transform: translateY(-1px); }

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-card { min-height: 96px; padding: 14px; border: 1px solid rgba(47, 125, 75, .14); border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(22, 83, 45, .04); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-card:nth-child(1) { border-top: 3px solid #2f9b55; background: #f1fbf3; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-card:nth-child(2) { border-top: 3px solid #d4a83a; background: #fffaf0; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-card:nth-child(3) { border-top: 3px solid #54a7a0; background: #f2fbfa; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-card:nth-child(4) { border-top: 3px solid #b69045; background: #fffaf2; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table { overflow-x: auto; border: 1px solid rgba(47, 125, 75, .13); border-radius: 13px; background: #fff; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table table { min-width: 1080px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table th { padding: 10px 9px; background: #edf6ef; color: #416653; font-size: 9px; letter-spacing: .06em; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table td { padding: 10px 9px; font-size: 10px; line-height: 1.3; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-table tr:hover td { background: #fbfefb; }

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-workspace-page { gap: 16px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment,
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-portal-segment {
  padding: 18px;
  border: 1px solid rgba(47, 125, 75, .17);
  border-radius: 18px;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 8px 22px rgba(22, 83, 45, .045);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading { grid-template-columns: minmax(170px, .28fr) minmax(0, 1fr); align-items: end; gap: 12px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading > span { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading h2 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: -.03em; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-selector { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); align-items: center; padding: 15px 16px; background: #fff; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-selector .mp-card-h { margin: 0; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-selector select { width: 100%; min-height: 40px; font-weight: 700; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-portal-segment { background: linear-gradient(135deg, rgba(247, 252, 248, .96), rgba(234, 246, 237, .78)); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .branch-portal-heading { grid-template-columns: minmax(170px, .28fr) minmax(0, 1fr) auto; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .branch-portal-heading em { justify-self: end; align-self: center; padding: 7px 10px; border: 1px solid rgba(47, 151, 82, .2); border-radius: 999px; background: #effaf1; color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-embedded-branch { margin-top: 2px; }

/* Reports: one decision (scope), one configuration block, one generate action. */
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-reports-page { gap: 14px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench {
  padding: 20px;
  border: 1px solid rgba(47, 125, 75, .2);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 83, 45, .055);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(47, 125, 75, .13); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head h2 { margin: 5px 0 5px; color: var(--ink); font-size: 22px; letter-spacing: -.035em; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head p { max-width: 70ch; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-step-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(47, 151, 82, .2); border-radius: 999px; background: #f0faf2; color: var(--green); font-size: 9px; font-weight: 800; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-step-badge .material-symbols-rounded { font-size: 14px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 15px 0; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; border: 1px solid rgba(47, 125, 75, .16); border-radius: 13px; background: #f8fcf8; color: var(--ink); text-align: left; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button > .material-symbols-rounded:first-child { color: var(--green); font-size: 20px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button strong { display: block; font-size: 12px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.25; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button.is-selected { border-color: rgba(35, 131, 75, .58); background: #edf9ef; box-shadow: 0 0 0 2px rgba(35, 131, 75, .08); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-check { color: var(--green); font-size: 18px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .38fr); gap: 12px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-card { padding: 15px; border: 1px solid rgba(47, 125, 75, .13); border-radius: 14px; background: #fbfefb; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field-number { display: inline-grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-heading strong { display: block; color: var(--ink); font-size: 12px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field { display: grid; gap: 5px; min-width: 0; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field select,
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field input { width: 100%; min-height: 38px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-period-filter { display: grid; grid-template-columns: minmax(170px, 1.25fr) repeat(2, minmax(120px, .75fr)); gap: 9px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note { display: flex; align-items: center; gap: 9px; min-height: 48px; margin-bottom: 12px; padding: 9px 10px; border: 1px solid rgba(47, 151, 82, .15); border-radius: 10px; background: #f1faf3; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note > .material-symbols-rounded { color: var(--green); font-size: 19px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note strong,
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note small { display: block; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note strong { font-size: 11px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note small { margin-top: 2px; color: var(--muted); font-size: 9px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid rgba(35, 131, 75, .18); border-radius: 14px; background: linear-gradient(145deg, #eaf8ed, #f5fbf5); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card > strong { margin-top: 11px; color: var(--ink); font-size: 16px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card > p { min-height: 48px; margin: 6px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.4; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-generate-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 42px; border-radius: 10px; background: #21834b; box-shadow: 0 7px 15px rgba(33, 131, 75, .16); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-generate-button .material-symbols-rounded { font-size: 17px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card [role="status"] { min-height: 18px; margin-top: 9px; font-size: 10px; line-height: 1.35; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-boundary-note { display: flex; align-items: flex-start; gap: 6px; margin: 13px 0 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-boundary-note .material-symbols-rounded { color: #ae7c22; font-size: 15px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-history-card { padding: 18px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-history-count { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #eef7f0; color: var(--green); font-size: 10px; font-weight: 800; }

/* Report builder: make the scope-to-PDF workflow readable at a glance. */
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench { padding: 22px; border-color: rgba(47, 125, 75, .22); background: linear-gradient(135deg, #fff 0%, #fbfefb 100%); box-shadow: 0 12px 30px rgba(22, 83, 45, .075); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head { padding-bottom: 17px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head h2 { margin-bottom: 6px; font-size: 24px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head p { color: #56705d; font-size: 12px; line-height: 1.5; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-step-badge { gap: 6px; padding: 8px 11px; border-color: rgba(47, 151, 82, .24); background: #edf8ef; font-size: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-choice-heading { display: flex; align-items: center; gap: 10px; margin-top: 17px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-choice-heading strong { display: block; color: var(--ink); font-size: 13px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-choice-heading small { display: block; margin-top: 2px; color: #5f7665; font-size: 11px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-tabs { gap: 12px; margin: 11px 0 16px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button { gap: 11px; min-height: 76px; padding: 14px 15px; border-color: rgba(47, 125, 75, .2); border-radius: 14px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button:hover { border-color: rgba(35, 131, 75, .46); box-shadow: 0 6px 16px rgba(22, 83, 45, .07); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button > .material-symbols-rounded:first-child { font-size: 22px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button strong { font-size: 13px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button small { margin-top: 4px; color: #5f7665; font-size: 11px; line-height: 1.35; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-button.is-selected { border-color: rgba(35, 131, 75, .68); background: #edf9ef; box-shadow: inset 3px 0 0 #21834b, 0 0 0 2px rgba(35, 131, 75, .08); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-config-grid { grid-template-columns: minmax(0, 1fr) minmax(282px, .42fr); gap: 14px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-card { padding: 17px; border-color: rgba(47, 125, 75, .17); background: #fafffb; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field-number { width: 27px; height: 27px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-heading strong { font-size: 13px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-scope-heading small { color: #5f7665; font-size: 11px; line-height: 1.4; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field > span { color: #52705b; font-size: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field select,
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-field input { min-height: 42px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-period-filter { grid-template-columns: minmax(190px, 1.25fr) repeat(2, minmax(130px, .75fr)); gap: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note { min-height: 52px; margin-bottom: 14px; padding: 10px 11px; border-color: rgba(47, 151, 82, .18); background: #eff9f1; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note strong { font-size: 12px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-group-note small { color: #5f7665; font-size: 10px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card { padding: 17px; border-color: rgba(35, 131, 75, .26); background: linear-gradient(145deg, #e6f6e9, #f8fcf8); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card > strong { margin-top: 12px; font-size: 17px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card > p { min-height: 50px; margin: 7px 0 11px; color: #4f6956; font-size: 11px; line-height: 1.45; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-output-note { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 13px; color: #307349; font-size: 10px; font-weight: 800; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-output-note .material-symbols-rounded { font-size: 14px; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-generate-button { min-height: 44px; box-shadow: 0 8px 18px rgba(33, 131, 75, .18); }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-action-card [role="status"] { margin-top: 10px; font-size: 11px; line-height: 1.4; }
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-boundary-note { gap: 7px; margin-top: 15px; color: #667b6b; font-size: 10px; line-height: 1.4; }

/* Overview hero: the stage is a right-side status rail on desktop. */
html[data-theme="forest_canopy"] #view-customer .ch-hero { grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); }
html[data-theme="forest_canopy"] #view-customer .ch-hero-side { justify-self: end; align-items: flex-end; width: min(100%, 224px); }
html[data-theme="forest_canopy"] #view-customer .ch-stage-card { width: 100%; }
html[data-theme="forest_canopy"] #view-customer .ch-orbit { align-self: flex-end; }

@media (max-width: 1100px) {
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero { grid-template-columns: 1fr; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpis { max-width: 620px; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-config-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  html[data-theme="forest_canopy"] #view-customer .ch-hero { grid-template-columns: 1fr; }
  html[data-theme="forest_canopy"] #view-customer .ch-hero-side { justify-self: stretch; align-items: center; width: auto; }
  html[data-theme="forest_canopy"] #view-customer .ch-orbit { align-self: center; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-segment-heading,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .branch-portal-heading { grid-template-columns: 1fr; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-branch-selector { grid-template-columns: 1fr; gap: 10px; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .branch-portal-heading em { justify-self: start; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench-head { flex-direction: column; }
}
@media (max-width: 620px) {
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-shell.portal-shell { padding: 0 8px 22px; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-workbench { padding: 15px; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-hero-kpis,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-league-grid,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-mode-tabs { grid-template-columns: 1fr; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-period-filter { grid-template-columns: 1fr; }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .mp-info-strip { grid-template-columns: 1fr; }
}

/* Final master-portal polish: compact controls, readable registers and
   restrained action colors for an operations-first workspace. */
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .recovery-process-header {
  grid-template-columns: max-content minmax(0, 1fr) auto;
  padding-inline: 20px;
  overflow: visible;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .recovery-process-brand {
  flex: 0 0 auto;
  min-width: max-content;
  padding-inline: 4px;
  overflow: visible;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .recovery-process-brand strong {
  display: block;
  min-width: max-content;
  white-space: nowrap;
}

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment {
  gap: 7px;
  padding: 10px 14px;
  border-radius: 14px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-segment-heading {
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-segment-heading h2 {
  font-size: 15px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-segment-heading p {
  margin-top: 2px;
  font-size: 10px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .mp-info-strip article {
  min-height: 52px;
  padding: 7px 10px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-branch-selector {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 12px;
  padding: 7px 11px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-branch-selector select {
  min-height: 34px;
}

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-content .mp-table th {
  padding: 10px 10px;
  font-size: 10px;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-content .mp-table td {
  padding: 10px 10px;
  font-size: 11px;
  line-height: 1.35;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-content .mp-table td small {
  font-size: 10px;
}

html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-generate-button {
  border: 1px solid #0e5738 !important;
  background: #166b47 !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(15, 92, 60, .16) !important;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-generate-button:hover {
  background: #0e5a3c !important;
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-history-card .mp-table td:last-child .compact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #2b7a52;
  border-radius: 8px;
  background: #f3faf5;
  color: #155d3d;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(43, 122, 82, .08);
}
html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-report-history-card .mp-table td:last-child .compact-btn:hover {
  background: #e2f3e7;
  border-color: #166b47;
}

@media (max-width: 820px) {
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-segment-heading,
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-branch-selector {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) {
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    align-items: center;
  }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-segment-heading {
    grid-column: 1;
    grid-row: 1;
  }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .mp-info-strip {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html[data-theme="forest_canopy"] body[data-role="customer_master"] #view-customer .master-control-segment .master-branch-selector {
    grid-column: 2;
    grid-row: 1;
  }
}

.center-modal.bi-modal-lg { width: min(1120px, calc(100vw - 28px)) !important; }
.box-batch-table { max-height: min(520px, 55vh); overflow: auto; border: 1px solid #dfe6ee; border-radius: 10px; background: #fff; }
.bi-batch-grid { display: grid; gap: 0; }
.bi-batch-row { padding: 12px 14px; border-bottom: 1px solid #e7edf3; background: #fff; }
.bi-batch-row:last-child { border-bottom: 0; }
.bi-batch-row-main { display: grid; grid-template-columns: 32px minmax(145px, 1.3fr) minmax(145px, 1.2fr) 82px minmax(120px, 1fr) minmax(110px, 1fr) auto; gap: 9px; align-items: end; }
.bi-batch-row-secondary { display: grid; grid-template-columns: minmax(210px, 1.35fr) minmax(170px, 1fr) minmax(190px, 1.15fr); gap: 9px; margin: 8px 0 0 41px; }
.bi-batch-row-main label, .bi-batch-row-secondary label { display: grid; gap: 4px; min-width: 0; color: #6b778a; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.bi-batch-row-main input, .bi-batch-row-main select, .bi-batch-row-secondary input { width: 100%; min-height: 34px; box-sizing: border-box; padding: 0 8px; border: 1px solid #d7dee8; border-radius: 7px; background: #fff; color: #101828; font-size: 11px; }
.bi-batch-row-main input:focus, .bi-batch-row-main select:focus, .bi-batch-row-secondary input:focus { border-color: #235e9e; outline: 2px solid #eaf1f9; outline-offset: 1px; }
.bi-row-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 2px; border-radius: 8px; background: #eaf1f9; color: #235e9e; font-size: 10px; font-weight: 800; }
.bi-batch-remove { min-height: 34px; padding: 0 8px; align-self: end; font-size: 10px; }
.bi-batch-fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bi-batch-fields-grid label { display: grid; gap: 5px; color: #6b778a; font-size: 10px; font-weight: 800; }
.bi-batch-fields-grid input, .bi-batch-fields-grid select { width: 100%; min-height: 36px; box-sizing: border-box; padding: 0 9px; border: 1px solid #d7dee8; border-radius: 7px; background: #fff; color: #101828; font-size: 12px; }
.bi-batch-fields-grid input:focus, .bi-batch-fields-grid select:focus { border-color: #235e9e; outline: 2px solid #eaf1f9; outline-offset: 1px; }
.bi-batch-notes { grid-column: span 1; }
.bi-batch-footer { gap: 14px; }
.bi-batch-footer > p { min-width: 160px; }
.bi-batch-footer .bi-modal-footer-actions { flex: 1; align-items: center; justify-content: space-between; }
.bi-batch-footer-tools, .bi-batch-footer-primary { display: inline-flex; align-items: center; gap: 8px; }
.bi-batch-footer-tools > span { color: #7a8698; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.center-modal.bi-modal-lg .bi-batch-footer-primary .btn-primary { border: 1px solid #143965; background: #1d4f87; color: #fff; box-shadow: 0 3px 8px rgba(35, 94, 158, .22); }
.center-modal.bi-modal-lg .bi-batch-footer-primary .btn-primary:hover, .center-modal.bi-modal-lg .bi-batch-footer-primary .btn-primary:focus-visible { background: #163f70; }

@media (max-width: 900px) {
  .bi-batch-row-main { grid-template-columns: 32px repeat(2, minmax(0, 1fr)); }
  .bi-batch-row-main label:nth-of-type(1), .bi-batch-row-main label:nth-of-type(3), .bi-batch-row-main label:nth-of-type(5) { grid-column: 2; }
  .bi-batch-row-main label:nth-of-type(2), .bi-batch-row-main label:nth-of-type(4), .bi-batch-remove { grid-column: 3; }
  .bi-batch-remove { justify-self: start; }
  .bi-batch-row-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-batch-row-secondary label:last-child { grid-column: 1 / -1; }
  .bi-batch-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-batch-notes { grid-column: span 2; }
  .bi-batch-footer > p { min-width: 0; }
}
@media (max-width: 640px) {
  .bi-batch-row { padding: 11px; }
  .bi-batch-row-main { grid-template-columns: 32px 1fr; }
  .bi-batch-row-main label, .bi-batch-row-main label:nth-of-type(n + 3) { grid-column: 2; }
  .bi-batch-remove { grid-column: 2; width: fit-content; }
  .bi-batch-row-secondary { grid-template-columns: 1fr; margin-left: 41px; }
  .bi-batch-row-secondary label:last-child { grid-column: auto; }
  .bi-batch-fields-grid { grid-template-columns: 1fr; }
  .bi-batch-notes { grid-column: span 1; }
  .bi-batch-footer, .bi-batch-footer .bi-modal-footer-actions { align-items: stretch; flex-direction: column; }
  .bi-batch-footer-tools, .bi-batch-footer-primary { justify-content: stretch; }
  .bi-batch-footer-tools button, .bi-batch-footer-primary button { flex: 1; }
}

/* Compact data summary for Marketing Follow-up. */
.marketing-handoff-analytics { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 14px; }
.marketing-handoff-chart { padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 7px 18px rgba(31, 73, 47, .045); }
.marketing-handoff-chart > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.marketing-handoff-chart h3 { margin: 3px 0 0; color: var(--ink); font-size: 15px; }
.marketing-handoff-chart > header > strong { display: grid; min-width: 31px; height: 31px; place-items: center; border-radius: 10px; background: rgba(38, 157, 85, .12); color: var(--green); font-size: 15px; }
.marketing-chart-rows { display: grid; gap: 9px; }
.marketing-chart-row { display: grid; grid-template-columns: 130px minmax(32px, 1fr) 22px; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.marketing-chart-row i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(37, 131, 72, .1); }
.marketing-chart-row i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #279352, #56c47a); }
.marketing-chart-row strong { color: var(--ink); font-size: 11px; text-align: right; }
.marketing-workload-note { padding: 5px 8px; border-radius: 999px; background: rgba(38, 157, 85, .1); color: var(--green); font-size: 10px; font-weight: 800; }
.marketing-priority-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.marketing-priority-summary { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(247, 251, 248, .78); }
.marketing-priority-summary > strong { color: var(--ink); font-size: 19px; }
.marketing-due-strip { display: flex; justify-content: space-between; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.marketing-due-strip b { color: var(--ink); font-size: 14px; }
.marketing-setup-modal { width: min(480px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 32px)); }
.marketing-setup-modal .center-modal-body { padding: 26px; }
.marketing-setup-required { display: grid; justify-items: center; gap: 13px; padding: 4px 0; text-align: center; }
.marketing-setup-required > .material-symbols-rounded { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(39, 147, 82, .12); color: var(--green); font-size: 24px; }
.marketing-setup-required strong { color: var(--ink); font-size: 17px; }
.marketing-setup-required p { max-width: 500px; margin: 5px 0 0; color: var(--muted); line-height: 1.55; }
.marketing-setup-required-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 5px; }
.marketing-setup-required-actions button { width: auto; min-height: 42px; }
html[data-theme="carbon_dark"] .marketing-handoff-dashboard, html[data-theme="carbon_dark"] .marketing-handoff-kpis article, html[data-theme="carbon_dark"] .marketing-handoff-chart, html[data-theme="carbon_dark"] .marketing-priority-summary { background: var(--panel); }
@media (max-width: 1050px) { .marketing-handoff-analytics { grid-template-columns: 1fr; } .marketing-handoff-kpis article:nth-child(2) { border-right: 0; } .marketing-handoff-kpis article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 700px) { .marketing-handoff-kpis article, .marketing-handoff-kpis article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); } .marketing-handoff-kpis article:last-child { border-bottom: 0; } .marketing-chart-row { grid-template-columns: 110px minmax(28px, 1fr) 22px; } .marketing-setup-modal { width: calc(100vw - 20px); } .marketing-setup-modal .center-modal-body { padding: 20px; } .marketing-setup-required-actions { width: 100%; flex-direction: column-reverse; } .marketing-setup-required-actions button { width: 100%; } }

/* Marketing handoff: a restricted queue, intentionally separate from raw online inquiries. */
#view-marketing .marketing-handoff-page { display: grid; gap: 14px; }
.marketing-handoff-dashboard { overflow: hidden; border: 1px solid rgba(35, 140, 77, .22); border-radius: 15px; background: var(--panel); box-shadow: 0 8px 22px rgba(26, 70, 42, .06); }
.marketing-handoff-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 22px; background: linear-gradient(120deg, rgba(217, 247, 226, .88), rgba(248, 252, 249, .94)); }
.marketing-handoff-hero h2 { margin: 4px 0 5px; color: var(--ink); font-size: clamp(22px, 2.4vw, 29px); }
.marketing-handoff-hero p { max-width: 660px; margin: 0; color: var(--muted); }
.marketing-handoff-hero-actions { display: grid; justify-items: end; gap: 10px; white-space: nowrap; }
.marketing-handoff-hero-actions > span { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.marketing-handoff-hero-actions .material-symbols-rounded { font-size: 16px; }
.marketing-handoff-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.marketing-handoff-kpis article { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 12px 17px; border-right: 1px solid var(--line); background: var(--panel); }
.marketing-handoff-kpis article:last-child { border-right: 0; }
.marketing-handoff-kpis article > .material-symbols-rounded { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(38, 157, 85, .12); color: var(--green); }
.marketing-handoff-kpis article.is-attention > .material-symbols-rounded { background: rgba(202, 95, 45, .12); color: #bb5627; }
.marketing-handoff-kpis strong { display: block; color: var(--ink); font-size: 22px; line-height: 1; }
.marketing-handoff-kpis small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.marketing-handoff-register { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: 0 9px 24px rgba(31, 73, 47, .05); }
.marketing-handoff-register > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; }
.marketing-handoff-register h3 { margin: 4px 0; color: var(--ink); font-size: 19px; }
.marketing-handoff-register header p { margin: 0; color: var(--muted); font-size: 12px; }
.marketing-handoff-filters { display: grid; grid-template-columns: minmax(220px, 1.65fr) repeat(4, minmax(130px, 1fr)) auto auto; gap: 9px; padding: 0 22px 16px; }
.marketing-handoff-filters input, .marketing-handoff-filters select { width: 100%; min-height: 39px; border: 1px solid var(--line); border-radius: 9px; background: var(--field, #fff); color: var(--ink); font: inherit; font-size: 12px; }
.marketing-handoff-search { position: relative; }
.marketing-handoff-search .material-symbols-rounded { position: absolute; top: 10px; left: 10px; color: var(--muted); font-size: 18px; }
.marketing-handoff-search input { padding-left: 34px; }
.marketing-handoff-table-wrap { overflow: auto; border-top: 1px solid var(--line); }
.marketing-handoff-table-wrap table { width: 100%; min-width: 900px; border-collapse: collapse; }
.marketing-handoff-table-wrap th { padding: 11px 14px; background: rgba(223, 239, 227, .53); color: var(--muted); font-size: 9px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.marketing-handoff-table-wrap td { padding: 12px 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; vertical-align: middle; }
.marketing-handoff-table-wrap td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.marketing-handoff-status, .marketing-priority { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.marketing-handoff-status.is-active { background: rgba(36, 143, 78, .13); color: #17713a; }
.marketing-handoff-status.is-warning { background: rgba(209, 151, 26, .14); color: #986907; }
.marketing-handoff-status.is-success { background: rgba(22, 137, 86, .17); color: #09643b; }
.marketing-handoff-status.is-muted { background: rgba(102, 116, 108, .12); color: #5b6961; }
.marketing-priority.is-hot { background: rgba(198, 72, 48, .13); color: #ad3e27; }
.marketing-priority.is-warm { background: rgba(207, 147, 21, .14); color: #8a6000; }
.marketing-priority.is-normal { background: rgba(30, 143, 82, .12); color: #176f3c; }
.marketing-handoff-table-wrap .is-overdue { color: #b0442c; font-weight: 800; }
.marketing-handoff-empty { display: grid; justify-items: center; gap: 7px; padding: 42px 18px; color: var(--muted); text-align: center; }
.marketing-handoff-empty .material-symbols-rounded { color: var(--green); font-size: 31px; }
.marketing-handoff-empty strong { color: var(--ink); }
.marketing-handoff-empty p { max-width: 460px; margin: 0; font-size: 12px; }
.marketing-handoff-link { border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit; }
.marketing-handoff-link:hover .marketing-handoff-status { box-shadow: 0 0 0 2px rgba(40, 151, 81, .18); }
.marketing-handoff-form { display: grid; gap: 18px; }
.marketing-handoff-source { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid rgba(41, 149, 83, .18); border-radius: 12px; background: rgba(224, 247, 229, .46); }
.marketing-handoff-source > .material-symbols-rounded { color: var(--green); }
.marketing-handoff-source strong, .marketing-handoff-source p, .marketing-handoff-source small { display: block; }
.marketing-handoff-source p { margin: 4px 0; color: var(--muted); font-size: 12px; }
.marketing-handoff-source small { color: var(--muted); line-height: 1.45; }
.marketing-handoff-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.marketing-handoff-context > div { padding: 12px; border-left: 3px solid rgba(38, 147, 80, .48); border-radius: 0 9px 9px 0; background: rgba(240, 247, 241, .75); }
.marketing-handoff-context span, .marketing-handoff-form label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.marketing-handoff-context strong { color: var(--ink); font-size: 12px; line-height: 1.4; }
.marketing-handoff-form label em { margin-left: 3px; color: #b0442c; font-style: normal; }
.marketing-handoff-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.marketing-handoff-form-grid input, .marketing-handoff-form-grid select, .marketing-handoff-form-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--field, #fff); color: var(--ink); font: inherit; font-size: 13px; }
.marketing-handoff-form-grid input, .marketing-handoff-form-grid select { min-height: 42px; padding: 0 10px; }
.marketing-handoff-form-grid textarea { min-height: 96px; padding: 10px; line-height: 1.45; resize: vertical; }
.marketing-handoff-wide { grid-column: 1 / -1; }
.marketing-handoff-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 15px; border-top: 1px solid var(--line); }
.marketing-handoff-form-actions > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.marketing-handoff-form-actions > span .material-symbols-rounded { color: var(--green); font-size: 15px; }
.marketing-handoff-form-actions > div { display: flex; gap: 8px; }
.marketing-handoff-pass-button,
.marketing-handoff-form-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.marketing-handoff-pass-button { min-height: 38px; padding: 8px 11px 8px 13px; border: 1px solid rgba(37, 146, 78, .28); border-radius: 10px; background: rgba(46, 158, 82, .07); color: var(--green); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.marketing-handoff-pass-button:hover { border-color: rgba(37, 146, 78, .5); background: rgba(46, 158, 82, .13); }
.marketing-handoff-pass-button .material-symbols-rounded,
.marketing-handoff-form-actions button .material-symbols-rounded { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.marketing-conversion-trend { grid-column: 1 / -1; }
.marketing-conversion-trend > header { margin-bottom: 8px; }
.marketing-trend-note { color: var(--muted); font-size: 10px; font-weight: 800; }
.marketing-trend-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.marketing-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.marketing-trend-legend i { width: 9px; height: 9px; border-radius: 999px; }
.marketing-trend-legend .is-converted { background: #248f4e; }
.marketing-trend-legend .is-not-converted { background: #bd7a2c; }
.marketing-conversion-trend svg { display: block; width: 100%; height: 132px; overflow: visible; }
.marketing-conversion-trend svg line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.marketing-trend-line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.marketing-trend-line.is-converted { stroke: #248f4e; }
.marketing-trend-line.is-not-converted { stroke: #bd7a2c; }
.marketing-trend-labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: -3px; color: var(--muted); font-size: 10px; text-align: center; }
.marketing-conversion-trend p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.marketing-handoff-timeline { padding-top: 4px; border-top: 1px solid var(--line); }
.marketing-handoff-timeline h3 { margin: 4px 0 12px; color: var(--ink); font-size: 16px; }
.marketing-handoff-timeline ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.marketing-handoff-timeline li { padding: 10px 12px; border-left: 3px solid rgba(37, 146, 78, .48); border-radius: 0 8px 8px 0; background: rgba(242, 248, 243, .78); }
.marketing-handoff-timeline li strong, .marketing-handoff-timeline li span { display: block; }
.marketing-handoff-timeline li span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.marketing-handoff-timeline li p { margin: 6px 0 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
html[data-theme="carbon_dark"] .marketing-handoff-hero { background: linear-gradient(120deg, rgba(27, 77, 45, .76), rgba(23, 30, 26, .93)); }
html[data-theme="carbon_dark"] .marketing-handoff-kpis article, html[data-theme="carbon_dark"] .marketing-handoff-register, html[data-theme="carbon_dark"] .marketing-handoff-context > div, html[data-theme="carbon_dark"] .marketing-handoff-timeline li { background: var(--panel); }
@media (max-width: 1050px) { .marketing-handoff-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marketing-handoff-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marketing-handoff-search { grid-column: span 3; } }
@media (max-width: 700px) { .marketing-handoff-hero, .marketing-handoff-register > header, .marketing-handoff-form-actions { align-items: stretch; flex-direction: column; } .marketing-handoff-hero-actions { justify-items: stretch; white-space: normal; } .marketing-handoff-kpis, .marketing-handoff-form-grid, .marketing-handoff-context, .marketing-handoff-filters { grid-template-columns: 1fr; } .marketing-handoff-search { grid-column: auto; } .marketing-handoff-register > header, .marketing-handoff-filters { padding-left: 14px; padding-right: 14px; } .marketing-handoff-form-actions > div { display: grid; grid-template-columns: 1fr 1fr; } .marketing-handoff-pass-button { width: 100%; } .marketing-conversion-trend svg { height: 112px; } }

/* EF simplified workflow refinement: compact summary-first review path. */
.ef-simple-shell .ef-simple-header { padding: 16px 18px 14px; gap: 18px; align-items: center; }
.ef-simple-header .ef-studio-title-row h2 { font-size: 22px; }
.ef-simple-header p { max-width: 620px; margin-top: 5px; font-size: 11px; line-height: 1.4; }
.ef-simple-header-action { min-width: 215px; padding: 10px 11px; border-radius: 9px; box-shadow: 0 3px 10px rgba(25, 59, 35, .04); }
.ef-simple-header-action strong { font-size: 14px; }
.ef-simple-header-action small { font-size: 9px; }
.ef-simple-header-action button { margin-top: 7px; }
.ef-simple-header-button { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: flex-start; gap: 7px; padding: 6px 9px; text-align: left; }
.ef-simple-header-button > .material-symbols-rounded { flex: 0 0 auto; font-size: 16px; }
.ef-simple-header-button > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ef-simple-header-button strong { color: inherit; font-size: 10px; line-height: 1.15; }
.ef-simple-header-button small { color: inherit; font-size: 9px; line-height: 1.15; opacity: .82; }
.ef-simple-current-card { grid-template-columns: 1.35fr 1fr 1fr auto; gap: 10px; padding: 10px 18px; }
.ef-simple-current-card > div { gap: 2px; }
.ef-simple-current-card > div strong { font-size: 14px; }
.ef-simple-current-card > div small { font-size: 9px; }
.ef-simple-current-badge { padding: 6px 8px; font-size: 9px; }
.ef-simple-guide { gap: 8px; margin: 10px 18px 0; padding: 7px 10px; border-radius: 8px; font-size: 9px; }
.ef-simple-guide strong { font-size: 10px; }
.ef-simple-guide b { width: 16px; height: 16px; font-size: 9px; }
.ef-simple-step { margin: 8px 18px 0; border-radius: 9px; }
.ef-simple-step-head { gap: 8px; padding: 10px 12px; }
.ef-simple-step-head strong { font-size: 12px; }
.ef-simple-step-head small { font-size: 9px; line-height: 1.3; }
.ef-simple-step-number { width: 22px; height: 22px; font-size: 11px; }
.ef-simple-step-count { padding: 4px 7px; font-size: 9px; }
.ef-simple-version-row { grid-template-columns: minmax(210px, 1.2fr) minmax(150px, 1fr) auto; gap: 10px; padding: 0 12px 12px 46px; }
.ef-simple-version-row label { gap: 4px; }
.ef-simple-version-row label > span { font-size: 9px; }
.ef-simple-version-row select { min-height: 32px; }
.ef-simple-version-row > div { gap: 2px; padding-bottom: 4px; }
.ef-simple-version-row > div strong { font-size: 11px; }
.ef-simple-version-row > div small { font-size: 9px; }
.ef-simple-version-history { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 5px 7px; border: 1px solid #d6e7d9; border-radius: 7px; background: #fbfdfb; color: var(--green); font-size: 9px; font-weight: 900; white-space: nowrap; }
.ef-simple-version-history:hover { border-color: #9dc8a6; background: #f2faf3; }
.ef-simple-version-history .material-symbols-rounded { font-size: 15px; }
.ef-simple-factor-step .ef-simple-material-layout { padding: 0 12px 10px; }
.ef-simple-data-grid th, .ef-simple-data-grid td { padding: 6px 9px; font-size: 10px; }
.ef-simple-data-grid td strong { font-size: 12px; }
.ef-simple-data-grid tbody th small, .ef-simple-data-grid td small { font-size: 8px; }
.ef-simple-inline-details { margin: 0 12px 12px 46px; }
.ef-simple-inline-details summary { padding: 8px 0 5px; font-size: 10px; }
.ef-simple-inline-details summary small { font-size: 9px; }
.ef-simple-source-body { padding: 0 12px 12px 46px; }
.ef-simple-source-summary { gap: 6px; }
.ef-simple-source-summary > div { padding: 8px; }
.ef-simple-source-summary strong { font-size: 10px; }
.ef-simple-check-list { gap: 5px; margin-top: 8px; }
.ef-simple-check-row { gap: 6px; padding: 6px 8px; }
.ef-simple-check-row strong { font-size: 9px; }
.ef-simple-check-row small, .ef-simple-check-row b { font-size: 8px; }
.ef-simple-activation-row { gap: 12px; padding: 0 12px 12px 46px; }
.ef-simple-activation-row > div:first-child strong { font-size: 12px; }
.ef-simple-activation-row > div:first-child small { font-size: 9px; }
.ef-simple-blocker-note { max-width: 350px; padding: 7px 8px; font-size: 9px; }
.ef-simple-blocker-note strong { font-size: 9px; }
.ef-simple-more { margin: 8px 18px 0; border-radius: 9px; }
.ef-simple-more > summary { padding: 9px 12px; }
.ef-simple-more > summary > span:first-child { font-size: 11px; }
.ef-simple-more > summary small { font-size: 9px; }
.ef-simple-more-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px 12px; }
.ef-simple-more-actions button { gap: 1px 6px; padding: 7px 8px; }
.ef-simple-more-actions strong { font-size: 9px; }
.ef-simple-more-actions small { font-size: 8px; }
.ef-simple-detail-panel { margin: 0 12px 12px; padding: 10px; }
.ef-simple-history-list { gap: 6px; }
.ef-simple-history-row { gap: 8px; padding: 8px; }
.ef-simple-history-row > div:first-child strong { font-size: 10px; }
.ef-simple-history-row > div:first-child small, .ef-simple-history-row > div:nth-child(2) { font-size: 8px; }
.ef-simple-protection-footer { gap: 7px; margin: 8px 18px 14px; padding: 8px 10px; font-size: 9px; }
.ef-simple-protection-footer > .material-symbols-rounded { font-size: 16px; }

@media (max-width: 980px) {
  .ef-simple-more-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ef-simple-more-actions { grid-template-columns: 1fr; }
  .ef-simple-version-history { justify-self: start; }
}
html[data-theme="carbon_dark"] .ef-simple-header-action,
html[data-theme="carbon_dark"] .ef-simple-current-card,
html[data-theme="carbon_dark"] .ef-simple-step,
html[data-theme="carbon_dark"] .ef-simple-more { background: var(--panel); border-color: rgba(61, 214, 140, .22); }
html[data-theme="carbon_dark"] .ef-simple-guide,
html[data-theme="carbon_dark"] .ef-simple-protection-footer,
html[data-theme="carbon_dark"] .ef-simple-version-history { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .22); }

/* Approved Weight Slip: compact audit-ledger header. Keep the evidence
   complete while replacing the oversized metric-card grid with one readable
   identity band and a dense metadata matrix. */
#detailDrawer:has(.weight-slip-audit-ledger) {
  width: min(1120px, calc(100vw - 20px));
  background: #fbfdf9 !important;
}
#detailDrawer:has(.weight-slip-audit-ledger) .drawer-head {
  padding: 18px 26px 16px;
  background: #fbfdf9 !important;
  border-bottom-color: rgba(20, 60, 30, .12) !important;
}
#detailDrawer:has(.weight-slip-audit-ledger) .drawer-body {
  display: block;
  padding: 20px 26px 30px;
  background: #fbfdf9 !important;
}
#detailDrawer:has(.weight-slip-audit-ledger) .drawer-body > .drawer-section:first-child {
  margin-bottom: 18px;
}
.weight-slip-audit-ledger {
  overflow: hidden;
  border: 1px solid rgba(20, 60, 30, .12);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(238, 248, 239, .78), rgba(255, 255, 255, .58));
}
.weight-slip-ledger-identity {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(20, 60, 30, .12);
}
.weight-slip-ledger-company,
.weight-slip-ledger-id {
  display: flex;
  align-items: center;
  min-width: 0;
}
.weight-slip-ledger-company { gap: 12px; padding-right: 22px; }
.weight-slip-ledger-company > .material-symbols-rounded {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: rgba(46, 158, 82, .13);
  color: #1f8f4d;
  font-size: 23px;
}
.weight-slip-ledger-company > div,
.weight-slip-ledger-id { min-width: 0; }
.weight-slip-ledger-company > div,
.weight-slip-ledger-id { display: grid; gap: 4px; }
.weight-slip-ledger-company > div > span,
.weight-slip-ledger-id > span,
.weight-slip-ledger-field > div > span {
  color: #6f8a76 !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.weight-slip-ledger-company > div > strong {
  overflow-wrap: anywhere;
  color: #12331c !important;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.1;
}
.weight-slip-ledger-id {
  gap: 0;
  padding: 2px 22px;
  border-left: 1px solid rgba(20, 60, 30, .13);
}
.weight-slip-ledger-id > strong {
  overflow-wrap: anywhere;
  color: #12331c !important;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.1;
}
.weight-slip-ledger-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(46, 158, 82, .18);
  border-radius: 999px;
  background: rgba(46, 158, 82, .1);
  color: #1f7a3d !important;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.weight-slip-ledger-status .material-symbols-rounded { font-size: 16px; }
.weight-slip-ledger-metadata {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px 0 6px;
}
.weight-slip-ledger-field {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 18px;
  border-left: 1px solid rgba(20, 60, 30, .1);
}
.weight-slip-ledger-field:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 20px;
}
.weight-slip-ledger-field > .material-symbols-rounded {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: rgba(46, 158, 82, .08);
  color: #477a58;
  font-size: 17px;
}
.weight-slip-ledger-field > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.weight-slip-ledger-field > div > strong {
  overflow-wrap: anywhere;
  color: #12331c !important;
  font-size: 13px;
  line-height: 1.2;
}

@media (max-width: 820px) {
  #detailDrawer:has(.weight-slip-audit-ledger) .drawer-head,
  #detailDrawer:has(.weight-slip-audit-ledger) .drawer-body { padding-left: 18px; padding-right: 18px; }
  .weight-slip-ledger-identity { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 0; }
  .weight-slip-ledger-company { grid-column: 1 / -1; padding: 0 0 14px; border-bottom: 1px solid rgba(20, 60, 30, .1); }
  .weight-slip-ledger-id { padding-left: 0; border-left: 0; }
  .weight-slip-ledger-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weight-slip-ledger-field:nth-child(3n + 1) { border-left: 1px solid rgba(20, 60, 30, .1); padding-left: 18px; }
  .weight-slip-ledger-field:nth-child(2n + 1) { border-left: 0; padding-left: 20px; }
}
@media (max-width: 540px) {
  #detailDrawer:has(.weight-slip-audit-ledger) .drawer-head,
  #detailDrawer:has(.weight-slip-audit-ledger) .drawer-body { padding-left: 14px; padding-right: 14px; }
  .weight-slip-ledger-identity { grid-template-columns: 1fr; padding: 15px; }
  .weight-slip-ledger-company { grid-column: auto; }
  .weight-slip-ledger-id { padding: 0; }
  .weight-slip-ledger-status { justify-self: start; }
  .weight-slip-ledger-metadata { grid-template-columns: 1fr; padding-bottom: 8px; }
  .weight-slip-ledger-field,
  .weight-slip-ledger-field:nth-child(2n + 1),
  .weight-slip-ledger-field:nth-child(3n + 1) { border-left: 0; padding: 8px 15px; }
}

/* EF page readability and production-switch affordance. The previous
   simplification pass reduced this page below the shared 14px app baseline;
   keep the information architecture compact but restore readable type. */
.ef-simple-shell { font-size: 14px; }
.ef-simple-shell .ef-simple-header { padding: 20px 24px 18px; gap: 22px; }
.ef-simple-header .ef-studio-title-row h2 { font-size: 26px; }
.ef-simple-header p { max-width: 760px; margin-top: 7px; font-size: 13px; line-height: 1.5; }
.ef-simple-header-action { min-width: 255px; padding: 13px 14px; border-radius: 11px; }
.ef-simple-header-action > span,
.ef-simple-current-card > div > span,
.ef-simple-version-row .ef-simple-label,
.ef-simple-activation-row > div > span { font-size: 10px; }
.ef-simple-header-action strong { font-size: 17px; }
.ef-simple-header-action small { font-size: 11px; }
.ef-simple-header-action button { margin-top: 10px; }
.ef-simple-header-button { min-height: 40px; gap: 8px; padding: 8px 10px; }
.ef-simple-header-button > .material-symbols-rounded { font-size: 18px; }
.ef-simple-header-button strong { font-size: 12px; line-height: 1.2; }
.ef-simple-header-button small { font-size: 10px; line-height: 1.25; }
.ef-simple-current-card { gap: 12px; padding: 13px 24px; }
.ef-simple-current-card > div { gap: 4px; }
.ef-simple-current-card > div strong { font-size: 17px; }
.ef-simple-current-card > div small { font-size: 11px; line-height: 1.35; }
.ef-simple-current-badge { padding: 7px 10px; font-size: 11px; }
.ef-simple-guide { gap: 11px; margin: 14px 24px 0; padding: 10px 12px; font-size: 11px; }
.ef-simple-guide strong { font-size: 12px; }
.ef-simple-guide b { width: 20px; height: 20px; font-size: 10px; }
.ef-simple-step { margin: 12px 24px 0; border-radius: 11px; }
.ef-simple-step-head { gap: 10px; padding: 13px 15px; }
.ef-simple-step-head strong { font-size: 14px; }
.ef-simple-step-head small { font-size: 11px; line-height: 1.4; }
.ef-simple-step-number { width: 26px; height: 26px; font-size: 12px; }
.ef-simple-step-count { padding: 5px 8px; font-size: 10px; }
.ef-simple-version-row { gap: 12px; padding: 0 15px 15px 53px; }
.ef-simple-version-row label { gap: 5px; }
.ef-simple-version-row label > span { font-size: 11px; }
.ef-simple-version-row select { min-height: 38px; font-size: 13px; }
.ef-simple-version-row > div { gap: 4px; padding-bottom: 5px; }
.ef-simple-version-row > div strong { font-size: 13px; }
.ef-simple-version-row > div small { font-size: 10px; }
.ef-simple-version-history { min-height: 34px; padding: 6px 9px; font-size: 10px; }
.ef-simple-version-history .material-symbols-rounded { font-size: 16px; }
.ef-simple-factor-step .ef-simple-material-layout { padding: 0 15px 14px; }
.ef-simple-data-grid th, .ef-simple-data-grid td { padding: 9px 12px; font-size: 12px; }
.ef-simple-data-grid td strong { font-size: 14px; }
.ef-simple-data-grid tbody th small, .ef-simple-data-grid td small { font-size: 10px; }
.ef-simple-view-link { font-size: 11px; }
.ef-simple-inline-details { margin: 0 15px 15px 53px; }
.ef-simple-inline-details summary { padding: 10px 0 6px; font-size: 12px; }
.ef-simple-inline-details summary small { font-size: 10px; }
.ef-simple-formula { font-size: 11px; }
.ef-simple-inline-details p { font-size: 11px; }
.ef-simple-source-body { padding: 0 15px 15px 53px; }
.ef-simple-source-summary { gap: 9px; }
.ef-simple-source-summary > div { padding: 10px; }
.ef-simple-source-summary span, .ef-simple-binding-line span { font-size: 10px; }
.ef-simple-source-summary strong { font-size: 12px; }
.ef-simple-check-list { gap: 7px; margin-top: 11px; }
.ef-simple-check-row { gap: 7px; padding: 8px 9px; }
.ef-simple-check-row strong { font-size: 11px; }
.ef-simple-check-row small, .ef-simple-check-row b { font-size: 10px; }
.ef-simple-source-actions { font-size: 11px; }
.ef-simple-activation-row { gap: 16px; padding: 0 15px 15px 53px; }
.ef-simple-activation-row > div:first-child strong { font-size: 14px; }
.ef-simple-activation-row > div:first-child small { font-size: 11px; }
.ef-simple-blocker-note { max-width: 430px; padding: 8px 10px; font-size: 11px; }
.ef-simple-blocker-note strong { font-size: 11px; }
.ef-simple-activation-action button { min-height: 38px; padding: 8px 11px; font-size: 12px; }
.ef-simple-more { margin: 12px 24px 0; border-radius: 11px; }
.ef-simple-more > summary { padding: 12px 15px; }
.ef-simple-more > summary > span:first-child { font-size: 13px; }
.ef-simple-more > summary small { font-size: 10px; }
.ef-simple-more-actions { gap: 8px; padding: 0 15px 15px; }
.ef-simple-more-actions button { gap: 2px 7px; padding: 10px 11px; }
.ef-simple-more-actions strong { font-size: 11px; }
.ef-simple-more-actions small { font-size: 10px; }
.ef-simple-detail-panel { margin: 0 15px 15px; padding: 13px; }
.ef-simple-detail-heading h3 { font-size: 15px; }
.ef-simple-detail-heading p { font-size: 11px; }
.ef-simple-history-row { gap: 10px; padding: 10px; }
.ef-simple-history-row > div:first-child strong { font-size: 12px; }
.ef-simple-history-row > div:first-child small, .ef-simple-history-row > div:nth-child(2) { font-size: 10px; }
.ef-simple-protection-footer { gap: 8px; margin: 12px 24px 20px; padding: 10px 12px; font-size: 11px; }
.ef-simple-protection-footer > .material-symbols-rounded { font-size: 18px; }

@media (max-width: 980px) {
  .ef-simple-shell .ef-simple-header { align-items: stretch; flex-direction: column; }
  .ef-simple-header-action { justify-items: stretch; }
  .ef-simple-current-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-simple-current-badge { justify-self: start; }
  .ef-simple-source-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-simple-material-layout.has-inspector { grid-template-columns: 1fr; }
  .ef-simple-more-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ef-simple-shell .ef-simple-header { padding: 16px 14px 15px; }
  .ef-simple-current-card, .ef-simple-guide, .ef-simple-step, .ef-simple-more { margin-left: 14px; margin-right: 14px; }
  .ef-simple-current-card { grid-template-columns: 1fr; }
  .ef-simple-guide { align-items: flex-start; flex-direction: column; gap: 7px; }
  .ef-simple-guide i { display: none; }
  .ef-simple-version-row, .ef-simple-activation-row { grid-template-columns: 1fr; display: grid; padding-left: 12px; padding-right: 12px; }
  .ef-simple-source-body, .ef-simple-inline-details { margin-left: 12px; padding-left: 0; margin-right: 12px; }
  .ef-simple-source-summary, .ef-simple-check-list, .ef-simple-more-actions { grid-template-columns: 1fr; }
  .ef-simple-source-actions { align-items: flex-start; flex-direction: column; }
  .ef-simple-history-row { grid-template-columns: 1fr; }
  .ef-simple-row-actions { justify-content: start; }
  .ef-simple-protection-footer { margin-left: 14px; margin-right: 14px; }
}

/* Dashboard-only mobile sizing: keep KPI values readable without allowing a
   fixed number size or a long label to push the page wider than the phone. */
#kpiGrid,
#kpiGrid article,
#view-dashboard .ct-metric-grid,
#view-dashboard .ct-metric,
#view-dashboard .ct-hero > div {
  min-width: 0;
}

#kpiGrid article,
#view-dashboard .ct-metric {
  overflow: hidden;
}

#kpiGrid article strong,
#view-dashboard .ct-metric strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(1.25rem, 7vw, 1.75rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

#view-dashboard .ct-metric strong em {
  font-size: clamp(.75rem, 3vw, .85rem);
}

#view-dashboard .ct-hero h2,
#view-dashboard .ct-hero p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  #kpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-inline: 10px;
  }

  #kpiGrid article {
    min-height: 0;
    padding: 10px 12px;
  }

  #kpiGrid article:last-child {
    grid-column: 1 / -1;
  }

  #kpiGrid article span {
    font-size: clamp(.625rem, 2.6vw, .72rem);
  }

  #kpiGrid article strong {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
  }

  #view-dashboard.view.active {
    padding-inline: 12px;
  }

  #view-dashboard .ct-hero {
    padding: 18px 16px;
  }

  #view-dashboard .ct-hero h2 {
    font-size: clamp(21px, 7vw, 28px);
  }

  #view-dashboard .ct-hero p {
    font-size: clamp(12px, 3.4vw, 14px);
  }

  #view-dashboard .ct-metric-grid {
    gap: 8px;
  }

  #view-dashboard .ct-metric strong {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
  }
}

@media (max-width: 380px) {
  #view-dashboard .ct-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone scroll flow: keep the dashboard header and KPI block in the same
   document scroll as the page content. The desktop/tablet scroll model stays
   unchanged, and the compact navigation remains available at the top. */
@media (max-width: 760px) {
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .app-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    grid-template-rows: auto auto !important;
  }

  body:not([data-role="customer_view"]):not([data-role="customer_master"]) main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .view,
  body:not([data-role="customer_view"]):not([data-role="customer_master"]) .view.active {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* Weight Slip records: convert the wide audit table into readable phone cards.
   Desktop keeps the full 10-column register; mobile keeps every field but
   presents the record as a vertical, tappable list item. */
@media (max-width: 760px) {
  #view-weight-slip .dashboard-audit-resultbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin: 0 2px 10px;
  }

  #view-weight-slip .dashboard-audit-table {
    min-height: 0;
    overflow: visible !important;
    border: 0;
    background: transparent;
  }

  #view-weight-slip .dashboard-audit-table table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  #view-weight-slip .dashboard-audit-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #view-weight-slip .dashboard-audit-table tbody {
    display: grid;
    gap: 9px;
  }

  #view-weight-slip .dashboard-audit-table tbody > tr.dashboard-audit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "date status"
      "slip slip"
      "company company"
      "do do"
      "net waste"
      "ef updated"
      "actions actions";
    gap: 0 12px;
    min-width: 0;
    padding: 11px 12px 10px;
    border: 1px solid #d6e4da;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(25, 72, 43, .06);
    cursor: pointer;
  }

  #view-weight-slip .dashboard-audit-table tbody > tr.dashboard-audit-row:hover td {
    background: transparent !important;
  }

  #view-weight-slip .dashboard-audit-row > td {
    display: flex;
    align-items: baseline;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: transparent !important;
    color: #365246;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  #view-weight-slip .dashboard-audit-row > td::before {
    flex: 0 0 auto;
    width: 74px;
    margin-right: 7px;
    color: #6f897a;
    content: "";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  #view-weight-slip .dashboard-audit-row > td:nth-child(1) { grid-area: date; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(1)::before { content: "Collection"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(2) { grid-area: slip; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(2)::before { content: "Slip"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(3) {
    grid-area: company;
    align-items: flex-start;
    padding: 8px 0 7px;
    border-top: 1px solid #edf2ee;
    border-bottom: 1px solid #edf2ee;
    color: #173d2a;
    font-size: 13px;
    font-weight: 800;
  }
  #view-weight-slip .dashboard-audit-row > td:nth-child(3)::before { content: "Company"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(4) { grid-area: do; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(4)::before { content: "DO"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(5) { grid-area: status; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(5)::before { content: "Status"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(6) { grid-area: net; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(6)::before { content: "Net"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(7) { grid-area: waste; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(7)::before { content: "Waste"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(8) { grid-area: ef; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(8)::before { content: "EF"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(9) { grid-area: updated; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(9)::before { content: "Updated"; }

  #view-weight-slip .dashboard-audit-row > td:nth-child(10) {
    grid-area: actions;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
    padding: 8px 0 0;
    border-top: 1px solid #edf2ee;
  }
  #view-weight-slip .dashboard-audit-row > td:nth-child(10)::before { content: "Actions"; }
  #view-weight-slip .dashboard-audit-row > td:nth-child(10) > button {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid #cfe0d4;
    border-radius: 7px;
    font-size: 11px;
  }

  #view-weight-slip .dashboard-audit-row > td strong,
  #view-weight-slip .dashboard-audit-row > td small,
  #view-weight-slip .dashboard-audit-row > td .pill {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #view-weight-slip .dashboard-audit-row > td small {
    margin-top: 1px;
  }

  #view-weight-slip .dashboard-audit-table tbody > tr:not(.dashboard-audit-row) {
    display: block;
    min-width: 0;
  }

  #view-weight-slip .dashboard-audit-table tbody > tr:not(.dashboard-audit-row) td {
    display: block;
    padding: 14px;
  }
}

/* Keep the live exception table independently scrollable. The legacy dark
   drawer theme applies overflow:hidden to every .data-grid later in the file. */
#detailDrawerOverlay:has(.data-quality-issue-section) #drawerBody .data-quality-issue-list {
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-color: #a7b9aa transparent;
  scrollbar-width: thin;
}
#detailDrawerOverlay:has(.data-quality-issue-section) #drawerBody .data-quality-issue-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#detailDrawerOverlay:has(.data-quality-issue-section) #drawerBody .data-quality-issue-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: #a7b9aa;
  background-clip: padding-box;
}

body.customer-portal-support-preview { height: 100dvh; min-height: 100dvh; overflow: hidden; }
body.customer-portal-support-preview #appShell.app-shell { display: block !important; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
body.customer-portal-support-preview .sidebar,
body.customer-portal-support-preview .topbar,
body.customer-portal-support-preview .detail-rail,
body.customer-portal-support-preview #mnavBtn,
body.customer-portal-support-preview #mnavScrim,
body.customer-portal-support-preview #mnavDrawer,
body.customer-portal-support-preview #mobileNavBtn,
body.customer-portal-support-preview .mobile-nav-drawer,
body.customer-portal-support-preview #mobileNavDrawer { display: none !important; }
body.customer-portal-support-preview main { display: block !important; width: 100%; height: 100dvh; min-height: 0; padding: 0 !important; overflow-x: hidden; overflow-y: auto; }
body.customer-portal-support-preview main > .view:not(#view-customer) { display: none !important; }
body.customer-portal-support-preview main > #view-customer { display: block !important; width: 100%; height: auto; min-height: 100dvh; padding: 0 !important; overflow: visible; }
.customer-report-support-page { width: 100%; min-height: 100%; }
.customer-portal-preview-toolbar { position: sticky; top: 0; z-index: 70; display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 54px; padding: 7px 14px; border-bottom: 1px solid rgba(40, 94, 57, .16); background: rgba(247, 251, 247, .96); backdrop-filter: blur(12px); }
.customer-portal-preview-toolbar label { display: flex; align-items: center; gap: 8px; color: #52705b; font-size: 12px; font-weight: 700; }
.customer-portal-preview-toolbar select { width: min(390px, 65vw); min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.customer-portal-preview-empty { padding: 24px 16px; color: var(--muted); text-align: center; }
.customer-report-support-page .master-report-history-count { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #eef7f0; color: #21834b; font-size: 10px; font-weight: 800; }
.customer-report-support-page .master-shell,
.customer-report-support-page .client-shell { margin-top: 0; }
.master-report-readonly-note { margin: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #f3f7f4; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 600px) {
  .customer-portal-preview-toolbar { justify-content: space-between; padding: 7px 9px; }
  .customer-portal-preview-toolbar label { flex: 1; justify-content: flex-end; }
  .customer-portal-preview-toolbar select { width: min(260px, 54vw); }
}

/* Sorting phone workflow: field staff record weights only. The established
   computer Sorting + OCR workspace remains the sole desktop workflow. */
.sorting-mobile-workspace { display: none; }
.sorting-mobile-page-head,
.sorting-mobile-do-card,
.sorting-mobile-capture,
.sorting-mobile-empty,
.sorting-mobile-rule,
.sorting-mobile-total,
.sorting-mobile-entry-history {
  border: 1px solid #d5e4d9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(25, 62, 39, .055);
}
.sorting-mobile-page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; }
.sorting-mobile-page-head h1 { margin: 3px 0 5px; color: #173d2a; font-size: 22px; line-height: 1.15; }
.sorting-mobile-page-head p { margin: 0; color: #60786a; font-size: 12px; }
.sorting-mobile-eyebrow, .sorting-mobile-card-kicker { color: #378454; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sorting-mobile-count { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 42px; border-radius: 12px; background: #e6f4e9; color: #198248; font-size: 18px; font-weight: 900; }
.sorting-mobile-do-list { display: grid; gap: 9px; margin-top: 10px; }
.sorting-mobile-do-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px; }
.sorting-mobile-do-card.is-selected { border-color: #53a974; box-shadow: 0 0 0 2px rgba(46, 158, 82, .12); }
.sorting-mobile-do-card h3 { margin: 3px 0 2px; color: #183d2b; font-size: 16px; }
.sorting-mobile-do-card p { margin: 0 0 4px; color: #385a47; font-size: 13px; font-weight: 700; }
.sorting-mobile-do-card small, .sorting-mobile-card-status { color: #687f70; font-size: 11px; }
.sorting-mobile-card-action { display: grid; justify-items: end; gap: 6px; flex: 0 0 auto; }
.sort-rail-item .pill.blue { border: 1px solid #98c8f4; background: #e4f1ff; color: #164b79; font-size: 10.5px; font-weight: 800; }
.sort-rail-item .pill.amber { border: 1px solid #efbd63; background: #fff0d3; color: #754300; font-size: 10.5px; font-weight: 800; }
.sorting-mobile-card-status { display: inline-flex; align-items: center; gap: 5px; max-width: 158px; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1.25; text-align: left; text-wrap: balance; }
.sorting-mobile-card-status::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; content: ""; }
.sorting-mobile-card-status.is-ready { border-color: #a9c9f4; background: #e8f1ff; color: #174a7e; }
.sorting-mobile-card-status.is-in-progress { border-color: #edca79; background: #fff4d8; color: #76500a; }
.sorting-mobile-card-status.is-pending { border-color: #edbd8a; background: #fff0df; color: #83450d; }
.sorting-mobile-card-status.is-complete { border-color: #92cba2; background: #e2f4e8; color: #176139; }
.sorting-mobile-card-status.is-blocked { border-color: #e5a49d; background: #fde9e7; color: #8c2c25; }
.sorting-mobile-card-status.is-warning { max-width: 138px; border-color: #edca79; background: #fff4d8; color: #76500a; line-height: 1.35; }
.sorting-mobile-card-action button, .sorting-mobile-capture button { min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 800; }
.sorting-mobile-empty { display: grid; gap: 5px; padding: 20px 16px; color: #526c5a; font-size: 12px; line-height: 1.45; }
.sorting-mobile-empty strong { color: #183d2b; font-size: 14px; }
.sorting-mobile-resume { margin-top: 18px; }
.sorting-mobile-resume h2 { margin: 0; color: #234a34; font-size: 15px; }
.sorting-mobile-capture { display: grid; gap: 13px; margin-top: 14px; padding: 15px; }
.sorting-mobile-capture > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sorting-mobile-capture > header h2 { margin: 4px 0; color: #173d2a; font-size: 17px; line-height: 1.25; }
.sorting-mobile-capture > header p { margin: 0; color: #687f70; font-size: 11px; }
.sorting-mobile-rule { display: flex; align-items: center; gap: 9px; padding: 11px; background: #eff8f1; color: #385c46; font-size: 11px; line-height: 1.4; }
.sorting-mobile-rule .material-symbols-rounded { flex: 0 0 auto; color: #21834b; }
#sortingMobileWeightForm { display: grid; gap: 10px; }
#sortingMobileWeightForm label { display: grid; gap: 5px; color: #385c46; font-size: 12px; font-weight: 800; }
#sortingMobileWeightForm select, #sortingMobileWeightForm input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c9dbce; border-radius: 10px; background: #fff; color: #173d2a; font-size: 16px; }
#sortingMobileWeightForm input { font-size: 20px; font-weight: 800; }
#sortingMobileWeightForm .sorting-mobile-add-button { min-height: 52px; background: #218c4a; color: #fff; }
.sorting-mobile-total { display: flex; justify-content: space-between; align-items: center; padding: 13px; background: #f3faf5; }
.sorting-mobile-total > div { display: grid; gap: 3px; }
.sorting-mobile-total span { color: #60786a; font-size: 11px; }
.sorting-mobile-total strong { color: #173d2a; font-size: 25px; }
.sorting-mobile-material-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sorting-mobile-material-totals > div { display: flex; justify-content: space-between; gap: 7px; padding: 8px 9px; border: 1px solid #e0ebe3; border-radius: 9px; color: #526c5a; font-size: 11px; }
.sorting-mobile-material-totals strong { color: #1d5032; white-space: nowrap; }
.sorting-mobile-material-totals p { grid-column: 1 / -1; margin: 0; color: #71867a; font-size: 12px; }
.sorting-mobile-entry-history { padding: 11px; box-shadow: none; }
.sorting-mobile-entry-history > strong { color: #234a34; font-size: 12px; }
.sorting-mobile-entry-history ol { display: grid; gap: 5px; margin: 8px 0 10px; padding: 0; list-style: none; }
.sorting-mobile-entry-history li { display: flex; justify-content: space-between; gap: 8px; color: #526c5a; font-size: 12px; }
.sorting-mobile-entry-history li strong { color: #1d5032; }
.sorting-mobile-sync { margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; line-height: 1.4; }
.sorting-mobile-sync.is-synced { border-color: #92cba2; background: #e8f5eb; color: #176139; }
.sorting-mobile-sync.is-pending { border-color: #edbd8a; background: #fff3e2; color: #83450d; }
.sorting-mobile-sync.is-error { border-color: #e5a49d; background: #fdecea; color: #8c2c25; }
.sorting-mobile-finish-button { min-height: 50px; background: #173d2a; color: #fff; }
.sorting-mobile-finish-button:disabled { opacity: .45; }
.sorting-mobile-footer { margin: 12px 3px 4px; color: #6c8273; font-size: 10.5px; line-height: 1.45; }
.sorting-mobile-date-footer { display: none; }
.collection-channel-picker-modal .center-modal { width: min(600px, calc(100vw - 28px)); }
.collection-channel-picker-modal .center-modal-head { background: linear-gradient(135deg, #f2faf3, #fff); }
.collection-channel-picker { display: grid; gap: 18px; }
.collection-channel-summary { margin: 0; color: #536a5b; line-height: 1.55; }
.collection-channel-details { display: grid; gap: 7px; padding: 13px 15px; border: 1px solid #dce9de; border-radius: 13px; background: #f5faf5; color: #345342; font-size: 13px; }
.collection-channel-details span:first-child { color: #173d2a; font-weight: 750; }
.collection-channel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.collection-channel-option { display: grid; justify-items: start; align-content: start; gap: 9px; min-height: 156px; padding: 18px; border: 1px solid #d6e5d8; border-radius: 16px; background: #fff; color: #173d2a; text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.collection-channel-option:hover:not(:disabled), .collection-channel-option:focus-visible { transform: translateY(-2px); border-color: #8fc6a0; box-shadow: 0 12px 26px rgba(27, 78, 47, .12); outline: none; }
.collection-channel-option > .material-symbols-rounded { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #e8f5ec; color: #1b8c50; font-size: 21px; }
.collection-channel-option strong { font-size: 16px; }
.collection-channel-option small { color: #65796b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.collection-channel-whatsapp { border-color: #bfe2ca; background: linear-gradient(145deg, #f1fbf4, #fff); }
.collection-channel-whatsapp > .material-symbols-rounded { background: #d9f2e1; color: #16834a; }
.collection-channel-email > .material-symbols-rounded { background: #edf2fa; color: #315f94; }
.collection-channel-option:disabled { opacity: .55; cursor: not-allowed; }
.collection-channel-footnote { margin: 0; color: #758679; font-size: 11px; line-height: 1.5; }
@media (max-width: 920px) {
  .crm-cc-email-control { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .crm-cc-email-control > small { white-space: normal; }
}
@media (max-width: 560px) {
  .collection-channel-options { grid-template-columns: 1fr; }
  .collection-channel-option { min-height: 0; grid-template-columns: 38px 1fr; align-items: center; column-gap: 12px; padding: 14px; }
  .collection-channel-option > .material-symbols-rounded { grid-row: span 2; }
  .collection-channel-option small { grid-column: 2; }
}
@media (max-width: 760px) {
  .sorting-desktop-workspace { display: none !important; }
  .sorting-mobile-workspace { display: block; max-width: 680px; margin: 0 auto; padding: 10px 10px 118px; }
  .sorting-mobile-do-card { align-items: flex-start; }
  .sorting-mobile-card-action button { max-width: 145px; white-space: normal; }
  .sorting-mobile-capture > header { flex-direction: column; }
  .sorting-mobile-capture > header button { width: 100%; }
  .sorting-mobile-date-footer { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; width: min(100%, 680px); box-sizing: border-box; margin: 0 auto; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #d5e4d9; background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(25, 62, 39, .1); backdrop-filter: blur(12px); }
  .sorting-mobile-date-footer label { display: grid; min-width: 0; gap: 4px; color: #42604d; font-size: 10px; font-weight: 800; }
  .sorting-mobile-date-footer input { width: 100%; min-width: 0; min-height: 42px; box-sizing: border-box; padding: 7px 9px; border: 1px solid #c9dbce; border-radius: 9px; background: #fff; color: #173d2a; font: inherit; font-size: 16px; }
  .sorting-mobile-date-footer button { min-width: 66px; min-height: 42px; padding: 8px 12px; border: 1px solid #c9dbce; border-radius: 9px; background: #f7fbf8; color: #1d5032; font-size: 12px; font-weight: 800; }
}
@media (max-width: 380px) {
  .sorting-mobile-workspace { padding-left: 7px; padding-right: 7px; }
  .sorting-mobile-do-card { gap: 8px; padding: 11px; }
  .sorting-mobile-card-action button { max-width: 124px; padding: 9px; font-size: 11px; }
  .sorting-mobile-material-totals { grid-template-columns: 1fr; }
}

/* Mobile shell rules must never reveal authenticated content on the login screen. */
#appShell.hidden { display: none !important; }

/* Keep login art and floating labels behind the sign-in card. */
.login-screen { isolation: isolate; }
.login-screen::before,
.motion-bg,
.login-screen::after { z-index: 0; }
.login-panel { z-index: 1; }

/* Day schedule copying and clearer month boundaries; internal Operations Board only. */
.collection-board-large-calendar-grid { gap: 4px; padding: 6px; background: #e6eee9; }
.collection-board-large-calendar-day, .collection-board-large-calendar-day:nth-child(7n) { border: 1.5px solid #b5c9bd; border-radius: 8px; }
.collection-board-large-calendar-day.is-scheduled { border-color: #2d80b8; background: #f2f8ff; }
.collection-board-large-calendar-day.is-complete { border-color: #32925b; background: #f0faf2; }
.collection-board-large-calendar-day.is-problem { border-color: #d58c1c; background: #fff8e9; }
.collection-board-large-calendar-day.is-outside { border-color: #cbd8cf; opacity: .7; }
.collection-board-large-calendar-day.is-selected { border-color: #125c38; box-shadow: inset 0 0 0 2px #125c38; }
.collection-board-large-calendar-companies { border-color: #9fbdab; background: rgba(255,255,255,.8); }
.collection-board-large-calendar-companies strong + strong { border-top-color: #c1d4c7; }
.collection-schedule-copy-bar { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:14px 19px; border-bottom:1px solid #b5c9bd; background:#f4f9f6; }
.collection-schedule-copy-bar > div { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.collection-schedule-copy-bar > div:first-child { flex:1; }
.collection-schedule-copy-bar span { font-size:12px; color:#486353; }
.schedule-copy-modal { width:min(850px,calc(100vw - 24px)); }
.schedule-copy-intro p { color:#526c5e; font-size:13px; line-height:1.6; }
.schedule-copy-destination { display:grid; gap:6px; max-width:260px; margin:16px 0; font-weight:700; }
.schedule-copy-bulk { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.schedule-copy-bulk span { color:#526c5e; font-size:12px; }
.schedule-copy-row { color:#183a25; border:1px solid #acc8b7; border-radius:10px; padding:14px; margin:10px 0; background:#f9fcfa; }
.schedule-copy-company { display:flex; gap:10px; align-items:center; }
.schedule-copy-company input { width:18px; height:18px; flex:0 0 auto; }
.schedule-copy-company span { min-width:0; }
.schedule-copy-company small { display:block; color:#526c5e; margin-top:4px; }
.schedule-copy-resources { display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.schedule-copy-resources label { display:grid; gap:5px; font-size:12px; min-width:0; }
.schedule-copy-resources input,.schedule-copy-resources select { width:100%; min-width:0; }
.schedule-copy-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.schedule-copy-row .collection-delivery-box-field { margin-top:12px; }
@media(max-width:650px) { .collection-schedule-copy-bar { align-items:stretch; flex-direction:column; } .schedule-copy-resources { grid-template-columns:1fr; } }

.collection-schedule-copy-bar button { padding:9px 13px; min-height:36px; border:1px solid #8ba995; border-radius:8px; background:#fff; color:#17482f; font-weight:800; }
.collection-schedule-copy-bar button:last-child { background:#13774c; border-color:#13774c; color:#fff; }
.collection-schedule-copy-bar button:disabled { opacity:.45; cursor:not-allowed; }
.schedule-copy-modal .center-modal-body { display:block; background:#fff; }

.schedule-copy-type { display:grid; gap:5px; margin-top:12px; font-size:12px; }
.schedule-copy-type select { width:100%; min-width:0; }
.schedule-copy-row [data-delivery-box-field][hidden] { display:none !important; }
.collection-schedule-copy-bar button.schedule-delete-day-button { background:#fff5f3; border-color:#c47f70; color:#a12b19; }
.schedule-delete-list small { display:block; margin-top:5px; color:#526c5e; }
.schedule-delete-list p { margin:8px 0 0; font-size:12px; }

.collection-schedule-copy-bar button { background:#fff !important; color:#17482f !important; border:1px solid #8ba995 !important; }
.collection-schedule-copy-bar button.schedule-paste-day-button { background:#13774c !important; color:#fff !important; border-color:#13774c !important; }
.collection-schedule-copy-bar button.schedule-delete-day-button { background:#fff5f3 !important; color:#a12b19 !important; border-color:#c47f70 !important; }

/* Clicking a populated month cell copies the source directly. */
.collection-calendar-copy-hint { align-self:flex-start; padding:4px 7px; border:1px solid #a9bce6; border-radius:6px; color:#245390; background:#f0f5ff; font-size:10px; line-height:1.35; font-weight:800; }
.collection-calendar-copy-hint.is-copied { color:#fff; background:#285dbe; border-color:#285dbe; }
.collection-board-large-calendar-day.is-copy-source { box-shadow:inset 0 0 0 2px #285dbe; }