/* Import CSS Variables */
@import url("./variables.css");

html,
body {
  font-family: var(--font-family-primary);
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
}

#app {
  width: 100%;
}

/* Force main element to use browser scrolling */
main.content,
.main-content main,
main {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

h1:focus {
  outline: none;
}

a,
.btn-link {
  color: var(--text-link);
}

.btn-primary {
  color: var(--text-light);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding);
  font-weight: var(--btn-font-weight);
  transition: var(--transition-all);
}

.btn-primary:hover {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: var(--shadow-focus);
}

.content {
  padding: 0;
}

.valid.modified:not([type="checkbox"]) {
  /* Remove global green success outline — prefer neutral border styling */
  outline: none !important;
}

/* Neutralize bootstrap/legacy "valid" styles globally to remove green borders
   and focus rings across the app. These rules intentionally use !important
   because some third-party libs (bootstrap/third-party CSS) add inline
   focus outlines and box-shadows. */
.form-control.is-valid,
.form-control.is-valid:focus,
.form-select.is-valid,
.form-select.is-valid:focus,
.was-validated .form-control:valid,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid,
.was-validated .form-select:valid:focus {
  border-color: var(--border-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override: invalid class always wins over valid.modified */
.invalid,
input.invalid,
select.invalid,
textarea.invalid,
.invalid.valid,
.invalid.modified,
.invalid.valid.modified {
  outline: none !important;
  border: 1px solid var(--danger-color) !important;
  box-shadow: none !important;
}

.card {
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-border-radius);
  border-left: 4px solid transparent;
}

/* SimpleMetricCard specific styling with colored left borders */
.card.border-primary {
  border-left-color: var(--primary-color) !important;
}

.card.border-success {
  border-left-color: var(--success-color) !important;
}

.card.border-warning {
  border-left-color: var(--warning-color) !important;
}

.card.border-danger {
  border-left-color: var(--danger-color) !important;
}

.card.border-info {
  border-left-color: var(--info-color) !important;
}

.card.border-secondary {
  border-left-color: var(--secondary-color) !important;
}

.card-header {
  background-color: var(--gray-100);
  border-bottom: 1px solid var(--gray-300);
  font-weight: var(--font-weight-semibold);
}

/* Existing invalid rule - kept for compatibility but overridden above with !important */

.validation-message {
  color: var(--danger-color);
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: #1b6ec2;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

/* Global override: neutralize success/valid styling only for form controls
   and Syncfusion date wrappers so native switches (bootstrap form-switch)
   are not affected. Avoid targeting bare `.valid` or `.is-valid` which
   can unintentionally match unrelated components like switches. */
.form-control.is-valid,
.form-control.is-valid:focus,
.form-select.is-valid,
.form-select.is-valid:focus,
.was-validated .form-control:valid,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid,
.was-validated .form-select:valid:focus,
.e-input-group.e-success,
.e-input-group.e-control-wrapper.e-success,
.e-control-wrapper.e-success,
.e-date-wrapper.e-success,
.e-date-wrapper.e-success .e-input,
.e-date-wrapper.valid,
.e-date-wrapper.valid .e-input,
.e-date-wrapper.modified.valid,
.e-date-wrapper.modified.e-success,
.e-input.is-valid,
.e-input:valid,
.e-input.valid,
.e-control-wrapper.valid,
.e-control-wrapper .e-input.is-valid,
.e-input-group .e-input.is-valid,
.was-validated .e-input:valid,
.was-validated .e-date-wrapper .e-input:valid {
  border-color: var(--border-color) !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

code {
  color: var(--text-code);
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

/* Currency symbol styling - common across the application */
.currency-symbol {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: inherit;
  line-height: 1;
}

/* Smaller variant for input groups */
.currency-symbol.currency-symbol-sm {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
}

/* Card header gradient to match main navigation - global styling */
.card-header-gradient {
  background: var(--gradient-card);
  color: var(--text-light);
}

/* Global Metric Card Border Styling - applies to Home page manual metric cards */
.metric-card {
  border-left: 4px solid transparent;
}

.metric-card.purple {
  border-left-color: var(--metric-purple);
}

.metric-card.orange {
  border-left-color: var(--metric-orange);
}

.metric-card.green {
  border-left-color: var(--metric-green);
}

.metric-card.blue {
  border-left-color: var(--metric-blue);
}

.metric-card.red {
  border-left-color: var(--metric-red);
}

/* Sortable table headers */
.sortable-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.sortable-header:hover {
  background-color: var(--bs-secondary-bg);
}

.sortable-header i.fa-sort {
  opacity: 0.5;
}

.sortable-header:hover i.fa-sort {
  opacity: 0.8;
}

.sortable-header i.fa-sort-up,
.sortable-header i.fa-sort-down {
  opacity: 1;
  color: var(--primary-color);
}

/* Bootstrap Pagination Override - use application primary color */
.pagination .page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-light) !important;
}

.pagination .page-link {
  color: var(--primary-color);
}

.pagination .page-link:hover {
  color: var(--primary-color-dark);
  background-color: var(--bg-hover);
  border-color: var(--border-color);
}

/* Toast Notifications Customization */
.blazored-toast-container.blazored-toast-bottom-center {
  bottom: 3rem !important;
  /* Slightly elevated from bottom */
  z-index: 1070;
  /* Higher than modals */
}

.blazored-toast {
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  animation: slideUpToast 0.3s ease-out !important;
}

.blazored-toast.blazored-toast-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  border-left: 4px solid #1e7e34 !important;
}

.blazored-toast.blazored-toast-error {
  background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%) !important;
  border-left: 4px solid #bd2130 !important;
}

@keyframes slideUpToast {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure disabled elements show a not-allowed cursor so users see they can't interact. */
:disabled,
[disabled] {
  cursor: not-allowed !important;
}

/* When the form is wrapped in a disabled fieldset (submissionSucceeded),
   also make custom interactive controls non-interactive and show not-allowed cursor. */
fieldset[disabled] .donation-type-card,
fieldset[disabled] .preset-amount-button,
fieldset[disabled] .donation-type-card *,
fieldset[disabled] .preset-amount-button * {
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.9;
  /* subtle visual cue that controls are disabled */
}

/* Native form controls when disabled should also show not-allowed */
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
  cursor: not-allowed !important;
}