/* Sites Management — last-loaded layout. Table lives in the main pane only.
   Week headings size to their pill. Sidebar stays in its grid column. */

/* ── App columns: main never paints under the in-flow sidebar ── */
@media (min-width: 1201px) {
  html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .app {
    grid-template-columns: var(--gce-sidebar-w, 252px) minmax(0, 1fr) !important;
  }

  html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar,
  html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar.sidebar--field {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }

  html:not([data-gce-viewport="compact"]) body.gce-viewport-shell #gce-main,
  html:not([data-gce-viewport="compact"]) body.gce-viewport-shell main {
    min-width: 0 !important;
    max-width: 100% !important;
    isolation: isolate;
    z-index: 1;
    overflow-x: hidden !important;
  }
}

body.gce-viewport-shell .sidebar--field .nav.nav--field {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
}

body.gce-viewport-shell .sidebar--field .sidebar-nav-foot,
body.gce-viewport-shell .sidebar-footer,
body.gce-viewport-shell .sidebar--field .side-card--logout-only {
  flex: 0 0 auto !important;
  margin-top: 0.75rem !important;
}

body.gce-viewport-shell .sidebar--field .side-footer-brand,
body.gce-viewport-shell .sidebar--field .sidebar-under-logout .side-footer-brand {
  margin-top: 0.5rem !important;
}

@media (min-width: 1201px) {
  body.gce-viewport-shell.gce-sites-mockup #gce-main,
  body.gce-viewport-shell.gce-sites-mockup main {
    width: 100% !important;
    max-width: none !important;
    padding: 0.45rem 0.55rem 0.75rem 0.28rem !important;
  }
}

/* Sidebar chrome in rem so laptop density shrinks labels with html font-size. */
html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar--field .nav-item,
html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar--field .nav--field .nav-item,
html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar--field .sidebar-nav-foot .nav-item {
  font-size: 0.8125rem !important;
  padding: 0.4rem 0.65rem 0.4rem 0.7rem !important;
  min-height: 2.15rem !important;
  gap: 0.55rem !important;
  border-radius: 0.65rem !important;
}

html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar--field .brand--field h1,
html:not([data-gce-viewport="compact"]) body.gce-viewport-shell .sidebar .brand h1 {
  font-size: 0.875rem !important;
}

body.gce-viewport-shell.gce-sites-mockup .main-page:not(.hidden),
body.gce-viewport-shell.gce-sites-mockup #sites-page-root,
body.gce-viewport-shell.gce-sites-mockup #sites-page-root > .stm-page,
body.gce-viewport-shell.gce-sites-mockup .stm-list-panel,
body.gce-viewport-shell.gce-sites-mockup .stm-body.stm-body--full,
body.gce-viewport-shell.gce-sites-mockup .stm-main.stm-main--full {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.gce-viewport-shell.gce-sites-mockup #sites-page-root > .stm-page,
body.gce-viewport-shell.gce-sites-mockup .stm-list-panel,
body.gce-viewport-shell.gce-sites-mockup .stm-body.stm-body--full,
body.gce-viewport-shell.gce-sites-mockup .stm-main.stm-main--full {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-self: stretch !important;
}

.gce-sites-mockup .stm-page {
  gap: 0.65rem !important;
}

.gce-sites-mockup .stm-kpi-grid,
.gce-sites-mockup .stm-kpi-grid--mockup {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.45rem 0.55rem !important;
}

.gce-sites-mockup .stm-kpi--mockup {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.5rem 0.6rem !important;
  border-radius: 0.65rem !important;
  overflow: hidden !important;
}

.gce-sites-mockup .stm-kpi--mockup .stm-kpi-label {
  font-size: 0.625rem !important;
}

.gce-sites-mockup .stm-kpi--mockup .stm-kpi-value {
  font-size: 1.25rem !important;
}

.gce-sites-mockup .stm-status-row {
  min-height: 0 !important;
  gap: 0.75rem !important;
  margin-top: 0.15rem;
}

.gce-sites-mockup .stm-status-tab {
  font-size: 0.75rem !important;
  padding: 0 0.85rem !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

.gce-sites-mockup .stm-table-toolbar {
  margin-top: 0.35rem !important;
  padding: 0.5rem 0.65rem !important;
  gap: 0.45rem !important;
}

.gce-sites-mockup .stm-search,
.gce-sites-mockup .stm-filter-select,
.gce-sites-mockup .stm-table-toolbar .stm-filter-select {
  font-size: 0.75rem !important;
  padding: 0.3rem 0.5rem !important;
}

body.gce-viewport-shell.gce-sites-mockup #stm-sites-list-view.stm-table-card-full,
.gce-sites-mockup .stm-list-panel[data-stm-view="list"] #stm-sites-list-view,
.gce-sites-mockup .stm-list-panel[data-stm-view="list"] #stm-sites-list-view.stm-table-card-full {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  overflow: visible !important;
}

.gce-sites-mockup .stm-list-panel[data-stm-view="grid"] #stm-sites-list-view,
.gce-sites-mockup .stm-list-panel[data-stm-view="grid"] #stm-sites-list-view.stm-table-card-full,
.gce-sites-mockup #stm-sites-list-view.hidden {
  display: none !important;
}

/* Fit every column in the pane. No hidden X-scroll, no max-content table. */
.gce-sites-mockup .stm-table-wrap,
body.gce-viewport-shell.gce-sites-mockup [data-gce-scroll] .stm-table-wrap {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 0.125rem 0 3.5rem 0 !important;
}

.gce-sites-mockup .stm-table,
.gce-sites-mockup .stm-table--mockup {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: max-content !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

.gce-sites-mockup .stm-table thead,
.gce-sites-mockup .stm-table tbody {
  height: auto !important;
}

.gce-sites-mockup .stm-table th,
.gce-sites-mockup .stm-table td {
  padding: 0.62rem 0.65rem !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden;
  vertical-align: middle !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

.gce-sites-mockup .stm-table thead {
  display: table-header-group !important;
}

.gce-sites-mockup .stm-table thead tr {
  display: table-row !important;
}

.gce-sites-mockup .stm-table thead th {
  display: table-cell !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  font-size: 0.625rem !important;
  white-space: nowrap !important;
}

.gce-sites-mockup .stm-table th.stm-th-num,
.gce-sites-mockup .stm-table td.stm-th-num,
.gce-sites-mockup .stm-table .stm-th-select,
.gce-sites-mockup .stm-table .stm-num-cell,
.gce-sites-mockup .stm-table .stm-select-cell {
  width: 4.25rem !important;
  min-width: 4.25rem !important;
  max-width: 4.25rem !important;
}

.gce-sites-mockup .stm-table th.stm-col-site_id,
.gce-sites-mockup .stm-table td.stm-id-cell {
  width: 8.5rem !important;
  min-width: 8.5rem !important;
  max-width: 8.5rem !important;
}
.gce-sites-mockup .stm-table th.stm-col-site_name,
.gce-sites-mockup .stm-table td.stm-name-cell { width: 9% !important; }
.gce-sites-mockup .stm-table th.stm-col-address,
.gce-sites-mockup .stm-table td.stm-addr-cell {
  width: 11% !important;
  max-width: none !important;
}
.gce-sites-mockup .stm-table th.stm-col-vendor,
.gce-sites-mockup .stm-table td.stm-vendor-cell { width: 6.5% !important; }
.gce-sites-mockup .stm-table th.stm-col-project,
.gce-sites-mockup .stm-table td.stm-project-cell,
.gce-sites-mockup .stm-table td.stm-col-project {
  width: 6.5% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.gce-sites-mockup .stm-table th.stm-col-market,
.gce-sites-mockup .stm-table td.stm-market-cell { width: 6% !important; }
.gce-sites-mockup .stm-table th.stm-col-status,
.gce-sites-mockup .stm-table td.stm-status-cell {
  width: 8.5rem !important;
  min-width: 8.5rem !important;
  max-width: 9.5rem !important;
  overflow: hidden !important;
}
.gce-sites-mockup .stm-table th.stm-col-progress,
.gce-sites-mockup .stm-table td.stm-pct-cell { width: 6% !important; }
.gce-sites-mockup .stm-table th.stm-col-schedule,
.gce-sites-mockup .stm-table td.stm-schedule-col {
  width: 12% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.gce-sites-mockup .stm-table th.stm-col-crew,
.gce-sites-mockup .stm-table td.stm-crew-cell {
  width: 10% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.gce-sites-mockup .stm-table th.stm-col-week,
.gce-sites-mockup .stm-table td.stm-week-col {
  width: 8% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.gce-sites-mockup .stm-table th.stm-col-notes,
.gce-sites-mockup .stm-table td.stm-notes-col {
  width: 9% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
.gce-sites-mockup .stm-table th.stm-col-actions,
.gce-sites-mockup .stm-table th.stm-th-actions,
.gce-sites-mockup .stm-table td.stm-actions-cell {
  width: 4.5% !important;
  min-width: 0 !important;
  white-space: nowrap;
}

.gce-sites-mockup .stm-addr-cell,
.gce-sites-mockup .stm-addr-text {
  max-width: 100% !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

.gce-sites-mockup .stm-site-name,
.gce-sites-mockup .stm-site-id-link {
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

.gce-sites-mockup .stm-site-id-link,
.gce-sites-mockup .stm-row-number {
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  max-width: none !important;
}

.gce-sites-mockup .stm-notes-cell,
.gce-sites-mockup .stm-notes-text {
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
}

/* Full status label — never clip to "In C". */
.gce-sites-mockup .status-picker-wrap,
.gce-sites-mockup .crew-picker-wrap {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.gce-sites-mockup .status-picker-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.3rem 0.55rem !important;
  gap: 0.3rem !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.gce-sites-mockup .status-picker-btn > span:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}

.gce-sites-mockup .crew-picker-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0.2rem 0.35rem !important;
  gap: 0.2rem !important;
  font-size: 0.625rem !important;
  overflow: hidden !important;
}

.gce-sites-mockup .crew-picker-btn > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1600px) {
  body.gce-viewport-shell.gce-sites-mockup #gce-main,
  body.gce-viewport-shell.gce-sites-mockup main {
    padding: 0.45rem 0.55rem 0.4rem !important;
  }

  .gce-sites-mockup .stm-kpi-grid,
  .gce-sites-mockup .stm-kpi-grid--mockup {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
  }
}

@media (max-width: 720px) {
  .gce-sites-mockup .stm-kpi-grid--mockup {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.gce-sites-mockup .stm-table,
.gce-sites-mockup .stm-table--mockup,
.gce-sites-mockup .stm-table thead,
.gce-sites-mockup .stm-table tbody,
.gce-sites-mockup .stm-table tbody.stm-week-group {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex-grow: 0 !important;
}

.gce-sites-mockup .stm-table tr.stm-row,
.gce-sites-mockup .stm-table tr.stm-row-card {
  height: auto !important;
  min-height: 3.15rem !important;
  opacity: 1 !important;
}

/* Keep a real table so thead columns line up (no stray SITE # on the right).
   Table height is max-content so leftover pane height cannot inflate week rows. */
.gce-sites-mockup .stm-table tbody.stm-week-group {
  display: table-row-group !important;
  width: 100% !important;
}

.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-week-head,
.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-week-gap,
.gce-sites-mockup .stm-table tr.stm-week-head,
.gce-sites-mockup .stm-table tr.stm-week-gap {
  display: table-row !important;
  height: 2.25rem !important;
  max-height: none !important;
  min-height: 2.25rem !important;
  line-height: 2.25rem !important;
  overflow: hidden !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-week-head td,
.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-week-gap td,
.gce-sites-mockup .stm-table tr.stm-week-head td,
.gce-sites-mockup .stm-table tr.stm-week-gap td {
  display: table-cell !important;
  height: 2.25rem !important;
  max-height: none !important;
  line-height: 2.25rem !important;
  padding: 0 0.35rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

.gce-sites-mockup .stm-week-head-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 2.25rem !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 0.35rem !important;
  line-height: 1.875rem !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.gce-sites-mockup .stm-week-head-label {
  flex: 0 0 auto !important;
  color: #1e3a8a !important;
  padding: 0 0.35rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.gce-sites-mockup .stm-outage-date,
.gce-sites-mockup .stm-week-range,
.gce-sites-mockup .stm-custom-cell--outage .stm-outage-date {
  white-space: nowrap !important;
  font-size: 0.625rem !important;
}

body.gce-sites-mockup .gce-ai-fab {
  bottom: 0.75rem !important;
  right: 0.75rem !important;
  min-width: 4.25rem !important;
  height: 2.15rem !important;
  padding: 0 0.7rem !important;
  font-size: 0.6875rem !important;
  border-radius: 0.7rem !important;
}

body.gce-viewport-shell.gce-sites-mockup .main-page:not(.hidden) > #sites-page-root {
  padding-bottom: 0.5rem !important;
}

html body.gce-viewport-shell.gce-sites-mockup .stm-table.stm-table--mockup {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  flex-grow: 0 !important;
}

html body.gce-viewport-shell.gce-sites-mockup .stm-table tbody.stm-week-group {
  display: table-row-group !important;
  height: auto !important;
  min-height: 0 !important;
  flex-grow: 0 !important;
}

html body.gce-viewport-shell.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-week-head,
html body.gce-viewport-shell.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-week-head td {
  height: 1.875rem !important;
  min-height: 1.875rem !important;
  max-height: 1.875rem !important;
  flex-grow: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body.gce-viewport-shell.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-row,
html body.gce-viewport-shell.gce-sites-mockup .stm-table tbody.stm-week-group tr.stm-row td {
  height: auto !important;
  opacity: 1 !important;
}

/* Slightly lighter chip/pill outlines (blue / green / amber) — fills stay put. */
html body.gce-viewport-shell.gce-sites-mockup .status-picker-btn.status-select.construction {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}
html body.gce-viewport-shell.gce-sites-mockup .status-picker-btn.status-select.complete {
  border-color: #bbf7d0 !important;
}
html body.gce-viewport-shell.gce-sites-mockup .status-picker-btn.status-select.pending,
html body.gce-viewport-shell.gce-sites-mockup .status-picker-btn.status-select.hold,
html body.gce-viewport-shell.gce-sites-mockup .status-picker-btn.status-select.troubleshoot {
  border-color: #fde68a !important;
}
html body.gce-viewport-shell.gce-sites-mockup .crew-picker-btn:not(.unassigned) {
  border-color: #d1fae5 !important;
}
html body.gce-viewport-shell.gce-sites-mockup .crew-picker-btn.unassigned {
  border-color: #fde68a !important;
}