:root {
  --brand-primary: #2c5f8a;
  --brand-dark: #1c3f5e;
  --brand-accent: #f2994a;
  --sidebar-width: 250px;
}

body {
  background: #f4f6f9;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.app-navbar {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
}

.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - 56px);
  background: #fff;
  border-right: 1px solid #e4e8ee;
}

.sidebar .nav-link,
.offcanvas .nav-link {
  color: #33475b;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 2px;
  font-size: 0.93rem;
}

.sidebar .nav-link i,
.offcanvas .nav-link i {
  width: 20px;
  display: inline-block;
  color: var(--brand-primary);
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover,
.offcanvas .nav-link.active,
.offcanvas .nav-link:hover {
  background: var(--brand-primary);
  color: #fff;
}
.sidebar .nav-link.active i,
.sidebar .nav-link:hover i,
.offcanvas .nav-link.active i,
.offcanvas .nav-link:hover i {
  color: #fff;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.stat-card {
  border: none;
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.stat-card .stat-icon { font-size: 2rem; opacity: 0.85; }
.bg-grad-blue   { background: linear-gradient(135deg,#2c5f8a,#4a90c4); }
.bg-grad-orange { background: linear-gradient(135deg,#f2994a,#f2c94c); }
.bg-grad-green  { background: linear-gradient(135deg,#27ae60,#6fcf97); }
.bg-grad-purple { background: linear-gradient(135deg,#8e54e9,#4776e6); }
.bg-grad-red    { background: linear-gradient(135deg,#eb5757,#f2994a); }

.card { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f5; border-radius: 14px 14px 0 0 !important; font-weight: 600; }

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
}
.login-card { border-radius: 18px; max-width: 420px; width: 100%; }

.gallery-thumb { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
.badge-status-present { background: #27ae60; }
.badge-status-absent  { background: #eb5757; }
.badge-status-late    { background: #f2994a; }