/* ==========================================================================
   TS Video — Dark + Gold Theme Override
   Load this AFTER main.css and custom.css so these rules take priority.
   ========================================================================== */

/* ---- Text color variables (scoped to dashboard only - safe: used only for text) ----
   Scoped under .dashboard so public pages (Plans, Home, etc.) keep their
   original light-card styling untouched. */
.dashboard {
  --heading-color: 0 0% 100%;      /* headings / important text -> pure white  #FFFFFF */
  --body-color: 240 3% 64%;        /* muted / description text  -> light gray  #A0A0A5 */
}

/* Borders: scoped globally is fine since border-color isn't used for text/shadows elsewhere,
   but we scope it too for consistency and to avoid any surprise on public pages */
.dashboard {
  --border-color: 240 7% 18%;      /* #2A2A30 */
  --border-color-two: 240 7% 18%;  /* #2A2A30 */
}

/* Content area background (was hardcoded #fafafa in main.css) */
.dashboard .dashboard__right {
  background-color: #0F0F11 !important;
}

/* Sidebar (under TS VIDEOS logo) */
.dashboard .sidebar-menu,
.dashboard .sidebar-bottom {
  background-color: #121214 !important;
}

/* Cards / panels / tables / modals / dropdowns - scoped to dashboard area only */
.dashboard .dashboard-card,
.dashboard .custom--card,
.dashboard .custom--card .card-body,
.dashboard .dashboard-table,
.dashboard .dashboard-header,
.dashboard .header.fixed-header,
.dashboard .custom--modal .modal-content,
.dashboard .custom--dropdown > .dropdown-list,
.dashboard .table thead tr th,
.dashboard .table tbody,
.dashboard .payment-system-list,
.dashboard .form--control,
.dashboard .form--check .form-check-input,
.dashboard .form--switch .form-check-input {
  background-color: #1A1A1E !important;
  border-color: #2A2A30 !important;
}

/* Text visibility fix: labels + typed input text were invisible (dark-on-dark) */
.dashboard .deposit-info__title .text,
.dashboard .deposit-info__input .text,
.dashboard .info-text .text,
.dashboard label,
.dashboard .form--label {
  color: #A0A0A5 !important;
}

.dashboard .form--control,
.dashboard .form--control:focus,
.dashboard input,
.dashboard textarea,
.dashboard select {
  color: #D4AF37 !important;
}

.dashboard .form--control::placeholder,
.dashboard input::placeholder,
.dashboard textarea::placeholder {
  color: #D4AF37 !important;
  opacity: 1 !important;
}

.dashboard .deposit-info__input-group-text {
  color: #A0A0A5 !important;
}

.dashboard .payment-item__name {
  color: #FFFFFF !important;
}

/* ---- Status colors ---- */
.badge--success {
  background-color: rgba(0, 200, 83, 0.12) !important;
  border: 1px solid #00C853 !important;
  color: #00C853 !important;
}

.badge--warning,
.badge--pending {
  background-color: rgba(255, 145, 0, 0.12) !important;
  border: 1px solid #FF9100 !important;
  color: #FF9100 !important;
}

/* ---- Gold accent (buttons, icons, active menu) ----
   NOTE: The main accent color should be set in Admin Panel -> General Settings
   -> Site Base Color = #D4AF37. This section is a fallback/reinforcement layer
   in case some elements use hardcoded blue instead of the --base variable. */
.btn--base,
.btn--primary,
.sidebar-menu-list__item.active .sidebar-menu-list__link,
.sidebar-menu-list__item .sidebar-menu-list__link:hover {
  background-color: #D4AF37 !important;
  color: #000000 !important;
  border-color: #D4AF37 !important;
}

.btn--base:hover,
.btn--base:focus,
.btn--primary:hover,
.btn--primary:focus {
  background-color: #B8962E !important; /* slightly darker gold on hover */
  color: #000000 !important;
}

.btn-outline--base {
  color: #D4AF37 !important;
  border-color: #D4AF37 !important;
  background-color: transparent !important;
}

.btn-outline--base:hover {
  background-color: #D4AF37 !important;
  color: #000000 !important;
}

/* User dropdown menu (Profile / Change Password / Logout) - gold text */
.dashboard .user-info-dropdown,
.dashboard .user-info-dropdown__link {
  background-color: #1A1A1E !important;
}

.dashboard .user-info-dropdown__link,
.dashboard .user-info-dropdown__link .icon,
.dashboard .user-info-dropdown__link .text {
  color: #D4AF37 !important;
}

.dashboard .user-info-dropdown__link:hover {
  background-color: #2A2A30 !important;
}

/* Username button in header (e.g. "user userov") - keep readable black text */
.dashboard .user-info__button,
.dashboard .user-info__name {
  color: #000000 !important;
}

/* Transaction history page (and similar responsive tables) - left-side labels in gold */
.dashboard .table--responsive--lg td::before {
  color: #D4AF37 !important;
}