/* ============================================================
   Portfolio Monitor — Theme System
   Two skins: [data-theme="light"] and [data-theme="dark"]
   Toggle by setting document.documentElement.setAttribute('data-theme', 'dark')
   Preference saved to localStorage key: 'pm_theme'
   ============================================================ */

/* ----------------------------------------------------------
   LIGHT THEME (default)
   ---------------------------------------------------------- */
[data-theme="light"] {
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --surface2:     #f0f2f5;
  --border:       #e2e5ea;
  --border-strong:#c8cdd6;

  --text:         #1a1d23;
  --muted:        #6b7280;
  --muted2:       #9ca3af;

  --blue:         #1d4ed8;
  --blue-light:   #eff6ff;
  --purple:       #7c3aed;
  --purple-light: #f5f3ff;
  --teal:         #0d9488;
  --amber:        #d97706;
  --red:          #dc2626;
  --red-light:    #fef2f2;
  --green:        #16a34a;
  --green-light:  #f0fdf4;
  --coral:        #ea580c;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:       0 4px 6px rgba(0,0,0,0.05);

  /* Table */
  --table-header-bg:    #f8f9fa;
  --table-header-color: #4b5563;
  --table-row-hover:    #f0f2f5;

  /* Dividend calendar tiles */
  --tile-paid-bg:     #f0fdf4;
  --tile-paid-color:  #15803d;
  --tile-upcoming-bg: #eff6ff;
  --tile-upcoming-color: #1d4ed8;
  --tile-exdate-bg:   #fef9c3;
  --tile-exdate-color:#854d0e;

  /* AI panel */
  --ai-bg:        #f5f3ff;
  --ai-border:    #c4b5fd;
  --ai-label:     #7c3aed;
  --ai-text:      #1a1d23;
}

/* ----------------------------------------------------------
   DARK THEME
   ---------------------------------------------------------- */
[data-theme="dark"] {
  --bg:           #0f172a;
  --surface:      #1e293b;
  --surface2:     #263548;
  --border:       #334155;
  --border-strong:#475569;

  --text:         #e2e8f0;
  --muted:        #94a3b8;
  --muted2:       #64748b;

  --blue:         #3b82f6;
  --blue-light:   rgba(59,130,246,0.12);
  --purple:       #a78bfa;
  --purple-light: rgba(167,139,250,0.12);
  --teal:         #2dd4bf;
  --amber:        #fbbf24;
  --red:          #f87171;
  --red-light:    rgba(248,113,113,0.12);
  --green:        #34d399;
  --green-light:  rgba(52,211,153,0.12);
  --coral:        #fb923c;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow:       0 4px 6px rgba(0,0,0,0.25);

  /* Table */
  --table-header-bg:    #0f172a;
  --table-header-color: #64748b;
  --table-row-hover:    #263548;

  /* Dividend calendar tiles */
  --tile-paid-bg:       rgba(52,211,153,0.12);
  --tile-paid-color:    #34d399;
  --tile-upcoming-bg:   rgba(59,130,246,0.12);
  --tile-upcoming-color:#60a5fa;
  --tile-exdate-bg:     rgba(251,191,36,0.12);
  --tile-exdate-color:  #fbbf24;

  /* AI panel */
  --ai-bg:        rgba(167,139,250,0.1);
  --ai-border:    rgba(167,139,250,0.3);
  --ai-label:     #a78bfa;
  --ai-text:      #e2e8f0;
}

/* ----------------------------------------------------------
   DARK THEME — element overrides
   Things that can't be done with variables alone
   ---------------------------------------------------------- */

/* Table header background */
[data-theme="dark"] thead th {
  background: var(--table-header-bg) !important;
  color: var(--table-header-color) !important;
  border-bottom-color: var(--border-strong) !important;
  border-top-color: var(--border) !important;
}

/* Table row hover */
[data-theme="dark"] tbody tr:hover td {
  background: var(--table-row-hover) !important;
}

/* Dividend calendar tiles */
[data-theme="dark"] .div-tile.paid {
  background: var(--tile-paid-bg) !important;
  color: var(--tile-paid-color) !important;
}
[data-theme="dark"] .div-tile.upcoming {
  background: var(--tile-upcoming-bg) !important;
  color: var(--tile-upcoming-color) !important;
}
[data-theme="dark"] .div-tile.exdate {
  background: var(--tile-exdate-bg) !important;
  color: var(--tile-exdate-color) !important;
}

/* AI summary panel (news.html, analysis.html) */
[data-theme="dark"] .ai-summary {
  background: var(--ai-bg) !important;
  border-color: var(--ai-border) !important;
}
[data-theme="dark"] .ai-summary-label {
  color: var(--ai-label) !important;
}
[data-theme="dark"] .ai-summary-body {
  color: var(--ai-text) !important;
}

/* Scrollbars — subtle in dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px; height: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--muted2);
}

/* Chart.js canvas — prevent white flash in dark mode */
[data-theme="dark"] canvas {
  filter: none;
}

/* Input / select elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color-scheme: dark;
}

/* ----------------------------------------------------------
   B&W THEME — monochrome, blacks/whites/grays only
   ---------------------------------------------------------- */
[data-theme="bw"] {
  --bg:           #F2F2F2;
  --surface:      #ffffff;
  --surface2:     #EBEBEB;
  --border:       #D1D1D1;
  --border-strong:#999999;

  --text:         #111111;
  --muted:        #555555;
  --muted2:       #888888;

  --blue:         #333333;
  --blue-light:   #F0F0F0;
  --purple:       #444444;
  --purple-light: #F0F0F0;
  --teal:         #333333;
  --amber:        #555555;
  --red:          #444444;
  --red-light:    #F5F5F5;
  --green:        #111111;
  --green-light:  #F0F0F0;
  --coral:        #555555;

  --accent:       #111111;
  --accent-light: #F0F0F0;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:       0 4px 6px rgba(0,0,0,0.07);

  /* Table */
  --table-header-bg:    #EBEBEB;
  --table-header-color: #111111;
  --table-row-hover:    #F2F2F2;

  /* Dividend calendar tiles */
  --tile-paid-bg:       #EBEBEB;
  --tile-paid-color:    #111111;
  --tile-upcoming-bg:   #F2F2F2;
  --tile-upcoming-color:#333333;
  --tile-exdate-bg:     #E5E5E5;
  --tile-exdate-color:  #444444;

  /* AI panel */
  --ai-bg:        #F2F2F2;
  --ai-border:    #999999;
  --ai-label:     #333333;
  --ai-text:      #111111;
}

/* B&W overrides — flatten any colored elements */
[data-theme="bw"] .metric-card.mc-beta { background: #F5F5F5; border-color: #BBBBBB; border-top-color: #555555; }
[data-theme="bw"] .metric-card.mc-pe   { background: #F5F5F5; border-color: #BBBBBB; border-top-color: #777777; }
[data-theme="bw"] .metric-label { color: #555555; }
[data-theme="bw"] .metric-label.mc-beta-label { color: #333333; }
[data-theme="bw"] .metric-label.mc-pe-label   { color: #555555; }
[data-theme="bw"] #metricBetaVal { color: #111111 !important; }
[data-theme="bw"] #metricBetaSub { color: #555555 !important; }
[data-theme="bw"] #metricPeVal   { color: #333333 !important; }
[data-theme="bw"] #metricPeSub   { color: #555555 !important; }

/* B&W table */
[data-theme="bw"] thead th {
  background: var(--table-header-bg) !important;
  color: var(--table-header-color) !important;
  border-bottom-color: var(--border-strong) !important;
}
[data-theme="bw"] tbody tr:hover td {
  background: var(--table-row-hover) !important;
}

/* B&W dividend tiles */
[data-theme="bw"] .div-tile.paid     { background: var(--tile-paid-bg) !important;     color: var(--tile-paid-color) !important; }
[data-theme="bw"] .div-tile.upcoming { background: var(--tile-upcoming-bg) !important; color: var(--tile-upcoming-color) !important; }
[data-theme="bw"] .div-tile.exdate   { background: var(--tile-exdate-bg) !important;   color: var(--tile-exdate-color) !important; }

/* B&W AI panel */
[data-theme="bw"] .ai-summary        { background: var(--ai-bg) !important;    border-color: var(--ai-border) !important; }
[data-theme="bw"] .ai-summary-label  { color: var(--ai-label) !important; }
[data-theme="bw"] .ai-summary-body   { color: var(--ai-text) !important; }