/**
 * Manic Pixels Web OS — Calculator CSS
 * 3 modos: Básica, Científica, Programador.
 * Usa var(--mp-*) para integração com ThemeManager.
 */

/* ── Wrapper principal ───────────────────────────────────────────────────── */

.mp-calc {
  display:        flex;
  flex-direction: column;
  height:         100%;
  min-height:     0;
  background:     var(--mp-window-bg-solid, #14141e);
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  user-select:    none;
  -webkit-user-select: none;
}

/* ── Barra de modos ──────────────────────────────────────────────────────── */

.mp-calc-modebar {
  display:     flex;
  gap:         2px;
  padding:     6px 8px 0;
  flex-shrink: 0;
}

.mp-calc-mode-btn {
  flex:         1;
  padding:      5px 4px;
  background:   transparent;
  border:       1px solid transparent;
  border-radius: 5px;
  color:        rgba(255,255,255,0.40);
  font-family:  var(--mp-font-ui, system-ui, sans-serif);
  font-size:    11px;
  cursor:       pointer;
  transition:   background 0.12s, color 0.12s, border-color 0.12s;
  text-align:   center;
}
.mp-calc-mode-btn:hover {
  background: rgba(255,255,255,0.06);
  color:      rgba(255,255,255,0.65);
}
.mp-calc-mode-btn.active {
  background:  rgba(var(--mp-accent-rgb,61,174,233), 0.15);
  border-color: rgba(var(--mp-accent-rgb,61,174,233), 0.35);
  color:        var(--mp-accent, #3daee9);
}

/* ── Display ─────────────────────────────────────────────────────────────── */

.mp-calc-display {
  padding:     12px 16px 8px;
  flex-shrink: 0;
}

.mp-calc-expr {
  font-size:   11px;
  color:       rgba(255,255,255,0.30);
  text-align:  right;
  min-height:  16px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mp-calc-result {
  font-size:    36px;
  font-weight:  300;
  color:        var(--mp-menu-fg, #e8e8f0);
  text-align:   right;
  line-height:  1.1;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
  font-variant-numeric: tabular-nums;
  transition:   font-size 0.1s;
}

.mp-calc-result.mp-calc-result--sm { font-size: 26px; }
.mp-calc-result.mp-calc-result--xs { font-size: 18px; }

/* ── Grade de botões ─────────────────────────────────────────────────────── */

.mp-calc-grid {
  display:    grid;
  gap:        4px;
  padding:    4px 8px 8px;
  flex:       1;
}

/* Básica: 4 colunas */
.mp-calc--basic .mp-calc-grid { grid-template-columns: repeat(4, 1fr); }

/* Científica: 5 colunas — coluna extra à esquerda para funções */
.mp-calc--scientific .mp-calc-grid { grid-template-columns: repeat(5, 1fr); }

/* Programador: 4 colunas + hex display acima */
.mp-calc--programmer .mp-calc-grid { grid-template-columns: repeat(4, 1fr); }

/* ── Botão ────────────────────────────────────────────────────────────────── */

.mp-calc-btn {
  display:      flex;
  align-items:  center;
  justify-content: center;
  padding:      0;
  border:       none;
  border-radius: 7px;
  font-family:  var(--mp-font-ui, system-ui, sans-serif);
  font-size:    15px;
  font-weight:  400;
  cursor:       pointer;
  transition:   background 0.08s, transform 0.06s;
  min-height:   44px;
  user-select:  none;
  -webkit-user-select: none;
  outline:      none;
}

.mp-calc-btn:active { transform: scale(0.94); }

/* Numérico */
.mp-calc-btn--num {
  background: rgba(255,255,255,0.06);
  color:      var(--mp-menu-fg, #e8e8f0);
}
.mp-calc-btn--num:hover { background: rgba(255,255,255,0.12); }

/* Operador */
.mp-calc-btn--op {
  background: rgba(255,255,255,0.09);
  color:      var(--mp-accent, #3daee9);
  font-weight: 600;
}
.mp-calc-btn--op:hover { background: rgba(255,255,255,0.15); }

/* Limpar */
.mp-calc-btn--clear {
  background: rgba(231,76,60,0.18);
  color:      #e74c3c;
}
.mp-calc-btn--clear:hover { background: rgba(231,76,60,0.28); }

/* Igual */
.mp-calc-btn--equal {
  background: var(--mp-accent, #3daee9);
  color:      #fff;
  font-size:  20px;
  font-weight: 600;
}
.mp-calc-btn--equal:hover {
  background: var(--mp-accent-hover, #5cb8f0);
}

/* Função científica */
.mp-calc-btn--fn {
  background: rgba(255,255,255,0.04);
  color:      rgba(255,255,255,0.55);
  font-size:  11px;
}
.mp-calc-btn--fn:hover {
  background: rgba(255,255,255,0.09);
  color:      rgba(255,255,255,0.80);
}

/* 2nd / shift */
.mp-calc-btn--shift {
  background: rgba(var(--mp-accent-rgb,61,174,233), 0.10);
  color:      var(--mp-accent, #3daee9);
  font-size:  11px;
}
.mp-calc-btn--shift.active {
  background: var(--mp-accent, #3daee9);
  color:      #fff;
}

/* Span 2 colunas */
.mp-calc-btn--wide { grid-column: span 2; }

/* ── Display programador (HEX/BIN/OCT) ──────────────────────────────────── */

.mp-calc-prog-display {
  padding:     0 8px 6px;
  display:     flex;
  flex-direction: column;
  gap:         3px;
  flex-shrink: 0;
}

.mp-calc-prog-row {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  font-size:   11px;
}

.mp-calc-prog-base {
  color:       rgba(255,255,255,0.28);
  font-size:   10px;
  min-width:   28px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mp-calc-prog-val {
  font-variant-numeric: tabular-nums;
  color:       rgba(255,255,255,0.60);
  flex:        1;
  text-align:  right;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-calc-prog-row.active .mp-calc-prog-base { color: var(--mp-accent, #3daee9); }
.mp-calc-prog-row.active .mp-calc-prog-val  { color: rgba(255,255,255,0.90); }

/* ── Histórico ───────────────────────────────────────────────────────────── */

.mp-calc-history {
  display:     none;
  flex-direction: column;
  gap:         0;
  max-height:  140px;
  overflow-y:  auto;
  padding:     0 8px 6px;
  border-top:  1px solid rgba(255,255,255,0.06);
}

.mp-calc-history.visible { display: flex; }

.mp-calc-history-item {
  display:     flex;
  justify-content: space-between;
  padding:     4px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size:   11px;
  cursor:      pointer;
  border-radius: 3px;
}
.mp-calc-history-item:hover { background: rgba(255,255,255,0.05); }
.mp-calc-history-item:last-child { border-bottom: none; }

.mp-calc-history-expr { color: rgba(255,255,255,0.40); }
.mp-calc-history-val  {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}