/* =========================================================
   Brighter Energy UI – Design System (Themed)
   - Values default here but are overridden by inline :root
     variables emitted in common.php from the ui_theme table.
   - Palette, Buttons, Font are controlled by CSS variables.
   ========================================================= */

:root{
  /* Palette (DB overrides come from common.php) */
  --brand:#FFAB31;
  --ink:#111827;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#f7f7f7;
  --card:#ffffff;
  --border:#e5e7eb;

  /* Buttons */
  --btn-primary-bg: var(--brand);
  --btn-primary-text:#ffffff;
  --btn-secondary-bg: var(--ink);
  --btn-secondary-text:#ffffff;
  --btn-tertiary-bg:#111827;
  --btn-tertiary-text:#ffffff;
  --btn-radius:12px;

  /* Shape & Elevation */
  --radius:12px; /* generic radius for cards etc */
  --shadow:0 2px 8px rgba(0,0,0,.06);

  /* Typography */
  --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:28px;
  --fw-bold:800; --fw-600:700; --fw-500:600;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

/* ---------- Layout ---------- */
.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
h1{color:var(--brand);margin:8px 0 18px;font-weight:var(--fw-bold)}
h2{margin:0 0 8px}

/* ---------- Nav ---------- */
.nav{
  display:flex;align-items:center;gap:18px;
  background:var(--card);
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20
}
.nav .logo{display:flex;align-items:center;gap:10px}
.nav .logo img{height:40px;display:block}
.nav a{
  color:#374151;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px;position:relative
}
.nav a:hover{color:var(--brand)}
.nav a.active{color:var(--brand)}
.nav a.active::after{
  content:"";position:absolute;left:6px;right:6px;bottom:-6px;height:3px;border-radius:2px;background:var(--brand)
}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  margin:18px 0;
}

/* ---------- Grid helpers ---------- */
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .cols-2,.cols-3{grid-template-columns:1fr} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;
  border:none;border-radius:var(--btn-radius);
  padding:10px 16px;font-weight:700;transition:filter .15s ease
  /* colors set by modifiers below */
}
.btn:hover{filter:brightness(.95)}

/* Primary (default/orange) */
.btn{ background:var(--btn-primary-bg); color:var(--btn-primary-text); }

/* Secondary (gray) */
.btn.secondary{ background:var(--btn-secondary-bg); color:var(--btn-secondary-text); }

/* Tertiary (black) */
.btn.black,
.btn.btn-black{ background:var(--btn-tertiary-bg); color:var(--btn-tertiary-text); }

/* Button row */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn.w-260{width:260px;text-align:center}
.btn.w-400 {width:400px;text-align:center}

/* ---------- Inputs ---------- */
label{font-weight:700;color:#374151;margin-bottom:6px;display:block}

/* New class used throughout settings.php */
.inp,
.input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size:var(--fs-md)
}
.inp[readonly],
.input[readonly]{background:#f9fafb;color:#6b7280}
.input-group{display:flex;flex-direction:column;gap:6px}

/* Inline suffix (e.g., %, EUR) */
.input-suffix{position:relative}
.input-suffix .input,
.input-suffix .inp{padding-right:48px}
.input-suffix .suffix{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-weight:700
}

/* ---------- Segmented radio (scenario switch) ---------- */
.segment{
  display:inline-flex;background:#fff;border:1px solid var(--border);
  border-radius:999px;overflow:hidden
}
.segment input{display:none}
.segment label{
  padding:8px 14px;cursor:pointer;font-weight:700;color:#374151;user-select:none
}
.segment input:checked + label{
  background:var(--brand);color:#fff;
}

/* ---------- Metric tiles ---------- */
.tile{
  background:#2e3847;color:#fff;border-radius:14px;padding:16px
}
.tile .k{opacity:.9;font-weight:800;font-size:22px}
.tile .v{color:var(--brand);font-weight:800;font-size:24px;margin-top:8px;line-height:1.2}

/* ---------- Tables ---------- */
.table{
  width:100%;border-collapse:separate;border-spacing:0 8px
}
.table th{
  font-size:var(--fs-sm);color:var(--muted);text-align:left;padding:10px 12px
}
.table td{
  background:#fff;padding:12px;border:1px solid var(--border);border-radius:10px
}
.table tfoot td{background:#fff}

/* ---------- Utility ---------- */
.text-muted{color:var(--muted)}
.text-right{text-align:right}
.mt-18{margin-top:18px}

/* ---------- Spacing helpers ---------- */
.gap-6 { margin-top:6px; }
.gap-12 { margin-top:12px; }

/* ---------- Print ---------- */
@media print{
  .nav,.btn-row{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;margin:0;padding:0}
  .wrap{max-width:960px}
}

/* Section headings used in settings/company/ui screens */
.section-title{
  color: var(--brand);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 10px;
}