.braid-roi-table{width:100%;border-collapse:collapse}
.braid-roi-table th,.braid-roi-table td{padding:.6rem .7rem;vertical-align:middle}
.braid-roi-table th{text-align:left;width:55%}
.braid-roi-table td{width:45%}
.braid-roi .braid-roi-label{font-weight:600}
.braid-roi .braid-roi-result{font-weight:600;font-size:1.05rem}
.braid-roi-btn{background:var(--et_pb_primary_color,#2ea3f2);border:none;color:#fff;padding:.6rem 1rem;border-radius:6px;cursor:pointer;font-weight:600}
.braid-roi-btn:hover,.braid-roi-btn:focus{filter:brightness(.95)}
/* CSS-only tooltips */
.braid-roi-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:.85em;font-weight:700;background:#eef2ff;color:#374151;border-radius:50%;cursor:help;outline:0}
.braid-roi-tooltip::after{content:attr(aria-label);position:absolute;left:50%;top:0;transform:translate(-50%,calc(-100% - 8px));white-space:normal;min-width:220px;max-width:320px;background:#111827;color:#f9fafb;padding:.45rem .55rem;border-radius:.4rem;font-size:.85em;line-height:1.2;box-shadow:0 6px 16px rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:10}
.braid-roi-tooltip::before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-4px) rotate(45deg);width:8px;height:8px;background:#111827;opacity:0;transition:opacity .12s ease;z-index:9}
.braid-roi-tooltip:hover::after,.braid-roi-tooltip:focus::after,.braid-roi-tooltip:hover::before,.braid-roi-tooltip:focus::before{opacity:1}
/* Hide Calculate row only when JS has run OK */
.braid-roi.js-ok .braid-roi-actions{display:none!important}
/* Helpers for inputs/results */
.braid-roi-input{max-width:100%}
@media (max-width:640px){.braid-roi-table th{width:50%}.braid-roi-table td{width:50%}}


/* ======================================================
   Braid ROI — Brand Patch (v1.2.4h)
   Purpose: centralise all visual theming in ONE place.
   Usage: load this AFTER the plugin's braid-roi.css.
   ====================================================== */

/* ---------- Brand tokens ---------- */
:root {
  --braid-brand-primary: rgba(0,0,139, 1);
  --braid-brand-accent : rgba(255,165,0, 1);
}

/* ---------- Scope all rules to the calculator wrapper ---------- */
.braid-roi {
  /* Optional: set a brand font here
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
  color: #111827; /* base text; keep legible */
}

/* Table layout (inherits from plugin but restated here for single-file control) */
.braid-roi .braid-roi-table { width: 100%; border-collapse: collapse; }
.braid-roi .braid-roi-table th,
.braid-roi .braid-roi-table td { padding: .6rem .7rem; vertical-align: middle; }
.braid-roi .braid-roi-table th { text-align: left; width: 55%; }
.braid-roi .braid-roi-table td { width: 45%; }

/* Labels & results */
.braid-roi .braid-roi-label  { font-weight: 600; color: #1f2937; }
.braid-roi .braid-roi-result { font-weight: 600; font-size: 1.05rem; color: #111827; }

/* Inputs */
.braid-roi .braid-roi-input { max-width: 100%; }
.braid-roi .braid-roi-input[type="number"] { text-align: right; }

/* Action button (brand) */
.braid-roi .braid-roi-btn {
  background: var(--braid-brand-primary);
  border: none; color: #fff; padding: .6rem 1rem; border-radius: 6px;
  cursor: pointer; font-weight: 600;
}
.braid-roi .braid-roi-btn:hover,
.braid-roi .braid-roi-btn:focus { filter: brightness(0.95); }

/* Hide Calculate row ONLY after JS ran */
.braid-roi.js-ok .braid-roi-actions { display: none !important; }

/* Tooltip chip + bubble themed with brand */
.braid-roi .braid-roi-tooltip { background: rgba(235,220,105,.25); color: var(--braid-brand-primary); }
.braid-roi .braid-roi-tooltip::after,
.braid-roi .braid-roi-tooltip::before { background: var(--braid-brand-primary); }
.braid-roi .braid-roi-tooltip::after { color: #fff; }

/* Section divider above results */
.braid-roi .braid-roi-actions + tr th,
.braid-roi .braid-roi-actions + tr td { border-top: 4px solid rgba(17,24,39,.1); }

/* ===== Result rows — explicit hooks ===== */
/* Row containers */
.braid-roi .braid-roi-row--waste        th,
.braid-roi .braid-roi-row--waste        td { /* no bg by default */ }

.braid-roi .braid-roi-row--hours-saved  th,
.braid-roi .braid-roi-row--hours-saved  td { /* no bg by default */ }

.braid-roi .braid-roi-row--value-per-hour th, ({vertical-align: top}
.braid-roi .braid-roi-row--value-per-hour td { /* no bg by default */ }

.braid-roi .braid-roi-row--fte          th,
.braid-roi .braid-roi-row--fte          td { /* no bg by default */ }

/* Emphasise Payback row using brand colours */
.braid-roi .braid-roi-row--payback th,
.braid-roi .braid-roi-row--payback td {
  /* If your browser supports color-mix():
     background: color-mix(in oklab, var(--braid-brand-accent) 18%, white); */
  background: rgba(235,220,105,1);
  border-left: 4px solid var(--braid-brand-primary);
}

/* Value elements */
/*.braid-roi .braid-roi-result--waste        { color: var(--braid-brand-primary); font-weight: 700; }*/

.braid-roi .braid-roi-result--waste        { color: #ff0000; font-weight: 700; }

/*.braid-roi .braid-roi-result--hours-saved  { color: #00ff00; font-weight: 700; }*/
.braid-roi .braid-roi-result--value-per-hour { color: #111827; font-weight: 700; }
.braid-roi .braid-roi-result--fte          { color: var(--braid-brand-primary); font-weight: 700; }
.braid-roi .braid-roi-result--payback      {
  color: var(--braid-brand-primary); font-weight: 700;
  /* If your browser supports color-mix():
     background: color-mix(in oklab, var(--braid-brand-accent) 35%, white); */
  background: rgba(235,220,105,.35);
  display: inline-block; padding: .15rem .55rem; border-radius: 6px;
}

/* Copy button and toast */
.braid-roi .braid-roi-copy-btn {
  background: transparent; border: 1px solid #d1d5db; color: #374151;
  padding: .35rem .6rem; border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.braid-roi .braid-roi-copy-btn:hover,
.braid-roi .braid-roi-copy-btn:focus { background: #f3f4f6; }

.braid-roi .braid-roi-toast { color: var(--braid-brand-primary); }

/* Responsive table width adjustments */
@media (max-width: 640px) {
  .braid-roi .braid-roi-table th { width: 50%; }
  .braid-roi .braid-roi-table td { width: 50%; }
}


/* --- Toast visibility & animation (Copy to clipboard) --- */
.braid-roi .braid-roi-toast {
  opacity: 0;
  visibility: hidden; /*sth*/
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;          /* never intercept clicks */
  /* Optional: make sure it doesn’t break layout if themes add margins */
  margin-top: .35rem;
}

/* Shown only while JS adds this class, then removed after timeout */
.braid-roi .braid-roi-toast.is-visible {
  opacity: 1;
  visibility: visible; /*sth*/
  transform: translateY(0);
}


/* ===============================
   Diagnostics: Toast CSS inactive
   =============================== */
/* If the toast is visible on screen WITHOUT the .is-visible class,
   something (e.g., minify/combine/RUCSS) likely removed the base hidden rule. */
.braid-roi .braid-roi-toast:not(.is-visible) {
  /* Visual warnings (only show if the element is actually visible) */
  outline: 2px solid #e11d48;             /* red-500 */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.2);
  position: relative;
  animation: braid-roi-toast-pulse 1.2s ease-in-out infinite;
}

/* Add a small badge so it’s obvious in screenshots / quick checks */
.braid-roi .braid-roi-toast:not(.is-visible)::after {
  content: "Toast CSS inactive";
  position: absolute;
  top: -10px;
  right: -10px;
  background: #e11d48;
  color: #fff;
  font: 600 10px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: .02em;
  z-index: 1;
}

/* Gentle pulse to draw attention without being obnoxious */
@keyframes braid-roi-toast-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0.10); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .braid-roi .braid-roi-toast:not(.is-visible) { animation: none; }
}