:root{
  --sidebar-bg:#0b2340;
  --sidebar-bg2:#081a2f;
  --sidebar-text:#e8eef7;
  --primary:#0d5bd7;
}

html,body{height:100%;}
body{background:#f4f7fb;}

.sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width:260px;
  background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg2));
  color:var(--sidebar-text);
  padding:18px 0;
  overflow-y:auto;
}

.sidebar .brand{
  padding:0 18px 14px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.brand .logo{
  width:34px; height:34px;
  border-radius:10px;
  background:#1f6feb;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:white;
}
.brand .title{line-height:1.1;}
.brand .title .name{font-weight:700;}
.brand .title .sub{font-size:12px; opacity:.8;}

.sidebar .userbox{
  padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}
.userbox .role{font-weight:700;}
.userbox .meta{font-size:12px; opacity:.85;}
.userbox .badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  font-size:11px;
  margin-top:6px;
}

.sidebar .nav-title{
  padding:10px 18px 4px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  opacity:.6;
}

.sidebar .nav a{
  color:var(--sidebar-text);
  padding:10px 18px;
  display:block;
  text-decoration:none;
  opacity:.92;
}

/* garante itens do menu um embaixo do outro */
.sidebar .nav{display:flex; flex-direction:column;}
.sidebar .nav a:hover, .sidebar .nav a.active{
  background:rgba(255,255,255,.08);
  opacity:1;
}

.sidebar .logout{
  position:fixed;
  left:18px;
  bottom:14px;
  width:224px;
}

.main{
  margin-left:260px;
  min-height:100%;
}

.topbar{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 18px;
  font-size:13px;
  color:#5b6b80;
}

.content{
  padding:16px 18px 32px;
}

.card-metric{
  border:1px solid rgba(0,0,0,.08);
  border-left:4px solid var(--primary);
  border-radius:3px;
}
.card-metric .label{font-size:13px; color:#6b7b8f;}
.card-metric .value{font-size:30px; font-weight:700; line-height:1;}

.table thead th{background:#eef2f6;}
.form-help{font-size:12px; color:#6b7b8f;}
.login-shell{
  display:flex;
  min-height:100vh;
}
.login-side{
  width:320px;
  background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg2));
  color:var(--sidebar-text);
  padding:26px 18px;
}
.login-side h4{font-weight:700;}
.login-side p{opacity:.9;}
.login-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:480px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:6px;
  box-shadow:0 12px 24px rgba(0,0,0,.06);
}