/*
 * _config_custom.css — Role-Play Interactive
 * Theme: Dark Slate Gray × Gold
 * Generated: 2026-03-29
 */

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  /* Base palette */
  --sc-bg:           #2f4f4f;
  --sc-bg-soft:      #3a5f5f;
  --sc-bg-card:      #253d3d;
  --sc-bg-nav:       #1e3535;
  --sc-bg-footer:    #1a2e2e;

  /* Text */
  --sc-text:         #f0f4f4;
  --sc-text-muted:   #9db8b8;
  --sc-heading:      #ffffff;

  /* Accent (Gold) */
  --sc-accent:       #ffd700;
  --sc-accent-hover: #ffe033;
  --sc-accent-dark:  #ccac00;

  /* Borders */
  --sc-border:       #4a6f6f;
  --sc-border-soft:  #3a5a5a;

  /* Aliases used by theme engine */
  --td-primary:   #2f4f4f;
  --td-secondary: #3a5f5f;
  --td-accent:    #ffd700;

  /* Bootstrap override tokens */
  --bs-body-bg:       #2f4f4f;
  --bs-body-color:    #f0f4f4;
  --bs-primary:       #ffd700;
  --bs-primary-rgb:   255, 215, 0;
  --bs-link-color:    #ffd700;
  --bs-link-hover-color: #ffe033;
  --bs-light-rgb:     47, 79, 79;
  --bs-white-rgb:     47, 79, 79;
}

/* ── Global body ──────────────────────────────────────────────────────────── */
body {
  background-color: var(--sc-bg) !important;
  color:            var(--sc-text) !important;
}

/* ── White-block nuke rules (Bootstrap utility overrides ONLY) ─────────────── */
/* section + .container excluded intentionally: GrapesJS inline dark styles must win */
.bg-white,
.bg-light,
.bg-body,
.bg-body-secondary,
.bg-body-tertiary,
.card,
.card-body {
  background-color: var(--sc-bg) !important;
  color:            var(--sc-text) !important;
}

/* ── Transparent inner elements (prevent double-colour stacking) ──────────── */
main div,
main span,
.gjs-cell,
.gjs-row,
[data-gjs-type] {
  background-color: transparent !important;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sc-heading) !important;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a:not(.btn):not(.nav-link) {
  color: var(--sc-accent);
}

a:not(.btn):not(.nav-link):hover {
  color: var(--sc-accent-hover);
  text-decoration: underline;
}

/* ── Navigation bar ───────────────────────────────────────────────────────── */
.navbar,
nav.navbar,
.main-header.navbar {
  background-color: var(--sc-bg-nav) !important;
  border-bottom: 1px solid var(--sc-border);
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--sc-text) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--sc-accent) !important;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--sc-bg-card);
  border: 1px solid var(--sc-border);
}

.dropdown-item {
  color: var(--sc-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sc-bg-soft);
  color:            var(--sc-accent);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--sc-bg-card) !important;
  border:           1px solid var(--sc-border) !important;
  color:            var(--sc-text) !important;
}

.card-header {
  background-color: var(--sc-bg-soft) !important;
  border-bottom:    1px solid var(--sc-border) !important;
  color:            var(--sc-heading) !important;
}

.card-footer {
  background-color: var(--sc-bg-soft) !important;
  border-top:       1px solid var(--sc-border) !important;
}

/* ── Hero / Jumbotron ─────────────────────────────────────────────────────── */
.jumbotron,
.hero-section,
.hero,
[class*="hero"],
.banner,
.page-header {
  background-color: var(--sc-bg-nav) !important;
  color:            var(--sc-text) !important;
}

/* ── Buttons (Gold accent) ────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--sc-accent)      !important;
  border-color:     var(--sc-accent-dark) !important;
  color:            #1a1a1a               !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sc-accent-hover) !important;
  border-color:     var(--sc-accent)       !important;
}

.btn-outline-primary {
  color:        var(--sc-accent) !important;
  border-color: var(--sc-accent) !important;
}

.btn-outline-primary:hover {
  background-color: var(--sc-accent) !important;
  color:            #1a1a1a         !important;
}

/* ── Form controls ────────────────────────────────────────────────────────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--sc-bg-card)  !important;
  border:           1px solid var(--sc-border) !important;
  color:            var(--sc-text)     !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sc-accent) !important;
  box-shadow:   0 0 0 0.2rem rgba(212,175,55,.25) !important;
}

.form-label,
label {
  color: var(--sc-text-muted);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table {
  color:            var(--sc-text)    !important;
  border-color:     var(--sc-border)  !important;
}

.table th {
  background-color: var(--sc-bg-soft) !important;
  color:            var(--sc-heading) !important;
  border-color:     var(--sc-border)  !important;
}

.table td {
  background-color: transparent       !important;
  border-color:     var(--sc-border)  !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.03) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--sc-bg-soft) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer,
.footer,
.main-footer {
  background-color: var(--sc-bg-footer) !important;
  color:            var(--sc-text-muted) !important;
  border-top:       1px solid var(--sc-border);
}

footer a,
.footer a {
  color: var(--sc-accent);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  background-color: var(--sc-bg-card) !important;
  border-color:     var(--sc-border)  !important;
  color:            var(--sc-text)    !important;
}

.alert-primary {
  border-left: 4px solid var(--sc-accent) !important;
}

/* ── Badge / Pills ────────────────────────────────────────────────────────── */
.badge.bg-primary,
.badge.bg-warning {
  background-color: var(--sc-accent) !important;
  color:            #1a1a1a          !important;
}

/* ── Sidebar (AdminLTE / backend) ─────────────────────────────────────────── */
.main-sidebar {
  background-color: var(--sc-bg-nav) !important;
}

.nav-sidebar .nav-item > .nav-link {
  color: var(--sc-text-muted) !important;
}

.nav-sidebar .nav-item > .nav-link:hover,
.nav-sidebar .nav-item > .nav-link.active {
  color:            var(--sc-accent)  !important;
  background-color: var(--sc-bg-soft) !important;
}

/* ── AdminLTE content wrapper ─────────────────────────────────────────────── */
.content-wrapper,
.wrapper,
.main-panel {
  background-color: var(--sc-bg) !important;
}

/* ── Scrollbar (Chrome/Edge) ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width:  8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sc-bg-nav);
}

::-webkit-scrollbar-thumb {
  background:    var(--sc-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sc-accent);
}

/* ── Selection highlight ──────────────────────────────────────────────────── */
::selection {
  background: var(--sc-accent);
  color:      #1a1a1a;
}

/* ── Responsive: limit fixed widths ──────────────────────────────────────── */
@media (max-width: 768px) {
  .card,
  .jumbotron,
  .hero-section {
    max-width: 100% !important;
    width:     100% !important;
  }
}

/* ── Operation Agent Orange: Bootstrap green nuke ─────────────────── */
.bg-success,
*.bg-success,
.badge.bg-success,
.btn.btn-success,
.btn-success,
.alert-success,
.border-success,
.text-bg-success,
.list-group-item-success {
  background-color: var(--sc-bg-card) !important;
  border-color: var(--sc-border) !important;
  color: var(--sc-text) !important;
}
.text-success {
  color: var(--sc-accent) !important;
}