/* ═══════════════════════════════════════════════════════
   Kanban Review Mensal — page-specific styles
   Depende de: style.css (design tokens) + simulators.css
   ═══════════════════════════════════════════════════════ */

:root {
  --zazen-bg:      var(--z-bg);
  --zazen-surface: var(--z-surface);
  --zazen-border:  var(--z-border);
  --zazen-teal:    var(--z-primary);
  --zazen-gold:    var(--z-accent);
  --zazen-text:    var(--z-text);
  --zazen-muted:   var(--z-text-2);
  --zazen-dim:     var(--z-text-muted);
  --font-heading:  var(--font-head);
}

/* ── Page header ── */
.zr-header {
  background: linear-gradient(135deg, var(--zazen-surface) 0%, #0e1a24 100%);
  border-bottom: 1px solid var(--zazen-border);
  padding: 2rem 2rem 1.5rem;
}
.zr-eyebrow {
  font-family: var(--font-heading);
  font-size: .65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--zazen-teal);
  margin-bottom: .4rem;
}
.zr-header h1 {
  font-size: 1.6rem;
  font-weight: 400;
  color: #f0ece4;
  margin: 0 0 .25rem;
}
.zr-periodo { font-size: .85rem; color: var(--zazen-muted); }
.zr-periodo span { color: var(--zazen-gold); }

/* ── Metrics ── */
.zr-metric-card {
  background: var(--zazen-surface);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  border-top: 3px solid var(--zazen-teal);
}
.zr-metric-card.border-gold  { border-top-color: var(--zazen-gold); }
.zr-metric-card.border-blue  { border-top-color: #7C9CBF; }
.zr-metric-card.border-red   { border-top-color: #e05c5c; }
.zr-metric-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: .25rem;
}
.zr-metric-label { font-size: .7rem; letter-spacing: .5px; color: var(--zazen-muted); }

/* ── Tabs ── */
.zr-tabs {
  background: #141e28;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding: 0 2rem;
}
.zr-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .85rem 1.25rem;
  font-family: var(--font-heading);
  font-size: .8rem;
  letter-spacing: .5px;
  color: var(--zazen-muted);
  cursor: pointer;
  transition: all .2s;
}
.zr-tab-btn.active { color: var(--zazen-teal); border-bottom-color: var(--zazen-teal); }
.zr-tab-btn:hover:not(.active) { color: var(--zazen-text); }

/* ── Tab Panels ── */
.zr-panel { display: none; padding: 2rem; }
.zr-panel.active { display: block; }
.zr-panel-intro {
  font-size: .85rem;
  color: var(--zazen-muted);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ── Entrega Card ── */
.zr-entrega-card {
  background: var(--zazen-surface);
  border: 1px solid var(--zazen-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: .9rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color .2s;
}
.zr-entrega-card:hover { border-color: rgba(43, 184, 184, .2); }
.zr-entrega-body { flex: 1; min-width: 0; }
.zr-area-label {
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--zazen-muted);
  margin-bottom: .4rem;
}
.zr-entrega-title {
  font-family: var(--font-heading);
  font-size: .95rem;
  color: #f0ece4;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.zr-entrega-impacto {
  font-size: .8rem;
  color: var(--zazen-muted);
  border-left: 2px solid rgba(43, 184, 184, .35);
  padding-left: .7rem;
  line-height: 1.5;
}
.zr-badge {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 6px;
  font-size: .68rem;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Bloqueio Card ── */
.zr-bloqueio-card {
  background: var(--zazen-surface);
  border: 1px solid rgba(224, 92, 92, .15);
  border-left: 3px solid #e05c5c;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: .9rem;
}
.zr-bloqueio-title {
  font-family: var(--font-heading);
  font-size: .95rem;
  color: #f0ece4;
  margin-bottom: .9rem;
}
.zr-bloqueio-label {
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.zr-bloqueio-label.motivo { color: rgba(224, 92, 92, .6); }
.zr-bloqueio-label.acao   { color: rgba(43, 184, 184, .6); }
.zr-bloqueio-text { font-size: .82rem; color: var(--zazen-muted); line-height: 1.5; }

/* ── Próximos Card ── */
.zr-proximo-card {
  background: var(--zazen-surface);
  border: 1px solid var(--zazen-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: .7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: border-color .2s;
}
.zr-proximo-card:hover { border-color: rgba(43, 184, 184, .2); }
.zr-proximo-area {
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--zazen-muted);
  margin-bottom: .3rem;
}
.zr-proximo-title { font-family: var(--font-heading); font-size: .9rem; color: #f0ece4; }

/* ── Período selector ── */
.date-field { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.date-field label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zazen-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  white-space: nowrap;
}
.date-field input[type="month"] {
  background: var(--zazen-surface);
  border: 1px solid rgba(43, 184, 184, .4);
  border-radius: 6px;
  color: var(--zazen-text);
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 500;
  padding: .3rem .75rem;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
  color-scheme: dark;
}
.date-field input[type="month"]:hover,
.date-field input[type="month"]:focus { border-color: var(--zazen-teal); }
.zr-periodo-display { font-size: .82rem; color: var(--zazen-gold); }

/* ── Add form ── */
.zr-add-form {
  background: #111c26;
  border-bottom: 1px solid rgba(43, 184, 184, .12);
  padding: 1rem 2rem;
  display: none;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.zr-add-form.open { display: flex; }
.zr-form-group { display: flex; flex-direction: column; gap: .3rem; }
.zr-form-label {
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--zazen-muted);
}
.zr-form-input,
.zr-form-select {
  background: var(--zazen-surface);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #f0ece4;
  border-radius: 6px;
  padding: .45rem .75rem;
  font-size: .82rem;
}
.zr-form-input:focus,
.zr-form-select:focus { outline: none; border-color: var(--zazen-teal); }

/* ── Buttons ── */
.zr-btn-primary {
  background: var(--zazen-teal);
  border: none;
  color: #0a1219;
  border-radius: 6px;
  padding: .5rem 1.25rem;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.zr-btn-primary:hover { opacity: .85; }
.zr-btn-outline {
  background: none;
  border: 1px solid var(--zazen-teal);
  color: var(--zazen-teal);
  border-radius: 6px;
  padding: .4rem 1rem;
  font-family: var(--font-heading);
  font-size: .78rem;
  cursor: pointer;
  transition: all .2s;
}
.zr-btn-outline:hover { background: var(--zazen-teal); color: #0a1219; }
.zr-btn-ghost-red {
  background: none;
  border: 1px solid rgba(224, 92, 92, .35);
  color: rgba(224, 92, 92, .7);
  border-radius: 6px;
  padding: .25rem .7rem;
  font-size: .7rem;
  cursor: pointer;
  transition: all .2s;
}
.zr-btn-ghost-red:hover { border-color: #e05c5c; color: #e05c5c; }

/* ── Empty state ── */
.zr-empty {
  text-align: center;
  color: var(--zazen-dim);
  padding: 3rem 1rem;
  font-size: .85rem;
}

/* ── Lead Time inline edit ── */
.zr-metric-input {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--zazen-gold);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232, 168, 77, .45);
  width: 80px;
  padding: 0;
  margin-bottom: .25rem;
  outline: none;
  -moz-appearance: textfield;
}
.zr-metric-input::-webkit-inner-spin-button,
.zr-metric-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.zr-toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(92vw, 380px);
  z-index: 1200;
  pointer-events: none;
  align-items: center;
}
.zr-toast {
  min-width: 280px;
  max-width: 340px;
  background: rgba(10, 18, 25, 0.95);
  border: 1px solid rgba(43, 184, 184, 0.2);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  color: #e8eef5;
  backdrop-filter: blur(12px);
  animation: zr-toast-in 0.22s ease;
  pointer-events: auto;
}
.zr-toast-exit { opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; }
.zr-toast-message {
  font-size: 0.92rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.zr-toast-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.zr-toast-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #f2f9ff;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.zr-toast-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(43, 184, 184, 0.55);
  background: rgba(43, 184, 184, 0.08);
}
.zr-toast-btn-confirm {
  background: var(--zazen-teal);
  color: #0a1219;
  border-color: transparent;
}
@keyframes zr-toast-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .zr-header { padding: 1.25rem 1rem 1rem; }
  .zr-panel { padding: 1.25rem 1rem; }
  .zr-tabs { padding: 0 1rem; }
  .zr-add-form { padding: .75rem 1rem; }
  .zr-tab-btn { padding: .75rem .75rem; font-size: .75rem; }
}