/* ========================================================================== */
/*  SignaCRM — Fundação Visual (Fase 1 • Correções)                           */
/*  - Tema claro/escuro com variáveis globais                                 */
/*  - Containers e utilitários padronizados                                   */
/*  - Componentes base (botões, cards, tabelas, filtros)                      */
/* ========================================================================== */

/* ------------------------------- */
/* Tema claro (padrão)             */
/* ------------------------------- */
:root{
  /* Dimensões do shell */
  --topbar-h:      56px;

  /* Cores base */
  --bg:            #f7f8fb;
  --surface:       #ffffff;
  --surface-2:     #f2f5fb;
  --line:          #e5e7eb;
  --text:          #0f172a;
  --muted:         #64748b;

  /* Ações */
  --accent:        #22c55e;
  --primary:       #3b82f6;
  --danger:        #ef4444;
  --warning:       #f59e0b;
  --info:          #06b6d4;

  /* Dimensão e sombra */
  --radius:        14px;
  --radius-sm:     10px;
  --shadow:        0 12px 30px rgba(15,23,42,.08);
  --shadow-soft:   0 10px 24px rgba(2,6,23,.08);

  /* Tabelas */
  --table-row-even: rgba(249,250,251,.9);
  --table-row-odd:  #ffffff;

  /* Layout (reduzimos o “respiro” para aproveitar melhor a tela) */
  --container-max:  100%;
  --container-x:    18px;
  --gap:            18px;
  --gap-lg:         18px;
  --gap-xl:         24px;
}

/* ------------------------------- */
/* Tema escuro                     */
/* ------------------------------- */
html[data-theme="dark"]{
  --bg:            #0b111f;
  --surface:       #0f172a;
  --surface-2:     #0b1220;
  --line:          #1f2937;
  --text:          #e5e7eb;
  --muted:         #9ca3af;

  --accent:        #22c55e;
  --primary:       #60a5fa;
  --danger:        #ef4444;
  --warning:       #fbbf24;
  --info:          #22d3ee;

  --shadow:        0 14px 34px rgba(0,0,0,.35);
  --shadow-soft:   0 10px 24px rgba(0,0,0,.35);

  --table-row-even:    #020617;
  --table-row-odd:     #0b1220;
}

/* ------------------------------- */
/* Ajustes de inputs no tema escuro */
/* ------------------------------- */
html[data-theme="dark"] input[type="date"] {
  background: #111827;          /* um pouco mais claro que o --surface */
  color: var(--text);
}

/* Deixa o ícone do calendário visível no dark (Chrome, Edge, etc.) */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
}

/* Opcional: borda um pouco mais clara pra destacar o campo */
html[data-theme="dark"] input[type="date"] {
  border-color: #374151;
}

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

html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Quando o topo fixo está presente, empurra o conteúdo para baixo */
body.has-topbar{ padding-top: var(--topbar-h); }

/* Links básicos */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Utilitários */
.hidden{ display:none !important; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ========================================================================== */
/* Containers padrão                                                          */
/* ========================================================================== */
.wrap{
  max-width: var(--container-max);
  margin: 12px auto 24px;               /* menos espaço externo */
  padding: 0 var(--container-x);        /* menos espaço lateral */
}

/* Cabeçalho de página (título + ações) */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}
.page-header .left h1{
  margin:0;
  font-size: 1.28rem;
  font-weight: 600;
}
.page-actions{ display:flex; align-items:center; gap:8px; }

/* ========================================================================== */
/* Botões                                                                     */
/* ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.5rem .9rem;
  border-radius:.6rem; border:1px solid transparent;
  background:var(--surface); color:var(--text);
  font-size:.875rem; line-height:1; cursor:pointer; text-decoration:none;
  box-shadow: var(--shadow);
}
.btn:hover{ filter: brightness(0.98); }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.btn-primary{
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}
.btn-outline{
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost{
  background: transparent;
  color: var(--text);
  border-color: transparent;
}

/* Chips/badges simples */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .55rem; border-radius:999px;
  background: var(--surface-2);
  color: var(--text); border: 1px solid var(--line);
  font-size:.75rem;
}

/* ========================================================================== */
/* Cards e grids                                                              */
/* ========================================================================== */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .card-body{ padding: 1rem 1.1rem; overflow: auto; }

.cards-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}

/* Wrapper de gráfico (altura controlada e estável) */
.chart-wrap{
  height: 320px;
  position: relative;
  overflow: hidden;
}

/* ========================================================================== */
/* Formulários                                                                */
/* ========================================================================== */
input[type="text"], input[type="date"], input[type="number"],
input[type="email"], input[type="password"],
select, textarea{
  width:100%;
  height: 44px;
  padding: 0 .7rem;
  border-radius:.55rem;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size:.92rem;
  outline: none;
}
textarea{ height:auto; min-height: 96px; padding:.6rem .7rem; }
input::placeholder, textarea::placeholder{ color: var(--muted); }
input:focus, select:focus, textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in hsl, var(--primary) 18%, transparent);
}

/* ========================================================================== */
/* Tabelas                                                                    */
/* ========================================================================== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius: var(--radius-sm);
  border:1px solid var(--line);
  overflow:hidden;
  font-size:.85rem;
  background: var(--surface);
}
.table thead{ background: var(--surface-2); }
.table thead th{
  padding:.55rem .6rem;
  text-align:left;
  border-bottom:1px solid var(--line);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--muted);
}
.table tbody td{
  padding:.55rem .6rem;
  border-bottom:1px solid rgba(148,163,184,.25);
}
.table tbody tr:nth-child(even){ background: var(--table-row-even); }
.table tbody tr:nth-child(odd) { background: var(--table-row-odd); }

/* ========================================================================== */
/* Filtros como CARD (visual consistente)                                     */
/* ========================================================================== */
.filters-panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: var(--gap-lg);
  display: grid;
  gap: 12px;
}
.filters-panel[hidden]{ display:none !important; }

.filters-panel .row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

.filters-panel .actions{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}

/* Ícones herdam a cor do texto */
svg{ color: inherit; }