/* ============================================================
   PVSim design system — buildless, theme-aware (CSS variables)
   Identity: solar amber accents on a deep-sky canvas; glass cards.
   Themes: light / dark, plus per-plant "auto by weather" (data-weather).
   ============================================================ */

:root {
  /* Accent (overridable via toolbar → --accent-* ) */
  --accent:        #f5a524;   /* solar amber */
  --accent-2:      #ff7a1a;
  --accent-soft:   rgba(245,165,36,.15);

  --ok:   #1eb980;
  --warn: #f5a524;
  --bad:  #e5484d;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --font: "Segoe UI", "Tahoma", "Noto Kufi Arabic", system-ui, sans-serif;
  --fs-scale: 1;

  --speed: 1;                 /* animation speed multiplier (toolbar) */
}

/* ---- Light (default) ---- */
:root, :root[data-theme="light"] {
  --bg:        #eef2f7;
  --bg-2:      #e2e8f1;
  --surface:   rgba(255,255,255,.72);
  --surface-2: rgba(255,255,255,.9);
  --border:    rgba(20,30,50,.10);
  --text:      #1a2233;
  --muted:     #5c6b82;
  --shadow:    0 8px 30px rgba(20,40,80,.08);
  --sky-1:     #bfe3ff;
  --sky-2:     #eaf6ff;
}

/* ---- Dark ---- */
:root[data-theme="dark"] {
  --bg:        #0b1020;
  --bg-2:      #0f1730;
  --surface:   rgba(24,33,58,.66);
  --surface-2: rgba(28,39,68,.9);
  --border:    rgba(255,255,255,.09);
  --text:      #e8eefc;
  --muted:     #93a1bd;
  --shadow:    0 10px 40px rgba(0,0,0,.35);
  --sky-1:     #16233f;
  --sky-2:     #0b1020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: calc(1rem * var(--fs-scale));
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 90% -10%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* ---- Navbar ---- */
.pv-nav {
  backdrop-filter: blur(12px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1000;
}
.pv-brand { font-weight: 800; letter-spacing: .2px; display:flex; align-items:center; gap:.5rem; color: var(--text); }
.pv-brand .dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center; color:#1a1200; font-weight:900;
  box-shadow: 0 4px 14px var(--accent-soft);
}
.pv-nav .nav-link { color: var(--muted); font-weight:600; border-radius: var(--r-sm); padding:.4rem .8rem; }
.pv-nav .nav-link:hover, .pv-nav .nav-link.active { color: var(--text); background: var(--accent-soft); }

/* ---- Cards ---- */
.pv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.pv-card .pv-card-body { padding: 1.1rem 1.25rem; }

/* ---- Buttons ---- */
.btn-solar {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #241700; font-weight: 700;
  border-radius: var(--r-sm); box-shadow: 0 6px 18px var(--accent-soft);
}
.btn-solar:hover { color:#241700; filter: brightness(1.05); }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r-sm); font-weight:600;
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); }

/* ---- Status pills ---- */
.pill { font-size:.75rem; font-weight:700; padding:.2rem .6rem; border-radius: 999px; display:inline-flex; align-items:center; gap:.35rem; }
.pill::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background: currentColor; }
.pill-active { color: var(--ok);   background: rgba(30,185,128,.14); }
.pill-fault  { color: var(--bad);  background: rgba(229,72,77,.14); }
.pill-inactive { color: var(--muted); background: rgba(120,130,150,.16); }

/* ---- Plant card ---- */
.plant-card { transition: transform .15s ease, box-shadow .15s ease; overflow:hidden; }
.plant-card:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(20,40,80,.16); }
.plant-card h3 { color: var(--text); }
.plant-card .kv { display:flex; justify-content:space-between; font-size:.85rem; padding:.25rem 0; }
.plant-card .kv .l { color: var(--muted); }
.plant-card .kv .v { font-weight:700; color: var(--text); }

/* ---- Metric tiles ---- */
.metric { text-align:center; }
.metric .val { font-size: 1.5rem; font-weight: 800; line-height:1; }
.metric .unit { font-size:.7rem; color: var(--muted); }
.metric .lbl { font-size:.72rem; color: var(--muted); margin-top:.25rem; }

/* ---- Form ---- */
.form-control, .form-select {
  background: var(--surface-2); border:1px solid var(--border); color: var(--text); border-radius: var(--r-sm);
}
.form-control:focus, .form-select:focus {
  background: var(--surface-2); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.form-label { font-weight:600; font-size:.85rem; color: var(--muted); }

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

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}