/* ============================================================
   v53 — Unified mobile adaptation
   Desktop styles and calculations are untouched.
   Activated only at <= 760px.
   ============================================================ */
@media (max-width:760px){
  *{box-sizing:border-box}
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{min-width:0!important}
  header,.site-header{width:100%;max-width:100%;overflow:hidden}
  main{width:100%!important;max-width:100%!important;min-width:0!important;padding-left:12px!important;padding-right:12px!important}

  /* Global navigation */
  .site-nav,.nav,.tabs,.tab-bar,.nav-tabs{
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar,.nav::-webkit-scrollbar,.tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar,.nav-tabs::-webkit-scrollbar{display:none}
  .site-nav a,.nav a,.tabs a{flex:0 0 auto}

  /* Titles */
  h1{font-size:clamp(34px,10vw,48px)!important;line-height:1.02!important;
     overflow-wrap:anywhere}
  .sub{line-height:1.35!important}

  /* Controls / filters */
  .filters,.filter-grid,.filter-container,.filters-container,
  .controls,.controls-row,.toolbar{
    min-width:0!important;
  }
  .filters,.filter-grid,.filter-container,.filters-container{
    grid-template-columns:1fr!important;
  }
  .controls,.controls-row{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .filters>*,.filter-grid>*{
    min-width:0!important;
    width:100%!important;
  }
  .filters input,.filters select,.filter-grid input,.filter-grid select,
  .controls input,.controls select,.controls button,
  .toolbar input,.toolbar select,.toolbar button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
  }
  button,input,select{font-size:14px!important}

  /* Date controls */
  .overview-datebar,.overview-date-label,.documents-period,
  .period-control,.period-filter-block,.date-filter-stack{
    max-width:100%!important;
    min-width:0!important;
  }
  .overview-datebar{flex-wrap:wrap!important}
  .overview-date-label{width:100%!important}
  .date-picker-wrap{max-width:100%!important}
  input[type=date]{max-width:100%!important}

  /* KPI / summary grids */
  .kpis,.kpi-grid,.metrics-grid,.summary-grid,.pack-kpis,
  .sector-summary-grid,.storage-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    min-width:0!important;
    gap:8px!important;
  }
  .kpi,.card,.kpi-grid>* ,.metrics-grid>*{
    min-width:0!important;
    max-width:100%!important;
  }
  .kpi b,.metric-value,.kpi-value,.card-value{
    font-size:clamp(20px,7vw,32px)!important;
    overflow-wrap:anywhere;
  }

  /* Generic content columns collapse */
  .grid,.grid2,.dashboard-grid,.columns-2,.two-col{
    grid-template-columns:1fr!important;
  }

  /* Charts: never make the page wider than the viewport */
  .chart,.chart-card,.chart-wrap,.storage-chart-wrap,
  .storage-chart-canvas,.chart-container{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .chart-card{overflow:hidden!important}
  .chart-wrap{overflow:hidden!important}
  canvas{max-width:100%!important}

  /* Tables: preserve readable columns, scroll only the table */
  .table-wrap,.table-container,.sector-table-wrap,.storage-table-wrap,
  .pack-table-wrap,.tablebox,.tech-table-wrap,.tech-table-container{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{max-width:none!important}
  .sector-table,.storage-table,.pack-table{min-width:680px}
  .table-wrap table,.table-container table,.tablebox table{min-width:680px}
  .tech-table-wrap table,.tech-table-container table{min-width:680px}

  /* Details: keep the already-designed mobile list */
  .mobile-list{max-width:100%!important}
  .pack-kpis{grid-template-columns:1fr 1fr!important}

  /* Ust-Kut scheme */
  .ustkut-grid{grid-template-columns:1fr!important}
  .ustkut-zoom-modal{padding:6px!important}
  .ustkut-zoom-panel{width:100vw!important;max-width:100vw!important;height:96vh!important}
  .ustkut-map-zoom-btn{right:10px!important;bottom:10px!important}

  /* Storage */
  .storage-main{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important}
  .storage-chart-wrap{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important}
  .storage-chart-canvas{height:320px!important}
  #storageLegend{min-width:0!important;width:100%!important}

  /* Work TS */
  .object-tabs{max-width:100%!important;overflow-x:auto!important;white-space:nowrap}
  .object-tab{flex:0 0 auto!important}
  .bvh-kpis{grid-template-columns:1fr!important}
  .tech-section{max-width:100%!important;overflow:hidden!important}
  .tech-table-wrap{max-width:100%!important}

  /* Upload/update actions */
  .upload,.upload-row,.actions,.button-row{
    max-width:100%!important;
  }
  .upload button,.upload label{min-height:44px!important}

  /* Tooltips must stay inside viewport */
  .info-tip{
    max-width:calc(100vw - 28px)!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width:420px){
  main{padding-left:10px!important;padding-right:10px!important}
  .kpis,.kpi-grid,.metrics-grid,.summary-grid,.pack-kpis,
  .sector-summary-grid,.storage-summary{gap:6px!important}
  .kpi{padding:10px!important}
  .kpi b,.metric-value,.kpi-value,.card-value{font-size:21px!important}
  table{font-size:12px!important}
  .sector-table,.storage-table,.pack-table,
  .table-wrap table,.table-container table,.tablebox table,
  .tech-table-wrap table{min-width:640px}
}