/* Grid inline edit - Phase 6 visual affordances + Tier-2 spreadsheet UX */
.gie-cell-editable {
  cursor: pointer;
  position: relative;
  transition: background .12s ease;
  outline: none;
}
.gie-cell-editable:hover {
  background: #FEF3C7;
  box-shadow: inset 0 0 0 1px #D97706;
}
.gie-cell-editable:hover::after {
  content: '✎';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #D97706;
  opacity: 0.7;
}
/* Keyboard-focused editable cell: clear visual ring without the hover icon */
.gie-cell-editable:focus {
  background: #FFFBEB;
  box-shadow: inset 0 0 0 2px #2563EB;
  z-index: 4;
}
.gie-cell-editable:focus::after { content: none; }

.gie-cell-editing {
  background: #FFFBEB !important;
  box-shadow: inset 0 0 0 2px #D97706 !important;
  padding: 2px !important;
}
.gie-cell-editing::after { content: none !important; }
.gie-cell-flash-good {
  animation: gieFlashGood .6s ease;
}
.gie-cell-flash-bad {
  animation: gieFlashBad 1.2s ease;
}
@keyframes gieFlashGood {
  0%   { background: #D1FAE5; }
  100% { background: transparent; }
}
@keyframes gieFlashBad {
  0%, 30% { background: #FEE2E2; }
  100%    { background: transparent; }
}
.gie-input {
  width: 100%;
  border: 0;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: #111827;
  outline: none;
}
.gie-input-select { padding: 2px 4px; }
.gie-input-number { text-align: right; }
.gie-empty { color: #9CA3AF; }
.gie-pending {
  margin-left: 4px;
  color: #D97706;
  animation: giePulse .8s ease infinite;
}
@keyframes giePulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1.0; }
}

/* Toast notifications */
.gie-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111827;
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
  max-width: 360px;
  transition: opacity .3s ease, transform .3s ease;
}
.gie-toast-error  { background: #DC2626; }
.gie-toast-info   { background: #1E3A8A; }
.gie-toast-fade   { opacity: 0; transform: translateY(8px); }

/* ── Frozen first column ───────────────────────────────────────────────── */
/* Code column stays pinned while horizontal scroll moves the rest. */
#grid-view table.gie-table-frozen { border-collapse: separate; border-spacing: 0; }
#grid-view table.gie-table-frozen thead th.gie-frozen-col,
#grid-view table.gie-table-frozen tbody td.gie-frozen-col {
  position: sticky;
  left: 0;
  z-index: 3;
  /* Subtle shadow on the right edge so users see the freeze boundary */
  box-shadow: 2px 0 0 -1px rgba(0, 0, 0, 0.08), 4px 0 6px -2px rgba(0, 0, 0, 0.04);
}
#grid-view table.gie-table-frozen thead th.gie-frozen-col {
  z-index: 5; /* sits above frozen body cells AND the sticky header */
  background: var(--black, #000);
}
#grid-view table.gie-table-frozen tbody td.gie-frozen-col {
  background: #FFFFFF;
}
#grid-view table.gie-table-frozen tbody tr:hover td.gie-frozen-col,
#grid-view table.gie-table-frozen tbody tr.sel-row td.gie-frozen-col {
  background: var(--yellow-bg, #FEF3C7);
}
#grid-view table.gie-table-frozen tbody tr.gie-row-vacant td.gie-frozen-col {
  background: #FEF6E7; /* vacant tint applied to frozen cell too */
}

/* ── Conditional formatting ────────────────────────────────────────────── */
/* Vacant row: subtle warm tint communicates "unfilled seat" */
#grid-view tbody tr.gie-row-vacant {
  background: #FEF6E7;
}
#grid-view tbody tr.gie-row-vacant:hover { background: #FDE9C2 !important; }

/* Span column tinting (over benchmark = red, under = amber, ok = green) */
#grid-view tbody td.gie-span-over {
  background: linear-gradient(90deg, transparent 0%, #FEE2E2 30%);
  color: #B91C1C;
  font-weight: 700;
}
#grid-view tbody td.gie-span-under {
  background: linear-gradient(90deg, transparent 0%, #FEF3C7 30%);
  color: #92400E;
  font-weight: 700;
}
#grid-view tbody td.gie-span-ok {
  color: #059669;
  font-weight: 600;
}
#grid-view tbody td.gie-span-zero {
  color: #9CA3AF;
}

/* Layer outliers (deeper than typical) */
#grid-view tbody td.gie-layer-deep {
  color: #7C3AED;
  font-weight: 700;
}

/* High-salary marker - small dot, doesn't fight the value */
#grid-view tbody td.gie-salary-high {
  font-weight: 700;
  color: #047857;
  position: relative;
}
#grid-view tbody td.gie-salary-high::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10B981;
}

/* ── IN-10: AI Agent seats - tagged, tinted, read-only spreadsheet rows ───── */
#grid-view tbody tr.gie-agent-row,
#grid-view tbody tr.gie-agent-row.gie-row-vacant {
  background: var(--yellow-bg, #FFF1E8);
}
#grid-view tbody tr.gie-agent-row:hover { background: #FFE6D6 !important; }
#grid-view tbody tr.gie-agent-row td:first-child {
  box-shadow: inset 3px 0 0 var(--orange, #FF5A00);
}
#grid-view table.gie-table-frozen tbody tr.gie-agent-row td.gie-frozen-col {
  background: var(--yellow-bg, #FFF1E8);
  box-shadow: inset 3px 0 0 var(--orange, #FF5A00), 2px 0 0 -1px rgba(0,0,0,0.08);
}
.gie-agent-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orange-text, #D14900);
  background: #fff;
  border: 1px solid var(--orange, #FF5A00);
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 6px;
  vertical-align: 1px;
}
.gie-run-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; color: #9CA3AF; }
.gie-via { color: #6B7280; font-style: italic; }

/* Segmented headcount-vs-capacity tile above the grid (D3) */
.gie-seg-tile {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 0 0 10px;
  padding: 2px 4px;
  font-size: 12px;
  color: #5B6470;
}
.gie-seg-tile b { font-size: 16px; font-weight: 700; color: #2B2F36; }
.gie-seg-a, .gie-seg-a b { color: var(--orange-text, #D14900); }
.gie-agent-plus { color: var(--orange-text, #D14900); font-size: 11px; font-weight: 700; margin-left: 3px; }