/* ============================================================
   "Grow" design system — light (1b) + Calm Night dark variant.
   Palette source: design_handoff_grow_redesign/README.md
   ============================================================ */

:root {
  color-scheme: light;
  --app-bg: #F4F6FB;
  --surface-bg: #FFFFFF;
  --surface-muted-bg: #F7F8FC;
  --surface-subtle-bg: #FAFBFE;
  --control-disabled-bg: #F0F2FA;
  --border-color: #E1E4F0;
  --border-strong-color: #D5D9EC;
  --text-color: #23263B;
  --text-muted-color: #6A6F8E;
  --text-soft-color: #4A4E6D;
  --text-tertiary-color: #9AA0BC;
  --accent-color: #5B5BD6;
  --accent-strong-color: #4A4AC4;
  --accent-deep-color: #3D3F87;
  --accent-tint-bg: #EEEFFC;
  --accent-dark-text: #3D3F87;
  --nav-active-bg: #E4E7F7;
  --positive-color: #1F8A5B;
  --negative-color: #C0392B;
  --positive-tint-bg: #E9FBF1;
  --negative-tint-bg: #FDEEEC;
  --chip-bg: #F0F2FA;
  --chart-grid: #F0F2FA;
  --danger-bg: #FDEEEC;
  --danger-border: #F5C9C2;
  --danger-text: #C0392B;
  --success-bg: #E9FBF1;
  --success-border: #BFEED6;
  --success-text: #1F8A5B;
  --active-bg: #5B5BD6;
  --active-text: #ffffff;
  --shadow-card: 0 2px 10px rgba(30, 35, 60, 0.05);
  --shadow-panel: 0 10px 30px rgba(30, 35, 60, 0.12);
  --focus-ring: rgba(91, 91, 214, 0.25);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #131529;
  --surface-bg: #1B1E36;
  --surface-muted-bg: #181B31;
  --surface-subtle-bg: #212445;
  --control-disabled-bg: #23264A;
  --border-color: #2C3054;
  --border-strong-color: #3A3F6B;
  --text-color: #E6E8F7;
  --text-muted-color: #9BA1C9;
  --text-soft-color: #C3C7E3;
  --text-tertiary-color: #7A80A8;
  --accent-color: #8B8BE0;
  --accent-strong-color: #A0A0EA;
  --accent-deep-color: #C9CBF0;
  --accent-tint-bg: rgba(91, 91, 214, 0.22);
  --accent-dark-text: #C9CBF0;
  --nav-active-bg: rgba(91, 91, 214, 0.30);
  --positive-color: #4ADE97;
  --negative-color: #F0907E;
  --positive-tint-bg: rgba(31, 138, 91, 0.24);
  --negative-tint-bg: rgba(192, 57, 43, 0.26);
  --chip-bg: #23264A;
  --chart-grid: #262A4E;
  --danger-bg: #3A2030;
  --danger-border: #8B3A45;
  --danger-text: #F5B8C0;
  --success-bg: #12312A;
  --success-border: #1F6B4E;
  --success-text: #7FE8B4;
  --active-bg: #8B8BE0;
  --active-text: #14162B;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 16px 34px rgba(0, 0, 0, 0.5);
  --focus-ring: rgba(139, 139, 224, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --app-bg: #131529;
    --surface-bg: #1B1E36;
    --surface-muted-bg: #181B31;
    --surface-subtle-bg: #212445;
    --control-disabled-bg: #23264A;
    --border-color: #2C3054;
    --border-strong-color: #3A3F6B;
    --text-color: #E6E8F7;
    --text-muted-color: #9BA1C9;
    --text-soft-color: #C3C7E3;
    --text-tertiary-color: #7A80A8;
    --accent-color: #8B8BE0;
    --accent-strong-color: #A0A0EA;
    --accent-deep-color: #C9CBF0;
    --accent-tint-bg: rgba(91, 91, 214, 0.22);
    --accent-dark-text: #C9CBF0;
    --nav-active-bg: rgba(91, 91, 214, 0.30);
    --positive-color: #4ADE97;
    --negative-color: #F0907E;
    --positive-tint-bg: rgba(31, 138, 91, 0.24);
    --negative-tint-bg: rgba(192, 57, 43, 0.26);
    --chip-bg: #23264A;
    --chart-grid: #262A4E;
    --danger-bg: #3A2030;
    --danger-border: #8B3A45;
    --danger-text: #F5B8C0;
    --success-bg: #12312A;
    --success-border: #1F6B4E;
    --success-text: #7FE8B4;
    --active-bg: #8B8BE0;
    --active-text: #14162B;
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-panel: 0 16px 34px rgba(0, 0, 0, 0.5);
    --focus-ring: rgba(139, 139, 224, 0.35);
  }
}

html,
body {
  min-height: 100%;
  background: var(--app-bg);
  color: var(--text-color);
}

body {
  margin: 0;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.18s ease, color 0.18s ease;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
p {
  letter-spacing: 0;
}

.app-shell {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--text-color);
}

.theme-control input {
  accent-color: var(--accent-color);
}

.theme-control-label {
  color: var(--text-muted-color);
  font-weight: 700;
}

.theme-radio label {
  color: var(--text-soft-color);
}

.Select-control,
.Select-menu-outer,
.Select-option,
.Select--multi .Select-value {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  border-color: var(--border-strong-color) !important;
  color: var(--text-color) !important;
}

.Select-control {
  box-shadow: none !important;
  border-radius: 12px !important;
}

.Select.is-focused > .Select-control,
.is-focused:not(.is-open) > .Select-control {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.Select-multi-value-wrapper,
.Select-value,
.Select-placeholder,
.Select-value-label,
.Select-input,
.Select-input > input,
.Select--single > .Select-control .Select-value .Select-value-label {
  color: var(--text-color) !important;
}

.Select,
.Select div,
.Select span {
  color: var(--text-color);
}

.Select-value,
.Select-input,
.Select-placeholder,
.Select--single > .Select-control .Select-value,
.Select--multi .Select-multi-value-wrapper {
  background-color: transparent !important;
}

.dash-dropdown {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  border: 1px solid var(--border-strong-color) !important;
  border-radius: 12px !important;
  color: var(--text-color) !important;
  box-shadow: none !important;
}

.dash-dropdown,
.dash-dropdown * {
  color: var(--text-color) !important;
}

.dash-dropdown svg,
.dash-dropdown [aria-hidden="true"] {
  color: var(--text-muted-color) !important;
}

.dash-dropdown:focus,
.dash-dropdown:focus-visible,
.dash-dropdown[data-state="open"] {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px var(--focus-ring) !important;
  outline: none !important;
}

.Select-input > input {
  background: transparent !important;
  caret-color: var(--text-color);
  -webkit-text-fill-color: var(--text-color);
}

.Select-placeholder {
  color: var(--text-muted-color) !important;
}

.Select--multi .Select-value {
  border-color: var(--border-strong-color) !important;
  background: var(--surface-subtle-bg) !important;
  border-radius: 999px !important;
}

.Select--multi .Select-value-icon {
  border-right-color: var(--border-strong-color) !important;
  color: var(--text-muted-color) !important;
}

.Select--multi .Select-value-icon:hover,
.Select--multi .Select-value-icon:focus {
  background: var(--surface-muted-bg);
  color: var(--text-color);
}

.Select-clear-zone,
.Select-arrow-zone {
  color: var(--text-muted-color);
}

.Select-arrow {
  border-color: var(--text-muted-color) transparent transparent;
}

.is-open > .Select-control .Select-arrow {
  border-color: transparent transparent var(--text-muted-color);
}

.Select-menu,
.Select-noresults,
.VirtualizedSelectOption {
  background: var(--surface-bg) !important;
  color: var(--text-color) !important;
}

.Select-option.is-focused {
  background: var(--surface-muted-bg) !important;
  color: var(--text-color) !important;
}

.Select-option.is-selected,
.VirtualizedSelectFocusedOption,
.VirtualizedSelectSelectedOption {
  background: var(--surface-subtle-bg) !important;
  color: var(--text-color) !important;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--accent-color);
}

.dash-graph,
.js-plotly-plot .plotly {
  background: transparent;
}

.stock-main-grid {
  grid-template-columns: minmax(0, 1fr) 350px;
}

.stock-left-column,
.stock-sidebar,
.stock-chart-card,
.stock-chart-card .dash-graph,
.stock-chart-card .js-plotly-plot,
.stock-chart-card .plot-container,
.stock-chart-card .svg-container,
.dash-table-container,
.dash-spreadsheet-container {
  min-width: 0 !important;
  max-width: 100% !important;
}

.stock-chart-card .dash-graph {
  overflow: hidden;
}

.dash-table-container {
  color: var(--text-color);
}

.dash-table-container .dash-spreadsheet-container,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  background: var(--surface-bg) !important;
  color: var(--text-color) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input {
  background-color: var(--surface-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
  opacity: 1 !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-table-container .dash-header,
.dash-table-container .column-header-name {
  background-color: var(--surface-muted-bg) !important;
  color: var(--text-color) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.dash-table-container .dash-cell-value {
  color: var(--text-color) !important;
  opacity: 1 !important;
}

.dash-table-container .dash-filter input,
.dash-table-container .dash-filter textarea {
  background-color: var(--surface-muted-bg) !important;
  color: var(--text-color) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner table {
  border-collapse: collapse;
}

input,
button {
  color-scheme: inherit;
}

@media (max-width: 1100px) {
  .stock-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  body {
    font-size: 13px;
  }

  .stock-main-grid {
    gap: 10px !important;
  }

  .theme-control {
    right: 12px !important;
    bottom: 68px !important;
    transform: scale(0.92);
    transform-origin: bottom right;
  }
}