/* Modern Glassmorphism Theme (Modern Aurora Style) */

:root {
  color-scheme: dark; /* Force native controls to dark mode */
  --bg-dark: #020617; /* Rich Slate Base */
  --bg-panel: rgba(255, 255, 255, 0.03); /* Translucent Glass */
  --bg-input: rgba(255, 255, 255, 0.07); /* Lighter Translucent */
  --text-main: #ffffff; /* Pure White */
  --text-muted: #94a3b8; /* Slate 400 */
  --border-color: rgba(255, 255, 255, 0.1); /* Glass Border */

  /* New Semantic Palette */
  --color-up: #ef5350;
  --color-up-bg: rgba(239, 83, 80, 0.1);
  --color-up-dark: #7f1d1d;

  --color-down: #26a69a;
  --color-down-bg: rgba(38, 166, 154, 0.1);
  --color-down-dark: #134e4a;

  --color-flat: #94a3b8; /* Slate 400 */
  --color-flat-bg: rgba(148, 163, 184, 0.1);

  --color-primary: #6366f1; /* Indigo 500 */

  --color-plate-buy: #ef5350;
  --color-plate-sell: #26a69a;
}

html,
body {
  height: 100%;
}

/* Lock scroll only on Desktop */
@media (min-width: 992px) {
  body {
    overflow: hidden;
  }
}

/* Mobile Scroll Fix - Robust Reset */
@media (max-width: 991.98px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .container-fluid.h-100 {
    height: auto !important;
    min-height: 100vh; /* Ensure it fills screen at least */
  }

  main {
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important; /* Prevent flex growth causing overflow */
  }

  /* Ensure columns don't try to be full height */
  .col-12,
  .col-lg-8,
  .col-lg-4 {
    height: auto !important;
  }
}

body {
  background-color: var(--bg-dark); /* Fallback */
  /* morandi-1 卡其霧夜 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #b2a68c -60%,
    #172136 51%,
    #000000 90%
  );
  /* morandi-2 霧玫瑰暮藍 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #c8a5a0 -60%,
    #243447 51%,
    #020308 90%
  );
  /* morandi-3 霧藍灰夜空 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #9cafb7 -60%,
    #1f2937 51%,
    #000000 90%
  );
  /* morandi-4 鼠尾草深林 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #b6c4b1 -60%,
    #1c2626 51%,
    #02040a 90%
  );
  /* morandi-5 燕麥拿鐵暮色 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #d7c8b6 -60%,
    #3f3a35 51%,
    #000000 90%
  );
  /* morandi-6 藕紫霧夜 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #b79a9c -60%,
    #3b2f3a 51%,
    #05010a 90%
  );
  /* morandi-7 霧砂石板 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #c8c2b8 -60%,
    #374151 51%,
    #010409 90%
  );
  /* morandi-8 霧藍晨光 */
  background-image: radial-gradient(
    circle at 50% 0%,
    #c3d2de -60%,
    #111827 51%,
    #000000 90%
  );
  background-image: radial-gradient(
    circle at 50% 0%,
    #7b75ea -60%,
    #172136 51%,
    #000000 90%
  );
  background-attachment: fixed;
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Disable text selection for app-like feel */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/* Allow selection on inputs */
input, textarea, select, .selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Chart touch action */
#main-chart {
  touch-action: none; /* Prevent browser scrolling/zooming on the chart */
}

/* Glass Panels */
.app-header,
.info-panel,
.order-book-container,
.player-controls,
.bg-dark-subtle,
.market-pressure,
.tabs-section {
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-color) !important;
  box-shadow: none;
}

.app-header {
  border-bottom: 1px solid var(--border-color) !important;
}

.info-panel {
  border-bottom: 1px solid var(--border-color) !important;
}

/* Remove default border colors to let glass border take over */
.border-secondary {
  border-color: var(--border-color) !important;
}

/* Text Colors */
.text-up {
  color: var(--color-up) !important;
}
.text-down {
  color: var(--color-down) !important;
}
.text-flat {
  color: var(--color-flat) !important;
}

/* Background Badges/Fills */
.bg-up {
  background-color: var(--color-up) !important;
  color: #fff;
}
.bg-down {
  background-color: var(--color-down) !important;
}

/* Inputs & Selects */
.form-control.bg-dark,
.form-select.bg-dark,
.input-group-text.bg-dark {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
  backdrop-filter: blur(4px);
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.15) !important; /* Slightly more opaque */
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
  color: var(--text-main);
}

/* Fix for white background in dropdown options on some browsers/OS */
option {
  background-color: var(--bg-dark); /* Force dark background */
  color: var(--text-main);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Slider Customization */
.noUi-target {
  background: var(--bg-input);
  border: none;
  box-shadow: none;
  height: 6px;
}
.noUi-connect {
  background: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary); /* Neon Glow */
}
.noUi-handle {
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Darker shadow */
  width: 14px !important;
  height: 14px !important;
  right: -7px !important;
  top: -4px !important;
  cursor: grab;
}
.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

/* Nav Tabs */
.nav-tabs .nav-link {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
}
.nav-tabs .nav-link.active {
  background-color: transparent;
  border-color: transparent;
  border-bottom: 2px solid var(--color-primary);
  color: var(--text-main);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(99, 102, 241, 0.4); /* Apply text shadow for light theme as well */
}
.nav-tabs {
  border-bottom: 1px solid var(--border-color);
}

/* Table */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.05); /* Light hover */
  color: var(--text-main);
}

#trades-pane .table-responsive table {
  /* Target the specific table */
  table-layout: fixed;
  width: 100%;
}
#trades-pane .table-responsive table th,
#trades-pane .table-responsive table td {
  width: 20%; /* Equal distribution */
  white-space: nowrap; /* Prevent wrapping if content is too long */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis for overflowing text */
}
.sticky-header th {
  position: sticky;
  top: 0;
  background-color: transparent !important;
  backdrop-filter: none;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  z-index: 1;
}
.table td,
.table th {
  border-color: var(--border-color);
}

#trades-pane .table-responsive {
  min-height: 240px;
}

/* Chart Wrapper */
.chart-wrapper {
  background-color: transparent; /* Transparent to show body gradient */
}
.chart-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Loading */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* Darker overlay for light theme */
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

/* Order Book & Right Column */
.bg-dark-subtle {
  /* Handled by glass class above */
}

/* Custom Labels */
.tab-label-sm {
  font-size: 0.85rem !important;
}

.header-label-sm {
  font-size: 0.9rem !important;
}

/* Custom Adjustments for Bid/Ask Boxes */
.bid-ask-price {
  font-size: 0.85rem;
  line-height: 1;
}

.p-0.bg-dark.rounded small {
  font-size: 0.7rem;
  line-height: 1;
  display: block;
  color: var(--text-muted) !important;
}

.p-0.bg-dark.rounded {
  background-color: var(--bg-input) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border: 1px solid var(--border-color);
}

/* Custom Adjustments for Market Pressure Section */
.market-pressure small {
  font-size: 0.75rem;
}

/* Fix Market Pressure Colors */
#buy-order-bar {
  background-color: var(--color-plate-buy) !important;
  box-shadow: 0 0 8px rgba(239, 83, 80, 0.4);
}
.market-pressure .text-success {
  color: var(--color-plate-buy) !important;
}

#sell-order-bar {
  background-color: var(--color-plate-sell) !important;
  box-shadow: 0 0 8px rgba(38, 166, 154, 0.4);
}
.market-pressure .text-danger {
  color: var(--color-plate-sell) !important;
}

/* Player Controls */
.player-controls {
  /* Handled by glass class above */
  border-top: 1px solid var(--border-color) !important;
}

.btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-muted);
  background: transparent;
}
.btn-outline-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Light hover */
  color: var(--text-main);
  border-color: var(--text-main);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); /* Neon Glow (Indigo) */
}
.btn-primary:hover {
  background-color: #4338ca;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.7);
}

.btn-outline-light {
  border-color: var(--border-color);
  color: var(--text-muted);
}
.btn-check:checked + .btn-outline-light {
  background-color: var(--bg-input);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.bg-black {
  background-color: transparent !important;
} /* Let glass show through */



/* Custom Adjustments for Market Pressure Section */
.market-pressure small {
  font-size: 0.75rem;
}

/* Fix Market Pressure Colors */
#buy-order-bar {
  background-color: var(--color-plate-buy) !important;
  box-shadow: 0 0 8px rgba(239, 83, 80, 0.4);
}
.market-pressure .text-success {
  color: var(--color-plate-buy) !important;
}

#sell-order-bar {
  background-color: var(--color-plate-sell) !important;
  box-shadow: 0 0 8px rgba(38, 166, 154, 0.4);
}
.market-pressure .text-danger {
  color: var(--color-plate-sell) !important;
}

/* Custom Text Colors for Volume */
.text-buy {
  color: var(--color-plate-buy) !important;
}
.text-sell {
  color: var(--color-plate-sell) !important;
}

/* Progress Bar Track Transparency */
.progress {
  --bs-progress-bg: transparent;
  background-color: rgba(255, 255, 255, 0.05) !important; /* Very subtle track */
  box-shadow: none;
}
.progress-bar {
  opacity: 0.9; /* Slight transparency for bars */
  backdrop-filter: blur(2px);
}