.iq-dial-container{
    width: 195px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: -43px;
}
.qpnel_right{
    flex: 0.8;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(120deg, rgba(39,139,253,.06), rgba(15,8,103,.04));
    border: 1px solid #e6e8f0;
    border-radius: 12px;
    padding: 14px;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 310px;
}

div#revMixQuarters h2 {
    text-align: center;
}

.metric-card h2 { color: #707070; font-weight: 400; }
span.kpi-chip-label { width: 82px; display: inline-block; }
.chip-status{ align-self: flex-start; }
.card h2 { margin-bottom: 9px; }
.fc_selector {
    margin-bottom: 10px;
}
.fc_selector select {
    padding: 3px;
    width: 100%;
    border-radius: 4px;
    margin-top: 3px;
    color: #444;
}
.kpi .chip strong { background-color: unset; border: 0px; margin-left: 15px; }
.chip-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; border-radius: 17px; font-size: 12px; }
:root{ --navy:#0F0867; --azure:#278BFD; --teal:#5FB0B7; }
*{ box-sizing:border-box }
body{ margin:0; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#111; background:#f5f6fa }
.app{ display:flex; min-height:100vh }
.sidebar{ width:280px; background:#fff; border-right:1px solid #e6e8f0; padding:16px; position:sticky; top:0; height:100vh }
.brand{ font-weight:700; color:var(--navy); margin-bottom:12px }
.nav a{ display:flex; gap:8px; align-items:center; margin:6px 0; padding:10px 12px; border-radius:10px; text-decoration:none; color:#111 }
.nav a.active{    border-bottom: solid;}
div#controlsInputs {
    margin-left: auto;
}
.chip select {
    border: 0px;
}
.nav a:hover{ background:#6a95ff}
.main{ flex:1; display:flex; flex-direction:column }
.topbar{ display:flex; flex-direction:column;  padding:12px 16px;
     border-bottom:1px solid #e6e8f0; 
     background:#e7eaf3;
      position:fixed; top:0; left:0; right:0; z-index:1000 }
.topMenu{ display:flex; align-items:center; justify-content:space-between; gap:12px ;
    max-width: 1300px;
    width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}
div#controlsViews {
    margin-left: 4px;
    margin-top: 10px;
}
.topnav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.topnav a{ 
    
    padding: 8px 12px;
    border-radius: 0px;
    text-decoration: none;
    color: #111;
    margin-left: 0px;   

 }
.topnav > a.active{ background:var(--azure); color:#fff }
.topnav > a:hover{ background:#6a95ff; color:#fff }
.topControls{ 
    padding: 0 20px;
    max-width: 1300px;
    width: 1300px;
    margin: 0 auto;
    display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap }
.controls-row{ display:none; align-items:center; gap:12px; flex-wrap:wrap;
    margin-left: 5px;
     opacity:0; transform: translateY(-8px) scale(0.98); transition: transform .25s ease, opacity .25s ease;
}
.controls-row.show{ display:flex; opacity:1; transform: translateY(0) scale(1) }
.controls-row.morph{ transform: translateY(18px) scale(0.98); opacity:0 }
.chip{ padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #e6e8f0 }
.content{ padding:20px; padding-top:126px; max-width:1300px; margin:0 auto; width:100% }
h1{ margin:4px 0 14px 0; font-size:22px }
h2{ font-size:16px; margin:0 0 8px }
.card{ background:#fff; border:1px solid #e6e8f0; border-radius:14px; padding:16px; box-shadow:0 6px 24px rgba(0,0,0,.04); margin-bottom:14px }
.grid{ display:grid; gap:12px }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
/* Exec Summary cards */
.metric-grid{ display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)) }
.metric-card .header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.metric-card .id-pill{ font-size:12px; padding:4px 8px; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; color:#334155 }
.metric-card .value{ font-weight:700; font-size:20px }
.metric-card .sub{ font-size:12px; color:#6b7280 }
.pp-pos{ color:#16a34a !important; }
.pp-neg{ color:#b91c1c !important; }
.metric-chart{ width:100%; height:80px }
.metric-bars{ width:100%; height:60px; margin-top:6px }
.bench-toggles{ display:flex; gap:6px; margin-top:8px }
.bench-toggles .chip{ cursor:pointer; user-select:none }
.tooltip{ position:relative; pointer-events:auto; z-index: 1 !important; }
.tooltip:hover .tt{ opacity:1; pointer-events:auto }
.tt{ position:absolute; right:0; top:26px; background:#111; color:#fff; font-size:12px; padding:8px 10px; border-radius:8px;  opacity:0; pointer-events:none; box-shadow:0 6px 24px rgba(0,0,0,.2); z-index:3 }
.icon-info svg{ width:14px; height:14px; display:block; }
/* Executive header */
.iq-header{ position: relative; z-index: 10; }
.iq-header h1{ font-size:28px; margin:0 0 6px; color:#0f172a }

.iq-header .desc {
    color: #282828;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}
button#whyNotBtn {
    display: none;
}

.available-matrices {
    display: flex;
    align-items: center;
}
.available-matrices > .muted {
    width: 192px;
}
div#availMetricsCounter {
    flex: 1;
    text-align: center;
    background-color: #eee;
    padding: 6px;
    border-radius: 5px;
    color: #444444 !important;
    font-weight: 400 !important;
}

.iq-main .chip.active {
    background-color: #278bfd;
    color: #fff;
}

.subgroup-title {
    margin-top: 29px !important;
    margin-bottom: 11px !important;
}

.iq-header .subtitle{ 
    font-size: 14px;
    color: #334155;
    margin-bottom: 10px;
}
.confidence-legend{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #334155;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.confidence-legend .legend-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* left/right groupings inside confidence legend row */
.confidence-legend .legend-left{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.selected-segment-confidence{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Legend tooltip layout */
.conf-tooltip{ max-width: 360px; display:block;width: 360px; }
.conf-tooltip * {
    white-space: normal;
}
.conf-intro{ margin-bottom:10px; display:block }
.conf-intro .intro-title{ font-weight:600; color:#fff; margin-bottom:4px }
.conf-intro .intro-desc{ color:#cbd5e1; font-size:12px; line-height:1.4 }
.conf-list{ display:flex; flex-direction:column; gap:8px }
.conf-row{ display:flex; align-items:flex-start; gap:10px }
.conf-row .legend-dot{ width:10px; height:10px; margin-top:5px }
.conf-row .text{ display:flex; flex-direction:column; gap:2px }
.conf-row .title{ font-weight:700; color:#fff }
.conf-row .desc{ color:#cbd5e1; font-size:12px; line-height:1.3 }
/* reusable small colored dot */
.legend-dot{
    display: inline-block;
    width: 10px;    
    height: 10px;
    border-radius: 50%;
}
.legend-dot.red{ background: #86b8f3; }
.legend-dot.yellow{ background: #5bc8af; }
.legend-dot.green{ background: #16a34a; }
/* position dot nicely when used inside chips */
.chip .legend-dot{ margin-left: 6px; }
.tabs{ display:flex; gap:8px; align-items:center }
.tabs .chip{ cursor:pointer }
.iq-dial{ width:120px; height:120px; position:relative; display:flex; align-items:center; justify-content:center }
.iq-dial svg{ position:absolute; inset:0 }
.iq-dial .val{ position:relative; font-weight:700; font-size:22px; color:#0f172a }
.iq-dial .trend{ position:absolute; bottom:-24px; left:56ox; right:0; text-align:center; font-size:11px; color:#ef4444 }

/* Dial label */
.dial-label{
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}
.iq-how-link{
    margin-top: 8px;
    font-size: 12px;
    text-decoration: underline;
    color: #6b7280;
}
.iq-how-link:hover{
    color: #278BFD;
}

button#continueBtn {
    display: none;
}

/* Loader: page wrapper + animated squares */
.page-loader{ display:flex; align-items:center; justify-content:center; padding:24px; color:#6b7280; gap:12px }
/* HTML: <div class="loader"></div> */
.loader {
  width: 6px;
  height: 6px;
  background: #0c1cd4;
  color: #5bc8af;
  box-shadow:
    -18px -9px,0 -9px,18px -9px,
    -18px  0  ,       18px  0  ,
    -18px  9px,0  9px,18px  9px,
    -18px 18px,0 18px,18px 18px;
  animation: l29 2s infinite;
}
@keyframes l29 {
  10% {
   box-shadow:
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px #0000,0  9px,18px  9px #0000,
     -18px 18px,0 18px,18px 18px;
  }
  20% {
   box-shadow:
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px #0000,
     -18px 18px #0000,0 18px,18px 18px;
  }
  30% {
   box-shadow:
     -18px -9px,0 -9px #0000,18px -9px,
     -18px  0   #0000,       18px  0  ,
     -18px  9px,0  9px #0000,18px  9px,
     -18px 18px #0000,0 18px,18px 18px #0000;
  }
  40% {
   box-shadow:
     -18px -9px,0 -9px,18px -9px,
     -18px  0  #0000,       18px  0 #0000,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  50% {
   box-shadow:
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  #0000,
     -18px  9px #0000,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  60% {
   box-shadow:
     -18px -9px,0 -9px #0000,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px #0000,0  9px,18px  9px,
     -18px 18px #0000,0 18px,18px 18px;
  }
  70% {
   box-shadow:
     -18px -9px,0 -9px #0000,18px -9px #0000,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px #0000,0 18px,18px 18px;
  }
  80% {
   box-shadow:
     -18px -9px #0000,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px #0000;
  }
  90% {
   box-shadow:
     -18px -9px #0000,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px #0000,18px  9px,
     -18px 18px,0 18px,18px 18px #0000;
  }
}


.sets_selects_row {
    margin-top: 12px;
    display: flex;
    align-items: center;
}

button#orgDefaultsDoneBtn {
    margin-top: 14px;
    width: 131px;
}

#orgDefaults-collapsed .chip {
    border: 0px;
}

#orgDefaults-collapsed .chip span {
    font-weight: 700;
}

.sets_selects_row_title {
    width: 88px;
}

.general-expenses-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}
.general-expenses-wrap .field{ flex: 1 1 auto; min-width: 320px; }
.general-expenses-wrap .field .input-currency{ width: 100%; }
.general-expenses-wrap .field .input-currency input{ width: 100%; }
/* scale up loader on larger screens */
@media (min-width: 1024px){
  .page-loader{ margin-top:100px; }
  .page-loader .loader{ transform: scale(2); transform-origin:center; }
}
/* Fullscreen overlay for debug loader mode */
.page-loader.fullscreen{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  margin: 0 !important;
  padding: 0;
  flex-direction: column;
}
#opexRangeBar {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE / Edge legacy */
  }
  
  #opexRangeBar::-webkit-scrollbar {
    display: none;              /* Chrome / Safari */
  }
.blue_text{ color: #278BFD; }
.row{ display:flex; gap:12px; align-items:center }
.field{ display:flex; flex-direction:column; gap:6px }
.field input, .field select{ padding:10px 12px; border-radius:10px; border:1px solid #cbd5e1; background:#fff }
.field input:focus, .field select:focus{ outline:2px solid #a3c7ff; border-color:#87b6ff }
.field input::placeholder{ color:#ddd; opacity:1 }
.field input.invalid{ border-color:#ef4444; background:#fff5f5 }
.hint{ font-size:12px; color:#6b7280 }
.input-currency{ position: relative }
.input-currency input{ padding-right: 82px;     max-width: 100%;    height: 37px;}
.input-currency .cur{ position:absolute; left:24px; top: 50%;  transform: translateY(-50%); font-size: 12px; color: #6b7280; pointer-events: none; background: transparent; opacity: 0.5; }
.input-currency .measure{ position:absolute; left:24px; top:calc(47% + 0px); transform:translateY(-50%); visibility:hidden; white-space:pre; pointer-events:none }
.input-wrap{ position: relative }
.input-wrap input{ padding-right: 82px; height: 37px;     max-width: 100%; }
.input-indicator{ position:absolute; right:25px; top:50%; transform:translateY(-50%); font-size:12px; pointer-events:none }
.input-indicator.ok{ color:#16a34a }
.input-indicator.err{ color:#b91c1c }
.input-indicator.warn{ color:#b45309 }
.kpi{ display:flex; gap:12px; flex-wrap:wrap }
.kpi .chip{ background:#eefbf8; border-color:#d2f5ea; color:#0f5132 }
.complete{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0 }
.incomplete{ background:#fef3c7; color:#92400e; border:1px solid #fde68a }
.total-line{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:12px;
    z-index: 0;
    position: relative;
}
.total-line.between{ justify-content:space-between }
.total-label{ font-weight:600 }
.total-pill{ background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:8px 12px; font-weight:700; color:#111 }
.total-pill.warn{ background:#fff5f5; border-color:#ef4444 }
.some-class{ margin-right:6px }
.btn{ padding:10px 12px; border-radius:10px; border:1px solid #d1d5db; background:#fff; cursor:pointer }
.btn.primary{ background:var(--azure); border-color:var(--azure); color:#fff }
.row.spread{ justify-content:space-between }
.muted{ color:#6b7280 }
.quarters{ display:flex; flex-direction:column; gap:8px }
a.return-to-default {
    color: #444;
    font-size: 12px;
    text-transform: capitalize;
}
.revenue-range-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.iq-rev-note.muted ,.iq-rev-note.muted span {
    font-size: 15px !important;
}
.iq-how-link.muted {
    position: absolute;
    bottom: -49px;
    right: 0;
    text-align: center;
    font-size: 11px;
    left: 0;
}

.quarter-chip{ width:100%; justify-content:space-between; padding:10px 12px; border-radius:10px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; gap:6px }
.quarter-chip.active,.qpnel_right .chip.active, .opex-range-chip.active{ background:#278BFD; color:#fff; border-color:#278BFD }
.quarter-chip.empty{ opacity:0.4 }
.quarter-chip.active{ opacity:1 }
.quarter-chip.inprogress{ background:#e7f0ff; border-color:#cfe0ff; color:#123 }
.q-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 13px; border-radius:17px; font-size:12px; border:1px solid #e2e8f0; background:#f8fafc; color:#334155 }
.q-badge.complete{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0 }
.q-badge.progress{ background:#fff7ed; color:#9a3412; border-color:#fed7aa }
.save-indicator{ font-size:12px; color:#16a34a; display:none }
.save-indicator.show{ display:inline-block }
/* Loading state for inputs panel */
#inputsForm.loading{ opacity:0.6; filter:grayscale(15%); pointer-events:none; transition:opacity .15s ease }
/* Autofill controls */
.autofill{ font-size:12px; color:#334155 }
.autofill .link{ background:none; border:none; color:#278BFD; cursor:pointer; padding:0 6px; text-decoration:underline }
@media (max-width: 1024px){
  .iq-main{ padding-right: 0; }
  .qpnel_right{ position: static; width: auto; }
}

.inputs-menu-item {
    background-color: #fff;
    margin-right: 50px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}
.inputs-menu-item a {
    padding: 0px;
    margin-top: 2px;
}
.inputs-menu-item svg {
    width: 14px;
    margin-right: 10px;
    opacity: 0.7;
    fill: #fff;
}
.inputs-menu-item:has(a.active) {
    background: #278BFD;
   color: #fff;
  
}
.inputs-menu-item a.active {
    border-bottom: 0px;
}
.inputs-menu-item:has(a.active) svg {
    fill: #fff;
    opacity: 0.8;
}

/* Affected metrics badge tooltip */
.aff-badge{
    position: relative;
    cursor: help;
    margin-right: 23px;
}
.aff-badge:hover::after{
    content: attr(data-tip);
    position: absolute;
    right: 0;
    top: 125%;
    z-index: 1000;
    background: #111827;
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    padding: 6px 8px;
    border-radius: 6px;
    max-width: 280px;
    width: 280px;
    white-space: pre-line;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.aff-badge:hover::before{
    content: '';
    position: absolute;
    right: 6px;
    top: 118%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #111827 transparent;
}
div#cogsBreakdownSection {
    position: relative;
    z-index: 1;
}


span.defaultChip-default {
    display: block;
    text-align: center;
    margin-right: -10px;
}
.chip.default{
    background-color: #278bfd;
    padding: 6px 26px 6px 15px;
    color: #fff;
    position: relative;
    border: 1px solid #278bfd;

  
}
.chip.default .legend-dot{
    position: absolute;
    top: calc(50% - 5px);
    right: 58x;
}
.chip.default:not(.active){
    opacity: 0.7;
}

#iqRevenueRangeSelectMobile{
    display: none ;
  }

  .chip:has(#summarySubRegion),.chip:has(#countryRegionSelect){
    display: none;
  }

  .app {
    display: block;
    background-color: #fff;
}

.inputs-menu-item{
    background: linear-gradient(90deg, #5BC8AF 0%, rgba(95, 176, 183, 1) 33%, rgba(39, 139, 253, 1) 66%, rgba(0, 3, 217, 1) 100%);
    
}
.inputs-menu-item a{
    color: #fff !important;
}

.mobile-header{
    display: none;
}


/* Mobile nav: hide link strip, show select */
#mobileTopNavSelect, #mobileQuarterSelect{
  display: none;
}

button#orgDefaultsEditBtn, #orgDefaultsDoneBtn {
    color: #444;
    font-size: 13px;
    }

/* Mobile: hide revenue range chips; use dropdown if present */
@media (max-width: 900px){

    .mobile-nav-item[data-tab="inputs"]{
        background: linear-gradient(90deg, #5BC8AF 0%, rgba(95, 176, 183, 1) 33%, rgba(39, 139, 253, 1) 66%, rgba(0, 3, 217, 1) 100%);
        color: #fff;
    
    }

    .page-loader{
        margin-left: 41px;
    }
    
    div#revRangeBar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
div#revRangeBar button {
    padding: 10px;
}

.mobile-header{
    display: block;
    padding-top: 94px;
    margin-bottom: -74px;
}


  #iqRevenueRangeChips{
    display: none !important;
  }
  #iqRevenueRangeSelectMobile{
    display: block ;
  }



  .metric-grid{
    display: block;
  }

  .content {
    padding: 5px;
    padding-top: 94px;
    max-width: 100%
  }

  .card.iq-header > .row {
    display: block !important;
}

.regionChipsW{
    display: block !important;
}
.chip:has(#iqLocationTypeSelect){
    margin-top: 9px;
}
.row.regionChipsW > .muted {
    margin-bottom: 10px;
    display: block;
}

.main {
    flex: unset;
    display: block;
}



.iq-dial-container {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 77px;
}
.iq-rev-note.muted {
    line-height: 1.6;
}

.qpnel_right {
    margin-top: 20px;
}

.topMenu {
    width: 100%;
}

.topMenu {
    width: 100%;
    margin: unset;
    padding: 0;
    display: block;
}
.topbar{
    padding: 12px;
    display: block;
    max-width: 100%;
}


.general-expenses-wrap {
    display: block;
}
#inputsForm .grid.g3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}





@media (max-width: 900px){

    .sets_selects_row {
    display: block;
}

    button#orgDefaultsEditBtn {
    position: absolute;
    right: 20px;
    top: calc(50% - 34px);
}
div#orgDefaults-collapsed {
    position: relative;
}

nav.mobile-nav-menu a {
    display: block;
    background-color: #eee;
    width: 100%;
    text-align: center;
    margin-bottom: 7px;
    padding: 8px;
    color: #444;
}

nav.mobile-nav-menu {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
  .nav.topnav{
    display: none !important;
  }
  .mobile-nav-menu{
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 8px 0 12px;
  }
  .mobile-nav-item{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #111;
    text-decoration: none;
  }
  .mobile-nav-item.active{
    background: var(--azure);
    color: #fff;
    border-color: var(--azure);
  }
  #mobileTopNavSelect{
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #111;
  }
  /* Show mobile quarters card above revenue on small screens */
  .mobile-quarters-card{
    display: block !important;
    margin-bottom: 12px;
  }
  .view-inputs #mobileQuarterSelect{
    display: block;
  }
}

/* Inputs view - mobile-only layout fixes (scoped to Inputs) */
@media (max-width: 900px){

    .sets_selects_row_title {
        margin-bottom: 9px;
    }
    button#orgDefaultsDoneBtn {
        color: #444;
        font-size: 13px;
    }
    .hadcount_help {
        margin-top: 5px;
    }
  /* Stack form rows and make controls full width */
  #view #inputsForm .row{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #view #inputsForm .field{
    width: 100% !important;
  }
  #view #inputsForm .field input,
  #view #inputsForm .field select,
  #view #inputsForm .input-wrap input,
  #view #inputsForm .input-currency input{
    width: 100% !important;
  }
  /* Single-column for all inputs grids */
  #view #revBreakdownGrid,
  #view #cogsBreakdownGrid,
  #view #opexBreakdownGrid,
  #view #headBreakdownGrid{
    display: grid;
    grid-template-columns: 1fr !important;
  }
  /* Total sections: stack label and input */
  #view #revTotalSection .field,
  #view #cogsTotalSection .field,
  #view #opexTotalSection .field,
  #view #headTotalSection .field{
    flex-direction: column !important; /* ensure vertical on small screens */
    align-items: stretch;
    gap: 8px;
  }
  /* Hide Inputs right-side panels (Fiscal Quarters, Section Progress, etc.) on mobile */
  #view #inputsForm + div{
    display: none !important;
  }
}