/* ═══════════════════════════════════════════════════════════════
   PesaCalc · Shared Dashboard Calculator Styles
   Common layout for power-station-style calculators.
   Prefix: .dc-  (use consistently across calculator pages)
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.dc-page {
  --bg:#f0f4f9; --surface:#fff; --surface-2:#f8fafc; --border:#e2e8f0; --border-hi:#bfdbfe;
  --text:#0f172a; --muted:#64748b; --faint:#94a3b8; --label:#475569;
  --blue:#3b82f6; --blue-dark:#1d4ed8; --blue-light:#eff6ff;
  --green:#10b981; --green-dark:#059669; --green-light:#ecfdf5;
  --amber:#f59e0b; --amber-dark:#b45309; --amber-light:#fffbeb;
  --red:#ef4444; --red-dark:#b91c1c; --red-light:#fef2f2;
  --purple:#8b5cf6; --purple-dark:#6d28d9; --purple-light:#f5f3ff;
  --teal:#14b8a6; --teal-light:#f0fdfa;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow:0 4px 16px rgba(15,23,42,.06),0 1px 4px rgba(15,23,42,.03);

  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-feature-settings:'cv11','ss01','ss03';
  -webkit-font-smoothing:antialiased;
  background:var(--bg); color:var(--text);
  letter-spacing:-.005em;
  padding:1.75rem 2rem 4rem;
  min-height:calc(100vh - 72px);
}
.dc-page *, .dc-page *::before, .dc-page *::after { box-sizing:border-box; }

.dc-head, .dc-stats, .dc-main, .dc-source { max-width:1400px; margin:0 auto; }

.dc-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.dc-title { font-size:1.7rem; font-weight:800; letter-spacing:-.03em; margin:0 0 .2rem; line-height:1.1; }
.dc-sub { font-size:.88rem; color:var(--muted); margin:0; }
.dc-head-actions { display:flex; gap:.5rem; }

.dc-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; font-size:.82rem; font-weight:600; border-radius:8px; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:all .18s; font-family:inherit; white-space:nowrap; }
.dc-btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); }
.dc-btn-ghost:hover { background:var(--surface-2); border-color:var(--faint); }
.dc-btn-primary { background:var(--blue-light); color:var(--blue); border-color:var(--border-hi); }
.dc-btn-primary:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.dc-btn-solid { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 2px 6px rgba(59,130,246,.25); }
.dc-btn-solid:hover { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(59,130,246,.35); }

/* Stats (4-card row) */
.dc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
.dc-stat { position:relative; padding:1.1rem 1.15rem 1rem; border-radius:14px; border:1px solid; overflow:hidden; }
.dc-stat-blue   { background:var(--blue-light);   border-color:var(--border-hi); }
.dc-stat-green  { background:var(--green-light);  border-color:#a7f3d0; }
.dc-stat-amber  { background:var(--amber-light);  border-color:#fde68a; }
.dc-stat-red    { background:var(--red-light);    border-color:#fecaca; }
.dc-stat-purple { background:var(--purple-light); border-color:#ddd6fe; }
.dc-stat-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.6rem; }
.dc-stat-lbl { font-size:.78rem; font-weight:600; }
.dc-stat-blue   .dc-stat-lbl { color:var(--blue-dark); }
.dc-stat-green  .dc-stat-lbl { color:var(--green-dark); }
.dc-stat-amber  .dc-stat-lbl { color:var(--amber-dark); }
.dc-stat-red    .dc-stat-lbl { color:var(--red-dark); }
.dc-stat-purple .dc-stat-lbl { color:var(--purple-dark); }
.dc-stat-ico { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; }
.dc-stat-blue   .dc-stat-ico { color:var(--blue-dark); }
.dc-stat-green  .dc-stat-ico { color:var(--green-dark); }
.dc-stat-amber  .dc-stat-ico { color:var(--amber-dark); }
.dc-stat-red    .dc-stat-ico { color:var(--red-dark); }
.dc-stat-purple .dc-stat-ico { color:var(--purple-dark); }
.dc-stat-val { font-size:1.55rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; word-break:break-word; }
.dc-stat-blue   .dc-stat-val { color:var(--blue-dark); }
.dc-stat-green  .dc-stat-val { color:var(--green-dark); }
.dc-stat-amber  .dc-stat-val { color:var(--amber-dark); }
.dc-stat-red    .dc-stat-val { color:var(--red-dark); }
.dc-stat-purple .dc-stat-val { color:var(--purple-dark); }
.dc-stat-foot { margin-top:.55rem; font-size:.72rem; }
.dc-trend { font-weight:600; color:var(--muted); }

/* Main 2-column */
.dc-main { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.dc-main-2_1 { grid-template-columns:1.1fr .9fr; }
.dc-main-1_2 { grid-template-columns:.9fr 1.1fr; }
@media(max-width:1024px) { .dc-main, .dc-main-2_1, .dc-main-1_2 { grid-template-columns:1fr; } }
.dc-col, .dc-col-left, .dc-col-right { display:flex; flex-direction:column; gap:1rem; }

/* Cards */
.dc-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
.dc-card-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:1rem 1.15rem .85rem; border-bottom:1px solid var(--border); }
.dc-card-title { display:flex; align-items:center; gap:.55rem; font-size:.88rem; font-weight:700; }
.dc-card-body { padding:1.15rem; }
.dc-chip { font-size:.68rem; font-weight:800; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:99px; padding:.24rem .65rem; letter-spacing:.03em; text-transform:uppercase; }
.dc-chip-green { background:var(--green-light); color:var(--green-dark); border-color:#a7f3d0; }
.dc-chip-blue  { background:var(--blue-light);  color:var(--blue-dark);  border-color:var(--border-hi); }

/* Mode tabs */
.dc-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:4px; margin-bottom:1.1rem; }
.dc-mode-tab { padding:.75rem .9rem; border:none; background:transparent; border-radius:8px; text-align:left; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:.2rem; color:var(--muted); transition:all .15s; }
.dc-mode-tab strong { font-size:.9rem; color:var(--text); font-weight:700; letter-spacing:-.005em; }
.dc-mode-tab span { font-size:.72rem; color:var(--muted); font-weight:500; line-height:1.35; }
.dc-mode-tab:hover { background:var(--surface); }
.dc-mode-on { background:var(--surface) !important; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.dc-mode-on strong { color:var(--blue-dark); }

/* Fields */
.dc-field { margin-bottom:1rem; }
.dc-field:last-child { margin-bottom:0; }
.dc-field-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:1rem; }
.dc-field-row:last-child { margin-bottom:0; }
.dc-field-row .dc-field { margin-bottom:0; }
@media(max-width:560px) { .dc-field-row { grid-template-columns:1fr; } }
.dc-label { display:flex; justify-content:space-between; align-items:baseline; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; }
.dc-label-val { font-family:'Inter',sans-serif; font-weight:700; color:var(--blue-dark); text-transform:none; letter-spacing:0; font-size:.72rem; }
.dc-input-wrap { position:relative; display:flex; align-items:center; }
.dc-input { flex:1; width:100%; padding:.7rem .9rem; font-size:.92rem; font-weight:600; color:var(--text); background:var(--surface); border:1.5px solid var(--border); border-radius:10px; outline:none; transition:border-color .18s, box-shadow .18s; font-family:inherit; -moz-appearance:textfield; }
.dc-input::-webkit-outer-spin-button, .dc-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dc-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.dc-input-big { font-size:1.15rem; padding:.85rem .95rem .85rem 3.2rem; font-weight:700; }
.dc-input-prefix { position:absolute; left:.95rem; font-size:.78rem; font-weight:700; color:var(--faint); pointer-events:none; letter-spacing:.02em; }
.dc-input-suffix { padding-right:3rem; }
.dc-input-suffix-lbl { position:absolute; right:.95rem; font-size:.75rem; font-weight:700; color:var(--faint); pointer-events:none; }
.dc-hint { font-size:.72rem; color:var(--faint); margin-top:.4rem; line-height:1.5; }
.dc-hint a { color:var(--blue); text-decoration:none; font-weight:600; }
.dc-hint a:hover { text-decoration:underline; }

.dc-select { width:100%; padding:.7rem .9rem; font-size:.92rem; font-weight:600; color:var(--text); background:var(--surface); border:1.5px solid var(--border); border-radius:10px; outline:none; cursor:pointer; font-family:inherit; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.3rem; }
.dc-select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.12); }

.dc-range { width:100%; margin-top:.6rem; -webkit-appearance:none; appearance:none; height:5px; background:var(--border); border-radius:3px; outline:none; cursor:pointer; }
.dc-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--blue); box-shadow:0 1px 4px rgba(59,130,246,.4); cursor:grab; }
.dc-range::-moz-range-thumb { width:16px; height:16px; border:none; border-radius:50%; background:var(--blue); box-shadow:0 1px 4px rgba(59,130,246,.4); cursor:grab; }

/* Presets */
.dc-presets { display:flex; flex-wrap:wrap; gap:.4rem; }
.dc-preset { padding:.45rem .85rem; font-size:.74rem; font-weight:600; color:var(--muted); background:var(--surface-2); border:1.5px solid var(--border); border-radius:99px; cursor:pointer; transition:all .15s; font-family:inherit; display:inline-flex; align-items:center; gap:.4rem; }
.dc-preset:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
.dc-preset-on { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 2px 8px rgba(59,130,246,.25); }
.dc-preset-on:hover { background:var(--blue-dark); color:#fff; }

/* Toggles */
.dc-toggles { display:flex; flex-direction:column; gap:.55rem; }
.dc-toggle { display:flex; align-items:flex-start; gap:.75rem; padding:.7rem .85rem; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; transition:all .15s; }
.dc-toggle:hover { border-color:var(--border-hi); background:var(--blue-light); }
.dc-toggle input { margin-top:.25rem; accent-color:var(--blue); width:17px; height:17px; flex-shrink:0; cursor:pointer; }
.dc-toggle-text { display:flex; flex-direction:column; gap:.15rem; }
.dc-toggle-text strong { font-size:.85rem; color:var(--text); font-weight:700; }
.dc-toggle-text span { font-size:.74rem; color:var(--muted); line-height:1.45; }

/* Breakdown rows */
.dc-bd-row { display:grid; grid-template-columns:1fr auto; padding:.65rem 0; border-bottom:1px solid var(--border); font-size:.88rem; align-items:center; gap:.75rem; }
.dc-bd-row:last-child { border-bottom:none; }
.dc-bd-row.sub { padding:.35rem 0 .35rem 1rem; font-size:.8rem; color:var(--muted); border-bottom:none; }
.dc-bd-row.total { padding:.85rem 0 .35rem; font-weight:800; font-size:.95rem; border-top:2px solid var(--border); border-bottom:none; margin-top:.35rem; }
.dc-bd-row.grand { padding:1rem; font-weight:800; font-size:1.05rem; background:var(--green-light); border:1px solid #a7f3d0; border-radius:10px; color:var(--green-dark); margin-top:.5rem; }
.dc-bd-lbl { color:var(--text); font-weight:600; }
.dc-bd-row.sub .dc-bd-lbl { font-weight:500; color:var(--muted); }
.dc-bd-row.total .dc-bd-lbl, .dc-bd-row.grand .dc-bd-lbl { font-weight:800; }
.dc-bd-val { font-family:'Inter',sans-serif; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.dc-bd-val.neg { color:var(--red); }
.dc-bd-val.pos { color:var(--green-dark); }

/* Tables */
.dc-table-wrap { max-height:420px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; }
.dc-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.dc-table th { position:sticky; top:0; background:var(--surface-2); color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.75rem .85rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; z-index:1; }
.dc-table td { padding:.55rem .85rem; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dc-table tr:last-child td { border-bottom:none; }
.dc-table tr:hover td { background:var(--surface-2); }
.dc-table td.num { text-align:right; font-family:'Inter',sans-serif; font-weight:600; }
.dc-table td.num.green { color:var(--green-dark); font-weight:700; }
.dc-table td.num.red   { color:var(--red); }
.dc-table td.num.blue  { color:var(--blue); }

/* Insights cards */
.dc-insights { display:flex; flex-direction:column; gap:.6rem; }
.dc-insight { display:grid; grid-template-columns:32px 1fr auto; gap:.75rem; align-items:start; padding:.75rem .85rem; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); }
.dc-insight-ico { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.85rem; font-weight:800; }
.dc-insight-title { font-size:.85rem; font-weight:700; color:var(--text); margin-bottom:.1rem; }
.dc-insight-text { font-size:.76rem; color:var(--muted); line-height:1.5; }
.dc-insight-val { font-family:'Inter',sans-serif; font-weight:800; font-size:.9rem; color:var(--green-dark); font-variant-numeric:tabular-nums; align-self:center; }
.dc-insight.good   { background:var(--green-light); border-color:#a7f3d0; }
.dc-insight.good .dc-insight-ico { background:var(--green); color:#fff; }
.dc-insight.good .dc-insight-title { color:var(--green-dark); }
.dc-insight.warn   { background:var(--amber-light); border-color:#fde68a; }
.dc-insight.warn .dc-insight-ico { background:var(--amber); color:#fff; }
.dc-insight.warn .dc-insight-title { color:var(--amber-dark); }
.dc-insight.danger { background:var(--red-light); border-color:#fecaca; }
.dc-insight.danger .dc-insight-ico { background:var(--red); color:#fff; }
.dc-insight.danger .dc-insight-title { color:var(--red-dark); }
.dc-insight.info   { background:var(--blue-light); border-color:var(--border-hi); }
.dc-insight.info .dc-insight-ico { background:var(--blue); color:#fff; }
.dc-insight.info .dc-insight-title { color:var(--blue-dark); }

/* Alert banner */
.dc-alert { display:grid; grid-template-columns:4px 1fr; background:var(--red-light); border:1px solid #fecaca; border-radius:14px; margin:0 auto 1.25rem; max-width:1400px; overflow:hidden; }
.dc-alert-bar { background:var(--red); }
.dc-alert-body { display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; flex-wrap:wrap; }
.dc-alert-head { display:flex; align-items:center; gap:.5rem; color:var(--red); font-weight:700; font-size:.88rem; }
.dc-alert-msg { color:#7f1d1d; font-size:.85rem; font-weight:500; flex:1; min-width:200px; }
.dc-alert-badge { margin-left:auto; background:var(--red); color:#fff; font-size:.8rem; font-weight:700; padding:.3rem .75rem; border-radius:99px; }

/* Source disclaimer */
.dc-source { padding:1rem 1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; font-size:.76rem; color:var(--muted); line-height:1.6; }
.dc-source strong { color:var(--text); font-weight:700; }

/* Legend (for charts) */
.dc-legend { display:flex; gap:.85rem; font-size:.72rem; color:var(--muted); }
.dc-leg-item { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; }
.dc-leg-dot { width:10px; height:10px; border-radius:3px; }

/* Responsive */
@media(max-width:900px) { .dc-stats { grid-template-columns:repeat(2,1fr); } .dc-mode-tabs { grid-template-columns:1fr; } }
@media(max-width:560px) {
  .dc-page { padding:1.25rem 1rem 3rem; }
  .dc-head { flex-direction:column; align-items:flex-start; }
  .dc-head-actions { width:100%; }
  .dc-stats { grid-template-columns:1fr 1fr; gap:.7rem; }
  .dc-stat-val { font-size:1.3rem; }
}