/* ==========================================================
   HGP Reconciliation Layout Fix
   Visual-only patch. No data, Excel, server, or logic touched.
   Goal: centered, balanced, readable reconciliation dashboard.
   ========================================================== */

:root{
  --hgp-side-width: 235px;
  --hgp-content-max: 1560px;
  --hgp-content-pad: 28px;
}

/* Keep the left navigation fixed but give the main content a real centered canvas */
.main{
  margin-left: var(--hgp-side-width) !important;
  width: calc(100vw - var(--hgp-side-width)) !important;
  max-width: none !important;
  padding: var(--hgp-content-pad) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Every major block uses the same professional width */
.main > .hero,
.main > .notice,
.main > .kpi-grid,
.main > .panel{
  width: min(100%, var(--hgp-content-max)) !important;
}

/* Hero alignment */
.hero{
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  align-items: stretch !important;
  gap: 24px !important;
}

.hero h1{
  max-width: 1050px !important;
}

.hero p{
  max-width: 1120px !important;
}

/* Make warning bar clean and full-width inside content canvas */
.notice{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* KPI row stays contained, no text overflow */
.kpi-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.kpi{
  min-width: 0 !important;
  overflow: hidden !important;
}

.kpi .v,
#kpiSource{
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(22px, 1.15vw + 12px, 32px) !important;
}

/* Source file name can be long. Keep it readable without breaking the page. */
#kpiSource{
  display: block !important;
  color: var(--blue) !important;
  letter-spacing: .01em !important;
}

/* Upload panel balance */
.upload-grid{
  grid-template-columns: minmax(360px, 1fr) 170px 210px 170px !important;
  align-items: end !important;
}

.upload-box input{
  width: 100% !important;
}

/* Employee admin panel: make header wrap cleanly */
.panel-head{
  align-items: flex-start !important;
}

.panel-head > div:first-child{
  min-width: 0 !important;
}

.button-row{
  flex: 0 0 auto !important;
  max-width: 520px !important;
}

/* Table section: give the table real room and make scrolling intentional */
.table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  max-height: 680px !important;
  border-radius: 16px !important;
}

/* Better table sizing */
table{
  width: max(100%, 1720px) !important;
  min-width: 1720px !important;
}

th,
td{
  padding: 10px 9px !important;
  vertical-align: middle !important;
}

/* Inputs remain usable but not huge */
td input,
td select{
  min-height: 38px !important;
  font-size: 13px !important;
  padding: 8px 9px !important;
}

/* Column sizing for harmony */
th:nth-child(1), td:nth-child(1){ width: 110px !important; }
th:nth-child(2), td:nth-child(2){ width: 160px !important; }
th:nth-child(3), td:nth-child(3){ width: 145px !important; }
th:nth-child(4), td:nth-child(4){ width: 130px !important; }
th:nth-child(5), td:nth-child(5){ width: 130px !important; }
th:nth-child(6), td:nth-child(6){ width: 120px !important; }
th:nth-child(7), td:nth-child(7){ width: 115px !important; }
th:nth-child(8), td:nth-child(8){ width: 115px !important; }
th:nth-child(9), td:nth-child(9){ width: 125px !important; }
th:nth-child(10), td:nth-child(10){ width: 125px !important; }
th:nth-child(11), td:nth-child(11){ width: 130px !important; }
th:nth-child(12), td:nth-child(12){ width: 160px !important; }
th:nth-child(13), td:nth-child(13){ width: 250px !important; }
th:nth-child(14), td:nth-child(14){ width: 100px !important; }

/* Notes should be useful but not destroy layout */
td.notes input{
  min-width: 230px !important;
}

/* Refund column clear */
.refund{
  white-space: nowrap !important;
  font-size: 14px !important;
}

/* Bottom split also centered and balanced */
.split{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Improve page bottom spacing */
.main::after{
  content:"";
  display:block;
  height:60px;
}

/* Large screens: make everything feel premium and centered */
@media (min-width: 1700px){
  :root{
    --hgp-content-max: 1650px;
  }

  .main{
    padding-left: 36px !important;
    padding-right: 36px !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;
  }

  .button-row{
    max-width: none !important;
    justify-content: flex-start !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;
    align-items: stretch !important;
  }

  .main > .hero,
  .main > .notice,
  .main > .kpi-grid,
  .main > .panel{
    width: 100% !important;
  }

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

  .hero h1{
    font-size: clamp(34px, 8vw, 52px) !important;
  }
}