/* CellView Styles */

/* Interaction states */
.cell.interaction-disabled {
  pointer-events: none !important;
}

.cell.interaction-enabled {
  pointer-events: auto !important;
}

/* Pencil mark position states */
.pencil-mark-position.interaction-disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.pencil-mark-position.interaction-enabled {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Display states for pencil marks */
.cell .pencil.hidden {
  display: none !important;
}

.cell .pencil.visible-grid {
  display: grid !important;
}

/* Value div display states */
.cell .value.hidden {
  display: none !important;
}

.cell .value.visible {
  display: block !important;
}

/* Cursor states */
.cell.cursor-text {
  cursor: text !important;
}

.cell.cursor-default {
  cursor: default !important;
}

/* Value div interaction states */
.cell .value.interaction-disabled {
  pointer-events: none !important;
}

.cell .value.interaction-enabled {
  pointer-events: auto !important;
}

/* Pencil div interaction states */
.cell .pencil.interaction-disabled {
  pointer-events: none !important;
}

.cell .pencil.interaction-enabled {
  pointer-events: auto !important;
}

/* Opacity states for pending answers */
.cell .value.pending-opacity {
  opacity: 0.6 !important;
}

.cell .value.normal-opacity {
  opacity: 1 !important;
}

/* Answer Circle Styles - Visual indicators for pencil mark answers */
.pencil-mark-position.answer-circle {
  border: 2px solid !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  font-size: 0.6em !important;
  line-height: 1 !important;
  font-weight: bold !important;
}

.pencil-mark-position.player1-circle {
  border-color: var(--player1-color) !important;
}

.pencil-mark-position.player2-circle {
  border-color: var(--player2-color) !important;
}

.pencil-mark-position.player3-circle {
  border-color: var(--player3-color) !important;
}

.pencil-mark-position.player4-circle {
  border-color: var(--player4-color) !important;
}

.pencil-mark-position.player5-circle {
  border-color: var(--player5-color) !important;
}

.pencil-mark-position.player6-circle {
  border-color: var(--player6-color) !important;
}

.pencil-mark-position.player7-circle {
  border-color: var(--player7-color) !important;
}

.pencil-mark-position.player8-circle {
  border-color: var(--player8-color) !important;
}

.pencil-mark-position.player9-circle {
  border-color: var(--player9-color) !important;
}

.pencil-mark-position.player10-circle {
  border-color: var(--player10-color) !important;
}