/* ============================================================
   CTHULHU CHARAKTEREDITOR – Dark Theme
   Das Uralte Erwacht. Schwarz. Modrig. Grün.
   Ia! Ia! Cthulhu fhtagn!
   ============================================================ */

:root {
  /* Palette: tiefschwarz mit sumpfgrüner Tönung */
  --ct-bg:        #030805;   /* fast schwarz, grüner Hauch */
  --ct-bg-raised: #070d07;
  --ct-bg-card:   #0b160b;   /* Modal-Hintergrund */
  --ct-bg-input:  #050a05;   /* Input-Felder */
  --ct-border:    #1c341c;   /* dunkle grüne Ränder */
  --ct-text:      #8cba80;   /* gedämpftes Sumpfgrün – lesbar */
  --ct-text-muted:#4a6b40;
  --ct-text-dim:  #283820;
  --ct-accent:    #1e4a1e;   /* Dunkelgrün Primär */
  --ct-accent2:   #122012;
  --ct-link:      #4a8a3a;   /* grünlicher Link */
  --ct-gold:      #6a8a50;   /* Moos-Gold für Titel */
  --ct-danger:    #6b2010;
}

/* ── BASE ─────────────────────────────────────────────────── */
html, body {
  background-color: var(--ct-bg) !important;
  color: var(--ct-text) !important;
}

/* ── NAVBAR (removed) ─────────────────────────────────────── */

/* ── HEADER ───────────────────────────────────────────────── */
header {
  background: linear-gradient(180deg, #020604 0%, #050d05 100%) !important;
  border-bottom: 1px solid #1c341c !important;
  padding-bottom: 20px;
}
#main-title {
  color: var(--ct-gold) !important;
  text-shadow: 0 0 24px rgba(60, 100, 40, 0.5), 0 0 8px rgba(40, 80, 20, 0.3);
  letter-spacing: 0.02em;
}
#main-subtitle {
  color: var(--ct-text-muted) !important;
}

/* ── HAUPTBUTTONS ─────────────────────────────────────────── */
#actionButtons {
  padding-top: 16px;
  padding-bottom: 12px;
}
.btn-primary {
  background-color: #1e4a1e !important;
  border-color: #0e2a0e !important;
  color: #b0d8a0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #285a28 !important;
  border-color: #1e4a1e !important;
  color: #c8ebb8 !important;
}
.btn-cthulhu {
  background-color: #0c180c !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-gold) !important;
}
.btn-cthulhu:hover {
  background-color: #142014 !important;
  color: #8ab870 !important;
}

/* ── SHEET-TABS (offene Investigatoren) ───────────────────── */
#mainNav .btn {
  background-color: #0b160b !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text) !important;
}
#mainNav .btn:hover {
  background-color: #142014 !important;
  color: #c0e0b0 !important;
}
#mainNav .btn.active,
#mainNav .btn[aria-expanded="true"] {
  background-color: var(--ct-accent) !important;
  color: #c8ebb8 !important;
}

/* ── MODALS ───────────────────────────────────────────────── */
.modal-content {
  background-color: var(--ct-bg-card) !important;
  border: 1px solid var(--ct-border) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.9), 0 0 0 1px #1c341c !important;
  color: var(--ct-text) !important;
}
.modal-header {
  background-color: #070d07 !important;
  border-bottom: 1px solid var(--ct-border) !important;
}
.modal-header .modal-title,
.modal-title.charactersheet-label {
  color: var(--ct-gold) !important;
  letter-spacing: 0.03em;
}
.modal-header .close {
  color: var(--ct-text-muted) !important;
  opacity: 0.8;
  text-shadow: none;
}
.modal-header .close:hover {
  color: var(--ct-text) !important;
  opacity: 1;
}
.modal-footer {
  background-color: #070d07 !important;
  border-top: 1px solid var(--ct-border) !important;
}
.modal-body {
  color: var(--ct-text) !important;
}

/* ── FORMS & INPUTS ───────────────────────────────────────── */
.form-control {
  background-color: var(--ct-bg-input) !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6) !important;
}
.form-control:focus {
  border-color: #3a6a2a !important;
  background-color: #080f08 !important;
  color: #b0d8a0 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 6px rgba(50, 100, 30, 0.3) !important;
}
.form-control:disabled,
.form-control[disabled],
.form-control[readonly] {
  background-color: #040804 !important;
  color: var(--ct-text-muted) !important;
}
textarea.form-control {
  min-height: 80px;
}
select.form-control option {
  background-color: #0b160b;
  color: var(--ct-text);
}

/* Material Design Labels */
.form-group.label-floating label.control-label,
.form-group.label-static label.control-label,
label.control-label,
label {
  color: var(--ct-text-muted) !important;
}
.form-group.label-floating.is-focused label.control-label {
  color: var(--ct-link) !important;
}
.form-group .help-block {
  color: var(--ct-text-muted) !important;
}
.form-group .material-input:after {
  background-color: var(--ct-link) !important;
}
.input-group-addon {
  background-color: #0b160b !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text) !important;
}

/* Checkboxen */
.checkbox label {
  color: var(--ct-text) !important;
}

/* ── BUTTONS allgemein ────────────────────────────────────── */
.btn-default,
.btn-raised {
  background-color: #0f1e0f !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
.btn-default:hover,
.btn-raised:hover {
  background-color: #182818 !important;
  color: #b0d8a0 !important;
}
.btn-raised:active,
.btn-default:active,
.btn-raised:focus,
.btn-default:focus {
  background-color: #203020 !important;
  color: #c0e0b0 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.7) !important;
}
.btn-warning {
  background-color: #3a5010 !important;
  border-color: #4a6a18 !important;
  color: #b8d888 !important;
}
.btn-warning:hover {
  background-color: #4a6018 !important;
  color: #c8e898 !important;
}
.btn.btn-fab.btn-fab-mini {
  background-color: var(--ct-accent) !important;
  color: #a0d890 !important;
}
.btn.btn-fab.btn-fab-mini:hover {
  background-color: #285a28 !important;
  color: #c0ebb0 !important;
}

/* ── FORTSCHRITTSBALKEN ───────────────────────────────────── */
.progress {
  background-color: #020604 !important;
}
.progress-bar-info {
  background-color: #1e4a1e !important;
}

/* ── TABS ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom-color: var(--ct-border) !important;
}
.nav-tabs > li > a {
  background-color: #070d07 !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text-muted) !important;
}
.nav-tabs > li > a:hover {
  background-color: #0f1e0f !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background-color: var(--ct-bg-card) !important;
  border-color: var(--ct-border) var(--ct-border) transparent !important;
  color: var(--ct-gold) !important;
}

/* ── DROPDOWN / SKILL-MENÜ ────────────────────────────────── */
.dropdown-menu {
  background-color: #0b160b !important;
  border-color: var(--ct-border) !important;
}
.dropdown-menu > li > a,
.dropdown-menu > li > button {
  color: var(--ct-text) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > button:hover {
  background-color: #182818 !important;
  color: #b0d8a0 !important;
}
#skillMenu p.skill-group {
  background-color: #050a05 !important;
  color: var(--ct-text-muted) !important;
  border-bottom: 1px solid var(--ct-border);
}

/* ── CHARAKTERBOGEN ───────────────────────────────────────── */
#sheetHolder .tab-pane {
  background-color: var(--ct-bg) !important;
  color: var(--ct-text) !important;
}
.row.sheet-naming {
  background-color: #0a180a !important;
  color: var(--ct-gold) !important;
  border-bottom: 1px solid var(--ct-border);
  padding: 10px 0;
}
.sheet-skills label,
.skill-label {
  color: var(--ct-text) !important;
}
p.lead {
  color: var(--ct-text) !important;
}
.row[class*=sheet-weapon] {
  background-color: #080f08 !important;
  border-top: 1px solid var(--ct-border);
}

/* ── TABELLEN ─────────────────────────────────────────────── */
.table {
  color: var(--ct-text) !important;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: var(--ct-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--ct-bg-raised) !important;
}
.table-hover > tbody > tr:hover {
  background-color: #142014 !important;
}

/* ── LINKS & MISC ─────────────────────────────────────────── */
a {
  color: var(--ct-link) !important;
}
a:hover {
  color: #6aaa5a !important;
}
hr {
  border-color: var(--ct-border) !important;
}
abbr[title] {
  color: var(--ct-link) !important;
  border-bottom-color: var(--ct-link) !important;
}
.panel {
  background-color: var(--ct-bg-raised) !important;
  border-color: var(--ct-border) !important;
}
.panel-heading {
  background-color: var(--ct-bg-card) !important;
  color: var(--ct-gold) !important;
  border-color: var(--ct-border) !important;
}
#characterList .btn-group {
  margin-bottom: 4px;
}

/* ── POINT BUY UI ─────────────────────────────────────────── */
#jobList .btn.btn-sm {
  color: #8cba80 !important;
}
#jobList .btn.btn-sm:hover {
  color: #b0d8a0 !important;
  background-color: #182818 !important;
}
#pointBuyCounter {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--ct-text-muted);
  padding: 8px 0 14px 0;
}
#pointBuyCounter .points-remaining {
  font-size: 1.7em;
  color: var(--ct-gold);
  transition: color 0.2s;
}
#pointBuyCounter .points-remaining.over-budget {
  color: #c0402a !important;
  text-shadow: 0 0 10px rgba(180, 50, 20, 0.5);
}
#pointBuyInfo {
  color: var(--ct-text-muted);
  font-size: 0.88em;
  margin-bottom: 14px;
  font-style: italic;
}
.stat-mode-btn.active {
  background-color: var(--ct-accent) !important;
  border-color: #2a5a2a !important;
  color: #b0d8a0 !important;
}

/* ── MODAL BACKDROP ───────────────────────────────────────── */
.modal-backdrop {
  background-color: #000 !important;
}
.modal-backdrop.in {
  opacity: 0.85 !important;
}

/* ── PRINT (zurück zu hell) ───────────────────────────────── */
@media print {
  body, html { background-color: #fff !important; color: #000 !important; }
  .modal-content { background-color: #fff !important; color: #000 !important; }
  label, .control-label { color: #333 !important; }
  input, textarea { background-color: #fff !important; color: #000 !important; border-color: #999 !important; }
}