/**
 * ============================================================================
 * MC FLORES — DESIGN SYSTEM
 * ============================================================================
 *
 * Arquivo central de padrões visuais. Ao migrar ou criar páginas, importe
 * este CSS e use as classes .mc-* documentadas abaixo.
 *
 * Fonte:        Google Poppins
 * Ícones:       Lucide Icons (https://lucide.dev/icons)
 * Cards:        bordas arredondadas (--mc-radius-card)
 * Botões:       formato pill / 100% arredondado (--mc-radius-button)
 *
 * ── Como usar em uma página HTML ───────────────────────────────────────────
 *
 *   <link rel="stylesheet" href="/css/mc-design-system.css">
 *   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js" defer></script>
 *   <script defer>
 *     document.addEventListener('DOMContentLoaded', () => lucide.createIcons());
 *   </script>
 *
 *   Ícone:  <i data-lucide="package"></i>
 *   Card:   <div class="mc-card">...</div>
 *   Botão:  <button class="mc-btn mc-btn--primary">Salvar</button>
 *
 * ── Seção editável ──────────────────────────────────────────────────────────
 * Altere apenas os valores dentro de :root (bloco "TOKENS EDITÁVEIS").
 * Os componentes abaixo consomem essas variáveis automaticamente.
 * ============================================================================
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* ==========================================================================
   TOKENS EDITÁVEIS — preencha / ajuste os padrões aqui
   ========================================================================== */
:root {
  /* ── Tipografia ── */
  --mc-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mc-font-weight-regular: 400;
  --mc-font-weight-medium: 500;
  --mc-font-weight-semibold: 600;
  --mc-font-weight-bold: 700;

  /* ── Cor principal ── */
  --mc-color-primary: #fbba00;
  --mc-color-primary-hover: #e0a800;
  --mc-color-primary-text: #343538;

  /* ── Cores secundárias ── */
  --mc-color-secondary-dark: #343538;
  --mc-color-secondary-gray: #bdbdbd;
  --mc-color-secondary-yellow: #fffc00;
  --mc-color-secondary-white: #ffffff;

  /* ── Cores semânticas (botões / badges / alertas) ── */
  --mc-color-green: #00cd2d;
  --mc-color-green-hover: #00b328;
  --mc-color-blue: #0085ff;
  --mc-color-blue-hover: #0070d9;
  --mc-color-red: #ff0000;
  --mc-color-red-hover: #e00000;
  --mc-color-orange: #ff5c00;
  --mc-color-orange-hover: #e65200;
  --mc-color-purple: #c400ff;
  --mc-color-purple-hover: #aa00db;

  /* ── Superfícies e texto (derivados — ajuste se quiser) ── */
  --mc-color-bg: #f4f6f9;
  --mc-color-surface: var(--mc-color-secondary-white);
  --mc-color-text: var(--mc-color-secondary-dark);
  --mc-color-text-muted: #6b7280;
  --mc-color-border: #e5e7eb;

  /* ── Formas ── */
  --mc-radius-card: 16px;
  --mc-radius-input: 12px;
  --mc-radius-button: 9999px; /* pill / 100% arredondado */

  /* ── Sombras ── */
  --mc-shadow-sm: 0 1px 3px rgba(52, 53, 56, 0.08);
  --mc-shadow-md: 0 4px 16px rgba(52, 53, 56, 0.1);
  --mc-shadow-lg: 0 10px 30px rgba(52, 53, 56, 0.12);

  /* ── Ícones Lucide ── */
  --mc-icon-size-sm: 1rem;
  --mc-icon-size-md: 1.25rem;
  --mc-icon-size-lg: 1.5rem;
  --mc-icon-stroke: 2;

  /* ── Foco e transições ── */
  --mc-focus-ring: 0 0 0 3px rgba(251, 186, 0, 0.45);
  --mc-transition: 0.2s ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.mc-app,
body {
  margin: 0;
  font-family: var(--mc-font-family);
  font-weight: var(--mc-font-weight-regular);
  background-color: var(--mc-color-bg);
  color: var(--mc-color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Lucide — tamanho e alinhamento padrão */
.lucide,
[data-lucide] {
  width: var(--mc-icon-size-md);
  height: var(--mc-icon-size-md);
  stroke-width: var(--mc-icon-stroke);
  flex-shrink: 0;
  vertical-align: middle;
}

.mc-icon--sm { width: var(--mc-icon-size-sm); height: var(--mc-icon-size-sm); }
.mc-icon--lg { width: var(--mc-icon-size-lg); height: var(--mc-icon-size-lg); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.mc-card {
  background: var(--mc-color-surface);
  border: 1px solid var(--mc-color-border);
  border-radius: var(--mc-radius-card);
  box-shadow: var(--mc-shadow-sm);
  padding: 1.25rem 1.5rem;
}

.mc-card--elevated {
  box-shadow: var(--mc-shadow-md);
}

.mc-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: var(--mc-font-weight-semibold);
  color: var(--mc-color-text);
}

.mc-card__subtitle {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--mc-color-text-muted);
}

/* Card de menu (grid do menu principal) */
.mc-menu-card {
  background: var(--mc-color-surface);
  border-radius: var(--mc-radius-card);
  padding: 1.5rem;
  box-shadow: var(--mc-shadow-sm);
  border-top: 4px solid var(--mc-color-primary);
  transition: transform var(--mc-transition), box-shadow var(--mc-transition);
  display: flex;
  flex-direction: column;
}

.mc-menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mc-shadow-lg);
}

/* ==========================================================================
   BOTÕES — formato pill (border-radius 100%)
   ========================================================================== */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--mc-radius-button);
  font-family: var(--mc-font-family);
  font-size: 0.9375rem;
  font-weight: var(--mc-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--mc-transition),
    border-color var(--mc-transition),
    color var(--mc-transition),
    box-shadow var(--mc-transition),
    transform var(--mc-transition);
  white-space: nowrap;
}

.mc-btn:focus-visible {
  outline: none;
  box-shadow: var(--mc-focus-ring);
}

.mc-btn:disabled,
.mc-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.mc-btn:not(:disabled):active {
  transform: scale(0.98);
}

/* Tamanhos */
.mc-btn--sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
}

.mc-btn--lg {
  padding: 0.8rem 1.75rem;
  font-size: 1rem;
}

/* Variantes sólidas */
.mc-btn--primary {
  background-color: var(--mc-color-primary);
  color: var(--mc-color-primary-text);
}

.mc-btn--primary:not(:disabled):hover {
  background-color: var(--mc-color-primary-hover);
}

.mc-btn--secondary {
  background-color: var(--mc-color-secondary-dark);
  color: var(--mc-color-secondary-white);
}

.mc-btn--secondary:not(:disabled):hover {
  background-color: #2a2b2e;
}

.mc-btn--green {
  background-color: var(--mc-color-green);
  color: var(--mc-color-secondary-white);
}

.mc-btn--green:not(:disabled):hover {
  background-color: var(--mc-color-green-hover);
}

.mc-btn--blue {
  background-color: var(--mc-color-blue);
  color: var(--mc-color-secondary-white);
}

.mc-btn--blue:not(:disabled):hover {
  background-color: var(--mc-color-blue-hover);
}

.mc-btn--red {
  background-color: var(--mc-color-red);
  color: var(--mc-color-secondary-white);
}

.mc-btn--red:not(:disabled):hover {
  background-color: var(--mc-color-red-hover);
}

.mc-btn--orange {
  background-color: var(--mc-color-orange);
  color: var(--mc-color-secondary-white);
}

.mc-btn--orange:not(:disabled):hover {
  background-color: var(--mc-color-orange-hover);
}

.mc-btn--purple {
  background-color: var(--mc-color-purple);
  color: var(--mc-color-secondary-white);
}

.mc-btn--purple:not(:disabled):hover {
  background-color: var(--mc-color-purple-hover);
}

.mc-btn--ghost {
  background-color: transparent;
  color: var(--mc-color-text);
  border-color: var(--mc-color-border);
}

.mc-btn--ghost:not(:disabled):hover {
  background-color: rgba(189, 189, 189, 0.15);
}

/* Outline */
.mc-btn--outline-primary {
  background-color: transparent;
  color: var(--mc-color-primary-text);
  border-color: var(--mc-color-primary);
}

.mc-btn--outline-primary:not(:disabled):hover {
  background-color: rgba(251, 186, 0, 0.15);
}

/* ==========================================================================
   BADGES
   ========================================================================== */
.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--mc-radius-button);
  font-size: 0.75rem;
  font-weight: var(--mc-font-weight-semibold);
  line-height: 1.4;
}

.mc-badge--primary { background: rgba(251, 186, 0, 0.2); color: var(--mc-color-primary-text); }
.mc-badge--green   { background: rgba(0, 205, 45, 0.15); color: #007a18; }
.mc-badge--blue    { background: rgba(0, 133, 255, 0.15); color: #005fb3; }
.mc-badge--red     { background: rgba(255, 0, 0, 0.12); color: #b30000; }
.mc-badge--orange  { background: rgba(255, 92, 0, 0.15); color: #b34000; }
.mc-badge--purple  { background: rgba(196, 0, 255, 0.12); color: #8a00b3; }
.mc-badge--gray    { background: rgba(189, 189, 189, 0.25); color: var(--mc-color-secondary-dark); }

/* ==========================================================================
   INPUTS
   ========================================================================== */
.mc-input,
.mc-select,
.mc-textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--mc-color-border);
  border-radius: var(--mc-radius-input);
  font-family: var(--mc-font-family);
  font-size: 0.9375rem;
  color: var(--mc-color-text);
  background: var(--mc-color-surface);
  transition: border-color var(--mc-transition), box-shadow var(--mc-transition);
}

.mc-input:focus,
.mc-select:focus,
.mc-textarea:focus {
  outline: none;
  border-color: var(--mc-color-primary);
  box-shadow: var(--mc-focus-ring);
}

.mc-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: var(--mc-font-weight-medium);
  color: var(--mc-color-text);
}

/* ==========================================================================
   HEADER DE APP
   ========================================================================== */
.mc-app-header {
  background-color: var(--mc-color-secondary-dark);
  color: var(--mc-color-secondary-white);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--mc-shadow-md);
}

.mc-app-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.25rem;
  font-weight: var(--mc-font-weight-bold);
}

.mc-brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.mc-app-header__brand .mc-brand-logo {
  border-radius: 6px;
}

.mc-app-header__brand .lucide,
.mc-app-header__brand [data-lucide] {
  color: var(--mc-color-primary);
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */
.mc-container {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: 1.5rem;
}

.mc-text-muted { color: var(--mc-color-text-muted); }
.mc-text-primary { color: var(--mc-color-primary); }

.mc-flex { display: flex; }
.mc-flex-center { display: flex; align-items: center; justify-content: center; }
.mc-gap-sm { gap: 0.5rem; }
.mc-gap-md { gap: 1rem; }

/* ==========================================================================
   MENU PRINCIPAL (menu.html)
   ========================================================================== */
.mc-menu-main {
  padding: 2.5rem 1.5rem 3rem;
}

.mc-menu-welcome {
  margin-bottom: 2rem;
}

.mc-menu-welcome h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: var(--mc-font-weight-bold);
  color: var(--mc-color-text);
}

.mc-menu-welcome p {
  margin: 0;
  color: var(--mc-color-text-muted);
}

.mc-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.mc-menu-card--primary { border-top-color: var(--mc-color-primary); }
.mc-menu-card--blue    { border-top-color: var(--mc-color-blue); }
.mc-menu-card--green   { border-top-color: var(--mc-color-green); }
.mc-menu-card--orange  { border-top-color: var(--mc-color-orange); }
.mc-menu-card--purple  { border-top-color: var(--mc-color-purple); }

.mc-menu-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mc-color-border);
}

.mc-menu-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--mc-radius-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-color-secondary-white);
  flex-shrink: 0;
}

.mc-menu-card__icon .lucide,
.mc-menu-card__icon [data-lucide] {
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
}

.mc-menu-card__icon--primary { background: linear-gradient(135deg, var(--mc-color-primary), var(--mc-color-primary-hover)); color: var(--mc-color-primary-text); }
.mc-menu-card__icon--blue    { background: linear-gradient(135deg, #3d9dff, var(--mc-color-blue)); }
.mc-menu-card__icon--green   { background: linear-gradient(135deg, #33e055, var(--mc-color-green)); }
.mc-menu-card__icon--orange  { background: linear-gradient(135deg, #ff8a45, var(--mc-color-orange)); }
.mc-menu-card__icon--purple  { background: linear-gradient(135deg, #d44dff, var(--mc-color-purple)); }

.mc-menu-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--mc-font-weight-semibold);
  color: var(--mc-color-text);
}

.mc-menu-card__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
}

.mc-menu-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--mc-radius-button);
  text-decoration: none;
  color: var(--mc-color-text);
  background-color: var(--mc-color-bg);
  font-size: 0.9375rem;
  font-weight: var(--mc-font-weight-medium);
  border: 1px solid transparent;
  transition:
    background-color var(--mc-transition),
    border-color var(--mc-transition),
    color var(--mc-transition),
    transform var(--mc-transition);
}

.mc-menu-link .lucide,
.mc-menu-link [data-lucide] {
  color: var(--mc-color-text-muted);
  transition: color var(--mc-transition);
}

.mc-menu-link:hover {
  background-color: rgba(251, 186, 0, 0.12);
  border-color: rgba(251, 186, 0, 0.35);
  color: var(--mc-color-text);
  transform: translateX(2px);
}

.mc-menu-link:hover .lucide,
.mc-menu-link:hover [data-lucide] {
  color: var(--mc-color-orange);
}

.mc-menu-link--highlight {
  background-color: rgba(251, 186, 0, 0.1);
  border-color: rgba(251, 186, 0, 0.25);
  font-weight: var(--mc-font-weight-semibold);
}

.mc-app-header .mc-btn--logout {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--mc-color-secondary-white);
  border-color: rgba(255, 255, 255, 0.22);
}

.mc-app-header .mc-btn--logout:not(:disabled):hover {
  background-color: var(--mc-color-red);
  border-color: var(--mc-color-red);
  color: var(--mc-color-secondary-white);
}

@media (max-width: 768px) {
  .mc-app-header {
    flex-direction: column;
    text-align: center;
  }

  .mc-menu-grid {
    grid-template-columns: 1fr;
  }
}