.procurement-shell {
  --pc-green: #184e3d;
  --pc-green-soft: #e7f4ef;
  --pc-ink: #172026;
  --pc-muted: #65727d;
  --pc-line: #d9e0e5;
  display: grid;
  gap: 16px;
  color: var(--pc-ink);
}

.procurement-shell *, .procurement-dialog * { box-sizing: border-box; }
.procurement-shell button, .procurement-shell input, .procurement-shell select,
.procurement-shell textarea, .procurement-dialog button, .procurement-dialog input,
.procurement-dialog select, .procurement-dialog textarea { font: inherit; }

.procurement-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border: 1px solid #cce5dc;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbf8, #fff);
}
.procurement-hero h2, .procurement-card h3, .procurement-dialog h2 { margin: 0; }
.procurement-hero p { margin: 6px 0 0; }

.procurement-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--pc-line);
  border-radius: 12px;
  background: #fff;
}
.procurement-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: var(--pc-muted);
  background: transparent;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.procurement-tabs button[aria-selected="true"] { color: #fff; background: var(--pc-green); }
.procurement-tabs button:focus-visible, .procurement-action:focus-visible,
.procurement-field :is(input, select, textarea):focus-visible {
  outline: 3px solid rgba(53, 184, 135, .3);
  outline-offset: 2px;
}

.procurement-banner {
  padding: 12px 14px;
  border: 1px solid #bfd9cc;
  border-radius: 10px;
  background: var(--pc-green-soft);
  color: #14503c;
}
.procurement-banner[data-kind="error"] { border-color: #efb7b2; background: #fff0ef; color: #a82e29; }
.procurement-banner[data-kind="warn"] { border-color: #ecd18a; background: #fff8dc; color: #855712; }

.procurement-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.procurement-card {
  grid-column: span 12;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--pc-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 32, 38, .05);
}
.procurement-card.half { grid-column: span 6; }
.procurement-card.third { grid-column: span 4; }
.procurement-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.procurement-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.procurement-kpi { padding: 14px; border: 1px solid var(--pc-line); border-radius: 10px; background: #f8fafb; }
.procurement-kpi span { display: block; color: var(--pc-muted); font-size: 12px; }
.procurement-kpi strong { display: block; margin-top: 7px; font-size: clamp(20px, 3vw, 28px); }

.procurement-list { display: grid; gap: 10px; }
.procurement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--pc-line);
  border-radius: 10px;
  background: #fff;
}
.procurement-row-title { font-weight: 850; overflow-wrap: anywhere; }
.procurement-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 5px; color: var(--pc-muted); font-size: 12px; }
.procurement-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.procurement-empty { padding: 22px; color: var(--pc-muted); text-align: center; border: 1px dashed var(--pc-line); border-radius: 10px; }

.procurement-action {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--pc-line);
  border-radius: 8px;
  color: var(--pc-ink);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}
.procurement-action.primary { color: #fff; border-color: var(--pc-green); background: var(--pc-green); }
.procurement-action.danger { color: #a82e29; border-color: #efb7b2; background: #fff8f7; }
.procurement-action:disabled { opacity: .55; cursor: not-allowed; }

.procurement-form { display: grid; gap: 12px; }
.procurement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.procurement-field { min-width: 0; }
.procurement-field.full { grid-column: 1 / -1; }
.procurement-field label { display: block; margin-bottom: 6px; color: var(--pc-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.procurement-field :is(input, select, textarea) {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--pc-line);
  border-radius: 8px;
  background: #fff;
}
.procurement-field textarea { min-height: 88px; resize: vertical; }
.procurement-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.procurement-status { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; background: #edf2f5; color: #52616a; font-size: 11px; font-weight: 850; }
.procurement-status[data-tone="green"] { color: #106044; background: #dcf5e9; }
.procurement-status[data-tone="red"] { color: #9d2d29; background: #ffe4e1; }
.procurement-status[data-tone="yellow"] { color: #855712; background: #fff2c9; }

.procurement-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--pc-ink);
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
.procurement-dialog::backdrop { background: rgba(10, 22, 20, .58); }
.procurement-dialog-head, .procurement-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.procurement-dialog-head { border-bottom: 1px solid var(--pc-line); }
.procurement-dialog-body { max-height: calc(100vh - 175px); overflow: auto; padding: 18px; }
.procurement-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--pc-line); }
.procurement-messages { display: grid; gap: 8px; margin: 12px 0; }
.procurement-message { padding: 10px; border-radius: 9px; background: #f1f5f6; white-space: pre-wrap; overflow-wrap: anywhere; }
.procurement-message[data-own="true"] { margin-left: 10%; background: #e3f3ec; }
.procurement-flags { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .procurement-card.half, .procurement-card.third { grid-column: span 12; }
  .procurement-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .procurement-hero, .procurement-card-head, .procurement-row { align-items: stretch; flex-direction: column; }
  .procurement-hero { display: grid; }
  .procurement-row { grid-template-columns: 1fr; }
  .procurement-row-actions { justify-content: stretch; }
  .procurement-row-actions .procurement-action { flex: 1; }
  .procurement-form-grid, .procurement-kpis { grid-template-columns: 1fr; }
  .procurement-card { padding: 14px; }
  .procurement-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}