/* Global Palette Variables */
:root {
  --palette-white: #ffffff;
  --palette-green: #BFF0CB;
  --palette-blue: #C8F2F2;
  --palette-dark-green: #163C42;
  --palette-dark-blue: #032127;
}

/* Base */
html, body {
  background-color: var(--palette-white);
  color: var(--palette-dark-blue);
}

a { color: var(--palette-dark-green); }
a:hover { color: var(--palette-dark-blue); }

/* Tailwind override (utility classes compiled via Vite) */
.bg-gray-100 { background-color: var(--palette-blue) !important; }
.bg-white { background-color: var(--palette-white) !important; }

.text-gray-900, .text-gray-800 { color: var(--palette-dark-blue) !important; }
.text-gray-700, .text-gray-600 { color: var(--palette-dark-green) !important; }
.text-gray-500 { color: var(--palette-dark-blue) !important; opacity: 0.75; }
.text-gray-400 { color: var(--palette-dark-blue) !important; opacity: 0.6; }
.text-green-500 { color: var(--palette-dark-green) !important; }

.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--palette-blue) !important; }
.hover\:bg-gray-50:hover { background-color: var(--palette-blue) !important; }
.hover\:bg-gray-100:hover { background-color: var(--palette-blue) !important; }

/* Form controls (works for Tailwind + Bootstrap styles) */
input[type="text"], input[type="email"], input[type="password"],
select, textarea, .form-control {
  border-color: var(--palette-dark-blue);
  background-color: var(--palette-white);
  color: var(--palette-dark-blue);
}
input:hover, select:hover, textarea:hover, .form-control:hover {
  border-color: var(--palette-green);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none;
  border-color: var(--palette-dark-green);
  box-shadow: 0 0 0 0.25rem rgba(191, 240, 203, 0.45);
}

/* Buttons - Bootstrap */
.btn-primary {
  --bs-btn-color: var(--palette-white);
  --bs-btn-bg: var(--palette-dark-green);
  --bs-btn-border-color: var(--palette-dark-green);
  --bs-btn-hover-color: var(--palette-white);
  --bs-btn-hover-bg: var(--palette-dark-green);
  --bs-btn-hover-border-color: var(--palette-dark-green);
  --bs-btn-focus-shadow-rgb: 191, 240, 203;
  --bs-btn-active-color: var(--palette-white);
  --bs-btn-active-bg: var(--palette-dark-green);
  --bs-btn-active-border-color: var(--palette-dark-green);
  --bs-btn-disabled-color: var(--palette-white);
  --bs-btn-disabled-bg: var(--palette-dark-green);
  --bs-btn-disabled-border-color: var(--palette-dark-green);
}
.btn-outline-primary {
  color: var(--palette-dark-green) !important;
  border-color: var(--palette-dark-green) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--palette-green) !important;
  color: var(--palette-dark-blue) !important;
}
.btn-primary, .btn-outline-primary {
  box-shadow: none !important;
}

/* Success buttons mapped to palette */
.btn-success {
  --bs-btn-color: var(--palette-dark-blue);
  --bs-btn-bg: var(--palette-green);
  --bs-btn-border-color: var(--palette-green);
  --bs-btn-hover-color: var(--palette-dark-blue);
  --bs-btn-hover-bg: var(--palette-green);
  --bs-btn-hover-border-color: var(--palette-green);
  --bs-btn-focus-shadow-rgb: 191, 240, 203;
  --bs-btn-active-color: var(--palette-dark-blue);
  --bs-btn-active-bg: var(--palette-green);
  --bs-btn-active-border-color: var(--palette-green);
  --bs-btn-disabled-color: var(--palette-dark-blue);
  --bs-btn-disabled-bg: var(--palette-green);
  --bs-btn-disabled-border-color: var(--palette-green);
}
.btn-outline-success {
  color: var(--palette-dark-green) !important;
  border-color: var(--palette-green) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--palette-green) !important;
  color: var(--palette-dark-blue) !important;
}

/* Alerts - Bootstrap */
.alert-primary { background-color: var(--palette-blue); color: var(--palette-dark-blue); border-color: var(--palette-dark-green); }
.alert-success { background-color: var(--palette-green); color: var(--palette-dark-blue); border-color: var(--palette-dark-green); }
.alert-info { background-color: var(--palette-blue); color: var(--palette-dark-blue); border-color: var(--palette-dark-green); }
.alert-warning { background-color: var(--palette-green); color: var(--palette-dark-blue); border-color: var(--palette-dark-green); }
.alert-danger { background-color: var(--palette-blue); color: var(--palette-dark-blue); border-color: var(--palette-dark-green); }

/* Spinners - Bootstrap */
.spinner-border { color: var(--palette-dark-green) !important; }

/* Badges */
.badge-primary { background-color: var(--palette-dark-green) !important; color: var(--palette-white) !important; }

/* Tables */
.table { color: var(--palette-dark-blue); }
.table thead th { background-color: var(--palette-blue); color: var(--palette-dark-blue); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(200, 242, 242, 0.4); }

/* Cards */
.card { border-color: var(--palette-blue); }
.card-header { background-color: var(--palette-blue); color: var(--palette-dark-blue); }
.card-body { background-color: var(--palette-white); color: var(--palette-dark-blue); }

/* Dropdowns & menus */
.dropdown-menu { background-color: var(--palette-white); border-color: var(--palette-blue); }
.dropdown-item { color: var(--palette-dark-blue); }
.dropdown-item:hover { background-color: var(--palette-blue); color: var(--palette-dark-green); }

/* Navbars */
.navbar, .bg-white { background-color: var(--palette-white) !important; }
.navbar-light .navbar-nav .nav-link { color: var(--palette-dark-blue); }
.navbar-light .navbar-nav .nav-link:hover { color: var(--palette-dark-green); }

/* Misc */
.text-primary { color: var(--palette-dark-green) !important; }
.bg-primary { background-color: var(--palette-dark-green) !important; }
.bg-light-primary { background-color: rgba(200, 242, 242, 0.35) !important; color: var(--palette-dark-blue) !important; }

/* Components in Breeze layout */
.shadow-md, .shadow, .shadow-sm { --tw-shadow-color: rgba(22, 60, 66, 0.2); }