/* * PostWatch Collections v4 * * Adaptive collection/detail behavior shared by the v3 workspaces, with the * Cases workspace as the reference implementation. This layer is visual and * structural only: it does not change permissions, records, routing, or saves. */ /* Shared, opt-in interaction contract. postwatch-collections-v4.js adds the data attribute only to known PostWatch v3 workspace roots. */ [data-pw-collection-v4] { --pw4-focus: #2f80d0; --pw4-motion: 180ms; --pw4-ease: cubic-bezier(.2, .8, .2, 1); min-width: 0; } [data-pw-collection-v4] :where(button, a, input, select, textarea) { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--pw4-focus) 16%, transparent); } [data-pw-collection-v4] :where(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--pw4-focus); outline-offset: 3px; } [data-pw-collection-v4] :where(button, [role="button"])[aria-busy="true"], [data-pw-collection-v4] :where(button, [role="button"]).is-busy { cursor: progress; } [data-pw-collection-v4] :where(button, input, select, textarea):disabled, [data-pw-collection-v4] [aria-disabled="true"] { cursor: not-allowed; opacity: .58; } [data-pw-collection-v4] :where(h1, h2, h3) { scroll-margin-top: 96px; text-wrap: balance; } .pwc4-control-label { display: block; color: var(--text-muted, #506176); font-size: 14px; font-weight: 750; letter-spacing: .015em; line-height: 1.35; } .pwc4-loading-announcement { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Inventory dialogs are mounted directly under , outside the inventory workspace that normally owns these variables. Give that isolated surface the same semantic tokens so it remains readable in either theme. */ .pwi3-dialog { --pwi3-bg: var(--pw-bg, var(--bg, #f4f7fa)); --pwi3-surface: var(--pw-surface, var(--surface, #ffffff)); --pwi3-surface-muted: var(--pw-surface-muted, var(--surface-2, #edf2f7)); --pwi3-text: var(--pw-text, var(--text, #132235)); --pwi3-muted: var(--pw-text-muted, var(--text-muted, #506176)); --pwi3-border: var(--pw-border, var(--border, #d7e0e8)); --pwi3-navy: var(--pw-navy-800, var(--primary, #123a62)); --pwi3-navy-deep: var(--pw-navy-950, #0b2037); --pwi3-gold: var(--pw-gold-600, #a87920); --pwi3-success: var(--pw-success, var(--ok, #157347)); --pwi3-warning: var(--pw-warning, var(--warn, #9a5b00)); --pwi3-danger: var(--pw-danger, var(--crit, #b42318)); color: var(--pwi3-text); } /* ── Cases: one coherent visual language ─────────────────────────────── */ .pwc3[data-pw-collection-v4] { --pwc3-on-surface: var(--pwc3-text); --pwc3-on-surface-strong: var(--pwc3-navy-deep); --pwc3-divider: var(--pwc3-border); width: 100%; max-width: 1600px; padding-inline: clamp(18px, 2.35vw, 40px); } .pwc3[data-pw-collection-v4] .pwc3-page-head { align-items: center; margin-bottom: 18px; } .pwc3[data-pw-collection-v4] .pwc3-page-head__copy { max-width: 820px; } .pwc3[data-pw-collection-v4] :where( .pwc3-page-head h1, .pwc3-summary strong, .pwc3-case-card__top strong, .pwc3-empty h2, .pwc3-empty h3, .pwc3-record-head__title h2, .pwc3-detail-section > header h3, .pwc3-prose h4, .pwc3-callout h4, .pwc3-fact > strong, .pwc3-activity strong, .pwc3-field > label, .pwc3-field > .pwc3-field__label, .pwc3-inline-confirm strong, .pwc3-check strong, .pwc3-review h3, .pwc3-notice strong, .pwc3-receipt strong ) { color: var(--pwc3-on-surface-strong); } .pwc3[data-pw-collection-v4] .pwc3-summary { margin-bottom: 18px; border-color: var(--pwc3-divider); background: var(--pwc3-divider); box-shadow: 0 8px 24px rgba(11, 32, 55, .045); } .pwc3[data-pw-collection-v4] .pwc3-summary > div { min-height: 66px; padding: 14px 18px; } .pwc3[data-pw-collection-v4] .pwc3-summary strong { min-width: 2ch; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(22px, 2vw, 28px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .pwc3[data-pw-collection-v4] .pwc3-summary span { color: var(--pwc3-muted); font-size: 15px; } .pwc3[data-pw-collection-v4] .pwc3-master, .pwc3[data-pw-collection-v4] .pwc3-record-head, .pwc3[data-pw-collection-v4] .pwc3-record-form, .pwc3[data-pw-collection-v4] .pwc3-detail-section, .pwc3[data-pw-collection-v4] .pwc3-facts { border-color: var(--pwc3-divider); box-shadow: 0 10px 32px rgba(11, 32, 55, .055); } .pwc3[data-pw-collection-v4] .pwc3-master { isolation: isolate; } .pwc3[data-pw-collection-v4] .pwc3-filters { gap: 10px; padding: 16px; background: color-mix(in srgb, var(--pwc3-surface-muted) 70%, var(--pwc3-surface)); } .pwc3[data-pw-collection-v4] .pwc3-filters > .pwc4-control-label { margin-bottom: -5px; } .pwc3[data-pw-collection-v4] .pwc3-filter-select { display: grid; gap: 5px; } .pwc3[data-pw-collection-v4] .pwc3-filter-select > .pwc4-control-label { color: var(--pwc3-muted); } .pwc3[data-pw-collection-v4] .pwc3-search, .pwc3[data-pw-collection-v4] .pwc3-filter-select select { border-color: color-mix(in srgb, var(--pwc3-border) 90%, var(--pwc3-text)); background-color: var(--pwc3-surface); color: var(--pwc3-on-surface); } .pwc3[data-pw-collection-v4] .pwc3-search:hover, .pwc3[data-pw-collection-v4] .pwc3-filter-select select:hover { border-color: color-mix(in srgb, var(--pwc3-navy) 55%, var(--pwc3-border)); } .pwc3[data-pw-collection-v4] .pwc3-result-count { min-height: 24px; display: flex; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; } .pwc3[data-pw-collection-v4] .pwc3-case-list { min-width: 0; } .pwc3[data-pw-collection-v4] .pwc3-case-card { position: relative; min-width: 0; min-height: 154px; outline-offset: -3px; } .pwc3[data-pw-collection-v4] .pwc3-case-card::after { content: ""; position: absolute; inset: auto 16px 13px auto; width: 7px; height: 7px; border-top: 2px solid var(--pwc3-steel); border-right: 2px solid var(--pwc3-steel); opacity: .72; transform: rotate(45deg); transition: transform var(--pw4-motion) var(--pw4-ease), opacity var(--pw4-motion) var(--pw4-ease); } .pwc3[data-pw-collection-v4] .pwc3-case-card:hover::after, .pwc3[data-pw-collection-v4] .pwc3-case-card:focus-visible::after { opacity: 1; transform: translateX(2px) rotate(45deg); } .pwc3[data-pw-collection-v4] .pwc3-case-card__top strong { font-size: 17px; line-height: 1.35; } .pwc3[data-pw-collection-v4] .pwc3-case-card__meta, .pwc3[data-pw-collection-v4] .pwc3-case-card__foot { font-size: 14px; } .pwc3[data-pw-collection-v4] .pwc3-pill { min-height: 30px; font-size: 14px; } .pwc3[data-pw-collection-v4] .pwc3-detail { min-width: 0; } .pwc3[data-pw-collection-v4] .pwc3-record-head { border-top-color: var(--pwc3-navy); } .pwc3[data-pw-collection-v4] .pwc3-record-head__title h2 { font-size: clamp(26px, 2.6vw, 36px); } .pwc3[data-pw-collection-v4] .pwc3-button { position: relative; overflow: hidden; min-height: 48px; border-color: var(--pwc3-border); color: var(--pwc3-on-surface-strong); transition: background-color var(--pw4-motion) var(--pw4-ease), border-color var(--pw4-motion) var(--pw4-ease), color var(--pw4-motion) var(--pw4-ease), box-shadow var(--pw4-motion) var(--pw4-ease), opacity var(--pw4-motion) var(--pw4-ease); } .pwc3[data-pw-collection-v4] .pwc3-button--primary { border-color: var(--pwc3-navy); background: var(--pwc3-navy); color: #fff; } .pwc3[data-pw-collection-v4] .pwc3-button--selected { border-color: color-mix(in srgb, var(--pwc3-navy) 48%, var(--pwc3-border)); background: color-mix(in srgb, var(--pwc3-navy) 12%, var(--pwc3-surface)); color: var(--pwc3-on-surface-strong); } .pwc3[data-pw-collection-v4] .pwc3-button.is-busy, .pwc3[data-pw-collection-v4] .pwc3-button[aria-busy="true"] { min-width: 132px; opacity: .86; } .pwc3[data-pw-collection-v4] .pwc3-receipt-slot:not(:empty) { animation: pwc4-receipt-in 220ms var(--pw4-ease) both; } .pwc3[data-pw-collection-v4] .pwc3-form-error:not([hidden]), .pwc3[data-pw-collection-v4] .pwc3-notice--error { border-width: 2px; } .pwc3[data-pw-collection-v4] .pwc3-master[aria-busy="true"] { min-height: 420px; } /* Full-canvas queue. At tablet landscape and larger, the unselected case collection becomes a balanced 2-column work queue and the empty detail prompt no longer consumes half the screen. */ @container pwc3 (min-width: 720px) { .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) { display: block; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-master { position: relative; top: auto; display: block; width: 100%; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-detail { display: none; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-filters { grid-template-areas: "search-label . . ." "search filters filters count"; grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(160px, .62fr)) auto; align-items: end; column-gap: 12px; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-filters > .pwc4-control-label { grid-area: search-label; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-search { grid-area: search; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-filter-row { grid-area: filters; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-result-count { grid-area: count; justify-content: flex-end; white-space: nowrap; } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: color-mix(in srgb, var(--pwc3-surface-muted) 54%, var(--pwc3-surface)); } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-case-card { min-height: 178px; border: 1px solid var(--pwc3-border); border-radius: 14px; box-shadow: 0 4px 16px rgba(11, 32, 55, .035); } .pwc3[data-pw-collection-v4] .pwc3-layout:not(.has-selection) .pwc3-case-card.is-selected { box-shadow: inset 4px 0 0 var(--pwc3-navy), 0 4px 16px rgba(11, 32, 55, .04); } } /* Tablet portrait / narrow application pane: keep one task in view. This overrides the older 780px split-pane rule without duplicating content. */ @container pwc3 (min-width: 780px) and (max-width: 959px) { .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection { display: block; } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-master { display: none; } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-detail { display: block; } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-detail-back { display: inline-flex; } } @container pwc3 (max-width: 959px) { .pwc3[data-pw-collection-v4].pwc3--mobile-detail > .pwc3-page-head, .pwc3[data-pw-collection-v4].pwc3--mobile-detail > .pwc3-summary { display: none; } } /* Wide workspace: stable 400–440px queue plus a flexible record detail. */ @container pwc3 (min-width: 960px) { .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: start; gap: 24px; } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-master, .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-detail { display: block; } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-master { position: sticky; top: 88px; width: 420px; max-height: calc(100dvh - 112px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-detail-back { display: none; } } @container pwc3 (min-width: 1240px) { .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection { grid-template-columns: 440px minmax(0, 1fr); } .pwc3[data-pw-collection-v4] .pwc3-layout.has-selection .pwc3-master { width: 440px; } } /* Compact: natural list → detail navigation and full-width task actions. The shell owns the phone-tab/safe-area inset, so the collection must not reserve that space a second time. */ @media (max-width: 767px) { .pwc3[data-pw-collection-v4] { padding: 16px 14px; } .pwc3[data-pw-collection-v4] .pwc3-page-head { gap: 16px; } .pwc3[data-pw-collection-v4] .pwc3-page-head h1 { font-size: clamp(30px, 9vw, 38px); } .pwc3[data-pw-collection-v4] .pwc3-summary { border-radius: 14px; } .pwc3[data-pw-collection-v4] .pwc3-summary > div { min-height: 72px; padding: 11px 10px; } .pwc3[data-pw-collection-v4] .pwc3-summary span { font-size: 14px; line-height: 1.25; } .pwc3[data-pw-collection-v4] .pwc3-filters { position: relative; top: auto; z-index: auto; } .pwc3[data-pw-collection-v4] .pwc3-case-card { min-height: 156px; } .pwc3[data-pw-collection-v4] .pwc3-detail-back { min-width: 0; } } /* Explicit class-based dark theme. The legacy navy tokens are intentionally brand-stable, so on-surface text tokens must be remapped for dark surfaces. */ html.dark .pwc3[data-pw-collection-v4], [data-theme="dark"] .pwc3[data-pw-collection-v4] { --pwc3-bg: #0d141c; --pwc3-surface: #141d27; --pwc3-surface-muted: #1b2734; --pwc3-text: #f2f6fa; --pwc3-muted: #c1ceda; --pwc3-border: #3e5062; --pwc3-divider: #45596c; --pwc3-navy: #9fc8ea; --pwc3-navy-deep: #f7fafc; --pwc3-steel: #a8c9e2; --pwc3-gold: #f1c66f; --pwc3-success: #76dda9; --pwc3-warning: #f4c56e; --pwc3-danger: #ffaba3; --pwc3-on-surface: #f2f6fa; --pwc3-on-surface-strong: #ffffff; color-scheme: dark; } html.dark .pwc3[data-pw-collection-v4] .pwc3-summary, [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-summary { background: var(--pwc3-divider); box-shadow: 0 12px 34px rgba(0, 0, 0, .24); } html.dark .pwc3[data-pw-collection-v4] :where( .pwc3-summary > div, .pwc3-summary > p, .pwc3-master, .pwc3-case-card, .pwc3-record-head, .pwc3-record-form, .pwc3-detail-section, .pwc3-fact, .pwc3-filters, .pwc3-search, .pwc3-filter-select select ), [data-theme="dark"] .pwc3[data-pw-collection-v4] :where( .pwc3-summary > div, .pwc3-summary > p, .pwc3-master, .pwc3-case-card, .pwc3-record-head, .pwc3-record-form, .pwc3-detail-section, .pwc3-fact, .pwc3-filters, .pwc3-search, .pwc3-filter-select select ) { border-color: var(--pwc3-border); } html.dark .pwc3[data-pw-collection-v4] .pwc3-button--primary, [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-button--primary { border-color: #b9d7ef; background: #b9d7ef; color: #0b2037; } html.dark .pwc3[data-pw-collection-v4] .pwc3-button--primary:hover:not(:disabled), html.dark .pwc3[data-pw-collection-v4] .pwc3-button--primary:active:not(:disabled), [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-button--primary:hover:not(:disabled), [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-button--primary:active:not(:disabled) { border-color: #d5e8f7; background: #d5e8f7; color: #07192b; } html.dark .pwc3[data-pw-collection-v4] .pwc3-button--selected, [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-button--selected { border-color: #718da6; background: #24384a; color: #ffffff; } html.dark .pwc3[data-pw-collection-v4] .pwc3-button--ghost, [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-button--ghost { color: #f2f6fa; } html.dark .pwc3[data-pw-collection-v4] .pwc3-pill--department, [data-theme="dark"] .pwc3[data-pw-collection-v4] .pwc3-pill--department { color: #cfe7fa; } html.dark .pwc3[data-pw-collection-v4] :where(input, select, textarea), [data-theme="dark"] .pwc3[data-pw-collection-v4] :where(input, select, textarea) { background-color: #111a23; color: #f7fafc; } html.dark .pwc3[data-pw-collection-v4] :where(input, textarea)::placeholder, [data-theme="dark"] .pwc3[data-pw-collection-v4] :where(input, textarea)::placeholder { color: #9fb0c0; opacity: 1; } /* Static navy variables appear in two other isolated v3 modules. Remap only their semantic foreground tokens in dark mode; layout and business UI stay untouched. */ html.dark .pwi3[data-pw-collection-v4], html.dark .pwi3-dialog, [data-theme="dark"] .pwi3[data-pw-collection-v4], [data-theme="dark"] .pwi3-dialog { --pwi3-navy: #a9cfea; --pwi3-navy-deep: #f7fafc; --pwi3-gold: #f1c66f; --pwi3-border: var(--border, #3e5062); } html.dark :where(.pwp3-host, .pwp3-dialog)[data-pw-collection-v4], [data-theme="dark"] :where(.pwp3-host, .pwp3-dialog)[data-pw-collection-v4] { --pwp3-navy: #f7fafc; --pwp3-blue: #a9cfea; --pwp3-gold: #f1c66f; --pwp3-border: var(--border, #3e5062); } @media (prefers-reduced-motion: reduce) { [data-pw-collection-v4] *, [data-pw-collection-v4] *::before, [data-pw-collection-v4] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (forced-colors: active) { [data-pw-collection-v4] :where(button, a, input, select, textarea):focus-visible { outline-color: Highlight; } .pwc3[data-pw-collection-v4] .pwc3-case-card.is-selected { border-left: 4px solid Highlight; } } @keyframes pwc4-receipt-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }