/* ============================================================
   HARVESTOR — OBSERVATORY THEME
   Dark, editorial, premium financial dashboard
   ============================================================ */

/* ============================================================
   FOUNDATIONS — Force dark background on dashboard
   ============================================================ */

body.obs-page {
  background-color: #0E1117 !important;
  color: #D0D3DC;
}

body.obs-page main {
  background-color: #0E1117;
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   ============================================================ */

.obs-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4B5360;
  margin-bottom: 6px;
}

.obs-label-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38404E;
  margin-left: 8px;
}

.obs-hero-number {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #F0F1F5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: 10px;
  min-height: 4.2rem;
  display: flex;
  align-items: flex-end;
}

.obs-hero-number-secondary {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #F0F1F5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: 10px;
  min-height: 4.2rem;
  display: flex;
  align-items: flex-end;
}

/* ============================================================
   COUNT-UP + REVEAL ANIMATIONS
   ============================================================ */

@keyframes obs-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes obs-glow {
  0%, 100% {
    text-shadow: 0 0 60px rgba(107, 174, 232, 0);
  }
  50% {
    text-shadow: 0 0 60px rgba(107, 174, 232, 0.08);
  }
}

.obs-hero-number {
  animation: obs-reveal 0.75s cubic-bezier(0.4, 0, 0.2, 1) both,
             obs-glow 6s ease-in-out 0.75s infinite;
}

.obs-hero-number-secondary {
  animation: obs-reveal 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

/* ============================================================
   HERO SECTION — Two elevated cards side by side
   ============================================================ */

.obs-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.obs-hero-primary,
.obs-hero-secondary {
  padding: 28px 32px;
}

/* Hero cards — give them their own panel style */
body.obs-page #net-worth-card,
body.obs-page #liquid-worth-card {
  background: #151B27 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.2s !important;
}

/* Hover — subtle border brightening */
body.obs-page #net-worth-card:hover,
body.obs-page #liquid-worth-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

/* Selected card — indigo accent border */
body.obs-page #net-worth-card.selected,
body.obs-page #liquid-worth-card.selected {
  border-color: rgba(59, 125, 196, 0.45) !important;
}

.obs-ytd {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 24px;
}

/* Neutralise JS-injected green/red on YTD — keep the svg arrow colored */
body.obs-page #ytd-gain,
body.obs-page #ytd-liquid-gain {
  color: #6B7585 !important;
}

.obs-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.obs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.obs-meta-grid .obs-meta-item:nth-child(2) {
  text-align: right;
}

.obs-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4B5360;
}

.obs-meta-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #C8CEDE;
}

/* No green/red on meta values — single neutral color */
.obs-meta-value.positive,
.obs-meta-value.negative {
  color: #C8CEDE;
}

/* Progress bars — hidden in hero, keep elements for JS */
.obs-balance-track {
  display: none;
}

body.obs-page .progress-bar,
body.obs-page .progress-bar-month {
  display: none;
}

/* ============================================================
   PANELS
   ============================================================ */

.obs-panel {
  background-color: #151B27;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.obs-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* ============================================================
   TIMELINE — Full-width trend chart
   ============================================================ */

.obs-timeline-chart {
  height: 260px;
  position: relative;
}

/* ============================================================
   CHARTS ROW — Period change + Distribution
   ============================================================ */

.obs-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.obs-chart-panel {
  background-color: #151B27;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 32px;
}

.obs-chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* ============================================================
   CONTROLS — Selects, toggles, icons
   ============================================================ */

body.obs-page select,
body.obs-page .obs-control-select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #7A8392 !important;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

body.obs-page select option {
  background-color: #1C2333;
  color: #D0D3DC;
}

body.obs-page select:focus {
  outline: none;
  border-color: rgba(59, 125, 196, 0.4) !important;
}

/* Period toggle */
.obs-toggle-group {
  display: flex;
  align-items: center;
  background: #1C2333;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 3px;
  position: relative;
  height: 32px;
  width: 148px;
}

.obs-toggle-bg {
  position: absolute;
  left: 3px;
  top: 3px;
  background: #2A3347;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  transition: left 0.2s ease;
}

.obs-toggle-btn {
  position: relative;
  z-index: 1;
  width: 50%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 7px;
  transition: color 0.2s;
}

/* Toggle color states — driven by JS-added Tailwind classes */
body.obs-page #monthly-toggle,
body.obs-page #yearly-toggle {
  color: #4B5360;
}

body.obs-page #monthly-toggle.text-gray-900,
body.obs-page #yearly-toggle.text-gray-900 {
  color: #F0F1F5;
}

/* Fullscreen icons */
body.obs-page .fullscreen-icon {
  color: #3A4050;
  cursor: pointer;
  transition: color 0.2s;
}

body.obs-page .fullscreen-icon:hover {
  color: #6BAEE8;
}

/* ============================================================
   AI INSIGHTS BUTTON
   ============================================================ */

body.obs-page #insights-btn {
  background: transparent !important;
  border: 1px solid rgba(59, 125, 196, 0.3) !important;
  border-radius: 8px !important;
  color: #6BAEE8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
}

body.obs-page #insights-btn:hover {
  background: rgba(59, 125, 196, 0.08) !important;
  border-color: rgba(59, 125, 196, 0.5) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.obs-page #insights-btn .animate-pulse {
  animation: none !important;
}

/* ============================================================
   ASSET BREAKDOWN LIST
   ============================================================ */

.obs-balance-total {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #F0F1F5;
  font-variant-numeric: tabular-nums;
}

.obs-balance-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

body.obs-page #monthly-balance-content .group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.obs-page #monthly-balance-content .group:last-child {
  border-bottom: none;
}

body.obs-page #monthly-balance-content .border-b {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.obs-page #monthly-balance-content [class*="hover:bg-gray"] {
  border-radius: 8px;
  transition: background-color 0.15s;
}

body.obs-page #monthly-balance-content [class*="hover:bg-gray"]:hover {
  background-color: #1C2333 !important;
}

body.obs-page #monthly-balance-content .asset-name-link {
  color: #C8CEDE !important;
  font-size: 15px;
}

body.obs-page #monthly-balance-content .asset-name-link:hover {
  color: #6BAEE8 !important; /* soft red — matches card selected state */
}

/* Neutralise all colored text in balance list */
body.obs-page #monthly-balance-content .text-green-700,
body.obs-page #monthly-balance-content [class*="text-green"],
body.obs-page #monthly-balance-content .text-red-700,
body.obs-page #monthly-balance-content [class*="text-red"] {
  color: #C8CEDE !important;
}

body.obs-page #monthly-balance-content .text-gray-500,
body.obs-page #monthly-balance-content .dark\:text-gray-400 {
  color: #4B5360 !important;
}

/* Neutralise the colored dot indicators */
body.obs-page #monthly-balance-content .bg-green-700,
body.obs-page #monthly-balance-content .bg-red-700 {
  background-color: #3A4558 !important;
}

body.obs-page #monthly-balance-total {
  color: #F0F1F5 !important;
}

body.obs-page #monthly-balance-change {
  font-size: 12px !important;
}

/* ============================================================
   YTD GAIN COLORS — Override JS-set colors
   ============================================================ */

body.obs-page #ytd-gain svg,
body.obs-page #ytd-liquid-gain svg {
  vertical-align: middle;
}

/* ============================================================
   SECTION TITLE OVERRIDE (for obs-panel headers)
   ============================================================ */

.obs-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4B5360;
}

/* ============================================================
   CHANGE AMOUNTS — Muted directional colors
   ============================================================ */

body.obs-page .change-positive {
  color: #4E7A5A !important;
}

body.obs-page .change-negative {
  color: #7A4E4E !important;
}

/* ============================================================
   NAV BAR — Match the dark panel aesthetic
   ============================================================ */

body.obs-page header {
  background: #151B27 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

/* Nav links */
body.obs-page header nav a,
body.obs-page header .text-blue-100 {
  color: #6B7585 !important;
}

body.obs-page header nav a:hover {
  color: #D0D3DC !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Active nav item */
body.obs-page header .bg-blue-700 {
  background-color: rgba(59, 125, 196, 0.15) !important;
  color: #C8CEDE !important;
}

/* Logo */
body.obs-page header a.text-2xl {
  color: #E8EAF0 !important;
}

/* Language / user avatar button */
body.obs-page header #language-menu-button {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #6B7585 !important;
}

/* Reports chevron button */
body.obs-page header button[id="reports-menu-btn"] {
  color: #6B7585 !important;
}

body.obs-page header button[id="reports-menu-btn"]:hover {
  color: #D0D3DC !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Logout link */
body.obs-page header a[href="/logout"] {
  color: #6B7585 !important;
  background-color: transparent !important;
}

body.obs-page header a[href="/logout"]:hover {
  color: #D0D3DC !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown menus (Reports, Language) */
body.obs-page #reports-menu,
body.obs-page #language-menu {
  background-color: #1C2333 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body.obs-page #reports-menu a,
body.obs-page #language-menu a {
  color: #8A94A6 !important;
}

body.obs-page #reports-menu a:hover,
body.obs-page #language-menu a:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #D0D3DC !important;
}

/* ============================================================
   FULLSCREEN MODAL — Dark panel style
   ============================================================ */

body.obs-page .fullscreen-content {
  background-color: #151B27 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .obs-hero {
    grid-template-columns: 1fr;
  }

  .obs-hero-primary,
  .obs-hero-secondary {
    padding: 22px 20px;
  }

  .obs-charts-row {
    grid-template-columns: 1fr;
  }

  .obs-hero-number {
    font-size: 2.6rem;
  }

  .obs-hero-number-secondary {
    font-size: 1.9rem;
  }

  .obs-panel {
    padding: 20px;
  }

  .obs-chart-panel {
    padding: 20px;
  }
}

/* ============================================================
   GLOBAL PAGE STYLES — All pages with obs-page class
   Overrides Tailwind light + dark defaults to match Observatory
   ============================================================ */

/* ── Page background ── */
/* body.obs-page bg already set to #0E1117 above */

/* ── Cards & Panels ── */
/* Light-mode bg classes on cards → panel color */
body.obs-page .bg-white {
  background-color: #151B27 !important;
}

body.obs-page .bg-gray-50 {
  background-color: #1C2333 !important;
}

/* Tailwind dark-mode bg variants → panel colors */
body.obs-page .dark\:bg-gray-800 {
  background-color: #151B27 !important;
}

body.obs-page .dark\:bg-gray-900 {
  background-color: #1C2333 !important;
}

body.obs-page .dark\:bg-gray-700 {
  background-color: #1C2333 !important;
}

/* tools.ejs specific dark bg variants */
body.obs-page .dark\:bg-\[\#15191C\] {
  background-color: #151B27 !important;
}

body.obs-page .dark\:bg-\[\#1E2327\] {
  background-color: #1C2333 !important;
}

/* cashflow .cf-card */
body.obs-page .cf-card {
  background: #151B27 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* providers .provider card */
body.obs-page .provider {
  background: #151B27 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── Borders & Dividers ── */
body.obs-page .border-gray-200,
body.obs-page .border-gray-300 {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

body.obs-page .dark\:border-gray-700,
body.obs-page .dark\:border-gray-800,
body.obs-page .dark\:border-gray-600 {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

body.obs-page .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
body.obs-page .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Tables ── */
body.obs-page table {
  background-color: transparent !important;
}

body.obs-page thead,
body.obs-page thead tr {
  background-color: #1C2333 !important;
}

body.obs-page th {
  color: #4B5360 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
}

body.obs-page tbody tr {
  background-color: transparent !important;
}

body.obs-page tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

body.obs-page td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #C8CEDE;
}

/* ── Form Inputs ── */
body.obs-page input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
body.obs-page textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #D0D3DC !important;
}

body.obs-page input::placeholder,
body.obs-page textarea::placeholder {
  color: #3E4655 !important;
}

body.obs-page input:focus:not([type="range"]):not([type="checkbox"]),
body.obs-page textarea:focus {
  border-color: rgba(59, 125, 196, 0.4) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Buttons ── */
/* Primary blue → faded red */
body.obs-page .bg-blue-600,
body.obs-page .dark\:bg-blue-500 {
  background-color: #3B7DC4 !important;
}

body.obs-page .hover\:bg-blue-700:hover,
body.obs-page .dark\:hover\:bg-blue-600:hover {
  background-color: #2D6FB8 !important;
}

/* Danger red → muted */
body.obs-page .bg-red-600 {
  background-color: #7A2525 !important;
}

body.obs-page .hover\:bg-red-700:hover {
  background-color: #8B3030 !important;
}

/* Success green → muted */
body.obs-page .bg-green-600,
body.obs-page .dark\:bg-green-500 {
  background-color: #1C6B3A !important;
}

body.obs-page .hover\:bg-green-700:hover {
  background-color: #247A44 !important;
}

/* Secondary / white button */
body.obs-page button.bg-white,
body.obs-page a.bg-white {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #C8CEDE !important;
}

/* ── Modals ── */
body.obs-page .bg-white.rounded-xl,
body.obs-page .dark\:bg-gray-900.rounded-xl {
  background-color: #151B27 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Modal overlays */
body.obs-page .bg-gray-500.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ── Scraper log ── */
body.obs-page #log-container {
  background-color: #151B27 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: #7A8392;
}

/* ── Text color harmonisation ── */
body.obs-page .text-gray-900 {
  color: #E8EAF0 !important;
}

body.obs-page .dark\:text-gray-200 {
  color: #C8CEDE !important;
}

body.obs-page .text-gray-600,
body.obs-page .dark\:text-gray-400 {
  color: #6B7585 !important;
}

body.obs-page .text-gray-500 {
  color: #4B5360 !important;
}