/* ── Hagrid Grid (ig-grid) ────────────────────────────────── */

.ig-grid {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', 'Consolas', monospace;
  table-layout: fixed;
}

.ig-grid thead th {
  position: relative;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.ig-grid tbody td {
  padding: 0.3rem 0.6rem;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Dark theme ────────────────────────────────────────────── */

.ig-grid--dark thead th {
  color: var(--text-secondary, #8a9bb5);
  border-bottom: 1px solid var(--border-color, #1e3a5f);
}

.ig-grid--dark tbody td {
  color: var(--text-primary, #e8f0fe);
  border-bottom: 1px solid var(--border-color, #1e3a5f);
}

.ig-grid--dark tbody tr:hover td {
  background: rgba(245, 166, 35, 0.06);
}

/* ── Light theme ───────────────────────────────────────────── */

.ig-grid--light thead th {
  color: var(--text-secondary, #4a5568);
  border-bottom: 1px solid var(--border-color, #c8d0e0);
}

.ig-grid--light tbody td {
  color: var(--text-primary, #1a2540);
  border-bottom: 1px solid var(--border-color, #c8d0e0);
}

.ig-grid--light tbody tr:hover td {
  background: rgba(196, 125, 10, 0.06);
}

/* ── Sticky header ─────────────────────────────────────────── */

.ig-grid--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ig-grid--sticky-header.ig-grid--dark thead th {
  background: var(--bg-primary, #0a1628);
}

.ig-grid--sticky-header.ig-grid--light thead th {
  background: var(--bg-primary, #ffffff);
}

/* ── Alternating row shading (zebra) ───────────────────────── */
/* Even rows are slightly lighter than odd rows. */

.ig-grid--zebra.ig-grid--dark tbody tr:not(.ig-group-header):not(.ig-footer-row):nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

.ig-grid--zebra.ig-grid--light tbody tr:not(.ig-group-header):not(.ig-footer-row):nth-child(odd) td {
  background: rgba(0, 0, 0, 0.03);
}

/* ── Sort indicator ────────────────────────────────────────── */

.ig-sort-icon {
  font-size: 0.6rem;
  margin-left: 0.25rem;
  opacity: 0.7;
}

/* ── Resize handle ─────────────────────────────────────────── */

.ig-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
}

.ig-resize-handle:hover {
  background: var(--primary-color, #f5a623);
  opacity: 0.5;
}

/* ── Drag feedback ─────────────────────────────────────────── */

.ig-grid thead th[draggable="true"] {
  cursor: grab;
}

.ig-grid thead th[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.7;
}

/* ── Group support ─────────────────────────────────────────── */

.ig-group-header {
  cursor: pointer;
  user-select: none;
}

.ig-group-header td {
  font-weight: 600;
}

/* Dark theme group rows */
.ig-grid--dark .ig-group-level-0 td {
  background: rgba(245, 166, 35, 0.12);
  color: var(--text-primary, #e8f0fe);
  border-top: 2px solid var(--border-color, #1e3a5f);
}

.ig-grid--dark .ig-group-level-0:hover td {
  background: rgba(245, 166, 35, 0.18);
}

.ig-grid--dark .ig-group-level-1 td {
  background: rgba(245, 166, 35, 0.06);
  color: var(--text-secondary, #8a9bb5);
  border-top: 1px solid var(--border-color, #1e3a5f);
}

.ig-grid--dark .ig-group-level-1:hover td {
  background: rgba(245, 166, 35, 0.10);
}

.ig-grid--dark .ig-footer-row td {
  background: rgba(245, 166, 35, 0.18);
  color: var(--text-primary, #e8f0fe);
  border-top: 3px double var(--border-color, #1e3a5f);
  font-weight: 700;
}

.ig-grid--dark .ig-data-row td {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Light theme group rows */
.ig-grid--light .ig-group-level-0 td {
  background: #e8e8e8;
  color: #333;
  border-top: 2px solid #ccc;
}

.ig-grid--light .ig-group-level-0:hover td {
  background: #ddd;
}

.ig-grid--light .ig-group-level-1 td {
  background: #f4f4f4;
  color: #555;
  border-top: 1px solid #ddd;
}

.ig-grid--light .ig-group-level-1:hover td {
  background: #ececec;
}

.ig-grid--light .ig-footer-row td {
  background: #d0d0d0;
  color: #111;
  border-top: 3px double #999;
  font-weight: 700;
}

.ig-grid--light .ig-data-row td {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ── Group toggle icon ─────────────────────────────────────── */

.ig-group-toggle {
  display: inline-block;
  width: 12px;
  font-size: 0.65em;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Utility classes ──────────────────────────────────────── */

.ig-grid .symbol-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.ig-grid .symbol-link:hover {
  text-decoration: underline;
  color: #764ba2;
}

.ig-grid .qty-link {
  color: #667eea;
  cursor: pointer;
  font-weight: 500;
}

.ig-grid .qty-link:hover {
  text-decoration: underline;
  color: #764ba2;
}