@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --primary-color: #007bff;
  --secondary-color: #00b894;
  --light-bg: #f5f7fb;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--light-bg);
}

/* Navbar */
.main-header.navbar {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  color: white;
}
.main-header .nav-link { color: #fff !important; }
.main-header .nav-link:hover { opacity: .85; }

/* Sidebar */
.main-sidebar { background: #1e272e; }
.nav-sidebar .nav-item>.nav-link.active {
  background: linear-gradient(90deg,var(--primary-color),var(--secondary-color));
  border-radius: 6px;
}

/* Card */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.card-header { background: #fff; border-bottom: 1px solid #eee; font-weight: 600; }

/* KPI */
.info-box { border-radius: 16px; color: #fff; }
.info-box-icon { border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; }

/* Buttons */
.btn-primary {
  background: var(--primary-color);
  border: none;
  border-radius: 8px;
  padding: .5rem 1.25rem;
  font-weight: 500;
  box-shadow: 0 3px 6px rgba(0,0,0,.1);
}
.btn-primary:hover { background: var(--secondary-color); }

/* Table */
.table thead th {
  background: #f1f3f6;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .5px;
}
.table-hover tbody tr:hover { background: #f9fcff; }

/* Badges */
.badge-success { background: #00b894 !important; }
.badge-info { background: #0984e3 !important; }
.badge-warning { background: #fdcb6e !important; }

/* Login Page with blur background */
body.login-page {
  background: url('https://picsum.photos/1600/900?travel') no-repeat center center fixed;
  background-size: cover;
}
.login-box .card {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.88);
  border-radius: 16px;
}

/* Dark mode */
body.dark-mode { background: #121212 !important; color: #e0e0e0; }
body.dark-mode .card { background: #1e1e1e; color: #e0e0e0; }
body.dark-mode .main-header.navbar { background: #222 !important; }
body.dark-mode .main-sidebar { background: #000 !important; }