/* Customer archive, chosen concept: Overview with tabs. Preserve RED tokens, familiar popup and native workflow controls. Persistent navigation, compact rows and motion tied to actual actions. */ #histModal.ca-card { width: min(1180px, calc(100vw - 48px)); max-width: 1180px; max-height: calc(100dvh - 48px); min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.45; text-align: left; } #histModal.ca-card .ca-dialog { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: calc(100dvh - 48px); } #histModal.ca-card > :not(.ca-dialog) { flex-shrink: 0; } #histModal.ca-card *, #histModal.ca-card *::before, #histModal.ca-card *::after { box-sizing: border-box; } #histModal.ca-card h2, #histModal.ca-card h3, #histModal.ca-card h4 { margin: 0; color: var(--text); } #histModal.ca-card h3 { font-size: 15px; font-weight: 650; letter-spacing: -.15px; } #histModal.ca-card h4 { font-size: 13px; font-weight: 650; } #histModal.ca-card button, #histModal.ca-card input, #histModal.ca-card select, #histModal.ca-card textarea { font-family: inherit; } #histModal.ca-card button:focus-visible, #histModal.ca-card summary:focus-visible, #histModal.ca-card a:focus-visible, #histModal.ca-card input:focus-visible, #histModal.ca-card select:focus-visible, #histModal.ca-card textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } #histModal.ca-card .ca-tabs > button:focus-visible, #histModal.ca-card .ca-subtabs > button:focus-visible, #histModal.ca-card button.ca-purchase-row:focus-visible, #histModal.ca-card .ca-order > summary:focus-visible { outline-offset: -3px; } #histModal.ca-card button:disabled { cursor: not-allowed; opacity: .5; } #histModal.ca-card .btn { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease; } #histModal.ca-card .btn:active:not(:disabled) { transform: translateY(1px); } /* One restrained header and one navigation level for the whole client. */ #histModal.ca-card .ca-head { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 4; flex: 0 0 auto; gap: 12px 20px; padding: 18px 24px 14px; background: var(--surface); border: 0; } #histModal.ca-card .ca-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-width: 0; } #histModal.ca-card .ca-identity { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; } #histModal.ca-card .ca-identity > div:last-child { min-width: 0; } #histModal.ca-card .ca-avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--text); color: var(--surface); font-size: 17px; font-weight: 650; flex-shrink: 0; } #histModal.ca-card .ca-title { font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -.4px; overflow-wrap: anywhere; } #histModal.ca-card .ca-title h2 { font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -.4px; } #histModal.ca-card .ca-name { display: flex; align-items: center; gap: 9px; } #histModal.ca-card .ca-name h2 { min-width: 0; } #histModal.ca-card .ca-name .cw-chain { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); } #histModal.ca-card .ca-name .cw-chain:hover { background: var(--red-bg); border-color: var(--red); } #histModal.ca-card .ca-manager, #histModal.ca-card .ca-contact { margin-top: 4px; color: var(--steel); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: normal; } #histModal.ca-card .ca-manager:empty, #histModal.ca-card .ca-contact:empty { display: none; } #histModal.ca-card .ca-head-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } #histModal.ca-card .ca-head-actions .close { position: static; inset: auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 20px; line-height: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--steel); } #histModal.ca-card .ca-head-actions .close:hover { background: var(--red-bg); color: var(--red); } #histModal.ca-card .invoice-create { position: relative; } #histModal.ca-card .invoice-create-menu { z-index: 15; min-width: 220px; max-width: min(300px, calc(100vw - 64px)); } #histModal.ca-card .ca-tabs { display: flex; align-items: stretch; gap: 8px; margin: 0; padding: 0 18px; position: relative; z-index: 3; flex: 0 0 auto; overflow-x: auto; scrollbar-width: thin; background: var(--surface); border-bottom: 1px solid var(--line); } #histModal.ca-card .ca-tabs > button, #histModal.ca-card .ca-subtabs > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 7px; background: transparent; color: var(--steel); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .16s ease, background-color .16s ease; } #histModal.ca-card .ca-tabs > button.on, #histModal.ca-card .ca-tabs > button[aria-selected="true"], #histModal.ca-card .ca-subtabs > button.on, #histModal.ca-card .ca-subtabs > button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--red); font-weight: 600; } #histModal.ca-card .ca-tabs:has(.ca-tab-indicator) > button { border-bottom-color: transparent; } #histModal.ca-card .ca-tab-indicator { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--red); pointer-events: none; transform-origin: left center; } #histModal.ca-card .ca-tabs > button:hover, #histModal.ca-card .ca-subtabs > button:hover { color: var(--text); background: var(--surface-2, var(--bg)); } #histModal.ca-card .ca-tabs svg, #histModal.ca-card .ca-subtabs svg { width: 16px; height: 16px; flex-shrink: 0; } #histModal.ca-card .ca-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 5px; background: var(--surface-2, var(--bg)); color: var(--steel); font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; } #histModal.ca-card .ca-tabs > button[aria-selected="true"] .ca-tab-count { background: var(--red-bg); color: var(--red); } #histModal.ca-card .ca-body { position: relative; z-index: 1; flex: 1 1 auto; padding: 20px 24px 24px; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--bg); scroll-padding: 16px; } #histModal.ca-card .ca-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 17px; align-items: start; } #histModal.ca-card .ca-overview > * { min-width: 0; } /* Existing financial blocks keep the canonical totals and actions. */ #histModal.ca-card .uc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 2px 0 20px; } #histModal.ca-card .uc-stat { padding: 0 17px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; } #histModal.ca-card .uc-stat:first-child { padding-left: 0; border-left: 0; } #histModal.ca-card .uc-stat > span { display: block; color: var(--steel); font-size: 12px; margin-bottom: 6px; } #histModal.ca-card .uc-stat > strong { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.35px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #histModal.ca-card .uc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 18px; margin: 0 0 16px; min-width: 0; box-shadow: none; } #histModal.ca-card .ca-panel { padding: 0; } #histModal.ca-card .ca-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 17px 10px; } #histModal.ca-card .ca-panel-head > :last-child { flex-shrink: 0; } #histModal.ca-card .ca-panel-head h3 { font-size: 15px; } #histModal.ca-card .ca-panel-more { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 38px; padding: 9px 17px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; background: transparent; color: var(--red); font: inherit; font-size: 12px; cursor: pointer; } #histModal.ca-card .ca-panel-more:hover { background: var(--surface-2, var(--bg)); } #histModal.ca-card .ca-panel > p { margin: 0; padding: 8px 17px 17px; } #histModal.ca-card .ca-contact-details { display: grid; gap: 5px; padding: 6px 17px 16px; font-size: 13px; overflow-wrap: anywhere; } #histModal.ca-card .ca-contact-details > span { color: var(--steel); } #histModal.ca-card .ca-contact-details > strong { font-weight: 600; } #histModal.ca-card .btn { min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 550; box-shadow: none; } #histModal.ca-card .uc-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; line-height: 1.45; } #histModal.ca-card .uc-link svg { width: 15px; height: 15px; } #histModal.ca-card .uc-muted { color: var(--steel); font-size: 12px; } #histModal.ca-card .uc-alert { font-size: 12px; border-radius: 8px; margin-bottom: 17px; } /* A document basis leads every row; content and production are secondary. */ #histModal.ca-card .ca-purchase-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; width: 100%; align-items: center; padding: 12px 17px; text-align: left; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font: inherit; } #histModal.ca-card button.ca-purchase-row { cursor: pointer; transition: background-color .16s ease; } #histModal.ca-card button.ca-purchase-row:hover { background: var(--surface-2, var(--bg)); } #histModal.ca-card button.ca-purchase-row:active { background: var(--red-bg); } #histModal.ca-card .ca-purchase-row:first-of-type { border-top-color: transparent; } #histModal.ca-card .ca-square { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--steel); flex-shrink: 0; transition: color .16s ease, border-color .16s ease; } #histModal.ca-card button.ca-purchase-row:hover .ca-square { color: var(--red); border-color: color-mix(in srgb, var(--red) 20%, var(--line)); } #histModal.ca-card .ca-square svg { width: 16px; height: 16px; } #histModal.ca-card .ca-row-main { min-width: 0; } #histModal.ca-card .ca-row-main > strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } #histModal.ca-card .ca-row-main > small { display: block; color: var(--steel); font-size: 12px; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; } #histModal.ca-card .ca-row-main > .ca-purchase-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #histModal.ca-card .ca-row-main > .ca-purchase-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; } #histModal.ca-card .ca-purchase-meta .ca-source { margin-right: 0; } #histModal.ca-card .ca-row-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; min-width: 0; text-align: right; font-size: 12px; } #histModal.ca-card .ca-row-end > strong { font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; } #histModal.ca-card .ca-open-label { color: var(--red); font-size: 12px; font-weight: 500; transition: transform .16s ease; } #histModal.ca-card button.ca-purchase-row:hover .ca-open-label { transform: translateX(2px); } #histModal.ca-card .ca-case-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 12px 17px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background-color .16s ease; } #histModal.ca-card .ca-case-row:hover { background: var(--surface-2, var(--bg)); } #histModal.ca-card .ca-case-row > span:first-child { min-width: 0; } #histModal.ca-card .ca-case-row strong { display: block; font-size: 14px; font-weight: 600; } #histModal.ca-card .ca-case-row small { display: block; font-size: 12px; color: var(--steel); margin-top: 3px; overflow-wrap: anywhere; } #histModal.ca-card .ca-case-row > .ca-status { flex-shrink: 0; } #histModal.ca-card .ca-order { border-top: 1px solid var(--line); } #histModal.ca-card .ca-order > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 7px; align-items: center; gap: 10px; padding: 12px 17px; cursor: pointer; list-style: none; transition: background-color .16s ease; } #histModal.ca-card .ca-order > summary:hover { background: var(--surface-2, var(--bg)); } #histModal.ca-card .ca-order > summary::-webkit-details-marker { display: none; } #histModal.ca-card .ca-order > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); transform: rotate(-45deg); transition: transform .15s ease; } #histModal.ca-card .ca-order[open] > summary::after { transform: rotate(45deg); } #histModal.ca-card .ca-order > summary strong { font-size: 14px; font-weight: 600; } #histModal.ca-card .ca-order > :not(summary) { margin: 0 17px 13px; } #histModal.ca-card .ca-order > .ca-details-body { margin: 0; padding: 0 17px 13px; } #histModal.ca-card .ca-order p { color: var(--steel); font-size: 12px; } #histModal.ca-card .ca-source, #histModal.ca-card .ca-status { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; padding: 3px 6px; color: var(--steel); background: var(--bg); font-size: 12px; line-height: 1.25; font-weight: 500; } #histModal.ca-card .ca-source { padding: 2px 5px; margin-right: 5px; } #histModal.ca-card .ca-status.green { color: var(--green); background: var(--green-bg); } #histModal.ca-card .ca-status.amber { color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); } #histModal.ca-card .ca-status.red { color: var(--red); background: var(--red-bg); } #histModal.ca-card .ca-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 17px; } #histModal.ca-card .ca-filters { display: flex; gap: 5px; flex-wrap: wrap; } #histModal.ca-card .ca-filters > button { border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--steel); padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; } #histModal.ca-card .ca-filters > button.on, #histModal.ca-card .ca-filters > button[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--text); font-weight: 600; } #histModal.ca-card .ca-search { width: min(280px, 100%); min-width: 150px; padding: 9px 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } /* Events have a stable date gutter; motion is used only for deliberate navigation. */ #histModal.ca-card .ca-timeline { padding: 8px 17px 17px; } #histModal.ca-card .ca-event { display: grid; grid-template-columns: 68px 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; position: relative; } #histModal.ca-card .ca-event + .ca-event { border-top: 1px solid var(--line); } #histModal.ca-card .ca-event-date { color: var(--steel); font-size: 12px; line-height: 1.5; padding-top: 1px; overflow-wrap: anywhere; } #histModal.ca-card .ca-event-icon { color: var(--steel); padding-top: 1px; } #histModal.ca-card .ca-event-icon svg { width: 15px; height: 15px; } #histModal.ca-card .ca-event-body { min-width: 0; } #histModal.ca-card .ca-event-body > button { border: 0; background: none; color: var(--text); padding: 0; font: inherit; font-size: 13px; font-weight: 600; text-align: left; line-height: 1.45; cursor: pointer; } #histModal.ca-card .ca-event-body > button:hover { color: var(--red); } #histModal.ca-card .ca-event-body > strong { font-size: 13px; font-weight: 600; } #histModal.ca-card .ca-event-body small { display: block; margin-top: 4px; color: var(--steel); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } #histModal.ca-card .ca-event-body > div { color: var(--steel); font-size: 12px; line-height: 1.5; margin-top: 4px; overflow-wrap: anywhere; } #histModal.ca-card .ca-details-body { display: flow-root; min-width: 0; overflow-wrap: anywhere; } #histModal.ca-card .ca-event-summary { min-width: 0; } #histModal.ca-card .ca-event-summary > summary, #histModal.ca-card .ca-summary-note > summary { display: flex; align-items: baseline; gap: 8px; list-style: none; cursor: pointer; } #histModal.ca-card .ca-event-summary > summary::-webkit-details-marker, #histModal.ca-card .ca-summary-note > summary::-webkit-details-marker { display: none; } #histModal.ca-card .ca-event-summary > summary { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.45; } #histModal.ca-card .ca-event-summary > summary::after, #histModal.ca-card .ca-summary-note > summary::after { content: ''; align-self: center; flex: 0 0 6px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; } #histModal.ca-card .ca-event-summary[open] > summary::after, #histModal.ca-card .ca-summary-note[open] > summary::after { transform: rotate(45deg); } #histModal.ca-card .ca-event-summary > summary:hover { color: var(--red); } #histModal.ca-card .ca-event-summary .ca-details-body { padding-top: 8px; color: var(--steel); font-size: 12px; line-height: 1.6; } #histModal.ca-card .ca-event-summary .ca-details-body > :first-child { margin-top: 0; } #histModal.ca-card .ca-event-summary .ca-details-body > :last-child { margin-bottom: 0; } #histModal.ca-card .ca-summary-note { margin: -5px 0 16px; color: var(--steel); font-size: 12px; } #histModal.ca-card .ca-summary-note > summary { width: fit-content; max-width: 100%; min-height: 24px; line-height: 1.5; } #histModal.ca-card .ca-summary-note > summary:hover { color: var(--text); } #histModal.ca-card .ca-summary-note .ca-details-body { max-width: 760px; padding: 5px 0 3px; line-height: 1.55; } /* Purchase context is explicit and keeps the original editor underneath. */ #histModal.ca-card .ca-detailbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; } #histModal.ca-card .ca-purchase-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; } #histModal.ca-card .ca-purchase-switch > .uc-link { color: var(--steel); } #histModal.ca-card .ca-purchase-switch > .uc-link:hover { color: var(--red); } #histModal.ca-card .ca-detail-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-basis: 100%; min-width: 0; padding: 0 0 2px; } #histModal.ca-card .ca-detail-title > div:first-child { min-width: 0; flex: 1; } #histModal.ca-card .ca-detail-title h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 650; } #histModal.ca-card .ca-purchase-select { display: block; width: 100%; max-width: 100%; min-height: 36px; padding: 4px 28px 4px 0; margin: 0 0 4px; border: 1px solid transparent; border-radius: 5px; background-color: transparent; color: var(--text); font: inherit; font-size: 18px; font-weight: 650; line-height: 1.4; text-overflow: ellipsis; cursor: pointer; } #histModal.ca-card .ca-purchase-select:hover { background-color: var(--surface-2, var(--bg)); border-color: var(--line); } #histModal.ca-card .ca-purchase-select option { background: var(--surface); color: var(--text); font-size: 14px; font-weight: 400; } #histModal.ca-card .ca-detail-title small { display: block; color: var(--steel); font-size: 12px; } #histModal.ca-card .ca-detail-context { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; max-width: 42%; } #histModal.ca-card .ca-detail-amount { font-size: 20px; line-height: 1.25; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } #histModal.ca-card .ca-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #histModal.ca-card .ca-subtabs { display: flex; align-items: stretch; gap: 3px; flex: 0 1 auto; width: fit-content; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2, var(--bg)); margin: 0 0 16px; } #histModal.ca-card .ca-detailbar > .ca-subtabs { margin-bottom: 0; } #histModal.ca-card .ca-subtabs > button { border: 1px solid transparent; border-radius: 6px; min-height: 34px; padding: 7px 14px; color: var(--steel); font-weight: 500; } #histModal.ca-card .ca-subtabs > button.on, #histModal.ca-card .ca-subtabs > button[aria-selected="true"], #histModal.ca-card .ca-subtabs > button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent); } #histModal.ca-card .ca-subtabs > button:hover { background: var(--surface); } #histModal.ca-card .ca-detail > .cw-purchase-selector { display: none; } #histModal.ca-card .ca-req-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } #histModal.ca-card .ca-danger { color: var(--red); } #histModal.ca-card .ca-contracts { margin-bottom: 16px; } #histModal.ca-card .ca-contracts details, #histModal.ca-card details.ca-contracts { padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); } #histModal.ca-card .ca-contracts summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 13px; } #histModal.ca-card .ca-contracts details > :not(summary) { margin: 0 16px 14px; } #histModal.ca-card .ca-related { margin: 0 17px; padding: 13px 0; border-top: 1px solid var(--line); } #histModal.ca-card .ca-related > summary { cursor: pointer; color: var(--red); font-size: 13px; font-weight: 500; } #histModal.ca-card .ca-related[open] > summary { margin-bottom: 13px; } #histModal.ca-card .ca-related .uc-row { padding: 11px 0; } #histModal.ca-card .ca-related .cw-linked-buyers { padding: 0; } #histModal.ca-card .ca-panel > .uc-panel-footer { margin: 0 17px; padding: 13px 0; border-top: 1px solid var(--line); } #histModal.ca-card .cw-related-toggle { min-height: 32px; font-size: 13px; font-weight: 600; } #histModal.ca-card .cw-related-content .uc-row { padding: 12px 0; } #histModal.ca-card .cw-related-content .uc-row-main { min-width: 0; } #histModal.ca-card .cw-related-content .uc-row-end { display: flex; gap: 10px; align-items: center; } /* A brief sweep every six seconds marks existing links, without flashing. */ @supports (background-clip: text) { #histModal.ca-card .cw-has-relations[aria-expanded="false"] .cw-related-label { background-image: linear-gradient(110deg, var(--red) 40%, color-mix(in srgb, var(--red) 35%, var(--surface)) 50%, var(--red) 60%); background-size: 250% 100%; background-clip: text; -webkit-text-fill-color: transparent; animation: cw-related-shine 6s ease-in-out infinite; } } @keyframes cw-related-shine { 0%, 72% { background-position: 150% 0; } 96%, 100% { background-position: -150% 0; } } /* Service cases share the customer archive, without recreating service actions. */ #histModal.ca-card .ca-case-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 20px; margin-bottom: 16px; } #histModal.ca-card .ca-panel > .ca-case-summary { border: 0; padding: 0 17px 18px; margin: 0; background: none; } #histModal.ca-card .ca-case-summary > p { margin: 14px 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } #histModal.ca-card .ca-case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 15px 0; } #histModal.ca-card .ca-case-facts > div, #histModal.ca-card .ca-case-facts > span { min-width: 0; } #histModal.ca-card .ca-case-facts strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; } #histModal.ca-card .ca-case-facts small { color: var(--steel); font-size: 12px; } #histModal.ca-card .ca-case-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 17px 0 0; } #histModal.ca-card .ca-message { padding: 13px 15px; margin: 12px 0; border-radius: 8px; background: var(--bg); max-width: 93%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; } #histModal.ca-card .ca-panel > .ca-message { margin: 12px 17px; } #histModal.ca-card .ca-message p { margin: 6px 0 0; } #histModal.ca-card .ca-message small { display: block; color: var(--steel); font-size: 12px; margin-top: 7px; } #histModal.ca-card .ca-message.internal { background: color-mix(in srgb, var(--amber) 8%, var(--surface)); border-left: 2px solid var(--amber); } #histModal.ca-card .ca-message.staff { margin-left: auto; background: var(--green-bg); } #histModal.ca-card .ca-message.internal.staff { background: color-mix(in srgb, var(--amber) 8%, var(--surface)); } /* Payment receipt controls stay visible and use familiar green confirmation. */ #histModal.ca-card .ca-payment-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 17px; border-top: 1px solid var(--line); } #histModal.ca-card .ca-payment-row > :first-child { flex: 1; min-width: 150px; } #histModal.ca-card .ca-payment-row > strong { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; } #histModal.ca-card .ca-payment-meta { display: block; margin-top: 3px; color: var(--steel); font-size: 12px; } #histModal.ca-card .cw-confirm-payment { color: white; background: var(--green); border-color: var(--green); } #histModal.ca-card .cw-payment-received { font-size: 12px; } #histModal.ca-card .cfrow { border-radius: 8px; gap: 10px; padding: 11px 12px; } #histModal.ca-card .cfrow .nm { overflow-wrap: anywhere; } #histModal.ca-card .cfrow .fl { max-width: 220px; overflow-wrap: anywhere; } #histModal.ca-card .cprow { border-radius: 9px; } #histModal.ca-card .cw-invoice-table { margin: 14px 0; } #histModal.ca-card .tbl th { font-size: 12px; font-weight: 500; } #histModal.ca-card .tbl td { font-size: 13px; } #histModal.ca-card .ca-document-tools { padding: 14px 0; margin-top: 16px; border-top: 1px solid var(--line); } #histModal.ca-card .ca-document-tools > summary { cursor: pointer; color: var(--text); font-weight: 600; font-size: 13px; } #histModal.ca-card .ca-document-tools[open] > summary { margin-bottom: 16px; } #histModal.ca-card .ca-empty { padding: 24px 17px; color: var(--steel); font-size: 13px; line-height: 1.6; text-align: center; } #histModal.ca-card .ca-error { padding: 12px 15px; margin: 0 0 17px; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: 12px; } #histModal.ca-card .ca-error:empty { display: none; } /* View changes and disclosure height are animated once by the navigation code. */ @media (prefers-reduced-motion: reduce) { #histModal.ca-card *, #histModal.ca-card *::before, #histModal.ca-card *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } #histModal.ca-card .btn:active:not(:disabled), #histModal.ca-card button.ca-purchase-row:hover .ca-open-label { transform: none; } #histModal.ca-card .cw-has-relations .cw-related-label { background: none; -webkit-text-fill-color: currentColor; } } @media (max-width: 900px) { #histModal.ca-card { width: calc(100vw - 32px); } #histModal.ca-card .ca-overview { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 13px; } #histModal.ca-card .ca-head { gap: 12px; padding: 16px 20px 12px; } #histModal.ca-card .ca-body { padding: 20px; } #histModal.ca-card .ca-tabs { padding: 0 14px; gap: 4px; } #histModal.ca-card .ca-purchase-row { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 13px; } #histModal.ca-card .ca-purchase-row > .ca-row-end { grid-column: 2; align-items: flex-start; flex-direction: row; justify-content: space-between; text-align: left; flex-wrap: wrap; } #histModal.ca-card .ca-square { width: 28px; height: 28px; } #histModal.ca-card .ca-event { grid-template-columns: 68px minmax(0, 1fr); } #histModal.ca-card .ca-event-icon { display: none; } #histModal.ca-card .ca-case-facts { gap: 12px; } } @media (max-width: 680px) { #histModal.ca-card { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; } #histModal.ca-card .ca-dialog { max-height: calc(100dvh - 20px); } #histModal.ca-card .ca-head { padding: 14px 16px 10px; } #histModal.ca-card .ca-title { font-size: 20px; } #histModal.ca-card .ca-title h2 { font-size: 20px; } #histModal.ca-card .ca-heading-row { flex-wrap: wrap; gap: 12px; } #histModal.ca-card .ca-avatar { width: 35px; height: 35px; border-radius: 9px; font-size: 14px; } #histModal.ca-card .ca-identity { flex-basis: calc(100% - 50px); } #histModal.ca-card .ca-head-actions { width: 100%; justify-content: flex-end; } #histModal.ca-card .ca-tabs { padding: 0 10px; gap: 4px; } #histModal.ca-card .ca-body { padding: 17px 16px 22px; } #histModal.ca-card .ca-overview { grid-template-columns: minmax(0, 1fr); } #histModal.ca-card .uc-stat { padding: 0 9px; } #histModal.ca-card .uc-stat > strong { font-size: 18px; } #histModal.ca-card .uc-stat > span { font-size: 12px; } #histModal.ca-card .ca-search { width: 100%; } #histModal.ca-card .ca-detailbar { align-items: flex-start; } #histModal.ca-card .ca-detail-actions { margin-left: auto; } #histModal.ca-card .ca-detail-title { flex-wrap: wrap; gap: 10px; } #histModal.ca-card .ca-detail-title > div:first-child { flex-basis: 100%; } #histModal.ca-card .ca-detail-context { justify-content: flex-start; max-width: 100%; } #histModal.ca-card .ca-subtabs { gap: 3px; } #histModal.ca-card .ca-subtabs > button { padding: 7px 11px; } #histModal.ca-card .ca-case-facts { grid-template-columns: minmax(0, 1fr); } #histModal.ca-card .cfrow { flex-wrap: wrap; } #histModal.ca-card .cfrow .nm { flex-basis: 60%; } #histModal.ca-card .ca-message { max-width: 100%; } }