/* =====================================================
   PADRÃO GLOBAL – STYLE 
   Aplica-se ao: 
    index.php
    admin/painel.php
  ===================================================== */



/* ==============================================================
   Login --> index.php (namespace .auth-*)
   ============================================================= */
   
:root{
  --auth-bg: #f4e9dd;
  --auth-paper: #ffffff;
  --auth-ink: #5c3d27;
  --auth-muted: #7a6759;
  --auth-brand: #b07b58;
  --auth-brand-dark: #8f644a;
  --auth-line: #eadfd1;
  --auth-shadow: 0 14px 40px rgba(0,0,0,.10);
}

html,body{ height:100%; }
body.auth-bg{
  margin:0; background: #f4e9dd; /* perto do seu padrão */
  display:flex; align-items:center; justify-content:center;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--auth-ink);
}

.auth-card{
  width: 420px; max-width: 92vw;
  background: var(--auth-paper);
  border-radius: 16px;
  box-shadow: var(--auth-shadow);
  padding: 28px 26px 24px;
}

.auth-title{
  margin: 0 0 16px 0;
  text-align:center;
  font-size:28px;
  font-weight:800;
  color: var(--auth-brand-dark);
}

.auth-error{
  margin: -4px 0 12px;
  background: #fde9e7; color:#b64433;
  border:1px solid #f4c7c2; border-radius:10px;
  padding: 10px 12px; font-weight:600; text-align:center;
}

.auth-form{ display:flex; flex-direction:column; gap:10px; }

/* Campo com ícone à esquerda e botão de mostrar senha à direita */
.auth-field{
  position: relative;
  display:flex; align-items:center;
  border:1.6px solid var(--auth-line);
  border-radius: 10px;
  background: #fff;
  padding: 0 10px 0 36px; /* espaço para ícone à esquerda */
}

.auth-field:focus-within{
  border-color: #d3a171;
  box-shadow: 0 0 0 2px #f1e3d3 inset;
}

.auth-icon{
  position:absolute; left:12px;
  color:#c29878; font-size:14px;
}

.auth-field input{
  width:100%;
  border:0; outline:0; background:transparent;
  padding: 12px 10px;
  font-size:14.5px; color:var(--auth-ink);
}

.auth-field input::placeholder{
  color:#a99280;
}

/* Botão de mostrar/ocultar senha */
.auth-toggle{
  position:absolute; right:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border:0; background:transparent; color:#c29878; cursor:pointer;
  border-radius: 8px;
}
.auth-toggle:hover{ background:#fff5ec; }

/* Botão principal */
.auth-btn{
  margin-top:6px;
  width: 100%;
  background: var(--auth-brand);
  color: #fff;
  border: 1px solid rgba(0,0,0,.04);
  font-weight:800;
  padding: 12px 14px;
  border-radius: 10px;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
}
.auth-btn:hover{
  background: var(--auth-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

/* Responsivo leve */
@media (max-width: 380px){
  .auth-card{ padding:22px 18px 18px; }
  .auth-title{ font-size:24px; }
}


/* =====================================================================
   PAINEL ADMIN - 
   ===================================================================== */
:root {
  /* dimensões gerais */
  --sidebar-w: 250px;
  --container-max: 1600px;

  /* alturas fixas dos cards de gráfico (AJUSTE SE QUISER) */
  --h-line: 380px; /* linha principal */
  --h-bar: 240px; /* barras */
  --h-donut: 260px; /* donuts */

  /* paleta */
  --bg-app: #f6efe7;
  --card: #fff;
  --accent: #d9ad84;
  --accent-strong: #b07b58;
  --accent-stronger: #8f644a;
  --text: #4b382c;
  --text-muted: #7a685c;
  --white: #fff;

  /* sombras */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(
        1200px 800px at 90% -10%,
        rgba(176, 123, 88, 0.06),
        transparent 60%
      )
      no-repeat,
    radial-gradient(
        900px 700px at -10% 110%,
        rgba(217, 173, 132, 0.08),
        transparent 50%
      )
      no-repeat,
    var(--bg-app);
}

/* =============== SIDEBAR =============== */
.sidebar-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: #d2b090;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.1);
  z-index: 20;
  overflow-y: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}
.brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-sm);
}
.brand strong {
  display: block;
  font-size: 15px;
}
.brand small {
  color: var(--text-muted);
}
.titulo-sidebar {
  margin: 2px 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.sidebar-menu nav {
  display: grid;
  gap: 10px;
}
.sidebar-menu nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: var(--accent-strong);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-menu nav a:hover {
  background: var(--accent-stronger);
  transform: translateX(3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
.sidebar-menu nav a.btn-sair {
  margin-top: auto;
  background: #e46f51;
}
.sidebar-menu nav a.btn-sair:hover {
  background: #c8573d;
}

/* =============== CONTEÚDO =============== */
.container-painel {
  margin-left: var(--sidebar-w);
  padding: 20px;
  max-width: var(--container-max);
}

/* header + métricas */
.painel-header {
  background: linear-gradient(135deg, #d9ad84 0%, #bf8e69 100%);
  position: relative;
  color: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 14px;
}

.painel-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px 200px at 50px -80px,
    rgba(255, 255, 255, 0.25),
    transparent 70%
  );
  border-radius: 16px;
  pointer-events: none;
}

.painel-header h1 {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}
.metricas {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.metric-box {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  gap: 6px;
  backdrop-filter: blur(3px);
  min-height: 76px;
}
.metric-box::before {
  /* “ring” sutil */
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.metric-box .label {
  font-weight: 800;
  font-size: 13.5px;
}
.metric-box .valor {
  font-size: 24px;
  font-weight: 900;
}

/* =============== GRID PRINCIPAL (SEM %/VH) =============== */
.main {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-areas: "linha pizza" "barras pizza";
  grid-template-columns: 1fr 330px;
}

.section-linha {
  grid-area: linha;
}
.section-barras {
  grid-area: barras;
}
.section-pizza {
  grid-area: pizza;
  display: grid;
  gap: 18px;
  grid-template-rows: var(--h-donut) var(--h-donut);
}

/* cards (cada um tem altura fixa específica) */
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 35px 35px 35px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}
.card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
}
.card--line {
  height: var(--h-line);
}
.card--bar {
  height: var(--h-bar);
}
.card--donut {
  height: var(--h-donut);
}

/* grid com 2 barras */
.bar-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* canvas ocupa SOMENTE o espaço do card (nunca estica além) */
.card canvas {
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* =============== RESPONSIVO =============== */
@media (max-width: 1200px) {
  .metricas {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
  .main {
    grid-template-columns: 1fr 300px;
  }
}
@media (max-width: 992px) {
  :root {
    --sidebar-w: 220px;
    --h-line: 360px;
    --h-bar: 230px;
    --h-donut: 240px;
  }
  .main {
    grid-template-areas: "linha" "barras" "pizza";
    grid-template-columns: 1fr;
  }
  .section-pizza {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--h-donut);
  }
}
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --h-line: 320px;
    --h-bar: 210px;
    --h-donut: 220px;
  }
  .sidebar-menu {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    overflow: auto hidden;
  }
  .titulo-sidebar {
    display: none;
  }
  .sidebar-menu nav {
    display: flex;
    gap: 8px;
  }
  .sidebar-menu nav a {
    white-space: nowrap;
    border-radius: 10px;
    padding: 8px 10px;
  }
  .container-painel {
    margin-left: 0;
    padding: 14px;
  }
  .metricas {
    grid-template-columns: 1fr 1fr;
  }
  .section-pizza {
    grid-template-columns: 1fr;
    grid-template-rows: var(--h-donut) var(--h-donut);
  }
}
@media (max-width: 420px) {
  .metricas {
    grid-template-columns: 1fr;
  }
  .sidebar-menu nav a {
    font-size: 13px;
  }
}