/* ============================================================
   THE ACE CTF — theace.css
   Sky carnival theme with glassmorphism
   ============================================================ */

/* Sky background */
body {
  background: linear-gradient(180deg, #5BC8E8 0%, #A8DFF5 60%, #D4F0FA 100%) !important;
  min-height: 100vh;
  font-family: 'Georgia', serif;
}

/* ============ Navbar carnival style ============ */
.navbar {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(255,255,255,0.3);
}
.navbar-brand img { height: 52px; }

/* ============ Floating balloons & clouds ============ */
.floating-elements {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.balloon {
  position: absolute;
  animation: floatUp 8s ease-in-out infinite;
}
.b1 { width: 120px; left: 5%;  top: 20%; animation-delay: 0s; }
.b2 { width: 90px;  left: 15%; top: 50%; animation-delay: 2s; }
.b3 { width: 140px; right: 8%; top: 15%; animation-delay: 1s; }
.cloud {
  position: absolute;
  opacity: 0.85;
  animation: driftCloud 20s linear infinite;
}
.cl1 { width: 300px; left: -10%;  top: 40%; animation-delay: 0s; }
.cl2 { width: 250px; right: -5%;  top: 25%; animation-delay: 10s; }

@keyframes floatUp {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-20px) rotate(2deg); }
}
@keyframes driftCloud {
  from { transform: translateX(0); }
  to   { transform: translateX(60px); }
}

/* ============ Content stacking ============ */
.container, .jumbotron, .card {
  position: relative;
}

/* ============ Jumbotron — transparan, teks putih ============ */
.jumbotron,
[data-bs-theme="dark"] .jumbotron {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron *,
[data-bs-theme="dark"] .jumbotron h1,
[data-bs-theme="dark"] .jumbotron * {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* ============ Bootstrap card (generic) — glass style (hanya modal/home) ============ */
.card,
[data-bs-theme="dark"] .card {
  background: rgba(30, 100, 160, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
}
.card-title,
.card-body,
.card-text,
.card *,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-text,
[data-bs-theme="dark"] .card * {
  color: #ffffff !important;
}

/* ============ Challenge card grid — glass style ============ */
.challenge-button,
[data-bs-theme="dark"] .challenge-button {
  background: rgba(30, 100, 160, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  transition: transform 0.2s, box-shadow 0.2s;
}
.challenge-button:hover,
[data-bs-theme="dark"] .challenge-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
  background: rgba(30, 100, 160, 0.7) !important;
}
.challenge-button *,
[data-bs-theme="dark"] .challenge-button * {
  color: #ffffff !important;
}

/* ============ Category label di grid challenges ============ */
#challenges-container h3,
#challenges-container h4,
[data-bs-theme="dark"] #challenges-container h3,
[data-bs-theme="dark"] #challenges-container h4 {
  color: #1a3a52 !important;
  text-shadow: none;
}

/* ============ Teks konten di halaman (non-modal) ============ */
/* Teks body umum — gelap agar kontras di sky terang */
.container p,
[data-bs-theme="dark"] .container p {
  color: #1a3a52 !important;
}

h1, h2, h3, h4, h5, h6,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #1a1a2e;
}

/* ============ Buttons carnival ============ */
.btn-primary,
[data-bs-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #C85A1E, #E8854A) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 8px 28px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff !important;
}
.btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #A84A10, #D0653A) !important;
  transform: scale(1.02);
}

/* Submit / Kirim button di modal */
.btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
  background: linear-gradient(135deg, #C85A1E, #E8854A) !important;
  border: none !important;
  border-radius: 24px !important;
  color: #ffffff !important;
  font-weight: bold;
}
.btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: linear-gradient(135deg, #A84A10, #D0653A) !important;
  color: #ffffff !important;
}

/* ============ Form input — orange carnival style ============ */
.form-control,
.form-select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: linear-gradient(135deg, #C85A1E, #E8854A) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 24px !important;
}
.form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}
.form-control:focus,
.form-select:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background: linear-gradient(135deg, #A84A10, #D0653A) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.form-select option,
[data-bs-theme="dark"] .form-select option {
  background: #C85A1E;
  color: #ffffff;
}

/* ============ Tabel — orange carnival style ============ */
.table,
[data-bs-theme="dark"] .table {
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
  color: #1a1a2e !important;
}
.table > :not(caption) > * > th,
.table > thead > tr > th,
.table thead th,
[data-bs-theme="dark"] .table > :not(caption) > * > th {
  background: linear-gradient(135deg, #C85A1E, #E8854A) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.table td,
.table tr,
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table tr {
  color: #1a1a2e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.35) !important;
}

/* ============ Alert box ============ */
.alert,
[data-bs-theme="dark"] .alert {
  background: linear-gradient(135deg, #C85A1E, #E8854A) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.alert a,
[data-bs-theme="dark"] .alert a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 600;
}
.alert .btn-close,
[data-bs-theme="dark"] .alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============ Fix teks umum ============ */
.text-muted,
[data-bs-theme="dark"] .text-muted,
.text-secondary,
[data-bs-theme="dark"] .text-secondary {
  color: #1a3a52 !important;
  opacity: 1 !important;
}

label,
.form-label,
b,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] b {
  color: #1a1a2e !important;
}

/* ============ Hero text — paksa putih ============ */
.container .hero-text,
[data-bs-theme="dark"] .container .hero-text {
  color: #ffffff !important;
}

/* ============ Navbar teks putih ============ */
.navbar h1, .navbar h2, .navbar h3, .navbar p {
  color: #ffffff !important;
}

/* ============ Footer "Powered by CTFd" — putih ============ */
footer .text-muted,
footer .text-secondary,
footer a,
footer small,
[data-bs-theme="dark"] footer .text-muted,
[data-bs-theme="dark"] footer .text-secondary,
[data-bs-theme="dark"] footer a,
[data-bs-theme="dark"] footer small {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ============ Challenge/Users/Teams/Scoreboard page ============ */
#challenges-container,
.challenges-container,
[data-bs-theme="dark"] #challenges-container {
  background: transparent !important;
}

/* ============ MODAL CHALLENGE — glass style ============ */
.modal-content,
[data-bs-theme="dark"] .modal-content {
  background: rgba(30, 100, 160, 0.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.modal-header,
[data-bs-theme="dark"] .modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Nav tabs di modal header */
.modal-header .nav-tabs,
[data-bs-theme="dark"] .modal-header .nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.modal .nav-link,
[data-bs-theme="dark"] .modal .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
}
.modal .nav-link.active,
[data-bs-theme="dark"] .modal .nav-link.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 2px solid #ffffff !important;
}

/* ============ Judul challenge & poin — gelap ============ */
#challenge-title,
#challenge-value,
[data-bs-theme="dark"] #challenge-title,
[data-bs-theme="dark"] #challenge-value {
  color: #1a1a2e !important;
}

/* ============ Ikon jempol & angka solves — gelap ============ */
.modal-body .fa-thumbs-up,
.modal-body .fa-thumbs-down,
.modal-body #challenge-solves,
.modal-body .challenge-solves,
.modal-body #challenge-solve-count,
.modal-body .btn-vote,
.modal-body [id^="challenge-vote"],
.modal-body .vote-button,
[data-bs-theme="dark"] .modal-body .fa-thumbs-up,
[data-bs-theme="dark"] .modal-body .fa-thumbs-down,
[data-bs-theme="dark"] .modal-body #challenge-solves,
[data-bs-theme="dark"] .modal-body #challenge-solve-count,
[data-bs-theme="dark"] .modal-body .btn-vote {
  color: #1a1a2e !important;
}

/* ============ Deskripsi challenge — PAKSA PUTIH ============ */
.challenge-desc,
.challenge-desc *,
.challenge-desc p,
.challenge-desc span,
.challenge-desc div,
.challenge-desc li,
.challenge-desc a,
.challenge-desc strong,
.challenge-desc em,
.challenge-desc code,
.challenge-desc pre,
body > * .container .challenge-desc p,
[data-bs-theme="dark"] .challenge-desc,
[data-bs-theme="dark"] .challenge-desc *,
[data-bs-theme="dark"] body > * .container .challenge-desc p {
  color: #ffffff !important;
}

/* Kecuali form input tetap orange carnival */
.modal .form-control,
.modal .form-select,
[data-bs-theme="dark"] .modal .form-control,
[data-bs-theme="dark"] .modal .form-select {
  background: linear-gradient(135deg, #C85A1E, #E8854A) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Tombol close modal */
.modal .btn-close,
[data-bs-theme="dark"] .modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}