body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   Benchrest Admin - Custom
   ========================= */

/* =========================
   Navbar
   ========================= */

.navbar {
  background-color: #f0f0f0 !important;
  border-bottom: 1px solid #ccc;
}

.navbar .btn {
  min-height: 44px;                 /* touch-friendly */
  padding: 0.6rem 0.9rem;
}

/* Brand logo */
.brand-logo {
  height: 50px;
  width: auto;
}

/* Center title (desktop only) */
.navbar-title {
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  font-weight: 600;
  color: #444;
  pointer-events: none;
}

/* =========================
   Navigation buttons
   ========================= */

.nav-btn {
  background-color: #d0d0d0;
  color: #222;
  border: 1px solid #bcbcbc;
}

.nav-btn:hover {
  background-color: #c4c4c4;
  color: #000;
}

.nav-btn:focus,
.nav-btn:active {
  background-color: #b8b8b8;
  box-shadow: none;
}

/* =========================
   Buttons (general)
   ========================= */

/* Icon-only buttons */
.btn-icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Primary (blue) buttons */
.btn-primary {
  padding: 0.55rem 1rem;
  font-weight: 600;
}

/* PDF buttons */
.btn-pdf {
  background-color: #bfc5cc;
  color: #111;
  border: 1px solid #aeb4bb;
  font-weight: 600;
}

.btn-pdf:hover {
  background-color: #aeb4bb;
}

.btn-pdf:focus,
.btn-pdf:active {
  background-color: #9fa6ad;
  box-shadow: none;
}

/* Disabled state */
.btn.disabled,
.btn:disabled,
a.btn.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* =========================
   Icons
   ========================= */

.btn i,
.nav-btn i {
  font-size: 1.2rem;
  line-height: 1;
  color: #444;
}

/* Action-specific icon colors */
.btn-outline-danger i { color: #b02a37; }    /* delete */
.btn-outline-secondary i { color: #4b5563; } /* edit/back */
.btn-outline-primary i { color: #0d6efd; }   /* enter scores */
.btn-primary i { color: #fff; }              /* primary actions */
.btn-pdf i { color: #b02a37; }               /* PDF */

/* Disabled icons */
.btn.disabled i,
.btn:disabled i {
  color: #666 !important;
}

/* Bigger icons inside primary buttons */
.btn-primary i,
.btn-primary .bi {
  font-size: 1.3em;
  vertical-align: middle;
}

/* Icon spacing */
.btn-primary i.me-1,
.btn-primary i.me-2 {
  margin-right: 0.4rem;
}

/* =========================
   Tables
   ========================= */

.table td,
.table th {
  white-space: normal;
}

/* =========================
   Evidence photos
   ========================= */

.evidence-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  cursor: pointer;
}

/* Fullscreen image overlay */
.img-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2000;
}

.img-overlay-img {
  max-width: 95vw;
  max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.img-close {
  position: fixed;
  top: 14px;
  right: 14px;
}

/* =========================
   Logout button
   ========================= */

.btn-logout {
  background-color: #f3c6c6;
  color: #5c1e1e;
  border: 1px solid #e4b1b1;
}

.btn-logout:hover {
  background-color: #ebb2b2;
  color: #4a1414;
}

.btn-logout:focus,
.btn-logout:active {
  background-color: #e19e9e;
  box-shadow: none;
}

/* =========================
   Responsive
   ========================= */

/* Tablets & phones */
@media (max-width: 991.98px) {
  .navbar-title { display: none; }

  .navbar .navbar-nav .btn {
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .navbar .btn-logout {
    font-weight: 600;
  }
}

/* Phones */
@media (max-width: 575.98px) {
  body { font-size: 0.98rem; }
  h3 { font-size: 1.15rem; }

  .brand-logo { height: 40px; }

  .btn i,
  .nav-btn i {
    font-size: 1.25rem;
  }

  .btn-primary i,
  .btn-primary .bi {
    font-size: 1.4em;
  }
}


/* =========================
   Dark mode (auto)
   iOS-like readability + contrast
   ========================= */
@media (prefers-color-scheme: dark) {

  /* ===== Base ===== */
  body.bg-light {
    background-color: #0f0f10 !important;
    color: #e8e8ea;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #f2f2f4;
  }

  .text-muted {
    color: #a9a9b0 !important;
  }

  .small {
    color: #d2d2d7;
  }

  code {
    color: #cfcfd6;
  }

  /* ===== Navbar ===== */
  .navbar {
    background-color: #141416 !important;
    border-bottom-color: #242428;
  }

  .navbar-title {
    color: #f0f0f2;
  }

  /* Hamburger menu */
  .navbar-toggler {
    border-color: #3a3a44;
    background-color: rgba(255,255,255,0.04);
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }

  .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(1.4);
    opacity: 0.95;
  }

  /* Nav buttons */
  .nav-btn {
    background-color: #232327;
    color: #e8e8ea;
    border-color: #33333a;
  }

  .nav-btn:hover {
    background-color: #2c2c32;
    color: #ffffff;
    border-color: #3d3d46;
  }

  /* ===== Cards ===== */
  .card,
  .card-body {
    background-color: #17171a;
    color: #e8e8ea;
    border-color: #2a2a2f;
  }

    /* Fix Bootstrap helper backgrounds in dark mode */
  .bg-white,
  .bg-light,
  .bg-body,
  .bg-body-tertiary {
    background-color: #17171a !important;
    color: #e8e8ea !important;
  }

  /* If your dashboard uses cards inside cards */
  .card .card {
    background-color: #17171a !important;
    border-color: #2a2a2f !important;
  }

  /* Make sure headings/numbers in stat boxes are readable */
  .card .card-title,
  .card .display-6,
  .card .display-5,
  .card .display-4 {
    color: #f2f2f4 !important;
  }

  /* Ranking list items */
  .ranking-item {
    background-color: #121214;
    border: 1px solid #2a2a2f;
    color: #e8e8ea;
  }

  .card strong {
    color: #f2f2f4;
  }

  .card.shadow-sm {
    box-shadow: 0 10px 24px rgba(0,0,0,0.45) !important;
  }

  /* ===== Tables (IMPORTANT: prevent white tables in dark mode) ===== */
  .table-responsive {
    background-color: transparent !important;
  }

  .table {
    color: #e8e8ea;
    background-color: transparent !important;
  }

  .table thead th {
    background-color: #1a1a1d !important;
    color: #f2f2f4 !important;
    border-color: #2a2a2f !important;
  }

  .table tbody td,
  .table tbody th {
    background-color: #17171a !important;
    color: #e8e8ea !important;
    border-color: #2a2a2f !important;
  }

  /* Bootstrap striped tables */
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #151518 !important;
  }

  /* ===== Forms ===== */
  .form-label {
    color: #cfcfd6;
  }

  .form-control,
  .form-select {
    background-color: #121214;
    color: #f0f0f2;
    border-color: #3a3a44;
  }

  .form-control::placeholder {
    color: #8f8f98;
  }

  .form-control:focus,
  .form-select:focus {
    background-color: #121214;
    color: #f0f0f2;
    border-color: #6a6a78;
    box-shadow: none;
  }

  /* ===== Buttons ===== */
  .btn-outline-secondary {
    background-color: #1c1c20;
    border-color: #4a4a52;
    color: #e3e3e6;
  }

  .btn-outline-secondary:hover {
    background-color: #26262c;
    border-color: #5a5a64;
    color: #ffffff;
  }

  .btn-outline-primary {
    border-color: rgba(13,110,253,0.65);
    color: #cfe0ff;
  }

  .btn-outline-primary:hover {
    background-color: rgba(13,110,253,0.18);
    color: #ffffff;
  }

  .btn-outline-danger {
    border-color: rgba(176,42,55,0.65);
    color: #ffd1d6;
  }

  .btn-outline-danger:hover {
    background-color: rgba(176,42,55,0.18);
    color: #ffffff;
  }

  .btn-primary {
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  }

  .btn-pdf {
    background-color: #232a33;
    color: #e8e8ea;
    border-color: #343c47;
  }

  .btn-pdf:hover {
    background-color: #2c3541;
    border-color: #3f4a58;
    color: #ffffff;
  }

  /* Disabled buttons */
  .btn.disabled,
  .btn:disabled,
  a.btn.disabled {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none !important;
  }

  /* ===== Badges ===== */
  .badge.text-bg-secondary {
    background-color: #2a2a2f !important;
    color: #f0f0f2 !important;
  }

  /* ===== Icons ===== */
  .btn i,
  .nav-btn i {
    color: #d7d7dc;
  }

  .btn-outline-danger i { color: #ff9aa6; }
  .btn-outline-secondary i { color: #cfd3da; }
  .btn-outline-primary i { color: #8db7ff; }
  .btn-pdf i { color: #ff9aa6; }

  /* ===== Evidence thumbnails ===== */
  .evidence-thumb {
    border-color: #3a3a44;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  }

  .evidence-thumb:hover {
    transform: scale(1.05);
  }

  /* ===== Image overlay ===== */
  .img-overlay {
    background: rgba(0,0,0,0.80);
  }

  /* ===== Logout ===== */
  .btn-logout {
    background-color: #4a2323;
    color: #ffdada;
    border-color: #6a3434;
  }

  .btn-logout:hover {
    background-color: #5a2b2b;
    color: #fff0f0;
  }
}