/*
  Full-width breakout while staying under the theme header/menu.
  Works even if the page content is inside a narrow container.
*/

/* ---- Modern light theme (clean + readable) ---- */
.fh-cpv3-wrap{
  position:relative;
  width:100vw;
  left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  padding:24px;
  box-sizing:border-box;
  overflow-x:auto;
  background:linear-gradient(180deg,#fbfcfe 0%, #f7f9fc 100%);
}

#fh-cpv3-root{
  --fh-bg:#f7f9fc;
  --fh-card:#ffffff;
  --fh-text:#0b1220;
  --fh-muted:#52606d;
  --fh-border:#e6eaf0;
  --fh-border2:#d7dee8;
  --fh-shadow:0 10px 30px rgba(16,24,40,.06);
  --fh-shadow2:0 2px 10px rgba(16,24,40,.05);
  --fh-radius:16px;
  --fh-radius2:12px;
  --fh-accent:#2563eb;
  --fh-accent-soft:rgba(37,99,235,.10);
  --fh-good:#16a34a;
  --fh-good-soft:rgba(22,163,74,.12);
  --fh-warn:#d97706;
  --fh-warn-soft:rgba(217,119,6,.14);
  --fh-bad:#dc2626;
  --fh-bad-soft:rgba(220,38,38,.12);
}

#fh-cpv3-root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:1500px;margin:0 auto;padding:0 12px;color:var(--fh-text);}

/* Forms: keep inputs narrower for better readability */
.fh-form{max-width:820px;margin:0 auto;}
.fh-topbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:10px 0 14px;flex-wrap:wrap;}
.fh-tab{border:1px solid var(--fh-border2);background:var(--fh-card);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:13px;box-shadow:var(--fh-shadow2);transition:.15s transform,.15s box-shadow,.15s background;}
.fh-tab:hover{transform:translateY(-1px);box-shadow:var(--fh-shadow);} 
.fh-tab.is-active{font-weight:700;}
.fh-topbar-right{display:flex;gap:8px;align-items:center;}
.fh-nav{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;}
.fh-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.fh-btn{border:1px solid var(--fh-border2);background:var(--fh-card);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:13px;box-shadow:var(--fh-shadow2);transition:.15s transform,.15s box-shadow,.15s background;}
.fh-btn:hover{transform:translateY(-1px);box-shadow:var(--fh-shadow);} 
.fh-btn.active{font-weight:700;}
.fh-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.fh-card{border:1px solid var(--fh-border);border-radius:var(--fh-radius);padding:14px 14px;margin:14px 0;background:var(--fh-card);box-shadow:var(--fh-shadow);}
.fh-h2{margin:0 0 8px 0;font-size:18px;}
.fh-muted{color:var(--fh-muted);font-size:13px;margin-bottom:10px;}
.fh-table{width:100%;border-collapse:collapse;}
.fh-table th,.fh-table td{border-top:1px solid var(--fh-border);padding:10px 8px;text-align:left;font-size:13px;vertical-align:top;}
.fh-table th{font-size:11px;color:var(--fh-muted);text-transform:uppercase;letter-spacing:.08em;position:sticky;top:0;background:var(--fh-card);z-index:1;}
.fh-table tbody tr:nth-child(odd){background:rgba(15,23,42,.02);} 

/* Keep numeric columns compact, allow long text columns to wrap */
.fh-table th:nth-child(-n+8),.fh-table td:nth-child(-n+8){white-space:nowrap;}
.fh-table td:nth-child(n+9){white-space:normal;min-width:180px;}
.fh-badge{display:inline-block;border:1px solid var(--fh-border2);border-radius:999px;padding:3px 10px;font-size:12px;background:#fff;}
.fh-badge.is-good{border-color:rgba(22,163,74,.35);background:var(--fh-good-soft);color:var(--fh-good);}
.fh-badge.is-warn{border-color:rgba(217,119,6,.35);background:var(--fh-warn-soft);color:var(--fh-warn);}
.fh-badge.is-bad{border-color:rgba(220,38,38,.35);background:var(--fh-bad-soft);color:var(--fh-bad);}
.fh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;}
.fh-grid>*{min-width:0;}

/* Portfolio TX form: give more room to the Asset autocomplete column */
.fh-grid-tx{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.fh-box{border:1px dashed var(--fh-border2);border-radius:var(--fh-radius2);padding:10px;background:rgba(37,99,235,.03);}
.fh-kv{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;}
.fh-k{color:#57606a;font-size:12px;}
.fh-v{font-weight:700;}
.fh-error{border:1px solid rgba(220,38,38,.35);background:var(--fh-bad-soft);color:var(--fh-bad);border-radius:var(--fh-radius2);padding:10px;margin:10px 0;}

/* Stats page */
.fh-stats{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;}
.fh-stat{font-size:13px;color:#24292f;}
.fh-progress{border:1px solid var(--fh-border);background:#fff;border-radius:var(--fh-radius2);padding:12px;box-shadow:var(--fh-shadow2);margin:12px 0;}
.fh-progress-bar{height:10px;border-radius:999px;overflow:hidden;background:rgba(15,23,42,.06);border:1px solid var(--fh-border);}
.fh-progress-fill{height:100%;background:var(--fh-accent);opacity:.55;}
.fh-progress-text{margin-top:8px;font-size:13px;color:var(--fh-muted);}
.fh-stats-page .fh-note{border:1px solid var(--fh-border);background:rgba(37,99,235,.05);border-radius:var(--fh-radius2);padding:10px;margin:12px 0;color:var(--fh-muted);font-size:13px;}

/* Stats range bar */
.fh-range-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--fh-border);background:rgba(0,0,0,.02);border-radius:var(--fh-radius2);padding:10px 12px;margin:12px 0;flex-wrap:wrap;}
.fh-range-left{font-size:13px;color:var(--fh-muted);}
.fh-range-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fh-select{border:1px solid var(--fh-border);border-radius:10px;padding:6px 10px;background:#fff;font-size:13px;}
.fh-card-title{font-weight:700;margin-bottom:8px;}
.fh-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fh-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.fh-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.fh-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:10px 0;}
.fh-metric{border:1px solid var(--fh-border);border-radius:var(--fh-radius2);padding:12px;background:var(--fh-card);box-shadow:var(--fh-shadow2);}
.fh-metric-k{font-size:12px;color:#57606a;margin-bottom:6px;}
.fh-metric-v{font-size:16px;font-weight:800;}
.fh-minibar{position:relative;border:1px solid var(--fh-border);border-radius:999px;height:22px;overflow:hidden;min-width:120px;background:rgba(15,23,42,.04);}
.fh-minibar-fill{height:100%;background:var(--fh-accent);opacity:.25;}
.fh-minibar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#24292f;}

/* Inputs (slightly denser UI) */
/* IMPORTANT: do not force width:100% on grid items – it can cause overlap in some layouts. */
.fh-input{width:auto;min-width:0;border:1px solid var(--fh-border2);border-radius:10px;padding:8px 10px;font-size:13px;background:var(--fh-card);box-shadow:var(--fh-shadow2);outline:none;transition:border-color .15s, box-shadow .15s;}
.fh-input:focus{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.fh-form .fh-btn{margin-top:10px;background:var(--fh-accent);border-color:rgba(37,99,235,.55);color:#fff;}
.fh-form .fh-btn:hover{background:#1d4ed8;}

/* Autocomplete (in-flow to avoid overlapping other form fields) */
.fh-autocomplete{display:flex;flex-direction:column;}
.fh-ac-dd{position:relative;border:1px solid var(--fh-border2);border-radius:14px;background:var(--fh-card);box-shadow:var(--fh-shadow);max-height:260px;overflow:auto;z-index:50;margin-top:6px;}
.fh-ac-item{padding:10px 12px;font-size:13px;cursor:pointer;border-top:1px solid var(--fh-border);}
.fh-ac-item:first-child{border-top:none;}
.fh-ac-item:hover{background:rgba(37,99,235,.08);}
.fh-ac-item.is-empty{cursor:default;color:var(--fh-muted);}
.fh-ac-hint{font-size:11px;color:var(--fh-muted);margin-top:6px;}
@media(max-width:980px){.fh-grid-6{grid-template-columns:repeat(2,1fr);}}
@media(max-width:780px){.fh-grid{grid-template-columns:1fr;}.fh-grid-2{grid-template-columns:1fr;}.fh-grid-3{grid-template-columns:1fr;}}
@media(max-width:780px){.fh-grid{grid-template-columns:1fr;}}


/* 4-up metric grid (Portfolio summary) */
.fh-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start;}
.fh-grid-4>*{min-width:0;}
@media (max-width: 1100px){.fh-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 700px){.fh-grid-4{grid-template-columns:minmax(0,1fr);}}

/* Inline table inputs */
.fh-input-inline{
  width:90px;           /* compact default */
  min-width:60px;
  max-width:110px;
  padding:4px 6px;
  font-size:12px;
  border-radius:8px;
  box-shadow:none;
  background:var(--fh-card);
}

/* Inline edit states */
.fh-input-inline.is-dirty{ outline:2px solid rgba(59,130,246,.22); }
.fh-input-inline.is-saving{ opacity:.75; }
.fh-input-inline.is-saved{ outline:2px solid rgba(34,197,94,.22); }
.fh-input-inline.is-error{ outline:2px solid rgba(239,68,68,.22); }
.fh-row-dirty{outline:2px solid rgba(245,158,11,.35);outline-offset:-2px;border-radius:10px;}

.fh-btn-warn{border-color:var(--fh-warn);color:var(--fh-warn);}

/* Portfolio: compact layout */
.fh-portfolio-page{ font-size:13px; }
.fh-portfolio-page .fh-h2{ margin-bottom:6px; }
.fh-portfolio-page .fh-metric-k{ font-size:11px; }
.fh-portfolio-page .fh-metric-v{ font-size:18px; }
.fh-portfolio-page .fh-table th{ font-size:11px; }
.fh-portfolio-page .fh-table td{ font-size:12px; }
.fh-portfolio-page .fh-input{ padding:6px 8px; font-size:12px; }
.fh-portfolio-page .fh-label{ font-size:11px; }
.fh-portfolio-subcard{ padding:14px 16px; }

/* Monitor (Watchlist) expanded details */
.fh-watch-details{ padding:10px 0 4px; }
.fh-watch-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:16px; }
@media (max-width: 1000px){ .fh-watch-grid{ grid-template-columns: 1fr; } }
.fh-watch-chart, .fh-watch-insights{ background:var(--fh-card); border:1px solid var(--fh-border); border-radius:14px; padding:12px; }
.fh-watch-details-row td{ background: transparent; }

/* Loading overlay / progress */
.fh-loading{margin:14px 0;}
.fh-load-card{border:1px solid var(--fh-border);background:var(--fh-card);border-radius:18px;box-shadow:var(--fh-shadow);padding:14px;}
.fh-load-top{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;}
.fh-load-title{display:flex;align-items:center;gap:10px;font-weight:600;}
.fh-spinner{width:16px;height:16px;border-radius:999px;border:2px solid var(--fh-border2);border-top-color:rgba(37,99,235,.9);animation:fhspin .9s linear infinite;}
@keyframes fhspin{to{transform:rotate(360deg);}}
.fh-load-sub{color:var(--fh-muted);font-size:12px;}
.fh-load-bar{height:10px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;margin-top:10px;}
.fh-load-bar>div{height:100%;width:25%;background:rgba(37,99,235,.35);animation:fhsweep 1.4s ease-in-out infinite;}
@keyframes fhsweep{0%{transform:translateX(-120%);}100%{transform:translateX(420%);}}
.fh-load-steps{margin-top:12px;display:grid;gap:6px;}
.fh-load-step{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fh-muted);}
.fh-load-step b{color:var(--fh-text);font-weight:600;}
.fh-dot{width:8px;height:8px;border-radius:999px;background:rgba(148,163,184,.6);}
.fh-dot.is-ok{background:rgba(34,197,94,.85);} 
.fh-dot.is-run{background:rgba(59,130,246,.85);} 
.fh-dot.is-err{background:rgba(239,68,68,.85);} 



/* --- Indicators & colors (1.0.9.18) --- */
.fh-num.pos{ color:#16a34a; font-weight:600; }
.fh-num.neg{ color:#dc2626; font-weight:600; }
.fh-num.neutral{ color:#334155; font-weight:600; }

.fh-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  margin-right:6px;
  margin-bottom:4px;
  white-space:nowrap;
}
.fh-pill.is-good{ color:#16a34a; border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.06); }
.fh-pill.is-warn{ color:#ca8a04; border-color:rgba(202,138,4,.35); background:rgba(202,138,4,.06); }
.fh-pill.is-bad{ color:#dc2626; border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.06); }
.fh-pill.is-heat{ color:#ea580c; border-color:rgba(234,88,12,.40); background:rgba(234,88,12,.07); }
.fh-pill.is-neutral{ color:#475569; border-color:rgba(71,85,105,.25); background:rgba(71,85,105,.04); }

.fh-timing{ display:flex; flex-direction:column; gap:2px; }
.fh-timing-micro{ display:flex; flex-wrap:wrap; }