.v2-content.is-section-alerts { background: #f7f9fc; } .v2-event-center { --event-blue: #1267e8; --event-ink: #17243d; --event-muted: #6e7c91; --event-border: #dfe5ee; --event-surface: #fff; display: grid; gap: 14px; color: var(--event-ink); } .v2-event-center .v2-alert-command-bar { min-height: 64px; padding: 8px 10px 8px 16px; border-color: var(--event-border); border-radius: 10px; box-shadow: none; } .v2-event-center .v2-event-center-navigation-actions { display: flex; align-items: center; gap: 12px; } .v2-event-center .v2-alert-tabs { padding: 3px; background: #f3f6fa; border-radius: 8px; } .v2-event-center .v2-alert-tabs .semi-button { min-width: 104px; border-radius: 6px; } .v2-event-center .v2-alert-filter-card, .v2-event-center .v2-alert-metric-rail, .v2-event-center .v2-alert-table-card, .v2-event-center .v2-alert-inspector, .v2-event-center .v2-alert-notifications, .v2-event-center .v2-alert-rule-list, .v2-event-center .v2-event-automation-detail { border-color: var(--event-border); border-radius: 10px; box-shadow: 0 1px 2px rgb(23 36 61 / 4%); } .v2-event-center .v2-alert-filter-card .v2-workspace-panel-header { display: none; } .v2-event-center .v2-alert-filter-primary { padding: 10px; background: var(--event-surface); } .v2-event-center .v2-alert-filter-primary > label:first-child { min-width: min(340px, 30vw); flex: 1.45; } .v2-event-center .v2-alert-filter-primary > label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .v2-event-center .v2-workspace-metric-rail.is-queue { min-height: 76px; background: var(--event-surface); } .v2-event-center .v2-workspace-metric-list > span { min-width: 148px; } .v2-event-center .v2-workspace-metric-list small, .v2-event-center .v2-workspace-metric-list em { font-style: normal; } .v2-event-center .v2-workspace-metric-list strong { font-size: 22px; line-height: 1; } .v2-event-source-rail { display: grid; grid-template-columns: minmax(170px, .82fr) repeat(3, minmax(220px, 1fr)); align-items: stretch; min-height: 78px; overflow: hidden; background: #fff; border: 1px solid var(--event-border); border-radius: 10px; } .v2-event-source-rail > header, .v2-event-source-rail > div { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-right: 1px solid var(--event-border); } .v2-event-source-rail > :last-child { border-right: 0; } .v2-event-source-rail > header { display: grid; align-content: center; gap: 3px; background: #f8fafc; } .v2-event-source-rail > header small, .v2-event-source-rail p small { color: var(--event-muted); font-size: 12px; } .v2-event-source-rail > header strong, .v2-event-source-rail p strong { color: var(--event-ink); font-size: 14px; } .v2-event-center.is-events { height: auto; min-height: 100%; grid-template-rows: auto auto auto auto; overflow: visible; } .v2-automation-run-context { display: grid; min-height: 58px; grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.4fr) minmax(150px, .7fr) auto; align-items: stretch; overflow: hidden; border: 1px solid #cfe0f7; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgb(23 36 61 / 4%); } .v2-automation-run-context > span { display: grid; min-width: 0; align-content: center; gap: 2px; border-right: 1px solid #e2e9f2; padding: 9px 14px; } .v2-automation-run-context small { overflow: hidden; color: #748399; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-run-context strong { overflow: hidden; color: #263b55; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-run-context .v2-automation-run-context-origin { display: flex; align-items: center; gap: 8px; background: #f3f7ff; color: #1768d9; } .v2-automation-run-context-origin .semi-icon { flex: 0 0 auto; font-size: 17px; } .v2-automation-run-context-origin small { color: #4d6f9e; font-size: 11px; font-weight: 700; } .v2-automation-run-context > .semi-button { height: 34px; align-self: center; margin: 0 12px; border-radius: 7px; font-size: 11px; } .v2-event-source-rail > div > span:first-child { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; color: #1768d9; font-weight: 750; background: #eaf2ff; border-radius: 50%; } .v2-event-source-rail > div.is-jt808 > span:first-child { color: #087a7f; background: #e4f6f5; } .v2-event-source-rail > div.is-yutong-mqtt > span:first-child { color: #7a47da; background: #f0eaff; } .v2-event-source-rail p { display: grid; flex: 1; gap: 2px; margin: 0; } .v2-event-center .v2-alert-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; min-height: 510px; } .v2-event-center .v2-alert-workspace.is-inspector-open { grid-template-columns: minmax(620px, 1fr) minmax(350px, 390px); gap: 10px; } .v2-event-center .v2-alert-table-card, .v2-event-center .v2-alert-inspector { min-height: 510px; } .v2-event-center .v2-alert-table-card > .v2-workspace-panel-header { min-height: 62px; padding: 12px 16px; } .v2-event-center .v2-alert-table-card .v2-workspace-panel-header-eyebrow { display: none; } .v2-event-center .v2-alert-event-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 42px; color: #65748a; font-size: 12px; font-weight: 600; background: #f8fafc; border-bottom-color: var(--event-border); } .v2-event-center .v2-alert-event-table .semi-table-tbody > .semi-table-row { min-height: 64px; transition: background-color 140ms ease, box-shadow 140ms ease; } .v2-event-center .v2-alert-event-table .semi-table-tbody > .semi-table-row:hover { background: #f7faff; } .v2-event-center .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-selected { background: #f1f6ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-event-identity { display: flex; align-items: center; gap: 10px; min-width: 0; } .v2-event-identity > span, .v2-event-inspector-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; color: #1768d9; background: #eaf2ff; border-radius: 9px; } .v2-event-identity.is-safety > span, .v2-event-inspector-icon.is-safety { color: #c93535; background: #fff0ef; } .v2-event-identity.is-geofence > span, .v2-event-inspector-icon.is-geofence { color: #c86a13; background: #fff4e5; } .v2-event-identity.is-connectivity > span, .v2-event-inspector-icon.is-connectivity { color: #278254; background: #eaf7ef; } .v2-event-identity p { display: grid; min-width: 0; gap: 2px; margin: 0; } .v2-event-identity strong, .v2-event-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-event-identity strong { font-size: 13px; } .v2-event-identity small { color: var(--event-muted); font-size: 11px; } .v2-event-execution { min-width: 72px; justify-content: center; border-radius: 5px; } .v2-event-execution i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; } .v2-event-center .v2-alert-inspector { position: sticky; top: 0; overflow: hidden; } .v2-event-center .v2-alert-inspector-heading { min-height: 62px; border-bottom: 1px solid var(--event-border); } .v2-event-inspector-title { display: flex; align-items: center; gap: 12px; padding: 16px 16px 2px; } .v2-event-inspector-title > span:last-child { display: grid; gap: 2px; } .v2-event-inspector-title small { color: var(--event-muted); font-size: 11px; } .v2-event-inspector-title strong { font-size: 16px; } .v2-event-center .v2-alert-focus-card, .v2-event-center .v2-alert-disposition-card, .v2-event-center .v2-alert-progress-card { border: 0; border-bottom: 1px solid var(--event-border); border-radius: 0; box-shadow: none; } .v2-event-center .v2-alert-evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .v2-event-center .v2-alert-evidence-value { background: #f8fafc; border-color: #e7ebf1; border-radius: 6px; box-shadow: none; } .v2-event-center .v2-event-execution-trace .semi-timeline-item-tail { border-left-color: #88b5fb; } .v2-event-center .v2-alert-links { background: #fbfcfe; border-top: 1px solid var(--event-border); } .v2-event-center .v2-alert-automation-intro { min-height: 56px; padding: 0 2px; } .v2-event-center .v2-alert-automation-intro h3 { margin: 0; font-size: 20px; } .v2-event-automation-summary { display: grid; grid-template-columns: repeat(3, minmax(120px, .72fr)) repeat(3, minmax(160px, 1fr)); overflow: hidden; min-height: 76px; background: #fff; border: 1px solid var(--event-border); border-radius: 10px; } .v2-event-automation-summary > span { display: grid; align-content: center; gap: 3px; padding: 12px 18px; border-right: 1px solid var(--event-border); } .v2-event-automation-summary > :last-child { border-right: 0; } .v2-event-automation-summary small { color: var(--event-muted); font-size: 12px; } .v2-event-automation-summary strong { font-size: 21px; } .v2-event-automation-summary .is-attention strong { color: #c63b3b; } .v2-event-automation-summary .is-source { grid-template-columns: auto 1fr; align-items: center; align-content: center; gap: 8px; } .v2-event-automation-workspace { display: grid; grid-template-columns: minmax(290px, 330px) minmax(0, 1fr); gap: 10px; min-height: 590px; } .v2-event-center .v2-alert-automation-library, .v2-event-center .v2-event-automation-detail { min-height: 590px; } .v2-event-center .v2-alert-rule-list-heading, .v2-event-center .v2-event-automation-detail-heading { min-height: 68px; border-bottom: 1px solid var(--event-border); } .v2-event-center .v2-alert-rule-items { max-height: 475px; overflow-y: auto; } .v2-event-center .v2-alert-automation-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "icon content switch" "icon content version"; gap: 0 8px; min-height: 70px; padding: 9px 10px; border-bottom: 1px solid #edf0f4; transition: background-color 140ms ease, box-shadow 140ms ease; } .v2-event-center .v2-alert-automation-row.is-selected { background: #f1f6ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-event-center .v2-alert-automation-icon { grid-area: icon; align-self: center; } .v2-event-center .v2-alert-rule-item { grid-area: content; min-width: 0; padding: 0; text-align: left; } .v2-event-center .v2-alert-automation-switch { grid-area: switch; align-self: center; } .v2-event-center .v2-alert-automation-version { grid-area: version; align-self: start; justify-self: end; color: var(--event-muted); font-size: 10px; } .v2-alert-rule-revision-sidesheet .v2-workspace-config-content { padding: 0; } .v2-automation-revision-list { display: grid; gap: 12px; padding: 2px 0 8px; } .v2-automation-revision-list > article { position: relative; display: grid; gap: 12px; padding: 16px; border: 1px solid #e1e6ec; border-radius: 10px; background: #fff; } .v2-automation-revision-list > article.is-current { border-color: #b8d4ff; background: #f7faff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-automation-revision-list article > header, .v2-automation-revision-list article > header > span, .v2-automation-revision-list article > footer { display: flex; align-items: center; } .v2-automation-revision-list article > header { justify-content: space-between; gap: 12px; } .v2-automation-revision-list article > header > span { gap: 10px; } .v2-automation-revision-list article > header i { display: grid; width: 38px; height: 28px; place-items: center; border-radius: 7px; background: #eaf2ff; color: var(--event-blue); font-size: 12px; font-style: normal; font-weight: 700; } .v2-automation-revision-list article > p { margin: 0; color: #263244; font-size: 14px; font-weight: 600; line-height: 1.5; } .v2-automation-revision-list article > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; } .v2-automation-revision-list article > dl > div { min-width: 0; } .v2-automation-revision-list dt { margin-bottom: 3px; color: var(--event-muted); font-size: 11px; } .v2-automation-revision-list dd { margin: 0; overflow: hidden; color: #445269; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-revision-list article > footer { justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #edf0f4; } .v2-automation-revision-list article > footer small { color: var(--event-muted); line-height: 1.45; } .v2-event-template-shortcut { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 10px 6px 16px; background: #fbfcfe; border-top: 1px solid var(--event-border); color: var(--event-muted); font-size: 12px; } .v2-event-template-shortcut > div { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .v2-event-center .v2-event-template-shortcut .v2-alert-template-card { flex: none; padding-inline: 8px; font-size: 12px; } .v2-event-center .v2-event-automation-detail > .semi-card-body { height: 100%; } .v2-event-center .v2-alert-automation-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); gap: 0; padding: 28px 22px 22px; border-bottom: 1px solid var(--event-border); } .v2-event-center .v2-alert-automation-flow::before { position: absolute; top: 43px; right: 16%; left: 16%; height: 2px; background: #9fc2f8; content: ""; } .v2-event-center .v2-alert-automation-flow > span { position: relative; z-index: 1; display: grid; align-content: start; min-height: 150px; padding: 43px 18px 18px; background: #fff; border: 1px solid var(--event-border); border-radius: 8px; } .v2-event-center .v2-alert-automation-flow > span > i { position: absolute; top: -30px; left: 50%; display: grid; width: 30px; height: 30px; place-items: center; color: var(--event-blue); font-style: normal; font-weight: 700; background: #fff; border: 2px solid var(--event-blue); border-radius: 50%; transform: translateX(-50%); } .v2-event-center .v2-alert-automation-flow > span > b { margin-bottom: 16px; font-size: 14px; } .v2-event-center .v2-alert-automation-flow > span > em { color: var(--event-ink); font-size: 13px; font-style: normal; line-height: 1.55; } .v2-event-center .v2-alert-automation-flow > span > small { margin-top: 10px; color: var(--event-muted); font-size: 11px; line-height: 1.45; } .v2-event-center .v2-alert-automation-flow > svg { position: relative; z-index: 2; align-self: center; justify-self: center; color: var(--event-blue); } .v2-event-automation-lower { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .8fr); min-height: 300px; } .v2-event-center .v2-alert-automation-activity { min-width: 0; border-right: 1px solid var(--event-border); } .v2-event-center .v2-alert-automation-activity > header { min-height: 62px; padding: 12px 16px; border-bottom: 1px solid var(--event-border); } .v2-event-center .v2-alert-automation-run { width: 100%; min-height: 60px; border-bottom: 1px solid #edf0f4; } .v2-event-center .v2-alert-automation-run.semi-button .semi-button-content { grid-template-columns: 112px minmax(150px, 1fr) auto 20px; gap: 10px; } .v2-event-center .v2-event-contract-panel { border: 0; } .v2-event-center .v2-event-contract-panel .semi-collapse-header { min-height: 62px; padding: 12px 16px; border-bottom: 1px solid var(--event-border); } .v2-event-center .v2-event-contract-panel .semi-collapse-header span { display: grid; gap: 3px; } .v2-event-center .v2-event-contract-panel .semi-collapse-header small { color: var(--event-muted); font-weight: 400; } .v2-event-center .v2-event-contract-panel .semi-collapse-content { padding: 14px 16px; } .v2-event-center .v2-event-contract-panel code { color: #42526b; font-size: 11px; overflow-wrap: anywhere; } .v2-event-center .v2-alert-notification-cards { display: grid; grid-template-columns: 1fr; gap: 0; } .v2-event-center .v2-alert-notification-card { border: 0; border-bottom: 1px solid var(--event-border); border-radius: 0; box-shadow: none; } .v2-event-center .v2-alert-notification-card.is-unread { background: #f7faff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-event-center .v2-alert-notification-card .semi-card-header, .v2-event-center .v2-alert-notification-card .semi-card-body { padding-right: 18px; padding-left: 18px; } .v2-event-center .v2-alert-notification-card footer > span { display: flex; align-items: center; gap: 10px; } @media (max-width: 1180px) { .v2-event-source-rail { grid-template-columns: repeat(3, 1fr); } .v2-event-source-rail > header { display: none; } .v2-event-automation-summary { grid-template-columns: repeat(3, 1fr); } .v2-event-automation-summary > .is-source { display: none; } .v2-event-automation-lower { grid-template-columns: 1fr; } .v2-event-center .v2-alert-automation-activity { border-right: 0; border-bottom: 1px solid var(--event-border); } } @media (max-width: 900px) { .v2-event-center .v2-event-center-navigation-actions { width: 100%; } .v2-event-center .v2-event-center-navigation-actions > .v2-primary-button { display: none; } .v2-event-center .v2-alert-tabs { width: 100%; } .v2-event-center .v2-alert-tabs .semi-button { flex: 1; min-width: 0; } .v2-event-source-rail { display: flex; overflow-x: auto; } .v2-event-source-rail > div { flex: 0 0 230px; } .v2-event-automation-workspace { grid-template-columns: 1fr; } .v2-event-center .v2-event-automation-detail { display: none; } .v2-event-center .v2-alert-automation-library { min-height: auto; } .v2-event-center .v2-alert-automation-intro > span { display: none; } .v2-event-center .v2-alert-automation-intro > div { width: 100%; } } @media (max-width: 520px) { .v2-event-source-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 74px; overflow: hidden; } .v2-event-source-rail > div { display: grid; min-width: 0; padding: 9px 5px; gap: 5px; justify-items: center; } .v2-event-source-rail > div > span:first-child { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; } .v2-event-source-rail p { display: block; min-width: 0; text-align: center; } .v2-event-source-rail p strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-event-source-rail p small, .v2-event-source-rail .semi-tag { display: none; } } @media (prefers-reduced-motion: reduce) { .v2-event-center *, .v2-event-center *::before, .v2-event-center *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* Production event inbox — 2026-07-22 */ .v2-content.is-section-alerts { background: #f6f8fb; } .v2-event-center { --event-blue: #1267e8; --event-ink: #17243d; --event-muted: #65748a; --event-border: #e2e8f0; --event-surface: #fff; gap: 0; min-width: 0; font-size: 14px; padding: 0; } .v2-event-center .semi-button, .v2-event-center .semi-input, .v2-event-center .semi-select, .v2-event-center .semi-select-selection-text { font-size: 14px; } .v2-event-center .v2-alert-navigation { display: flex; min-height: 54px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--event-border); border-top: 0; border-right: 0; border-left: 0; border-radius: 0; margin: 0; box-shadow: none; } .v2-event-center .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs { align-items: stretch; gap: 24px; padding: 0; background: transparent; border-radius: 0; border: 0; box-shadow: none; } .v2-event-center .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button { position: relative; min-width: 72px; height: 54px; padding: 0 8px; border-radius: 0; border: 0; background: transparent; box-shadow: none; } .v2-event-center .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active, .v2-event-center .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active:hover { color: var(--event-blue); background: transparent; box-shadow: none; } .v2-event-center .v2-alert-tabs .semi-button.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ''; background: var(--event-blue); } .v2-event-center .v2-segmented-tab-count { min-width: 18px; height: 18px; padding: 0 5px; color: #c93535; font-size: 11px; font-style: normal; line-height: 18px; background: #fff0ef; border-radius: 9px; } .v2-event-center.is-events > .v2-alert-filter-card { margin: 16px 16px 0; } .v2-event-center .v2-alert-filter-card { overflow: visible; border: 1px solid var(--event-border); border-radius: 8px 8px 0 0; box-shadow: none; } .v2-event-center .v2-alert-filter-primary { display: grid; grid-template-columns: minmax(260px, 1.65fr) minmax(150px, .65fr) auto auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; } .v2-event-center .v2-alert-filter-primary > label:first-child { min-width: 0; } .v2-event-center .v2-alert-filter-primary .semi-input-wrapper, .v2-event-center .v2-alert-filter-primary .semi-select, .v2-event-center .v2-alert-filter-primary .v2-workspace-date-time-range { min-height: 40px; border-radius: 6px; } .v2-event-status-tabs { display: flex; gap: 4px; margin: 0 16px; padding: 0 12px; overflow-x: auto; background: #fff; border-right: 1px solid var(--event-border); border-bottom: 1px solid var(--event-border); border-left: 1px solid var(--event-border); } .v2-event-status-tabs .semi-button { position: relative; min-width: max-content; height: 48px; padding: 0 12px; border-radius: 0; } .v2-event-status-tabs .semi-button-content { display: flex; gap: 7px; align-items: center; } .v2-event-status-tabs strong { font-size: 12px; font-weight: 650; } .v2-event-status-tabs .semi-button[aria-pressed='true'] { color: var(--event-blue); } .v2-event-status-tabs .semi-button[aria-pressed='true']::after { position: absolute; right: 8px; bottom: 0; left: 8px; height: 2px; content: ''; background: currentcolor; } .v2-event-status-tabs .semi-button:nth-child(2)[aria-pressed='true'] { color: #c93535; } .v2-event-center .v2-alert-workspace { min-height: 620px; margin: 12px 16px 16px; } .v2-event-center .v2-alert-workspace.is-inspector-open { grid-template-columns: minmax(560px, 1fr) 400px; gap: 12px; } .v2-event-center .v2-alert-table-card, .v2-event-center .v2-alert-inspector { min-height: 620px; overflow: hidden; border: 1px solid var(--event-border); border-radius: 8px; box-shadow: none; } @media (min-width: 1181px) { .v2-event-center .v2-alert-inspector:not(.is-sheet) { position: fixed; z-index: 20; top: 142px; right: 16px; bottom: auto; width: 400px; height: calc(100dvh - 234px); min-height: 0; max-height: none; box-shadow: 0 8px 28px rgb(23 36 61 / 12%); } } .v2-event-center .v2-alert-table-card > .v2-workspace-panel-header { min-height: 54px; padding: 9px 14px; } .v2-event-center .v2-alert-table-card .v2-workspace-panel-header-description { display: none; } .v2-event-center .v2-alert-event-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 46px; padding: 0 14px; color: var(--event-muted); font-size: 12px; background: #f8fafc; } .v2-event-center .v2-alert-event-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 72px; padding: 10px 14px; } .v2-event-center .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-selected { background: #edf5ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-event-center .v2-alert-inspector { display: flex; position: sticky; top: 12px; flex-direction: column; max-height: calc(100dvh - 122px); background: #fff; } .v2-event-center .v2-alert-inspector > .semi-card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; } .v2-event-center .v2-alert-inspector-heading { flex: 0 0 auto; min-height: 54px; padding: 10px 14px; border-bottom: 1px solid var(--event-border); } .v2-event-center .v2-alert-inspector-heading .v2-workspace-panel-header-description { max-width: 220px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; } .v2-event-center .v2-alert-inspector-content { min-height: 0; padding: 0 16px; overflow-y: auto; } .v2-event-center .v2-alert-focus-card, .v2-event-center .v2-alert-disposition-card, .v2-event-center .v2-alert-progress-card { margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--event-border); border-radius: 0; box-shadow: none; } .v2-event-center .v2-alert-focus-card .semi-card-body, .v2-event-center .v2-alert-disposition-card .semi-card-body, .v2-event-center .v2-alert-progress-card .semi-card-body { padding: 0; } .v2-event-center .v2-alert-focus-card .semi-card-header, .v2-event-center .v2-alert-disposition-card .semi-card-header, .v2-event-center .v2-alert-progress-card .semi-card-header { min-height: 36px; padding: 0 0 10px; border: 0; } .v2-event-center .v2-alert-evidence { display: block; margin: 14px 0 0; padding: 12px; background: #f8fafc; border: 1px solid var(--event-border); border-radius: 6px; } .v2-event-center .v2-alert-evidence-value { display: flex; justify-content: space-between; min-height: 32px; padding: 6px 0; background: transparent; border: 0; border-bottom: 1px solid #edf1f6; border-radius: 0; } .v2-event-center .v2-alert-evidence-value:last-child { border-bottom: 0; } .v2-event-center .v2-alert-links { flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--event-border); } .v2-alert-inspector-actions { display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr .8fr; gap: 10px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--event-border); } .v2-alert-inspector-actions .semi-button { min-height: 40px; } /* Automation workspace */ .v2-event-center .v2-alert-automation-intro { display: grid; grid-template-columns: minmax(260px, 1fr) 160px 170px auto; gap: 10px; align-items: center; margin: 16px; padding: 0; } .v2-event-center .v2-alert-automation-intro > .semi-button { justify-self: end; min-height: 40px; } .v2-event-center .v2-event-automation-workspace { grid-template-columns: 340px minmax(0, 1fr); gap: 12px; min-height: 680px; margin: 0 16px 16px; } .v2-event-center .v2-alert-rule-list, .v2-event-center .v2-event-automation-detail { overflow: hidden; border: 1px solid var(--event-border); border-radius: 8px; box-shadow: none; } .v2-event-center .v2-alert-automation-row { min-height: 82px; padding: 10px 12px; border-bottom: 1px solid var(--event-border); border-radius: 0; } .v2-event-center .v2-alert-automation-row.is-selected { background: #edf5ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-event-center .v2-event-template-shortcut { display: none; } .v2-event-center .v2-alert-automation-flow { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; min-height: 164px; margin: 14px 16px 0; padding: 0; overflow: hidden; border: 1px solid var(--event-border); border-radius: 8px; } .v2-event-center .v2-alert-automation-flow::before { display: none; } .v2-event-center .v2-alert-automation-flow > span { display: flex; justify-content: center; padding: 22px; background: #fff; border: 0; border-radius: 0; box-shadow: none; } .v2-event-center .v2-alert-automation-flow > span > i { display: none; } .v2-event-center .v2-alert-automation-flow > span > b { color: var(--event-blue); font-size: 16px; } .v2-event-center .v2-alert-automation-flow > svg { align-self: center; color: #8794a6; } .v2-event-center .v2-event-automation-lower { grid-template-columns: minmax(0, 1fr) 310px; min-height: 390px; margin: 16px; overflow: hidden; border: 1px solid var(--event-border); border-radius: 8px; } .v2-event-center .v2-alert-automation-activity, .v2-event-center .v2-event-contract-panel { border: 0; border-radius: 0; } .v2-event-center .v2-event-contract-panel { border-left: 1px solid var(--event-border); } /* Automation editor */ .v2-alert-rule-editor-dialog { --event-blue: #1268f3; --event-border: #dce4ee; --event-text: #263b53; --event-muted: #718096; } .v2-alert-rule-editor-dialog.v2-workspace-dialog .semi-modal { width: min(1360px, calc(100vw - 24px)) !important; max-width: min(1360px, calc(100vw - 24px)); height: min(960px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); } .v2-alert-rule-editor-dialog.v2-workspace-dialog .semi-modal-content { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; } .v2-alert-rule-editor-dialog.v2-workspace-dialog .semi-modal-header, .v2-alert-rule-editor-dialog.v2-workspace-dialog .semi-modal-footer { flex: 0 0 auto; } .v2-alert-rule-editor-dialog .v2-workspace-dialog-title { width: 100%; } .v2-alert-rule-editor-dialog.v2-workspace-dialog .semi-modal-body { min-height: 0; flex: 1 1 auto; padding: 0; overflow: hidden; background: #f8fafc; } .v2-alert-rule-editor-dialog .v2-workspace-dialog-content, .v2-alert-rule-editor-dialog .v2-alert-rule-editor, .v2-alert-rule-editor-dialog .v2-alert-rule-editor-form { height: 100%; min-height: 0; } .v2-alert-rule-editor-dialog .v2-alert-rule-editor { overflow: hidden; border: 0; border-radius: 0; box-shadow: none; } .v2-alert-rule-editor-dialog .v2-alert-rule-editor-form { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; overscroll-behavior: contain; } .v2-alert-rule-editor-dialog .v2-alert-rule-editor-heading { display: none; } .v2-alert-rule-editor-sidesheet .v2-workspace-sidesheet-content { background: #f8fafc; } .v2-alert-rule-editor-sidesheet .semi-sidesheet-inner { width: min(1040px, calc(100vw - 48px)) !important; max-width: min(1040px, calc(100vw - 48px)); } .v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-heading { display: none; } .v2-alert-rule-editor-dialog .v2-automation-editor-steps { margin: 12px 16px 0; } .v2-alert-rule-editor-dialog .v2-alert-automation-builder { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; padding: 12px 16px 16px; overflow: hidden; } .v2-alert-rule-editor-dialog .v2-alert-automation-builder.is-wizard, .v2-alert-rule-editor-sidesheet .v2-alert-automation-builder.is-wizard { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .v2-alert-rule-editor-dialog .v2-alert-automation-builder.is-wizard .v2-alert-builder-step.is-trigger, .v2-alert-rule-editor-sidesheet .v2-alert-automation-builder.is-wizard .v2-alert-builder-step.is-trigger { grid-row: auto; } .v2-alert-rule-editor-dialog .v2-alert-builder-step { height: 100%; min-width: 0; overflow-y: auto; overscroll-behavior: contain; } .v2-alert-rule-editor-dialog .v2-alert-builder-step.is-trigger { grid-row: span 2; } .v2-alert-rule-editor-dialog .v2-alert-builder-connector { display: none; } .v2-alert-rule-editor-dialog .v2-alert-builder-step .v2-rule-form-section { border: 0; border-radius: 0; box-shadow: none; } .v2-alert-rule-editor-dialog .v2-alert-trigger-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v2-alert-rule-editor-dialog .v2-automation-wizard-summary { position: static; display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-alert-rule-editor-dialog .v2-automation-wizard-summary > div { min-height: 0; flex: 1 1 auto; overflow-y: auto; } .v2-alert-rule-editor-dialog .v2-automation-wizard-summary > footer { margin-top: auto; } .v2-alert-rule-editor-dialog .v2-automation-review-workspace { overflow: hidden; } .v2-alert-rule-editor-dialog .v2-rule-form-grid > .is-wide, .v2-alert-rule-editor-sidesheet .v2-rule-form-grid > .is-wide { grid-column: 1 / -1; } .v2-automation-editor-footer-error { overflow: hidden; color: #b42318; font-style: normal; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-editor-draft-status { color: #a15c08; font-weight: 650; } .v2-automation-discard-dialog .v2-workspace-dialog-title > .semi-tag { flex: 0 0 auto; } .v2-geofence-map-editor, .v2-vehicle-quick-selector { position: relative; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--event-border); border-radius: 8px; } .v2-geofence-map-editor > header, .v2-vehicle-quick-selector > header { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; background: #f8fafc; border-bottom: 1px solid var(--event-border); } .v2-geofence-map-editor > header > span, .v2-vehicle-quick-selector > header > span { display: grid; min-width: 0; gap: 3px; } .v2-geofence-map-editor small, .v2-vehicle-quick-selector small { color: var(--event-muted); font-weight: 400; } .v2-geofence-map-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 260px; min-height: 260px; overflow: hidden; pointer-events: auto; touch-action: none; user-select: none; background: #edf2f7; } .v2-geofence-map-editor.is-drawing .v2-geofence-map-canvas { cursor: crosshair; } .v2-geofence-map-error { display: flex; gap: 8px; align-items: center; min-height: 72px; padding: 14px; color: #b42318; background: #fff4f2; } .v2-geofence-map-editor > footer { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; color: var(--event-muted); font-size: 12px; } .v2-geofence-map-editor > footer > div, .v2-vehicle-quick-search { display: flex; gap: 8px; align-items: center; } .v2-vehicle-quick-search { padding: 12px 14px; border-bottom: 1px solid var(--event-border); } .v2-vehicle-quick-search .semi-input-wrapper { min-width: 0; flex: 1 1 auto; } .v2-vehicle-quick-selected { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--event-border); } .v2-vehicle-quick-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 236px; padding: 10px 12px 12px; overflow-y: auto; } .v2-vehicle-quick-results > .semi-button { height: auto; min-height: 56px; padding: 8px 10px; border-color: var(--event-border); background: #fff; } .v2-vehicle-quick-results > .semi-button.is-selected { border-color: #8ebaf8; background: #edf5ff; } .v2-vehicle-quick-results > .semi-button .semi-button-content { display: grid; width: 100%; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; } .v2-vehicle-quick-results > .semi-button .semi-button-content > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; } .v2-vehicle-quick-results strong, .v2-vehicle-quick-results small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-quick-status { display: grid; color: var(--event-blue); place-items: center; } .v2-vehicle-quick-status i { width: 8px; height: 8px; background: #a0aec0; border-radius: 50%; } .v2-vehicle-quick-status i.is-online { background: #20a464; box-shadow: 0 0 0 3px #e4f7ed; } .v2-vehicle-quick-remove { color: var(--event-muted); } .v2-vehicle-quick-results > p { grid-column: 1 / -1; margin: 8px 0; color: var(--event-muted); text-align: center; } .v2-automation-wizard-summary { position: sticky; top: 0; overflow: hidden; background: #fff; border: 1px solid var(--event-border); border-radius: 8px; } .v2-automation-wizard-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; background: #f8fafc; border-bottom: 1px solid var(--event-border); } .v2-automation-wizard-summary > header > span, .v2-automation-wizard-summary > footer > span { display: grid; min-width: 0; gap: 3px; } .v2-automation-wizard-summary small { color: var(--event-muted); font-weight: 400; } .v2-automation-wizard-summary > div > section { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 14px 12px; border-bottom: 1px solid var(--event-border); } .v2-automation-wizard-summary > div > section.is-current { background: #f3f8ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-automation-wizard-summary > div > section > i { display: grid; width: 26px; height: 26px; place-items: center; color: var(--event-blue); font-style: normal; font-weight: 700; background: #edf5ff; border-radius: 50%; } .v2-automation-wizard-summary > div > section > span { display: grid; min-width: 0; gap: 4px; } .v2-automation-wizard-summary > div > section b, .v2-automation-wizard-summary > div > section small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-wizard-summary > div > section > .semi-button { min-width: 44px; padding-inline: 6px; } .v2-automation-wizard-summary > footer { display: flex; align-items: flex-start; gap: 9px; padding: 13px 14px; color: #278254; background: #eef9f2; } .v2-automation-review-workspace { display: flex; height: 100%; min-height: 0; flex-direction: column; background: #f8fafc; } .v2-automation-release-audit { display: grid; flex: 0 0 auto; gap: 10px; margin: 10px 16px 0; border: 1px solid #dbe4ee; border-radius: 8px; background: #fff; padding: 12px 14px; } .v2-automation-release-audit.has-changes { border-color: #ebc68e; background: #fffdf8; } .v2-automation-release-audit > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .v2-automation-release-audit > header > span, .v2-automation-release-audit > footer > span { display: grid; min-width: 0; gap: 2px; } .v2-automation-release-audit > header strong { color: var(--event-text); font-size: 13px; } .v2-automation-release-audit > header small, .v2-automation-release-audit > footer small, .v2-automation-release-audit > p { margin: 0; color: var(--event-muted); font-size: 10px; line-height: 1.45; } .v2-automation-release-audit > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; } .v2-automation-release-audit > div > span { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) 14px minmax(0, 1fr); gap: 6px; align-items: center; border-radius: 6px; background: #fff; padding: 7px 9px; box-shadow: inset 0 0 0 1px #e7edf4; } .v2-automation-release-audit > div b { color: #7b5a24; font-size: 10px; white-space: nowrap; } .v2-automation-release-audit > div small, .v2-automation-release-audit > div strong { overflow: hidden; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-release-audit > div small { color: #8592a3; text-decoration: line-through; } .v2-automation-release-audit > div strong { color: #8b4e07; } .v2-automation-release-audit > div svg { color: #c29048; } .v2-automation-release-audit > footer { display: flex; align-items: flex-start; gap: 8px; color: #267352; } .v2-automation-review-grid { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr); gap: 14px; padding: 12px 16px 16px; overflow: hidden; } .v2-automation-review-summary, .v2-automation-review-test > section, .v2-automation-review-success { background: #fff; border: 1px solid var(--event-border); border-radius: 8px; } .v2-automation-review-summary { min-height: 0; overflow-y: auto; } .v2-automation-review-summary > section { display: grid; min-height: 116px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 18px 16px; border-bottom: 1px solid var(--event-border); } .v2-automation-review-summary > section:last-child { border-bottom: 0; } .v2-automation-review-summary > section > span { display: grid; width: 40px; height: 40px; place-items: center; color: var(--event-blue); background: #edf5ff; border-radius: 8px; } .v2-automation-review-summary > section > span.is-event { color: #e26b28; background: #fff4eb; } .v2-automation-review-summary > section > span.is-condition { color: #7047d7; background: #f4efff; } .v2-automation-review-summary > section > span.is-action { color: #278254; background: #ebf8f0; } .v2-automation-review-summary > section > div { display: grid; min-width: 0; gap: 6px; } .v2-automation-review-summary > section strong { font-size: 15px; } .v2-automation-review-summary > section b { overflow: hidden; color: var(--event-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-review-summary > section small { overflow: hidden; color: var(--event-muted); text-overflow: ellipsis; white-space: nowrap; } .v2-automation-review-summary > section > .semi-button { min-width: 68px; } .v2-automation-review-test { display: grid; min-height: 0; grid-template-rows: auto minmax(196px, 1fr) auto; gap: 12px; overflow-y: auto; } .v2-automation-review-test .v2-automation-sample-test { margin: 0; padding: 0; overflow: hidden; } .v2-automation-review-test .v2-automation-sample-test > header, .v2-automation-review-trace > header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--event-border); } .v2-automation-review-test .v2-automation-sample-test > header > span, .v2-automation-review-trace > header { gap: 3px; } .v2-automation-review-test .v2-automation-sample-test > header > span, .v2-automation-review-trace > header > strong, .v2-automation-review-trace > header > small { min-width: 0; } .v2-automation-review-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; } .v2-automation-review-fields > span { display: grid; min-width: 0; gap: 5px; } .v2-automation-review-fields small { color: var(--event-muted); } .v2-automation-review-fields code { min-width: 0; padding: 9px 10px; overflow: hidden; color: #41516a; text-overflow: ellipsis; white-space: nowrap; background: #f8fafc; border: 1px solid var(--event-border); border-radius: 6px; } .v2-automation-review-trace { min-height: 0; overflow: hidden; } .v2-automation-review-trace > header { display: grid; } .v2-automation-review-trace .v2-automation-test-trace { gap: 0; margin: 0; padding: 4px 16px; } .v2-automation-review-trace .v2-automation-test-trace li { position: relative; min-height: 62px; padding: 13px 0; border-bottom: 1px solid var(--event-border); } .v2-automation-review-trace .v2-automation-test-trace li:last-child { border-bottom: 0; } .v2-automation-review-trace .v2-automation-test-empty { margin: 0; padding: 30px 16px; } .v2-automation-review-success { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 12px 16px; color: #278254; background: #eef9f2; border-color: #8ccca6; } .v2-automation-editor-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 16px 0; padding: 8px 10px; background: #fff; border: 1px solid var(--event-border); border-radius: 8px; } .v2-automation-editor-steps > .semi-button { height: auto; min-height: 48px; padding: 4px 8px; border-radius: 6px; } .v2-automation-editor-steps > .semi-button .semi-button-content { display: grid; width: 100%; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: center; color: var(--event-muted); text-align: left; } .v2-automation-editor-steps i { display: grid; width: 26px; height: 26px; place-items: center; font-style: normal; border: 1px solid #cbd5e1; border-radius: 50%; } .v2-automation-editor-steps > .semi-button .semi-button-content > span { display: grid; min-width: 0; gap: 2px; } .v2-automation-editor-steps b { color: inherit; font-size: 13px; } .v2-automation-editor-steps small { overflow: hidden; color: #8a97a9; font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } .v2-automation-editor-steps > .semi-button.is-complete .semi-button-content, .v2-automation-editor-steps > .semi-button.is-active .semi-button-content { color: var(--event-blue); } .v2-automation-editor-steps > .semi-button.is-active { background: #edf5ff; } .v2-automation-editor-steps > .semi-button.is-active i { color: #fff; background: var(--event-blue); border-color: var(--event-blue); } .v2-automation-editor-steps > .semi-button.is-complete i { background: #f1f7ff; border-color: #9fc2f5; } .v2-alert-rule-editor-sidesheet .v2-alert-automation-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; } .v2-alert-rule-editor-sidesheet .v2-alert-builder-step { min-width: 0; } .v2-alert-rule-editor-sidesheet .v2-alert-builder-step.is-trigger { grid-row: span 2; } .v2-alert-rule-editor-sidesheet .v2-alert-builder-connector { display: none; } .v2-automation-sample-test { margin: 0 16px 16px; padding: 16px; background: #fff; border: 1px solid var(--event-border); border-radius: 8px; } .v2-automation-sample-test > header { display: flex; justify-content: space-between; align-items: center; } .v2-automation-sample-test > header > span { display: grid; gap: 2px; } .v2-automation-sample-test small { color: var(--event-muted); } .v2-automation-sample-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .v2-automation-sample-fields > span { display: grid; gap: 5px; padding: 10px; background: #f8fafc; border: 1px solid var(--event-border); border-radius: 6px; } .v2-automation-test-trace { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; } .v2-automation-test-trace li { display: flex; gap: 10px; align-items: flex-start; color: #278254; } .v2-automation-test-trace span { display: grid; } .v2-automation-test-empty { margin: 14px 0 0; color: var(--event-muted); } .v2-alert-notification-route-config { display: grid; gap: 12px; border: 1px solid #dbe5f0; border-radius: 10px; padding: 14px; background: #f8fafc; } .v2-alert-notification-route-config > header, .v2-alert-notification-route-config > footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; } .v2-alert-notification-route-config > header > span, .v2-alert-notification-route-config > footer > span { display: grid; min-width: 0; gap: 2px; } .v2-alert-notification-route-config > header small, .v2-alert-notification-route-config > footer small, .v2-alert-notification-route span small { color: var(--event-muted); font-size: 11px; line-height: 1.45; } .v2-alert-notification-route-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .v2-alert-notification-route { display: grid; min-width: 0; grid-template-columns: auto minmax(88px, 1fr) minmax(130px, .9fr); gap: 9px; align-items: center; border: 1px solid #e0e7ef; border-radius: 8px; padding: 10px; background: #fff; } .v2-alert-notification-route.is-selected { border-color: #a9c8ef; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-alert-notification-route.is-unavailable { color: #7d8997; background: #f5f7f9; } .v2-alert-notification-route > span { display: grid; min-width: 0; gap: 2px; } .v2-alert-notification-route .semi-select { width: 100%; min-width: 0; } .v2-alert-notification-route-config > footer { justify-content: flex-start; border-radius: 8px; padding: 10px 12px; color: #286749; background: #eef9f3; } .v2-alert-notification-route-config > footer.is-queued { color: #755a24; background: #fff8e8; } @media (min-width: 1200px) { .v2-alert-rule-editor-dialog .v2-alert-notification-route-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v2-alert-rule-editor-dialog .v2-alert-notification-route { grid-template-columns: auto minmax(0, 1fr); } .v2-alert-rule-editor-dialog .v2-alert-notification-route > .semi-select, .v2-alert-rule-editor-dialog .v2-alert-notification-route > .semi-tag { grid-column: 1 / -1; justify-self: stretch; } } /* Delivery audit */ .v2-alert-delivery-workspace { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 720px; margin: 16px; background: #fff; border: 1px solid var(--event-border); border-radius: 8px; overflow: hidden; } .v2-alert-delivery-workspace.is-inspector-open { grid-template-columns: minmax(560px, 1fr) 400px; } .v2-alert-delivery-main { min-width: 0; } .v2-alert-delivery-health { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(360px, 1fr) auto; gap: 12px; align-items: center; margin: 12px; border: 1px solid #dce6ef; border-radius: 9px; padding: 10px 12px; background: #f8fafc; } .v2-alert-delivery-health.has-dead-letter { border-color: #edcbc7; background: #fff8f7; } .v2-alert-delivery-health > header, .v2-alert-delivery-health > header > span { display: flex; min-width: 0; gap: 8px; align-items: center; } .v2-alert-delivery-health > header > span { display: grid; gap: 1px; } .v2-alert-delivery-health > header > .semi-button { margin-left: auto; } .v2-alert-delivery-health small { color: var(--event-muted); font-size: 10px; } .v2-alert-delivery-health-metrics { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 6px; } .v2-alert-delivery-health-metrics > span { display: grid; gap: 1px; border-left: 1px solid #e1e8f0; padding-left: 10px; } .v2-alert-delivery-health-metrics strong { font-size: 18px; line-height: 1.1; } .v2-alert-delivery-health-metrics > span.is-danger strong { color: #b73632; } .v2-alert-delivery-health > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; } .v2-alert-delivery-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 140px 150px auto auto; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--event-border); } .v2-alert-delivery-table-wrap { min-height: 600px; } .v2-alert-delivery-table .semi-table-row-head, .v2-alert-delivery-table .semi-table-row-cell { padding: 12px 14px; } .v2-alert-delivery-table .semi-table-tbody > .semi-table-row { height: 72px; } .v2-alert-delivery-table .semi-table-tbody > .semi-table-row.is-selected { background: #edf5ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-delivery-identity, .v2-delivery-inspector-title { display: flex; gap: 10px; align-items: center; min-width: 0; } .v2-delivery-identity > span, .v2-delivery-inspector-title > span:first-child { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; color: var(--event-blue); background: #eaf2ff; border-radius: 8px; } .v2-delivery-identity > span.is-critical, .v2-delivery-inspector-title > span.is-critical { color: #c93535; background: #fff0ef; } .v2-delivery-identity p, .v2-delivery-inspector-title p, .v2-delivery-channel { display: grid; min-width: 0; gap: 2px; margin: 0; } .v2-delivery-identity small, .v2-delivery-inspector-title small, .v2-delivery-channel small { color: var(--event-muted); font-size: 12px; } .v2-delivery-state { display: inline-flex; gap: 7px; align-items: center; } .v2-delivery-state i { width: 7px; height: 7px; background: #278254; border-radius: 50%; } .v2-delivery-state.is-failed { color: #b73632; font-weight: 700; } .v2-delivery-state.is-failed i { background: #d94b45; } .v2-delivery-state.is-queued { color: #8b641b; } .v2-delivery-state.is-queued i { background: #d39a2f; } .v2-delivery-read { color: var(--event-muted); } .v2-delivery-read.is-read { color: var(--event-blue); } .v2-delivery-read.is-na { color: #8b97a7; } .v2-alert-delivery-inspector { display: flex; min-width: 0; flex-direction: column; background: #fff; border-left: 1px solid var(--event-border); } .v2-alert-delivery-inspector > header, .v2-alert-delivery-inspector > footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--event-border); } .v2-alert-delivery-inspector-content { flex: 1; padding: 18px; overflow-y: auto; } .v2-delivery-inspector-title > .v2-delivery-state { margin-left: auto; } .v2-delivery-message { margin: 16px 0; padding: 12px; line-height: 1.6; background: #f8fafc; border: 1px solid var(--event-border); border-radius: 6px; } .v2-alert-delivery-inspector dl { display: grid; gap: 0; margin: 0; } .v2-alert-delivery-inspector dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f6; } .v2-alert-delivery-inspector dt { color: var(--event-muted); } .v2-alert-delivery-inspector dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .v2-delivery-timeline { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--event-border); } .v2-delivery-recovery { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 16px; border: 1px solid #f0c9c5; border-radius: 8px; color: #8f3a35; background: #fff7f6; padding: 10px; } .v2-delivery-recovery > svg { font-size: 18px; } .v2-delivery-recovery > span { display: grid; min-width: 0; gap: 2px; } .v2-delivery-recovery strong { font-size: 13px; } .v2-delivery-recovery small { color: #99635f; font-size: 11px; line-height: 1.45; } .v2-delivery-recovery.is-exhausted { border-color: #e5cda2; color: #74551d; background: #fffbf2; } .v2-delivery-recovery.is-exhausted small { color: #8a7246; } .v2-delivery-recovery-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; } .v2-delivery-recovery-actions > .semi-button, .v2-delivery-recovery-actions > a { min-height: 34px; border-radius: 7px; font-size: 11px; font-weight: 700; } .v2-delivery-recovery-actions > a { display: inline-flex; align-items: center; border: 1px solid #d9e5f3; background: #fff; padding: 0 11px; color: #2165ba; text-decoration: none; } .v2-delivery-recovery-actions > a:hover { border-color: #b8cde8; background: #f5f9ff; } .v2-delivery-retry-receipt { display: grid; min-height: 54px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 12px 10px; border: 1px solid #bfded0; border-radius: 9px; padding: 9px 10px; color: #286749; background: #f3fbf7; } .v2-delivery-retry-receipt.is-queued { border-color: #ead4a7; color: #755a24; background: #fffaf0; } .v2-delivery-retry-receipt > span { display: grid; gap: 2px; } .v2-delivery-retry-receipt strong { font-size: 13px; } .v2-delivery-retry-receipt small { color: currentColor; font-size: 11px; opacity: .78; } .v2-delivery-retry-audit { display: grid; gap: 10px; margin-top: 18px; border-top: 1px solid var(--event-border); padding-top: 16px; } .v2-delivery-retry-audit > header { display: flex; justify-content: space-between; gap: 12px; } .v2-delivery-retry-audit > header small, .v2-delivery-retry-audit > small { color: var(--event-muted); font-size: 11px; } .v2-delivery-retry-audit ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .v2-delivery-retry-audit li { display: grid; gap: 6px; border: 1px solid #e3eaf2; border-radius: 8px; padding: 10px; background: #f8fafc; } .v2-delivery-retry-audit li > span { display: flex; justify-content: space-between; gap: 8px; } .v2-delivery-retry-audit li small { color: var(--event-muted); font-size: 10px; } .v2-delivery-retry-audit li p { margin: 0; color: #53657b; font-size: 11px; line-height: 1.5; } .v2-alert-delivery-inspector dl > div.is-wide { grid-template-columns: 120px minmax(0, 1fr); } .v2-alert-delivery-inspector dl > div.is-error dd { color: #a63f39; } .v2-workspace-dialog.v2-notification-retry-dialog .semi-modal { width: min(620px, calc(100vw - 32px)) !important; } .v2-notification-retry-form { display: grid; gap: 14px; } .v2-notification-retry-form > p { margin: 0; color: #53657b; font-size: 12px; line-height: 1.6; } .v2-notification-retry-form .v2-workspace-dialog-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v2-notification-retry-form > label { display: grid; gap: 7px; color: #40556e; font-size: 12px; font-weight: 700; } .v2-notification-retry-form > label > small { color: #77879a; font-size: 10px; font-weight: 400; } .v2-alert-delivery-inspector > footer { border-top: 1px solid var(--event-border); border-bottom: 0; } @media (max-width: 1180px) { .v2-event-center .v2-alert-workspace.is-inspector-open { grid-template-columns: minmax(0, 1fr); } .v2-event-center .v2-alert-workspace.is-inspector-open > .v2-alert-inspector { position: fixed; z-index: 25; top: 72px; right: 16px; bottom: auto; width: min(420px, calc(100vw - 32px)); height: calc(100dvh - 164px); min-height: 0; max-height: none; box-shadow: 0 8px 28px rgb(23 36 61 / 14%); } .v2-alert-delivery-workspace.is-inspector-open { grid-template-columns: minmax(0, 1fr); } .v2-alert-delivery-inspector { position: fixed; z-index: 25; top: 72px; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 8px 28px rgb(23 36 61 / 14%); } } @media (max-width: 900px) { .v2-event-center .v2-alert-filter-primary { grid-template-columns: minmax(220px, 1fr) 150px auto auto auto auto; } .v2-event-center .v2-alert-filter-primary .v2-workspace-date-time-range { display: none; } .v2-event-center .v2-event-automation-workspace { grid-template-columns: 300px minmax(0, 1fr); } .v2-event-center .v2-alert-automation-flow { grid-template-columns: 1fr; } .v2-event-center .v2-alert-automation-flow > svg { display: none; } .v2-event-center .v2-event-automation-lower { grid-template-columns: 1fr; } .v2-event-center .v2-event-contract-panel { border-top: 1px solid var(--event-border); border-left: 0; } } @media (max-width: 640px) { .v2-content.is-section-alerts { padding-right: 0; padding-left: 0; background: #fff; } .v2-event-center .v2-alert-navigation { min-height: 52px; padding: 0 12px; overflow-x: auto; } .v2-event-center.is-events { display: block; height: auto; min-height: 100%; overflow: visible; } .v2-event-center.is-notifications { display: block; height: auto; min-height: 100%; overflow: visible; } .v2-event-center .v2-alert-tabs { width: 100%; gap: 0; justify-content: space-between; } .v2-event-center .v2-alert-tabs .semi-button { min-width: max-content; height: 52px; } .v2-alert-mobile-discovery { padding: 12px; border-bottom: 1px solid var(--event-border); } .v2-alert-mobile-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .v2-alert-mobile-search .semi-input-wrapper, .v2-alert-mobile-search .semi-button { min-height: 44px; } .v2-event-status-tabs { height: 52px; margin: 0; padding: 0 8px; border-right: 0; border-left: 0; } .v2-event-status-tabs .semi-button:first-child, .v2-event-status-tabs .semi-button:nth-child(n+5) { display: none; } .v2-event-center .v2-alert-workspace { min-height: 0; margin: 0 0 72px; } .v2-event-center .v2-alert-table-card { min-height: 0; border: 0; border-radius: 0; } .v2-event-center .v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header { display: none; } .v2-event-center .v2-alert-table-card > .semi-card-body { display: block; height: auto; min-height: 0; } .v2-event-center .v2-alert-table-scroll { height: auto; min-height: 0; max-height: none; overflow: visible; } .v2-event-center .v2-alert-mobile-list { gap: 0; } .v2-event-center .v2-alert-mobile-card { border: 0; border-bottom: 1px solid var(--event-border); border-radius: 0; box-shadow: none; } .v2-event-center .v2-alert-mobile-card.is-selected { background: #edf5ff; box-shadow: inset 3px 0 0 var(--event-blue); } .v2-event-center .v2-alert-mobile-action { min-height: 108px; padding: 14px 16px; } .v2-event-center .v2-alert-mobile-card-content dl { display: flex; gap: 14px; } .v2-event-center .v2-alert-mobile-card-content dl > div:last-child { display: none; } .v2-event-center .v2-alert-mobile-card-content footer { display: none; } .v2-event-center .v2-alert-table-card > .semi-card-body > footer { display: none; } .v2-alert-detail-sidesheet .v2-alert-inspector-actions { position: sticky; z-index: 2; right: 0; bottom: 0; left: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); } .v2-event-center .v2-alert-automation-intro { grid-template-columns: minmax(0, 1fr) auto; margin: 12px; } .v2-event-center .v2-alert-automation-intro .semi-select { display: none; } .v2-event-center .v2-event-automation-workspace { display: block; margin: 0 0 72px; } .v2-event-center .v2-event-automation-detail { display: none; } .v2-event-center .v2-alert-rule-list { border-right: 0; border-left: 0; border-radius: 0; } .v2-event-center .v2-alert-automation-row { grid-template-columns: 36px minmax(0, 1fr) 42px 42px auto; grid-template-areas: "icon content history clone switch"; gap: 0 6px; } .v2-event-center .v2-alert-automation-history.semi-button, .v2-event-center .v2-alert-automation-clone.semi-button { width: 42px; height: 42px; align-self: center; justify-content: center; color: var(--event-blue); } .v2-event-center .v2-alert-automation-history.semi-button { grid-area: history; } .v2-event-center .v2-alert-automation-clone.semi-button { grid-area: clone; } .v2-alert-rule-revision-sidesheet.semi-sidesheet-bottom .semi-sidesheet-inner { overflow: hidden; border-radius: 18px 18px 0 0; } .v2-alert-rule-revision-sidesheet.semi-sidesheet-bottom .semi-sidesheet-body { overflow-y: auto; overscroll-behavior: contain; } .v2-automation-revision-list { gap: 10px; } .v2-automation-revision-list > article { padding: 14px; } .v2-automation-revision-list article > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-automation-revision-list article > dl > div:nth-child(n + 3) { grid-column: 1 / -1; } .v2-automation-revision-list article > dl > div:nth-child(n + 3) dd { white-space: normal; } .v2-automation-revision-list article > footer { align-items: stretch; flex-direction: column; } .v2-automation-revision-list article > footer .semi-button { min-height: 42px; } .v2-event-center .v2-alert-automation-version { display: none; } .v2-alert-delivery-workspace { min-height: 0; margin: 0 0 72px; border: 0; border-radius: 0; } .v2-alert-notification-route-list { grid-template-columns: 1fr; } .v2-alert-notification-route { grid-template-columns: auto minmax(92px, 1fr) minmax(116px, .9fr); } .v2-alert-notification-route > span small { display: none; } .v2-alert-delivery-health { grid-template-columns: 1fr; margin: 8px; } .v2-alert-delivery-health > footer { justify-content: flex-start; } .v2-alert-delivery-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; } .v2-alert-delivery-toolbar > .semi-input-wrapper { grid-column: 1 / -1; } .v2-alert-delivery-toolbar .semi-select { display: flex; width: 100%; min-width: 0; } .v2-alert-delivery-toolbar > .semi-input-wrapper, .v2-alert-delivery-toolbar .semi-select, .v2-alert-delivery-toolbar .semi-button:nth-of-type(2) { min-height: 42px; } .v2-alert-delivery-toolbar .semi-button:nth-of-type(1) { display: none; } .v2-alert-delivery-toolbar .semi-button:nth-of-type(2), .v2-alert-delivery-toolbar .v2-role-badge { grid-column: 1 / -1; } .v2-alert-delivery-table-wrap { min-height: 0; } .v2-alert-delivery-mobile-list { display: grid; } .v2-alert-delivery-mobile-row { min-height: 84px; padding: 14px 16px; border-bottom: 1px solid var(--event-border); border-radius: 0; } .v2-alert-delivery-mobile-row .semi-button-content { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; text-align: left; } .v2-alert-delivery-mobile-row span { display: grid; min-width: 0; } .v2-alert-delivery-mobile-row small { color: var(--event-muted); } .v2-alert-delivery-mobile-row em { color: #278254; font-size: 12px; font-style: normal; } .v2-alert-delivery-mobile-row em.is-failed { color: #b73632; font-weight: 700; } .v2-alert-delivery-mobile-row em.is-queued { color: #8b641b; } .v2-delivery-recovery { grid-template-columns: 28px minmax(0, 1fr); } .v2-delivery-recovery-actions { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .v2-delivery-recovery-actions > .semi-button, .v2-delivery-recovery-actions > a { min-height: 42px; justify-content: center; } .v2-delivery-retry-receipt { margin-inline: 8px; } .v2-delivery-retry-audit li > span { align-items: flex-start; flex-direction: column; } .v2-workspace-dialog.v2-notification-retry-dialog .semi-modal { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px); } .v2-notification-retry-form .v2-workspace-dialog-summary { grid-template-columns: 1fr; } .v2-notification-retry-form .v2-workspace-dialog-summary > span + span { border-top: 1px solid #e3eaf2; border-left: 0; } .v2-alert-notification-pagination { display: none; } .v2-alert-delivery-inspector { top: 0; right: 0; bottom: 0; width: 100%; } .v2-automation-sample-fields { grid-template-columns: 1fr; } } /* Scale pass: searchable, paged automation library and denser mobile timeline. */ .v2-event-center .v2-alert-automation-intro { grid-template-columns: minmax(260px, 1fr) minmax(286px, 330px) 170px auto; } .v2-event-center .v2-alert-automation-status-tabs { min-width: 286px; min-height: 40px; border: 1px solid var(--event-border); border-radius: 8px; background: #f5f7fa; padding: 3px; } .v2-event-center .v2-alert-automation-status-tabs > .semi-button { min-width: 0; min-height: 32px; flex: 1; border-radius: 6px; } .v2-event-center .v2-alert-automation-status-tabs .v2-segmented-tab-count { min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgb(31 45 64 / 7%); font-size: 10px; font-style: normal; line-height: 18px; } .v2-event-center .v2-alert-rule-items { max-height: none; overflow: visible; } .v2-event-center .v2-alert-automation-row { content-visibility: auto; contain-intrinsic-size: auto 82px; } .v2-event-center .v2-alert-rule-copy > span > .semi-tag { flex: 0 0 auto; } .v2-event-center .v2-alert-rule-pagination { min-height: 58px; border-top: 1px solid var(--event-border); background: #fbfcfe; padding: 8px 10px; } .v2-alert-rule-mobile-detail-content { display: grid; gap: 18px; } .v2-alert-rule-mobile-detail-content .v2-alert-automation-flow { margin: 0; } @media (max-width: 1080px) and (min-width: 641px) { .v2-event-center .v2-alert-automation-intro { grid-template-columns: minmax(240px, 1fr) minmax(250px, auto) 150px auto; } .v2-event-center .v2-alert-automation-status-tabs { min-width: 250px; } } @media (max-width: 640px) { .v2-event-center .v2-event-status-tabs { display: flex; height: 52px; justify-content: flex-start; gap: 2px; overflow-x: auto; padding: 0 8px; scrollbar-width: none; scroll-snap-type: x proximity; } .v2-event-center .v2-event-status-tabs::-webkit-scrollbar { display: none; } .v2-event-center .v2-event-status-tabs .semi-button:first-child, .v2-event-center .v2-event-status-tabs .semi-button:nth-child(n+5) { display: inline-flex; } .v2-event-center .v2-event-status-tabs .semi-button { min-width: 78px; flex: 0 0 auto; scroll-snap-align: start; } .v2-event-center .v2-alert-mobile-card { content-visibility: auto; contain-intrinsic-size: auto 96px; } .v2-event-center .v2-alert-mobile-action.semi-button { min-height: 94px; padding: 0; } .v2-event-center .v2-alert-mobile-card-content { position: relative; min-height: 94px; padding: 11px 38px 10px 14px; } .v2-event-center .v2-alert-mobile-card-content header > strong { max-width: calc(100% - 82px); font-size: 14px; } .v2-event-center .v2-alert-mobile-card-content > p { display: flex; min-width: 0; align-items: baseline; gap: 8px; margin: 5px 0 0; line-height: 1.25; } .v2-event-center .v2-alert-mobile-card-content > p > strong { flex: 0 0 auto; color: #26374d; font-size: 13px; } .v2-event-center .v2-alert-mobile-card-content > p > span { overflow: hidden; color: var(--event-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-event-center .v2-alert-mobile-facts { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 7px; color: #68788d; font-size: 11px; white-space: nowrap; } .v2-event-center .v2-alert-mobile-facts > span { overflow: hidden; text-overflow: ellipsis; } .v2-event-center .v2-alert-mobile-condition { flex: 1; } .v2-event-center .v2-alert-mobile-condition > i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .v2-event-center .v2-alert-mobile-card-content > footer { display: flex; position: absolute; top: 50%; right: 9px; width: 22px; height: 44px; align-items: center; justify-content: center; color: #9aa7b7; transform: translateY(-50%); } .v2-event-center .v2-alert-automation-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 0; border-bottom: 1px solid var(--event-border); padding: 12px; } .v2-event-center .v2-alert-automation-intro > .semi-input-wrapper { grid-column: 1 / -1; width: 100%; } .v2-event-center .v2-alert-automation-status-tabs { grid-column: 1 / -1; width: 100%; min-width: 0; overflow-x: auto; } .v2-event-center .v2-alert-automation-status-tabs > .semi-button { font-size: 12px; } .v2-event-center .v2-alert-automation-intro .semi-select { display: flex; width: 100%; min-height: 40px; } .v2-event-center .v2-alert-automation-intro > .semi-button { width: 44px; min-width: 44px; min-height: 40px; justify-self: end; padding: 0; font-size: 0; } .v2-event-center .v2-alert-automation-intro > .semi-button .semi-icon { margin: 0; font-size: 17px; } .v2-event-center .v2-alert-automation-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "icon content switch" "icon content version"; min-height: 74px; gap: 0 8px; padding: 8px 12px; } .v2-event-center .v2-alert-automation-row .v2-alert-rule-copy { gap: 5px; } .v2-event-center .v2-alert-automation-row .v2-alert-rule-copy > span { gap: 6px; } .v2-event-center .v2-alert-automation-row .v2-alert-automation-version { display: block; } .v2-event-center .v2-alert-rule-pagination { position: sticky; z-index: 2; bottom: 0; min-height: 62px; padding-bottom: max(8px, env(safe-area-inset-bottom)); } .v2-alert-rule-mobile-detail .v2-workspace-config-summary { grid-template-columns: 1fr; } .v2-alert-rule-mobile-detail .v2-alert-automation-flow { grid-template-columns: 1fr; } .v2-alert-rule-mobile-detail .v2-alert-automation-flow > svg { display: none; } } @media (max-width: 767px) { .v2-alert-rule-editor-sidesheet .v2-alert-rule-editor, .v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form { height: 100%; min-height: 0; } .v2-alert-rule-editor-sidesheet .v2-alert-rule-editor-form { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } .v2-alert-rule-editor-sidesheet .v2-alert-automation-builder.is-wizard { grid-template-columns: minmax(0, 1fr); min-height: 0; align-content: start; padding: 12px; overflow-y: auto; overscroll-behavior: contain; } .v2-alert-rule-editor-sidesheet .v2-automation-editor-steps, .v2-alert-rule-editor-sidesheet .v2-automation-review-workspace > .v2-automation-editor-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 12px; padding: 6px; } .v2-alert-rule-editor-sidesheet .v2-automation-editor-steps > .semi-button { min-width: 0; min-height: 46px; padding-inline: 4px; } .v2-alert-rule-editor-sidesheet .v2-automation-editor-steps > .semi-button .semi-button-content { grid-template-columns: 20px minmax(0, 1fr); gap: 4px; } .v2-alert-rule-editor-sidesheet .v2-automation-editor-steps i { width: 20px; height: 20px; font-size: 10px; } .v2-alert-rule-editor-sidesheet .v2-automation-editor-steps b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-rule-editor-sidesheet .v2-automation-editor-steps small { display: none; } .v2-alert-rule-editor-sidesheet .v2-automation-wizard-summary { position: static; } .v2-alert-rule-editor-sidesheet .v2-automation-wizard-summary > header { min-height: 52px; padding: 10px 12px; } .v2-alert-rule-editor-sidesheet .v2-automation-wizard-summary > div, .v2-alert-rule-editor-sidesheet .v2-automation-wizard-summary > footer { display: none; } .v2-alert-rule-editor-sidesheet .v2-automation-review-grid { display: block; grid-template-columns: minmax(0, 1fr); padding: 0 12px 16px; overflow-y: auto; } .v2-alert-rule-editor-sidesheet .v2-automation-release-audit { margin: 0 12px 10px; padding: 10px; } .v2-alert-rule-editor-sidesheet .v2-automation-release-audit > div { grid-template-columns: minmax(0, 1fr); } .v2-alert-rule-editor-sidesheet .v2-automation-release-audit > div > span { grid-template-columns: auto minmax(0, 1fr) 12px minmax(0, 1fr); } .v2-alert-rule-editor-sidesheet .v2-automation-review-summary, .v2-alert-rule-editor-sidesheet .v2-automation-review-test { overflow: visible; } .v2-alert-rule-editor-sidesheet .v2-automation-review-summary { height: auto; } .v2-alert-rule-editor-sidesheet .v2-automation-review-test { grid-template-rows: auto auto auto; margin-top: 12px; } .v2-alert-rule-editor-sidesheet .v2-automation-review-summary > section { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 0; padding: 14px 12px; } .v2-alert-rule-editor-sidesheet .v2-automation-review-summary > section > span { width: 34px; height: 34px; } .v2-geofence-map-canvas { height: 220px; min-height: 220px; } .v2-geofence-map-editor > footer { align-items: stretch; flex-direction: column; } .v2-geofence-map-editor > footer > div, .v2-vehicle-quick-search { flex-wrap: wrap; } .v2-vehicle-quick-search .semi-input-wrapper { flex-basis: 100%; } .v2-vehicle-quick-results { grid-template-columns: 1fr; } } @media (max-width: 640px) { .v2-automation-run-context { min-height: 104px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px 56px; } .v2-automation-run-context > span { padding: 7px 10px; } .v2-automation-run-context .v2-automation-run-context-origin { grid-column: 1; grid-row: 1; border-bottom: 1px solid #e2e9f2; } .v2-automation-run-context-title { grid-column: 1; grid-row: 2; border-right: 0 !important; } .v2-automation-run-context-subject { display: none !important; } .v2-automation-run-context > .semi-button { grid-column: 2; grid-row: 1 / 3; min-width: 112px; min-height: 42px; margin: 0 9px; } } /* Automation governance: server-backed current/archive scopes and reversible lifecycle. */ .v2-event-center .v2-alert-automation-intro { grid-template-columns: 220px minmax(220px, 1fr) minmax(250px, 300px) 150px auto; } .v2-event-center .v2-alert-automation-scope-tabs { min-height: 40px; border: 1px solid #cfd9e6; border-radius: 8px; background: #fff; padding: 3px; } .v2-event-center .v2-alert-automation-scope-tabs > .semi-button { min-width: 0; min-height: 32px; flex: 1; border-radius: 6px; } .v2-event-center .v2-alert-automation-archive-hint { display: flex; min-height: 40px; align-items: center; gap: 9px; border: 1px solid #ead9b5; border-radius: 8px; background: #fffaf0; padding: 5px 11px; color: #805d19; } .v2-event-center .v2-alert-automation-archive-hint > .semi-icon { flex: 0 0 auto; font-size: 18px; } .v2-event-center .v2-alert-automation-archive-hint > span { display: grid; min-width: 0; } .v2-event-center .v2-alert-automation-archive-hint strong, .v2-event-center .v2-alert-automation-archive-hint small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-event-center .v2-alert-automation-archive-hint small { font-size: 11px; } .v2-event-center .v2-alert-automation-readonly { grid-area: switch; align-self: center; } .v2-alert-automation-archive-receipt { display: grid; grid-template-columns: 34px minmax(180px, 1fr) minmax(360px, 1.5fr); align-items: center; gap: 12px; margin: 14px 16px 0; border: 1px solid #ead9b5; border-radius: 8px; background: #fffaf0; padding: 12px 14px; color: #5f4618; } .v2-alert-automation-archive-receipt > .semi-icon { font-size: 22px; } .v2-alert-automation-archive-receipt > span { display: grid; gap: 3px; } .v2-alert-automation-archive-receipt > span small { color: #806a42; } .v2-alert-automation-archive-receipt dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; } .v2-alert-automation-archive-receipt dl > div { display: grid; gap: 2px; border-left: 1px solid #ead9b5; padding-left: 12px; } .v2-alert-automation-archive-receipt dt { color: #8b7650; font-size: 11px; } .v2-alert-automation-archive-receipt dd { margin: 0; font-weight: 600; } .v2-automation-lifecycle-form { display: grid; gap: 18px; } .v2-automation-lifecycle-form > label { display: grid; gap: 8px; } .v2-automation-lifecycle-form > label > span { font-weight: 600; } .v2-automation-lifecycle-form > label > small { color: #65758b; } @media (max-width: 1180px) and (min-width: 641px) { .v2-event-center .v2-alert-automation-intro { grid-template-columns: 210px minmax(200px, 1fr) 250px 140px auto; } } @media (max-width: 640px) { .v2-event-center .v2-alert-automation-intro { grid-template-columns: minmax(0, 1fr) auto; } .v2-event-center .v2-alert-automation-scope-tabs, .v2-event-center .v2-alert-automation-intro > .semi-input-wrapper, .v2-event-center .v2-alert-automation-status-tabs, .v2-event-center .v2-alert-automation-archive-hint { grid-column: 1 / -1; width: 100%; min-width: 0; } .v2-event-center .v2-alert-automation-scope-tabs { overflow-x: auto; } .v2-alert-automation-archive-receipt { grid-template-columns: 28px minmax(0, 1fr); margin: 12px; } .v2-alert-automation-archive-receipt dl { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 8px; } .v2-alert-automation-archive-receipt dl > div { grid-template-columns: 84px minmax(0, 1fr); border-top: 1px solid #ead9b5; border-left: 0; padding-top: 8px; padding-left: 0; } }