/* =============================================
   RIQÁ DIGITAL — PAINEL ADMINISTRATIVO
   Design tokens: terracota/neutro, mobile-first
   ============================================= */

:root {
  /* Paleta principal */
  --accent:        #C2623F;   /* terracota */
  --accent-light:  #E8927A;
  --accent-dark:   #94412A;

  /* Superfícies */
  --bg:            #F7F5F2;
  --bg-2:          #EEECEA;
  --surface:       #FFFFFF;

  /* Bordas */
  --border:        #DDD9D4;
  --border-light:  #EDE9E4;

  /* Textos */
  --text-1:        #1C1917;
  --text-2:        #57534E;
  --text-3:        #A8A29E;

  /* Estados */
  --hover:         #F5F0EB;
  --success:       #065F46;
  --danger:        #991B1B;

  /* Layout */
  --sidebar-w:     220px;
  --topbar-h:      56px;
  --bottom-nav-h:  60px;
  --radius:        .65rem;
  --shadow:        0 1px 4px rgba(0,0,0,.07);
}

/* Reset & base */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text-1);
  line-height:1.5;
  min-height:100vh;
  padding-bottom:var(--bottom-nav-h);
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button, input, textarea, select { font-family:inherit; }

/* Tipografia */
h1, h2, h3 { font-family:'Sora', 'Inter', sans-serif; font-weight:700; }
.text-muted { color:var(--text-3); }

/* =============================================
   LAYOUT: sidebar (desktop) + main
   ============================================= */

.sidebar {
  display:none;  /* oculta em mobile */
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--surface);
  border-right:1.5px solid var(--border);
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
}

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:1.1rem 1rem .9rem;
  border-bottom:1px solid var(--border-light);
}
.brand-icon { font-size:1.4rem; }
.brand-name {
  font-family:'Sora', sans-serif;
  font-size:.95rem;
  font-weight:700;
  color:var(--text-1);
}

.sidebar-nav { flex:1; padding:.5rem 0; }
.sidebar-footer { padding:.5rem 0; border-top:1px solid var(--border-light); }

.nav-item {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem 1rem;
  border-radius:0;
  font-size:.84rem;
  color:var(--text-2);
  transition:background .12s, color .12s;
  position:relative;
}
.nav-item:hover { background:var(--hover); color:var(--text-1); }
.nav-item.active {
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  color:var(--accent);
  font-weight:600;
}
.nav-item.active::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--accent);
  border-radius:0 2px 2px 0;
}
.nav-icon { font-size:1rem; width:1.2rem; text-align:center; flex-shrink:0; }
.nav-label { display:flex; align-items:center; gap:.35rem; }
.nav-item.logout { color:var(--danger); }
.nav-item.logout:hover { background:#FEF2F2; }

/* Badge de contagem */
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 .35rem;
  border-radius:2rem;
  background:var(--accent);
  color:#fff;
  font-size:.65rem;
  font-weight:700;
}

.main-wrap {
  width:100%;
  min-height:100vh;
}

/* Topbar */
.topbar {
  position:sticky;
  top:0;
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1.5px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;
  z-index:90;
  gap:.75rem;
}
.topbar-title {
  font-family:'Sora', sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--text-1);
}
.topbar-actions { display:flex; gap:.5rem; align-items:center; }

/* Main content area */
.content {
  padding:1.1rem 1rem;
  max-width:1100px;
  margin:0 auto;
}

/* Flash messages */
.flash-zone { padding:.6rem 1rem 0; }
.flash {
  padding:.6rem .9rem;
  border-radius:var(--radius);
  font-size:.84rem;
  margin-bottom:.4rem;
  font-weight:500;
}
.flash-success { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.flash-error   { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.flash-warning { background:#FFF3CD; color:#856404; border:1px solid #FDE68A; }
.flash-info    { background:#DBEAFE; color:#1E40AF; border:1px solid #BFDBFE; }

/* =============================================
   BOTTOM NAV (mobile)
   ============================================= */
.bottom-nav {
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--bottom-nav-h);
  background:var(--surface);
  border-top:1.5px solid var(--border);
  display:flex;
  z-index:100;
}
.bn-item {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15rem;
  font-size:.65rem;
  color:var(--text-3);
  padding:.4rem 0;
  transition:color .12s;
}
.bn-item.active { color:var(--accent); font-weight:600; }
.bn-item span { font-size:1.2rem; }

/* Botão "Mais" reaproveita .bn-item mas é um <button>, então reseta estilos nativos */
.bn-more-toggle {
  background:none;
  border:none;
  font-family:inherit;
  cursor:pointer;
}

/* Overlay escuro atrás do menu "Mais" */
.bn-more-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:110;
}
.bn-more-overlay.open { display:block; }

/* Painel deslizante do menu "Mais" */
.bn-more-menu {
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--surface);
  border-radius:1rem 1rem 0 0;
  box-shadow:0 -4px 20px rgba(0,0,0,.15);
  z-index:120;
  padding:.6rem 0 calc(var(--bottom-nav-h) + .5rem);
  transform:translateY(100%);
  transition:transform .2s ease-out;
}
.bn-more-menu.open { transform:translateY(0); }

.bn-more-item {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.85rem 1.25rem;
  font-size:.92rem;
  color:var(--text-1);
  border-bottom:1px solid var(--border-light);
}
.bn-more-item span { font-size:1.15rem; width:1.4rem; text-align:center; }
.bn-more-item.active { color:var(--accent); font-weight:600; }
.bn-more-item.bn-more-logout { color:#991B1B; border-bottom:none; }
.bn-more-item .badge { margin-left:auto; }

/* Some tudo isso em desktop, junto com o resto da bottom nav */
@media (min-width:768px) {
  .bn-more-overlay, .bn-more-menu { display:none !important; }
}

/* =============================================
   DESKTOP (≥900px)
   ============================================= */
@media (min-width:768px) {
  body { padding-bottom:0; }
  .sidebar { display:flex; }
  .main-wrap { margin-left:var(--sidebar-w); }
  .bottom-nav { display:none; }
  .content { padding:1.5rem; }
}

/* =============================================
   COMPONENTES
   ============================================= */

/* Card */
.card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
}
.card + .card { margin-top:.85rem; }
.p-0  { padding:0; }
.overflow-auto { overflow-x:auto; }

/* Botões */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem 1rem;
  border-radius:var(--radius);
  font-size:.84rem;
  font-weight:600;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:background .15s, opacity .15s;
  white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }

.btn-primary {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }

.btn-success {
  background:#059669;
  color:#fff;
  border-color:#059669;
}
.btn-success:hover { background:#047857; }

.btn-danger {
  background:#DC2626;
  color:#fff;
  border-color:#DC2626;
}
.btn-danger:hover { background:#B91C1C; }

.btn-ghost {
  background:transparent;
  color:var(--text-2);
  border-color:var(--border);
}
.btn-ghost:hover { background:var(--hover); color:var(--text-1); }

/* Btn-icon (pequeno, tabelas) */
.btn-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.3rem .5rem;
  border-radius:.4rem;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  font-size:.82rem;
  transition:background .12s;
  line-height:1;
}
.btn-icon:hover { background:var(--hover); }
.btn-icon.approve { color:#065F46; border-color:#A7F3D0; }
.btn-icon.reject  { color:#991B1B; border-color:#FECACA; }

/* Stats cards (dashboard) */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.75rem;
  margin-bottom:1.25rem;
}
@media(min-width:600px){ .stats-grid { grid-template-columns:repeat(4, 1fr); } }

.stat-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  box-shadow:var(--shadow);
}
.stat-label { font-size:.72rem; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.stat-value { font-family:'Sora', sans-serif; font-size:1.75rem; font-weight:700; color:var(--text-1); margin:.15rem 0; }
.stat-sub   { font-size:.73rem; color:var(--text-3); }
.stat-card.accent-card { border-color:var(--accent); }
.stat-card.accent-card .stat-value { color:var(--accent); }