/* m3-expressive.css — Material 3 (Expressive) com tema CLARO fixo
   - Mantém padrão de cores
   - Fundo cinza claro
   - Tabelas com hover sutil (sem fundo preto)
   - Texto de “Saldo do Mês” garantido visível
   - Badges padronizados e coluna Status com largura fixa
*/

/* ===== Design Tokens (CLARO) ===== */
:root {
  --brand-primary: #6750A4;
  --brand-on-primary: #FFFFFF;
  --brand-secondary: #625B71;
  --brand-tertiary: #7D5260;

  /* Superfícies (tema claro fixo) */
  --surface: #F4F6F8;          /* cinza claro do fundo */
  --surface-variant: #FFFFFF;  /* cartões/tabelas */
  --on-surface: #1C1B1F;       /* texto principal */
  --on-surface-variant: #4E4C55;

  /* Realces e bordas */
  --outline: #D9DCE3;
  --success: #2E7D32;
  --warning: #ED6C02;
  --error:   #B3261E;
  --info:    #1976D2;

  /* Tipografia */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-weight-display: 700;
  --font-weight-title: 600;
  --font-weight-body: 400;

  /* Espaçamento e raio */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-2xl: 1.5rem;

  /* Elevação */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --elev-2: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --elev-3: 0 6px 18px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);

  --container-max: 1200px;
}

/* ===== Base ===== */
html, body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.m3-container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ===== App Bar ===== */
.m3-appbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-variant);
  border-bottom: 1px solid var(--outline);
  backdrop-filter: saturate(180%) blur(6px);
}
.m3-appbar .m3-appbar-inner {
  display: flex; align-items: center; gap: var(--space-4);
  height: 64px;
}
.m3-appbar .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-title); }
.m3-appbar .nav { margin-left: auto; display: flex; gap: var(--space-3); }

/* ===== Cards ===== */
.m3-card {
  background: var(--surface-variant);
  border: 1px solid var(--outline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--elev-1);
  padding: var(--space-5);
}
.m3-card:hover { box-shadow: var(--elev-2); }
.m3-card-title { font-weight: var(--font-weight-title); font-size: 1.05rem; color: var(--on-surface); margin: 0 0 var(--space-3) 0; }
.m3-card, .m3-card * { color: var(--on-surface); }

/* ===== Grade do dashboard ===== */
.m3-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px)  { .m3-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .m3-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ===== Botões ===== */
.m3-btn {
  appearance: none;
  border: 1px solid var(--outline);
  background: var(--surface-variant);
  color: var(--on-surface);
  padding: .7rem 1rem;
  border-radius: var(--radius-lg);
  font-weight: 600; line-height: 1;
  transition: .18s ease;
}
.m3-btn:hover { transform: translateY(-1px); box-shadow: var(--elev-1); }
.m3-btn:active { transform: translateY(0); box-shadow: var(--elev-0); }
.m3-btn.primary { background: var(--brand-primary); border-color: transparent; color: var(--brand-on-primary); }
.m3-btn.ghost   { background: transparent; border-color: var(--outline); color: var(--on-surface); }

/* ===== Tabelas ===== */
.m3-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--outline);
  background: var(--surface-variant);
}
.m3-table thead th {
  text-align: left;
  background: #F3F5F8; /* cabeçalho cinza leve */
  color: var(--on-surface);
  font-weight: 600;
  padding: .75rem 1rem;
}
.m3-table tbody td {
  border-top: 1px solid var(--outline);
  padding: .75rem 1rem;
  background: var(--surface-variant); /* linhas brancas */
  color: var(--on-surface);
}
.m3-table tbody tr:hover td { background: rgba(0,0,0,.03); }

/* ===== COLUNA STATUS — largura fixa, sem quebrar linhas ===== */
.m3-table th.status-col,
.m3-table td.status-col {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  white-space: nowrap;
  text-wrap: nowrap;
}
.m3-table col.col-status {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

/* ===== STATUS Badges ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 110px;
  padding: .30rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--outline);
  background: #F7F9FC;
  color: var(--on-surface);
}
.status-badge i { font-size: .9em; opacity: .9; }
.status-badge.status-has-checkbox { padding: .25rem .55rem; gap: .45rem; }
.status-badge.status-has-checkbox input[type="checkbox"] { margin: 0; transform: translateY(0.5px); }

/* Variações por estado */
.status-badge.is-pago,
.status-badge.is-ativo,
.status-badge.is-concluida { background:#E8F5E9; border-color: color-mix(in oklab, var(--success) 35%, var(--outline)); color:#1B5E20; }
.status-badge.is-pendente    { background:#FFF8E1; border-color: color-mix(in oklab, var(--warning) 35%, var(--outline)); color:#8D6E00; }
.status-badge.is-atrasado,
.status-badge.is-cancelado   { background:#FFEBEE; border-color: color-mix(in oklab, var(--error) 35%, var(--outline)); color:#8B1A1A; }
.status-badge.is-info        { background:#E3F2FD; border-color: color-mix(in oklab, var(--info) 35%, var(--outline)); color:#0D47A1; }

/* ===== Formulários ===== */
.m3-field { display: grid; gap: .35rem; }
.m3-field label { font-size: .875rem; color: var(--on-surface-variant); }
.m3-input, .m3-select {
  width: 100%; border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: .75rem .9rem;
  background: var(--surface-variant); color: var(--on-surface);
}
.m3-input:focus, .m3-select:focus {
  outline: 2px solid color-mix(in oklab, var(--brand-primary) 35%, transparent);
  border-color: var(--brand-primary);
}

/* ===== Avisos ===== */
.m3-alert {
  padding: .85rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid var(--outline);
  background: #F7F9FC; color: var(--on-surface);
}
.m3-alert.success { border-color: color-mix(in oklab, var(--success) 35%, var(--outline)); }
.m3-alert.warn    { border-color: color-mix(in oklab, var(--warning) 35%, var(--outline)); }
.m3-alert.error   { border-color: color-mix(in oklab, var(--error)   35%, var(--outline)); }

/* ===== AdSense (anti-CLS) ===== */
.ad-slot {
  display: block; border-radius: var(--radius-lg);
  border: 1px dashed var(--outline);
  background: #FFFFFF; box-shadow: var(--elev-1);
  margin: var(--space-4) 0; overflow: hidden; position: relative;
}
.ad-slot::after {
  content: "Publicidade";
  position: absolute; top: .35rem; right: .5rem;
  font-size: .7rem; color: var(--on-surface-variant);
}
.ad-slot[data-size="300x250"] { min-width: 300px; min-height: 250px; }
.ad-slot[data-size="320x100"] { min-width: 320px; min-height: 100px; }
.ad-slot[data-size="336x280"] { min-width: 336px; min-height: 280px; }
.ad-slot[data-size="728x90"]  { min-width: 728px; min-height: 90px;  }
.ad-slot[data-size="970x250"] { min-width: 970px; min-height: 250px; }
@media (max-width: 719px) {
  .ad-slot[data-size="728x90"]  { min-width: 100%; min-height: 100px; }
  .ad-slot[data-size="970x250"] { min-width: 100%; min-height: 250px; }
}

/* ===== Utilitárias ===== */
.m3-stack { display: grid; gap: var(--space-4); }
.m3-stack-sm { display: grid; gap: var(--space-2); }
.m3-section { margin: var(--space-6) 0; }
.center { display: grid; justify-items: center; }
.muted { color: var(--on-surface-variant); }

/* ===== Correções específicas ===== */
#saldoMes, .saldo-mes, .saldo-mes * { color: var(--on-surface) !important; }

/* (Opcional futuro) Tema escuro via classe .theme-dark */
.theme-dark {
  --surface: #121212;
  --surface-variant: #18181B;
  --on-surface: #ECECEC;
  --on-surface-variant: #C8C7CB;
  --outline: #323236;
  --brand-on-primary: #FFFFFF;
}