/* IKIGARE Lead Insight™ — design tokens (premium SaaS, light theme, single amber accent) */
:root{
  /* canvas + surface */
  --canvas:#FAF9F5;              /* page background, warm off-white */
  --canvas-glow-a: rgba(232,163,61,0.10);   /* soft amber aurora, decorative only */
  --canvas-glow-b: rgba(58,78,110,0.06);    /* soft cool counterpoint, decorative only */
  --surface: rgba(255,255,255,0.66);        /* glass card base */
  --surface-solid:#FFFFFF;

  /* ink */
  --ink:#1C1A17;                 /* primary text, warm near-black */
  --ink-muted:#6B6459;           /* secondary text */
  --ink-faint:#9A9388;           /* tertiary / placeholder text */
  --line: rgba(28,26,23,0.08);   /* hairline separators */

  /* the ONE accent — IKIGARE signature amber/gold, used only for CTAs + hero KPI + focus */
  --accent:#E8A33D;
  --accent-deep:#C97F1E;         /* hover/active state of accent */
  --accent-ink:#3A2A0F;          /* text-on-accent, for AA contrast on filled buttons */
  --accent-text:#7A4E12;         /* WCAG-safe darker amber for text-on-surface use (hero KPI number) */

  /* funnel-stage semantic colors — quiet, not competing with --accent */
  --stage-tofu:#7B8CA6;          /* cool slate blue — background/decorative use */
  --stage-mofu:#B98F4A;          /* muted gold, one step below accent — background/decorative use */
  --stage-bofu:#4B7A5E;          /* deep green, "closed/won" association — background/decorative use */
  --diamante:#8E6FD1;            /* violet, reserved only for the diamond sub-badge — background/decorative use */

  /* darker "-text" variants of the stage colors, for text sitting on the stage tint backgrounds (WCAG AA) */
  --stage-tofu-text:#4C5A72;
  --stage-mofu-text:#7A5A22;
  --stage-bofu-text:#2F5A40;
  --diamante-text:#634A9C;
  --status-danger-text:#9C3D28; /* darker brick-red for text on the reconnecting-status tint (distinct from --error, which is used on plain canvas) */

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --radius-card: 20px;
  --radius-control: 10px;
  --shadow-card: 0 8px 30px rgba(28,26,23,0.07), 0 1px 2px rgba(28,26,23,0.04);
  --shadow-card-hover: 0 14px 40px rgba(28,26,23,0.10), 0 2px 4px rgba(28,26,23,0.05);
  --ease: cubic-bezier(0.4,0,0.2,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* focus-visible — WCAG, every interactive element, never remove */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- signature aurora background ---------- */
.aurora{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(700px 500px at 12% 8%, var(--canvas-glow-a), transparent 60%),
    radial-gradient(700px 500px at 88% 92%, var(--canvas-glow-b), transparent 60%);
  filter: blur(60px);
}

/* ---------- shared card look ---------- */
.card,
.login-card{
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ---------- login page ---------- */
.login-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
}
.login-card{
  padding:36px 32px;
  width:100%;
  max-width:360px;
  text-align:center;
}
.login-card h1{
  font-size:22px;
  font-weight:800;
  margin:0 0 4px;
  color:var(--ink);
}
.subtitle{
  color:var(--ink-muted);
  font-size:13px;
  margin:0 0 28px;
}
.login-card label{
  display:block;
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:var(--ink-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:8px;
}
.login-card input{
  width:100%;
  padding:14px;
  font-size:22px;
  text-align:center;
  letter-spacing:0.5em;
  text-indent:0.5em; /* re-center the glyphs given the trailing letter-spacing */
  background:var(--surface-solid);
  border:1px solid var(--line);
  border-radius: var(--radius-control);
  color:var(--ink);
  margin-bottom:16px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.login-card input:focus-visible{
  border-color: var(--accent);
}
.login-card button{
  width:100%;
  padding:14px;
  background: var(--accent);
  color: var(--accent-ink);
  border:none;
  border-radius: var(--radius-control);
  font-size:15px;
  font-weight:700;
  font-family:var(--font-body);
  cursor:pointer;
  transition: background 150ms var(--ease), transform 150ms var(--ease);
}
.login-card button:hover{ background: var(--accent-deep); }
.login-card button:active{ transform: scale(0.98); }
.error{ color:#B5462F; font-size:13px; margin:12px 0 0; }

/* ---------- dashboard shell ---------- */
.dashboard-page{
  padding:32px;
  max-width:1200px;
  margin:0 auto;
}

#pageHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}
#pageHeader h1{
  font-size:20px;
  font-weight:800;
  margin:0;
  color:var(--ink);
}

.connection-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-muted);
}
.icon-wifi{ color: var(--stage-bofu-text); }
#connectionStatus{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  background: rgba(75,122,94,0.12);
  color: var(--stage-bofu-text);
}
#connectionStatus.status-reconnecting{
  background: rgba(181,70,47,0.12);
  color: var(--status-danger-text);
}
.connection-indicator:has(.status-reconnecting) .icon-wifi{ color: var(--status-danger-text); }

/* ---------- KPI cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:28px;
}
.card{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  overflow:hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.cards .card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.card[data-tooltip]{ cursor: help; }
.card[data-tooltip]:hover,
.card[data-tooltip]:focus-visible{ overflow: visible; }
.card[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(100% + 10px);
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--surface-solid);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  z-index: 5;
}
.card[data-tooltip]:hover::after,
.card[data-tooltip]:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}
.card-label{
  font-size:12px;
  font-weight:600;
  color:var(--ink-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  display:flex;
  align-items:center;
  gap:6px;
}
.card-label.dot-tofu::before,
.card-label.dot-mofu::before,
.card-label.dot-bofu::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  flex:none;
}
.card-label.dot-tofu::before{ background: var(--stage-tofu); }
.card-label.dot-mofu::before{ background: var(--stage-mofu); }
.card-label.dot-bofu::before{ background: var(--stage-bofu); }

.card-value{
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(28px,4vw,40px);
  color:var(--ink);
  line-height:1.1;
}
.card-value--hero{ color: var(--accent-text); }

.card-sub{
  align-self:flex-start;
  font-size:13px;
  font-weight:600;
  color:var(--diamante-text);
  background:rgba(142,111,209,0.12);
  border-radius:999px;
  padding:3px 10px;
}

/* ---------- table controls ---------- */
.table-controls{
  display:flex;
  gap:12px;
  margin-bottom:16px;
}
.input-wrap{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
}
.icon-search{
  position:absolute;
  left:14px;
  color:var(--ink-faint);
  pointer-events:none;
}
.table-controls input{
  width:100%;
  padding:11px 14px 11px 40px;
  background:var(--surface-solid);
  border:1px solid var(--line);
  border-radius: var(--radius-control);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  transition: border-color 150ms var(--ease);
}
.table-controls input::placeholder{ color:var(--ink-faint); }
.table-controls input:focus-visible{ border-color: var(--accent); }

.table-controls button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  border:none;
  border-radius: var(--radius-control);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  transition: background 150ms var(--ease), transform 150ms var(--ease);
}
.table-controls button:hover{ background: var(--accent-deep); }
.table-controls button:active{ transform: scale(0.98); }

/* ---------- table ---------- */
.table-scroll{
  overflow-x:auto;
  border-radius: var(--radius-card);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
th,td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
th{
  cursor:pointer;
  user-select:none;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-muted);
  white-space:nowrap;
}
th:hover{ color:var(--ink); }
.th-label{ vertical-align:middle; }
.sort-chevron{
  display:inline-block;
  vertical-align:middle;
  margin-left:4px;
  transition: transform 150ms var(--ease), color 150ms var(--ease);
  color:var(--ink-faint);
}
th.sort-active .sort-chevron{ color:var(--accent); }
th.sort-asc .sort-chevron{ transform: rotate(180deg); }

tbody tr{ transition: background 120ms var(--ease); }
tbody tr:hover{ background: rgba(28,26,23,0.02); cursor:pointer; }

tr.new-lead-flash{ animation: flash 1.8s ease; }
@keyframes flash{
  from{ background: rgba(232,163,61,0.18); }
  to{ background: transparent; }
}

.badge-tofu,.badge-mofu,.badge-bofu,.badge-unknown{
  display:inline-block;
  border-radius:999px;
  padding:3px 10px;
  font-size:12px;
  font-weight:600;
}
.badge-tofu{ background: rgba(123,140,166,0.14); color: var(--stage-tofu-text); }
.badge-mofu{ background: rgba(185,143,74,0.14); color: var(--stage-mofu-text); }
.badge-bofu{ background: rgba(75,122,94,0.14); color: var(--stage-bofu-text); }
.badge-unknown{ background: rgba(28,26,23,0.08); color: var(--ink-muted); }

/* ---------- skeleton loading ---------- */
.cards.is-loading .card-label,
.cards.is-loading .card-value,
.cards.is-loading .card-sub{
  visibility:hidden;
}
.cards.is-loading .card::after{
  content:'';
  position:absolute;
  inset:20px;
  border-radius:10px;
  background: linear-gradient(90deg, rgba(28,26,23,0.06) 25%, rgba(28,26,23,0.12) 37%, rgba(28,26,23,0.06) 63%);
  background-size:400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

tr.skeleton-row td{ padding:14px; }
tr.skeleton-row .skeleton-block{
  height:14px;
  border-radius:6px;
  width:70%;
  background: linear-gradient(90deg, rgba(28,26,23,0.06) 25%, rgba(28,26,23,0.12) 37%, rgba(28,26,23,0.06) 63%);
  background-size:400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}

/* ---------- modal ---------- */
.modal{
  position:fixed;
  inset:0;
  background:rgba(28,26,23,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:10;
}
.modal[hidden]{ display:none; }
.modal-content{
  background: var(--surface-solid);
  padding:28px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  max-width:440px;
  width:100%;
  position:relative;
}
.modal-close{
  position:absolute;
  top:14px;
  right:16px;
  background:none;
  border:none;
  color:var(--ink-muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:4px;
  border-radius:6px;
}
.modal-close:hover{ color:var(--ink); }
dl{ margin:0; }
dt{
  color:var(--ink-muted);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-top:14px;
}
dt:first-child{ margin-top:0; }
dd{ margin:4px 0 0; font-size:15px; color:var(--ink); }

/* ---------- toasts ---------- */
#toastContainer{
  position:fixed;
  bottom:24px;
  right:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:20;
}
.toast{
  background: var(--surface-solid);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow: var(--shadow-card-hover);
  padding:12px 18px;
  border-radius: var(--radius-control);
  font-weight:600;
  font-size:14px;
  border-left:3px solid var(--accent);
  animation: slidein 300ms var(--ease);
}
@keyframes slidein{
  from{ transform: translateX(40px); opacity:0; }
  to{ transform: translateX(0); opacity:1; }
}

/* ---------- TV mode ---------- */
body.tv-mode #pageHeader,
body.tv-mode .table-controls{ display:none; }
body.tv-mode .cards{ grid-template-columns:repeat(4,1fr); gap:20px; }
body.tv-mode .card{ padding:28px; }
body.tv-mode .card-value{ font-size:48px; font-weight:800; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .cards .card:hover{ transform:none; }
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .dashboard-page{ padding:16px; }
  .login-page{ padding:16px; }
  .table-controls{ flex-direction:column; }
}