/* IGMS Automation — design tokens (light mode) */

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

:root {
  /* surfaces */
  --bg:          #FAFBFC;
  --bg-1:        #F5F6F8;
  --bg-2:        #FFFFFF;
  --bg-3:        #F0F2F5;
  --bg-4:        #E5E8EE;
  --surface-hi:  #ECEEF3;

  /* borders */
  --line:        rgba(0,0,0,0.07);
  --line-2:      rgba(0,0,0,0.11);
  --line-3:      rgba(0,0,0,0.17);

  /* text */
  --tx:          #0F1117;
  --tx-1:        #2B3040;
  --tx-2:        #616878;
  --tx-3:        #9099A6;
  --tx-4:        #B8BEC8;

  /* accents */
  --vio:         #6B4FEE;
  --vio-hi:      #5237D4;
  --vio-lo:      rgba(107,79,238,0.10);
  --grn:         #1A9E63;
  --grn-lo:      rgba(26,158,99,0.10);
  --amb:         #C47D00;
  --amb-lo:      rgba(196,125,0,0.10);
  --red:         #D63535;
  --red-lo:      rgba(214,53,53,0.10);
  --cyan:        #0090BF;

  /* channel colors */
  --airbnb:      #FF385C;
  --booking:     #003B95;
  --direct:      #3FD18E;

  /* typography */
  --font-sans:   'Geist', ui-sans-serif, -apple-system, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono:   'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* density (overridable) */
  --row-h:       40px;
  --pad-x:       14px;
}

html, body, #root {
  background: var(--bg-1);
  color: var(--tx);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

button { font: inherit; color: inherit; }

/* ─── core elements ─── */

.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }
.up   { text-transform: uppercase; letter-spacing: 0.06em; }

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--tx-2);
}

/* scrollbar */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }

/* card */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* row separators */
.row-sep > * + * { border-top: 1px solid var(--line); }

/* pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--tx-1);
  white-space: nowrap;
  line-height: 1.4;
}
.pill.vio  { background: rgba(107,79,238,0.08); border-color: rgba(107,79,238,0.25); color: var(--vio); }
.pill.grn  { background: rgba(26,158,99,0.08);  border-color: rgba(26,158,99,0.25);  color: var(--grn); }
.pill.amb  { background: rgba(196,125,0,0.08);  border-color: rgba(196,125,0,0.25);  color: var(--amb); }
.pill.red  { background: rgba(214,53,53,0.08);  border-color: rgba(214,53,53,0.25);  color: var(--red); }
.pill.ghost { background: transparent; }

/* dot */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* divider */
.div { height: 1px; background: var(--line); margin: 0; border: 0; }

/* buttons */
.btn {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--tx);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1;
  letter-spacing: -0.005em;
}
.btn:hover { background: var(--bg-4); }
.btn.primary {
  background: var(--vio);
  border-color: var(--vio);
  color: #fff;
}
.btn.primary:hover { background: var(--vio-hi); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tx-2);
}
.btn.ghost:hover { color: var(--tx); background: var(--bg-2); }

/* link-style */
.link { color: var(--tx-2); cursor: pointer; }
.link:hover { color: var(--tx); }

/* ─── App-frame layouts ─── */
.app-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  min-height: 0;
}

.app-topbar {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}

.app-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.app-bottomnav {
  flex-shrink: 0;
  display: flex;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 6px 8px 8px;
  gap: 4px;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px 4px;
  border-radius: 8px;
  color: var(--tx-3);
  cursor: pointer;
  position: relative;
  background: transparent;
  border: 0;
  appearance: none;
}
.nav-item.active { color: var(--tx); }
.nav-item.active::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 30%;
  right: 30%;
  height: 2px;
  background: var(--vio);
  border-radius: 0 0 2px 2px;
}
.nav-item .lbl {
  font-size: 10px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad-x) 8px;
  color: var(--tx-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-fab {
  position: absolute;
  right: 14px;
  bottom: 80px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vio);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(107,79,238,0.30),
              0 0 0 1px rgba(255,255,255,0.20) inset;
}

/* density modifier */
.density-compact { --row-h: 36px; --pad-x: 12px; }
.density-cozy    { --row-h: 44px; --pad-x: 14px; }

/* tonal scale helper for charts */
.tone-vio { color: var(--vio-hi); }
.tone-grn { color: var(--grn); }
.tone-amb { color: var(--amb); }
.tone-red { color: var(--red); }
.tone-cy  { color: var(--cyan); }