:root {
  --rs-red: #c8102e;
  --rs-red-dark: #a00d25;
}

/* ===== Global busy button ===== */
button[aria-busy="true"],
.btn[aria-busy="true"],
input[type="submit"][aria-busy="true"] {
  cursor: wait;
  opacity: 0.85;
}
.rs-btn-spinner {
  vertical-align: -0.125em;
}

/* ===== Topbar ===== */
.main-header.navbar-rs {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}
.main-header.navbar-rs .nav-link {
  color: #495057;
}
.main-header.navbar-rs .nav-link:hover {
  color: var(--rs-red);
}

/* ===== Brand ===== */
.brand-link.brand-rs {
  background: #1a1a1a;
  color: #fff;
  border-bottom: 1px solid #2d0a10;
}
.brand-link.brand-rs:hover {
  color: #fff;
}
.brand-link.brand-rs .brand-text b {
  color: #fff;
}
.brand-link.brand-rs .brand-text .star {
  color: var(--rs-red);
}

/* ===== Sidebar ===== */
.main-sidebar.sidebar-rs {
  background: #1a1a1a;
}
.sidebar-rs .nav-sidebar .nav-link {
  color: #c2c7d0;
  border-radius: 0;
}
.sidebar-rs .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-rs .nav-sidebar > .nav-item > .nav-link.active:hover {
  background-color: var(--rs-red);
  color: #fff;
  box-shadow: none;
}
.sidebar-rs .nav-sidebar .nav-link:hover {
  background-color: rgba(200, 16, 46, 0.15);
  color: #fff;
}
.sidebar-rs .nav-treeview > .nav-item > .nav-link.active {
  background-color: rgba(200, 16, 46, 0.85);
  color: #fff;
}
.sidebar-rs .nav-sidebar .nav-icon {
  color: var(--rs-red);
}
.sidebar-rs .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
  color: #fff;
}

/* ===== User panel ===== */
.user-panel-rs {
  border-bottom: 1px solid #2d2d2d !important;
}
.user-panel-rs .info a {
  color: #fff !important;
}

/* ===== Buttons ===== */
.btn-rs {
  background-color: var(--rs-red);
  border-color: var(--rs-red);
  color: #fff;
  font-weight: 500;
}
.btn-rs:hover {
  background-color: var(--rs-red-dark);
  border-color: var(--rs-red-dark);
  color: #fff;
}
.btn-rs:disabled {
  background-color: var(--rs-red);
  border-color: var(--rs-red);
  opacity: 0.55;
}
.btn-outline-rs {
  color: var(--rs-red);
  border-color: var(--rs-red);
  background: transparent;
}
.btn-outline-rs:hover {
  background-color: var(--rs-red);
  color: #fff;
}

/* ===== Content header ===== */
.content-header h1 {
  color: #343a40;
  font-weight: 600;
}

.bg-rs {
  background-color: var(--rs-red) !important;
  color: #fff !important;
}
.small-box.bg-rs > .icon > i {
  color: rgba(255, 255, 255, 0.2);
}

/* ===== Shared status badges ===== */
.badge-active {
  background: rgba(40, 167, 69, 0.12);
  color: #28a745;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
}
.badge-passive {
  background: rgba(108, 117, 125, 0.15);
  color: #6c757d;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
}

/* ===== Shared type chips ===== */
.type-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}
.type-chip i {
  margin-right: 4px;
  font-size: 0.65rem;
}
.type-earn {
  background: rgba(40, 167, 69, 0.12);
  color: #28a745;
}
.type-redeem {
  background: rgba(200, 16, 46, 0.12);
  color: var(--rs-red);
}
.type-bonus {
  background: rgba(253, 126, 20, 0.12);
  color: #fd7e14;
}
.points-pos {
  color: #28a745;
  font-weight: 600;
}
.points-neg {
  color: var(--rs-red);
  font-weight: 600;
}

/* ===== Shared mini avatar ===== */
.mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(200, 16, 46, 0.1);
  color: var(--rs-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 8px;
  font-size: 0.7rem;
}

/* ===== Auth (login / otp) ===== */
body.login-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d0a10 100%);
  min-height: 100vh;
}
.login-logo a {
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
}
.login-logo .star {
  color: var(--rs-red);
}
.login-card-body {
  border-top: 4px solid var(--rs-red);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.login-box-msg {
  color: #495057;
  font-weight: 500;
}
.input-group-text {
  background-color: #fff;
}
a.text-rs {
  color: var(--rs-red);
}
a.text-rs:hover {
  color: var(--rs-red-dark);
}