:root {
  --bs-primary: #5e75b3;
  --bs-primary-light: #7a8fc8;
  --bs-primary-dark: #4a5d8f;
  --bs-success: #28a745;
  --bs-danger: #dc3545;
  --bs-warning: #fd7e14;
  --bs-info: #17a2b8;
}

body {
  background-color: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h5.card-title, 
.navbar-brand .fw-bold,
.card-header {
  color: #fff !important;
}

.navbar {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: var(--bs-primary) !important;
  padding: 12px 20px;
  border-bottom: none;
  border-radius: 10px 10px 0 0 !important;
}

.btn {
  transition: all 0.3s ease;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover {
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
  transform: translateY(-2px);
}

.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
  transform: translateY(-2px);
}

.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  transform: translateY(-2px);
}

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: white;
}

.btn-warning:hover {
  background-color: #e06c1b;
  border-color: #d96516;
  color: white;
  transform: translateY(-2px);
}

.btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

.btn-info:hover {
  background-color: #138496;
  border-color: #117a8b;
  transform: translateY(-2px);
}

table thead {
  background-color: var(--bs-primary) !important;
  color: white;
  padding: 10px;
  border-radius: 8px 8px 0 0;
}

.table th {
  font-weight: 500;
  padding: 12px;
}

.consumption-card .card-header,
.level-card .card-header,
.receipt-card .card-header,
.user-card .card-header,
.item-card .card-header,
.stats-container .card-header {
  background-color: var(--bs-primary) !important;
}

.stat-card {
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 8px;
}

.stat-card .card-body {
  padding: 1.5rem;
}

.form-control:focus, 
.form-select:focus {
  border-color: var(--bs-primary-light);
  box-shadow: 0 0 0 0.25rem rgba(94, 117, 179, 0.25);
}

.btn-excel {
  background-color: #1d6f42;
  border-color: #1d6f42;
  color: white;
}

.btn-excel:hover {
  background-color: #165a34;
  border-color: #14522f;
  color: white;
  transform: translateY(-2px);
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}