/* app/static/css/theme.css */

/* ===========================
   Planejamento Escolar — Tema
   Identidade: Navy + Teal
   Fundo: static/img/fundo.png (1920x1080)
   Ajuste: PREENCHE 100% (sem faixas) usando cover
=========================== */

:root{
  --pe-navy:#0b1f3a;
  --pe-navy-2:#0e2a4d;
  --pe-teal:#1fb7ad;
  --pe-teal-2:#0f8f88;

  --pe-text:#0b1730;
  --pe-white:#ffffff;

  --pe-glass: rgba(255,255,255,.78);
  --pe-border: rgba(12, 46, 74, .12);
  --pe-shadow: 0 18px 50px rgba(0,0,0,.18);

  --pe-bg-opacity: .18;
  --pe-bg-saturate: 1.06;

  --pe-radius: 18px;
}

html, body{ height:100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--pe-text);
}

/* ===========================
   Background (global) — ocupa SEMPRE a tela toda
=========================== */
.bg-school{
  position: relative;
  min-height: 100vh;
  background: #f7fbff;
  overflow-x: hidden;
}

/* camada do fundo */
.bg-school::before{
  content:"";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  background-image: url("../img/fundo.png");
  background-repeat: no-repeat;

  /* ✅ preenche tudo sem faixas (sem distorcer, apenas corta proporcionalmente) */
  background-size: cover;

  /* ajuste fino do enquadramento (pode mudar para center center se preferir) */
  background-position: center top;

  opacity: var(--pe-bg-opacity);
  filter: saturate(var(--pe-bg-saturate));

  pointer-events:none;
  z-index:0;
}

/* overlay de luz/sombra */
.bg-school::after{
  content:"";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  background:
    radial-gradient(1000px 540px at 18% 18%, rgba(31,183,173,.20), transparent 60%),
    radial-gradient(1000px 540px at 85% 25%, rgba(11,31,58,.14), transparent 60%),
    radial-gradient(900px 520px at 50% 90%, rgba(31,183,173,.10), transparent 65%);

  pointer-events:none;
  z-index:0;
}

/* Mobile: fixed pode dar “piscada” em alguns aparelhos — troca para absolute */
@media (max-width: 992px){
  .bg-school::before,
  .bg-school::after{
    position: absolute;
  }
}

main, header, footer{
  position: relative;
  z-index: 1;
}

/* ===========================
   Footer
=========================== */
.pe-footer{
  background: rgba(255,255,255,.72);
  border-top: 1px solid rgba(12, 46, 74, .10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ===========================
   Cards (glass)
=========================== */
.pe-card{
  background: var(--pe-glass);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  box-shadow: var(--pe-shadow);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pe-footer, .pe-card{ background: rgba(255,255,255,.92); }
}

/* ===========================
   Dividers
=========================== */
.pe-divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(11,31,58,.18), transparent);
}

/* ===========================
   Buttons (global)
=========================== */
.pe-btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;

  background: linear-gradient(135deg, var(--pe-navy), var(--pe-navy-2));
  border: 1px solid rgba(255,255,255,.10);
  color: #fff !important;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;

  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}
.pe-btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.pe-btn-primary:focus,
.pe-btn-primary:focus-visible{
  outline: none;
  border-color: rgba(31,183,173,.70);
  box-shadow: 0 0 0 3px rgba(31,183,173,.20);
}
.pe-btn-primary:active{
  transform: translateY(0);
  border-color: rgba(31,183,173,.75);
  box-shadow: 0 0 0 3px rgba(31,183,173,.22);
}

.pe-btn-outline{
  background: transparent;
  border: 1px solid rgba(11,31,58,.25);
  color: var(--pe-navy);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
}
.pe-btn-outline:hover{
  border-color: rgba(31,183,173,.55);
  color: var(--pe-teal-2);
}

/* ===========================
   Navbar separador (app)
=========================== */
.pe-nav-sep{
  width: 1px;
  height: 26px;
  margin: 0 6px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  opacity: .9;
}
@media (max-width: 576px){
  .pe-nav-sep{
    height: 22px;
    margin: 0 4px;
    background: rgba(255,255,255,.18);
  }
}

/* ===========================
   Inputs
=========================== */
.pe-input{
  border-radius: 12px;
  border: 1px solid rgba(11,31,58,.18);
  padding: 12px 14px;
}
.pe-input:focus{
  border-color: rgba(31,183,173,.65);
  box-shadow: 0 0 0 3px rgba(31,183,173,.18);
}

/* ===========================
   Links padrão do sistema (fora da navbar)
=========================== */
.pe-link{
  color: var(--pe-teal-2);
  text-decoration: none;
  font-weight: 800;
}
.pe-link:hover{
  color: rgba(31,183,173,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Helper */
.pe-note{
  font-size: .92rem;
  color: rgba(11,23,48,.72);
}

/* ===== Navbar toggler (mobile) ===== */
.pe-topbar .pe-toggler{
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  padding: 8px 10px;
}

.pe-topbar .pe-toggler:focus{
  box-shadow: 0 0 0 3px rgba(31,183,173,.20);
}

.pe-topbar .navbar-toggler-icon{
  filter: invert(1);
  opacity: .92;
}

/* espaçamento melhor quando colapsa */
@media (max-width: 991.98px){
  .pe-topbar .navbar-nav{
    padding: 10px 0;
  }
  .pe-topbar .nav-link{
    padding: 10px 6px;
  }
}


/* =========================================================
   Lucide (ícones) — escala e alinhamento padrão
========================================================= */

/* garante que o <i data-lucide> vire um container estável */
i[data-lucide]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* tamanho base do SVG (evita ícone gigante/desalinhado) */
i[data-lucide] svg{
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* =========================================================
   Inputs com ícone (pe-field / pe-icon)
========================================================= */

.pe-field{
  position: relative;
}

/* ícone à esquerda dentro do campo */
.pe-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  /* ✅ verde padrão */
  color: var(--pe-accent, #1fb7ad);
}

/* padding do input para não “passar por cima” do ícone */
.pe-input{
  padding-left: 48px;
}

/* quando tem “olhinho” (senha) */
.pe-input.has-eye{
  padding-right: 52px;
}

/* botão do olho: área clicável e ícone alinhado */
.pe-eye-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--pe-accent, #1fb7ad);
}

.pe-eye-btn i[data-lucide] svg{
  width: 18px;
  height: 18px;
}