/* ═══════════════════════════════════════════════════
   ShinobiCTF Theme Overrides
   Loaded after compiled bundle — no Vite compilation needed.
   ═══════════════════════════════════════════════════ */

/* ── Challenge board — category headers ── */
.category-header {
  padding-bottom: 10px;
  border-bottom: 2px solid #f3f4f6;
  position: relative;
  margin-bottom: 1rem !important;
}

.category-header::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 36px; height: 2px;
  background: #D72638;
}

.category-header h3 {
  font-family: 'Robotica', 'Raleway', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111827 !important;
  margin: 0;
}

/* ── Challenge squares ── */
.challenge-button,
[data-bs-theme="light"] .challenge-button,
[data-theme="light"] .challenge-button {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  color: #111827 !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}

.challenge-button:hover,
[data-bs-theme="light"] .challenge-button:hover,
[data-theme="light"] .challenge-button:hover {
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
  transform: translateY(-2px);
}

/* Solved — green left border */
.challenge-button.challenge-solved,
[data-bs-theme="light"] .challenge-button.challenge-solved,
[data-theme="light"] .challenge-button.challenge-solved {
  background: #ffffff !important;
  border-left: 3px solid #16a34a !important;
}

.challenge-button.challenge-solved:hover,
[data-bs-theme="light"] .challenge-button.challenge-solved:hover,
[data-theme="light"] .challenge-button.challenge-solved:hover {
  background: #ffffff !important;
  border-left: 3px solid #16a34a !important;
}

/* Challenge card inner content */
.challenge-inner p {
  font-family: 'Raleway', sans-serif !important;
  font-size: 14px !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
  line-height: 1.3;
}

.challenge-inner span {
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  color: #D72638 !important;
  font-weight: 500;
}

.challenge-rank {
  display: inline-block !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 6px !important;
  padding: 2px 6px;
  border-radius: 2px;
}

/* Center rank badge on challenge cards */
.challenge-inner .challenge-rank {
  display: block !important;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

.rank-genin  { background: rgba(107,114,128,0.1); color: #4b5563 !important; border: 1px solid rgba(107,114,128,0.3); }
.rank-chunin { background: rgba(37,99,235,0.08);  color: #1d4ed8 !important; border: 1px solid rgba(37,99,235,0.25); }
.rank-jonin  { background: rgba(124,58,237,0.08); color: #6d28d9 !important; border: 1px solid rgba(124,58,237,0.25); }

@keyframes hokage-rainbow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.rank-hokage {
  background: linear-gradient(90deg, #ff4444, #ff9900, #ffee00, #44dd44, #44aaff, #aa44ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  border: 1px solid rgba(217,119,6,0.3);
  animation: hokage-rainbow 4s linear infinite;
}

/* ── Whale instance panel ── */
.whale-instance-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #111827;
  border-radius: 2px;
  margin-top: 12px;
}

/* Started panel: row layout — link and action buttons side by side */
/* Inherits border/background/padding from .whale-instance-box */
#whale-panel-started.whale-instance-box {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

/* SSH challenges: column layout — SSH panel above, buttons below */
/* Strip outer box styling since .whale-ssh-panel provides its own */
#whale-panel-started.whale-instance-box:has(.whale-ssh-panel) {
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  border: none;
  padding: 0;
}

.whale-access-link {
  flex: 1;
  font-size: 13px;
  margin: 0;
  min-width: 0;
}

.whale-access-link a {
  color: #D72638 !important;
  font-weight: 500;
}

.whale-instance-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Whale SSH panel (direct / shell challenges) ── */
.whale-ssh-panel {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #111827;
  border-radius: 2px;
  padding: 14px 16px;
  text-align: left;
}

.whale-ssh-label {
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
}

.whale-ssh-command {
  font-family: 'Rubik', monospace;
  font-size: 13px;
  color: #111827;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  padding: 10px 12px;
  word-break: break-all;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s;
  display: block;
}
.whale-ssh-command:hover { border-color: #111827; }
.whale-ssh-command::after {
  content: 'click to copy';
  position: absolute;
  bottom: -18px;
  right: 0;
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 1px;
  font-family: 'Rubik', sans-serif;
}
.whale-ssh-command.copied { border-color: #16a34a !important; }

.whale-ssh-creds {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.whale-ssh-cred-item { flex: 1; min-width: 80px; }

.whale-ssh-cred-label {
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}

.whale-ssh-cred-value {
  font-family: 'Rubik', monospace;
  font-size: 13px;
  color: #111827;
}

.whale-btn-launch {
  background: transparent !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
  font-size: 12px !important;
  border-radius: 2px !important;
}
.whale-btn-launch:hover {
  background: #fee2e2 !important;
}

.whale-btn-destroy {
  background: transparent !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
  font-size: 12px !important;
  border-radius: 2px !important;
}
.whale-btn-destroy:hover {
  background: #fee2e2 !important;
}

.whale-btn-renew {
  background: transparent !important;
  border-color: #86efac !important;
  color: #166534 !important;
  font-size: 12px !important;
  border-radius: 2px !important;
}
.whale-btn-renew:hover {
  background: #f0fdf4 !important;
}

/* ── h1 font ── */
h1 {
  font-family: 'Robotica', 'Raleway', sans-serif !important;
}

/* ── Jumbotron hero banner ── */
.jumbotron {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px;
  padding: 3rem 1rem !important;
  margin-bottom: 2rem;
  text-align: center;
  color: white !important;
  background-color: transparent !important;
  background-image: url('/themes/shinobi/static/img/shinobi-alley-bg.png') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
}

.jumbotron::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 0;
}

.jumbotron .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.jumbotron h1 {
  font-family: 'Robotica', 'Raleway', sans-serif !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: white !important;
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem !important;
  }
}

/* ══════════════════════════════════════════════════
   Challenge Modal — Shinobi Card Theme
   White background, red accents, mono labels.
   ══════════════════════════════════════════════════ */

/* Backdrop */
.modal-backdrop {
  background-color: #000 !important;
  opacity: 0.55 !important;
}

/* Modal card */
#challenge-window .modal-content {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 2px !important;
  border-left: 3px solid #D72638 !important;
  color: #111827 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}

/* Challenge name */
#challenge-window .challenge-name,
#challenge-window h1.challenge-name,
#challenge-window h2.challenge-name {
  font-family: 'Robotica', 'Raleway', sans-serif !important;
  color: #111827 !important;
  font-size: 1.4rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Points */
#challenge-window .challenge-value {
  font-family: 'Raleway', sans-serif !important;
  color: #D72638 !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Tags */
#challenge-window .challenge-tag {
  background: rgba(215, 38, 56, 0.08) !important;
  border: 1px solid rgba(215, 38, 56, 0.25) !important;
  color: #D72638 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px !important;
}

/* Description */
#challenge-window .challenge-desc {
  color: #4b5563 !important;
  font-size: 14px;
  line-height: 1.7;
  display: block;
  margin: 16px 0;
  border-left: 2px solid #f3f4f6;
  padding-left: 12px;
}

/* Attribution / byline */
#challenge-window .challenge-attribution {
  color: #9ca3af !important;
  font-family: 'Rubik', sans-serif;
  font-size: 11px !important;
}

/* Nav tabs */
#challenge-window .nav-tabs {
  border-bottom: 1px solid #e5e7eb !important;
}
#challenge-window .nav-tabs .nav-link {
  color: #9ca3af !important;
  border-color: transparent !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: transparent !important;
  padding: 8px 14px;
}
#challenge-window .nav-tabs .nav-link.active {
  color: #D72638 !important;
  border-color: #e5e7eb #e5e7eb #ffffff !important;
  background: #ffffff !important;
}
#challenge-window .nav-tabs .nav-link:hover {
  color: #111827 !important;
}

/* Close button */
#challenge-window .btn-close {
  filter: none !important;
  opacity: 0.4;
}
#challenge-window .btn-close:hover { opacity: 1; }

/* Flag input */
#challenge-window .challenge-input {
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  border-radius: 2px !important;
}
#challenge-window .challenge-input:focus {
  border-color: #D72638 !important;
  box-shadow: 0 0 0 2px rgba(215,38,56,0.12) !important;
}
#challenge-window .challenge-input::placeholder { color: #9ca3af !important; }

/* Submit button */
#challenge-window .challenge-submit {
  background: #D72638 !important;
  border-color: #D72638 !important;
  color: #fff !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px !important;
}
#challenge-window .challenge-submit:hover {
  background: #b91c2c !important;
  border-color: #b91c2c !important;
}

/* Connect input + button on desktop */
@media (min-width: 576px) {
  #challenge-window .challenge-input {
    border-right: none !important;
    border-radius: 2px 0 0 2px !important;
  }
  #challenge-window .challenge-submit {
    border-radius: 0 2px 2px 0 !important;
  }
}

/* Notification alerts */
#challenge-window .alert {
  border-radius: 2px !important;
  border-left-width: 3px !important;
  font-size: 14px;
}
#challenge-window .alert-success {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  border-left-color: #16a34a !important;
  color: #166534 !important;
}
#challenge-window .alert-danger {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  border-left-color: #991b1b !important;
  color: #991b1b !important;
}
#challenge-window .alert-info {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  border-left-color: #1e40af !important;
  color: #1e40af !important;
}
#challenge-window .alert-warning {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  border-left-color: #92400e !important;
  color: #92400e !important;
}

/* File download buttons */
#challenge-window .btn-file {
  background: transparent !important;
  border-color: rgba(215, 38, 56, 0.35) !important;
  color: #D72638 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px !important;
}
#challenge-window .btn-file:hover {
  background: #D72638 !important;
  color: #fff !important;
}

/* Hints */
#challenge-window details summary {
  color: #6b7280;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid rgba(215, 38, 56, 0.2);
  border-radius: 2px;
  margin-bottom: 4px;
  list-style: none;
}
#challenge-window details summary:hover { color: #D72638; }

/* Tables */
#challenge-window .table { color: #374151 !important; }
#challenge-window .table > :not(caption) > * > * {
  border-color: #f3f4f6 !important;
  color: #374151 !important;
}
#challenge-window .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f9fafb !important;
}
#challenge-window .table a { color: #D72638 !important; }
#challenge-window .table a:hover { color: #b91c2c !important; }

/* ── Notification / event alert modal ── */
.shinobi-alert-modal {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-left: 3px solid #111827 !important;
  border-radius: 2px !important;
  color: #111827 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}

.shinobi-alert-modal .modal-header {
  border-bottom: 1px solid #f3f4f6 !important;
}

.shinobi-alert-modal .modal-title {
  font-family: 'Robotica', 'Raleway', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #111827 !important;
}

.shinobi-alert-modal .modal-body p {
  font-family: 'Rubik', sans-serif !important;
  font-size: 14px !important;
  color: #4b5563 !important;
  margin: 0;
}

.shinobi-alert-modal .modal-footer {
  border-top: 1px solid #f3f4f6 !important;
}

.shinobi-alert-btn {
  background: transparent !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px !important;
}
.shinobi-alert-btn:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}