/* ============================================================
   MEPVAULT Calc Engine — UI Stylesheet
   Brand: Vault Navy #0B1C35, Vault Gold #D4A843, MEP Cyan #00B4CC
   Typography: Rajdhani (display), Space Mono (labels/mono)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

.mepvault-calc-frame, .mepvault-calc-frame * { box-sizing: border-box; }

.mepvault-calc-frame {
  --mvc-navy:#0B1C35;
  --mvc-gold:#D4A843;
  --mvc-cyan:#00B4CC;
  --mvc-white:#FFFFFF;
  --mvc-grey:#F2F4F7;
  --mvc-dark-grey:#324158;
  --mvc-text:#0B1C35;
  --mvc-radius:8px;
  --mvc-spacing:16px;

  font-family:"Rajdhani","Segoe UI",system-ui,sans-serif;
  color:var(--mvc-text);
  background:var(--mvc-white);
  border:1px solid #E1E5EE;
  border-radius:var(--mvc-radius);
  padding: clamp(16px, 3vw, 32px);
  margin: 24px 0;
  max-width:100%;
  position:relative;
  overflow:hidden;
}

/* Cyan grid background, very subtle */
.mepvault-calc-frame::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(var(--mvc-cyan) 1px, transparent 1px), linear-gradient(90deg, var(--mvc-cyan) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:0.04;
  pointer-events:none;
  z-index:0;
}
.mepvault-calc-frame > * { position:relative; z-index:1; }

/* ===== Header ===== */
.mvc-header { display:flex; gap:18px; align-items:flex-start; padding-bottom:16px; border-bottom:2px solid var(--mvc-gold); margin-bottom:24px; }
.mvc-logo { width:54px; height:54px; flex-shrink:0; background:var(--mvc-navy); border-radius:var(--mvc-radius); display:flex; align-items:center; justify-content:center; }
.mvc-logo svg { width:32px; height:32px; }
.mvc-section-label { font-family:"Space Mono",ui-monospace,monospace; font-size:11px; font-weight:700; color:var(--mvc-gold); letter-spacing:1.5px; text-transform:uppercase; }
.mvc-title { font-family:"Rajdhani",sans-serif; font-weight:700; font-size:clamp(22px, 3vw, 30px); color:var(--mvc-navy); margin:6px 0 4px; line-height:1.15; letter-spacing:0.3px; }
.mvc-subtitle { font-size:14px; color:var(--mvc-dark-grey); margin:0; }

/* ===== Form ===== */
.mvc-form { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px 20px; margin-bottom:20px; }
.mvc-field { display:flex; flex-direction:column; gap:4px; }
.mvc-field label { font-size:13px; font-weight:600; color:var(--mvc-navy); }
.mvc-field .mvc-help { font-size:11px; color:var(--mvc-dark-grey); margin-top:2px; line-height:1.4; }
.mvc-field input, .mvc-field select { font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid #C7CEDC; border-radius:6px; background:var(--mvc-white); color:var(--mvc-text); transition:border-color .15s, box-shadow .15s; }
.mvc-field input:focus, .mvc-field select:focus { outline:none; border-color:var(--mvc-cyan); box-shadow:0 0 0 3px rgba(0,180,204,0.15); }
.mvc-field input.error, .mvc-field select.error { border-color:#D14343; box-shadow:0 0 0 3px rgba(209,67,67,0.10); }

/* ===== Calculate button ===== */
.mvc-calc-btn { background:var(--mvc-navy); color:var(--mvc-white); font-family:"Space Mono",monospace; font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:12px 28px; border:none; border-radius:6px; cursor:pointer; transition:background .15s, transform .05s; }
.mvc-calc-btn:hover { background:var(--mvc-gold); color:var(--mvc-navy); }
.mvc-calc-btn:active { transform:translateY(1px); }
.mvc-calc-btn:disabled { opacity:0.6; cursor:wait; }

/* ===== Result ===== */
.mvc-result { margin-top:24px; padding:20px; background:var(--mvc-grey); border-left:4px solid var(--mvc-cyan); border-radius:var(--mvc-radius); }
.mvc-result-title { font-family:"Space Mono",monospace; font-size:11px; color:var(--mvc-gold); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; font-weight:700; }
.mvc-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:16px; }
.mvc-card { background:var(--mvc-white); padding:14px; border-radius:6px; border:1px solid #E1E5EE; }
.mvc-card-label { font-size:11px; color:var(--mvc-dark-grey); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:4px; font-weight:600; }
.mvc-card-value { font-family:"Rajdhani",sans-serif; font-size:24px; font-weight:700; color:var(--mvc-navy); line-height:1.1; }
.mvc-card-unit { font-size:13px; font-weight:500; color:var(--mvc-dark-grey); margin-left:4px; }
.mvc-card.mvc-card-good { border-left:4px solid #2E7D32; }
.mvc-card.mvc-card-warn { border-left:4px solid #ED6C02; }
.mvc-card.mvc-card-bad  { border-left:4px solid #D14343; }

/* Design / secondary stats */
.mvc-design-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:8px 16px; padding:12px; background:var(--mvc-white); border-radius:6px; margin-bottom:12px; }
.mvc-design-row { font-size:13px; color:var(--mvc-dark-grey); }
.mvc-design-row strong { color:var(--mvc-navy); }

/* Warnings */
.mvc-warnings { margin-top:12px; padding:12px; background:#FFF6E0; border-left:4px solid var(--mvc-gold); border-radius:6px; }
.mvc-warnings ul { margin:6px 0 0; padding-left:20px; font-size:13px; color:var(--mvc-navy); }
.mvc-warnings li { margin-bottom:4px; }

/* Export row */
.mvc-export-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.mvc-export-row button { background:var(--mvc-white); border:1px solid var(--mvc-navy); color:var(--mvc-navy); font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:8px 14px; border-radius:5px; cursor:pointer; transition:all .15s; }
.mvc-export-row button:hover { background:var(--mvc-navy); color:var(--mvc-white); }

/* ===== Disclosure / References / Legal ===== */
.mvc-blocks { margin-top:24px; display:grid; gap:12px; }
.mvc-block { background:var(--mvc-grey); border-radius:6px; padding:14px 16px; }
.mvc-block-title { font-family:"Space Mono",monospace; font-size:11px; color:var(--mvc-gold); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; font-weight:700; }
.mvc-block-body { font-size:13px; color:var(--mvc-navy); line-height:1.55; }
.mvc-block-body ul { margin:6px 0; padding-left:18px; }
.mvc-block-body li { margin-bottom:3px; }

/* ===== Print stylesheet ===== */
@media print {
  .mepvault-calc-frame { border:none; padding:0; margin:0; box-shadow:none; }
  .mepvault-calc-frame::before { display:none; }
  .mvc-form, .mvc-calc-btn, .mvc-export-row { display:none; }
  .mvc-result { background:var(--mvc-white); border-left:4px solid var(--mvc-navy); }
}

/* ===== Errors ===== */
.mepvault-calc-error { padding:14px 18px; background:#FBEDED; border-left:4px solid #D14343; color:#7B1F1F; font-family:"Rajdhani",sans-serif; border-radius:6px; }

/* ===== Charts (Chart.js multi-output extension) ===== */
.mvc-charts { margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:20px; }
.mvc-chart-wrap { background:#FFF; border:1px solid #E1E5EE; border-radius:8px; padding:14px 16px; }
.mvc-chart-title { font-family:"Space Mono",monospace; font-size:11px; color:#D4A843; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:6px; font-weight:700; }
.mvc-chart-subtitle { font-size:12px; color:#324158; margin-bottom:10px; }
.mvc-chart-note { font-size:11px; color:#324158; margin-top:8px; font-style:italic; }
.mvc-chart-error { padding:20px; background:#FBEDED; color:#7B1F1F; border-radius:6px; text-align:center; }
@media print {
  .mvc-charts { page-break-inside:avoid; }
}