/* Stili specifici delle pagine */

/* ---------- Page header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.page-header__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
.page-header__sub {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-top: 2px;
}
.page-header__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ---------- Filters bar ---------- */
.filters {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.filters .field {
  min-width: 180px;
  flex: 1;
}
.filters .field--actions {
  flex: 0 0 auto;
  align-self: flex-end;
}

/* ---------- Dashboard ---------- */
.dashboard {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 1023px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}
.dashboard__status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-text-muted);
}
.status-dot--ok { background: var(--c-success); }
.status-dot--ko { background: var(--c-danger); }
.status-dot--warn { background: var(--c-warning); }

.dashboard__quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.dashboard__quick .btn {
  justify-content: flex-start;
  min-height: 52px;
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 1023px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
}
.product-detail__img {
  width: 100%;
  max-width: 320px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

/* ---------- Identifiers list ---------- */
.id-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.id-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.id-row__type {
  font-weight: var(--fw-semibold);
  min-width: 120px;
}
.id-row__value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text);
  word-break: break-all;
}
.id-row__source {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.id-row__actions {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
}

/* ---------- Inline helpers ---------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.text-muted {
  color: var(--c-text-muted);
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }