/**
 * App UI overrides — make soft/light Metronic buttons clearly visible.
 * Soft buttons use pastel fills with matching borders, so they disappear on
 * gray surfaces (e.g. Collect Payment student card). These rules add contrast,
 * borders, and weight while keeping Metronic's soft-button language.
 */

/* Neutral soft button: readable on bg-light / gray panels */
.btn.btn-light:not(.btn-active):not(.btn-color-muted):not(.btn-color-gray-400):not(.btn-color-gray-500) {
  color: var(--bs-gray-800);
  border-color: var(--bs-gray-300);
  background-color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.btn.btn-light:not(.btn-active):hover:not(.btn-active),
.btn.btn-light:not(.btn-active):focus:not(.btn-active),
.btn.btn-light:not(.btn-active):active:not(.btn-active) {
  color: var(--bs-gray-900);
  border-color: var(--bs-gray-400);
  background-color: var(--bs-gray-100) !important;
}

/* Colored soft buttons: stronger tint + visible colored border */
.btn.btn-light-primary {
  color: var(--bs-primary);
  border-color: color-mix(in srgb, var(--bs-primary) 40%, #ffffff);
  background-color: color-mix(in srgb, var(--bs-primary) 14%, #ffffff);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

.btn.btn-light-success {
  color: var(--bs-success);
  border-color: color-mix(in srgb, var(--bs-success) 40%, #ffffff);
  background-color: color-mix(in srgb, var(--bs-success) 14%, #ffffff);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-success) 18%, transparent);
}

.btn.btn-light-info {
  color: var(--bs-info);
  border-color: color-mix(in srgb, var(--bs-info) 40%, #ffffff);
  background-color: color-mix(in srgb, var(--bs-info) 14%, #ffffff);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 18%, transparent);
}

.btn.btn-light-warning {
  color: #9a7400;
  border-color: color-mix(in srgb, var(--bs-warning) 45%, #ffffff);
  background-color: color-mix(in srgb, var(--bs-warning) 18%, #ffffff);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-warning) 20%, transparent);
}

.btn.btn-light-danger {
  color: var(--bs-danger);
  border-color: color-mix(in srgb, var(--bs-danger) 40%, #ffffff);
  background-color: color-mix(in srgb, var(--bs-danger) 14%, #ffffff);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-danger) 18%, transparent);
}

.btn.btn-light-dark {
  color: var(--bs-dark);
  border-color: color-mix(in srgb, var(--bs-dark) 30%, #ffffff);
  background-color: color-mix(in srgb, var(--bs-dark) 8%, #ffffff);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Keep icon color in sync with label */
.btn.btn-light-primary i,
.btn.btn-light-primary .svg-icon,
.btn.btn-light-success i,
.btn.btn-light-success .svg-icon,
.btn.btn-light-info i,
.btn.btn-light-info .svg-icon,
.btn.btn-light-warning i,
.btn.btn-light-warning .svg-icon,
.btn.btn-light-danger i,
.btn.btn-light-danger .svg-icon,
.btn.btn-light-dark i,
.btn.btn-light-dark .svg-icon {
  color: inherit;
}

/* Dark theme: soft buttons still need an edge against dark panels */
[data-bs-theme='dark'] .btn.btn-light:not(.btn-active):not(.btn-color-muted):not(.btn-color-gray-400):not(.btn-color-gray-500) {
  color: var(--bs-gray-200);
  border-color: var(--bs-gray-600);
  background-color: var(--bs-gray-800);
  box-shadow: none;
}

[data-bs-theme='dark'] .btn.btn-light-primary,
[data-bs-theme='dark'] .btn.btn-light-success,
[data-bs-theme='dark'] .btn.btn-light-info,
[data-bs-theme='dark'] .btn.btn-light-warning,
[data-bs-theme='dark'] .btn.btn-light-danger,
[data-bs-theme='dark'] .btn.btn-light-dark {
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  background-color: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: none;
}