/**
 * ==============================================================================
 * 🎨 THEME-CUSTOM.CSS — PERSONALIZAÇÃO DE CORES & MARCA (WHITE-LABEL)
 * ==============================================================================
 * Este arquivo centraliza todas as cores e a identidade visual do sistema.
 * Para alterar a identidade do salão/estúdio, basta modificar as variáveis
 * do bloco ativo abaixo, ou descomentar uma das 5 paletas pré-configuradas!
 *
 * Todas as telas (Bio, Agendamento, Portal da Cliente, Comprovante e Painel Admin)
 * herdam automaticamente estas definições.
 * ==============================================================================
 */

:root {
  /* ============================================================================
   * 🏆 PALETA ATIVA PADRÃO: LUXO WARM & CHAMPAGNE (Marrom Café, Madeira & Dourado)
   * Ideal para: Salões de Beleza Elegantes, Brow & Lash Designers de Alto Padrão
   * ============================================================================ */
  --brand: #8c5f3d;          /* Cor primária (Botões principais, badges, destaques) */
  --brand-strong: #5a3e2b;   /* Cor de ênfase (Títulos, botões hover, bordas de foco) */
  --brand-hover: #483121;    /* Cor de clique ativo */
  --brand-soft: #f4ede4;     /* Fundo suave para tags, badges e seleção de cards */
  --brand-pale: #faf6f0;     /* Fundo ultra-leve de destaque */

  --canvas: #f0ebe4;         /* Fundo de tela principal */
  --surface: #ffffff;        /* Fundo dos cartões e painéis */
  --surface-soft: #faf7f2;   /* Fundo de campos e tabelas */
  --surface-muted: #ede8e1;  /* Fundo secundário suave */

  --ink: #2c2826;            /* Texto principal de alto contraste */
  --ink-soft: #6b6460;       /* Texto secundário / descrições */
  --ink-faint: #9e968f;      /* Textos auxiliares e placeholders */

  --line: #ebd9c8;           /* Bordas sutis dos cards e divisores */
  --line-soft: #f2eae1;      /* Linhas ultrafinas */
  --line-strong: #d2c5b7;    /* Linhas de contorno destacado */

  --gold: #c5a059;           /* Dourado decorativo / estrelas / coroas */

  /* Cores específicas para Bio / Links */
  --color-brown: var(--brand-strong);
  --color-brown-deep: #2f211b;
  --color-brown-hover: var(--brand-hover);
  --color-caramel: var(--brand);
  --color-caramel-dark: var(--brand-strong);
  --color-nude: #e8d8d2;
  --color-paper: var(--canvas);
  --color-card-bg: var(--surface);
  --color-text-main: var(--ink);
  --color-text-body: var(--ink-soft);
  --color-text-muted: var(--ink-faint);
  --color-rule: var(--line);
  --color-hover: var(--brand-soft);
}

/* 
 ==============================================================================
 🌸 OPÇÃO 2: ROSE GOLD & BLUSH (Estética Feminina, Nails, Cílios & Sobrancelhas)
 Para ativar: descomente este bloco e comente o bloco padrão acima.
 ==============================================================================
:root {
  --brand: #b36b7d;
  --brand-strong: #8c4355;
  --brand-hover: #733242;
  --brand-soft: #faebef;
  --brand-pale: #fdf5f7;
  --canvas: #faf4f5;
  --surface: #ffffff;
  --surface-soft: #fdf8f9;
  --surface-muted: #f3e6e9;
  --ink: #332227;
  --ink-soft: #6e5b62;
  --ink-faint: #9c8990;
  --line: #ecd9de;
  --line-soft: #f5e9ec;
  --line-strong: #d9bcc3;
  --gold: #d4a373;
  --color-brown: var(--brand-strong);
  --color-brown-deep: #421e27;
  --color-brown-hover: var(--brand-hover);
  --color-caramel: var(--brand);
  --color-caramel-dark: var(--brand-strong);
  --color-nude: #eed2d8;
  --color-paper: var(--canvas);
  --color-card-bg: var(--surface);
  --color-text-main: var(--ink);
  --color-text-body: var(--ink-soft);
  --color-text-muted: var(--ink-faint);
  --color-rule: var(--line);
  --color-hover: var(--brand-soft);
}
*/

/* 
 ==============================================================================
 🌿 OPÇÃO 3: VERDE SPA & BOTÂNICO (Massoterapia, Clínicas de Estética, Terapias)
 Para ativar: descomente este bloco e comente o bloco padrão acima.
 ==============================================================================
:root {
  --brand: #3b6b55;
  --brand-strong: #254b3a;
  --brand-hover: #1c3d2e;
  --brand-soft: #eaf3ee;
  --brand-pale: #f3f8f5;
  --canvas: #f2f6f3;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  --surface-muted: #e3ebe5;
  --ink: #1e2e25;
  --ink-soft: #526359;
  --ink-faint: #85968d;
  --line: #dbe5df;
  --line-soft: #ebf1ed;
  --line-strong: #bcd0c3;
  --gold: #c5a059;
  --color-brown: var(--brand-strong);
  --color-brown-deep: #16241c;
  --color-brown-hover: var(--brand-hover);
  --color-caramel: var(--brand);
  --color-caramel-dark: var(--brand-strong);
  --color-nude: #cce0d4;
  --color-paper: var(--canvas);
  --color-card-bg: var(--surface);
  --color-text-main: var(--ink);
  --color-text-body: var(--ink-soft);
  --color-text-muted: var(--ink-faint);
  --color-rule: var(--line);
  --color-hover: var(--brand-soft);
}
*/

/* 
 ==============================================================================
 🖤 OPÇÃO 4: EDITORIAL NOIR & GOLD (Boutiques, Visagismo, Alta Barbearia & Luxo)
 Para ativar: descomente este bloco e comente o bloco padrão acima.
 ==============================================================================
:root {
  --brand: #1c1917;
  --brand-strong: #0c0a09;
  --brand-hover: #292524;
  --brand-soft: #f5f5f4;
  --brand-pale: #fafaf9;
  --canvas: #f5f5f4;
  --surface: #ffffff;
  --surface-soft: #fafaf9;
  --surface-muted: #e7e5e4;
  --ink: #1c1917;
  --ink-soft: #57534e;
  --ink-faint: #a8a29e;
  --line: #e7e5e4;
  --line-soft: #f5f5f4;
  --line-strong: #d6d3d1;
  --gold: #b48c36;
  --color-brown: var(--brand-strong);
  --color-brown-deep: #000000;
  --color-brown-hover: var(--brand-hover);
  --color-caramel: #b48c36;
  --color-caramel-dark: #8c6a21;
  --color-nude: #e7e5e4;
  --color-paper: var(--canvas);
  --color-card-bg: var(--surface);
  --color-text-main: var(--ink);
  --color-text-body: var(--ink-soft);
  --color-text-muted: var(--ink-faint);
  --color-rule: var(--line);
  --color-hover: var(--brand-soft);
}
*/

/* 
 ==============================================================================
 💜 OPÇÃO 5: LAVANDA & MODERN PURPLE (Estúdios Criativos, Nail Designers)
 Para ativar: descomente este bloco e comente o bloco padrão acima.
 ==============================================================================
:root {
  --brand: #7058a6;
  --brand-strong: #4f3b7d;
  --brand-hover: #3d2b63;
  --brand-soft: #f2eefa;
  --brand-pale: #f8f6fc;
  --canvas: #f6f3fb;
  --surface: #ffffff;
  --surface-soft: #fbf9fd;
  --surface-muted: #e9e3f4;
  --ink: #2b223d;
  --ink-soft: #63587a;
  --ink-faint: #988eaf;
  --line: #e3dbeF;
  --line-soft: #f1ecf8;
  --line-strong: #cfc1e4;
  --gold: #d4a373;
  --color-brown: var(--brand-strong);
  --color-brown-deep: #251b38;
  --color-brown-hover: var(--brand-hover);
  --color-caramel: var(--brand);
  --color-caramel-dark: var(--brand-strong);
  --color-nude: #dfd4f0;
  --color-paper: var(--canvas);
  --color-card-bg: var(--surface);
  --color-text-main: var(--ink);
  --color-text-body: var(--ink-soft);
  --color-text-muted: var(--ink-faint);
  --color-rule: var(--line);
  --color-hover: var(--brand-soft);
}
*/

/* ══════════════════════════════════════════════════════════════════════════════
   📅 Calendário Paginado 60 dias (15 em 15 dias com navegação direcional)
   Extensão de agenda — adicionado de forma não-destrutiva via cascade
   ══════════════════════════════════════════════════════════════════════════════ */

/* Wrapper do paginador */
.calendar-pager { width: 100%; }

/* Viewport oculta overflow para conter a animação de slide */
.date-grid-viewport {
  overflow: hidden;
  position: relative;
}

/* Estado inicial (sem animação no primeiro render) */
#dateGrid,
#adminDateGrid {
  transition: transform 240ms ease-out, opacity 180ms ease-out;
  will-change: transform;
}

/* Classes de entrada para animação direcional:
   Avançar: vem da direita → esquerda
   Recuar : vem da esquerda → direita                        */
#dateGrid.is-entering-forward,
#adminDateGrid.is-entering-forward  { transform: translateX(32px);  opacity: 0; }
#dateGrid.is-entering-backward,
#adminDateGrid.is-entering-backward { transform: translateX(-32px); opacity: 0; }
#dateGrid.is-active,
#adminDateGrid.is-active            { transform: translateX(0);     opacity: 1; }

/* Linha de navegação ← período → */
.calendar-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 34px;
}

/* Botão de seta */
.calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line, #ddd5cc);
  border-radius: var(--control-radius, 14px);
  background: var(--surface, #fffefb);
  color: var(--ink-soft, #6b6460);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}

.calendar-nav-btn:hover,
.calendar-nav-btn:focus-visible {
  color: var(--brand-strong);
  border-color: var(--brand-strong);
  background: var(--brand-muted, #f9f4ec);
  outline: none;
}

.calendar-nav-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-strong) 22%, transparent);
}

/* Quando hidden, some sem deixar espaço */
.calendar-nav-btn[hidden] { display: none !important; }

/* Indicador de período central: ex. "22–06 Set/Out" */
.calendar-page-indicator {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint, #a09890);
  flex: 1;
  text-align: center;
}

/* ─── Tenant Branding Override: Estúdio Demonstração (demo) ─── */
:root {
  --brand: #6d4720 !important;
  --brand-strong: #6d4720 !important;
  --brand-hover: #5a3a17 !important;
  --color-brown: #6d4720 !important;
  --color-brown-deep: #2f211b !important;
  --color-brown-hover: #5a3a17 !important;
}
.primary-button:hover {
  box-shadow: 0 4px 16px rgba(109, 71, 32, 0.3) !important;
}