:root { --shadow: 0 6px 18px rgba(0,0,0,.08); }
.card { box-shadow: var(--shadow); border: 0; }
.table td, .table th { vertical-align: middle; }
.navbar .nav-link.active { font-weight: 700; }
.badge-soft { background: rgba(13,110,253,.08); color:#0d6efd; border:1px solid rgba(13,110,253,.12) }
.receipt { max-width: 720px; margin: 0 auto; border: 1px solid #e6e6e6; padding: 24px; border-radius: 12px; }

/* Dark mode border soft */
html[data-bs-theme="dark"] .top-ticker { border-color: rgba(255,255,255,.1) !important; }


/* Make secondary / outline-secondary look better in dark mode */
html[data-bs-theme="dark"] .btn-secondary,
html[data-bs-theme="dark"] .btn-outline-secondary {
  background-color: #495057;  /* dark gray */
  border-color: #495057;
  color: #f8f9fa;
}

html[data-bs-theme="dark"] .btn-secondary:hover,
html[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Same idea for danger buttons (red pops too hard in dark mode) */
html[data-bs-theme="dark"] .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}
html[data-bs-theme="dark"] .btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
}


/* smooth transition for background and text colors */
html[data-bs-theme="light"], 
html[data-bs-theme="dark"] {
  transition: background-color 0.3s ease, color 0.3s ease;
}


.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; /* fill screen */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  background: rgba(255, 255, 255, 0.6);
  z-index: 2000;
}

html[data-bs-theme="dark"] .loading-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.loading-overlay.d-none {
  display: none !important;
}

#themeToggle i { display:inline-block; transition: transform .4s ease; }
#themeToggle.rotate i { transform: rotate(180deg); }

/* Optional page loader base; keep your overlay HTML present */
.loading-overlay { position:fixed; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; z-index:2000; }
.loading-overlay.d-none { display:none !important; }