/* ============================================================================
   Layout v2 — AbasteceAI (01/11/2026)
   Reorganiza a navegação em sidebar, melhora hierarquia, contraste e cartões.
   Mantém todo o HTML e o JavaScript existentes: é uma camada visual.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Nunito+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #faf4e9;
  --card: #ffffff;
  --border: #ecdecb;
  --text: #3a2418;
  --muted: #8b6f5c;
  --accent: #b45a24;
  --accent-strong: #944518;
  --accent-soft: #f8e5d2;
  --sidebar: #2d1b11;
  --sidebar-2: #3a2417;
  --green: #4c7a46;
  --green-soft: #e8f3e4;
  --red: #b44737;
  --red-soft: #fae7e3;
  --amber: #dfa23f;
  --amber-soft: #fbf0d6;
  --purple: #7a648f;
  --purple-soft: #f0eaf5;
  --shadow: 0 1px 2px rgba(80,45,20,.05), 0 14px 36px -24px rgba(80,45,20,.28);
  --shadow-lg: 0 22px 60px -28px rgba(80,45,20,.4);
}

html, body { font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif !important; }
body {
  background: #faf4e9 !important;
  background-image: radial-gradient(900px 420px at 100% 0%, #fff1de 0%, transparent 55%), radial-gradient(800px 420px at 0% 100%, #f0f6ee 0%, transparent 55%) !important;
  color: var(--text) !important;
  padding: 0 0 40px !important;
}
.wrap { max-width: none !important; padding: 0 !important; }

/* Topo */
header.top {
  position: sticky;
  top: 0;
  z-index: 200;
  margin: 0 !important;
  padding: 14px 28px !important;
  min-height: 76px;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.brand .logo {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(145deg, #b45a24, #c9783b) !important;
  box-shadow: 0 10px 24px -12px rgba(180,90,36,.8) !important;
}
header.top h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 21px !important;
  letter-spacing: -.04em !important;
  color: #2d1b11 !important;
}
header.top .sub { color: var(--muted) !important; margin-top: 2px !important; }
.user-chip {
  border-radius: 14px !important;
  padding: 7px 13px !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.user-chip .avatar {
  width: 34px; height: 34px;
  background: linear-gradient(145deg, #b45a24, #c9783b) !important;
}
.user-chip .info b { font-size: 13px !important; color: #2d1b11; }
.user-chip .info span { font-size: 11px !important; }
.save-status { border-radius: 10px !important; }
header.top .btn.ghost.sm {
  border-radius: 10px !important;
  background: #fffdf8 !important;
}

/* Faixa de teste */
.faixa-teste {
  margin: 18px 28px 0 292px !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  border-color: #dfcbb2 !important;
  background: linear-gradient(90deg, #eef2ff, #fff6ea) !important;
  color: #5b2f17 !important;
  font-size: 13.5px !important;
}

/* Sidebar */
.tabs {
  position: fixed;
  top: 76px;
  left: 0;
  bottom: 0;
  z-index: 150;
  width: 264px;
  margin: 0 !important;
  padding: 22px 16px !important;
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  background: linear-gradient(180deg, var(--sidebar) 0%, #3a2417 60%, #2d1b11 100%) !important;
  border-right: 1px solid rgba(255,241,222,.14);
  box-shadow: 18px 0 50px -36px rgba(45,27,17,.7);
  overflow-y: auto;
}
.tabs::before {
  content: 'NAVEGAÇÃO';
  display: block;
  padding: 0 12px 10px;
  color: #c9a07f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f3e3d2 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.tab .ic { display: inline-flex; width: 22px; height: 22px; flex: none; }
.tab .ic svg { width: 21px; height: 21px; }
.tab:hover {
  background: rgba(255,241,222,.09) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}
.tab.active {
  background: linear-gradient(135deg, #b45a24, #c9783b) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -14px rgba(180,90,36,.9) !important;
}
.tab.active .ic { color: #fff !important; }
.tabs::after {
  content: 'Dados salvos automaticamente';
  margin-top: auto;
  padding: 18px 12px 4px;
  color: #c9a07f;
  font-size: 10.5px;
  line-height: 1.4;
  border-top: 1px solid rgba(255,241,222,.14);
}

/* Conteúdo */
.view {
  margin-left: 292px;
  padding: 26px 28px 60px;
  max-width: 1760px;
}
.view.active { display: block !important; }
#view-dashboard::before {
  content: 'Painel da frota';
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #2d1b11;
  margin: 2px 0 4px;
}
#view-dashboard::after {
  content: 'Visão geral de veículos, abastecimentos, consumo e custos.';
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* Cartões de indicadores */
.stat {
  border-radius: 18px !important;
  border-color: var(--border) !important;
  padding: 20px !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg) !important; }
.stat::before {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  width: auto !important; height: 4px !important;
  border-radius: 18px 18px 0 0;
  background: var(--accent) !important;
}
.stat.green::before { background: var(--green) !important; }
.stat.red::before { background: var(--red) !important; }
.stat.amber::before { background: var(--amber) !important; }
.stat.purple::before { background: var(--purple) !important; }
.stat h3 {
  color: var(--muted) !important;
  letter-spacing: .08em !important;
  font-weight: 750 !important;
  font-size: 10px !important;
  margin-bottom: 10px !important;
}
.stat p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 29px !important;
  line-height: 1.1;
  letter-spacing: -.05em !important;
  color: #2d1b11 !important;
}
.stat small { color: var(--muted) !important; font-size: 11.5px !important; }

/* Cartões e tabelas */
.card {
  border-radius: 18px !important;
  border-color: var(--border) !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
}
.card h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 13px !important;
  letter-spacing: -.01em !important;
  color: #2d1b11 !important;
  text-transform: none !important;
  font-weight: 750 !important;
}
th { color: #8b6f5c !important; font-size: 10px !important; letter-spacing: .09em !important; }
td { border-color: #ecdecb !important; }
tbody tr:hover { background: #fff6ea !important; }

/* Botões e campos */
.btn {
  background: linear-gradient(135deg, #b45a24, #c9783b) !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 20px -12px rgba(180,90,36,.85) !important;
  letter-spacing: 0 !important;
}
.btn:hover { transform: translateY(-1px) !important; }
.btn.ghost { background: #fff !important; color: #5b2f17 !important; }
.btn.ghost:hover { color: var(--accent) !important; border-color: #dfcbb2 !important; }
input, select, textarea {
  background: #fffdf8 !important;
  border-color: #dfe6f1 !important;
  border-radius: 11px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(180,90,36,.14) !important;
}
.pill { border-radius: 999px !important; }

/* Ajustes de responsividade */
@media (max-width: 1100px) {
  .tabs { width: 226px; }
  .faixa-teste { margin-left: 250px !important; }
  .view { margin-left: 250px; padding: 22px 20px 50px; }
}
@media (max-width: 980px) {
  .tabs {
    position: static;
    width: auto;
    margin: 0 18px 12px !important;
    padding: 12px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: visible;
  }
  .tabs::before, .tabs::after { display: none; }
  .tab {
    width: auto;
    min-height: 40px;
    padding: 9px 12px !important;
    color: #5b2f17 !important;
    font-size: 12.5px !important;
  }
  .tab:hover { transform: none; background: var(--accent-soft) !important; color: var(--accent) !important; }
  .tab.active { color: #fff !important; }
  .faixa-teste { margin: 14px 18px 0 !important; }
  .view { margin-left: 0; padding: 20px 18px 50px; }
  header.top { padding: 14px 18px !important; }
}
@media (max-width: 760px) {
  .tabs {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border) !important;
    background: #fff !important;
    box-shadow: 0 -8px 26px -18px rgba(80,45,20,.35) !important;
  }
  .tab { flex: 1; width: auto; min-height: 54px; flex-direction: column; gap: 3px; padding: 7px 2px !important; font-size: 9px !important; }
  .tab .ic { width: 20px; height: 20px; }
  .tab .ic svg { width: 19px; height: 19px; }
  .faixa-teste { margin: 12px 12px 0 !important; }
  .view { padding: 16px 12px 96px; }
  #view-dashboard::before { font-size: 23px; }
  .stat p { font-size: 25px !important; }
  header.top { padding: 12px !important; min-height: 64px; }
}


/* Ajustes finais da identidade Padoca */
body { background-image: radial-gradient(900px 420px at 100% 0%, #fff1de 0%, transparent 55%), radial-gradient(800px 420px at 0% 100%, #f0f6ee 0%, transparent 55%) !important; }
header.top { background: rgba(255,253,248,.94) !important; }
.brand .logo { background: linear-gradient(145deg, #b45a24, #dfa23f) !important; }
.brand .logo path[fill="#312e81"] { fill: #5b2f17 !important; }
header.top h1, .card h2, #view-dashboard::before { font-family: 'Fraunces', Georgia, serif !important; }
#view-dashboard::before, header.top h1 { color: #2d1b11 !important; }
.stat p { font-family: 'Nunito Sans', 'Segoe UI', sans-serif !important; }
.stat h3 { color: #8b6f5c !important; }
.stat { background: #fffdf8 !important; border-color: #ecdecb !important; }
.card { background: #fffdf8 !important; border-color: #ecdecb !important; }
.user-chip { background: #fffdf8 !important; border-color: #ecdecb !important; }
.save-status { background: #e8f3e4 !important; color: #4c7a46 !important; }
.tabs { background: linear-gradient(180deg, #2d1b11 0%, #3a2417 58%, #2d1b11 100%) !important; }
.tab { color: #f3e3d2 !important; }
.tab:hover { background: rgba(255,241,222,.09) !important; }
.tab.active { background: linear-gradient(135deg, #b45a24, #c9783b) !important; }
.faixa-teste { background: linear-gradient(90deg, #fbf0d6, #fff6ea) !important; border-color: #ead6b6 !important; color: #5b2f17 !important; }
.faixa-teste a { color: #944518 !important; }
.btn { background: linear-gradient(135deg, #b45a24, #c9783b) !important; box-shadow: 0 8px 20px -12px rgba(180,90,36,.85) !important; }
.btn:hover { box-shadow: 0 10px 22px -12px rgba(180,90,36,.9) !important; }
.btn.ghost { background: #fffdf8 !important; color: #5b2f17 !important; }
.btn.ghost:hover { color: #b45a24 !important; border-color: #dfcbb2 !important; }
input, select, textarea { background: #fffdf8 !important; border-color: #dfcbb2 !important; color: #3a2418 !important; }
input:focus, select:focus, textarea:focus { border-color: #b45a24 !important; box-shadow: 0 0 0 4px rgba(180,90,36,.14) !important; }
.card h2 { color: #2d1b11 !important; }
.tabs::before, .tabs::after { color: #c9a07f !important; }
th { color: #8b6f5c !important; }
tbody tr:hover { background: #fff6ea !important; }
.pill { border-radius: 999px !important; }

/* Login e cadastro */
#loginScreen, #cadastroScreen {
  background: radial-gradient(900px 500px at 82% 8%, #7a3f1e 0%, transparent 58%),
              radial-gradient(700px 420px at 8% 92%, #f0b27344 0%, transparent 58%),
              linear-gradient(145deg, #2d1b11 0%, #4a2816 56%, #2d1b11 100%) !important;
}
.login-box { background: #fffdf8 !important; border: 1px solid #ecdecb !important; box-shadow: 0 30px 70px -30px rgba(45,27,17,.8) !important; }
.login-box h1 { font-family: 'Fraunces', Georgia, serif !important; color: #2d1b11 !important; }
.login-box .sub { color: #8b6f5c !important; }
.login-box .logo { background: linear-gradient(145deg, #b45a24, #dfa23f) !important; box-shadow: 0 10px 24px -12px rgba(180,90,36,.8) !important; }
.login-box .logo path[fill="#312e81"] { fill: #5b2f17 !important; }
.marca-ai { background: linear-gradient(135deg, #b45a24, #dfa23f) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.login-box .troca a, .login-box .link { color: #b45a24 !important; }
.login-box .chamada { background: #fff1de !important; border-color: #dfcbb2 !important; color: #3a2418 !important; }
.login-box .chamada b { color: #944518 !important; }
.login-box .login-hint { background: #f8e5d2 !important; color: #5b2f17 !important; }
.login-box .btn { background: linear-gradient(135deg, #b45a24, #c9783b) !important; }
.login-box input { background: #fffdf8 !important; border-color: #dfcbb2 !important; }
.login-box input:focus { border-color: #b45a24 !important; box-shadow: 0 0 0 4px rgba(180,90,36,.14) !important; }
#avisoInstalar { background: #2d1b11 !important; }
.modal { background: #fffdf8 !important; }
@media (max-width: 760px) {
  .tab { color: #5b2f17 !important; }
  .tab.active { color: #fff !important; }
}