/* Header */
.header {
    width: 80%;
    height: 3rem;
    position: fixed;
    /* margin-left: 350px; */
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: right;
    padding: 0 1rem;
    background-color: #ffffff;
    border-bottom-style: solid;
    border-bottom-color: #4F7EB3;
    border-width: 2px;
    z-index: 100;
    transition: .5s
}

.header_img {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.header_img img {
    width: 40px
}

/* The side navigation menu */
.sidebar {
    margin-top: 0rem;
    padding-top: 1rem;
    width: var(--sidebar-w, 300px);
    background-color: #ffffff;
    border-right-style: solid;
    border-right-color: #b0afaf;
    border-width: 0px;
    border-radius: 7px;
    box-shadow: 0px 0px 30px #b0afaf;
    position: fixed;
    height: 100%;
    overflow: auto;
  }
  
  /* Sidebar links */
.sidebar a {
    display: block;
    color: #425461;
    padding: 16px 24px;
    text-decoration: none;
  }
  
  /* Links on mouse-over */
.sidebar a:hover:not(.active) {
    /*background-color: #C21500;*/
    color: #B2C149;
  }

.sidebar_logo {
    display: block;
    padding: 10px 5px 25px 5px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    height: auto;
  }
  
  /* Page content offset + padding live in App.vue (.content), driven by the
     --sidebar-w / --content-pad tokens. The old fixed `height:1000px` here
     clipped every page and has been removed. */

.form-check-input:checked {
    background-color: #B2C149 !important;
    border: solid 1px black !important;
    box-shadow: 0 0 0 0.2rem #B2C14944 !important;    
}

.form-check-input:focus {
    border: solid 1px  black !important;  
    box-shadow: 0 0 0 0.2rem #B2C14944 !important; 
}

.form-control:focus {
    border: solid 1px  black !important;  
    box-shadow: 0 0 0 0.2rem #B2C14944 !important; 
}

.form-select:focus {
    border: solid 1px  black !important;  
    box-shadow: 0 0 0 0.2rem #B2C14944 !important; 
}

/* Hidden by default on desktop; shown via media query */
.hamburger{
  display:none;
  position:fixed;
  top:10px; left:10px;
  z-index:2000;                 /* above .sidebar (1100) and .sidebar-backdrop (1095) */
  width:40px; height:40px;
  border:1px solid #e6edf3;
  border-radius:10px;
  background:#fff;
  color:#425461;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(13,38,76,.08);
}
.hamburger:hover{ background:#f4f7fb; }

/* Show the hamburger on small screens */
@media (max-width: 768px){
  .hamburger{ display:flex; }
}:root{
  --stora-accent:#4F7EB3;
  --stora-accent-2:#62B5D9;
  --stora-green:#36910d;
  --stora-muted:#6b7a86;
  --stora-border:#e6edf3;
  --stora-bg:#f7fafc;
  --stora-card:#fff;

  /* spacing */
  --gap-xs:6px; --gap-sm:10px; --gap:12px; --gap-md:14px; --gap-lg:18px; --gap-xl:24px;

  /* ── Layout tokens (single source of truth for the shell) ──────────────
     The nav sidebar is 300px wide; App.vue offsets page content by this. */
  --sidebar-w:300px;
  --content-pad:20px;

  /* Grid auto-fit floors. Plain .kpi-grid / .chart-grid collapse on their
     own at these widths — no per-view media query needed. Override the
     variable in a consumer to tune density (e.g. --kpi-min:200px). */
  --kpi-min:240px;
  --chart-min:460px;

  /* ── Breakpoint scale (CONVENTION) ─────────────────────────────────────
     CSS vars can't be read inside @media conditions, so these are a naming
     contract, not live values. Use ONLY these widths in new @media rules:
       sm 640  ·  md 768  ·  lg 1024  ·  xl 1280  ·  2xl 1536
     md(768) is the shell's mobile cutover (sidebar goes off-canvas). */
}

/* Section shell */
/* minmax(0,1fr), not the default `auto` column: an auto grid column grows to
   its content's max-content and can overflow the container — the review-hero's
   long, unwrapped metric lines did exactly that (section-body wider than the
   section). Capping at the container width makes wide content wrap instead. */
.section{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); }
.section + .section{ margin-top: 36px; }

/* Section head */
.section-head{
  display:flex; align-items:center; gap:.75rem;
  border-left:4px solid var(--accent, var(--stora-accent));
  padding-left:.6rem; color: var(--accent, var(--stora-accent));
}
.section-head h5{ margin:0; font-weight:600; font-size:1.6rem; color:inherit; }
.section-head .mode-badge{
  padding:2px 8px; font-size:.8rem; border:1px solid var(--stora-border);
  border-radius:999px; color:var(--stora-muted)
}

/* Grids — auto-fit so they self-collapse with no breakpoint snap.
   min(<floor>,100%) guards against horizontal overflow when the container
   is narrower than the floor (e.g. a phone). */
.kpi-grid{ display:grid; gap:var(--gap-sm); grid-template-columns: repeat(auto-fit, minmax(min(var(--kpi-min,240px),100%), 1fr)); }
.chart-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--chart-min,460px),100%), 1fr)); }
/* Grid cells must be allowed to shrink below their content width, else a wide
   child (chart canvas, long axis, table) forces the track — and the page —
   wider and produces a horizontal scrollbar. min-width:0 is the cure. */
.kpi-grid > *, .chart-grid > *{ min-width:0; }

/* Control head (filters) */
.control-head{
  display:flex; flex-direction:column; align-items:flex-start; row-gap:1.5rem;
  border-left:4px solid var(--accent, var(--stora-accent));
  padding:.6rem .8rem; margin:.25rem 0 .5rem; background:#fafafa;
  border:1px solid var(--stora-border); border-radius:12px; box-shadow:0 3px 12px rgba(13,38,76,.06);
}
/* flex-wrap (not a fixed grid): each control wraps to the next line the moment
   it no longer fits, instead of staying paired until a coarse breakpoint. The
   actions/Allen button is pushed right and is the first to drop to its own row;
   the filter controls then wrap one by one as space tightens. */
.control-head .controls-row{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:12px; row-gap:8px; width:100%;
}
/* The spacer (not margin-left:auto) does the pushing, so when the actions wrap
   to their own line they align LEFT rather than staying stuck on the right. */
.control-head .controls-spacer{ flex:1 1 0; min-width:0; }

.control-head .toggle-popup{
  background-color:var(--stora-accent); color:#fff; border:0; padding:6px 16px;
  border-radius:6px; cursor:pointer; white-space:nowrap;
}
.control-head .toggle-popup:hover{ background-color:#b2c149; }

.control-head .controls-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* Chart/KPI panels (shell only; keep your existing <ChartPanel> + <KpiCard> inside) */
.panel{
  background:var(--stora-card); border:1px solid var(--stora-border); border-radius:12px;
  box-shadow:0 6px 14px rgba(13,38,76,.06);
  min-width:0; max-width:100%;   /* never push past the grid cell */
}

/* ── No horizontal overflow, ever ──────────────────────────────────────────
   Hard platform rule: the page scrolls top↔bottom only, never left↔right.
   These are the systemic guards; per-view offenders (100vw, fixed widths,
   wide tables) are still removed in their phase so nothing is *clipped*. */
img, svg, canvas, video, table{ max-width:100%; }
html, body{ overflow-x:clip; }   /* clip (not hidden) → vertical sticky/scroll unaffected */

/* Tabs (inkbar) */
.stora-tabs-inkbar.nav-tabs{
  --tab-accent: var(--stora-accent);
  --tab-accent-2: var(--stora-accent-2);
  --tab-fg: #425461; --tab-fg-hover: #2b3a44; --tab-muted:#9aa7b1;
  border-bottom:1px solid #e9eef3; gap:.25rem;
}
.stora-tabs-inkbar .nav-link{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  color:var(--tab-fg); background:#f7fafc; border:1px solid #cfd8e3;
  border-radius:10px 10px 0 0; padding:.55rem 1rem; font-weight:600; letter-spacing:.2px;
  transition: color .2s, background .2s, box-shadow .2s;
  cursor:pointer;
}
.stora-tabs-inkbar .nav-link:hover:not(.active):not(.disabled){ color:var(--tab-fg-hover); border-color:#b8c4d3; background:#f0f5fa; }
.stora-tabs-inkbar .nav-link.active{
  color:var(--stora-accent); background:#fff; border-color:#8fa8c3 #8fa8c3 #fff; box-shadow:0 6px 14px rgba(13,38,76,.08);
}
.stora-tabs-inkbar .nav-link.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:4px; border-radius:3px;
  background:linear-gradient(90deg, var(--tab-accent), var(--tab-accent-2));
}
.stora-tabs-inkbar .locked, .stora-tabs-inkbar .nav-link[aria-disabled="true"]{
  pointer-events:none; cursor:not-allowed !important; filter:grayscale(1); opacity:.6; background:transparent !important; box-shadow:none !important;
}

/* Responsive */
/* (.kpi-grid / .chart-grid now self-collapse via auto-fit — no breakpoint needed) */
/* (.control-head is flex-wrap now — it wraps on its own; no grid breakpoints needed) */

/* Once the row gets tight enough that the actions can no longer sit inline to
   the right of the filters, give them their OWN full-width line (left-aligned)
   and retire the spacer. Without this, the spacer lands on a partially-wrapped
   row and briefly shoves the button back to the right. */
@media (max-width:980px){
  .control-head .controls-spacer{ display:none; }
  .control-head .controls-actions{ flex:1 1 100%; }   /* own line; button stays left inside */
}

/* Below sm(640): give every control its own full-width line so the fixed-width
   dropdowns read as a clean stacked column on phones. */
@media (max-width:640px){
  .control-head .controls-row > *{ flex:1 1 100%; min-width:0; max-width:100%; }
  .control-head .controls-spacer{ display:none; }   /* no empty row in the full stack */
  .control-head .toggle-popup{ width:100%; justify-content:center; }
  /* DurationDropdown wraps its .dropdown-container in an extra div, so the flex
     stretch lands on the wrapper, not the 160px inner container. Force the inner
     container full-width so all three stacked controls match. */
  .control-head .controls-row .dropdown-container{ width:100%; }
}