/* Wave 2B — engagement.grid + engagement.allocation_grid styles.
 * Shared spreadsheet-like aesthetic: navy header, per-cell borders,
 * gold-glow Set-All row, muted status indicators, sticky header on scroll.
 */

/* ─── engagement.grid (static + dynamic_rows) ──────────────────── */
.psc-grid {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--bk-border, #e2e4e8);
    border-radius: var(--bk-radius-sm, 6px);
    background: var(--bk-card, #fff);
}

.psc-grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.psc-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bk-navy, #1a1a2e);
    color: white;
    padding: 6px 10px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-right: 1px solid #2d2d3d;
}

.psc-grid-table thead th:last-child { border-right: none; }
.psc-grid-corner { min-width: 120px; }
.psc-grid-req { color: var(--bk-tier-red, #DC2626); margin-left: 2px; }

.psc-grid-table tbody td {
    padding: 3px 4px;
    border: 1px solid var(--bk-border, #e2e4e8);
    vertical-align: middle;
}

.psc-grid-row-header {
    font-weight: 600;
    background: var(--bk-surface-stripe, #f8f9fb);
    color: var(--bk-navy, #1a1a2e);
    padding: 6px 10px !important;
    font-size: 0.78rem;
}

.psc-grid-row-pk {
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--bk-text-muted, #72727e);
}

.psc-grid-cell {
    position: relative;
    vertical-align: middle;
}

/* Image cell — a small thumbnail so the design image doesn't blow up row
   height (po_items / po_materials). Display-only; click-to-zoom is elsewhere. */
.psc-grid-cell-img {
    max-height: 44px;
    max-width: 64px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.psc-grid-cell-empty {
    color: var(--bk-text-muted, #9a9aa8);
    font-size: 0.9rem;
}

.psc-grid-cell-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.82rem;
    border-radius: 3px;
    box-sizing: border-box;
}

.psc-grid-cell-input:hover {
    background: #fafbfc;
    border-color: var(--bk-border, #e2e4e8);
}

.psc-grid-cell-input:focus {
    outline: 2px solid var(--bk-navy, #1a1a2e);
    background: white;
}

.psc-grid-cell-status {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--bk-tier-green, #059669);
    opacity: 0;
    transition: opacity 0.2s;
}
.psc-grid-cell-status.saved  { opacity: 1; color: var(--bk-tier-green, #059669); }
.psc-grid-cell-status.saving { opacity: 1; color: var(--bk-text-muted, #72727e); }
.psc-grid-cell-status.error  { opacity: 1; color: var(--bk-tier-red, #DC2626); }

/* Set-All row */
.psc-grid-set-all td {
    background: var(--bk-gold-glow, #f5eedd) !important;
    border-color: var(--bk-gold, #c29954) !important;
}
.psc-grid-set-all-label {
    font-weight: 700;
    color: var(--bk-navy, #1a1a2e);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 6px;
    display: inline-block;
}
.psc-grid-set-all-input {
    background: white !important;
    border: 1px solid var(--bk-border, #e2e4e8) !important;
}

/* Totals row */
.psc-grid-totals td {
    background: var(--bk-surface-stripe, #f8f9fb) !important;
    font-weight: 700;
    color: var(--bk-navy, #1a1a2e);
    border-top: 2px solid var(--bk-navy, #1a1a2e) !important;
}
.psc-grid-totals-label {
    padding: 6px 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}
.psc-grid-totals-cell { padding: 6px 10px; text-align: right; }

/* Row-select checkbox column */
.psc-grid-check-col { width: 30px; text-align: center; }

.psc-grid-empty {
    text-align: center;
    padding: 20px;
    color: var(--bk-text-muted, #72727e);
    font-style: italic;
}


/* ─── engagement.allocation_grid ──────────────────────────────── */
.psc-allocation-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.psc-allocation-empty {
    padding: 20px;
    text-align: center;
    color: var(--bk-text-muted, #72727e);
    font-style: italic;
    border: 1px dashed var(--bk-border, #e2e4e8);
    border-radius: var(--bk-radius-sm, 6px);
}

.psc-alloc-item {
    border: 1px solid var(--bk-border, #e2e4e8);
    border-radius: var(--bk-radius-sm, 6px);
    background: var(--bk-card, #fff);
    overflow: hidden;
}

.psc-alloc-item-head {
    padding: 10px 14px;
    background: var(--bk-surface-stripe, #f8f9fb);
    border-bottom: 1px solid var(--bk-border, #e2e4e8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.psc-alloc-item--collapsible .psc-alloc-item-head {
    cursor: pointer;
    user-select: none;
}

.psc-alloc-caret {
    color: var(--bk-text-muted, #72727e);
    font-size: 0.8rem;
    display: inline-block;
    transition: transform 0.15s;
}
.psc-alloc-item.collapsed .psc-alloc-caret { transform: rotate(-90deg); }
.psc-alloc-item.collapsed .psc-alloc-item-body { display: none; }

.psc-alloc-item-code {
    font-weight: 700;
    color: var(--bk-navy, #1a1a2e);
    font-size: 0.9rem;
    flex: 1;
}

.psc-alloc-item-tempcode {
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    color: var(--bk-text-muted, #72727e);
    font-size: 0.72rem;
    margin-left: 8px;
    font-weight: 400;
}

.psc-alloc-item-total {
    background: var(--bk-navy, #1a1a2e);
    color: white;
    padding: 3px 12px;
    border-radius: var(--bk-radius-pill, 9999px);
    font-size: 0.72rem;
    font-weight: 700;
}

.psc-alloc-item-body { padding: 12px 14px; }

.psc-alloc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.psc-alloc-table thead th {
    background: var(--bk-navy, #1a1a2e);
    color: white;
    padding: 5px 10px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-right: 1px solid #2d2d3d;
}
.psc-alloc-table thead th:last-child { border-right: none; }

.psc-alloc-style-header {
    font-weight: 600;
    background: var(--bk-surface-stripe, #f8f9fb);
    padding: 5px 10px !important;
    color: var(--bk-navy, #1a1a2e);
    font-size: 0.78rem;
    border: 1px solid var(--bk-border, #e2e4e8);
}

.psc-alloc-cell {
    padding: 3px 4px;
    border: 1px solid var(--bk-border, #e2e4e8);
    position: relative;
}

.psc-alloc-cell-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.82rem;
    border-radius: 3px;
    text-align: right;
    box-sizing: border-box;
}

.psc-alloc-cell-input:hover  { background: #fafbfc; border-color: var(--bk-border, #e2e4e8); }
.psc-alloc-cell-input:focus  { outline: 2px solid var(--bk-navy, #1a1a2e); background: white; }

.psc-alloc-cell-status {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    margin-left: 3px;
    opacity: 0;
    transition: opacity 0.2s;
}
.psc-alloc-cell-status.saved  { opacity: 1; color: var(--bk-tier-green, #059669); }
.psc-alloc-cell-status.saving { opacity: 1; color: var(--bk-text-muted, #72727e); }
.psc-alloc-cell-status.error  { opacity: 1; color: var(--bk-tier-red, #DC2626); }

/* Mobile — larger tap targets */
@media (max-width: 600px) {
    .psc-grid-cell-input, .psc-alloc-cell-input { min-height: 44px; font-size: 16px; padding: 8px 10px; }
    .psc-grid-set-all-input { min-height: 44px; }
}

/* Read-only display mode (engagement.grid read_only=True) — static cells, no inputs.
   Reused by the supplier price list; harmless for editable grids. */
.psc-grid-cell-static {
  display: inline-block;
  padding: 2px 2px;
  font-size: var(--bk-text-sm, .82rem);
  color: var(--bk-text, #2d2d3a);
}
/* Per-row 'New' badge (new_flag_bus/new_flag_field) — mirrors the carousel done-badge. */
.psc-grid-new {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bk-tier-emerald, #10b981);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  vertical-align: middle;
}
.psc-grid-cell.is-new { box-shadow: inset 3px 0 0 var(--bk-tier-emerald, #10b981); }