/* 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: 17%;
    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. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
    margin-left: 20%;
    padding: 5rem 16px;
    height: 1000px;
  }

.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;
}

/* Section shell */
.section{ display:grid; 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 */
.kpi-grid{ display:grid; gap:var(--gap-sm); grid-template-columns: repeat(4,minmax(0,1fr)); }
.chart-grid{ display:grid; gap:var(--gap); grid-template-columns: 1fr 1fr; }

/* 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);
}
.control-head .controls-row{
  display:grid; grid-template-columns:max-content max-content minmax(0,1fr) auto;
  align-items:center; column-gap:12px; row-gap:8px; width:100%;
}
.control-head .toggle-popup{
  grid-column:4; justify-self:end; background-color:var(--stora-accent); color:#fff; border:0; padding:6px 16px;
  border-radius:6px; cursor:pointer;
}
.control-head .toggle-popup:hover{ background-color:#b2c149; }

.control-head .controls-actions {
  grid-column: 4;
  justify-self: end;
  display: inline-flex;
  gap: 8px;
}

/* 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);
}

/* 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 */
@media (max-width:1200px){
  .kpi-grid{ grid-template-columns: repeat(2,1fr); }
  .chart-grid{ grid-template-columns: 1fr; }
}
@media (max-width:1080px){
  .control-head .controls-row{ grid-template-columns:max-content max-content minmax(0,1fr); row-gap:15px; }
  .control-head .toggle-popup{ grid-column:1 / -1; justify-self:start; margin-top:4px; width:max-content; }
  .control-head .controls-actions{
    grid-column: 1 / -1;
    justify-self: start;
  }
}