/* theme_mog.css — inverted: yellow backgrounds, black foreground, black hover */

:root{
  --mog-yellow: #ffc107;
  --mog-yellow-2: #ffe066; /* lighter hover */
  --mog-black:  #0b0b0b;
  --mog-border: rgba(0,0,0,.18);
}

/* Base */
html, body { background: var(--mog-yellow); color: var(--mog-black); }
a { color: var(--mog-black); text-decoration-color: rgba(0,0,0,.35); }
a:hover { color: #000; text-decoration-color: #000; }

/* Bootstrap token overrides */
:root{
  --bs-body-bg: var(--mog-yellow);
  --bs-body-color: var(--mog-black);
  --bs-border-color: var(--mog-border);

  /* make “primary” be black (so btn-primary etc become black) */
  --bs-primary: var(--mog-black);
  --bs-primary-rgb: 11, 11, 11;

  --bs-link-color: var(--mog-black);
  --bs-link-hover-color: #000;

  /* light/dark helpers */
  --bs-dark: var(--mog-black);
  --bs-dark-rgb: 11, 11, 11;
  --bs-light: var(--mog-yellow);
  --bs-light-rgb: 255, 210, 0;
}

/* Surfaces: cards/modals/menus white-ish yellow */
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item {
  background: var(--mog-yellow);
  color: var(--mog-black);
  border-color: var(--mog-border);
}

/* Navbar / footer: yellow bar with black text */
.navbar, .footer {
  background: var(--mog-yellow) !important;
  border-bottom: 1px solid var(--mog-border);
}
.navbar .navbar-brand, .navbar .nav-link { color: var(--mog-black) !important; }
.navbar .nav-link:hover { color: #000 !important; text-decoration: underline; }

/* Tables */
.table { color: var(--mog-black); }
.table td, .table th { border-color: var(--mog-border); }
.table thead th { color: #000; border-color: var(--mog-border); }

/* Buttons: primary = black, hover stays black; outline = black-on-hover */
.btn-primary{
  --bs-btn-bg: var(--mog-black);
  --bs-btn-border-color: var(--mog-black);
  --bs-btn-color: var(--mog-yellow);

  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-hover-color: var(--mog-yellow);

  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-color: var(--mog-yellow);

  --bs-btn-disabled-bg: rgba(0,0,0,.35);
  --bs-btn-disabled-border-color: rgba(0,0,0,.35);
  --bs-btn-disabled-color: rgba(255,210,0,.85);
}

.btn-outline-primary{
  --bs-btn-color: var(--mog-black);
  --bs-btn-border-color: var(--mog-black);
  --bs-btn-hover-bg: var(--mog-black);
  --bs-btn-hover-border-color: var(--mog-black);
  --bs-btn-hover-color: var(--mog-yellow);
}

/* Forms */
.form-control, .form-select {
  background: rgba(255,255,255,.25);
  color: var(--mog-black);
  border-color: var(--mog-border);
}
.form-control::placeholder { color: rgba(0,0,0,.55); }

.form-control:focus, .form-select:focus{
  border-color: #000;
  box-shadow: 0 0 0 .2rem rgba(0,0,0,.15);
}

.form-check-input{
  background-color: rgba(255,255,255,.25);
  border-color: var(--mog-border);
}
.form-check-input:checked{
  background-color: var(--mog-black);
  border-color: var(--mog-black);
}

/* Alerts / badges */
.alert, .badge { border-color: var(--mog-border); }
.badge.bg-primary {
  background: var(--mog-black) !important;
  color: var(--mog-yellow) !important;
}

/* Dropdown active/hover */
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--mog-black);
  color: var(--mog-yellow);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background: var(--mog-black);
  color: var(--mog-yellow);
}

/* Optional: subtle “card depth” without dark theme */
.card { box-shadow: 0 6px 18px rgba(0,0,0,.12); }