:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;

  /* Sidebar variables */
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 222.2 84% 4.9%;
  --sidebar-border: 214.3 31.8% 91.4%;
  --sidebar-accent: 210 40% 96.1%;
  --sidebar-accent-foreground: 222.2 47.4% 11.2%;
}

.dark {
  --background: 240 10% 15%; /* Soft dark background */
  --foreground: 0 0% 90%; /* Light gray text */
  --card: 240 10% 20%; /* Slightly darker cards */
  --card-foreground: 0 0% 90%;
  --popover: 240 10% 20%;
  --popover-foreground: 0 0% 90%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 0 0% 90%;
  --secondary: 240 10% 25%; /* Darker secondary elements */
  --secondary-foreground: 0 0% 90%;
  --muted: 240 10% 25%;
  --muted-foreground: 0 0% 70%; /* Muted text */
  --accent: 240 10% 25%;
  --accent-foreground: 0 0% 90%;
  --destructive: 0 60% 50%; /* Lighter red for dark background */
  --destructive-foreground: 0 0% 98%; /* Brighter text for better contrast */
  --border: 240 10% 25%; /* Darker borders */
  --input: 240 10% 25%;
  --ring: 224.3 76.3% 48%;

  /* Sidebar variables */
  --sidebar: 240 10% 20%; /* Dark sidebar */
  --sidebar-foreground: 0 0% 90%;
  --sidebar-border: 240 10% 25%;
  --sidebar-accent: 240 10% 25%;
  --sidebar-accent-foreground: 0 0% 90%;
}



body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Animation for buttons */
button,
a {
  transition: all 0.2s ease;
}

button:hover,
a:hover {
  transform: translateY(-1px);
}

button:active,
a:active {
  transform: translateY(0);
}

/* Certificate animation */
@keyframes certificate-glow {
  0% {
      box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  50% {
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
  100% {
      box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
}

.certificate-container {
  animation: certificate-glow 3s infinite;
}

/* Status colors */
.text-valid {
  color: #10b981;
}

.text-expired {
  color: #ef4444;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.add-template-modal {
  z-index: 9999;
}

html {
  overflow-y: overlay;
}
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.certificate-frame {
  border: 20px solid #f0f0f0; /* Light gray border */
  background-color: #ffffff; /* White background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: 20px; /* Padding inside the frame */
  border-radius: 10px; /* Rounded corners */
  max-width: 100%; /* Ensure it doesn't overflow */
  margin: 0 auto; /* Center the frame */
  position: relative; /* For any absolute positioning inside */
}

.svg-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%; /* Ensure the container takes full width */
  height: 100%; /* Ensure the container takes full height */
}