:root {
  --color-primary: #9d4edd;
  --color-primary-dark: #7b2cbf;
  --color-primary-light: #e0aaff;
  --color-accent: #f72585;
  --color-bg: #faf7fc;
  --color-surface: #ffffff;
  --color-border: #ede7f6;
  --color-text: #2b1d3a;
  /* Derivada de --color-text (misturada com o fundo) em vez de fixa, para
     continuar legível seja qual for a cor de texto/fundo escolhida em
     Personalizar sistema (ver aplicarTema em app.js). */
  --color-text-muted: color-mix(in srgb, var(--color-text) 60%, var(--color-bg) 40%);
  --color-success: #2a9d8f;
  --color-danger: #e63946;
  --color-warning: #f4a261;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(123, 44, 191, 0.08);
  --shadow-lg: 0 12px 40px rgba(123, 44, 191, 0.14);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }

/* ---------- App shell (staff) ---------- */
.app-shell { display: flex; min-height: 100vh; }

/* Barra fina só visível em ecrãs pequenos (telemóvel/tablet), com o botão
   de hambúrguer que abre a sidebar como gaveta lateral — ver .sidebar-overlay
   e o toggle em js/app.js. Escondida em ecrãs largos (a sidebar já fica
   sempre visível nesse caso). */
.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.hamburger {
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: 1.1rem; line-height: 1; padding: 6px 10px; color: var(--color-text);
}
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 29;
}

.sidebar {
  width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.sidebar .brand { padding: 0 8px 20px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--color-text-muted); font-size: 0.92rem; font-weight: 500;
  border: none; background: none; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--color-bg); color: var(--color-text); }
.nav-item.active { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; }
.sidebar-footer { margin-top: auto; padding: 10px 8px; font-size: 0.8rem; color: var(--color-text-muted); }
.sidebar-footer button { margin-top: 8px; }

/* Aviso de piloto a terminar — "antecedencia" é mais discreto (ainda ativo,
   só a avisar com alguns dias de margem); "tolerancia" é mais firme
   (o piloto já acabou e está só na margem de tolerância). */
.piloto-aviso { margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.78rem; line-height: 1.4; }
.piloto-aviso.antecedencia { background: #fff4e8; color: #b5651d; border: 1px solid #f4a261; }
.piloto-aviso.tolerancia { background: #fde8e8; color: var(--color-danger); border: 1px solid var(--color-danger); }
.piloto-aviso button { background: rgba(255, 255, 255, 0.65); color: inherit; border: 1px solid currentColor; }
.piloto-aviso button:hover { background: rgba(255, 255, 255, 0.95); }

.main-area { flex: 1; padding: 28px 36px; overflow-y: auto; }

.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-header p { color: var(--color-text-muted); margin: 2px 0 0; font-size: 0.9rem; }

/* ---------- Cards / layout ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Buttons / inputs ---------- */
button {
  font-family: inherit; cursor: pointer; border: none; border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: 0.88rem; font-weight: 600; transition: transform 0.08s ease, opacity 0.15s;
}
button:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; }
.btn-primary:hover { opacity: 0.92; }
.btn-secondary { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-border); }
.btn-danger { background: #fde8e8; color: var(--color-danger); }
.btn-danger:hover { background: #fbd2d2; }
/* Verde reconhecível do WhatsApp — link gratuito wa.me (ver rowAgendamento
   em app.js), sem custo nenhum, distinto de propósito dos outros btn-*. */
.btn-whatsapp { background: #e3f6e9; color: #1f8a4c; }
.btn-whatsapp:hover { background: #cdeed9; }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Estado de foco visível (navegação por teclado) — os inputs já tinham,
   faltava nos botões e nos links usados como botão (ex.: CTA "Falar
   connosco" do pacote Enterprise, que é um <a>, não um <button>). */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* As classes .btn-primary/-secondary/-danger foram pensadas só para
   <button> — o padding/cursor/etc. vêm da regra do elemento "button" lá
   em cima. O CTA "Falar connosco" (pacote Enterprise) usa <a>, por ser
   um mailto:, e ficava sem padding nenhum e com o sublinhado por defeito
   do browser. Isto torna as classes .btn-* consistentes em qualquer tag. */
a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-whatsapp, a.btn-sm {
  display: inline-block;
  font-family: inherit; cursor: pointer; border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: 0.88rem; font-weight: 600;
  text-decoration: none; text-align: center;
  transition: transform 0.08s ease, opacity 0.15s;
}
a.btn-primary:active, a.btn-secondary:active, a.btn-danger:active { transform: scale(0.98); }

input, select, textarea {
  font-family: inherit; font-size: 0.9rem; padding: 9px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary-light); border-color: var(--color-primary); }
label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.field { margin-bottom: 14px; }

/* Checkbox com estilo próprio — antes usava a aparência nativa do browser
   (quadrado cinzento genérico), a única coisa em toda a app que não segue
   as cores do salão. `appearance: none` tira o desenho nativo e o
   ::before desenha o "visto" manualmente; especificidade de
   `input[type="checkbox"]` (0,1,1) já vence a regra geral `input` (0,0,1)
   acima, incluindo o width:100% que só faz sentido para inputs de texto. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="checkbox"]:hover { border-color: var(--color-primary); }
input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Tables / lists ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th { text-align: left; color: var(--color-text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--color-border); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
td { padding: 10px; border-bottom: 1px solid var(--color-border); }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge-confirmado { background: #e6f4ea; color: var(--color-success); }
.badge-concluido { background: #ede4f9; color: var(--color-primary-dark); }
.badge-cancelado { background: #fde8e8; color: var(--color-danger); }
.badge-falta { background: #fff1d6; color: #a15c00; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); font-size: 0.8rem; }

/* ---------- Login ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f3e8ff, #ffe4f1); }
.login-card { width: 360px; padding: 32px; }
.login-card .brand { justify-content: center; margin-bottom: 4px; font-size: 1.6rem; }
.login-card .subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: 22px; font-size: 0.85rem; }
.demo-users { margin-top: 16px; font-size: 0.78rem; color: var(--color-text-muted); background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px 12px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--color-text); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 0.85rem; z-index: 999; max-width: 320px; }
.toast.error { background: var(--color-danger); }
.toast.success { background: var(--color-success); }

/* ---------- Modais ---------- */
/* Cada abrirModalX() só injeta um <div class="card"> dentro de #modal-root,
   sem overlay próprio — o que fazia o "modal" aparecer no fluxo normal da
   página, lá em baixo, depois de todas as secções (ex: em Equipa, depois
   de Personalizar sistema + Dias de Folga + Convidar Equipa), obrigando a
   fazer scroll para o ver. Isto resolve-se só com CSS, sem tocar no JS:
   quando #modal-root tem conteúdo, ele próprio passa a ser o overlay fixo
   e centra o .card lá dentro. */
#modal-root:not(:empty) {
  position: fixed;
  inset: 0;
  background: rgba(43, 29, 58, 0.45);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 5vh 16px;
}
#modal-root:not(:empty) > .card {
  width: 100%;
  max-width: 560px;
  margin-top: 0 !important;
  box-shadow: var(--shadow-lg);
}
/* Variante para modais com conteúdo mais largo (ex.: grelha de 4 pacotes
   em Definições), em vez de mudar o limite universal de 560px, que continua
   a ser o correto para modais normais (formulários, confirmações). */
#modal-root:not(:empty) > .card.card-wide {
  max-width: 900px;
}

/* ---------- Ícones (substituem os emojis no backoffice — opção "traço
   fino" que escolheste na comparação: uma só cor, sem fundo). Ver
   js/icons.js para o sprite e o helper icone(). currentColor + 1em fazem
   o ícone seguir sempre a cor e o tamanho do texto à volta — por isso
   funciona sem ajustes dentro de botões, itens de menu, avisos, etc.,
   incluindo o estado "active" do menu lateral (que já muda a cor do
   texto para branco). ---------- */
.icon-outline {
  width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-outline.icon-lg { width: 2.4em; height: 2.4em; stroke-width: 1.4; }

/* ---------- Grelha de cores predefinidas (Definições > Personalizar
   sistema) — seletor rápido inspirado nas Cores do Windows: uma grelha de
   quadrados clicáveis + um último quadrado "+" que é o <input type="color">
   nativo, para quem quiser uma cor totalmente personalizada. ---------- */
.cor-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cor-swatch {
  width: 26px; height: 26px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.cor-swatch.selecionado { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4b5563; }
.cor-swatch-personalizada {
  position: relative; display: block; overflow: hidden;
}
.cor-swatch-personalizada::after {
  /* Um círculo semi-opaco atrás do "+" (em vez de só cor+sombra de texto)
     mantém-se legível tanto em cores muito claras como muito escuras da
     grelha — o contraste do texto sozinho falhava em tons como o branco. */
  content: "+"; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.78); color: #374151;
  font-weight: 800; font-size: 11px; line-height: 1;
  pointer-events: none;
}
.cor-swatch-personalizada input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0; cursor: pointer; opacity: 0;
}

/* ---------- Public booking page ---------- */
.public-page { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }

/* Seletor de idioma do cliente (Glametrix Link / página de confirmação —
   ver js/i18n.js). Fica sempre visível no topo, para trocar de idioma a
   qualquer momento do fluxo de marcação. */
.idioma-seletor { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.idioma-seletor button {
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted);
  border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600;
}
.idioma-seletor button.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.public-hero { text-align: center; padding: 30px 20px 10px; }
.public-hero h1 { margin: 6px 0 2px; font-size: 1.8rem; }
.public-hero p { color: var(--color-text-muted); }
.service-card { display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; cursor: pointer; background: var(--color-surface); }
.service-card:hover { border-color: var(--color-primary); }
.service-card.selected { border-color: var(--color-primary); background: #f8f1ff; box-shadow: var(--shadow); }
.service-card .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 12px; }
.service-name { font-weight: 600; }
.service-meta { color: var(--color-text-muted); font-size: 0.82rem; }
.price { font-weight: 700; color: var(--color-primary-dark); }

.steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.step-dot.active { background: var(--color-primary); width: 22px; border-radius: 4px; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.slot { padding: 9px 4px; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.85rem; cursor: pointer; background: var(--color-surface); }
.slot.livre:hover { border-color: var(--color-primary); }
.slot.ocupado { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.slot.selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.checkbox-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.checkbox-row:last-child { border-bottom: none; }
/* Antes usava --color-bg, quase idêntico a --color-surface (o fundo do
   card onde vive) — quase sem contraste visível. Agora mistura a cor
   principal do salão com a superfície, para se destacar sempre, seja
   qual for o tema escolhido em Personalizar sistema. */
.total-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface) 88%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border) 75%);
  border-radius: var(--radius); margin-top: 16px; font-size: 1.1rem; font-weight: 700;
}

.empty-state { text-align: center; color: var(--color-text-muted); padding: 40px 20px; font-size: 0.9rem; }
.muted { color: var(--color-text-muted); font-size: 0.85rem; }
.section-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 12px; }
.hidden { display: none !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.text-right { text-align: right; }

/* Tabelas mais largas que o ecrã ganham scroll horizontal dentro do
   próprio card, em vez de espremer o texto ou espalhar-se para fora da
   página — comum em telemóvel (ex.: tabela de Comissões em Relatórios). */
.card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Responsividade (telemóvel / tablet) ---------- */
@media (max-width: 840px) {
  .topbar { display: flex; }
  .sidebar-overlay.open { display: block; }

  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
    width: min(260px, 82vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }

  .main-area { padding: 18px 16px; }
  .login-card { width: min(360px, 100%); }
  .login-screen { padding: 20px; }
  .public-page { padding: 24px 14px 60px; }
}