/* ══════════════════════════════════════════════════════════════
   BZPMail — Materio-inspired theme (implementação original local)
   Inspirado no visual do Materio Admin (ThemeSelection): paleta,
   cards arredondados, sombras suaves e tipografia Inter.
   Nenhum código foi copiado do template PRO; todo o CSS abaixo
   é autoral e está versionado neste projeto (sem hotlink/github).
   Atribuição de inspiração: ThemeSelection — Materio (MIT free).
   ══════════════════════════════════════════════════════════════ */

:root {
  --materio-primary: #9155fd;
  --materio-primary-dark: #7e41f5;
  --materio-primary-light: rgba(145, 85, 253, 0.12);
  --materio-primary-border: rgba(145, 85, 253, 0.3);
  --materio-bg: #f4f5fa;
  --materio-card: #ffffff;
  --materio-card-border: #e9e7fd;
  --materio-text: #3a3541;
  --materio-text-secondary: #89868d;
  --materio-muted: #b4b2b7;
  --materio-divider: #e7e3fc;
  --materio-hover: #f5f3ff;
  --materio-shadow-sm: 0 2px 6px rgba(58, 53, 65, 0.08);
  --materio-shadow: 0 4px 18px rgba(58, 53, 65, 0.1);
  --materio-radius: 10px;
  --materio-radius-lg: 14px;
  --materio-success: #56ca00;
  --materio-warning: #ffb400;
  --materio-danger: #ff4c51;
  --materio-info: #16b1ff;
  --materio-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.dark-mode {
  --materio-bg: #25293c;
  --materio-card: #2f3349;
  --materio-card-border: #3d415d;
  --materio-text: #e7e3fc;
  --materio-text-secondary: #a5a3b9;
  --materio-muted: #6d6b86;
  --materio-divider: #3d415d;
  --materio-hover: #3a3e5c;
  --materio-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --materio-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  --materio-primary-light: rgba(145, 85, 253, 0.18);
}

/* Base da página de e-mail usa o fundo Materio sem quebrar o resto do app */
.materio-page {
  background: var(--materio-bg);
  min-height: 100vh;
  font-family: var(--materio-font);
  color: var(--materio-text);
}

/* Cards padrão Materio */
.materio-card {
  background: var(--materio-card);
  border: 1px solid var(--materio-card-border);
  border-radius: var(--materio-radius-lg);
  box-shadow: var(--materio-shadow-sm);
}
.materio-card-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--materio-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.materio-card-header h5, .materio-card-header h6 {
  margin: 0;
  font-weight: 600;
  color: var(--materio-text);
}
.materio-card-body { padding: 20px; }

/* Botões */
.materio-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--materio-primary);
  color: #fff !important;
  border: 1px solid var(--materio-primary);
  border-radius: 8px;
  padding: 9px 22px;
  font-weight: 500; font-size: 0.875rem; letter-spacing: 0.15px;
  box-shadow: 0 3px 8px rgba(145, 85, 253, 0.35);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
  white-space: nowrap;
}
.materio-btn-primary:hover { background: var(--materio-primary-dark); box-shadow: 0 5px 14px rgba(145, 85, 253, 0.45); color: #fff; }
.materio-btn-primary:active { transform: translateY(1px); }
.materio-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.materio-btn-primary.btn-block { width: 100%; }
.materio-btn-sm { padding: 6px 14px; font-size: 0.8rem; }

.materio-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--materio-primary);
  border: 1px solid var(--materio-primary-border);
  border-radius: 8px; padding: 8px 18px;
  font-weight: 500; font-size: 0.85rem; cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.materio-btn-outline:hover { background: var(--materio-primary-light); color: var(--materio-primary-dark); }

.materio-btn-text {
  background: none; border: none; color: var(--materio-primary);
  font-size: 0.85rem; font-weight: 500; cursor: pointer; padding: 6px 10px; border-radius: 6px;
}
.materio-btn-text:hover { background: var(--materio-primary-light); }

.materio-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--materio-text-secondary);
  cursor: pointer; transition: background 0.15s, color 0.15s; font-size: 0.9rem;
  flex-shrink: 0; text-decoration: none;
}
.materio-icon-btn:hover { background: var(--materio-hover); color: var(--materio-text); }
.materio-icon-btn.sm { width: 28px; height: 28px; font-size: 0.78rem; border-radius: 6px; }
.materio-icon-btn.danger { color: var(--materio-danger); }
.materio-icon-btn.danger:hover { background: rgba(255, 76, 81, 0.1); }

/* Inputs */
.materio-input, .materio-select, .materio-textarea {
  width: 100%; padding: 9px 14px;
  background: var(--materio-card);
  border: 1px solid var(--materio-card-border);
  border-radius: 8px; color: var(--materio-text);
  font-size: 0.9rem; font-family: inherit; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.materio-input:focus, .materio-select:focus, .materio-textarea:focus {
  border-color: var(--materio-primary);
  box-shadow: 0 0 0 3px var(--materio-primary-light);
}
.materio-input::placeholder { color: var(--materio-muted); }
.materio-select option { background: var(--materio-card); color: var(--materio-text); }

.materio-label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--materio-text-secondary); margin-bottom: 6px; }
.materio-form-group { margin-bottom: 16px; }

/* Badges / chips */
.materio-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 6px;
  line-height: 1.4;
}
.materio-badge.primary { background: var(--materio-primary-light); color: var(--materio-primary); }
.materio-badge.success { background: rgba(86, 202, 0, 0.14); color: #4ca500; }
.materio-badge.warning { background: rgba(255, 180, 0, 0.16); color: #b07800; }
.materio-badge.danger { background: rgba(255, 76, 81, 0.12); color: var(--materio-danger); }
.materio-badge.info { background: rgba(22, 177, 255, 0.12); color: #0d8fd1; }
.materio-badge.muted { background: var(--materio-hover); color: var(--materio-text-secondary); }
body.dark-mode .materio-badge.success { color: #7fe02e; }
body.dark-mode .materio-badge.warning { color: #ffca3a; }

/* Avatares com iniciais (como no Materio: círculo colorido) */
.materio-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600; color: #fff; flex-shrink: 0;
  background: var(--materio-primary);
}
.materio-avatar.sm { width: 28px; height: 28px; font-size: 0.7rem; }
.materio-avatar.lg { width: 44px; height: 44px; font-size: 1rem; }

/* Ponto de etiqueta */
.materio-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.materio-dot.personal { background: var(--materio-success); }
.materio-dot.company { background: var(--materio-primary); }
.materio-dot.important { background: var(--materio-warning); }
.materio-dot.private { background: var(--materio-danger); }
.materio-dot.default { background: var(--materio-info); }

/* Toasts no padrão Materio */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
#toast-container .toast {
  background: var(--materio-card); color: var(--materio-text);
  border: 1px solid var(--materio-card-border); border-radius: 10px;
  box-shadow: var(--materio-shadow); font-size: 0.85rem;
}

/* Modal Materio */
.materio-modal .modal-content {
  background: var(--materio-card); color: var(--materio-text);
  border: 1px solid var(--materio-card-border); border-radius: 14px;
  box-shadow: var(--materio-shadow);
}
.materio-modal .modal-header { border-bottom: 1px solid var(--materio-divider); padding: 16px 22px; }
.materio-modal .modal-title { font-weight: 600; font-size: 1rem; }
.materio-modal .modal-body { padding: 20px 22px; }
.materio-modal .modal-footer { border-top: 1px solid var(--materio-divider); padding: 14px 22px; }
.materio-modal .btn-close { filter: invert(0.5); }
body.dark-mode .materio-modal .btn-close { filter: invert(0.85); }

/* Scrollbar sutil */
.materio-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.materio-scroll::-webkit-scrollbar-thumb { background: var(--materio-card-border); border-radius: 4px; }
.materio-scroll::-webkit-scrollbar-track { background: transparent; }