/* === Contrast Boost for Dark UI === */
:root{
  /* Text */
  --text-main:    #eaf2ff;   /* brighter than #e9eef4 */
  --text-sec:     #b8c7dc;   /* for small meta/secondary */
  --text-muted:   #9fb3cc;
  --text-invert:  #0b0f14;

  /* Backgrounds */
  --bg-body:      #0b0f14;   /* page */
  --bg-card:      #111927;   /* slightly lighter than #0f1621 */
  --bg-header-1:  #0f2236;   /* header gradient start */
  --bg-header-2:  #0b0f14;   /* header gradient end */

  /* Borders / dividers */
  --line-soft:    #273447;   /* brighter than #1b2636 */
  --line-subtle:  #1f2a3b;

  /* Inputs */
  --input-bg:     #121b29;
  --input-border: #2a3b55;
  --input-ph:     #a7b8cf;

  /* Focus ring */
  --focus-ring:   #58a6ff;   /* clear focus outline */

  /* Accents (keep your existing brand blues/purples, just ensure contrast) */
  --accent:       #0d6efd;
}

/* Page + text */
html,body{ background: var(--bg-body); color: var(--text-main); }
a{ color:#9ec5fe; }
a:hover{ color:#c6ddff; }

/* Header */
.app-header{
  background: linear-gradient(180deg, var(--bg-header-1) 0%, var(--bg-header-2) 100%);
  border-bottom:1px solid var(--line-subtle);
}
.brand .logo{ background: var(--accent); }

/* Cards */
.card.app{
  background: var(--bg-card);
  border:1px solid var(--line-soft);
  color: var(--text-main);
}
.card.app p{ color: var(--text-sec); }
.card.app .meta{ color: var(--text-muted); }

/* Leaderboard */
.lb-card{ background: var(--bg-card); border:1px solid var(--line-soft); }
.lb-item{ }
.lb-item .rank{ background:#14263a; color:#d7e6ff; }
.lb-item .count{ color:#ffd166; }

/* Badges row */
.badge-chip{
  background:#132843;
  border:1px solid var(--line-soft);
  color:#d7e6ff;
}

/* Sections */
.section-title{ color:#c9d7ea; }

/* Inputs */
.search-wrap input{
  background: var(--input-bg);
  border:1px solid var(--input-border);
  color: var(--text-main);
}
.search-wrap input::placeholder{ color: var(--input-ph); }

/* Bottom nav */
.bottom-nav{
  background:#0f2236;
  border-top:1px solid var(--line-soft);
}
.bottom-nav .nav a{ color:#c1d4ea; }
.bottom-nav .nav a.active{ color:#ffffff; }

/* Icons stay white to pop on colored tiles */
.card.app .icon{ color:#fff; }

/* Buttons: keep Bootstrap palette but ensure text contrast */
.btn-primary{ color:#fff; }
.btn-outline-light{ border-color:#cfe3ff; color:#dfeaff; }
.btn-outline-light:hover{ background:#cfe3ff; color:#0b2137; }

/* Focus visibility (keyboard a11y) */
:where(a,button,input,select,textarea,.card.app):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(88,166,255,.25);
}

/* Hover lift only on pointer devices */
@media (hover:hover){
  .card.app{ transition: transform .08s ease, border-color .08s ease; }
  .card.app:hover{ transform: translateY(-1px); border-color:#36557a; }
}

/* Improve tiny text readability */
.small, .text-secondary{ color: var(--text-muted) !important; }

/* Optional: boost emoji/icons legibility on very dark tiles */
.bi{ filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }


/* === Critical legibility overrides for maintenance + login === */

/* Global text tone on dark backgrounds */
html, body { color: var(--text-main, #eaf2ff); }
h1, h2, h3, h4, h5, h6 { color: var(--text-main, #eaf2ff); }

/* Make any "secondary/muted/dark" Bootstrap text brighter on dark UIs */
.text-secondary, .text-muted, .small, small, .form-text {
  color: var(--text-muted, #b8c7dc) !important;
}
.text-dark { color: var(--text-main, #eaf2ff) !important; } /* safety net if text-dark sneaks in */

/* Cards on dark */
.card, .lb-card {
  background: var(--bg-card, #111927) !important;
  border-color: var(--line-soft, #273447) !important;
  color: var(--text-main, #eaf2ff) !important;
}

/* --- LOGIN FORM specifics --- */
.form-label, label { color: var(--text-main, #eaf2ff) !important; }

.form-control {
  background: var(--input-bg, #121b29) !important;
  color: var(--text-main, #eaf2ff) !important;
  border-color: var(--input-border, #2a3b55) !important;
}
.form-control::placeholder {
  color: var(--input-ph, #a7b8cf) !important;
  opacity: 1 !important; /* some browsers dim placeholders */
}
.form-check-label { color: var(--text-main, #eaf2ff) !important; }

/* Buttons still readable */
.btn-primary { color:#fff !important; }
.btn-outline-light { border-color:#cfe3ff !important; color:#eaf2ff !important; }
.btn-outline-light:hover { background:#cfe3ff !important; color:#0b2137 !important; }

/* --- MAINTENANCE page specifics --- */
.muted { color: var(--text-muted, #b8c7dc) !important; }
.logo { color:#fff !important; }

/* Inputs focus */
:where(input,button,select,textarea):focus-visible{
  outline: 2px solid var(--focus-ring, #58a6ff);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(88,166,255,.25);
}

/* Ensure Bootstrap’s default body color doesn’t override us */
body, .card p, .card .meta { color: var(--text-main, #eaf2ff); }