/*
 * Custom styles for the Volaire LARP Staff Oracle.
 *
 * These rules build upon the Bootstrap/Bootswatch Darkly foundation to
 * evoke a mystical, fantasy aesthetic while maintaining strong readability
 * and WCAG AA contrast ratios throughout.
 *
 * Colour tokens used:
 *   --clr-crimson:   #b0332a   primary / accent (≥ 4.5:1 on white text)
 *   --clr-surface:   rgba(0,0,0,0.65)  card / panel backgrounds
 *   --clr-input-bg:  #1e1e2e   solid dark input background
 *   --clr-border:    rgba(255,255,255,0.18)  subtle borders
 *   --clr-text:      #f0f0f0   main body text
 *   --clr-muted:     #c8cdd3   secondary / muted text (≥ 4.5:1 on surface)
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Lora:wght@400;700&display=swap');

/* ── CSS custom properties ─────────────────────────────────────────────── */
:root {
  --clr-crimson:  #b0332a;
  --clr-surface:  rgba(0, 0, 0, 0.65);
  --clr-input-bg: #1e1e2e;
  --clr-border:   rgba(255, 255, 255, 0.18);
  --clr-text:     #f0f0f0;
  --clr-muted:    #c8cdd3;
}

/* ── Body & typography ──────────────────────────────────────────────────── */
body {
  font-family: 'Lora', serif;
  background-image: url("../images/background.59d84b98afd7.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: var(--clr-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  color: var(--clr-text);
}

/* Muted text: bright enough to read on dark surfaces (≥ 4.5:1 on #1e1e2e) */
.text-muted,
.list-group-item.text-muted {
  color: var(--clr-muted) !important;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  background-color: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar-brand {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f0f0f0 !important;
}
.nav-link {
  color: #d0d4d8 !important;
}
.nav-link:hover,
.nav-link:focus {
  color: #ffffff !important;
}
.navbar-text {
  color: #c0c4c8 !important;
}

/* ── Cards & panels ─────────────────────────────────────────────────────── */
.card,
.list-group-item {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
}
.card-header {
  background-color: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text);
}
/* Ensure cards that Bootstrap colours with bg-light or similar show correctly */
.card.bg-light,
.card-body.bg-light,
.bg-light {
  background-color: rgba(40, 40, 55, 0.80) !important;
  color: var(--clr-text) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table {
  color: var(--clr-text);
  --bs-table-color: var(--clr-text);
  /*
   * Solid dark base instead of transparent: stops the background image
   * bleeding through rows and making text unreadable.
   */
  --bs-table-bg: rgba(8, 10, 20, 0.82);
  --bs-table-striped-color: var(--clr-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.06);
  --bs-table-hover-color: var(--clr-text);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.10);
  --bs-table-border-color: rgba(255, 255, 255, 0.18);
}
.table thead th {
  border-bottom: 2px solid var(--clr-crimson);
  color: #f8f9fa;
}
/* table-dark thead stays fully solid */
.table-dark {
  --bs-table-bg: #1a1a2a;
  --bs-table-border-color: rgba(255, 255, 255, 0.14);
}
/* Striped rows: slightly lighter than the base row */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(22, 25, 45, 0.88);
  color: var(--clr-text);
}
.table-bordered > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.18);
}
/* table-success row highlight (blanket XP tier) */
.table-success > * > *,
tr.table-success > * {
  --bs-table-bg: rgba(26, 107, 82, 0.40) !important;
  color: #c8f0e4 !important;
  border-color: rgba(100, 200, 160, 0.20) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--clr-crimson);
  border-color: var(--clr-crimson);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #92261f;
  border-color: #92261f;
  color: #ffffff;
}
.btn-secondary {
  background-color: #4a5260;
  border-color: #4a5260;
  color: #f0f0f0;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #3b414d;
  border-color: #3b414d;
  color: #ffffff;
}
.btn-outline-secondary {
  color: #c8cdd3;
  border-color: #5a606e;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: #3b414d;
  border-color: #5a606e;
  color: #ffffff;
}
.btn-outline-danger {
  color: #e07070;
  border-color: #e07070;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: rgba(176, 51, 42, 0.35);
  border-color: #e07070;
  color: #ffffff;
}
/* ── Filled buttons: success / warning / danger ─────────────────────────── */
.btn-success {
  background-color: #1a6b52;
  border-color: #1a6b52;
  color: #c8f0e4;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #155a44;
  border-color: #155a44;
  color: #e0f8f0;
}
.btn-warning {
  background-color: #7a5500;
  border-color: #7a5500;
  color: #ffe082;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #624400;
  border-color: #624400;
  color: #ffd040;
}
.btn-danger {
  background-color: #7a1c1c;
  border-color: #7a1c1c;
  color: #ffd0d0;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #621515;
  border-color: #621515;
  color: #ffe0e0;
}

/* ── Outline buttons: info / success / warning / light ──────────────────── */
.btn-outline-info {
  color: #7ec8e3;
  border-color: #3a8aad;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: rgba(28, 95, 138, 0.38);
  border-color: #4a9fc0;
  color: #b8e4f4;
}
.btn-outline-success {
  color: #5ccba0;
  border-color: #1a6b52;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: rgba(26, 107, 82, 0.35);
  border-color: #22886a;
  color: #a0e8c8;
}
.btn-outline-warning {
  color: #ffe082;
  border-color: #7a5500;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: rgba(122, 85, 0, 0.35);
  border-color: #9a6a00;
  color: #ffd040;
}
/*
 * btn-outline-light: used for admin/utility actions on dark cards.
 * Darkly's "light" is #adb5bd — nearly invisible as a border on dark bg.
 * Replace with a visible mid-grey that reads clearly on our surfaces.
 */
.btn-outline-light {
  color: #c8cdd3;
  border-color: #6a7080;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: #9aa0ae;
  color: #f0f0f0;
}

/* ── Form controls ──────────────────────────────────────────────────────── */
/*
 * color-scheme: dark tells the browser to render native form-control chrome
 * (including the <select> popup list) in dark mode. This is the reliable fix
 * for Chrome, which ignores background-color on <option> in its native popup.
 * Solid background-color on the input itself avoids transparency issues.
 */
.form-control,
.form-select,
textarea.form-control {
  background-color: var(--clr-input-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f0f0f0;
  color-scheme: dark;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background-color: #252538;
  color: #f8f9fa;
  border-color: var(--clr-crimson);
  box-shadow: 0 0 0 0.2rem rgba(176, 51, 42, 0.30);
}
.form-control:disabled,
.form-select:disabled {
  background-color: #16161f;
  color: var(--clr-muted);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Placeholder text – ensure visible against dark input bg */
.form-control::placeholder,
textarea.form-control::placeholder {
  color: #8a8fa8;
  opacity: 1;
}

/*
 * <option> elements: belt-and-braces fallback for Firefox and other engines
 * that honour background-color / color on <option>. Chrome uses color-scheme
 * (set above) to render the native popup in dark mode instead.
 */
.form-select option,
select option {
  background-color: #1e1e2e;
  color: #f0f0f0;
}
.form-select option:checked,
select option:checked {
  background-color: #2e2e44;
  color: #ffffff;
}
.form-select option:disabled,
select option:disabled {
  color: #6c7080;
}

/* Form labels */
.form-label {
  color: var(--clr-text);
}
.form-check-label {
  color: var(--clr-text);
}

/* Input group addons */
.input-group-text {
  background-color: #252538;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--clr-muted);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
/*
 * bg-secondary in Darkly can be quite dark (#444) with small white text
 * that fails contrast. Override with a slightly more readable mid-tone.
 */
.badge.bg-secondary {
  background-color: #4e5668 !important;
  color: #e8ecf0 !important;
}
/*
 * bg-light + text-dark badge (used for ticket status chips).
 * In Darkly, bg-light is a medium grey; text-dark is near-black.
 * That combination IS high contrast but looks washed-out. Use a
 * steel-blue tint instead that fits the dark fantasy palette.
 */
.badge.bg-light.text-dark {
  background-color: #3d4f6a !important;
  color: #dce8f5 !important;
}
/* Primary badge keeps the crimson brand colour */
.badge.bg-primary {
  background-color: var(--clr-crimson) !important;
  color: #ffffff !important;
}
/* Warning badge: amber text on dark surface (instead of dark-text on yellow) */
.badge.bg-warning {
  background-color: #7a5500 !important;
  color: #ffe082 !important;
}
.badge.bg-warning.text-dark {
  background-color: #7a5500 !important;
  color: #ffe082 !important;
}
/*
 * Dark badge ("Assigned:" chip in ticket detail).
 * bg-dark (#303030) is near-invisible on our dark card backgrounds.
 * Replace with a visible mid-tone slate so the chip stands out.
 */
.badge.bg-dark {
  background-color: #3d4558 !important;
  color: #d8dce8 !important;
}
/*
 * Info badge (OPEN ticket status, tab counts).
 * Darkly's default #3498DB gives ≈3.1:1 against white — fails WCAG AA for
 * small badge text. Darken to a deep steel-blue with guaranteed white contrast.
 */
.badge.bg-info {
  background-color: #1c5f8a !important;
  color: #e0f0ff !important;
}
/*
 * Success badge (RESOLVED status).
 * Darkly's #00bc8c teal gives ≈2.4:1 against white — badly fails.
 * Switch to a deep forest-green with white text (≈7:1).
 */
.badge.bg-success {
  background-color: #1a6b52 !important;
  color: #c8f0e4 !important;
}
/*
 * Danger badge (AWAITING_STAFF, CRITICAL priority).
 * Darkly's #E74C3C gives ≈3.8:1 against white — fails WCAG AA for badges.
 * Use a deeper brick-red (clearly distinct from our --clr-crimson primary).
 */
.badge.bg-danger {
  background-color: #7a1c1c !important;
  color: #ffd0d0 !important;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert-success {
  background-color: rgba(0, 110, 60, 0.70);
  border-color: rgba(0, 160, 90, 0.60);
  color: #b8f0d0;
}
.alert-danger {
  background-color: rgba(140, 20, 20, 0.70);
  border-color: rgba(200, 50, 50, 0.60);
  color: #ffd0d0;
}
.alert-warning {
  background-color: rgba(130, 90, 0, 0.70);
  border-color: rgba(190, 140, 0, 0.60);
  color: #ffe8a0;
}
.alert-info {
  background-color: rgba(0, 90, 160, 0.70);
  border-color: rgba(0, 130, 210, 0.60);
  color: #c0e4ff;
}
/* Ensure close buttons on alerts are visible */
.alert .btn-close {
  filter: invert(1) grayscale(1) brightness(1.5);
}

/* ── List groups ─────────────────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--clr-border);
}
.list-group-item + .list-group-item {
  border-top-color: var(--clr-border);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.page-link {
  background-color: #1e1e2e;
  border-color: rgba(255, 255, 255, 0.18);
  color: #c8cdd3;
}
.page-link:hover,
.page-link:focus {
  background-color: #2a2a40;
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.page-item.active .page-link {
  background-color: var(--clr-crimson);
  border-color: var(--clr-crimson);
  color: #ffffff;
}
.page-item.disabled .page-link {
  background-color: #16161f;
  border-color: rgba(255, 255, 255, 0.10);
  color: #5a5f70;
}

/* ── Nav tabs (ticket list etc.) ────────────────────────────────────────── */
.nav-tabs .nav-link {
  color: var(--clr-muted);
  border-color: transparent;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #f0f0f0;
  border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) transparent;
}
.nav-tabs .nav-link.active {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.18) transparent;
  color: #f8f9fa;
}

/* ── TinyMCE editor container ───────────────────────────────────────────── */
.tox-tinymce {
  border-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 0.375rem !important;
}

/* ── Collapse / accordion ───────────────────────────────────────────────── */
.accordion-button {
  background-color: rgba(0, 0, 0, 0.55);
  color: #f0f0f0;
}
.accordion-button:not(.collapsed) {
  background-color: rgba(176, 51, 42, 0.20);
  color: #f8f9fa;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}
.accordion-body {
  background-color: rgba(0, 0, 0, 0.40);
  color: var(--clr-text);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  padding: 1rem 0;
  color: #7a8090;
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2rem;
}

/* ── Utility overrides ───────────────────────────────────────────────────── */
/* Horizontal rules */
hr {
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
}
/* Code blocks */
code {
  color: #e89090;
  background-color: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
/* Breadcrumb */
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--clr-muted);
}
.breadcrumb-item.active {
  color: #f0f0f0;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #6a6f80;
}

/* ── Bootstrap tooltips ─────────────────────────────────────────────────── */
/*
 * Bootstrap Darkly ships with tooltip vars that can produce nearly-invisible
 * text on the dark background. Force legible white-on-dark with the Lora body
 * font and adequate size so the ℹ tooltips are clearly readable.
 */
.tooltip .tooltip-inner {
  font-family: 'Lora', serif;
  font-size: 0.82rem;
  background-color: #1a1a2e;
  color: #f0f0f0;
  border: 1px solid rgba(255, 255, 255, 0.20);
  max-width: 280px;
  padding: 0.4rem 0.65rem;
}
.tooltip.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    #1a1a2e; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #1a1a2e; }
.tooltip.bs-tooltip-start  .tooltip-arrow::before { border-left-color:   #1a1a2e; }
.tooltip.bs-tooltip-end    .tooltip-arrow::before { border-right-color:  #1a1a2e; }

/* ── Traffic-light toggle (.toggle-traffic) ─────────────────────────────── */
/*
 * Used on the "Use character data" switch in the PP Calculator.
 * Unchecked = clearly red (inactive/danger).
 * Checked   = clearly green (active/safe).
 * Ensures the state is unambiguous regardless of system colour scheme.
 */
.toggle-traffic {
  background-color: #7a1c1c;
  border-color: #9e2c2c;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffd0d0'/%3e%3c/svg%3e");
}
.toggle-traffic:checked {
  background-color: #1a6b52;
  border-color: #22886a;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c8f0e4'/%3e%3c/svg%3e");
}
.toggle-traffic:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 107, 82, 0.30);
}
.toggle-traffic:focus:not(:checked) {
  box-shadow: 0 0 0 0.2rem rgba(122, 28, 28, 0.30);
}