/*
 * Red & Gold Theme Override
 * All rules scoped to html[data-theme="red"] so the theme
 * can be toggled on/off by changing the attribute via JS.
 * Default: red theme active. Set data-theme="default" to revert.
 */
html[data-theme="red"] {
  --brand-red: #c62828;
  --brand-red-dark: #8e1b1b;
  --brand-gold: #ffb300;
  --brand-gold-dark: #c68400;
}

/* ── Nav header (left brand bar) ── */
html[data-theme="red"] .nav-header {
  background-color: var(--brand-red) !important;
  border-bottom: 3px solid var(--brand-gold) !important;
}
html[data-theme="red"] .nav-header .brand-logo,
html[data-theme="red"] .nav-header .brand-logo:hover {
  color: #fff !important;
}
html[data-theme="red"] .nav-control {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-red) !important;
}

/* ── Top header bar ── */
html[data-theme="red"] .header {
  background-color: var(--brand-red) !important;
  border-bottom: 3px solid var(--brand-gold) !important;
}
html[data-theme="red"] .header .navbar .navbar-nav .nav-link,
html[data-theme="red"] .header .navbar .navbar-nav .nav-link i,
html[data-theme="red"] .header .header-right .nav-item .nav-link {
  color: #ffffff !important;
}
html[data-theme="red"] .header .navbar .navbar-nav .nav-link:hover {
  color: var(--brand-gold) !important;
}

/* ── Sidebar ── */
html[data-theme="red"] .quixnav,
html[data-theme="red"] .deznav,
html[data-theme="red"] .nav-header,
html[data-theme="red"] .sidebar {
  background-color: var(--brand-red) !important;
}
html[data-theme="red"] .quixnav .metismenu a,
html[data-theme="red"] .deznav .metismenu a,
html[data-theme="red"] .sidebar .nav-link,
html[data-theme="red"] .sidebar .metismenu a {
  color: #ffffff !important;
}
html[data-theme="red"] .quixnav .metismenu a i,
html[data-theme="red"] .deznav .metismenu a i,
html[data-theme="red"] .sidebar .nav-link i {
  color: rgba(255, 255, 255, 0.8) !important;
}
html[data-theme="red"] .quixnav .metismenu .mm-active > a,
html[data-theme="red"] .deznav .metismenu .mm-active > a,
html[data-theme="red"] .sidebar .nav-link.active,
html[data-theme="red"] .sidebar .metismenu .mm-active > a {
  background-color: var(--brand-red-dark) !important;
  color: #ffffff !important;
  border-left: 4px solid var(--brand-gold) !important;
}
html[data-theme="red"] .quixnav .metismenu a:hover,
html[data-theme="red"] .deznav .metismenu a:hover,
html[data-theme="red"] .sidebar .nav-link:hover,
html[data-theme="red"] .sidebar .metismenu a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--brand-gold) !important;
  border-left: 4px solid var(--brand-gold) !important;
}

/* sub-menus */
html[data-theme="red"] .quixnav .metismenu ul,
html[data-theme="red"] .deznav .metismenu ul,
html[data-theme="red"] .quixnav .metismenu .nav-item ul,
html[data-theme="red"] .deznav .metismenu .nav-item ul,
html[data-theme="red"] .sidebar .metismenu ul,
html[data-theme="red"] .quixnav ul.metismenu,
html[data-theme="red"] .deznav ul.metismenu {
  background-color: var(--brand-red-dark) !important;
}
html[data-theme="red"] .quixnav .metismenu ul a,
html[data-theme="red"] .deznav .metismenu ul a,
html[data-theme="red"] .quixnav .metismenu li ul li a,
html[data-theme="red"] .deznav .metismenu li ul li a,
html[data-theme="red"] .sidebar .metismenu ul a {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
  border-left: none !important;
}
html[data-theme="red"] .quixnav .metismenu ul a:hover,
html[data-theme="red"] .deznav .metismenu ul a:hover,
html[data-theme="red"] .quixnav .metismenu li ul li a:hover,
html[data-theme="red"] .deznav .metismenu li ul li a:hover,
html[data-theme="red"] .sidebar .metismenu ul a:hover {
  color: var(--brand-gold) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-left: 3px solid var(--brand-gold) !important;
}
html[data-theme="red"] .quixnav .metismenu ul .mm-active > a,
html[data-theme="red"] .deznav .metismenu ul .mm-active > a,
html[data-theme="red"] .quixnav .metismenu li ul li.mm-active > a,
html[data-theme="red"] .sidebar .metismenu ul .mm-active > a {
  color: var(--brand-gold) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-left: 3px solid var(--brand-gold) !important;
}
html[data-theme="red"] .quixnav .metismenu .nav-label,
html[data-theme="red"] .deznav .metismenu .nav-label,
html[data-theme="red"] .sidebar .nav-label {
  color: var(--brand-gold) !important;
}

/* ── Cards ── */
html[data-theme="red"] .card {
  border-color: rgba(198, 40, 40, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="red"] .card-header,
html[data-theme="red"] .accordion .card-header,
html[data-theme="red"] .modal-header {
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important;
  color: #ffffff !important;
  border-bottom: 3px solid var(--brand-gold) !important;
  border-left: none !important;
  padding: 0.9rem 1.25rem !important;
  position: relative;
}

/* Gold accent stripe on the left of card headers */
html[data-theme="red"] .card-header::before,
html[data-theme="red"] .accordion .card-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-gold);
  border-radius: 0 2px 2px 0;
}

html[data-theme="red"] .card-header .card-title,
html[data-theme="red"] .accordion .card-header .card-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.3px;
  margin-left: 4px;
}

html[data-theme="red"] .card-header i,
html[data-theme="red"] .accordion .card-header i {
  color: var(--brand-gold) !important;
  margin-right: 4px;
}

/* ── Buttons ── */
html[data-theme="red"] .btn-primary {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #ffffff !important;
}
html[data-theme="red"] .btn-primary:hover,
html[data-theme="red"] .btn-primary:focus {
  background-color: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
  color: #ffffff !important;
}
html[data-theme="red"] .btn-warning {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-red-dark) !important;
}
html[data-theme="red"] .btn-warning:hover {
  background-color: var(--brand-gold-dark) !important;
  border-color: var(--brand-gold-dark) !important;
  color: #ffffff !important;
}

/* ── Badges ── */
html[data-theme="red"] .badge-primary,
html[data-theme="red"] .badge-danger {
  background-color: var(--brand-red) !important;
  color: #ffffff !important;
}
html[data-theme="red"] .badge-warning {
  background-color: var(--brand-gold) !important;
  color: var(--brand-red-dark) !important;
}

/* ── Links ── */
html[data-theme="red"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-logo) {
  color: var(--brand-red);
}
html[data-theme="red"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-logo):hover {
  color: var(--brand-gold);
}

/* ── Dropdowns ── */
html[data-theme="red"] .dropdown-item:hover,
html[data-theme="red"] .dropdown-item:focus {
  background-color: rgba(255, 179, 0, 0.12) !important;
  color: var(--brand-red) !important;
}

/* ── Footer ── */
html[data-theme="red"] .footer {
  background-color: var(--brand-red) !important;
  color: #ffffff !important;
  border-top: 3px solid var(--brand-gold) !important;
}
html[data-theme="red"] .footer a {
  color: var(--brand-gold) !important;
}

/* ── Table header ── */
html[data-theme="red"] .table thead th {
  background-color: rgba(198, 40, 40, 0.08) !important;
  color: var(--brand-red-dark) !important;
}

/* ── Login page ── */
html[data-theme="red"] .authincation {
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important;
}
html[data-theme="red"] .authincation-content {
  background: #ffffff;
  border-top: 4px solid var(--brand-gold);
}
html[data-theme="red"] .auth-form h4 {
  color: var(--brand-red-dark);
}
html[data-theme="red"] .btn-access.btn-primary {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #ffffff !important;
}
html[data-theme="red"] .btn-access.btn-primary:hover {
  background-color: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
}
html[data-theme="red"] .auth-form .form-control {
  border: 1px solid rgba(198, 40, 40, 0.25);
}
html[data-theme="red"] .auth-form .form-control:focus {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 0.2rem rgba(255, 179, 0, 0.25);
}
html[data-theme="red"] .auth-form a {
  color: var(--brand-red);
}
html[data-theme="red"] .auth-form a:hover {
  color: var(--brand-gold);
}
html[data-theme="red"] .auth-form .btn-dark {
  border: 1px solid rgba(198, 40, 40, 0.25);
  color: var(--brand-red);
}
html[data-theme="red"] .auth-form .btn-dark:hover,
html[data-theme="red"] .auth-form .btn-dark:focus {
  background-color: rgba(198, 40, 40, 0.08);
  border-color: rgba(198, 40, 40, 0.25);
  color: var(--brand-red-dark);
}
html[data-theme="red"] .btn-outline-dark {
  border-color: var(--brand-red);
  color: var(--brand-red);
}
html[data-theme="red"] .btn-outline-dark:hover {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}