/*
 * Mauzo360 - Custom Styling System
 * 
 * This CSS file implements a green-themed color scheme with dark/light mode support.
 * 
 * Usage:
 * - Buttons: Use .btn-primary, .btn-secondary, or .btn-destructive classes
 * - Colors: Use utility classes like .bg-primary, .text-foreground, etc.
 * - Dark Mode: Automatically toggled via theme-toggle.js (moon/sun icon)
 * - Theme preference is saved in localStorage
 * 
 * Button Examples:
 *   <button class="btn-primary">Primary Button</button>
 *   <button class="btn-secondary">Secondary Button</button>
 *   <button class="btn-destructive">Delete Button</button>
 *   <button class="btn-primary btn-sm">Small Button</button>
 *   <button class="btn-primary btn-lg">Large Button</button>
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Gilroy font - using a free alternative as Gilroy is premium */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

/*
  Define custom properties for your green palette in a single :root block.
  These will be referenced by Tailwind via your tailwind.config.js.
*/
:root {
  /* Green and White Theme */
  --background: 0 0% 100%; /* White */
  --foreground: 222.2 84% 4.9%; /* Dark text, near black */
  --primary: 150 64% 40%; /* A specific shade of green */
  --primary-foreground: 0 0% 100%; /* White text for primary */
  --color-primary-light: 150 72% 50%; /* Lighter green for hover */

  /* General UI Colors */
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --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: 150 72% 95%; /* Light green for accents/success */
  --accent-foreground: 150 64% 20%; /* Darker text for accent */
  --destructive: 0 84.2% 60.2%; /* Red for errors */
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 150 64% 40%; /* Use primary green for focus rings */

  /* Chart Colors (adjust if needed to fit theme) */
  --chart-1: 150 70% 45%;
  --chart-2: 60 70% 60%;
  --chart-3: 200 70% 50%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  /* Sidebar Colors (adjust if needed to fit theme) */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 222.2 47.4% 11.2%;
  --sidebar-primary: 150 64% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 150 72% 95%;
  --sidebar-accent-foreground: 150 64% 20%;
  --sidebar-border: 214.3 31.8% 91.4%;
  --sidebar-ring: 150 64% 40%;

  --radius: 0.5rem; /* Base radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-xl: calc(var(--radius) + 4px);
  
  /* Font variables */
  --font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-gilroy: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Fix for the webkit-text-size-adjust error */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Dark mode definitions */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 150 64% 40%; /* Keep primary green */
  --primary-foreground: 0 0% 100%; /* White text on green */
  --color-primary-light: 150 72% 50%; /* Lighter green for hover */
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 150 64% 40%; /* Use primary green for focus rings */
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* Apply CSS variables to Tailwind-compatible classes */
* {
  box-sizing: border-box;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1 {
  font-family: var(--font-gilroy), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-gilroy), Arial, Helvetica, sans-serif;
  font-weight: 500;
}

/* Custom button styles */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease-in-out;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background-color: hsl(var(--color-primary-light));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-primary:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background-color: hsl(var(--muted));
}

.btn-secondary:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease-in-out;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-destructive:hover {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-destructive:focus {
  outline: 2px solid hsl(var(--destructive));
  outline-offset: 2px;
}

/* Button size variants */
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-destructive.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.btn-primary.btn-lg,
.btn-secondary.btn-lg,
.btn-destructive.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* Card styles */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: calc(var(--radius));
  border: 1px solid hsl(var(--border));
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Input styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  padding: 0.5rem 0.75rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsla(var(--ring), 0.1);
}

/* Dark mode toggle button */
.theme-toggle {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background-color: hsl(var(--muted));
}

/* Utility classes for Tailwind compatibility */
.bg-background {
  background-color: hsl(var(--background));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

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

.bg-card {
  background-color: hsl(var(--card));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

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

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

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

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

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

/* Flash message styles */
.flash-error {
  background-color: hsla(var(--destructive), 0.1);
  color: hsl(var(--destructive-foreground));
  border-color: hsla(var(--destructive), 0.2);
}

.flash-success {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--primary) / 0.2);
}

.flash-info {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

/* Dashboard Styles */
.stat-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius));
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--color-primary-light)));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: hsl(var(--primary));
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card-highlight {
  border-color: hsl(var(--primary));
  background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--primary) / 0.05) 100%);
}

.stat-card-highlight::before {
  opacity: 1;
}

.stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.stat-icon-blue {
  background: linear-gradient(135deg, hsla(217, 91%, 60%, 0.1), hsla(217, 91%, 60%, 0.2));
  color: hsl(217, 91%, 60%);
}

.stat-icon-green {
  background: linear-gradient(135deg, hsla(150, 64%, 40%, 0.1), hsla(150, 64%, 40%, 0.2));
  color: hsl(150, 64%, 40%);
}

.stat-icon-primary {
  background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.3));
  color: hsl(var(--primary));
}

.stat-icon-purple {
  background: linear-gradient(135deg, hsla(280, 65%, 60%, 0.1), hsla(280, 65%, 60%, 0.2));
  color: hsl(280, 65%, 60%);
}

.stat-icon-orange {
  background: linear-gradient(135deg, hsla(25, 95%, 53%, 0.1), hsla(25, 95%, 53%, 0.2));
  color: hsl(25, 95%, 53%);
}

.stat-icon-yellow {
  background: linear-gradient(135deg, hsla(48, 96%, 53%, 0.1), hsla(48, 96%, 53%, 0.2));
  color: hsl(48, 96%, 53%);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Action Cards */
.action-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius));
  padding: 1.5rem;
  transition: all 0.3s ease;
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.05), transparent);
  transition: left 0.5s ease;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: hsl(var(--primary));
}

.action-card:hover::before {
  left: 100%;
}

.action-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-icon-blue {
  background: linear-gradient(135deg, hsla(217, 91%, 60%, 0.1), hsla(217, 91%, 60%, 0.2));
  color: hsl(217, 91%, 60%);
}

.action-icon-green {
  background: linear-gradient(135deg, hsla(150, 64%, 40%, 0.1), hsla(150, 64%, 40%, 0.2));
  color: hsl(150, 64%, 40%);
}

.action-icon-primary {
  background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.3));
  color: hsl(var(--primary));
}

.action-card:hover .action-icon {
  transform: scale(1.1);
}

/* Dark mode adjustments for dashboard */
.dark .stat-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.dark .stat-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.dark .action-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.dark .action-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Sidebar Styles */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.sidebar-link:hover {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.sidebar-link.active {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-weight: 600;
}

.sidebar-link.active svg {
  color: hsl(var(--primary));
}

.sidebar-link svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* Logout link styling for sidebar */
.logout-link {
  color: hsl(0, 84.2%, 50%);
  font-weight: 500;
}

.logout-link:hover {
  background-color: hsla(0, 84.2%, 60.2%, 0.1);
  color: hsl(0, 84.2%, 45%);
}

.dark .logout-link {
  color: hsl(0, 62.8%, 70%);
}

.dark .logout-link:hover {
  background-color: hsla(0, 62.8%, 30.6%, 0.2);
  color: hsl(0, 62.8%, 80%);
}