:root {
  --brand-start: #ec4899;
  --brand-end: #8b5cf6;
  --sidebar-width: 250px;
  --topbar-height: 60px;
}

body {
  background: #f4f5f9;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* --- Auth pages --- */
.auth-body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
}
.auth-card {
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
}

/* --- Top navbar --- */
.top-navbar {
  height: var(--topbar-height);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.notif-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 0.6rem;
}

/* --- Layout shell --- */
.app-shell {
  display: flex;
  min-height: calc(100vh - var(--topbar-height));
}
.app-sidebar {
  width: var(--sidebar-width);
  background: #ffffff;
  border-right: 1px solid #e9ecef;
  flex-shrink: 0;
}
.app-content {
  flex: 1;
  min-width: 0;
}
.nav-section-title {
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
  color: #9ca3af;
  margin: 1rem 0 .35rem;
  padding-left: .5rem;
}
.app-sidebar .nav-link {
  color: #374151;
  border-radius: 8px;
  padding: .55rem .75rem;
  margin-bottom: 2px;
  font-size: .9rem;
}
.app-sidebar .nav-link:hover {
  background: #f3f4f6;
}
.app-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color: #fff;
}

/* --- Buttons / brand accents --- */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  border: none;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #db2777, #7c3aed);
}

/* --- Dashboard stat cards --- */
.stat-card {
  border: none;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
}
.stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
}

/* --- Dark mode --- */
body.dark-mode {
  background: #111827;
  color: #e5e7eb;
}
body.dark-mode .top-navbar,
body.dark-mode .app-sidebar,
body.dark-mode .card {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}
body.dark-mode .app-sidebar .nav-link {
  color: #d1d5db;
}
body.dark-mode .table {
  color: #e5e7eb;
}

/* --- Responsive sidebar for mobile --- */
@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: -100%;
    height: calc(100vh - var(--topbar-height));
    z-index: 1020;
    transition: left .2s ease;
  }
  .app-sidebar.show {
    left: 0;
  }
}