/* --- Worldnic bridge: clamp width + form grids --- */

/* Center the whole page content */
.content-inner,
.pageheader-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* Spacing / rounding */
.card.custom-card {
  margin-bottom: 16px;
  border-radius: 12px;
}
.card.custom-card .card-header { padding: 12px 16px; }
.card.custom-card .card-title { margin: 0; font-weight: 600; font-size: 16px; }

/* Basics grid */
.basic-grid.basics {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr; /* mobile */
}
@media (min-width: 768px) { .basic-grid.basics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .basic-grid.basics { grid-template-columns: repeat(4, 1fr); } }

.basic-grid.basics > div { min-width: 0; }

.basic-grid.basics .form-control,
.basic-grid.basics .form-select,
.desc-card .desc-input { width: 100%; }

/* Requirement rows */
.req-row {
  display: grid;
  grid-template-columns: 1fr 160px max-content 40px;
  align-items: center;
  gap: 10px;
  background: ##F6F7FB;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
}

.val-pill {
  min-width: 26px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.req-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.small-muted { color: #64748b; font-size: 12px; }

.desc-card .desc-input { min-height: 160px; resize: vertical; }

/* Clamp the app content so it doesn't run full-width */
.wn-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px;
}

/* Increase specificity to beat theme wrappers */
.app-content .wn-container,
.main-wrapper .wn-container,
.content-body .wn-container {
  max-width: 1140px !important;
}

/* Section spacing */
.wn-section { margin-bottom: 16px; }

/* Card header typography tighter */
.card.custom-card .card-header { padding: 10px 14px; }
.card.custom-card .card-title { font-size: 14px; font-weight: 700; }

/* Requirement rows layout */
.req-row {
  display:grid;
  grid-template-columns: 1fr 220px 36px 36px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  background:##F6F7FB;
  border:1px solid #e5e7eb;
  border-radius:10px;
}
.req-row .form-control { height: 38px; }
.req-row .form-range { width: 100%; }

/* Weight pill */
.val-pill {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 36px; height: 28px; border-radius: 8px;
  font-weight: 700; font-size: 12px; color:#166534;
  background:#dcfce7; border:1px solid #86efac;
}

/* Icon buttons */
.icon-btn {
  width:36px; height:36px; border-radius:10px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; background:#f1f5f9; cursor:pointer;
}
.icon-btn--danger { background:#fee2e2; border-color:#fecaca; color:#dc2626; }

/* Actions bar under lists */
.req-actions { display:flex; align-items:center; gap:10px; margin-top:8px; }
.req-actions .btn-house { height: 34px; border-radius:12px; padding:0 12px; }
.small-muted { color:#64748b; font-size:12px; }

/* Clamp container (already added) */
.wn-container { max-width: 1140px; margin: 0 auto; padding: 16px; }