/**
 * Manic Pixels Web OS — Window Controls
 * Estilo KDE Breeze: transparente por padrão, cor apenas no hover.
 * Ícones SVG inline monocromáticos — sem círculos coloridos por padrão.
 * Usa exclusivamente var(--mp-*) — re-skinning dinâmico automático.
 *
 * Sprint 8 — Substituição completa do estilo macOS (Sprint 2) por KDE Breeze
 *
 * REGRA DEFINITIVA (design-language.md):
 * Botões à DIREITA, ordem esquerda→direita: [ — ][ □ ][ ✕ ]
 * Esta regra não tem exceção e não deve ser revertida.
 */

/* ── Container dos botões ─────────────────────────────────────────────────── */

.mp-window-controls {
  display:      flex;
  align-items:  center;
  gap:          2px;
  flex-shrink:  0;
  padding-left: 6px;  /* espaço entre título e botões */
}

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

.mp-btn-close,
.mp-btn-minimize,
.mp-btn-maximize {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;

  width:           var(--mp-btn-control-size, 16px);
  height:          var(--mp-btn-control-size, 16px);
  border-radius:   4px;
  border:          none;
  padding:         0;
  margin:          0;
  cursor:          pointer;
  flex-shrink:     0;

  /* Breeze: fundo transparente por padrão */
  background:      transparent;
  color:           var(--mp-titlebar-fg);
  opacity:         0.55;

  transition:
    background-color 0.12s ease,
    opacity          0.12s ease,
    transform        0.10s ease;
}

/* ── Ícones SVG internos ─────────────────────────────────────────────────── */

.mp-btn-close svg,
.mp-btn-minimize svg,
.mp-btn-maximize svg {
  width:          10px;
  height:         10px;
  stroke:         currentColor;
  stroke-width:   1.8;
  stroke-linecap: round;
  stroke-linejoin:round;
  fill:           none;
  pointer-events: none;
  display:        block;
}

/* ── Janela inativa — botões quase invisíveis ─────────────────────────────── */

.mp-window:not(.focused) .mp-btn-close,
.mp-window:not(.focused) .mp-btn-minimize,
.mp-window:not(.focused) .mp-btn-maximize {
  opacity: 0.22;
}

/* ── Hover na titlebar — aumenta visibilidade de todos os botões ─────────── */

.mp-titlebar:hover .mp-btn-close,
.mp-titlebar:hover .mp-btn-minimize,
.mp-titlebar:hover .mp-btn-maximize {
  opacity: 0.80;
}

/* ── Hover individual — cor Breeze aparece ───────────────────────────────── */

.mp-btn-minimize:hover {
  background-color: var(--mp-btn-minimize-hover, #f67400);
  color:            #ffffff;
  opacity:          1;
  transform:        scale(1.08);
}

.mp-btn-maximize:hover {
  background-color: var(--mp-btn-maximize-hover, #27ae60);
  color:            #ffffff;
  opacity:          1;
  transform:        scale(1.08);
}

.mp-btn-close:hover {
  background-color: var(--mp-btn-close-hover, #da4453);
  color:            #ffffff;
  opacity:          1;
  transform:        scale(1.08);
}

/* ── Active ──────────────────────────────────────────────────────────────── */

.mp-btn-close:active,
.mp-btn-minimize:active,
.mp-btn-maximize:active {
  transform: scale(0.88);
  filter:    brightness(0.82);
}

/* ── Ícone maximizar / restaurar — troca via CSS ─────────────────────────── */

/* Ícone "restaurar" oculto por padrão */
.mp-btn-maximize .mp-icon-restore  { display: none; }
.mp-btn-maximize .mp-icon-maximize { display: block; }

/* Janela maximizada — troca ícone */
.mp-window.maximized .mp-btn-maximize .mp-icon-maximize { display: none; }
.mp-window.maximized .mp-btn-maximize .mp-icon-restore  { display: block; }

/* ── Acessibilidade — foco via teclado ───────────────────────────────────── */

.mp-btn-close:focus-visible,
.mp-btn-minimize:focus-visible,
.mp-btn-maximize:focus-visible {
  outline:        2px solid var(--mp-accent);
  outline-offset: 2px;
  opacity:        1;
}

/* ── Responsive: telas de toque ──────────────────────────────────────────── */

@media (pointer: coarse) {
  .mp-btn-close,
  .mp-btn-minimize,
  .mp-btn-maximize {
    width:  22px;
    height: 22px;
  }
  .mp-window-controls { gap: 4px; }
}