/* ===== GLOBAL ===== */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  background-color: #f8f9fa;
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  padding: 70px 0;
}

/* ===== SECTION OFFSET ===== */
section {
  scroll-margin-top: 80px;
}

/* ===== CARD ===== */
.card {
  border-radius: 10px;
}

/* ===== FOOTER ===== */
footer {
  background-color: #1f2933;
}

footer small {
  color: #d1d5db;
}

/* ===== BUTTON ===== */
.btn {
  border-radius: 6px;
}

/* ===== LINK ===== */
a {
  text-decoration: none;
}

a:not(.btn):hover {
  text-decoration: underline;
}

/* ===== SCROLL TO TOP ===== */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  background-color: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 20px;
  cursor: pointer;
  display: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#scrollTopBtn:hover {
  background-color: #0b5ed7;
}

/* ===== DARK MODE ===== */
body.dark-mode {
  background-color: #121212;
  color: #e5e7eb;
}

body.dark-mode .bg-light {
  background-color: #1f2933 !important;
}

body.dark-mode .card {
  background-color: #1f2933;
  color: #e5e7eb;
}

body.dark-mode footer {
  background-color: #0f172a;
}

body.dark-mode a {
  color: #93c5fd;
}

body.dark-mode .text-muted {
  color: #9ca3af !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f9fafb;
}

body.dark-mode .hero {
  background: linear-gradient(135deg, #1e3a8a, #0f172a);
}

/* ===== MODAL DARK MODE ===== */
body.dark-mode .modal-content {
  background-color: #1f2933;
  color: #e5e7eb;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #374151;
}

body.dark-mode .modal-title {
  color: #f9fafb;
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* ===== TRANSPARENT TABLE ===== */
.table {
  background-color: transparent;
}

.table th,
.table td {
  background-color: transparent;
  vertical-align: middle;
}

.table thead.table-primary {
  background-color: rgba(13, 110, 253, 0.12); 
}

.table thead th {
  color: #1f2933;
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

.table-bordered > :not(caption) > * {
  border-color: rgba(0, 0, 0, 0.1);
}

/* ===== TRANSPARENT TABLE DARK MODE ===== */
body.dark-mode .table {
  color: #e5e7eb;
}

body.dark-mode .table thead.table-primary {
  background-color: rgba(37, 99, 235, 0.25);
}

body.dark-mode .table thead th {
  color: #f9fafb;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table-bordered > :not(caption) > * {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ===== FIX TEXT COLOR TABLE ===== */
.table th,
.table td {
  color: #1f2933; 
}

/* ===== TABLE TEXT DARK MODE ===== */
body.dark-mode .table th,
body.dark-mode .table td {
  color: #e5e7eb;
}

.table th {
  font-weight: 600;
}

.table td {
  font-weight: 400;
}

/* ===== DARK MODE TOGGLE HOVER ===== */
.dark-toggle {
  transition: all 0.25s ease;
  border-radius: 50%;
}

.dark-toggle:hover {
  transform: scale(1.15) rotate(8deg);
  background-color: rgba(255, 255, 255, 0.15);
}

@media (hover: hover) {
  .dark-toggle:hover {
    transform: scale(1.15) rotate(8deg);
  }
}

.dark-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body {
  background-color: #F2F2F2;
}