/* EcoBlue site custom styles */
:root {
  --blue: #0b76d1;
  --green: #27ae60;
  --accent: #0f4c81;
  --muted: #f6f8fb;
  --sidebar-width: 260px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--muted);color:#1a1a1a}
a{text-decoration:none;color:inherit}
.container-fluid {padding:0}

/* Sidebar */
.sidebar {
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar-width);
  background:linear-gradient(180deg,var(--blue),var(--green));
  color:white;
  padding:20px 14px;
  transition:transform .28s ease;
  overflow:auto;
}
.logo {display:flex;align-items:center;gap:12px;margin-bottom:18px}
.logo img{height:48px;width:48px;border-radius:8px;background:rgba(255,255,255,0.06);padding:6px}
.brand{font-weight:700;font-size:18px;letter-spacing:0.2px}
.nav-links{
  display:flex;flex-direction:column;gap:6px;margin-top:8px
}
.nav-links a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,0.95);font-weight:600;transition:background .15s
}
.nav-links a:hover, .nav-links a.active{background:rgba(255,255,255,0.09)}

/* Content */
.content {
  margin-left:var(--sidebar-width);
  padding:28px;
  min-height:100vh;
  transition:margin-left .28s ease;
}
.header {
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;
}
.card {
  background:white;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,20,30,0.06)
}
.footer-note{margin-top:22px;color:#445;opacity:.9}

/* Responsive */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .content{margin-left:0;padding:16px}
  .sidebar.open{transform:translateX(0)}
  .mobile-toggle{display:inline-flex}
}
.mobile-toggle{display:none;align-items:center;gap:8px;cursor:pointer;padding:8px 10px;border-radius:8px;background:white}

/* Billing page specific */
.table-responsive{overflow:auto}
input,select,textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #e3e7ee}
.btn-prim{background:var(--blue);color:white;padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
.small-muted{font-size:13px;color:#6b7280}

/* subtle fade-in */
.fade-in{animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}