/**
 * SMP Event Manager — Plugin Stylesheet
 *
 * Covers all custom smp-* classes used across manager shortcode screens
 * and admin screens. Admin screens additionally rely on WordPress admin CSS;
 * manager shortcode screens (smp_orders, smp_inventory, smp_financials,
 * smp_reports) have no guaranteed WP admin CSS so all custom component
 * styles must live here.
 *
 * BEM conventions:
 *   Block:     .smp-{block}
 *   Element:   .smp-{block}__{element}
 *   Modifier:  .smp-{block}--{modifier}
 */

/* ==========================================================================
   PORTAL WRAPPER
   ========================================================================== */

.smp-manager-portal {
    /* ============================================================
       DESIGN TOKENS
       ============================================================ */
    --smp-space-1: 4px;
    --smp-space-2: 8px;
    --smp-space-3: 12px;
    --smp-space-4: 16px;
    --smp-space-5: 24px;
    --smp-space-6: 32px;
    --smp-portal-pad: 1.5rem;   /* drives nav bleed — sync with padding below */
    --smp-accent:     #d4a017;  /* warm amber: events, celebration, the melting pot */
    --smp-nav-bg:     #1b2d45;  /* deep navy: portal identity */

    max-width: 1200px;
    margin: 0 auto;
    padding: var(--smp-portal-pad);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #1d2327;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #c3c4c7;
    border-top: 3px solid #2271b1;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.smp-manager-portal *,
.smp-manager-portal *::before,
.smp-manager-portal *::after {
    box-sizing: inherit;
}

/* Area wrappers (each shortcode emits one of these) */
.smp-area-orders,
.smp-area-reports,
.smp-area-inventory,
.smp-area-financials {
    /* inherits from .smp-manager-portal */
}

/* Typography scale — scoped to portal to avoid leaking into WP theme */
.smp-manager-portal h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 12px;
}

.smp-manager-portal h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 8px;
}

/* ==========================================================================
   BADGE SYSTEM — unified BEM: .smp-badge .smp-badge--{modifier}
   All status and type badges use this single system.
   WCAG 2.1 AA: dark text on light background, ≥ 4.5:1 contrast.
   font-weight:600 is load-bearing for contrast at 0.9em.
   ========================================================================== */

.smp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
}

/* Order statuses */
.smp-badge--draft {
    background: #e8e8e8;
    color: #3c434a;
}

.smp-badge--submitted {
    background: #fff3cd;
    color: #7a5900;
}

.smp-badge--approved {
    background: #d4edda;
    color: #1a6030;
}

.smp-badge--shipped {
    background: #cce5ff;
    color: #004085;
}

.smp-badge--received {
    background: #d1ecf1;
    color: #0c5460;
}

.smp-badge--rejected {
    background: #f8d7da;
    color: #721c24;
}

.smp-badge--cancelled {
    background: #e2e3e5;
    color: #383d41;
}

/* Event / Item statuses */
.smp-badge--active {
    background: #d4edda;
    color: #1a6030;
}

.smp-badge--inactive {
    background: #e2e3e5;
    color: #383d41;
}

.smp-badge--pending {
    background: #fff3cd;
    color: #7a5900;
}

/* Movement types (inventory ledger) */
.smp-badge--receipt {
    background: #d4edda;
    color: #1a6030;
}

.smp-badge--depletion {
    background: #f8d7da;
    color: #721c24;
}

.smp-badge--correction {
    background: #cce5ff;
    color: #004085;
}

/* ==========================================================================
   BUTTON SYSTEM — unified BEM: .smp-button .smp-button--{modifier}
   ========================================================================== */

.smp-button {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    background: #f6f7f7;
    color: #1d2327;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.smp-button:hover {
    background: #f0f0f1;
    border-color: #646970;
    color: #1d2327;
}

.smp-button:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.smp-button--primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.smp-button--primary:hover {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}

.smp-button--secondary {
    background: #f6f7f7;
    border-color: #8c8f94;
    color: #1d2327;
}

.smp-button--secondary:hover {
    background: #f0f0f1;
    border-color: #646970;
    color: #1d2327;
}

.smp-button--danger {
    background: #d63638;
    border-color: #b32d2e;
    color: #fff;
}

.smp-button--danger:hover {
    background: #b32d2e;
    border-color: #8a2122;
    color: #fff;
}

.smp-button--sm {
    padding: 3px 8px;
    font-size: 12px;
}

/* ==========================================================================
   TAB NAVIGATION SYSTEM — .smp-tab .smp-tab--{modifier}
   ========================================================================== */

/* Tab navigation system */
[role="tablist"] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #c3c4c7;
    margin-bottom: 16px;
}

.smp-tab {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #50575e;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.1s ease, border-bottom-color 0.1s ease;
}

.smp-tab:hover {
    color: #1d2327;
    border-bottom-color: #8c8f94;
}

.smp-tab--active,
.smp-tab[aria-selected="true"] {
    color: #1d2327;
    font-weight: 600;
    border-bottom-color: #2271b1;
}

.smp-tab:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Urgency badge inside a tab — WCAG: #ffffff on #d63638 = 4.6:1, passes AA at font-weight:700 */
.smp-tab__badge {
    display: inline-block;
    background: #d63638;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
}

/* ==========================================================================
   TABLE SYSTEM — .smp-table
   ========================================================================== */

.smp-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.smp-table th,
.smp-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #c3c4c7;
}

.smp-table thead th {
    background: #f6f7f7;
    font-weight: 600;
    border-bottom: 2px solid #c3c4c7;
}

.smp-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.smp-table tbody tr:hover {
    background: #f0f6fc;
}

/* Numeric columns — right-aligned, tabular figures */
.smp-col--number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Overflow wrapper utility */
.smp-table-scroll {
    overflow-x: auto;
}

/* ==========================================================================
   NOTICE / ALERT SYSTEM — .smp-notice .smp-notice--{modifier}
   Also covers .smp-access-denied (alias for backward compat with tests).
   ========================================================================== */

.smp-notice {
    padding: 12px 16px;
    border-left: 4px solid #8c8f94;
    background: #f6f7f7;
    margin: 12px 0;
    border-radius: 0 3px 3px 0;
}

.smp-notice p {
    margin: 0;
}

.smp-notice--error,
.smp-access-denied {
    border-left-color: #d63638;
    background: #fcf0f1;
    color: #50001a;
}

.smp-notice--warning {
    border-left-color: #dba617;
    background: #fcf9e8;
    color: #4a3200;
}

.smp-notice--success {
    border-left-color: #00a32a;
    background: #edfaef;
    color: #00441e;
}

.smp-notice--info {
    border-left-color: #2271b1;
    background: #f0f6fc;
    color: #00325c;
}

/* ==========================================================================
   FILTER FORMS
   ========================================================================== */

.smp-filter-form {
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    padding: 12px;
    margin: 0 0 16px;
}

.smp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.smp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smp-field label {
    font-weight: 600;
    font-size: 13px;
}

.smp-field input,
.smp-field select {
    padding: 4px 8px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.5;
}

.smp-field--actions {
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
    padding-bottom: 1px; /* align baseline with inputs */
}

/* Horizontal filter bar (admin financials reference pattern) */
.smp-financials-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin: 12px 0 16px;
}

.smp-financials-filter label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.smp-financials-filter input,
.smp-financials-filter select {
    padding: 4px 8px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    font-size: 13px;
}

/* ==========================================================================
   FORM STRUCTURE — fieldset, form actions, back link, hints
   ========================================================================== */

.smp-fieldset {
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 20px;
    min-width: 0; /* prevents fieldset from overflowing its flex/grid parent */
}

.smp-fieldset legend {
    font-weight: 600;
    font-size: 13px;
    padding: 0 6px;
    color: #1d2327;
}

.smp-field-hint {
    font-size: 12px;
    color: #50575e;
    margin-top: 4px;
    display: block;
}

.smp-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #c3c4c7;
}

/* Mobile: stack the footer's three controls (AGENTS.md §16, 44x44 targets).
   The stacked column order preserves DOM order — File Report, Save as draft,
   Back to Pending — so visual priority matches document order with no extra logic,
   and the "Enter picks the first submit" guarantee is unaffected. */
@media (max-width: 640px) {
    .smp-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .smp-form-actions .smp-button {
        min-height: 44px;
        width: 100%;
        text-align: center;
    }
}

/* De-emphasized destructive action (issue #171, Discard draft). Deliberately a text
   button and never a filled --danger button: it is rare and irreversible, and must not
   compete visually with the constructive submits. Self-contained rather than composed
   from .smp-button--danger plus a text utility, which would fight the filled background
   at equal specificity. */
.smp-button--danger-text {
    background: none;
    border: none;
    padding: 6px 4px;
    color: #d63638;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

.smp-button--danger-text:hover {
    color: #b32d2e;
    text-decoration: underline;
}

.smp-button--danger-text:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.smp-back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    color: #2271b1;
    text-decoration: none;
}

.smp-back-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   ERROR SUMMARY
   ========================================================================== */

.smp-error-summary {
    padding: 12px 16px;
    border-left: 4px solid #d63638;
    background: #fcf0f1;
    color: #50001a;
    margin-bottom: 16px;
    border-radius: 0 3px 3px 0;
}

.smp-error-summary p {
    margin: 0 0 4px;
    font-weight: 600;
}

.smp-error-summary ul {
    margin: 4px 0 0;
    padding-left: 1.25em;
}

.smp-error-summary li {
    margin: 2px 0;
}

/* ==========================================================================
   FINANCIALS CALLOUT (Take-Home summary card)
   ========================================================================== */

.smp-financials-callout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
    padding: 16px;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

.smp-financials-callout__item {
    min-width: 130px;
}

.smp-financials-callout__label {
    display: block;
    font-size: 0.85em;
    color: #50575e;
    margin-bottom: 4px;
}

.smp-financials-callout__value {
    display: block;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
}

.smp-financials-callout__value--take-home {
    font-weight: 700;
    font-size: 1.25em;
}

/* ==========================================================================
   FINANCIALS TABLES
   ========================================================================== */

.smp-financials-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.smp-financials-table th,
.smp-financials-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #c3c4c7;
}

.smp-financials-table thead th {
    background: #f6f7f7;
    font-weight: 600;
    border-bottom: 2px solid #c3c4c7;
}

.smp-financials-table th:not(:first-child),
.smp-financials-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.smp-financials-grand-total td,
.smp-financials-grand-total th {
    font-weight: 700;
    border-top: 2px solid currentColor;
}

.smp-financials-loss {
    color: #d63638;
}

/* Financials-pending row (issue #215; manager/financials-drilldown.twig
   "Individual Reports" table). :not(:first-child) mirrors this table's own
   existing numeric-column rule above so the Occurrence Date + badge cell is
   never muted — only the six blank/dash figure cells are. Design consult
   2026-07-19 (ux-design-advisor + ui-design-consultant): muted dash only, no
   row background tint (a tint would be a redundant third "different" signal
   on top of the badge, and every existing tint convention in this file
   signals a problem — this is a normal, expected, non-error state). */
.smp-financials-pending-row td:not(:first-child) {
    color: var(--smp-muted, #6b7280);
}

.smp-financials-pending-row td:first-child .smp-badge--pending {
    margin-left: 6px;
}

.smp-financials-pending-dash {
    font-weight: 600; /* keeps the glyph from reading as a stray hyphen */
}

.smp-financials-empty {
    color: #50575e;
    font-style: italic;
}

.smp-financials-note {
    font-size: 0.85em;
    color: #50575e;
    margin: 8px 0 0;
}

/* Section spacing */
.smp-financials-summary {
    margin-top: 1.5rem;
}

.smp-financials-by-event,
.smp-financials-by-period {
    margin-top: 2rem;
}

.smp-financials-breadcrumb {
    font-size: 0.9em;
    color: #50575e;
    margin-bottom: 1rem;
}

.smp-financials-range {
    font-size: 0.9em;
    color: #50575e;
}

/* ==========================================================================
   INVENTORY
   ========================================================================== */

/* Signed quantity deltas */
.smp-delta--positive {
    color: #1a6030;
    font-weight: 600;
}

.smp-delta--negative {
    color: #721c24;
    font-weight: 600;
}

/* Inventory section separator (ledger below counts) */
.smp-inventory-summary {
    font-size: 13px;
    color: #50575e;
    margin-bottom: 16px;
}

/* ==========================================================================
   INVENTORY CARDS — .smp-inventory-grid / .smp-inventory-card
   ========================================================================== */
.smp-inventory-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}
.smp-inventory-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.smp-inventory-card--inactive { opacity: 0.65; }
.smp-inventory-card__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
}
.smp-inventory-card__thumb--placeholder {
    display: block;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
}
.smp-inventory-card__body { flex: 1 1 0; min-width: 0; }
.smp-inventory-card__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
}
.smp-inventory-card__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
}
.smp-inventory-card__qty {
    flex-shrink: 0;
    text-align: right;
    min-width: 56px;
}
.smp-inventory-card__count {
    display: block;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--smp-primary, #1b2d45);
}
.smp-inventory-card__label {
    display: block;
    font-size: 11px;
    color: var(--smp-muted, #6b7280);
}
.smp-inventory-card__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.smp-inventory-card__favourite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--smp-muted, #6b7280);
    cursor: pointer;
    opacity: 1;
    transition: color 0.15s, background 0.15s;
}

.smp-inventory-card__favourite:hover,
.smp-inventory-card__favourite:focus-visible {
    color: var(--smp-warning, #f59e0b);
    background: var(--smp-warning-soft, #fef3c7);
    outline: none;
}

.smp-inventory-card__favourite--active {
    color: var(--smp-warning, #f59e0b);
}

/* Star button used in flag rows (orders / report forms). */
.smp-star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--smp-muted, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.smp-star-btn:hover,
.smp-star-btn:focus-visible {
    color: var(--smp-warning, #f59e0b);
    background: var(--smp-warning-soft, #fef3c7);
    outline: none;
}

.smp-star-btn--active {
    color: var(--smp-warning, #f59e0b);
}

/* "Favourites on top" toggle button.
   ::before carries the star glyph so CSS can swap it without JS. */
.smp-fav-on-top-btn::before {
    content: '\2606\00a0'; /* ☆ + non-breaking space */
}

.smp-fav-on-top-btn[aria-pressed="true"]::before {
    content: '\2605\00a0'; /* ★ + non-breaking space */
}

.smp-fav-on-top-btn[aria-pressed="true"] {
    background: var(--smp-warning, #f59e0b);
    color: #1f2937;
    border-color: var(--smp-warning, #f59e0b);
    font-weight: 600;
}

/* ==========================================================================
   ORDERS LIST / DETAIL
   ========================================================================== */

.smp-orders-list__toolbar {
    margin-bottom: 12px;
}

.smp-orders-list__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
    padding: 12px;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
}

.smp-orders-list__filters label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}

/* Replace margin-right with flex gap on row actions */
.smp-orders-list__row-actions {
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    min-width: 120px;
}

/* Remove the now-redundant per-button margin */
.smp-orders-list__row-actions .smp-button,
.smp-orders-list__row-actions a {
    margin-right: 0;
}

.smp-action-form {
    display: inline;
}

.smp-action-form--inline {
    display: inline-block;
}

/* ==========================================================================
   READONLY VALUES (admin events form)
   ========================================================================== */

.smp-readonly-value {
    display: inline-block;
    padding: 4px 0;
    color: #50575e;
    font-style: italic;
}

.smp-no-action {
    color: #646970;
}

/* ==========================================================================
   REPORT APPROVAL LOCK — issue #170, Chunk 2 (reqReportApprovalUI)
   Minimal structural spacing only, reusing existing color/spacing tokens;
   final visual polish is a later Claude Design pass (per the plan's own
   deferral note — see planReportApprovalLock's "Out of scope").
   ========================================================================== */

.smp-financials-status {
    margin-bottom: var(--smp-space-3, 12px);
}

.smp-financials-status__note {
    font-size: 13px;
    color: #50575e;
    margin: 4px 0 0;
}

.smp-financials-correction {
    margin-top: var(--smp-space-3, 12px);
}

.smp-financials-correction__awaiting {
    font-size: 13px;
    color: #50575e;
    font-style: italic;
    margin: 0;
}

.smp-report-notices {
    margin-bottom: var(--smp-space-5, 24px);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.smp-empty-state {
    padding: 24px;
    text-align: center;
    color: #646970;
    font-style: italic;
    border: 1px dashed #c3c4c7;
    border-radius: 3px;
    margin: 12px 0;
}

/* ==========================================================================
   DIV-BASED MODAL OVERLAY — .smp-modal + .smp-modal__inner
   Used by admin screens (events.twig reassign/delete). JS hides via
   inline style="display:none"; JS shows by removing that inline style.
   The CSS display:flex then takes effect as the layout value.
   ========================================================================== */

.smp-modal {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above WP admin toolbar */
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.smp-modal__inner {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    padding: 0 22px 22px; /* no top — h2 bleeds full-width via negative margin */
}

.smp-modal__inner > h2 {
    margin: 0 -22px 18px;
    padding: 18px 22px;
    font-size: 1em;
    font-weight: 600;
    color: #1d2327;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.smp-modal__inner > * + * {
    margin-top: 10px;
}

/* ==========================================================================
   DIALOG / MODAL
   ========================================================================== */

dialog.smp-dialog,
dialog[id^="smp-"] {
    padding: 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    min-width: min(340px, 90vw);
    max-width: 480px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

dialog.smp-dialog::backdrop,
dialog[id^="smp-"]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog[id^="smp-"] h2 {
    margin: 0;
    padding: 16px 20px;
    font-size: 1em;
    border-bottom: 1px solid #c3c4c7;
}

dialog[id^="smp-"] p {
    padding: 16px 20px 8px;
    margin: 0;
}

.smp-dialog-actions,
.smp-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 16px;
}

.smp-dialog-warning {
    color: #b91c1c;
    font-weight: 600;
    margin: 0;
    padding: 8px 20px;
}

.smp-dialog-context {
    padding: 0 20px 12px;
    font-style: italic;
    color: #50575e;
    margin: 0;
}

/* Insurance against this codebase's known [hidden]-vs-display footgun (see
   feedback_css_hidden_specificity) — not a live bug here (no competing
   unconditional `display` rule matches this element), kept as a habit. */
#smp-cancel-modal-draft-warning[hidden] { display: none; }

/* ==========================================================================
   OVERDUE INDICATORS (pending reports table)
   Note: numeric value is the primary signal; color reinforces (WCAG SC 1.4.1).
   Applies to 'unreported' rows only — a receipt-pending row carries no
   .smp-overdue* class at all (see WAITING PILL below and
   specReportSubmission → reqReceiptPendingStatus).
   ========================================================================== */

.smp-overdue--critical {
    color: #b91c1c;
    font-weight: 700;
}

.smp-overdue--warning {
    color: #b45309;
    font-weight: 600;
}

/* ==========================================================================
   WAITING PILL (merged Pending worklist — unreported + receipt-pending rows)
   Renamed from .smp-overdue-pill: the column header now reads the neutral
   "Waiting" for both item types (specReportSubmission → reqReceiptPendingStatus;
   specManagerDashboard → reqReceiptPendingUI), so the pill's own self-describing
   text + tone ("6 days overdue" / "3 days awaiting receipt") is the primary
   per-row differentiator. Background/border-radius/padding and the unit text
   are unconditional across breakpoints — previously mobile-only, which would
   have left desktop with no differentiator at all once the header went
   generic (WCAG-relevant fix found during the design consult).
   ========================================================================== */

.smp-waiting-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.smp-waiting-pill__unit { display: inline; }

.smp-waiting-pill--warning  { background: #fef3c7; color: #b45309; }
.smp-waiting-pill--critical { background: #fee2e2; color: #b91c1c; }
/* Non-escalating, informational tone for a receipt-pending row — reuses the
   same blue pairing as .smp-cal-chip--upcoming (not green="done", not gray). */
.smp-waiting-pill--neutral  { background: #dbeafe; color: #1d4ed8; }

/* ==========================================================================
   DRAFT ANNOTATION (Pending worklist Event cell — #171 Chunk 3)
   A draft never adds a row/column; it annotates an 'unreported' row's Event
   cell with the existing .smp-badge--draft pill plus this "last saved"
   subline. Deliberately reuses .smp-badge--draft (already neutral gray,
   already AA) rather than a one-off — see planReportDrafts.md Chunk 3.
   ========================================================================== */

.smp-event-cell .smp-badge--draft { margin-left: 6px; }

.smp-draft-meta {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--smp-muted, #6b7280);
    margin-top: 2px;
}

/* ==========================================================================
   RESPONSIVE TABLE -> CARDS (.smp-table--cards)
   Used by the Pending Reports list so rows stack into readable cards on phones
   instead of horizontally scrolling and clipping the action buttons. Echoes the
   card pattern already used by the report filing form (.smp-flag-row).
   ========================================================================== */

@media (max-width: 640px) {
    /* Don't let the scroll wrapper clip the cards. */
    .smp-table-scroll:has(.smp-table--cards) { overflow-x: visible; }

    /* Each row becomes a self-contained card. */
    .smp-table--cards,
    .smp-table--cards tbody,
    .smp-table--cards tr,
    .smp-table--cards td {
        display: block;
        width: 100%;
    }

    .smp-table--cards thead { display: none; }

    .smp-table--cards tr {
        border: 1px solid var(--smp-border, #e5e7eb);
        border-radius: 10px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    /* High specificity to beat .smp-manager-portal .smp-table td (padding + border). */
    .smp-manager-portal .smp-table.smp-table--cards td {
        border: none;
        padding: 0;
    }

    /* Event name = card title. */
    .smp-table--cards td:first-child {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 6px;
    }

    /* Date + waiting pill share one meta line. */
    .smp-table--cards td:nth-child(2) {
        display: inline-block;
        color: var(--smp-muted, #6b7280);
        font-size: 13px;
        margin-right: 8px;
    }
    .smp-table--cards td:nth-child(3) { display: inline-block; }

    /* Urgency stripe moves from the first cell to the whole card. Unreported
       rows only (a receipt-pending row never carries a .smp-overdue* class,
       so it never matches either :has() selector below — the omission itself
       signals "not urgent"). Extra .smp-table class raises specificity above
       the desktop first-cell stripe rule (which is later in the file), so the
       stray header bar is removed. */
    .smp-manager-portal .smp-table.smp-table--cards tbody tr:has(.smp-overdue--warning)  > td:first-child,
    .smp-manager-portal .smp-table.smp-table--cards tbody tr:has(.smp-overdue--critical) > td:first-child {
        box-shadow: none;
    }
    .smp-table--cards tr:has(.smp-overdue--warning)  { box-shadow: inset 4px 0 0 #dba617; }
    .smp-table--cards tr:has(.smp-overdue--critical) { box-shadow: inset 4px 0 0 #d63638; }

    /* Actions: primary action (File Report / Add Receipt) dominant, both full 44px touch targets. */
    .smp-table--cards td.smp-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }
    .smp-table--cards td.smp-actions .smp-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .smp-table--cards td.smp-actions .smp-button--primary { flex: 1; }
}

/* ==========================================================================
   MONTH-GRID CALENDAR (reports-calendar)
   History: the old plain-<table> day grid (.smp-cal/.smp-cal-cell*) and the
   Pending list's plain-<table> responsive-cards treatment (.smp-overdue-*,
   .smp-table--cards) were removed here, meant to be replaced by the Social
   Melting Pot redesign's div/button grid (.smp-cal-day*) and card-row list
   (.smp-report-row*). That replacement markup never shipped — the redesign
   landed as the mobile marked-days list (.smp-cal-list*) instead — so those
   replacement rules sat unmatchable and were deleted in turn.
   What is left here is what reports-calendar.twig actually emits:
   .smp-cal-toolbar, .smp-cal-title, .smp-cal-legend, the .smp-cal-chip
   status colors, and the .smp-cal-list mobile day list.
   KNOWN GAP: seven classes that template emits have no rule anywhere in
   this file — the day grid itself (.smp-cal, .smp-cal-cell,
   .smp-cal-cell--muted, .smp-cal-cell--today, .smp-cal-cell__day), its
   wrapper (.smp-cal-scroll) and the month prev/next links (.smp-cal-nav,
   whose elements are still styled by the .smp-button--secondary they also
   carry — only the modifier is ruleless). List derived by diffing the
   template's smp-cal* classes against this file's non-comment selectors.
   The only bare-status interpolation, .smp-cal-chip--{{ ev.status }}, appears
   twice (desktop grid and mobile day list) and both times inside the
   {% else %} of an "is it reported or receipt_pending?" test, so it can only
   yield --pending, --upcoming or --cancelled; all three are styled below. The
   other two modifiers, --reported and --receipt-pending, come from a literal
   ternary in the sibling branch, and that is deliberate: the status string is
   receipt_pending with an UNDERSCORE, so interpolating it would ask for
   .smp-cal-chip--receipt_pending, which has no rule. Do not "simplify" that
   branch into the interpolation.
   ========================================================================== */

.smp-cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 16px;
}

.smp-cal-title {
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.smp-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* Event chips inside a day cell + the legend swatches */
.smp-cal-chip {
    display: block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.smp-cal-legend .smp-cal-chip {
    display: inline-block;
    margin-top: 0;
}

a.smp-cal-chip:hover { filter: brightness(0.96); }

.smp-cal-chip--reported  { background: #dcfce7; color: #166534; }
.smp-cal-chip--pending   { background: #fef3c7; color: #b45309; }
.smp-cal-chip--upcoming  { background: #dbeafe; color: #1d4ed8; }
.smp-cal-chip--cancelled { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }

/* 5th status — a filed Report still awaiting its receipt (specReportSubmission
   → reqReceiptPendingStatus; specManagerDashboard → reqReceiptPendingUI).
   Structural marker per WCAG 1.4.1: near-white fill + a colored border, unlike
   the other four chips' solid pastel fill with no border — filled-vs-outlined
   is the non-color signal, not just a different hue.
   PLACEHOLDER — final color/marker pending Claude Design pass, OQ8 point 5. */
.smp-cal-chip--receipt-pending {
    background: #f5f3ff;
    color: #6d28d9;
    border: 2px solid #7c3aed;
    padding: 0 4px; /* compensates the added border vs. the other chips' borderless 2px 6px */
}

/* Marked-days list — mobile alternative to the grid (hidden on desktop). */
.smp-cal-list { display: none; }

@media (max-width: 640px) {
    .smp-cal-title { font-size: 16px; }

    /* Swap the cramped grid for the readable marked-days list.
       (.smp-cal-layout, the desktop grid this used to have to hide, no
       longer exists — its markup never shipped and its rules were deleted.
       The source-order hazard that note described is gone with it.) */

    .smp-cal-list {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .smp-cal-list__week-heading {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--smp-muted, #6b7280);
        padding: 14px 0 6px;
        border-bottom: 1px solid var(--smp-border, #e5e7eb);
        margin-bottom: 2px;
    }

    .smp-cal-list__day {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .smp-cal-list__date {
        flex-shrink: 0;
        width: 40px;
        text-align: center;
    }
    .smp-cal-list__day-num {
        display: block;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        color: var(--smp-primary, #1b2d45);
    }
    .smp-cal-list__day--today .smp-cal-list__day-num { color: #b45309; }
    .smp-cal-list__weekday {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--smp-muted, #6b7280);
        margin-top: 2px;
    }

    .smp-cal-list__events {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 2px;
    }

    /* Full event names in the list — override the grid chip's truncation. */
    .smp-cal-list .smp-cal-chip {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        border-radius: var(--smp-radius-sm, 6px);
    }
}

/* ==========================================================================
   REPORT DETAIL VIEW (report-detail) — two cards + edit history
   ========================================================================== */

.smp-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.smp-report-title {
    margin: 8px 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.smp-report-title__date {
    font-weight: 400;
    font-size: 0.7em;
    color: var(--smp-muted, #6b7280);
    white-space: nowrap;
}
.smp-report-meta {
    margin: 0;
    font-size: 13px;
    color: #50575e;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}
.smp-report-meta__label { color: var(--smp-muted, #6b7280); }
.smp-report-meta__sep { color: #c0c4cc; }
.smp-report-header__actions { flex-shrink: 0; }

.smp-report-detail-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 20px;
    align-items: start;
}

.smp-detail-card {
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: 10px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.smp-detail-card__heading {
    margin: 0 0 14px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #50575e;
    border-bottom: 1px solid var(--smp-border, #e5e7eb);
}

/* Financials: label/value rows, signed amounts, zoned dividers */
.smp-fin { width: 100%; border-collapse: collapse; }
.smp-fin th[scope="row"] {
    text-align: left;
    font-weight: 400;
    padding: 6px 0;
}
.smp-fin__val {
    text-align: right;
    padding: 6px 0 6px 16px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Net-split zone divider */
.smp-fin__zone th[scope="row"],
.smp-fin__zone .smp-fin__val {
    border-top: 2px solid var(--smp-border, #e5e7eb);
    padding-top: 10px;
}
/* Take-home result row */
.smp-fin__result th[scope="row"],
.smp-fin__result .smp-fin__val {
    border-top: 2px solid var(--smp-primary, #1b2d45);
    padding-top: 10px;
    font-weight: 700;
    font-size: 1.05em;
    background: var(--smp-bg-subtle, #f8fafc);
}

/* Flag entries total row */
.smp-flag-entries__total th[scope="row"] {
    text-align: left;
    font-weight: 700;
}
.smp-flag-entries__total th[scope="row"],
.smp-flag-entries__total td {
    border-top: 2px solid var(--smp-border, #e5e7eb);
    font-weight: 700;
    background: var(--smp-bg-subtle, #f8fafc);
}

/* Field label text (used for non-<label> field headings e.g. weather picker) */
.smp-field-label-text {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}
.smp-field-optional {
    font-weight: 400;
    font-size: 12px;
    color: #50575e;
    margin-left: 4px;
}
.smp-field-required {
    color: #d63638;
    margin-left: 2px;
}

/* Attendance & Notes — two-row layout (reqOccurrenceDetails — issue #132) */
.smp-fieldset-row {
    display: grid;
    gap: var(--smp-space-4);
    margin-bottom: var(--smp-space-4);
}
.smp-fieldset-row:last-child { margin-bottom: 0; }

/* Top row: attendee count + new attendees (fixed narrow) + weather picker (fills rest) */
.smp-fieldset-row--attendance {
    grid-template-columns: 200px 200px 1fr;
    align-items: start;
}

/* Bottom row: two equal-width textareas */
.smp-fieldset-row--notes {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .smp-fieldset-row--attendance,
    .smp-fieldset-row--notes {
        grid-template-columns: 1fr;
    }
}

/* Weather color-coded buttons (form) */
.smp-weather-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.smp-weather-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.15s, filter 0.15s, border-color 0.15s;
}
.smp-weather-btn[aria-pressed="true"] {
    filter: brightness(0.88);
}
.smp-weather--bad[aria-pressed="true"]          { border-color: #991b1b; }
.smp-weather--slightly-bad[aria-pressed="true"] { border-color: #9a3412; }
.smp-weather--normal[aria-pressed="true"]       { border-color: #475569; }
.smp-weather--good[aria-pressed="true"]         { border-color: #065f46; }
.smp-weather--very-good[aria-pressed="true"]    { border-color: #14532d; }
/* Dim unselected buttons when a selection is active */
.smp-weather-picker--has-selection .smp-weather-btn:not([aria-pressed="true"]) {
    opacity: 0.55;
}

/* Textarea placeholders — italic to distinguish from content */
.smp-textarea::placeholder { font-style: italic; color: #9ca3af; }

/* Occurrence Details card (reqOccurrenceDetails — issue #132) */
.smp-occurrence-details {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    align-items: baseline;
}
.smp-occurrence-details dt {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #50575e;
    white-space: nowrap;
}
.smp-occurrence-details dd { margin: 0; }
.smp-occurrence-details__note { white-space: pre-wrap; }

/* Weather badge (detail view) */
.smp-weather-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
/* Color scale: bad→red, slightly-bad→orange, normal→gray, good→light-green, very-good→green */
.smp-weather--bad          { background: #fee2e2; color: #991b1b; }
.smp-weather--slightly-bad { background: #ffedd5; color: #9a3412; }
.smp-weather--normal       { background: #f1f5f9; color: #475569; }
.smp-weather--good         { background: #d1fae5; color: #065f46; }
.smp-weather--very-good    { background: #bbf7d0; color: #14532d; }

/* Edit history disclosure */
.smp-report-history { margin-top: 20px; }
.smp-report-history summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--smp-primary, #1b2d45);
    list-style: none;
    padding: 8px 0;
}
.smp-report-history summary::-webkit-details-marker { display: none; }
.smp-report-history summary::before {
    content: "\203A";  /* › */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}
.smp-report-history details[open] summary::before { transform: rotate(90deg); }

@media (max-width: 640px) {
    .smp-report-header { flex-direction: column; }
    .smp-report-header__actions { width: 100%; }
    /* min-height was missing: these buttons inherited .smp-button's ~33.5px, under the
       44px rule (AGENTS.md §16). Pre-existing gap on report-detail's Edit button;
       fixing it here also covers issue #171's Discard-draft trigger, which shares the
       slot. */
    .smp-report-header__actions .smp-button { display: block; width: 100%; text-align: center; min-height: 44px; }
    .smp-report-detail-grid { grid-template-columns: 1fr; }
    .smp-flag-entries { font-size: 13px; }
    .smp-flag-entries th,
    .smp-flag-entries td { padding: 6px 8px; }
}

/* ==========================================================================
   ORDER FORM — flag selection list (searchable rows + steppers)
   Scoped to .smp-orders-form so the report-form flag rows are unaffected.
   ========================================================================== */

/* Sticky summary: quantities per Type, live goods + shipping estimate. */
.smp-order-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    margin: 12px 0;
    padding: 10px 16px;
    background: var(--smp-bg-subtle, #f8fafc);
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.smp-order-bar__sep { color: #c0c4cc; margin: 0 4px; }
.smp-order-bar.has-error {
    background: #fef2f2;
    border-color: #d63638;
    color: #b91c1c;
}

/* Order rows: denser than report-form rows; single line on desktop. */
.smp-orders-form .smp-flag-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
}
.smp-orders-form .smp-flag-row__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
.smp-orders-form .smp-flag-row__name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-orders-form .smp-flag-row__body {
    display: block;
    margin: 0;
    flex: 0 0 auto;
}

/* Recommended-vs-ordered reference line (issue #137) — quiet reference text,
   deliberately distinct from the live .smp-flag-row__hint alert below it
   (reqLowStockOrderHint anti-conflation requirement: never let the two read
   as the same figure). */
.smp-orders-form .smp-flag-row__recommended {
    font-size: 13px;
    color: var(--smp-muted, #6b7280);
    margin-bottom: var(--smp-space-2, 8px);
}

/* Low-stock order hint (reqLowStockOrderHint, issue #153) — a live, unprompted
   advisory computed at render time, badge-led so it reads as an alert rather
   than the quiet "Recommended:" reference line above it. Compact by design:
   up to ~600 rows can render at once (ux-design-advisor + ui-design-consultant
   review, 2026-07-11). */
.smp-flag-row__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--smp-space-2, 8px);
    font-size: 13px;
}
.smp-flag-row__hint-text {
    color: var(--smp-text, #111827);
}
/* Ghost/text-link styling — a small trailing action, not a peer of the much
   larger (52px) stepper buttons it sits beside. 44px min-height keeps a real
   touch target without visually competing with the stepper. */
.smp-flag-row__hint-use {
    background: none;
    border: none;
    padding: 6px 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--smp-primary, #1b2d45);
    text-decoration: underline;
    cursor: pointer;
}
.smp-flag-row__hint-use:hover { opacity: 0.8; }
.smp-flag-row__hint-use:focus-visible {
    outline: 2px solid var(--smp-accent, #d4a017);
    outline-offset: 2px;
}

/* Selected (qty >= 1): navy border + faint tint + checkmark (not colour-only). */
.smp-orders-form .smp-flag-row--selected {
    border-color: var(--smp-primary, #1b2d45);
    background: rgba(27, 45, 69, 0.035);
}
.smp-flag-row__check {
    display: none;
    color: var(--smp-primary, #1b2d45);
    font-weight: 700;
}
.smp-orders-form .smp-flag-row--selected .smp-flag-row__check { display: inline; }

/* Category pill + per-line subtotal in the header. */
.smp-flag-row__category {
    font-size: 11px;
    text-transform: capitalize;
    color: var(--smp-muted, #6b7280);
    background: var(--smp-bg-subtle, #f8fafc);
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}
/* Inactive flags: orderable but de-emphasized. */
.smp-orders-form .smp-flag-row--inactive { opacity: 0.6; }
.smp-badge--inactive {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 4px;
    padding: 1px 6px;
}

@media (max-width: 640px) {
    /* Stack header over the stepper on phones. */
    .smp-orders-form .smp-flag-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .smp-orders-form .smp-flag-row__body { width: 100%; }

    /* Thumbnail (issue #135 item 4) — explicit sizing for this denser,
       column-stacked row; do not rely on the unscoped report-form rule.
       That rule also sets order:2 on .smp-flag-row__image and order:1 on
       .smp-flag-row__header (report-form uses flex-wrap + order to
       resequence a single-row layout into name-row/image-row/stepper-row) —
       those order values leak in here via the bare, unscoped selectors and
       would render this column-stacked row as stepper -> name -> image.
       Reset order explicitly so it follows DOM order (image, header, body). */
    .smp-orders-form .smp-flag-row__image,
    .smp-orders-form .smp-flag-row__image--placeholder {
        order: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 110px;
    }
    .smp-orders-form .smp-flag-row__header { order: 1; }
    .smp-orders-form .smp-flag-row__body   { order: 2; }
}

/* ==========================================================================
   ORDER DETAIL VIEW (orders-list.twig, view=detail) — stepper, summary, items
   ========================================================================== */

.smp-order-head { margin-bottom: 20px; }
.smp-order-head__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.2; }

/* ---- Progress stepper (pure CSS, no JS) ---- */
.smp-order-stepper {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.smp-stepper__node {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}
/* connector from this node's centre leftward to the previous node */
.smp-stepper__node::before {
    content: "";
    position: absolute;
    top: 11px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #c3c4c7;
}
.smp-stepper__node:first-child::before { display: none; }
.smp-stepper__node--completed::before,
.smp-stepper__node--current::before { background: #1a6030; }

.smp-stepper__dot {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #c3c4c7;
    background: #fff;
    color: #646970;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.smp-stepper__node--completed .smp-stepper__dot {
    background: #1a6030; border-color: #1a6030; color: #fff;
}
.smp-stepper__node--current .smp-stepper__dot {
    background: #2271b1; border-color: #2271b1; color: #fff;
    box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.2 );
}
.smp-stepper__label {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
    color: #646970;
}
.smp-stepper__node--current .smp-stepper__label { color: #1d2327; font-weight: 600; }

/* ---- Summary bar ---- */
.smp-order-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 0 20px;
    background: #f0f6fc;
    border: 1px solid #cce5ff;
    border-radius: 10px;
    font-size: 13px;
}
.smp-order-summary-bar__detail { color: #50575e; }
.smp-order-summary-bar__sep { color: #c0c4cc; margin: 0 4px; }
.smp-order-summary-bar__breakdown {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #50575e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.smp-order-summary-bar__breakdown-item strong { color: #1d2327; font-weight: 600; }
.smp-order-summary-bar__total {
    font-size: 1.25em;
    font-weight: 700;
    color: #1d2327;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.smp-order-summary-bar__est {
    font-size: 0.62em;
    font-weight: 400;
    color: #50575e;
    margin-right: 4px;
}

/* ---- Desktop action strip ---- */
.smp-order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }

/* ---- Items ---- */
.smp-order-items__heading { margin: 0 0 12px; }
.smp-order-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: 10px;
}
.smp-order-item__thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}
.smp-order-item__thumb--placeholder { background: #f6f7f7; border: 1px solid #c3c4c7; }
.smp-order-item__body { flex: 1 1 0; min-width: 0; }
.smp-order-item__name { display: block; font-size: 15px; font-weight: 600; color: #1d2327; }
.smp-order-item__body .smp-flag-row__category { margin-top: 4px; }
.smp-order-item__qty { flex-shrink: 0; text-align: right; }
.smp-order-item__units { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1d2327; }
.smp-order-item__unitlabel { display: block; font-size: 11px; color: #646970; }
.smp-order-item__variance { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #b45309; }
.smp-order-item__variance--admin { color: #b32d2e; }

/* ---- Terminal banner (rejected / cancelled) ---- */
.smp-order-terminal { padding: 16px 20px; border-radius: 10px; margin-bottom: 20px; }
.smp-order-terminal--rejected { background: #f8d7da; border: 1px solid #f1aeb5; color: #721c24; }
.smp-order-terminal--cancelled { background: #e2e3e5; border: 1px solid #c6c8ca; color: #383d41; }
.smp-order-terminal__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.smp-order-terminal__status { margin: 0; font-size: 14px; font-weight: 700; }
.smp-order-terminal__reason { margin: 6px 0 0; font-size: 13px; font-weight: 400; }

/* ---- Low-priority metadata footer ---- */
.smp-order-meta-footer { margin-top: 24px; font-size: 13px; color: #50575e; }
.smp-order-meta-footer dt { display: inline; font-weight: 600; }
.smp-order-meta-footer dd { display: inline; margin: 0 0 0 4px; }

/* ---- Sticky mobile action bar (hidden on desktop) ---- */
.smp-order-actions-sticky { display: none; }

@media (max-width: 640px) {
    /* Stepper: show only the current node's label */
    .smp-order-stepper .smp-stepper__label { display: none; }
    .smp-order-stepper .smp-stepper__node--current .smp-stepper__label { display: block; }

    .smp-order-summary-bar { flex-direction: column; align-items: flex-start; }

    .smp-order-item__thumb { width: 40px; height: 40px; }

    /* Desktop strip hidden; sticky bar shown */
    .smp-order-actions { display: none; }
    .smp-order-actions-sticky {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 50;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
        background: #fff;
        border-top: 1px solid var(--smp-border, #e5e7eb);
        box-shadow: 0 -2px 8px rgba( 0, 0, 0, 0.08 );
    }
    .smp-order-actions-sticky .smp-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .smp-order-actions-sticky .smp-button--primary { flex: 1; }
    .smp-orders-detail--has-sticky { padding-bottom: 80px; }
}

/* ==========================================================================
   Note: the old collapsible-month-bucket rules (.smp-bucket*) that used to
   live here were removed — reports-upcoming.twig now uses .smp-schedule-
   group* (SOCIAL MELTING POT REPORTS HOME section below), confirmed unused
   elsewhere via grep before deleting. .smp-loading below is still used (the
   AJAX loading state in smp-reports-upcoming.js) — kept. .smp-section-desc
   was listed here as still used too, but nothing in src/, assets/js/ or
   assets/dist/ emits it any more, so its rule has been deleted as well. Both
   it and the .smp-bucket family are prescribed by specUIPolish reqMissingCSS;
   see that spec's "Corrections to the record".
   ========================================================================== */

.smp-loading {
    font-style: italic;
    color: #50575e;
    padding: 12px 0;
}

/* ==========================================================================
   REPORT FORM — flag row (reqItemRow)
   ========================================================================== */

#smp-flag-list {
    display: flex;
    flex-direction: column;
}

/* Compact horizontal row — matches stakeholder mock (reqItemRow) */
.smp-flag-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}
.smp-flag-row:first-child { border-top: 1px solid #e5e7eb; }

/* Flag thumbnail — medium size matching stakeholder mock */
.smp-flag-row__image {
    width: 90px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.smp-flag-row__image--placeholder {
    width: 90px;
    height: 60px;
    background: #f3f4f6;
    border-radius: 6px;
}

/* Header: name + star + stock — fills the available space */
.smp-flag-row__header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.smp-flag-row__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--smp-text, #1e1e2d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smp-flag-row__stock {
    font-size: 13px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Stepper wrap — right-aligned on desktop, centered full-width on mobile */
.smp-flag-row__stepper-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* A-Z index, alpha section headers, and letter bubble are mobile-only;
   injected by JS but stay hidden until ≤640px. */
#smp-flag-alpha-index,
.smp-alpha-header,
#smp-alpha-bubble {
    display: none;
}

/* ==========================================================================
   REPORT FORM — quantity stepper (reqQuantityStepper)
   ========================================================================== */

.smp-stepper {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.smp-stepper__btn {
    width: 52px;
    height: 52px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.12s;
    color: #374151;
}

.smp-stepper__btn:hover { background: #eef0f3; }
.smp-stepper__btn:active { background: #e4e7eb; }

.smp-stepper__btn--dec {
    border-radius: 8px 0 0 8px;
    border-right: none;
}

.smp-stepper__btn--inc {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.smp-stepper__btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.smp-stepper__input {
    width: 62px;
    height: 52px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    padding: 0;
    -moz-appearance: textfield;
}

.smp-stepper__input::-webkit-inner-spin-button,
.smp-stepper__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Small stepper variant for compact flag rows */
.smp-stepper--sm .smp-stepper__btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
}
.smp-stepper--sm .smp-stepper__input {
    width: 48px;
    height: 36px;
    font-size: 16px;
}

/* ==========================================================================
   REPORT FORM — flag search bar + number inputs
   ========================================================================== */

.smp-flag-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.smp-flag-search-bar input {
    flex: 1;
    min-width: 0; /* allows shrinking below natural width on narrow screens */
    padding: 10px 12px;
    font-size: 16px; /* prevents iOS zoom-in on focus */
    border: 1px solid #8c8f94;
    border-radius: 3px;
}

/* ==========================================================================
   REPORT FORM — running summary
   ========================================================================== */

.smp-flag-summary {
    font-size: 13px;
    color: #50575e;
    margin-top: 8px;
    padding: 6px 0;
    border-top: 1px solid #c3c4c7;
}

/* ==========================================================================
   MANAGER DASHBOARD — cards grid
   ========================================================================== */

.smp-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--smp-space-4);
    margin-top: var(--smp-space-4);
}

.smp-dashboard-card {
    padding: var(--smp-space-4);
    border: 1px solid #c3c4c7;
    border-top: 3px solid #c3c4c7; /* overrides the shorthand's top width */
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.smp-dashboard-card--urgent {
    border-color: #d63638;
    border-top-color: #d63638;
    background: #fcf0f1;
}

.smp-dashboard-card--warning {
    border-color: #dba617;
    border-top-color: #dba617;
    background: #fcf9e8;
}

.smp-dashboard-card__count {
    font-size: 3.25em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 8px;
    color: #1d2327;
}

.smp-dashboard-card--urgent .smp-dashboard-card__count {
    color: #d63638;
}

.smp-dashboard-card__label {
    font-size: 13px;
    color: #50575e;
    margin: 0 0 12px;
}

.smp-dashboard-card__ok {
    font-size: 13px;
    color: #1a6030;
    font-weight: 600;
    margin: 0;
}

/* ==========================================================================
   PORTAL NAV BAR — persistent top navigation
   Dark strip that bleeds to portal edges; amber underline for active state.
   The negative-margin bleed relies on --smp-portal-pad staying in sync with
   .smp-manager-portal's padding value.
   ========================================================================== */

.smp-portal-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    background: var(--smp-nav-bg, #1b2d45);
    border-radius: 2px 2px 0 0;
    border-bottom: none;
    margin: calc(-1 * var(--smp-portal-pad))
            calc(-1 * var(--smp-portal-pad))
            var(--smp-portal-pad);
    padding: 0 var(--smp-portal-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.smp-portal-nav::-webkit-scrollbar {
    display: none;
}

.smp-portal-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px 11px; /* 3px bottom-border eaten by padding */
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: 0;
    white-space: nowrap;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
    min-height: 44px; /* touch target */
}

.smp-portal-nav__link:hover {
    color: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.smp-portal-nav__link--active {
    color: var(--smp-accent, #d4a017);
    font-weight: 600;
    border-bottom-color: var(--smp-accent, #d4a017);
}

.smp-portal-nav__link:focus-visible {
    outline: 2px solid var(--smp-accent, #d4a017);
    outline-offset: -3px;
    border-radius: 2px;
}

/* Pending badge re-themed for dark nav: amber fill, navy text */
.smp-portal-nav .smp-tab__badge {
    background: var(--smp-accent, #d4a017);
    color: var(--smp-nav-bg, #1b2d45);
    font-weight: 700;
}

/* ==========================================================================
   VISUALLY HIDDEN (screen reader only)
   ========================================================================== */

.screen-reader-text,
.smp-visually-hidden {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   RESPONSIVE — 640px (tablet/large phone landscape)
   ========================================================================== */

@media (max-width: 640px) {
    .smp-filter-row,
    .smp-financials-filter {
        flex-direction: column;
    }

    .smp-filter-row .smp-field,
    .smp-financials-filter .smp-field {
        width: 100%;
    }

    .smp-filter-row .smp-field input,
    .smp-filter-row .smp-field select,
    .smp-financials-filter input,
    .smp-financials-filter select {
        width: 100%;
    }

    .smp-tab {
        padding: 8px 10px;
        font-size: 13px;
    }

    .smp-financials-callout__item {
        min-width: calc(50% - 8px);
    }

    /* Wrap is a plain block — the wheel floats over content via position:fixed */
    .smp-flag-list-wrap {
        display: block;
    }

    /* Mobile card layout (matches stakeholder mock):
       Row 1 — [name + star + stock (flex:1)] [Damaged/Lost]
       Row 2 — large flag image, full width
       Row 3 — stepper, centered */
    .smp-flag-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Row 1: header fills left; damaged button stays right */
    .smp-flag-row__header {
        order: 1;
        flex: 1;
        min-width: 0;
    }

    .smp-damaged-btn {
        order: 1;
    }

    /* Row 2: flag image — full width, slightly smaller than the original 200px */
    .smp-flag-row__image {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 130px;
        flex-shrink: 1;
    }

    .smp-flag-row__image--placeholder {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
        height: 100px;
    }

    /* Row 3: stepper, centered — large touch targets for phone use */
    .smp-flag-row__stepper-wrap {
        order: 3;
        flex: 1 1 100%;
        display: flex;
        justify-content: center;
    }

    .smp-flag-row .smp-stepper__btn {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .smp-flag-row .smp-stepper__input {
        width: 72px;
        height: 56px;
        font-size: 20px;
    }

    /* Alpha section headers are visually absent (zero-height) but display:block
       so scrollIntoView() works — display:none has no layout position and is
       a no-op for scrolling. The global rule hides them; this overrides it. */
    .smp-alpha-header {
        display: block;
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        pointer-events: none;
    }

    /* Sidebar letter — active state while swiping (JS adds .is-active) */
    .smp-alpha-index__letter.is-active {
        color: #d4a017;
        font-weight: 700;
        font-size: 14px;
    }

    /* A-Z wheel — iOS Contacts style: fixed to the viewport right edge,
       vertically centred, overlays content without reserving horizontal space. */
    #smp-flag-alpha-index {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        background: rgba(27, 45, 69, 0.88);
        backdrop-filter: blur(4px);
        border-radius: 100px 0 0 100px;
        padding: 12px 4px 12px 6px;
        pointer-events: auto;
    }

    .smp-alpha-index__letter {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1;
        cursor: pointer;
        padding: 3px 0;
        width: 20px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .smp-alpha-index__letter:active {
        color: #d4a017;
        font-weight: 700;
    }

    /* Letter bubble — centred overlay visible while finger scrubs the strip */
    #smp-alpha-bubble {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(27, 45, 69, 0.9);
        color: #fff;
        font-size: 44px;
        font-weight: 700;
        line-height: 80px;
        text-align: center;
        z-index: 200;
        pointer-events: none;
    }

    #smp-alpha-bubble.is-visible { display: block; }
}

/* ==========================================================================
   RESPONSIVE — 480px (phone portrait)
   ========================================================================== */

@media (max-width: 480px) {
    .smp-manager-portal {
        --smp-portal-pad: 14px; /* drives nav bleed on mobile */
        padding: var(--smp-portal-pad);
    }

    .smp-financials-callout__item {
        min-width: 100%;
    }

    /* All buttons get full touch-target height on mobile */
    .smp-button {
        min-height: 44px;
        padding: 10px 16px;
    }

    .smp-button--sm {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Hide secondary table columns */
    .smp-col--hide-mobile {
        display: none;
    }

    /* Full-width form actions */
    .smp-form-actions {
        flex-direction: column;
    }

    .smp-form-actions .smp-button {
        width: 100%;
        text-align: center;
    }

    /* Portal nav: collapses to vertical list, stays dark */
    .smp-portal-nav {
        flex-direction: column;
        overflow-x: visible;
        border-radius: 2px 2px 0 0;
    }

    .smp-portal-nav__link {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 3px solid transparent;
        border-right: none;
        padding: 14px var(--smp-portal-pad);
        min-height: 48px; /* larger touch target in vertical mode */
    }

    .smp-portal-nav__link--active {
        border-left-color: var(--smp-accent, #d4a017);
        border-bottom-color: rgba(255, 255, 255, 0.08);
        color: var(--smp-accent, #d4a017);
    }
}

/* ==========================================================================
   MANAGER PORTAL — MODERN REDESIGN
   Scoped to .smp-manager-portal so admin screens are unaffected.
   Appended last so specificity naturally overrides base values.
   ========================================================================== */

/* ---- Additional design tokens + portal shell ---- */
.smp-manager-portal {
    --smp-radius:    8px;
    --smp-radius-sm: 6px;
    --smp-primary:   #1b2d45;   /* portal identity: matches nav strip */
    --smp-border:    #e5e7eb;
    --smp-text:      #111827;
    --smp-muted:     #6b7280;
    --smp-bg-subtle: #f8fafc;

    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--smp-text);
    border: 1px solid var(--smp-border);
    border-top: none; /* nav strip is the top accent — WP blue bar removed */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ---- Headings ---- */
.smp-manager-portal h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--smp-text, #111827);
    margin: 0 0 20px;
}

.smp-manager-portal h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--smp-text, #111827);
    margin: 0 0 12px;
}

/* ---- Back link ---- */
.smp-manager-portal .smp-back-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--smp-muted, #6b7280);
    margin-bottom: 16px;
}

.smp-manager-portal .smp-back-link a {
    color: inherit;
    text-decoration: none;
}

.smp-manager-portal .smp-back-link a:hover {
    color: var(--smp-text, #111827);
}

/* ---- Button system ---- */
.smp-manager-portal .smp-button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--smp-radius-sm, 6px);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Chunk 9/9 final fidelity pass: base rule had no gap between an icon
       and its label — .smp-button--cta/--outline-danger/--cta-outline/
       .smp-orders-form__submit .smp-button all separately declared their
       own `gap: 7px`, but plain --primary/--secondary/--danger buttons
       (e.g. "Place order manually" in orders-list.twig, whose label isn't
       even wrapped in a <span>) had icon and text glued together with zero
       space — found via a real 390px screenshot, not visible from reading
       the Twig. Matches the 7px value the other variants already use, so
       every button gets one consistent gap regardless of variant. */
    gap: 7px;
    line-height: 1.3;
    border-width: 1.5px;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, color 0.15s ease;
}

.smp-manager-portal .smp-button--primary {
    background: var(--smp-primary, #1b2d45);
    border-color: var(--smp-primary, #1b2d45);
    color: #fff;
}

.smp-manager-portal .smp-button--primary:hover {
    background: #253d5a;
    border-color: #253d5a;
    color: #fff;
}

.smp-manager-portal .smp-button--secondary {
    background: #fff;
    border-color: var(--smp-border, #e5e7eb);
    color: var(--smp-text, #111827);
}

.smp-manager-portal .smp-button--secondary:hover {
    background: var(--smp-bg-subtle, #f8fafc);
    border-color: #c1c8d0;
}

.smp-manager-portal .smp-button--danger {
    background: #fff;
    border-color: #fca5a5;
    color: #b91c1c;
}

.smp-manager-portal .smp-button--danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.smp-manager-portal .smp-button--sm {
    padding: 6px 14px;
    min-height: 34px;
    font-size: 13px;
}

.smp-manager-portal .smp-button:focus-visible {
    outline: 2px solid var(--smp-accent, #d4a017);
    outline-offset: 2px;
}

/* ---- Badge system: full pill, uppercase ---- */
.smp-manager-portal .smp-badge {
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Table system ---- */
.smp-manager-portal .smp-table th,
.smp-manager-portal .smp-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.smp-manager-portal .smp-table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--smp-muted, #6b7280);
    background: transparent;
    border-bottom: 2px solid var(--smp-border, #e5e7eb);
    padding-bottom: 10px;
}

/* Remove alternating-row shading — cleaner baseline */
.smp-manager-portal .smp-table tbody tr:nth-child(even) {
    background: transparent;
}

.smp-manager-portal .smp-table tbody tr:hover {
    background: var(--smp-bg-subtle, #f8fafc);
}

/* Urgency is spatial: left inset stripe via box-shadow on first cell.
   Unreported rows only — a receipt-pending row never carries a .smp-overdue*
   class, so it never matches here (no stripe at all; deliberate — see the
   WAITING PILL block above and specReportSubmission → reqReceiptPendingStatus). */
.smp-manager-portal .smp-table tbody tr:has(.smp-overdue--critical) {
    background: #fff8f8;
}

.smp-manager-portal .smp-table tbody tr:has(.smp-overdue--critical) > td:first-child {
    box-shadow: inset 3px 0 0 #d63638;
}

.smp-manager-portal .smp-table tbody tr:has(.smp-overdue--warning) > td:first-child {
    box-shadow: inset 3px 0 0 #dba617;
}

/* ---- Filter forms: remove the gray box ---- */
.smp-manager-portal .smp-filter-form,
.smp-manager-portal .smp-orders-list__filters {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 24px;
}

.smp-manager-portal .smp-financials-filter {
    margin-bottom: 24px;
}

/* ---- Form fields: 44px min-height, amber focus, 15px to prevent iOS zoom ---- */
.smp-manager-portal .smp-field input,
.smp-manager-portal .smp-field select,
.smp-manager-portal .smp-field textarea,
.smp-manager-portal .smp-financials-filter input,
.smp-manager-portal .smp-financials-filter select {
    min-height: 44px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--smp-radius-sm, 6px);
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: var(--smp-text, #111827);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.smp-manager-portal .smp-field input:focus,
.smp-manager-portal .smp-field select:focus,
.smp-manager-portal .smp-field textarea:focus,
.smp-manager-portal .smp-financials-filter input:focus,
.smp-manager-portal .smp-financials-filter select:focus {
    border-color: var(--smp-accent, #d4a017);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
}

.smp-manager-portal .smp-field label,
.smp-manager-portal .smp-financials-filter label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

/* Stack rhythm for fields that sit directly inside a fieldset (Financials:
   Bar Turnover, Expenses, the #205 receipt picker) — child combinator only,
   so it does NOT match .smp-field elements nested inside .smp-fieldset-row
   (Attendance & Notes' grid layout), which lay out horizontally and would
   misalign if a stray margin-top pushed one grid item down. .smp-fieldset
   is used only on manager/report-form.twig, so this is safely scoped. */
.smp-manager-portal .smp-fieldset > .smp-field + .smp-field {
    margin-top: var(--smp-space-4, 16px);
}

/* Receipt-at-filing picker (#205) advisory pre-check message — client-side
   only (assets/js/smp-report-form.js); reuses .smp-field-hint typography,
   just a warning-toned color (matches .smp-notice--warning's text color). */
.smp-manager-portal .smp-field-hint--warning {
    color: #6b4200;
}

/* Live bug, not habit, this time: .smp-field-hint sets `display: block`
   unconditionally (same specificity as the UA [hidden] rule, later in the
   cascade), so #smp-filing-receipt-notice's `hidden` attribute would
   silently do nothing without this override (feedback_css_hidden_specificity
   — see the #smp-cancel-modal-draft-warning precedent above). */
#smp-filing-receipt-notice[hidden] {
    display: none;
}

/* Skin only the native file input's own "Choose File" sub-button to match
   .smp-button--secondary — the outer input keeps the standard .smp-field
   input box (44px min-height etc.) from the rule above for free. Scoped to
   .smp-field so receipt-block.twig's visually-hidden file input (which
   lives outside any .smp-field) is untouched. */
.smp-manager-portal .smp-field input[type="file"]::file-selector-button,
.smp-manager-portal .smp-field input[type="file"]::-webkit-file-upload-button {
    margin-right: var(--smp-space-3, 12px);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--smp-text, #111827);
    background: #fff;
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius-sm, 6px);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.smp-manager-portal .smp-field input[type="file"]::file-selector-button:hover,
.smp-manager-portal .smp-field input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--smp-bg-subtle, #f8fafc);
    border-color: #c1c8d0;
}

/* ---- SEGMENTED TAB CONTROL (signature element)
   Pending / Upcoming / Calendar switcher becomes an iOS-style pill selector.
   ---- */
.smp-manager-portal [role="tablist"] {
    background: #eff1f3;
    border-radius: var(--smp-radius, 8px);
    padding: 4px;
    border-bottom: none;
    margin-bottom: 28px;
    gap: 0;
    display: inline-flex;
    width: auto;
}

.smp-manager-portal .smp-tab {
    border-radius: 6px;
    background: transparent;
    border: none;
    border-bottom: none;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--smp-muted, #6b7280);
    cursor: pointer;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    min-height: 36px;
}

.smp-manager-portal .smp-tab:hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.55);
    border-bottom-color: transparent;
}

.smp-manager-portal .smp-tab--active,
.smp-manager-portal .smp-tab[aria-selected="true"] {
    background: #fff;
    color: var(--smp-primary, #1b2d45);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    border-bottom-color: transparent;
}

.smp-manager-portal .smp-tab:focus-visible {
    outline: 2px solid var(--smp-accent, #d4a017);
    outline-offset: -2px;
    border-radius: 6px;
}

/* Pending count badge inside segmented tabs */
.smp-manager-portal [role="tablist"] .smp-tab__badge {
    background: #d63638;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

/* ---- Order form: shipping method styled toggle ---- */
.smp-orders-form__shipping {
    border: 1.5px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius, 8px);
    padding: 16px 20px 20px;
    margin-bottom: 20px;
}

.smp-orders-form__shipping legend {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--smp-muted, #6b7280);
    padding: 0 6px;
}

.smp-orders-form__method-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 2px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius-sm, 6px);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    margin-right: 10px;
    margin-top: 12px;
    min-height: 44px;
}

.smp-orders-form__method-label:has(input[type="radio"]:checked) {
    border-color: var(--smp-primary, #1b2d45);
    background: rgba(27, 45, 69, 0.05);
    color: var(--smp-primary, #1b2d45);
}

.smp-orders-form__method-label:has(input[type="radio"]:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Per-method live price (issue #135 item 2) — sits after the method name. */
.smp-orders-form__method-price {
    margin-left: auto;
    padding-left: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--smp-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.smp-orders-form__method-label:has(input[type="radio"]:checked) .smp-orders-form__method-price {
    color: var(--smp-primary, #1b2d45);
}
/* Locked (sub-threshold Standard): plain-language reason, not a bare price/dash. */
.smp-orders-form__method-price--locked {
    font-weight: 500;
    font-size: 12px;
    color: var(--smp-warning, #f59e0b);
    white-space: normal;
}

.smp-orders-form__estimate {
    background: var(--smp-bg-subtle, #f8fafc);
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius-sm, 6px);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

.smp-orders-form__lines {
    border: 1.5px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius, 8px);
    padding: 16px 20px 20px;
    margin-bottom: 20px;
}

.smp-orders-form__lines legend {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--smp-muted, #6b7280);
    padding: 0 6px;
}

.smp-orders-form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--smp-border, #e5e7eb);
    margin-top: 4px;
}
.smp-orders-form__cancel {
    color: var(--smp-muted, #6b7280);
    text-decoration: underline;
}

/* ---- Notices ---- */
.smp-manager-portal .smp-notice {
    border-radius: var(--smp-radius-sm, 6px);
    border: 1px solid transparent;
    border-left-width: 4px;
    padding: 14px 18px;
}

.smp-manager-portal .smp-notice--info {
    border-color: #dbeafe;
    border-left-color: #2271b1;
    background: #eff6ff;
    color: #1e3a5f;
}

.smp-manager-portal .smp-notice--warning {
    border-color: #fef3c7;
    border-left-color: #dba617;
    background: #fffbeb;
    color: #6b4200;
}

.smp-manager-portal .smp-notice--error {
    border-color: #fee2e2;
    border-left-color: #d63638;
    background: #fef2f2;
    color: #7f1d1d;
}

.smp-manager-portal .smp-notice--success {
    border-color: #d1fae5;
    border-left-color: #00a32a;
    background: #f0fdf4;
    color: #064e3b;
}

/* ---- Empty state ---- */
.smp-manager-portal .smp-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--smp-muted, #6b7280);
    font-size: 15px;
    border: 2px dashed var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius, 8px);
    font-style: normal;
}

.smp-manager-portal .smp-empty-state a {
    display: block;
    margin-top: 12px;
    font-weight: 600;
    color: var(--smp-primary, #1b2d45);
    text-decoration: none;
}

.smp-manager-portal .smp-empty-state a:hover {
    text-decoration: underline;
}

/* ---- Financials callout ---- */
.smp-manager-portal .smp-financials-callout {
    background: var(--smp-bg-subtle, #f8fafc);
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius, 8px);
    padding: 20px;
}

/* ---- Dashboard cards ---- */
.smp-manager-portal .smp-dashboard-card {
    border-radius: var(--smp-radius, 8px);
    border: 1px solid var(--smp-border, #e5e7eb);
    border-top-width: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    background: #fff;
    padding: 20px;
}

/* ---- Dialogs: larger shadow, rounded, backdrop blur ---- */
dialog[id^="smp-"],
dialog.smp-dialog {
    border-radius: 12px;
    border: none;
    overflow: hidden; /* clips child backgrounds (e.g. h2) to rounded corners */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.10);
    min-width: min(380px, 90vw);
    max-width: 500px;
}

dialog[id^="smp-"]::backdrop,
dialog.smp-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

dialog[id^="smp-"] h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
    margin: 0;
}

dialog[id^="smp-"] p {
    padding: 14px 24px 0;
}

.smp-dialog-actions,
.smp-modal-actions {
    padding: 16px 24px 20px;
    gap: 10px;
}

/* Higher specificity than dialog[id^="smp-"] p to win padding override */
dialog[id^="smp-"] .smp-dialog-warning {
    color: #b91c1c;
    font-weight: 500;
    padding: 4px 24px 0;
    margin: 0;
}

dialog[id^="smp-"] .smp-dialog-context {
    padding: 0 24px 10px;
    color: var(--smp-muted, #6b7280);
    font-style: italic;
    margin: 0;
}

/* Reasons list (reqEmptyReportConfirmation — issue #167 follow-up): mirrors
   .smp-error-summary's ul/li, adapted to the dialog's 24px gutter. Empty by
   default; populated client-side, so no :empty handling needed. */
dialog[id^="smp-"] ul {
    margin: 4px 0 0;
    padding: 0 24px 4px 44px;
    color: #50575e;
}

dialog[id^="smp-"] li {
    margin: 2px 0;
}

/* ---- Mobile: full-width CTAs, stacked forms ---- */
@media (max-width: 640px) {
    .smp-manager-portal [role="tablist"] {
        display: flex;
        width: 100%;
    }

    .smp-manager-portal .smp-tab {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 13px;
    }

    .smp-orders-list__toolbar .smp-button--primary {
        width: 100%;
    }

    .smp-orders-form__method-label {
        display: flex;
        width: 100%;
        margin-right: 0;
    }

    .smp-orders-form__submit {
        flex-direction: column;
    }

    .smp-orders-form__submit .smp-button {
        width: 100%;
    }
}

/* ==========================================================================
   OGPS PLANNER SECTION — specManagerDashboard → reqOgpsPlanner
   New component families: .smp-plan-line--{state} and .smp-min-control
   Extended here per specUISystem §2.
   ========================================================================== */

/* ---- Notice hub sections ---- */
.smp-notice-hub__section {
    margin-bottom: 20px;
}

.smp-notice-hub__section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--smp-muted, #6b7280);
    margin: 0 0 8px;
}

.smp-notice-hub__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-left: 4px solid #8c8f94;
    background: #f6f7f7;
    border-radius: 0 4px 4px 0;
    margin-bottom: 6px;
}

.smp-notice-hub__item--warning {
    border-left-color: #dba617;
    background: #fcf9e8;
    color: #4a3200;
}

.smp-notice-hub__item--error {
    border-left-color: #d63638;
    background: #fcf0f1;
    color: #50001a;
}

.smp-notice-hub__item--info {
    border-left-color: #2271b1;
    background: #f0f6fc;
    color: #00325c;
}

.smp-notice-hub__item--lifecycle {
    border-left-color: #2271b1;
    background: #f0f6fc;
    color: #00325c;
}

.smp-notice-hub__body {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}

.smp-notice-hub__body a {
    font-weight: 600;
    text-decoration: underline;
}

.smp-notice-hub__dismiss {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.smp-notice-hub__dismiss:hover {
    opacity: 1;
}

.smp-notice-hub__rejection-reason {
    display: block;
    margin-top: 4px;
    font-style: italic;
    opacity: 0.85;
}

/* ---- OGPS Planner section ---- */
.smp-ogps-planner {
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius, 8px);
    background: #fff;
    margin-bottom: 24px;
    overflow: hidden;
}

.smp-ogps-planner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--smp-bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--smp-border, #e5e7eb);
    cursor: pointer;
    user-select: none;
}

.smp-ogps-planner__header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--smp-text, #111827);
    margin: 0;
}

.smp-ogps-planner__toggle-icon {
    font-style: normal;
    transition: transform 0.2s;
}

.smp-ogps-planner[aria-expanded="true"] .smp-ogps-planner__toggle-icon {
    transform: rotate(180deg);
}

.smp-ogps-planner__body {
    padding: 18px;
}

.smp-ogps-planner[aria-expanded="false"] .smp-ogps-planner__body {
    display: none;
}

/* ---- Mode tabs ---- */
.smp-planner-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--smp-border, #e5e7eb);
    padding-bottom: 0;
}

.smp-planner-panel {
    display: none;
    margin-bottom: 16px;
}

.smp-planner-panel--active {
    display: block;
}

.smp-planner-panel .smp-field {
    margin-bottom: 12px;
}

.smp-planner-panel label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--smp-muted, #6b7280);
}

.smp-planner-panel input[type="date"],
.smp-planner-panel input[type="number"] {
    width: 100%;
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius-sm, 6px);
    font-size: 14px;
}

/* ---- Plan output table ---- */
.smp-plan-output {
    margin-top: 16px;
}

.smp-plan-output__heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--smp-muted, #6b7280);
    margin: 0 0 8px;
}

/* Plan line state row treatments */
.smp-plan-line--insufficient_data {
    background: #fff8e1;
}

.smp-plan-line--provisional {
    background: #f3f0ff;
}

.smp-plan-line--under_funded {
    background: #fff0f3;
}

.smp-plan-line--dormant {
    background: #f6f7f7;
    color: var(--smp-muted, #6b7280);
}

/* Recommended qty: tabular-nums, bold — the order-driving figure */
.smp-plan-qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* One-off advisory: clearly read-only */
.smp-plan-oneoff {
    font-style: italic;
    color: var(--smp-muted, #6b7280);
    font-size: 12px;
}

/* Badge line-state extensions — 5 plan line states */
.smp-badge--state-normal {
    background: #d4edda;
    color: #1a6030;
}

.smp-badge--state-provisional {
    background: #ede7f6;
    color: #4a148c;
}

.smp-badge--state-insufficient_data {
    background: #fff3cd;
    color: #7a5900;
}

.smp-badge--state-under_funded {
    background: #f8d7da;
    color: #721c24;
}

.smp-badge--state-dormant {
    background: #e2e3e5;
    color: #383d41;
}

/* Low-stock order hint badges (reqLowStockOrderHint, issue #153). New
   modifiers rather than reusing --rejected / --state-under_funded verbatim,
   so a future recolor of Order-lifecycle or plan-line-state badges doesn't
   silently drag this unrelated per-row stock hint along with it
   (ui-design-consultant review, 2026-07-11). The insufficient-data variant
   reuses --state-insufficient_data verbatim below instead — same underlying
   "no forecast" concept the OGPS planner already names identically, not just
   a color match. */
.smp-badge--low-stock {
    background: #fff3cd;
    color: #7a5900;
}

.smp-badge--overdue {
    background: #f8d7da;
    color: #721c24;
}

/* Inventory stock-health tint (reqInventoryStockHealthSignal, issue #165). New
   dedicated modifiers, deliberately separate from --inactive / --low-stock /
   --overdue / plan-line-state badges above — same isolation rationale: a
   future recolor of one badge family must not silently drag this unrelated
   passive Inventory-page signal along with it (ui-design-consultant review).
   .smp-inventory-card__meta already has flex-wrap: wrap, so no additional
   width/wrap CSS is added for the wider pill. */
.smp-badge--health-ok {
    background: #d4edda;
    color: #1a6030;
}

.smp-badge--health-watch {
    background: #fff3cd;
    color: #7a5900;
}

.smp-badge--health-low {
    background: #f8d7da;
    color: #721c24;
}

.smp-badge--health-unknown {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 1.5px dashed #6b7280;
    color: #6b7280;
}

.smp-inventory-card:has(.smp-badge--health-low) {
    box-shadow: inset 4px 0 0 #d63638;
}

/* Overdue / critical risk flags */
.smp-plan-risk {
    color: #d63638;
    font-weight: 700;
    font-size: 12px;
}

/* ---- Manual-minimum three-state control ---- */
.smp-min-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.smp-min-control__state-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: default;
}

/* Unset state: grey outline chip */
.smp-min-control__state-chip--unset {
    background: #f6f7f7;
    border-color: #c3c4c7;
    color: #3c434a;
}

/* 0 = opt-out: amber chip */
.smp-min-control__state-chip--optout {
    background: #fff3cd;
    border-color: #dba617;
    color: #7a5900;
}

/* >0 = floor: green chip */
.smp-min-control__state-chip--floor {
    background: #d4edda;
    border-color: #46a060;
    color: #1a6030;
}

.smp-min-control__edit-row {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.smp-min-control__edit-row--visible {
    display: flex;
}

.smp-min-control__input {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius-sm, 6px);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.smp-min-control__clear-btn {
    font-size: 11px;
    padding: 3px 8px;
}

/* Achievability banner */
.smp-plan-not-achievable {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #fcf9e8;
    border-left: 4px solid #dba617;
    border-radius: 0 4px 4px 0;
    margin-bottom: 12px;
    font-size: 13px;
    color: #4a3200;
}

/* ---- Distribution mode flag list ---- */
.smp-dist-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--smp-border, #e5e7eb);
    border-radius: var(--smp-radius-sm, 6px);
}

.smp-dist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--smp-border, #e5e7eb);
}

.smp-dist-row:last-child {
    border-bottom: none;
}

.smp-dist-row__name {
    flex: 1;
    font-size: 13px;
}

.smp-dist-row .smp-stepper {
    flex-shrink: 0;
}

/* Sticky Run Plan button on mobile */
.smp-planner-run-sticky {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--smp-border, #e5e7eb);
    z-index: 100;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .smp-plan-output .smp-table {
        display: block;
    }

    .smp-plan-output .smp-table thead {
        display: none;
    }

    .smp-plan-output .smp-table tbody tr {
        display: block;
        border: 1px solid var(--smp-border, #e5e7eb);
        border-radius: var(--smp-radius-sm, 6px);
        margin-bottom: 10px;
        padding: 10px;
    }

    .smp-plan-output .smp-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border: none;
        font-size: 13px;
    }

    .smp-plan-output .smp-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11px;
        color: var(--smp-muted, #6b7280);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .smp-planner-run-sticky {
        display: block;
    }

    .smp-planner-run-btn-desktop {
        display: none;
    }

    .smp-dist-list {
        max-height: 55vh;
    }

    .smp-min-control {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================
   Receipt-proof attachment block (issue #168 — reqReceiptUI)
   Thin block composed from tokens (NOT a nested .smp-detail-card); sits inside
   the Financials fieldset (edit form) or Financials card (detail view). Design:
   ux-design-advisor + ui-design-consultant, 2026-07-04.
   ========================================================================== */
.smp-receipt-block {
    margin-top: var(--smp-space-5, 24px);
    padding: var(--smp-space-4, 16px);
    background: var(--smp-bg-subtle, #f8fafc);
    border: 1px solid var(--smp-border, #e2e8f0);
    border-radius: var(--smp-radius, 8px);
}

.smp-receipt-block__heading {
    margin: 0 0 var(--smp-space-3, 12px);
    font-size: 15px;
    font-weight: 600;
    color: var(--smp-text, #1f2933);
}

/* Positive status line (issue #169 — specReportSubmission →
   reqReceiptPendingStatus; specManagerDashboard → reqReceiptUI amended).
   Pending-state color reuses the muted token (an already-audited ~4.62:1
   pairing on this block's background); attached-state color reuses the
   existing .smp-receipt-block__notice--success green. */
.smp-receipt-block__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--smp-space-2, 8px);
    font-size: 14px;
    font-weight: 600;
}

.smp-receipt-block__status--attached { color: #0f5132; }
.smp-receipt-block__status--pending  { color: var(--smp-muted, #6b7280); }
/* Approved Report that was never given a receipt (issue #323, rule 4). Shares
   the muted pending color deliberately: it is the same absence of a receipt,
   only settled rather than outstanding — the difference is carried by the
   wording and the dropped glyph, not by promoting it to its own color. */
.smp-receipt-block__status--none     { color: var(--smp-muted, #6b7280); }

/* Decorative only (aria-hidden in the template) — never the report's own
   thumbnail-vs-empty color, and never an emoji or warning/error triangle. */
.smp-receipt-block__status-glyph {
    line-height: 1;
}

.smp-receipt-block__empty,
.smp-receipt-block__filename {
    margin: var(--smp-space-2, 8px) 0 0;
    color: var(--smp-muted, #6b7280);
    font-size: 13px;
    word-break: break-word;
}

.smp-receipt-block__thumb-wrap {
    margin-bottom: var(--smp-space-3, 12px);
}

/* Letterboxed frame — a receipt photo of any aspect must never be cropped. */
.smp-receipt-block__thumb {
    display: block;
    width: 96px;
    max-height: 128px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--smp-border, #e2e8f0);
    border-radius: var(--smp-radius-sm, 4px);
}

.smp-receipt-block__thumb-link {
    display: inline-block;
}

.smp-receipt-block__thumb-link:focus-visible {
    outline: 2px solid var(--smp-accent, #2563eb);
    outline-offset: 2px;
}

.smp-receipt-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smp-space-2, 8px);
    margin-top: var(--smp-space-3, 12px);
}

/* --sm keeps the compact type/padding, but the hit target must still reach the
   portal's 44px rule (the base .smp-button--sm min-height resolves to ~34px). */
.smp-receipt-block__actions .smp-button {
    min-height: 44px;
    min-width: 44px;
}

.smp-receipt-block__actions .smp-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.smp-receipt-block__hint {
    display: block;
    margin-top: var(--smp-space-2, 8px);
}

/* Persistent notice slot — role/aria-live toggled in JS by state. */
.smp-receipt-block__notice {
    margin-top: var(--smp-space-3, 12px);
    padding: var(--smp-space-2, 8px) var(--smp-space-3, 12px);
    border-radius: var(--smp-radius-sm, 4px);
    font-size: 13px;
}

.smp-receipt-block__notice--info {
    color: var(--smp-muted, #6b7280);
    background: #eef2f7;
}

.smp-receipt-block__notice--success {
    color: #0f5132;
    background: #d1e7dd;
}

.smp-receipt-block__notice--error {
    color: #842029;
    background: #f8d7da;
}

/* ==========================================================================
   ADMIN REPORTS LIST — receipt qualifier tag (issue #169 Chunk 3)
   specAdminDashboard → reqReportsScreen.

   Renders outside .smp-manager-portal, so every --smp-* custom property is
   undeclared here — #646970 (WP core's native secondary/meta-text gray,
   ~5.53:1 contrast) is used literally rather than var(--smp-muted, ...),
   which would silently always fall through to its fallback on this screen.
   Plain text only — no .smp-badge reuse, no --warning/--critical tone (this
   status is non-blaming); the text itself ("Receipt pending") is the whole
   signal, exception-only (absent on an attached row). Right-alignment is
   inherited from the Net Revenue <td>'s own inline text-align:right — no
   alignment rule needed here.
   ========================================================================== */
.smp-reports-list__receipt-tag {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #646970;
    white-space: nowrap;
}

/* ==========================================================================
   SOCIAL MELTING POT DESIGN SYSTEM — TOKENS

   FIX (found and corrected in chunk 2/9): this docblock used to end its
   comment early. It referenced several token-name prefixes inline using a
   slash as a separator (e.g. one custom-property name, then a literal
   slash, then the next custom-property name, with no space around the
   slash) — and several of those custom-property names themselves end in an
   asterisk-style wildcard suffix in the prose. Asterisk immediately
   followed by slash, with no space between, is a real CSS comment
   terminator, so those spots silently closed this comment right there.
   Everything after each of those points, through this rule's own intended
   closing marker, got re-tokenized as if it were live CSS — which is how
   the ENTIRE token rule below ended up never registering in any browser
   (confirmed via a standalone CSSOM check), taking every --smp-navy,
   --smp-orange, --smp-teal, --font-display, --r-md, --space-4, --shadow-md,
   --t-body, --fg-on-paper, and --bg-on-paper token down with it — each one
   has been undefined since this section was first committed in the
   foundation chunk, silently falling back to whatever default each
   consuming rule happened to hardcode (or nothing). Caught while visually
   verifying chunk 2/9 in a real browser: the pill nav bar rendered with a
   transparent background instead of navy. Lesson for future edits to any
   comment in this file: never let an asterisk sit directly against a
   slash — always separate the two with a space, even when only listing
   token-name prefixes for documentation purposes (as this very fix had to
   relearn while drafting this replacement text).

   Manager Dashboard visual redesign, foundation chunk (copy-mockup-then-
   convert method — see assets/design-reference/manager-dashboard-v5/README.md).
   Source: assets/design-reference/manager-dashboard-v5/colors_and_type.css
   (Claude Design project b6ad8adc-7efa-415f-bf0c-f27996a4e456). Token names
   and values are copied verbatim from that file so the mockup stays a
   reliable 1:1 reference for later chunks. Two intentional deviations:
     - no @font-face rules. Self-hosted Montserrat, Open Sans, and Consolas
       TTFs could not be pulled through DesignSync (256 KiB fetch cap; every
       font file in this family is bigger) and Consolas is non-redistributable
       regardless — see the design-reference README's "Fonts" section.
       The display, body, and mono font tokens fall through to system stacks.
     - the mockup's Instagram-carousel tokens (canvas width, height, padding,
       photo-overlay top and bottom) are dropped; they style a marketing-slide
       surface this plugin has no equivalent of, not the manager dashboard.
   Scoped to .smp-manager-portal (not :root), matching this file's existing
   scoping convention for the spacing, accent, and nav-background tokens
   above, so admin screens (which share this stylesheet) are unaffected.
   Appended last so these new custom-property names layer on top of the two
   prior .smp-manager-portal token declarations without colliding with any
   of them (verified no existing navy, orange, teal, paper, font, space,
   radius, type-scale, shadow, or foreground/background token names exist
   elsewhere in this file).
   ========================================================================== */

.smp-manager-portal {
    /* Brand color world — meanings are fixed, not decorative */
    --smp-navy:      #052540;  /* atmosphere, overlays, the brand world */
    --smp-orange:    #ff5900;  /* action, urgency, CTA, date, event energy */
    --smp-teal:      #00b0bc;  /* reassurance, openness, permission */
    --smp-paper:     #f7f1e7;  /* softer explanation slides */
    --smp-white:     #ffffff;

    /* Navy scale */
    --smp-navy-900:  #021629;
    --smp-navy-800:  #03192e;
    --smp-navy-700:  #052540;
    --smp-navy-600:  #0a3357;
    --smp-navy-500:  #144b73;
    --smp-navy-400:  #1f6695;
    --smp-navy-300:  #4d8ab2;
    --smp-navy-200:  #8fb4d0;
    --smp-navy-100:  #c9dbe8;
    --smp-navy-50:   #e8eff5;

    /* Orange scale — action only */
    --smp-orange-700: #c63f00;
    --smp-orange-600: #e64e00;
    --smp-orange-500: #ff5900;
    --smp-orange-400: #ff7a33;
    --smp-orange-300: #ffa472;
    --smp-orange-200: #ffd0b3;

    /* Teal scale — permission only */
    --smp-teal-700:  #007a83;
    --smp-teal-600:  #00929c;
    --smp-teal-500:  #00b0bc;
    --smp-teal-400:  #3ec5cf;
    --smp-teal-300:  #7adae2;
    --smp-teal-200:  #b8ecf1;

    /* Neutrals on paper */
    --smp-paper-200: #ede4d2;
    --smp-paper-100: #f1ebdc;
    --smp-paper-050: #faf6ed;

    /* Semantic foreground / background on navy world */
    --fg-on-navy:        var(--smp-white);
    --fg-on-navy-muted:  rgba(255, 255, 255, 0.72);
    --fg-on-navy-dim:    rgba(255, 255, 255, 0.48);
    --bg-on-navy-tint:   rgba(255, 255, 255, 0.06);
    --bg-on-navy-rule:   rgba(255, 255, 255, 0.14);

    /* Semantic foreground / background on paper world */
    --fg-on-paper:       var(--smp-navy);
    --fg-on-paper-muted: rgba(5, 37, 64, 0.68);
    --fg-on-paper-dim:   rgba(5, 37, 64, 0.40);
    --bg-on-paper-rule:  rgba(5, 37, 64, 0.10);

    /* Type families — system-font fallback; no self-hosted webfonts this round */
    --font-display: system-ui, -apple-system, sans-serif;
    --font-body:    system-ui, -apple-system, sans-serif;
    --font-body-sc: system-ui, -apple-system, sans-serif;
    --font-body-c:  system-ui, -apple-system, sans-serif;
    --font-mono:    'Courier New', ui-monospace, monospace;

    /* Display scale */
    --t-display-xl: clamp(56px, 8.5vw, 128px);
    --t-display-lg: clamp(44px, 6vw, 92px);
    --t-display-md: clamp(32px, 4.4vw, 64px);
    --t-display-sm: clamp(24px, 3vw, 44px);

    /* Body & support scale */
    --t-body-lg: 20px;
    --t-body:    16px;
    --t-body-sm: 14px;
    --t-caption: 12px;

    /* Eyebrow / counter — uppercase, tracked */
    --t-eyebrow: 13px;
    --eyebrow-tracking: 0.18em;
    --counter-tracking: 0.12em;

    /* Line height */
    --lh-display:  0.95;
    --lh-headline: 1.02;
    --lh-body:     1.5;
    --lh-tight:    1.2;

    /* Radius / spacing — soft geometries preferred; round by default */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Elevation — flat brand, used sparingly */
    --shadow-sm: 0 1px 2px rgba(5, 37, 64, 0.08);
    --shadow-md: 0 8px 24px -8px rgba(5, 37, 64, 0.25);
    --shadow-lg: 0 24px 64px -16px rgba(5, 37, 64, 0.35);
}

/* ---- Wrapper background/border fix (post-launch fidelity fix, found by
   the user comparing the live site to the mockup) ----
   The three .smp-manager-portal blocks above this one only ever added CSS
   custom properties or layout tweaks — none of them touched `background`/
   `border`/`border-radius`/`box-shadow`, so the very first, pre-redesign
   "PORTAL WRAPPER" rule (top of this file: white background, WP-admin grey
   border, blue top-accent bar, 4px radius) was still winning on every single
   manager page throughout the whole 9-chunk redesign. This is why the whole
   app still looked like a plain white WP-admin card instead of the mockup's
   floating cream "paper" panel — nobody's chunk owned the wrapper's own
   background, each chunk only styled content *inside* it.
   Mockup reference: manager-dashboard-v5.dc.html line 52 (the
   `<section data-smp="paper">` module wrapper). Overridden here (later
   source order wins at equal specificity, this file's established
   convention) rather than edited in place at the top, to keep this fix
   colocated with the token definitions it depends on. */
.smp-manager-portal {
    background: var(--smp-paper);
    border: 1px solid rgba(5, 37, 64, 0.08);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 50px -24px rgba(5, 37, 64, 0.35);
    overflow: clip;
}

/* ==========================================================================
   SELF-HOSTED ICON SET — .smp-icon
   Sizing/color contract for manager/partials/icon.twig's inline <svg>
   output: scales with surrounding font-size, like the mockup's
   `i[data-lucide] { width: 1em; height: 1em; }` runtime rule, but as a
   static class instead of a JS-hydrated tag (no Lucide runtime is shipped).
   ========================================================================== */

.smp-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke-width: 2;
}

/* ==========================================================================
   BREADCRUMB CHROME — manager/partials/breadcrumb.twig
   Mockup reference (manager-dashboard-v5.dc.html lines 42-48) translated
   from inline style="" attributes to real classes — this codebase has no
   inline styles anywhere in its templates (grep confirms), so every
   presentational rule the mockup expresses inline becomes a class here.
   ========================================================================== */

.smp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9aa6b2;
    font-size: var(--t-caption, 12px);
    margin-bottom: 10px;
    padding-left: 2px;
}

.smp-breadcrumb__host {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.smp-breadcrumb__chevron {
    font-size: 0.85em;
}

/* ==========================================================================
   PORTAL NAV — SOCIAL MELTING POT REDESIGN
   Restyles the existing .smp-portal-nav (PORTAL NAV BAR section above) into
   the mockup's navy pill-header (reference lines 54-79): brand mark, icon
   pill links, manager identity block. Appended last so these rules win over
   the earlier tab-strip version at the same specificity, same technique the
   "MANAGER PORTAL — MODERN REDESIGN" section above already uses. New
   elements (__brand, __brand-text, __divider, __links, __identity, __avatar,
   __logo) only existed in the mockup as inline-styled <div>s; they get real
   BEM class names here following manager/partials/nav.twig's __element
   convention.
   ========================================================================== */

.smp-portal-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4, 16px);
    overflow-x: visible;
    min-height: 60px;
    background: var(--smp-navy);
    border-radius: 2px 2px 0 0;
    border-bottom: none;
    margin: calc(-1 * var(--smp-portal-pad))
            calc(-1 * var(--smp-portal-pad))
            var(--smp-portal-pad);
    padding: 0 var(--smp-portal-pad);
}

.smp-portal-nav__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.smp-portal-nav__logo {
    height: 28px;
    width: auto;
    display: block;
}

.smp-portal-nav__brand-text {
    line-height: 1.05;
}

.smp-portal-nav__brand-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    color: var(--fg-on-navy);
}

.smp-portal-nav__brand-sub {
    display: block;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-on-navy-dim);
}

.smp-portal-nav__divider {
    width: 1px;
    height: 26px;
    background: var(--bg-on-navy-rule);
    flex-shrink: 0;
}

.smp-portal-nav__links {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.smp-portal-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    border-bottom: none;
    border-radius: var(--r-pill, 999px);
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    color: var(--fg-on-navy-muted);
    text-decoration: none;
    white-space: nowrap;
    min-height: 36px;
    margin-bottom: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.smp-portal-nav__link:hover {
    background: var(--bg-on-navy-tint);
    color: var(--fg-on-navy);
    border-bottom-color: transparent;
}

.smp-portal-nav__link--active,
.smp-portal-nav__link--active:hover {
    background: var(--smp-white);
    color: var(--smp-navy);
    border-bottom-color: transparent;
}

.smp-portal-nav__link:focus-visible {
    outline: 2px solid var(--smp-white);
    outline-offset: 2px;
    border-radius: var(--r-pill, 999px);
}

/* Pending badge re-themed for the navy pill nav: orange fill (action/urgency), white text */
.smp-portal-nav .smp-tab__badge {
    background: var(--smp-orange);
    color: var(--smp-white);
    font-weight: 700;
}

.smp-portal-nav__identity {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.smp-portal-nav__identity-text {
    text-align: right;
    line-height: 1.15;
}

.smp-portal-nav__identity-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-on-navy);
}

.smp-portal-nav__identity-role {
    display: block;
    font-size: 11px;
    color: var(--fg-on-navy-dim);
}

.smp-portal-nav__avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill, 999px);
    background: var(--bg-on-navy-rule);
    color: var(--smp-white);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 auto;
}

/* ---- Responsive: pill row wraps instead of the old vertical-stack/scroll
   behavior. Reuses this file's existing 640/480 breakpoints rather than the
   mockup's own 860/620 values, to stay consistent with the rest of the
   stylesheet. flex-wrap on __links (not overflow scroll) also fixes a known
   issue from the prior redesign attempt where the pill row could clip
   "Financials" off narrow viewports without wrapping visibly. ---- */
@media (max-width: 640px) {
    .smp-portal-nav {
        flex-wrap: wrap;
        min-height: 0;
        padding: 12px var(--smp-portal-pad);
        row-gap: 12px;
    }

    .smp-portal-nav__brand-text,
    .smp-portal-nav__divider,
    .smp-portal-nav__identity-text {
        display: none;
    }

    .smp-portal-nav__identity {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    /* Neutralize the older vertical-stack rules (PORTAL NAV BAR section,
       480px block above) — the pill nav wraps in place, it does not stack
       into a full-width vertical list. */
    .smp-portal-nav {
        flex-direction: row;
    }

    .smp-portal-nav__link {
        border-left: none;
        border-bottom: none;
        padding: 7px 12px;
        min-height: 32px;
    }

    .smp-portal-nav__link--active {
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
}

/* ==========================================================================
   SOCIAL MELTING POT — REPORTS HOME (Pending / Schedule / Calendar)
   Manager Dashboard visual redesign, chunk 2/9 (copy-mockup-then-convert
   method — see assets/design-reference/manager-dashboard-v5/README.md).
   Covers reports-pending.twig, reports-upcoming.twig, reports-calendar.twig,
   and the shared manager/partials/reports-home-header.twig +
   cancel-occurrence-modal.twig. Scoped to .smp-area-reports (nested inside
   .smp-manager-portal) so these rules never leak into the not-yet-redesigned
   Orders/Inventory/Financials screens, which still use the pre-redesign
   .smp-tab/.smp-table/.smp-button styles defined earlier in this file.
   Appended last, per this file's established "later source order wins at
   equal specificity" convention (see the foundation chunk's tokens section).
   ========================================================================== */

/* ---- Eyebrow (small tracked label above a heading) ---- */
.smp-area-reports .smp-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-caption, 12px);
    letter-spacing: var(--eyebrow-tracking, 0.12em);
    text-transform: uppercase;
    color: var(--fg-on-paper-muted);
}

/* ---- Header strip: eyebrow/title/lede + headline count ---- */
.smp-reports-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5, 20px);
    flex-wrap: wrap;
    margin-bottom: var(--space-5, 20px);
}

.smp-reports-header__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 4vw, 34px);
    line-height: var(--lh-headline, 1.05);
    color: var(--smp-navy);
    margin: 4px 0 0;
}

.smp-reports-header__lede {
    color: var(--fg-on-paper-muted);
    margin-top: var(--space-2, 8px);
    max-width: 480px;
    font-size: var(--t-body-sm, 14px);
}

.smp-reports-header__count {
    text-align: right;
}

.smp-reports-header__count-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--smp-navy);
    line-height: 1.1;
}

.smp-reports-header__count-highlight {
    color: var(--smp-orange);
}

/* ---- Sub-nav: List / Schedule / Calendar tabs ---- */
.smp-reports-subnav[role="tablist"] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bg-on-paper-rule);
    margin-bottom: var(--space-5, 20px);
}

.smp-reports-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 12px 4px;
    margin-right: var(--space-6, 26px);
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-on-paper-muted);
    text-decoration: none;
    cursor: pointer;
}

.smp-reports-tab:hover {
    color: var(--smp-navy);
}

.smp-reports-tab--active,
.smp-reports-tab[aria-selected="true"] {
    color: var(--smp-navy);
    border-bottom-color: var(--smp-navy);
}

.smp-reports-tab:focus-visible {
    outline: 2px solid var(--smp-navy);
    outline-offset: 2px;
}

.smp-reports-tab .smp-tab__badge {
    background: rgba(255, 89, 0, 0.12);
    color: var(--smp-orange-700);
    font-weight: 700;
}

.smp-reports-panel__lede {
    color: var(--fg-on-paper-muted);
    max-width: 580px;
    margin-bottom: var(--space-5, 20px);
    font-size: var(--t-body-sm, 14px);
}

/* ---- Shared: date tile (Pending + Schedule rows) ---- */
.smp-date-tile {
    width: 76px;
    text-align: center;
    padding: var(--space-2, 8px) 0;
    border-radius: var(--r-md, 14px);
    background: rgba(5, 37, 64, 0.05);
    color: var(--fg-on-paper);
    flex: 0 0 auto;
}

.smp-date-tile--one-off {
    background: rgba(255, 217, 0, 0.4);
}

.smp-date-tile__dow,
.smp-date-tile__mon {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.smp-date-tile__day {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
}

/* ---- Shared: pill badges (Not started / Next up / One-off) ---- */
.smp-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: var(--r-pill, 999px);
    white-space: nowrap;
}

.smp-pill--next-up {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--smp-navy);
    color: var(--smp-white);
}

.smp-pill--not-started {
    font-size: 12px;
    text-transform: none;
    background: rgba(255, 89, 0, 0.12);
    color: var(--smp-orange-700);
}

.smp-pill--one-off {
    text-transform: uppercase;
    background: rgba(255, 217, 0, 0.55);
    color: var(--smp-navy);
}

.smp-pill--one-off .smp-icon {
    width: 0.9em;
    height: 0.9em;
}

/* ---- Shared: reorder-status pills (Inventory Home, chunk 4/9) ----
   Colors are a literal copy of the mockup's reorderStatusMeta(): teal =
   okay/healthy, yellow = low/soon, orange = critical/urgent. 'unknown' (no
   depletion history yet) has no mockup equivalent — neutral grey, reusing
   the same tint as the "Inactive" badge so it doesn't compete visually with
   a real alert state. */
.smp-pill--reorder-ok {
    background: rgba(0, 176, 188, 0.12);
    color: var(--smp-teal-700);
}

.smp-pill--reorder-low {
    background: rgba(255, 217, 0, 0.32);
    color: #7a6200;
}

.smp-pill--reorder-critical {
    background: rgba(255, 89, 0, 0.14);
    color: var(--smp-orange-700);
}

.smp-pill--reorder-unknown {
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-dim);
}

/* ==========================================================================
   REPORTS HOME — PENDING (List view)
   ========================================================================== */

.smp-reports-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    margin-bottom: var(--space-4, 18px);
}

.smp-select-pill {
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-pill, 999px);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--smp-navy);
    background: var(--smp-white);
    font-family: var(--font-body);
}

.smp-reports-toolbar__search {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-pill, 999px);
    padding: 4px 4px 4px 14px;
    width: min(220px, 100%);
}

.smp-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    width: 100%;
    color: var(--fg-on-paper);
}

.smp-search-submit {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill, 999px);
    border: none;
    background: transparent;
    color: var(--fg-on-paper-dim);
    cursor: pointer;
}

.smp-search-submit:hover {
    color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.06);
}

.smp-button--cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--r-sm, 12px);
    border: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    background: var(--smp-orange);
    color: var(--smp-white);
    text-decoration: none;
}

.smp-button--cta:hover {
    background: var(--smp-orange-700);
    color: var(--smp-white);
}

/* ==========================================================================
   REPORTS HOME — SCHEDULE (Upcoming view)
   ========================================================================== */

.smp-schedule-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

.smp-schedule-group__header {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 2px 2px 12px;
    text-align: left;
    cursor: default;
    list-style: none;
}

.smp-schedule-group--collapsible > .smp-schedule-group__header {
    cursor: pointer;
}

.smp-schedule-group--collapsible > .smp-schedule-group__header::-webkit-details-marker {
    display: none;
}

.smp-schedule-group__chevron {
    color: var(--fg-on-paper-muted);
}

/* Static (This Week/This Month) groups only render the down chevron. */
.smp-schedule-group__label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--smp-navy);
}

.smp-schedule-group__count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-on-paper-muted);
    background: rgba(5, 37, 64, 0.06);
    padding: 2px 9px;
    border-radius: var(--r-pill, 999px);
}

.smp-schedule-group__rule {
    flex: 1;
    height: 1px;
    background: var(--bg-on-paper-rule);
}

.smp-schedule-group__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 10px);
}

/* Collapsible (subsequent months) groups: two chevrons, CSS toggles which shows. */
.smp-schedule-group--collapsible .smp-schedule-group__chevron--open { display: none; }
.smp-schedule-group--collapsible[open] .smp-schedule-group__chevron--closed { display: none; }
.smp-schedule-group--collapsible[open] .smp-schedule-group__chevron--open { display: inline-block; }
/* Non-collapsible (This Week/This Month) groups only ever render one chevron icon;
   the --closed variant does not exist there, so no extra rule is needed. */

.smp-schedule-row-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 10px);
}

.smp-schedule-row {
    display: flex;
    align-items: center;
    gap: var(--space-5, 18px);
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    padding: 15px 18px;
}

.smp-schedule-row__body {
    flex: 1 1 200px;
    min-width: 0;
}

.smp-schedule-row__badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.smp-schedule-row__event {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--smp-navy);
}

.smp-schedule-row__place {
    margin-top: 5px;
    font-size: 13px;
    color: var(--fg-on-paper-dim);
    font-family: var(--font-mono);
}

.smp-button--outline-danger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--r-sm, 12px);
    border: 1px solid rgba(255, 89, 0, 0.35);
    background: var(--smp-white);
    color: var(--smp-orange-700);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.smp-button--outline-danger:hover {
    background: rgba(255, 89, 0, 0.06);
}

/* Bug fix (found by the user comparing the live site to the mockup): the
   mobile day-list's .smp-cal-chip--{status} colors (defined near the top of
   this file, in the old pre-redesign MONTH-GRID CALENDAR section) were never
   updated when this class name was reused here — they're still the original
   green/yellow/blue/grey, not the Social Melting Pot palette every other
   status indicator on this page uses. Retinted to the Social Melting Pot
   palette below. (This used to say "match the dot-marker colors immediately
   above"; those .smp-cal-dot* rules styled grid markup that never shipped
   and have been deleted, so these chips are now the only status colors on
   the page and there is nothing left to match.) */
.smp-cal-chip--pending   { background: rgba(255, 89, 0, 0.12);   color: var(--smp-orange-700); }
.smp-cal-chip--upcoming  { background: rgba(31, 102, 149, 0.14); color: var(--smp-navy-400); }
.smp-cal-chip--reported  { background: rgba(143, 180, 208, 0.28); color: var(--smp-navy); }
.smp-cal-chip--cancelled { background: rgba(5, 37, 64, 0.06);    color: var(--fg-on-paper-dim); text-decoration: line-through; }

.smp-error {
    color: #c63f00;
    font-weight: 600;
    padding: 12px 0;
}

/* ---- Responsive: calendar layout collapses to the mobile marked-days list.
   .smp-cal-list is shown (and its own display switch lives in the existing
   MONTH-GRID CALENDAR section above). The hide rule for .smp-cal-layout has
   to live HERE, after its own base rule (display: grid, declared earlier in
   this same REPORTS HOME section) — same specificity, so whichever rule is
   later in source order wins; a hide rule placed up in the older
   MONTH-GRID CALENDAR section would be silently beaten by this section's
   later, unconditional .smp-cal-layout rule. (Found via a real mobile-width
   screenshot: the grid and the marked-days list were both rendering at
   once.) Agenda is desktop/tablet-only — the mobile list already flattens
   every day's events inline. ---- */
@media (max-width: 640px) {

    .smp-reports-toolbar__search {
        width: 100%;
    }

    /* Schedule rows: stack tile+body above the Cancel button instead of
       squeezing all three into one row — confirmed via a real 390px
       screenshot that the un-wrapped row crushed the venue/city text down
       to a near-unreadable column. */
    .smp-schedule-row {
        flex-wrap: wrap;
    }

    .smp-schedule-row__body {
        flex: 1 1 100%;
    }

    .smp-schedule-row .smp-button--outline-danger {
        width: 100%;
        justify-content: center;
    }
}

.smp-pill--submitted {
    font-size: 12px;
    text-transform: none;
    background: rgba(0, 176, 188, 0.12);
    color: var(--smp-teal-700, #007a83);
}

.smp-area-reports--detail .smp-report-meta {
    margin-top: 6px;
    color: var(--fg-on-paper-muted);
    font-size: 13px;
}

.smp-area-reports--detail .smp-report-meta__label {
    color: var(--fg-on-paper-dim);
}

.smp-button--cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--r-sm, 12px);
    border: 1px solid var(--smp-navy);
    background: var(--smp-white);
    color: var(--smp-navy);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.smp-button--cta-outline:hover {
    background: rgba(5, 37, 64, 0.06);
    color: var(--smp-navy);
}

.smp-area-reports--form .smp-card,
.smp-area-reports--detail .smp-card {
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-lg, 16px);
    background: var(--smp-white);
    overflow: hidden;
}

.smp-area-reports--form .smp-card__header,
.smp-area-reports--detail .smp-card__header {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0;
    padding: 13px 18px;
    background: rgba(5, 37, 64, 0.04);
    border-bottom: 1px solid var(--bg-on-paper-rule);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smp-navy);
}

.smp-area-reports--form .smp-card__header .smp-icon,
.smp-area-reports--detail .smp-card__header .smp-icon {
    color: var(--smp-navy);
    text-transform: none;
}

.smp-area-reports--form .smp-card__header-hint,
.smp-area-reports--detail .smp-card__header-hint {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--fg-on-paper-muted);
}

.smp-area-reports--form .smp-card__body,
.smp-area-reports--detail .smp-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

/* Edit History card: chrome only, no header strip (<summary> is its own header) */
.smp-area-reports--detail .smp-report-history {
    margin-top: var(--space-5, 20px);
    padding: 16px 18px;
}

.smp-area-reports--form .smp-flag-search-bar {
    align-items: center;
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-sm, 12px);
    padding: 4px 14px;
    margin-bottom: 14px;
}

.smp-area-reports--form .smp-flag-search-bar__icon {
    color: var(--fg-on-paper-dim);
    flex: 0 0 auto;
}

.smp-area-reports--form .smp-flag-search-bar input {
    border: none;
    background: transparent;
    padding: 8px 0;
}

.smp-area-reports--form .smp-fav-on-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--r-sm, 12px);
}

.smp-area-reports--form .smp-fav-on-top-btn[aria-pressed="true"] {
    background: rgba(5, 37, 64, 0.06);
    border-color: var(--smp-navy);
    color: var(--smp-navy);
}

.smp-area-reports--form .smp-flag-row {
    background: var(--smp-paper-050);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    padding: 8px 10px;
}

.smp-area-reports--form .smp-flag-row:first-child {
    border-top: 1px solid var(--bg-on-paper-rule);
}

.smp-area-reports--form .smp-flag-row__name {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--smp-navy);
}

.smp-area-reports--form .smp-flag-row__stock {
    font-family: var(--font-mono);
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-muted);
}

.smp-area-reports--form .smp-star-btn--active {
    color: var(--smp-navy);
}

.smp-area-reports--form .smp-damaged-btn {
    border-radius: var(--r-sm, 10px);
}

@media (max-width: 640px) {

    /* Pre-existing bug, exposed (not caused) by this chunk's mobile
       screenshot check: the flag row's mobile header packs name + star +
       stock into one `flex-wrap: nowrap` line with no min-width protecting
       the name, so on a 390px viewport star+stock alone (28px + 129px)
       already exceed the header's own available width, collapsing the name
       to 0px — invisible, not just truncated. Letting the header wrap gives
       the name its own full-width line instead of vanishing. */
    .smp-area-reports--form .smp-flag-row__header {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .smp-area-reports--form .smp-flag-row__name {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .smp-area-reports--form {
        padding-bottom: 80px;
    }
}

/* ==========================================================================
   INVENTORY HOME — Manager Dashboard visual redesign, chunk 4/9
   (copy-mockup-then-convert method — see
   assets/design-reference/manager-dashboard-v5/README.md). Covers
   manager/inventory.twig. Scoped to .smp-area-inventory so these rules never
   leak into the not-yet-redesigned Orders/Financials screens or into
   item-detail.twig, which reuses some of the same bare class names
   (.smp-inventory-card__favourite--active) without using .smp-inventory-card
   itself as a container. Appended last, per this file's established "later
   source order wins at equal specificity" convention.
   ========================================================================== */

/* ---- Eyebrow — .smp-eyebrow is only styled when scoped by an ancestor
   (see .smp-area-reports .smp-eyebrow above); this page needs its own. ---- */
.smp-area-inventory .smp-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-caption, 12px);
    letter-spacing: var(--eyebrow-tracking, 0.12em);
    text-transform: uppercase;
    color: var(--fg-on-paper-muted);
}

.smp-area-inventory .smp-fav-on-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--r-sm, 12px);
}

.smp-area-inventory .smp-fav-on-top-btn[aria-pressed="true"] {
    background: rgba(5, 37, 64, 0.06);
    border-color: var(--smp-navy);
    color: var(--smp-navy);
}

.smp-area-inventory .smp-inventory-summary {
    color: var(--fg-on-paper-muted);
    font-size: var(--t-body-sm, 14px);
}

/* ---- Empty state — icon + centered copy, no dashed box (mockup has none;
   .smp-empty-state stays for the AC-tested class contract, restyled here). ---- */
.smp-area-inventory .smp-empty-state {
    border: none;
    background: transparent;
    padding: 56px 20px;
    font-style: normal;
}

/* ---- Row cards: 5-column grid (thumb / name+meta / stock / status / details),
   matching the mockup's row layout. Overrides the older flex-row
   .smp-inventory-card rule declared earlier in this file (still the class
   the AC-tested markup/JS/CSS contract uses — see doc comment above). ---- */
.smp-area-inventory .smp-inventory-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 76px 112px auto;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    margin-bottom: 10px;
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    box-shadow: none;
}

.smp-area-inventory .smp-inventory-card--inactive {
    opacity: 0.65;
}

.smp-area-inventory .smp-inventory-card__thumb {
    width: 56px;
    height: 38px;
    border-radius: var(--r-sm, 6px);
    object-fit: cover;
    border: 1px solid var(--bg-on-paper-rule);
}

.smp-area-inventory .smp-inventory-card__thumb--placeholder {
    display: grid;
    place-items: center;
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-muted);
    border: none;
}

.smp-area-inventory .smp-inventory-card__thumb--placeholder .smp-icon {
    width: 18px;
    height: 18px;
}

.smp-area-inventory .smp-inventory-card__body {
    min-width: 0;
}

.smp-area-inventory .smp-inventory-card__title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.smp-area-inventory .smp-inventory-card__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--smp-navy);
}

.smp-area-inventory .smp-inventory-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.smp-area-inventory .smp-inventory-card__category {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--bg-on-paper-rule);
    color: var(--fg-on-paper-muted);
    text-transform: capitalize;
}

/* Star button: 24px inline with the name (moved from the actions column to
   match the mockup); active color is navy, matching this branch's own
   chunk-3 precedent (.smp-area-reports--form .smp-star-btn--active) rather
   than the pre-redesign amber used on not-yet-converted screens. */
.smp-area-inventory .smp-inventory-card__favourite {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--r-sm, 6px);
    color: var(--fg-on-paper-dim);
    cursor: pointer;
}

.smp-area-inventory .smp-inventory-card__favourite:hover,
.smp-area-inventory .smp-inventory-card__favourite:focus-visible {
    color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.06);
    outline: none;
}

.smp-area-inventory .smp-inventory-card__favourite--active {
    color: var(--smp-navy);
}

.smp-area-inventory .smp-inventory-card__stock {
    text-align: center;
}

.smp-area-inventory .smp-inventory-card__stock-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-on-paper-dim);
    font-weight: 700;
}

.smp-area-inventory .smp-inventory-card__count {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--smp-navy);
}

.smp-area-inventory .smp-inventory-card__status {
    text-align: center;
}

.smp-area-inventory .smp-inventory-card__status .smp-pill {
    min-width: 74px;
    justify-content: center;
    font-size: 12px;
}

.smp-area-inventory .smp-inventory-card__details {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.smp-area-inventory .smp-inventory-card__details .smp-icon {
    width: 0.9em;
    height: 0.9em;
}

@media (max-width: 640px) {

    /* Stacked card: thumb+name+star on row 1, stock+status on row 2,
       full-width Details button on row 3 — CSS Grid named areas rather than
       flex+order (see the foundation chunk's own caution about `order`
       values leaking across unrelated scopes for shared bare classes; this
       class is inventory-only, but named areas keep the mobile rewrite
       self-documenting regardless). */
    .smp-area-inventory .smp-inventory-card {
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "thumb body"
            "stock status"
            "details details";
        row-gap: 10px;
    }

    .smp-area-inventory .smp-inventory-card__thumb {
        grid-area: thumb;
    }

    .smp-area-inventory .smp-inventory-card__body {
        grid-area: body;
    }

    .smp-area-inventory .smp-inventory-card__stock {
        grid-area: stock;
        display: flex;
        align-items: center;
        gap: 6px;
        text-align: left;
    }

    .smp-area-inventory .smp-inventory-card__stock-label {
        display: inline;
    }

    .smp-area-inventory .smp-inventory-card__status {
        grid-area: status;
        text-align: right;
    }

    .smp-area-inventory .smp-inventory-card__details {
        grid-area: details;
        justify-self: stretch;
        justify-content: center;
    }
}

/* ==========================================================================
   FLAG DETAIL PAGE — Manager Dashboard visual redesign, chunk 5/9
   (copy-mockup-then-convert method — see
   assets/design-reference/manager-dashboard-v5/README.md, markup lines
   571-680). Covers manager/item-detail.twig. Scoped to .smp-area-inventory,
   same convention as chunk 4's inventory section above. Appended last, per
   this file's established "later source order wins at equal specificity"
   convention — deliberately overrides the earlier, unscoped
   .smp-manager-portal .smp-back-link a rule for the icon+text back link.

   .smp-card is reused rather than recreated (per this chunk's own brief),
   but — like .smp-eyebrow (see chunk 4's own note above) — it is only
   defined scoped to .smp-area-reports--form/--detail, so it needs its own
   .smp-area-inventory-scoped restatement here; it is not a global rule. ---- */

.smp-area-inventory .smp-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--smp-navy);
    font-weight: 700;
    font-size: 14px;
}

.smp-area-inventory .smp-back-link a:hover {
    color: var(--smp-teal-700);
}

/* ---- Card component restatement (see doc comment above) ---- */
.smp-area-inventory .smp-card {
    margin: 0 0 var(--space-5, 20px);
    padding: 0;
    min-width: 0;
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-lg, 16px);
    background: var(--smp-white);
    overflow: hidden;
}

.smp-area-inventory .smp-card__header {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0;
    padding: 13px 18px;
    background: rgba(5, 37, 64, 0.04);
    border-bottom: 1px solid var(--bg-on-paper-rule);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smp-navy);
}

.smp-area-inventory .smp-card__header .smp-icon {
    color: var(--smp-navy);
    text-transform: none;
}

.smp-area-inventory .smp-card__header-hint {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--fg-on-paper-muted);
}

.smp-area-inventory .smp-card__body {
    padding: 18px;
}

/* ---- Hero: flag thumb/placeholder, name+star, category, stock count ----
   Selector is .smp-area-inventory .smp-flag-detail-hero (2 classes), not
   the bare .smp-flag-detail-hero (1 class) — .smp-area-inventory .smp-card
   above sets padding:0 at (0,0,2,0) specificity, which silently wins over a
   single-class override regardless of source order. Found via a real mobile
   screenshot: with padding:0 (dev tools confirmed via getComputedStyle),
   the wrapped stock count's "in stock" label sat flush against the card's
   rounded corner and had its leading "I" clipped by overflow:hidden. ---- */
.smp-area-inventory .smp-flag-detail-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 22px;
}

.smp-flag-detail-hero__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 44px;
    border-radius: var(--r-sm, 8px);
    object-fit: cover;
    border: 1px solid var(--bg-on-paper-rule);
}

.smp-flag-detail-hero__thumb--placeholder {
    display: grid;
    place-items: center;
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-muted);
    border: none;
}

.smp-flag-detail-hero__thumb--placeholder .smp-icon {
    width: 22px;
    height: 22px;
}

.smp-flag-detail-hero__body {
    flex: 1 1 200px;
    min-width: 0;
}

.smp-flag-detail-hero__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.15;
    color: var(--smp-navy);
}

.smp-flag-detail-hero__star {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--r-sm, 6px);
    font-size: 20px;
    color: var(--fg-on-paper-dim);
    cursor: pointer;
}

.smp-flag-detail-hero__star:hover,
.smp-flag-detail-hero__star:focus-visible {
    color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.06);
    outline: none;
}

.smp-flag-detail-hero__star.smp-inventory-card__favourite--active {
    color: var(--smp-navy);
}

.smp-flag-detail-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 9px;
}

.smp-flag-detail-hero__stock {
    flex: 0 0 auto;
    text-align: right;
}

.smp-flag-detail-hero__count {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    color: var(--smp-navy);
}

.smp-flag-detail-hero__count-label {
    display: block;
    font-size: 11px;
    color: var(--fg-on-paper-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* ---- Stats row: Coverage / Reorder status / Demand variability ---- */
.smp-flag-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4, 16px);
    margin: 0 0 var(--space-5, 20px);
    padding: 0;
}

.smp-flag-detail-stats__item {
    background: rgba(5, 37, 64, 0.03);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 12px);
    padding: 16px 18px;
}

.smp-flag-detail-stats__item .smp-eyebrow {
    display: block;
    margin-bottom: 10px;
}

.smp-flag-detail-stats__value {
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--smp-navy);
}

.smp-flag-detail-stats__unit {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-on-paper-muted);
}

/* ---- Demand history chart ---- */
.smp-flag-detail-chart {
    margin: 0;
}

/* Fixed-height plot area, separate from the x-axis row below it — keeps the
   reference-line/bar `bottom`/`height` percentage math scoped to just the
   bars, and reserves real layout space for the x-axis instead of letting it
   overflow into the row below (a real bug on the pre-redesign markup, this
   structure avoids reintroducing it). */
.smp-flag-detail-chart__plot {
    position: relative;
    height: 150px;
}

.smp-flag-detail-chart__bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100%;
}

.smp-flag-detail-chart__bar-wrap {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.smp-flag-detail-chart__bar {
    width: 100%;
    max-width: 26px;
    min-height: 2px;
    margin: 0 auto;
    background: var(--smp-navy-200);
    border-radius: 4px 4px 0 0;
    transition: opacity 0.15s;
}

.smp-flag-detail-chart__bar:hover {
    opacity: 0.75;
}

.smp-flag-detail-chart__reference-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed var(--fg-on-paper-dim);
    pointer-events: none;
}

.smp-flag-detail-chart__reference-label {
    position: absolute;
    right: 0;
    transform: translateY(-100%);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-on-paper-muted);
    background: var(--smp-white);
    padding: 0 4px 2px;
    white-space: nowrap;
}

.smp-flag-detail-chart__x-axis {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.smp-flag-detail-chart__x-label {
    flex: 1 1 0;
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--fg-on-paper-dim);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Stock adjustment log: chip filters, date range, rows, pager ---- */
.smp-flag-detail-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
    margin-bottom: var(--space-4, 16px);
}

.smp-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.smp-chip-filter {
    padding: 6px 13px;
    border-radius: var(--r-pill, 999px);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-body);
    border: 1px solid var(--bg-on-paper-rule);
    background: var(--smp-white);
    color: var(--smp-navy);
    cursor: pointer;
}

.smp-chip-filter--active {
    border-color: var(--smp-navy);
    background: var(--smp-navy);
    color: var(--smp-white);
}

.smp-flag-detail-filters__dates {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.smp-flag-detail-filters__dates label {
    font-size: 12px;
    color: var(--fg-on-paper-muted);
}

.smp-flag-detail-filters__dates input[type="date"] {
    min-height: 0;
    padding: 5px 8px;
    font-size: 12px;
}

.smp-flag-detail-ledger-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    overflow: hidden;
}

.smp-flag-detail-ledger-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-on-paper-rule);
}

.smp-flag-detail-ledger-list .smp-flag-detail-ledger-row:last-child {
    border-bottom: none;
}

.smp-flag-detail-ledger-row__date {
    flex: 0 0 auto;
    width: 84px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-on-paper-dim);
}

.smp-flag-detail-ledger-row__note {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    color: var(--fg-on-paper);
}

.smp-flag-detail-ledger-row__delta {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 13px;
}

.smp-flag-detail-ledger-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.smp-flag-detail-ledger-footer__range {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-on-paper-dim);
}

.smp-flag-detail-ledger-footer__pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smp-flag-detail-ledger-footer__page {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-on-paper-muted);
}

.smp-pager-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm, 9px);
    border: 1px solid var(--bg-on-paper-rule);
    background: var(--smp-white);
    color: var(--smp-navy);
    display: grid;
    place-items: center;
}

.smp-pager-btn:hover {
    background: rgba(5, 37, 64, 0.06);
}

.smp-pager-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Demand-variability pills — same 4-tier color vocabulary as the
   reorder-status pills above (teal/yellow/orange/grey), reused for a
   different metric on this page only. ---- */
.smp-pill--variability-stable {
    background: rgba(0, 176, 188, 0.12);
    color: var(--smp-teal-700);
}

.smp-pill--variability-variable {
    background: rgba(255, 217, 0, 0.32);
    color: #7a6200;
}

.smp-pill--variability-highly-variable {
    background: rgba(255, 89, 0, 0.14);
    color: var(--smp-orange-700);
}

.smp-pill--variability-insufficient {
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-dim);
}

@media (max-width: 640px) {
    .smp-area-inventory .smp-flag-detail-hero {
        padding: 16px;
    }

    .smp-flag-detail-hero__stock {
        width: 100%;
        text-align: left;
    }

    .smp-flag-detail-stats {
        grid-template-columns: 1fr;
    }

    .smp-flag-detail-filters__dates {
        margin-left: 0;
        width: 100%;
    }

    .smp-flag-detail-ledger-row {
        flex-wrap: wrap;
    }

    .smp-flag-detail-ledger-row__note {
        flex-basis: 100%;
        order: 3;
    }

    .smp-flag-detail-ledger-footer {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================================================
   ORDERS HOME + OGPS PLANNER — Manager Dashboard visual redesign, chunk 6/9
   (copy-mockup-then-convert method — see
   assets/design-reference/manager-dashboard-v5/README.md, markup lines
   682-808 for Orders Home; 810-1016 for the Order Plan visual language the
   embedded planner chrome borrows from). Covers manager/orders-list.twig
   (view == 'list' only), manager/partials/ogps-notice-hub.twig, and
   manager/partials/ogps-planner.twig's outer chrome. ogps-plan-output.twig
   itself has ZERO markup changes — AC1 safety-critical, see that file's own
   doc comment — only the token/color overrides below, which apply
   identically whether the table came from the server-rendered Twig include
   or smp-ogps-planner.js's renderPlanOutput() (both emit the same class
   names). Scoped to .smp-area-orders, same convention as chunks 4/5.

   The reveal-5 and status filter below followed "the approved spec revision
   (issue #164, commit 8821419)" rather than the mockup's own
   two-always-visible-sections-with-a-period-filter layout. That commit is not
   on main; the bucket toggle it also brought is deleted (#370). See
   specManagerDashboard → "Corrections to the record".
   ========================================================================== */

.smp-area-orders .smp-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-caption, 12px);
    letter-spacing: var(--eyebrow-tracking, 0.12em);
    text-transform: uppercase;
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-empty-state {
    text-align: center;
    padding: 24px;
    color: var(--fg-on-paper-muted);
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
}

/* ---- Page header ---- */
.smp-orders-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5, 20px);
    flex-wrap: wrap;
    margin-bottom: var(--space-6, 26px);
}

.smp-orders-header__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 4.4vw, 38px);
    line-height: 1;
    color: var(--smp-navy);
    margin: 9px 0 0;
}

.smp-orders-header__lede {
    color: var(--fg-on-paper-muted);
    margin-top: var(--space-2, 9px);
    max-width: 560px;
    font-size: var(--t-body-sm, 14px);
}

/* ==========================================================================
   STOCK SUGGESTIONS — ogps-notice-hub.twig's "Needs attention" section
   (mockup lines 699-736)
   ========================================================================== */

.smp-suggestions {
    margin-bottom: var(--space-6, 28px);
}

.smp-suggestions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: var(--space-3, 12px);
}

.smp-suggestions__hint {
    font-size: 12px;
    color: var(--fg-on-paper-dim);
    margin-top: 3px;
}

.smp-suggestions__empty {
    text-align: center;
    padding: 24px;
    color: var(--fg-on-paper-muted);
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
}

.smp-suggestions__empty-icon {
    width: 24px;
    height: 24px;
    color: var(--smp-teal);
}

.smp-suggestions__empty p {
    margin: 8px 0 0;
}

.smp-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.smp-suggestion-card {
    display: flex;
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    overflow: hidden;
}

.smp-suggestion-card__stripe {
    flex: 0 0 auto;
    width: 4px;
}

.smp-suggestion-card--warning .smp-suggestion-card__stripe {
    background: #ffd900;
}

.smp-suggestion-card--overdue .smp-suggestion-card__stripe {
    background: var(--smp-orange);
}

.smp-suggestion-card--info .smp-suggestion-card__stripe {
    background: rgba(5, 37, 64, 0.16);
}

.smp-suggestion-card__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px 12px 12px;
}

.smp-suggestion-card__thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 31px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--bg-on-paper-rule);
}

.smp-suggestion-card__thumb--placeholder {
    display: grid;
    place-items: center;
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-muted);
}

.smp-suggestion-card__thumb--placeholder .smp-icon {
    width: 18px;
    height: 18px;
}

.smp-suggestion-card__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--smp-navy);
}

.smp-suggestion-card__stock {
    font-size: 12px;
    color: var(--fg-on-paper-muted);
}

.smp-suggestion-card__stock strong {
    color: var(--smp-navy);
}

.smp-suggestion-card__order-by {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-on-paper-muted);
}

.smp-suggestion-card__order-by--overdue {
    color: var(--smp-orange-700);
}

.smp-suggestion-card__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 16px 8px 12px;
    border-top: 1px solid var(--bg-on-paper-rule);
    background: rgba(5, 37, 64, 0.02);
    font-size: 12px;
    color: var(--fg-on-paper-muted);
}

.smp-suggestion-card__foot p {
    margin: 0;
}

.smp-suggestion-card__foot a {
    font-weight: 700;
    color: var(--smp-navy);
}

/* ---- Favourite star: navy when active, not the legacy amber (matches
   chunk 3/4/5 precedent: .smp-area-reports--form/.smp-area-inventory
   .smp-star-btn--active { color: var(--smp-navy); }) ---- */
.smp-area-orders .smp-star-btn {
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-star-btn:hover,
.smp-area-orders .smp-star-btn:focus-visible {
    color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.06);
}

.smp-area-orders .smp-star-btn--active {
    color: var(--smp-navy);
}

/* ---- Order-lifecycle notices ("Order updates") — light token pass only;
   structure/logic untouched (still tested, OgpsPlannerTest.php AC4). Full
   removal per issue #164 is a deferred follow-up (see OrderController::
   renderList()'s doc comment). ---- */
.smp-area-orders .smp-notice-hub__section {
    margin-bottom: var(--space-5, 20px);
}

.smp-area-orders .smp-notice-hub__section-title {
    font-family: var(--font-mono);
    font-size: var(--t-caption, 12px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-on-paper-muted);
    margin: 0 0 10px;
}

.smp-area-orders .smp-notice-hub__item {
    border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0;
    background: rgba(5, 37, 64, 0.03);
    border-left-width: 4px;
    color: var(--fg-on-paper);
}

.smp-area-orders .smp-notice-hub__item--lifecycle {
    border-left-color: var(--smp-teal);
    background: rgba(0, 176, 188, 0.06);
}

.smp-area-orders .smp-notice-hub__rejection-reason {
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-notice-hub__dismiss {
    border-radius: var(--r-pill, 999px);
    border-color: var(--bg-on-paper-rule);
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-notice-hub__dismiss:hover {
    color: var(--smp-navy);
    opacity: 1;
}

/* ==========================================================================
   OGPS PLANNER — outer chrome only (mode tabs, date/budget inputs,
   distribution list, Run Plan buttons). Ids/classes smp-ogps-planner.js
   depends on are untouched — see ogps-planner.twig's own doc comment.
   ========================================================================== */

.smp-area-orders .smp-ogps-planner {
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-lg, 22px);
    background: var(--smp-white);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6, 28px);
    overflow: hidden;
}

.smp-area-orders .smp-ogps-planner__header {
    padding: 16px 20px;
    background: rgba(5, 37, 64, 0.03);
    border-bottom: 1px solid var(--bg-on-paper-rule);
}

.smp-area-orders .smp-ogps-planner__header-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--smp-navy);
    margin: 0;
}

.smp-area-orders .smp-ogps-planner__header-title .smp-icon {
    color: var(--smp-orange);
}

.smp-area-orders .smp-ogps-planner__toggle-icon {
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-ogps-planner__body {
    padding: 20px;
}

/* Neutralize the older "SEGMENTED TAB CONTROL" iOS-pill styling (this file's
   MANAGER PORTAL — MODERN REDESIGN section) for the planner's mode tabs —
   same specificity (0,2,0), later source order wins (this file's established
   convention, see chunks 4/5's own notes on this exact mechanism). */
.smp-area-orders .smp-planner-tabs[role="tablist"] {
    display: flex;
    background: none;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--bg-on-paper-rule);
    margin-bottom: var(--space-4, 16px);
}

.smp-area-orders .smp-tab {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px 4px;
    margin-right: var(--space-5, 22px);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-tab:hover {
    background: transparent;
    color: var(--smp-navy);
}

.smp-area-orders .smp-tab--active,
.smp-area-orders .smp-tab[aria-selected="true"] {
    background: transparent;
    box-shadow: none;
    color: var(--smp-navy);
    border-bottom-color: var(--smp-navy);
}

.smp-area-orders .smp-planner-panel label {
    color: var(--fg-on-paper-muted);
    font-family: var(--font-body);
}

.smp-area-orders .smp-planner-panel input[type="date"],
.smp-area-orders .smp-planner-panel input[type="number"] {
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-sm, 10px);
    color: var(--fg-on-paper);
}

.smp-area-orders .smp-muted {
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-dist-list {
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-sm, 10px);
}

.smp-area-orders .smp-dist-row {
    border-bottom-color: var(--bg-on-paper-rule);
}

.smp-area-orders .smp-planner-run-sticky {
    background: var(--smp-white);
    border-top: 1px solid var(--bg-on-paper-rule);
}

/* ==========================================================================
   PLAN OUTPUT — visual-token-only pass over ogps-plan-output.twig. The
   column set, order, and state-to-rendering logic (AC1) are unchanged; only
   colors/spacing are re-themed here, and via the pre-existing class names
   (.smp-plan-line--*, .smp-badge--state-*, .smp-min-control*, .smp-plan-risk)
   that BOTH the Twig include and smp-ogps-planner.js's renderPlanOutput()
   emit identically, so this applies to plan output produced either way.
   ========================================================================== */

.smp-area-orders .smp-plan-not-achievable {
    background: rgba(255, 217, 0, 0.18);
    border-left-color: #ffd900;
    color: #7a6200;
    border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
}

.smp-area-orders .smp-plan-line--insufficient_data {
    background: rgba(255, 217, 0, 0.1);
}

.smp-area-orders .smp-plan-line--provisional {
    background: rgba(5, 37, 64, 0.04);
}

.smp-area-orders .smp-plan-line--under_funded {
    background: rgba(255, 89, 0, 0.06);
}

.smp-area-orders .smp-plan-line--dormant {
    background: rgba(5, 37, 64, 0.03);
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-badge--state-normal {
    background: rgba(0, 176, 188, 0.12);
    color: var(--smp-teal-700);
}

.smp-area-orders .smp-badge--state-provisional {
    background: rgba(5, 37, 64, 0.08);
    color: var(--fg-on-paper);
}

.smp-area-orders .smp-badge--state-insufficient_data {
    background: rgba(255, 217, 0, 0.32);
    color: #7a6200;
}

.smp-area-orders .smp-badge--state-under_funded {
    background: rgba(255, 89, 0, 0.14);
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-badge--state-dormant {
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-plan-risk {
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-min-control__state-chip--unset {
    background: rgba(5, 37, 64, 0.05);
    border-color: var(--bg-on-paper-rule);
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-min-control__state-chip--optout {
    background: rgba(255, 217, 0, 0.32);
    border-color: #ffd900;
    color: #7a6200;
}

.smp-area-orders .smp-min-control__state-chip--floor {
    background: rgba(0, 176, 188, 0.12);
    border-color: var(--smp-teal);
    color: var(--smp-teal-700);
}

.smp-area-orders .smp-min-control__input {
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-sm, 10px);
}

/* Order statuses — literal mockup colors (orderStatusMeta), re-themed over
   the generic .smp-badge--{status} rules defined near the top of this file. */
.smp-area-orders .smp-badge--draft {
    background: rgba(255, 217, 0, 0.32);
    color: #7a6200;
}

.smp-area-orders .smp-badge--submitted {
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-badge--approved,
.smp-area-orders .smp-badge--shipped,
.smp-area-orders .smp-badge--received {
    background: rgba(0, 176, 188, 0.12);
    color: var(--smp-teal-700);
}

.smp-area-orders .smp-badge--rejected {
    background: rgba(255, 89, 0, 0.14);
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-badge--cancelled {
    background: rgba(5, 37, 64, 0.06);
    color: var(--fg-on-paper-dim);
}

/* ==========================================================================
   ORDERS LIST — filter bar, order cards, reveal-5

   The .smp-orders-subnav / .smp-orders-tab rules that opened this section
   styled the On-going/Completed bucket toggle, deleted with its markup in
   #370 — it had never rendered a selected tab, because no controller ever
   supplied the `bucket` it compared against.
   ========================================================================== */

.smp-orders-list__filters {
    margin-bottom: var(--space-4, 16px);
}

.smp-orders-list__search {
    width: min(260px, 100%);
}

.smp-order-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.smp-order-card {
    display: flex;
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    overflow: hidden;
}

/* [hidden]-vs-author-display cascade fix (recurring gotcha in this file —
   see .claude/agent-memory/wp-plugin-developer/feedback_css_hidden_specificity.md
   and project_orders_redesign_chunk6.md): an author `display: flex` beats the
   UA [hidden] default regardless of specificity, so the "Show 5 more" reveal
   JS setting card.hidden = true needs this explicit override to actually hide. */
.smp-order-card[hidden] {
    display: none;
}

.smp-order-card__stripe {
    flex: 0 0 auto;
    width: 4px;
}

.smp-order-card--draft .smp-order-card__stripe {
    background: #ffd900;
}

.smp-order-card--submitted .smp-order-card__stripe {
    background: rgba(5, 37, 64, 0.16);
}

.smp-order-card--approved .smp-order-card__stripe,
.smp-order-card--shipped .smp-order-card__stripe,
.smp-order-card--received .smp-order-card__stripe {
    background: var(--smp-teal);
}

.smp-order-card--rejected .smp-order-card__stripe {
    background: var(--smp-orange);
}

.smp-order-card--cancelled .smp-order-card__stripe {
    background: rgba(5, 37, 64, 0.1);
}

/* Rejected: urgency is spatial too, not color-only (WCAG 1.4.1) — mirrors
   this branch's own established "inset accent on the row" pattern. */
.smp-order-card--rejected {
    box-shadow: inset 3px 0 0 rgba(255, 89, 0, 0.35);
}

.smp-order-card__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 16px 13px 12px;
}

.smp-order-card__id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-on-paper-dim);
}

.smp-order-card__summary {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--fg-on-paper-muted);
}

.smp-order-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.smp-order-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-3, 12px);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .smp-order-card__main {
        gap: 10px;
    }

    .smp-order-card__actions {
        margin-left: 0;
        width: 100%;
    }

    .smp-order-card__actions .smp-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .smp-suggestion-card__main {
        gap: 8px;
    }

    .smp-suggestion-card__order-by {
        margin-left: 0;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   PLACE ORDER + ORDER DETAIL — Manager Dashboard visual redesign, chunk 7/9
   (copy-mockup-then-convert method — see
   assets/design-reference/manager-dashboard-v5/README.md, markup lines
   1018-1266 for "Place Order"; 1290-1335 for "Order View", a modal there —
   rendered here as orders-list.twig's own view=detail page, restyled in
   place per this chunk's brief, not converted into a JS modal). Covers
   manager/orders-form.twig (create + edit) and manager/orders-list.twig's
   view=='detail' branch only (view=='list' is chunk 6's, untouched here).
   Scoped to .smp-area-orders, same convention as chunk 6 — later source
   order wins at equal specificity over the pre-redesign "MANAGER PORTAL —
   MODERN REDESIGN" rules for these same bare class names.
   ========================================================================== */

/* ---- Back link: icon + text (mirrors .smp-area-inventory's own restatement
   of the same unscoped .smp-manager-portal .smp-back-link a rule).
   Real bug found via screenshot: the pre-redesign bare .smp-back-link rule
   (this file, ~line 484) sets display:inline-block and nothing later resets
   it, so on this page — unlike item-detail.twig, where the next sibling is
   always a block-level .smp-card — the back link's very next sibling is
   sometimes an inline .smp-eyebrow span (Order Detail's header, and the
   Place Order page when there are no validation errors to show first),
   which then rendered on the same line as "Back to Orders" instead of below
   it. Forcing block here fixes it without touching the shared base rule. ---- */
.smp-area-orders .smp-back-link {
    display: block;
}

.smp-area-orders .smp-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--smp-navy);
    font-weight: 700;
    font-size: 14px;
}

.smp-area-orders .smp-back-link a:hover {
    color: var(--smp-teal-700);
}

/* ---- Notices: icon + text flex layout, SMP token colors. Generic — applies
   to the Place Order page's shipping notices, the Standard-lock notice, and
   the Order Detail page's submit-failed / Admin-note notices alike. ---- */
.smp-area-orders .smp-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--r-sm, 10px);
    border: 1px solid transparent;
    border-left-width: 4px;
    padding: 12px 16px;
}

.smp-area-orders .smp-notice .smp-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.smp-area-orders .smp-notice--warning {
    background: rgba(255, 89, 0, 0.08);
    border-color: rgba(255, 89, 0, 0.25);
    border-left-color: var(--smp-orange);
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-notice--info {
    background: rgba(0, 176, 188, 0.08);
    border-color: rgba(0, 176, 188, 0.28);
    border-left-color: var(--smp-teal);
    color: var(--smp-navy);
}

.smp-area-orders .smp-notice--info .smp-icon {
    color: var(--smp-teal-700);
}

.smp-area-orders .smp-notice--error {
    background: rgba(255, 89, 0, 0.08);
    border-color: rgba(255, 89, 0, 0.25);
    border-left-color: var(--smp-orange);
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-notice--error ul {
    margin: 0;
    padding-left: 18px;
}

/* ---- Delivery method: two radio "cards" (mockup lines 1043-1085) ---- */
.smp-area-orders .smp-orders-form__shipping {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: var(--space-6, 24px) 0 0;
}

.smp-area-orders .smp-orders-form__shipping legend {
    padding: 0 0 10px;
    margin: 0;
}

.smp-orders-form__methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.smp-area-orders .smp-orders-form__method-label {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 15px 16px;
    border-radius: var(--r-md, 14px);
    border: 1.5px solid var(--bg-on-paper-rule);
    background: var(--smp-white);
    min-height: 0;
    cursor: pointer;
}

.smp-area-orders .smp-orders-form__method-label:has(.smp-orders-form__method-radio:checked) {
    border-color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.05);
    color: inherit;
}

.smp-area-orders .smp-orders-form__method-label:has(.smp-orders-form__method-radio:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
    background: rgba(5, 37, 64, 0.02);
}

.smp-orders-form__method-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.smp-orders-form__method-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 999px;
    border: 2px solid var(--fg-on-paper-dim);
    background: transparent;
}

.smp-area-orders .smp-orders-form__method-label:has(.smp-orders-form__method-radio:checked) .smp-orders-form__method-dot {
    border-color: var(--smp-navy);
    background: var(--smp-navy);
    box-shadow: inset 0 0 0 3px var(--smp-white);
}

.smp-orders-form__method-main {
    flex: 1;
    min-width: 0;
}

.smp-orders-form__method-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.smp-orders-form__method-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--smp-navy);
}

.smp-area-orders .smp-orders-form__method-price {
    margin-left: auto;
    padding-left: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--smp-navy);
}

.smp-area-orders .smp-orders-form__method-price--locked {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--smp-orange-700);
    white-space: normal;
}

.smp-orders-form__method-note {
    display: block;
    font-size: 12px;
    color: var(--fg-on-paper-muted);
    margin-top: 5px;
}

.smp-area-orders .smp-orders-form__standard-lock-notice {
    margin-top: 12px;
}

.smp-area-orders .smp-orders-form__shipping-note {
    color: var(--fg-on-paper-muted);
    margin-top: 10px;
}

/* ---- Toolbar: search bar + Favourites-on-top (reuses .smp-flag-search-bar /
   .smp-fav-on-top-btn, the same bare classes report-form.twig restyles under
   its own .smp-area-reports--form scope). ---- */
.smp-area-orders .smp-orders-form__lines {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: var(--space-6, 24px) 0 0;
}

.smp-area-orders .smp-orders-form__lines legend {
    padding: 0 0 4px;
    margin: 0;
}

.smp-area-orders .smp-orders-form__lines > p.smp-text-sm {
    color: var(--fg-on-paper-muted);
    margin: 0 0 12px;
}

.smp-area-orders .smp-flag-search-bar {
    align-items: center;
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-pill, 999px);
    padding: 4px 14px;
    margin-bottom: 14px;
}

.smp-area-orders .smp-flag-search-bar input {
    border: none;
    background: transparent;
    padding: 8px 0;
}

.smp-area-orders .smp-fav-on-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--r-sm, 12px);
}

.smp-area-orders .smp-fav-on-top-btn[aria-pressed="true"] {
    background: rgba(5, 37, 64, 0.06);
    border-color: var(--smp-navy);
    color: var(--smp-navy);
}

/* ---- Sticky order-total bar ---- */
.smp-area-orders .smp-order-bar {
    top: var(--space-3, 12px);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    background: rgba(252, 250, 241, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--shadow-md);
    padding: 12px 18px;
    font-family: var(--font-mono);
}

.smp-area-orders .smp-order-bar__counts {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-bar__breakdown {
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-order-bar__breakdown strong {
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-bar__estimate {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-bar.has-error {
    background: rgba(255, 89, 0, 0.08);
    border-color: var(--smp-orange);
    box-shadow: none;
}

/* ---- Flag rows: address-book list (thumbnail, name/star/category,
   recommended-qty badge, order-qty stepper). No stock/exp-demand/pipeline/
   risk/runs-out/min-floor columns — see this chunk's own scope-decision doc
   comment at the top of orders-form.twig. ---- */
.smp-area-orders .smp-flag-row {
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
}

.smp-area-orders .smp-flag-row--selected {
    border-color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.035);
}

.smp-area-orders .smp-flag-row__image {
    width: 46px;
    height: 31px;
    border-radius: var(--r-sm, 5px);
    border: 1px solid var(--bg-on-paper-rule);
    object-fit: cover;
    flex: 0 0 auto;
}

.smp-area-orders .smp-flag-row__image--placeholder {
    background: rgba(5, 37, 64, 0.06);
}

.smp-area-orders .smp-flag-row__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--smp-navy);
}

.smp-area-orders .smp-star-btn--active {
    color: var(--smp-navy);
}

.smp-area-orders .smp-flag-row__category {
    color: var(--fg-on-paper-muted);
    background: var(--smp-white);
    border-color: var(--bg-on-paper-rule);
    border-radius: var(--r-pill, 999px);
}

.smp-area-orders .smp-flag-row__body {
    display: flex;
    align-items: center;
    gap: 14px;
}

.smp-area-orders .smp-flag-row__recommended {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--smp-navy);
    background: rgba(5, 37, 64, 0.06);
    border-radius: var(--r-pill, 999px);
    padding: 4px 11px;
    white-space: nowrap;
}

.smp-area-orders .smp-flag-row__recommended strong {
    margin-left: 4px;
}

/* ---- Order-qty stepper: navy-bordered rounded control (first restyle of
   the shared .smp-stepper base — report-form.twig still uses the plain
   pre-redesign look; scoped here so that page is unaffected). ---- */
.smp-area-orders .smp-stepper {
    border: 1.5px solid var(--bg-on-paper-rule);
    border-radius: var(--r-sm, 10px);
    overflow: hidden;
}

.smp-area-orders .smp-stepper__btn {
    width: 34px;
    height: 34px;
    border: none;
    background: var(--smp-white);
    color: var(--smp-navy);
    font-size: 16px;
}

.smp-area-orders .smp-stepper__btn:hover {
    background: rgba(5, 37, 64, 0.06);
}

.smp-area-orders .smp-stepper__btn--dec {
    border-radius: 0;
    border-right: 1.5px solid var(--bg-on-paper-rule);
}

.smp-area-orders .smp-stepper__btn--inc {
    border-radius: 0;
    border-left: 1.5px solid var(--bg-on-paper-rule);
}

.smp-area-orders .smp-stepper__input {
    width: 52px;
    height: 34px;
    border: none;
    border-left: 1.5px solid var(--bg-on-paper-rule);
    border-right: 1.5px solid var(--bg-on-paper-rule);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--smp-navy);
}

/* ---- Submit / Save Draft / Cancel row ---- */
.smp-area-orders .smp-orders-form__submit {
    border: none;
    padding-top: var(--space-5, 20px);
    margin-top: var(--space-3, 12px);
    gap: 10px;
}

.smp-area-orders .smp-orders-form__submit .smp-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.smp-area-orders .smp-orders-form__cancel {
    color: var(--fg-on-paper-muted);
}

@media (max-width: 640px) {
    .smp-orders-form__methods {
        grid-template-columns: 1fr;
    }

    /* Real bug found via a 390px screenshot: the search input already
       shrinks (base .smp-flag-search-bar input rule), but "Favourites on
       top" doesn't, and its intrinsic content width overflowed the
       viewport (visible horizontal scrollbar, button clipped at the
       right edge). Wrapping it to its own full-width row fixes it. */
    .smp-area-orders .smp-flag-search-bar {
        flex-wrap: wrap;
        border-radius: var(--r-md, 14px);
    }

    .smp-area-orders .smp-fav-on-top-btn {
        flex: 1 1 100%;
        justify-content: center;
        margin: 6px 0 2px;
    }

    /* Real bug found via the same screenshot: the pre-redesign mobile rule
       for this bare class (.smp-orders-form .smp-flag-row, this file's own
       "ORDER FORM" section) sets flex-direction:column + a full-width,
       3:2-aspect image — equal (0,2,0) specificity to this rule, so at
       this same breakpoint the two rules' non-overlapping properties both
       applied and fought each other (this rule's fixed 46×31 thumbnail
       size "won" the width/height tug-of-war, but flex-direction:column +
       align-items:stretch from the old rule was still in effect, leaving
       the small thumbnail oddly centered above a full-width name/stepper
       stack instead of a normal row). Re-declaring flex-direction:row
       (plus wrap) here — later in source, same specificity — fully
       overrides the old rule's column layout for this page. */
    .smp-area-orders .smp-flag-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .smp-area-orders .smp-flag-row__image,
    .smp-area-orders .smp-flag-row__image--placeholder {
        order: 0;
        width: 40px;
        height: 27px;
        max-height: none;
        aspect-ratio: auto;
        flex: 0 0 auto;
    }

    .smp-area-orders .smp-flag-row__header {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .smp-area-orders .smp-flag-row__body {
        order: 2;
        width: 100%;
        justify-content: space-between;
        margin-top: 8px;
    }
}

/* ==========================================================================
   ORDER DETAIL VIEW — orders-list.twig, view == 'detail'. Re-themes the
   pre-redesign, unscoped rules (this file's own "ORDER DETAIL VIEW" section
   near the top) with SMP tokens; DOM/classes are unchanged except the new
   .smp-card wrap around Items (see that section's own doc comment) and a
   couple of icon wrapper elements, so every one of this view's existing
   features (stepper, terminal banner + Clone-to-Draft, Admin note, 3-line
   cost breakdown, Cancel/Delete/Acknowledge dialogs) keeps working exactly
   as before.
   ========================================================================== */

.smp-orders-detail {
    max-width: 640px;
}

.smp-area-orders .smp-order-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 20px;
}

.smp-area-orders .smp-order-head__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 4vw, 30px);
    line-height: 1.1;
    color: var(--smp-navy);
    margin: 0;
}

/* ---- Progress stepper ---- */
.smp-area-orders .smp-order-stepper {
    margin-bottom: 22px;
}

.smp-area-orders .smp-order-stepper .smp-stepper__node::before {
    background: var(--bg-on-paper-rule);
}

.smp-area-orders .smp-order-stepper .smp-stepper__node--completed::before,
.smp-area-orders .smp-order-stepper .smp-stepper__node--current::before {
    background: var(--smp-teal);
}

.smp-area-orders .smp-order-stepper .smp-stepper__dot {
    border-color: var(--bg-on-paper-rule);
    background: var(--smp-white);
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-order-stepper .smp-stepper__node--completed .smp-stepper__dot {
    background: var(--smp-teal);
    border-color: var(--smp-teal);
    color: var(--smp-white);
}

.smp-area-orders .smp-order-stepper .smp-stepper__node--current .smp-stepper__dot {
    border-color: var(--smp-navy);
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-stepper .smp-stepper__label {
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-order-stepper .smp-stepper__node--current .smp-stepper__label {
    color: var(--smp-navy);
    font-weight: 700;
}

/* ---- Terminal banner (rejected / cancelled) — spatial + color urgency
   (WCAG 1.4.1), same convention as chunk 6's rejected order-card stripe. ---- */
.smp-area-orders .smp-order-terminal {
    border-radius: var(--r-md, 14px);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.smp-area-orders .smp-order-terminal--rejected {
    background: rgba(255, 89, 0, 0.08);
    border: 1px solid rgba(255, 89, 0, 0.28);
    box-shadow: inset 3px 0 0 rgba(255, 89, 0, 0.45);
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-order-terminal--cancelled {
    background: rgba(5, 37, 64, 0.045);
    border: 1px solid var(--bg-on-paper-rule);
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-order-terminal__inner {
    align-items: center;
    gap: 12px;
}

.smp-area-orders .smp-order-terminal__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.smp-area-orders .smp-order-terminal--rejected .smp-order-terminal__icon {
    color: var(--smp-orange);
}

.smp-area-orders .smp-order-terminal--cancelled .smp-order-terminal__icon {
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-order-terminal__body {
    flex: 1;
    min-width: 0;
}

.smp-area-orders .smp-order-terminal__status {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-terminal__reason {
    color: var(--fg-on-paper-muted);
}

/* ---- Summary bar ---- */
.smp-area-orders .smp-order-summary-bar {
    background: var(--smp-white);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-md, 14px);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
}

.smp-area-orders .smp-order-summary-bar__detail {
    color: var(--fg-on-paper-muted);
}

.smp-area-orders .smp-order-summary-bar__breakdown-item strong {
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-summary-bar__total {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-summary-bar__est {
    color: var(--fg-on-paper-muted);
    font-weight: 500;
    font-family: var(--font-body);
}

/* ---- Action strips ---- */
.smp-area-orders .smp-order-actions {
    margin-bottom: 20px;
}

/* ---- Items card (.smp-card restatement, same pattern as
   .smp-area-inventory / .smp-area-reports--form's own restatements —
   .smp-card is not a global rule in this file, see those sections' own
   doc comments). ---- */
.smp-area-orders .smp-card {
    margin: 0 0 var(--space-5, 20px);
    padding: 0;
    min-width: 0;
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-lg, 16px);
    background: var(--smp-white);
    overflow: hidden;
}

.smp-area-orders .smp-card__header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 13px 18px;
    background: rgba(5, 37, 64, 0.04);
    border-bottom: 1px solid var(--bg-on-paper-rule);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smp-navy);
}

.smp-area-orders .smp-card__header .smp-icon {
    color: var(--smp-navy);
    text-transform: none;
}

.smp-area-orders .smp-card__body {
    padding: 16px;
}

.smp-area-orders .smp-order-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smp-area-orders .smp-order-item {
    background: var(--smp-paper-050);
    border: 1px solid var(--bg-on-paper-rule);
    border-radius: var(--r-sm, 10px);
}

.smp-area-orders .smp-order-item__thumb {
    border-radius: var(--r-sm, 6px);
    border: 1px solid var(--bg-on-paper-rule);
}

.smp-area-orders .smp-order-item__thumb--placeholder {
    background: rgba(5, 37, 64, 0.06);
    border: none;
}

.smp-area-orders .smp-order-item__name {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-item__units {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--smp-navy);
}

.smp-area-orders .smp-order-item__unitlabel {
    color: var(--fg-on-paper-dim);
}

.smp-area-orders .smp-order-item__variance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--smp-orange-700);
}

.smp-area-orders .smp-order-item__variance .smp-icon {
    width: 0.85em;
    height: 0.85em;
}

.smp-area-orders .smp-order-item__variance--admin {
    color: var(--smp-orange-700);
}

/* ---- Low-priority metadata footer ---- */
.smp-area-orders .smp-order-meta-footer {
    color: var(--fg-on-paper-muted);
}

/* ---- Sticky mobile action bar ---- */
.smp-area-orders .smp-order-actions-sticky {
    background: var(--smp-white);
    border-top: 1px solid var(--bg-on-paper-rule);
    box-shadow: 0 -10px 24px -14px rgba(5, 37, 64, 0.22);
}

@media (max-width: 640px) {
    .smp-area-orders .smp-order-head {
        margin-top: 2px;
    }
}

/* ==========================================================================
   TOAST — removed in #370 with manager/partials/toast.twig, the only thing
   that ever emitted .smp-manager-portal .smp-toast. The header here used to
   say it was "used from both Reports and Orders"; only orders-list.twig ever
   included it, and it never rendered on that page either, because no
   controller supplied `toast_message`. The v5 mock host's own #smp-toast is
   a different element on a different stylesheet (smp-dashboard-mock.css) and
   is untouched.
   ========================================================================== */

/* ==========================================================================
   CANCEL MODAL — dual-context note override, chunk 8/9. #cancel-dialog-desc
   now carries the mockup's own cancelRsvpNote text (JS-swapped per
   data-cancel-kind — see cancel-occurrence-modal.twig / smp-reports-
   common.js), not a generic red warning — the mockup styles that line
   `smp-body-sm` / `color: var(--fg-on-paper-dim)` (muted grey, not bold/red).
   Scoped to #smp-cancel-modal specifically (NOT a change to the shared
   .smp-dialog-warning class) so report-form.twig's unrelated "Incomplete
   Report" dialog — which reuses .smp-dialog-warning for a genuine red
   warning — is untouched.
   ========================================================================== */
#smp-cancel-modal #cancel-dialog-desc {
    color: var(--fg-on-paper-dim, #6b7280);
    font-weight: 400;
    font-size: 13px;
}