/* =====================================================================
   PETPRAIEIRO — Identidade visual
   Paleta inspirada em praia/Cumbuco: areia, azul mar, coral, verde-água.
   ===================================================================== */

:root[data-tema="claro"] {
  --pp-bg: #f6f3ec;            /* areia clara */
  --pp-bg-cards: #ffffff;
  --pp-texto: #1f2a30;
  --pp-texto-suave: #6b7680;
  --pp-borda: #e6e1d6;
  --pp-primaria: #0e7c86;      /* azul-esverdeado do mar */
  --pp-primaria-hover: #0b6169;
  --pp-coral: #ff7a59;         /* detalhe coral (praia) */
  --pp-amarelo: #f5b942;       /* sol */
  --pp-sucesso: #2e9e5b;
  --pp-perigo: #d1495b;
  --pp-sidebar-bg: #0e2f33;    /* azul petróleo profundo */
  --pp-sidebar-texto: #d6ece9;
  --pp-sidebar-ativo: #ff7a59;
}

:root[data-tema="escuro"] {
  --pp-bg: #10181a;
  --pp-bg-cards: #172227;
  --pp-texto: #e8f0ee;
  --pp-texto-suave: #9fb0ac;
  --pp-borda: #263336;
  --pp-primaria: #37b7bd;
  --pp-primaria-hover: #56cdd2;
  --pp-coral: #ff8a6b;
  --pp-amarelo: #f5c860;
  --pp-sucesso: #46b877;
  --pp-perigo: #e26575;
  --pp-sidebar-bg: #0a1618;
  --pp-sidebar-texto: #c9dbd8;
  --pp-sidebar-ativo: #ff8a6b;
}

body {
  background: var(--pp-bg);
  color: var(--pp-texto);
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
}

/* ---------- Tela de login ---------- */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--pp-sidebar-bg) 0%, var(--pp-primaria) 140%);
}
.login-card {
  background: var(--pp-bg-cards);
  color: var(--pp-texto);
  padding: 2.5rem;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.logo-petpraieiro {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--pp-primaria);
}
.logo-petpraieiro span { color: var(--pp-coral); }

/* ---------- Shell do app ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--pp-sidebar-bg);
  color: var(--pp-sidebar-texto);
  flex-shrink: 0;
  transition: width .2s ease;
  overflow-x: hidden;
}
.sidebar.recolhida { width: 72px; }
.sidebar-brand { padding: 1.25rem 1rem; }
.sidebar-brand .logo-petpraieiro { color: #fff; font-size: 1.25rem; }
.sidebar-brand .logo-petpraieiro span { color: var(--pp-sidebar-ativo); }

.sidebar-nav { display: flex; flex-direction: column; padding: .5rem; gap: .15rem; }
.sidebar-nav .nav-link {
  color: var(--pp-sidebar-texto);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 10px;
  font-size: .9rem;
  white-space: nowrap;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--pp-sidebar-ativo); color: #10181a; font-weight: 600; }

.app-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--pp-bg-cards);
  border-bottom: 1px solid var(--pp-borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-titulo { font-weight: 600; }
.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.btn-icon { border: none; background: transparent; }
.avatar-circulo {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pp-primaria); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}

.app-main { padding: 1.25rem; }

/* ---------- Cards / KPIs do dashboard ---------- */
.kpi-card {
  background: var(--pp-bg-cards);
  border: 1px solid var(--pp-borda);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
.kpi-valor { font-size: 1.6rem; font-weight: 700; }
.kpi-label { color: var(--pp-texto-suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Badges de status de agendamento ---------- */
.badge-status { font-weight: 600; }
.status-agendado { background: #9aa5ab; }
.status-confirmado { background: var(--pp-primaria); }
.status-em_banho, .status-em_tosa, .status-secagem, .status-finalizacao { background: var(--pp-amarelo); color:#3a2a00; }
.status-pronto, .status-finalizado { background: var(--pp-sucesso); }
.status-falta, .status-cancelado { background: var(--pp-perigo); }

/* ---------- Alertas do pet (segurança operacional de banho/tosa) ---------- */
.alerta-pet { font-size: .78rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; display: inline-flex; align-items: center; gap: .3rem; }
.alerta-agressivo { background: #fde3e3; color: #a3232f; }
.alerta-alergia { background: #fff1cf; color: #8a5c00; }
.alerta-sensivel { background: #e6f0ff; color: #204d95; }

@media (max-width: 768px) {
  .sidebar { position: fixed; left: -240px; height: 100%; z-index: 1050; }
  .sidebar.aberta { left: 0; }
}