/* =====================================================
   Dashboard WZ Theme — Match watzap.id Frontend
   Loaded after style.min.css to override defaults
   ===================================================== */

/* --- CSS Variables — Light Mode (default) --- */
:root {
  --wz-primary: #da336b;
  --wz-primary-dark: #bf154c;
  --wz-primary-light: #f8e0ea;
  --wz-primary-rgb: 218, 51, 107;
  --wz-cta: #ffd12e;
  --wz-cta-dark: #e1a41b;
  --wz-cta-text: #350000;
  --wz-radius: 16px;
  --wz-radius-sm: 10px;
  --wz-radius-pill: 50px;
  --wz-font: 'Quicksand', sans-serif;
  --wz-transition: all 0.3s ease;
  /* Light defaults */
  --wz-text: #2b2b2b;
  --wz-text-secondary: #555;
  --wz-text-muted: #888;
  --wz-bg: #ffffff;
  --wz-bg-soft: #f3fafc;
  --wz-bg-gray: #f8f9fc;
  --wz-border: #eef0f3;
  --wz-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  --wz-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
  --wz-card-bg: #ffffff;
  --wz-dropdown-bg: #ffffff;
  --wz-dropdown-hover: var(--wz-primary-light);
  --wz-input-bg: #ffffff;
  --wz-input-border: #d2ddec;
  --wz-modal-bg: #ffffff;
  --wz-scrollbar-track: #f1f1f1;
  --wz-scrollbar-thumb: #c1c1c1;
  --wz-scrollbar-hover: #999;
  --wz-table-selected-bg: var(--wz-primary-light);
}

/* --- CSS Variables — Dark Mode --- */
body[data-wz-theme="dark"] {
  --wz-text: #e1e1e1;
  --wz-text-secondary: #adb5bd;
  --wz-text-muted: #6c757d;
  --wz-bg: #1a1d23;
  --wz-bg-soft: #21252b;
  --wz-bg-gray: #2c3038;
  --wz-border: rgba(255, 255, 255, 0.08);
  --wz-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  --wz-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
  --wz-primary-light: rgba(218, 51, 107, 0.2);
  --wz-card-bg: #21252b;
  --wz-dropdown-bg: #2c3038;
  --wz-dropdown-hover: rgba(218, 51, 107, 0.15);
  --wz-input-bg: #2c3038;
  --wz-input-border: rgba(255, 255, 255, 0.12);
  --wz-modal-bg: #21252b;
  --wz-scrollbar-track: #2c3038;
  --wz-scrollbar-thumb: #4a4f57;
  --wz-scrollbar-hover: #5a6068;
  --wz-table-selected-bg: rgba(218, 51, 107, 0.15);
}

/* --- Font Override --- */
body,
.navbar,
.card,
.btn,
.form-control,
.custom-select,
.dropdown-menu,
.modal-content,
.alert,
.badge,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.header-pretitle,
.header-title,
.nav-link,
.navbar-heading {
  font-family: var(--wz-font) !important;
}

/* =========================
   PRIMARY COLOR OVERRIDES
   ========================= */

/* btn-primary */
.btn-primary {
  background-color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--wz-primary-dark) !important;
  border-color: var(--wz-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(var(--wz-primary-rgb), 0.35) !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--wz-primary-dark) !important;
  border-color: var(--wz-primary-dark) !important;
}

/* btn-outline-primary */
.btn-outline-primary {
  color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
  color: #fff !important;
}

/* btn-white with text-primary */
.btn-white .text-primary,
a.text-primary {
  color: var(--wz-primary) !important;
}
a.text-primary:hover {
  color: var(--wz-primary-dark) !important;
}

/* bg-primary */
.bg-primary {
  background-color: var(--wz-primary) !important;
}

/* bg-primary-soft */
.bg-primary-soft {
  background-color: var(--wz-primary-light) !important;
  color: var(--wz-primary) !important;
}

/* badge-primary / bg-primary badge */
.badge-primary,
.badge.bg-primary {
  background-color: var(--wz-primary) !important;
}

.badge-soft-primary,
.badge.bg-primary-soft {
  background-color: var(--wz-primary-light) !important;
  color: var(--wz-primary) !important;
}

/* border-primary */
.border-primary {
  border-color: var(--wz-primary) !important;
}

/* Pagination active */
.page-item.active .page-link {
  background-color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
}
.page-link {
  color: var(--wz-primary);
  border-radius: 8px !important;
  margin: 0 2px;
}
.page-link:hover {
  color: var(--wz-primary-dark);
  background-color: var(--wz-primary-light);
}

/* List group active */
.list-group-item.active {
  background-color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
}

/* Nav tabs / pills active */
.nav-tabs .nav-link.active {
  color: var(--wz-primary) !important;
  border-bottom-color: var(--wz-primary) !important;
}
.nav-pills .nav-link.active {
  background-color: var(--wz-primary) !important;
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
  color: var(--wz-primary);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
  color: var(--wz-primary-dark);
}

/* =========================
   BUTTON STYLING (Pill)
   ========================= */
.btn {
  border-radius: var(--wz-radius-pill) !important;
  font-weight: 600;
  transition: var(--wz-transition);
  letter-spacing: 0.01em;
}
.btn-sm {
  border-radius: var(--wz-radius-pill) !important;
}
.btn-lg {
  border-radius: var(--wz-radius-pill) !important;
}
.btn-group > .btn:first-child {
  border-top-left-radius: var(--wz-radius-pill) !important;
  border-bottom-left-radius: var(--wz-radius-pill) !important;
}
.btn-group > .btn:last-child {
  border-top-right-radius: var(--wz-radius-pill) !important;
  border-bottom-right-radius: var(--wz-radius-pill) !important;
}
.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* CTA button style (yellow) */
.btn-warning,
.btn-cta {
  background-color: var(--wz-cta) !important;
  border-color: var(--wz-cta) !important;
  color: var(--wz-cta-text) !important;
  font-weight: 700;
}
.btn-warning:hover,
.btn-cta:hover {
  background-color: var(--wz-cta-dark) !important;
  border-color: var(--wz-cta-dark) !important;
  color: var(--wz-cta-text) !important;
}

/* Dark mode button overrides */
body[data-wz-theme="dark"] .btn-white,
body[data-wz-theme="dark"] .btn-light {
  background-color: var(--wz-bg-gray) !important;
  border-color: var(--wz-border) !important;
  color: var(--wz-text) !important;
}
body[data-wz-theme="dark"] .btn-white:hover,
body[data-wz-theme="dark"] .btn-light:hover {
  background-color: #363b44 !important;
  border-color: var(--wz-border) !important;
}

/* =========================
   SIDEBAR — LIGHT MODE
   ========================= */
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant {
  background-image: none !important;
  background-color: #e4e6ec !important;
  border-right: 1px solid var(--wz-border);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.03);
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-heading {
  color: var(--wz-text-muted) !important;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link {
  color: var(--wz-text-secondary) !important;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: var(--wz-transition);
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link:hover {
  color: var(--wz-primary) !important;
  background-color: rgba(var(--wz-primary-rgb), 0.04);
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link.active,
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  color: var(--wz-primary) !important;
  border-left-color: var(--wz-primary);
  background-color: rgba(var(--wz-primary-rgb), 0.06);
  font-weight: 600;
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link i {
  color: inherit !important;
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-divider {
  border-color: #d5d7dd !important;
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43,43,43,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-user .dropdown-toggle {
  color: var(--wz-text) !important;
}

body[data-wz-theme="light"] .navbar-dark.navbar-vibrant .navbar-brand {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Sidebar sub-nav */
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav .nav-sm .nav-link {
  padding-left: 2.75rem;
  font-size: 0.875rem;
  border-left: none;
}

/* Sidebar scrollbar (light) */
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant::-webkit-scrollbar,
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-collapse::-webkit-scrollbar {
  width: 5px;
}
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant::-webkit-scrollbar-track,
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-collapse::-webkit-scrollbar-track {
  background: transparent;
}
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant::-webkit-scrollbar-thumb,
body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .navbar-collapse::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

/* =========================
   SIDEBAR — DARK MODE (keep dark bg, pink accents)
   ========================= */
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link {
  border-left: 3px solid transparent;
  transition: var(--wz-transition);
}
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link.active,
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  color: #fff !important;
  background-color: rgba(var(--wz-primary-rgb), 0.25);
  border-left-color: var(--wz-primary);
}
body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link:hover {
  color: var(--secondary) !important;
}

/* =========================
   RTL SUPPORT
   ========================= */
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant {
  border-right: none;
  border-left: 1px solid var(--wz-border);
}
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link {
  border-left: none;
  border-right: 3px solid transparent;
}
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-link.active,
[dir="rtl"] body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  border-left-color: transparent;
  border-right-color: var(--wz-primary);
}
[dir="rtl"] body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-link.active,
[dir="rtl"] body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant .nav-item.active > .nav-link {
  border-left: none;
  border-right: 3px solid var(--wz-primary);
}

/* =========================
   MAIN CONTENT BACKGROUND
   ========================= */
body[data-wz-theme="light"] .main-content {
  background-color: #edeef2 !important;
}
body[data-wz-theme="light"] {
  background-color: #edeef2 !important;
}
body[data-wz-theme="dark"] {
  background-color: var(--wz-bg) !important;
}
body[data-wz-theme="dark"] .main-content {
  background-color: var(--wz-bg) !important;
}

/* =========================
   TOP BAR — Frosted Glass
   ========================= */
body[data-wz-theme="light"] .main-content .header {
  background: rgba(237, 238, 242, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wz-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}
body[data-wz-theme="dark"] .main-content .header {
  background: rgba(26, 29, 35, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wz-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Page Header */
.header-body {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.header-pretitle {
  color: var(--wz-primary) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}
.header-title {
  font-weight: 700;
  color: var(--wz-text);
}
body[data-wz-theme="dark"] .header-title {
  color: var(--wz-text) !important;
}

/* =========================
   CARDS
   ========================= */
.card {
  border-radius: var(--wz-radius) !important;
  box-shadow: var(--wz-shadow);
  border: 1px solid var(--wz-border);
  transition: var(--wz-transition);
  background-color: var(--wz-card-bg);
}
.card:hover {
  box-shadow: var(--wz-shadow-lg);
}
.card-header {
  border-radius: var(--wz-radius) var(--wz-radius) 0 0 !important;
  border-bottom: 1px solid var(--wz-border);
  background-color: transparent;
}
.card-footer {
  border-radius: 0 0 var(--wz-radius) var(--wz-radius) !important;
  border-top: 1px solid var(--wz-border);
}

/* =========================
   FORM CONTROLS
   ========================= */
.form-control {
  border-radius: var(--wz-radius-sm) !important;
  border-color: var(--wz-input-border);
  background-color: var(--wz-input-bg);
  color: var(--wz-text);
  transition: var(--wz-transition);
  font-weight: 500;
}
.form-control:focus {
  border-color: var(--wz-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--wz-primary-rgb), 0.15) !important;
  background-color: var(--wz-input-bg);
  color: var(--wz-text);
}
body[data-wz-theme="dark"] .form-control {
  background-color: var(--wz-input-bg) !important;
  border-color: var(--wz-input-border) !important;
  color: var(--wz-text) !important;
}
body[data-wz-theme="dark"] .form-control:focus {
  background-color: var(--wz-input-bg) !important;
  color: var(--wz-text) !important;
}
.custom-select {
  border-radius: var(--wz-radius-sm) !important;
  background-color: var(--wz-input-bg);
  border-color: var(--wz-input-border);
  color: var(--wz-text);
}
.custom-select:focus {
  border-color: var(--wz-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--wz-primary-rgb), 0.15) !important;
}
body[data-wz-theme="dark"] .custom-select {
  background-color: var(--wz-input-bg) !important;
  border-color: var(--wz-input-border) !important;
  color: var(--wz-text) !important;
}
.input-group > .form-control:first-child {
  border-top-left-radius: var(--wz-radius-sm) !important;
  border-bottom-left-radius: var(--wz-radius-sm) !important;
}
.input-group > .form-control:last-child,
.input-group > .input-group-append > .btn {
  border-top-right-radius: var(--wz-radius-sm) !important;
  border-bottom-right-radius: var(--wz-radius-sm) !important;
}

/* Custom checkbox/switch using primary color */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--wz-primary-rgb), 0.15) !important;
}

/* =========================
   DROPDOWNS
   ========================= */
.dropdown-menu {
  border-radius: var(--wz-radius-sm) !important;
  box-shadow: var(--wz-shadow-lg);
  border: 1px solid var(--wz-border);
  background-color: var(--wz-dropdown-bg);
  padding: 0.5rem;
}
.dropdown-item {
  border-radius: 8px;
  font-weight: 500;
  color: var(--wz-text);
  transition: var(--wz-transition);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--wz-dropdown-hover);
  color: var(--wz-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--wz-primary) !important;
  color: #fff !important;
}
body[data-wz-theme="dark"] .dropdown-menu {
  background-color: var(--wz-dropdown-bg) !important;
  border-color: var(--wz-border) !important;
}
body[data-wz-theme="dark"] .dropdown-item {
  color: var(--wz-text) !important;
}
body[data-wz-theme="dark"] .dropdown-item:hover,
body[data-wz-theme="dark"] .dropdown-item:focus {
  background-color: var(--wz-dropdown-hover) !important;
  color: var(--wz-primary) !important;
}
body[data-wz-theme="dark"] .dropdown-divider {
  border-color: var(--wz-border) !important;
}

/* =========================
   MODALS
   ========================= */
.modal-content {
  border-radius: var(--wz-radius) !important;
  box-shadow: var(--wz-shadow-lg);
  border: none;
  background-color: var(--wz-modal-bg);
}
.modal-header {
  border-bottom: 1px solid var(--wz-border);
  border-radius: var(--wz-radius) var(--wz-radius) 0 0;
}
.modal-footer {
  border-top: 1px solid var(--wz-border);
  border-radius: 0 0 var(--wz-radius) var(--wz-radius);
}
body[data-wz-theme="dark"] .modal-content {
  background-color: var(--wz-modal-bg) !important;
}
body[data-wz-theme="dark"] .modal-header {
  border-bottom-color: var(--wz-border) !important;
}
body[data-wz-theme="dark"] .modal-footer {
  border-top-color: var(--wz-border) !important;
}
body[data-wz-theme="dark"] .modal-title,
body[data-wz-theme="dark"] .modal-body {
  color: var(--wz-text) !important;
}

/* =========================
   DATATABLES
   ========================= */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
  background-color: var(--wz-table-selected-bg) !important;
  color: var(--wz-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
  color: #fff !important;
  border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--wz-primary-light) !important;
  border-color: var(--wz-primary-light) !important;
  color: var(--wz-primary) !important;
  border-radius: 8px;
}
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--wz-radius-sm) !important;
  border: 1px solid var(--wz-input-border);
  background-color: var(--wz-input-bg);
  color: var(--wz-text);
  padding: 0.4rem 0.75rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--wz-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--wz-primary-rgb), 0.15);
  outline: none;
}
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--wz-radius-sm) !important;
  border: 1px solid var(--wz-input-border);
  background-color: var(--wz-input-bg);
  color: var(--wz-text);
}
body[data-wz-theme="dark"] .dataTables_wrapper .dataTables_info,
body[data-wz-theme="dark"] .dataTables_wrapper .dataTables_length label,
body[data-wz-theme="dark"] .dataTables_wrapper .dataTables_filter label {
  color: var(--wz-text-secondary) !important;
}
body[data-wz-theme="dark"] table.dataTable thead th,
body[data-wz-theme="dark"] table.dataTable thead td {
  border-bottom-color: var(--wz-border) !important;
}
body[data-wz-theme="dark"] table.dataTable tbody td {
  border-top-color: var(--wz-border) !important;
  color: var(--wz-text);
}

/* =========================
   NPROGRESS BAR
   ========================= */
#nprogress .bar {
  background: var(--wz-primary) !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--wz-primary), 0 0 5px var(--wz-primary) !important;
}
#nprogress .spinner-icon {
  border-top-color: var(--wz-primary) !important;
  border-left-color: var(--wz-primary) !important;
}

/* =========================
   MFB (Material Floating Button)
   ========================= */
.mfb-component__button--main,
.mfb-component__button--child {
  background-color: var(--wz-primary) !important;
}
.mfb-component__button--main:hover,
.mfb-component__button--child:hover {
  background-color: var(--wz-primary-dark) !important;
}

/* =========================
   TOOLTIPSTER
   ========================= */
.tooltipster-sidetip .tooltipster-box {
  border-radius: var(--wz-radius-sm) !important;
}

/* =========================
   COOKIE CONSENT
   ========================= */
.cc-window {
  border-radius: var(--wz-radius) !important;
  font-family: var(--wz-font) !important;
}
.cc-btn.cc-dismiss {
  background-color: var(--wz-primary) !important;
  border-radius: var(--wz-radius-pill) !important;
  color: #fff !important;
}
.cc-btn.cc-dismiss:hover {
  background-color: var(--wz-primary-dark) !important;
}

/* =========================
   SCROLLBAR (global)
   ========================= */
.card-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.card-body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: var(--wz-scrollbar-track);
  border-radius: 10px;
}
.card-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--wz-scrollbar-thumb);
  border-radius: 10px;
}
.card-body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--wz-scrollbar-hover);
}

/* =========================
   PRELOADER
   ========================= */
.preloader .ripple {
  border-color: var(--wz-primary) !important;
}

/* =========================
   AUTH PAGES (Login, Register, Forgot)
   ========================= */
.bg-auth {
  border-top-color: var(--wz-primary) !important;
  background: var(--wz-bg-gray);
}

/* Auth card */
.bg-auth .card {
  border-radius: var(--wz-radius) !important;
  box-shadow: var(--wz-shadow-lg);
}

/* Auth cover image overlay */
.bg-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--wz-primary-rgb), 0.85) 0%, rgba(var(--wz-primary-rgb), 0.6) 100%);
  border-radius: var(--wz-radius);
  pointer-events: none;
}
.bg-cover {
  position: relative;
  border-radius: var(--wz-radius) !important;
  overflow: hidden;
}

/* Auth form controls */
.bg-auth .form-control {
  border-radius: var(--wz-radius-sm) !important;
  padding: 0.6rem 1rem;
}

/* Auth submit button */
.bg-auth .btn-primary,
.bg-auth .btn-lg {
  border-radius: var(--wz-radius-pill) !important;
  padding: 0.65rem 2rem;
  font-weight: 700;
}

/* =========================
   STAT / METRIC CARDS
   ========================= */
.card .display-4,
.card h2.mb-0,
.card .h2.mb-0 {
  font-weight: 700;
}

/* Icon circles with primary */
.icon-circle-primary {
  background-color: var(--wz-primary-light) !important;
  color: var(--wz-primary) !important;
}

/* Progress bars */
.progress-bar {
  background-color: var(--wz-primary) !important;
}
.progress {
  border-radius: var(--wz-radius-pill);
}

/* =========================
   ALERTS
   ========================= */
.alert {
  border-radius: var(--wz-radius-sm);
}
.alert-primary {
  background-color: var(--wz-primary-light);
  border-color: var(--wz-primary-light);
  color: var(--wz-primary);
}

/* =========================
   TOASTS / NOTIFICATIONS
   ========================= */
.toast {
  border-radius: var(--wz-radius-sm) !important;
}

/* =========================
   CHARTS (chart labels)
   ========================= */
.chart-legend-item {
  font-family: var(--wz-font) !important;
}

/* =========================
   DARK MODE — EXTRA OVERRIDES
   ========================= */
body[data-wz-theme="dark"] .text-muted {
  color: var(--wz-text-muted) !important;
}
body[data-wz-theme="dark"] .card-body,
body[data-wz-theme="dark"] .card-header,
body[data-wz-theme="dark"] .card-footer {
  background-color: transparent;
  border-color: var(--wz-border) !important;
}
body[data-wz-theme="dark"] label {
  color: var(--wz-text-secondary);
}
body[data-wz-theme="dark"] .table {
  color: var(--wz-text);
}
body[data-wz-theme="dark"] .table td,
body[data-wz-theme="dark"] .table th {
  border-color: var(--wz-border);
}
body[data-wz-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}
body[data-wz-theme="dark"] .list-group-item {
  background-color: var(--wz-card-bg);
  border-color: var(--wz-border);
  color: var(--wz-text);
}
body[data-wz-theme="dark"] .close {
  color: var(--wz-text-muted);
}
body[data-wz-theme="dark"] .page-link {
  background-color: var(--wz-bg-gray);
  border-color: var(--wz-border);
  color: var(--wz-text-secondary);
}
body[data-wz-theme="dark"] .page-link:hover {
  background-color: var(--wz-dropdown-hover);
  color: var(--wz-primary);
}
body[data-wz-theme="dark"] hr {
  border-color: var(--wz-border);
}
body[data-wz-theme="dark"] .input-group-text {
  background-color: var(--wz-bg-gray);
  border-color: var(--wz-input-border);
  color: var(--wz-text-secondary);
}
body[data-wz-theme="dark"] .nav-tabs .nav-link {
  color: var(--wz-text-secondary);
}
body[data-wz-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--wz-primary);
  border-color: transparent;
}
body[data-wz-theme="dark"] .nav-tabs {
  border-bottom-color: var(--wz-border);
}

/* Dark mode scrollbar */
body[data-wz-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--wz-scrollbar-track);
}
body[data-wz-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--wz-scrollbar-thumb);
}

/* =========================
   MISC OVERRIDES
   ========================= */

/* Avatar status indicator */
.avatar-online::before {
  background-color: #4caf50;
}

/* Close button */
.close:hover {
  color: var(--wz-primary);
}

/* Selection / highlight */
::selection {
  background-color: var(--wz-primary-light);
  color: var(--wz-primary-dark);
}
body[data-wz-theme="dark"] ::selection {
  background-color: rgba(var(--wz-primary-rgb), 0.3);
  color: #fff;
}

/* Focus outline for accessibility */
*:focus-visible {
  outline: 2px solid rgba(var(--wz-primary-rgb), 0.4);
  outline-offset: 2px;
}

/* Smooth transitions for interactive elements */
.nav-link,
.dropdown-item,
.list-group-item,
.page-link {
  transition: var(--wz-transition);
}

/* Mobile sidebar overlay */
@media (max-width: 767.98px) {
  body[data-wz-theme="light"] .navbar-vertical.navbar-vibrant {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  }
  body[data-wz-theme="dark"] .navbar-vertical.navbar-vibrant {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
  }
}