/* ============================================================
   MartynForge EDU – Optellen & Aftrekken
   Stylesheet: assets/css/optellen.css
   Extends math.css — only overrides and additions here
   ============================================================ */

/* ── Operation toggle ── */
.op-toggle {
  display: flex;
  gap: 8px;
}

.op-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.15s;
}
.op-btn:hover {
  border-color: var(--op-color, var(--accent1));
  color: var(--op-color, var(--accent1));
}
.op-btn.selected {
  background: var(--op-color, var(--accent1));
  border-color: var(--op-color, var(--accent1));
  color: #fff;
  transform: scale(1.04);
}
.op-btn[data-op="add"]  { --op-color: var(--accent2); }
.op-btn[data-op="sub"]  { --op-color: var(--accent3); }
.op-btn[data-op="mix"]  { --op-color: var(--accent5); }

.op-symbol {
  font-size: 1.6rem;
  font-weight: 900;
  font-family: 'Space Mono', monospace;
  line-height: 1;
}
.op-name {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Range picker ── */
.range-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 380px) {
  .range-grid { grid-template-columns: repeat(2, 1fr); }
}

.range-btn {
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.range-btn:hover  { border-color: var(--accent4); color: var(--accent4); }
.range-btn.selected { background: var(--accent4); border-color: var(--accent4); color: #111; transform: scale(1.04); }

/* ── Operation indicator in question card ── */
.op-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 900;
  font-family: 'Space Mono', monospace;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.op-indicator.add { background: rgba(91,232,160,0.15); color: var(--accent2); border: 1px solid var(--accent2); }
.op-indicator.sub { background: rgba(247,92,110,0.15); color: var(--accent3); border: 1px solid var(--accent3); }

/* question-text op color overrides for add/sub */
.question-text .op-add { color: var(--accent2); }
.question-text .op-sub { color: var(--accent3); }

/* ── History table extra columns ── */
.h-op    { color: var(--accent5); font-weight: 700; }
.h-range { color: var(--accent4); font-size: 0.72rem; }

/* ── Girl theme op-btn overrides ── */
[data-theme="girl"] .op-btn[data-op="add"].selected  { color: #111; }
[data-theme="girl"] .op-btn[data-op="sub"].selected  { color: #fff; }
[data-theme="girl"] .op-btn[data-op="mix"].selected  { color: #fff; }