/* app.css -- layout for the fake Salesforce CRM.
 *
 * SLDS (vendor/slds.css) supplies every component: buttons, tables, cards, the stage path, the
 * activity timeline, form elements. This file only supplies the SHELL that SLDS does not ship --
 * the vertical app rail, the header bar, the stage -- plus the handful of per-instance numbers
 * that the capture measured.
 *
 * EVERY NUMBER BELOW CAME OUT OF refs/crm-live/salesforce/<route>/computed.json. Sources:
 *   rail          div.verticalNavContainer.one-primaryNav   x=-2 w=76 h=full  bg rgb(0,39,117)
 *   rail item     li.verticalNavMenuListItem                w=60 h=69, 77px pitch, label 13px #fff
 *   header        header#oneHeader                          x=76 h=98
 *   page header   div.slds-page-header_object-home          h=125  bg rgb(243,243,243)
 *   record hdr    div.highlights.slds-page-header_record-home  h=80
 *   table row     th / td                                   h=37  13px  rgb(92,92,92)
 *   link          a                                         rgb(2,80,217)
 *   font          system-ui stack  <- the org does NOT render Salesforce Sans; measured, not assumed
 */

:root {
  --jv-rail-w: 76px;
  --jv-rail-bg: #002775;
  --jv-header-h: 98px;
  --jv-page-bg: #f3f3f3;
  --jv-link: #0250d9;
  --jv-text: #181818;
  --jv-text-muted: #5c5c5c;
  --jv-border: #e5e5e5;
  --jv-row-h: 37px;
  --jv-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--jv-font);
  background: var(--jv-page-bg);
  color: var(--jv-text);
}
* { box-sizing: border-box; }
a { color: var(--jv-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.jv-app { display: flex; height: 100vh; overflow: hidden; }

/* ---- left rail -------------------------------------------------------------------------- */
.jv-rail {
  width: var(--jv-rail-w);
  min-width: var(--jv-rail-w);
  background: var(--jv-rail-bg);
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 12px;
}
.jv-rail::-webkit-scrollbar { width: 0; }
.jv-rail-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 60px; height: 69px; margin: 0 auto 8px;
  border-radius: 6px; color: #fff; font-size: 11px; line-height: 1.2; text-align: center;
  cursor: pointer; text-decoration: none;
}
.jv-rail-item:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.jv-rail-item[aria-current="page"] { background: rgba(255, 255, 255, .2); }
.jv-rail-icon {
  width: 36px; height: 36px; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.jv-rail-icon svg { width: 20px; height: 20px; fill: var(--jv-link); }
.jv-rail-label { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- header ----------------------------------------------------------------------------- */
.jv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.jv-header {
  height: var(--jv-header-h); min-height: var(--jv-header-h);
  background: #fff; border-bottom: 1px solid var(--jv-border);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.jv-logo { width: 34px; height: 24px; flex: none; }
.jv-search {
  flex: 1; max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid #c9c9c9; border-radius: 17px; background: #fff;
  color: var(--jv-text-muted); font-size: 13px;
}
.jv-search svg { width: 14px; height: 14px; fill: var(--jv-text-muted); }
.jv-header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.jv-header-actions svg { width: 18px; height: 18px; fill: #747474; }
.jv-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--jv-link); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

/* ---- object tabs ------------------------------------------------------------------------ */
.jv-tabs {
  display: flex; align-items: stretch; gap: 4px;
  background: #fff; border-bottom: 1px solid var(--jv-border);
  padding: 0 20px; height: 40px;
}
.jv-tab {
  display: flex; align-items: center; padding: 0 14px;
  font-size: 13px; color: var(--jv-text); border-bottom: 3px solid transparent;
}
.jv-tab:hover { text-decoration: none; background: #f3f3f3; }
.jv-tab[aria-current="page"] { border-bottom-color: var(--jv-link); font-weight: 600; }

/* ---- stage ------------------------------------------------------------------------------ */
.jv-stage { flex: 1; overflow-y: auto; padding: 16px 20px 40px; }
.jv-page-header {
  background: #fff; border: 1px solid var(--jv-border); border-radius: 4px;
  padding: 14px 18px; margin-bottom: 12px;
}
.jv-page-title { font-size: 18px; font-weight: 600; margin: 0; }
.jv-page-sub { font-size: 12px; color: var(--jv-text-muted); margin-top: 2px; }
.jv-card {
  background: #fff; border: 1px solid var(--jv-border); border-radius: 4px; margin-bottom: 12px;
}
/* An <svg><use href="sprite#id"> has NO intrinsic size: with nothing constraining it, it expands
 * to fill its flex container, which rendered the card-head icons at ~200px. Every icon in this app
 * is sized explicitly, and this is the floor that catches any new one. */
svg { width: 16px; height: 16px; flex: none; }

.jv-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--jv-border);
  font-size: 14px; font-weight: 600;
}
.jv-card-head svg { width: 18px; height: 18px; fill: var(--jv-link); }
.jv-card-body { padding: 14px; }

/* ---- table: 37px rows, 13px, rgb(92,92,92) -- all measured --------------------------------- */
.jv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jv-table th, .jv-table td {
  height: var(--jv-row-h); padding: 0 12px; text-align: left;
  border-bottom: 1px solid var(--jv-border); color: var(--jv-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jv-table th { font-weight: 500; background: #fafaf9; }
.jv-table tbody tr:hover { background: #f3f3f3; }
.jv-table td a { color: var(--jv-link); }
.jv-num { width: 44px; color: #939393; }

/* ---- the sync beat: rows that arrived from the portal ------------------------------------ */
.jv-synced { background: #eaf5fe; }
.jv-synced:hover { background: #ddeefc; }
.jv-sync-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; padding: 1px 8px; border-radius: 10px;
  background: #0176d3; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.jv-sync-badge svg { width: 10px; height: 10px; fill: #fff; }

/* ---- record page ------------------------------------------------------------------------ */
.jv-record-head {
  background: #fff; border: 1px solid var(--jv-border); border-radius: 4px;
  padding: 12px 18px; margin-bottom: 12px;
}
.jv-record-type { font-size: 12px; color: var(--jv-text-muted); }
.jv-record-name { font-size: 20px; font-weight: 600; margin: 2px 0 8px; }
.jv-record-cols { display: flex; gap: 42px; flex-wrap: wrap; }
.jv-record-col .k { font-size: 11px; color: var(--jv-text-muted); }
.jv-record-col .v { font-size: 13px; }
.jv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .jv-grid { grid-template-columns: 1fr; } }

.jv-field { padding: 7px 0; border-bottom: 1px solid #f0f0f0; }
.jv-field:last-child { border-bottom: 0; }
.jv-field .k { font-size: 11px; color: var(--jv-text-muted); }
.jv-field .v { font-size: 13px; min-height: 18px; }

/* ---- stage path ------------------------------------------------------------------------- */
.jv-path { display: flex; margin-bottom: 12px; }
.jv-path-step {
  flex: 1; height: 32px; display: flex; align-items: center; justify-content: center;
  background: #ecebea; color: #444; font-size: 12px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  margin-right: 2px;
}
.jv-path-step:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.jv-path-step.done { background: #0250d9; color: #fff; }
.jv-path-step.current { background: #032d60; color: #fff; font-weight: 600; }

/* ---- activity timeline ------------------------------------------------------------------- */
.jv-timeline { list-style: none; margin: 0; padding: 0; }
.jv-tl-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.jv-tl-item:last-child { border-bottom: 0; }
.jv-tl-icon {
  width: 24px; height: 24px; border-radius: 4px; background: #4bc076; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.jv-tl-icon svg { width: 13px; height: 13px; fill: #fff; }
.jv-tl-subject { font-size: 13px; font-weight: 600; }
.jv-tl-meta { font-size: 12px; color: var(--jv-text-muted); margin-top: 1px; }
.jv-tl-body { font-size: 12px; color: #444; margin-top: 4px; }
.jv-empty { font-size: 13px; color: var(--jv-text-muted); padding: 18px 0; text-align: center; }

/* ---- loading spinner ---------------------------------------------------------------------- */
/* The ring orbits. SLDS's own dotsBounce only scales the dots in place, which at spinner size
 * reads as a faint pulse rather than motion -- so the whole ring turns on a WRAPPER, leaving
 * .slds-spinner's own translate(-50%,-50%) rotate(90deg) centring transform untouched. Animating
 * the spinner element itself would drag it off centre. */
.jv-spin-orbit {
  position: relative;
  width: 64px; height: 64px;
  animation: jv-spin 1.6s linear infinite;
}
@keyframes jv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Anyone who has asked the OS for less motion gets the ring without the orbit -- the dots still
 * bounce, so the loading state is never invisible, it is just calm. */
@media (prefers-reduced-motion: reduce) {
  .jv-spin-orbit { animation: none; }
}

.jv-filter-note {
  font-size: 12px; color: var(--jv-text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 4px;
}
.jv-linkbtn { background: none; border: 0; color: var(--jv-link); font-size: 12px; cursor: pointer; padding: 0; }
.jv-linkbtn:hover { text-decoration: underline; }