/* =====================================================================
   SPEC-7 PROFIT CALCULATOR — STYLES
   ---------------------------------------------------------------------
   Brand colours and most visual settings are defined in :root below.
   Change them here (or live, via the Settings panel / colour pickers).
   ===================================================================== */

:root{
  /* ---- BRAND COLOURS (editable) ---- */
  --primary:   #512a73;   /* RDL purple — banners, headings, primary buttons */
  --secondary: #ccc2d4;   /* light lavender — glass cards / matrix panels   */
  --bg:        #ffffff;   /* page background                                 */

  /* ---- Derived / supporting colours ---- */
  --accent:    #6fbf3f;   /* RDL green — positive accents                    */
  --good:      #2e9e4f;   /* positive money                                  */
  --bad:       #c0392b;   /* negative money / costs                          */
  --ink:       #1f1730;   /* main text                                       */
  --muted:     #6b6477;   /* secondary text                                  */

  /* ---- Glow + glass (recomputed from --primary by script.js) ---- */
  --primary-glow: rgba(81, 42, 115, 0.30);
  --glass-border: rgba(255,255,255,0.65);
  --shadow-soft:  0 10px 30px rgba(31, 23, 48, 0.10);
  --shadow-card:  0 6px 22px rgba(31, 23, 48, 0.08);

  --radius:    18px;
  --radius-sm: 12px;
}

/* ---------------------------------------------------------------- base */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  /* subtle on-brand hexagon texture for depth (very light) */
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(81,42,115,0.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23512a73' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 34 L56 50 L56 84 L28 100 L0 84 L0 50 Z'/%3E%3C/g%3E%3C/svg%3E");
  min-height:100vh;
  line-height:1.45;
}

h1,h2,h3,.kpi-value,.spec7-name{ font-family:"Sora", system-ui, sans-serif; }

em{ font-style:normal; color:var(--muted); font-weight:500; font-size:0.85em; }

/* ============================================================ BANNER */
.banner{
  background:linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 78%, #8a52b8) 100%);
  color:#fff;
  border-bottom:3px solid var(--accent);   /* green brand line */
  box-shadow:var(--shadow-soft);
}
.banner-inner{
  max-width:1880px; margin:0 auto;
  padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.logo{ height:52px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.title-block h1{ font-size:1.7rem; font-weight:800; letter-spacing:-0.01em; line-height:1.1; }
.subtitle{ font-size:0.92rem; opacity:0.85; font-weight:500; }

/* SPEC-7 badge (mirrors product branding) */
.spec7-badge{
  display:inline-flex; flex-direction:column; align-items:center;
  background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.25);
  border-radius:10px; padding:6px 14px; backdrop-filter:blur(4px);
}
.spec7-name{ font-weight:800; font-size:1.15rem; letter-spacing:0.06em; }
.spec7-tag{ font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.85; }

/* banner actions */
.banner-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.unit-toggle{
  display:inline-flex; background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3); border-radius:999px; padding:3px; gap:2px;
}
.unit-btn{
  border:0; background:transparent; color:#fff; font-weight:700;
  padding:6px 16px; border-radius:999px; cursor:pointer; font-size:0.85rem;
  transition:background .15s ease;
}
.unit-btn.active{ background:#fff; color:var(--primary); }

.action-btn{
  border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.1);
  color:#fff; padding:8px 14px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:0.85rem;
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.action-btn:hover{ background:rgba(255,255,255,0.22); }
.action-btn:active{ transform:translateY(1px); }
.action-btn.primary{ background:var(--accent); border-color:var(--accent); color:#10300a; }
.action-btn.primary:hover{ filter:brightness(1.05); box-shadow:0 0 0 3px rgba(111,191,63,0.35); }

/* =========================================================== TOOLBAR */
.toolbar{
  max-width:1880px; margin:0 auto; padding:14px 28px 0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.toolbar-label{ font-weight:700; color:var(--muted); font-size:0.85rem; }
.chip{
  border:1px solid color-mix(in srgb, var(--primary) 30%, #fff);
  background:#fff; color:var(--primary);
  padding:7px 14px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:0.82rem;
  transition:all .15s ease;
}
.chip:hover{ box-shadow:0 0 0 3px var(--primary-glow); }
.chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.toolbar-note{ font-size:0.78rem; color:var(--muted); margin-left:auto; }

/* ============================================================ LAYOUT */
.layout{
  max-width:1880px; margin:0 auto; padding:18px 28px 8px;
  display:grid; grid-template-columns:minmax(340px, 0.9fr) 2fr; gap:22px;
  align-items:start;
}
.inputs{ display:flex; flex-direction:column; gap:18px; }
.results{ display:flex; flex-direction:column; gap:18px; }

/* ============================================================== CARDS */
.card{
  background:#fff;
  border:1px solid rgba(31,23,48,0.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:20px;
}
/* glassmorphism variant for result panels (secondary tint) */
.glass, .kpi{
  background:linear-gradient(160deg,
              color-mix(in srgb, var(--secondary) 55%, #fff) 0%,
              color-mix(in srgb, var(--secondary) 25%, #fff) 100%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.6);
}

.panel-title{
  font-size:1.02rem; font-weight:700; color:var(--primary);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.opt-tag{
  font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--secondary); color:var(--primary);
  padding:2px 8px; border-radius:999px; font-weight:700;
}
.hint{ font-size:0.78rem; color:var(--muted); margin:-6px 0 12px; }
.divider{ border:0; border-top:1px dashed rgba(31,23,48,0.12); margin:8px 0 14px; }

/* ============================================================ FIELDS */
.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:block; font-weight:600; font-size:0.88rem; margin-bottom:8px; color:var(--ink);
}
.unit-label, .suffix-static{ color:var(--muted); font-weight:500; font-size:0.82rem; }

.control-row{ display:flex; align-items:center; gap:12px; }
.slider{
  flex:1; -webkit-appearance:none; appearance:none; height:6px;
  border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary) var(--fill,50%),
            color-mix(in srgb, var(--secondary) 70%, #fff) var(--fill,50%), color-mix(in srgb, var(--secondary) 70%, #fff) 100%);
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--primary); cursor:pointer;
  box-shadow:0 0 0 3px var(--primary-glow); transition:box-shadow .15s ease;
}
.slider::-webkit-slider-thumb:hover{ box-shadow:0 0 0 5px var(--primary-glow); }
.slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:3px solid var(--primary); cursor:pointer; box-shadow:0 0 0 3px var(--primary-glow);
}

.num, .text-input{
  width:108px; padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid rgba(31,23,48,0.16); font-family:inherit; font-size:0.92rem;
  font-weight:600; text-align:right; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.text-input{ width:100%; text-align:left; font-weight:500; }
.num:focus, .text-input:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow);
}
/* compact two-up rows for the health panel */
.field.two .control-row{ gap:8px; }
.field.two .num{ width:92px; }

/* presets */
.preset-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.preset{
  border:1px solid color-mix(in srgb, var(--primary) 25%, #fff);
  background:color-mix(in srgb, var(--secondary) 30%, #fff);
  color:var(--primary); padding:4px 10px; border-radius:8px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:0.74rem; transition:all .12s ease;
}
.preset:hover{ background:var(--primary); color:#fff; }

/* colours */
.color-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0; }
.color-field{ text-align:center; }
.color-field label{ font-size:0.78rem; margin-bottom:6px; }
.color-field input[type=color]{
  width:100%; height:42px; border:1px solid rgba(31,23,48,0.16);
  border-radius:var(--radius-sm); cursor:pointer; background:#fff; padding:3px;
}

/* =============================================================== KPIs */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi{ padding:18px 20px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.kpi::after{ /* soft brand glow corner */
  content:""; position:absolute; inset:auto -30px -40px auto; width:120px; height:120px;
  background:radial-gradient(circle, var(--primary-glow), transparent 70%);
}
.kpi-label{ font-size:0.82rem; color:var(--primary); font-weight:700; position:relative; }
.kpi-value{ font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; position:relative;
  font-variant-numeric:tabular-nums; line-height:1.05; }
.kpi-sub{ font-size:0.78rem; color:var(--muted); font-weight:600; position:relative; }
.kpi-value.pos{ color:var(--good); } .kpi-value.neg{ color:var(--bad); }

/* ============================================================== CHART */
.chart-card .panel-title{ margin-bottom:6px; }
.chart{ display:flex; align-items:flex-end; gap:26px; height:240px; padding:18px 6px 0; }
.bar-group{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.bar-wrap{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.bar{
  width:62%; max-width:74px; border-radius:10px 10px 4px 4px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.4), var(--shadow-card);
  transition:height .4s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.bar .val{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:0.8rem; font-weight:800; white-space:nowrap; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bar-label{ font-size:0.78rem; font-weight:600; color:var(--muted); text-align:center; }

/* ============================================================= MATRIX */
.matrix-scroll{ overflow-x:auto; }
.matrix{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.matrix th, .matrix td{ padding:11px 12px; text-align:right; font-size:0.9rem; }
.matrix th:first-child, .matrix td:first-child{ text-align:left; font-weight:600; }
.matrix thead th{
  color:#fff; background:var(--primary); font-weight:700; font-size:0.82rem;
}
.matrix thead th:first-child{ border-radius:10px 0 0 0; }
.matrix thead th:last-child{ border-radius:0 10px 0 0; }
.matrix tbody tr{ border-bottom:1px solid rgba(31,23,48,0.07); }
.matrix tbody tr.total{ font-weight:800; background:rgba(255,255,255,0.45); }
.matrix tbody tr.total td{ font-size:0.98rem; border-top:2px solid var(--primary); }
.money.pos{ color:var(--good); } .money.neg{ color:var(--bad); }
.breakeven{ margin-top:14px; font-size:0.86rem; color:var(--muted); font-weight:600; }
.breakeven b{ color:var(--primary); }

/* ============================================================= FOOTER */
.footer{
  max-width:1880px; margin:18px auto 0; padding:18px 28px 36px;
}
.disclaimer{ font-size:0.76rem; color:var(--muted); line-height:1.5;
  border-top:1px solid rgba(31,23,48,0.1); padding-top:16px; max-width:1100px; }
.disclaimer strong{ color:var(--ink); }
.contact{ font-size:0.78rem; color:var(--primary); font-weight:600; margin-top:10px; }

/* =============================================================== TOAST */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--primary); color:#fff; padding:12px 22px; border-radius:12px;
  font-weight:600; font-size:0.9rem; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:50;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================= panel hide (toggled) */
.panel.hidden{ display:none; }

/* ====================================================== RESPONSIVE */
@media (max-width:1100px){
  .layout{ grid-template-columns:1fr; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .banner-inner{ padding:14px 16px; }
  .title-block h1{ font-size:1.35rem; }
  .toolbar, .layout, .footer{ padding-left:16px; padding-right:16px; }
  .kpi-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .kpi-value{ font-size:1.5rem; }
  .chart{ gap:12px; height:200px; }
  .num{ width:88px; }
  .toolbar-note{ display:none; }
  .spec7-badge{ display:none; }
}
@media (max-width:460px){
  .kpi-row{ grid-template-columns:1fr; }
  .banner-actions{ width:100%; }
}

/* ========================================================== PRINT / PDF */
@media print{
  @page{ size:landscape; margin:12mm; }
  body{ background:#fff; }
  .banner{ box-shadow:none; }
  .toolbar, .banner-actions, .preset-row, .color-grid,
  #btnResetColors, .slider, .toast, #panelSettings{ display:none !important; }
  .layout{ display:block; }
  .inputs, .results{ display:block; }
  .card{ break-inside:avoid; box-shadow:none; border:1px solid #ddd; margin-bottom:12px; }
  .num{ border:0; padding:0; width:auto; }
  .kpi-row{ display:grid; }
}