/* Roots Driving School client theme */
:root {
  --roots-green: #14532d;
  --roots-green-2: #15803d;
  --roots-lime: #84cc16;
  --roots-lime-soft: #ecfccb;
  --roots-dark: #111827;
  --roots-muted: #6b7280;
  --roots-bg: #f6f8f5;
  --roots-card: #ffffff;
  --roots-border: #dbe7d8;
  --roots-shadow: 0 14px 35px rgba(20, 83, 45, 0.10);
}

html,
body {
  background:
    radial-gradient(circle at top left, rgba(132, 204, 22, 0.12), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, var(--roots-bg) 100%) !important;
  color: var(--roots-dark);
}

.navbar,
.app-header,
.topbar,
.role-nav,
.site-header {
  border-bottom: 1px solid rgba(20, 83, 45, 0.12) !important;
}

.navbar-brand,
.brand-title,
.app-brand {
  color: var(--roots-green) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.navbar-brand::before,
.app-brand::before {
  content: "🚗";
  display: inline-flex;
  margin-right: 0.45rem;
  filter: drop-shadow(0 4px 8px rgba(20, 83, 45, 0.18));
}

.btn-primary,
button.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, var(--roots-green), var(--roots-green-2)) !important;
  border-color: var(--roots-green) !important;
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.18);
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, #0f3f22, var(--roots-green)) !important;
  border-color: #0f3f22 !important;
}

.btn-outline-primary {
  color: var(--roots-green) !important;
  border-color: var(--roots-green) !important;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background: var(--roots-green) !important;
  border-color: var(--roots-green) !important;
}

.badge.text-bg-primary,
.text-bg-primary {
  background: var(--roots-green) !important;
}

a {
  color: var(--roots-green-2);
}

a:hover {
  color: var(--roots-green);
}

.card,
.shadow-sm,
.dashboard-card,
.quick-action-card,
.mobile-card {
  border-color: var(--roots-border) !important;
  box-shadow: var(--roots-shadow) !important;
}

.card-header {
  border-bottom-color: var(--roots-border) !important;
}

.table thead th {
  color: var(--roots-green);
  background: rgba(236, 252, 203, 0.55);
}

.alert-info {
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
  color: #14532d !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--roots-green-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.16) !important;
}

.role-nav-link,
.nav-link {
  border-radius: 999px;
}

.role-nav-link:hover,
.role-nav-link.active,
.nav-link.active {
  background: var(--roots-lime-soft) !important;
  color: var(--roots-green) !important;
}

.mobile-app-tabs {
  border-top: 1px solid rgba(20, 83, 45, 0.14) !important;
  box-shadow: 0 -12px 28px rgba(20, 83, 45, 0.10) !important;
}

.mobile-app-tab.is-active {
  color: var(--roots-green) !important;
  background: var(--roots-lime-soft) !important;
}

.mobile-app-tab-icon {
  filter: saturate(1.05);
}

.hero,
.admin-hero,
.student-hero,
.instructor-hero,
.dashboard-hero {
  background:
    radial-gradient(circle at right top, rgba(132, 204, 22, 0.35), transparent 26rem),
    linear-gradient(135deg, var(--roots-green), var(--roots-green-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 18px 40px rgba(20, 83, 45, 0.18) !important;
}

.hero *,
.admin-hero *,
.student-hero *,
.instructor-hero *,
.dashboard-hero * {
  color: inherit;
}

.roots-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--roots-lime-soft);
  color: var(--roots-green);
  font-weight: 700;
  border: 1px solid var(--roots-border);
}

@media (max-width: 768px) {
  body {
    background: var(--roots-bg) !important;
  }

  .card,
  .shadow-sm {
    border-radius: 18px !important;
  }

  .btn,
  .form-control,
  .form-select {
    border-radius: 14px !important;
  }
}