/* Grid view */

.grid-view {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fff;
  outline: none;
}
.grid-scroll {
  height: 100%;
  overflow: auto;
  position: relative;
}
.grid-inner { min-width: fit-content; padding-bottom: 4px; }

.grid-row { display: flex; position: relative; }

/* ---------- cells ---------- */
.cell {
  flex: 0 0 auto;
  border-right: 1px solid rgba(0,0,0,0.045);
  background: var(--cellbg, #fff);
  position: relative;
}

/* header row */
.grid-header-row {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 32px;
}
.cell.head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  background: #f8f8f8;
  border-bottom: 1px solid #d9d9dc;
  border-right: 1px solid #e3e3e6;
  color: #4f4f52;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  transition: background 90ms ease;
}
.cell.head:hover { background: #efeff1; }
.cell.head .head-icon { display: inline-flex; color: #8f8f94; flex: 0 0 auto; }
.cell.head .head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.head.coloring-by .head-icon { color: var(--blue); }
.cell.head .sort-ind { display: inline-flex; color: #2d7ff9; margin-left: auto; flex: 0 0 auto; }
.cell.head.dragging { opacity: 0.35; }

.cell.head.add-field {
  justify-content: center;
  width: 36px;
  color: var(--t3);
  flex: 0 0 36px;
}
.cell.head.add-field:hover { color: var(--blue); background: #eef4ff; }

.col-resizer {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  z-index: 3;
}
.col-resizer::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 90ms ease;
}
.col-resizer:hover::after, .col-resizer._active::after { background: var(--blue); }

/* row numbers */
.cell.rownum {
  width: var(--rownum-w);
  flex: 0 0 var(--rownum-w);
  position: sticky;
  left: 0;
  z-index: 20;
  background: #f8f8f8;
  border-right: 1px solid #d9d9dc;
  border-bottom: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--t3);
  font-size: 11.5px;
  user-select: none;
}
.grid-header-row .cell.rownum {
  z-index: 40;
  border-bottom: 1px solid #d9d9dc;
  color: #a2a2a6;
}
.corner-grip { opacity: 0.6; }
.rownum-num, .rownum-grip, .rownum-check, .rownum-plus { display: none; }
.grid-row.data-row .cell.rownum:hover, .grid-row.data-row.row-selected .cell.rownum, .grid-row.data-row.row-checked .cell.rownum { cursor: default; }
.grid-row.data-row .cell.rownum .rownum-num { display: inline; }
.grid-row.data-row .cell.rownum:hover .rownum-num { display: none; }
.grid-row.data-row .cell.rownum .rownum-grip { display: none; cursor: grab; padding: 4px 2px; border-radius: 4px; }
.grid-row.data-row .cell.rownum:hover .rownum-grip { display: inline-flex; color: var(--t2); }
.grid-row.data-row .cell.rownum .rownum-check { display: none; }
.grid-row.data-row.row-checked .cell.rownum .rownum-num { display: none; }
.grid-row.data-row.row-checked .cell.rownum .rownum-check { display: inline-flex; }
.grid-row.data-row.row-checked .cell.rownum .rownum-grip { display: none; }

/* data cells */
.cell.data { border-bottom: 1px solid #ececec; }
.cell-content {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding: 0 8px;
  font-size: 13px;
  overflow: hidden;
}
.grid-view[data-lines="1"] .cell-content > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.grid-view:not([data-lines="1"]) .cell-content {
  align-items: flex-start;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  overflow: hidden;
}
.grid-view:not([data-lines="1"]) .cell-content > * { overflow: hidden; display: block; }

.grid-view[data-lines="2"] .cell-content > * { -webkit-line-clamp: 2; }
.grid-view[data-lines="3"] .cell-content > * { -webkit-line-clamp: 3; }
.grid-view[data-lines="5"] .cell-content > * { -webkit-line-clamp: 5; }
.grid-view:not([data-lines="1"]) .cell-content .longtext-display,
.grid-view:not([data-lines="1"]) .cell-content .chips {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.grid-view:not([data-lines="1"]) .cell-content > span:not(.chips):not(.longtext-display) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.cell.center .cell-content { justify-content: center; padding: 0; }

/* primary column */
.cell.data.primary { position: sticky; left: var(--rownum-w); z-index: 10; font-weight: 500; }
.grid-header-row .cell.head.primary { position: sticky; left: var(--rownum-w); z-index: 31; }
.grid-header-row .cell.head.primary .head-icon { color: #7a7a7f; }

/* selection */
.cell.data::after { content: none; }
.cell.data.selected { z-index: 6; }
.cell.data.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--blue);
  background: rgba(255,255,255,0.42);
  pointer-events: none;
}
.cell.data.in-range::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--range-fill);
  pointer-events: none;
  box-sizing: border-box;
}
.cell.data.in-range.edge-t::after { border-top: 1.5px solid rgba(45, 127, 249, 0.8); }
.cell.data.in-range.edge-b::after { border-bottom: 1.5px solid rgba(45, 127, 249, 0.8); }
.cell.data.in-range.edge-l::after { border-left: 1.5px solid rgba(45, 127, 249, 0.8); }
.cell.data.in-range.edge-r::after { border-right: 1.5px solid rgba(45, 127, 249, 0.8); }
.grid-row.data-row.row-selected .cell.data:not(.selected)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(45,127,249,0.09);
  pointer-events: none;
}
.grid-row.data-row.row-checked .cell.data { background: #edf3ff; }
.grid-row.data-row:hover .cell.data { background: var(--cellbg-hover, var(--row-hover)); }

/* ---------- field type displays ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; max-width: 100%; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.link-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  background: #f0f0f2;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-chip a { color: inherit; text-decoration: none; }

.display-check { cursor: pointer; }
.rating-stars { display: inline-flex; gap: 1px; align-items: center; }
.rating-star { display: inline-flex; color: #d8d8dd; }
.rating-star.on { color: #f2b60b; }
.rating-star.big { cursor: pointer; }
.rating-star.big:hover { transform: scale(1.06); }

.cell-link { color: inherit; text-decoration: none; cursor: pointer; }
.cell-link:hover { color: var(--blue); text-decoration: underline; }

.longtext-display { white-space: pre-line; }
.clamp-1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted-empty { color: transparent; }

mark.hit { background: var(--search-hit); color: inherit; border-radius: 2px; }

/* ---------- group headers ---------- */
.group-header-row { height: 34px; }
.group-header {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  background: #fff;
  border-top: 1px solid #e3e3e6;
  border-bottom: 1px solid #e3e3e6;
  box-shadow: inset 4px 0 0 var(--group-color, #d9d9dc);
  cursor: pointer;
  user-select: none;
  min-width: fit-content;
}
.group-header:hover { background: #fafafa; }
.group-chev { display: inline-flex; color: var(--t3); }
.group-label { font-weight: 500; font-size: 12.5px; display: inline-flex; align-items: center; }
.group-count {
  font-size: 11.5px;
  color: var(--t3);
  background: #f0f0f2;
  border-radius: 9px;
  padding: 1px 8px;
}
.group-aggs { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.group-agg { font-size: 11.5px; color: var(--t2); display: inline-flex; gap: 4px; align-items: baseline; }
.group-agg-label { font-size: 10.5px; color: var(--t4); text-transform: uppercase; letter-spacing: 0.3px; }

/* ---------- footer ---------- */
.grid-footer {
  position: sticky;
  bottom: 0;
  z-index: 25;
  min-height: 32px;
  background: #fafafa;
  border-top: 1px solid #dcdce0;
  display: flex;
  align-items: stretch;
}
.footer-info {
  width: var(--rownum-w);
  flex: 0 0 var(--rownum-w);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--t3);
  border-right: 1px solid #e3e3e6;
  line-height: 1.35;
}
.footer-filtered { color: var(--blue); }
.footer-hidden { font-size: 11px; padding: 0; height: auto; }
.cell.foot {
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(0,0,0,0.03);
  background: #fafafa;
}
.foot-agg {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--t1);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.foot-agg:hover { background: #ededee; }
.foot-agg.muted { color: var(--t4); }
.foot-agg-sig { font-weight: 600; }
.foot-agg-label { font-size: 10.5px; color: var(--t4); text-transform: uppercase; letter-spacing: 0.3px; }
.foot-agg-val { font-weight: 500; }

/* ---------- new record row ---------- */
.new-record-row {
  height: 32px;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
}
.new-record-row .cell.rownum { color: var(--t3); display: flex; align-items: center; justify-content: center; }
.new-record-holder { flex: 1; display: flex; align-items: center; }
.new-record-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 5px;
  color: var(--t3);
  font-size: 12.5px;
  margin-left: 4px;
  transition: background 90ms ease, color 90ms ease;
}
.new-record-row:hover .new-record-label { background: #eef4ff; color: var(--blue); }

/* ---------- row expander ---------- */
.row-expander {
  position: absolute;
  display: none;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: var(--radius-s);
  color: var(--t2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  z-index: 22;
  cursor: pointer;
}
.row-expander:hover { color: var(--blue); border-color: var(--blue); }

/* ---------- editing ---------- */
.cell.editing { overflow: visible; }
.cell-input {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 2px solid var(--blue);
  outline: none;
  padding: 0 7px;
  font-family: var(--font);
  font-size: 13px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(45,127,249,0.25);
}
.cell-input.invalid { border-color: #d02b20; animation: shake 0.3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ---------- empty states ---------- */
.grid-empty {
  padding: 70px 20px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ececec;
  background: linear-gradient(180deg, #fff, #fbfbfc);
}
.grid-empty-inner { text-align: center; max-width: 380px; }
.empty-icon { color: #cfD2d8; margin-bottom: 12px; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.empty-sub { font-size: 12.5px; color: var(--t3); margin-bottom: 14px; }
.empty-actions { display: flex; gap: 8px; justify-content: center; }

/* ---------- drag artifacts ---------- */
.col-drag-ghost {
  position: fixed;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  font-size: 12.5px;
  font-weight: 500;
  pointer-events: none;
}
.col-drop-indicator {
  position: fixed;
  width: 3px;
  background: var(--blue);
  border-radius: 2px;
  z-index: 2999;
  pointer-events: none;
}
.row-drop-indicator {
  position: fixed;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  z-index: 2999;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(45,127,249,0.25);
}
body.dragging-cursor, body.dragging-cursor * { cursor: grabbing !important; }

/* view-level prompt (kanban/calendar pick field, gallery empty) */
.view-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff, #fbfbfc);
}
.view-prompt-inner { text-align: center; }
.view-prompt-inner .empty-actions { gap: 8px; align-items: center; }