/* other_charges.css */

/* 1) Reset & base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Inter", sans-serif;
  background-color: #f4f5f7;
  color: #333;
  line-height: 1.5;
}

/* 3) Main content wrapper */
.main-wrapper {
  margin-left: 280px;      /* same as .sidebar width */
  padding: 2rem;
  min-height: 100vh;
  margin-top: 50px;
}

/* 4) Cards grid */
.row.g-4 {
  margin: 0 -0.5rem;       /* offset the .col padding */
}
.row.g-4 > [class^="col-"] {
  padding: 0 0.5rem;
}
.card {
  border: none;
  border-radius: 0.75rem;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* 5) Card body */
.card-body {
  padding: 1.5rem;
}
.card-title {
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.card-text {
  margin-bottom: 1rem;
  color: #555;
}

/* 6) Buttons */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
  border-width: 2px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color .2s, color .2s;
}
.btn-outline-primary:hover    { background-color: #0d6efd; color: #fff; }
.btn-outline-success:hover    { background-color: #198754; color: #fff; }
.btn-outline-warning:hover    { background-color: #ffc107; color: #212529; }
.btn-outline-danger:hover     { background-color: #dc3545; color: #fff; }

/* 7) Responsive tweaks */
@media (max-width: 992px) {
  .main-wrapper {
    margin-left: 0;
    padding: 1rem;
    margin-bottom: 50px;
  }
}