/* =========================================================
   GLOBAL DARK MODE OVERRIDES (site-wide)
   Works with Bootstrap + custom pages that use light shells.
   ========================================================= */


/* ===== Ultra Dashboard-like variables (shared across pages) ===== */
html.dark-mode{
  /* ✅ TRUE BLACK THEME */
  --bg1:#000000;
  --bg2:#05060a;

  --text:#ffffff;
  --muted:rgba(255,255,255,0.72);

  /* surfaces */
  --cardBg:#0b0f19;              /* near-black */
  --cardBd:rgba(255,255,255,0.10);

  --shadow: 0 18px 55px rgba(0,0,0,0.65);
  --shadow2: 0 26px 70px rgba(0,0,0,0.78);

  --soft: rgba(255,255,255,0.05);
  --soft2: rgba(255,255,255,0.10);
  --rowHover: rgba(255,255,255,0.06);

  --inputBg:#0b0f19;
  --inputBd:rgba(255,255,255,0.12);
  --focus: rgba(255,255,255,0.22);
}


html.dark-mode body{
  color: var(--text) !important;
}

/* Generic "surface" containers used across pages */
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .panel-body,
html.dark-mode .panel-heading,
html.dark-mode .white-box,
html.dark-mode .well,
html.dark-mode .content-body,
html.dark-mode .container-fluid,
html.dark-mode .page-wrapper .container-fluid,
html.dark-mode .invoice,
html.dark-mode .invoice-box,
html.dark-mode .form-card,
html.dark-mode .box,
html.dark-mode .box-body,
html.dark-mode .ibox,
html.dark-mode .ibox-content,
html.dark-mode .widget,
html.dark-mode .widget-content,
html.dark-mode .widget-body,
html.dark-mode .portlet,
html.dark-mode .portlet-body,
html.dark-mode .portlet-title,
html.dark-mode .stat-widget-one,
html.dark-mode .stat-widget-two,
html.dark-mode .stat-widget-three,
html.dark-mode .stat-widget-four{
  background-color: rgba(17,24,39,0.92) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none;
}

/* Any element explicitly painted white/near-white in inline styles */
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background-color:#ffffff"],
html.dark-mode [style*="background-color: #ffffff"],
html.dark-mode [style*="rgba(255,255,255"],
html.dark-mode [style*="RGB(255,255,255"],
html.dark-mode [style*="rgb(255,255,255"]{
  background-color: rgba(17,24,39,0.92) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Borders + dividers */
html.dark-mode hr,
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-right,
html.dark-mode .border-bottom,
html.dark-mode .border-left{
  border-color: rgba(255,255,255,0.10) !important;
}

/* Typography helpers */
html.dark-mode .text-dark,
html.dark-mode .text-body,
html.dark-mode .text-secondary{
  color: rgba(229,231,235,0.92) !important;
}
html.dark-mode .text-muted{
  color: rgba(156,163,175,0.92) !important;
}

/* Tables */
html.dark-mode .table,
html.dark-mode table{
  color: rgba(229,231,235,0.92) !important;
}
html.dark-mode .table thead th,
html.dark-mode table thead th{
  background: rgba(31,41,55,0.55) !important;
  color: rgba(229,231,235,0.95) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .table td,
html.dark-mode .table th{
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255,255,255,0.03) !important;
}
html.dark-mode .table-hover tbody tr:hover{
  background-color: rgba(96,165,250,0.10) !important;
}

/* Forms */
html.dark-mode .form-control,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea{
  background-color: rgba(17,24,39,0.86) !important;
  color: rgba(229,231,235,0.95) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus{
  border-color: rgba(96,165,250,0.55) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18) !important;
}
html.dark-mode .input-group-text{
  background-color: rgba(31,41,55,0.70) !important;
  color: rgba(229,231,235,0.92) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode ::placeholder{ color: rgba(229,231,235,0.55) !important; }

/* Buttons (keep brand colors but ensure readable) */
html.dark-mode .btn-light,
html.dark-mode .btn-default{
  background: rgba(31,41,55,0.92) !important;
  color: rgba(229,231,235,0.95) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html.dark-mode .btn-light:hover,
html.dark-mode .btn-default:hover{
  background: rgba(55,65,81,0.92) !important;
}

/* Dropdowns / navs */
html.dark-mode .dropdown-menu{
  background: rgba(17,24,39,0.96) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html.dark-mode .dropdown-item{
  color: rgba(229,231,235,0.92) !important;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus{
  background: rgba(96,165,250,0.14) !important;
  color: rgba(229,231,235,0.95) !important;
}
html.dark-mode .nav-tabs .nav-link{
  color: rgba(229,231,235,0.78) !important;
}
html.dark-mode .nav-tabs .nav-link.active{
  background: rgba(17,24,39,0.92) !important;
  color: rgba(229,231,235,0.95) !important;
  border-color: rgba(255,255,255,0.12) rgba(255,255,255,0.12) rgba(17,24,39,0.92) !important;
}
html.dark-mode .breadcrumb{
  background: rgba(17,24,39,0.70) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html.dark-mode .breadcrumb .breadcrumb-item,
html.dark-mode .breadcrumb a{
  color: rgba(229,231,235,0.85) !important;
}

/* Modals */
html.dark-mode .modal-content{
  background: rgba(17,24,39,0.96) !important;
  color: rgba(229,231,235,0.95) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer{
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(31,41,55,0.65) !important;
}

/* Alerts */
html.dark-mode .alert{
  border-color: rgba(255,255,255,0.10) !important;
}

/* Pagination */
html.dark-mode .page-link{
  background: rgba(17,24,39,0.86) !important;
  color: rgba(229,231,235,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .page-item.active .page-link{
  background: rgba(96,165,250,0.22) !important;
  border-color: rgba(96,165,250,0.30) !important;
}

/* DataTables (if used) */
html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_processing,
html.dark-mode .dataTables_wrapper .dataTables_paginate{
  color: rgba(229,231,235,0.85) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button{
  color: rgba(229,231,235,0.85) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: rgba(96,165,250,0.14) !important;
  border-color: rgba(96,165,250,0.25) !important;
}

/* Common "glass" wrappers used in custom pages */
html.dark-mode .glass,
html.dark-mode .glass-card,
html.dark-mode .glass-panel{
  background: rgba(17,24,39,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Chart containers (canvas background handled in JS per-page; this fixes wrapper panels) */
html.dark-mode .chart-wrapper,
html.dark-mode .chart-container,
html.dark-mode .chartist,
html.dark-mode .ct-chart{
  background: rgba(17,24,39,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
}


/* ===== Common custom page shells (hero / wrap / table-wrap / modals) ===== */
html.dark-mode .hero,
html.dark-mode .wrap,
html.dark-mode .table-wrap,
html.dark-mode .box,
html.dark-mode .panel-body,
html.dark-mode .panel-heading,
html.dark-mode .well,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu{
  background: var(--cardBg) !important;
  border: 1px solid var(--cardBd) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(8px);
}

html.dark-mode .toolbar,
html.dark-mode .filter-box,
html.dark-mode .search-box{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* inputs */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control{
  background: var(--inputBg) !important;
  border-color: var(--inputBd) !important;
  color: var(--text) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder{ color: rgba(156,163,175,0.85) !important; }

/* buttons that rely on light backgrounds */
html.dark-mode .btnGhost,
html.dark-mode .btn-ic,
html.dark-mode .btnCancel{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
}
html.dark-mode .btnGhost:hover,
html.dark-mode .btn-ic:hover,
html.dark-mode .btnCancel:hover{
  background: rgba(255,255,255,0.10) !important;
}

/* tables */
html.dark-mode table,
html.dark-mode .table,
html.dark-mode .tableX,
html.dark-mode .orders-table{
  color: var(--text) !important;
}
html.dark-mode .table thead th,
html.dark-mode .tableX thead th,
html.dark-mode .orders-table thead th{
  background: rgba(31,41,55,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(156,163,175,0.95) !important;
}
html.dark-mode .table tbody tr,
html.dark-mode .tableX tbody tr{
  background: rgba(17,24,39,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .table tbody tr:hover,
html.dark-mode .tableX tbody tr:hover,
html.dark-mode .orders-table tbody tr:hover{
  background: var(--rowHover) !important;
}

/* pills / soft badges */
html.dark-mode .badgeSoft,
html.dark-mode .pill,
html.dark-mode .sub-pill,
html.dark-mode .order-pill{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(229,231,235,0.92) !important;
}

/* modal custom class used in many pages */
html.dark-mode .modalX,
html.dark-mode .modalX .box,
html.dark-mode .modalX .head,
html.dark-mode .modalX .foot{
  background: var(--cardBg) !important;
  border-color: var(--cardBd) !important;
  color: var(--text) !important;
}

/* =========================================================
   ✅ Force BLACK cards/forms + WHITE text everywhere
   (keeps your dashboard vibe but with true black surfaces)
   ========================================================= */

/* backgrounds */
html.dark-mode .page-wrapper{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(900px 600px at 90% 18%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(900px 600px at 30% 95%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2)) !important;
}

/* universal text */
html.dark-mode, html.dark-mode body,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode p, html.dark-mode span, html.dark-mode label, html.dark-mode small,
html.dark-mode a, html.dark-mode .text-dark{
  color: var(--text) !important;
}

html.dark-mode .text-muted,
html.dark-mode .help-block,
html.dark-mode .form-text,
html.dark-mode .small, 
html.dark-mode .text-secondary{
  color: var(--muted) !important;
}

/* cards / panels / containers */
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .panel-body,
html.dark-mode .panel-heading,
html.dark-mode .white-box,
html.dark-mode .well,
html.dark-mode .content-body,
html.dark-mode .invoice,
html.dark-mode .invoice-box,
html.dark-mode .form-card,
html.dark-mode .box,
html.dark-mode .box-body,
html.dark-mode .ibox,
html.dark-mode .ibox-content,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu{
  background: var(--cardBg) !important;
  border: 1px solid var(--cardBd) !important;
  box-shadow: var(--shadow) !important;
}

/* hover */
html.dark-mode .card:hover,
html.dark-mode .panel:hover,
html.dark-mode .white-box:hover,
html.dark-mode .box:hover,
html.dark-mode .ibox:hover{
  box-shadow: var(--shadow2) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* forms */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode .input-group-text{
  background: var(--inputBg) !important;
  color: var(--text) !important;
  border: 1px solid var(--inputBd) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

html.dark-mode ::placeholder{
  color: rgba(255,255,255,0.55) !important;
}

/* buttons */
html.dark-mode .btn,
html.dark-mode button{
  border-color: rgba(255,255,255,0.14) !important;
}

html.dark-mode .btn-light,
html.dark-mode .btn-default{
  background: var(--soft) !important;
  color: var(--text) !important;
}

html.dark-mode .btn-outline-secondary,
html.dark-mode .btn-outline-dark{
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
html.dark-mode .btn-outline-secondary:hover,
html.dark-mode .btn-outline-dark:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* tables */
html.dark-mode table,
html.dark-mode .table,
html.dark-mode .dataTables_wrapper,
html.dark-mode .dataTables_wrapper .dataTables_filter input{
  color: var(--text) !important;
}

html.dark-mode .table thead th,
html.dark-mode table thead th{
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.90) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

html.dark-mode .table tbody tr,
html.dark-mode table tbody tr{
  background: var(--cardBg) !important;
}

html.dark-mode .table td, 
html.dark-mode .table th,
html.dark-mode table td,
html.dark-mode table th{
  border-color: rgba(255,255,255,0.10) !important;
}

html.dark-mode .table-hover tbody tr:hover,
html.dark-mode table tbody tr:hover{
  background: rgba(255,255,255,0.06) !important;
}

/* alerts / badges */
html.dark-mode .badge,
html.dark-mode .label{
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* links */
html.dark-mode a:hover{
  opacity: .9;
}