/**
 * Proof Line Component
 * 
 * Styles for individual proof lines including line numbers, formula cells,
 * justification cells, bars, and hover effects.
 * Dependencies: variables.css
 */

/* === Proof Line Grid === */
.proof-line {
  display: grid;
  /* line-number | proof | justification-cell | actions */
  grid-template-columns:
    var(--line-number-width)
    var(--proof-formula-width)
    var(--justification-width)
    var(--actions-width);
  column-gap: var(--justification-gap);
  align-items: stretch;
  position: relative;
  /* Ensure proof lines maintain their full width for hover region to work */
  min-width: calc(
    var(--line-number-width) +
    var(--proof-formula-width) +
    var(--justification-width) +
    var(--actions-width)
  );
}

/* === Line Number === */
.line-number {
  padding:
    var(--line-number-padding-vertical)
    var(--spacing-md)
    var(--line-number-padding-vertical)
    0;
  text-align: right;
  color: var(--bar-color);
  background: var(--background);
  font-family: var(--math-font);
  font-variant-numeric: tabular-nums;
}

/* === Formula Cell === */
.formula-cell {
  position: relative;
  min-height: var(--proof-row-min-height);
  background: var(--background);
  cursor: text;
}

/* Premise lines: disable hover and pointer */
.formula-cell.disabled {
  cursor: default;
  background: var(--background);
}

.formula-cell.disabled:hover {
  background: var(--background);
}

/* Focused: always white (overrides hover) */
.formula-cell.focused {
  background: var(--background);
}

.formula-cell.focused:hover {
  background: var(--background);
}

/* Hover: show grey background (not focused, not disabled) */
.formula-cell:not(.disabled):not(.focused):hover {
  background: var(--hover-background);
}

/* === Bars (Proof Column) === */
.bars {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}

.bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: var(--bar-width) solid var(--bar-color);
}

.bar.cap {
  top: var(--bar-cap-gap);
}

.horizontal-bar {
  position: absolute;
  bottom: 0;
  height: 0;
  border-top: var(--bar-width) solid var(--bar-color);
  z-index: 3;
}

/* === Formula Input === */
.formula-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--math-font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  min-height: var(--input-min-height);
  box-sizing: border-box;
  color: inherit;
}

.formula-input:disabled {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* === Justification Column === */
.justification-cell {
  position: relative;
  background: var(--background);
  min-height: var(--proof-row-min-height);
  cursor: text;
}

/* Non-editable: always white, no hover effects (must come first) */
.justification-cell.disabled {
  cursor: default;
  background: var(--background);
}

.justification-cell.disabled:hover {
  background: var(--background);
}

/* Focused: always white (overrides everything) */
.justification-cell.focused {
  background: var(--background);
}

.justification-cell.focused:hover {
  background: var(--background);
}

/* Empty cells: light grey background */
.justification-cell:not(.filled):not(.disabled):not(.focused) {
  background: var(--hover-background);
}

/* Empty cell hovered (not focused): darker grey */
.justification-cell:not(.filled):not(.disabled):not(.focused):hover {
  background: var(--hover-background-strong);
}

/* Filled cell hovered (not focused): lighter grey */
.justification-cell.filled:not(.disabled):not(.focused):hover {
  background: var(--hover-background);
}

.justification-cell.filled .justification-input:not(:focus) {
  background: transparent;
}

/* === Justification Input === */
.justification-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--math-font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: var(--proof-row-padding-vertical) var(--spacing-sm);
  min-height: var(--input-min-height);
  box-sizing: border-box;
  color: inherit;
}

.justification-input:focus {
  background: transparent;
}

.justification-input:disabled {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* === Line Actions === */
/* Per-line actions */
.line-actions {
  display: flex;
  gap: var(--line-actions-gap);
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--spacing-md);
  min-height: var(--proof-row-min-height);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.proof-line:hover .line-actions,
.line-actions:hover {
  opacity: 1;
  pointer-events: auto;
}