/* =========================================================
   Wealthy Selfie Admin — Dashdark theme
   Visual-only overrides. Do not alter markup/JS behavior.
   ========================================================= */

:root {
  --dd-bg: #080b1a;
  --dd-bg-elevated: #0d1025;
  --dd-surface: #11162f;
  --dd-surface-2: #161c3a;
  --dd-border: rgba(255, 255, 255, 0.08);
  --dd-border-strong: rgba(255, 255, 255, 0.14);
  --dd-text: #ffffff;
  --dd-text-muted: #9aa3c0;
  --dd-text-soft: #c5cbe0;
  --dd-primary: #7c5cfc;
  --dd-primary-2: #a78bfa;
  --dd-magenta: #d946ef;
  --dd-cyan: #22d3ee;
  --dd-blue: #3b82f6;
  --dd-success: #22c55e;
  --dd-danger: #f43f5e;
  --dd-warning: #fbbf24;
  --dd-info: #38bdf8;
  --dd-gradient: linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #db2777 100%);
  --dd-radius: 12px;
  --dd-radius-sm: 8px;
  --dd-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  --bs-body-bg: var(--dd-bg);
  --bs-body-color: var(--dd-text-soft);
  --bs-primary: var(--dd-primary);
  --bs-primary-rgb: 124, 92, 252;
  --bs-border-color: var(--dd-border);
  --bs-secondary-bg: var(--dd-surface);
  --bs-tertiary-bg: var(--dd-surface-2);
  --bs-emphasis-color: #fff;
  --bs-heading-color: var(--dd-text);
  --bs-link-color: var(--dd-primary-2);
  --bs-link-hover-color: #c4b5fd;
}

html,
body {
  background-color: var(--dd-bg) !important;
  color: var(--dd-text-soft);
}

body {
  background: var(--dd-bg);
}

a {
  color: var(--dd-primary-2);
}
a:hover {
  color: #c4b5fd;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-title,
.font-weight-medium,
.font-weight-bold {
  color: var(--dd-text);
}

.text-muted,
.text-secondary,
.card-description,
.card-text {
  color: var(--dd-text-muted) !important;
}

.text-black,
.text-dark,
.mb-1.text-black {
  color: var(--dd-text) !important;
}

.text-primary {
  color: var(--dd-primary-2) !important;
}

.bg-white {
  background-color: var(--dd-surface) !important;
}

.border,
.border-top,
.border-bottom,
.border-right,
.border-left,
.border-end,
.border-start {
  border-color: var(--dd-border) !important;
}

/* ---------- Layout ---------- */
.container-scroller {
  background: var(--dd-bg);
}

.content-wrapper {
  background: var(--dd-bg) !important;
  color: var(--dd-text-soft);
}

.main-panel {
  background: var(--dd-bg);
}

.page-body-wrapper {
  background: var(--dd-bg);
}

.page-body-wrapper.full-page-wrapper {
  background: var(--dd-bg);
}

.footer {
  background: var(--dd-bg-elevated) !important;
  color: var(--dd-text-muted) !important;
  border-top: 1px solid var(--dd-border) !important;
}

.footer a {
  color: var(--dd-primary-2) !important;
}

/* ---------- Navbar ---------- */
.navbar,
.navbar.default-layout-navbar {
  background: var(--dd-bg-elevated) !important;
  border-bottom: 1px solid var(--dd-border);
  box-shadow: none !important;
}

.navbar .navbar-brand-wrapper {
  background: var(--dd-bg-elevated) !important;
  border-right: 1px solid var(--dd-border);
}

.navbar .navbar-menu-wrapper {
  background: var(--dd-bg-elevated) !important;
  color: var(--dd-text-soft) !important;
}

.navbar .navbar-menu-wrapper .navbar-toggler,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
  color: var(--dd-text-soft) !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-text p {
  color: var(--dd-text) !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle:after {
  color: var(--dd-primary-2);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu,
.dropdown-menu {
  background: var(--dd-surface) !important;
  border: 1px solid var(--dd-border) !important;
  box-shadow: var(--dd-shadow) !important;
  border-radius: var(--dd-radius-sm) !important;
}

.dropdown-item {
  color: var(--dd-text-soft) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--dd-surface-2) !important;
  color: var(--dd-text) !important;
}

.dropdown-divider {
  border-top-color: var(--dd-border) !important;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--dd-bg-elevated) !important;
  border-right: 1px solid var(--dd-border);
}

.sidebar .nav .nav-item {
  padding: 0 0.85rem;
  margin: 0.15rem 0.5rem;
  border-radius: var(--dd-radius-sm);
}

.sidebar .nav .nav-item .nav-link {
  color: var(--dd-text-muted) !important;
  padding: 0.85rem 0.9rem !important;
  border-radius: var(--dd-radius-sm);
}

.sidebar .nav .nav-item .nav-link i.menu-icon {
  color: var(--dd-text-muted) !important;
}

.sidebar .nav .nav-item:hover {
  background: rgba(124, 92, 252, 0.12) !important;
}

.sidebar .nav .nav-item:hover .nav-link,
.sidebar .nav .nav-item:hover .nav-link i.menu-icon {
  color: var(--dd-text) !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.nav-profile) > .nav-link {
  color: var(--dd-text) !important;
}

.sidebar .nav .nav-item.active {
  background: var(--dd-primary) !important;
  box-shadow: 0 6px 18px rgba(124, 92, 252, 0.35);
}

.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link i.menu-icon {
  color: #ffffff !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  color: var(--dd-text-muted) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active,
.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  color: var(--dd-primary-2) !important;
  background: transparent !important;
}

/* ---------- Cards ---------- */
.card {
  --bs-card-bg: var(--dd-surface);
  --bs-card-color: var(--dd-text-soft);
  --bs-card-title-color: var(--dd-text);
  --bs-card-border-color: var(--dd-border);
  background: var(--dd-surface) !important;
  border: 1px solid var(--dd-border) !important;
  border-radius: var(--dd-radius) !important;
  box-shadow: none !important;
  color: var(--dd-text-soft);
}

.card .card-title,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: var(--dd-text);
}

.card.card-statistics .card-body,
.card .card-body {
  color: var(--dd-text-soft);
}

.card-header,
.card-footer {
  background: transparent !important;
  border-color: var(--dd-border) !important;
  color: var(--dd-text);
}

.card-col.border-right {
  border-right-color: var(--dd-border) !important;
}

/* Keep gradient stat cards colorful on dark bg */
.card.bg-gradient-danger,
.card.bg-gradient-success,
.card.bg-gradient-info,
.card.bg-gradient-primary,
.card.bg-gradient-warning {
  border: none !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
.typeahead,
.select2-container--default .select2-selection--single,
.form-control-lg {
  background-color: var(--dd-bg) !important;
  border: 1px solid var(--dd-border-strong) !important;
  color: var(--dd-text) !important;
  border-radius: var(--dd-radius-sm) !important;
  box-shadow: none !important;
}

/* Compact status selects inside tables — keep colored inline styles */
.table select.form-select.form-select-sm {
  width: auto !important;
  min-width: 110px;
  font-size: 0.75rem !important;
  padding: 0.2rem 1.75rem 0.2rem 0.5rem !important;
  line-height: 1.3;
  background-image: var(--bs-form-select-bg-img) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.45rem center !important;
  background-size: 12px 10px !important;
}

.form-control:focus,
.form-select:focus,
.form-control-lg:focus {
  background-color: var(--dd-bg) !important;
  border-color: var(--dd-primary) !important;
  color: var(--dd-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 92, 252, 0.2) !important;
}

.form-control::placeholder,
.form-control-lg::placeholder {
  color: var(--dd-text-muted) !important;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--dd-surface-2) !important;
  color: var(--dd-text-muted) !important;
}

.form-check-label,
label,
.form-group label {
  color: var(--dd-text-soft);
}

.input-group-text {
  background: var(--dd-surface-2) !important;
  border-color: var(--dd-border-strong) !important;
  color: var(--dd-text-muted) !important;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--dd-radius-sm) !important;
}

.btn-gradient-primary {
  background: var(--dd-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(124, 92, 252, 0.35);
}

.btn-gradient-primary:hover,
.btn-gradient-primary:focus,
.btn-gradient-primary:active {
  opacity: 0.92;
  color: #fff !important;
}

.btn-primary {
  background: var(--dd-primary) !important;
  border-color: var(--dd-primary) !important;
}

.btn-outline-primary {
  color: var(--dd-primary-2) !important;
  border-color: rgba(124, 92, 252, 0.55) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: rgba(124, 92, 252, 0.18) !important;
  color: #fff !important;
  border-color: var(--dd-primary) !important;
}

.btn-outline-secondary,
.btn-light,
.btn-outline-light {
  color: var(--dd-text-soft) !important;
  border-color: var(--dd-border-strong) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover,
.btn-light:hover {
  background: var(--dd-surface-2) !important;
  color: var(--dd-text) !important;
}

.btn-secondary {
  background: var(--dd-surface-2) !important;
  border-color: var(--dd-border-strong) !important;
  color: var(--dd-text) !important;
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dd-text-soft);
  --bs-table-border-color: var(--dd-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--dd-text-soft);
  --bs-table-hover-bg: rgba(124, 92, 252, 0.08);
  --bs-table-hover-color: var(--dd-text);
  color: var(--dd-text-soft);
  border-color: var(--dd-border);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--dd-text-soft);
  border-bottom-color: var(--dd-border);
  box-shadow: none;
}

.table thead th,
.table > thead > tr > th {
  color: var(--dd-text) !important;
  border-bottom-color: var(--dd-border-strong) !important;
  background: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(255, 255, 255, 0.03);
  color: var(--dd-text-soft);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(124, 92, 252, 0.1);
  color: var(--dd-text);
}

.table-bordered,
.table-bordered > :not(caption) > * > * {
  border-color: var(--dd-border) !important;
}

.table-responsive {
  border-radius: var(--dd-radius-sm);
}

/* ---------- Auth pages (login / forgot / reset) ---------- */
.auth {
  background: var(--dd-bg) !important;
  min-height: 100vh;
}

.content-wrapper.auth,
.content-wrapper.d-flex.align-items-center.auth {
  background: radial-gradient(1200px 600px at 50% -10%, rgba(124, 92, 252, 0.18), transparent 60%),
    var(--dd-bg) !important;
}

.auth .auth-form-light {
  background: var(--dd-surface) !important;
  border: 1px solid var(--dd-border);
  border-radius: 16px !important;
  box-shadow: var(--dd-shadow);
  color: var(--dd-text-soft);
}

.auth .auth-form-light h4,
.auth .auth-form-light h6,
.auth .auth-form-light .font-weight-light {
  color: var(--dd-text) !important;
}

.auth .auth-form-light h6.font-weight-light {
  color: var(--dd-text-muted) !important;
}

.auth form .form-group .form-control,
.auth form .form-group .form-control-lg {
  background: var(--dd-bg) !important;
  border: 1px solid var(--dd-border-strong) !important;
  border-radius: var(--dd-radius-sm) !important;
  color: var(--dd-text) !important;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

.auth .auth-link,
.auth .auth-link.text-primary,
.auth-link.text-primary {
  color: var(--dd-magenta) !important;
}

.auth .form-check-label {
  color: var(--dd-text-soft) !important;
}

.auth .brand-logo img {
  filter: drop-shadow(0 0 12px rgba(124, 92, 252, 0.35));
}

.auth .btn-gradient-primary.auth-form-btn {
  background: var(--dd-gradient) !important;
  border-radius: 10px !important;
  letter-spacing: 0.04em;
}

/* Password eye icon on dark inputs */
.auth .form-group.position-relative span,
.form-group.position-relative span[aria-label],
.password-eye-btn {
  color: var(--dd-text-muted);
}

.password-input-wrap .form-control.is-invalid {
  background-image: none !important;
}

/* ---------- Pagination / badges / alerts ---------- */
.pagination .page-link {
  background: var(--dd-surface) !important;
  border-color: var(--dd-border) !important;
  color: var(--dd-text-soft) !important;
}

.pagination .page-item.active .page-link,
.page-item.active .page-link {
  background: var(--dd-primary) !important;
  border-color: var(--dd-primary) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  background: var(--dd-surface-2) !important;
  color: var(--dd-text) !important;
}

.badge.bg-primary,
.badge-primary {
  background: rgba(124, 92, 252, 0.2) !important;
  color: var(--dd-primary-2) !important;
}

.alert {
  border-radius: var(--dd-radius-sm);
}

.alert-light,
.alert-secondary {
  background: var(--dd-surface-2) !important;
  color: var(--dd-text-soft) !important;
  border-color: var(--dd-border) !important;
}

/* ---------- Modals ---------- */
.modal-content {
  background: var(--dd-surface) !important;
  border: 1px solid var(--dd-border) !important;
  color: var(--dd-text-soft);
  border-radius: var(--dd-radius) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--dd-border) !important;
}

.modal-title {
  color: var(--dd-text);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Misc widgets ---------- */
.breadcrumb {
  background: transparent !important;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
  color: var(--dd-text-muted);
}

.breadcrumb .breadcrumb-item.active {
  color: var(--dd-text);
}

.list-group-item {
  background: var(--dd-surface) !important;
  border-color: var(--dd-border) !important;
  color: var(--dd-text-soft) !important;
}

.nav-tabs {
  border-bottom-color: var(--dd-border) !important;
}

.nav-tabs .nav-link {
  color: var(--dd-text-muted);
}

.nav-tabs .nav-link.active {
  background: var(--dd-surface) !important;
  border-color: var(--dd-border) var(--dd-border) var(--dd-surface) !important;
  color: var(--dd-text) !important;
}

.progress {
  background: var(--dd-surface-2) !important;
}

hr {
  border-top-color: var(--dd-border) !important;
  opacity: 1;
}

/* Select / native option */
select option {
  background: var(--dd-surface);
  color: var(--dd-text);
}

/* CKEditor / Jodit — keep editor editing area white for readable CMS content */
.ck.ck-editor__main > .ck-editor__editable,
.jodit-container,
.jodit-workplace,
.jodit-wysiwyg {
  background: #ffffff !important;
  color: #212529 !important;
  border-color: var(--dd-border) !important;
}

.jodit-wysiwyg *,
.ck.ck-editor__editable * {
  color: inherit;
}

.ck.ck-toolbar,
.jodit-toolbar__box {
  background: var(--dd-surface-2) !important;
  border-color: var(--dd-border) !important;
}

/* Toast / Swal soft dark surfaces */
.Toastify__toast {
  background: var(--dd-surface) !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border);
}

.Toastify__close-button,
.Toastify__close-button--light,
.Toastify__close-button--default,
.Toastify__close-button--dark {
  color: #ffffff !important;
  opacity: 0.85 !important;
}

.Toastify__close-button:hover {
  opacity: 1 !important;
}

.Toastify__close-button > svg {
  fill: currentColor !important;
  width: 16px;
  height: 16px;
}

.swal2-popup {
  background: var(--dd-surface) !important;
  color: var(--dd-text-soft) !important;
}

.swal2-title,
.swal2-html-container {
  color: var(--dd-text) !important;
}

/* Loader overlay */
.loader-container {
  background-color: rgba(8, 11, 26, 0.45) !important;
}

.loader {
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: var(--dd-primary);
}

/* Profile helpers from index.css */
.profile-image {
  border-color: var(--dd-border-strong) !important;
}

.profile-image-placeholder {
  background-color: var(--dd-surface-2) !important;
  color: var(--dd-text-muted) !important;
  border-color: var(--dd-border-strong) !important;
}

.key-value-pair {
  border-bottom-color: var(--dd-border) !important;
  color: var(--dd-text-soft);
}

.key-value-pair strong {
  color: var(--dd-text) !important;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 92, 252, 0.45) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 252, 0.45);
  border-radius: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* Offcanvas mobile sidebar */
.sidebar-offcanvas {
  background: var(--dd-bg-elevated) !important;
}

/* Ensure purple accent icons stay visible */
.icon-lg.text-primary,
.mdi.text-primary {
  color: var(--dd-primary-2) !important;
}

.activee {
  color: var(--dd-primary-2) !important;
}

/* Checkbox / radio — Bootstrap default (sibling label) */
.form-check-input {
  background-color: var(--dd-bg) !important;
  border-color: var(--dd-border-strong) !important;
}

.form-check-input:checked {
  background-color: var(--dd-primary) !important;
  border-color: var(--dd-primary) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(124, 92, 252, 0.25) !important;
}

/* Purple admin custom checkbox (input inside label + .input-helper) */
.form-check .form-check-label input[type="checkbox"],
.form-check .form-check-label input[type="radio"] {
  opacity: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

/* Status / soft badges often used in tables */
.badge.bg-success,
.badge-success {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
}

.badge.bg-danger,
.badge-danger {
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fb7185 !important;
}

.badge.bg-warning,
.badge-warning {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fbbf24 !important;
}

.badge.bg-info,
.badge-info {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
}

/* DataTables / search bars / filters */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.form-control-sm {
  background-color: var(--dd-bg) !important;
  border-color: var(--dd-border-strong) !important;
  color: var(--dd-text) !important;
}

/* Card statistics subtle separators */
.card-statistics .border-right {
  border-right: 1px solid var(--dd-border) !important;
}

/* Invalid feedback stays readable */
.invalid-feedback,
.is-invalid ~ .invalid-feedback {
  color: #fb7185 !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #f43f5e !important;
}

/* Select2 dropdown dark */
.select2-dropdown,
.select2-container--default .select2-selection--single {
  background: var(--dd-surface) !important;
  border-color: var(--dd-border) !important;
  color: var(--dd-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--dd-primary) !important;
}

/* Keep white text on gradient buttons/cards */
.text-white,
.card.text-white h2,
.card.text-white h4,
.card.text-white h6,
.card.text-white .card-text {
  color: #ffffff !important;
}