/* TrendLens — Mono + Green theme overlay (hitam / putih / hijau)
 * Token-level override; layout/komponen TrendLens tidak diubah.
 * Menang atas semua state data-theme (specificity html[data-theme] + urutan cascade).
 * Light = putih/abu netral, Dark = hitam netral. Aksen = hijau. (Sebelumnya cream/terracotta.)
 */
:root,
html[data-theme] {
  /* Surfaces — putih / abu netral */
  --bg: #F5F7F9;
  --bg-2: #EDF0F5;
  --surface: #FFFFFF;
  --border: #E7EAEF;
  --border-2: #F0F2F6;

  /* Text — hitam netral */
  --text-1: #18181B;
  --text-2: #52525B;
  --text-3: #A1A1AA;

  /* Primary — hijau */
  --primary: #16A34A;
  --primary-hover: #15803D;
  --primary-soft: #DCFCE7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.tl-loading { background: #F5F7F9; color: #52525B; }

/* Hapus aksen PINK (#EC4899) yang disuntik inline oleh app → hijau. */
:root,
html[data-theme] {
  --primary: #16A34A !important;
  --primary-hover: #15803D !important;
  --primary-soft: #DCFCE7 !important;
  --accent-pink: #16A34A !important;
  --accent-pink-soft: #DCFCE7 !important;
}

/* Logo: lettermark "T" — hijau */
html[data-theme] .tl-logo {
  position: relative;
  background: linear-gradient(135deg, #22C55E, #15803D) !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25) !important;
}
html[data-theme] .tl-logo > svg,
html[data-theme] .tl-logo > img { display: none !important; }
html[data-theme] .tl-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Cg%20stroke='white'%20stroke-width='7'%20stroke-linecap='round'%20fill='none'%3E%3Cline%20x1='20'%20y1='14'%20x2='20'%20y2='50'/%3E%3Cline%20x1='22'%20y1='32'%20x2='48'%20y2='14'/%3E%3Cline%20x1='22'%20y1='32'%20x2='48'%20y2='50'/%3E%3C/g%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Nav aktif: pill + teks hijau */
html[data-theme] .tl-nav-item.active,
html[data-theme] .tl-space-item.active {
  background: var(--surface) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* ---- Login/landing publik (.login-shell punya token sendiri) ---- */
html[data-theme] .login-shell {
  --primary: #16A34A;
  --primary-hover: #15803D;
  --primary-soft: #DCFCE7;
  --accent-pink: #16A34A;
  --bg: #F5F7F9;
  --bg-2: #EDF0F5;
  --surface: #FFFFFF;
  --border: #E7EAEF;
  --text-1: #18181B;
  --text-2: #52525B;
  --text-3: #A1A1AA;
}
html[data-theme] .login-shell .brand-panel {
  background: linear-gradient(150deg, #14532D, #15803D 45%, #16A34A);
}
.tl-gemini-badge {
  background: linear-gradient(135deg, #22C55E, #16A34A 55%, #15803D);
}

/* ===== DARK MODE — hitam netral + aksen hijau =====
 * html[data-theme="dark"] (0,1,1) = spesifisitas sama, DI BAWAH cascade → menang di gelap. */
html[data-theme="dark"] {
  --bg: #0A0A0A;
  --bg-2: #1C1C1E;
  --surface: #161618;
  --border: #2A2A2D;
  --border-2: #222225;
  --text-1: #ECECEC;
  --text-2: #9B9B9F;
  --text-3: #6B6B70;
  --primary: #22C55E !important;
  --primary-hover: #4ADE80 !important;
  --primary-soft: color-mix(in srgb, #22C55E 22%, transparent) !important;
  --accent-pink: #22C55E !important;
  --accent-pink-soft: color-mix(in srgb, #22C55E 20%, transparent) !important;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.7);
}
html[data-theme="dark"] .tl-loading { background: #0A0A0A; color: #9B9B9F; }
html[data-theme="dark"] .tl-logo {
  background: linear-gradient(135deg, #22C55E, #16A34A) !important;
  box-shadow: 0 3px 10px rgba(34,197,94,.25) !important;
}
html[data-theme="dark"] .tl-nav-item.active,
html[data-theme="dark"] .tl-space-item.active {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border);
}