/* ═════════════════════════════════════════════════════════════════════════════
   js/polish.css — WIP-UI-POLISH-01
   Hover depth + visual hierarchy polish pass across the entire CRM.
   Lift target: spartan-job-detail-redesign-v2.html (mockup 2026-05-21).
   STRICTLY ADDITIVE — augments existing classes; never overrides their
   intent. Loads AFTER styles.css + portal-theme.css + spartan-tokens.css
   so the hover rules win cleanly.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --shadow-rest: 0 1px 2px rgba(10,10,10,.03), 0 1px 1px rgba(10,10,10,.02);
  --shadow-hover: 0 1px 2px rgba(10,10,10,.04), 0 12px 28px -12px rgba(10,10,10,.18);
  --shadow-lift: 0 2px 4px rgba(10,10,10,.04), 0 20px 40px -16px rgba(10,10,10,.22);
  --shadow-red-glow: 0 0 0 4px rgba(196,18,48,.10), 0 8px 24px -8px rgba(196,18,48,.30);
  --shadow-ink-glow: 0 0 0 4px rgba(10,10,10,.06), 0 8px 24px -8px rgba(10,10,10,.30);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: 180ms var(--ease);
  --red-light: #E03C58;
  --pill-inner-info: inset 0 0 0 1px rgba(29,78,216,.15);
  --pill-inner-warn: inset 0 0 0 1px rgba(146,64,14,.18);
  --pill-inner-ok:   inset 0 0 0 1px rgba(21,128,61,.18);
  --pill-inner-red:  inset 0 0 0 1px rgba(196,18,48,.18);
}

/* GLOBAL CARD LIFT — Polish Rule 1
   Applies to existing card-shaped containers across the CRM. Augments
   any existing styling; the transition + resting shadow is unconditional,
   the lift only on :hover. */
.card,
.kpi,
.hero,
.peek,
.rcard,
.kcard,
.section-card,
.tbl-wrap {
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card:hover,
.kpi:hover,
.hero:hover,
.peek:hover,
.rcard:hover,
.kcard:hover,
.section-card:hover,
.tbl-wrap:hover {
  border-color: var(--s300, #D6D3D1);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Job-detail refresh's own jdr-* card variants */
.jdr-hero,
.jdr-peek,
.jdr-rcard,
.jdr-comms {
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.jdr-hero:hover,
.jdr-peek:hover,
.jdr-rcard:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--s300, #D6D3D1);
}
.jdr-comms:hover { box-shadow: var(--shadow-hover); }

/* PRIMARY BUTTONS — Polish Rule 2 */
.btn-r {
  box-shadow: 0 1px 2px rgba(196,18,48,.2), 0 4px 12px -4px rgba(196,18,48,.4);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
}
.btn-r:hover {
  box-shadow: 0 2px 4px rgba(196,18,48,.25), 0 12px 24px -6px rgba(196,18,48,.5);
  transform: translateY(-1px);
}
.btn-r:active { transform: translateY(0); }

.btn-d {
  box-shadow: 0 1px 2px rgba(10,10,10,.2), 0 4px 12px -4px rgba(10,10,10,.4);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
}
.btn-d:hover {
  box-shadow: 0 2px 4px rgba(10,10,10,.25), 0 12px 24px -6px rgba(10,10,10,.5);
  transform: translateY(-1px);
}
.btn-d:active { transform: translateY(0); }

/* SECONDARY BUTTONS — Polish Rule 3 */
.btn-w {
  box-shadow: var(--shadow-rest);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
}
.btn-w:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* SIDEBAR ITEMS */
.sb-item { transition: color var(--t), background var(--t), transform var(--t); }
.sb-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}
.sb-item.on::before { box-shadow: 0 0 12px rgba(196,18,48,.7); }

/* TAB BAR */
.tab, .jdr-tab { transition: color var(--t); }
.tab.on::after,
.jdr-tab.jdr-on::after { box-shadow: 0 -2px 8px rgba(196,18,48,.4); }
.tab-count, .jdr-tab-count { transition: background var(--t), color var(--t); }

/* STATUS PILLS — Polish Rule 1 (inner-stroke depth + dot glow) */
.jdr-jh-status-pill { box-shadow: var(--pill-inner-info); }
.jdr-jh-status-pill .jdr-dot { box-shadow: 0 0 8px rgba(29,78,216,.5); }
.jdr-jh-status-pill.jdr-warn { box-shadow: var(--pill-inner-warn); }
.jdr-jh-status-pill.jdr-warn .jdr-dot { box-shadow: 0 0 8px rgba(146,64,14,.5); }

/* Hero panel brand bar — red gradient + glow */
.jdr-hero-bar {
  background: linear-gradient(90deg, var(--red, #C41230), var(--red-light));
  box-shadow: 0 0 12px rgba(196,18,48,.4);
}

/* ACTIVE PHASE PULSE — Polish Rule 4 (single focal pulse) */
@keyframes spartan-polish-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.jdr-phase.jdr-now .jdr-phase-num {
  box-shadow: var(--shadow-red-glow);
}
.jdr-hero-eyebrow-row .jdr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jdr-hero-eyebrow-row .jdr-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red, #C41230);
  box-shadow: 0 0 8px rgba(196,18,48,.6);
  animation: spartan-polish-pulse 2s ease-in-out infinite;
}

/* STEPS — Polish Rule 5 (sub-stage horizontal track) */
.steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 -2px;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  transition: background var(--t);
}
.step:hover { background: var(--s50, #FAFAF9); }
.step-line {
  position: absolute;
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
  top: 30px;
  height: 2px;
  background: var(--s200, #E7E5E4);
  z-index: 0;
  transition: background var(--t);
}
.step:first-child .step-line { display: none; }
.step.done .step-line { background: var(--ink, #0A0A0A); }
.step.now .step-line { background: linear-gradient(90deg, var(--ink, #0A0A0A), var(--red, #C41230)); }
.step-bub {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--s200, #E7E5E4);
  color: var(--s400, #A8A29E);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.step.done .step-bub {
  background: var(--ink, #0A0A0A);
  border-color: var(--ink, #0A0A0A);
  color: #fff;
  box-shadow: 0 2px 6px rgba(10,10,10,.25);
}
.step.now .step-bub {
  background: var(--red, #C41230);
  border-color: var(--red, #C41230);
  color: #fff;
  box-shadow: var(--shadow-red-glow);
  transform: scale(1.1);
}
.step:hover .step-bub { transform: scale(1.06); }
.step.now:hover .step-bub { transform: scale(1.16); }
.step-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--s500, #78716C);
  margin-top: 10px;
  letter-spacing: -0.005em;
  transition: color var(--t);
}
.step.done .step-label { color: var(--ink, #0A0A0A); }
.step.now .step-label  { color: var(--red, #C41230); }
.step:hover .step-label { color: var(--ink, #0A0A0A); }
.step-status {
  font-size: 10px;
  font-weight: 600;
  color: var(--s400, #A8A29E);
  margin-top: 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.step.done .step-status { color: var(--ok-fg, #15803D); }
.step.now .step-status  { color: var(--red, #C41230); font-weight: 700; }

/* EMPTY STATES — Polish Rule 4 (icon-tile pattern) */
.empty-card {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 16px;
  box-shadow: var(--shadow-rest);
}
.empty-ico-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--s100, #F5F5F4);
  color: var(--s500, #78716C);
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.05);
}
.empty-ico-tile.warn {
  background: var(--warn-bg, #FEF3C7);
  color: var(--warn-fg, #92400E);
  box-shadow: inset 0 0 0 1px rgba(146,64,14,.18);
}
.empty-ico-tile.info {
  background: var(--info-bg, #DBEAFE);
  color: var(--info-fg, #1D4ED8);
  box-shadow: inset 0 0 0 1px rgba(29,78,216,.15);
}
.empty-ico-tile.ok {
  background: var(--ok-bg, #DCFCE7);
  color: var(--ok-fg, #15803D);
  box-shadow: inset 0 0 0 1px rgba(21,128,61,.18);
}
.empty-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.015em;
}
.empty-desc {
  font-size: 13px;
  color: var(--s500, #78716C);
  margin-top: 6px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* STATUS SPILL ROW — used on Installation/Service tabs */
.spill-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.spill {
  padding: 14px 16px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--s600, #57534E);
  letter-spacing: 0.02em;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.spill:hover {
  background: #fff;
  border-color: var(--s300, #D6D3D1);
  box-shadow: var(--shadow-rest);
}
.spill .ico { color: var(--s400, #A8A29E); }
.spill.warn {
  background: var(--warn-bg, #FEF3C7);
  border-color: rgba(146,64,14,.18);
  color: var(--warn-fg, #92400E);
}
.spill.warn .ico { color: var(--warn-fg, #92400E); }
.spill.ok {
  background: var(--ok-bg, #DCFCE7);
  border-color: rgba(21,128,61,.18);
  color: var(--ok-fg, #15803D);
}
.spill.ok .ico { color: var(--ok-fg, #15803D); }

/* NUMERIC EMPHASIS — Polish Rule 2 helper */
.num-xl, .num-lg, .num-md {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  color: var(--ink, #0A0A0A);
  line-height: 1;
}
.num-xl { font-size: 36px; font-weight: 800; }
.num-lg { font-size: 24px; font-weight: 800; }
.num-md { font-size: 18px; font-weight: 800; }

/* ICON SCALE ON PARENT HOVER — Polish Rule 5 */
.btn:hover .ico,
.qb-slot:hover .ico,
.jdr-comm-item:hover .jdr-comm-ico,
.jdr-act:hover .jdr-act-ico,
.peek:hover .ico,
.kpi:hover .ico {
  transform: scale(1.04);
  transition: transform var(--t);
}