/* ===========================================================================
   Liquid Charts Pro — branded canvas
   The app is anchored to WowDash's dark theme, remapped to a #141218 near-black
   palette. Loaded after style.min.css.
   Layer hierarchy (dark -> light):
     header/sidebar #0e0d12  <  canvas #141218  <  cards #1e1b25  <  inputs #26222f
   =========================================================================== */

/* Remap the dark-theme background tokens WowDash maps its surfaces to:
   --bg-color:var(--dark-1)  --white:var(--dark-2)  --input-bg:var(--dark-3) */
[data-theme="dark"] {
  --dark-1: #141218;   /* page canvas */
  --dark-2: #1e1b25;   /* cards / panels / dropdowns / modals (elevated) */
  --dark-3: #26222f;   /* inputs */
}

/* --- Canvas ---------------------------------------------------------------- */
html[data-theme="dark"] body,
[data-theme="dark"] .dashboard-main,
[data-theme="dark"] .dashboard-main-body {
  background-color: #141218 !important;
}

/* --- Chrome: darker than the canvas --------------------------------------- */
[data-theme="dark"] .sidebar {
  background-color: #0e0d12 !important;
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
}
[data-theme="dark"] .navbar-header {
  background-color: #0e0d12 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
[data-theme="dark"] .d-footer {
  background-color: #0e0d12 !important;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* --- Panels (elevated above the canvas) ----------------------------------- */
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .list-group-item {
  background-color: #1e1b25 !important;
}
[data-theme="dark"] .card-header {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
  border-color: rgba(255, 255, 255, .08) !important;
}

/* --- Auth pages (login / register) --------------------------------------- */
/* .bg-base and .bg-neutral-50 stay light in the stock dark theme; fix them. */
[data-theme="dark"] .bg-base { background-color: #141218 !important; }
[data-theme="dark"] .auth .card { background-color: #1e1b25 !important; }

/* --- Form controls -------------------------------------------------------- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .bg-neutral-50 {
  background-color: #26222f !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
[data-theme="dark"] .form-control::placeholder { color: #9ea3ad !important; }

/* --- Readable light text on every dark surface --------------------------- */
/* WowDash's dark theme leaves --bs-body-color / --bs-table-color at their
   default dark values, so plain body & table text renders near-black. Remap
   them to a light grey. Accent utilities (text-*-main / text-*-600) keep their
   colour because Bootstrap marks those !important. */
[data-theme="dark"] {
  --bs-body-color: #e5e7eb;
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: #f3f4f6;
}
html[data-theme="dark"] body { color: #e5e7eb; }
[data-theme="dark"] .text-black { color: #e5e7eb !important; }

/* Tables: light default cell text (accent-coloured cells still win) */
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e5e7eb;
  --bs-table-color-state: #e5e7eb;
  --bs-table-color-type: #e5e7eb;
  color: #e5e7eb;
}
[data-theme="dark"] .table > thead th,
[data-theme="dark"] .table > thead td { color: #c3c8d0; }

/* --- Logo plate: soften the baked background of the wordmark ------------- */
.sidebar-logo img { border-radius: 8px; }

/* --- Numbering wizard (sign-up + crypto card) ---------------------------- */
/* Remove the connector lines/dashes between steps, shrink the numbered
   circles, and centre the steps. */
.form-wizard-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem;
}
.form-wizard-list__item { width: auto; }
.form-wizard-list__line::before,
.form-wizard-list__line::after {
  display: none !important;
  content: none !important;
}
.form-wizard-list .count {
  height: 30px;
  width: 30px;
  line-height: 28px;
  font-size: 13px;
  border-width: 1.5px;
}

/* --- Sign-up ID image preview -------------------------------------------- */
#idPreviewImg { max-height: 220px; }

/* --- Toast notifications (top-right, auto-dismiss) ----------------------- */
.lc-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: auto;
  max-width: 360px;
  pointer-events: none;
}
.lc-toast-stack .lc-toast {
  margin: 0;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 575.98px) {
  .lc-toast-stack {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* --- Persistent status banners: keep icon fixed, let text wrap ----------- */
.alert.d-flex > iconify-icon { flex-shrink: 0; }

/* --- Initial-letter user avatar (dark blue gradient) --------------------- */
.lc-avatar {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #0b1e4d 100%);
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}