@import './staging.css';

.header { padding: 16px max(24px, calc((100vw - 1180px) / 2)); }
.logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #173d30;
  color: #fff;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 750;
}
.badge {
  background: #fffbef;
  border: 1px solid #e8d9a5;
  color: #7c631e;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 650;
}
main { max-width: 1180px; padding: 32px 24px 60px; }
.panel {
  padding: 23px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #dfe6e2;
}
.login { margin-top: 5vh; }
.login button[type=submit] { width: 100%; }
.heading, .list-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.heading h1 { font-size: 30px; }
.heading p { max-width: 720px; font-size: 13px; }
.secondary { background: #fff; color: #182b25; border-color: #ccd8d0; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.metrics span { display: block; color: #75867b; font-size: 12px; }
.metrics strong { display: block; font-size: 29px; font-variant-numeric: tabular-nums; margin-top: 8px; font-weight: 650; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.list-head { margin-bottom: 12px; }
.list-head h2 { margin-bottom: 0; }
.search-label { margin-top: 20px; }
.business-list { display: grid; gap: 8px; max-height: 600px; overflow: auto; }
.business { width: 100%; padding: 16px; color: #182b25; border: 1px solid #dfe6e2; background: #fff; text-align: left; }
.business.active { border-color: #427654; background: #eff6f1; }
.business strong { display: block; font-size: 15px; font-weight: 650; }
.business small { display: block; margin: 7px 0; color: #75867b; font-size: 11px; font-weight: 450; }
.tag { display: inline-block; padding: 4px 8px; border-radius: 5px; background: #e9f3eb; color: #477456; font-size: 10px; }
.tag.paused { background: #fff3e8; color: #9b6734; }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.detail-stats > div { border: 1px solid #e2e9e4; border-radius: 8px; padding: 12px; }
.detail-stats span { display: block; font-size: 11px; color: #75867b; }
.detail-stats strong { display: block; margin-top: 7px; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.detail-stats .wide { grid-column: 1 / -1; }
.detail-stats .safe strong { color: #477456; }
.detail-stats .blocked strong { color: #996a29; }
@media (max-width: 800px) {
  .workspace { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  main { padding: 25px 16px 40px; }
  .header { padding: 13px 16px; flex-wrap: wrap; }
  .badge { font-size: 8px; }
  .panel { padding: 18px; }
  .heading { align-items: flex-start; }
  .heading h1 { font-size: 27px; }
  .metrics { gap: 8px; }
}