/* ============================================================
 * ziva-erp.css — Modern SaaS ERP design system for the ZIVA LP tenant.
 *
 * Loaded ONLY by ziva-*.html pages (new, non-routed files). All
 * selectors are namespaced .zv-* so this stylesheet is inert if it
 * ever loads on another tenant's page. It layers on top of
 * /app-shell.css (which supplies the shell, the :root design tokens
 * and Plus Jakarta Sans) and renders inside body.z-shelled .z-main.
 *
 * Aesthetic: Ramp / Rippling / Linear — light canvas, generous
 * whitespace, KPI cards, soft shadows, data-forward tables.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ------------------------------------------------------------
 * ZIVA brand palette. ziva-erp.css loads AFTER app-shell.css and
 * ONLY on ziva-*.html, so re-defining the shared --z-* tokens here
 * re-skins the entire ZIVA workspace (incl. the nav shell) with zero
 * ripple to other tenants. Brand source: ziva-lp.com — a fresh cyan
 * (#5fc0e1) hygiene/healthcare identity with a green accent, cool
 * blue-grey neutrals (#E1E8ED) and Poppins typography. We anchor the
 * action color on a deeper cyan-teal so white text stays legible.
 * ------------------------------------------------------------ */
:root {
  /* brand — deep cyan-teal derived from ziva-lp #5fc0e1 */
  --z-primary: #0e7faa;
  --z-primary-2: #0b6a90;
  --z-primary-soft: #e6f4fa;
  --z-primary-tint: rgba(14,127,170,.12);
  /* cool blue-grey neutrals tuned to the brand border #E1E8ED */
  --z-text-1: #0f2933;
  --z-text-2: #4c636d;
  --z-text-3: #8aa3af;
  --z-border: #dbe6ea;
  --z-border-soft: #eef3f6;
  --z-bg-canvas: #ffffff;
  --z-bg-rail: #f4f9fb;
  --z-bg-rail-2: #e9f1f5;

  /* layout + restrained semantic accents (no candy rainbow) */
  --zv-gap: 16px;
  --zv-pad: 24px;
  --zv-card-radius: 10px;
  --zv-shadow: 0 1px 2px rgba(15,41,51,.04), 0 1px 2px rgba(15,41,51,.05);
  --zv-shadow-hover: 0 4px 14px rgba(15,41,51,.08);
  --zv-brand: #0e7faa;
  --zv-brand-soft: #e6f4fa;
  --zv-pos: #2f9e5e;
  --zv-pos-soft: #e9f6ef;
  --zv-neg: #d1495b;
  --zv-neg-soft: #fbeef0;
  --zv-warn: #c2891b;
  --zv-warn-soft: #faf2e1;
  --zv-info: #0e7faa;
  --zv-info-soft: #e6f4fa;
  --zv-violet: #3a6b7d;
  --zv-violet-soft: #e9f1f4;
}

/* Poppins to match the ziva-lp.com brand (scoped to ziva pages only) */
body { font-family: 'Poppins', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ---------- page scaffold ---------- */
.zv-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px var(--zv-pad) 72px;
  color: var(--z-text-1);
}
.zv-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.zv-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--z-text-3);
  margin: 0 0 6px;
}
.zv-h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--z-text-1);
}
.zv-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  color: var(--z-text-2);
  line-height: 1.55;
  max-width: 680px;
}
.zv-head-aside {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zv-asof {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--z-text-3);
}

/* ---------- KPI cards ---------- */
.zv-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: var(--zv-gap);
  margin-bottom: 26px;
}
.zv-kpi {
  background: var(--z-bg-canvas);
  border: 1px solid var(--z-border);
  border-radius: var(--zv-card-radius);
  padding: 18px 18px 16px;
  box-shadow: var(--zv-shadow);
  position: relative;
  overflow: hidden;
  transition: box-shadow .16s, transform .16s;
}
.zv-kpi:hover { box-shadow: var(--zv-shadow-hover); transform: translateY(-1px); }
.zv-kpi-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.zv-kpi-ic {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.zv-kpi-ic svg { width: 16px; height: 16px; }
.zv-kpi-ic.info   { background: var(--zv-info-soft);   color: var(--zv-info); }
.zv-kpi-ic.pos    { background: var(--zv-pos-soft);    color: var(--zv-pos); }
.zv-kpi-ic.warn   { background: var(--zv-warn-soft);   color: var(--zv-warn); }
.zv-kpi-ic.violet { background: var(--zv-violet-soft); color: var(--zv-violet); }
.zv-kpi-ic.neg    { background: var(--zv-neg-soft);    color: var(--zv-neg); }
.zv-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--z-text-2);
  letter-spacing: .01em;
}
.zv-kpi-value {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--z-text-1);
}
.zv-kpi-value .zv-cur {
  font-size: 14px;
  font-weight: 700;
  color: var(--z-text-3);
  margin-right: 3px;
  vertical-align: 2px;
}
.zv-kpi-foot {
  margin-top: 9px;
  font-size: 12px;
  color: var(--z-text-3);
  display: flex; align-items: center; gap: 6px;
}
.zv-delta { font-weight: 700; }
.zv-delta.up { color: var(--zv-pos); }
.zv-delta.down { color: var(--zv-neg); }

/* ---------- generic cards / panels ---------- */
.zv-grid {
  display: grid;
  gap: var(--zv-gap);
}
.zv-grid.cols-2 { grid-template-columns: 1.5fr 1fr; }
.zv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.zv-grid.even-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1040px) {
  .zv-grid.cols-2, .zv-grid.cols-3, .zv-grid.even-2 { grid-template-columns: 1fr; }
}
.zv-card {
  background: var(--z-bg-canvas);
  border: 1px solid var(--z-border);
  border-radius: var(--zv-card-radius);
  box-shadow: var(--zv-shadow);
  overflow: hidden;
}
.zv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--z-border);
  background: var(--z-bg-rail);
}
.zv-card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--z-text-1);
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.zv-card-title .zv-dot { width: 8px; height: 8px; border-radius: 50%; }
.zv-card-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--z-primary);
  text-decoration: none;
}
.zv-card-link:hover { text-decoration: underline; }
.zv-card-body { padding: 8px 18px 16px; }
.zv-card-body.flush { padding: 0; }

/* ---------- data tables ---------- */
.zv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zv-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--z-text-3);
  padding: 11px 18px;
  background: var(--z-bg-rail);
  border-bottom: 1px solid var(--z-border);
  white-space: nowrap;
}
.zv-table td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--z-border-soft);
  color: var(--z-text-1);
  vertical-align: middle;
}
.zv-table tr:last-child td { border-bottom: 0; }
.zv-table tbody tr { transition: background .1s; }
.zv-table tbody tr:hover { background: var(--z-bg-rail); }
.zv-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.zv-table .muted { color: var(--z-text-3); }
.zv-strong { font-weight: 700; }
.zv-card-note { font-size: 12px; color: var(--z-text-3); margin: 2px 0 10px; }
.zv-card-note .zv-strong { color: var(--z-text-1); }

/* ---------- badges ---------- */
.zv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1.4;
}
.zv-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.zv-badge.ok      { background: var(--zv-pos-soft);    color: #1f7a47; }
.zv-badge.warn    { background: var(--zv-warn-soft);   color: #946312; }
.zv-badge.info    { background: var(--zv-info-soft);   color: #0b6a90; }
.zv-badge.neutral { background: var(--z-bg-rail-2);    color: var(--z-text-2); }
.zv-badge.danger  { background: var(--zv-neg-soft);    color: #a8323f; }
.zv-badge.violet  { background: var(--zv-violet-soft); color: #2f5a6a; }

/* ---------- mini bar chart (CSS only) ---------- */
.zv-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 12px 4px 0; }
.zv-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.zv-bar {
  width: 100%;
  max-width: 46px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #4cb6d6, var(--z-primary));
  min-height: 4px;
  transition: filter .15s;
}
.zv-bar:hover { filter: brightness(1.08); }
.zv-bar-col .zv-bar-label { font-size: 11px; color: var(--z-text-3); font-weight: 600; }
.zv-bar-col .zv-bar-val { font-size: 11px; color: var(--z-text-1); font-weight: 700; }

/* ---------- horizontal progress (AR aging, capacity etc.) ---------- */
.zv-prog-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.zv-prog-row .zv-prog-name { font-size: 12.5px; color: var(--z-text-2); width: 150px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zv-prog-track { flex: 1; height: 8px; background: var(--z-bg-rail-2); border-radius: 999px; overflow: hidden; }
.zv-prog-fill { height: 100%; border-radius: 999px; background: var(--z-primary); }
.zv-prog-fill.pos { background: var(--zv-pos); }
.zv-prog-fill.warn { background: var(--zv-warn); }
.zv-prog-fill.neg { background: var(--zv-neg); }
.zv-prog-val { font-size: 12.5px; font-weight: 700; color: var(--z-text-1); width: 92px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---------- donut (conic-gradient) ---------- */
.zv-donut-wrap { display: flex; align-items: center; gap: 22px; padding: 6px 2px; }
.zv-donut { width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0; position: relative; }
.zv-donut::after {
  content: ''; position: absolute; inset: 18px;
  background: var(--z-bg-canvas); border-radius: 50%;
}
.zv-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.zv-donut-center .v { font-size: 20px; font-weight: 800; color: var(--z-text-1); letter-spacing: -.02em; }
.zv-donut-center .l { font-size: 10.5px; color: var(--z-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.zv-legend { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; }
.zv-legend-item { display: flex; align-items: center; gap: 9px; color: var(--z-text-2); }
.zv-legend-item .sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.zv-legend-item .nm { flex: 1; }
.zv-legend-item .vl { font-weight: 700; color: var(--z-text-1); font-variant-numeric: tabular-nums; }

/* ---------- list items (activity / alerts) ---------- */
.zv-list { list-style: none; margin: 0; padding: 0; }
.zv-li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--z-border-soft); }
.zv-li:last-child { border-bottom: 0; }
.zv-li-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--z-bg-rail-2); color: var(--z-text-2);
}
.zv-li-ic svg { width: 15px; height: 15px; }
.zv-li-ic.pos { background: var(--zv-pos-soft); color: var(--zv-pos); }
.zv-li-ic.warn { background: var(--zv-warn-soft); color: var(--zv-warn); }
.zv-li-ic.info { background: var(--zv-info-soft); color: var(--zv-info); }
.zv-li-main { flex: 1; min-width: 0; }
.zv-li-title { font-size: 13px; font-weight: 600; color: var(--z-text-1); }
.zv-li-meta { font-size: 11.5px; color: var(--z-text-3); margin-top: 2px; }
.zv-li-amt { font-size: 13px; font-weight: 700; color: var(--z-text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- segment chips / module quicklinks ---------- */
.zv-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.zv-quick a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--z-border); border-radius: 11px;
  text-decoration: none; background: var(--z-bg-canvas); transition: border-color .14s, box-shadow .14s, transform .14s;
}
.zv-quick a:hover { border-color: var(--z-primary); box-shadow: var(--zv-shadow); transform: translateY(-1px); }
.zv-quick .zv-q-ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--z-primary-soft); color: var(--z-primary); flex-shrink: 0; }
.zv-quick .zv-q-ic svg { width: 17px; height: 17px; }
.zv-quick .zv-q-tt { font-size: 13px; font-weight: 700; color: var(--z-text-1); }
.zv-quick .zv-q-sb { font-size: 11px; color: var(--z-text-3); margin-top: 1px; }

/* ---------- toolbar (filters / tabs on module pages) ---------- */
.zv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--z-border); margin-bottom: 20px; flex-wrap: wrap; }
.zv-tab {
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--z-text-2);
  text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit;
}
.zv-tab:hover { color: var(--z-text-1); }
.zv-tab.active { color: var(--z-primary); border-bottom-color: var(--z-primary); }

/* ---------- empty / loading ---------- */
.zv-empty { padding: 40px 18px; text-align: center; color: var(--z-text-3); font-size: 13px; }
.zv-skel { background: linear-gradient(90deg,#eef3f6 25%,#dde8ec 37%,#eef3f6 63%); background-size: 400% 100%; animation: zv-shimmer 1.4s ease infinite; border-radius: 6px; color: transparent !important; }
@keyframes zv-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- utilities ---------- */
.zv-mt-26 { margin-top: 26px; }
.zv-flex { display: flex; align-items: center; gap: 10px; }
.zv-spacer { flex: 1; }
.zv-pill-cur { font-size: 11px; font-weight: 700; color: var(--z-text-3); background: var(--z-bg-rail-2); padding: 2px 7px; border-radius: 6px; letter-spacing: .03em; }

/* ---------- buttons (module action chrome) ---------- */
.zv-btn, .zv-btn-primary, .zv-btn-ghost, .zv-btn-danger {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 9px;
  cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, opacity .12s;
}
.zv-btn-primary { background: var(--z-primary); color: #fff; box-shadow: var(--zv-shadow); }
.zv-btn-primary:hover { background: var(--z-primary-2); }
.zv-btn-ghost { background: #fff; color: var(--z-text-1); border-color: var(--z-border); }
.zv-btn-ghost:hover { background: var(--z-bg-rail); }
.zv-btn-danger { background: #fff; color: var(--zv-neg); border-color: #fecaca; }
.zv-btn-danger:hover { background: var(--zv-neg-soft); }
.zv-btn[disabled], .zv-btn-primary[disabled], .zv-btn-ghost[disabled], .zv-btn-danger[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- tab count chips ---------- */
.zv-tab-count { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; font-weight: 700;
  background: var(--z-bg-rail-2); color: var(--z-text-3); padding: 1px 6px; border-radius: 999px; margin-left: 2px; }
.zv-tab.active .zv-tab-count { background: var(--zv-info-soft); color: var(--z-primary); }

/* ---------- clickable table rows ---------- */
.zv-table tbody tr.zv-row-link { cursor: pointer; }
.zv-table tbody tr.zv-row-link:hover { background: var(--zv-info-soft); }

/* ---------- back link ---------- */
.zv-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--z-text-2); text-decoration: none; margin-bottom: 14px; }
.zv-back:hover { color: var(--z-primary); }

/* ---------- record header (detail pages) ---------- */
.zv-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.zv-rec-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.zv-rec-meta .zv-meta-item { display: flex; flex-direction: column; gap: 3px; }
.zv-meta-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--z-text-3); }
.zv-meta-value { font-size: 14px; font-weight: 600; color: var(--z-text-1); }
.zv-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- totals summary (bordered document-style box) ---------- */
.zv-totals {
  margin-left: auto; width: 300px; max-width: 100%;
  border: 1px solid var(--z-border); border-radius: 10px; background: var(--z-bg-rail);
  padding: 4px 14px 6px;
}
.zv-total-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; color: var(--z-text-2); }
.zv-total-row .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--z-text-1); }
.zv-total-row.grand { border-top: 1px solid var(--z-border); margin-top: 2px; padding-top: 12px; font-size: 15px; }
.zv-total-row.grand .v { font-size: 17px; font-weight: 700; }

/* ---------- ERP transaction forms ---------- */
/* property-sheet field grid — outer frame + 1px internal cell rules
 * (the 1px grid gap reveals the border-soft backdrop as clean cell lines) */
.zv-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  background: var(--z-border-soft);
  border: 1px solid var(--z-border);
  border-radius: 10px;
  overflow: hidden;
}
.zv-field {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 16px;
  background: var(--z-bg-canvas);
}
.zv-field.full { grid-column: 1 / -1; }
.zv-field label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--z-text-3); }
.zv-field label .req { color: var(--zv-neg); margin-left: 3px; }
.zv-input, .zv-select {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--z-border); border-radius: 8px; background: #fff; color: var(--z-text-1);
  transition: border-color .12s, box-shadow .12s;
}
.zv-input:focus, .zv-select:focus { outline: none; border-color: var(--z-primary); box-shadow: 0 0 0 3px var(--z-primary-tint); }
.zv-input.num { text-align: right; font-variant-numeric: tabular-nums; }

/* line-item editor — a real bordered spreadsheet grid (the ERP signature) */
.zv-line-table { border: 1px solid var(--z-border); border-radius: 10px; overflow: hidden; background: var(--z-bg-canvas); }
.zv-line-row {
  display: grid;
  grid-template-columns: 1fr 120px 140px 150px 46px;
  align-items: stretch;
  margin: 0;
}
#lines .zv-line-row + .zv-line-row { border-top: 1px solid var(--z-border-soft); }
.zv-line-row > * { border-right: 1px solid var(--z-border-soft); min-width: 0; }
.zv-line-row > *:last-child { border-right: 0; }
.zv-line-head {
  background: var(--z-bg-rail);
  border-bottom: 1px solid var(--z-border);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--z-text-3);
}
.zv-line-head > div { padding: 11px 12px; display: flex; align-items: center; }
.zv-line-row .zv-select, .zv-line-row .zv-input {
  border: 0; border-radius: 0; background: transparent; height: 100%; padding: 11px 12px;
}
.zv-line-row .zv-select:focus, .zv-line-row .zv-input:focus { box-shadow: inset 0 0 0 2px var(--z-primary-tint); }
.zv-line-row .zv-line-total {
  display: flex; align-items: center; justify-content: flex-end; padding: 0 12px;
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
  color: var(--z-text-1); background: var(--z-bg-rail);
}
.zv-line-del {
  border: 0; background: var(--z-bg-canvas); color: var(--zv-neg);
  width: 100%; min-height: 44px; cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.zv-line-del:hover { background: var(--zv-neg-soft); }
.zv-line-add { margin-top: 12px; }
.zv-form-note { font-size: 12px; color: var(--z-text-3); margin-top: 12px; line-height: 1.5; }
.zv-form-err { color: var(--zv-neg); font-size: 13px; font-weight: 600; }
.zv-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--z-border); }

/* ------------------------------------------------------------
 * Nav-shell distinction (ZIVA-scoped, non-rippling — loads only on
 * ziva-*.html). app-shell paints the rail (#f4f9fb) and the content
 * canvas (#fafbfc) at near-identical values, so the sidebar melts into
 * the page. We re-skin ONLY the ZIVA shell: a crisp WHITE rail + topbar
 * framing a softly tinted cool workspace, so the nav reads as its own
 * surface and the white content cards gain depth against the canvas.
 * Also repaints app-shell's two HARDCODED-PURPLE shell states
 * (active nav link, nav CTA hover) to the ZIVA brand cyan.
 * ------------------------------------------------------------ */
body.z-shelled { background: #eaf2f6; }

body.z-shelled .z-rail {
  background: var(--z-bg-canvas);
  border-right: 1px solid var(--z-border);
  box-shadow: 4px 0 16px rgba(15, 41, 51, .035);
}
body.z-shelled .z-topbar {
  background: var(--z-bg-canvas);
  border-bottom: 1px solid var(--z-border);
}
/* ZIVA brand lives at the TOP OF THE LEFT RAIL (above the nav) so the sidebar
 * reads as a properly designed branded panel instead of starting cold on the
 * first nav group. The topbar workspace mark is hidden to keep ONE prominent
 * logo. The rail header is a 56px sticky band aligned with the topbar height,
 * with a bottom divider, holding the cyan-tinted ziva wordmark (?v=2 cache-bust).
 * (Asset img/tenants/ziva-lp.png is tinted to --z-primary so it shows on white.) */
body.z-shelled .z-workspace { display: none; }
body.z-shelled .z-rail::before {
  content: "";
  display: block;
  flex-shrink: 0;
  height: var(--z-header-h);                 /* 56px — aligns with the topbar */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--z-bg-rail) url('/img/tenants/ziva-lp.png?v=2') no-repeat 20px center;
  background-size: auto 30px;
  border-bottom: 1px solid var(--z-border);
}
/* Collapsed rail (64px): center the mark so it doesn't bleed past the edge. */
body.z-shelled.z-rail-collapsed .z-rail::before {
  background-position: center center;
  background-size: auto 26px;
}

body.z-shelled .z-nav-link:hover {
  background: var(--z-bg-rail);
  color: var(--z-text-1);
}
body.z-shelled .z-nav-link.active {
  border-left: 3px solid var(--z-primary);
  background: var(--z-primary-soft);
  color: var(--z-primary);
  font-weight: 600;
}
body.z-shelled .z-nav-cta:hover {
  background: var(--z-primary-soft);
  color: var(--z-primary-2);
}