/* =====================================================================
   WHOLEAKME — theme.css
   Light mode for the signed-in pages + the theme button in the top bar.
   Loaded after style.css by includes/header.php.

   Dark mode is the normal style.css. Light mode switches on when
   <html data-theme="light"> is set (by assets/theme.js), and every rule
   below only applies then — style.css itself is not changed.
===================================================================== */

/* ---------- theme button (top bar) ---------- */

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(14, 25, 41, 0.6);
  color: #ffd27a;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.theme-toggle:hover {
  border-color: rgba(85, 225, 189, 0.45);
  transform: translateY(-1px);
}

.theme-toggle svg {
  position: absolute;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s;
}

/* dark mode shows the sun (= "switch to light"), light mode shows the moon */
.theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

html[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

html[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: none;
}

/* ---------- the 3-second fade between themes ----------
   theme.js uses the browser's View Transition: the old colours slowly fade
   out while the new ones fade in. Browsers without it get the fallback below. */

html.theme-fading::view-transition-old(root),
html.theme-fading::view-transition-new(root) {
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
}

html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 1.5s ease-in-out,
    color 1.5s ease-in-out,
    border-color 1.5s ease-in-out,
    fill 1.5s ease-in-out,
    stroke 1.5s ease-in-out,
    box-shadow 1.5s ease-in-out !important;
}

/* =====================================================================
   LIGHT MODE
===================================================================== */

html[data-theme="light"] {
  --bg: #eef2f7;
  --card: #ffffff;
  --text: #0f1b2d;
  --muted: #5a6b82;
  --line: rgba(15, 35, 60, 0.12);
  --primary: #0e9e7b;
  --primary2: #2f6fd6;
  --accent-2: #2f6fd6;
  --low: #0e9e7b;
  --medium: #c27a10;
  --high: #d63a55;
  --critical: #d63a55;
  --shadow: 0 10px 30px rgba(15, 35, 60, 0.08);
  --glass: rgba(255, 255, 255, 0.86);
  --glass-2: rgba(246, 249, 252, 0.9);
  color-scheme: light;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* ---------- shared bits ---------- */

html[data-theme="light"] .eyebrow {
  color: var(--primary);
}

html[data-theme="light"] .primary {
  color: #ffffff;
}

html[data-theme="light"] .ghost {
  background: #e6ecf3;
  color: var(--text);
}

html[data-theme="light"] .low {
  background: rgba(14, 158, 123, 0.12);
  color: var(--low);
}

html[data-theme="light"] .medium {
  background: rgba(194, 122, 16, 0.12);
  color: var(--medium);
}

html[data-theme="light"] .high,
html[data-theme="light"] .critical {
  background: rgba(214, 58, 85, 0.1);
  color: var(--high);
}

html[data-theme="light"] .score {
  color: var(--primary);
}

html[data-theme="light"] .risk-ring {
  --ring-color: var(--primary);
}

html[data-theme="light"] .ring-track {
  stroke: rgba(15, 35, 60, 0.08);
}

html[data-theme="light"] .ring-center small {
  color: var(--muted);
}

html[data-theme="light"] .big-input,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] .history-sort {
  background: #ffffff;
  color: var(--text);
  border-color: rgba(15, 35, 60, 0.16);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .big-input:focus {
  border-color: rgba(14, 158, 123, 0.6);
  box-shadow: 0 0 0 3px rgba(14, 158, 123, 0.14);
}

html[data-theme="light"] .alert.error,
html[data-theme="light"] .danger {
  background: rgba(214, 58, 85, 0.08);
  color: var(--high);
}

html[data-theme="light"] .success {
  background: rgba(14, 158, 123, 0.1);
  color: var(--primary);
}

/* ---------- sidebar + top bar ---------- */

html[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
}

html[data-theme="light"] .brand {
  color: #1b2b44;
}

html[data-theme="light"] .sidebar nav a,
html[data-theme="light"] .sidebar-bottom a {
  color: var(--muted);
}

html[data-theme="light"] .sidebar nav a:hover,
html[data-theme="light"] .sidebar-bottom a:hover {
  background: #eef2f7;
  color: var(--text);
}

html[data-theme="light"] .sidebar nav a.active {
  background: rgba(14, 158, 123, 0.1);
  color: var(--primary);
}

html[data-theme="light"] .sidebar-collapse,
html[data-theme="light"] .sidebar-toggle {
  background: #ffffff;
}

html[data-theme="light"] .sidebar-collapse:hover,
html[data-theme="light"] .sidebar-toggle:hover {
  background: #eef2f7;
}

html[data-theme="light"] .sidebar-backdrop {
  background: rgba(15, 27, 45, 0.35);
}

html[data-theme="light"] .topbar-crumb {
  color: #7486a0;
}

html[data-theme="light"] .live-dot {
  background: var(--primary);
}

html[data-theme="light"] .avatar {
  background: #e3f5ef;
  color: var(--primary);
  border-color: rgba(14, 158, 123, 0.3);
}

html[data-theme="light"] .theme-toggle {
  background: #ffffff;
  color: #4a5b8c;
}

html[data-theme="light"] .ext-chip {
  color: var(--primary);
  border-color: rgba(14, 158, 123, 0.3);
  background: rgba(14, 158, 123, 0.08);
}

/* ---------- moving background ---------- */

html[data-theme="light"] .app-bg::before {
  background-image:
    linear-gradient(rgba(15, 35, 60, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 35, 60, 0.06) 1px, transparent 1px);
}

html[data-theme="light"] .app-orb {
  opacity: 0.45;
}

html[data-theme="light"] .app-orb.orb-a {
  background: #9fd3ec;
}

html[data-theme="light"] .app-orb.orb-b {
  background: #a5e8d3;
}

html[data-theme="light"] .app-radar {
  opacity: 0.75;
  background:
    repeating-radial-gradient(circle, transparent 0 61px, rgba(14, 158, 123, 0.14) 61px 62px),
    linear-gradient(transparent calc(50% - 0.5px), rgba(14, 158, 123, 0.1) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(14, 158, 123, 0.1) 0 calc(50% + 0.5px), transparent 0);
}

html[data-theme="light"] .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0 280deg,
    rgba(14, 158, 123, 0.1) 350deg,
    rgba(14, 158, 123, 0.3) 360deg
  );
}

html[data-theme="light"] .blip {
  background: var(--primary);
  box-shadow: 0 0 10px rgba(14, 158, 123, 0.6);
}

html[data-theme="light"] .fp-print {
  fill: var(--primary);
  filter: none;
}

/* ---------- panels ---------- */

html[data-theme="light"] .panel::before,
html[data-theme="light"] .scanner-card::before,
html[data-theme="light"] .ext-hero::before {
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, -300px),
    rgba(14, 158, 123, 0.06),
    transparent 60%
  );
}

html[data-theme="light"] .panel::after,
html[data-theme="light"] .dash-hero::after {
  background: linear-gradient(90deg, transparent, rgba(14, 158, 123, 0.35), transparent);
}

html[data-theme="light"] .scanner-card {
  box-shadow:
    var(--shadow),
    0 0 60px -30px rgba(14, 158, 123, 0.35);
}

html[data-theme="light"] .main .empty::before {
  border-color: rgba(14, 158, 123, 0.35);
  background: radial-gradient(circle, var(--primary) 0 3px, transparent 4px);
}

/* ---------- dashboard ---------- */

html[data-theme="light"] .dash-hero {
  background:
    radial-gradient(circle at 12% 50%, rgba(14, 158, 123, 0.1), transparent 45%),
    linear-gradient(120deg, #ffffff, #e9f6f2);
}

html[data-theme="light"] .dash-hero-text p,
html[data-theme="light"] .bar-label,
html[data-theme="light"] .scanner-card > p,
html[data-theme="light"] .ext-hero p {
  color: #3b4a60;
}

html[data-theme="light"] .risk-scale-marker {
  background: var(--text);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(15, 27, 45, 0.25);
}

html[data-theme="light"] .chart-grid {
  stroke: rgba(15, 35, 60, 0.1);
}

html[data-theme="light"] .donut-track {
  stroke: rgba(15, 35, 60, 0.07);
}

html[data-theme="light"] .bar-track,
html[data-theme="light"] .scan-meter,
html[data-theme="light"] .rp-bar-track,
html[data-theme="light"] .rp-mini-meter,
html[data-theme="light"] .type-tab-count,
html[data-theme="light"] .group-count {
  background: rgba(15, 35, 60, 0.07);
}

html[data-theme="light"] .scan-type-icon,
html[data-theme="light"] .type-card-icon,
html[data-theme="light"] .group-icon {
  background: rgba(47, 111, 214, 0.1);
}

html[data-theme="light"] .chart-tip {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(15, 35, 60, 0.15);
}

/* ---------- scanner ---------- */

html[data-theme="light"] .scan-options span {
  background: #f6f9fc;
}

html[data-theme="light"] .scan-options input:checked + span {
  background: rgba(14, 158, 123, 0.1);
}

html[data-theme="light"] .toggle-password {
  background: rgba(14, 158, 123, 0.1);
  color: var(--primary);
}

html[data-theme="light"] #scanBtn:disabled::before {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
}

/* ---------- scan result, history, notifications ---------- */

html[data-theme="light"] .result-hero {
  background: linear-gradient(120deg, #ffffff, #e9f6f2);
  color: var(--primary);
}

html[data-theme="light"] .recommend,
html[data-theme="light"] .history-row:hover {
  background: #f3f6fa;
}

html[data-theme="light"] .type-card.is-active {
  background: linear-gradient(140deg, rgba(14, 158, 123, 0.1), #ffffff 60%);
}

html[data-theme="light"] .type-tabs {
  background: #e9eef5;
}

html[data-theme="light"] .type-tab.is-active {
  background: #ffffff;
}

html[data-theme="light"] .notification:not(.read) {
  background:
    linear-gradient(90deg, rgba(14, 158, 123, 0.08), transparent 45%),
    var(--glass-2);
}

/* ---------- reports ---------- */

html[data-theme="light"] .rp-cover {
  background: linear-gradient(120deg, #ffffff, #eaf3fb);
}

html[data-theme="light"] .rp-brand {
  color: #1b2b44;
}

html[data-theme="light"] .rp-lead,
html[data-theme="light"] .rp-score-text > p,
html[data-theme="light"] .rp-finding p,
html[data-theme="light"] .rp-legend-item p {
  color: #3b4a60;
}

html[data-theme="light"] .rp-meta li {
  background: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .rp-score,
html[data-theme="light"] .rp-fact,
html[data-theme="light"] .rp-card,
html[data-theme="light"] .rp-finding,
html[data-theme="light"] .rp-action {
  background: #f6f9fc;
}

/* ---------- profile ---------- */

html[data-theme="light"] .default-profile-picture {
  color: #ffffff;
}

html[data-theme="light"] .upload-picture-btn {
  color: var(--primary);
}

html[data-theme="light"] .selected-file-name {
  color: var(--muted);
}

/* ---------- download extension page ---------- */

html[data-theme="light"] .ext-hero {
  background:
    radial-gradient(circle at 85% 30%, rgba(47, 111, 214, 0.08), transparent 45%),
    linear-gradient(120deg, #ffffff, #eaf4f8);
}

/* the browser picture stays dark in both themes */
html[data-theme="light"] .mock-browser {
  --text: #edf5ff;
  --muted: #8190a6;
  --line: rgba(148, 171, 201, 0.14);
  color: var(--text);
}

html[data-theme="light"] .ext-status i {
  background: #9aa9bd;
}

html[data-theme="light"] .ext-meta li {
  color: #3b4a60;
}

html[data-theme="light"] .ext-card-icon {
  background: rgba(14, 158, 123, 0.1);
}

html[data-theme="light"] .ext-steps code,
html[data-theme="light"] .ext-privacy code {
  background: rgba(14, 158, 123, 0.1);
  color: #0b7a5f;
}

html[data-theme="light"] .ext-flow .node {
  background: #ffffff;
}

/* ---------- page loading circle ---------- */

html[data-theme="light"].tx-in::after {
  background: #eef2f7;
}

html[data-theme="light"] .tx-overlay {
  background:
    radial-gradient(circle at 50% 50%, rgba(14, 158, 123, 0.12), transparent 40%),
    #eef2f7;
}

html[data-theme="light"] .tx-ring circle {
  stroke: rgba(14, 158, 123, 0.2);
}

html[data-theme="light"] .tx-ring .tx-arc {
  stroke: var(--primary);
}

html[data-theme="light"] .tx-print {
  fill: var(--primary);
}

html[data-theme="light"] .tx-label {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  html.theme-fading::view-transition-old(root),
  html.theme-fading::view-transition-new(root) {
    animation-duration: 0s;
  }
}

/* ---------- shared states (see style.css) ---------- */

html[data-theme="light"] .badge.incomplete,
html[data-theme="light"] .badge.info {
  background: rgba(90, 107, 130, 0.12);
  color: var(--muted);
}

html[data-theme="light"] .alert.success {
  background: rgba(14, 158, 123, 0.08);
  color: var(--primary);
  border-color: rgba(14, 158, 123, 0.25);
}

html[data-theme="light"] .alert.notice {
  background: rgba(196, 120, 20, 0.08);
  color: #9a5b00;
  border-color: rgba(196, 120, 20, 0.25);
}