/* ============================================
   AURA THEME CUSTOM STYLES
   Matching Aura color palette throughout panel
   ============================================ */

:root {
  /* Aura Theme Colors */
  --aura-bg: #0F0D10;
  --aura-text-primary: #F4C7B6;
  --aura-text-secondary: #9F9C9A;
  --aura-input-border: #333333;
  --aura-input-bg: transparent;
  --aura-placeholder: #9F9C9A;
  --aura-text-white: #FFFFFF;
  --aura-text-black: #000000;
  --aura-primary-start: #90605C;
  --aura-primary-mid: #F7DCD5;
  --aura-primary-end: #E5A99B;
  --aura-browse-offer: #90605C;
  --aura-qr-start: #DA9A8A;
  --aura-qr-end: #90605C;
  --aura-qr-glow: #DA9A8A55;

  /* Override default theme colors */
  --theme-deafult: var(--aura-primary-start);
  --theme-secondary: var(--aura-primary-end);
  --light-background: rgba(15, 13, 16, 0.7);
  --body-font-color: var(--aura-text-primary);
  --chart-border: var(--aura-input-border);
  --recent-chart-bg: rgba(15, 13, 16, 0.95);
  --light-bg: var(--aura-bg);
  --white: var(--aura-bg);
  --light2: rgba(15, 13, 16, 0.8);
  --sidebar-border: var(--aura-input-border);
  --chart-text-color: var(--aura-text-secondary);
  --recent-dashed-border: rgba(244, 199, 182, 0.3);
  --chart-dashed-border: rgba(244, 199, 182, 0.2);
  --chart-progress-light: rgba(144, 96, 92, 0.2);
  --recent-box-bg: rgba(15, 13, 16, 0.6);
  --recent-border: var(--aura-input-border);
  --course-light-btn: rgba(15, 13, 16, 0.5);
  --course-bg: rgba(15, 13, 16, 0.4);
  --balance-profie-bg: rgba(144, 96, 92, 0.2);
  --view-grid-bg: rgba(144, 96, 92, 0.15);
  --view-border-marker: rgba(218, 154, 138, 0.4);
  --normal: rgba(244, 199, 182, 0.2);
  --normal-shadow: rgba(144, 96, 92, 0.3);
  --normal-mouth: var(--aura-text-secondary);
  --normal-eye: var(--aura-text-primary);
  --active: var(--aura-primary-end);
  --active-shadow: var(--aura-primary-start);
  --active-mouth: var(--aura-primary-start);
  --active-eye: var(--aura-text-primary);
  --active-tear: var(--aura-primary-mid);
  --active-shadow-angry: var(--aura-primary-start);
}

/* ============================================
   BODY & BACKGROUND
   ============================================ */
body {
  background-color: var(--aura-bg) !important;
  color: var(--aura-text-primary) !important;
}

body[class=dark-only] {
  --light-background: rgba(15, 13, 16, 0.85);
  --recent-chart-bg: var(--aura-bg);
  --light-bg: var(--aura-bg);
  --white: var(--aura-bg);
  --sidebar-border: var(--aura-input-border);
  --light2: var(--aura-bg);
  --chart-border: var(--aura-input-border);
  --recent-box-bg: rgba(15, 13, 16, 0.8);
  --recent-border: var(--aura-input-border);
  --body-font-color: var(--aura-text-primary);
  --course-light-btn: var(--aura-bg);
  --view-grid-bg: var(--aura-bg);
  --view-border-marker: rgba(144, 96, 92, 0.4);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--aura-text-white) !important;
}

p,
span,
div,
label {
  color: var(--aura-text-primary) !important;
}

.f-light {
  color: var(--aura-text-secondary) !important;
}

.text-muted {
  color: var(--aura-text-secondary) !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */
.card {
  background-color: rgba(15, 13, 16, 0.8) !important;
  border: 1px solid var(--aura-input-border) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.card[class*="border"],
.card.border {
  border: 1px solid var(--aura-input-border) !important;
}

/* Ensure all card variants have visible borders */
.card-default,
.card-primary,
.card-secondary,
.card-success,
.card-danger,
.card-warning,
.card-info,
.card-light,
.card-dark {
  border: 1px solid var(--aura-input-border) !important;
}

/* Widget cards specifically */
.widget-1 .card,
.widget-2 .card,
.widget-3 .card,
.widget-4 .card {
  border: 1px solid var(--aura-input-border) !important;
}

.card-header {
  background-color: rgba(15, 13, 16, 0.6) !important;
  border-bottom-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.card-body {
  background-color: transparent !important;
  color: var(--aura-text-primary) !important;
}

.light-card {
  background-color: rgba(15, 13, 16, 0.5) !important;
}

.light-background {
  background-color: var(--aura-bg) !important;
}

/* ============================================
   INPUTS & FORMS
   ============================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: var(--aura-input-bg) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: rgba(15, 13, 16, 0.9) !important;
  border-color: var(--aura-primary-end) !important;
  color: var(--aura-text-white) !important;
  box-shadow: 0 0 0 0.15rem rgba(229, 169, 155, 0.35) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--aura-placeholder) !important;
  opacity: 1;
}

.form-label,
label {
  color: var(--aura-text-primary) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-mid), var(--aura-primary-end)) !important;
  border-color: transparent !important;
  color: var(--aura-text-black) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(135deg, var(--aura-primary-end), var(--aura-primary-mid), var(--aura-primary-start)) !important;
  border-color: transparent !important;
  color: var(--aura-text-black) !important;
  box-shadow: 0 12px 26px rgba(218, 154, 138, 0.4) !important;
}

.btn-secondary {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.btn-secondary:hover {
  background-color: var(--aura-primary-end) !important;
  border-color: var(--aura-primary-end) !important;
}

.btn-outline-primary {
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar-wrapper {
  background-color: var(--aura-bg) !important;
  border-right-color: var(--aura-input-border) !important;
}

.sidebar-menu .sidebar-link {
  color: var(--aura-text-secondary) !important;
}

.sidebar-menu .sidebar-link:hover,
.sidebar-menu .sidebar-link.active {
  color: var(--aura-text-primary) !important;
  background-color: rgba(144, 96, 92, 0.2) !important;
}

/* ============================================
   TOPBAR/HEADER
   ============================================ */
.page-header {
  background-color: rgba(15, 13, 16, 0.9) !important;
  border-bottom-color: var(--aura-input-border) !important;
}

.page-header .header-wrapper {
  background-color: transparent !important;
}

/* ============================================
   TABLES
   ============================================ */
.table {
  color: var(--aura-text-primary) !important;
  background-color: transparent !important;
}

.table thead th {
  border-bottom-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
  background-color: rgba(15, 13, 16, 0.5) !important;
}

.table tbody td {
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(15, 13, 16, 0.3) !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(144, 96, 92, 0.15) !important;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  color: var(--aura-text-white) !important;
}

.badge-primary,
.badge.bg-primary {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  color: var(--aura-text-white) !important;
}

.badge-secondary,
.badge.bg-secondary {
  background-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
  background-color: rgba(144, 96, 92, 0.15) !important;
  border-color: rgba(229, 169, 155, 0.45) !important;
  color: var(--aura-text-primary) !important;
}

.alert-success {
  background-color: rgba(144, 96, 92, 0.2) !important;
  border-color: rgba(229, 169, 155, 0.5) !important;
  color: var(--aura-text-primary) !important;
}

.alert-danger {
  background-color: rgba(144, 96, 92, 0.2) !important;
  border-color: rgba(229, 169, 155, 0.5) !important;
  color: var(--aura-text-primary) !important;
}

.alert-info {
  background-color: rgba(144, 96, 92, 0.2) !important;
  border-color: rgba(229, 169, 155, 0.5) !important;
  color: var(--aura-text-primary) !important;
}

.alert-warning {
  background-color: rgba(144, 96, 92, 0.2) !important;
  border-color: rgba(229, 169, 155, 0.5) !important;
  color: var(--aura-text-primary) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

.dropdown-item {
  color: var(--aura-text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(144, 96, 92, 0.2) !important;
  color: var(--aura-text-white) !important;
}

.dropdown-item.active {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.modal-header {
  border-bottom-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.modal-footer {
  border-top-color: var(--aura-input-border) !important;
}

.modal-title {
  color: var(--aura-text-white) !important;
}

/* ============================================
   NAVS & TABS
   ============================================ */
.nav-tabs {
  border-bottom-color: var(--aura-input-border) !important;
}

.nav-tabs .nav-link {
  color: var(--aura-text-secondary) !important;
  border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.nav-tabs .nav-link.active {
  background-color: transparent !important;
  border-color: var(--aura-input-border) var(--aura-input-border) transparent !important;
  color: var(--aura-text-primary) !important;
  border-bottom-color: var(--aura-primary-end) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress {
  background-color: rgba(15, 13, 16, 0.5) !important;
}

.progress-bar {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
  background-color: transparent !important;
}

.breadcrumb-item a {
  color: var(--aura-text-secondary) !important;
}

.breadcrumb-item a:hover {
  color: var(--aura-text-primary) !important;
}

.breadcrumb-item.active {
  color: var(--aura-text-primary) !important;
  font-weight: 500 !important;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--aura-text-secondary) !important;
  content: "/" !important;
}

/* Breadcrumb SVG icons */
.breadcrumb-item a svg,
.breadcrumb-item a svg.stroke-icon {
  stroke: var(--aura-text-secondary) !important;
  fill: none !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: text-top !important;
}

.breadcrumb-item a:hover svg,
.breadcrumb-item a:hover svg.stroke-icon {
  stroke: var(--aura-text-primary) !important;
}

/* Page title breadcrumb specific */
.page-title .breadcrumb {
  background-color: transparent !important;
}

.page-title .breadcrumb li {
  color: var(--aura-text-secondary) !important;
}

.page-title .breadcrumb .breadcrumb-item a {
  color: var(--aura-text-secondary) !important;
}

.page-title .breadcrumb .breadcrumb-item.active {
  color: var(--aura-text-primary) !important;
  font-weight: 500 !important;
}

.page-title .breadcrumb .breadcrumb-item a svg.stroke-icon {
  stroke: var(--aura-text-secondary) !important;
}

.page-title .breadcrumb .breadcrumb-item a:hover svg.stroke-icon {
  stroke: var(--aura-text-primary) !important;
}

.page-title h3 {
  color: var(--aura-text-white) !important;
}

.page-title h3 small {
  color: var(--aura-text-secondary) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.page-link {
  background-color: rgba(15, 13, 16, 0.5) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.page-link:hover {
  background-color: rgba(144, 96, 92, 0.2) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.page-item.active .page-link {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   CHECKBOXES & RADIOS
   ============================================ */
.form-check-input {
  background-color: transparent !important;
  border-color: var(--aura-input-border) !important;
}

.form-check-input:checked {
  background-image: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  border-color: transparent !important;
}

.form-check-label {
  color: var(--aura-text-primary) !important;
}

/* ============================================
   SWITCHES
   ============================================ */
.form-switch .form-check-input:checked {
  background-image: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
}

/* ============================================
   SELECT2 & CUSTOM SELECTS
   ============================================ */
.select2-container--default .select2-selection--single {
  background-color: var(--aura-input-bg) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--aura-text-white) !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--aura-primary-end) !important;
}

.select2-dropdown {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

.select2-container--default .select2-results__option {
  color: var(--aura-text-primary) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: rgba(144, 96, 92, 0.3) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   CHARTS & GRAPHS
   ============================================ */
.chart-container {
  background-color: transparent !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
  color: var(--aura-text-primary) !important;
}

a:hover {
  color: var(--aura-primary-end) !important;
}

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

::-webkit-scrollbar-track {
  background: var(--aura-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--aura-primary-start);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--aura-primary-end);
}

/* ============================================
   LOADER
   ============================================ */
.loader-wrapper {
  background-color: var(--aura-bg) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-primary {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
}

.bg-secondary {
  background-color: var(--aura-primary-start) !important;
}

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

.text-secondary {
  color: var(--aura-text-secondary) !important;
}

.border-primary {
  border-color: var(--aura-primary-start) !important;
}

/* ============================================
   QR CODE SPECIFIC (if used)
   ============================================ */
.qr-container {
  background: linear-gradient(135deg, var(--aura-qr-start), var(--aura-qr-end)) !important;
  box-shadow: 0 0 20px var(--aura-qr-glow) !important;
}

/* ============================================
   BROWSE OFFER BUTTONS
   ============================================ */
.btn-browse-offer {
  background-color: var(--aura-browse-offer) !important;
  color: var(--aura-text-white) !important;
}

.btn-browse-offer:hover {
  background-color: var(--aura-primary-end) !important;
}

/* ============================================
   DATATABLES
   ============================================ */
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--aura-input-bg) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.dataTables_wrapper .dataTables_length select {
  background-color: var(--aura-input-bg) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--aura-text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
.tooltip-inner {
  background-color: rgba(15, 13, 16, 0.95) !important;
  color: var(--aura-text-primary) !important;
}

.popover {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

.popover-header {
  background-color: rgba(15, 13, 16, 0.8) !important;
  border-bottom-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.popover-body {
  color: var(--aura-text-primary) !important;
}

/* ============================================
   CALENDAR/FC (FullCalendar)
   ============================================ */
.fc-button {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.fc-button:hover {
  background-color: var(--aura-primary-end) !important;
  border-color: var(--aura-primary-end) !important;
}

.fc-button-active {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
}

/* ============================================
   WIDGET CARDS & DASHBOARD COMPONENTS
   ============================================ */
.widget-1,
.widget-2,
.widget-3,
.widget-4,
.widget-grid .card {
  background-color: rgba(15, 13, 16, 0.8) !important;
  border: 1px solid var(--aura-input-border) !important;
  border-color: var(--aura-input-border) !important;
}

.widget-content h4 {
  color: var(--aura-text-white) !important;
}

.profile-box {
  background: linear-gradient(135deg, rgba(144, 96, 92, 0.3), rgba(229, 169, 155, 0.2)) !important;
  border: 1px solid var(--aura-input-border) !important;
  border-color: var(--aura-input-border) !important;
}

.greeting-user h4,
.greeting-user p {
  color: var(--aura-text-white) !important;
}

.btn-outline-white {
  border-color: rgba(244, 199, 182, 0.5) !important;
  color: var(--aura-text-white) !important;
  background-color: transparent !important;
}

.btn-outline-white:hover {
  background-color: rgba(244, 199, 182, 0.2) !important;
  border-color: var(--aura-text-primary) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   BADGE LIGHT VARIANTS
   ============================================ */
.badge-light-primary,
.badge-light-success,
.badge-light-danger,
.badge-light-warning,
.badge-light-info,
.badge-light-secondary,
.badge-light-light {
  background-color: rgba(144, 96, 92, 0.2) !important;
  color: var(--aura-text-primary) !important;
  border: 1px solid rgba(229, 169, 155, 0.3) !important;
}

.badge-light-success {
  background-color: rgba(144, 96, 92, 0.25) !important;
  color: var(--aura-text-primary) !important;
}

.badge-light-warning {
  background-color: rgba(218, 154, 138, 0.2) !important;
  color: var(--aura-text-primary) !important;
}

.badge-light-info {
  background-color: rgba(229, 169, 155, 0.2) !important;
  color: var(--aura-text-primary) !important;
}

/* ============================================
   BACKGROUND UTILITY CLASSES
   ============================================ */
.bg-primary,
.bg-success,
.bg-danger,
.bg-warning,
.bg-info,
.bg-light,
.bg-dark {
  background-color: var(--aura-primary-start) !important;
}

.bg-white {
  background-color: rgba(15, 13, 16, 0.9) !important;
}

.bg-light {
  background-color: rgba(15, 13, 16, 0.5) !important;
}

.bg-dark {
  background-color: var(--aura-bg) !important;
}

/* ============================================
   TEXT UTILITY CLASSES
   ============================================ */
.text-primary {
  color: var(--aura-text-primary) !important;
}

.text-secondary {
  color: var(--aura-text-secondary) !important;
}

.text-success {
  color: var(--aura-primary-end) !important;
}

.text-danger {
  color: var(--aura-primary-start) !important;
}

.text-warning {
  color: var(--aura-primary-mid) !important;
}

.text-info {
  color: var(--aura-text-primary) !important;
}

.text-light {
  color: var(--aura-text-secondary) !important;
}

.text-dark {
  color: var(--aura-text-white) !important;
}

.text-white {
  color: var(--aura-text-white) !important;
}

.text-black {
  color: var(--aura-text-black) !important;
}

.text-muted {
  color: var(--aura-text-secondary) !important;
}

/* ============================================
   ICONS & SVG
   ============================================ */
.svg-fill {
  fill: var(--aura-text-primary) !important;
}

.icon-arrow-up,
.icon-arrow-down,
.icon-arrow-left,
.icon-arrow-right,
.icon-arrow-top-right {
  color: var(--aura-text-primary) !important;
}

.font-primary {
  color: var(--aura-text-primary) !important;
}

.font-secondary {
  color: var(--aura-text-secondary) !important;
}

.f-w-600,
.f-w-700 {
  color: var(--aura-text-white) !important;
}

/* ============================================
   WIDGET ROUND & ICONS
   ============================================ */
.widget-round {
  background-color: rgba(144, 96, 92, 0.2) !important;
}

.widget-round.primary .bg-round {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
}

.widget-round svg {
  fill: var(--aura-text-primary) !important;
}

/* ============================================
   CHART CONTAINERS
   ============================================ */
.order-chart,
.profit-chart,
.chart-container,
#orderchart,
#profitchart {
  background-color: transparent !important;
}

/* ============================================
   LIST ITEMS
   ============================================ */
.list-group-item {
  background-color: rgba(15, 13, 16, 0.6) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.list-group-item.active {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.list-group-item:hover {
  background-color: rgba(144, 96, 92, 0.2) !important;
}

/* ============================================
   PAGE BODY & WRAPPER
   ============================================ */
.page-body {
  background-color: var(--aura-bg) !important;
}

.page-body-wrapper {
  background-color: var(--aura-bg) !important;
}

.page-wrapper {
  background-color: var(--aura-bg) !important;
}

.container-fluid {
  background-color: var(--aura-bg) !important;
}

/* ============================================
   TOPBAR/HEADER ELEMENTS
   ============================================ */
.header-wrapper {
  background-color: rgba(15, 13, 16, 0.9) !important;
  border-bottom-color: var(--aura-input-border) !important;
}

.onhover-dropdown,
.profile-dropdown {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

.onhover-dropdown .onhover-show-div,
.profile-dropdown .onhover-show-div {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

.onhover-dropdown a,
.profile-dropdown a {
  color: var(--aura-text-primary) !important;
}

.onhover-dropdown a:hover,
.profile-dropdown a:hover {
  background-color: rgba(144, 96, 92, 0.2) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   NOTIFICATION & ALERT BANNERS
   ============================================ */
.alert-light {
  background-color: rgba(15, 13, 16, 0.6) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.notification-dropdown,
.notification-box {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

/* ============================================
   BUTTON VARIANTS
   ============================================ */
.btn-success {
  background-color: var(--aura-primary-end) !important;
  border-color: var(--aura-primary-end) !important;
  color: var(--aura-text-white) !important;
}

.btn-success:hover {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
}

.btn-danger {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.btn-danger:hover {
  background-color: var(--aura-primary-end) !important;
  border-color: var(--aura-primary-end) !important;
}

.btn-warning {
  background-color: var(--aura-primary-mid) !important;
  border-color: var(--aura-primary-mid) !important;
  color: var(--aura-text-black) !important;
}

.btn-warning:hover {
  background-color: var(--aura-primary-end) !important;
  border-color: var(--aura-primary-end) !important;
  color: var(--aura-text-white) !important;
}

.btn-info {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.btn-info:hover {
  background-color: var(--aura-primary-end) !important;
  border-color: var(--aura-primary-end) !important;
}

.btn-light {
  background-color: rgba(15, 13, 16, 0.5) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-primary) !important;
}

.btn-light:hover {
  background-color: rgba(144, 96, 92, 0.2) !important;
  border-color: var(--aura-primary-start) !important;
  color: var(--aura-text-white) !important;
}

.btn-dark {
  background-color: var(--aura-bg) !important;
  border-color: var(--aura-input-border) !important;
  color: var(--aura-text-white) !important;
}

.btn-dark:hover {
  background-color: var(--aura-primary-start) !important;
  border-color: var(--aura-primary-start) !important;
}

.btn-link {
  color: var(--aura-text-primary) !important;
}

.btn-link:hover {
  color: var(--aura-primary-end) !important;
}

/* ============================================
   CARD VARIANTS
   ============================================ */
.card-no-border {
  border: none !important;
}

.card-header .header-top h5 {
  color: var(--aura-text-white) !important;
}

.card-header .header-top a {
  color: var(--aura-text-secondary) !important;
}

.card-header .header-top a:hover {
  color: var(--aura-text-primary) !important;
}

/* ============================================
   ACTIVITY & TIMELINE
   ============================================ */
.activity-timeline,
.timeline {
  background-color: transparent !important;
}

.activity-item,
.timeline-item {
  color: var(--aura-text-primary) !important;
}

.activity-item .activity-dot,
.timeline-item .timeline-dot {
  background-color: var(--aura-primary-start) !important;
}

/* ============================================
   RECENT SALES & ORDERS
   ============================================ */
.recent-table,
.recent-orders {
  background-color: transparent !important;
}

.recent-table td,
.recent-orders td {
  color: var(--aura-text-primary) !important;
}

.recent-table .recent-content h6,
.recent-orders .recent-content h6 {
  color: var(--aura-text-white) !important;
}

/* ============================================
   OVERALL BALANCE & CHARTS
   ============================================ */
.overall-balance,
.balance-chart {
  background-color: rgba(15, 13, 16, 0.8) !important;
  border: 1px solid var(--aura-input-border) !important;
}

.overall-balance h5,
.balance-chart h5 {
  color: var(--aura-text-white) !important;
}

.overall-balance .legend,
.balance-chart .legend {
  color: var(--aura-text-secondary) !important;
}

/* ============================================
   INCOME/EXPENSE CARDS
   ============================================ */
.income-card,
.expense-card,
.cashback-card {
  background-color: rgba(15, 13, 16, 0.8) !important;
  border: 1px solid var(--aura-input-border) !important;
  border-color: var(--aura-input-border) !important;
}

.income-card h6,
.expense-card h6,
.cashback-card h6 {
  color: var(--aura-text-secondary) !important;
}

.income-card h4,
.expense-card h4,
.cashback-card h4 {
  color: var(--aura-text-white) !important;
}

.income-card .font-success,
.expense-card .font-success {
  color: var(--aura-primary-end) !important;
}

/* ============================================
   PAPERNOTE & PROJECT CARDS
   ============================================ */
.papernote-wrap,
.project-card {
  background-color: rgba(15, 13, 16, 0.8) !important;
  border: 1px solid var(--aura-input-border) !important;
  border-color: var(--aura-input-border) !important;
}

.note-content p {
  color: var(--aura-text-primary) !important;
}

.note-labels .badge {
  background-color: rgba(144, 96, 92, 0.2) !important;
  color: var(--aura-text-primary) !important;
  border-color: rgba(229, 169, 155, 0.3) !important;
}

.last-label .badge {
  background-color: rgba(144, 96, 92, 0.3) !important;
  color: var(--aura-text-primary) !important;
}

.user-details {
  color: var(--aura-text-primary) !important;
}

/* ============================================
   MEDIA OBJECTS
   ============================================ */
.media {
  color: var(--aura-text-primary) !important;
}

.media-body {
  color: var(--aura-text-primary) !important;
}

.media-body h6 {
  color: var(--aura-text-white) !important;
}

.media-body p {
  color: var(--aura-text-secondary) !important;
}

/* ============================================
   STATISTICS & METRICS
   ============================================ */
.statistics h4,
.metrics h4 {
  color: var(--aura-text-white) !important;
}

.statistics .f-light,
.metrics .f-light {
  color: var(--aura-text-secondary) !important;
}

.statistics .font-primary,
.metrics .font-primary {
  color: var(--aura-text-primary) !important;
}

/* ============================================
   ADDITIONAL COLOR OVERRIDES
   ============================================ */
/* Override any remaining default theme colors */
[style*="background-color: #7366ff"],
[style*="background-color: #7366FF"],
[style*="color: #7366ff"],
[style*="color: #7366FF"] {
  background-color: var(--aura-primary-start) !important;
  color: var(--aura-text-primary) !important;
}

/* Override any bright/light backgrounds */
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background-color: #FFFFFF"] {
  background-color: rgba(15, 13, 16, 0.9) !important;
}

[style*="background-color: #f4f4f4"],
[style*="background-color: #F4F4F4"] {
  background-color: rgba(15, 13, 16, 0.5) !important;
}

/* Override any default text colors */
[style*="color: #2F2F3B"],
[style*="color: #2f2f3b"] {
  color: var(--aura-text-primary) !important;
}

/* Override chart text colors */
.apexcharts-text,
.apexcharts-legend-text,
.apexcharts-tooltip {
  color: var(--aura-text-primary) !important;
  fill: var(--aura-text-primary) !important;
}

.apexcharts-tooltip {
  background-color: rgba(15, 13, 16, 0.95) !important;
  border-color: var(--aura-input-border) !important;
}

/* Override any remaining blue/purple accents */
.text-primary[style*="color"],
.bg-primary[style*="background"] {
  color: var(--aura-text-primary) !important;
  background-color: var(--aura-primary-start) !important;
}

/* Override sidebar active states */
.sidebar-menu .sidebar-link.active,
.sidebar-menu .sidebar-link[aria-expanded="true"] {
  background-color: rgba(144, 96, 92, 0.3) !important;
  color: var(--aura-text-white) !important;
}

.sidebar-menu .sidebar-link.active::before {
  background-color: var(--aura-primary-end) !important;
}

/* Override dropdown menu items */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background: linear-gradient(135deg, var(--aura-primary-start), var(--aura-primary-end)) !important;
  color: var(--aura-text-white) !important;
}

/* Override any remaining success/danger colors to match theme */
.text-success {
  color: var(--aura-primary-end) !important;
}

.bg-success {
  background-color: rgba(144, 96, 92, 0.3) !important;
}

.border-success {
  border-color: var(--aura-primary-end) !important;
}

/* Override any remaining info colors */
.text-info {
  color: var(--aura-text-primary) !important;
}

.bg-info {
  background-color: rgba(229, 169, 155, 0.2) !important;
}

/* Override any remaining warning colors */
.text-warning {
  color: var(--aura-primary-mid) !important;
}

.bg-warning {
  background-color: rgba(218, 154, 138, 0.2) !important;
}

/* Override divider/separator colors */
hr,
.divider {
  border-color: var(--aura-input-border) !important;
  background-color: var(--aura-input-border) !important;
}

/* Override any remaining link colors in cards */
.card a:not(.btn) {
  color: var(--aura-text-primary) !important;
}

.card a:not(.btn):hover {
  color: var(--aura-primary-end) !important;
}

/* Override any remaining icon colors */
i[class*="icon-"],
svg[class*="icon-"] {
  /* color: var(--aura-text-primary) !important; */
  fill: var(--aura-text-primary) !important;
}

/* Override any remaining placeholder text */
::placeholder {
  color: var(--aura-placeholder) !important;
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: var(--aura-placeholder) !important;
}

::-ms-input-placeholder {
  color: var(--aura-placeholder) !important;
}

/* Override any remaining focus states */
*:focus {
  outline-color: var(--aura-primary-end) !important;
}

*:focus-visible {
  outline-color: var(--aura-primary-end) !important;
}

/* Override any remaining selection colors */
::selection {
  background-color: rgba(144, 96, 92, 0.3) !important;
  color: var(--aura-text-white) !important;
}

::-moz-selection {
  background-color: rgba(144, 96, 92, 0.3) !important;
  color: var(--aura-text-white) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .sidebar-wrapper {
    background-color: rgba(15, 13, 16, 0.98) !important;
  }

  .widget-grid .card {
    background-color: rgba(15, 13, 16, 0.85) !important;
  }

  .page-header {
    background-color: rgba(15, 13, 16, 0.95) !important;
  }
}

h2.swal2-title {
  color: #000 !important;
}

.logo-wrapper a img{
  height: 80px !important;
}