/* =========================================================
   BabyLog - Estilo base e temas por sexo
   ========================================================= */

/* ----------- Tema neutro (default / X) ----------- */
:root {
  --theme-bg: #f3f4f6;          /* cinza muito claro */
  --theme-accent: #9ca3af;      /* cinza médio */
  --theme-accent-hover: #6b7280;
}

/* ----------- Tema masculino ----------- */
[data-theme="boy"] {
  --theme-bg: #dbeafe;          /* azul clarinho */
  --theme-accent: #3b82f6;
  --theme-accent-hover: #2563eb;
}

/* ----------- Tema feminino ----------- */
[data-theme="girl"] {
  --theme-bg: #FDF5E6;          /* rosa clarinho */
  --theme-accent: #f472b6;
  --theme-accent-hover: #ec4899;
}

/* ----------- Aplicação geral ----------- */
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--theme-bg);
  transition: background-color 0.3s ease-in-out;
}

/* Botões */
.btn-primary, .btn-accent {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
}
.btn-primary:hover, .btn-accent:hover {
  background-color: var(--theme-accent-hover);
  border-color: var(--theme-accent-hover);
}

/* KPI cards */
.card-kpi {
  border-left: 6px solid var(--theme-accent);
  border-radius: 1rem;
}


/* === Uniformização dos cards no dashboard === */
.card-kpi {
  border-left: 6px solid var(--theme-accent);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  background: #fff;
}

.card-kpi .card-body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  color: #333;
}

.card-kpi h6 {
  font-weight: 600;
  color: var(--theme-accent);
  margin-bottom: .75rem;
  letter-spacing: 0.2px;
}

.card-kpi strong {
  color: #111;
  font-weight: 600;
}

.card-kpi .text-muted {
  color: #6b7280 !important;
}

/* Margens e espaçamento consistentes */
.card-kpi .mb-1 { margin-bottom: .4rem !important; }
.card-kpi .mb-0 { margin-bottom: 0 !important; }








/* Footer e pequenos ajustes */
footer {
  border-top: 1px solid #e5e7eb;
  margin-top: 3rem;
}
/* === Botão principal redondo (Iniciar/Terminar) === */
.btn-feed-main {
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  border: none;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .2px;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow:
    0 10px 20px rgba(0,0,0,.10),
    inset 0 -2px 0 rgba(255,255,255,.15);
}

/* estado "iniciar" usa a cor do tema (rosa/azul) */
[data-theme] .btn-feed-main.btn-success {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, white 30%) 100%);
}

/* estado "terminar" mantém o vermelho do Bootstrap mas com brilho suave */
.btn-feed-main.btn-danger {
  background: linear-gradient(135deg, var(--bs-danger) 0%, color-mix(in oklab, var(--bs-danger) 70%, white 25%) 100%);
}

/* anel exterior suave */
.btn-feed-main::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(transparent 55%, color-mix(in oklab, var(--accent) 30%, transparent 70%) 70%);
  z-index: -1;
  filter: blur(0.5px);
}

/* hover/active */
.btn-feed-main:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.12), inset 0 -2px 0 rgba(255,255,255,.18); }
.btn-feed-main:active { transform: translateY(0);  filter: saturate(1.05); }

/* === Botões de mama (Esq./Dir.) === */
.btn-breast {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  border: 1px solid var(--bs-border-color);
  background: #fff;
  color: var(--bs-body-color);
  font-weight: 700;
  box-shadow:
    0 6px 14px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* estado “parado” (warning no teu JS) fica só com tom quentinho */
.btn-breast.btn-warning {
  background: linear-gradient(180deg, #fff, color-mix(in oklab, #fff 85%, var(--accent) 15%));
  border-color: color-mix(in oklab, var(--accent) 20%, var(--bs-border-color) 80%);
}

/* estado “ativo” (success no teu JS) realça com a cor do tema */
[data-theme] .btn-breast.btn-success {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 90%, white 10%), var(--accent));
  color: #fff;
  border-color: color-mix(in oklab, var(--accent) 80%, black 20%);
  box-shadow:
    0 8px 18px color-mix(in oklab, var(--accent) 25%, transparent),
    inset 0 -2px 0 rgba(255,255,255,.15);
}

/* hover/active */
.btn-breast:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(0,0,0,.08); }
.btn-breast:active { transform: translateY(0); }

/* rótulo por baixo dos L/Dir timers */
.breast-meta { margin-top:.35rem; font-size:.8rem; }

/* Ajustes responsivos pequeninos */
@media (max-width: 420px) {
  .btn-feed-main { width: 108px; height:108px; }
  .btn-breast    { width: 88px;  height:88px;  border-radius: 18px; }
}

/* === FIX: mapear --accent para o que já tens (--theme-accent) === */
:root, [data-theme], [data-theme="neutral"], [data-theme="boy"], [data-theme="girl"] {
  --accent: var(--theme-accent);
  --accent-hover: var(--theme-accent-hover);
}

/* === Fallbacks sólidos (caso color-mix não exista) === */
.btn-feed-main.btn-success { background-color: var(--accent); }
.btn-feed-main.btn-danger  { background-color: var(--bs-danger); }

.btn-breast.btn-success {
  background-color: var(--accent);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 80%, #000 20%);
}
.btn-breast.btn-warning {
  background-color: #fff7e6; /* tom quentinho */
}

/* === Versão com gradiente (só quando o browser suporta color-mix) === */
@supports (background: color-mix(in oklab, white 50%, black 50%)) {
  [data-theme] .btn-feed-main.btn-success {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, white 30%) 100%);
  }
  .btn-feed-main.btn-danger {
    background: linear-gradient(135deg, var(--bs-danger) 0%, color-mix(in oklab, var(--bs-danger) 70%, white 25%) 100%);
  }
  .btn-breast.btn-warning {
    background: linear-gradient(180deg, #fff, color-mix(in oklab, #fff 85%, var(--accent) 15%));
  }
  [data-theme] .btn-breast.btn-success {
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 90%, white 10%), var(--accent));
  }
}
/* === Tipografia uniforme dos cards === */
.card-kpi .card-body { font-size: 0.95rem; }
.card-kpi .kpi-line  { font-size: 0.95rem; line-height: 1.35; margin-bottom: .35rem; }

/* Labels e valores consistentes */
.card-kpi .kpi-label { font-weight: 600; color: #111; margin-right: .25rem; }
.card-kpi .kpi-value { font-weight: 500; color: #111; }
.card-kpi .kpi-note  { color: #6b7280; font-weight: 500; }

/* Para manter o 1.º card compatível (já usa <strong>) */
.card-kpi strong { font-weight: 600; color: #111; }

/* === Corrigir estilo do campo "Intervalo (h)" === */
.card-kpi form label[for], 
.card-kpi form label.small {
  font-weight: 600;
  color: #111;
  font-size: 0.95rem;
  margin-bottom: 0;
}

.card-kpi form input.form-control-sm {
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  height: calc(1.6em + .5rem + 2px);
  padding: .25rem .5rem;
}


/* =======================
   Foto do bebé no dashboard
   ======================= */
.photo-wrapper {
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.photo-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(0,0,0,.12);
}
.photo-wrapper .overlay {
  transition: opacity .2s ease;
}
.photo-wrapper:hover .overlay {
  opacity: 1 !important;
}

/* Borda do tema (azul/rosa/neutro) */
[data-theme="boy"] .theme-border {
  border-color: #3b82f6 !important;
}
[data-theme="girl"] .theme-border {
  border-color: #ec4899 !important;
}
[data-theme="neutral"] .theme-border {
  border-color: #9ca3af !important;
}