/* Dashboard + canvas: designed panels, not stretched voids.
   Load after scroll-contract / sites-layout. Do not clip .dash-page. */

body.gce-viewport-shell #gce-main,
body.gce-viewport-shell main {
  padding: 16px 20px 24px !important;
}

.dash-page--ops {
  gap: 16px !important;
  padding: 0 0 24px !important;
}

.dash-page--ops .dash-ops-hero {
  align-items: center !important;
  gap: 12px 16px !important;
  padding: 0 0 8px !important;
}

.dash-page--ops .dash-ops-hero .gce-night-btn {
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid #d8e0ea !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dash-page--ops .dash-ops-hero .gce-night-btn.is-night {
  background: #1e3a8a !important;
  border-color: #93c5fd !important;
  color: #dbeafe !important;
}

.dash-page--ops .dash-ops-hero h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

.dash-page--ops .dash-ops-hero-sub {
  margin-top: 4px !important;
  font-size: 13px !important;
}

.dash-page--ops .dash-kpi-grid,
.dash-page--ops .dash-kpi-grid--4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.dash-page--ops .dash-kpi-card,
.dash-page--ops .dash-kpi-card--ops {
  min-height: 88px !important;
  max-height: none;
  padding: 14px 16px 12px !important;
  gap: 4px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.88)) !important;
  border: 1px solid rgba(216, 224, 234, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.dash-page--ops .dash-kpi-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b !important;
}

.dash-page--ops .dash-kpi-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: #0f172a !important;
  margin-top: 2px !important;
}

.dash-page--ops .dash-kpi-footer {
  margin-top: 6px !important;
}

.dash-page--ops .dash-kpi-spark {
  width: 64px !important;
  flex-basis: 64px !important;
  opacity: 0.75;
}

.dash-page--ops .dash-ops-card {
  padding: 14px 16px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 255, 0.9)) !important;
  border: 1px solid rgba(216, 224, 234, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

.dash-page--ops .dash-ops-card-head h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
}

.dash-page--ops .dash-ops-sites-card {
  flex: 0 0 auto !important;
}

.dash-page--ops .dash-ops-sites-card .dash-ops-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  margin: 0;
}

.dash-page--ops .dash-ops-table {
  width: 100%;
  font-size: 13px !important;
}

.dash-page--ops .dash-ops-table th {
  padding: 8px 12px !important;
  background: #f8fafc !important;
  font-size: 11px !important;
  color: #64748b !important;
}

.dash-page--ops .dash-ops-table td {
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: #0f172a !important;
}

.dash-page--ops .dash-ops-map-card {
  overflow: hidden;
}

.dash-page--ops .dash-ops-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  padding: 0 0 2px;
}

.dash-page--ops .dash-ops-map-search {
  flex: 0 1 180px;
  min-width: 140px;
}

.dash-page--ops .dash-ops-map-vendor-select {
  min-width: 108px;
  max-width: 148px;
  height: 30px;
  font-size: 11px !important;
}

.dash-page--ops .dash-ops-map-meta {
  margin-left: auto;
  font-size: 11px !important;
}

.dash-page--ops .dash-ops-map-legend {
  margin: 0 0 4px !important;
  gap: 8px 12px !important;
}

.dash-page--ops .dash-ops-map-tools-adv {
  display: none !important;
}

.dash-page--ops .dash-ops-map-card:hover .dash-ops-map-tools-adv,
.dash-page--ops .dash-ops-map-card:focus-within .dash-ops-map-tools-adv {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

.dash-page--ops .dash-ops-sites-map {
  height: clamp(420px, 56vh, 720px) !important;
  min-height: 420px !important;
  max-height: 720px !important;
  border-radius: 12px !important;
  border: 1px solid #d8e0ea !important;
}

.dash-page--ops .dash-ops-pct .dash-prog-orange {
  background: #1e3a8a !important;
}

.dash-page--ops .dash-ops-new-task:hover {
  background: #172554 !important;
}

@media (max-width: 1100px) {
  .dash-page--ops .dash-kpi-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .dash-page--ops .dash-kpi-grid--4 {
    grid-template-columns: 1fr !important;
  }
}