:root {
  --background: 0 0% 100%;
  --foreground: 142 84% 15%;
  --card: 0 0% 100%;
  --card-foreground: 142 84% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 142 84% 15%;
  --primary: 142 71% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 92% 50%;
  --secondary-foreground: 0 0% 100%;
  --muted: 142 20% 96%;
  --muted-foreground: 142 10% 45%;
  --accent: 38 92% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 142 20% 90%;
  --input: 142 20% 90%;
  --ring: 142 71% 45%;
  --radius: 0.75rem;
  --sidebar-background: 142 45% 97%;
  --sidebar-foreground: 142 84% 15%;
  --sidebar-primary: 142 71% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 142 30% 94%;
  --sidebar-accent-foreground: 142 84% 15%;
  --sidebar-border: 142 20% 90%;
  --sidebar-ring: 142 71% 45%;
  --gradient-hero: linear-gradient(135deg, hsl(142 71% 45%) 0%, hsl(38 92% 50%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(142 20% 98%) 100%);
  --shadow-soft: 0 4px 20px -4px hsl(142 71% 45% / 0.15);
  --shadow-menu: 0 8px 30px -8px hsl(142 71% 45% / 0.2);

  --bs-body-bg: hsl(var(--background));
  --bs-body-color: hsl(var(--foreground));
  --bs-border-color: hsl(var(--border));
  --bs-primary: hsl(var(--primary));
  --bs-primary-rgb: 47, 158, 89;
  --bs-secondary: hsl(var(--secondary));
  --bs-secondary-rgb: 248, 180, 52;
  --bs-success: var(--bs-primary);
  --bs-info: hsl(var(--accent));
  --bs-warning: hsl(var(--secondary));
  --bs-danger: hsl(var(--destructive));
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-border-radius-lg: 0.75rem;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--bs-font-sans-serif);
}

a {
  color: inherit;
}

a:hover {
  color: hsl(var(--primary));
}

.text-foreground { color: hsl(var(--foreground)) !important; }
.text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }
.text-card-foreground { color: hsl(var(--card-foreground)) !important; }
.text-primary-foreground { color: hsl(var(--primary-foreground)) !important; }
.text-accent { color: hsl(var(--accent)) !important; }
.text-accent-foreground { color: hsl(var(--accent-foreground)) !important; }
.text-sidebar-foreground { color: hsl(var(--sidebar-foreground)) !important; }
.text-sidebar-primary { color: hsl(var(--sidebar-primary)) !important; }

.bg-background { background-color: hsl(var(--background)) !important; }
.bg-muted { background-color: hsl(var(--muted)) !important; }
.bg-muted-30 { background-color: hsl(var(--muted) / 0.3) !important; }
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)) !important; }
.bg-sidebar { background-color: hsl(var(--sidebar-background)); }
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-card { background: var(--gradient-card); }

.border-border { border-color: hsl(var(--border)) !important; }

.shadow-soft { box-shadow: var(--shadow-soft) !important; }
.shadow-menu { box-shadow: var(--shadow-menu) !important; }

.rounded-xl { border-radius: 1.25rem; }

.btn-primary {
  --bs-btn-color: hsl(var(--primary-foreground));
  --bs-btn-bg: hsl(var(--primary));
  --bs-btn-border-color: hsl(var(--primary));
  --bs-btn-hover-bg: hsl(var(--primary));
  --bs-btn-hover-border-color: hsl(var(--primary));
  --bs-btn-active-bg: hsl(var(--primary));
  --bs-btn-active-border-color: hsl(var(--primary));
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: hsl(var(--primary));
  --bs-btn-border-color: hsl(var(--primary));
  --bs-btn-hover-bg: hsl(var(--primary));
  --bs-btn-hover-border-color: hsl(var(--primary));
  --bs-btn-hover-color: hsl(var(--primary-foreground));
}

.btn-accent {
  --bs-btn-color: hsl(var(--accent-foreground));
  --bs-btn-bg: hsl(var(--accent));
  --bs-btn-border-color: hsl(var(--accent));
  --bs-btn-hover-bg: hsl(var(--accent));
  --bs-btn-hover-border-color: hsl(var(--accent));
  --bs-btn-focus-shadow-rgb: 248, 180, 52;
}

.badge-accent {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.menu-icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.menu-icon-option {
  margin-bottom: 0;
}

.menu-icon-thumb {
  width: 32px;
  height: 32px;
  border-radius: 0.75rem;
  background-color: hsl(var(--muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-icon-thumb img {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}

.menu-icon-thumb svg {
  width: 20px;
  height: 20px;
}

.menu-icon-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.card-soft {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
  box-shadow: var(--shadow-soft);
  border-radius: 1rem;
}

.section-title {
  color: hsl(var(--foreground));
  font-weight: 700;
}

.section-subtitle {
  color: hsl(var(--muted-foreground));
  max-width: 720px;
  margin: 0 auto;
}

.navbar-blur {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: hsl(var(--primary-foreground));
}

.hero-title {
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 700;
  color: hsl(var(--primary-foreground));
}

.hero-lead {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: hsl(var(--primary-foreground) / 0.9);
}

.footer-link {
  text-decoration: none;
  color: hsl(var(--muted-foreground));
}

.footer-link:hover {
  color: hsl(var(--primary));
}

.sidebar-wrapper {
  min-height: 100vh;
  background-color: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
  padding: 1.5rem;
}

.sidebar-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.sidebar-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: hsl(var(--sidebar-foreground));
  border-radius: 0.75rem;
  font-weight: 500;
}

.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-foreground));
}

.sidebar-menu .nav-link.active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: hsl(var(--sidebar-primary));
}

.table-modern thead {
  background-color: hsl(var(--muted));
}

.table-modern th {
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}

.table-modern td {
  vertical-align: middle;
}

.pill {
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.status-pill {
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.status-pill.warning {
  background-color: hsl(var(--secondary) / 0.12);
  color: hsl(var(--secondary));
}

.status-pill.danger {
  background-color: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

.form-label {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.form-control,
.form-select {
  border-radius: 0.5rem;
  border-color: hsl(var(--input));
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.form-control::placeholder,
.form-select::placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
  opacity: 1;
}

.form-control:focus::placeholder,
.form-select:focus::placeholder {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 0.25rem hsl(var(--ring) / 0.15);
}

.list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: hsl(var(--muted-foreground));
}

.list-check li::before {
  content: "✓";
  color: hsl(var(--primary));
  font-weight: 600;
}

.rating-stars {
  color: hsl(var(--accent));
  font-size: 1.1rem;
}

.card-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.card-feature .icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.card-feature .icon-wrapper.accent {
  background-color: hsl(var(--accent) / 0.12);
  color: hsl(var(--accent));
}

.card-feature .icon-wrapper.secondary {
  background-color: hsl(var(--secondary) / 0.12);
  color: hsl(var(--secondary));
}

.offcanvas-menu {
  background-color: hsl(var(--sidebar-background));
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: hsl(var(--muted) / 0.6);
  border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.4);
  border-radius: 999px;
}

.dashboard-content {
  background-color: hsl(var(--background));
  min-height: 100vh;
}

.dashboard-header {
  border-bottom: 1px solid hsl(var(--border));
  padding: 1.5rem 0;
}

.table-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-weight: 600;
}

.pagination {
  --bs-pagination-color: hsl(var(--foreground));
  --bs-pagination-bg: hsl(var(--background));
  --bs-pagination-border-color: hsl(var(--border));
  --bs-pagination-hover-color: hsl(var(--primary));
  --bs-pagination-hover-bg: hsl(var(--primary) / 0.08);
  --bs-pagination-hover-border-color: hsl(var(--primary));
  --bs-pagination-focus-color: hsl(var(--primary));
  --bs-pagination-focus-bg: hsl(var(--primary) / 0.12);
  --bs-pagination-focus-border-color: hsl(var(--primary));
  --bs-pagination-active-color: hsl(var(--primary-foreground));
  --bs-pagination-active-bg: hsl(var(--primary));
  --bs-pagination-active-border-color: hsl(var(--primary));
  --bs-pagination-disabled-color: hsl(var(--muted-foreground));
  --bs-pagination-disabled-bg: hsl(var(--background));
  --bs-pagination-disabled-border-color: hsl(var(--border));
}

.pagination .page-link {
  border-radius: 0.5rem;
  margin: 0 0.125rem;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--background)) !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.pagination .page-link:hover {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary) / 0.08) !important;
  border-color: hsl(var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.15);
}

.pagination .page-link:focus {
  color: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary) / 0.12) !important;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 0.25rem hsl(var(--primary) / 0.15);
}

.pagination .page-item.active .page-link {
  color: hsl(var(--primary-foreground)) !important;
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary));
  font-weight: 600;
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
}

.pagination .page-item.disabled .page-link {
  color: hsl(var(--muted-foreground)) !important;
  background-color: hsl(var(--background)) !important;
  border-color: hsl(var(--border));
  opacity: 0.6;
}

.pagination .page-item.disabled .page-link:hover {
  transform: none;
  box-shadow: none;
}

.badge-soft {
  background-color: hsl(var(--muted) / 0.7);
  color: hsl(var(--foreground));
}

@media (max-width: 991.98px) {
  .sidebar-wrapper {
    min-height: auto;
  }
}