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

:root {
  /* Design System Variables - Premium Theme */
  --primary-color: #2E7D32 !important; /* Emerald Green - success, trust */
  --primary-light: #4CAF50 !important;
  --primary-dark: #1B5E20 !important;
  --secondary-color: #D4AF37 !important; /* Gold - premium accent */
  --secondary-light: #E6C547 !important;
  --secondary-dark: #B8941F !important;
  --success-color: #10b981 !important; /* Emerald 500 */
  --danger-color: #ef4444 !important; /* Red 500 */
  --warning-color: #f59e0b !important; /* Amber 500 */
  --info-color: #06b6d4 !important; /* Cyan 500 */
  --light-color: #f8f9fa !important;
  --dark-color: #1F2937 !important; /* Dark Gray */
  
  /* Consistent Font Family - Inter for everything */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  
  /* Consistent Font Sizes */
  --font-size-xs: 0.75rem !important;    /* 12px */
  --font-size-sm: 0.875rem !important;   /* 14px */
  --font-size-base: 1rem !important;     /* 16px */
  --font-size-lg: 1.125rem !important;   /* 18px */
  --font-size-xl: 1.25rem !important;    /* 20px */
  --font-size-2xl: 1.5rem !important;    /* 24px */
  --font-size-3xl: 1.875rem !important;  /* 30px */
  --font-size-4xl: 2.25rem !important;   /* 36px */
  
  /* Consistent Spacing */
  --spacing-1: 0.25rem !important;  /* 4px */
  --spacing-2: 0.5rem !important;   /* 8px */
  --spacing-3: 0.75rem !important;  /* 12px */
  --spacing-4: 1rem !important;     /* 16px */
  --spacing-5: 1.25rem !important;  /* 20px */
  --spacing-6: 1.5rem !important;   /* 24px */
  --spacing-8: 2rem !important;     /* 32px */
  --spacing-10: 2.5rem !important;  /* 40px */
  --spacing-12: 3rem !important;    /* 48px */
  
  /* Color Palette */
  --white: #FFFFFF !important;
  --background: #FAFAFA !important; /* Off White */
  --surface: #FFFFFF !important; /* White */
  --text-primary: #1F2937 !important; /* Dark Gray */
  --text-muted: #6B7280 !important; /* Cool Gray */
  --gray-50: #F9FAFB !important;
  --gray-100: #F3F4F6 !important;
  --gray-200: #E5E7EB !important;
  --gray-300: #D1D5DB !important;
  --gray-400: #9CA3AF !important;
  --gray-500: #6B7280 !important;
  --gray-600: #4B5563 !important;
  --gray-700: #374151 !important;
  --gray-800: #1F2937 !important;
  --gray-900: #111827 !important;
  
  /* Reduced Border Radius - Less Rounded */
  --border-radius-sm: 0.375rem !important;   /* 6px */
  --border-radius: 0.5rem !important;     /* 8px */
  --border-radius-lg: 0.75rem !important;     /* 12px */
  --border-radius-xl: 1rem !important;   /* 16px */
  --border-radius-2xl: 1.5rem !important;    /* 24px */
  
  /* Shadows */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  
  /* Consistent Hover Animations */
  --transition-fast: 0.15s ease !important;
  --transition-normal: 0.2s ease !important;
  --transition-slow: 0.3s ease !important;
  --hover-transform: translateY(-1px) !important;
  --hover-shadow: var(--shadow) !important;
}

/* Global Styles */
* {
  box-sizing: border-box !important;
}

html {
  font-family: var(--font-family-primary) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.6;
  color: var(--text-primary) !important;
  background: var(--background) !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: auto;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

/* Container fixes */
.container-fluid {
  max-width: 100%;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

/* Row and column fixes */
.row {
  margin-left: calc(-1 * var(--spacing-3));
  margin-right: calc(-1 * var(--spacing-3));
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

/* Ensure proper grid behavior */
.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

.g-4 > * {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  margin-top: calc(var(--bs-gutter-y) * 0.5);
  margin-bottom: calc(var(--bs-gutter-y) * 0.5);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--spacing-4) !important;
}

h1 { font-size: var(--font-size-4xl) !important; }
h2 { font-size: var(--font-size-3xl) !important; }
h3 { font-size: var(--font-size-2xl) !important; }
h4 { font-size: var(--font-size-xl) !important; }
h5 { font-size: var(--font-size-lg) !important; }
h6 { font-size: var(--font-size-base) !important; }

p {
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  margin-bottom: var(--spacing-4) !important;
}

/* Buttons - Consistent Hover Animations */
.btn {
  font-family: var(--font-family-primary) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-sm) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-3) var(--spacing-5) !important;
  border: none !important;
  transition: all var(--transition-normal) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-2) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn:hover {
  transform: var(--hover-transform) !important;
  box-shadow: var(--hover-shadow) !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--secondary-color) !important;
}

.btn-secondary:hover {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--secondary-color) !important;
  border: 2px solid var(--secondary-color) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

.btn-success {
  background-color: var(--success-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--success-color) !important;
}

.btn-success:hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

.btn-danger {
  background-color: var(--danger-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--danger-color) !important;
}

.btn-danger:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-warning {
  background-color: var(--warning-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--warning-color) !important;
}

.btn-warning:hover {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
}

.btn-info {
  background-color: var(--info-color) !important;
  color: var(--white) !important;
  border: 2px solid var(--info-color) !important;
}

.btn-info:hover {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
}

/* Form Controls */
.form-control {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-normal) !important;
}

.form-control:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1) !important;
}

.form-select {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-normal) !important;
}

.form-select:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1) !important;
}

/* Cards */
.card {
  background-color: var(--surface) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-normal) !important;
  font-family: var(--font-family-primary) !important;
}

.card:hover {
  box-shadow: var(--shadow) !important;
  transform: var(--hover-transform) !important;
}

.card-header {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
  font-family: var(--font-family-primary) !important;
}

.card-body {
  padding: var(--spacing-5) !important;
  font-family: var(--font-family-primary) !important;
}

.card-footer {
  background-color: var(--gray-50) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg) !important;
  font-family: var(--font-family-primary) !important;
}

/* Alerts */
.alert {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  margin-bottom: var(--spacing-4) !important;
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border-left: 4px solid var(--success-color) !important;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border-left: 4px solid var(--danger-color) !important;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
  border-left: 4px solid var(--warning-color) !important;
}

.alert-info {
  background-color: rgba(6, 182, 212, 0.1) !important;
  color: #0891b2 !important;
  border-left: 4px solid var(--info-color) !important;
}

/* Tables */
.table {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--text-primary) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.table th {
  background-color: var(--gray-50) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  border: none !important;
  text-align: left !important;
}

.table td {
  padding: var(--spacing-4) var(--spacing-5) !important;
  border-bottom: 1px solid var(--gray-100) !important;
  color: var(--text-primary) !important;
}

.table tbody tr {
  transition: all var(--transition-fast) !important;
}

.table tbody tr:hover {
  background-color: var(--gray-50) !important;
  transform: var(--hover-transform) !important;
}

/* Badges */
.badge {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
  padding: var(--spacing-1) var(--spacing-2) !important;
  border-radius: var(--border-radius-sm) !important;
  display: inline-block !important;
}

.badge-primary {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}

.badge-secondary {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

.badge-success {
  background-color: var(--success-color) !important;
  color: var(--white) !important;
}

.badge-danger {
  background-color: var(--danger-color) !important;
  color: var(--white) !important;
}

.badge-warning {
  background-color: var(--warning-color) !important;
  color: var(--white) !important;
}

.badge-info {
  background-color: var(--info-color) !important;
  color: var(--white) !important;
}

/* Spinner */
.spinner-border {
  border: 2px solid var(--gray-200) !important;
  border-top: 2px solid var(--primary-color) !important;
  border-radius: 50% !important;
  width: 1rem !important;
  height: 1rem !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Container */
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--spacing-4) !important;
}

.container-fluid {
  width: 100% !important;
  padding: 0 var(--spacing-4) !important;
}

/* Row and Columns */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 calc(-1 * var(--spacing-2)) !important;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  padding: 0 var(--spacing-2) !important;
}

/* Utility Classes */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-light { color: var(--text-muted) !important; }
.text-dark { color: var(--text-primary) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-info { background-color: var(--info-color) !important; }
.bg-light { background-color: var(--gray-100) !important; }
.bg-dark { background-color: var(--text-primary) !important; }

/* Focus States */
.btn:focus,
.form-control:focus,
.form-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1) !important;
}

/* Pagination - Arrow Icons Instead of Text */
.pagination {
  font-family: var(--font-family-primary) !important;
}

.page-link {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--gray-200) !important;
  color: var(--text-primary) !important;
  background-color: var(--surface) !important;
  transition: all var(--transition-normal) !important;
  padding: var(--spacing-2) var(--spacing-3) !important;
}

.page-link:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white) !important;
  transform: var(--hover-transform) !important;
  box-shadow: var(--hover-shadow) !important;
}

.page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white) !important;
}

.page-item.disabled .page-link {
  background-color: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--gray-100) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500) !important;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-3) !important;
  }
  
  .container-fluid {
    padding: 0 var(--spacing-3) !important;
  }
  
  .card-body {
    padding: var(--spacing-4) !important;
  }
  
  .btn {
    padding: var(--spacing-2) var(--spacing-4) !important;
    font-size: var(--font-size-xs) !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0F172A !important; /* Dark Navy */
    --surface: #1E293B !important; /* Dark Card */
    --text-primary: #F9FAFB !important; /* Light Text */
    --text-muted: #9CA3AF !important; /* Muted Text */
    --gray-50: #1E293B !important;
    --gray-100: #334155 !important;
    --gray-200: #475569 !important;
    --gray-300: #64748B !important;
    --gray-400: #94A3B8 !important;
    --gray-500: #CBD5E1 !important;
    --gray-600: #E2E8F0 !important;
    --gray-700: #F1F5F9 !important;
    --gray-800: #F8FAFC !important;
    --gray-900: #FFFFFF !important;
  }
}