/* Shared page blocks (copied from Logic Maint job-stages.css; keep both in step).
   st-banner = a status line, st-section = a form or list with a small title,
   st-actions = the button bar at the bottom of a section (danger on the start side, main action on the end). */

.st-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px;
             background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.st-banner.info { background: rgba(42,111,196,.06); border-color: rgba(42,111,196,.25); }
.st-banner.warn { background: rgba(237,161,0,.08); border-color: rgba(237,161,0,.35); }
.st-banner.ok   { background: rgba(27,175,122,.08); border-color: rgba(27,175,122,.35); }
.st-banner.muted{ background: var(--mud-palette-background-gray); }
.st-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
          background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.st-banner.info .st-ico { color: #2a6fc4; } .st-banner.warn .st-ico { color: #b77700; } .st-banner.ok .st-ico { color: #138a5f; }
.st-main { flex: 1; min-width: 0; }
.st-title { font-weight: 600; font-size: 1rem; color: var(--mud-palette-text-primary); line-height: 1.35; }
.st-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.st-facts b { font-weight: 600; color: var(--mud-palette-text-primary); }
.st-tools { display: flex; align-items: center; gap: 4px; flex: none; }

.st-section { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 14px 16px 12px; margin-bottom: 16px; background: var(--mud-palette-surface); }
.st-section-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--mud-palette-text-primary); margin-bottom: 12px; }
.st-section-title .mud-icon-root { color: var(--mud-palette-primary); }
.st-section-title small { font-weight: 400; color: var(--mud-palette-text-secondary); font-size: .8rem; }
.st-sub { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 6px 0 -2px; }

.st-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--mud-palette-lines-default);
              margin-top: 14px; padding-top: 12px; }
.st-actions .st-spacer { flex: 1; }

.st-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.st-table th { text-align: start; font-weight: 600; font-size: .74rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .03em;
               padding: 6px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.st-table td { padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: middle; }
.st-table tr:last-child td { border-bottom: none; }
.st-table tr.void td { text-decoration: line-through; opacity: .55; }
.st-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table .act { width: 1%; white-space: nowrap; text-align: end; }
.st-muted { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.st-wrap { overflow-x: auto; }

.st-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
           background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.st-pill.warn { background: rgba(237,161,0,.14); color: #8a5a00; }
.st-pill.ok   { background: rgba(27,175,122,.14); color: #0f6e4b; }
.st-pill.bad  { background: rgba(227,73,72,.12); color: #b42318; }

/* money summary (payments + delivery) */
.st-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.st-money > div { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 10px 14px; background: var(--mud-palette-surface); }
.st-money span { display: block; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.st-money b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.st-money .due { border-color: rgba(227,73,72,.4); background: rgba(227,73,72,.05); } .st-money .due b { color: #b42318; }
.st-money .ok  { border-color: rgba(27,175,122,.4); background: rgba(27,175,122,.05); } .st-money .ok b { color: #0f6e4b; }

@media (max-width: 600px) { .st-banner { flex-wrap: wrap; } .st-tools { width: 100%; justify-content: flex-end; } }