html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Ensure textbox and input text is visible with black color */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select,
.form-control,
.form-select {
  color: black !important;
  background-color: white;
}

/* Placeholder text should also be dark enough */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* Ensure disabled inputs are also readable */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

/* Ensure form labels are always visible with proper color */
.form-label {
  color: #212529 !important;
  font-weight: 500;
}

/* Login page labels on dark card background */
.login-label {
  color: #ffffff !important;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
}

/* Ensure all heading text in cards is readable */
.card-header {
  color: #212529 !important;
}

.card-header.bg-warning {
  color: #212529 !important;
}

.card-header.bg-success {
  color: #ffffff !important;
}

.card-header.bg-info {
  color: #ffffff !important;
}

/* Ensure KPI card text is always visible */
.kpi-card,
.kpi-card * {
  color: white !important;
}

.kpi-label,
.kpi-value,
.kpi-detail-label,
.kpi-detail-value {
  color: white !important;
}

/* Nav-link text visibility */
.nav-link {
  color: #333333 !important;
}

.nav-link.active {
  color: #000000 !important;
}

/* Modal tab nav */
.modal .nav-tabs .nav-link {
  color: #495057 !important;
}

.modal .nav-tabs .nav-link.active {
  color: #212529 !important;
  background-color: #ffffff;
}

/* Modal base */
.modal-content {
  background-color: white;
  color: #212529 !important;
}

.modal-body {
  color: #212529 !important;
}

/* ===== MOBILE PERFORMANCE & RESPONSIVE OPTIMIZATIONS ===== */

/* Ensure proper touch target sizes on mobile (min 44x44 px) */
.btn, .nav-link, a.btn, button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

/* Optimize sidebar for mobile */
@media (max-width: 991px) {
  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  body {
    margin-bottom: 0;
  }

  .navbar {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  main {
    min-height: calc(100vh - 56px);
  }
}

/* Improve responsive text sizing */
@media (max-width: 576px) {
  html {
    font-size: 12px;
  }

  .kpi-value {
    font-size: 1.5rem;
  }

  .dashboard-header h1 {
    font-size: 1.25rem;
  }

  .card {
    margin-bottom: 0.5rem;
  }

  main {
    padding: 0.5rem !important;
  }
}

/* Optimize table scrolling on mobile */
@media (max-width: 768px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.85rem;
  }
}

/* Reduce animation on low-power devices */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimize form elements for mobile */
@media (max-width: 576px) {
  .form-control,
  .form-select,
  .btn {
    font-size: 16px; /* Prevents auto-zoom on iOS */
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Better spacing for mobile cards */
@media (max-width: 576px) {
  .card-body {
    padding: 0.75rem;
  }

  .card-header {
    padding: 0.5rem 0.75rem;
  }
}

/* Optimize images for mobile (disable loading on first paint) */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent layout shift from images */
img {
  aspect-ratio: attr(width) / attr(height);
}

/* Text in white backgrounds should be dark */
.bg-white {
  color: #212529 !important;
}

/* Sidebar navigation - ensure text is always visible and white */
.sidebar {
  background-color: #212529;
}

.sidebar .nav-link,
.sidebar .nav-item a,
.sidebar .text-white {
  color: #ffffff !important;
  font-weight: 500;
}

.sidebar .nav-link:hover,
.sidebar .nav-item a:hover {
  color: #ffffff !important;
}

.sidebar .nav-link.active,
.sidebar .nav-item a.active {
  color: #ffffff !important;
  font-weight: bold;
}

/* Sidebar header text */
.sidebar-header h5,
.sidebar-header small,
.sidebar-header {
  color: #ffffff !important;
}

/* Ensure all sidebar text is white */
.sidebar * {
  color: #ffffff !important;
}

/* Modal dialog text visibility - ensure all text is dark and readable */
.modal-dialog,
.modal-header,
.modal-body,
.modal-footer {
  color: #212529 !important;
}

.modal-header h5,
.modal-header .modal-title {
  color: #212529 !important;
}

.modal-body .alert {
  color: #212529 !important;
}

.modal-body .card {
  background-color: #f8f9fa;
}

/* Drilldown modal uses light theme — ensure table text is readable */
#drilldownModal .modal-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}

#drilldownModal .modal-body td,
#drilldownModal .modal-body th {
  color: #212529 !important;
}

/* Modal body badges inherit their Bootstrap color classes */
.modal-body .badge.bg-success { color: #ffffff !important; }
.modal-body .badge.bg-danger  { color: #ffffff !important; }
.modal-body .badge.bg-warning { color: #212529 !important; }
.modal-body .badge.bg-info    { color: #212529 !important; }
.modal-body .badge.bg-primary { color: #ffffff !important; }
.modal-body .badge.bg-secondary { color: #ffffff !important; }
.modal-body .badge.bg-dark    { color: #ffffff !important; }

/* Duplicate removal modal specific styling */
#selectDupsModal .modal-body,
#removeDupsModal .modal-body {
  color: #212529 !important;
}

#selectDupsModal .modal-body *,
#removeDupsModal .modal-body * {
  color: #212529 !important;
}

#selectDupsModal .btn-outline-info,
#removeDupsModal .btn-outline-info {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}

#selectDupsModal .btn-secondary,
#removeDupsModal .btn-secondary {
  color: #ffffff !important;
}

/* Ensure error messages are visible */
#selectDupsError,
#removeDupsError {
  color: #721c24 !important;
  background-color: #f8d7da !important;
}

/* Loading spinner text */
#selectDupsLoading,
#removeDupsLoading {
  color: #212529 !important;
}

/* Content area in modal */
#selectDupsContent,
#selectDupsContent *,
#removeDupsPreview,
#removeDupsPreview * {
  color: #212529 !important;
}

/* Red alert boxes - ensure text is readable with light colors */
.alert-danger {
  color: #ffffff !important;
  background-color: #dc3545 !important;
  border-color: #c82333 !important;
}

.alert-danger * {
  color: #ffffff !important;
}

.alert-danger h1,
.alert-danger h2,
.alert-danger h3,
.alert-danger h4,
.alert-danger h5,
.alert-danger h6,
.alert-danger p,
.alert-danger label,
.alert-danger strong,
.alert-danger button,
.alert-danger div {
  color: #ffffff !important;
}

.alert-danger input,
.alert-danger textarea,
.alert-danger select,
.alert-danger .form-control,
.alert-danger .form-select {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: #ffffff !important;
}

.alert-danger input::placeholder,
.alert-danger textarea::placeholder,
.alert-danger .form-control::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Manual Balance Override section - red boxes with inputs */
.border-danger {
  background-color: #dc3545 !important;
  border-color: #c82333 !important;
  color: #ffffff !important;
}

.border-danger * {
  color: #ffffff !important;
}

.border-danger input,
.border-danger .form-control {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: #ffffff !important;
}

.border-danger input::placeholder,
.border-danger .form-control::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
}

.border-danger label {
  color: #ffffff !important;
}

/* ===== CONFIRM REDEMPTION MODAL STYLING ===== */
#confirmRedeemModal .modal-body {
  background-color: #212529 !important;
  color: #ffffff !important;
}

#confirmRedeemModal .modal-body p {
  color: #ffffff !important;
}

#confirmRedeemModal .card {
  background-color: #212529 !important;
  border-color: transparent !important;
}

#confirmRedeemModal .card-body {
  color: #ffffff !important;
}

#confirmRedeemModal .card-body small {
  color: #ffffff !important;
}

#confirmRedeemModal .card-body span {
  color: #ffffff !important;
}

#confirmRedeemModal .card-body hr {
  border-color: #ffffff !important;
}

#confirmRedeemModal .alert-info {
  background-color: #e7f3ff !important;
  color: #004085 !important;
  border-color: #b3d9ff !important;
}