:root{
  --fb-blue:#009edf;
  --fb-blue-dark:#006fae;
  --fb-green:#00a651;
  --fb-green-dark:#008a44;
  --fb-yellow:#ffe100;
  --fb-navy:#06263f;
  --fb-navy-2:#07385c;
  --bg:#f3f8fb;
  --panel:#ffffff;
  --text:#14263b;
  --muted:#617086;
  --line:#d9e8f2;
  --brand:var(--fb-blue);
  --brand2:var(--fb-green);
  --soft:#eaf8ff;
  --shadow:0 16px 38px rgba(0,72,120,.10);
}

/* Login com identidade Fly Brasil */
.login-page{
  background:
    radial-gradient(circle at 15% 15%, rgba(255,225,0,.20), transparent 25%),
    radial-gradient(circle at 85% 18%, rgba(0,166,81,.20), transparent 26%),
    linear-gradient(135deg, var(--fb-navy) 0%, #004f78 42%, var(--fb-blue) 100%);
}
.login-card{
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 22px 60px rgba(0,40,70,.22);
  overflow:hidden;
  position:relative;
}
.login-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--fb-green),var(--fb-blue),var(--fb-yellow));
}
.login-brand{
  color:var(--fb-blue-dark);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.login-brand-logo{
  width:190px;
  max-width:70%;
  height:auto;
  display:block;
  margin-bottom:6px;
}
.login-card .btn{
  background:linear-gradient(135deg,var(--fb-blue),var(--fb-green));
}
.login-card .btn:hover{
  background:linear-gradient(135deg,var(--fb-blue-dark),var(--fb-green-dark));
}

/* Menu lateral / painel */
.sidebar{
  background:
    linear-gradient(180deg, rgba(0,158,223,.18), rgba(0,166,81,.08)),
    var(--fb-navy);
  border-right:1px solid rgba(255,255,255,.08);
}
.brand-box{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.brand-logo-wrap{
  width:72px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  flex:0 0 auto;
  padding:7px;
}
.brand-logo-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.brand{
  color:#fff;
  font-size:20px;
  letter-spacing:.01em;
}
.brand-sub{
  color:#c8e9f8;
  margin-bottom:0;
}
.sidebar-user-card{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.nav a.active,
.nav a:hover,
.nav-v2 a.active,
.nav-v2 a:hover{
  background:linear-gradient(90deg, rgba(0,158,223,.24), rgba(0,166,81,.16)) !important;
  color:#fff !important;
}
.nav-dot{
  background:var(--fb-blue) !important;
  box-shadow:0 0 0 4px rgba(0,158,223,.16) !important;
}
.nav details[open] summary,
.nav summary:hover{
  color:#fff !important;
}
.nav summary:after{
  color:#80dfff !important;
}

/* Topbar e botões */
.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
}
.btn{
  background:linear-gradient(135deg,var(--fb-blue),var(--fb-green));
  box-shadow:0 8px 18px rgba(0,158,223,.18);
}
.btn:hover{
  background:linear-gradient(135deg,var(--fb-blue-dark),var(--fb-green-dark));
}
.btn.secondary{
  background:#fff;
  color:var(--fb-blue-dark);
  border:1px solid #cce8f6;
  box-shadow:none;
}
.btn.secondary:hover{
  background:#effaff;
  color:var(--fb-green-dark);
}

/* Cards, títulos e badges */
.page-title,
.card h2,
.section-title{
  color:var(--fb-navy);
}
.metric .num,
.big-state{
  color:var(--fb-blue-dark);
}
.card,
.metric,
.table-card{
  border-color:#d8eaf3;
}
.badge{
  background:#eaf8ff;
  color:var(--fb-blue-dark);
}
.badge.ok{
  background:#e9fff3;
  color:var(--fb-green-dark);
}
.alert.info{
  background:#eefaff;
  border-color:#c5ecfb;
}

/* Detalhe visual com linha nas cores da Fly */
.page-head:after{
  content:"";
  display:block;
  height:4px;
  width:120px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--fb-green),var(--fb-blue),var(--fb-yellow));
  margin-top:10px;
}
@media(max-width:900px){
  .brand-logo-wrap{width:66px;height:52px}
  .login-brand-logo{width:170px}
}