/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #111317;
  --surface:  #1c1f26;
  --border:   #2d313b;
  --accent:   #f0a830;
  --accent2:  #d4911f;
  --text:     #e2e4ea;
  --muted:    #7a7f92;
  --success:  #3ecf6e;
  --warn:     #f0a830;
  --danger:   #e05252;
  --purple:   #7c6af7;
  --radius:   8px;
  --font:     'Inter', 'Segoe UI', system-ui, sans-serif;
}

body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.5; min-height:100vh; }

/* ── Nav ── */
nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:54px;
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
nav .brand { font-size:1.1rem; font-weight:700; color:var(--text); text-decoration:none; }
nav .nav-links { display:flex; gap:4px; align-items:center; }
nav .nav-links a { color:var(--muted); text-decoration:none; padding:5px 11px; border-radius:var(--radius); font-size:.88rem; transition:color .15s,background .15s; }
nav .nav-links a:hover { color:var(--text); background:var(--border); }
nav .nav-links a.active { color:var(--text); background:var(--border); }
nav .nav-links a.logout:hover { color:var(--danger); }

/* ── Layout ── */
main { max-width:1160px; margin:0 auto; padding:32px 24px; }

/* ── Page header ── */
.page-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.page-header h2 { font-size:1.4rem; font-weight:600; }

/* ── Buttons ── */
button {
  padding:7px 16px; background:var(--accent); color:#111; border:none;
  border-radius:var(--radius); font-size:.88rem; font-weight:600;
  cursor:pointer; transition:background .15s,opacity .15s;
}
button:hover { background:var(--accent2); }
button:disabled { opacity:.5; cursor:wait; }

.btn-secondary { background:var(--border); color:var(--text); font-weight:400; }
.btn-secondary:hover { background:#3a3f4d; }

.btn-sm { padding:3px 10px; font-size:.78rem; }

.delete-btn { background:rgba(100,100,100,.2); color:var(--muted); }
.delete-btn:hover { background:rgba(224,82,82,.2); color:var(--danger); }

.link-btn { color:var(--accent); cursor:pointer; text-decoration:underline; }

/* ── Panel ── */
.panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 24px; margin-bottom:20px;
}
.panel h3 { font-size:1.05rem; font-weight:600; margin-bottom:16px; }
.panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }

/* ── Forms ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:640px) { .form-grid { grid-template-columns:1fr; } }

label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--muted); }
label input, label select {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:8px 12px; font-size:.93rem; outline:none;
  transition:border-color .15s;
}
label input:focus, label select:focus { border-color:var(--accent); }
label input::placeholder { color:var(--muted); }
.field-hint { font-size:.75rem; color:var(--muted); }

/* ── Tables ── */
.data-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.data-table th { text-align:left; color:var(--muted); font-weight:500; padding:6px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:8px 12px; border-bottom:1px solid var(--border); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }

.row-section td { background:rgba(255,255,255,.03); color:var(--muted); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:8px 12px; }
.row-highlight td { color:var(--success); font-weight:600; }

.compare-table th:not(:first-child) { text-align:center; }
.compare-table td:not(:first-child) { text-align:center; }

/* ── Stat grid ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; display:flex; flex-direction:column; gap:4px;
}
.stat-card.highlight { border-color:var(--accent); }
.stat-val { font-size:1.6rem; font-weight:700; line-height:1; }
.stat-lbl { font-size:.78rem; color:var(--muted); }

/* Scenario cards on dashboard */
.scenario-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.scenario-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; }
.card-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.card-title { flex:1; display:flex; flex-direction:column; gap:2px; }
.card-title a { color:var(--text); font-weight:600; font-size:1rem; text-decoration:none; }
.card-title a:hover { color:var(--accent); }
.card-check { flex-shrink:0; }
.card-meta { font-size:.78rem; color:var(--muted); margin-top:8px; }

.stat-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-mini { display:flex; flex-direction:column; }
.stat-mini .stat-val { font-size:1.2rem; font-weight:700; }
.stat-mini .stat-lbl { font-size:.73rem; color:var(--muted); }

/* ── Charts ── */
.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
@media(max-width:900px) { .charts-row { grid-template-columns:1fr; } }

.chart-box {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px;
}
.chart-box h4 { font-size:.88rem; color:var(--muted); font-weight:500; margin-bottom:12px; }

/* ── Upload / file drop ── */
.upload-drop {
  border:2px dashed var(--border); border-radius:var(--radius);
  padding:40px; text-align:center; color:var(--muted);
  cursor:pointer; transition:border-color .2s;
}
.upload-drop.drag-over { border-color:var(--accent); color:var(--text); }

/* ── Systems page ── */
.systems-list { display:flex; flex-direction:column; gap:12px; }
.pvgis-row { margin-top:10px; font-size:.83rem; }
.success-text { color:var(--success); }
.warn-text { color:var(--warn); }

/* ── Misc ── */
.hidden { display:none !important; }
.muted { color:var(--muted); }
.error { color:var(--danger); font-size:.88rem; }
.warn { color:var(--warn); font-size:.88rem; }
.badge { background:var(--border); color:var(--muted); padding:2px 8px; border-radius:20px; font-size:.78rem; }
.empty-state { padding:48px; text-align:center; color:var(--muted); }
.empty-state a { color:var(--accent); }

/* ── Login ── */
body.login-page { display:flex; align-items:center; justify-content:center; }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px 36px; width:100%; max-width:340px; text-align:center; }
.login-box h1 { font-size:1.6rem; margin-bottom:28px; }
.login-box form { display:flex; flex-direction:column; gap:12px; }
.login-box input { padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:.95rem; outline:none; transition:border-color .15s; }
.login-box input:focus { border-color:var(--accent); }
.login-box button { width:100%; padding:10px; margin-top:4px; }
.login-box .error { font-size:.85rem; margin-bottom:8px; }

/* ── Public fork additions ── */
.btn-sm {
  padding: 3px 10px;
  font-size: .8rem;
}
.success-text { color: var(--success, #22c55e); }
.warn-text    { color: var(--warning, #f59e0b); }

/* ── Onboarding checklist ── */
.onboarding-card {
  background: var(--surface, #1e2433);
  border: 1px solid var(--border, #2e3650);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.onboarding-title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #8892a4);
  margin-bottom: 14px;
}
.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onboarding-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
}
.step-icon {
  width: 20px;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.step-why {
  font-size: .78rem;
  color: var(--muted, #8892a4);
}
.step-done .step-icon { color: var(--success, #22c55e); }
.step-done a         { color: var(--muted, #8892a4); text-decoration: line-through; }
.step-todo .step-icon { color: var(--muted, #8892a4); }
.step-todo a          { color: var(--accent, #60a5fa); }

/* ── Location banner ── */
.location-warning {
  background: #3d2a00;
  border: 1px solid #7a5500;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: .9rem;
}
.location-ok {
  background: var(--surface, #1e2433);
  border: 1px solid var(--border, #2e3650);
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: .85rem;
  color: var(--muted, #8892a4);
}

/* ── Empty state with step context ── */
.empty-state-step {
  max-width: 540px;
  padding: 32px 0 16px;
}
.step-num {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent, #60a5fa);
  margin-bottom: 8px;
}
.empty-state-step h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}
.empty-state-step p {
  color: var(--muted, #8892a4);
  font-size: .9rem;
  margin: 0 0 10px;
  line-height: 1.6;
}
.empty-state-step button {
  margin-top: 8px;
}