:root {
  --roi-brand: #1c4e80;
  --roi-brand-2: #22a699;
  --roi-text: #0f172a;
  --roi-muted: #475569;
  --roi-bg: #ffffff;
  --roi-surface: #f8fafc;
  --roi-border: #e2e8f0;
  --roi-focus: #93c5fd;
  --roi-bad: #b91c1c;
  --roi-good: #065f46;
  --roi-tooltip-maxw: 300px;
}

.roi * { box-sizing: border-box; }
.roi { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--roi-text); }

.roi .card { background: var(--roi-bg); border: 1px solid var(--roi-border); border-radius: 14px; padding: 18px; box-shadow: 0 4px 12px rgba(2,8,20,.04); }
.roi h2, .roi h3 { margin: 0 0 .6rem; font-weight: 700; color: var(--roi-brand); }
.roi h2 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.roi h3 { font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--roi-muted); }

.roi .grid { display: grid; gap: 14px; }
.roi .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roi .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 920px) { .roi .grid.cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .roi .grid.cols-2 { grid-template-columns: 1fr; } }

.roi .field { display: grid; gap: 6px; }
.roi label { font-size: .9rem; color: var(--roi-muted); display: flex; align-items: center; gap: 6px; }
.roi input[type="number"], .roi input[type="text"], .roi select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--roi-border); border-radius: 10px; background: #fff;
  outline: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.roi input:focus, .roi select:focus { border-color: var(--roi-focus); box-shadow: 0 0 0 3px rgba(147,197,253,.45); }

.roi .unit { color: var(--roi-muted); font-size: .85rem; margin-left: 2px; }

.roi .section { display: grid; gap: 14px; margin-bottom:1.2em; }
.roi .section-title { display: flex; align-items: center; justify-content: space-between; }

.roi #job-info { background-color:#d9e8ee; }
.roi #current-info { background-color:#efefef; }
.roi #new-info { background:linear-gradient(90deg, rgba(156, 209, 230, 1) 0%, rgba(190, 237, 223, 1) 100%); }
.roi #results-info { background-color:#d9e8ee; }

.roi .results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .roi .results { grid-template-columns: 1fr; } }
.roi .result { background: var(--roi-surface); border: 1px dashed var(--roi-border); border-radius: 12px; padding: 12px; }
.roi .result .label { color: var(--roi-muted); font-size: .85rem; }
.roi .result .value { font-weight: 700; font-size: 1.3rem; }

.roi .overall { background: #f0fdf4; border-color: #bbf7d0; }

.roi .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(34,166,153,.08); color: var(--roi-brand-2); font-weight: 600; font-size: .8rem; }

.roi .controls { display: flex; gap: 10px; flex-wrap: wrap; }
.roi button { appearance: none; border: 1px solid var(--roi-border); background: var(--roi-bg); padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.roi button.primary { background: var(--roi-brand); color: white; border-color: var(--roi-brand); }
.roi button:hover { filter: brightness(.98); }

/* Tooltip UI — 300px max width */
.roi .tip { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #1E2835; color: #fff; font-size: 12px; }
.roi .tip:hover .tip-body { opacity: 1; transform: translateY(0); pointer-events: auto; }
.roi .tip-body { position: absolute; z-index: 10; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); width: min(var(--roi-tooltip-maxw), 92vw); opacity: 0; pointer-events: none; transition: .15s ease; background: #0b1220; color: #e5e7eb; border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(2,8,20,.5); text-wrap: pretty; }
.roi .tip-body::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #0b1220; }

.roi .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .roi .split { grid-template-columns: 1fr; } }

.roi .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* --- Print / PDF adjustments --- */
@media print {
  /* Hide theme elements */
  header,
  footer,
  .site-header,
  .site-footer,
  #no-print,
  #no-print2,
  #masthead,
  #colophon,
  nav,
  .main-navigation,
  .page-header,
  .widget-area {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Scale down the calculator so it fits horizontally */
  .smart-roi-exact { 
    transform: scale(0.5);
    transform-origin: top left;
    width: 175%;
  }

  /* Clean print look */
  .smart-roi-exact .actions,
  .smart-roi-exact .tip {
    display: none !important;
  }

  .smart-roi-exact {
    color: #000;
    background: #fff !important;
  }

  .smart-roi-exact .card {
    break-inside: avoid;
  }

  .smart-roi-exact canvas {
    max-width: 100%;
    height: auto;
  }
}

@media print {
.inner-page-header {
    padding-top: 0;
}
.bs-section {
    padding: 40px 0;
}
  /* Ensure each major section starts on a new page */
  .roi .section.card.overall {
    page-break-before: always; /* Force new page before overall results */
  }

  /* Optionally force a break after certain elements */
  .roi .split {
    page-break-after: always;
  }

  /* Avoid breaking inside important containers */
  .roi .card,
  .roi .results,
  .roi .grid {
    page-break-inside: avoid;
  }

  /* Optional cleanup for print aesthetics */
  .roi button,
  .roi .controls {
    display: none !important; /* Hide buttons when printing */
  }

  /* Reduce margins for better fit on letter-size */
  @page {
    size: auto;
    margin: 12mm;
  }

  /* Page margins */
  @page {
    size: auto;          /* Let the browser decide page size (A4/Letter) */
    margin: 12mm;        /* Consistent page margins */
  }

  /* Each card starts on a new page and avoids splitting */
  .roi .card {
    page-break-before: always;
    page-break-inside: avoid;
    page-break-after: always;
  }

  /* Prevent small child elements from breaking */
  .roi .results,
  .roi .grid,
  .roi .section {
    page-break-inside: avoid;
  }

  /* Hide interactive UI elements in print */
  .roi button,
  .roi .controls {
    display: none !important;
  }

  /* Optional – remove background colors for cleaner PDF */
  .roi,
  .roi .card,
  .roi .overall {
    background: #fff !important;
    box-shadow: none !important;
  }

  /* Optional – tighten spacing for page fit */
  .roi .card {
    margin: 0 0 12mm 0;
    padding: 12mm;
  }

  /* Optional – ensure consistent typography */
  body,
  .roi {
    font-size: 12pt;
    line-height: 1.4;
  }
}