/* ═══════════════════════════════════════════════════════════
   MAVLOG — Dark Theme
   Bootstrap dark base: --bs-dark-rgb: 33, 37, 41  (#212529)
   ═══════════════════════════════════════════════════════════ */

:root {
  --bs-dark-rgb: 33, 37, 41;
  --bs-bg-opacity: 1;

  --dt-bg:          #212529;   /* page / primary surfaces */
  --dt-bg2:         #2b2f33;   /* elevated surfaces, cards */
  --dt-bg3:         #343a40;   /* inputs, hover, alternating rows */
  --dt-border:      #495057;
  --dt-text:        #f8f9fa;
  --dt-text2:       #dee2e6;
  --dt-text-muted:  #adb5bd;
  --dt-text-faint:  #6c757d;
}

/* ── Global body / html ── */
html, body {
  background-color: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

/* ── Login screen ── */
#divScreen1 {
  background: transparent !important;
}

/* Override the yellow gradient from index_login.css — restore photo bg */
body.bg {
  background-image: url("../images/Login_background_image.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

.login-card {
  background: var(--dt-bg2) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65) !important;
}

.login-card-body {
  background: var(--dt-bg2) !important;
}

.login-field-label {
  color: var(--dt-text-muted) !important;
}

.login-select {
  background: var(--dt-bg3) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.login-select:focus {
  background: var(--dt-bg3) !important;
  border-color: #009B3A !important;
}

.login-bandwidth-row {
  background: var(--dt-bg3) !important;
  border-color: var(--dt-border) !important;
}

.login-bandwidth-row label {
  color: var(--dt-text2) !important;
}

.login-card-footer {
  background: var(--dt-bg2) !important;
  border-top-color: var(--dt-border) !important;
}

.login-card-footer span {
  color: var(--dt-text-muted) !important;
}

/* ── divScreen2 container ── */
#divScreen2,
#divScreen2 body,
#divScreen2 html {
  background: var(--dt-bg) !important;
}

/* ── Top navbar ── */
nav.navbar.fixed-top {
  background: var(--dt-bg) !important;
  border-bottom-color: var(--dt-border) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
}

/* Map mode radio group pill */
nav.navbar.fixed-top radiogroup {
  background: var(--dt-bg3) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

nav.navbar.fixed-top radiogroup label {
  color: var(--dt-text2) !important;
}

/* Topbar icon buttons */
.topbar-icon-btn {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text2) !important;
}

.topbar-icon-btn:hover {
  background: var(--dt-bg3) !important;
  border-color: var(--dt-text-muted) !important;
  color: var(--dt-text) !important;
}

.topbar-icon-btn::after {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* User avatars */
#userAvatar,
#profileAvatar {
  background: var(--dt-bg3) !important;
  color: var(--dt-text2) !important;
}

/* Profile separator line */
#profileWrap {
  border-left-color: var(--dt-border) !important;
}

/* Profile dropdown card */
.profile-card {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55) !important;
}

#profileName {
  color: var(--dt-text) !important;
}

#profileEmail {
  color: var(--dt-text-muted) !important;
}

.profile-detail-row {
  color: var(--dt-text2) !important;
}

.profile-detail-row:hover {
  background: var(--dt-bg3) !important;
}

.profile-row-label {
  color: var(--dt-text-muted) !important;
}

.profile-row-label span {
  color: var(--dt-text-faint) !important;
}

.profile-row-value {
  color: var(--dt-text2) !important;
}

/* ── Bottom navbar ── */
nav.navbar.fixed-bottom {
  background: var(--dt-bg) !important;
  border-top-color: var(--dt-border) !important;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.45) !important;
}

nav.navbar.fixed-bottom .footer-pill-btn {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text2) !important;
  text-shadow: none !important;
}

nav.navbar.fixed-bottom .footer-pill-btn:hover,
nav.navbar.fixed-bottom .footer-pill-btn:focus {
  background: var(--dt-bg3) !important;
  border-color: var(--dt-text-muted) !important;
  color: var(--dt-text) !important;
}

nav.navbar.fixed-bottom .footer-pill-select {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
}

nav.navbar.fixed-bottom .footer-pill-select label {
  color: var(--dt-text2) !important;
}

nav.navbar.fixed-bottom #ZoomSelectPOI {
  background: var(--dt-bg2) !important;
  color: var(--dt-text) !important;
}

#btnInfo {
  color: var(--dt-text-muted) !important;
}

#fnClock {
  color: #99cc00 !important;
}

/* ── Left sidebar ── */
.sidebar.left,
#myLeftSideNav {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5) !important;
}

/* ── Vessel info card ── */
#frmVesselEventLog {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

.vi-tabs {
  background: var(--dt-bg2) !important;
  border-bottom-color: var(--dt-border) !important;
}

.vi-tabs .vi-tab {
  color: var(--dt-text-muted) !important;
  background: none !important;
  border: none !important;
}

.vi-tabs .vi-tab:hover {
  color: #4db6c8 !important;
}

.vi-tabs .vi-tab.active {
  color: #4db6c8 !important;
  border-bottom: 2px solid #4db6c8 !important;
  background: none !important;
}

#frmVesselEventLog .vi-panel,
#frmVesselEventLog .vi-panel.active {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

.vi-section-lbl {
  background: var(--dt-bg2) !important;
  color: var(--dt-text-muted) !important;
  border-top-color: var(--dt-border) !important;
}

.vi-info-row {
  border-bottom-color: var(--dt-bg2) !important;
}

.vi-info-key {
  color: var(--dt-text2) !important;
}

.vi-info-val {
  color: var(--dt-text) !important;
}

.vi-info-muted {
  color: var(--dt-text-faint) !important;
}

.vi-zone-note {
  color: var(--dt-text-muted) !important;
}

.vi-pills-row {
  background: var(--dt-bg) !important;
}

.vi-footer-ts {
  background: var(--dt-bg2) !important;
  color: var(--dt-text-muted) !important;
  border-top-color: var(--dt-border) !important;
}

.vi-events-empty {
  background: var(--dt-bg) !important;
  color: var(--dt-text-muted) !important;
}

.vi-tracker-body,
.vi-notes-body {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

.vi-tracker-vesselname {
  color: #4db6c8 !important;
}

.vi-form-lbl {
  color: var(--dt-text-muted) !important;
}

.vi-select {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.vi-select:focus {
  outline-color: #4db6c8 !important;
}

.vi-select-icon {
  color: var(--dt-text-muted) !important;
}

.vi-speed-op,
.vi-speed-num {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.vi-speed-unit {
  color: var(--dt-text2) !important;
}

.vi-extra-row {
  color: var(--dt-text2) !important;
}

.vi-btn-dark {
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
}

.vi-btn-dark:hover {
  background: #1f2937 !important;
}

.vi-btn-outline-danger {
  background: var(--dt-bg2) !important;
  color: #f87171 !important;
  border-color: #f87171 !important;
}

.vi-btn-outline-danger:hover {
  background: #2d1f1f !important;
}

.vi-notes-ta {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.vi-notes-updated {
  color: var(--dt-text-faint) !important;
}

/* ── XY Coord bar ── */
#xyCoordBar {
  background: rgba(33, 37, 41, 0.97) !important;
  border-color: var(--dt-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

#xyCoordBar select {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text2) !important;
}

#xyCoordValue {
  color: var(--dt-text2) !important;
}

#xyCoordChevron {
  color: var(--dt-text-muted) !important;
}

/* ── ETA Calculator ── */
#ETACalculatorInfo {
  background-color: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
}

/* ── ArcGIS map controls (top-left) ── */
.esri-ui-top-left button,
.esri-ui-top-left .esri-widget--button,
.esri-ui-top-left .esri-expand__button,
.esri-ui-top-left calcite-button,
.esri-ui-top-left button.esri-widget--button,
.esri-ui-top-left button.esri-expand__button {
  background-color: var(--dt-bg2) !important;
  background: var(--dt-bg2) !important;
  background-image: none !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

/* Hide expand content containers by default */
.esri-ui-top-left .esri-expand__container,
.esri-ui-top-left .esri-expand__content {
  display: none !important;
  visibility: hidden !important;
}

/* Show when the expand is open */
.esri-ui-top-left .esri-expand--expanded .esri-expand__content,
.esri-ui-top-left .esri-expand--expanded .esri-expand__container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Center all children inside expand buttons */
.esri-ui-top-left .esri-expand__button > *,
.esri-ui-top-left .esri-expand__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.esri-ui-top-left .esri-widget--button:hover,
.esri-ui-top-left .esri-expand__button:hover,
.esri-ui-top-left button.esri-widget--button:hover,
.esri-ui-top-left button.esri-expand__button:hover {
  background-color: var(--dt-bg3) !important;
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
}

.esri-ui-top-left .esri-widget--button .esri-icon,
.esri-ui-top-left .esri-expand__button .esri-icon,
.esri-ui-top-left button.esri-widget--button .esri-icon,
.esri-ui-top-left button.esri-expand__button .esri-icon,
.esri-ui-top-left .esri-icon,
.esri-ui-top-left .esri-icon-font {
  color: var(--dt-text2) !important;
}

/* ── ArcGIS scale bar ── */
.esri-scale-bar {
  background-color: rgba(33, 37, 41, 0.92) !important;
  box-shadow: 0 0 10px 3px #fff, 0 2px 14px 4px rgba(255,255,255,0.55) !important;
  border-radius: 4px !important;
}

.esri-scale-bar__label,
.esri-scale-bar__line--top .esri-scale-bar__label,
.esri-scale-bar__line--bottom .esri-scale-bar__label {
  color: var(--dt-text) !important;
}

.esri-scale-bar__bar-container {
  background-color: transparent !important;
}

.esri-scale-bar__line--top,
.esri-scale-bar__line--bottom {
  border-color: var(--dt-text) !important;
}

/* ── ArcGIS popup ── */
#viewDiv .esri-popup,
#viewDiv .esri-popup__main-container,
#viewDiv .esri-popup__header-container,
#viewDiv .esri-popup__content,
#viewDiv .esri-popup__footer,
#viewDiv .esri-popup__button,
#viewDiv .esri-popup__feature-navigation {
  background-color: var(--dt-bg2) !important;
  color: var(--dt-text) !important;
}

#viewDiv .esri-popup__main-container {
  border-color: var(--dt-border) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
}

/* ── Weather dialog ── */
.weather-dialog.ui-dialog,
.weather-dialog .ui-dialog-content,
.weather-dialog .ui-widget-content {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

/* Smart tab – weather panel tabs */
#smarttab .nav {
  background: var(--dt-bg2) !important;
  border-bottom-color: var(--dt-border) !important;
}

#smarttab .nav li .nav-link {
  color: var(--dt-text-muted) !important;
  background: transparent !important;
}

#smarttab .nav li .nav-link.active,
#smarttab .nav li.active .nav-link,
#smarttab .nav li .nav-link:hover {
  color: #4caf50 !important;
  border-bottom-color: #4caf50 !important;
  background: transparent !important;
}

/* Weather metric cards */
.wx-card {
  background: var(--dt-bg2) !important;
  border-bottom-color: #2e7d32 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

.wx-card-label {
  color: var(--dt-text-muted) !important;
}

.wx-card-value {
  color: var(--dt-text) !important;
}

/* Tabulator weather tables */
#Hourly-table .tabulator-header,
#Daily-table .tabulator-header {
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
}

/* ── Contact dialog ── */
.contact-dialog.ui-dialog,
.contact-dialog .ui-dialog-content,
.contact-dialog .ui-widget-content {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

/* ── Fleet / POI Manager dialog ── */
.fleet-dialog.ui-dialog,
.fleet-dialog .ui-widget-content {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

.fleet-dialog .ui-dialog-content {
  background: var(--dt-bg) !important;
}

.fleet-dialog .ui-dialog-buttonpane {
  background: var(--dt-bg2) !important;
  border-top-color: var(--dt-border) !important;
}

/* Fleet / POI tables */
#tblFleets1 .tabulator-tableholder,
#tblFleets1 .tabulator,
#tblPOI .tabulator-tableholder,
#tblPOI .tabulator {
  background: var(--dt-bg) !important;
}

#tblFleets1 .tabulator-row.tabulator-row-even,
#tblPOI .tabulator-row.tabulator-row-even {
  background: var(--dt-bg2) !important;
  color: var(--dt-text) !important;
}

#tblFleets1 .tabulator-row.tabulator-row-odd,
#tblPOI .tabulator-row.tabulator-row-odd {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

#tblFleets1 .tabulator-row.tabulator-selected,
#tblPOI .tabulator-row.tabulator-selected {
  background: #1b5e20 !important;
  color: #fff !important;
}

#tblFleets1 .tabulator-row:hover:not(.tabulator-selected),
#tblPOI .tabulator-row:hover:not(.tabulator-selected) {
  background: var(--dt-bg3) !important;
  cursor: pointer;
}

#tblFleetSelectFleetsTop .tabulator,
#tblFleetSelectFleetsTop .tabulator-tableholder,
#tblFleetSelectFleetsBottom .tabulator,
#tblFleetSelectFleetsBottom .tabulator-tableholder,
#tblPOISelectPOIsTop .tabulator,
#tblPOISelectPOIsTop .tabulator-tableholder,
#tblPOISelectPOIsBottom .tabulator,
#tblPOISelectPOIsBottom .tabulator-tableholder {
  background: var(--dt-bg) !important;
}

#tblFleetSelectFleetsTop .tabulator-row,
#tblFleetSelectFleetsBottom .tabulator-row,
#tblPOISelectPOIsTop .tabulator-row,
#tblPOISelectPOIsBottom .tabulator-row {
  color: var(--dt-text) !important;
}

#tblFleetSelectFleetsTop .tabulator-row.tabulator-row-even,
#tblFleetSelectFleetsBottom .tabulator-row.tabulator-row-even,
#tblPOISelectPOIsTop .tabulator-row.tabulator-row-even,
#tblPOISelectPOIsBottom .tabulator-row.tabulator-row-even {
  background: var(--dt-bg2) !important;
}

#tblFleetSelectFleetsTop .tabulator-row.tabulator-row-odd,
#tblFleetSelectFleetsBottom .tabulator-row.tabulator-row-odd,
#tblPOISelectPOIsTop .tabulator-row.tabulator-row-odd,
#tblPOISelectPOIsBottom .tabulator-row.tabulator-row-odd {
  background: var(--dt-bg) !important;
}

#tblFleetSelectFleetsTop .tabulator-row.tabulator-selected,
#tblFleetSelectFleetsBottom .tabulator-row.tabulator-selected,
#tblPOISelectPOIsTop .tabulator-row.tabulator-selected,
#tblPOISelectPOIsBottom .tabulator-row.tabulator-selected {
  background: #1b5e20 !important;
  color: #fff !important;
}

#tblFleetSelectFleetsTop .tabulator-row:hover:not(.tabulator-selected),
#tblFleetSelectFleetsBottom .tabulator-row:hover:not(.tabulator-selected),
#tblPOISelectPOIsTop .tabulator-row:hover:not(.tabulator-selected),
#tblPOISelectPOIsBottom .tabulator-row:hover:not(.tabulator-selected) {
  background: var(--dt-bg3) !important;
  cursor: pointer;
}

/* ── Fleet edit sub-dialog ── */
.fleet-edit-dialog.ui-dialog {
  background: var(--dt-bg) !important;
}

.fleet-edit-dialog .ui-dialog-content {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

.fleet-edit-dialog .ui-dialog-buttonpane {
  background: var(--dt-bg2) !important;
  border-top-color: var(--dt-border) !important;
}

.fleet-edit-dialog .input-group-text {
  color: var(--dt-text-muted) !important;
  background: transparent !important;
}

.fleet-edit-dialog .form-control,
.fleet-edit-dialog select {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.fleet-edit-dialog .form-control:focus,
.fleet-edit-dialog .form-control:active,
.fleet-edit-dialog select:focus,
.fleet-edit-dialog select:active {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
  box-shadow: none !important;
}

/* ── Map click popup cards ── */
.mvl-vessel-popup {
  background: var(--dt-bg2) !important;
}

.mvl-vessel-popup-section-lbl {
  background: var(--dt-bg3) !important;
  color: var(--dt-text-muted) !important;
}

.mvl-vessel-popup-nav-pills {
  background: var(--dt-bg3) !important;
}

.mvl-vessel-popup-info-row {
  background: var(--dt-bg2) !important;
  color: var(--dt-text2) !important;
}

.mvl-vessel-popup-info-muted {
  color: var(--dt-text-faint) !important;
}

.mvl-vessel-popup-footer-ts {
  background: var(--dt-bg3) !important;
  color: var(--dt-text-muted) !important;
  border-top-color: var(--dt-border) !important;
}

.mvl-poi-popup {
  background: var(--dt-bg2) !important;
}

.mvl-poi-popup-row {
  background: var(--dt-bg2) !important;
  color: var(--dt-text2) !important;
  border-bottom-color: var(--dt-bg3) !important;
}

/* ── Bootstrap form controls (generic) ── */
.form-control,
.form-select,
select.custom-select,
select {
  background-color: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--dt-bg2) !important;
  color: var(--dt-text) !important;
  border-color: #009B3A !important;
  box-shadow: 0 0 0 3px rgba(0, 155, 58, 0.2) !important;
}

.input-group-text {
  background-color: #1a5f6e !important;
  border-color: var(--dt-border) !important;
  color: #ffffff !important;
}

#dialogModalAccountsAddUpdateUser .input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

/* ── Accounts dialog: close button hover/focus reset (icon injected via JS) ── */
#ui-dialog-title-dialogModalAccountsAddUpdateUser ~ .ui-dialog-titlebar-close:hover,
#ui-dialog-title-dialogModalAccountsAddUpdateUser ~ .ui-dialog-titlebar-close:focus,
#ui-dialog-title-dialogModalAccountsAddUpdateUser ~ .ui-dialog-titlebar-close:active,
#ui-dialog-title-dialogModalRolesNewUpdate ~ .ui-dialog-titlebar-close:hover,
#ui-dialog-title-dialogModalRolesNewUpdate ~ .ui-dialog-titlebar-close:focus,
#ui-dialog-title-dialogModalRolesNewUpdate ~ .ui-dialog-titlebar-close:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ── Roles dialog: transparent labels, no border ── */
#dialogModalRolesNewUpdate .input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

/* ── jQuery UI dialog global dark overrides ── */
.ui-dialog {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

.ui-widget-content {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

.ui-widget-header {
  color: var(--dt-text) !important;
}

.ui-dialog-buttonpane {
  background: var(--dt-bg2) !important;
  border-top-color: var(--dt-border) !important;
}

/* ── Tabulator global ── */
.tabulator {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

.tabulator-header {
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
  border-bottom-color: var(--dt-border) !important;
}

.tabulator-col,
.tabulator-col-title {
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

.tabulator-tableholder {
  background: var(--dt-bg) !important;
}

.tabulator-row {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
  border-bottom-color: var(--dt-bg2) !important;
}

.tabulator-row.tabulator-row-even {
  background: var(--dt-bg2) !important;
}

.tabulator-row:hover:not(.tabulator-selected) {
  background: var(--dt-bg3) !important;
}

.tabulator-cell {
  border-right-color: var(--dt-bg2) !important;
}

.tabulator-footer {
  background: var(--dt-bg2) !important;
  color: var(--dt-text-muted) !important;
  border-top-color: var(--dt-border) !important;
}

.tabulator-page {
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

.tabulator-page.active {
  background: #1b5e20 !important;
  color: #fff !important;
}

/* ── jQuery UI autocomplete ── */
.ui-autocomplete {
  background: var(--dt-bg2) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-state-focus,
.ui-autocomplete .ui-state-active {
  background: var(--dt-bg3) !important;
  color: var(--dt-text) !important;
  border-color: transparent !important;
}

/* ── SweetAlert2 inputs (login/confirm dialogs) ── */
.swal2-popup {
  background: var(--dt-bg2) !important;
  color: var(--dt-text) !important;
}

.swal2-title {
  color: var(--dt-text) !important;
}

.swal2-html-container {
  color: var(--dt-text2) !important;
}

.swal2-input,
.swal2-select,
.swal2-textarea {
  background: var(--dt-bg3) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

/* ── Scrollbars (Webkit) ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--dt-bg2);
}

::-webkit-scrollbar-thumb {
  background: var(--dt-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dt-text-faint);
}