/* ==========================================================================
   base.css — tokens, reset e tipografia
   Design system extraído do layout aprovado "Dashboard Mesh V3".
   Nenhuma cor/medida deve ser escrita direto nos outros arquivos: use as
   variáveis abaixo.
   ========================================================================== */

:root {
  /* --- Superfícies ------------------------------------------------------ */
  --mesh-black:      #121212;  /* fundo da sidebar                          */
  --mesh-surface:    #1e1e1e;  /* hover / item ativo da sidebar             */
  --mesh-divider:    #2e2e2e;  /* divisórias dentro da sidebar              */
  --page-bg:         #F5F4F1;  /* fundo da área de conteúdo                 */
  --card-bg:         #FFFFFF;  /* cards, topbar, modais                     */
  --card-bg-muted:   #FBFAF8;  /* células fora do mês no calendário         */
  --track-bg:        #F0EFEC;  /* trilho de barra de progresso, avatar      */

  /* --- Traço e texto ---------------------------------------------------- */
  --border:          #E5E4E0;
  --border-width:    0.5px;
  --text:            #1a1a1a;
  --text-invert:     #FFFFFF;
  --muted:           #888780;
  --muted-strong:    #57564F;  /* rótulos de grupo na sidebar               */
  --muted-weak:      #B5B4AE;

  /* --- Marca ------------------------------------------------------------ */
  --primary:         #DD0426;
  --primary-hover:   #b00320;
  --acao:            #2E2E2C;  /* ação principal da tela: cinza-escuro     */
  --acao-hover:      #121212;

  /* --- Status (badges) -------------------------------------------------- */
  --badge-laranja-bg:  #FBEDE1;  --badge-laranja-fg:  #8A4200;
  --badge-verde-bg:    #E6F2EA;  --badge-verde-fg:    #166534;
  --badge-vermelho-bg: #FBE5E9;  --badge-vermelho-fg: #B00320;
  --badge-azul-bg:     #E7EDF8;  --badge-azul-fg:     #1E4D8C;
  --badge-cinza-bg:    #F0EFEC;  --badge-cinza-fg:    #57564F;
  --badge-amarelo-bg:  #FFF3C4;  --badge-amarelo-fg:  #7A5E00;  /* "Prazo hoje" */

  /* --- Cor por cliente (pontos e marcações de calendário) --------------- */
  --cliente-cavalleri: #DD0426;
  --cliente-belmonte:  #1E4D8C;
  --cliente-haniel:    #166534;
  --cliente-graciema:  #8A4200;

  /* --- Espaçamento ------------------------------------------------------ */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 32px;

  /* --- Raio ------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-lg:  12px;
  --radius-full: 999px;

  /* --- Tipografia ------------------------------------------------------- */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fw-regular: 400;
  --fw-medium:  500;

  /* --- Medidas do shell ------------------------------------------------- */
  --sidebar-w:     220px;
  --sidebar-w-min:  56px;  /* sidebar recolhida, só ícones */
  --topbar-h:       48px;
  --control-h:      32px;
  --control-h-sm:   24px;
  --icon:           16px;
  --icon-lg:        18px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

button { font-family: inherit; }

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Tipografia semântica
   ========================================================================== */

/* Cabeçalho de tela: título + subtítulo + ações à direita */
.page-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.page-head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.page-head-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
}

.page-title {
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--fs-13);
  color: var(--muted);
}

/* Título de card / seção */
.section-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
}

/* Rótulo em caixa alta usado em stat cards e campos de formulário */
.label-caps {
  font-size: var(--fs-11);
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Texto auxiliar de 11px */
.meta {
  font-size: var(--fs-11);
  color: var(--muted);
}

.text-sm { font-size: var(--fs-13); }

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}