/* ==========================================================
   HGP Reconciliation Full Width Patch
   Visual-only. Does not touch Excel import, buttons, data,
   server, calculations, or exports.
   Goal: remove side empty blue margins and use full screen.
   ========================================================== */

:root{
  --hgp-side-width: 235px;
  --hgp-page-gap: 18px;
}

/* Remove forced centered canvas from previous layout patch */
.main{
  margin-left: var(--hgp-side-width) !important;
  width: calc(100vw - var(--hgp-side-width)) !important;
  max-width: none !important;
  min-width: 0 !important;

  padding: 18px 18px 60px 18px !important;

  display: block !important;
  align-items: initial !important;
}

/* All main blocks occupy full usable width */
.main > .hero,
.main > .notice,
.main > .kpi-grid,
.main > .panel{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero should feel wide, not boxed in the center */
.hero{
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
  width: 100% !important;
}

/* KPI row uses the full width cleanly */
.kpi-grid{
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Panels span the full dashboard width */
.panel{
  width: 100% !important;
}

/* Upload row fills screen but stays controlled */
.upload-grid{
  grid-template-columns: minmax(420px, 1fr) 170px 220px 180px !important;
  width: 100% !important;
}

/* Table gets full available room */
.table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
}

/* Make table fill more naturally */
table{
  width: max(100%, 1780px) !important;
  min-width: 1780px !important;
}

/* Avoid the source filename breaking KPI spacing */
#kpiSource,
.kpi .v{
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Remove any old artificial max canvas from previous fixes */
.main > *{
  max-width: none !important;
}

/* Make right side dark background disappear by occupying it */
body{
  overflow-x: hidden !important;
}

/* Better use of screen on large monitors */
@media (min-width: 1500px){
  .main{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero,
  .panel,
  .notice,
  .kpi-grid{
    border-radius: 16px !important;
  }
}

/* Medium screens */
@media (max-width: 1350px){
  .kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .upload-grid{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Small screens */
@media (max-width: 900px){
  .side{
    position: relative !important;
    width: auto !important;
    height: auto !important;
  }

  .main{
    margin-left: 0 !important;
    width: 100vw !important;
    padding: 14px !important;
  }

  .hero,
  .kpi-grid,
  .upload-grid,
  .split{
    grid-template-columns: 1fr !important;
  }
}