/* Punkham Mayhem - main.css ── */

/* Color & font tokens ── */
:root {
  --clr-bg:       #0D0D0D;
  --clr-surface:  #111111;
  --clr-card:     #161616;
  --clr-border:   #1E1E1E;
  --clr-text:     #E8E8E0;
  --clr-muted:    #555555;
  --clr-accent:   #C8001A;
  --clr-gold:     #FFD700;
  --clr-success:  #2A8F4B;
  --font-mono:    'Chakra Petch', sans-serif;

  /* Bootstrap token kills */
  --bs-border-radius:      0 !important;
  --bs-border-radius-sm:   0 !important;
  --bs-border-radius-lg:   0 !important;
  --bs-border-radius-xl:   0 !important;
  --bs-border-radius-xxl:  0 !important;
  --bs-border-radius-pill: 0 !important;
  --bs-primary:            #C8001A;
  --bs-primary-rgb:        200, 0, 26;
  --bs-link-color:         #C8001A;
  --bs-link-hover-color:   #a5001a;
  --bs-body-bg:            #0D0D0D;
  --bs-body-color:         #E8E8E0;
  --bs-body-font-family:   'Chakra Petch', sans-serif;
  --bs-border-color:       #1E1E1E;
  --bs-card-bg:            #161616;
  --bs-card-border-color:  transparent;
  --bs-secondary-bg:       #111111;
  --bs-tertiary-bg:        #161616;
}

/* Global reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

html, body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--clr-text);
  text-transform: uppercase;
  line-height: 1.1;
}

p { margin-bottom: 1rem; color: var(--clr-text); }

a {
  color: var(--clr-accent);
  text-decoration: none;
}
a:hover { color: #a5001a; }

small, .small { font-size: 0.75em; }

/* Bootstrap override - buttons ── */
.btn {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transition: background-color 0.15s, opacity 0.15s;
}
.btn:focus, .btn:focus-visible { box-shadow: none !important; outline: 1px solid var(--clr-accent); }
.btn-primary { background-color: var(--clr-accent); color: #E8E8E0; }
.btn-primary:hover, .btn-primary:active { background-color: #a5001a; color: #E8E8E0; }
.btn-secondary { background-color: #1E1E1E; color: var(--clr-text); }
.btn-secondary:hover { background-color: #2a2a2a; color: var(--clr-text); }
.btn-outline-primary { border: 1px solid var(--clr-accent) !important; color: var(--clr-accent); background: transparent; }
.btn-outline-primary:hover { background: var(--clr-accent); color: #E8E8E0; }
.btn-sm { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
.btn-lg { font-size: 0.8rem; padding: 0.9rem 2rem; }

/* Bootstrap override - cards ── */
.card {
  background-color: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: 0 !important;
  box-shadow: none;
}
.card-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-accent);
  font-weight: 400;
}
.card-body { padding: 1rem; }
.card-footer { background: var(--clr-surface); border-top: 1px solid var(--clr-border); }

/* Bootstrap override - forms ── */
.form-control, .form-select {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--clr-card);
  border-color: var(--clr-accent);
  color: var(--clr-text);
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--clr-muted); }
.form-label {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 0.4rem;
}
.invalid-feedback { font-size: 0.85rem; }
.form-check-input { background-color: var(--clr-surface); border-color: var(--clr-border); }
.form-check-input:checked { background-color: var(--clr-accent); border-color: var(--clr-accent); }

/* Bootstrap override - modals ── */
.modal-content {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: 0 !important;
  color: var(--clr-text);
}
.modal-header {
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}
.modal-footer { border-top: 1px solid var(--clr-border); background: var(--clr-surface); }
.modal-title { font-size: 0.9rem; letter-spacing: 0.3em; text-transform: uppercase; }
.btn-close { filter: invert(1); opacity: 0.5; }
.btn-close:hover { opacity: 1; }

/* Bootstrap override - alerts ── */
.alert {
  border-radius: 0 !important;
  border: none;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.alert-danger  { background: rgba(200,0,26,0.15);  color: #ff6b6b; }
.alert-success { background: rgba(42,143,75,0.15); color: #6bff9e; }
.alert-warning { background: rgba(255,215,0,0.1);  color: var(--clr-gold); }

/* Bootstrap override - badges ── */
.badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.bg-primary { background-color: var(--clr-accent) !important; }
.bg-secondary { background-color: #1E1E1E !important; }
.bg-success { background-color: var(--clr-success) !important; }

/* Bootstrap override - tables ── */
.table { --bs-table-bg: transparent; color: var(--clr-text); }
.table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--clr-border); }
.table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--clr-muted);
  font-weight: 400;
  border-bottom: 1px solid var(--clr-border) !important;
}
.table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.03); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.02); }

/* Bootstrap override - nav / tabs ── */
.nav-tabs { border-bottom: 1px solid var(--clr-border); }
.nav-tabs .nav-link {
  color: var(--clr-muted);
  border: none;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}
.nav-tabs .nav-link.active {
  color: var(--clr-text);
  background: transparent;
  border-bottom: 2px solid var(--clr-accent);
}
.nav-tabs .nav-link:hover { color: var(--clr-text); border-color: transparent; }

/* Bootstrap override - progress ── */
.progress { background-color: var(--clr-border); height: 4px; border-radius: 0 !important; }
.progress-bar { background-color: var(--clr-accent); border-radius: 0 !important; }

/* Bootstrap override - dropdowns ── */
.dropdown-menu {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.dropdown-item { color: var(--clr-text); padding: 0.5rem 1rem; }
.dropdown-item:hover { background: var(--clr-surface); color: var(--clr-text); }
.dropdown-divider { border-color: var(--clr-border); }

/* Bootstrap override - pagination ── */
.page-link {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.page-link:hover { background: var(--clr-card); color: var(--clr-accent); border-color: var(--clr-border); }
.page-item.active .page-link { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }
.page-item.disabled .page-link { background: var(--clr-surface); color: var(--clr-muted); }

/* Bootstrap override - list-group ── */
.list-group-item {
  background: var(--clr-card);
  border-color: var(--clr-border);
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.list-group-item-action:hover { background: var(--clr-surface); color: var(--clr-text); }
.list-group-item.active { background: var(--clr-accent); border-color: var(--clr-accent); }

/* Bootstrap override - tooltips ── */
.tooltip-inner {
  background: var(--clr-card);
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--clr-border);
  border-radius: 0 !important;
  max-width: 200px;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--clr-border); }

/* Bootstrap override - spinners ── */
.spinner-border { color: var(--clr-accent); }

/* Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A2A2A; }
::-webkit-scrollbar-thumb:hover { background: #c2c2c2; }

/* Utility classes ── */
.text-accent       { color: var(--clr-accent) !important; }
.text-muted-game   { color: var(--clr-muted)  !important; }
.text-gold         { color: var(--clr-gold)   !important; }
.text-success-game { color: var(--clr-success) !important; }
.border-dark-game  { border-color: var(--clr-border) !important; }
.bg-surface        { background-color: var(--clr-surface) !important; }
.bg-card           { background-color: var(--clr-card)    !important; }
.bg-game           { background-color: var(--clr-bg)      !important; }
.font-mono         { font-family: var(--font-mono) !important; }
.label-caps {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.divider-dark { border-color: var(--clr-border); margin: 1rem 0; }

/* Selection ── */
::selection { background: rgba(200,0,26,0.3); color: #fff; }