/* =========================================================
   Sharemaestro Terminal — Light Theme UI (CLEAN + COMPLETE)
   ========================================================= */

/* -------- Base vars -------- */
:root{
  --sm-page:#f6f8fa;
  --sm-surface:#ffffff;
  --sm-soft:#f9fbfd;
  --sm-border:#e5e9ef;
  --sm-text:#0b1f33;
  --sm-muted:#6c757d;
  --sm-accent:#2b6fff;

  --chip-bg:#eef2f7;
  --chip-fg:#0b1f33;

  --radius:16px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 2px 8px rgba(16,24,40,.08);
}

/* -------- Reset / base -------- */
html,body{ background:var(--sm-page); color:var(--sm-text); }
*,*::before,*::after{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

/* -------- Typography -------- */
h1,h2,h3,h4{ color:var(--sm-text); margin:0 0 .25rem; }
p{ color:#344054; margin:0 0 .75rem; line-height:1.55; }
small,.small{ color:var(--sm-muted); }

/* -------- Container -------- */
.container-xxl{ max-width:1320px; }

/* =========================================================
   HEADER / INFO
   ========================================================= */
.info-card{
  background:var(--sm-surface);
  border:1px solid var(--sm-border);
  border-radius:var(--radius);
  padding:18px;
}
.entity-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.entity-row h1{
  margin:0;
  font-size:clamp(1.25rem,1vw + 1rem,1.75rem);
  color:var(--sm-text);
}
.badge-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem; border-radius:9999px;
  background:var(--chip-bg); color:var(--chip-fg);
  border:1px solid var(--sm-border);
  font-weight:700; font-size:.8rem;
}
.badge-chip.exchange{ background:#f0f7ff; color:#003366; border-color:#d6e6ff; }
.meta-right{ margin-left:auto; color:var(--sm-muted); font-size:.85rem; }

/* Stats row (centered blocks + centered text) */
.stats-wrap{
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:10px;
  justify-content:center;
}
.stat{
  background: #fff;
  border:0px solid var(--sm-border);
  border-radius:12px;
  padding:.5rem .75rem;
  min-width:150px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.stat .label{ display:flex; gap:.35rem; align-items:center; color:var(--sm-muted); font-size:.85rem; line-height:1.2; }
.stat .value{ margin-top:.25rem; font-weight:700; color:var(--sm-text); font-size:1.05rem; }

/* =========================================================
   UNDER-CHART LINKS (Console / Signal History / Sandbox)
   ========================================================= */
.hub-links{ display:flex; flex-wrap:wrap; gap:.6rem; }
.hub-link{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem; border-radius:999px; font-weight:800; letter-spacing:.01em;
  border:1px solid #dfe6ee;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  color:#0b1f33;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.hub-link i{ font-size:1rem; opacity:.9; }
.hub-link:hover{
  border-color:#cfd8e3;
  background:linear-gradient(180deg,#ffffff 0%, #f4f8ff 100%);
  color:#111827;
  transform:translateY(-1px);
}

/* =========================================================
   CONTROLS (Tabs + Image/Interactive)
   ========================================================= */
.controls-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:.75rem;
  margin:10px 0 14px;
}
.controls-row .btn-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
.controls-row .btn-toggle-group{ margin-left:auto; }

/* Chart tab buttons */
.btn-group .chart-btn{
  border:1px solid #dfe6ee!important;
  background:#fff!important; color:#344054!important;
  border-radius:999px!important;
  padding:.45rem .9rem!important;
  font-weight:700!important; letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  line-height:1.1;
  font-size:clamp(.85rem,.9vw + .2rem,.95rem);
  white-space:nowrap;
}
.btn-group .chart-btn:hover{
  border-color:#cfd8e3!important; background:#f9fbfe!important; color:#111827!important;
}
.btn-group .chart-btn.active,
.btn-group .chart-btn[aria-selected="true"]{
  background:var(--sm-accent)!important; border-color:var(--sm-accent)!important; color:#fff!important;
  box-shadow:0 2px 6px rgba(43,111,255,.32);
}

/* Image/Interactive segmented toggle */
.btn-toggle-group{
  display:inline-flex; gap:3px; padding:3px;
  border:1px solid #dfe6ee; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.btn-toggle-group .btn.toggle{
  border:0!important; background:transparent; color:#344054; font-weight:800;
  padding:.42rem .85rem; border-radius:999px; line-height:1;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}
.btn-toggle-group .btn.toggle:hover{ background:#f5f8ff; color:#111827; transform:translateY(-1px); }
.btn-toggle-group .btn.toggle[aria-pressed="true"]{ background:var(--sm-accent); color:#fff; box-shadow:0 2px 6px rgba(43,111,255,.32); }

/* =========================================================
   CHART AREA
   ========================================================= */
.section-soft-bg{
  background:#f7f9fc;
  border:1px solid #e6edf5;
  border-radius:var(--radius);
  padding:14px;
}

/* White “mat” around every chart */
.chart-frame.unified .chart-pad{
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:var(--radius-md);
  padding:16px;
}

/* Image variant keeps rounded look */
.img-fluid.rounded{ border-radius:var(--radius-sm); }

/* Interactive charts: aspect + rounded edges */
.interactive-holder{ width:100%; }
.interactive-holder .chart-pad{ padding:16px; background:#fff; border:1px solid #e6edf5; border-radius:var(--radius-md); }
.interactive-holder .interactive-wrap{
  position:relative; width:100%; padding-bottom:56.25%;
  border-radius:var(--radius-sm); overflow:hidden; background:transparent;
}
.interactive-holder .interactive-wrap > .chart-dynamic,
.interactive-holder .interactive-wrap > iframe,
.interactive-holder .interactive-wrap > .js-plotly-plot,
.interactive-holder .interactive-wrap > .plotly-container{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  border:0; background:#fff; border-radius:var(--radius-sm);
}
.interactive-holder .interactive-wrap .plotly,
.interactive-holder .interactive-wrap .svg-container{
  width:100% !important; height:100% !important;
}

/* Centered spinner — INTERACTIVE mode */
.interactive-holder .interactive-wrap > .chart-dynamic.loading{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-radius:var(--radius-sm);
  z-index:5; pointer-events:none;
}
.interactive-holder .interactive-wrap > .chart-dynamic.loading .spinner,
.interactive-holder .interactive-wrap > .chart-dynamic.loading span{
  margin:0 6px;
}

/* Centered spinner — IMAGE mode (terminal.js uses .img-loader) */
.chart-frame.unified .ratio{ position:relative; } /* context */
.chart-frame.unified .ratio > .img-loader{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:var(--radius-sm);
  z-index:5; pointer-events:none;
}
.chart-frame.unified .ratio > .img-loader.is-hidden{ display:none; }
.chart-frame.unified .ratio > .img-loader .load-text{ margin-left:.5rem; }

/* Titles / separator (optional) */
.chart-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 10px; }
.chart-title{ font-weight:800; letter-spacing:.01em; color:#0b1f33; }
.hairline{ height:1px; background:#e6edf5; margin:0 6px 4px; border-radius:999px; }

/* =========================================================
   WEEKLY SUMMARY — CARDS & VALUATION (RESTORED)
   ========================================================= */
.wk-summary{
  background:#fff; border:1px solid var(--sm-border); border-radius:12px; box-shadow:var(--shadow-1); overflow:hidden;
}
.wk-summary .card-header{ border-bottom:1px solid var(--sm-border); }

.summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:992px){ .summary-grid{ grid-template-columns:1fr; } }

.summary-card{ background:#fff; border:1px solid #e6eaf2; border-radius:12px; }
.summary-card .summary-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem; border-bottom:1px solid #e6eaf2;
}
.summary-card .summary-body{ padding:.8rem; }
.summary-card .title{ font-weight:800; color:#0b1f33; }

/* KPI / Verdict pills */
.kp-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:800; letter-spacing:.02em;
  padding:.2rem .5rem; border-radius:999px; border:1px solid #e5e9ef; background:#f3f6fb; color:#1f2937;
}
.kp-pill.positive{ background:#e9fbf0; border-color:#c4f2d2; color:#065f46; }
.kp-pill.negative{ background:#fff1f2; border-color:#ffe1e3; color:#991b1b; }
.kp-pill.neutral{  background:#f3f6fb; border-color:#e5e9ef; color:#1f2937; }

/* Trend bar & small meter */
.trend-meter{ position:relative; height:8px; border-radius:999px; background:linear-gradient(90deg,#ef4444 0%,#f59e0b 50%,#22c55e 100%); }
.trend-marker{ position:absolute; top:-4px; width:0; height:16px; border-left:2px solid #111827; }

.mini-meter{ position:relative; height:6px; border-radius:999px; background:#e9eef6; margin-top:.25rem; }
.mini-marker{ position:absolute; top:-3px; width:0; height:12px; border-left:2px solid #111827; }

/* ---------- Valuation grid (RESTORED) ---------- */
.val-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width:768px){
  .val-cards{ grid-template-columns:1fr; }
}
.val-card{
  border:1px solid #ebeff5;
  border-radius:12px;
  background:#fbfdff;
  padding:.6rem .7rem;
  display:grid;
  grid-template-columns:1fr auto;        /* label left, value right */
  align-items:center;
  row-gap:.15rem;
}
.val-card.span-2{ grid-column:1 / -1; }  /* full-width card when needed */

.val-card .k{
  grid-column:1 / 2;
  font-weight:700;
  color:#1f2937;
  display:flex; align-items:center; gap:.4rem;
}
.val-card .v,
.val-card .status{
  grid-column:2 / 3;
  justify-self:end;
  font-weight:800;
  color:#0b1f33;
}
.val-card .status.text-danger{ color:#b42318; }
.val-card .status.text-success{ color:#067647; }
.val-card .hint{
  grid-column:1 / -1;
  font-size:.85rem; color:#6b7280;
}

/* Valuation overview paragraph block */
.val-overview{
  margin-top:.75rem;
  padding:.7rem .75rem;
  border:1px dashed #e2e8f0;
  border-radius:10px;
  background:#fff;
}

/* Highlight block */
.highlight-block{ background:#f7fafc; border:1px dashed #d9e4f2; border-radius:12px; padding:12px; }

/* =========================================================
   TABLES & UTILITIES
   ========================================================= */
.sm-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid #e5e9ef; border-radius:12px; overflow:hidden;
}
.sm-table th,.sm-table td{ padding:.6rem .7rem; font-size:.95rem; }
.sm-table thead th{
  background:#f6f8fb; color:#334155; font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em;
  border-bottom:1px solid #e5e9ef;
}
.sm-table tbody tr + tr td{ border-top:1px solid #eef2f7; }
.sm-table tbody tr:hover{ background:#fafcff; }

.text-muted{ color:var(--sm-muted)!important; }
.badge{ display:inline-block; padding:.25rem .5rem; border-radius:6px; background:#f1f5f9; color:#0b1f33; font-weight:700; }
.rounded{ border-radius:12px; }
.shadow-1{ box-shadow:var(--shadow-1); }
.shadow-2{ box-shadow:var(--shadow-2); }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:1rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:1rem; }

/* --- Valuation meters: red → orange → gold (gold from 75%+) --- */
.mini-meter.meter--val{
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ef4444 0%,      /* red */
    #f97316 55%,     /* deep orange */
    #f59e0b 70%,     /* amber */
    #f6c453 75%,     /* gold starts ~7.5/10 */
    #f7d26a 88%,
    #f7e27e 100%
  );
}
.mini-marker{
  position: absolute;
  top: -3px;
  width: 0;
  height: 12px;
  border-left: 2px solid #111827;  /* the tick */
}

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width:768px){
  .controls-row{ flex-direction:column; align-items:stretch; }
  .controls-row .btn-toggle-group{ margin-left:0; align-self:stretch; justify-content:space-between; }
  .controls-row .btn-group{ gap:.45rem .5rem; }
  .controls-row .btn-group .chart-btn{ flex:1 1 calc(50% - .5rem); text-align:center; }
}
@media (max-width:420px){
  .controls-row .btn-group .chart-btn{ flex:1 1 100%; }
}
@media (max-width:360px){
  .btn-toggle-group .btn.toggle{ padding:.4rem .6rem; font-size:.85rem; }
  .controls-row .btn-group .chart-btn{ padding:.38rem .65rem !important; font-size:.85rem; }
}

/* Compact hub links on very small devices */
@media (max-width: 576px) {
  .hub-links .btn {
    padding: .25rem .45rem;
    line-height: 1.1;
  }
  .hub-links .btn i {
    font-size: .95rem;
  }
}

/* --- Card + typography --- */
    .wr-card{border:1px solid var(--bs-border-color);border-radius:1rem;overflow:hidden}
    .wr-card .card-header{padding:.9rem 1rem}
    .wr-card .card-body{padding:1rem 1rem 1.1rem}
    .wr-title{font-weight:700;letter-spacing:.2px}
    .wr-subtle{color:var(--bs-secondary-color)}
    .wr-hr{border:0;border-top:1px solid var(--bs-border-color);opacity:.7;margin:1rem 0}

    /* --- Fact tiles --- */
    .fact-tile{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .85rem;border:1px solid var(--bs-border-color);
               border-left-width:.45rem;border-radius:.8rem;background:var(--bs-body-bg);height:100%}
    .fact-tile .ico{opacity:.75;margin-top:.1rem}
    .fact-tile .k{display:block;font-size:.85rem;color:var(--bs-secondary-color);font-weight:600;line-height:1.1}
    .fact-tile .v{display:block;font-weight:800;color:var(--bs-body-color);line-height:1.1}
    .ft-pos{border-left-color:var(--bs-success)}
    .ft-neg{border-left-color:var(--bs-danger)}
    .ft-neu{border-left-color:var(--bs-secondary)}
    .fact-tile[data-bs-toggle="tooltip"]{cursor:help}

    /* --- Narrative blocks --- */
    .wr-block{border-left:.35rem solid var(--bs-border-color);border-radius:.5rem;background:var(--bs-light-bg-subtle);
              padding:.9rem 1rem}
    .wr-facts{border-left-color:var(--bs-primary)}
    .wr-interpret{border-left-color:var(--bs-info)}
    .wr-reader{border-left-color:var(--bs-success)}
    .wr-section-label{font-size:.9rem;font-weight:700;letter-spacing:.25px;margin-bottom:.35rem}

    /* --- Trend meter + sparklines --- */
    .trend-meter{position:relative;height:.6rem;border-radius:1rem;background:linear-gradient(90deg,#dc3545,#f0ad4e,#198754)}
    .trend-marker{position:absolute;top:-.25rem;width:.35rem;height:1.1rem;border-radius:.25rem;background:var(--bs-body-bg);
                  border:2px solid var(--bs-body-color)}
    .sparkline{line-height:0}
    .sparkline-label{font-size:.8rem;color:var(--bs-secondary-color);margin-right:.35rem;white-space:nowrap}

    /* --- Valuation stat cards --- */
    .val-grid .val-card{
      position:relative; display:flex; align-items:center; gap:.9rem;
      border:1px solid var(--bs-border-color); border-radius:14px;
      background:linear-gradient(180deg,var(--bs-body-bg),rgba(0,0,0,.015));
      padding:.85rem 1rem; height:100%;
    }
    .val-card::before{content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
    .val-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
              background:var(--bs-light-bg-subtle);color:var(--bs-primary);border:1px solid var(--bs-border-color)}
    .val-body{min-width:0}
    .val-k{display:block;font-size:.8rem;letter-spacing:.2px;color:var(--bs-secondary-color);font-weight:600}
    .val-v{display:block;font-weight:800;font-size:1.05rem}
    .val-status{margin-left:auto;font-weight:700}
    .val-status.positive{color:var(--bs-success)}
    .val-status.negative{color:var(--bs-danger)}
    .val-meter{margin-top:.35rem;height:6px;background:var(--bs-gray-200);border-radius:6px;overflow:hidden}
    .val-meter > span{display:block;height:100%;background:linear-gradient(90deg,#6c63ff,#00c16a);width:var(--pct,0%)}

    /* --- Glossary entries --- */
    .gl-grid .gl-entry{
      display:flex; gap:.65rem; align-items:flex-start;
      border:1px solid var(--bs-border-color); border-radius:.7rem;
      background:var(--bs-body-bg); padding:.6rem .75rem; height:100%;
    }
    .gl-ico{
      width:28px; height:28px; border-radius:.5rem; display:grid; place-items:center;
      background:var(--bs-light-bg-subtle); color:var(--bs-primary); flex:0 0 auto;
      border:1px solid var(--bs-border-color); font-size:.9rem;
    }
    .gl-term{font-weight:700; margin-right:.35rem}
    .gl-def{color:var(--bs-secondary-color)}

/* =========================================================
   Navbar / Offcanvas small tweaks so the close button never hides
   ========================================================= */
.navbar .navbar-brand img{height:32px;}
@media (max-width:575.98px){ .navbar .navbar-brand img{height:26px;} }
.offcanvas-header{position:relative;}
.offcanvas-header .btn-close{position:absolute; right:.6rem; top:.6rem; z-index:5;}
.offcanvas-title{padding-right:2.25rem;}