/* ============================================================
   StockBuckket – Theme System
   Supports: data-theme="light" (default) | data-theme="dark"
   ============================================================ */

/* ── Light Theme (default) ─────────────────────────────────── */
:root,
[data-theme="light"] {
  --sb-body-bg:          #f8f9fc;
  --sb-content-bg:       #f8f9fc;
  --sb-topbar-bg:        #ffffff;
  --sb-topbar-border:    #e3e6f0;
  --sb-topbar-text:      #858796;
  --sb-card-bg:          #ffffff;
  --sb-card-border:      #e3e6f0;
  --sb-card-header-bg:   #f8f9fc;
  --sb-card-shadow:      0 .15rem 1.75rem 0 rgba(58,59,69,.15);
  --sb-text-primary:     #5a5c69;
  --sb-text-secondary:   #858796;
  --sb-text-muted:       #b7b9cc;
  --sb-heading-color:    #4e73df;
  --sb-input-bg:         #f8f9fc;
  --sb-input-border:     #d1d3e2;
  --sb-input-text:       #6e707e;
  --sb-dropdown-bg:      #ffffff;
  --sb-dropdown-border:  rgba(0,0,0,.15);
  --sb-dropdown-text:    #3a3b45;
  --sb-dropdown-hover:   #f8f9fc;
  --sb-table-bg:         #ffffff;
  --sb-table-stripe:     #f8f9fc;
  --sb-table-border:     #e3e6f0;
  --sb-table-head-bg:    #f8f9fc;
  --sb-table-head-text:  #858796;
  --sb-footer-bg:        #ffffff;
  --sb-footer-border:    #e3e6f0;
  --sb-footer-text:      #858796;
  --sb-modal-bg:         #ffffff;
  --sb-modal-header-bg:  #f8f9fc;
  --sb-modal-border:     #e3e6f0;
  --sb-scroll-btn-bg:    #4e73df;
  --sb-hr-color:         rgba(255,255,255,.15);  /* sidebar divider on blue */

  /* Sidebar – keep existing gradient-primary in light mode */
  --sb-sidebar-bg1:      #4e73df;
  --sb-sidebar-bg2:      #224abe;
  --sb-sidebar-brand-bg: rgba(0,0,0,.1);
  --sb-sidebar-heading:  rgba(255,255,255,.4);
  --sb-sidebar-link:     rgba(255,255,255,.8);
  --sb-sidebar-link-hover: #ffffff;
  --sb-sidebar-active-bg: rgba(255,255,255,.2);
  --sb-sidebar-icon:     rgba(255,255,255,.3);
  --sb-collapse-bg:      #ffffff;
  --sb-collapse-item-text:#3a3b45;
  --sb-collapse-item-hover:#4e73df;
  --sb-collapse-header:  #b7b9cc;
  --sb-toggler-bg:       rgba(255,255,255,.2);
  --sb-toggler-arrow:    rgba(255,255,255,.5);
}

/* ── Dark Theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --sb-body-bg:          #12131a;
  --sb-content-bg:       #12131a;
  --sb-topbar-bg:        #1c1e2b;
  --sb-topbar-border:    #2a2d3e;
  --sb-topbar-text:      #a0a4bd;
  --sb-card-bg:          #1e2130;
  --sb-card-border:      #2a2d3e;
  --sb-card-header-bg:   #252838;
  --sb-card-shadow:      0 .15rem 1.75rem 0 rgba(0,0,0,.4);
  --sb-text-primary:     #d1d3e2;
  --sb-text-secondary:   #a0a4bd;
  --sb-text-muted:       #5a5f7a;
  --sb-heading-color:    #7b96f8;
  --sb-input-bg:         #252838;
  --sb-input-border:     #3a3d52;
  --sb-input-text:       #d1d3e2;
  --sb-dropdown-bg:      #1e2130;
  --sb-dropdown-border:  rgba(0,0,0,.4);
  --sb-dropdown-text:    #d1d3e2;
  --sb-dropdown-hover:   #252838;
  --sb-table-bg:         #1e2130;
  --sb-table-stripe:     #252838;
  --sb-table-border:     #2a2d3e;
  --sb-table-head-bg:    #252838;
  --sb-table-head-text:  #a0a4bd;
  --sb-footer-bg:        #1c1e2b;
  --sb-footer-border:    #2a2d3e;
  --sb-footer-text:      #5a5f7a;
  --sb-modal-bg:         #1e2130;
  --sb-modal-header-bg:  #252838;
  --sb-modal-border:     #2a2d3e;
  --sb-scroll-btn-bg:    #7b96f8;
  --sb-hr-color:         rgba(255,255,255,.08);

  /* Sidebar – dark navy with accent */
  --sb-sidebar-bg1:      #1a1d2e;
  --sb-sidebar-bg2:      #13152050;
  --sb-sidebar-brand-bg: rgba(0,0,0,.25);
  --sb-sidebar-heading:  rgba(255,255,255,.25);
  --sb-sidebar-link:     rgba(255,255,255,.65);
  --sb-sidebar-link-hover: #ffffff;
  --sb-sidebar-active-bg: rgba(255,255,255,.12);
  --sb-sidebar-icon:     rgba(255,255,255,.2);
  --sb-collapse-bg:      #252838;
  --sb-collapse-item-text:#c5c8de;
  --sb-collapse-item-hover:#7b96f8;
  --sb-collapse-header:  #5a5f7a;
  --sb-toggler-bg:       rgba(255,255,255,.1);
  --sb-toggler-arrow:    rgba(255,255,255,.3);
}

/* ============================================================
   Global overrides using CSS variables
   ============================================================ */

/* Body & page background */
body {
  background-color: var(--sb-body-bg) !important;
  color: var(--sb-text-primary) !important;
}

/* ── Content wrapper ──────────────────────────────────── */
#content-wrapper {
  background-color: var(--sb-content-bg) !important;
}

/* ── Topbar ───────────────────────────────────────────── */
.topbar.navbar {
  background-color: var(--sb-topbar-bg) !important;
  border-bottom: 1px solid var(--sb-topbar-border) !important;
}
.topbar .nav-link,
.topbar .text-gray-600 {
  color: var(--sb-topbar-text) !important;
}
.topbar .topbar-divider {
  border-right-color: var(--sb-topbar-border) !important;
}

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar.sidebar-dark {
  background: linear-gradient(180deg, var(--sb-sidebar-bg1) 10%, var(--sb-sidebar-bg2) 100%) !important;
}
.sidebar-brand {
  background-color: var(--sb-sidebar-brand-bg) !important;
}
.sidebar-heading {
  color: var(--sb-sidebar-heading) !important;
}
.sidebar .nav-item .nav-link {
  color: var(--sb-sidebar-link) !important;
}
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
  color: var(--sb-sidebar-link-hover) !important;
}
.sidebar .nav-item.active .nav-link {
  background-color: var(--sb-sidebar-active-bg) !important;
}
.sidebar .nav-item .nav-link i {
  color: var(--sb-sidebar-icon) !important;
}
.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item.active .nav-link i {
  color: var(--sb-sidebar-link-hover) !important;
}
.sidebar hr.sidebar-divider {
  border-top-color: var(--sb-hr-color) !important;
}
#sidebarToggle {
  background-color: var(--sb-toggler-bg) !important;
}
#sidebarToggle::after {
  color: var(--sb-toggler-arrow) !important;
}

/* Sidebar collapse inner (submenu) */
.collapse-inner {
  background-color: var(--sb-collapse-bg) !important;
  border: 1px solid var(--sb-card-border) !important;
}
.collapse-inner .collapse-item {
  color: var(--sb-collapse-item-text) !important;
}
.collapse-inner .collapse-item:hover,
.collapse-inner .collapse-item:focus {
  background-color: var(--sb-input-bg) !important;
  color: var(--sb-collapse-item-hover) !important;
}
.collapse-inner .collapse-header {
  color: var(--sb-collapse-header) !important;
}
.collapse-inner.rounded {
  box-shadow: var(--sb-card-shadow) !important;
}

/* ── Cards ────────────────────────────────────────────── */
.card {
  background-color: var(--sb-card-bg) !important;
  border-color: var(--sb-card-border) !important;
  box-shadow: var(--sb-card-shadow) !important;
}
.card-header {
  background-color: var(--sb-card-header-bg) !important;
  border-bottom-color: var(--sb-card-border) !important;
  color: var(--sb-text-primary) !important;
}
.card-body {
  color: var(--sb-text-primary) !important;
}
.card .card-title,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: var(--sb-text-primary) !important;
}

/* ── Tables ───────────────────────────────────────────── */
.table {
  color: var(--sb-text-primary) !important;
  background-color: var(--sb-table-bg) !important;
}
.table thead th {
  background-color: var(--sb-table-head-bg) !important;
  color: var(--sb-table-head-text) !important;
  border-bottom-color: var(--sb-table-border) !important;
  border-top-color: var(--sb-table-border) !important;
}
.table td, .table th {
  border-top-color: var(--sb-table-border) !important;
}
.table-bordered td, .table-bordered th {
  border-color: var(--sb-table-border) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--sb-table-stripe) !important;
}
.table-hover tbody tr:hover {
  background-color: var(--sb-input-bg) !important;
  color: var(--sb-text-primary) !important;
}
.table-responsive {
  background-color: var(--sb-table-bg) !important;
}

/* ── Forms & Inputs ───────────────────────────────────── */
.form-control,
.form-control:focus {
  background-color: var(--sb-input-bg) !important;
  border-color: var(--sb-input-border) !important;
  color: var(--sb-input-text) !important;
}
.form-control::placeholder {
  color: var(--sb-text-muted) !important;
}
.input-group-text {
  background-color: var(--sb-card-header-bg) !important;
  border-color: var(--sb-input-border) !important;
  color: var(--sb-text-secondary) !important;
}
.form-check-label {
  color: var(--sb-text-primary) !important;
}
label {
  color: var(--sb-text-secondary) !important;
}
select.form-control option {
  background-color: var(--sb-input-bg) !important;
  color: var(--sb-input-text) !important;
}

/* ── Dropdowns ────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--sb-dropdown-bg) !important;
  border-color: var(--sb-dropdown-border) !important;
  box-shadow: var(--sb-card-shadow) !important;
}
.dropdown-item {
  color: var(--sb-dropdown-text) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--sb-dropdown-hover) !important;
  color: var(--sb-heading-color) !important;
}
.dropdown-divider {
  border-top-color: var(--sb-card-border) !important;
}
.dropdown-header {
  color: var(--sb-text-muted) !important;
}

/* Topbar dropdown list (bell / user) */
.dropdown-list.dropdown-menu {
  background-color: var(--sb-dropdown-bg) !important;
}
.dropdown-list .dropdown-header {
  background: linear-gradient(180deg, var(--sb-sidebar-bg1), var(--sb-sidebar-bg2)) !important;
}
.dropdown-list .dropdown-item {
  border-bottom-color: var(--sb-card-border) !important;
}
.dropdown-list .dropdown-item .text-gray-500 {
  color: var(--sb-text-secondary) !important;
}

/* ── Modals ───────────────────────────────────────────── */
.modal-content {
  background-color: var(--sb-modal-bg) !important;
  border-color: var(--sb-modal-border) !important;
}
.modal-header {
  background-color: var(--sb-modal-header-bg) !important;
  border-bottom-color: var(--sb-modal-border) !important;
}
.modal-footer {
  background-color: var(--sb-modal-header-bg) !important;
  border-top-color: var(--sb-modal-border) !important;
}
.modal-title, .modal-body {
  color: var(--sb-text-primary) !important;
}
.modal .close {
  color: var(--sb-text-primary) !important;
}

/* ── Footer ───────────────────────────────────────────── */
footer.sticky-footer {
  background-color: var(--sb-footer-bg) !important;
  border-top: 1px solid var(--sb-footer-border) !important;
}
footer.sticky-footer .copyright {
  color: var(--sb-footer-text) !important;
}

/* ── Headings & text utilities ────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--sb-text-primary) !important;
}
.text-gray-800, .text-dark {
  color: var(--sb-text-primary) !important;
}
.text-gray-600 {
  color: var(--sb-text-secondary) !important;
}
.text-gray-500 {
  color: var(--sb-text-muted) !important;
}
small, .small {
  color: var(--sb-text-secondary) !important;
}

/* ── HR dividers ──────────────────────────────────────── */
hr:not(.sidebar-divider) {
  border-top-color: var(--sb-card-border) !important;
}

/* ── Scroll-to-top button ─────────────────────────────── */
.scroll-to-top {
  background-color: var(--sb-scroll-btn-bg) !important;
}

/* ── Alerts ───────────────────────────────────────────── */
[data-theme="dark"] .alert-info    { background-color:#1a3045; border-color:#1e4a6e; color:#7ec8e3; }
[data-theme="dark"] .alert-success { background-color:#0d2b1e; border-color:#155724; color:#6fcf97; }
[data-theme="dark"] .alert-warning { background-color:#2d2200; border-color:#856404; color:#f6c23e; }
[data-theme="dark"] .alert-danger  { background-color:#2d0d0d; border-color:#721c24; color:#f88; }

/* ── DataTables ───────────────────────────────────────── */
[data-theme="dark"] table.dataTable thead .sorting:before,
[data-theme="dark"] table.dataTable thead .sorting_asc:before,
[data-theme="dark"] table.dataTable thead .sorting_desc:before { opacity: .4; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--sb-heading-color) !important;
  color: #fff !important;
  border-color: var(--sb-heading-color) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label {
  color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--sb-input-bg) !important;
  border-color: var(--sb-input-border) !important;
  color: var(--sb-input-text) !important;
}

/* ── Select2 ──────────────────────────────────────────── */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--sb-input-bg) !important;
  border-color: var(--sb-input-border) !important;
  color: var(--sb-input-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sb-input-text) !important;
}
[data-theme="dark"] .select2-dropdown {
  background-color: var(--sb-dropdown-bg) !important;
  border-color: var(--sb-input-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--sb-dropdown-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
  background-color: var(--sb-heading-color) !important;
  color: #fff !important;
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--sb-input-bg) !important;
  border-color: var(--sb-input-border) !important;
  color: var(--sb-input-text) !important;
}

/* ── Toast ────────────────────────────────────────────── */
[data-theme="dark"] #reg-toast {
  background: var(--sb-card-bg) !important;
}
[data-theme="dark"] #reg-toast .toast-body {
  color: var(--sb-text-primary) !important;
}

/* ── Theme toggle button ──────────────────────────────── */
#theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .375rem .5rem;
  border-radius: 50%;
  transition: background .2s;
  color: var(--sb-topbar-text);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
#theme-toggle-btn:hover {
  background: var(--sb-input-bg) !important;
  color: var(--sb-heading-color) !important;
}
#theme-toggle-btn .icon-sun  { display: none; }
#theme-toggle-btn .icon-moon { display: inline; }
[data-theme="dark"] #theme-toggle-btn .icon-sun  { display: inline; }
[data-theme="dark"] #theme-toggle-btn .icon-moon { display: none; }

/* ── bg-white utility overrides ───────────────────────── */
[data-theme="dark"] .bg-white {
  background-color: var(--sb-card-bg) !important;
}
[data-theme="dark"] .border-bottom-primary,
[data-theme="dark"] .border-left-primary {
  border-color: var(--sb-heading-color) !important;
}

/* ── Breadcrumb ───────────────────────────────────────── */
[data-theme="dark"] .breadcrumb {
  background-color: var(--sb-card-header-bg) !important;
}
[data-theme="dark"] .breadcrumb-item, 
[data-theme="dark"] .breadcrumb-item.active {
  color: var(--sb-text-secondary) !important;
}

/* ── Badges ───────────────────────────────────────────── */
[data-theme="dark"] .badge-light {
  background-color: var(--sb-card-header-bg) !important;
  color: var(--sb-text-primary) !important;
}

/* ── Smooth transitions ───────────────────────────────── */
body,
#content-wrapper,
.card, .card-header, .card-body,
.topbar.navbar,
.sidebar.sidebar-dark,
.dropdown-menu,
.modal-content,
.form-control,
.table,
footer.sticky-footer {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}